/* ==========================================================================
   Borehamwood Chiropody & Podiatry
   Single hand-written stylesheet. No frameworks, no preprocessor.
   Layers: tokens · reset · primitives · layout · header · sections · footer
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* Brand — carried over from the original site, tuned for contrast.
     Original #8fb13b failed AA on white; --brand is the darkened working
     value, --brand-bright keeps the original hue for large areas & marks. */
  --brand: #5f7d1d;
  --brand-mid: #6e8f22;
  --brand-bright: #8fb13b;
  --brand-light: #a7c758;
  --brand-deep: #3f5413;

  /* Neutrals */
  --ink: #15191c;
  --ink-2: #333c43;
  --muted: #5c6771;      /* 5.78:1 on white */
  --muted-2: #6b7883;    /* 4.53:1 on white — the floor for AA body text */
  --line: #e5e9ea;
  --line-soft: #eef1f0;
  --surface: #ffffff;
  --surface-2: #f7f9f4;
  --surface-3: #f1f4ec;

  /* Derived — color-mix keeps tints locked to the brand hue */
  --brand-tint: color-mix(in srgb, var(--brand-bright) 12%, #fff);
  --brand-tint-soft: color-mix(in srgb, var(--brand-bright) 6%, #fff);
  --brand-ring: color-mix(in srgb, var(--brand) 28%, transparent);
  --brand-hairline: color-mix(in srgb, var(--brand) 20%, var(--line));

  /* Type — one family, fluid scale */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --fs-lead: clamp(1.075rem, 1rem + 0.38vw, 1.25rem);
  --fs-h3: clamp(1.15rem, 1.07rem + 0.4vw, 1.35rem);
  --fs-h2: clamp(1.7rem, 1.32rem + 1.65vw, 2.6rem);
  --fs-h1: clamp(2.3rem, 1.5rem + 3.4vw, 4rem);

  /* Space & shape */
  --wrap: 1180px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.15rem, 0.7rem + 2.1vw, 2.5rem);
  --section-y: clamp(3.75rem, 2.4rem + 5.6vw, 7rem);
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* Elevation — Stripe-ish: hairline + short shadow + long soft shadow */
  --sh-1: 0 1px 2px rgb(21 25 28 / 0.05), 0 1px 3px rgb(21 25 28 / 0.04);
  --sh-2: 0 2px 4px rgb(21 25 28 / 0.05), 0 8px 20px -6px rgb(21 25 28 / 0.09);
  --sh-3: 0 4px 8px rgb(21 25 28 / 0.05), 0 22px 44px -14px rgb(21 25 28 / 0.16);

  --header-h: 118px;
  --ease: cubic-bezier(0.22, 0.68, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.033em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

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

::selection { background: var(--brand-light); color: var(--ink); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------- PRIMITIVES */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-2); border-block: 1px solid var(--line-soft); }
.section--tint { background: linear-gradient(180deg, var(--brand-tint-soft), var(--surface)); }

.section-head { max-width: 660px; margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 0.85rem; font-size: var(--fs-lead); color: var(--muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.section-head--center .eyebrow { justify-content: center; }

.lede { font-size: var(--fs-lead); color: var(--muted); }

/* Buttons */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
    background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  box-shadow: var(--sh-1), inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.btn--primary:hover { background: var(--brand-deep); box-shadow: var(--sh-2); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.btn--ghost:hover { border-color: var(--brand-hairline); color: var(--brand); box-shadow: var(--sh-2); }

.btn--light {
  --btn-bg: rgb(255 255 255 / 0.1);
  --btn-fg: #fff;
  border-color: rgb(255 255 255 / 0.32);
  backdrop-filter: blur(6px);
}
.btn--light:hover { background: rgb(255 255 255 / 0.2); }

.btn--lg { padding: 0.92rem 1.7rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }

/* Card */
.card {
  position: relative;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}
.card:hover { transform: translateY(-2px); border-color: var(--brand-hairline); box-shadow: var(--sh-2); }
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

.card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: 11px;
  background: var(--brand-tint);
  color: var(--brand);
}
.card-icon svg { width: 21px; height: 21px; }

/* Reveal-on-scroll (IntersectionObserver adds .is-in) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------------ HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 8px 24px -14px rgb(21 25 28 / 0.22); }

/* Utility strip — email + phone numbers, permanently visible */
.utility {
  background: var(--brand-deep);
  color: color-mix(in srgb, #fff 82%, var(--brand-light));
  font-size: var(--fs-xs);
  letter-spacing: 0.005em;
}
.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
  padding-block: 0.35rem;
}
.utility-list { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.utility a,
.utility span.utility-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.utility a:hover { color: #fff; }
.utility svg { width: 14px; height: 14px; flex: none; opacity: 0.85; }
/* brand-light alone is only 4.39:1 on --brand-deep; lifting it clears AA */
.utility-label { font-weight: 700; color: color-mix(in srgb, var(--brand-light) 62%, #fff); }
.utility-note { opacity: 0.72; }

/* Main bar */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 76px;
  padding-block: 0.7rem;
  transition: min-height 0.2s var(--ease), padding-block 0.2s var(--ease);
}
.site-header.is-stuck .nav-bar { min-height: 64px; padding-block: 0.45rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand img { width: 42px; height: 42px; border-radius: 11px; transition: width 0.2s var(--ease), height 0.2s var(--ease); }
.site-header.is-stuck .brand img { width: 36px; height: 36px; }
.brand-text { display: grid; line-height: 1.08; }
.brand-name {
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.16rem);
  font-weight: 700;
  letter-spacing: -0.028em;
}
.brand-sub {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--brand);
}

.nav { display: flex; align-items: center; gap: 0.9rem; }
.nav-links { display: flex; align-items: center; gap: 0.15rem; }
.nav-links a {
  position: relative;
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--surface-3); }
.nav-links a[aria-current="true"] { color: var(--brand); background: var(--brand-tint); }

.nav-toggle {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.8px;
  margin: 3px auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
/* 1.8px bar + 3px margin top and bottom => 7.8px between bar centres */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.8px) rotate(-45deg); }

@media (max-width: 1060px) {
  :root { --header-h: 108px; }
  .nav-toggle { display: grid; }
  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: grid;
    gap: 0.3rem;
    padding: 0.85rem var(--gutter) 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-3);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
    transition: clip-path 0.28s var(--ease), opacity 0.2s var(--ease);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
  .nav-links { display: grid; gap: 0.1rem; }
  .nav-links a { padding: 0.72rem 0.85rem; font-size: 1rem; }
  .nav-cta { margin-top: 0.6rem; }
  .nav-cta .btn { width: 100%; }
}

/* Below this width the utility strip drops to a single compact row:
   email becomes an icon-only link, the address moves to the footer. */
@media (max-width: 860px) {
  .utility-inner { justify-content: center; }
  .utility-list { gap: 1.15rem; justify-content: center; flex-wrap: nowrap; }
  .utility span.utility-note { display: none; }
  .utility .email-text { display: none; }
  .utility .email-link { padding: 0.15rem; }
  .utility .email-link svg { width: 16px; height: 16px; opacity: 1; }
}

@media (max-width: 420px) {
  .utility-list { gap: 0.85rem; font-size: 0.74rem; }
  .utility span.utility-label { display: none; }
  .brand-name { font-size: 0.98rem; }
  .brand-sub { font-size: 0.62rem; letter-spacing: 0.07em; }
}

/* -------------------------------------------------------------------- HERO */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(78svh, 660px);
  padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem);
  overflow: clip;
  isolation: isolate;
  color: #fff;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgb(11 16 7 / 0.92) 0%, rgb(11 16 7 / 0.78) 38%, rgb(11 16 7 / 0.34) 72%, rgb(11 16 7 / 0.2) 100%),
    linear-gradient(180deg, rgb(11 16 7 / 0.42), transparent 40%);
}
.hero-inner { max-width: 620px; }
.hero .eyebrow { color: var(--brand-light); }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--brand-light); }
.hero .lede { margin-top: 1.1rem; color: rgb(255 255 255 / 0.86); max-width: 54ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.9rem; }

