/* ==========================================================================
   SiteYourStory — art direction pass.

   Hierarchy, not size. Nothing here changes a typeface: the site is Switzer
   and Inter before this file and after it. What changes is the distance
   between the levels — the chapter marks, the display headings, the body and
   the microcopy were all sitting within about one step of each other, which is
   what made the page read as even rather than composed.

   Four levels, and the gaps between them are the point:

     chapter mark   0.86rem, 0.28em tracked, uppercase   — "Selected work"
     display        clamp to 5.4rem, light, tight        — the section's line
     body           unchanged                            — the reading size
     microcopy      0.78rem, tracked                     — captions, notes

   Loaded last, after motion.css and route.css.
   ========================================================================== */

/* --- The chapter mark ------------------------------------------------------
   "Selected work", "Why us", "How it happens", "Tell us your story" are the
   table of contents of the page. They were 0.7rem and easy to miss; at 0.86
   with wider tracking they read as the chapter headings they are, without
   competing with the line underneath.
   ------------------------------------------------------------------------ */
.f-eyebrow,
.label {
  font-size: 0.86rem !important;
  letter-spacing: 0.26em !important;
  font-weight: 600 !important;
}

/* The film's own chapter marks stay where they were — they are cut to footage
   and sized against it, not against the page. */
.film .f-eyebrow,
.film-stage .f-eyebrow { font-size: 0.72rem !important; letter-spacing: 0.22em !important; }

/* --- The display line ------------------------------------------------------
   One step larger and a little tighter, so the eye lands on it first on
   arriving at a section. Weight is left alone: story.css sets these light on
   purpose and heavy display type would fight the photograph behind it.
   ------------------------------------------------------------------------ */
.cf-title,
.usp-head,
.close-head,
.process-title {
  font-size: clamp(2rem, 4.4vw, 5.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.032em !important;
  max-width: 20ch;
}

/* The closing chapter is the last thing on the page and gets the most room. */
.close-head { font-size: clamp(2.1rem, 4.9vw, 5.9rem) !important; }
.close .f-eyebrow { font-size: 0.95rem !important; letter-spacing: 0.3em !important; }

/* Space above a chapter is what makes it read as a new one. */
.cf-head .f-eyebrow,
.usp .f-eyebrow,
.process .f-eyebrow,
.close .f-eyebrow { margin-bottom: clamp(14px, 2vh, 26px) !important; }

/* --- Heading arrival -------------------------------------------------------
   One system, small variations. The line is masked and rises into place rather
   than fading in — a fade says "an animation ran", a mask says "the line was
   always there and the page has just reached it".
   reveal.js already adds .is-in to [data-rise]; this is only the dressing.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* Driven by route.js, not reveal.js. Marked with [data-rise] these two were
     picking up that system's opacity:0 and then never receiving .is-in — the
     two biggest headings on the page were rendering invisible. Their own
     attribute, their own observer, and the opacity lives here so nothing can
     hide them without also revealing them. */
  [data-reveal] {
    clip-path: inset(0 0 100% 0);
    translate: 0 14px;
    opacity: 0;
    transition: clip-path 1.15s var(--ease), translate 1.15s var(--ease),
      opacity 0.7s var(--ease);
  }
  [data-reveal].is-seen {
    clip-path: inset(0 0 0 0);
    translate: none;
    opacity: 1;
  }
  /* The mark leads the line it belongs to, by a beat. */
  .cf-head .f-eyebrow[data-rise],
  .close .f-eyebrow[data-rise] {
    opacity: 0;
    translate: 0 8px;
    transition: opacity 0.8s var(--ease), translate 0.8s var(--ease);
  }
  .cf-head .f-eyebrow[data-rise].is-in,
  .close .f-eyebrow[data-rise].is-in { opacity: 1; translate: none; }
}

/* ==========================================================================
   The hero.
   ========================================================================== */

/* The mark, the line, the note — the three sizes are deliberately far apart.
   hero.css already sizes and animates all three; these are the adjustments
   that make them work against a photograph rather than a dark plate. */
.hero-eyebrow {
  font-size: 0.8rem !important;
  letter-spacing: 0.34em !important;
  /* Solid, not 78%: at 13px over the brightest ground the mark sits on it
     measured 4.13:1, and the alpha was the whole difference. It is the brand
     name — it can afford to be the one thing in the hero at full strength. */
  color: #fff !important;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
}

