/* Spark Studios — Company Profile 2026 (brand v2)
   Continuous scroll. One Ember thread runs down the whole page (the spark, start to finish).
   Tokens first; nothing below uses a literal colour that is not a brand value or an alpha of one. */

/* ---------- fonts (licensed ABC Diatype from Dinamo, web files; licence terms in fonts/) ---------- */
@font-face { font-family: "Diatype Extended"; src: url("../fonts/ABCDiatypeExtended-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Diatype Extended"; src: url("../fonts/ABCDiatypeExtended-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Diatype Mono"; src: url("../fonts/ABCDiatypeMono-Medium.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }   /* the licensed Mono weight is Medium */
@font-face { font-family: "Diatype Ultra"; src: url("../fonts/ABCDiatypeExtended-Ultra.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Doto Rounded"; src: url("../fonts/Doto_Rounded-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --saadiyat-sand: #F8F6F2;
  --mangrove-ink: #0E1116;
  --gulf-cobalt: #1E3BD6;
  --liwa-ember: #E8501F;
  --corniche-haze: #C8D8F0;
  --noor-violet: #7A3CF0;
  --noor-magenta: #D9358F;

  --surface: var(--saadiyat-sand);
  --text: var(--mangrove-ink);
  --text-muted: #4E535E;
  --text-dim: #8A8E97;
  --line: rgba(14, 17, 22, .12);
  --key: var(--gulf-cobalt);
  --spark: var(--liwa-ember);
  --noor: linear-gradient(90deg, var(--gulf-cobalt), var(--noor-violet), var(--noor-magenta), var(--liwa-ember));

  --f-x: "Diatype Extended", "Helvetica Neue", Arial, sans-serif;
  --f-ultra: "Diatype Ultra", "Diatype Extended", "Helvetica Neue", Arial, sans-serif;   /* brand line accent only: "Sparks" and "Light." in "We bring Sparks to Light." */
  --f-mono: "Diatype Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-num: "Doto Rounded", ui-monospace, monospace;

  /* hierarchy: display only at the three moments (hero, equation, end) */
  --t-display: clamp(3.2rem, 1.2rem + 7.2vw, 8.6rem);
  --t-h2: clamp(2.1rem, 1.2rem + 2.9vw, 4.4rem);
  --t-h3: clamp(1.25rem, 1.05rem + .7vw, 1.7rem);
  --t-lede: clamp(1.15rem, .98rem + .7vw, 1.6rem);
  --t-body: clamp(1.03rem, .98rem + .22vw, 1.17rem);
  --t-small: .9rem;
  --t-label: clamp(.72rem, .69rem + .12vw, .8rem);
  --ls-display: -.045em; --ls-h2: -.035em; --ls-label: .1em;

  --max: 1320px;
  --gutter: clamp(1.1rem, .4rem + 3vw, 3.5rem);
  --header-h: 76px;
  --act-pad: clamp(4rem, 2rem + 5vw, 7.5rem);   /* space above and below each section: about 200px between sections on a laptop */
  --radius-l: 28px; --radius-m: 18px; --pill: 999px;
  --ease: cubic-bezier(.2, .9, .1, 1);

  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.32));
  --glass-blur: blur(18px) saturate(1.8);
  --glass-edge: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.5);
  --glass-drop: 0 18px 40px -12px rgba(30,30,60,.22), 0 2px 6px rgba(30,30,60,.06);

  --z-glow: 0; --z-content: 2; --z-thread: 30; --z-lens: 40; --z-chrome: 50; --z-index: 60;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }            /* page stays put while the index is open */
[data-lenis-prevent] { overscroll-behavior: contain; }
body { margin: 0; overflow-x: clip; background: var(--surface); color: var(--text); font-family: var(--f-x); font-weight: 400; font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, ol, ul, dl, dd, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--key); outline-offset: 3px; }
em { font-style: normal; color: var(--key); }
.thin { font-weight: 400; color: var(--spark); }
/* RULE: wherever "We bring Sparks to Light." appears, set the words "Sparks" and "Light." (capital S and L) in Diatype Ultra (class .ultra). Keep the rest of the line in the surrounding style; the colour is inherited, so both words take the colour of the line. */
.ultra { font-family: var(--f-ultra); font-weight: 900; letter-spacing: -.01em; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: var(--z-content); min-width: 0; }
.act { position: relative; padding-block: var(--act-pad); }

/* ---------- type roles ---------- */
.label { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--spark); line-height: 1.35; font-weight: 400; }
.display { font-weight: 700; font-size: var(--t-display); line-height: .9; letter-spacing: var(--ls-display); }
.h2 { font-weight: 700; font-size: var(--t-h2); line-height: 1; letter-spacing: var(--ls-h2); text-wrap: balance; }
.h3 { font-weight: 700; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; }
.h4 { font-weight: 700; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.25; letter-spacing: -.01em; }
.lede { font-weight: 400; font-size: var(--t-lede); line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.body { font-size: var(--t-body); color: var(--text-muted); max-width: 54ch; }
.small { font-size: var(--t-small); color: var(--text-dim); }
.ln { display: block; white-space: nowrap; }
/* more air above a heading than below; labels sit close */
.label + .h2 { margin-top: .9rem; }
.h2 + .lede, .h2 + .body, .h2 + .roles { margin-top: clamp(1.2rem, 1rem + 1vw, 2rem); }
.lede + .body, .body + .body { margin-top: 1.1rem; }

/* ---------- pills (Cobalt = human, Ember = AI) ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill { display: inline-flex; align-items: center; padding: .55em 1.05em; border-radius: var(--pill); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.pill--human { background: var(--key); } .pill--ai { background: var(--spark); }
.pill--op { background: none; color: var(--text-dim); padding-inline: .2em; }
.spark-sign { display: inline-block; width: 12px; height: 12px; background: var(--spark); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* ---------- glows (brand-kit artwork, one per section) and floating glass ---------- */
.glow { position: absolute; z-index: var(--z-glow); pointer-events: none; user-select: none; opacity: .45; -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 100%); mask: radial-gradient(closest-side, #000 45%, transparent 100%); }
.float { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 24px 30px rgba(30,59,214,.16)); }
.motion .float { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 50% { translate: 0 -14px; rotate: 4deg; } }
/* the same two glass accents (sparkle + glass grid) reused lower down, one per section, parked in empty space
   beside a short headline or under an image: never over content. Not in Capabilities or the case studies. */
.float--essence, .float--mindset, .float--why, .float--exp, .float--lead { right: calc(max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)) + 1%); }
.float--essence { right: auto; left: calc(max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)) + 8px); top: auto; bottom: calc(var(--act-pad) + 9.5rem); width: clamp(54px, 4.6vw, 72px); animation-delay: -2s; } /* the empty margin beside the paragraph */
.mindset__head { position: relative; }
.float--mindset { right: 4% !important; top: auto; bottom: 0; width: clamp(56px, 4.8vw, 84px); animation-delay: -4.5s; } /* in the gap under the heading */
.float--why { top: calc(var(--act-pad) * .7); width: clamp(64px, 6vw, 100px); animation-delay: -1.5s; }
.float--exp { top: calc(var(--act-pad) + 22svh); width: clamp(70px, 6.5vw, 110px); animation-delay: -4s; }
.float--lead { top: calc(var(--act-pad) * .55); width: clamp(64px, 6vw, 100px); animation-delay: -5s; }
@media (max-width: 1100px) { .float--essence, .float--mindset, .float--why, .float--exp, .float--lead { display: none; } }

