/* ============================================================
   00. TOKENS, BASE, GLOBAL GUARDS
   Every colour on the page comes from here. --hero-visual-h locks
   the hero visual to the same height as the AI SEO page hero so the
   two heroes resolve to the same length; --jump-h is the height of
   the sticky nav and feeds the scroll offset below.
   ============================================================ */
:root{
  --ink:#1C1814; --slate:#5C564E; --line:#E8E2DA;
  --orange:#E8501A; --orange-deep:#C23E0E; --cream:#FBF6F0; --cream-deep:#F5EBDF;
  --dark:#191512; --paper:#FFFFFF;
  --orange-soft:#FFF1E8; --orange-line:#FFD9C4; --orange-lite:#F1A07E; --mute:#8A8177;

  /* dark-band UI: comparison table, contact band, footer */
  --dark-panel:var(--dark-panel); --dark-head:#2A241E; --dark-line:#3A332C;
  --dark-rule:#33291F; --dark-chip:#4A4239; --foot:#120E0B;
  --on-dark:var(--on-dark); --on-dark-soft:var(--on-dark-soft); --paper-dim:#F1ECE4;

  /* small UI neutrals and status colours */
  --cream-warm:#FFF7F2;
  --dot:#DED5C9; --track:#EFE7DC; --skel:#EFE9E1; --serp-mute:var(--serp-mute);
  --yes:#7ED9A2; --no:#E58080;

  --hero-visual-h:466px;
  /* Real height of the sticky bar: link padding 15+15, plus the 13px
     line box at the body's 1.65 line-height (21.45), plus the 2.5px
     active underline, plus the bar's own 1.5px bottom border = 55.45.
     Feeds .jump-target's scroll offset, so keep it honest. */
  --jump-h:56px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* Global overflow guard. Backstop only: anything that actually needs
   to shrink is handled in the mobile block at the end of this sheet.

   IT MUST BE overflow-x:clip, NEVER overflow-x:hidden.
   hidden turns html/body into a scroll container, and a sticky element
   sticks to its nearest scrolling ancestor. That container is exactly
   as tall as its content, so it has no scroll range, and the sticky
   jump nav silently scrolls away instead of staying at the top of the
   screen. clip gives the identical protection without creating a
   scroll container, so the nav keeps sticking to the viewport. */
html,body{max-width:100%}
html{overflow-x:clip}
img,svg,video,table{max-width:100%}

html body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
body h1,body h2,body h3,body .display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.12;letter-spacing:-0.015em}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1240px;margin:0 auto;padding:0}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 24px}
section{padding:88px 0}

/* Scroll offset for every jump-nav target, so a section never lands
   underneath the sticky bar. Applied by class, not by id, so adding a
   nav item only means adding the class to the new section. */
.jump-target{scroll-margin-top:calc(var(--jump-h) + 12px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);background:var(--paper)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.kicker{color:var(--slate);font-size:18px;max-width:60ch}
.accent{color:var(--orange)}
.btn{display:inline-block;font-weight:700;font-size:15.5px;border-radius:12px;padding:15px 28px;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn-primary{background:var(--orange);color:var(--paper);box-shadow:0 6px 18px rgba(232,80,26,.28)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--ink)}
.h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin-bottom:14px}
.h2 .accent{font-weight:800}
.sec-intro{color:var(--slate);max-width:64ch;margin-bottom:40px}
.card{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:28px}

/* ---- shared modifiers. These exist so the body carries no inline
   styles. Add new one-offs here, never as a style attribute. ---- */
.sec-h2{margin-top:18px}
.eyebrow-dark{background:transparent;border-color:var(--dark-line);color:var(--orange-lite)}
.link-orange{color:var(--orange-deep);font-weight:700;text-decoration:none}
.link-orange:hover{text-decoration:underline}

/* ============================================================
   01. HERO
   Padding, background treatment, diagonal lower edge, grid columns
   and gap, H1 and kicker sizing are all matched to the AI SEO page
   so the two heroes are the same length. The right-hand visual is
   locked to --hero-visual-h for the same reason. Do not add floating
   chips or callout labels around the visual.
   ============================================================ */
