/* =========================================================================
   Anytime Fingerprints — design system v3 ("civic institutional")
   Brand: red #ef4444 / #dc2626, dark navy #0f172a, Jost display type.
   Direction: credible identity-services firm — navy ink, crisp 1px lines,
   squared corners, red reserved for actions. Authored MOBILE-FIRST:
   base styles target phones; desktop layers on at min-width: 769px.
   Generated site styles. Edit here, then run `python3 build.py`.
   ========================================================================= */

/* =========================================================================
   HOW TO READ THIS FILE (a 60-second CSS crash course)

   HTML is the page's CONTENT (headings, links, buttons). CSS — this file —
   is its APPEARANCE: colors, sizes, spacing, and layout.

   Every CSS "rule" has the same shape:

       .service-card { background: #fff; padding: 1rem; }
       ^ selector      ^ property   ^ value

   - A selector starting with a dot (.service-card) styles every HTML element
     written as <div class="service-card">. Bare names (body, h1, a) style
     those tags directly. ".a .b" means "any .b that sits INSIDE an .a".
   - Everything between { } is a list of  property: value;  pairs.
   - var(--red) reads a reusable value defined once in the :root block below,
     so a brand color can be changed in ONE place and update everywhere.
   - Units: 1rem = 16px by default (rem scales with the user's font settings);
     px is a fixed screen dot. Colors like #ef4444 are hex codes (red).
   - MOBILE-FIRST: everything down to the "Desktop & tablet" banner styles the
     PHONE version. The @media (min-width: ...) blocks at the bottom then
     override those rules on wider screens. So: phone look first, desktop
     adjustments at the end of the file.
   - The matching HTML is produced by build.py (each class name here appears
     in an HTML snippet there). After editing, run `python3 build.py`.
   ========================================================================= */

/* ---- Tokens: the site's shared color / size / font "variables".
   Defined once here on :root (= the whole page) and reused everywhere
   below via var(--name). Change --red here and every red thing changes. ---- */
:root {
  --red: #ef4444;
  --red-dark: #dc2626;
  --red-soft: #fdecec;
  --navy: #0f172a;              /* brand dark navy — headings, footer, bands */
  --navy-800: #16233c;
  --navy-700: #1f3252;
  --ink: #182234;               /* body ink, near-navy */
  --ink-soft: #44506a;
  --gray: #67718a;
  --line: #d9dee9;
  --line-dark: rgba(255, 255, 255, 0.14);
  --bg: #ffffff;
  --bg-soft: #f2f4f9;           /* cool section tint */
  --bg-card: #ffffff;
  --amber: #f59e0b;             /* review stars only */
  --white: #ffffff;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.18);
  --container: 1180px;
  --nav-h: 64px;
  --font: 'Jost', 'Segoe UI', sans-serif;                /* brand display */
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* faint fingerprint-ridge motif for dark bands */
  --ridges: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1.5'%3E%3Ccircle cx='280' cy='280' r='30'/%3E%3Ccircle cx='280' cy='280' r='60'/%3E%3Ccircle cx='280' cy='280' r='90'/%3E%3Ccircle cx='280' cy='280' r='120'/%3E%3Ccircle cx='280' cy='280' r='150'/%3E%3Ccircle cx='280' cy='280' r='180'/%3E%3Ccircle cx='280' cy='280' r='210'/%3E%3Ccircle cx='280' cy='280' r='240'/%3E%3Ccircle cx='280' cy='280' r='270'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Reset & base: page-wide defaults.
   The first rule removes the browser's inconsistent built-in spacing from
   every element (* = "everything"), then we set the site's default font,
   text color, background, and link/heading styles in one place. ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
html, body { overflow-x: hidden; width: 100%; }
body {
  font-family: var(--font-body);
  line-height: 1.65;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-h);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-dark); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--red); }