/* ---------- chrome ---------- */
.chrome { position: fixed; inset: 0 0 auto; z-index: var(--z-chrome); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); pointer-events: none; } /* header runs edge to edge; content stays centred */
.chrome__logo { pointer-events: auto; } .chrome__logo img { height: 44px; width: auto; transition: filter .5s; } /* the Spark logo without its tagline (same width as before, as on the website) */
/* scroll-down cue: bottom-right corner of the opening screen; an ember dot glides down a hairline; gone once the page moves */
.scroll-cue { position: fixed; z-index: var(--z-chrome); right: var(--gutter); bottom: clamp(1.4rem, 1rem + 2svh, 2.6rem); display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--text-muted); transition: opacity .45s var(--ease), translate .45s var(--ease); }
.scroll-cue__label { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-cue__track { position: relative; width: 1px; height: clamp(44px, 6svh, 64px); background: var(--line); overflow: hidden; border-radius: 1px; }
.scroll-cue__dot { position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--spark); animation: cue-drop 1.8s var(--ease) infinite; }
@keyframes cue-drop { 0% { translate: 0 -8px; opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { translate: 0 calc(clamp(44px, 6svh, 64px) + 2px); opacity: 0; } }
.scroll-cue.is-hidden { opacity: 0; translate: 0 10px; pointer-events: none; }
/* back-to-top twin: same corner, the dot climbs the hairline instead */
.scroll-cue--top .scroll-cue__dot { animation-direction: reverse; }
.scroll-cue--top.is-hidden { translate: 0 -10px; }
.scroll-cue:hover { color: var(--text); }
.reduced .scroll-cue__dot { animation: none; top: 50%; }

/* frosted glass behind the header: hidden at the top of the page, fades in as soon as the visitor scrolls */
.chrome::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease);
  background: rgba(248,246,242,.66); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }   /* no border line */
.chrome.is-scrolled::before { opacity: 1; }
.on-ink .chrome__logo img { filter: invert(1) sepia(.06); }
.glasspill { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: var(--pill); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-drop); transition: background .5s; }
.glasspill__btn, .glasspill__cta { height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: var(--pill); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .25s, color .25s; }
.glasspill__btn:hover { background: rgba(255,255,255,.8); }
.glasspill__cta { background: var(--text); color: var(--surface); }
.glasspill__cta:hover { background: var(--key); }
.on-ink .glasspill { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); box-shadow: inset 0 1px 1px rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12); }
.on-ink .glasspill__btn { color: var(--surface); } .on-ink .glasspill__btn:hover { background: rgba(255,255,255,.12); }
.on-ink .glasspill__cta { background: var(--surface); color: var(--text); }

/* ---------- signature: the light thread ---------- */
.thread { position: fixed; z-index: var(--z-thread); left: clamp(10px, calc(var(--gutter) * .45), 26px); /* hugs the left screen edge */ top: calc(var(--header-h) + 24px); bottom: 32px; width: 18px; }
.thread__svg { position: absolute; inset: 0; width: 18px; height: 100%; overflow: visible; }
.thread__track { stroke: var(--line); stroke-width: 1; }
.thread__clear { stroke: var(--spark); stroke-width: 1.5; stroke-linecap: round; } /* one Ember line from first section to last */
.thread__noor { display: none; }
.thread__tip { position: absolute; left: 9px; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--spark), 0 0 14px 5px rgba(232,80,31,.38); transition: box-shadow .4s; }

.thread__nodes { position: absolute; inset: 0; }
.thread__nodes li { position: absolute; left: 0; width: 18px; height: 18px; margin-top: -9px; }
.thread__nodes button { position: relative; width: 18px; height: 18px; border-radius: 50%; }
.thread__nodes button::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--text-dim); transition: box-shadow .3s, background .3s, transform .3s var(--ease); }
.thread__nodes li.is-past button::before { background: var(--spark); box-shadow: none; }

