/* ============================================================
   Auvum Biotech Solutions — auvumbiotech.com
   Palette: ink #0a0d12 · blue #1a4fd6 · gold #b8884a · teal #0e9e85
   Type: IBM Plex Serif (display) / IBM Plex Sans (body) / IBM Plex Mono
   Shares its engine with the VIP Supply build; retheme + marquee on top.
   ============================================================ */

:root{
  color-scheme: light;

  /* Auvum house palette, taken from auvumbio.com's own tokens */
  --ink:        #0a0d12;
  --ink-2:      #3a4259;
  --ink-3:      #626b7e;   /* 5.2:1 on --bg; #6b7488 measured 4.48 and failed */
  --accent:     #1a4fd6;
  --accent-dk:  #143cb5;
  --accent-lt:  #8FB2FF;   /* links/eyebrows on dark: 9.2:1 on --ink */
  --gold:       #b8884a;
  --teal:       #0e9e85;
  --bg:         #f8fafb;
  --surface:    #FFFFFF;
  --warm:       #fbf8f4;
  --muted:      #f1f5f6;
  --border:     #e4e9ee;
  --border-2:   #ccd4dd;
  --on-dark:    #f1f5f6;
  --on-dark-2:  #9aa6bd;
  --dark-line:  rgba(255,255,255,.14);
  --head-bg:    rgba(248,250,252,.88);
  /* The ground of the sections that are dark in BOTH themes. Separate from
     --ink because --ink is also the body text colour, and flipping it for
     dark mode turned every always-dark section light under white text. */
  --ink-surface:#0a0d12;
  --on-accent:  #ffffff;

  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;
  --s-4: 2rem;   --s-5: 3rem;   --s-6: 4rem;
  --s-7: 6rem;   --s-8: 8rem;

  --maxw: 1180px;
  --maxw-wide: 1500px;
  --radius: 3px;
  --ease: cubic-bezier(.2,.6,.3,1);
  --ease-slow: cubic-bezier(.32,.72,0,1);

  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- dark theme ----------
   Only the surface tokens are redefined. Everything downstream — sections,
   cards, borders, the two dark bands that were always dark — reads from these,
   so the whole site flips without a second set of component rules.
   The toggle writes data-theme on <html>; with no choice stored the OS
   preference decides, which is why the media query and the attribute rule
   both exist. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --on-accent: #0a0d12;
    --head-bg:   rgba(11,14,20,.88);
    color-scheme: dark;
    --bg:        #0b0e14;
    --surface:   #11151d;
    --warm:      #151a23;
    --muted:     #161b25;
    --border:    #242b38;
    --border-2:  #333c4c;
    --ink:       #eef2f7;
    --ink-2:     #aab4c6;
    --ink-3:     #8b95a8;   /* 5.1:1 on --bg */
    --accent:    #7ea6ff;
    --accent-dk: #9dbcff;
    --accent-lt: #8FB2FF;
  }
}
:root[data-theme="dark"]{
    --on-accent: #0a0d12;
    --head-bg:   rgba(11,14,20,.88);
  color-scheme: dark;
  --bg:        #0b0e14;
  --surface:   #11151d;
  --warm:      #151a23;
  --muted:     #161b25;
  --border:    #242b38;
  --border-2:  #333c4c;
  --ink:       #eef2f7;
  --ink-2:     #aab4c6;
  --ink-3:     #8b95a8;
  --accent:    #7ea6ff;
  --accent-dk: #9dbcff;
  --accent-lt: #8FB2FF;
}

/* The theme button shows the mode you would switch TO. */
.theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none; margin-left:.15rem;
  background:none; border:1px solid var(--border); border-radius:var(--radius);
  color:var(--ink-2); cursor:pointer;
  transition:color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.theme-btn:hover{ color:var(--ink); background:var(--muted); border-color:var(--border-2); }
.theme-btn svg{ display:block; }
.theme-btn .ico-moon{ display:none; }
:root[data-theme="dark"] .theme-btn .ico-sun,
.theme-btn .ico-sun{ display:block; }
:root[data-theme="dark"] .theme-btn .ico-sun{ display:none; }
:root[data-theme="dark"] .theme-btn .ico-moon{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .ico-sun{ display:none; }
  :root:not([data-theme="light"]) .theme-btn .ico-moon{ display:block; }
}

/* ---------- language ---------- */
/* IBM Plex Serif and Sans have no Devanagari cut, so a Hindi page falls back
   to whatever the OS picks and loses the whole typographic identity. Plex Sans
   Devanagari is the family's own Devanagari, so headings and body stay in one
   voice; the serif display face steps aside because there is no serif cut. */
:root:lang(hi),
[lang="hi"]{
  --font-display: 'IBM Plex Sans Devanagari', 'Noto Sans Devanagari', 'Nirmala UI', sans-serif;
  --font-body: 'IBM Plex Sans Devanagari', 'Noto Sans Devanagari', 'Nirmala UI', sans-serif;
}
/* Devanagari carries ascenders and the shirorekha above the x-height, so the
   Latin line-height crowds it. */
[lang="hi"] body,[lang="hi"] p,[lang="hi"] li,[lang="hi"] dd{ line-height:1.8; }
[lang="hi"] h1,[lang="hi"] h2,[lang="hi"] h3{ line-height:1.35; letter-spacing:0; }
/* Latin small-caps tracking pulls Devanagari conjuncts apart, and
   uppercasing does nothing to a script that has no case. */
[lang="hi"] .eyebrow,[lang="hi"] .langs-l,[lang="hi"] dt,
[lang="hi"] .role-cred span,[lang="hi"] .steps span{
  letter-spacing:.02em; text-transform:none;
}

.langs{ display:flex; align-items:center; gap:.4rem; margin-left:.35rem;
  padding-left:.75rem; border-left:1px solid var(--border); }
