/* ==========================================================================
   Arcpoint Electrical Equipment
   Brand: electric blue (#0B62C4) + slate graphite, taken from the logo.
   One accent, used with discipline. The nameplate is the signature.
   ========================================================================== */

:root{
  --tank:#151A1E;
  --tank-2:#1C232A;
  --steel:#232C33;
  --steel-line:#333E46;
  --plate:#EDEFF0;
  --plate-2:#E1E4E6;
  --plate-line:#CBD1D4;
  --ink:#232B31;
  --ink-soft:#5C676E;
  --chalk:#E9EDEF;
  --chalk-soft:#96A3AB;
  --arc:#0B62C4;
  --arc-deep:#0A4E9C;
  --arc-lit:#2E86F0;
  --arc-glow:#7FC0FF;

  --f-display:"Saira Condensed",Impact,"Arial Narrow",sans-serif;
  --f-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --wrap:1180px;
  --gut:clamp(20px,5vw,48px);
  --band-y:clamp(64px,9vw,116px);
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--plate);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--arc);color:#fff}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--arc);color:#fff;padding:12px 18px;
  font:600 14px/1 var(--f-mono);letter-spacing:.06em;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

/* ---------- layout primitives ---------- */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.band{padding-block:var(--band-y);position:relative}
.band--tight{padding-block:clamp(46px,6vw,74px)}
.band--dark{background:var(--tank);color:var(--chalk)}
.band--steel{background:var(--steel);color:var(--chalk)}
.band--plate{background:var(--plate)}
.band--plate2{background:var(--plate-2)}

/* ---------- type ---------- */

.eyebrow{
  font:600 11px/1.2 var(--f-mono);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--arc);margin:0 0 18px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";height:1px;width:26px;flex:none;background:var(--arc)}
.band--dark .eyebrow,.band--steel .eyebrow,.hero .eyebrow{color:var(--arc-lit)}
.band--dark .eyebrow::before,.band--steel .eyebrow::before,.hero .eyebrow::before{background:var(--arc-lit)}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;margin:0;line-height:.95;letter-spacing:-.004em;text-transform:uppercase}

.h-xl{font-size:clamp(2.9rem,7.4vw,5.4rem)}
.h-lg{font-size:clamp(2.2rem,5vw,3.7rem)}
.h-md{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.h-sm{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700}

.lede{
  font-size:clamp(1.05rem,1.6vw,1.26rem);
  line-height:1.55;color:var(--ink-soft);max-width:62ch;margin:22px 0 0;
}
.band--dark .lede,.band--steel .lede,.hero .lede{color:var(--chalk-soft)}

p{margin:1em 0}
.rule{height:1px;background:var(--plate-line);border:0;margin:0}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:11px;
  font:700 14px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  padding:17px 26px;border:1px solid transparent;border-radius:var(--r);
  text-decoration:none;cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn svg{flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--go{background:var(--arc);color:#fff;box-shadow:0 12px 26px -14px rgba(11,98,196,.95)}
.btn--go:hover{background:var(--arc-lit)}
.band--dark .btn--go,.band--steel .btn--go,.hero .btn--go{background:var(--arc-lit)}
.band--dark .btn--go:hover,.band--steel .btn--go:hover,.hero .btn--go:hover{background:#4E9BF7}

.btn--line{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--plate)}
.band--dark .btn--line,.band--steel .btn--line,.hero .btn--line{border-color:#48555E;color:var(--chalk)}
.band--dark .btn--line:hover,.band--steel .btn--line:hover,.hero .btn--line:hover{background:var(--chalk);color:var(--tank);border-color:var(--chalk)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- header ---------- */

.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(19,24,28,.95);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--steel-line);
  color:var(--chalk);
}
.hdr__in{display:flex;align-items:center;gap:24px;height:74px}

.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--chalk);flex:none}
.logo svg{height:40px;width:auto;display:block}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  font:500 13px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--chalk-soft);text-decoration:none;padding:10px 12px;border-radius:var(--r);
  transition:color .15s ease,background-color .15s ease;
}
.nav a:hover{color:var(--chalk);background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:var(--arc-lit)}

