/* =============================================================================
   PILATES HUNTER — BSD BRANCH STYLES
   -----------------------------------------------------------------------------
   Everything the Kemang build does not have: the hero badge and free-trial
   line, the #facilities cards, and the #schedule filter panel.

   Kept in its own file so the shared stylesheets stay shared. css/styles.css is
   the design system every branch runs; this file is what BSD adds on top of it,
   and a future branch can drop it without unpicking anything. It therefore uses
   ONLY the tokens defined in css/styles.css :root — no new colours are invented
   here, so the sage palette stays defined in exactly one place.
   ========================================================================== */

/* 1. ------------------------------------------------------- HERO ADDITIONS */

/* The badge sits above the eyebrow and is the branch's first signal. It is a
   frosted pill rather than a solid one: the hero is a photograph, and a solid
   fill would read as a UI chip pasted onto it. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  /* Progressive: unsupported browsers just get the flat translucent fill. */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* The hero photo behind this is busy; without a shadow the pill's own text
     loses its edges over the lighter patches. */
  text-shadow: 0 1px 3px rgba(12, 9, 7, 0.45);
}

.hero__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 122, 94, 0.35);
  flex: none;
}

.hero__trial { margin: 1.35rem 0 0; }

/* Deliberately NOT a third button. Two solid CTAs plus a free-trial button
   would give the hero three competing primary actions; this reads as a quiet
   offer under them and keeps "Book a class" the obvious one. */
.hero__trial-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
  text-shadow: 0 1px 3px rgba(12, 9, 7, 0.45);
}

.hero__trial-link:hover,
.hero__trial-link:focus-visible { border-bottom-color: #fff; opacity: 0.92; }

.hero__trial-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: none;
}

.hero__trial-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 2. ----------------------------------------------------------- FACILITIES */

.facilities__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.25rem, 0.6rem + 2vw, 2rem);
  margin-top: clamp(2rem, 1rem + 3vw, 3.25rem);
}

.facility {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.15rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.facility:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.facility__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--accent-soft);
  margin-bottom: 1.1rem;
}

.facility__icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  /* --accent-deep, not --accent: on the pale sage badge the mid green only
     reaches 4.11:1, while the deep one clears AA at 6.28:1. */
  stroke: var(--accent-deep);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.facility__title {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.55rem;
  color: var(--ink);
}

.facility__text {
  color: var(--ink-soft);
  font-size: 0.99rem;
  line-height: 1.65;
}

/* 3. ------------------------------------------------------------- SCHEDULE */

.schedule__panel { margin-top: clamp(2rem, 1rem + 3vw, 3rem); }

.schedule__filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.schedule__filter-label {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 0.6rem;
}

.schedule__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.schedule__chip {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease);
}

.schedule__chip:hover { border-color: var(--accent); color: var(--accent-deep); }

/* The chips are toggle buttons, so selection lives on aria-pressed and the
   style follows it. Styling a separate .is-active class instead would let the
   two drift, and a screen reader would be told the wrong thing. */
.schedule__chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.schedule__count {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 1.35rem 0 0.5rem;
}

.schedule__count.is-empty { color: var(--accent-deep); font-weight: 600; }

.schedule__list { list-style: none; margin: 0; padding: 0; }

/* `display: grid` below is an author-level rule and therefore BEATS the user-
   agent [hidden] { display: none }, so a filtered-out row set to hidden by
   js/branch-features.js would stay on screen while the count above it claimed
   it was gone. This has to come first and be explicit. */
.schedule__row[hidden] { display: none; }

.schedule__row {
  display: grid;
  grid-template-columns: minmax(140px, 0.5fr) 1fr auto;
  align-items: center;
  gap: 1rem clamp(1rem, 0.5rem + 1.5vw, 2rem);
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}

.schedule__time {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.schedule__class {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--ink);
}

.schedule__meta {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.schedule__cta { white-space: nowrap; }

/* The state while no timetable is published — see js/branch-features.js. */
.schedule__pending {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  box-shadow: var(--shadow-sm);
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}

.schedule__pending-text {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* 4. ----------------------------------------------------------- RESPONSIVE */

@media (max-width: 720px) {
  /* The three-column row collapses to time + class stacked, with the button
     full width underneath — a "Book this slot" button squeezed into a third
     column at 360px wraps to three lines. */
  .schedule__row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1.35rem 0;
  }
  .schedule__cta { justify-self: start; }
  .hero__badge { font-size: 0.8rem; padding: 0.45rem 0.9rem 0.45rem 0.75rem; }
}

/* 5. -------------------------------------------------------- REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .facility { transition: none; }
  .facility:hover { transform: none; }
}

/* 6. ------------------------------------------------- MERCHANT IDENTITY
   The #terms clause styles live in css/legal.css, shared with terms.html. */

/* Agreement line above the checkout CTA (index.html, step 7). */
.booking__agree { margin-top: 1.1rem; }
.booking__agree a { color: var(--accent-deep); border-bottom: 1px solid currentColor; }

/* --- footer merchant identity ------------------------------------------- */

.site-footer__merchant {
  padding-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  padding: 0.45rem 1rem 0.45rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-footer__badge a { color: #fff; text-underline-offset: 3px; }

.site-footer__badge-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
}

.site-footer__badge-mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer__legal-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.5rem clamp(1.5rem, 1rem + 2vw, 3rem);
  margin: 0;
}

.site-footer__legal-details dt {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* The footer ground is dark, so these use white at reduced opacity rather
     than --mist, which is tuned for the light sections. */
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.4rem;
}

.site-footer__legal-details dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.94rem;
  line-height: 1.6;
  /* An account number must stay selectable and unambiguous — no ligatures or
     proportional digits running the figures together. */
  font-variant-numeric: tabular-nums;
}

.site-footer__legal-details a { color: #fff; }

/* 7. -------------------------------------------------- FLOATING WHATSAPP CTA */

/* Collapsed to a circle by default and expanding to a pill on hover/focus: a
   permanently-expanded bar covers page content on small screens, which is the
   usual reason these get dismissed rather than used. */
.wa-float {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(35, 42, 37, 0.28);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease), padding 0.25s var(--ease);
}

.wa-float:hover,
.wa-float:focus-visible {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(35, 42, 37, 0.34);
  padding-right: 1.25rem;
}

.wa-float__icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: none;
}

.wa-float__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The label is present for assistive tech at all times — it is clipped to zero
   width, not display:none — and unfurls on hover or keyboard focus. That way
   the control always has an accessible name without needing aria-label to
   duplicate (and drift from) the visible text. */
.wa-float__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.3s var(--ease), opacity 0.25s var(--ease);
}

.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label {
  max-width: 14rem;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .wa-float,
  .wa-float__label { transition: none; }
  .wa-float:hover,
  .wa-float:focus-visible { transform: none; }
}

/* Coarse pointers never fire hover, so the label never unfurls there — and it
   should not. Expanding it into a wide pill on a 390px screen parked it over
   the bottom-right of the page, where it covered the last chip of the tier row
   in the price calculator. It stays a circle on touch.

   The control is still named for assistive tech: .wa-float__label is clipped
   with max-width/overflow, NOT display:none, so it remains in the
   accessibility tree and supplies the link's accessible name at every width.
   That is why there is no aria-label here to drift from the visible text. */
@media (hover: none) {
  .wa-float:hover { padding-right: 0.85rem; }
  .wa-float:hover .wa-float__label { max-width: 0; opacity: 0; }
}

/* 8. ------------------------------------------------------ PRICE CALCULATOR */

/* "Architectural light": the panel is defined by a single hairline and a lot of
   air, not by a filled card. The summary is the only filled surface, because it
   is the one thing the eye should land on. */
.calculator {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(2rem, 1rem + 3vw, 3.25rem);
}

.calculator__head { max-width: 46rem; }

.calculator__title {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0.35rem 0 0.75rem;
}

.calculator__lead {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  line-height: 1.65;
}

/* Asymmetric by design: the controls get the wider column because they carry
   three groups of chips, the summary is a fixed-width slip. */
.calculator__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  align-items: start;
}

.calc__group + .calc__group { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }

.calc__label {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 0.75rem;
}

.calc__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.calc__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  font-family: var(--sans);
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.05rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease);
}

.calc__chip-name { font-size: 0.97rem; font-weight: 600; }

.calc__chip-meta {
  font-size: 0.79rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.calc__chip:hover { border-color: var(--accent); }

.calc__chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Inside a selected chip the meta line must lift off the accent, not stay at
   --ink-soft, which would drop under 3:1 on that ground. */
.calc__chip[aria-pressed="true"] .calc__chip-meta { color: rgba(255, 255, 255, 0.82); }

/* --- summary slip -------------------------------------------------------- */

.calc__box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  box-shadow: var(--shadow-sm);
  position: sticky;
  /* Clears the sticky site header so the total stays readable while the
     visitor is still changing chips further up the column. */
  top: 6rem;
}

.calc__box-title {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-family: var(--sans);
  font-size: 0.94rem;
}

.calc__row-label { color: var(--ink-soft); }

.calc__row-value {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.calc__divider {
  height: 1px;
  background: var(--line);
  margin: 0.85rem 0;
}

.calc__row--total { padding-top: 0.35rem; }

.calc__row--total .calc__row-label {
  color: var(--ink);
  font-weight: 600;
}

.calc__row--total .calc__row-value {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--accent-deep);
  letter-spacing: -0.01em;
}

.calc__note {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--accent-deep);
  font-weight: 600;
}

.calc__cta { margin-top: 1.25rem; }

.calc__fineprint {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--mist);
}

@media (max-width: 900px) {
  .calculator__body { grid-template-columns: 1fr; }
  /* Sticky inside a single column would pin the slip over the chips the
     visitor is trying to press. */
  .calc__box { position: static; }
}

/* 9. ------------------------------------------------- HERO — SPLIT / LIGHT
   branch: overrides css/styles.css §7, which builds Kemang's full-bleed
   photographic hero (white type over a dark scrim). BSD inverts it: a light
   ground, an asymmetric two-column grid, and the photograph held inside an
   arched frame instead of filling the viewport.

   Everything here is scoped to .hero--split so the shared stylesheet is left
   intact and a branch that wants Kemang's hero simply drops the class. */

.hero--split {
  min-height: 0;
  display: block;
  color: var(--ink);
  background: var(--cream);
  /* Kemang's hero tucks under the transparent header by a negative margin and
     then pads itself clear. The split hero keeps the tuck (the header is still
     transparent over it) but needs far less bottom padding, because the arch
     already carries the eye down into the next section. */
  padding-block: clamp(8rem, 15vw, 11rem) clamp(3rem, 7vw, 5.5rem);
  overflow: visible;
}

/* The dark-hero fade into white below is wrong on a cream ground: it would
   paint a white band over the section's own colour. */
.hero--split::after { display: none; }

.hero--split .hero__inner {
  display: grid;
  /* Asymmetric on purpose — the copy column is wider than the image column, so
     the composition reads as editorial rather than as a 50/50 marketing split. */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

/* The shared rules cap these at 40rem for a full-bleed hero. In a column
   that is already narrow, the cap fights the grid. */
.hero--split .hero__eyebrow,
.hero--split .hero__title,
.hero--split .hero__lead,
.hero--split .hero__cta { max-width: none; }

.hero--split .hero__eyebrow { color: var(--ink-soft); margin-bottom: 1.1rem; }
.hero--split .hero__eyebrow .dot { color: var(--accent); }

.hero--split .hero__title {
  /* On a light ground the drop shadow that keeps type legible over a
     photograph reads as a smudge. */
  text-shadow: none;
  color: var(--ink);
  font-weight: 500;
}

.hero--split .hero__lead { color: var(--ink-soft); max-width: 32rem; }

/* --- badge and trial link, re-tuned for the light ground ----------------- */

.hero--split .hero__badge {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
  /* Frosting and a text shadow exist to survive a photograph. Neither is
     needed here, and both muddy the type on a flat ground. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
}

.hero--split .hero__trial-link {
  color: var(--accent-deep);
  border-bottom-color: rgba(79, 122, 94, 0.4);
  text-shadow: none;
}

.hero--split .hero__trial-link:hover,
.hero--split .hero__trial-link:focus-visible { border-bottom-color: var(--accent-deep); }

/* --- the arched figure --------------------------------------------------- */

.hero__figure {
  position: relative;
  margin: 0;
}

.hero__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  /* The arch. A full semicircle top (50% 50% / 32% 32%) plus a small square-ish
     foot — the shape a studio window makes, and the reason this photograph does
     not read as the same asset Kemang uses even though it is. */
  border-radius: 50% 50% var(--radius) var(--radius) / 32% 32% var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
}

/* A single hairline dropped behind the arch and offset — the "architectural"
   detail. Purely decorative, hidden from assistive tech in the markup. */
.hero__figure-rule {
  position: absolute;
  z-index: -1;
  left: clamp(-2.5rem, -1rem - 2vw, -1rem);
  right: clamp(2rem, 1rem + 2vw, 3.5rem);
  top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border: 1px solid var(--accent);
  opacity: 0.35;
  border-radius: 50% 50% var(--radius) var(--radius) / 32% 32% var(--radius) var(--radius);
}

@media (max-width: 860px) {
  .hero--split .hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 1rem + 4vw, 3rem);
  }
  /* Copy first on a phone: the photograph is atmosphere, the words are why
     someone stays. */
  .hero__figure { order: 2; }
  .hero--split .hero__copy { order: 1; }
  .hero__img { aspect-ratio: 4 / 3.4; }
  .hero__figure-rule { display: none; }
}

/* 10. ------------------------------------------- HEADER OVER A LIGHT HERO
   branch: css/styles.css builds the header for Kemang's dark photographic
   hero — white wordmark, white nav links, and a dark gradient behind them —
   and only switches to the solid light treatment once .is-scrolled is set.

   BSD's hero is a light ground, so that starting state renders white type on
   near-white and the navigation is effectively invisible until you scroll.
   The fix is to adopt the solid treatment from the top of the page instead of
   at the first scroll. These mirror the .is-scrolled declarations rather than
   re-inventing them, so the header still looks identical once scrolled and
   there is no transition flash at scrollY 0 -> 1.

   Scoped to :root[data-branch="bsd"] so the shared stylesheet keeps working
   unchanged for a branch that still runs the photographic hero. */

:root[data-branch="bsd"] .site-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

/* The dark scrim exists to lift white type off a photograph. There is no
   white type and no photograph here. */
:root[data-branch="bsd"] .site-header::before { display: none; }

/* Only the scrolled state gets the shadow, so the header still visibly
   "lifts" off the page on scroll rather than looking identical throughout. */
:root[data-branch="bsd"] .site-header.is-scrolled {
  box-shadow: 0 2px 30px rgba(35, 42, 37, 0.07);
}

:root[data-branch="bsd"] .wordmark__logo--white { display: none; }
:root[data-branch="bsd"] .wordmark__logo--color { display: block; }
:root[data-branch="bsd"] .site-header .wordmark { color: var(--logo); }
:root[data-branch="bsd"] .site-header .nav a { color: var(--ink-soft); }
:root[data-branch="bsd"] .site-header .nav a:hover,
:root[data-branch="bsd"] .site-header .nav a:focus-visible { color: var(--accent); }
:root[data-branch="bsd"] .site-header .nav-toggle { color: var(--ink); }