.langs-l{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.langs ul{ display:flex; align-items:center; gap:.1rem; margin:0; padding:0; list-style:none; }
.langs a{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  min-width:38px; padding:.5rem .4rem;
  font-family:var(--font-body); font-size:.75rem; font-weight:600; letter-spacing:.06em;
  color:var(--ink-3); border-radius:var(--radius);
  transition:color .18s var(--ease), background .18s var(--ease);
}
.langs a:hover{ color:var(--ink); background:var(--muted); }
.langs a[aria-current="true"]{ color:var(--ink); font-weight:600; }

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.16; letter-spacing:-.012em; margin:0; color:var(--ink); }
p{ margin:0; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-dk); }
img,svg{ max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.dark :focus-visible,.hero :focus-visible,.site-foot :focus-visible{ outline-color:var(--accent-lt); }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink-surface); color:#fff; padding:.75rem 1.25rem; }
.skip:focus{ left:0; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
.wrap-wide{ width:100%; max-width:var(--maxw-wide); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
.section{ padding-block:clamp(3.5rem,8vw,var(--s-7)); }
.section--tight{ padding-block:clamp(2.5rem,5vw,var(--s-5)); }
.dark{ background:var(--ink-surface); color:var(--on-dark); }
.dark h1,.dark h2,.dark h3{ color:#fff; }

/* ---------- eyebrow / rules ---------- */
.eyebrow{
  font-family:var(--font-display);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 var(--s-2);
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::after{ content:""; height:1px; flex:1; background:var(--border-2); }
.dark .eyebrow,.hero .eyebrow{ color:var(--accent-lt); }
.dark .eyebrow::after,.hero .eyebrow::after{ background:var(--dark-line); }

.lead{ font-size:clamp(1.0625rem,1.6vw,1.1875rem); color:var(--ink-2); max-width:62ch; line-height:1.7; }
.dark .lead{ color:var(--on-dark-2); }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--head-bg);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.site-head.is-stuck{ border-bottom-color:var(--border); }
.head-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:72px; }

.brand{ display:inline-flex; align-items:center; gap:.6rem; min-height:44px; flex:none; }
.brand img{ display:block; height:40px; width:auto; }
.brand-mark{ display:block; width:34px; height:34px; flex:none; }
.brand-name{
  font-family:var(--font-display); font-size:1.0625rem; font-weight:600;
  letter-spacing:-.005em; color:var(--ink); white-space:nowrap; line-height:1;
}
/* The same component sits on the light header and the ink footer, so the
   wordmark colour follows the variant rather than the token. Without this the
   footer name is ink on ink: present, selectable, and invisible. */
.brand--light .brand-name{ color:#fff; }
@media (max-width:560px){
  .brand-mark{ width:28px; height:28px; }
  .brand-name{ font-size:.9375rem; }
}
/* Below this the full name costs more header than it earns; the mark alone
   still identifies the site and the name is one tap away on the home link. */
@media (max-width:380px){ .brand-name{ display:none; } }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a:not(.btn){
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-display); font-size:.9375rem; font-weight:500;
  color:var(--ink-2); padding:.55rem .85rem; border-radius:var(--radius);
  transition:color .18s var(--ease), background .18s var(--ease);
}
.nav a:not(.btn):hover{ color:var(--ink); background:var(--muted); }
.nav a[aria-current="page"]:not(.btn){ color:var(--ink); font-weight:600; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-size:.9375rem; font-weight:600;
  padding:.75rem 1.4rem; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; min-height:44px; text-align:center;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ background:var(--accent-dk); color:var(--on-accent); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border-2); }
.btn--ghost:hover{ background:var(--muted); color:var(--ink); border-color:var(--ink-3); }
.btn--light{ background:#fff; color:var(--ink-surface); }
.btn--light:hover{ background:var(--on-dark); color:var(--ink-surface); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn--outline-light:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.55); }
.btn:active{ transform:translateY(1px); }

.nav-toggle{ display:none; background:none; border:1px solid var(--border-2); border-radius:var(--radius); width:44px; height:44px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; }
.nav-toggle:hover{ background:var(--muted); }

/* Collapse to the menu button before the header can wrap. Spanish is the
   widest of the three: with the full company name set as live text in the
   header it needs ~1179px, so the threshold is measured, not guessed. It was
   1080px when the brand was a compact raster lockup, and the wordmark pushed
   it up. Re-measure whenever the header gains anything. */
@media (max-width:1200px){
  /* Scoped to .js: with scripting off there is nothing to open the overlay,
     so the nav has to stay an ordinary wrapped list instead of a fixed sheet
     pinned over the content. */
  .no-js .nav{ flex-wrap:wrap; justify-content:flex-start; gap:.1rem .35rem; padding-bottom:.5rem; }
  .no-js .nav a:not(.btn){ min-height:38px; padding:.4rem .55rem; font-size:.875rem; }
  .no-js .head-in{ flex-wrap:wrap; }
  .js .nav-toggle{ display:inline-flex; }
  .js .nav{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:var(--s-2) clamp(1.25rem,4vw,2.5rem) var(--s-3);
    box-shadow:0 24px 40px -24px rgba(10,13,18,.25);
    max-height:calc(100dvh - 72px); overflow-y:auto;
  }
  .js .nav[hidden]{ display:none; }
  .js .nav a:not(.btn){ padding:.85rem 0; border-bottom:1px solid var(--border); font-size:1rem; border-radius:0; }
  .js .nav a:not(.btn):hover{ background:transparent; }
  .js .nav .btn{ margin-top:var(--s-2); border-bottom:none; }
  /* In the sheet the switcher is a row of its own, not a trailing rail. */
  .nav .langs{ margin:var(--s-3) 0 0; padding:var(--s-2) 0 0;
    border-left:none; border-top:1px solid var(--border); }
  .nav .langs a{ min-width:46px; }
}

/* ---------- section video ---------- */
/* Full-bleed behind a dark section. The scrim is not decoration: the section's
   text contrast is measured against the ink beneath, so the video must never
   be allowed to lighten it. */
.section--video{ position:relative; isolation:isolate; }
.section--video > .wrap{ position:relative; z-index:2; }
/* FAIL VISIBLE. The poster is frame 0 of the same footage, so the element has
   to sit at its final opacity from the start. Starting at 0 and waiting for JS
   to add .is-playing turned every non-playing state — reduced motion, a
   viewport under 760px, no IntersectionObserver — into a flat void. */
.section--video .sec-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:.62;
}
/* An even scrim rather than a directional one: the sector cards span the full
   width, so there is no side of this section where footage can be allowed to
   get brighter. The figure that matters is video-opacity x (1 - scrim alpha),
   which has to stay near .2 for --on-dark-2 body text to hold 4.5:1 against
   the brightest frame. tools/video_contrast.py measures it rather than
   trusting the arithmetic. */
