/* ============================================================
   PLATINUM — design system
   Palette: cool platinum — silver plate / ink / petrol graphite /
            blue accent (#4a63c8, sampled from the hero video's light streak); jewel tints on cards
   Type:    Clash Display (display) · Switzer (body) · Azeret Mono (spec)
   ============================================================ */

:root {
  --plate: #eaecec;
  --bright: #f7f8f8;
  --chrome: #c4cccd;
  --steel: #6f7e82;
  --ink: #11171a;
  --graphite: #181e2a;
  --graphite-2: #1e2534;
  --flare: #3f5f9e;
  --flare-deep: #324c80;
  --violet: #8fa8d8;
  --metal: linear-gradient(108deg, #fdfefe 0%, #cdd6d6 22%, #eef3f3 38%, #b3c7c8 52%, #d8ebec 62%, #b0bcbc 76%, #eaeeee 92%);
  --metal-dark: linear-gradient(108deg, #f4f6f6 0%, #9fb0b2 30%, #d8e9ea 46%, #7f9498 62%, #cfdee0 78%, #a8bcbe 100%);
  /* ---- jewel tints: solid pick (mid-stop) + full gradient ---- */
  --steel-solid:  #5a6b80;
  --rose-solid:   #a05c7e;
  --champ-solid:  #857c91;
  --cobalt-solid: #5b3fa8;
  --graph-solid:  #4a4258;
  --verd-solid:   #3f5f9e;   /* was teal #3f6b74 — retuned to the indigo in the hero streak.
                                 Name kept so the tint rotation and all data-tint="verd"
                                 markup keeps working; it is a blue now, not a green. */
  --gold-solid:   #9a7f4a;
  --tint-steel:  linear-gradient(150deg, #2a3340 0%, #5a6b80 48%, #93a6bc 100%);
  --tint-rose:   linear-gradient(150deg, #3d2433 0%, #a05c7e 50%, #e3a8c6 100%);
  --tint-champ:  linear-gradient(150deg, #34303b 0%, #9c93a6 50%, #ded7e2 100%);
  --tint-cobalt: linear-gradient(150deg, #211546 0%, #5b3fa8 52%, #a98fd6 100%);
  --tint-graph:  linear-gradient(150deg, #1b1724 0%, #4a4258 52%, #877d96 100%);
  --tint-verd:   linear-gradient(150deg, #16203a 0%, #3f5f9e 52%, #a9bcdc 100%);
  --tint-gold:   linear-gradient(150deg, #33291a 0%, #9a7f4a 52%, #dcc9a0 100%);
  --tint:        var(--tint-steel);
  --tint-solid:  var(--steel-solid);
  --font-display: "Clash Display", "Arial Black", sans-serif;
  --font-body: "Switzer", "Helvetica Neue", sans-serif;
  --font-mono: "Azeret Mono", "SF Mono", monospace;
  --radius: 18px;
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(96px, 13vh, 168px);
  --ease-out: cubic-bezier(0.19, 0.7, 0.22, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--plate);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--flare); color: #fff; }

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

:focus-visible { outline: 2px solid var(--flare); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- type ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.h-xl { font-size: clamp(2.9rem, 7vw, 6.4rem); }
.h-lg { font-size: clamp(2.3rem, 5vw, 4.4rem); }
.h-md { font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -0.01em; }

.metal-text {
  background-image: var(--metal);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sheen 7s ease-in-out infinite alternate;
}

.on-dark .metal-text,
.metal-text--dark {
  background-image: var(--metal-dark);
  -webkit-background-clip: text;
  background-clip: text;
}

/* slow light-sweep across polished metal */
@keyframes sheen {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--steel);
  margin-bottom: 26px;
}

.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--flare);
  flex: none;
}

.spec {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--steel);
}

.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: #3e3947; max-width: 56ch; }
.on-dark .lede { color: #bdb6ca; }

/* ---------- section tint rotation (the "mix") — deep jewel accents per section ---------- */
[data-tint="steel"]  { --tint: var(--tint-steel);  --tint-solid: var(--steel-solid); }
[data-tint="rose"]   { --tint: var(--tint-rose);   --tint-solid: var(--rose-solid); }
[data-tint="cobalt"] { --tint: var(--tint-cobalt); --tint-solid: var(--cobalt-solid); }
[data-tint="champ"]  { --tint: var(--tint-champ);  --tint-solid: var(--champ-solid); }
[data-tint="graph"]  { --tint: var(--tint-graph);  --tint-solid: var(--graph-solid); }
[data-tint="verd"]   { --tint: var(--tint-verd);   --tint-solid: var(--verd-solid); }
[data-tint="gold"]   { --tint: var(--tint-gold);   --tint-solid: var(--gold-solid); }
[data-tint="pink"]   { --tint: linear-gradient(150deg, #4a1430 0%, #ff3d86 58%, #ffd0e2 100%); --tint-solid: #ff3d86; }
[data-tint="blue"]   { --tint: linear-gradient(150deg, #16223f 0%, #4e72a8 55%, #bcccea 100%); --tint-solid: #4e72a8; }

/* each SECTION wears its jewel (scoped to <section> so it never touches the deck cards):
   a soft colour glow across the section + a machined seam + a tinted eyebrow */
section[data-tint] { position: relative; z-index: 0; }
section[data-tint]::after {              /* soft colour glow through the middle, like the hero */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 64% 58% at 50% 32%, var(--tint-solid), transparent 62%);
  opacity: 0.26;
}
section[data-tint]::before {             /* a fine machined seam at the top */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--tint); z-index: 1; pointer-events: none;
}
section[data-tint] .eyebrow { color: var(--tint-solid); }
section[data-tint] .eyebrow::before { background: var(--tint-solid); }
section[data-tint] .btn-ghost:hover { background: var(--tint-solid); border-color: var(--tint-solid); color: #fff; }
section[data-tint] .svc-list li::before { color: var(--tint-solid); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out), border-color 0.35s;
  white-space: nowrap;
}

.btn-solid { background-color: var(--ink); color: var(--bright); }
.btn-solid:hover { background-color: #21323b; color: #fff; transform: translateY(-2px); }

.btn-flare { background-color: var(--flare); color: #fff; }
.btn-flare:hover { background-color: var(--flare-deep); transform: translateY(-2px); }

/* plated-platinum finish — metallic top-sheen + bottom-shade, a beveled edge and a
   sweeping shine, so the filled buttons read like the brushed-metal service tiles */
.btn-solid, .btn-flare, .hero .btn-flare {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 44%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.28) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 3px rgba(0,0,0,0.32), 0 10px 22px -12px rgba(0,0,0,0.5);
}
.btn-solid:hover, .btn-flare:hover, .hero .btn-flare:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -2px 3px rgba(0,0,0,0.34), 0 16px 30px -12px rgba(0,0,0,0.55);
}
.btn-solid::before, .btn-flare::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 36%, rgba(255,255,255,0.5) 50%, transparent 64%);
  transform: translateX(-135%);
  transition: transform 0.75s var(--ease-out);
}
.btn-solid:hover::before, .btn-flare:hover::before { transform: translateX(135%); }

.btn-ghost { border: 1px solid rgba(16, 18, 20, 0.28); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bright); transform: translateY(-2px); }

.on-dark .btn-ghost { border-color: rgba(246, 247, 248, 0.3); color: var(--bright); }
.on-dark .btn-ghost:hover { background: var(--bright); color: var(--ink); border-color: var(--bright); }

.btn .arr { font-family: var(--font-body); font-size: 1rem; line-height: 1; transition: transform 0.35s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- nav (Kota-style progressive collapse) ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;
}

/* scrolled = see-through bar; the links fold into the toggle */
.nav.is-scrolled { background: transparent; box-shadow: none; }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* full-width header: logo to the far left, cluster to the far right */
.nav .wrap { max-width: none; }

.logo { display: inline-flex; align-items: center; gap: 12px; }

/* brand logo — the real exported lockup (img/platinum-logo.png). silver as-is on
   dark backgrounds, darkened to graphite on light. full lockup at top; the left
   P-box shows on its own once scrolled. */
.logo-img {
  display: none;
  background-image: url(../img/platinum-logo.png);
  background-repeat: no-repeat;
  background-position: left center;
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.nav:not(.on-dark-hero) .logo-img { filter: brightness(0.3) saturate(0.55); }   /* graphite on light pages */
.logo-full { width: 196px; height: 56px; background-size: contain; }
.logo-badge-img { width: 52px; height: 56px; background-size: auto 100%; }       /* shows just the left P-box */
.nav:not(.is-scrolled) .logo-full { display: block; }
.nav.is-scrolled .logo-badge-img { display: block; }
.logo:hover .logo-img { transform: translateY(-1px); opacity: 0.85; }

/* footer badge — footer is dark, so the silver P-box as-is */
.logo-badge {
  width: 50px; height: 52px;
  background: url(../img/platinum-logo.png) left center / auto 100% no-repeat;
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.logo:hover .logo-badge { transform: translateY(-1px); opacity: 0.85; }

/* right cluster: links · CTA · toggle */
.nav-right { display: flex; align-items: center; gap: 28px; }

.nav-links { display: flex; align-items: center; gap: 32px; }

.nav-links a:not(.btn) {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}

.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--flare);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.nav-links a:not(.btn):hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta { padding: 12px 22px; }

/* circular hamburger toggle — hidden until scrolled (desktop), always on mobile */
.nav-toggle {
  display: none;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(16, 18, 20, 0.25);
  color: var(--ink);
  position: relative;
  flex: none;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.nav-toggle:hover { background: rgba(16, 18, 20, 0.06); }
.nav-toggle .bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: background 0.2s; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform 0.3s, top 0.3s;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.nav-toggle.is-open .bars { background: transparent; }
.nav-toggle.is-open .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open .bars::after { top: 0; transform: rotate(-45deg); }

/* dark-hero pages: light links + light toggle */
.nav.on-dark-hero .nav-links a:not(.btn) { color: var(--bright); }
.nav.on-dark-hero .nav-toggle { border-color: rgba(246, 247, 248, 0.32); color: var(--bright); }
.nav.on-dark-hero .nav-toggle:hover { background: rgba(246, 247, 248, 0.08); }

/* the toggle-opened menu box */
.nav-menu {
  position: absolute;
  top: 72px; right: var(--gutter);
  min-width: 230px;
  background: var(--graphite);
  border: 1px solid rgba(246, 247, 248, 0.12);
  border-radius: 16px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  z-index: 101;
}
.nav-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.nav-menu a {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #cfc9da; padding: 13px 14px; border-radius: 10px;
  transition: background 0.2s, color 0.2s;
}
.nav-menu a:hover, .nav-menu a[aria-current="page"] { background: rgba(246, 247, 248, 0.06); color: #fff; }
.nav-menu a:last-child { color: var(--flare); }

/* on scroll: fold the links into the toggle (the bar is already see-through) */
.nav.is-scrolled .nav-links { display: none; }
.nav.is-scrolled .nav-toggle { display: grid; }

/* MOBILE: links always collapsed into the toggle; CTA lives in the menu box */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: grid; }
  .nav-menu { left: var(--gutter); right: var(--gutter); }
}

/* ---------- hero (home) — solid platinum, one big shine ---------- */

/* HOME HERO ONLY — the original melting-PLATINUM treatment (scoped to .hero so the
   rest of the site keeps the current scheme). Tall section = the melt scroll runway. */
.hero {
  position: relative;
  height: 100vh;                  /* the melt runway is gone with the particle wordmark */
  background: #141619;            /* neutral dark — the old hero ground */
  color: var(--bright);
}
.hero-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* ---- hero background loop ----
   Sits at the very back of the sticky stage. Both this and .hero-glow are z-index 0,
   so DOM order stacks them: video, then scrim, then glow, then the canvas at z-index 1.
   The scrim is doing real work — the footage is high-contrast (waterfall, lightning),
   and the hero copy sits straight on top of it. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,22,25,0.62) 0%, rgba(20,22,25,0.40) 38%, rgba(20,22,25,0.92) 100%),
    radial-gradient(ellipse 72% 62% at 50% 44%, rgba(20,22,25,0.10), rgba(20,22,25,0.72) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { /* JS pauses it; the poster frame remains */ }
}

/* ambient stage light, behind the metal squares */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 54% 44% at 50% 40%, rgba(255, 70, 135, 0.12), transparent 64%),
    radial-gradient(ellipse 64% 52% at 62% 54%, rgba(150, 55, 120, 0.08), transparent 66%);
}

/* the platinum-square particle field — assembles into PLATINUM, repels the cursor */
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* fallback wordmark when canvas is off (reduced motion / no JS) */
.hero-static-word {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 1;
  padding-bottom: 13%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 15vw, 14rem);
  letter-spacing: -0.01em;
}

.hero.no-canvas .hero-static-word { display: grid; }
.hero.no-canvas #heroCanvas { display: none; }

/* bottom scrim so foot copy stays legible over the squares */
.hero-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, #141619 12%, rgba(20, 22, 25, 0.6) 48%, transparent);
  pointer-events: none;
  z-index: 2;
}

.hero-foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 0 var(--gutter) clamp(34px, 6vh, 64px);
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.hero-pitch { max-width: 520px; }

.hero-pitch h1 {
  font-size: clamp(2.05rem, 3.55vw, 3.15rem);
  font-weight: 500;
  margin-bottom: 16px;
}

.hero-pitch h1 em {
  font-style: normal;
  background: var(--metal-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- rotating headline word ----
   .rot is the sized shell: JS sets its width to the incoming word so the line
   re-flows smoothly instead of snapping. The word inside fades and lifts on swap. */
.hero-pitch h1 .rot {
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* the word sits on its own line, so the headline is always two lines and the
   copy beneath never shifts as the word changes length */
.hero-pitch h1 { line-height: 1.12; }
.hero-pitch h1 .rot-w {
  display: inline-block;
  white-space: nowrap;
  transition: opacity 0.34s ease, transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-pitch h1 .rot-w.is-out {
  opacity: 0;
  transform: translateY(-0.28em);
}
@media (prefers-reduced-motion: reduce) {
  .hero-pitch h1 .rot,
  .hero-pitch h1 .rot-w { transition: none; }
}

.hero-pitch p { color: #aaa3b8; font-size: 1rem; max-width: 46ch; margin-bottom: 28px; }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* the old pink hero button (scoped to the hero — the rest of the site keeps petrol) */
.hero .btn-flare { background-color: #ff2d78; color: #fff; }
.hero .btn-flare:hover { background-color: #e21e63; }
.hero ::selection { background: #ff2d78; color: #fff; }

.hero-specs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: right;
  flex: none;
}

.hero-specs .spec { color: #6f6880; }
.hero-specs .spec strong { color: #bcb5c9; font-weight: 500; }
.hero-specs .spec.hot strong { color: var(--flare); }

/* hero "latest insight" card — replaces the spec list */
.hero-card {
  flex: none;
  width: clamp(280px, 25vw, 358px);
  display: flex; flex-direction: column;
  background: var(--graphite-2);
  border: 1px solid rgba(246, 247, 248, 0.1);
  border-radius: 16px 26px 26px 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s;
}
.hero-card:hover { transform: translateY(-4px); box-shadow: 0 40px 72px -28px rgba(0, 0, 0, 0.8); border-color: rgba(246, 247, 248, 0.2); }
.hero-card-img {
  position: relative; display: block; aspect-ratio: 16 / 9;
  /* placeholder visual — drop a real/AI article image in here later */
}
.hero-card-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
}
.hero-card-cat {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; background: rgba(10, 12, 14, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 5px 10px; border-radius: 100px;
}
/* floating device mockup (RELAY Express live build) inside the blog card image box */
.hero-card-img.devices { background: radial-gradient(115% 100% at 36% 0%, rgba(255,70,135,0.32), transparent 60%), radial-gradient(80% 70% at 64% 60%, rgba(150,55,120,0.16), transparent 66%), linear-gradient(160deg, #1b1620, #141619 58%, #100f14); aspect-ratio: 4 / 3; }
.hero-card-img.devices::after { display: none; }                 /* drop the placeholder sheen */
.hero-card-img.devices .hero-card-cat { z-index: 5; }
.dev-scene {
  position: absolute; inset: 0; perspective: 900px; transform-style: preserve-3d;
  animation: devSceneIn 1.25s cubic-bezier(0.2, 0.7, 0.2, 1) both;     /* spins the group into motion */
}
.dev {
  position: absolute; overflow: hidden; background: #0b1118;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 32px -14px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  will-change: transform;
}
/* the screenshot sits INSIDE a thin bezel with only a small inner radius, so the
   site's corners (logo, menu) aren't eaten by the device's rounded corners */
.dev img { position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; object-position: top center; border-radius: 4px; display: block; }
/* the devices arrive and HOLD their angled pose (no constant motion) */
/* clean floating responsive mockup — web screen centre, tablet right, phone front-left */
.dev-desktop { width: 54%; aspect-ratio: 16 / 10; left: 23%; top: 24%; border-radius: 7px; z-index: 1; transform: rotateY(-13deg) rotateX(5deg); }
.dev-desktop .screen { position: absolute; inset: 0; }
.dev-tablet { width: 25%; aspect-ratio: 3 / 4;  right: 8%;  top: 18%; border-radius: 8px; z-index: 2; transform: rotateY(-9deg) rotateX(5deg); }
.dev-phone  { width: 13%; aspect-ratio: 350 / 640; left: 13%; top: 36%; border-radius: 7px; z-index: 3; transform: rotateY(-14deg) rotateX(5deg); }
@keyframes devSceneIn { from { opacity: 0; transform: rotateY(-26deg) scale(0.86); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dev-scene { animation: none !important; opacity: 1; } }

.hero-card-body { display: flex; flex-direction: column; gap: 9px; padding: 15px 18px 17px; }
.hero-card-label { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet); }
.hero-card-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.22; letter-spacing: -0.01em;
  color: var(--bright);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bright); }
.hero-card-cta .arr { color: var(--violet); transition: transform 0.35s var(--ease-out); }
.hero-card:hover .hero-card-cta .arr { transform: translateX(4px); }

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #5d5570;
  animation: cue 2.6s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { opacity: 0.5; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 6px); }
}

@media (max-width: 760px) {
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .hero-specs { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .hero-card { width: 100%; max-width: 400px; }
  .hero-scroll-cue { display: none; }
}

/* ---------- page hero (inner pages) ---------- */

.page-hero { padding: calc(110px + 6vh) 0 var(--section); }

.page-hero .h-xl { max-width: 14ch; margin-bottom: 28px; }

.page-hero--dark { background: var(--graphite); color: var(--bright); }

/* ---------- sections ---------- */

.section { padding: var(--section) 0; }

.section--dark { background: var(--graphite); color: var(--bright); }
.section--bright { background: var(--bright); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(44px, 6vw, 72px);
}

.section-head .h-lg { max-width: 16ch; }

/* ---------- manifesto ---------- */

.manifesto { background: var(--graphite); color: var(--bright); position: relative; overflow: hidden; }

.manifesto .wrap { position: relative; z-index: 2; }

.manifesto-statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3.7rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin-bottom: 40px;
}

.manifesto-note { max-width: 52ch; color: #aaa3b8; }

.manifesto-note strong { color: var(--bright); font-weight: 500; }

.manifesto-bar {
  /* the platinum metre bar */
  margin-top: clamp(48px, 7vw, 84px);
  height: 64px;
  border-radius: 8px;
  background-image: var(--metal);
  background-size: 200% 100%;
  position: relative;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.55);
  animation: sheen 10s ease-in-out infinite alternate;
}

.manifesto-bar::after {
  content: "CERTIFIED PLATINUM — AWARDED FOR RESULTS, NOT REACH";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  color: rgba(16, 18, 20, 0.55);
}

.manifesto-bar .tick {
  position: absolute;
  top: -14px;
  width: 1px;
  height: 10px;
  background: #4d4760;
}

@media (max-width: 600px) { .manifesto-bar::after { font-size: 0.45rem; letter-spacing: 0.18em; } }

/* ---------- element tiles (services) ---------- */

.elements-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

@media (max-width: 1080px) { .elements-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .elements-grid { grid-template-columns: repeat(2, 1fr); } }

.element {
  position: relative;
  aspect-ratio: 0.88;
  border-radius: var(--radius);
  background: var(--bright);
  border: 1px solid rgba(16, 18, 20, 0.07);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s;
  overflow: hidden;
}

.element:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -20px rgba(16, 18, 20, 0.25);
  border-color: rgba(16, 18, 20, 0.14);
}

.element-num { font-family: var(--font-mono); font-size: 0.65rem; color: var(--steel); letter-spacing: 0.1em; }

.element-symbol {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1;
  margin: auto 0;
  letter-spacing: -0.02em;
}

.element-symbol .sub { font-size: 0.45em; color: var(--flare); font-weight: 500; }

.element-name {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--steel);
  border-top: 1px solid rgba(16, 18, 20, 0.09);
  padding-top: 12px;
  transition: color 0.3s;
}

.element:hover .element-name { color: var(--flare); }

.element:hover .element-symbol {
  background-image: var(--metal);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheen 2.5s ease-in-out infinite alternate;
}

.section--dark .element:hover .element-symbol { background-image: var(--metal-dark); }

.section--dark .element { background: var(--graphite-2); border-color: rgba(246, 247, 248, 0.08); }
.section--dark .element:hover { box-shadow: 0 24px 44px -16px rgba(0, 0, 0, 0.6); border-color: rgba(246, 247, 248, 0.16); }
.section--dark .element-name { border-top-color: rgba(246, 247, 248, 0.1); }

/* ---------- work rail (swipeable cards) ---------- */

.rail-zone { position: relative; }

.rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px var(--gutter) 36px;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging * { pointer-events: none; }

.rail-card {
  flex: none;
  width: min(430px, 82vw);
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bright);
  border: 1px solid rgba(16, 18, 20, 0.07);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  display: flex;
  flex-direction: column;
}

.rail-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 56px -24px rgba(16, 18, 20, 0.3);
}

.rail-card-visual {
  aspect-ratio: 16 / 10.5;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  /* The card sits at fractional coordinates inside .work-track (which is itself
     translated while pinned), so on GPU the clip box and the scaled image layer
     can rasterise to different device pixels mid-hover and leave a 1px seam.
     clip-path clips in the same pass as the content, unlike overflow:hidden. */
  clip-path: inset(0);
  background: #101214;
}

.rail-card-visual .big-index {
  position: absolute;
  top: -14px;
  right: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 7.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  letter-spacing: -0.04em;
}

.rail-card-visual .assay-tag {
  position: relative;
  z-index: 2;
  background: rgba(16, 18, 20, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #e7eaec;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 6px;
}

/* per-specimen metal tints — jewel iridescents (single source: :root vars) */
.tint-steel   { background: var(--tint-steel); }
.tint-rose    { background: var(--tint-rose); }
.tint-champ   { background: var(--tint-champ); }
.tint-cobalt  { background: var(--tint-cobalt); }
.tint-graph   { background: var(--tint-graph); }
.tint-verd    { background: var(--tint-verd); }

/* ---- real client screenshots inside work cards ---- */
.rail-card-visual .shot {
  position: absolute;
  /* overhang the clip box by 1px so sub-pixel rounding has nothing to expose */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: top center;
  transform: scale(1.02);
  transition: transform 0.7s var(--ease-out);
}
.rail-card:hover .shot { transform: scale(1.06); }

.rail-card-visual .shot-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16,18,20,0.35) 0%, rgba(16,18,20,0) 34%),
    linear-gradient(180deg, rgba(16,18,20,0) 45%, rgba(16,18,20,0.78) 100%);
}

/* work screenshots show as-is — no resting veil, no desaturation.
   Only a slow scale on hover. */

/* live-site row — replaces the invented metric row on real references */
.rail-card-live {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 18, 20, 0.1);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rail-card-live .dom {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--bright);
}
.rail-card-live .go {
  font-size: 0.78rem;
  color: var(--steel);
  white-space: nowrap;
  transition: color 0.3s var(--ease-out);
}
.rail-card-live .go .arr { transition: transform 0.3s var(--ease-out); display: inline-block; }
.rail-card:hover .rail-card-live .go { color: var(--bright); }
.rail-card:hover .rail-card-live .go .arr { transform: translateX(4px); }
.work-scroll .rail-card-live { border-top-color: rgba(246, 247, 248, 0.1); }

.rail-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.rail-card-body h3 { font-size: 1.45rem; font-weight: 600; }

.rail-card-body .case-services { display: flex; gap: 6px; flex-wrap: wrap; }

.case-chip {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid rgba(16, 18, 20, 0.14);
  padding: 4px 9px;
  border-radius: 100px;
}

.rail-card-result {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 18, 20, 0.08);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.rail-card-result .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
}

