/* ══════════════════════════════════════════════════════════════
   ACE JUNK REMOVAL — Las Vegas
   Identity: card-table felt green + card red + desert bone.
   A committed single-look brand page — every color painted explicitly.
   ══════════════════════════════════════════════════════════════ */

:root{
  color-scheme: only light;

  /* ── Color ── */
  --felt:      #0B4232;   /* card-table felt — the dark ground */
  --felt-deep: #06291F;   /* deeper felt, footer */
  --felt-line: #1B5A46;   /* hairlines on felt */
  --ink:       #16211C;   /* green-biased near-black */
  --bone:      #F3F0E7;   /* paper / card stock */
  --bone-2:    #E9E4D6;   /* second surface */
  --bone-line: #D6CFBC;
  --mute:      #6C7A73;   /* green-biased grey */
  --ace:       #C4202E;   /* card red — the accent */
  --ace-dark:  #9C1622;
  --gold:      #D2A02A;   /* desert gold, used sparingly */

  /* ── Type ── */
  --f-disp: "Big Shoulders Display","Segoe UI Black","Arial Narrow",Impact,sans-serif;
  --f-body: "Archivo","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --f-mono: "DM Mono",ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;

  /* ── Scale ── */
  --s1: .74rem; --s2: .84rem; --s3: .95rem; --s4: 1.06rem;
  --s5: 1.4rem; --s6: 1.95rem; --s7: 2.9rem;

  --pad:  clamp(1.1rem, 4vw, 2.5rem);
  --band: clamp(3.6rem, 7vw, 6.5rem);
  --max:  1180px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: 88px; }

body{
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--s4);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3{
  font-family: var(--f-disp);
  font-weight: 800;
  letter-spacing: -.005em;
  line-height: .94;
  text-wrap: balance;
  margin: 0;
}

p{ margin: 0; }
ul,ol{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; }
img,svg{ max-width: 100%; }

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

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

.skip{
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--ace); color: #fff; padding: .7rem 1.1rem; font-weight: 700;
}
.skip:focus{ left: .5rem; top: .5rem; }

/* ─────────── Shared ─────────── */

