/* Pivot Point — foundations: the faces, the page basics, and the reveal system that
   motion.js drives. Every page loads this first and assets/illustrated-section.css
   (the design itself) after it.

   Three faces, all self-hosted:
     Archivo           the voice of the site, one variable file per subset (100–900)
     Instrument Serif  the spoken lines: the founders' belief, the questions, the
                       quotes, each service's opening line. It replaced Times New
                       Roman on 2026-09-30: Times read as a default system serif,
                       which is what a missing web font looks like. */

/* Archivo — variable, so one declaration per subset covers every weight */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif — latin, regular and italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("instrument-serif-normal.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("instrument-serif-italic.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: 1.1; }
p { margin: 0; }
img, video { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.pp-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }
.pp-display { font-family: 'Archivo', Arial, sans-serif; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* --- reveals -------------------------------------------------------------
   motion.js tags each element with a kind by where it sits (no animation
   attributes in the markup) and adds .is-in as it comes into view. */

[data-reveal] {
  transition-delay: var(--reveal-delay, 0ms);
}

/* wipe — the default heading. Clips an inner wrapper, never the observed
   element: an element fully hidden by clip-path reports zero intersection, so
   the observer would never fire on it and the heading would stay hidden. */
[data-reveal="wipe"] > .pp-wipe {
  display: block;
  clip-path: inset(0 0 100% 0);
  transform: translateY(6px);
  transition-property: clip-path, transform;
  transition-duration: 1.05s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="wipe"].is-in > .pp-wipe {
  clip-path: inset(0 -0.2em -0.2em 0);
  transform: none;
}

/* lines — the voice headline. Each line rises out of its own edge. */
[data-reveal="lines"] .pp-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
[data-reveal="lines"] .pp-line > span {
  display: block;
  transform-origin: 0 100%;
  transform: translateY(112%) rotate(1.5deg);
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 95ms);
}
[data-reveal="lines"].is-in .pp-line > span { transform: translateY(0) rotate(0); }

/* words — a word at a time: case titles, and the founders' belief, which settles in
   like ink rather than typing itself out (the letter scramble read as "techy") */
[data-reveal="words"] .pp-w {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(0.35em);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--i, 0) * 60ms);
}
[data-reveal="words"].is-in .pp-w { opacity: 1; filter: none; transform: none; }

/* rise — body copy, rows, cards */
[data-reveal="rise"] {
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;
  transition-duration: 0.95s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="rise"].is-in { opacity: 1; transform: none; }
/* clip — the case-study brand tiles and the service cards. It used to be a mask
   wipe; the cards' art now breaks out of the frame and would be cut off by one, so
   it rises like the rest. Never clip-path here: see site.test.js. */
[data-reveal="clip"] {
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;
  transition-duration: 0.95s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="clip"].is-in { opacity: 1; transform: none; }

/* tilt — the results figures and the case figures hinge up from flat, like a
   counter board */
[data-reveal="tilt"] {
  opacity: 0;
  transform-origin: 50% 100%;
  transform: perspective(800px) rotateX(-82deg);
  transition-property: opacity, transform;
  transition-duration: 0.5s, 0.85s;
  transition-timing-function: ease, cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="tilt"].is-in {
  opacity: 1;
  transform: perspective(800px) rotateX(0);
}

/* blur — quotes come into focus rather than moving */
[data-reveal="blur"] {
  opacity: 0;
  filter: blur(8px);
  transition-property: opacity, filter;
  transition-duration: 0.8s;
  transition-timing-function: ease, cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="blur"].is-in {
  opacity: 1;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-in,
  [data-reveal] > .pp-wipe,
  [data-reveal] .pp-line > span,
  [data-reveal] .pp-w {
    /* resolve to the finished state — shortening the duration still animates,
       which is the thing being asked not to happen */
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}