/* Service and industry subpages. Base tokens and shared parts come from site.css. */

/* Hero: shorter than the homepage's, same photograph treatment */
.hero.sub{min-height:min(84vh,880px);min-height:min(84svh,880px)}
.hero.sub .intro{padding-top:132px}
.hero.sub h1{font-size:clamp(2.4rem,4.6vw,4.5rem);max-width:15em}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:28px;font-size:.75rem;color:rgb(255 255 255 / .78)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-current]{color:#fff}
.lockup{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:24px}
.lockup .logo{height:clamp(22px,2.2vw,30px);width:auto;fill:currentColor}
.lockup .mono{color:rgb(255 255 255 / .82)}

/* What's included: a ruled list */
.offer{padding-block:clamp(56px,7vw,104px)}
.offer h2{font-size:clamp(1.75rem,2.4vw,2.25rem);margin-bottom:clamp(28px,3vw,40px)}
.offer-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.offer-list li{display:grid;grid-template-columns:4rem minmax(0,5fr) minmax(0,7fr);gap:8px 24px;padding:24px 0 28px;border-bottom:1px solid var(--rule)}
.offer-list .num{color:var(--accent-ink);padding-top:6px}
.offer-list h3{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.25}
.offer-list p{color:var(--ink-2);max-width:40em}
.offer-list .go{grid-column:3;justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding-block:10px}
.offer-list .go:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:.5em}
.arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}

/* In the field: three photos from real installations, the first one wider */
.field{padding-bottom:clamp(56px,7vw,104px)}
.field h2{font:500 .8125rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
.field ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:12px}
.field li{height:clamp(240px,26vw,420px);background:#1c1a1b}
.field img,.field video{display:block;width:100%;height:100%;object-fit:cover}
.field li{position:relative}
.field.flip ul{grid-template-columns:1fr 1fr 1.6fr}
/* Four clips: two rows, wide and narrow, then narrow and wide. */
.field ul:has(> li:nth-child(4)){grid-template-columns:repeat(13,1fr)}
.field ul:has(> li:nth-child(4)) > li{grid-column:span 5}
.field ul:has(> li:nth-child(4)) > li:is(:nth-child(1),:nth-child(4)){grid-column:span 8}

/* Grouped lists (recovery planning, data capabilities): ruled columns */
.pillars{padding-block:clamp(56px,7vw,104px)}
.pillars-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;margin-bottom:clamp(28px,3vw,40px)}
.pillars h2{font-size:clamp(1.75rem,2.4vw,2.25rem)}
.pillars-head p{color:var(--ink-2);max-width:36em;font-size:1.0625rem}
.pillars-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:0 24px;border-top:1px solid var(--ink)}
.pillars-grid>div{padding:20px 0 8px}
.pillars h3{font:500 .8125rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
.pillars ul{list-style:none;margin:0;padding:0}
.pillars li{padding:10px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);line-height:1.45}
.pillars-img{display:block;max-width:1040px;margin-inline:auto}
/* Infographic as a full-screen backdrop behind the section's heading (Data page). The ::after shade
   darkens only the heading's corner, so the orange gradient behind the infographic shows elsewhere. */
.pillars-hero{position:relative;display:flex;align-items:flex-end;min-height:100vh;min-height:100svh;overflow:hidden;color:#fff;
  /* The accent orange rises from the bottom of the section, behind the infographic, and fades out toward the top */
  background:linear-gradient(to top,rgb(255 107 44 / .3),rgb(255 107 44 / .08) 55%,transparent 85%),#151314}
.ph-img{will-change:transform;position:absolute;inset:clamp(24px,4vw,64px) var(--gutter);width:calc(100% - 2 * var(--gutter));height:calc(100% - 2 * clamp(24px,4vw,64px));object-fit:contain;object-position:right center}
.pillars-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to right,rgb(21 19 20 / .94) 0%,rgb(21 19 20 / .88) 38%,rgb(21 19 20 / .25) 62%,transparent 78%),
  radial-gradient(ellipse 60% 50% at 0% 100%,rgb(21 19 20 / .85),transparent 75%)}