.rail-card-result .what { font-size: 0.82rem; color: var(--steel); text-align: right; }

.rail-nav { display: flex; gap: 10px; }

.rail-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(16, 18, 20, 0.2);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s;
}

.rail-btn:hover { background: var(--ink); color: var(--bright); border-color: var(--ink); }
.rail-btn:disabled { opacity: 0.25; pointer-events: none; }

.section--dark .rail-card { background: var(--graphite-2); border-color: rgba(246,247,248,0.08); }
.section--dark .rail-card-body h3 { color: var(--bright); }
.section--dark .case-chip { color: #9d96ab; border-color: rgba(246,247,248,0.16); }
.section--dark .rail-card-result { border-top-color: rgba(246,247,248,0.1); }
.section--dark .rail-card-result .num { color: var(--bright); }
.section--dark .rail-btn { border-color: rgba(246,247,248,0.25); color: var(--bright); }
.section--dark .rail-btn:hover { background: var(--bright); color: var(--ink); border-color: var(--bright); }

/* full-bleed rail: card row escapes the wrap on the right */
.rail-zone--bleed .rail { margin: 0 calc(var(--gutter) * -1); }

/* ---------- home: pinned horizontal work scroll ---------- */
.work-scroll { position: relative; background: var(--graphite); }
.work-pin { display: flex; flex-direction: column; gap: clamp(20px, 3.4vh, 44px); padding: clamp(48px, 8vh, 96px) 0; }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.work-head .eyebrow { color: var(--violet); }
.work-head h2 { color: var(--bright); }
.work-hint { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
.work-hint span { display: inline-block; }

/* default (mobile / no-JS): a normal horizontal swipe rail */
.work-track {
  display: flex; gap: clamp(20px, 2.6vw, 44px); padding: 4px var(--gutter) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.work-track::-webkit-scrollbar { display: none; }
.work-card { flex: none; width: min(560px, 86vw); scroll-snap-align: center; }

/* dark-section card styling */
.work-scroll .rail-card { background: var(--graphite-2); border-color: rgba(246,247,248,0.08); }
.work-scroll .rail-card-body h3 { color: var(--bright); }
.work-scroll .case-chip { color: #9d96ab; border-color: rgba(246,247,248,0.16); }
.work-scroll .rail-card-result { border-top-color: rgba(246,247,248,0.1); }
.work-scroll .rail-card-result .num { color: var(--bright); }
.work-card .rail-card-visual { aspect-ratio: 16 / 9; }
.work-card .rail-card-body { padding: 26px 28px 28px; }
.work-card .rail-card-body h3 { font-size: clamp(1.6rem, 2.3vw, 2.4rem); }

/* desktop, JS-enabled: pin the section and drive the rail horizontally on scroll */
.work-scroll.is-pinned .work-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  justify-content: center; padding: 0;
}
.work-scroll.is-pinned .work-head { padding: 0 var(--gutter); }
.work-scroll.is-pinned .work-track {
  overflow: visible; scroll-snap-type: none; will-change: transform; padding-bottom: 0;
}
.work-scroll.is-pinned .work-card { width: min(820px, 46vw); }
/* phones: one big card per view (with a peek of the next), still scroll-jacked */
@media (max-width: 760px) {
  .work-scroll.is-pinned .work-card { width: 80vw; }
  .work-card .rail-card-visual { aspect-ratio: 16 / 10.5; }
  .work-scroll.is-pinned .work-head h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .work-scroll.is-pinned .work-pin { gap: 16px; }
}

/* ---------- hallmarks ---------- */

.hallmarks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 3.5vw, 44px);
}

.hallmark {
  width: 168px;
  text-align: center;
  transition: transform 0.4s var(--ease-out);
}

.hallmark:hover { transform: translateY(-4px) rotate(0deg) !important; }

.hallmark-stamp {
  width: 108px; height: 108px;
  margin: 0 auto 16px;
  border: 1.5px solid rgba(16, 18, 20, 0.55);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  position: relative;
}

.hallmark-stamp::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(16, 18, 20, 0.18);
}

