/* Clearcoat Digital
   Layout: a paint panel cross-section. Sections stack like coats of paint. */
:root {
  --bg: #EDF0F3;          /* primer grey, cool bias */
  --surface: #F8FAFB;
  --ink: #11161C;
  --muted: #56616D;
  --line: #CBD2DA;
  --accent: #0B6A86;      /* deep lacquer teal */
  --accent-ink: #FFFFFF;
  --tape: #E9C84A;        /* masking tape */
  --tape-ink: #2A2306;
  --gloss-a: #0E2A35;
  --gloss-b: #1B5468;
  --good: #1E7A4C;
  --bad: #B3362B;
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 4vw, 2.6rem);
  --step-4: clamp(2.5rem, 7vw, 4.6rem);
  --radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1419; --surface: #161D25; --ink: #E5EAF0; --muted: #94A1AE; --line: #2A3540;
    --accent: #4FB4D0; --accent-ink: #06222B; --tape: #D9B93F; --tape-ink: #241D04;
    --gloss-a: #071820; --gloss-b: #134457; --good: #5CC98F; --bad: #F08A7E;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6;
  padding-inline: 20px;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { max-width: 1120px; margin-inline: auto; }
h1, h2, h3 { font-family: var(--font-display); font-stretch: 125%; line-height: 1.05; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-4); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: var(--step-1); font-weight: 700; font-stretch: 112%; }
p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Masking-tape label */
.tape {
  display: inline-block; background: var(--tape); color: var(--tape-ink);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25em 0.8em; transform: rotate(-1.5deg);
  clip-path: polygon(0 8%, 3% 0, 97% 4%, 100% 0, 99% 92%, 96% 100%, 4% 96%, 0 100%);
}

/* Nav */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  margin-inline: -20px; padding-inline: 20px;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.logo { font-family: var(--font-display); font-stretch: 105%; font-weight: 600; font-size: 1.3rem; line-height: 1; text-decoration: none; letter-spacing: -0.035em; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.logo-mark { width: 30px; height: 30px; flex: none; }
.logo-bead { fill: var(--accent); }
.logo-text { display: inline-flex; gap: 0.28em; }
.logo-digital { font-weight: 300; color: var(--accent); }
.nav-links { display: flex; gap: 24px; align-items: center; font-size: 0.95rem; }
.nav-links a { text-decoration: none; color: var(--muted); }
.nav-links a:hover { color: var(--ink); }
.nav-links a.btn { color: var(--accent-ink); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 600 0.95rem var(--font-body);
  padding: 0.75em 1.2em; border-radius: var(--radius); text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }

/* Hero */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding-block: 72px 64px; }
.hero > * { min-width: 0; }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-copy .lede { font-size: var(--step-1); color: var(--muted); max-width: 34ch; line-height: 1.5; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-proof { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; }
.hero-proof b { color: var(--ink); font-weight: 500; }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; padding-block: 48px; } }

