/* ExportCarSG — ported verbatim from the Next.js reference app/globals.css.
   The only additions vs. the reference are:
   (1) the two --font-* vars in :root (next/font set these at build time; here
       the enqueued Google Fonts supply the same families so every rule that
       reads var(--font-jakarta)/var(--font-inter) renders identically), and
   (2) the small form-control base block below — the reference's first line was
       `@import "tailwindcss";`, whose Preflight base layer makes form controls
       inherit font + line-height. Reproducing just that part keeps the inputs
       and buttons the exact same height as the reference. No color, spacing, or
       rule from globals.css itself was changed. */

/* Tailwind Preflight base — form controls (only the part this page relies on). */
button, input, optgroup, select, textarea{
  font-family:inherit; font-feature-settings:inherit; font-variation-settings:inherit;
  font-size:100%; font-weight:inherit; line-height:inherit; letter-spacing:inherit;
  color:inherit; margin:0; padding:0;
}
button, select{text-transform:none;}
button, [type="button"], [type="reset"], [type="submit"]{
  -webkit-appearance:button; appearance:button; background-color:transparent; background-image:none;
}
:-moz-focusring{outline:auto;}
::placeholder{opacity:1;}

:root{
  /* font families that next/font injected via CSS variables in the reference */
  --font-jakarta:'Plus Jakarta Sans';
  --font-inter:'Inter';
  /* ExportCarSG — Midnight #12233C primary, Coral #EF5F45 single accent */
  --indigo:#12233C; --indigo-700:#0E1A2F; --indigo-50:#EAF0F7;
  --mint:#EF5F45; --mint-50:#FDECE8;
  --teal:#12233C;
  --green:#EF5F45; --green-700:#D94A31;
  --amber:#EF5F45;
  --bg:#F8F6F2; --surface:#FFFFFF;
  --text:#0A1420; --muted:#5C6B7D; --border:#E2E6EC;
  --shadow-sm:0 1px 2px rgba(18,40,58,.05), 0 1px 3px rgba(18,40,58,.04);
  --shadow-md:0 4px 12px rgba(18,40,58,.06), 0 2px 4px rgba(18,40,58,.04);
  --shadow-lg:0 18px 48px rgba(18,35,60,.12), 0 6px 16px rgba(18,40,58,.06);
  --container:1160px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-inter),'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
main{flex:1 0 auto; display:block;}
h1,h2,h3,h4{font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; color:var(--indigo); margin:0; line-height:1.18;}
p{margin:0;}
a{color:inherit;}
img,svg{display:block;}
.container{max-width:var(--container); margin:0 auto; padding:0 24px; width:100%;}

/* ---------- Brand ---------- */
.brand{display:inline-flex; align-items:center; gap:2px; text-decoration:none;}
.brand-logo{height:38px; width:auto; display:block;}

