/* ═══════════════════════════════════════════════════
   MAXWIN Solutions — BC Commercial Fleet Rental
   Full redesign v4 — Inline SVG logo, elevated UX
   Fonts: Instrument Serif + Geist + Geist Mono
═══════════════════════════════════════════════════ */

:root {
  --bg:       #0b0b0b;
  --bg-2:     #111111;
  --bg-3:     #181818;
  --bg-4:     #202020;
  --border:   rgba(255,255,255,.07);
  --border-m: rgba(255,255,255,.12);
  --border-l: rgba(255,255,255,.20);
  --dim:      #5c5c5c;
  --mid:      #888;
  --paper:    #ffffff;
  --paper-2:  #e8e8e8;

  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Geist', system-ui, sans-serif;
  --mono:  'Geist Mono', 'Courier New', monospace;

  --nav-h: 68px;
  --max:   1240px;
  --ease:  cubic-bezier(.4,0,.2,1);
}

/* ── BASE ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
ul,ol { list-style: none; }
img { display: block; max-width: 100%; }
input,select,textarea,button { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
:focus-visible { outline: 1.5px solid rgba(255,255,255,.5); outline-offset: 3px; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-4); }
.hidden { display: none !important; }

/* ── UTILS ── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 48px; }

/* ── SCROLL BAR ── */
.scroll-bar { position: fixed; top: 0; left: 0; height: 1.5px; width: 0; background: var(--paper); z-index: 9999; pointer-events: none; transition: width .08s linear; }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── KEYFRAMES ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes scaleIn  { from { opacity:0; transform:scale(.97) } to { opacity:1; transform:scale(1) } }
@keyframes floatY   { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-14px) } }
@keyframes pulse    { 0%,100% { opacity:.7; transform:scale(1) } 50% { opacity:.3; transform:scale(.9) } }

/* ── BUTTONS ── */
.btn-primary   { display:inline-flex; align-items:center; gap:9px; background:var(--paper); color:var(--bg); font-size:13px; font-weight:600; letter-spacing:.04em; padding:14px 28px; border:1.5px solid var(--paper); transition:background .2s,color .2s; cursor:pointer; }
.btn-primary:hover { background:var(--paper-2); }
.btn-secondary { display:inline-flex; align-items:center; gap:9px; background:transparent; color:var(--mid); font-size:13px; letter-spacing:.04em; padding:14px 28px; border:1.5px solid var(--border-m); transition:border-color .2s,color .2s; cursor:pointer; }
.btn-secondary:hover { border-color:var(--border-l); color:var(--paper); }
.btn-outline   { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--mid); font-size:13px; letter-spacing:.04em; padding:12px 24px; border:1px solid var(--border-m); transition:border-color .2s,color .2s; cursor:pointer; }
.btn-outline:hover { border-color:var(--border-l); color:var(--paper); }
.btn-outline-sm{ display:inline-flex; align-items:center; background:transparent; color:var(--dim); font-size:12px; letter-spacing:.05em; padding:10px 18px; border:1px solid var(--border); transition:border-color .2s,color .2s; cursor:pointer; }
.btn-outline-sm:hover { border-color:var(--border-m); color:var(--paper); }

/* ── SECTION CHROME ── */
.sect-label { font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); margin-bottom:14px; }
.sect-h2 { font-family:var(--sans); font-size:clamp(28px,4vw,50px); font-weight:600; letter-spacing:-.025em; line-height:1.05; }
.sect-h2 em { font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(30px,4.2vw,54px); }
.sect-top { display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap; margin-bottom:48px; }
.sect-desc { font-size:14px; line-height:1.75; color:var(--mid); max-width:380px; text-align:right; }


/* ═══════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════ */
.nav-wrap { position:fixed; top:0; left:0; right:0; z-index:900; transition:background .3s var(--ease), border-color .3s; }
.nav-wrap.solid { background:rgba(11,11,11,.94); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.navbar { display:flex; align-items:center; gap:32px; height:var(--nav-h); }

/* Brand / Logo */
.brand { display:flex; align-items:center; gap:14px; margin-right:auto; flex-shrink:0; }
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
  /* logo-transparent.png = white mark, transparent bg — no filter needed */
}
.brand-wordmark { display:flex; flex-direction:column; line-height:1; gap:2px; }
.bw-main { font-family:var(--sans); font-size:19px; font-weight:700; letter-spacing:.01em; color:var(--paper); }
.bw-sub  { font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }

/* Nav links */
.nav-links { display:flex; gap:28px; }
.nav-links a { font-size:13px; color:var(--mid); letter-spacing:.03em; transition:color .18s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--paper); transition:width .2s var(--ease); }
.nav-links a:hover { color:var(--paper); }
.nav-links a:hover::after { width:100%; }

/* Right side */
.nav-right { display:flex; align-items:center; gap:20px; }
.nav-tel { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.03em; transition:color .18s; white-space:nowrap; }
.nav-tel:hover { color:var(--paper); }
.btn-nav-cta { background:var(--paper); color:var(--bg); font-size:12px; font-weight:600; letter-spacing:.06em; padding:9px 20px; border:1.5px solid var(--paper); transition:background .18s; }
.btn-nav-cta:hover { background:var(--paper-2); }

/* Burger */
.burger { display:none; flex-direction:column; gap:5px; padding:6px; }
.burger span { display:block; width:20px; height:1.5px; background:var(--paper); transition:transform .25s, opacity .25s; }
.burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }

/* Mobile nav */
.mob-nav { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:rgba(11,11,11,.98); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); flex-direction:column; z-index:899; padding-bottom:20px; }
.mob-nav.open { display:flex; animation:fadeIn .2s var(--ease); }
.mob-brand { display:flex; align-items:center; gap:12px; padding:20px 32px; border-bottom:1px solid var(--border); }
.mob-logo { height:36px; width:auto; }
.mob-nav a,.mob-nav button { padding:15px 32px; font-size:14px; color:var(--mid); border-bottom:1px solid var(--border); text-align:left; transition:color .15s, background .15s; }
.mob-nav a:hover { color:var(--paper); background:var(--bg-2); }
.mob-tel { display:flex!important; align-items:center; gap:9px; }
.mob-cta { background:var(--paper)!important; color:var(--bg)!important; border:none!important; font-weight:600; margin:16px 32px 0; padding:14px!important; justify-content:center; }


/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero { min-height:100vh; padding-top:var(--nav-h); position:relative; display:flex; align-items:center; overflow:hidden; }
.hero-noise { position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E"); pointer-events:none; z-index:0; }
.hero-fade-bottom { position:absolute; bottom:0; left:0; right:0; height:220px; background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none; z-index:1; }
.hero-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; width:100%; padding-top:56px; padding-bottom:80px; position:relative; z-index:2; }

/* Copy */
.hero-badge { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:24px; opacity:0; animation:fadeUp .6s var(--ease) .1s both; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--paper); animation:pulse 2.5s ease-in-out infinite; }
.hero-h1 { font-family:var(--sans); font-size:clamp(44px,5.5vw,76px); font-weight:600; letter-spacing:-.03em; line-height:.97; margin-bottom:22px; }
.hero-h1 em { font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(46px,5.8vw,80px); display:block; }
.hero-h1 { opacity:0; animation:fadeUp .7s var(--ease) .22s both; }
.hero-p { font-size:16px; line-height:1.72; color:var(--mid); max-width:460px; margin-bottom:36px; opacity:0; animation:fadeUp .7s var(--ease) .38s both; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; opacity:0; animation:fadeUp .7s var(--ease) .52s both; }
.hero-trust { display:flex; gap:20px; flex-wrap:wrap; opacity:0; animation:fadeUp .7s var(--ease) .64s both; }
.trust-pill { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--dim); }
.trust-pill svg { color:var(--mid); flex-shrink:0; }

