/* ---------- Self-hosted fonts ----------
   Previously loaded from fonts.googleapis.com, which cost two extra
   DNS+TCP+TLS handshakes on a render-blocking path AND sent every visitor's
   IP to Google before any consent was given. All three families are
   OFL-licensed, so they are served first-party. Variable fonts, so one file
   per family covers every weight in use. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/inter-tight.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700 800;font-display:swap;
  src:url('fonts/plus-jakarta-sans.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('fonts/jetbrains-mono.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ==========================================================================
   Digital Movement UK — "Instrument" design system
   Dark-first. Data as ornament. Mono as the utility layer.
   Shared by: / · /seo-services/ · /ai-search-optimisation/ · /crm/ · /ppc-agency/
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Ink scale — brand navy #0B1F3A extended into a full range */
  --ink-950:#050B15;
  --ink-900:#0B1F3A;
  --ink-800:#102A4C;
  --ink-700:#17395F;
  --ink-600:#22507F;

  /* Warm paper — keeps the cream identity for light sections */
  --paper:#FFF7EF;
  --paper-2:#FFFFFF;
  --paper-edge:#EBDFD1;

  /* Brand signal colours */
  --orange:#FB7900;
  --orange-600:#DE6A00;
  --orange-ink:#B35100;   /* orange for TEXT on light surfaces: 4.84:1 on paper */
  --pink:#F13C64;
  --amber:#F5C542;

  /* Text */
  --on-dark:#EAF1FA;
  --on-dark-mute:#94AAC7;
  --on-light:#0B1F3A;
  --on-light-mute:#596E88;

  /* The brand gradient — used for data, not decoration */
  --grad:linear-gradient(90deg,#F5C542 0%,#FB7900 46%,#F13C64 100%);

  /* Type */
  --display:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --body:'Inter Tight',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-h1:clamp(2.35rem,4.9vw,4.15rem);
  --fs-h2:clamp(1.8rem,3.3vw,2.85rem);
  --fs-h3:clamp(1.12rem,1.4vw,1.3rem);
  --fs-lede:clamp(1.04rem,1.45vw,1.24rem);
  --fs-body:1.0625rem;
  --fs-mono:.74rem;

  /* Space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Radii */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;

  /* Shadows — navy-tinted */
  --sh-1:0 1px 2px rgba(11,31,58,.06),0 4px 14px rgba(11,31,58,.07);
  --sh-2:0 2px 6px rgba(11,31,58,.08),0 18px 44px rgba(11,31,58,.13);
  --sh-dark:0 24px 70px rgba(0,0,0,.5);

  --wrap:1240px;
  --wrap-wide:1400px;
  --header-h:72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;scroll-padding-bottom:100px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  padding-top:var(--header-h);
  background:var(--ink-950);
  color:var(--on-dark);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.06}
h1{font-size:var(--fs-h1);letter-spacing:-.035em;line-height:.97;text-transform:uppercase;overflow-wrap:break-word}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.015em;line-height:1.25}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
  /* Two-tone halo: ink carries on paper/orange/green, paper carries on ink.
     Never below 7.36:1 against any surface on the site. */
  box-shadow:0 0 0 2px var(--ink-950), 0 0 0 9px var(--paper);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--orange);color:#2A1300;padding:12px 20px;
  font-family:var(--mono);font-size:var(--fs-mono);border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap-wide{width:min(100% - 40px,var(--wrap-wide));margin-inline:auto}
@media (max-width:640px){.wrap,.wrap-wide{width:min(100% - 32px,var(--wrap))}}

/* ---------- Scroll progress rail ---------- */
.rail{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:120;
  background:var(--grad);transform-origin:0 50%;transform:scaleX(0);
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){.rail{display:none}}

/* ---------- Header ---------- */
.site-header{
  /* position:fixed, not sticky: sticky + backdrop-filter is a known WebKit bug
     (Safari and Chrome-iOS both run on WKWebView) where the header detaches
     or vanishes mid-scroll on iOS. Fixed removes the header from flow, so
     body{padding-top:var(--header-h)} below replaces the space it used to
     reserve — total offset above hero/content is unchanged. */
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(5,11,21,.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand-logo{height:28px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  text-decoration:none;color:var(--on-dark-mute);
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  padding:10px 14px;border-radius:var(--r-pill);
  transition:color .2s,background .2s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--on-dark);background:rgba(255,255,255,.07)}
@media (min-width:961px){
  .nav-links>a[href="/resources/"],
  .nav-links>a[href="#faq"],
  .nav-links>a[href="/#faq"]{display:none}
}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--orange);color:#2A1300;text-decoration:none;
  font-weight:700;font-size:.92rem;
  padding:11px 20px;border-radius:var(--r-pill);
  transition:background .2s,transform .2s;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--orange-600);color:#2A1300;transform:translateY(-1px)}

