/* ==========================================================================
   C&A Tanning & Beauty
   Design system — white / gold / black
   Gold values sampled from the client's own logo and shopfront fascia.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Gold ramp. 300–500 come straight off the logo gradient. 600/700 are
     darkened so text and icons actually pass contrast on white. */
  --gold-50:  #FBF7EE;
  --gold-100: #F5EDDC;
  --gold-200: #EDE0C4;
  --gold-300: #E0D0B0;  /* logo — pale champagne */
  --gold-400: #D0C090;  /* logo — mid */
  --gold-500: #C0A080;  /* logo — deep */
  --gold-600: #A98842;
  --gold-700: #8A6D2C;  /* 4.9:1 on white — safe for body text */

  --ink:        #0D0D0D;
  --ink-soft:   #1A1A1A;
  --ink-line:   #262626;

  --text:       #4A4A4A;
  --text-strong:#111111;
  --text-mute:  #767676;  /* 4.6:1 on white */
  --text-on-dark:      #FFFFFF;
  --text-on-dark-mute: #A8A8A8;

  --white: #FFFFFF;
  --cream: #FAF7F0;
  --card:  #F7F3E9;

  --rule: rgba(13, 13, 13, .10);
  --rule-gold: rgba(138, 109, 44, .28);

  /* Type */
  --font-display: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-eyebrow: "Poppins", system-ui, sans-serif;

  /* Fluid type scale */
  --fs-hero:    clamp(2.75rem, 1.6rem + 5.1vw, 5.75rem);
  --fs-section: clamp(2rem, 1.35rem + 2.9vw, 3.25rem);
  --fs-h3:      clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;

  /* Rhythm */
  --container: 1240px;
  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --header-h: 76px;
  /* Was 8.5rem at the top end, which left the page reading as half-empty while
     images are still placeholders. */
  --section-y: clamp(3.25rem, 2.25rem + 3.4vw, 5.5rem);

  /* Shape */
  --r-card: 16px;
  --r-input: 8px;
  --r-pill: 1000px;
  --r-arch: 200px 200px 0 0;

  /* Motion — one curve for the whole site, as per the reference */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur:  .6s;
  --dur-fast: .42s;
}

/* --- Reset -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

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

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

.skip-link {
  position: absolute; top: 0; left: 50%; z-index: 200;
  transform: translate(-50%, -110%);
  padding: .75rem 1.25rem;
  background: var(--ink); color: var(--white);
  border-radius: 0 0 8px 8px;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Layout ------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--cream { background: var(--cream); }
.section--dark  { background: var(--ink); color: var(--text-on-dark-mute); }
.section--dark h2, .section--dark h3 { color: var(--text-on-dark); }

.section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(1.75rem, 2.5vw, 2.75rem); }
.section-head--left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-eyebrow);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 1rem;
}
.eyebrow::before { content: "◆"; font-size: .7em; }
.section--dark .eyebrow { color: var(--gold-400); }

.section-title { font-size: var(--fs-section); }
.section-sub { margin-top: 1rem; color: var(--text-mute); font-size: 1.0625rem; }
.section--dark .section-sub { color: var(--text-on-dark-mute); }

/* Faint oversized botanical watermark behind a section */
.section__watermark {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  opacity: .04;
  pointer-events: none;
  z-index: 0;
}
.section > .container { position: relative; z-index: 1; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  --btn-bg: var(--gold-300);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; gap: .875rem;
  padding: 1rem 1.75rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-eyebrow);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  /* No will-change here. It was promoting every button on the page to its own
     compositor layer permanently, which held the page at ~30fps while idle.
     will-change is a hint for imminent change, not a blanket optimisation. */
}
.btn:hover { transform: translateY(-2px); }

.btn--gold  { background: linear-gradient(105deg, var(--gold-300), var(--gold-400)); }
.btn--gold:hover { background: linear-gradient(105deg, var(--gold-400), var(--gold-500)); }
.btn--dark  { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--dark:hover { --btn-bg: var(--ink-soft); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text-strong);
  box-shadow: inset 0 0 0 1px var(--rule-gold);
}
.btn--ghost:hover { --btn-bg: var(--gold-50); }

/* Label roll-up: two stacked copies, both slide on hover. */
.btn__label { position: relative; display: block; overflow: hidden; height: 1.2em; }
.btn__label span { display: block; transition: transform var(--dur-fast) var(--ease); }
.btn__label span + span { position: absolute; inset: 100% auto auto 0; }
.btn:hover .btn__label span { transform: translateY(-100%); }