.thread__nodes button:hover::before { transform: scale(1.5); }
.thread__nodes button span { position: absolute; left: 26px; top: 50%; translate: 0 -50%; padding: 4px 9px; border-radius: 8px; background: var(--text); color: var(--surface); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.thread__nodes button:hover span, .thread__nodes button:focus-visible span { opacity: 1; }

/* ---------- index dialog ---------- */
.index { position: fixed; inset: 0; z-index: var(--z-index); display: grid; place-items: center end; padding: var(--gutter); background: rgba(14,17,22,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.index[hidden] { display: none; }
.index__panel { width: min(420px, 100%); max-height: calc(100svh - 2 * var(--gutter)); overflow: auto; overscroll-behavior: contain; padding: 1.2rem 1.4rem; border-radius: var(--radius-l); background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.7)); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: var(--glass-edge), var(--glass-drop); }
.index__list { display: grid; gap: 2px; counter-reset: idx; }
@media (min-width: 640px) { .index__panel { width: min(600px, 100%); } .index__list { display: block; columns: 2; column-gap: .6rem; } .index__list li { break-inside: avoid; margin-bottom: 2px; }  /* reads down the first column, then the second */ }
.index__list a { display: flex; align-items: baseline; gap: 1rem; padding: clamp(.38rem, 1.1svh, .7rem) .8rem; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: clamp(.95rem, .85rem + .4svh, 1.05rem); letter-spacing: -.01em; transition: background .2s; }
.index__list a:hover, .index__list a:focus-visible { background: rgba(14,17,22,.06); }
.index__list a::before { counter-increment: idx; content: counter(idx, decimal-leading-zero); font-family: var(--f-num); font-weight: 600; font-size: .95rem; color: var(--spark); }
.index__close { margin-top: 1rem; height: 40px; padding: 0 18px; border-radius: var(--pill); background: var(--text); color: var(--surface); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- liquid-glass lens ---------- */
.lens-canvas { position: fixed; left: 0; top: 0; z-index: var(--z-lens); pointer-events: none; will-change: transform; } /* a small square that travels with the glass (sized in lens.js) */
.lens-glass { display: none; } /* the glass is drawn entirely in WebGL now (lens.js) */
@media (hover: none) { .lens-glass, .lens-canvas { display: none; } }

/* ================= 01 HERO ================= */
.hero { padding: 0; height: 100svh; }
.hero__stage { position: relative; height: 100svh; overflow: hidden; display: flex; align-items: flex-end; }
.hero__film { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.hero__poster, .hero__film .seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; }
.hero__film .seq { opacity: 0; transition: opacity .6s; } .hero__film.is-ready .seq { opacity: 1; }
/* the film is graded to Sand; its lower edge dissolves into the page so the arm never ends on a hard line */
/* the fade is complete by 89%: the film starts scaled to 1.1, which pushes its last 5% below the clipped stage, and a fade still in progress there showed as a hard line under the wrist */
.hero__film { -webkit-mask: linear-gradient(180deg, #000 56%, rgba(0,0,0,.35) 76%, transparent 89%); mask: linear-gradient(180deg, #000 56%, rgba(0,0,0,.35) 76%, transparent 89%); }
.hero__film::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(248,246,242,0), var(--surface) 80%); }   /* the hand always dissolves into Sand at the hero's edge: no cut line */
.hero__copy { z-index: 3; padding-bottom: clamp(3rem, 2rem + 6svh, 7rem); }
.hero__label { margin-bottom: clamp(1rem, .8rem + 1vw, 1.6rem); }
.hero__title { font-size: clamp(2.2rem, min(.8rem + 3.3vw, 8.2svh), 4.4rem); line-height: .95; }   /* the longer descriptor headline: sized to sit beside the hand */
.hero__title em { white-space: nowrap; }   /* never split "AI-amplified" at its hyphen */
.hero__sub { margin-top: clamp(1.2rem, 1rem + 1vw, 2rem); font-weight: 700; font-size: var(--t-lede); letter-spacing: -.015em; }

/* ================= 02 IDENTITY ================= */
.identity { padding: 0; }
@media (min-width: 901px) { .identity { margin-top: -16svh; } }   /* Who we are rises into the hero's faded foot: a tighter gap after the hero */
/* pinned stage (v1 behaviour): scroll swaps the role word and cross-fades one portrait at a time */
.identity__stage { position: relative; height: 100svh; overflow-x: clip; overflow-y: visible; display: flex; align-items: center; padding-top: var(--header-h); padding-bottom: 4svh; }
.identity__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.identity__hold { display: grid; gap: 0; }
.roles { display: grid; gap: .15em; }
.roles__lead { font-size: var(--t-lede); color: var(--text-muted); }
.roles__stack { display: inline-grid; font-weight: 700; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.035em; color: var(--key); overflow: hidden; padding-block: .04em; }
.rw { grid-area: 1 / 1; will-change: transform, opacity, filter; }
.motion .rw:not(:first-child) { opacity: 0; }
.identity__hold .body { margin-top: clamp(1.2rem, 1rem + 1vw, 1.8rem); }
.identity__hold .pills { margin-top: 1.4rem; }
.roles__list { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-dim); }
.roles__list li { position: relative; padding-bottom: .45rem; transition: color .4s; }
.roles__list b { font-family: var(--f-num); font-weight: 600; letter-spacing: 0; margin-right: .5rem; color: var(--text-dim); transition: color .4s; }
.roles__list li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--spark); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.roles__list li.is-on { color: var(--text); } .roles__list li.is-on b { color: var(--spark); } .roles__list li.is-on::after { transform: scaleX(1); }
.identity__frame { position: relative; justify-self: end; width: min(100%, calc((100svh - var(--header-h) - 120px) * .8)); aspect-ratio: 4 / 5; }
.pf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-l); box-shadow: 0 40px 80px -40px rgba(18,22,74,.35); }
.motion .pf:not(:first-child) { opacity: 0; }
.identity__frame figcaption { position: absolute; left: 0; bottom: -2rem; color: var(--text); }
.float--spark { width: clamp(70px, 7vw, 120px); right: -9%; top: 8%; }
.glow--identity { right: -12%; top: 4%; width: 62%; opacity: .45; }   /* kept inside Who we are: it no longer rises into the pinned hero */

/* ================= 03 ESSENCE ================= */
.essence__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, .5rem + 1.5vw, 2rem); row-gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.essence__head { grid-column: 1 / 8; }
.essence__img { grid-column: 8 / 13; grid-row: 1 / 4; position: relative; }
.essence__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-l); }
.essence__body { grid-column: 2 / 7; }
.quote { grid-column: 1 / 8; font-weight: 700; font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.02em; padding-left: clamp(1.4rem, 1rem + 1vw, 2rem); border-left: 2px solid var(--spark); position: relative; }
.quote .spark-sign { position: absolute; left: -7px; top: -14px; }
.motion .reveal-wipe { clip-path: inset(0 0 100% 0 round var(--radius-l)); }   /* opens from the top edge downward */
.motion [data-rise] { opacity: 0; transform: translateY(32px); }