/* hallmark plate shapes — like real assay marks */
.stamp-oval { border-radius: 50%; }
.stamp-oval::after { border-radius: 50%; }
.stamp-shield { border-radius: 50% 50% 50% 50% / 18% 18% 78% 78%; }
.stamp-shield::after { border-radius: 50% 50% 50% 50% / 18% 18% 78% 78%; }
.stamp-cut { border-radius: 24px 6px 24px 6px; }
.stamp-cut::after { border-radius: 20px 4px 20px 4px; }
.stamp-oct { border-radius: 14px; }
.stamp-oct::after { border-radius: 10px; }

.hallmark p { font-size: 0.84rem; color: var(--steel); line-height: 1.45; }

.hallmark p strong { display: block; color: var(--ink); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 5px; font-weight: 500; }

/* ---------- big CTA ---------- */

.cta { background: var(--graphite); color: var(--bright); text-align: center; position: relative; overflow: hidden; }

.cta .h-xl { max-width: 13ch; margin: 0 auto 22px; }

.cta p { color: #aaa3b8; max-width: 44ch; margin: 0 auto 38px; }

.cta-heat {
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  height: 70%;
  background:
    radial-gradient(ellipse at 42% 100%, rgba(63, 107, 116, 0.24), transparent 60%),
    radial-gradient(ellipse at 68% 100%, rgba(93, 141, 151, 0.18), transparent 65%);
  pointer-events: none;
}

/* ---------- footer ---------- */

.footer { background: var(--graphite); color: var(--bright); padding: 80px 0 36px; border-top: 1px solid rgba(246, 247, 248, 0.08); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 70px;
}

@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }

.footer h4 { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: #6f6880; margin-bottom: 18px; font-weight: 500; }

.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #bdb6ca; font-size: 0.95rem; transition: color 0.25s; }
.footer-links a:hover { color: var(--flare); }

.footer-blurb { color: #8d8699; font-size: 0.95rem; max-width: 34ch; }

.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 11.6vw, 11.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-align: center;
  background-image: var(--metal-dark);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  margin-bottom: 36px;
  animation: sheen 9s ease-in-out infinite alternate;
}

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(246, 247, 248, 0.08);
  padding-top: 24px;
}

.footer-base .spec { color: #5d5570; }

/* ---------- services page ---------- */

.svc-block { padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid rgba(16, 18, 20, 0.09); }

.svc-grid { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: clamp(36px, 6vw, 90px); align-items: start; }

@media (max-width: 880px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-id { position: sticky; top: 110px; }

.svc-id .element { max-width: 240px; cursor: default; }

.svc-id .reacts { margin-top: 22px; }
.svc-id .reacts .spec { display: block; margin-bottom: 10px; }
.svc-id .reacts a {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  border: 1px solid rgba(16, 18, 20, 0.16);
  border-radius: 100px;
  padding: 5px 12px;
  margin: 0 6px 6px 0;
  display: inline-block;
  transition: all 0.3s;
}
.svc-id .reacts a:hover { background: var(--ink); color: var(--bright); border-color: var(--ink); }

.svc-body h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); margin-bottom: 20px; }
.svc-body > p { color: #3e3947; max-width: 58ch; margin-bottom: 36px; }

.svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-bottom: 36px; }

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

.svc-list li {
  font-size: 0.95rem;
  padding: 13px 0;
  border-bottom: 1px solid rgba(16, 18, 20, 0.1);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.svc-list li::before { content: "■"; font-size: 0.45rem; color: var(--flare); flex: none; transform: translateY(-2px); }

/* ---------- work page list ---------- */

.case-rows { border-top: 1px solid rgba(16, 18, 20, 0.12); }

.case-item { border-bottom: 1px solid rgba(16, 18, 20, 0.12); }

.case-row {
  display: grid;
  grid-template-columns: 92px 64px 1.5fr 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 22px 0;
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding 0.4s var(--ease-out);
  position: relative;
}

/* small mockup beside each row */
.case-row .thumb {
  width: 92px;
  aspect-ratio: 16 / 10;
  border-radius: 7px;
  overflow: hidden;
  background: #101214;
  box-shadow: 0 4px 14px -6px rgba(16,18,20,0.5);
}
.case-row .thumb img {
  width: calc(100% + 2px); height: calc(100% + 2px);
  margin: -1px;
  object-fit: cover; object-position: top left;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.case-row:hover .thumb img { transform: scale(1.07); }

/* + / − affordance instead of the old arrow */
.case-row .go {
  width: 15px; height: 15px; position: relative;
  transition: transform 0.35s var(--ease-out);
}
.case-row .go::before, .case-row .go::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor;
}
.case-row .go::before { width: 15px; height: 1.5px; }
.case-row .go::after  { width: 1.5px; height: 15px; transition: transform 0.35s var(--ease-out); }
.case-row[aria-expanded="true"] .go::after { transform: scaleY(0); }
.case-row[aria-expanded="true"] h3 { color: var(--flare); }

/* the snippet panel */
.case-panel { height: 0; overflow: hidden; transition: height 0.42s var(--ease-out); }
.case-panel-in {
  display: grid;
  gap: 20px;
  justify-items: start;
  padding: 4px 0 34px 184px;   /* aligns under the title column */
  max-width: 68ch;
}
.case-panel-in p { color: var(--steel); font-size: 0.98rem; line-height: 1.6; }
.case-panel-meta { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.case-panel-meta .spec { display: grid; gap: 3px; }
.case-panel-meta .spec strong { font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); font-weight: 500; }

.case-row:hover { padding-left: 14px; }

.case-row .idx { font-family: var(--font-mono); font-size: 0.7rem; color: var(--steel); }

.case-row h3 { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 600; transition: color 0.3s; }

.case-row:hover h3 { color: var(--flare); }

.case-row .meta { font-size: 0.85rem; color: var(--steel); }

.case-row .go { font-size: 1.3rem; transition: transform 0.35s var(--ease-out); }

.case-row:hover .go { transform: translateX(6px); }

@media (max-width: 720px) {
  .case-row { grid-template-columns: 64px 1fr auto; gap: 16px; }
  .case-row .idx, .case-row .meta { display: none; }
  .case-row .thumb { width: 64px; }
  .case-panel-in { padding-left: 0; }
}

/* ---------- case study detail ---------- */

.case-hero { background: var(--graphite); color: var(--bright); padding: calc(110px + 5vh) 0 0; }

.case-hero .h-xl { margin: 18px 0 30px; max-width: 15ch; }

.case-specbar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 72px);
  border-top: 1px solid rgba(246, 247, 248, 0.12);
  padding: 26px 0 60px;
  margin-top: 48px;
}