.hero-head {
  font-size: clamp(2.4rem, 6.6vw, 6.8rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.98 !important;
  max-width: 15ch !important;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

/* The one accented word in the hero. --accent-lift is the palette's own
   AA-safe accent for dark grounds; #c0392b is a text colour for paper. */
.hero-head i {
  font-style: italic;
  color: var(--accent-lift);
}

.hero-sub {
  font-size: clamp(0.98rem, 1.15vw, 1.22rem) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  max-width: 34ch !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}

/* The readability pool was drawn for two links at the bottom of the frame,
   where the veil is already dense. The copy block is 411px tall now and its
   top reaches up into open sky: measured off the rendered page with the type
   hidden, the brightest ground under the mark was rgb(162,166,170) and under
   the headline rgb(163,159,145) — 2.06:1 and 2.65:1 against white.

   So the pool is re-centred on the copy rather than on the old link row, and
   its geometry is pinned here instead of inherited, so it is predictable.
   It stays a pool: soft-edged, local to the text, transparent by 90%. The
   mountain still reads through it and the rest of the frame is untouched —
   the alternative was darkening the whole hero, which is the one thing the
   background is too good to deserve. */
.hero-in::before {
  /* The vertical radius has to finish inside the box or the box itself shows.
     At `86% at 62%` the gradient was still ~0.2 opaque where the element
     ended, which drew a hard horizontal edge straight across the mountain.
     A radius of 50% against a centre at 55% puts the transparent stop past
     the top edge, so the pool ends by fading rather than by stopping. */
  inset: -80% -8% -40% -6% !important;
  background: radial-gradient(ellipse 72% 50% at 30% 55%,
    rgba(8, 6, 4, 0.76) 0%,
    rgba(8, 6, 4, 0.62) 32%,
    rgba(8, 6, 4, 0.36) 56%,
    rgba(8, 6, 4, 0.14) 78%,
    transparent 94%) !important;
}

/* --- The actions, as glass ------------------------------------------------
   story.css had reduced these to a rule under two words, which read as text
   rather than as something to press. Glass keeps them part of the frame — the
   mountain is visible through them — while still being obviously a control.
   ------------------------------------------------------------------------ */
.hero-cta {
  gap: clamp(12px, 1.4vw, 20px) !important;
  margin-top: clamp(28px, 4.2vh, 50px) !important;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  padding: clamp(12px, 1.4vh, 16px) clamp(22px, 2vw, 32px);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 12px 34px -20px rgba(0, 0, 0, 0.7);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
    translate 0.5s var(--ease);
}
.hero-pill:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
  translate: 0 -2px;
}
.hero-pill--quiet {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}
.hero-pill--quiet:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.36);
}

/* ==========================================================================
   The statement, as a quote.
   ========================================================================== */

/* Uppercase at one size was making four lines of equal shouting. The subject
   of each half now carries the weight and what it earns is said quietly, which
   is the shape of the sentence anyway. */
.say-line {
  text-transform: none !important;
  /* `ch` here resolves against the inherited 16px, not the 66px the lead is
     set at — 26ch was ~208px, which broke "Your marketing" across two lines.
     Sized in the viewport instead so each half stays on its own line. */
  max-width: min(88vw, 780px) !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
  line-height: 1.12 !important;
}

.say-lead,
.say-soft {
  display: block;
  /* Scroll-linked, not time-linked: --o is the statement's own arrival value
     from film.js, and each span subtracts its own --d from it. The lines
     therefore land in order as the section is scrolled, and run backwards just
     as correctly if it is scrolled away. */
  --t: clamp(0, calc((var(--o, 1) - var(--d, 0)) * 2.6), 1);
  opacity: var(--t);
  translate: 0 calc((1 - var(--t)) * 16px);
}

.say-lead {
  font-size: clamp(1.9rem, 4.6vw, 4.3rem);
  font-weight: 600;
  letter-spacing: -0.034em;
  color: var(--site-ink);
}

.say-soft {
  font-size: clamp(0.98rem, 1.7vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--site-ink-2);
  margin-bottom: clamp(14px, 2.2vh, 30px);
  padding-left: 0.12em;
}
.say-soft:last-child { margin-bottom: 0; }

/* The four marks were absolutely positioned against a two-line statement and
   now land across the middle of a four-part one. Put in the flow underneath it
   instead, where the device still reads left-to-right as
   marketing → click → website → trust, and cannot collide with anything. */
.hero-say { flex-direction: column; }
.say-path {
  position: static !important;
  transform: none !important;
  bottom: auto !important;
  left: auto !important;
  margin-top: clamp(22px, 3.4vh, 44px);
}

/* ==========================================================================
   Inner pages — the same four levels.
   ========================================================================== */
