/* ══════════════════════════════════════════════════════════
   ROAD RUNNER FLEET SERVICES
   Skin: Large-format editorial — 2026
   Inspired by: premium industrial brands, Vercel, Linear
══════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --red:      #C0392B;
  --red-dk:   #9B2C1F;
  --black:    #080808;
  --ink:      #0F0F0F;
  --white:    #FFFFFF;
  --chalk:    #F4F3F1;
  --stone:    #ECEAE7;
  --smoke:    #C8C6C2;
  --muted:    #787672;
  --faint:    #E4E2DE;

  --font-d: 'Oswald', sans-serif;
  --font-b: 'Inter', sans-serif;

  --nav-h: 68px;
  --max:   1200px;

  /* Fluid scale */
  --t-xs:   clamp(.7rem,   .65rem + .25vw, .8rem);
  --t-sm:   clamp(.85rem,  .8rem  + .3vw,  1rem);
  --t-base: clamp(1rem,    .95rem + .25vw,  1.125rem);
  --t-md:   clamp(1.1rem,  1rem   + .5vw,   1.375rem);
  --t-lg:   clamp(1.375rem,1.1rem + 1vw,    2rem);
  --t-xl:   clamp(2rem,    1.2rem + 2.5vw,  3.5rem);
  --t-2xl:  clamp(3rem,    1rem   + 5vw,    6rem);
  --t-hero: clamp(4rem,    1rem   + 8.5vw,  9rem);

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

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { -webkit-text-size-adjust:none; text-size-adjust:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; scroll-padding-top:var(--nav-h) }
body { font-family:var(--font-b); font-size:var(--t-base); color:var(--ink); background:var(--white); overflow-x:hidden; line-height:1.65; font-feature-settings:'ss01','cv11' }
img,video { display:block; max-width:100%; height:auto }
ul,ol { list-style:none }
a { text-decoration:none; color:inherit }
h1,h2,h3,h4 { font-family:var(--font-d); text-wrap:balance; line-height:.95; font-weight:700; text-transform:uppercase; letter-spacing:-.01em }
p { text-wrap:pretty }
button { cursor:pointer; background:none; border:none; font:inherit }
:focus-visible { outline:2px solid var(--red); outline-offset:3px; border-radius:1px }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important } }

/* ── SHARED LAYOUT ──────────────────────────────────────── */
.container { max-width:var(--max); margin-inline:auto; padding-inline:clamp(1.5rem,5vw,4rem) }
.vpad { padding-block:clamp(5rem,9vw,10rem) }

/* ── SHARED TYPE ────────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-b); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red);
  margin-bottom:1.5rem;
}
.eyebrow::before {
  content:''; display:block; width:24px; height:2px; background:var(--red); flex-shrink:0;
}
.eyebrow--light { color:rgba(255,255,255,.5) }
.eyebrow--light::before { background:rgba(255,255,255,.35) }

.h2 { font-size:var(--t-xl); line-height:.95; margin-bottom:2rem }
.h2--light { color:var(--white) }
.h2 em { color:var(--red); font-style:normal }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-b); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  transition:background 150ms var(--ease), color 150ms, border-color 150ms;
  white-space:nowrap; cursor:pointer;
}
.btn-solid {
  background:var(--red); color:#fff; padding:.85rem 2rem; font-size:var(--t-sm);
}
.btn-solid:hover { background:var(--red-dk) }
.btn-solid.lg { padding:1.1rem 2.5rem; font-size:var(--t-base) }
.btn-solid.block { display:flex; justify-content:center; width:100% }

.btn-outline {
  border:1.5px solid rgba(255,255,255,.3); color:rgba(255,255,255,.7);
  padding:.8rem 2rem; font-size:var(--t-sm);
}
.btn-outline:hover { border-color:rgba(255,255,255,.7); color:#fff }

.btn-ghost-light {
  color:rgba(255,255,255,.6); font-family:var(--font-b); font-size:var(--t-sm);
  font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.4rem;
  border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:2px;
  transition:color 150ms, border-color 150ms;
}
.btn-ghost-light:hover { color:#fff; border-color:rgba(255,255,255,.6) }

.btn-white {
  background:#fff; color:var(--red); padding:1.1rem 2.5rem; font-size:var(--t-base);
}
.btn-white:hover { background:rgba(255,255,255,.88) }

/* ══════════════════════════════════════════════════════════
   NAV — ultra-clean, minimal
══════════════════════════════════════════════════════════ */
.nav {
  position:fixed; inset:0 0 auto; z-index:200;
  height:var(--nav-h);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--faint);
  transition:box-shadow .25s;
}
.nav.scrolled { box-shadow:0 1px 0 var(--faint), 0 4px 32px rgba(0,0,0,.06) }