.case-specbar .spec { color: #6f6880; }
.case-specbar .spec strong { display: block; color: var(--bright); font-size: 0.85rem; letter-spacing: 0.06em; margin-top: 6px; font-weight: 500; }

.case-visual {
  border-radius: var(--radius);
  aspect-ratio: 16 / 8.4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* ---- case-study hero: the site shown on a laptop ----
   Pure CSS device: a bezelled lid holding the screenshot, sitting on a tapered
   base. Sized off the .case-visual box so it scales with the container. */
.cs-laptop {
  position: relative;
  z-index: 2;
  width: min(74%, 780px);
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55));
}
.cs-laptop-lid {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, #2b2f34 0%, #16191c 60%, #0e1113 100%);
  border-radius: 14px 14px 4px 4px;
  padding: 10px 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16),
              inset 0 0 0 1px rgba(255,255,255,0.06);
}
.cs-laptop-screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* anchor top-left: screenshots are wider than the 16:10 screen, and a website's
     logo and headline live on the left, so centring the crop cuts them off */
  object-position: top left;
  border-radius: 6px;
  display: block;
  background: #0b0d0f;
}
/* tapered base, wider than the lid, with the notch cut into the front edge */
.cs-laptop-base {
  position: relative;
  width: 112%;
  height: 15px;
  background: linear-gradient(180deg, #3a4046 0%, #23272b 42%, #14171a 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 18px -8px rgba(0,0,0,0.7);
  clip-path: polygon(1.5% 0, 98.5% 0, 96% 100%, 4% 100%);
}
.cs-laptop-notch {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 14%; height: 5px;
  background: rgba(0,0,0,0.45);
  border-radius: 0 0 6px 6px;
}
.case-visual { padding: clamp(18px, 3vw, 44px); }
@media (max-width: 640px) { .cs-laptop { width: 92%; } }

.case-visual .spec { background: rgba(16, 18, 20, 0.5); color: #e7eaec; padding: 8px 14px; border-radius: 6px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.case-narrative { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: clamp(28px, 5vw, 80px); padding: clamp(56px, 7vw, 96px) 0; }

@media (max-width: 800px) { .case-narrative { grid-template-columns: 1fr; } }

.case-narrative h2 { font-size: 1.5rem; }

.case-narrative .body p { margin-bottom: 20px; color: #36313e; max-width: 62ch; }

.case-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

@media (max-width: 640px) { .case-metrics { grid-template-columns: 1fr; } }

.case-metric {
  background: var(--bright);
  border: 1px solid rgba(16, 18, 20, 0.07);
  border-radius: var(--radius);
  padding: 30px 26px;
}

.case-metric .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -0.02em; display: block; margin-bottom: 8px; }

.case-metric .what { font-size: 0.88rem; color: var(--steel); }

.case-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  max-width: 26ch;
  margin: 0 auto;
  text-align: center;
}

.case-quote-cite { display: block; text-align: center; margin-top: 26px; }

/* ---------- contact / estimator ---------- */

.estimator-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 920px) { .estimator-layout { grid-template-columns: 1fr; } }

.est-progress { display: flex; align-items: center; gap: 18px; margin-bottom: 40px; }

.est-progress .bar { flex: 1; height: 2px; background: rgba(16, 18, 20, 0.12); position: relative; overflow: hidden; border-radius: 2px; }

.est-progress .bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--flare);
  transition: width 0.6s var(--ease-out);
}

.est-step { display: none; }
.est-step.is-active { display: block; animation: stepIn 0.55s var(--ease-out); }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.est-step h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); margin-bottom: 10px; }
.est-step > p { color: var(--steel); margin-bottom: 34px; max-width: 50ch; }

/* selectable element tiles */
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 40px; }

@media (max-width: 680px) { .pick-grid { grid-template-columns: repeat(2, 1fr); } }

.pick {
  border: 1px solid rgba(16, 18, 20, 0.14);
  border-radius: 14px;
  background: var(--bright);
  padding: 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 118px;
  transition: all 0.3s var(--ease-out);
  position: relative;
}

.pick .sym { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; }
.pick .nm { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); margin-top: auto; }

.pick::after {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 16px; height: 16px;
  border: 1.5px solid rgba(16, 18, 20, 0.25);
  border-radius: 50%;
  transition: all 0.25s;
}

.pick:hover { border-color: var(--ink); transform: translateY(-2px); }

.pick.is-on { border-color: var(--flare); box-shadow: 0 0 0 1px var(--flare); }
.pick.is-on::after { background: var(--flare); border-color: var(--flare); box-shadow: inset 0 0 0 3px var(--bright); }

/* radio cards */
.radio-row { display: grid; gap: 12px; margin-bottom: 40px; }

.radio-card {
  border: 1px solid rgba(16, 18, 20, 0.14);
  border-radius: 14px;
  background: var(--bright);
  padding: 20px 22px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: all 0.3s var(--ease-out);
}

.radio-card .dot { width: 16px; height: 16px; border: 1.5px solid rgba(16, 18, 20, 0.3); border-radius: 50%; flex: none; transition: all 0.25s; }

.radio-card div strong { display: block; font-weight: 600; font-size: 1.02rem; margin-bottom: 2px; }
.radio-card div span { font-size: 0.86rem; color: var(--steel); }

.radio-card:hover { border-color: var(--ink); }
.radio-card.is-on { border-color: var(--flare); box-shadow: 0 0 0 1px var(--flare); }
.radio-card.is-on .dot { background: var(--flare); border-color: var(--flare); box-shadow: inset 0 0 0 3px var(--bright); }

/* underline inputs — dainty, elegant */
.field { margin-bottom: 34px; }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 6px;
}

.field input, .field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(16, 18, 20, 0.3);
  background: transparent;
  font: inherit;
  font-size: 1.15rem;
  padding: 10px 0;
  border-radius: 0;
  transition: border-color 0.3s;
}

.field textarea { resize: vertical; min-height: 80px; }

.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--flare); }

.field input::placeholder, .field textarea::placeholder { color: #b6b0c0; }

.field.has-error input { border-bottom-color: #d62000; }
.field .err { display: none; font-size: 0.78rem; color: #d62000; margin-top: 6px; }
.field.has-error .err { display: block; }

.est-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.est-back { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); transition: color 0.25s; }
.est-back:hover { color: var(--ink); }
.est-back[hidden] { visibility: hidden; display: inline; }

/* spec sheet */
.spec-sheet {
  position: sticky;
  top: 110px;
  background: var(--bright);
  border: 1px solid rgba(16, 18, 20, 0.1);
  border-radius: var(--radius);
  padding: 30px 30px 26px;
  box-shadow: 0 24px 48px -30px rgba(16, 18, 20, 0.25);
}

.spec-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(16, 18, 20, 0.55);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.spec-sheet-head .title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }

.spec-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(16, 18, 20, 0.12);
  font-size: 0.88rem;
}

.spec-line .k { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.spec-line .v { text-align: right; font-weight: 500; }
.spec-line .v.dim { color: #b6b0c0; font-weight: 400; }

.spec-total { padding: 18px 0 4px; }

/* estimating meter — replaces the priced total on the certification sheet */
.est-meter {
  height: 6px;
  background: rgba(16, 18, 20, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin: 10px 0 8px;
}
.est-meter i {
  display: block;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, var(--flare-deep), var(--flare));
  border-radius: 3px;
  transition: width 0.6s var(--ease-out);
}
.est-meter i.is-done { background: var(--flare); }
.est-meter-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
/* compact hero for the estimator page — step one should be visible on landing */
.page-hero--compact { padding: calc(84px + 2vh) 0 clamp(20px, 3vh, 36px); }
.page-hero--compact .h-lg { max-width: 20ch; margin-bottom: 12px; }
.page-hero--compact .lede { font-size: 1rem; }

.spec-total .k { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); display: block; margin-bottom: 4px; }

.spec-total .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  letter-spacing: -0.01em;
}

.spec-total .v.dim { color: #b6b0c0; font-size: 1.1rem; font-weight: 500; }

.spec-foot { margin-top: 16px; }

/* success stamp */
.est-success { text-align: center; padding: 40px 0; display: none; }
.est-success.is-shown { display: block; }

.success-stamp {
  width: 150px; height: 150px;
  margin: 0 auto 30px;
  border: 2px solid var(--flare);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--flare);
  transform: rotate(-8deg);
  animation: stamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.success-stamp::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255, 77, 0, 0.4); border-radius: 50%; }

@keyframes stamp {
  from { transform: rotate(-8deg) scale(2.2); opacity: 0; }
  to { transform: rotate(-8deg) scale(1); opacity: 1; }
}

/* ---------- contact direct strip ---------- */

.direct-strip { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 80px); }

.direct-strip a { font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-family: var(--font-display); font-weight: 500; position: relative; }

.direct-strip a::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 100%; background: var(--flare); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out); }

.direct-strip a:hover::after { transform: scaleX(1); }

.direct-strip .spec { display: block; margin-bottom: 8px; }

/* ---------- reveal motion (gentle) ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out); }

.reveal.is-in { opacity: 1; transform: translateY(0); }

.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-scroll-cue { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   INSIGHTS — blog index + article pages
   ============================================================ */

/* ---- category chips ---- */
.cat-chip {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid rgba(16, 18, 20, 0.16);
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
  background: none;
  transition: all 0.3s var(--ease-out);
}
a.cat-chip:hover { border-color: var(--ink); color: var(--ink); }
.cat-chip.is-on { background: var(--ink); color: var(--bright); border-color: var(--ink); }

/* ---- filter bar ---- */
.cat-filter { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(36px, 5vw, 56px); }

/* ---- post grid ---- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--bright);
  border: 1px solid rgba(16, 18, 20, 0.08);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s;
  min-height: 230px;
}
.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 46px -24px rgba(16, 18, 20, 0.28);
  border-color: rgba(16, 18, 20, 0.16);
}

.post-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.post-card-date { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--steel); text-transform: uppercase; }
.post-card h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.15; margin-bottom: 10px; transition: color 0.3s; }
.post-card:hover h3 { color: var(--flare); }
.post-card p { font-size: 0.92rem; color: #5b5667; line-height: 1.5; }
.post-card-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.post-card-read { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--steel); text-transform: uppercase; }
.post-card-foot .go { font-size: 1.1rem; color: var(--steel); transition: transform 0.35s var(--ease-out), color 0.35s; }
.post-card:hover .go { transform: translateX(4px); color: var(--flare); }

.post-hidden { display: none; }

/* ---- article page ---- */
.article-hero { background: var(--graphite); color: var(--bright); padding: calc(108px + 5vh) 0 clamp(48px, 7vw, 80px); }

.breadcrumb { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6f6880; margin-bottom: 26px; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: #9d96ab; transition: color 0.25s; }
.breadcrumb a:hover { color: var(--bright); }
.breadcrumb span { color: #4d4760; }

.article-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 20ch; margin: 16px 0 24px; }

.article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6f6880; }
.article-byline .by { color: #bcb5c9; }
.article-byline .dot { width: 3px; height: 3px; border-radius: 50%; background: #4d4760; }

/* reading column */
.article-wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .article-wrap { grid-template-columns: 1fr; } }

.article { padding: clamp(40px, 6vw, 68px) 0 clamp(56px, 7vw, 90px); max-width: 720px; }

/* the AEO direct-answer box */
.answer-box {
  background: var(--bright);
  border: 1px solid rgba(16, 18, 20, 0.1);
  border-left: 3px solid var(--flare);
  border-radius: 0 14px 14px 0;
  padding: 22px 26px;
  margin-bottom: clamp(32px, 4vw, 44px);
}
.answer-box .label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--flare); display: block; margin-bottom: 8px; }
.answer-box p { font-size: 1.12rem; line-height: 1.55; color: var(--ink); margin: 0; }

/* article body typography */
.article-body { font-size: 1.0625rem; line-height: 1.72; color: #2c2933; }
.article-body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.45rem, 2.6vw, 1.95rem); letter-spacing: -0.01em; line-height: 1.15; margin: clamp(38px, 5vw, 54px) 0 16px; }
.article-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 32px 0 12px; }
.article-body p { margin-bottom: 20px; }
.article-body ul, .article-body ol { margin: 0 0 22px 0; padding-left: 0; list-style: none; }
.article-body ol { counter-reset: li; }
.article-body li { position: relative; padding-left: 28px; margin-bottom: 11px; }
.article-body ul li::before { content: "■"; position: absolute; left: 4px; top: 0.05em; font-size: 0.5rem; color: var(--flare); }
.article-body ol li { counter-increment: li; }
.article-body ol li::before { content: counter(li); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--flare); font-weight: 500; line-height: 1.7; }
.article-body blockquote { margin: 26px 0; padding: 4px 0 4px 24px; border-left: 2px solid rgba(16,18,20,0.2); font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.4; color: var(--ink); }
.article-body a { color: var(--flare-deep); text-decoration: underline; text-underline-offset: 2px; }