.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: 0.9rem clamp(1.1rem, 0.4rem + 2.2vw, 2.4rem);
  margin-top: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}
.hero-facts li { display: grid; gap: 0.1rem; }
.hero-facts strong { font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.55rem); font-weight: 700; letter-spacing: -0.028em; color: #fff; white-space: nowrap; }
.hero-facts span { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.055em; text-transform: uppercase; color: rgb(255 255 255 / 0.68); }
@media (max-width: 620px) { .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Trust strip below hero */
.trust {
  background: var(--ink);
  color: rgb(255 255 255 / 0.72);
  font-size: var(--fs-sm);
}
.trust-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0.7rem clamp(1rem, 0.4rem + 2vw, 2.25rem);
  padding-block: 1.05rem;
  font-size: 0.83rem;
}
.trust li { display: flex; align-items: center; gap: 0.55rem; }
@media (max-width: 980px) { .trust-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .trust-inner { grid-template-columns: minmax(0, 1fr); } }
.trust svg { width: 16px; height: 16px; flex: none; color: var(--brand-light); }
.trust strong { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------- GRIDS */
.grid { display: grid; gap: clamp(0.9rem, 0.6rem + 1.1vw, 1.35rem); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 940px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Split feature (image + copy) */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 3.6vw, 4rem);
  align-items: center;
}
.split--flip .split-media { order: 2; }
.split--top { align-items: start; }
.split + .split { margin-top: clamp(2.75rem, 1.8rem + 3.4vw, 5rem); }

