/* Fluency Labs homepage v0.4, rebuilt on the V5 brand book (brand/design-system.md).
   Colour: the eight tokens, asked for by role. A dark section swaps the roles (data-tone="dark"); it never inverts.
   Type: one family, PP Neue Montreal (Book 400, Medium 500, Bold 700), from homepage/fonts/, the agency's files (1 Oct 2026).
   The files stay out of git: the web licence is unconfirmed. Without them the page falls back to the system sans, never Inter.
   Weights 400 and 500 only, and tracking never tighter than the book's styles.
   Spacing: 8 12 16 20 24 28 32 40 48, plus the layout tokens below. Radius 4; photos 16; web buttons are pills.
   No shadows, and no opacity or rgba on brand colour. The exceptions are the book's Fathom scrim under type on footage, and the
   nav's glass past the hero (Xavi, 1 Oct 2026; nav.css).
   Motion: the diagrams move, and so does the hero: its footage and the silk over it, which follows the pointer (Xavi, 30 Sep 2026).
   The logo grid's photo grounds and the nav's glass carry the silk too (1 Oct).
   Type and logo stay still. */
/* PP Neue Montreal: the delivered OTFs (Drive, Fonts/), checked against the brand registry's hashes. Paths are relative to the homepage;
   the build points them at homepage/fonts/ for the intro and the previews. */
