/* ==========================================================================
   Dunnworks - shared stylesheet
   Two themes off one set of tokens. Dark is the default, light is opt-in
   through the switch in the header, which sets data-theme="light" on <html>.
   Tokens first, then layout, then components.
   ========================================================================== */

/* ---------- tokens, dark ---------- */
:root {
  --ink:        #101012;
  --ink-2:      #1a1a1a;
  --ink-3:      #232329;
  --line:       rgba(236, 232, 255, 0.11);
  --line-2:     rgba(236, 232, 255, 0.22);
  --paper:      #f4f2f8;
  --muted:      #a5a1b2;
  --muted-2:    #757083;
  --accent:     #7000ff;
  --accent-dim: rgba(112, 0, 255, 0.16);
  --accent-2:   #a97cff;
  --accent-hover: #8526ff;

  --header-bg:   rgba(16, 16, 18, 0.86);
  --mock-ground: #0d0d12;
  --mock-chrome: #08080c;
  --mock-bar:    rgba(255, 255, 255, 0.10);
  --mock-box:    rgba(255, 255, 255, 0.03);
  --dots:        var(--accent-2);
  --dots-alpha:  0.16;
  --bad:         #ff8f8f;
  --on-accent:   #ffffff;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 2px;
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(64px, 9vw, 128px);

  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --wa-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- tokens, light ---------- */
:root[data-theme="light"] {
  --ink:        #ffffff;
  --ink-2:      #f4f2f8;
  --ink-3:      #eae6f3;
  --line:       rgba(16, 16, 26, 0.12);
  --line-2:     rgba(16, 16, 26, 0.24);
  --paper:      #101012;
  --muted:      #56525f;
  --muted-2:    #6f6a7c;
  --accent:     #6a00f0;
  --accent-dim: rgba(106, 0, 240, 0.10);
  --accent-2:   #5600c2;
  --accent-hover: #5400c0;

  --header-bg:   rgba(255, 255, 255, 0.88);
  --mock-ground: #f4f2f8;
  --mock-chrome: #eae6f3;
  --mock-bar:    rgba(16, 16, 26, 0.10);
  --mock-box:    rgba(16, 16, 26, 0.03);
  --dots:        var(--accent);
  --dots-alpha:  0.20;
  --bad:         #b3261e;

  --shadow: 0 24px 60px rgba(16, 16, 26, 0.14);
  --wa-shadow: 0 12px 30px rgba(16, 16, 26, 0.18);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Switching theme repaints most of the page at once. Transitions are held off
   for that one frame, otherwise elements animate at different rates and some
   background colours fail to repaint at all. */
:root.theme-switching, :root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after {
  transition: none !important;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--on-accent); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--on-accent); padding: 12px 18px; font-family: var(--font-mono); font-size: 13px;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--panel { background: var(--ink-2); border-block: 1px solid var(--line); }
.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { grid-template-columns: 1.35fr 1fr; gap: 48px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); } }

/* dot field, used as a background layer on dark sections */
.dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--dots) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: var(--dots-alpha);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
}

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--accent);
  flex: none;
}
h1, .h1 { font-size: clamp(38px, 6.4vw, 74px); }
h2, .h2 { font-size: clamp(28px, 3.9vw, 46px); }
h3, .h3 { font-size: clamp(20px, 2.1vw, 25px); }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 62ch; }
.measure { max-width: 68ch; }
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.accent { color: var(--accent-2); }
.section-head { max-width: 800px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head p { color: var(--muted); margin-top: 18px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--paper); border-color: var(--line-2); }
.btn--ghost:hover { background: transparent; border-color: var(--accent-2); color: var(--accent-2); }
.btn--wide { width: 100%; justify-content: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.arrow-link {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-2); display: inline-flex; align-items: center; gap: 10px;
}
.arrow-link span { transition: transform 0.25s var(--ease); }
.arrow-link:hover span { transform: translateX(5px); }