/* sticky aside: takeaways */
.article-aside { position: sticky; top: 104px; }
.takeaways { background: var(--graphite); color: var(--bright); border-radius: var(--radius); padding: 26px 24px; }
.takeaways h4 { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9d96ab; margin-bottom: 16px; }
.takeaways ul { list-style: none; }
.takeaways li { position: relative; padding-left: 22px; margin-bottom: 13px; font-size: 0.9rem; line-height: 1.45; color: #d7d2e0; }
.takeaways li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; background: var(--flare); }
@media (max-width: 900px) { .article-aside { position: static; margin-bottom: 40px; } }

/* FAQ accordion */
.faq-section { padding: clamp(40px, 5vw, 60px) 0; border-top: 1px solid rgba(16, 18, 20, 0.1); }
.faq-section h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 26px; }
.faq-item { border-bottom: 1px solid rgba(16, 18, 20, 0.12); }
.faq-item summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 1.5rem; font-weight: 400; color: var(--flare); transition: transform 0.3s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 40px 22px 0; color: #3e3947; line-height: 1.65; }

/* sources */
.sources-box { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(16, 18, 20, 0.1); }
.sources-box h4 { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: 14px; }
.sources-box ol { list-style: decimal; padding-left: 20px; }
.sources-box li { margin-bottom: 8px; font-size: 0.88rem; color: #5b5667; }

/* ---------- blog readability: progress bar, contents, section numbers ---------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--flare), #ff2d78); }

.article-toc { margin-bottom: 24px; }
.article-toc h4 { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: 12px; }
.article-toc ol { list-style: none; padding: 0; border-left: 1.5px solid rgba(16,18,20,0.12); }
.article-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1.5px; border-left: 1.5px solid transparent; font-size: 0.85rem; line-height: 1.34; color: #6b6675; transition: color 0.2s, border-color 0.2s; }
.article-toc a:hover { color: var(--ink); }
.article-toc a.on { color: var(--flare-deep); border-left-color: var(--flare); font-weight: 500; }

.article-body h2 { scroll-margin-top: 94px; }
.article-body h2 .sec-n { display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; color: var(--flare); margin-bottom: 7px; }
/* lead paragraph reads bigger, drawing the eye in */
.article-body > p:first-of-type { font-size: 1.16rem; line-height: 1.66; color: var(--ink); }

/* ---------- inline diagrams (funnels, comparisons, charts, flows, pillars) ---------- */
.article-figure { margin: 38px 0; }
.article-figure .dia { background: linear-gradient(162deg, #f4f2ef, #e9ecee); border: 1px solid rgba(16,18,20,0.08); border-radius: 16px; padding: clamp(20px, 3.4vw, 32px); box-shadow: 0 22px 44px -30px rgba(16,18,20,0.45); }
.article-figure figcaption { margin-top: 13px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); text-align: center; }
.article-figure b { font-family: var(--font-display); }

/* funnel */
.dia-funnel .dia { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.fn-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 44%; padding: 13px 22px; border-radius: 9px; color: #fff; background: linear-gradient(180deg, #5f8b93, #3f6b74); box-shadow: 0 8px 18px -10px rgba(0,0,0,0.4); }
.fn-row:last-child { background: linear-gradient(180deg, #ff5c93, #ff2d78); }
.fn-row b { font-weight: 600; font-size: 1rem; }
.fn-row span { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; white-space: nowrap; }

/* step flow */
.dia-steps .dia { display: grid; gap: 12px; }
.st-step { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid rgba(16,18,20,0.08); border-radius: 11px; padding: 14px 16px; }
.st-n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--flare); color: #fff; font-family: var(--font-mono); font-size: 0.78rem; }
.st-step b { display: block; font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.st-step > div span { display: block; margin-top: 2px; font-size: 0.85rem; color: #5b5667; line-height: 1.4; }

/* bar chart */
.dia-bars .dia { display: grid; gap: 13px; }
.bar-row { display: grid; grid-template-columns: minmax(96px, 130px) 1fr auto; align-items: center; gap: 14px; }
.bar-l { font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.bar-track { height: 14px; background: rgba(16,18,20,0.09); border-radius: 100px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #5f8b93, var(--flare-deep)); }
.bar-row:last-child .bar-fill { background: linear-gradient(90deg, #ff5c93, #ff2d78); }
.bar-v { font-family: var(--font-mono); font-size: 0.72rem; color: var(--flare-deep); white-space: nowrap; }

/* comparison columns */
.dia-cols .dia { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dia-cols .col { background: #fff; border: 1px solid rgba(16,18,20,0.08); border-radius: 13px; padding: 18px 18px 20px; }
.dia-cols .col b { display: block; font-weight: 600; font-size: 1.04rem; color: var(--ink); margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(16,18,20,0.1); }
.dia-cols .col ul { list-style: none; padding: 0; margin: 0; }
.dia-cols .col li { position: relative; padding-left: 18px; margin-bottom: 9px; font-size: 0.88rem; line-height: 1.42; color: #3e3947; }
.dia-cols .col li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--steel); }
.dia-cols .col:last-child li::before { background: #ff2d78; }
@media (max-width: 520px) { .dia-cols .dia { grid-template-columns: 1fr; } }

/* pillars / framework grid */
.dia-pillars .dia { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.dia-pillars .pil { background: #fff; border: 1px solid rgba(16,18,20,0.08); border-radius: 12px; padding: 16px; border-top: 3px solid var(--flare); }
.pil-n { font-family: var(--font-mono); font-size: 0.68rem; color: var(--flare); }
.dia-pillars .pil b { display: block; font-weight: 600; font-size: 0.98rem; color: var(--ink); margin: 7px 0 4px; }
.dia-pillars .pil > span:not(.pil-n) { font-size: 0.82rem; color: #5b5667; line-height: 1.4; }
.sources-box a { color: var(--flare-deep); }

/* related */
.related { background: var(--plate); padding: clamp(56px, 7vw, 88px) 0; }
.related h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 30px; }

/* ============================================================
   SERVICES DECK — engraved platinum sheets, scroll-stacked
   (markup in index.html, behaviour in js/services-deck.js)
   ============================================================ */
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.deck { position: relative; height: 620vh; background: var(--graphite); }

.deck-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }

/* ambient drifting jewel glow behind the cards — three soft blobs on slow,
   out-of-phase transforms (compositor-only). Softness is from each gradient's
   own alpha falloff, never a blur filter, so it can't shimmer like a spin. */
.deck-aurora {
  position: absolute; inset: -14%; z-index: 0; pointer-events: none; overflow: hidden;
  /* blob C — verd / petrol green, anchored low-centre */
  background: radial-gradient(closest-side at 50% 50%,
    rgba(126,72,196,0.17), rgba(126,72,196,0.06) 52%, transparent 78%);
  background-repeat: no-repeat; background-position: 26% 48%; background-size: 104vmax 104vmax;
  animation: deckAuroraC 61s ease-in-out infinite;
  will-change: transform; transform: translateZ(0);
}
.deck-aurora::before {
  content: ""; position: absolute; width: 80vmax; height: 80vmax; left: -18%; top: -24%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(98,60,182,0.15), rgba(98,60,182,0.05) 48%, transparent 76%);
  will-change: transform; animation: deckAuroraA 53s ease-in-out infinite;
}
.deck-aurora::after {
  content: ""; position: absolute; width: 64vmax; height: 64vmax; right: -16%; top: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(192,82,162,0.13), rgba(192,82,162,0.045) 50%, transparent 76%);
  will-change: transform; animation: deckAuroraB 67s ease-in-out infinite;
}
@keyframes deckAuroraA { 0%,100% { transform: translate3d(0,0,0) scale(1); }      50% { transform: translate3d(7%,6%,0) scale(1.12); } }
@keyframes deckAuroraB { 0%,100% { transform: translate3d(0,0,0) scale(1.05); }   50% { transform: translate3d(-8%,5%,0) scale(0.93); } }
@keyframes deckAuroraC { 0%,100% { transform: translateZ(0) scale(0.97); }        50% { transform: translate3d(5%,-6%,0) scale(1.09); } }
@media (prefers-reduced-motion: reduce) {
  .deck-aurora, .deck-aurora::before, .deck-aurora::after { animation: none !important; }
  .deck-aurora         { transform: translate3d(3%,-3%,0) scale(1.04); }
  .deck-aurora::before { transform: translate3d(4%,3%,0) scale(1.07); }
  .deck-aurora::after  { transform: translate3d(-4%,3%,0) scale(0.98); }
}

/* the stage is the frame: it clips the sliding sheets and carries the drop shadow,
   so a sheet rising from below appears to slide up INTO the frame and cover the last */
.deck-stage {
  position: relative; z-index: 1; width: min(1680px, 94vw); height: min(760px, 78vh);
  border-radius: 26px 58px 58px 26px; overflow: hidden;
  box-shadow: 0 44px 96px -34px rgba(0,0,0,0.72);
}

.psheet {
  position: absolute; inset: 0;
  /* gently rounded on the left, more curved on the right */
  border-radius: 26px 58px 58px 26px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.psheet-figure, .psheet-figure svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the metal sheet: a top highlight + a soft bottom shade, like the small tiles */
.psheet-figure { z-index: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -64px 86px -58px rgba(0,0,0,0.42); }

/* the service word — same treatment as the small service tiles: transparent fill
   (the metal shows straight through) + an engraved text-shadow set inline by JS */
.psheet-word {
  position: absolute; z-index: 2; margin: 0;
  font-family: var(--font-display); font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  color: transparent; -webkit-text-fill-color: transparent;
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.psheet-word span { display: block; }

/* one-time sheen sweep when a card becomes the front card */
.psheet-sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.28) 50%, transparent 58%);
  transform: translateX(-130%) skewX(-12deg);
  opacity: 0;
}
.psheet.is-swept .psheet-sheen { animation: sheetSheen 0.95s ease-out forwards; }
@keyframes sheetSheen {
  0%   { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(130%) skewX(-12deg); opacity: 0; }
}

/* content sitting ON the metal */
.psheet-overlay {
  position: absolute; inset: 0; z-index: 3;
  display: grid; grid-template-columns: 0.92fr 1.2fr;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(26px, 3.4vw, 52px);
}
.psheet-left { display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding-top: 34%; }
.psheet-p { max-width: 32ch; font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.5; color: rgba(18,24,27,0.82); text-shadow: 0 1px 0 rgba(255,255,255,0.3); }

.btn-sheet { background: rgba(12,10,17,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); align-self: flex-start; }
.btn-sheet:hover { background: var(--flare); border-color: var(--flare); transform: translateY(-2px); }

/* media box — placeholder for video/animation the client adds later */
.psheet-media {
  position: relative; align-self: stretch; margin-top: 2%;
  border-radius: 16px 32px 32px 16px; overflow: hidden;
  background: rgba(8,6,12,0.55);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: inset 0 2px 14px rgba(0,0,0,0.55);
}
.psheet-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.07) 50%, transparent 68%);
  background-size: 240% 100%;
  animation: mediaShimmer 5s linear infinite;
}
.psheet-media span { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
/* real media fills the box. These are our own generated platinum clips — already a
   cohesive set — so the wash is light: just enough vignette for depth and legibility,
   without desaturating the metal or casting it green. */
.psheet-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; filter: saturate(0.92) contrast(1.05) brightness(0.98); }
.psheet-media.has-media::after {
  display: block; z-index: 1; animation: none; background-size: auto;
  background: linear-gradient(150deg, rgba(12,16,18,0.26) 0%, rgba(12,16,18,0.05) 46%, rgba(8,12,14,0.5) 100%);
}
@keyframes mediaShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

}


.psheet-num { position: absolute; top: clamp(20px,2.6vw,34px); right: clamp(22px,2.8vw,38px); z-index: 3; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: rgba(18,24,27,0.5); }

/* mobile: word (in figure, top) -> media -> paragraph -> button */
@media (max-width: 760px) {
  .deck-stage { width: 92vw; height: min(580px, 82vh); }
  .psheet-overlay { grid-template-columns: 1fr; padding: 22px; padding-top: 42%; gap: 16px; align-content: start; }
  .psheet-left { padding-top: 0; order: 2; justify-content: flex-start; }
  .psheet-media { order: 1; min-height: 170px; margin-top: 0; }
}

/* reduced motion / no JS: static readable stack — no transforms, no sheen */
@media (prefers-reduced-motion: reduce) {
  .deck { height: auto; }
  .deck-pin { position: static; height: auto; padding: var(--section) 0; display: block; }
  .deck-stage { width: min(1040px, 92vw); height: auto; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; overflow: visible; border-radius: 0; box-shadow: none; }
  .psheet { position: relative; inset: auto; height: min(560px, 80vh); visibility: visible !important; opacity: 1 !important; transform: none !important; filter: none !important; box-shadow: 0 44px 96px -34px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.07); }
  .psheet-sheen { display: none; }
}

/* ============================================================
   SERVICES PAGE — service tiles as mini platinum sheets
   (same size, tinted metal, a shine, and the word milled in)
   ============================================================ */
.svc-id .element {
  background: var(--tint, var(--tint-steel));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -30px 38px -26px rgba(0, 0, 0, 0.42);
}
/* a bit of shine — a soft streak that sweeps on hover */
.svc-id .element::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(108deg, transparent 36%, rgba(255, 255, 255, 0.16) 50%, transparent 64%);
  transform: translateX(-10%);
  transition: transform 0.85s var(--ease-out);
}
.svc-id .element:hover::after { transform: translateX(12%); }
.svc-id .element:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 26px 46px -22px rgba(0, 0, 0, 0.45);
}
.svc-id .element-num { color: rgba(255, 255, 255, 0.6); position: relative; z-index: 2; }
.svc-id .element-name { color: rgba(255, 255, 255, 0.8); border-top-color: rgba(255, 255, 255, 0.18); position: relative; z-index: 2; }
.svc-id .element:hover .element-name { color: #fff; }

/* the service word, milled CLEAN THROUGH the sheet — see-through to a dark void
   (darker at the top inner wall, lighter toward the lit lower lip) + a 3D bevel */
.svc-id .element-symbol {
  position: relative; z-index: 2;
  color: transparent;
  -webkit-text-fill-color: transparent;          /* fully see-through — the metal shows straight through */
  background: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  /* the cut is defined only by its edges: a lit lower lip + a dark top inner wall */
  text-shadow:
    0 2px 1px rgba(255, 255, 255, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.3),
    0 -1.5px 1.5px rgba(0, 0, 0, 0.6),
    0 -1px 0 rgba(0, 0, 0, 0.35);
  animation: none !important;
}


/* ============ SERVICES v2 — wam-style timeline catalogue ============ */
.svc2-hero { padding-bottom: clamp(28px, 4vh, 56px); }
.svc2-hero .h-xl { max-width: 22ch; }
.svc2-em {
  font-style: italic;
  background: var(--metal-dark);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* sticky timeline rail */
.svc2-railwrap {
  position: sticky; top: 88px; z-index: 110;  /* above the nav: content slides into the bar */
  transition: top 0.35s var(--ease-out);
  background: color-mix(in srgb, var(--graphite) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(246,247,248,0.08);
}
.svc2-rail {
  display: flex; justify-content: space-between; gap: 18px;
  position: relative; padding: 16px 0 12px;
  overflow-x: auto; scrollbar-width: none;
}
.svc2-rail::-webkit-scrollbar { display: none; }
.svc2-rail::before {           /* the line the dots sit on */
  content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 1px;
  background: rgba(246,247,248,0.14);
}
.svc2-rail .stop {
  position: relative; flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 96px; text-align: center;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #8f8a9c;
  transition: color .3s;
}
.svc2-rail .stop i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--graphite); border: 1px solid #8f8a9c;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.svc2-rail .stop:hover { color: var(--bright); }
.svc2-rail .stop.is-active { color: var(--bright); }
.svc2-rail .stop.is-active i {
  background: var(--flare); border-color: var(--flare);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--flare) 60%, transparent);
}

/* dark service blocks */
.svc-block.svc2 {
  background: var(--graphite); color: var(--bright);
  border-top: 1px solid rgba(246,247,248,0.07);
  scroll-margin-top: 150px;   /* nav 88 + rail ~56 */
}
.svc2-grid {
  display: grid; grid-template-columns: 0.9fr 1.5fr;
  gap: clamp(36px, 6vw, 90px); align-items: start;
}
/* the platinum card, sitting where wam puts its giant numeral */
.svc2-card { position: static; }   /* cards sit still; only the content scrolls */
.svc2-num { display: block; margin-bottom: 12px; color: var(--tint-solid); font-size: 0.8rem; letter-spacing: 0.2em; }
.svc2-tile {
  position: relative; border-radius: 16px 32px 32px 16px; overflow: hidden;
  aspect-ratio: 16 / 11;
  background: rgba(8,6,12,0.55);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: inset 0 2px 14px rgba(0,0,0,0.55),
              0 30px 60px -30px color-mix(in srgb, var(--tint-solid) 55%, transparent);
}
.svc2-tile video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(0.92) contrast(1.05) brightness(0.98);
}
.svc2-tile::after {            /* the deck's tinted wash, so the cards match home */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--tint-solid) 26%, transparent) 0%,
    rgba(12,16,18,0.05) 46%, rgba(8,12,14,0.5) 100%);
}
.svc2-tile-label {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  color: rgba(255,255,255,0.55); font-size: 0.6rem; letter-spacing: 0.18em;
}
/* body: heading, two-column intro, numbered rows */
.svc2-body h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-bottom: 22px; color: var(--bright); }
.svc2-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px);
  margin-bottom: 40px;
}
.svc2-cols p { color: #a49eb2; font-size: 0.95rem; line-height: 1.75; }
.svc2-cols p strong { color: var(--bright); font-weight: 500; }
.svc2-rows { margin: 0 0 36px; padding: 0; list-style: none; }
.svc2-rows li {
  display: flex; gap: 18px; align-items: baseline;
  padding: 14px 2px; font-size: 0.95rem; color: var(--bright);
  border-top: 1px solid rgba(246,247,248,0.1);
  transition: border-color .3s, padding-left .3s;
}
.svc2-rows li:last-child { border-bottom: 1px solid rgba(246,247,248,0.1); }
.svc2-rows li:hover { border-top-color: var(--tint-solid); padding-left: 8px; }
.svc2-rows .no {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--tint-solid); flex: none;
}

