:root{
  --ink:#1C1814; --slate:#5C564E; --mute:#877F74; --line:#E8E2DA;
  --orange:#E8501A; --orange-deep:#C23E0E; --orange-soft:#FFF1E8; --orange-line:#F6CDB6;
  --cream:#FBF6F0; --cream-deep:#F5EBDF;
  --dark:#191512; --paper:#FFFFFF; --green:#1E8A5A;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Global overflow guard: nothing may push the page sideways on a phone.
   This MUST stay overflow-x:clip and never go back to overflow-x:hidden.
   hidden forces the computed overflow-y to auto, which makes the page a
   scroll container, and position:sticky then anchors to that container
   instead of the viewport, so the jump nav scrolls away. clip guards the
   same way without creating a scroll container, so sticky keeps working. */
html,body{max-width:100%;overflow-x:clip}
img,svg,video,table{max-width:100%}
/* offset so anchored sections are not hidden behind the sticky jump nav */
section[id],header[id],div[id]{scroll-margin-top:64px}
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}
section{padding:88px 0}
.sec-cream{background:var(--cream)}
.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:#fff;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:#fff}
.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:18px 0 14px}
.h2 .accent{font-weight:800}
.sec-intro{color:var(--slate);max-width:64ch;margin-bottom:40px}

/* ============================================================
   HERO
   Geometry matched to the AI SEO service page: same padding, same
   165deg cream gradient, same dot texture, same diagonal lower edge,
   same 1.02fr/.98fr grid at a 48px gap, same H1 and kicker sizing.
   The right column is locked by the .gsc-viz min-height so both
   heroes resolve to the same overall length. Do not change these
   numbers in isolation.
   ============================================================ */
