/* ============================================================
   EvoVero — Design System
   Charcoal + Calhoun orange, highway-lane motif, fully rounded.
   ============================================================ */

:root {
  /* Brand palette — Calhoun Transport: charcoal + #fc6000 orange + cool grey */
  --char:        #1B1D21;
  --char-deep:   #14161A;
  --char-abyss:  #0D0F12;
  --orange:       #FC6000;
  --orange-bright:#FF7D2B;
  --orange-light: #FFB27A;
  --white:       #FAFAFA;

  /* Functional surfaces */
  --canvas:      #F5F6F8;   /* warm off-white page bg */
  --surface:     #FFFFFF;   /* cards */
  --surface-2:   #ECEFF3;   /* recessed */
  --ink:         #1A1D21;   /* near-black warm text on light */
  --ink-soft:    #545C66;   /* muted body on light */
  --line:        #DDE2E8;   /* hairline */

  /* On-dark text */
  --on-dark:        #F4F6F8;
  --on-dark-soft:   #B7BFC9;
  --on-dark-faint:  rgba(255,255,255,.10);

  /* Gradients */
  --grad-hero: radial-gradient(120% 120% at 80% -10%, #3A2415 0%, rgba(58,36,21,0) 55%),
               radial-gradient(90% 90% at 0% 110%, #4A2708 0%, rgba(74,39,8,0) 50%),
               linear-gradient(160deg, #1E2126 0%, #14161A 55%, #0D0F12 100%);
  --grad-accent: linear-gradient(135deg, var(--orange-bright) 0%, var(--orange) 60%, #C24A00 120%);
  --grad-text: linear-gradient(100deg, #FFFFFF 0%, #FFCDA6 55%, #FFB27A 100%);

  /* Radius */
  --r-xs:  8px;
  --r-sm:  12px;
  --r:     16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-pill: 999px;

  /* Shadows — soft, warm-tinted */
  --sh-sm: 0 2px 8px rgba(18,22,28,.07);
  --sh:    0 14px 36px rgba(18,22,28,.11), 0 2px 6px rgba(18,22,28,.05);
  --sh-lg: 0 30px 70px rgba(12,15,20,.17), 0 6px 16px rgba(12,15,20,.07);
  --sh-glow: 0 18px 50px rgba(252,96,0,.32);

  /* Type */
  --font-head: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --maxw: 1200px;
  --maxw-wide: 1320px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 9vw, 132px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { border-radius: var(--r); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
h4 { font-size: 1.12rem; }
p  { color: var(--ink-soft); }
.lead { font-size: clamp(1.08rem, 1.7vw, 1.32rem); color: var(--ink-soft); line-height: 1.55; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--maxw-wide); }
.section { padding-block: var(--section-y); position: relative; }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); padding: 7px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.eyebrow--on-dark { color: var(--orange-light); background: rgba(255,178,122,.10); border-color: rgba(255,178,122,.20); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange-bright); box-shadow: 0 0 0 4px rgba(255,125,43,.20); }
.section-head { max-width: 740px; margin-inline: auto; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head p { margin-top: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: 15px 28px; border-radius: var(--r-pill);
  border: 1px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--grad-accent); color: #fff; box-shadow: var(--sh-glow); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 26px 70px rgba(252,96,0,.42); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: var(--sh-sm); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--orange-light); background: var(--surface); }
.btn--on-dark { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.btn--on-dark:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); }
.btn--lg { padding: 17px 34px; font-size: 1.06rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 600; color: var(--orange); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease, padding .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
  padding-block: 13px; border-bottom: 1px solid transparent;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* Blur/solid bar treatment (applied when stuck, and always on inner pages) */
.nav.is-stuck, .nav--solid {
  background: rgba(245,246,248,.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line); box-shadow: var(--sh-sm);
}
.nav.is-stuck { padding-block: 11px; }

/* Homepage only: hide at the very top, reveal once the user scrolls */
.nav--hero { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.nav--hero.is-stuck { transform: none; opacity: 1; pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--ink); letter-spacing: -.02em; }
.brand img { height: 34px; width: auto; border-radius: 9px; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  font-family: var(--font-head); font-weight: 500; font-size: .95rem; color: var(--ink-soft);
  padding: 9px 14px; border-radius: var(--r-pill); transition: color .2s ease, background .2s ease;
}
.nav__links a:hover { color: var(--ink); background: var(--surface-2); }
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); align-items: center; justify-content: center; }
.nav__toggle span { position: relative; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: background .2s; }
.nav__toggle span::before, .nav__toggle span::after { content:''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease; }
.nav__toggle span::before { top: -6px; } .nav__toggle span::after { top: 6px; }

/* Dropdown */
.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 12px; min-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease; z-index: 110;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop a { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); align-items: flex-start; }
.drop a:hover { background: var(--surface-2); }
.drop .ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-accent); color: #fff; }
.drop .ic svg { width: 19px; height: 19px; }
.drop .t { display: block; font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--ink); }
.drop .d { display: block; margin-top: 3px; font-size: .82rem; color: var(--ink-soft); line-height: 1.4; }