/* mobile: card stacks above the copy, rail scrolls horizontally */
@media (max-width: 880px) {
  .svc2-grid { grid-template-columns: 1fr; gap: 26px; }
  .svc2-card { max-width: 460px; }
  .svc2-rail { justify-content: flex-start; gap: 8px; }
  .svc2-rail .stop { min-width: 84px; }
  .svc2-cols { grid-template-columns: 1fr; gap: 14px; margin-bottom: 30px; }
  .svc2-railwrap { top: 72px; }
  .svc-block.svc2 { scroll-margin-top: 128px; }
}


/* once the visitor is scrolling the catalogue, the nav slides away and the
   timeline pins to the very top — content scrolls up into the bar. Scrolling
   back up brings the nav home. */
body.rail-pinned .nav { transform: translateY(-100%); }
.svc2-page .nav { transition: transform 0.35s var(--ease-out); }
body.rail-pinned .svc2-railwrap { top: 0; }
body.rail-pinned .svc-block.svc2 { scroll-margin-top: 66px; }
@media (max-width: 880px) {
  body.rail-pinned .svc-block.svc2 { scroll-margin-top: 58px; }
}


/* the P mark on the timeline bar — fades in as the bar pins, so the brand
   never disappears when the nav slides away */
.rail-logo {
  position: absolute; left: clamp(16px, 3vw, 40px); top: 50%;
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
}
.rail-logo i {
  display: block; width: 26px; height: 28px;
  background: url(../img/platinum-logo.png) left center / auto 100% no-repeat;
}
.svc2-railwrap { position: sticky; }        /* ensure positioning context */
body.rail-pinned .rail-logo { opacity: 1; pointer-events: auto; }
body.rail-pinned .svc2-rail { padding-left: clamp(48px, 6vw, 76px); }
.svc2-rail { transition: padding-left 0.35s var(--ease-out); }
@media (max-width: 880px) {
  .rail-logo i { width: 22px; height: 24px; }
  body.rail-pinned .svc2-rail { padding-left: 44px; }
}