.hero{position:relative;padding:70px 0 86px;background:linear-gradient(165deg,var(--cream) 0%,var(--cream-warm) 46%,#fff 100%);overflow:hidden;-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px));clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px))}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--cream-deep) 1.2px,transparent 1.2px);background-size:24px 24px;opacity:.7;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(37px,4.8vw,56px);font-weight:800;margin:22px 0 18px;color:var(--ink)}
.hero .kicker{color:var(--slate);font-size:17.5px;max-width:58ch;margin-bottom:22px;line-height:1.72}
.kicker mark{background:linear-gradient(180deg,transparent 58%,var(--orange-line) 58%);color:var(--ink);font-weight:600;padding:0 2px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.hero-ctas .btn{padding:14px 22px;font-size:14.8px;white-space:nowrap}
.hero-chips{margin-top:0}
.hero-chips .chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.82);border-color:var(--cream-deep)}
.hero-chips .chip::before{content:"\2713";color:var(--orange);font-weight:800}

/* hero visual: one live campaign, every service in play.
   Height is locked so this hero ends level with the reference page. */
.hub-viz{position:relative;min-height:var(--hero-visual-h);display:flex;align-items:center;justify-content:center;padding:0 6px}
.hub-glow{position:absolute;inset:8% 3%;background:radial-gradient(ellipse at 55% 40%,rgba(232,80,26,.16),transparent 62%);filter:blur(4px);pointer-events:none}
.hub-stack{position:absolute;width:470px;max-width:92%;height:76%;background:var(--paper);border:1.5px solid var(--line);border-radius:22px;transform:rotate(-4deg) translate(-12px,8px);box-shadow:0 18px 44px rgba(28,24,20,.07)}
.hub-card{position:relative;width:min(470px,94%);background:var(--paper);border:1.5px solid var(--line);border-radius:22px;box-shadow:0 38px 90px rgba(28,24,20,.16),0 5px 16px rgba(28,24,20,.06);z-index:1;overflow:hidden}
.hub-bar{display:flex;align-items:center;gap:12px;padding:13px 18px;background:var(--cream);border-bottom:1.5px solid var(--line)}
.hub-dots{display:inline-flex;gap:5px}
.hub-dots i{width:9px;height:9px;border-radius:50%;background:var(--dot)}
.hub-url{flex:1;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:6px 15px;font-size:12.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-url b{color:var(--ink);font-weight:700}
.hub-body{padding:20px 24px 22px}
.hub-cap{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:4px}
.hub-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--cream-deep)}
.hub-row.last{border-bottom:none}
.hub-ic{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--cream);border:1.5px solid var(--cream-deep);display:flex;align-items:center;justify-content:center}
.hub-ic svg{width:18px;height:18px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hub-name{flex:1;line-height:1.35;min-width:0}
.hub-name b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.hub-name span{font-size:11.5px;color:var(--slate)}
.hub-pill{flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:.04em;border-radius:999px;padding:5px 12px;white-space:nowrap}
.hub-pill.live{background:var(--orange);color:var(--paper)}
.hub-pill.ok{background:var(--orange-soft);color:var(--orange-deep);border:1.5px solid var(--orange)}
.hub-pill.talk{border:1.5px solid var(--line);color:var(--slate);background:var(--paper)}
.hub-meter{margin-top:16px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:14px;padding:14px 16px}
.hub-meter-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.hub-meter-top .hm-l{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.hub-meter-top .hm-v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px}
.hub-meter-top .hm-v .accent{color:var(--orange)}
.hub-track{height:10px;border-radius:999px;background:var(--track);overflow:hidden}
.hub-fill{height:100%;width:72%;border-radius:999px;background:linear-gradient(90deg,var(--orange-lite),var(--orange));animation:hubgrow 1.6s cubic-bezier(.3,.7,.3,1) .3s both}
@keyframes hubgrow{from{width:14%}to{width:72%}}
.hub-meter-foot{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--slate);margin-top:9px;flex-wrap:wrap}
.hub-meter-foot b{color:var(--orange-deep);font-weight:700}
/* ============================================================
   02. STATS BAND
   Shared V2A component. House sizes, identical to the AI SEO, guest
   posting, niche edit and blogger outreach pages: 34px numeral, 12px
   label, 12.5px sub, 34px by 30px padding, four equal columns in a
   1240px container with side padding stripped (.wrap-wide). If this
   band ever looks different from the other service pages, this block
   has been edited and should be reverted.
   ============================================================ */