/* One compact social group in the desktop bar and mobile menu. */
.nav-socials{display:flex;align-items:center;gap:2px;margin-left:6px;padding-left:8px;border-left:1px solid rgba(255,255,255,.14)}
.nav-links a.nav-social{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:40px;height:40px;padding:0;flex-shrink:0;
}
.nav-links a.nav-social svg{width:19px;height:19px;display:block;flex-shrink:0}
.nav-links a.nav-social span{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* Mobile menu toggle */
.nav-toggle{
  display:none;background:none;cursor:pointer;padding:0;
  border:1.5px solid rgba(255,255,255,.22);border-radius:11px;
  width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:border-color .2s;flex-shrink:0;
}
.nav-toggle:hover{border-color:rgba(255,255,255,.45)}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--on-dark);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav-toggle span{transition:none}}

@media (max-width:960px){
  .nav{gap:12px;flex-wrap:nowrap}
  .nav-toggle{display:flex;order:3}
  .brand{order:1}
  .nav-cta{order:2;padding:9px 14px;font-size:.8rem;margin-left:auto}
  .brand-logo{height:22px}
  .nav-links{
    display:none;
    position:absolute;left:0;right:0;top:100%;z-index:10;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--ink-950);
    border-bottom:1px solid rgba(255,255,255,.14);
    padding:10px 20px 18px;
    box-shadow:0 22px 44px rgba(0,0,0,.55);
  }
  .nav-links{order:4}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 12px;font-size:.78rem;border-radius:10px}
  .nav-socials{justify-content:center;gap:10px;margin:8px 0 0;padding:12px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .nav-links a.nav-social{width:44px;height:44px;padding:0;border-radius:50%;justify-content:center}
}
@media (max-width:400px){
  .nav-cta{padding:9px 12px;font-size:.74rem}
  .brand-logo{height:20px}
}

/* ---------- Instrument label (the system's signature) ---------- */
.ilabel{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin-bottom:var(--s4);
}
.ilabel::before{
  content:"";width:22px;height:2px;background:var(--grad);border-radius:2px;flex-shrink:0;
}
.on-paper .ilabel{color:var(--orange-ink)}

/* ---------- Sections ---------- */
.section{padding:clamp(64px,8vw,120px) 0;position:relative}
.on-dark{background:var(--ink-950);color:var(--on-dark)}
.on-dark-2{background:var(--ink-900);color:var(--on-dark)}
.on-paper{background:var(--paper);color:var(--on-light)}
.on-paper h1,.on-paper h2,.on-paper h3{color:var(--on-light)}

/* Hairline measurement grid on dark sections */
.on-dark::before,.on-dark-2::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:min(12.5%,160px) 100%;
}

.section-head{max-width:64ch;margin-bottom:var(--s7);position:relative}
.section-head h2{margin-bottom:var(--s4)}
.lede{font-size:var(--fs-lede);line-height:1.62;color:var(--on-dark-mute);margin:0}
.on-paper .lede{color:var(--on-light-mute)}

/* Ghosted section numeral */
.ghost-num{
  position:absolute;right:0;top:-.3em;
  font-family:var(--display);font-weight:800;font-size:clamp(4rem,9vw,8rem);
  line-height:1;color:rgba(255,255,255,.035);letter-spacing:-.05em;
  pointer-events:none;user-select:none;
}
.on-paper .ghost-num{color:rgba(11,31,58,.05)}
@media (max-width:900px){.ghost-num{display:none}}