/* ================= 04 MINDSET ================= */
.mindset__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: start; }
.mindset__visual { position: sticky; top: calc(var(--header-h) + 4svh); height: calc(100svh - var(--header-h) - 8svh); display: flex; align-items: center; }
.mindset__frame { position: relative; width: 100%; height: 100%; max-height: 820px; }
.mindset__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 30%; border-radius: var(--radius-l);
  -webkit-mask: linear-gradient(0deg, transparent 0%, #000 18%); mask: linear-gradient(0deg, transparent 0%, #000 18%); }
.mindset__frame::after { content: ""; position: absolute; inset: auto 8% -6% 8%; height: 30%; background: radial-gradient(closest-side, rgba(122,60,240,.22), rgba(232,80,31,.08) 60%, transparent); filter: blur(20px); z-index: -1; }
.mindset__beats { display: grid; }
.mindset__head { padding-top: min(10svh, 5rem); padding-bottom: 14svh; }
.beat { min-height: 52svh; display: grid; align-content: center; gap: .8rem; padding-block: 4svh; border-top: 1px solid var(--line); }
.beat:last-child { min-height: 36svh; align-content: start; padding-top: 8svh; }
.mindset { padding-bottom: calc(var(--act-pad) * .4); }   /* Capabilities opens with its own pinned stage space */   /* the last value needs no room below it before the next section */
.beat__n { font-family: var(--f-num); font-weight: 600; font-size: 1.4rem; color: var(--spark); }
.beat__t { font-weight: 700; font-size: clamp(1.9rem, 1rem + 2.8vw, 3.8rem); line-height: 1.04; letter-spacing: -.035em; }
.beat .body { margin-top: .8rem; }
.br-m { display: none; }   /* line break used on phones only */
.motion .beat { opacity: .22; transition: opacity .6s; }
.motion .beat.is-on { opacity: 1; }

/* ================= 05 CAPABILITIES (horizontal pan) ================= */
.caps { padding-block: 0; }
/* Five capabilities spell SPARK: wide glass cards pan sideways; the keycap row lights each letter as its card comes into focus */
.caps__stage { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.4rem, 3.4svh, 3rem); padding-block: calc(var(--header-h) + 2svh) 5svh; overflow: hidden; }
.caps__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: clamp(2rem, 4svh, 2.6rem); } /* room under the keys for their labels */
.keys { --kh: clamp(52px, 3.2rem + 1vw, 70px); display: flex; gap: clamp(.4rem, .3rem + .4vw, .7rem); margin-right: clamp(1.5rem, 6vw, 7rem); margin-bottom: calc((var(--t-h2) - var(--kh)) / 2); } /* key centres line up with the middle of "What we do." */
.key { --c: 14,17,22; position: relative; display: grid; place-items: center; width: var(--kh); aspect-ratio: 1; border-radius: 18px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 10px 24px -14px rgba(18,22,74,.35);
  transition: background .45s var(--ease), box-shadow .45s var(--ease), translate .45s var(--ease); }
.key b { font-weight: 700; font-size: clamp(1.4rem, 1rem + .9vw, 2rem); line-height: 1; color: var(--text-dim); transition: color .45s; }
.key small { position: absolute; top: calc(100% + .95rem); left: 50%; translate: -50% 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; color: var(--text-dim); opacity: 0; transition: opacity .3s; }
.key.is-lit b { color: rgb(var(--c)); }                                      /* passed: its letter keeps its colour */
.key.is-on { background: rgb(var(--c)); translate: 0 -6px; box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 18px 30px -14px rgba(var(--c),.7); }
.key.is-on b { color: #fff; }
.key.is-on small, .key:hover small, .key:focus-visible small { opacity: 1; color: var(--text); }
.key:hover { translate: 0 -3px; }
.caps__rail { --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); display: flex; align-items: center; gap: clamp(1rem, .5rem + 1.6vw, 2rem); padding-inline: var(--edge); width: max-content; will-change: transform; }
.cap { --c: 14,17,22; flex: none; width: clamp(600px, 50vw, 820px); height: clamp(340px, 52svh, 470px); display: grid; grid-template-columns: 44% minmax(0, 1fr);
  border-radius: var(--radius-l); overflow: hidden; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-drop); opacity: .5; scale: .95; transition: opacity .6s var(--ease), scale .6s var(--ease), box-shadow .6s var(--ease); }
.cap.is-on { opacity: 1; scale: 1; box-shadow: var(--glass-edge), 0 34px 70px -34px rgba(var(--c),.55), 0 0 0 1.5px rgba(var(--c),.35); }
.cap__img { margin: 0; height: 100%; overflow: hidden; background: var(--surface); }
.cap__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }   /* high-res SPARK keycap renders fill the column; the key sits above centre */
.cap__txt { padding: clamp(1.2rem, .9rem + 1.2vw, 2.2rem); display: grid; align-content: center; gap: clamp(.5rem, 1.2svh, .9rem); min-width: 0; }
.cap__top { display: flex; align-items: center; gap: .8rem; }
.cap__k { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgb(var(--c)); color: #fff; font-weight: 700; font-size: 1.5rem; line-height: 1; box-shadow: 0 10px 20px -10px rgba(var(--c),.8); }
.cap__top .label { color: rgb(var(--c)); }
.cap .body { max-width: 40ch; }
.cap__tags { columns: 2; column-gap: 1.2rem; margin-top: .3rem; padding-top: .8rem; border-top: 1px solid var(--line); } /* flowing columns: each stacks tightly, no shared row heights */
.cap__tags li { position: relative; padding-left: .95rem; margin-bottom: .35rem; break-inside: avoid; font-size: var(--t-small); line-height: 1.35; color: var(--text-muted); }
.cap__tags li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--c)); }
.caps__end { align-self: center; width: clamp(260px, 26vw, 400px); flex: none; font-weight: 700; font-size: var(--t-h2); line-height: 1.02; letter-spacing: var(--ls-h2); padding-left: 1rem; }
.reduced .cap { opacity: 1; scale: 1; }
.reduced .caps__rail { width: auto; flex-wrap: wrap; }   /* no pinning without motion: the cards wrap instead of panning */