.section--video::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(10,13,18,.68) 14%,
                    rgba(10,13,18,.68) 86%, var(--ink) 100%);
}

/* Contained panel for a section that is not dark, built as a shell around a
   core so the media reads as a machined plate rather than a pasted rectangle. */
.sec-media{
  margin:var(--s-4) 0 0; padding:7px;
  background:var(--muted); border-radius:20px;
}
.sec-media-in{
  position:relative; overflow:hidden; border-radius:13px; background:var(--ink-surface);
  aspect-ratio:16/7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 44px -32px rgba(10,13,18,.5);
}
/* Same rule: without this the panel is a black 16:7 rectangle whenever the
   loop does not autoplay, which is exactly what it looked like on the owner's
   machine with Reduce motion switched on. */
.sec-media .sec-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:1;
}
.sec-media-in::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,13,18,.22), transparent 38%, rgba(10,13,18,.3));
}
@media (max-width:700px){
  .sec-media{ padding:5px; border-radius:16px; }
  .sec-media-in{ border-radius:11px; aspect-ratio:16/9; }
}

/* ---------- hero ---------- */
.hero{ background:var(--ink-surface); color:var(--on-dark); position:relative; overflow:hidden; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(62rem 32rem at 80% -12%, rgba(26,79,214,.34), transparent 62%),
    linear-gradient(180deg, transparent 65%, rgba(0,0,0,.25));
}
.hero-in{ position:relative; z-index:1; padding-block:clamp(4rem,11vw,7.5rem); }
/* Interior pages are not the landing page and should not wear its hero. */
.hero--page .hero-in{ padding-block:clamp(2.5rem,6vw,4.25rem); }
.hero--page h1{ font-size:clamp(2rem,3.9vw,3rem); max-width:24ch; }
.hero--page .lead{ font-size:clamp(1rem,1.5vw,1.125rem); }
.hero h1{
  font-size:clamp(2.2rem,5vw,3.9rem);
  letter-spacing:-.018em; color:#fff; max-width:19ch; margin-bottom:var(--s-3);
}
.hero .lead{ max-width:56ch; color:#C3D2E3; font-size:clamp(1.0625rem,1.7vw,1.25rem); }
.hero a:not(.btn){ color:var(--accent-lt); text-underline-offset:3px; }
.hero a:not(.btn):hover{ color:#C4D7FF; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4); }

.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; margin-top:clamp(2.5rem,6vw,var(--s-6));
  background:var(--dark-line); border:1px solid var(--dark-line);
}
.hero-stats div{ background:var(--ink-surface); padding:1.25rem 1.35rem; }
.hero-stats dt{ font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); font-family:var(--font-display); }
.hero-stats dd{ margin:.45rem 0 0; font-family:var(--font-display); font-size:1.6rem; font-weight:600; color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ---------- hero video ---------- */
/* The poster is the guaranteed layer. The video is an enhancement injected by
   JS, so no viewer ever waits on it and reduced-motion never sees it move. */
.hero--video{ isolation:isolate; }
.hero-media{ position:absolute; inset:0; overflow:hidden; z-index:0; background:var(--ink-surface); }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:62% 50%;
  opacity:.74; filter:saturate(.78) contrast(1.04);
}
/* Scrim is banded to the text column rather than washed flat over the whole
   frame, so the photography stays legible instead of going grey. */
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,13,18,.92) 0%, rgba(10,13,18,.86) 38%, rgba(10,13,18,.5) 66%, rgba(10,13,18,.2) 100%),
    linear-gradient(to top, rgba(10,13,18,.6) 0%, rgba(10,13,18,0) 46%),
    linear-gradient(to bottom, rgba(10,13,18,.58) 0%, rgba(10,13,18,0) 32%);
}
.hero--video::after{ display:none; }
.hero--video .hero-in{ position:relative; z-index:2; }
@media (max-width:760px){
  .hero-scrim{ background:linear-gradient(180deg, rgba(10,13,18,.7) 0%, rgba(10,13,18,.82) 55%, rgba(10,13,18,.9) 100%); }
  .hero-video{ opacity:.6; object-position:58% 50%; }
}

/* ---------- the mark, in the hero ----------
   The plate reads itself: each node brightens in turn along the diagonal, so
   the animation says the same thing the copy does — something is being
   checked. Decorative, so it is aria-hidden and it stops dead under
   reduced-motion rather than being the reason someone leaves. */
.hero-mark-wrap{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  display:grid; place-items:center; justify-content:end;
  padding-right:clamp(1rem,6vw,6rem);
}
.hero-mark{
  width:clamp(20rem,38vw,34rem); height:auto; opacity:.2;
  filter:drop-shadow(0 0 40px rgba(26,79,214,.25));
}
.hero-mark .mk-frame{ opacity:.9; }
.hero-mark .n{
  animation:mkRead 7s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:var(--d);
  transform-box:fill-box; transform-origin:center;
}
@keyframes mkRead{
  0%,58%,100%{ opacity:var(--o); transform:scale(1); }
  66%        { opacity:1;        transform:scale(1.55); }
  74%        { opacity:var(--o); transform:scale(1); }
}
@media (max-width:760px){
  .hero-mark-wrap{ place-items:start center; padding:6rem 0 0; }
  .hero-mark{ width:min(78vw,22rem); opacity:.1; }
}
@media (prefers-reduced-motion: reduce){
  .hero-mark .n{ animation:none; }
}