.nav__inner {
  max-width:var(--max); margin-inline:auto;
  padding-inline:clamp(1.5rem,4vw,2.5rem);
  height:var(--nav-h); display:flex; align-items:center; gap:2rem;
}
.nav__fill { flex:1 }

.nav__logo { flex-shrink:0 }
.nav__logo-img { height:58px; width:auto; display:block; object-fit:contain }

/* Visually hidden but accessible to screen readers and search engines */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.nav__phone {
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--font-b); font-size:14px; font-weight:600; letter-spacing:.02em;
  color:var(--ink); flex-shrink:0; white-space:nowrap;
  transition:color .15s;
}
.nav__phone svg { color:var(--red) }
.nav__phone:hover { color:var(--red) }

.nav__cta {
  flex-shrink:0; background:var(--red); color:#fff;
  font-family:var(--font-b); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.6rem 1.5rem; transition:background .15s;
}
.nav__cta:hover { background:var(--red-dk) }

.nav__burger {
  display:none; flex-direction:column; gap:5px;
  width:40px; height:40px; align-items:center; justify-content:center; padding:.5rem;
}
.nav__burger span { display:block; width:20px; height:1.5px; background:var(--ink); transition:transform .2s, opacity .2s }
.nav__burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.nav__burger.open span:nth-child(2) { opacity:0 }
.nav__burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

.nav__mobile {
  position:absolute; top:var(--nav-h); inset-inline:0;
  background:#fff; border-bottom:2px solid var(--red);
  padding:1.5rem 1.75rem 2rem; display:flex; flex-direction:column; gap:1.25rem;
}
.nav__mobile[hidden] { display:none }
.nav__mobile nav { display:flex; flex-direction:column; border-top:1px solid var(--faint) }
.nav__mobile nav a {
  font-family:var(--font-b); font-size:var(--t-md); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.9rem 0; border-bottom:1px solid var(--faint);
  color:var(--ink); transition:color .15s;
}
.nav__mobile nav a:hover { color:var(--red) }
.nav__mobile-phone { font-family:var(--font-d); font-size:var(--t-lg); font-weight:700; color:var(--red) }
.nav__mobile-cta { display:block; text-align:center }

/* ══════════════════════════════════════════════════════════
   HERO — full-bleed cinematic
══════════════════════════════════════════════════════════ */
.hero {
  margin-top:var(--nav-h); position:relative;
  min-height:clamp(600px,92vh,1040px);
  display:grid; align-items:end;
  background:var(--black); overflow:hidden;
}

.hero__bg { position:absolute; inset:0 }
.hero__img {
  width:100%; height:100%; object-fit:cover;
  object-position:60% center; opacity:.45;
  transition:opacity 1.2s;
}
/* Left-to-right gradient — text pops left, photo shows right */
.hero__gradient {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,8,8,.98) 0%, rgba(8,8,8,.85) 35%, rgba(8,8,8,.3) 65%, rgba(8,8,8,0) 100%),
    linear-gradient(to top, rgba(8,8,8,.7) 0%, transparent 50%);
}

.hero__body {
  position:relative; z-index:1;
  max-width:var(--max); margin-inline:auto;
  padding:clamp(4rem,8vw,8rem) clamp(1.5rem,5vw,4rem);
  display:flex; flex-direction:column; gap:0;
}

.hero__label {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-b); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red);
  margin-bottom:1.75rem;
}
.hero__label::before { content:''; width:20px; height:2px; background:var(--red) }

.hero__h1 {
  font-size:var(--t-hero); font-weight:700; line-height:.9;
  color:#fff; letter-spacing:-.02em;
  margin-bottom:2.25rem; max-width:12ch;
}
.hero__h1 em { color:var(--red); font-style:normal }

.hero__sub {
  font-size:var(--t-md); color:rgba(255,255,255,.58);
  line-height:1.65; max-width:46ch; margin-bottom:3rem; font-weight:400;
}
.hero__sub strong { color:rgba(255,255,255,.9); font-weight:600 }