/* Visual — truck PNG */
.hero-visual { position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; min-height:420px; opacity:0; animation:fadeIn 1s var(--ease) .6s both; }
.hv-truck { position:relative; width:100%; display:flex; justify-content:center; }
.hv-img { width:100%; max-width:600px; height:auto; object-fit:contain; animation:floatY 7s ease-in-out infinite; filter:drop-shadow(0 48px 80px rgba(0,0,0,.8)) drop-shadow(0 12px 28px rgba(0,0,0,.5)); }
.hv-shadow { position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:55%; height:18px; background:radial-gradient(ellipse at center,rgba(255,255,255,.1) 0%,transparent 70%); border-radius:50%; filter:blur(6px); animation:floatY 7s ease-in-out infinite reverse; }
.hv-card { position:absolute; bottom:0; right:0; background:rgba(11,11,11,.85); backdrop-filter:blur(14px); border:1px solid var(--border-m); padding:14px 20px; display:flex; flex-direction:column; gap:2px; }
.hv-card-n { font-family:var(--sans); font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.hv-card-l { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.hv-card-2 { position:absolute; top:16px; left:0; background:rgba(11,11,11,.8); backdrop-filter:blur(10px); border:1px solid var(--border); padding:8px 14px; display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; color:var(--dim); white-space:nowrap; }
.hv-card-2 svg { color:var(--mid); flex-shrink:0; }

/* Scroll hint */
.hero-scroll { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:3; opacity:0; animation:fadeIn 1s var(--ease) 1.4s both; }
.scroll-track { width:1px; height:36px; background:linear-gradient(to bottom, transparent, var(--mid)); }
.hero-scroll span { font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }


/* ═══════════════════════════════════════════════
   STATS STRIP
═══════════════════════════════════════════════ */
.stats-strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:24px 0; background:var(--bg-2); }
.stats-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.stat { display:flex; flex-direction:column; align-items:center; padding:0 44px; }
.stat-n { font-family:var(--sans); font-size:20px; font-weight:600; letter-spacing:-.02em; }
.stat-l { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-top:3px; }
.stat-div { width:1px; height:28px; background:var(--border-m); }


/* ═══════════════════════════════════════════════
   FLEET
═══════════════════════════════════════════════ */
.fleet { padding:100px 0; border-top:1px solid var(--border); }

/* Tabs */
.fleet-tabs { display:flex; border:1px solid var(--border-m); width:fit-content; margin-bottom:40px; overflow:hidden; }
.ftab { display:flex; align-items:center; gap:8px; background:none; border:none; border-right:1px solid var(--border-m); color:var(--mid); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:10px 24px; transition:background .18s, color .18s; }
.ftab:last-child { border-right:none; }
.ftab.active { background:var(--paper); color:var(--bg); }
.ftab:hover:not(.active) { color:var(--paper); background:var(--bg-3); }

/* Grid */
.fleet-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin-bottom:1px; }

/* Card */
.vcard { background:var(--bg); display:flex; flex-direction:column; transition:background .2s; }
.vcard:hover { background:var(--bg-2); }
.vcard-img-wrap { position:relative; height:260px; overflow:hidden; flex-shrink:0; }
.vcard-img { width:100%; height:100%; object-fit:cover; filter:grayscale(15%) brightness(.72); transition:filter .5s var(--ease), transform .6s var(--ease); }
.vcard:hover .vcard-img { filter:grayscale(0%) brightness(.82); transform:scale(1.04); }
.vcard-img-fade { position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 0%,transparent 55%); }
.vcard-chips { position:absolute; top:16px; left:16px; display:flex; gap:6px; }
.chip { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border:1px solid rgba(255,255,255,.28); background:rgba(11,11,11,.65); backdrop-filter:blur(4px); color:var(--paper); }
.chip-dim { border-color:rgba(255,255,255,.1); color:var(--mid); }
.vcard-body { padding:24px 28px 28px; flex:1; display:flex; flex-direction:column; gap:16px; }
.vcard-title { font-family:var(--sans); font-size:22px; font-weight:600; letter-spacing:-.02em; }
.vcard-sub { font-size:14px; font-weight:400; color:var(--mid); letter-spacing:0; }
.vcard-specs { display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:12px 0; }
.vcard-specs li { display:flex; justify-content:space-between; font-size:12px; }
.vcard-specs li span:first-child { color:var(--dim); }
.vcard-specs li span:last-child { font-family:var(--mono); font-size:11px; text-align:right; }
.vcard-actions { display:flex; gap:8px; margin-top:auto; }
.vcard-btn-p { flex:1; background:var(--paper); color:var(--bg); font-size:12px; font-weight:600; letter-spacing:.05em; padding:12px; border:1.5px solid var(--paper); transition:background .18s; }
.vcard-btn-p:hover { background:var(--paper-2); }
.vcard-btn-s { flex:1; background:none; border:1px solid var(--border-m); color:var(--mid); font-size:12px; letter-spacing:.04em; padding:12px; transition:border-color .18s, color .18s; }
.vcard-btn-s:hover { border-color:var(--border-l); color:var(--paper); }

