/*!
 * ==============================================================================
 * Bodyworks Gym Featherstone — demonstration website
 *
 * Copyright (c) 2026 AutoGen Digital. All rights reserved.
 *
 * This stylesheet and the design system it defines are the property of
 * AutoGen Digital, supplied for evaluation purposes only. No part may be
 * copied, reused or adapted without prior written consent. Ownership is not
 * transferred by delivery, deployment or hosting.
 *
 * Unauthorised use constitutes copyright infringement.
 * ==============================================================================
 */
/* =========================================================
   Bodyworks Gym Featherstone — demo stylesheet
   Colour hierarchy (from design brief):
   60% black/charcoal · 25% grey · 10% blue-purple · 5% yellow
   ========================================================= */

:root {
  /* Black — the foundation */
  --black-0:   #0b0b0d;
  --black-1:   #111214;
  --black-2:   #16181b;

  /* Grey — the structure */
  --grey-0:    #1d2024;
  --grey-1:    #2a2d31;
  --grey-2:    #3a3e44;
  --grey-3:    #555b63;
  --grey-text: #a4abb4;

  /* Blue-purple — the atmosphere */
  --blue:      #4c5fff;
  --blue-soft: #5b6bff;
  --violet:    #6a5cff;
  --blue-deep: #4d72d9;

  /* Yellow — the branding accent, used sparingly */
  --gold:      #d4b11f;
  --gold-lit:  #e6c634;
  --gold-dim:  #c9a91d;

  --white:     #f5f3ee;

  --font-display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1200px;
  --wrap-narrow: 820px;
  --radius: 4px;
  --header-h: 78px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--black-0);
  color: var(--white);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 .5em;
}
/* Headings must never break inside a word — they wrap between words or not at all.
   Sizes below are set so the longest word ("FEATHERSTONE") still fits its column
   even if Archivo Black is blocked and the wider Arial Black fallback is used. */
h1, h2, h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.1rem + 3.9vw, 5rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.05rem, .98rem + .38vw, 1.3rem); letter-spacing: .01em; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 999;
  background: var(--gold); color: var(--black-0);
  padding: .7rem 1.1rem; font-weight: 700; border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }

.wrap { width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { max-width: var(--wrap-narrow); }

.hl { color: var(--gold); }

.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 1rem;
}
/* Little LED tick before every eyebrow — ties the gold label to the blue lighting. */
.eyebrow::before {
  content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  box-shadow: 0 0 10px 1px rgba(91,107,255,.75);
}

/* ---------- LED edge accents ----------
   The gym's blue is strip lighting on edges, so the site takes it the same way:
   hairlines and underglows, never large fills. */