/* ---------- header ---------- */
.topbar {
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding-block: 9px; }
.topbar a:hover { color: var(--accent-2); }
@media (max-width: 720px) { .topbar .wrap > :last-child { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 21px; letter-spacing: -0.03em; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand b { font-weight: 700; }
.brand i { font-style: normal; color: var(--accent-2); }

.nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav a {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  padding-block: 4px; border-bottom: 1px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav a:hover { color: var(--paper); }
.nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--accent); }
.nav .btn { padding: 11px 18px; }
.nav a.btn, .nav a.btn[aria-current="page"] { color: var(--on-accent); border-bottom-color: var(--accent); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); color: var(--paper); padding: 9px 12px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; }

/* ---------- theme switch ---------- */
.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  padding: 8px 13px; border-radius: var(--radius); cursor: pointer;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--paper); border-color: var(--accent-2); }
.theme-toggle .sw {
  position: relative; width: 28px; height: 14px; flex: none;
  border: 1px solid var(--line-2); border-radius: var(--radius);
}
.theme-toggle .sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px;
  background: var(--accent); transition: transform 0.25s var(--ease);
}
:root[data-theme="light"] .theme-toggle .sw::after { transform: translateX(14px); }
.theme-toggle .lbl-light { display: none; }
:root[data-theme="light"] .theme-toggle .lbl-dark { display: none; }
:root[data-theme="light"] .theme-toggle .lbl-light { display: inline; }
@media (max-width: 620px) { .theme-toggle .lbl { display: none; } :root[data-theme="light"] .theme-toggle .lbl-light { display: none; } .theme-toggle { padding: 8px 10px; gap: 0; } }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 22px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: 14px; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--accent-2); }
  .nav .btn { margin-top: 16px; justify-content: center; border-bottom: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
/* the reel carries the weight now, so the hero opens closer to the header */
.hero .wrap { position: relative; z-index: 2; padding-block: clamp(36px, 4.6vw, 68px) clamp(56px, 8vw, 116px); }
.hero h1 { max-width: 16ch; }
.hero .lead { margin-top: 26px; }
/* ---------- hero showreel ----------
   The reel sits beside the words in a browser frame at full strength, rather than
   behind them under a wash. Nothing is hidden at any width. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero-copy { min-width: 0; }
/* the headline shares the row now, so it takes a step down rather than
   wrapping to five lines in a half-width column */
.hero-grid h1 { font-size: clamp(34px, 3.9vw, 54px); max-width: 14ch; }
.hero-grid .lead { max-width: 46ch; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero-grid h1 { font-size: clamp(34px, 5.6vw, 58px); max-width: 17ch; }
  .hero-grid .lead { max-width: 58ch; }
}

.hero-reel { margin: 0; min-width: 0; display: grid; gap: 14px; position: relative; }
.hero-reel::before {
  content: ""; position: absolute; inset: -14% -10% -18% -10%; z-index: 0;
  background: radial-gradient(60% 55% at 50% 45%, var(--accent-dim), transparent 70%);
  pointer-events: none;
}
.hero-reel .mock {
  position: relative; z-index: 1; inset: auto;
  border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.hero-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mock-ground); }
@media (max-width: 980px) { .hero-stage { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) { .hero-stage { aspect-ratio: 4 / 3; } }

.hero-shot { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.1s ease; }
.hero-shot.is-live { opacity: 1; }
.hero-shot .shot-track { position: absolute; inset: 0; animation: shotTrack 26s linear infinite; }
.hero-shot .shot-track img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; animation: shotPage 26s linear infinite; }

.hero-reel figcaption {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--muted-2); text-transform: uppercase;
}
.hero-reel figcaption a { color: var(--muted); }
.hero-reel figcaption a:hover { color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) {
  .hero-shot .shot-track, .hero-shot .shot-track img { animation: none; }
}

.hero-scan {
  position: absolute; left: 0; right: 0; height: 1px; top: 0; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: 0.55;
  animation: scan 7s linear infinite;
}
@keyframes scan { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 44px;
  padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 9px; }
.hero-meta span::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }

/* page hero, used on inner pages */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.page-hero .wrap { position: relative; z-index: 2; padding-block: clamp(56px, 8vw, 96px); }
.page-hero h1 { font-size: clamp(34px, 5vw, 58px); max-width: 18ch; }
.page-hero .lead { margin-top: 22px; }

/* ---------- cards ---------- */
.card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  position: relative;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--accent);
  transition: width 0.45s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--ink-3); }
.card:hover::after { width: 100%; }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 16px; }
.card .num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--accent-2); display: block; margin-bottom: 18px;
}

.tick { margin-top: 20px; display: grid; gap: 10px; }
.tick li { position: relative; padding-left: 26px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.tick li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 2px; background: var(--accent);
}

/* ---------- stat counters ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--ink); padding: 30px 26px; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 50px); font-weight: 600; letter-spacing: -0.03em; }
.stat span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 8px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- work cards ---------- */
.work-card { display: flex; flex-direction: column; height: 100%; }
.work-shot {
  aspect-ratio: 2 / 1; border-bottom: 1px solid var(--line); position: relative; overflow: hidden;
  background: var(--ink-3);
}
.work-shot .frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.work-body { padding: 26px 28px 30px; }
.work-body h3 { margin-bottom: 8px; }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); padding: 6px 10px; border-radius: var(--radius);
}
.work-card .card-pad { padding: 0; }

/* ---------- browser mock, stands in until real screenshots go in ---------- */
.mock { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--mock-ground); }
.mock-bar {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--line); background: var(--mock-chrome); flex: none;
}
.mock-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); display: block; }
.mock-url {
  margin-left: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-body { flex: 1; padding: 16px; display: grid; gap: 9px; align-content: start; background: var(--mock-bg, var(--mock-ground)); }
.mock-body .bar { height: 8px; border-radius: 1px; background: var(--mock-bar); }
.mock-body .bar.w70 { width: 70%; }
.mock-body .bar.w50 { width: 50%; }
.mock-body .bar.w35 { width: 35%; }
.mock-body .bar.tall { height: 22px; background: var(--mock-accent, var(--accent)); opacity: 0.85; }
.mock-body .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 6px; }
.mock-body .box { height: 34px; border: 1px solid var(--line); border-radius: 1px; background: var(--mock-box); }
.mock-body .box.on { border-color: var(--mock-accent, var(--accent)); }
.work-card:hover .mock-body .bar.tall { opacity: 1; }

/* ---------- clips: real captures moved with CSS, no video files ---------- */
/* The track is the size of the window, the image is the size of the page.
   Translating the track by +100% and the image by -100% lands the foot of
   the page on the foot of the window, whatever size the card happens to be. */
.shot { flex: 1; position: relative; overflow: hidden; background: var(--mock-ground); min-height: 0; }
.shot-track { position: absolute; inset: 0; }
.shot-track img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; }
.shot-track, .shot-track img, .shot .stack, .shot .layer { will-change: transform; }
.shot.is-playing .shot-track,
.shot.is-playing .shot-track img,
.shot.is-playing .stack,
.shot.is-playing .layer { animation-play-state: running; }

/* 01 the long read: one unbroken scroll, a beat at the top and the foot */
.shot--read .shot-track     { animation: shotTrack 22s cubic-bezier(.5,0,.5,1) infinite paused; }
.shot--read .shot-track img { animation: shotPage  22s cubic-bezier(.5,0,.5,1) infinite paused; }
@keyframes shotTrack { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(100%); } }
@keyframes shotPage  { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(-100%); } }

/* 02 drift and settle: the same travel, easing out of a slight enlargement */
.shot--drift .shot-track     { animation: shotTrack 26s cubic-bezier(.4,0,.3,1) infinite paused; }
.shot--drift .shot-track img { animation: shotDrift 26s cubic-bezier(.4,0,.3,1) infinite paused; transform-origin: 50% 0; }
@keyframes shotDrift {
  0%   { transform: translateY(0) scale(1.06); }
  50%  { transform: translateY(-55%) scale(1.02); }
  100% { transform: translateY(-100%) scale(1); }
}