/* Glossy panel with mock search result */
.panel {
  position: relative; overflow: hidden; border-radius: 14px;
  background: linear-gradient(155deg, var(--gloss-b), var(--gloss-a) 70%);
  padding: 28px; color: #E8F1F5;
  box-shadow: 0 30px 60px -30px rgba(5, 25, 35, 0.6);
}
.panel::after {
  content: ""; position: absolute; inset: -40% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.16) 48%, rgba(255,255,255,0.04) 52%, transparent 58%);
  transform: translateX(-60%); animation: sweep 5.5s ease-in-out 0.6s infinite; pointer-events: none;
}
@keyframes sweep { 0% { transform: translateX(-60%); } 45%, 100% { transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) { .panel::after { animation: none; opacity: 0; } }
.panel-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9FC3D1; display: flex; justify-content: space-between; gap: 12px; }
.search { margin-top: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 10px 16px; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; }
.search svg { flex: none; }
.results { margin-top: 16px; display: grid; gap: 10px; }
.result { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 8px; background: rgba(255,255,255,0.05); }
.result.top { background: rgba(255,255,255,0.96); color: #0E1A20; }
.result .pos { font-family: var(--font-mono); font-size: 0.85rem; opacity: 0.7; }
.result .name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.result .meta { font-size: 0.8rem; opacity: 0.75; }
.result .stars { font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; }
.result.top .stars { color: #8A6A00; }
.result:not(.top) { opacity: 0.6; }
.readings { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.reading { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 8px; }
.reading .v { font-family: var(--font-mono); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.reading .k { font-size: 0.75rem; color: #9FC3D1; }

/* Sections */
section { padding-block: 72px; border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; justify-items: start; max-width: 62ch; margin-bottom: 40px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }

/* Paint layer cross-section */
.layers { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
@media (max-width: 820px) { .layers { grid-template-columns: 1fr; } }
.stack { display: grid; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 0 var(--line); }
.coat { display: flex; align-items: center; justify-content: space-between; padding-inline: 16px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; transition: transform 0.2s ease; }
.coat[data-um="45"] { height: 108px; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.15)), color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--ink); }
.coat[data-um="15"] { height: 46px; background: var(--accent); color: var(--accent-ink); }
.coat[data-um="35"] { height: 86px; background: color-mix(in srgb, var(--muted) 45%, var(--bg)); color: var(--ink); }
.coat[data-um="20"] { height: 56px; background: color-mix(in srgb, var(--ink) 78%, var(--bg)); color: var(--bg); }
.substrate { height: 30px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 60%, var(--bg)) 0 2px, color-mix(in srgb, var(--ink) 50%, var(--bg)) 2px 6px); color: var(--bg); display: flex; align-items: center; padding-inline: 16px; font-family: var(--font-mono); font-size: 0.72rem; }
.coat.on { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .coat { transition: none; } }
.stack-total { margin-top: 12px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.layer-list { display: grid; list-style: none; margin: 0; padding: 0; }
.layer-list li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.layer-list li:first-child { border-top: 1px solid var(--line); }
.layer-list .um { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); padding-top: 4px; }
.layer-list h3 { margin-bottom: 4px; }
.layer-list p { color: var(--muted); font-size: 0.97rem; }

/* Services */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.service { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.services .service:nth-child(even) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--line); }
@media (max-width: 720px) {
  .services { grid-template-columns: 1fr; }
  .service, .services .service:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
}
.service .for { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.service p { color: var(--muted); }
.service ul { margin: 4px 0 0; padding-left: 1.1em; font-size: 0.95rem; display: grid; gap: 4px; }

/* Case study */
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 820px) { .case { grid-template-columns: 1fr; } }
.case-copy { display: grid; gap: 16px; justify-items: start; }
.case-copy p { color: var(--muted); }
.case-copy blockquote { margin: 8px 0 0; padding-left: 18px; border-left: 3px solid var(--tape); font-size: 1.1rem; }
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 16px; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sheet-scroll { overflow-x: auto; }
.sheet table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sheet th, .sheet td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.93rem; }
.sheet th { font-weight: 500; color: var(--muted); font-size: 0.78rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.sheet .num { font-family: var(--font-mono); text-align: right; padding-left: 12px; }
.sheet td.up { color: var(--good); }
.spark { width: 100%; height: 70px; display: block; }

/* Process */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }
.process li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ink); counter-increment: step; }
.process li::before { content: "Stage " counter(step); font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.process .detail-term { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 1.5rem; }
.process p { color: var(--muted); font-size: 0.97rem; }
.process .web { font-weight: 600; color: var(--ink); }

/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 880px) { .pricing { grid-template-columns: 1fr; } }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 14px; background: var(--surface); }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan .price { font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 2.2rem; line-height: 1; }
.plan .price small { font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; color: var(--muted); font-stretch: 100%; }
.plan p { color: var(--muted); font-size: 0.95rem; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 0.95rem; align-content: start; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.plan li::before { content: ""; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--accent) 55%); }
.plan .btn { width: 100%; }
.plan .pay-note { font-size: 0.82rem; color: var(--muted); text-align: center; }
.bundle {
  margin-top: 20px; border: 1px dashed var(--accent); border-radius: var(--radius); padding: 22px 26px;
  display: flex; gap: 20px 32px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.bundle > div { display: grid; gap: 6px; min-width: 0; flex: 1 1 320px; }
.bundle p { color: var(--muted); font-size: 0.95rem; }
.checkout-note { margin-top: 18px; font-size: 0.85rem; color: var(--muted); display: flex; gap: 6px 18px; flex-wrap: wrap; }
.checkout-note a { color: var(--ink); }

/* Forms */
.inspect { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
@media (max-width: 820px) { .inspect { grid-template-columns: 1fr; } }
.inspect-copy { display: grid; gap: 16px; justify-items: start; }
.inspect-copy p { color: var(--muted); }
.inspect-copy ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
form.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.85rem; font-weight: 600; }
.field .hint { font-size: 0.8rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.65em 0.8em; width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }
.form-legal { font-size: 0.8rem; color: var(--muted); }

/* Simple pages: welcome, thanks, legal, 404 */
.page { padding-block: 64px 80px; display: grid; gap: 28px; max-width: 760px; }
.page .lede { font-size: var(--step-1); color: var(--muted); line-height: 1.5; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--line); counter-increment: s; }
.steps li:first-child { border-top: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-mono); color: var(--accent); padding-top: 2px; }
.steps p { color: var(--muted); }
.legal { display: grid; gap: 14px; max-width: 70ch; }
.legal h2 { font-size: var(--step-2); margin-top: 18px; }
.legal p, .legal li { color: var(--ink); }
.legal ul, .legal ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.draft-banner { border: 1px solid var(--bad); color: var(--bad); border-radius: var(--radius); padding: 12px 16px; font-size: 0.9rem; }

