: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}
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}
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}
section[id]{scroll-margin-top:62px}
.sec-cream{background:var(--cream)}
.accent{color:var(--orange)}
a{color:inherit}

/* ---- section header: eyebrow, h2, one lede line. Nothing else. ---- */
.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)}

/* ---- buttons ---- */
.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}

/* ---- callout strip ---- */
.callout{background:var(--orange-soft);border:1.5px solid var(--orange-line);border-radius:14px;padding:17px 21px;font-size:14.6px;color:var(--ink);line-height:1.72;margin:18px 0}
.callout b{font-weight:700}
.callout.plain{background:var(--cream);border-color:var(--cream-deep)}
.sec-cream .callout.plain{background:var(--paper);border-color:var(--line)}

/* ============ STATS BAND ============
   Shared V2A component, copied verbatim from the live service pages.
   Do not restyle it here and do not rename the classes. */
.stats-band{background:var(--dark)}
.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:6px;color:rgba(255,255,255,.78);line-height:1.62}

/* ============ JUMP NAV ============ */
/* No horizontal scrolling anywhere on this nav. On desktop it is one sticky
   row. Below 900px it becomes a static grid so every option is visible on
   one screen without swiping sideways. */
.jump{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(9px);border-bottom:1.5px solid var(--line)}
.jump-in{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.jump a{flex-shrink:1;min-width:0;padding:15px 13px;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}

/* ============ QUOTE BAND ============ */
.quote-band{position:relative;background:var(--dark);color:#fff;padding:84px 0;text-align:center;overflow:hidden}
.quote-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:24px 24px;opacity:.9}
.quote-band>.wrap{position:relative}
.quote-band .qm{font-family:'Bricolage Grotesque',sans-serif;font-size:60px;font-weight:800;color:var(--orange);line-height:.55;display:block;margin-bottom:16px}
.quote-band h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;max-width:19ch;margin:0 auto 16px;color:#fff}
.quote-band p{color:#C9C2B8;max-width:54ch;margin:0 auto 28px;font-size:16px;line-height:1.75}
.quote-band p strong{color:#fff}
.quote-band cite{display:block;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9A9288;margin-bottom:26px}

/* ============ 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: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:1400px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s}
.qitem-body p{color:var(--slate);font-size:14.6px;margin:14px 0 0;line-height:1.8;max-width:76ch}
.qitem-body p+p{margin-top:11px}
.qitem-body p strong{color:var(--ink)}
.qitem-body p.pts{color:var(--ink);font-size:14.2px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:12px;padding:12px 15px;line-height:1.7}
.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:.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:1400px;opacity:1}

/* ============ CONTACT ============ */
.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 h2 .accent{color:var(--orange)}
.cta-band .cta-sub{color:#C9C2B8;max-width:54ch;margin-bottom:24px;font-size:16px;line-height:1.75}
.cta-band .cta-sub strong{color:#fff}
.cta-list{list-style:none;margin-bottom:22px}
.cta-list li{position:relative;padding:8px 0 8px 30px;font-size:15px;color:#E8E2DA;line-height:1.65}
.cta-list li::before{content:"\2713";position:absolute;left:0;top:9px;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;line-height:1.7}
.cta-micro a{color:#F1A07E;font-weight:700;text-decoration:none}
.cta-micro a:hover{text-decoration:underline}
.form-card{background:var(--paper);border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.32)}
.form-card h3{font-size:20px;font-weight:800;margin-bottom:6px}
.form-card .fc-sub{font-size:13.5px;color:var(--slate);margin-bottom:20px;line-height:1.6}
.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:84px;resize:vertical}
.f-help{font-size:11.5px;color:var(--mute);margin-top:5px;line-height:1.55}
.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}

/* footer. Copied from the live homepage so this page ends exactly as every
   other V2A page does: cream ground under the dark contact band, orange
   top rule, four column nav, ghost wordmark. Do not restyle it here. */
.ft{background:var(--cream);color:var(--slate);border-top:3px solid var(--orange);position:relative;overflow:hidden}
.ft-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:end;padding:80px 0 60px}
.ft-say{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.042em;line-height:1.02;font-size:clamp(1.9rem,4vw,3.15rem);color:var(--ink);max-width:14ch;margin:0}
.ft-say em{font-style:normal;color:var(--orange)}
.ft-line{position:relative;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.32rem,2.5vw,1.95rem);letter-spacing:-.042em;color:var(--ink);line-height:1.1;margin:0;max-width:19ch;background:var(--orange-soft);border:1.5px solid var(--orange-line);border-radius:22px;padding:30px 32px 32px}
.ft-line em{font-style:normal;color:var(--orange);display:block}
.ft-line::before{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--orange);margin-bottom:16px}
.ft-em{display:inline-flex;align-items:center;gap:7px}
.ft-em a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--orange)}
.ft-em a:hover{color:var(--orange-deep)}
.ft-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:52px 0 56px;border-top:1.5px solid var(--cream-deep)}
.ft h4{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-size:.98rem;font-weight:700;letter-spacing:-.022em;text-transform:none;margin-bottom:22px;padding:0;border:0}
.ft h4::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.ft ul{list-style:none}
.ft li{margin-bottom:13px}
.ft-nav a{display:inline-block;font-size:.94rem;color:var(--slate);text-decoration:none;transition:color .2s,transform .2s}
.ft-nav a:hover{color:var(--orange-deep);transform:translateX(4px)}
.ft-base{border-top:1.5px solid var(--cream-deep);padding:24px 0;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--mute);position:relative;z-index:2}
.ft-base a{color:var(--mute);text-decoration:none}
.ft-base a:hover{color:var(--ink)}
.soc{display:flex;gap:9px}
.soc a{width:38px;height:38px;border:1.5px solid var(--cream-deep);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--slate);background:#fff;transition:all .2s}
.soc a:hover{border-color:var(--orange);color:#fff;background:var(--orange)}
.soc svg{width:17px;height:17px;fill:currentColor;display:block}
.ft-mark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.055em;font-size:clamp(3.6rem,15.5vw,13rem);line-height:.78;color:var(--cream-deep);white-space:nowrap;user-select:none;padding-bottom:.06em;margin-top:14px;overflow:hidden}

