/* Pelican Coast Electric, paid-traffic landing pages.
   Colour tokens come from the approved quiz stylesheet. The type system,
   tonal grounds and radius scale are this build's. */

/* Poppins is Pelican's brand face. It is what the main site loads and what the
   approved quiz uses, so the landing pages match rather than introduce a third
   identity. Contrast comes from weight, size and tracking, not a second family.
   Self-hosted latin-only woff2. */
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-700.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --display:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;

  --primary:#FBBC58; --primary-dark:#F08242; --secondary:#5F9FA5; --accent:#EF7A43;
  --secondary-ink:#37727A; --focus:#DE6222;

  /* Five grounds, not three. Cream is warm and sits with the amber; tint is cool
     and sits with the teal; the band is the primary used at full section width.
     Paper against tint alone was a 2% difference doing the work of a tonal change. */
  --paper:#fff; --cream:#FBF5EC; --tint:#F1F5F6; --band:#FBBC58;
  --ink:#12191C; --ink-2:#1B252A; --ink-3:#25333A;
  --border:#DEE5E7; --border-warm:#EBE0CE; --success:#31916F;
  --text:#12191C; --text-soft:#4A5A61; --on-dark:#EAF1F3; --on-dark-soft:#A9BBC1;

  /* Radius varies by component on purpose. A single value on every surface is
     the tell; these are chosen per shape and per how much weight it carries. */
  --r-btn:10px; --r-input:8px; --r-badge:6px; --r-card:14px;
  --r-review:20px; --r-photo:22px; --r-pill:999px;

  --wrap:1180px; --gut:clamp(1.1rem,4vw,2rem);
  --fs-display:clamp(2.05rem,5.2vw,3.4rem);
  --fs-h2:clamp(1.8rem,4.1vw,2.9rem);
  --fs-h3:clamp(1.15rem,1.85vw,1.42rem);
  --fs-form:clamp(1.5rem,4.6vw,1.78rem);
  --fs-lede:clamp(1.06rem,1.5vw,1.2rem);
  --fs-body:1.0625rem; --fs-sm:.9375rem; --fs-xs:.8125rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:var(--fs-body);
  line-height:1.62;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* Headings carry their own space-below, scaled in em so it tracks the size of
   the heading rather than a fixed step. Components that set their own margin
   still win on specificity. */
h1,h2,h3{margin:0;text-wrap:balance}
h1{margin-bottom:.4em}
h2{margin-bottom:.44em}
h3{margin-bottom:.42em}
/* One rhythm, three steps, so the page reads as a hierarchy rather than a stack
   of evenly spaced blocks. A lede belongs to the heading above it, so it sits at
   the heading's own gap and then opens up before the body below. */
h1+.lede,h2+.lede{margin-top:0}
.lede+p,.lede+ul,.lede+.grid,.lede+div{margin-top:0}
.eyebrow+h1,.eyebrow+h2{margin-top:.15em}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

h1,h2{font-family:var(--display);font-weight:700}
h1{font-size:var(--fs-display);line-height:1.06;letter-spacing:-.03em}
h2{font-size:var(--fs-h2);line-height:1.16;letter-spacing:-.022em}
/* h3 stays in the body face. The serif is reserved for the statements, which is
   what keeps it reading as a display face rather than a second body font. */
h3{font-family:var(--body);font-weight:600;font-size:var(--fs-h3);line-height:1.32;letter-spacing:-.004em}
/* Prose headings need air under them; the components that set their own keep theirs. */
.split h3,.head-block h3{margin-bottom:.5rem}
.lede{font-size:var(--fs-lede);color:var(--text-soft);max-width:56ch;
  margin:0 0 clamp(1.15rem,2.4vw,1.7rem);line-height:1.55}
.dark .lede{color:var(--on-dark-soft)}

/* ---------- tonal grounds ----------
   Rhythm is set per section in the markup. No more than two consecutive sections
   share a ground, and the amber band breaks the longest light run on each page. */