/* Footer */
footer { border-top: 1px solid var(--line); padding-block: 40px 56px; display: grid; gap: 18px; font-size: 0.88rem; color: var(--muted); }
footer .top { display: flex; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; align-items: center; }
footer .links { display: flex; gap: 8px 20px; flex-wrap: wrap; }
footer .links a { color: var(--muted); }
footer .links a:hover { color: var(--ink); }
footer .legal-line { font-size: 0.8rem; max-width: 70ch; }
.chip { font-family: var(--font-mono); font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--muted); color: var(--muted); text-transform: none; letter-spacing: 0; }
.page > .tape { justify-self: start; }

/* Client work page */
.work-intro { padding-block: 64px 40px; display: grid; gap: 18px; justify-items: start; max-width: 62ch; }
.work-intro .lede { font-size: var(--step-1); color: var(--muted); line-height: 1.5; }
.client { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: start; padding-block: 56px; border-top: 1px solid var(--line); }
.client:nth-of-type(even) .client-shot { order: 2; }
@media (max-width: 860px) { .client { grid-template-columns: 1fr; } .client:nth-of-type(even) .client-shot { order: 0; } }
.client-shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 24px 48px -32px rgba(5, 25, 35, 0.45); }
.client-shot .bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.client-shot .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.client-shot .bar span { margin-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-shot img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }
.client-body { display: grid; gap: 18px; align-content: start; min-width: 0; }
.client-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.quote { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: var(--step-2); line-height: 1.2; text-wrap: balance; }
.quote-by { font-size: 0.9rem; color: var(--muted); }
.quote-pending { border: 1px dashed var(--bad); color: var(--bad); border-radius: var(--radius); padding: 10px 14px; font-size: 0.85rem; }
.built { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.built li { font-size: 0.82rem; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.early { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.early-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.early ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.early li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; align-items: baseline; font-size: 0.95rem; }
.early .fig { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent); }
.scores { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.scores b { color: var(--ink); font-weight: 500; }
.work-cta { padding-block: 64px 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.work-cta > div { display: grid; gap: 8px; max-width: 52ch; }
.work-cta p { color: var(--muted); }

/* Homepage testimonial band */
.proof { padding-block: 56px; }
.proof figure { margin: 0; display: grid; gap: 18px; max-width: 46rem; padding-left: 24px; border-left: 4px solid var(--tape); }
.proof .quote { font-size: clamp(1.4rem, 3vw, 2rem); }
.proof figcaption { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; font-size: 0.95rem; color: var(--muted); }
.proof figcaption b { color: var(--ink); font-weight: 600; }
.proof figcaption a { color: var(--accent); font-weight: 600; text-decoration: none; }
.proof figcaption a:hover { text-decoration: underline; }

/* ================================================================
   Polish & motion layer
   ================================================================ */

/* Skip link */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--radius); text-decoration: none; font-weight: 600; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }

/* Header: shadow once scrolled */
.nav { transition: box-shadow 0.25s ease, background-color 0.25s ease; }
.nav.scrolled { box-shadow: 0 8px 24px -18px rgba(5, 25, 35, 0.5); }

/* Mobile menu */
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: var(--radius); align-items: center; justify-content: center; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
.menu-open .menu-icon { background: transparent; }
.menu-open .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; }
  .nav .wrap { position: relative; }
  .nav-links {
    position: absolute; top: 100%; left: -20px; right: -20px; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 20px 20px;
    box-shadow: 0 24px 40px -28px rgba(5, 25, 35, 0.6);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .nav-links a:not(.btn) { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; color: var(--ink); }
  .nav-links .btn { margin-top: 14px; }
  .menu-open .nav-links { visibility: visible; opacity: 1; transform: none; }
}

