/* ============================================================
   TruVine Homecare Services — styles.css
   ------------------------------------------------------------
   HOW TO EDIT THIS FILE
   All colors, fonts, and spacing live in the :root block below.
   Change a value there and it updates across the whole site.
   Sections are labeled with banner comments like this one.
   ============================================================ */

/* ------------------------------------------------------------
   0. SELF-HOSTED DISPLAY FONT
   ------------------------------------------------------------
   Instrument Serif is served from /fonts rather than Google's CDN.
   Self-hosting means the correct typeface always renders — it can't
   silently fall back to Georgia if a network, firewall, or privacy
   extension blocks fonts.googleapis.com/fonts.gstatic.com. */
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------
   1. DESIGN TOKENS — the single source of truth for the brand
   ------------------------------------------------------------ */
:root {
  /* Brand greens (sampled from the on-screen logo) */
  --sage:       #4E9C5A;  /* the TRUE brand green — identity moments only */
  --sage-press: #3D7D47;  /* darker sage for hover states (keeps AA contrast with white) */
  --deep:       #2C5E36;  /* structural green — headings, buttons */
  --forest:     #1E3F27;  /* darkest green — footer, dark bands */
  --mist:       #EAF1E8;  /* faint sage tint — quiet section backgrounds */

  /* Autumn-leaf accents (from the logo's grape leaves and vines) */
  --terracotta: #D27848;
  --brick:      #AE4E42;
  --plum:       #4E3636;
  --vine:       #7E6042;

  /* Canvas + text */
  --cream:      #FBF9F3;  /* main page background */
  --cream-2:    #F4EFE4;  /* alternate band background */
  --ink:        #28322A;  /* body text */
  --muted:      #5C665A;  /* secondary text */
  --line:       #E4DDCB;  /* hairline borders */
  --white:      #FFFFFF;

  /* Type */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  /* ^ Swap to GT Sectra here later — one line, nothing else changes. */
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale */
  --text-base: 17px;            /* larger base for older readers */
  --leading: 1.65;
  --container: 1140px;
  --radius: 14px;
  --radius-sm: 9px;

  /* Spacing rhythm */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 28px;
  --space-4: 44px;
  --space-5: 72px;
  --space-6: 88px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.28,1);
  --reveal-t: .65s;
}

/* ------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sage); }
/* Phone numbers must never break across lines — "610-222-" on one line and
   "6650" on the next is hard to read and easy to misdial. Applies to every
   tel: link on the site, so it can't come back somewhere else. */
a[href^="tel:"] { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 3px; }

/* Skip to content — invisible until focused, then it drops into view at the
   top-left. Lets keyboard and screen-reader users jump past the nav instead of
   tabbing through six links on every single page. Matters more than usual here:
   a good share of this audience uses assistive tech. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--deep); color: var(--white);
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 8px; color: var(--white); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; color: var(--deep); margin: 0 0 var(--space-2); }
h1 { font-size: clamp(2.7rem, 6vw, 4.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
h4 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin: 0 0 var(--space-1); }
/* Card sub-headings that need to sit at h3 in the document outline (so screen
   readers don't hit a level skip) while still LOOKING exactly like an h4.
   Every declaration below is copied from the h4 rule above, including the
   inherited body colour and leading — this class must be visually identical
   to the h4 it replaced, not a restyle. */
.h4-size {
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 600;
  line-height: var(--leading); color: var(--ink);
  margin: 0 0 var(--space-1);
}
p { margin: 0 0 var(--space-2); max-width: 68ch; }
ul { padding-left: 1.2em; }

