@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; }
}