/* Open card */
.vcard-open { border:1px dashed var(--border-m) !important; background:var(--bg-2) !important; }
.vcard-open:hover { background:var(--bg-3) !important; }
.vcard-open-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:40px 28px; text-align:center; }
.vcard-open-icon { color:var(--border-l); }
.vcard-open-h { font-size:16px; font-weight:500; letter-spacing:-.01em; }
.vcard-open-p { font-size:13px; color:var(--mid); line-height:1.65; max-width:200px; }

/* Liftgate / Feature Strip */
.feature-strip {
  position: relative;
  margin-top: 1px;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.fs-media {
  position: absolute;
  inset: 0;
}
.fs-media .fs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.45);
  transition: transform .6s var(--ease), filter .4s;
}
.feature-strip:hover .fs-img {
  transform: scale(1.03);
  filter: brightness(.5);
}
/* Dark gradient so text is always readable */
.fs-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11,11,11,.92) 0%,
    rgba(11,11,11,.6)  40%,
    rgba(11,11,11,.1)  100%
  );
}
.fs-content {
  position: relative;
  z-index: 1;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.fs-h {
  font-family: var(--sans);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--paper);
}
.fs-p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--white-soft, rgba(255,255,255,.75));
  max-width: 480px;
}

/* Desktop: content sits left, more height */
@media (min-width: 769px) {
  .feature-strip { min-height: 300px; }
  .fs-content { padding: 48px 52px; max-width: 560px; }
  .fs-p { font-size: 15px; }
}


/* ═══════════════════════════════════════════════
   ESTIMATE / QUOTE FORM
═══════════════════════════════════════════════ */
.estimate { padding:100px 0; background:var(--bg-2); border-top:1px solid var(--border); }
.est-wrap { max-width:760px; }
.est-form { display:flex; flex-direction:column; gap:20px; }

/* Grid for selects */
.ef-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ef-grid-2 { grid-template-columns:1fr 1fr; }
.ef-field { display:flex; flex-direction:column; gap:8px; }
.ef-label { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.ef-req { color:var(--mid); }
.ef-opt { color:var(--bg-4); font-size:9px; }

/* Custom SELECT — dropdown */
.sel-wrap { position:relative; }
.ef-sel {
  appearance:none; -webkit-appearance:none;
  width:100%; background:var(--bg-3);
  border:1px solid var(--border-m);
  color:var(--paper); padding:13px 40px 13px 16px;
  font-size:14px; outline:none; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.ef-sel option { background:var(--bg-3); color:var(--paper); }
.ef-sel:focus { border-color:var(--border-l); }
.ef-sel:hover { background:var(--bg-4); }
/* Placeholder option colour */
.ef-sel option[value=""] { color:var(--dim); }
.sel-arrow { position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--dim); }

/* Text inputs */
.ef-input,.cf-input {
  background:var(--bg-3); border:1px solid var(--border-m);
  color:var(--paper); padding:13px 16px;
  font-size:14px; outline:none; width:100%;
  transition:border-color .18s, background .18s;
}
.ef-input::placeholder,.cf-input::placeholder { color:var(--dim); }
.ef-input:focus,.cf-input:focus { border-color:var(--border-l); }
.ef-input:hover,.cf-input:hover { background:var(--bg-4); }
.ef-textarea,.cf-textarea { min-height:100px; resize:vertical; font-family:var(--sans); }

/* Disclaimer */
.ef-disclaimer { display:flex; align-items:flex-start; gap:10px; font-family:var(--mono); font-size:10px; line-height:1.7; color:var(--dim); background:var(--bg-3); border:1px solid var(--border); padding:14px 16px; }
.ef-disclaimer svg { flex-shrink:0; margin-top:1px; color:var(--dim); }

/* Submit */
.ef-submit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:var(--paper); color:var(--bg); font-size:14px; font-weight:600; letter-spacing:.05em; padding:16px; border:1.5px solid var(--paper); transition:background .18s; cursor:pointer; }
.ef-submit:hover { background:var(--paper-2); }
.ef-submit:disabled { opacity:.4; pointer-events:none; }

/* Estimate confirm → result card */
.est-result { display:flex; flex-direction:column; gap:24px; max-width:760px; }
.est-result:not([hidden]) { animation:scaleIn .45s var(--ease) both; }
[hidden] { display:none !important; }

.er-sent { display:flex; align-items:flex-start; gap:12px; background:var(--bg-3); border:1px solid var(--border-m); border-left:3px solid var(--paper); padding:16px 20px; font-size:13px; line-height:1.65; color:var(--mid); }
.er-sent svg { flex-shrink:0; margin-top:1px; color:var(--paper); }
.er-sent strong { color:var(--paper); }