/* ============ SHARED RESPONSIVE ============ */
@media(max-width:880px){
  .cta-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  section{padding:66px 0}
}
@media(max-width:640px){
  .f-row{grid-template-columns:1fr}
}

/* ============================================================
   ADDITIONS FOR THE PPC ADVERTISING SERVICES PAGE
   Everything above this line is the shared V2A stylesheet.
   Everything below is new to this page.
   ============================================================ */

/* ---- hero: text left, the ring diagram right ---- */
.hero{position:relative;padding:70px 0 104px;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:minmax(0,1.14fr) minmax(0,.86fr);gap:48px;align-items:center}
.hero-grid>*{min-width:0}
/* Capped at 47px so the three written lines stay three lines on a laptop.
   Raising it pushes line two onto a fourth line and the headline loses its
   shape. If the wording changes, re-check at 1280 and 1440. */
.hero h1{font-size:clamp(36px,4.3vw,47px);font-weight:800;margin:22px 0 18px;color:var(--ink)}
.hero .kicker{color:var(--slate);font-size:17.5px;max-width:56ch;margin-bottom:24px;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:22px}
.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:7px 14px;font-size:13px;font-weight:600;color:var(--ink)}
.hero-terms span::before{content:"\2713";color:var(--orange);font-weight:800;font-size:10px}

/* ============================================================
   HERO VISUAL: THE CLICK, AND WHAT SURROUNDS IT.
   ONE dominant element. A single set of concentric rings with the
   click at the middle: you pay for the center, and the rings are
   everything that decides what the center was worth. That is the
   argument the whole page makes, drawn once.

   This REPLACED an earlier five row trace card. The trace was
   accurate but it was text heavy and read as a list, which is the
   one thing a hero visual must not do. Do not reintroduce per row
   descriptions here. The rings carry numerals only, and the key
   underneath is three chips of three words each. If a future edit
   pushes this past about twenty words, it has gone wrong again.

   HARD RULES, UNCHANGED FROM THE PREVIOUS VISUAL:
     - NO FIGURES ON IT, EVER. No currency value, no percentage, no
       count. The moment a number lands here it becomes a performance
       claim this page cannot evidence.
     - Nothing is encoded by color alone. Each ring carries a numbered
       tick and the key below repeats the same numerals.
     - The rings illuminate outward in sequence, IN PLACE, and stay
       lit. Nothing drifts or travels. One slow halo on the core is
       the only loop. All motion stops under prefers-reduced-motion,
       where every ring renders already lit.
   Pure CSS and one inline SVG cursor. No image assets.
   ============================================================ */
.hstage{position:relative;min-width:0}
.orbit{position:relative;width:100%;max-width:426px;aspect-ratio:1/1;margin:0 auto}
/* a soft ground behind the rings so the shape reads as one object rather
   than three thin outlines floating in an empty column */
.orbit::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(255,241,232,.95) 0%,rgba(255,247,242,.6) 52%,rgba(255,255,255,0) 72%)}

/* the rings. r3 outermost, r1 innermost. Weight decreases outward so the
   core stays the one dominant element and the rings recede from it. */