.stats, .section--panel, .site-footer { position: relative; }
.stats::before,
.section--panel::before,
.guest::before,
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg,
    transparent, rgba(76,95,255,.55) 22%, rgba(106,92,255,.55) 78%, transparent);
  pointer-events: none;
}
/* Underglow spilling off the stats band, like light bouncing off the floor. */
.stats::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 80px; z-index: 0;
  background: radial-gradient(60% 100% at 50% 100%, rgba(76,95,255,.22), transparent 70%);
  pointer-events: none;
}
.stats > * { position: relative; z-index: 1; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: var(--grey-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700; font-size: .92rem;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.btn:hover { transform: translateY(-2px); }
.btn--gold   { --btn-bg: var(--gold); --btn-fg: var(--black-0); --btn-bd: var(--gold); }
.btn--gold:hover   { --btn-bg: var(--gold-lit); --btn-bd: var(--gold-lit); box-shadow: 0 10px 30px -10px rgba(212,177,31,.55); }
.btn--outline { --btn-bd: rgba(245,243,238,.28); }
.btn--outline:hover { --btn-bd: var(--blue-soft); box-shadow: 0 0 0 1px rgba(91,107,255,.35), 0 12px 34px -14px rgba(76,95,255,.9); }
.btn--ghost { --btn-bd: transparent; color: var(--grey-text); padding-inline: .9rem; }
.btn--ghost:hover { color: var(--white); }
.btn--sm { padding: .68rem 1.15rem; font-size: .8rem; }
.btn--block { display: flex; width: 100%; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,11,13,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(11,11,13,.94);
  border-bottom-color: rgba(91,107,255,.28);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { width: 46px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-size: 1.12rem;
  text-transform: uppercase; letter-spacing: .02em;
}
.brand__sub {
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin-top: .28rem;
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; align-items: center; gap: 1.75rem; }
.nav__list a {
  position: relative;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--grey-text);
  padding-block: .4rem;
  transition: color .2s var(--ease);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__list a:hover, .nav__list a.is-active { color: var(--white); }
.nav__list a:hover::after, .nav__list a.is-active::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--grey-2);
  border-radius: var(--radius); padding: .6rem .7rem; cursor: pointer;
}
.nav-toggle__bars { display: block; width: 22px; }
.nav-toggle__bars span {
  display: block; height: 2px; background: var(--white); border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(560px, 84vh, 880px);
  padding-block: 8rem 4.5rem;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  /* Light enough that the gym's own blue LED strips still read through the scrim. */
  filter: saturate(1.05) contrast(1.04) brightness(.8);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(11,11,13,.86) 0%, rgba(11,11,13,.2) 32%, rgba(11,11,13,.72) 76%, var(--black-0) 100%),
    linear-gradient(96deg, rgba(11,11,13,.88) 0%, rgba(11,11,13,.5) 48%, rgba(11,11,13,.1) 100%);
}
.hero__glow {
  position: absolute; z-index: -1; inset: auto 0 -30% 0; height: 70%;
  background:
    radial-gradient(60% 90% at 22% 100%, rgba(76,95,255,.52), transparent 70%),
    radial-gradient(50% 80% at 78% 100%, rgba(106,92,255,.36), transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 860px; }
.hero h1 { margin-bottom: .35em; text-shadow: 0 8px 40px rgba(0,0,0,.55); }
/* "Near Pontefract" is the highest-volume local term, so it belongs inside the H1 —
   set smaller so it reads as a strapline without weakening the main headline. */
.h1__sub {
  display: block;
  margin-top: .45rem;
  font-size: clamp(.8rem, .62rem + .55vw, 1.15rem);
  letter-spacing: .3em;
  color: var(--grey-text);
  text-shadow: none;
}
.hero__lede {
  font-size: clamp(1.02rem, .95rem + .5vw, 1.3rem);
  color: #d6dae1; max-width: 60ch; margin-bottom: 2.1rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; }
.hero__points {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin-top: 2.4rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--grey-text);
}
.hero__points li { display: flex; align-items: center; gap: .55rem; }
.hero__points li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-soft); box-shadow: 0 0 10px 2px rgba(91,107,255,.7);
}

/* =========================================================
   Stats
   ========================================================= */
.stats {
  background: linear-gradient(180deg, var(--black-0), var(--black-2));
  border-block: 1px solid rgba(255,255,255,.06);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.stats__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stat { position: relative; padding-left: 1.4rem; }
.stat::before {
  content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 2px;
  background: linear-gradient(180deg, var(--blue), transparent);
}
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.7rem + 3vw, 3.9rem);
  line-height: 1; color: var(--gold);
}
.stat__value .plus, .stat__value .pence { color: var(--grey-3); }
.stat__label {
  display: block; margin-top: .7rem;
  color: var(--grey-text); font-size: .92rem; max-width: 30ch;
}

/* =========================================================
   Generic section
   ========================================================= */
