/* IEXO Technology: site styles. Brand tokens from IEXO-Brand-Kit/07-Digital/brand-tokens.css */
:root {
  --paper: #F6F7ED; --signal: #DDFF55; --graphite: #0B0B0B; --steel: #898A90; --mist: #DAD7C8;
  --intel: #1E488F; --syst: #1B6F81; --labs: #74C365; --labs-ink: #3E8E2F;
  --ink: #0B0B0B; --ink-2: rgba(11, 11, 11, .62); --ink-3: rgba(11, 11, 11, .4); --line: rgba(11, 11, 11, .12);
  --bg: #FFFFFF;
  --sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', Menlo, monospace;
  --gut: clamp(20px, 4vw, 56px);
  --max: 1360px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --hdr: 76px;
  /* type scale: fluid from 360px to 1440px viewports. 12/14/16 fixed UI steps, then a modular
     heading scale. Every font-size on the site uses one of these; tracking tightens and leading
     drops as size grows. Weights: 400 text and headings, 500 interface labels and emphasis. */
  --fs-meta: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem);
  --fs-h6: clamp(1.125rem, 1.0625rem + 0.2778vw, 1.3125rem);
  --fs-h5: clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem);
  --fs-h4: clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem);
  --fs-h3: clamp(1.75rem, 1.4167rem + 1.4815vw, 2.75rem);
  --fs-h2: clamp(2rem, 1.3333rem + 2.9630vw, 4rem);
  --fs-h1: clamp(2.5rem, 1.5833rem + 4.0741vw, 5.25rem);
  --fs-display: clamp(2.75rem, 1.6667rem + 4.8148vw, 6rem);
  --lh-meta: 1.4;
  --lh-sm: 1.5;
  --lh-base: 1.55;
  --lh-md: 1.55;
  --lh-h6: 1.25;
  --lh-h5: 1.2;
  --lh-h4: 1.15;
  --lh-h3: 1.1;
  --lh-h2: 1.06;
  --lh-h1: 1.02;
  --lh-display: 1.0;
  --lh-lead: 1.38;   /* large paragraphs: ledes, deks, captions */
  --lh-quote: 1.18;  /* statement and quote text set at heading sizes */
  --ls-h6: -0.015em;
  --ls-h5: -0.02em;
  --ls-h4: -0.025em;
  --ls-h3: -0.03em;
  --ls-h2: -0.035em;
  --ls-h1: -0.04em;
  --ls-display: -0.045em;
  --ls-caps: .08em;     /* uppercase mono labels and eyebrows */
  --fs-caps: .8125rem;  /* uppercase sans calls to action only (13px) */
  --ls-caps-ui: .05em;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-base)/var(--lh-base) var(--sans); font-synthesis: none; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; text-wrap: balance; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }
b, strong { font-weight: 500; }
time, .num, td { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; }
.mark path, .mark rect, .mark polygon, .mark circle { fill: currentColor; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }
.ink { color: var(--ink); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--graphite); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--intel); outline-offset: 3px; border-radius: 2px; }

.label { font: 500 var(--fs-meta)/var(--lh-meta) var(--mono); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); margin: 0; }
.label a:hover { color: var(--ink); }
.label.center { text-align: center; }
.label--light { color: rgba(246, 247, 237, .6); }
.h2 { font: 400 var(--fs-h2)/var(--lh-h2) var(--sans); letter-spacing: var(--ls-h2); margin: 0; }
.small { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); margin: 0; }
.lede { font: 400 var(--fs-h5)/var(--lh-lead) var(--sans); letter-spacing: var(--ls-h5); margin: 0; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 1px; }
.tag-sample { display: inline-block; margin-left: 12px; padding: 3px 8px; border-radius: 3px; background: rgba(11, 11, 11, .06); font: 500 var(--fs-meta)/var(--lh-meta) var(--mono); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.txtlink { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.txtlink i, .btn i, .co__go i, .mm__more i, .mm__parent i { font-style: normal; transition: transform .35s var(--ease); }
.txtlink:hover i, .btn:hover i, .co:hover .co__go i, .mm__cohead:hover .mm__more i, .mm__parent:hover i { transform: translateX(4px); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 4px; font: 500 var(--fs-sm)/1 var(--sans); letter-spacing: -.005em; white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.btn--dark { background: var(--graphite); color: var(--paper); }
.btn--dark:hover { background: #262626; }
.btn--lime { background: var(--signal); color: var(--graphite); }
.btn--lg { height: 52px; padding: 0 26px; font-size: var(--fs-base); }
.btn:active { transform: scale(.98); }

/* ================================================================== header */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .45s var(--ease); }
.hdr__row { position: relative; z-index: 2; height: var(--hdr); display: flex; align-items: center; gap: 32px; }
.hdr.is-scrolled, .hdr.mm-open { background: rgba(246, 247, 237, .9); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
.hdr.mm-open { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr.mm-open.is-scrolled { background: rgba(246, 247, 237, .9); }
.hdr.is-hidden { transform: translateY(-100%); }
body.menu-open .hdr { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); transform: none; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--graphite); }
.brand__mark { height: 30px; width: auto; }
.brand__name { font: 500 var(--fs-meta)/1.1 var(--sans); letter-spacing: -.005em; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 4px; font: 500 var(--fs-sm)/1 var(--sans); color: var(--ink); transition: background .2s var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: var(--graphite); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__trigger[aria-expanded="true"]::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.chev { width: 7px; height: 7px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
[aria-expanded="true"] > .chev { transform: translateY(1px) rotate(-135deg); }
.hdr__cta { margin-left: 12px; display: inline-flex; align-items: center; gap: 12px; font: 500 var(--fs-caps)/1 var(--sans); letter-spacing: var(--ls-caps-ui); text-transform: uppercase; color: var(--graphite); white-space: nowrap; transition: opacity .2s var(--ease); }
.hdr__ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--graphite); color: var(--paper); transition: background .2s var(--ease), color .2s var(--ease), transform .35s var(--ease); }
.hdr__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hdr__cta:hover .hdr__ico { background: var(--signal); color: var(--graphite); transform: rotate(45deg); }
.menu-btn { display: none; margin-left: auto; align-items: center; gap: 10px; height: 40px; padding: 0 4px; font: 500 var(--fs-sm)/var(--lh-sm) var(--sans); }
.menu-btn i { width: 18px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: height .3s var(--ease); }
.menu-btn[aria-expanded="true"] i { height: 0; border-bottom: 0; }

/* ================================================================== mega menu */
.mm { position: absolute; top: calc(var(--hdr) - 6px); z-index: 1; overflow: hidden;
  left: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); right: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .5s var(--ease), visibility 0s linear .5s; }
.mm[hidden] { display: block; }
.mm.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .55s var(--ease); }
.mm > .wrap { max-width: none; padding: 0 28px; }
.mm__grid { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); gap: 0; padding: 28px 0 24px; }
.mm__grid > * { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.mm.is-open .mm__grid > * { opacity: 1; transform: none; }
.mm.is-open .mm__grid > *:nth-child(2) { transition-delay: .06s; } .mm.is-open .mm__grid > *:nth-child(3) { transition-delay: .1s; }
.mm.is-open .mm__grid > *:nth-child(4) { transition-delay: .14s; } .mm.is-open .mm__grid > *:nth-child(5) { transition-delay: .18s; }
.mm__intro { padding: 6px 32px 6px 0; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid var(--line); }
.mm__eyebrow { font: 500 var(--fs-meta)/var(--lh-meta) var(--mono); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.mm__big { margin: 0; font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); }
.mm__parent { margin-top: auto; display: inline-flex; gap: 8px; font-size: var(--fs-sm); border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 2px; }
.mm__co { position: relative; padding: 0 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.mm__co::before { content: ""; position: absolute; inset: -28px 0 -24px; background: var(--tint); opacity: 0; transition: opacity .35s var(--ease); z-index: -1; }
.mm__co:hover::before, .mm__co:focus-within::before { opacity: .6; }
.mm__cohead { display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 16px; }
.mm__title { font: 400 var(--fs-h6)/var(--lh-h6) var(--sans); letter-spacing: var(--ls-h6); }
.mm__sub { font-size: var(--fs-sm); color: var(--ink-2); margin-top: -2px; }
.mm__more { font-size: var(--fs-sm); color: var(--acc); display: inline-flex; gap: 6px; font-weight: 500; }
.mm__links { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mm__link { display: grid; gap: 2px; padding: 11px 6px; border-bottom: 1px solid var(--line); transition: padding .3s var(--ease); }
.mm__link b { font-weight: 500; font-size: var(--fs-base); }
.mm__link span { font-size: var(--fs-sm); color: var(--ink-2); }
.mm__link:hover { padding-left: 12px; }
.mm__links .mm__link:last-child { border-bottom: 0; }
.mm__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 18px; border-top: 1px solid var(--line); }
.mm__foot .mono { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); color: var(--ink-2); }
.mm__footlinks { display: flex; align-items: center; gap: 22px; font-size: var(--fs-sm); }
.mm__footlinks a:not(.btn):hover { color: var(--intel); }
.mm__mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 18px; padding: 22px 0 26px; }
.mm__mini .mm__link { border-bottom: 0; border-top: 1px solid var(--line); padding-top: 16px; }
.mm__grid--about { grid-template-columns: 1.15fr 1fr 1fr 1.2fr; }
.mm__card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 6px 24px 8px; border-right: 1px solid var(--line); }
.mm__card::before { content: ""; position: absolute; inset: -28px 0 -24px; background: rgba(11, 11, 11, .035); opacity: 0; transition: opacity .35s var(--ease); z-index: -1; }
.mm__card:hover::before { opacity: 1; }
.mm__card .mm__more { margin-top: auto; padding-top: 18px; color: var(--ink); }
.mm__contact { padding: 6px 0 8px 28px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.mm__contact .mm__title { color: var(--ink); margin-bottom: 6px; }
.mm__contact a:not(.mm__cta) { color: var(--ink); }
.mm__contact a:not(.mm__cta):hover { color: var(--intel); }
.mm__cta { margin: auto 0 0; padding-top: 18px; }
.scrim { position: fixed; inset: 0; z-index: 45; background: rgba(11, 11, 11, .04); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
body.mm-active .scrim { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 40; background: var(--paper); padding-top: calc(var(--hdr) + 8px); overflow-y: auto; }
.drawer[hidden] { display: block; visibility: hidden; opacity: 0; pointer-events: none; }
.drawer { transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.drawer.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .3s var(--ease); }
.drawer__inner { display: flex; flex-direction: column; padding: 8px var(--gut) 40px; }
.drawer__group, .drawer__link { display: flex; align-items: center; justify-content: space-between; min-height: 60px; border-bottom: 1px solid var(--line); font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); text-align: left; }
.drawer__sub { display: grid; gap: 10px; padding: 14px 0; }
.drawer__sub[hidden] { display: none; }
.drawer__sub b { font-weight: 500; }
.drawer__sub span { font-size: var(--fs-sm); color: var(--ink-2); }
.drawer__cta { height: 52px; margin-top: 28px; font-size: var(--fs-base); }
.drawer__meta { margin-top: 20px; font-size: var(--fs-meta); color: var(--ink-2); }

/* ================================================================== atmosphere + hero prism (reference: colour columns + slanted glass sheets) */
.atmos { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #F2F4F2 0%, #EEF1F3 60%, #EFF2F4 100%); }
.atmos__glow { position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(28% 22% at 50% 50%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(40% 30% at 85% 92%, rgba(176, 214, 226, .35), transparent 70%), radial-gradient(35% 25% at 12% 88%, rgba(232, 250, 140, .22), transparent 70%);
  animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(-6%, -4%); } to { transform: translate(6%, 5%); } }
.prism { position: absolute; left: 0; right: 0; top: 0; height: min(100vh, 980px); z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 92%); }
.prism__col { position: absolute; top: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(var(--c), 1) 0%, rgba(var(--c), .85) 40%, rgba(var(--c), .45) 70%, rgba(var(--c), 0) 100%);
  transform-origin: top; transform: scaleY(0); animation: colIn 1.6s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes colIn { to { transform: scaleY(1); } }
.prism__sheet { position: absolute;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .5) 35%, rgba(255, 255, 255, .14) 80%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 1px 0 0 rgba(255, 255, 255, .55);
  transform: translate3d(0, calc(var(--py, 0px) + 30px), 0) skewY(14deg); transform-origin: left top; opacity: 0;
  animation: sheetIn 1.5s var(--ease) forwards; animation-delay: calc(.35s + var(--i) * 80ms); will-change: transform; }