.orbit .rg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid var(--line)}
.orbit .r3{width:100%;height:100%;border-width:1.5px;border-style:dashed;border-color:var(--cream-deep);animation:ring3 .01s linear 1.35s forwards}
.orbit .r2{width:72%;height:72%;background:rgba(255,255,255,.55);animation:ring2 .01s linear .95s forwards}
.orbit .r1{width:46%;height:46%;background:#fff;box-shadow:0 10px 30px rgba(28,24,20,.06);animation:ring1 .01s linear .55s forwards}
@keyframes ring1{to{border-width:2.5px;border-color:var(--orange)}}
@keyframes ring2{to{border-color:#EFAE8B}}
@keyframes ring3{to{border-color:var(--orange-line)}}

/* the core: the click you actually pay for */
.orbit .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:23%;height:23%;border-radius:50%;background:var(--orange);box-shadow:0 16px 38px rgba(232,80,26,.4);display:flex;align-items:center;justify-content:center}
.orbit .core svg{width:42%;height:42%;display:block;fill:#fff}
.orbit .core::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--orange);opacity:0;animation:coreHalo 5s ease-out 2s infinite}
@keyframes coreHalo{0%{opacity:.4;transform:scale(.92)}70%{opacity:0;transform:scale(1.3)}100%{opacity:0;transform:scale(1.3)}}

/* numbered ticks sitting on each ring, at 12, 4 and 8 o'clock */
.orbit .tk{position:absolute;z-index:2;transform:translate(-50%,-50%);width:29px;height:29px;box-shadow:0 3px 10px rgba(28,24,20,.1);border-radius:50%;background:var(--paper);border:1.5px solid var(--line);color:var(--mute);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;animation:tickLit .01s linear forwards}
.orbit .t1{top:27%;left:50%;animation-delay:.6s}
.orbit .t2{top:72%;left:78.5%;animation-delay:1s}
.orbit .t3{top:78%;left:8.6%;animation-delay:1.4s}
@keyframes tickLit{to{background:var(--orange);border-color:var(--orange);color:#fff}}

/* the key. Three chips, three words each, numerals matching the ticks. */
.okey{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:10px}
.okey span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1.5px solid var(--cream-deep);background:rgba(255,255,255,.9);border-radius:999px;padding:7px 13px 7px 7px;font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.okey span i{font-style:normal;flex:none;width:20px;height:20px;border-radius:50%;background:var(--orange-soft);border:1.5px solid var(--orange-line);color:var(--orange-deep);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:11.5px}
.ocap{margin-top:18px;text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.4;max-width:30ch;margin-left:auto;margin-right:auto}
.ocap em{font-style:normal;color:var(--orange)}

/* ---- #basics: one definition panel, then three short cards ---- */
/* The definition panel. Two columns: the liftable answer on the left, and
   a short "also called" rail on the right. The rail is not decoration: it
   carries the alternate names for the same service, which is what lets an
   assistant match this page to a question phrased a different way. */
.defq{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:38px;align-items:start;background:var(--paper);border:1.5px solid var(--line);border-left:5px solid var(--orange);border-radius:20px;padding:38px 42px 34px;box-shadow:0 18px 46px rgba(28,24,20,.06)}
.defq .qmark{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:52px;font-weight:800;color:var(--orange-line);line-height:.5;margin-bottom:20px;pointer-events:none}
.defq p{position:relative;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.3vw,25px);font-weight:600;letter-spacing:-.018em;line-height:1.42;color:var(--ink);max-width:46ch}
.defq em{position:relative;display:block;font-style:normal;margin-top:18px;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);font-family:'Inter',sans-serif}
.defq .also{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:16px;padding:20px 20px 16px}
.defq .also strong{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.defq .also ul{list-style:none}
.defq .also li{font-size:14.2px;font-weight:600;color:var(--ink);line-height:1.45;padding:8px 0;border-bottom:1px solid var(--cream-deep)}
.defq .also li:last-child{border-bottom:none}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.tri{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 26px 24px;transition:border-color .2s,transform .2s,box-shadow .2s}
.tri:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 16px 34px rgba(232,80,26,.1)}
.tri span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:11px}
.tri h3{font-size:19px;margin-bottom:9px;line-height:1.26}
.tri p{font-size:15px;color:var(--slate);line-height:1.68}