.ph-txt{position:relative;z-index:1;padding-block:clamp(72px,9vw,128px)}
.ph-txt h2{font-size:clamp(2.25rem,4.4vw,4.25rem);max-width:11em}
.ph-txt p{margin-top:20px;max-width:30em;color:rgb(255 255 255 / .82);font-size:1.0625rem}
.ph-txt .link{display:inline-block;margin-top:28px}
@media (max-width:760px){
  .pillars-hero{min-height:0;flex-direction:column;align-items:stretch}
  .ph-img{position:static;width:100%;height:auto;padding:32px var(--gutter) 0;box-sizing:border-box}
  .pillars-hero::after{content:none}
  .ph-txt{padding-block:24px 64px}
}
.pillars-img img{display:block;width:100%;height:auto}
@media (max-width:960px){.pillars-head{grid-template-columns:minmax(0,1fr)}.pillars-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px}}

/* Screen captures in a light frame, each linking to the full-size image */
.screens{padding-bottom:clamp(56px,7vw,104px)}
.screens h2{font:500 .8125rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
.screens-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.screens.one .screens-grid{grid-template-columns:minmax(0,1fr);max-width:1040px}
.screens figure{margin:0}
.screens a,.screens .shot{display:block;border:1px solid var(--rule);background:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .04),0 12px 32px -18px rgb(0 0 0 / .25)}
.screens img{display:block;width:100%;height:auto;object-fit:cover;object-position:top}
.screens figcaption{margin-top:12px;color:var(--ink-2);font-size:.9375rem;max-width:42em}
@media (max-width:760px){.screens-grid{grid-template-columns:minmax(0,1fr)}}