.container { width: min(var(--container), 92vw); margin-inline: auto; }
.section { padding-block: var(--space-6); position: relative; }
.section--tight { padding-block: var(--space-4); }
.band-mist { background: var(--mist); }
.band-cream2 { background: var(--cream-2); }
.band-forest { background: var(--forest); color: #E9EFE7; }
.band-forest h2, .band-forest h3 { color: var(--white); }
.band-forest a { color: #CFE3CE; }

/* Small all-caps label above headings */
.kicker {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vine);
  margin-bottom: var(--space-2);
}
.band-forest .kicker { color: #A8C6A5; }

/* Kicker with a short leading rule (used on the About hero) */
.kicker--line { display: inline-flex; align-items: center; gap: 16px; }
.kicker--line::before { content: ""; width: 38px; height: 2px; background: var(--terracotta); flex: 0 0 auto; }

/* Italic serif emphasis word — used once, in the home hero.
   nowrap + inline-block keeps "Home." together as one unit so the
   cascading letters never split across two lines. */
.em-word { font-style: italic; color: var(--terracotta); white-space: nowrap; }
.cascade { display: inline-block; white-space: nowrap; }
/* "be — Home." travels together as a single line-unit, so "Home."
   never strands on its own line apart from the words before it. */
.hero-tail { white-space: nowrap; }

/* ------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1.5px solid var(--deep);
  background: var(--deep);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--sage-press); border-color: var(--sage-press); color: var(--white); }
.btn-ghost { background: transparent; color: var(--deep); }
.btn-ghost:hover { background: var(--deep); color: var(--white); }
.btn-light { background: var(--cream); border-color: var(--cream); color: var(--forest); }
.btn-light:hover { background: var(--sage-press); border-color: var(--sage-press); color: var(--white); }
.btn-nav { padding: 11px 22px; font-size: .95rem; }

/* Inside forest bands the generic `.band-forest a` link color would otherwise
   win on specificity and wash out button labels — re-assert button colors. */
.band-forest a.btn { color: var(--white); }
.band-forest a.btn-light { color: var(--forest); }
.band-forest a.btn-light:hover { color: var(--white); }

/* ------------------------------------------------------------
   4. HEADER / NAVIGATION
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 249, 243, .92);
  -webkit-backdrop-filter: blur(8px);  /* iOS Safari needs the prefix or the frosted header won't blur */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(40,50,42,.06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 12px; }

/* Logo sits directly on the header background (transparent PNG) */
.logo-card {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
  transition: transform .3s var(--ease);
}
.logo-card img { height: 84px; width: auto; display: block; }
.logo-card:hover { transform: translateY(-1px); }

.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a:not(.btn) {
  text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--ink);
  padding-bottom: 5px; position: relative;
  transition: color .2s;
}
/* Underline is a pseudo-element scaled from the left — it wipes across
   left-to-right on hover, and retracts back to the left on mouse-out. */
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--sage); transform: scaleX(0); transform-origin: left center;
  transition: transform .32s var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--deep); }
.nav-links a:not(.btn):hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--deep); }
.nav-phone a { color: var(--vine) !important; font-variant-numeric: tabular-nums; }
.nav-toggle { display: none; }

/* Mobile navigation: full-screen cream overlay */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1.5px solid var(--deep); border-radius: 999px;
    padding: 9px 18px; font: 600 .95rem var(--font-body); color: var(--deep); cursor: pointer;
  }
  .nav-links {
    /* Sized with explicit viewport height (not `inset: 0`) on purpose:
       .site-header uses backdrop-filter, which makes it the containing block
       for position:fixed descendants. With `inset: 0` the overlay would only
       cover the short header box, letting page content show through — the menu
       bug. Locking width/height to the viewport makes the overlay full-screen
       regardless. 100dvh handles mobile browser chrome; 100vh is the fallback. */
    position: fixed; top: 0; left: 0; z-index: 70;
    width: 100%; height: 100vh; height: 100dvh;
    flex-direction: column; justify-content: center; gap: 30px;
    background: var(--cream);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; }
  .nav-links a:not(.btn) { font-family: var(--font-display); font-size: 1.9rem; }
  .nav-close {
    position: absolute; top: 22px; right: 22px;
    background: none; border: none; font: 600 1rem var(--font-body); color: var(--deep); cursor: pointer;
  }
}
@media (min-width: 901px) { .nav-close { display: none; } }

/* ------------------------------------------------------------
   5. HOME HERO
   ------------------------------------------------------------ */
.hero { padding-block: var(--space-3) var(--space-4); }
/* The hero gets a slightly wider stage than the standard container, so the
   photo reads larger without cramping the two-line headline. */
.hero .container { width: min(1200px, 90vw); }
/* Heading spans the full container — wide enough that "Top-notch care, in
   the best place to" sits on one line, with "be — Home." settling onto
   its own second line beneath it. */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-5); align-items: start; }
/* Transportation hero centers its two columns. This lives here rather than as
   an inline style on the element: inline styles beat media queries, so an
   inline grid-template-columns would keep the desktop 2-column layout locked
   in on phones (which is exactly what it used to do). */
