/* Hamsa AI Labs · website
   Tokens are the frozen selections from hamsa-design-preview.html:
   Helix palette · Stripe navy neutrals · Inter + JetBrains Mono · white ground.
   Corners are the STRIPE set here. The product uses the SHARP set. */
/* Every value here now resolves to design/pages/tokens.css, which is generated
   and must not be hand-edited. The site keeps its own short names so the rest of
   this stylesheet is unchanged; this block is the single place the two meet.
   tokens.css states the supersessions: --key -> --accent-base, --s1..5 -> --cat-*.
   <html> carries data-surface="site" for the shape and type scales, and
   data-theme="light" because this is a light design with dark sections in it:
   without the pin, a visitor in dark mode would get the dark ramp under CSS that
   assumes the light one. */
:root{
  --prim:var(--primary-base); --prim-hov:var(--primary-edge); --ptext:var(--primary-text);
  --ptint:var(--primary-tint); --onprim:var(--ink-on-primary);
  --key:var(--accent-base); --live:var(--sem-positive); --block:var(--sem-negative);
  --s1:var(--cat-1); --s2:var(--cat-2); --s3:var(--cat-3); --s4:var(--cat-4); --s5:var(--cat-6);
  --bg:var(--surface-page); --surf:var(--surface-e0); --surf2:var(--surface-raised);
  --hair:var(--line-hair); --hair2:var(--line-hair2);
  --faint:var(--ink-muted); --mute:var(--ink-secondary); --ink:var(--ink-primary);
  --gold:var(--brand-mark-light); --goldon:var(--brand-mark-dark);
  --goldline:var(--brand-mark-straddle);
  /* on dark: stated colours, never white-at-opacity */
  --onlift:var(--primary-on-dark); --ontext:var(--ink-on-dark);
  --onmute:var(--ink-on-dark-secondary); --onfaint:var(--ink-on-dark-muted);
  --r-tag:var(--shape-tag); --r-input:var(--shape-input); --r-btn:var(--shape-btn);
  --r-card:var(--shape-card); --r-chrome:var(--shape-chrome); --r-pill:var(--shape-pill);
  --wrap:1440px; --pad:var(--space-7-5); --nav:60px;
}

/* Self-hosted, the same Latin files Google Fonts served, so the letters are unchanged.
   Google's display=optional let a slow load keep a page in the fallback face for its
   whole view, which is why headings sometimes changed size between pages. Preloaded
   in build.py. block, not swap: swap painted every page in the fallback first and
   then switched, which flickered on each page change. */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 500;font-display:block;
  src:url(fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:block;
  src:url(fonts/jetbrains-mono-latin.woff2) format('woff2')}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:300;letter-spacing:-.03em;margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin:0}
.btn{display:inline-block;white-space:nowrap;font:500 15px Inter,system-ui,sans-serif;background:var(--prim);
  color:var(--onprim);border:1px solid transparent;padding:12px 26px;
  border-radius:var(--r-btn);transition:background .13s}
.btn:hover{background:var(--prim-hov)}
.btn.out{background:transparent;color:var(--ink);border-color:var(--hair2)}
.btn.out:hover{background:var(--surf2)}
.btn.sm{font-size:14px;padding:10px 22px}
/* On any dark ground the outline button must not inherit near-black ink. */
.oninv .btn.out,.hero .btn.out,.dark .btn.out,.ondark .btn.out{background:rgba(255,255,255,.14);color:#fff;
  border-color:rgba(255,255,255,.44)}
.oninv .btn.out:hover,.hero .btn.out:hover,.dark .btn.out:hover,.ondark .btn.out:hover{background:rgba(255,255,255,.26)}

/* ── waterline · flat runs stretch, the crest never does ─────────────────── */
.wake{display:flex;align-items:center;width:100%;line-height:0;color:var(--gold);
  opacity:.62;pointer-events:none}
.wake .wf{display:block;height:20px;min-width:0}
.wake .wf:first-child{flex:4}   /* crest lands at four fifths of the run */
.wake .wf:last-child{flex:1}
.wake .wv{flex:none;display:block;overflow:visible}

/* ── nav ─────────────────────────────────────────────────────────────────── */
/* Held at the top while the page scrolls. Clear over the hero it opens on; once
   the hero has passed under it, site.js adds .stuck and the bar takes the page
   ground, so the links stay legible over any section. */
html{scroll-padding-top:var(--nav);overflow-y:scroll;scrollbar-gutter:stable}
.nav{position:fixed;top:0;left:0;right:0;z-index:20;
  border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
.nav.stuck{background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom-color:var(--hair);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.navin{display:flex;align-items:center;gap:46px;height:var(--nav);max-width:var(--wrap);
  margin:0 auto;padding:0 var(--pad)}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:30px;width:auto;display:block}
.wm{font-weight:300;font-size:22px;letter-spacing:-.02em}
.wm i{font-style:normal;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.24em;
  color:var(--faint);margin-left:8px;vertical-align:2px}
.nl{display:flex;gap:36px;font-size:15px}
.nl a{color:var(--mute)} .nl a:hover{color:var(--ink)}
.nitem{position:relative}
.nitem>a{display:inline-flex;align-items:center;gap:6px}
.drop{position:absolute;top:100%;left:-18px;padding-top:14px;min-width:262px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s,transform .14s,visibility .14s}
.nitem:hover .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;background:var(--surf);
  border-left:1px solid var(--hair);border-right:1px solid var(--hair)}
/* A section page reads as the head of its group; its pages sit indented beneath. */
.drop a.head{padding:16px 18px 8px;font-size:15px;font-weight:500;color:var(--ink);
  letter-spacing:-.01em}
.drop a.head + a.item{padding-top:2px}
.drop a.head ~ a.head{padding-top:20px;margin-top:10px;position:relative}
.drop a.head ~ a.head::before{content:"";position:absolute;left:0;right:0;top:0;
  height:10px;margin-top:-10px;background:var(--surf);
  border-left:1px solid var(--hair);border-right:1px solid var(--hair)}
.drop a.head ~ a.head::after{content:"";position:absolute;left:18px;right:18px;top:0;
  height:1px;background:var(--hair)}
.drop a.item{padding:9px 34px 9px 26px;font-size:14px;color:var(--mute);position:relative}
.drop a.item::after{content:"\2192";position:absolute;right:16px;top:50%;font-size:13px;
  color:var(--prim);opacity:0;transform:translateY(-50%) translateX(-5px);
  transition:opacity .14s,transform .14s}
