/* ==========================================================================
   Pampered Pawz — site stylesheet
   Palette and type carried over from the original build:
   brand green #1D9569, deep forest #114B34, mint ground #EBF4EE,
   Plus Jakarta Sans (display) + Inter (body).
   ========================================================================== */

/* ---------- fonts (self-hosted, no external requests) ---------- */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/jakarta-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */

:root {
  --brand: #1d9569;
  --brand-dark: #177954;
  --brand-darker: #126043;
  --forest: #114b34;
  --forest-soft: #2c6b4e;

  --mint-bg: #ebf4ee;
  --mint-soft: #cfe8d8;
  --mint-line: #bcdfcb;

  --surface: #ffffff;
  --ink: #10261c;
  --body: #3d5a4c;
  /* Darkened from #5f7a6c so muted text clears WCAG AA (4.5:1) on the mint
     ground rather than landing at 4.17:1. */
  --muted: #4f6a5c;

  --gold: #b8791a;
  --gold-soft: #fdf3e2;

  --radius-lg: 1.5rem;
  --radius-md: 1rem;
  --radius-sm: 0.625rem;

  --shadow-sm: 0 1px 2px rgba(17, 75, 52, 0.06),
    0 2px 8px rgba(17, 75, 52, 0.05);
  --shadow-md: 0 4px 12px rgba(17, 75, 52, 0.08),
    0 12px 32px rgba(17, 75, 52, 0.07);

  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;

  --wrap: 1160px;
  --wrap-wide: 1380px;
  --measure: 68ch;
}

/* ---------- reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--mint-bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  color: var(--forest);
  line-height: 1.16;
  letter-spacing: -0.021em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.05rem, 5vw, 3.35rem);
  font-weight: 800;
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 800;
}
h3 {
  font-size: 1.25rem;
  font-weight: 700;
}
h4 {
  font-size: 1.02rem;
  font-weight: 700;
}

p {
  margin: 0 0 1.15em;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--brand-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--brand-darker);
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- layout helpers ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}

/* A wider band for content that reads badly in narrow columns. The review
   quotes are long, so at the standard 1160px the three cards wrap to 17 lines
   and the section becomes very tall. */
.wrap-wide {
  max-width: var(--wrap-wide);
}

/* Grid and flex items default to min-width:auto, which means an unbreakable
   string (a long email address, a wide table) can force the track wider than
   the viewport and scroll the whole page sideways. Allow them to shrink. */
.grid > *,
.split > *,
.hero-grid > *,
.contact-grid > *,
.footer-grid > *,
.steps > li > *,
.info-list > li > * {
  min-width: 0;
}

/* Long unbreakable strings wrap instead of pushing the layout out. */
a[href^="mailto:"],
a[href^="tel:"] {
  overflow-wrap: anywhere;
}

.narrow {
  max-width: 760px;
  margin-inline: auto;
}

.prose {
  max-width: var(--measure);
}

section {
  padding: clamp(52px, 7vw, 88px) 0;
}

.section-alt {
  background: var(--surface);
}

.section-head {
  max-width: 660px;
  margin: 0 auto clamp(32px, 4vw, 52px);
  text-align: center;
}
.section-head p {
  color: var(--muted);
  font-size: 1.06rem;
  margin-bottom: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* brand-dark on mint-soft is only 4.15:1; brand-darker clears AA at 5.8:1. */
  color: var(--brand-darker);
  background: var(--mint-soft);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

/* Anchor targets (#pricing, #whats-included, #grooming …) must clear the
   sticky header, otherwise jumping to one hides the heading behind it.
   Only needed where the header is sticky, i.e. above the 900px breakpoint. */
@media (min-width: 901px) {
  [id] {
    scroll-margin-top: 88px;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--forest);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.18s ease;
}
.btn:hover {
  transform: translateY(-1px);
}

/* White on --brand (#1d9569) is only 3.78:1, under AA for 16px text. The
   darker brand shade takes the same button to 5.4:1 and stays on-palette. */
.btn-primary {
  background: var(--brand-dark);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--brand-darker);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--forest);
  border-color: var(--mint-line);
}
.btn-outline:hover {
  background: var(--mint-soft);
  color: var(--forest);
  border-color: var(--brand);
}

.btn-white {
  background: #fff;
  color: var(--forest);
}
.btn-white:hover {
  background: var(--mint-bg);
  color: var(--forest);
}

.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-row.center {
  justify-content: center;
}

/* ---------- header ---------- */

.topbar {
  background: var(--forest);
  color: #cfe8d8;
  font-size: 0.85rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  align-items: center;
  justify-content: center;
  padding-block: 9px;
  text-align: center;
}
/* The phone number is the highest-intent action on a phone. Give it a real
   touch area rather than bare 17px line-height. */