/* Logo: the bead settles on hover */
.logo-bead { transition: transform 0.5s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 50px 32px; transform-box: view-box; }
.logo:hover .logo-bead { transform: translateY(2px) scale(1.18, 0.86); }

/* Buttons: a light sweep across the paint on hover */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.35) 48%, rgba(255,255,255,0.08) 55%, transparent 65%);
  transform: translateX(-120%); transition: transform 0.6s ease;
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px); }
.btn:not(.ghost):hover { box-shadow: 0 10px 24px -14px var(--accent); }

/* Hero headline: lines rise into place */
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-title .line > span { display: inline-block; }
.motion .hero-title .line > span { animation: rise 0.9s cubic-bezier(.2, .8, .2, 1) backwards; }
.motion .hero-title .line:nth-child(2) > span { animation-delay: 0.12s; }
.motion .hero-copy > :not(h1) { animation: fade-up 0.8s ease 0.35s backwards; }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } }

/* Hero panel: tilts toward the pointer, lamp highlight follows it */
.panel { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.4s ease; will-change: transform; }
.panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.14), transparent 60%);
}
.panel.lit::before { opacity: 1; }
.motion .panel { animation: panel-in 1s cubic-bezier(.2, .8, .2, 1) 0.15s backwards; }
@keyframes panel-in { from { opacity: 0; transform: perspective(1000px) rotateX(8deg) translateY(24px); } }