.drop a.item:hover::after{opacity:1;transform:translateY(-50%)}
.drop a:first-child{border-top:1px solid var(--hair);
  border-radius:var(--r-card) var(--r-card) 0 0}
.drop a:last-child{border-bottom:1px solid var(--hair);
  border-radius:0 0 var(--r-card) var(--r-card);padding-bottom:15px}
.drop a:hover{background:var(--surf2);color:var(--ink)}
/* The dropdown panel is a light surface even when the nav sits on a dark hero,
   so it must win against .ondark .nl a, which is more specific than .drop a. */
.ondark .nl .drop a.item{color:var(--mute)}
.ondark .nl .drop a.head{color:var(--ink)}
.ondark .nl .drop a:hover{color:var(--ink)}
.drop{filter:drop-shadow(0 18px 34px rgba(1,24,45,.16))}
.navcta{margin-left:auto}
.ondark .wm,.ondark .nl a:hover{color:#fff}
.ondark .wm i{color:var(--onmute)}
.ondark .nl a{color:var(--ontext)}

/* ── heroes ──────────────────────────────────────────────────────────────── */
/* The film is 16:9. A 100vh hero on a 16:10 screen is taller than that, and
   object-fit:cover answers by scaling the film up and cropping the sides, which
   reads as a zoom. Holding the hero at 16:9 until the viewport is wider than
   that shows the film at its own scale, uncropped. */
.hero{--hero-ground:var(--ink);
  position:relative;height:min(100vh,56.25vw);min-height:640px;
  display:flex;align-items:flex-end;
  background:var(--hero-ground);overflow:hidden;color:#fff;padding-bottom:78px}
/* Iris is a button colour, not a ground. It fills the page hero as a mesh over
   ink instead: iris at the shoulder, the purple end of the category ramp beside
   it, a coral wash at the foot. Blurred so no stop shows an edge. */
/* Iris is the only colour on this ground. The coral wash that used to sit at the
   foot was what made these heroes read as a different navy from the film hero: it
   pushed red from 1 to 51 against ink, a warm cast across the bottom of the band,
   while the iris only ever moved blue by about 19. So the coral is gone and the
   iris carries it, as a cool lift at the shoulder and nothing at the foot. */
.plate{position:absolute;inset:0;filter:blur(10px);background:
  radial-gradient(60% 46% at 12% -10%, color-mix(in srgb,var(--prim) 42%,transparent) 0%, transparent 64%),
  radial-gradient(54% 48% at 88% 0%, color-mix(in srgb,var(--s1) 18%,transparent) 0%, transparent 62%),
  var(--phero-ground)}

/* ── the home hero film ──────────────────────────────────────────────────────
   The film plays behind the headline rather than in a box beside it, so three
   things have to hold at once: the poster carries the hero until a frame is
   painted, the scrim guarantees the type regardless of which frame is showing,
   and the film's own captions sit clear of the navigation.

   The scrim is not decoration. The film runs from a sunlit whiteboard to a white
   tablet screen, so at several points the frame under the headline is near-white
   and white type on it would vanish. Two gradients: one down from the top so the
   navigation holds, one up from the foot so the headline, the sub and the buttons
   hold. Both are ink, the same value the hero falls back to. */
.heroposter,.hero video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center}
.heroposter img{width:100%;height:100%;object-fit:cover;object-position:inherit;display:block}
.hero video{opacity:0;transition:opacity .5s ease}
.hero.has-frame video{opacity:1}
.heroscrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,
    color-mix(in srgb,var(--hero-ground) 78%,transparent) 0%,
    color-mix(in srgb,var(--hero-ground) 42%,transparent) 12%,
    transparent 26%),
  linear-gradient(0deg,
    color-mix(in srgb,var(--hero-ground) 94%,transparent) 0%,
    color-mix(in srgb,var(--hero-ground) 92%,transparent) 12%,
    color-mix(in srgb,var(--hero-ground) 78%,transparent) 25%,
    color-mix(in srgb,var(--hero-ground) 20%,transparent) 38%,
    transparent 48%)}
/* the film's captions sit upper-left; the control takes the foot, below the
   buttons, where the placeholder note used to sit */
.heroplay{position:absolute;right:var(--pad);bottom:24px;z-index:3;
  font:500 11px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-on-dark);background:color-mix(in srgb,var(--hero-ground) 66%,transparent);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);
  padding:8px 16px;min-width:86px;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .15s,border-color .15s}
.heroplay:hover{background:color-mix(in srgb,var(--hero-ground) 86%,transparent);
  border-color:rgba(255,255,255,.5)}
.heroplay:focus-visible{outline:var(--stroke-focus) solid var(--primary-on-dark);outline-offset:3px}
@media(max-width:760px){.heroplay{right:var(--pad);bottom:18px;padding:7px 13px;min-width:74px}
  .heroposter,.hero video{object-position:left top}}
@media(prefers-reduced-motion:reduce){.hero video{transition:none}}
.plategrid{position:absolute;inset:0;opacity:.30;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:64px 64px}
.videonote{position:absolute;right:var(--pad);bottom:26px;
  font:500 10px 'JetBrains Mono',monospace;letter-spacing:.18em;color:rgba(255,255,255,.36)}