/* Prose with mono annotation column */
.prose-grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media (min-width:960px){.prose-grid{grid-template-columns:minmax(0,1fr) 260px;gap:var(--s8)}}
.prose{max-width:68ch}
.prose p{color:var(--on-dark-mute)}
.on-paper .prose p{color:var(--on-light-mute)}
.annot{
  font-family:var(--mono);font-size:var(--fs-mono);line-height:1.8;
  color:var(--on-dark-mute);border-left:2px solid var(--ink-700);
  padding-left:var(--s4);align-self:start;
}
.on-paper .annot{color:var(--on-light-mute);border-left-color:var(--paper-edge)}
.annot b{display:block;color:var(--orange);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;font-size:.7rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:1rem;
  padding:15px 26px;border-radius:var(--r-pill);
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .2s,background .2s,box-shadow .2s,border-color .2s;
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-primary{background:var(--orange);color:#2A1300;box-shadow:0 8px 24px rgba(251,121,0,.28)}
.btn-primary:hover{background:var(--orange-600);color:#2A1300;transform:translateY(-2px);box-shadow:0 12px 32px rgba(251,121,0,.36)}
.btn-ghost{background:transparent;color:var(--on-dark);border:1.5px solid rgba(255,255,255,.24)}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.on-paper .btn-ghost{color:var(--on-light);border-color:rgba(11,31,58,.22)}
.on-paper .btn-ghost:hover{border-color:var(--on-light);background:rgba(11,31,58,.04)}
.btn-dark{background:var(--ink-900);color:#fff}
.btn-dark:hover{background:var(--ink-800);transform:translateY(-2px)}
.btn-block{width:100%}

/* ---------- HERO — two thirds of the viewport, two-pillar (copy | form) ----------
   The floor is 68svh, not 100svh. A full-viewport hero shows the visitor a
   complete screen and gives them no reason to believe anything follows; at two
   thirds the next section's top edge is visible and the page reads as
   continuing. min-height is a floor, so a hero whose form makes it taller than
   68svh simply grows — content wins, the viewport does not force it. */
.hero{
  position:relative;min-height:68svh;display:flex;align-items:center;
  padding:calc(var(--header-h) + 40px) 0 56px;
  background:var(--ink-950);overflow:hidden;isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.2;filter:saturate(.8)}
.hero-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(1100px 620px at 12% 18%,rgba(251,121,0,.16),transparent 62%),
    radial-gradient(900px 560px at 88% 82%,rgba(241,60,100,.14),transparent 62%),
    linear-gradient(180deg,rgba(5,11,21,.82) 0%,rgba(5,11,21,.9) 55%,var(--ink-950) 100%);
}
.hero-grid{
  display:grid;grid-template-columns:1fr;gap:var(--s7);align-items:center;
}
@media (min-width:1040px){
  .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);gap:var(--s8)}
}
.hero h1{margin-bottom:var(--s5)}
.hero .lede{max-width:54ch;margin-bottom:var(--s6)}
.underline-accent{position:relative;white-space:nowrap}
.underline-accent::after{
  content:"";position:absolute;left:0;right:0;bottom:.08em;height:.16em;
  background:var(--grad);border-radius:3px;z-index:-1;opacity:.9;
}

/* Found-on logo row */
.findrow{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.findrow .lab{
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
.applogos{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.app{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;color:var(--on-dark)}
.app img{width:19px;height:19px}

/* OpenAI's mark ships with no fill (renders black) — invert it on dark surfaces */
.hero img[src*="openai"],
.on-dark img[src*="openai"],
.on-dark-2 img[src*="openai"],
.strip img[src*="openai"]{filter:invert(1)}

/* Hero proof strip */
.hero-proof{
  display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap;
  padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.12);
}
.gwidget{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  padding:9px 16px;border-radius:var(--r-pill);transition:background .2s;
}
.gwidget:hover{background:rgba(255,255,255,.12)}
.gstars{color:var(--amber);letter-spacing:1px;font-size:.9rem}
.gtxt{font-size:.85rem;color:var(--on-dark-mute)}
.gtxt b{color:var(--on-dark)}
.hstat b{
  display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;
  letter-spacing:-.02em;line-height:1;
}
.hstat span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mute)}

/* Desktop only. Once the enquiry form takes its column the copy pillar is about
   635px wide, and the flex row fitted the review pill (408px) plus the first
   stat and orphaned the second stat onto a line of its own. Grid instead: the
   pill owns the top line, and both stats always share the line beneath it.
   1040px is the breakpoint where .hero-grid splits into two columns; below it
   the pillar is full width and the flex row already fits. */
@media (min-width:1040px){
  .hero-proof{
    display:grid;grid-template-columns:repeat(2,max-content);
    justify-content:start;align-items:center;
    column-gap:var(--s6);row-gap:var(--s5);
  }
  .hero-proof>.gwidget{grid-column:1 / -1;justify-self:start}
}

/* ---------- Lead form ---------- */
.lead-form{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--sh-dark);
}
.on-paper .lead-form{
  background:var(--paper-2);border-color:var(--paper-edge);
  box-shadow:var(--sh-2);backdrop-filter:none;-webkit-backdrop-filter:none;
}
.lead-form h2,.lead-form h3{font-size:1.4rem;margin-bottom:6px;text-transform:none;letter-spacing:-.02em}
.lead-form .form-intro{font-size:.94rem;color:var(--on-dark-mute);margin-bottom:var(--s5)}
.on-paper .lead-form .form-intro{color:var(--on-light-mute)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:520px){.form-grid{grid-template-columns:1fr}}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-wide{grid-column:1/-1}
.form-field label{
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
.on-paper .form-field label{color:var(--on-light-mute)}
.form-field input,.form-field select,.form-field textarea{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-sm);
  padding:12px 14px;font-size:.95rem;color:var(--on-dark);
  transition:border-color .2s,background .2s;width:100%;
}
.on-paper .form-field input,.on-paper .form-field select,.on-paper .form-field textarea{
  background:var(--paper);border-color:var(--paper-edge);color:var(--on-light);
}
.form-field input::placeholder,.form-field textarea::placeholder{color:rgba(148,170,199,.85)}
.on-paper .form-field input::placeholder,.on-paper .form-field textarea::placeholder{color:var(--on-light-mute)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--orange);background:rgba(255,255,255,.1);
}
.form-field input:focus:not(:focus-visible),
.form-field select:focus:not(:focus-visible),
.form-field textarea:focus:not(:focus-visible){outline:none;box-shadow:none}
.on-paper .form-field input:focus,.on-paper .form-field select:focus,.on-paper .form-field textarea:focus{background:var(--paper-2)}
.form-field textarea{min-height:96px;resize:vertical}
.form-field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394AAC7' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;
}
.consent{
  display:flex;gap:11px;align-items:flex-start;
  margin:var(--s4) 0 var(--s5);font-size:.8rem;line-height:1.6;
  color:var(--on-dark-mute);
}
.on-paper .consent{color:var(--on-light-mute)}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--orange);flex-shrink:0;cursor:pointer}
.consent a{color:var(--orange);text-underline-offset:2px}
.form-note{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-dark-mute);margin:var(--s3) 0 0;text-align:center;
}
.on-paper .form-note{color:var(--on-light-mute)}