.eyebrow{
  font-family: var(--f-mono);
  font-size: var(--s1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.eyebrow-dark{ color: var(--ace); }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-body); font-weight: 700; font-size: var(--s3);
  padding: .92rem 1.5rem;
  border: 2px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn-red{ background: var(--ace); color: #fff; border-color: var(--ace); }
.btn-red:hover{ background: var(--ace-dark); border-color: var(--ace-dark); }

.btn-ghost{ background: transparent; color: var(--bone); border-color: rgba(243,240,231,.42); }
.btn-ghost:hover{ background: rgba(243,240,231,.1); border-color: var(--bone); }

.btn-bone{ background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn-bone:hover{ background: #fff; border-color: #fff; }

.btn-outline-bone{ background: transparent; color: var(--bone); border-color: rgba(243,240,231,.5); }
.btn-outline-bone:hover{ background: rgba(243,240,231,.12); border-color: var(--bone); }

.btn-sm{ padding: .62rem 1.05rem; font-size: var(--s2); }
.btn-block{ width: 100%; }

.shead{ max-width: 42ch; margin-bottom: clamp(2rem,4vw,3rem); display: flex; flex-direction: column; gap: .65rem; }
.shead h2{ font-size: var(--s7); }
.shead-sub{ color: var(--mute); font-size: var(--s4); max-width: 46ch; }

.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity: 1; transform: none; }

/* ═══════════ HEADER ═══════════ */

.hdr{ position: sticky; top: 0; z-index: 60; background: var(--felt); border-bottom: 1px solid var(--felt-line); }
.hdr-in{
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: .75rem var(--pad);
  display: flex; align-items: center; gap: 1.25rem;
}

.brand{ display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; }
.brand-pip{ width: 32px; height: 32px; display: block; flex: 0 0 auto; }
.brand-pip svg{ width: 100%; height: 100%; fill: var(--bone); display: block; }
.brand-txt{ display: flex; flex-direction: column; line-height: 1; }
.brand-name{
  font-family: var(--f-disp); font-weight: 900; font-size: 1.65rem;
  letter-spacing: .01em; color: var(--bone); text-transform: uppercase;
}
.brand-sub{
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-top: .2rem;
}

.nav{ display: flex; gap: 1.4rem; margin-left: auto; }
.nav a{
  color: rgba(243,240,231,.82); text-decoration: none;
  font-size: var(--s2); font-weight: 600;
  padding: .35rem 0; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover{ color: var(--bone); border-bottom-color: var(--ace); }

.hdr-cta{ display: flex; align-items: center; gap: .9rem; margin-left: .5rem; }
.tel{ text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.tel-lbl{ font-family: var(--f-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,240,231,.6); }
.tel-num{ font-family: var(--f-disp); font-weight: 800; font-size: 1.2rem; color: var(--bone); }
.tel:hover .tel-num{ color: var(--gold); }

.burger{
  display: none; margin-left: auto;
  width: 44px; height: 40px; background: transparent;
  border: 1px solid var(--felt-line); border-radius: 2px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer;
}
.burger span{ display: block; width: 20px; height: 2px; background: var(--bone); }

.mnav{ display: none; flex-direction: column; border-top: 1px solid var(--felt-line); padding: .5rem var(--pad) 1rem; }
.mnav a{ color: var(--bone); text-decoration: none; font-weight: 600; padding: .72rem 0; border-bottom: 1px solid rgba(27,90,70,.7); }
.mnav-call{ color: var(--gold); border-bottom: 0; }

@media (max-width: 980px){
  .nav, .hdr-cta{ display: none; }
  .burger{ display: flex; }
  .mnav[data-open="1"]{ display: flex; }
}

/* ═══════════ HERO ═══════════ */

.hero{
  position: relative;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(210,160,42,.13), transparent 58%),
    linear-gradient(180deg, #0C4936 0%, var(--felt) 46%, #083426 100%);
  color: var(--bone);
  overflow: hidden;
  padding: clamp(2.6rem,5vw,4.2rem) 0 clamp(3rem,5vw,4.4rem);
}

.hero-ridge{ position: absolute; left: 0; right: 0; bottom: 0; height: 128px; pointer-events: none; }
.hero-ridge svg{ width: 100%; height: 100%; display: block; }
.hero-ridge path{ fill: rgba(3,26,19,.5); }

.hero-in{
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem,5vw,4rem); align-items: center;
}

.hero-copy{ display: flex; flex-direction: column; gap: 1.3rem; align-items: flex-start; }

.hero h1{
  font-size: clamp(2.9rem, 6.2vw, 4.9rem);
  font-weight: 900;
  line-height: .88;
  text-transform: uppercase;
  margin: .2rem 0 0;
}
.hero h1 em{
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px var(--gold);
  paint-order: stroke fill;
}

.hero-lede{ font-size: var(--s5); line-height: 1.45; color: rgba(243,240,231,.87); max-width: 34ch; }
.hero-btns{ display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-marks{ display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; padding-top: .4rem; }
.hero-marks li{
  font-family: var(--f-mono); font-size: var(--s1); letter-spacing: .04em;
  color: rgba(243,240,231,.72); display: flex; align-items: center; gap: .45rem;
}
.hero-marks li::before{ content: "✓"; color: var(--gold); font-family: var(--f-body); font-weight: 700; }

/* ── SIGNATURE: the truckload gauge ── */

.gauge{
  background: rgba(4,32,24,.62);
  border: 1px solid var(--felt-line);
  border-radius: 3px;
  padding: clamp(1.15rem,2.6vw,1.8rem);
  display: flex; flex-direction: column; gap: .9rem;
}
.gauge-head{ display: flex; flex-direction: column; gap: .3rem; }
.gauge-title{ font-size: var(--s5); text-transform: uppercase; color: var(--bone); }
.gauge-note{ font-size: var(--s2); color: rgba(243,240,231,.62); }

.bed{ background: rgba(0,0,0,.18); border-radius: 2px; padding: .5rem .3rem 0; }
.bed-svg{ width: 100%; height: auto; display: block; }
.bed-load{ fill: var(--gold); opacity: .16; }
.bed-junk rect{ fill: var(--gold); opacity: .85; }
.bed-line{ fill: none; stroke: var(--bone); stroke-width: 2.4; stroke-linejoin: round; }
.bed-wheel{ fill: #04201a; stroke: var(--bone); stroke-width: 2.4; }
.bed-hub{ fill: var(--bone); }
.bed-ground{ stroke: rgba(243,240,231,.3); stroke-width: 2; stroke-dasharray: 6 8; }

.gauge-scope{ display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--felt-line); }
.gauge-scope li{
  padding: .55rem 0; border-bottom: 1px solid var(--felt-line);
  font-family: var(--f-mono); font-size: var(--s2); color: rgba(243,240,231,.8);
  display: flex; align-items: center; gap: .55rem;
}
.gauge-scope li::before{ content: "✓"; color: var(--gold); font-family: var(--f-body); font-weight: 700; }
.gauge-scope li:last-child{ color: var(--bone); }

.gauge-fine{ font-size: var(--s1); color: rgba(243,240,231,.5); line-height: 1.5; }

/* ═══════════ CALL CARD ═══════════ */

.callcard{
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  background: var(--ace); color: #fff; text-decoration: none;
  border: 2px solid var(--ace); border-radius: 3px;
  padding: 1rem 1.2rem 1.1rem; text-align: center;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.callcard:hover{ background: var(--ace-dark); border-color: var(--ace-dark); transform: translateY(-2px); }
.callcard-lbl{
  font-family: var(--f-mono); font-size: var(--s1); letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
}
.callcard-num{
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.05;
  letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Gold on card-red is muddy, so the tag stays bone on the solid card
   and the gold only comes back on the felt-ground variant below. */
.callcard-tag{
  font-family: var(--f-mono); font-size: var(--s1); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.88); margin-top: .3rem;
}
.callcard-lg{ padding: 1.7rem 1.6rem 1.8rem; }
.callcard-lg .callcard-num{ font-size: clamp(2.3rem, 5.4vw, 3.6rem); }

/* On the felt hero the solid red card would fight the red CTA button
   beside it, so this variant carries the same weight in gold instead. */
.callcard-quiet{ background: transparent; border-color: var(--gold); color: var(--gold); }
.callcard-quiet .callcard-lbl{ color: rgba(243,240,231,.7); }
.callcard-quiet .callcard-tag{ color: rgba(243,240,231,.78); }
.callcard-quiet:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink); }
.callcard-quiet:hover .callcard-lbl,
.callcard-quiet:hover .callcard-tag{ color: rgba(22,33,28,.8); }

@media (max-width: 940px){ .hero-in{ grid-template-columns: 1fr; } }

/* ═══════════ PRICE PROMISE ═══════════ */

.guar{ position: relative; overflow: hidden; background: var(--ace); color: var(--bone); padding: var(--band) 0; }
.guar-mark{
  position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  width: min(46vw, 460px); opacity: .07; pointer-events: none;
}
.guar-mark svg{ width: 100%; height: 100%; fill: #fff; display: block; }

.guar-in{
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad);
  display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start;
}
.guar-eyebrow{ font-family: var(--f-mono); font-size: var(--s1); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.guar-head{ font-size: clamp(2.4rem,6vw,4.4rem); font-weight: 900; text-transform: uppercase; }
.guar-head em{ font-style: normal; color: var(--ink); }
.guar-sub{ font-size: var(--s5); line-height: 1.5; max-width: 48ch; color: rgba(255,255,255,.93); }

.guar-steps{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; width: 100%; margin: 1.4rem 0 .6rem; }
.guar-steps li{ display: flex; flex-direction: column; gap: .4rem; border-top: 2px solid rgba(255,255,255,.35); padding-top: .9rem; }
.gs-n{ font-family: var(--f-mono); font-size: var(--s1); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.guar-steps h3{ font-size: var(--s5); text-transform: uppercase; }
.guar-steps p{ font-size: var(--s3); color: rgba(255,255,255,.88); line-height: 1.55; }

.guar-btns{ display: flex; flex-wrap: wrap; gap: .75rem; }
.guar-fine{ font-size: var(--s1); color: rgba(255,255,255,.72); max-width: 62ch; }

@media (max-width: 780px){ .guar-steps{ grid-template-columns: 1fr; gap: 1.1rem; } }

/* ═══════════ WHAT WE TAKE ═══════════ */

.takes{ padding: var(--band) 0; background: var(--bone); }

.take-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 0;
  border-top: 1px solid var(--bone-line); border-left: 1px solid var(--bone-line);
}
.take-grid li{
  border-right: 1px solid var(--bone-line); border-bottom: 1px solid var(--bone-line);
  padding: 1.15rem 1.2rem 1.3rem;
  display: flex; flex-direction: column; gap: .3rem;
  transition: background-color .18s ease;
}
.take-grid li:hover{ background: var(--bone-2); }
.ti{ font-family: var(--f-disp); font-weight: 800; font-size: 1.22rem; text-transform: uppercase; }
.td{ font-size: var(--s2); color: var(--mute); line-height: 1.5; }

/* ═══════════ SERVICES ═══════════ */

.svcs{ padding: var(--band) 0; background: var(--bone-2); }
.svc-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(255px,1fr)); gap: 1px; background: var(--bone-line); border: 1px solid var(--bone-line); }
.svc{ background: var(--bone); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.svc h3{ font-size: var(--s5); text-transform: uppercase; }
.svc p{ font-size: var(--s3); color: var(--mute); line-height: 1.6; }

/* ═══════════ ONE CALL ═══════════ */

.onecall{ padding: var(--band) 0; background: var(--bone); }
.onecall-in{
  display: grid; grid-template-columns: 1.35fr .65fr;
  gap: clamp(2rem,5vw,4rem); align-items: center;
}
.onecall-copy{ display: flex; flex-direction: column; gap: 1rem; }
.onecall-copy h2{ font-size: var(--s7); text-transform: uppercase; }
.onecall-copy p{ font-size: var(--s4); color: var(--mute); max-width: 54ch; }
.onecall-copy .onecall-sub{ color: var(--ink); font-weight: 600; }

@media (max-width: 860px){ .onecall-in{ grid-template-columns: 1fr; } }

/* ═══════════ SERVICE AREA ═══════════ */

.areas{ padding: var(--band) 0; background: var(--felt); color: var(--bone); }
.areas-in{ display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.areas-copy{ display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.areas-copy h2{ font-size: var(--s7); text-transform: uppercase; }
.areas-copy p{ color: rgba(243,240,231,.8); max-width: 40ch; }

/* Borders on the cells, not gaps on the grid — an unfilled final cell
   would otherwise show up as a stray colored block. */
.areas-list{
  display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  border-top: 1px solid var(--felt-line); border-left: 1px solid var(--felt-line);
}
.areas-list li{
  padding: .8rem .9rem;
  border-right: 1px solid var(--felt-line); border-bottom: 1px solid var(--felt-line);
  font-family: var(--f-mono); font-size: var(--s2); color: rgba(243,240,231,.88);
}

@media (max-width: 860px){ .areas-in{ grid-template-columns: 1fr; } }

/* ═══════════ CREDENTIALS ═══════════ */

.creds{ padding: clamp(2.4rem,5vw,3.6rem) 0; background: var(--ink); color: var(--bone); }
.cred-grid{ display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 1.6rem; }
.cred{ display: flex; flex-direction: column; gap: .3rem; }
.cred b{ font-family: var(--f-disp); font-weight: 800; font-size: 1.22rem; text-transform: uppercase; color: var(--gold); }
.cred span{ font-size: var(--s2); color: rgba(243,240,231,.72); line-height: 1.5; }

/* ═══════════ REVIEWS (markup lives commented-out in index.html) ═══════════ */

.revs{ padding: var(--band) 0; background: var(--bone); }
.rev-grid{ display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1.4rem; }
.rev{ margin: 0; background: var(--bone-2); border-top: 3px solid var(--ace); padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .9rem; }
.rev blockquote{ margin: 0; font-size: var(--s3); line-height: 1.6; }
.rev figcaption{ font-family: var(--f-mono); font-size: var(--s1); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.rev figcaption span{ display: block; color: var(--ace); margin-top: .2rem; }

/* ═══════════ QUOTE ═══════════ */

.quote{ padding: var(--band) 0; background: var(--bone-2); }
.quote-in{ display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem,5vw,3.5rem); align-items: start; }
.quote-copy{ display: flex; flex-direction: column; gap: 1rem; }
.quote-copy .eyebrow{ color: var(--ace); }
.quote-copy h2{ font-size: var(--s7); text-transform: uppercase; }
.quote-lede{ color: var(--mute); max-width: 42ch; }

.quote-facts{ display: flex; flex-direction: column; gap: 0; margin-top: .6rem; border-top: 1px solid var(--bone-line); }
.quote-facts li{ display: flex; gap: 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--bone-line); }
.quote-facts span{ font-family: var(--f-mono); font-size: var(--s1); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); flex: 0 0 8.5rem; }
.quote-facts strong{ font-size: var(--s3); }
.quote-facts a{ color: var(--ace); text-decoration: none; }
.quote-facts a:hover{ text-decoration: underline; }

.qform{ background: var(--bone); border: 1px solid var(--bone-line); padding: clamp(1.2rem,3vw,1.9rem); display: flex; flex-direction: column; gap: .9rem; }
.qf-row{ display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.qf-field{ display: flex; flex-direction: column; gap: .35rem; }
/* Two-line labels would otherwise push their input out of line with the
   field beside it — the min-height keeps every row of inputs level. */
.qf-field label{
  font-family: var(--f-mono); font-size: var(--s1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--mute);
  display: flex; align-items: flex-end; gap: .4rem; flex-wrap: wrap;
  min-height: 2.3em; line-height: 1.2;
}
.qf-field .opt{ text-transform: none; letter-spacing: 0; color: var(--bone-line); }
.qf-field input, .qf-field select, .qf-field textarea{
  font-family: var(--f-body); font-size: var(--s3); color: var(--ink);
  background: var(--bone-2); border: 1px solid var(--bone-line); border-radius: 2px;
  padding: .7rem .8rem; width: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}
.qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus{ background: #fff; border-color: var(--ace); outline-offset: 1px; }
.qf-field textarea{ resize: vertical; min-height: 96px; }

.qf-consent{ display: flex; gap: .6rem; align-items: flex-start; margin: .2rem 0 .3rem; }
.qf-consent input{ margin-top: .25rem; width: 17px; height: 17px; accent-color: var(--ace); flex: 0 0 auto; }
.qf-consent label{ font-size: var(--s2); color: var(--mute); line-height: 1.5; }

.qf-status{ font-size: var(--s2); min-height: 1.2em; font-weight: 600; }
.qf-status[data-tone="ok"]{ color: #1E7A57; }
.qf-status[data-tone="err"]{ color: var(--ace); }
.qf-fine{ font-size: var(--s1); color: var(--mute); }

@media (max-width: 860px){ .quote-in{ grid-template-columns: 1fr; } }
@media (max-width: 560px){ .qf-row{ grid-template-columns: 1fr; } }

/* ═══════════ FAQ ═══════════ */

.faq{ padding: var(--band) 0; background: var(--bone); }
.faq-list{ border-top: 1px solid var(--bone-line); max-width: 78ch; }
.faq details{ border-bottom: 1px solid var(--bone-line); }
.faq summary{
  cursor: pointer; list-style: none;
  padding: 1.05rem 2.2rem 1.05rem 0; position: relative;
  font-family: var(--f-disp); font-weight: 800; font-size: 1.28rem; text-transform: uppercase;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 1.3rem; color: var(--ace); line-height: 1;
}
.faq details[open] summary::after{ content: "–"; }
.faq details > div{ padding: 0 2.2rem 1.15rem 0; }
.faq details p{ font-size: var(--s3); color: var(--mute); line-height: 1.65; }

/* ═══════════ CLOSING BAND ═══════════ */

.band{ background: var(--felt); color: var(--bone); padding: clamp(2.8rem,6vw,4.4rem) 0; border-top: 1px solid var(--felt-line); }
.band-in{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.band-copy{ display: flex; flex-direction: column; gap: .5rem; }
.band-in h2{ font-size: clamp(2.1rem,5vw,3.4rem); text-transform: uppercase; }
.band-copy p{ font-size: var(--s4); color: rgba(243,240,231,.82); }
.band-btns{ display: flex; flex-wrap: wrap; gap: .75rem; }

/* ═══════════ FOOTER ═══════════ */

.foot{ background: var(--felt-deep); color: var(--bone); padding: clamp(2.6rem,5vw,4rem) 0 1.5rem; }
.foot-in{ display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 2rem; }
.foot-brand{ display: flex; flex-direction: column; gap: .9rem; }
.foot-brand p{ font-size: var(--s2); color: rgba(243,240,231,.62); max-width: 34ch; line-height: 1.6; }
.foot-col h3{ font-family: var(--f-mono); font-weight: 500; font-size: var(--s1); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.foot-col ul{ display: flex; flex-direction: column; gap: .45rem; }
.foot-col li, .foot-col a{ font-size: var(--s2); color: rgba(243,240,231,.75); text-decoration: none; }
.foot-col a:hover{ color: var(--bone); text-decoration: underline; }

.foot-bot{
  margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(27,90,70,.6);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
}
.foot-bot p{ font-family: var(--f-mono); font-size: var(--s1); color: rgba(243,240,231,.5); }

@media (max-width: 860px){ .foot-in{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .foot-in{ grid-template-columns: 1fr; } }

/* ═══════════ MOBILE CALL BUTTON ═══════════ */

.fab{
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 70;
  display: none; align-items: center; justify-content: center; gap: .55rem;
  background: var(--ace); color: #fff; text-decoration: none;
  font-weight: 700; padding: .95rem; border-radius: 3px;
  box-shadow: 0 8px 26px rgba(0,0,0,.3);
}
.fab svg{ width: 19px; height: 19px; fill: currentColor; }

@media (max-width: 700px){
  .fab{ display: flex; }
  body{ padding-bottom: 4.6rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal{ opacity: 1; transform: none; }
}