.er-price-card { background:var(--bg-2); border:1px solid var(--border-m); overflow:hidden; }

.er-price-header { display:flex; justify-content:space-between; align-items:flex-start; padding:24px 28px 20px; border-bottom:1px solid var(--border); }
.er-label { font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.er-vehicle { font-family:var(--sans); font-size:20px; font-weight:600; letter-spacing:-.02em; }
.er-badge { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--border-m); padding:4px 10px; color:var(--dim); }

.er-price-main { padding:28px; background:var(--bg-3); }
.er-price-row { display:flex; align-items:center; gap:0; }
.er-price-col { flex:1; display:flex; flex-direction:column; gap:4px; }
.er-price-col:last-child { text-align:right; }
.er-price-lbl { font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.er-price-val { font-family:var(--sans); font-size:32px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.er-price-val--big { font-size:44px; }
.er-price-sub { font-family:var(--mono); font-size:10px; color:var(--dim); margin-top:4px; }
.er-price-divider { width:1px; height:60px; background:var(--border-m); margin:0 32px; flex-shrink:0; }

.er-breakdown { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border); }
.er-breakdown-row { display:flex; justify-content:space-between; align-items:center; padding:12px 28px; border-bottom:1px solid var(--border); font-size:13px; }
.er-breakdown-row:last-child { border-bottom:none; }
.er-breakdown-row span:first-child { color:var(--mid); }
.er-breakdown-row span:last-child { font-family:var(--mono); font-size:12px; }

.er-disclaimer { display:flex; align-items:flex-start; gap:9px; padding:16px 28px; background:var(--bg); font-family:var(--mono); font-size:10px; line-height:1.7; color:var(--dim); border-top:1px solid var(--border); }
.er-disclaimer svg { flex-shrink:0; margin-top:1px; }


/* ═══════════════════════════════════════════════
   WHY US
═══════════════════════════════════════════════ */
.why { padding:100px 0; border-top:1px solid var(--border); }

.why-header { max-width:720px; margin-bottom:56px; }
.why-header .sect-h2 { margin-bottom:20px; }
.why-intro { font-size:16px; line-height:1.78; color:var(--mid); }

/* Full-width featured promise */
.why-feature { background:var(--bg-2); border:1px solid var(--border-m); padding:36px 40px; margin-bottom:1px; border-left:3px solid var(--paper); }
.why-feature-inner { display:flex; align-items:flex-start; gap:32px; }
.wf-num { font-family:var(--mono); font-size:20px; color:var(--dim); flex-shrink:0; padding-top:4px; }
.wf-h { font-family:var(--sans); font-size:20px; font-weight:600; letter-spacing:-.02em; margin-bottom:10px; }
.wf-p { font-size:15px; line-height:1.75; color:var(--mid); }

/* 6-card grid — 3 columns */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.why-card { background:var(--bg); padding:32px 28px; display:flex; flex-direction:column; gap:12px; transition:background .2s; }
.why-card:hover { background:var(--bg-2); }
.why-icon { color:var(--mid); margin-bottom:4px; }
.why-num { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--dim); }
.why-card h3 { font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:-.015em; line-height:1.3; }
.why-card p { font-size:13px; line-height:1.78; color:var(--mid); }


