/* ============================================================
   WEBSITESPIXEL — main stylesheet
   ------------------------------------------------------------
   Design system
     Theme   : dark luxury (#000 base), one white hard-cut block
     Accent  : emerald #43cf9c, used only in small semantic doses
     Color   : atmosphere via blurred gradient blooms, never flat fills
     Type    : Geist (sans) · Source Serif 4 (buttons + display accents)
               · Geist Mono (numerals, micro-labels)
               All fonts are open-source (SIL OFL), self-hosted.
     Radius  : pills for interactive · 14-18px cards · 35px section overlap
     Motion  : one scroll-driven set-piece; ambient loops; hover physics.
               Native CSS scroll timelines with a GSAP fallback (see main.js).

   Contents
     01 Fonts & tokens          08 Storefront reel (slides)
     02 Base & reset            09 Proof band (white block)
     03 Utilities               10 Services bento
     04 Typography primitives   11 Why / results
     05 Buttons                 12 Process (horizontal pan)
     06 Navigation & menu       13 Review wall
     07 Hero + work set-piece   14 Tech stack
                                15 Final CTA · 16 Footer · 17 FAB
                                18 Case-study modal
                                19 Responsive · 20 Reduced motion · 21 Touch targets
   ============================================================ */

/* ============ 01 · FONTS & TOKENS ============ */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
}
/* The real italic. Subset to the characters headlines actually use, which is
   why it is 12KB against the roman's 50KB.

   Before this file existed, every `font-style: italic` on the serif was drawn
   by the browser as a flat 14deg shear of the roman — a steeper lean than the
   genuine face, which is cut at 12deg, and with none of its letterforms. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
}

:root {
  /* Surfaces */
  --bg: #000000;
  --bg-2: #101012;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);

  /* Hairlines */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Ink (opacity is the type hierarchy) */
  --text: #f2f4f3;
  --text-2: rgba(255, 255, 255, 0.55);
  --text-3: rgba(255, 255, 255, 0.35);

  /* Accent */
  --accent: #43cf9c;
  --accent-soft: rgba(67, 207, 156, 0.13);
  --accent-ink: #06231a;

  /* Shape */
  --r-card: 15px;
  --r-media: 12px;

  /* Type */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --marquee-dur: 38s;

  /* linear() approximations of GSAP power easings, for CSS scroll timelines */
  --power1-out: linear(0, 0.0862 6.25%, 0.2852 18.75%, 0.535 37.5%, 0.71 50%, 0.875 68.75%, 0.9297 78%, 0.9687 87.5%, 1);
  --power2-out: linear(0, 0.0036 5%, 0.1234 16%, 0.319 28%, 0.5432 40%, 0.7345 53%, 0.8621 66%, 0.9573 79%, 0.9865 88%, 1);
  --power3-out: linear(0, 0.0029 8%, 0.1815 22%, 0.4599 36%, 0.6816 49%, 0.8495 63%, 0.9518 77%, 0.9876 87%, 1);

  /* Bloom atmosphere (color only ever appears blurred) */
  --bloom: linear-gradient(180deg, rgba(0, 233, 228, 0.18) 0%, rgba(160, 79, 244, 0.20) 100%);
}

/* ============ 02 · BASE & RESET ============ */



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Weight may be synthesised (Geist covers 300-700, so it never needs to be).
     Style may not: if the italic ever fails to arrive we fall back to the
     roman, never to a sheared imitation of it. */
  font-synthesis: weight small-caps;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
em { font-style: normal; }

::selection { background: rgba(67, 207, 156, 0.25); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ============ 03 · UTILITIES ============ */

.container { width: min(92vw, 1320px); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 18px; border-radius: 999px; font-weight: 500; font-size: 0.9rem;
  transform: translateY(-200%); transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* Film grain: fixed, non-scrolling, cheap to paint */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ============ 04 · TYPOGRAPHY PRIMITIVES ============ */

/* ------------------------------------------------------------
   THE TURN

   Every headline gets at most one emphasised phrase: the word
   where the sentence stops describing what we do and starts
   naming what it is worth. It is set in the serif italic, and it
   is the only emphasis device on the site. Most headings — the
   section labels, "What is included.", "The team." — get none.
   The ratio is the point. If every heading is emphasised, none is.

   What this replaces: emphasis by hue alone. Same face, same
   weight, same size, just green. That fails WCAG 1.4.1, because
   colour was the sole carrier of the meaning, and it spent the
   interaction colour on text nobody can click. Green survives in
   exactly one place now — the hero — where nothing competes.

   Three numbers here are doing real work:
     1.06em    Source Serif's x-height sits below Geist's, so at a
               matched nominal size it reads visibly smaller.
     -0.008em  the sans runs near -0.03em; an italic serif at that
               fit starts colliding with its own neighbours.
     0.05em    an italic's final letter leans into what follows it.
   ------------------------------------------------------------ */
h1 em, h2 em, .turn {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.008em;
  padding-right: 0.05em;
}

/* A retraction inside a headline — the qualifying half of a two-part claim.
   The only place on the site where size varies within a single heading, and
   it earns it: a sentence that walks back the one before it should be quieter
   than the claim, not the same size arguing with it. Used once, on the AI
   page: "We use AI to do the slow parts faster. / Not to do your thinking
   for you." */
.h-retract {
  display: block;
  margin-top: 0.4em;
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--text-2);
}

/* ------------------------------------------------------------
   OPTICAL SCALE

   Type does not scale linearly. The larger it gets the heavier
   and looser it looks, so it wants less weight and a tighter fit;
   the smaller it gets, the reverse. Faces carrying an `opsz` axis
   do this themselves. Geist has none, so it is done by hand here.

   Previously every heading from 1.9rem to 4.7rem — a 2.5x range —
   was weight 500 at roughly -0.03em. That is why the hero read
   slightly stodgy and the small headings slightly loose, without
   either being obviously wrong.
   ------------------------------------------------------------ */
.h2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.06;
  max-width: 21ch;
  text-wrap: balance;
}

.section-sub {
  color: var(--text-2);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 52ch;
  margin-top: 1.1rem;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1.3rem;
}
.px {
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--accent); display: inline-block;
}

/* ============ 05 · BUTTONS ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 46px; padding: 0 1.45rem;
  border-radius: 999px;
  font-family: var(--serif); font-size: 1rem; font-weight: 400; white-space: nowrap;
  transition: all 0.5s var(--ease-standard);
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--text); }

.btn-ghost { border: 1px solid var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: rgba(255, 255, 255, 0.3); }

.btn-lg { height: 56px; padding: 0 1.9rem; font-size: 1rem; }

/* Arrow flies out and vanishes (nav CTA) */
.btn-fly .arr { display: inline-block; margin-left: 6px; transition: transform 0.4s var(--ease), opacity 0.4s; }
.btn-fly:hover .arr { transform: translate(8px, -8px); opacity: 0; }

/* Arrow pulls inward (large CTAs) */
.btn-arrow { position: relative; padding-right: 3.1rem; }
.btn-arrow .arr2 {
  position: absolute; right: 1.5rem; top: 50%;
  transform: translateY(-50%);
  transition: right 0.35s var(--ease);
}
.btn-arrow:hover .arr2 { right: 1.25rem; }

/* ============ 06 · NAVIGATION & MENU ============ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
  transition: transform 0.5s var(--ease);
}
.nav.is-hidden { transform: translateY(calc(-100% - 20px)); }

.nav-pill {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 15px clamp(20px, 4vw, 52px);
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.nav.is-scrolled .nav-pill {
  background: rgba(11, 12, 14, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-logo {
  display: inline-flex; align-items: center;
  font-size: 1.42rem; font-weight: 500; letter-spacing: -0.01em;
}
.logo-dot { color: var(--accent); }
.logo-img { width: 34px; height: 34px; margin-right: 11px; flex-shrink: 0; }
.footer-brand .logo-img { width: 30px; height: 30px; margin-right: 10px; }

.nav-links { display: flex; gap: 0.35rem; }
.nav-links a {
  padding: 8px 14px; border-radius: 999px;
  font-size: 1.02rem; color: #dde1e5;
  transition: color 0.3s, background 0.3s;
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.nav-cta { height: 42px; }

.nav-burger {
  display: none; width: 42px; height: 42px; border-radius: 999px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--border-strong);
}
.nav-burger span { width: 16px; height: 1.6px; background: var(--text); transition: transform 0.35s var(--ease), opacity 0.3s; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

.menu-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(11, 12, 14, 0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }
.menu-links { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.menu-links a {
  font-size: clamp(1.9rem, 7vw, 2.6rem); font-weight: 500; letter-spacing: -0.03em;
  padding: 0.35rem 1rem; color: var(--text);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s;
}
.menu-links a:hover { color: var(--accent); }
.menu-overlay.is-open .menu-links a { opacity: 1; transform: none; }
.menu-overlay.is-open .menu-links a:nth-child(1) { transition-delay: 0.06s; }
.menu-overlay.is-open .menu-links a:nth-child(2) { transition-delay: 0.11s; }
.menu-overlay.is-open .menu-links a:nth-child(3) { transition-delay: 0.16s; }
.menu-overlay.is-open .menu-links a:nth-child(4) { transition-delay: 0.21s; }
.menu-overlay.is-open .menu-links a:nth-child(5) { transition-delay: 0.26s; }
.menu-mail a { color: var(--text-2); font-size: 0.95rem; }
.menu-mail a:hover { color: var(--accent); }

/* ============ 07 · HERO + WORK SET-PIECE ============ */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: center;
  padding-top: 90px; padding-bottom: 4rem;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }

.hero-glow {
  position: absolute;
  left: calc(50% - 280px); top: calc(40% - 280px);
  width: 560px; height: 560px;
  border-radius: 9999px;
  background: var(--bloom);
  filter: blur(100px);
  transform: rotate(152.044deg);
  pointer-events: none;
}
.hero-glow::after {
  content: ''; position: absolute;
  left: -70%; top: -50%;
  width: 90%; height: 90%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0, 180, 240, 0.14), transparent 70%);
}

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.hero-eyebrow {
  font-family: var(--font); font-size: clamp(0.95rem, 1.3vw, 1.12rem);
  letter-spacing: 0; text-transform: none;
  color: #c9ced6; margin-bottom: 1.7rem;
}

/* Display. The largest type on the site, so the lightest weight and the
   tightest fit of anything here. Line-height stays at 1.08: the inline
   Shopify glyph sits in a `.w` wrapper with overflow:hidden, and tightening
   the line box any further clips the top of the bag. */
.hero-title {
  font-weight: 460; letter-spacing: -0.038em; line-height: 1.08;
  font-size: clamp(2.3rem, 5.1vw, 4.7rem);
  padding-inline: clamp(0.5rem, 6vw, 6rem);
}
/* The one place green is still allowed to carry emphasis. Above the fold,
   nothing beside it is clickable, and it is the loudest moment on the site. */
.hero-title em { color: var(--accent); }
.hero-glyph {
  display: inline-block; width: auto; height: 0.78em;
  vertical-align: baseline;
  transform: translateY(0.05em);
}
/* Wrappers around the inline glyph (kept from the split-word scaffold) */
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-words .wi { display: inline-block; }

.hero-sub {
  color: var(--text-2);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  max-width: 56ch;
  margin-top: 1.6rem; margin-inline: auto;
  line-height: 1.65;
}

.hero-cats {
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem);
  width: min(1150px, 100%);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  border-radius: 14px; overflow: hidden;
}
.hero-cats a {
  background: rgba(255, 255, 255, 0.06);
  padding: 19px 20px 21px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: background 0.35s var(--ease);
}
.hero-cats a:hover { background: rgba(255, 255, 255, 0.11); }
.hero-cats b { font-weight: 500; font-size: 1.06rem; }
.hero-cats span { color: var(--text-2); font-size: 0.92rem; }

.hero-scroll {
  margin-top: 2.7rem;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-2); font-size: 1.02rem;
  transition: color 0.3s;
}
.hero-scroll:hover { color: #fff; }
.hero-scroll i { font-style: normal; transition: transform 0.35s var(--ease); }
.hero-scroll:hover i { transform: translateY(3px); }

/* --- Set-piece: the reel contracts while a portrait wall materialises.
       Sticky 340vh track; native CSS scroll timeline, GSAP fallback. --- */

.showcase { position: relative; padding-bottom: 0; }
.sc-track { position: relative; height: 340vh; view-timeline: --sc block; }
.sc-viewport {
  --gw: min(97vw, calc((100dvh - 32px) * 1.45));
  position: sticky; top: 0;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.sc-grid { position: absolute; inset: 0; z-index: 1; }

/* Columns: organic stagger, identical vertical gaps */
.sc-col {
  position: absolute;
  left: var(--x); top: var(--t);
  width: var(--w);
  display: flex; flex-direction: column;
  gap: clamp(18px, 3.4vh, 34px);
}

.sc-tile {
  width: 100%;
  aspect-ratio: var(--ar, 0.75);
  padding: 0; text-align: left; cursor: pointer;
}
/* These tiles were <button> and inherited the UA button font metrics. They are
   anchors now so the caption would inherit the page's 16px and taller line box,
   growing the .sc-m overlay by ~8px. Pinning both keeps the rendering identical.
   Excludes .sc-frag, which stays a decorative div and never had these values. */
.sc-tile:not(.sc-frag) { font-size: 13.3333px; line-height: normal; }
.sc-tile.sc-abs { position: absolute; left: var(--x); top: var(--y); width: var(--w); }

.sc-in {
  display: block; width: 100%; height: 100%;
  position: relative;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 26px 70px -30px rgba(0, 0, 0, 0.85);
  background: var(--bg-2);
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.sc-tile:not(.sc-frag):hover .sc-in {
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 44px 110px -32px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(67, 207, 156, 0.12);
}
.sc-tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.85) contrast(1.06) brightness(0.9);
  transition: filter 0.5s var(--ease);
}
.sc-tile:not(.sc-frag):hover .sc-in img { filter: grayscale(0.15) contrast(1.04) brightness(0.98); }

.sc-m {
  position: absolute; inset: auto 0 0 0;
  padding: 38px 14px 12px;
  display: flex; flex-direction: column; gap: 1px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 62%);
}
.sc-m b { font-size: 0.92rem; font-weight: 500; }
.sc-m i { font-style: normal; color: var(--text-2); font-size: 0.74rem; }

.sc-frag { opacity: 0.35; pointer-events: none; }

/* The featured reel (media) */
.showcase-media {
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.8);
  will-change: transform;
}
.sc-viewport .showcase-media {
  width: var(--gw);
  z-index: 2;
  transform-origin: center;
}

/* Native scroll-driven path (Chrome 115+, Safari 26+); GSAP mirrors this */
@supports (animation-timeline: view()) {
  .sc-viewport .showcase-media {
    animation: sc-shrink both;
    animation-timeline: --sc;
    animation-range: contain 0% contain 100%;
    animation-timing-function: var(--power2-out);
  }
  .sc-tile {
    animation-timeline: --sc, --sc;
    animation-range: contain 0% contain 100%;
    animation-fill-mode: both, both;
  }
  .sc-tile.l1 { animation-name: sc-reveal-1, sc-fade-1; animation-timing-function: var(--power3-out), var(--power1-out); }
  .sc-tile.l2 { animation-name: sc-reveal-2, sc-fade-2; animation-timing-function: var(--power2-out), var(--power1-out); }
  .sc-tile.l3 { animation-name: sc-reveal-3, sc-fade-3; animation-timing-function: var(--power1-out), var(--power1-out); }
}

/* The holds: media waits 10%, tiles scale from ~30%, fade from ~55% */
@keyframes sc-shrink {
  0%, 10% { transform: scale(1); border-radius: 14px; }
  100% { transform: scale(0.36); border-radius: 46px; }
}
@keyframes sc-reveal-1 { 0%, 28% { scale: 0; } 100% { scale: 1; } }
@keyframes sc-reveal-2 { 0%, 34% { scale: 0; } 100% { scale: 1; } }
@keyframes sc-reveal-3 { 0%, 40% { scale: 0; } 100% { scale: 1; } }
@keyframes sc-fade-1 { 0%, 50% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes sc-fade-2 { 0%, 55% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes sc-fade-3 { 0%, 60% { opacity: 0; } 92%, 100% { opacity: 1; } }

.showcase-caption {
  padding: 2.2rem 0 4rem;
  text-align: center;
  color: var(--text-3); font-size: 0.9rem;
}

/* ============ 08 · STOREFRONT REEL (slides) ============ */

.store-chrome {
  height: 42px; display: flex; align-items: center; gap: 7px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
}
.chrome-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.chrome-url {
  margin-inline: auto;
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-3);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  padding: 3px 16px; border-radius: 999px;
}

.store-stage { position: relative; aspect-ratio: 16 / 9.6; }

.store-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity 0.9s var(--ease);
  pointer-events: none;
}
.store-slide.is-active { opacity: 1; }

