/* =========================================================================
   Catering Trailers NW
   One stylesheet. Tokens first, then layout, then components.
   Design direction: an engineering drawing. Hairlines, dimension ticks,
   mono callouts, steel and shadow, red used only where it must be obeyed.
   ========================================================================= */

/* ---------- tokens ------------------------------------------------------ */
:root{
  --canvas:#0B1A2B;
  --canvas-deep:#071320;
  --panel:#122438;
  --panel-2:#1A3049;
  --accent:#DE000F;
  --accent-hover:#FF1F2E;
  --accent-muted:rgba(222,0,15,.26);
  --steel:#8FA3B8;
  --text-primary:#F4F7FA;
  --text-secondary:#A9BBCD;
  --hairline:rgba(143,163,184,.22);
  --hairline-strong:rgba(143,163,184,.42);

  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --wrap:1220px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --head-h:74px;

  --tshadow:0 1px 2px rgba(4,10,18,.95),0 3px 12px rgba(4,10,18,.78),0 10px 44px rgba(4,10,18,.8);
  --lift:0 2px 6px rgba(0,0,0,.28),0 14px 40px rgba(0,0,0,.34);
}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font:400 clamp(1rem,.96rem + .2vw,1.075rem)/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,video,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.022em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,1.4rem + 4.1vw,4.35rem)}
h2{font-size:clamp(1.85rem,1.25rem + 2.5vw,3rem)}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

/* Any class that sets `display` outranks the UA's [hidden] rule, so restate it
   once, globally. Without this, hidden buttons and cues still render. */
[hidden]{display:none !important}

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

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

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
      color:#fff;padding:.85rem 1.3rem;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- the environment layer -------------------------------------- */
/* One fixed layer behind everything so scrolling feels like moving through
   a place rather than past stacked boxes. */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(60% 44% at 18% 12%,rgba(222,0,15,.09),transparent 62%),
    radial-gradient(52% 40% at 84% 78%,rgba(143,163,184,.10),transparent 66%);
  animation:drift 96s var(--ease) -18s infinite alternate;
}
.env::after{                                   /* workshop dust, whisper level */
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.18),transparent),
    radial-gradient(1.5px 1.5px at 68% 14%,rgba(255,255,255,.13),transparent),
    radial-gradient(1px 1px at 38% 72%,rgba(255,255,255,.15),transparent),
    radial-gradient(1.5px 1.5px at 88% 58%,rgba(255,255,255,.11),transparent),
    radial-gradient(1px 1px at 24% 88%,rgba(255,255,255,.13),transparent);
  background-size:520px 520px;
  animation:dust 120s linear -30s infinite;
}
@keyframes drift{to{transform:translate3d(2.5%,-2%,0) scale(1.06)}}
@keyframes dust{to{background-position:520px -520px}}

/* ---------- layout ------------------------------------------------------ */
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.wrap--narrow{width:min(760px,100% - var(--gut)*2)}

section{position:relative}
.band{padding-block:clamp(3.6rem,2rem + 7vw,7rem)}
.band--tight{padding-block:clamp(2.6rem,1.6rem + 4vw,4.4rem)}
.band--well{background:var(--canvas-deep)}
.band--panel{background:var(--panel)}

/* A hairline that reads as a drawing rule, with the red tick of the logo. */
.rule{position:relative;height:1px;background:var(--hairline);border:0;margin:0}
.rule::after{content:"";position:absolute;left:0;top:0;width:62px;height:3px;
             margin-top:-1px;background:var(--accent)}

.kicker{
  font:500 .74rem/1 var(--mono);
  letter-spacing:.17em;text-transform:uppercase;color:var(--steel);
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}

.lede{font-size:clamp(1.06rem,1rem + .4vw,1.26rem);color:var(--text-secondary);
      max-width:62ch}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.86rem 1.5rem;border:1px solid transparent;border-radius:3px;
  font:600 1rem/1 var(--body);letter-spacing:.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .28s var(--ease),border-color .28s var(--ease),
             transform .28s var(--ease),box-shadow .28s var(--ease),color .28s var(--ease);
}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.16) inset}
.btn--accent:hover{background:var(--accent-hover);transform:translateY(-2px);
                   box-shadow:0 8px 26px rgba(222,0,15,.36)}