/* ================= 06 METHODOLOGY (stacking glass cards) ================= */
.method { overflow: clip; }
.method__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: start; }
/* the hold fills the viewport height under the header; the hand fills whatever the title leaves, so it is big but never reaches the cards */
.method__hold { position: sticky; top: calc(var(--header-h) + 8svh); height: calc(100svh - var(--header-h) - 11svh); display: flex; flex-direction: column; }
.method__visual { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; margin-top: clamp(1.2rem, 3svh, 2.4rem); }
.method__visual img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: 12% 100%;
  -webkit-mask: linear-gradient(180deg, #000 68%, transparent 100%); mask: linear-gradient(180deg, #000 68%, transparent 100%); } /* the wrist dissolves into Sand instead of ending on a cut */
.method__glow { position: absolute; inset: -6% 10% 20% -30%; background: radial-gradient(closest-side, rgba(122,60,240,.3), rgba(217,53,143,.14) 45%, rgba(232,80,31,.06) 62%, rgba(248,246,242,0)); filter: blur(10px); }
.stack { display: grid; gap: 4svh; padding-bottom: 8svh; }
.gcard { position: sticky; top: calc(var(--header-h) + 10svh + var(--i, 0) * 16px); min-height: clamp(220px, 34svh, 340px); display: grid; align-content: space-between; gap: 2rem; padding: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); border-radius: var(--radius-l); background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58)); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--glass-edge), 0 30px 60px -30px rgba(18,22,74,.3); transform-origin: 50% 0; will-change: transform; }
.gcard .label { color: var(--key); font-size: calc(var(--t-label) * 1.1); }
.gcard .label b { font-family: var(--f-num); font-weight: 600; letter-spacing: 0; color: var(--spark); margin-right: .6rem; font-size: 1.15em; }
.gcard__t { font-weight: 700; font-size: clamp(1.35rem, 1rem + 1.3vw, 2.2rem); line-height: 1.14; letter-spacing: -.025em; }
.glow--method { left: -20%; top: 20%; width: 60%; opacity: .35; }
.float--grid { width: clamp(60px, 5.5vw, 96px); right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); top: 12%; animation-delay: -3s; } /* tied to the content column, not the screen edge */

/* ================= 07 WHY (kinetic lines) ================= */
.why { overflow: clip; }
.why__head { display: grid; justify-items: start; }
.why__head .h2 { max-width: 24ch; }   /* the longer v3 line wraps clear of the floating glass */
.why__lines { margin-block: clamp(3rem, 2rem + 4vw, 6rem) 0; display: grid; gap: .1em; }
.why { padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }   /* The rule follows straight on: its own stage already opens with space above the label */
.why__line { font-weight: 700; font-size: clamp(2.8rem, .8rem + 7.2vw, 8.4rem); line-height: 1; letter-spacing: -.05em; white-space: nowrap; text-align: center; will-change: transform; }
/* "Thinking" = solid brand Cobalt. */
.why__line .outline { color: var(--key); }
/* "differently." = thin light-grey outline, no fill; soft bands of the brand gradient strip drift through it like smoke (pure CSS).
   Each line has its own colour order, speed and direction, so the three never show the same colours at the same moment.
   Every layer moves exactly one tile per loop (200% tile → 200%, 300% tile → 150%), so nothing ever jumps. */
.why__line em { color: transparent; -webkit-text-stroke: .8px #C4C6CC; -webkit-background-clip: text; background-clip: text; padding: .04em .04em; margin: -.04em 0; display: inline-block; will-change: transform; contain: paint; } /* own layer: the moving band repaints only these words */
.why.is-off .why__line em { animation-play-state: paused; }   /* no gradient work while the section is off screen */
.why__line:nth-child(1) em { background:
    linear-gradient(90deg, transparent 0%, rgba(51,70,222,0) 8%, rgba(51,70,222,1) 24%, rgba(106,60,235,1) 34%, rgba(217,71,156,1) 45%, rgba(240,80,110,1) 53%, rgba(238,90,60,1) 62%, rgba(238,90,60,0) 80%, transparent 100%) 0 0 / 200% 100% repeat-x,
    linear-gradient(90deg, transparent 0%, rgba(238,90,60,0) 26%, rgba(238,90,60,.85) 40%, rgba(217,71,156,.8) 51%, rgba(51,70,222,.8) 60%, rgba(51,70,222,0) 76%, transparent 100%) 0 0 / 300% 100% repeat-x;
  -webkit-background-clip: text; background-clip: text; animation: smoke-r 9s linear infinite; }
.why__line:nth-child(2) em { background:
    linear-gradient(90deg, transparent 0%, rgba(232,80,31,0) 8%, rgba(232,80,31,1) 24%, rgba(238,90,60,1) 34%, rgba(240,80,110,1) 45%, rgba(217,71,156,1) 53%, rgba(106,60,235,1) 62%, rgba(106,60,235,0) 80%, transparent 100%) 0 0 / 200% 100% repeat-x,
    linear-gradient(90deg, transparent 0%, rgba(106,60,235,0) 26%, rgba(106,60,235,.85) 40%, rgba(240,80,110,.8) 51%, rgba(232,80,31,.8) 60%, rgba(232,80,31,0) 76%, transparent 100%) 0 0 / 300% 100% repeat-x;
  -webkit-background-clip: text; background-clip: text; animation: smoke-l 12.5s linear infinite -4s; }
.why__line:nth-child(3) em { background:
    linear-gradient(90deg, transparent 0%, rgba(240,80,110,0) 8%, rgba(240,80,110,1) 24%, rgba(106,60,235,1) 34%, rgba(51,70,222,1) 45%, rgba(106,60,235,1) 53%, rgba(217,71,156,1) 62%, rgba(217,71,156,0) 80%, transparent 100%) 0 0 / 200% 100% repeat-x,
    linear-gradient(90deg, transparent 0%, rgba(217,71,156,0) 26%, rgba(217,71,156,.85) 40%, rgba(51,70,222,.8) 51%, rgba(240,80,110,.8) 60%, rgba(240,80,110,0) 76%, transparent 100%) 0 0 / 300% 100% repeat-x;
  -webkit-background-clip: text; background-clip: text; animation: smoke-r 15.5s linear infinite -10s; }
@keyframes smoke-r { to { background-position: -200% 0, 150% 0; } }
@keyframes smoke-l { to { background-position: 200% 0, -150% 0; } }
@media (prefers-reduced-motion: reduce) { .why__line em { animation: none !important; background-position: -100% 0, 75% 0 !important; } }
.why__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: start; }
.why__list { display: grid; border-top: 1px solid var(--line); }
.why__list li { display: flex; align-items: baseline; gap: 1.2rem; padding-block: 1.05rem; border-bottom: 1px solid var(--line); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.02em; }
.why__list b { font-family: var(--f-num); font-weight: 600; font-size: 1rem; color: var(--spark); }