/* ---------- animated partner marquee ----------
   Two rows scrolling opposite ways. The track holds the row twice and shifts
   by exactly -50%, so the seam is invisible. Motion is decoration: with
   reduced-motion the whole thing collapses to a static grid below. */
.logo-marquee{ display:grid; gap:1px; background:var(--border); border-block:1px solid var(--border); }
.marquee{ overflow:hidden; position:relative; background:var(--border); }
.marquee-track{
  display:flex; width:max-content; gap:1px;
  animation:marq 78s linear infinite;
  will-change:transform;
}
.marquee--rev .marquee-track{ animation-direction:reverse; }
@keyframes marq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
/* pause when a visitor is actually reading it */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{ animation-play-state:paused; }
.marquee .lw-cell{ width:232px; flex:0 0 232px; }
/* soften the cut at both ends */
.logo-marquee{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
               mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
@media (max-width:640px){
  .marquee .lw-cell{ width:176px; flex:0 0 176px; }
  .marquee-track{ animation-duration:52s; }
}

/* ---------- talent band (home) ---------- */
.band-talent{ background:var(--warm); border-block:1px solid var(--border); }
.talent{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:900px){
  .talent{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(3rem,6vw,5rem); align-items:center; }
}
.talent-list{ margin:0; padding:0; list-style:none; }
.talent-list li{
  display:flex; align-items:baseline; gap:1.1rem;
  padding:1.05rem 0; border-top:1px solid #eae4da;
  font-family:var(--font-display); font-size:clamp(1.05rem,1.7vw,1.35rem); color:var(--ink);
}
.talent-list li:last-child{ border-bottom:1px solid #eae4da; }
.talent-n{
  font-family:var(--font-mono); font-size:.75rem; color:var(--accent);
  font-variant-numeric:tabular-nums; flex:none;
}

/* ---------- role cards (/join/) ---------- */
.roles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:var(--s-2); }
/* nested shell + core, so the card reads as a machined object rather than a box */
.role{
  position:relative; background:var(--muted); padding:7px; border-radius:18px;
  transition:transform .5s var(--ease-slow), box-shadow .5s var(--ease-slow);
}
.role::before{
  content:""; position:absolute; inset:7px; border-radius:11px; background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(10,13,18,.05);
}
.role{ display:flex; flex-direction:column; }
.role > *{ position:relative; z-index:1; }
/* Push the credential line to the foot of every card so the row reads as one
   band rather than three ragged ones. */
.role > .role-cred{ margin-top:auto; }
.role > h3{ padding:1.5rem 1.5rem 0; font-size:1.125rem; }
.role > p{ padding:.7rem 1.5rem 0; font-size:.9375rem; color:var(--ink-2); line-height:1.65; margin:0; }
@media (hover:hover){
  .role:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -26px rgba(10,13,18,.35); }
}
.role-cred{ padding-bottom:1.5rem !important; margin-top:1rem; font-size:.8125rem !important; color:var(--ink-3) !important; }
.role-cred span{
  display:block; font-family:var(--font-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.3rem;
}

/* ---------- forms on a dark section ---------- */
.form--dark .field label{ color:#fff; }
.form--dark .field input,.form--dark .field select,.form--dark .field textarea{
  background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.19); color:var(--on-dark);
}
.form--dark .field input:focus,.form--dark .field select:focus,.form--dark .field textarea:focus{
  border-color:var(--accent-lt); box-shadow:0 0 0 3px rgba(143,178,255,.18); background:rgba(255,255,255,.08);
}
.form--dark .field .hint{ color:var(--on-dark-2); }
.form--dark .field .err,.form--dark .err{ color:#FCA5A5; }
.form--dark .form-note{ color:var(--on-dark-2); }
.form--dark .field .req{ color:#FCA5A5; }
.form--dark .field select option{ color:var(--ink-surface); background:#fff; }
/* An option needs its own opaque ground: Chrome on Windows and Linux paints
   the popup with the select's background, so inheriting a translucent dark
   panel leaves dark ink on a dark list. */

.steps{ margin:0; padding:0; list-style:none; counter-reset:none; }
.steps li{
  display:flex; gap:.9rem; align-items:baseline;
  padding:.75rem 0; border-top:1px solid var(--dark-line);
  font-size:.9375rem; color:var(--on-dark-2); line-height:1.6;
}
.steps li:first-child{ border-top:none; padding-top:0; }
.steps span{
  font-family:var(--font-mono); font-size:.6875rem; color:var(--accent-lt);
  font-variant-numeric:tabular-nums; flex:none;
}

/* ---------- the two arms ---------- */
.arms{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
@media (min-width:760px){ .arms{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .arms{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.arm{ background:var(--surface); padding:clamp(1.75rem,3vw,2.5rem); display:flex; flex-direction:column; }
/* Tint the middle pillar so the row reads as three, not as a slab. At two
   columns the third card wraps to its own row, so the tint follows position
   rather than index. */
.arm:nth-child(2){ background:var(--warm); }
@media (min-width:760px) and (max-width:1079px){
  .arm:nth-child(2){ background:var(--surface); }
  .arm:nth-child(3){ background:var(--warm); }
}
.arm-ico{ color:var(--accent); display:block; margin-bottom:var(--s-3); }
.arm-kicker{
  font-family:var(--font-body); font-size:.6875rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.7rem;
}
.arm h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin-bottom:.9rem; }
.arm-lede{ font-size:1rem; color:var(--ink-2); line-height:1.7; }
.arm-list{ margin:var(--s-3) 0 0; padding:0; list-style:none; border-top:1px solid var(--border); }
.arm-list li{
  position:relative; padding:.7rem 0 .7rem 1.35rem; font-size:.9375rem;
  color:var(--ink-2); border-bottom:1px solid var(--border);
}
.arm-list li::before{ content:""; position:absolute; left:0; top:1.28em; width:7px; height:1px; background:var(--accent); }
.arm:nth-child(2) .arm-list li{ border-color:#eae4da; }
.arm:nth-child(2) .arm-list{ border-top-color:#eae4da; }

.aside-p{ font-size:.9375rem; color:var(--ink-2); line-height:1.65; margin-top:.75rem; }
.req-note{ color:var(--ink-2); font-size:.9375rem; margin-top:.5rem; }
.foot-parent{ color:var(--on-dark); font-weight:500; }

/* ---------- partner logo wall ---------- */
.band-logos{ background:var(--surface); border-block:1px solid var(--border); }
.lw-lead{
  font-family:var(--font-display); font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  text-align:center; margin:0 0 clamp(1.75rem,4vw,2.5rem);
}
.logo-wall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:1px; background:transparent;
}
.logo-wall--compact{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.lw-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; padding:1.6rem 1.1rem 1.25rem; background:var(--surface);
  min-height:132px; text-align:center; position:relative; overflow:hidden;
  box-shadow:0 0 0 1px var(--border);
  transition:background .2s var(--ease);
}
a.lw-cell:hover{ background:var(--warm); }

/* accent rule wipes in along the bottom on hover / keyboard focus */
a.lw-cell::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
a.lw-cell:hover::after,
a.lw-cell:focus-visible::after{ transform:scaleX(1); }

/* light sweep, used only for the click confirmation */
.lw-sweep{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(105deg, transparent 22%, rgba(26,79,214,.15) 50%, transparent 78%);
  transform:translateX(-115%);
}

/* click: acknowledge, then hand off to the partner site */
@keyframes lwGo   { 0%{transform:scale(1)} 34%{transform:scale(.975)} 100%{transform:scale(1.015)} }
@keyframes lwSweep{ to { transform:translateX(115%); } }
a.lw-cell.is-going{ animation:lwGo .42s var(--ease) both; background:#F3F6FE; z-index:2; }
a.lw-cell.is-going::after{ transform:scaleX(1); transition:transform .2s cubic-bezier(.2,.85,.25,1); }
a.lw-cell.is-going .lw-sweep{ animation:lwSweep .42s ease-out both; }
a.lw-cell.is-going .lw-mark img{ filter:none; opacity:1; transform:scale(1.07); }
a.lw-cell.is-going .lw-dom{ color:var(--accent); }
.lw-mark{ display:flex; align-items:center; justify-content:center; height:46px; width:100%; position:relative; z-index:2; }
.lw-mark img{
  max-height:46px; max-width:100%; width:auto; height:auto; display:block;
  /* Eighteen logos at eighteen different saturations is noise. A light
     desaturation at rest unifies them; full colour returns on hover. */
  filter:saturate(.46) contrast(1.03); opacity:.88;
  transition:filter .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
a.lw-cell:hover .lw-mark img,
a.lw-cell:focus-visible .lw-mark img{ filter:none; opacity:1; transform:translateY(-2px) scale(1.045); }
.lw-dom{
  position:relative; z-index:2;
  font-family:var(--font-mono); font-size:.6875rem; color:var(--ink-3);
  letter-spacing:.01em; word-break:break-all; line-height:1.4;
  transition:color .2s var(--ease);
}
a.lw-cell:hover .lw-dom{ color:var(--accent); }
.lw-cell.is-soon .lw-mark img{ filter:saturate(.12) opacity(.6); }
.lw-soon{
  font-family:var(--font-display); font-size:.5625rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--border-2); border-radius:2px; padding:.15rem .4rem; margin-top:.1rem;
}
.lw-note{ text-align:center; margin-top:clamp(1.5rem,3vw,2rem); font-size:.9375rem; color:var(--ink-3); }
.lw-note a{ font-family:var(--font-display); font-weight:600; white-space:nowrap; }
.lw-note svg{ vertical-align:-2px; }
@media (max-width:520px){
  .logo-wall,.logo-wall--compact{ grid-template-columns:repeat(2,1fr); }
  .lw-cell{ min-height:112px; padding:1.15rem .7rem 1rem; }
  .lw-mark{ height:36px; } .lw-mark img{ max-height:36px; }
  .lw-dom{ font-size:.625rem; }
}

/* register: alias + not-yet-live rows */
.reg-alias{ display:block; color:var(--ink-3); opacity:.8; }
.reg-nolink{ font-family:var(--font-display); font-weight:600; font-size:1.0625rem; color:var(--ink-2); letter-spacing:-.012em; }
.reg-tag{
  font-family:var(--font-display); font-style:normal; font-size:.5625rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--border-2); border-radius:2px; padding:.05rem .35rem; margin-left:.45rem;
}
.reg-row.is-soon{ opacity:.78; }
.reg-row.is-soon:hover{ background:transparent; }
.reg-row.is-soon:hover::before{ transform:scaleY(0); }

/* ---------- section head ---------- */
.sec-head{ max-width:70ch; margin-bottom:clamp(2rem,4vw,var(--s-5)); }
.sec-head h2{ font-size:clamp(1.65rem,3.1vw,2.35rem); margin-bottom:var(--s-2); }

/* ---------- audience cards ---------- */
.paths{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-2); }
.path{
  position:relative;
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s-3);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.path:hover{ border-color:var(--border-2); box-shadow:0 14px 28px -20px rgba(10,13,18,.35); transform:translateY(-2px); }
.path-ico{ color:var(--accent); margin-bottom:.35rem; }
.path h3{ font-size:1.0625rem; }
.path p{ font-size:.9375rem; color:var(--ink-2); line-height:1.6; }
.path .path-link{ margin-top:auto; padding-top:var(--s-2); font-family:var(--font-display); font-weight:600; font-size:.875rem; display:inline-flex; align-items:center; gap:.4rem; min-height:44px; }
/* stretch the card CTA over the whole card, as the register rows do */
.path .path-link::after{ content:""; position:absolute; inset:0; }
.path .path-link svg{ transition:transform .18s var(--ease); }
.path:hover .path-link svg{ transform:translateX(3px); }

/* ---------- capability grid ---------- */
.caps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:transparent; }
.cap{ background:var(--surface); padding:var(--s-3); box-shadow:0 0 0 1px var(--border); }
.cap-n{ font-family:var(--font-mono); font-size:.75rem; color:var(--accent); font-weight:600; letter-spacing:.06em; }
.cap h3{ font-size:1.0625rem; margin:.6rem 0 .45rem; }
.cap p{ font-size:.9375rem; color:var(--ink-2); line-height:1.6; }
.caps--dark{ background:transparent; }
.caps--dark .cap{ background:var(--ink-surface); box-shadow:0 0 0 1px var(--dark-line); }
.caps--dark .cap-n{ color:var(--accent-lt); }
.caps--dark h3{ color:#fff; }
.caps--dark p{ color:var(--on-dark-2); }

/* ---------- what we do: editorial list, deliberately NOT another card grid ---------- */
.work{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,4vw,3rem); }
@media (min-width:920px){
  .work{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(3rem,6vw,5.5rem); align-items:start; }
  .work-say{ position:sticky; top:104px; }
}
.work-say .lead{ margin-top:var(--s-2); }
.work-aside{
  margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--border);
  font-family:var(--font-display); font-size:.8125rem; font-weight:600; color:var(--ink-3);
  letter-spacing:.01em;
}
.work-list{ margin:0; padding:0; list-style:none; counter-reset:none; }
.work-item{
  display:grid; grid-template-columns:3.25rem minmax(0,1fr); gap:var(--s-2);
  padding:1.35rem 0; border-top:1px solid var(--border);
}
.work-item:last-child{ border-bottom:1px solid var(--border); }
.work-n{
  font-family:var(--font-mono); font-size:.8125rem; color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:.04em; padding-top:.2rem;
}
.work-item h3{ font-size:1.0625rem; margin-bottom:.35rem; }
.work-item p{ font-size:.9375rem; color:var(--ink-2); line-height:1.65; max-width:52ch; }
@media (max-width:520px){
  .work-item{ grid-template-columns:2.5rem minmax(0,1fr); gap:.75rem; }
}

/* ---------- the register ---------- */
.reg-sector{ margin-bottom:clamp(2.25rem,5vw,var(--s-5)); scroll-margin-top:5.5rem; }
.reg-sector:last-child{ margin-bottom:0; }
.reg-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-2); padding-bottom:.7rem; border-bottom:2px solid var(--ink); margin-bottom:0; flex-wrap:wrap; }
.reg-head h2,.reg-head h3{ font-size:1.0625rem; letter-spacing:.02em; }
.reg-count{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-3); letter-spacing:.06em; font-variant-numeric:tabular-nums; }

.reg-row{
  display:grid;
  grid-template-columns:3.25rem minmax(0,15rem) minmax(0,1fr) auto;
  align-items:center; gap:var(--s-2);
  padding:1.1rem 0 1.1rem 1rem;
  border-bottom:1px solid var(--border);
  position:relative;
  transition:background .18s var(--ease);
}
.reg-row::before{
  content:""; position:absolute; left:0; top:0; bottom:-1px; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .22s var(--ease);
}
.reg-row:hover{ background:var(--surface); }
.reg-row:hover::before{ transform:scaleY(1); }
.reg-row:focus-within{ background:var(--surface); }

.reg-num{ font-family:var(--font-mono); font-size:.8125rem; color:var(--ink-3); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.reg-name{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.reg-name a{ font-family:var(--font-display); font-weight:600; font-size:1.0625rem; color:var(--ink); letter-spacing:-.012em; }
.reg-name a:hover{ color:var(--accent); }
.reg-name a::after{ content:""; position:absolute; inset:0; }
.reg-dom{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-3); word-break:break-all; }
.reg-desc{ font-size:.9375rem; color:var(--ink-2); line-height:1.55; min-width:0; }
.reg-go{ color:var(--border-2); flex:none; transition:color .18s var(--ease), transform .18s var(--ease); }
.reg-row:hover .reg-go{ color:var(--accent); transform:translate(2px,-2px); }

@media (max-width:860px){
  .reg-row{ grid-template-columns:2.5rem minmax(0,1fr); row-gap:.45rem; padding-block:1rem; }
  .reg-desc{ grid-column:2 / -1; }
  .reg-go{ display:none; }
}

/* ---------- sector strip ---------- */
/* Seven sectors never fill a 3-col grid evenly. Hairlines go on the cells, not
   on the grid background, or the unfilled trailing track shows as a grey slab. */
/* ---------- six lines of business ---------- */
.lines{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,264px),1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border); margin-top:var(--s-4);
}
.line{
  background:var(--surface); padding:1.6rem 1.5rem 1.5rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.line-n{
  font-family:var(--font-mono); font-size:.6875rem; color:var(--accent);
  font-variant-numeric:tabular-nums; margin:0;
}
.line h3{ font-size:1.125rem; margin:0; }
.line-body{ font-size:.9375rem; color:var(--ink-2); line-height:1.65; margin:0; }
.line-list{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.5rem; }
.line-list li{
  position:relative; padding-left:1.05rem; font-size:.875rem;
  color:var(--ink-2); line-height:1.5;
}
.line-list li::before{
  content:""; position:absolute; left:0; top:.55em; width:.45rem; height:1px;
  background:var(--accent);
}

/* ---------- how ordering works ---------- */
.steps-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:var(--s-2); margin-top:var(--s-4);
}
.step-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem 1.35rem; display:flex; flex-direction:column; gap:.45rem;
}
.step-n{
  font-family:var(--font-mono); font-size:.6875rem; color:var(--accent);
  font-variant-numeric:tabular-nums; margin:0;
}
.step-card h3{ font-size:1rem; margin:0; }
.step-card p{ font-size:.9375rem; color:var(--ink-2); line-height:1.6; margin:0; }
[lang="hi"] .line-n,[lang="hi"] .step-n{ letter-spacing:0; }