.store-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4% 4.5% 2.6%;
  font-size: clamp(0.6rem, 1.1vw, 0.8rem);
}
.store-logo { font-weight: 700; letter-spacing: 0.14em; font-size: clamp(0.7rem, 1.3vw, 0.95rem); }
.store-menu { opacity: 0.55; letter-spacing: 0.04em; }
.store-cart { opacity: 0.75; }

.store-hero { position: relative; flex: 1.55; overflow: hidden; margin: 0 4.5%; border-radius: var(--r-media); }
.store-hero img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(0.9); }
.store-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.store-slide.is-active .store-hero img { animation: kenburns 7s var(--ease) forwards; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }

.store-hero-copy {
  position: absolute; left: 6%; bottom: 9%; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(4px, 0.9vw, 12px);
}
.store-tag {
  font-family: var(--mono); font-size: clamp(0.5rem, 0.85vw, 0.68rem); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.store-h { font-weight: 600; letter-spacing: -0.03em; font-size: clamp(1.1rem, 3vw, 2.3rem); line-height: 1.05; }
.store-btn {
  font-size: clamp(0.62rem, 1vw, 0.8rem); font-weight: 500;
  padding: clamp(4px, 0.8vw, 9px) clamp(12px, 1.8vw, 20px); border-radius: 999px;
}

.store-row {
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%;
  padding: 2.6% 4.5% 4%;
}
.store-row figure { display: flex; flex-direction: column; min-height: 0; }
.store-row img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: calc(var(--r-media) - 4px); filter: grayscale(1) contrast(1.05) brightness(0.95); }
.store-row figcaption {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: clamp(0.54rem, 0.95vw, 0.75rem); padding-top: 6px; opacity: 0.85;
}
.store-row figcaption span { opacity: 0.7; font-family: var(--mono); }

/* Slide themes: each concept store is its own mini-brand */
.slide-aurelo { background: #15100b; color: #f3ecdf; }
.slide-aurelo .store-logo { letter-spacing: 0.3em; font-weight: 500; }
.slide-aurelo .store-tag { background: rgba(214, 184, 126, 0.14); color: #d6b87e; }
.slide-aurelo .store-btn { background: #d6b87e; color: #201709; }
.slide-aurelo .store-hero::after { background: linear-gradient(165deg, rgba(214, 184, 126, 0.16), rgba(21, 16, 11, 0.62) 85%); }
.slide-aurelo .store-hero-copy .store-h { color: #f7f1e4; }

.slide-fjord { background: #0c1116; color: #e8eef2; }
.slide-fjord .store-logo { font-weight: 800; letter-spacing: 0.2em; }
.slide-fjord .store-h { text-transform: uppercase; letter-spacing: 0.01em; font-weight: 700; }
.slide-fjord .store-tag { background: rgba(127, 182, 217, 0.14); color: #7fb6d9; }
.slide-fjord .store-btn { background: #e8eef2; color: #0c1116; }
.slide-fjord .store-hero::after { background: linear-gradient(165deg, rgba(127, 182, 217, 0.14), rgba(12, 17, 22, 0.62) 85%); }

.slide-velle { background: #f2eee7; color: #2b2b26; }
.slide-velle .store-logo { font-weight: 600; letter-spacing: 0.06em; }
.slide-velle .store-tag { background: rgba(122, 143, 106, 0.15); color: #5c7050; }
.slide-velle .store-btn { background: #2b2b26; color: #f2eee7; }
.slide-velle .store-hero::after { background: linear-gradient(165deg, rgba(242, 238, 231, 0.1), rgba(43, 43, 38, 0.5) 85%); }
.slide-velle .store-menu { opacity: 0.5; }

.store-progress {
  display: flex; justify-content: center; gap: 8px;
  padding: 14px 0 16px;
  background: var(--bg-2);
}
.store-dot {
  width: 26px; height: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.4s;
  position: relative; overflow: hidden;
}
.store-dot.is-active { background: rgba(255, 255, 255, 0.3); }
.store-dot.is-active::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--accent); transform-origin: left;
  animation: dot-fill 7s linear forwards;
}
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============ 09 · PROOF BAND (the white hard-cut) ============ */

.proof {
  background: #ffffff; color: #0a0a0a;
  padding: clamp(4rem, 7vw, 7rem) 0 clamp(4.5rem, 8vw, 8rem);
}

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}
.stat { display: flex; flex-direction: column-reverse; gap: 0.4rem; }
.stat dd {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  letter-spacing: -0.04em; line-height: 1;
  color: #0a0a0a;
}
.stat-suffix, .stat-prefix { color: var(--accent); }
.stat dt { color: rgba(0, 0, 0, 0.55); font-size: 0.92rem; }

.proof-line { text-align: center; color: rgba(0, 0, 0, 0.45); font-size: 0.9rem; margin-bottom: 2.2rem; }

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-dur) linear infinite; }
.marquee-group { display: flex; align-items: center; gap: clamp(3rem, 6vw, 5.5rem); padding-right: clamp(3rem, 6vw, 5.5rem); }
@keyframes marquee { to { transform: translateX(-50%); } }

.bm { height: 34px; width: auto; color: rgba(10, 10, 10, 0.5); flex-shrink: 0; transition: color 0.4s; }
.bm:hover { color: rgba(10, 10, 10, 0.9); }
.bm text { fill: currentColor; font-family: var(--font); }
.bm .bm-wide { font-size: 15px; letter-spacing: 0.26em; font-weight: 500; }
.bm .bm-bold { font-size: 15px; letter-spacing: 0.08em; font-weight: 700; }
.bm .bm-script { font-size: 21px; font-weight: 300; letter-spacing: 0.01em; }
.bm .bm-serifish { font-size: 16px; font-weight: 400; letter-spacing: 0.05em; }
.bm .bm-small { font-size: 12.5px; letter-spacing: 0.15em; font-weight: 500; }

/* ============ 10 · SERVICES BENTO ============ */

.services {
  position: relative; z-index: 2;
  background: var(--bg);
  border-radius: 35px 35px 0 0;
  margin-top: -35px;
  padding: clamp(5rem, 9vw, 9rem) 0;
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 252px;
  gap: 14px;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.bento-card {
  position: relative;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 26px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.5s var(--ease), background 0.4s;
  --mx: 50%; --my: 50%;
}
.bento-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(67, 207, 156, 0.08), transparent 55%);
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.bento-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.bento-card:hover::before { opacity: 1; }

/* Card titles are the smallest thing on the scale, so they carry the most
   weight and the loosest fit. */
.bento-card h3 { font-size: 1.22rem; font-weight: 540; letter-spacing: -0.012em; margin-top: 0.4rem; }
.bento-card p { color: var(--text-2); font-size: 0.9rem; line-height: 1.55; margin-top: 0.35rem; max-width: 40ch; }

.b-tag {
  position: absolute; top: 20px; left: 22px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border); border-radius: 4px; padding: 4px 11px;
  background: rgba(11, 12, 14, 0.5);
  z-index: 2;
}
.b-arrow {
  position: absolute; top: 18px; right: 20px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  color: var(--text-2); font-size: 0.95rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s var(--ease);
  z-index: 2;
}
.bento-card:hover .b-arrow { opacity: 1; transform: none; }

.b-design { grid-column: span 2; grid-row: span 2; }
.b-migrate { grid-column: span 2; }

.b-visual { position: relative; flex: 1; min-height: 0; margin-bottom: 0.8rem; }

/* Cards with inline mini-graphics are top-aligned so nothing collides */
.b-migrate, .b-cro, .b-seo, .b-speed, .b-ai, .b-email { justify-content: flex-start; padding-top: 64px; }
.bento-card .b-visual:not(.b-visual-img) {
  flex: 0 0 auto; min-height: 0;
  margin: 0 0 14px;
  justify-content: flex-start; align-items: flex-start; align-content: flex-start;
}
.b-migrate h3, .b-cro h3, .b-seo h3, .b-speed h3, .b-ai h3, .b-email h3 { margin-top: 0; }

.b-visual-img { margin: -26px -26px 1rem; flex: 1.4; }
.b-visual-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(11, 12, 14, 0.05), rgba(11, 12, 14, 0.65) 90%);
}
.b-visual-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.9) contrast(1.08) brightness(0.8); }

.b-visual-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; align-content: center; }
.b-visual-pills span {
  font-family: var(--mono); font-size: 0.7rem; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
}
.b-visual-pills .pill-to { border: none; color: var(--text-3); padding: 0 2px; }
.b-visual-pills .pill-shopify { color: var(--accent); border-color: rgba(67, 207, 156, 0.35); background: var(--accent-soft); }

