/* ============================================================================
   orderatrailer.ca — Allen & Alloy Trailers lead page
   Built from Interface-Design-Starter-Kit.css, archetype A (editorial instrument).

   DESIGN LANGUAGE: "Spec plate." The page reads like the stamped aluminium plate
   riveted to a trailer tongue: brushed-metal paper, charcoal ink from the
   Allen & Alloy badge, and one loud colour, the red of the maple leaf on that
   badge, kept for the single action on screen (get a price). Wide, heavy Archivo
   for display because the badge lettering is wide and heavy; JetBrains Mono for
   every number a buyer compares (lengths, axle ratings, prices). Hairlines, a
   3px radius, no shadows, no gradients. Phone first: the visitor saw a trailer
   on the road and typed the address with a thumb.
   ============================================================================ */

:root{
  --paper:#ECEBE7;
  --paper-2:#E2E1DC;
  --paper-3:#D5D4CE;
  --ink:#232321;
  --ink-2:#3E3E3A;
  --ink-3:#686862;
  --ink-4:#93938C;
  --rule:rgba(35,35,33,.16);
  --rule-soft:rgba(35,35,33,.08);
  --rule-hard:rgba(35,35,33,.42);
  --sig:#C8102E;
  --sig-ink:#A50D26;
  --sig-wash:rgba(200,16,46,.08);
  --on-sig:#FFFFFF;
  --good:#1F5D3F;
  --good-wash:rgba(31,93,63,.10);
  --scrim:rgba(20,20,18,.62);
  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:3px;
  --gut:clamp(16px,4vw,40px);
  --maxw:1200px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141413; --paper-2:#1C1C1A; --paper-3:#262624;
    --ink:#EEEDE8; --ink-2:#CBCAC3; --ink-3:#9A9992; --ink-4:#6E6D67;
    --rule:rgba(238,237,232,.17); --rule-soft:rgba(238,237,232,.08); --rule-hard:rgba(238,237,232,.44);
    --sig:#E5304B; --sig-ink:#FF6B80; --sig-wash:rgba(229,48,75,.14);
    --good:#5FBF8E; --good-wash:rgba(95,191,142,.14);
    --scrim:rgba(0,0,0,.72);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#141413; --paper-2:#1C1C1A; --paper-3:#262624;
  --ink:#EEEDE8; --ink-2:#CBCAC3; --ink-3:#9A9992; --ink-4:#6E6D67;
  --rule:rgba(238,237,232,.17); --rule-soft:rgba(238,237,232,.08); --rule-hard:rgba(238,237,232,.44);
  --sig:#E5304B; --sig-ink:#FF6B80; --sig-wash:rgba(229,48,75,.14);
  --good:#5FBF8E; --good-wash:rgba(95,191,142,.14);
  --scrim:rgba(0,0,0,.72);
  color-scheme:dark;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
h1,h2,h3{font-family:var(--display);font-stretch:112%;font-weight:800;line-height:1.02;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(34px,7.2vw,64px)}
h2{font-size:clamp(26px,4.6vw,42px)}
h3{font-size:19px;font-stretch:100%;font-weight:700;line-height:1.2}
.lede{font-size:clamp(17px,2.2vw,20px);color:var(--ink-2);max-width:34em;margin:16px 0 0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{border-top:1px solid var(--rule)}
.band{padding:clamp(40px,7vw,88px) 0}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand img{width:38px;height:38px;flex:none}
.brand span{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--mono);font-size:14px;border:1px solid var(--rule-hard);border-radius:var(--r);padding:9px 12px;white-space:nowrap}
.call:hover{border-color:var(--ink)}
.call svg{width:15px;height:15px;flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--r);border:1px solid var(--sig);background:var(--sig);color:var(--on-sig);font-weight:700;font-size:17px;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--sig-ink);border-color:var(--sig-ink)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-hard)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.block{width:100%}
.link{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--ink-2);font-size:15px}

/* ---------- hero ---------- */
.hero{border-top:0;padding:clamp(24px,5vw,64px) 0 clamp(32px,6vw,72px)}
.hero .grid{display:grid;gap:22px;grid-template-columns:1fr}
.hero-photo{margin:18px 0 0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.hero-photo img{width:100%}
.brand .wide{font-weight:inherit}
@media (max-width:420px){.brand .wide{display:none}}
.hero-copy{order:1}.quote{order:2}.hero-media{order:3}
.hero-photo figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-3);padding:8px 12px;border-top:1px solid var(--rule)}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.facts li::before{content:"";display:inline-block;width:7px;height:7px;background:var(--sig);margin-right:8px;vertical-align:1px}
@media (min-width:960px){
  .hero .grid{grid-template-columns:1.05fr .95fr;column-gap:56px;row-gap:0;align-items:start}
  .hero-copy{grid-column:1;grid-row:1}
  .hero-media{grid-column:1;grid-row:2}
  .quote{grid-column:2;grid-row:1 / span 2}
}

