/* ==========================================================================
   Snyder Car Services — stylesheet
   Dependency-free. No CDN, no external fonts, no build step.
   Edit colors in :root below; everything else follows.
   ========================================================================== */

:root {
  /* Brand — deep navy ground, deep teal accent.
     Teal reads as trust (the register of finance and healthcare) but is unused
     by every major rental brand: Enterprise green, Hertz yellow, Avis red,
     Budget orange, Turo coral. Being credible and distinct at the same time.
     --accent-dk is darkened so teal passes AA as small text on white (7:1).
     --gold survives as a single fine detail, a nod to the original mark. */
  --ink:        #101C22;
  --ink-2:      #17262E;
  --ink-3:      #22343D;
  --accent:     #0F7C6B;
  --accent-hi:  #17A08A;
  --accent-dk:  #0B5D50;
  --accent-ink: #FFFFFF;
  --gold:       #B08A2E;

  /* Neutrals, biased a touch toward the accent so they read as chosen
     rather than inherited. */
  --paper:  #FFFFFF;
  --paper-2:#F5F7F6;
  --paper-3:#EBEFEE;
  --line:   #E0E5E5;
  --line-dk:#2A3F45;
  --body:   #4F5D63;
  --muted:  #6E7C83;
  /* Semantic, deliberately distinct from the teal accent. */
  --good:   #1E7A3D;
  --good-bg:#EAF6EC;
  --bad:    #B42318;

  /* Type */
  --font: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Inter, system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Scale */
  --step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.89rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.65vw, 1.85rem);
  --step-3:  clamp(1.8rem, 1.55rem + 1.2vw, 2.55rem);
  --step-4:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);

  /* Space + shape */
  --gut: clamp(1.15rem, 0.9rem + 1.4vw, 2rem);
  --max: 1180px;
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --sh-1: 0 1px 2px rgba(11, 18, 32, .06), 0 1px 3px rgba(11, 18, 32, .05);
  --sh-2: 0 4px 12px rgba(11, 18, 32, .07), 0 12px 32px rgba(11, 18, 32, .06);
  --sh-3: 0 18px 50px rgba(11, 18, 32, .16);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; letter-spacing: -.021em; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.15em; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Layout primitives ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.section--dark { background: var(--ink); color: #A7B7BC; }
.section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-bottom: .7rem;
}
.section--dark .eyebrow { color: var(--accent-hi); }