.stats-band{background:var(--dark)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}
.stat{padding:34px 30px;color:var(--paper)}
.stat:nth-child(even){background:var(--orange)}
.stat .st-num{font-family:'Bricolage Grotesque',sans-serif;font-size:34px;font-weight:800;line-height:1.05}
.stat .st-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:8px}
.stat .st-sub{font-size:12.5px;margin-top:5px;color:rgba(255,255,255,.78)}

/* ============================================================
   03. JUMP NAV
   Sticky, one anchor per major section plus the orange CTA. Scroll
   offset for the targets is .jump-target in block 00. The active
   state is set by the script at the end of the nav; without JS the
   links still work as ordinary anchors.
   ============================================================ */
.jump{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-bottom:1.5px solid var(--line)}
.jump-in{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.jump-in::-webkit-scrollbar{display:none}
.jump a{flex-shrink:0;padding:15px 14px;font-size:13px;font-weight:600;color:var(--slate);text-decoration:none;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .18s,border-color .18s}
.jump a:hover{color:var(--ink);border-bottom-color:var(--orange)}
.jump a.is-current{color:var(--ink);border-bottom-color:var(--orange)}
.jump .j-cta{margin-left:auto;background:var(--orange);color:var(--paper);border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;border-bottom:none}
.jump .j-cta:hover,.jump .j-cta.is-current{border-bottom-color:transparent;color:var(--paper)}

/* ============================================================
   04. DEFINITION
   ============================================================ */
.def-box{position:relative;background:var(--cream);border:1.5px solid var(--line);border-radius:20px;padding:38px 42px 34px;max-width:860px;margin:26px 0 30px}
.def-box .def-mark{position:absolute;top:-26px;left:30px;font-family:'Bricolage Grotesque',sans-serif;font-size:84px;font-weight:800;color:var(--orange);line-height:1}
.def-box p.def-text{font-size:19px;line-height:1.75}
.def-box .def-cap{margin-top:16px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep)}
.ai-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1.5px solid var(--line);border-radius:16px;padding:18px 24px;margin-bottom:28px}
.ai-strip .ai-label{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);white-space:nowrap}
.ai-strip .ai-chips{display:flex;gap:8px;flex-wrap:wrap}
.ai-strip .ai-chips span{border:1.5px solid var(--line);background:var(--cream);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:700}
.ai-strip p{flex:1;min-width:260px;font-size:14px;color:var(--slate);margin:0}
.def-rel{display:flex;align-items:center;gap:18px;background:var(--dark);border-radius:16px;padding:22px 28px;color:var(--paper);flex-wrap:wrap}
.def-rel .dr-big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;white-space:nowrap}
.def-rel .dr-txt{font-size:15px;color:var(--on-dark);flex:1;min-width:260px}
.def-rel .dr-txt strong{color:var(--paper)}

/* ============================================================
   05. PROBLEM
   ============================================================ */
.problem{background:var(--cream)}
.truth-line{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.truth-line .t1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;color:var(--ink)}
.truth-line .t-slash{color:var(--orange);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px}
.truth-line .t2{font-size:16px;color:var(--slate)}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prob{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:28px 26px;transition:border-color .15s,transform .15s;display:flex;flex-direction:column}
.prob:hover{border-color:var(--orange);transform:translateY(-3px)}
.prob .p-no{display:inline-flex;align-items:center;gap:8px;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.06em;margin-bottom:14px}
.prob .p-x{width:24px;height:24px;border-radius:8px;background:var(--cream);border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--orange-deep);font-size:12px;font-weight:800}
.prob h3{font-size:18px;margin-bottom:4px}
.prob .p-quote{font-size:13.5px;font-style:italic;color:var(--orange-deep);font-weight:600;margin-bottom:12px}
.prob p{font-size:14.5px;color:var(--slate)}
.prob-close{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--ink);border-radius:16px;padding:22px 28px;color:var(--paper)}
.prob-close .pc-txt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px}
.prob-close .pc-txt .accent{color:var(--orange)}
.prob-close a{white-space:nowrap;background:var(--orange);color:var(--paper);border-radius:999px;padding:10px 22px;font-size:13.5px;font-weight:700;text-decoration:none}
.prob-close a:hover{background:var(--orange-deep)}