.btn--ghost{border-color:var(--hairline-strong);color:var(--text-primary);background:transparent}
.btn--ghost:hover{border-color:var(--steel);background:rgba(143,163,184,.09);transform:translateY(-2px)}
.btn--wa{background:#1FA855;color:#fff}
.btn--wa:hover{background:#25c463;transform:translateY(-2px)}
.btn--lg{padding:1.05rem 1.9rem;font-size:1.06rem}
.btn:active{transform:translateY(0)}
.band .btn,.hero .btn{text-shadow:none}

.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ---------- masthead ---------------------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:90;
  background:rgba(11,26,43,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.masthead__in{display:flex;align-items:center;gap:1.5rem;min-height:var(--head-h)}
.brand{flex:none;display:flex;align-items:center}
.brand img{width:clamp(160px,17vw,230px);height:auto}

.nav{margin-left:auto}
.nav__list{display:flex;gap:clamp(.7rem,1.5vw,1.5rem);list-style:none;margin:0;padding:0}
.nav__list a{
  position:relative;display:block;padding:.5rem 0;text-decoration:none;
  font-size:.945rem;color:var(--text-secondary);transition:color .25s var(--ease);
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__list a:hover{color:var(--text-primary)}
.nav__list a:hover::after,.nav__list a[aria-current]::after{transform:scaleX(1)}
.nav__list a[aria-current]{color:var(--text-primary)}

.masthead__cta{display:flex;align-items:center;gap:.85rem;flex:none}
.tel{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
     font:600 1.02rem/1 var(--body);color:var(--text-primary);white-space:nowrap;
     transition:color .25s var(--ease)}
.tel svg{width:17px;height:17px;fill:var(--accent);flex:none}
.tel:hover{color:var(--accent-hover)}

.burger{display:none;background:none;border:1px solid var(--hairline-strong);
        border-radius:3px;padding:.55rem;cursor:pointer}
.burger__box{display:grid;gap:4px;width:20px}
.burger__box i{height:2px;background:var(--text-primary);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1080px){
  .nav{
    position:fixed;inset:var(--head-h) 0 auto;margin:0;
    background:var(--canvas-deep);border-bottom:1px solid var(--hairline);
    padding:1rem var(--gut) 1.6rem;
    transform:translateY(-104%);visibility:hidden;
    transition:transform .42s var(--ease),visibility .42s;
  }
  .nav.open{transform:translateY(0);visibility:visible}
  .nav__list{flex-direction:column;gap:0}
  .nav__list a{padding:.95rem 0;border-bottom:1px solid var(--hairline);font-size:1.06rem}
  .nav__list a::after{display:none}
  .burger{display:block;margin-left:auto;order:3}
  .masthead__cta .btn{display:none}
  .masthead__cta{margin-left:auto}
}
@media (max-width:560px){
  .masthead__cta .tel span{display:none}
  .tel{padding:.5rem;border:1px solid var(--hairline-strong);border-radius:3px}
  .tel svg{width:19px;height:19px}
}

/* ---------- the static hero --------------------------------------------- */
/* One image on every device. Sized in svh so mobile browser chrome does not
   crop it, with a ceiling in px so it never towers on a large monitor. */
.hero--still{
  position:relative;
  display:flex;align-items:flex-end;
  min-height:min(86svh,760px);
  padding-block:clamp(3rem,9vw,6rem) clamp(2.4rem,6vw,4.5rem);
  overflow:hidden;
  background:var(--canvas-deep);
  isolation:isolate;
}
.hero--still__img{
  position:absolute;inset:0;z-index:-2;
  background-position:center 42%;background-size:cover;background-repeat:no-repeat;
  background-image:url('/assets/img/hero/hero-poster.jpg');
}
.hero--still__img{background-image:-webkit-image-set(
    url('/assets/img/hero/hero-poster.webp') type('image/webp'),
    url('/assets/img/hero/hero-poster.jpg')  type('image/jpeg'))}
.hero--still__img{background-image:image-set(
    url('/assets/img/hero/hero-poster.webp') type('image/webp'),
    url('/assets/img/hero/hero-poster.jpg')  type('image/jpeg'))}

/* Two scrims: one overall so no part of the photograph is ever raw behind
   the page, one weighted to the left where the words actually sit. */
.hero--still__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(5,12,20,.94) 0%,rgba(5,12,20,.72) 34%,
                            rgba(5,12,20,.30) 66%,rgba(5,12,20,.10) 100%),
    linear-gradient(100deg,rgba(7,19,32,.86) 0%,rgba(7,19,32,.62) 34%,
                            rgba(7,19,32,.18) 58%,rgba(7,19,32,0) 78%);
}

.hero--still__body{position:relative;width:100%}
.hero--still h1{max-width:17ch;margin:0 0 .7rem;text-shadow:var(--tshadow)}
.hero--still__lede{
  max-width:46ch;margin:0 0 1.8rem;
  font-size:clamp(1.04rem,.99rem + .42vw,1.28rem);
  color:#DCE6F0;text-shadow:var(--tshadow);
}
/* Small text over a photograph needs more than the steel grey used on solid
   panels. Measured at 1.01:1 in --steel. Raising the colour alone still left
   it at 2.08:1 on desktop, where the image is brightest behind it, so this
   label gets a chip: a small blurred backing pill rather than a bigger scrim
   over the whole hero. */
.hero--still .kicker{
  display:inline-flex;width:auto;
  margin-bottom:1.4rem;padding:.5rem .9rem .5rem .75rem;
  border-radius:999px;
  background:rgba(8,16,26,.66);
  border:1px solid rgba(143,163,184,.3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#EAF1F8;text-shadow:0 1px 3px rgba(5,12,20,.9);
}
.hero--still .btn{text-shadow:none}

.hero--still__proof{
  list-style:none;margin:2.4rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.7rem 2rem;
}
.hero--still__proof li{
  position:relative;padding-left:1.5rem;
  font-size:.95rem;color:#E4EDF5;text-shadow:0 1px 4px rgba(5,12,20,.95);
}
.hero--still__proof li::before{
  content:"";position:absolute;left:0;top:.44em;
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--accent-muted);
}
@media (max-width:600px){
  .hero--still{min-height:min(78svh,640px)}
  .hero--still__proof{gap:.55rem;flex-direction:column}
  .hero--still__scrim{
    background:
      linear-gradient(to top,rgba(5,12,20,.96) 0%,rgba(5,12,20,.88) 46%,
                              rgba(5,12,20,.62) 78%,rgba(5,12,20,.34) 100%),
      linear-gradient(100deg,rgba(7,19,32,.72) 0%,rgba(7,19,32,.52) 46%,
                              rgba(7,19,32,.22) 78%,rgba(7,19,32,0) 100%);
  }
}

/* ---------- trust strip ------------------------------------------------- */
.trust{border-block:1px solid var(--hairline);background:var(--canvas-deep)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust__item{padding:1.5rem 1.4rem;display:grid;gap:.35rem;
             border-left:1px solid var(--hairline)}
.trust__item:first-child{border-left:0}
.trust__item b{font:800 1.02rem/1.25 var(--display)}
.trust__item span{font-size:.9rem;color:var(--text-secondary)}
@media (max-width:860px){
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__item:nth-child(3){border-left:0}
  .trust__item:nth-child(n+3){border-top:1px solid var(--hairline)}
}

/* ---------- the two doors ---------------------------------------------- */
/* Deliberately unequal so it never reads as a stamped template. */
.doors{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1rem,2.4vw,1.9rem)}
@media (max-width:900px){.doors{grid-template-columns:1fr}}
.door{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(340px,42vw,470px);padding:clamp(1.5rem,3vw,2.4rem);
  border:1px solid var(--hairline);border-radius:4px;overflow:hidden;
  text-decoration:none;isolation:isolate;
  transition:border-color .4s var(--ease),transform .5s var(--ease-out);
}
.door picture,.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.door::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(7,19,32,.94) 6%,rgba(7,19,32,.62) 46%,rgba(7,19,32,.24) 100%);
  transition:opacity .4s var(--ease);
}
.door:hover{border-color:var(--accent);transform:translateY(-4px)}
.door h3{margin:0 0 .4rem;font-size:clamp(1.45rem,1.15rem + 1.2vw,2.1rem)}
.door p{color:#C9D6E3;max-width:38ch;margin:0 0 1rem}
.door__go{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--accent-hover)}
.door__go svg{width:15px;height:15px;fill:currentColor;transition:transform .34s var(--ease)}
.door:hover .door__go svg{transform:translateX(5px)}

