/* ==========================================================================
   Hammerhead Garage Doors — main.css
   Direction "Torque" · Deevoted Senior Developer · v1.0.0
   Token layer is generated from brand-package/tokens. Do not hardcode values.
   ========================================================================== */

:root{
  --navy:#0B1C36; --navy-900:#060F1F; --navy-700:#152C52; --navy-500:#33465F;
  --orange:#FD6000; --orange-700:#D24F00; --teal:#1CA0BE;
  --frost:#BFE3EE; --frost-deep:#7FC4D8;
  --zinc:#F2F5F7; --zinc-200:#E2E8EC; --steel:#5A6672; --hairline:#CBD5DB;
  --success:#1F9D55; --error:#C62828; --caution:#E8A317;

  --f-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --f-data:'Barlow Semi Condensed','Arial Narrow',Arial,sans-serif;
  --f-body:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --container:1200px; --gutter:clamp(16px,4vw,40px);
  --r-sm:3px; --r:6px; --r-lg:14px;
  --sh1:0 1px 2px rgba(11,28,54,.08),0 2px 8px rgba(11,28,54,.06);
  --sh2:0 4px 12px rgba(11,28,54,.10),0 12px 32px rgba(11,28,54,.10);
  --ease:cubic-bezier(.2,.7,.3,1);
  --barh:0px;
  color-scheme:light;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--zinc);color:var(--navy);font-family:var(--f-body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;padding-bottom:var(--barh)}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse;width:100%}