.hero__actions { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-bottom:5rem }

/* Stats row */
.hero__stats {
  display:flex; align-items:center;
  gap:0; flex-wrap:nowrap;
  padding-top:2.5rem;
  border-top:1px solid rgba(255,255,255,.1);
  width:fit-content;
}
.hero__stat { padding-right:3rem; flex-shrink:0 }
.hero__stat-val {
  display:block; font-family:var(--font-d);
  font-size:clamp(22px,3vw,36px); font-weight:700;
  color:var(--red); line-height:1; white-space:nowrap;
}
.hero__stat-lbl {
  display:block; font-size:var(--t-xs); font-weight:400;
  color:rgba(255,255,255,.38); margin-top:.3rem;
  letter-spacing:.04em; white-space:nowrap;
}
.hero__stat-div {
  width:1px; height:32px; background:rgba(255,255,255,.12);
  flex-shrink:0; margin-right:3rem; align-self:center;
}

/* ══════════════════════════════════════════════════════════
   PAIN — editorial two-column
══════════════════════════════════════════════════════════ */
.pain { background:var(--white) }

.pain__inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(4rem,7vw,8rem); align-items:start;
}

.pain__copy .h2 { max-width:16ch }
.pain__copy p {
  font-size:var(--t-base); color:var(--muted);
  line-height:1.8; margin-bottom:1.25rem; max-width:44ch;
}
.pain__copy strong { color:var(--ink); font-weight:600 }
.pain__punchline {
  font-size:var(--t-md)!important; color:var(--ink)!important;
  font-weight:600; font-style:italic; line-height:1.5!important;
  margin-top:2rem!important;
}

.pain__visual { display:flex; flex-direction:column; gap:0 }

.pain__img-frame {
  overflow:hidden; aspect-ratio:4/3; margin-bottom:2px;
}
.pain__img-frame img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease-out);
}
.pain__img-frame:hover img { transform:scale(1.04) }

.pain__cards { display:flex; flex-direction:column; gap:2px }

.pain__card {
  display:flex; align-items:stretch;
  background:var(--chalk); overflow:hidden;
  transition:background .15s;
}
.pain__card:hover { background:var(--stone) }
.pain__card-accent { width:3px; background:var(--red); flex-shrink:0 }
.pain__card-body { padding:1.25rem 1.5rem }
.pain__card-body h3 {
  font-family:var(--font-b); font-size:var(--t-sm); font-weight:600;
  text-transform:none; letter-spacing:-.01em; color:var(--ink);
  line-height:1.25; margin-bottom:.4rem;
}
.pain__card-body p { font-size:var(--t-xs); color:var(--muted); line-height:1.65 }

/* ══════════════════════════════════════════════════════════
   SOLUTION — immersive split with giant type
══════════════════════════════════════════════════════════ */
.solution { display:grid; grid-template-columns:1fr 1fr; min-height:700px }

.solution__left { position:relative; overflow:hidden }
.solution__left img { width:100%; height:100%; object-fit:cover }
.solution__left-overlay {
  position:absolute; inset:0;
  background:linear-gradient(130deg, rgba(8,8,8,.75) 0%, rgba(8,8,8,.3) 100%);
}

