/* Times Bridge, drama version: style.css (Builder P1). Tokens per SPEC C.2, layout per B, motion per F.
   Night-ink text over six fixed sky layers and one fixed canvas; nothing boxed, nothing centred, no hairlines. */
:root {
  --ink: #0b0f17;
  --night: #0e1424;
  --night-ink: #f2f1ee;
  --night-muted: #b4b9c6;
  --night-dim: #969dae;
  --duo: linear-gradient(160deg, #1d2d5c, #93a8de);   /* v6.14: the blue duotone under every photograph (the image rides on it in luminosity) */   /* v6.8: the bridge caption; v6.9 one step lighter: 4.5:1 was borderline at the dawn (p 0.85) */
  --paper: #f2f1ee;
  --amber: #eea91e;
  --amber-hover: #f6bd45;
  --cable: #dfe8ff; --lamp: #ffd27a; --crane-lamp: #ffb347; --concrete: #c9ccd4;
  --water-night: #060a14; --water-dawn: #1d2742;
  --sky0: #05070d, #0a1020 55%, #111a30 86%, #141f36;
  --sky1: #070b16, #0f1830 55%, #182540 86%, #1b2947;
  --sky2: #0a1226, #15203a 55%, #1f2d4c 86%, #233252;
  --sky3: #0f1832, #1f2a46 55%, #2b3650 86%, #313c58;
  --sky4: #16223f, #2c3650 55%, #3a4258 86%, #4a4c5a;
  --sky5: #1b2a52, #3d4762 55%, #8a6a5a 86%, #e9a66a;
  --scrim: #15203a;
  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-name:      clamp(4.5rem, 2rem + 9vw, 10rem);
  --fs-head:      clamp(2.25rem, 1.3rem + 1.9vw, 2.75rem);
  --fs-figure:    clamp(3rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-ledger:    clamp(2.5rem, 1.3rem + 3vw, 3.5rem);
  --fs-statement: clamp(1.375rem, 1rem + 0.9vw, 1.75rem);
  --fs-lead:      clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  --fs-body:      clamp(1rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-plate:     clamp(1.75rem, 1.2rem + 1.1vw, 2.25rem);   /* v6.5: the four success-story names, between head and statement */
  --fs-small:     clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-mono:      clamp(0.6875rem, 0.66rem + 0.15vw, 0.75rem);
  --margin: clamp(1rem, 2.2vw, 2rem); --gutter: clamp(0.75rem, 1.4vw, 1.5rem);
  --ease-reveal: cubic-bezier(0.2, 0.7, 0.1, 1); --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
  --t-hover: 160ms; --t-ui: 240ms; --t-panel: 320ms; --t-reveal: 700ms;
  --scrim-bg: linear-gradient(180deg, transparent, color-mix(in srgb, var(--scrim) 72%, transparent) 18%, color-mix(in srgb, var(--scrim) 72%, transparent) 82%, transparent);
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { background: #05070d; color: var(--night-ink); font: 400 var(--fs-body)/1.5 var(--font); font-optical-sizing: auto; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped, html.menu-open { overflow: hidden; }
body { margin: 0; min-width: 320px; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img, video, canvas { display: block; max-width: 100%; height: auto; }
b { font-weight: 500; }
button { font: inherit; color: inherit; border: 0; border-radius: 0; padding: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.cta { text-decoration-color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
[tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--amber); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font: 400 var(--fs-mono)/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.small { font-size: var(--fs-small); line-height: 1.45; }
/* type roles (v6.4): one family, four voices. Headings carry weight (600, tight, display size); statements and quotations are light (300) and
   large; figures are light and huge; terms are 600 at reading size; body stays 400. Nothing is 'the same, only smaller'. */
.term { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
h2 { font-size: var(--fs-head); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }
h3 { font-size: var(--fs-statement); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.skip { position: fixed; top: var(--margin); left: var(--margin); z-index: 50; padding: 12px 16px; background: var(--night); color: var(--night-ink); font-size: var(--fs-small); transform: translateY(-300%); }
.skip:focus { transform: none; }

/* the grid (B): 12 columns, margins and gutters from the tokens */
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--margin); align-content: start; }

/* sky (C.3): six fixed layers with identical stops, crossfaded by opacity only */
.sky i { position: fixed; inset: 0; z-index: -2; opacity: 0; will-change: opacity; pointer-events: none; }
.sky i[data-k="0"] { background: linear-gradient(180deg, var(--sky0)); opacity: 1; }
.sky i[data-k="1"] { background: linear-gradient(180deg, var(--sky1)); }
.sky i[data-k="2"] { background: linear-gradient(180deg, var(--sky2)); }
.sky i[data-k="3"] { background: linear-gradient(180deg, var(--sky3)); }
.sky i[data-k="4"] { background: linear-gradient(180deg, var(--sky4)); }
.sky i[data-k="5"] { background: linear-gradient(180deg, var(--sky5)); }
html.reduced .sky i, html.no-gl .sky i { opacity: 0; }
html.reduced .sky i[data-k="3"], html.no-gl .sky i[data-k="3"] { opacity: 1; }
html.reduced, html.no-gl { --scrim: #1f2a46; }
@media (prefers-reduced-motion: reduce) {
  .sky i[data-k] { opacity: 0; }
  .sky i[data-k="3"] { opacity: 1; }
  :root { --scrim: #1f2a46; }
}

/* stage (E.1, F.4, G.3): the canvas fades in after ready; the poster is set by main.js only when needed */
.stage { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; z-index: -1; pointer-events: none; }
.stage canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--ease-ui); }
.stage.is-ready canvas { opacity: 1; }
.poster { position: absolute; inset: 0; background: 50% 62% / cover no-repeat; opacity: 0; transition: opacity 300ms var(--ease-ui); }
.poster.is-on { opacity: 1; }
.poster.is-off { opacity: 0; transition-duration: 600ms; }

/* fixed chrome: top bar, menu button, counter */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 32px; padding: var(--margin); pointer-events: none; }
.top > * { pointer-events: auto; }
.mark { display: block; width: 36px; height: 36px; text-decoration: none; }
.mark svg { display: block; width: 36px; height: 36px; }
.topnav { display: none; margin-left: auto; gap: 28px; font-size: var(--fs-small); }
/* C.5(b) for the top bar: the plate tiles (cols 10–12) scroll under the top links at ≥ 1024; the links get a soft night corner only while a picture is under them (main.js sets html.top-on-picture) */
.top { isolation: isolate; }
.top::before { content: ""; position: absolute; inset: 0 0 -12px 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--night) 92%, transparent), color-mix(in srgb, var(--night) 92%, transparent) 70%, transparent); opacity: 0; transition: opacity 200ms var(--ease-ui); pointer-events: none; }   /* v6.15: a strip behind the whole header while a picture passes under it (the old corner band behind the links alone painted over the static Connect button) */
html.top-on-picture .top::before { opacity: 1; }
.menu-btn, .menu__close { width: 44px; height: 44px; background: rgb(14 20 36 / .72); color: var(--night-ink); display: grid; place-content: center; gap: 4px; }
.menu-btn { margin-left: auto; }
.top__cta { margin-left: auto; padding: 12px 18px; background: var(--amber); color: var(--ink); font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.top__cta + .menu-btn { margin-left: 0; }
@media (max-width: 767px) { .top__cta { padding: 10px 14px; } .top { gap: 10px; } }
/* v6.4: the first crossing takes a moment to compile; the hero poster stands in at once and this line says so until the scene is live */
.loading { position: fixed; right: var(--margin); bottom: max(var(--margin), 4vh); z-index: 21; margin: 0; color: var(--night-muted); display: flex; align-items: center; gap: 12px; transition: opacity 400ms var(--ease-ui); }
.loading i { display: block; width: 44px; height: 2px; background: color-mix(in srgb, var(--night-ink) 20%, transparent); overflow: hidden; position: relative; }
.loading i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--amber); animation: loading-sweep 1.1s ease-in-out infinite; }
@keyframes loading-sweep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
html.scene-ready .loading, html.no-gl .loading { opacity: 0; pointer-events: none; }
html.scene-ready .bridge-cap { transition-delay: 300ms; }
html:not(.scene-ready):not(.no-gl) .bridge-cap { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .loading i::after { animation: none; width: 100%; } }
.menu-btn i, .menu__close i { display: block; width: 16px; height: 2px; background: currentColor; transition: transform var(--t-hover) var(--ease-ui); }
.menu__close { position: absolute; top: var(--margin); right: var(--margin); }
.menu__close i { grid-area: 1 / 1; }
.menu__close i:first-child { transform: rotate(45deg); }
.menu__close i:last-child { transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 30; background: rgb(14 20 36 / .96); padding: 18vh var(--margin) 0; visibility: hidden; opacity: 0; transition: opacity 200ms var(--ease-ui), visibility 0s linear 200ms; }
.menu.is-open { visibility: visible; opacity: 1; transition: opacity var(--t-panel) var(--ease-ui); }
.menu a { display: block; width: max-content; max-width: 100%; margin-bottom: 0.3em; font-size: var(--fs-head); letter-spacing: -0.03em; line-height: 1.1; opacity: 0; transform: translateY(14px); }
.menu.is-open a { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-reveal) calc(var(--i) * 40ms), transform var(--t-reveal) var(--ease-reveal) calc(var(--i) * 40ms); }
html.reduced .menu, html.reduced .menu a { transition: none; }
.counter { position: fixed; left: var(--margin); bottom: max(var(--margin), 4vh); z-index: 20; display: flex; align-items: center; gap: 20px; font: 400 var(--fs-mono)/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; transition: color 300ms var(--ease-ui); }
html.is-dawn .counter { color: var(--ink); }
/* C.5(b): the counter is the one fixed element that crosses photographs (the film, the case tiles, the Group's pictures); the gate flagged it there and no camera move can help, so it carries its own ground only while a picture is under it, a soft night corner (92 %, photographs are brighter than any sky) that fades at its top and right; never on the dawn band */
.counter::before { content: ""; position: absolute; z-index: -1; top: -14px; right: -32px; bottom: calc(-1 * max(var(--margin), 4vh)); left: calc(-1 * var(--margin)); background: linear-gradient(90deg, color-mix(in srgb, var(--night) 92%, transparent), color-mix(in srgb, var(--night) 92%, transparent) calc(100% - 32px), transparent); -webkit-mask-image: linear-gradient(0deg, #000, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(0deg, #000, #000 calc(100% - 14px), transparent); opacity: 0; transition: opacity 200ms var(--ease-ui); pointer-events: none; }
html.counter-on-picture .counter::before { opacity: 1; }
html.is-dawn .counter::before { opacity: 0; }
.counter__num { white-space: nowrap; }
/* v6: the crossing's name, fixed bottom-right in mono, crossfaded by main.js as the journey moves on */
.bridge-cap { position: fixed; right: var(--margin); bottom: max(var(--margin), 4vh); z-index: 20; margin: 0; text-align: right; max-width: 60vw; color: var(--night-dim); transition: color 300ms var(--ease-ui); }   /* v6.8: greyer, bridge and city only */
.bridge-cap span { display: inline-block; transition: opacity var(--t-ui) var(--ease-ui); }
.bridge-cap { isolation: isolate; }
.bridge-cap::before { content: ""; position: absolute; z-index: -1; top: -14px; left: -32px; bottom: calc(-1 * max(var(--margin), 4vh)); right: calc(-1 * var(--margin)); background: linear-gradient(270deg, color-mix(in srgb, var(--night) 92%, transparent), color-mix(in srgb, var(--night) 92%, transparent) calc(100% - 32px), transparent); -webkit-mask-image: linear-gradient(0deg, #000, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(0deg, #000, #000 calc(100% - 14px), transparent); opacity: 0; transition: opacity 200ms var(--ease-ui); pointer-events: none; }
html.cap-on-picture .bridge-cap::before { opacity: 1; }
html.is-dawn .bridge-cap::before { opacity: 0; }
@media (max-width: 767px) { .bridge-cap::before { left: calc(-1 * var(--margin)); right: -32px; background: linear-gradient(90deg, color-mix(in srgb, var(--night) 92%, transparent), color-mix(in srgb, var(--night) 92%, transparent) calc(100% - 32px), transparent); } }
html.is-dawn .bridge-cap { color: var(--ink); }
html.cap-off .bridge-cap { opacity: 0; transition: opacity var(--t-ui) var(--ease-ui); pointer-events: none; }
@media (max-width: 767px) { .bridge-cap { bottom: calc(max(var(--margin), 4vh) + 22px); right: auto; left: var(--margin); text-align: left; max-width: none; white-space: nowrap; } }
.counter__clip { display: inline-block; position: relative; width: 2ch; height: 1.4em; overflow: hidden; vertical-align: top; text-align: center; }
.counter__clip b { position: absolute; top: 0; left: 0; width: 100%; font-weight: 400; }
.counter__nxt { transform: translateY(100%); }
.counter__name { transition: opacity var(--t-ui) var(--ease-ui); }
.counter__arrows { display: flex; gap: 4px; margin-left: -8px; }
.counter__arrows button { width: 32px; height: 32px; font: 400 16px/1 var(--font); opacity: 0.6; transition: opacity var(--t-hover); }
@media (min-width: 1024px) { .topnav { display: flex; margin-left: auto; } .top__cta { margin-left: 0; } .menu-btn { margin-left: 0; } }
@media (max-width: 767px) { .counter__name, .counter__arrows { display: none; } }
@media (hover: hover) and (pointer: fine) {
  a { transition: text-underline-offset var(--t-hover), text-decoration-color var(--t-hover), color var(--t-hover); }
  a:hover { text-underline-offset: 0.08em; text-decoration-color: currentColor; }
  .cta:hover { color: var(--amber); text-decoration-color: var(--amber); }
  .team__name a { transition: color var(--t-hover); }
  .team__card:hover .team__name a { color: var(--amber); }
  .menu-btn:hover i:first-child { transform: translateY(-1px); }
  .menu-btn:hover i:last-child { transform: translateY(1px); }
  .counter__arrows button:hover { opacity: 1; }
  .logos a:hover .mono { text-underline-offset: 0.08em; text-decoration-color: currentColor; }
}

/* reveals (F.2): added by main.js (html.js) so the page reads completely without it */
html.js:not(.reduced) [data-reveal], html.js:not(.reduced) [data-stagger] > * { opacity: 0; transform: translateY(14px); }
html.js:not(.reduced) [data-reveal].is-in, html.js:not(.reduced) [data-stagger].is-in > * { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-reveal), transform var(--t-reveal) var(--ease-reveal); transition-delay: calc(var(--i, 0) * 60ms); }
html.js:not(.reduced) [data-in] { opacity: 0; }
html.js:not(.reduced) [data-in].is-in { opacity: 1; transition: opacity 500ms var(--ease-reveal); }
html.js.reduced [data-reveal], html.js.reduced [data-stagger] > *, html.js.reduced [data-in] { opacity: 0; }
html.js.reduced [data-reveal].is-in, html.js.reduced [data-stagger].is-in > *, html.js.reduced [data-in].is-in { opacity: 1; transition: opacity 200ms linear; }

/* the scrim (C.5): phones on the named blocks; every text block on the poster path */
.scrim { position: relative; isolation: isolate; }
@media (max-width: 1023px) { .scrim::before { content: ""; position: absolute; inset: -48px calc(-1 * var(--margin)); z-index: -1; background: var(--scrim-bg); pointer-events: none; } }   /* v6: tablets too; the lit bridges are brighter behind the plates than the dark construction site was */
.plate__body.scrim::before { content: ""; position: absolute; inset: -40px calc(-1 * var(--gutter)) -32px; z-index: -1; background: var(--scrim-bg); pointer-events: none; }   /* v6.1: the four plates now span the width, so their text crosses Brooklyn's lit stone at every width */
@media (max-width: 767px) { .scrim-phone::before { content: ""; position: absolute; inset: -48px calc(-1 * var(--margin)); z-index: -1; background: var(--scrim-bg); pointer-events: none; } .scrim-phone { position: relative; isolation: isolate; } }   /* v6: on phones the bridges stand mid-screen behind the dense text blocks too, under a soft night band */
/* C.5(c) also under html.reduced: with prefers-reduced-motion the finished bridge stands still at the p = 1 camera under every section's text (G.2), the same situation as the poster path, so every text block over the canvas carries the scrim there too */
html.no-gl :is(.name, .hero__a, .hero__b, .india__text, .film figcaption, .market > *, .cases > h2, .cases__note, .plate__body, .logos, .group > h2, .group__s, .compare-fig figcaption, .photo figcaption, .team, .team__quote, .india__thesis, .contact__in), html.reduced :is(.name, .hero__a, .hero__b, .india__text, .film figcaption, .market > *, .cases > h2, .cases__note, .plate__body, .logos, .group > h2, .group__s, .compare-fig figcaption, .photo figcaption, .team, .team__quote, .india__thesis, .contact__in) { position: relative; isolation: isolate; }
html.no-gl :is(.name, .hero__a, .hero__b, .india__text, .film figcaption, .market > *, .cases > h2, .cases__note, .plate__body, .logos, .group > h2, .group__s, .compare-fig figcaption, .photo figcaption, .team, .team__quote, .india__thesis, .contact__in)::before, html.reduced :is(.name, .hero__a, .hero__b, .india__text, .film figcaption, .market > *, .cases > h2, .cases__note, .plate__body, .logos, .group > h2, .group__s, .compare-fig figcaption, .photo figcaption, .team, .team__quote, .india__thesis, .contact__in)::before { content: ""; position: absolute; inset: -48px calc(-1 * var(--margin)); z-index: -1; background: var(--scrim-bg); pointer-events: none; }
html.no-gl .contact__in.contact__in, html.reduced .contact__in.contact__in { position: sticky; }   /* the doubled class outranks the :is() scrim rule above (0,2,2), which would otherwise turn the sticky closing block into position: relative */

/* 01 hero (B.1, revised v5.1): one text column on the left (the name, then the two statements, cols 1–5) so the finished,
   lit bridge stands in the right 56 % of the screen from the first frame; a 40svh clear stage below the fold, over which the
   first scroll dissolves the bridge into the engineer's drawing (scene.js HERO) */
.hero { min-height: 100svh; grid-template-rows: 14svh auto 40px auto 24px auto minmax(10svh, 1fr); padding-bottom: 40svh; }
.name { grid-column: 1 / 8; grid-row: 2; margin-top: -0.1em; font-size: var(--fs-name); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; }
.name span { display: block; }
.hero__a { grid-row: 4; grid-column: 1 / 6; font-size: var(--fs-statement); font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; max-width: 26ch; }
.hero__b { grid-row: 6; grid-column: 1 / 6; max-width: 34ch; color: var(--night-muted); }
.hero__group { max-width: none; white-space: nowrap; font-family: "Times New Roman", Times, "Nimbus Roman", serif; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-ink); }   /* v6.6: the Group's own face, as on its corporate marks */

/* 02 the firm (B.2) */

/* 03 India now (B.3): the film sticky, the year its clock, the ledger beside it */
.india { padding-block: 12vh 60svh; }
.india__thesis { grid-column: 1 / 9; margin-bottom: 48px; font-size: var(--fs-statement); font-weight: 300; letter-spacing: -0.015em; line-height: 1.2; max-width: 34ch; }   /* v6.17: the claim, then the figures */
.india__h { grid-column: 1 / 9; margin-bottom: 56px; }   /* v6.4: the heading first, then the film beside the ledger */
.film { grid-column: 1 / 5; position: sticky; top: 12vh; align-self: start; }
.film video { width: 100%; aspect-ratio: 1; object-fit: cover; }
.film__year { display: block; margin-top: 20px; font: 400 var(--fs-head)/1 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.india__text { align-self: start; }
.film figcaption .mono { display: block; margin-top: 10px; max-width: 30ch; }
.india__text { grid-column: 5 / 9; }
.ledger { margin-top: 48px; }
.ledger li { display: grid; grid-template-columns: 4ch minmax(0, 1fr); column-gap: var(--gutter); align-items: baseline; font-size: var(--fs-ledger); }
.ledger li + li { margin-top: 36px; }
.ledger b { text-align: right; font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ledger__hi b { color: var(--amber); font-weight: 400; }   /* v6.17: the AI line leads the ledger, in amber */
.ledger span { font-size: var(--fs-body); line-height: 1.5; letter-spacing: 0; max-width: 30ch; }

/* 04 go to market (B.4): term over one line, air between, no numerals */
.market { padding-block: 12vh 60svh; }
.market > h2 { grid-column: 1 / 5; }
.market__s { grid-column: 5 / 11; font-size: var(--fs-statement); font-weight: 300; letter-spacing: -0.015em; line-height: 1.2; max-width: 28ch; }
.moves { grid-column: 1 / 9; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 40px var(--gutter); margin-top: 96px; }
.moves dt, .platforms dt dt { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.moves dd, .platforms dd dd { margin-top: 8px; max-width: 34ch; color: var(--night-muted); }
.market__p { grid-column: 1 / 7; margin-top: 96px; font-size: var(--fs-lead); letter-spacing: -0.01em; line-height: 1.3; }
.market__cta { margin-top: 24px; }
.market__h3 { grid-column: 1 / 9; margin-top: 112px; }
.platforms { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 40px; }
.platforms > div { grid-column: span 4; }
.platforms dd + dd { margin-top: 16px; }

/* 05 success stories (B.5): four plates, the eleven logos */
.cases { padding-block: 12vh 60svh; }
.cases > h2 { grid-column: 1 / 7; }
.cases__note { grid-column: 7 / 13; align-self: end; font-size: var(--fs-lead); font-weight: 300; letter-spacing: -0.01em; line-height: 1.3; max-width: 30ch; }
.plate { grid-column: span 6; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; margin-top: 88px; }   /* v6.1: four compact plates, two to a row, the company name first */
.plate:nth-of-type(2n) { grid-column: 7 / 13; }
.plate__body { grid-column: 1 / 5; }
.plate__pic { grid-column: 5 / 7; width: 100%; max-width: 220px; justify-self: end; }
.plate__pic { background: var(--duo); overflow: hidden; }
.plate__pic img { display: block; width: 100%; aspect-ratio: 460 / 259; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(1.05); mix-blend-mode: luminosity; }
.plate__body .term { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.plate__body blockquote { margin-top: 14px; }
.plate__body blockquote p { font-size: var(--fs-body); font-weight: 300; letter-spacing: 0; line-height: 1.45; max-width: 34ch; }
.plate__body .mono { margin-top: 12px; }
.plate__body .mono + p { margin-top: 18px; max-width: 40ch; font-size: var(--fs-small); line-height: 1.5; color: var(--night-muted); }
.plate__body p:last-child { margin-top: 12px; font-size: var(--fs-small); }
/* the eleven logos are dark navy drawings (#050F32 SVGs, #121c30 PNG) on transparency; on night they must read as night-ink, so they are turned white here */
.logos img { filter: brightness(0) invert(0.95); }
/* v6.1: the portfolio on its own full-bleed night band right under the section's note, logos larger and at full strength, so the partners read before the four stories */
.logos__h { grid-column: 1 / 13; margin-top: 96px; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.logos { grid-column: 1 / 13; position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: 36px 56px; margin-top: 24px; padding: 40px 0; }
.logos::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--margin)); z-index: -1; background: color-mix(in srgb, var(--night) 90%, transparent); }   /* the band bleeds to the viewport edges through the section's padding; .cases clips it so it never widens the page */
.cases { overflow-x: clip; }
.logos img { height: 28px; width: auto; opacity: 0.95; }
.logos a { display: block; text-decoration: none; }
.logos a { cursor: pointer; }
.logos a:hover img { opacity: 1; filter: brightness(0) invert(1); }
.logos a:focus-visible { outline: 2px solid #f4f4f1; outline-offset: 8px; border-radius: 2px; }
.logos a .mono { display: block; margin-top: 10px; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }

/* 06 the Group (B.6): the slider sticky beside the six entries, then the two photographs */
.group { padding-block: 12vh 60svh; }
.group > h2 { grid-column: 1 / 5; }
.group__s { grid-column: 5 / 11; margin-top: 0; font-size: var(--fs-statement); font-weight: 300; letter-spacing: -0.015em; line-height: 1.2; max-width: 30ch; }
.compare-col { grid-column: 1 / 7; }   /* a column as tall as the entries' row, so the sticky figure inside it is bounded by the row (Chrome bounds sticky grid items by the container, not the grid area) */
.compare-fig { margin-top: 96px; }
.compare-fig figcaption { margin-top: 16px; }
.compare__cap { display: block; }
.compare__hint { display: block; margin-top: 4px; font-size: var(--fs-small); line-height: 1.45; color: var(--night-muted); }
.compare { position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; -webkit-user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__then { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__tag { position: absolute; top: 16px; pointer-events: none; }
.compare__tag--then { left: 16px; }
.compare__tag--now { right: 16px; }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--night-ink); pointer-events: none; }
.compare__grip { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgb(14 20 36 / .72); color: var(--night-ink); display: grid; place-content: center; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; }
.compare:has(.compare__range:focus-visible) { outline: 2px solid var(--amber); outline-offset: 3px; }
/* v6.4: the Group's brands, one row per category, every mark on the same widescreen tile (16:9); a row longer than the page scrolls sideways */
.brands { grid-column: 1 / 13; margin-top: 88px; display: grid; row-gap: 28px; }
.brands > li { display: grid; gap: 12px; min-width: 0; }
.brands__cat { display: block; font: 400 var(--fs-mono)/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--night-muted); }
.brands__scroll { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); scroll-padding-inline: var(--margin); }   /* snap positions respect the page margin: a row at rest starts at the margin, not at the first tile */
.brands__scroll::-webkit-scrollbar { display: none; }
.brands__row { display: grid; grid-auto-flow: column; grid-auto-columns: 148px; gap: 8px; }
.brands__row > li { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--night-ink) 10%, transparent); scroll-snap-align: start; }   /* v6.5: every mark in white on a dark tile (Satyan) */
.brands__row img { position: absolute; inset: 0; margin: auto; width: calc(88% * var(--m, 1)); height: calc(60% * var(--m, 1)); object-fit: contain; }   /* --m: per-mark factor set inline for the few that run large */   /* v6.9: the wide wordmarks (TOI, ET, Healthworld) fill the tile; square marks are held by the height */   /* out of flow: a tall mark (RCB, ETtech) cannot stretch its tile */
.brands__word { font: 600 0.9rem/1 var(--font); letter-spacing: -0.03em; color: var(--night-ink); text-decoration: none; }
.brands__row > li > a { position: absolute; inset: 0; display: grid; place-items: center; }   /* v6.14: every tile links out */
.brands__row > li { transition: background var(--t-hover) var(--ease-ui), box-shadow var(--t-hover) var(--ease-ui), transform var(--t-hover) var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .brands__row > li:hover { background: color-mix(in srgb, var(--night-ink) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--night-ink) 30%, transparent); transform: translateY(-2px); } }
.brands__row > li > a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 767px) { .brands { margin-top: 56px; row-gap: 24px; } .brands__row { grid-auto-columns: calc((100% - 16px) / 3); gap: 8px; } }
.photo { margin-top: 96px; }   /* v6.1: a third of the width each, captions beside the bridge, not two half-screen slabs */
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo figcaption { margin-top: 16px; }
.photo .mono, .photo .small { display: block; }
.photo .small { margin-top: 6px; color: var(--night-muted); }

/* 07 leadership (B.7) */
.lead { padding-block: 12vh 60svh; }
.lead > h2 { grid-column: 1 / 7; }
.team { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); margin-top: 48px; }   /* v6.21: five cards across the page (v6.16 four) */
.team__card { min-width: 0; }
.team__pic { aspect-ratio: 1; overflow: hidden; background: var(--duo); }
.team__pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(1.05); mix-blend-mode: luminosity; }
.team__name { margin-top: 14px; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.team__pic a { display: block; height: 100%; text-decoration: none; }
.team__name a { color: inherit; text-decoration: none; }
.team__role { margin-top: 4px; color: var(--night-muted); }
.team__quote { grid-column: 1 / 10; margin-top: 72px; }
.team__quote p { font-size: var(--fs-statement); font-weight: 300; letter-spacing: -0.015em; line-height: 1.25; max-width: 38ch; }
.team__quote footer { margin-top: 18px; color: var(--night-muted); }

/* 08 contact (B.8): the closing line held while the closure happens; the footer on solid night */
.contact { min-height: 160svh; }
.contact__in { grid-column: 1 / 13; align-self: start; position: sticky; top: 26vh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.contact__s { grid-column: 1 / 9; font-size: var(--fs-statement); font-weight: 300; letter-spacing: -0.015em; line-height: 1.2; max-width: 30ch; }
.contact__cta { grid-column: 1 / 9; margin-top: 32px; font-size: var(--fs-statement); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.foot { position: relative; background: var(--night); padding: 56px var(--margin) calc(max(var(--margin), 4vh) + 40px); font-size: var(--fs-small); line-height: 1.4; }
.foot__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.foot__cols > * { grid-column: span 4; }
.foot p + p { margin-top: 4px; }
.foot .mono { margin-bottom: 12px; }
.foot nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--gutter); align-content: start; }
.foot nav .mono { grid-column: 1 / -1; margin-bottom: 8px; }
.foot nav p + p { margin-top: 0; }
.foot__legal { margin-top: 40px; }

/* tablets, 768 to 1023 */
@media (min-width: 768px) and (max-width: 1023px) {
  .team { grid-column: 1 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .hero__a, .hero__b { grid-column: 1 / 7; }
  .film { grid-column: 1 / 6; }
  .india__text { grid-column: 6 / 13; }
  .market > h2 { grid-column: 1 / 13; }
  .market__s { grid-column: 1 / 10; margin-top: 24px; }
  .moves { grid-column: 1 / 13; }
  .market__p { grid-column: 1 / 9; }
  .market__h3 { grid-column: 1 / 13; }
  .cases > h2 { grid-column: 1 / 13; }
  .cases__note { grid-column: 1 / 9; margin-top: 24px; }
  .plate { grid-column: 1 / 13; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 72px; }
  .plate:nth-of-type(2n) { grid-column: 1 / 13; }
  .plate__body { grid-column: 1 / 9; }
  .plate__pic { grid-column: 9 / 13; }
  .group > h2, .group__s { grid-column: 1 / 11; }
  .compare-col { grid-column: 1 / 7; }
  .photo--pm { grid-column: 6 / 11; }
  .contact__s, .contact__cta { grid-column: 1 / 11; }
}

/* phones, to 767 (B, 390 column): one column in source order */
@media (max-width: 767px) {
  .g > h2 { grid-column: 1 / -1; }   /* v6.8: after the base 1/5 rules */
  .india__thesis { max-width: none; margin-bottom: 40px; }
  .team { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .team__card { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .team__card .team__pic { grid-row: 1 / 3; }
  .team__name { margin-top: 0; }
  .plate__pic { order: -1; }   /* v6.8: picture first on phones too, so it is not read as the next story's */
  .brands { position: relative; isolation: isolate; }   /* v6.9: a night band behind the wall; Tower Bridge behind the tiles was distracting (Satyan) */
  .brands::before { content: ""; position: absolute; inset: -32px calc(-1 * var(--margin)); z-index: -1; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--night) 94%, transparent) 5%, color-mix(in srgb, var(--night) 94%, transparent) 95%, transparent); pointer-events: none; }
  .plate__body { margin-top: 16px; }
  .hero { display: block; min-height: 160svh; padding-top: 14svh; padding-bottom: 12svh; }   /* the text ends at ≈ 73svh; the lit bridge stands clear below it before the dissolve (HERO.fadePhone) */
  .name { margin-top: 0; }
  .hero__a { margin-top: 32px; font-size: var(--fs-lead); max-width: 30ch; }
  .hero__b { margin-top: 20px; color: var(--night-ink); }   /* v6.8: right under the statement (Satyan: the Group line sat too far from the rest) */
  .hero__group { font-size: 0.875rem; letter-spacing: 0.12em; }   /* 30 caps on one line at 390 */   /* opens the second screen (top ≈ 101svh at 844): at scroll 0 it no longer sits on the fixed caption and counter */   /* below the first screen: the first statement ends at ≈ 55svh and the lit pylon stands under it, clear (crown 59 %, deck 88 %) */
  .india__thesis, .india__h, .film, .india__text, .market > *, .cases > *, .plate__pic, .plate__body, .group > *, .photo, .lead > *, .contact__in, .contact__s, .contact__cta, .foot__cols > * { grid-column: 1 / -1; }
  .india { padding-block: 12vh 80svh; }
  .film { position: static; }
  .india__h { margin-bottom: 32px; }
  .india__text { margin-top: 48px; }
  .ledger { margin-top: 32px; }
  .ledger li + li { margin-top: 28px; }
  .market, .cases, .group { padding-block: 12vh 80svh; }
  .market__s { margin-top: 24px; }
  .moves { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 32px; margin-top: 64px; }
  .market__p { margin-top: 64px; }
  .market__h3 { margin-top: 80px; }
  .platforms { display: block; margin-top: 32px; }
  .platforms > div + div { margin-top: 40px; }
  .cases__note { margin-top: 24px; }
  .plate, .plate:nth-of-type(2n) { grid-column: 1 / -1; grid-template-columns: 1fr; margin-top: 64px; }
  .plate__pic { grid-column: 1 / -1; width: 60%; max-width: none; justify-self: start; margin-top: 20px; }
  .plate__body { grid-column: 1 / -1; }
  .logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px var(--gutter); margin-top: 72px; padding: 32px 0; }
  .logos img { height: 22px; }
  .group__s { margin-top: 24px; }
  .compare-fig { margin-top: 64px; }
  .photo { margin-top: 56px; width: 72%; }
  .lead { padding-block: 12vh 80svh; }
  .contact__in { top: 22vh; }
  .contact { min-height: 260svh; }   /* the stacked footer is ~780 px at 390: with 160svh it covered the deck by p 0.96; 260svh keeps the closure and the pulse under the closing line */
  .foot__cols > * + * { margin-top: 40px; }
  .foot nav { grid-template-columns: 1fr; }
}