.hero-grid--centered { align-items: center; }
/* Sized specifically for the ~560px text column (about half the container),
   so the hard-coded line break below lands as two clean, readable lines
   instead of forcing a third. Scales down gracefully on narrower screens. */
.hero-h1 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
.hero-copy h1 { margin-bottom: var(--space-3); }
.hero-copy .lede { font-size: 1.26rem; color: var(--muted); max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Photo sits in a soft frame with an offset sage edge — a quiet nod to the logo's vine circle */
.hero-photo { position: relative; margin-bottom: 118px; }
.hero-photo::after {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 2px solid var(--sage); border-radius: var(--radius); z-index: -1; opacity: .55;
}
.hero-photo img { border-radius: var(--radius); box-shadow: 0 24px 60px rgba(40,50,42,.14); display: block; }

/* Floating testimonial card — overlaps the photo's lower-left corner and
   spills below its bottom edge, the way a printed photo might have a note
   tucked under its corner. */
.hero-quote-card {
  position: absolute; left: 7%; bottom: -160px; z-index: 3;
  width: 86%;
  margin: 0;
  background: var(--cream-2);
  border-radius: var(--radius-sm);
  padding: 20px 30px 18px;
  box-shadow: 0 22px 46px rgba(40,50,42,.18);
}
.hero-quote-card .quote-mark { font-size: 2.4rem; margin-bottom: 6px; }
.hero-quote-card blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: 1.04rem; line-height: 1.45; color: var(--ink);
}
.hero-quote-card figcaption {
  margin-top: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vine);
}

/* Google reviews button — compact pill that sits with a testimonial */
.greview-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--deep); text-decoration: none;
  font-weight: 600; font-size: .84rem; line-height: 1;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.greview-btn:hover,
.greview-btn:focus-visible { border-color: var(--sage); background: var(--mist); }
.greview-btn .gstars { color: #E8A93B; letter-spacing: 1px; font-size: .9rem; }

/* Letter-cascade on the final hero word (one-time, on load) */
.cascade span { display: inline-block; opacity: 0; transform: translateY(.45em); animation: rise .6s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   6. TRUST LINE — quiet, factual credentials (no logo strip)
   ------------------------------------------------------------ */
.trust-line {
  border-block: 1px solid var(--line);
  padding-block: var(--space-1);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  text-align: center;
}
.trust-line span { padding-inline: 17px; position: relative; }
/* Every item gets a leading dot (including the first) so bullets read
   consistently, especially where items wrap onto separate lines. */
.trust-line span::before {
  content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--sage); opacity: .6;
}

/* ------------------------------------------------------------
   7. SERVICE CARDS (home overview)
   ------------------------------------------------------------ */
.svc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-4); }
.svc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--sage);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(40,50,42,.1); }
.svc-card h3 { margin-bottom: var(--space-2); }
/* ul grows to fill available height so the link below lands at a uniform
   baseline across cards of differing text length */
.svc-card ul { list-style: none; padding: 0; margin: 0 0 var(--space-3); color: var(--muted); font-size: .95rem; flex: 1 0 auto; }
.svc-card li { padding: 6px 0 6px 22px; position: relative; }
.svc-card li::before { content: ""; position: absolute; left: 0; top: 13px; width: 10px; height: 10px;
  background: var(--sage); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); opacity: .8; } /* tiny leaf */
.svc-link { font-weight: 600; text-decoration: none; margin-top: auto; }
.svc-link .arrow { color: var(--terracotta); transition: transform .25s var(--ease); display: inline-block; }
.svc-link:hover .arrow { transform: translateX(5px); }

/* ------------------------------------------------------------
   8. COUNTY BAND (street photo with overlay)
   ------------------------------------------------------------ */