/* ---------- quote card (the quiz) ---------- */
.card{background:var(--paper);border:1px solid var(--rule-hard);border-radius:var(--r)}
.quote{scroll-margin-top:72px}
.quote-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule)}
.quote-head b{font-size:15px}
.steps{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.meter{height:3px;background:var(--rule-soft)}
.meter i{display:block;height:100%;width:25%;background:var(--sig);transition:width .25s ease}
.step{padding:18px}
.step[hidden]{display:none}
.step h3{margin:0 0 14px}
.opts{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:520px){.opts.two{grid-template-columns:1fr 1fr}}
.opt{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;width:100%;min-height:56px;padding:12px 14px;border:1px solid var(--rule-hard);border-radius:var(--r);background:var(--paper);cursor:pointer}
.opt b{font-size:16px}
.opt small{font-size:13px;color:var(--ink-3);line-height:1.3}
.opt:hover{border-color:var(--ink)}
.opt[aria-pressed="true"]{border-color:var(--sig);background:var(--sig-wash)}
.opt[aria-pressed="true"] b{color:var(--sig-ink)}
.check{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r);cursor:pointer;font-size:15px}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--sig);flex:none}
.back{margin-top:14px}
.field{display:block;margin:0 0 12px}
.field span{display:block;font-size:14px;font-weight:600;margin:0 0 6px}
.field input,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--rule-hard);border-radius:var(--r);background:var(--paper);font-size:17px}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--sig);outline-offset:0;border-color:transparent}
.field em{font-style:normal;font-weight:400;color:var(--ink-3)}
.field .phone{display:flex;margin:0}
.field .phone input{flex:1;min-width:0}
.phone b{display:flex;align-items:center;padding:0 12px;border:1px solid var(--rule-hard);border-right:0;border-radius:var(--r) 0 0 var(--r);font-family:var(--mono);font-weight:400;font-size:15px;color:var(--ink-2);background:var(--paper-2)}
.phone input{border-radius:0 var(--r) var(--r) 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:13px;color:var(--ink-3);margin:10px 0 0}
.err{color:var(--sig-ink);font-size:14px;margin:10px 0 0;min-height:1em}
.summary{font-family:var(--mono);font-size:13px;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r);padding:10px 12px;margin:0 0 14px}
.done{padding:22px 18px}
.done h3{font-size:24px;font-family:var(--display);font-stretch:112%;font-weight:800}
.done p{margin:10px 0 0;color:var(--ink-2)}
.tick{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--good-wash);color:var(--good);margin-bottom:12px}
.tick svg{width:18px;height:18px}

/* ---------- price table ---------- */
.sec-head{display:grid;gap:12px;margin-bottom:28px}
@media (min-width:860px){.sec-head{grid-template-columns:1fr 1fr;align-items:end}}
.sec-head p{margin:0;color:var(--ink-2)}
.prices{width:100%;border-collapse:collapse}
.prices th,.prices td{text-align:left;padding:14px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.prices th{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.prices td:last-child,.prices th:last-child{text-align:right}
.prices td small{display:block;color:var(--ink-3);font-size:14px}
.prices .mono{font-size:17px;white-space:nowrap}
.fine{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:14px 0 0}
.row-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---------- aluminium ---------- */
.alu{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--rule-hard)}
.alu div{padding:20px 0;border-bottom:1px solid var(--rule)}
.alu .num{font-family:var(--mono);font-size:30px;color:var(--sig-ink);line-height:1}
.alu p{margin:8px 0 0;color:var(--ink-2)}
@media (min-width:760px){
  .alu{grid-template-columns:repeat(4,1fr)}
  .alu div{padding:22px 20px 22px 0;border-bottom:0;border-right:1px solid var(--rule)}
  .alu div+div{padding-left:20px}
  .alu div:last-child{border-right:0}
}

/* ---------- photos ---------- */
.strip{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.strip figure{margin:0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.strip figure:first-child{grid-column:1/-1}
.strip figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-3);padding:8px 10px;border-top:1px solid var(--rule)}
@media (min-width:860px){
  .strip{grid-template-columns:repeat(4,1fr)}
  .strip figure:first-child{grid-column:span 2;grid-row:span 2}
}

/* ---------- financing + final ---------- */
.split{display:grid;gap:24px}
@media (min-width:860px){.split{grid-template-columns:1.2fr .8fr;align-items:center}}
.split p{color:var(--ink-2);margin:12px 0 0}
.final{text-align:left}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule-hard);padding:28px 0 110px;font-size:14px;color:var(--ink-3)}
footer .wrap{display:grid;gap:10px}
footer a{color:var(--ink-2)}
@media (min-width:760px){footer{padding-bottom:36px}}

/* ---------- sticky bar (phones) ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--rule-hard);transform:translateY(110%);transition:transform .2s ease}
.dock.show{transform:none}
.dock .btn{min-height:48px}
@media (min-width:760px){.dock{display:none}}

/* ---------- popup ---------- */
dialog{border:1px solid var(--rule-hard);border-radius:var(--r);padding:0;background:var(--paper);color:var(--ink);width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
dialog::backdrop{background:var(--scrim)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule)}
.dlg-head .eyebrow{margin:0}
.x{width:40px;height:40px;border:1px solid var(--rule);border-radius:var(--r);background:none;cursor:pointer;font-size:20px;line-height:1}
.dlg-body{padding:18px}
.dlg-body h2{font-size:clamp(24px,5vw,32px)}
.dlg-body>p{color:var(--ink-2);margin:10px 0 16px}
.full{margin-top:6px}
.full h3{font-size:15px;margin:18px 0 6px}
.full table{width:100%;border-collapse:collapse;font-size:14px}
.full td{padding:7px 0;border-bottom:1px solid var(--rule-soft)}
.full td:last-child{text-align:right;font-family:var(--mono);white-space:nowrap}

/* ---------- plain pages ---------- */
.prose{max-width:44em}
.prose h1{font-size:clamp(30px,6vw,48px);margin-bottom:20px}
.prose h2{font-size:22px;margin:28px 0 8px}
.prose p,.prose li{color:var(--ink-2)}