/* ============================================================
   V2A WHITE LABEL LINK BUILDING. SINGLE STYLESHEET.
   Order of this file:
     01. TOKENS AND BASE
     02. SHARED COMPONENTS (buttons, eyebrow, section head, chips)
     03. HERO
     04. STATS BAND
     05. JUMP NAV
     06. DEFINITION
     07. PAIN
     08. SERVICES
     09. PROCESS
     10. PRICING
     11. BEYOND
     12. COMPARISON
     13. FAQ
     14. CONTACT AND FOOTER
     15. INVOICE MODAL
     16. MOBILE (all responsive rules, nothing above this line)
   Add new components above 16. Never add a media query outside 16.
   ============================================================ */

/* ============ 01. TOKENS AND BASE ============ */
: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;
  --jump-h:54px; /* sticky nav height, drives scroll offset below */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Global overflow guard. Nothing on this page may push the document
   sideways on a narrow screen. If something ever does, fix the child
   rather than deleting these lines.
   IMPORTANT: this uses overflow-x:clip, NOT overflow-x:hidden. Hidden
   turns html and body into scroll containers, and a sticky element
   then sticks to that container instead of the viewport, which would
   silently kill the sticky jump nav on mobile. Clip guards against
   sideways overflow without creating a scroll container, so sticky
   keeps working. Do not swap it back to hidden. */
html,body{max-width:100%;overflow-x:clip}
html body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg,table{max-width:100%}
body h1,body h2,body h3,body h4,body .display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.12;letter-spacing:-0.015em}
.wrap{max-width:1150px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
/* Anchored sections clear the sticky jump nav instead of hiding behind it. */
section[id],header[id]{scroll-margin-top:calc(var(--jump-h) + 12px)}
.sec-cream{background:var(--cream)}
.accent{color:var(--orange)}
a{color:inherit}

/* ============ 02. SHARED COMPONENTS ============ */
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);background:var(--paper)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.h2{font-size:clamp(29px,3.7vw,42px);font-weight:800;margin:18px 0 0}
.lede{font-size:clamp(16.5px,1.75vw,19px);line-height:1.68;font-weight:400;color:var(--slate);max-width:62ch;margin-top:13px}
.lede strong{color:var(--ink);font-weight:600}
.sec-head{margin-bottom:44px;padding-bottom:26px;border-bottom:1.5px solid var(--line)}
.sec-intro{color:var(--slate);max-width:64ch;margin-bottom:40px}

.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;border:none;cursor:pointer;font-family:'Inter',sans-serif}
.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)}
.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}

/* ============ 03. HERO ============
   Sized to match the AI SEO page exactly: same padding, same diagonal
   lower edge, same dot texture, same grid columns and gap, same H1 and
   kicker scale. The right column is locked to 467px on desktop so both
   heroes resolve to the same total length. Height releases to auto on
   mobile (see 16. MOBILE). */
.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}
.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%,#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-terms{display:flex;flex-wrap:wrap;gap:8px}
.hero-terms span{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--cream-deep);background:rgba(255,255,255,.82);border-radius:999px;padding:6px 13px;font-size:12.6px;font-weight:600;color:var(--ink)}
.hero-terms span::before{content:"\2713";color:var(--orange);font-weight:800;font-size:10px}

