:root {
  --bg: #faf9f6;
  --ink: #15161a;
  --muted: #56544e;
  --line: #e2dfd7;
  --accent: #8a6d33;
  --mark: #f0431b;   /* wordmark dot, CTA hover, the 7, the accents in the step art */
  --font-wordmark: "degular", "Archivo", "Inter Tight", system-ui, sans-serif;
  --font-body: "Archivo", "Inter Tight", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --pad: clamp(20px, 4vw, 56px);
  --radius: 28px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint, the lassie.ai feel */
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: light; overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- header: floating pill, hides going down, returns coming up ---------- */
.site-header {
  position: fixed; inset: 18px var(--pad) auto; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
  /* Was mix-blend-mode: difference, which reads well over the video but would turn the
     red dot into whatever the inverse of the footage happens to be. Solid ink plus a
     shadow keeps the mark its own colour everywhere. */
  color: #f2f0ea;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
/* Past the hero the header sits on paper, so it inks up and drops the shadow.
   Default state is the over-video one, which is where a no-JS reader starts. */
.site-header.past-hero { color: var(--ink); text-shadow: none; }
.site-header.tucked { transform: translateY(-140%); opacity: 0; }
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 700; font-size: 18px;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.wordmark .dot {
  display: inline-block;
  width: 0.34em; height: 0.34em;
  margin: 0 0.5em;
  border-radius: 50%;
  background: var(--mark);
  vertical-align: 0.06em;  /* sits on the optical centre of the caps, not the baseline */
  text-shadow: none;
}

/* ---------- hero: full bleed, crops into a rounded card as you scroll ---------- */
.hero { height: 190vh; position: relative; }
.hero-frame {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  /* Auto rows stretch by default, which spread the tagline and the reel link to
     opposite ends of the frame. Centring the rows keeps them as one block. */
  align-content: center;
  background: radial-gradient(120% 80% at 50% 100%, #e9e5db 0%, #faf9f6 70%);
  /* inset(top right bottom left round radius) -- driven by main.js */
  clip-path: inset(0% 0% 0% 0% round 0px);
  will-change: clip-path;
  contain: layout paint;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-video {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform; /* slight counter-parallax while the frame crops */
}
/* The tagline sits dead centre, which is exactly where the old gradient was weakest
   (0.05 at 45%), so it disappeared over bright footage. A soft radial scrim under the
   centre carries the type without flattening the picture, and the edge gradients still
   hold the header and the city tag. */
.hero-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(72% 48% at 50% 50%, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.34) 45%, rgba(0,0,0,0) 72%),
    linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.48) 100%);
}
.tagline {
  position: relative; z-index: 2; margin: 0;
  font-family: var(--font-wordmark);
  font-weight: 500;
  font-size: clamp(34px, 6.5vw, 96px);
  letter-spacing: -0.025em; line-height: 1;
  text-align: center; padding: 0 var(--pad);
  /* Sits on footage, not on paper, so it keeps the light ink the scrim was built for. */
  color: #f2f0ea;
  text-shadow: 0 2px 26px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
}
/* Sits in the hero grid flow directly under the tagline, so it is centred with the
   type and stays well inside the crop inset. Not absolutely positioned like the CTA,
   which means it never has to ride the frame and never collides with it on a phone. */