/* 03 stacked layers: the page split into three planes, tilted and turning */
.shot--stack { display: grid; place-items: center; perspective: 1400px; }
.shot--stack .stack {
  position: relative; width: 46%; aspect-ratio: 3 / 2; transform-style: preserve-3d;
  animation: stackTurn 30s ease-in-out infinite paused;
}
@keyframes stackTurn {
  0%, 100% { transform: rotateX(52deg) rotateZ(-32deg); }
  50%      { transform: rotateX(44deg) rotateZ(-22deg); }
}
.shot--stack .layer {
  position: absolute; inset: 0; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--mock-ground);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  animation: layerLift 30s ease-in-out infinite paused;
  animation-delay: var(--delay, 0s);
}
.shot--stack .layer img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; }
.shot--stack .layer:nth-child(1) { --lift: 0px;  --delay: 0s; }
.shot--stack .layer:nth-child(2) { --lift: 20px; --delay: 0.5s; }
.shot--stack .layer:nth-child(3) { --lift: 40px; --delay: 1s; }
.shot--stack .layer:nth-child(2) img { transform: translateY(-32%); }
.shot--stack .layer:nth-child(3) img { transform: translateY(-64%); }
@keyframes layerLift {
  0%, 100% { transform: translateZ(var(--lift)); }
  50%      { transform: translateZ(calc(var(--lift) * 1.5)); }
}

/* 04 section stops: the page moves in four steps, the way somebody reads it */
.shot--steps .shot-track     { animation: stepTrack 26s ease-in-out infinite paused; }
.shot--steps .shot-track img { animation: stepPage  26s ease-in-out infinite paused; }
@keyframes stepTrack {
  0%,  14%  { transform: translateY(0); }
  23%, 37%  { transform: translateY(25%); }
  46%, 60%  { transform: translateY(50%); }
  69%, 83%  { transform: translateY(75%); }
  92%, 100% { transform: translateY(100%); }
}
@keyframes stepPage {
  0%,  14%  { transform: translateY(0); }
  23%, 37%  { transform: translateY(-25%); }
  46%, 60%  { transform: translateY(-50%); }
  69%, 83%  { transform: translateY(-75%); }
  92%, 100% { transform: translateY(-100%); }
}

/* On a phone the stack is too small to read, so it scrolls flat instead */
@media (max-width: 620px) {
  .shot--stack { display: block; perspective: none; }
  .shot--stack .stack { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; animation: none; transform: none; }
  .shot--stack .layer:nth-child(1), .shot--stack .layer:nth-child(2) { display: none; }
  .shot--stack .layer:nth-child(3) { border: 0; box-shadow: none; overflow: visible; animation: shotTrack 30s cubic-bezier(.5,0,.5,1) infinite paused; }
  .shot--stack .layer:nth-child(3) img { transform: none; animation: shotPage 30s cubic-bezier(.5,0,.5,1) infinite paused; }
}

@media (prefers-reduced-motion: reduce) {
  .shot-track, .shot-track img, .shot .stack, .shot .layer { animation: none !important; }
  .shot--stack .layer:nth-child(1), .shot--stack .layer:nth-child(2) { display: none; }
  .shot--stack { display: block; perspective: none; }
  .shot--stack .stack { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; transform: none; }
  .shot--stack .layer:nth-child(3) { border: 0; box-shadow: none; }
  .shot--stack .layer:nth-child(3) img { transform: none; }
}