/* Where one column is much taller than the other (the About bio plus the
   credentials panel), pin the image so it tracks the reader instead of
   floating in a large empty gap. */
.split--sticky { align-items: start; }
@media (min-width: 861px) {
  .split--sticky .split-media {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}
.split-media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-media--tall img { aspect-ratio: 3 / 4; }
.split-media--portrait img { aspect-ratio: 4 / 5; }
.split-body h2 { margin-bottom: 1rem; }
.split-body p { color: var(--muted); }

@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--flip .split-media { order: 0; }
}

/* Tick list */
.ticks { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
.ticks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.ticks li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7d1d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------------------------------------------------------------- PRODUCTS */
.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 0.6rem + 1.1vw, 1.35rem);
}
@media (max-width: 940px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .products { grid-template-columns: minmax(0, 1fr); } }

.product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}
.product:hover { transform: translateY(-2px); border-color: var(--brand-hairline); box-shadow: var(--sh-2); }

/* Product shots are supplied on white, so the tile keeps a white ground and
   leans on the surrounding border rather than a tinted panel. */
.product-media {
  aspect-ratio: 1 / 1;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
}
.product-media img { width: 100%; height: 100%; object-fit: contain; padding: 0.75rem; }

/* Fallback tile for a product with no photograph */
.product-media--icon {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--brand);
}
.product-media--icon svg { width: 42%; height: 42%; opacity: 0.55; }

.product-body { padding: clamp(1rem, 0.85rem + 0.5vw, 1.3rem); }
.product-body h3 { margin-bottom: 0.45rem; font-size: 1rem; letter-spacing: -0.012em; }
.product-body p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }

/* ---------------------------------------------- QUALIFICATIONS / CREDENTIALS */
.creds {
  margin-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  padding: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  background: var(--brand-tint-soft);
  border: 1px solid var(--brand-hairline);
  border-radius: var(--r-lg);
}
.creds-title {
  margin-bottom: 1rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}
.creds-list { display: grid; gap: 0.9rem; }

