:root{
  --brand:#0B3B5C; --accent:#E0821F; --ink:#111827; --radius:14px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ink-2:#5B6675; --ink-3:#8B94A3; --bg:#fff;
  /* Neutral greys everywhere read as "unfinished". Pulling a few percent of
     the client's accent through the surfaces, lines and muted text ties the
     whole page to their brand instead of leaving one orange button on grey.
     Percentages stay low so this works for any accent hue. */
  --bg-2:color-mix(in srgb, var(--accent) 7%, #F8F7F4);
  --line:color-mix(in srgb, var(--accent) 9%, #E6E9EE);
  --tint:color-mix(in srgb, var(--accent) 12%, transparent);
  --tint-brand:color-mix(in srgb, var(--brand) 8%, transparent);
  --accent-deep:color-mix(in srgb, var(--accent) 82%, #000);
  --shadow-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-2:0 4px 12px rgba(16,24,40,.06), 0 12px 32px rgba(16,24,40,.08);
  --shadow-3:0 24px 60px -12px rgba(16,24,40,.22);
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
/* Sticky footer. Without this the short lean page leaves a strip of bare
   background below the footer on any viewport taller than the content —
   110px on a 420x860 phone, more on desktop. */
body{font-family:var(--font);color:var(--ink);
  background:var(--bg-2);
  background-image:linear-gradient(180deg,#fff 0%,var(--bg-2) 58%,color-mix(in srgb,var(--accent) 12%,#F6F4F0) 100%);
  line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{border-bottom:1px solid rgba(255,255,255,.14);position:relative;z-index:3}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.brandmark{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;letter-spacing:-.01em;font-size:16px;text-decoration:none}
.brandmark img{max-height:34px;width:auto}
/* Client logos are usually dark art on transparency and disappear on the dark
   hero. A light chip makes any logo legible without needing a reversed file. */
.brandmark.has-logo{background:#fff;border-radius:10px;padding:7px 11px;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.brandmark.has-logo img{max-height:38px}
@media (max-width:640px){.brandmark.has-logo{padding:5px 9px}.brandmark.has-logo img{max-height:30px}}
.topbar-phone{color:rgba(255,255,255,.85);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.topbar-phone:hover{color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--brand) 84%,#000) 0%,
    var(--brand) 44%,
    color-mix(in srgb,var(--brand) 91%,#000) 100%)}
.hero::before{content:'';position:absolute;inset:0;
  background:
   radial-gradient(74% 58% at 88% -16%, color-mix(in srgb,var(--accent) 62%, transparent), transparent 64%),
   radial-gradient(46% 40% at 6% -6%, color-mix(in srgb,var(--accent) 24%, transparent), transparent 66%),
   radial-gradient(60% 56% at 8% 110%, rgba(255,255,255,.15), transparent 62%),
   linear-gradient(160deg, rgba(255,255,255,.07), transparent 45%);}
.hero::after{content:'';position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}
/* Compact by default. Ad traffic arrived already sold — the job of this band is
   message match with the ad creative, not a second pitch. */
.hero-in{position:relative;z-index:2;text-align:center;padding:32px 0 112px}
.badge{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.10));
  border:1px solid color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.20));
  padding:7px 15px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;opacity:.92;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.badge svg{width:15px;height:15px;flex:none}
h1{font-size:clamp(1.75rem,5.4vw,3.05rem);font-weight:800;letter-spacing:-.037em;
  line-height:1.06;max-width:17ch;margin:0 auto}
.hero-sub{font-size:clamp(.98rem,2vw,1.1rem);color:rgba(255,255,255,.82);max-width:52ch;margin:12px auto 0;font-weight:400}

/* ---------- card ---------- */
.stage{flex:1;position:relative;z-index:4;margin-top:-80px;padding-bottom:180px}
/* The card used to float on a flat field. A warm pool of light behind it gives
   the empty band below the fold a reason to exist, without adding an element
   to the page. Sits under the card because .card is position:relative. */
.stage::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 40% at 50% 13%,
    color-mix(in srgb,var(--accent) 14%,transparent), transparent 70%)}
/* NOT overflow:hidden — that clips the address suggestion list. Nothing
   inside the card paints to its edges, so the radius survives without it. */
.card{max-width:620px;margin:0 auto;background:#fff;border-radius:calc(var(--radius) + 12px);
  box-shadow:0 34px 72px -20px color-mix(in srgb,var(--brand) 42%,transparent),
             0 6px 18px -6px rgba(16,24,40,.10),
             0 0 0 1px rgba(255,255,255,.6) inset;
  position:relative}

/* honest trust row under the card — no invented numbers */
.trustrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;max-width:620px;margin:20px auto 0}
.trustrow div{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3);font-weight:500}
.trustrow svg{width:15px;height:15px;flex:none;stroke:#10B981}

/* sticky mobile CTA — the card is long, keep the action one tap away */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.stickycta.on{transform:none}
.stickycta .btn{padding:15px 22px;font-size:16px}
@media (min-width:861px){.stickycta{display:none}}

/* progress */
/* Inset, not flush to the card edge. A full-bleed bar overhangs the card's
   rounded corners; inset keeps it clean. The card's accent edge is suppressed
   on these steps so the two bars never stack. */
.prog{display:flex;gap:6px;padding:24px 38px 0}
.prog span{flex:1;height:4px;border-radius:99px;background:var(--line);transition:background .35s ease}
.prog span.on{background:var(--accent)}
.prog-label{padding:14px 38px 0;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}

.pane{display:none;padding:32px 38px 34px}
/* No fill-mode: the animation's end state is the element's natural state, so
   if it never runs — reduced motion, a backgrounded tab, low power — the
   content still lands in the right place instead of staying offset or
   invisible. */
.pane.on{display:block;animation:rise .32s cubic-bezier(.2,.7,.3,1)}
/* Fade only, deliberately. A translate here means the element's correct
   resting position depends on the animation reaching its final frame — and a
   stalled animation (backgrounded tab, low power) leaves the step sitting
   12px out of the card. Opacity cannot fail that way. */
@keyframes rise{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pane.on{animation:none}}

.q{font-size:clamp(1.35rem,3.6vw,1.72rem);font-weight:700;letter-spacing:-.025em;
  line-height:1.2;margin-bottom:8px;text-wrap:balance}
.q-sub{color:var(--ink-2);font-size:15.5px;margin-bottom:26px;max-width:44ch}

/* reassurance bullets under the first CTA */
.wpoints{list-style:none;margin:26px 0 2px;display:grid;gap:13px}
.wpoints li{display:flex;gap:12px;align-items:flex-start;font-size:15px;
  line-height:1.55;color:var(--ink-2)}
.wpoints svg{width:18px;height:18px;flex:none;stroke:var(--accent);stroke-width:2.6;margin-top:1px}

/* fields */
.field{position:relative;margin-bottom:8px}
label.lbl{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.input{width:100%;padding:19px 18px;font:inherit;font-size:16.5px;font-weight:500;color:var(--ink);background:var(--bg-2);
  border:1.5px solid var(--line);border-radius:calc(var(--radius) + 2px);
  transition:border-color .18s,box-shadow .18s,background .18s}
.input::placeholder{color:color-mix(in srgb,var(--ink-2) 88%,#fff)}
.input:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px var(--tint),0 2px 10px -4px color-mix(in srgb,var(--accent) 40%,transparent)}
.input.err{border-color:#DC2626;box-shadow:0 0 0 4px rgba(220,38,38,.09)}
.with-ic{padding-left:50px}
.f-ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:var(--ink-3);pointer-events:none}
/* confirmed address: green field + tick, so it is obvious the pick registered
   before they commit by pressing the button */
.field.confirmed .input{border-color:#10B981;background:#fff}
.field.confirmed .input:focus{box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.field.confirmed .f-ic{stroke:#10B981}
.acbox{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-2);
  overflow:hidden;display:none;text-align:left}
.acbox.on{display:block}
.acitem{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--line);transition:background .12s}
.acitem:last-of-type{border-bottom:0}
.acitem:hover,.acitem.sel{background:var(--tint)}
.acitem > svg{width:16px;height:16px;flex:none;stroke:var(--ink-3);margin-top:3px}
.acitem b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.acitem span span{display:block;font-size:13px;color:var(--ink-3);line-height:1.35}
.acfoot{padding:7px 14px;font-size:11px;color:var(--ink-3);text-align:right;
  border-top:1px solid var(--line);background:var(--bg-2)}
.err-msg{display:none;color:#DC2626;font-size:13px;font-weight:500;margin-top:7px}
.err-msg.on{display:block}
.hint{font-size:13px;color:var(--ink-3);margin-top:8px}

/* option cards */
.opts{display:grid;gap:11px}
.opt{display:flex;align-items:center;gap:15px;width:100%;text-align:left;padding:18px 18px;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;font:inherit;transition:all .16s ease}
.opt:hover{border-color:var(--accent);background:var(--tint)}
.opt:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--tint),0 2px 10px -4px color-mix(in srgb,var(--accent) 40%,transparent)}
.opt[aria-checked="true"]{border-color:var(--accent);background:var(--tint)}
.opt-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:border-color .16s}
.opt[aria-checked="true"] .opt-dot{border-color:var(--accent)}
.opt-dot i{width:10px;height:10px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .16s}
.opt[aria-checked="true"] .opt-dot i{transform:scale(1)}
.opt-txt strong{display:block;font-size:16px;font-weight:650;letter-spacing:-.015em}
.opt-txt span{display:block;font-size:13px;color:var(--ink-3);margin-top:1px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:19px 28px;
  background:var(--accent);color:#fff;border:none;border-radius:calc(var(--radius) + 2px);font:inherit;font-size:17px;font-weight:650;letter-spacing:-.005em;
  cursor:pointer;transition:filter .16s,transform .16s,box-shadow .16s;background-image:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent));box-shadow:0 12px 28px -8px color-mix(in srgb,var(--accent) 72%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.btn svg{width:19px;height:19px;transition:transform .18s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:none}
.btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.btn[disabled]{background:color-mix(in srgb,var(--accent) 24%,#fff);background-image:none;
  border:1.5px solid color-mix(in srgb,var(--accent) 42%,#fff);
  color:#8A5410;box-shadow:none;cursor:not-allowed;
  transform:none;filter:none}
.btn.busy{pointer-events:none;opacity:.75}
.actions{margin-top:12px}
/* only needs to clear a CTA when there is one above it */
.btn + .back{margin-top:14px}
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;font:inherit;font-size:14px;
  font-weight:500;color:var(--ink-3);cursor:pointer;padding:6px 2px}
.back:hover{color:var(--brand)}
.back svg{width:15px;height:15px}
.secure{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;font-size:12.5px;color:var(--ink-3)}
.secure svg{width:14px;height:14px;flex:none}

/* analysing pane */
.pane-run{padding:38px 34px 40px}
.runbar{height:5px;background:var(--line);border-radius:99px;overflow:hidden;margin:20px 0 18px}
.runbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .55s cubic-bezier(.4,0,.2,1)}
.runlog{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;height:150px;overflow:hidden;
  font-size:13.5px;color:var(--ink-2);display:flex;flex-direction:column;justify-content:flex-end;gap:9px}
.runlog div{display:flex;gap:9px;align-items:center;animation:rise .3s}
.runlog svg{width:15px;height:15px;flex:none;stroke:var(--accent)}
.spin{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- sections ---------- */
section{padding:76px 0}
.sec-head{text-align:center;max-width:620px;margin:0 auto 46px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.sec-head h2{font-size:clamp(1.6rem,3.6vw,2.25rem);font-weight:800;letter-spacing:-.025em;line-height:1.16;margin-bottom:12px}
.sec-head p{color:var(--ink-2);font-size:16.5px}

.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:22px}
.tile{background:#fff;border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);padding:26px;transition:box-shadow .2s,transform .2s}
.tile:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.tile-ic{width:44px;height:44px;border-radius:11px;background:var(--tint);display:grid;place-items:center;margin-bottom:16px}
.tile-ic svg{width:21px;height:21px;stroke:var(--accent)}
.tile h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px}
.tile p{color:var(--ink-2);font-size:14.5px}

.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* steps */
.steps{max-width:720px;margin:0 auto;display:grid;gap:14px}
.stepbox{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);padding:24px}
.stepnum{width:38px;height:38px;flex:none;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.stepbox h3{font-size:16.5px;font-weight:700;margin-bottom:5px;letter-spacing:-.01em}
.stepbox p{color:var(--ink-2);font-size:14.5px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:26px;text-align:center}
.stat b{display:block;font-size:2.1rem;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.stat span{font-size:14px;color:rgba(255,255,255,.78)}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.quote{background:#fff;border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);padding:26px}
.quote p{font-size:15px;color:var(--ink);margin-bottom:16px}
.quote b{display:block;font-size:14.5px;font-weight:600}
.quote span{font-size:13px;color:var(--ink-3)}

/* agent */
.agent{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:center;max-width:820px;margin:0 auto}
.agent img{width:200px;height:200px;border-radius:calc(var(--radius) + 4px);object-fit:cover;box-shadow:var(--shadow-2)}
.agent-ph{width:200px;height:200px;border-radius:calc(var(--radius) + 4px);background:var(--tint-brand);display:grid;place-items:center;font-size:2.6rem;font-weight:800;color:var(--brand)}
.agent h2{font-size:1.85rem;font-weight:800;letter-spacing:-.025em;margin-bottom:4px}
.agent .role{color:var(--ink-2);font-size:16px;margin-bottom:16px}
.agent .role a{color:var(--brand);font-weight:600;text-decoration:none}
.agent .role a:hover{text-decoration:underline}
.agent blockquote{border-left:3px solid var(--accent);padding-left:18px;color:var(--ink-2);font-size:15.5px}

/* faq */
.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
summary{padding:19px 22px;font-weight:600;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:'';width:9px;height:9px;flex:none;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
details p{padding:0 22px 20px;color:var(--ink-2);font-size:14.5px}

/* closing cta */
.close-cta{background:var(--brand);color:#fff;text-align:center;position:relative;overflow:hidden}
.close-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(700px 300px at 50% 0%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 65%)}
.close-cta .wrap{position:relative;z-index:2}
.close-cta h2{font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:800;letter-spacing:-.025em;margin-bottom:12px}
.close-cta p{color:rgba(255,255,255,.8);font-size:17px;margin-bottom:28px}
.close-cta .btn{max-width:340px;margin:0 auto}

/* ---------- team ----------
   The funnel is branded to the team, not one agent. Real faces with real
   titles do the credibility work a single stock-feeling headshot cannot. */
.teamblock,.teamcard{max-width:820px;margin:0 auto}
.team-head{text-align:center;margin-bottom:26px}
.team-head h3{font-size:1.35rem;font-weight:800;letter-spacing:-.022em;margin-bottom:4px}
.team-head .role{color:var(--ink-3);font-size:14.5px;margin-bottom:12px}
.team-head .role a{color:var(--brand);font-weight:600;text-decoration:none}
.team-head .role a:hover{text-decoration:underline}
.team-head p{color:var(--ink-2);font-size:15px;max-width:60ch;margin:0 auto}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;justify-items:center}
.member{text-align:center;max-width:200px}
.member img{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center top;
  margin:0 auto 12px;border:3px solid #fff;
  box-shadow:0 4px 14px rgba(16,24,40,.14),0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.member .mono{width:104px;height:104px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;
  background:var(--tint);color:var(--accent-deep,var(--accent));font-weight:800;font-size:1.6rem;
  border:3px solid #fff;box-shadow:0 4px 14px rgba(16,24,40,.14)}
.member b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.member span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
@media (max-width:560px){
  .team-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}
  .member img,.member .mono{width:84px;height:84px}
  .member .mono{font-size:1.3rem}
}


/* footer */
footer{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 72%,#05080D),#05080D);
  border-top:3px solid color-mix(in srgb,var(--accent) 62%,transparent);
  color:rgba(255,255,255,.5);padding:26px 0 22px;font-size:12px;text-align:center}
footer .fbrand{color:#fff;font-weight:600;font-size:13.5px;margin-bottom:8px}
footer .disc{max-width:1000px;margin:0 auto 9px;font-size:10.8px;line-height:1.6;color:rgba(255,255,255,.4)}
footer a{color:rgba(255,255,255,.75)}

@media (max-width:640px){
  .topbar .wrap{height:64px}
  .hero-in{padding:24px 0 94px}
  .badge{margin-bottom:16px;font-size:12.5px;padding:5px 12px}
  .hero-sub{margin-top:10px}
  .stage{margin-top:-70px;padding-bottom:132px}
  /* 800 characters of required disclosure is ~13 lines on a 335px column.
     Tighter boilerplate type is the only lever that does not touch wording. */
  footer{padding:24px 0 20px}
  footer .disc{font-size:10px;line-height:1.55;margin-bottom:8px}
  .pane{padding:24px 22px 26px}
  .pane-run{padding:26px 18px 28px}
  .prog,.prog-label{padding-left:22px;padding-right:22px}
  .trustrow{gap:8px 18px;font-size:12.5px}
  section{padding:56px 0}
  .agent{grid-template-columns:1fr;text-align:center;justify-items:center;gap:24px}
  .agent blockquote{text-align:left}
  .topbar-phone{display:none}
}