/* ============================================================
   06. SERVICES
   Five cards in two rows: .svc-grid holds the three core services,
   .svc-grid2 holds custom and white label. To add a service,
   duplicate one .svc unit and edit its text.
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:28px 26px 24px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.svc:hover{border-color:var(--orange);transform:translateY(-3px)}
.svc .wc-num{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.06em}
.svc h3{font-size:19.5px;margin:10px 0 8px}
.svc .svc-line{font-size:14.5px;color:var(--slate)}
.svc .svc-best{margin:14px 0 2px;background:var(--cream);border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:9px 13px;font-size:13px;color:var(--ink);line-height:1.5}
.svc .svc-best b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:2px}
.svc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.svc ul{list-style:none;margin:12px 0 16px;border-top:1px solid var(--cream-deep);padding-top:12px;flex:1}
.svc li{position:relative;padding:5px 0 5px 24px;font-size:13.5px;color:var(--ink);line-height:1.5}
.svc li::before{content:"\2713";position:absolute;left:2px;color:var(--orange);font-weight:800}
.svc .svc-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--cream);border-radius:10px;padding:10px 14px;margin-bottom:16px}
.svc .svc-meta .sm-price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px}
.svc .svc-meta .sm-price small{font-size:11.5px;color:var(--slate);font-weight:600;font-family:'Inter'}
.svc .svc-meta .sm-time{font-size:11.5px;font-weight:700;color:var(--slate)}
.svc .btn{text-align:center;font-size:14px;padding:12px 16px;width:100%}
.pf{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:16px;padding:22px 24px;font-size:14px;color:var(--slate)}
.pf b{display:block;font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);margin-bottom:4px;font-size:15.5px}

/* ============================================================
   07. QUALITY SIGNALS
   ============================================================ */
.vet-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vet{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;gap:16px;transition:border-color .15s,transform .15s}
.vet:hover{border-color:var(--orange);transform:translateY(-2px)}
.vet .n{flex-shrink:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--orange);font-size:15px;width:34px;height:34px;border-radius:10px;background:var(--cream);display:flex;align-items:center;justify-content:center;margin-top:2px}
.vet h3{font-size:16px;margin-bottom:4px}
.vet p{font-size:14px;color:var(--slate)}
.vet-note{margin-top:30px;display:flex;gap:16px;align-items:baseline;background:var(--cream);border:1.5px solid var(--cream-deep);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:20px 26px;flex-wrap:wrap}
.vet-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap;font-size:15.5px}
.vet-note span{flex:1;min-width:260px;font-size:14.5px;color:var(--slate)}
.vet-note.on-paper{background:var(--paper)}

/* ============================================================
   08. PROCESS
   Steps collapse under JS (.pflow-js) and expand as you scroll.
   Without JS every step stays open, which is the intended fallback.
   ============================================================ */