/* 11. --------------------------------------------- BSD SANCTUARY EXPERIENCE */

.sanctuary__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 5vw, 5.5rem);
  align-items: center;
}

.sanctuary__copy .lead { margin-top: 1.1rem; }
.sanctuary__copy > p:last-of-type { margin-top: 1.1rem; color: var(--ink-soft); line-height: 1.75; }

/* Three plain marks rather than icon cards: this section already carries two
   photographs, and a third visual system would crowd it. */
.sanctuary__marks {
  list-style: none;
  margin: clamp(1.75rem, 1rem + 2vw, 2.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.sanctuary__marks li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.sanctuary__mark-num {
  flex: none;
  min-width: 4.25rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: 0.01em;
}

/* --- the offset photo pair ----------------------------------------------- */

.sanctuary__figures {
  position: relative;
  /* Reserves the room the inset image takes when it hangs below the lead one,
     so the following content is never overlapped. */
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.sanctuary__figure { margin: 0; }

.sanctuary__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Focal points, not the blind 50% 50% default — a browser-suite assertion
   fails any cover-cropped photo left centred, because these arches discard a
   lot of the source and a centred crop pushes faces out of frame. Both values
   are the ones already MEASURED for these two files elsewhere in this repo
   (css/styles.css §11 gallery, and imageFocal in js/data.js), reused rather
   than guessed so the same photo is framed the same way across the site. */
.sanctuary__figure--lead img { object-position: 45% 55%; }
.sanctuary__figure--inset img { object-position: 33% 45%; }

/* The lead image repeats the hero's arch, at a shallower rise so the two read
   as the same language rather than the same shape twice. */
.sanctuary__figure--lead img {
  aspect-ratio: 4 / 4.6;
  border-radius: 50% 50% var(--radius) var(--radius) / 24% 24% var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
}

/* Overlapped and offset — the asymmetry the flat grid on every other section
   deliberately avoids. */
.sanctuary__figure--inset {
  position: absolute;
  right: clamp(-1rem, -0.5rem - 1vw, 0rem);
  bottom: 0;
  width: clamp(150px, 42%, 230px);
}

.sanctuary__figure--inset img {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 6px solid var(--paper);
  box-shadow: var(--shadow-md);
}

.sanctuary__rule {
  position: absolute;
  z-index: -1;
  left: clamp(-2rem, -1rem - 1.5vw, -0.75rem);
  right: 30%;
  top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  bottom: clamp(4rem, 3rem + 4vw, 6.5rem);
  border: 1px solid var(--accent);
  opacity: 0.3;
  border-radius: 50% 50% var(--radius) var(--radius) / 24% 24% var(--radius) var(--radius);
}

/* --- facility cards (only when confirmed — see js/branch-features.js) ----- */

.sanctuary__facilities {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-top: clamp(2rem, 1rem + 3vw, 3rem);
  border-top: 1px solid var(--line);
}

.sanctuary__facilities-label { margin-bottom: 0; }

.sanctuary__facilities .facilities__grid { margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem); }

@media (max-width: 900px) {
  .sanctuary__grid { grid-template-columns: 1fr; }
  .sanctuary__figures { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }
  .sanctuary__figure--inset { width: clamp(130px, 38%, 190px); right: 0; }
  .sanctuary__rule { display: none; }
}

/* 12. ------------------------------------------------------- ACCESS GUIDE */

.access {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  padding-top: clamp(1.5rem, 1rem + 2vw, 2rem);
  border-top: 1px solid var(--line);
}

.access__label { margin-bottom: 1.25rem; }

.access__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
}

.access__item { display: flex; gap: 0.85rem; align-items: flex-start; }

.access__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--accent-soft);
}

.access__icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--accent-deep);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.access__icon svg .fill { fill: var(--accent-deep); stroke: none; }

.access__title {
  font-family: var(--sans);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.access__text {
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.6;
}