/* ---------- Trust strip ---------- */
.strip{background:var(--ink-900);padding:var(--s6) 0;border-block:1px solid rgba(255,255,255,.08)}
.awards-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s5)}
.award{border-left:2px solid;border-image:var(--grad) 1;padding-left:var(--s4)}
.award b{display:block;font-size:.94rem;font-weight:700;line-height:1.35;margin-bottom:4px}
.award span,.award a{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--on-dark-mute);text-transform:uppercase}
.award a:hover{color:var(--orange)}

/* ---------- Cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5)}
.card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:var(--s6);
  transition:transform .25s,border-color .25s,background .25s;
}
.card:hover{transform:translateY(-3px);border-color:rgba(251,121,0,.4);background:rgba(255,255,255,.07)}
.on-paper .card{background:var(--paper-2);border-color:var(--paper-edge);box-shadow:var(--sh-1)}
.on-paper .card:hover{border-color:rgba(251,121,0,.5);box-shadow:var(--sh-2)}
.card h3{margin-bottom:10px}
.card p{color:var(--on-dark-mute);margin:0;font-size:.97rem}
.on-paper .card p{color:var(--on-light-mute)}
.card-kicker{
  display:block;font-family:var(--mono);font-size:.7rem;font-weight:700;
  letter-spacing:.16em;color:var(--orange);margin-bottom:var(--s3);
}

/* ---------- Metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s5)}
.metric{
  border-top:2px solid;border-image:var(--grad) 1;
  padding-top:var(--s4);
}
.metric .big{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,4.6vw,3.4rem);letter-spacing:-.04em;line-height:1;
  margin-bottom:8px;
}
.metric .lab{font-size:.95rem;font-weight:600;margin-bottom:3px}
.metric .hi{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mute)}
.on-paper .metric .hi{color:var(--on-light-mute)}

/* ---------- Steps ---------- */
.steps{display:flex;flex-direction:column;gap:0}
.step{
  display:grid;grid-template-columns:1fr;gap:var(--s3);
  padding:var(--s6) 0;border-top:1px solid rgba(255,255,255,.1);
}
.on-paper .step{border-top-color:var(--paper-edge)}
.step:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.on-paper .step:last-child{border-bottom-color:var(--paper-edge)}
@media (min-width:820px){.step{grid-template-columns:230px minmax(0,1fr);gap:var(--s7)}}
.step-num{
  font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--orange);align-self:start;
}
.step h3{margin-bottom:8px}
.step p{color:var(--on-dark-mute);margin:0}
.on-paper .step p{color:var(--on-light-mute)}

/* ---------- Data bar (case study) ---------- */
.databar{height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);overflow:hidden;margin-top:7px}
.on-paper .databar{background:rgba(11,31,58,.09)}
.databar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--grad);width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.databar.is-low i{background:linear-gradient(90deg,#7A8AA0,#54677F)}
@media (prefers-reduced-motion:reduce){.databar i{transition:none}}

/* Versus comparison */
.vs{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:stretch}
@media (min-width:940px){.vs{grid-template-columns:1fr auto 1fr;gap:var(--s5)}}
.vs-card{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:var(--s6);display:flex;flex-direction:column;
}
.on-paper .vs-card{background:var(--paper-2);border-color:var(--paper-edge);box-shadow:var(--sh-1)}
.vs-card.win{border-color:rgba(251,121,0,.42)}
.vs-shot{border-radius:var(--r-sm);overflow:hidden;margin-bottom:var(--s5);border:1px solid rgba(255,255,255,.1)}
.vs-shot img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}
.vs-badge{
  display:inline-block;align-self:flex-start;
  font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;
  border-radius:var(--r-pill);margin-bottom:var(--s3);
}
.vs-badge.red{background:rgba(241,60,100,.16);color:#FF8DA6;border:1px solid rgba(241,60,100,.34)}
.vs-badge.green{background:rgba(251,121,0,.16);color:#FFB061;border:1px solid rgba(251,121,0,.36)}
.on-paper .vs-badge.red{background:rgba(241,60,100,.1);color:#C4204A;border-color:rgba(241,60,100,.3)}
.on-paper .vs-badge.green{background:rgba(251,121,0,.12);color:#B85400;border-color:rgba(251,121,0,.32)}
.vs-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mute);margin:4px 0 var(--s5)}
.on-paper .vs-sub{color:var(--on-light-mute)}
.vs-metrics{list-style:none;display:flex;flex-direction:column;gap:var(--s4);margin-bottom:var(--s5)}
.vs-metrics li b{font-family:var(--display);font-weight:800;font-size:1.45rem;letter-spacing:-.02em;display:block;line-height:1.1}
.vs-metrics li span{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-mute)}
.on-paper .vs-metrics li span{color:var(--on-light-mute)}
.vs-take{font-size:.95rem;color:var(--on-dark-mute);margin:auto 0 0;padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.1)}
.on-paper .vs-take{color:var(--on-light-mute);border-top-color:var(--paper-edge)}
.vs-mid{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
@media (max-width:939px){.vs-mid{padding:var(--s2) 0}}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid rgba(255,255,255,.12)}
.on-paper .table-wrap{border-color:var(--paper-edge)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{text-align:left;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.09)}
.on-paper th,.on-paper td{border-bottom-color:var(--paper-edge)}
th{
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);background:rgba(255,255,255,.04);
}
.on-paper th{background:rgba(11,31,58,.03);color:var(--orange-ink)}
td{font-size:.96rem;color:var(--on-dark-mute)}
.on-paper td{color:var(--on-light-mute)}
tr:last-child td{border-bottom:0}