.cred { display: grid; grid-template-columns: 34px 1fr; gap: 0.8rem; align-items: start; }
.cred-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--brand-hairline);
  color: var(--brand);
}
.cred-icon svg { width: 17px; height: 17px; }
.cred-body { display: grid; gap: 0.1rem; min-width: 0; }
.cred-name { font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.cred-meta { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.cred-no {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--brand);
}

/* --------------------------------------------------------- CONDITIONS GRID */
/* Rendered from data — auto-fit so the row count follows the data length. */
.conditions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 0.6rem + 1.1vw, 1.35rem);
}
@media (max-width: 980px) { .conditions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .conditions-grid { grid-template-columns: minmax(0, 1fr); } }

.condition {
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.condition:hover { transform: translateY(-2px); border-color: var(--brand-hairline); box-shadow: var(--sh-2); }
.condition-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.condition-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand);
}
.condition-icon svg { width: 19px; height: 19px; }
.condition h3 { font-size: 1.02rem; letter-spacing: -0.012em; }
.condition p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }
.condition-tag {
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------- FEES LIST */
/* Rendered from data — one row per data point, grouped by category. */
.fees-groups { display: grid; gap: clamp(1.1rem, 0.8rem + 1vw, 1.6rem); }

.fees-group {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.fees-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.fees-group-head h3 { font-size: 0.95rem; letter-spacing: 0.01em; }
.fees-group-head svg { width: 17px; height: 17px; color: var(--brand); flex: none; }

.fee-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding: 0.95rem clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  border-top: 1px solid var(--line-soft);
}
.fee-row:first-of-type { border-top: 0; }
.fee-name { font-weight: 600; color: var(--ink); font-size: 0.97rem; }
.fee-note { display: block; margin-top: 0.15rem; font-weight: 400; font-size: var(--fs-sm); color: var(--muted); }
.fee-price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--brand);
  text-align: right;
  white-space: nowrap;
}
.fee-price small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); letter-spacing: 0; white-space: normal; }

@media (max-width: 520px) {
  .fee-row { grid-template-columns: minmax(0, 1fr); }
  .fee-price { text-align: left; }
  .fee-price small { display: inline; margin-left: 0.35rem; }
}