.h-lead { font-size: var(--step-3); }
.sub { font-size: var(--step-1); color: var(--muted); max-width: 62ch; margin-top: .85rem; line-height: 1.5; }
.section--dark .sub { color: #93A4A9; }
.head { max-width: 70ch; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3.25rem); }
.center { text-align: center; margin-inline: auto; }
.center .sub { margin-inline: auto; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .8em 1.5em;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 650; font-size: var(--step-0); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow: 0 1px 2px rgba(11,18,32,.12);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,124,107,.32); background: var(--accent-hi); }
.btn:active { transform: translateY(0); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { --btn-bg: var(--paper-2); box-shadow: var(--sh-1); border-color: #C7D2D0; }
.btn--on-dark { --btn-bg: rgba(255,255,255,.07); --btn-fg: #fff; border-color: rgba(255,255,255,.22); }
.btn--on-dark:hover { --btn-bg: rgba(255,255,255,.14); box-shadow: none; }
.btn--lg { padding: .95em 1.9em; font-size: var(--step-1); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }

/* --- Header --------------------------------------------------------------- */
/* The header is dark on purpose. It anchors the page top to the same ink as the
   hero and footer, so the brand bookends the site and the white content in the
   middle reads as the document rather than as decoration. */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(16,28,34,.90);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.hdr.is-stuck { border-bottom-color: rgba(255,255,255,.13); box-shadow: 0 6px 24px rgba(6,11,20,.35); }
.hdr__in { display: flex; align-items: center; gap: 1rem; min-height: 76px; }

/* ---- Logo lockup ----------------------------------------------------------
   The wordmark is real type, not an image: it stays crisp at every size,
   inverts with its surroundings via currentColor, is selectable and
   searchable, and costs no extra request. The square mark beside it is flat
   geometry with no gradients, so it survives being shrunk to a favicon.
   -------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 38px; height: 38px; flex: none; color: var(--accent-hi); }
.brand__txt { display: flex; flex-direction: column; gap: .18rem; }
.brand__name {
  font-weight: 600; color: #fff; font-size: 1.02rem;
  letter-spacing: .13em; line-height: 1;
}
/* Hairline rule between the two words, the one structural nod to the
   original logo's stacked lockup. */
.brand__tag {
  display: flex; align-items: center; gap: .45rem;
  font-size: .6rem; color: var(--accent-hi);
  letter-spacing: .2em; text-transform: uppercase; line-height: 1;
}
.brand__tag::before {
  content: ""; width: 14px; height: 1px; background: currentColor; opacity: .55; flex: none;
}

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  padding: .5rem .7rem; border-radius: var(--r-sm);
  text-decoration: none; color: #A9B5C5; font-size: .94rem; font-weight: 550;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }

.hdr__cta { display: flex; align-items: center; gap: .5rem; }
.lang {
  display: inline-flex; align-items: center; gap: .2rem;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 3px; background: rgba(255,255,255,.04);
}
.lang a {
  padding: .25rem .6rem; border-radius: 999px; text-decoration: none;
  font-size: .8rem; font-weight: 650; color: #8B9BA1;
}
.lang a[aria-current="true"] { background: var(--accent); color: #fff; }

.burger {
  display: none; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; cursor: pointer;
}
.burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; position: relative; transition: transform .2s ease; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .2s ease, opacity .15s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(-90deg); }
.burger[aria-expanded="true"] span::after  { opacity: 0; }

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .hdr__cta .btn { display: none; }
  .nav {
    position: absolute; inset: 100% 0 auto; display: none;
    flex-direction: column; align-items: stretch; gap: .1rem;
    padding: .75rem var(--gut) 1.25rem;
    background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 40px rgba(6,11,20,.5);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .8rem .25rem; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.09); }
  .nav .btn { margin-top: .9rem; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  background: var(--ink); color: #B6C2D4;
  padding-block: clamp(3.25rem, 2.5rem + 5vw, 6.5rem);
  overflow: hidden;
}
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); }
.hero::before { width: 46rem; height: 32rem; top: -14rem; right: -14rem; background: rgba(23,160,138,.20); }
.hero::after  { width: 40rem; height: 30rem; bottom: -18rem; left: -12rem; background: rgba(176,138,46,.10); }
.hero__grid {
  display: grid; gap: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { color: #fff; font-size: var(--step-4); letter-spacing: -.032em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__sub { font-size: var(--step-1); color: #9FB0C6; margin-top: 1.1rem; max-width: 46ch; line-height: 1.5; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; padding: 0; list-style: none; }
.chips li {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .4rem .85rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px; font-size: var(--step--1); color: #CBD5E1; font-weight: 550;
}
.chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* --- Quote card (in hero) ------------------------------------------------- */
.card-form {
  background: var(--paper); color: var(--body);
  border-radius: var(--r-lg); padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  box-shadow: var(--sh-3);
}
.card-form h2 { font-size: var(--step-2); }
.card-form > p { font-size: var(--step--1); color: var(--muted); margin-top: .3rem; }

.field { margin-top: 1rem; }
.field > label, .legend {
  display: block; font-size: var(--step--1); font-weight: 650; color: var(--ink); margin-bottom: .35rem;
}
.field .req { color: #B42318; }
.input, select.input, textarea.input {
  width: 100%; padding: .7em .85em;
  background: var(--paper); border: 1px solid #CBD5E1; border-radius: var(--r-sm);
  font-size: var(--step-0); line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2348546A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85em center; padding-right: 2.4em;
}
textarea.input { min-height: 5.5rem; resize: vertical; }
.input:hover { border-color: #93A4A9; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,124,107,.22); outline: none; }
.input:user-invalid { border-color: #D92D20; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }

.check { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; font-size: var(--step--1); color: var(--muted); }
.check input { width: 1.05rem; height: 1.05rem; margin-top: .18rem; flex: none; accent-color: var(--accent-dk); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: var(--step--1); color: var(--muted); margin-top: .9rem; text-align: center; }
.form-note a { color: var(--accent-dk); font-weight: 600; }
.form-msg {
  margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--r-sm);
  font-size: var(--step--1); font-weight: 550; display: none;
}
.form-msg.is-ok   { display: block; background: var(--good-bg); color: var(--good); border: 1px solid #B6DFC0; }
.form-msg.is-err  { display: block; background: #FEF3F2; color: var(--bad); border: 1px solid #FDA29B; }

/* --- Qualify strip -------------------------------------------------------- */
/* Deliberately warm against a teal site. This strip is a notice, and it has to
   interrupt rather than blend in — a teal-on-teal band would read as chrome. */
.qualify { background: #FDF7E8; border-bottom: 1px solid #E9DBB2; }
.qualify__in { display: flex; gap: 1rem; align-items: flex-start; padding-block: 1.15rem; }
.qualify__icon { flex: none; color: #9A7620; margin-top: .1rem; }
.qualify strong { color: var(--ink); }
.qualify p { font-size: var(--step--1); line-height: 1.55; }
.qualify a { color: var(--accent-dk); font-weight: 650; text-underline-offset: 3px; }

/* --- Generic grids -------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, .75rem + 1vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* --- Fleet cards ---------------------------------------------------------- */
.veh {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh-1);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.veh:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #CBD5E1; }
.veh__media {
  position: relative; aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  display: grid; place-items: center; color: #3E5273;
}
.veh__media img { width: 100%; height: 100%; object-fit: cover; }
.veh__badge {
  position: absolute; top: .75rem; left: .75rem;
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.veh__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.veh__body h3 { font-size: var(--step-1); }
.veh__cat { font-size: var(--step--1); color: var(--muted); margin-top: .15rem; }
.specs { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .75rem; }
.specs li { display: flex; align-items: center; gap: .45em; font-size: var(--step--1); color: var(--body); }
.specs svg { flex: none; color: var(--muted); }
.veh__foot { margin-top: auto; padding-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.price { line-height: 1.1; }
.price b { font-size: var(--step-2); color: var(--ink); letter-spacing: -.03em; }
.price span { display: block; font-size: var(--step--1); color: var(--muted); }

/* --- Feature / step cards ------------------------------------------------- */
.feat { padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }
.feat__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: #E7F2F0; color: var(--accent-dk); margin-bottom: 1rem;
}
.feat h3 { font-size: var(--step-1); }
.feat p { font-size: var(--step--1); margin-top: .5rem; line-height: 1.6; }

.step { position: relative; padding-left: 3.6rem; }
.step__n {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 2.55rem; height: 2.55rem;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-weight: 800; font-size: 1.05rem;
}
.step h3 { font-size: var(--step-1); }
.step p { margin-top: .4rem; font-size: var(--step--1); line-height: 1.6; }
.section--dark .step p { color: #93A4A9; }
.section--dark .step__n { background: rgba(23,160,138,.18); color: var(--accent-hi); border: 1px solid rgba(23,160,138,.42); }

/* --- Checklist ------------------------------------------------------------ */
.ticks { list-style: none; padding: 0; display: grid; gap: .8rem; }
.ticks li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--step-0); }
/* Accent, not --good: these are bullets, not status. --good stays reserved for
   the form's real success state so the two never get confused. */
.ticks svg { flex: none; margin-top: .3rem; color: var(--accent); }
.ticks strong { color: var(--ink); }
.section--dark .ticks strong { color: #fff; }
.section--dark .ticks svg { color: var(--accent-hi); }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.35rem, 1rem + 1.2vw, 2rem); box-shadow: var(--sh-1); }
.panel h3 { font-size: var(--step-1); margin-bottom: 1rem; }
.panel--flag { border-left: 4px solid var(--accent); }

/* --- Fee table ------------------------------------------------------------ */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-1); }
table { width: 100%; border-collapse: collapse; font-size: var(--step-0); min-width: 34rem; }
caption { text-align: left; padding: 1.1rem 1.25rem; font-size: var(--step--1); color: var(--muted); border-bottom: 1px solid var(--line); }
th, td { padding: .85rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--paper-2); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; }
tbody th { font-weight: 600; color: var(--ink); }
td.num { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); white-space: nowrap; }
tbody tr:last-child :is(th, td) { border-bottom: 0; }
tbody tr:hover :is(th, td) { background: #FAFBFC; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: .7rem; }
details {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1);
  transition: border-color .2s ease;
}
details[open] { border-color: #CBD5E1; }
summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
  font-weight: 650; color: var(--ink); font-size: var(--step-0);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}
details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
details > div { padding: 0 1.25rem 1.25rem; font-size: var(--step-0); }
details > div > * + * { margin-top: .7rem; }

/* --- Contact -------------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
.contact-list li { display: flex; gap: .85rem; align-items: flex-start; }
.contact-list svg { flex: none; margin-top: .25rem; color: var(--accent-hi); }
.contact-list dt { font-size: var(--step--1); color: #93A4A9; }
.contact-list dd { margin: 0; font-size: var(--step-1); color: #fff; font-weight: 600; }
.contact-list a { color: #fff; text-decoration: none; }
.contact-list a:hover { color: var(--accent); }

/* --- Footer --------------------------------------------------------------- */
.ftr { background: #0A1317; color: #7E8C91; padding-block: 3rem 2rem; font-size: var(--step--1); }
.ftr__grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr)); }
.ftr h4 { color: #fff; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .09em; margin-bottom: .9rem; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--accent); }
.ftr__bar {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
}
.ftr__legal { max-width: 62ch; line-height: 1.6; }
/* The tagline, set as type so it stays crisp and searchable. This is the one
   place gold appears — a single fine detail carried over from the old mark. */
.ftr__tag {
  color: var(--gold); font-size: .76rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: .9rem;
}
.ftr .brand__tag { color: var(--gold); }
.ftr .brand__name { color: #fff; }
.ftr .brand__tag { color: #64748B; }

/* --- Sticky mobile call bar ---------------------------------------------- */
.callbar { display: none; }
@media (max-width: 720px) {
  .callbar {
    position: fixed; inset: auto 0 0; z-index: 70;
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .callbar .btn { padding: .75em 1em; font-size: .95rem; }
  body { padding-bottom: 4.75rem; }
}

/* --- Model B (Loss Damage Waiver) toggle ---------------------------------
   Driven by data-ldw on <html>. One attribute controls every LDW mention on
   the page, so you never ship a half-updated site.
     data-ldw="off" → .ldw-on hidden, .ldw-off shown   (bring-your-own only)
     data-ldw="on"  → .ldw-on shown,  .ldw-off hidden  (both models offered)
   ------------------------------------------------------------------------- */
[data-ldw="off"] .ldw-on { display: none !important; }
[data-ldw="on"]  .ldw-off { display: none !important; }

/* --- Utility -------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -100px; left: var(--gut); z-index: 100;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: 0; }
.mt-lg { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.small { font-size: var(--step--1); color: var(--muted); }
.section--dark .small { color: #7E8CA3; }