.b-visual-ab { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.ab-chip {
  font-family: var(--mono); font-size: 0.7rem; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
}
.ab-chip.ab-win { color: var(--accent); border-color: rgba(67, 207, 156, 0.35); background: var(--accent-soft); }

.b-visual-search { display: flex; flex-direction: column; gap: 8px; }
.search-pill {
  font-family: var(--mono); font-size: 0.7rem; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px;
}
.rank-pill {
  font-family: var(--mono); font-size: 0.68rem; color: var(--accent);
  background: var(--accent-soft); border: 1px solid rgba(67, 207, 156, 0.35);
  border-radius: 999px; padding: 5px 12px;
  margin-left: 18px;
}

.b-visual-speed { display: flex; align-items: center; gap: 10px; }
.speed-num {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(2.4rem, 3.4vw, 3.2rem); letter-spacing: -0.05em;
  background: linear-gradient(120deg, var(--text), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.speed-lbl { color: var(--text-3); font-size: 0.75rem; font-family: var(--mono); }

.b-visual-ai { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 74px; }
.ai-orb {
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(67, 207, 156, 0.55), rgba(67, 207, 156, 0.08) 60%);
  filter: blur(1px);
  animation: orb-breathe 4.5s ease-in-out infinite alternate;
}
@keyframes orb-breathe { from { transform: scale(0.9); opacity: 0.75; } to { transform: scale(1.08); opacity: 1; } }

.b-visual-mail { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 56px; }
.mail-card {
  width: 64px; height: 42px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  margin-left: -30px;
  transition: transform 0.45s var(--ease);
}
.mail-card:first-child { margin-left: 0; transform: rotate(-7deg); }
.mail-card:nth-child(2) { transform: translateY(-7px); z-index: 1; }
.mail-card:last-child { transform: rotate(7deg); }
.bento-card:hover .mail-card:first-child { transform: rotate(-11deg) translateX(-7px); }
.bento-card:hover .mail-card:last-child { transform: rotate(11deg) translateX(7px); }

.services-more {
  margin-top: 2.4rem;
  display: flex; align-items: flex-start; gap: 1.4rem; flex-wrap: wrap;
}
.more-label { color: var(--text-3); font-size: 0.86rem; padding-top: 7px; flex-shrink: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row li {
  font-size: 0.83rem; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px;
  transition: color 0.3s, border-color 0.3s;
}
.chip-row li:hover { color: var(--text); border-color: var(--border-strong); }

/* ============ 11 · WHY / RESULTS ============ */

.why { padding: clamp(5rem, 9vw, 9rem) 0; background: var(--bg-2); }

.why-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.why-sticky { position: sticky; top: 130px; }

.why-list { display: flex; flex-direction: column; }
.why-item { padding: clamp(2rem, 3.5vw, 3rem) 0; border-top: 1px solid var(--border); }
.why-item:first-child { border-top: 0; padding-top: 0.6rem; }
.why-stat {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(2.6rem, 4.4vw, 3.6rem); letter-spacing: -0.04em;
  color: var(--accent); line-height: 1;
}
.why-item h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; margin-top: 0.9rem; }
.why-item p { color: var(--text-2); margin-top: 0.5rem; max-width: 48ch; }

/* ============ 12 · PROCESS (hover accordion) ============ */
/* Four cards on one row, and the four of them span the container exactly. The
   one under the cursor takes ~2.15 shares of the track and the other three
   take one each; nothing is a fixed pixel width, so the row is flush left and
   right at any viewport instead of trailing off into empty space. Card one is
   open on load, and the row returns to it when the cursor leaves, so the
   section is never in a state where nothing is being read.

   Two details carry the whole effect. The paragraph has a hard width rather
   than 100%, so it is clipped by the card instead of re-wrapping on every
   frame of the tween — re-wrapping is what makes this judder. And the numeral
   is anchored to the image wrapper, not the card, which is what gives it that
   printed-over-the-photo look when the card is open. */

.process {
  /* The row is a fluid track, not four fixed slabs. Fixed 360/160 widths left
     ~440px of dead space on the right of a 1320px container on a laptop, and
     squeezed the collapsed titles until "Architecture & UX" clipped mid-word.
     Now the open card is worth --pc-open collapsed ones and the four of them
     always add up to the full container width, at every viewport. */
  --pc-open: 2.35;
  --pc-gap: 12px;
  --pc-pad: 32px;
  --pc-bd: 1px;
  /* Mirrors .container (width: min(92vw, 1320px)). Keep the two in step — it
     is what lets .pc-desc know how wide the open card will be. */
  --pc-track: min(92vw, 1320px);
  /* A border-box flex item cannot be laid out narrower than its own padding
     and border, so flex-basis:0 really floors at --pc-floor and only what is
     left over is shared out by flex-grow. Fold that floor in, or --pc-open
     comes out ~46px too wide and the paragraph overruns the open card. */
  --pc-floor: calc(2 * var(--pc-pad) + 2 * var(--pc-bd));
  --pc-free: calc(var(--pc-track) - 3 * var(--pc-gap) - 4 * var(--pc-floor));
  --pc-open-inner: calc(var(--pc-free) * var(--pc-open) / (3 + var(--pc-open)));
  --card-height: 640px;
  /* Slow in, slow out. The soft feel lives here; change the duration if you
     must, but not this curve. */
  --acc-ease: cubic-bezier(0.65, 0, 0.35, 1);

  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg);
  padding: clamp(5rem, 8vw, 6.5rem) 0;
}

.process-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pa-glow {
  position: absolute; top: 54%; transform: translateY(-50%);
  width: clamp(500px, 58vw, 1020px); aspect-ratio: 1; border-radius: 50%;
}
.pa-l { left: clamp(-440px, -26vw, -190px);
  background: radial-gradient(circle, rgba(67,207,156,.16) 0%, rgba(67,207,156,.05) 30%, transparent 66%); }
.pa-r { right: clamp(-440px, -26vw, -190px);
  background: radial-gradient(circle, rgba(140,165,255,.11) 0%, rgba(100,130,200,.035) 32%, transparent 66%); }

.process > .container { position: relative; z-index: 1; }

/* ---- header ---- */
/* Bottom-aligned, not top. Top-aligning put the paragraph level with the
   little PROCESS eyebrow while the headline started 50px lower, so the right
   column finished ~90px above the left and the pair looked unanchored.
   Sharing a baseline reads as one row. */
.pc-head {
  display: flex; justify-content: space-between; gap: 64px;
  /* Fallback: box-bottom alignment. It is close, but the two columns have very
     different line-heights (1.1 at 56px vs 1.6 at 17px), so matching the boxes
     still leaves the paragraph sitting a few pixels proud of the headline. */
  align-items: flex-end;
  /* What we actually want: the paragraph's last line and the headline's last
     line share one baseline. That is the thing the eye reads as "aligned".
     Browsers that do not know the keyword keep flex-end above. */
  align-items: last baseline;
}
.pc-h2 {
  margin-top: 0.9rem; max-width: 620px;
  font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 500;
  line-height: 1.08; letter-spacing: -0.028em;
}
/* The turn is inherited from `h2 em`. This rule used to re-declare the serif
   italic and paint it green; both are now the system's job, and the green has
   gone back to meaning "interactive". */
.pc-lede {
  max-width: 520px;
  font-size: 1.06rem; line-height: 1.6; color: var(--text);
}
.pc-lede span { color: var(--text-3); }

/* ---- the row ---- */
.pc-grid { display: flex; gap: var(--pc-gap); align-items: stretch; margin-top: clamp(3rem, 5vw, 5rem); }

.pc-card {
  /* it is a real button, so undo the browser */
  appearance: none; -webkit-appearance: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;

  /* flex-basis 0 + grow, so the four cards divide the whole track between them
     and the row finishes flush with the container on both sides. Opening a
     card animates its share of the track, not an absolute pixel width. */
  flex: 1 1 0; min-width: 0;
  height: var(--card-height);
  padding: var(--pc-pad);
  display: flex; flex-direction: column; justify-content: space-between; gap: 64px;
  position: relative; overflow: hidden;
  border-radius: 22px;
  border: var(--pc-bd) solid rgba(255, 255, 255, 0.085);
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(255, 255, 255, 0.055), transparent 58%),
    linear-gradient(168deg, #131518 0%, #0d0f11 62%, #0a0b0d 100%);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    flex-grow 0.9s var(--acc-ease),
    border-color 0.9s var(--acc-ease),
    box-shadow 0.9s var(--acc-ease);
  --mx: 50%; --my: 50%;
}
/* Noise, so the large flat panels do not band on cheap displays. */
.pc-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Cursor light, same language as the bento tiles. */
.pc-card::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(67, 207, 156, 0.08), transparent 55%);
  opacity: 0; transition: opacity 0.6s var(--acc-ease);
}
.pc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pc-card.is-active {
  flex-grow: var(--pc-open);
  border-color: rgba(67, 207, 156, 0.26);
  box-shadow:
    0 55px 110px -50px rgba(0, 0, 0, 1),
    0 0 40px -20px rgba(67, 207, 156, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.pc-card.is-active::after { opacity: 1; }

.pc-top { position: relative; z-index: 3; display: block; }
.pc-title { display: block; font-size: 24px; font-weight: 600; line-height: 1.24; color: var(--text); }
.pc-desc {
  display: block;
  /* Fixed, not 100%. See the note at the top of this section. It is derived
     from the track rather than hard-coded, so it is always exactly the open
     card's inner width — the text never reflows while the card animates and
     never runs past the padding once it is open. */
  width: var(--pc-open-inner); margin-top: 8px;
  font-size: 16px; line-height: 1.6; color: var(--text-2);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pc-card.is-active .pc-desc { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }

/* The numeral is a sibling of the photo, not a child, so it never inherits
   the fade — title and number stay at full opacity throughout. */
.pc-bottom { position: relative; z-index: 3; display: block; width: 100%; }
.pc-media {
  display: block; width: 100%;
  opacity: 0; transform: translateY(15px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.pc-card.is-active .pc-media { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.pc-media img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  filter: grayscale(0.3) brightness(0.72) contrast(1.05);
}
.pc-num {
  position: absolute; inset: auto 0 0 auto;
  font-size: 96px; font-weight: 500; line-height: 1.24; letter-spacing: -0.8px;
  color: #ffffff; white-space: nowrap; pointer-events: none;
}

/* ---- tablet and below: no accordion, every card open ---- */
@media (max-width: 1279px) {
  .pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
  .pc-card, .pc-card.is-active {
    width: auto; height: auto; gap: 32px;
    flex: none;
    transition: none;
  }
  .pc-desc { width: 100%; opacity: 1; transform: none; transition: none; }
  .pc-media { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 991px) {
  .process { padding: 48px 0; }
  .process > .container { width: auto; margin-inline: 20px; }
  .pc-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pc-lede { margin-bottom: 0; }
  .pc-h2 { font-size: 40px; }
  .pc-lede { max-width: none; }
}

@media (max-width: 600px) {
  .pc-grid { grid-template-columns: 1fr; }
  .pc-num { font-size: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-card, .pc-desc, .pc-media, .pc-card::after { transition-duration: 0.01ms !important; }
}

/* ============ 13 · REVIEW WALL (three counter-scrolling rows) ============ */

.voices { padding: clamp(5rem, 9vw, 9rem) 0; }
.voices-head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }

.voices-wall { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(2.4rem, 4vw, 3.4rem); }

.v-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.v-track { display: flex; width: max-content; animation: v-scroll var(--vd, 70s) linear infinite; }
.v-row.rev .v-track { animation-direction: reverse; }
.v-row:nth-child(1) .v-track { --vd: 72s; }
.v-row:nth-child(2) .v-track { --vd: 86s; }
.v-row:nth-child(3) .v-track { --vd: 64s; }
.v-row:hover .v-track { animation-play-state: paused; }
@keyframes v-scroll { to { transform: translateX(-50%); } }

.v-group { display: flex; gap: 14px; padding-right: 14px; align-items: stretch; }

.rv-card {
  width: 400px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 22px;
  transition: border-color 0.4s, background 0.4s;
}
.rv-card:hover { border-color: var(--border-strong); background: var(--surface-2); }

.rv-card header { display: flex; align-items: center; gap: 12px; }

.v-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-strong);
  font-family: var(--mono); font-size: 0.68rem; color: var(--text-2);
}

.rv-id { min-width: 0; }
.rv-id b { display: block; font-size: 0.96rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-id time { color: var(--text-3); font-size: 0.76rem; }

.rv-badge {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 11px;
  font-size: 0.72rem; color: var(--text-2);
}
.rv-badge img { width: 12px; height: auto; }
.rv-badge i { font-style: normal; color: var(--accent); font-size: 0.7rem; }

.rv-stars { display: flex; gap: 20px; }
.rv-stars span {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-3);
}
.rv-stars i { font-style: normal; color: #e2b25a; font-size: 0.8rem; letter-spacing: 2.5px; }
.rv-stars em { font-style: normal; color: rgba(255, 255, 255, 0.16); }

.rv-card p {
  font-size: 0.93rem; color: var(--text-2); line-height: 1.55;
  min-height: 4.4em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.rv-card footer {
  margin-top: auto;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  padding-top: 13px;
}

/* 14 · Tech stack — rebuilt as the technology wall in section 47. */

/* ============ 15 · FINAL CTA ============ */

.cta {
  position: relative;
  padding: clamp(6rem, 11vw, 11rem) 0;
  overflow: hidden;
  background: var(--bg-2);
}
.cta-bg { position: absolute; inset: 0; }
.cta-bg .aurora {
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 9999px;
  background: var(--bloom);
  filter: blur(100px);
  transform: rotate(152.044deg);
  pointer-events: none;
}
.cta-bg .aurora-a { left: 6%; top: -30%; }
.cta-bg .aurora-c { right: -4%; bottom: -35%; }

.cta-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cta-title {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  font-weight: 500; letter-spacing: -0.04em; line-height: 1.05;
  max-width: 17ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }
.cta-ctas { justify-content: center; }
.cta-mail { margin-top: 2rem; color: var(--text-3); font-size: 0.92rem; }
.cta-mail a { color: var(--text-2); border-bottom: 1px solid var(--border-strong); padding-bottom: 1px; transition: color 0.3s, border-color 0.3s; }
.cta-mail a:hover { color: var(--accent); border-color: var(--accent); }

/* ============ 16 · FOOTER ============ */

.footer {
  background: #0a0a0a;
  border-top: 1px solid var(--border);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  position: relative; overflow: hidden;
}
.footer::before {
  content: ''; position: absolute;
  left: 8%; bottom: -14%;
  width: 620px; height: 620px;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(30, 180, 180, 0.12) 0%, rgba(140, 60, 220, 0.16) 100%);
  filter: blur(100px);
  transform: rotate(152.044deg);
  pointer-events: none;
}

/* Mixed-family display lockup: Serif + Sans at 40% opacity */
.footer-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: clamp(2.6rem, 5vw, 4.5rem);
}
/* The footer display is already set in the serif, so the turn here needs no
   size compensation — it is the same face, changing posture. It used to drop
   to the sans at 40% white, which read as the word being switched off rather
   than emphasised, and put the largest type on the site at the bottom of the
   contrast range. */
.footer-display em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.022em;
  padding-right: 0.04em;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.footer-brand p { color: var(--text-2); font-size: 0.94rem; max-width: 34ch; margin-top: 1.1rem; }
.footer-mail {
  display: inline-block; margin-top: 1.2rem;
  color: var(--text); font-size: 0.95rem;
  border-bottom: 1px solid var(--border-strong); padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.footer-mail:hover { color: var(--accent); border-color: var(--accent); }

.footer-col { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col h4 { font-size: 0.85rem; font-weight: 500; color: var(--text-3); margin-bottom: 0.5rem; }
.footer-col a { color: var(--text-2); font-size: 0.92rem; width: fit-content; transition: color 0.3s, transform 0.3s var(--ease); }
.footer-col a:hover { color: var(--text); transform: translateX(3px); }

.nl-hint { color: var(--text-2); font-size: 0.88rem; margin-bottom: 0.9rem; }
.nl-form { display: flex; gap: 8px; }
.nl-form input {
  flex: 1; min-width: 0; height: 46px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-media); padding: 0 16px;
  color: var(--text); font-family: inherit; font-size: 0.92rem;
  transition: border-color 0.3s;
}
.nl-form input::placeholder { color: var(--text-3); }
.nl-form input:focus { outline: none; border-color: var(--accent); }
.nl-form .btn { height: 46px; }
.nl-msg { font-size: 0.85rem; margin-top: 0.7rem; min-height: 1.2em; color: var(--accent); }
.nl-msg.is-error { color: #e29a9a; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.4rem 0 1.2rem;
  border-top: 1px solid var(--border);
  color: var(--text-3); font-size: 0.85rem;
}
.footer-social { display: flex; gap: 1.4rem; }
.footer-social a { color: var(--text-3); transition: color 0.3s; }
.footer-social a:hover { color: var(--text); }

.footer-watermark {
  font-size: clamp(4rem, 14vw, 13rem);
  font-weight: 500; letter-spacing: -0.05em; line-height: 0.78;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  user-select: none;
  transform: translateY(18%);
  pointer-events: none;
}

/* ============ 17 · FAB (rotating call badge) ============ */

.fab {
  position: fixed; left: 26px; bottom: 26px; z-index: 80;
  width: 94px; height: 94px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(13, 14, 16, 0.6);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s var(--ease), border-color 0.4s, opacity 0.4s, visibility 0.4s;
}
.fab:hover { transform: scale(1.07); border-color: rgba(67, 207, 156, 0.5); }
.fab.is-hidden { opacity: 0; visibility: hidden; }
.fab svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); animation: fab-spin 16s linear infinite; }
@keyframes fab-spin { to { transform: rotate(360deg); } }
.fab-text { font-family: var(--mono); font-size: 10.6px; letter-spacing: 0.14em; fill: var(--text-2); }
.fab-arrow { font-size: 1.25rem; color: var(--accent); }

/* ============ 18 · CASE-STUDY MODAL ============ */

.modal { position: fixed; inset: 0; z-index: 120; display: none; }
.modal.is-open { display: block; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 6, 7, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0;
}
.modal.is-open .modal-backdrop { opacity: 1; transition: opacity 0.4s; }

.modal-panel {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 94vw); max-height: 88dvh;
  overflow-y: auto;
  background: #101214;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: 0 60px 160px -40px rgba(0, 0, 0, 0.9);
}

.modal-close {
  position: sticky; top: 14px; margin-left: calc(100% - 58px); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(11, 12, 14, 0.7); border: 1px solid var(--border-strong);
  font-size: 1.5rem; line-height: 1; color: var(--text);
  display: grid; place-items: center;
  backdrop-filter: blur(8px);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.modal-close:hover { transform: rotate(90deg); border-color: rgba(255, 255, 255, 0.35); }

.modal-body { padding: 0 clamp(22px, 5vw, 46px) clamp(28px, 5vw, 46px); margin-top: -30px; }

.m-tag {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 12px;
  display: inline-block;
}
.m-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 500; letter-spacing: -0.03em; margin-top: 0.9rem; }
.m-loc { color: var(--text-2); font-size: 0.9rem; margin-top: 0.2rem; }

/* Auto-scrolling branded page preview */
.m-preview {
  margin-top: 1.6rem;
  border-radius: var(--r-media); overflow: hidden;
  border: 1px solid var(--border);
  background: #0c0d0f;
}
.m-preview .m-chrome {
  height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 14px;
  background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--border);
}
.m-preview .m-chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.m-preview .m-chrome span {
  margin-inline: auto; font-family: var(--mono); font-size: 0.66rem; color: var(--text-3);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  padding: 2px 13px; border-radius: 999px;
}
.m-page-vp { height: 420px; overflow: hidden; }
.m-page { background: var(--pv-bg, #101012); color: var(--pv-ink, #eee); animation: m-autoscroll 11s ease-in-out infinite alternate; }
@keyframes m-autoscroll { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 420px)); } }
.m-page:hover { animation-play-state: paused; }

.mp-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; font-size: 0.72rem; }
.mp-nav b { letter-spacing: 0.18em; font-size: 0.8rem; }
.mp-nav span { opacity: 0.55; }
.mp-hero { position: relative; height: 300px; overflow: hidden; }
.mp-hero img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(0.85); }
.mp-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(165deg, transparent 30%, var(--pv-tint, rgba(0, 0, 0, 0.55)) 100%); }
.mp-hero-copy { position: absolute; left: 24px; bottom: 22px; z-index: 2; }
.mp-hero-copy b { display: block; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.mp-hero-copy span { display: inline-block; margin-top: 10px; font-size: 0.72rem; padding: 7px 16px; border-radius: 999px; background: var(--pv-ac, #fff); color: var(--pv-bg, #000); }
.mp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px 22px; }
.mp-row figure { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.mp-row img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(0.9); }
.mp-quote { padding: 26px 24px 34px; font-size: 1.05rem; line-height: 1.5; opacity: 0.85; max-width: 40ch; }

.m-section { margin-top: 2rem; }
.m-section h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-3); margin-bottom: 0.7rem; }
.m-section > p { color: var(--text-2); line-height: 1.65; max-width: 62ch; }

.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-chips span {
  font-size: 0.8rem; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
}

.m-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.m-metric {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-media);
  padding: 18px;
}
.m-metric b { display: block; font-family: var(--mono); font-weight: 500; font-size: 1.7rem; letter-spacing: -0.03em; color: var(--accent); }
.m-metric span { color: var(--text-2); font-size: 0.8rem; }

.m-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-ba-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-media); padding: 18px; }
.m-ba-col h5 { font-size: 0.78rem; color: var(--text-3); font-weight: 500; margin-bottom: 0.5rem; }
.m-ba-col p { font-size: 0.92rem; color: var(--text-2); }
.m-ba-col.is-after { border-color: rgba(67, 207, 156, 0.3); }
.m-ba-col.is-after h5 { color: var(--accent); }

/* Star testimonial (glass card) */
.m-stars { color: #e2b25a; letter-spacing: 3px; font-size: 0.9rem; margin-bottom: 0.6rem; }
.m-quote {
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border); border-radius: var(--r-card);
  backdrop-filter: blur(8px);
  font-size: 1.05rem; line-height: 1.6;
}
.m-quote footer { color: var(--text-2); font-size: 0.85rem; margin-top: 0.6rem; }

.m-cta { margin-top: 2.2rem; }

.m-switch {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: space-between; gap: 10px;
  padding: 14px 0 4px;
  background: linear-gradient(transparent, #101214 40%);
  margin-top: 1.4rem;
}
.m-switch button {
  height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-family: var(--serif); font-size: 0.92rem; color: var(--text);
  transition: background 0.3s, border-color 0.3s;
}
.m-switch button:hover { background: var(--surface-2); border-color: rgba(255, 255, 255, 0.3); }

/* ============ 19 · RESPONSIVE ============ */

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 215px; }
  .b-design { grid-column: span 2; }
  .b-migrate { grid-column: span 2; }
}

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }

  .hero-cats { grid-template-columns: repeat(2, 1fr); }
  .hero-br { display: none; }

  .stats { grid-template-columns: repeat(2, 1fr); }

  .why-grid { grid-template-columns: 1fr; }
  .why-sticky { position: static; }

  /* Process becomes a vertical stack */
  .process-track { flex-direction: column; width: 100%; padding: 2.2rem 4vw 1rem; }
  .ps { width: 100%; }
  .p-step { width: 100%; min-height: 200px; }
  .p-step h3 { margin-top: 0.4rem; }
  .p-step::after { font-size: 6.5rem; right: -8px; bottom: -26px; }
  .process-rail { display: none; }

  .m-page-vp { height: 320px; }
  @keyframes m-autoscroll { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 320px)); } }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

/* Set-piece collapses: static reel first, then a 2-col portrait grid */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .sc-track { height: auto; view-timeline: none; }
  .sc-viewport {
    position: static; height: auto;
    display: flex; flex-direction: column;
    overflow: visible; padding: 0 0 1rem;
  }
  .sc-viewport .showcase-media { order: -1; width: min(1100px, 94vw); margin: 0 auto; animation: none !important; }
  .sc-grid {
    position: static;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 1.6rem 4vw 0;
  }
  .sc-col { display: contents; }
  .sc-tile { width: auto; }
  .sc-frag { display: none; }
  .sc-m b { font-size: 0.86rem; }
}

@media (max-width: 768px) {
  .services { border-radius: 25px 25px 0 0; margin-top: -25px; }
}