.fees-notes {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.6rem;
  padding: 1.15rem 1.35rem;
  background: var(--brand-tint-soft);
  border: 1px solid var(--brand-hairline);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.fees-notes li { display: grid; grid-template-columns: 16px 1fr; gap: 0.6rem; align-items: start; }
.fees-notes li::before { content: "•"; color: var(--brand); font-weight: 700; text-align: center; }

/* -------------------------------------------------------------------- FAQS */
.faq-list { display: grid; gap: 0.65rem; }

.faq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq[open] { border-color: var(--brand-hairline); box-shadow: var(--sh-2); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.35rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary::after {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6771' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 17px no-repeat;
  transition: transform 0.24s var(--ease);
}
.faq[open] summary::after { transform: rotate(180deg); }
.faq-body { padding: 0 1.35rem 1.25rem; font-size: var(--fs-sm); color: var(--muted); line-height: 1.68; }
.faq-body p + p { margin-top: 0.8em; }

/* ------------------------------------------------------------ TESTIMONIALS */
.quotes { columns: 3 260px; column-gap: clamp(0.9rem, 0.6rem + 1.1vw, 1.35rem); }
.quote {
  break-inside: avoid;
  margin-bottom: clamp(0.9rem, 0.6rem + 1.1vw, 1.35rem);
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.quote-mark { width: 24px; height: 24px; margin-bottom: 0.7rem; color: var(--brand-light); }
.quote blockquote { margin: 0; }
.quote p { font-size: 0.97rem; line-height: 1.62; color: var(--ink-2); }
.quote figcaption { margin-top: 0.9rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.quote figcaption span { display: block; font-weight: 400; color: var(--muted-2); font-size: var(--fs-xs); }

/* ----------------------------------------------------------------- GALLERY */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
@media (max-width: 780px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gallery button {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-3);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease), filter 0.3s var(--ease);
}
.gallery button:hover img { transform: scale(1.05); filter: saturate(1.05); }

/* Native <dialog> lightbox — focus trap, Esc and backdrop come free */
.lightbox {
  width: min(92vw, 1000px);
  max-width: none;
  max-height: 90svh;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgb(10 14 8 / 0.78); backdrop-filter: blur(4px); }
.lightbox img { width: 100%; max-height: 78svh; object-fit: contain; border-radius: var(--r-lg); background: #0b0f08; }
.lightbox-caption {
  margin-top: 0.85rem;
  color: rgb(255 255 255 / 0.8);
  font-size: var(--fs-sm);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-2);
  cursor: pointer;
}
.lightbox-close svg { width: 17px; height: 17px; }
@media (max-width: 620px) { .lightbox-close { top: -46px; right: 0; } }

/* Before / after pair */
.ba-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.ba-pair figure { margin: 0; }
.ba-pair button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--r);
  cursor: zoom-in;
}
.ba-pair img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); transition: transform 0.3s var(--ease); }
.ba-pair button:hover img { transform: scale(1.02); }
.ba-pair figcaption {
  margin-top: 0.55rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------------- CONTACT */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.1rem, 0.7rem + 1.8vw, 2rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.contact-info {
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand-bright) 26%, transparent), transparent 62%),
    linear-gradient(165deg, var(--brand-deep), #1e2a10);
  color: rgb(255 255 255 / 0.82);
  box-shadow: var(--sh-3);
}
.contact-info h3 { color: #fff; margin-bottom: 0.6rem; }
.contact-info > p { font-size: var(--fs-sm); }

.contact-detail { display: grid; grid-template-columns: 40px 1fr; gap: 0.9rem; align-items: start; margin-top: 1.4rem; }
.contact-detail-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.14);
  color: var(--brand-light);
}
.contact-detail-icon svg { width: 18px; height: 18px; }
.contact-detail-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.52);
}
.contact-detail-value {
  color: #fff;
  font-weight: 500;
  line-height: 1.5;
  min-width: 0;
  /* the email address is a single 30-character token — let it break on narrow screens */
  overflow-wrap: anywhere;
}
.contact-detail > div { min-width: 0; }
@media (max-width: 400px) {
  .contact-detail { grid-template-columns: 34px 1fr; gap: 0.7rem; }
  .contact-detail-icon { width: 34px; height: 34px; border-radius: 9px; }
  .contact-detail-icon svg { width: 16px; height: 16px; }
}
.contact-detail-value a { color: #fff; text-decoration: none; }
.contact-detail-value a:hover { text-decoration: underline; }

.hours {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}
.hours-title {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.52);
}
.hours-title svg { width: 15px; height: 15px; }
.hours-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
  font-size: var(--fs-sm);
}
.hours-row + .hours-row { border-top: 1px solid rgb(255 255 255 / 0.07); }
.hours-row.is-today { color: #fff; font-weight: 600; }
.hours-row.is-today .hours-day::after {
  content: "Today";
  margin-left: 0.5rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: var(--brand-bright);
  color: var(--brand-deep);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.hours-time { font-variant-numeric: tabular-nums; color: #fff; }
.hours-row.is-closed .hours-time { color: rgb(255 255 255 / 0.42); }

/* Home-visit window, shown only on days the data provides one. Sits under its
   day rather than in a separate column so it survives a narrow contact card. */
.hours-visit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.1rem 0 0.3rem;
  font-size: 0.78rem;
  /* brand-light alone is 4.4:1 against the light end of the card gradient;
     the same 62% lift used on the utility strip label takes it to 5.68:1 */
  color: color-mix(in srgb, var(--brand-light) 62%, #fff);
}
.hours-visit svg { width: 13px; height: 13px; flex: none; opacity: 0.9; }
.hours-visit-time { font-variant-numeric: tabular-nums; font-weight: 600; }
/* the row above owns the divider, so suppress the one this would introduce */
.hours-visit + .hours-row { border-top: 1px solid rgb(255 255 255 / 0.07); }

/* Form */
.contact-form-wrap {
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}
.contact-form-wrap h3 { margin-bottom: 0.45rem; }
.contact-form-wrap > p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.6rem; }

.form-grid { display: grid; gap: 1.05rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field label .opt { font-weight: 400; color: var(--muted-2); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6771' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-2); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: #c2453a; }
.field input:user-invalid:focus,
.field textarea:user-invalid:focus { box-shadow: 0 0 0 3px rgb(194 69 58 / 0.2); }

.form-consent { display: grid; grid-template-columns: 18px 1fr; gap: 0.65rem; align-items: start; font-size: var(--fs-sm); color: var(--muted); }
.form-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }

.form-hp { position: absolute; left: -9999px; opacity: 0; }

.form-status {
  display: none;
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.form-status.is-visible { display: block; }
.form-status.is-ok { background: var(--brand-tint); border: 1px solid var(--brand-hairline); color: var(--brand-deep); }
.form-status.is-err { background: #fdf1f0; border: 1px solid #f1c9c5; color: #8f2f26; }

/* Map */
.map {
  margin-top: clamp(1.1rem, 0.7rem + 1.8vw, 2rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  background: var(--surface-3);
}
.map iframe { display: block; width: 100%; height: clamp(300px, 38svh, 440px); border: 0; }

/* ------------------------------------------------------------------ FOOTER */
.site-footer {
  padding-block: clamp(2.75rem, 2rem + 2.4vw, 4rem) 0;
  background: var(--ink);
  color: rgb(255 255 255 / 0.6);
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-brand { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; text-decoration: none; }
.footer-brand img { width: 40px; height: 40px; border-radius: 11px; }
.footer-brand-name { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.025em; line-height: 1.15; }
.footer-brand-sub { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: var(--brand-light); }

.footer-col h4 {
  margin-bottom: 0.9rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.42);
}
.footer-col li + li { margin-top: 0.5rem; }
.footer-col a { color: rgb(255 255 255 / 0.68); text-decoration: none; }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-block: 1.4rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: var(--fs-xs);
  /* 0.5 alpha over --ink is 5.24:1. The previous 0.45 measured 4.46:1 — just
     under AA — so this row was the one place the site missed the standard. */
  color: rgb(255 255 255 / 0.5);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* Legal links and the build credit, grouped so they sit together on the right */
.footer-bottom-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
}

/* Build credit. Deliberately NOT dimmed below the surrounding text: on this
   footer, white below ~0.92 alpha drops under 4.5:1, so any further fade would
   make it the one element on the site that fails AA. It reads as secondary
   through position (last, far right), size and the absence of an underline. */
.footer-credit {
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.16s var(--ease);
}
.footer-credit:hover,
.footer-credit:focus-visible { color: #fff; }

@media (max-width: 640px) {
  .footer-bottom { justify-content: flex-start; }
  .footer-bottom-end { width: 100%; justify-content: space-between; }
}

/* --------------------------------------------------------- LOADING / EMPTY */
.state {
  grid-column: 1 / -1;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.skeleton {
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.skeleton--card { height: 168px; }
.skeleton--row { height: 62px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------------------------------------------------------- LEGAL SUBPAGES */
.page-hero {
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  background: linear-gradient(180deg, var(--brand-tint-soft), var(--surface));
  border-bottom: 1px solid var(--line-soft);
}
.page-hero .lede { margin-top: 0.85rem; }

.prose { max-width: 72ch; }
.prose h2 { margin: 2.4rem 0 0.9rem; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.8rem 0 0.6rem; font-size: 1.05rem; }
.prose p, .prose li { color: var(--muted); }
.prose ul { display: grid; gap: 0.5rem; margin: 0 0 1.2rem; }
.prose ul li { display: grid; grid-template-columns: 16px 1fr; gap: 0.6rem; }
.prose ul li::before { content: "•"; color: var(--brand); font-weight: 700; }
.prose dl { margin: 0 0 1.4rem; }
.prose dt { margin-top: 1rem; font-weight: 600; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; }
.prose dd { margin: 0.3rem 0 0; color: var(--muted); font-size: var(--fs-sm); }