/* ---------- coverage map: real coordinates, no library, no tiles ---------- */
.locmap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px; align-items: center; }
@media (max-width: 860px) { .locmap { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

.locmap-svg { width: 100%; height: auto; max-width: 640px; display: block; margin-inline: auto; overflow: visible; }

.locmap-ring { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 7; opacity: 0.8; }
.locmap-ring-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  fill: var(--muted-2); text-transform: uppercase;
}
.locmap-axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 10; }
.locmap-spoke { stroke: var(--line-2); stroke-width: 1; opacity: 0.55; transition: stroke 0.25s var(--ease), opacity 0.25s var(--ease); }
/* only the dot and the label are targets, never the ring, spoke or wash behind them */
.locmap-leader { stroke: var(--line-2); stroke-width: 1; opacity: 0.7; }
.locmap-glow, .locmap-ring, .locmap-ring-label, .locmap-axis, .locmap-spoke, .locmap-leader, .locmap-halo { pointer-events: none; }

.locmap-hit { fill: transparent; }
.locmap-dot { fill: var(--ink); stroke: var(--accent-2); stroke-width: 1.5; transition: r 0.25s var(--ease), fill 0.25s var(--ease); }
.locmap-halo { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.55; }

.locmap-name {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em;
  fill: var(--paper); transition: fill 0.25s var(--ease);
}
.locmap-mi {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em;
  fill: var(--muted-2); opacity: 0; transition: opacity 0.25s var(--ease);
}
.locmap-node.is-home .locmap-dot { fill: var(--accent); stroke: var(--accent); }
.locmap-node.is-home .locmap-name { fill: var(--accent-2); }
.locmap-node.is-home .locmap-mi { opacity: 1; }

a.locmap-node { cursor: pointer; }
.locmap-node:hover .locmap-dot,
.locmap-node:focus-visible .locmap-dot { r: 7; fill: var(--accent); stroke: var(--accent); }
.locmap-node:hover .locmap-spoke,
.locmap-node:focus-visible .locmap-spoke,
.locmap-node:hover .locmap-leader,
.locmap-node:focus-visible .locmap-leader { stroke: var(--accent-2); opacity: 1; }
.locmap-node:hover .locmap-name,
.locmap-node:focus-visible .locmap-name { fill: var(--accent-2); }
.locmap-node:hover .locmap-mi,
.locmap-node:focus-visible .locmap-mi { opacity: 1; }
a.locmap-node:focus-visible { outline: none; }
a.locmap-node:focus-visible .locmap-halo,
a.locmap-node:focus-visible .locmap-dot { stroke: var(--accent-2); }

/* the towns that link out get a dotted underline so they read as links */
a.locmap-node .locmap-name { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
a.locmap-node:hover .locmap-name { text-decoration-color: var(--accent-2); }

.locmap-col { display: grid; gap: 16px; align-content: center; }
.locmap-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--ink); border: 1px solid var(--line); align-content: start;
}
@media (max-width: 1080px) and (min-width: 861px) { .locmap-list { grid-template-columns: minmax(0, 1fr); } .locmap-list li:nth-child(odd) { border-right: 0; } }
@media (max-width: 520px) { .locmap-list { grid-template-columns: minmax(0, 1fr); } .locmap-list li:nth-child(odd) { border-right: 0; } }
.locmap-list li {
  padding: 10px 15px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 14px; font-size: 14.5px;
  border-bottom: 1px solid var(--line);
}
.locmap-list li:nth-child(odd) { border-right: 1px solid var(--line); }
@media (min-width: 521px) and (max-width: 860px), (min-width: 1081px) {
  .locmap-list li:nth-last-child(-n+2):nth-child(odd) { border-bottom: 0; }
  .locmap-list li:last-child { border-bottom: 0; }
}
.locmap-list li span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.locmap-list a { font-weight: 500; }
p.locmap-rest { margin: 0; color: var(--muted); font-size: 14.5px; }

/* On a phone the map is the picture and the list underneath is the data, so the
   distances come off the map rather than stacking 15 of them on top of each other. */
@media (max-width: 620px) {
  .locmap-mi { display: none; }
  .locmap-node.is-home .locmap-mi { display: block; opacity: 1; }
  .locmap-name { font-size: 15px; }
  .locmap-ring-label { font-size: 13px; }
}

/* ---------- steps ---------- */
/* ---------- enquiry block, repeated at the foot of every page ---------- */
.enquire { border-top: 1px solid var(--line); }
.enquire-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 60px); align-items: start; }
@media (max-width: 920px) { .enquire-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; } }