.hdr__cta{
  font:700 13px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  background:var(--arc-lit);color:#fff;text-decoration:none;
  padding:13px 18px;border-radius:var(--r);white-space:nowrap;margin-left:14px;
  transition:background-color .15s ease;
}
.hdr__cta:hover{background:#4E9BF7}

.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--steel-line);
  color:var(--chalk);border-radius:var(--r);padding:10px 12px;cursor:pointer;
}
.burger svg{display:block}

@media (max-width:980px){
  .nav{
    position:absolute;left:0;right:0;top:74px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--tank);border-bottom:1px solid var(--steel-line);
    padding:6px var(--gut) 18px;margin-left:0;
  }
  .nav[hidden]{display:none}
  .nav a{padding:15px 4px;border-bottom:1px solid var(--steel-line);font-size:14px}
  .burger{display:block}
  .hdr__cta{display:none}
  .logo svg{height:34px}
}

/* ---------- hero ---------- */

.hero{
  background:
    radial-gradient(880px 520px at 84% 6%,rgba(11,98,196,.30),transparent 62%),
    radial-gradient(680px 460px at 4% 98%,rgba(46,134,240,.13),transparent 60%),
    var(--tank);
  color:var(--chalk);
  border-bottom:1px solid var(--steel-line);
  overflow:hidden;position:relative;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--steel-line) 1px,transparent 1px),linear-gradient(90deg,var(--steel-line) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(980px 620px at 50% 28%,#000 0%,transparent 78%);
  mask-image:radial-gradient(980px 620px at 50% 28%,#000 0%,transparent 78%);
}
.hero__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,5vw,70px);
  align-items:center;padding-block:clamp(58px,8vw,102px);
}
.hero h1 em{font-style:normal;color:var(--arc-lit);display:block}

.trust{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  margin-top:36px;padding-top:24px;border-top:1px solid var(--steel-line);
  font:500 12px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--chalk-soft);
}
.trust span{display:flex;align-items:center;gap:9px}
.trust span::before{content:"";width:6px;height:6px;background:var(--arc-lit);flex:none;transform:rotate(45deg)}

@media (max-width:900px){.hero__in{grid-template-columns:1fr;gap:44px}}

/* ---------- the nameplate (signature element) ---------- */