/* -- hero visual: the two sides of a white label engagement -- */
.wl-viz{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:467px}
.wl-glow{position:absolute;inset:4% 2%;background:radial-gradient(ellipse at 55% 44%,rgba(232,80,26,.14),transparent 64%);pointer-events:none}
.wl-switch{position:relative;z-index:3;display:inline-flex;gap:4px;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:4px;margin-bottom:16px;box-shadow:0 10px 26px rgba(28,24,20,.07)}
.wls{border:none;background:transparent;font-family:'Inter',sans-serif;font-size:12.6px;font-weight:700;color:var(--slate);border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
.wls.active{background:var(--ink);color:#fff}
.wls:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.wl-stage{position:relative;width:min(430px,100%);height:404px;z-index:1}
.wl-card{position:absolute;inset:0;background:var(--paper);border:1.5px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .45s,box-shadow .55s;display:flex;flex-direction:column}
.wl-front{z-index:2;box-shadow:0 34px 80px rgba(28,24,20,.16),0 5px 16px rgba(28,24,20,.06)}
.wl-back{z-index:1;transform:rotate(-5deg) translate(-14px,12px) scale(.985);opacity:.5;box-shadow:0 18px 44px rgba(28,24,20,.07)}
.wl-stage.show-back .wl-front{z-index:1;transform:rotate(5deg) translate(14px,12px) scale(.985);opacity:.5;box-shadow:0 18px 44px rgba(28,24,20,.07)}
.wl-stage.show-back .wl-back{z-index:2;transform:none;opacity:1;box-shadow:0 34px 80px rgba(28,24,20,.16),0 5px 16px rgba(28,24,20,.06)}
.wl-bar{display:flex;align-items:center;gap:12px;padding:12px 17px;background:var(--cream);border-bottom:1.5px solid var(--line)}
.wl-bar.darkbar{background:var(--dark);border-bottom-color:#33291F}
.wl-dots{display:inline-flex;gap:5px;flex-shrink:0}
.wl-dots i{width:8px;height:8px;border-radius:50%;background:var(--cream-deep)}
.darkbar .wl-dots i{background:#3A332C}
.wl-file{flex:1;min-width:0;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:5px 14px;font-size:12px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-file b{color:var(--ink);font-weight:700}
.darkbar .wl-file{background:#211B15;border-color:#3A332C;color:#C9C2B8}
.darkbar .wl-file b{color:#fff}
.wl-body{padding:16px 20px 18px;flex:1;display:flex;flex-direction:column}
.wl-cap{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:2px}
.wl-brandline{display:flex;align-items:center;gap:9px;margin-bottom:10px}
/* Neutral placeholder mark. Deliberately an abstract shape, not a
   letterform, so it cannot be mistaken for any real company logo. */
.wl-logo{width:26px;height:26px;border-radius:8px;background:var(--ink);flex-shrink:0;position:relative}
.wl-logo::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:3px;border:2px solid var(--orange)}
.wl-brandline b{font-size:12.6px}
.wl-brandline em{font-style:normal;font-size:10.6px;color:var(--mute);display:block}
.wl-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--cream-deep)}
.wl-row.last{border-bottom:none}
.wl-ic{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:var(--cream);border:1.5px solid var(--cream-deep);display:flex;align-items:center;justify-content:center}
.wl-ic svg{width:16px;height:16px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wl-name{flex:1;line-height:1.34;min-width:0}
.wl-name b{display:block;font-size:12.8px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-name span{font-size:10.8px;color:var(--slate);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-pill{flex-shrink:0;font-size:10px;font-weight:800;border-radius:999px;padding:4px 10px;white-space:nowrap}
.wl-pill.live{background:var(--orange);color:#fff}
.wl-pill.ok{background:var(--orange-soft);color:var(--orange-deep);border:1.5px solid var(--orange)}
.wl-pill.wait{border:1.5px solid var(--line);color:var(--slate);background:var(--paper)}
.wl-foot{margin-top:auto;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:13px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.wl-foot b{font-family:'Bricolage Grotesque',sans-serif;font-size:12.8px}
.wl-foot span{font-size:11px;color:var(--slate)}
.wl-foot .ok-mark{color:var(--orange-deep);font-weight:800}

/* ============ 04. STATS BAND ============
   Shared V2A component. Identical to the AI SEO, link building, 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 no side padding, two columns under 880px. If
   this band ever looks different from the other service pages, it has
   been edited here and should be reverted. */
.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)}

/* ============ 05. JUMP NAV ============
   Sticky on every screen size. One anchor per major section plus the
   orange CTA. Anchors scroll to the ids listed in build note 4. */
.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;-webkit-overflow-scrolling:touch}
.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}
/* Each anchor carries a full desktop label and a short phone label.
   Only one is ever visible. Edit both when you rename a link. */
.jump a .j-short{display:none}
.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:#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}
.jump .j-cta.is-current{border-bottom-color:transparent}

/* ============ 06. 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:240px;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:#fff;flex-wrap:wrap}
.def-rel .dr-big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px}
.def-rel .dr-txt{font-size:15px;color:#C9C2B8;flex:1;min-width:240px}
.def-rel .dr-txt strong{color:#fff}

/* ============ 07. PAIN ============ */
.prob-grid{display:grid;grid-template-columns:1fr 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;flex-shrink:0}
.prob h3{font-size:18px;margin-bottom:8px}
.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:#fff}
.prob-close .pc-txt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;flex:1;min-width:260px}
.prob-close .pc-txt .accent{color:var(--orange)}
.prob-close .pc-sub{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:13.5px;color:#C9C2B8;margin-top:6px}
.prob-close a{background:var(--orange);color:#fff;border-radius:999px;padding:10px 22px;font-size:13.5px;font-weight:700;text-decoration:none}
.prob-close a:hover{background:var(--orange-deep)}

/* ============ 08. SERVICES ============ */
.stabs{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.stab-rail{display:flex;flex-direction:column;gap:8px}
.stab{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:13px;padding:14px 18px;cursor:pointer;font-family:'Inter',sans-serif;transition:border-color .15s,background .15s,transform .15s}
.stab b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.stab i{font-style:normal;display:block;font-size:11.5px;color:var(--slate);font-weight:600;margin-top:1px}
.stab .stab-arrow{color:#CFC7BB;font-weight:800;transition:color .15s;flex-shrink:0}
.stab:hover{border-color:var(--orange);transform:translateX(2px)}
.stab.active{border-color:var(--orange);background:var(--orange-soft)}
.stab.active .stab-arrow{color:var(--orange)}
.spanel{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:30px 32px;margin-bottom:18px}
.spanel:last-child{margin-bottom:0}
/* With JavaScript off every panel stays visible and stacks. The script
   adds .stabs-js, which is what turns the stack into tabs. */
.stabs-js .spanel{display:none;margin-bottom:0}
.stabs-js .spanel.active{display:block}
.spanel .sp-kind{font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--orange)}
.spanel h3{font-size:22px;margin:8px 0 10px}
.spanel .sp-desc{font-size:15px;color:var(--slate);margin-bottom:16px;max-width:58ch}
.svc-best{background:var(--cream);border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:10px 14px;font-size:13.5px;color:var(--ink);line-height:1.5;margin-bottom:16px}
.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}
.sp-chips{margin-bottom:18px}
.sp-chips .chip{background:var(--cream);border-color:var(--cream-deep);font-size:12.5px;padding:6px 13px}
.sp-price{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:13px;padding:13px 18px;margin-bottom:18px}
.sp-price .spp-main{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px}
.sp-price .spp-main small{font-size:12px;color:var(--slate);font-weight:600;font-family:'Inter',sans-serif}
.sp-price .spp-ten{font-size:12.5px;font-weight:700;color:var(--orange-deep)}
.sp-price .spp-note{font-size:12px;color:var(--slate);flex-basis:100%}
.sp-links{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.m-link{font-weight:700;font-size:14px;color:var(--orange-deep);text-decoration:none}
.m-link:hover{text-decoration:underline}
.reports-strip{margin-top:22px;display:flex;gap:16px;align-items:center;background:var(--dark);border-radius:16px;padding:20px 26px;color:#fff;flex-wrap:wrap}
.reports-strip .rs-ic{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:var(--orange);display:flex;align-items:center;justify-content:center}
.reports-strip .rs-ic svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reports-strip b{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;display:block}
.reports-strip p{flex:1;min-width:260px;font-size:13.5px;color:#C9C2B8;margin:0}

/* ============ 09. PROCESS ============ */
.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}
.proc-chips{margin-bottom:34px}
.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,box-shadow .3s,opacity .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:900px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s}
.pstep-body p{color:var(--slate);font-size:14.5px;margin:14px 0 0;padding-left:62px}
.pstep-body .gate-line{margin:10px 0 4px;padding-left:62px;font-size:13.5px;color:var(--ink)}
.pstep-body .gate-line b{color:var(--orange-deep)}
.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:900px;opacity:1}
.proc-close{margin-top:36px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--paper);border:1.5px solid var(--line);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:24px 28px}
.proc-close b{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;flex:1;min-width:260px}

/* ============ 10. PRICING ============ */
.assure-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.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}
.rate-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.rate-toggle{display:inline-flex;gap:4px;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:4px;box-shadow:0 6px 18px rgba(28,24,20,.06)}
.rt-btn{border:none;background:transparent;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:var(--slate);border-radius:999px;padding:9px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s;white-space:nowrap}
.rt-btn .save-tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;background:var(--orange-soft);color:var(--orange-deep);border:1px solid var(--orange);border-radius:999px;padding:2px 8px}
.rt-btn.active{background:var(--ink);color:#fff}
.rt-btn.active .save-tag{background:var(--orange);color:#fff;border-color:var(--orange)}
.rt-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.rate-note{font-size:13px;color:var(--slate)}
.ptables{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.psvc{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.psvc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:20px 24px 14px;border-bottom:1.5px solid var(--cream-deep)}
.psvc-head h3{font-size:18.5px}
.psvc-head span{font-size:12px;font-weight:700;color:var(--slate)}
.prow{display:flex;align-items:center;gap:16px;padding:17px 24px;border-bottom:1px solid var(--cream-deep)}
.prow .pr-info{flex:1;min-width:0}
.prow .pr-info b{display:block;font-size:14.5px;font-weight:700}
.prow .pr-info .pop{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--orange);color:#fff;border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:2px;white-space:nowrap}
.prow .pr-info span{display:block;font-size:12px;color:var(--slate);margin-top:2px}
.prow .pr-price{flex-shrink:0;text-align:right;line-height:1.3}
.prow .p-one,.prow .p-ten{display:block}
.prow .p-one{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;color:var(--ink)}
.prow .p-one small,.prow .p-ten small{font-size:11px;font-weight:600;font-family:'Inter',sans-serif;color:var(--slate)}
.prow .p-ten{font-size:12px;font-weight:700;color:var(--orange-deep)}
/* Volume rate view. Toggled by adding .rate-ten to #ptables. */
.rate-ten .prow .p-one{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--slate);text-decoration:line-through;text-decoration-color:rgba(194,62,14,.55)}
.rate-ten .prow .p-one small{display:none}
.rate-ten .prow .p-ten{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;color:var(--orange-deep)}
.rate-ten .prow .p-ten small{font-size:11px}
.psvc-foot{padding:13px 24px;background:var(--cream);font-size:12.5px;color:var(--slate);border-top:1.5px solid var(--cream-deep)}
.psvc-cta{display:flex;gap:10px;flex-wrap:wrap;padding:16px 24px 20px;border-top:1.5px solid var(--cream-deep);margin-top:auto}
.psvc-cta .btn{flex:1 1 200px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:14px;line-height:1.35;padding:12px 14px;white-space:normal}
.psvc-cta .btn small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.72}
.wl-extra{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.xcard{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.xcard:hover{border-color:var(--orange);transform:translateY(-3px)}
.xcard h3{font-size:18.5px;margin-bottom:8px}
.xcard .x-price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;margin-bottom:10px}
.xcard .x-price small{font-size:12px;color:var(--slate);font-weight:600;font-family:'Inter',sans-serif}
.xcard p{font-size:14px;color:var(--slate);flex:1}
.xcard .x-note{margin:14px 0;background:var(--cream);border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:10px 14px;font-size:13px;color:var(--ink);flex:none}
.margin-strip{margin-top:22px;display:flex;gap:16px;align-items:baseline;background:var(--dark);border-radius:16px;padding:22px 28px;color:#fff;flex-wrap:wrap}
.margin-strip b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px}
.margin-strip span{flex:1;min-width:260px;font-size:14.5px;color:#C9C2B8}
.margin-strip span strong{color:#F1A07E;font-weight:700}
.price-cta-row{margin-top:30px;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)}

/* ============ 11. BEYOND ============ */
.beyond{background:var(--dark);color:#fff;border-top:4px solid var(--orange)}
.beyond .h2{color:#fff}
.beyond .lede,.beyond .sec-intro{color:#C9C2B8}
.beyond .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E}
.beyond .sec-head{border-bottom-color:#33291F}
.bey-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.bey-row{display:flex;gap:18px;padding:24px 2px;border-bottom:1.5px solid #33291F}
.bey-row .bn{flex-shrink:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;color:var(--orange);margin-top:4px}
.bey-row h3{font-size:17px;margin-bottom:5px;color:#fff}
.bey-row p{font-size:13.5px;color:#9A9288}
.bey-close{margin-top:34px;text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(18px,2.4vw,24px);line-height:1.4}
.bey-close .accent{color:var(--orange)}

/* ============ 12. COMPARISON ============
   Desktop renders a real table. Under 880px the same markup renders as
   stacked cards, one card per route, using data-label on each cell.
   Never add horizontal scrolling here: see 16. MOBILE. */
.compare4{background:var(--cream)}
.cmp-wrap{border-radius:18px;border:1.5px solid var(--line);background:var(--paper);overflow:hidden}
table.cmp4{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.cmp4 th,.cmp4 td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--cream-deep);vertical-align:top}
.cmp4 thead th{font-family:'Bricolage Grotesque',sans-serif;font-size:14.5px;font-weight:800;background:var(--cream);border-bottom:1.5px solid var(--line);width:21%}
.cmp4 thead th small{display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;color:var(--slate);letter-spacing:.02em;margin-top:2px}
.cmp4 thead th.v2a{background:var(--orange);color:#fff}
.cmp4 thead th.v2a small{color:rgba(255,255,255,.85)}
.cmp4 th:first-child,.cmp4 td:first-child{width:15%}
.cmp4 td:first-child{font-weight:700;font-size:12.5px;color:var(--ink)}
.cmp4 td{color:var(--slate);width:21%}
.cmp4 td.v2a{background:#FFF3EC;color:var(--ink);border-bottom-color:var(--orange-line)}
.cmp4 td.v2a b{color:var(--orange-deep)}
.cmp4 tbody tr:last-child td{border-bottom:none}

/* ============ 13. FAQ ============
   Grouped into labelled sets. Adding a group means copying one
   .qgroup unit; the accordion script picks up new items automatically. */
.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:9px}
.qitem{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:17px 21px;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:15.6px;font-weight:700;margin:0;color:var(--ink);line-height:1.4}
.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:1200px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s}
.qitem-body p{color:var(--slate);font-size:14.4px;margin:14px 0 0;line-height:1.8;max-width:82ch}
.qitem-body p strong{color:var(--ink)}
.qflow-js .qitem{opacity:.72}
.qflow-js .qitem .qitem-body{max-height:0;opacity:0}
.qflow-js .qitem.active{opacity:1;border-color:var(--orange);box-shadow:0 14px 32px rgba(232,80,26,.1)}
.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:1200px;opacity:1}
.faq-foot{margin-top:24px;color:var(--slate);font-size:14.5px}
.faq-foot a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.faq-foot a:hover{text-decoration:underline}

/* ============ 14. CONTACT AND FOOTER ============ */
.cta-band{position:relative;background:var(--dark);color:#fff;padding:96px 0;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:24px 24px}
.cta-grid{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.cta-band .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E}
.cta-band h2{font-size:clamp(29px,3.9vw,44px);margin:18px 0 14px;font-weight:800;color:#fff}
.cta-band .cta-sub{color:#C9C2B8;max-width:54ch;margin-bottom:24px;font-size:16px;line-height:1.75}
.cta-band .chip{background:transparent;border-color:#4A4239;color:#F1ECE4}
.cta-micro{font-size:13px;color:#9A9288;margin-top:18px;line-height:1.7}
.cta-micro a{color:#F1A07E;font-weight:700;text-decoration:none}
.form-card{background:var(--paper);border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.32)}
.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',sans-serif;font-size:14px;background:var(--cream);color:var(--ink)}
.f-field textarea{min-height:84px;resize:vertical}
/* Utility: a field that sits on its own row rather than in a .f-row. */
.f-field.solo{margin-bottom:16px}
.form-card .btn{width:100%;text-align:center;margin-top:6px}
.form-note{text-align:center;font-size:12px;color:var(--mute);margin-top:12px;line-height:1.6}

/* Smaller section heading, used by the More Services block. */
.h2-sm{font-size:clamp(22px,2.8vw,28px)}
.more-svc{padding:64px 0}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px}
.more-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:18px 20px;text-decoration:none;transition:border-color .15s,transform .15s}
.more-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.more-card b{font-family:'Bricolage Grotesque',sans-serif;font-size:14.5px;color:var(--ink)}
.more-card span{color:var(--orange);font-weight:800}
.more-note{margin-top:22px;font-size:14px;color:var(--slate)}
.more-note a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.more-note a:hover{text-decoration:underline}

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)}

/* ============ 15. INVOICE MODAL ============
   No checkout on this page. Any element carrying data-invoice opens
   this one modal; the attributes on the trigger supply the service
   name and its tier prices, so a new trigger needs no new code. */
.imodal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px}
.imodal.open{display:flex}
.imodal-back{position:absolute;inset:0;background:rgba(25,21,18,.62);backdrop-filter:blur(3px)}
.imodal-card{position:relative;z-index:1;width:min(560px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:var(--paper);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.im-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:24px 26px 18px;border-bottom:1.5px solid var(--line)}
.im-head h3{font-size:20px;margin-bottom:4px}
.im-head p{font-size:13px;color:var(--slate);line-height:1.6}
.im-x{flex-shrink:0;width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);color:var(--slate);font-size:19px;line-height:1;cursor:pointer;font-family:'Inter',sans-serif}
.im-x:hover{border-color:var(--orange);color:var(--orange-deep)}
.im-x:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.im-body{padding:22px 26px 26px}
/* Tier rows. One row per tier so a single request can mix them, for
   example 20 at DA 30, 10 at DA 40, 20 at DA 50. The unit price on each
   row is live: it switches to the 10+ partner rate as soon as the
   combined quantity across all rows reaches 10. */
.im-tierbox{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px}
.im-tierhead,.im-row{display:flex;align-items:center;gap:12px;padding:10px 16px}
.im-tierhead{background:var(--cream);border-bottom:1.5px solid var(--line);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.im-tierhead .imh-name{flex:1;min-width:0}
.im-tierhead .imh-qty{width:66px;flex-shrink:0;text-align:center}
.im-tierhead .imh-line{width:74px;flex-shrink:0;text-align:right}
.im-row{border-bottom:1px solid var(--cream-deep)}
.im-row:last-child{border-bottom:none}
.im-row .imr-name{flex:1;min-width:0;line-height:1.35}
.im-row .imr-name b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.im-row .imr-unit{display:block;font-size:11.5px;color:var(--slate)}
.im-row input{width:66px;flex-shrink:0;text-align:center;border:1.5px solid var(--line);border-radius:9px;padding:9px 6px;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;background:var(--cream);color:var(--ink)}
.im-row input:focus-visible{outline:3px solid var(--orange);outline-offset:1px}
.im-row .imr-line{width:74px;flex-shrink:0;text-align:right;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;color:var(--ink)}
.im-row.has-qty{background:var(--orange-soft)}
.im-row.has-qty .imr-line{color:var(--orange-deep)}
.im-total{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:14px;padding:14px 18px;margin:4px 0 16px}
.im-total .imt-l{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.im-total .imt-v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;color:var(--ink)}
.im-total .imt-sub{flex-basis:100%;font-size:12px;color:var(--slate)}
.imodal .btn{width:100%;text-align:center}
.imodal .btn.im-close-btn{width:auto;margin-top:16px}
.im-fine{font-size:11.5px;color:var(--mute);text-align:center;margin-top:11px;line-height:1.6}
.im-done{display:none;padding:40px 30px;text-align:center}
.im-done .imd-ic{width:56px;height:56px;border-radius:50%;background:var(--orange-soft);border:1.5px solid var(--orange);color:var(--orange-deep);font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.im-done h3{font-size:21px;margin-bottom:10px}
.im-done p{font-size:14px;color:var(--slate);line-height:1.75;max-width:44ch;margin:0 auto 8px}
.imodal.done .im-head,.imodal.done .im-body{display:none}
.imodal.done .im-done{display:block}

/* ============ 16. MOBILE ============
   Every responsive rule on the page lives here and nowhere else.
   Rules are ordered widest breakpoint first. The page is verified at
   390px with no horizontal overflow. When adding a component above,
   add its mobile behavior here rather than beside the component. */
@media(max-width:1024px){
  .stabs{grid-template-columns:1fr}
  /* SERVICE RAIL below desktop.
     A fixed grid, never a sideways scroller. All six services are on
     screen at once, so nobody has to discover that more exist by
     swiping. Three columns here, two on a phone (see 640px). To add a
     seventh service, nothing needs changing: the grid just adds a row. */
  .stab-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;overflow-x:visible;padding-bottom:0}
  .stab{width:auto;min-width:0;flex-shrink:1;padding:12px 14px}
  .stab .stab-arrow{display:none}
  .stab b{font-size:13.5px}
  .stab i{font-size:11px}
  .ptables,.wl-extra,.bey-grid{grid-template-columns:1fr}
  .bey-grid{gap:0}
  .prob-grid{grid-template-columns:1fr}

  /* Comparison table becomes stacked cards from here down, because five
     dense columns stop being readable below this width. One card per
     route, each cell labelled by its data-label. Never reintroduce
     horizontal scrolling on this table. */
  .cmp-wrap{border:none;background:transparent;border-radius:0}
  table.cmp4,.cmp4 tbody,.cmp4 tr,.cmp4 td{display:block;width:100%}
  .cmp4 thead{display:none}
  .cmp4 tr{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;margin-bottom:16px;overflow:hidden}
  .cmp4 tr:last-child{margin-bottom:0}
  .cmp4 td{width:100%;border-bottom:1px solid var(--cream-deep);padding:13px 18px}
  .cmp4 tr td:last-child{border-bottom:none}
  .cmp4 td:first-child{width:100%;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;background:var(--cream);border-bottom:1.5px solid var(--line);padding:14px 18px}
  .cmp4 td[data-label]::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
  .cmp4 td.v2a[data-label]::before{color:var(--orange-deep)}
}
@media(max-width:880px){
  section{padding:66px 0}
  .hero{padding:60px 0 74px}

  /* JUMP NAV on a phone and tablet. Three deliberate changes.
     1. It becomes a fixed 4 column grid instead of a sideways scroller.
        The eight section links land as a tidy 4 by 2 block and the CTA
        spans the full width underneath. Nothing is hidden and nothing
        has to be swiped: a bar you scroll sideways is a bar where most
        people never learn the other sections exist.
        Grid rather than flex-wrap on purpose, so the row split is fixed
        rather than left to line breaking. Adding a ninth section link
        just adds a row; it cannot silently reflow the whole bar.
     2. The short labels replace the desktop ones, so every cell holds
        one line. Desktop wording is untouched.
     3. backdrop-filter is switched off at this width. Sticky plus
        backdrop-filter on the same element is a known iOS Safari
        failure that silently stops the bar sticking, and a solid bar
        reads better over dense content anyway. */
  .jump{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
  /* overflow-x is reset explicitly, not just via the overflow shorthand,
     so the desktop scroller cannot survive into this grid by accident. */
  .jump-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:visible;overflow-x:visible;min-width:0;padding:0 8px;align-items:stretch}
  .jump a{display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 4px;font-size:10.5px;line-height:1.25;border-bottom-width:2px;white-space:normal}
  .jump a .j-full{display:none}
  .jump a .j-short{display:inline}
  .jump .j-cta{grid-column:1 / -1;margin:3px 2px 5px;padding:7px 4px;font-size:11px;border-radius:7px}
  /* The bar is taller once it wraps (two link rows plus the CTA row),
     so anchored sections clear more. Measured worst case is about
     102px; keep this above that if you change the padding above. */
  section[id],header[id]{scroll-margin-top:112px}
  /* No nudge on tap: grid cells sit flush to the container edge. */
  .stab:hover{transform:none}
  .hero-grid,.cta-grid{grid-template-columns:1fr;gap:34px}
  .stats-grid{grid-template-columns:1fr 1fr}
  /* Hero visual releases its fixed desktop height and stacks in flow. */
  .wl-viz{height:auto;padding:6px 0 4px}
  .wl-stage{height:auto;width:100%}
  .wl-card{position:static;inset:auto;transform:none;opacity:1;box-shadow:0 18px 44px rgba(28,24,20,.12)}
  .wl-back{display:none}
  .wl-stage.show-back .wl-front{display:none;transform:none;opacity:1}
  .wl-stage.show-back .wl-back{display:flex;transform:none;opacity:1}
  .def-box{padding:30px 26px 26px}
  .def-box p.def-text{font-size:17px}
  .spanel{padding:24px 22px}
  .proc-close,.prob-close{padding:22px 22px}
}
@media(max-width:640px){
  section{padding:54px 0}
  /* The stats band stays a 2 by 2 block on phones rather than a single
     stack, so the four commitments read as one unit and the dark and
     orange checkerboard survives. Type and padding come down instead
     of the column count. */
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:24px 20px}
  .stat .st-num{font-size:27px}
  .stat .st-label{font-size:11px;letter-spacing:.1em;margin-top:7px}
  .stat .st-sub{font-size:11.5px;line-height:1.55}
  /* Two service cards per row on a phone. Still a grid, still no
     sideways scroll: six services become three tidy rows. */
  .stab-rail{grid-template-columns:1fr 1fr}
  .stab{padding:11px 12px}
  .stab b{font-size:13px}
  .stab i{font-size:10.5px}
  .f-row{grid-template-columns:1fr}
  .more-grid{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%;text-align:center;white-space:normal}
  .hero-terms span{font-size:11.6px}
  .prob-close a,.proc-close .btn,.price-cta-row .btn{width:100%;text-align:center}
  .pstep-body p,.pstep-body .gate-line{padding-left:0}
  .pstep-head{gap:13px}
  .pstep-n{width:38px;height:38px;font-size:19px}
  .psvc-cta .btn{flex:1 1 100%}
  .prow{flex-wrap:wrap;gap:8px}
  .prow .pr-price{text-align:left;width:100%}
  .rate-bar{gap:12px}
  .rate-toggle{width:100%}
  .rt-btn{flex:1;justify-content:center;padding:9px 10px;font-size:12.6px}
  .def-box .def-mark{font-size:62px;top:-19px;left:22px}
  .margin-strip,.reports-strip,.def-rel{padding:20px 20px}
  .im-head,.im-body{padding-left:20px;padding-right:20px}
  .imodal{padding:12px}
  /* Tier rows stay on one line per tier: the name column absorbs the
     squeeze, the quantity box and line total keep a tappable size. */
  .im-tierhead,.im-row{padding:10px 12px;gap:9px}
  .im-tierhead .imh-qty,.im-row input{width:58px}
  .im-tierhead .imh-line,.im-row .imr-line{width:66px}
  .im-row .imr-name b{font-size:12.8px}
  .im-row .imr-unit{font-size:11px}
}
@media(max-width:420px){
  .wrap{padding:0 18px}
  .stat{padding:20px 16px}
  .stat .st-num{font-size:24px}
  .stat .st-label{font-size:10.2px;letter-spacing:.08em}
  .stat .st-sub{font-size:11px}
  /* Hero view switch: both labels must fit a 360px screen side by side. */
  .wl-switch{max-width:100%}
  .wls{padding:8px 11px;font-size:11.6px}
  /* Jump nav and service rail stay grids at the narrowest widths, just
     tighter. Neither is ever allowed to scroll sideways. */
  .jump-in{padding:0 4px}
  .jump a{padding:8px 2px;font-size:9.8px}
  .stab{padding:10px}
  .stab b{font-size:12.2px}
  .stab i{font-size:10px}
  .spanel{padding:20px 17px}
  .qitem{padding:15px 16px}
  .qitem-head h3{font-size:14.6px}
  .prob,.xcard{padding:22px 18px}
  .psvc-head,.prow,.psvc-foot,.psvc-cta{padding-left:18px;padding-right:18px}
  .cmp4 td,.cmp4 td:first-child{padding-left:15px;padding-right:15px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}