/* Ranking: your business climbs from 3rd to 1st */
.results { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: repeat(3, auto); row-gap: 10px; column-gap: 10px; }
.ranks, .rows { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; margin: 0; padding: 0; list-style: none; }
.ranks li { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.85rem; color: #9FC3D1; }
.result { grid-template-columns: minmax(0, 1fr) auto; position: relative; }
.motion .rows .top { animation: climb 1.3s cubic-bezier(.65, 0, .25, 1) 1.1s backwards, land 1.2s ease 2.4s; z-index: 2; }
.motion .rows .r2, .motion .rows .r3 { animation: drop 1.3s cubic-bezier(.65, 0, .25, 1) 1.1s backwards; }
@keyframes climb { from { transform: translateY(calc(200% + 20px)); } }
@keyframes drop { from { transform: translateY(calc(-100% - 10px)); } }
@keyframes land { 0% { box-shadow: 0 0 0 0 rgba(79, 180, 208, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(79, 180, 208, 0); } }

/* Scroll reveals (only when JS is running, so the page is always readable) */
.motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease var(--d, 0ms), transform 0.7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.motion .reveal.in { opacity: 1; transform: none; }

/* Paint layers are sprayed on, coat by coat, bottom first */
.motion .coat, .motion .substrate { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s cubic-bezier(.65, 0, .35, 1), transform 0.2s ease; }
.motion .substrate { transition-delay: 0s; }
.motion .coat[data-layer="ecoat"] { transition-delay: 0.25s, 0s; }
.motion .coat[data-layer="primer"] { transition-delay: 0.5s, 0s; }
.motion .coat[data-layer="base"] { transition-delay: 0.75s, 0s; }
.motion .coat[data-layer="clear"] { transition-delay: 1s, 0s; }
.coated .coat, .coated .substrate { clip-path: inset(0 0 0 0); }
.coat[data-um="45"] { position: relative; overflow: hidden; }
.coated .coat[data-um="45"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.7) 45%, transparent 60%);
  animation: gloss 1.4s ease 1.7s both;
}
@keyframes gloss { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Service and plan cards lift slightly */
.plan, .client-shot { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -30px rgba(5, 25, 35, 0.55); }
.client-shot:hover { transform: translateY(-4px); }
.client-shot img { transition: transform 0.6s ease; }
.client-shot:hover img { transform: scale(1.025); }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
@media (max-width: 820px) { .faq { grid-template-columns: 1fr; gap: 8px; } }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 1.12rem; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq-item p { color: var(--muted); padding: 0 40px 22px 0; max-width: 62ch; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* Selection colour */
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .panel { transform: none !important; }
}

/* ================================================================
   Finish layer: depth, rhythm and quieter motion
   ================================================================ */
html, body { overflow-x: clip; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Scroll progress: a thin gloss line under the header */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), #9FD3E2 60%, var(--accent));
  transform: scaleX(var(--sp, 0)); transform-origin: left; pointer-events: none;
}

/* Hero: soft showroom lighting and fine metallic grain behind the copy */
.hero, .glow-hero { position: relative; isolation: isolate; }
.hero::before, .glow-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -140px; bottom: -60px; left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    radial-gradient(48% 60% at 78% 38%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(30% 40% at 12% 10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
}
.hero::after, .glow-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -140px; bottom: -60px; left: 50%; width: 100vw; transform: translateX(-50%); opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.55 0 0 0 0 0.6 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* One gloss pass across the key word */
.gloss {
  background: linear-gradient(100deg, var(--ink) 40%, color-mix(in srgb, var(--accent) 55%, #ffffff) 50%, var(--ink) 60%) 0 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-position: 100% 0;
}
.motion .gloss { animation: gloss-text 1.6s ease 1.2s both; }
@keyframes gloss-text { from { background-position: 100% 0; } 50% { background-position: 50% 0; } to { background-position: 0 0; } }

/* Showroom band: the case study sits on a dark, lit floor */
.showroom {
  --ink: #E8EDF2; --muted: #98A6B2; --line: #26313B; --surface: #131B23; --accent: #4FB4D0; --good: #5CC98F;
  --show-bg: #0B1015;
  color: var(--ink); background: var(--show-bg); border-top: 0;
  box-shadow: 0 0 0 100vmax var(--show-bg); clip-path: inset(0 -100vmax);
  position: relative; isolation: isolate; padding-block: 96px;
}
.showroom::before {
  content: ""; position: absolute; inset: 0 -40%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 55% at 50% 0%, rgba(79, 180, 208, 0.16), transparent 70%),
    linear-gradient(to top, rgba(79, 180, 208, 0.06), transparent 35%);
}
.showroom .tape { box-shadow: 0 6px 18px -10px rgba(233, 200, 74, 0.6); }
.showroom .sheet { background: linear-gradient(180deg, #151E27, #10171E); border-color: #26313B; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255,255,255,0.06); }
.showroom .btn.ghost { box-shadow: inset 0 0 0 1px #33414D; }
.showroom + section, .showroom + .client { border-top: 0; }

/* Timeline draws itself as you scroll through the process */
.process { position: relative; }
.process li { border-top-color: var(--line); }
.process::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  background: var(--accent); transform: scaleX(var(--p, 1)); transform-origin: left;
}
@media (max-width: 900px) { .process::before { display: none; } .process li { border-top-color: var(--accent); } }

/* Featured plan: a slow metallic sheen around the edge */
.plan.featured { position: relative; border-color: transparent; box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--accent) 70%, transparent); }
.plan.featured::before, .sheen::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), var(--accent), color-mix(in srgb, var(--accent) 25%, transparent) 30%, #CDEBF3 50%, color-mix(in srgb, var(--accent) 25%, transparent) 70%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.motion .plan.featured::before, .motion .sheen::before { animation: sheen 9s linear infinite; }
@keyframes sheen { to { --ang: 360deg; } }
.plan-flag {
  position: absolute; top: -12px; right: 20px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px;
}

/* Footer: an oversized wordmark that fades into the page */
footer { overflow: hidden; }
.footer-mark {
  font-family: var(--font-display); font-stretch: 105%; font-weight: 700; letter-spacing: -0.06em; line-height: 0.8;
  font-size: clamp(4.5rem, 19vw, 15rem); margin-top: 24px; margin-bottom: -0.12em; user-select: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 14%, transparent), transparent 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Gentle parallax uses the independent translate property, so it never fights other transforms */
[data-parallax] { will-change: translate; }
.client-shot img[data-parallax] { scale: 1.06; }

/* Work and partner pages */
.glow-hero::before, .glow-hero::after { top: -120px; bottom: auto; height: 720px; }
.sheen { position: relative; border-color: transparent; box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--accent) 70%, transparent); }
.client.showroom { padding-block: 88px; }
.client.showroom .quote { color: var(--ink); }
.cta-band {
  margin-block: 48px 72px; padding: 40px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), var(--surface);
}
@media (max-width: 560px) { .cta-band { padding: 28px 22px; } }
.partner-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding-block: 64px; }
.partner-cta > div { display: grid; gap: 8px; max-width: 46ch; }
.partner-cta p { color: var(--muted); }
.partner-cta .btn { font-size: 1rem; padding: 0.9em 1.4em; }