.t-paper{background:var(--paper);color:var(--text)}
.t-cream{background:var(--cream);color:var(--text)}
.t-tint{background:var(--tint);color:var(--text)}
.t-ink{background:var(--ink);color:var(--on-dark)}
.t-ink2{background:var(--ink-2);color:var(--on-dark)}
.t-band{background:var(--band);color:var(--ink)}
.t-cream .brand,.t-cream .review{border-color:var(--border-warm)}
.t-band .eyebrow{color:#683D0C}
.t-band .lede{color:#5C3A10}

/* ---------- header ---------- */
.site-head{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.site-head img{width:170px;height:32px}
.head-call{display:inline-flex;align-items:center;gap:.5rem;color:var(--primary);font-weight:600;
  font-size:var(--fs-sm);text-decoration:none;padding:.45rem .2rem}
.head-call span.lbl{display:none}
@media(min-width:620px){.head-call span.lbl{display:inline;color:var(--on-dark-soft);font-weight:400}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:inherit;
  font-weight:600;font-size:1.02rem;line-height:1.2;padding:.95rem 1.5rem;border-radius:var(--r-btn);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background-color .16s ease-out,border-color .16s ease-out,color .16s ease-out}
.btn-primary{background:var(--primary);color:var(--ink);width:100%}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-quiet{background:transparent;color:var(--text-soft);border:0;padding:.6rem .2rem;font-weight:500;
  font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn-quiet:hover{color:var(--text)}

/* ---------- sections ---------- */
/* Padding is a per-section decision, not one global value. Saiyan runs 88/60/56/
   54/38; these five steps do the same job. */
section{padding-block:var(--pad,clamp(3rem,7vw,5.25rem))}
.pad-xl{--pad:clamp(4rem,9.5vw,7.25rem)}
.pad-lg{--pad:clamp(3.25rem,7.5vw,5.75rem)}
.pad-md{--pad:clamp(2.75rem,6vw,4.5rem)}
.pad-sm{--pad:clamp(2.25rem,5vw,3.5rem)}
.dark{color:var(--on-dark)}
.eyebrow{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--secondary-ink);margin-bottom:.9rem}
.dark .eyebrow{color:var(--primary)}
.head-block{max-width:60ch;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}

/* ---------- hero ---------- */
.hero{--pad:0;padding-block:clamp(2rem,5vw,3.5rem) 0;background:var(--ink);color:var(--on-dark);
  background-image:radial-gradient(120% 80% at 82% 0%,rgba(95,159,165,.20),transparent 62%)}
.hero-grid{display:grid;gap:clamp(1.5rem,3vw,2.75rem);
  grid-template-areas:"eyebrow" "title" "form" "sub" "trust";padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.hero-eyebrow{grid-area:eyebrow;margin-bottom:0}
.hero h1{grid-area:title}
.hero h1 .accentline{display:block;font-family:var(--body);color:var(--primary);
  margin-top:.55em;font-size:.365em;line-height:1.4;letter-spacing:.002em;font-weight:500;max-width:30ch}
.hero-sub{grid-area:sub}
.hero-trust{grid-area:trust}
.hero-grid>.form-card{grid-area:form}
@media(min-width:960px){
  /* The form spans every row of the left column and is taller than the text in
     it, so with auto rows the browser split the leftover height evenly between
     eyebrow, title, sub and trust. That is where the dead gaps in the hero came
     from. The trailing 1fr row absorbs the excess instead, which lets the text
     rows stay content-sized and carry their own deliberate spacing. */
  .hero-grid{grid-template-columns:1.08fr .92fr;
    grid-template-areas:"eyebrow form" "title form" "sub form" "trust form" ". form";
    grid-template-rows:auto auto auto auto 1fr;
    align-items:start;column-gap:clamp(2rem,4vw,3.5rem);row-gap:0}
  .hero-grid>.form-card{align-self:start;margin-top:.35rem}
  .hero-grid .hero-eyebrow{margin-bottom:1.35rem}
  .hero-grid .hero-sub{margin-top:.35rem}
  .hero-grid .hero-trust{margin-top:2.4rem}
}

.hero-trust{border-top:1px solid rgba(255,255,255,.14);padding-top:1.5rem;max-width:38rem}
.lic{display:flex;align-items:flex-start;gap:.75rem;margin:0 0 1.1rem}
.lic svg{flex:0 0 auto;width:26px;height:26px;color:var(--primary);margin-top:.05rem}
.lic b{display:block;font-family:var(--body);font-weight:600;font-size:1.06rem;
  letter-spacing:.035em;line-height:1.2;color:#fff}
.lic span{display:block;font-size:var(--fs-xs);color:var(--on-dark-soft);line-height:1.5;margin-top:.2rem}
.creds{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:var(--fs-xs);
  color:var(--on-dark-soft);line-height:1.45}
.creds li{padding-left:.95rem;position:relative}
.creds li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:1px;background:var(--primary)}
@media(min-width:560px){
  .creds{grid-template-columns:1.2fr 1fr .95fr;gap:0}
  .creds li{padding:0 .9rem;border-left:1px solid rgba(255,255,255,.16)}
  .creds li:first-child{padding-left:0;border-left:0}
  .creds li::before{display:none}
}

/* ---------- split ---------- */
.split{display:grid;gap:clamp(1.75rem,4vw,3.25rem);align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.wide-left{grid-template-columns:1.25fr .75fr}
  .split.wide-right{grid-template-columns:.78fr 1.22fr}
  .split.flip>.split-media{order:-1}
}
.split-media img{border-radius:var(--r-photo);width:100%}
figure.shot{margin:0}
figure.shot figcaption{margin-top:.7rem;font-size:var(--fs-xs);color:var(--text-soft);line-height:1.5}
.dark figure.shot figcaption{color:var(--on-dark-soft)}

/* ---------- ordered spec list ---------- */
.spec{list-style:none;margin:0;padding:0;display:grid;gap:1.15rem}
.spec li{display:grid;grid-template-columns:1.6rem 1fr;gap:.85rem;align-items:start}
.spec svg{width:1.15rem;height:1.15rem;color:var(--success);margin-top:.34rem}
.dark .spec svg{color:var(--primary)}
.spec b{font-weight:600}
.spec p{margin:.15rem 0 0;font-size:var(--fs-sm);color:var(--text-soft);line-height:1.55}
.dark .spec p{color:var(--on-dark-soft)}

/* ---------- panel brand cards ---------- */
.brands{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:600px){.brands{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.brands{grid-template-columns:repeat(4,1fr)}}
.brand{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);
  padding:1.35rem 1.25rem 1.5rem;display:flex;flex-direction:column}
.brand .plate{height:74px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:1.1rem}
.brand .plate img{max-height:74px;width:auto}
.brand h3{margin-bottom:.5rem}
.brand p{font-size:var(--fs-sm);color:var(--text-soft);line-height:1.58;margin:0}
.brand:nth-child(2n){background:#FBFCFC}

/* ---------- gallery ---------- */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{margin:0}
.gallery img{border-radius:var(--r-card);aspect-ratio:3/4;object-fit:cover;width:100%}
.gallery figcaption{margin-top:.6rem;font-size:var(--fs-xs);color:var(--on-dark-soft);line-height:1.5}

/* ---------- reviews ---------- */
.review-lead{border-left:3px solid var(--primary);padding-left:clamp(1rem,2.5vw,1.75rem);margin-bottom:2.5rem}
.review-lead blockquote{margin:0;font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.45;font-weight:500;letter-spacing:-.015em}
.review-lead cite{display:block;margin-top:1rem;font-style:normal;font-size:var(--fs-sm);color:var(--text-soft)}
.reviews{display:grid;gap:1.1rem;grid-template-columns:1fr;align-items:start}
@media(min-width:700px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-review);padding:1.4rem 1.35rem 1.5rem}
.review p{font-size:var(--fs-sm);line-height:1.6;margin:0 0 .9rem}
.review cite{font-style:normal;font-size:var(--fs-xs);color:var(--text-soft);font-weight:500}
.stars{display:flex;gap:.13rem;margin-bottom:.75rem;color:var(--primary)}
.stars svg{width:15px;height:15px}

/* ---------- steps ---------- */
/* An editorial ruled sequence. Circled 1-2-3 badges are the exact shape every
   AI how-it-works section reaches for, and the kill list names it. */
.steps{display:grid;gap:0;counter-reset:s;border-top:1px solid rgba(18,25,28,.24)}
.step{counter-increment:s;padding:1.5rem 0 1.6rem;border-bottom:1px solid rgba(18,25,28,.24)}
.step::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--display);
  font-weight:700;font-size:2.45rem;line-height:.9;letter-spacing:-.04em;
  color:rgba(18,25,28,.32);margin-bottom:.6rem}
.step h3{margin-bottom:.4rem}
.step p{font-size:var(--fs-sm);color:rgba(18,25,28,.72);margin:0;max-width:34ch}
@media(min-width:860px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{border-bottom:0;padding:1.9rem 2.25rem 0 0}
  .step+.step{border-left:1px solid rgba(18,25,28,.24);padding-left:2.25rem}
  .step::before{font-size:3.1rem}
}

/* ---------- service area ---------- */

.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem;padding:0;list-style:none}
.chips li{border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);
  padding:.45rem 1rem;font-size:var(--fs-sm);color:var(--on-dark)}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;max-width:64rem}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-weight:600;font-size:1.03rem;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.45rem;top:1.6rem;width:.62rem;height:.62rem;
  border-right:2px solid var(--secondary-ink);border-bottom:2px solid var(--secondary-ink);
  transform:rotate(45deg);transition:transform .18s ease-out}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>div{padding:0 2.5rem 1.4rem 0;color:var(--text-soft);font-size:var(--fs-sm);line-height:1.65}