/* ---- #fails: four problem and fix cards, then a dark closing panel ---- */
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.reason{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:32px 30px 30px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.sec-cream .reason{background:var(--paper)}
.reason:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 16px 34px rgba(232,80,26,.1)}
.reason .gn{position:absolute;right:18px;top:4px;font-family:'Bricolage Grotesque',sans-serif;font-size:82px;font-weight:800;color:var(--cream);line-height:1;pointer-events:none;transition:color .2s}
.reason:hover .gn{color:var(--orange-soft)}
.reason .n{position:relative;display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:11.5px;font-weight:800;color:var(--orange-deep);letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px}
.reason h3{position:relative;font-size:22px;margin-bottom:14px;max-width:24ch}
.reason .pf{position:relative;padding-top:14px;border-top:1.5px solid var(--line)}
.reason .pf+.pf{margin-top:12px}
.reason .pf em{display:block;font-style:normal;font-size:10.8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.reason .pf.fix em{color:var(--orange-deep)}
.reason .pf p{font-size:15px;color:var(--slate);line-height:1.7;max-width:52ch}
.reason .pf.fix p{color:var(--ink)}
.burn{position:relative;margin-top:26px;background:var(--dark);border-radius:22px;padding:44px 46px;color:#fff;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;overflow:hidden}
.burn::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:24px 24px}
.burn>*{position:relative}
.burn .display{font-size:clamp(28px,3.6vw,40px);font-weight:800;line-height:1.1}
.burn .display em{font-style:normal;color:var(--orange)}
.burn p{font-size:16.5px;color:#C9C2B8;line-height:1.75;max-width:40ch}
.burn p strong{color:#fff}
.burn .btn-ghost{border-color:#5A5049;color:#fff;margin-top:18px}
.burn .btn-ghost:hover{background:#fff;color:var(--ink)}

/* ---- #included: capability cards ---- */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cap{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:28px 24px 26px;transition:border-color .2s,transform .2s,box-shadow .2s}
.cap:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 16px 34px rgba(232,80,26,.1)}
.cap .ic{width:46px;height:46px;border-radius:13px;background:var(--orange-soft);border:1.5px solid var(--orange-line);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;color:var(--orange-deep);margin-bottom:18px;transition:background .2s,color .2s,border-color .2s}
.cap:hover .ic{background:var(--orange);border-color:var(--orange);color:#fff}
.cap h3{font-size:18.5px;margin-bottom:10px;line-height:1.28}
.cap p{font-size:15px;color:var(--slate);line-height:1.7}
.cap.core{border-color:var(--orange-line);background:#FFFAF6}
.cap .tag{position:absolute;top:18px;right:18px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:999px;padding:4px 10px}

/* ---- #platforms: five decision rows, two doors, one routing strip ----
   The decision rows exist because an earlier draft of this section framed
   the choice as "already looking, go to search" versus "not looking yet,
   go to social". That framing is wrong and it was removed on purpose.
   Paid social is not an awareness-only channel: retargeting, customer
   list audiences and Advantage+ shopping campaigns are demand capture in
   exactly the way search is, and the real determinants are search volume,
   price point, how visual the product is, creative supply and budget size.
   Never restore a single sentence rule for choosing a channel here. */
/* The five rows are a diagnostic being worked through, so they are drawn
   as one connected run rather than a plain three column list: a spine down
   the left, a numbered node on it per question, the question in display
   type, and the answer in its own card. The wording is the client's and is
   not to be edited; if this section needs to change again, change the
   drawing, not the text. */
.dlist{position:relative}
.drow{position:relative;display:grid;grid-template-columns:58px minmax(0,.92fr) minmax(0,1.08fr);gap:0 30px;align-items:center;padding:16px 0}
/* the spine. It runs between the nodes and stops at the last one. */
.drow::before{content:"";position:absolute;left:28px;top:0;bottom:0;width:2px;background:var(--line)}
.drow:first-child::before{top:50%}
.drow:last-child::before{bottom:50%}
.drow i{position:relative;z-index:2;font-style:normal;font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:800;color:var(--orange-deep);background:var(--paper);border:2px solid var(--orange-line);border-radius:50%;width:58px;height:58px;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s}
.drow b{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.1vw,23px);font-weight:800;letter-spacing:-.018em;color:var(--ink);line-height:1.24;max-width:22ch}
.drow p{position:relative;background:var(--paper);border:1.5px solid var(--line);border-left:4px solid var(--orange-line);border-radius:16px;padding:20px 24px;font-size:15.5px;color:var(--slate);line-height:1.72;transition:border-color .2s,box-shadow .2s,transform .2s}
.sec-cream .drow p{background:var(--paper)}
.drow:hover i{background:var(--orange);border-color:var(--orange);color:#fff}
.drow:hover p{border-color:var(--line);border-left-color:var(--orange);box-shadow:0 14px 30px rgba(232,80,26,.09);transform:translateY(-2px)}
.dnote{margin-top:22px;background:var(--ink);border-radius:18px;padding:26px 30px;color:#fff;font-size:16px;line-height:1.7}
.dnote b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.2vw,23px);font-weight:800;letter-spacing:-.015em;line-height:1.28;margin-bottom:10px}
.dnote b em{font-style:normal;color:var(--orange)}
.dnote span{color:#C9C2B8;display:block;max-width:66ch}
.dhead{margin:44px 0 20px;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.2vw,23px);font-weight:800;letter-spacing:-.015em;color:var(--ink);padding-bottom:14px;border-bottom:1.5px solid var(--line)}

/* ---- #platforms: two doors, then one routing strip ---- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* the whole card is the link, so decoration has to be killed on the card
   itself: without this every heading, list item and paragraph inside it
   inherits an underline. */
.door{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--line);border-radius:22px;padding:34px 34px 30px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s}
.door *{text-decoration:none}
.door:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 20px 44px rgba(232,80,26,.12)}
.door .glyph{position:absolute;right:-14px;top:-14px;width:126px;height:126px;border-radius:50%;background:var(--cream);pointer-events:none;transition:background .2s}
.door:hover .glyph{background:var(--orange-soft)}
.door .when{position:relative;display:inline-block;align-self:flex-start;font-size:10.8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:999px;padding:4px 12px;margin-bottom:16px}
/* "Strongest when" is a label for the sentence UNDER it, not for the heading.
   It used to sit in the .when pill at the top of the card, where it read as a
   dangling clause introducing a list of product names. Do not move it back. */
.door .cond{position:relative;display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin:16px 0 8px}
.door h3{position:relative;font-size:clamp(21px,2.4vw,26px);margin-bottom:11px;max-width:23ch;line-height:1.2}
.door>p{position:relative;font-size:15.5px;color:var(--slate);line-height:1.74;max-width:44ch;margin-bottom:0}
.door ul{position:relative;list-style:none;margin:18px 0 22px;border-top:1.5px solid var(--line);padding-top:6px}
.door li{position:relative;padding:10px 0 10px 28px;font-size:14.8px;color:var(--ink);line-height:1.5;border-bottom:1px solid var(--line)}
.door li:last-child{border-bottom:none}
.door li::before{content:"";position:absolute;left:0;top:17px;width:13px;height:2.5px;border-radius:2px;background:var(--orange)}
.door .go{position:relative;margin-top:auto;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;font-size:15px;font-weight:800;color:var(--orange-deep);text-decoration:none;border-bottom:2px solid var(--orange-line);padding-bottom:3px;transition:gap .18s,border-color .18s}
.door .go:hover{gap:14px;border-bottom-color:var(--orange)}
.beyond{margin-top:20px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:16px;padding:20px 24px;font-size:15px;color:var(--slate);line-height:1.72}
.sec-cream .beyond{background:var(--paper);border-color:var(--line)}
.beyond strong{color:var(--ink);font-weight:600}
/* the one routing strip for agency readers. Two mentions on the page in
   total, this and one FAQ. Do not add a third. */
.route{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;background:var(--ink);border-radius:18px;padding:24px 30px;color:#fff}
.route b{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(18px,2.1vw,22px);font-weight:800;letter-spacing:-.015em;max-width:40ch;line-height:1.3}
.route b em{font-style:normal;color:var(--orange)}
.route a{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:14.6px;font-weight:800;color:#fff;text-decoration:none;border:1.5px solid #5A5049;border-radius:12px;padding:12px 20px;transition:background .18s,color .18s}
.route a:hover{background:#fff;color:var(--ink)}

/* ---- #cost: the fee timeline, the three reasons, the scope split ----
   REPLACED an earlier layout of three fee cards plus two panels that each
   held two full paragraphs. The paragraphs were the problem: a wall of
   prose inside a box is the one thing nobody reads, and the single most
   asked question ("what do I actually pay in month one?") was buried in
   the middle of one of them.
   The .fee component answers it structurally instead. Two rows, one for a
   new build and one for taking over a live account, and two columns for
   month one and month two onward. A reader gets the answer without
   reading a sentence. Keep it that way: if a future edit puts a paragraph
   back inside a fee cell, the section has broken the brief.
   CRITICAL, DO NOT BREAK THIS: nothing here may imply the management fee
   stays the same figure while the ad budget grows. It does not. Wording
   lives in three places and all three must stay in sync: the .fee-base
   bar, the third .why card, and the "What are you billed" row in
   #compare. */
.fee{border:1.5px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:0 18px 46px rgba(28,24,20,.06);overflow:hidden}
.fee-row{display:grid;grid-template-columns:.92fr 1fr 1fr;border-bottom:1.5px solid var(--line)}
.fee-row>div{padding:24px 26px}
.fee-row>div:first-child{background:var(--cream);border-right:1.5px solid var(--line)}
.fee-row>div:nth-child(3){border-left:1.5px solid var(--line)}
.fee-head>div{padding:15px 26px!important;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.fee-head>div:first-child{background:var(--paper)!important}
.fee-head>div:last-child{background:#FFFAF6;color:var(--orange-deep)}
.fee-row>div:last-child{background:#FFFAF6}
.fee-when{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--ink);line-height:1.25;display:block}
.fee-when small{display:block;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:var(--slate);line-height:1.55;margin-top:7px}
.fee-chips{display:flex;flex-wrap:wrap;gap:8px}
.fee-chips b{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 15px;font-size:14px;font-weight:700;line-height:1.3}
.fee-chips b::before{content:"";width:8px;height:8px;border-radius:2px;flex:none}
.fc-set{background:var(--orange);color:#fff}
.fc-set::before{background:#fff}
.fc-mg{background:var(--paper);border:1.5px solid var(--orange-line);color:var(--orange-deep)}
.fc-mg::before{background:var(--orange);border-radius:50%}
.fc-no{background:var(--cream);border:1.5px solid var(--cream-deep);color:var(--mute)}
.fc-no::before{width:12px;height:2.5px;background:#C9BCAC;border-radius:2px}
.fee-base{display:flex;align-items:flex-start;gap:14px;padding:22px 26px;background:var(--ink);color:#fff;font-size:15.5px;line-height:1.65}
.fee-base::before{content:"";flex:none;margin-top:6px;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.fee-base strong{color:#fff;font-weight:700}
.fee-base span{color:#C9C2B8}
.fee-lab{display:none}

/* the three reasons there is no published price. Short cards, not prose. */
.why{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why>div{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 24px 24px;overflow:hidden}
.sec-cream .why>div{background:var(--paper)}
.why .gn{position:absolute;right:14px;top:2px;font-family:'Bricolage Grotesque',sans-serif;font-size:70px;font-weight:800;color:var(--cream);line-height:1;pointer-events:none}
.why b{position:relative;display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin-bottom:10px;max-width:20ch}
.why p{position:relative;font-size:15px;color:var(--slate);line-height:1.7}
.why-tail{margin-top:16px;background:var(--orange-soft);border:1.5px solid var(--orange-line);border-radius:18px;padding:26px 30px;font-size:16px;color:var(--slate);line-height:1.74}
.why-tail strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(18px,2.1vw,21px);font-weight:800;letter-spacing:-.015em;color:var(--ink);line-height:1.3;margin-bottom:9px}

/* what the management fee covers and what sits outside it. This exists so
   nobody reaches the invoice still assuming creative production and landing
   page builds were inside the fee. Two columns, short items, no prose.
   Keep it in sync with the FAQ and the capability cards in #included. */
.scope{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.scope>div{border:1.5px solid var(--line);border-radius:18px;padding:26px 28px 24px;background:var(--paper)}
.scope>div.out{background:var(--cream);border-color:var(--cream-deep)}
.sec-cream .scope>div.out{background:var(--cream-deep);border-color:#EBDCC9}
.scope em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:6px}
.scope>div.out em{color:var(--mute)}
.scope b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.015em;margin-bottom:16px;line-height:1.25}
.scope ul{list-style:none}
.scope li{position:relative;padding:9px 0 9px 28px;font-size:15px;color:var(--slate);line-height:1.6;border-bottom:1px solid var(--line)}
.scope>div.out li{border-bottom-color:var(--cream-deep)}
.scope li:last-child{border-bottom:none}
.scope li::before{content:"\2713";position:absolute;left:0;top:9px;width:19px;height:19px;border-radius:6px;background:var(--orange-soft);border:1.5px solid var(--orange-line);color:var(--orange-deep);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.scope>div.out li::before{content:"";top:16px;width:14px;height:2.5px;border-radius:2px;background:#C9BCAC;border:none}
.scope .tail{margin-top:16px;padding-top:14px;border-top:1.5px solid var(--cream-deep);font-size:14.5px;color:var(--slate);line-height:1.7}
.scope .tail strong{color:var(--ink);font-weight:600}

.at-cost{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;background:var(--ink);border-radius:18px;padding:26px 32px;color:#fff}
.at-cost b{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.2vw,23px);font-weight:800;letter-spacing:-.015em;max-width:34ch;line-height:1.25}
.at-cost b em{font-style:normal;color:var(--orange)}
.at-cost .btn-ghost{border-color:#5A5049;color:#fff;white-space:nowrap}
.at-cost .btn-ghost:hover{background:#fff;color:var(--ink)}

/* ---- the three step start band ---- */
.start{position:relative;background:linear-gradient(135deg,var(--orange) 0%,var(--orange-deep) 100%);color:#fff;padding:74px 0;overflow:hidden}
.start::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1.3px,transparent 1.3px);background-size:24px 24px}
.start>.wrap{position:relative}
.start .lab{display:block;font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:12px}
.start h2{font-size:clamp(27px,3.4vw,38px);font-weight:800;max-width:24ch;margin-bottom:36px;color:#fff}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:34px}
.st3{background:rgba(255,255,255,.11);border:1.5px solid rgba(255,255,255,.28);border-radius:18px;padding:26px 26px 24px}
.st3 i{font-style:normal;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:#fff;color:var(--orange-deep);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;margin-bottom:16px}
.st3 b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.015em;margin-bottom:8px;line-height:1.25}
.st3 p{font-size:15px;color:rgba(255,255,255,.88);line-height:1.68}
.start .go{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.start .btn{background:#fff;color:var(--orange-deep);box-shadow:0 10px 26px rgba(0,0,0,.18);white-space:nowrap}
.start .go span{font-size:15px;color:rgba(255,255,255,.86);line-height:1.6}

/* ---- #compare: a component, not a document table. The V2A column is a
       raised panel running through it. Six rows only. ---- */
.cmp{display:block;position:relative;border:1.5px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:0 18px 46px rgba(28,24,20,.06)}
.cmp-row{display:grid;grid-template-columns:.82fr 1fr 1.18fr;border-bottom:1.5px solid var(--line);align-items:stretch}
.cmp-row:last-child{border-bottom:none}
.cmp-row>div{padding:24px 26px;font-size:15.5px;line-height:1.7;color:var(--slate)}
.cmp-row>div:first-child{font-family:'Bricolage Grotesque',sans-serif;font-size:17.5px;font-weight:800;letter-spacing:-.015em;color:var(--ink);background:var(--cream);border-right:1.5px solid var(--line);display:flex;align-items:center}
.cmp-row>div:nth-child(2){position:relative;padding-left:52px}
.cmp-row>div:nth-child(2)::before{content:"";position:absolute;left:26px;top:31px;width:16px;height:2.5px;border-radius:2px;background:#C9BCAC}
.cmp-row>div:last-child{position:relative;background:#FFFAF6;color:var(--ink);font-weight:500;border-left:2px solid var(--orange);padding-left:56px}
.cmp-row>div:last-child::before{content:"\2713";position:absolute;left:26px;top:24px;width:22px;height:22px;border-radius:7px;background:var(--orange);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.cmp-row>div:last-child b{font-weight:700}
.cmp-head>div{font-size:11.5px!important;font-weight:800!important;letter-spacing:.13em;text-transform:uppercase;padding:17px 26px!important;font-family:'Inter',sans-serif!important;color:var(--mute)!important;background:var(--paper)!important;border-radius:20px 0 0 0}
.cmp-head>div:nth-child(2){padding-left:26px!important;border-radius:0}
.cmp-head>div:nth-child(2)::before{display:none}
.cmp-head>div:last-child{background:var(--orange)!important;color:#fff!important;border-left-color:var(--orange)!important;padding-left:26px!important;border-radius:0 20px 0 0}
.cmp-head>div:last-child::before{display:none}
.cmp-row .lab{display:none}

/* ============================================================
   RESPONSIVE. Tested at 1440, 1280, 1024, 834, 768, 430, 393, 390,
   375 and 320. Nothing on this page may scroll sideways at any of
   them: the only scroll direction is up and down. Breakpoints run
   large to small so each one only overrides what the one above it
   left wrong.
   ============================================================ */

/* nothing is allowed to push the page wider than the viewport */
html,body{max-width:100%;overflow-x:hidden}
img,svg,table{max-width:100%}
.wrap{width:100%}

/* ---- laptop and small desktop ---- */
@media(max-width:1180px){
  .caps{grid-template-columns:repeat(3,1fr)}
  .cmp-row{grid-template-columns:.9fr 1fr 1.15fr}
  .cmp-row>div{padding:20px 22px}
  .cmp-row>div:nth-child(2){padding-left:46px}
  .cmp-row>div:nth-child(2)::before{left:22px}
  .cmp-row>div:last-child{padding-left:50px}
  .cmp-row>div:last-child::before{left:22px;top:20px}
}

/* ---- large tablet, landscape iPad ---- */
@media(max-width:1080px){
  section{padding:80px 0}
  .why{grid-template-columns:1fr}
  .drow{grid-template-columns:52px minmax(0,1fr);gap:12px 22px;align-items:start;padding:14px 0}
  .drow i{width:52px;height:52px;font-size:16px}
  .drow::before{left:25px}
  .drow b{max-width:100%;padding-top:12px}
  .drow p{grid-column:2}
  .burn{padding:36px 34px;gap:28px}
  .orbit{max-width:340px}
  .triad{grid-template-columns:1fr}
  .defq{padding:32px 34px 30px}
}

/* ---- tablet portrait. The point every two column layout collapses. ---- */
@media(max-width:900px){
  .hero{padding:60px 0 74px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hstage{margin-top:4px}
  .orbit{max-width:360px}
  .reasons{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr 1fr}
  .doors{grid-template-columns:1fr}
  .door h3{max-width:100%}
  .door>p{max-width:100%}
  .burn{grid-template-columns:1fr;padding:32px 26px}
  .scope{grid-template-columns:1fr}

  /* the fee timeline stacks into labeled blocks, same pattern as #compare.
     Without this the month two column sits off the right edge of a phone. */
  .fee{box-shadow:none}
  .fee-row{grid-template-columns:1fr;border-bottom-width:6px;border-bottom-color:var(--cream)}
  .fee-row>div{padding:16px 24px}
  .fee-row>div:first-child{border-right:none;padding:22px 24px 10px;background:var(--paper)}
  .fee-row>div:nth-child(3){border-left:none}
  .fee-row>div:last-child{background:var(--paper);border-top:1.5px solid var(--orange-line);padding-bottom:22px}
  .fee-head{display:none}
  .fee-lab{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
  .fee-row>div:last-child .fee-lab{color:var(--orange-deep)}
  .steps3{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr;gap:34px}
  .at-cost,.route{padding:24px 26px}
  .defq{grid-template-columns:1fr;gap:26px}
  .defq p{max-width:100%}

  /* jump nav becomes a static grid. Every option visible on one screen,
     no sideways swiping, and it stops eating vertical space when sticky. */
  .jump{position:static}
  /* Selector is .jump .jump-in, not .jump-in, on purpose. This element also
     carries .wrap, and the .wrap{padding:0 18px} shorthand in the phone block
     further down is a later rule of equal specificity, so it was resetting the
     vertical padding to zero and the first row of buttons sat flush against
     the stats band above it. Do not weaken this selector. */
  .jump .jump-in{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:26px 0 18px;flex-wrap:wrap}
  .jump a{padding:11px 8px;text-align:center;border:1.5px solid var(--line);border-radius:11px;font-size:12.5px;white-space:normal;line-height:1.32;border-bottom-width:1.5px;display:flex;align-items:center;justify-content:center}
  .jump a:hover{border-color:var(--orange);border-bottom-color:var(--orange)}
  .jump .j-cta{grid-column:1 / -1;margin-left:0;border:none;padding:13px 16px}
  section[id]{scroll-margin-top:14px}

  /* comparison stacks into labeled blocks. Still a component, never a table. */
  .cmp{box-shadow:none}
  .cmp-row{grid-template-columns:1fr;border-bottom-width:6px;border-bottom-color:var(--cream)}
  .cmp-row:last-child{border-bottom:none}
  .cmp-row>div{padding:18px 22px}
  .cmp-row>div:first-child{border-right:none;padding:20px 22px 6px;font-size:19px;background:var(--paper)}
  .cmp-row>div:nth-child(2){padding-left:48px;background:var(--paper)}
  .cmp-row>div:nth-child(2)::before{top:25px;left:22px}
  .cmp-row>div:last-child{border-left:none;border-top:1.5px solid var(--orange-line);padding-left:52px}
  .cmp-row>div:last-child::before{top:18px;left:22px}
  .cmp-head{display:none}
  .cmp-row .lab{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
  .cmp-row>div:last-child .lab{color:var(--orange-deep)}

  /* footer */
  .ft-top{grid-template-columns:1fr;gap:36px;align-items:start;padding:60px 0 44px}
  .ft-line{max-width:100%}
  .ft-nav{grid-template-columns:repeat(2,1fr);gap:32px;padding:44px 0 46px}
}

/* ---- large phones and small tablets ---- */
@media(max-width:680px){
  section{padding:60px 0}
  .caps{grid-template-columns:1fr}
  .reason{padding:28px 24px}
  .reason h3{max-width:100%}
  .reason .gn{font-size:64px;right:14px}
  .f-row{grid-template-columns:1fr}
  .form-card{padding:26px 22px}
  .cta-band{padding:70px 0}
  .quote-band{padding:66px 0}
  .start{padding:60px 0}
  .at-cost,.route{flex-direction:column;align-items:flex-start;gap:18px}
  .at-cost .btn,.route a{width:100%;text-align:center;justify-content:center}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:26px 22px}
  .stat .st-num{font-size:29px}
  .jump .jump-in{grid-template-columns:repeat(2,1fr)}
  .scope>div,.why>div{padding:26px 24px}
  .fee-base{padding:20px 22px;font-size:15px}
  .why-tail,.dnote{padding:22px 22px}
  .door{padding:28px 24px 26px}
  .ft-base{justify-content:flex-start;gap:14px}
}

/* ---- phones. iPhone SE, 12, 13, 14, 15, 17, Galaxy S and A series. ---- */
@media(max-width:480px){
  .wrap{padding:0 18px}
  section{padding:52px 0}
  .hero{padding:48px 0 64px}
  .hero h1{font-size:clamp(29px,8.2vw,37px)}
  .hero .kicker{font-size:16px}
  .hero-ctas{gap:10px}
  .hero-ctas .btn{width:100%;text-align:center}
  .hero-terms span{font-size:12.4px;padding:6px 12px}

  .orbit{max-width:284px}
  .orbit .tk{width:25px;height:25px;font-size:12px}
  .okey span{font-size:12.8px;padding:7px 13px 7px 7px}
  .okey span i{width:19px;height:19px;font-size:11px}
  .ocap{font-size:16px;margin-top:14px}
  .drow i{width:44px;height:44px;font-size:15px}
  .drow{grid-template-columns:44px minmax(0,1fr);gap:10px 16px}
  .drow::before{left:21px}
  .drow b{padding-top:9px}
  .drow p{padding:17px 19px}
  .fee-chips b{font-size:13.4px;padding:7px 13px}
  .dhead{margin:34px 0 16px}

  .h2{font-size:clamp(25px,7.2vw,31px)}
  .lede{font-size:16px}
  .sec-head{margin-bottom:32px;padding-bottom:20px}
  .defq{padding:26px 24px 24px;border-left-width:4px}
  .defq .qmark{font-size:42px;margin-bottom:16px}
  .burn{padding:28px 22px}
  .burn .display{font-size:clamp(25px,7.4vw,31px)}
  .why b{font-size:18px}
  .fee-when{font-size:17px}
  .st3{padding:22px 22px 20px}
  .start h2{font-size:clamp(24px,7vw,30px);margin-bottom:26px}
  .start .go{gap:14px}
  .start .btn{width:100%;text-align:center}
  .quote-band h2{font-size:clamp(25px,7.2vw,31px)}
  .quote-band .btn{width:100%;text-align:center}
  .cta-band h2{font-size:clamp(26px,7.4vw,32px)}
  .qitem{padding:15px 17px}
  .qitem-head h3{font-size:15px}
  .qgroup>h3{font-size:11.5px}
  .cmp-row>div:first-child{font-size:18px}
  .cmp-row>div{font-size:15px}
  .stat{padding:22px 18px}
  .ft-top{padding:48px 0 38px}
  .ft-nav{grid-template-columns:1fr;gap:26px;padding:36px 0 40px}
  .ft-line{padding:24px 24px 26px}
}

/* Micro-labels sit near 10.5px on desktop, which is fine for wide-tracked
   uppercase on a large screen but tight on a handset. Raise the floor on
   phones. Nothing on this page renders below 11.5px on mobile. */
@media(max-width:900px){
  .cmp-row .lab,.cap .tag,.fee-head>div,.fee-lab,.scope em,.qgroup>h3,.door .when,.reason .pf em{font-size:11.5px}
}
@media(max-width:680px){
  .f-help,.form-note{font-size:12.4px}
  .st3 i{font-size:15px}
}

/* ---- narrow phones, 320px class ---- */
@media(max-width:360px){
  .wrap{padding:0 15px}
  .stats-grid{grid-template-columns:1fr}
  .jump .jump-in{grid-template-columns:1fr 1fr;gap:7px}
  .jump a{font-size:12px;padding:10px 6px}
  .hero h1{font-size:27px}
  .orbit{max-width:250px}
  .okey{gap:6px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .orbit .r1{animation:none!important;border-width:2.5px;border-color:var(--orange)}
  .orbit .r2{animation:none!important;border-color:#EFAE8B}
  .orbit .r3{animation:none!important;border-color:var(--orange-line)}
  .orbit .tk{animation:none!important;background:var(--orange)!important;border-color:var(--orange)!important;color:#fff!important}
  .orbit .core::after{animation:none!important;opacity:0}
  .door,.cap,.reason,.tri{transition:none}
}