/* Steps: a vertical line draws through the numbers as you read */
.steps { position: relative; }
.steps::before {
  content: ""; position: absolute; left: 0.75rem; top: 18px; bottom: 18px; width: 2px; background: var(--accent);
  transform: scaleY(var(--p, 1)); transform-origin: top; opacity: 0.8;
}
.steps li::before { position: relative; z-index: 1; justify-self: start; background: var(--bg); padding-block: 2px 6px; }
.steps li { border-color: transparent; }

/* Work page: how SEO results build */
.seo-build { padding-block: 24px 72px; border-top: 0; }
.seo-stages li { position: relative; }
.seo-stages li.now { border-top-color: var(--accent); }
.seo-stages .here { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.seo-stages .here a {
  font-size: 0.8rem; font-weight: 600; text-decoration: none; padding: 4px 10px 4px 22px; border-radius: 999px; position: relative;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--ink);
}
.seo-stages .here a::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent);
}
.motion .seo-stages .here a::before { animation: here-pulse 2.4s ease-out infinite; }
@keyframes here-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.seo-stages .here a:hover { border-color: var(--accent); }
.seo-note { margin-top: 28px; font-size: 0.85rem; color: var(--muted); max-width: 70ch; }
.early-head span + span { color: var(--accent); }
.early-note { font-size: 0.92rem; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 12px; }
.sheet-foot { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.sheet-foot a { color: var(--ink); text-decoration: none; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; }
.sheet-foot a:hover { color: var(--accent); }
.partner-proof { gap: 18px; }
.partner-proof .proof-lede { color: var(--muted); font-size: 0.97rem; max-width: 62ch; }
.partner-proof .proof-lede strong { color: var(--ink); }
.partner-proof .early { border-top: 0; padding-top: 0; }
.partner-proof .early li { grid-template-columns: 6.5rem 1fr; }
/* Welcome page: booking card */
.booking { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; margin-block: 8px; }
.booking > div:first-child { display: grid; gap: 10px; justify-items: start; max-width: 40ch; }
.booking p { color: var(--muted); }
.booking-actions { display: grid; gap: 10px; justify-items: start; }
.booking-actions .btn { font-size: 1rem; padding: 0.9em 1.4em; }
.booking-alt { font-size: 0.82rem; color: var(--muted); }
.form-step { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--step-2); margin-top: 16px; }