/* ================= 08 THE EQUATION (peak) ================= */
.equation { padding: 0; }
/* desktop with motion: The rule's stage covers the next section while it plays, then dissolves to reveal it in place */
@media (min-width: 901px) {
  .motion .equation { position: relative; z-index: 4; }
  .motion .equation__stage { background: var(--surface); }
  .motion .industries { margin-top: -100svh; }   /* sits under The rule, revealed as it dissolves */
}
.equation__stage { position: relative; height: 100svh; overflow: hidden; }
/* the film is sized by JS into the space under the word band (top/left/width/height), so words never sit on the visual */
.equation__film { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 50%; overflow: hidden; will-change: transform; }
.equation__film::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 55%, var(--surface) 100%); pointer-events: none; opacity: var(--vig, 1); }
.equation__poster, .equation__film .seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.equation__film .seq { opacity: 0; transition: opacity .6s; } .equation__film.is-ready .seq { opacity: 1; }
.equation__film.is-ready .equation__poster { opacity: 0; transition: opacity .6s; }
.equation__label { position: absolute; z-index: 3; left: 0; right: 0; width: max-content; margin-inline: auto; top: calc(var(--header-h) + 3svh); white-space: nowrap; }
.equation__label { font-size: clamp(1rem, .85rem + .45vw, 1.3rem); letter-spacing: .14em; }   /* "The rule" carries the section, so it reads larger than a standard label */
.eq-word { position: absolute; z-index: 3; top: calc(var(--header-h) + 3svh); display: grid; gap: .5rem; }
.eq-word--human { left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.eq-word--ai { right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); text-align: right; justify-items: end; }
/* big two-line words that also scale with height, so short screens keep room for the hands */
.eq-big { font-weight: 700; font-size: clamp(2.2rem, min(.8rem + 3.6vw, 7.4svh), 4rem); line-height: .94; letter-spacing: -.045em; max-width: none; white-space: nowrap; }   /* each side reads on one line, so the two words stay level as they travel */
.eq-word--human .eq-big { color: var(--key); }
.eq-word--ai .eq-big { color: var(--spark); }
.eq-word .label { color: var(--text-muted); }
.eq-result { position: absolute; z-index: 3; left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); top: 0; bottom: 0; align-content: center; display: grid; gap: clamp(.6rem, 1.6svh, 1rem); max-width: min(40%, calc(min(100vw, var(--max)) * .44)); }
.eq-result__title { font-size: clamp(2.8rem, .9rem + 4.6vw, 5.4rem); }
.eq-result__line { font-weight: 700; font-size: var(--t-h3); letter-spacing: -.015em; color: var(--spark); }
.eq-copy { margin-top: clamp(.4rem, 2svh, 1.4rem); max-width: 44ch; }
.eq-lede { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); bottom: clamp(2rem, 7svh, 5rem); font-weight: 700; text-align: right; max-width: 18ch; }
.motion .eq-result, .motion .eq-copy, .motion .eq-lede { opacity: 0; }
.glow--equation { z-index: 0; right: -6%; top: 0; width: 62%; opacity: .4; }

@media (min-width: 901px) { .equation__film::after { display: none; } } /* full-bleed: the arms run off the edges, no vignette */

/* ================= 09 INDUSTRIES ================= */
.industries__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.industries__head { position: sticky; top: calc(var(--header-h) + 10svh); }
.tile { position: relative; border-radius: var(--radius-l); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-drop); transform-style: preserve-3d; transition: transform .5s var(--ease); }
.tile--primary { overflow: hidden; }
.tile--primary img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.tile__txt { padding: clamp(1.3rem, 1rem + 1vw, 2rem); display: grid; gap: .7rem; }
.tiles { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, .5rem + 1vw, 1.4rem); margin-top: clamp(.8rem, .5rem + 1vw, 1.4rem); }
.tiles .tile { min-height: 170px; padding: clamp(1rem, .8rem + 1vw, 1.4rem); overflow-wrap: anywhere; display: grid; align-content: space-between; gap: 1.4rem; }
.tile__icon { width: 44px; height: 44px; }

/* ================= 10–14 PROOF (Ink ground) ================= */
.proof { position: relative; } /* Sand ground, same as the rest of the page */
.experience__grid { display: grid; justify-items: start; }
.experience .h2 { max-width: 16ch; }
.experience .body { margin-top: clamp(1.4rem, 1rem + 1vw, 2rem); max-width: 62ch; }
.case { border-top: 1px solid var(--line); }
/* version-one case-study format: text column + visual column (logo, fixed-format gallery); sides alternate */
.case__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: start; }
.case__text { display: grid; gap: 1.1rem; min-width: 0; }
.case__head { margin-bottom: .6rem; }
.case--flip .case__visual { order: -1; }                  /* Dell: images on the left */
.case__visual { display: grid; gap: 1.5rem; min-width: 0; }
.case__logo { height: clamp(40px, 2.4vw + 18px, 56px); width: auto; justify-self: start; } /* client logos as supplied (brand-kit-v2/logos), trimmed */
.case .lede { color: var(--key); margin-top: .8rem; }
.case__dl { margin-top: .6rem; }
.deliv { display: grid; border-top: 1px solid var(--line); }
.deliv li { padding-block: .8rem; border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-body); }
.deliv strong { color: var(--text); font-weight: 700; }
.case__close { font-weight: 700; font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.015em; margin-top: .8rem; }
.gallery { display: grid; gap: .75rem; }
.media { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-m); background: rgba(14,17,22,.04); min-width: 0; }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.media:hover img { transform: scale(1.04); }
.gallery--ncc { grid-template-columns: 1fr 1fr; }
.gallery--ncc .g-main { grid-column: 1 / -1; aspect-ratio: 4673600 / 2667000; }
.gallery--ncc .g-sm { aspect-ratio: 2286000 / 1536700; }
.gallery--dell { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery--dell .g-wide { grid-column: 1 / -1; aspect-ratio: 4673600 / 1905000; }
.gallery--dell .g-press { aspect-ratio: 1490133 / 1841500; }
.gallery--kf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery--kf .g-wide { grid-column: 1 / -1; aspect-ratio: 5283200 / 2971800; }
.gallery--kf .g-thumb { aspect-ratio: 1689100 / 952500; }
.motion .reveal-clip { clip-path: inset(100% 0 0 0); }      /* images wipe up into view on scroll (main.js) */
.impact { display: grid; gap: 1.2rem; padding: clamp(1.3rem, 1rem + 1vw, 2rem); border-radius: var(--radius-l); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-drop); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.kpis--4 { grid-template-columns: repeat(2, 1fr); }
.kpi { display: grid; align-content: start; gap: .4rem; }
.kpi__val { font-family: var(--f-num); font-weight: 600; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem); line-height: 1; color: var(--spark); font-variant-numeric: tabular-nums; }
.kpi__ast { font-family: var(--f-x); font-weight: 700; font-size: .6em; vertical-align: super; }
.kpi__lbl { font-size: var(--t-small); color: var(--text-muted); line-height: 1.4; }
.partners { border-top: 0; }   /* no divider: Clients follows Who we serve. When Work + case studies come back, the divider belongs on .case (see above), not here */
.partners .h2 { max-width: 20ch; }
.logos { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }   /* eight partners: a full 4 × 2 grid */
.logos li { display: grid; place-items: center; aspect-ratio: 16 / 6; padding: 5% 18%; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform .5s var(--ease); } /* partner logos shown in their own colours, as supplied */
.logos li:hover img { transform: scale(1.06); }