.process-sec{background:var(--cream)}
.gate-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;border:1.5px solid var(--orange-deep);color:var(--orange-deep);border-radius:6px;padding:3px 9px;text-transform:uppercase}
.pflow{display:flex;flex-direction:column;gap:12px}
.pstep{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:20px 24px;transition:border-color .3s,background .3s,box-shadow .3s}
.pstep-head{display:flex;align-items:center;gap:18px}
.pstep-n{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--cream);color:var(--orange-deep);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.pstep h3{font-size:17px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.pstep-body{max-height:600px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s,margin .35s}
.pstep-body p{color:var(--slate);font-size:14.5px;margin:14px 0 0;padding-left:62px}
.pflow-js .pstep{opacity:.62}
.pflow-js .pstep .pstep-body{max-height:0;opacity:0}
.pflow-js .pstep.active{opacity:1;border-color:var(--orange);box-shadow:0 14px 36px rgba(232,80,26,.10)}
.pflow-js .pstep.active .pstep-n{background:var(--orange);color:var(--paper)}
.pflow-js .pstep.active .pstep-body{max-height:600px;opacity:1}
.proc-chips{margin-bottom:34px}

/* ============================================================
   09. CASE STUDY
   ============================================================ */
.case2-grid{display:grid;grid-template-columns:1fr .95fr;gap:40px;align-items:center}
.case-copy .cs-tag{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);margin:22px 0 6px}
.case-copy .cs-tag:first-child{margin-top:0}
.case-copy p{font-size:15px;color:var(--slate)}
.case-copy p strong{color:var(--ink)}
.serp-card{background:var(--paper);border:1.5px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(28,24,20,.10);overflow:hidden}
.serp-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--cream);border-bottom:1.5px solid var(--line)}
.serp-bar .hub-dots{flex-shrink:0}
.serp-bar .sb-pill{flex:1;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:5px 14px;font-size:12px;font-weight:600;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-rows{padding:8px 18px 18px}
.serp-row{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid var(--cream-deep)}
.serp-row .sr-pos{flex-shrink:0;width:26px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;color:var(--serp-mute);text-align:center}
.serp-row .sr-dot{flex-shrink:0;width:20px;height:20px;border-radius:6px;background:var(--cream);border:1.5px solid var(--line)}
.serp-row .sr-l{flex:1;min-width:0}
.serp-row .sr-l i{display:block;height:7px;border-radius:4px;background:var(--skel);margin:4px 0}
.serp-row .sr-l i.w60{width:60%}
.serp-row .sr-l i.w42{width:42%}
.serp-row .sr-l i.w52{width:52%}
.serp-row .sr-l i.w36{width:36%}
.serp-row .sr-l i.w48{width:48%}
.serp-row .sr-l i.w30{width:30%}
.serp-gap{text-align:center;color:var(--serp-mute);font-weight:800;letter-spacing:.3em;padding:6px 0 2px;font-size:13px}
.serp-row.you{margin:10px -6px 2px;padding:14px 12px;background:var(--cream-warm);border:1.5px solid var(--orange);border-radius:14px}
.serp-row.you .sr-pos{color:var(--orange-deep)}
.serp-row.you .sr-dot{background:var(--orange);border-color:var(--orange)}
.serp-row.you .sr-l b{display:block;font-size:13.5px;color:var(--ink);line-height:1.3}
.serp-row.you .sr-l span{font-size:11px;color:var(--orange-deep);font-weight:700}
.sr-jump{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--paper);border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:800;white-space:nowrap}
.sr-jump .up{color:var(--yes)}
.case-strip{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.case-stat{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:16px 14px;text-align:center;transition:border-color .15s,transform .15s}
.case-stat:hover{border-color:var(--orange);transform:translateY(-2px)}
.case-stat b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800}
.case-stat b .accent{color:var(--orange)}
.case-stat span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}

/* ============================================================
   10. COMPARISON
   Desktop is a three column table. On mobile the mobile block turns
   every row into a stacked card using the data-label attribute on
   each <td>, so new rows must carry data-label values.
   ============================================================ */
.compare-dark{background:var(--dark);color:var(--paper);border-top:4px solid var(--orange)}
.compare-dark .h2{color:var(--paper)}
.compare-dark .sec-intro{color:var(--on-dark)}
.compare-dark .eyebrow{background:transparent;border-color:var(--dark-line);color:var(--orange-lite)}
.tbl-scroll{overflow-x:auto;border-radius:18px;border:1.5px solid var(--dark-line)}
table.cmp{display:table;width:100%;border-collapse:collapse;min-width:780px;background:var(--dark-panel);font-size:14px;table-layout:fixed}
.cmp th,.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--dark-rule);vertical-align:top}
.cmp thead th{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:800;background:var(--dark-head);width:22%}
.cmp thead th.v2a{background:var(--orange);color:var(--paper);width:40%}
.cmp thead th:last-child{width:38%}
.cmp td:first-child{color:var(--line);font-weight:700;font-size:13px;width:22%}
.cmp td.v2a{background:rgba(232,80,26,.12);color:var(--paper);width:40%}
.cmp td{color:var(--on-dark-soft)}
.cmp .yes{color:var(--yes);font-weight:800;margin-right:7px}
.cmp .no{color:var(--no);font-weight:800;margin-right:7px}
.founder-note{margin-top:30px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;background:var(--dark-panel);border:1.5px solid var(--dark-line);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:22px 28px}
.founder-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;white-space:nowrap;color:var(--paper)}
.founder-note span{flex:1;min-width:280px;font-size:14.5px;color:var(--on-dark)}
.founder-note span strong{color:var(--orange-lite);font-weight:700}