@media (max-width: 640px) {
  :root { --marquee-dur: 20s; }

  .hero { padding-top: 84px; }
  .hero-ctas .btn { width: 100%; }

  .store-stage { aspect-ratio: 4 / 5; }
  .store-row { grid-template-columns: repeat(3, 1fr); }
  .store-row figcaption span { display: none; }

  .stats { gap: 1.4rem; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-card { min-height: 210px; }
  .b-design, .b-migrate { grid-column: span 1; }
  .b-visual-img { flex: none; height: 180px; }

  .rv-card { width: 320px; padding: 18px; }
  .v-row:nth-child(1) .v-track { --vd: 48s; }
  .v-row:nth-child(2) .v-track { --vd: 58s; }
  .v-row:nth-child(3) .v-track { --vd: 42s; }

  .m-metrics, .m-ba { grid-template-columns: 1fr; }

  .fab { display: none; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .nl-form { flex-direction: column; }
}

@media (max-width: 560px) {
  .hero-cats { grid-template-columns: 1fr; }
}

/* ============ 20 · REDUCED MOTION ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .v-track { animation: none; }
  .v-row { overflow-x: auto; }
  .fab svg { animation: none; }
  .store-slide.is-active .store-hero img { animation: none; }
  .m-page { animation: none; }
}

/* ============ 20 · HERO WALL (tilted scrolling work) ============ */
/*
   Four columns of real store screenshots, tilted as one unit and scrolling
   vertically on an infinite loop, alternating direction.

   The loop: each column holds its tile list twice and the animation moves the
   column by exactly -50% of its own height, so the second copy lands precisely
   where the first began. There is deliberately no gap on the column itself —
   the spacing lives on the tiles as margin-bottom — because a gap would make
   -50% land half a gap out of true and the seam would drift.

   Coverage: the grid is centred on the hero and made much wider than it, so
   rotating it can never expose a bare corner. Scale and origin stay constant
   at every breakpoint; only the column count changes. (Scaling about an
   off-centre origin is what leaves half the hero empty.)
*/
.hwall {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hwall-grid {
  width: 100%;
  padding-inline: 1rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1.5rem;
  /* No child carries its own 3D transform, so a flat rendering context is
     enough here and measurably cheaper to rasterise than preserve-3d. */
  transform-style: flat;
  transform-origin: 64% 35%;
  transform: rotateX(30deg) rotateY(-15deg) rotate(28deg) scale(1.4) perspective(980px);
}

.hwall-col,
.hwall-list {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.hwall-col {
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Stagger the columns so rows never line up across the wall. Viewport units,
   not percentages: percentage margins resolve against the grid width, which
   changes with the breakpoint, and the stagger would swing wildly. */
.hwall-col--1 { margin-top: -8vh; }
.hwall-col--2 { margin-top: -32vh; }
.hwall-col--3 { margin-top: -62vh; }
.hwall-col--4 { margin-top: -86vh; }

.hwall-tile {
  overflow: hidden;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  background: var(--bg-2);
}
.hwall-tile img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Motion starts only once the images have decoded, so every column begins
   together and there is no jump on first paint. */
.hwall-ready .hwall-col--1,
.hwall-ready .hwall-col--3 { animation: hwallUp 34s linear infinite; }
.hwall-ready .hwall-col--2,
.hwall-ready .hwall-col--4 { animation: hwallDown 34s linear infinite; }

@keyframes hwallUp {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@keyframes hwallDown {
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Darkens the centre behind the headline and blends the top into the nav. */
.hwall-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(#000 3%, rgba(0, 0, 0, 0) 26%),
    radial-gradient(ellipse 60% 86% at 50% 48%,
      rgba(0, 0, 0, 0.94) 26%, rgba(0, 0, 0, 0.72) 62%, rgba(0, 0, 0, 0.24) 100%),
    linear-gradient(to top, rgba(0,0,0,.97) 0%, rgba(0,0,0,.82) 9%, rgba(0, 0, 0, 0) 30%);
}

/* Contrast repair. These elements were tuned against a flat black hero; a
   moving wall raises the backdrop luminance behind them and drops them under
   WCAG AA. Measured worst-case across a full loop: sub 3.8:1 and category
   labels 4.2:1 before, both >=4.5:1 after. */
.hero-cats a { background: rgba(8, 9, 11, 0.88); }
.hero-cats a:hover { background: rgba(24, 26, 30, 0.94); }
.hero-cats span { color: rgba(255, 255, 255, 0.78); }
.hero-sub { color: rgba(255, 255, 255, 0.86); }
/* This link sits low in the hero where the scrim has all but faded, so a
   bright banner behind it dropped it to 1.8:1. A pill of its own guarantees
   contrast whatever passes underneath, and matches the nav and button shapes. */
.hero-scroll {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(8, 9, 11, 0.86);
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-scroll:hover { background: rgba(24, 26, 30, 0.94); }
.hero-scroll:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Fewer, wider columns as the viewport narrows. The grid redistributes on its
   own (grid-auto-columns: 1fr), so dropping a column widens the rest rather
   than leaving a hole. */
/* Narrow viewports get a centred, wider plane instead of a bigger scale.
   Scaling hard about an off-centre origin is what shunts the whole wall to
   one side and leaves half the hero empty; measured coverage on a 390px
   screen goes from 58% that way to 81% this way. */
/* Below 1200px, four narrow columns make each tile short enough that one
   column's repeat can peek in at the same time. Three wider columns keep every
   list taller than the viewport, so a banner can never share the screen with
   its own second copy. */
@media (max-width: 1199px) {
  .hwall-grid {
    position: absolute;
    top: 50%; left: 50%;
    width: 165%;
    gap: 1rem;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%)
               rotateX(30deg) rotateY(-15deg) rotate(28deg) scale(1.3) perspective(980px);
  }
  .hwall-tile { margin-bottom: 1rem; }
  .hwall-col--4 { display: none; }
}

@media (max-width: 600px) {
  .hwall-grid { width: 175%; }
  .hwall-col--3 { display: none; }
  .hwall-scrim {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.58));
  }
}

/* Paused by the IntersectionObserver in main.js once the hero scrolls away,
   so the wall costs nothing while the visitor reads the rest of the page. */
.hwall-paused .hwall-col { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hwall-col { animation: none !important; }
}

/* Someone on a metered connection should not pay for 20 decorative images. */
@media (prefers-reduced-data: reduce) {
  .hwall { display: none; }
}

@media print {
  .hwall, .hwall-scrim { display: none !important; }
}

/* ============ 21 · HERO REFINEMENTS ============ */
/*
   An original certification mark: a glass disc holding an embossed shield and
   an accent check. Deliberately not Shopify's badge, and not a social-media
   tick. No backdrop-filter here: over an animating wall it re-samples every
   frame, and the lighting is faked with layered gradients instead.
*/
.vbadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; margin-left: .16em; margin-right: 0; vertical-align: -.32em;
  border-radius: 50%;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  cursor: pointer;
  transition:
    transform .52s cubic-bezier(.22,1,.36,1),
    box-shadow .52s cubic-bezier(.22,1,.36,1),
    border-color .52s cubic-bezier(.22,1,.36,1);
}
.vbadge img { width: 100%; height: 100%; display: block; object-fit: contain; }
/* A fine dotted seal ring: reads as a certification mark at 30px,
   where an outlined shield just turns to mush. */
.vbadge-ring { stroke: rgba(255,255,255,.34); stroke-width: 1.1; }
.vbadge-check { stroke: var(--accent); }
.vbadge:hover {
  transform: scale(1.22);
  filter: drop-shadow(0 0 10px rgba(122,193,66,.55));
  animation: vbadge-float 3.4s ease-in-out infinite;
}
@keyframes vbadge-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -1.5px; }
}

/* Scroll cue: text and arrow only, sitting at the base of the hero frame.
   The scrim's bottom band (below) keeps it legible without a button. */
.hero-scroll {
  position: absolute;
  left: 50%; translate: -50% 0;
  bottom: clamp(1.1rem, 3.2vh, 2.4rem);
  z-index: 3;
  margin-top: 0;
  padding: .35rem .2rem;
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,.95);
  font-size: .98rem;
}
.hero-scroll:hover { background: none; color: #fff; }

/* The looping showreel, in the exact frame the slider used. */
.store-video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: var(--bg-2);
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  .vbadge:hover { animation: none; transform: scale(1.06); }
}

/* ============ 22 · SCROLL STORY (sticky media + progress rail) ============ */
/*
   Sticky collage on the left, reasons on the right, a progress rail between.
   Rows only move while the page scrolls, then glide to rest on a lerp, so the
   motion carries weight instead of snapping to the scrollbar. Fully reversible.
*/
.story { background: var(--bg); padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem); }

.story-grid {
  display: grid;
  grid-template-columns: 1fr 2px .75fr;
  gap: clamp(2rem, 4.5vw, 5rem);
  align-items: start;
}

.story-media { position: sticky; top: 15vh; }

.story-frame {
  position: relative;
  display: grid;
  /* minmax(0,1fr), not the default auto: a flex row whose cards deliberately
     overflow would otherwise stretch the column to max-content, ballooning the
     cards and pushing the last rows out of the frame. */
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(10px, .9vw, 16px);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #131316, #0a0a0c);
  border: 1px solid var(--border);
  box-shadow: 0 50px 100px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
}
/* Feathers the collage into the frame so cut-off cards never look clipped. */
.story-frame-edge {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(10,10,12,.95), rgba(10,10,12,0) 12%,
                    rgba(10,10,12,0) 88%, rgba(10,10,12,.95)),
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%);
}

/* The tilt lives on its own layer and is scaled up, so rotating the field can
   never expose a bare corner of the frame. */
.story-tilt {
  display: grid;
  gap: clamp(8px, .7vw, 12px);
  transform: rotate(-6.5deg) scale(1.22);
  transform-origin: 50% 50%;
}

.story-row {
  display: flex;
  min-width: 0;
  /* Centres the overflow so a row can travel either way without ever pulling
     its edge into view and leaving a gap. */
  justify-content: center;
  gap: clamp(8px, .7vw, 12px);
  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}
.story-card {
  flex: 0 0 34%;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #101013;
}
.story-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.story-rail {
  position: sticky; top: 15vh;
  height: 62vh; width: 2px;
  background: var(--border);
  border-radius: 2px; overflow: hidden;
  justify-self: center;
}
.story-rail-fill {
  display: block; width: 100%; height: 100%;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
}

.story-intro { padding-block: 6vh clamp(2rem, 5vh, 4rem); }
.story-lede { color: var(--text-2); margin: 1rem 0 0; font-size: 1.05rem; max-width: 40ch; }

/* Each reason gets its own screen-height so the collage stays in view while
   the argument advances. */
.story-block {
  min-height: 80vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 2rem;
  border-top: 1px solid var(--border);
}
.story-eyebrow {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1.1rem;
}
.story-h {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 500;
  letter-spacing: -.028em; line-height: 1.18; margin: 0; color: var(--text);
  text-wrap: balance;
}
.story-body { color: var(--text-2); line-height: 1.7; margin: 1.1rem 0 0; max-width: 46ch; }

.story-link {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 1.8rem; color: var(--text); font-size: .95rem;
  transition: color .4s var(--ease);
}
.story-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--border-strong); font-size: .8rem;
  transition: transform .5s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);
}
.story-link:hover .story-arrow {
  transform: translate(2px,-2px);
  background: var(--accent-soft); border-color: var(--accent);
}
.story-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 1024px) {
  .story-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .story-media { position: static; }
  .story-rail { display: none; }
  .story-block { min-height: auto; padding-block: 2.5rem; }
  .story-card { flex-basis: 38%; }
}
@media (max-width: 600px) {
  .story-card { flex-basis: 52%; }
  .story-frame { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-row { transition: none; }
}

/* One reason reads at a time: the rest stay present but recede. */
.story-block {
  opacity: .28;
  filter: blur(1.5px);
  transition: opacity .65s var(--ease), filter .65s var(--ease);
}
.story-block.is-active { opacity: 1; filter: blur(0); }
@media (max-width: 1024px) {
  .story-block { opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story-block { transition: none; }
}

/* ============ 23 · BOOKING ============ */
.book { position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; overflow: hidden; }

/* The auroras are offset past the top and bottom of this section on purpose,
   and overflow:hidden above then sliced them off — which drew a hard coloured
   line straight across the page directly under the technology wall, and read
   as that section's bottom edge. Fading the whole backdrop out before it
   reaches either boundary keeps the depth and loses the line.
   no-repeat matters: without it the gradient tiles past its own box. */
.book .cta-bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.book-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.book-eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.4rem; }
.eb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.book-title {
  font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 500; line-height: 1.1;
  letter-spacing: -.03em; margin: 0; color: var(--text); text-wrap: balance;
}
.book-lede { color: var(--text-2); line-height: 1.7; margin: 1.3rem 0 0; max-width: 52ch; }
.book-points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .85rem; }
.book-points li {
  position: relative; padding-left: 1.9rem; color: var(--text); font-size: .97rem;
}
.book-points li::before {
  content: '\2713'; position: absolute; left: 0; top: -1px;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem;
  color: var(--accent); background: var(--accent-soft);
}
.book-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 2.4rem 0 0; background: var(--border);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.book-trust > div { background: var(--bg); padding: 1rem 1.1rem; }
.book-trust dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.book-trust dd { margin: .45rem 0 0; font-size: .95rem; color: var(--text); }
.book-alt { margin: 1.8rem 0 0; color: var(--text-2); font-size: .92rem; }
.book-alt a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* panel */
.book-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: clamp(1.3rem, 2.2vw, 2rem);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
}
.book-steps {
  display: flex; gap: .5rem; list-style: none; margin: 0 0 1.6rem; padding: 0;
  font-size: .82rem; color: var(--text-3);
}
.book-steps li { display: flex; align-items: center; gap: .5rem; flex: 1; }
.book-steps span {
  width: 1.55rem; height: 1.55rem; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem;
  border: 1px solid var(--border-strong); transition: all .35s var(--ease);
}
.book-steps .is-current { color: var(--text); }
.book-steps .is-current span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.book-steps .is-done span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.book-pane { display: none; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.book-pane.is-active { display: block; animation: bkIn .45s var(--ease) both; }
@keyframes bkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.book-legend { padding: 0; font-size: 1.02rem; color: var(--text); margin-bottom: 1.1rem; }
.book-sel { color: var(--accent); font-size: .88rem; margin-left: .5rem; }
.book-hint { margin: 1rem 0 0; font-size: .8rem; color: var(--text-3); }

/* calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.cal-month { margin: 0; font-size: .95rem; color: var(--text); }
.cal-nav {
  width: 2rem; height: 2rem; border-radius: 50%; background: none;
  border: 1px solid var(--border); color: var(--text); cursor: pointer; line-height: 1;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.cal-nav:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { margin-bottom: 6px; font-size: .7rem; color: var(--text-3); text-align: center; }
.cal-day {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent;
  background: var(--surface-2); color: var(--text); font-size: .86rem; cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.cal-day:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.cal-day:disabled { background: none; color: var(--text-3); opacity: .4; cursor: not-allowed; }
.cal-day.is-picked { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cal-day.is-empty { background: none; border: 0; cursor: default; }

/* slots */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.slot {
  padding: .8rem .5rem; border-radius: 12px; background: var(--surface-2);
  border: 1px solid transparent; color: var(--text); font-size: .9rem; cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.slot:hover { border-color: var(--accent); transform: translateY(-1px); }
.slot.is-picked { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* fields */
.book-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.bf { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.bf-wide { grid-column: 1 / -1; }
.bf label { font-size: .82rem; color: var(--text-2); }
.bf label em { font-style: normal; color: var(--text-3); }
.bf label span { color: var(--accent); margin-left: .15rem; }
.bf input, .bf select, .bf textarea {
  width: 100%; padding: .7rem .8rem; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: .92rem;
  transition: border-color .25s var(--ease);
}
.bf textarea { resize: vertical; min-height: 96px; }
.bf input:focus-visible, .bf select:focus-visible, .bf textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.bf.has-error input, .bf.has-error textarea { border-color: #ff6b6b; }
.bf-err { font-size: .78rem; color: #ff8f8f; min-height: 0; }
.bf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.book-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.book-back {
  background: none; border: 0; color: var(--text-2); cursor: pointer;
  font: inherit; font-size: .88rem; padding: .4rem 0;
  transition: color .3s var(--ease);
}
.book-back:hover { color: var(--text); }
.book-submit { display: inline-flex; align-items: center; gap: .6rem; }
.book-submit[disabled] { opacity: .65; cursor: progress; }
.bs-spin { display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; }
.is-sending .bs-spin { display: block; animation: bkSpin .7s linear infinite; }
@keyframes bkSpin { to { transform: rotate(360deg); } }
.book-status { margin: 1rem 0 0; font-size: .88rem; min-height: 1.2em; }
.book-status.is-bad { color: #ff8f8f; }

.book-done { text-align: center; padding: 2.5rem 1rem; }
.done-mark {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto 1.2rem;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.3rem;
}
.book-done h3 { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 500; color: var(--text); }
.book-done p { margin: 0; color: var(--text-2); font-size: .95rem; }
.book-done a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-fields { grid-template-columns: 1fr; }
  .book-trust { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .book-pane.is-active { animation: none; }
  .is-sending .bs-spin { animation-duration: 2s; }
}

/* Two-step booking: date and time decided together on one screen. */
.pick-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1rem, 2vw, 1.8rem); align-items: start; }
.pick-label { margin: 0 0 .8rem; font-size: .84rem; color: var(--text-3); }
.pick-label.is-set { color: var(--accent); }
.pick-slots .slot-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.pick-slots .slot-grid:empty::after {
  content: ''; display: block; height: 148px; border-radius: 12px;
  border: 1px dashed var(--border); grid-column: 1 / -1;
}
.book-actions--end { justify-content: flex-end; }
.book-next[disabled] { opacity: .4; cursor: not-allowed; }
@media (max-width: 900px) { .pick-grid { grid-template-columns: 1fr; } }

/* ============ 24 · GROWTH SUBSCRIPTION PAGE ============ */
/* Scoped entirely under .gs-* so nothing on the homepage can be affected. */
.gs-hero { padding: clamp(7rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 5rem); }
.gs-hero-in { max-width: 860px; }
.gs-eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.4rem; }
.gs-h1 {
  font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 500; line-height: 1.06;
  letter-spacing: -.033em; margin: 0; color: var(--text); text-wrap: balance;
}
.gs-lede { color: var(--text-2); font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.7;
  margin: 1.5rem 0 0; max-width: 56ch; }
.gs-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.gs-note { margin: 1.4rem 0 0; font-size: .86rem; color: var(--text-3); }

.gs-sec { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.gs-sec-alt { background: var(--bg-2); }
.gs-h2 { text-wrap: balance; }
.gs-sub { margin-top: .9rem; max-width: 54ch; }

.gs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: 2.6rem; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.gs-card, .gs-quote { background: var(--bg); padding: 1.8rem 1.6rem; margin: 0; }
.gs-card h3 { margin: 0 0 .7rem; font-size: 1.05rem; font-weight: 500; color: var(--text); }
.gs-card p, .gs-quote p { margin: 0; color: var(--text-2); line-height: 1.68; font-size: .95rem; }
.gs-quote cite { display: block; margin-top: 1.2rem; font-style: normal;
  font-size: .9rem; color: var(--text); }
.gs-quote cite span { display: block; margin-top: .25rem; font-size: .8rem; color: var(--text-3); }

.gs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 1.4rem; margin-top: 2.6rem; }
.gs-item h3 { margin: 0 0 .5rem; font-size: .98rem; font-weight: 500; color: var(--text); }
.gs-item h3::before { content: '\2713'; color: var(--accent); margin-right: .5rem; font-size: .85rem; }
.gs-item p { margin: 0; color: var(--text-2); font-size: .9rem; line-height: 1.6; }

.gs-steps { counter-reset: gs; list-style: none; margin: 2.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.gs-steps li { counter-increment: gs; padding-top: 1.2rem; border-top: 1px solid var(--border-strong); }
.gs-steps li::before { content: counter(gs, decimal-leading-zero); display: block;
  font-family: var(--mono); font-size: .8rem; color: var(--accent); margin-bottom: 1rem; }
.gs-steps h3 { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 500; color: var(--text); }
.gs-steps p { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.68; }

.gs-table-wrap { margin-top: 2.4rem; overflow-x: auto; }
.gs-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.gs-table th, .gs-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.gs-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); font-weight: 500; }
.gs-table tbody td { color: var(--text-2); font-size: .94rem; }
.gs-table tbody td:first-child { color: var(--text); }
.gs-table th:last-child, .gs-table td:last-child { color: var(--text); background: var(--surface); }
.gs-fineprint { margin: 1rem 0 0; font-size: .8rem; color: var(--text-3); }

.gs-faq-wrap { max-width: 760px; }
.gs-faq { margin-top: 2.2rem; border-top: 1px solid var(--border); }
.gs-faq details { border-bottom: 1px solid var(--border); }
.gs-faq summary { cursor: pointer; padding: 1.15rem 2rem 1.15rem 0; position: relative;
  color: var(--text); font-size: 1rem; list-style: none; }
.gs-faq summary::-webkit-details-marker { display: none; }
.gs-faq summary::after { content: '+'; position: absolute; right: .2rem; top: 1rem;
  color: var(--accent); font-size: 1.2rem; transition: transform .3s var(--ease); }
.gs-faq details[open] summary::after { transform: rotate(45deg); }
.gs-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.gs-faq p { margin: 0 0 1.3rem; color: var(--text-2); line-height: 1.7; font-size: .95rem; max-width: 62ch; }

.gs-final { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--bg-2); text-align: center; }
.gs-final-in { max-width: 640px; }
.gs-final-h { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -.03em;
  line-height: 1.12; margin: 0; color: var(--text); text-wrap: balance; }
.gs-final-p { color: var(--text-2); line-height: 1.7; margin: 1.2rem auto 2rem; max-width: 48ch; }

@media (max-width: 900px) {
  .gs-grid-3, .gs-steps { grid-template-columns: 1fr; }
  .gs-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gs-steps { gap: 1.6rem; }
}
@media (max-width: 560px) { .gs-grid-4 { grid-template-columns: 1fr; } }

/* ============ 25 · FREE AUDIT PAGE ============ */
/* Scoped under .fa-* and reusing the booking field styles. */
.fa-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.fa-points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.fa-points li { position: relative; padding-left: 1.9rem; color: var(--text); font-size: .97rem; }
.fa-points li::before {
  content: '\2713'; position: absolute; left: 0; top: -1px;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .7rem; color: var(--accent); background: var(--accent-soft);
}
.fa-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: clamp(1.3rem, 2.2vw, 2rem);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
  position: sticky; top: 110px;
}
.fa-form { display: grid; gap: .9rem; }
.fa-form-h { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--text); }
.fa-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .4rem; }
.fa-submit[disabled] { opacity: .65; cursor: progress; }
.fa-done { text-align: center; padding: 1.6rem .5rem .4rem; }
.fa-done h3 { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 500; color: var(--text); }
.fa-done p { margin: 0; color: var(--text-2); font-size: .92rem; line-height: 1.6; }
.fa-done a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .fa-hero { grid-template-columns: 1fr; }
  .fa-panel { position: static; }
}