.plate{
  position:relative;border-radius:4px;padding:26px 28px 24px;
  border:1px solid #7A827E;
  background:
    repeating-linear-gradient(92deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.05) 1px 3px),
    linear-gradient(158deg,#C7CAC6 0%,#AEB3AF 34%,#9DA29F 60%,#BBBFBB 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -3px 6px rgba(0,0,0,.26),
    0 30px 58px -20px rgba(0,0,0,.85);
  color:#1F2523;overflow:hidden;
}
.plate::before{
  content:"";position:absolute;inset:9px;pointer-events:none;z-index:2;
  background-repeat:no-repeat;background-size:15px 15px;
  background-position:left top,right top,left bottom,right bottom;
  background-image:
    radial-gradient(circle,#5A625E 0 30%,#909791 32% 44%,rgba(0,0,0,.32) 46% 52%,transparent 54%),
    radial-gradient(circle,#5A625E 0 30%,#909791 32% 44%,rgba(0,0,0,.32) 46% 52%,transparent 54%),
    radial-gradient(circle,#5A625E 0 30%,#909791 32% 44%,rgba(0,0,0,.32) 46% 52%,transparent 54%),
    radial-gradient(circle,#5A625E 0 30%,#909791 32% 44%,rgba(0,0,0,.32) 46% 52%,transparent 54%);
}
.plate::after{
  content:"";position:absolute;top:-60%;bottom:-60%;width:38%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:rotate(8deg);
  /* Runs twice on arrival, then settles. An infinite loop here keeps the
     compositor awake for the life of the page for no design benefit. */
  animation:sheen 5.5s ease-in-out 1.2s 2 both;
  pointer-events:none;z-index:3;
}
@keyframes sheen{0%{left:-45%}60%,100%{left:135%}}

.plate__hd{
  text-align:center;padding:2px 20px 14px;
  border-bottom:2px solid rgba(0,0,0,.28);
  box-shadow:0 2px 0 rgba(255,255,255,.46);margin-bottom:16px;
}
.plate__brand{
  font-family:var(--f-display);font-weight:800;font-size:clamp(1.15rem,2.3vw,1.48rem);
  letter-spacing:.09em;text-transform:uppercase;line-height:1.05;
  color:#1B211F;text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.plate__sub{
  font:600 10px/1.4 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;
  color:#5C645F;margin-top:7px;text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.plate__row{
  display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid rgba(0,0,0,.15);
  box-shadow:0 1px 0 rgba(255,255,255,.46);position:relative;z-index:1;
}
.plate__row:last-of-type{border-bottom:0;box-shadow:none}
.plate__k{
  font:600 10px/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:#5C645F;text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.plate__v{
  font:600 13.5px/1.5 var(--f-mono);color:#1C2220;text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.plate__v strong{color:var(--arc-deep);font-weight:700}
.plate__ft{
  margin-top:14px;padding-top:12px;border-top:2px solid rgba(0,0,0,.24);
  font:600 10px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:#5C645F;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.45);
}
@media (max-width:420px){.plate__row{grid-template-columns:1fr;gap:2px}}
@media (prefers-reduced-motion:reduce){.plate::after{display:none}}

/* ---------- section head ---------- */

.shead{max-width:66ch;margin-bottom:clamp(38px,5vw,56px)}
.shead .lede{margin-top:18px}

/* ---------- what we buy ---------- */

.buy{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.card{
  grid-column:span 2;background:#fff;
  border:1px solid var(--plate-line);border-radius:var(--r);
  padding:30px 28px 32px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.card:hover{border-color:var(--arc);transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(35,43,49,.55)}
.card--lead{grid-column:span 6;background:var(--tank);color:var(--chalk);border-color:var(--tank)}
.card--lead:hover{border-color:var(--arc-lit)}

.card__ico{width:38px;height:38px;color:var(--arc);margin-bottom:20px}
.card--lead .card__ico{color:var(--arc-lit)}
.card__t{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;margin-bottom:12px}
.card--lead .card__t{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.card__d{margin:0;color:var(--ink-soft);font-size:.97rem;line-height:1.6}
.card--lead .card__d{color:var(--chalk-soft);font-size:1.05rem;max-width:56ch}
.card__more{
  margin-top:22px;font:700 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--arc);display:flex;align-items:center;gap:8px;transition:gap .18s ease;
}
.card--lead .card__more{color:var(--arc-lit)}
.card:hover .card__more{gap:13px}
.card--lead .card__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,52px);align-items:center}

.taglist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.taglist li{
  font:500 11px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--steel-line);border-radius:99px;padding:9px 13px;color:var(--chalk-soft);
}

@media (max-width:860px){
  .buy{grid-template-columns:1fr 1fr}
  .card{grid-column:span 1}
  .card--lead{grid-column:span 2}
  .card--lead .card__in{grid-template-columns:1fr;gap:26px}
}
@media (max-width:560px){
  .buy{grid-template-columns:1fr}
  .card--lead{grid-column:span 1}
}

/* ---------- process: a real sequence, so it earns numbers ---------- */

.steps{counter-reset:s;display:grid;gap:0}
.step{
  counter-increment:s;display:grid;grid-template-columns:96px 1fr;
  gap:clamp(20px,4vw,48px);padding:clamp(30px,4vw,44px) 0;
  border-top:1px solid var(--steel-line);align-items:start;
}
.step:last-child{border-bottom:1px solid var(--steel-line)}
.step__n{
  font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,5vw,3.6rem);
  line-height:.8;color:var(--arc-lit);
}
.step__n::before{content:"0" counter(s)}
.step__b h3{margin-bottom:12px;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.step__b p{margin:0;color:var(--chalk-soft);max-width:60ch}
.step__note{
  display:inline-block;margin-top:16px;font:500 12px/1.5 var(--f-mono);letter-spacing:.05em;
  color:var(--arc-glow);border-left:2px solid var(--arc-lit);padding-left:12px;
}
@media (max-width:640px){
  .step{grid-template-columns:1fr;gap:10px}
  .step__n{font-size:2.2rem}
}

/* ---------- reasons ---------- */

.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--plate-line);border:1px solid var(--plate-line)}
.reason{background:var(--plate);padding:32px 28px 34px}
.reason h3{font-size:1.26rem;margin-bottom:11px}
.reason p{margin:0;color:var(--ink-soft);font-size:.97rem;line-height:1.6}
.reason__ico{width:24px;height:24px;color:var(--arc);margin-bottom:16px}
@media (max-width:860px){.reasons{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.reasons{grid-template-columns:1fr}}

/* ---------- spec table ---------- */

.spec{width:100%;border-collapse:collapse;font-size:.96rem}
.spec caption{
  text-align:left;font:600 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--arc);padding-bottom:16px;
}
.spec th,.spec td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--plate-line);vertical-align:top}
.spec th{
  width:215px;font:600 11.5px/1.5 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);
}
.spec td{color:var(--ink-soft)}
.spec tr:first-child th,.spec tr:first-child td{border-top:1px solid var(--plate-line)}
.spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:600px){
  .spec th{width:auto;display:block;border-bottom:0;padding:15px 0 2px}
  .spec td{display:block;padding:0 0 15px}
}