/* ---------- type ---------- */
.d1,.d2,.d3{font-family:var(--f-display);font-weight:800;line-height:.95;letter-spacing:-.005em;text-transform:uppercase}
.d1{font-size:clamp(2.05rem,1.4rem + 3.4vw,4.6rem)}
.d2{font-size:clamp(2.05rem,1.65rem + 1.9vw,3.1rem)}
.d3{font-size:clamp(1.55rem,1.35rem + 0.95vw,2.1rem)}
.lede{font-size:clamp(1.05rem,1rem + 0.4vw,1.28rem);line-height:1.55;color:var(--navy-500);max-width:62ch}
.kicker{font-family:var(--f-data);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.small{font-size:.92rem;color:var(--steel)}
:is(h1,h2,h3) + p{margin-top:var(--s4)}
p + p{margin-top:var(--s4)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:1440px}
.band{padding-block:clamp(48px,7vw,96px);position:relative}
.band--dark{background:var(--navy);color:var(--zinc)}
.band--deep{background:var(--navy-900);color:var(--zinc)}
.band--tint{background:var(--zinc-200)}
.band--dark .lede,.band--deep .lede{color:var(--frost)}
.band--dark .kicker,.band--deep .kicker{color:var(--frost-deep)}
.grid{display:grid;gap:var(--s5)}
@media(min-width:700px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:999px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g4{grid-template-columns:1fr}}
.stack>*+*{margin-top:var(--s4)}
.center{text-align:center}
.mt5{margin-top:var(--s5)}.mt6{margin-top:var(--s6)}.mt7{margin-top:var(--s7)}

/* the track hairline (E6) */
@media(min-width:1200px){
  .band::before{content:"";position:absolute;left:max(20px,calc((100% - var(--container))/2 - 26px));top:0;bottom:0;width:2px;background:var(--teal);opacity:.25}
  .band--dark::before,.band--deep::before{opacity:.4}
}

/* ---------- skip + focus ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:var(--navy);padding:12px 20px;font-weight:700;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:2px}
.band--dark :focus-visible,.band--deep :focus-visible,.hero :focus-visible{outline-color:var(--frost)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:var(--zinc);border-bottom:1px solid var(--hairline);transition:box-shadow .14s var(--ease),padding .14s var(--ease)}
.hdr.is-scrolled{box-shadow:var(--sh1)}
.hdr__in{display:flex;align-items:center;gap:var(--s4);padding-block:var(--s3);min-height:64px;flex-wrap:nowrap}
.hdr.is-scrolled .hdr__in{padding-block:6px}
.hdr__logo{display:block;flex:0 0 auto;width:min(178px,46vw)}
.hdr__nav{margin-left:auto;display:none}
.hdr__nav ul{display:flex;gap:22px;list-style:none;align-items:center}
.hdr__nav li{white-space:nowrap}
.hdr__nav a{font-weight:600;font-size:15px;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.hdr__nav a:hover,.hdr__nav a[aria-current]{border-bottom-color:var(--teal)}
.hdr__nav li.util{display:none}
@media(min-width:1180px){.hdr__nav li.util{display:block}}
.hdr .hdr__call{display:none;white-space:nowrap;flex:0 0 auto}
.hdr__toggle{margin-left:auto;width:46px;height:46px;display:grid;place-items:center;background:none;border:1px solid var(--hairline);border-radius:var(--r);cursor:pointer}
.hdr__toggle span{display:block;width:20px;height:2px;background:var(--navy);position:relative}
.hdr__toggle span::before,.hdr__toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy)}
.hdr__toggle span::before{top:-6px}.hdr__toggle span::after{top:6px}
@media(min-width:900px){
  .hdr__nav{display:block}.hdr__toggle{display:none}
  .hdr .hdr__call{display:inline-flex;margin-left:var(--s4);padding:10px 16px}
}
.drawer{position:fixed;inset:0;background:var(--navy-900);color:var(--zinc);z-index:150;display:none;overflow:auto;padding:var(--s5) var(--gutter) var(--s8)}
.drawer[open],.drawer.is-open{display:block}
.drawer__top{display:flex;justify-content:flex-end}
.drawer__close{background:none;border:1px solid rgba(191,227,238,.4);color:var(--frost);width:46px;height:46px;border-radius:var(--r);font-size:22px;cursor:pointer}
.drawer ul{list-style:none;margin-top:var(--s5)}
.drawer li+li{border-top:1px solid rgba(191,227,238,.18)}
.drawer a{display:block;padding:var(--s4) 0;font-family:var(--f-display);font-weight:700;font-size:1.6rem;text-transform:uppercase;text-decoration:none;color:var(--zinc)}

/* ---------- call bar (E4) ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;background:var(--orange);box-shadow:0 -2px 14px rgba(11,28,54,.22)}
.callbar a{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:10px 8px;min-height:62px;text-decoration:none;color:var(--navy);font-weight:700}
.callbar__num{font-family:var(--f-display);font-size:1.35rem;font-weight:800;letter-spacing:.01em}
.callbar__note{font-family:var(--f-data);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.callbar .callbar__alt{flex:0 0 38%;background:var(--navy);color:var(--frost);font-size:.9rem}
@media(min-width:900px){.callbar{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:var(--r);font-weight:700;font-size:15.5px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .14s var(--ease),background-color .14s var(--ease)}
.btn--primary{background:var(--orange);color:var(--navy)}
.btn--primary:hover{background:var(--orange-700);transform:translateY(-1px)}
.btn--primary:active{transform:none}
.btn--secondary{border-color:var(--navy);color:var(--navy)}
.btn--secondary:hover{background:var(--navy);color:var(--zinc)}
.band--dark .btn--secondary,.band--deep .btn--secondary,.hero .btn--secondary,.readout .btn--secondary,.ftr .btn--secondary{border-color:var(--frost);color:var(--frost)}
.band--dark .btn--secondary:hover,.band--deep .btn--secondary:hover,.hero .btn--secondary:hover,.readout .btn--secondary:hover,.ftr .btn--secondary:hover{background:var(--frost);color:var(--navy)}
.btn[disabled]{background:var(--zinc-200);color:var(--steel);pointer-events:none;border-color:transparent}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.link{font-weight:600;text-decoration:none;border-bottom:2px solid var(--teal);padding-bottom:1px}
.link:hover{border-bottom-color:var(--orange)}

/* ---------- spec rail (E2) ---------- */
.rail{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-top:var(--s5)}
.band--dark .rail,.band--deep .rail{border-color:rgba(191,227,238,.28)}
.rail div{padding:12px 20px 12px 0;margin-right:20px;border-right:1px solid var(--hairline);flex:0 1 auto}
.band--dark .rail div,.band--deep .rail div{border-right-color:rgba(191,227,238,.28)}
.rail div:last-child{border-right:0;margin-right:0}
.rail dt{font-family:var(--f-data);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.band--dark .rail dt,.band--deep .rail dt{color:var(--frost-deep)}
.rail dd{font-family:var(--f-data);font-weight:600;font-size:1.02rem;margin-top:2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.band--dark .rail dd,.band--deep .rail dd{color:var(--frost)}

/* ---------- price readout (E1) ---------- */
.readout{background:var(--navy-900);color:var(--zinc);border-radius:var(--r-lg);padding:clamp(20px,3.5vw,36px);box-shadow:var(--sh2)}
.readout__pick{position:relative}
.readout__pick select{
  appearance:none;-webkit-appearance:none;width:100%;
  min-height:60px;padding:14px 50px 14px 16px;
  font-family:var(--f-data);font-weight:600;font-size:clamp(1rem,0.92rem + 0.35vw,1.14rem);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#fff;background-color:var(--navy-700);
  border:2px solid rgba(191,227,238,.42);border-radius:var(--r);
  cursor:pointer;transition:border-color .14s var(--ease),background-color .14s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FD6000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
}
.readout__pick select:hover{border-color:var(--frost-deep);background-color:#1b3560}
.readout__pick select:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-color:var(--orange)}
.readout__pick select option{color:var(--navy);background:#fff;font-weight:500}
.readout__pick select optgroup{color:var(--steel);font-style:normal;font-weight:600}
.readout__hint{margin-top:10px;font-family:var(--f-data);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--frost-deep)}
/* Single column at every size: the price takes the full width and the
   diagnosis stacks beneath it. Two columns left dead space under the price
   and split the reader's attention at the moment the number should carry. */
.readout__out{margin-top:var(--s5);border-top:1px solid rgba(191,227,238,.25);padding-top:var(--s5);display:grid;gap:var(--s5)}
.readout__body,.readout__try{max-width:66ch}
.readout__price{font-family:var(--f-display);font-weight:800;line-height:.9;font-size:clamp(3rem,2rem + 5.4vw,5.4rem);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.readout__qual{font-family:var(--f-data);font-weight:600;color:var(--orange);font-size:clamp(.95rem,.9rem + .2vw,1.05rem);letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
.readout__cause{font-family:var(--f-display);font-weight:700;font-size:clamp(1.4rem,1.2rem + 0.7vw,1.85rem);text-transform:uppercase;color:var(--frost);line-height:1.05}
.readout__body{margin-top:10px;color:#D6E4EC;font-size:1rem}
.readout__try{margin-top:var(--s4);background:rgba(28,160,190,.13);border-left:3px solid var(--teal);padding:12px 16px;font-size:.96rem;color:var(--frost)}
.readout__try b{color:#fff}
.readout .btnrow{margin-top:var(--s5)}
.readout__fallback{margin-top:var(--s5)}
.readout__fallback summary{cursor:pointer;font-family:var(--f-data);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--frost-deep);padding:13px 0;min-height:44px;display:flex;align-items:center}

/* ---------- honest aside (E3) ---------- */
.aside{background:var(--zinc-200);border-left:4px solid var(--frost-deep);padding:var(--s5);border-radius:0 var(--r) var(--r) 0}
.band--dark .aside,.band--deep .aside{background:var(--navy-700);color:var(--frost)}
.aside h3{font-family:var(--f-display);font-weight:700;font-size:1.3rem;text-transform:uppercase;letter-spacing:.01em}
.aside ul{margin-top:var(--s3);padding-left:1.1em;list-style:disc}
.aside li+li{margin-top:6px}

/* ---------- safety notice ---------- */
.safety{background:#FDF4E1;border-left:4px solid var(--caution);padding:var(--s5);border-radius:0 var(--r) var(--r) 0;display:flex;gap:var(--s4);align-items:flex-start;color:#4A3A12}
.safety svg{flex:0 0 auto;margin-top:2px}
.safety h3{font-family:var(--f-display);font-weight:700;font-size:1.2rem;text-transform:uppercase;color:#6B4E06}

/* ---------- cards ---------- */
.card{position:relative;background:#fff;border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s5);transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease);display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:var(--sh1)}
.card h3{font-family:var(--f-display);font-weight:700;font-size:1.35rem;text-transform:uppercase;margin-top:var(--s3);line-height:1.05}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card p{font-size:.97rem;color:var(--navy-500);margin-top:8px;flex:1 1 auto}
.card__price{margin-top:var(--s4);font-family:var(--f-data);font-weight:600;font-variant-numeric:tabular-nums;color:var(--navy);border-top:1px solid var(--hairline);padding-top:10px;font-size:1rem}
.card__price b{font-family:var(--f-display);font-weight:800;font-size:1.35rem}
.card .ico{color:var(--teal)}
.band--dark .card{background:var(--navy-700);border-color:rgba(191,227,238,.2);color:var(--zinc)}
.band--dark .card p{color:var(--frost)}
.band--dark .card__price{border-top-color:rgba(191,227,238,.2);color:var(--frost)}

/* ---------- proof strip ---------- */
.proof{background:var(--navy);color:var(--zinc);padding-block:var(--s5)}
.proof ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s5) var(--s6);align-items:start}
.proof li{display:flex;flex-direction:column;gap:2px}
.proof strong{font-family:var(--f-display);font-weight:800;font-size:1.8rem;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.proof span{font-family:var(--f-data);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--frost-deep)}
.stars{color:var(--orange);letter-spacing:.08em}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r);background:#fff;-webkit-overflow-scrolling:touch}
.tablewrap:focus-visible{outline:3px solid var(--orange)}
table caption{text-align:left;padding:var(--s4) var(--s5);font-family:var(--f-display);font-weight:700;font-size:1.3rem;text-transform:uppercase;background:var(--navy);color:var(--zinc)}
th,td{padding:14px var(--s5);text-align:left;border-bottom:1px solid var(--hairline);font-size:.98rem;vertical-align:top}
th{font-family:var(--f-data);font-weight:600;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);background:var(--zinc-200);white-space:nowrap}
tbody tr:nth-child(even){background:var(--zinc)}
td.price{font-family:var(--f-data);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1.05rem}
td.price b{font-family:var(--f-display);font-weight:800;font-size:1.25rem}

/* ---------- accordion ---------- */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;padding:var(--s4) 40px var(--s4) 0;font-family:var(--f-display);font-weight:700;font-size:1.2rem;text-transform:uppercase;position:relative;list-style:none;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:translateY(-70%) rotate(45deg);transition:transform .18s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details[open]{border-left:3px solid var(--teal);padding-left:var(--s4)}
.faq p{padding-bottom:var(--s5);color:var(--navy-500);max-width:70ch}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--s4);max-width:620px}
.field label{display:block;font-family:var(--f-data);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;min-height:50px;font-size:16px;padding:12px 14px;border:2px solid var(--hairline);border-radius:var(--r);background:#fff}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:3px solid var(--orange);outline-offset:1px}
.field .err{color:var(--error);font-size:.9rem;margin-top:6px;display:none}
.field.is-invalid .err{display:block}
.field.is-invalid input,.field.is-invalid select{border-color:var(--error)}
@media(min-width:640px){.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}}

/* ---------- towns / lists ---------- */
.towns{list-style:none;display:grid;gap:2px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.towns a{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;background:#fff;border:1px solid var(--hairline);text-decoration:none;font-weight:600;font-size:.95rem;min-height:46px;align-items:center}
.towns a:hover{border-color:var(--teal);color:var(--navy)}
.towns .mins{font-family:var(--f-data);font-size:.82rem;color:var(--steel);font-variant-numeric:tabular-nums}
.band--dark .towns a{background:var(--navy-700);border-color:rgba(191,227,238,.2);color:var(--zinc)}
.band--dark .towns .mins{color:var(--frost-deep)}

/* ---------- reviews ---------- */
.review{background:#fff;border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:10px}
.review blockquote{margin:0;font-size:1.02rem}
.review footer{font-family:var(--f-data);font-size:.85rem;color:var(--steel);letter-spacing:.04em;margin-top:auto;padding-top:10px;border-top:1px solid var(--hairline)}

/* ---------- crew ---------- */
.crew{display:grid;gap:var(--s5)}
.crew figure{margin:0;background:#fff;border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden}
.crew figcaption{padding:var(--s4) var(--s5)}
.crew h3{font-family:var(--f-display);font-weight:700;font-size:1.3rem;text-transform:uppercase}

/* ---------- placeholder imagery ---------- */
.ph{position:relative;background:var(--navy);border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.ph--wide{aspect-ratio:16/9}
.ph--tall{aspect-ratio:3/4}
.ph--port{aspect-ratio:4/5;max-width:460px;margin-inline:auto}
.split.split--who{align-items:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__err{color:#9B1C1C}.form__err a{color:inherit;font-weight:600}
.btn[aria-busy="true"]{opacity:.72;pointer-events:none}
@media(max-width:899px){.split--who>.who__pic{order:-1}.split--who{gap:var(--s5)}}
.ph svg,.ph img{width:100%;height:100%;display:block;object-fit:cover}
.ph{margin:0}
.ph__tag{position:absolute;left:10px;bottom:10px;background:rgba(6,15,31,.82);color:var(--frost);font-family:var(--f-data);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:3px}

/* ---------- cold index (E5) ---------- */
.cold{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-data);font-weight:600;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);background:var(--frost);padding:6px 12px;border-radius:999px}
.band--dark .cold,.band--deep .cold{background:rgba(191,227,238,.16);color:var(--frost)}

/* ---------- split ---------- */
.split{display:grid;gap:var(--s6);align-items:center}
.split>*,.hero__grid>*,.grid>*{min-width:0}
@media(min-width:900px){.split{grid-template-columns:1.05fr 1fr}.split--rev>*:first-child{order:2}}

/* ---------- footer ---------- */
.ftr{background:var(--navy-900);color:var(--frost);padding-block:var(--s8) var(--s6);font-size:.95rem}
.ftr__grid{display:grid;gap:var(--s6)}
@media(min-width:760px){.ftr__grid{grid-template-columns:repeat(4,1fr)}}
.ftr h3{font-family:var(--f-data);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--frost-deep);margin-bottom:var(--s3)}
.ftr ul{list-style:none}
.ftr li+li{margin-top:8px}
.ftr a{text-decoration:none;color:var(--frost)}
.ftr a:hover{border-bottom:1px solid var(--orange)}
.ftr__legal{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(191,227,238,.2);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);font-size:.85rem;color:var(--frost-deep);justify-content:space-between}
.ftr__logo{width:206px;margin-bottom:var(--s4)}

/* ---------- breadcrumb ---------- */
.crumb{padding-top:var(--s5);font-family:var(--f-data);font-size:.82rem;color:var(--steel);letter-spacing:.05em}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:var(--zinc);padding-block:clamp(36px,5vw,64px) clamp(44px,6vw,80px);position:relative;overflow:hidden}
.hero__grid{display:grid;gap:var(--s6)}
@media(min-width:1020px){.hero__grid{grid-template-columns:0.92fr 1.08fr;align-items:start;gap:var(--s7)}}
.hero h1{color:#fff}
.hero .lede{color:var(--frost)}
.hero__deco{position:absolute;right:-80px;top:-40px;width:420px;opacity:.07;pointer-events:none}
/* Mobile: the Price Readout must resolve on the first screen (creative direction, decision 2).
   display:contents promotes the intro column's children so the tool can be ordered up.
   Tab order intentionally still reaches the phone button before the tool. */
@media(max-width:1019px){
  .hero__grid > div:first-child{display:contents}
  .hero__grid > div:first-child > .kicker{order:1}
  .hero__grid > div:first-child > h1{order:2}
  .hero__grid > div:first-child > .lede{order:4}
  .hero__grid > div:first-child > .btnrow{order:5}
  .hero__grid > div:first-child > .rail{order:6}
  .hero__grid > div:first-child > p:not(.kicker):not(.lede){order:6}
  .hero__grid > div:last-child{order:3}
  .hero__grid{gap:var(--s5)}
}

/* ---------- sr ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}