/* =============================================================================
   Humphries Auto Service — concept preview by PXLNorth
   Hand build against templates/blueprints/trades/genzryan.

   PALETTE. Their brand is one green: the logo and the old site's header are both
   #016601 on white and pale green-grey. So the page is white and a cool
   green-grey tint, the dark surfaces are a deep version of the same green, and
   the logo green itself is kept for the things you press. Nothing warm sits
   under it. The only other colour is the gold of the review stars.

   TYPE. Archivo 700/800 for headings: a sturdy, slightly wide grotesque that
   reads like shop signage and holds its weight on a photograph. Public Sans for
   everything else: plain, open and very legible at small sizes on a phone. Only
   the weights used here are requested in the fonts link (Archivo 700, 800;
   Public Sans 400, 500, 600, 700).
   ========================================================================== */

:root {
  --green: #016601;          /* their logo green: buttons, links, markers */
  --green-hover: #014d01;
  --deep: #0b2a15;           /* dark surfaces: hero panel, band, footer */
  --deep-2: #123a1f;
  --mint: #7fdc9b;           /* the accent word and links on dark surfaces */
  --tint: #eef3ef;           /* the tinted ground under white cards */
  --tint-2: #e3ebe5;
  --rule: #d4ddd6;
  --paper: #ffffff;
  --ink: #13211a;
  --ink-soft: #435247;
  --ink-faint: #6a776e;
  --gold: #e2a41f;

  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-h1: clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem);
  --t-h2: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  --t-h3: clamp(1.2rem, 1.12rem + 0.35vw, 1.4rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-control: 1rem;

  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --r: 10px;
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem;
  --shadow: 0 1px 2px rgba(11, 42, 21, 0.06), 0 10px 28px -14px rgba(11, 42, 21, 0.28);
  --nav-h: 76px;             /* the sticky nav; main.js measures the real figure */
  --trust-half: 2.9rem;
}