/* ---------- Header ---------- */
header.site{position:sticky; top:0; z-index:60; background:#FFFFFF; border-bottom:1px solid var(--border);}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:16px;}
.nav-links{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0;}
.nav-links a{text-decoration:none; color:var(--text); font-weight:500; font-size:15px; padding:8px 2px; transition:color .18s ease; white-space:nowrap;}
.nav-links a:hover{color:var(--indigo);}
.nav-right{display:flex; align-items:center; gap:14px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; text-decoration:none; border-radius:10px; padding:12px 20px; min-height:44px; cursor:pointer; border:1px solid transparent; transition:background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;}
.btn-green{background:var(--green); color:#fff;}
.btn-green:hover{background:var(--green-700); box-shadow:0 6px 18px rgba(239,95,69,.30);}
.btn-wa{background:#fff; color:var(--indigo); border-color:var(--border); box-shadow:var(--shadow-sm);}
.btn-wa:hover{border-color:var(--mint); box-shadow:0 4px 14px rgba(239,95,69,.18);}
.btn-wa svg{color:#25D366;}
.btn-ghost{background:transparent; color:var(--indigo); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--amber); color:var(--indigo);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6; cursor:not-allowed; box-shadow:none;}
.hamburger{display:none; width:46px; height:46px; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border); border-radius:10px; cursor:pointer; color:var(--indigo);}
.mobile-nav{display:none; border-top:1px solid var(--border); background:var(--surface);}
.mobile-nav.open{display:block;}
.mobile-nav ul{list-style:none; margin:0; padding:10px 0;}
.mobile-nav a{display:block; padding:14px 24px; text-decoration:none; color:var(--text); font-weight:500; border-bottom:1px solid var(--border);}
.mobile-nav a:last-child{border-bottom:none;}

/* ---------- Hero ---------- */
.hero{padding:40px 0 32px;}
/* Two balanced columns on row 1, the unifying deal-journey rail spanning full
   width on row 2. align-items:stretch makes the columns equal height so tops
   AND bottoms align; the left content is justified inside its stretched column
   and the taller form card sets the shared height. */
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  grid-template-areas:"left right" "rail rail"; column-gap:52px; row-gap:22px; align-items:stretch;}
.hero-left{grid-area:left; display:flex; flex-direction:column; justify-content:space-between; padding:2px 0;}
.hero-right{grid-area:right;}
.hero-left .hero-cta-row{margin-bottom:0;}
.hero-left .eyebrow{align-self:flex-start;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); background:var(--mint-50); border:1px solid #F7CFC6; padding:7px 14px; border-radius:999px; margin-bottom:22px;}
.hero h1{font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:-.015em; margin-bottom:20px;}
.hero h1 .accent{color:var(--green);}
.hero-sub{font-size:18px; color:var(--muted); max-width:30em; margin-bottom:30px;}
.hero-cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:18px;}
.hero-cta-row .btn{padding:15px 26px; font-size:16px;}
.trust-line{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--muted);}
.trust-line svg{color:var(--teal); flex:none;}
.hero-photo{width:100%; border-radius:16px; box-shadow:0 14px 34px rgba(18,40,58,.14); margin-top:24px; aspect-ratio:16/9; object-fit:cover; height:auto;}
.mint-rule{height:1px; background:linear-gradient(90deg,var(--mint),transparent); border:0; margin:34px 0 0;}