/* ============ 26 · CASE STUDIES ============ */
/* Scoped under .cs-* and .wk-*. Each case sets --csh (a hue) on <body>, so the
   three pages read as one series without three separate stylesheets. */

/* --- work index ------------------------------------------------------- */
.wk-hero { padding: clamp(7rem, 12vw, 10rem) 0 clamp(1rem, 3vw, 2rem); }
.wk-hero .gs-h1 { max-width: 18ch; }
.wk-hero .gs-lede { max-width: 54ch; }

.wk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.wk-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg-2); text-decoration: none; color: var(--text);
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.wk-bloom {
  position: absolute; inset: -40% -20% auto -20%; height: 90%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 0%,
    hsl(var(--csh) 70% 55% / .30) 0%, hsl(var(--csh2, var(--csh)) 70% 50% / .10) 45%, transparent 72%);
  filter: blur(34px); opacity: .9;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.wk-card:hover, .wk-card:focus-visible { border-color: var(--border-strong); transform: translateY(-3px); }
.wk-card:hover .wk-bloom { opacity: 1; transform: translateY(6%) scale(1.06); }
.wk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wk-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wk-mark {
  width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: var(--text);
  background: hsl(var(--csh) 60% 55% / .18); border: 1px solid hsl(var(--csh) 60% 65% / .28);
}
.wk-meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); text-align: right; }
.wk-brand { font-family: var(--serif); font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.1; letter-spacing: -.015em; margin-top: .3rem; }
.wk-quote { color: var(--text-2); font-size: .93rem; line-height: 1.62; flex: 1; }
.wk-stat { font-size: .84rem; color: var(--text-3); padding-top: .9rem; border-top: 1px solid var(--border); }
.wk-stat b { font-size: 1.15rem; color: hsl(var(--csh) 72% 72%); margin-right: .4rem;
  font-weight: 500; font-variant-numeric: tabular-nums; }
.wk-go { font-size: .87rem; color: var(--text); display: inline-flex; align-items: center; gap: .45rem; }
.wk-go i { font-style: normal; transition: transform .4s var(--ease); }
.wk-card:hover .wk-go i { transform: translateX(4px); }

.wk-table-wrap { margin-top: 2.2rem; overflow-x: auto; }
.wk-table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .92rem; }
.wk-table th { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); font-weight: 400;
  text-align: left; padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--border); }
.wk-table td { padding: .95rem .9rem .95rem 0; border-bottom: 1px solid var(--border);
  color: var(--text-2); vertical-align: top; }
.wk-table .wk-name { color: var(--text); white-space: nowrap; }
.wk-table .wk-when { color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-table .wk-say { font-style: italic; }
.wk-table tbody tr:hover td { background: var(--surface); }

/* --- case study ------------------------------------------------------- */
.cs-crumb { padding-top: 6.5rem; display: flex; gap: .6rem; align-items: center;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3); }
.cs-crumb a { color: var(--text-2); text-decoration: none; }
.cs-crumb a:hover { color: var(--text); }

.cs-cover { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.cs-bloom {
  position: absolute; inset: -60% -10% auto -10%; height: 150%; z-index: -1;
  background:
    radial-gradient(46% 44% at 22% 12%, hsl(var(--csh) 72% 55% / .26) 0%, transparent 68%),
    radial-gradient(40% 40% at 82% 4%, hsl(var(--csh2) 70% 55% / .18) 0%, transparent 66%);
  filter: blur(50px);
}
.cs-cover-in { max-width: 900px; }
.cs-eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: hsl(var(--csh) 65% 74%); margin: 0 0 1.5rem; }
.cs-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: 1.02;
  /* A serif at display size wants a looser fit than the sans does; -0.03em
     was borrowed from the sans headings and was closing the counters. These
     titles are brand names and deliberately take no turn — a proper noun in
     italic reads as a citation, as though we were quoting the client rather
     than presenting them. */
  letter-spacing: -0.022em;
  margin: 0; color: var(--text); text-wrap: balance;
}
.cs-lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.6; color: var(--text-2);
  margin: 1.6rem 0 0; max-width: 46ch; }
.cs-verified { display: inline-flex; align-items: center; gap: .55rem; margin: 2.2rem 0 0;
  padding: .5rem .9rem .5rem .6rem; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid rgba(67,207,156,.24);
  font-size: .82rem; color: var(--text); }
.cs-check { width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: .68rem; font-weight: 700; }

.cs-statband { border-block: 1px solid var(--border); background: var(--bg-2); }
.cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.cs-stat { padding: 1.8rem 1.2rem 1.7rem; border-left: 1px solid var(--border); }
.cs-stat:first-child { border-left: 0; padding-left: 0; }
.cs-stat b { display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums; }
.cs-stat span { display: block; margin-top: .6rem; font-size: .82rem; line-height: 1.45; color: var(--text-3); }

.cs-quote-sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.cs-quote { margin: 0; max-width: 900px; }
.cs-quote p { font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.55rem, 4vw, 2.8rem); line-height: 1.24; letter-spacing: -.02em;
  color: var(--text); margin: 0; text-wrap: balance; }
.cs-quote cite { display: block; margin-top: 1.8rem; font-style: normal; font-size: .92rem; color: var(--text); }
.cs-quote cite span { display: block; margin-top: .3rem; font-family: var(--mono);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

.cs-sec { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.cs-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.cs-col-label { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); position: sticky; top: 110px; }
.cs-col-label span { display: block; margin-bottom: .5rem; color: hsl(var(--csh) 65% 70%); }
.cs-prose { max-width: 62ch; }
.cs-prose p { font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.75; color: var(--text-2); margin: 0 0 1.3rem; }
.cs-prose p:last-child { margin-bottom: 0; }
.cs-outcome { color: var(--text) !important; }

.cs-focus-grid { display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.cs-focus { background: var(--bg); padding: 1.6rem 1.5rem; }
.cs-focus h3 { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 500; color: var(--text); }
.cs-focus p { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.68; max-width: 60ch; }

.cs-next-sec { padding-top: clamp(3rem, 6vw, 5rem); }
.cs-next-h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -.02em; margin: 0 0 1.6rem; color: var(--text); }
.cs-next-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cs-next-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-2);
  text-decoration: none; color: var(--text); transition: border-color .4s var(--ease), transform .4s var(--ease); }
.cs-next-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cs-next-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cs-next-mark { width: 2.2rem; height: 2.2rem; border-radius: 8px; display: grid; place-items: center;
  flex: none; font-family: var(--mono); font-size: .74rem;
  background: hsl(var(--csh) 60% 55% / .18); border: 1px solid hsl(var(--csh) 60% 65% / .26); }
.cs-next-body { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.cs-next-body b { font-weight: 500; font-size: .98rem; }
.cs-next-body i { font-style: normal; font-size: .78rem; color: var(--text-3); }
.cs-next-go { color: var(--text-3); transition: transform .4s var(--ease), color .4s var(--ease); }
.cs-next-card:hover .cs-next-go { transform: translateX(4px); color: var(--text); }

.cs-cta { padding: clamp(4rem, 8vw, 6.5rem) 0; background: var(--bg-2);
  border-top: 1px solid var(--border); text-align: center; }
.cs-cta-in { max-width: 620px; }
.cs-cta h2 { font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.14; letter-spacing: -.025em;
  margin: 0; color: var(--text); text-wrap: balance; }
.cs-cta p { color: var(--text-2); line-height: 1.7; margin: 1.1rem auto 2rem; max-width: 46ch; }

@media (max-width: 1000px) {
  .wk-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .cs-col-label { position: static; }
}
@media (max-width: 720px) {
  .wk-grid, .cs-next-grid { grid-template-columns: 1fr; }
  .cs-stats { grid-template-columns: repeat(2, 1fr); }
  .cs-stat { border-left: 0; padding: 1.3rem 0; border-top: 1px solid var(--border); }
  .cs-stat:nth-child(-n+2) { border-top: 0; }
  .cs-stat:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .wk-card, .wk-bloom, .cs-next-card, .wk-go i, .cs-next-go { transition: none !important; }
  .wk-card:hover, .cs-next-card:hover { transform: none; }
}

/* ============ 27 · HOMEPAGE CASE-STUDY STRIP ============ */
/* Reuses the .wk-card system from section 26 so the homepage strip and the
   /work/ index stay one component, not two that drift apart. */
.cstrip { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--bg); }
.cstrip-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.cstrip-h { margin: .9rem 0 0; text-wrap: balance; }
.cstrip-all {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  color: var(--text); text-decoration: none; font-size: .95rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--border-strong);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.cstrip-all i { font-style: normal; transition: transform .35s var(--ease); }
.cstrip-all:hover { border-color: var(--accent); }
.cstrip-all:hover i { transform: translateX(4px); }
.cstrip-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
@media (max-width: 720px) { .cstrip-head { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .cstrip-all, .cstrip-all i { transition: none !important; } }

/* Counting digits must not reflow the layout mid-animation. */
.stats .count { font-variant-numeric: tabular-nums; }

/* ============ 28 · HERO PROOF LINE ============ */
/* Falsifiable proof in the first screen. The audit's point: nothing above the
   fold was checkable, and the reviews sat at 80% scroll depth. */
.hero-proof {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: 1.6rem 0 0; font-size: .92rem; color: var(--text-2);
}
.hero-proof b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.hp-stars { color: var(--accent); letter-spacing: .08em; font-size: .9em; }
.hp-link {
  margin-left: .35rem; padding-left: .85rem; border-left: 1px solid var(--border-strong);
  color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
  transition: color .3s var(--ease);
}
.hp-link i { font-style: normal; transition: transform .3s var(--ease); }
.hp-link:hover i { transform: translateX(3px); }
.hp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 560px) {
  .hero-proof { font-size: .86rem; }
  .hp-link { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hp-link, .hp-link i { transition: none !important; } }

/* Timezone reassurance directly under the slot grid. */
.slot-tz { margin: .85rem 0 0; font-size: .78rem; color: var(--text-3); }

/* ============ 29 · PRICING ============ */
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
.pr-card {
  position: relative; display: flex; flex-direction: column;
  padding: 1.9rem 1.7rem 1.7rem; border: 1px solid var(--border);
  border-radius: 20px; background: var(--bg-2);
}
.pr-card.is-pop {
  border-color: hsl(var(--csh) 60% 60% / .38);
  background:
    radial-gradient(120% 90% at 50% 0%, hsl(var(--csh) 65% 55% / .12) 0%, transparent 62%),
    var(--bg-2);
}
.pr-pop {
  position: absolute; top: -.72rem; left: 1.7rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px;
  color: var(--accent-ink); background: var(--accent);
}
.pr-name { font-family: var(--serif); font-weight: 400; font-size: 1.55rem;
  letter-spacing: -.02em; margin: 0; color: var(--text); }
.pr-who { margin: .5rem 0 0; color: var(--text-2); font-size: .92rem; line-height: 1.6; min-height: 3em; }
.pr-price { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
  margin: 1.4rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--border); }
.pr-from { font-size: .8rem; color: var(--text-3); }
.pr-price b { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -.03em;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.pr-price i { font-style: normal; font-size: .84rem; color: var(--text-3); }
.pr-time { margin: .55rem 0 0; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--csh) 62% 72%); }
.pr-inc { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .65rem; flex: 1; }
.pr-inc li { position: relative; padding-left: 1.6rem; font-size: .92rem;
  line-height: 1.55; color: var(--text-2); }