/* ---------- reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-h2); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--green); }
input, select, textarea, button { font: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--paper); color: var(--ink); padding: 0.7rem 1rem; border-radius: var(--r);
}
.skip-link:focus { top: 1rem; }
.icon-sprite { position: absolute; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--gutter); }
/* Every anchor target clears the sticky nav. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.25rem;
  border: 2px solid transparent; border-radius: var(--r);
  font-family: var(--sans); font-size: var(--t-control); font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-solid { background: var(--green); border-color: var(--green); color: #fff; }
.btn-solid:hover { background: var(--green-hover); border-color: var(--green-hover); }
.btn-outline { background: var(--paper); border-color: var(--rule); color: var(--ink); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-light { background: #fff; border-color: #fff; color: var(--deep); }
.btn-light:hover { background: var(--tint); border-color: var(--tint); }
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, .65); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-wide { width: 100%; }
.link-quiet {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.15rem;
  font-weight: 600; font-size: var(--t-control); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px;
  text-underline-offset: 5px; white-space: nowrap;
}
.link-quiet:hover { color: var(--green); }
.g-mark { flex: 0 0 auto; display: block; }

/* ---------- nav ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.nav-wrap {
  width: min(var(--wrap), 100%); margin-inline: auto; padding: 0.5rem var(--gutter);
  display: flex; align-items: center; gap: var(--s2);
}
.lockup { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; }
/* The logo is capped, never pinned: a fixed height inside a flex row squashes it. */
.lockup-logo { max-height: 58px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; }
.nav-panel { margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.7rem); }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap;
}
.nav-links a:hover { color: var(--green); }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.nav-label { white-space: nowrap; }
.nav-call .ico { color: var(--green); }
.nav-toggle {
  display: none; flex: 0 0 auto;
  width: 46px; height: 46px; padding: 0;
  background: var(--paper); border: 2px solid var(--rule); border-radius: var(--r);
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
@media (max-width: 1120px) {
  .nav-label-phone { display: none; }
  .nav-call { padding-inline: 0; width: 48px; }
}
@media (max-width: 960px) {
  :root { --nav-h: 66px; }
  .nav-wrap { flex-wrap: wrap; gap: 0.5rem; }
  .lockup-logo { max-height: 48px; }
  .nav-actions { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  .nav-panel { order: 5; flex: 1 1 100%; margin: 0; display: none; }
  .nav[data-open="true"] .nav-panel { display: block; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; padding: 0.25rem 0 0.5rem; }
  .nav-links a { display: flex; min-height: 48px; border-top: 1px solid var(--rule); font-size: 1.0625rem; }
  .nav-book { min-height: 46px; padding-inline: 0.85rem; font-size: 0.9375rem; }
  .nav-call { min-height: 46px; width: 46px; }
}
@media (max-width: 374px) { .nav-book .ico { display: none; } }

/* ---------- hero ----------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--deep);
  padding-bottom: var(--trust-half);
}
/* Desktop: the photograph is the right 56% of the band, edge to edge and top to
   bottom, and the words sit on the solid green beside it. */
.hero-photo {
  position: absolute; z-index: 0;
  top: 0; right: 0; bottom: 0; left: auto;
  width: 56%; height: 100%; max-width: none;
  object-fit: cover; object-position: 30% 42%;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(90deg,
    rgba(11, 42, 21, 1) 0%,
    rgba(11, 42, 21, 1) 44%,
    rgba(11, 42, 21, 0.55) 48%,
    rgba(11, 42, 21, 0) 54%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: min(var(--wrap), 100%); margin-inline: auto;
  padding: clamp(2.4rem, 4.2vw, 3.6rem) var(--gutter);
  min-height: clamp(540px, 62vh, 640px);
  display: grid; align-content: center; gap: clamp(1.3rem, 2.2vw, 1.8rem);
}
.hero-copy, .hero-book { max-width: min(470px, 40vw); min-width: 0; }
.eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--mint);
}
h1 {
  font-size: var(--t-h1); font-weight: 800; line-height: 1.03; letter-spacing: -0.022em;
  color: #fff; margin: 0 0 0.8rem;
}
.h1-accent { color: var(--mint); }
.hero-sub { margin: 0; font-size: 1.1875rem; line-height: 1.45; color: rgba(255, 255, 255, .94); max-width: 30ch; }

/* The form card: white, compact, two short steps. */
.hero-next { text-decoration: none; }
.hero-cta { min-width: 6rem; }
.wizard {
  color-scheme: light;
  background: var(--paper); color: var(--ink);
  border-radius: calc(var(--r) * 1.4);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.7);
}
.wizard-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.wz-field { min-width: 0; }
.wz-field-wide, .wizard-panel > .btn { grid-column: 1 / -1; }
.wizard label, .intake label {
  display: block; margin-bottom: 0.3rem;
  font-size: 0.875rem; font-weight: 700; color: var(--ink);
}
.fd-input, .fd-select, .fd-textarea {
  display: block; width: 100%; min-height: 46px;
  background-color: #fff; color: var(--ink);
  border: 1.5px solid #b9c6bc; border-radius: 8px;
  font-size: 1rem; line-height: 1.3; padding: 0.6rem 0.75rem;
  transition: border-color .18s ease;
}
.fd-textarea { resize: vertical; min-height: 4.6rem; }
.fd-input:hover, .fd-select:hover, .fd-textarea:hover,
.fd-input:focus, .fd-select:focus, .fd-textarea:focus { border-color: var(--green); }
.fd-input::placeholder, .fd-textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.fd-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2313211a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
  padding-right: 2.2rem;
}
.fd-select option, .fd-select optgroup { background-color: #fff; color: var(--ink); }
.wizard-stepper {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.7rem;
  margin: 0.6rem 0 0; padding: 0;
  font-size: var(--t-small); font-weight: 500; color: rgba(255, 255, 255, .92);
}
.wz-back {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: 44px;
  background: none; border: 0; padding: 0 0.3rem 0 0;
  color: #fff; font-size: var(--t-small); font-weight: 700; cursor: pointer;
}
.wz-back:hover { color: var(--mint); }
.honest-panel {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: calc(var(--r) * 1.4);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  box-shadow: var(--shadow);
}
.honest-panel p:last-child { margin-bottom: 0; }
.honest-reach { font-weight: 700; }

@media (max-width: 960px) {
  /* Phone and tablet: the photograph sits on top, the words begin on its lower
     edge and the form card follows straight after. */
  .hero-photo {
    left: 0; right: 0; bottom: auto; width: 100%;
    height: clamp(250px, 66vw, 470px);
    object-position: 50% 38%;
  }
  .hero-scrim {
    bottom: auto; height: clamp(250px, 66vw, 470px);
    background-image: linear-gradient(180deg,
      rgba(11, 42, 21, 0) 0%,
      rgba(11, 42, 21, 0) 52%,
      rgba(11, 42, 21, 0.72) 76%,
      rgba(11, 42, 21, 1) 97%);
  }
  .hero-inner {
    min-height: 0; align-content: start;
    padding-top: calc(clamp(250px, 66vw, 470px) - 3.6rem);
    padding-bottom: 1.5rem;
    gap: 1.1rem;
  }
  .hero-copy, .hero-book { max-width: 560px; }
  .eyebrow { display: none; }
  .hero-sub { font-size: 1.0625rem; max-width: none; }
}

/* ---------- trust bar ------------------------------------------------------ */
.trust { position: relative; z-index: 3; padding: 0; margin-bottom: calc(-1 * var(--trust-half)); }
.trust-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 1.05rem 0;
  transform: translateY(-50%);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: calc(var(--r) * 1.4);
  box-shadow: 0 22px 46px -22px rgba(11, 42, 21, 0.55), 0 2px 6px rgba(11, 42, 21, 0.08);
}
.trust-list li {
  display: grid; justify-items: center; align-content: center; row-gap: 0.15rem;
  text-align: center; padding: 0.15rem var(--s2);
  border-left: 1px solid var(--rule);
}
.trust-list li:first-child { border-left: 0; }
.trust-list strong { font-family: var(--display); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.trust-list span { font-size: 0.9375rem; line-height: 1.35; color: var(--ink-soft); }
.trust-stars, .rev-stars {
  display: block; width: 6.25rem; height: 1.46rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2a41f' d='M12 1.5l3 7.2 7.8.6-5.9 5.1 1.8 7.6L12 17.9 5.3 22l1.8-7.6L1.2 9.3 9 8.7z'/%3E%3C/svg%3E");
  background-size: 1.25rem 1.25rem; background-repeat: repeat-x; background-position: left center;
}
@media (max-width: 860px) {
  :root { --trust-half: 4.6rem; }
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.9rem; }
  .trust-list li:nth-child(odd) { border-left: 0; }
  .trust-list li { padding-inline: 0.6rem; }
}
@media (max-width: 420px) {
  :root { --trust-half: 5rem; }
  .trust-list strong { font-size: 1rem; }
  .trust-list span { font-size: 0.875rem; }
}