/* ============================================================
   11. PRICING
   Category page: every card links to the child service page that
   owns that price. No checkout and no invoice modal here.
   ============================================================ */
.assure-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.assure-chips .chip{background:var(--cream);display:inline-flex;align-items:center;gap:7px;border-color:var(--cream-deep)}
.assure-chips .chip::before{content:"\2713";color:var(--orange);font-weight:800}
.pf-answer{margin-bottom:36px;border-left:4px solid var(--orange);border-radius:0 16px 16px 0}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.method{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 26px 22px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.method:hover{border-color:var(--orange);transform:translateY(-3px)}
.method .m-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.method .wc-num{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.06em}
.method h3{font-size:19px;margin:8px 0 6px}
.method p{font-size:14px;color:var(--slate);flex:1}
.method .m-price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;margin:14px 0 2px}
.method .m-price small{font-size:12.5px;color:var(--slate);font-weight:600;font-family:'Inter'}
.method a.m-link{margin-top:10px;font-weight:700;font-size:14px;color:var(--orange-deep);text-decoration:none}
.method a.m-link:hover{text-decoration:underline}
.method .m-price.m-price-sm{font-size:19px;padding:2px 0}
.price-cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.price-cta-row .hint{flex-basis:100%;font-size:13.5px;color:var(--slate);background:var(--cream);border:1.5px solid var(--cream-deep);border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:11px 15px;margin-bottom:4px}
.price-cta-row .hint b{color:var(--ink)}

/* ============================================================
   12. INDUSTRIES
   ============================================================ */
.industries{background:var(--cream)}
.ind-ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:8px}
.ind-row{display:flex;gap:16px;padding:22px 2px;border-bottom:1.5px solid var(--line)}
.ind-row .in{flex-shrink:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;color:var(--orange);margin-top:4px}
.ind-row h3{font-size:17.5px;margin-bottom:4px}
.ind-row p{font-size:14px;color:var(--slate)}
.ind-close{margin-top:32px;text-align:center;font-size:14.5px;color:var(--slate)}
.ind-close a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.ind-close a:hover{text-decoration:underline}

/* ============================================================
   13. FAQ
   Questions are grouped: #qflow holds .qgroup blocks, each with a
   label and its own .qflow list. The box style and the accordion
   behaviour are unchanged; grouping only adds the labelled wrapper.
   To add a question, duplicate a .qitem unit inside the right group.
   ============================================================ */
.qflow-wrap{margin-top:34px}
.faq-foot{margin-top:24px;color:var(--slate)}
.qgroup{margin-bottom:26px}
.qgroup:last-child{margin-bottom:0}
.qgroup>h3{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;padding-bottom:9px;border-bottom:1.5px solid var(--line);font-family:'Inter',sans-serif}
.qflow{display:flex;flex-direction:column;gap:10px}
.qitem{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:18px 22px;transition:border-color .3s,box-shadow .3s,opacity .3s}
.qitem-head{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.qitem-head h3{font-size:16px;font-weight:700;margin:0;color:var(--ink)}
.qitem-mark{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);position:relative;transition:border-color .3s,background .3s}
.qitem-mark::before,.qitem-mark::after{content:"";position:absolute;background:var(--slate);transition:background .3s,transform .3s}
.qitem-mark::before{left:5px;right:5px;top:9px;height:2px}
.qitem-mark::after{top:5px;bottom:5px;left:9px;width:2px}
.qitem-body{max-height:600px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s}
.qitem-body p{color:var(--slate);font-size:14.5px;margin:14px 0 0}
.qflow-js .qitem{opacity:.7}
.qflow-js .qitem .qitem-body{max-height:0;opacity:0}
.qflow-js .qitem.active{opacity:1;border-color:var(--orange);box-shadow:0 12px 30px rgba(232,80,26,.09)}
.qflow-js .qitem.active .qitem-mark{border-color:var(--orange);background:var(--orange)}
.qflow-js .qitem.active .qitem-mark::before,.qflow-js .qitem.active .qitem-mark::after{background:var(--paper)}
.qflow-js .qitem.active .qitem-mark::after{transform:rotate(90deg)}
.qflow-js .qitem.active .qitem-body{max-height:600px;opacity:1}