/* ---------- checklist ---------- */

.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;line-height:1.55}
.checks svg{width:22px;height:22px;color:var(--arc);margin-top:3px;flex:none}
.band--dark .checks svg,.band--steel .checks svg{color:var(--arc-lit)}

/* ---------- split ---------- */

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,76px);align-items:start}
.split--wide{grid-template-columns:1.1fr .9fr}
@media (max-width:840px){.split,.split--wide{grid-template-columns:1fr;gap:38px}}

/* ---------- call band ---------- */

.callband{background:var(--arc);color:#fff;padding-block:clamp(48px,6vw,72px)}
.callband__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px}
.callband h2{max-width:20ch}
.callband p{margin:14px 0 0;color:rgba(255,255,255,.88);max-width:48ch}
.callband .btn--go{background:#fff;color:var(--arc-deep);box-shadow:none}
.callband .btn--go:hover{background:#EAF2FC}
.callband .btn--line{border-color:rgba(255,255,255,.62);color:#fff}
.callband .btn--line:hover{background:#fff;color:var(--arc-deep);border-color:#fff}

/* ---------- form ---------- */

.form{
  background:var(--tank);border:1px solid var(--steel-line);border-radius:var(--r);
  padding:clamp(26px,4vw,42px);color:var(--chalk);
}
.band--dark .form,.band--steel .form{background:rgba(0,0,0,.26)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font:600 11px/1 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--chalk-soft)}
.field .req{color:var(--arc-lit)}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:16px;color:var(--chalk);
  background:var(--tank-2);border:1px solid var(--steel-line);border-radius:var(--r);
  padding:14px 15px;width:100%;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:132px;resize:vertical;line-height:1.55}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2396A3AB' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#465661}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--arc-lit);background:#19222A;outline:none;box-shadow:0 0 0 3px rgba(46,134,240,.26);
}
.field input::placeholder,.field textarea::placeholder{color:#66737B}
.form__note{font:400 13px/1.6 var(--f-body);color:var(--chalk-soft);margin:20px 0 0}
.form__note a{color:var(--arc-lit)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.form__grid{grid-template-columns:1fr}}

/* ---------- contact rail ---------- */

.rail{display:grid;gap:1px;background:var(--steel-line);border:1px solid var(--steel-line);border-radius:var(--r);overflow:hidden}
.rail__item{background:var(--tank);padding:26px 28px;display:block;text-decoration:none}
.rail__item:hover{background:var(--tank-2)}
.rail__k{font:600 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-soft);display:block;margin-bottom:11px}
.rail__v{font-family:var(--f-display);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.8rem);text-transform:uppercase;line-height:1.05;color:var(--chalk);word-break:break-word}
.rail__v--sm{font-family:var(--f-mono);font-weight:600;font-size:.98rem;text-transform:none;letter-spacing:0}
.rail__d{font-size:.9rem;color:var(--chalk-soft);margin:9px 0 0;line-height:1.5}

/* ---------- stat strip ---------- */