/* ---------- why us ------------------------------------------------------ */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;
     background:var(--hairline);border:1px solid var(--hairline);border-radius:4px;overflow:hidden}
.why__item{background:var(--canvas);padding:clamp(1.4rem,2.6vw,2rem);display:grid;gap:.6rem;align-content:start}
.why__n{font:500 .72rem/1 var(--mono);color:var(--accent);letter-spacing:.14em}
.why__item h3{margin:0;font-size:1.16rem}
.why__item p{color:var(--text-secondary);font-size:.965rem;margin:0}

/* ---------- build process + the spec builder ---------------------------- */
.process{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:960px){.process{grid-template-columns:1fr}}

.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{
  position:relative;counter-increment:s;padding:0 0 1.9rem 3.4rem;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:-.1rem;
  font:500 .78rem/1 var(--mono);color:var(--accent);
  width:2.2rem;height:2.2rem;display:grid;place-items:center;
  border:1px solid var(--accent-muted);border-radius:50%;
}
.steps li::after{
  content:"";position:absolute;left:1.1rem;top:2.2rem;bottom:.35rem;width:1px;
  background:var(--hairline);
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{margin:0 0 .3rem;font-size:1.1rem}
.steps p{color:var(--text-secondary);font-size:.95rem;margin:0}

/* the technical elevation: the signature element */
/* Not sticky. The spec panel is its sibling in the same column, so a sticky
   elevation stays pinned while the panel scrolls up underneath and the drawing
   lands on top of the controls. */
.elev{position:relative}
.elev svg{width:100%;height:auto;overflow:visible}
.elev .body,.elev .chassis,.elev .hatch,.elev .wheel{
  fill:none;stroke:var(--steel);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
}
.elev.drawn .body,.elev.drawn .chassis,.elev.drawn .hatch,.elev.drawn .wheel{stroke-dashoffset:0}
.elev .body{transition:stroke-dashoffset 1.5s var(--ease-out)}
.elev .chassis{transition:stroke-dashoffset 1.2s var(--ease-out) .35s}
.elev .hatch{transition:stroke-dashoffset .9s var(--ease-out) .8s}
.elev .wheel{transition:stroke-dashoffset .8s var(--ease-out) 1s}
.elev .dim{stroke:var(--accent);stroke-width:1.1;opacity:0;transition:opacity .6s var(--ease) 1.3s}
.elev.drawn .dim{opacity:.85}
.elev .lbl{font:500 11px/1 var(--mono);fill:var(--steel);opacity:0;
           transition:opacity .6s var(--ease) 1.45s}
.elev.drawn .lbl{opacity:1}
.elev .fill{fill:rgba(143,163,184,.07);stroke:none;opacity:0;transition:opacity .8s var(--ease) .6s}
.elev.drawn .fill{opacity:1}

.spec{margin-top:1.8rem;border:1px solid var(--hairline);border-radius:4px;
      background:var(--panel);padding:clamp(1.1rem,2.4vw,1.6rem)}
.spec__row{display:grid;gap:.5rem;margin-bottom:1.1rem}
.spec__row:last-of-type{margin-bottom:1.3rem}
.spec__row > span{font:500 .7rem/1 var(--mono);letter-spacing:.14em;
                  text-transform:uppercase;color:var(--steel)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  padding:.5rem .85rem;border:1px solid var(--hairline-strong);border-radius:3px;
  background:transparent;cursor:pointer;font-size:.9rem;color:var(--text-secondary);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.chip:hover{border-color:var(--steel);color:var(--text-primary)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-muted);color:#fff}
.spec__out{font:500 .82rem/1.5 var(--mono);color:var(--text-secondary);
           border-top:1px solid var(--hairline);padding-top:1rem;margin-bottom:1.1rem}
.spec__out b{color:var(--text-primary);font-weight:500}

/* ---------- gallery ----------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:clamp(.8rem,1.8vw,1.3rem)}
.gal figure{margin:0;border:1px solid var(--hairline);border-radius:4px;overflow:hidden;
            background:var(--panel);transition:border-color .35s var(--ease),transform .45s var(--ease-out)}
.gal figure:hover{border-color:var(--hairline-strong);transform:translateY(-3px)}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gal figcaption{padding:.85rem 1rem;font-size:.9rem;color:var(--text-secondary);
                display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.gal .tag{font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
          color:var(--steel);white-space:nowrap}

/* ---------- testimonials + reviews -------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.1rem}
.quote{border:1px solid var(--hairline);border-left:3px solid var(--accent);
       border-radius:0 4px 4px 0;padding:clamp(1.3rem,2.6vw,1.8rem);background:var(--panel)}
.quote blockquote{margin:0 0 1rem;font-size:1.04rem;color:var(--text-primary)}
.quote figcaption{font-size:.9rem;color:var(--text-secondary)}
.quote cite{font-style:normal;font-weight:600;color:var(--text-primary);display:block}

/* the honest empty state for review blocks with nothing real in them yet */
.placeholder{
  border:1px dashed var(--hairline-strong);border-radius:4px;
  padding:clamp(1.5rem,3.5vw,2.6rem);text-align:center;color:var(--text-secondary);
  background:rgba(143,163,184,.04);
}
.placeholder b{display:block;color:var(--text-primary);font-family:var(--display);
               font-size:1.15rem;margin-bottom:.4rem}

.stars{display:inline-flex;gap:.14rem;vertical-align:-2px}
.stars svg{width:15px;height:15px;fill:#F5A623}

/* ---------- FAQ --------------------------------------------------------- */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.3rem 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-hover)}
.faq summary::after{
  content:"";flex:none;width:13px;height:13px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq .ans{padding:0 0 1.4rem;color:var(--text-secondary);max-width:70ch}

/* ---------- areas ------------------------------------------------------- */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.7rem}
.area{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.25rem;border:1px solid var(--hairline);border-radius:3px;
  text-decoration:none;transition:border-color .3s var(--ease),background .3s var(--ease),
                                  transform .35s var(--ease);
}
.area:hover{border-color:var(--accent);background:var(--accent-muted);transform:translateX(3px)}
.area b{font-family:var(--display);font-weight:700;font-size:1.04rem}
.area span{font:500 .68rem/1 var(--mono);color:var(--steel);letter-spacing:.1em;text-transform:uppercase}

/* ---------- final CTA --------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--canvas-deep);
     border-top:1px solid var(--hairline)}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0%,rgba(222,0,15,.15),transparent 68%);
}
.cta__in{position:relative;text-align:center;display:grid;justify-items:center;gap:1.15rem}
.cta h2{max-width:19ch;margin:0}
.cta p{max-width:52ch;color:var(--text-secondary);margin:0}

/* ---------- forms ------------------------------------------------------- */
.form{display:grid;gap:1.4rem}
.field{display:grid;gap:.45rem}
.field label{font:600 .93rem/1.3 var(--body)}
.field .hint{font-size:.85rem;color:var(--text-secondary)}
.field .req{color:var(--accent)}
.input,.select,.textarea{
  width:100%;padding:.82rem 1rem;background:var(--canvas-deep);
  border:1px solid var(--hairline-strong);border-radius:3px;color:var(--text-primary);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.input:hover,.select:hover,.textarea:hover{border-color:var(--steel)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-muted)}
.textarea{min-height:150px;resize:vertical}
.select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238FA3B8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
  padding-right:2.6rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}