h1, h2, h3, h4 { font-family: var(--font); line-height: 1.12; color: var(--navy); font-weight: 600; letter-spacing: -0.005em; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.icon { flex-shrink: 0; vertical-align: middle; }
.text-red { color: var(--red); }
.center { text-align: center; }
.mt-3 { margin-top: 2rem; }
/* Text that only screen readers (and search engines) see — used to give
   repeated links like "Learn more" a unique, descriptive full name. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
main { display: block; }
section { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---- Buttons (squared, decisive).
   .btn is the shared base; the variants layer on top of it in the HTML,
   e.g. <a class="btn btn-primary"> = red filled button (main actions like
   "Book Now"), .btn-outline = bordered button (secondary actions),
   .btn-ghost = text-only, .btn-block = stretches full width. ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font); font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  padding: .78rem 1.5rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap; line-height: 1.2;
}
.btn-primary { background: var(--red-dark); color: #fff; }
.btn-primary:hover { background: var(--red); color: #fff; box-shadow: var(--shadow-sm); }
.btn-outline { background: transparent; color: var(--navy); border-color: #b9c2d4; }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-soft); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--red-dark); }
.btn-block { display: flex; width: 100%; }

/* ---- Navigation (white, ruled): the bar pinned to the top of every page.
   position: fixed keeps it on screen while you scroll; z-index: 1000 makes
   it sit above the page content (higher number = closer to the viewer).
   The body's padding-top (in Reset & base) leaves room so the page content
   doesn't start hidden underneath it. ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #fff; border-bottom: 1px solid var(--line); height: var(--nav-h);
  transition: box-shadow .2s ease;
}
.nav.scrolled { box-shadow: var(--shadow-sm); }
.nav-container {
  max-width: 1340px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 1.1rem;
}
.nav-logo { display: flex; align-items: center; gap: .6rem; color: var(--navy); font-family: var(--font); font-weight: 700; white-space: nowrap; }
.nav-logo img { width: 38px; height: 38px; object-fit: contain; }
.nav-logo-text { font-size: 1.06rem; letter-spacing: .01em; }
.nav-logo:hover { color: var(--navy); }
.nav-link {
  display: flex; align-items: center; gap: .25rem; padding: .8rem .25rem;
  color: var(--navy); font-family: var(--font); font-weight: 500; font-size: 1.02rem;
  border-bottom: 2px solid transparent; transition: color .15s ease; white-space: nowrap;
}
.nav-link:hover { color: var(--red-dark); }
.nav-link.active { color: var(--red-dark); border-bottom-color: var(--red-dark); }
.nav-book { margin: .75rem 0 0; }
.nav-phone {
  display: none; align-items: center; gap: .45rem; font-family: var(--font); font-weight: 600;
  color: var(--navy); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .5rem .85rem; white-space: nowrap;
}
.nav-phone:hover { border-color: var(--navy); color: var(--navy); }
.nav-phone .icon { color: var(--red-dark); }

/* Mobile nav panel (base).
   On phones the menu links live in a hidden white panel (.nav-menu) that
   slides down when the hamburger button (the three stacked lines) is tapped.
   JavaScript in main.js just adds/removes the class "active"; the sliding
   itself is done here by transform (moved off-screen) + transition (animate
   the move). The three <span> lines of the hamburger rotate into an X. */
.hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { width: 24px; height: 2px; background: var(--navy); transition: all .25s ease; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0; display: flex; flex-direction: column;
  align-items: stretch; gap: 0; background: #fff; padding: .5rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  transform: translateY(-130%); transition: transform .25s ease; visibility: hidden;
  max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
}
.nav-menu.active { transform: translateY(0); visibility: visible; }
.nav-menu > .nav-link, .nav-item.has-dropdown { border-bottom: 1px solid var(--bg-soft); }

/* Services dropdown — the "Services" mega-menu in the nav.
   Phone behavior (these base rules): it expands in place like an accordion.
   max-height: 0 + overflow: hidden = collapsed; when JS adds the "open"
   class, max-height grows and the list is revealed. On desktop the
   @media block near the bottom of this file restyles it as a floating
   panel that appears on hover instead. */
.nav-item.has-dropdown { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.nav-item.has-dropdown .dropdown-toggle { flex: 1; }
.nav-item .dropdown-toggle .icon { transition: transform .2s ease; display: none; }
.dropdown-caret { display: inline-flex; background: none; border: none; cursor: pointer; color: var(--navy); padding: .4rem; }
.dropdown-caret .icon { transition: transform .2s ease; }
.nav-item.has-dropdown.open .dropdown-caret .icon { transform: rotate(180deg); }
.dropdown-menu {
  position: static; display: grid; grid-template-columns: 1fr; gap: 0;
  background: #fff; border: none; box-shadow: none; min-width: 0; width: 100%;
  padding: 0 0 0 .75rem; max-height: 0; overflow: hidden; transition: max-height .25s ease;
  opacity: 1; visibility: hidden; transform: none;
}
.nav-item.has-dropdown.open .dropdown-menu { visibility: visible; max-height: 1200px; padding: .25rem 0 .75rem .75rem; }
.dropdown-col { display: flex; flex-direction: column; }
.dropdown-cat { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); padding: .6rem .5rem .25rem; }
.dropdown-link { display: flex; align-items: center; gap: .55rem; padding: .5rem; border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; font-size: .93rem; }
.dropdown-link:hover { background: var(--bg-soft); color: var(--navy); }
.dropdown-link .icon { color: var(--red-dark); flex-shrink: 0; }
.dropdown-all { margin-top: .4rem; padding: .6rem .5rem 0; border-top: 1px solid var(--line); font-weight: 600; color: var(--red-dark); }

/* ---- Section header (left-ruled, editorial).
   The repeated heading pattern used at the top of most home-page sections:
   small red uppercase label (.section-badge, with a short red dash drawn by
   ::before), big title (.section-title), gray subtitle. ---- */
.section-header { max-width: 760px; margin: 0 0 2.5rem; text-align: left; }
.section-badge {
  display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font);
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-dark); margin-bottom: .9rem;
}
.section-badge::before { content: ""; width: 28px; height: 2px; background: var(--red-dark); }
.section-title { font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin-bottom: .8rem; }
.section-subtitle { color: var(--ink-soft); font-size: 1.05rem; }