/* ---------- modules -------------------------------------------------------- */
.mod { padding-block: clamp(3rem, 6vw, 5rem); }
.mod-head { margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
.mod-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem var(--s3); }
@media (min-width: 1000px) { .mod-head h2 { white-space: nowrap; } }
.mod-services { padding-top: clamp(3rem, 5vw, 4rem); }
.mod-maint, .mod-book { background: var(--tint); }

.card {
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: calc(var(--r) * 1.4);
  box-shadow: var(--shadow);
}
.card-lede { color: var(--ink-soft); margin: 0; }
/* A filled button and a quiet link on one line, on a phone too. The row may wrap
   as a last resort, so a narrow card can never be pushed wider than its column. */
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.95rem; min-width: 0; }
.card-actions .btn { padding-inline: 1rem; }

/* Refined list markers: a small green check drawn in CSS, never a default disc. */
.marks { display: grid; gap: 0.55rem; }
.marks li { position: relative; padding-left: 1.75rem; line-height: 1.45; font-weight: 500; }
.marks li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.28em;
  width: 0.42rem; height: 0.78rem;
  border: solid var(--green); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.marks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); }

/* ---------- services ------------------------------------------------------- */
.svc-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.svc-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.svc-photo { border-radius: calc(var(--r) * 1.4); overflow: hidden; background: var(--tint-2); aspect-ratio: 3 / 2; }
.svc-photo-lead { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-photo-lead img { object-position: 60% 45%; }
.svc-card { display: grid; align-content: start; gap: 1.1rem; padding: clamp(1.25rem, 2.6vw, 2rem); }
.svc-card .marks { padding-block: 0.2rem; }
.svc-card .marks li { font-size: 1.0625rem; }
@media (min-width: 900px) {
  /* The photographs take their height from the list card beside them, so the two
     columns start and end on the same lines. */
  .svc-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: stretch; }
  .svc-photos { grid-template-rows: minmax(0, 1.55fr) minmax(0, 1fr); min-height: 440px; }
  .svc-photo, .svc-photo-lead { aspect-ratio: auto; min-height: 0; position: relative; }
  .svc-photo img { position: absolute; inset: 0; }
  .svc-card { align-content: center; }
}

/* ---------- maintenance: three cards whose rows line up -------------------- */
.maint-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.maint-card {
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.05rem; min-width: 0;
  padding: clamp(1.15rem, 1.9vw, 1.45rem);
  padding-top: calc(clamp(1.15rem, 1.9vw, 1.45rem) + 4px);
  position: relative; overflow: hidden;
}
/* A straight green bar across the top of each card, clipped by the card's corners. */
.maint-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--green); }
@media (min-width: 900px) {
  .maint-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .maint-card { grid-row: span 3; grid-template-rows: subgrid; }
}