.solution__right {
  background:var(--black);
  padding:clamp(3.5rem,6vw,6rem) clamp(2.5rem,5vw,5rem);
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
/* Giant decorative numeral behind content */
.solution__right::before {
  content:'01 02 03';
  position:absolute; bottom:-2rem; right:-1rem;
  font-family:var(--font-d); font-size:160px; font-weight:900;
  color:rgba(255,255,255,.025); line-height:1; pointer-events:none;
  letter-spacing:-.02em; white-space:nowrap;
}

.solution__right .h2 { max-width:18ch; margin-bottom:1rem }
.solution__right .h2 em { color:var(--red); font-style:normal }
.solution__tagline {
  font-size:var(--t-base); color:rgba(255,255,255,.45);
  line-height:1.7; max-width:42ch; margin-bottom:3.5rem;
}

.solution__items { display:flex; flex-direction:column; gap:0 }
.solution__item {
  display:grid; grid-template-columns:52px 1fr;
  gap:0 1.5rem; padding:1.75rem 0;
  border-top:1px solid rgba(255,255,255,.07);
  align-items:start;
}
.solution__item:last-child { border-bottom:1px solid rgba(255,255,255,.07) }
.solution__num {
  font-family:var(--font-d); font-size:clamp(36px,3.5vw,48px);
  font-weight:900; color:rgba(255,255,255,.12); line-height:1;
  padding-top:2px;
}
.solution__item h3 {
  font-family:var(--font-d); font-size:var(--t-lg); font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; color:#fff;
  line-height:1.05; margin-bottom:.5rem;
}
.solution__item p {
  font-size:var(--t-sm); color:rgba(255,255,255,.45); line-height:1.7; max-width:34ch;
}

/* ══════════════════════════════════════════════════════════
   SERVICES — magazine-style mosaic
══════════════════════════════════════════════════════════ */
.services { background:var(--chalk) }

.services__intro {
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:2rem;
  margin-bottom:3rem; flex-wrap:wrap;
}
.services__intro .h2 { max-width:22ch; margin-bottom:0 }

.svc-grid {
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-template-rows:auto;
  gap:3px;
}

/* Card layout in the mosaic */
.svc-card { background:var(--white); display:flex; flex-direction:column; overflow:hidden; position:relative; transition:box-shadow .2s var(--ease) }
.svc-card:hover { box-shadow:0 12px 48px rgba(0,0,0,.1) }

.svc-card:nth-child(1) { grid-column:1/8 }   /* Collision — wide */
.svc-card:nth-child(2) { grid-column:8/13 }  /* Mechanical */
.svc-card:nth-child(3) { grid-column:1/5 }   /* Towing */
.svc-card:nth-child(4) { grid-column:5/9 }   /* Pickup */
.svc-card:nth-child(5) { grid-column:9/13 }  /* Detailing */

.svc-card--dark { background:var(--black) }

.svc-img {
  width:100%; overflow:hidden; flex-shrink:0;
}
.svc-img img {
  width:100%; aspect-ratio:16/9; object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.svc-card:hover .svc-img img { transform:scale(1.05) }

.svc-body { padding:1.75rem 2rem 2.25rem; flex:1; display:flex; flex-direction:column }

.svc-num {
  font-family:var(--font-b); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin-bottom:.75rem;
}

.svc-name {
  font-family:var(--font-d); font-size:var(--t-lg); font-weight:700;
  text-transform:uppercase; letter-spacing:.01em;
  color:var(--ink); line-height:1.05; margin-bottom:.65rem;
}
.svc-card--dark .svc-name { color:#fff }

.svc-desc {
  font-size:var(--t-sm); color:var(--muted); line-height:1.7; flex:1;
}
.svc-card--dark .svc-desc { color:rgba(255,255,255,.45) }

/* Rapid Repair block */
.rapid {
  margin-top:1.5rem; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.09);
}
.rapid-badge {
  display:inline-block; background:var(--red); color:#fff;
  font-family:var(--font-b); font-size:9px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.25rem .8rem; margin-bottom:.75rem;
}
.rapid-copy {
  font-size:var(--t-xs); color:rgba(255,255,255,.4);
  line-height:1.7; font-style:italic; margin-bottom:.75rem;
}
.rapid-guarantee {
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-b); font-size:var(--t-sm); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:#fff;
}
.rapid-guarantee svg { color:var(--red); width:16px; height:16px; flex-shrink:0 }

/* ══════════════════════════════════════════════════════════
   MARQUEE BREAK — kinetic text strip
══════════════════════════════════════════════════════════ */
.marquee-strip {
  background:var(--red); overflow:hidden; padding-block:.9rem;
  position:relative;
}
.marquee-track {
  display:flex; gap:0; white-space:nowrap;
  animation:marquee 28s linear infinite;
}
.marquee-track span {
  font-family:var(--font-b); font-size:clamp(11px,1.2vw,14px);
  font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  color:rgba(255,255,255,.85); padding-right:3rem; flex-shrink:0;
}
.marquee-track span.dot { color:rgba(255,255,255,.4); padding-right:3rem }
@keyframes marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }

/* ══════════════════════════════════════════════════════════
   ASSESSMENT — clean two-column with photo CTA
══════════════════════════════════════════════════════════ */
.assess { background:var(--white) }
.assess__inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(4rem,7vw,8rem); align-items:start;
}