.section { padding-block: clamp(4rem, 8vw, 7.5rem); }
.section--panel {
  background: var(--black-2);
  border-block: 1px solid rgba(255,255,255,.05);
}
.section__head { max-width: 700px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__lede { color: var(--grey-text); font-size: 1.06rem; margin-bottom: 0; }

/* ---------- facilities ---------- */
/* Fixed 3-up so the six cards land as two even rows rather than 4 + 2 orphans. */
.facilities { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
.facility {
  position: relative;
  background: linear-gradient(160deg, var(--grey-1), var(--black-1));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.facility::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.facility:hover {
  transform: translateY(-4px);
  border-color: rgba(91,107,255,.4);
  box-shadow: 0 24px 50px -30px rgba(76,95,255,.9);
}
.facility:hover::after { transform: scaleX(1); }
.facility__icon {
  width: 44px; height: 44px; margin-bottom: 1.2rem;
  display: grid; place-items: center;
  border: 1px solid rgba(212,177,31,.35);
  border-radius: var(--radius);
  background: rgba(212,177,31,.07);
}
.facility__icon svg { width: 22px; height: 22px; fill: var(--gold); }
.facility h3 { margin-bottom: .55rem; }
.facility p { color: var(--grey-text); font-size: .95rem; margin: 0; }

/* ---------- gallery ---------- */
.gallery {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  /* The full-width tiles force a row break, which strands a lone tile whenever
     the regular count doesn't divide by the column count. Dense backfills those
     gaps so the grid stays solid at every breakpoint. */
  grid-auto-flow: dense;
}
.gallery__item {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid rgba(91,107,255,.16);
  border-radius: var(--radius);
  background: var(--black-1);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.gallery__item:hover {
  border-color: rgba(91,107,255,.55);
  box-shadow: 0 0 0 1px rgba(76,95,255,.22), 0 26px 60px -34px rgba(76,95,255,.85);
}
.gallery__item--wide { grid-column: 1 / -1; }
/* Three of these source photos have social-media text burned into the lower
   third. The 3:2 top crop keeps that out of frame so the figcaption is the
   only label on the image. */
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  aspect-ratio: 3 / 2;
  filter: brightness(.82) saturate(.9);
  transition: transform .6s var(--ease), filter .4s var(--ease);
}
.gallery__item--wide img { aspect-ratio: 21 / 8; object-position: center; }
/* Photos with no burned-in text don't need the top crop — centre them so the
   subject stays in frame rather than losing its lower third. */
.gallery__item--centred img { object-position: center; }
/* The supplement wall needs more height than the room panoramas — a 21:8 strip
   would cut the top and bottom shelves clean off. */
.gallery__item--shop img { aspect-ratio: 12 / 5; object-position: center; }
.gallery__item:hover img { transform: scale(1.045); filter: brightness(1) saturate(1); }
.gallery__item figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.6rem 1.25rem 1.15rem;
  background: linear-gradient(180deg, transparent, rgba(11,11,13,.94));
  font-size: .84rem; color: var(--grey-text);
}
.gallery__item figcaption span {
  display: block;
  font-family: var(--font-display); font-size: .95rem; text-transform: uppercase;
  color: var(--white); letter-spacing: .01em; margin-bottom: .15rem;
}
.gallery__note {
  margin: 1.75rem 0 0; color: var(--grey-3); font-size: .92rem; max-width: 70ch;
}

/* ---------- guest / social proof ---------- */
.guest {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--black-2), var(--black-0) 55%);
  border-top: 1px solid rgba(255,255,255,.05);
}
.guest__glow {
  position: absolute; z-index: -1; inset: -30% 0 auto 0; height: 120%;
  background:
    radial-gradient(40% 55% at 28% 45%, rgba(76,95,255,.34), transparent 70%),
    radial-gradient(35% 50% at 80% 60%, rgba(106,92,255,.2), transparent 72%);
  filter: blur(30px);
}
.guest__inner {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.guest__media { margin: 0; position: relative; }
.guest__media img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 22%;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
}
.guest__copy p { color: var(--grey-text); }
.guest__copy h2 { margin-bottom: .55em; }
.guest__sign {
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--grey-3);
  padding-top: 1.2rem; margin-bottom: 0;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* ---------- why choose ---------- */
.reasons {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  overflow: hidden;
}
.reason { background: var(--black-1); padding: 2.25rem 1.9rem; transition: background-color .3s var(--ease); }
.reason:hover { background: var(--grey-0); }
.reason__num {
  display: block;
  font-family: var(--font-display); font-size: 2.4rem; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(91,107,255,.75);
  margin-bottom: 1.1rem;
  transition: -webkit-text-stroke-color .3s var(--ease);
}
.reason:hover .reason__num { -webkit-text-stroke-color: var(--gold); }
.reason h3 { margin-bottom: .5rem; }
.reason p { color: var(--grey-text); font-size: .95rem; margin: 0; }