.heroin{position:relative;z-index:2;width:100%}
.herogrid{display:grid;grid-template-columns:1.4fr .6fr;gap:96px;align-items:end}
.hero .wrap{padding-inline:32px}
.hero h1{font-size:80px;line-height:1.02;letter-spacing:-.045em;max-width:15ch;color:#fff}
.herotail{display:flex;flex-direction:column;align-items:flex-end;text-align:right;padding-bottom:10px}
.hsub{font-size:18px;font-weight:300;line-height:1.5;color:var(--ontext);
  margin:0 0 26px;max-width:36ch}
.cta{display:flex;gap:14px;flex-wrap:nowrap;justify-content:flex-end}

/* ── the platform visual, standing in a section ──────────────────────────────
   It takes the place of the placeholder block that stood here, so it takes the
   same full wrap width. Its own 1120:590 viewBox sets the height and nothing
   crops it. Restyled for the dark ground in platform-visual-dark.css. */
/* The drawing is 1120:590, so at the full wrap width it is 700px tall. Deriving
   its width from the height left in a viewport shrank it to about 690px on a
   laptop and stranded it in white space, so it takes the width instead and the
   section is allowed to be taller than one screen, as a landing section may be.
   What is cut back is the space around it: the section's own padding, the gap
   under the heading, and the two chrome rows. */
.sec:has(.secvis){padding:70px 0 66px}
.sec:has(.secvis) .sechead{margin-bottom:26px}
.secvis{min-width:0}
.secvis .visual-wrap{max-width:none;border:0;background:none;border-radius:0;
  overflow:visible}
.secvis #platform{width:100%;height:auto}
.secvis .visual-top{padding:0 2px 4px}
.secvis .visual-bottom{padding:6px 2px 0}
.secvis + .cta.brow{margin-top:24px}
@media(max-width:960px){.sec:has(.secvis){padding:58px 0 56px}}

/* page hero · smaller, not full screen */
.phero{--phero-ground:var(--ink);
  position:relative;background:var(--phero-ground);color:#fff;overflow:hidden;
  padding:calc(var(--nav) + 60px) 0 68px}
.phero h1{font-size:62px;line-height:1.05;letter-spacing:-.042em;max-width:22ch;color:#fff;margin:16px 0 0}
.phero .lead{font-size:20px;font-weight:300;line-height:1.5;color:var(--ontext);
  margin:18px 0 0;max-width:66ch}
.phero .cta{justify-content:flex-start;margin-top:26px}
.phero .eyebrow{color:var(--onlift)}

/* ── sections ────────────────────────────────────────────────────────────── */
.sec{padding:76px 0}
.sec.tight{padding-top:0}
.dark{background:var(--ink);color:#fff}
.dark .eyebrow{color:var(--onlift)}
.dark h2,.dark h3{color:#fff}
.dark .sechead p{color:var(--ontext)}
.sechead{margin:0 0 34px}
.sechead + .alink{margin-top:-24px}
.alink{display:inline-flex;align-items:center;gap:14px;margin:0 0 42px;
  font-size:14px;font-weight:500;color:var(--ink)}
.alink .arrow{transition:border-color .15s,color .15s,transform .15s}
.alink:hover .arrow{border-color:var(--prim);color:var(--prim);transform:translateX(3px)}
.dark .alink{color:#fff}
.dark .alink .arrow{border-color:rgba(255,255,255,.34);color:var(--ontext)}
.sechead .eyebrow{margin-bottom:20px}
.sechead h2{font-size:44px;line-height:1.06;letter-spacing:-.04em;max-width:32ch}
.sechead p:not(.eyebrow){font-size:17px;font-weight:300;color:var(--mute);margin:14px 0 0;max-width:68ch}

/* ── cards ───────────────────────────────────────────────────────────────── */
.big{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bcard{border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surf);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s}
.bcard:hover{border-color:var(--hair2)}
.art{height:280px;background:var(--surf2);border-bottom:1px solid var(--hair);
  display:grid;place-items:center;padding:26px}
.art svg{width:100%;height:100%;max-width:440px}
.bbody{padding:32px 34px 36px;display:flex;flex-direction:column;flex:1}
.bcard h3{font-size:29px;margin:0 0 12px}
.bcard .lede{font-size:16px;color:var(--mute);line-height:1.6;margin:0 0 24px}
.go{margin-top:auto;font-size:15px;color:var(--ptext);font-weight:500}
.dark .bcard{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.16)}
.dark .bcard:hover{border-color:rgba(255,255,255,.30)}
.dark .art{background:rgba(255,255,255,.03);border-bottom-color:rgba(255,255,255,.12)}
.dark .bcard .lede{color:var(--ontext)} .dark .go{color:#fff}

/* six one-line features */
.feat6{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden}
.f6{background:var(--surf);padding:30px 28px 32px}
.f6 b{display:block;font-weight:500;font-size:17px;margin:0 0 9px}
.f6 p{margin:0;font-size:14.5px;color:var(--mute);line-height:1.6}
/* ── the feature grid · hairline on the right and foot, never a box ──────── */
.fx{display:grid;grid-template-columns:repeat(3,1fr)}
.fc{padding:30px 32px 34px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.fc:nth-child(3n){border-right:0}
.fc:nth-last-child(-n+3){border-bottom:0}
.fc .ic{display:block;width:42px;height:42px;color:var(--ink);margin:0 0 22px}
.fc .ic .new{color:var(--prim)}
.fc b{display:block;font-weight:400;font-size:19px;letter-spacing:-.018em;margin:0 0 10px}
.fc p{margin:0;font-size:14.5px;color:var(--mute);line-height:1.62}
.dark .fc{border-color:rgba(255,255,255,.16)} .dark .fc p{color:var(--ontext)}
.dark .fc .ic{color:#fff}
@media(max-width:960px){
  .fx{grid-template-columns:repeat(2,1fr)}
  .fc{padding:26px 26px 30px}
  .fc .ic{margin-bottom:22px}
  .fc:nth-child(3n){border-right:1px solid var(--hair)}
  .fc:nth-child(2n){border-right:0}
  .fc:nth-last-child(-n+3){border-bottom:1px solid var(--hair)}
  .fc:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:640px){
  .fx{grid-template-columns:1fr}
  .fc{border-right:0}
  .fc:nth-child(2n),.fc:nth-child(3n){border-right:0}
  .fc:nth-last-child(-n+2){border-bottom:1px solid var(--hair)}
  .fc:last-child{border-bottom:0}
}
/* ── the definition list · a roster reads as rows, never as boxes ────────── */
.dl{column-count:2;column-gap:64px}
.dl.one{column-count:1}
.dr{break-inside:avoid;padding:16px 0 17px;border-top:1px solid var(--hair)}
.dr b{display:block;font-weight:500;font-size:16.5px;letter-spacing:-.01em;margin:0 0 5px}
.dr p{margin:0;font-size:14px;color:var(--mute);line-height:1.55}
.dark .dr{border-color:rgba(255,255,255,.16)}
.dark .dr p{color:var(--ontext)}
@media(max-width:760px){.dl{column-count:1}}
/* ── the callout laid over a photograph ─────────────────────────────────────
   Both shots are framed 16:9 with their left third left empty on purpose, so the
   statement goes in that space and nothing is cropped: the frame keeps the photo's
   own ratio rather than covering an arbitrary box. A light scrim over the left
   holds the words legible against wood and wall while they are still unlit.
   Below 960px the overlap stops being honest at that width, so it stacks. */
.slab.shot{min-height:0;display:block;text-align:left;padding:96px 0 104px}
.slab.shot .shotframe{position:relative;aspect-ratio:1672/941;border-radius:var(--r-chrome);
  overflow:hidden;background:var(--surf2)}
.slab.shot .shotimg{display:block;width:100%;height:100%;object-fit:cover}
.slab.shot .shotframe::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.52),rgba(255,255,255,.28) 24%,
    rgba(255,255,255,0) 44%)}
/* the object starts at 36% in both shots, so the column stops short of it */
.slab.shot .slabsay{position:absolute;z-index:2;left:5%;top:50%;transform:translateY(-50%);
  width:28%}
.slab.shot p{font-size:clamp(20px,1.85vw,27px);max-width:none;margin:0}
.slab.shot p span{color:rgba(1,24,45,.30)}
.slab.shot p span.lit{color:var(--ink)}
.slab.shot .slabel{margin:0 0 16px;color:var(--mute)}

@media(max-width:960px){
  .slab.shot{padding:68px 0 76px}
  .slab.shot .shotframe{aspect-ratio:auto;overflow:visible;background:none}
  .slab.shot .shotimg{height:auto;border-radius:var(--r-chrome)}
  .slab.shot .shotframe::after{display:none}
  .slab.shot .slabsay{position:static;transform:none;width:auto;margin:0 0 32px}
  .slab.shot p{font-size:27px;max-width:26ch}
}

/* the callout says what it is */
.slabel{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 26px}
.dark .slabel{color:var(--onfaint)}
/* The solution areas, listed as cards rather than as cells in a ruled grid. Each
   page takes the tone of its own card on the Solutions page: Growth the primary,
   Process the value next to it. The colour is the texture; there is no hover
   because these are not links. */
.feat6.tiles{gap:20px;background:none;border:0;border-radius:0;overflow:visible}
.feat6.tiles .f6{--tone:var(--key);border:1px solid var(--hair);border-top:3px solid var(--tone);border-radius:var(--r-card);
  background-color:var(--surf);
  background-image:radial-gradient(120% 80% at 88% 108%,color-mix(in srgb,var(--tone) 6%,transparent),transparent 62%),
                   linear-gradient(180deg,color-mix(in srgb,var(--tone) 13%,transparent),transparent 78%)}
.feat6.tiles.t2 .f6{--tone:var(--live)}

.feat6.q{grid-template-columns:repeat(4,1fr)}
.feat6.q .f6{padding:24px 22px 26px}
.feat6.q .f6 b{font-size:15px;margin:0 0 7px}
.feat6.q .f6 p{font-size:13.5px;line-height:1.55}
.dark .feat6{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.16)}
.dark .f6{background:#04203a} .dark .f6 p{color:var(--ontext)}

/* prose blocks */
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.pane{border:1px solid var(--hair);border-radius:var(--r-card);padding:42px 40px 44px;
  background:var(--surf);display:flex;flex-direction:column}
.pane h3{font-size:28px;margin:0 0 14px} .pane .k{margin-bottom:10px}
.pane p{font-size:14px;color:var(--mute);line-height:1.65;margin:0 0 18px}
.pane p:last-of-type{margin-bottom:26px}
.pane .btn{margin-top:auto;align-self:flex-start}
/* Where a pane ends in a link rather than a button, pin it to the bottom too,
   so the LinkedIn lines align across cards of unequal text length. */
.pane p:last-child{margin-top:auto;margin-bottom:0}
/* The page's own argument, set the way the landing page sets its key message:
   ink at 19/1.5 on a 58ch measure. --mute is the supporting colour, for section
   sub-lines and card text, and reading an argument in it puts the argument below
   the label that introduced it. */
.prose{max-width:58ch} .prose p{font-size:19px;font-weight:300;line-height:1.5;
  letter-spacing:-.012em;color:var(--ink);margin:0 0 20px}
.prose p:last-child{margin-bottom:0}
.prose p b{font-weight:500;color:var(--ink)}
.dark .prose p{color:var(--ontext)} .dark .prose p b{color:#fff}

/* outcome / limit lists */
.olist{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
/* Six stages have to be readable in one screen, so the rows are set tight: the
   list is a sequence you scan, not six cards. */
.olist li{padding:16px 0 17px;border-bottom:1px solid var(--hair);display:grid;
  grid-template-columns:30px 1fr;gap:20px;align-items:start}
.olist .n{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--faint);padding-top:4px}
.olist b{display:block;font-weight:500;font-size:17px;letter-spacing:-.014em;margin:0 0 4px}
.olist p{margin:0;font-size:15px;color:var(--mute);line-height:1.55}
.dark .olist{border-color:rgba(255,255,255,.16)}
.dark .olist li{border-color:rgba(255,255,255,.16)}
.dark .olist p{color:var(--onmute)}

/* wide link rows */
.rows{border-top:1px solid var(--hair)}
.row{display:flex;align-items:center;gap:28px;padding:30px 0;border-bottom:1px solid var(--hair)}
.row .rn{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.2em;color:var(--faint);width:26px;flex:none}
.row h3{font-size:23px;margin:0;width:290px;flex:none}
.row p{font-size:15px;color:var(--mute);margin:0;flex:1;line-height:1.55}
.arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair2);flex:none;
  display:grid;place-items:center;color:var(--mute)}
.row:hover .arrow{border-color:var(--prim);color:var(--prim)}

/* ── statement slab · scrubbed word by word ──────────────────────────────── */
.slab{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center}
.slab p{margin:0;font-size:clamp(32px,3.6vw,52px);font-weight:300;line-height:1.26;
  letter-spacing:-.032em;max-width:26ch}
.slab p span{color:var(--hair2);transition:color .18s linear}
.slab p span.lit{color:var(--ink)}
.dark .slab p span{color:rgba(255,255,255,.20)} .dark .slab p span.lit{color:#fff}

/* ── capability tags · type in with a caret ──────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:9px;max-width:900px}
.tags span{font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--mute);
  border:1px solid var(--hair2);border-radius:var(--r-tag);padding:7px 12px;white-space:nowrap}
.dark .tags span{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.20)}
.js .tags.type.anim span{opacity:0}
.js .tags.type.anim span.on{opacity:1}
.js .tags.type span.cur::after{content:"";display:inline-block;width:1px;height:1em;
  background:currentColor;margin-left:3px;vertical-align:-2px;animation:blink .7s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── closing · contact + sitemap ─────────────────────────────────────────── */
.touch{position:relative;background:var(--surf2);padding:0 0 40px;overflow:hidden}
.touch .inner{padding:104px 0 0;position:relative;z-index:2}
.touch h2{font-size:54px;letter-spacing:-.04em;line-height:1.06;margin:0 0 16px}
.touch p{font-size:19px;font-weight:300;color:var(--mute);margin:0 0 30px}
.mail{font-size:32px;font-weight:300;letter-spacing:-.028em;color:var(--ptext)}
.mail:hover{border-bottom:1px solid var(--ptext)}
.sitewake{margin:88px 0 0}
.sitemap{display:flex;flex-wrap:wrap;gap:8px 30px;margin:22px 0 0;position:relative;z-index:2;max-width:82%}
.sitemap a{font-size:14px;color:var(--mute)} .sitemap a:hover{color:var(--ink)}
.sitemap b{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);align-self:center}
.legal{display:flex;gap:22px;margin-top:30px;font-size:13px;color:var(--faint);
  flex-wrap:wrap;position:relative;z-index:2}
.swanmark{position:absolute;right:-40px;bottom:-30px;height:330px;width:auto;
  opacity:.12;pointer-events:none;z-index:1}

/* ── motion ──────────────────────────────────────────────────────────────── */
/* The reveal is opt-in. .anim is added by site.js, and only to elements that are
   below the fold when the page opens, so nothing the visitor can already see is
   ever hidden, re-wrapped or faded. See the note in site.js. */
.js .rv.anim span{display:inline-block;opacity:0;filter:blur(7px);transform:translateY(.22em);
  transition:opacity .5s ease,filter .5s ease,transform .5s ease}
.js .rv.anim.in span{opacity:1;filter:blur(0);transform:none}
.js .fu.anim{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .fu.anim.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv span,.js .fu,.js .tags.type span{opacity:1!important;filter:none!important;
    transform:none!important;transition:none!important}
  .js .tags.type span.cur::after{display:none}
  .slab p span{color:var(--ink)!important}
  .dark .slab p span{color:#fff!important}
}
@media(max-width:960px){
  :root{--pad:24px}
  .nl{display:none}
  .hero h1{font-size:44px} .phero h1{font-size:36px}
  .sechead h2,.touch h2{font-size:32px} .slab{min-height:56vh} .slab p{font-size:27px;max-width:20ch}
  .big,.two,.herogrid{grid-template-columns:1fr}
  .feat6{grid-template-columns:1fr}
  .herotail{align-items:flex-start;text-align:left} .cta{justify-content:flex-start;flex-wrap:wrap}
  .row{flex-wrap:wrap;gap:14px} .row h3{width:auto} .row p{flex:1 1 100%}
}

/* ── placeholder for artwork being produced separately ───────────────────── */

.olist.plain li{grid-template-columns:1fr}
.rolehead{margin:46px 0 22px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.dark .rolehead{color:var(--onmute)}
.tags + .rolehead{margin-top:56px}
@media(min-width:961px){
  .olist.plain{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;border-top:none}
  .olist.plain li{border-top:1px solid var(--hair);border-bottom:none;padding:20px 0}
  .dark .olist.plain li{border-color:rgba(255,255,255,.16)}
}
.btn.brow,.cta.brow{margin-top:38px;justify-content:flex-start}
/* a hero that carries artwork splits two up */
.pgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.part svg{width:100%;height:auto;max-width:480px;display:block;margin-left:auto}
@media(max-width:960px){.pgrid{grid-template-columns:1fr} .part svg{margin:0;max-width:100%}}

/* ── the key message, under the home hero ────────────────────────────────────
   The three verbs are the headline and their full stops carry the gold mark. In
   the paragraph, what most AI does today sits back in the secondary ink and the
   turn to what we build sits forward; the words themselves are fixed. */
.keymsg{padding:84px 0 76px}
/* The verbs answer the paragraph, so they are smaller than the hero headline and
   sit under the claim rather than over it. "AI to" leads in on the primary. */
.keymsg .kverbs{margin:16px 0 0;font-size:clamp(27px,2.6vw,36px);line-height:1.1;
  letter-spacing:-.04em}
.keymsg .kverbs .lead-in{color:var(--ptext)}
.keymsg .kverbs i{font-style:normal;color:var(--gold)}
.kmsg{margin:0;max-width:54ch;font-size:19px;font-weight:300;
  line-height:1.5;letter-spacing:-.012em;color:var(--ink)}
/* Outcomes ride in this section, so the heading needs its own air above it. */
.keymsg .sechead{margin:68px 0 26px}
.keymsg .sechead h2{font-size:37px;max-width:38ch}
.kmsg .was{color:var(--mute)}
.kmsg b{font-weight:500}

/* ── outcomes · four tiles, one mark that grows across them ──────────────── */
.outc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}
.oc{padding:26px 26px 28px 0}
.oc+.oc{padding-left:26px;border-left:1px solid var(--hair)}
.oic{display:block;width:42px;height:42px;color:var(--ink);margin:0 0 22px}
.oic .new{color:var(--prim)}
.oic circle{fill:var(--bg)}
.oc b{display:block;font-weight:400;font-size:19px;line-height:1.3;letter-spacing:-.018em;max-width:15ch}
@media(max-width:960px){
  .outc{grid-template-columns:1fr 1fr}
  .oc,.oc+.oc{padding:28px 22px 32px 0;border-left:0}
  .oc:nth-child(2n){padding-left:22px;border-left:1px solid var(--hair)}
  .oc:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .oic{margin-bottom:18px}
}
@media(max-width:520px){
  .outc{grid-template-columns:1fr}
  .oc,.oc:nth-child(2n){padding:24px 0;border-left:0;border-bottom:1px solid var(--hair)}
  .oc:last-child{border-bottom:0}
}

/* ── what it takes · a label over each name, three across ────────────────── */
.traits{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}
.tk{padding:26px 0 30px;border-top:1px solid var(--hair)}
.tk .eyebrow{margin:0 0 12px}
.tk b{display:block;font-size:22px;font-weight:400;line-height:1.3;letter-spacing:-.02em}
@media(max-width:960px){.traits{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.traits{grid-template-columns:1fr}}

/* ── the system · a still held at the ratio of the film that will replace it */
.sysfig{margin:0}
.sysframe{border:1px solid var(--hair);border-radius:var(--r-chrome);overflow:hidden;background:var(--surf2)}
.sysframe img,.sysframe video{display:block;width:100%;height:100%;object-fit:contain}
.sysfig figcaption{margin:12px 0 0;text-align:right;font-size:11px;color:var(--faint)}

/* the caps word that names who owns a stage, on About */
.stage-owner{font:500 11px 'JetBrains Mono',monospace;text-transform:uppercase;
  color:var(--mute);margin-left:12px;letter-spacing:.2em}
.stage-owner.machine{color:var(--ptext)}
.stage-owner.human{color:var(--key)}

/* One photograph has a tighter empty side than the two platform shots, so its
   column stops further short of the object and sets a size down. */
.slab.shot.narrow .slabsay{width:26%}
.slab.shot.narrow p{font-size:25px;max-width:none}
.slab.shot .shotnote{position:absolute;bottom:12px;right:15px;z-index:2;font-size:10px;
  color:var(--mute);background:var(--surf);padding:4px 8px;border-radius:var(--r-tag)}

@media(max-width:960px){
  .slab.shot.narrow .slabsay{width:auto}
}

/* ── the offering card ───────────────────────────────────────────────────────
   Each area takes its own colour, from the primary and the two series values next
   to it. The texture is the colour: a wash off the top edge and a soft corner
   behind it, no ruled grid. The number sits at the top and the rest settles
   against the foot, so three unequal descriptions still line up. Hover brings the
   border up to the card's own tone, which is the only thing that moves. */
.offerings{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.offerings.two{grid-template-columns:repeat(2,1fr)}
.offering{--tone:var(--key);display:flex;flex-direction:column;min-width:0;min-height:470px;padding:30px;
  border:1px solid var(--hair);border-top:3px solid var(--tone);
  border-radius:var(--r-card);background-color:var(--surf);
  background-image:radial-gradient(120% 80% at 88% 108%,color-mix(in srgb,var(--tone) 6%,transparent),transparent 62%),
                   linear-gradient(180deg,color-mix(in srgb,var(--tone) 13%,transparent),transparent 72%);
  transition:border-color .16s}
.offerings a:nth-child(2){--tone:var(--live)}
.offerings a:nth-child(3){--tone:var(--prim)}
/* Compose and Govern are two faces of one product, so the pair holds one tone. */
.offerings.t-prim a{--tone:var(--prim)}
/* The landing page pair: the decisions take the accent, the platform the primary
   it has carried everywhere else on the site. */
.offerings.two a:nth-child(2){--tone:var(--prim)}
.offerings.two .offering{min-height:400px}

.offering:hover{border-color:var(--tone)}
.offering .micro{font:500 11px/1.6 'JetBrains Mono',monospace;text-transform:uppercase;
  letter-spacing:.2em;color:var(--mute);margin:0 0 56px}
.offering h3{font-size:28px;margin-bottom:18px}
.offering p{font-size:14px;color:var(--mute);margin:0 0 22px}
.offering .examples{font-size:12px;color:var(--mute);margin-top:auto;padding-top:18px;
  border-top:1px solid var(--hair);margin-bottom:24px}
.offering:hover .examples{border-top-color:var(--hair2)}
.offering .areas{margin-top:auto;padding-top:18px;border-top:1px solid var(--hair)}
.offering:hover .areas{border-top-color:var(--hair2)}
.offering .area + .area{margin-top:14px}
.offering .area .eyebrow{margin:0 0 5px;color:var(--ink)}
.offering .under{font-size:12px;color:var(--mute);margin:0}
.offering .text-link{font-size:14px;font-weight:500;color:var(--ptext);display:flex;gap:15px;
  margin-top:22px}
@media(max-width:960px){
  .offerings{grid-template-columns:1fr}
  .offering{min-height:0}
  .offering .micro{margin:0 0 20px}
  .offering .examples{margin-top:28px}
}

/* read by a screen reader, never shown: the film's description */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Quiet callout surfaces: decorative, scalable, and separate from readable copy. */
.slab.texture-solutions{background:#f1ede5 url('textures/solutions-paper-contours.svg') center/cover no-repeat}
.slab.texture-platform{background:#01182D url('textures/platform-iris-structure.svg') center/cover no-repeat;color:#fff}
.slab.texture-platform .slabel{color:#AFB2FF}
.slab.texture-platform p span{color:rgba(225,232,240,.4)}
.slab.texture-platform p span.lit{color:#fff}
@media(prefers-reduced-motion:reduce){.slab.texture-platform p span{color:#fff!important}}

/* The chalkboard begins earlier; keep the statement on the pale wall. */
.slab.shot.process-board .slabsay{left:3%;width:23%}
@media(max-width:960px){.slab.shot.process-board .slabsay{width:auto}}

/* The portrait film keeps its entire 3:4 frame. Copy follows on the same ink
   ground, so neither text length nor phone height crops the narrative. */
@media(max-width:960px){
 .hero{height:auto;min-height:0;padding:0 0 64px;display:block}
 .heroposter,.hero video{height:56.25vw;object-fit:contain;object-position:center top}
 .heroscrim{height:56.25vw;background:linear-gradient(180deg,rgba(1,24,45,.72),transparent 24%,transparent 84%,var(--hero-ground))}
 .heroin{padding-top:56.25vw}
 .herogrid{gap:22px}.herotail{padding-bottom:0}
 .hero h1{font-size:clamp(36px,6vw,52px)}
}
@media(max-width:760px){
 .heroposter,.hero video,.heroscrim{height:133.333333vw}
 .heroin{padding-top:133.333333vw}
 .hero .wrap{padding-inline:24px}
 .hero h1{font-size:clamp(34px,9vw,44px)}
 .hero .hsub{font-size:16px}
 .heroscrim{background:linear-gradient(180deg,rgba(1,24,45,.72),transparent 18%,transparent 92%,var(--hero-ground))}
}

@media(min-width:961px){
 .hero{height:auto;min-height:0;aspect-ratio:16/9;padding-bottom:clamp(42px,5.2vw,78px)}
 .hero h1{font-size:clamp(44px,5.3vw,80px)}
 .herogrid{gap:clamp(32px,5vw,96px)}
 .hero .hsub{font-size:clamp(14px,1.2vw,18px)}
 .hero .btn{font-size:clamp(11px,.95vw,14px);padding-inline:clamp(12px,1.5vw,24px)}
}

@media(max-width:760px){
 .navin{gap:16px;padding-inline:24px}.brand{flex-shrink:0}.wm{white-space:nowrap}
 .navcta .btn{padding-inline:16px}
}
@media(max-width:760px){.brand{gap:8px} .brand img{height:26px} .wm{font-size:19px}
  .wm i{margin-left:6px;letter-spacing:.2em}}

@media(max-width:960px){
 .hero{padding-bottom:32px}
 .heroplay{top:calc(56.25vw - 56px);bottom:auto;min-height:44px}
}
@media(max-width:760px){.heroplay{top:calc(133.333333vw - 56px)}}

/* ── the offering hero · the page's one photograph, behind the type ──────────
   Half the home film's height. Every board in the set is drawn with its left
   side empty, so a veil across that side gives the type a clean ground without
   dimming the drawing itself. Ink on the veil, so the nav goes light here. */
.ihero{position:relative;min-height:480px;display:flex;align-items:center;
  padding:calc(var(--nav) + 46px) 0 52px;background:var(--surf2);overflow:hidden}
.iheroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:right center}
.iheroveil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(252,251,249,.97) 0%,rgba(252,251,249,.95) 34%,
                  rgba(252,251,249,.62) 50%,transparent 66%)}
.iheroin{position:relative;z-index:2;width:100%}
.ihero h1{font-size:50px;line-height:1.05;letter-spacing:-.042em;max-width:17ch;
  margin:14px 0 0}
.ihero .lead{font-size:19px;font-weight:300;line-height:1.5;color:var(--mute);
  margin:16px 0 0;max-width:44ch}
.ihero .cta{justify-content:flex-start;margin-top:24px}
/* the dark cut, for a page whose artwork is dark rather than a pale wall */
.ihero.ondarkshot{background:var(--ink);color:#fff}
.ihero.ondarkshot .iheroveil{background:
  linear-gradient(90deg,rgba(1,24,45,.95) 0%,rgba(1,24,45,.9) 34%,
                  rgba(1,24,45,.56) 50%,transparent 66%)}
.ihero.ondarkshot h1{color:#fff}
.ihero.ondarkshot .lead{color:var(--ontext)}
.ihero.ondarkshot .eyebrow{color:var(--onlift)}
@media(max-width:860px){
  .ihero{min-height:0;padding:calc(var(--nav) + 34px) 0 40px}
  .ihero h1{font-size:34px;max-width:none} .ihero .lead{max-width:none}
  .iheroveil{background:linear-gradient(180deg,rgba(252,251,249,.95) 0%,
             rgba(252,251,249,.92) 62%,rgba(252,251,249,.8) 100%)}
  .ihero.ondarkshot .iheroveil{background:linear-gradient(180deg,rgba(1,24,45,.93) 0%,
             rgba(1,24,45,.9) 62%,rgba(1,24,45,.8) 100%)}
}

/* ── the decisions, banded by the speed they move at ────────────────────────── */
.bands{display:grid;gap:44px}
.bandhead{display:flex;align-items:baseline;gap:16px;margin:0 0 6px}
.bandhead .eyebrow{margin:0}
.bandarea{margin:0;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ptext)}
.bandarea::before{content:"/";margin-right:14px;color:var(--hair2)}
.bandarea:first-child::before{content:none}

/* ── the handoff to The System ───────────────────────────────────────────────
   Every offering page makes it once. The layers are described on their own page,
   never restated per offering, which is what used to make these pages long. */
.sysband{background:var(--surf2);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);padding:30px 0}
.sysband .wrap{display:flex;align-items:baseline;justify-content:space-between;
  gap:32px;flex-wrap:wrap}
.sysband p{margin:0;font-size:17px;font-weight:300;color:var(--mute);max-width:62ch}
.sysband .text-link{font-size:14px;font-weight:500;color:var(--ptext);
  display:flex;gap:14px;white-space:nowrap}

/* a placeholder page states what is still to come, in the muted ink */
.soon{margin:44px 0 0;font-size:17px;font-weight:300;line-height:1.6;color:var(--mute);
  max-width:60ch;padding-top:26px;border-top:1px solid var(--hair)}
/* "coming soon" inside a feature line, not a badge shouting over it */
.soonmark{display:block;margin-top:6px;font:500 9.5px 'JetBrains Mono',monospace;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ptext);white-space:nowrap}

/* ── a decision list · the name holds its own column, the meaning runs beside it ──
   A two-column grid of name-over-meaning reads as a wall of small cards. Held
   apart like this it reads as a list, which is what it is. */
.dsplit{border-top:1px solid var(--hair)}
.dsrow{display:grid;grid-template-columns:minmax(0,24ch) 1fr;gap:16px 48px;
  padding:17px 0 18px;border-bottom:1px solid var(--hair)}
.dsrow > b{font-weight:400;font-size:17px;letter-spacing:-.016em;line-height:1.4;
  display:block}
.dsrow p{margin:0;font-size:15px;line-height:1.6;color:var(--mute);max-width:64ch}
.dark .dsplit,.dark .dsrow{border-color:rgba(255,255,255,.16)}
.dark .dsrow p{color:var(--ontext)}
@media(max-width:700px){
  .dsrow{grid-template-columns:1fr;gap:5px;padding:15px 0 16px}
  .dsrow > b{font-size:16px}
}
/* Four across. The hairline rules above count in threes, so the last column and the
   last row have to be recounted or a stray border is left hanging. */
.fx.q{grid-template-columns:repeat(4,1fr)}
.fx.q .fc:nth-child(3n){border-right:1px solid var(--hair)}
.fx.q .fc:nth-child(4n){border-right:0}
.fx.q .fc:nth-last-child(-n+4){border-bottom:0}
@media(max-width:1100px){.fx.q{grid-template-columns:repeat(2,1fr)}
  .fx.q .fc:nth-child(2n){border-right:0}
  .fx.q .fc:nth-child(2n+1){border-right:1px solid var(--hair)}}
@media(max-width:620px){.fx.q{grid-template-columns:1fr}
  .fx.q .fc{border-right:0}}
/* Five across, desktop only. Below 1100px the base grid of threes takes over
   unchanged, so only this width needs its borders recounted. */
@media(min-width:1101px){.fx.r{grid-template-columns:repeat(5,1fr)}
  .fx.r .fc{padding:26px 24px 30px;border-bottom:0}
  .fx.r .fc:nth-child(3n){border-right:1px solid var(--hair)}
  .fx.r .fc:last-child{border-right:0}
  .fx.r .fc b{font-size:17px}}


/* ── v7 · the one page ───────────────────────────────────────────────────────
   The nav jumps to sections, so each one lands clear of the held header. */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:var(--nav)}

/* the five layers, defined once, under the architecture diagram */
.syslayers{margin-top:44px}

/* What we build · heading, lead and photograph held on the left while the full
   list scrolls past on the right. Stacks below 860px. */
.wside{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.wside + .wside{margin-top:88px}
.wside .wstick{position:sticky;top:calc(var(--nav) + 40px)}
.wside h3{font-size:36px;font-weight:300;line-height:1.08;letter-spacing:-.04em;
  max-width:17ch;margin:14px 0 0}
.wside .lead{font-size:17px;font-weight:300;line-height:1.5;color:var(--mute);margin:14px 0 24px}
.wside img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;
  border-radius:var(--r-card)}
.wside .dsrow{grid-template-columns:minmax(0,18ch) 1fr;gap:12px 32px}
@media(max-width:860px){
  .wside{grid-template-columns:1fr;gap:28px} .wside .wstick{position:static}
  .wside h3{font-size:30px} .wside .dsrow{grid-template-columns:1fr;gap:5px}
}

/* Careers, one paragraph inside the close */
.touch .careers{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--hair);max-width:68ch}
.touch .careers .eyebrow{font-size:11px;margin:0 0 12px}
.touch .careers p:not(.eyebrow){font-size:17px;margin:0}

/* Company · the text on the left, The Reframe on the right. The statement is set
   into the photograph's lower left, which is empty grey desk. Below 960px the
   slab's own rules stack it above the photograph. */
.wside[id]{scroll-margin-top:calc(var(--nav) + 24px)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.cgrid .prose p{margin-top:0;font-size:17px}  /* supporting-text size, as leads and Careers */
.slab.shot.cside{padding:0}
.slab.shot.cside .shotframe{aspect-ratio:1536/1024}
.slab.shot.cside .shotframe::after{background:linear-gradient(20deg,
  rgba(255,255,255,.62),rgba(255,255,255,.3) 34%,rgba(255,255,255,0) 58%)}
.slab.shot.cside .slabsay{top:auto;bottom:7%;transform:none;width:44%}
.slab.shot.cside p{font-size:clamp(18px,1.6vw,23px)}
.slab.shot.cside .slabel{margin:0 0 12px}
@media(max-width:960px){.cgrid{grid-template-columns:1fr;gap:40px}
  .slab.shot.cside .shotframe{aspect-ratio:auto}
  .slab.shot.cside .slabsay{width:auto} .slab.shot.cside p{font-size:25px}}

/* the hero's supporting line holds to one line on desktop; it extends left into
   the gap beside the headline rather than wrapping its last word */
@media(min-width:961px){.hero .hsub{white-space:nowrap;max-width:none}}

/* ── v7 · phones ──────────────────────────────────────────────────────────────
   Running text takes one size: the key message, the prose, the close and every
   section's supporting line. Descriptions inside lists stay at their 15px. */
@media(max-width:760px){
  .kmsg,.prose p,.touch p,.wside .lead,.sechead p:not(.eyebrow){font-size:17px}
  /* the two hero buttons sit side by side at any phone width */
  .hero .cta{flex-wrap:nowrap;gap:10px}
  .hero .cta .btn{padding-inline:18px;white-space:nowrap}
}

/* the film control is an icon: play or pause, named for screen readers */
.heroplay{display:grid;place-items:center;width:40px;height:40px;min-width:0;padding:0}
.heroplay svg{width:14px;height:14px;display:block}
@media(max-width:760px){.heroplay{width:40px;min-width:0;padding:0}}

/* the architecture visual sits as its own dark panel on the light page. It ships
   with no padding of its own, by design, so the page gives it room here. */
.sec .system-demo{border-radius:var(--r-chrome);padding:24px 28px 14px}
@media(max-width:760px){.sec .system-demo{padding:18px 14px 8px}}

/* ── v7 · a shorter phone page ────────────────────────────────────────────────
   1 the diagram already names each layer, so the full definitions are desktop only
   2 traits and outcomes run two across instead of one
   3 in What we build, each item shows its name; tapping it opens the description.
     site.js adds the toggle; without it, every description stays open. */
@media(max-width:760px){
  .syslayers{display:none}
  .traits{grid-template-columns:1fr 1fr;gap:0 18px}
  .tk{padding:18px 0 20px} .tk b{font-size:17px}
  .outc{grid-template-columns:1fr 1fr}
  .oc,.oc+.oc{padding:22px 14px 24px 0;border-left:0}
  .oc:nth-child(2n){padding-left:14px;border-left:1px solid var(--hair)}
  .oc:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .oc:last-child{border-bottom:0}
  .oc b{font-size:17px} .oic{width:34px;height:34px;margin-bottom:14px}
  .js .dsrow > p{display:none}
  .js .dsrow.open > p{display:block}
  .js .dsrow > b{cursor:pointer;position:relative;padding-right:28px}
  .js .dsrow > b::after{content:'+';position:absolute;right:0;top:0;font-weight:300;
    color:var(--ptext)}
  .js .dsrow.open > b::after{content:'\2013'}
}

/* Phones: the headline, line and buttons start 190px up inside the portrait film,
   over a deeper fade, so the buttons are on the first screen without scrolling.
   The top of the film, the whiteboard, stays clear. */
@media(max-width:760px){
  .heroin{padding-top:calc(133.333333vw - 190px)}
  .heroscrim{background:linear-gradient(180deg,rgba(1,24,45,.72),transparent 18%,
    transparent 48%,rgba(1,24,45,.55) 66%,var(--hero-ground) 88%)}
  .heroplay{top:calc(133.333333vw - 250px)}
}