.assess__copy .h2 { max-width:14ch }
.assess__intro { font-size:var(--t-base); color:var(--muted); line-height:1.8; margin-bottom:.75rem; max-width:44ch }
.assess__note { font-size:var(--t-sm); color:var(--smoke); font-style:italic; margin-bottom:3rem }

.steps { display:flex; flex-direction:column }
.step {
  display:flex; gap:1.5rem; align-items:flex-start;
  padding:1.25rem 0; border-bottom:1px solid var(--faint);
}
.step:last-child { border-bottom:none }
.step__num {
  font-family:var(--font-d); font-size:clamp(24px,2.5vw,32px);
  font-weight:700; color:var(--red); line-height:1;
  flex-shrink:0; width:28px; text-align:right; padding-top:2px;
}
.step__body { font-size:var(--t-sm); color:var(--muted); line-height:1.65; padding-top:4px }
.step__body strong { color:var(--ink); font-weight:600 }

/* CTA panel */
.assess__panel { position:sticky; top:calc(var(--nav-h) + 2rem) }
.assess__panel-img {
  width:100%; aspect-ratio:3/2; overflow:hidden;
}
.assess__panel-img img {
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  transition:transform .7s var(--ease-out);
}
.assess__panel:hover .assess__panel-img img { transform:scale(1.03) }

.assess__panel-body {
  background:var(--black); padding:2.25rem 2rem 2.5rem;
}
.assess__founding {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--red); color:#fff;
  font-family:var(--font-b); font-size:9px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .85rem; margin-bottom:1.25rem;
}
.assess__panel-body h3 {
  font-family:var(--font-d); font-size:var(--t-lg); font-weight:800;
  text-transform:uppercase; color:#fff; line-height:1.05; margin-bottom:1rem;
}
.assess__panel-body > p {
  font-size:var(--t-sm); color:rgba(255,255,255,.45); line-height:1.7; margin-bottom:2rem;
}
.assess__contact { margin-bottom:1.5rem }
.assess__contact-label {
  font-size:var(--t-xs); color:rgba(255,255,255,.3); font-family:var(--font-b);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:.2rem; display:block;
}
.assess__phone {
  display:block; font-family:var(--font-d);
  font-size:clamp(26px,3vw,34px); font-weight:700;
  color:#fff; line-height:1.1; transition:color .15s;
}
.assess__phone:hover { color:var(--red) }
.assess__email-link {
  font-size:var(--t-sm); color:rgba(255,255,255,.4); transition:color .15s;
}
.assess__email-link:hover { color:rgba(255,255,255,.75) }
.assess__panel-body .btn-solid { margin-top:.75rem; margin-bottom:.75rem }
.assess__fine {
  font-size:var(--t-xs)!important; color:rgba(255,255,255,.22)!important;
  text-align:center; font-style:italic;
}

/* ══════════════════════════════════════════════════════════
   STORY — bold editorial overlap
══════════════════════════════════════════════════════════ */
.story { background:var(--chalk) }
.story__inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(4rem,7vw,8rem); align-items:center;
}

.story__img-wrap { position:relative }
.story__img {
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
}
.story__badge {
  position:absolute; bottom:-1rem; right:-1rem;
  background:var(--red); color:#fff;
  font-family:var(--font-d); font-size:clamp(40px,5vw,72px);
  font-weight:900; line-height:1; letter-spacing:-.03em;
  padding:.4em .55em;
  box-shadow:0 16px 48px rgba(0,0,0,.2);
}

.story__copy .h2 { max-width:20ch }
.story__copy p {
  font-size:var(--t-base); color:var(--muted); line-height:1.8;
  margin-bottom:1.25rem; max-width:48ch;
}
.story__copy strong { color:var(--ink); font-weight:600 }

.founder {
  display:flex; align-items:center; gap:1.25rem;
  margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--faint);
}
.founder__av {
  width:50px; height:50px; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-size:16px; font-weight:800;
  color:#fff; flex-shrink:0; letter-spacing:.04em;
}
.founder__name {
  font-family:var(--font-b); font-size:var(--t-sm); font-weight:600;
  text-transform:none; letter-spacing:.01em; color:var(--ink);
}
.founder__role { font-size:var(--t-xs); color:var(--muted); margin-top:.2rem }