.topbar a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  padding: 5px 6px;
  margin: -5px -6px;
}
.topbar a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--mint-line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--forest);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.brand svg {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--forest);
  text-decoration: none;
  padding: 9px 13px;
  border-radius: 999px;
  white-space: nowrap;
}
.nav a:hover {
  background: var(--mint-soft);
  color: var(--forest);
}
.nav a[aria-current="page"] {
  background: var(--mint-soft);
  color: var(--brand-darker);
}
/* `.nav a` (0,1,1) would otherwise beat `.btn-primary` (0,1,0) and paint the
   header CTA dark green on green. `.nav .btn` (0,2,0) wins the cascade. */
.nav .btn {
  padding: 11px 20px;
  font-size: 0.95rem;
  margin-left: 6px;
  color: #fff;
}
.nav .btn:hover {
  background: var(--brand-darker);
  color: #fff;
}

@media (max-width: 900px) {
  /* The nav wraps to several rows on a phone, making the bar ~200px tall.
     Sticking that to the top would cost a quarter of the viewport on every
     scroll, so below this breakpoint the header scrolls away normally.
     Each page still repeats the booking CTA in-content and in the CTA band. */
  .site-header {
    position: static;
  }
  .site-header .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .brand {
    justify-content: center;
  }
  .nav {
    justify-content: center;
    gap: 2px;
  }
  .nav a {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  .nav .btn {
    margin-left: 0;
    margin-top: 4px;
    flex: 1 1 100%;
  }
  /* Drop the hours line on small screens; it is repeated on /contact and in
     the footer, and it costs a third of the top bar's height here. */
  .topbar span:last-child {
    display: none;
  }
}

/* ---------- breadcrumbs ---------- */

.crumbs {
  background: var(--surface);
  border-bottom: 1px solid var(--mint-line);
  font-size: 0.85rem;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 11px 0;
  color: var(--muted);
}
.crumbs li::after {
  content: "›";
  margin-left: 8px;
  color: var(--mint-line);
}
.crumbs li:last-child::after {
  content: "";
}
.crumbs a {
  color: var(--muted);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}
.crumbs [aria-current="page"] {
  color: var(--forest);
  font-weight: 600;
}

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(168deg, #ffffff 0%, var(--mint-bg) 58%);
  padding: clamp(44px, 6vw, 76px) 0 clamp(48px, 7vw, 84px);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.hero h1 {
  margin-bottom: 18px;
}
.hero-sub {
  font-size: clamp(1.06rem, 2vw, 1.2rem);
  color: var(--body);
  max-width: 56ch;
  margin-bottom: 26px;
}
.hero-media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  font-size: 0.92rem;
  color: var(--muted);
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-media {
    order: -1;
  }
}

.page-hero {
  background: linear-gradient(168deg, #ffffff 0%, var(--mint-bg) 100%);
  padding: clamp(40px, 5.5vw, 66px) 0 clamp(36px, 5vw, 56px);
  text-align: center;
}
.page-hero .lede {
  font-size: 1.1rem;
  color: var(--body);
  max-width: 62ch;
  margin-inline: auto;
}
.page-hero .btn-row {
  margin-top: 26px;
}

/* ---------- cards ---------- */

.grid {
  display: grid;
  gap: 22px;
}
/* min() lets the track shrink below its ideal minimum on very narrow screens.
   A bare minmax(300px, 1fr) forces a 300px track even when only ~260px is
   available at a 320px viewport, which pushes the page sideways. */
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--mint-line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card h3 {
  margin-bottom: 0;
}
.card p {
  color: var(--body);
  font-size: 0.98rem;
}
.card .price-tag {
  font-family: var(--display);
  font-weight: 800;
  color: var(--brand-dark);
  font-size: 1.05rem;
}
.card .card-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* Card CTAs are a primary tap target on mobile; inline text height alone
   (26px) is below a comfortable touch size. */
.card a.arrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 0;
}
.card a.arrow:hover {
  text-decoration: underline;
}

.icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--mint-soft);
  color: var(--brand-darker);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.icon-badge svg {
  width: 24px;
  height: 24px;
}

/* ---------- steps ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  counter-reset: s;
}
.steps > li {
  counter-increment: s;
  background: var(--surface);
  border: 1px solid var(--mint-line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
}
.steps > li::before {
  content: counter(s);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  background: var(--brand);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.steps h3 {
  margin-bottom: 6px;
}
.steps p {
  color: var(--body);
  font-size: 0.99rem;
}

/* ---------- pricing ---------- */