/* ---------- story ---------- */
.story {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  /* Media column is the narrower one — it holds a portrait photo, so an even
     split would leave it towering over the copy beside it. */
  grid-template-columns: 1.15fr .85fr; align-items: center;
}
.story__copy p { color: var(--grey-text); }
.story__copy h2 { margin-bottom: .6em; }
.story__sign {
  font-family: var(--font-display); text-transform: uppercase;
  color: var(--white); font-size: .95rem; letter-spacing: .04em;
}
.story__media { position: relative; }
/* Portrait ratio: this is the owners' photo, so it's cropped as close to native
   as possible — the gym sign above them and both faces have to stay in frame. */
.story__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  filter: brightness(.94);
}
.story__media::before {
  content: ""; position: absolute; inset: -12%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(76,95,255,.35), transparent 70%);
  filter: blur(30px); z-index: -1;
}
.story__badge {
  position: absolute; left: -1px; bottom: -1px;
  background: var(--gold); color: var(--black-0);
  padding: .9rem 1.4rem; border-radius: 0 var(--radius) 0 var(--radius);
  display: flex; flex-direction: column; line-height: 1.15;
}
.story__badge strong {
  font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase;
}
.story__badge span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }

/* ---------- pricing ---------- */
.plans {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.plan {
  position: relative;
  background: linear-gradient(170deg, var(--grey-1), var(--black-1));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 2.4rem 1.9rem 2rem;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.2); }
.plan--featured {
  border-color: rgba(212,177,31,.5);
  box-shadow: 0 0 0 1px rgba(212,177,31,.14), 0 30px 70px -40px rgba(212,177,31,.6);
}
.plan--featured::before {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius); z-index: -1;
  background: linear-gradient(180deg, rgba(212,177,31,.25), transparent 60%);
}
.plan__badge {
  position: absolute; top: -.75rem; left: 1.9rem;
  background: var(--gold); color: var(--black-0);
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 2px;
}
.plan__badge--alt { background: var(--blue); color: var(--white); }
.plan__name {
  font-size: 1rem; letter-spacing: .16em; color: var(--grey-text); margin-bottom: .9rem;
}
.plan__price { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1.6rem; }
.plan__amount {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.9rem + 1.8vw, 3.2rem); line-height: 1; color: var(--white);
}
.plan--featured .plan__amount { color: var(--gold); }
.plan__suffix { color: var(--grey-3); font-size: .9rem; }
.plan__features { margin-bottom: 1.9rem; display: grid; gap: .7rem; }
.plan__features li {
  display: flex; gap: .65rem; align-items: flex-start;
  color: var(--grey-text); font-size: .93rem; line-height: 1.45;
}
.plan__features li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: .48rem;
  border-radius: 50%; background: var(--blue-soft);
  box-shadow: 0 0 8px 1px rgba(91,107,255,.6);
}
.plans__note { margin: 2rem 0 0; color: var(--grey-3); font-size: .95rem; }
.plans__note a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- faq ---------- */
.faq { display: grid; gap: .6rem; }
.faq__item {
  background: var(--black-1);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.faq__item[open] { border-color: rgba(91,107,255,.4); background: var(--grey-0); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.4rem; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq__item summary:hover { color: var(--gold-lit); }
.faq__body { padding: 0 1.4rem 1.3rem; }
.faq__body p { color: var(--grey-text); margin: 0; font-size: .96rem; }
.faq__body a { color: var(--gold); }

/* ---------- visit ---------- */
.visit {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
}
.visit__cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.visit__cards .info-card:last-child { grid-column: 1 / -1; }
.info-card {
  background: linear-gradient(165deg, var(--grey-1), var(--black-1));
  border: 1px solid rgba(255,255,255,.08);
  border-top-color: rgba(91,107,255,.4);
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
}
.info-card h3 { font-size: .95rem; letter-spacing: .14em; color: var(--gold); margin-bottom: 1rem; }
.info-card address { font-style: normal; color: var(--grey-text); line-height: 1.75; margin-bottom: 1.3rem; }
.info-card address strong { color: var(--white); }
.info-card__lead { color: var(--grey-text); font-size: .93rem; }
.info-card__hint {
  color: var(--grey-3); font-size: .86rem; line-height: 1.5;
  padding-left: .8rem; margin-bottom: 1.3rem;
  border-left: 2px solid var(--gold);
}
.hours { width: 100%; border-collapse: collapse; font-size: .93rem; }
.hours th, .hours td { padding: .45rem 0; text-align: left; font-weight: 400; }
.hours th { color: var(--grey-3); font-weight: 600; }
.hours td { text-align: right; color: var(--white); font-variant-numeric: tabular-nums; }
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid rgba(255,255,255,.06); }

.socials { display: flex; gap: .6rem; margin-top: 1.1rem; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--grey-2); border-radius: var(--radius);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.socials svg { width: 18px; height: 18px; fill: var(--grey-text); transition: fill .25s var(--ease); }
.socials a:hover { border-color: var(--blue-soft); background: rgba(76,95,255,.12); transform: translateY(-2px); }
.socials a:hover svg { fill: var(--white); }

.visit__map {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 380px;
}
.visit__map iframe {
  width: 100%; height: 100%; min-height: 380px; border: 0;
  filter: grayscale(1) invert(.92) contrast(.85) hue-rotate(185deg);
}

/* ---------- final CTA band ---------- */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--black-2);
  border-top: 1px solid rgba(255,255,255,.06);
  padding-block: clamp(4rem, 8vw, 6.5rem);
  text-align: center;
}
.cta-band__glow {
  position: absolute; inset: -50% 0 auto 0; height: 150%; z-index: -1;
  background: radial-gradient(45% 55% at 50% 65%, rgba(76,95,255,.4), transparent 70%);
  filter: blur(25px);
}
.cta-band h2 { margin-bottom: .4em; }
.cta-band p { color: var(--grey-text); max-width: 52ch; margin-inline: auto; margin-bottom: 2rem; }
.cta-band__buttons { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--black-0); border-top: 1px solid rgba(255,255,255,.07); }
.site-footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.site-footer__brand img { width: 96px; margin-bottom: 1.1rem; }
.site-footer__brand p { color: var(--grey-3); font-size: .93rem; max-width: 32ch; }
.site-footer__col h3 { font-size: .82rem; letter-spacing: .18em; color: var(--gold); margin-bottom: 1.1rem; }
.site-footer__col ul { display: grid; gap: .55rem; }
.site-footer__col a { color: var(--grey-text); text-decoration: none; font-size: .93rem; transition: color .2s var(--ease); }
.site-footer__col a:hover { color: var(--white); }
.site-footer__col address, .site-footer__col p { font-style: normal; color: var(--grey-text); font-size: .93rem; line-height: 1.75; }
.site-footer__hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  color: var(--white); font-size: .9rem;
}
.site-footer__hours span { color: var(--grey-3); }
.site-footer__base {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
  color: var(--grey-3); font-size: .82rem;
}
.site-footer__base p { margin: 0; }
.site-footer__areas { color: var(--grey-2); }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal { opacity: 0; transform: translateY(22px); }
.js .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .facilities { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .visit { grid-template-columns: 1fr; }
  .visit__map { min-height: 320px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(11,11,13,.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(91,107,255,.3);
    padding: 1rem 1.3rem 1.6rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    display: block; padding: .95rem .2rem; font-size: .95rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .nav__list a::after { display: none; }
  .nav__actions { flex-direction: column; align-items: stretch; margin-top: 1.1rem; gap: .6rem; }
  .nav__actions .btn { width: 100%; }
  .story { grid-template-columns: 1fr; }
  .story__media { order: -1; }
  .guest__inner { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero { min-height: 0; padding-block: 5.5rem 3.5rem; }
  .facilities { grid-template-columns: 1fr; }
  .visit__cards { grid-template-columns: 1fr; }
  .hero__media img { object-position: center 45%; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__item--wide img { aspect-ratio: 3 / 2; }
  .hero__points { gap: .8rem 1.4rem; font-size: .74rem; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero__cta, .cta-band__buttons { flex-direction: column; }
  .nav__actions .btn--ghost { display: none; }
}

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

@media print {
  .site-header, .visit__map, .cta-band, .hero__glow { display: none; }
  body { background: #fff; color: #000; }
}