/* ---------- Accordion / FAQ ---------- */
.acc details,.faq details{
  border-bottom:1px solid rgba(255,255,255,.11);
}
.on-paper .acc details,.on-paper .faq details{border-bottom-color:var(--paper-edge)}
.acc summary,.faq summary{
  cursor:pointer;list-style:none;padding:var(--s5) 40px var(--s5) 0;
  font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.015em;
  position:relative;transition:color .2s;
}
.acc summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.acc summary:hover,.faq summary:hover{color:var(--orange)}
.acc summary::after,.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;opacity:.65;
}
.acc details[open] summary::after,.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc details p,.faq details p{
  padding-bottom:var(--s5);margin:0;max-width:76ch;color:var(--on-dark-mute);font-size:.98rem;
}
.on-paper .acc details p,.on-paper .faq details p{color:var(--on-light-mute)}

/* ---------- Pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5);align-items:start}
.tier{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-lg);padding:var(--s6);position:relative;
}
.on-paper .tier{background:var(--paper-2);border-color:var(--paper-edge);box-shadow:var(--sh-1)}
.tier.mid{border-color:rgba(251,121,0,.45);background:rgba(251,121,0,.06)}
.on-paper .tier.mid{background:var(--paper-2);border-color:var(--orange);box-shadow:var(--sh-2)}
.tier-flag{
  position:absolute;top:-11px;left:var(--s6);
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--grad);color:#2A1300;
  padding:5px 12px;border-radius:var(--r-pill);
}
.tier h3{margin-bottom:var(--s3)}
.tier .price{font-family:var(--display);font-weight:800;font-size:2.1rem;letter-spacing:-.03em;line-height:1}
.tier .per{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mute);margin:7px 0 var(--s5)}
.on-paper .tier .per{color:var(--on-light-mute)}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:var(--s5)}
.tier li{display:flex;gap:11px;font-size:.94rem;color:var(--on-dark-mute);line-height:1.5}
.on-paper .tier li{color:var(--on-light-mute)}
.tier li b{color:var(--orange);flex-shrink:0}

/* ---------- Reviews ---------- */
.rev-agg{
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s5) 0;margin-bottom:var(--s6);
  border-block:1px solid rgba(255,255,255,.11);
}
.on-paper .rev-agg{border-block-color:var(--paper-edge)}
.rev-agg .stars{color:var(--amber);font-size:1.15rem;letter-spacing:2px}
.rev-agg .big{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em}
.rev-agg .meta{font-size:.9rem;color:var(--on-dark-mute)}
.on-paper .rev-agg .meta{color:var(--on-light-mute)}
.rev-agg a{color:var(--orange);font-weight:600;font-size:.9rem;text-decoration:none}
.rev-agg a:hover{text-decoration:underline}
.review-wall{columns:3 300px;column-gap:var(--s5)}
.review{
  break-inside:avoid;margin-bottom:var(--s5);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:var(--s5);
}
.on-paper .review{background:var(--paper-2);border-color:var(--paper-edge);box-shadow:var(--sh-1)}
.review .rs{color:var(--amber);font-size:.85rem;letter-spacing:1px;margin-bottom:10px}
.review p{font-size:.92rem;line-height:1.62;color:var(--on-dark-mute);margin-bottom:var(--s4)}
.on-paper .review p{color:var(--on-light-mute)}
.review .who{display:flex;align-items:center;gap:11px}
.av{
  width:34px;height:34px;border-radius:50%;background:var(--grad);color:#2A1300;
  display:grid;place-items:center;font-weight:800;font-size:.9rem;flex-shrink:0;
}
.nm{font-size:.86rem;font-weight:600;display:block;line-height:1.3}
.dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-mute)}
.on-paper .dt{color:var(--on-light-mute)}