.county-band { position: relative; overflow: hidden; color: var(--white); }
.county-band .bg { position: absolute; inset: 0; }
.county-band .bg img { width: 100%; height: 100%; object-fit: cover; }
.county-band .bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,63,39,.82) 0%, rgba(30,63,39,.35) 55%, rgba(30,63,39,.15) 100%); }
.county-inner { position: relative; padding-block: clamp(120px, 18vw, 220px) var(--space-5); }
.county-band h2 { color: var(--white); }
.county-band .kicker { color: #D8E6D4; }
.county-list { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: var(--space-3) 0 0; list-style: none; }
.county-list li {
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  padding: 9px 22px; font-weight: 500; font-size: .95rem; backdrop-filter: blur(2px);
}

/* ------------------------------------------------------------
   9. PULL QUOTES
   ------------------------------------------------------------ */
.quote-mark { font-family: var(--font-display); font-size: 6rem; line-height: .5; color: var(--terracotta); display: block; margin-bottom: var(--space-3); }

/* ------------------------------------------------------------
   10. SPLIT BANDS + CTA BAND
   ------------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }

/* Founder profile (About page) */
.founder-photo { margin: 0; position: sticky; top: 96px; }
.founder-photo img {
  width: 100%; border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(40,50,42,.14); display: block;
}
.founder-photo figcaption {
  margin-top: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vine);
}
.founder-quote {
  margin: var(--space-3) 0; padding: 4px 0 4px var(--space-3);
  border-left: 3px solid var(--sage);
  font-family: var(--font-display); font-style: italic;
  font-size: 1.35rem; line-height: 1.4; color: var(--deep); max-width: 60ch;
}
/* On stacked (mobile) layout the photo shouldn't stick, and it centers */
@media (max-width: 980px) {
  .founder-photo { position: static; max-width: 420px; margin-inline: auto; }
  .founder-quote { font-size: 1.2rem; }
}

/* Compact spacing — applied per-section via .is-compact (used on the About
   page's top sections only; sections below keep the default vertical rhythm). */
.page-hero.is-compact { padding-block: 24px 12px; }
.section.is-compact { padding-block: 58px; }
.section--tight.is-compact { padding-block: 32px; }
.section--tight.is-compact .panel { padding: 30px; }
@media (max-width: 640px) {
  .section.is-compact { padding-block: 42px; }
  .section--tight.is-compact { padding-block: 26px; }
}
.cta-band { text-align: center; }
.cta-band .btn { margin-top: var(--space-2); }

/* Price chips (transportation) */
.price-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-3); }
.price-chip { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 22px; }
.price-chip strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--deep); display: block; }
.price-chip span { font-size: .85rem; color: var(--muted); }
.band-forest .price-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.band-forest .price-chip strong { color: var(--white); }
.band-forest .price-chip span { color: #C9D8C6; }

/* ------------------------------------------------------------
   11. INNER-PAGE HERO
   ------------------------------------------------------------ */
.page-hero { padding-block: var(--space-3) var(--space-3); }
.page-hero .lede { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }

/* ------------------------------------------------------------
   12. ACCORDIONS (services sub-items, FAQ) — native <details>
   ------------------------------------------------------------ */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2); padding: 20px 4px; font-weight: 600; font-size: 1.05rem; color: var(--deep);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--font-display); font-size: 1.6rem; color: var(--terracotta); transition: transform .3s var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .acc-body { padding: 0 4px 22px; color: var(--muted); max-width: 66ch; }

/* Category header rows on the services page */
.svc-cat { padding-top: var(--space-4); scroll-margin-top: 110px; }
.svc-cat-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.svc-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-3); }
.svc-jump a {
  text-decoration: none; font-weight: 600; font-size: .92rem; border-radius: 999px; padding: 9px 20px;
  /* Solid brand green with white text — 7.6:1 contrast — AA for body text, AAA at this weight and size. */
  background: var(--deep); border: 1px solid var(--deep); color: var(--white);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.svc-jump a:hover,
.svc-jump a:focus-visible { background: var(--sage-press); border-color: var(--sage-press); color: var(--white); }

/* ------------------------------------------------------------
   13. FORMS
   ------------------------------------------------------------ */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font: 400 1rem var(--font-body); color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--cream); transition: border-color .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sage); }
textarea { min-height: 120px; resize: vertical; }
.field-note { font-size: .85rem; color: var(--muted); margin-top: 5px; }
.honeypot { position: absolute; left: -9999px; }