.pr-inc li::before { content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-size: .82rem; }
.pr-cta { width: 100%; justify-content: center; margin-top: 1.7rem; }
.pr-foot { margin: 1.6rem 0 0; font-size: .84rem; color: var(--text-3); }

.pr-two { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pr-list { list-style: none; margin: 1.7rem 0 0; padding: 0; display: grid; gap: .7rem; }
.pr-list li { position: relative; padding-left: 1.5rem; color: var(--text-2); font-size: .95rem; }
.pr-list li::before { content: '+'; position: absolute; left: 0; top: -1px;
  color: var(--accent); font-size: .95rem; }
.pr-list-out li::before { content: '\2013'; color: var(--text-3); }
.pr-terms { margin: 1.8rem 0 0; padding: 1rem 1.15rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: .9rem; line-height: 1.65; color: var(--text-2); }
.pr-terms b { color: var(--text); font-weight: 500; }

.pr-cmp td:last-child, .pr-cmp th:last-child { color: var(--text); }

@media (max-width: 980px) {
  .pr-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pr-who { min-height: 0; }
  .pr-two { grid-template-columns: 1fr; }
}

/* ============ 30 · NAV FIT (7 items) ============ */
/* Adding Pricing pushed the pill past its container between ~990 and ~1200px.
   Tighten the links progressively rather than dropping to the burger early —
   the CTA staying visible is worth more than a few px of padding. */
@media (max-width: 1240px) {
  .nav-links { gap: 0.1rem; }
  .nav-links a { padding-left: 0.55rem; padding-right: 0.55rem; }
}
@media (max-width: 1080px) {
  .nav-links a { padding-left: 0.42rem; padding-right: 0.42rem; font-size: 0.86rem; }
  .nav-pill { padding-left: 0.55rem; padding-right: 0.55rem; }
}

/* ============ 31 · LANDING-PAGE SHOWCASE ============ */
/* The whole page we built, pannning slowly inside a browser frame. This is the
   proof — a prospect sees the real thing rather than a cropped teaser. */
.lp-sec { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); }
.lp-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.lp-head .cs-eyebrow { margin: 0; }
.lp-hint { margin: 0; font-size: .8rem; color: var(--text-3);
  display: inline-flex; align-items: center; gap: .5rem; }
.lp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: lp-pulse 2.4s ease-in-out infinite; }
@keyframes lp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.lp-frame {
  margin: 0; border: 1px solid var(--border-strong); border-radius: 14px;
  overflow: hidden; background: var(--bg-2);
  box-shadow: 0 50px 110px -60px rgba(0,0,0,.95);
}
.lp-chrome {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.lp-lights { display: inline-flex; gap: .38rem; }
.lp-lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.lp-tab {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  padding: .22rem .8rem; border-radius: 6px;
}
.lp-window { position: relative; height: clamp(420px, 62vh, 760px); overflow: hidden; }
.lp-shot {
  display: block; width: 100%; height: auto;
  will-change: transform;
  animation: lp-pan 78s linear infinite alternate;
  animation-play-state: paused;          /* started by the observer when in view */
}
.lp-frame.is-live .lp-shot { animation-play-state: running; }
.lp-frame:hover .lp-shot,
.lp-frame:focus-within .lp-shot { animation-play-state: paused; }
@keyframes lp-pan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-100% + clamp(420px, 62vh, 760px)), 0); }
}
.lp-cap { padding: .85rem 1rem; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .lp-shot { animation: none !important; }
  .lp-dot { animation: none !important; }
  .lp-window { height: auto; max-height: 620px; overflow-y: auto; }
}

/* ============ 32 · BUILD CARDS (image-led) ============ */
.bw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.bw-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  background: var(--bg-2); transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.bw-card:hover { border-color: hsl(var(--csh) 60% 60% / .45); transform: translateY(-3px); }
.bw-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bw-shot { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sunk, #111); }
.bw-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 1.1s var(--ease); }
.bw-card:hover .bw-shot img { transform: scale(1.035); }
.bw-meta { display: flex; flex-direction: column; gap: .25rem; padding: 1.15rem 1.25rem .4rem; }
.bw-meta b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; letter-spacing: -.015em; }
.bw-meta i { font-style: normal; font-size: .82rem; color: var(--text-3); }
.bw-go { padding: .7rem 1.25rem 1.25rem; font-size: .88rem; color: var(--text-2);
  display: inline-flex; align-items: center; gap: .4rem; }
.bw-go em { font-style: normal; transition: transform .4s var(--ease); }
.bw-card:hover .bw-go { color: var(--text); }
.bw-card:hover .bw-go em { transform: translateX(4px); }
@media (max-width: 1000px) { .bw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .bw-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .bw-card, .bw-shot img, .bw-go em { transition: none !important; }
  .bw-card:hover { transform: none; }
}

/* ============ 33 · SCROLLING PREVIEW (shared component) ============ */
/* One component drives the homepage cards and the case-study hero frames.
   Motion is real scrolling rather than a transform, so a visitor's own wheel
   or thumb takes over naturally and never fights the animation. */
.pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

.pv-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  background: var(--bg-2);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.pv-card:hover {
  transform: translateY(-4px);
  border-color: hsl(var(--csh) 60% 60% / .40);
  box-shadow: 0 40px 80px -48px rgba(0,0,0,.9), 0 0 0 1px hsl(var(--csh) 60% 60% / .12);
}
.pv-card:focus-within { border-color: hsl(var(--csh) 60% 62% / .5); }

.pv-frame { position: relative; }
.pv-chrome, .lp-chrome {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .85rem; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.045);
}
.pv-lights { display: inline-flex; gap: .32rem; }
.pv-lights i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.pv-tab {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  padding: .18rem .7rem; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%;
}

/* The viewport. Real scroller: manual input is free and needs no interception. */
.pv-port, .lp-port {
  overflow-y: auto; overscroll-behavior-y: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  background: #fff;
}
.pv-port::-webkit-scrollbar, .lp-port::-webkit-scrollbar { width: 0; height: 0; }
.pv-port { height: clamp(340px, 42vw, 480px); }
.pv-port:focus-visible, .lp-port:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pv-shot { display: block; width: 100%; height: auto; }

/* A quiet status dot: moving, paused, or yours. */
.pv-state {
  position: absolute; right: .7rem; top: .62rem; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); opacity: .85; transition: background .3s, opacity .3s, transform .3s;
}
.pv-frame.is-paused .pv-state { background: var(--text-3); transform: scale(.8); }
.pv-frame.is-manual .pv-state { background: hsl(var(--csh, 150) 70% 62%); }

.pv-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pv-sector { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); }
.pv-brand { margin: .55rem 0 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: -.02em; color: var(--text); }
.pv-line { margin: .6rem 0 0; color: var(--text-2); font-size: .92rem; line-height: 1.6; flex: 1; }
.pv-out { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: .85rem; color: var(--text); display: flex; align-items: center; gap: .5rem; }
.pv-out span { color: hsl(var(--csh) 65% 62%); font-size: .55rem; }
.pv-cta { margin-top: 1.1rem; align-self: flex-start; text-decoration: none; color: var(--text);
  font-size: .9rem; display: inline-flex; align-items: center; gap: .45rem;
  padding-bottom: .25rem; border-bottom: 1px solid var(--border-strong);
  transition: border-color .35s var(--ease); }
.pv-cta i { font-style: normal; transition: transform .35s var(--ease); }
.pv-card:hover .pv-cta { border-color: hsl(var(--csh) 62% 60%); }
.pv-card:hover .pv-cta i { transform: translateX(4px); }
.pv-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Case-study hero frame reuses the same scroller. */
.lp-window.lp-port { height: clamp(440px, 64vh, 780px); }
.lp-shot { animation: none !important; }   /* superseded by the JS scroller */

@media (max-width: 1000px) { .pv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  {
  .pv-grid { grid-template-columns: 1fr; }
  .pv-port { height: clamp(400px, 78vw, 520px); }
}
@media (prefers-reduced-motion: reduce) {
  .pv-card { transition: none !important; }
  .pv-card:hover { transform: none; }
}

/* Hero proof line sits centred under the subheadline. */
.hero-proof { justify-content: center; }

/* ============ 34 · CONCEPT STUDIES ============ */
.cpt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.cpt-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg);
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.cpt-card:hover { border-color: hsl(var(--csh) 60% 60% / .45); transform: translateY(-3px); }
.cpt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cpt-shot { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.cpt-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cpt-card:hover .cpt-shot img { transform: scale(1.05); }
.cpt-tag {
  position: absolute; left: .7rem; top: .7rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 999px;
  color: var(--text); background: rgba(8,9,11,.66); border: 1px solid rgba(255,255,255,.22);
}
.cpt-meta { display: flex; flex-direction: column; gap: .2rem; padding: .95rem 1.05rem .3rem; flex: 1; }
.cpt-meta b { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; letter-spacing: -.015em; }
.cpt-meta i { font-style: normal; font-size: .76rem; color: var(--text-3); }
.cpt-go { padding: .55rem 1.05rem 1.05rem; font-size: .82rem; color: var(--text-2);
  display: inline-flex; align-items: center; gap: .38rem; }
.cpt-go em { font-style: normal; transition: transform .4s var(--ease); }
.cpt-card:hover .cpt-go { color: var(--text); }
.cpt-card:hover .cpt-go em { transform: translateX(3px); }

/* Concept badge on the case study page itself. */
.cpt-badge {
  display: inline-flex; align-items: center; gap: .5rem; margin: 2rem 0 0;
  padding: .45rem .9rem; border-radius: 999px; font-size: .82rem; color: var(--text-2);
  background: var(--surface); border: 1px dashed var(--border-strong);
}
.cpt-badge span { color: hsl(var(--csh) 65% 66%); font-size: .6rem; }

.cpt-art-sec { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.cpt-art { margin: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.cpt-art img { display: block; width: 100%; height: auto; }
.cpt-art figcaption { padding: .8rem 1.1rem; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); background: var(--bg-2); }

@media (max-width: 1100px) { .cpt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .cpt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .cpt-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cpt-card, .cpt-shot img, .cpt-go em { transition: none !important; }
  .cpt-card:hover { transform: none; }
}

/* Modal now offers the full case study as well as the booking call. */
.m-cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.m-cta-2 { flex: none; }

/* ============ 35 · ABOUT ============ */
.ab-hero { padding: clamp(7rem, 12vw, 9.5rem) 0 0; }
.ab-hero .gs-h1 { max-width: 20ch; }
.ab-hero .gs-lede { max-width: 56ch; }
.ab-shot { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; overflow: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ab-shot img { display: block; width: 100%; height: auto; }

.ab-mission { max-width: 900px; }
.ab-mission-q { font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 2.15rem); line-height: 1.32; letter-spacing: -.02em;
  color: var(--text); margin: 1.2rem 0 0; text-wrap: balance; }

.ab-steps { display: grid; gap: 1px; margin-top: 2.6rem; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.ab-step { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 1.2rem;
  background: var(--bg); padding: 1.5rem 1.6rem; align-items: start; }
.ab-num { font-family: var(--mono); font-size: .82rem; color: var(--accent); padding-top: .18rem; }
.ab-step h3 { margin: 0 0 .45rem; font-size: 1.02rem; font-weight: 500; color: var(--text); }
.ab-step p { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.68; max-width: 68ch; }

.ab-impact { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 2.4rem;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.ab-impact div { background: var(--bg); padding: 1.6rem 1.3rem; }
.ab-impact b { display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem,3vw,2.4rem); line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ab-impact span { display: block; margin-top: .6rem; font-size: .82rem; color: var(--text-3); line-height: 1.45; }
.ab-quote { margin: 2.4rem 0 0; padding-left: 1.4rem; border-left: 2px solid var(--accent); max-width: 780px; }
.ab-quote p { font-family: var(--serif); font-size: clamp(1.2rem,2.4vw,1.8rem); line-height: 1.3;
  letter-spacing: -.015em; color: var(--text); margin: 0; }
.ab-quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: .9rem; color: var(--text); }
.ab-quote cite span { display: block; margin-top: .25rem; font-family: var(--mono);
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ab-note { margin: 1.8rem 0 0; color: var(--text-2); font-size: .92rem; line-height: 1.7; max-width: 64ch; }
.ab-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.ab-team { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.ab-team-copy p { color: var(--text-2); line-height: 1.75; margin: 0 0 1.1rem; max-width: 54ch; }
.ab-team-img { margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border); }
.ab-team-img img { display: block; width: 100%; height: auto; }

.ab-vals { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 2.4rem;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.ab-val { background: var(--bg); padding: 1.7rem 1.5rem; }
.ab-val h3 { margin: 0 0 .6rem; font-size: 1.02rem; font-weight: 500; color: var(--text); }
.ab-val p { margin: 0; color: var(--text-2); font-size: .93rem; line-height: 1.68; }

.pr-list-out li b { color: var(--text); font-weight: 500; }
.pr-list-out li { line-height: 1.7; margin-bottom: 1rem; }

@media (max-width: 900px) {
  .ab-impact { grid-template-columns: repeat(2,1fr); }
  .ab-vals { grid-template-columns: 1fr; }
  .ab-team { grid-template-columns: 1fr; }
  .ab-step { grid-template-columns: 54px minmax(0,1fr); gap: .8rem; }
}

/* ============ 36 · CASE STUDY HERO SHOT ============ */
/* The same image the homepage card showed, so opening a case study feels like
   continuing from the card rather than arriving somewhere new. */
.cs-heroshot-sec { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.cs-hero-shot {
  margin: 0; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 50px 110px -60px rgba(0,0,0,.95);
  max-width: 780px;
}
.cs-hero-shot img { display: block; width: 100%; height: auto; }

/* ============ 37 · SHOWCASE HOVER — ONE SYSTEM ============ */
/* Every tile now shares one grayscale value, one easing curve and one duration.
   The six decorative fragments previously had pointer-events:none, so they were
   the "static" cards — they now respond identically, they just do not navigate. */
:root {
  --sc-gray: 0.85;
  --sc-gray-hover: 0.12;
  --sc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sc-dur: 0.55s;
}
.sc-tile img {
  filter: grayscale(var(--sc-gray)) contrast(1.06) brightness(0.9);
  transition: filter var(--sc-dur) var(--sc-ease);
  will-change: filter;
}
.sc-tile:hover .sc-in img,
.sc-tile:focus-visible .sc-in img {
  filter: grayscale(var(--sc-gray-hover)) contrast(1.04) brightness(0.98);
}
.sc-in { transition: transform var(--sc-dur) var(--sc-ease), border-color var(--sc-dur), box-shadow var(--sc-dur); }
.sc-tile:hover .sc-in, .sc-tile:focus-visible .sc-in {
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 44px 110px -32px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(67, 207, 156, 0.12);
}
/* Fragments join the same system: same filter, same timing, gentler lift.
   They carry no project, so they must not look clickable. */
.sc-frag { pointer-events: auto; cursor: default; opacity: 0.35;
  transition: opacity var(--sc-dur) var(--sc-ease); }
.sc-frag:hover { opacity: 0.62; }
.sc-frag:hover .sc-in { transform: translateY(-3px) scale(1.015); }
.sc-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 20px; }
@media (prefers-reduced-motion: reduce) {
  .sc-tile img, .sc-in, .sc-frag { transition: none !important; }
  .sc-tile:hover .sc-in, .sc-frag:hover .sc-in { transform: none; }
}

/* Match the older, higher-specificity rule so every tile lands on one value. */
.sc-tile:not(.sc-frag):hover .sc-in img,
.sc-tile:not(.sc-frag):focus-visible .sc-in img {
  filter: grayscale(var(--sc-gray-hover)) contrast(1.04) brightness(0.98);
}

/* About: working photographs, sitting under the team copy. */
.ab-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  max-width: 1200px; margin: clamp(2rem, 4vw, 3rem) auto 0; padding-inline: var(--gutter, 1.5rem);
}
.ab-gallery figure { margin: 0; border-radius: var(--r-media); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-2); }
.ab-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
  filter: grayscale(.55) contrast(1.03); transition: filter .6s var(--ease); }
.ab-gallery figure:hover img { filter: grayscale(0) contrast(1); }
.ab-gallery figcaption { padding: .7rem .9rem; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-3); line-height: 1.45; }
@media (max-width: 820px) { .ab-gallery { grid-template-columns: 1fr; max-width: 460px; } }
@media (prefers-reduced-motion: reduce) { .ab-gallery img { transition: none !important; } }

/* ============ 38 · PORTFOLIO CARDS — ONE SYSTEM ============ */
/* Portrait thumbnail is the hero of the card, top-aligned so the fold of the
   landing page reads first. No overlay: the artwork carries it. */
.cpt-shot img, .bw-shot img { object-position: top center; }
.cpt-card, .bw-card { border-radius: 20px; }
.cpt-card:hover, .bw-card:hover {
  box-shadow: 0 40px 80px -48px rgba(0,0,0,.9), 0 0 0 1px hsl(var(--csh) 60% 60% / .12);
}
.cpt-meta, .bw-meta { padding: 1.25rem 1.3rem .4rem; }
.cpt-meta b, .bw-meta b { font-size: 1.24rem; }
.cpt-go, .bw-go { padding: .7rem 1.3rem 1.3rem; }
/* Concept chip stays a chip — it is a label, not a scrim. */
.cpt-tag { background: rgba(8,9,11,.72); backdrop-filter: none; }

/* ============ 39 · ABOUT — EDITORIAL IMAGERY ============ */
.ab-band { margin: clamp(3rem,7vw,6rem) 0; }
.ab-band figure { margin: 0; position: relative; }
.ab-band img { display: block; width: 100%; height: clamp(320px,52vh,620px); object-fit: cover;
  filter: grayscale(.35) contrast(1.04); }
.ab-band figcaption {
  max-width: 1200px; margin-inline: auto; padding: 1.4rem clamp(1rem,4vw,2rem) 0;
  display: grid; grid-template-columns: 200px minmax(0,1fr); gap: clamp(1rem,3vw,2.5rem);
}
.ab-band figcaption b { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); font-weight: 400; }
.ab-band figcaption span { color: var(--text-2); line-height: 1.72; max-width: 60ch; }