/* auto-fit, not a fixed count: the strip stays even whether it holds 3 or 4 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--steel-line);border-block:1px solid var(--steel-line)}
.stat{background:var(--tank);padding:30px 26px}
.stat__v{font-family:var(--f-display);font-weight:800;font-size:clamp(1.85rem,3.5vw,2.6rem);line-height:1;color:var(--arc-lit);text-transform:uppercase}
.stat__k{font:500 11px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-soft);margin-top:12px}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- faq ---------- */

.faq{border-top:1px solid var(--plate-line)}
.faq details{border-bottom:1px solid var(--plate-line)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.08rem,2vw,1.32rem);line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--arc);border-bottom:2px solid var(--arc);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{margin:0 0 26px;color:var(--ink-soft);max-width:70ch}

/* ---------- footer ---------- */

.ftr{background:#10161A;color:var(--chalk-soft);padding-block:60px 34px;border-top:1px solid var(--steel-line)}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.ftr h4{font-size:.9rem;letter-spacing:.14em;color:var(--chalk);margin-bottom:16px;font-family:var(--f-mono);font-weight:600;text-transform:uppercase}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr a{color:var(--chalk-soft);text-decoration:none;font-size:.94rem}
.ftr a:hover{color:var(--arc-lit)}
.ftr__blurb{font-size:.94rem;line-height:1.65;margin:16px 0 0;max-width:38ch}
.ftr__logo svg{height:38px;width:auto}
.ftr__btm{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--steel-line);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  font:400 12.5px/1.6 var(--f-mono);
}
@media (max-width:820px){.ftr__top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr__top{grid-template-columns:1fr}}

/* ---------- scroll reveal ---------- */

.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- logo lockup ---------- */

.logo__arc{stroke:var(--arc-lit)}
.logo__wm{display:flex;flex-direction:column;gap:3px;line-height:1}
.logo__name{
  font-family:var(--f-display);font-weight:800;font-size:26px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--chalk);
}
.logo__name b{font-weight:800;color:var(--arc-lit)}
.logo__tag{
  font:500 8.5px/1 var(--f-mono);letter-spacing:.28em;text-transform:uppercase;
  color:var(--chalk-soft);
}
.ftr__logo{display:flex;align-items:center;gap:12px}
.ftr__logo .logo__wm{gap:4px}

@media (max-width:400px){
  .logo__name{font-size:21px}
  .logo__tag{letter-spacing:.2em;font-size:7.5px}
}

/* ---------- hero load sequence (one orchestrated moment) ---------- */

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes plateIn{
  from{opacity:0;transform:translateY(28px) scale(.965)}
  to{opacity:1;transform:none}
}

.hero .eyebrow{animation:rise .55s ease-out both .04s}
.hero h1{animation:rise .7s cubic-bezier(.2,.75,.25,1) both .12s}
.hero .lede{animation:rise .7s ease-out both .24s}
.hero .btn-row{animation:rise .7s ease-out both .34s}
.hero .trust{animation:rise .7s ease-out both .44s}
.hero .plate{animation:plateIn .95s cubic-bezier(.16,.84,.28,1) both .28s}

@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero .lede,.hero .btn-row,.hero .trust,.hero .plate{animation:none}
}

/* ---------- narrow-screen corrections ---------- */

/* Long unbroken addresses must not push the footer sideways. */
.ftr__btm,.ftr a,.ftr__blurb{overflow-wrap:anywhere}

/* At 320px two stat columns leave ~107px of content width, which the
   condensed display face overruns. Drop to one column and tighten. */
@media (max-width:480px){
  .stats{grid-template-columns:1fr}
  .stat{padding:24px 20px}
  .stat__v{font-size:1.7rem}
  .stat__k{font-size:10.5px;letter-spacing:.1em}
}

/* Grid items default to min-width:auto, so one unbreakable token (an email
   address) can widen its track past the container. Both halves of the fix. */
.split > *,.buy > *,.hero__in > *{min-width:0}
.form__note,.card__d,.reason p,.spec td{overflow-wrap:anywhere}

/* Footer links carry the phone number and email — the two things someone
   taps after reading a mailer. Give them a real touch target. */
.ftr ul a{display:inline-block;padding:8px 0;line-height:1.35}
.ftr ul{gap:2px}
.burger{padding:12px 13px}