/* ---- Hero (navy, ridge motif, duotone photo).
   The big navy banner at the very top of the HOME page: headline + buttons
   on the left, white "Schedule Your Visit" card on the right (stacked on
   phones). The background layers a dark navy gradient over a photo so white
   text stays readable. .hero::after paints the faint fingerprint-ridge
   circles (the --ridges variable from Tokens) in the top-right corner —
   ::after is an extra invisible element CSS attaches for decoration. ---- */
.hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(15,23,42,.97) 0%, rgba(15,23,42,.92) 48%, rgba(15,23,42,.72) 100%),
    var(--navy) url('/assets/images/hero.jpg') center 35% / cover no-repeat;
  color: #fff;
  padding: 3.5rem 1.25rem 4rem;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; top: -120px; right: -120px; width: 560px; height: 560px;
  background: var(--ridges) center / contain no-repeat; pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: .6rem; color: #f87171; font-family: var(--font);
  font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem;
}
.hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); }
.hero-title { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 600; margin-bottom: 1rem; color: #fff; }
.hero-title .text-red { color: #f87171; }
.hero-desc { color: rgba(255,255,255,.78); font-size: 1.08rem; margin-bottom: 1.6rem; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.75rem; }
.hero .hero-actions .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.hero .hero-actions .btn-outline:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
.hero-trust { display: grid; grid-template-columns: 1fr; gap: .55rem; border-top: 1px solid var(--line-dark); padding-top: 1.4rem; }
.hero-trust li { display: flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.88); font-size: .96rem; }
.hero-trust .icon { color: var(--red); }
.hero-card {
  background: #fff; border-top: 4px solid var(--red-dark); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1.75rem 1.5rem;
}
.hero-card-title { font-size: 1.35rem; }
/* Office hours inside the hero card ("Schedule Your Visit"), one block per
   location (Seaport / Medford), rendered from LOCATIONS in data/site.py. */
.hero-hours { display: grid; gap: .85rem; margin: .35rem 0 1.2rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.hero-hours-loc h3 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red-dark); margin-bottom: .3rem; }
.hero-hours-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 .75rem; font-size: .85rem; color: var(--ink-soft); padding: .1rem 0; }
.hero-hours-row span:last-child { text-align: right; }
.hero-card-points { display: grid; gap: .65rem; margin-bottom: 1.4rem; }
.hero-card-points p { display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); font-size: .96rem; }
.hero-card-points .icon { color: var(--red-dark); }
.hero-card .btn { margin-top: .25rem; }

/* ---- Generic content section spacing.
   One shared rule so every home-page section has the same inner padding
   and the same centered maximum width (--container = 1180px). ---- */
.services, .how-it-works, .why-us, .who-uses, .testimonials, .home-faq, .contact { padding: 3.75rem 1.25rem; max-width: var(--container); margin: 0 auto; }

/* ---- Trust strip (stats band under hero).
   The dark band right below the home hero showing "500+ Clients Served"
   style numbers. Two columns on phones, four across on desktop. ---- */
.trust-strip { background: var(--navy-800); border-top: 1px solid var(--line-dark); }
.trust-strip-inner {
  max-width: var(--container); margin: 0 auto; padding: 1.6rem 1.25rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.trust-strip .stat-card { background: transparent; padding: .25rem 1rem; position: relative; text-align: center; }
.trust-strip .stat-number { color: #fff; }
.trust-strip .stat-label { color: rgba(255,255,255,.65); }

/* ---- "For you" band (who we serve + what to bring).
   Home-page section pairing the "Who We Serve" photo/icon grid with the
   bordered "What to bring to your appointment" checklist card. Single
   column on phones; two side-by-side columns on desktop. ---- */
.for-you { padding: 3.75rem 1.25rem; }
.for-you-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.25rem; align-items: start; }
.for-you-inner .section-header { margin: 0 0 1.5rem; }
.for-you-col .who-grid { justify-content: flex-start; }
.bring-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.5rem; }
.for-you-subtitle { display: flex; align-items: center; gap: .55rem; font-size: 1.18rem; margin-bottom: 1.25rem; }
.for-you-subtitle .icon { color: var(--red-dark); }
.bring-card .bring-list { background: transparent; border: none; padding: 0; box-shadow: none; margin-bottom: 1.25rem; }
.bring-card .bring-note { color: var(--ink-soft); }

/* ---- Full-bleed band.
   Add class "bg-tint" to a section to give it a soft gray background that
   stretches the FULL width of the browser window, even though the section's
   content stays inside the centered container. (The ::before element is a
   100vw-wide colored sheet slipped behind the section.) ---- */
.bg-tint { position: relative; }
.bg-tint::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%); background: var(--bg-soft); z-index: -1;
}