/* ===== Hero deal-journey rail (full-width strip beneath BOTH hero columns) ===== */
.base-rail{
  grid-area:rail; position:relative; width:100%;
  background:linear-gradient(180deg,#FFFFFF,#FBF9F5);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:0 12px 30px rgba(18,40,58,.09);
  overflow:hidden; padding:12px 34px 44px;
}
.base-rail-head{display:flex; align-items:center; gap:10px; margin-bottom:4px;}
.rail-eyebrow{font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); flex:none;}
.rail-stage{position:relative; height:96px;}
.rail-inner{position:absolute; left:0; right:0; top:30px;}
.rail{position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.node{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; position:relative; z-index:3;}
.ring{width:40px; height:40px; border-radius:50%; flex:none; background:#fff; border:1.5px solid var(--border); color:#B7C2CF; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(18,40,58,.05); transition:border-color .35s ease, color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease;}
.ring svg{width:21px; height:21px;}
.node.on .ring{border-color:var(--mint); color:#fff; background:var(--mint); box-shadow:0 6px 15px rgba(239,95,69,.28); transform:translateY(-1px);}
.node-label{font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:12.5px; line-height:1.25; color:var(--muted); white-space:nowrap; transition:color .35s ease;}
.node.on .node-label{color:var(--indigo);}
.l-short{display:none;}
/* progress track sits behind rings, aligned to ring centres (12.5% .. 87.5%) */
.track{position:absolute; left:12.5%; right:12.5%; top:20px; height:3px; transform:translateY(-50%); background:#EAE6DE; border-radius:3px; z-index:1;}
.fill{position:absolute; left:0; top:0; height:100%; width:calc(100% * var(--p,0)); background:linear-gradient(90deg,#F5836E,var(--mint)); border-radius:3px;}
.traveller{position:absolute; top:50%; left:calc(100% * var(--p,0)); width:14px; height:14px; border-radius:50%; background:var(--mint); border:2px solid #fff; transform:translate(-50%,-50%); opacity:var(--travo,0); box-shadow:0 3px 9px rgba(239,95,69,.45); z-index:2;}
/* cash payout token that pops in above node 4 (right end of the strip) */
.cash{position:absolute; top:20px; left:87.5%; z-index:4; transform:translate(-50%,calc(-50% - 30px)) scale(var(--cashs,0)); opacity:var(--casho,0); will-change:transform,opacity;}
.cash svg{width:48px; height:auto; filter:drop-shadow(0 6px 12px rgba(239,95,69,.30));}
/* car drives along the bottom baseline of the strip and exits right, chevrons trailing */
.drive{position:absolute; left:0; right:0; bottom:9px; height:30px; z-index:2; pointer-events:none;}
.car{position:absolute; left:52%; bottom:0; transform:translateX(var(--carx,0)); opacity:var(--caro,0); will-change:transform,opacity;}
.car svg{width:58px; height:auto;}
.chev{position:absolute; bottom:11px; color:var(--mint);}
.chev svg{width:11px; height:11px;}

/* Hero / enquiry form card */
.form-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden;}
.form-card-head{padding:24px 28px 20px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:14px;}
.form-card-head h2{font-size:21px; font-weight:700; margin-bottom:5px;}
.form-card-head p{font-size:12.5px; color:var(--muted); white-space:nowrap;}
.best-badge{flex:none; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:#A83A20; background:var(--mint-50); border:1px solid #F7CFC6; padding:6px 11px; border-radius:999px;}
.best-badge svg{color:var(--amber);}
.form-body{padding:22px 28px 28px;}

.field{margin-bottom:16px;}
.field label{display:block; font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:13.5px; color:var(--text); margin-bottom:7px;}
.field label .req{color:var(--green); margin-left:2px;}
.field label .opt{color:var(--muted); font-weight:400;}
.field input[type=text], .field input[type=tel], .field input[type=email], .field input[type=date], .field input[type=number]{
  width:100%; font-family:var(--font-inter),'Inter',sans-serif; font-size:15px; color:var(--text); background:#fff;
  border:1px solid var(--border); border-radius:10px; padding:12px 14px; min-height:46px; transition:border-color .16s ease, box-shadow .16s ease;
}
.field input::placeholder{color:#9AA8B2;}
.field input:focus{outline:none; border-color:var(--mint); box-shadow:0 0 0 3px rgba(239,95,69,.18);}
.field input[aria-invalid="true"]{border-color:#E0736A; box-shadow:0 0 0 3px rgba(224,115,106,.16);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.helper{font-size:12.5px; color:var(--muted); margin-top:6px;}

/* segmented choice */
.segmented{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.seg{position:relative;}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer; margin:0;}
.seg label{display:block; cursor:pointer; border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:#fff; transition:border-color .16s ease, background .16s ease, box-shadow .16s ease; margin:0;}
.seg label .seg-t{display:block; font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; color:var(--text);}
.seg label .seg-d{display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin-top:2px;}
.seg input:checked + label{border-color:var(--teal); background:var(--mint-50); box-shadow:0 0 0 1px var(--teal) inset;}
.seg input:focus-visible + label{box-shadow:0 0 0 3px rgba(239,95,69,.25);}

.check-row{display:flex; align-items:flex-start; gap:10px; padding:12px 14px; background:var(--indigo-50); border:1px solid #C9D6E6; border-radius:10px; margin-bottom:18px;}
.check-row input{margin-top:3px; width:18px; height:18px; accent-color:var(--indigo); cursor:pointer; flex:none;}
.check-row label{font-size:13.5px; color:var(--text); cursor:pointer; font-family:var(--font-inter),'Inter',sans-serif; font-weight:500; margin:0;}

.file-drop{border:1.5px dashed var(--border); border-radius:12px; padding:18px; text-align:center; background:#FBFDFD; transition:border-color .16s ease, background .16s ease;}
.file-drop:hover{border-color:var(--teal); background:var(--mint-50);}
.file-drop label{display:inline-flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px; color:var(--indigo);}
.file-drop svg{color:var(--teal);}
.file-drop .file-sub{font-family:var(--font-inter),'Inter',sans-serif; font-weight:400; font-size:12.5px; color:var(--muted);}
.file-drop input[type=file]{margin-top:10px; font-size:13px; width:100%; cursor:pointer;}
.file-names{margin-top:10px; font-size:12.5px; color:var(--teal); font-weight:600;}
.form-submit{width:100%; margin-top:6px; padding:15px; font-size:16.5px;}
.form-foot{text-align:center; font-size:12.5px; color:var(--muted); margin-top:12px; display:flex; align-items:center; justify-content:center; gap:7px;}
.form-foot svg{color:var(--teal); flex:none;}

/* form status */
.form-error{display:flex; align-items:flex-start; gap:9px; background:#FEECEC; border:1px solid #F5B5B5; color:#B42318; font-size:13.5px; line-height:1.45; padding:12px 14px; border-radius:10px; margin-bottom:16px;}
.form-error svg{flex:none; margin-top:1px; color:#D0342C;}
.spinner{width:18px; height:18px; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.quote-alt{text-align:center; font-size:13px; color:var(--muted); margin-top:14px;}
.quote-alt a{color:var(--indigo); font-weight:600; text-decoration:none;}
.quote-alt a:hover{text-decoration:underline;}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.trustbar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.trust-item{padding:30px 26px; display:flex; gap:16px; align-items:center; border-right:1px solid var(--border);}
.trust-item:last-child{border-right:none;}
.trust-icon{flex:none; width:48px; height:48px; border-radius:12px; background:var(--indigo-50); display:flex; align-items:center; justify-content:center; color:var(--indigo);}
.trust-num{font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:30px; color:var(--indigo); line-height:1; letter-spacing:-.02em;}
.trust-label{font-size:13.5px; color:var(--muted); margin-top:5px;}
.trust-num.small{font-size:18px; line-height:1.2;}

/* ---------- Section shell ---------- */
section.block{padding:74px 0;}
.sec-head{max-width:860px; margin:0 auto 48px; text-align:center;}
.sec-eyebrow{font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:12px;}
.sec-head h2{font-size:clamp(27px,3vw,36px); font-weight:800; letter-spacing:-.01em; margin-bottom:14px;}
.sec-head p{font-size:17px; color:var(--muted);}

/* offer cards */
.offer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.offer-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .2s ease, border-color .2s ease;}
.offer-card:hover{box-shadow:var(--shadow-md); border-color:#D3DBE6;}
.card-photo{width:100%; height:150px; object-fit:cover; border-radius:14px 14px 0 0; display:block;}
.card-media-band{width:100%; height:150px; border-radius:14px 14px 0 0; background:var(--indigo); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:0 18px; text-align:center;}
.card-media-band .band-label{font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:18px; color:#fff; letter-spacing:-.01em;}
.card-body{padding:26px 28px 30px;}
.offer-card .oc-icon{width:50px; height:50px; border-radius:13px; background:var(--mint-50); border:1px solid #F7CFC6; display:flex; align-items:center; justify-content:center; color:var(--teal); margin-bottom:20px;}
.offer-card h3{font-size:20px; font-weight:700; margin-bottom:10px;}
.offer-card p{font-size:15px; color:var(--muted); margin-bottom:16px;}
.oc-list{list-style:none; margin:0; padding:0;}
.oc-list li{position:relative; padding-left:26px; font-size:14.5px; color:var(--text); margin-bottom:10px;}
.oc-list li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--mint);}
.oc-list li:last-child{margin-bottom:0;}
.choice-card{border-color:#C9D6E6;}
.choice-card .card-body{background:linear-gradient(180deg,#F6F9FC,#fff);}
.choice-card .oc-icon{background:var(--indigo-50); border-color:#C9D6E6; color:var(--indigo);}
.band-badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:#A83A20; background:var(--mint-50); border:1px solid #F7CFC6; padding:6px 11px; border-radius:999px;}
.band-badge svg{color:var(--amber);}
.pp-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px;}
.pp{border:1px solid var(--border); border-radius:11px; padding:13px 14px; background:#fff;}
.pp .pp-t{font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; color:var(--text);}
.pp .pp-d{font-size:12.5px; color:var(--muted); margin-top:3px;}
.pp.best{border-color:#F7CFC6; background:#FEF6F3;}
.pp .pp-tag{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#A83A20; margin-bottom:5px; font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif;}
.pp .pp-tag svg{color:var(--amber);}

/* ---------- Steps ---------- */
.steps-block{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.steps-row{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative;}
.step{padding:8px 6px;}
.step-num{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:var(--indigo); color:#fff; font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:20px; margin-bottom:18px;}
.step h3{font-size:19px; font-weight:700; margin-bottom:8px;}
.step p{font-size:15px; color:var(--muted);}
.steps-cta{text-align:center; margin-top:44px;}

/* ---------- CTA strip ---------- */
.cta-strip{padding:64px 0;}
.cta-inner{background:linear-gradient(135deg,var(--indigo),var(--indigo-700)); border-radius:20px; padding:48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; box-shadow:var(--shadow-lg);}
.cta-inner h2{color:#fff; font-size:clamp(24px,2.6vw,30px); font-weight:800; margin-bottom:8px;}
.cta-inner p{color:#B4C0CF; font-size:16px; max-width:34em;}
.cta-inner .btn-row{display:flex; gap:12px; flex-wrap:wrap;}
.cta-inner .btn-wa{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22);}
.cta-inner .btn-wa:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4);}

/* ---------- Quote page ---------- */
.page-hero{padding:56px 0 8px; text-align:center;}
.page-hero .eyebrow{margin-bottom:18px;}
.page-hero h1{font-size:clamp(30px,3.6vw,42px); font-weight:800; letter-spacing:-.015em; margin-bottom:14px;}
.page-hero p{font-size:17px; color:var(--muted); max-width:36em; margin:0 auto;}
.quote-section{padding:30px 0 74px;}
.quote-wrap{max-width:640px; margin:0 auto; width:100%;}

/* ---------- Thank you ---------- */
.ty-section{padding:80px 0 88px;}
.ty-card{max-width:560px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); padding:52px 40px; text-align:center;}
.ty-icon{width:76px; height:76px; border-radius:50%; background:var(--mint-50); border:1px solid #F7CFC6; color:var(--teal); display:flex; align-items:center; justify-content:center; margin:0 auto 24px;}
.ty-card h1{font-size:clamp(28px,3vw,36px); font-weight:800; margin-bottom:14px;}
.ty-card p{font-size:17px; color:var(--muted); margin-bottom:10px;}
.ty-actions{margin-top:30px; display:flex; flex-direction:column; gap:14px; align-items:center;}
.ty-wa{background:#25D366; color:#fff; border-color:#25D366; font-size:17px; padding:16px 28px; width:100%; max-width:360px;}
.ty-wa:hover{background:#1EBE5A; box-shadow:0 8px 22px rgba(37,211,102,.32);}
.ty-wa svg{color:#fff;}
.ty-back{color:var(--indigo); text-decoration:none; font-weight:600; font-size:14.5px;}
.ty-back:hover{text-decoration:underline;}

/* ---------- Footer ---------- */
footer.site{background:var(--indigo); color:#B4C0CF; padding:56px 0 30px;}
.footer-logo{height:59px; width:auto; display:block;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12);}
.foot-tag{font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--mint); margin-top:14px;}
.foot-blurb{font-size:14.5px; color:#9EAABB; margin-top:14px; max-width:30em;}
footer.site h4{color:#fff; font-weight:700; margin-bottom:16px; text-transform:uppercase; font-family:var(--font-jakarta),'Plus Jakarta Sans',sans-serif; font-size:12.5px; letter-spacing:.08em;}
.foot-links{list-style:none; margin:0; padding:0;}
.foot-links li{margin-bottom:11px;}
.foot-links a{text-decoration:none; color:#B4C0CF; font-size:14.5px; transition:color .16s ease;}
.foot-links a:hover{color:#fff;}
.foot-contact a{display:inline-flex; align-items:center; gap:9px; color:#B4C0CF; text-decoration:none; font-size:14.5px; margin-bottom:12px; transition:color .16s ease;}
.foot-contact a:hover{color:#fff;}
.foot-contact svg{flex:none; color:var(--mint);}
.foot-bottom{padding-top:24px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:13px; color:#8291A3;}
.foot-bottom strong{color:#DEE5EE; font-weight:600;}

/* ---------- Floating WhatsApp ---------- */
.fab{position:fixed; right:22px; bottom:22px; z-index:80; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 24px rgba(37,211,102,.4), 0 2px 6px rgba(0,0,0,.18); transition:transform .18s ease, box-shadow .18s ease;}
.fab:hover{box-shadow:0 12px 30px rgba(37,211,102,.5);}
.fab svg{width:30px; height:30px;}

:focus-visible{outline:3px solid var(--mint); outline-offset:2px; border-radius:6px;}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  /* Stack: left content, then form card, then the rail spans full width below both */
  .hero-grid{grid-template-columns:minmax(0,1fr); grid-template-areas:"left" "right" "rail"; column-gap:0; row-gap:30px; align-items:start;}
  .hero-left{justify-content:flex-start;}
  .node-label{white-space:normal;}
  .nav-links{display:none;}
  .nav-right .btn-wa{display:none;}
  .hamburger{display:flex;}
  .trustbar-grid{grid-template-columns:1fr 1fr;}
  .trust-item:nth-child(2){border-right:none;}
  .trust-item:nth-child(1),.trust-item:nth-child(2){border-bottom:1px solid var(--border);}
  .offer-grid{grid-template-columns:1fr;}
  .steps-row{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .container{padding:0 18px;}
  .hero{padding:40px 0 36px;}
  section.block{padding:54px 0;}
  .field-row{grid-template-columns:1fr;}
  .segmented{grid-template-columns:1fr;}
  .pp-row{grid-template-columns:1fr;}
  .cta-inner{padding:34px 26px; flex-direction:column; align-items:flex-start;}
  .foot-grid{grid-template-columns:1fr; gap:32px;}
  .form-card-head{flex-direction:column;}
  .trust-num{font-size:26px;}
  .ty-card{padding:40px 24px;}
}
@media (max-width:400px){
  .trustbar-grid{grid-template-columns:1fr;}
  .trust-item{border-right:none; border-bottom:1px solid var(--border);}
  .trust-item:last-child{border-bottom:none;}
}
@media (max-width:480px){
  /* Deal-journey rail: tighten and swap node 4 to the short label */
  .base-rail{padding:12px 14px 42px;}
  .rail-stage{height:104px;}
  .rail-inner{top:26px;}
  .node{gap:9px;}
  .ring{width:36px; height:36px;}
  .ring svg{width:19px; height:19px;}
  .track{top:18px;}
  .node-label{font-size:10.5px; line-height:1.2; white-space:normal; max-width:11ch;}
  .l-full{display:none;}
  .l-short{display:inline;}
  .cash svg{width:42px;}
  .car svg{width:50px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important; animation:none !important;}
}

/* Offer-card photo crops: the export source photo has the car in the lower
   40% of frame, so the default 50% crop showed containers and cut the car off. */
#export .card-photo{object-position:50% 76%;}
#coe .card-photo{object-position:50% 42%;}