.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{
  display:block;padding:.62rem 1rem;border:1px solid var(--hairline-strong);
  border-radius:3px;font-size:.93rem;color:var(--text-secondary);
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.opt input:hover + span{border-color:var(--steel);color:var(--text-primary)}
.opt input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.opt input:checked + span{border-color:var(--accent);background:var(--accent-muted);color:#fff}

.drop{
  border:1px dashed var(--hairline-strong);border-radius:4px;padding:1.6rem 1.2rem;
  text-align:center;color:var(--text-secondary);cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-muted);color:var(--text-primary)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.thumbs{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem}
.thumb{position:relative;width:74px;height:74px;border-radius:3px;overflow:hidden;
       border:1px solid var(--hairline-strong)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:2px;right:2px;width:19px;height:19px;border:0;
              border-radius:2px;background:rgba(7,19,32,.85);color:#fff;cursor:pointer;
              font-size:12px;line-height:1;display:grid;place-items:center}

/* multi-step */
.stepper{display:flex;gap:.4rem;margin-bottom:2rem;flex-wrap:wrap}
.stepper__i{
  flex:1 1 0;min-width:70px;display:grid;gap:.45rem;
  font:500 .66rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
}
.stepper__i::before{content:"";height:3px;border-radius:2px;background:var(--hairline);
                    transition:background .4s var(--ease)}
.stepper__i.done::before{background:var(--steel)}
.stepper__i.now::before{background:var(--accent)}
.stepper__i.now{color:var(--text-primary)}

.step{display:none}
.step.now{display:grid;gap:1.4rem;animation:stepIn .45s var(--ease-out) both}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.form__nav{display:flex;justify-content:space-between;gap:.8rem;
           border-top:1px solid var(--hairline);padding-top:1.4rem}

.note{padding:1rem 1.15rem;border-radius:3px;font-size:.94rem}
.note--ok{background:rgba(31,168,85,.14);border:1px solid rgba(31,168,85,.42)}
.note--bad{background:var(--accent-muted);border:1px solid rgba(222,0,15,.5)}
.err{color:#FF7A85;font-size:.87rem}

/* ---------- footer ------------------------------------------------------ */
.foot{background:var(--canvas-deep);border-top:1px solid var(--hairline);
      padding-block:clamp(2.8rem,5vw,4.2rem) 1.6rem}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.6rem,3.5vw,3rem)}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot h4{font-size:.76rem;font-family:var(--mono);font-weight:500;letter-spacing:.16em;
         text-transform:uppercase;color:var(--steel);margin:0 0 1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot a{color:var(--text-secondary);text-decoration:none;font-size:.95rem;
        transition:color .25s var(--ease)}
.foot a:hover{color:var(--accent-hover)}
.foot__brand img{width:210px;margin-bottom:1.1rem}
.foot__brand p{color:var(--text-secondary);font-size:.95rem;max-width:36ch}
.foot__legal{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--hairline);
             display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
             font-size:.86rem;color:var(--steel)}
.foot__legal p{margin:0}
.foot__notice{font-size:.82rem;color:var(--steel);opacity:.8;max-width:70ch;margin-top:.5rem}

/* ---------- sticky mobile CTA ------------------------------------------ */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  gap:1px;background:var(--hairline);
  border-top:1px solid var(--hairline);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.sticky.up{transform:translateY(0)}
.sticky a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem .5rem;text-decoration:none;font:600 .95rem/1 var(--body);
  background:var(--canvas-deep);color:var(--text-primary);
}
.sticky a svg{width:17px;height:17px;fill:currentColor}
.sticky .s-call{background:var(--panel)}
.sticky .s-wa{background:#1FA855;color:#fff}
.sticky .s-quote{background:var(--accent);color:#fff}
@media (max-width:900px){.sticky{display:flex}body{padding-bottom:0}}

/* ---------- entrance choreography -------------------------------------- */
.rise{opacity:0;transform:translateY(22px);
      transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.rise.in{opacity:1;transform:none}
.rise.in .stagger > *{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(16px);
             transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.rise.in .stagger > *:nth-child(1){transition-delay:.05s}
.rise.in .stagger > *:nth-child(2){transition-delay:.13s}
.rise.in .stagger > *:nth-child(3){transition-delay:.21s}
.rise.in .stagger > *:nth-child(4){transition-delay:.29s}
.rise.in .stagger > *:nth-child(5){transition-delay:.37s}
.rise.in .stagger > *:nth-child(6){transition-delay:.45s}
/* retire the delays once the entrance is done, or every later hover lags
   forever. The selector must beat the nth-child rules above. */
.rise.in.settled .stagger > *:nth-child(n){transition-delay:0s !important}

/* ---------- reduced motion --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  .rise{opacity:1}
  .stagger > *{opacity:1}
  .elev .body,.elev .chassis,.elev .hatch,.elev .wheel{stroke-dashoffset:0}
  .elev .dim,.elev .lbl,.elev .fill{opacity:1}
  /* positional transforms are re-applied, never blanket-killed, or mobile
     elements land off screen */
  .rise,.stagger > *{transform:none}
  .sticky.up{transform:translateY(0)}
  .sticky{transform:translateY(110%)}
}

/* ---------- coarse pointers -------------------------------------------- */
@media (pointer:coarse){
  .btn{min-height:44px}
  .chip,.opt span{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav__list a{min-height:44px;display:flex;align-items:center}
  .faq summary{min-height:44px}
}

/* ---------- print ------------------------------------------------------- */
@media print{
  .masthead,.sticky,.hero,.env,.cta{display:none !important}
  body{background:#fff;color:#000}
}

/* ---------- long-form article prose ------------------------------------ */
.prose{max-width:70ch}
.prose > *{max-width:68ch}
.prose h2{
  font-size:clamp(1.42rem,1.18rem + 1.1vw,2rem);
  margin:2.6rem 0 .8rem;padding-top:1.6rem;
  border-top:1px solid var(--hairline);position:relative;
}
.prose h2::before{content:"";position:absolute;top:-1px;left:0;width:52px;height:3px;background:var(--accent)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h2:first-child::before{display:none}
.prose h3{font-size:clamp(1.08rem,1rem + .5vw,1.28rem);margin:1.9rem 0 .5rem}
.prose p{color:var(--text-secondary);margin:0 0 1.15em}
.prose strong{color:var(--text-primary);font-weight:600}
.prose em{color:var(--text-primary)}
.prose a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:.2em}
.prose a:hover{color:var(--text-primary)}
.prose ul,.prose ol{color:var(--text-secondary);margin:0 0 1.3em;padding-left:1.3rem}
.prose li{margin-bottom:.55em;padding-left:.25rem}
.prose li::marker{color:var(--accent)}
.prose ol{counter-reset:p}
.prose ol li{list-style:none;counter-increment:p;position:relative;padding-left:2.2rem}
.prose ol li::before{
  content:counter(p);position:absolute;left:0;top:.1em;
  width:1.55rem;height:1.55rem;display:grid;place-items:center;
  border:1px solid var(--accent-muted);border-radius:50%;
  font:500 .72rem/1 var(--mono);color:var(--accent);
}

/* wide content scrolls inside its own box; the page never scrolls sideways */
.tablewrap{overflow-x:auto;margin:0 0 1.6em;border:1px solid var(--hairline);border-radius:4px;
           -webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:.94rem}
.prose caption{text-align:left;padding:.9rem 1rem .2rem;font:500 .72rem/1.4 var(--mono);
               letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.prose th,.prose td{padding:.8rem 1rem;text-align:left;vertical-align:top;
                    border-bottom:1px solid var(--hairline)}
.prose thead th{font:500 .7rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
                color:var(--steel);background:var(--panel);white-space:nowrap}
.prose tbody td{color:var(--text-secondary)}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody td:nth-child(2){color:var(--text-primary);font-family:var(--mono);
                             font-size:.88rem;white-space:nowrap}

.callout{
  border-left:3px solid var(--accent);background:var(--panel);
  border-radius:0 4px 4px 0;padding:1.15rem 1.3rem;margin:1.8em 0;
}
.callout p{margin:0;color:var(--text-secondary)}
.callout strong{color:var(--text-primary)}