@keyframes sheetIn { to { opacity: 1; transform: translate3d(0, var(--py, 0px), 0) skewY(14deg); } }
.prism.ready .prism__sheet { animation: none; opacity: 1; transform: translate3d(0, var(--py, 0px), 0) skewY(14deg); transition: transform .1s linear; }
.atmos--page, .atmos--co { background: #fff; }
.atmos--page .atmos__glow, .atmos--co .atmos__glow { display: none; }
.atmos--page .prism, .atmos--co .prism { height: min(64vh, 600px); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }

/* home hero */
.hero { min-height: min(100svh, 980px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--hdr) + 40px); padding-bottom: 28px; }
.hero__title { font: 400 var(--fs-display)/var(--lh-display) var(--sans); letter-spacing: var(--ls-display); margin: 0 0 clamp(36px, 6vh, 64px); max-width: 19ch; color: #0B0B0B; }
.hero__title .line, .phero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span, .phero__title .line > span { display: inline-block; transform: translateY(105%); animation: lineUp 1.1s var(--ease) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: .12s; }
@keyframes lineUp { to { transform: none; } }
.hero__row { display: grid; grid-template-columns: minmax(0, 320px) 40px minmax(0, 220px) 1fr; align-items: start; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.hero__lead { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.hero__arrow { font-size: 16px; line-height: 1.2; }
.hero__meta { margin: 0; text-align: right; font-size: var(--fs-meta); line-height: 1.6; }
.hero__social { margin: 0; display: flex; justify-content: flex-end; gap: 22px; font-size: var(--fs-sm); }
.hero__social a { display: inline-flex; gap: 4px; color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); }
.hero__social a:hover { border-color: currentColor; }
.hero__social i { font-style: normal; font-size: 11px; color: var(--ink-2); }
.hero__meta .mono { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.rise { opacity: 0; transform: translateY(16px); animation: rise .9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* page hero (internal pages) */
.phero { padding-top: calc(var(--hdr) + clamp(120px, 20vh, 220px)); padding-bottom: clamp(48px, 8vh, 88px); }
.phero .label { margin-bottom: 22px; }
.phero__title { font: 400 var(--fs-h1)/var(--lh-h1) var(--sans); letter-spacing: var(--ls-h1); margin: 0; max-width: 17ch; color: #0B0B0B; }
.phero__title--case { max-width: 20ch; font-size: var(--fs-h2); }
.phero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: 24px; }
.phero__lead { margin: 0; max-width: 560px; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--ink-2); }
.phero--article { padding-bottom: 48px; }
.phero--article .phero__title { max-width: 22ch; font-size: var(--fs-h2); }
.phero--article .phero__lead { margin-top: 22px; }

/* company hero */
.cohero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: end; padding-top: calc(var(--hdr) + clamp(96px, 16vh, 180px)); padding-bottom: clamp(56px, 8vh, 96px); }
.cohero .phero__lead { margin-top: 26px; }
.cohero__cta { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.cohero__media .case__media { aspect-ratio: 1.15; }

/* hero showcase strip: product mockups, slow seamless loop */
.show { position: relative; overflow: hidden; padding: 34px 0 6px; }
.show:hover .show__track { animation-play-state: paused; }
.show__t { margin: 0; width: clamp(240px, 22vw, 320px); flex: none; display: flex; flex-direction: column; gap: 12px; }
.show__m { aspect-ratio: 1.38; background-image: var(--img, none); background-size: cover; background-position: center; }
.show__logo { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; color: var(--graphite); transition: transform .6s var(--ease); }
.show__logo svg { width: 28px; height: 28px; fill: currentColor; }
.show__logo b { font: 400 var(--fs-h6)/var(--lh-h6) var(--sans); letter-spacing: var(--ls-h6); }
.show__t:hover .show__logo { transform: scale(1.04); }
.show__t:hover .ins__sheet { transform: translateY(-10px) skewY(14deg); }

/* origin: one line about how IEXO came to be */

/* units of work: big number + card (reference: numbered booths) */
.units { padding-top: clamp(96px, 14vw, 180px); }
.units__list { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.unit { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.unit__num { position: sticky; top: calc(var(--hdr) + 40px); font: 400 clamp(96px, 14vw, 220px)/.85 var(--sans); letter-spacing: -.07em; color: var(--graphite); }
.unit__card { border-radius: 10px; overflow: hidden; background: var(--tint); }
.unit__art { position: relative; aspect-ratio: 1.9; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; }
.unit__ui { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; transition: transform .9s var(--ease); }
.unit__ui .ui--desk, .unit__ui .ui--infra { width: 54%; }
.unit__ui .ui--card { width: 50%; }
.unit__ui .ui--icons { width: 34%; }
.unit__card:hover .unit__ui { transform: translateY(-8px); }
.unit__card:hover .ins__sheet { transform: translateY(-12px) skewY(14deg); }
.unit__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.unit__tag { margin: 0; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--acc); font-weight: 500; }
.unit__title { margin: 0; font: 400 var(--fs-h3)/var(--lh-h3) var(--sans); letter-spacing: var(--ls-h3); }
.unit__lead { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: rgba(11, 11, 11, .75); max-width: 52ch; }
.unit__caps { list-style: none; margin: 6px 0 10px; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(11, 11, 11, .12); }
.unit__caps li { padding: 12px 0; border-bottom: 1px solid rgba(11, 11, 11, .12); font-size: var(--fs-sm); }
.unit__caps li::before { content: "→ "; color: var(--acc); }

/* client proof band: light, sits after the belief statement; logo rows run the full page width */
.cl { color: var(--ink); padding: clamp(120px, 16vw, 200px) 0 0; overflow: hidden; }
.cl__head { text-align: center; }
.cl__num { margin: 0; font: 400 clamp(80px, 9vw, 128px)/1 var(--sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.cl__txt { margin: 20px auto 0; max-width: 38ch; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--ink-2); }
.cl__rows { margin-top: clamp(56px, 6vw, 88px); width: 100%; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); }
.cl__row { position: relative; overflow: hidden; }
.cl__row::before, .cl__row::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
.cl__row::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.cl__row::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.cl__rows:hover .cl__track { animation-play-state: paused; }
.cl__logo { flex: none; height: clamp(72px, 7vw, 112px); display: inline-flex; align-items: center; gap: clamp(14px, 1.4vw, 20px); color: var(--graphite); opacity: .4; filter: grayscale(1); transition: opacity .35s var(--ease), filter .35s var(--ease); }
.cl__logo svg { width: clamp(40px, 4vw, 60px); height: auto; aspect-ratio: 1; fill: currentColor; flex: none; }
.cl__logo b { font: 400 var(--fs-h3)/var(--lh-h3) var(--sans); letter-spacing: var(--ls-h3); white-space: nowrap; }
.cl__logo:hover { opacity: 1; }

/* belief statement */
.belief { padding-top: clamp(120px, 18vw, 220px); }
.belief__label { margin-bottom: 28px; }
.belief__text { margin: 0; max-width: 1100px; font: 400 var(--fs-h2)/var(--lh-quote) var(--sans); letter-spacing: var(--ls-h2); color: rgba(11, 11, 11, .16); }
.belief__text .w { transition: color .5s var(--ease); }
.belief__text .w.on { color: var(--ink); }

/* trust grid */
.trust { padding-top: clamp(64px, 10vh, 120px); padding-bottom: clamp(80px, 14vh, 160px); }
.trust__cap { margin: 0; text-align: center; font: 400 var(--fs-sm)/var(--lh-sm) var(--sans); color: var(--ink-2); letter-spacing: -.005em; }
.trust__grid { list-style: none; margin: 28px auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(5, 1fr); }
.trust__grid li { height: 76px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: rgba(11, 11, 11, .72); transition: color .3s var(--ease); }
.trust__grid li:nth-child(5n) { border-right: 0; }
.trust__grid li:nth-child(n+6) { border-bottom: 0; }
.trust__grid li:hover { color: var(--ink); }
.trust__grid li { gap: 10px; color: rgba(11, 11, 11, .58); }
.trust__grid li:hover { color: var(--graphite); }
.trust__grid .logo { height: 24px; width: auto; max-width: 64px; }
.trust__grid li.wm .logo { height: 22px; max-width: 128px; }
.trust__grid li[title="AWS"] .logo { height: 30px; }
.trust__grid li[title="Oracle"] .logo { height: 15px; }
.trust__grid li span { font: 500 var(--fs-base)/var(--lh-base) var(--sans); letter-spacing: -.02em; }

/* statement */
.statement { padding-bottom: clamp(120px, 22vh, 240px); }
.statement__text { max-width: 980px; margin: 0 auto; font: 400 var(--fs-h3)/var(--lh-quote) var(--sans); letter-spacing: var(--ls-h3); color: rgba(11, 11, 11, .2); }
.statement__text .w { transition: color .5s var(--ease); }
.statement__text .w.on { color: var(--ink); }
.statement__text .hl .w.on { color: var(--hl); }
.statement__text em { font-style: normal; }
.statement .arr { color: var(--ink); }
.chip { display: inline-flex; align-items: center; justify-content: center; width: .62em; height: .62em; margin: 0 .08em 0 .1em; vertical-align: .05em; border-radius: 3px; background: var(--c); opacity: .35; transition: opacity .5s var(--ease); }
.chip svg { width: 72%; height: 72%; }
.hl.on .chip { opacity: 1; }

/* ================================================================== section scaffolding */
.sec { padding-top: clamp(72px, 10vw, 140px); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-head--cta { align-items: flex-end; }
.sec-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; text-align: right; }

/* accordion */
.what { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 6vw, 80px); }
.acc { display: flex; flex-direction: column; gap: 6px; }
.acc__item { background: var(--bg); color: var(--ink); border-radius: 2px; overflow: hidden; }
.acc__item[style*="--bg:#1E"], .acc__item[style*="--bg:#1B"] { color: var(--paper); }
.acc__head { width: 100%; display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 22px; text-align: left; font: 500 var(--fs-meta)/var(--lh-meta) var(--mono); letter-spacing: var(--ls-caps); text-transform: uppercase; transition: height .6s var(--ease); }
.acc__num, .acc__arrow-s { display: none; }
.acc__item.is-open .acc__head { height: 76px; font: 400 var(--fs-h6)/var(--lh-h6) var(--sans); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.acc__item.is-open .acc__num, .acc__item.is-open .acc__arrow-s { display: inline; font-family: var(--mono); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.acc__item.is-open .acc__body { grid-template-rows: 1fr; }
.acc__inner { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr minmax(160px, 22%); }
.acc__inner p { margin: 0; padding: 70px 22px 26px; max-width: 460px; font-size: var(--fs-sm); line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.acc__item.is-open .acc__inner p { opacity: .85; transform: none; transition-delay: .18s; }
.acc__go { display: flex; align-items: center; justify-content: center; font-size: 30px; margin-top: -76px; transition: background .3s var(--ease); }
.acc__go:hover { background: rgba(255, 255, 255, .3); }

/* ================================================================== the sail shape (reference case-card pattern) */
.panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 10px; background: var(--tint); }
.panel > .ui, .panel > span:not(.ins__col):not(.ins__sheet) { position: relative; z-index: 1; }
.panel .ins__sheet { transition: transform 1s var(--ease); }
a:hover .panel .ins__sheet { transform: translateY(-10px) skewY(14deg); }

/* cases */
.work { padding-top: clamp(72px, 10vw, 140px); }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.cases--even .case--big .case__media { aspect-ratio: 1.25; }
.cases__col { display: flex; flex-direction: column; gap: clamp(64px, 10vw, 140px); }
.case { display: block; color: var(--ink); }
.case--row { display: grid; grid-template-columns: minmax(0, 40%) 1fr; gap: 22px; align-items: start; }
.case--row .case__media { aspect-ratio: 4 / 4.4; }
.case--big .case__media { aspect-ratio: 1 / .9; }
.case__media { position: relative; display: flex; align-items: center; justify-content: center; }
.case__cap { margin: 0; font: 400 var(--fs-h6)/var(--lh-lead) var(--sans); letter-spacing: var(--ls-h6); color: var(--ink-3); max-width: 30ch; }
.case--big .case__cap { margin-top: 20px; }
.case__cap .ink { color: var(--ink); }
.case__tag { display: inline-block; margin-top: 14px; font: 500 var(--fs-meta)/var(--lh-meta) var(--mono); letter-spacing: var(--ls-caps); text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; color: var(--ink-2); }
.case .ui { transition: transform .8s var(--ease); }
.case:hover .ui { transform: translateY(-6px); }

/* mock UI */
.ui--card { width: 76%; background: #fff; border-radius: 8px; box-shadow: 0 1px 0 var(--line), 0 18px 30px -24px rgba(11, 11, 11, .35); padding: 10px; }
.ui__bar { display: flex; gap: 4px; margin-bottom: 10px; }
.ui__bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--mist); }
.ui__chat { display: flex; flex-direction: column; gap: 6px; font-size: 10px; line-height: 1.35; }
.ui__chat span { padding: 6px 8px; border-radius: 6px; max-width: 86%; }
.ui__chat .me { align-self: flex-end; background: var(--graphite); color: var(--paper); }
.ui__chat .bot { background: #EEF2FA; color: var(--graphite); }
.ui--desk { width: 70%; aspect-ratio: 1.45; display: grid; grid-template-columns: 34px 1fr; background: #fff; border-radius: 10px; box-shadow: 0 1px 0 var(--line), 0 30px 50px -36px rgba(11, 11, 11, .4); overflow: hidden; }
.ui__side { background: var(--graphite); display: flex; flex-direction: column; gap: 10px; padding: 12px 9px; }
.ui__side i { height: 16px; border-radius: 4px; background: rgba(246, 247, 237, .14); }
.ui__side i.on { background: var(--signal); }
.ui__main { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ui__row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 8px; }
.ui__row b { font-weight: 500; }
.pill { font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--signal); padding: 3px 7px; border-radius: 10px; }
.ui__chart { flex: 1; display: flex; align-items: flex-end; gap: 6%; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ui__chart i { flex: 1; height: var(--h); background: #C9D3E6; border-radius: 2px 2px 0 0; transform-origin: bottom; transform: scaleY(.2); transition: transform 1.2s var(--ease); }
.ui__chart i.hi { background: var(--intel); }
.in .ui__chart i, .mm .ui__chart i, .cohero .ui__chart i, .case-hero .ui__chart i { transform: none; }
.ui__rows { display: grid; gap: 6px; }
.ui__rows span { height: 7px; border-radius: 4px; background: #EEF0EE; }
.ui__rows span:nth-child(2) { width: 80%; } .ui__rows span:nth-child(3) { width: 60%; }
.ui--phones { position: relative; width: 70%; height: 86%; }
.phone { position: absolute; width: 48%; aspect-ratio: 9 / 19; background: #0B0B0B; border-radius: 22px; padding: 6px; box-shadow: 0 30px 50px -30px rgba(11, 11, 11, .5); }
.phone.p1 { left: 4%; top: 12%; transform: rotate(-12deg); }
.phone.p2 { right: 4%; top: 2%; transform: rotate(9deg); }
.phone__scr { height: 100%; border-radius: 17px; background: #fff; padding: 22px 10px 10px; display: flex; flex-direction: column; gap: 8px; font-size: 10px; }
.phone__scr b { font-weight: 500; font-size: 11px; }
.ph-card { height: 30%; border-radius: 8px; background: linear-gradient(135deg, var(--graphite), var(--intel)); }
.ph-row { height: 8px; border-radius: 4px; background: #EEF0EE; }
.ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1; }
.ph-grid i { border-radius: 6px; background: #EEF7C2; }
.ph-grid i:nth-child(2) { background: #DCE5F6; } .ph-grid i:nth-child(3) { background: #D4ECEF; }
.ph-chat { height: 26px; width: 80%; border-radius: 8px; background: #EEF2FA; }
.ph-chat.r { align-self: flex-end; background: var(--graphite); width: 60%; }
.ph-input { margin-top: auto; height: 22px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line); }
.ui--icons { width: 62%; aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 8%; align-items: center; justify-items: center; position: relative; }
.ui--icons i { width: 70%; aspect-ratio: 1; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 var(--line); }
.ui--icons i:nth-of-type(1) { grid-area: 1 / 1; } .ui--icons i:nth-of-type(2) { grid-area: 2 / 1; } .ui--icons i:nth-of-type(3) { grid-area: 1 / 3; } .ui--icons i:nth-of-type(4) { grid-area: 2 / 3; }
.ui--icons b { grid-area: 1 / 2 / 3 / 3; width: 100%; height: 72%; display: flex; align-items: center; justify-content: center; color: var(--graphite); background: rgba(255, 255, 255, .45); border-radius: 6px; }
.ui--icons b .mark { width: 42%; height: auto; }
.ui--icons .dots { position: absolute; inset: -14%; background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 1.5px, transparent 1.6px); background-size: 33.3% 50%; background-position: 16.6% 0; }
.ui--infra { width: 72%; background: #fff; border-radius: 10px; padding: 14px; display: grid; gap: 8px; box-shadow: 0 1px 0 var(--line), 0 30px 50px -36px rgba(11, 11, 11, .4); }
.ui__srv { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; font-size: 11px; padding: 8px 10px; border-radius: 6px; background: #F4F6F5; }
.ui__srv i { width: 8px; height: 8px; border-radius: 50%; background: var(--labs); }
.ui__srv i.run { background: var(--signal); box-shadow: 0 0 0 3px rgba(221, 255, 85, .35); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(221, 255, 85, 0); } }
.ui__srv b { font: 500 11px var(--mono); }
.ui__srv span { color: var(--ink-2); font-size: 10px; }

/* companies (home) */
.companies { padding-top: clamp(96px, 14vw, 180px); }
.cos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.co { display: flex; flex-direction: column; gap: 10px; }
.co__media { aspect-ratio: 1.05; margin-bottom: 16px; }
.co__eyebrow { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--acc); }
.co__title { margin: 0; font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); }
.co__lead { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); max-width: 40ch; }
.co__go { margin-top: 6px; font-size: var(--fs-sm); font-weight: 500; display: inline-flex; gap: 8px; }

/* deliver steps */
.deliver { padding-top: clamp(96px, 14vw, 180px); }
.deliver__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.deliver__sticky { position: sticky; top: calc(var(--hdr) + 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.deliver__sticky .sec-head { margin-bottom: 0; flex-direction: column; }
.deliver__note { max-width: 36ch; font-size: var(--fs-base); }
.steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step { position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 30px 0 34px; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { grid-row: 1 / 3; font-size: var(--fs-meta); color: var(--ink-2); padding-top: 8px; }
.step h3 { margin: 0 0 8px; font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); }
.step p { margin: 0; color: var(--ink-2); max-width: 46ch; font-size: var(--fs-base); }
.step__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--w); background: var(--signal); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
.step.in .step__bar { transform: scaleX(1); }

/* promise band */

/* insights: glass cards with a related-service cross-sell */
.insights { padding-top: clamp(96px, 14vw, 180px); }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.wgrid--3 .posts { grid-template-columns: 1fr; }
.ins { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; transition: border-color .35s var(--ease); }
.ins:hover { border-color: var(--acc); }
.ins__art { position: relative; aspect-ratio: 1.6; overflow: hidden; isolation: isolate; background: #F1F3F2; }
.ins__col { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(var(--c), 1) 0%, rgba(var(--c), .8) 55%, rgba(var(--c), .35) 100%); }
.ins__sheet { position: absolute; background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .42) 45%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95); transform: skewY(14deg); transform-origin: left top; transition: transform .9s var(--ease); }
.ins:hover .ins__sheet { transform: translateY(-8px) skewY(14deg); }
.ins:hover .ins__sheet:nth-of-type(odd) { transform: translateY(-14px) skewY(14deg); }
.ins__chip { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 4px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase;
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.ins__go { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translate(4px, -4px); opacity: 0; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.ins:hover .ins__go { opacity: 1; transform: none; }
.ins__body { flex: 1; padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.ins__co { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.ins__co i { width: 7px; height: 7px; background: var(--acc); }
.ins__title { margin: 0; font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); }
.ins__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ins__x { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: #FAFBF7; transition: background .3s var(--ease); }
.ins__x .mono { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.ins__x b { font-weight: 500; font-size: var(--fs-sm); }
.ins__x i { font-style: normal; color: var(--acc); transition: transform .35s var(--ease); }
.ins__x:hover { background: var(--signal); }
.ins__x:hover i { transform: translateX(4px); color: var(--ink); }

/* cta band */
.cta-band { margin-top: clamp(96px, 14vw, 180px); background: var(--signal); }
.cta-band__in { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }
.cta-band__side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 360px; }
.cta-band__side p { margin: 0; font-size: var(--fs-base); }

/* ================================================================== internal page blocks */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 12px 18px; border-radius: 40px; box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-base); }
.mini-cos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini-co__sub { grid-column: 1; font-size: var(--fs-sm); color: var(--ink-2); }
.mini-co { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 26px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease); }
.mini-co:hover { box-shadow: inset 0 0 0 1px var(--acc); }
.mini-co .mono { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); grid-column: 1; }
.mini-co b { font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); grid-column: 1; }
.mini-co i { grid-column: 2; grid-row: 2 / 4; align-self: center; font-style: normal; font-size: 22px; transition: transform .35s var(--ease); }
.mini-co:hover i { transform: translateX(4px); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.chip-btn { height: 36px; padding: 0 16px; border-radius: 40px; box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); transition: background .25s var(--ease), color .25s var(--ease); }
.chip-btn.is-on { background: var(--graphite); color: var(--paper); box-shadow: none; }
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 96px) clamp(20px, 3vw, 40px); }
.wgrid--3 { grid-template-columns: repeat(3, 1fr); }
.wcard { transition: opacity .35s var(--ease); }
.wcard.is-hidden { display: none; }

/* case study page */
.case-hero { padding-bottom: clamp(48px, 7vw, 96px); }
.case-hero__media { aspect-ratio: 2.2; }
.case-hero__media .ui--desk, .case-hero__media .ui--infra { width: 44%; }
.case-hero__media .ui--card { width: 40%; }
.case-hero__media .ui--phones { width: 40%; }
.case-hero__media .ui--icons { width: 30%; }
.case-body { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.facts { position: sticky; top: calc(var(--hdr) + 32px); display: grid; gap: 0; }
.fact { padding: 16px 0; border-top: 1px solid var(--line); }
.fact p:last-child { margin: 6px 0 0; font-size: var(--fs-base); }
.case-main { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }
.block > .label { margin-bottom: 20px; }
.blk-h { margin: 0 0 20px; font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); }
.steps-list--case .step h3 { font-size: var(--fs-h5); }
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.result { padding: 28px 22px; background: #F3F5F1; border-radius: 4px; }
.result__v { margin: 0; font: 400 var(--fs-h3)/var(--lh-h3) var(--sans); letter-spacing: var(--ls-h3); }
.result__l { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.quote { margin: 0; padding: 0; }
.quote p::before { content: "\201C"; display: block; height: .55em; font-size: 2.2em; line-height: 1; color: var(--intel); }
.quote p { margin: 0 0 18px; font: 400 var(--fs-h4)/var(--lh-quote) var(--sans); letter-spacing: var(--ls-h4); }
.quote footer { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.next-case .label { margin-bottom: 28px; }
.next-case .case--row { grid-template-columns: minmax(0, 28%) 1fr; }

/* about */
.story__grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 6vw, 96px); }
.story__grid--single { grid-template-columns: 1fr; }
.story__grid--single .story__txt { max-width: 860px; }
.story__txt { display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
.story__txt p:not(.lede) { margin: 0; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--ink-2); }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.value { padding: 26px 24px 30px 0; border-top: 1px solid var(--line); }
.value h3 { margin: 0 0 10px; font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); }
.value p { margin: 0; color: var(--ink-2); font-size: var(--fs-base); max-width: 30ch; }
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.person { display: flex; flex-direction: column; gap: 4px; }
.person__ph { aspect-ratio: .86; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.person__ph > span:last-child { position: absolute; left: 16px; bottom: 14px; z-index: 1; font: 500 var(--fs-meta)/var(--lh-meta) var(--mono); letter-spacing: var(--ls-caps); color: var(--ink-2); }
.person__ph span { font: 500 var(--fs-sm)/var(--lh-sm) var(--mono); letter-spacing: var(--ls-caps); color: var(--ink-2); }
.person b { font-weight: 500; font-size: var(--fs-md); }
.person .mono { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.where { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center; }
.where .small { margin-top: 18px; }
.where__map { aspect-ratio: 2.2; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; }
.where__pin { width: 14px; height: 14px; background: var(--graphite); border-radius: 50%; box-shadow: 0 0 0 8px rgba(221, 255, 85, .8); }
.where__map .mono { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); color: var(--ink-2); }

/* ================================================================== story band: full-bleed, deep glass behind, statement on top */
.sband { position: relative; overflow: hidden; isolation: isolate; background: var(--graphite); color: var(--paper); min-height: min(92vh, 860px); display: flex; align-items: center; }
.sband__bg { position: absolute; inset: 0; z-index: -1; background: var(--img, none) center / cover no-repeat; }
.prism--dark { height: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%); }
.prism--dark .prism__col { background: linear-gradient(180deg, rgba(var(--c), .0) 0%, rgba(var(--c), .34) 40%, rgba(var(--c), .12) 80%, rgba(var(--c), 0) 100%); animation: none; transform: none; }
.prism--dark .prism__sheet { background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32); animation: none; opacity: 1; transform: skewY(14deg); }
.sband__mark { position: absolute; right: -4%; bottom: -14%; width: min(46vw, 640px); color: rgba(246, 247, 237, .045); }
.sband__mark .mark { width: 100%; height: auto; }
.sband__in { position: relative; padding-top: clamp(96px, 14vh, 160px); padding-bottom: clamp(96px, 14vh, 160px); }
.sband__in .label { margin-bottom: 28px; }
.sband__txt { margin: 0; max-width: 1080px; font: 400 var(--fs-h2)/var(--lh-quote) var(--sans); letter-spacing: var(--ls-h2); color: rgba(246, 247, 237, .22); }
.sband__txt .w { transition: color .5s var(--ease); }
.sband__txt .w.on { color: var(--paper); }
.sband__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(40px, 6vh, 72px); padding-top: 24px; border-top: 1px solid rgba(246, 247, 237, .16); }
.sband__row .mono { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(246, 247, 237, .6); }

/* ================================================================== selected work: stacked rows */
.crows { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); }
.crow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; color: var(--ink); }
.crow__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.crow__n { font-size: var(--fs-meta); color: var(--ink-3); }
.crow__co { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.crow__co i { width: 7px; height: 7px; background: var(--acc); }
.crow__title { margin: 0; font: 400 var(--fs-h3)/var(--lh-h3) var(--sans); letter-spacing: var(--ls-h3); max-width: 18ch; }
.crow__sum { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.crow__meta { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crow__meta { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crow__meta li { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 30px; font: 500 var(--fs-meta)/1 var(--sans); letter-spacing: -.005em; background: rgba(11, 11, 11, .05); color: rgba(11, 11, 11, .78); }
.crow__meta .crow__area { background: var(--tint, #EEF1F3); color: var(--graphite); }
.crow__area i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.crow__meta .crow__sample { background: transparent; box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .14); color: var(--ink-2); }
.crow__go { margin-top: 8px; display: inline-flex; gap: 8px; font-size: var(--fs-sm); font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.crow__go i { font-style: normal; transition: transform .35s var(--ease); }
.crow:hover .crow__go i { transform: translateX(4px); }
.crow__media { aspect-ratio: 1.6; display: flex; align-items: center; justify-content: center; }
.crow__media .ui--desk, .crow__media .ui--infra { width: 58%; }
.crow__media .ui--card { width: 52%; }
.crow__media .ui--icons { width: 32%; }
.crow__media .ui--phones { width: 40%; }
.crow .ui { transition: transform .8s var(--ease); }
.crow:hover .ui { transform: translateY(-6px); }

/* ================================================================== process: four steps on one track */
.process { padding-top: clamp(96px, 14vw, 180px); }
.proc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.proc__s { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 0 28px 0 0; }
.proc__track { position: relative; height: 22px; margin-bottom: 18px; }
.proc__track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--line); }
.proc__track::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; margin-top: -.5px; background: var(--graphite); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * .25s); }
.proc__s.in .proc__track::after { transform: scaleX(1); }
.proc__dot { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--graphite); z-index: 1; transition: background .4s var(--ease); transition-delay: calc(var(--i) * .25s); }
.proc__s.in .proc__dot { background: var(--signal); }
.proc__n { font-size: var(--fs-meta); color: var(--ink-3); }
.proc__s h3 { margin: 0; font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); }
.proc__s > p:not(.proc__out) { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--ink-2); max-width: 32ch; }
.proc__out { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.45; display: flex; flex-direction: column; gap: 6px; max-width: 30ch; }
.proc__out .mono { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
.proc__s > p:not(.proc__out) { margin-bottom: 10px; }

/* about: expertise list inside the story */
.xps { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; border-top: 1px solid var(--line); }
.xp { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); }
.xp b { font: 400 var(--fs-h6)/var(--lh-h6) var(--sans); letter-spacing: var(--ls-h6); }
.xp span:not(.ico) { grid-column: 2; font-size: var(--fs-sm); color: var(--ink-2); }
.xp i { grid-row: 1 / 3; grid-column: 3; font-style: normal; transition: transform .35s var(--ease); }
.xp:hover i { transform: translateX(4px); }