.price-block {
  background: var(--surface);
  border: 1px solid var(--mint-line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.price-block > h3 {
  margin-bottom: 4px;
}
/* Price blocks sit in the full-width wrap on /services, so their prose needs
   an explicit measure or it runs to ~140 characters per line. */
.price-block .note,
.price-block > p {
  max-width: var(--measure);
}
.price-block .note {
  color: var(--muted);
  font-size: 0.93rem;
  margin-bottom: 18px;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.price-table caption {
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  color: var(--forest);
  padding-bottom: 10px;
  font-size: 1.05rem;
}
.price-table caption .sub {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 3px;
}
.price-table th {
  text-align: left;
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 0 12px 9px 0;
  border-bottom: 2px solid var(--mint-line);
}
.price-table td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--mint-bg);
  color: var(--body);
  vertical-align: top;
}
.price-table tr:last-child td {
  border-bottom: 0;
}
.price-table td.amount {
  text-align: right;
  padding-right: 0;
  font-family: var(--display);
  font-weight: 800;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-table td .sub {
  display: block;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 400;
  font-family: var(--sans);
  margin-top: 2px;
}
.table-scroll {
  overflow-x: auto;
}

/* ---------- price menu ----------
   One table, services as rows and sizes as columns, so a customer reads
   across for their dog's size and down for the service tier. Four separate
   size/price tables made comparison impossible. */

.menu-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  justify-content: center;
}
.menu-jump a {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--forest);
  background: var(--surface);
  border: 1px solid var(--mint-line);
  border-radius: 999px;
  padding: 9px 18px;
}
.menu-jump a:hover {
  background: var(--mint-soft);
  border-color: var(--brand);
  color: var(--forest);
}

.menu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.menu-table thead th {
  text-align: right;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 0 0 10px 14px;
  border-bottom: 2px solid var(--mint-line);
  white-space: nowrap;
}
.menu-table thead th:first-child {
  text-align: left;
  padding-left: 0;
}
.menu-table tbody tr + tr td {
  border-top: 1px solid var(--mint-bg);
}
.menu-table td {
  padding: 16px 0 16px 14px;
  vertical-align: top;
  color: var(--body);
}
.menu-table td:first-child {
  padding-left: 0;
}
.menu-table .svc {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--forest);
  line-height: 1.3;
}
.menu-table .inc {
  display: block;
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 4px;
  max-width: 46ch;
}
.menu-table td.p {
  text-align: right;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-table td.p .qual {
  display: block;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--muted);
}

/* On a phone each service becomes its own card with labelled prices. */
@media (max-width: 760px) {
  .menu-table thead {
    position: absolute;
    left: -9999px;
  }
  .menu-table,
  .menu-table tbody,
  .menu-table tr,
  .menu-table td {
    display: block;
    width: 100%;
  }
  .menu-table tr {
    background: var(--surface);
    border: 1px solid var(--mint-line);
    border-radius: var(--radius-md);
    padding: 18px 18px 12px;
    margin-bottom: 14px;
  }
  .menu-table tbody tr + tr td {
    border-top: 0;
  }
  .menu-table td {
    padding: 0;
  }
  .menu-table td.p {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-align: right;
    padding: 7px 0;
    border-top: 1px solid var(--mint-bg);
    margin-top: 4px;
  }
  .menu-table td.svc-cell {
    margin-bottom: 10px;
  }
  .menu-table td.p::before {
    content: attr(data-size);
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
  }
  .menu-table td.p .qual {
    display: inline;
    margin-left: 6px;
  }
}

.callout {
  background: var(--gold-soft);
  border: 1px solid #f0dcb8;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  color: #6b4a10;
  font-size: 0.97rem;
  margin-bottom: 26px;
}
.callout p {
  max-width: var(--measure);
}
.callout strong {
  color: #5a3d08;
}

/* ---------- FAQ ---------- */

.faq-list {
  display: grid;
  gap: 12px;
}
details.faq {
  background: var(--surface);
  border: 1px solid var(--mint-line);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
}
details.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.07rem;
  color: var(--forest);
  position: relative;
}
details.faq summary::-webkit-details-marker {
  display: none;
}
details.faq summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--brand);
  line-height: 1;
}
details.faq[open] summary::after {
  content: "–";
}
details.faq summary:hover {
  background: var(--mint-bg);
}
details.faq .faq-body {
  padding: 0 24px 22px;
  color: var(--body);
  max-width: var(--measure);
}

/* ---------- reviews ---------- */

/* Explicit tracks rather than auto-fit. The quotes are long, so track width
   drives the height of the whole section: at ~430px a quote wraps to 13 lines,
   at ~300px it wraps to 22. auto-fit happily produced 300px tracks in the
   1000-1150px range, making the section taller than a single wide column
   would be. So: three wide columns once there is genuinely room for them,
   and one full-width column below that. */
.grid-reviews {
  grid-template-columns: 1fr;
}
/* Two columns through the middle band: three narrow columns balloon the
   quotes, and one stacked column costs three lots of card chrome. Two wide
   columns is shorter than either. The third card spans the row so there is
   no orphan gap. */