.faq details>div p{margin-bottom:.75rem}

/* ---------- final cta ---------- */
.final-grid{display:grid;gap:clamp(1.75rem,4vw,3rem)}
@media(min-width:960px){.final-grid{grid-template-columns:1fr .88fr;align-items:start}}

/* ---------- footer ---------- */
.site-foot{background:#0C1214;color:var(--on-dark-soft);font-size:var(--fs-sm);padding-block:2.75rem 6rem}
@media(min-width:760px){.site-foot{padding-bottom:2.75rem}}
.foot-grid{display:grid;gap:1.75rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-foot img{width:160px;height:30px;margin-bottom:1rem}
.site-foot h3{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);
  font-weight:600;margin-bottom:.85rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--primary)}
.foot-legal{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--fs-xs);line-height:1.7}

/* ---------- sticky mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:.6rem;
  padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(18,25,28,.97);border-top:1px solid rgba(255,255,255,.12)}
.callbar a{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;
  gap:.45rem;font-weight:600;font-size:.97rem;padding:.8rem .7rem;border-radius:var(--r-btn);
  text-decoration:none}
.callbar .c-call{flex-grow:1.4}
.callbar .c-call{background:var(--primary);color:var(--ink)}
.callbar .c-form{background:transparent;color:var(--on-dark);border:1px solid rgba(255,255,255,.3)}
.callbar svg{width:17px;height:17px}
@media(min-width:760px){.callbar{display:none}}
/* The bar is fixed, so the page has to reserve its height or it sits on top of
   whatever ends the page. It was covering the last form field and the footer on
   every mobile view. */