/* ---- Services grid.
   The cards for each service (photo banner on top, title, one-line
   description, "Learn more" link). Used on the home page, the services
   index, and "Related Services". display: grid lays the cards out:
   1 per row on phones, 2 from 560px, 3 on desktop (see @media blocks). ---- */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.service-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
}
.service-card:hover { border-color: #aab5ca; box-shadow: var(--shadow); }
.service-card-banner { position: relative; height: 150px; background-size: cover; background-position: center; }
.service-card-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.18)); }
.service-card-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.service-card-title { font-size: 1.18rem; margin-bottom: .45rem; }
.service-card-desc { color: var(--ink-soft); font-size: .94rem; margin-bottom: 1rem; flex: 1; }
.card-badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 1; display: inline-flex; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--navy);
  padding: .28rem .6rem; border-radius: 3px;
}
.service-card-link { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font); font-weight: 600; }

/* ---- How it works (ruled steps).
   The four numbered step cards ("Schedule", "Choose Location", ...). Each
   card has a navy icon square with a small red number badge pinned to its
   corner (position: absolute places the badge relative to the icon). ---- */
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; counter-reset: step; }
.step-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.4rem; text-align: left; position: relative;
}
.step-icon {
  position: relative; width: 56px; height: 56px; margin: 0 0 1rem; border-radius: var(--radius-sm);
  background: var(--navy); color: #fff; display: grid; place-items: center;
}
/* v2 per-step colors retired: one institutional navy */
.step-icon.blue, .step-icon.orange, .step-icon.green { background: var(--navy); }
.step-number {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 3px;
  background: var(--red-dark); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center;
}
.step-title { font-size: 1.1rem; margin-bottom: .45rem; }
.step-desc { color: var(--ink-soft); font-size: .94rem; }

/* ---- Why us.
   "Why Choose Us" reason cards (light red icon square + title + text) and
   the navy stat tiles. Text content comes from data/home.py. ---- */