/* ---------- Founder ---------- */
.founder{
  display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);padding:var(--s6);
}
.on-paper .founder{background:var(--paper-2);border-color:var(--paper-edge);box-shadow:var(--sh-1)}
@media (min-width:680px){.founder{grid-template-columns:132px minmax(0,1fr);gap:var(--s6)}}
.founder-photo{
  width:132px;height:132px;border-radius:50%;overflow:hidden;display:block;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.founder-photo img{width:100%;height:100%;display:block;object-fit:cover;border-radius:0}
.founder--raoul .founder-photo img{transform:scale(1.03)}
.founder--martey .founder-photo img{transform:scale(1.18);transform-origin:50% 38%}
.founder .role{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin-bottom:7px}
.founder h3{margin-bottom:10px}
.founder p{color:var(--on-dark-mute);margin:0;font-size:.97rem}
.on-paper .founder p{color:var(--on-light-mute)}
@media (max-width:679px){
  .founder{text-align:center}
  .founder-photo{justify-self:center}
}

/* ---------- Panels / callouts ---------- */
.panel{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:var(--s6);margin-top:var(--s5);
}
.on-paper .panel{background:var(--paper-2);border-color:var(--paper-edge)}
.panel h4{font-family:var(--display);font-weight:800;font-size:1.05rem;margin-bottom:var(--s4)}
.callout{
  border-left:3px solid;border-image:var(--grad) 1;
  padding:var(--s4) 0 var(--s4) var(--s5);margin:var(--s6) 0;
}
.callout .box-label{
  display:block;font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;
}
.callout h3{margin-bottom:8px}
.callout p{color:var(--on-dark-mute);margin:0;font-size:.97rem}
.on-paper .callout p{color:var(--on-light-mute)}
.callout dl{margin:0}
.callout dt{font-weight:700;margin-top:12px;font-size:.97rem}
.callout dd{margin:3px 0 0;color:var(--on-dark-mute);font-size:.95rem}
.on-paper .callout dd{color:var(--on-light-mute)}

.logo-chips{display:flex;flex-wrap:wrap;gap:10px}
.logo-chip{
  display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  padding:8px 15px;border-radius:var(--r-pill);
}
.on-paper .logo-chip{background:var(--paper);border-color:var(--paper-edge)}
.logo-chip img{width:17px;height:17px}

/* Checklist */
.checks{list-style:none;display:flex;flex-direction:column;gap:var(--s4)}
.checks li{display:flex;gap:var(--s4);align-items:flex-start;font-size:1rem;line-height:1.6;color:var(--on-dark-mute)}
.on-paper .checks li{color:var(--on-light-mute)}
.checks li b{
  color:var(--orange);flex-shrink:0;font-size:1.05rem;line-height:1.5;
}
.problem-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s3)}
.problem-list li{
  display:flex;gap:11px;align-items:flex-start;font-size:.95rem;line-height:1.55;
  color:var(--on-dark-mute);padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.on-paper .problem-list li{color:var(--on-light-mute);border-bottom-color:var(--paper-edge)}
.problem-list li::before{content:"—";color:var(--pink);flex-shrink:0;font-weight:700}

/* Timeline */
.tl{display:flex;flex-direction:column;gap:0}
.tl .row{display:grid;grid-template-columns:1fr;gap:4px;padding:var(--s4) 0;border-bottom:1px solid rgba(255,255,255,.09)}
.on-paper .tl .row{border-bottom-color:var(--paper-edge)}
.tl .row:last-child{border-bottom:0}
@media (min-width:640px){.tl .row{grid-template-columns:150px minmax(0,1fr);gap:var(--s5)}}
.tl .wk{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--orange)}
.tl .tx{font-size:.96rem;color:var(--on-dark-mute)}
.on-paper .tl .tx{color:var(--on-light-mute)}

/* CTA band */
.ctaband{
  text-align:center;max-width:68ch;margin-inline:auto;
}
.ctaband .ilabel{justify-content:center}
.ctaband h2{margin-bottom:var(--s4)}
.ctaband .lede{margin:0 auto var(--s6)}

/* Split media block */
.split{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--s8)}}
.split img{border-radius:var(--r);width:100%;aspect-ratio:4/3;object-fit:cover}
.split.rev>*:first-child{order:2}
@media (max-width:899px){.split.rev>*:first-child{order:0}}

/* Semrush proof */
.proof-grid{display:grid;grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s6)}
@media (min-width:860px){.proof-grid{grid-template-columns:1fr 1fr}}
.proof{border:1px solid rgba(255,255,255,.12);border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.03)}
.on-paper .proof{border-color:var(--paper-edge);background:var(--paper-2)}
.proof .cap{
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.1);
  font-weight:700;font-size:.9rem;
}
.on-paper .proof .cap{border-bottom-color:var(--paper-edge)}
.proof .cap span{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-mute)}
.on-paper .proof .cap span{color:var(--on-light-mute)}
.proof img{width:100%}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-900);padding:var(--s8) 0 var(--s6);border-top:1px solid rgba(255,255,255,.1)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media (min-width:820px){.footer-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s8)}}
.footer-logo{height:26px;width:auto;margin-bottom:var(--s4)}
.site-footer p{font-size:.9rem;color:var(--on-dark-mute);max-width:60ch}
.footer-legal{font-family:var(--mono);font-size:.66rem;line-height:1.9;letter-spacing:.04em;color:var(--on-dark-mute);margin-top:var(--s4)}
.footer-links{display:flex;flex-direction:column;gap:11px}
.footer-links a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-dark-mute);text-decoration:none;transition:color .2s;
}
.footer-links a:hover{color:var(--orange)}