/* ══════════════════════════════════════════════════════════
   LOCATIONS — dark cinematic
══════════════════════════════════════════════════════════ */
.locs { background:var(--black) }
.locs__head { margin-bottom:3rem }

.locs__grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(255,255,255,.06);
}
.loc {
  background:var(--black); padding:2.5rem 2.25rem;
  position:relative; overflow:hidden;
  transition:background .2s;
}
.loc:hover { background:#111 }
.loc--featured { background:#0E0E0E }
.loc--featured::before {
  content:''; position:absolute; top:0; inset-inline:0;
  height:2px; background:var(--red);
}

.loc__num {
  font-family:var(--font-d); font-size:80px; font-weight:900;
  color:rgba(255,255,255,.04); line-height:1; margin-bottom:.75rem;
  letter-spacing:-.04em;
}
.loc__status {
  font-family:var(--font-b); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:.75rem;
}
.loc__status--open { color:var(--red) }
.loc__status--soon { color:rgba(255,255,255,.3) }
.loc__name {
  font-family:var(--font-d); font-size:var(--t-xl); font-weight:700;
  text-transform:uppercase; color:#fff; line-height:.95;
  margin-bottom:1.25rem; letter-spacing:-.01em;
}
.loc__detail { font-size:var(--t-sm); color:rgba(255,255,255,.38); line-height:1.7 }

/* ══════════════════════════════════════════════════════════
   FINAL CTA — full-bleed cinematic
══════════════════════════════════════════════════════════ */
.final {
  position:relative; overflow:hidden; background:var(--black);
  min-height:clamp(480px,65vh,750px);
  display:flex; align-items:center; justify-content:center;
}
.final__bg { position:absolute; inset:0 }
.final__bg img { width:100%; height:100%; object-fit:cover; opacity:.3 }
.final__bg-overlay {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(8,8,8,.4) 0%, rgba(8,8,8,.9) 100%);
}
/* Red accent line top */
.final::before {
  content:''; position:absolute; top:0; inset-inline:0;
  height:3px; background:var(--red); z-index:2;
}
.final__content {
  position:relative; z-index:1; text-align:center;
  padding:clamp(4rem,8vw,6rem) clamp(1.5rem,5vw,4rem);
}
.final__h2 {
  font-size:var(--t-2xl); font-weight:900; color:#fff;
  line-height:.9; letter-spacing:-.025em; margin-bottom:1.5rem;
}
.final__sub {
  font-size:var(--t-md); color:rgba(255,255,255,.5);
  margin-bottom:3rem; max-width:44ch; margin-inline:auto;
}
.final__phone {
  display:block; font-family:var(--font-d);
  font-size:clamp(42px,7vw,80px); font-weight:700;
  color:#fff; letter-spacing:.02em; line-height:1;
  margin-bottom:.75rem; transition:color .15s;
}
.final__phone:hover { color:var(--red) }
.final__email {
  font-size:var(--t-base); color:rgba(255,255,255,.38); margin-bottom:3rem;
}
.final__email a { color:inherit; transition:color .15s }
.final__email a:hover { color:rgba(255,255,255,.75) }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer {
  background:#040404; border-top:1px solid rgba(255,255,255,.05);
  padding-block:2rem;
}
.footer__inner {
  max-width:var(--max); margin-inline:auto;
  padding-inline:clamp(1.5rem,5vw,4rem);
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}
.footer__logo-img {
  height:38px; width:auto;
  filter:brightness(0) invert(1); opacity:.55; transition:opacity .15s;
}
.footer__logo:hover .footer__logo-img { opacity:.85 }
.footer__mid {
  display:flex; flex-direction:column; align-items:center;
  gap:.35rem; text-align:center;
}
.footer__mid a { font-size:var(--t-sm); color:rgba(255,255,255,.4); transition:color .15s }
.footer__mid a:hover { color:rgba(255,255,255,.75) }
.footer__mid span { font-size:var(--t-xs); color:rgba(255,255,255,.2); letter-spacing:.04em }
.footer__right { text-align:right }
.footer__right p { font-size:var(--t-xs); color:rgba(255,255,255,.2); line-height:1.7 }

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════════════ */
.sr { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.sr.on { opacity:1; transform:none }
.sr-d1 { transition-delay:.08s }
.sr-d2 { transition-delay:.16s }
.sr-d3 { transition-delay:.24s }
.sr-d4 { transition-delay:.32s }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .svc-grid { grid-template-columns:1fr 1fr }
  .svc-card:nth-child(n) { grid-column:auto }
  .svc-card:nth-child(1) { grid-column:1/3 }
  .solution { grid-template-columns:1fr }
  .solution__left { min-height:380px }
}

@media(max-width:768px) {
  .nav__phone { display:none }
  .nav__cta { display:none }
  .nav__burger { display:flex }
  .nav__logo-img { height:44px }

  .hero__img { opacity:.25 }
  .hero__gradient { background:linear-gradient(to bottom, rgba(8,8,8,.9), rgba(8,8,8,.75)) }
  .hero__stats {
    display:grid; grid-template-columns:1fr 1fr;
    gap:1rem 0; width:100%; padding-bottom:0;
  }
  .hero__stat { padding-right:0 }
  .hero__stat-div { display:none }

  .pain__inner,
  .assess__inner,
  .story__inner { grid-template-columns:1fr }

  .story__img-wrap { margin-bottom:1rem }
  .story__badge { font-size:clamp(36px,10vw,52px); bottom:-.75rem; right:-.75rem }

  .svc-grid { grid-template-columns:1fr }
  .svc-card:nth-child(n) { grid-column:auto }
  .svc-body { padding:1.25rem 1.5rem 1.5rem }

  .locs__grid { grid-template-columns:1fr }
  .locs__grid { background:none; gap:2px }
  .loc { padding:2rem 1.5rem }

  .assess__panel { position:static }

  /* Better touch targets for mobile nav links */
  .nav__mobile nav a { padding:1.1rem 0; min-height:48px; display:flex; align-items:center }
  .nav__burger { min-width:44px; min-height:44px }

  .footer__inner { flex-direction:column; align-items:flex-start; gap:1.5rem }
  .footer__mid { align-items:flex-start; text-align:left }
  .footer__right { text-align:left }

  /* Reduce vertical padding on mobile for tighter sections */
  .vpad { padding-block:clamp(3.5rem,7vw,6rem) }

  /* Solution section mobile improvements */
  .solution__right { padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem) }

  /* Assessment section: show CTA panel first on mobile */
  .assess__inner { display:flex; flex-direction:column-reverse; gap:2.5rem }
}