/* Twin arrows: one leaves right, one enters from the left. */
.btn__arrow { position: relative; width: 20px; height: 20px; overflow: hidden; flex: none; }
.btn__arrow svg { position: absolute; inset: 0; width: 20px; height: 20px; transition: transform var(--dur-fast) var(--ease); }
.btn__arrow svg:last-child { transform: translateX(-160%); }
.btn:hover .btn__arrow svg:first-child { transform: translateX(160%); }
.btn:hover .btn__arrow svg:last-child  { transform: translateX(0); }

/* --- Motion: reveal on scroll ------------------------------------------- */

/* Blur was 8–10px over 600ms with a 90ms stagger. Mid-scroll that left whole
   sections smeared and reading as broken, so it is lighter and quicker now. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition: opacity .5s var(--ease),
              transform .5s var(--ease),
              filter .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-in { opacity: 1; transform: none; filter: blur(0); }

/* Per-word heading reveal */
.reveal-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.32em);
  filter: blur(5px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease);
  transition-delay: calc(var(--w, 0) * 26ms);
}
.reveal-words.is-in .word { opacity: 1; transform: none; filter: blur(0); }

/* Arched / framed media wipes open from the bottom as it enters. */
.reveal-media { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease); }
.reveal-media.is-in { clip-path: inset(0 0 0 0); }
.reveal-media img { transform: scale(1.12); transition: transform 1.2s var(--ease); }
.reveal-media.is-in img { transform: scale(1); }

/* Elements given a parallax drift by JS */
.parallax { will-change: transform; }

/* --- Lenis smooth scroll ------------------------------------------------ */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Marquee ------------------------------------------------------------ */

.marquee {
  overflow: hidden;
  background: var(--ink);
  padding-block: 1.15rem;
  border-block: 1px solid rgba(255,255,255,.06);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marqueeScroll 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center; gap: 2.5rem;
  padding-right: 2.5rem; flex: none;
}
.marquee__item {
  display: inline-flex; align-items: center; gap: 2.5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, .95rem + .9vw, 1.85rem);
  letter-spacing: -.01em; white-space: nowrap;
  color: var(--white);
}
.marquee__item::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-500); flex: none;
}
.marquee__item:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-500);
}
@keyframes marqueeScroll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .reveal, .reveal-words .word {
    opacity: 1 !important; transform: none !important;
    filter: none !important; transition: none !important;
  }
  .reveal-media { clip-path: none !important; }
  .reveal-media img { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- Header ------------------------------------------------------------- */

.utility {
  background: linear-gradient(100deg, var(--gold-300), var(--gold-400));
  color: var(--ink);
  font-size: .8125rem;
}
.utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 44px; padding-block: .4rem;
}
.utility__list { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.utility__item { display: inline-flex; align-items: center; gap: .5rem; }
.utility__item svg { width: 15px; height: 15px; flex: none; }
.utility a:hover { text-decoration: underline; }

.utility__right { display: flex; align-items: center; gap: 1.25rem; }
/* The number is the main call to action on a salon site, so it gets weight. */
.utility__phone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .9375rem;
  letter-spacing: .01em;
}
.utility__phone svg { width: 16px; height: 16px; flex: none; }

@media (max-width: 720px) {
  .utility__inner { justify-content: space-between; gap: .75rem; }
  .utility__item--hours { display: none; }
  .utility__list { gap: 1rem; font-size: .75rem; }
}
@media (max-width: 460px) {
  .utility__list { display: none; }
  .utility__inner { justify-content: center; }
}

.utility__socials { display: flex; gap: .875rem; }
.utility__socials a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; transition: background var(--dur-fast) var(--ease); }
.utility__socials a:hover { background: rgba(13,13,13,.12); }
.utility__socials svg { width: 15px; height: 15px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  transition: box-shadow var(--dur-fast) var(--ease);
  /* No backdrop-filter here on purpose: it would make this a containing block
     for the fixed mobile drawer, and it would disqualify the header from
     iOS 26 status-bar colour sampling. Keep it opaque. */
}
/* Three columns so the centre one reserves clear space for the logo tab —
   otherwise the right-hand links slide underneath it. */
.nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}
.nav__links--left { grid-column: 1; }
/* The notch is absolutely positioned and so occupies no cell — without an
   explicit column this lands in the middle one, under the logo. */
