/* Layout: dark photo hero with the offer form as the hero's second column, then alternating paper / charcoal bands.
   Brand: charcoal + orange from the existing Carquired wordmark. One deliberate look, so no dark-mode swap. */
:root{
  --ink:#16191d;        /* wordmark charcoal */
  --ink-2:#1f2329;
  --ink-3:#2b3038;
  --paper:#f7f6f3;      /* logo ground */
  --white:#ffffff;
  --orange:#f26a21;     /* the Q */
  --orange-hot:#ff7a2e;
  --orange-ink:#c2470f; /* orange for small text on light */
  --steel:#5f656d;
  --steel-2:#9aa0a8;
  --line:#e3e1dc;
  --line-dark:#323842;
  --ok:#1f9d63;
  --f-display:"Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body:"Figtree", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap:1200px;
  --gut-l:max(20px, env(safe-area-inset-left, 0px));
  --gut-r:max(20px, env(safe-area-inset-right, 0px));
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);line-height:1.05;letter-spacing:-.025em;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.band{padding-block:clamp(72px,9vw,128px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.on-dark .eyebrow{color:var(--orange-hot)}
.h2{font-size:clamp(34px,4.6vw,58px);font-weight:700}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--steel);max-width:58ch}
.on-dark{background:var(--ink);color:var(--white)}
.on-dark .lede{color:var(--steel-2)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

/* ---------- wordmark (rebuilt from the logo file) ---------- */
.wm{display:inline-flex;align-items:center;line-height:0;color:inherit;text-decoration:none}
.wm svg{display:block;height:28px;width:auto;overflow:visible}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:-.005em;border:0;border-radius:999px;padding:15px 26px;cursor:pointer;text-decoration:none;transition:transform .15s ease, background .15s ease, box-shadow .15s ease}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 10px 24px -10px rgba(242,106,33,.75)}
.btn-orange:hover{background:var(--orange-hot);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn svg{width:18px;height:18px}

/* ---------- header ---------- */
.topbar{background:var(--ink-2);color:#c9cdd2;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:9px}
.topbar b{color:#fff;font-weight:600}
.topbar .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:1px}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(22,25,29,.94);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
nav.main{display:flex;gap:30px;font-size:15px;font-weight:500}
nav.main a{text-decoration:none;color:#d6d9dd;transition:color .15s}
nav.main a:hover{color:#fff}
header.site .btn{padding:11px 20px;font-size:15px}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;background:var(--ink);overflow:hidden;isolation:isolate}
.hero-photo{position:absolute;inset:0;z-index:-2}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(1.04);filter:brightness(1.18) contrast(1.05);animation:settle 1.6s cubic-bezier(.2,.7,.2,1) both}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg, rgba(14,16,19,.94) 0%, rgba(14,16,19,.82) 38%, rgba(14,16,19,.35) 64%, rgba(14,16,19,.55) 100%),
  linear-gradient(0deg, rgba(14,16,19,.85) 0%, rgba(14,16,19,0) 38%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(56px,7vw,96px) clamp(64px,7vw,104px)}
.hero h1{font-size:clamp(52px,7.6vw,104px);font-weight:800;letter-spacing:-.045em;line-height:.92;margin:18px 0 24px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .sub{font-size:clamp(17px,1.5vw,20px);color:#d3d7dc;max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;padding:0;list-style:none}
.chips li{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px}
.chips svg{width:20px;height:20px;flex:none;color:var(--orange)}
.hero-copy > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-copy > *:nth-child(2){animation-delay:.08s}
.hero-copy > *:nth-child(3){animation-delay:.16s}
.hero-copy > *:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:.001;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.1)}to{transform:scale(1.04)}}