.enquire-copy p { color: var(--muted); font-size: 16px; max-width: 42ch; }
.enquire-card {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); padding: 16px 18px;
}
.enquire-ico {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 10px; background: var(--accent-dim); color: var(--accent-2);
}
.enquire-card b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; margin-bottom: 3px; }
.enquire-card span { display: block; color: var(--muted-2); font-size: 13.5px; }
.enquire-card a { color: inherit; }
.enquire-card b a { color: var(--accent-2); }

.enquire-form-wrap {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2);
  padding: clamp(22px, 3vw, 30px);
}
.enquire-form-wrap h3 { font-size: 20px; margin-bottom: 6px; }
.enquire-hint { color: var(--muted-2); font-size: 13.5px; margin-bottom: 22px; }

/* ---------- metrics panel: the same shape as a dashboard, with real figures ---------- */
.panel-metrics { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--ink-2); }
.panel-metrics-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--ink-3);
}
.panel-metrics-title, .panel-metrics-flag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.panel-metrics-title { color: var(--muted-2); }
.panel-metrics-flag {
  color: var(--accent-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 13px;
  display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0.06em;
}
.panel-metrics-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric { padding: 22px 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric:nth-child(3n) { border-right: 0; }
.metric:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 860px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(3n) { border-right: 1px solid var(--line); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .metric:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 520px) {
  .metrics-grid { grid-template-columns: minmax(0, 1fr); }
  .metric { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .metric:last-child { border-bottom: 0 !important; }
}

.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.metric-code, .metric-real {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.metric-code { color: var(--accent-2); }
.metric-real { color: var(--muted-2); }
.metric-name { color: var(--muted); font-size: 14.5px; margin-bottom: 10px; }
.metric b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric-note { color: var(--muted-2); font-size: 13px; margin-top: 12px; }

.panel-metrics-foot {
  padding: 16px 22px; border-top: 1px solid var(--line); background: var(--ink-3);
  color: var(--muted-2); font-size: 13.5px;
}
.panel-metrics-foot a { color: var(--muted); }
.panel-metrics-foot a:hover { color: var(--accent-2); }

/* ---------- split: a statement on the left, the signals beside it ---------- */
.split { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(30px, 5vw, 64px); align-items: start; }
@media (max-width: 920px) { .split { grid-template-columns: minmax(0, 1fr); gap: 34px; } }

.split-copy .eyebrow { margin-bottom: 18px; }
.split-h { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; margin-bottom: 24px; }
.split-h em { font-style: normal; color: var(--accent-2); }
.split-copy p { color: var(--muted); font-size: 16px; max-width: 46ch; }
.split-copy p + p { margin-top: 16px; }

.signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .signals { grid-template-columns: minmax(0, 1fr); } }

.signal {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2);
  padding: 20px 20px 22px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.signal:hover { border-color: var(--line-2); transform: translateY(-2px); }
.signal-ico {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent-2); margin-bottom: 14px;
}
.signal h3 { font-size: 16.5px; margin-bottom: 7px; }
.signal p { color: var(--muted); font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) { .signal { transition: none; } .signal:hover { transform: none; } }

/* ---------- ways of working: a list you can scan, and the promise beside it ---------- */
.ways { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 920px) { .ways { grid-template-columns: minmax(0, 1fr); } }

.ways-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--ink-2); }
.ways-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: background 0.25s var(--ease);
}
.ways-row:last-child { border-bottom: 0; }
.ways-row:hover, .ways-row:focus-visible { background: var(--accent-dim); outline: none; }
.ways-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-2); }

.ways-ico {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line-2); border-radius: 11px; color: var(--accent-2); background: var(--ink);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.ways-row:hover .ways-ico, .ways-row:focus-visible .ways-ico { border-color: var(--accent); transform: translateY(-2px); }