/* ============================================================
   Hero (sticky stacked-reveal base)
   ============================================================ */
.hero {
  position: sticky; top: 0; z-index: 0;
  min-height: 100svh; display: flex; align-items: center;
  background: var(--grad-hero); color: var(--on-dark);
  overflow: hidden; isolation: isolate;
}
/* Everything after the hero rides above it so the pinned hero never bleeds through */
.after-hero { position: relative; z-index: 1; }
.hero__ribbon { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9; }
.hero__ribbon svg { position: absolute; width: 140%; height: auto; left: -20%; }
.hero__grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; width: 100%; }
.hero h1 { color: #fff; }
.hero h1 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { margin-top: 22px; font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--on-dark-soft); max-width: 540px; line-height: 1.55; }
.hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__trust { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 22px 30px; align-items: center; color: var(--on-dark-soft); font-size: .9rem; }
.hero__trust .star { color: #FFC861; }
.hero__trust b { color: #fff; font-family: var(--font-head); }

/* Hero visual — built "results" card, no photo */
.hero__visual { position: relative; }
.glass-card {
  background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-xl);
  padding: 26px; box-shadow: var(--sh-lg); backdrop-filter: blur(10px);
}
.glass-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.glass-head .t { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: #fff; }
.glass-head .t .pulse { width: 9px; height: 9px; border-radius: 50%; background: #6BE0A0; box-shadow: 0 0 0 4px rgba(107,224,160,.18); }
.glass-head .live { font-size: .72rem; font-weight: 600; color: #6BE0A0; background: rgba(107,224,160,.12); padding: 5px 11px; border-radius: var(--r-pill); }
.glass-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.glass-chips span { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--on-dark); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); padding: 7px 13px; border-radius: var(--r-pill); }
.glass-chips span svg { width: 14px; height: 14px; color: var(--orange-light); }
.glass-bars { display: flex; align-items: flex-end; gap: 10px; height: 116px; margin-top: 18px; }
.glass-bars i { flex: 1; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--orange-bright), rgba(255,125,43,.25)); display: block; }
.lead-pill { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); padding: 13px 16px; margin-top: 14px; }
.lead-pill .av { width: 36px; height: 36px; border-radius: 50%; background: var(--grad-accent); flex: none; display:grid; place-items:center; color:#fff; font-family:var(--font-head); font-weight:600; font-size:.85rem;}
.lead-pill .tx { font-size: .85rem; color: var(--on-dark); line-height: 1.3; }
.lead-pill .tx b { color: #fff; font-family: var(--font-head); }
.lead-pill .badge { margin-left: auto; font-size: .72rem; font-weight: 600; color: #7BFFB0; background: rgba(46,204,113,.14); padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; }

/* ============================================================
   Panel that rises OVER the sticky hero (stacked reveal)
   ============================================================ */
.over-hero { position: relative; z-index: 3; margin-top: -42px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--canvas); box-shadow: 0 -30px 60px rgba(10,13,17,.28); }
.panel { position: relative; background: var(--canvas); }
.panel--dark { background: var(--char-deep); color: var(--on-dark); }
.panel--dark h2, .panel--dark h3 { color: #fff; }
.panel--dark p { color: var(--on-dark-soft); }
.panel--rise { border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: -36px; z-index: 3; box-shadow: 0 -24px 50px rgba(10,13,17,.16); }

/* ============================================================
   Cards & grids
   ============================================================ */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px; box-shadow: var(--sh-sm); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: rgba(255,178,122,.5); }
.card .ic, .feat-ic {
  width: 54px; height: 54px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--grad-accent); color: #fff; box-shadow: var(--sh-glow); margin-bottom: 20px;
}
.card .ic svg, .feat-ic svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 10px; color: var(--ink); }
.card p { font-size: .98rem; color: var(--ink-soft); }
.card__link { margin-top: 18px; }

