/* ==========================================================================
   SAI Social — "More customers, not more followers" landing page
   Brutalist: pure ink on paper, one electric-blue signal accent.
   ========================================================================== */

:root {
  --ink-900:#000; --ink-800:#0A0A0A; --ink-700:#191919; --ink-600:#2C2C2C;
  --ink-500:#4D4D4D; --ink-400:#767676; --ink-300:#A4A4A4; --ink-200:#CFCECA;
  --paper-0:#FFFFFF; --paper-50:#F6F5F0; --paper-200:#E4E2DB;
  --accent:#0F3DFF; --accent-strong:#0A2ECC; --accent-soft:#E4E9FF;
  --font-display:'Archivo','Arial Narrow','Helvetica Neue',sans-serif;
  --font-sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;
  --page-pad:clamp(20px,5vw,80px);
  /* Header height. The mobile menu, the menu backdrop and every section's
     scroll-margin are derived from this, so changing it here moves all of
     them together. Hard-coding 66px in five places is how they drift. */
  --header-h:78px;
  --scroll-off:calc(var(--header-h) + 6px);
}
@media(max-width:600px){
  :root{--header-h:64px}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#000;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;color:#fff}
img{display:block;max-width:100%}
button{font-family:inherit}
a{color:inherit;text-decoration:none}
main{display:block}
/* The hidden attribute must always win over explicit display rules below
   (main{display:block}, .mobile-menu{display:flex}) — otherwise the About /
   Privacy views and the mobile menu render permanently. */
[hidden]{display:none!important}

.wrap{max-width:1180px;margin:0 auto;width:100%;padding:0 var(--page-pad)}
.wrap-narrow{max-width:1080px;margin:0 auto;width:100%;padding:0 var(--page-pad)}
.wrap-mid{max-width:900px;margin:0 auto;width:100%;padding:0 var(--page-pad)}
.wrap-text{max-width:820px;margin:0 auto;width:100%;padding:0 var(--page-pad)}

.noscroll{scrollbar-width:none;-ms-overflow-style:none}
.noscroll::-webkit-scrollbar{display:none}

/* ---- Keyframes ---- */
@keyframes kenburns{0%{transform:scale(1.06)}100%{transform:scale(1.2)}}
@keyframes rise{0%{opacity:0;transform:translateY(46px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadein{0%{opacity:0}100%{opacity:1}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scrolldown{0%{transform:translateY(-2px);opacity:0}30%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes revealkf{0%{opacity:0;transform:translateY(44px)}100%{opacity:1;transform:translateY(0)}}
@keyframes beamsweep{0%{opacity:.06;transform:translateX(-8%) rotate(9deg)}50%{opacity:.16}100%{opacity:.06;transform:translateX(8%) rotate(9deg)}}
@keyframes menudrop{0%{opacity:0;transform:translateY(-10px);clip-path:inset(0 0 100% 0)}100%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}
@keyframes menuitem{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}

.anim-rise{animation:rise .9s cubic-bezier(0.22,1,0.36,1) both}
.reveal{opacity:0}
.reveal.in{animation:revealkf .9s cubic-bezier(0.22,1,0.36,1) both}
@media(prefers-reduced-motion:reduce){.anim-rise,.reveal.in{animation:none}.reveal{opacity:1}}

/* ---- Shared type ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.eyebrow-accent{color:var(--accent)}
.eyebrow-muted{color:var(--ink-400)}
.eyebrow .rule{width:18px;height:0;border-top:2px solid currentColor}
.h2-dark{margin:14px 0 16px;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;color:#000;font-size:clamp(2rem,5.4vw,3.8rem)}
.h2-light{margin:14px 0 46px;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;color:#fff;font-size:clamp(2rem,5vw,3.6rem)}
.lead-dark{margin:0;font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--ink-500)}
.body-dark{margin:0;font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--ink-600)}

/* ---- Buttons ---- */
.btn{cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px;border:2px solid #000;padding:17px 30px;transition:transform 140ms cubic-bezier(0.5,0,0,1),box-shadow 140ms cubic-bezier(0.5,0,0,1),background 140ms ease,color 140ms ease}
.btn-accent{background:var(--accent);color:#fff;box-shadow:5px 5px 0 #000}
.btn-accent:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #000;background:var(--accent-strong)}
.btn-accent:active{transform:translate(5px,5px);box-shadow:0 0 0 #000}
.btn-ghost-light{border-color:#fff;background:transparent;color:#fff;box-shadow:5px 5px 0 rgba(255,255,255,.85)}
.btn-ghost-light:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(255,255,255,.85);background:#fff;color:#000}
.btn-ghost-light:active{transform:translate(5px,5px);box-shadow:0 0 0 #fff}
.btn-white{background:#fff;color:#000;box-shadow:5px 5px 0 #000}
.btn-white:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #000}
.btn-white:active{transform:translate(5px,5px);box-shadow:0 0 0 #000}
.btn-accent-sm{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;border:2px solid #000;background:var(--accent);color:#fff;box-shadow:4px 4px 0 #fff;padding:11px 18px;cursor:pointer;transition:transform 140ms cubic-bezier(0.5,0,0,1),box-shadow 140ms cubic-bezier(0.5,0,0,1)}
.btn-accent-sm:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #fff}
.btn-accent-sm:active{transform:translate(4px,4px);box-shadow:0 0 0 #fff}
.btn-accent-outline{border-color:#fff;background:var(--accent);color:#fff;box-shadow:5px 5px 0 #fff;padding:16px 22px;font-size:14px;letter-spacing:.05em;line-height:1.3;justify-content:center;flex-wrap:wrap;text-align:center}
.btn-accent-outline:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #fff}
.btn-accent-outline:active{transform:translate(5px,5px);box-shadow:0 0 0 #fff}
.btn-block{width:100%;justify-content:center;margin-top:6px}
.btn-block:disabled{opacity:.55;cursor:progress}
.btn-back{background:#000;color:#fff;border-color:#000;padding:13px 20px;font-size:13px;align-self:flex-start}
.btn-back:hover{background:var(--accent)}
.btn-ghost-light-sm{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;border:2px solid #fff;background:transparent;color:#fff;padding:12px 18px;cursor:pointer;transition:background 140ms,color 140ms}
.btn-ghost-light-sm:hover{background:#fff;color:#000}

/* ==================== PAGE LOADER ====================
   Spinning logo mark on first paint and on route changes.
   `loaderfail` is a safety net: if JS never runs or throws, the overlay
   still removes itself after 3s so the site is never permanently blocked. */
@keyframes loaderspin{to{transform:rotate(360deg)}}
@keyframes loaderout{to{opacity:0;visibility:hidden}}
@keyframes loaderfail{to{opacity:0;visibility:hidden;pointer-events:none}}
.loader{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:#000;animation:loaderfail 0s linear 3s forwards}
.loader.is-out{animation:loaderout .45s cubic-bezier(0.22,1,0.36,1) forwards;pointer-events:none}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.loader-mark{width:56px;height:56px;object-fit:contain;animation:loaderspin 1.15s linear infinite}
.loader-word{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-500)}
@media(prefers-reduced-motion:reduce){
  .loader-mark{animation:none}
  .loader.is-out{animation-duration:.01s}
}

/* ==================== HEADER / NAV ==================== */
/* z-index must sit ABOVE .menu-backdrop (140): the mobile menu is a child of
   this header, so it inherits the header's stacking context. At 100 the
   backdrop painted over the menu and dimmed its own links. */
.site-header{position:sticky;top:0;z-index:160;background:#000;border-bottom:2px solid var(--ink-700)}
.nav-inner{max-width:1180px;margin:0 auto;width:100%;padding:0 var(--page-pad);height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{cursor:pointer;display:flex;align-items:center;flex:none}
.nav-logo img{height:clamp(27px,4.2vw,34px);width:auto;transition:opacity 160ms ease}
.nav-logo:hover img{opacity:.82}
.nav-links{display:flex;align-items:center;gap:30px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.nlink{position:relative;cursor:pointer;transition:color 140ms}
.nlink:hover{color:var(--accent)}
.nav-cta-d{flex:none}
.nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:2px solid #333;color:#fff;cursor:pointer}
/* Overlays the page rather than sitting in flow — previously it pushed the
   hero (and the whole document) down as it opened, which read as the page
   jumping. Fixed + backdrop keeps the page still underneath. */
.mobile-menu{position:fixed;top:var(--header-h);left:0;right:0;z-index:150;
  background:#000;border-top:2px solid var(--ink-700);border-bottom:2px solid var(--ink-700);
  padding:8px var(--page-pad) 22px;display:flex;flex-direction:column;gap:2px;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;
  max-height:calc(100vh - var(--header-h));max-height:calc(100svh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;
  transform-origin:top;animation:menudrop .32s cubic-bezier(0.22,1,0.36,1) both;
  box-shadow:0 24px 48px rgba(0,0,0,.6)}
/* Dimmed backdrop so the menu reads as a layer above the page. */
.menu-backdrop{position:fixed;inset:var(--header-h) 0 0;z-index:140;background:rgba(0,0,0,.6);
  backdrop-filter:blur(2px);animation:fadein .28s ease both}
body.menu-open{overflow:hidden}
.mobile-menu a{cursor:pointer;color:#fff;padding:16px 0;border-bottom:1px solid var(--ink-700);font-weight:700;animation:menuitem .3s cubic-bezier(0.22,1,0.36,1) both}
.mobile-menu a:nth-child(1){animation-delay:.06s}
.mobile-menu a:nth-child(2){animation-delay:.09s}
.mobile-menu a:nth-child(3){animation-delay:.11s}
.mobile-menu a:nth-child(4){animation-delay:.16s}
.mobile-menu a:nth-child(5){animation-delay:.21s}
.mobile-menu a:nth-child(6){animation-delay:.24s}
.mobile-menu a:nth-child(7){animation-delay:.27s}
.mobile-menu .mm-cta{margin-top:14px;text-align:center;background:var(--accent);color:#fff;padding:16px;border:2px solid var(--accent);animation-delay:.26s}
@media(max-width:900px){.nav-links{display:none}.nav-cta-d{display:none}.nav-burger{display:inline-flex}}
/* Mobile menu + burger are a mobile-only affordance — never expose them on desktop. */
@media(min-width:901px){.mobile-menu{display:none!important}.nav-burger{display:none!important}}

/* ---- Mobile sticky CTA: a persistent booking button that follows the user
   on small screens (desktop keeps the nav "Book a call" button instead). It is
   hidden until first scroll and auto-hides while the contact form is on screen
   so it never covers the submit button (app.js toggles the .show class). ---- */
.mobile-cta{display:none}
@media(max-width:900px){
  .mobile-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:95;
    padding:12px var(--page-pad) calc(12px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,rgba(0,0,0,.96) 60%,rgba(0,0,0,0));
    transform:translateY(140%);opacity:0;pointer-events:none;
    transition:transform .32s cubic-bezier(0.22,1,0.36,1),opacity .32s ease;
  }
  .mobile-cta.show{transform:translateY(0);opacity:1;pointer-events:auto}
  .mobile-cta-btn{
    display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
    font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    font-size:14px;color:#fff;background:var(--accent);border:2px solid #000;
    padding:16px 20px;box-shadow:4px 4px 0 #fff;cursor:pointer;
    transition:transform 140ms cubic-bezier(0.5,0,0,1),box-shadow 140ms cubic-bezier(0.5,0,0,1),background 140ms ease;
  }
  .mobile-cta-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #fff;background:var(--accent-strong)}
}
@media(prefers-reduced-motion:reduce){.mobile-cta{transition:none}}

/* ==================== HERO ==================== */
.hero{position:relative;overflow:hidden;background:#000;min-height:92vh;display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:60% center;filter:grayscale(1) contrast(1.12);animation:kenburns 26s ease-in-out infinite alternate}
.hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.72) 78%,#000 100%)}
.hero-beam{position:absolute;inset:-20% -10%;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 60%);mix-blend-mode:screen;animation:beamsweep 9s ease-in-out infinite;transform-origin:top center}
.hero-content{position:relative;padding-bottom:clamp(48px,7vw,96px)}
.eyebrow-wrap{overflow:hidden;margin-bottom:22px}
.hero .eyebrow{letter-spacing:.14em}
/* Four lines of headline, not three — the scale is tuned so the whole H1 plus
   the sub and CTAs still land above the fold on a laptop. */
.hero-h1{margin:0;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.88;color:#fff;font-size:clamp(2.1rem,5.4vw,4.9rem)}
.hero-h1 .line{display:block;overflow:hidden}
.hero-h1 .line>span{display:block;white-space:nowrap}
.hero-sub{max-width:44ch;margin:28px 0 0;font-family:var(--font-sans);font-size:clamp(16px,2vw,20px);line-height:1.55;color:var(--ink-200)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
/* On phones the H1 shrinks (clamp) so the bottom-anchored copy left a tall
   empty band of background above it — the headline read as "starting halfway
   down the page." Center the copy in a browser-chrome-aware viewport height
   (svh) so it fills the first screen cleanly. */
@media(max-width:640px){
  .hero{min-height:82vh;min-height:82svh;align-items:center}
  .hero-content{padding-top:32px;padding-bottom:32px}
  /* The headline is too long to hold on one line per phrase at phone widths —
     let each line wrap rather than get clipped by .line{overflow:hidden}. */
  .hero-h1{line-height:.94}
  .hero-h1 .line>span{white-space:normal}
  /* Put the rotating word on its own line permanently, so a long word like
     BARBERSHOP doesn't reflow the headline mid-rotation. */
  .hero-h1 .rotator{display:block}
}

/* ---- Ghost button on light backgrounds (pricing cards) ---- */
.btn-ghost-dark{border-color:#000;background:transparent;color:#000;box-shadow:5px 5px 0 #000}
.btn-ghost-dark:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #000;background:#000;color:#fff}
.btn-ghost-dark:active{transform:translate(5px,5px);box-shadow:0 0 0 #000}

/* ==================== HERO ROTATOR ====================
   Cycles the business type inside the H1. Sized by an invisible
   longest-word so the line never reflows as words swap. */
/* The active word sits in flow so the rotator is only ever as wide as the word
   currently showing; the rest overlay it absolutely. The rotator is the last
   thing on its line, so changing width reflows nothing. */
/* min-height reserves one line so the rotator NEVER collapses to zero height
   during the hand-off between words. Without it the headline snapped shut and
   sprang back on every change — very visible on mobile where the rotator is a
   block on its own line. */
.rotator{position:relative;display:inline-block;vertical-align:top;color:var(--accent);min-height:1em}
.rotator .rot-w{position:absolute;left:0;top:0;opacity:0;transform:translateY(0.42em);white-space:nowrap;
  transition:opacity 300ms cubic-bezier(0.22,1,0.36,1),transform 300ms cubic-bezier(0.22,1,0.36,1)}
.rotator .rot-w.on{position:relative;opacity:1;transform:translateY(0)}
.rotator .rot-w.out{opacity:0;transform:translateY(-0.42em)}
@media(prefers-reduced-motion:reduce){
  .rotator .rot-w{transition:none}
  .rotator .rot-w:not(.on){display:none}
}

/* ==================== WORK WALL ====================
   Generated stills in our design language. Carries NO metrics —
   we have no client results and will not fabricate any. */
.wall{position:relative;background:#000;border-top:2px solid #000;overflow:hidden;padding:0}
.wall-track{display:flex;width:max-content}
.wall-row{display:flex;gap:10px;padding:10px;width:max-content;animation:marquee 62s linear infinite}
.wall-cell{margin:0;flex:none;width:clamp(122px,15vw,190px);border:2px solid var(--ink-700);overflow:hidden;background:#000}
.wall-cell img{width:100%;height:auto;display:block;filter:contrast(1.06)}
.wall-fade{position:absolute;top:0;bottom:0;width:12%;pointer-events:none;z-index:2}
.wall-fade-l{left:0;background:linear-gradient(90deg,#000,transparent)}
.wall-fade-r{right:0;background:linear-gradient(270deg,#000,transparent)}
@media(prefers-reduced-motion:reduce){.wall-row{animation:none}}

/* ==================== COST COMPARISON ====================
   What the same stack costs bought piece by piece, against one retainer. */
.cost-section{background:var(--paper-0);padding:clamp(64px,9vw,120px) 0;border-bottom:2px solid #000;scroll-margin-top:var(--scroll-off)}
.cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);margin-top:38px;align-items:start}
.cost-card{background:var(--paper-50);color:#000;border:2px solid #000;padding:clamp(22px,3vw,32px);display:flex;flex-direction:column}
.cost-card-us{background:#000;color:#fff;box-shadow:8px 8px 0 var(--accent)}
.cost-card-h{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);padding-bottom:16px;margin-bottom:6px;border-bottom:2px solid #000}
.cost-card-h-us{color:var(--accent);border-bottom-color:var(--ink-600)}

.cost-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--paper-200)}
.cost-row-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.cost-n{font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:1.25;color:#000}
.cost-d{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400);line-height:1.35}
.cost-v{font-family:var(--font-display);font-weight:900;font-size:1.28rem;letter-spacing:-.02em;color:var(--ink-600);flex:none;font-variant-numeric:tabular-nums}
.cost-pm{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink-400);margin-left:3px}

.cost-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:18px;padding-top:18px;border-top:2px solid #000}
.cost-total-l{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#000}
.cost-total-v{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,4.4vw,2.9rem);line-height:.9;letter-spacing:-.03em;color:#000;font-variant-numeric:tabular-nums}
.cost-note{font-family:var(--font-sans);font-size:12.5px;line-height:1.5;color:var(--ink-400);margin:16px 0 0}

.cost-us-tier{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-300);margin-top:18px}
.cost-us-price{font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,6vw,3.8rem);line-height:.9;letter-spacing:-.04em;color:var(--accent);margin:6px 0 22px}
.cost-us-price .cost-pm{color:var(--ink-400)}
.cost-us-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.cost-us-list li{display:flex;gap:11px;align-items:flex-start;font-family:var(--font-sans);font-size:14.5px;line-height:1.45;color:#fff}
.cost-us-list .check{color:var(--accent);font-weight:700;flex:none}
.cost-save{background:var(--ink-800);border:2px solid var(--ink-600);padding:18px 20px;margin-bottom:22px}
.cost-save-l{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400)}
.cost-save-v{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,4.6vw,2.8rem);line-height:1;letter-spacing:-.03em;color:var(--accent);margin:4px 0 6px;font-variant-numeric:tabular-nums}
.cost-save-s{display:block;font-family:var(--font-sans);font-size:13px;line-height:1.45;color:var(--ink-300)}
.cost-hire{max-width:70ch;margin:clamp(28px,4vw,44px) 0 0;font-family:var(--font-sans);font-size:15.5px;line-height:1.62;color:var(--ink-500)}
.cost-hire strong{color:#000;font-weight:700}
@media(max-width:820px){.cost-grid{grid-template-columns:1fr}}

/* ==================== GUARANTEE ==================== */
.guarantee-section{background:#000;padding:clamp(64px,9vw,120px) 0;scroll-margin-top:var(--scroll-off);border-bottom:2px solid var(--ink-700)}
.guarantee-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:start}
.guarantee-lead{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.06;color:var(--accent);font-size:clamp(1.15rem,2.5vw,1.65rem);margin:0 0 22px;max-width:24ch}
.guarantee-p{font-family:var(--font-sans);font-size:15.5px;line-height:1.62;color:var(--ink-300);margin:0 0 14px;max-width:48ch}
.guarantee-card{background:var(--ink-800);border:2px solid var(--ink-600);padding:clamp(22px,3vw,34px)}
.guarantee-card-h{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.guarantee-steps{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:20px;counter-reset:gs}
.guarantee-steps li{display:flex;gap:16px;align-items:flex-start}
.gs-n{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent);flex:none;padding-top:3px}
.guarantee-steps strong{display:block;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:1.02rem;color:#fff;margin-bottom:5px}
.guarantee-steps span{display:block;font-family:var(--font-sans);font-size:14.5px;line-height:1.55;color:var(--ink-300)}
.guarantee-fine{font-family:var(--font-sans);font-size:13px;line-height:1.55;color:var(--ink-400);margin:0;padding-top:20px;border-top:1px solid var(--ink-600)}
@media(max-width:880px){.guarantee-grid{grid-template-columns:1fr}}

/* ==================== PRICING ==================== */
.pricing-section{background:var(--paper-50);padding:clamp(64px,9vw,120px) 0;scroll-margin-top:var(--scroll-off);border-bottom:2px solid #000}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:38px;align-items:stretch}
/* body sets color:#fff, so light cards must reset it or the headings vanish. */
.tier{display:flex;flex-direction:column;background:#fff;color:#000;border:2px solid #000;padding:clamp(24px,3vw,34px);position:relative}
.tier-featured{background:#000;color:#fff;box-shadow:8px 8px 0 var(--accent)}
.tier-badge{position:absolute;top:-2px;right:-2px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border:2px solid #000}
.tier-name{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1;margin-bottom:14px}

/* ---- Metallic tier names ----
   Each name is painted in its own metal. Two constraints shaped the palettes:
   the Bronze and Gold cards are on PAPER and the Silver card is on BLACK, so
   the golds are pulled dark enough to hold contrast on white while silver can
   run bright. Solid colours are declared first and only overridden inside
   @supports, so a browser without background-clip:text still gets legible
   metal rather than transparent text. */
.tier-name-bronze{color:#A85E20}
.tier-name-silver{color:#D8D8D8}
.tier-name-gold{color:#9A7211}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .tier-name-bronze,.tier-name-silver,.tier-name-gold{
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text;
    /* MUST stay `repeat`. The letters are painted BY this gradient, so with
       no-repeat there is a single copy of it: the moment the sweep slides that
       copy past the text there is nothing left to paint with and the whole
       word blinks out. Tiling guarantees every pixel is always covered, which
       is what lets the highlight travel indefinitely. */
    background-repeat:repeat;
    /* Tile is twice the text width, so one tile holds the bright band plus
       enough flat metal either side for it to read as a travelling highlight. */
    background-size:200% 100%;
  }
  /* Each gradient opens and closes on the SAME dark stop, so the seam where
     tiles meet is invisible and the loop has no visible restart. */
  .tier-name-bronze{
    background-image:linear-gradient(100deg,#8A4A18 0%,#A85E20 34%,#E2A05A 50%,#A85E20 66%,#8A4A18 100%);
  }
  /* Silver sits on the black card, so it can carry a hard white highlight. */
  .tier-name-silver{
    background-image:linear-gradient(100deg,#8E8E8E 0%,#C6C6C6 30%,#FFFFFF 47%,#BDBDBD 64%,#8E8E8E 100%);
  }
  /* Gold sits on paper. The highlight stays below #E6C65B or the middle of the
     word washes out against the card. */
  .tier-name-gold{
    background-image:linear-gradient(100deg,#7E5C0C 0%,#A9801A 34%,#E6C65B 50%,#A9801A 66%,#7E5C0C 100%);
  }

  /* Only the two precious metals catch the light. Bronze stays matte: three
     shimmering headings at once turns the pricing grid into a slot machine.

     Why 0% -> 200% exactly: for a background image wider than its box, the
     offset is position% x (boxWidth - imageWidth). With a 200% tile that is
     200% x (E - 2E) = -2E, i.e. precisely one tile. The end frame therefore
     lands pixel-identical to the start frame and the loop is seamless. Change
     background-size without changing this number and the loop will jump. */
  @keyframes tier-glisten{
    from{background-position:0% 0}
    to{background-position:200% 0}
  }
  .tier-name-silver,.tier-name-gold{animation:tier-glisten 5s linear infinite}
  .tier-name-gold{animation-delay:1.1s}

  @media(prefers-reduced-motion:reduce){
    .tier-name-silver,.tier-name-gold{animation:none;background-position:0 0}
  }
}
.tier-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:18px;border-bottom:2px solid currentColor}
.tier-featured .tier-price{border-bottom-color:var(--ink-600)}
.tier-price-v{font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;font-size:clamp(2.1rem,5vw,3.1rem);line-height:.9;color:var(--accent)}
.tier-price-p{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}
.tier-blurb{font-family:var(--font-sans);font-size:14.5px;line-height:1.58;color:var(--ink-500);margin:0 0 20px}
.tier-featured .tier-blurb{color:var(--ink-300)}
.tier-inherits{margin:-8px 0 18px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}

/* Grouped feature list. The lines are dense on purpose: the length IS the
   argument, so gaps are tight enough that twenty items still read as one
   scannable block rather than a scroll. */
/* No flex-grow on the lists. Cards are equal height, so any list that grows
   absorbs the leftover space *inside* the card and opens a gap in the middle
   of it. The slack belongs in one place only: above the button, collected by
   `.tier .btn{margin-top:auto}`. */
.tier-points{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:18px;flex:none}
.tier-group{display:block}
.tier-group-h{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--paper-200)}
.tier-featured .tier-group-h{color:var(--ink-300);border-bottom-color:var(--ink-700)}
.tier-sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* Only the leaf items are flex rows. Scoping this to .tier-sub li matters:
   .tier-group is itself an <li>, so a bare `.tier-points li` rule turns each
   group into a row and strands its subhead in a narrow left gutter. */
.tier-sub li{display:flex;gap:10px;align-items:flex-start;font-family:var(--font-sans);font-size:13.5px;line-height:1.42;color:var(--ink-600)}
.tier-featured .tier-sub li{color:#fff}
.tier-sub .check{color:var(--accent);font-weight:700;flex:none}

/* Exclusions. Muted and crossed, never hidden: naming the gap is what makes
   the twenty ticks above it believable. */
.tier-group-neg .tier-sub li{color:var(--ink-400)}
.tier-featured .tier-group-neg .tier-sub li{color:var(--ink-400)}
.tier-sub .cross{color:var(--ink-300);font-weight:700;flex:none}
/* Expander for the lower feature groups. Open on desktop with the summary
   hidden, so the card reads as one continuous list; app.js closes it on phones
   where the cards are a horizontal swipe track. */
.tier-more{flex:none;margin:0 0 26px}
.tier-more-s{display:none;cursor:pointer;list-style:none;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);padding:12px 0;border-top:1px solid var(--paper-200);border-bottom:1px solid var(--paper-200)}
.tier-more-s::-webkit-details-marker{display:none}
.tier-more-s::after{content:' +';font-weight:900}
.tier-more[open] .tier-more-s::after{content:' −'}
.tier-featured .tier-more-s{border-color:var(--ink-700)}
.tier-points-rest{margin-top:18px;margin-bottom:0}
.tier .btn{margin-top:auto}
.tier-featured .btn-accent{box-shadow:5px 5px 0 #fff}
.tier-featured .btn-accent:hover{box-shadow:3px 3px 0 #fff}
@media(max-width:900px){.tier-grid{max-width:520px;margin-left:auto;margin-right:auto}}

/* ==================== MARQUEE ==================== */
.marquee{background:var(--accent);border-top:2px solid #000;border-bottom:2px solid #000;overflow:hidden;padding:14px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 26s linear infinite;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(20px,3vw,30px);color:#fff;white-space:nowrap}
.marquee .dim{opacity:.55}

/* ==================== AUDIT ==================== */
/* ==================== QUIZ MODAL ====================
   The growth quiz is a dismissible popup, not a page section. */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(3px);animation:fadein .22s ease both}
.modal-panel{position:relative;z-index:1;width:100%;max-width:760px;max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--paper-50);border:2px solid #000;box-shadow:10px 10px 0 var(--accent);
  padding:clamp(24px,4vw,44px);animation:modalin .34s cubic-bezier(0.22,1,0.36,1) both}
@keyframes modalin{0%{opacity:0;transform:translateY(22px) scale(.985)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.modal-backdrop,.modal-panel{animation:none}}
.modal-close{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;background:#fff;border:2px solid #000;color:#000;cursor:pointer;
  transition:background 140ms ease,color 140ms ease}
.modal-close:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.modal-head{max-width:52ch;margin-bottom:26px;padding-right:44px}
.modal-h2{margin:12px 0 10px;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;color:#000;font-size:clamp(1.8rem,4.6vw,2.9rem)}
.modal-p{margin:0;font-family:var(--font-sans);font-size:15px;line-height:1.58;color:var(--ink-500)}
body.modal-open{overflow:hidden}

.audit-box{background:#fff;border:2px solid #000;box-shadow:8px 8px 0 #000;padding:clamp(20px,3vw,30px)}
.audit-progress{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.audit-qlabel{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);flex:none}
.audit-bar{flex:1;min-width:120px;height:8px;background:var(--paper-200);border:1px solid #000;overflow:hidden}
.audit-bar-fill{height:100%;background:var(--accent);transition:width 380ms cubic-bezier(0.22,1,0.36,1)}
.audit-score{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);flex:none}
.audit-q{animation:fadein .32s ease both}
.audit-cat{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-bottom:8px}
.audit-qtext{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;color:#000;font-size:clamp(1.25rem,3vw,1.85rem);margin-bottom:22px}
.audit-opts{display:flex;flex-direction:column;gap:10px}
.audit-opt{display:flex;align-items:center;gap:14px;width:100%;padding:13px 15px;background:#fff;border:2px solid var(--paper-200);cursor:pointer;transition:border-color 140ms ease,background 140ms ease;text-align:left}
.audit-opt:hover{border-color:#000}
.audit-opt.sel{border-color:var(--accent);background:#EEF2FF}
.audit-badge{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:14px;border:2px solid #000;background:#fff;color:#000}
.audit-opt.sel .audit-badge{background:var(--accent);border-color:var(--accent);color:#fff}
.audit-opt-label{flex:1;text-align:left;font-family:var(--font-sans);font-size:15px;line-height:1.4;color:#000}
.audit-check{flex:none;color:var(--accent);display:flex;opacity:0;transform:scale(.6);transition:opacity 160ms ease,transform 160ms ease}
.audit-opt.sel .audit-check{opacity:1;transform:scale(1)}
.audit-back-wrap{margin-top:22px}
.audit-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#000;background:none;border:2px solid #000;padding:10px 16px;cursor:pointer;transition:background 140ms,color 140ms}
.audit-back:hover{background:#000;color:#fff}
.audit-result-wrap{margin-top:0}
.audit-result{background:#000;border:2px solid #000;overflow:hidden}
.audit-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.audit-result-main{padding:clamp(26px,3.6vw,42px);border-bottom:2px solid var(--ink-700)}
.audit-tier-name{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;color:#fff;font-size:clamp(2.4rem,6vw,4rem);margin:14px 0 4px}
.audit-tier-price{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--accent);margin-bottom:18px}
.audit-tier-blurb{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--ink-200);max-width:44ch}
.audit-result-side{padding:clamp(26px,3.6vw,42px);display:flex;flex-direction:column;gap:20px;justify-content:center}
.audit-result-score{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}
.audit-result-score span{color:#fff}
.btn-retake{align-self:flex-start;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:none;border:2px solid #333;padding:11px 18px;cursor:pointer;transition:border-color 140ms}
.btn-retake:hover{border-color:#fff}

/* ==================== STATS ==================== */
/* Light section. body{color:#fff} cascades everywhere, so every piece of text
   in here sets its own colour or it renders white-on-white. */
.stats-section{position:relative;background:var(--paper-0);color:#000;overflow:hidden;padding:clamp(64px,9vw,120px) 0;border-top:2px solid #000;border-bottom:2px solid #000}
/* Dark globe: the white one is invisible against a white card. */
.stats-globe{position:absolute;right:-160px;top:50%;transform:translateY(-50%);width:520px;opacity:.05;animation:spin 120s linear infinite}
/* These tiles hold WORDS, not figures — they're our reporting commitments. The
   old giant-numeral treatment (clamp up to 4rem) burst them out of their boxes.
   Numbered, label-led, sized to actually fit. */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#000;border:2px solid #000}
.stat{background:var(--paper-0);color:#000;padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;min-width:0}
.stat-n{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.stat-v{font-family:var(--font-display);font-weight:900;line-height:1;letter-spacing:-.025em;text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.5rem);color:#000;overflow-wrap:break-word;hyphens:auto}
.stat-l{font-family:var(--font-sans);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.5;color:var(--ink-500);margin-top:auto}

/* ==================== SERVICES ==================== */
.services-section{background:var(--paper-50);padding:clamp(64px,9vw,120px) 0;scroll-margin-top:var(--scroll-off)}
.services-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px}
.services-head-p{max-width:34ch;margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.55;color:var(--ink-500)}
.services-note{max-width:78ch;margin:clamp(26px,3vw,36px) 0 0;font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--ink-400)}
.faq-cta{margin-top:clamp(34px,4vw,50px);padding-top:clamp(28px,3.5vw,40px);border-top:2px solid #000;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.faq-cta p{max-width:56ch;margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--ink-500)}
.accordion{border-top:2px solid #000}
.acc-item{border-bottom:2px solid #000}
.acc-head{width:100%;display:flex;align-items:center;gap:18px;padding:clamp(18px,3vw,28px) 4px;background:none;border:0;cursor:pointer;text-align:left;transition:padding-left 200ms ease,background 200ms ease}
.acc-head:hover{padding-left:14px;background:rgba(0,0,0,.02)}
.acc-n{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--accent);flex:none}
.acc-title{flex:1;min-width:0;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:#000;font-size:clamp(1.4rem,3.4vw,2.3rem)}
.acc-tag{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);border:1.5px solid var(--ink-200);padding:5px 10px;border-radius:999px;flex:none}
.acc-icon{display:flex;flex:none;transition:transform 320ms cubic-bezier(0.22,1,0.36,1)}
.acc-item.open .acc-icon{transform:rotate(135deg)}
.acc-panel{max-height:0;opacity:0;overflow:hidden;transition:max-height 460ms cubic-bezier(0.22,1,0.36,1),opacity 320ms ease}
.acc-item.open .acc-panel{max-height:680px;opacity:1}
.acc-panel-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;padding:4px 4px 30px}
.acc-blurb{margin:0 0 18px;font-family:var(--font-sans);font-size:17px;line-height:1.55;color:var(--ink-600);max-width:46ch}
.acc-outcome{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);border:2px solid var(--accent);padding:9px 14px;background:var(--accent-soft)}
.acc-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.acc-points li{display:flex;gap:11px;align-items:flex-start;font-family:var(--font-sans);font-size:15px;color:var(--ink-600);line-height:1.45}
.acc-points .check{color:var(--accent);font-weight:700;flex:none}

/* ==================== SHOWREEL ==================== */
.showreel{position:relative;overflow:hidden;background:#000;min-height:80vh;display:flex;align-items:center;border-top:2px solid var(--ink-700)}
.showreel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);opacity:.5}
.showreel-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.35) 45%,rgba(0,0,0,.82))}
.showreel-content{position:relative;padding:clamp(60px,9vw,120px) var(--page-pad);text-align:center}
.showreel .eyebrow{letter-spacing:.14em}
.showreel-h2{margin:22px auto 0;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;color:#fff;font-size:clamp(2.4rem,7vw,5.6rem);max-width:15ch}
.showreel-p{max-width:48ch;margin:26px auto 0;font-family:var(--font-sans);font-size:clamp(16px,2vw,19px);line-height:1.55;color:var(--ink-200)}

/* ==================== PROCESS ==================== */
.process-section{background:#000;padding:clamp(64px,9vw,120px) 0;scroll-margin-top:var(--scroll-off)}
.process-section .sep{color:var(--ink-500)}
.process-lead{max-width:62ch;margin:0 0 clamp(30px,4vw,46px);font-family:var(--font-sans);font-size:clamp(15px,1.7vw,17px);line-height:1.6;color:var(--ink-300)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink-700);border:2px solid var(--ink-700)}
.step{background:#000;padding:28px 26px 30px;display:flex;flex-direction:column;gap:10px;min-height:230px}
.step-k{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.step-w{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:1;color:#fff;font-size:clamp(1.5rem,2.8vw,2.05rem)}
.step-d{margin:6px 0 0;font-family:var(--font-sans);font-size:14.5px;line-height:1.58;color:var(--ink-300)}
@media(max-width:1000px){.steps-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- Carousel hint (shown only where a grid becomes a swipe track) ---- */
.carousel-hint{display:none;margin:16px 0 0;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400)}

/* ==================== SPLIT (restaurants / story) ==================== */
.split-section{background:var(--paper-50);padding:clamp(64px,9vw,120px) 0}
.split-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px;align-items:center}
.split-img{border:2px solid #000;box-shadow:10px 10px 0 #000;overflow:hidden;aspect-ratio:4/5;max-height:560px}
.split-img-accent{box-shadow:10px 10px 0 var(--accent)}
.split-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.check-list{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px}
.check-list li{display:flex;gap:11px;align-items:flex-start;font-family:var(--font-sans);font-size:15px;color:var(--ink-600);line-height:1.45}
.check-list .check{color:var(--accent);font-weight:700;flex:none}

/* ==================== CASE STUDY ==================== */
.case-section{background:var(--ink-800);padding:clamp(64px,9vw,120px) 0;scroll-margin-top:var(--scroll-off);border-top:2px solid var(--ink-700)}
.case-card{border:2px solid #fff;background:#000;box-shadow:12px 12px 0 var(--accent)}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.case-img{position:relative;min-height:340px;overflow:hidden;border-right:2px solid var(--ink-700)}
.case-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.06) contrast(1.02)}
.case-img-overlay{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 20px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88))}
.case-big{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;color:var(--accent);font-size:clamp(3rem,8vw,4.4rem);display:block}
.case-big-label{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-200)}
.case-body{padding:clamp(24px,3.4vw,40px);display:flex;flex-direction:column;gap:20px}
.case-title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);line-height:.95}
.case-sub{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400);margin-top:8px}
.case-tags{display:flex;flex-wrap:wrap;gap:8px}
.case-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;border:1.5px solid #333;padding:5px 10px}
.case-p{margin:0;font-family:var(--font-sans);font-size:17px;line-height:1.65;color:var(--ink-200)}
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink-700);border:1px solid var(--ink-700)}
.case-stat{background:#000;padding:16px 12px}
.case-stat-v{font-family:var(--font-display);font-weight:900;color:#fff;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1}
.case-stat-l{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400);margin-top:6px}
.case-toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;background:var(--accent);border:2px solid var(--accent);color:#fff;padding:15px 18px;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:transform 140ms cubic-bezier(0.5,0,0,1)}
.case-toggle:hover{transform:translate(2px,2px)}
.case-toggle svg{transition:transform 300ms cubic-bezier(0.22,1,0.36,1)}
.case-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.case-deep-wrap{overflow:hidden;transition:max-height 460ms cubic-bezier(0.22,1,0.36,1);max-height:0}
.case-deep-inner{display:flex;flex-direction:column;gap:22px;padding-top:6px;opacity:0;transition:opacity 320ms ease}
.case-deep-wrap.open .case-deep-inner{opacity:1}
.case-deep-item{border-left:2px solid var(--accent);padding-left:16px}
.case-deep-k{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.case-deep-h{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:#fff;font-size:19px;margin-bottom:8px}
.case-deep-item p{margin:0;font-family:var(--font-sans);font-size:15.5px;line-height:1.65;color:var(--ink-300)}

/* ==================== TESTIMONIALS ==================== */
.testi-section{background:var(--paper-50);padding:clamp(64px,9vw,120px) 0}
.testi-scroll{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--page-pad) 12px;scroll-padding-left:var(--page-pad)}
.testi{flex:none;width:clamp(280px,82vw,420px);scroll-snap-align:start;margin:0;background:#fff;border:2px solid #000;box-shadow:6px 6px 0 #000;padding:28px 26px;display:flex;flex-direction:column;gap:22px}
.testi blockquote{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:#000;font-size:clamp(1.3rem,2.6vw,1.75rem)}
.testi figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.testi-avatar{width:44px;height:44px;flex:none;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:14px}
.testi-name{display:block;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#000}
.testi-role{display:block;font-family:var(--font-sans);font-size:13px;color:var(--ink-400)}

/* ==================== CONTACT / FORM ==================== */
.contact-section{background:#000;padding:clamp(64px,9vw,120px) 0;scroll-margin-top:var(--scroll-off);border-top:2px solid var(--ink-700)}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px;align-items:start}
.contact-h2{margin:14px 0 20px;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;color:#fff;font-size:clamp(2.2rem,5.4vw,4rem)}
.contact-p{max-width:40ch;margin:0 0 30px;font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--ink-300)}
.contact-points{display:flex;flex-direction:column;gap:18px;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-200)}
.contact-points>div{display:flex;align-items:center;gap:12px}
.contact-points .diamond{color:var(--accent)}
.form-card{background:var(--paper-50);border:2px solid #fff;box-shadow:10px 10px 0 var(--accent);padding:clamp(24px,4vw,38px)}
#bookingForm{display:flex;flex-direction:column;gap:18px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;align-items:end}
/* Labels sit in a fixed-height slot so a label that wraps to two lines can't
   shove its own input below its neighbour's. */
.form-row > label{display:flex;flex-direction:column;gap:8px}
.form-row .form-label{min-height:1.15em;display:flex;align-items:flex-end}
#bookingForm label{display:flex;flex-direction:column;gap:8px}
.form-label{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#000}
.req{color:var(--accent)}
#bookingForm input,#bookingForm select,#bookingForm textarea{font-family:var(--font-sans);font-size:16px;color:#000;background:#fff;border:2px solid #000;border-radius:0;padding:12px 14px;width:100%}
#bookingForm select{appearance:none;-webkit-appearance:none;cursor:pointer}
#bookingForm textarea{line-height:1.5;min-height:110px;resize:vertical}
#bookingForm input:focus-visible,#bookingForm select:focus-visible,#bookingForm textarea:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 5px var(--accent)}
.form-error{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--danger,#E23127);border:2px solid #000;padding:12px 14px}
.form-success{text-align:center;padding:30px 10px;display:flex;flex-direction:column;align-items:center;gap:18px}
.form-success-check{width:66px;height:66px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #000}
.form-success-h{margin:0;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#000;font-size:1.9rem}
.form-success-p{margin:0;max-width:34ch;font-family:var(--font-sans);font-size:16px;line-height:1.55;color:var(--ink-500)}

/* ==================== ABOUT ==================== */
.about-hero{position:relative;overflow:hidden;background:#000;padding:clamp(80px,12vw,150px) 0 clamp(56px,7vw,90px)}
.about-hero-globe{position:absolute;left:-180px;top:-120px;width:460px;opacity:.06;animation:spin 140s linear infinite}
.about-hero .eyebrow{letter-spacing:.14em}
.about-h1{margin:20px 0 0;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.88;color:#fff;font-size:clamp(2.6rem,8vw,6.4rem);max-width:15ch}
.about-hero-p{max-width:52ch;margin:28px 0 0;font-family:var(--font-sans);font-size:clamp(16px,2vw,20px);line-height:1.6;color:var(--ink-200)}
.team-section{background:var(--ink-800);padding:clamp(56px,8vw,110px) 0;border-top:2px solid var(--ink-700)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.team-card{border:2px solid #333;background:#000;padding:22px}
.team-img{width:56px;height:56px;object-fit:cover;object-position:center 30%;filter:saturate(1.06) contrast(1.02);border:2px solid var(--accent);margin-bottom:16px;display:block}
.team-badge{width:56px;height:56px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:18px;margin-bottom:16px}
.team-n{font-family:var(--font-display);font-weight:800;text-transform:uppercase;color:#fff;font-size:18px}
.team-r{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400);margin-top:4px}
/* Three cards now, so each can carry what that person actually owns. */
.team-card{display:flex;flex-direction:column}
.team-w{margin:14px 0 0;font-family:var(--font-sans);font-size:14px;line-height:1.55;color:var(--ink-300)}
.team-tag{margin-top:auto;padding-top:16px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
/* Founder's tag only. Gradient is clipped to the glyphs and slid across on a loop,
   so the shimmer reads as light travelling over gold rather than the text flashing. */
.team-tag-gold{
  font-weight:700;
  color:#E8C25C; /* fallback wherever background-clip:text is unsupported */
  background:linear-gradient(100deg,#C9992B 0%,#E8C25C 22%,#FFF6D6 42%,#FFFFFF 50%,#FFF6D6 58%,#E8C25C 78%,#C9992B 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 6px rgba(232,194,92,.35));
  animation:tag-glisten 4s linear infinite;
}
@keyframes tag-glisten{from{background-position:120% 0}to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){.team-tag-gold{animation:none;background-position:50% 0}}
/* The unnamed bench. Roles only — nobody here is a client contact. */
.crew{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1.15fr);gap:clamp(24px,4vw,56px);align-items:start;border-top:2px solid var(--ink-700);padding-top:clamp(32px,4vw,48px)}
.crew-h{margin:0;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:#fff;font-size:clamp(1.4rem,3vw,2rem)}
.crew-p{margin:16px 0 0;max-width:48ch;font-family:var(--font-sans);font-size:15.5px;line-height:1.6;color:var(--ink-300)}
.crew-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-700)}
.crew-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--ink-700)}
.crew-r{flex:0 0 auto;min-width:140px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.crew-d{flex:1 1 220px;font-family:var(--font-sans);font-size:14.5px;line-height:1.5;color:var(--ink-300)}
@media(max-width:760px){.crew{grid-template-columns:1fr}}
.about-cta{background:var(--accent);padding:clamp(56px,8vw,100px) 0}
.about-cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.about-cta-h{margin:0;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;color:#fff;font-size:clamp(2rem,5vw,3.6rem);max-width:16ch}

/* ==================== CONTACT FREE-AUDIT NOTE ==================== */
.contact-audit-p{max-width:44ch;margin:30px 0 22px;font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--ink-300)}

/* ==================== PRIVACY ==================== */
.privacy-updated{margin:22px 0 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}
.privacy-body{background:var(--paper-50);padding:clamp(48px,7vw,90px) 0}
.privacy-inner{display:flex;flex-direction:column;gap:40px}
.privacy-intro{margin:0;font-family:var(--font-sans);font-size:17px;line-height:1.7;color:var(--ink-600);border-left:2px solid var(--accent);padding-left:18px}
#privacySections{display:flex;flex-direction:column;gap:40px}
.privacy-sec h2{margin:0 0 14px;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:#000;font-size:clamp(1.4rem,3.4vw,2rem)}
.privacy-sec h2 .n{color:var(--accent);font-family:var(--font-mono);font-size:.55em;font-weight:700;margin-right:12px}
.privacy-sec p{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.7;color:var(--ink-600)}
.privacy-contact{border:2px solid #000;background:#fff;box-shadow:6px 6px 0 #000;padding:28px}
.privacy-contact-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);margin-bottom:12px}
.privacy-contact p{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.65;color:var(--ink-600)}

/* ==================== FOOTER ==================== */
.site-footer{position:relative;overflow:hidden;background:#000;border-top:2px solid var(--ink-700);padding:clamp(48px,7vw,90px) 0 34px}
.footer-globe{position:absolute;right:-140px;bottom:-160px;width:440px;opacity:.05}
.footer-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:34px;padding-bottom:40px;border-bottom:1px solid var(--ink-700)}
.footer-logo{height:26px;width:auto;margin-bottom:18px}
.footer-tag{margin:0;font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--ink-400)}
.footer-col-h{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:11px;font-family:var(--font-sans);font-size:14px;color:var(--ink-200)}
.footer-links a{cursor:pointer}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500)}

/* ==================== ABOUT — BELIEFS ==================== */
.beliefs-section{background:var(--paper-0);padding:clamp(56px,8vw,110px) 0;border-top:2px solid #000;border-bottom:2px solid #000}
.beliefs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:34px;background:#000;border:2px solid #000}
.belief{background:var(--paper-0);padding:clamp(24px,3.2vw,36px);display:flex;flex-direction:column;gap:10px}
.belief-n{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.belief-h{margin:0;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;color:#000;font-size:clamp(1.15rem,2.4vw,1.5rem)}
.belief-p{margin:0;font-family:var(--font-sans);font-size:14.5px;line-height:1.6;color:var(--ink-500)}
@media(max-width:720px){.beliefs-grid{grid-template-columns:1fr}}
.team-lead{max-width:56ch;margin:-28px 0 34px;font-family:var(--font-sans);font-size:15.5px;line-height:1.6;color:var(--ink-300)}

/* ==================== THE £300 PROBLEM ====================
   Objection handling for owners already paying a small monthly fee for
   social that isn't producing customers. Argues on outcomes, never on
   where the incumbent is based — keep it that way. */
.cheap-section{background:#000;padding:clamp(64px,9vw,120px) 0;border-bottom:2px solid var(--ink-700);scroll-margin-top:var(--scroll-off)}
.services-head-p-light{color:var(--ink-300)}
/* Two columns so the prose no longer leaves a dead half-page to its right:
   argument on the left, the owner's own arithmetic on the right. */
.cheap-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);gap:clamp(26px,4vw,60px);align-items:start;margin:clamp(28px,4vw,44px) 0 clamp(28px,3.6vw,42px)}
.cheap-intro{max-width:60ch}
.cheap-intro p{margin:0 0 15px;font-family:var(--font-sans);font-size:clamp(15px,1.8vw,17px);line-height:1.62;color:var(--ink-300)}
.cheap-intro p:last-child{margin-bottom:0}
.cheap-intro p:first-child{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.15rem,2.6vw,1.7rem);color:var(--accent);max-width:24ch}
.cheap-intro em{font-style:italic;color:#fff}

/* The receipt. Three lines the owner can check against their own bank feed,
   ending on the one number they almost never have. No claim of ours is made
   here: the punchline is a question mark, not a statistic. */
.cheap-sum{border:2px solid var(--ink-700);background:var(--ink-800);padding:clamp(22px,2.6vw,30px)}
.cheap-sum-h{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:clamp(16px,2vw,22px)}
.cheap-sum-h .rule{width:18px;height:0;border-top:2px solid currentColor}
.cheap-sum-rows{margin:0;display:flex;flex-direction:column}
.cheap-sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--ink-700)}
.cheap-sum-row:first-child{border-top:0;padding-top:0}
.cheap-sum-row dt{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400);max-width:15ch;line-height:1.4}
.cheap-sum-row dd{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(1.5rem,3.2vw,2rem);line-height:.9;letter-spacing:-.03em;color:#fff;white-space:nowrap}
/* The question mark is the payoff, so it outranks the two figures above it.
   Centred rather than baseline-aligned: a lone "?" has no visual baseline to
   hang off and reads as floating next to a two-line label. */
.cheap-sum-row-hero{border-top:2px solid var(--accent);margin-top:6px;padding-top:18px;align-items:center}
.cheap-sum-row-hero dt{color:#fff;max-width:16ch}
.cheap-sum-row-hero dd{color:var(--accent);font-size:clamp(3.4rem,7vw,4.6rem);line-height:.8}
.cheap-sum-q{margin:18px 0 0;font-family:var(--font-sans);font-size:13.5px;line-height:1.55;color:var(--ink-400)}

.cheap-table{border:2px solid var(--ink-700)}
.cheap-row{display:grid;grid-template-columns:minmax(104px,.66fr) 1fr 1fr;border-bottom:2px solid var(--ink-700)}
.cheap-row:last-child{border-bottom:0}
.cheap-label{padding:12px 16px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400);background:var(--ink-800);display:flex;align-items:center}
.cheap-a,.cheap-b{padding:12px 18px;font-family:var(--font-sans);font-size:14px;line-height:1.45;border-left:2px solid var(--ink-700);display:flex;align-items:center}
.cheap-a{color:var(--ink-400)}
.cheap-b{color:#fff;background:rgba(15,61,255,.05)}
/* Column headers replace the per-cell tags on desktop: the same two labels
   repeated fourteen times was most of the section's height and none of its
   argument. The tags come back when the grid collapses to one column. */
.cheap-head .cheap-a,.cheap-head .cheap-b{padding-top:11px;padding-bottom:11px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cheap-head .cheap-a{color:var(--ink-500)}
.cheap-head .cheap-b{color:var(--accent)}
.cheap-tag{display:none}
.cheap-tag-us{color:var(--accent)}
.cheap-row:last-child .cheap-b{font-weight:600}

.cheap-close{margin-top:clamp(30px,4vw,44px);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.cheap-close p{max-width:62ch;margin:0;font-family:var(--font-sans);font-size:15.5px;line-height:1.62;color:var(--ink-300)}
.cheap-close strong{color:#fff;font-weight:700}

@media(max-width:940px){
  .cheap-split{grid-template-columns:1fr;gap:30px}
  .cheap-intro{max-width:66ch}
}
@media(max-width:760px){
  .cheap-head{display:none}
  .cheap-row{grid-template-columns:1fr}
  .cheap-label{background:var(--accent);color:#fff}
  .cheap-a,.cheap-b{border-left:0;border-top:2px solid var(--ink-700);display:block;padding:14px 18px}
  /* With the desktop column header gone these tags are the only thing telling
     the two stacked cells apart, so they need real contrast, not ink-600. */
  .cheap-tag{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:6px}
  /* The tier cards become a swipe track at this width, so the feature list
     collapses behind a toggle (app.js closes the <details>) and the summary
     has to become visible to reopen it. */
  .tier-more-s{display:block}
}

/* ==================== BOOKING FORM HONEYPOT ====================
   The bot trap in #bookingForm. Deliberately NOT display:none or
   visibility:hidden: the better scraping bots skip fields hidden that way,
   which defeats the point. Positioned off-canvas instead, so it is in the
   layout and fillable, just not reachable or visible to a person. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ==================== AMBIENT DECOR ====================
   Wireframe globes drifting behind a few sections. The motif is deliberately
   the one already on the page (the stats/footer globe) rather than a new
   visual language, and it reuses the two globe PNGs that are already
   downloaded, so it costs no extra requests.

   Three rules this must never break:
     1. Never intercept a click  -> pointer-events:none on the whole layer.
     2. Never cause a sideways scrollbar -> .has-deco clips with overflow:hidden.
        These elements are deliberately larger than their section and hang off
        the edge, so without the clip they widen the document.
     3. Never sit on top of text -> layer is z-index 0, content is lifted to 1.
   Everything animates transform/opacity only, so it stays off the main thread. */
.has-deco{position:relative;overflow:hidden}
.has-deco > .wrap,
.has-deco > .reveal{position:relative;z-index:1}
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.deco-item{position:absolute;will-change:transform}

/* Outer element floats, inner spins. Two transforms cannot live on one
   element, so the pairing is structural, not stylistic.
   The scroll parallax folds into the SAME transform via --par, which app.js
   updates. A custom property referenced inside a keyframe is re-read on the
   next frame, so the two compose instead of one clobbering the other. Setting
   `transform` directly from JS would simply cancel this animation. */
.deco-item{--par:0px}
@keyframes deco-float{
  0%,100%{transform:translate3d(0,var(--par,0px),0)}
  50%{transform:translate3d(0,calc(var(--par,0px) - 22px),0)}
}
.deco-float{animation:deco-float 14s ease-in-out infinite}
.deco-spin{animation:spin 150s linear infinite;display:block;width:100%;height:auto}
.deco-spin-rev{animation:spin 190s linear infinite reverse}

/* Per-placement sizing and position. Percentages keep them roughly in the same
   spot as the section reflows. */
.deco-globe-process{right:-9%;bottom:-34%;width:min(46vw,560px);opacity:.07}
.deco-globe-pricing{left:-12%;top:-22%;width:min(40vw,480px);opacity:.06}
.deco-globe-contact{right:-12%;top:-10%;width:min(44vw,540px);opacity:.07}

/* Thin out on small screens: less room, less GPU, and the decor competes with
   the copy far more when the column is narrow. */
@media(max-width:760px){
  .deco-globe-process,
  .deco-globe-pricing,
  .deco-globe-contact{width:min(78vw,360px);opacity:.04}
}

@media(prefers-reduced-motion:reduce){
  .deco-float,.deco-spin,.deco-spin-rev{animation:none}
}

/* ==================== FLOATING CONTACT DOCK ====================
   Desktop only. On phones the same channels are rendered into the burger menu
   (.mm-social below) because the bottom of a small screen already belongs to
   the sticky booking CTA, which is the conversion action on every page and is
   not something a chat bubble should compete with.

   z-index 130 keeps it under the whole overlay ladder (backdrop 140, mobile
   menu 150, header 160, quiz modal 200, loader 400) while still clearing page
   content, so the quiz can never be obscured by it. */
.dock{display:none}
@media(min-width:901px){
  .dock{
    display:flex;flex-direction:column;align-items:flex-end;gap:12px;
    position:fixed;right:24px;bottom:24px;z-index:130;
  }
}
.dock-toggle{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--accent);border:2px solid #000;box-shadow:4px 4px 0 #000;padding:13px 17px;
  transition:transform 140ms cubic-bezier(0.5,0,0,1),box-shadow 140ms cubic-bezier(0.5,0,0,1),background 140ms ease;
}
.dock-toggle:hover{background:var(--accent-strong)}
.dock-toggle:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}
.dock-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.dock-i{display:block;flex:none}
.dock-i-close{display:none}
.dock.is-open .dock-i-open{display:none}
.dock.is-open .dock-i-close{display:block}

.dock-panel{
  display:flex;flex-direction:column;gap:2px;min-width:252px;
  background:var(--ink-700);border:2px solid #000;box-shadow:8px 8px 0 var(--accent);
  animation:dock-in .18s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes dock-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dockl{display:flex;align-items:center;gap:13px;padding:13px 16px;background:#000;color:#fff;transition:background 130ms ease}
.dockl:hover{background:var(--accent)}
.dockl:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dockl-i{flex:none;display:flex}
.dockl-i svg{width:20px;height:20px;display:block}
.dockl-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.dockl-l{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.dockl-s{font-family:var(--font-sans);font-size:12px;line-height:1.2;color:var(--ink-400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dockl:hover .dockl-s{color:rgba(255,255,255,.86)}
.dockl-whatsapp .dockl-i{color:#25D366}
.dockl:hover .dockl-i{color:#fff}

/* Mobile equivalent, inside the burger menu. */
.mm-social{display:flex;flex-direction:column;margin-top:16px;padding-top:6px;border-top:1px solid var(--ink-700)}
/* .mobile-menu a sets a border and padding on every child anchor; these rows
   are a compact block rather than more nav items, so they opt out. */
.mobile-menu .mms{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:0;font-weight:400}
.mms-i{flex:none;display:flex;color:var(--accent)}
.mms-i svg{width:20px;height:20px;display:block}
.mms-whatsapp .mms-i{color:#25D366}
.mms-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.mms-l{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff}
/* The menu uppercases its nav links; an all-caps email address reads as a
   mistake, so the secondary line opts out. */
.mms-s{font-family:var(--font-sans);font-size:12.5px;line-height:1.2;color:var(--ink-400);text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  .dock-panel{animation:none}
  .dock-toggle{transition:none}
}

/* ==================== STATS CAROUSEL ====================
   Deliberately a wider breakpoint than the tier/step carousels below (1080px
   vs 900px). Four tiles need roughly 940px of content width to sit side by
   side, so every tablet — iPad portrait at 820px and iPad Pro at 1024px
   included — landed in the range where they either squeezed to unreadable or
   wrapped one orphan tile onto a second row. Swiping beats both.

   Sits BEFORE the mobile-carousel block on purpose so that block stays last in
   the file, per the note under it. Nothing here touches .steps-grid or the
   base .carousel-hint display, so it cannot interfere. */
@media(max-width:1080px){
  .stats-grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:calc(var(--page-pad) * -1);
    margin-right:calc(var(--page-pad) * -1);
    padding:4px var(--page-pad) 18px;
    background:none;
    border:0;
    max-width:none;
  }
  .stats-grid::-webkit-scrollbar{display:none}
  /* The flex track drops the shared 2px gutter background, so each tile
     re-draws its own border. */
  .stats-grid > *{flex:0 0 min(78%,320px);scroll-snap-align:center;border:2px solid #000}
  /* Higher specificity than the base .carousel-hint{display:none}, so it wins
     regardless of source order. */
  .stats-section .carousel-hint{display:block;color:var(--ink-500)}
}
@media(max-width:1080px) and (prefers-reduced-motion:no-preference){
  .stats-grid{scroll-behavior:smooth}
}

/* ==================== MOBILE CAROUSELS ====================
   Pricing tiers and process steps become horizontal swipe tracks on narrow
   screens rather than a tall stack. Cards bleed to the screen edge so it
   reads as swipeable without an affordance drawn on top.

   MUST stay at the end of this file: it overrides `.steps-grid{display:grid}`
   and `.carousel-hint{display:none}`, which are defined later in source order
   than the pricing block and would otherwise win at equal specificity. */
@media(max-width:900px){
  .tier-grid,
  .steps-grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleed past .wrap padding to the viewport edge */
    margin-left:calc(var(--page-pad) * -1);
    margin-right:calc(var(--page-pad) * -1);
    padding:4px var(--page-pad) 18px;
    background:none;
    border:0;
    max-width:none;
    /* Each card sizes to its own content here. Equal height earns nothing in a
       swipe track where only one card is on screen, and it charged Gold ~500px
       of dead space above its button just to match Silver's longer list. */
    align-items:flex-start;
  }
  .tier-grid::-webkit-scrollbar,
  .steps-grid::-webkit-scrollbar{display:none}
  .tier-grid > *,
  .steps-grid > *{
    flex:0 0 min(84%, 380px);
    scroll-snap-align:center;
  }
  /* the flex track drops the shared 2px gutter background, so re-draw borders */
  .steps-grid .step{border:2px solid var(--ink-700);min-height:auto}
  .tier-grid{padding-bottom:26px}
  .tier-featured{box-shadow:6px 6px 0 var(--accent)}
  .carousel-hint{display:block}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .tier-grid,.steps-grid{scroll-behavior:smooth}
}