.hero{position:relative;padding:70px 0 86px;background:linear-gradient(165deg,var(--cream) 0%,#FFF7F2 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;min-height:468px}
.hero h1{font-size:clamp(37px,4.8vw,56px);font-weight:800;margin:22px 0 18px;color:var(--ink)}
.hero .kicker{font-size:17.5px;max-width:58ch;line-height:1.72;margin-bottom:22px}
.kicker mark{background:linear-gradient(180deg,transparent 58%,#FFDCC9 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{display:flex;flex-wrap:wrap;gap:8px}
.hero-chips .chip{display:inline-flex;align-items:center;gap:7px;border-color:var(--cream-deep);background:rgba(255,255,255,.82);padding:6px 13px;font-size:12.6px}
.hero-chips .chip::before{content:"\2713";color:var(--orange);font-weight:800;font-size:10px}
.wl-line{margin-top:16px;font-size:13.5px;color:var(--slate);border-top:1px dashed var(--line);padding-top:12px}
.wl-line a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.wl-line a:hover{text-decoration:underline}

/* hero visual: a local visibility report, the way it actually looks.
   Static. No animation. Generic across industries. */
/* right column height lock. 468px = the reference page stage:
   412px orbit + the question pill above it. */
.gsc-viz{position:relative;min-height:468px;display:flex;align-items:center;justify-content:center;padding:0}
.gsc-glow{position:absolute;inset:8% 3%;background:radial-gradient(ellipse at 55% 40%,rgba(232,80,26,.14),transparent 62%);filter:blur(4px);pointer-events:none}
.gsc-stack{position:absolute;width:480px;max-width:92%;height:74%;background:#fff;border:1.5px solid var(--line);border-radius:22px;transform:rotate(-3.5deg) translate(-12px,10px);box-shadow:0 18px 44px rgba(28,24,20,.07)}
.gsc-card{position:relative;width:min(480px,94%);background:var(--paper);border:1.5px solid var(--line);border-radius:22px;box-shadow:0 38px 90px rgba(28,24,20,.15),0 5px 16px rgba(28,24,20,.06);z-index:1;overflow:hidden}
.gsc-bar{display:flex;align-items:center;gap:12px;padding:13px 18px;background:var(--cream);border-bottom:1.5px solid var(--line)}
.gsc-dots{display:inline-flex;gap:5px}
.gsc-dots i{width:9px;height:9px;border-radius:50%;background:#DED5C9}
.gsc-url{flex:1;background:#fff;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}
.gsc-url b{color:var(--ink);font-weight:700}
.gsc-body{padding:20px 24px 20px}
.gsc-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.gsc-cap .gc-t{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);display:block;margin-bottom:2px}
.gsc-cap .gc-big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;line-height:1}
.gsc-cap .gc-big .up{color:var(--green);font-size:15px;vertical-align:4px}
.gsc-cap .gc-big .was{color:#B7AFA3;font-size:20px;font-weight:700}
.gsc-cap .gc-s{font-size:11.5px;color:var(--slate);text-align:right;line-height:1.5}
.gsc-cap .gc-s b{display:block;color:var(--ink);font-size:13px}
.geo-wrap{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;border:1.5px solid var(--cream-deep);background:linear-gradient(180deg,#fff,var(--cream));border-radius:14px;padding:14px 16px;margin-bottom:14px}
.geo-grid{display:grid;grid-template-columns:repeat(5,22px);grid-auto-rows:22px;gap:5px}
.geo-grid i{border-radius:6px;background:#EFE7DC;position:relative}
.geo-grid i.g1{background:#7ED9A2}
.geo-grid i.g2{background:#A9E4C0}
.geo-grid i.g3{background:#F1A07E}
.geo-grid i.pin{background:var(--orange)}
.geo-grid i.pin::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.geo-cap b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:14.5px;margin-bottom:3px}
.geo-cap p{font-size:11.5px;color:var(--slate);line-height:1.55}
.geo-cap .geo-leg{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.geo-cap .geo-leg span{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--slate)}
.geo-cap .geo-leg i{width:9px;height:9px;border-radius:3px;display:inline-block}
.gsc-kw{border-top:1px solid var(--cream-deep);padding-top:12px}
.gkw{display:flex;align-items:center;gap:12px;padding:8px 0}
.gkw .k-t{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gkw .k-t span{display:block;font-size:11px;color:var(--slate);font-weight:500}
.gkw .k-jump{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:#fff;border-radius:999px;padding:4px 11px;font-size:11px;font-weight:800;white-space:nowrap}
.gkw .k-jump .up{color:#7ED9A2}
.gsc-foot{margin-top:8px;font-size:11px;color:var(--slate);display:flex;align-items:center;gap:7px}
.gsc-foot::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ============================================================
   STATS BAND
   Shared V2A component, copied from the live AI SEO, link building,
   guest posting and blogger outreach pages. House sizes: 34px
   numeral, 12px label, 12.5px sub, 34px by 30px padding, four equal
   columns inside a 1240px container with side padding stripped,
   collapsing to two columns on a phone. If this band ever looks
   different from the other service pages, it has been edited and
   should be reverted. Repeating unit: .stat
   ============================================================ */
.stats-band{background:var(--dark)}
.stats-wrap{max-width:1240px;margin:0 auto;padding:0}
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}
.stat{padding:34px 30px;color:#fff}
.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)}
.stat:nth-child(even) .st-sub{color:rgba(255,255,255,.9)}

/* ============================================================
   JUMP NAV  (sticky in-page anchors)
   Mirrors the AI SEO service page component. Elementor: build as an
   HTML widget pinned directly under the stats band. Add or remove
   links by editing the <a> tags only. Section offset is handled by
   the scroll-margin-top rule at the top of this stylesheet.
   ============================================================ */
.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 .j-cta{margin-left:auto;background:var(--orange);color:#fff;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;border-bottom:none}
.jump .j-cta:hover{border-bottom-color:transparent;color:#fff}

/* ============ PAIN ============ */
.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.prob{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 26px 24px;transition:border-color .15s,transform .15s}
.prob:hover{border-color:var(--orange);transform:translateY(-3px)}
.prob .p-no{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:12px}
.prob .p-no .p-x{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;color:var(--orange)}
.prob h3{font-size:18.5px;margin-bottom:8px}
.prob p{font-size:14px;color:var(--slate)}

/* ============ WHAT WE DO ============ */
.do-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.do{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:24px 22px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.do:hover{border-color:var(--orange);transform:translateY(-3px)}
.do .do-ic{width:42px;height:42px;border-radius:12px;background:var(--cream);border:1.5px solid var(--cream-deep);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.do .do-ic svg{width:20px;height:20px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.do h3{font-size:16px;margin-bottom:6px}
.do p{font-size:13px;color:var(--slate);flex:1}
.wtag{display:inline-block;align-self:flex-start;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep);background:#FFF1E8;border:1px solid #F6CDB6;border-radius:999px;padding:3px 9px;margin-bottom:10px}
.fs-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}
.fs-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap;font-size:15.5px}
.fs-note span{flex:1;min-width:260px;font-size:14.5px;color:var(--slate)}
.fs-note span strong{color:var(--ink)}
.fs-note a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.fs-note a:hover{text-decoration:underline}

/* ============ MONTHLY DELIVERABLES ============ */
.mo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mo-col{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.mo-col:hover{border-color:var(--orange);transform:translateY(-3px)}
.mo-col .mo-ic{width:42px;height:42px;border-radius:12px;background:var(--cream);border:1.5px solid var(--cream-deep);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.mo-col .mo-ic svg{width:20px;height:20px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mo-col h3{font-size:17px;margin-bottom:12px}
.mo-col ul{list-style:none;flex:1}
.mo-col li{position:relative;padding:6px 0 6px 24px;font-size:13.5px;color:var(--slate);line-height:1.55}
.mo-col li::before{content:"\2713";position:absolute;left:0;top:6px;color:var(--orange);font-weight:800;font-size:13px}
.mo-col li strong{color:var(--ink)}
.mo-cta{margin-top:34px;text-align:center}

/* ============ PRICING ============ */
/* ---- track chooser: the Local SEO / Local SEO + Website SEO switch.
        Two selectable cards rather than a pill toggle, so both options
        can be read before choosing and the live one is unmistakable.
        Selected state is driven by aria-pressed, which the pricing
        script already sets, so there is no extra class to maintain. ---- */
.track-head{margin-bottom:16px}
.track-head b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;color:var(--ink);margin-bottom:4px}
.track-head span{font-size:14px;color:var(--slate)}
.track{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:30px}
.trk{position:relative;display:flex;align-items:flex-start;gap:14px;text-align:left;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:20px 22px;cursor:pointer;font-family:'Inter',sans-serif;transition:border-color .18s,box-shadow .18s,background .18s}
.trk:hover{border-color:var(--orange-line)}
.trk:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.trk-dot{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);margin-top:3px;position:relative;transition:border-color .18s}
.trk-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--orange);transform:scale(0);transition:transform .18s}
.trk-body{display:block;min-width:0}
.trk-body b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:5px;line-height:1.25}
.trk-body em{display:block;font-style:normal;font-size:13px;color:var(--slate);line-height:1.6}
.trk-price{display:block;margin-top:10px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-deep)}
.trk-flag{position:absolute;top:-11px;left:20px;display:none;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--orange);color:#fff;border-radius:999px;padding:4px 12px}
.trk[aria-pressed="true"]{border-color:var(--orange);background:var(--orange-soft);box-shadow:0 14px 34px rgba(232,80,26,.13)}
.trk[aria-pressed="true"] .trk-dot{border-color:var(--orange)}
.trk[aria-pressed="true"] .trk-dot::after{transform:scale(1)}
.trk[aria-pressed="true"] .trk-flag{display:inline-block}
.seo-line{display:none;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--orange-deep);background:#FFF1E8;border:1.5px solid var(--orange);border-radius:999px;padding:4px 11px;margin-top:10px;width:fit-content}
.seo-on .seo-line{display:inline-flex}

/* ============ WEBSITE SEO PANEL ============ */
.seo-panel{display:none;background:var(--dark);border-radius:18px;padding:26px 30px;margin-bottom:30px;color:#fff;border-left:5px solid var(--orange)}
.seo-on-wrap .seo-panel{display:block}
.seo-panel .apx{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.seo-panel h3{font-size:19px;color:#fff}
.seo-panel h3 .accent{color:var(--orange)}
.seo-panel .ap-tag{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--orange);color:#fff;border-radius:999px;padding:4px 11px}
.ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ap{background:#211B15;border:1.5px solid #3A332C;border-radius:14px;padding:16px 18px}
.ap b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:14.5px;margin-bottom:4px}
.ap p{font-size:12.5px;color:#C9C2B8;line-height:1.5}
.seo-panel .ap-foot{margin-top:16px;font-size:12.5px;color:#9A9288}
.seo-panel .ap-foot a{color:#F1A07E;font-weight:700;text-decoration:none}
.seo-panel .ap-foot a:hover{text-decoration:underline}

/* plan cards */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{background:var(--paper);border:1.5px solid var(--line);border-radius:20px;padding:28px 24px 24px;display:flex;flex-direction:column;position:relative;transition:border-color .15s,transform .15s,box-shadow .15s}
.plan:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 18px 44px rgba(28,24,20,.08)}
.plan.hot{border:2px solid var(--orange);box-shadow:0 20px 50px rgba(232,80,26,.14)}
.plan .p-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 14px;white-space:nowrap}
.plan h3{font-size:20px}
.plan .p-gbp{display:inline-flex;align-items:center;gap:7px;margin-top:8px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--orange-deep)}
.plan .p-gbp::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.plan .p-for{font-size:12.5px;color:var(--slate);margin:10px 0 16px;min-height:56px;line-height:1.5}
.plan .p-pricebox{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.plan .p-start{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep)}
.plan .p-price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:29px;line-height:1.15}
.plan .p-price small{font-size:12px;color:var(--slate);font-weight:600;font-family:'Inter'}
.plan .p-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);margin:2px 0 6px}
.plan ul{list-style:none;margin:0 0 14px}
.plan li{position:relative;padding:4.5px 0 4.5px 21px;font-size:12.6px;color:var(--ink);line-height:1.5}
.plan li::before{content:"\2713";position:absolute;left:0;color:var(--orange);font-weight:800}
.plan ul.cap li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);top:11px}
.plan .p-seo{border-top:1.5px dashed var(--line);padding-top:12px;margin-top:2px;opacity:.5;transition:opacity .25s}
.plan .p-seo-lbl{opacity:.5;transition:opacity .25s}
.seo-on .plan .p-seo,.seo-on .plan .p-seo-lbl{opacity:1}
.plan .p-spacer{flex:1}
.plan .btn{text-align:center;font-size:13.5px;padding:12px 14px;width:100%}
.plan .p-alt{margin-top:9px;text-align:center;font-size:12px}
.plan .p-alt a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.plan .p-alt a:hover{text-decoration:underline}
.plan.custom{background:var(--dark);border-color:var(--dark);color:#fff}
.plan.custom h3{color:#fff}
.plan.custom .p-gbp{background:#211B15;border-color:#3A332C;color:#F1A07E}
.plan.custom .p-for{color:#C9C2B8}
.plan.custom .p-pricebox{background:#211B15;border-color:#3A332C}
.plan.custom .p-price{color:#fff;font-size:20px;padding:3px 0}
.plan.custom li{color:#E8E2DA}
.plan.custom .p-alt a{color:#F1A07E}

/* ============ BACKLINKS ACCORDION (native <details>, no JS) ============
   Copy stays in the HTML source, so search engines and AI crawlers read it
   whether it is open or closed. */
.acc{margin-top:26px;background:var(--paper);border:1.5px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.acc[open]{border-color:var(--orange);box-shadow:0 18px 44px rgba(232,80,26,.10)}
.acc-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:22px 26px;background:var(--cream);transition:background .2s}
.acc-sum::-webkit-details-marker{display:none}
.acc-sum:hover{background:var(--cream-deep)}
.acc-sum:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.acc-ic{flex-shrink:0;width:46px;height:46px;border-radius:14px;background:var(--paper);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center}
.acc-ic svg{width:21px;height:21px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.acc-t{flex:1;min-width:0}
.acc-t b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.acc-t em{display:block;font-style:normal;font-size:13px;color:var(--slate);margin-top:4px}
.acc-mark{flex-shrink:0;display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-deep);white-space:nowrap}
.acc-mark i{width:26px;height:26px;border-radius:50%;border:2px solid var(--orange);position:relative;display:inline-block}
.acc-mark i::before,.acc-mark i::after{content:"";position:absolute;background:var(--orange);transition:transform .3s}
.acc-mark i::before{left:6px;right:6px;top:11px;height:2px}
.acc-mark i::after{top:6px;bottom:6px;left:11px;width:2px}
.acc[open] .acc-mark i::after{transform:rotate(90deg)}
.acc[open] .acc-mark .m-open{display:none}
.acc .acc-mark .m-close{display:none}
.acc[open] .acc-mark .m-close{display:inline}
.acc-body{padding:24px 26px 26px;border-top:1.5px solid var(--line)}
.acc-body p{font-size:14.5px;color:var(--slate);max-width:74ch;line-height:1.75}
.acc-body p+p{margin-top:14px}
.acc-body p strong{color:var(--ink)}

/* pricing logic band */
.loc-band{margin-top:36px;background:var(--dark);border-radius:20px;padding:32px 36px;color:#fff;display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center}
.lb-viz{display:flex;flex-direction:column;gap:10px;align-items:center}
.lb-map{display:grid;grid-template-columns:repeat(3,44px);grid-auto-rows:44px;gap:7px}
.lb-map i{border-radius:10px;background:#2A241E;border:1.5px solid #3A332C;position:relative}
.lb-map i.hub{background:var(--orange);border-color:var(--orange)}
.lb-map i.hub::after{content:"";position:absolute;inset:14px;border-radius:50%;background:#fff}
.lb-map i.area{background:#8C4A2F;border-color:#8C4A2F}
.lb-map i.next{background:#211B15}
.lb-leg{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.lb-leg span{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:#C9C2B8;white-space:nowrap}
.lb-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.loc-band h3{font-size:20px;margin-bottom:8px;color:#fff}
.loc-band h3 .accent{color:var(--orange)}
.loc-band > div p{font-size:14px;color:#C9C2B8}
.lb-points{list-style:none;margin-top:14px}
.lb-points li{position:relative;padding:8px 0 8px 28px;font-size:14px;color:#C9C2B8;line-height:1.6}
.lb-points li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;border-radius:2px;background:var(--orange)}
.lb-points li b{color:#fff;font-weight:700}

.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)}
.price-foot{margin-top:22px;font-size:13px;color:var(--slate)}
.price-foot a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.price-foot a:hover{text-decoration:underline}

/* ============ PROCESS ============ */
.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;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}
.pstep-body .p-decide{margin:12px 0 4px;padding-left:62px;font-size:12.5px}
.pstep-body .p-decide span{display:inline-block;background:var(--cream);border:1.5px solid var(--cream-deep);border-left:3px solid var(--orange);border-radius:0 9px 9px 0;padding:8px 14px;font-weight:600;color:var(--ink)}
.pstep-body .p-decide b{color:var(--orange-deep);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:2px}
.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:#fff}
.pflow-js .pstep.active .pstep-body{max-height:600px;opacity:1}

/* ============ APPROACH (steps + mocks) ============ */
.appr{display:flex;flex-direction:column;gap:22px}
.arow{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;background:var(--paper);border:1.5px solid var(--line);border-radius:20px;padding:32px 36px;transition:border-color .15s}
.arow:hover{border-color:var(--orange)}
.arow.flip .a-txt{order:2}
.arow.flip .a-mock{order:1}
.a-step{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:10px}
.a-step::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.a-txt h3{font-size:22px;margin-bottom:10px}
.a-txt p{font-size:14.5px;color:var(--slate)}
.a-txt .a-tag{margin-top:14px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14.5px;color:var(--ink)}
.a-txt .a-tag .accent{color:var(--orange)}
.a-mock{background:linear-gradient(180deg,#fff,var(--cream));border:1.5px solid var(--cream-deep);border-radius:16px;padding:20px;box-shadow:0 14px 34px rgba(28,24,20,.06)}
.m-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.m-head b{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.m-head b svg{width:15px;height:15px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-head .m-pill{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:#E9F7EF;border-radius:999px;padding:3px 9px}
.m-gap{display:flex;flex-direction:column;gap:12px}
.m-gap .g-row b{display:flex;justify-content:space-between;align-items:baseline;font-family:'Inter';font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.m-gap .g-row b i{font-style:normal;color:var(--orange-deep);letter-spacing:.02em}
.g-bar{height:9px;border-radius:999px;background:#EFE7DC;position:relative;overflow:hidden;margin-top:5px}
.g-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.g-bar.you i{background:#D9CFC0}
.g-bar.top i{background:var(--orange)}
.m-gap .g-leg{display:flex;gap:14px;margin-top:2px}
.m-gap .g-leg span{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate)}
.m-gap .g-leg i{width:9px;height:9px;border-radius:3px;display:inline-block}
.m-list{list-style:none}
.m-list li{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12.5px;font-weight:600;border-bottom:1px dashed var(--line)}
.m-list li:last-child{border-bottom:none}
.m-list li::before{content:"\2713";flex-shrink:0;width:17px;height:17px;border-radius:50%;background:#E9F7EF;color:var(--green);font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.m-grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-grid9 i{aspect-ratio:1;border-radius:10px;background:#EFE7DC}
.m-grid9 i.c{background:var(--ink);position:relative}
.m-grid9 i.c::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--orange)}
.m-grid9 i.s{background:#D9CFC0}
.m-legend{display:flex;justify-content:space-between;margin-top:10px}
.m-legend span{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate)}
.m-bars{display:flex;align-items:flex-end;gap:8px;height:96px;padding:4px 2px 0}
.m-bars i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#F1A07E,var(--orange))}
.m-stats{display:flex;gap:14px;margin-top:12px}
.m-stats span{font-size:11px;font-weight:700;color:var(--slate)}
.m-stats b{color:var(--green)}
.m-locs{display:flex;gap:8px;justify-content:center;padding:8px 0 4px}
.m-locs i{width:44px;height:44px;border-radius:11px;background:var(--ink);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;font-style:normal}
.m-locs i.todo{background:#EFE7DC;color:#B7AFA3}
.m-loccap{display:flex;justify-content:space-between;margin-top:10px;padding:0 4px}
.m-loccap span{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate)}
.appr-cta{margin-top:32px;background:var(--dark);border-radius:20px;padding:30px 36px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.appr-cta .ac-t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px}
.appr-cta .ac-t span{display:block;font-family:'Inter';font-weight:500;font-size:13.5px;color:#C9C2B8;margin-top:5px}

/* ============ PROTECTED (dark) ============ */
.why-dark{background:var(--dark);color:#fff;border-top:4px solid var(--orange)}
.why-dark .h2{color:#fff}
.why-dark .sec-intro{color:#C9C2B8}
.why-dark .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.why{background:#211B15;border:1.5px solid #3A332C;border-radius:18px;padding:26px 24px;transition:border-color .15s,transform .15s}
.why:hover{border-color:var(--orange);transform:translateY(-3px)}
.why .w-ic{width:40px;height:40px;border-radius:11px;background:rgba(232,80,26,.14);border:1.5px solid rgba(232,80,26,.4);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.why .w-ic svg{width:19px;height:19px;stroke:#F1A07E;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.why h3{font-size:16.5px;margin-bottom:7px;color:#fff}
.why p{font-size:13.5px;color:#C9C2B8}
.why-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.why-cta .micro{font-size:13px;color:#9A9288}

/* ============ COMPARISON (dark) ============ */
.compare-dark{background:var(--dark);color:#fff}
.compare-dark .h2{color:#fff}
.compare-dark .sec-intro{color:#C9C2B8}
.compare-dark .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E}
.tbl-scroll{overflow-x:auto;border-radius:18px;border:1.5px solid #3A332C}
table.cmp{display:table;width:100%;border-collapse:collapse;min-width:760px;background:#211B15;font-size:14px;table-layout:fixed}
.cmp th,.cmp td{padding:14px 20px;text-align:left;border-bottom:1px solid #33291F;vertical-align:top}
.cmp thead th{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:800;background:#2A241E;width:22%}
.cmp thead th.v2a{background:var(--orange);color:#fff;width:40%}
.cmp thead th:nth-child(2){width:38%}
.cmp td:first-child{color:#E8E2DA;font-weight:700;font-size:13px;width:22%}
.cmp td.v2a{background:rgba(232,80,26,.12);color:#fff;width:40%}
.cmp td{color:#9A9288}
.cmp td.v2a b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15px}
.cmp td.v2a small{display:block;font-size:12.5px;color:#C9C2B8;margin-top:2px}

/* ============ INDUSTRIES ============ */
.ind-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ind-t{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:24px 22px 22px;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.ind-t:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 16px 40px rgba(28,24,20,.08)}
.ind-t::after{content:"";position:absolute;top:0;left:22px;right:auto;width:44px;height:3px;border-radius:0 0 4px 4px;background:var(--orange);opacity:0;transition:opacity .15s}
.ind-t:hover::after{opacity:1}
.ind-t .it-head{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.ind-t .it-ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--cream);border:1.5px solid var(--cream-deep);display:flex;align-items:center;justify-content:center}
.ind-t .it-ic svg{width:20px;height:20px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ind-t h3{font-size:16.5px}
.ind-t .sub-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.ind-t .sub-chips span{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;color:var(--ink)}
.ind-t p{font-size:13px;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}

/* ============ CONTACT / PLAN REQUEST (dark, final section) ============ */
.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}
.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}

/* ============ FAQ ============ */
.qgroup{margin-bottom:26px}
.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:1000px;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}
.qitem-body p a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.qitem-body p a:hover{text-decoration:underline}
.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:#fff}
.qflow-js .qitem.active .qitem-mark::after{transform:rotate(90deg)}
.qflow-js .qitem.active .qitem-body{max-height:1000px;opacity:1}
.faq-foot{margin-top:28px;text-align:center;font-size:14.5px;color:var(--slate)}
.faq-foot a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.faq-foot a:hover{text-decoration:underline}

.cta-band{background:var(--dark);color:#fff;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 h2 .accent{color:var(--orange)}
.cta-band .cta-sub{color:#C9C2B8;max-width:56ch;margin-bottom:24px}
.cta-band .cta-sub strong{color:#fff}
.cta-list{list-style:none;margin-bottom:22px}
.cta-list li{position:relative;padding:7px 0 7px 30px;font-size:15px;color:#E8E2DA}
.cta-list li::before{content:"\2713";position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:6px;background:rgba(232,80,26,.18);border:1.5px solid var(--orange);color:#F1A07E;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.cta-micro{font-size:13px;color:#9A9288;margin-top:18px}

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

/* ============================================================
   SMALL UTILITIES
   Classes that replace what used to be inline style attributes.
   Keep design decisions here, never back in the markup.
   ============================================================ */
.sw-top3{background:#7ED9A2}
.sw-mid{background:#F1A07E}
.sw-none{background:#EFE7DC}
.sw-orange{background:var(--orange)}
.sw-built{background:#8C4A2F}
.sw-you{background:#D9CFC0}
.sw-next{background:#211B15;border:1px solid #3A332C}
.p-lbl-dark{color:#F1A07E}
.why-dark .why-grid{margin-top:34px}
.compare-dark{border-top:1px solid #33291F}
.cta-band .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E}
.f-field-last{margin-bottom:16px}

/* ============================================================
   INVOICE REQUEST MODAL
   Opened by any element carrying data-open-invoice. There is no
   checkout on this page: the modal collects the request and the
   invoice is sent afterwards. Colors follow the same :root
   variables as the rest of the page.
   ============================================================ */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(26,21,15,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-card{position:relative;z-index:1;background:var(--paper);border-radius:20px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 40px 90px rgba(0,0,0,.4);animation:modal-in .22s ease-out}
@keyframes modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--slate);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.modal-x:hover{border-color:var(--orange);color:var(--orange-deep)}
.modal-body{padding:32px 34px 28px}
.modal-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border-radius:999px;padding:5px 13px;margin-bottom:14px}
.modal-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;color:var(--ink);margin-bottom:10px;line-height:1.2}
.modal-lede{font-size:14.5px;color:var(--slate);margin-bottom:22px;line-height:1.6}
.mf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mf-field{margin-bottom:14px;display:flex;flex-direction:column;min-width:0}
.mf-field label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.mf-field .req{color:var(--orange-deep)}
.mf-field .opt{color:var(--slate);font-weight:400}
.mf-field input,.mf-field select,.mf-field textarea{font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;width:100%;max-width:100%;transition:border-color .15s,box-shadow .15s}
.mf-field input::placeholder,.mf-field textarea::placeholder{color:#A69E93}
.mf-field input:focus,.mf-field select:focus,.mf-field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,80,26,.14)}
.mf-field textarea{resize:vertical}
.mf-total{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--ink);color:#fff;border-radius:12px;padding:15px 20px;margin-top:6px}
.mf-total-label{font-size:13.5px;font-weight:600;color:#C9C2B8}
.mf-total-amt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;white-space:nowrap}
.mf-total-note{font-size:12px;color:var(--slate);margin:10px 0 18px;line-height:1.55}
.mf-submit{width:100%;background:var(--orange);color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:15.5px;border:none;border-radius:12px;padding:15px;cursor:pointer;box-shadow:0 8px 22px rgba(232,80,26,.3);transition:transform .15s}
.mf-submit:hover{transform:translateY(-2px)}
.mf-submit:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mf-note{font-size:12.5px;color:var(--slate);text-align:center;margin-top:12px}
.modal-done{text-align:center;padding-top:44px}
.done-tick{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;font-size:28px;font-weight:800;margin-bottom:16px}
.modal-done .modal-lede{margin-bottom:24px}
.modal-done h3:focus{outline:none}

/* ============================================================
   MOBILE  (single consolidated breakpoint set)
   Everything responsive lives here so one place controls phones.
   Rules of this block: multi-column grids go to one card per row,
   fixed desktop heights release to auto, absolutely positioned
   decoration goes out of flow, the comparison table becomes stacked
   cards instead of scrolling sideways, and nothing keeps a
   min-width wider than the screen.
   ============================================================ */
@media(max-width:1080px){
  .do-grid{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr 1fr}
  .mo-grid{grid-template-columns:1fr}
  .ind-tiles{grid-template-columns:1fr 1fr}
  .ap-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .arow{grid-template-columns:1fr;gap:24px;padding:26px 24px}
  .arow.flip .a-txt{order:1}
  .arow.flip .a-mock{order:2}
  .loc-band{grid-template-columns:1fr}
}
@media(max-width:880px){
  .hero{padding:64px 0 78px}
  .hero-grid,.cta-grid{grid-template-columns:1fr}
  section{padding:66px 0}
  .prob-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  /* hero visual: height lock released, decorative back card removed */
  .hero-grid{min-height:0}
  .gsc-viz{min-height:0;padding:22px 0 0}
  .gsc-stack,.gsc-glow{display:none}
  .acc-sum{gap:14px;padding:18px 20px}
  .acc-mark span{display:none}
  .acc[open] .acc-mark .m-close{display:none}
  /* Jump nav on a phone: every link visible at once. The bar wraps
     into centered rows instead of scrolling sideways, and the CTA
     takes its own full-width row underneath. overflow-x must go back
     to visible here or the wrapped rows would be clipped. */
  .jump-in{flex-wrap:wrap;justify-content:center;overflow-x:visible;gap:0 2px;padding-top:8px;padding-bottom:10px}
  .jump a{padding:7px 10px;font-size:12px;border-bottom-width:2px}
  .jump .j-cta{margin-left:0;width:100%;text-align:center;padding:12px 16px;font-size:14px;border-radius:12px;margin-top:8px}
  /* taller bar, so anchored sections still land below it */
  section[id],header[id],div[id]{scroll-margin-top:146px}
}
@media(max-width:760px){
  .track{grid-template-columns:1fr;gap:12px}
  /* comparison table becomes stacked cards: no sideways scrolling */
  .tbl-scroll{overflow:visible;border:none;border-radius:0}
  table.cmp{min-width:0;background:transparent;display:block}
  .cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp thead{display:none}
  .cmp tr{background:#211B15;border:1.5px solid #3A332C;border-radius:16px;overflow:hidden;margin-bottom:14px}
  .cmp td{border-bottom:none;padding:14px 18px;width:auto}
  .cmp td:first-child{background:var(--dark);color:#fff;font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:11px 18px;width:auto}
  .cmp td:nth-child(2)::before{content:"Most agencies & freelancers";display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
  .cmp td.v2a{width:auto;border-top:1.5px solid #3A332C}
  .cmp td.v2a::before{content:"Visual2Action";display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#F1A07E;margin-bottom:5px}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  .f-row,.mf-row{grid-template-columns:1fr;gap:0}
  .do-grid,.plan-grid,.ind-tiles,.mo-grid{grid-template-columns:1fr}
  .geo-wrap{grid-template-columns:1fr}
  .gsc-cap{gap:8px}
  .gsc-cap .gc-s{text-align:left}
  .pstep-body p,.pstep-body .p-decide{padding-left:0}
  /* nothing keeps a fixed size or a nowrap that is wider than a phone */
  .plan .p-for{min-height:0}
  .plan .p-gbp{white-space:normal}
  .hero-ctas{gap:10px}
  .hero-ctas .btn{width:100%;text-align:center;white-space:normal}
  .lb-leg span{white-space:normal}
  /* label above its paragraph, each on a full-width row. Without this
     the paragraph shares the row with the label and wraps two words
     at a time. Repeat this pattern for any future label + prose strip. */
  .fs-note{flex-direction:column;gap:8px;padding:18px 20px;border-radius:0 14px 14px 0}
  .fs-note b{white-space:normal}
  .fs-note span{flex:none;min-width:0;width:100%}
  .gkw .k-t,.geo-cap,.a-txt{min-width:0}
  .m-bars{height:76px}
  .m-locs i{width:38px;height:38px;font-size:13px}
  /* type steps down so headings never force a horizontal scroll */
  .hero h1{font-size:clamp(28px,7.6vw,37px)}
  .h2{font-size:clamp(24px,6.4vw,30px)}
  .hero .kicker{font-size:16px}
  .stat{padding:26px 20px}
  .stat .st-num{font-size:26px}
  .stat .st-label{font-size:11px;letter-spacing:.09em}
  .qitem{padding:15px 16px}
  .qitem-head h3{font-size:15px}
  .appr-cta,.price-cta-row{gap:14px}
  .price-cta-row .btn,.why-cta .btn,.appr-cta .btn,.mo-cta .btn{width:100%;text-align:center}
  .form-card{padding:24px 20px}
  /* track chooser: one card per row so both stay fully readable */
  .trk{padding:17px 18px}
  .track-head b{font-size:17px}
  .loc-band,.seo-panel{padding:26px 22px}
  .arow{padding:22px 18px}
  section{padding:56px 0}
}
@media(max-width:600px){
  .modal{padding:12px}
  .modal-body{padding:26px 20px 22px}
  .modal-card h3{font-size:21px}
  .mf-total{flex-direction:column;align-items:flex-start;gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .modal-card{animation:none}
  html{scroll-behavior:auto}
}