/* ---------- the four disciplines ---------- */
.band-disc .sec-head{ margin-bottom:var(--s-4); }
.discs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));
  gap:1px; background:var(--dark-line);
  border:1px solid var(--dark-line); border-radius:var(--radius); overflow:hidden;
}
.disc{
  background:var(--ink-surface); padding:1.5rem 1.35rem 1.3rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.disc-kick{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent-lt); margin:0;
}
.disc h3{ font-size:1.0625rem; color:#fff; margin:0; }
.disc > p{ font-size:.9375rem; color:var(--on-dark-2); line-height:1.6; margin:0; }
/* The question each discipline owns is the point of the card, so it is set
   apart rather than run in with the description. */
.disc-q{
  margin-top:auto; padding-top:.95rem; border-top:1px solid var(--dark-line);
  font-family:var(--font-display); font-style:italic; font-size:.9375rem;
  color:var(--on-dark); line-height:1.5;
}
[lang="hi"] .disc-kick{ letter-spacing:.02em; text-transform:none; }
[lang="hi"] .disc-q{ font-style:normal; }

/* ---------- the four arenas ---------- */
.section--alt{ background:var(--muted); }
.band-focus .sec-head{ margin-bottom:var(--s-4); }
.focus{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));
  gap:var(--s-2);
}
.focus-card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.4rem 1.35rem 1.15rem;
  display:flex; flex-direction:column; gap:.45rem;
  transition:transform .5s var(--ease-slow), box-shadow .5s var(--ease-slow);
}
@media (hover:hover){
  .focus-card:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -28px rgba(10,13,18,.34); }
}
.focus-n{ font-family:var(--font-mono); font-size:.75rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.focus-card h3{ font-size:1.0625rem; }
.focus-card > p{ font-size:.9375rem; color:var(--ink-2); line-height:1.6; margin:0; }
/* The count is the honest part of this card, so it is styled as a fact and not
   as a badge — and an arena with nothing in it says so rather than going blank. */
.focus-count{
  margin-top:auto; padding-top:.85rem; font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  border-top:1px solid var(--border);
}
.focus-count.is-none{ color:var(--accent); }
.focus-note{ margin-top:var(--s-3); max-width:62ch; font-size:.9375rem; color:var(--ink-2); line-height:1.65; }
[lang="hi"] .focus-count{ letter-spacing:.02em; text-transform:none; }

.sectors{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:transparent; }
.sector{ background:var(--ink-surface); padding:var(--s-3) 1.35rem; display:flex; flex-direction:column; gap:.4rem; box-shadow:0 0 0 1px var(--dark-line); }
.sector-n{ font-family:var(--font-mono); font-size:.75rem; color:var(--accent-lt); font-variant-numeric:tabular-nums; }
.sector h3{ font-size:1rem; color:#fff; }
.sector p{ font-size:.875rem; color:var(--on-dark-2); line-height:1.55; }

/* ---------- CTA band ---------- */
.band{ background:var(--ink-surface); color:var(--on-dark); }
.band--photo{ position:relative; isolation:isolate; overflow:hidden; }
.band-bg{ position:absolute; inset:0; z-index:0; }
.band-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 58%; display:block; }
/* the aisle already recedes to black at the sides, so the scrim only needs to
   protect the copy column and the bottom edge, not flatten the whole frame */
.band--photo .band-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,13,18,.93) 0%, rgba(10,13,18,.82) 40%, rgba(10,13,18,.46) 72%, rgba(10,13,18,.28) 100%),
    linear-gradient(to bottom, rgba(10,13,18,.55), rgba(10,13,18,.2) 45%, rgba(10,13,18,.7));
}
.band--photo .band-in{ position:relative; z-index:2; padding-block:clamp(3.5rem,8vw,6.5rem); }
@media (max-width:700px){
  .band--photo .band-scrim{ background:linear-gradient(180deg, rgba(10,13,18,.88), rgba(10,13,18,.94)); }
}
.band-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; padding-block:clamp(2.75rem,6vw,var(--s-6)); }
.band h2{ font-size:clamp(1.5rem,2.8vw,2.1rem); max-width:22ch; color:#fff; }
.band p{ color:var(--on-dark-2); margin-top:.7rem; max-width:48ch; }
.band-act{ display:flex; gap:var(--s-2); flex-wrap:wrap; }

/* ---------- prose ---------- */
.prose{ max-width:68ch; }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin:var(--s-5) 0 var(--s-2); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.125rem; margin:var(--s-4) 0 .6rem; }
.prose p{ margin-bottom:var(--s-2); color:var(--ink-2); }
.prose ul{ margin:0 0 var(--s-3); padding:0; }
.prose li{ position:relative; padding-left:1.4rem; margin-bottom:.6rem; color:var(--ink-2); }
.prose li::before{ content:""; position:absolute; left:0; top:.65em; width:6px; height:1px; background:var(--accent); }