.ways-text { min-width: 0; display: grid; gap: 3px; }
.ways-text b { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.ways-text span { color: var(--muted); font-size: 14.5px; }

.ways-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 6px 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
}
.ways-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 560px) {
  .ways-row { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .ways-tag { grid-column: 2; justify-self: start; margin-top: 4px; }
}

.ways-note { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); padding: 26px 26px 28px; }
.ways-note-ico {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px;
  border-radius: 12px; color: var(--accent-2); background: var(--accent-dim); border: 1px solid var(--line-2);
}
.ways-note h3 { font-size: 20px; margin-bottom: 12px; }
.ways-note p { color: var(--muted); font-size: 15px; }
.ways-note p + p { margin-top: 14px; }

/* ---------- how it works: a rail of four, two of which need the client ---------- */
.flow { --flow-fill: 12.5%; }
.flow-key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 30px; }
.flow-key-item {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-2); display: inline-flex; align-items: center; gap: 9px;
}
.flow-key-item::before { content: ""; width: 10px; height: 10px; border-radius: 50%; display: block; }
.flow-key-item--you::before { background: var(--accent); }
.flow-key-item--me::before { background: transparent; border: 1.5px solid var(--line-2); }

.flow-track {
  position: relative; display: grid; gap: 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 8px;
}
/* the rail runs behind the numbers, and the violet part fills to the live step */
.flow-rail, .flow-rail-fill { position: absolute; top: 30px; left: 0; height: 1px; }
.flow-rail { right: 0; background: var(--line-2); }
.flow-rail-fill {
  width: var(--flow-fill); background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.7s var(--ease);
}

.flow-step { position: relative; cursor: pointer; padding-right: 10px; }
.flow-step:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 6px; border-radius: 2px; }
.flow-node {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 20px;
  background: var(--ink); border: 1px solid var(--line-2);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.flow-node b {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--muted); transition: color 0.35s var(--ease);
}
.flow-step--you .flow-node { border-color: var(--accent); }
.flow-step--you .flow-node b { color: var(--accent-2); }

.flow-step.is-on .flow-node {
  background: var(--accent); border-color: var(--accent);
  transform: translateY(-3px); box-shadow: 0 10px 26px rgba(112, 0, 255, 0.35);
}
.flow-step.is-on .flow-node b { color: #fff; }

.flow-who {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2); display: block; margin-bottom: 10px;
  transition: color 0.35s var(--ease);
}
.flow-step--you .flow-who { color: var(--accent-2); }
.flow-step h3 { font-size: 20px; margin-bottom: 9px; transition: color 0.35s var(--ease); }
.flow-step p { color: var(--muted); font-size: 15.5px; }
.flow-step.is-on h3 { color: var(--accent-2); }