@font-face{font-family:"PP Neue Montreal";src:url(fonts/PPNeueMontreal-Book.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(fonts/PPNeueMontreal-Medium.otf) format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(fonts/PPNeueMontreal-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}
:root{
  --fathom:#0C273C; --deep:#004A54; --tidal:#00958A; --mist:#B1FFD2; --slate:#729FA5; --grey:#B8CED2; --foam:#DCF2F2; --white:#FFFFFF;
  --n400:#7C8094;   /* the book's neutral 400: the e-book's caption grey (Where we operate) */
  --n500:#616479;   /* its neutral 500: the same caption where the line is under 24 px and 400 falls short of 4.5:1 */
  --sand:#E8D8C4; --stone:#C8B8A6; --gold:#876B46; --amber:#D9A441;   /* the book's warm family (design-system §6): Warm Sand, Warm Stone, Dark Gold, Soft Amber. A ground for editorial moments, one a piece, Fathom the ink on it */
  --ground:var(--white); --surface:var(--foam); --ink:var(--fathom); --ink-muted:var(--deep); --edge:var(--grey);
  --font:"PP Neue Montreal",sans-serif;
  --m:clamp(20px,3.75vw,72px); --max:1776px;            /* side margin: 72 at 1920, the book's margin */
  /* section rhythm, from the V5 e-book's proportions: heading to content 48, block to block 160 at 1440 (64 and 208 at 1920).
     Every section pads by --sec at both ends, so any two blocks sit 2 × --sec apart. Component spacing stays on the scale. */
  --sec:clamp(56px,calc(5vw + 8px),104px); --head:clamp(32px,3.333vw,64px); --gap:24px;
  --r:4px; --r-photo:16px; --nav:80px;
  /* type: the book's sizes at 1920, scaled with the viewport below it. Display 60 (the web mock's hero), section title 48
     (the book's rail title), subline 40, lead 24, detail 16, button 20, KPI 96. */
  --t-display:clamp(40px,3.125vw,60px); --t-h2:clamp(32px,3.1vw,60px); --t-sub:clamp(24px,2.083vw,40px);
  --t-h3:clamp(20px,1.667vw,32px); --t-lead:clamp(17px,1.25vw,24px); --t-detail:clamp(13px,.833vw,16px); --t-btn:clamp(16px,1.042vw,20px);
  --t-fig:clamp(56px,5vw,96px); --t-kpi:clamp(56px,5vw,96px);
  color-scheme:light;
}
[data-tone=dark]{--ground:var(--fathom);--surface:var(--deep);--ink:var(--white);--ink-muted:var(--grey)}
*{box-sizing:border-box}
html{font-synthesis:none;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav)}
/* no scrollbar track: on a Mac with an always-visible scrollbar, Chrome drew its light track beside the dark hero, which read as a white border down the page's right edge (Julian, 8 Oct 2026). The page still scrolls by wheel, trackpad, keys and touch. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}   /* a link to a section stops with the section's top edge at the nav's foot, not under it */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--fathom);font:400 17px/1.55 var(--font);font-variant-numeric:lining-nums proportional-nums;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dt,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
[data-tone]{background:var(--ground);color:var(--ink)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--m)}
.sec{padding-block:var(--sec)}
.foam{background:var(--foam)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.grid > *{min-width:0}

/* type: the book's five styles, translated to the web */
.detail{font-size:var(--t-detail);font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.display{font-size:var(--t-display);font-weight:400;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.h2{font-size:var(--t-h2);font-weight:400;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.sub{font-size:var(--t-sub);font-weight:400;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.h3{font-size:var(--t-h3);font-weight:400;line-height:1.25;letter-spacing:-.01em;text-wrap:pretty}
.lead{font-size:var(--t-lead);line-height:1.45;max-width:44ch}
.small{font-size:15px;line-height:1.5;color:var(--ink-muted)}
.nb{white-space:nowrap}                                   /* a compound that mustn't break at its hyphen ("AI-native") */
.acc{color:var(--deep)}                                  /* the industry-word accent: same style, Deep Teal, no box */
.fig{font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums proportional-nums}
.fig small{font-size:max(.28em,15px);font-weight:400;letter-spacing:0;margin-left:.25em}   /* the unit, in Book one step down */
.fig.mist{color:var(--mist)}
/* the KPI row (the book's): a 1 px rule on top, the label in Detail, the figure in Medium with its unit in Book */
.kpi{border-top:1px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:8px;min-width:120px}
.kpi .fig{font-size:36px}

/* rail and stage: the book's content-slide pair, on 12 columns */
.rail{grid-column:1/span 4;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.stage{grid-column:6/span 7}
.head{margin-bottom:var(--head);align-items:end}
.head-main{grid-column:1/span 7;display:flex;flex-direction:column;gap:20px}
.head-side{grid-column:9/span 4;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
@media (max-width:980px){.rail,.stage,.head-main,.head-side{grid-column:1/-1}.stage{margin-top:var(--head)}.head-side{margin-top:24px}}

/* buttons: pills on the web (the book's web mocks), radius 4 everywhere else */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:clamp(14px,1.042vw,20px) clamp(24px,1.458vw,28px);border-radius:999px;border:1px solid transparent;font:500 var(--t-btn)/1 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;background:none;color:inherit;transition:background-color .25s,color .25s,border-color .25s}
.btn.mist{background:var(--mist);border-color:var(--mist);color:var(--fathom)}
/* hover inverts to the navy ink, never to a new colour (Xavi, 2 Oct 2026: Deep Teal read as a green that didn't fit). On a dark
   ground the filled buttons keep a light edge, so they don't sink into it; a line button there fills white */
.btn.mist:hover{background:var(--fathom);border-color:var(--mist);color:var(--white)}
.btn.light{background:var(--white);border-color:var(--white);color:var(--fathom)}
.btn.light:hover{background:var(--fathom);border-color:var(--white);color:var(--white)}
.btn.line{border-color:currentColor}
.btn.line:hover{background:var(--fathom);border-color:var(--fathom);color:var(--white)}
[data-tone=dark] .btn.line:hover{background:var(--white);border-color:var(--white);color:var(--fathom)}
.link{font-size:16px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.link:hover{color:var(--deep)}
[data-tone=dark] .link:hover{color:var(--grey)}
.tag{display:inline-block;font-size:12px;font-weight:500;line-height:1;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border:1px solid currentColor;border-radius:var(--r);color:var(--deep)}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
[data-tone=dark] :focus-visible,.hero :focus-visible,.nav:not(.solid) :focus-visible{outline-color:var(--white)}
.skip{position:fixed;z-index:60;left:16px;top:16px;transform:translateY(-200%)}
.skip:focus-visible{transform:none}

/* photos: observed and natural, in rounded cells, no border, no shadow, no tint */
.photo{position:relative;overflow:hidden;border-radius:var(--r-photo);background:var(--foam)}
.photo img{width:100%;height:100%;object-fit:cover}

/* ---------- motion: the page's entrances (base/motion.js; Xavi's call, 1 Oct 2026). Only under html.motion, which the page
   sets early and never with reduced motion. Titles type in, figures count up, photos fade in sliding down. ---------- */
html.motion :is(h1.display,h2.h2,h2.sub,h2.display):not([data-type]),html.motion .fig:not([data-count]){visibility:hidden}   /* until the script has set them up */
html.motion .tw{white-space:nowrap}
html.motion .tc{position:relative}
html.motion [data-type=ready] .tc{opacity:0}
html.motion [data-type=on] .tc{opacity:0;animation:tc-in .14s ease-out var(--td) forwards}
/* the caret's box is on every character before the title is typed too, unseen. It's out of the flow, yet its being there
   moves the text by a fraction of a pixel: enough to wrap a title that only just fits its line. Selected work's did, at
   390 px: one line while it waited, two once typed, and the page under it jumped 37 px (found on 6 Oct 2026) */
html.motion [data-type] .tc::after{content:"";position:absolute;left:100%;top:.12em;bottom:.06em;width:max(2px,.055em);background:currentColor;opacity:0}
html.motion [data-type=on] .tc::after{animation:tc-caret var(--ts) step-end var(--td)}
html.motion [data-type=on] .tc.end::after{animation:tc-blink 1.4s step-end var(--td) forwards}
@keyframes tc-in{to{opacity:1}}
@keyframes tc-caret{0%,100%{opacity:1}}
@keyframes tc-blink{0%{opacity:1}30%{opacity:0}55%{opacity:1}85%,100%{opacity:0}}
html.motion .cnt{display:inline-block;text-align:right}   /* the brand digits, held at their final width */
html.motion .rv{opacity:0;transform:translateY(-16px);transition:opacity .9s ease var(--rd,0s),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--rd,0s)}
html.motion .rv.in{opacity:1;transform:none}

/* ---------- the silk on a dark band (base/silkband.js; Xavi, 2 Oct 2026): a canvas behind the content of any [data-silk]
   section, fading in once it has drawn ---------- */
[data-silk]{position:relative;isolation:isolate}
[data-silk]>.silk-band{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;opacity:0;transition:opacity 1s ease;pointer-events:none}
[data-silk]>.silk-band.on{opacity:1}
/* the silk on a picture (base/silkpic.js; Xavi, 7 Oct 2026): a canvas over the picture of any [data-veil] or [data-live].
   A veil is blended in soft light, so its mid grey leaves the picture alone; a live picture's canvas is the picture, moving.
   The picture's own box keeps the blend to itself */
[data-veil],[data-live]{position:relative;isolation:isolate}
.silk-pic{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1s ease;pointer-events:none}
.silk-pic.veil{mix-blend-mode:soft-light}
.silk-pic.on{opacity:1}

/* ---------- the first view (base/motion.js, reveal; Xavi, 2 Oct 2026): until the hero's silk has drawn, only its footage shows.
   Then the nav and the hero's words rise 10 px into place and fade in, a beat apart, as the veil comes over the footage; the
   headline types itself in. Only under html.motion, so never with reduced motion or without JavaScript ---------- */
html.motion .nav .row,html.motion .hero-in .detail,html.motion .hero-in .lead,html.motion .hero-in .ctas{
  transition:opacity .9s ease var(--rv,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--rv,0s)}
html.motion:not(.revealed) .nav .row,html.motion:not(.revealed) .hero-in .detail,html.motion:not(.revealed) .hero-in .lead,html.motion:not(.revealed) .hero-in .ctas{opacity:0;transform:translateY(10px)}
html.motion .hero-in .detail{--rv:.05s}html.motion .nav .row{--rv:.2s}html.motion .hero-in .lead{--rv:.4s}html.motion .hero-in .ctas{--rv:.55s}