.split{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,5vw,var(--s-6)); }
@media (min-width:940px){ .split{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); } }
.aside-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s-3); align-self:start; }
@media (min-width:940px){
  .aside-card--sticky{ position:sticky; top:6.5rem; max-height:calc(100dvh - 8rem); overflow-y:auto; }
}
.aside-card h3{ font-size:1rem; margin-bottom:var(--s-2); }
.aside-card dl{ margin:0; }
.aside-card dt{ font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-family:var(--font-display); margin-top:var(--s-2); }
.aside-card dt:first-child{ margin-top:0; }
.aside-card dd{ margin:.3rem 0 0; font-size:.9375rem; color:var(--ink-2); }
.aside-card dd a{ word-break:break-word; }

/* ---------- contact / form ---------- */
.form{ display:grid; gap:var(--s-3); max-width:36rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-family:var(--font-display); font-size:.875rem; font-weight:600; color:var(--ink); }
.field .req{ color:#B91C1C; }
/* The dark form ground needs a lighter red; #B91C1C measures 2.99 on it. */
:root[data-theme="dark"] .field .req{ color:#F87171; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .field .req{ color:#F87171; }
}
.field .hint{ font-size:.8125rem; color:var(--ink-3); }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius);
  padding:.7rem .85rem; min-height:46px; width:100%;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ min-height:9rem; resize:vertical; line-height:1.6; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(26,79,214,.15); }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{ border-color:#B91C1C; }
.field .err{ font-size:.8125rem; color:#B91C1C; font-weight:500; }
.field .err:empty{ display:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-note{ font-size:.8125rem; color:var(--ink-3); max-width:52ch; line-height:1.55; }
.form-status{ padding:.85rem 1rem; border-radius:var(--radius); font-size:.9375rem; border:1px solid; }
.form-status[hidden]{ display:none; }
.form-status.ok{ background:#ECFDF5; border-color:#A7F3D0; color:#065F46; }
.form-status.bad{ background:#FEF2F2; border-color:#FECACA; color:#991B1B; }

.contact-list{ display:grid; gap:var(--s-2); }
.contact-item{ display:flex; gap:.85rem; align-items:flex-start; }
.contact-item svg{ color:var(--accent); flex:none; margin-top:.15rem; }
.contact-item dt{ font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-family:var(--font-display); }
.contact-item dd{ margin:.15rem 0 0; font-size:.9375rem; color:var(--ink-2); }

/* Phone/email are the primary contact actions. A pointer still needs a target
   that clears the 24px AA minimum, and a finger needs the full 44px; both are
   bought with min-height alone, so the desktop rhythm is untouched. */
.contact-item dd a,.aside-card dd a{ display:inline-flex; align-items:center; min-height:24px; }
@media (pointer:coarse){
  .contact-item dd a,.aside-card dd a{ min-height:44px; }
}

/* The dark variant must follow its base: both are single-class selectors, so
   whichever is written last wins, and declaring it earlier left the card
   painting --surface white under white text. */
.aside-card--dark{
  background:rgba(255,255,255,.045); border-color:var(--dark-line);
}
.aside-card--dark h3{ color:#fff; }
.aside-card--dark .aside-p{ color:var(--on-dark-2); }
.rule-dark{ border:none; border-top:1px solid var(--dark-line); margin:1.5rem 0; }


/* ---------- offices ---------- */
.offices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:transparent; }
.office{ background:var(--surface); padding:var(--s-3); box-shadow:0 0 0 1px var(--border); }
.office-role{ font-family:var(--font-display); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.office h3{ font-size:1.25rem; margin:.55rem 0 .2rem; }
.office-country{ font-size:.875rem; color:var(--ink-3); font-weight:500; }
.office-lines{ font-size:.9375rem; color:var(--ink-2); line-height:1.7; margin-top:var(--s-2); }

/* ---------- footer ---------- */
.site-foot{ background:var(--ink-surface); color:var(--on-dark-2); font-size:.875rem; padding-block:clamp(3rem,6vw,var(--s-6)) var(--s-4); }
.foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s-4); padding-bottom:var(--s-4); border-bottom:1px solid var(--dark-line); }
.foot-brand{ grid-column:span 1; }
@media (min-width:760px){ .foot-brand{ grid-column:span 2; max-width:28rem; } }
/* 16 partner names need real width, or they wrap three lines deep */
@media (min-width:1000px){
  .foot-grid{ grid-template-columns:1.5fr .85fr 1.1fr 1.9fr; }
  .foot-brand{ grid-column:auto; max-width:none; }
}
.foot-brand .brand{ margin-bottom:var(--s-3); }
.foot-brand .brand img{ height:44px; }
.foot-brand p{ color:var(--on-dark-2); line-height:1.65; }
.site-foot h2{ font-family:var(--font-display); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 .9rem; }
.site-foot li{ margin-bottom:.55rem; }
.site-foot a{ color:var(--on-dark-2); }
.site-foot a:hover{ color:#fff; }
.site-foot address{ font-style:normal; line-height:1.7; }
.foot-bot{ display:flex; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap; padding-top:var(--s-3); font-size:.8125rem; }
.foot-legal{ max-width:78ch; color:#7A8CA3; font-size:.78125rem; line-height:1.6; padding-top:var(--s-3); }

.foot-partners{ columns:2; column-gap:var(--s-3); }
@media (max-width:520px){ .foot-partners{ columns:1; } }
.foot-partners li{ break-inside:avoid; }
.foot-soon{ color:#8395AD; }

/* ---------- reveal (fails visible; never depends on the observer) ---------- */
.reveal{ opacity:1; transform:none; }
html.js-reveal .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.js-reveal .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js-reveal .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  a.lw-cell.is-going{ animation:none; }
  a.lw-cell.is-going .lw-sweep{ animation:none; }
  .marquee-track{ animation:none; flex-wrap:wrap; width:100%; justify-content:center; }
  .marquee .lw-cell{ width:auto; flex:1 1 200px; }
  .logo-marquee{ -webkit-mask-image:none; mask-image:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- the buying action under the ordering steps ----------
   The highest-intent moment on the page used to end with "Email or call us"
   and no link to do either; below 1200px the header CTA is behind the
   hamburger, so there was nothing to tap. */
.steps-cta{
  margin-top:var(--s-4); display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s-2) var(--s-3);
}
.steps-cta-note{ margin:0; font-size:.9375rem; color:var(--ink-2); }
.steps-cta-note a{ font-weight:500; }

/* one line in place of a whole recruiting section that duplicated /join/ */
.band-join{ border-top:1px solid var(--border); }
.join-line{
  margin:0; max-width:70ch; font-size:1rem; color:var(--ink-2); line-height:1.7;
}
.join-line a{ font-weight:500; white-space:nowrap; }

/* ---------- mobile type scale (must stay last: these are overrides) ---------- */
/* On a phone the smallest type in the system is the hardest-working: tracked
   small caps at 11px and legal text at 12.5px are legible on a desktop at
   arm's length and not in one hand on a train. Bumped only below 700px, so the
   desktop rhythm is untouched. */
@media (max-width:700px){
  .eyebrow,.lw-lead{ font-size:.75rem; letter-spacing:.11em; }
  .foot-legal{ font-size:.8125rem; line-height:1.6; }
  .field .hint,.form-note{ font-size:.875rem; }
  .line-list li,.focus-card > p,.disc > p{ font-size:.9375rem; }
}

@media print{
  .site-head,.nav-toggle,.band,.hero::after{ display:none !important; }
  body{ background:#fff; }
  .hero,.dark,.site-foot{ background:#fff !important; color:#000 !important; }
  .hero h1,.dark h2,.dark h3{ color:#000 !important; }
}