/* ============================================================
   14. CONTACT
   ============================================================ */
.cta-band{background:var(--dark);color:var(--paper);padding:96px 0}
.cta-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.cta-band h2{font-size:clamp(30px,4vw,44px);margin:18px 0 14px;color:#fff}
.cta-band .cta-sub{color:var(--on-dark);max-width:56ch;margin-bottom:24px}
.cta-band .chips{margin-bottom:0}
.cta-band .chip{background:transparent;border-color:var(--dark-chip);color:var(--paper-dim)}
.cta-micro{font-size:13px;color:var(--on-dark-soft);margin-top:18px}
.form-card{background:var(--paper);border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.f-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.f-field input,.f-field select,.f-field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:'Inter';font-size:14px;background:var(--cream);color:var(--ink)}
.f-field textarea{min-height:90px;resize:vertical}
.f-field-block{margin-bottom:16px}
.form-card .btn{width:100%;text-align:center;margin-top:6px}
.form-note{text-align:center;font-size:12px;color:var(--slate);margin-top:12px}

/* ============================================================
   15. FOOTER
   ============================================================ */
footer{background:var(--foot);color:var(--on-dark-soft);padding:34px 0;font-size:13px}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-base a{color:var(--on-dark);text-decoration:none}
.foot-base a:hover{color:var(--paper)}
.foot-brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--paper);font-size:15px}
.foot-brand i{font-style:normal;color:var(--orange)}

/* ============================================================
   16. MOBILE
   The only media queries in this file, ordered widest to narrowest.
   Anything that could push the page sideways is released here:
   fixed heights, white-space:nowrap, min-width on flex children,
   absolutely positioned decoration, and the comparison table, which
   becomes stacked cards rather than a sideways scroller.
   ============================================================ */