.card--dark { background: linear-gradient(165deg, #1F2228, #15171B); border-color: rgba(255,178,122,.14); color: var(--on-dark); }
.card--dark h3 { color: #fff; } .card--dark p { color: var(--on-dark-soft); }
.card--feature { display: flex; flex-direction: column; }

/* number-led step cards (white, dark text — always readable on dark panels) */
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh); position: relative; transition: transform .3s ease, box-shadow .3s ease; }
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.step__n { font-family: var(--font-head); font-weight: 700; font-size: 3rem; line-height: 1; letter-spacing: -.04em;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .95; }
.step h3 { margin: 14px 0 10px; color: var(--ink); }
.step p { color: var(--ink-soft); }

/* ============================================================
   Stats band
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat b { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.4rem,5vw,3.4rem); letter-spacing: -.03em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--on-dark-soft); font-size: .95rem; }

/* ============================================================
   Pricing / stages (no fixed numbers)
   ============================================================ */
.stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-sm); transition: transform .3s ease, box-shadow .3s ease; }
.stage:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.stage__tag { font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.stage h3 { margin: 12px 0; color: var(--ink); }
.stage p { color: var(--ink-soft); }
.stage ul { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.stage li { display: flex; gap: 11px; font-size: .96rem; color: var(--ink-soft); }
.stage li svg { flex: none; width: 19px; height: 19px; color: var(--orange); margin-top: 2px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 24px; margin-bottom: 14px; box-shadow: var(--sh-sm); transition: box-shadow .25s; }
.faq details[open] { box-shadow: var(--sh); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 0; font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform .25s, background .25s, color .25s; color: var(--orange); }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--grad-accent); color: #fff; border-color: transparent; }
.faq p { padding: 0 0 20px; font-size: .98rem; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { background: var(--grad-hero); color: var(--on-dark); border-radius: var(--r-xl); padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; box-shadow: var(--sh-lg); }
.cta-band h2 { color: #fff; position: relative; z-index: 2; }
.cta-band p { color: var(--on-dark-soft); position: relative; z-index: 2; max-width: 560px; margin: 16px auto 0; }
.cta-band .hero__cta { justify-content: center; position: relative; z-index: 2; }
.cta-band .hero__ribbon { opacity: .55; }

/* ============================================================
   Footer
   ============================================================ */
.footer { position: relative; z-index: 1; background: var(--char-abyss); color: var(--on-dark-soft); padding-block: 70px 36px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer .brand { color: #fff; }
.footer p { color: var(--on-dark-soft); font-size: .95rem; margin-top: 16px; max-width: 300px; }
.footer h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.footer__col a { display: block; padding: 7px 0; color: var(--on-dark-soft); font-size: .95rem; transition: color .2s; }
.footer__col a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; padding-top: 28px; font-size: .86rem; }
.footer__bottom a:hover { color: #fff; }

/* ============================================================
   Scroll reveal + progress
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: var(--grad-accent); transition: width .1s linear; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 940px) {
  .hero { position: relative; min-height: auto; padding-block: 130px 70px; }
  .over-hero, .panel--rise { margin-top: 0; border-radius: 0; box-shadow: none; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .grid-3, .grid-4, .stats, .footer__top { grid-template-columns: 1fr 1fr; }
  .nav__links, .nav__cta .btn--ghost { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__links { display: flex; position: absolute; top: calc(100% + 10px); left: var(--gutter); right: var(--gutter);
    flex-direction: column; align-items: stretch; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 12px; box-shadow: var(--sh-lg); gap: 2px; }
  .nav.is-open .nav__links a { padding: 13px 16px; }
  .drop { position: static; transform: none; min-width: 0; grid-template-columns: 1fr; box-shadow: none; border: none; padding: 4px 0 4px 12px; opacity: 1; visibility: visible; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4, .stats, .footer__top { grid-template-columns: 1fr; }
  .card, .step, .stage { padding: 24px; }
  .btn { width: 100%; }
  .hero__cta .btn { width: 100%; }
  .footer__top { gap: 30px; }
}

/* ============================================================
   Inner pages — page hero + body
   ============================================================ */
.page-hero { position: relative; background: var(--grad-hero); color: var(--on-dark); overflow: hidden; isolation: isolate; padding: 142px 0 clamp(64px, 8vw, 104px); }
.page-hero .hero__ribbon { opacity: .85; }
.page-hero__inner { position: relative; z-index: 2; max-width: 840px; }
.page-hero h1 { color: #fff; margin-top: 18px; }
.page-hero h1 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero p { color: var(--on-dark-soft); margin-top: 18px; max-width: 640px; font-size: clamp(1.05rem,1.5vw,1.25rem); line-height: 1.55; }
.page-hero .hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.page-body { position: relative; z-index: 2; background: var(--canvas); border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: -30px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; color: var(--on-dark-soft); position: relative; z-index: 2; }
.breadcrumb svg { width: 13px; height: 13px; flex: none; opacity: .6; }
.breadcrumb a:hover { color: #fff; }

/* Included / checklist grid */
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.incl-item { display: flex; gap: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--sh-sm); transition: transform .25s ease, box-shadow .25s ease; }
.incl-item:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.incl-item .c { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-accent); color: #fff; box-shadow: var(--sh-glow); }
.incl-item .c svg { width: 19px; height: 19px; }
.incl-item h4 { margin-bottom: 5px; color: var(--ink); }
.incl-item p { font-size: .92rem; color: var(--ink-soft); }

/* Two-column split (text + panel) */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,64px); align-items: center; }
.split--narrow { grid-template-columns: 1fr 1fr; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.contact-method { display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); margin-bottom: 14px; }
.contact-method .c { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-accent); color: #fff; }
.contact-method .c svg { width: 20px; height: 20px; }
.contact-method .t { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.contact-method .d { font-size: .9rem; color: var(--ink-soft); }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px,4vw,36px); box-shadow: var(--sh); }
.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--font-head); font-weight: 500; font-size: .9rem; margin-bottom: 7px; color: var(--ink); }
.field input, .field textarea, .field select { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--canvas); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--orange-bright); box-shadow: 0 0 0 4px rgba(255,125,43,.14); }
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkrow { display: flex; gap: 18px; flex-wrap: wrap; }
.checkrow label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: .95rem; color: var(--ink-soft); margin: 0; }
.checkrow input { width: auto; }
.form-note { font-size: .82rem; color: var(--ink-soft); margin-top: 12px; text-align: center; }