/* Silent video loops: the hero reel fades in over the hero photo once it plays */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
.hero-video.on{opacity:1}
.vid-toggle{position:absolute;right:10px;bottom:10px;z-index:3;min-height:44px;padding:0 14px;background:rgb(18 16 17 / .65);color:#fff;border:1px solid rgb(255 255 255 / .6);font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.vid-toggle:hover{background:rgb(18 16 17 / .85)}
.hero-toggle{right:var(--hero-gutter);bottom:clamp(24px,4vh,40px)}

/* Longer clips: a link on the tile opens the clip in a dialog with full controls */
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vid-full{position:absolute;left:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:rgb(18 16 17 / .65);color:#fff;border:1px solid rgb(255 255 255 / .6);font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.vid-full:hover{background:rgb(18 16 17 / .85)}
.vid-full svg{width:10px;height:10px;fill:currentColor}
.vid-full .mono{opacity:.75}
.vmodal{width:min(1200px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;background:#121011;color:#fff;overflow:hidden}
.vmodal::backdrop{background:rgb(10 9 10 / .88)}
.vmodal-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 20px}
.vmodal h2{margin:0;font:500 .8125rem/1.4 var(--mono);letter-spacing:.04em;color:rgb(255 255 255 / .85)}
.vmodal-close{flex:none;min-height:44px;padding:0 16px;background:none;color:#fff;border:1px solid rgb(255 255 255 / .6);font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.vmodal-close:hover{background:rgb(255 255 255 / .1)}
.vmodal video{display:block;width:100%;aspect-ratio:16 / 9;max-height:calc(100dvh - 32px - 60px);background:#000}
.imodal{width:fit-content}
.imodal img{display:block;width:min(1400px,calc(100vw - 32px),calc((100dvh - 32px - 60px) * var(--r,1.6)));height:auto;background:#fff}
.zoom{cursor:zoom-in}
@media (prefers-reduced-motion:no-preference){
  .vmodal[open]{animation:vmodal-in .32s var(--ease)}
  .vmodal[open]::backdrop{animation:vmodal-fade .32s var(--ease)}
}
@keyframes vmodal-in{from{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes vmodal-fade{from{opacity:0}}

/* Recent work: dark band of large photos. A swipeable row by default; on wide screens
   showcase.js pins it (.is-pinned) and slides the row sideways as the page scrolls. */
.showcase{background:#151314;color:#fff}
.sc-sticky{padding-block:clamp(56px,7vw,96px)}
.sc-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:clamp(28px,3vw,40px)}
.sc-label{display:block;margin-bottom:14px;font:500 .8125rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.showcase h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05}
.sc-count{font:500 .875rem/1 var(--mono);letter-spacing:.08em;white-space:nowrap;visibility:hidden}
.sc-count b{font:400 2.5rem/1 var(--sans);letter-spacing:0}
.sc-track{display:flex;gap:24px;list-style:none;margin:0;padding:0 var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.sc-track::-webkit-scrollbar{display:none}
.sc-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sc-track li{flex:0 0 min(84vw,1040px);scroll-snap-align:start}
.sc-track figure{margin:0}
.sc-frame{position:relative;overflow:hidden;aspect-ratio:3/2;max-height:62vh;background:#222;transition:opacity .5s var(--ease)}
.sc-frame img{position:absolute;top:0;left:-6%;width:112%;max-width:none;height:100%;object-fit:cover}
.sc-track figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-top:16px;font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.sc-track figcaption span+span{color:rgb(255 255 255 / .72)}
.sc-progress{height:2px;margin:clamp(28px,3vw,40px) var(--gutter) 0;background:rgb(255 255 255 / .18);visibility:hidden}
.sc-progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(calc(1 / var(--n)))}
.showcase.ready .sc-count,.showcase.ready .sc-progress{visibility:visible}
.showcase.is-pinned .sc-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:68px 0}
.showcase.is-pinned .sc-track{width:max-content;overflow:visible;scroll-snap-type:none;will-change:transform}
.showcase.is-pinned .sc-track li{flex-basis:min(70vw,1040px)}
.showcase.is-pinned .sc-frame{aspect-ratio:auto;height:min(58vh,560px);max-height:none}
.showcase.is-pinned li:not(.on) .sc-frame{opacity:.45}

/* At a glance: confirmed facts, label left and detail right, ruled like the offer list */
.specs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding-block:clamp(56px,7vw,104px)}
.specs h2{font-size:clamp(1.75rem,2.4vw,2.25rem)}
.specs dl{margin:0;border-top:1px solid var(--ink)}
.specs dl div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:4px 24px;padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.specs dt{padding-top:4px;color:var(--accent-ink)}
.specs dd{margin:0;font-size:1.0625rem;max-width:34em}
@media (max-width:960px){.specs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.specs dl div{grid-template-columns:minmax(0,1fr)}}

/* Legacy: a type-led hero, then a timeline with a decade index that stays beside it.
   legacy.js adds .anim to reveal years as they arrive, fills the rail and marks passed years. */
.legacy-hero{min-height:min(78vh,780px);min-height:min(78svh,780px)}
.legacy-hero .intro p+p{margin-top:14px}
.legacy-mark{position:absolute;z-index:2;right:calc(var(--hero-gutter) - .04em);bottom:-.14em;font:200 clamp(9rem,30vw,30rem)/1 var(--sans);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgb(255 255 255 / .45);pointer-events:none;user-select:none;animation:mark-in 1.6s var(--ease) both}
/* Transparent brand logo over a hero photo, in the corner like the Legacy page's 1991 */
.hero-mark{position:absolute;z-index:2;right:var(--hero-gutter);bottom:var(--hero-gutter);width:calc((100vw - 2 * var(--hero-gutter)) / 2);pointer-events:none;user-select:none;animation:mark-in 1.6s var(--ease) both}
@media (min-width:761px){.hero-mark{width:calc((100vw - 2 * var(--hero-gutter) - 390px) / 2)}}
.hero-mark:has(+ .hero-toggle:not([hidden])){right:calc(var(--hero-gutter) + 87px);bottom:clamp(24px,4vh,40px)}
.hero-mark .logo{display:block;width:100%;height:auto;fill:rgb(255 255 255 / .35)}
@keyframes mark-in{from{opacity:0;transform:translateY(14%)}}
.tl,.tl-outro{--rail:clamp(8rem,12vw,11.5rem);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 24px}
.tl{padding-block:clamp(72px,9vw,128px) clamp(32px,4vw,56px)}
.tl-side{position:sticky;top:92px;align-self:start}
.tl-side h2{margin-bottom:20px;font-weight:500;color:var(--ink-2)}
.tl-side ul{list-style:none;margin:0;padding:0}
.tl-side a{display:flex;align-items:center;gap:12px;min-height:44px;font-size:1.5rem;font-weight:300;letter-spacing:-.02em;text-decoration:none;color:var(--ink-2);transition:color .3s var(--ease)}
.tl-side a::before{content:"";width:16px;height:2px;background:currentColor;transition:width .4s var(--ease),background .4s var(--ease)}
.tl-side a:hover,.tl-side a[aria-current]{color:var(--ink)}
.tl-side a[aria-current]::before{width:40px;background:var(--accent)}
.tl-main{position:relative}
.tl-main::before{content:"";position:absolute;left:var(--rail);top:0;bottom:0;width:1px;background:var(--rule)}
.tl-fill{position:absolute;left:calc(var(--rail) - .5px);top:0;bottom:0;width:2px;background:var(--accent);transform-origin:top;transform:scaleY(var(--p,0))}
.tl-list{list-style:none;margin:0;padding:0}
.tl-year{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);padding-block:clamp(24px,3vw,40px);scroll-margin-top:92px}
.tl-date{position:relative;align-self:start;padding-right:24px;font-size:clamp(2rem,3.2vw,3rem);line-height:1}
.tl-date::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;box-sizing:border-box;border:2px solid var(--ink-2);border-radius:50%;background:var(--ground);transition:background .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease)}
.tl-year.passed .tl-date::after{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
/* Logo the company started using that year, in its own colors, centered under the date. legacy.js fades it
   in as its year nears the line's tip and out again as it moves on; without that it stays shown. */
.tl-year:has(.tl-logo){grid-template-rows:auto 1fr}
.tl-year:has(.tl-logo) .tl-body{grid-row:1 / span 2;grid-column:2}
.tl-logo{grid-column:1;grid-row:2;justify-self:center;display:block;width:auto;height:auto;max-width:min(160px,calc(100% - 24px));max-height:84px;margin:20px 24px 0 0;opacity:var(--logo,1)}
/* A logo with no year of its own floats beside the rail in a short gap between two years */
.tl-mark{position:relative;height:clamp(64px,6vw,88px)}
.tl-mark .tl-logo{position:absolute;left:calc((var(--rail) - 24px) / 2);top:50%;margin:0;max-width:min(160px,calc(var(--rail) - 24px));max-height:72px;transform:translate(-50%,-50%)}
.tl-year.major .tl-date{font-size:clamp(2.75rem,4.6vw,4.25rem);color:var(--accent-ink)}
.tl-body{padding:.3em 0 0 clamp(32px,4vw,56px)}
.tl-events{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:38em;font-size:1.125rem;line-height:1.5}
.tl-events li+li{padding-top:14px;border-top:1px solid var(--rule)}
.tl-year.placeholder .tl-date{font-size:clamp(1.25rem,1.6vw,1.5rem);color:var(--ink-2)}
.tl-year.placeholder .tl-events{color:var(--ink-2)}
.tl .tag{display:inline-block;margin-bottom:12px;padding:6px 10px;background:var(--ink);color:var(--ground)}
.tl.anim .tl-date,.tl.anim .tl-body{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.tl.anim .tl-body{transition-delay:.08s}
.tl.anim .tl-year:not(.in) .tl-date,.tl.anim .tl-year:not(.in) .tl-body{opacity:0;transform:translateY(28px)}
.tl-outro{padding-block:clamp(32px,4vw,56px) clamp(72px,9vw,128px)}
.tl-outro p{grid-column:2;padding-left:calc(var(--rail) + clamp(32px,4vw,56px));max-width:calc(var(--rail) + 20em);font-size:clamp(1.75rem,3vw,2.75rem);font-weight:300;line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
.tl-outro+.contact{border-top:1px solid var(--rule)}
@media (max-width:900px){
  .tl,.tl-outro{grid-template-columns:minmax(0,1fr);--rail:6px}
  .tl-side{position:static;margin-bottom:24px}
  .tl-side ul{display:flex;flex-wrap:wrap;gap:0 24px}
  .tl-side a{font-size:1.125rem}
  .tl-side a::before{display:none}
  .tl-side a[aria-current]{box-shadow:inset 0 -2px var(--accent)}
  .tl-year{grid-template-columns:minmax(0,1fr);padding-left:32px}
  .tl-date{padding-right:0}
  .tl-date::after{right:auto;left:-32px}
  .tl-body{padding:14px 0 0}
  .tl-year:has(.tl-logo) .tl-body{grid-row:auto;grid-column:1}
  .tl-logo{grid-row:auto;max-width:180px;max-height:72px;margin:18px 0 0}
  .tl-mark{height:80px}
  .tl-mark .tl-logo{left:calc(50% + 16px);max-width:180px;max-height:64px}
  .tl-outro p{grid-column:1;padding-left:0;max-width:none}
}

/* Photo beside text, full bleed */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--surface);border-block:1px solid var(--rule)}
/* Straight after a dark section the light rule shows as a pale line above the photo */
.pillars-hero+.split{border-top:0}
.split-img{position:relative;min-height:clamp(360px,42vw,600px);background:#1c1a1b}
.split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-txt{align-self:center;display:grid;gap:18px;padding:clamp(48px,6vw,96px) var(--gutter) clamp(48px,6vw,96px) clamp(32px,5vw,88px)}
.split-txt>*{max-width:44em}
.split-txt h2{font-size:clamp(1.875rem,3vw,2.75rem)}
.split-txt p{color:var(--ink-2);font-size:1.0625rem}

/* Family brand note (Edutek, Tekflights) */
.family{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,5vw,80px);align-items:start;padding-block:clamp(64px,8vw,112px)}
.family-mark .logo{display:block;width:min(100%,360px);height:auto;fill:var(--ink)}
.family h2{font-size:clamp(1.75rem,2.6vw,2.5rem)}
.family p{margin-top:16px;color:var(--ink-2);max-width:34em}
.family .link{display:inline-block;margin-top:28px}

/* Contact: the page's HubSpot form, or the placeholder form until it has an ID.
   The .contact layout comes from site.css. */
.family+.contact{border-top:1px solid var(--rule)}
/* On service pages the intro gets an even half so its text doesn't wrap into a thin column */
@media (min-width:961px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.contact .aside{max-width:34em}

/* Related pages */
.related{padding-block:clamp(56px,7vw,96px)}
.related h2{font:500 .8125rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.related a{display:grid;gap:12px;text-decoration:none}
.related img{aspect-ratio:4/3;width:100%;object-fit:cover;background:#e4e4e2}
.related span{font-size:1.0625rem;line-height:1.3}
.related a:hover span{text-decoration:underline}

@media (max-width:960px){
  .offer-list li{grid-template-columns:3rem minmax(0,1fr)}
  .offer-list p,.offer-list .go{grid-column:2}
  .split{grid-template-columns:1fr}
  .split-img{min-height:0;aspect-ratio:4/3}
  .split-txt{padding:48px var(--gutter);max-width:none}
  .family{grid-template-columns:1fr}
  .family-mark .logo{width:min(70%,280px)}
  .related ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .field ul{grid-template-columns:1fr 1fr}
  .field li:first-child{grid-column:1 / -1}
  .field.flip ul{grid-template-columns:1fr 1fr}
  .field.flip li:first-child{grid-column:auto}
  .field.flip li:last-child{grid-column:1 / -1}
  .field ul:has(> li:nth-child(4)){grid-template-columns:1fr 1fr}
  .field ul:has(> li:nth-child(4)) > li,.field ul:has(> li:nth-child(4)) > li:is(:nth-child(1),:nth-child(4)){grid-column:auto}
  .field li{height:clamp(180px,40vw,320px)}
}
@media (max-width:560px){
  .related ul{grid-template-columns:1fr 1fr}
}

/* Two tiles side by side: the Data page's infographic and its dashboard capture */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-block:clamp(56px,7vw,104px)}
.duo-tile{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);padding:clamp(20px,2.4vw,32px)}
.duo-tile .pillars-head{display:block;margin-bottom:24px}
.duo-tile .pillars-head p{margin-top:8px}
.duo-tile h2,.screens.duo-tile h2{font:500 clamp(1.5rem,2vw,1.875rem)/1.2 var(--sans);letter-spacing:normal;text-transform:none;margin:0}
.screens.duo-tile h2{margin-bottom:24px}
.duo-tile .pillars-img,.duo-tile .screens-grid{margin-block:auto;margin-inline:0;max-width:none;width:100%}
.duo-tile figure{display:flex;flex-direction:column}
@media (max-width:900px){.duo{grid-template-columns:minmax(0,1fr)}}

/* Small auto-scrolling photo carousel */
.ticker{padding-bottom:clamp(56px,7vw,104px)}
.ticker-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-bottom:16px}
.ticker h2{font:500 .8125rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ticker-toggle{min-height:44px;padding:0 14px;background:none;color:var(--ink);border:1px solid var(--ink);font:500 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.ticker-toggle[hidden]{display:none}
.ticker-toggle:hover{background:var(--ink);color:#fff}
.ticker-view{overflow-x:auto}
.ticker.running .ticker-view{overflow:hidden}
.ticker-track{display:flex;width:max-content;margin-inline:auto}
.ticker.running .ticker-track{margin-inline:0}
.ticker ul{list-style:none;margin:0;padding:0 12px 0 0;display:flex;gap:12px}
.ticker li{height:clamp(170px,17vw,230px);aspect-ratio:4/3;background:#1c1a1b}
.ticker img{display:block;width:100%;height:100%;object-fit:cover}
.ticker.running .ticker-track{animation:ticker-slide var(--ticker-time,44s) linear infinite}
.ticker.paused .ticker-track{animation-play-state:paused}
@keyframes ticker-slide{to{transform:translate3d(var(--ticker-shift,-50%),0,0)}}

/* Privacy policy and other reading pages */
.hero.doc-hero{min-height:0;padding-bottom:clamp(48px,6vw,80px)}
.doc-hero .intro p{max-width:34em;margin-top:16px;color:rgb(255 255 255 / .86)}
.doc-hero .doc-date{margin-top:24px;font-size:.75rem;color:rgb(255 255 255 / .72)}
.doc{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-block:clamp(48px,6vw,96px) clamp(72px,9vw,128px)}
.doc-side h2{font-size:.75rem;color:var(--ink-2);margin-bottom:14px}
.doc-side ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;border-left:1px solid var(--rule)}
.doc-side a{display:block;padding:6px 0 6px 16px;color:var(--ink-2);text-decoration:none;font-size:.9375rem}
.doc-side a:hover{color:var(--ink);text-decoration:underline}
.doc-body{max-width:40em}
.doc-body section{scroll-margin-top:92px}
.doc-body section+section{margin-top:clamp(40px,4.5vw,56px)}
.doc-body h2{font-size:clamp(1.5rem,2.2vw,1.875rem);font-weight:500;letter-spacing:-.015em;line-height:1.2;margin-bottom:16px}
.doc-body p,.doc-body li,.doc-body address{color:var(--ink-2);line-height:1.65}
.doc-body p+p,.doc-body p+ul,.doc-body p+address{margin-top:14px}
.doc-body ul{display:grid;gap:8px;padding-left:1.2em;list-style:disc}
.doc-body strong{color:var(--ink);font-weight:600}
.doc-body address{font-style:normal}
.doc-body a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
@media (min-width:961px){.doc{grid-template-columns:minmax(200px,3fr) minmax(0,8fr);gap:clamp(48px,6vw,112px)}.doc-side{position:sticky;top:92px;align-self:start}}

/* Construction progression: build video scrubbed by scroll (progression.js).
   Without the script it is a list of milestones with stills on the video's own background. */
.prog{--prog-bg:#594f59;position:relative;background:var(--prog-bg);color:#fff}
.prog-media{display:none}
.prog-ui{padding-block:clamp(72px,9vw,128px)}
.prog-h{color:rgb(255 255 255 / .8);margin-bottom:clamp(32px,4vw,56px)}
.prog-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,6vw,88px)}
.prog-fig{margin-bottom:24px}
.prog-fig img{display:block;width:100%;height:auto}
.prog-n{display:block;margin-bottom:12px;color:rgb(255 255 255 / .78)}
.prog-step h3{font-size:clamp(1.75rem,3vw,2.75rem);font-weight:400;letter-spacing:-.02em;line-height:1.1;margin-bottom:16px}
.prog-step p{max-width:32em;color:rgb(255 255 255 / .88);line-height:1.6}
.prog-closing{margin-top:clamp(64px,8vw,112px);max-width:13em;font-size:clamp(2.25rem,4.6vw,4.25rem);font-weight:300;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.prog-rail{display:none}

.prog.is-live{height:calc(var(--n) * 110vh + 160vh);height:calc(var(--n) * 110svh + 160svh)}
.prog.is-live .prog-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.prog.is-live .prog-media{display:block;position:absolute;inset:0;isolation:isolate}
.prog-media video,.prog-media img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.prog-still{opacity:0}
.prog.is-calm .prog-still{opacity:1}
.prog.is-calm video{display:none}
.prog-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(21 19 20 / .45),rgb(21 19 20 / .39) 38%,rgb(21 19 20 / 0) 68%)}
/* Extra shade while the white blueprint opens the video; progression.js fades it out as the blueprint does. */
.prog-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgb(21 19 20 / .82),rgb(21 19 20 / .64) 38%,rgb(21 19 20 / 0) 68%);opacity:var(--blueprint,1)}
.prog.is-calm .prog-media::before{opacity:0}
/* Progress while the build video downloads (progression.js), on the dark band above the right end
   of the rail; it fades out once the video is ready */
.prog-loader{position:absolute;z-index:2;bottom:calc(clamp(28px,5vh,48px) + 64px);right:var(--gutter);display:grid;gap:8px;justify-items:end;font:500 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgb(255 255 255 / .8);opacity:0;transition:opacity .6s linear}
.prog.is-loading .prog-loader{opacity:1}
.prog-loader-bar{position:relative;width:120px;height:2px;background:rgb(255 255 255 / .28)}
.prog-loader-bar span{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--load,0));transition:transform .2s linear}
.prog.is-live .prog-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding-block:120px clamp(112px,15vh,140px)}
/* The step numbers carry the sequence on screen; the heading stays for screen readers. */
.prog.is-live .prog-h{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.prog.is-live .prog-list{display:block;position:relative;max-width:38rem;min-height:15rem}
.prog.is-live .prog-fig{display:none}
.prog.is-live .prog-step{position:absolute;bottom:0;left:0;right:0;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .8s var(--ease)}
.prog.is-live .prog-step.on{opacity:1;transform:none}
.prog.is-live.is-end .prog-step.on{opacity:0;transform:translateY(-24px)}
.prog.is-live .prog-closing{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(112px,15vh,140px);margin:0;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.prog.is-live.is-end .prog-closing{opacity:1;transform:none}
.prog.is-live .prog-rail{display:block;position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,5vh,48px)}
.prog-rail::before,.prog-fill{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:rgb(255 255 255 / .28)}
.prog-fill{background:var(--accent);transform-origin:left;transform:scaleX(0)}
.prog-rail ol{list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}
.prog-rail li{position:relative;padding-right:12px;color:rgb(255 255 255 / .62);transition:color .3s linear}
.prog-rail li::before{content:"";position:absolute;top:-23px;left:0;width:12px;height:12px;border-radius:50%;background:var(--prog-bg);border:2px solid rgb(255 255 255 / .6);transition:background .3s linear,border-color .3s linear}
.prog-rail li.on{color:#fff}
/* Each milestone on the rail is a button that scrubs to its mark; the hit area takes in the dot above */
.prog-rail button{display:block;width:100%;margin-top:-30px;padding:30px 0 8px;background:none;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;color:inherit;cursor:pointer}
.prog-rail button:hover{color:#fff}
.prog-rail li.on::before,.prog-rail li.done::before{background:var(--accent);border-color:var(--accent)}
/* Phones and narrow windows: the build sits at the top, wider than the screen, with the text below. */
@media (max-width:759px){
  .prog.is-live .prog-media video,.prog.is-live .prog-media img{top:72px;left:-20%;width:140%;height:auto;object-fit:contain}
  .prog-media::after{background:linear-gradient(0deg,var(--prog-bg) 42%,rgb(89 79 89 / 0) 60%)}
  .prog-media::before{display:none}
  .prog.is-live .prog-ui{justify-content:flex-end;padding-block:0 96px}
  .prog.is-live .prog-h{display:none}
  .prog.is-live .prog-list{min-height:19rem;max-width:none}
  .prog-step h3{font-size:1.625rem}
  .prog-step p{font-size:.9375rem;line-height:1.5}
  .prog-rail ol{font-size:0}
  .prog.is-live .prog-closing{font-size:2.25rem;bottom:112px}
}