/* ---------- about band ----------------------------------------------------- */
.band { background: var(--deep); color: #fff; }
.band-grid { display: grid; grid-template-columns: 1fr; }
.band-inner {
  padding: clamp(2.4rem, 5vw, 4rem) var(--gutter);
  display: grid; align-content: center; gap: 1.1rem;
}
.band h2 { color: #fff; }
.band p { margin: 0; font-size: 1.125rem; color: rgba(255, 255, 255, .92); max-width: 46ch; }
.band-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
.band-media { min-height: 240px; }
.band-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
@media (min-width: 900px) {
  .band-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .band-inner {
    padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    padding-right: clamp(2rem, 4vw, 3.5rem);
  }
  .band-media { min-height: 400px; }
}
@media (max-width: 560px) { .band-actions .btn { flex: 1 1 100%; } }

/* ---------- reviews -------------------------------------------------------- */
.mod-reviews .mod-head { margin-bottom: 0.9rem; }
/* The source and the aggregate on one line: the Google G, the rating, five stars. */
.rev-rating {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem;
  margin: 0 0 clamp(1.3rem, 2.4vw, 1.9rem);
  font-size: 1.0625rem; color: var(--ink-soft);
}
.rev-rating-score { font-family: var(--display); font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--ink); }
.rev-rating-stars {
  display: block; width: 6.25rem; height: 1.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2a41f' d='M12 1.5l3 7.2 7.8.6-5.9 5.1 1.8 7.6L12 17.9 5.3 22l1.8-7.6L1.2 9.3 9 8.7z'/%3E%3C/svg%3E");
  background-size: 1.25rem 1.25rem; background-repeat: repeat-x; background-position: left center;
}
.rev-rating-src { font-weight: 600; }
.rev-g { display: inline-grid; place-items: center; justify-self: end; }
.rev-grid { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.rev-card {
  margin: 0; display: grid; grid-template-rows: 1fr auto; gap: 1rem;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: calc(var(--r) * 1.4);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
}
.rev-card p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.rev-card footer {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.3rem 0.8rem;
  padding-top: 0.9rem; border-top: 1px solid var(--rule);
}
/* One element per star in a review card, so each card shows that review's own rating. */
.rev-stars { grid-column: 1; display: flex; gap: 0.1rem; width: auto; height: auto; background: none; }
.rev-stars .star {
  width: 1.2rem; height: 1.2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2a41f' d='M12 1.5l3 7.2 7.8.6-5.9 5.1 1.8 7.6L12 17.9 5.3 22l1.8-7.6L1.2 9.3 9 8.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rev-card cite { font-style: normal; font-weight: 700; font-size: 1rem; color: var(--ink); }
.rev-card time { font-size: 0.8125rem; color: var(--ink-faint); }
.rev-more { margin-top: var(--s3); }
.rev-more-btn { list-style: none; }
.rev-more-btn::-webkit-details-marker { display: none; }
.rev-more-hide, .rev-more[open] .rev-more-show { display: none; }
.rev-more[open] .rev-more-hide { display: inline; }
.rev-grid-rest { margin-top: var(--s3); }
@media (min-width: 900px) {
  .rev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rev-grid-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .rev-more-btn { display: flex; width: 100%; } }

/* ---------- booking -------------------------------------------------------- */
.book-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.book-sub { font-size: 1.125rem; color: var(--ink-soft); margin: 0.8rem 0 0; max-width: 34ch; }
.intake {
  display: grid; gap: 0.9rem var(--s2); grid-template-columns: 1fr;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: calc(var(--r) * 1.4);
  box-shadow: var(--shadow);
  padding: clamp(1.15rem, 2.4vw, 1.8rem);
}
.field { min-width: 0; }
.req { font-weight: 500; font-size: 0.8125rem; color: var(--ink-faint); margin-left: 0.3rem; }
.intake .fd-textarea { min-height: 7rem; }
.book-card {
  display: grid; gap: 0;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: calc(var(--r) * 1.4);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.contact-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.9rem;
  padding: 1rem clamp(1rem, 2vw, 1.4rem); min-height: 64px;
  color: var(--ink); text-decoration: none;
}
.contact-row + .contact-row { border-top: 1px solid var(--rule); }
.contact-row:hover .contact-value { color: var(--green); }
.contact-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%; background: var(--tint); color: var(--green);
}
.contact-text { display: grid; min-width: 0; }
.label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); }
.contact-value { font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; }
@media (min-width: 641px) {
  .intake { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intake .field-wide, .intake > .btn { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .book-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  }
  .book-side { grid-column: 1; grid-row: 1; }
  .book-card { grid-column: 1; grid-row: 2; align-self: start; }
  .book-form-col { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- hours and location --------------------------------------------- */
.visit-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.visit-card { overflow: hidden; display: grid; align-content: start; }
.visit-media { aspect-ratio: 1010 / 496; background: var(--tint-2); }
.visit-media img { width: 100%; height: 100%; object-fit: cover; }
.visit-body { display: grid; gap: 1.2rem; padding: clamp(1.2rem, 2.4vw, 1.8rem); }
.visit-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.visit-row h3 { font-size: 1.0625rem; margin-bottom: 0.2rem; }
.visit-addr { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.hours { display: grid; gap: 0.1rem; max-width: 21rem; }
.hours li {
  display: flex; justify-content: space-between; gap: var(--s2);
  padding: 0.28rem 0.6rem; margin-left: -0.6rem; border-radius: 6px;
  font-size: 1rem;
}
.hours li.is-today { font-weight: 700; background: var(--tint); }
.hours li.is-today span:first-child::after {
  content: "Today"; margin-left: 0.55rem; padding: 0.08rem 0.45rem;
  border-radius: 999px; background: var(--green); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: 0.08em;
}
.hours-note { margin: 0.6rem 0 0; font-size: var(--t-small); color: var(--ink-soft); }
.visit-map {
  border-radius: calc(var(--r) * 1.4); overflow: hidden;
  border: 1px solid var(--rule); background: var(--tint-2);
  min-height: 320px;
}
.visit-map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
@media (min-width: 900px) {
  .visit-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; }
}

/* ---------- footer --------------------------------------------------------- */
.foot { background: var(--deep); color: rgba(255, 255, 255, .9); padding-block: clamp(2rem, 4vw, 2.8rem) 1.4rem; font-size: var(--t-small); }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: var(--mint); text-decoration: underline; }
.foot-top {
  display: grid; gap: var(--s3); grid-template-columns: 1fr; align-items: center;
  padding-bottom: 1.3rem; border-bottom: 1px solid rgba(255, 255, 255, .16);
}
/* The logo's greens would vanish into the deep footer, so it sits on a white plate. */
.foot-plate {
  display: inline-flex; align-items: center; justify-content: center; justify-self: start;
  background: #fff; border-radius: var(--r); padding: 0.55rem 0.9rem;
}
.foot-logo { max-height: 52px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; }
.foot-contact { display: grid; gap: 0.2rem; }
.foot-contact li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem; min-height: 44px; }
.foot-contact a, .foot-contact li > span:last-child { font-weight: 600; font-size: 1rem; color: #fff; overflow-wrap: anywhere; }
.foot-contact a { display: flex; align-items: center; min-height: 44px; justify-self: start; }
.foot-ico { display: inline-grid; place-items: center; color: var(--mint); }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 1.6rem; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.colophon { margin: 1.1rem 0 0.3rem; font-size: 0.8125rem; color: rgba(255, 255, 255, .78); }
.colophon a { text-decoration: underline; }
.foot-disclosure { margin: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, .78); }
@media (min-width: 860px) {
  .foot-top { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(2rem, 5vw, 4rem); }
}

/* ---------- preview badge -------------------------------------------------- */
.preview-badge {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 120;
  display: flex; align-items: stretch; gap: 1px;
  background: rgba(11, 42, 21, .96);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  font-family: var(--sans); font-size: 0.75rem;
  max-width: calc(100vw - 24px);
}
.preview-badge a { text-decoration: none; padding: 0.6rem 1rem; white-space: nowrap; }
.preview-badge-info { color: rgba(255, 255, 255, .9); }
.preview-badge-cta { background: #fff; color: var(--deep); font-weight: 700; }
.preview-badge-cta:hover { background: var(--tint); }
@media (max-width: 540px) {
  .preview-badge { font-size: 0.6875rem; }
  .preview-badge a { padding: 0.5rem 0.7rem; }
}

/* ---------- reveals --------------------------------------------------------
   Armed only once the script runs and only when motion is welcome. main.js
   reveals everything after 1.2s whatever happens, so no capture shoots a blank. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  html.js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}