@media(max-width:480px) {
  .hero__h1 { font-size:clamp(3.5rem,14vw,5rem) }
  .hero__actions { flex-direction:column; align-items:stretch }
  .hero__actions .btn-solid { text-align:center; justify-content:center }
  .hero__actions .btn-ghost-light { text-align:center; justify-content:center }
  .hero__stats { grid-template-columns:1fr 1fr; gap:.75rem 0 }
  .final__h2 { font-size:clamp(2.75rem,12vw,4rem) }
  .final__phone { font-size:clamp(32px,9vw,48px) }
  .pain__card-body { padding:1rem 1.25rem }

  /* Tighter container padding on small screens */
  .container { padding-inline:1.25rem }
}

/* ══════════════════════════════════════════════════════════
   FIX 1 — Phone always visible + floating mobile CTA
══════════════════════════════════════════════════════════ */

/* Show full number on desktop, hide short version */
.nav__phone-short { display: none }
.nav__phone-full  { display: inline }

/* Floating mobile CTA — hidden on desktop */
.mobile-cta-float {
  display: none;
}

@media (max-width: 768px) {
  /* Keep phone icon + number visible at all times */
  .nav__phone { display: flex !important }
  /* On very narrow screens show shortened number to save space */
  .nav__phone-full  { display: none }
  .nav__phone-short { display: inline }

  /* Float CTA bar fixed at bottom */
  .mobile-cta-float {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--red);
    color: #fff;
    font-family: var(--font-b);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 1.5rem;
    /* safe area for iOS home indicator */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    transition: background 150ms;
  }
  .mobile-cta-float:hover,
  .mobile-cta-float:active { background: var(--red-dk) }

  /* Push page content up so the float doesn't overlap */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)) }
}

/* ══════════════════════════════════════════════════════════
   FIX 4 — Trust bar
══════════════════════════════════════════════════════════ */
.trust-bar {
  background: #F0EFED;
  border-top: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
  padding-block: 1.75rem;
}

.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}

