/* styles.css?v=55+internal.css?v=19+motion.css?v=3+case.css?v=7 */
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-latin.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('../assets/fonts/work-sans-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --color-bg: #000000;
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-text: #ffffff;
  --color-text-muted: #888888;
  --color-accent-pink: #fd1568;
  --color-accent-orange: #f28006;
  --color-accent: linear-gradient(135deg, var(--color-accent-pink), var(--color-accent-orange));
  --color-accent-contrast: #000000;
  --color-border: rgba(255, 255, 255, 0.14);
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-label: 'Work Sans', 'DM Sans', sans-serif;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-focus: 0 0 0 3px rgba(253, 21, 104, 0.35);
  --blur-nav: 18px;
  --duration-fast: 180ms;
  --duration-base: 420ms;
  --duration-slow: 800ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-pad: clamp(20px, 4vw, 64px);
  --page-width: 1500px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-bg); }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--color-accent-pink); color: #fff; }

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-140%); background: #fff; color: #000; padding: 10px 14px; border-radius: var(--radius-sm); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--color-accent-pink); outline-offset: 4px; }
.page-shell { width: min(100%, var(--page-width)); margin: 0 auto; padding-inline: var(--page-pad); }
.section-pad { padding-block: clamp(96px, 13vw, 210px); }
.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 200; background: transparent; }
.scroll-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--color-accent); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--page-pad); border-bottom: 1px solid transparent; transition: height var(--duration-base) var(--ease), background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease); }
.site-header.scrolled { height: 70px; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(var(--blur-nav)); border-color: var(--color-border); }
.brand { width: 148px; justify-self: start; }
.brand img { width: 100%; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); font-size: 14px; }
.desktop-nav a, .desktop-nav button, .site-footer a { color: #aaa; transition: color var(--duration-fast) ease; }
.desktop-nav a:hover, .desktop-nav button:hover, .site-footer a:hover { color: #fff; }
.capabilities-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.capabilities-trigger span { display: inline-block; font-size: 16px; line-height: 1; transition: transform var(--duration-base) var(--ease); }
.capabilities-trigger[aria-expanded="true"] { color: #fff; }
.capabilities-trigger[aria-expanded="true"] span { transform: rotate(45deg); }
/* The label is a link to /services/; the "+" beside it is the menu toggle, with a wider hit area. */
.capabilities-nav { display: inline-flex; align-items: center; }
.capabilities-nav .capabilities-trigger { justify-content: center; width: 26px; height: 26px; margin-right: -6px; }
.capabilities-nav:has([aria-expanded="true"]) .capabilities-link, .capabilities-link[aria-current="page"] { color: #fff; }
.capabilities-popover { position: fixed; z-index: 95; top: 88px; left: 0; width: 100%; padding-block: 12px 40px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: rgba(4,4,4,.98); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 220ms ease, transform var(--duration-base) var(--ease), visibility 220ms; }
.site-header.scrolled + .capabilities-popover { top: 70px; }
.capabilities-popover.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* The trigger already says Capabilities, so the menu opens straight onto the services. The link to
   the full system takes the empty cells after the seventh service. */
.capabilities-menu-grid .capabilities-menu-all { grid-column: span 2; color: #9a9a9a; }
.capabilities-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.capabilities-menu-grid a { display: grid; grid-template-columns: 34px 1fr auto; gap: 13px; align-items: start; min-width: 0; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--color-border); color: #fff; transition: color var(--duration-fast), padding-left var(--duration-base) var(--ease); }
.capabilities-menu-grid a:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid var(--color-border); }
.capabilities-menu-grid a:hover, .capabilities-menu-grid a:focus-visible { color: var(--color-accent-pink); padding-left: 10px; }
.capabilities-menu-grid a:not(:nth-child(3n + 1)):hover, .capabilities-menu-grid a:not(:nth-child(3n + 1)):focus-visible { padding-left: 34px; }
.capabilities-menu-grid small { padding-top: 4px; color: #666; font: 600 11px/1 var(--font-label); }
.capabilities-menu-grid strong { display: block; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.15; font-weight: 500; }
.capabilities-menu-grid em { display: block; margin-top: 5px; color: #777; font-style: normal; font-size: 12px; line-height: 1.35; }
.capabilities-menu-grid i { font-style: normal; color: #777; transition: transform var(--duration-fast); }
.capabilities-menu-grid a:hover i { transform: translate(3px, -3px); }
.header-cta { justify-self: end; font-size: 14px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.45); transition: border-color var(--duration-fast), color var(--duration-fast); }
.header-cta:hover { color: var(--color-accent-pink); border-color: var(--color-accent-pink); }
.header-cta span, .text-link span, .button span { display: inline-block; transition: transform var(--duration-fast) ease; }
.header-cta:hover span, .button:hover span { transform: translate(3px, -3px); }
.menu-toggle { display: none; justify-self: end; width: 48px; height: 48px; padding: 14px 9px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; height: 1px; background: #fff; margin: 6px 0; transition: transform var(--duration-fast), opacity var(--duration-fast); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 90; padding: 120px var(--page-pad) 40px; overflow-y: auto; overscroll-behavior: contain; background: #000; }
.mobile-menu nav { display: grid; gap: 8px; }
.mobile-menu a { font-size: clamp(34px, 12vw, 60px); line-height: 1.15; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.mobile-capabilities { border-bottom: 1px solid var(--color-border); }
.mobile-capabilities summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0; font-size: clamp(34px, 12vw, 60px); line-height: 1.15; cursor: pointer; list-style: none; }
.mobile-capabilities summary::-webkit-details-marker { display: none; }
.mobile-capabilities summary span { font-size: .65em; transition: transform var(--duration-base) var(--ease); }
.mobile-capabilities[open] summary span { transform: rotate(45deg); }
.mobile-service-links { display: grid; padding: 12px 0 24px 18px; }
.mobile-menu .mobile-service-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #aaa; font-size: clamp(18px, 6vw, 25px); }
.mobile-menu .mobile-service-links a:last-child { border-bottom: 0; }

.hero { position: relative; min-height: 700px; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-bottom: 1px solid var(--color-border); }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.18) 67%, rgba(0,0,0,.04) 100%), linear-gradient(0deg, #000 0%, transparent 24%); }
.system-field { --mx: 0px; --my: 0px; position: absolute; inset: 0; overflow: hidden; background: #050505; }
/* A pixel inset, not a percentage: on phones the hero height follows its content, and a percentage moved the grid's
   top edge whenever that height settled after load, which Lighthouse counted as layout shift (CLS 0.10, 2026-09-14).
   The pointer parallax moves it at most 9px, so 90px of overscan still hides every edge. */
.field-grid { position: absolute; inset: -90px; transform: translate(var(--mx), var(--my)); background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 92px 92px; transition: transform 1s var(--ease); mask-image: linear-gradient(to right, transparent 8%, rgba(0,0,0,.55) 42%, #000 72%); }
.hero-model { position: absolute; z-index: 1; inset: 0; pointer-events: none; contain: layout paint size; }
.hero-model canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 700ms var(--ease); }
.hero-model.is-ready canvas { opacity: 1; }
/* The placeholder is a render of the engine itself, placed where the engine settles, so loading,
   reduced motion and no-WebGL look like the 3D instead of a drawing of it. The geometry mirrors
   hero-3d.js: centre at half the width plus 0.364 of the hero height, 44.9% down, and the image is
   2.68 blade radii across. hero-3d.js swaps in exact values (--engine-*) as soon as it runs. */
.hero-engine-fallback { --hero-h: max(700px, min(100svh, 1080px)); position: absolute; left: calc(50% + var(--hero-h) * .364); top: 44.9%; width: calc(min(max(44vw, 600px), var(--hero-h) * .95) * .957); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; transition: opacity 500ms ease; }
.hero-engine-fallback img { display: block; width: 100%; height: 100%; }
.hero-model.is-ready .hero-engine-fallback { opacity: 0; }
.hero-model.is-synced .hero-engine-fallback { left: var(--engine-x); top: var(--engine-y); width: var(--engine-size); }
.signal { position: absolute; z-index: 3; left: 0; top: 0; will-change: transform; width: 4px; aspect-ratio: 1; background: #8c8c92; opacity: 0; pointer-events: none; transition: background 300ms ease, box-shadow 300ms ease, opacity 600ms ease; }
/* The tags label the 3D engine's channels. While it loads, and for reduced motion or no WebGL,
   only the flat placeholder shows and the tags would float beside it, so they wait for the engine. */
.system-field.has-engine .signal { opacity: 1; pointer-events: auto; }
.signal::before, .signal::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.22); transform: translate(-50%, -50%); }
.signal::before { width: 17px; height: 1px; }
.signal::after { width: 1px; height: 17px; }
.signal span { position: absolute; left: 18px; top: -12px; display: flex; align-items: center; gap: 8px; width: max-content; padding: 6px 8px; border-left: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.64); font: 650 12px/1 var(--font-label); color: rgba(255,255,255,.72); cursor: default; transition: color 220ms ease, background 220ms ease; }
.signal span small { font: 650 11px/1 var(--font-label); color: #73737a; }
.signal.is-active { background: var(--color-accent-pink); box-shadow: 0 0 12px rgba(253,21,104,.7); }
.signal.is-active::before, .signal.is-active::after { background: rgba(253,21,104,.55); }
.signal.is-active span { color: #fff; border-left-color: var(--color-accent-pink); }
.signal.is-active span small { color: var(--color-accent-pink); }
.signal:hover span { color: #fff; background: rgba(0,0,0,.82); }
/* hero-3d.js places each tag on an orbit outside the blades every frame. Tags left of the
   engine put their label on the outer side, so no text ever reaches in toward the hub. */
.signal.is-left span { left: auto; right: 18px; border-left: 0; border-right: 1px solid rgba(255,255,255,.18); }
.signal.is-left.is-active span { border-right-color: var(--color-accent-pink); }
.hero-content { position: relative; z-index: 2; width: 100%; padding-bottom: 178px; }
.eyebrow, .section-index { margin: 0; font: 600 11px/1.3 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: #b3b3b3; }
.eyebrow::before { content: ''; display: inline-block; vertical-align: middle; width: 34px; height: 1px; margin-right: 12px; background: var(--color-accent); }
.hero h1 { max-width: 790px; margin: 24px 0 36px; font-size: clamp(74px, 9.4vw, 156px); line-height: .87; font-weight: 500; letter-spacing: 0; }
.hero h1 span { color: var(--color-text-muted); }
/* The eyebrow sits inside the h1 so the heading carries the Tampa SEO keywords the old homepage ranked on. */
.hero h1.has-kicker { margin-top: 0; }
.hero h1 .hero-kicker { display: block; margin-bottom: 24px; color: #b3b3b3; }
.hero-lower { max-width: 700px; }
.hero-lower > p { max-width: 620px; margin: 0; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.52; color: #b5b5b5; }
.hero-actions { display: flex; justify-content: flex-start; align-items: center; gap: 34px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 15px 24px; border-radius: var(--radius-sm); font-weight: 600; transition: transform var(--duration-fast), filter var(--duration-fast); }
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.button-primary { background: var(--color-accent); color: var(--color-accent-contrast); }
.button-light { background: #fff; color: #000; }
.text-link { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; border-bottom: 1px solid var(--color-border); padding-bottom: 6px; }
.text-link:hover span { transform: translateY(3px); }
.proof-rail { position: absolute; z-index: 3; inset: auto 0 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); }
.proof-rail > div { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 105px; padding: 20px clamp(20px, 3vw, 46px); border-right: 1px solid var(--color-border); }
.proof-rail > div:first-child { padding-left: 0; }
.proof-rail > div:last-child { border-right: 0; padding-right: 0; }
.proof-rail span, .proof-rail small { grid-column: 1; color: var(--color-text-muted); font-size: 12px; }
.proof-rail strong { grid-column: 2; grid-row: 1 / span 2; font-size: clamp(24px, 3vw, 46px); font-weight: 500; }
.rating-score { display: inline-flex; justify-self: end; align-items: baseline; gap: .22em; }
.rating-score i { font-size: .46em; font-style: normal; color: var(--color-accent-pink); transform: translateY(-.18em); }

.statement { overflow: hidden; }
.statement-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; }
.display-heading { max-width: 1080px; margin: 0; font-size: clamp(46px, 6.5vw, 100px); line-height: .98; font-weight: 500; }
.statement-copy { max-width: 650px; margin: 50px 0 0; color: #a0a0a0; font-size: clamp(18px, 1.8vw, 28px); line-height: 1.45; }
.marquee { margin-top: clamp(90px, 12vw, 180px); padding: 28px 0; border-block: 1px solid var(--color-border); overflow: hidden; }
.marquee div { width: max-content; display: flex; align-items: center; gap: 28px; padding-right: 28px; font-size: clamp(34px, 5vw, 72px); line-height: 1; color: #dadada; animation: marquee 84s linear infinite; }
.marquee i { width: 16px; height: 16px; background: var(--color-accent); border-radius: 50%; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-head { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; align-items: end; margin-bottom: clamp(64px, 9vw, 130px); }
.section-head h2 { margin: 0; font-size: clamp(48px, 7vw, 108px); line-height: .94; font-weight: 500; }
.section-head h2 span { color: var(--color-text-muted); }
.capability-module { display: grid; grid-template-columns: minmax(290px, 1fr) minmax(460px, 1.55fr); min-height: 640px; border-block: 1px solid var(--color-border); }
.capability-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--color-border); padding-right: 44px; }
.capability-tabs button { display: grid; grid-template-columns: 40px 1fr; gap: 12px; text-align: left; width: 100%; padding: 25px 0; border: 0; border-bottom: 1px solid var(--color-border); background: none; color: #777; cursor: pointer; font-size: clamp(17px, 1.6vw, 24px); transition: color var(--duration-fast), padding-left var(--duration-base) var(--ease); }
.capability-tabs button span { font: 600 11px/1.6 var(--font-label); }
.capability-tabs button:hover, .capability-tabs button[aria-selected="true"], .capability-tabs button[aria-expanded="true"] { color: #fff; padding-left: 10px; }
.capability-tabs button[aria-selected="true"], .capability-tabs button[aria-expanded="true"] { border-image: var(--color-accent) 1; }
.capability-stage { position: relative; padding: clamp(48px, 6vw, 90px); background: var(--color-surface); overflow: hidden; }
.capability-stage article { position: relative; z-index: 1; animation: panelIn var(--duration-base) var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(16px); } }
.capability-number { display: block; margin-bottom: 70px; font: 600 11px/1 var(--font-label); color: var(--color-accent-pink); }
.capability-stage h3 { max-width: 760px; margin: 0; font-size: clamp(38px, 4.3vw, 68px); line-height: 1; font-weight: 500; }
.capability-stage p { max-width: 650px; margin: 36px 0; font-size: clamp(17px, 1.4vw, 21px); color: #aaa; }
.capability-stage ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 48px; padding: 0; list-style: none; }
.capability-stage li { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 12px; color: #aaa; }
.capability-stage a { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid #fff; }

.clients { overflow: hidden; border-top: 1px solid var(--color-border); }
.clients-head { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; align-items: start; }
.clients-head h2 { max-width: 900px; margin: -10px 0 0; font-size: clamp(54px, 7vw, 108px); line-height: .92; font-weight: 500; }
.clients-head h2 span { color: var(--color-text-muted); }
.client-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(80px, 11vw, 170px); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.client-mark { min-width: 0; height: clamp(132px, 13vw, 190px); display: grid; place-items: center; padding: clamp(30px, 4.5vw, 72px); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.client-mark img { width: auto; height: auto; max-width: min(58%, 190px); max-height: 62px; object-fit: contain; opacity: .58; filter: grayscale(1) brightness(1.35); transition: opacity var(--duration-base) var(--ease), filter var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.client-mark:hover img { opacity: 1; filter: grayscale(0) brightness(1.12); transform: scale(1.04); }

.work { background: #050505; }
.work-head, .insights-head { grid-template-columns: 1fr 2.3fr auto; }
.work-showcase { border-top: 1px solid var(--color-border); }
.featured-project { position: relative; display: grid; grid-template-columns: minmax(270px, .78fr) minmax(0, 2.22fr); gap: clamp(28px, 5vw, 86px); align-items: stretch; min-height: min(780px, 82svh); padding-block: clamp(28px, 4vw, 58px); border-bottom: 1px solid var(--color-border); }
.featured-project::before { content: ''; position: absolute; inset: 0 calc(var(--page-pad) * -1); background: var(--color-accent); transform: scaleY(0); transform-origin: bottom; transition: transform 700ms var(--ease); }
.featured-project:hover::before, .featured-project:focus-visible::before { transform: scaleY(1); }
.featured-copy, .featured-project figure, .featured-project > .project-arrow { position: relative; z-index: 1; }
.featured-copy { display: flex; flex-direction: column; align-items: flex-start; padding-top: 6px; }
.featured-copy h3 { margin: 0; font-size: clamp(48px, 6.3vw, 98px); line-height: .9; font-weight: 500; }
.featured-copy p { max-width: 360px; margin: auto 0 26px; color: #aaa; font-size: clamp(17px, 1.5vw, 22px); transition: color var(--duration-base); }
.featured-copy > span { display: flex; align-items: center; min-height: 46px; margin-left: 66px; font: 600 11px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: #888; transition: color var(--duration-base); }
.featured-project:hover .featured-copy p, .featured-project:hover .featured-copy > span { color: rgba(0,0,0,.86); }
.featured-project figure { min-height: 560px; margin: 0; overflow: hidden; background: #0a0a0a; }
.featured-project img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); transition: transform 1.1s var(--ease); }
.featured-project:hover img { transform: scale(1); }
.featured-project > .project-arrow { position: absolute; left: 0; bottom: 56px; }
.project-list { position: relative; }
.project-row { position: relative; display: grid; grid-template-columns: .35fr 1.3fr 1fr auto; gap: clamp(18px, 3vw, 50px); align-items: center; min-height: 190px; padding: 28px 0; border-bottom: 1px solid var(--color-border); isolation: isolate; }
.project-row::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(var(--page-pad) * -1); background: #fff; transform: scaleY(0); transform-origin: bottom; transition: transform 500ms var(--ease); }
.project-row:hover::before, .project-row:focus-visible::before { transform: scaleY(1); }
.project-index { font: 600 11px/1 var(--font-label); color: #777; }
.project-row h3 { margin: 0; font-size: clamp(36px, 5vw, 76px); line-height: .95; font-weight: 500; transition: transform 500ms var(--ease), color 300ms; }
.project-row > p { margin: 0; color: #888; font: 600 11px/1.4 var(--font-label); text-transform: uppercase; transition: color 300ms; }
.project-row:hover, .project-row:focus-visible { color: #000; }
/* Each row isolates its own stacking context, so a later row painted over the previous row's floating
   preview. The row in focus rises above its neighbours. */
.project-row:hover, .project-row:focus-visible { z-index: 3; }
.project-row:hover h3 { transform: translateX(18px); }
.project-row:hover > p { color: #3d3d3d; }
.project-row:hover .project-index, .project-row:focus-visible .project-index { color: #555; }
.project-preview { position: absolute; z-index: 2; left: 45%; top: 50%; width: min(32vw, 470px); aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: #111; opacity: 0; transform: translate(-50%, -42%) rotate(-2deg) scale(.86); clip-path: inset(100% 0 0); pointer-events: none; transition: opacity 180ms ease, transform 600ms var(--ease), clip-path 600ms var(--ease); box-shadow: 0 22px 65px rgba(0,0,0,.35); }
.project-row:nth-child(even) .project-preview { rotate: 3deg; }
.project-preview img { width: 100%; height: 100%; object-fit: cover; }
.project-preview-contain img { object-fit: contain; padding: 4%; background: #171717; }
.project-row:hover .project-preview, .project-row:focus-visible .project-preview { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1); clip-path: inset(0); }
.project-row:nth-child(even):hover .project-preview { transform: translate(-50%, -50%) rotate(3deg) scale(1); }
.project-arrow { display: grid; place-items: center; width: 46px; aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: 50%; transition: color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast); }
.featured-project:hover .project-arrow { color: #000; border-color: rgba(0,0,0,.5); transform: rotate(45deg); }
.project-row:hover .project-arrow { color: #000; border-color: #000; transform: rotate(45deg); }

.approach .section-head { grid-template-columns: 1fr 3fr; }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.process-list li { display: grid; grid-template-columns: 1fr 1.15fr 1.85fr; gap: 36px; align-items: start; padding: clamp(32px, 4vw, 64px) 0; border-bottom: 1px solid var(--color-border); }
.process-list li > span { font: 600 11px/1 var(--font-label); color: var(--color-accent-pink); }
.process-list h3 { margin: -8px 0 0; font-size: clamp(30px, 3.5vw, 54px); line-height: 1.05; font-weight: 500; }
.process-list p { max-width: 520px; margin: 0; color: #999; font-size: clamp(17px, 1.3vw, 20px); }

.insights { background: #fff; color: #000; }
.insights .section-index { color: #666; }
.insights .text-link { border-color: rgba(0,0,0,.3); }
.article-list { border-top: 1px solid rgba(0,0,0,.22); }
.article-row { display: grid; grid-template-columns: .8fr 2.2fr auto 40px; gap: 30px; align-items: center; min-height: 134px; padding: 24px 0; border-bottom: 1px solid rgba(0,0,0,.22); transition: padding var(--duration-base) var(--ease), background var(--duration-fast); }
.article-row:hover { padding-inline: 18px; background: rgba(0,0,0,.035); }
.article-row > span, .article-row time { font: 600 11px/1.3 var(--font-label); text-transform: uppercase; color: #666; }
.article-row h3 { margin: 0; font-size: clamp(22px, 2.4vw, 40px); line-height: 1.1; font-weight: 500; }
.article-row i { font-style: normal; font-size: 22px; transition: transform var(--duration-fast); }
.article-row:hover i { transform: translate(4px, -4px); }

.closing { position: relative; min-height: min(900px, 100svh); display: grid; align-items: center; overflow: hidden; }
.closing::before { content: ''; position: absolute; inset: 0; background: var(--color-accent); }
.closing::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.38), transparent 70%); }
.closing-visual { position: absolute; inset: 0; z-index: 1; }
.closing-visual img { position: absolute; width: min(50vw, 680px); right: 7vw; top: 50%; transform: translateY(-50%); filter: grayscale(1) brightness(4); mix-blend-mode: soft-light; opacity: .42; animation: slowRotate 28s linear infinite; }
.closing-ring { position: absolute; width: min(69vw, 950px); aspect-ratio: 1; right: -8vw; top: 50%; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
@keyframes slowRotate { to { transform: translateY(-50%) rotate(360deg); } }
.closing-content { position: relative; z-index: 2; }
.closing .eyebrow { color: #fff; }
.closing .eyebrow::before { background: #fff; }
.closing h2 { max-width: 1100px; margin: 30px 0 50px; font-size: clamp(58px, 8.6vw, 136px); line-height: .88; font-weight: 500; }

.site-footer { padding: 90px 0 28px; background: #000; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: clamp(36px, 5vw, 90px); padding-bottom: 80px; }
.footer-brand img { width: 160px; }
.footer-brand p { max-width: 320px; margin-top: 28px; color: var(--color-text-muted); }
.site-footer nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer nav span { margin-bottom: 12px; font: 600 11px/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; padding-top: 28px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 12px; }
.footer-bottom p { margin: 0; }
.footer-bottom div { display: flex; gap: 26px; }

.capabilities, .clients, .work, .approach, .insights, .closing, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; height: 72px; }
  .desktop-nav, .header-cta { display: none; }
  .capabilities-popover { display: none; }
  .menu-toggle { display: block; }
  /* Below 900px the engine gets its own band above the headline instead of hiding behind the copy.
     hero-3d.js mirrors this geometry for the live engine: side, centred, 43% of the side below the header. */
  .hero { --engine-side: min(84vw, 460px); height: auto; min-height: 0; padding-top: calc(72px + var(--engine-side) * .86); }
  .hero::after { background: linear-gradient(0deg, #000 0%, rgba(0,0,0,.65) 30%, transparent 58%); }
  .hero-engine-fallback { left: 50%; right: auto; top: calc(72px + var(--engine-side) * .43); width: var(--engine-side); transform: translate(-50%, -50%); opacity: 1; }
  .signal { display: none; }
  .hero-content { padding-bottom: 190px; }
  .hero h1 { font-size: clamp(60px, 12vw, 92px); }
  .hero-lower > p { max-width: 550px; }
  .hero-actions { justify-content: flex-start; }
  .proof-rail > div { display: block; min-height: 100px; padding: 18px; }
  .proof-rail > div:first-child { padding-left: 0; }
  .proof-rail span, .proof-rail small { display: block; }
  .proof-rail strong { display: block; margin: 8px 0 2px; font-size: 26px; }
  .statement-grid, .section-head, .approach .section-head, .work-head, .insights-head, .clients-head { grid-template-columns: 1fr; }
  .statement-grid, .section-head { gap: 26px; }
  .statement-copy { margin-left: 0; }
  .work-head .text-link, .insights-head .text-link { justify-self: start; }
  .featured-project { grid-template-columns: 1fr; min-height: 0; }
  .featured-copy { min-height: 260px; }
  .featured-project figure { min-height: 0; aspect-ratio: 16 / 10; }
  .featured-project > .project-arrow { left: auto; right: 0; top: 34px; bottom: auto; }
  .featured-copy > span { min-height: 0; margin-left: 0; }
  .project-row { grid-template-columns: 44px 1fr auto; min-height: 160px; }
  .project-row > p { grid-column: 2; }
  .project-row > .project-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .project-preview { left: 62%; width: min(44vw, 360px); }
  .capability-module { grid-template-columns: 1fr; }
  .capability-tabs { border-right: 0; padding-right: 0; }
  .capability-tabs button { font-size: 19px; }
  /* The desktop hover indent reads as misalignment in a stacked list; colour and the rule mark the active tab. */
  .capability-tabs button:hover, .capability-tabs button[aria-selected="true"], .capability-tabs button[aria-expanded="true"] { padding-left: 0; }
  .capability-stage { min-height: 560px; }
  .process-list li { grid-template-columns: 50px 1fr; }
  .process-list p { grid-column: 2; }
  .article-row { grid-template-columns: 1fr auto; gap: 10px 20px; }
  .article-row > span { grid-column: 1; }
  .article-row h3 { grid-column: 1; }
  .article-row time { grid-column: 2; grid-row: 1; }
  .article-row i { grid-column: 2; grid-row: 2; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  :root { --page-pad: 20px; }
  .section-pad { padding-block: 92px; }
  .brand { width: 124px; }
  /* A large ring cropped by the right edge, clear of the header, instead of a small badge beside it. */
  .hero .eyebrow { letter-spacing: .08em; }
  .hero .eyebrow::before { display: none; }
  .hero-content { padding-bottom: 240px; }
  .hero h1 { margin-top: 18px; font-size: clamp(48px, 14.3vw, 70px); line-height: .92; }
  .hero h1.has-kicker { margin-top: 0; }
  .hero h1 .hero-kicker { margin-bottom: 18px; }
  .hero-lower > p { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .button { min-height: 52px; }
  /* All three proofs as a short list: label and note on the left, the value on the right. */
  .proof-rail { grid-template-columns: 1fr; }
  .proof-rail > div { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; min-height: 0; padding: 13px 0; border-right: 0; border-top: 1px solid var(--color-border); }
  .proof-rail > div:first-child { border-top: 0; }
  .proof-rail span, .proof-rail small { grid-column: 1; }
  .proof-rail strong { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 24px; }
  .proof-rail .rating-score { display: inline-flex; }
  /* A float the size of the arrow button: only the first lines wrap around it, so a long word like
     Compounding keeps the full width below instead of pushing the heading past the edge. */
  .featured-copy h3::before { content: ''; float: right; width: 56px; height: 52px; }
  .display-heading, .section-head h2 { font-size: clamp(40px, 12vw, 62px); }
  .statement-copy { margin-top: 24px; font-size: 18px; }
  .marquee { margin-top: 80px; }
  .capability-module { min-height: 0; }
  .capability-tabs button { padding: 19px 0; }
  .capability-stage { min-height: 560px; padding: 38px 24px; }
  .capability-number { margin-bottom: 50px; }
  .capability-stage h3 { font-size: 37px; }
  .featured-copy { min-height: 230px; }
  .featured-project figure { aspect-ratio: 4 / 3; }
  .project-row { grid-template-columns: 34px 1fr 42px; min-height: 134px; gap: 12px; }
  .project-row h3 { font-size: 38px; }
  .project-preview { display: none; }
  .process-list li { grid-template-columns: 36px 1fr; gap: 18px; }
  .process-list h3 { font-size: 31px; }
  .closing { min-height: 720px; }
  .closing h2 { font-size: clamp(54px, 16vw, 78px); }
  .closing-visual img { width: 88vw; right: -26vw; }
  .closing-ring { width: 130vw; right: -48vw; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 46px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid nav:nth-of-type(3) { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .clients-head h2 { font-size: clamp(46px, 13vw, 64px); }
  .client-grid { margin-top: 68px; }
  .client-mark { height: 116px; padding: 28px; }
  .client-mark img { max-width: 62%; max-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero-model canvas { display: none; }
  .hero-engine-fallback, .hero-model.is-ready .hero-engine-fallback { opacity: 1; }
}

/* Featured project title: sized to its column, so a long word like "Compounding"
   never runs under the image. --longest is the character count of the longest word. */
.featured-copy { min-width: 0; container-type: inline-size; }
.featured-copy h3 { font-size: min(clamp(48px, 6.3vw, 98px), calc(100cqi / (var(--longest, 7) * .6))); }
.footer-address { margin: 14px 0 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.55; font-style: normal; }

.footer-bottom a { display: inline-block; padding-block: 6px; }
.footer-grid nav a { padding-block: 3px; }

/* Consent bar, built by analytics.js on enginecy.com only. Nothing measuring runs until the
   visitor answers, so this is the first interactive thing on a first visit. */
.consent-bar { position: fixed; inset: auto 0 0; z-index: 200; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 18px var(--page-pad); border-top: 1px solid var(--color-border); background: rgba(0, 0, 0, .92); backdrop-filter: blur(var(--blur-nav)); transform: translateY(100%); transition: transform 420ms var(--ease); }
.consent-bar.is-in { transform: none; }
.consent-bar p { max-width: 78ch; margin: 0; color: #c4c4c4; font-size: 14px; line-height: 1.6; }
.consent-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 10px; }
.consent-bar button { min-height: 44px; padding: 11px 22px; border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 14px; cursor: pointer; transition: border-color 200ms ease, background 200ms ease, color 200ms ease; }
.consent-bar button:hover { border-color: #fff; }
.consent-bar button.is-primary { background: #fff; border-color: #fff; color: #000; }
.consent-bar button.is-primary:hover { background: #e9e9e9; }
@media (max-width: 640px) {
  .consent-bar { flex-direction: column; align-items: stretch; padding-block: 16px; }
  .consent-actions { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .consent-bar { transition: none; } }

/* Desktop navigation, after metalab.com. Past the first 24px of scroll the full-width bar
   gathers into a centred glass pill, the wordmark slides away behind its own sunburst (the
   mark is the first 34px of the logo, so nothing is swapped), and Capabilities opens as a
   rounded panel under the pill. Phones keep the existing menu. */
@media (min-width: 901px) {
  .site-header { left: 50%; right: auto; width: 100%; translate: -50% 0; border: 1px solid transparent; border-radius: 0; transition: top 600ms var(--ease), width 600ms var(--ease), height 600ms var(--ease), padding 600ms var(--ease), border-radius 600ms var(--ease), background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease; }
  .site-header .brand { overflow: hidden; transition: width 600ms var(--ease); }
  .site-header .brand img { width: 148px; max-width: none; }
  .site-header .desktop-nav { transition: gap 600ms var(--ease); }
  .site-header .header-cta { transition: padding 600ms var(--ease), border-radius 600ms var(--ease), background-color 300ms ease, color 300ms ease, border-color 300ms ease; }

  .site-header.scrolled { top: 14px; width: 640px; height: 58px; grid-template-columns: auto 1fr auto; padding: 0 8px 0 14px; border-color: rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(12, 12, 12, .72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
  .site-header.scrolled .brand { width: 34px; }
  /* Centred in the space between the mark and the chip, so the gaps either side match. */
  .site-header.scrolled .desktop-nav { gap: 26px; justify-self: center; }
  .site-header.scrolled .header-cta { padding: 10px 16px; border: 0; border-radius: 999px; background: #fff; color: #000; }
  .site-header.scrolled .header-cta:hover { background: var(--color-accent-pink); color: #fff; }

  .site-header.scrolled + .capabilities-popover { top: 84px; left: 50%; width: min(1040px, calc(100% - 48px)); translate: -50% 0; padding: 8px 30px 30px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; background: rgba(8, 8, 8, .9); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
  .site-header.scrolled + .capabilities-popover > .page-shell { width: auto; max-width: none; margin: 0; padding-inline: 0; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .site-header, .site-header .brand, .site-header .desktop-nav, .site-header .header-cta { transition: none; }
}

/* Headings break into balanced lines, so none ends on a single word; paragraphs avoid orphans. */
h1, h2, h3, .eyebrow, .section-index { text-wrap: balance; }
p { text-wrap: pretty; }

/* Mobile pass, 2026-09-13. Touch targets reach 44px without moving the layout: blocks get padding,
   underlined text links keep their tight rule and carry the tap area on an invisible pseudo-element.
   `body` lifts these above the equally specific rules in the page stylesheets that load later. */
@media (max-width: 900px) {
  .site-header .brand { padding-block: 8px; }
  body .site-footer nav { gap: 0; }
  body .footer-grid nav a { padding-block: 10px; }
  body .footer-bottom a { padding: 12px 5px; }
  body .footer-bottom div { gap: 16px; }
  body .footer-bottom div a:first-child { margin-left: -5px; }
  body .perspective-filters button { min-height: 44px; padding-inline: 16px; }
  body .cs-marquee-toggle, body .review-wall-toggle { min-height: 44px; padding-inline: 18px; }
  body .cs-marquee-step { min-width: 44px; min-height: 44px; }
  .text-link, .review-link, .capability-stage a, .ar-back { position: relative; }
  .text-link::before, .review-link::before, .capability-stage a::before, .ar-back::before, .cs-live::before { content: ''; position: absolute; inset: -9px -6px; }
}
/* Labels get an 11px floor on phones and form labels 12px; the related-page rows stack their label
   above the title, because a 38px column could not hold "All capabilities". */
@media (max-width: 600px) {
  body .capability-tabs button span, body .project-index, body .featured-copy > span, body .site-footer nav span,
  body .service-directory span, body .internal-hero-meta, body .work-entry-index, body .work-entry-meta,
  body .perspective-feature-copy span, body .perspective-card span, body .perspective-row span, body .perspective-row time,
  body .perspective-filters button, body .capability-entry-index, body .principle > span, body .location-rail span,
  body .project-facts span, body .project-pager span, body .work-card p, body .case-features span, body .case-stat span,
  body .ar-pill, body .ar-card-read, body .cs-label, body .conversion-points span, body .detail-row > span,
  body .perspective-count { font-size: 11px; }
  body .field label, body .field legend, body .form-steps { font-size: 12px; }
  body .service-directory a { grid-template-columns: 1fr auto; row-gap: 8px; min-height: 0; padding-block: 22px; }
  body .service-directory span, body .service-directory strong { grid-column: 1; }
  body .service-directory i { grid-column: 2; grid-row: 1 / span 2; }
}

/* Scroll cue at the foot of every full-screen hero (injected by site-pass.py, wired in script.js): a label
   over a hairline track with a dot travelling down it, so the page reads as having more below. */
.scroll-cue { display: none; position: absolute; z-index: 4; left: 50%; bottom: 22px; translate: -50% 0; grid-template-columns: auto; justify-items: center; row-gap: 12px; padding: 0; border: 0; background: none; color: #bdbdbd; font: 600 11px/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: opacity 400ms ease, translate 400ms var(--ease), color 200ms ease; }
.js .scroll-cue { display: grid; }
.scroll-cue.is-hidden { opacity: 0; translate: -50% 12px; pointer-events: none; }
.scroll-cue:hover { color: #fff; }
.scroll-cue:focus-visible { outline: 2px solid #fff; outline-offset: 8px; border-radius: 4px; }
/* Letter-spacing trails the last letter; matching it on the left keeps the word centred over the track. */
.scroll-cue-label { padding-left: .14em; }
.scroll-cue-track { position: relative; width: 1px; height: 44px; overflow: hidden; background: rgba(255, 255, 255, .22); }
.scroll-cue-track i { position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--color-accent); animation: cueTravel 1.9s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes cueTravel { to { top: 100%; } }
/* Room for the cue under the hero copy. The homepage cue sits above its proof rail (height set by script.js). */
.service-hero:has(> .scroll-cue) .service-hero-content { padding-bottom: 124px; }
.hero:has(> .scroll-cue) .hero-content { padding-bottom: calc(var(--rail-h, 105px) + 116px); }
.hero > .scroll-cue { bottom: calc(var(--rail-h, 105px) + 22px); }
.service-hero h1 .hero-muted { color: var(--color-text-muted); }
@media (max-width: 600px) {
  .service-hero:has(> .scroll-cue) .service-hero-content { padding-bottom: 112px; }
}
/* The phone homepage hero runs taller than the screen, so the stacked cue landed below the fold. There it
   collapses to one row (label, then a short track) tucked between the copy and the proof rail. */
@media (max-width: 900px) {
  .hero > .scroll-cue { grid-template-columns: auto 1px; align-items: center; column-gap: 12px; }
  .hero > .scroll-cue .scroll-cue-track { height: 22px; }
  .hero:has(> .scroll-cue) .hero-content { padding-bottom: calc(var(--rail-h, 105px) + 66px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-track i { animation: none; top: 30%; }
}

/* Homepage imagery (2026-09-14): the glass concept renders carry the services and real client work carries
   the proof. A render behind each capability panel, project images without hover, a sticky render for the
   loop, and an audit block before the closing. */

/* Capabilities: the active tab's render fills the panel, darkened on the side the copy sits. */
.capability-visuals { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.capability-visuals img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; opacity: 0; transform: scale(1.05); transition: opacity 700ms var(--ease), transform 1.4s var(--ease); }
.capability-visuals img.is-active { opacity: 1; transform: none; }
/* --color-surface is a 4% white wash, so the scrim is drawn in the solid colour it produces over black. */
.capability-visuals::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0a0a0a 0%, rgba(10, 10, 10, .92) 48%, rgba(10, 10, 10, .4) 100%), linear-gradient(0deg, rgba(10, 10, 10, .7) 0%, transparent 45%); }
@media (max-width: 600px) {
  .capability-visuals { position: relative; inset: auto; aspect-ratio: 16 / 9; margin: -38px -24px 30px; }
  .capability-visuals img { object-position: 50% 50%; }
  .capability-visuals::after { background: linear-gradient(0deg, #0a0a0a 0%, transparent 60%); }
}

/* Selected work: desktop keeps the hover reveal only (Mo, 2026-09-14: no thumbnails on desktop). Phones and
   touch screens, which cannot hover, show each project's image under its title. */
@media (max-width: 900px), (hover: none) {
  .project-row { align-items: start; }
  .project-preview, .project-row:nth-child(even) .project-preview, .project-row:hover .project-preview, .project-row:focus-visible .project-preview, .project-row:nth-child(even):hover .project-preview { position: relative; left: auto; top: auto; z-index: auto; display: block; grid-column: 2 / -1; width: 100%; aspect-ratio: 16 / 10; opacity: 1; transform: none; rotate: none; clip-path: none; box-shadow: none; border-radius: 12px; }
}

/* The loop: a sticky render beside the steps follows the step nearest the middle of the screen (script.js).
   Phones show each step's render above its title instead. */
.process-layout { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; align-items: start; }
.process-visual { position: sticky; top: 132px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: #0c0c0c; }
.process-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 700ms var(--ease), transform 1.4s var(--ease); }
.process-visual img.is-active { opacity: 1; transform: none; }
.process-visual img[data-step="1"] { object-position: 68% 50%; }
.process-visual img[data-step="2"] { object-position: 34% 50%; }
.process-layout .process-list li { grid-template-columns: 56px 1fr 1.35fr; }
.process-figure { display: none; }
@media (min-width: 901px) {
  .process-list h3 { transition: color 400ms ease; }
  .process-layout.is-tracking .process-list li:not(.is-current) h3 { color: #6f6f6f; }
}
@media (max-width: 900px) {
  .process-layout { grid-template-columns: 1fr; }
  .process-visual { display: none; }
  .process-layout .process-list li { grid-template-columns: 50px 1fr; }
  .process-layout .process-list h3 { grid-column: 2; }
  .process-figure { display: block; grid-column: 2; margin: 0 0 22px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #0c0c0c; }
  .process-figure img { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 600px) { .process-layout .process-list li { grid-template-columns: 36px 1fr; } }

/* Audit block before the closing: what the free audit examines, beside the audit render. */
.audit-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.audit-cta-visual { margin: 0; aspect-ratio: 4 / 5; max-height: 780px; overflow: hidden; border-radius: 14px; background: #0c0c0c; }
.audit-cta-visual img { width: 100%; height: 100%; object-fit: cover; }
.audit-cta-copy h2 { max-width: 13ch; margin: 0; font-size: clamp(42px, 5.2vw, 84px); line-height: .96; font-weight: 500; text-wrap: balance; }
.audit-cta-copy > p { max-width: 560px; margin: 32px 0 0; color: #a6a6a6; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; }
.audit-cta-points { margin: 44px 0; border-top: 1px solid var(--color-border); }
.audit-cta-points div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.audit-cta-points dt { color: #fff; font: 600 12px/1.6 var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
.audit-cta-points dd { margin: 0; color: #9d9d9d; line-height: 1.55; }
@media (max-width: 900px) {
  .audit-cta-grid { grid-template-columns: 1fr; }
  .audit-cta-visual { aspect-ratio: 1; max-height: none; }
  .audit-cta-visual img { object-position: 50% 45%; }
}
@media (max-width: 600px) { .audit-cta-points div { grid-template-columns: 1fr; gap: 6px; } }

/* CTA sections on the brand gradient. White copy fails contrast on the bright orange end and where the
   sunburst's rays cross it, so on narrow screens (copy spans the full width there) a darker scrim sits
   behind it and the sunburst moves down and right. The spin keyframes carry translateY(-50%), so the
   sunburst moves with top and right, never transform. */
@media (max-width: 900px) {
  .closing::after { background: linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.24) 100%); }
  .closing-visual img { top: 82%; right: -46vw; opacity: .24; }
  .closing-ring { top: 82%; }
}

/* Wide screens: the CTA heading runs across most of the section, into the bright orange end and over the
   sunburst. The scrim now carries across the full width, and the sunburst and ring sit further right. */
@media (min-width: 901px) {
  .closing::after { background: linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.36) 55%, rgba(0,0,0,.16) 100%); }
  .closing-visual img { right: -12vw; opacity: .3; }
  .closing-ring { right: -27vw; }
}

/* Section labels and step numbers on white sections. The greys tuned for the black page (#b3b3b3, #777)
   measure 2.1:1 and 4.5:1 on white; #666 reads 5.7:1. */
.insights .section-index, .perspective-index .section-index, .perspective-feature .section-index,
.about-system .section-index, .service-scope .section-index, .conversion-detail .section-index { color: #666; }

/* Touch targets on phones and tablets reach 44px without changing the type (visual review, 2026-09-14). */
@media (max-width: 1024px) {
  body .text-link, body .cs-live { display: inline-flex; align-items: center; min-height: 44px; } /* tap targets */
}

/* capability accordion (phones only; tablets keep the card below the list) */
@media (max-width: 600px) {
  .capability-tabs .capability-stage { margin: 0 0 8px; }
}

/* clip crops like hidden but is not a scroll container, so position: sticky inside still pins to the
   viewport (the Emerald zoom collage depends on it). hidden stays first for browsers without clip. */
.internal-main { overflow: hidden; overflow: clip; }
.internal-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 720px; min-height: clamp(560px, 80svh, 780px); padding: clamp(132px, 15vh, 190px) 0 clamp(58px, 7vh, 96px); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.internal-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 116px 116px; mask-image: linear-gradient(to bottom, #000, transparent 92%); }
/* Scrim: art bleeds behind the right-hand column, so the copy needs a floor under
   it. Only heroes that actually carry art get one; the work hero stays untouched. */
.internal-hero:has(.about-portrait)::after,
.internal-hero:has(.perspectives-hero-art)::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.94) 44%, rgba(0,0,0,.7) 74%, rgba(0,0,0,.44) 100%); pointer-events: none; }
.internal-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, .8fr); gap: clamp(40px, 8vw, 140px); align-items: end; }
.internal-hero h1 { max-width: 1080px; margin: 30px 0 0; font-size: clamp(76px, 10.6vw, 170px); line-height: .84; font-weight: 500; letter-spacing: -.02em; }
.internal-hero h1 span { color: #777; }
.internal-hero-side { align-self: end; padding-bottom: 12px; }
.internal-hero-side p { max-width: 430px; margin: 0; color: #aaa; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.5; }
.internal-hero-meta { display: flex; gap: 28px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--color-border); color: #777; font: 600 11px/1.3 var(--font-label); text-transform: uppercase; }
.internal-section { padding-block: clamp(90px, 11vw, 180px); }
.internal-section-head { display: grid; grid-template-columns: .75fr 2.25fr; gap: clamp(32px, 6vw, 100px); margin-bottom: clamp(50px, 7vw, 108px); }
.internal-section-head h2 { max-width: 1000px; margin: -10px 0 0; font-size: clamp(52px, 7.8vw, 124px); line-height: .88; font-weight: 500; }
.internal-section-head h2 span { color: #777; }

.work-archive { border-top: 1px solid var(--color-border); }
.work-entry { position: relative; display: grid; grid-template-columns: .55fr 1.25fr 1.9fr 48px; gap: clamp(20px, 4vw, 70px); align-items: start; padding: clamp(34px, 5vw, 76px) 0; border-bottom: 1px solid var(--color-border); }
.work-entry-index, .work-entry-meta { color: #777; font: 600 11px/1.4 var(--font-label); text-transform: uppercase; }
.work-entry-copy h2 { margin: -8px 0 20px; font-size: clamp(44px, 6vw, 94px); line-height: .9; font-weight: 500; }
.work-entry-copy p { max-width: 460px; margin: 0; color: #999; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; }
.work-entry figure { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: #0c0c0c; }
.work-entry:nth-child(even) figure { aspect-ratio: 5 / 4; }
.work-entry img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease), filter 500ms ease; }
.work-entry:hover img { transform: scale(1.035); filter: saturate(1.08); }
.work-entry .project-arrow { margin-top: 2px; }
.archive-strip { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.archive-strip span { min-height: 130px; display: flex; align-items: flex-end; padding: 22px; border-right: 1px solid var(--color-border); color: #888; font-size: 14px; }
.archive-strip span:last-child { border-right: 0; }

.perspectives-hero-art { position: absolute; z-index: 0; right: -7vw; top: 90px; width: min(48vw, 760px); opacity: .3; filter: saturate(1.2); }
.perspectives-hero-art img { width: 100%; }
.perspective-feature { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 620px; background: #fff; color: #000; }
.perspective-feature-media { min-height: 620px; overflow: hidden; }
.perspective-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.perspective-feature-copy { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(42px, 6vw, 96px); }
.perspective-feature-copy span, .perspective-card span, .perspective-row span, .perspective-row time { color: #666; font: 600 11px/1.3 var(--font-label); text-transform: uppercase; }
.perspective-feature-copy h2 { margin: 40px 0; font-size: clamp(46px, 5.8vw, 92px); line-height: .92; font-weight: 500; }
.perspective-feature-copy p { max-width: 520px; color: #555; font-size: 18px; line-height: 1.55; }
.perspective-feature-copy .text-link { align-self: flex-start; border-color: rgba(0,0,0,.3); }
.perspective-index { background: #fff; color: #000; }
.perspective-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid rgba(0,0,0,.2); }
.perspective-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.perspective-filters button { padding: 10px 14px; border: 1px solid rgba(0,0,0,.2); border-radius: 3px; background: transparent; color: #555; font: 600 11px/1 var(--font-label); text-transform: uppercase; cursor: pointer; }
.perspective-filters button.is-active { background: #000; color: #fff; }
.perspective-count { color: #666; font: 600 11px/1 var(--font-label); text-transform: uppercase; }
.perspective-list { border-bottom: 1px solid rgba(0,0,0,.2); }
.perspective-row { display: grid; grid-template-columns: .7fr 2.3fr auto 42px; gap: 28px; align-items: center; min-height: 126px; padding: 24px 0; border-bottom: 1px solid rgba(0,0,0,.16); }
.perspective-row:last-child { border-bottom: 0; }
.perspective-row h2 { margin: 0; font-size: clamp(24px, 2.45vw, 40px); line-height: 1.08; font-weight: 500; }
.perspective-row i { font-style: normal; font-size: 22px; transition: transform 220ms ease; }
.perspective-row:hover i { transform: translate(4px, -4px); }

/* Capabilities index: one row per capability, image carried on the right so the
   six read as a sequence rather than a card grid. */
.capability-index { border-top: 1px solid var(--color-border); }
.capability-entry { position: relative; display: grid; grid-template-columns: .5fr 1.6fr 1.4fr 40px; gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(30px, 4vw, 56px) 0; border-bottom: 1px solid var(--color-border); color: inherit; text-decoration: none; }
.capability-entry-index { color: var(--color-accent-pink); font: 600 11px/1 var(--font-label); }
.capability-entry-copy h2 { margin: 0 0 12px; font-size: clamp(26px, 3.1vw, 46px); line-height: 1.02; font-weight: 500; letter-spacing: -.01em; }
.capability-entry-copy p { max-width: 480px; margin: 0; color: #999; font-size: 17px; line-height: 1.55; }
.capability-entry figure { aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: #0c0c0c; }
.capability-entry figure img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform 800ms var(--ease), opacity 400ms ease; }
.capability-entry i { font-style: normal; font-size: 22px; color: #777; transition: transform 240ms ease, color 240ms ease; }
.capability-entry:hover figure img { transform: scale(1.04); opacity: 1; }
.capability-entry:hover i { transform: translate(4px, -4px); color: #fff; }
.capability-aside { margin-top: clamp(46px, 6vw, 76px); }
.capability-aside p { max-width: 70ch; margin: 0; color: #999; font-size: 17px; line-height: 1.62; }
.capability-aside a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(253,21,104,.55); }
.capability-aside a:hover { text-decoration-color: var(--color-accent-pink); }

.about-portrait { position: absolute; z-index: 0; right: -6vw; top: 50%; transform: translateY(-50%); width: min(38vw, 600px); aspect-ratio: 4 / 5; overflow: hidden; opacity: .32; mask-image: linear-gradient(to left, #000 38%, transparent); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-manifesto { display: grid; grid-template-columns: .72fr 2.28fr; gap: clamp(42px, 8vw, 140px); }
.about-manifesto blockquote { max-width: 1100px; margin: 0; font-size: clamp(42px, 6.2vw, 96px); line-height: .98; font-weight: 500; }
.about-manifesto blockquote span { color: #777; }
.principle-list { margin-top: clamp(80px, 11vw, 170px); border-top: 1px solid var(--color-border); }
.principle { display: grid; grid-template-columns: .5fr 1.2fr 1.8fr; gap: clamp(24px, 5vw, 80px); padding: clamp(38px, 5vw, 72px) 0; border-bottom: 1px solid var(--color-border); }
.principle > span { color: var(--color-accent-pink); font: 600 11px/1 var(--font-label); }
.principle h2 { margin: -8px 0 0; font-size: clamp(32px, 4vw, 62px); line-height: .98; font-weight: 500; }
.principle p { max-width: 540px; margin: 0; color: #999; font-size: 18px; line-height: 1.55; }
.about-system { background: #fff; color: #000; }
.about-system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 130px); align-items: center; }
.about-system-visual { aspect-ratio: 1; overflow: hidden; background: #080808; }
.about-system-visual img { width: 100%; height: 100%; object-fit: cover; }
.about-system-copy h2 { margin: 0 0 36px; font-size: clamp(52px, 7vw, 108px); line-height: .88; font-weight: 500; }
.about-system-copy p { max-width: 580px; color: #555; font-size: 19px; line-height: 1.6; }
.location-rail { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; border-top: 1px solid rgba(0,0,0,.18); }
.location-rail div { padding: 28px 24px 0 0; }
.location-rail span { display: block; color: #777; font: 600 11px/1 var(--font-label); text-transform: uppercase; }
.location-rail strong { display: block; margin-top: 10px; font-size: 20px; font-weight: 500; }

@media (max-width: 900px) {
  /* Below this width there is no room to sit copy beside the art, so the art
     stops being a backdrop and becomes a full-bleed band under the copy. */
  .internal-hero { justify-content: flex-start; min-height: auto; padding: clamp(118px, 22vw, 150px) 0 0; }
  .internal-hero::after { display: none; }
  .internal-hero-grid { order: 1; }
  .internal-hero h1 { font-size: clamp(60px, 9.6vw, 96px); }
  .about-portrait, .perspectives-hero-art { order: 2; position: static; transform: none; width: 100%; margin-top: clamp(40px, 8vw, 64px); aspect-ratio: 2 / 1; overflow: hidden; opacity: .52; mask-image: linear-gradient(to top, transparent, #000 42%); }
  .about-portrait img, .perspectives-hero-art img { width: 100%; height: 100%; object-fit: cover; }
  .internal-hero-grid, .internal-section-head, .about-manifesto, .about-system-grid { grid-template-columns: 1fr; }
  .internal-hero-side { max-width: 620px; }
  .capability-entry { grid-template-columns: 42px 1fr 40px; }
  .capability-entry-copy { grid-column: 2; }
  .capability-entry figure { grid-column: 2 / -1; margin-top: 22px; }
  .capability-entry i { grid-column: 3; grid-row: 1; align-self: start; }
  .work-entry { grid-template-columns: 42px 1fr 44px; }
  .work-entry-copy { grid-column: 2; }
  .work-entry figure { grid-column: 2 / -1; }
  .work-entry .project-arrow { grid-column: 3; grid-row: 1; }
  .perspective-feature { grid-template-columns: 1fr; }
  .perspective-feature-media { min-height: 440px; }
  .principle { grid-template-columns: 40px 1fr; }
  .principle p { grid-column: 2; }
  .archive-strip { grid-template-columns: repeat(2, 1fr); }
  .archive-strip span:nth-child(even) { border-right: 0; }
}

@media (max-width: 600px) {
  .internal-hero { padding-top: clamp(104px, 26vw, 126px); }
  .internal-hero h1 { font-size: clamp(44px, 14.6vw, 88px); }
  .about-portrait, .perspectives-hero-art { aspect-ratio: 16 / 10; }
  .internal-hero-meta { flex-direction: column; gap: 8px; }
  .capability-entry { grid-template-columns: 28px 1fr 38px; gap: 12px; }
  .capability-entry figure { grid-column: 1 / -1; }
  .work-entry { grid-template-columns: 28px 1fr 42px; gap: 14px; }
  .work-entry figure { grid-column: 1 / -1; }
  .perspective-feature-media { min-height: 300px; }
  .perspective-toolbar { align-items: flex-start; flex-direction: column; }
  .perspective-row { grid-template-columns: 1fr 38px; gap: 10px; }
  .perspective-row > span, .perspective-row h2 { grid-column: 1; }
  .perspective-row time { grid-column: 1; }
  .perspective-row i { grid-column: 2; grid-row: 1 / span 3; }
  .principle { grid-template-columns: 28px 1fr; gap: 14px; }
  .location-rail { grid-template-columns: 1fr; }
  .about-system-visual { aspect-ratio: 4 / 5; }
}

/* Landscape phones and short laptops: a viewport-height hero would push the
   headline and the copy onto separate screens. */
@media (min-width: 901px) and (max-height: 620px) {
  .internal-hero { min-height: auto; padding-top: 124px; padding-bottom: 54px; }
  .internal-hero h1 { font-size: clamp(58px, 7vw, 96px); }
  .about-portrait { width: min(32vw, 420px); }
  .perspectives-hero-art { width: min(38vw, 520px); top: 70px; }
}

/* Case study pages. The work carries the page, so type steps back and images run large. */
.internal-hero h1.project-title { font-size: clamp(52px, 7.4vw, 124px); line-height: .9; text-wrap: balance; }
.project-hero .eyebrow a { color: inherit; }
.project-hero .eyebrow a:hover { color: #fff; }
.project-hero-media { padding-top: clamp(28px, 4vw, 56px); }
.project-hero-figure { margin: 0; overflow: hidden; background: #0c0c0c; }
.project-hero-figure img { width: 100%; height: auto; }
.project-overview { display: grid; grid-template-columns: .72fr 2.28fr; gap: clamp(42px, 8vw, 140px); }
.project-overview-copy p { max-width: 64ch; margin: 0 0 1.1em; color: #b4b4b4; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.62; }
.project-overview-copy p:first-child { color: #fff; font-size: clamp(22px, 2vw, 30px); line-height: 1.35; }
.project-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(46px, 6vw, 80px); border-top: 1px solid var(--color-border); }
.project-facts div { padding: 22px 20px 0 0; }
.project-facts span { display: block; color: #777; font: 600 11px/1 var(--font-label); text-transform: uppercase; }
.project-facts strong, .project-facts a { display: block; margin-top: 10px; color: #fff; font-size: 18px; font-weight: 500; }
.project-facts a { text-decoration: underline; text-decoration-color: rgba(253,21,104,.55); text-underline-offset: 3px; }
.project-gallery-section { padding-top: 0; }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: start; }
.project-shot { margin: 0; overflow: hidden; background: #0c0c0c; }
.project-shot.is-wide { grid-column: 1 / -1; }
.project-shot img { width: 100%; height: auto; }
.project-pager-section { border-top: 1px solid var(--color-border); }
.project-pager { display: grid; grid-template-columns: 1fr 1fr; }
.project-pager a { display: flex; flex-direction: column; gap: 12px; padding: clamp(32px, 4.5vw, 60px) 0; color: inherit; }
.project-pager a + a { padding-left: clamp(20px, 4vw, 56px); border-left: 1px solid var(--color-border); text-align: right; }
.project-pager span { color: #777; font: 600 11px/1 var(--font-label); text-transform: uppercase; }
.project-pager strong { font-size: clamp(24px, 3vw, 46px); line-height: 1.05; font-weight: 500; transition: color 220ms ease; }
.project-pager a:hover strong { color: var(--color-accent-pink); }

/* Works: earlier projects as a full image grid, so nothing reads as archived. */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(34px, 3.4vw, 52px) clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 70px); }
.work-card { display: block; color: inherit; }
.work-card figure { aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: #0c0c0c; }
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.work-card:hover img { transform: scale(1.035); }
.work-card h3 { margin: 18px 0 8px; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; font-weight: 500; }
.work-card p { margin: 0; color: #888; font: 600 11px/1.4 var(--font-label); text-transform: uppercase; }

@media (max-width: 900px) {
  .project-overview { grid-template-columns: 1fr; }
  .project-facts { grid-template-columns: 1fr 1fr; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .project-gallery, .work-grid, .project-facts { grid-template-columns: 1fr; }
  .project-shot.is-wide { grid-column: auto; }
  .project-pager { grid-template-columns: 1fr; }
  .project-pager a + a { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); text-align: left; }
}
/* An unpaired gallery frame gets its own row, centred, instead of leaving a hole. */
.project-shot.is-solo { grid-column: 1 / -1; display: flex; justify-content: center; padding: clamp(28px, 5vw, 80px); }
.project-shot.is-solo img { width: auto; max-width: min(100%, 760px); max-height: 82vh; object-fit: contain; }
@media (max-width: 600px) {
  .project-shot.is-solo { grid-column: auto; padding: 0; }
  .project-shot.is-solo img { width: 100%; max-width: 100%; max-height: none; }
}

/* Case study detail: facts, challenge and solution, features, brand system. */
h2.section-index { margin: 0; }
.project-overview > .section-index { align-self: start; }
.project-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); column-gap: 24px; }
.project-facts ul { margin: 10px 0 0; padding: 0; list-style: none; }
.project-facts li { color: #fff; font-size: 16px; line-height: 1.55; }
.case-story, .case-brand { display: grid; grid-template-columns: .72fr 2.28fr; gap: clamp(42px, 8vw, 140px); padding-block: clamp(70px, 9vw, 140px); border-top: 1px solid var(--color-border); }
.case-story-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.case-story h3, .case-notes h3 { margin: 0 0 16px; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.08; font-weight: 500; }
.case-story p, .case-notes p { margin: 0 0 1em; color: #b4b4b4; font-size: 17px; line-height: 1.62; }
.case-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); margin: clamp(44px, 6vw, 76px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.case-features li { padding: 26px 0 30px; border-bottom: 1px solid var(--color-border); }
.case-features span { display: block; margin-bottom: 18px; color: var(--color-accent-pink); font: 600 11px/1 var(--font-label); }
.case-features h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.2; }
.case-features p { margin: 0; color: #999; font-size: 16px; line-height: 1.55; }
.case-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0; }
.case-swatch { margin: 0; }
.case-swatch div { aspect-ratio: 4 / 3; border: 1px solid rgba(255,255,255,.14); }
.case-swatch figcaption { margin-top: 10px; color: var(--color-text-muted); font: 600 11px/1 var(--font-label); letter-spacing: .06em; }
.case-type { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.case-type b { color: #fff; font-size: clamp(64px, 8vw, 120px); line-height: .9; font-weight: 400; }
.case-type span { color: var(--color-text-muted); font-size: 18px; }
.case-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 44px; margin-top: 40px; }
.case-notes h3 { font-size: 21px; }
@media (max-width: 900px) {
  .case-story, .case-brand { grid-template-columns: 1fr; }
  .case-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .case-story-cols, .case-features { grid-template-columns: 1fr; }
}
/* A hero from a small source is shown at its own size, centred, rather than stretched soft. */
.project-hero-figure.is-compact { display: flex; justify-content: center; padding: clamp(20px, 4vw, 56px); }
.project-hero-figure.is-compact img { width: auto; max-width: 100%; }
/* Client testimonials, quoted as written. */
.case-quote-section { border-top: 1px solid var(--color-border); }
.case-quote { padding-block: clamp(70px, 9vw, 140px); }
.case-quote figure, .client-quote { margin: 0; }
.case-quote figure { max-width: 1100px; }
.case-quote blockquote, .client-quote blockquote { margin: 0; }
.case-quote blockquote p { margin: 0; font-size: clamp(28px, 3.3vw, 50px); line-height: 1.14; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }
.case-quote figcaption, .client-quote figcaption { margin-top: 26px; color: var(--color-text-muted); font-size: 15px; line-height: 1.5; }
.case-quote figcaption strong, .client-quote figcaption strong { display: block; color: #fff; font-size: 18px; font-weight: 500; }
.client-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 5vw, 80px) clamp(28px, 4vw, 72px); }
.client-quote { padding-top: 30px; border-top: 1px solid var(--color-border); }
.client-quote blockquote p { margin: 0; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.45; }
.client-quote figcaption a { display: table; margin-top: 16px; }
@media (max-width: 900px) { .client-quotes { grid-template-columns: 1fr; } }
/* Video testimonials: a local thumbnail until play, then the YouTube player in place. */
.case-quote.has-video { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.video-facade, .video-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; overflow: hidden; background: #0c0c0c; }
.video-facade { cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity 300ms ease, transform 900ms var(--ease); }
.video-facade:hover img, .video-facade:focus-visible img { opacity: 1; transform: scale(1.02); }
.video-play { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; border-radius: 50%; background: var(--color-accent-pink); box-shadow: 0 10px 40px rgba(0,0,0,.45); transform: translate(-50%, -50%); }
.video-play::after { content: ''; position: absolute; top: 25px; left: 31px; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 20px solid #fff; }
.client-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-bottom: clamp(56px, 7vw, 100px); }
.client-video { margin: 0; }
.client-video figcaption { margin-top: 16px; color: var(--color-text-muted); font-size: 15px; line-height: 1.5; }
.client-video figcaption strong { display: block; color: #fff; font-size: 17px; font-weight: 500; }
@media (max-width: 900px) {
  .case-quote.has-video, .client-videos { grid-template-columns: 1fr; }
}
.project-facts a { overflow-wrap: anywhere; }
/* Verified results and evidence: numbers first, with the source and window named. */
.case-results, .case-proofs { display: grid; grid-template-columns: .72fr 2.28fr; gap: clamp(42px, 8vw, 140px); padding-block: clamp(70px, 9vw, 140px); border-top: 1px solid var(--color-border); }
.case-results-note { max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 48px); color: var(--color-text-muted); font-size: 16px; line-height: 1.6; }
.case-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); column-gap: 28px; border-top: 1px solid var(--color-border); }
.case-stat { padding: 26px 0 30px; border-bottom: 1px solid var(--color-border); }
.case-stat span { display: block; color: var(--color-text-muted); font: 600 11px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.case-stat strong { display: block; margin: 14px 0 10px; color: #fff; font-size: clamp(42px, 4.6vw, 70px); line-height: .95; font-weight: 500; letter-spacing: -.02em; }
.case-stat em { display: block; color: #aaa; font-size: 15px; font-style: normal; line-height: 1.5; }
.case-points { margin: clamp(34px, 4vw, 54px) 0 0; padding: 0; list-style: none; }
.case-points li { position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--color-border); color: #d9d9d9; font-size: 18px; line-height: 1.55; }
.case-points li::before { content: ''; position: absolute; top: 28px; left: 0; width: 12px; height: 2px; background: var(--color-accent-pink); }
.case-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.case-proof { margin: 0; }
.case-proof.is-wide { grid-column: 1 / -1; }
.case-proof img { width: 100%; height: auto; background: #0c0c0c; }
.case-proof figcaption { margin-top: 12px; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .case-results, .case-proofs { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .case-proof-grid { grid-template-columns: 1fr; } .case-proof.is-wide { grid-column: auto; } }
/* Four stats sit two by two instead of leaving one alone on a row. */
.case-stats:has(> .case-stat:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .case-stats:has(> .case-stat:nth-child(4):last-child) { grid-template-columns: 1fr; } }
/* Four features sit two by two instead of leaving one alone on a row. */
.case-features:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .case-features:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr; } }
/* Google reviews: the rating first, then the reviews as written. */
.google-reviews { margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(34px, 4vw, 52px); border-top: 1px solid var(--color-border); }
.google-reviews-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 28px; margin-bottom: clamp(28px, 4vw, 48px); }
.google-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 0; color: var(--color-text-muted); font-size: 16px; }
.google-rating strong { color: #fff; font-size: clamp(44px, 5vw, 72px); line-height: .9; font-weight: 500; }
.google-rating .stars { color: #f5b400; font-size: 20px; letter-spacing: 2px; }
.google-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px); }
.google-review { margin: 0; padding-top: 24px; border-top: 1px solid var(--color-border); }
.google-review blockquote { margin: 0; }
.google-review blockquote p { margin: 0; color: #d9d9d9; font-size: 17px; line-height: 1.6; }
.google-review figcaption { margin-top: 18px; color: var(--color-text-muted); font-size: 14px; }
.google-review figcaption strong { display: block; color: #fff; font-size: 16px; font-weight: 500; }
@media (max-width: 900px) { .google-review-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .google-review-grid { grid-template-columns: 1fr; } }

/* The author block on About. Every article byline points here through Person.url, so the page
   has to establish who wrote the thing. It sits on the manifesto grid from section 01, so the
   label, the statement and the copy line up with the rest of the page. */
.about-founder .founder-name { max-width: 1100px; margin: 0; font-size: clamp(42px, 6.2vw, 96px); line-height: .98; font-weight: 500; }
.about-founder .founder-name span { color: #777; }
/* Founder profile: the portrait holds the left column under the section index and stays in view while
   the copy beside it is read; the story and Mo's own line from the founder release sit on the right. */
.founder-layout { display: grid; grid-template-columns: .72fr 2.28fr; gap: clamp(42px, 8vw, 140px); align-items: start; }
.founder-aside { display: grid; gap: clamp(22px, 2.4vw, 34px); position: sticky; top: 110px; }
.founder-portrait { margin: 0; overflow: hidden; border-radius: 14px; background: #111; aspect-ratio: 1023 / 1537; }
.founder-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founder-copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 76px); }
.founder-copy > div { display: grid; align-content: start; gap: 24px; }
.founder-copy p { margin: 0; color: #a1a1a1; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62; }
.founder-copy em { color: #d6d6d6; }
.founder-quote { margin: 0; padding-left: 22px; border-left: 2px solid transparent; border-image: var(--color-accent) 1; }
.founder-quote p { color: #fff; font-size: clamp(20px, 1.55vw, 25px); line-height: 1.42; }
.founder-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top-color: rgba(255, 255, 255, .14); }
@media (max-width: 900px) {
  .founder-layout { grid-template-columns: 1fr; gap: 36px; }
  .founder-aside { position: static; }
  .founder-portrait { max-width: 420px; }
  .founder-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) { .founder-copy { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .founder-rail { grid-template-columns: 1fr; } }

/* Press coverage on About, under the founder block, because every piece so far profiles the
   founder. Rows link out to the publications. Nothing in them is restated as our own claim:
   the pull quote is Mo's own words. */
.about-press { border-top: 1px solid var(--color-border); }
.about-press .press-title { max-width: 1100px; margin: 0; font-size: clamp(42px, 6.2vw, 96px); line-height: .98; font-weight: 500; }
.about-press .press-title span { color: #777; }
.press-body { display: grid; grid-template-columns: .72fr 2.28fr; gap: 26px clamp(42px, 8vw, 140px); margin-top: clamp(40px, 5vw, 76px); }
.press-quote { grid-column: 2; margin: 0; }
.press-quote p { text-wrap: pretty; max-width: 780px; margin: 0; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.32; font-weight: 500; }
.press-quote cite { display: block; margin-top: 20px; color: var(--color-text-muted); font: 600 11px/1.4 var(--font-label); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.press-list { margin: clamp(52px, 6vw, 96px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
/* Columns follow the page's .72fr / 2.28fr split, so headlines line up under the heading and quote. */
.press-list a { --press-gap: clamp(42px, 8vw, 140px); display: grid; grid-template-columns: calc((100% - var(--press-gap)) * .24) minmax(0, 1fr) auto; gap: 10px var(--press-gap); align-items: baseline; padding: clamp(24px, 3vw, 38px) 0; border-bottom: 1px solid var(--color-border); color: #fff; transition: color var(--duration-fast) ease, padding var(--duration-base) var(--ease); }
.press-list a:hover, .press-list a:focus-visible { color: var(--color-accent-pink); padding-inline: 14px; }
.press-outlet { color: var(--color-text-muted); font: 600 11px/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.press-list strong { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; font-weight: 500; text-wrap: balance; }
.press-meta { display: flex; align-items: baseline; gap: 22px; }
.press-list time { color: #888; font-size: 14px; white-space: nowrap; }
.press-list i { color: #777; font-style: normal; transition: transform var(--duration-fast) ease; }
.press-list a:hover i { transform: translate(3px, -3px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .press-body { grid-template-columns: 1fr; }
  .press-quote { grid-column: 1; }
  .press-list a { grid-template-columns: 1fr; }
  .press-meta { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .press-list a, .press-list i { transition: none; } }


/* Video lightbox (videos.js). The testimonial plays over a dimmed page instead of inside the card,
   with the caption and a close control under the frame. YouTube still draws its own controls
   inside the embed; everything around them is ours. */
.video-lightbox { width: min(1180px, calc(100vw - 48px), calc((100svh - 150px) * 16 / 9)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; overflow: visible; background: transparent; color: #fff; }
.video-lightbox::backdrop { background: rgba(0, 0, 0, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.video-lightbox[open] { animation: lightboxIn 360ms var(--ease); }
.video-lightbox[open]::backdrop { animation: lightboxFade 360ms ease; }
@keyframes lightboxIn { from { opacity: 0; transform: translateY(16px) scale(.985); } }
@keyframes lightboxFade { from { opacity: 0; } }
.video-lightbox-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.video-lightbox-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.video-lightbox-title { margin: 0; color: #fff; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; }
.video-lightbox-close { display: grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.video-lightbox-close:hover, .video-lightbox-close:focus-visible { border-color: #fff; background: #fff; color: #000; }
.video-lightbox-close svg { width: 18px; height: 18px; }
body.has-lightbox { overflow: hidden; }
@media (max-width: 600px) {
  .video-lightbox { width: 100vw; }
  .video-lightbox-frame { border-radius: 0; }
  .video-lightbox-bar { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-lightbox[open], .video-lightbox[open]::backdrop { animation: none; }
}

/* Labels in the white About system section; the rail keeps #777 on dark grounds. */
.about-system .location-rail span { color: #666; }

/* Motion states for case studies and articles (motion.js), plus the small labels,
   rules and links both page types share. Nothing is hidden unless the head script
   has marked the page .motion and the reader allows motion. */
.cs-label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--color-text-muted); font: 600 11px/1.3 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.cs-label::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-pink); }
.cs-label::after { content: '/'; content: '/' / ''; }
.cs-rule { height: 1px; background: var(--color-border); transform-origin: left center; }
.cs-live { position: relative; display: inline-flex; align-items: center; gap: 14px; padding-bottom: 10px; color: #fff; font-size: 17px; }
.cs-live::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; opacity: .45; transition: opacity 300ms ease; }
.cs-live:hover::after { opacity: 1; }
.cs-live i { font-style: normal; transition: transform 300ms var(--ease); }
.cs-live:hover i { transform: translateX(4px); }
[data-split] .word { display: inline-block; white-space: nowrap; }
[data-split="lines"] .line { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .motion [data-split]:not(.is-split) { opacity: 0; }
  .motion [data-split="chars"] .char { display: inline-block; opacity: 0; filter: blur(30px); transform: scale(1.5); transition: opacity 750ms cubic-bezier(.33, 1, .68, 1), filter 750ms cubic-bezier(.33, 1, .68, 1), transform 750ms cubic-bezier(.33, 1, .68, 1); transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * var(--step, 30ms)); }
  .motion [data-split="chars"].is-in .char { opacity: 1; filter: blur(0); transform: none; }
  .motion [data-split="lines"] .line { opacity: 0; filter: blur(2px); transition: opacity 500ms ease, filter 500ms ease; transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * 100ms); }
  .motion [data-split="lines"].is-in .line { opacity: 1; filter: blur(0); }
  .motion [data-reveal="blur"] { opacity: 0; filter: blur(5px); transition: opacity 1s ease, filter 1s ease; transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * 90ms); }
  .motion [data-reveal="blur"].is-in { opacity: 1; filter: blur(0); }
  /* Article prose blurs dozens of blocks at once, which costs style and layout time on load.
     A rise reads the same there and paints far cheaper; blur stays for the few single elements. */
  .motion [data-reveal-children] > [data-reveal="blur"] { filter: none; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms var(--ease); }
  .motion [data-reveal-children] > [data-reveal="blur"].is-in { transform: none; }
  .motion [data-reveal="clip"] { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * 200ms); }
  .motion [data-reveal="clip-x"] { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * 200ms); }
  .motion [data-reveal="clip"].is-in, .motion [data-reveal="clip-x"].is-in { clip-path: inset(0 0 0 0); }
  .motion [data-reveal="line"] { opacity: 0; transform: scaleX(0); transition: transform 1.5s cubic-bezier(.33, 1, .68, 1), opacity 1.5s ease; transition-delay: var(--delay, 0ms); }
  .motion [data-reveal="line"].is-in { opacity: 1; transform: scaleX(1); }
  .motion [data-reveal="rise"] { opacity: 0; transform: translateY(6rem) rotate(2deg); transition: opacity 1.2s ease, transform 2.2s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * 140ms); }
  .motion [data-reveal="rise"].is-in { opacity: 1; transform: none; }
  .motion [data-zoom] { transform: scale(1.16); will-change: transform; }
}

@media print {
  .motion [data-split], .motion [data-reveal], .motion [data-split] .char, .motion [data-split] .line { opacity: 1 !important; filter: none !important; clip-path: none !important; transform: none !important; }
}

/* Case study pages: a 12-column editorial grid, staggered story rows, highlight cards
   on a light surface, a brand band with a gallery marquee, and a next-projects
   carousel. Motion lives in motion.css. */
.cs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }

.cs-hero { padding: clamp(150px, 20vh, 220px) 0 clamp(56px, 7vw, 96px); }
.cs-kicker { margin: 0 0 clamp(18px, 2vw, 28px); color: var(--color-text-muted); font: 600 11px/1.3 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.cs-kicker a { color: #fff; transition: color 200ms ease; }
.cs-kicker a:hover { color: var(--color-accent-pink); }
/* The cap keeps the longest word on one line at every width. */
.cs-title { margin: 0; font-size: min(clamp(40px, 9.6vw, 164px), calc((100vw - 2 * var(--page-pad)) / (var(--longest, 8) * .62))); line-height: .94; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.cs-hero .cs-rule { margin: clamp(34px, 4vw, 56px) 0 clamp(28px, 3vw, 44px); background: rgba(255, 255, 255, .28); }
.cs-hero-grid { row-gap: 36px; }
.cs-hero-meta { grid-column: span 3; display: grid; align-content: start; gap: 28px; }
.cs-hero-meta ul { margin: 14px 0 0; padding: 0; list-style: none; }
.cs-hero-meta li { color: #fff; font-size: 17px; line-height: 1.5; }
.cs-hero-intro { grid-column: 7 / span 6; }
.cs-hero-intro p { margin: 0 0 1em; color: #d4d4d4; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }
.cs-hero-intro .cs-hero-link { margin: 26px 0 0; }

.cs-media { padding-bottom: clamp(70px, 9vw, 140px); }
.cs-media-frame { position: relative; margin: 0; overflow: hidden; border-radius: clamp(12px, 1.2vw, 18px); background: #0c0c0c; }
.cs-media-frame img { display: block; width: 100%; height: auto; transform-origin: center; }
.cs-media-frame.is-compact { display: flex; justify-content: center; padding: clamp(24px, 4vw, 64px); }
.cs-media-frame.is-compact img { width: auto; max-width: 100%; }
.cs-showcase { padding-bottom: clamp(90px, 11vw, 160px); }
.cs-page .project-gallery-section { padding-top: clamp(56px, 7vw, 110px); }

.cs-story { padding-block: clamp(80px, 10vw, 150px) clamp(90px, 11vw, 170px); border-top: 1px solid var(--color-border); }
.cs-story-row { align-items: center; row-gap: 32px; }
.cs-story-row + .cs-story-row { margin-top: clamp(80px, 10vw, 150px); }
.cs-story-text { grid-column: 2 / span 4; }
.cs-story-text .cs-label { margin-bottom: 24px; }
.cs-story-text p { margin: 0 0 1em; color: #d4d4d4; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; }
.cs-story-media { grid-column: 7 / span 6; margin: 0; overflow: hidden; border-radius: 14px; background: #0c0c0c; }
.cs-story-media img { display: block; width: 100%; height: auto; }
.cs-story-row.is-flipped .cs-story-media { grid-column: 1 / span 6; grid-row: 1; }
.cs-story-row.is-flipped .cs-story-text { grid-column: 8 / span 4; grid-row: 1; }
.cs-story-row.is-text-only .cs-story-text { grid-column: 2 / span 7; }

.case-results > .cs-label, .case-proofs > .cs-label, .case-brand > .cs-label { align-self: start; padding-top: 6px; }

.cs-surface { background: #f3f0ea; color: #0b0b0b; }
.cs-surface .cs-label { color: #555; }
.cs-features { padding-block: clamp(90px, 11vw, 160px); }
.cs-features .cs-label { margin-bottom: clamp(34px, 4vw, 56px); }
.cs-feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
.cs-feature-list:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-feature { display: flex; flex-direction: column; min-height: 280px; padding: clamp(22px, 2.4vw, 34px); border-radius: 14px; background: #0b0b0b; color: #fff; }
.cs-feature span { color: var(--color-accent-pink); font: 600 11px/1 var(--font-label); }
.cs-feature h3 { margin: auto 0 12px; padding-top: 48px; color: #fff; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; font-weight: 500; }
.cs-feature p { margin: 0; color: #a9a9a9; font-size: 16px; line-height: 1.55; }

.cs-band { position: relative; background: var(--color-accent); }
.cs-marquee { overflow-x: auto; overflow-y: hidden; padding-block: clamp(56px, 7vw, 110px); scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.cs-marquee::-webkit-scrollbar { display: none; }
.cs-marquee:focus-visible { outline: 2px solid #fff; outline-offset: -8px; }
.cs-marquee.is-dragging { cursor: grabbing; }
.cs-marquee img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.cs-marquee-track { display: flex; width: max-content; }
.cs-marquee-group { display: flex; gap: clamp(14px, 1.6vw, 22px); padding-right: clamp(14px, 1.6vw, 22px); }
.cs-marquee-item { flex: none; height: clamp(220px, 30vw, 440px); margin: 0; overflow: hidden; border-radius: 14px; background: #0c0c0c; box-shadow: 0 30px 60px rgba(0, 0, 0, .22); }
.cs-marquee-item img { display: block; width: auto; height: 100%; }
.cs-marquee-controls { position: absolute; right: var(--page-pad); bottom: 16px; display: flex; gap: 8px; }
.cs-marquee-toggle, .cs-marquee-step { height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff; font: 600 11px/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background 200ms ease; }
.cs-marquee-step { display: grid; place-items: center; width: 28px; padding: 0; font-size: 14px; letter-spacing: 0; }
.cs-marquee-toggle:hover, .cs-marquee-step:hover { background: #000; }
.cs-marquee-toggle:focus-visible, .cs-marquee-step:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.cs-outcome { padding-block: clamp(90px, 11vw, 160px); }
.cs-outcome .cs-rule { margin-bottom: clamp(26px, 3vw, 40px); background: rgba(255, 255, 255, .28); }
.cs-outcome-head { align-items: center; margin-bottom: clamp(32px, 4vw, 56px); }
.cs-outcome-head .cs-label { grid-column: 1 / span 6; }
.cs-outcome-link { grid-column: 7 / span 6; }
.cs-outcome-text { grid-column: 1 / span 9; margin: 0; font-size: clamp(28px, 3.2vw, 50px); line-height: 1.16; font-weight: 500; letter-spacing: -.02em; }

.cs-next { padding-block: clamp(90px, 11vw, 160px); border-top: 1px solid var(--color-border); overflow: hidden; }
.cs-next-head { align-items: end; }
.cs-next-head p { grid-column: 1 / span 6; margin: 0; color: #d4d4d4; font-size: clamp(18px, 1.6vw, 24px); }
.cs-next-head h2 { grid-column: 7 / span 6; justify-self: end; margin: 0; font-size: clamp(44px, 6.4vw, 108px); line-height: .94; font-weight: 500; letter-spacing: -.03em; text-align: right; }
.cs-next .cs-rule { margin: clamp(26px, 3vw, 40px) 0 20px; background: rgba(255, 255, 255, .28); }
.cs-next-controls { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.cs-next-controls div { display: flex; gap: 10px; }
.cs-next-controls button { width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: transparent; color: #fff; font-size: 18px; cursor: pointer; transition: background 200ms ease, color 200ms ease, opacity 200ms ease; }
.cs-next-controls button:hover:not(:disabled) { background: #fff; color: #000; }
.cs-next-controls button:disabled { opacity: .3; cursor: default; }
.cs-next-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 60px) / 4)); gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cs-next-track::-webkit-scrollbar { display: none; }
.cs-next-card { display: block; color: #fff; scroll-snap-align: start; }
.cs-next-card:first-child { grid-column: span 2; }
.cs-next-card figure { position: relative; height: clamp(230px, 24vw, 400px); margin: 0; overflow: hidden; border-radius: 14px; background: #0c0c0c; }
.cs-next-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.cs-next-card:hover img { transform: scale(1.04); }
.cs-pill { position: absolute; bottom: 16px; left: 16px; margin: 0; padding: 7px 14px; border-radius: 999px; background: #fff; color: #0b0b0b; font-size: 14px; line-height: 1.2; font-weight: 500; }
.cs-next-meta { margin: 14px 0 0; color: var(--color-text-muted); font-size: 14px; }

@media (max-width: 1000px) {
  .cs-hero-meta { grid-column: span 6; }
  .cs-hero-intro { grid-column: 1 / -1; }
  .cs-story-text, .cs-story-row.is-flipped .cs-story-text, .cs-story-row.is-text-only .cs-story-text,
  .cs-story-media, .cs-story-row.is-flipped .cs-story-media { grid-column: 1 / -1; grid-row: auto; }
  .cs-feature-list, .cs-feature-list:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; }
  .cs-outcome-head .cs-label, .cs-outcome-link, .cs-outcome-text { grid-column: 1 / -1; }
  .cs-outcome-link { margin-top: 18px; }
  .cs-next-head p, .cs-next-head h2 { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .cs-next-head h2 { margin-top: 14px; }
  .cs-next-track { grid-auto-columns: minmax(240px, 42%); }
}
@media (max-width: 600px) {
  .cs-hero-meta { gap: 22px; }
  .cs-hero-meta li { font-size: 15px; }
  .cs-feature-list, .cs-feature-list:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr; }
  .cs-feature { min-height: 0; }
  .cs-feature h3 { padding-top: 32px; }
  .cs-next-card:first-child { grid-column: span 1; }
  .cs-next-track { grid-auto-columns: 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-marquee-toggle { display: none; }
}

/* Zoom parallax lead visual (motion.js). Seven tiles share one pinned stage. Each layer scales from 1
   to its own --s as --zp runs from 0 to 1 through a section three screens tall, so the key visual in
   the centre grows to fill the screen while the tiles around it fly out past the edges. Corner radius
   is divided by the same factor, so it stays 6px on screen. Without motion it is a still collage. */
.cs-zoom { --zuw: 1vw; --zuh: 1vh; position: relative; height: 100svh; margin-bottom: clamp(70px, 9vw, 140px); }
.cs-zoom-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.cs-zoom-layer { --grow: calc(1 + (var(--s) - 1) * var(--zp, 0)); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: scale(var(--grow)); pointer-events: none; }
.cs-zoom-tile { position: relative; width: calc(25 * var(--zuw)); height: calc(25 * var(--zuh)); margin: 0; overflow: hidden; border-radius: calc(6px / var(--grow)); background: #0c0c0c; }
.cs-zoom-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The tiles around the key visual fade out over the second half of the zoom, so it always ends on the
   key visual alone, including portrait screens where the outer tiles would otherwise still be in view. */
.cs-zoom-layer:not(:first-child) { opacity: clamp(0, calc((.85 - var(--zp, 0)) * 2), 1); }
/* Seven tiles in a mirrored layout (Mo, 2026-09-14): a centre column of three website sections (services
   above the key visual, why providers below) and two phone views on each side, inner phones at +-20 units and
   outer phones at +-33, so the collage spans -38.5 to +38.5 of the 77.5 content-width units (motion.js).
   Widths are in content units, heights in viewport units, each sized from its screenshot's own proportions at
   16:10; offsets move each tile's centre. Phone pairs share a top edge and crop from the top, so headings stay. */
.cs-zoom-layer:nth-child(2) .cs-zoom-tile { top: calc(-28.2 * var(--zuh)); left: 0; width: calc(25 * var(--zuw)); height: calc(27.3 * var(--zuh)); }
.cs-zoom-layer:nth-child(3) .cs-zoom-tile { top: calc(-8.25 * var(--zuh)); left: calc(-20 * var(--zuw)); width: calc(11 * var(--zuw)); height: calc(43.5 * var(--zuh)); }
.cs-zoom-layer:nth-child(4) .cs-zoom-tile { top: calc(-10.05 * var(--zuh)); left: calc(20 * var(--zuw)); width: calc(11 * var(--zuw)); height: calc(39.9 * var(--zuh)); }
.cs-zoom-layer:nth-child(5) .cs-zoom-tile { top: calc(28.5 * var(--zuh)); left: 0; width: calc(25 * var(--zuw)); height: calc(28 * var(--zuh)); }
.cs-zoom-layer:nth-child(6) .cs-zoom-tile { top: calc(3 * var(--zuh)); left: calc(-33 * var(--zuw)); width: calc(11 * var(--zuw)); height: calc(46 * var(--zuh)); }
.cs-zoom-layer:nth-child(7) .cs-zoom-tile { top: calc(3.7 * var(--zuh)); left: calc(33 * var(--zuw)); width: calc(11 * var(--zuw)); height: calc(47.4 * var(--zuh)); }
.cs-zoom-layer:is(:nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7)) .cs-zoom-tile img { object-position: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .motion .cs-zoom { height: 300vh; }
}
/* Portrait screens: the collage lives in a landscape box as wide as the screen, 16:10 like the key
   visual, so it ends on the whole image across the width, and two screens of scroll are enough. */
@media (max-aspect-ratio: 1/1) {
  .cs-zoom { --zuh: .625vw; }
}
@media (max-aspect-ratio: 1/1) and (prefers-reduced-motion: no-preference) {
  .motion .cs-zoom { height: 200vh; }
}