/* studio mock */
.ui--design { width: 62%; background: #fff; border-radius: 10px; padding: 14px; display: grid; gap: 12px; box-shadow: 0 1px 0 var(--line), 0 30px 50px -36px rgba(11, 11, 11, .4); }
.dz__sw { display: flex; gap: 6px; }
.dz__sw i { flex: 1; height: 26px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); }
.dz__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dz__btn { font: 500 10px var(--sans); text-align: center; padding: 7px 0; border-radius: 4px; background: var(--graphite); color: var(--paper); }
.dz__btn--ghost { background: transparent; color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
.dz__card { height: 42px; border-radius: 6px; background: #F3F2FB; padding: 8px; display: grid; gap: 5px; align-content: start; }
.dz__card i { height: 5px; border-radius: 3px; background: #CFCBF3; } .dz__card i + i { width: 60%; }

/* ================================================================== cookie consent */
.btn--line { background: transparent; color: var(--graphite); box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .3); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--graphite); }
.cc { position: fixed; left: 24px; bottom: 24px; z-index: 60; width: min(420px, calc(100vw - 32px)); padding: 22px 22px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 48px -30px rgba(11, 11, 11, .35); transform: translateY(16px); opacity: 0; transition: transform .5s var(--ease), opacity .4s var(--ease); }
.cc[hidden] { display: block; visibility: hidden; pointer-events: none; }
.cc.is-in { transform: none; opacity: 1; visibility: visible; }
.cc__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cc__mark { width: 20px; height: auto; color: var(--graphite); flex: none; }
.cc__h { margin: 0; font: 500 var(--fs-h6)/var(--lh-h6) var(--sans); letter-spacing: var(--ls-h6); }
.cc__d { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.cc__d a { color: var(--ink); border-bottom: 1px solid currentColor; }
.cc__prefs { margin-top: 14px; border-top: 1px solid var(--line); }
.cc__prefs[hidden] { display: none; }
.cc__opt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.cc__opt span { display: flex; flex-direction: column; gap: 2px; }
.cc__opt b { font-weight: 500; font-size: var(--fs-sm); }
.cc__opt small { font-size: var(--fs-meta); color: var(--ink-2); }
.cc__opt input { position: absolute; opacity: 0; pointer-events: none; }
.cc__sw { position: relative; width: 36px; height: 20px; border-radius: 20px; background: rgba(11, 11, 11, .16); transition: background .25s var(--ease); }
.cc__sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.cc__opt input:checked + .cc__sw { background: var(--graphite); }
.cc__opt input:checked + .cc__sw::after { transform: translateX(16px); background: var(--signal); }
.cc__opt input:disabled + .cc__sw { opacity: .45; }
.cc__opt input:focus-visible + .cc__sw { outline: 2px solid var(--intel); outline-offset: 2px; }
.cc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.cc__actions .btn { flex: 1; }
.cc__more { flex-basis: 100%; margin-top: 4px; font-size: var(--fs-sm); text-align: center; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.cc__more:hover { color: var(--ink); }
.cc.is-prefs [data-cc="all"], .cc.is-prefs [data-cc="none"], .cc.is-prefs .cc__more { display: none; }
.cc__save[hidden] { display: none; }
.ftr__cookie { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.ftr__cookie:hover { color: var(--signal); }
@media (max-width: 560px) { .cc { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 12px 12px 0 0; border-width: 1px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); } }

/* bento: who it's for */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(220px, auto)); gap: 14px; }
.bento__t { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; transition: border-color .35s var(--ease); }
.bento__t:hover { border-color: var(--acc); }
.bento__t .mono { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.bento__t h3 { margin: 0; font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); }
.bento__t p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); max-width: 36ch; }
.bento__typ { margin: auto 0 0 !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-meta) !important; color: var(--ink-2); }
.bento__t--big { grid-row: 1 / 3; grid-column: 1 / 3; padding: 0; }
.bento__art { position: relative; flex: 1; min-height: 260px; isolation: isolate; overflow: hidden; background: #F1F3F2; }
.bento__art .ins__sheet { transition: transform 1s var(--ease); }
.bento__t--big:hover .ins__sheet { transform: translateY(-12px) skewY(14deg); }
.bento__txt { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.bento__txt h3 { font-size: var(--fs-h4); }
.bento__t--cta { background: var(--graphite); color: var(--paper); border-color: var(--graphite); }
.bento__t--cta .mono { color: rgba(246, 247, 237, .6); }
.bento__t--cta h3 { margin-bottom: auto; padding-top: 6px; }
.bento__go { font-size: var(--fs-sm); font-weight: 500; color: var(--signal); display: inline-flex; gap: 8px; }
.bento__go i { font-style: normal; transition: transform .35s var(--ease); }
.bento__t--cta:hover { border-color: var(--graphite); }
.bento__t--cta:hover .bento__go i { transform: translateX(4px); }

/* careers */
.roles { display: flex; flex-direction: column; }
.role { display: grid; grid-template-columns: 140px 1fr auto 40px; gap: 24px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); transition: padding .35s var(--ease), background .35s var(--ease); }
.role:last-child { border-bottom: 1px solid var(--line); }
.role:hover { padding-left: 16px; padding-right: 16px; background: #F5F7F2; }
.role__co { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.role b { font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); }
.role__loc { font-size: var(--fs-sm); color: var(--ink-2); }
.role i { font-style: normal; font-size: 22px; text-align: right; }

/* contact */
.contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 var(--fs-meta)/var(--lh-meta) var(--mono); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.field input, .field select, .field textarea { font: 400 var(--fs-md)/var(--lh-md) var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(11, 11, 11, .25); padding: 10px 0; border-radius: 0; transition: border-color .3s var(--ease); -webkit-appearance: none; appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--intel); }
.form__foot { display: flex; align-items: center; gap: 22px; }
.contact__side { display: flex; flex-direction: column; gap: 28px; }
.contact__side .label { margin-bottom: 8px; }
.contact__sail { aspect-ratio: 1.6; margin-top: 12px; }

/* prose (articles, legal) */
.prose { max-width: 760px; padding-top: 56px; font-size: var(--fs-md); line-height: 1.7; }
.prose h2 { font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); margin: 56px 0 16px; }
.prose p, .prose ul { color: rgba(11, 11, 11, .82); }
.prose blockquote { margin: 48px 0; padding: 0; }
.prose blockquote p::before { content: "\201C"; display: block; height: .55em; font-size: 2.2em; line-height: 1; color: var(--intel); }
.prose blockquote p { font: 400 var(--fs-h4)/var(--lh-quote) var(--sans); letter-spacing: var(--ls-h4); color: var(--ink); }
.prose .lede { color: var(--ink); }