/* ---------- offer form (mirrors the Car Offer Form plugin flow) ---------- */
.offer{background:var(--white);color:var(--ink);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);box-shadow:0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);animation:rise .9s .2s cubic-bezier(.2,.7,.2,1) both;position:relative}
.offer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.offer-head h2{font-size:26px;font-weight:700;letter-spacing:-.03em}
.offer-head p{font-size:14.5px;color:var(--steel);margin-top:4px}
.stepper{display:flex;gap:6px;margin:0 0 20px}
.stepper i{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .3s}
.stepper i.on{background:var(--orange)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#f1f0ec;border-radius:12px;padding:5px;margin-bottom:18px}
.tabs button{font-family:var(--f-display);font-weight:600;font-size:14.5px;letter-spacing:.02em;border:0;background:transparent;color:var(--steel);padding:11px 8px;border-radius:9px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.plate{position:relative;border:2.5px solid var(--ink);border-radius:12px;background:linear-gradient(180deg,#fff 0%,#f6f6f4 100%);padding:22px 14px 12px;box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 5px #d9d7d2}
.plate::before,.plate::after{content:"";position:absolute;top:9px;width:7px;height:7px;border-radius:50%;background:#c9c6bf;box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
.plate::before{left:14px}.plate::after{right:14px}
.plate label{position:absolute;top:5px;left:0;right:0;text-align:center;font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--orange-ink);text-transform:uppercase}
.plate input{width:100%;border:0;background:transparent;text-align:center;font-family:var(--f-mono);font-weight:700;font-size:clamp(28px,3.2vw,36px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:2px 0;outline:none}
.plate input::placeholder{color:#c4c1ba}
.plate:focus-within{border-color:var(--orange)}
.vinbox input{font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > span{font-size:13.5px;font-weight:600;color:var(--ink)}
.field input,.field select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;outline:none;transition:border-color .15s, box-shadow .15s;appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316191d' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field input:focus,.field select:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(242,106,33,.15)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stack{display:grid;gap:14px}
.offer .go{width:100%;margin-top:16px;padding:17px 22px;font-size:17px}
.offer .alt{display:block;margin:14px auto 0;background:none;border:0;font:inherit;font-size:14.5px;font-weight:600;color:var(--orange-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.embed-slot{min-height:230px;display:flex;flex-direction:column}
.embed-slot>script{display:none}
.embed-slot>*{width:100%}
.embed-ph{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border:1.5px dashed #cfcbc3;border-radius:14px;background:repeating-linear-gradient(135deg,#faf9f6 0 12px,#f4f2ee 12px 24px);color:var(--steel);padding:28px}
.embed-ph svg{width:34px;height:34px;color:var(--orange)}
.embed-ph b{font-size:16px;color:var(--ink);font-weight:650}
.embed-ph span{font-size:13.5px}
.offer .fine{font-size:12.5px;color:var(--steel);text-align:center;margin-top:14px;line-height:1.5}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:11px 8px;font-weight:600;font-size:15px;cursor:pointer;transition:all .15s}
.seg input:checked + span{border-color:var(--ink);background:var(--ink);color:#fff}
.seg input:focus-visible + span{outline:3px solid var(--orange);outline-offset:2px}
.q-label{font-size:13.5px;font-weight:600;margin-bottom:6px}
.err{display:none;color:#b42318;font-size:13.5px;font-weight:600;margin-top:10px}
.back{background:none;border:0;font:inherit;font-weight:600;font-size:14.5px;color:var(--steel);cursor:pointer;padding:8px 0}
.row-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.row-actions .btn{flex:1;max-width:240px}
.vfound{display:flex;align-items:center;gap:12px;background:#f6f5f1;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:14.5px}
.vfound svg{width:22px;height:22px;color:var(--ok);flex:none}
.vfound b{font-family:var(--f-display);font-size:16px}
.done{text-align:center;padding:12px 4px 4px}
.done .tick{width:64px;height:64px;border-radius:50%;background:var(--orange);display:grid;place-items:center;margin:4px auto 16px}
.done .tick svg{width:30px;height:30px;color:#fff}
.done h3{font-size:26px;font-weight:700;margin-bottom:8px}
.done p{color:var(--steel);font-size:15.5px}
.step{display:none}
.step.active{display:block;animation:rise .35s ease both}
.consent{font-size:12px;color:var(--steel);line-height:1.5;margin-top:12px}

/* ---------- rail under hero ---------- */
.rail{background:var(--ink);color:#fff;border-top:1px solid var(--line-dark)}
.rail ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.rail li{padding:26px 24px 28px;border-left:1px solid var(--line-dark);display:grid;gap:4px}
.rail li:first-child{border-left:0;padding-left:0}
.rail b{font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.01em}
.rail span{color:var(--steel-2);font-size:14.5px;line-height:1.5}
.rail .k{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-hot);font-weight:700}

/* ---------- how it works ---------- */
.how{background:var(--paper)}
.how .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.how .h2{margin:16px 0 18px}
.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:24px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{font-family:var(--f-display);font-weight:800;font-size:44px;line-height:.9;color:var(--orange);letter-spacing:-.05em}
.steps h3{font-size:22px;font-weight:700;margin-bottom:6px;letter-spacing:-.02em}
.steps p{color:var(--steel);font-size:16px}
.how-visual{position:relative}
.how-visual .ph{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--ink)}
.how-visual .ph img{width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.slip{position:absolute;left:clamp(-40px,-3vw,-16px);bottom:36px;width:min(320px,86%);background:#fff;border-radius:16px;padding:18px 20px 16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.45);font-size:14px}
.slip .tag{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;background:#f1f0ec;color:var(--steel);padding:4px 8px;border-radius:6px}
.slip .veh{font-family:var(--f-display);font-weight:700;font-size:18px;margin-top:10px;letter-spacing:-.02em}
.slip .meta{color:var(--steel);font-size:13.5px;font-family:var(--f-mono);margin-top:2px}
.slip .amt{display:flex;align-items:baseline;justify-content:space-between;border-top:1px dashed var(--line);margin-top:14px;padding-top:12px}
.slip .amt b{font-family:var(--f-display);font-size:34px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.slip .amt span{font-size:12.5px;color:var(--steel)}
.slip .valid{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--ok);font-weight:600}
.slip .valid i{width:8px;height:8px;border-radius:50%;background:var(--ok)}

/* ---------- what we buy ---------- */
.buy{background:var(--white)}
.buy-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:44px}
.buy-head .h2{margin-top:14px;max-width:16ch}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4;background:var(--ink);color:#fff;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,16,19,.9) 0%,rgba(14,16,19,.1) 55%)}
.tile .cap{position:absolute;left:20px;right:20px;bottom:18px}
.tile b{display:block;font-family:var(--f-display);font-size:23px;font-weight:700;letter-spacing:-.02em}
.tile span{font-size:14px;color:#cfd3d8}
.also{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;align-items:center}
.also > span{font-weight:600;margin-right:6px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;font-size:14.5px;font-weight:600;background:var(--paper)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* ---------- compare ---------- */
.compare .head{max-width:760px;margin-bottom:48px}
.compare .h2{margin:16px 0 18px}
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line-dark)}
table.cmp{width:100%;border-collapse:collapse;min-width:720px;font-size:15.5px}
.cmp th,.cmp td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line-dark);vertical-align:top}
.cmp thead th{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--steel-2);background:var(--ink-2)}
.cmp thead th.us{color:#fff;background:var(--orange)}
.cmp thead th.us .wm svg{height:22px}
.cmp tbody th{font-weight:600;color:#fff;width:24%}
.cmp td{color:var(--steel-2)}
.cmp td.us{color:#fff;font-weight:600;background:rgba(242,106,33,.09)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp .y{color:var(--orange-hot)}

/* ---------- payoff ---------- */
.payoff .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.payoff .h2{margin:16px 0 18px}
.payoff .lede + .lede{margin-top:14px}
.calc{background:var(--white);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);border:1px solid var(--line)}
.calc .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:var(--steel)}
.calc h3{font-size:24px;font-weight:700;margin:8px 0 22px}
.slider{display:grid;gap:8px;margin-bottom:22px}
.slider .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.slider label{font-weight:600;font-size:15px}
.slider output{font-family:var(--f-mono);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--orange) var(--p,50%),#e7e5e0 var(--p,50%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:pointer}
.result{border-radius:var(--r-md);background:var(--ink);color:#fff;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.result .lbl{font-size:14.5px;color:var(--steel-2)}
.result b{font-family:var(--f-display);font-size:40px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.result.neg b{color:var(--orange-hot)}
.calc .note{font-size:13px;color:var(--steel);margin-top:14px}
.ready{margin-top:36px}
.ready h3{font-size:20px;font-weight:700;margin-bottom:14px}
.ready ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ready li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.ready li svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--orange)}
.ready li small{display:block;color:var(--steel);font-size:14px}

/* ---------- faq ---------- */
.faq{background:var(--white)}
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px)}
.faq .h2{margin:16px 0 18px}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary .pm{width:30px;height:30px;flex:none;border-radius:50%;border:1.5px solid var(--line);position:relative;transition:transform .2s, background .2s}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
details[open] summary .pm{background:var(--orange);border-color:var(--orange)}
details[open] summary .pm::before,details[open] summary .pm::after{background:#fff}
details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
details p{color:var(--steel);padding:0 48px 24px 0;font-size:16.5px}

/* ---------- owner ---------- */
.owner-mini{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:7px 16px 7px 7px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;text-decoration:none;backdrop-filter:blur(6px);transition:background .2s}
.owner-mini:hover{background:rgba(255,255,255,.14)}
.owner-mini img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--orange)}
.owner-mini b{display:block;font-family:var(--f-display);font-weight:600;font-size:15px;line-height:1.2}
.owner-mini small{display:block;font-size:12.5px;color:#c9ced4;line-height:1.3}
.owner-mini svg{width:18px;height:18px;color:var(--orange);margin-left:4px}
.owner{background:var(--paper);overflow:hidden}
.owner-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.owner-photo{position:relative;margin:0 0 0 18px;max-width:500px;width:100%;justify-self:center}
.owner-frame{position:absolute;inset:-18px 18px 18px -18px;border-radius:28px;background:var(--orange)}
.owner-photo img{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:24px;box-shadow:0 40px 70px -35px rgba(22,25,29,.65)}
.owner-plate{position:absolute;left:-18px;bottom:28px;display:flex;align-items:center;gap:12px;background:var(--white);color:var(--ink);border-radius:16px;padding:12px 18px 12px 12px;box-shadow:0 22px 40px -20px rgba(0,0,0,.5)}
.owner-plate .q{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ink);overflow:hidden}
.owner-plate .q svg{height:26px;width:auto;color:var(--ink)}
.owner-plate b{display:block;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1.15}
.owner-plate small{display:block;font-size:13px;color:var(--steel)}
.owner-copy .h2{max-width:17ch}
.owner-note{position:relative;margin:26px 0 0;padding:0 0 0 26px;border-left:3px solid var(--orange)}
.owner-note p{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:#2c3137}
.owner-note p+p{margin-top:14px}
.owner-sign{display:flex;align-items:center;gap:18px;margin:26px 0 0 26px;flex-wrap:wrap}
.owner-sign .sig{font-family:"Allura",cursive;font-size:46px;line-height:1;color:var(--ink);transform:rotate(-4deg)}
.owner-sign .who{padding-left:18px;border-left:1px solid var(--line)}
.owner-sign b{display:block;font-family:var(--f-display);font-weight:600;font-size:15px}
.owner-sign small{display:block;font-size:13px;color:var(--steel)}
.owner-lead{margin:20px 0 0;font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:#2c3137;max-width:56ch}
.owner-yt{position:absolute;top:22px;right:-14px;display:flex;align-items:center;gap:10px;background:var(--white);color:var(--ink);text-decoration:none;border-radius:999px;padding:9px 16px 9px 11px;font-size:14px;box-shadow:0 18px 36px -18px rgba(0,0,0,.55)}
.owner-yt svg{width:26px;height:26px;flex:none}
.owner-yt b{font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.owner-creds{list-style:none;padding:0;margin:30px 0 30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.owner-creds li{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.owner-creds svg{width:22px;height:22px;color:var(--orange);margin-bottom:10px}
.owner-creds b{display:block;font-family:var(--f-display);font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.owner-creds span{display:block;font-size:13.5px;color:var(--steel);margin-top:4px;line-height:1.45}
.owner-ctas{display:flex;flex-wrap:wrap;gap:12px}
.owner-ctas .btn-ghost{color:var(--ink)}
.owner-ctas .btn-ghost:hover{background:rgba(22,25,29,.06)}
.owner-stats{margin-top:clamp(48px,6vw,80px);background:var(--ink);color:var(--white);border-radius:var(--r-lg);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:clamp(28px,4vw,44px) clamp(20px,3vw,40px) 22px;row-gap:22px}
.owner-stats .st{padding:0 clamp(12px,2vw,28px);border-left:1px solid rgba(255,255,255,.12)}
.owner-stats .st:first-child{border-left:0}
.owner-stats b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(38px,4.6vw,60px);line-height:1;letter-spacing:-.035em;color:var(--orange-hot)}
.owner-stats .st span{display:block;margin-top:10px;font-size:14.5px;color:#c9ced4}
.owner-stats .src{grid-column:1/-1;margin:0;padding:14px clamp(12px,2vw,28px) 0;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#9aa1a9}
.owner-stats .src a{color:#c9ced4}
.owner-promises{list-style:none;padding:0;margin:34px 0 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.owner-promises li{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.owner-promises svg{width:22px;height:22px;color:var(--orange);margin-bottom:10px}
.owner-promises b{display:block;font-family:var(--f-display);font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.owner-promises span{display:block;font-size:13.5px;color:var(--steel);margin-top:4px;line-height:1.45}
.final-sign{display:flex;align-items:center;gap:12px;margin-top:34px}
.final-sign img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--orange)}
.final-sign b{display:block;font-family:var(--f-display);font-weight:600;font-size:15px}
.final-sign small{display:block;font-size:13px;color:#c9ced4}
@media (max-width:1020px){
  .owner-grid{grid-template-columns:1fr}
  .owner-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .owner-stats .st:nth-child(3){border-left:0}
  .owner-photo{max-width:420px;margin:18px auto 0}
}
@media (max-width:620px){
  .owner-photo{max-width:none;margin:18px 0 0 18px;width:calc(100% - 18px)}
  .owner-creds{grid-template-columns:1fr}
  .owner-creds li{display:grid;grid-template-columns:28px 1fr;column-gap:12px;padding:14px 16px}
  .owner-creds svg{grid-row:span 2;margin:2px 0 0}
  .owner-yt{right:auto;left:-6px;top:14px}
  .owner-ctas .btn{width:100%}
  .owner-sign{margin-left:0}
  .owner-sign .who{display:none}
  .owner-promises li{display:grid;grid-template-columns:28px 1fr;column-gap:12px;padding:14px 16px}
  .owner-promises svg{grid-row:span 2;margin:2px 0 0}
  .owner-copy .btn{width:100%}
}
/* ---------- final cta ---------- */
.final{position:relative;color:#fff;isolation:isolate;overflow:hidden;background:var(--ink)}
.final > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;object-position:60% 90%}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,16,19,.92) 0%,rgba(14,16,19,.65) 55%,rgba(14,16,19,.35) 100%)}
.final .wrap{padding-block:clamp(88px,11vw,150px)}
.final h2{font-size:clamp(40px,6vw,82px);font-weight:800;letter-spacing:-.045em;max-width:13ch}
.final h2 em{font-style:normal;color:var(--orange)}
.final p{color:#d3d7dc;font-size:19px;margin:20px 0 34px;max-width:44ch}
.final .actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--steel-2);font-size:15px}
footer .wrap{padding-block:64px 36px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer .wm{color:#fff}
footer .wm svg{height:34px}
footer h4{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 16px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
footer a{text-decoration:none}
footer a:hover{color:#fff}
footer .about{margin-top:16px;max-width:34ch}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line-dark);margin-top:52px;padding-top:24px;font-size:13.5px}
.todo{display:inline-block;border:1.5px dashed var(--steel);border-radius:8px;padding:2px 8px;color:var(--steel-2);font-family:var(--f-mono);font-size:12.5px}

/* ---------- sticky mobile cta ---------- */
.mcta{display:none}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  nav.main{display:none}
  .hero .wrap{grid-template-columns:1fr}
  .hero::before{background:linear-gradient(180deg,rgba(14,16,19,.86) 0%,rgba(14,16,19,.8) 45%,rgba(14,16,19,.96) 100%)}
  .hero-photo img{object-position:50% 40%}
  .final > img{object-position:80% 100%}
  .final::before{background:linear-gradient(180deg,rgba(14,16,19,.92) 0%,rgba(14,16,19,.8) 55%,rgba(14,16,19,.2) 100%)}
  .final .wrap{padding-bottom:240px}
  .rail ul{grid-template-columns:1fr 1fr}
  .rail li:nth-child(3){border-left:0;padding-left:0}
  .rail li:nth-child(n+3){border-top:1px solid var(--line-dark)}
  .how .wrap,.payoff .wrap,.faq .wrap{grid-template-columns:1fr}
  .how-visual{max-width:560px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}
}
@media (max-width:620px){
  body{font-size:16px}
  .topbar .hide-sm{display:none}
  .topbar .wrap{justify-content:center}
  .wm svg{height:24px}
  header.site .btn{padding:10px 16px;font-size:14px}
  .rail ul{grid-template-columns:1fr}
  .rail li{border-left:0;padding-left:0}
  .rail li:nth-child(n+2){border-top:1px solid var(--line-dark)}
  .grid3{grid-template-columns:1fr 1fr}
  .grid3 .field:first-child{grid-column:1/-1}
  .tiles{gap:10px}
  .tile b{font-size:19px}
  .tile .cap{left:14px;right:14px;bottom:12px}
  .tile span{font-size:12.5px}
  .slip{position:relative;left:auto;bottom:auto;margin:-48px auto 0;width:calc(100% - 32px)}
  .fgrid{grid-template-columns:1fr}
  details p{padding-right:0}
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:12px var(--gut-r) calc(12px + env(safe-area-inset-bottom,0px)) var(--gut-l);background:rgba(22,25,29,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateY(110%);transition:transform .25s ease}
  .mcta.show{transform:none}
  .mcta .btn{width:100%}
  footer .wrap{padding-bottom:110px}
}
/* form-first hero on tablet/phone (Hammad, 2026-11-15): headline, then the form, then the rest */
@media (max-width:1020px){
  .hero .wrap{row-gap:0;padding-block:22px 48px}
  .hero-copy{display:contents}
  .hero .eyebrow{display:none}
  .hero h1{order:1;font-size:clamp(40px,10.5vw,64px);margin:0 0 16px}
  .hero .offer{order:2;padding:20px 18px 18px}
  .hero .sub{order:3;margin-top:28px}
  .hero .chips{order:4;margin-top:20px}
  .hero .owner-mini{order:5;justify-self:start;margin-top:22px}
  .offer-head{margin-bottom:12px}
  .offer-head h2{font-size:22px}
  .offer-head p{font-size:13.5px;margin-top:2px}
  .embed-slot{min-height:200px}
}

/* ===== Carquired SEO pages + menu (built by seo-src/build.py) ===== */
/* header + dropdown menu */
header.site .wrap{position:relative}
nav.main{align-items:center;gap:26px}
.dd{position:relative}
.dd-t{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:8px 0;font:inherit;font-size:15px;font-weight:500;color:#d6d9dd;cursor:pointer;transition:color .15s}
.dd-t:hover,.dd.open .dd-t{color:#fff}
.dd-t svg{width:15px;height:15px;transition:transform .2s}
.dd.open .dd-t svg{transform:rotate(180deg)}
.dd-p{position:absolute;top:100%;left:-16px;padding-top:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;z-index:60}
.dd.open .dd-p{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
@media (hover:hover) and (min-width:1021px){.dd:hover .dd-p,.dd:focus-within .dd-p{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}}
.dd-in{min-width:270px;background:#fff;color:var(--ink);border-radius:16px;padding:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 1px rgba(22,25,29,.06);display:grid}
nav.main .dd-in a{display:block;padding:9px 12px;border-radius:10px;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;line-height:1.35}
nav.main .dd-in a:hover{background:var(--paper);color:var(--orange-ink)}
.dd-wide .dd-p{left:50%;transform:translate(-50%,6px)}
.dd-wide.open .dd-p{transform:translate(-50%,0)}
@media (hover:hover) and (min-width:1021px){.dd-wide:hover .dd-p,.dd-wide:focus-within .dd-p{transform:translate(-50%,0)}}
.dd-in.mega{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;min-width:700px;padding:16px}
.mega .mh{display:block;font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);padding:6px 12px 8px}
nav.main .mega a.all{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding:14px 12px 8px;font-weight:600;color:var(--orange-ink)}
.mega a.all svg{width:16px;height:16px}
.hdr-r{display:flex;align-items:center;gap:12px}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.08);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1180px) and (min-width:1021px){nav.main{gap:20px}header.site .wrap{gap:18px}}
@media (max-width:1020px){
  .burger{display:inline-flex}
  nav.main.open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--ink);padding:6px var(--gut-r) 26px var(--gut-l);max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow:auto;border-top:1px solid var(--line-dark);box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
  nav.main.open > a,nav.main.open .dd-t{display:flex;width:100%;justify-content:space-between;padding:15px 0;font-size:17px;font-weight:600;color:#fff;border-bottom:1px solid var(--line-dark)}
  nav.main .dd-p{position:static;opacity:1;visibility:visible;transform:none!important;display:none;padding:4px 0 10px;transition:none}
  nav.main .dd.open .dd-p{display:block}
  nav.main .dd-in,nav.main .dd-in.mega{min-width:0;background:transparent;box-shadow:none;padding:0;display:block}
  nav.main .dd-in a{color:#c9cdd2;padding:10px 4px;font-size:16px}
  nav.main .dd-in a:hover{background:transparent;color:#fff}
  .mega .mh{padding:14px 4px 4px;color:var(--orange-hot)}
  nav.main .mega a.all{border-top:0;padding:12px 4px;color:var(--orange-hot)}
  body.nav-open{overflow:hidden}
}
@media (max-width:620px){.hdr-r{gap:8px}.burger{width:40px;height:40px}}

/* breadcrumbs + sub hero */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13.5px;color:#aab0b7;margin-bottom:6px}
.crumbs a{color:#c9cdd2;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs .sep{color:#6b7179}
.crumbs [aria-current]{color:#fff;font-weight:600}
.sub-hero h1{font-size:clamp(42px,5.4vw,74px);line-height:.98;margin:16px 0 22px}
.sub-hero .sub{max-width:50ch}
@media (max-width:1020px){
  .hero .crumbs{order:0;margin-bottom:12px}
  .sub-hero h1{font-size:clamp(34px,8.6vw,52px)}
}

/* shared section pieces */
.cq-white{background:var(--white)}
.cq-head{max-width:780px;margin-bottom:40px}
.cq-head .h2{margin:16px 0 16px}
.cq-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(36px,5vw,80px);align-items:start}
.cq-split.solo{grid-template-columns:minmax(0,1fr);max-width:860px}
.cq-split .h2{margin:16px 0 20px}
.prose p{color:#2f343a;font-size:clamp(16.5px,1.3vw,18px);line-height:1.7;max-width:66ch}
.prose p+p,.prose ul+p,.prose p+ul,.prose h3+p{margin-top:16px}
.prose h3{font-size:22px;font-weight:700;margin-top:30px;letter-spacing:-.02em}
.prose ul{margin:16px 0 0;padding-left:0;list-style:none;display:grid;gap:10px;max-width:64ch}
.prose ul li{position:relative;padding-left:28px;color:#2f343a;font-size:16.5px;line-height:1.6}
.prose ul li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.prose a,.cq-card a,.cq-c a,.cq-meta a,.cq-tbl a,.faq details p a{color:var(--orange-ink);font-weight:600;text-underline-offset:3px}
.on-dark .prose p{color:#c9ced4}
.cq-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);position:sticky;top:96px}
.cq-white .cq-card{background:var(--paper)}
.cq-card h3{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;margin-bottom:16px}
.cq-card h3 svg{width:22px;height:22px;color:var(--orange);flex:none}
.cq-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.cq-list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.cq-list li svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--orange)}
.cq-list li small{display:block;color:var(--steel);font-size:13.5px;margin-top:2px}
.cq-list b{font-weight:600}
.cq-meta{font-size:14.5px;color:var(--steel);margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);line-height:1.55}
.cq-meta+.cq-meta{margin-top:10px;padding-top:0;border-top:0}
.cq-meta b{color:var(--ink);font-weight:600}
.cq-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cq-cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cq-cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cq-c{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 24px 26px}
.cq-white .cq-c{background:var(--paper)}
.on-dark .cq-c{background:var(--ink-2);border-color:var(--line-dark)}
.cq-c .k{font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--orange-ink)}
.on-dark .cq-c .k{color:var(--orange-hot)}
.cq-c h3{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:10px 0 8px}
.cq-c p{color:var(--steel);font-size:15.5px;line-height:1.6}
.on-dark .cq-c p{color:var(--steel-2)}
.cq-steps .steps{margin-top:28px}
.cq-pills{display:flex;flex-wrap:wrap;gap:10px}
a.pill-a{text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s,color .15s}
a.pill-a:hover{border-color:var(--orange);color:var(--orange-ink);background:#fff}
.cq-white a.pill-a{background:var(--paper)}
.cq-pills-sub{margin-top:18px;align-items:center}
.cq-pills-sub > span{font-weight:600;margin-right:6px;font-size:15px}
.cq-tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.cq-tbl table{width:100%;border-collapse:collapse;min-width:560px;font-size:15.5px}
.cq-tbl th,.cq-tbl td{text-align:left;vertical-align:top;padding:18px 22px;border-bottom:1px solid var(--line)}
.cq-tbl tr:last-child th,.cq-tbl tr:last-child td{border-bottom:0}
.cq-tbl th{width:30%;font-family:var(--f-display);font-weight:600;font-size:16px}
.cq-tbl td{color:#3a3f45;line-height:1.6}
/* areas hub */
.cq-hubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cq-hub{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 22px 20px}
.cq-hub h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.cq-hub h3 a{text-decoration:none}
.cq-hub h3 a:hover{color:var(--orange-ink)}
.cq-hub > p{color:var(--steel);font-size:14.5px;line-height:1.55;margin-bottom:12px}
.hub-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.hub-links a{font-size:15px;font-weight:600;color:var(--orange-ink);text-decoration:none}
.hub-links a:hover{text-decoration:underline}
.cq-hub .towns{margin-top:12px;font-size:13.5px;color:var(--steel)}
/* footer */
.fgrid.cq-fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px}
footer .cq-fgrid ul{gap:9px}
footer .cq-fgrid li{line-height:1.4}
@media (max-width:1020px){
  .cq-split{grid-template-columns:1fr}
  .cq-card{position:static}
  .cq-cards,.cq-cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cq-hubs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid.cq-fgrid{grid-template-columns:1fr 1fr}
  .fgrid.cq-fgrid>div:first-child{grid-column:1/-1}
}
@media (max-width:620px){
  .cq-cards,.cq-cards.c2,.cq-cards.c4,.cq-hubs{grid-template-columns:1fr}
  .cq-c{padding:20px}
  .cq-head{margin-bottom:28px}
  .fgrid.cq-fgrid{grid-template-columns:1fr 1fr;gap:28px 20px}
}

/* collapse double padding between same-colour sections */
.cq-white + .cq-white,.cq-white + .faq.band{padding-top:0}