/* =============================================================
   Windy City Towing — stylesheet
   No framework, no build step. ~1 request, cacheable forever.
   Order: tokens → reset → typography → components → sections →
          responsive → motion/print
   ============================================================= */

/* ---------- Self-hosted fonts (no third-party request, no CLS) ---------- */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:600 800;font-display:swap;
  src:url('/assets/fonts/archivo-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ---------- Design tokens ---------- */
:root{
  /* brand */
  /* Brand palette taken from the KVS Prime Services logo:
     red #D42525, navy #1E3F66, green #00873C. */
  --ink:#0A1E3D;
  --ink-2:#102A50;
  --ink-3:#1B3A66;
  --accent:#D42525;
  --accent-2:#E8523A;
  --accent-600:#AE1A1A;
  --accent-100:#FDECEC;
  --accent-on-dark:#F0706F;  /* accent text needs lifting on navy to stay legible */
  --brand-navy:#1E3F66;
  --brand-green:#00873C;
  --green-on-dark:#3BC46F;
  --chi:#4FA3E3;             /* focus ring — stays blue so it never reads as an error */
  --danger:#C81E1E;

  /* neutrals */
  --paper:#FFFFFF;
  --paper-2:#F6F8FB;
  --line:#E3E8F0;
  --text:#101828;
  --muted:#5A6679;
  --muted-light:#A7B2C4;

  /* type */
  --font-display:'Archivo','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;

  /* rhythm */
  --wrap:1200px;
  --gap:clamp(1rem,2.2vw,1.75rem);
  --section-y:clamp(3.5rem,7vw,6.5rem);
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;

  /* elevation */
  --sh-1:0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .1);
  --sh-2:0 4px 8px -2px rgb(16 24 40 / .08), 0 12px 28px -6px rgb(16 24 40 / .12);
  --sh-3:0 18px 48px -12px rgb(11 18 32 / .35);

  --header-h:64px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto;background:var(--paper-2)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  text-wrap:balance;
}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0;padding:0}
li{list-style:none}
table{border-collapse:collapse;width:100%}

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

.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-link{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--accent);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-weight:700;text-decoration:none;transition:top .2s;
}
.skip-link:focus{top:8px}

.wrap{width:min(100% - 2rem,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2rem,820px)}