.hero-reel {
  position: relative; z-index: 3;
  margin-top: clamp(18px, 2.4vw, 30px);
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #f2f0ea;
  padding: 12px 22px 12px 16px;
  border: 1px solid rgba(242,240,234,0.45);
  border-radius: 999px;
  background: rgba(10,11,14,0.22);
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.hero-reel::before {
  content: ""; width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}
.hero-reel:hover { background: var(--mark); border-color: var(--mark); color: #fff; }

/* The CTA rides the crop inset with the frame (main.js), so it is never sliced off. */
.hero-cta {
  position: absolute; right: var(--pad); bottom: 34px; z-index: 3;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 17px 34px; border-radius: 12px;
  background: #f2f0ea; color: #15161a;
  box-shadow: 0 10px 34px rgba(0,0,0,0.30);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.hero-cta:hover { background: var(--mark); color: #fff; }
.hero-cta:active { transform: translateY(1px); }

/* ---------- scroll reveals ----------
   The hidden state only exists once JS adds .js to <html>, so with JS off every
   word is on the page from the first paint. Reveals never gate content. */
.line { display: block; overflow: hidden; }
.line > span { display: block; }
html.js .line > span {
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
}
html.js .reveal.in .line > span { transform: translateY(0); }
html.js .line:nth-child(2) > span { transition-delay: 0.07s; }
html.js .line:nth-child(3) > span { transition-delay: 0.14s; }

html.js .fade { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
html.js .fade.in { opacity: 1; transform: none; }
html.js .rows li { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .rows.in li { opacity: 1; transform: none; }
html.js .rows.in li:nth-child(2) { transition-delay: 0.09s; }
html.js .rows.in li:nth-child(3) { transition-delay: 0.18s; }

/* ---------- content ---------- */
main { position: relative; z-index: 2; background: var(--bg); }
/* Scoped to main: the hero is a <section> too, and this rule was capping it at 1200px,
   so on anything wider the video was letterboxed instead of filling the viewport. */
main section { padding: clamp(64px, 9vw, 124px) var(--pad); border-top: 1px solid var(--line); max-width: 1200px; margin: 0 auto; }
.eyebrow { display: block; margin-bottom: 28px; }
/* the CTA lands here, so clear the fixed header */
.contact { scroll-margin-top: 84px; }
.statement h2, .contact h2 {
  font-family: var(--font-wordmark);
  font-weight: 500;
  font-size: clamp(32px, 4.9vw, 70px);
  line-height: 1.04; letter-spacing: -0.03em;
  margin: 0 0 32px; max-width: none;
}
/* Two lines at this size needs 1200px, which is the section's full width, so on wide
   screens the headline breaks out of the section's own padding. Narrow screens keep the
   padding or the type would touch the edge of the phone. */
@media (min-width: 900px) {
  .statement h2, .contact h2 {
    width: calc(100% + 2 * var(--pad));
    margin-left: calc(-1 * var(--pad));
  }
}
/* The first rule under the hero is an accent, not a divider. */
main section:first-of-type { border-top-color: var(--mark); }
.statement p { max-width: 52ch; color: var(--muted); font-size: 18px; margin: 0; }
.list h3 {
  font-family: var(--font-wordmark); font-weight: 500;
  font-size: clamp(26px, 3.2vw, 44px); letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 20px 0; border-top: 1px solid var(--line);
  font-size: clamp(18px, 2.2vw, 26px);
}
.rows li:last-child { border-bottom: 1px solid var(--line); }
.steps li { justify-content: flex-start; font-size: 18px; }
.steps li .mono { min-width: 34px; }
/* ---------- graphic 1: where the budget goes ---------- */
.split { margin-top: clamp(48px, 7vw, 88px); }
.split-row { margin-bottom: 22px; }
.split-head { display: block; margin-bottom: 10px; }
.bar {
  display: flex; height: 62px; border-radius: 12px; overflow: hidden;
  background: #efece4; border: 1px solid var(--line);
}
.seg {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 16px; overflow: hidden; white-space: nowrap;
  width: var(--w); /* no-JS: bars are already drawn */
}
.seg em { font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.seg b { font-size: 19px; font-weight: 500; }
.seg-prod { background: #2e2b25; color: #f2f0ea; }
.seg-media { background: var(--accent); color: #fbf7ee; }
html.js .seg { width: 0; transition: width 1.2s var(--ease); }
html.js .split.in .seg { width: var(--w); }
html.js .split.in .split-row:nth-child(2) .seg { transition-delay: 0.18s; }
.split-note { margin: 18px 0 0; color: var(--muted); }
.split-legend + .split-note { margin-top: 26px; }
.split-legend { display: none; align-items: center; gap: 8px; margin: 14px 0 0; }
.key { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.key-prod { background: #2e2b25; border: 1px solid #2e2b25; }
.key-media { background: var(--accent); margin-left: 14px; }

/* ---------- counting stats ---------- */
.stats { margin-top: clamp(44px, 6vw, 72px); }
/* One number, not three. Two of the originals ("2 revision rounds", "1 team") read as
   limits or as vague, and a single confident figure carries more than a weak row. */
.stat { display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 28px); }
.stat b {
  font-family: var(--font-wordmark); font-weight: 500;
  font-size: clamp(40px, 6vw, 80px); line-height: 0.9; letter-spacing: -0.04em;
  color: var(--mark);   /* same red as the wordmark dot and the CTA hover */
}
.stat span { font-size: 13px; max-width: 22ch; line-height: 1.6; }
html.js .stat { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .stats.in .stat { opacity: 1; transform: none; }
html.js .stats.in .stat:nth-child(2) { transition-delay: 0.1s; }
html.js .stats.in .stat:nth-child(3) { transition-delay: 0.2s; }

/* ---------- graphic 2: delivery formats ---------- */
.formats {
  display: grid; grid-template-columns: 1.6fr 0.75fr 1fr;
  gap: clamp(14px, 2vw, 26px); align-items: end;
  margin-top: clamp(48px, 7vw, 88px);
}
.fmt { margin: 0; }
/* The source video is never shown; the canvases are drawn from it. It still has to be
   laid out (not display:none) or browsers may refuse to decode it. */
.fmt-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -9999px; }
.fmt canvas {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--line);
  /* Poster shows if JS never runs, so the cards are never three empty boxes. */
  background: #e8e5de url("/media/poster.jpg?v=7") center / cover no-repeat;
}
.fmt-wide canvas { aspect-ratio: 16 / 9; }
.fmt-tall canvas { aspect-ratio: 9 / 16; }
.fmt-feed canvas { aspect-ratio: 4 / 5; }
.fmt figcaption { margin-top: 12px; display: flex; gap: 10px; }
.fmt figcaption i { font-style: normal; opacity: 0.6; }
html.js .fmt { opacity: 0; transform: translateY(28px) scale(0.96); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
html.js .formats.in .fmt { opacity: 1; transform: none; }
html.js .formats.in .fmt:nth-child(2) { transition-delay: 0.12s; }
html.js .formats.in .fmt:nth-child(3) { transition-delay: 0.24s; }

/* ---------- graphic 3: the week, as a drawn rail ---------- */
.timeline { list-style: none; margin: clamp(48px, 7vw, 80px) 0 0; padding: 0; position: relative; }
/* Rail down the left edge, then the copy, then the drawing just to its right. */
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px;
  background: var(--line);
}
.timeline::after { /* the drawn portion, scales down from the top */
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(to bottom, var(--mark), rgba(240, 67, 27, 0.18));
  transform-origin: top; transform: scaleY(1);
}
/* The rail fills as you read down it, so the line tracks the reader instead of
   emptying itself in one go before the lower steps are even on screen. */
html.js .timeline::after { transform: scaleY(var(--rail, 0)); transition: transform .25s linear; }
.timeline li { position: relative; padding: 0 0 clamp(48px, 7vw, 86px) 52px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { /* marker */
  content: ""; position: absolute; left: 0; top: 5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--mark);
}
.timeline li::after {
  content: ""; position: absolute; left: 5px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--mark);
}
html.js .timeline li::before, html.js .timeline li::after { transform: scale(0); transition: transform 0.55s var(--ease); }
html.js .timeline li.in::before { transform: scale(1); }
html.js .timeline li.in::after { transform: scale(1); transition-delay: 0.12s; }
.tl-day { display: block; margin-bottom: 12px; color: var(--accent); opacity: 0.8; }
.timeline h4 { margin: 0 0 12px; font-weight: 500; font-size: clamp(20px, 2.6vw, 28px); letter-spacing: -0.01em; }
.timeline p { margin: 0; color: var(--muted); max-width: 46ch; line-height: 1.6; }
/* Each step animates on its own arrival. Inside a step the label, heading and copy
   arrive a beat apart, and the drawing comes last and a little further, so the eye
   reads the words first. */
html.js .timeline .tl-text > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .timeline li.in .tl-text > * { opacity: 1; transform: none; }
html.js .timeline li.in .tl-text > *:nth-child(2) { transition-delay: .08s; }
html.js .timeline li.in .tl-text > *:nth-child(3) { transition-delay: .16s; }

html.js .timeline .tl-art { opacity: 0; transform: translateY(22px) scale(0.94); transition: opacity .85s var(--ease) .18s, transform .85s var(--ease) .18s; }
html.js .timeline li.in .tl-art { opacity: 1; transform: none; }

/* the red accents inside each drawing land last, once its outline has settled */
html.js .timeline .tl-art .mk,
html.js .timeline .tl-art .wave,
html.js .timeline .tl-art .pin { opacity: 0; transition: opacity .6s var(--ease) .5s; }
html.js .timeline li.in .tl-art .mk,
html.js .timeline li.in .tl-art .wave,
html.js .timeline li.in .tl-art .pin { opacity: 1; }

.mail-big {
  display: inline-block;
  font-family: var(--font-wordmark);
  font-size: clamp(20px, 3vw, 36px);
  border-bottom: 1px solid var(--muted);
  padding-bottom: 4px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.mail-big:hover { color: var(--accent); border-color: var(--accent); }
.site-footer {
  display: flex; justify-content: space-between; padding: 34px var(--pad);
  border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);
  position: relative; z-index: 2; background: var(--bg);
}

@media (max-width: 640px) {
  .hero { height: 165vh; }
  .hero-cta { right: 50%; transform: translateX(50%); bottom: 30px; padding: 16px 28px; font-size: 12px; }
  /* Phone crops sit tighter on the bright middle of each shot, so the scrim works harder. */
  .hero-shade {
    background:
      radial-gradient(96% 42% at 50% 48%, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.42) 50%, rgba(0,0,0,0.06) 78%),
      linear-gradient(to top, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.26) 42%, rgba(0,0,0,0.52) 100%);
  }
  .rows li { flex-direction: column; gap: 6px; align-items: flex-start; }
  .steps li { flex-direction: row; gap: 12px; }
  .formats { grid-template-columns: 1fr 1fr; }
  .fmt-wide { grid-column: 1 / -1; }
  .bar { height: 52px; }
  .seg { padding-left: 12px; justify-content: center; }
  .seg em { display: none; }
  .seg b { font-size: 16px; }
  .split-legend { display: flex; }
  .stat { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100vh; }
  .hero-frame { clip-path: none !important; }
  .hero-video { transform: none !important; }
  html.js .line > span, html.js .fade, html.js .rows li,
  html.js .stat, html.js .fmt, html.js .timeline .tl-text > *, html.js .timeline .tl-art,
  html.js .timeline .tl-art * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .seg { width: var(--w) !important; transition: none !important; }
  html.js .timeline::after { transform: scaleY(1) !important; transition: none !important; }
  html.js .timeline li::before, html.js .timeline li::after { transform: none !important; transition: none !important; }
  .site-header { transition: none; }
}

/* ---------- the week as a sequence ----------
   Clips lay down across seven days, then the playhead runs the length of it. CSS only:
   no library, no rAF loop, and it sits still for reduced-motion. */
.stats { display: grid; grid-template-columns: minmax(220px, 0.8fr) 1.3fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.seq { width: 100%; height: auto; overflow: visible; }
.seq text { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; fill: var(--muted); }
.seq-ruler line { stroke: var(--line); stroke-width: 1; }
.seq-ticks line { stroke: #cfcabd; }
.seq-rails rect { fill: #f1eee6; stroke: var(--line); stroke-width: 1; }
.seq-clips .c { transform-origin: left center; }
.seq-clips .t1 { fill: #cfc9ba; stroke: #b4ad9b; stroke-width: 1; }
.seq-clips .t2 { fill: #ddd8cb; stroke: #c5beac; stroke-width: 1; }
.seq-clips .a1 { fill: #eae7dc; stroke: #d3ccbc; stroke-width: 1; }
.seq-wave path { fill: none; stroke: var(--accent); stroke-opacity: 0.8; stroke-width: 1.1; }
.seq-head line { stroke: var(--mark); stroke-width: 1.5; }
.seq-head path { fill: var(--mark); }

/* Nothing animates until the block is in view, and with JS off it is simply drawn. */
html.js .seq-clips .c, html.js .seq-wave { opacity: 0; transform: scaleX(0.02); transform-origin: left center; }
html.js .stats.in .seq-clips .c,
html.js .stats.in .seq-wave {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease) var(--d), transform .75s var(--ease) var(--d);
}
html.js .seq-head { opacity: 0; }
html.js .stats.in .seq-head {
  opacity: 1;
  animation: seq-sweep 7s linear 1.1s infinite;
}
@keyframes seq-sweep {
  0%   { transform: translateX(40px); opacity: 0; }
  4%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(600px); opacity: 0; }
}

@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr; gap: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .seq-clips .c, html.js .seq-wave { opacity: 1 !important; transform: none !important; }
  html.js .seq-head { opacity: 1 !important; animation: none !important; transform: translateX(320px); }
}

/* ---------- enquiry form ---------- */
.enquiry { margin-top: clamp(30px, 4vw, 44px); max-width: 620px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; margin-bottom: 16px; }
.field > .mono { display: block; margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; padding: 13px 14px;
  background: #ffffff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 16px;   /* 16px or iOS zooms the page on focus */
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: #fffdf8;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.f-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.enquiry button {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px 30px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--ink); color: #faf9f6;
  transition: background .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.enquiry button:hover { background: var(--accent); }
.enquiry button[disabled] { opacity: .5; cursor: default; }
.form-note { margin: 0; }
.form-note a { border-bottom: 1px solid var(--line); }
.form-note a:hover { color: var(--accent); }
.form-note.bad { color: #c0432a; }
.form-note.good { color: var(--accent); }
.enquiry.sent .f-row, .enquiry.sent .field, .enquiry.sent button { display: none; }

@media (max-width: 640px) { .f-row { grid-template-columns: 1fr; gap: 0; } }

/* ---------- step illustrations ----------
   Two stroke weights, not one: a hairline construction layer under a weighted primary
   edge, the way a technical drawing is inked. The edges take a metal gradient rather
   than a flat tint, which is what stops them reading as stock icons. Decorative, so
   they are aria-hidden and the copy carries the meaning. */
.timeline li { display: grid; grid-template-columns: minmax(0, auto) 132px; gap: clamp(32px, 4.5vw, 68px); align-items: center; justify-content: start; }
.tl-text { max-width: 48ch; }
.tl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tl-art { width: 100%; height: auto; overflow: visible; }
.tl-art * { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* the inked outline */
.tl-art .edge { stroke: url(#metal); stroke-width: 1.5; }
/* construction lines: present, barely */
.tl-art .hair { stroke: url(#metalDim); stroke-width: 0.7; stroke-opacity: 0.9; }
.tl-art .rule { stroke: url(#metalDim); stroke-width: 1; stroke-opacity: 0.88; }
.tl-art .tick { stroke: url(#metalDim); stroke-width: 0.8; stroke-opacity: 0.8; }
.tl-art .perf { stroke: url(#metalDim); stroke-width: 0.7; stroke-opacity: 0.85; }
.tl-art .play { stroke: url(#metal); stroke-width: 1.2; }

/* the one warm accent per drawing, never more */
.tl-art .mk   { stroke: var(--mark); stroke-width: 1.5; stroke-opacity: 0.9; }
.tl-art .wave { stroke: var(--mark); stroke-width: 1.3; stroke-opacity: 0.78; }
.tl-art .pin  { fill: var(--mark); fill-opacity: 0.9; stroke: none; }

@media (max-width: 760px) {
  .timeline li { grid-template-columns: 1fr; gap: 16px; }
  .tl-art { width: 116px; }
}
.field textarea::placeholder { color: #9a978f; }

/* ---------- packages: three lists, one band ---------- */
.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
.pk { padding: 26px 22px 18px; border-top: 1px solid var(--line); }
.pk.feat { background: rgba(240, 67, 27, 0.05); border-top-color: var(--mark); }
.pk .t-name, .pk .t-price, .pk .t-tag.q { color: var(--muted); }
.t-tag { display: block; }
.pk .t-tag { margin-top: 8px; }
.pk-lead { margin: 16px 0 10px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.pk ul { list-style: none; margin: 0; padding: 0; }
.pk li { position: relative; padding: 11px 0 11px 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--muted); }
.pk.feat li { color: var(--ink); }
.pk li::before { content: ""; position: absolute; left: 0; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: #c3bfb4; }
.pk.feat li::before { background: var(--mark); }
.pk-band { margin-top: 28px; padding: 20px 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pk-band > .mono { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.pk-band p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 72ch; }
@media (max-width: 820px) { .pk-grid { grid-template-columns: 1fr; gap: 12px; } .pk { padding: 22px 18px 14px; } }

/* ---------- tiers: what each package includes ----------
   A matrix, not three cards: the point is the difference between columns, and cards
   hide that. The middle column is tinted because it is the one most people buy, and
   the table scrolls sideways on a phone with the feature column pinned, so the row
   label never leaves the screen. */
.tiers-intro { margin: 18px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.55; color: var(--ink); }
.tiers-wrap { margin-top: clamp(28px, 4vw, 44px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tiers-t { width: 100%; border-collapse: collapse; min-width: 660px; }
.tiers-t th, .tiers-t td { text-align: left; vertical-align: middle; }

.tiers-t thead th { padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.tiers-t thead th.tier { padding-left: 18px; padding-right: 18px; }
.t-name { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.t-price { display: block; white-space: nowrap; font-family: var(--font-mono); font-size: 20px; margin-top: 8px; color: var(--ink); }
.t-tag.q { color: var(--muted); }
.t-tag { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mark); margin-top: 8px; }

/* the column people buy */
.tiers-t .feat { background: rgba(240, 67, 27, 0.05); }
.tiers-t thead th.feat { border-bottom-color: var(--mark); }

.tiers-t tbody td, .tiers-t tbody th { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.tiers-t tbody th { padding-left: 0; font-weight: 400; color: var(--ink); font-size: 16px; position: sticky; left: 0; background: var(--bg); }
.tiers-t tbody th small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }

.grp th { padding-top: 34px !important; padding-bottom: 10px !important; border-bottom: 0 !important;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent) !important; }
.grp td { border-bottom: 0 !important; }
.tiers-t tr:first-child th, .tiers-t tr:first-child td { padding-top: 18px; }

.yes { display: inline-block; width: 15px; height: 15px; }
.yes svg { display: block; width: 100%; height: 100%; }
.yes path { stroke: var(--ink); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.feat .yes path { stroke: var(--mark); }
.no { color: #c3bfb4; font-size: 15px; }
.val { font-size: 14px; color: var(--muted); line-height: 1.4; display: block; }
.feat .val { color: var(--ink); }

.tiers-foot { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.tiers-note { margin: 14px 0 0; color: var(--muted); font-size: 15px; }

.addons { margin-top: clamp(34px, 4.5vw, 52px) !important; }
.addons-head { margin: 0 0 4px; }
.addons li > span:first-child small { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ---------- the math: what a year on air actually costs, and what saving buys ---------- */
.costs { margin-top: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 48px); }
.cost { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.c-k { color: var(--muted); }
.c-v { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.c-n { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 34ch; }
.costs-body { max-width: 56ch; color: var(--muted); font-size: 18px; margin: clamp(32px, 4vw, 48px) 0 0; }
.roi {
  margin-top: clamp(26px, 3.5vw, 40px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.roi-k { display: block; margin-bottom: 12px; }
.roi-v { margin: 0; font-size: clamp(19px, 2.2vw, 27px); line-height: 1.32; letter-spacing: -0.015em; }
.roi-v b { font-weight: 800; color: var(--mark); }
.roi-n { display: block; margin-top: 13px; font-size: 13px; color: var(--muted); }
@media (min-width: 860px) { .costs { grid-template-columns: repeat(3, 1fr); } }

/* ---------- docked CTA (phones) ----------
   Small, thumb-reachable, bottom right. Shown only after the hero has scrolled
   past and hidden again while the contact form is on screen. Desktop keeps the
   header and the hero button, so it never appears there. */
.dock-cta {
  position: fixed;
  right: var(--pad);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: none;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #15161a;
  background: #f2f0ea;
  padding: 14px 20px;
  min-height: 46px; /* comfortable tap target */
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.dock-cta::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mark);
  flex: 0 0 auto;
}
.dock-cta.in { opacity: 1; transform: none; }
.dock-cta:active { transform: translateY(1px); background: var(--mark); color: #fff; }
.dock-cta:active::before { background: #fff; }

@media (max-width: 767px) {
  .dock-cta { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .dock-cta { transition: opacity .2s linear; transform: none; }
  .dock-cta.in { transform: none; }
}

/* ---------- legal and accessibility additions (2026-10-20) ---------- */
/* Keyboard users need to see where they are. Mouse clicks do not trigger this. */
a:focus-visible, button:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; border-radius: 6px; }

/* Pause control for the looping hero video (WCAG 2.2.2). Bottom left, clear of the CTA. */
.hero-pause {
  position: absolute; left: var(--pad); bottom: 38px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(242,240,234,0.45); background: rgba(10,11,14,0.28);
  display: grid; place-items: center; padding: 0;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.hero-pause::before {           /* two bars = playing, press to pause */
  content: ""; width: 10px; height: 12px;
  border-left: 3px solid #f2f0ea; border-right: 3px solid #f2f0ea; box-sizing: border-box;
}
.hero-pause[aria-pressed="true"]::before {   /* triangle = paused, press to play */
  width: 0; height: 0; border-right: 0;
  border-left: 11px solid #f2f0ea; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent;
  margin-left: 3px;
}
.hero-pause:hover { background: var(--mark); border-color: var(--mark); }
@media (max-width: 640px) { .hero-pause { bottom: 34px; width: 36px; height: 36px; } }

.costs-fine { margin: 14px 0 0; max-width: 60ch; text-transform: none; letter-spacing: 0.02em; }
.form-privacy { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.form-privacy a, .legal a { border-bottom: 1px solid var(--line); }
.form-privacy a:hover, .legal a:hover { color: var(--accent); }

.legal-links { display: flex; gap: 20px; }
.legal-links a:hover { color: var(--ink); }
@media (max-width: 640px) { .site-footer { flex-direction: column; gap: 10px; } }

/* Privacy and terms pages: plain reading column on paper. */
.legal-page .site-header { position: static; padding: 22px var(--pad) 0; color: var(--ink); text-shadow: none; }
.legal { max-width: 720px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--pad) 80px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 12px 0 28px; }
.legal h2 { font-size: 20px; font-weight: 600; margin: 40px 0 10px; }
.legal p, .legal li { color: #3a3833; line-height: 1.65; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }

/* Reel page: spec disclosure under the title, legal links under the buttons. */
.reel-note { margin: 6px 0 0; font-size: 13px; color: #8f8c85; }
.reel-legal { display: flex; gap: 18px; justify-content: center; margin: 4px 0 0; font-size: 12px; }
.reel-legal a { color: #8f8c85; }
.reel-legal a:hover { color: #f2f0ea; }