@media(max-width:759.98px){
  body{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom))}
}

/* ---------- lead form ---------- */
/* The card is the one thing on the hero that should feel liftable. It sits on a
   near-black ground, so the lift comes from a deeper shadow plus a hairline inner
   ring rather than a border, which would read as a box. */
.form-card{background:var(--paper);color:var(--text);border-radius:20px;
  padding:clamp(1.45rem,3.6vw,2.05rem);
  box-shadow:0 30px 64px -26px rgba(0,0,0,.78),0 6px 18px rgba(0,0,0,.22),
             inset 0 0 0 1px rgba(255,255,255,.55)}
/* The submit is the end of the hero's argument, so it gets more weight than a
   default button. */
.form-card .btn-primary{font-size:1.03rem;padding-block:.95rem;letter-spacing:-.005em}
/* Reading order in the card is kicker, headline, sub, progress, step. The step
   count is a position indicator, so it belongs with the bar it describes rather
   than above the headline where it was the first thing read. */
.form-kicker{font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--secondary-ink);margin:0 0 .5rem;display:flex;align-items:center;gap:.5rem}
.form-kicker::after{content:"";flex:1 1 auto;height:1px;background:var(--border)}
.form-head{margin-bottom:.5rem}
.form-head h2,.form-head h3{font-size:var(--fs-form);font-weight:700;letter-spacing:-.026em;
  line-height:1.16;margin-bottom:0}
.form-step{font-size:var(--fs-xs);font-weight:600;color:var(--text-soft);margin:.5rem 0 1.15rem;
  letter-spacing:.01em}
.form-note{font-size:var(--fs-sm);color:var(--text-soft);margin:0 0 1.15rem}
.progress{height:5px;border-radius:var(--r-pill);background:var(--border);overflow:hidden;margin-bottom:0}
.progress i{display:block;height:100%;background:var(--secondary);border-radius:var(--r-pill);
  transition:width .25s ease-out}
.field{margin-bottom:.95rem}
.field label{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;
  color:var(--text);margin-bottom:.35rem}
.field .req{color:var(--accent)}
.field input,.field select{width:100%;font-family:inherit;font-size:1rem;line-height:1.4;
  padding:.72rem .8rem;border:1px solid var(--border);border-radius:var(--r-input);
  background:var(--paper);color:var(--text);transition:border-color .15s ease-out}