.ico{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.ico--lg{width:1.6em;height:1.6em}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn{
  --btn-bg:var(--accent); --btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.85em 1.4em;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid transparent;border-radius:999px;
  font-family:var(--font-display);font-weight:700;font-size:.975rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  box-shadow:0 1px 2px rgb(16 24 40 / .1);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn--primary{--btn-bg:var(--accent);box-shadow:0 6px 20px -6px rgb(212 37 37 / .55)}
.btn--primary:hover{--btn-bg:var(--accent-600)}
.btn--dark{--btn-bg:var(--ink);--btn-fg:#fff}
.btn--outline{--btn-bg:transparent;--btn-fg:#fff;border-color:rgb(255 255 255 / .35);box-shadow:none;backdrop-filter:blur(6px)}
.btn--outline:hover{background:rgb(255 255 255 / .1)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);border-color:var(--line);box-shadow:none}
.btn--ghost:hover{background:var(--paper-2)}
.btn--ghost-light{--btn-bg:rgb(255 255 255 / .08);--btn-fg:#fff;border-color:rgb(255 255 255 / .22);box-shadow:none}
.btn--ghost-light:hover{background:rgb(255 255 255 / .16)}
.btn--lg{padding:1.05em 1.8em;font-size:1.0625rem}
.btn--sm{padding:.62em 1.05em;font-size:.9rem}
.btn--block{width:100%}

/* header call button with stacked label */
.btn--call{--btn-bg:var(--accent);--btn-fg:#fff;padding:.5em 1.15em;line-height:1.15}
.btn--call:hover{--btn-bg:var(--accent-600)}
.btn__stack{display:flex;flex-direction:column;align-items:flex-start}
.btn__stack small{font-size:.66rem;font-weight:600;opacity:.85;letter-spacing:.06em;text-transform:uppercase}
.btn__stack b{font-size:1.02rem;font-weight:800;letter-spacing:-.02em}

/* =============================================================
   HEADER
   ============================================================= */
.site-header{position:sticky;top:0;z-index:100}
.topbar{
  background:var(--ink);color:#C9D3E4;
  font-size:.8rem;letter-spacing:.01em;
}
.topbar__in{display:flex;gap:1.5rem;align-items:center;justify-content:center;padding:.5rem 0;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:.45em}
.topbar__item .ico{opacity:.7}

.pulse{
  width:8px;height:8px;border-radius:50%;background:var(--green-on-dark);flex:none;
  box-shadow:0 0 0 0 rgb(59 196 111 / .7);animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgb(59 196 111 / 0)}
  100%{box-shadow:0 0 0 0 rgb(59 196 111 / 0)}
}

.nav{
  display:flex;align-items:center;gap:1.25rem;
  min-height:var(--header-h);
}
/* full-bleed frosted bar behind the centered wrap */
.nav::before{
  content:"";position:absolute;inset-inline:0;height:var(--header-h);
  background:rgb(255 255 255 / .88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  z-index:-1;
}
.site-header.is-stuck .nav::before{box-shadow:var(--sh-1)}

.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:none}
.brand__mark{
  width:40px;height:40px;border-radius:11px;flex:none;
  background:#FBFBFB;border:1px solid var(--line);padding:2px;
}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__text strong{font-family:var(--font-display);font-size:1.05rem;font-weight:800;letter-spacing:-.03em}
.brand__text span{font-size:.7rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:600}

.nav__menu{display:flex;gap:.25rem;margin-inline:auto}
.nav__menu a{
  padding:.5rem .7rem;border-radius:var(--r-sm);
  font-size:.94rem;font-weight:600;text-decoration:none;color:var(--text);
  transition:background-color .15s,color .15s;
}
.nav__menu a:hover{background:var(--paper-2);color:var(--accent-600)}
.nav__menu a.is-active{color:var(--accent-600)}

.nav__cta{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.nav__toggle{
  display:none;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.55rem;cursor:pointer;
}
.nav__toggle .ico{width:1.4rem;height:1.4rem}

/* =============================================================
   HERO
   ============================================================= */
.hero{position:relative;color:#fff;background:var(--ink);overflow:hidden;isolation:isolate}
.hero__bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(900px 480px at 12% -10%, rgb(212 37 37 / .28), transparent 62%),
    radial-gradient(700px 420px at 92% 8%, rgb(0 135 60 / .18), transparent 60%),
    linear-gradient(180deg,#0B1220 0%,#0E1729 60%,#0B1220 100%);
}
.hero__bg::after{
  /* subtle diagonal safety-stripe texture */
  content:"";position:absolute;inset:0;opacity:.05;
  background-image:repeating-linear-gradient(135deg,#fff 0 2px,transparent 2px 14px);
}
.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;
  padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,7vw,6rem);
}

/* eyebrow badge */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-on-dark);
  background:rgb(212 37 37 / .14);border:1px solid rgb(212 37 37 / .32);
  padding:.4em .85em;border-radius:999px;margin:0 0 1.1rem;
}
.eyebrow--dark{color:var(--accent-600);background:var(--accent-100);border-color:rgb(212 37 37 / .22)}

.hero h1{
  font-size:clamp(2.15rem,1.35rem + 3.6vw,4rem);
  letter-spacing:-.035em;margin-bottom:.45em;
}
.hero h1 .hl{
  color:var(--accent);
  background:linear-gradient(180deg,transparent 62%,rgb(212 37 37 / .22) 62%);
}
.hero__sub{
  font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);
  color:#C6D0E0;max-width:56ch;margin-bottom:1.9rem;
}
.hero__sub strong{color:#fff}

.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2rem}

.hero__trust{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.hero__trust li{
  display:flex;align-items:center;gap:.45em;
  font-size:.9rem;font-weight:600;color:#AEBBCF;
}
.hero__trust .ico{color:var(--green-on-dark)}

/* hero media */
.hero__media{position:relative}
.hero__photo{
  margin:0;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-3);
  border:1px solid rgb(255 255 255 / .1);
  aspect-ratio:4/3;
}
.hero__photo img{width:100%;height:100%;object-fit:cover}

.eta-card{
  position:absolute;left:-8px;bottom:-26px;
  background:rgb(255 255 255 / .96);color:var(--text);
  backdrop-filter:blur(8px);
  border-radius:var(--r-lg);padding:1rem 1.15rem;
  box-shadow:var(--sh-3);
  min-width:min(280px,80%);
}
.eta-card__row{display:flex;gap:.8rem;align-items:center}
.eta-card__row .ico{color:var(--accent)}
.eta-card hr{border:0;border-top:1px solid var(--line);margin:.7rem 0}
.eta-card__num{font-family:var(--font-display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.eta-card__unit{font-weight:700;font-size:.85rem;color:var(--muted);margin-left:.25em}
.eta-card__label{display:block;font-size:.78rem;color:var(--muted);line-height:1.35}

/* =============================================================
   TRUST STRIP
   ============================================================= */
.strip{background:var(--ink-2);color:#fff;border-top:1px solid rgb(255 255 255 / .07)}
.strip__in{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgb(255 255 255 / .08);
  border-inline:1px solid rgb(255 255 255 / .08);
}
.strip__item{
  background:var(--ink-2);padding:1.4rem 1.2rem;
  display:grid;grid-template-columns:auto 1fr;gap:.15rem .8rem;align-items:start;
}
.strip__item .ico{grid-row:span 2;width:1.5rem;height:1.5rem;color:var(--accent);margin-top:.15rem}
.strip__item b{font-family:var(--font-display);font-size:1.02rem;letter-spacing:-.02em}
.strip__item span{font-size:.85rem;color:#9FADC4;line-height:1.4}

/* =============================================================
   SECTION SHELL
   ============================================================= */
.section{padding-block:var(--section-y)}
.section--alt{background:var(--paper-2)}
.section--dark{background:var(--ink);color:#fff}

.sec-head{max-width:62ch;margin:0 auto clamp(2rem,4vw,3.2rem);text-align:center}
.sec-head h2{font-size:clamp(1.75rem,1.25rem + 2.2vw,2.85rem);margin-bottom:.4em}
.sec-head__sub{color:var(--muted);font-size:clamp(1rem,.97rem + .2vw,1.12rem);margin:0}
.sec-head--light .sec-head__sub{color:#B4C0D4}
.sec-head--light h2{color:#fff}

.note{text-align:center;color:var(--muted);margin:2rem 0 0;font-size:.95rem}
.note a{color:var(--accent-600);font-weight:700}

/* =============================================================
   SERVICE CARDS
   ============================================================= */
.cards{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.card{
  position:relative;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem 1.5rem 1.5rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--brand-navy) 55%,var(--brand-green) 100%);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgb(212 37 37 / .35)}
.card:hover::before{transform:scaleX(1)}
.card__ico{
  width:2.4rem;height:2.4rem;padding:.5rem;box-sizing:content-box;
  fill:var(--accent-600);background:var(--accent-100);border-radius:14px;margin-bottom:1rem;
}
.card h3{font-size:1.18rem;margin-bottom:.5rem;letter-spacing:-.025em}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.card__price{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.85rem;
  color:var(--ink);background:var(--paper-2);border:1px solid var(--line);
  padding:.3em .8em;border-radius:999px;
}

/* =============================================================
   HOW IT WORKS
   ============================================================= */
.steps{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.steps__list{display:grid;gap:1.5rem;counter-reset:s}
.steps__list li{
  position:relative;padding-left:4.2rem;
}
.steps__list li::after{
  content:"";position:absolute;left:1.5rem;top:3.4rem;bottom:-1.5rem;width:2px;
  background:linear-gradient(180deg,var(--accent),transparent);
  opacity:.35;
}
.steps__list li:last-child::after{display:none}
.steps__num{
  position:absolute;left:0;top:0;
  display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
  background:var(--accent);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  box-shadow:0 0 0 6px rgb(212 37 37 / .12);
}
.steps__list h3{font-size:1.25rem;margin-bottom:.35em;padding-top:.35rem}
.steps__list p{color:var(--muted);margin:0;font-size:.97rem}
.steps__media{margin:0}
.steps__media img{border-radius:var(--r-lg);box-shadow:var(--sh-2);width:100%;aspect-ratio:3/2;object-fit:cover}
.steps__media figcaption{font-size:.85rem;color:var(--muted);margin-top:.7rem;text-align:center}

/* =============================================================
   WHY US
   ============================================================= */
.why{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.why__media{position:relative}
.why__media img{border-radius:var(--r-xl);width:100%;aspect-ratio:3/4;object-fit:cover;box-shadow:var(--sh-2)}
.why__proof{
  position:absolute;right:-18px;bottom:22px;margin:0;
  display:flex;align-items:center;gap:.8rem;
  background:var(--ink);color:#fff;padding:.7rem .95rem .7rem .7rem;border-radius:var(--r);
  box-shadow:var(--sh-3);max-width:min(300px,88%);
}
.why__proof img{width:52px;height:70px;object-fit:cover;border-radius:8px;flex:none}
.why__proof figcaption{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.why__proof b{font-family:var(--font-display);font-size:.95rem;letter-spacing:-.02em;color:var(--accent-on-dark)}
.why__proof span{font-size:.75rem;color:#9FADC4;line-height:1.35}
.why__copy h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem)}
.why__copy > p{color:var(--muted)}

.ticks{display:grid;gap:.9rem;margin:1.6rem 0 2rem}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:.97rem;color:var(--muted)}
.ticks .ico{color:#fff;background:var(--brand-green);border-radius:50%;padding:3px;width:1.35rem;height:1.35rem;margin-top:.15rem}
.ticks b{color:var(--text)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border-top:1px solid var(--line);padding-top:1.5rem}
.stats__item b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);letter-spacing:-.04em;color:var(--ink);
}
.stats__item span{font-size:.85rem;color:var(--muted);line-height:1.3;display:block}

/* =============================================================
   PRICING
   ============================================================= */
.table-wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);box-shadow:var(--sh-1);
  -webkit-overflow-scrolling:touch;
}
.price-table{min-width:560px;font-size:.97rem}
.price-table thead th{
  background:var(--ink);color:#fff;text-align:left;
  font-family:var(--font-display);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.9rem 1.2rem;font-weight:700;
}
.price-table tbody th{text-align:left;font-weight:600;padding:.95rem 1.2rem}
.price-table td{padding:.95rem 1.2rem;color:var(--muted)}
.price-table tbody tr+tr{border-top:1px solid var(--line)}
.price-table tbody tr:nth-child(odd){background:#FCFDFE}
.price-table tbody tr:hover{background:var(--accent-100)}
.price-table td b{
  font-family:var(--font-display);font-size:1.05rem;color:var(--accent-600);letter-spacing:-.02em;
}

.price-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem;margin-top:1.5rem}
.price-note{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.price-note .ico{color:#fff;background:var(--accent);border-radius:50%;padding:3px;width:1.3rem;height:1.3rem;margin-top:.2rem}
.price-note p{margin:0;font-size:.9rem;color:var(--muted)}
.price-note b{color:var(--text)}

/* =============================================================
   SERVICE AREAS
   ============================================================= */
.areas{position:relative;isolation:isolate;overflow:hidden}
.areas__bg{position:absolute;inset:0;z-index:-1}
.areas__bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.areas__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(11 18 32 / .92) 0%,rgb(11 18 32 / .82) 45%,rgb(11 18 32 / .96) 100%);
}
.areas__in{position:relative}

.areas__search{
  position:relative;display:flex;align-items:center;gap:.6rem;
  max-width:520px;margin:0 auto .5rem;
  background:rgb(255 255 255 / .07);
  border:1px solid rgb(255 255 255 / .18);
  border-radius:999px;padding:.15rem .3rem .15rem 1.1rem;
  transition:border-color .2s, background-color .2s;
}
.areas__search:focus-within{border-color:var(--accent);background:rgb(255 255 255 / .12)}
.areas__search .ico{color:var(--muted-light);flex:none}
.areas__search input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;
  padding:.85rem 0;font-size:1rem;
}
.areas__search input::placeholder{color:#8494AC}
.areas__search input::-webkit-search-cancel-button{display:none}
.areas__clear{
  background:rgb(255 255 255 / .12);border:0;border-radius:50%;
  width:2rem;height:2rem;display:grid;place-items:center;cursor:pointer;color:#fff;
}
.areas__result{text-align:center;font-size:.88rem;color:#9FADC4;min-height:1.4em;margin:0 0 2rem}
.areas__result b{color:var(--accent-on-dark)}

.areas__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:2rem}
.areas__col h3{
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-on-dark);margin-bottom:.9rem;
}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{
  font-size:.845rem;padding:.35em .8em;border-radius:999px;
  background:rgb(255 255 255 / .07);color:#CBD5E4;
  border:1px solid transparent;
  transition:background-color .15s,color .15s,border-color .15s;
}
.chips li:hover{background:rgb(255 255 255 / .14);color:#fff}
.chips li.is-hit{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.chips li.is-dim{opacity:.22}
.chips--outline li{background:transparent;border-color:rgb(255 255 255 / .2)}

.areas__hwy{margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgb(255 255 255 / .12)}
.areas__hwy h3{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-dark);margin-bottom:.9rem}

/* =============================================================
   REVIEWS
   ============================================================= */
.quotes{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
}
.quote{
  margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem;display:flex;flex-direction:column;gap:.85rem;
  box-shadow:var(--sh-1);
}
.quote__stars{display:flex;gap:.15rem;color:#FFB020}
.quote__stars .ico{width:1.05rem;height:1.05rem}
.quote blockquote{margin:0;flex:1}
.quote blockquote p{margin:0;font-size:.96rem;color:var(--text)}
.quote figcaption{border-top:1px solid var(--line);padding-top:.85rem;font-size:.85rem}
.quote figcaption b{display:block;font-family:var(--font-display);letter-spacing:-.02em}
.quote figcaption span{color:var(--muted)}
.sec-head a{color:var(--accent-600);font-weight:600}

/* =============================================================
   QUOTE FORM
   ============================================================= */
.quote-sec{background:linear-gradient(160deg,#0B1220 0%,#132038 55%,#0B1220 100%)}
.quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.quote-grid__copy h2{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem)}
.quote-grid__copy > p{color:#B4C0D4}
.quote-grid__call{
  margin-top:1.8rem;padding:1.3rem;border-radius:var(--r-lg);
  background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .12);
  display:grid;gap:.7rem;
}
.quote-grid__urgent{
  margin:0 0 .3rem;font-family:var(--font-display);font-weight:700;
  color:#fff;font-size:1.02rem;letter-spacing:-.02em;
}
.quote-grid__mail{
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  color:#9FADC4;font-size:.9rem;text-decoration:none;margin-top:.2rem;
}
.quote-grid__mail:hover{color:#fff}

.qform{
  background:var(--paper);color:var(--text);
  border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--sh-3);display:grid;gap:1rem;
}
.qform__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.35rem}
.field label{font-size:.85rem;font-weight:700;color:var(--text)}
.field label span{color:var(--danger)}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .95rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:1rem;transition:border-color .15s, background-color .15s, box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:#98A3B5}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 4px rgb(212 37 37 / .14);
}
.field textarea{resize:vertical;min-height:88px}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235A6679'%3E%3Cpath d='M12 15.4 5.6 9 7 7.6l5 5 5-5L18.4 9 12 15.4Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:1.1rem;padding-right:2.4rem}
.field__err{color:var(--danger);font-size:.8rem;font-weight:600;min-height:0}
.field.is-invalid input,.field.is-invalid select{border-color:var(--danger);background:#FFF6F7}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;font-size:.82rem;color:var(--muted)}
.consent input{margin-top:.2rem;width:1.1rem;height:1.1rem;accent-color:var(--accent);flex:none}
.consent a{color:var(--accent-600);font-weight:600}
.qform__foot{margin:0;text-align:center;font-size:.8rem;color:var(--muted)}
.qform__status{margin:0;text-align:center;font-size:.92rem;font-weight:600}
.qform__status.is-ok{color:var(--brand-green)}
.qform__status.is-err{color:var(--danger)}

/* =============================================================
   FAQ
   ============================================================= */
.faq{display:grid;gap:.6rem}
.faq__item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s, box-shadow .2s;
}
.faq__item[open]{border-color:rgb(212 37 37 / .4);box-shadow:var(--sh-1)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.3rem;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent-600)}
.faq__item summary .ico{color:var(--accent);transition:transform .25s ease;flex:none}
.faq__item[open] summary .ico{transform:rotate(180deg)}
.faq__a{padding:0 1.3rem 1.25rem}
.faq__a p{margin:0;color:var(--muted);font-size:.97rem}
.faq__a a{color:var(--accent-600);font-weight:600}

/* =============================================================
   FINAL CTA
   ============================================================= */
.cta{background:linear-gradient(100deg,#A81818 0%,var(--accent) 100%);color:#fff}
.cta__in{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-block:clamp(2.2rem,4vw,3.2rem);
}
.cta h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.3rem);margin-bottom:.25em;color:#fff}
.cta p{margin:0;color:rgb(255 255 255 / .93);font-weight:500;max-width:52ch}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer{background:var(--ink);color:#9FADC4;padding-top:clamp(2.5rem,5vw,4rem);font-size:.92rem}
.footer__grid{
  display:grid;gap:2rem;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  padding-bottom:2.5rem;
}
.brand--footer{margin-bottom:1rem}
.brand--footer .brand__mark{border-color:rgb(255 255 255 / .18)}
.brand--footer .brand__text strong{color:#fff}
.brand--footer .brand__text span{color:var(--muted-light)}
.footer__about{font-size:.87rem;line-height:1.6;max-width:44ch}
.footer__pay{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem}
.footer__pay span{
  font-size:.7rem;font-weight:600;letter-spacing:.03em;
  border:1px solid rgb(255 255 255 / .16);border-radius:6px;padding:.25em .55em;color:#B8C4D6;
}
.footer__col h3{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:1rem;
}
.footer__col ul{display:grid;gap:.5rem}
.footer__col a{text-decoration:none;transition:color .15s}
.footer__col a:hover{color:var(--accent-on-dark)}
.footer__contact address{font-style:normal;display:grid;gap:.7rem;margin-bottom:1.2rem}
.footer__contact a,.footer__contact span{display:flex;align-items:center;gap:.55em;text-decoration:none}
.footer__contact .ico{color:var(--accent-on-dark);flex:none}
.footer__phone{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:#fff!important;letter-spacing:-.03em}
.footer__phone:hover{color:var(--accent-on-dark)!important}
.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgb(255 255 255 / .1);padding-block:1.3rem;font-size:.82rem;
}
.footer__bottom p{margin:0}
.footer__bottom nav{display:flex;gap:1.2rem}
.footer__bottom a{text-decoration:none}
.footer__bottom a:hover{color:var(--accent-on-dark)}

/* =============================================================
   MOBILE STICKY ACTION BAR
   ============================================================= */
.mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgb(11 18 32 / .96);
  backdrop-filter:blur(12px);
  border-top:1px solid rgb(255 255 255 / .12);
  padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  gap:.45rem;
  box-shadow:0 -8px 28px rgb(0 0 0 / .3);
}
.mobile-bar__btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.4em;
  padding:.8rem .4rem;border-radius:12px;
  background:rgb(255 255 255 / .1);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;text-decoration:none;
}
.mobile-bar__btn--call{flex:1.5;background:var(--accent);box-shadow:0 4px 14px -4px rgb(212 37 37 / .7)}
.mobile-bar__btn:active{transform:scale(.98)}

/* =============================================================
   REVEAL ANIMATION
   ============================================================= */
/* Only hide content when JS is present to un-hide it — a script error
   or a no-JS crawler must never leave sections invisible. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1080px){
  .nav__menu{gap:0}
  .nav__menu a{padding:.5rem .5rem;font-size:.88rem}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}

@media (max-width:900px){
  :root{--header-h:60px}
  .hide-md{display:none}
  .hero__in{grid-template-columns:1fr;padding-block:2.5rem 4.5rem}
  .hero__media{max-width:520px;width:100%;margin-inline:auto}
  .eta-card{left:auto;right:0;bottom:-30px;min-width:0;width:min(300px,90%)}
  .strip__in{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .steps__media{order:-1}
  .why{grid-template-columns:1fr}
  .why__media{max-width:440px;margin-inline:auto}
  .why__proof{right:8px}
  .quote-grid{grid-template-columns:1fr}

  /* mobile nav drawer */
  .nav__toggle{display:block}
  .nav__menu{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;gap:0;margin:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:.5rem 1rem 1.2rem;
    box-shadow:var(--sh-2);
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav__menu.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav__menu a{padding:.85rem .6rem;font-size:1.02rem;border-bottom:1px solid var(--line)}

  /* sticky call bar */
  .mobile-bar{display:flex}
  body{padding-bottom:72px}
}

@media (max-width:640px){
  .topbar__item--hide-sm{display:none}
  .topbar{font-size:.75rem}
  .brand__text span{display:none}
  .brand__text strong{font-size:.95rem}
  .brand__mark{width:34px;height:34px}
  .nav{gap:.5rem}
  .nav__cta{gap:.4rem}
  .btn__stack small{display:none}
  .btn__stack b{font-size:.94rem}
  .btn--call{padding:.6em .85em;gap:.4em}
  .nav__toggle{padding:.45rem}
  .nav__toggle .ico{width:1.25rem;height:1.25rem}
  .price-table{min-width:520px}
  .strip__in{grid-template-columns:1fr;border-inline:0}
  .qform__row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .hero__actions .btn{width:100%}
  .cta__in{flex-direction:column;align-items:flex-start}
  .cta .btn{width:100%}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{justify-content:center;text-align:center}
}

@media (max-width:359px){
  .brand__text{display:none}
  .hero__trust li{font-size:.84rem}
}

/* =============================================================
   MOTION / PRINT / FORCED COLORS
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.mobile-bar,.hero__media,.areas__bg,.qform,.cta{display:none!important}
  body{color:#000;background:#fff}
  .section{padding-block:1rem}
  a[href^="tel:"]::after{content:" (" attr(href) ")"}
}

@media (forced-colors:active){
  .btn{border:1px solid ButtonText}
  .card,.quote,.faq__item{border:1px solid CanvasText}
}

/* =============================================================
   LEGAL / UTILITY PAGES
   ============================================================= */
.legal{padding-block:clamp(2.5rem,6vw,4.5rem)}
.legal h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);margin-bottom:.3em}
.legal h2{font-size:1.22rem;margin:2.2rem 0 .6rem}
.legal p,.legal li{color:var(--muted)}
.legal strong{color:var(--text)}
.legal ul{display:grid;gap:.5rem;margin:0 0 1rem;padding-left:1.2rem}
.legal ul li{list-style:disc}
.legal a{color:var(--accent-600);font-weight:600}
.legal__meta{font-size:.85rem;color:var(--muted-light)}
.legal__back{margin-bottom:2rem;font-size:.9rem}

.ty{text-align:center;min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.ty__mark{
  width:4.5rem;height:4.5rem;margin:0 auto 1.5rem;border-radius:50%;
  display:grid;place-items:center;font-size:2.2rem;
  background:var(--brand-green);color:#fff;
}
.ty__lead{font-size:1.1rem}
.ty .btn{margin-top:.5rem}

/* =============================================================
   FLEET
   ============================================================= */
.fleet{background:var(--paper);border-top:1px solid var(--line)}
.fleet__grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.fleet__item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.fleet__item:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.fleet__item img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fleet__body{padding:1.25rem 1.35rem 1.5rem}
.fleet__body h3{font-size:1.1rem;margin-bottom:.4rem}
.fleet__body p{margin:0;font-size:.93rem;color:var(--muted)}

/* =============================================================
   SUB-PAGES: breadcrumbs, compact hero, prose, link grids
   ============================================================= */
.crumbs{background:var(--ink);color:#8C9AB1;font-size:.82rem;border-top:1px solid rgb(255 255 255 / .07)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem 0}
.crumbs li{display:flex;align-items:center;gap:.4rem}
.crumbs li+li::before{content:"/";opacity:.4}
.crumbs a{text-decoration:none;transition:color .15s}
.crumbs a:hover{color:var(--accent-on-dark)}
.crumbs [aria-current]{color:#fff}

.sub-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.sub-hero__bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 380px at 10% -20%, rgb(212 37 37 / .26), transparent 62%),
    radial-gradient(620px 340px at 88% 0%, rgb(0 135 60 / .16), transparent 60%),
    linear-gradient(180deg,#0B1220 0%,#101B30 70%,#0B1220 100%);
}
.sub-hero__bg::after{
  content:"";position:absolute;inset:0;opacity:.045;
  background-image:repeating-linear-gradient(135deg,#fff 0 2px,transparent 2px 14px);
}
.sub-hero__in{padding-block:clamp(2.2rem,4.5vw,4rem) clamp(2.5rem,5vw,4rem);max-width:860px}
.sub-hero h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem);letter-spacing:-.035em;margin-bottom:.4em}
.sub-hero__lead{font-size:clamp(1rem,.97rem + .3vw,1.15rem);color:#C6D0E0;margin-bottom:1.7rem;max-width:62ch}
.sub-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem}
.sub-hero__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.sub-hero__chips li{
  display:flex;align-items:center;gap:.45em;
  font-size:.82rem;font-weight:600;color:#B9C5D8;
  background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .13);
  padding:.4em .85em;border-radius:999px;
}
.sub-hero__chips .ico{color:var(--accent-on-dark)}

/* long-form body copy */
.prose > p{color:var(--muted);font-size:1.03rem;margin-bottom:1.15em}
.prose > h2{font-size:clamp(1.45rem,1.2rem + 1.2vw,2rem);margin:2.2rem 0 .7rem}
.prose > h3{font-size:1.18rem;margin:2rem 0 .7rem}
.prose > h2:first-child,.prose > p:first-child{margin-top:0}
.prose b,.prose strong{color:var(--text)}

.spots{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:.4rem}
.spots li{
  display:flex;align-items:flex-start;gap:.55rem;font-size:.93rem;color:var(--muted);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .9rem;
}
.spots .ico{color:var(--accent);margin-top:.15rem}

/* cards without an icon slot (area callouts) */
.cards--plain .card{padding-top:1.4rem}
.cards--plain .card h3{font-size:1.08rem}

/* stretched link on the home-page service cards */
.card{position:relative}
.card__more{
  display:inline-flex;align-items:center;gap:.35em;margin-left:.7rem;
  font-family:var(--font-display);font-weight:700;font-size:.8rem;color:var(--accent-600);
  opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;
}
.card__more .ico{width:.95em;height:.95em}
.card:hover .card__more,.card:focus-within .card__more{opacity:1;transform:none}
.card h3 a.stretched{text-decoration:none;color:inherit}
.card h3 a.stretched::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card h3 a.stretched:focus-visible{outline:none}
.card:focus-within{border-color:var(--accent);box-shadow:var(--sh-2)}

/* link grids used for services / nearby areas */
.linkgrid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.linkcard{
  display:flex;align-items:center;gap:.85rem;height:100%;
  padding:.95rem 1.1rem;text-decoration:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.linkcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgb(212 37 37 / .45)}
.linkcard .ico{width:1.6rem;height:1.6rem;color:var(--accent-600);background:var(--accent-100);border-radius:10px;padding:.32rem;box-sizing:content-box;flex:none}
.linkcard span{display:flex;flex-direction:column;min-width:0}
.linkcard b{font-family:var(--font-display);font-size:.98rem;letter-spacing:-.02em;line-height:1.2}
.linkcard small{font-size:.78rem;color:var(--muted)}
.section--dark .linkcard{background:rgb(255 255 255 / .05);border-color:rgb(255 255 255 / .13);color:#fff}
.section--dark .linkcard:hover{background:rgb(255 255 255 / .1)}
.section--dark .linkcard .ico{background:rgb(212 37 37 / .2);color:var(--accent-on-dark)}
.section--dark .linkcard small{color:#9FADC4}

.linkgrid--dark .linkcard{background:rgb(255 255 255 / .05);border-color:rgb(255 255 255 / .13);color:#fff}
.linkgrid--dark .linkcard:hover{background:rgb(255 255 255 / .1);border-color:var(--accent)}
.linkgrid--dark .linkcard .ico{background:rgb(212 37 37 / .2);color:var(--accent-on-dark)}
.linkgrid--dark .linkcard small{color:#9FADC4}

.areas__pages{margin-bottom:2.5rem}
.areas__pages h3{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-dark);margin-bottom:1rem}

.chips--links li{padding:0;background:none;border:0}
.chips--links a{
  display:inline-block;font-size:.845rem;padding:.35em .8em;border-radius:999px;
  background:rgb(255 255 255 / .07);color:#CBD5E4;text-decoration:none;
  border:1px solid transparent;transition:background-color .15s,color .15s,border-color .15s;
}
.chips--links a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* wider tick list used on service pages */
.ticks--lg li{font-size:1rem;align-items:flex-start}
.ticks--lg{gap:1.1rem;margin-top:0}

/* numbered steps outside the two-column layout */
.steps__list--solo{gap:1.6rem}
.steps__list--solo li::after{top:3.2rem}

@media (max-width:640px){
  .sub-hero__actions .btn{width:100%}
  .crumbs{font-size:.76rem}
}

/* photo inside long-form copy */
.prose-fig{margin:1.8rem 0 2rem}
/* capped at the widest source we have, so nothing is ever upscaled */
.prose-fig img{width:100%;max-width:800px;height:auto;margin-inline:auto;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.prose-fig figcaption{font-size:.85rem;color:var(--muted);margin-top:.7rem;text-align:center}

/* =============================================================
   SOCIAL PROOF CARDS
   ============================================================= */
.social{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.social__card{
  display:flex;align-items:center;gap:1rem;
  padding:1.35rem 1.4rem;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.social__card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.social__ico{width:1.7rem;height:1.7rem;padding:.55rem;box-sizing:content-box;border-radius:14px;fill:#fff;flex:none}
.social__card--ig .social__ico{background:linear-gradient(45deg,#F9CE34 0%,#EE2A7B 50%,#6228D7 100%)}
.social__card--ig:hover{border-color:rgb(238 42 123 / .5)}
.social__card--tt .social__ico{background:#0B1220}
.social__card--tt:hover{border-color:rgb(11 18 32 / .5)}
.social__card--ask{background:var(--accent-100);border-color:rgb(212 37 37 / .32);box-shadow:none}
.social__card--ask .social__ico{background:var(--accent)}
.social__body{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.social__body b{font-family:var(--font-display);font-size:1.02rem;letter-spacing:-.02em}
.social__body small{font-size:.85rem;color:var(--muted);line-height:1.4}
.social__go{flex:none;color:var(--muted-light);transition:transform .2s ease,color .2s ease}
a.social__card:hover .social__go{transform:translateX(3px);color:var(--accent)}

/* footer social row */
.footer__social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.footer__social a{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:.82rem;font-weight:600;text-decoration:none;
  border:1px solid rgb(255 255 255 / .16);border-radius:999px;padding:.4em .9em;
  transition:background-color .15s,border-color .15s,color .15s;
}
.footer__social a:hover{background:rgb(255 255 255 / .1);border-color:var(--accent);color:#fff}
.footer__social .ico{color:var(--accent-on-dark)}

/* word-based variants of the numeric stat styles */
.eta-card__word{font-family:var(--font-display);font-size:1.15rem;font-weight:800;letter-spacing:-.03em}
.stats__item b small{font-size:.5em;font-weight:700;margin-left:.12em;letter-spacing:0}

/* =============================================================
   NARROW-VIEWPORT SAFETY (≤360px)
   A <select> reports the width of its longest <option> as its
   intrinsic minimum, which pushed the whole grid wider than the
   viewport on 320px phones. Grid and flex children need an explicit
   min-width:0 before they are allowed to shrink past that.
   ============================================================= */
.quote-grid > *,
.qform__row > *,
.field,
.field input,.field select,.field textarea{min-width:0}
.social__body b{overflow-wrap:anywhere}
.footer__contact a,.footer__contact span{overflow-wrap:anywhere}
/* An `auto` grid column is sized from its items' max-content, so a wide
   <select> or <input> widens the column even with min-width:0 on the item.
   minmax(0,1fr) pins the column to the container instead. */
.qform{grid-template-columns:minmax(0,1fr)}
.qform__row{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){ .qform__row{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){ .quote-grid{grid-template-columns:minmax(0,1fr)} }

/* developer credit in the footer bar */
.footer__credit{margin:0;color:#8493AB}
.footer__credit a{
  display:inline-block;padding-block:.35rem;   /* 24px+ touch target */
  color:#C3CEDE;text-decoration:none;font-weight:600;
  border-bottom:1px solid rgb(255 255 255 / .22);
  transition:color .15s,border-color .15s;
}
.footer__credit a:hover{color:#fff;border-color:var(--accent-on-dark)}