.ab-pair { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.ab-pair-lg { margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border); }
.ab-pair-lg img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover;
  filter: grayscale(.3) contrast(1.03); }
.ab-pair-copy p:not(.cs-eyebrow) { color: var(--text-2); line-height: 1.75; margin: 1.1rem 0 0; max-width: 52ch; }
.ab-pair-sm { margin: 2rem 0 0; border-radius: var(--r-media); overflow: hidden;
  border: 1px solid var(--border); max-width: 340px; }
.ab-pair-sm img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover;
  filter: grayscale(.4) contrast(1.03); }

/* ============ 40 · VALUES — ICON SYSTEM ============ */
.vl-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; margin-top: 2.6rem; }
.vl-card { padding: 1.8rem 1.6rem; border: 1px solid var(--border); border-radius: 18px;
  background: var(--bg); transition: border-color .45s var(--ease), background .45s var(--ease); }
.vl-card:hover { border-color: var(--border-strong); background: var(--bg-2); }
.vl-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid rgba(67,207,156,.2); color: var(--accent);
  margin-bottom: 1.2rem; }
.vl-ico svg { width: 21px; height: 21px; }
.vl-card h3 { margin: 0 0 .55rem; font-size: 1.04rem; font-weight: 500; color: var(--text); }
.vl-card p { margin: 0; color: var(--text-2); font-size: .93rem; line-height: 1.7; }

@media (max-width: 900px) {
  .vl-grid { grid-template-columns: 1fr; }
  .ab-pair { grid-template-columns: 1fr; }
  .ab-band figcaption { grid-template-columns: 1fr; gap: .6rem; }
}

/* ============ 41 · HERO ATMOSPHERE — SITEWIDE ============ */
/* The same teal-into-violet bloom the footer uses, so every page opens and
   closes on the same note. Two soft orbs behind the hero copy, blurred to
   100px exactly as the footer does it — never a flat fill. */
.gs-hero, .wk-hero, .ab-hero, .cs-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.gs-hero::before, .wk-hero::before, .ab-hero::before, .cs-cover::before,
.gs-hero::after,  .wk-hero::after,  .ab-hero::after {
  content: ''; position: absolute; z-index: -1;
  width: 620px; height: 620px; border-radius: 9999px;
  background: linear-gradient(180deg, rgba(30, 180, 180, 0.12) 0%, rgba(140, 60, 220, 0.16) 100%);
  filter: blur(100px);
  transform: rotate(152.044deg);
  pointer-events: none;
}
.gs-hero::before, .wk-hero::before, .ab-hero::before { left: 4%;  top: -34%; }
.gs-hero::after,  .wk-hero::after,  .ab-hero::after  { right: -6%; bottom: -42%;
  background: linear-gradient(180deg, rgba(0, 233, 228, 0.10) 0%, rgba(160, 79, 244, 0.14) 100%); }

/* Case-study covers already carry a per-project bloom; give them the house
   gradient underneath it rather than a second competing orb. */
.cs-cover::before { left: 2%; top: -40%; width: 720px; height: 720px; opacity: .8; }

@media (max-width: 720px) {
  .gs-hero::before, .wk-hero::before, .ab-hero::before, .cs-cover::before,
  .gs-hero::after,  .wk-hero::after,  .ab-hero::after { width: 420px; height: 420px; filter: blur(80px); }
}


/* ============ 21 · TOUCH TARGETS ============ */

/* Thumbs want 44px; these three links sit at 20-32px. Grow the hit
   area with a pseudo-element so nothing shifts visually. */
@media (max-width: 900px) {
     .story-link,
     .footer-mail,
     .menu-mail a { position: relative; }

  .story-link::after,
     .footer-mail::after,
     .menu-mail a::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 44px;
            transform: translateY(-50%);
     }
}

/* ============ 42 · THUMBNAIL MICRO-INTERACTION ============ */
/* Real project thumbnails, no overlay of any kind. The motion is small on
   purpose: a slow rise in scale and light, so it reads as the image waking up
   rather than as an effect being applied to it. */
.cpt-shot img, .bw-shot img {
  transform-origin: top center;
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
  filter: saturate(.92) brightness(.94);
}
.cpt-card:hover .cpt-shot img,
.bw-card:hover .bw-shot img,
.cpt-card:focus-within .cpt-shot img,
.bw-card:focus-within .bw-shot img {
  transform: scale(1.045);
  filter: saturate(1.06) brightness(1.02);
}
/* No scrim, no fade, nothing layered over the artwork. */
.cpt-shot::after, .bw-shot::after, .cpt-shot::before, .bw-shot::before { content: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cpt-shot img, .bw-shot img { transition: none !important; }
  .cpt-card:hover .cpt-shot img, .bw-card:hover .bw-shot img { transform: none; }
}

/* Typographic tile for case studies that have no screenshot yet. */
.cpt-shot-type { display: grid; place-items: center; aspect-ratio: 4/5;
  background: radial-gradient(120% 100% at 50% 0%, hsl(var(--csh) 55% 40% / .30) 0%, transparent 70%), var(--bg-2); }
.cpt-initials { font-family: var(--serif); font-size: 3.2rem; letter-spacing: -.03em;
  color: hsl(var(--csh) 60% 78%); opacity: .9; }

/* ============ 43 · SERVICE CARD MOTION ============ */
/* The Retention and AI cards already felt alive; the rest were static. Same
   treatment, applied evenly: a small rise, a warming border and an arrow that
   commits. Deliberately restrained — eight cards all moving is noise. */
.b-card, .bento > article, .bento > a {
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.bento > article:hover, .bento > a:hover, .b-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 36px 76px -46px rgba(0,0,0,.9), 0 0 0 1px rgba(67,207,156,.10);
}
.bento img { transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
.bento > article:hover img, .bento > a:hover img { transform: scale(1.03); filter: brightness(1.04); }
@media (prefers-reduced-motion: reduce) {
  .b-card, .bento > article, .bento > a, .bento img { transition: none !important; }
  .bento > article:hover, .bento > a:hover, .b-card:hover { transform: none; }
}

/* ============ 44 · SERVICE PAGES ============ */
.sv-quotes { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .9rem; }
.sv-quotes li {
  position: relative; padding: 1rem 1.2rem 1rem 2.6rem;
  border-left: 2px solid hsl(var(--csh) 60% 55% / .5);
  background: var(--surface); border-radius: 0 12px 12px 0;
  color: var(--text); font-size: .97rem; line-height: 1.65;
}
.sv-quotes li::before { content: '\201C'; position: absolute; left: .9rem; top: .55rem;
  font-family: var(--serif); font-size: 1.7rem; color: hsl(var(--csh) 62% 66%); line-height: 1; }

.sv-steps { list-style: none; counter-reset: sv; margin: 2.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden; }
.sv-steps li { background: var(--bg); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; }
.sv-num { font-family: var(--mono); font-size: .74rem; color: hsl(var(--csh) 62% 70%); }
.sv-steps b { font-weight: 500; font-size: 1rem; color: var(--text); }
.sv-steps li > span:last-child { color: var(--text-2); font-size: .9rem; line-height: 1.6; }

.sv-cases { grid-template-columns: repeat(3, 1fr); margin-top: 2.4rem; }
.sv-mid-cta { margin: 2rem 0 0; }
.sv-mid-cta a { color: var(--text); text-decoration: none; font-size: .95rem;
  border-bottom: 1px solid var(--border-strong); padding-bottom: .25rem;
  transition: border-color .35s var(--ease); }
.sv-mid-cta a:hover { border-color: hsl(var(--csh) 62% 60%); }
.sv-mid-cta a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 900px) {
  .sv-steps { grid-template-columns: 1fr; }
  .sv-cases { grid-template-columns: 1fr; }
}
/* Service card titles are now links, styled as the heading they already were. */
.svc-link { text-decoration: none; color: inherit; display: block; }
.svc-link:hover h3 { color: var(--accent); }
.svc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   45 · LIQUID GLASS — the interaction language
   ───────────────────────────────────────────────────────────────────────
   Black crystal rather than white frost, so it belongs to this palette
   instead of sitting on top of it. Every surface is built from layers:
   tint, gradient, noise, inner shadow, edge highlight, specular sweep.
   Never a single rgba fill.

   One deliberate exception, documented at section 46: surfaces that sit
   over the animated hero wall do NOT use backdrop-filter. It re-samples
   a moving 20-image collage every frame and measured 16fps here before.
   Those surfaces fake the same look with layered gradients instead.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --lg-tint:        rgba(255,255,255,.055);
  --lg-tint-hi:     rgba(255,255,255,.10);
  --lg-edge-top:    rgba(255,255,255,.28);
  --lg-edge-bottom: rgba(255,255,255,.06);
  --lg-inner:       inset 0 1px 0 var(--lg-edge-top), inset 0 -1px 0 var(--lg-edge-bottom);
  --lg-blur:        blur(22px) saturate(150%);
  --lg-ease:        cubic-bezier(.22,.61,.36,1);
  --lg-dur:         .34s;
  --lg-noise:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  /* Ambient · contact · glow · accent — layered, never one harsh drop. */
  --lg-shadow:      0 1px 2px rgba(0,0,0,.34), 0 8px 20px -8px rgba(0,0,0,.55),
                    0 22px 48px -24px rgba(0,0,0,.75);
  --lg-shadow-hi:   0 1px 2px rgba(0,0,0,.30), 0 12px 28px -10px rgba(0,0,0,.55),
                    0 30px 64px -26px rgba(0,0,0,.75), 0 0 26px -6px rgba(67,207,156,.22);
}

/* ── The material ──────────────────────────────────────────────────── */
.lg, .btn-ghost, .hero-cats a, .pv-card, .cpt-card, .bw-card, .vl-card, .pr-card, .gs-card {
  position: relative; isolation: isolate;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 42%, rgba(0,0,0,.14) 100%),
    var(--lg-noise);
  background-color: var(--lg-tint);
  box-shadow: var(--lg-inner), var(--lg-shadow);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform var(--lg-dur) var(--lg-ease),
              box-shadow var(--lg-dur) var(--lg-ease),
              background-color var(--lg-dur) var(--lg-ease),
              border-color var(--lg-dur) var(--lg-ease);
}
/* Specular sweep — the light that moves across the surface. */
.lg::after, .btn-ghost::after, .hero-cats a::after,
.pv-card::after, .cpt-card::after, .bw-card::after, .vl-card::after, .pr-card::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(
    22rem 22rem at var(--mx, 50%) var(--my, 0%),
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 32%, transparent 62%);
  transition: opacity var(--lg-dur) var(--lg-ease);
}
.lg:hover::after, .btn-ghost:hover::after, .hero-cats a:hover::after,
.pv-card:hover::after, .cpt-card:hover::after, .bw-card:hover::after,
.vl-card:hover::after, .pr-card:hover::after { opacity: 1; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  transition: transform var(--lg-dur) var(--lg-ease),
              box-shadow var(--lg-dur) var(--lg-ease),
              background-color var(--lg-dur) var(--lg-ease),
              border-color var(--lg-dur) var(--lg-ease),
              opacity var(--lg-dur) var(--lg-ease);
  will-change: transform;
}
.btn:hover { opacity: 1; }                       /* the old flat fade, retired */

.btn-primary {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: #f2f4f3;
  background-image: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 46%);
  color: var(--bg);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.10),
              0 1px 2px rgba(0,0,0,.30), 0 10px 24px -10px rgba(0,0,0,.6),
              0 24px 50px -26px rgba(0,0,0,.7);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(12rem 12rem at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.85) 0%, transparent 60%);
  transition: opacity var(--lg-dur) var(--lg-ease);
  mix-blend-mode: soft-light;
}
.btn-primary:hover {
  transform: translateY(-1.5px) scale(1.014);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,0,0,.10),
              0 2px 4px rgba(0,0,0,.28), 0 16px 34px -12px rgba(0,0,0,.62),
              0 34px 68px -28px rgba(0,0,0,.72), 0 0 30px -8px rgba(67,207,156,.30);
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0) scale(.985);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.3); }

.btn-ghost { color: var(--text); }
.btn-ghost:hover {
  transform: translateY(-1.5px);
  background-color: var(--lg-tint-hi);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--lg-inner), var(--lg-shadow-hi);
}
.btn-ghost:active { transform: translateY(0) scale(.99);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.30); }

/* Focus: a soft emerald ring, not a browser outline. */
.btn:focus-visible, .hero-cats a:focus-visible, .lg:focus-visible {
  outline: none;
  box-shadow: var(--lg-inner), var(--lg-shadow),
              0 0 0 2px rgba(67,207,156,.55), 0 0 22px -2px rgba(67,207,156,.45);
}
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; filter: saturate(.5); box-shadow: var(--lg-inner); transform: none;
}

/* Icons sit inside the glass rather than on it. */
.btn .arr, .btn .arr2, .btn svg {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
  transition: transform var(--lg-dur) var(--lg-ease);
}
.btn:hover .arr2 { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .lg, .btn-ghost, .pv-card, .cpt-card, .bw-card, .vl-card, .pr-card { transition: none !important; }
  .btn:hover, .btn-primary:hover, .btn-ghost:hover { transform: none !important; }
  .lg::after, .btn-primary::after, .btn-ghost::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   46 · THE HERO STRIP — one floating glass panel
   ───────────────────────────────────────────────────────────────────────
   Four segments inside a single pane, divided by glowing hairlines rather
   than gaps, so it reads as one object floating over the hero.

   NO backdrop-filter here. This strip sits directly over the animated
   wall — 20 screenshots moving continuously — and a backdrop-filter
   re-samples that region every frame. Measured 16fps when this site
   tried it before. The layered gradients below produce the same read at
   a fraction of the cost.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-cats {
  position: relative; isolation: isolate;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  background-color: rgba(10,11,13,.72);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.30) 100%),
    var(--lg-noise);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.05),
    0 2px 6px rgba(0,0,0,.4), 0 20px 46px -18px rgba(0,0,0,.7),
    0 44px 90px -40px rgba(0,0,0,.85);
}
/* A slow light sweep while idle — roughly every 9 seconds. */
.hero-cats::before {
  content: ''; position: absolute; inset: -40% -60%; z-index: 0; pointer-events: none;
  background: linear-gradient(72deg, transparent 42%,
    rgba(255,255,255,.055) 49%, rgba(67,207,156,.05) 51%, transparent 58%);
  animation: lg-sweep 9s var(--lg-ease) infinite;
}
@keyframes lg-sweep {
  0%, 62% { transform: translateX(-60%); opacity: 0; }
  70%     { opacity: 1; }
  100%    { transform: translateX(60%); opacity: 0; }
}
.hero-cats a {
  position: relative; z-index: 1;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  transition: background-color var(--lg-dur) var(--lg-ease), transform var(--lg-dur) var(--lg-ease);
}
/* Glowing hairline dividers instead of borders. */
.hero-cats a + a::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.16) 30%,
              rgba(67,207,156,.20) 50%, rgba(255,255,255,.16) 70%, transparent);
}
.hero-cats a:hover {
  background-color: rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.hero-cats a:hover::after { opacity: 1; }
.hero-cats a:focus-visible {
  outline: none; background-color: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 2px rgba(67,207,156,.5);
}
@media (prefers-reduced-motion: reduce) {
  .hero-cats::before { animation: none; opacity: 0; }
  .hero-cats a:hover { transform: none; }
}

/* ── Cards inherit the material, keeping their own accent hue ────────── */
.pv-card:hover, .cpt-card:hover, .bw-card:hover, .vl-card:hover {
  background-color: var(--lg-tint-hi);
  box-shadow: var(--lg-inner), var(--lg-shadow-hi);
}
/* Surfaces away from the moving hero can afford real blur. */
.pr-card, .vl-card, .book-panel, .fa-panel { backdrop-filter: var(--lg-blur); }

/* ═══════════════════════════════════════════════════════════════════════
   47 · SIGNATURE CTA — the living surface
   ───────────────────────────────────────────────────────────────────────
   What makes it ours rather than Apple's: emerald liquid that drifts
   slowly *behind* the glass, so the button appears to have something
   moving inside it rather than a highlight painted on top. The shimmer
   crosses only occasionally, and the glow only ever appears on intent.
   ═══════════════════════════════════════════════════════════════════════ */
.btn-primary { overflow: hidden; transform: translateZ(0); }

/* Layer 1 — the liquid. Two offset radial blooms drifting out of phase,
   clipped by the capsule, sitting under the glass surface. */
.btn-primary::before {
  content: ''; position: absolute; inset: -70%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 46% at 28% 42%, rgba(67,207,156,.55) 0%, transparent 62%),
    radial-gradient(34% 40% at 72% 58%, rgba(0,190,200,.42) 0%, transparent 62%);
  filter: blur(14px);
  opacity: .30;
  animation: lg-liquid 14s cubic-bezier(.42,0,.58,1) infinite;
  transition: opacity var(--lg-dur) var(--lg-ease);
}
@keyframes lg-liquid {
  0%   { transform: translate3d(-6%, -3%, 0) rotate(0deg)   scale(1); }
  33%  { transform: translate3d( 5%,  4%, 0) rotate(42deg)  scale(1.12); }
  66%  { transform: translate3d(-3%,  5%, 0) rotate(-28deg) scale(1.05); }
  100% { transform: translate3d(-6%, -3%, 0) rotate(0deg)   scale(1); }
}
.btn-primary:hover::before { opacity: .5; }