/* Social profiles. The box is 44px so the tap target passes on a phone, while
   the glyph reads at 22px; the negative inline start pulls the box's padding
   back so the icon lines up flush with the paragraph above it. */
.footer-social{display:flex;gap:4px;margin-top:var(--s4);margin-inline-start:-11px}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--on-dark-mute);transition:color .2s;
}
.footer-social a:hover,.footer-social a:focus-visible{color:var(--orange)}
.footer-social svg{width:22px;height:22px;display:block}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;left:50%;
  /* max() with env(safe-area-inset-bottom) covers the home-indicator inset;
     the JS visualViewport listener in site.js covers the separate iOS bug
     where the address/tab bar collapsing changes the visual viewport without
     moving the layout viewport that `bottom` is normally computed against —
     env() alone doesn't fix that second part, hence the JS. */
  bottom:max(18px, env(safe-area-inset-bottom));
  transform:translate(-50%,140%);
  display:flex;gap:8px;z-index:110;
  background:rgba(5,11,21,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);
  padding:7px;box-shadow:var(--sh-dark);
  transition:transform .35s cubic-bezier(.22,1,.36,1),bottom .1s linear;
}
.sticky-cta.show{transform:translate(-50%,0)}
.sticky-cta a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:700;font-size:.9rem;padding:11px 19px;border-radius:var(--r-pill);
  white-space:nowrap;
}
.sticky-cta svg{width:17px;height:17px}
.s-call{background:var(--orange);color:#2A1300}
.s-wa{background:#25D366;color:#062b13}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* ---------- Reveal animation ---------- */
/* Gated on .js so that if site.js fails to load, every block stays visible
   rather than the whole page below the hero rendering at opacity:0. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .card,.btn,.nav-cta,.acc summary::after,.faq summary::after{transition:none !important}
  .card:hover,.btn:hover,.nav-cta:hover{transform:none !important}
}

/* ---------- Inline body links ----------
   Contrast checked: #FB7900 on --ink-950 = 7.3:1 (AAA).
   #B85400 on --paper = 4.6:1 (AA). --orange-600 fails AA on paper at 3.2:1. */
.prose a:not(.btn), .lede a:not(.btn), .card p a:not(.btn), .callout p a:not(.btn), .annot a:not(.btn),
.faq details p a:not(.btn), .acc details p a:not(.btn), .step p a:not(.btn), .founder p a:not(.btn){
  color:var(--orange);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  font-weight:600;
  transition:color .2s,text-decoration-thickness .2s;
}
.prose a:not(.btn):hover, .lede a:not(.btn):hover, .card p a:not(.btn):hover, .callout p a:not(.btn):hover, .annot a:not(.btn):hover,
.faq details p a:not(.btn):hover, .acc details p a:not(.btn):hover, .step p a:not(.btn):hover, .founder p a:not(.btn):hover{
  color:#FFA24D;
  text-decoration-thickness:2px;
}
.on-paper .prose a:not(.btn), .on-paper .lede a:not(.btn), .on-paper .card p a:not(.btn), .on-paper .callout p a:not(.btn),
.on-paper .annot a:not(.btn), .on-paper .faq details p a:not(.btn), .on-paper .acc details p a:not(.btn),
.on-paper .step p a:not(.btn), .on-paper .founder p a:not(.btn){color:#B85400}
.on-paper .prose a:not(.btn):hover, .on-paper .lede a:not(.btn):hover, .on-paper .card p a:not(.btn):hover,
.on-paper .callout p a:not(.btn):hover, .on-paper .annot a:not(.btn):hover, .on-paper .faq details p a:not(.btn):hover,
.on-paper .acc details p a:not(.btn):hover, .on-paper .step p a:not(.btn):hover, .on-paper .founder p a:not(.btn):hover{color:var(--orange)}

/* Orange as TEXT on light surfaces must use the ink variant (4.84:1),
   not --orange (2.53:1) or --orange-600 (3.21:1). */
.on-paper .card-kicker,
.on-paper .step-num,
.on-paper .annot b,
.on-paper .callout .box-label,
.on-paper .founder .role,
.on-paper .tl .wk,
.on-paper .checks li b,
.on-paper .tier li b,
.on-paper .rev-agg a,
.on-paper .consent a,
.on-paper .acc summary:hover,
.on-paper .faq summary:hover{color:var(--orange-ink)}

/* ---------- Utilities ---------- */
.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}
.mt-6{margin-top:var(--s6)}
.mt-7{margin-top:var(--s7)}
.small{font-size:.86rem}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Mobile: centre-align per DM UK house rule ---------- */
@media (max-width:760px){
  /* Two thirds on a phone too. The pillars stack here, so the floor goes on the
     copy pillar rather than the section: it holds the headline, lede and proof
     at about 60svh, which puts the top of the enquiry form just below the fold.
     The visitor's first scroll lands on the form, which is where we want it. */
  .hero{text-align:center;min-height:66svh;padding-top:calc(var(--header-h) + 32px)}
  .hero-grid>div:first-child{
    min-height:60svh;display:flex;flex-direction:column;justify-content:center;
  }
  .hero .lede{margin-inline:auto}
  .hero .ilabel,.findrow,.hero-actions,.hero-proof,.applogos{justify-content:center}
  .findrow{flex-direction:column;gap:var(--s3)}
  .hero-proof{justify-content:center;gap:var(--s5)}
  .hstat,.metric,.award,.step-num,.section-head,.ctaband{text-align:center}
  .section-head{margin-inline:auto}
  .ilabel{justify-content:center}
  .award{border-left:0;border-top:2px solid;border-image:var(--grad) 1;padding-left:0;padding-top:var(--s3)}
  .metric{text-align:center}
  .annot{border-left:0;border-top:2px solid var(--ink-700);padding-left:0;padding-top:var(--s4);text-align:center}
  .on-paper .annot{border-top-color:var(--paper-edge)}
  .step{text-align:center}
  .step p{text-align:left}
  .card,.tier,.review,.vs-card{text-align:left}
  .card-kicker,.tier-flag{text-align:left}
  .review-wall{columns:1}
  .rev-agg{justify-content:center}
  .footer-grid{text-align:center}
  .site-footer p{margin-inline:auto}
  .footer-links{align-items:center}
  .footer-social{justify-content:center;margin-inline-start:0}
  .brand{justify-content:center}
  .hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
  .btn{width:100%}
  .checks li,.problem-list li{text-align:left}
}
@media (max-width:760px){
  .lead-form{text-align:left}
  .lead-form h2,.lead-form h3,.lead-form .form-intro{text-align:center}
}

/* ---------- Enquiry form states — errors, live status ----------
   Reds/oranges reuse the .vs-badge pair rather than --pink/--orange:
   --pink measures only 3.79:1 on the .lead-form surface over an
   .on-dark-2 section and would fail AA. Measured worst case here is
   6.06:1, which also absorbs the hero form's backdrop-filter variance. */
:root{
  --err:#FF8DA6;        /* red for TEXT on dark form surfaces */
  --err-ink:#C4204A;    /* red for TEXT on paper form surfaces */
  --ok:#FFB061;         /* orange for TEXT on dark form surfaces */
}

.form-error{margin:2px 0 0;font-size:.82rem;line-height:1.45;color:var(--err)}
.on-paper .form-error{color:var(--err-ink)}
.consent + .form-error{margin:-12px 0 var(--s4)}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"]{border-color:var(--err)}
.on-paper .form-field input[aria-invalid="true"],
.on-paper .form-field select[aria-invalid="true"],
.on-paper .form-field textarea[aria-invalid="true"]{border-color:var(--err-ink)}

.form-status{margin:var(--s4) 0 0;font-size:.9rem;line-height:1.6;color:var(--on-dark)}
.on-paper .form-status{color:var(--on-light)}
/* Not display:none — a live region must stay rendered to be announced. */
.form-status:empty{margin:0;padding:0;border:0}
.form-status:focus{outline:none}
.form-status:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:var(--r-sm)}
.form-status a{color:var(--ok);font-weight:600;text-underline-offset:3px}
.on-paper .form-status a{color:var(--orange-ink)}

.form-status.is-pending{color:var(--on-dark-mute)}
.on-paper .form-status.is-pending{color:var(--on-light-mute)}

.form-status.is-success,.form-status.is-error{
  padding:var(--s4);border-radius:var(--r-sm);border-left:3px solid;
}
.form-status.is-success{border-left-color:var(--orange);background:rgba(251,121,0,.1)}
.form-status.is-error{border-left-color:var(--err);background:rgba(241,60,100,.1)}
.on-paper .form-status.is-error{border-left-color:var(--err-ink)}

.form-status strong{display:block;margin-bottom:4px}
.form-status.is-success strong{color:var(--ok)}
.on-paper .form-status.is-success strong{color:var(--orange-ink)}
.form-status.is-error strong{color:var(--err)}
.on-paper .form-status.is-error strong{color:var(--err-ink)}

.lead-form.is-sent .form-grid,
.lead-form.is-sent .consent,
.lead-form.is-sent .btn,
.lead-form.is-sent .form-note{display:none}

.lead-form button[type="submit"][disabled]{opacity:.62;cursor:progress}
.lead-form button[type="submit"][disabled]:hover{transform:none;background:var(--orange)}

/* Card headings that are links — .card p a is styled, headings were not. */
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--orange)}
.on-paper .card h3 a:hover{color:var(--orange-ink)}

/* 2026-08-11: heading levels no longer skip (H2->H4 / H1->H3). The promoted
   headings keep the exact look of the tags they replace. */
.panel h3{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.025em;line-height:1.06;margin-bottom:var(--s4)}
.callout h2{font-size:var(--fs-h3);letter-spacing:-.015em;line-height:1.25;margin-bottom:8px}