/* Intent selector (contact page): segmented radio group */
.intent-seg { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-3); }
.intent-seg label {
  flex: 1 1 160px; text-align: center; margin: 0; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px 10px;
  font-weight: 600; font-size: .95rem; background: var(--cream);
  transition: border-color .2s, background .2s, color .2s;
}
.intent-seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.intent-seg input:checked + span { color: var(--white); }
.intent-seg label:has(input:checked) { background: var(--deep); border-color: var(--deep); color: var(--white); }
.intent-seg label:has(input:focus-visible) { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.intent-panel[hidden] { display: none; }

/* Trip-type selector (transportation): radio cards with prices */
.trip-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-2); }
.trip-cards label { margin: 0; cursor: pointer; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 18px; background: var(--cream); transition: border-color .2s, background .2s; }
.trip-cards input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.trip-cards label:has(input:checked) { border-color: var(--deep); background: var(--mist); }
.trip-cards label:has(input:focus-visible) { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.trip-cards .trip-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--deep); display: block; }

/* Live Stripe pay section (transportation) — clean white checkout card */
.pay-online {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); padding: var(--space-3); margin-top: var(--space-2);
  box-shadow: 0 8px 24px rgba(40,50,42,.07);
}
.pay-online strong { display: block; color: var(--deep); font-size: 1.15rem; margin-bottom: 6px; }
.pay-secure {
  display: flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 12px;
}
.pay-secure svg { width: 15px; height: 15px; color: var(--sage-press); }
/* Stripe brand indigo, lowercase wordmark cue */
.stripe-mark { color: #635BFF; font-weight: 700; font-size: .92rem; letter-spacing: -.01em; margin-left: 1px; }
.pay-fare-btn { margin-top: 4px; }

/* Team / value grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
.panel-mist { background: var(--mist); border-color: transparent; }

/* Training cards (careers): the grid already makes the three cards equal
   height, but each button sat immediately under its own paragraph, so they
   landed at three different heights. Making the card a flex column and giving
   the button margin-top:auto pushes it to the bottom of the card, so the
   buttons line up across the row no matter how long the text is.
   align-self stops the button stretching to full width — a flex item would
   otherwise ignore its inline-block sizing.
   Scoped to #training on purpose: .panel is used in ten places sitewide and
   most of those aren't in an equal-height row. */
#training .panel { display: flex; flex-direction: column; }
#training .panel .btn { margin-top: auto; align-self: flex-start; }

/* Steps (transportation how-it-works — a real sequence, so numbers are earned) */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.step { counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 2rem; color: var(--terracotta); display: block; margin-bottom: 8px;
}

/* ------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------ */
.site-footer { background: var(--forest); color: #DCE6DA; padding-block: var(--space-5) var(--space-3); font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--space-4); }
.footer-logo-card { display: inline-block; background: var(--white); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: var(--space-3); }
.footer-logo-card img { height: 62px; width: auto; }
.site-footer h4 { color: var(--white); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--space-2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: #CFE0CC; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-cred { border-top: 1px solid rgba(255,255,255,.18); margin-top: var(--space-4); padding-top: var(--space-3);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: .84rem; color: #A9BCA6; }
.footer-cred a { color: #A9BCA6; }

/* ------------------------------------------------------------
   15. MOTION SYSTEM
   ------------------------------------------------------------ */

/* Page cross-fade: body fades in on load; .is-leaving fades out before navigating */
body { opacity: 1; transition: opacity .22s ease; }
html.js body { opacity: 0; }
html.js body.is-ready { opacity: 1; }
body.is-leaving { opacity: 0; }

/* Scroll reveals — one-time, gentle, staggered via inline --d
   ------------------------------------------------------------
   EVERY hidden-until-seen state below is scoped to `html.js`, which only
   exists once main.js has actually started running. This is load-bearing:
   these rules hide almost all page content, and only JavaScript ever
   reveals it. Without the `html.js` scope, a blocked/failed/errored
   main.js would leave visitors staring at a header, a footer, and nothing
   in between. Scoped this way, no JS means no animation but full content —
   which is the correct way to fail. Do not remove the `html.js` prefix. */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--reveal-t) var(--ease), transform var(--reveal-t) var(--ease); transition-delay: var(--d, 0s); }
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* Photo warm-in: begins gently muted, warms to full color once seen */
html.js .warm-in img { filter: saturate(.55) sepia(.1) brightness(1.02); transition: filter 1.1s var(--ease) .15s; }
html.js .warm-in.is-visible img { filter: none; }

/* Hand-drawn accents that draw themselves once when they enter view */
html.js .draw path { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
html.js .draw.is-drawn path { transition: stroke-dashoffset .9s var(--ease); stroke-dashoffset: 0; }
/* Sits closer under the headline than the h1's own 16px bottom margin allows.
   Adjacent-sibling margins collapse, so the gap is max(16, margin-top) — a
   negative value is what actually pulls it up: 16 + (-8) = 8px of clearance,
   still enough to stay off the descenders in words like "by" and "your". */
.uline { display: block; width: 200px; height: 14px; margin-top: -8px; }
.uline path { fill: none; stroke: var(--terracotta); stroke-width: 3.4; stroke-linecap: round; }
.tendril { display: block; width: 150px; height: 26px; margin: var(--space-2) 0 0; }
.tendril path { fill: none; stroke: var(--sage); stroke-width: 2.6; stroke-linecap: round; }
.band-forest .tendril path { stroke: #9FC49B; }


/* Magnetic pull is applied by JS on .magnetic only (desktop, fine pointers) */
.magnetic { will-change: transform; }

/* ------------------------------------------------------------
   16. REDUCED MOTION — everything settles instantly
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js body { opacity: 1; }
  .reveal, .warm-in img { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .draw path { stroke-dashoffset: 0 !important; transition: none !important; }
  .cascade span { animation: none; opacity: 1; transform: none; }
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ------------------------------------------------------------
   17. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .hero-grid, .split, .footer-grid { grid-template-columns: 1fr; }
  .grid-3, .steps { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .hero-photo { order: -1; margin-bottom: var(--space-4); }
  .hero-photo::after { display: none; }
  /* The card has no room to float on narrow screens, so it drops into normal
     flow and tucks just under the photo's bottom edge.
     position:relative (not static) is load-bearing here. The card is a sibling
     that follows the <img> inside .hero-photo, and it's pulled up to tuck under
     the photo's bottom edge. A *static* block paints its background BEFORE
     inline/replaced content, so the <img> painted over the card's top strip —
     the card looked sliced off with the quote mark stranded on the photo.
     It looked correct for a moment on load only because .reveal's transform
     creates a temporary stacking context, which disappears the instant the
     reveal animation finishes ("popping" the card behind the image).
     Giving it position:relative + z-index makes that stacking permanent. */
  .hero-quote-card {
    /* left/bottom MUST be reset. The desktop rule sets left:7% and
       bottom:-160px, which are harmless offsets for an absolutely positioned
       box but are still honoured once position becomes relative — there they
       shift the card 160px DOWN and 7% RIGHT of its place in the flow, while
       still reserving its original space. That produced the big empty gap
       under the hero photo and left the card sitting on top of the
       "Family-owned - Ardmore - Since 2018" line below it. */
    position: relative; left: auto; bottom: auto; z-index: 2;
    width: 100%; margin-top: -28px;
    box-shadow: 0 14px 30px rgba(40,50,42,.14);
  }
  .section { padding-block: var(--space-5); }
}
@media (max-width: 640px) {
  .form-grid, .trip-cards, .svc-cards { grid-template-columns: 1fr; }
  .logo-card img { height: 38px; }
  .hero { padding-block: var(--space-4); }
  .trust-line span { padding-inline: 10px; }

  /* ---- Phone polish -------------------------------------------------
     Desktop is untouched; everything below only applies at <=640px. */

  /* Give content room to breathe edge-to-edge on small screens */
  .container { width: min(100%, 92vw); }

  /* Headlines: the desktop clamp() still ran large relative to a phone,
     so long words crowded the edges. Scale down and allow breaking. */
  h1, .hero-h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); line-height: 1.14; }
  h2 { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.2; }
  .lede { font-size: 1.06rem; }
  h1, h2, h3, p, .lede, blockquote { overflow-wrap: break-word; }

  /* Price chips read as a side-by-side pair rather than a tall stack */
  .price-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .price-chip { padding: 12px 14px; text-align: center; }
  .price-chip strong { font-size: 1.35rem; }

  /* Full-width, comfortably tappable CTAs (Apple's 44px minimum) */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn, .pay-fare-btn, .form-card [type="submit"] {
    width: 100%; text-align: center; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* The fare row stacked awkwardly with the button crammed beside it */
  .form-card { padding: var(--space-3); }
  .pay-online { padding: var(--space-2); }

  /* Section rhythm: tighter so pages aren't endless scrolling */
  .section { padding-block: var(--space-4); }
  .page-hero { padding-block: var(--space-3) var(--space-2); }
}