/* Layer 2 — the shimmer. Crosses roughly every 7s, and again on hover. */
.btn-primary .lg-sheen {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  overflow: hidden;
}
.btn-primary .lg-sheen::before {
  content: ''; position: absolute; top: -50%; bottom: -50%; width: 42%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-18deg);
  animation: lg-sheen 7s var(--lg-ease) infinite;
}
@keyframes lg-sheen {
  0%, 72% { left: -60%; }
  88%     { left: 118%; }
  100%    { left: 118%; }
}
.btn-primary:hover .lg-sheen::before { animation-duration: 2.4s; }

/* The label must sit above every layer. */
.btn-primary > *:not(.lg-sheen):not(.lg-ripple) { position: relative; z-index: 3; }

/* Layer 3 — the click. A fluid wave, not a flat circle. */
.lg-ripple {
  position: absolute; z-index: 2; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(67,207,156,.28) 45%, transparent 70%);
  animation: lg-ripple .62s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes lg-ripple {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}

/* ── Hierarchy ──────────────────────────────────────────────────────── */
/* Primary keeps the liquid. Secondary gets the glass without it. Text
   buttons get motion only, so three tiers read at a glance. */
.btn-ghost::before, .nav-cta.btn-ghost::before { content: none; }

/* The nav CTA is the centrepiece — slightly stronger glow, always visible. */
.nav-cta.btn-primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.10),
              0 1px 2px rgba(0,0,0,.3), 0 10px 24px -10px rgba(0,0,0,.6),
              0 0 22px -6px rgba(67,207,156,.28);
}
.nav-cta.btn-primary:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.1),
  0 2px 5px rgba(0,0,0,.3), 0 18px 38px -12px rgba(0,0,0,.62), 0 0 34px -6px rgba(67,207,156,.45); }

/* ── States ─────────────────────────────────────────────────────────── */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .lg-sheen::before { animation-duration: 1.1s; }
.btn.is-loading::before { opacity: .62; animation-duration: 4s; }

.btn.is-done {
  background-color: var(--accent) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.55), transparent 55%) !important;
  color: var(--accent-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 0 30px -6px rgba(67,207,156,.6);
}
.btn.is-done::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::before, .btn-primary .lg-sheen::before { animation: none !important; }
  .lg-ripple { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   48 · SERVICES MEGA MENU
   ═══════════════════════════════════════════════════════════════════════ */
.mm-wrap { position: static; }
.mm-caret {
  display: inline-block; width: 5px; height: 5px; margin-left: .38rem;
  border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
  transform: translateY(-1.5px) rotate(45deg);
  transition: transform .3s var(--lg-ease); opacity: .6;
}
.mm-wrap.is-open .mm-caret { transform: translateY(0) rotate(225deg); opacity: 1; }

.mm {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 60;
  width: min(880px, calc(100vw - 3rem));
  transform: translate(-50%, -8px) scale(.985);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--lg-ease), transform .34s var(--lg-ease), visibility 0s .34s;
}
.mm-wrap.is-open .mm {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition: opacity .3s var(--lg-ease), transform .38s var(--lg-ease), visibility 0s;
}
.mm-inner {
  border-radius: 22px; padding: 1.1rem; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background-color: rgba(10,11,13,.82);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.3) 100%),
    var(--lg-noise);
  backdrop-filter: var(--lg-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05),
              0 3px 8px rgba(0,0,0,.4), 0 26px 60px -22px rgba(0,0,0,.75),
              0 56px 110px -48px rgba(0,0,0,.9);
}
.mm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem; }
.mm-item {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .8rem .9rem; border-radius: 14px; text-decoration: none;
  position: relative; isolation: isolate;
  transition: background-color .28s var(--lg-ease), transform .28s var(--lg-ease);
}
.mm-item::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: radial-gradient(14rem 14rem at var(--mx,50%) var(--my,50%),
              hsl(var(--csh) 60% 55% / .16) 0%, transparent 62%);
  transition: opacity .28s var(--lg-ease);
}
.mm-item:hover, .mm-item:focus-visible {
  background-color: rgba(255,255,255,.055); transform: translateX(2px); outline: none;
}
.mm-item:hover::after, .mm-item:focus-visible::after { opacity: 1; }
.mm-item:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(67,207,156,.55); }
.mm-ico {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  color: hsl(var(--csh) 62% 72%);
  background: hsl(var(--csh) 55% 45% / .14);
  border: 1px solid hsl(var(--csh) 55% 60% / .22);
  transition: transform .3s var(--lg-ease), background-color .3s var(--lg-ease);
}
.mm-ico svg { width: 17px; height: 17px; }
.mm-item:hover .mm-ico { transform: scale(1.06); background: hsl(var(--csh) 55% 48% / .22); }
.mm-txt { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.mm-txt b { font-weight: 500; font-size: .93rem; color: var(--text); }
.mm-txt i { font-style: normal; font-size: .8rem; line-height: 1.45; color: var(--text-3); }

.mm-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: .9rem; padding: .85rem .9rem 0; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .84rem; color: var(--text-3);
}
.mm-cta { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.mm-cta em { font-style: normal; transition: transform .3s var(--lg-ease); }
.mm-cta:hover em { transform: translateX(3px); }
.mm-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 991px) { .mm { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mm, .mm-item, .mm-ico, .mm-caret, .mm-cta em { transition: none !important; }
  .mm-item:hover { transform: none; }
}

/* ── 48b · Mega menu corrections ─────────────────────────────────────
   The wrapper was an inline span, so it dropped out of the nav's flex
   rhythm and the Services label sat off the baseline of its siblings.
   It now behaves exactly like the plain links either side of it. */
.nav-links .mm-wrap { display: inline-flex; align-items: center; }
.nav-links .mm-wrap > a {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 999px;
  font-size: 1.02rem; color: #dde1e5;
  transition: color .3s, background .3s;
}
.nav-links .mm-wrap > a:hover,
.mm-wrap.is-open > a { color: #fff; background: rgba(255,255,255,.08); }

/* More air, a calmer grid, and type that settles. */
.mm { width: min(760px, calc(100vw - 3rem)); }
.mm-inner { padding: .9rem; border-radius: 24px; }
.mm-grid { gap: .15rem; }
.mm-item { padding: .78rem .85rem; gap: .8rem; border-radius: 13px; align-items: center; }
.mm-ico { width: 34px; height: 34px; border-radius: 9px; }
.mm-ico svg { width: 16px; height: 16px; }
.mm-txt b { font-size: .9rem; letter-spacing: -.005em; }
.mm-txt i { font-size: .765rem; line-height: 1.4; }
.mm-foot { margin-top: .7rem; padding: .8rem .85rem 0; font-size: .8rem; }
.mm-item:hover { transform: none; }        /* the nudge read as jitter */

/* ── 48c · Services reads as a plain nav link ────────────────────────
   No caret, no chevron, nothing to mark it out. It inherits exactly what
   its siblings inherit, so the only thing that happens is the panel
   appearing on hover. */
.mm-caret { display: none !important; }
.nav-links .mm-wrap > a {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-decoration: none;
  gap: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   46 · BENTO CARDS — one line, then the whole card is the link
   ───────────────────────────────────────────────────────────────────────
   Eight cards each carrying a three-line paragraph made the grid a wall of
   text nobody finishes. Each card now states one thing; anyone who wants
   the detail already has a service page waiting for them.

   The title stays the only link in the accessibility tree and its ::after
   stretches over the card, so the entire tile is the hit area without
   nesting anything clickable inside anything else.
   ═══════════════════════════════════════════════════════════════════════ */

/* One rendered line is the brief. A narrow tile fits ~37 characters even on a
   360px phone, where the two wide tiles are narrow too, so every lede is
   written to that budget and the measure never has to bind. */
.b-lede { max-width: 42ch; }

/* Those cards were top-aligned to keep their mini-graphic clear of the tag,
   which left a one-line card floating with dead space beneath it. The graphic
   still starts at the top — an auto margin below it takes the slack — but the
   words now sit on the baseline every other tile uses. */
.b-migrate, .b-cro, .b-seo, .b-speed, .b-ai, .b-email { justify-content: flex-end; }
.bento-card .b-visual:not(.b-visual-img) { margin-bottom: auto; padding-bottom: 14px; }

.bento-card .svc-link::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
}
.bento-card:hover h3 { color: var(--accent); }

/* Focus belongs to the whole tile now, not just the words in it. */
@supports selector(:has(*)) {
  .bento-card:has(.svc-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
  .bento-card .svc-link:focus-visible { outline: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   47 · TECHNOLOGY WALL — three lanes, monochrome until you look at one
   ───────────────────────────────────────────────────────────────────────
   Three marquees at different speeds, the middle one running the other way,
   so the wall never reads as a single sliding block. Logos sit on pale glass
   and are desaturated by default; the one under the cursor returns to its
   real brand colour and its lane — only its lane — stops.

   The pause is animation-play-state, not a JS teardown, so a lane picks up
   from exactly where it stopped. Everything animates transform, filter or
   opacity; the loop is a plain -50% translate over duplicated content.
   ═══════════════════════════════════════════════════════════════════════ */

/* Deliberately no background, no overflow:hidden and no isolation on the
   section. Every one of those turns a slice of the page into a panel sitting
   on top of it: a background paints a rectangle you can find the edge of,
   overflow:hidden cuts any glow that crosses the boundary into a hard
   horizontal line, and isolation makes this the backdrop root, which is what
   let the old blurred edge-fades haze a visible strip around the lanes. The
   body's #000 shows straight through instead, so there is no boundary here to
   see. If you add anything, add it to ::before below. */
.tech {
  position: relative;
  padding: clamp(4rem, 6.5vw, 7rem) 0 clamp(4.5rem, 7vw, 7.5rem);
}

/* The only depth in the section: one very faint emerald bloom behind the
   heading. It is sized so it reaches full transparency well inside the
   section box on every axis — that is the whole trick. A glow that still has
   colour where its box ends is a rectangle; a glow that has faded to nothing
   before it gets there is atmosphere. */
.tech::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(78% 54% at 50% 42%,
    rgba(67, 207, 156, 0.055) 0%,
    rgba(67, 207, 156, 0.018) 34%,
    rgba(67, 207, 156, 0) 66%);
}

/* ---- header ---- */
.tech-head { position: relative; z-index: 1; text-align: center; }
.tech-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px;
  border: 1px solid rgba(67, 207, 156, 0.3);
  border-radius: 999px;
  background: rgba(67, 207, 156, 0.055);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.tech-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(67, 207, 156, 0.9);
}
/* Minor H2 — the smallest of the section headings, so it takes the most
   weight and the loosest fit of them. */
.tech-h2 {
  max-width: 18ch; margin: 1.4rem auto 0;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 510; letter-spacing: -0.022em; line-height: 1.1;
}
.tech-sub {
  margin: 1.1rem auto 0; max-width: 56ch;
  color: var(--text-2); font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.65;
}

/* ---- the lanes ---- */
.tech-wall {
  position: relative; z-index: 1;
  margin-top: clamp(2.8rem, 4.5vw, 4rem);
  /* Row padding below adds 32px of its own, so the lanes end up 40–48px apart
     and read as three things floating in open space, not a stack. */
  display: flex; flex-direction: column; gap: clamp(8px, 1vw, 16px);
}

/* Each lane fades itself out at both ends. Nothing is painted over the page to
   do it — the mask removes the lane's own pixels, so the logos dissolve into
   whatever is behind them, which is the same #000 as everywhere else. The old
   approach put two blurred black panels on top; those had hard top and bottom
   edges and their blur hazed the area between them, which is exactly the
   strip that made this section look bolted on.
   Vertical padding gives the hover lift and its glow somewhere to go inside
   the overflow clip the marquee needs. The mask is horizontal only, so it
   never touches those. */
.tw-row {
  overflow: hidden;
  padding-block: 16px;
  -webkit-mask-image: var(--tw-edge-fade);
  mask-image: var(--tw-edge-fade);
}
.tech {
  --tw-edge-fade: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.07) 4%,
    rgba(0, 0, 0, 0.40) 10%,
    rgba(0, 0, 0, 0.85) 17%,
    rgb(0, 0, 0) 24%,
    rgb(0, 0, 0) 76%,
    rgba(0, 0, 0, 0.85) 83%,
    rgba(0, 0, 0, 0.40) 90%,
    rgba(0, 0, 0, 0.07) 96%,
    rgba(0, 0, 0, 0) 100%);
}
.tw-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; width: max-content; gap: clamp(10px, 1.1vw, 15px);
  animation: tw-scroll var(--dur, 70s) linear infinite;
}
.tw-row--fwd .tw-track { animation-direction: reverse; }
@keyframes tw-scroll { to { transform: translate3d(-50%, 0, 0); } }

/* Only the lane being read stops. Its neighbours carry on. */
.tw-row:hover .tw-track { animation-play-state: paused; }

.tw-item { flex: 0 0 auto; }
.tw-chip {
  position: relative;
  display: grid; place-items: center;
  width: clamp(50px, 4.4vw, 64px); aspect-ratio: 1;
  border-radius: clamp(14px, 1.25vw, 19px);
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.085) 0%,
      rgba(255, 255, 255, 0.03) 46%, rgba(255, 255, 255, 0.012) 100%),
    rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.085);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
              background 0.5s var(--ease), border-color 0.5s var(--ease);
}
/* Glass highlight — a fixed sheen that strengthens under the cursor. */
.tw-chip::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 44%);
  opacity: 0.5; transition: opacity 0.5s var(--ease);
}

/* Two stacked copies of every mark: a white one that is on by default and
   held back to a whisper, and the real brand-coloured one underneath it.
   Cross-fading the pair beats filtering a single image — animating
   grayscale/invert washes the icon through a muddy grey on the way. */
.tw-chip img { grid-area: 1 / 1; width: 46%; height: auto; }
.tw-mono { opacity: 0.55; transition: opacity 0.4s var(--ease); }
.tw-color { opacity: 0; transition: opacity 0.4s var(--ease); }

/* The tile lights up under the cursor, and it has to. Six of these brands —
   Vercel, Next.js, GitHub, OpenAI, Notion, Framer — are literally black, so
   revealing "the brand colour" on a dark tile would erase them. A pale plate
   makes every one of the twenty-six legible at the moment it turns. */
.tw-item:hover .tw-chip {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(158deg, #ffffff, rgba(233, 237, 243, 0.94));
  box-shadow:
    0 22px 40px -18px rgba(0, 0, 0, 1),
    0 0 30px -10px rgba(67, 207, 156, 0.45),
    inset 0 1px 0 #ffffff;
}
.tw-item:hover .tw-chip::after { opacity: 0.7; }
.tw-item:hover .tw-mono { opacity: 0; }
.tw-item:hover .tw-color { opacity: 1; }

@media (max-width: 900px) {
  .tech-wall { gap: 9px; }
  .tw-track { gap: 9px; }
  .tw-chip { width: 48px; border-radius: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-track { animation: none; }
  .tw-chip { transition: none; }
  /* With the lanes stopped they still have to be reachable. */
  .tw-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}