[data-page='inner'] .page-title {
  font-size: clamp(2.4rem, 6vw, 6.4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
}
[data-page='inner'] .head,
[data-page='inner'] .display {
  font-size: clamp(1.9rem, 3.9vw, 4.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
}
[data-page='inner'] .page-lede {
  font-size: clamp(1rem, 1.2vw, 1.28rem) !important;
  max-width: 46ch;
}

/* Microcopy, one level down and tracked so it reads as a caption. */
.cf-kind,
.w-kind,
.form-note,
.foot-love { font-size: 0.8rem !important; letter-spacing: 0.01em !important; }

.cf-ind,
.w-ind { font-size: 0.76rem !important; letter-spacing: 0.22em !important; }

/* --- Narrow ---------------------------------------------------------------
   The steps stay, the distances close up: a 390px screen cannot carry a 5.4rem
   display and a 0.86rem mark without one of them breaking.
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .f-eyebrow, .label { font-size: 0.76rem !important; letter-spacing: 0.22em !important; }
  .close .f-eyebrow { font-size: 0.82rem !important; }
  .cf-title, .usp-head, .close-head, .process-title { font-size: clamp(1.7rem, 7.4vw, 2.5rem) !important; }
  .close-head { font-size: clamp(1.8rem, 7.8vw, 2.7rem) !important; }
  .hero-head { font-size: clamp(2rem, 10.5vw, 3.2rem) !important; max-width: 13ch !important; }
  .hero-sub { font-size: 0.96rem !important; max-width: 30ch !important; }
  .hero-pill { padding: 12px 20px; font-size: 0.72rem; letter-spacing: 0.16em; }
  .say-lead { font-size: clamp(1.5rem, 8vw, 2.3rem); }
  .say-soft { font-size: clamp(0.92rem, 4vw, 1.1rem); }
}

/* ==========================================================================
   PASS TWO — the editorial serif.

   A display face, not a body face. Fraunces (variable, latin, weight axis
   only: 36KB + 46KB italic) carries the headlines and the italic accents;
   Switzer and Inter keep everything a reader has to *use* — navigation,
   labels, body, captions, project names, form fields, buttons.

   That split is the system. A serif on a class time or a button is a
   decoration that costs legibility; a serif on a headline is the voice. The
   brand palette is untouched — the serif is drawn in the same warm charcoal
   and the same accent as everything else.
   ========================================================================== */

@font-face {
  font-family: 'FrauncesVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'FrauncesVar';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-var-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: 'FrauncesVar', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

/* --- Display -------------------------------------------------------------
   The five moments that carry the page. Optical sizing is off (this cut has
   no opsz axis), so the tracking is tightened by hand at scale instead.
   ------------------------------------------------------------------------ */
.hero-head,
.cf-title,
.usp-head,
.close-head,
.process-title,
.say-lead,
[data-page='inner'] .page-title,
[data-page='inner'] .head,
[data-page='inner'] .display,
/* The quiet full-screen statements are display moments too — they were the
   one large voice still set in the sans, which read as a different page. */
[data-page='inner'] .utter p,
.finale-line {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
  font-synthesis: none;
}

/* A serif at display size wants more weight in the hero than in a section. */
.hero-head { font-weight: 500 !important; letter-spacing: -0.022em !important; }

/* --- The italic accent ---------------------------------------------------
   One phrase per moment, never a paragraph. The hero's "yours" and the
   statement's second half are the only two on the page, which is what keeps
   them reading as emphasis rather than as a style.
   ------------------------------------------------------------------------ */
.hero-head i,
.say-soft em,
.usp-head em,
.close-head em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* The statement's quiet halves take the serif italic; its loud halves stay
   upright. That is the whole contrast of the quote in one rule. */
.say-soft {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0 !important;
}

/* --- Sans keeps the information -----------------------------------------
   Explicit, so no later display rule can reach these by accident. Everything
   a visitor has to read to act stays in the face it was designed in.
   ------------------------------------------------------------------------ */
.nav, .nav *, .sheet, .sheet *,
.f-eyebrow, .label,
.lede, .body, .f-lede, .page-lede, .close-sub, .usp-close,
.cf-name, .cf-kind, .cf-ind, .cf-go, .cf-go *,
.w-name, .w-kind, .w-ind,
.stage h3, .stage p, .stage b,
.industry, .step, .step *, .stat, .stat *, .state, .state *, .row, .row *,
.form, .form *, .btn, .hero-pill, .hero-sub, .hero-eyebrow,
.foot, .foot *, .marks, .marks *, .traits, .industry-traits, .industry-traits * {
  /* Routed through the variable so the named face reaches the information
     layer too — Switzer and Inter remain as the fallback chain behind it. */
  font-family: var(--font-glacial) !important;
  font-style: normal;
}

/* --- The film's copy, over moving footage --------------------------------
   The chapter headings take the serif like every other display line, but the
   body under them stays sans and gets its tracking and leading opened up:
   type over a moving picture loses more to the movement than type on paper,
   so it needs the extra room rather than a heavier scrim.
   ------------------------------------------------------------------------ */
.f-head {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.016em !important;
  line-height: 1.04 !important;
}
.f-lede {
  line-height: 1.62 !important;
  letter-spacing: 0.004em !important;
  max-width: 40ch;
}
.f-ind {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

@media (max-width: 760px) {
  .say-soft { letter-spacing: 0 !important; }
  .f-lede { line-height: 1.56 !important; }
}

/* ==========================================================================
   Space, made intentional.

   Not a global squeeze — whitespace is most of why this design works. The
   reductions are where measurement showed space doing no work: section
   padding stacked on top of scene padding on top of a heading margin, so the
   gap between the last line of one section and the first of the next was
   running to two thirds of a screen with nothing in it.

   Section padding comes down about a fifth and the inner-page scene padding
   about a quarter. The composition inside each section is untouched.
   ========================================================================== */
:root {
  --section-pad: clamp(52px, 7.4vh, 96px);
  --scene-pad: clamp(64px, 9.5vh, 128px);
  --space-l: clamp(38px, 5.4vh, 70px);
  --space-m: clamp(24px, 3.2vh, 44px);
}

/* The three sections that measured tallest for what they contain. The film,
   the coverflow and the hero are left alone: their height is their content,
   and shortening them would take the experience with it. */
.usp { padding-block: var(--section-pad) !important; }
.finale { padding-block: clamp(52px, 8vh, 96px) !important; }

/* The closing form sat in a full section of its own padding plus the grid's.
   One of the two is enough. */
.close .close-grid { margin-top: clamp(26px, 3.6vh, 48px); }

/* Inner pages: a scene is one idea, and it was being given a screen and a
   half to say it. */
[data-page='inner'] .scene { padding-block: var(--scene-pad); }
[data-page='inner'] .scene--tall { padding-block: calc(var(--scene-pad) * 1.15); }
[data-page='inner'] .page-head {
  min-height: 62svh !important;
  padding-top: clamp(104px, 15vh, 170px) !important;
  padding-bottom: clamp(30px, 5vh, 64px) !important;
}
/* The quiet full-screen statement scenes were a whole viewport for one line. */
[data-page='inner'] .utter { min-height: 62svh !important; }

/* --- The film's chapter marks, over bright footage ------------------------
   Measured against the real frames with the copy hidden, the chapter marks
   were landing on footage as bright as rgb(216,216,216) — 1.34:1. The heads
   and ledes were fine (5.3–17.3) because they sit lower in the frame where
   the chapter scrim is dense; the mark sits above it.

   The answer is the same one the hero uses: a pool local to the words, not a
   panel over the picture. It is anchored to the copy column, soft-edged, and
   transparent by 88% — the footage either side of the text is untouched, and
   the frame keeps being the thing you are looking at.
   ------------------------------------------------------------------------ */
.ch .wrap { position: relative; }
.ch .wrap::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -34% -20% -30% -10%;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 52% at 28% 50%,
    rgba(6, 6, 8, 0.78) 0%,
    rgba(6, 6, 8, 0.6) 34%,
    rgba(6, 6, 8, 0.3) 60%,
    rgba(6, 6, 8, 0.1) 78%,
    transparent 92%);
}

/* Solid rather than 82%: at this size, over a moving picture, the alpha was
   most of the difference. */
.film .f-eyebrow,
.film-stage .f-eyebrow { color: #fff !important; }

/* On a phone the film is letterboxed and the copy sits low and centred, so
   the pool follows it. */
@media (max-width: 760px) {
  .ch .wrap::before {
    inset: -26% -12% -24% -12%;
    background: radial-gradient(ellipse 74% 56% at 50% 52%,
      rgba(6, 6, 8, 0.8) 0%,
      rgba(6, 6, 8, 0.6) 38%,
      rgba(6, 6, 8, 0.26) 66%,
      transparent 90%);
  }
}

/* ==========================================================================
   PASS THREE — Glacial Indifference + a cursive accent.

   Named faces, so they replace the previous pass rather than sit beside it:
   Glacial Indifference (SIL OFL) becomes the whole type system — display and
   information both — and a cursive carries the accent moments.

   Fraunces is left in assets/fonts and its rules are superseded below rather
   than deleted, so going back is a one-block revert.

   The cursive is deliberately restricted to display sizes. A script at 24px
   over moving footage is the exact thing the last pass spent its time fixing;
   at 95px in the hero it is the voice of the page. So: one word, one place.
   ========================================================================== */

@font-face {
  font-family: 'Glacial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/glacial-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Glacial';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/glacial-400italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Glacial';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/glacial-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Cursive';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/italianno-latin.woff2') format('woff2');
}

:root {
  --font-glacial: 'Glacial', 'Switzer', 'InterVar', Inter, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cursive: 'Cursive', 'Snell Roundhand', 'Apple Chancery', cursive;
  --font-display: var(--font-glacial);
}

/* Everything. One face, so the hierarchy is carried by size, weight and
   spacing rather than by swapping typefaces around. */
html body,
body .hero-head, body .cf-title, body .usp-head, body .close-head,
body .process-title, body .say-lead, body .say-soft, body .f-head, body .f-ind,
body .finale-line,
[data-page='inner'] .page-title, [data-page='inner'] .head,
[data-page='inner'] .display, [data-page='inner'] .utter p {
  font-family: var(--font-glacial) !important;
  font-style: normal;
}

/* Glacial is a geometric sans with a single upright and a single bold, so the
   display sizes take the bold and the tracking closes up — that is where the
   editorial weight comes from now that there is no serif contrast to carry it. */
body .hero-head,
body .cf-title,
body .usp-head,
body .close-head,
body .process-title,
body .say-lead,
body .f-head,
body .f-ind,
[data-page='inner'] .page-title,
[data-page='inner'] .head,
[data-page='inner'] .display,
[data-page='inner'] .utter p {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* The quiet halves of the statement stay upright and light against those —
   Glacial's own italic is an oblique and reads as a slant, not as a voice. */
body .say-soft {
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
}

/* --- The cursive accent ---------------------------------------------------
   One word in the hero. Set larger than the line it sits in, because a script
   at the same nominal size reads smaller, and pulled back into the baseline
   with a small optical nudge.
   ------------------------------------------------------------------------ */
body .hero-head i {
  font-family: var(--font-cursive) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1.42em;
  line-height: 0.8;
  letter-spacing: 0.01em !important;
  padding-inline: 0.06em;
  /* A script has far less ink per glyph than the upright beside it, so it
     needs the extra shadow to hold the same contrast over the photograph. */
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.6), 0 1px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 760px) {
  body .hero-head i { font-size: 1.34em; }
}

/* ==========================================================================
   The hero's top gradient, removed.

   It was added to hold the nav's white type over bright sky — the corridor
   shot it was designed against was dark, this one opens on cloud. But it
   reads as a black band laid across the top of the photograph, which is the
   one thing the hero should not have.

   Gone. The nav keeps its legibility from the frosted band it already uses
   over the canvas, extended to the hero — glass carries the type without
   putting a gradient over the mountain.
   ========================================================================== */
.hero-stage::after { display: none !important; }

/* 0.44, measured: at 0.30 the 11px nav links came out at 3.06 against the
   brightest cloud behind them, which is under AA for type that size. This is
   the least glass that clears it — and it is a frosted band, not a gradient
   over the picture: the mountain reads straight through it. */
/* !important because film.css pins the bare nav with it — the same rule that
   made the earlier lift silently do nothing. */
.nav--film {
  background: rgba(18, 15, 12, 0.44) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* Over the canvas the ink flips and the glass goes light — that rule already
   exists in motion.css and still wins, because it is more specific. */

/* ==========================================================================
   Every dark overlay in the hero, removed.

   Four things were darkening the photograph:
     .hero-stage::after   the top band for the nav      (already gone)
     .hero-veil           a bottom-weighted black ramp
     .hero-in::before     the radial pool behind the copy
     .nav--film           the frosted band

   All off. What holds the type now is where it sits: the copy is in the
   bottom-left of the frame, which is the meadow in shadow — the footage is
   already dark there — plus a tightened text-shadow, which darkens only the
   pixels immediately around each glyph rather than a whole region of picture.
   ========================================================================== */
.hero-veil { display: none !important; }
.hero-in::before { display: none !important; }
.hero-stage::after { display: none !important; }

.nav--film {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}

/* The shadow does the work the gradients were doing, at glyph scale. */
.hero-eyebrow { text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.7) !important; }
.hero-head    { text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 4px 30px rgba(0,0,0,0.6) !important; }
.hero-sub     { text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.65) !important; }
.nav--film .logo,
.nav--film .nav-index .nav-link { text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.7) !important; }

/* --- No overlay: the contrast has to come from the glyph itself ------------
   With every gradient gone the copy sits directly on sunlit cloud and meadow,
   and measured that way the headline is 1.28:1. A soft glow cannot fix that —
   it spreads, so the bright ground reads straight through it.

   A tight, near-opaque edge can: it darkens only the pixel or two hugging each
   letterform, so the type gets a hard boundary against whatever is behind it
   while the photograph is left completely untouched. No band, no pool, no
   wash — the mountain is exactly as shot.

   Worth being straight about: this is a perceptual fix, not a WCAG one. The
   ratio is measured between text and background, and an outline is neither,
   so an automated audit will still score the hero low even though it reads
   cleanly. If it has to be compliant, something has to darken.
   ------------------------------------------------------------------------ */
.hero-eyebrow {
  text-shadow:
    0 0 1px rgba(0,0,0,0.95), 1px 1px 1px rgba(0,0,0,0.9),
    -1px 1px 1px rgba(0,0,0,0.9), 1px -1px 1px rgba(0,0,0,0.9),
    -1px -1px 1px rgba(0,0,0,0.9), 0 2px 10px rgba(0,0,0,0.55) !important;
}
.hero-head {
  text-shadow:
    0 0 2px rgba(0,0,0,0.85), 2px 2px 2px rgba(0,0,0,0.8),
    -2px 2px 2px rgba(0,0,0,0.8), 2px -2px 2px rgba(0,0,0,0.8),
    -2px -2px 2px rgba(0,0,0,0.8), 0 6px 34px rgba(0,0,0,0.5) !important;
}
.hero-sub {
  color: #fff !important;
  text-shadow:
    0 0 1px rgba(0,0,0,0.95), 1px 1px 1px rgba(0,0,0,0.9),
    -1px 1px 1px rgba(0,0,0,0.9), 1px -1px 1px rgba(0,0,0,0.9),
    -1px -1px 1px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.55) !important;
}
.nav--film .logo,
.nav--film .nav-index .nav-link {
  text-shadow:
    0 0 1px rgba(0,0,0,0.95), 1px 1px 1px rgba(0,0,0,0.9),
    -1px 1px 1px rgba(0,0,0,0.9), 1px -1px 1px rgba(0,0,0,0.9),
    -1px -1px 1px rgba(0,0,0,0.9), 0 2px 10px rgba(0,0,0,0.6) !important;
}
/* The pills keep a translucent fill — that is the control's own surface, not
   an overlay on the picture, and it is what makes them read as pressable. */