.field input::placeholder{color:#8FA0A7}
.field input:hover,.field select:hover{border-color:#C3D0D4}
.field input:focus-visible,.field select:focus-visible{border-color:var(--secondary);outline:2px solid var(--focus);outline-offset:1px}
.field input[aria-invalid="true"]{border-color:var(--accent)}
.field .err{display:none;font-size:var(--fs-xs);color:#B4471F;margin-top:.3rem}
.field[data-invalid] .err{display:block}
.row2{display:grid;gap:.95rem}
@media(min-width:420px){.row2{grid-template-columns:1fr 1fr}}
.consent{display:grid;grid-template-columns:1.15rem 1fr;gap:.65rem;align-items:start;
  margin:.15rem 0 1.15rem;font-size:var(--fs-xs);color:var(--text-soft);line-height:1.55}
.consent input{width:1.15rem;height:1.15rem;margin:.2rem 0 0;accent-color:var(--secondary)}
.opts{display:grid;gap:.55rem;margin-bottom:1.1rem}
@media(min-width:430px){.opts{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:.6rem;border:1px solid var(--border);border-radius:var(--r-input);
  padding:.7rem .85rem;cursor:pointer;font-size:var(--fs-sm);line-height:1.35;
  transition:border-color .15s ease-out,background-color .15s ease-out}
.opt:hover{border-color:var(--secondary)}
.opt input{accent-color:var(--secondary);flex:0 0 auto;margin:0}
.opt:has(input:checked){border-color:var(--secondary);background:#F1F7F8}
.form-foot{margin-top:.9rem;font-size:var(--fs-xs);color:var(--text-soft);line-height:1.6}
.form-back{margin-top:.55rem}
.form-done{text-align:left}
.form-done h3{margin-bottom:.6rem}
.form-done .tick{width:2.5rem;height:2.5rem;border-radius:var(--r-pill);background:#E8F4EF;
  color:var(--success);display:grid;place-items:center;margin-bottom:1rem}
.form-done .tick svg{width:1.35rem;height:1.35rem}
[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- hero photo strip ---------- */
.hero-strip{margin:0;position:relative;background:var(--ink)}
.hero-strip img{width:100%;height:clamp(220px,38vw,430px);object-fit:cover;object-position:center 58%}
.hero-strip figcaption{position:absolute;left:0;right:0;bottom:0;padding-top:2.6rem;padding-bottom:1.1rem;
  font-size:var(--fs-xs);color:#fff;background:linear-gradient(to top,rgba(18,25,28,.88),transparent)}
.hero-strip figcaption .wrap{display:block}
.stars svg{width:15px;height:15px;fill:currentColor}

/* ---------- mobile height budget ----------
   A paid landing page is judged on how fast a thumb reaches the form the second
   time, not on how much of it exists. Below 900px the portrait job photos crop
   to 4:3, section rhythm tightens, and the review wall collapses behind a
   disclosure that keeps every named review in the DOM. */
@media (max-width:899px){
  /* Keep the per-section weighting on mobile, just compressed. A flat override
     here would throw away the rhythm the pad-* classes set. */
  .pad-xl{--pad:clamp(2.6rem,7vw,3.6rem)}
  .pad-lg{--pad:clamp(2.25rem,6vw,3.1rem)}
  .pad-md{--pad:clamp(1.95rem,5.2vw,2.7rem)}
  .pad-sm{--pad:clamp(1.7rem,4.5vw,2.3rem)}
  section{--pad:clamp(2.1rem,6vw,3.1rem)}
  body{line-height:1.58}
  .head-block{margin-bottom:1.35rem}
  .split{gap:1.25rem}
  .split-media img,figure.shot img{aspect-ratio:16/10;object-fit:cover;object-position:center}
  figure.shot figcaption{margin-top:.5rem}
  .hero-strip img{height:clamp(170px,42vw,230px)}
  .hero-grid{gap:1.25rem;padding-bottom:1.6rem}
  .hero{padding-top:1.5rem}
  .hero h1 .accentline{font-size:.52em;margin-top:.35em}
  .form-card{padding:1.1rem}
  .form-note{margin-bottom:.9rem}
  .progress{margin-bottom:1rem}
  .field{margin-bottom:.8rem}
  .gallery{gap:.65rem}
  .gallery img{aspect-ratio:4/3}
  .gallery figcaption{margin-top:.35rem}
  .spec{gap:.75rem}
  .spec p{margin-top:.08rem}
  .hero-trust{padding-top:1.15rem}
  .lic b{font-size:1rem}
  .review-lead{margin-bottom:1.25rem}
  .reviews{gap:.7rem}
  .review{padding:1rem}
  .review p{margin-bottom:.7rem}
  .steps{gap:1.1rem}
  .step{padding-top:1.35rem}
  .faq summary{padding-block:.95rem}
  .faq details>div{padding-bottom:1.15rem}
  .site-foot{padding-block:2rem 5.25rem}
  .foot-grid{gap:1.2rem}
  .foot-legal{margin-top:1.5rem;padding-top:1.15rem}
  p{margin-bottom:.85rem}
}

/* The rest of the review wall. Every named review is in the markup at all times.
   The clip is CSS and present at first paint, so nothing reflows when the script
   lands, and the button only appears where the clip is actually in force. */
@media (max-width:899px){
  .reviews-clip>.review:nth-child(n+4){display:none}
  .reviews-clip.is-open>.review{display:block}
}
.more-btn{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:var(--fs-sm);color:var(--text);
  border:1px solid var(--border);background:var(--paper);border-radius:var(--r-pill);padding:.6rem 1.15rem}
.more-btn:hover{border-color:var(--secondary)}
.more-btn::after{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--secondary-ink);
  border-bottom:2px solid var(--secondary-ink);transform:rotate(45deg) translateY(-2px)}

@media (max-width:899px){
  /* Horizontal cards were tried here and came out taller: a 250px text column
     wraps into more lines than the plate saves. Keep the stack, shrink the plate. */
  .brand{padding:1.05rem 1.1rem 1.2rem}
  .brand .plate{height:52px;margin-bottom:.8rem}
  .brand .plate img{max-height:52px}
  .brand h3{margin-bottom:.35rem}
  .brand p{font-size:.9rem;line-height:1.52}
  .brands{gap:.7rem}
  /* Trust row drops to icon plus label. The detail line reads as noise at this width. */
  .creds{gap:.45rem}
  .site-foot h3{margin-bottom:.6rem}
  .site-foot ul{gap:.35rem}
  .site-foot img{margin-bottom:.7rem}
}

.callbar a{white-space:nowrap;font-size:.94rem;overflow:hidden}
/* The phone number is the whole point of the bar, so the word "Call" only earns
   its place once the number and the secondary CTA both already fit. */
.callbar .lbl{display:none}
@media (min-width:430px){.callbar .lbl{display:inline}}

/* Small handsets. Below 360px the two labels and the icon stop fitting at the
   default scale, and overflow:hidden was quietly eating the last characters. */
@media (max-width:359px){
  .callbar{gap:.4rem;padding-inline:.65rem}
  .callbar a{font-size:.86rem;padding:.75rem .45rem;gap:.35rem}
  .callbar svg{width:15px;height:15px}
}

/* ---------- reasons list ---------- */
/* A numbered editorial list rather than a card grid. Five items do not divide
   into a tidy grid, and forcing them into one produces the orphan-card row that
   makes a page look templated. Rows also let the copy run at a readable measure
   instead of being cut to fit a tile. */
.reasons{list-style:none;margin:0;padding:0;counter-reset:r}
.reason{counter-increment:r;display:grid;gap:.85rem;padding:1.55rem 0;
  border-top:1px solid var(--border)}
.reason:first-child{border-top:0;padding-top:.5rem}
.reason-mark{display:flex;align-items:center;gap:.8rem}
.reason-mark::before{content:counter(r,decimal-leading-zero);font-weight:700;
  font-size:.78rem;letter-spacing:.14em;color:var(--text-soft)}
.reason-mark svg{width:30px;height:30px;flex:0 0 auto;color:var(--secondary-ink);
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.reason h3{margin-bottom:.3rem}
.reason p{margin:0;max-width:64ch;color:var(--text-soft)}
@media(min-width:820px){
  .reason{grid-template-columns:8.5rem minmax(0,1fr);align-items:start;
    gap:0 2.5rem;padding:1.95rem 0}
  .reason-mark{flex-direction:column;align-items:flex-start;gap:.7rem;padding-top:.15rem}
  .reason-mark svg{width:34px;height:34px}
}
.t-ink .reason,.t-ink2 .reason,.dark .reason{border-top-color:rgba(255,255,255,.14)}
.t-ink .reason p,.t-ink2 .reason p,.dark .reason p{color:var(--on-dark-soft)}
.t-ink .reason-mark svg,.t-ink2 .reason-mark svg,.dark .reason-mark svg{color:var(--primary)}
.t-ink .reason-mark::before,.dark .reason-mark::before{color:var(--on-dark-soft)}