.reasons-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
.reason-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem; }
.reason-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--red-soft); color: var(--red-dark); margin-bottom: 1rem; }
.reason-title { font-size: 1.12rem; margin-bottom: .45rem; }
.reason-desc { color: var(--ink-soft); font-size: .94rem; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-dark); border-radius: var(--radius); overflow: hidden; }
.stat-card { background: var(--navy); color: #fff; padding: 1.6rem 1rem; text-align: center; }
.stat-number { font-family: var(--font); font-size: 2.1rem; font-weight: 700; color: #fff; line-height: 1.1; }
.stat-label { color: rgba(255,255,255,.68); font-size: .88rem; }

/* ---- Who uses our services.
   Two looks for the same section: .who-card is the simple icon + label chip
   (fallback), .who-photo is the photo tile with a caption fading up from
   the bottom — used automatically when a photo exists for that audience
   (see who_card() in build.py). ---- */
.who-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.who-card {
  display: flex; align-items: center; gap: .8rem; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .8rem 1.2rem; font-family: var(--font); font-weight: 500; color: var(--navy);
  flex: 0 1 auto;
}
.who-card .icon { flex-shrink: 0; color: var(--red-dark); }
.who-photo {
  margin: 0; position: relative; flex: 1 1 200px; max-width: 320px;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
}
.who-photo img { width: 100%; height: 180px; object-fit: cover; display: block; }
.who-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .4rem;
  background: linear-gradient(transparent, rgba(15,23,42,.92)); color: #fff;
  padding: 1.75rem .9rem .8rem; font-family: var(--font); font-weight: 500; font-size: .92rem; line-height: 1.2;
}
.who-photo figcaption .icon { color: #fff; flex-shrink: 0; }
.for-you-col .who-grid:has(.who-photo) { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* ---- What to bring.
   The checklist of items to bring to an appointment (red check icons). ---- */
.bring { padding: 3.75rem 1.25rem; }
.bring-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
.bring-inner .section-header { margin: 0 0 1rem; }
.bring-note { display: flex; align-items: center; gap: .5rem; color: var(--ink-soft); }
.bring-note .icon { color: var(--red-dark); }
.bring-list { display: grid; grid-template-columns: 1fr; gap: .85rem 1.5rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.5rem; }
.bring-list li { display: flex; align-items: flex-start; gap: .55rem; color: var(--ink-soft); }
.bring-list .icon { color: var(--red-dark); margin-top: 3px; }

/* ---- Testimonials marquee.
   The customer-review cards that glide sideways forever. How it works:
   the row of cards is duplicated in the HTML, and the @keyframes animation
   slides the whole track left by exactly half its width (-50%), then
   restarts — because the second half is identical, the loop is seamless.
   Hovering pauses it (animation-play-state) so reviews can be read. ---- */
.rating-display { text-align: left; color: var(--ink-soft); margin-bottom: 2rem; font-size: 1.02rem; }
.stars { color: var(--amber); letter-spacing: 1px; }
.marquee { overflow: hidden; position: relative; width: 100%; }
.marquee-track { display: flex; gap: 1.25rem; width: max-content; animation: marquee-scroll 60s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.testimonial-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; flex: 0 0 320px; width: 320px; }
.testimonial-header { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.testimonial-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--font); }
.testimonial-name { font-family: var(--font); font-weight: 600; color: var(--navy); }
.testimonial-role { font-size: .84rem; color: var(--gray); }
.testimonial-stars { font-size: .85rem; }
.testimonial-text { color: var(--ink-soft); font-size: .95rem; }
/* Avatar background colors — each reviewer's initials circle cycles
   through these eight (assigned in build.py by review position). */
.color-1 { background: #b91c1c; } .color-2 { background: #0e7490; } .color-3 { background: #15803d; }
.color-4 { background: #a16207; } .color-5 { background: #6d28d9; } .color-6 { background: #be185d; }
.color-7 { background: #0f766e; } .color-8 { background: #1d4ed8; }
.reviews-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ---- Home FAQ (accordion).
   Question rows that expand/collapse when clicked. The answer (.faq-a)
   starts squashed to max-height: 0 with overflow: hidden (invisible);
   main.js sets its real height when the question button is clicked, and
   the transition animates the open/close. The chevron icon rotates 180°
   when its button's aria-expanded attribute is "true". ---- */
.faq-narrow { max-width: 760px; margin: 0; }
.faq-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; cursor: pointer; font-family: var(--font); font-size: 1.04rem;
  font-weight: 500; color: var(--navy); text-align: left; padding: 1.1rem 1.25rem;
}
.faq-q .icon { transition: transform .25s ease; color: var(--gray); }
.faq-q[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { color: var(--ink-soft); padding: 0 1.25rem 1.1rem; margin: 0; }

/* ---- Contact.
   The "Get a Fast Quote" section at the bottom of the home page: quote
   form on the left, "Prefer to talk now?" buttons + hours on the right
   (stacked on phones). ---- */
.contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
.contact-form-col { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.5rem; }
.contact-aside h3 { margin-bottom: 1rem; }
.contact-aside .btn { margin-bottom: .6rem; }
.contact-single .contact-actions { justify-content: flex-start; }
.contact-meta { margin-top: 1.25rem; color: var(--ink-soft); font-size: .93rem; }
.contact-meta p { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.contact-meta .icon { color: var(--red-dark); }
.contact-policy { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.contact-policy h3 { font-size: .95rem; margin-bottom: .6rem; }

/* ---- Quote form.
   Styling for the form fields themselves: labels, text boxes, dropdown,
   textarea, and checkbox. (Submission is handled by Netlify Forms — plain
   HTML, no JavaScript.) ---- */
.quote-form .form-row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field > span { font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.field .req { color: var(--red-dark); margin-left: 2px; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid #b9c2d4; border-radius: var(--radius-sm); padding: .75rem .9rem; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,23,42,.12); }
.field textarea { resize: vertical; }
.checkbox { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem; font-size: .92rem; color: var(--ink-soft); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--red-dark); }

/* ---- Breadcrumb.
   The small "Home › Services › Live Scan" trail at the top of inner pages. ---- */
.breadcrumb { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .88rem; color: var(--gray); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--gray); }
.breadcrumb a:hover { color: var(--red-dark); }
.breadcrumb .icon { color: var(--gray); }

/* ---- Page hero (services index, pricing, areas).
   The navy title banner at the top of every inner page (like the home hero
   but simpler). .page-hero and .svc-hero share these rules — listing two
   selectors separated by a comma applies the style to both. ---- */
.page-hero, .svc-hero {
  position: relative; background: var(--navy); color: #fff; padding: 3rem 1.25rem; overflow: hidden;
}
.page-hero::after, .svc-hero::after {
  content: ""; position: absolute; top: -140px; right: -140px; width: 560px; height: 560px;
  background: var(--ridges) center / contain no-repeat; pointer-events: none;
}
.page-hero-inner, .svc-hero-inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; }
.page-hero h1, .svc-hero h1 { color: #fff; }
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: .75rem; }
.page-hero p { color: rgba(255,255,255,.78); max-width: 60ch; margin-bottom: 1.5rem; }
.page-hero .breadcrumb, .svc-hero .breadcrumb { color: rgba(255,255,255,.55); }
.page-hero .breadcrumb a, .svc-hero .breadcrumb a { color: rgba(255,255,255,.55); }
.page-hero .breadcrumb a:hover, .svc-hero .breadcrumb a:hover { color: #fff; }
.page-hero .breadcrumb .icon, .svc-hero .breadcrumb .icon { color: rgba(255,255,255,.4); }
.page-hero .btn-outline, .svc-hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.4); }
.page-hero .btn-outline:hover, .svc-hero .btn-outline:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }

/* ---- Services index (/services/ page).
   Category groups ("Fingerprinting", "Background Checks", …), each with an
   underlined heading and a grid of service cards. ---- */
.svc-index { max-width: var(--container); margin: 0 auto; padding: 3rem 1.25rem; }
.svc-group { margin-bottom: 3rem; }
.svc-group-title { font-size: 1.4rem; margin-bottom: 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }

/* ---- Service detail page (/services/<name>.html).
   Everything on an individual service page: the hero title/tagline, the
   white price box (.svc-price, with its red left edge), the "We come to
   you" mobile callout (.svc-mobile-cta), the navy mobile banner on the
   services index (.mobile-banner), and the white content card (.svc-body)
   holding Overview / Who Needs / Benefits / FAQ blocks. ---- */
.svc-hero-thumb { display: none; }
.svc-title { color: #fff; font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: .5rem; }
.svc-tagline { color: rgba(255,255,255,.78); font-size: 1.12rem; max-width: 55ch; margin-bottom: 1.4rem; }
.svc-price {
  display: inline-flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  background: #fff; border-left: 4px solid var(--red-dark);
  border-radius: var(--radius-sm); padding: .8rem 1.2rem; margin-bottom: 1.25rem; box-shadow: var(--shadow);
}
.svc-price-amount { display: flex; flex-direction: column; }
.svc-price-amount .price { font-family: var(--font); font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.svc-price-note { font-size: .82rem; color: var(--gray); margin-top: .25rem; }
.svc-price-link { display: inline-flex; align-items: center; gap: .2rem; color: var(--red-dark); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.svc-price-link:hover { text-decoration: underline; }
.svc-mobile-cta {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  max-width: 620px; background: rgba(255,255,255,.07); border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm); padding: .85rem 1.1rem; margin-bottom: 1.4rem;
}
.svc-mobile-cta-icon { color: var(--red); display: flex; flex-shrink: 0; }
.svc-mobile-cta-text { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.svc-mobile-cta-text strong { color: #fff; font-size: 1rem; }
.svc-mobile-cta-text span { color: rgba(255,255,255,.72); font-size: .9rem; }
.svc-mobile-cta-link { display: inline-flex; align-items: center; gap: .25rem; color: #f87171; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.svc-mobile-cta-link:hover { text-decoration: underline; color: #fff; }
.mobile-banner {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; position: relative; overflow: hidden;
  background: var(--navy); color: #fff; border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin-bottom: 2.5rem;
}
.mobile-banner::after {
  content: ""; position: absolute; top: -200px; right: -200px; width: 560px; height: 560px;
  background: var(--ridges) center / contain no-repeat; pointer-events: none;
}
.mobile-banner-icon {
  display: flex; flex-shrink: 0; color: #fff;
  background: var(--red-dark); padding: .65rem; border-radius: var(--radius-sm);
}
.mobile-banner-text { display: flex; flex-direction: column; flex: 1; min-width: 240px; gap: .15rem; }
.mobile-banner-text strong { font-family: var(--font); font-size: 1.1rem; }
.mobile-banner-text span { color: rgba(255,255,255,.72); font-size: .93rem; }
.mobile-banner .btn { white-space: nowrap; position: relative; z-index: 1; }
body.page-service { background: var(--bg-soft); }
.svc-body {
  max-width: 920px; margin: 2rem auto 3rem; padding: 1.75rem 1.25rem;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  position: relative; z-index: 1;
}
.svc-block { margin-bottom: 2.5rem; }
.svc-overview { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; }
.svc-overview-media { margin: 0; order: -1; }
.svc-overview-media img { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; }
.svc-block h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.svc-block p { color: var(--ink-soft); margin-bottom: 1rem; }
.svc-mobile-note { display: flex; align-items: center; gap: .5rem; color: var(--red-dark); font-weight: 600; background: var(--red-soft); padding: .85rem 1.1rem; border-radius: var(--radius-sm); }
.svc-mobile-note .icon { color: var(--red-dark); }
.check-list { display: grid; gap: .65rem; }
.check-list li { display: flex; align-items: flex-start; gap: .5rem; color: var(--ink-soft); }
.check-list .icon { color: var(--red-dark); margin-top: 3px; }
.benefits-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.benefit-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.3rem; }
.benefit-card h3 { font-size: 1.04rem; margin-bottom: .4rem; }
.benefit-card p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* ---- Service CTA band.
   The navy "Ready to book?" box near the bottom of service, pricing, city,
   and FAQ pages, with Book / Call / Text buttons. ---- */
.svc-cta {
  position: relative; overflow: hidden; background: var(--navy); color: #fff;
  border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; margin-bottom: 3rem;
}
.svc-cta::after {
  content: ""; position: absolute; top: -160px; left: -160px; width: 560px; height: 560px;
  background: var(--ridges) center / contain no-repeat; pointer-events: none;
}
.svc-cta > * { position: relative; z-index: 1; }
.svc-cta h2 { color: #fff; margin-bottom: .5rem; }
.svc-cta p { color: rgba(255,255,255,.78); margin-bottom: 1.5rem; }
.svc-cta .contact-actions { justify-content: center; }
.svc-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,.4); }
.svc-cta .btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.svc-related h2 { font-size: 1.5rem; margin-bottom: 1.25rem; }

/* ---- Pricing (/pricing.html).
   The price tables: one .price-row per service (name on the left, price on
   the right; alternate rows lightly shaded via :nth-child(even)), plus the
   guarantee / mobile-policy info cards. Prices come from data/pricing.py. ---- */
.pricing { max-width: 880px; margin: 0 auto; padding: 3rem 1.25rem; }
.price-group { margin-bottom: 2.5rem; }
.price-group-title { font-size: 1.35rem; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.price-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--line); }
.price-row:last-child { border-bottom: none; }
.price-row:nth-child(even) { background: #f8fafc; }
.price-name { font-family: var(--font); font-weight: 500; color: var(--navy); }
a.price-name:hover { color: var(--red-dark); }
.price-note { font-size: .85rem; color: var(--gray); margin-top: .2rem; }
.price-amount { text-align: right; white-space: nowrap; }
.price { font-family: var(--font); font-weight: 700; color: var(--navy); }
.price-quote { color: var(--red-dark); font-weight: 600; }
.price-unit { font-size: .8rem; color: var(--gray); font-weight: 400; }
.price-info { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0 3rem; }
.price-info-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.price-info-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin-bottom: .5rem; }
.price-info-card .icon { color: var(--red-dark); }
.price-info-card p, .price-fine li { color: var(--ink-soft); font-size: .92rem; }
.price-fine li { margin-bottom: .5rem; padding-left: 1rem; position: relative; }
.price-fine li::before { content: "•"; color: var(--red-dark); position: absolute; left: 0; }

/* ---- Skip link (accessibility).
   A hidden "Skip to content" link parked far off-screen; it appears at the
   top-left only when a keyboard user presses Tab, letting them jump past
   the menu straight to the page content. ---- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--navy); color: #fff; padding: .6rem 1rem; font-weight: 600; }
.skip-link:focus { left: 0; color: #fff; }

/* ---- Service areas (/service-areas/).
   The grid of clickable city tiles (pin icon + city name), and the
   neighborhood list shown on each city's page hero. ---- */
.areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.area-card {
  display: flex; align-items: center; gap: .7rem; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1rem 1.1rem; color: var(--navy); font-family: var(--font); font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.area-card:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); color: var(--navy); }
.area-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--red-soft); color: var(--red-dark); }
.hood-list { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; }
.hood-list li { display: inline-flex; align-items: center; gap: .35rem; color: var(--gray); font-size: .92rem; }
.hood-list .icon { color: var(--red-dark); }

/* ---- Footer (brand navy, ridge motif).
   The navy bottom of every page: logo + contact links, service links,
   business hours, locations. One column on phones, four on desktop. ---- */
.footer { position: relative; overflow: hidden; background: var(--navy); color: rgba(255,255,255,.72); padding: 3.5rem 1.25rem 1.75rem; }
.footer::after {
  content: ""; position: absolute; bottom: -220px; right: -180px; width: 620px; height: 620px;
  background: var(--ridges) center / contain no-repeat; pointer-events: none;
}
.footer-content { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.footer-col h3, .footer-col h4 { color: #fff; }
.footer-logo { display: flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--font); font-weight: 700; margin-bottom: 1rem; }
.footer-tagline { margin-bottom: 1rem; font-size: .94rem; }
.footer-link { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.72); margin-bottom: .5rem; font-size: .94rem; }
.footer-link:hover { color: #fff; }
.footer-link .icon { color: var(--red); }
.footer-title { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; color: rgba(255,255,255,.5); }
.footer-list li { margin-bottom: .5rem; }
.footer-list a { color: rgba(255,255,255,.72); font-size: .94rem; }
.footer-list a:hover { color: #fff; }
.footer-loc { margin-bottom: 1rem; }
.footer-loc h4 { font-size: .95rem; margin-bottom: .4rem; }
.footer-hours-item { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; margin-bottom: .25rem; }
.footer-col p { font-size: .92rem; margin-bottom: .5rem; }
/* Links inside footer sentences get an underline so they don't rely on
   color alone to be recognizable (accessibility). */
.footer-col p a { text-decoration: underline; text-underline-offset: 2px; }
.footer-col .btn { margin-top: .75rem; }
.footer-bottom { border-top: 1px solid var(--line-dark); margin-top: 2.5rem; padding-top: 1.5rem; text-align: center; font-size: .85rem; }

/* ---- Sticky mobile CTA.
   The Call / Text / Book Now bar glued to the bottom of the screen on
   phones — the site's main conversion path on mobile. The extra
   padding-bottom on body stops page content hiding behind it. It is
   hidden entirely on desktop (see the 769px @media block below). ---- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; display: grid;
  grid-template-columns: 1fr 1fr 1.4fr; gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(15,23,42,.12);
}
.sticky-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: .6rem; background: #fff; color: var(--navy); font-family: var(--font); font-size: .78rem; font-weight: 600; border: 0; cursor: pointer; }
.sticky-btn .icon { color: var(--red-dark); }
.sticky-book { background: var(--red-dark); color: #fff; }
.sticky-book .icon { color: #fff; }
.sticky-book:hover { color: #fff; background: var(--red); }
body { padding-bottom: 64px; }

/* ---- Floating "Book Now" side tab.
   A small tab pinned to the right edge of the screen (rotated 90°) that
   opens the Setmore booking overlay — desktop/tablet only; hidden on
   phones, where the sticky bottom bar is the booking path. ---- */
.book-tab {
  display: none; position: fixed; right: 0; top: 25%; z-index: 1100;
  transform: translate(30%, 0) rotate(-90deg);
  background: var(--red-dark); color: #fff; border: none; cursor: pointer;
  padding: 12px 18px; border-radius: 6px 6px 0 0;
  font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
}
.book-tab:hover { background: var(--red); color: #fff; }

/* =========================================================================
   Desktop & tablet (mobile-first: enhancements layer on)

   Everything ABOVE this line styled the phone version. Each @media block
   below only applies when the browser window is at least that many pixels
   wide, overriding the phone rules. So to change how something looks on
   desktop only, edit (or add to) these blocks — the phone look stays put.
   ========================================================================= */

/* Small tablets and up (≥560px): grids widen from 1 column to 2. */
@media (min-width: 560px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .bring-list { grid-template-columns: 1fr 1fr; }
  .quote-form .form-row { grid-template-columns: 1fr 1fr; }
  .hero-trust { grid-template-columns: 1fr 1fr; }
  .for-you-col .who-grid:has(.who-photo) { grid-template-columns: repeat(2, 1fr); }
  .price-info { grid-template-columns: 1fr 1fr; }
}

/* Desktop (≥769px): the big switch. Hide the sticky bottom bar and the
   hamburger, lay the nav links out in a horizontal row, turn the services
   dropdown into a floating hover panel, and widen most grids to 3–4
   columns. */
@media (min-width: 769px) {
  body { padding-bottom: 0; }
  .sticky-cta { display: none; }
  .book-tab { display: inline-block; }
  .hamburger { display: none; }
  .dropdown-caret { display: none; }
  .nav-item .dropdown-toggle .icon { display: inline-block; }
  .nav-menu {
    position: static; flex-direction: row; align-items: center; gap: 1rem;
    background: none; padding: 0; border: none; box-shadow: none;
    transform: none; visibility: visible; max-height: none; overflow: visible;
  }
  .nav-link { font-size: .95rem; }
  .nav-menu > .nav-link, .nav-item.has-dropdown { border-bottom: none; }
  .nav-book { margin: 0 0 0 .25rem; padding: .6rem 1.2rem; }
  .nav-item.has-dropdown { display: inline-flex; flex-wrap: nowrap; }
  .nav-item.has-dropdown:hover .dropdown-toggle .icon,
  .nav-item.has-dropdown.open .dropdown-toggle .icon { transform: rotate(180deg); }
  .dropdown-menu {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 1200;
    grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: .25rem 1.25rem;
    min-width: 500px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.25rem;
    max-height: none; overflow: visible;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .nav-item.has-dropdown:hover .dropdown-menu,
  .nav-item.has-dropdown:focus-within .dropdown-menu,
  .nav-item.has-dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .dropdown-all { grid-column: 1 / -1; }

  .hero { padding: 5rem 1.25rem 5.5rem; }
  .hero-inner { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; }
  .hero-card { padding: 2rem 1.9rem; }
  .services, .how-it-works, .why-us, .who-uses, .testimonials, .home-faq, .contact { padding: 5.5rem 1.25rem; }
  .for-you, .bring { padding: 5.5rem 1.25rem; }
  .trust-strip-inner { grid-template-columns: repeat(4, 1fr); padding: 1.9rem 1.25rem; }
  .trust-strip .stat-card:not(:last-child)::after {
    content: ""; position: absolute; right: 0; top: 15%; height: 70%; width: 1px; background: var(--line-dark);
  }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .steps-grid { grid-template-columns: repeat(4, 1fr); }
  .reasons-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .for-you-inner { grid-template-columns: 1.1fr .9fr; gap: 2.5rem; }
  .bring-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .contact-grid { grid-template-columns: 1.4fr .9fr; gap: 2rem; }
  .contact-form-col { padding: 2rem; }
  .page-hero, .svc-hero { padding: 4rem 1.25rem; }
  .svc-body { padding: 2.75rem 2.5rem; }
  .svc-overview { grid-template-columns: 1.2fr 1fr; gap: 2rem; }
  .svc-overview-media { order: 1; }
  .benefits-grid { grid-template-columns: repeat(3, 1fr); }
  .areas-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .svc-cta { padding: 2.75rem; }
}

/* Wide screens: roomier nav; the phone-number pill only fits at ≥1320px. */
@media (min-width: 1140px) {
  .nav-menu { gap: 1.35rem; }
  .nav-link { font-size: 1rem; }
}
@media (min-width: 1320px) {
  .nav-phone { display: inline-flex; }
}

/* Very small phones: drop the logo text so the nav bar doesn't overflow. */
@media (max-width: 360px) {
  .nav-logo-text { display: none; }
}

/* Respect the OS-level "reduce motion" accessibility setting: turn off all
   animations (including the reviews marquee, which becomes a normal
   side-scrolling row). */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; }
}