@media (min-width: 760px) {
  .grid-reviews {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-reviews > :last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1200px) {
  .grid-reviews {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-reviews > :last-child {
    grid-column: auto;
  }
}

.review {
  background: var(--surface);
  border: 1px solid var(--mint-line);
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stars {
  /* #e0a92a is only 2.1:1 on white; --gold reaches 3.6:1, clearing the 3:1
     non-text minimum so the rating is legible. */
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 1.05rem;
}
.review blockquote {
  margin: 0;
  color: var(--body);
  font-size: 1rem;
}
.review figcaption {
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--muted);
}
.review figcaption strong {
  display: block;
  color: var(--forest);
  font-family: var(--display);
  font-size: 0.98rem;
}

/* ---------- CTA band ---------- */

.cta-band {
  background: linear-gradient(135deg, var(--forest) 0%, var(--brand-darker) 100%);
  color: #dff0e6;
  text-align: center;
}
.cta-band h2 {
  color: #fff;
}
.cta-band p {
  color: #c6e3d3;
  max-width: 58ch;
  margin-inline: auto;
  margin-bottom: 26px;
}

/* ---------- feature list ---------- */

.ticks {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  display: grid;
  gap: 10px;
}
/* Deliberately NOT display:grid. An <li> holding "<strong>Label.</strong> text"
   produces three grid items (the ::before tick, the <strong>, and the trailing
   anonymous text run). In a two-column grid the third wraps onto a new row and
   the description is squeezed into the 22px tick column, making list items
   hundreds of pixels tall. Absolute positioning keeps the hanging tick while
   letting the content stay in normal inline flow. */
.ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--body);
}
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-weight: 700;
  line-height: inherit;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chips li {
  background: var(--surface);
  border: 1px solid var(--mint-line);
  border-radius: 999px;
  padding: 8px 17px;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--forest);
}

/* ---------- split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: stretch;
}
/* The media column fills the row height instead of floating in whitespace
   next to a taller text column. */
.split > div:has(> img) {
  display: grid;
  align-content: stretch;
  min-height: 320px;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    align-items: center;
  }
  .split > div:has(> img) {
    min-height: 0;
  }
  .split img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}
.split img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(26px, 4vw, 44px);
  align-items: start;
}
@media (max-width: 880px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.form-card,
.info-card {
  background: var(--surface);
  border: 1px solid var(--mint-line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 17px;
}
.field label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--forest);
}
.field .opt {
  color: var(--muted);
  font-weight: 400;
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--mint-bg);
  border: 1px solid var(--mint-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: #fff;
  border-color: var(--brand);
  outline: 2px solid rgba(29, 149, 105, 0.25);
  outline-offset: 0;
}
.field textarea {
  resize: vertical;
  min-height: 110px;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.info-list > li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
.info-list h3 {
  font-size: 0.94rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 3px;
}
.info-list a {
  font-weight: 600;
}

.hours {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.97rem;
}
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--mint-bg);
  color: var(--body);
}
.hours li:last-child {
  border-bottom: 0;
}
.hours .day {
  font-weight: 500;
}
.hours .closed {
  color: var(--muted);
}

.map-embed {
  border: 0;
  width: 100%;
  height: 320px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: block;
}

/* ---------- article ---------- */

.article {
  max-width: 74ch;
  margin-inline: auto;
}
.article h2 {
  margin-top: 1.7em;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}
.article h3 {
  margin-top: 1.5em;
}
.article ul,
.article ol {
  margin: 0 0 1.15em;
  padding-left: 1.3em;
}
.article li {
  margin-bottom: 0.5em;
}
.article .meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 1.6em;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--forest);
  color: #b9d6c6;
  padding: clamp(44px, 6vw, 68px) 0 26px;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 34px;
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
.site-footer h2,
.site-footer h3 {
  color: #fff;
}
.site-footer h2 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}
.site-footer h3 {
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: #8fc4a8;
}
.site-footer p {
  color: #b9d6c6;
  font-size: 0.93rem;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.site-footer a {
  color: #dff0e6;
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.social-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.social-row a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  color: #fff;
}
.social-row a:hover {
  background: var(--brand);
}
.social-row svg {
  width: 19px;
  height: 19px;
}
.footer-bottom {
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: 0.86rem;
  color: #8fc4a8;
}

/* ---------- 404 ---------- */

.err {
  text-align: center;
  padding: clamp(64px, 12vw, 130px) 0;
}
.err .code {
  font-family: var(--display);
  font-size: clamp(3.6rem, 12vw, 6.5rem);
  font-weight: 800;
  color: var(--mint-line);
  line-height: 1;
  margin-bottom: 10px;
}