@media (max-width: 900px) {
  .flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 26px; }
  .flow-rail, .flow-rail-fill { display: none; }
}
@media (max-width: 540px) {
  .flow-track { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-node, .flow-rail-fill, .flow-who, .flow-step h3 { transition: none; }
  .flow-step.is-on .flow-node { transform: none; }
}

.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { background: var(--ink); padding: 34px 28px; position: relative; }
.step .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--accent-2); display: block; margin-bottom: 20px; }
.step h3 { font-size: 21px; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- pricing ---------- */
.price-card { display: flex; flex-direction: column; }
.price-card .price { font-family: var(--font-display); font-size: 42px; letter-spacing: -0.03em; margin: 18px 0 4px; }
.price-card .price small { font-size: 15px; font-family: var(--font-mono); color: var(--muted); letter-spacing: 0.08em; display: block; margin-bottom: 6px; text-transform: uppercase; }
.price-card .tick { flex: 1; }
.price-card .btn { margin-top: 28px; }
.price-card.is-featured { border-color: var(--accent); background: var(--ink-3); }
.price-card.is-featured::after { width: 100%; }
.flag {
  position: absolute; top: -1px; right: -1px; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px;
}

/* ---------- comparison table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: var(--ink-2); }
tbody tr:last-child td { border-bottom: none; }
td.yes { color: var(--accent-2); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--font-display); font-size: clamp(18px, 2vw, 21px); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 20px; color: var(--accent-2); font-family: var(--font-mono); font-size: 22px; transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 40px 26px 0; color: var(--muted); max-width: 78ch; }

/* ---------- cta band ---------- */
.cta {
  position: relative; overflow: hidden; border-top: 1px solid var(--line);
  background: var(--ink-2);
}
.cta .wrap { position: relative; z-index: 2; padding-block: clamp(56px, 8vw, 96px); text-align: center; }
.cta h2 { max-width: 20ch; margin-inline: auto; }
.cta .lead { margin: 20px auto 0; }
.cta .btn-row { justify-content: center; }

/* ---------- forms ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  background: var(--ink); border: 1px solid var(--line-2); color: var(--paper);
  padding: 14px 16px; border-radius: var(--radius); font: inherit; font-size: 16px; width: 100%;
  transition: border-color 0.2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; }
.field textarea { min-height: 150px; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 620px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.form-note { font-size: 14px; color: var(--muted-2); }
.form-status { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; min-height: 20px; }
.form-status.ok { color: var(--accent-2); }
.form-status.bad { color: var(--bad); }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ---------- contact details ---------- */
.detail-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.detail { background: var(--ink-2); padding: 22px 26px; }
.detail span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }
.detail a:hover { color: var(--accent-2); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 72px) 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.site-footer h4 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 16px; }
.site-footer li + li { margin-top: 10px; }
.site-footer a { color: var(--muted); font-size: 15.5px; }
.site-footer a:hover { color: var(--accent-2); }
.site-footer .blurb { color: var(--muted); font-size: 15.5px; max-width: 42ch; margin-top: 18px; }
.footer-bottom {
  margin-top: 48px; border-top: 1px solid var(--line); padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2);
}

/* ---------- WhatsApp button ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #062d1b;
  padding: 12px 16px; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: var(--wa-shadow);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.wa-float:hover { transform: translateY(-2px); background: #3ae07a; }
.wa-float svg { flex: none; }
@media (max-width: 620px) {
  .wa-float { padding: 13px; gap: 0; }
  .wa-float span { display: none; }
}
@media print { .wa-float { display: none; } }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-scan { display: none; }
}

/* ---------- cookie banner ---------- */
.cc {
  position: fixed; left: 18px; bottom: 18px; z-index: 90;
  width: min(440px, calc(100vw - 36px));
  max-height: calc(100vh - 36px); overflow-y: auto;
  background: var(--ink-2); color: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 28px 26px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.cc.is-open { opacity: 1; transform: none; }
.cc-x {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 26px; line-height: 1;
}
.cc-x:hover { color: var(--paper); }
.cc-text { font-size: 15.5px; line-height: 1.6; margin: 0 0 22px; padding-right: 8px; }
.cc-text a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cc-text a:hover { color: var(--accent-2); }
.cc-prefs { display: grid; gap: 12px; margin: 0 0 22px; }
.cc-prefs[hidden] { display: none; }
.cc-opt {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px; line-height: 1.5; color: var(--muted); cursor: pointer;
}
.cc-opt input { margin-top: 4px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.cc-opt b { display: block; color: var(--paper); font-weight: 500; }
.cc-actions { display: grid; gap: 12px; }
.cc-btn {
  width: 100%; padding: 15px 18px; cursor: pointer;
  border-radius: var(--radius); border: 2px solid var(--line-2);
  background: transparent; color: var(--muted);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cc-btn:hover { border-color: var(--paper); color: var(--paper); }
.cc-accept { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cc-accept:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.cc-reject { border-color: var(--accent); color: var(--accent-2); }
.cc-reject:hover { border-color: var(--accent-2); color: var(--accent-2); background: var(--accent-dim); }
.cc-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.cc-link:hover { color: var(--accent-2); }
@media (max-width: 620px) {
  .cc { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 30px 20px 20px; }
  body.cc-open .wa-float { display: none; }
}
@media print { .cc { display: none; } }