/* ================================================================== footer */
.ftr { position: relative; overflow: hidden; background: var(--graphite); color: var(--paper); padding-top: 96px; }
.ftr__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }
.ftr__big { display: inline-block; font: 400 var(--fs-h3)/var(--lh-h3) var(--sans); letter-spacing: var(--ls-h3); margin: 14px 0 0; border-bottom: 1px solid rgba(246, 247, 237, .3); padding-bottom: 4px; transition: border-color .3s var(--ease); }
.ftr__big:hover { border-color: var(--signal); }
.ftr__addr { margin: 22px 0 0; font-size: var(--fs-sm); color: rgba(246, 247, 237, .65); }
.ftr__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ftr__cols > div { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); color: rgba(246, 247, 237, .85); }
.ftr__cols .label { margin-bottom: 6px; }
.ftr__cols a { transition: color .2s var(--ease); align-self: flex-start; }
.ftr__cols a:hover { color: var(--signal); }
.ftr__crop { margin-top: 96px; color: #181818; line-height: 0; }
.ftr__crop .mark { width: 100%; height: auto; margin-bottom: -2.2%; }
.ftr__legal { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 22px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(246, 247, 237, .55); position: relative; }
.ftr__legal a:hover { color: var(--signal); }

/* ================================================================== reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.trust.reveal li { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--k, 0) * 45ms); }
.trust.in li { opacity: 1; transform: none; }

/* ================================================================== responsive */
@media (max-width: 1180px) {
  .mm__grid { grid-template-columns: repeat(4, 1fr); row-gap: 24px; }
  .mm__grid--about { grid-template-columns: repeat(3, 1fr); }
  .mm__card:nth-child(3) { border-right: 1px solid var(--line); }
  .mm__intro { grid-column: 1 / -1; border-right: 0; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
  .mm__intro .mm__parent { margin-top: 0; }
    .mm__co:last-child { border-right: 0; }
}
@media (max-width: 1080px) {
  .nav, .hdr__cta { display: none; }
  .menu-btn { display: inline-flex; }
  .mm, .scrim { display: none !important; }
  .cos, .posts, .wgrid--3 { grid-template-columns: 1fr 1fr; }
  .values, .people { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento__t--big { grid-row: auto; grid-column: 1 / -1; }
  .value { padding-right: 20px; }
}
@media (max-width: 900px) {
  .hero__row { grid-template-columns: 1fr; gap: 10px; }
  .hero__arrow { display: none; }
  .hero__meta { text-align: left; margin-top: 8px; }
  .hero__social { justify-content: flex-start; margin-top: 8px; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__grid li, .trust__grid li:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .trust__grid li:nth-child(2n) { border-right: 0; }
  .trust__grid li:nth-last-child(-n+2) { border-bottom: 0; }
  .prism__col:nth-child(4), .prism__col:nth-child(7) { display: none; }
  .cases, .wgrid, .cos, .posts, .wgrid--3 { grid-template-columns: 1fr; }
  .unit,   .unit__num { position: static; font-size: 88px; }
    .cases__col { gap: 64px; }
  .cases__col + .cases__col { padding-top: 64px; }
  .sec-head--cta, .phero__row, .cta-band__in { flex-direction: column; align-items: flex-start; }
  .sec-head__side { align-items: flex-start; text-align: left; }
  .deliver__grid, .cohero, .case-body, .story__grid, .contact, .where, .ftr__grid { grid-template-columns: 1fr; }
  .deliver__sticky, .facts { position: static; }
  .mini-cos,       .role { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .role__co { grid-column: 1 / -1; }
  .role i { grid-row: 2 / 4; grid-column: 2; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .acc__inner { grid-template-columns: 1fr 72px; }
  .acc__inner p { padding-top: 24px; }
  .acc__go { margin-top: -76px; font-size: 24px; }
  .case-hero__media { aspect-ratio: 1.3; }
  .case-hero__media .ui { width: 64% !important; }
}
@media (max-width: 560px) {
  :root { --hdr: 64px; }
  .case--row { grid-template-columns: 42% 1fr; gap: 14px; }
  .acc__item.is-open .acc__head { font-size: var(--fs-base); height: 64px; }
  .acc__go { margin-top: -64px; }
  .values, .people, .bento, .unit__caps, .proc { grid-template-columns: 1fr; }
  .ftr__legal { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .show__track, .cl__track { animation: none; }
  .reveal, .trust.reveal li, .rise, .prism__col, .prism__sheet, .hero__title .line > span, .phero__title .line > span { opacity: 1 !important; transform: none !important; }
  .prism__sheet { transform: skewY(14deg) !important; }
}

/* ==================================================================
   THEME "tone": tinted Paper sections, one Graphite contrast block, light footer.
   Header and mega menus are untouched. Revert with data-theme="classic" (THEME in gen.py).
   ================================================================== */
[data-theme="tone"] { --tone: #F3F4EC; --tone-line: rgba(11, 11, 11, .09); }
/* full-bleed tint on a .wrap section */
[data-theme="tone"] .what, [data-theme="tone"] .units, [data-theme="tone"] main > section.sec:nth-of-type(even) {
  background: var(--tone); box-shadow: 0 0 0 100vmax var(--tone); clip-path: inset(0 -100vmax); }
[data-theme="tone"] .what { padding-top: clamp(96px, 12vw, 150px); padding-bottom: clamp(96px, 12vw, 150px); }
[data-theme="tone"] .units { padding-bottom: clamp(96px, 12vw, 150px); }
[data-theme="tone"] main > section.sec:nth-of-type(even) { padding-bottom: clamp(72px, 10vw, 140px); }
[data-theme="tone"] main > section.sec:nth-of-type(even) + .cta-band { margin-top: 0; }
[data-theme="tone"] .units + .insights { padding-top: clamp(96px, 12vw, 150px); }
[data-theme="tone"] .what + .work { padding-top: clamp(96px, 12vw, 150px); }
/* cards sit on white inside tinted sections */
[data-theme="tone"] .bento__t { background: #fff; }
[data-theme="tone"] .mini-co { background: #fff; }
/* the in-page dark block: client proof band */
[data-theme="tone"] .cl { background: var(--graphite); color: var(--paper); margin-top: clamp(96px, 12vw, 150px); padding-bottom: clamp(88px, 10vw, 128px); }
[data-theme="tone"] .cl__txt { color: rgba(246, 247, 237, .68); }
[data-theme="tone"] .cl__logo { color: var(--paper); }
[data-theme="tone"] .cl__logo:hover { color: var(--signal); }
[data-theme="tone"] .cl__row::before { background: linear-gradient(90deg, var(--graphite), rgba(11, 11, 11, 0)); }
[data-theme="tone"] .cl__row::after { background: linear-gradient(270deg, var(--graphite), rgba(11, 11, 11, 0)); }
[data-theme="tone"] .cl + .cta-band { margin-top: 0; }
/* light footer */
[data-theme="tone"] .ftr { background: var(--tone); color: var(--graphite); border-top: 1px solid var(--tone-line); }
[data-theme="tone"] .cta-band + .ftr, [data-theme="tone"] main:has(> .cta-band:last-child) + .ftr { border-top: 0; }
[data-theme="tone"] .ftr .label--light { color: var(--ink-3); }
[data-theme="tone"] .ftr__big { border-color: rgba(11, 11, 11, .25); }
[data-theme="tone"] .ftr__big:hover { border-color: var(--graphite); }
[data-theme="tone"] .ftr__addr { color: var(--ink-2); }
[data-theme="tone"] .ftr__cols > div { color: rgba(11, 11, 11, .82); }
[data-theme="tone"] .ftr__cols a:hover, [data-theme="tone"] .ftr__legal a:hover, [data-theme="tone"] .ftr__cookie:hover { color: var(--intel); }
[data-theme="tone"] .ftr__crop { color: #E6E8DC; }
[data-theme="tone"] .ftr__legal { color: var(--ink-2); }

/* ==================================================================
   MOBILE OVERRIDES (kept last so they win over section base rules)
   ================================================================== */
@media (max-width: 900px) {
  /* story band: no full-screen height, background sized to the text */
  .sband { min-height: 0; }
  .sband__in { padding-top: 88px; padding-bottom: 88px; }
  .sband__mark { width: 78vw; right: -18%; bottom: -10%; }
  .prism--dark .prism__sheet { height: 34% !important; }
  .prism--dark .prism__col:nth-child(n+6) { display: none; }

  /* selected work: one column, image first, text below */
  .crows { gap: 56px; }
  .crow { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .crow__media { order: -1; aspect-ratio: 1.35; }
  .crow__media .ui--desk, .crow__media .ui--infra { width: 80%; }
  .crow__media .ui--card { width: 78%; }
  .crow__media .ui--phones { width: 64%; }
  .crow__media .ui--icons { width: 46%; }
  .crow__title { max-width: none; }

  /* where we can help: number above its card, full width */
  .units__list { gap: 56px; }
  .unit { grid-template-columns: 1fr; gap: 16px; }
  .unit__num { position: static; display: flex; align-items: center; gap: 16px; font-size: 64px; }
  .unit__art { aspect-ratio: 1.45; }
  .unit__ui .ui--desk, .unit__ui .ui--infra, .unit__ui .ui--design { width: 76%; }
  .unit__ui .ui--card { width: 74%; }
  .unit__ui .ui--icons { width: 44%; }
  .unit__body { padding: 22px 20px 26px; }
}
@media (max-width: 900px) {
  .mini-cos { grid-template-columns: 1fr; }
  .contact, .form { grid-template-columns: minmax(0, 1fr); }
  .field, .field input, .field select, .field textarea { min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
  .unit__caps { grid-template-columns: 1fr; }
  .crow__meta li { height: 28px; padding: 0 11px; font-size: var(--fs-meta); }
}
/* insights carousel on mobile (home + "Keep reading"); the Insights index stays a list */
@media (max-width: 900px) {
  .insights .posts, .sec > .posts { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 6px; scroll-padding-inline: var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .insights .posts::-webkit-scrollbar, .sec > .posts::-webkit-scrollbar { display: none; }
  .insights .posts > .ins, .sec > .posts > .ins { flex: 0 0 84%; scroll-snap-align: start; }
  .car-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
  .car-dots i { width: 6px; height: 6px; border-radius: 6px; background: rgba(11, 11, 11, .2); transition: width .3s var(--ease), background .3s var(--ease); }
  .car-dots i.on { width: 20px; background: var(--graphite); }
}
@media (min-width: 901px) { .car-dots { display: none; } }

/* mobile menu, harmonised with the desktop mega menu */
.drawer { background: var(--paper); }
.drawer__inner { padding: 4px var(--gut) 40px; }
.drawer__group, .drawer__link { min-height: 64px; border-bottom: 1px solid var(--line); font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); }
.drawer__group[aria-expanded="true"] { border-bottom-color: transparent; }
.drawer__sub { display: flex; flex-direction: column; gap: 0; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.drawer__sub[hidden] { display: none; }
.drawer__sub a.dr__item { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); background: none; border-left: 0; border-radius: 0; }
.drawer__sub .dr__item:first-child { border-top: 0; }
.dr__item .dr__item b { grid-column: 1; font: 400 var(--fs-h6)/var(--lh-h6) var(--sans); letter-spacing: var(--ls-h6); }
.dr__item span:not(.ico) { grid-column: 1; margin-top: 3px; font-size: var(--fs-sm); color: var(--ink-2); }
.dr__item i { grid-column: 2; grid-row: 1 / 4; align-self: center; font-style: normal; color: var(--ink-2); transition: transform .3s var(--ease); }
.dr__item:active i { transform: translateX(4px); }
.dr__contact { margin-top: 32px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.dr__contact .mm__title { font: 400 var(--fs-h6)/var(--lh-h6) var(--sans); letter-spacing: var(--ls-h6); color: var(--ink); margin-bottom: 4px; }
.dr__contact > a:not(.dr__cta) { color: var(--ink); }
.dr__contact .hdr__cta.dr__cta { display: inline-flex; margin: 18px 0 0; align-self: flex-start; }
.dr__social { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 22px; font-size: var(--fs-sm); }
.dr__social a { color: var(--ink); }
.dr__social i { font-style: normal; font-size: 11px; color: var(--ink-2); }

/* icon tiles: area tint + glyph (replaces accent bars) */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--it); color: var(--ia); transition: transform .4s var(--ease), background .3s var(--ease); }
.ico svg { width: 20px; height: 20px; fill: currentColor; }
.ico .mark { width: 16px; height: auto; color: var(--ia); }
.mm__cohead .ico, .mm__card .ico { margin-bottom: 12px; }
.mm__cohead:hover .ico, .mm__card:hover .ico, .mini-co:hover .ico, .xp:hover .ico, .bento__t:hover .ico, .dr__item:active .ico { transform: translateY(-2px); }
/* mobile menu rows with tile */
.drawer__sub a.dr__item { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.dr__item .ico { grid-column: 1; grid-row: 1 / 3; }
.dr__item b { grid-column: 2 !important; }
.dr__item span:not(.ico) { grid-column: 2 !important; }
.dr__item i { grid-column: 3 !important; grid-row: 1 / 3 !important; }
/* explore tiles */
.mini-co { grid-template-columns: auto 1fr auto; column-gap: 16px; align-items: center; }
.mini-co .ico { grid-row: 1 / 3; }
.mini-co b { grid-column: 2; }
.mini-co .mini-co__sub { grid-column: 2; }
.mini-co i { grid-column: 3; grid-row: 1 / 3; }
/* about expertise list */
.xp { grid-template-columns: auto 1fr auto; column-gap: 14px; }
.xp .ico { grid-row: 1 / 3; }
/* bento small tiles */
.bento__t > .ico { margin-bottom: auto; }

.bento .bento__t--cta, [data-theme="tone"] .bento .bento__t--cta { background: var(--graphite); color: var(--paper); border-color: var(--graphite); }
.bento .bento__t--cta h3 { color: var(--paper); }
/* "Where we can help" numbers: accent bar under each number (restored) */
.unit__num::after { content: ""; display: block; width: 56px; height: 8px; margin-top: 22px; background: var(--acc); }
@media (max-width: 900px) { .unit__num::after { margin-top: 0; width: 40px; height: 6px; } }

/* ==================================================================
   "Where we can help": sticky stacking sequence (desktop + mobile)
   Each unit pins under the header; the next one glides over it while the
   one beneath eases back (scale + dim) driven by scroll progress (--p).
   ================================================================== */
.units { --stack-top: clamp(84px, 11vh, 112px); --unit-bg: #fff; }
[data-theme="tone"] .units { --unit-bg: var(--tone); }
.units__list { gap: clamp(28px, 4vw, 48px); padding-bottom: clamp(40px, 6vh, 80px); }
.units .unit { position: sticky; top: var(--stack-top); background: var(--unit-bg); padding-top: 8px; align-items: stretch;
  transform-origin: 50% 0; transform: scale(calc(1 - var(--p, 0) * .06)); will-change: transform; }
.units .unit__num { position: static; align-self: start; transition: opacity .3s linear; opacity: calc(1 - var(--p, 0) * .55); }
.units .unit__card { transition: filter .3s linear; filter: brightness(calc(1 - var(--p, 0) * .08)) saturate(calc(1 - var(--p, 0) * .25)); }
.units .unit__art { aspect-ratio: 2.25; }
.units .unit__body { gap: 12px; padding: clamp(22px, 2.4vw, 34px); }
.units .reveal { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .units { --stack-top: 76px; }
  .units__list { gap: 20px; }
  .units .unit { gap: 12px; padding-top: 6px; transform: scale(calc(1 - var(--p, 0) * .05)); }
  .units .unit__num { font-size: 46px; gap: 14px; }
  .units .unit__art { aspect-ratio: 2.1; }
  .units .unit__caps { display: none; }
  .units .unit__lead { font-size: var(--fs-sm); }
  .units .unit__title { font-size: var(--fs-h4); }
  .units .unit__body { padding: 18px 18px 20px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .units .unit { position: relative; top: auto; transform: none; } }

/* mobile menu motion: sections expand like the accordions; links stagger in when the menu opens */
.drawer .drawer__sub, .drawer .drawer__sub[hidden] { display: grid; grid-template-rows: 0fr; padding: 0; border-bottom: 1px solid transparent; transition: grid-template-rows .5s var(--ease), border-color .3s var(--ease); }
.drawer .drawer__sub.is-open { grid-template-rows: 1fr; border-bottom-color: var(--line); }
.drawer__subin { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.drawer__subin > .dr__item { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.drawer__sub.is-open .drawer__subin > .dr__item { opacity: 1; transform: none; }
.drawer__sub.is-open .dr__item:nth-child(1) { transition-delay: .08s; } .drawer__sub.is-open .dr__item:nth-child(2) { transition-delay: .13s; }
.drawer__sub.is-open .dr__item:nth-child(3) { transition-delay: .18s; } .drawer__sub.is-open .dr__item:nth-child(4) { transition-delay: .23s; }
.drawer__subin > .dr__item:last-child { margin-bottom: 8px; }
.drawer__group .chev { transition: transform .45s var(--ease); }
.drawer__inner > * { opacity: 0; transform: translateY(12px); transition: opacity .35s var(--ease), transform .5s var(--ease); }
.drawer.is-open .drawer__inner > * { opacity: 1; transform: none; }
.drawer.is-open .drawer__inner > *:nth-child(1) { transition-delay: .05s; } .drawer.is-open .drawer__inner > *:nth-child(2) { transition-delay: .05s; }
.drawer.is-open .drawer__inner > *:nth-child(3) { transition-delay: .09s; } .drawer.is-open .drawer__inner > *:nth-child(4) { transition-delay: .13s; }
.drawer.is-open .drawer__inner > *:nth-child(5) { transition-delay: .17s; } .drawer.is-open .drawer__inner > *:nth-child(6) { transition-delay: .17s; }
.drawer.is-open .drawer__inner > *:nth-child(7) { transition-delay: .22s; }
@media (prefers-reduced-motion: reduce) { .drawer__inner > *, .drawer__subin > .dr__item { opacity: 1; transform: none; } }
/* mega menu dividers: none after the last column; column lines run down to meet the bottom rule */
.mm__grid { padding-bottom: 0; align-items: stretch; }
.mm__grid > .mm__intro, .mm__grid > .mm__co, .mm__grid > .mm__card, .mm__grid > .mm__contact { padding-bottom: 26px; }
.mm__grid > .mm__co:last-child, .mm__grid > .mm__card:last-child { border-right: 0; }
.mm__grid--about { padding-bottom: 26px; }
.mm__co::before { bottom: 0 !important; }
/* seamless marquees: two identical halves (each carries its own trailing gap) -> -50% lands on the exact same pixel */
.cl__track, .show__track { display: flex; gap: 0; width: max-content; will-change: transform; backface-visibility: hidden; }
.cl__grp { display: flex; align-items: center; flex: none; gap: clamp(48px, 5vw, 88px); padding-right: clamp(48px, 5vw, 88px); }
.show__grp { display: flex; flex: none; gap: 18px; padding-right: 18px; }
.cl__track { animation: clLoop 48s linear infinite; }
.cl__row--rev .cl__track { animation-duration: 40s; animation-direction: reverse; }
.show__track { animation: clLoop 60s linear infinite; }
@keyframes clLoop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .cl__track, .show__track { animation: none; } }

/* ==================================================================
   Insight cards v2 (reference: tinted program cards) + carousel
   ================================================================== */
.ins2 { position: relative; display: flex; flex-direction: column; padding: 14px; border-radius: 18px; background: #EFF0E9; color: var(--ink); transition: background .35s var(--ease), transform .5s var(--ease); }
.ins2--feat { background: var(--signal); }
.ins2__top { display: flex; align-items: center; gap: 6px; padding: 4px 4px 0; }
.pill2 { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 26px; background: #fff; font: 500 var(--fs-meta)/1 var(--sans); letter-spacing: -.005em; white-space: nowrap; }
.ins2__top .ico { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.ins2__top .ico svg { width: 17px; height: 17px; }
.ins2__title { margin: 22px 6px 0; font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); }
.ins2__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.ins2__link:focus-visible { outline: none; }
.ins2:has(.ins2__link:focus-visible) { outline: 2px solid var(--intel); outline-offset: 3px; }
.ins2__dek { margin: 10px 6px 0; font-size: var(--fs-sm); line-height: 1.45; color: rgba(11, 11, 11, .66); max-width: 34ch; min-height: 2.9em; }
.ins2__art { position: relative; margin-top: 18px; aspect-ratio: 1.22; border-radius: 12px; overflow: hidden; isolation: isolate; background: var(--tint); }
.ins2__art .ins__sheet { transition: transform 1s var(--ease); }
.ins2:hover .ins2__art .ins__sheet { transform: translateY(-12px) skewY(14deg); }
.ins2__more { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border-radius: 30px;
  font: 500 var(--fs-meta)/1 var(--sans); color: var(--graphite); background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.ins2__more i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: background .3s var(--ease), color .3s var(--ease), transform .4s var(--ease); }
.ins2__more svg, .car-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ins2:hover .ins2__more i { background: var(--graphite); color: var(--paper); transform: rotate(-45deg); }
/* grid use (Insights index) */
.posts .ins2 { height: 100%; }
/* carousel row */
.ins-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline: none; }
.ins-row::-webkit-scrollbar { display: none; }
.ins-row > .ins2 { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
.car-btns { display: inline-flex; gap: 8px; }
.car-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--graphite); color: var(--paper); transition: opacity .25s var(--ease), transform .25s var(--ease), background .25s var(--ease); }
.car-btn[data-dir="-1"] svg { transform: rotate(180deg); }
.car-btn:hover { background: #262626; }
.car-btn:active { transform: scale(.94); }
.car-btn:disabled { opacity: .28; cursor: default; }
.sec-head--car .sec-head__side { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; }
.sec-head--car .sec-head__side > p { flex-basis: 100%; }
@media (max-width: 900px) {
  .ins-row { margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); scroll-padding-inline: var(--gut); }
  .ins-row > .ins2 { flex: 0 0 82%; }
  .sec-head--car .sec-head__side { justify-content: flex-start; }
  .car-btns { display: none; }
}
.wgrid--3 { row-gap: 20px; column-gap: 16px; }
/* insight cards: brand tone per card, site-consistent motion */
.ins2 { background: var(--card, #EFF0E9); }
.ins2.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.ins2.reveal.in { opacity: 1; transform: none; }
.ins2__art .ins__sheet { transition: transform 1.2s var(--ease); }
.ins2:hover .ins2__art .ins__sheet { transform: translateY(-10px) skewY(14deg); }
.ins2__more i { transition: background .35s var(--ease), color .35s var(--ease); }
.ins2__more svg { transition: transform .45s var(--ease); }
.ins2:hover .ins2__more i { transform: none; }
.ins2:hover .ins2__more svg { transform: translateX(3px); }
.ins-row { scroll-snap-type: x proximity; }
/* carousel controls: Paper-tone circles, Graphite on hover */
.car-btn { background: #E9EBE2; color: var(--graphite); box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .08); transition: background .35s var(--ease), color .35s var(--ease), opacity .3s var(--ease), transform .3s var(--ease); }
.car-btn:hover:not(:disabled) { background: var(--graphite); color: var(--signal); }
.car-btn:disabled { opacity: .35; }
.sec-head--car { align-items: flex-end; }
.sec-head--car .h2 { white-space: nowrap; }
@media (max-width: 560px) { .sec-head--car .h2 { white-space: normal; } }

/* ==================================================================
   Insights library: featured card, toolbar (filters + expanding search), grid, pager
   ================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lib { padding-top: clamp(24px, 3vw, 40px); }
.feat { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; padding: 14px; border-radius: 22px; background: var(--card); }
.feat__txt { display: flex; flex-direction: column; padding: 6px 10px 10px 6px; }
.feat__title { margin: auto 0 0; padding-top: 48px; font: 400 var(--fs-h3)/var(--lh-h3) var(--sans); letter-spacing: var(--ls-h3); max-width: 16ch; }
.feat__dek { margin: 16px 0 26px; font-size: var(--fs-base); line-height: 1.5; color: rgba(11, 11, 11, .7); max-width: 40ch; }
.feat__more { position: static; align-self: flex-start; background: rgba(255, 255, 255, .7); }
.feat__art { position: relative; min-height: clamp(280px, 30vw, 420px); border-radius: 14px; overflow: hidden; isolation: isolate; background: var(--tint); display: flex; align-items: center; justify-content: center; }
.feat__mark { position: relative; z-index: 1; width: 22%; color: rgba(11, 11, 11, .85); }
.feat__mark .mark { width: 100%; height: auto; }
.feat .ins__sheet { transition: transform 1.2s var(--ease); }
.feat:hover .ins__sheet { transform: translateY(-12px) skewY(14deg); }
.feat:hover .ins2__more svg { transform: translateX(3px); }

.lib__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: clamp(48px, 6vw, 72px) 0 14px; }
.lib__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lib__chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 40px; background: #EFF0E9; font: 500 var(--fs-sm)/1 var(--sans); color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease); }
.lib__chip .ico { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.lib__chip .ico svg { width: 13px; height: 13px; }
.lib__chip:hover { background: #E4E6DC; }
.lib__chip.is-on { background: var(--graphite); color: var(--paper); }
.lib__search { position: relative; display: flex; align-items: center; justify-content: flex-end; }
.lib__field { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 44px; background: #EFF0E9; overflow: hidden; transition: width .6s var(--ease), background .3s var(--ease); }
.lib__field input { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 52px 0 20px; font: 400 var(--fs-base)/var(--lh-base) var(--sans); color: var(--ink); opacity: 0; transition: opacity .3s var(--ease); outline: none; -webkit-appearance: none; appearance: none; }
.lib__field input::-webkit-search-cancel-button { display: none; }
.lib__search.is-open .lib__field { width: min(340px, 64vw); background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .14); }
.lib__search.is-open .lib__field input { opacity: 1; transition-delay: .15s; }
.lib__sbtn { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--graphite); transition: background .3s var(--ease), color .3s var(--ease); }
.lib__sbtn svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: opacity .3s var(--ease), transform .45s var(--ease); }
.lib__sbtn svg:last-child { opacity: 0; transform: rotate(-90deg) scale(.6); }
.lib__search.is-open .lib__sbtn svg:first-child { opacity: 0; transform: rotate(90deg) scale(.6); }
.lib__search.is-open .lib__sbtn svg:last-child { opacity: 1; transform: none; }
.lib__sbtn:hover { color: var(--intel); }
.lib__count { margin: 0 0 22px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); min-height: 1em; }
.lib__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lib__item { display: none; }
.lib__item.is-shown { display: block; animation: libIn .9s var(--ease) both; animation-delay: calc(var(--k, 0) * 70ms); }
.lib__item .ins2 { height: 100%; }
@keyframes libIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.lib__empty { padding: 64px 0; text-align: center; }
.lib__empty p { margin: 0 0 14px; font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); }
.lib__pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(40px, 5vw, 64px); }
.lib__pager:empty { display: none; }
.pg { min-width: 40px; height: 40px; padding: 0 6px; border-radius: 40px; display: inline-flex; align-items: center; justify-content: center; font: 500 var(--fs-sm)/1 var(--mono); color: var(--graphite); background: transparent; transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease); }
.pg:hover:not(:disabled):not([aria-current]) { background: #EFF0E9; }
.pg[aria-current="page"] { background: var(--graphite); color: var(--signal); }
.pg--arrow { background: #E9EBE2; box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .08); }
.pg--arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg--prev svg { transform: rotate(180deg); }
.pg--arrow:hover:not(:disabled) { background: var(--graphite); color: var(--signal); }
.pg:disabled { opacity: .3; cursor: default; }

/* article */
.art-hero { padding-bottom: clamp(32px, 4vw, 48px); }
.art-hero .ins2__top { padding: 0; margin-bottom: 22px; }
.art-hero .phero__title { max-width: 20ch; font-size: var(--fs-h2); }
.pill2--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .18); color: var(--ink-2); }
.art-hero__dek { margin: 22px 0 0; max-width: 46ch; font: 400 var(--fs-h5)/var(--lh-lead) var(--sans); letter-spacing: var(--ls-h5); color: var(--ink-2); }
.art-hero__by { margin: 30px 0 0; display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.art-hero__by > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.art-hero__by b { font-weight: 500; }
.art-hero__by > span:last-child span { color: var(--ink-2); font-size: var(--fs-sm); }
.art-hero__av .ico { width: 40px; height: 40px; border-radius: 50%; }
.art-cover__art { position: relative; aspect-ratio: 2.4; border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--tint); }
.art-cover + .prose { padding-top: clamp(48px, 6vw, 80px); }
.art-end { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.art-end__more { position: static; background: #EFF0E9; font-size: var(--fs-sm); padding: 5px 5px 5px 16px; }
.art-end__more:hover i { background: var(--graphite); color: var(--paper); }

@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; }
  .feat__art { min-height: 220px; order: -1; }
  .feat__title { padding-top: 28px; }
  .lib__grid { grid-template-columns: 1fr; }
  .lib__bar { align-items: flex-start; }
  .lib__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: 8px; }
  .lib__chips::-webkit-scrollbar { display: none; }
  .lib__chip { flex: none; }
  .lib__search.is-open .lib__field { width: calc(100vw - 2 * var(--gut)); }
  .art-cover__art { aspect-ratio: 1.6; }
}
@media (min-width: 901px) and (max-width: 1180px) { .lib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==================================================================
   IEXO DARK-LED DESIGN
   Benchmarks (measured): Product Studio 63% dark (#0D0D0D–#131313, one #EFEDE7 offering band),
   Palantir 76% (#0D0E10), Linear 98% (#08090A / text #F7F8F8 / muted #8A8F98), Vercel ~100%.
   Rules: brand blue-black base (never pure black), Paper off-white text, muted at 64%,
   depth by lighter surfaces (not shadows), one Paper band for the offering, Signal only for action.
   ================================================================== */
[data-theme="night"] {
  --night: #0B0B0B;          /* page base: Graphite */
  --night-2: #131313;        /* raised surface */
  --night-3: #1A1A1A;        /* tiles / controls */
  --night-4: #070707;        /* footer: one step deeper */
}
[data-theme="night"] body {
  --bg: var(--night); --ink: #F6F7ED; --ink-2: rgba(246, 247, 237, .64); --ink-3: rgba(246, 247, 237, .42); --line: rgba(246, 247, 237, .12);
  --btn-bg: var(--paper); --btn-fg: var(--graphite); --ctl-bg: rgba(246, 247, 237, .08); --ctl-fg: var(--paper);
  background: var(--night); color: var(--ink);
}
/* light islands keep the light tokens */
[data-theme="night"] :is(.mm, .drawer, .cc, .units, .ins2, .feat, .acc__item, .cta-band, .panel, .ui) {
  --ink: #0B0B0B; --ink-2: rgba(11, 11, 11, .62); --ink-3: rgba(11, 11, 11, .4); --line: rgba(11, 11, 11, .12);
  --btn-bg: var(--graphite); --btn-fg: var(--paper); --ctl-bg: #E9EBE2; --ctl-fg: var(--graphite);
}
[data-theme="night"] :is(.units, .ins2, .feat, .acc__item, .cta-band) { color: var(--ink); }
[data-theme="night"] .btn--dark { background: var(--btn-bg); color: var(--btn-fg); }
[data-theme="night"] .btn--dark:hover { background: var(--signal); color: var(--graphite); }

/* header over the dark page (mega menu + drawer stay Paper panels) */
[data-theme="night"] .brand, [data-theme="night"] .menu-btn { color: var(--paper); }
[data-theme="night"] .nav__link { color: var(--paper); }
[data-theme="night"] .nav__link::after { background: var(--signal); }
[data-theme="night"] .hdr.is-scrolled { background: rgba(0, 20, 31, .82); box-shadow: 0 1px 0 rgba(246, 247, 237, .08); }
[data-theme="night"] .hdr.mm-open, [data-theme="night"] .hdr.mm-open.is-scrolled { background: rgba(0, 20, 31, .92); }
[data-theme="night"] body.menu-open .hdr { background: var(--paper); }
[data-theme="night"] body.menu-open .hdr :is(.brand, .menu-btn) { color: var(--graphite); }
[data-theme="night"] .hdr__cta { color: var(--paper); }
[data-theme="night"] .hdr__ico { background: var(--signal); color: var(--graphite); }
[data-theme="night"] .hdr__cta:hover .hdr__ico { background: var(--paper); }
[data-theme="night"] .mm .hdr__cta { color: var(--graphite); }
[data-theme="night"] .mm .hdr__ico { background: var(--graphite); color: var(--paper); }

/* hero + page heroes: luminous brand glass on the dark base */
[data-theme="night"] .atmos, [data-theme="night"] .atmos--page, [data-theme="night"] .atmos--co { background: var(--night); }
[data-theme="night"] .atmos__glow { display: none; }
[data-theme="night"] .atmos .prism__col { background: linear-gradient(180deg, rgba(var(--c), .62) 0%, rgba(var(--c), .34) 42%, rgba(var(--c), .1) 76%, rgba(var(--c), 0) 100%); }
[data-theme="night"] .atmos .prism__sheet { background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, 0) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
[data-theme="night"] .hero__title, [data-theme="night"] .phero__title { color: var(--paper); }
[data-theme="night"] .hero__row { border-color: var(--line); }

/* home sections */
[data-theme="night"] .trust__grid li { color: rgba(246, 247, 237, .5); }
[data-theme="night"] .trust__grid li:hover { color: var(--paper); }
[data-theme="night"] .statement__text, [data-theme="night"] .belief__text { color: rgba(246, 247, 237, .2); }
[data-theme="night"] .statement__text .hl .w.on { color: color-mix(in oklab, var(--hl) 42%, #ffffff); }
[data-theme="night"] .sband { background: var(--night-2); }
[data-theme="night"] .crow__meta li { background: rgba(246, 247, 237, .08); color: rgba(246, 247, 237, .8); }
[data-theme="night"] .crow__meta .crow__area { background: var(--tint); color: var(--graphite); }
[data-theme="night"] .crow__meta .crow__sample { background: transparent; box-shadow: inset 0 0 0 1px rgba(246, 247, 237, .22); color: var(--ink-2); }
/* the one light band: the offering */
[data-theme="night"] .units { --unit-bg: var(--paper); background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax);
  margin-top: clamp(96px, 12vw, 150px); padding-top: clamp(88px, 11vw, 140px); padding-bottom: clamp(88px, 11vw, 140px); }
[data-theme="night"] .units .small { color: var(--ink-2); }
[data-theme="night"] .units + .insights { padding-top: clamp(96px, 12vw, 150px); }
/* carousel + pager controls */
[data-theme="night"] .car-btn, [data-theme="night"] .pg--arrow { background: var(--ctl-bg); color: var(--ctl-fg); box-shadow: inset 0 0 0 1px rgba(246, 247, 237, .1); }
[data-theme="night"] .car-btn:hover:not(:disabled), [data-theme="night"] .pg--arrow:hover:not(:disabled) { background: var(--signal); color: var(--graphite); }
[data-theme="night"] .car-dots i { background: rgba(246, 247, 237, .25); }
[data-theme="night"] .car-dots i.on { background: var(--signal); }
/* client proof band */
[data-theme="night"] .cl__logo { color: var(--paper); }
[data-theme="night"] .cl__logo:hover { color: var(--signal); opacity: 1; }
[data-theme="night"] .cl__row::before { background: linear-gradient(90deg, var(--night), rgba(0, 20, 31, 0)); }
[data-theme="night"] .cl__row::after { background: linear-gradient(270deg, var(--night), rgba(0, 20, 31, 0)); }
[data-theme="night"] .cta-band .h2 { color: var(--graphite); }
/* footer one step deeper */
[data-theme="night"] .ftr { background: var(--night-4); }
[data-theme="night"] .ftr__crop { color: #141414; }

/* internal pages */
[data-theme="night"] .bento__t { background: var(--night-3); border-color: rgba(246, 247, 237, .08); }
[data-theme="night"] .bento__t--big .bento__txt { color: var(--ink); }
[data-theme="night"] .bento .bento__t--cta { background: var(--signal); color: var(--graphite); border-color: var(--signal); }
[data-theme="night"] .bento .bento__t--cta h3 { color: var(--graphite); }
[data-theme="night"] .bento .bento__t--cta .bento__go { color: var(--graphite); }
[data-theme="night"] .mini-co { box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="night"] .result { background: var(--night-3); }
[data-theme="night"] .quote p::before, [data-theme="night"] .prose blockquote p::before { color: #9DB8EE; }
[data-theme="night"] .role:hover { background: rgba(246, 247, 237, .04); }
[data-theme="night"] .chip-btn.is-on, [data-theme="night"] .lib__chip.is-on { background: var(--signal); color: var(--graphite); }
[data-theme="night"] .tag-sample { background: rgba(246, 247, 237, .1); color: var(--ink-2); }
[data-theme="night"] .field input, [data-theme="night"] .field select, [data-theme="night"] .field textarea { border-bottom-color: rgba(246, 247, 237, .25); color: var(--paper); }
[data-theme="night"] .field input:focus, [data-theme="night"] .field select:focus, [data-theme="night"] .field textarea:focus { border-color: var(--signal); }
[data-theme="night"] .field select option { color: var(--graphite); }
[data-theme="night"] .prose p, [data-theme="night"] .prose ul { color: rgba(246, 247, 237, .8); }
[data-theme="night"] .pill2 { color: var(--graphite); }
[data-theme="night"] .pill2--ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(246, 247, 237, .25); }
[data-theme="night"] .art-end__more { background: var(--paper); }
/* insights library controls */
[data-theme="night"] .lib__chip { background: rgba(246, 247, 237, .07); color: var(--paper); }
[data-theme="night"] .lib__chip:hover { background: rgba(246, 247, 237, .12); }
[data-theme="night"] .lib__field { background: rgba(246, 247, 237, .07); }
[data-theme="night"] .lib__search.is-open .lib__field { background: var(--night-3); box-shadow: inset 0 0 0 1px rgba(246, 247, 237, .2); }
[data-theme="night"] .lib__sbtn { color: var(--paper); }
[data-theme="night"] .lib__sbtn:hover { color: var(--signal); }
[data-theme="night"] .pg { color: var(--paper); }
[data-theme="night"] .pg:hover:not(:disabled):not([aria-current]) { background: rgba(246, 247, 237, .08); }
[data-theme="night"] .pg[aria-current="page"] { background: var(--signal); color: var(--graphite); }
[data-theme="night"] .atmos .prism__col { background: linear-gradient(180deg, rgba(var(--c), .7) 0%, rgba(var(--c), .38) 40%, rgba(var(--c), .1) 78%, rgba(var(--c), 0) 100%); }
[data-theme="night"] .atmos .prism__sheet { background: linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .035) 50%, rgba(255, 255, 255, 0) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 1px 0 0 rgba(255, 255, 255, .08); }
[data-theme="night"] .ins__chip { color: var(--graphite); }

/* ==================================================================
   v2: GRAPHITE BASE + GRADED HERO LIGHT
   Base = brand Graphite #0B0B0B (near-black, not #000: no OLED smear, borders stay visible).
   Hero: one coherent light source in 3 related brand hues (Signal -> Systems teal -> Intelligence blue),
   blended in OKLab (no grey midpoints), neutral glass columns lit by it, fine grain against banding.
   ================================================================== */
[data-theme="night"] {
  --night: #0B0B0B;     /* Graphite: page base */
  --night-2: #131313;   /* raised band */
  --night-3: #1A1A1B;   /* tiles, controls */
  --night-4: #070707;   /* footer */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="night"] .hdr.is-scrolled { background: rgba(11, 11, 11, .78); }
[data-theme="night"] .hdr.mm-open, [data-theme="night"] .hdr.mm-open.is-scrolled { background: rgba(11, 11, 11, .9); }
[data-theme="night"] .cl__row::before { background: linear-gradient(90deg, var(--night), rgba(11, 11, 11, 0)); }
[data-theme="night"] .cl__row::after { background: linear-gradient(270deg, var(--night), rgba(11, 11, 11, 0)); }
[data-theme="night"] .ftr__crop { color: #141414; }

/* the light: one source, three related hues, OKLab blending */
[data-theme="night"] .atmos {
  --l1: 221 255 85;     /* Signal */
  --l2: 27 111 129;     /* Systems */
  --l3: 30 72 143;      /* Intelligence */
  background:
    radial-gradient(in oklab 46% 62% at 70% -8%, rgb(var(--l1) / .26), rgb(var(--l1) / 0) 70%),
    radial-gradient(in oklab 62% 78% at 52% -14%, rgb(var(--l2) / .62), rgb(var(--l2) / 0) 72%),
    radial-gradient(in oklab 48% 70% at 12% -10%, rgb(var(--l3) / .55), rgb(var(--l3) / 0) 70%),
    var(--night);
}
/* expertise pages: the light takes that area's accent */
[data-theme="night"] .atmos--co { --l2: 27 111 129; }
[data-theme="night"] .atmos--co[style*="#1E488F"] { --l1: 120 160 235; --l2: 30 72 143; --l3: 27 111 129; }
[data-theme="night"] .atmos--co[style*="#3E8E2F"] { --l1: 221 255 85; --l2: 62 142 47; --l3: 27 111 129; }
[data-theme="night"] .atmos--co[style*="#5B4FC4"] { --l1: 190 180 255; --l2: 91 79 196; --l3: 30 72 143; }
/* neutral glass columns, lit by the light underneath */
[data-theme="night"] .atmos .prism__col { background: linear-gradient(in oklab 180deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / .025) 45%, rgb(255 255 255 / 0) 85%); box-shadow: inset 1px 0 0 rgb(255 255 255 / .06); }
[data-theme="night"] .atmos .prism__sheet { background: linear-gradient(in oklab 180deg, rgb(255 255 255 / .1) 0%, rgb(255 255 255 / .03) 50%, rgb(255 255 255 / 0) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 1px 0 0 rgb(255 255 255 / .06); }
/* grain above the light, below the content */
[data-theme="night"] .atmos::after, [data-theme="night"] .sband::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 220px; opacity: .07; mix-blend-mode: overlay; }
/* soft settle into the base so the hero never ends on a hard edge */
[data-theme="night"] .atmos .prism { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%); }

/* story band: same light, quieter, lit from below-left */
[data-theme="night"] .sband { background:
    radial-gradient(in oklab 55% 70% at 8% 110%, rgb(27 111 129 / .45), rgb(27 111 129 / 0) 70%),
    radial-gradient(in oklab 40% 50% at 30% 120%, rgb(221 255 85 / .14), rgb(221 255 85 / 0) 70%),
    var(--night-2); }
[data-theme="night"] .prism--dark .prism__col { background: linear-gradient(in oklab 180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .04) 50%, rgb(255 255 255 / 0) 100%); box-shadow: inset 1px 0 0 rgb(255 255 255 / .05); }
[data-theme="night"] .prism--dark .prism__sheet { background: linear-gradient(in oklab 180deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / .02) 55%, rgb(255 255 255 / 0) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); }
[data-theme="night"] .sband__mark { color: rgb(255 255 255 / .035); }
[data-theme="night"] .atmos {
  background:
    radial-gradient(in oklab 22% 34% at 74% -6%, rgb(var(--l1) / .32), rgb(var(--l1) / 0) 70%),
    radial-gradient(in oklab 34% 40% at 50% -10%, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 70%),
    radial-gradient(in oklab 64% 80% at 56% -16%, rgb(var(--l2) / .78), rgb(var(--l2) / 0) 72%),
    radial-gradient(in oklab 50% 72% at 14% -12%, rgb(var(--l3) / .72), rgb(var(--l3) / 0) 70%),
    var(--night);
}

/* ==================================================================
   v3: menus, drawer and consent follow the graphite concept
   ================================================================== */
[data-theme="night"] { color-scheme: dark; }
[data-theme="night"] .units { color-scheme: light; }
[data-theme="night"] :is(.mm, .drawer, .cc) {
  --ink: #F6F7ED; --ink-2: rgba(246, 247, 237, .62); --ink-3: rgba(246, 247, 237, .4); --line: rgba(246, 247, 237, .09);
  --btn-bg: var(--signal); --btn-fg: var(--graphite); color: var(--ink);
}
/* mega menus: dark glass panel */
[data-theme="night"] .mm { background: rgba(19, 19, 19, .94); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border-color: rgba(246, 247, 237, .09); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
[data-theme="night"] .mm__co::before, [data-theme="night"] .mm__card::before { background: color-mix(in oklab, var(--acc, #F6F7ED) 16%, transparent); }
[data-theme="night"] .mm__card::before { background: rgba(246, 247, 237, .04); }
[data-theme="night"] .mm__more { color: color-mix(in oklab, var(--acc) 40%, #ffffff); }
[data-theme="night"] .mm__card .mm__more { color: var(--ink); }
[data-theme="night"] .mm__link span, [data-theme="night"] .mm__sub { color: var(--ink-2); }
[data-theme="night"] .mm__footlinks a:not(.btn):hover, [data-theme="night"] .mm__contact a:not(.mm__cta):hover { color: var(--signal); }
[data-theme="night"] .mm .hdr__cta { color: var(--paper); }
[data-theme="night"] .mm .hdr__ico { background: var(--signal); color: var(--graphite); }
[data-theme="night"] .scrim { background: rgba(0, 0, 0, .35); }
/* mobile menu */
[data-theme="night"] .drawer { background: var(--night); }
[data-theme="night"] body.menu-open .hdr { background: var(--night); }
[data-theme="night"] body.menu-open .hdr :is(.brand, .menu-btn) { color: var(--paper); }
[data-theme="night"] .dr__contact > a:not(.dr__cta), [data-theme="night"] .dr__social a { color: var(--paper); }
[data-theme="night"] .dr__contact .hdr__cta { color: var(--paper); }
[data-theme="night"] .drawer .ico, [data-theme="night"] .mm .ico { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
/* consent card */
[data-theme="night"] .cc { background: rgba(19, 19, 19, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: rgba(246, 247, 237, .1); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .8); }
[data-theme="night"] .cc__mark { color: var(--paper); }
[data-theme="night"] .cc .btn--line { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(246, 247, 237, .28); }
[data-theme="night"] .cc .btn--line:hover { box-shadow: inset 0 0 0 1px var(--paper); }
[data-theme="night"] .cc__sw { background: rgba(246, 247, 237, .16); }
[data-theme="night"] .cc__opt input:checked + .cc__sw { background: var(--signal); }
[data-theme="night"] .cc__opt input:checked + .cc__sw::after { background: var(--night); }
/* footer cookie link + small tags */
[data-theme="night"] .ftr__cookie:hover, [data-theme="night"] .ftr__cols a:hover, [data-theme="night"] .ftr__legal a:hover { color: var(--signal); }
.drawer .ico, .mm .ico, .lib__chip .ico, .ins2 .ico, span.ico.ico { color: var(--ia); }
.role__co { color: var(--acc); }
[data-theme="night"] .role__co { color: color-mix(in oklab, var(--acc) 45%, #ffffff); }

/* ==================================================================
   v4: link CTA, hero seam fix, careers bento + roles
   ================================================================== */
/* hero seam: the grain used overlay blending, which Chrome skips while the hero sheets animate,
   so for ~2.6s it painted as a grey film that ended in a hard edge. Normal blend, fainter, and faded out. */
[data-theme="night"] .atmos::after, [data-theme="night"] .sband::after { mix-blend-mode: normal; opacity: .035; }
[data-theme="night"] .atmos::after { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }

/* link CTA: label + line arrow, no fill (same family as the header CTA) */
.go { display: inline-flex; align-items: center; gap: 14px; font: 500 var(--fs-caps)/1 var(--sans); letter-spacing: var(--ls-caps-ui); text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.go__l { position: relative; padding: 6px 0; }
.go__l::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.go__i { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in oklab, currentColor 28%, transparent); transition: border-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ease); }
.go__i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.go:hover .go__l::after { transform: scaleX(1); transform-origin: left; }
.go:hover .go__i { transform: rotate(45deg); border-color: currentColor; }
[data-theme="night"] .go__i { color: var(--signal); border-color: rgb(221 255 85 / .35); }
[data-theme="night"] .go:hover .go__i { border-color: var(--signal); }

/* careers: bento (3 columns, hero spans two, full-width finale) */
.bx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bx__c { position: relative; display: flex; flex-direction: column; height: 520px; padding: 0; text-align: left; font: inherit; color: var(--ink); background: var(--night-2, #131313); border: 1px solid rgb(246 247 237 / .08); border-radius: 18px; overflow: hidden; cursor: pointer;
  transition: border-color .3s var(--ease), transform .5s var(--ease), background .3s var(--ease); }
.bx__c:hover, .bx__c:focus-visible { border-color: rgb(246 247 237 / .32); background: #161616; transform: scale(1.008); z-index: 1; outline: none; }
.bx__c--hero { grid-column: span 2; }
.bx__c--wide { grid-column: 1 / -1; height: 380px; flex-direction: row; }
.bx__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px 28px 0; }
.bx__c--wide .bx__head { flex: 0 0 34%; padding-bottom: 28px; }
.bx__t { font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); max-width: 22ch; }
.bx__c--hero .bx__t, .bx__c--wide .bx__t { font-size: var(--fs-h4); max-width: 18ch; }
.bx__exp { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(246 247 237 / .14); color: rgb(246 247 237 / .6); transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); }
.bx__exp svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bx__c:hover .bx__exp { border-color: var(--signal); color: var(--graphite); background: var(--signal); }
.bx__g { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 24px 28px 28px; }
.bx__c--wide .bx__g { padding-left: 0; }
.bx__g .gx { width: 100%; height: 100%; display: block; transition: transform .7s var(--ease); }
.bx__c:hover .bx__g .gx { transform: translateY(-4px); }

/* line-art graphics, graphite + signal */
.gx { font-family: var(--mono); }
.gx-card { fill: #1A1A1B; stroke: rgb(246 247 237 / .1); }
.gx-soft { fill: rgb(246 247 237 / .08); }
.gx-fig { fill: rgb(246 247 237 / .22); }
.gx-bar, .gx-cell { fill: rgb(246 247 237 / .07); }
.gx-code { fill: #0E0E0E; }
.gx-codeln { stroke: rgb(221 255 85 / .45); stroke-width: 4; stroke-linecap: round; fill: none; }
.gx-line { stroke: rgb(246 247 237 / .1); stroke-width: 6; stroke-linecap: round; fill: none; }
.gx-lime { stroke: var(--signal); stroke-width: 6; stroke-linecap: round; fill: none; }
.gx-ring { fill: none; stroke: rgb(246 247 237 / .2); }
.gx-tick { fill: none; stroke: var(--signal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gx-on { fill: var(--signal); } .gx-on + .gx-tick { stroke: var(--graphite); }
.gx-off { fill: #0E0E0E; stroke: rgb(246 247 237 / .25); }
.gx-pill { fill: var(--signal); }
.gx-plus { stroke: rgb(255 255 255 / .85); stroke-width: 2; stroke-linecap: round; }
.gx-pin { fill: var(--signal); } .gx-dot { fill: #1A1A1B; }
.gx-t { font-size: 10px; letter-spacing: .1em; fill: rgb(246 247 237 / .5); }
.gx-tl { font-size: 10px; letter-spacing: .1em; fill: var(--signal); }
.gx-tp { font-size: 10px; letter-spacing: .1em; font-weight: 500; fill: var(--graphite); }
.gx-tb { font: 500 14px var(--sans); fill: rgb(246 247 237 / .9); }

/* bento pop-up */
.bxm-ov { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: clamp(20px, 6vh, 80px) 20px; background: rgb(5 5 5 / .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .3s var(--ease); }
.bxm-ov.is-open { opacity: 1; }
.bxm { position: relative; width: 100%; max-width: 1040px; color: var(--paper); background: #131313; border: 1px solid rgb(246 247 237 / .12); border-radius: 22px; padding: clamp(28px, 4vw, 52px); transform: translateY(18px) scale(.985); transition: transform .45s var(--ease); }
.bxm-ov.is-open .bxm { transform: none; }
.bxm__close { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(246 247 237 / .14); background: transparent; color: rgb(246 247 237 / .7); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.bxm__close:hover { border-color: var(--paper); color: var(--paper); }
.bxm__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.bxm__handle { display: none; }
.bxm__head { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px 56px; margin-bottom: 40px; padding-right: 48px; }
.bxm__title { margin: 0 0 18px; font: 400 var(--fs-h3)/var(--lh-h3) var(--sans); letter-spacing: var(--ls-h3); max-width: 18ch; }
.bxm__body { margin: 0 0 28px; font-size: var(--fs-md); line-height: 1.6; color: rgb(246 247 237 / .68); }
.bxm__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: start; }
.bxm__checks li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-base); line-height: 1.45; color: rgb(246 247 237 / .86); }
.bxm__checks svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bxm__g { border: 1px solid rgb(246 247 237 / .08); border-radius: 16px; background: #0E0E0E; padding: clamp(24px, 5vw, 56px); display: flex; justify-content: center; }
.bxm__g .gx { width: 100%; max-width: 720px; max-height: 420px; height: auto; }

/* careers: open roles */
.rl__bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.rl__n { font: 500 var(--fs-meta)/var(--lh-meta) var(--mono); opacity: .55; }
.rl { display: flex; flex-direction: column; gap: 12px; }
.rl__item { background: #131313; border: 1px solid rgb(246 247 237 / .08); border-radius: 18px; transition: border-color .3s var(--ease), background .3s var(--ease); }
.rl__item[hidden] { display: none; }
.rl__item:hover, .rl__item.is-open { border-color: rgb(246 247 237 / .2); }
.rl__item.is-open { background: #161616; }
.rl__head { width: 100%; display: flex; align-items: center; gap: 28px; padding: 28px 30px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rl__main { flex: 1; display: grid; gap: 12px; min-width: 0; }
.rl__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.rl__title { font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); }
.rl__sum { max-width: 72ch; font-size: var(--fs-base); line-height: 1.55; color: rgb(246 247 237 / .62); }
.rl__tog { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(246 247 237 / .16); transition: background .3s var(--ease), border-color .3s var(--ease), transform .45s var(--ease); }
.rl__tog::before, .rl__tog::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px; background: var(--paper); border-radius: 2px; transition: transform .45s var(--ease), background .3s var(--ease); }
.rl__tog::after { transform: rotate(90deg); }
.rl__head:hover .rl__tog { border-color: var(--signal); }
.rl__item.is-open .rl__tog { background: var(--signal); border-color: var(--signal); transform: rotate(180deg); }
.rl__item.is-open .rl__tog::before, .rl__item.is-open .rl__tog::after { background: var(--graphite); }
.rl__item.is-open .rl__tog::after { transform: rotate(0deg); }
.rl__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.rl__item.is-open .rl__body { grid-template-rows: 1fr; }
.rl__inner { overflow: hidden; padding: 0 30px; }
.rl__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 24px; border-top: 1px solid rgb(246 247 237 / .08); }
.rl__h { margin: 0 0 14px; font: 500 var(--fs-meta)/var(--lh-meta) var(--mono); letter-spacing: var(--ls-caps); text-transform: uppercase; color: color-mix(in oklab, var(--acc) 40%, #fff); }
.rl__ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rl__ul li { position: relative; padding-left: 20px; font-size: var(--fs-base); line-height: 1.5; color: rgb(246 247 237 / .8); }
.rl__ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1.5px; background: var(--signal); }
.rl__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 28px 0 30px; }
.rl__foot .small { color: rgb(246 247 237 / .5); }

@media (max-width: 1000px) {
  .bx { grid-template-columns: 1fr 1fr; }
  .bx__c--hero, .bx__c--wide { grid-column: 1 / -1; }
  .bx__c { height: 480px; }
  .bx__c--wide { flex-direction: column; height: 520px; }
  .bx__c--wide .bx__head { flex: none; padding-bottom: 0; }
  .bx__c--wide .bx__g { padding-left: 28px; }
}
@media (max-width: 720px) {
  .bx { grid-template-columns: 1fr; gap: 12px; }
  .bx__c, .bx__c--wide { height: 440px; }
  .bx__head { padding: 22px 22px 0; }
  .bx__g, .bx__c--wide .bx__g { padding: 18px 22px 22px; }
  .bxm-ov { align-items: flex-end; padding: 0; }
  .bxm { border-radius: 20px 20px 0 0; border-width: 1px 0 0; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; padding: 28px 22px calc(32px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .4s cubic-bezier(.32, .72, 0, 1); }
  .bxm__handle { display: block; position: sticky; top: 0; width: 40px; height: 4px; margin: -8px auto 20px; border-radius: 999px; background: rgb(246 247 237 / .2); }
  .bxm__close { top: 16px; right: 16px; }
  .bxm__head { grid-template-columns: 1fr; gap: 24px; padding-right: 36px; margin-bottom: 28px; }
  .rl__head { padding: 22px 20px; gap: 16px; align-items: flex-start; }
  .rl__tog { width: 38px; height: 38px; }
  .rl__inner { padding: 0 20px; }
  .rl__cols { grid-template-columns: 1fr; gap: 26px; }
  .rl__bar { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .rl__chip { flex: none; }
  .sec-head--cta .go { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .bxm-ov, .bxm, .bx__c, .rl__body { transition: none; } }
.rl__meta .pill2 { background: rgb(246 247 237 / .06); color: rgb(246 247 237 / .78); border: 1px solid rgb(246 247 237 / .08); }
.rl__meta .pill2:first-child { background: color-mix(in oklab, var(--acc) 30%, transparent); border-color: color-mix(in oklab, var(--acc) 50%, transparent); color: var(--paper); }
.bxm-ov[hidden] { display: none; }
@media (max-width: 720px) {
  .bx__c, .bx__c--wide { height: auto; }
  .bx__g .gx { height: auto; max-height: 300px; }
  .bx__c--wide .bx__g .gx { max-height: none; }
}


/* ==================================================================
   v5: one motion language
   ease var(--ease) everywhere · colour .35s · small moves .45s · content drift 1.2s
   reveals rise 28px over ~1s · lists stagger 70ms · expanders .6s, content follows at +.18s
   ================================================================== */

/* bento: cards stay still and keep the scroll reveal; the drawing drifts like the insight-card glass */
.bx__c { transition: opacity 1s var(--ease), transform 1.1s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  transition-delay: calc(var(--k, 0) * 70ms), calc(var(--k, 0) * 70ms), 0s, 0s; }
.bx__c:hover, .bx__c:focus-visible { transform: none; }
.bx__g .gx { transition: transform 1.2s var(--ease); }
.bx__c:hover .bx__g .gx { transform: translateY(-10px); }
.bx__exp { transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease); }
.bx__exp svg { transition: transform .45s var(--ease); }
.bx__c:hover .bx__exp svg { transform: scale(1.18); }
/* expand control sits in the same top-right corner on every card, the wide one included */
.bx__head { padding-right: 82px; }
.bx__exp { position: absolute; top: 26px; right: 26px; }
.bx__c--wide .bx__g { padding-top: 84px; }

/* pop-up: rises like a reveal, then its contents follow in sequence like the menus */
.bxm-ov { transition: opacity .45s var(--ease); }
.bxm { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.bxm-ov.is-open .bxm { opacity: 1; transform: none; }
.bxm__in :is(.bxm__title, .bxm__body, .go, .bxm__checks li, .bxm__g) { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.bxm-ov.is-open .bxm__in :is(.bxm__title, .bxm__body, .go, .bxm__checks li, .bxm__g) { opacity: 1; transform: none; }
.bxm-ov.is-open .bxm__title { transition-delay: .12s; } .bxm-ov.is-open .bxm__body { transition-delay: .17s; } .bxm-ov.is-open .bxm__in .go { transition-delay: .22s; }
.bxm-ov.is-open .bxm__checks li:nth-child(1) { transition-delay: .2s; } .bxm-ov.is-open .bxm__checks li:nth-child(2) { transition-delay: .24s; }
.bxm-ov.is-open .bxm__checks li:nth-child(3) { transition-delay: .28s; } .bxm-ov.is-open .bxm__checks li:nth-child(4) { transition-delay: .32s; }
.bxm-ov.is-open .bxm__g { transition-delay: .3s; }
.bxm__g .gx { transition: transform 1.2s var(--ease); }
.bxm__close svg { transition: transform .45s var(--ease); }
.bxm__close:hover svg { transform: rotate(90deg); }

/* open roles: paginated like the library, expand like the accordions */
.rl__item { display: none; transition: border-color .35s var(--ease), background .35s var(--ease); }
.rl__item.is-shown { display: block; animation: libIn .9s var(--ease) both; animation-delay: calc(var(--k, 0) * 70ms); }
.rl__count { margin: -8px 0 18px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgb(246 247 237 / .45); }
.rl__chip .rl__n { opacity: .5; }
.rl__body { transition: grid-template-rows .6s var(--ease); }
.rl__inner { min-height: 0; }
.rl__cols, .rl__foot { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.rl__item.is-open .rl__cols { opacity: 1; transform: none; transition-delay: .18s; }
.rl__item.is-open .rl__foot { opacity: 1; transform: none; transition-delay: .26s; }
.rl__tog { transition: background .35s var(--ease), border-color .35s var(--ease), transform .6s var(--ease); }
.rl__tog::before, .rl__tog::after { transition: transform .6s var(--ease), background .35s var(--ease); }
.rl__title { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); justify-self: start; }
.rl__head:hover .rl__title { background-size: 100% 1px; }

/* mega menu: no layout shifts; the same drawn underline as the nav, arrows nudge, links follow the column cascade */
.mm__link { transition: none; }
.mm__link:hover { padding-left: 6px; }
.mm__link b, .mm__cohead .mm__title, .mm__card .mm__title, .mm__footlinks a:not(.btn) { justify-self: start; align-self: flex-start;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .35s var(--ease); }
.mm__link:hover b, .mm__link:focus-visible b, .mm__cohead:hover .mm__title, .mm__card:hover .mm__title, .mm__footlinks a:not(.btn):hover { background-size: 100% 1px; }
.mm__link span { transition: color .35s var(--ease); }
.mm__link:hover span { color: var(--ink); }
.mm__co::before, .mm__card::before { transition: opacity .45s var(--ease); }
.mm__more i, .mm__parent i { transition: transform .45s var(--ease); }
.mm__cohead:hover .mm__more i, .mm__card:hover .mm__more i, .mm__parent:hover i { transform: translateX(3px); }
[data-theme="night"] .mm__footlinks a:not(.btn):hover { color: var(--ink); }
.mm__links .mm__link { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.mm.is-open .mm__links .mm__link { opacity: 1; transform: none; }
.mm.is-open .mm__co:nth-child(2) .mm__link { transition-delay: calc(.14s + var(--j, 0) * 40ms); }
.mm.is-open .mm__co:nth-child(3) .mm__link { transition-delay: calc(.18s + var(--j, 0) * 40ms); }
.mm.is-open .mm__co:nth-child(4) .mm__link { transition-delay: calc(.22s + var(--j, 0) * 40ms); }
.mm.is-open .mm__co:nth-child(5) .mm__link { transition-delay: calc(.26s + var(--j, 0) * 40ms); }
.mm__link:nth-child(2) { --j: 1; } .mm__link:nth-child(3) { --j: 2; } .mm__link:nth-child(4) { --j: 3; }

@media (max-width: 720px) {
  .bx__exp { top: 20px; right: 20px; }
  .bx__head { padding-right: 70px; }
  .bx__c--wide .bx__g { padding-top: 18px; }
  .bxm { opacity: 1; transform: translateY(100%); transition: transform .6s var(--ease); }
  .bxm-ov.is-open .bxm { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rl__item.is-shown { animation: none; }
  .bxm, .bxm__in *, .mm__links .mm__link, .rl__cols, .rl__foot { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ================================================================== IEXO restructure (Oct 2026): new components */
.dev-sample { display: inline-block; vertical-align: middle; margin: 0 8px 0 0; padding: 2px 7px; border-radius: 3px; background: #EC008C; color: #fff; font: 500 var(--fs-meta)/var(--lh-meta) var(--mono); letter-spacing: var(--ls-caps); text-transform: uppercase; }
/* block markers are taken out of flow so they never become a grid/flex item or shift layout; they sit at their static position */
.dev-sample--block { position: absolute; z-index: 6; margin: -26px 0 0; pointer-events: none; }
.eyebrow { margin: 0 0 18px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.narrow { max-width: 60ch; }
.hero__cta { color: var(--signal); text-decoration: underline; text-underline-offset: 4px; }
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.crumbs { padding-top: 20px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a:hover { color: var(--ink); }
.mm__grid--3 { grid-template-columns: 1.15fr repeat(3, 1fr); }
.mm__intro .mm__parent + .mm__parent { margin-top: -6px; }
.values--3 { grid-template-columns: repeat(3, 1fr); }
.values--5 { grid-template-columns: repeat(5, 1fr); }
.xps--3 { grid-template-columns: repeat(3, 1fr); }
.xps--3 .xp { padding-right: 24px; }
.facts--row { position: static; grid-template-columns: repeat(4, 1fr); column-gap: 24px; }

/* problem */
.prob { padding-top: clamp(96px, 14vw, 180px); }
.prob__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.prob__head .lede { color: var(--ink-2); }
.prob__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.prob__f { padding: 28px 28px 32px 0; display: flex; flex-direction: column; gap: 12px; }
.prob__f + .prob__f { padding-left: 28px; border-left: 1px solid var(--line); }
.prob__v { margin: 0; font: 400 var(--fs-display)/var(--lh-display) var(--sans); letter-spacing: var(--ls-display); color: var(--signal); }
.prob__t { margin: 0; font-size: var(--fs-md); line-height: 1.45; max-width: 32ch; }
.prob__s { margin-top: auto; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); color: var(--ink-3); }
.prob__s:hover { color: var(--ink); }

/* platforms */
.plat { padding-top: clamp(56px, 8vh, 96px); padding-bottom: clamp(56px, 10vh, 120px); }
.plat__rows { margin: 28px auto 0; max-width: 1100px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.plat__rows--lg { max-width: none; margin: 0; }
.plat__row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.plat__row--lg { padding: 24px 0; }
.plat__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plat__chips li { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); color: var(--ink); }
.plat__chips--lg li { padding: 10px 16px; font-size: var(--fs-base); }
.plat__note { margin-top: 16px; text-align: center; }
.sec .plat__note { text-align: left; }

/* industries strip + index */
.inds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ind { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 24px; border-radius: 10px; background: var(--tint); color: var(--graphite); transition: transform .4s var(--ease); }
.ind:hover { transform: translateY(-4px); }
.ind__t { font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); margin-top: auto; }
.ind__s { font-size: var(--fs-sm); color: rgba(11, 11, 11, .7); max-width: 30ch; }
.ind__go { position: absolute; top: 24px; right: 24px; font-style: normal; transition: transform .35s var(--ease); }
.ind:hover .ind__go { transform: translateX(4px); }
.indcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 28px); }
.indc { display: flex; flex-direction: column; gap: 10px; }
.indc__art { aspect-ratio: 1.9; margin-bottom: 12px; }
.indc__t { margin: 0; font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); }
.indc__l { margin: 0; color: var(--ink-2); font-size: var(--fs-base); max-width: 56ch; }

/* use cases */
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.use { padding: 24px; border-radius: 10px; background: var(--tint); color: var(--graphite); display: flex; flex-direction: column; gap: 10px; }
.use h3 { margin: 0; font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); }
.use p { margin: 0; font-size: var(--fs-base); color: rgba(11, 11, 11, .72); }
.use__m { font-size: var(--fs-meta) !important; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--acc) !important; }

/* engagement models */
.engs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.eng { padding: 28px 24px 32px 0; display: flex; flex-direction: column; gap: 16px; }
.eng + .eng { padding-left: 24px; border-left: 1px solid var(--line); }
.eng__head { display: flex; flex-direction: column; gap: 10px; }
.eng__n { font-size: var(--fs-meta); color: var(--ink-3); }
.eng h3 { margin: 0; font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); }
.eng__meta { margin: 0; display: grid; gap: 10px; }
.eng__meta dd { margin: 4px 0 0; font-size: var(--fs-sm); }
.eng__what { margin: 0; font-size: var(--fs-base); color: var(--ink-2); }
.eng__out { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.eng__out span { display: block; margin-bottom: 6px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--signal); }

/* faq */
.faq { border-top: 1px solid var(--line); max-width: 920px; }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font: 400 var(--fs-h5)/var(--lh-h5) var(--sans); letter-spacing: var(--ls-h5); }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: "+"; font-family: var(--mono); color: var(--ink-2); transition: transform .3s var(--ease); }
.faq__i[open] summary::after { transform: rotate(45deg); }
.faq__i p { margin: 0 0 24px; max-width: 64ch; color: var(--ink-2); font-size: var(--fs-base); }

/* trust */
.trs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tr { padding: clamp(24px, 3vw, 40px); border-radius: 10px; background: var(--night-3, #1A1A1A); }
.tr__h { margin: 0 0 18px; font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); }
.tr__ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tr__ul li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: var(--fs-base); color: var(--ink-2); }
.tr__ul svg { width: 18px; height: 18px; fill: none; stroke: var(--signal); stroke-width: 2; margin-top: 2px; }

@media (max-width: 1080px) {
  .engs, .inds { grid-template-columns: repeat(2, 1fr); }
  .eng:nth-child(3) { padding-left: 0; border-left: 0; }
  .eng { border-bottom: 1px solid var(--line); }
  .values--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .prob__head, .split { grid-template-columns: 1fr; }
  .prob__grid, .values--3, .xps--3, .facts--row, .trs, .indcs { grid-template-columns: 1fr; }
  .prob__f + .prob__f { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .plat__row { grid-template-columns: 1fr; gap: 12px; }
  .mm__grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .engs, .inds, .values--5 { grid-template-columns: 1fr; }
  .eng, .eng + .eng { padding-left: 0; border-left: 0; }
}

/* Stacked "three teams" cards must always fit the space under the pinned header,
   otherwise the next card slides over content that hasn't been seen yet.
   The artwork panel absorbs the difference; text never shrinks. */
.units .unit__card { display: flex; flex-direction: column; max-height: calc(100svh - var(--stack-top) - 20px); }
.units .unit__art { aspect-ratio: auto; flex: 0 1 clamp(200px, 26vw, 400px); min-height: 110px; }
.units .unit__body { flex: 0 0 auto; }
@media (max-width: 900px) { .units .unit__art { flex-basis: clamp(150px, 46vw, 260px); min-height: 96px; } }

/* Light islands on the night theme: the product mock-ups and tinted panels are white/tinted surfaces,
   but their text inherited the page's Paper colour and disappeared. Give them the light-surface ink. */
[data-theme="night"] :is(.ui, .phone__scr) { color: var(--graphite); }
[data-theme="night"] .person__ph span { color: var(--graphite); }

/* Home: provider logo strip. No dividers: an even, quiet grid of marks. */
.logos { list-style: none; margin: clamp(28px, 4vw, 44px) auto 0; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); align-items: center; justify-items: center; }
.logos li { height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); transition: color .3s var(--ease); }
.logos li:hover { color: var(--ink); }
.logos .logo { height: 26px; width: auto; max-width: 132px; }
.logos li[title="AWS"] .logo { height: 32px; }
.logos li[title="Oracle"] .logo { height: 16px; }
.logos li[title="Anthropic"] .logo, .logos li[title="OpenAI"] .logo { height: 28px; }
.logos__note { margin: clamp(28px, 4vw, 40px) 0 0; text-align: center; font-size: var(--fs-meta); color: var(--ink-3); }
.logos__note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .logos { grid-template-columns: repeat(3, 1fr); } .logos .logo { height: 22px; max-width: 104px; } }

/* Home: industries bento (careers bento system + glass artwork as the image) */
.bx__c--link { cursor: pointer; text-decoration: none; }
.bx__head > span:first-child { display: flex; flex-direction: column; gap: 12px; }
.bx__k { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.bx__exp > svg { stroke-width: 1.8; }
.bx__art { position: relative; flex: 1; min-height: 0; margin: 24px 28px 28px; border-radius: 12px; overflow: hidden; isolation: isolate; background: var(--tint); }
.bx__art .ins__sheet { transition: transform 1s var(--ease); }
.bx__c--link:hover .bx__art .ins__sheet { transform: translateY(-10px) skewY(14deg); }
.bx__art .ins__chip { z-index: 2; background: rgba(246, 247, 237, .9); color: var(--graphite); }
@media (max-width: 720px) { .bx__art { margin: 18px 22px 22px; } }
.logos li { gap: 10px; }
.logos li span:not(.sr) { font: 500 var(--fs-base)/var(--lh-base) var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.logos li:not(.wm) .logo { height: 24px; max-width: 40px; }
.bx__art .ins__chip { white-space: nowrap; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .logos { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } .logos li span:not(.sr) { font-size: var(--fs-sm); } }

/* Home metrics: clean cards in the same surface language as the bento (no dividers), count up and stagger in */
.prob__grid { border-top: 0; gap: 16px; }
.prob__f, .prob__f + .prob__f { padding: clamp(24px, 2.6vw, 34px); border: 1px solid rgb(246 247 237 / .08); border-left: 1px solid rgb(246 247 237 / .08); border-top: 1px solid rgb(246 247 237 / .08); border-radius: 18px; background: var(--night-2, #131313); }
.prob__f.reveal { transition-delay: calc(var(--i, 0) * 120ms); }
.prob__v { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .prob__grid { gap: 12px; } }

/* Insights carousel: native, momentum scrolling with snap; cards stay put (no per-card entrance) */
.ins-row { -webkit-overflow-scrolling: touch; }  /* arrows glide via JS; no CSS smooth-scroll (it would fight the per-frame glide) */
.ins-row > .ins2 { scroll-snap-stop: normal; }
@media (max-width: 900px) {
  .ins-row { scroll-snap-type: x mandatory; gap: 12px; }
  .ins-row > .ins2 { flex: 0 0 calc((100% - 12px) / 2); }
}
@media (max-width: 600px) {
  .ins-row > .ins2 { flex: 0 0 86%; }
}

/* Mobile drawer: text-only items; contact + social sit in a footer at the bottom of the drawer */
.drawer__sub a.dr__item { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
.dr__item b, .dr__item span:not(.ico) { grid-column: 1 !important; }
.dr__item i { grid-column: 2 !important; grid-row: 1 / 3 !important; }
.drawer__inner { min-height: calc(100svh - var(--hdr) - 8px); }
.dr__contact { margin-top: auto; padding-top: 40px; }

/* Paper band: brand Paper surface to separate a section from the night page (same tokens as the light islands) */
.band-paper { background: var(--paper); }
[data-theme="night"] .band-paper { --ink: #0B0B0B; --ink-2: rgba(11, 11, 11, .62); --ink-3: rgba(11, 11, 11, .4); --line: rgba(11, 11, 11, .12);
  --btn-bg: var(--graphite); --btn-fg: var(--paper); --ctl-bg: #E9EBE2; --ctl-fg: var(--graphite); color: var(--ink); background: var(--paper); }
.band-paper > .sec { padding-bottom: clamp(72px, 10vw, 140px); }
.band-paper + .cta-band { margin-top: 0; }

/* Case study: product screens gallery + walkthrough video */
.lede--sm { font-size: var(--fs-h6); line-height: var(--lh-lead); color: var(--ink-2); margin-bottom: 28px; }
.gal { position: relative; }
.gal__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; outline: none; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__item { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.gal__media { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.gal__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gal__media .ui--desk, .gal__media .ui--infra { width: 56%; }
.gal__media .ui--card { width: 60%; }
.gal__media .ui--icons { width: 36%; }
.gal__cap { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-2); }
.gal__cap .mono { font-size: var(--fs-meta); color: var(--ink-3); }
.gal__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.gal__count { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); color: var(--ink-2); }
.vid { margin: 0; }
.vid__frame { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.vid__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; z-index: 2; }
.vid__play { position: relative; z-index: 2; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: rgba(246, 247, 237, .92); box-shadow: 0 18px 40px -18px rgba(11, 11, 11, .45); }
.vid__play svg { width: 26px; height: 26px; fill: var(--graphite); margin-left: 4px; }
.vid__meta { position: absolute; z-index: 2; left: 16px; bottom: 16px; padding: 6px 10px; border-radius: 4px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--graphite); background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (prefers-reduced-motion: reduce) { .gal__track { scroll-behavior: auto; } }
@media (max-width: 600px) { .gal__media { aspect-ratio: 4 / 3; } .vid__play { width: 60px; height: 60px; } }
/* inside the Paper band, case-row chips use the light-surface colours */
[data-theme="night"] .band-paper .crow__meta li { background: rgba(11, 11, 11, .06); color: rgba(11, 11, 11, .78); }
[data-theme="night"] .band-paper .crow__meta .crow__area { background: var(--tint); color: var(--graphite); }
[data-theme="night"] .band-paper .crow__meta .crow__sample { box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .16); color: var(--ink-2); }
/* grid/flex children holding a scroll strip must be allowed to shrink, or the strip widens the page */
.case-main, .case-main > .block, .gal { min-width: 0; }
@media (max-width: 600px) { .gal__track { gap: 12px; } .gal__item { flex-basis: 88%; } }   /* show the next screen's edge so swiping is obvious */

/* Footer legal row: two groups; separators only between items on one line, never dangling at a wrap */
.ftr__legal p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.ftr__legal p > * + *::before { content: "·"; margin: 0 10px; color: rgba(246, 247, 237, .3); }
@media (max-width: 900px) {
  .ftr__legal { gap: 14px; padding-top: 22px; padding-bottom: 28px; }
  .ftr__co { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
  .ftr__co > * + *::before { content: none !important; }
  .ftr__links { gap: 8px 0; }
}

/* Industries bento on phones: cards are auto-height there, so give the artwork its own aspect ratio */
@media (max-width: 1000px) {
  .bx__c--link { height: auto; }
  .bx__c--link .bx__art { flex: none; aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) { .bx__c--link .bx__art { aspect-ratio: 4 / 3; } }
@media (max-width: 900px) { .ftr__links > span:last-child { flex-basis: 100%; margin-top: 6px; } .ftr__links > span:last-child::before { content: none; } }

/* ==================================================================
   Footer, rebuilt: the large IEXO mark is a background layer anchored to the
   bottom; the contact block, link groups and legal row sit on top of it.
   ================================================================== */
.ftr { padding-top: clamp(72px, 9vw, 112px); isolation: isolate; }
.ftr__crop { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; z-index: -1; pointer-events: none; }
.ftr__crop .mark { display: block; width: 100%; height: auto; margin: 0 0 -1.2%; }
.ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 56px; }
.ftr__addr { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ftr__addr .dev-sample { margin-bottom: 4px; }
.ftr__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.ftr__col, .ftr__list { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); color: rgba(246, 247, 237, .85); }
.ftr__list a, .ftr__col > a { align-self: flex-start; transition: color .2s var(--ease); }
.ftr__list a:hover, .ftr__col > a:hover { color: var(--signal); }
/* legal row sits over the lower part of the mark */
.ftr__legal { margin-top: clamp(140px, 17vw, 260px); padding-top: 20px; padding-bottom: 24px; color: rgba(246, 247, 237, .6); }

@media (max-width: 900px) {
  .ftr { padding-top: 64px; }
  .ftr__grid { grid-template-columns: 1fr; gap: 44px; }
  .ftr__big { font-size: var(--fs-h4); }
  .ftr__addr { margin-top: 18px; font-size: var(--fs-sm); }
  .ftr__cols { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .ftr__col--company, .ftr__col--follow { grid-column: 1 / -1; }
  .ftr__col--company .ftr__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .ftr__col--follow .ftr__list { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; }
  .ftr__legal { margin-top: 72px; padding-top: 0; padding-bottom: 28px; }   /* legal text overlays the mark */
  .ftr__crop .mark { margin-bottom: -1%; }
}
.ftr__big { font-size: var(--fs-h4); max-width: 100%; overflow-wrap: anywhere; }

/* Statement + belief: same large type as the reference (60px at 1440, tight leading), one shared spec */
.statement__text, .belief__text { max-width: 1192px; font: 400 var(--fs-h2)/var(--lh-quote) var(--sans); letter-spacing: var(--ls-h2); }

/* ==================================================================
   Glass: one quiet recipe, used sparingly (hero CTA, captions on artwork).
   Frosted Paper tint + blur + hairline highlight. No coloured glows.
   ================================================================== */
.glass { background: rgba(246, 247, 237, .14); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.glass-btn { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 8px 0 20px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; color: var(--paper);
  background: rgba(246, 247, 237, .1); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(246, 247, 237, .2), inset 0 1px 0 rgba(255, 255, 255, .25); transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.glass-btn i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--graphite); transition: transform .35s var(--ease); }
.glass-btn i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glass-btn:hover { background: rgba(246, 247, 237, .16); box-shadow: inset 0 0 0 1px rgba(246, 247, 237, .32), inset 0 1px 0 rgba(255, 255, 255, .3); }
.glass-btn:hover i { transform: translateX(2px); }
.hero__more { font-size: var(--fs-sm); color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.hero__more:hover { color: var(--ink); }

/* Story block (reference layout): image left, statement right, quote under the image; evidence cards follow */
.story2 { padding-top: clamp(96px, 13vw, 180px); }
.story2__grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr); column-gap: clamp(32px, 4.5vw, 64px); row-gap: clamp(28px, 3vw, 44px); align-items: center; }
.story2__media { grid-column: 1; grid-row: 1; margin: 0; aspect-ratio: 1.43; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.story2__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story2__media .ui--desk { width: 58%; }
.story2__tag { position: absolute; z-index: 2; left: 16px; bottom: 16px; padding: 8px 12px; border-radius: 6px; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--graphite);
  background: rgba(255, 255, 255, .5); }
.story2__lead { grid-column: 2; grid-row: 1; margin: 0; font: 400 var(--fs-h4)/var(--lh-quote) var(--sans); letter-spacing: var(--ls-h4); color: var(--ink); }
.story2__quote { grid-column: 1; grid-row: 2; margin: 0; max-width: 580px; }
.story2__quote p { margin: 0; font: 400 var(--fs-h5)/var(--lh-lead) var(--sans); letter-spacing: var(--ls-h5); color: var(--ink-2); }
.story2 .prob__grid { margin-top: clamp(56px, 7vw, 96px); }
@media (max-width: 900px) {
  .story2__grid { grid-template-columns: 1fr; }
  .story2__media, .story2__lead, .story2__quote { grid-column: 1; grid-row: auto; }
  .story2__media { aspect-ratio: 4 / 3; }
}
/* .panel lifts its direct spans into flow (position: relative); corner tags and dev markers must stay pinned */
.story2__media.panel > span.story2__tag.glass { position: absolute; left: 16px; bottom: 16px; }
.panel > span.dev-sample.dev-sample--block { position: absolute; top: 12px; left: 12px; margin: 0; }

/* Hero actions: one tidy row on every screen; socials leave the hero on phones (they live in the menu and footer) */
.hero__row { grid-template-columns: minmax(0, 320px) 40px auto 1fr; align-items: center; }
.hero__ctas { flex-wrap: nowrap; }
.hero__more { white-space: nowrap; }
@media (max-width: 900px) {
  .hero { padding-bottom: 24px; }
  .hero__title { margin-bottom: 28px; }
  .hero__row { grid-template-columns: 1fr; gap: 22px; padding-bottom: 0; border-bottom: 0; }
  .hero__lead { font-size: var(--fs-base); }
  .hero__ctas { justify-content: space-between; gap: 16px; }
  .glass-btn { height: 52px; font-size: var(--fs-base); padding: 0 8px 0 22px; }
  .glass-btn i { width: 36px; height: 36px; }
  .hero__social { display: none; }
}
@media (max-width: 360px) { .hero__ctas { flex-wrap: wrap; } }
.glass-btn { white-space: nowrap; }
@media (max-width: 900px) { .hero__ctas .glass-btn { flex: 1 1 auto; justify-content: space-between; max-width: 260px; } }
/* contact: long <select> options must not widen the form column and push the side panel off-screen */
.contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.form > *, .field select, .field input, .field textarea { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* ==================================================================
   Closing statement over a photo (reference: Product Studio closing section).
   Layers, bottom to top: photo → frosted blur strongest at the top, fading out by ~60% →
   Graphite gradient that melts the top into the page and darkens behind the text.
   ================================================================== */
.belief--photo { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(96px, 12vw, 160px);
  min-height: clamp(600px, 92vh, 1040px); display: flex; align-items: center; padding: clamp(200px, 20vw, 300px) 0 clamp(120px, 12vw, 180px); }
.belief__bg { position: absolute; inset: 0; z-index: -3; }
.belief__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; filter: saturate(.92) contrast(1.02); }
.belief__frost { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 20%, rgba(0, 0, 0, .55) 38%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 0%, #000 20%, rgba(0, 0, 0, .55) 38%, transparent 62%); }
.belief--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #0B0B0B 0%, rgba(11, 11, 11, .88) 12%, rgba(11, 11, 11, .45) 34%, rgba(11, 11, 11, .4) 55%, rgba(11, 11, 11, .62) 80%, rgba(11, 11, 11, .78) 100%); }
.belief--photo .belief__in { width: 100%; }
[data-theme="night"] .belief--photo .belief__text { color: rgba(246, 247, 237, .3); }
.belief--photo + .cta-band { margin-top: 0; }
@media (max-width: 900px) {
  .belief--photo { min-height: 560px; padding: 180px 0 96px; }
  .belief__bg img { object-position: 64% 60%; }
}
/* text sits in the upper, frosted part; the bridge stays clear in the lower half */
.belief--photo { align-items: flex-start; min-height: clamp(760px, 112vh, 1180px); padding: clamp(180px, 15vw, 240px) 0 0; }
.belief__bg img { object-position: 58% 100%; }
.belief__frost { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0, 0, 0, .5) 46%, transparent 64%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0, 0, 0, .5) 46%, transparent 64%); }
.belief--photo::after { background: linear-gradient(180deg, #0B0B0B 0%, rgba(11, 11, 11, .9) 14%, rgba(11, 11, 11, .6) 38%, rgba(11, 11, 11, .25) 62%, rgba(11, 11, 11, .2) 82%, rgba(11, 11, 11, .45) 100%); }
@media (max-width: 900px) {
  .belief--photo { min-height: 720px; padding-top: 150px; }
  .belief__bg img { object-position: 64% 100%; }
}
@media (max-width: 900px) { .belief--photo { min-height: 940px; padding-top: 130px; } }
@media (max-width: 380px) { .belief--photo { min-height: 1000px; } }

/* ==================================================================
   Full-bleed carousels: the track runs edge to edge; the first card lines up
   with the page content and the row scrolls off the right edge.
   ================================================================== */
.ins-row--bleed { --edge: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  margin-inline: calc(50% - 50vw); padding-inline: var(--edge); scroll-padding-inline: var(--edge); }
.ins-row--bleed > .ins2 { flex: 0 0 clamp(300px, 27vw, 410px); }
@media (max-width: 900px) { .ins-row--bleed > .ins2 { flex-basis: clamp(280px, 44vw, 380px); } }
@media (max-width: 600px) { .ins-row--bleed > .ins2 { flex-basis: 82vw; } }

/* insight cards: equal heights in a row, artwork always anchored to the bottom */
.ins-row { align-items: stretch; }
.ins2__dek { margin-bottom: 20px; }
.ins2__art { margin-top: auto; }

/* Work page: selected-work slides */
.wsel .sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.ins-row--bleed > .wslide { flex: 0 0 clamp(300px, 62vw, 1040px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.wslide__media { aspect-ratio: 16 / 9; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.wslide__media .ui--desk, .wslide__media .ui--infra { width: 46%; }
.wslide__media .ui--card { width: 50%; }
.wslide__media .ui--icons { width: 30%; }
.wslide__meta { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.wslide__title { font: 400 var(--fs-h4)/var(--lh-h4) var(--sans); letter-spacing: var(--ls-h4); max-width: 28ch; }
.wslide__sum { font-size: var(--fs-base); color: var(--ink-2); max-width: 60ch; }
.wslide:hover .wslide__title { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.wslide .ins__sheet { transition: transform 1s var(--ease); }
.wslide:hover .ins__sheet { transform: translateY(-10px) skewY(14deg); }
@media (max-width: 600px) { .ins-row--bleed > .wslide { flex-basis: 86vw; } .wslide__media { aspect-ratio: 4 / 3; } }

/* ==================================================================
   Icon set: one drawn pointer (up-right) for every link/CTA, chevrons for
   carousel controls. Square caps, mitred joins, slightly heavier than hairline.
   ================================================================== */
.ic-svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: square; stroke-linejoin: miter; }
.ic { display: inline-flex; width: .95em; height: .95em; vertical-align: -.14em; font-style: normal; transition: transform .35s var(--ease); }
.ic .ic-svg { width: 100%; height: 100%; }
a:hover > .ic, a:hover .ic, button:hover > .ic { transform: translate(2px, -2px); }
.car-btn .ic-svg { width: 18px; height: 18px; stroke-width: 1.8; }
.car-btn[data-dir="-1"] .ic-svg { transform: rotate(180deg); }
.acc__go .ic-svg { width: 34px; height: 34px; stroke-width: 1.6; }
.acc__arrow-s .ic-svg { width: .8em; height: .8em; vertical-align: -.05em; }
.statement__text .arr .ic-svg { display: inline-block; width: .62em; height: .62em; vertical-align: .02em; stroke-width: 2.2; }
.go__i .ic-svg, .hdr__ico .ic-svg, .glass-btn .ic-svg, .ins2__more .ic-svg { stroke-width: 2; }
/* list markers: the logo's bar instead of a typed arrow */
/* list pointers: the drawn arrow (same family as the site icons), tinted with the team accent */
.unit__caps li { display: flex; align-items: center; gap: 10px; }
.unit__caps li::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--acc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn .ic { width: 1.1em; height: 1.1em; }
/* hero row no longer needs the decorative arrow column on desktop */
.hero__arrow { visibility: hidden; }



/* ==================================================================
   Mega menus are part of the top bar: when one opens, the bar and the panel
   share one surface, full width, flush under the bar, no gap, border or seam.
   The panel unrolls downward from the bar.
   ================================================================== */
.mm { top: var(--hdr); left: 0; right: 0; border: 0; border-radius: 0; }
.mm > .wrap { max-width: var(--max); padding: 0 var(--gut); }
.mm__grid { padding: 8px 0 40px; }
[data-theme="night"] .hdr.mm-open, [data-theme="night"] .hdr.mm-open.is-scrolled {
  background: rgba(17, 17, 17, .97); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="night"] .mm { background: rgba(17, 17, 17, .97); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(246, 247, 237, .08); box-shadow: 0 28px 48px -28px rgba(0, 0, 0, .65); }

/* Mega menu open state: not full width. The bar and the dropdown become one contained,
   rounded panel spanning from the logo to the "Book a call" button (+ a little air). */
.hdr { --mm-air: 18px; }
[data-theme="night"] .hdr.mm-open, [data-theme="night"] .hdr.mm-open.is-scrolled { background: transparent; }
.hdr__row::before { content: ""; position: absolute; z-index: -1; top: 8px; bottom: 0; left: calc(-1 * var(--mm-air)); right: calc(-1 * var(--mm-air));
  border-radius: 16px 16px 0 0; background: rgba(17, 17, 17, .97); opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.hdr.mm-open .hdr__row::before { opacity: 1; }
.mm { left: calc(max(var(--gut), (100% - var(--max)) / 2 + var(--gut)) - var(--mm-air)); right: calc(max(var(--gut), (100% - var(--max)) / 2 + var(--gut)) - var(--mm-air));
  border-radius: 0 0 16px 16px; }
.mm > .wrap { max-width: none; padding: 0 var(--mm-air); }
[data-theme="night"] .mm { border: 0; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .75); }

/* Work page: the selected-work carousel is part of the hero (same atmosphere, no section title) */
.whero { padding-bottom: clamp(56px, 7vw, 96px); }
.whero .phero__row { align-items: flex-end; }
.whero__ctrl { flex: none; display: flex; }
.whero__row { position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 72px); }
.whero > .dev-sample--block { position: relative; display: table; margin: 24px auto -12px; }
@media (max-width: 900px) { .whero__ctrl { display: none; } }
/* Work hero is the carousel itself: no visible title or intro; controls sit above the row, right-aligned */
.whero { padding-top: calc(var(--hdr) + clamp(32px, 5vw, 64px)); }
.whero__bar { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.whero__row { margin-top: 20px; }
@media (max-width: 900px) { .whero__bar { display: none; } .whero__row { margin-top: 0; } }
/* Mega menu open state, corrected: the bar surface starts at the very top of the window (no gap),
   lines up exactly with the dropdown (both span the content from logo to Book a call + the same air),
   and both are one opaque surface, so the dropdown reads as the bar extending downward. */
.hdr__row::before { top: 0; left: calc(var(--gut) - var(--mm-air)); right: calc(var(--gut) - var(--mm-air)); border-radius: 0; background: #111; }
[data-theme="night"] .mm { background: #111; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8); border-radius: 0 0 16px 16px; }
.mm { top: var(--hdr); }

/* Work page: client quote after the hero, then the selected-work carousel */
.wquote__fig { margin: 0; max-width: 1040px; }
.wquote__q { margin: 0; }
.wquote__q p { margin: 0; font: 400 var(--fs-h3)/var(--lh-quote) var(--sans); letter-spacing: var(--ls-h3); color: var(--ink); }
.wquote__q p::before { content: "\201C"; display: block; height: .5em; margin-bottom: .1em; font-size: 2.2em; line-height: 1; color: var(--signal); }
.wquote__by { display: flex; align-items: center; gap: 14px; margin-top: clamp(28px, 3vw, 40px); }
.wquote__mark { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--night-2, #131313); color: var(--paper); }
.wquote__mark .mark { width: 22px; height: auto; }
.wquote__by > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.wquote__by b { font-weight: 500; font-size: var(--fs-base); }
.wquote__by .mono { font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.wsel { padding-top: clamp(72px, 9vw, 120px); }
.wsel__bar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.wsel > .dev-sample--block { position: relative; display: table; margin: 0 auto 12px; }
@media (max-width: 900px) { .wsel__bar { display: none; } }

/* ---------- services: one engagement path (stage, engagement model, length, output, commercial shape) */
.proc--path .proc__s > p.proc__meta { margin: -4px 0 0; font-size: var(--fs-meta); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink); max-width: none; }
.proc--path .proc__s > p.proc__shape { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--ink-3); max-width: 30ch; }
#how .lede--sm { margin: 0 0 clamp(32px, 4vw, 56px); }
#technology .plat__note { text-align: left; max-width: 72ch; margin-top: 24px; }
#technology .lede--sm { margin-bottom: clamp(28px, 3vw, 40px); }
.tr__note { margin-top: clamp(20px, 2.4vw, 32px); }

/* ---------- industries: one page, a section per industry */
.indx__jump { padding-top: clamp(40px, 5vw, 64px); }
.indx__jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.indx__jump a { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font: 500 var(--fs-sm)/1 var(--sans); transition: background .25s var(--ease); }
.indx__jump a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tint); }
.indx__jump a:hover { background: rgb(128 128 128 / .12); }
.indx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-block: clamp(48px, 6vw, 88px); background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--gut)) 1px no-repeat; scroll-margin-top: calc(var(--hdr) + 16px); }
.indx__intro { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--hdr) + 32px); }
.indx__t { margin: 0; font: 400 var(--fs-h3)/var(--lh-h3) var(--sans); letter-spacing: var(--ls-h3); max-width: 18ch; }
.indx__l { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink-2); max-width: 52ch; }
.indx__k { margin-top: 14px; }
.indx__ch { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.indx__ch li { position: relative; padding-left: 18px; font-size: var(--fs-base); }
.indx__ch li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--tint); }
.indx__uses .label { margin-bottom: 14px; }
.indx__uses .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .indx { grid-template-columns: 1fr; }
  .indx__intro { position: static; }
  .indx__uses .uses { grid-template-columns: 1fr; }
}
.nw { white-space: nowrap; }
.indx__jump + .indx { background: none; }

/* contact form honeypot: hidden from people, left for bots */
.field--hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }