/* Shared base for Eastern Balance hero variations */
:root {
  --ink: #0d0c0b;
  --white: #f7f4ee;
  --white-soft: rgba(247, 244, 238, 0.78);
  --white-faint: rgba(247, 244, 238, 0.42);
  --hair: rgba(247, 244, 238, 0.22);
  --gold: #d4b26a;
  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ink); color: var(--white); }
body { font-family: var(--body); font-weight: 400; -webkit-font-smoothing: antialiased; } /* was 300: too thin at body sizes */
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("assets/hero-background/hero-background.png") center / cover no-repeat;
}
.hero__shade { position: absolute; inset: 0; z-index: -1; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px var(--gutter);
}
.topbar nav { display: flex; gap: clamp(18px, 3vw, 40px); align-items: center; }
.topbar nav a {
  font-size: 12px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  color: var(--white); /* full white: the hero photo is bright behind these links */
  padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color .3s;
}
.topbar nav a:hover { border-color: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 30px;
  font-size: 12px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase;
  transition: background .35s, color .35s, border-color .35s;
}
.btn--solid { background: var(--white); color: var(--ink); }
.btn--solid:hover { background: #fff; }
.btn--ghost { border: 1px solid var(--white-faint); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); }

/* Logo with gold emblem + white wordmark, built from the two supplied PNGs */
.splitlogo { position: relative; aspect-ratio: 1774 / 887; }
.splitlogo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.splitlogo .gold { clip-path: inset(0 0 35% 0); }
.splitlogo .white { clip-path: inset(65% 0 0 0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 640px) {
  .topbar nav .hide-sm { display: none; }
  .btn { width: 100%; }
}
/* ---------- Hero (variation D) ---------- */
  .hero__shade {
    background:
      radial-gradient(ellipse 50% 55% at 50% 50%, rgba(10,9,8,.6), rgba(10,9,8,0) 75%),
      linear-gradient(180deg, rgba(10,9,8,.5) 0%, rgba(10,9,8,.1) 22%, rgba(10,9,8,.1) 70%, rgba(10,9,8,.7) 100%);
  }

  /* From C: header brand + nav */
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand img { width: 26px; }
  .brand span {
    font-family: var(--display); font-size: 17px; letter-spacing: 0.18em; text-transform: uppercase;
  }

  /* From C: faint emblem sitting in the patch of light */
  .emblem {
    position: absolute; z-index: -1;
    /* Large, high, bleeding off the top-right edge so it reads as texture */
    right: -10vw; top: -14vh;
    width: clamp(420px, 40vw, 680px);
    opacity: .55; mix-blend-mode: soft-light;
  }

  /* From A: centered logo, paragraph, CTAs */
  .center {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 24px var(--gutter) 48px;
  }
  .center .logo { width: min(520px, 84vw); }
  .center .tagline {
    margin-top: clamp(28px, 4vh, 44px);
    max-width: 30em;
    font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; color: var(--white-soft);
  }
  .center .tagline strong { font-weight: 500; color: var(--white); white-space: nowrap; }
  .center .actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

  /* From A: address + phone strip */
  .foot {
    display: flex; justify-content: center; gap: 12px 36px; flex-wrap: wrap;
    padding: 22px var(--gutter) 30px;
    font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-soft);
  }
  .foot a:hover { color: var(--white); }
  .foot .dot { width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); align-self: center; }

  @media (max-width: 1000px) {
    .emblem { top: 14%; right: 24px; width: 160px; transform: none; opacity: .35; }
  }
  .brand span { white-space: nowrap; }
  .foot .nw { white-space: nowrap; }
  @media (max-width: 640px) {
    .brand span { font-size: 14px; }
    .topbar { gap: 16px; }
    .emblem { display: none; }
    .center .actions { width: 100%; flex-direction: column; }
    .foot { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
    .foot .nw { display: block; }
    .foot .sep { display: none; }
    .foot .dot { display: none; }
  }

@media (max-width: 400px) {
  .brand span { display: none; }
}

/* ---------- Services ---------- */
.services, .offerings {
  --paper: #f5eee6;
  --ink-dark: #1f1b17;
  --ink-mid: #574d45;
  --bronze: #775a32; /* darkened from #8b6b3e so small bronze labels pass 4.5:1 on the cream textures */
  --rule: rgba(31, 27, 23, 0.14);
  color: var(--ink-dark);
  background: var(--paper);
}
.services {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper) url("assets/services/leaf-shadow-background.webp") center / cover no-repeat;
  /* Desktop mirrors the mockup (1586 x 992): the section keeps its proportions and every size below
     is in container units (cqw), so text and photos scale together and never drift into each other. */
  container-type: inline-size;
  /* Mockup proportions (1586 x 992) as a minimum, so the section can grow if the (larger, accessible) text needs more room; the art scales to fill */
  min-height: calc(100vw * 992 / 1586);
  display: flex; align-items: center; justify-content: center;
}
.svc-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.svc-photo { display: none; }  /* photo bands are for tablet/mobile only */

.svc-inner {
  width: 33.4cqw;          /* the mockup's text column: x 530-1060 of 1586 */
  padding: 3cqw 0;
  text-align: center;
}
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-size: 12px; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-mid);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 56px; height: 1px; background: var(--bronze); opacity: .7; }
.services h2, .offerings h2 {
  font-family: var(--display); font-weight: 400; color: var(--ink-dark);
  font-size: clamp(36px, 3.4vw, 54px); line-height: 1.1;
}
.services h2 { margin-top: 1.2cqw; font-size: 3.15cqw; max-width: 26.5cqw; margin-inline: auto; }
/* The top-right photo bulges inward near the top, so the heading and intro are narrower than the grid (as in the mockup) */
.services .svc-intro { max-width: 28cqw; }
.svc-intro {
  margin: 1.1cqw auto 0; max-width: 31em;
  font-size: max(16px, 1.05cqw); line-height: 1.7; color: var(--ink-mid);
}

.svc-grid {
  margin-top: 2.1cqw;
  display: grid; grid-template-columns: 1fr 1fr;
  list-style: none;
}
.svc-grid li { padding: 1.35cqw 1.1cqw; }
.svc-grid li:nth-child(odd)  { border-right: 1px solid var(--rule); }
.svc-grid li:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
.svc-grid h3 { font-family: var(--display); font-weight: 400; font-size: 1.55cqw; line-height: 1.2; }
.svc-grid .who {
  display: block; margin-top: 8px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze);
}
.svc-grid p { margin-top: .75cqw; font-size: max(15px, .98cqw); line-height: 1.6; color: var(--ink-mid); }

.svc-actions { margin-top: 2cqw; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn--ink { background: var(--ink-dark); color: var(--white); }
.btn--ink:hover { background: #000; }
.btn--line { border: 1px solid rgba(31,27,23,.4); color: var(--ink-dark); }
.btn--line:hover { border-color: var(--ink-dark); }

/* ---------- Acupuncture & TCM offerings ---------- */
.offerings {
  border-top: 1px solid var(--rule);
  padding: clamp(80px, 10vw, 140px) var(--gutter);
}
.off-wrap {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px);
}
.off-head { position: sticky; top: 48px; align-self: start; }
.off-head .eyebrow { justify-content: flex-start; }
.off-head .eyebrow::after { display: none; }
.off-head h2 { margin-top: 24px; }
.off-head p:not(.eyebrow) { margin-top: 20px; max-width: 26em; font-size: 16px; line-height: 1.75; color: var(--ink-mid); }
.off-head .btn { margin-top: 32px; }

.off-list { list-style: none; border-top: 1px solid var(--rule); }
.off-list li {
  display: grid; grid-template-columns: 56px 1fr; gap: 8px 20px;
  padding: 34px 0; border-bottom: 1px solid var(--rule);
}
.off-list .num { font-family: var(--display); font-size: 15px; color: var(--bronze); padding-top: 6px; letter-spacing: .08em; }
.off-list h3 { font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 1.2; }
.off-list p { grid-column: 2; font-size: 16px; line-height: 1.75; color: var(--ink-mid); max-width: 38em; }

.services a:focus-visible, .offerings a:focus-visible { outline: 1px solid var(--ink-dark); outline-offset: 4px; }

/* ---------- Services: tablet + mobile (stacked photo bands) ---------- */
@media (max-width: 1199px) {
  .services { display: block; min-height: 0; padding: 0; aspect-ratio: auto; container-type: normal; }
  .svc-art { display: none; }
  .svc-photo { display: block; margin: 0; }
  .svc-photo img { width: 100%; height: 100%; object-fit: cover; }
  .services h2 { margin-top: 18px; font-size: clamp(32px, 5vw, 44px); max-width: none; }
  .services .svc-intro { max-width: 31em; }
  .svc-intro { margin-top: 16px; font-size: 16px; }
  .svc-grid { margin-top: 32px; }
  .svc-grid li { padding: 22px 18px; }
  .svc-grid h3 { font-size: 23px; }
  .svc-grid p { margin-top: 10px; font-size: 15px; }
  .svc-actions { margin-top: 30px; }
  .svc-photo { position: relative; z-index: 0; width: 100%; }
  .svc-photo--left { top: auto; bottom: auto; height: clamp(300px, 52vw, 520px); width: 100%; clip-path: url(#clip-mtop); }
  .svc-photo--left img { object-position: left top; }
  .svc-photo--rtop { order: 3; height: clamp(240px, 42vw, 420px); width: 100%; clip-path: url(#clip-mbot); margin-top: 8px; }
  .svc-photo--rbot { display: none; }
  .svc-inner { width: auto; max-width: 640px; margin: 28px auto 0; padding: 0 var(--gutter); }
  .services { display: flex; flex-direction: column; }
  .svc-photo--left { order: 1; }
  .svc-inner { order: 2; }
}
@media (max-width: 860px) {
  .off-wrap { grid-template-columns: 1fr; }
  .off-head { position: static; }
}
@media (max-width: 640px) {
  .eyebrow::before, .eyebrow::after { width: 36px; }
  .svc-grid { grid-template-columns: 1fr; text-align: left; margin-top: 36px; }
  .svc-grid li { padding: 24px 0; }
  .svc-grid li:nth-child(odd) { border-right: 0; }
  .svc-grid li:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
    .svc-grid h3 { font-size: 23px; }
  .svc-actions { flex-direction: column; }
  .off-list li { grid-template-columns: 1fr; padding: 28px 0; }
  .off-list p { grid-column: 1; }
  .off-list h3 { font-size: 24px; }
}

/* ---------- Team (dark, variation A) ---------- */
.team {
  --gold-soft: rgba(212, 178, 106, 0.32);
  position: relative; overflow: hidden; isolation: isolate;
  background: #181715; color: var(--white);
  padding: clamp(96px, 11vw, 160px) var(--gutter) clamp(88px, 10vw, 140px);
}
/* Gold emblem as a faint underlay stamp, bleeding off the top right like the hero */
.team .stamp {
  position: absolute; z-index: -1; max-width: none; pointer-events: none; user-select: none;
  width: clamp(420px, 42vw, 680px); right: -7vw; top: -12%; opacity: .2;
}
.team-wrap { max-width: 1320px; margin: 0 auto; }
.team-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 48px; }
.team .eyebrow { justify-content: flex-start; color: var(--gold); }
.team .eyebrow::before { background: var(--gold); }
.team .eyebrow::after { display: none; }
.team h2 {
  margin-top: 22px;
  font-family: var(--display); font-weight: 400; font-size: clamp(36px, 3.6vw, 56px); line-height: 1.1;
}
.team-intro { max-width: 30em; font-size: 16px; line-height: 1.75; color: var(--white-soft); }

.team .role { display: block; font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.team h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; }

.arch { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; background: #2a2622; }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }

.team-row {
  list-style: none; margin-top: clamp(56px, 6vw, 88px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px);
}
.team-row li { display: flex; flex-direction: column; }
.team-row .arch { cursor: pointer; }
.team-row .arch img { filter: saturate(.88); transition: transform .8s ease, filter .6s; }
.team-row li:hover .arch img { transform: scale(1.04); filter: saturate(1); }
.team-row .arch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--gold-soft); }
.team-row .role { margin-top: 22px; min-height: 2.8em; line-height: 1.4; }
.team-row h3 { margin-top: 8px; font-size: clamp(22px, 1.7vw, 27px); }
.team-row p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--white-soft); }
.team-links { margin-top: auto; padding-top: 24px; display: grid; grid-template-columns: 1fr; gap: 8px; }
/* Compact buttons sized for the narrow portrait columns */
.btn--sm {
  min-height: 44px; padding: 0 12px; gap: 0;
  font-family: inherit; font-size: 11px; letter-spacing: .2em; cursor: pointer;
}
button.btn--ghost { background: none; }
.team-links .btn--ghost { border-color: var(--gold-soft); }
.team-links .btn--ghost:hover { border-color: var(--gold); color: var(--white); }
.team-links .btn--solid { background: var(--gold); color: var(--ink); }
.team-links .btn--solid:hover { background: #e2c582; }
.textlink {
  font: inherit; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--white-soft);
  background: none; border: 0; border-bottom: 1px solid var(--gold-soft); padding: 6px 0 4px; cursor: pointer;
  transition: color .3s, border-color .3s;
}
.textlink:hover { color: var(--white); border-color: var(--gold); }
.team a:focus-visible, .team button:focus-visible, dialog.bio :focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* Bio pop-up */
dialog.bio {
  --gold-soft: rgba(212, 178, 106, 0.32);
  margin: auto; border: 1px solid var(--gold-soft); background: #1a1816; color: var(--white);
  width: min(880px, calc(100vw - 32px)); max-height: calc(100svh - 48px); padding: 0; overflow: auto;
}
dialog.bio::backdrop { background: rgba(8,7,6,.78); backdrop-filter: blur(3px); }
.bio__inner { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 44px; position: relative; }
.bio__inner .arch { align-self: start; }
.bio__inner .role { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.bio__inner h3 { margin-top: 10px; font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.15; }
.bio__inner p { margin-top: 16px; font-size: 16px; line-height: 1.75; color: var(--white-soft); }
.bio__inner p a { color: var(--white); border-bottom: 1px solid var(--gold-soft); }
.bio__inner .btn { margin-top: 28px; }
.bio__close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; font-size: 26px; line-height: 1; color: var(--white-soft);
}
.bio__close:hover { color: var(--white); }

@media (max-width: 1100px) {
  .team-head { grid-template-columns: 1fr; }
  .team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 28px; }
  .team-row li { flex: 0 1 calc((100% - 56px) / 3); }
}
@media (max-width: 720px) {
  .team-row { gap: 44px 18px; }
  .team-row li { flex-basis: calc((100% - 18px) / 2); }
  .team-row p { display: none; }
  .team-row .role { min-height: 0; font-size: 11.5px; letter-spacing: .12em; }
  .team-links { padding-top: 18px; }
  .team .stamp { width: 300px; right: -110px; top: -40px; opacity: .22; }
  .bio__inner { grid-template-columns: 1fr; padding: 56px 22px 28px; gap: 24px; }
  .bio__inner .arch { max-width: 220px; }
}
@media (max-width: 640px) {
  .team .eyebrow::before { width: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-row .arch img { transition: none; }
  .team-row li:hover .arch img { transform: none; }
}

/* ---------- Visit / location ---------- */
.visit {
  --paper: #f5eee6;
  --ink-dark: #1f1b17;
  --ink-mid: #574d45;
  --bronze: #775a32; /* darkened from #8b6b3e so small bronze labels pass 4.5:1 on the cream textures */
  --rule: rgba(31, 27, 23, 0.14);
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--paper) url("assets/services/cream-texture.webp") center / cover no-repeat;
  color: var(--ink-dark);
  padding: clamp(96px, 11vw, 160px) var(--gutter);
}
.visit-wrap {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(48px, 7vw, 120px); align-items: center;
}

/* Photos: the building front with its sign, the front desk overlapping below */
/* Padding is a % of width, so the desk photo always lands on the garden corner, clear of the sign and door */
.visit-photos { position: relative; padding: 0 18% 32% 0; }
.visit-photo { margin: 0; overflow: hidden; background: #e7ddd1; }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; }
.visit-photo--outside { aspect-ratio: 1 / 1; }
.visit-photo--outside img { object-position: 0 50%; }
.visit-photo--inside {
  position: absolute; right: 0; bottom: 0;
  width: 42%; aspect-ratio: 4 / 5;
  outline: 10px solid var(--paper);
  box-shadow: 0 30px 60px -30px rgba(31, 27, 23, .45);
}
.visit-photo--inside img { object-position: 40% 60%; }

.visit h2 {
  font-family: var(--display); font-weight: 400; color: var(--ink-dark);
  font-size: clamp(36px, 3.4vw, 54px); line-height: 1.1;
}
.visit-intro { margin-top: 22px; max-width: 30em; font-size: 17px; line-height: 1.75; color: var(--ink-mid); }

.visit-details {
  margin-top: 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); /* wider right column so the email stays on one line */
  border-top: 1px solid var(--rule);
}
.visit-details > div { padding: 24px 22px 24px 0; border-bottom: 1px solid var(--rule); }
.visit-details > div:nth-child(even) { padding: 24px 0 24px 22px; border-left: 1px solid var(--rule); }
.visit-details dt {
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze);
}
.visit-details dd { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ink-mid); overflow-wrap: anywhere; }
.visit-details dd a { color: var(--ink-dark); border-bottom: 1px solid rgba(139, 107, 62, .4); transition: border-color .3s; }
.visit-details dd a:hover { border-color: var(--bronze); }

.visit-actions { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }
.visit a:focus-visible { outline: 1px solid var(--ink-dark); outline-offset: 4px; }

/* Two-column layout with a narrow text column: stack the details so the email and parking text don't get squeezed */
@media (min-width: 961px) and (max-width: 1260px) {
  .visit-details { grid-template-columns: 1fr; }
  .visit-details > div, .visit-details > div:nth-child(even) { padding: 20px 0; border-left: 0; }
}
@media (max-width: 960px) {
  .visit-wrap { grid-template-columns: 1fr; }
  .visit-photos { max-width: 560px; width: 100%; margin: 0 auto; }
  .visit-copy { max-width: 640px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  .visit-photo--inside { outline-width: 6px; }
  .visit-details { grid-template-columns: 1fr; }
  .visit-details > div, .visit-details > div:nth-child(even) { padding: 22px 0; border-left: 0; }
  .visit-actions { flex-direction: column; }
}

/* ---------- Reviews (dark, matches team) ---------- */
.reviews {
  --gold-soft: rgba(212, 178, 106, 0.32);
  position: relative; overflow: hidden; isolation: isolate;
  background: #181715; color: var(--white);
  padding: clamp(96px, 11vw, 160px) var(--gutter);
}
/* Same faint emblem stamp as the team section, mirrored to the left edge */
.reviews .stamp {
  position: absolute; z-index: -1; max-width: none; pointer-events: none; user-select: none;
  width: clamp(320px, 34vw, 520px); left: -12vw; bottom: -22%; opacity: .14;
}
.reviews-wrap { max-width: 1240px; margin: 0 auto; }
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; }
.reviews h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(36px, 3.6vw, 56px); line-height: 1.1;
  max-width: 12em;
}
.stars { color: var(--gold); letter-spacing: .18em; font-size: 14px; line-height: 1; }
.rating { display: flex; align-items: center; gap: 18px; padding-bottom: 6px; }
.rating__score { font-family: var(--display); font-size: 48px; line-height: 1; color: var(--white); }
.rating__meta { display: flex; flex-direction: column; gap: 8px; }
.rating__label {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--white-soft);
  border-bottom: 1px solid var(--gold-soft); padding-bottom: 4px; transition: color .3s, border-color .3s;
}
.rating:hover .rating__label { color: var(--white); border-color: var(--gold); }

.quote { margin: 0; display: flex; flex-direction: column; }
.quote blockquote { margin: 0; }
.quote p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.8; color: var(--white); }
.quote figcaption {
  margin-top: auto; padding-top: 22px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}

/* One list of reviews. Desktop: the two website testimonials share the top row, the four Google reviews sit below */
.reviews-list {
  list-style: none; margin-top: clamp(56px, 6vw, 88px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rv { display: flex; }
.rv .quote { width: 100%; }
.rv--feature {
  grid-column: span 2;
  padding-bottom: clamp(56px, 6vw, 80px); margin-bottom: clamp(48px, 5vw, 72px);
  border-bottom: 1px solid var(--hair);
}
.rv--feature:nth-child(1) { padding-right: clamp(16px, 2.5vw, 44px); }
.rv--feature:nth-child(2) { padding-left: clamp(16px, 2.5vw, 44px); }
.rv:not(.rv--feature) { padding: 0 clamp(20px, 2.2vw, 34px); border-left: 1px solid var(--hair); }
.rv:nth-child(3) { padding-left: 0; border-left: 0; }
.rv:nth-child(6) { padding-right: 0; }

.quote--lg { position: relative; padding-top: 58px; }
.quote--lg::before {
  content: "“"; position: absolute; top: -6px; left: -4px;
  font-family: var(--display); font-size: 96px; line-height: 1; color: var(--gold);
}
.rv .stars { margin-bottom: 18px; }

.reviews-nav { display: none; }

.reviews-actions { margin-top: clamp(56px, 6vw, 80px); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.reviews a:focus-visible, .reviews button:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

@media (max-width: 1100px) {
  .reviews-list { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .rv--feature { grid-column: span 1; margin-bottom: 0; }
  .rv:not(.rv--feature):nth-child(odd) { padding-left: 0; border-left: 0; }
  .rv:not(.rv--feature):nth-child(even) { padding-right: 0; }
}
@media (max-width: 860px) {
  .rv--feature { grid-column: span 2; padding-left: 0 !important; padding-right: 0 !important; }
  .rv--feature:nth-child(1) { border-bottom: 0; padding-bottom: 0; }
}

/* Mobile: one swipeable row. Every card stretches to the tallest one, so the section never changes height between slides */
@media (max-width: 640px) {
  .reviews-list {
    display: flex; align-items: stretch; gap: 14px;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .reviews-list::-webkit-scrollbar { display: none; }
  .rv, .rv--feature, .rv:not(.rv--feature), .rv:nth-child(n) {
    flex: 0 0 86%; scroll-snap-align: start;
    margin: 0; padding: 30px 24px 28px !important;
    border: 1px solid var(--hair) !important; background: rgba(247, 244, 238, .03);
  }
  /* Short quotes sit centred in the card with their name right below, rather than leaving a gap above the name */
  .rv .quote { justify-content: center; }
  .rv .quote figcaption { margin-top: 0; }
  .quote--lg { padding-top: 46px; }
  .quote--lg::before { font-size: 76px; top: -4px; }
  .quote p { font-size: 15.5px; line-height: 1.75; }

  .reviews-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 28px; }
  .reviews-nav__btn {
    width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
    background: none; color: var(--white); font-size: 18px;
    border: 1px solid var(--white-faint); border-radius: 50%; transition: border-color .3s;
  }
  .reviews-nav__btn:hover { border-color: var(--white); }
  .reviews-nav__count { min-width: 4.5em; text-align: center; font-size: 12px; letter-spacing: .2em; color: var(--white-soft); }

  .reviews .stamp { width: 240px; left: -110px; bottom: -110px; }
  .reviews-actions { flex-direction: column; }
}

/* ---------- Closing CTA (minimal, light) ---------- */
.cta {
  --paper: #f5eee6;
  --ink-dark: #1f1b17;
  --ink-mid: #574d45;
  background: var(--paper); color: var(--ink-dark);
  padding: clamp(88px, 10vw, 140px) var(--gutter);
  text-align: center;
}
.cta__mark { width: 34px; height: auto; margin: 0 auto 30px; opacity: .85; }
.cta h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 3.2vw, 50px); line-height: 1.1;
}
.cta h2, .cta p { text-wrap: balance; }
.cta p { margin: 20px auto 0; max-width: 30em; font-size: 17px; line-height: 1.75; color: var(--ink-mid); }
.cta-actions { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta a:focus-visible { outline: 1px solid var(--ink-dark); outline-offset: 4px; }

/* ---------- Footer ---------- */
.site-footer {
  --gold-soft: rgba(212, 178, 106, 0.32);
  background: var(--ink); color: var(--white);
  padding: clamp(72px, 8vw, 110px) var(--gutter) 0;
}
.footer-wrap {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px clamp(32px, 4vw, 64px);
}
.footer-brand img { width: 210px; height: auto; margin-left: -15px; } /* the PNG has built-in side padding */
.footer-brand p { margin-top: 24px; max-width: 24em; font-size: 15px; line-height: 1.75; color: var(--white-soft); }
.footer-col h3 {
  font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.footer-col p { margin-top: 18px; font-size: 15px; line-height: 1.8; color: var(--white-soft); }
.footer-col p a:hover, .footer-col li a:hover { color: var(--white); }
.footer-col .textlink { display: inline-block; margin-top: 16px; }
.footer-col ul { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.footer-col li a { font-size: 15px; color: var(--white-soft); transition: color .3s; }
.footer-base {
  max-width: 1240px; margin: clamp(56px, 7vw, 88px) auto 0;
  display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  padding: 26px 0 30px; border-top: 1px solid var(--hair);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--white-soft);
}
.footer-base a { transition: color .3s; }
.footer-base a:hover { color: var(--white); }
.site-footer a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

@media (max-width: 1180px) {
  .footer-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .8fr); } /* extra room so the email fits on one line */
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cta-actions { flex-direction: column; }
  .footer-wrap { grid-template-columns: 1fr 1fr; }
  .footer-base { flex-direction: column; letter-spacing: .1em; }
}
@media (max-width: 420px) {
  .footer-wrap { grid-template-columns: 1fr; }
}

/* ---------- Navigation: smooth scrolling, top bar, mobile menu ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The top bar sits outside the hero so it can stay fixed (and above the menu) on mobile.
   On larger screens it overlays the top of the hero exactly as before. */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.hero { padding-top: var(--bar-h, 91px); } /* same height the top bar took up when it was inside the hero */
.menu-toggle, .mobile-menu { display: none; }

@media (max-width: 640px) {
  .topbar {
    --bar-h: 64px;
    position: fixed; z-index: 70; height: var(--bar-h); padding: 0 var(--gutter);
    transition: transform .35s ease, background-color .35s ease, box-shadow .35s ease;
  }
  .hero { --bar-h: 64px; }
  .topbar.is-scrolled { background: rgba(13, 12, 11, .94); box-shadow: 0 1px 0 var(--hair); }
  .topbar.is-hidden { transform: translateY(-100%); }
  .topbar nav { display: none; }

  .menu-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
    color: var(--white); background: none; border: 1px solid transparent; transition: border-color .35s ease;
  }
  /* Border only once the bar has a background (scrolled); at the top the button sits bare on the hero */
  .topbar.is-scrolled .menu-toggle,
  .menu-toggle[aria-expanded="true"] { border-color: var(--white-faint); } /* "Close" always keeps its border */
  .menu-toggle:focus-visible, .mobile-menu a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

  .mobile-menu {
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    position: fixed; inset: 0; z-index: 60; overflow-y: auto;
    padding: calc(64px + 32px) var(--gutter) 36px;
    background: #0d0c0b; color: var(--white);
    visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .mobile-menu ul { list-style: none; border-top: 1px solid var(--hair); }
  .mobile-menu li a {
    display: block; padding: 18px 0; border-bottom: 1px solid var(--hair);
    font-family: var(--display); font-size: 32px; line-height: 1.2;
  }
  .mobile-menu__foot { display: flex; flex-direction: column; gap: 14px; }
  .mobile-menu__line { text-align: center; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--white-soft); }

  html.menu-open { overflow: hidden; }
  html.menu-open .mobile-menu { visibility: visible; opacity: 1; transition: opacity .3s ease; }
  html.menu-open .topbar { background: transparent; box-shadow: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .topbar, .mobile-menu { transition: none; }
}