/* ═══════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════ */
.contact { padding:100px 0; background:var(--bg-2); border-top:1px solid var(--border); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.contact-p { font-size:15px; line-height:1.75; color:var(--mid); margin:20px 0 40px; max-width:400px; }
.contact-links { display:flex; flex-direction:column; gap:20px; }
.clink { display:flex; align-items:flex-start; gap:14px; transition:opacity .18s; }
.clink:hover { opacity:.75; }
.clink-icon { width:38px; height:38px; border:1px solid var(--border-m); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color .18s; }
.clink:hover .clink-icon { border-color:var(--border-l); }
.clink-l { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:3px; }
.clink-v { font-size:15px; font-weight:500; letter-spacing:-.01em; }

/* Contact form */
.contact-form-wrap { }
.cform-head { margin-bottom:28px; }
.cform-title { font-family:var(--sans); font-size:22px; font-weight:600; letter-spacing:-.02em; margin-bottom:6px; }
.cform-sub { font-size:13px; color:var(--mid); line-height:1.6; }
.cform { display:flex; flex-direction:column; gap:16px; background:var(--bg); border:1px solid var(--border-m); padding:32px; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-field { display:flex; flex-direction:column; gap:8px; }
.cf-opt { color:var(--bg-4); }
.cf-textarea { min-height:120px; resize:vertical; font-family:var(--sans); }
.cconfirm { display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; padding:52px 36px; border:1px solid var(--border-m); background:var(--bg); animation:scaleIn .4s var(--ease) both; }
.cconfirm h3 { font-family:var(--sans); font-size:22px; font-weight:600; letter-spacing:-.02em; }
.cconfirm p { font-size:14px; color:var(--mid); line-height:1.65; }


/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.footer { background:var(--bg-3); border-top:1px solid var(--border); padding:60px 0 32px; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; gap:48px; flex-wrap:wrap; padding-bottom:48px; border-bottom:1px solid var(--border); }
.footer-brand { display:flex; align-items:center; gap:16px; }
.footer-logo { height:48px; width:auto; }
.footer-name { font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:.01em; }
.footer-tag { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:3px; }
.footer-cols { display:flex; gap:56px; flex-wrap:wrap; }
.footer-col { display:flex; flex-direction:column; gap:12px; }
.fc-h { font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:4px; }
.footer-col a,.footer-col span { font-size:13px; color:var(--mid); transition:color .18s; }
.footer-col a:hover { color:var(--paper); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:.04em; }


/* ═══════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════ */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(12px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; animation:fadeIn .22s var(--ease); }
.modal-overlay[hidden] { display:none; }
.modal { background:var(--bg-2); border:1px solid var(--border-m); max-width:500px; width:100%; max-height:90vh; overflow-y:auto; position:relative; animation:scaleIn .28s var(--ease); }
.modal-close { position:absolute; top:14px; right:14px; color:var(--mid); padding:7px; transition:color .18s; }
.modal-close:hover { color:var(--paper); }
.modal-inner { padding:40px; display:flex; flex-direction:column; gap:20px; }
.modal-h { font-family:var(--sans); font-size:24px; font-weight:600; letter-spacing:-.02em; }
.modal-p { font-size:13px; color:var(--mid); line-height:1.65; margin-top:-8px; }
.mform { display:flex; flex-direction:column; gap:16px; }
.mconfirm { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:40px 0 8px; }
.mconfirm p { font-size:14px; color:var(--mid); }


/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width:1100px) {
  .fleet-grid { grid-template-columns:1fr 1fr; }
  .why-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .hero-layout { grid-template-columns:1fr; }
  .hero-visual { min-height:280px; }
  .hv-card-2 { display:none; }
  .contact-grid { grid-template-columns:1fr; gap:48px; }
  .sect-top { flex-direction:column; align-items:flex-start; }
  .sect-desc { text-align:left; max-width:100%; }
  .ef-grid { grid-template-columns:1fr; }
  .ef-grid-2 { grid-template-columns:1fr; }
  .cf-row { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  :root { --nav-h:60px; }
  .container { padding:0 24px; }
  .nav-links,.nav-right { display:none; }
  .burger { display:flex; }
  .fleet,.estimate,.why,.contact { padding:64px 0; }
  .fleet-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .why-feature { padding:24px; }
  .why-feature-inner { flex-direction:column; gap:16px; }
  .stat { padding:0 20px; }
  .footer-top { flex-direction:column; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .footer-cols { gap:36px; }
  .cform { padding:24px; }
  .modal-inner { padding:28px; }
}

/* ═══════════════════════════════════════════════
   HERO KICKER (replaces hero-badge)
═══════════════════════════════════════════════ */
.hero-kicker { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:24px; opacity:0; animation:fadeUp .6s var(--ease) .1s both; }
.kicker-dot { width:6px; height:6px; border-radius:50%; background:var(--paper); opacity:.5; flex-shrink:0; animation:pulse 2.5s ease-in-out infinite; }

/* TWO stat cards in hero */
.hv-stat { position:absolute; bottom:0; right:0; background:rgba(11,11,11,.85); backdrop-filter:blur(14px); border:1px solid var(--border-m); padding:14px 20px; display:flex; flex-direction:column; gap:2px; }
.hv-stat--2 { bottom:auto; top:16px; right:auto; left:0; }
.hv-stat-n { font-family:var(--sans); font-size:26px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.hv-stat-l { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }

/* ═══════════════════════════════════════════════
   FAQ SECTION
═══════════════════════════════════════════════ */
.faq { padding:100px 0; background:var(--bg-2); border-top:1px solid var(--border); }
.faq-list { display:flex; flex-direction:column; gap:0; border:1px solid var(--border-m); max-width:860px; }

.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }

.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; background:none; border:none; color:var(--paper); font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:-.01em; text-align:left; padding:22px 28px; cursor:pointer; transition:background .18s; }
.faq-q:hover { background:var(--bg-3); }
.faq-q[aria-expanded="true"] { background:var(--bg-3); }
.faq-q[aria-expanded="true"] .faq-chevron { transform:rotate(180deg); }
.faq-chevron { flex-shrink:0; color:var(--dim); transition:transform .25s var(--ease); }

.faq-a { padding:0 28px 22px; }
.faq-a p { font-size:14px; line-height:1.78; color:var(--mid); }
.faq-a a { color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.faq-a strong { color:var(--paper); font-weight:500; }

/* ═══════════════════════════════════════════════
   FLOATING MOBILE CTA BAR
═══════════════════════════════════════════════ */
.mob-fab { display:none; }

@media (max-width:768px) {
  .mob-fab {
    display:flex;
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:850;
    border-top:1px solid var(--border-m);
    background:rgba(11,11,11,.97);
    backdrop-filter:blur(16px);
    padding:12px 16px;
    gap:10px;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
  }
  .mob-fab-call {
    display:flex; align-items:center; justify-content:center; gap:8px;
    flex:1; background:var(--bg-3); border:1px solid var(--border-m);
    color:var(--paper); font-size:13px; font-weight:500;
    letter-spacing:.04em; padding:14px;
    transition:background .18s;
  }
  .mob-fab-call:hover { background:var(--bg-4); }
  .mob-fab-quote {
    flex:1.2; background:var(--paper); color:var(--bg);
    font-size:13px; font-weight:600; letter-spacing:.05em;
    padding:14px; border:none; transition:background .18s;
  }
  .mob-fab-quote:hover { background:var(--paper-2); }

  /* Push page content above the fixed FAB bar */
  body { padding-bottom: 72px; }

  /* FAQ mobile */
  .faq { padding:64px 0; }
  .faq-q { padding:18px 20px; font-size:14px; }
  .faq-a { padding:0 20px 18px; }
}

/* ═══════════════════════════════════════════════
   GENERAL MOBILE UX IMPROVEMENTS
═══════════════════════════════════════════════ */
@media (max-width:768px) {
  /* Larger tap targets on all buttons */
  .vcard-btn-p, .vcard-btn-s, .btn-outline-sm, .ftab { min-height:48px; }
  .ef-submit, .cf-submit, .mob-cta { min-height:52px; font-size:15px; }
  .ef-sel, .ef-input, .cf-input { min-height:48px; font-size:16px; /* prevents iOS zoom */ }

  /* Stack estimate grid fully on mobile */
  .ef-grid { grid-template-columns:1fr; }
  .ef-grid-2 { grid-template-columns:1fr; }

  /* Better hero on mobile */
  .hero-h1 { font-size:clamp(38px,11vw,54px); }
  .hero-p { font-size:15px; }
  .hero-ctas { flex-direction:column; }
  .btn-primary, .btn-secondary { width:100%; justify-content:center; padding:16px; }

  /* Stats strip wraps nicely */
  .stats-row { gap:16px; justify-content:center; }
  .stat { padding:0 12px; }
  .stat-div { display:none; }
  .stat-n { font-size:16px; }

  /* Why grid single col with smaller padding */
  .why-card { padding:24px 20px; }

  /* Contact stack */
  .contact-grid { gap:40px; }
  .cform { padding:20px; }
}

/* ═══════════════════════════════════════════════
   DESKTOP UX IMPROVEMENTS
═══════════════════════════════════════════════ */

/* Smoother focus rings site-wide */
:focus-visible { outline:2px solid rgba(255,255,255,.6); outline-offset:3px; border-radius:1px; }

/* Estimate form icon moved to left of button text */
.ef-submit { flex-direction:row-reverse; }
.ef-submit svg { flex-shrink:0; }

/* Bigger click zone on nav links */
.nav-links a { padding:4px 2px; }

/* More breathing room in why cards */
@media (min-width:769px) {
  .why-card { padding:36px 32px; }
}