/* v6.7: desktop layouts, after the base rules they override */
@media (min-width: 1024px) {   /* v6.7: four story columns, picture on top; one block for the Group */
  .cases > h2 { grid-column: 1 / 13; }
  .plate { grid-column: span 3; grid-template-columns: minmax(0, 1fr); margin-top: 64px; }
  .plate:nth-of-type(2n) { grid-column: span 3; }
  .plate__pic { grid-column: 1; order: -1; max-width: none; justify-self: stretch; }
  .plate__pic img { aspect-ratio: 16 / 9; }
  .plate__body { grid-column: 1; margin-top: 18px; }
  .plate__body.scrim::before { inset: -12px calc(-0.5 * var(--gutter)) -24px; }
  .group { grid-template-rows: max-content 1fr auto; }   /* the slider spans rows 1–2; row 1 is the heading's height, so the statement sits right under it */
  .group > h2 { grid-column: 1 / 7; grid-row: 1; }
  .group__s { grid-column: 1 / 7; grid-row: 2; align-self: start; margin-top: 24px; max-width: 30ch; }
  .compare-col { grid-column: 8 / 13; grid-row: 1 / 3; }
  .compare-fig { margin-top: 0; }
  .brands { grid-row: 3; margin-top: 80px; row-gap: 14px; }
  .brands > li { grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 0 var(--gutter); }
  .brands__scroll { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .brands__row { grid-auto-columns: 124px; }
}