.hero-pill {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.42) !important;
  text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 1px 6px rgba(0,0,0,0.7) !important;
}

/* ==========================================================================
   PASS FOUR — mono + tight grotesque.

   From the reference: two voices, sharply separated.

     information   monospace, wide tracking, small — nav, labels, body,
                   metadata, captions, buttons. Everything a reader uses.
     display       one neutral grotesque, heavy and tight — headlines only.

   That is the whole system. The contrast is not serif-vs-sans, it is
   *proportional vs fixed-width* — mono reads as specification, the headline
   reads as statement, and nothing in between competes.

   Inter carries the display: it is already vendored, and a neutral grotesque
   at 700 with negative tracking is exactly the reference's headline. The
   cursive is retired — the reference has no italic moment, and one script
   word would now be the only thing on the site not in this system.
   ========================================================================== */

@font-face {
  font-family: 'PlexMono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'PlexMono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500.woff2') format('woff2');
}

:root {
  --font-mono: 'PlexMono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-grotesk: 'InterVar', Inter, 'Glacial', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Display: the statement ----------------------------------------------
   Heavy and tight. A grotesque at 700 with -0.035em is the reference's
   headline; anything looser stops reading as one block of voice.
   ------------------------------------------------------------------------ */
html body .hero-head,
html body .cf-title,
html body .usp-head,
html body .close-head,
html body .process-title,
html body .say-lead,
html body .f-head,
html body .f-ind,
html body .finale-line,
[data-page='inner'] .page-title,
[data-page='inner'] .head,
[data-page='inner'] .display,
[data-page='inner'] .utter p {
  font-family: var(--font-grotesk) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
  font-style: normal !important;
}
html body .hero-head { line-height: 0.96 !important; letter-spacing: -0.04em !important; }

/* The accent word keeps the brand colour and loses the script — same face and
   weight as the line it sits in, so it reads as emphasis, not decoration. */
html body .hero-head i {
  font-family: var(--font-grotesk) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 1em !important;
  letter-spacing: -0.04em !important;
  line-height: inherit !important;
  padding-inline: 0 !important;
  color: var(--accent-lift) !important;
}

/* --- Mono: everything a reader uses --------------------------------------
   Mono sets about 15% wider than a proportional face at the same size, so the
   sizes come down a step and the leading opens up. Tracking is what makes it
   read as deliberate rather than as code.
   ------------------------------------------------------------------------ */
html body,
html body .nav, html body .nav *,
html body .sheet, html body .sheet *,
html body .f-eyebrow, html body .label,
html body .hero-eyebrow, html body .hero-sub,
html body .lede, html body .body, html body .f-lede, html body .page-lede,
html body .close-sub, html body .usp-close, html body .say-soft,
html body .f-ind-note,
html body .cf-name, html body .cf-kind, html body .cf-ind,
html body .cf-go, html body .cf-go *,
html body .w-name, html body .w-kind, html body .w-ind,
html body .stage h3, html body .stage p, html body .stage b,
html body .industry, html body .step, html body .step *,
html body .stat, html body .stat *, html body .state, html body .state *,
html body .row, html body .row *,
html body .form, html body .form *, html body .btn,
html body .hero-pill, html body .usp-list li,
html body .foot, html body .foot *,
html body .marks, html body .marks *,
html body .industry-traits, html body .industry-traits * {
  font-family: var(--font-mono) !important;
}

/* Labels and nav: small, tracked, uppercase — the reference's quietest voice. */
html body .f-eyebrow,
html body .label,
html body .hero-eyebrow,
html body .cf-ind, html body .w-ind,
html body .nav-index .nav-link {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
html body .close .f-eyebrow { font-size: 0.78rem !important; }
html body .hero-eyebrow { letter-spacing: 0.24em !important; }

/* Reading copy: mono needs the leading, and a shorter measure — a monospace
   line of the same character count is far wider. */
html body .hero-sub,
html body .lede, html body .body, html body .f-lede, html body .page-lede,
html body .close-sub, html body .stage p, html body .f-ind-note,
html body .say-soft {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  line-height: 1.78 !important;
  letter-spacing: 0.01em !important;
  max-width: 46ch;
}
html body .close-sub, html body .usp-close { font-size: 0.92rem !important; }

/* Names and card headings sit between the two: mono, but at reading size and
   a touch heavier so a project still announces itself. */
html body .cf-name,
html body .w-name,
html body .stage h3 {
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  font-size: clamp(1rem, 1.3vw, 1.25rem) !important;
}

/* Controls: mono, tracked, so an action reads as an instruction. */
html body .hero-pill,
html body .btn,
html body .cf-go a {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

/* Microcopy, one step below reading size. */
html body .cf-kind, html body .w-kind,
html body .form-note, html body .foot-love {
  font-size: 0.72rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.7 !important;
}

@media (max-width: 760px) {
  html body .f-eyebrow, html body .label, html body .hero-eyebrow,
  html body .nav-index .nav-link { font-size: 0.66rem !important; letter-spacing: 0.13em !important; }
  html body .hero-sub, html body .lede, html body .body, html body .f-lede,
  html body .page-lede, html body .stage p, html body .say-soft {
    font-size: 0.78rem !important; line-height: 1.72 !important; max-width: 38ch;
  }
  html body .hero-pill, html body .btn { font-size: 0.64rem !important; letter-spacing: 0.11em !important; }
}

/* ==========================================================================
   PASS FIVE — the settled system.

   Three roles, three faces, and nothing else. Every earlier pass in this file
   is superseded from here down.

     DISPLAY   Space Grotesk 700, tight     headlines only
     TEXT      Switzer                      body, ledes, names, forms
     LABEL     IBM Plex Mono, tracked caps  nav, eyebrows, captions, buttons

   Why these three against this site: the ground is a warm, sunlit, cinematic
   landscape. A cold or purely technical set fights it. Switzer is the brand's
   own face and is warm and contemporary; Space Grotesk gives the headlines
   character without shouting — it reads as a studio rather than a template;
   Plex Mono keeps the editorial, specification-like voice from the reference
   for the small type, which is exactly where that voice belongs.

   Mono was carrying the body copy in the last pass. It reads as technical at
   paragraph length and sets ~15% wide, which is why the measures had to keep
   shrinking. It is a label face here, not a reading face.
   ========================================================================== */

@font-face {
  font-family: 'Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/grotesk-700.woff2') format('woff2');
}

:root {
  --f-display: 'Grotesk', 'InterVar', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --f-text: 'Switzer', 'InterVar', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-label: 'PlexMono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- No outlines anywhere -------------------------------------------------
   The glyph-edge shadows were a workaround for having nothing behind the
   type. The hero footage is graded now, so the contrast comes from the
   picture and the letterforms can be clean.
   ------------------------------------------------------------------------ */
html body .hero-eyebrow,
html body .hero-head,
html body .hero-head i,
html body .hero-sub,
html body .hero-pill,
html body .nav--film .logo,
html body .nav--film .nav-index .nav-link,
html body .f-eyebrow,
html body .f-head,
html body .f-lede {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* --- DISPLAY -------------------------------------------------------------- */
html body .hero-head,
html body .cf-title,
html body .usp-head,
html body .close-head,
html body .process-title,
html body .say-lead,
html body .f-head,
html body .f-ind,
html body .finale-line,
html body [data-page='inner'] .page-title,
html body [data-page='inner'] .head,
html body [data-page='inner'] .display,
html body [data-page='inner'] .utter p {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
  font-style: normal !important;
}
html body .hero-head { line-height: 0.98 !important; letter-spacing: -0.035em !important; }
html body .hero-head i { font-family: var(--f-display) !important; font-weight: 700 !important; color: var(--accent-lift) !important; }

/* --- TEXT ----------------------------------------------------------------- */
html body,
html body .hero-sub,
html body .lede, html body .body, html body .f-lede, html body .page-lede,
html body .close-sub, html body .usp-close, html body .say-soft,
html body .f-ind-note, html body .stage p,
html body .cf-name, html body .w-name, html body .stage h3,
html body .industry, html body .step, html body .step *,
html body .stat, html body .stat *, html body .state, html body .state *,
html body .row, html body .row *,
html body .form, html body .form *,
html body .usp-list li, html body .usp-list li span,
html body .sheet, html body .sheet *,
html body .marks, html body .marks *,
html body .industry-traits, html body .industry-traits * {
  font-family: var(--f-text) !important;
}

html body .hero-sub,
html body .lede, html body .body, html body .f-lede, html body .page-lede,
html body .stage p, html body .f-ind-note, html body .say-soft {
  font-size: clamp(0.96rem, 1.05vw, 1.12rem) !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
  max-width: 52ch;
}
html body .close-sub, html body .usp-close { font-size: clamp(1.05rem, 1.5vw, 1.45rem) !important; }

html body .cf-name, html body .w-name, html body .stage h3 {
  font-weight: 500 !important;
  letter-spacing: -0.018em !important;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem) !important;
}

/* --- LABEL ---------------------------------------------------------------- */
html body .f-eyebrow,
html body .label,
html body .hero-eyebrow,
html body .cf-ind, html body .w-ind,
html body .cf-kind, html body .w-kind,
html body .nav-index .nav-link,
html body .hero-pill, html body .btn, html body .cf-go a,
html body .form-note, html body .foot-love, html body .foot-nav a,
html body .stage b, html body .step-n {
  font-family: var(--f-label) !important;
}

html body .f-eyebrow,
html body .label,
html body .hero-eyebrow,
html body .cf-ind, html body .w-ind,
html body .nav-index .nav-link,
html body .stage b {
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
html body .hero-eyebrow { letter-spacing: 0.26em !important; }
html body .close .f-eyebrow { font-size: 0.76rem !important; }

html body .hero-pill, html body .btn, html body .cf-go a {
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 0.68rem !important;
}
html body .cf-kind, html body .w-kind,
html body .form-note, html body .foot-love, html body .foot-nav a {
  font-size: 0.72rem !important;
  letter-spacing: 0.03em !important;
  line-height: 1.7 !important;
  text-transform: none !important;
}

/* The logo is the mark, and it keeps the display face. */
html body .logo { font-family: var(--f-display) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }

@media (max-width: 760px) {
  html body .f-eyebrow, html body .label, html body .hero-eyebrow,
  html body .nav-index .nav-link { font-size: 0.64rem !important; letter-spacing: 0.15em !important; }
  html body .hero-sub, html body .lede, html body .body, html body .f-lede,
  html body .page-lede, html body .stage p, html body .say-soft {
    font-size: 0.95rem !important; line-height: 1.6 !important; max-width: 40ch;
  }
  html body .hero-pill, html body .btn { font-size: 0.62rem !important; }
}

/* --- Hero composition -----------------------------------------------------
   With the overlays and the outlines both gone, the only thing that can
   carry the copy is the picture, and the picture is only dark in its lower
   half — the rock and the field. Measured across the graded frame, a white
   headline sits at 2.3:1 where the block used to start and 3.2:1 once it
   drops into the terrain.

   So the block drops. It reads as the low-left anchor the reference uses,
   and the scroll cue moves out of its way to the right rather than being
   stacked under it.
   ------------------------------------------------------------------------ */
html body .hero-stage {
  padding-block: clamp(110px, 16vh, 180px) clamp(30px, 4.2vh, 52px) !important;
}
html body .hero-head {
  font-size: clamp(2.5rem, 6.6vw, 5.4rem) !important;
  margin: 0.22em 0 0.34em !important;
}
html body .hero-eyebrow { margin: 0 0 0.2em !important; }
html body .hero-sub { margin: 0 0 1.5em !important; }
html body .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

html body .hero-cue {
  left: auto !important;
  right: clamp(20px, 4vw, 56px) !important;
  transform: none !important;
  bottom: clamp(24px, 3.6vh, 44px) !important;
}
html body .hero-cue::after { margin: 9px 0 0 auto !important; }

@media (max-width: 760px) {
  html body .hero-head { font-size: clamp(2.1rem, 10.5vw, 3.1rem) !important; }
  html body .hero-stage { padding-block: 96px clamp(26px, 4vh, 40px) !important; }
  html body .hero-cue { display: none !important; }
}

/* --- Inner pages ----------------------------------------------------------
   data-page='inner' sits on <html>, and the earlier rules select it at
   (0,2,0). Anything written as "html body .page-title" is (0,1,2) and loses
   even with !important, which is why those pages stayed on the fallback face
   at weight 800. Selecting through <html> puts this block at (0,2,2), and it
   is last, so it wins cleanly. The section sub-heads join the display role
   so every heading on the site is one family at one weight.
   ------------------------------------------------------------------------ */
html[data-page='inner'] body .page-title,
html[data-page='inner'] body .head,
html[data-page='inner'] body .display,
html[data-page='inner'] body .utter p,
html[data-page='inner'] body .row-t,
html[data-page='inner'] body .step-t,
html body .row-t,
html body .step-t,
html body h1, html body h2, html body h3 {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  font-style: normal !important;
}

/* Sub-heads were running level with the page title. A clear step down. */
html body .row-t, html body .step-t,
html[data-page='inner'] body .row-t,
html[data-page='inner'] body .step-t {
  font-size: clamp(1.5rem, 2.3vw, 2.05rem) !important;
  line-height: 1.1 !important;
}
html[data-page='inner'] body .head,
html[data-page='inner'] body .display {
  font-size: clamp(1.9rem, 3.4vw, 3.05rem) !important;
  line-height: 1.06 !important;
}
html[data-page='inner'] body .page-title {
  font-size: clamp(2.6rem, 6vw, 5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
}
html[data-page='inner'] body .page-lede,
html[data-page='inner'] body .lede,
html[data-page='inner'] body .body {
  font-family: var(--f-text) !important;
  font-weight: 400 !important;
}

/* Names in cards stay on the text face — they are content, not headings. */
html body .cf-name, html body .w-name {
  font-family: var(--f-text) !important;
  font-weight: 500 !important;
  letter-spacing: -0.018em !important;
}

/* --- Last of the edges ----------------------------------------------------
   The hero is now entirely free of shadows on type. The two that remain are
   over the industry plates, where the type sits directly on photography and
   nothing else is holding it — those stay, but as a wide diffuse depth
   rather than anything with an edge.
   ------------------------------------------------------------------------ */
html body .hero-cue { text-shadow: none !important; }
html body .f-ind { text-shadow: 0 6px 44px rgba(0, 0, 0, 0.5) !important; }
html body .f-ind-note { text-shadow: 0 4px 26px rgba(0, 0, 0, 0.5) !important; }

/* --- Headline break -------------------------------------------------------
   "Websites made" ran to x=655 and its last word crossed the sunlit face of
   the rock, which is the one bright thing at the copy's height — 2.1:1 on the
   worst pixel while everything around it measured 4:1 and better.

   Broken into three, each line stays inside the terrain: measured 4.02 /
   3.18 / 3.31 on worst pixel, holding even if the lines ran 70px wider than
   they do. The size comes down a touch so three lines occupy roughly the
   height two did and the block keeps its low anchor — and the accent word
   gets a line of its own, which is a better composition than it had.
   ------------------------------------------------------------------------ */
html body .hero-head {
  font-size: clamp(2.35rem, 5.1vw, 4.5rem) !important;
  line-height: 0.99 !important;
}
html body .hero-line:nth-child(3) > span { animation-delay: 0.22s; }

@media (max-width: 760px) {
  html body .hero-head { font-size: clamp(2rem, 9.4vw, 2.9rem) !important; }
}

/* The eyebrow rides above the headline, so a taller headline pushes it up
   into the lit face of the rock — 3.4:1 where it landed. Measured, the
   ground only goes properly dark below y=520. Rather than shrink the
   headline to get there, the block's internal spacing gives up the height:
   tighter leading, a closer sub, a shorter gap before the buttons. Same
   composition, ~80px lower. */
html body .hero-head {
  line-height: 0.96 !important;
  margin: 0.14em 0 0.24em !important;
}
html body .hero-sub { margin: 0 0 1.05em !important; }
html body .hero-stage {
  padding-block: clamp(96px, 14vh, 160px) clamp(24px, 3.2vh, 40px) !important;
}