/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .3s ease, box-shadow .3s ease; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.post-card .thumb { aspect-ratio: 16/10; background: var(--grad-hero); position: relative; overflow: hidden; display: grid; place-items: center; }
.post-card .thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.post-card .thumb .pl { position: relative; z-index: 2; font-family: var(--font-head); font-weight: 700; color: rgba(255,255,255,.92); font-size: 1.1rem; padding: 0 24px; text-align: center; letter-spacing: -.01em; }
.post-card .body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card .meta { font-size: .8rem; color: var(--orange); font-family: var(--font-head); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.post-card h3 { font-size: 1.2rem; }
.post-card p { font-size: .94rem; color: var(--ink-soft); }
.post-card .link-arrow { margin-top: auto; }
.empty-note { text-align: center; color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 48px 24px; }

/* Article (blog post body) */
.article { max-width: 760px; margin-inline: auto; }
.article > * { margin-bottom: 18px; }
.article h2 { margin: 40px 0 10px; }
.article h3 { margin: 28px 0 8px; }
.article p, .article li { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }
.article ul { padding-left: 0; }
.article li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.article li::before { content: ''; position: absolute; left: 7px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.article a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

/* Legal prose */
.prose { max-width: 800px; margin-inline: auto; }
.prose h2 { margin: 38px 0 12px; }
.prose h3 { margin: 26px 0 8px; font-size: 1.2rem; }
.prose p { margin-bottom: 14px; }
.prose ul { padding-left: 0; margin-bottom: 14px; }
.prose li { position: relative; padding-left: 26px; margin-bottom: 8px; color: var(--ink-soft); }
.prose li::before { content: ''; position: absolute; left: 6px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 940px) {
  .incl, .contact-grid, .split, .split--narrow, .post-grid { grid-template-columns: 1fr 1fr; }
  .split__visual { display: none; }
}
@media (max-width: 620px) {
  .incl, .contact-grid, .split, .split--narrow, .post-grid, .field-row { grid-template-columns: 1fr; }
  .page-hero { padding-top: 116px; }
  .page-body { border-radius: 0; margin-top: 0; }
}

/* Motion off */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero { position: relative; }
  .over-hero, .panel--rise, .page-body { margin-top: 0; }
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Calhoun Transport additions — photo hero, gallery, copy blocks
   ============================================================ */

/* Photo hero: image layer under a left-biased dark gradient */
.hero--photo { background: var(--char-deep); }
.hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.hero__shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(13,15,18,.86) 0%, rgba(13,15,18,.62) 42%, rgba(13,15,18,.34) 68%, rgba(13,15,18,.18) 100%); }
.hero--photo .hero__inner { grid-template-columns: 1fr; max-width: var(--maxw); }
.hero--photo .hero__content { max-width: 640px; }

/* Page hero photo variant (inner pages) */
.page-hero--photo { background: var(--char-deep); }
.page-hero--photo .hero__photo { opacity: .38; }
.page-hero--photo .hero__shade { background: linear-gradient(90deg, rgba(13,15,18,.9), rgba(13,15,18,.55) 60%, rgba(13,15,18,.35)); }