.nav__right {
  grid-column: 3;
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* Centred logo tab, hanging BELOW the bar.
   It used to rise above the bar into the utility strip — which looked fine at
   the top of the page and then had its top third clipped away the moment the
   header stuck, because the strip scrolls off. Hanging downwards is never
   clipped. */
.nav__notch {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: grid; place-items: center;
  width: 168px; height: calc(100% + 26px);
  padding-top: .25rem;
  background: var(--ink);
  border-radius: 0 0 34px 34px;
}
/* Concave fillets blending the tab back into the underside of the bar */
.nav__notch::before,
.nav__notch::after {
  content: ""; position: absolute; top: 0; width: 20px; height: 20px;
}
.nav__notch::before {
  left: -20px;
  background: radial-gradient(circle at 0 100%, transparent 20px, var(--ink) 20.5px);
}
.nav__notch::after {
  right: -20px;
  background: radial-gradient(circle at 100% 100%, transparent 20px, var(--ink) 20.5px);
}
.nav__logo img { width: 72px; height: auto; transition: width var(--dur-fast) var(--ease); }

/* Condense once the page has scrolled, so the header stops eating the screen. */
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.8); }
.site-header.is-scrolled .nav { min-height: 64px; }
.site-header.is-scrolled .nav__notch { width: 132px; border-radius: 0 0 26px 26px; }
.site-header.is-scrolled .nav__logo img { width: 56px; }
.nav__notch { transition: width var(--dur-fast) var(--ease); }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav__link {
  font-family: var(--font-eyebrow);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--white);
  position: relative; padding-block: .35rem;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold-400);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--gold-300); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.nav__cta { display: none; }
@media (min-width: 1100px) { .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--white);
}
.nav__toggle svg { width: 20px; height: 20px; }
@media (min-width: 1100px) { .nav__toggle { display: none; } }

@media (max-width: 1099px) {
  .nav__links { display: none; }
  .nav { grid-template-columns: 1fr 128px 1fr; }
  .nav__notch { width: 128px; border-radius: 0 0 24px 24px; }
  .nav__logo img { width: 58px; }
}

/* --- Mobile drawer ------------------------------------------------------ */

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(13, 13, 13, .5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 120;
  width: min(360px, 88vw);
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.5rem;
  background: var(--white);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.drawer__head img { width: 88px; }
.drawer__close { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cream); }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__link {
  display: block; padding: .9rem .25rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
  color: var(--text-strong);
  border-bottom: 1px solid var(--rule);
}
.drawer__link[aria-current="page"] { color: var(--gold-700); }
.drawer .btn { margin-top: 1.25rem; justify-content: center; }

/* --- Hero --------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; background: var(--gold-50); }
.hero__slides { position: relative; }
.hero__slide {
  display: grid; align-content: center;
  min-height: clamp(500px, 66vh, 680px);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
/* Single hero now — the rotating slider was dropped. */
.hero__inner { max-width: 790px; }
.hero__title { font-size: var(--fs-hero); letter-spacing: -.035em; }
.hero__title em { font-style: normal; color: var(--gold-600); display: block; }
.hero__text { margin-top: 1.5rem; font-size: 1.0625rem; max-width: 46ch; color: var(--text); }
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .875rem; }

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--white) 24%, rgba(255,255,255,.72) 46%, rgba(255,255,255,0) 72%);
}
.hero .container { position: relative; z-index: 2; }

/* Slide counter with progress rule */
.hero__counter {
  position: absolute; left: 50%; bottom: 2.25rem; z-index: 3;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-eyebrow); font-size: .8125rem; font-weight: 600;
  color: var(--gold-700);
}
.hero__track { position: relative; width: 88px; height: 2px; background: var(--gold-200); overflow: hidden; }
.hero__track i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold-600); }
.hero__slides.is-playing .hero__track i { animation: heroProgress 6s linear forwards; }
@keyframes heroProgress { to { width: 100%; } }

/* --- Arched media ------------------------------------------------------- */

.arch { border-radius: var(--r-arch); overflow: hidden; }
.arch img { width: 100%; height: 100%; object-fit: cover; }

.media-zoom { overflow: hidden; }
.media-zoom img { transition: transform .55s var(--ease); }
.media-zoom:hover img { transform: scale(1.06); }

/* --- About -------------------------------------------------------------- */

.about__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .about__grid { grid-template-columns: .95fr 1fr; } }
.about__media { aspect-ratio: 4 / 5; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; margin-top: 2.75rem; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); font-weight: 700; color: var(--text-strong); line-height: 1; }
.stat__label { margin-top: .4rem; font-size: var(--fs-sm); color: var(--text-mute); }

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

.cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -22px rgba(13,13,13,.35); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }

/* Treatment icon, sitting over the seam between media and body */
.card__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; flex: none;
  margin: -3.4rem 0 .25rem;
  background: var(--white);
  border: 1px solid var(--rule-gold);
  border-radius: 16px;
  color: var(--gold-700);
  box-shadow: 0 8px 22px -14px rgba(13,13,13,.5);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.card__icon svg { width: 26px; height: 26px; }
.card:hover .card__icon {
  background: linear-gradient(140deg, var(--gold-300), var(--gold-400));
  color: var(--ink);
}
.card__title { font-size: var(--fs-h3); }
.card__text { color: var(--text-mute); font-size: .9375rem; }
.card__list { display: grid; gap: .5rem; margin-top: .25rem; }
.card__list li { position: relative; padding-left: 1.5rem; font-size: .9375rem; }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-400);
}
.card__note {
  font-size: .8125rem; color: var(--gold-700);
  padding-top: .25rem; font-weight: 600;
}
.card__foot { margin-top: auto; padding-top: .5rem; }

/* Statutory notice band — sunbeds are regulated under the
   Sunbeds (Regulation) Act 2010. */
.notice {
  display: flex; gap: 1rem; align-items: flex-start;
  margin-top: 2.5rem; padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--rule-gold);
  border-left: 4px solid var(--gold-600);
  border-radius: var(--r-input);
}
.notice__icon { flex: none; color: var(--gold-700); }
.notice__icon svg { width: 24px; height: 24px; }
.notice__title { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); margin-bottom: .25rem; }
.notice__text { font-size: .9375rem; color: var(--text); }

/* --- Pricing ------------------------------------------------------------ */

.pricing__grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1000px) { .pricing__grid { grid-template-columns: 1fr auto 1fr; } }

.pricing__portrait { display: none; }
@media (min-width: 1000px) {
  .pricing__portrait {
    display: block; width: 300px; aspect-ratio: 3 / 4;
    border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 0 1px var(--gold-300), 0 0 0 12px var(--white), 0 0 0 13px var(--gold-200);
  }
  .pricing__portrait img { width: 100%; height: 100%; object-fit: cover; }
}

.price-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1.125rem;
  padding-block: 1.125rem;
  border-bottom: 1px dashed var(--rule);
}
.price-row:last-child { border-bottom: 0; }
.price-row__icon {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(140deg, var(--gold-100), var(--gold-50));
  border: 1px solid var(--gold-200);
  color: var(--gold-700);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.price-row__icon svg { width: 24px; height: 24px; }
.price-row:hover .price-row__icon {
  background: linear-gradient(140deg, var(--gold-300), var(--gold-400));
  color: var(--ink);
}
.price-row__name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--text-strong); }
.price-row__desc { font-size: .875rem; color: var(--text-mute); }
.price-row__price { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--text-strong); white-space: nowrap; }

/* Placeholder pricing marker — remove once real prices land */
.is-placeholder { position: relative; }
.is-placeholder .price-row__price { color: var(--gold-700); }
.pricing__notice {
  margin-top: 2rem; padding: 1rem 1.25rem;
  background: var(--gold-50); border-left: 3px solid var(--gold-500);
  border-radius: var(--r-input);
  font-size: .875rem; color: var(--text);
}

/* --- Testimonial -------------------------------------------------------- */

.testimonial { position: relative; overflow: hidden; }
/* Centred with left/right + text-align rather than translateX, because the
   parallax script writes to `transform` and would wipe the centring out. */
.testimonial__ghost {
  position: absolute; left: 0; right: 0; bottom: -.15em;
  text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(6rem, 18vw, 15rem);
  color: #171717;
  white-space: nowrap; pointer-events: none; user-select: none;
  line-height: 1;
}
.testimonial .container { position: relative; z-index: 1; }
.testimonial__stars { display: flex; gap: .3rem; color: var(--gold-400); margin-bottom: 1.5rem; }
.testimonial__stars svg { width: 18px; height: 18px; }

/* Slides stack in the same grid cell so the band keeps a constant height
   and one can cross-fade over another. */
.testimonial__slides { display: grid; }
.testimonial__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
}
.testimonial__slide.is-active { opacity: 1; visibility: visible; transform: none; }
.testimonial__quote {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, .95rem + 1.4vw, 1.875rem);
  line-height: 1.45; color: var(--white); max-width: 60ch;
}
.testimonial__person { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.testimonial__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial__name { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 1.125rem; }
.testimonial__role { font-size: var(--fs-sm); color: var(--text-on-dark-mute); }
.testimonial__dots { display: flex; gap: .5rem; margin-top: 2rem; }
.testimonial__dots button { width: 9px; height: 9px; border-radius: 50%; background: #3A3A3A; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.testimonial__dots button[aria-selected="true"] { background: var(--gold-400); transform: scale(1.25); }
.testimonial__source { margin-top: 1.5rem; font-size: .875rem; color: var(--text-on-dark-mute); }
.testimonial__source strong { color: var(--gold-300); }

/* --- Locations ---------------------------------------------------------- */

.location {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.location:hover { border-color: var(--gold-400); transform: translateY(-4px); }
.location--primary { background: var(--ink); border-color: var(--ink); color: var(--text-on-dark-mute); }
.location--primary .location__name,
.location--primary .location__addr { color: var(--white); }
.location--primary .location__tag { background: rgba(255,255,255,.1); color: var(--gold-300); }

.location__tag {
  align-self: flex-start;
  padding: .3rem .75rem;
  background: var(--gold-100); color: var(--gold-700);
  font-family: var(--font-eyebrow); font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r-pill);
}
.location__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--text-strong); }
.location__addr { font-size: .9375rem; }
.location__services { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.location__services span {
  padding: .35rem .75rem; font-size: .8125rem;
  border-radius: var(--r-pill);
  background: var(--gold-50); color: var(--gold-700);
}
.location--primary .location__services span { background: rgba(255,255,255,.08); color: var(--gold-300); }

/* --- Hours -------------------------------------------------------------- */

.hours__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 950px) { .hours__grid { grid-template-columns: 1fr 1fr; } }
.hours__media { min-height: 320px; position: relative; }
.hours__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hours__panel {
  padding: clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(150deg, var(--gold-100), var(--gold-50));
}
.hours__table { margin-top: 2rem; }
.hours__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--rule-gold);
}
.hours__row:last-child { border-bottom: 0; }
.hours__day { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }
.hours__time { color: var(--text); font-size: .9375rem; }
.hours__row--head .hours__day,
.hours__row--head .hours__time { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-700); font-weight: 600; font-family: var(--font-eyebrow); }
.hours__row--closed .hours__time { color: var(--text-mute); }
.hours__note { margin-top: 1.25rem; font-size: .875rem; color: var(--text-mute); font-style: italic; }

/* --- Booking form ------------------------------------------------------- */

.booking__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 950px) { .booking__grid { grid-template-columns: .85fr 1.15fr; } }

.info-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--card);
  border-radius: var(--r-card);
  border-bottom: 3px solid var(--gold-500);
}
.info-card__title { font-size: var(--fs-h3); }
.info-card__rule { width: 56px; height: 3px; background: var(--gold-500); margin: 1rem 0 2rem; }
.info-row { display: flex; gap: 1rem; padding-block: 1rem; }
.info-row + .info-row { border-top: 1px solid var(--rule); }
.info-row__icon {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px;
  background: var(--white); color: var(--gold-700);
  border: 1px solid var(--rule-gold);
  border-radius: 12px;
}
.info-row__icon svg { width: 22px; height: 22px; }
.info-row__label { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }
.info-row__value { font-size: .9375rem; color: var(--text-mute); }
.info-row__value a:hover { color: var(--gold-700); text-decoration: underline; }

.form-panel {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--card);
  border-radius: var(--r-card);
}
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field--full { grid-column: 1 / -1; }

/* Floating labels: the label starts inside the box as a placeholder and rises
   to a caption when the field is focused or filled. Saves a stacked label row
   per field, which is what made the form so tall. */
.field { position: relative; display: flex; flex-direction: column; }
.field label {
  position: absolute; left: 1rem; top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
  font-size: .9375rem; color: var(--text-mute);
  pointer-events: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.field .req { color: var(--gold-700); }

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 58px;
  padding: 1.6rem 1rem .5rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-input);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { height: auto; min-height: 96px; resize: vertical; }

/* Textareas anchor their label near the top rather than the middle */
.field--area label { top: 1.15rem; transform: none; }

.field input:focus + label,
.field select:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:valid + label {
  transform: translateY(-50%) translateY(-.95rem) scale(.75);
  color: var(--gold-700);
}
.field--area textarea:focus + label,
.field--area textarea:not(:placeholder-shown) + label {
  transform: translateY(-.62rem) scale(.75);
  color: var(--gold-700);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6D2C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.75rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px var(--gold-100);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B3261E; }