@media(max-width:1080px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .case2-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:980px){
  .svc-grid,.svc-grid2{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr 1fr}
  .case-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  section{padding:64px 0}
  .hero{padding:58px 0 70px}
  .hero-grid,.cta-grid{grid-template-columns:1fr;gap:34px}
  .stats-grid{grid-template-columns:1fr 1fr}

  /* ---- jump nav: every item on screen at once ----
     The desktop bar is a single scrolling row. On mobile that hides
     half the items behind a sideways scroll, so here it wraps into
     rows instead and the CTA becomes a full width pill on its own
     line. No horizontal scrolling, and the bar still sticks.
     --jump-h is re-stated for this taller bar so .jump-target keeps
     landing sections below it: measure again if you add nav items. */
  :root{--jump-h:140px}
  .jump-in{flex-wrap:wrap;justify-content:center;gap:2px;overflow-x:visible;padding-top:8px;padding-bottom:10px}
  .jump a{padding:9px 10px;font-size:12.5px;line-height:1.2;border-bottom:none;border-radius:8px}
  .jump a.is-current{color:var(--orange-deep);background:var(--orange-soft)}
  .jump .j-cta{flex:1 0 100%;margin-left:0;margin-top:6px;text-align:center;border-radius:999px;padding:12px 16px;font-size:13.5px}
  .ind-ledger{grid-template-columns:1fr;gap:0}
  .vet-grid,.prob-grid,.method-grid{grid-template-columns:1fr}

  /* hero visual: release the locked height, drop the decorative
     stacked card behind it, let the card use the full column */
  .hub-viz{min-height:0;padding:0;flex-direction:column}
  .hub-stack{display:none}
  .hub-card{width:100%}

  /* ---- label + body callouts become stacks ----
     These five are all "bold label, then body text" flex rows. Do NOT
     fix them by releasing min-width alone: the label keeps its own
     width, the text column collapses to a sliver, and the copy wraps
     one word per line. The row has to turn into a stack, label on its
     own line, body text underneath, both at full width. */
  .ai-strip,.def-rel,.vet-note,.founder-note,.prob-close,.truth-line{
    flex-direction:column;align-items:stretch;gap:12px}
  .ai-strip .ai-label,.def-rel .dr-big,.vet-note b,
  .founder-note b,.prob-close .pc-txt,.truth-line .t1{white-space:normal}
  .ai-strip p,.def-rel .dr-txt,.vet-note span,.founder-note span{
    flex:none;width:100%;min-width:0}
  .truth-line .t-slash{display:none}
  .truth-line{gap:6px;margin-bottom:30px}
  .prob-close a{text-align:center;white-space:normal}

  /* remaining nowrap releases that cannot force a collapse */
  .hero-ctas .btn,.hub-pill,.sr-jump{white-space:normal}
  .hero-ctas .btn{text-align:center}

  /* ---- comparison table becomes stacked cards ---- */
  .tbl-scroll{overflow-x:visible;border:none;border-radius:0}
  table.cmp{min-width:0;display:block;background:transparent}
  .cmp thead{display:none}
  .cmp tbody{display:block}
  .cmp tr{display:block;background:var(--dark-panel);border:1.5px solid var(--dark-line);border-radius:16px;padding:4px 0 10px;margin-bottom:14px}
  .cmp td,.cmp td:first-child,.cmp td.v2a{display:block;width:auto;border-bottom:none;padding:12px 18px}
  .cmp td:first-child{color:var(--orange-lite);font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding-bottom:2px}
  .cmp td.v2a{background:rgba(232,80,26,.12);border-radius:12px;margin:0 12px 10px}
  .cmp td[data-label]::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:6px}
  .cmp td.v2a[data-label]::before{color:var(--orange-lite)}
}
@media(max-width:640px){
  section{padding:52px 0}
  .f-row{grid-template-columns:1fr}
  .pstep-body p{padding-left:0}
  .form-card{padding:24px}

  /* Stats stay two by two here, so the numerals have to fit half a
     screen. Ours are words, not figures: "Permanent" is one unbreakable
     word and overflows at the desktop 34px. Shrink the numeral rather
     than dropping to one column, which makes the band very tall. */
  .stat{padding:26px 20px}
  .stat .st-num{font-size:26px;overflow-wrap:break-word}
  .def-box{padding:30px 24px 26px}
  .def-box .def-mark{left:22px;font-size:66px}
  .price-cta-row .btn{width:100%;text-align:center}

  /* callout padding tightens once the label sits on its own line */
  .vet-note,.founder-note{padding:18px 20px}
  .def-rel,.prob-close{padding:20px 22px}
  .ai-strip{padding:16px 20px}

  /* search-result card: the rank badge drops under the result line
     rather than squeezing the URL into a two-word column */
  .serp-row .sr-pos{width:20px}
  .sr-jump{padding:5px 10px;font-size:11px}
  .serp-row.you{flex-wrap:wrap}
  .serp-row.you .sr-l{min-width:150px}
  .serp-row.you .sr-jump{margin-left:32px}

  .svc .svc-meta{flex-direction:column;align-items:flex-start;gap:4px}
  .method .m-price{font-size:20px}
}
@media(max-width:460px){
  .case-strip{grid-template-columns:1fr 1fr;gap:10px}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
  .hub-row{gap:10px}
  .hub-ic{width:32px;height:32px}
  .hub-body,.hub-bar{padding-left:16px;padding-right:16px}
  .hub-meter-top{flex-direction:column;align-items:flex-start;gap:4px}
  .qitem{padding:16px 17px}
  .vet{padding:20px 18px}
  .ind-row{padding:20px 0}
  .stat{padding:22px 16px}
  .stat .st-num{font-size:23px}
  .jump a{padding:9px 8px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .hub-fill{animation:none}
  html{scroll-behavior:auto}
}