/* ================= 15 LEADERSHIP (draggable glass divider) ================= */
.leadership__head { margin-bottom: clamp(2.4rem, 1.6rem + 2vw, 4rem); }
.leadership .h2 { max-width: 18ch; }
.split { --split: 58%; position: relative; height: auto; aspect-ratio: 2.97;   /* just tall enough for the wide leaders image (leaders-v8: 56% wide, bottom-anchored at 94% height): no empty band above the group */ border-radius: var(--radius-l); overflow: hidden; touch-action: pan-y; }
.split__img, .split__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.split__img { background: var(--surface); }
.split__img img { inset: auto auto 0 2%; width: 56%; height: 94%; object-fit: contain; object-position: left bottom; }   /* the cut-out group stands on the Sand, all three people and the star in the clear glass */
.split__frost { position: absolute; inset: 0 0 0 var(--split); background: rgba(248,246,242,.62); -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3); box-shadow: inset 1px 0 0 rgba(255,255,255,.9); }
.split__txt { position: absolute; top: 0; bottom: 0; right: 0; width: 40%; display: grid; align-content: center; gap: 1rem; padding: clamp(1.4rem, 1rem + 2vw, 3rem); }
.split__txt .body { color: var(--text-muted); font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); }

/* ================= 16 END ================= */
.end { overflow: clip; padding-top: calc(var(--act-pad) * .6); padding-bottom: calc(var(--act-pad) * .6); }   /* follows the tighter Leadership panel */
.end__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: center; }
/* the Spark tile is suspended in the air: it hovers and sways while its shadow on the ground breathes in step */
.end__tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; width: min(100%, 50svh); justify-self: center; }   /* capped by height so the closing screen and footer fit one view */
.end__icon { position: relative; z-index: 1; width: 62%; height: auto; filter: drop-shadow(0 18px 30px rgba(30,59,214,.10)); }
.end__shadow { position: absolute; left: 50%; top: 84%; width: 54%; height: 8%; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(96,80,200,.24), rgba(217,53,143,.10) 55%, rgba(232,80,31,0)); filter: blur(8px); }
.motion .end__icon { animation: tile-hover 6s ease-in-out infinite; }
.motion .end__shadow { animation: tile-shadow 6s ease-in-out infinite; }
@keyframes tile-hover { 0%, 100% { translate: 0 0; rotate: -1.6deg; } 50% { translate: 0 -22px; rotate: 1.6deg; } }
@keyframes tile-shadow { 0%, 100% { scale: 1; opacity: .95; } 50% { scale: .76; opacity: .55; } }
.end__neither { margin-top: 1.1rem; font-weight: 700; font-size: var(--t-h2); letter-spacing: var(--ls-h2); line-height: 1; }
.end__neither em { color: var(--spark); }
.end__neither em::after { content: "."; display: none; }
.end__copy .lede { margin-top: clamp(1.4rem, 1rem + 1vw, 2rem); }
.cta { display: inline-flex; align-items: center; gap: .8rem; margin-top: 2rem; height: 56px; padding: 0 28px; border-radius: var(--pill); background: var(--text); color: var(--surface); text-decoration: none; font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; transition: background .3s, transform .4s var(--ease); }
.cta::after { content: ""; width: 10px; height: 10px; background: var(--spark); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.cta:hover { background: var(--key); transform: translateY(-2px); }
.end__info { margin-top: clamp(2.4rem, 2rem + 2vw, 3.6rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }   /* "Spark" needs little room; Identity and Web / Mail get more */
.end__info dd { margin-top: .5rem; font-size: var(--t-small); color: var(--text-muted); }
.nowrap { white-space: nowrap; }   /* keeps "AI-Amplified" from splitting at its hyphen */
.sep-star { color: var(--spark); margin-inline: .15em; }   /* the ✦ separator in the end card */
.end__info a { text-decoration: none; } .end__info a:hover { color: var(--key); }
.end__info .tel { display: inline-flex; align-items: center; gap: .5rem; }
.end__social { display: flex; gap: 8px; }   /* the website's glass social tiles: LinkedIn, Instagram, Facebook */
.end__social a { display: block; border-radius: 12px; transition: translate .4s cubic-bezier(.3, 1.6, .5, 1), scale .4s cubic-bezier(.3, 1.6, .5, 1); }
.end__social a:hover, .end__social a:focus-visible { translate: 0 -3px; scale: 1.06; }
.end__social img { width: 40px; height: 40px; display: block; }
@media (prefers-reduced-motion: reduce) { .end__social a { transition: none; } }
.tel-icon { width: 1.1em; height: 1.1em; flex: none; color: var(--spark); }   /* solid call icon: tapping the number dials it */
.glow--end { left: 50%; top: 0; width: 70%; translate: -50% 0; opacity: .4; }

/* ================= responsive ================= */
@media (max-height: 820px) and (min-width: 901px) {
  :root { --t-display: clamp(3rem, 1rem + 6vw, 7rem); --act-pad: clamp(3.5rem, 2rem + 5vw, 6rem); }
  .eq-result__title { font-size: clamp(2.4rem, .6rem + 3.8vw, 5.4rem); }
  /* short, wide screens: the card keeps to the height left under the title and keys */
  .cap { height: clamp(300px, 56svh, 420px); width: clamp(600px, 48vw, 760px); }
  .cap__k { width: 38px; height: 38px; font-size: 1.25rem; border-radius: 12px; }
  .cap .body { font-size: .95rem; }
  .split { height: auto; aspect-ratio: 2.97; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .thread { display: none; }
}
@media (max-width: 900px) {
  .why__line { font-size: clamp(2.2rem, 12vw, 4.6rem); line-height: .98; white-space: normal; }   /* phones and tablets: "Fluent in" over the keyword, both fit the screen */
  .why__line em { display: block; width: fit-content; margin-inline: auto; }
  .why__lines { gap: .45em; }
  .br-m { display: inline; }
  .chrome__logo img { height: 36px; }
  :root { --header-h: 64px; }
  .thread { display: none; }
  .glasspill__btn { display: none; }
  .hero__stage { height: 100svh; }
  .hero__poster, .hero__film .seq { object-position: 66% 40%; }
  .hero__film::after { background: linear-gradient(0deg, var(--surface) 0%, rgba(248,246,242,.75) 34%, rgba(248,246,242,0) 60%); }
  .ln { white-space: normal; }
  .identity__grid, .mindset__grid, .method__grid, .why__grid, .industries__grid, .case__grid, .end__grid { grid-template-columns: minmax(0, 1fr); }
  .method__hold, .industries__head { position: static; }
  .method__hold { height: auto; } .method__visual { flex: none; height: min(110vw, 520px); }
  .identity__stage { height: auto; overflow: visible; display: block; padding-block: calc(var(--act-pad) * .35) calc(var(--act-pad) * .5); }
  .identity { margin-top: -5svh; }   /* tighter gap after the hero on phones */
  .identity__frame { justify-self: stretch; width: 100%; margin-top: 2rem; margin-bottom: 2.4rem; }
  /* Who we are, phones/tablets with motion: the role line, the 01–04 list and the portrait pin together (main.js builds .id-pin) */
  .id-pin { display: flex; flex-direction: column; row-gap: 14px; padding-top: 14px; margin-top: .4rem; }
  .id-pin .roles__list { margin-top: 0; }
  .id-pin .identity__frame { margin: 0; align-self: center; aspect-ratio: auto; }
  .id-pin .float--spark { display: none; }
  .id-pin .identity__frame figcaption { left: 12px; bottom: 12px; z-index: 2; padding: .5rem .8rem; border-radius: 999px; color: var(--text);
    background: rgba(248,246,242,.72); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }   /* the role label sits on the portrait */
  .id-pin + .body { margin-top: 1.6rem; }
  .float--spark { right: 2%; top: -4%; }
  .essence__head, .essence__img, .essence__body, .quote { grid-column: 1 / -1; grid-row: auto; }
  .mindset__visual { position: relative; top: 0; height: auto; }
  .mindset__frame { height: auto; } .mindset__frame img { height: auto; aspect-ratio: 4 / 5; }
  .mindset__head { padding-block: 2rem 2rem; }
  .beat, .beat:last-child { min-height: 0; padding-block: 2rem; }
  .mindset { padding-bottom: var(--act-pad); }
  .caps__stage { min-height: 0; padding-block: var(--act-pad); }
  .caps__rail { width: auto; flex-direction: column; align-items: stretch; padding-inline: var(--gutter); }
  .keys { display: none; }
  .cap { width: 100%; height: auto; grid-template-columns: 1fr; opacity: 1; scale: 1; }
  .cap__img { aspect-ratio: 1; height: auto; }
  .cap__img img { object-position: 50% 42%; }   /* square crop on phones: the key and its glow both in frame */
  .cap__tags { columns: 1; }
  .caps__end { width: 100%; padding-left: 0; }
  /* phones/tablets with motion: the five cards stack as you scroll, like How we work (main.js eases the one beneath back) */
  .motion .caps__stage { overflow: clip; }   /* hidden would make the stage the sticky scroller */
  .motion .cap { position: sticky; top: calc(var(--header-h) + 1rem + var(--i, 0) * 12px); transform-origin: 50% 0; will-change: transform;
    background: linear-gradient(180deg, rgba(252,251,249,.97), rgba(248,246,242,.94));
    box-shadow: var(--glass-edge), 0 0 0 1px rgba(var(--c), .24), 0 -16px 34px -20px rgba(18,22,74,.3), var(--glass-drop); }   /* every card keeps a visible edge when it lands on the one beneath */
  .motion .caps__stage > .caps__end { padding-inline: var(--gutter); margin-top: .4rem; }
  .gcard { top: calc(var(--header-h) + 2rem + var(--i, 0) * 12px); min-height: 220px; }
  .equation__stage { height: auto; overflow: visible; display: grid; gap: 1.6rem; padding-block: var(--act-pad); }
  .equation__film { position: relative; inset: auto; aspect-ratio: 16 / 10; order: 2; }
  .equation__film::after { background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 50%, var(--surface) 100%); }
  .equation__label, .eq-word, .eq-result, .eq-lede { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; translate: none; max-width: none; padding-inline: var(--gutter); text-align: left; justify-items: start; }
  .equation__label { width: auto; margin-inline: 0; }
  .equation__label, .eq-word, .eq-result, .eq-copy, .eq-lede, .equation__film { transform: none !important; opacity: 1 !important; }
  .equation__film { box-shadow: none !important; border-radius: 0 !important; }
  .equation__label { order: 0; } .eq-word--human { order: 1; } .eq-word--ai { order: 3; } .eq-result { order: 4; } .eq-lede { order: 6; }
  .eq-big { white-space: normal; font-size: clamp(2rem, 1rem + 6vw, 3rem); }
  .motion .eq-result, .motion .eq-copy, .motion .eq-lede { opacity: 1; }
  .tiles { grid-column: 1; }
  .case--flip .case__visual { order: 0; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }   /* phones: 2 × 4, no half-empty row */
  .logos li { aspect-ratio: 4 / 3; padding: 8% 7%; }
  .split { height: auto; aspect-ratio: auto; display: grid; }
  .split__img { position: relative; aspect-ratio: 1.74; height: auto; }
  .split__img img { inset: auto 0 0 0; width: 100%; height: 100%; object-position: center bottom; }
  .split__frost { display: none; }
  .split__txt { position: relative; width: auto; background: rgba(255,255,255,.6); }
  .end__info { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .glasspill__cta { padding: 0 14px; font-size: 11px; }
  .kpis, .kpis--4 { grid-template-columns: 1fr 1fr; }
}

/* ================= reduced motion: everything visible, nothing travels ================= */
.reduced .reveal-wipe, .reduced .reveal-clip { clip-path: none; }
.reduced [data-rise], .reduced .eq-result, .reduced .eq-copy, .reduced .eq-lede { opacity: 1; transform: none; }
.reduced .beat { opacity: 1; }
.reduced .float { animation: none; }
@media (min-width: 901px) {
  .reduced .equation__stage { height: auto; min-height: 100svh; }
}