/* ---- work page: 3 x 2 grid of big case boxes (replaces the drag rail) ---- */
.work-gridzone { position: relative; }
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 34px);
  padding: 6px var(--gutter) 8px;
}
/* the grid cards are full-width in their column, not the rail's fixed width */
.work-grid .rail-card { width: auto; flex: initial; scroll-snap-align: none; }
.work-grid .rail-card-visual { aspect-ratio: 16 / 10; }
.work-grid .rail-card-body { padding: 26px 28px 30px; }
.work-grid .rail-card-body h3 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
.work-grid .rail-card-result .num { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
@media (max-width: 780px) {
  .work-grid { grid-template-columns: 1fr; }
}


/* ================= services page: black sections, coloured glow =================
   The card tints (#5a6b80 etc) are deliberately muted for the video plates — on a
   black ground they'd read as grey mud, so each section gets a vivid sibling of
   its own tint as the glow colour. Scoped to .svc2 so no other page shifts. */
.svc2[data-tint="steel"] { --glow: #3f8fd6; }   /* web      — blue      */
.svc2[data-tint="verd"]  { --glow: #2fa39c; }   /* sales    — teal      */
.svc2[data-tint="rose"]  { --glow: #d05f95; }   /* campaigns— pink      */
.svc2[data-tint="graph"] { --glow: #8264c8; }   /* strategy — violet    */
.svc2[data-tint="gold"]  { --glow: #c9962f; }   /* content  — gold      */

.svc-block.svc2 {
  background: #07080a;
  border-top: 1px solid rgba(246,247,248,0.06);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* the section's own colour, blooming from behind its card */
.svc-block.svc2::after {
  content: "";
  position: absolute; inset: -10% -5%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 62% at 26% 42%, var(--glow), transparent 66%),
    radial-gradient(70% 90% at 78% 78%, var(--glow), transparent 72%);
  opacity: 0.30;
  filter: blur(12px);
}
/* a thin lit seam in the same colour */
.svc-block.svc2::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--glow) 22%, var(--glow) 78%, transparent);
  opacity: 0.55; pointer-events: none;
}
/* accents pick up the vivid colour too */
.svc2 .svc2-num { color: var(--glow); }
.svc2 .svc2-rows li:hover { border-top-color: var(--glow); }
.svc2 .svc2-tile { box-shadow: 0 30px 70px -30px var(--glow), inset 0 1px 0 rgba(255,255,255,0.08); }

/* ---- bigger timeline bar ---- */
.svc2-rail { padding: 26px 0 22px; gap: 22px; }
.svc2-rail .stop span { font-size: 0.72rem; letter-spacing: 0.16em; }
.svc2-rail .stop i { width: 12px; height: 12px; }
.svc2-rail .stop.is-active i { box-shadow: 0 0 0 5px rgba(120,180,255,0.16); }
body.rail-pinned .svc-block.svc2 { scroll-margin-top: 92px; }
@media (max-width: 880px) {
  .svc2-rail { padding: 20px 0 16px; }
  .svc2-rail .stop span { font-size: 0.66rem; }
  body.rail-pinned .svc-block.svc2 { scroll-margin-top: 78px; }
}


/* ---- services hero: dark ground with the homepage's soft radial bloom ----
   Same construction as .hero-glow (layered ellipses over a near-black base),
   graded from the page's own blue into the first section's colour so the hero
   hands off cleanly to the web-design block below it. */
.svc2-hero {
  position: relative;
  isolation: isolate;
  background: #07080a;
  overflow: hidden;
}
.svc2-hero::before {
  content: "";
  position: absolute; inset: -12% -6% -20%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 54% 46% at 22% 34%, rgba(63,143,214,0.20), transparent 66%),
    radial-gradient(ellipse 64% 54% at 74% 26%, rgba(130,100,200,0.13), transparent 68%),
    radial-gradient(ellipse 80% 60% at 50% 96%, rgba(47,163,156,0.14), transparent 70%);
  filter: blur(10px);
}
/* settle to black at the foot so the rail and first section meet it seamlessly */
.svc2-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, #07080a 92%);
}
.svc2-hero .lede { color: #a49eb2; }


/* ================= quote page: dark ground, radial bloom =================
   Same construction as the services hero and the homepage .hero-glow. Every
   light surface in the estimator is re-skinned rather than inverted, so
   contrast is set deliberately instead of inherited. */
.quote-page { background: #07080a; color: var(--bright); }

.quote-hero { position: relative; isolation: isolate; background: transparent; overflow: hidden; }
.quote-hero::before {
  content: "";
  position: absolute; inset: -20% -6% -40%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 52% 48% at 20% 30%, rgba(63,143,214,0.20), transparent 66%),
    radial-gradient(ellipse 58% 52% at 78% 22%, rgba(130,100,200,0.13), transparent 68%),
    radial-gradient(ellipse 84% 62% at 52% 104%, rgba(47,163,156,0.15), transparent 70%);
  filter: blur(10px);
}
.quote-page .page-hero .lede { color: #a49eb2; }
.quote-body { position: relative; z-index: 1; }

/* --- panels --- */
.quote-page .pick,
.quote-page .radio-card,
.quote-page .spec-sheet,
.quote-page .est-success {
  background: rgba(255,255,255,0.035);
  border-color: rgba(246,247,248,0.12);
  color: var(--bright);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.quote-page .pick:hover,
.quote-page .radio-card:hover { border-color: rgba(246,247,248,0.3); background: rgba(255,255,255,0.06); }
.quote-page .pick.is-on,
.quote-page .radio-card.is-on { border-color: var(--flare); background: rgba(63,107,116,0.20); }
.quote-page .pick .nm,
.quote-page .radio-card span { color: #a49eb2; }
.quote-page .radio-card strong { color: var(--bright); }
.quote-page .est-step h2 { color: var(--bright); }
.quote-page .est-step > p { color: #a49eb2; }

/* --- progress + meter --- */
.quote-page .est-progress .bar { background: rgba(246,247,248,0.14); }
.quote-page .est-meter { background: rgba(246,247,248,0.14); }

/* --- spec sheet --- */
.quote-page .spec-sheet-head .title { color: var(--bright); }
.quote-page .spec-line { border-bottom-color: rgba(246,247,248,0.1); }
.quote-page .spec-line .v { color: var(--bright); }
.quote-page .spec-line .v.dim { color: #6f6880; }
.quote-page .spec-total { border-top-color: rgba(246,247,248,0.16); }

/* --- fields --- */
.quote-page .field label { color: #a49eb2; }
.quote-page .field input,
.quote-page .field textarea {
  color: var(--bright);
  border-bottom-color: rgba(246,247,248,0.3);
}
.quote-page .field input::placeholder,
.quote-page .field textarea::placeholder { color: #5f5a6b; }
.quote-page .est-back { color: #a49eb2; }
.quote-page .est-back:hover { color: var(--bright); }

/* --- the closing strip was a bright block; keep it dark --- */
.quote-page .section--bright { background: transparent; color: var(--bright); }
.quote-page .section--bright .direct-strip a { color: var(--bright); }
.quote-page .section--bright .direct-strip a:hover { color: var(--flare); }


/* ==========================================================================
   MOBILE & TABLET CORRECTIONS — added 2026-09-01
   Found by auditing every page at 375x667, 390x844, 768x1024 and 1024x768.
   Appended at the end so they override the rules above without editing them —
   delete this whole block to revert.
   ========================================================================== */

/* 1 — HOME HERO. The stage was a fixed 100vh flex column anchored to flex-end.
   On phones the copy + insight card total ~810-845px, so the content overflowed
   off the TOP of the stage and the headline ended up behind the fixed nav
   (-145px on a 375x667 SE, 52px of it hidden on a 390x844 iPhone 14).
   Letting the stage grow past 100vh keeps the bottom-anchored composition on
   tall screens and guarantees the headline clears the nav on short ones. */
@media (max-width: 860px) {
  .hero { height: auto; }
  .hero-stage {
    position: relative;      /* was sticky — still the containing block for the video */
    height: auto;
    min-height: 100vh;
    min-height: 100svh;      /* discounts the mobile URL bar where supported */
    padding-top: 108px;      /* 88px nav + 20px clearance */
    padding-bottom: 30px;
  }
}

/* 2 — TAP TARGETS. Footer and direct-strip links were 19-22px tall, well under
   the ~44px touch minimum. Padding only; desktop is untouched. */
@media (max-width: 860px) {
  .footer-links a { display: inline-block; padding: 12px 0; }
  .footer-links li { margin-bottom: 0; }
  .direct-strip a { display: inline-block; padding: 10px 0; }
}

/* 3 — MICRO-LABEL LEGIBILITY. The uppercase mono labels rendered at 8.8-9.9px on
   phones. Raised to ~11px: keeps the micro-label look, actually readable. */
@media (max-width: 760px) {
  .hero-card-cat,
  .hero-card-label { font-size: 0.7rem; }
  .hero-card-cta,
  .hallmark p strong,
  .work-hint { font-size: 0.68rem; }
  .case-chip,
  .psheet-media span,
  .fn-row span { font-size: 0.66rem; }
}

/* 4 — NAV BAR (ALL SIZES). .nav.is-scrolled was fully transparent, so page content
   slid under the see-through logo and the hamburger and read as a collision — on
   laptops as well as phones. Once you scroll it becomes a real bar: frosted glass
   rather than a flat block, so it still feels light and you can see the page
   moving underneath it. */
.nav.is-scrolled {
  background: rgba(18, 20, 23, 0.68);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  border-bottom: 1px solid rgba(246, 247, 248, 0.09);
}
/* the hero sits under a transparent nav until you scroll, as before */
.nav:not(.is-scrolled) { background: transparent; backdrop-filter: none; border-bottom: 0; }

/* 3b — the rest of the micro-labels. Same reasoning as (3): on a phone these were
   9.6-10.9px uppercase mono with wide tracking. The form labels on contact.html
   mattered most — you have to read those to fill the form in. */
@media (max-width: 760px) {
  .field label,
  .pick .nm,
  .rail-card-visual .assay-tag,
  .svc2-tile-label,
  .svc2-rows .no,
  .svc2-rail .stop,
  .hallmark p strong,
  .hero-card-cta { font-size: 0.72rem; }
}

/* 5 — the services timeline stops were 37px tall; nudge them to a 44px target. */
@media (max-width: 860px) {
  .svc2-rail .stop { padding: 4px 6px; }
}

/* 3c — last of the sub-10px labels. .cat-chip are the insights filter BUTTONS, and
   the .k keys label the live price lines in the contact estimator, so both have to
   be readable. Left alone: the 10.4-10.9px labels, which are the house micro-label
   size and read fine on a phone. */
@media (max-width: 760px) {
  .cat-chip,
  .spec-line .k,
  .spec-total .k,
  .spec-foot { font-size: 0.72rem; }
  .svc2-rail .stop span { font-size: 0.7rem; }
}

/* 6 — SERVICES TIMELINE ON PHONES.
   It was a horizontally scrolling row of five labels, which meant: the connector
   line only spanned the visible slice, labels were always cut in half at the
   edges, and the pinned rail-logo sat on top of the first word.
   On phones it becomes a fixed five-dot timeline with ONE label — the active
   one — so nothing scrolls, nothing clips, and it steps cleanly to the next
   service as you scroll. The main nav also stops hiding itself here, so the menu
   stays reachable and the rail no longer needs its own logo. */
@media (max-width: 880px) {
  body.rail-pinned .nav { transform: none; }
  body.rail-pinned .rail-logo,
  .rail-logo { display: none; }
  /* beats the `body.rail-pinned .svc2-railwrap { top: 0 }` rule above, which would
     otherwise slide the rail up over the nav we are now keeping on screen */
  .svc2-railwrap,
  body.rail-pinned .svc2-railwrap { top: 88px; }
  body.rail-pinned .svc2-rail,
  .svc2-rail {
    padding: 10px var(--gutter) 40px;   /* gutter keeps the end dots off the edges */
    gap: 0;
    overflow: visible;            /* no horizontal scrolling => the line spans properly */
    justify-content: space-between;
  }
  .svc2-rail .stop {
    position: static;             /* so the active label centres on the rail, not the dot */
    flex: 0 0 auto;
    min-width: 0;
    padding: 10px 13px;           /* the dot is 11px — this is the actual tap area */
  }
  .svc2-rail .stop span { display: none; }
  .svc2-rail .stop.is-active span {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 42px;
    text-align: center;
    padding: 0 var(--gutter);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    white-space: nowrap;
    color: var(--bright);
  }
  .svc2-rail::before { top: 25px; }
  .svc2-rail .stop i { width: 11px; height: 11px; }
  body.rail-pinned .svc-block.svc2,
  .svc-block.svc2 { scroll-margin-top: 150px; }
}

/* 7 — SERVICES DECK ON PHONES.
   (a) The overlay's top padding was a flat 42% of the card, tuned for a one-line
       word. Two-line words ("Web design", "Sales systems") ran into the media tile
       while "Campaigns" sat with a big gap — the cards didn't look like a set.
       services-deck.js now measures the word and publishes --word-bottom, so the
       tile clears it by the same amount on every card.
   (b) The deck ran on a 620vh runway. On a phone that is ~5 full screen-heights of
       scrolling to get through five cards, which read as "nothing is happening".
       A shorter runway makes each card turn over promptly. */
/* NOTE the two different widths: the word band only exists where the card is
   actually stacked (the 760px layout, which is also what services-deck.js tests),
   otherwise the 42% fallback lands on the two-column desktop layout and shoves the
   tile ~300px down. The shorter runway is just scroll length and is safe wider. */
@media (max-width: 760px) {
  .psheet-overlay { padding-top: calc(var(--word-bottom, 42%) + 18px); }
}
@media (max-width: 860px) {
  .deck { height: 330vh; }
}

/* 8 — QUOTE PAGE BREATHING ROOM ON PHONES.
   The copy trim is in contact.html (the hero no longer repeats the panel's own
   guarantee, and the panel's "1 / 5" milestone counter is gone — next to
   "STEP 1 / 4" it read as a contradiction). This just opens up what is left, so
   the question, the choices and the live price panel read as three separate
   things rather than one dense block. */
@media (max-width: 760px) {
  .page-hero--compact .lede { line-height: 1.6; }
  .quote-body .est-progress { margin: 6px 0 34px; }
  .est-step h2 { margin-bottom: 12px; }
  .est-step > p { margin-bottom: 26px; line-height: 1.6; }
  .spec-line { padding: 15px 0; }
  .spec-foot { margin-top: 18px; opacity: 0.75; }
}

/* 9 — PINK BLOCK BEHIND THE ROTATING HEADLINE WORD.
   The pink was only ever the text-selection colour (.hero ::selection is #ff2d78) —
   the word itself is metal-gradient text. This makes the block permanent.
   It goes on .rot (the shell whose width rotator.js animates), NOT on .rot-w (the
   word, which fades out on each swap) — so the block stays put and simply resizes
   as the word changes, rather than blinking with it. */
.hero-pitch h1 .rot {
  background: #ff2d78;
  box-sizing: content-box;   /* rotator.js sets .rot's width to the TEXT width, so the
                                padding must sit outside it — the global reset is
                                border-box, which would crop the last character */
  padding: 0.06em 0.16em;
  margin-left: -0.16em;      /* bleeds the block left so the WORD stays aligned
                                with "We build" on the line above */
}
/* solid white reads on the pink; the metal gradient does not */
.hero-pitch h1 em.rot-w {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

/* 10 — WORD-BASED CASE METRICS.
   .case-metric .num is sized for figures ("45%", "7 days"). Two case studies have
   no numbers to report and carry qualitative badges instead (per the brief — no
   invented metrics), and those phrases were rendering at headline size and
   wrapping badly. This sizes the word-based ones down to fit their box. */
.case-metric .num.is-text {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.22;
}

/* 11 — SIMPLIFIED PHONE HERO (phones only, ≤760px — tablet and desktop unchanged).
   Drops the secondary "See the work" button and the Recent build / Latest insight
   card, then centres what is left both ways: headline, paragraph, a clear gap, then
   the single button. Both hidden elements still exist in the HTML and on larger
   screens — this is display only. */
@media (max-width: 760px) {
  .hero .hero-ctas .btn-ghost { display: none; }
  .hero .hero-card { display: none; }

  .hero-stage { justify-content: center; }        /* was flex-end — vertical centring */
  .hero-foot  { align-items: center; }            /* column on mobile; was flex-start */
  .hero-pitch { text-align: center; width: 100%; }
  .hero-pitch p { margin-left: auto; margin-right: auto; }

  /* the pink block is nudged left on desktop so the WORD lines up with "We build";
     centred, that nudge would throw it off-centre by the same amount */
  .hero-pitch h1 .rot { margin-left: 0; }

  /* Headline sits higher, paragraph stays centred between, button drops lower —
     the gaps above and below the paragraph both open up. NB these are block
     siblings so their margins COLLAPSE: the larger of the two wins, which is why
     these are set high rather than added to the paragraph's own 28px. */
  .hero-pitch h1 { margin-bottom: 30px; }
  .hero-ctas { justify-content: center; margin-top: 64px; }

  /* a longer button */
  .hero .hero-ctas .btn-flare {
    min-width: 264px;
    justify-content: center;
  }

  /* nudge the whole centred block up a little */
  .hero-stage { padding-bottom: 78px; }
}

/* 12 — "START A PROJECT" IN THE TOGGLE MENU.
   It was only `color: var(--flare)` (#3f6b74 — dark teal) sitting on the dark
   graphite menu, so the one thing in there worth clicking was the hardest to see.
   Now it is an actual button, in the same pink as the hero CTA. */
.nav-menu a:last-child {
  margin-top: 10px;
  padding: 15px 14px;
  background: #ff2d78;
  color: #fff;
  text-align: center;
  border-radius: 100px;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.nav-menu a:last-child:hover,
.nav-menu a:last-child[aria-current="page"] {
  background: #e21e63;
  color: #fff;
  transform: translateY(-1px);
}

/* 13 — MOBILE FIT FIXES (found by auditing every page at 375 and 390).

   (a) .case-narrative carries the .wrap class, but its own `padding: Xpx 0`
       shorthand reset the left/right gutter to ZERO — so on every case study the
       heading and body copy ran hard against both screen edges. Restore the
       gutter. Applies at all widths: .wrap is supposed to guarantee it. */
.case-narrative { padding-left: var(--gutter); padding-right: var(--gutter); }

/*  (b) The laptop mockup used object-fit:cover on screenshots far wider than its
       16:10 screen (relayexpress.png is 2.11:1), so ~25% of every client site was
       sliced off the right — headlines were being cut mid-word. On phones show the
       whole screenshot instead; the lid's dark gradient reads as bezel around it. */
@media (max-width: 760px) {
  .cs-laptop-screen { object-fit: contain; object-position: center; background: #0e1113; }
}

/*  (c) Case-study card thumbnails. The screenshots are wide (up to 2.8:1) and the
       card is ~1.6:1, so object-fit:cover was slicing off the right-hand side —
       43% of The Energy Centre, 25% of Relay Express. Show the whole screenshot
       instead, letterboxed against a dark card so it reads as a screen.
       The -1px overhang below is a cover-only trick (it hides sub-pixel gaps at
       the clip edge); with contain it would just offset the letterbox, so reset it. */
.rail-card-visual { background: #0e1113; }
.rail-card-visual .shot {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/*  (d) Same again for the small thumbnails in the work-page accordion rows — they
       were cropping 46% off The Energy Centre. The .thumb already has a dark
       background for the letterbox to sit on. */
.case-row .thumb img {
  width: 100%; height: 100%; margin: 0;
  object-fit: contain; object-position: center;
}

/*  (e) STANDARDISED CARD IMAGES. The six screenshots were all 3200px wide but
       1142-1800 tall — aspect ratios from 1.78 to 2.80 — so no object-fit setting
       could make them look like a set: cover cropped each by a different amount,
       contain letterboxed each by a different amount. They are now pre-processed
       to an identical 1600x800 (2:1), each showing nav + hero, in img/work/card/.
       The card matches that ratio exactly, so nothing is cropped or letterboxed.
       Case-study pages still use the ORIGINAL full-height screenshots. */
.rail-card-visual,
.work-grid .rail-card-visual,          /* this one is (0,2,0) at line ~2220 and would
                                          otherwise beat the bare .rail-card-visual */
.work-card .rail-card-visual { aspect-ratio: 2 / 1; }
.rail-card-visual .shot { object-fit: cover; }   /* exact fit now — no crop either way */
.case-row .thumb { aspect-ratio: 2 / 1; }
.case-row .thumb img { object-fit: cover; }

/* 14 — THE SALES BLOCK KEEPS ITS TEAL.
   The teal accent became indigo site-wide (retuned --verd-solid to match the hero
   video's streak). Aaron wants the "Sales systems for offers worth more than small
   talk" block on services.html left as it was, so restore the original teal for
   that one section. Its own --glow (#2fa39c) was never changed. */
.svc2[data-tint="verd"] { --tint-solid: #3f6b74; }

/* 15 — CTA + FOOTER READ AS ONE BLOCK.
   They already share --graphite, so the only thing splitting them was the footer's
   1px border-top hairline plus a big padding gap. Dropping the rule only where the
   footer directly follows the CTA means footers on pages that end differently keep
   their divider. */
.cta + .footer {
  border-top: 0;
  padding-top: 40px;
}
/* the CTA's glow bleeds down into the footer instead of stopping at the seam */
.cta { padding-bottom: clamp(56px, 7vw, 96px); }

/* 16 — CTA + FOOTER, PROPERLY MERGED.
   Removing the border wasn't enough. `section[data-tint]::after` paints a radial
   glow with inset:0, so it stopped dead at the CTA's bottom edge while the footer
   below had none — that tonal step is what still read as two blocks. Kill the glow
   on the CTA and carry a matching one into the top of the footer instead, so the
   light falls continuously across both. */
.cta[data-tint]::after { display: none; }
.cta + .footer {
  border-top: 0;
  padding-top: 40px;
  background-image: radial-gradient(ellipse 80% 46% at 50% -6%, rgba(63, 95, 158, 0.20), transparent 72%);
}
/* the heat glow was still the old teal */
.cta-heat {
  background:
    radial-gradient(ellipse at 42% 100%, rgba(63, 95, 158, 0.26), transparent 60%),
    radial-gradient(ellipse at 68% 100%, rgba(99, 133, 196, 0.16), transparent 65%);
}

/* 17 — SERVICES DECK GROUND: match the home hero.
   The deck sat on a purple aurora; the hero is a dark ground with a soft pink
   bloom. Reuse the hero's exact gradient values so they read as the same room. */
.deck-aurora {
  background:
    radial-gradient(ellipse 54% 44% at 50% 40%, rgba(255, 70, 135, 0.12), transparent 64%),
    radial-gradient(ellipse 64% 52% at 62% 54%, rgba(150, 55, 120, 0.08), transparent 66%);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  animation: none;
}
.deck-aurora::before,
.deck-aurora::after { display: none; }   /* the purple blobs */

/* 18 — MOBILE HERO: SHOW THE WHOLE WORDMARK.
   The video is 16:9 and was object-fit:cover, so on a portrait phone the sides were
   cropped hard and the PLATINUM wordmark ran off both edges. `contain` shows the
   whole frame — at 390px wide that is a 219px-tall band — so the layout has to
   leave that band clear. Heading stays put; the paragraph and button move below it.
   Spacing is viewport-relative so it adapts from an SE up to a Pro Max. */
@media (max-width: 760px) {
  /* Keep the video reading as a full-bleed background while showing the whole 16:9
     frame: the letterbox either side of the contained video is filled with a heavily
     blurred copy of the same footage (its poster frame), so there are no bands — just
     ambient colour running to the screen edges. Standard video-player technique; the
     poster is static but at this blur radius that is invisible, and it costs one 6KB
     image rather than a second video decode on a phone. */
  /* Video stays a full-bleed background (cover). That crops the sides of the 16:9
     frame on a portrait phone, so the PLATINUM wordmark is partly cut — Aaron's
     call: a letterboxed frame with an ambient fill read as "botched together".
     The heading/paragraph/button spacing below is kept as-is. */
  .hero-video { object-fit: cover; }
  .hero-pitch h1 { margin-bottom: 68vw; }
  .hero-ctas { margin-top: clamp(22px, 4vh, 40px); }
  .hero-stage { padding-bottom: clamp(28px, 5vh, 60px); }
}

/* 19 — PINNED WORK SECTION MUST CLEAR THE FIXED NAV.
   .work-pin is sticky at top:0 and centres its content in 100vh, so on a short
   viewport (a laptop at ~760px tall) the heading rises up behind the nav bar —
   which became obvious once the nav got a solid frosted background. Centring inside
   100vh MINUS the nav height keeps it clear at any window height. */
.work-scroll.is-pinned .work-pin { padding-top: 88px; }
/* On a very short window the pinned block is simply taller than the space left
   under the nav, so padding alone can't save it — ease the heading down too. */
@media (min-width: 861px) and (max-height: 700px) {
  .work-scroll.is-pinned .work-head h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
  .work-scroll.is-pinned .work-pin { gap: 14px; }
}

/* 20 — THE INSIGHT CARD MUST NOT COVER THE VIDEO WORDMARK.
   At 1920 the card started at x=1266 while the wordmark ran to x=1411, so it sat
   over the final M. Rather than shrink the card's width (which would shrink the
   device mockup inside it), drop its height: the card is bottom-aligned with the
   hero copy, so a shorter card lowers its top. 4/3 -> 16/9 takes ~70px off, which
   puts the card's top level with the "We build" heading and clears the wordmark
   (which ends ~90px above that). */
.hero-card-img.devices { aspect-ratio: 16 / 9; }

/* 21 — MOBILE SECTION ORDER.
   On phones the running order becomes: hero -> service cards -> going platinum ->
   recent work -> guarantee -> go platinum -> footer. Done with flex `order` rather
   than moving markup, so desktop keeps its original sequence and there is one
   source of truth in the HTML. */
@media (max-width: 760px) {
  body { display: flex; flex-direction: column; }
  .nav                        { order: 0; }
  .hero                       { order: 1; }
  #servicesDeck               { order: 2; }   /* service cards */
  .manifesto                  { order: 3; }   /* going platinum */
  #workScroll                 { order: 4; }   /* recent work */
  section[data-tint="cobalt"] { order: 5; }   /* the guarantee */
  .cta                        { order: 6; }   /* go platinum */
  .footer                     { order: 7; }
}

/* 22 — Drop the "CERTIFIED № 00X — SECTOR" tag that sat over the work thumbnails.
   CSS rather than deleting the markup, so it's one line to bring back. */
.rail-card-visual .assay-tag { display: none; }

/* 23 — MOBILE: THE DECK SITS ON THE HERO'S GROUND.
   The pink bloom behind the deck already matched the hero (see 17) — the GROUND
   did not. The deck sat on --graphite (#181e2a, a blue navy) against the hero's
   #141619 (neutral, near-black), and on a phone the two are stacked full-bleed,
   so that blue step read as a seam directly under the hero. Fade back to
   --graphite over the last stretch, otherwise the boundary just moves down to
   the manifesto, which is graphite too. */
@media (max-width: 860px) {
  .deck {
    background: linear-gradient(180deg,
      #141619 0%, #141619 84%, var(--graphite) 100%);
  }
}