.field__error { font-size: .8125rem; color: #B3261E; min-height: 1.2em; }

.form-note { margin-top: .5rem; font-size: .875rem; color: var(--text-mute); }
.form-status { margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--r-input); font-size: .9375rem; }
.form-status[data-state="success"] { background: #EAF5EC; color: #1B5E20; border-left: 3px solid #2E7D32; }
.form-status[data-state="error"]   { background: #FBEAE9; color: #8C1D18; border-left: 3px solid #B3261E; }
.form-status:empty { display: none; }

/* --- Footer ------------------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--text-on-dark-mute); }

.footer__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: clamp(2.5rem, 4vw, 3.5rem);
}
.footer__cta-text { display: flex; align-items: center; gap: 1rem; }
.footer__cta-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); color: var(--ink); flex: none; }
.footer__cta-icon svg { width: 26px; height: 26px; }
.footer__cta h2 { font-size: 1.5rem; color: var(--white); }
.footer__cta p { font-size: .9375rem; }

.footer__body {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
  padding: clamp(2.5rem, 4vw, 3.5rem);
  background: var(--ink-soft);
  border-radius: var(--r-card);
}
@media (min-width: 760px) { .footer__body { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__logo img { width: 120px; margin-bottom: 1.25rem; }
.footer__blurb { font-size: .9375rem; max-width: 38ch; }
.footer__socials { display: flex; gap: .75rem; margin-top: 1.5rem; }
.footer__socials a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--white); color: var(--ink);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer__socials a:hover { background: var(--gold-300); transform: translateY(-3px); }
.footer__socials svg { width: 18px; height: 18px; }

.footer__col h3 { font-size: 1.125rem; color: var(--white); }
.footer__col-rule { width: 40px; height: 2px; background: var(--gold-500); margin: .875rem 0 1.5rem; }
.footer__list { display: grid; gap: .875rem; }
.footer__list a { display: inline-flex; align-items: center; gap: .625rem; font-size: .9375rem; transition: color var(--dur-fast) var(--ease); }
.footer__list a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); flex: none; }
.footer__list a:hover { color: var(--gold-300); }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.75rem;
  font-size: .875rem;
}
.footer__bottom a { color: var(--gold-300); }
.footer__bottom a:hover { text-decoration: underline; }

/* --- Image placeholders --------------------------------------------------
   Every .ph is a slot waiting on a real photograph. The label states the shot
   that belongs there, so the gaps are legible in the browser and double as a
   shot list. Delete the .ph and drop in an <img> as photos arrive.
   ------------------------------------------------------------------------- */

.ph {
  display: grid; place-items: center; gap: .4rem;
  min-height: 150px; height: 100%; width: 100%;
  padding: 1.25rem; text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(138,109,44,.035) 14px 28px),
    linear-gradient(140deg, var(--gold-100), var(--gold-50));
  color: var(--gold-600);
  border: 1px dashed var(--gold-300);
}
.ph__icon svg { width: 30px; height: 30px; opacity: .55; }
.ph__label { font-family: var(--font-eyebrow); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ph__hint { font-size: .8125rem; color: var(--text-mute); max-width: 30ch; }
.arch .ph, .card__media .ph, .hours__media .ph { border: 0; }
.hours__media .ph { position: absolute; inset: 0; }

/* In the hero the placeholder fills the whole band, so its label is pinned to
   the bottom-right instead of the centre, where it collided with the headline. */
.hero__bg .ph {
  align-content: end; justify-items: end;
  padding: 2rem clamp(1.25rem, 3vw, 3rem);
  border: 0; text-align: right;
}
.hero__bg .ph__icon { display: none; }
.hero__bg .ph__label, .hero__bg .ph__hint { opacity: .75; }

/* --- Page banner (inner pages) ------------------------------------------ */

.page-banner { position: relative; padding-block: clamp(3rem, 7vw, 6rem); background: var(--gold-50); overflow: hidden; }
.page-banner__crumb { display: flex; align-items: center; gap: .6rem; font-size: .875rem; color: var(--text-mute); margin-bottom: 1rem; }
.page-banner__crumb a { color: var(--gold-700); }
.page-banner__crumb a:hover { text-decoration: underline; }
.page-banner__crumb svg { width: 14px; height: 14px; color: var(--gold-500); }
.page-banner__title { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); }