.trust-bar__stat {
  flex: 1;
  text-align: center;
  padding-inline: 1.5rem;
}

.trust-bar__val {
  display: block;
  font-family: var(--font-d);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--red);
  line-height: 1;
  white-space: nowrap;
}

.trust-bar__lbl {
  display: block;
  font-family: var(--font-b);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--muted);
  margin-top: .35rem;
  white-space: nowrap;
}

.trust-bar__div {
  width: 1px;
  height: 36px;
  background: var(--faint);
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 600px) {
  .trust-bar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  /* Hide the vertical dividers in grid mode */
  .trust-bar__div { display: none }
  .trust-bar__stat {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--faint);
    text-align: center;
  }
  /* Remove bottom border on last row */
  .trust-bar__stat:nth-child(5),
  .trust-bar__stat:nth-child(7) { border-bottom: none }
  /* Add right border to left column items */
  .trust-bar__stat:nth-child(1),
  .trust-bar__stat:nth-child(5) { border-right: 1px solid var(--faint) }
  .trust-bar__lbl { white-space: normal }
}

/* ══════════════════════════════════════════════════════════
   FAQ SECTION
══════════════════════════════════════════════════════════ */
.faq { background: var(--chalk) }
.faq .h2 { max-width: 28ch }

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2.5rem;
  list-style: none;
}

.faq__item {
  border-top: 1px solid var(--faint);
}
.faq__item:last-child { border-bottom: 1px solid var(--faint) }

.faq__a {
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.75;
  max-width: 72ch;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS SECTION
══════════════════════════════════════════════════════════ */
.testimonials { background: var(--white) }
.testimonials .h2 { max-width: 26ch }

.testi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 2.5rem;
}

.testi__card {
  background: var(--chalk);
  padding: 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.testi__quote {
  font-size: var(--t-base);
  color: var(--ink);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}
.testi__quote::before { content: none }

.testi__footer { border-top: 1px solid var(--faint); padding-top: 1rem }

.testi__name {
  font-family: var(--font-b);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.testi__role {
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: .2rem;
}

@media(max-width: 768px) {
  .testi__grid { grid-template-columns: 1fr }
}

/* ══════════════════════════════════════════════════════════
   FOOTER LOCATION DESC
══════════════════════════════════════════════════════════ */
.footer__location-desc {
  font-size: 10px !important;
  color: rgba(255,255,255,.15) !important;
  line-height: 1.5;
  margin-top: .35rem;
  max-width: 38ch;
}

/* ══════════════════════════════════════════════════════════
   MOBILE TOUCH & UX OPTIMIZATIONS
══════════════════════════════════════════════════════════ */

/* Remove tap highlight flash on iOS / Android */
@media (hover: none) and (pointer: coarse) {
  a, button { -webkit-tap-highlight-color: transparent }
}

/* Minimum touch target sizes for all interactive elements */
.btn, .btn-solid, .btn-outline, .btn-white, .btn-ghost-light {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* FAQ accordion */
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--font-b);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  padding: 1.5rem 0;
  list-style: none;
  min-height: 48px;
}
.faq__item summary::-webkit-details-marker { display: none }

.faq__item summary::after {
  content: '+';
  font-family: var(--font-d);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--red);
  flex-shrink: 0;
  margin-left: 1rem;
  line-height: 1;
  transition: transform .2s var(--ease);
}
.faq__item[open] summary::after {
  content: '\2212';
}

.faq__item .faq__a {
  padding-bottom: 1.5rem;
}

/* Step items — better touch spacing */
@media (max-width: 768px) {
  .step { padding:1.5rem 0; gap:1.25rem }
  .step__num { width:auto; text-align:left }

  /* Testimonial cards — add gap between stacked cards */
  .testi__card { padding:1.5rem }

  /* Buttons full-width on small mobile */
  .assess__panel-body .btn-solid { min-height:52px; font-size:var(--t-base) }
}

/* Improve text readability on small screens */
@media (max-width: 480px) {
  body { line-height: 1.7 }
  .hero__sub { font-size:var(--t-base); line-height:1.7 }
  .solution__item p { max-width:none }
  .pain__copy p { max-width:none }
  .story__copy p { max-width:none }

  /* Full-width buttons on very small screens */
  .btn-solid.lg { width:100%; justify-content:center }
  .btn-white.lg { width:100%; justify-content:center }
}