/* Photo gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; border-radius: 0; transition: transform .4s ease; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; inset: auto 0 0 0; padding: 26px 16px 12px; font-size: .82rem; color: #fff;
  background: linear-gradient(180deg, rgba(13,15,18,0), rgba(13,15,18,.72)); font-family: var(--font-head); font-weight: 500; }

/* Photo + text split with image */
.split__img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.split__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Checklist (in-copy) */
.checks { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.checks li { display: flex; gap: 11px; color: var(--ink-soft); }
.checks li svg { flex: none; width: 19px; height: 19px; color: var(--orange); margin-top: 4px; }
.panel--dark .checks li { color: var(--on-dark-soft); }
.panel--dark .checks li svg { color: var(--orange-light); }


/* Prose content blocks on service/location pages */
.copy { max-width: 820px; margin-inline: auto; }
.copy h2 { margin: 44px 0 14px; }
.copy h3 { margin: 26px 0 10px; }
.copy p { margin-bottom: 15px; font-size: 1.03rem; line-height: 1.7; }
.copy ul { padding-left: 0; margin: 0 0 15px; }
.copy li { position: relative; padding-left: 28px; margin-bottom: 9px; color: var(--ink-soft); font-size: 1.03rem; line-height: 1.6; }
.copy li::before { content: ''; position: absolute; left: 7px; top: 11px; width: 7px; height: 7px; border-radius: 2px; background: var(--orange); }
.copy a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.copy strong { color: var(--ink); }

/* Responsive additions — keep mobile declarations inside media queries */
@media (max-width: 940px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .hero--photo .hero__content { max-width: 100%; }
}
@media (max-width: 620px) {
  .gallery { grid-template-columns: 1fr; }
  .award { flex-direction: column; }
}

/* Nav refinements (mobile state re-declared inside media query per cascade rule) */
.brand span { white-space: nowrap; }
.drop--areas { grid-template-columns: 1fr 1fr; }
@media (max-width: 940px) {
  .drop--areas { grid-template-columns: 1fr; }
}

/* ============================================================
   2026-07-17 round 2 — nav nowrap, contact-card stacking, hero form
   (appended: base rules here beat earlier media queries; mobile
   states re-declared inside media queries below per cascade rule)
   ============================================================ */

/* Nav links never wrap to two lines */
.nav__links a { white-space: nowrap; }

/* Contact method cards: label stacks above detail */
.contact-method .t, .contact-method .d { display: block; }

/* Homepage hero split: content left, estimate form right */
.hero--photo .hero__inner--split { grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero--photo .hero__inner--split .hero__content { max-width: 620px; }
.hero__form { width: 100%; max-width: 470px; justify-self: end; }
.form-card--hero { padding: clamp(20px, 2.4vw, 30px); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.form-card--hero .field { margin-bottom: 12px; }
.form-card--hero .field textarea { min-height: 84px; }
.hero-form__title { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.hero-form__sub { font-size: .9rem; color: var(--ink-soft); margin: 4px 0 16px; }
.form-card--hero .form-note { margin-top: 10px; }

/* Hero split responsive: stack form under content, full width */
@media (max-width: 1020px) {
  .hero--photo .hero__inner--split { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-block: 150px 80px; }
  .hero__form { max-width: 640px; justify-self: stretch; }
}

/* ============================================================
   Calhoun Transport — dark navigation bar
   The header background is DARK, so the logo file used in the
   header and footer is /img/logo-light.png. Do not swap in
   logo.png here; it is the light-background variant.
   Base rules first, mobile states re-declared inside the media
   query below per the cascade rule.
   ============================================================ */
.nav.is-stuck, .nav--solid {
  background: rgba(20, 22, 26, .90);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, .10);
  box-shadow: 0 8px 30px rgba(10, 13, 17, .28);
}
.brand { color: #fff; gap: 0; }
.brand img { height: 42px; width: auto; border-radius: 0; }
.nav__links a { color: rgba(244, 246, 248, .80); }
.nav__links a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.nav .btn--ghost {
  color: #fff; background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .20); box-shadow: none;
}
.nav .btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); }
.nav__toggle { border-color: rgba(255, 255, 255, .20); background: rgba(255, 255, 255, .07); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { background: #fff; }
.footer .brand img { height: 46px; }

/* Phone number in the header reads as the primary action */
.nav__cta .btn--ghost { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ============================================================
   Calhoun Transport — sticky mobile call bar
   ============================================================ */
.callbar { display: none; }

/* ============================================================
   Calhoun Transport — hero trust row and inline note
   ============================================================ */
.hero__trust b { color: #fff; }
.note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--orange); border-radius: var(--r-sm);
  padding: 16px 18px; margin: 22px 0;
}
.note svg { flex: none; width: 20px; height: 20px; color: var(--orange); margin-top: 3px; }
.note p { margin: 0; font-size: .96rem; }

/* Chip row for "what we haul" style lists */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 500; font-size: .92rem;
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 9px 16px; box-shadow: var(--sh-sm);
}
.chip svg { width: 15px; height: 15px; color: var(--orange); }
.panel--dark .chip { color: var(--on-dark-soft); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
.panel--dark .chip svg { color: var(--orange-light); }

/* ============================================================
   Calhoun Transport — responsive
   Mobile states re-declared here so appended base rules above do
   not beat the earlier media queries.
   ============================================================ */
@media (max-width: 940px) {
  .nav.is-open .nav__links { background: var(--surface); border-color: var(--line); }
  .nav.is-open .nav__links a { color: var(--ink); }
  .nav.is-open .nav__links a:hover { color: var(--ink); background: var(--surface-2); }
  .nav.is-open .drop .t { color: var(--ink); }
  .nav.is-open .drop .d { color: var(--ink-soft); }
  .brand img { height: 36px; }
}
@media (max-width: 620px) {
  .callbar {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 120;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(20, 22, 26, .94);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .callbar .btn { width: 100%; margin: 0; }
  body { padding-bottom: 74px; }
  .footer { padding-bottom: 24px; }
  .note { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) {
  .callbar { transition: none; }
}

/* ============================================================
   Calhoun Transport — visual pass after the first render
   1. The logo is a wordmark, not a monogram. It needs real height
      to be legible at all.
   2. Calhoun's H1s are long ("Towing and Roadside Assistance in
      Omaha and Washington County"). The inherited masonry scale was
      built for three-word headings and blew this one to five lines.
   3. The service-page hero photo was almost invisible under the
      inherited .38 opacity.
   Mobile states re-declared inside the media queries below.
   ============================================================ */
.brand img { height: 54px; }
.footer .brand img { height: 62px; }

.hero h1 { font-size: clamp(2.15rem, 4vw, 3.5rem); letter-spacing: -.03em; line-height: 1.03; }
.hero__sub { max-width: 560px; }
.page-hero h1 { font-size: clamp(2rem, 3.7vw, 3.2rem); letter-spacing: -.03em; line-height: 1.05; }

.page-hero--photo .hero__photo { opacity: .52; }
.page-hero--photo .hero__shade {
  background: linear-gradient(90deg, rgba(13,15,18,.88), rgba(13,15,18,.60) 58%, rgba(13,15,18,.40));
}

/* Header logo sizes. These are the LAST .brand img rules in the file, so
   they are the ones that win. The header now carries the cropped lockup
   (450x212) rather than the full emblem (450x304), so the same height buys
   a much bigger wordmark. Bumped 2026-08-21 on Spencer's "make it larger".
   At 46px the lockup is 98px wide; a 390px viewport has ~350px of nav and
   spends 44px on the hamburger, so there is plenty of room. */
@media (max-width: 940px) {
  .brand img { height: 50px; }
}
@media (max-width: 620px) {
  .brand img { height: 46px; }
  .hero h1 { font-size: clamp(1.95rem, 8.6vw, 2.5rem); }
  .page-hero h1 { font-size: clamp(1.85rem, 8vw, 2.35rem); }
  .callbar { transform: translateY(115%); transition: transform .28s cubic-bezier(.16,1,.3,1); }
  .callbar.is-on { transform: none; }
}

/* ============================================================
   Calhoun Transport — in-place form confirmation
   Replaces the separate /thankyou/ page. Netlify still receives
   the submission; the visitor just never leaves the page.
   ============================================================ */
.form-sent { text-align: center; }
.form-sent__tick {
  display: grid; place-items: center; width: 58px; height: 58px;
  margin: 4px auto 18px; border-radius: 50%;
  background: var(--grad-accent); color: #fff; box-shadow: var(--sh-glow);
}
.form-sent__tick svg { width: 28px; height: 28px; }
.form-sent h3 { color: var(--ink); margin-bottom: 10px; }
.form-sent p { margin-bottom: 22px; }
.form-sent .btn { width: 100%; }

/* ============================================================
   Blog table of contents
   Required by Master Blog Template for posts over ~1,000 words.
   Generated from the H2s, not hand-written per post.
   ============================================================ */
.toc {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--orange); border-radius: var(--r-sm);
  padding: 20px 24px; margin: 26px 0 30px;
}
.toc__t {
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 12px;
}
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { counter-increment: toc; position: relative; padding-left: 28px; margin-bottom: 8px; }
.toc li::before {
  content: counter(toc); position: absolute; left: 0; top: 1px;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--orange);
}
.toc a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--ink); border-bottom-color: var(--orange); }
.article h2 { scroll-margin-top: 96px; }

/* ============================================================
   Calhoun Transport — chat widget
   Spec: site-build-scratch.md 5e, "THE PLAN".

   Stacking: the sticky call bar is z-index 120 and owns the bottom
   edge of the phone viewport. The widget sits ABOVE it, never
   beside it, so the two never fight for the same corner. The FAB's
   mobile offset is the call bar's own height plus the safe area.
   ============================================================ */
.cw { position: fixed; right: 18px; bottom: 18px; z-index: 130; }

.cw__fab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px; border: 0; cursor: pointer;
  border-radius: var(--r-pill); background: var(--grad-accent); color: #fff;
  font-family: inherit; font-size: .98rem; font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 10px 30px rgba(252, 96, 0, .34), 0 2px 8px rgba(18, 22, 28, .18);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.cw__fab:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(252, 96, 0, .42); }
.cw__fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cw__fab-ic { display: grid; place-items: center; width: 22px; height: 22px; }
.cw__fab-ic svg { width: 22px; height: 22px; }
.cw.is-on .cw__fab { transform: scale(.94); opacity: .92; }

.cw__panel {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: 384px;
  max-height: min(78vh, 640px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 26px 70px rgba(13, 15, 18, .28), 0 4px 14px rgba(13, 15, 18, .12);
  opacity: 0; transform: translateY(10px) scale(.98); transform-origin: 100% 100%;
  transition: opacity .22s ease, transform .26s cubic-bezier(.16,1,.3,1);
}
.cw.is-on .cw__panel { opacity: 1; transform: none; }
.cw__panel[hidden] { display: none; }

.cw__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; background: var(--char); color: var(--on-dark); flex: none;
}
.cw__head-txt { display: flex; flex-direction: column; line-height: 1.25; }
.cw__head-txt strong { font-family: Archivo, system-ui, sans-serif; font-size: 1.02rem; }
.cw__head-txt span { font-size: .8rem; color: var(--on-dark-soft); }
.cw__x {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: var(--on-dark);
}
.cw__x svg { width: 17px; height: 17px; }
.cw__x:hover { background: rgba(255,255,255,.14); }

.cw__body { padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.cw__status { margin: 0 0 14px; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.cw__status strong { color: var(--ink); }
.cw.is-open-now .cw__status strong::before,
.cw.is-shut-now .cw__status strong::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px;
  border-radius: 50%; vertical-align: middle; background: var(--ink-soft);
}
.cw.is-open-now .cw__status strong::before { background: #1E9E5A; }
.cw.is-shut-now .cw__status strong::before { background: var(--ink-soft); }

/* Three paths, ordered by speed. Call first, and it looks it. */
.cw__path {
  display: flex; align-items: center; gap: 12px; margin-bottom: 9px; padding: 12px 14px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); text-decoration: none; transition: border-color .16s ease, background .16s ease;
}
.cw__path:hover { border-color: var(--orange); background: #fff; }
.cw__path--call { background: var(--grad-accent); border-color: transparent; color: #fff; }
.cw__path--call:hover { background: var(--grad-accent); border-color: transparent; filter: brightness(1.05); }
.cw__path-ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; }
.cw__path-ic svg { width: 20px; height: 20px; }
.cw__path-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cw__path-txt b { font-size: .97rem; font-weight: 600; }
.cw__path-txt i { font-style: normal; font-size: .78rem; opacity: .82; }

/* The text path needs a phone to be useful, so it is phone-only. */
.cw__path--text { display: none; }
@media (max-width: 620px) { .cw__path--text { display: flex; } }
@media (hover: none) and (pointer: coarse) { .cw__path--text { display: flex; } }

.cw__or {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 12px;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft);
}
.cw__or::before, .cw__or::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.cw__form .field { margin-bottom: 11px; position: relative; }
.cw__form .field label { font-size: .84rem; }
.cw__form .field-row { gap: 10px; }
.cw__form input, .cw__form textarea { font-size: 16px; }  /* 16px stops iOS zooming on focus */
.cw__form textarea { min-height: 84px; }
.cw__opt { color: var(--ink-soft); font-weight: 400; }
.cw__hint { margin: 6px 0 0; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); }
.cw__note { margin-top: 10px; font-size: .78rem; }
.cw__note.is-err { color: #C24A00; font-weight: 600; }
.cw__form input[aria-invalid="true"] { border-color: #C24A00; }

.cw__file {
  display: inline-flex !important; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 13px; border-radius: var(--r-sm); border: 1px dashed var(--line);
  background: var(--surface-2); color: var(--ink-soft); font-size: .86rem !important;
}
.cw__file:hover { border-color: var(--orange); color: var(--ink); }
.cw__file-ic { display: grid; place-items: center; width: 19px; height: 19px; flex: none; }
.cw__file-ic svg { width: 19px; height: 19px; }
.cw__file-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
#cw-photo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cw__file:focus-within { border-color: var(--orange); }

.cw__sent { text-align: center; padding: 8px 0 4px; }
.cw__sent h3 { font-size: 1.15rem; }
.cw__sent p b { color: var(--ink); white-space: nowrap; }

/* Phone: full-bleed panel, and the FAB clears the sticky call bar. */
@media (max-width: 620px) {
  /* The FAB stays IN FLOW here. Making it absolute collapses .cw to zero
     height, and the panel's bottom:100% then resolves onto the FAB itself.

     --callbar-h is the sticky call bar's measured height (10px + 10px
     padding around a 58px button). Measured at 78.6px at 390px, so a bare
     78px offset put the FAB's bottom edge INSIDE the bar by half a pixel.
     The +14 is real clearance, and it absorbs any height the webfont adds
     to the bar's button. If the call bar's padding ever changes, change
     --callbar-h with it. */
  .cw {
    --callbar-h: 80px;
    right: 12px; left: 12px;
    bottom: calc(var(--callbar-h) + 14px + env(safe-area-inset-bottom));
    display: flex; justify-content: flex-end;
  }
  .cw__panel { left: 0; right: 0; width: auto; max-height: min(72vh, 560px); }
  .cw__file-txt { max-width: 190px; }
}

/* On a phone the FAB lands exactly where the hero's own Call button is,
   so it is held back until the visitor scrolls past the hero. Same 420px
   threshold the sticky call bar uses, so the two arrive together instead
   of the FAB sitting on top of the hero CTA. Desktop is unaffected: there
   the FAB is bottom-right over empty space. */
@media (max-width: 620px) {
  .cw { transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1); }
  .cw:not(.is-scrolled):not(.is-on) {
    opacity: 0; transform: translateY(14px); pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cw, .cw__fab, .cw__panel { transition: none; }
  .cw__fab:hover { transform: none; }
}

/* ============================================================
   Calhoun Transport — Google rating badge
   The 5.0 is the strongest third-party proof on the page and it was
   reading as just another line of grey text in the trust row. It is now
   a badge: gold stars, a warm tint, and its own outline, so it separates
   from the three plain-text claims beside it.
   ============================================================ */
.hero__trust .trust-rating {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: var(--r-pill);
  background: rgba(255, 200, 97, .13);
  border: 1px solid rgba(255, 200, 97, .38);
  box-shadow: 0 8px 26px rgba(255, 200, 97, .10);
}
.hero__trust .stars { display: inline-flex; gap: 2px; }
.hero__trust .stars svg { width: 15px; height: 15px; color: #FFC861; }
.hero__trust .trust-rating b { font-size: 1.06rem; letter-spacing: -.01em; }
.hero__trust .trust-rating__lbl { color: #F2E6CF; font-size: .86rem; }

@media (max-width: 620px) {
  /* Full width on a phone so it reads as a banner, not a stray chip. */
  .hero__trust { gap: 14px 22px; }
  .hero__trust .trust-rating { padding: 8px 15px 8px 11px; }
  .hero__trust .stars svg { width: 14px; height: 14px; }
}

/* ============================================================
   Calhoun Transport — nav dropdown hover gap
   Reported 2026-08-21: pulling down slowly from "Services" or
   "Service Areas" loses the menu before you can click an item.

   Cause: `.drop` sits at `top: calc(100% + 10px)`, so there is a 10px
   band between the trigger and the menu that belongs to NEITHER. Cross
   it slowly and :hover on .has-drop is lost, so the menu closes. Moving
   fast works only because discrete pointer samples can skip the band
   without ever landing in it, which is why this felt intermittent.

   Two fixes, both needed:

   1. A transparent BRIDGE across the gap. It only exists while the menu
      is already open, so it can never intercept a click at rest. It is
      wider than the trigger because the menu is 480px and centred: a
      visitor aiming at a far item travels diagonally and would leave a
      trigger-width bridge while still inside the gap.

   2. A CLOSE DELAY. Leaving now waits before it starts fading, which
      forgives the diagonal path across a menu's corner. Opening stays
      immediate.

   Scoped to real hover pointers at desktop width only. Under 940px the
   menu is static inside the hamburger panel and must not be touched.
   ============================================================ */
@media (hover: hover) and (min-width: 941px) {
  .has-drop::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    width: 560px; max-width: 96vw; height: 14px;
    display: none;
  }
  .has-drop:hover::after, .has-drop:focus-within::after { display: block; }

  /* Closing waits .18s before it begins; opening is immediate. */
  .drop {
    transition: opacity .18s ease .18s, transform .18s ease .18s,
                visibility 0s linear .36s;
  }
  .has-drop:hover .drop, .has-drop:focus-within .drop {
    transition: opacity .2s ease 0s, transform .2s ease 0s,
                visibility 0s linear 0s;
  }
}