/* ============================================================
   Beauty in the City — Homepage
   Direction A: Editorial Warmth
   One maintainable stylesheet. Mobile-first, token-driven.
   ============================================================ */

/* ---------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------- */
:root {
  /* Surfaces (warm) */
  --surface-page:    #F9F5EF; /* parchment — page background */
  --surface-section: #EDE6DC; /* pale stone — alternate sections */
  --surface-deep:    #E3D9CB; /* deeper stone */
  --surface-card:    #FFFFFF; /* header, popup, cards */
  --surface-dark:    #1C1610; /* espresso — dark sections */
  --espresso-80:     #3A3128; /* softened espresso (button hover) */

  /* Accents (warm earth) */
  --bisque:          #C9A08A; /* rose bisque — primary accent */
  --bisque-light:    #E8D0C0; /* light bisque — tint */
  --bronze:          #8A6E4B; /* logo bronze — links, icons */
  --bronze-dark:     #6E5638; /* darker bronze — hover */
  --clay:            #A8795E;

  /* Text — secondary/accent darkened from the reference palette to meet
     WCAG AA contrast on the warm light surfaces (production hardening). */
  --text-primary:    #1C1610;
  --text-secondary:  #71604E; /* warm taupe — AA on parchment/stone/white */
  --text-muted:      #9E8B7A; /* faint label (large/decorative only) */
  --text-inverse:    #FFFFFF;
  --text-accent:     #6E5638; /* deep bronze — eyebrows/links, AA compliant */
  --text-link:       #6E5638;
  --text-link-hover: #574027;

  /* Borders */
  --border-default:  #DDD4C8;
  --border-strong:   #C7BBAB;

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-display-xl: clamp(46px, 6vw, 88px);
  --text-display-lg: clamp(40px, 4.6vw, 64px);
  --text-h2:         clamp(30px, 3.6vw, 52px);
  --text-h3:         clamp(22px, 2.2vw, 30px);
  --text-lead:       clamp(16px, 1.3vw, 19px);

  /* Spacing / layout */
  --container-max: 1200px;
  --container-pad: clamp(24px, 5vw, 80px);
  --section-pad:   clamp(60px, 9vw, 120px);

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 9999px;
  --radius-header: 48px;

  /* Shadows */
  --shadow-card:   0 2px 14px rgba(28, 22, 16, 0.06);
  --shadow-lift:   0 12px 34px rgba(28, 22, 16, 0.10);
  --shadow-header: 0 4px 24px rgba(28, 22, 16, 0.08);
  --shadow-modal:  0 24px 64px rgba(28, 22, 16, 0.20);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.15s var(--ease-out);
  --t-base: 0.25s var(--ease-out);
  --t-slow: 0.4s var(--ease-out);

  --focus-ring: 0 0 0 3px rgba(138, 110, 75, 0.40);

  /* Component metrics */
  --announce-h: 40px;
}

/* ---------------------------------------------------------------
   2. Reset & base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px; /* keep anchored sections clear of the floating header */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}

p { margin: 0; }

a { color: var(--text-link); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--text-link-hover); }

em { font-style: italic; }

button { font-family: inherit; }

::selection { background: var(--bisque-light); color: var(--text-primary); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------
   3. Utilities
   --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-pad); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 1200;
  transform: translateY(-150%);
  background: var(--surface-dark);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500;
  transition: transform var(--t-base);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.62); }

.lead {
  font-size: var(--text-lead);
  line-height: 1.75;
  color: var(--text-secondary);
}
.lead--light { color: rgba(255, 255, 255, 0.76); }

.measure-center { max-width: 60ch; margin-inline: auto; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-link);
  white-space: nowrap;
}
.text-link svg { transition: transform var(--t-base); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 10px 22px; }
.btn--lg { padding: 17px 40px; font-size: 14px; }
.btn--full { display: flex; width: 100%; }

.btn--primary {
  background: var(--surface-dark);
  color: #fff;
  border-color: var(--surface-dark);
}
.btn--primary:hover { background: var(--espresso-80); color: #fff; }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-dark); color: #fff; border-color: var(--surface-dark); }

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Solid light CTA — used for the primary action over the hero photo */
.btn--light {
  background: rgba(255, 255, 255, 0.96);
  color: var(--surface-dark);
  border-color: rgba(255, 255, 255, 0.96);
}
.btn--light:hover { background: #fff; color: var(--surface-dark); }

/* ---------------------------------------------------------------
   5. Announcement bar
   --------------------------------------------------------------- */
.announce {
  position: relative;
  height: var(--announce-h);
  background: var(--surface-dark);
  color: #fff;
  overflow: hidden;
  z-index: 70;
}
.announce__viewport {
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.announce__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.announce__set { display: inline-flex; align-items: center; }
.announce__item {
  padding: 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.announce__dot { opacity: 0.4; }
.announce:hover .announce__track,
.announce.is-paused .announce__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------
   6. Floating header
   --------------------------------------------------------------- */
.header {
  position: sticky;
  top: 10px;
  z-index: 80;
  padding: 18px var(--container-pad) 0;
  transition: padding var(--t-base);
}
.header.is-scrolled { padding-top: 10px; }

.header__pill {
  max-width: var(--container-max);
  margin-inline: auto;
  height: 72px;
  background: var(--surface-card);
  border-radius: var(--radius-header);
  box-shadow: var(--shadow-header);
  padding: 0 14px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: height var(--t-base);
}
.header.is-scrolled .header__pill { height: 62px; }

.header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.header__logo img { height: 42px; width: auto; }

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  white-space: nowrap;
  padding: 6px 0;
}
.nav__link:hover { color: var(--bronze); }
.nav__chevron { color: var(--text-secondary); transition: transform var(--t-base); }
.has-dropdown:hover .nav__chevron,
.has-dropdown:focus-within .nav__chevron { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  margin-top: 12px;
  min-width: 230px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.dropdown::before { /* hover bridge */
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-primary);
  transition: background var(--t-fast), color var(--t-fast);
}
.dropdown a:hover { background: var(--surface-section); color: var(--text-primary); }

.header__cta { display: none; }

.header__burger {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px;
  color: var(--text-primary);
  display: inline-flex;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   7. Mobile drawer
   --------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 16, 0.45);
  opacity: 0;
  transition: opacity var(--t-base);
}
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--surface-page);
  box-shadow: var(--shadow-modal);
  transform: translateX(100%);
  transition: transform 0.34s var(--ease-out);
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.drawer__logo { height: 38px; width: auto; }
.drawer__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  color: var(--text-primary);
}
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.drawer__cta { margin-top: 24px; }
.drawer__phone {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------
   8. Hero
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 86svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-top: calc(-1 * (72px + 18px + 10px)); /* pull hero under the floating header */
}
.hero__media, .hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__img { object-fit: cover; object-position: center; }
.hero__scrim {
  position: absolute; inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  background-image:
    linear-gradient(180deg, rgba(28,22,16,0.45) 0%, rgba(28,22,16,0) 26%),
    linear-gradient(to top, rgba(28,22,16,0.88) 0%, rgba(28,22,16,0.40) 40%, rgba(28,22,16,0.10) 64%);
  background-blend-mode: multiply, normal;
}
.hero__tint {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.18); /* dark neutral wash — never lightens the photo */
}
.hero__inner { position: relative; padding-bottom: clamp(56px, 9vw, 110px); }
@media (max-width: 767px) {
  .hero__inner { padding-bottom: 0; }
}
.hero__content {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 26px);
}
.hero__title {
  font-size: var(--text-display-xl);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fff;
}
.hero__lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  max-width: 46ch;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

/* ---------------------------------------------------------------
   9. Trust strip
   --------------------------------------------------------------- */
.trust { background: var(--surface-section); }
.trust__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: clamp(28px, 4vw, 34px);
}
.trust__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  place-items: center;
  justify-items: center;
  justify-content: center;
  text-align: center;
}
.trust__item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 0; }
.trust__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bisque-light);
  color: var(--bronze-dark);
}
.trust__text { display: flex; flex-direction: column; gap: 1px; align-items: center; }
.trust__text strong { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.trust__text span { font-size: 12px; letter-spacing: 0.03em; color: var(--text-secondary); }

/* ---------------------------------------------------------------
   10. Section heads, dark/stone modifiers, titles
   --------------------------------------------------------------- */
.section--stone { background: var(--surface-section); }
.section--dark { background: var(--surface-dark); color: #fff; }

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 46px);
}
.section__head-copy { display: flex; flex-direction: column; gap: 16px; max-width: fit-content; }
.section__head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section__head--center .eyebrow { justify-content: center; }
.section__head--stack {
  flex-direction: column;
  align-items: flex-start;
  max-width: 56ch;
}
.section__head--stack .eyebrow,
.section__head--center > .eyebrow { margin-bottom: 0; }

.section__title {
  font-size: var(--text-h2);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.section__title--light { color: #fff; }

/* ---------------------------------------------------------------
   11. Treatments
   --------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.tcard {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.tcard__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tcard__media {
  position: absolute;
  inset: 0;
}
/* tonal, intentional fallbacks (no per-category photography available) */
.tcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 15% 12%, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%);
}
/* Real photography per category; tonal gradient is the load fallback */
.tcard--tone-1 .tcard__media { background: url('/assets/images/salon/facial-treatment.jpg?v=1.7.0') center/cover no-repeat; }
.tcard--tone-2 .tcard__media { background: url('/assets/images/salon/massage-face.jpg?v=1.7.0') center/cover no-repeat; }
.tcard--tone-3 .tcard__media { background: url('/assets/images/salon/body-maderotherapy.jpg?v=1.7.0') center/cover no-repeat; }

.tcard__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,22,16,0.55) 0%, rgba(28,22,16,0.12) 38%, transparent 62%);
  pointer-events: none;
}
.tcard__foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.tcard__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}
.tcard__arrow {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background var(--t-base);
}
.tcard:hover .tcard__arrow { background: rgba(255, 255, 255, 0.18); }
.tcard__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-top: 16px;
  max-width: 40ch;
}

.pill-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  transition: background var(--t-base), border-color var(--t-base);
}
.pill svg { color: var(--text-accent); }
.pill:hover { background: var(--surface-section); border-color: var(--bisque); color: var(--text-primary); }

/* ---------------------------------------------------------------
   12. Promo (featured ritual)
   --------------------------------------------------------------- */
.promo__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
.promo__copy { display: flex; flex-direction: column; gap: 22px; order: 2; }
.promo__copy .btn { align-self: flex-start; }
.promo__panel {
  order: 1;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(150deg, #251C14, #4a3a28); /* fallback if image fails */
  display: block;
}
.promo__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promo__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  user-select: none;
  padding: 24px;
}
.promo__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1;
  color: rgba(240, 224, 210, 0.94);
}
.promo__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1;
  color: rgba(201, 160, 138, 0.92);
}
.promo__rule { width: 44px; height: 1px; background: rgba(232, 208, 192, 0.45); margin-top: 4px; }
.promo__caption {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 208, 192, 0.62);
}

/* ---------------------------------------------------------------
   13. Brand story (intro)
   --------------------------------------------------------------- */
.intro__inner {
  max-width: 820px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.intro__inner .eyebrow { justify-content: center; }
.intro__title {
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.intro__lead { max-width: 60ch; }
.intro__meta {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.intro__hours { font-size: 14px; color: var(--text-secondary); letter-spacing: 0.03em; }

/* ---------------------------------------------------------------
   14. Experience (feature grid)
   --------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.feature {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.feature__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bisque-light);
  color: var(--bronze-dark);
}
.feature__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: var(--text-primary);
}
.feature__text { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* ---------------------------------------------------------------
   15. Gallery
   --------------------------------------------------------------- */
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
}
.gallery__cell {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.gallery__cell--lead {
  grid-column: 1 / -1;
  grid-row: auto;
  aspect-ratio: 16 / 11;
}
.gallery__cell--lead img { width: 100%; height: 100%; object-fit: cover; }
.gallery__tile {
  display: flex;
  align-items: flex-end;
  padding: 22px;
  background: linear-gradient(150deg, #E3D2C4, #C9A08A); /* fallback if image fails */
}
.gallery__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(28,22,16,0.62) 0%, rgba(28,22,16,0.06) 58%);
  pointer-events: none;
}
.gallery__tile--alt {
  background: linear-gradient(150deg, #2a2017, #4a3a28); /* fallback if image fails */
}
.gallery__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 4vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}
.gallery__tile--alt .gallery__label { color: rgba(255, 255, 255, 0.92); }
.gallery__more { margin-top: 26px; }

/* ---------------------------------------------------------------
   16. Studio
   --------------------------------------------------------------- */
.studio__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.studio__panel {
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(150deg, #EFE6DA, #D9C3AE); /* fallback if image fails */
  display: block;
}
.studio__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.studio__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1.0;
  color: var(--bronze);
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
}
.studio__mark em { font-size: 0.5em; font-style: italic; color: var(--bronze-dark); letter-spacing: 0.06em; margin-top: 2px; }
.studio__copy { display: flex; flex-direction: column; gap: 22px; }
.studio__note {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  padding-left: 18px;
  border-left: 2px solid var(--bisque);
}

/* ---------------------------------------------------------------
   17. Proof (brand promise)
   --------------------------------------------------------------- */
.proof__inner {
  max-width: 900px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.proof__inner .eyebrow { justify-content: center; }
.proof__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(25px, 3.4vw, 44px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.proof__cite {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------
   18. Visit
   --------------------------------------------------------------- */
.visit__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
}
.visit__intro { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.visit__details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.visit__row { display: flex; gap: 18px; align-items: flex-start; }
.visit__icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--bronze-dark);
}
.visit__body { display: flex; flex-direction: column; gap: 6px; }
.visit__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.visit__value { font-size: 16px; line-height: 1.5; color: var(--text-primary); }
.visit__value--link { color: var(--text-primary); font-weight: 500; }
.visit__value--link:hover { color: var(--bronze); }

/* ---------------------------------------------------------------
   18b. Careers (Join Our Team)
   --------------------------------------------------------------- */
.careers { padding-block: clamp(44px, 6vw, 80px); }
.careers__card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(30px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
}
.careers__copy { display: flex; flex-direction: column; gap: 14px; }
.careers__detail { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.careers__detail .lead { max-width: 52ch; }
.careers__email {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.careers__email:hover { color: var(--text-link-hover); }

@media (min-width: 768px) {
  .careers__card {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    padding: clamp(40px, 4vw, 60px);
  }
}

/* ---------------------------------------------------------------
   19. Booking CTA
   --------------------------------------------------------------- */
.booking__inner {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.booking__inner .eyebrow { justify-content: center; }
.booking__title {
  font-size: var(--text-display-lg);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #fff;
}
.booking__actions {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.booking__phone {
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  padding-bottom: 3px;
}
.booking__phone:hover { color: #fff; border-color: #fff; }

/* ---------------------------------------------------------------
   20. Footer
   --------------------------------------------------------------- */
.footer {
  background: var(--surface-page);
  border-top: 1px solid var(--border-default);
  padding-block: clamp(48px, 7vw, 96px) 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer__logo { height: 50px; width: auto; }
.footer__tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 30ch;
}
.footer__ig { color: var(--text-link); font-size: 14px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col a { color: var(--text-primary); font-size: 14px; line-height: 1.5; }
.footer__col a:hover { color: var(--bronze); }
.footer__head {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.footer__muted { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.footer__link-accent { color: var(--text-link) !important; margin-top: 4px; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 6vw, 64px);
  padding-block: 24px;
  border-top: 1px solid var(--border-default);
}
.footer__bottom p { font-size: 12px; color: var(--text-secondary); }
.footer__credit { font-family: var(--font-display); font-style: italic; }

/* ---------------------------------------------------------------
   21. Popup
   --------------------------------------------------------------- */
.popup {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  pointer-events: none;
}
.popup.is-open { visibility: visible; pointer-events: auto; }
.popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 16, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.popup.is-open .popup__overlay { opacity: 1; }
.popup__dialog {
  position: relative;
  width: min(460px, 100%);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.popup.is-open .popup__dialog { opacity: 1; transform: translateY(0) scale(1); }
.popup__head {
  height: 150px;
  background: linear-gradient(150deg, #251C14, #4a3a28); /* fallback if image fails */
  overflow: hidden;
  border-bottom: 1px solid rgba(232, 208, 192, 0.18);
}
.popup__head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.popup__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 72px;
  line-height: 1;
  color: rgba(240, 224, 210, 0.9);
}
.popup__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup__body {
  padding: 30px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  align-items: center;
}
.popup__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.popup__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.popup__text { font-size: 14px; line-height: 1.65; color: var(--text-secondary); max-width: 34ch; }
.popup__body .btn { margin-top: 6px; }
.popup__dismiss {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.popup__dismiss:hover { color: var(--text-primary); }

/* ---------------------------------------------------------------
   22. Scroll reveal (progressive, opt-in)
   --------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   23. Body scroll lock (menu / popup open)
   --------------------------------------------------------------- */
body.is-locked { overflow: hidden; }

/* ===============================================================
   24. Responsive — progressive enhancement upward
   =============================================================== */

/* Small phones: keep trust strip readable */
@media (max-width: 380px) {
  .trust__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .btn { letter-spacing: 0.10em; padding-inline: 24px; }
}

/* Mobile: center the hero content (eyebrow, title, lead, actions) */
@media (max-width: 767px) {
  .hero { align-items: center; }
  .hero__content {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .hero__title,
  .hero__lead { margin-inline: auto; }
  .hero__actions { justify-content: center; }
}

/* Tablet and up */
@media (min-width: 600px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .hero { min-height: 100svh; }
  .trust__grid { grid-template-columns: repeat(4, 1fr); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .promo__inner { grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
  .promo__copy { order: 1; }
  .promo__panel { order: 2; aspect-ratio: 4 / 5; }
  .studio__inner { grid-template-columns: 0.95fr 1.05fr; gap: 64px; }
  .studio__panel { aspect-ratio: 4 / 5; }
  .visit__inner { grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
  .gallery__grid { grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, 220px); }
  .gallery__cell--lead { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px; }
  .footer__brand { grid-column: auto; }
}

/* Desktop nav appears when there is room for it */
@media (min-width: 900px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .header__burger { display: none; }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Comfortable large-desktop type for hero */
@media (min-width: 1024px) {
  .hero__content { gap: 26px; }
}

/* ===============================================================
   25. Reduced motion
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .announce__track { animation: none !important; transform: none !important; }
  .announce__viewport { justify-content: center; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===============================================================
   ===============================================================
   INNER-PAGE SYSTEM (Phase 2A)

   Everything below is shared by the inner pages. It reuses the
   tokens, chrome, buttons and spacing rhythm above unchanged —
   the homepage sections (§8–§21) are untouched.

   Only components a real page needed are here. Nothing abstract.
   ===============================================================
   =============================================================== */

/* ---------------------------------------------------------------
   26. Treatments mega menu (desktop)
   Replaces the simple .dropdown list for the Treatments item.
   CSS opens it on hover/focus-within; main.js keeps ARIA truthful.
   --------------------------------------------------------------- */
/* The panel is anchored to the HEADER PILL, not to the nav item.
   Anchored to the item it is pushed right by the item's own offset, and
   at 900–1100px its right edge ran past the viewport (measurable as
   scrollWidth 1042 > clientWidth 1024 — clipped by body{overflow-x:hidden},
   so invisible to users but a real layout fault). Centred on the pill it
   is symmetric and can never overflow: the pill is already
   container-constrained. */
.header__pill { position: relative; }
.has-dropdown { position: static; }

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 12px;
  width: min(680px, calc(100vw - 48px));
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 208px;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.mega::before { /* hover bridge across the gap under the trigger */
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}
.has-dropdown:hover .mega,
.has-dropdown:focus-within .mega,
.has-dropdown.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-accent);
  padding: 10px 14px 6px;
  margin: 0;
}
.mega__link {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.mega__link:hover { background: var(--surface-section); }
.mega__link strong {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1px;
}
.mega__link span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
/* Featured panel — a real photograph, not a decorative filler */
.mega__aside {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 100%;
  background: linear-gradient(150deg, #251C14, #4a3a28);
  color: #fff;
}
.mega__aside img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mega__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,22,16,0.86) 0%, rgba(28,22,16,0.22) 62%, rgba(28,22,16,0.05) 100%);
}
/* z-index is load-bearing: ::after is generated as the last child, so without
   it the scrim paints OVER this caption and washes the text out. */
.mega__aside-body { position: relative; z-index: 1; padding: 16px; }
.mega__aside-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 21px;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 8px;
}
.mega__aside-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.mega__aside-link svg { transition: transform var(--t-base); }
.mega__aside:hover .mega__aside-link svg { transform: translateX(3px); }

/* Current-page marker (site-wide) */
.nav__link[aria-current="page"] { color: var(--bronze-dark); }
.nav__link[aria-current="page"]::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--bronze);
  opacity: 0.6;
}
.nav__link { position: relative; }

/* ---------------------------------------------------------------
   27. Mobile navigation accordion
   The drawer needs the same treatment depth as the mega menu,
   without dumping 5 categories into a flat list.
   --------------------------------------------------------------- */
.drawer__acc { border-bottom: 1px solid var(--border-default); }
.drawer__toggle {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-align: left;
}
.drawer__toggle svg { flex: 0 0 auto; color: var(--text-secondary); transition: transform var(--t-base); }
.drawer__acc.is-open .drawer__toggle svg { transform: rotate(180deg); }
.drawer__panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base);
}
.drawer__acc.is-open .drawer__panel-list { grid-template-rows: 1fr; }
/* list-style must be reset here too — .drawer__list's `none` does not
   inherit into this nested <ul>, and the markers push the links off-axis. */
.drawer__panel-inner {
  overflow: hidden;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer__panel-list a {
  display: block;
  padding: 11px 0 11px 16px;
  border-bottom: 0;
  border-left: 1px solid var(--border-default);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
}
.drawer__panel-list a:hover { color: var(--text-primary); }
.drawer__panel-list li:last-child a { padding-bottom: 16px; }

/* ---------------------------------------------------------------
   28. Inner-page hero
   Deliberately NOT .hero — that one hardcodes the header offset,
   runs 86–100svh and assumes white text on a scrimmed photo.
   This sits below the chrome on a light surface.
   --------------------------------------------------------------- */
.page-hero {
  background: var(--surface-section);
  padding-block: clamp(30px, 4.5vw, 52px) clamp(46px, 6.5vw, 78px);
}
.page-hero__inner { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 24px); }
.page-hero__copy { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px); }
.page-hero__title {
  font-size: var(--text-display-lg);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.page-hero__lead {
  font-size: var(--text-lead);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 54ch;
}
/* --plain: typographic, no photograph. For pages where a hero image
   would compete with the content (gallery) or repeat the homepage (hub). */
.page-hero--plain .page-hero__copy { max-width: 46ch; }
.page-hero--plain .page-hero__lead { max-width: 52ch; }
/* --media: asymmetric copy + figure. Never full-bleed, never scrimmed. */
.page-hero--media .page-hero__figure {
  margin: 0; /* <figure> UA default is `1em 40px` — it shrinks the grid column */
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
  background: linear-gradient(150deg, #EFE6DA, #D9C3AE);
}
.page-hero--media .page-hero__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------
   29. Breadcrumbs
   --------------------------------------------------------------- */
.crumbs { font-size: 13px; }
.crumbs__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.crumbs__item { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.crumbs__item:not(:last-child)::after {
  content: "/";
  color: var(--text-muted);
  font-size: 12px;
}
.crumbs__item a { color: var(--text-secondary); }
.crumbs__item a:hover { color: var(--bronze-dark); }
.crumbs__current { color: var(--text-primary); font-weight: 500; }

/* ---------------------------------------------------------------
   30. Editorial intro / body copy
   --------------------------------------------------------------- */
/* Inline action row — button(s) plus an optional text link */
.actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.actions--center { justify-content: center; margin-top: clamp(26px, 3vw, 34px); }

/* Phone link on a LIGHT surface. .booking__phone is white-on-dark only —
   reusing it here would render the number nearly invisible on stone. */
.phone-link {
  font-size: 16px;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 3px;
}
.phone-link:hover { color: var(--bronze-dark); border-color: var(--bronze); }

.editorial { max-width: 68ch; display: flex; flex-direction: column; gap: 20px; }
.editorial--center { margin-inline: auto; text-align: center; }
/* Detail page only. A marginal label against a text block — the oldest
   editorial device there is. Gives the bronze eyebrow a structural job
   instead of a decorative one, and consumes the dead ~45% of the row that
   made two honest sentences look like an unfinished page. */
.editorial--split { max-width: none; }
.editorial--center .eyebrow { justify-content: center; }
.editorial__lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h3);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.editorial__body { font-size: 16px; line-height: 1.8; color: var(--text-secondary); }
.editorial__body + .editorial__body { margin-top: -6px; }

/* Treatment-detail spec list. Lives in the --split layout's left column, which
   otherwise reserved ~40% of the page for a two-word eyebrow.
   A list, not cards: three short facts do not need three boxes. */
.editorial__aside { display: flex; flex-direction: column; gap: 18px; }
.spec__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0;
}
/* The list beside the copy in a --index hero. On mobile the grid collapses and
   it simply follows the lead, which is the right reading order anyway. */
.page-hero__side { display: flex; flex-direction: column; gap: 14px; }
.spec { list-style: none; margin: 0; padding: 0; }
.spec__item {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-block: 10px;
  border-top: 1px solid var(--border-default);
}
.spec__item:last-child { border-bottom: 1px solid var(--border-default); }

/* ---------------------------------------------------------------
   31. Category rows (Treatments hub)
   Full-width alternating rows — deliberately not the homepage's
   three-up card grid.
   --------------------------------------------------------------- */
.trow-set { display: flex; flex-direction: column; gap: clamp(52px, 8vw, 96px); }
.trow { display: grid; gap: clamp(22px, 3.5vw, 48px); align-items: center; }
.trow__figure {
  margin: 0; /* see .page-hero__figure — <figure> UA margin */
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #EFE6DA, #D9C3AE);
}
.trow__figure img { width: 100%; height: 100%; object-fit: cover; }
.trow__body { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.trow__title { font-size: var(--text-h3); font-weight: 300; }
.trow__text { font-size: 15px; line-height: 1.75; color: var(--text-secondary); max-width: 46ch; }

/* The hub's ONE photograph, for the ONE family that has somewhere to go. */
.trow--feature .trow__figure { aspect-ratio: 16 / 9; }
.trow--feature .trow__title { font-size: var(--text-h2); }
/* Treatment index (hub) — the menu the H1 promises.
   Five families in the display face, legible in one screen, before any
   photograph asks for attention. Replaces five full-width image rows that
   asserted five equal destinations when only one of them has a page. */
.tindex { list-style: none; margin: 0; padding: 0; }
.tindex__item { scroll-margin-top: 120px; }
.tindex__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 32px;
  padding-block: 26px;
  border-top: 1px solid var(--border-default);
}
.tindex__item:last-child .tindex__row { border-bottom: 1px solid var(--border-default); }
/* The hover nudge is a transform, not padding-left.
   Same 8px, same look: the row is a `1fr auto` grid, so padding-left only ever
   moved the NAME — the arrow column stays pinned to the unchanged right edge.
   But padding is a layout property: animating it relaid out the row on every
   hover, on every row. transform is compositor-only. See also .tlist__name,
   which carries the identical rule — .tindex and .tlist are the same component
   under two names, and unifying them is Phase 2B work, not a polish pass. */
a.tindex__row:hover .tindex__name { transform: translateX(8px); }
.tindex__name {
  transition: transform var(--t-base), color var(--t-base);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
a.tindex__row:hover .tindex__name { color: var(--bronze-dark); }
.tindex__text {
  grid-column: 1;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 58ch;
}
.tindex__subs {
  grid-column: 1;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tindex__go {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: inline-flex;
  color: var(--bronze);
  transition: transform var(--t-base);
}
a.tindex__row:hover .tindex__go { transform: translateX(3px); }

/* ---------------------------------------------------------------
   32. Treatment list rows (category + detail pages)
   Rows, not cards: 12 treatments as 12 cards is a wall of noise,
   and most have no page to link to yet. __meta is the reserved
   price/duration slot — it renders nothing until data is confirmed.
   --------------------------------------------------------------- */
.tlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-default); }
.tlist__row { border-bottom: 1px solid var(--border-default); }
.tlist__inner {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 0;
  width: 100%;
}
/* Transform, not padding-left — see the note on a.tindex__row:hover. */
a.tlist__inner:hover .tlist__name { transform: translateX(8px); }
.tlist__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  flex: 1 1 auto;
  transition: transform var(--t-base), color var(--t-base);
}
a.tlist__inner:hover .tlist__name { color: var(--bronze-dark); }
/* Reserved slot: price · duration. Empty by design — see
   CONTENT_SOURCE_OF_TRUTH.md §2. Nothing renders when unset. */
.tlist__meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.tlist__price { font-weight: 600; color: var(--text-primary); }
.tlist__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--bronze);
  transition: transform var(--t-base);
}
a.tlist__inner:hover .tlist__go { transform: translateX(3px); }

/* Treatment group (a sub-category block on a category page) */
.tgroup + .tgroup { margin-top: clamp(48px, 7vw, 84px); }
.tgroup__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 56ch;
  margin-bottom: clamp(22px, 3vw, 30px);
}
.tgroup__head .lead { font-size: 16px; }
/* Only ONE of the three groups has an index page of its own — facial-cleansing,
   the only one whose treatments canonicalise beneath it on the live site (see
   build-docs/ROUTE_HIERARCHY.md §3). So only its title is a link, and that
   difference is information: a plain title means there is nothing behind it.
   The link inherits the heading's colour rather than going bronze — a bronze
   H2 among two espresso ones would read as a colour bug, not as a link — and
   states itself on hover with the same underline the body links use. */
.tgroup__link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.tgroup__link:hover {
  color: var(--bronze-dark);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}
/* The twelve treatment names are the reason this page exists; the group title
   is only a label. Phase 2A had the ratio backwards — 52px label over 23px
   item. On an index the items ARE the content. */
.tgroup .section__title { font-size: var(--text-h3); }
/* Head and rows share one column, so the hairline stops measuring emptiness
   under an 11-character word. */
.tgroup .tlist { max-width: 56ch; }

/* ---------------------------------------------------------------
   33. Image + text band
   --------------------------------------------------------------- */
.band { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.band__figure {
  margin: 0; /* see .page-hero__figure — <figure> UA margin */
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #EFE6DA, #D9C3AE);
}
.band__figure img { width: 100%; height: 100%; object-fit: cover; }
.band__copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* ---------------------------------------------------------------
   34. Pull-quote (About only)
   The old site rendered exactly this copy inside quote marks —
   this restores the original intent rather than inventing one.
   --------------------------------------------------------------- */
/* Left-aligned on purpose. Centred, it was the same object as the booking
   band 400px below it — the page thesis and the sales ask, twins. */
.pullquote { max-width: 900px; }
.pullquote__lead { margin-block: clamp(18px, 2.4vw, 24px); }
.pullquote__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  /* Raised: this is the only sourced line the homepage has NOT already
     published, and it was the 4th-largest thing on its own page. */
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
}
.pullquote__text em { color: var(--bisque-light); font-style: italic; }
.pullquote__rule {
  width: 40px; height: 1px;
  background: rgba(255,255,255,0.3);
  margin: clamp(24px, 3vw, 34px) 0 0;
}

/* ---------------------------------------------------------------
   35. Sub-category nav (category page)
   Reuses .pill-row / .pill from the homepage unchanged.
   --------------------------------------------------------------- */
.subnav { margin-bottom: clamp(36px, 5vw, 52px); }

/* ---------------------------------------------------------------
   36. Gallery grid + lightbox
   --------------------------------------------------------------- */
/* Single column on phones: every cell is a plain 4:3. The mosaic spans only
   switch on at >=768px, where there are enough columns for them to tessellate
   (see §39). Row tracks there are a FIXED height — with auto rows, a
   `grid-row: span 2` cell whose button is `height:100%` has no height to
   resolve against and collapses to a sliver. */
.ggrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ggrid__item { margin: 0; }
.ggrid__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  background: linear-gradient(150deg, #EFE6DA, #D9C3AE);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
}
.ggrid__btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.ggrid__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28,22,16,0);
  transition: background var(--t-base);
}
.ggrid__btn:hover img { transform: scale(1.04); }
.ggrid__btn:hover::after { background: rgba(28,22,16,0.10); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  visibility: hidden;
  pointer-events: none;
}
.lightbox.is-open { visibility: visible; pointer-events: auto; }
.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 10, 0.92);
  opacity: 0;
  transition: opacity var(--t-base);
}
.lightbox.is-open .lightbox__overlay { opacity: 1; }
.lightbox__stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--t-base), transform var(--t-base);
}
.lightbox.is-open .lightbox__stage { opacity: 1; transform: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--radius-md);
  background: #251C14;
}
.lightbox__cap {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
  text-align: center;
  max-width: 60ch;
}
.lightbox__count { color: rgba(255,255,255,0.42); margin-left: 8px; }
.lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(28,22,16,0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lightbox__btn:hover { background: rgba(28,22,16,0.9); border-color: rgba(255,255,255,0.6); }
.lightbox__btn--prev { left: clamp(-6px, -1vw, 8px); }
.lightbox__btn--next { right: clamp(-6px, -1vw, 8px); }
.lightbox__close {
  position: absolute;
  top: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.94);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* ---------------------------------------------------------------
   37. Contact actions + map card
   --------------------------------------------------------------- */
.cactions {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
/* Contact only: the actions sit IN the hero, filling the dead right half and
   taking the H1 as their subject. Scoped to --plain + .cactions, so the hub
   and gallery (also --plain, no .cactions) are naturally unaffected. */
.page-hero--plain .cactions { margin-top: clamp(28px, 4vw, 40px); }
.cactions__card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
a.cactions__card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
/* Hours is a fact, not an action — but it is still one of the four things
   this block is here to tell you, and it must look like it belongs to them.

   The previous rule made the point by subtraction: background: none,
   border-color: transparent, padding-inline: 0. That over-corrected. Against
   three white bordered cards the hours card read as unstyled — an unfinished
   fourth cell rather than a deliberate non-button — and its zero inline
   padding pulled its text out of alignment with the other three.

   So it keeps the surface, the border and the padding. What marks it inert is
   what it does NOT have: no href, no arrow, no lift on hover. That is enough,
   and it is how the card is already built — it is a <div>, and the hover rule
   above is `a.cactions__card:hover`, scoped to the element, so this card could
   never pick the hover up. The modifier never needed to suppress it.

   The modifier stays (it is the semantic marker for "not interactive", and the
   double-class specificity is what lets it override the base rule if it ever
   needs to again) and states the cursor explicitly rather than leaning on the
   <div> default — the cursor is part of the promise the card makes. */
.cactions__card.cactions__card--static {
  cursor: default;
}
.cactions__icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* White + border, as the homepage's own .visit__icon does on this same
     stone surface. Bisque is a line weight in this palette, never a fill. */
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--bronze-dark);
}
.cactions__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cactions__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.cactions__value {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  /* Load-bearing: info@beautyinthecity.com.cy is one unbreakable token and
     overflows the card at 390px without it. */
  overflow-wrap: anywhere;
}
.cactions__note { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

/* Contact's location band. Scoped to .visitband, NEVER to .section--stone —
   that selector would reach the homepage's #visit and #studio and redesign
   the approved page by accident. */
.visitband { display: grid; gap: clamp(28px, 4vw, 48px); }
.visitband__copy { display: flex; flex-direction: column; gap: 14px; }
.visitband__address { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.visitband__line {
  font-family: var(--font-display);
  font-weight: 300;
  /* Capped at 40px so the address never outranks the H2 beside it. */
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-default);
  align-self: stretch;
}

/* ---------------------------------------------------------------
   38. Related links
   Text-led, no imagery — deliberately not another .tcard row.
   --------------------------------------------------------------- */
.related__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.related__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  transition: border-color var(--t-base), transform var(--t-base);
}
.related__card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.related__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.related__card:hover .related__name { color: var(--bronze-dark); }
.related__card svg { flex: 0 0 auto; color: var(--bronze); transition: transform var(--t-base); }
.related__card:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------
   39. Inner-page responsive
   Breakpoints match the homepage exactly: 600 / 768 / 900 / 1024.
   --------------------------------------------------------------- */
@media (min-width: 600px) {
  .ggrid { grid-template-columns: repeat(2, 1fr); }
  .cactions { grid-template-columns: repeat(2, 1fr); }
  .related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .page-hero { padding-block: clamp(34px, 4vw, 56px) clamp(60px, 7vw, 92px); }
  .page-hero--media .page-hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
  }
  /* --index: a subcategory index, where the list IS the page. Copy left, the
     treatments themselves right — so the hero's right half carries the reason
     the page exists instead of being the empty stone the review named
     (INNER_PAGE_VISUAL_REVIEW.md:25). align-items: start, not center: the
     list must hang from the top beside the copy, not float against its middle. */
  .page-hero--index .page-hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }
  .page-hero--index .page-hero__copy { max-width: 46ch; }
  /* About only. Every other inner-page photograph is the same rounded ~4:3
     half-width box — one photo idea doing six pages' work. Scoped: the
     category and detail heroes use landscape sources and crop badly at 4:5. */
  .page-hero--tall .page-hero__figure { aspect-ratio: 4 / 5; }

  .trow { grid-template-columns: 0.95fr 1.05fr; }
  .trow__figure { grid-column: 1; grid-row: 1; }
  .trow__body { grid-column: 2; grid-row: 1; }

  .band { grid-template-columns: 0.95fr 1.05fr; }
  .band__figure { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
  .band__copy { grid-column: 2; grid-row: 1; }
  .band--flip .band__figure { grid-column: 2; }
  .band--flip .band__copy { grid-column: 1; }

  /* Editorial mosaic. Fixed row tracks so the spans resolve, and dense flow so
     a tall cell never leaves a hole beside it. Portrait photographs take the
     --tall slots and landscape ones the --wide slots, so no image is cropped
     against its own orientation. */
  .ggrid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 232px;
    grid-auto-flow: row dense;
    gap: 18px;
  }
  .ggrid__btn { aspect-ratio: auto; height: 100%; }
  .ggrid__item--tall { grid-row: span 2; }
  /* 2x2 = 4x base area, a genuine focal point. At span 2x1 the largest cell
     was only 2x base — five span-hiccups too small to create hierarchy, which
     is why "deliberately irregular" was never actually achieved. */
  .ggrid__item--wide { grid-column: span 2; grid-row: span 2; }

  .related__grid { grid-template-columns: repeat(3, 1fr); }
  .cactions { grid-template-columns: repeat(2, 1fr); }
  .visitband { grid-template-columns: 1fr 1fr; align-items: start; }

  .tlist__name { font-size: 23px; }
}

@media (min-width: 900px) {
  .editorial--split {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    /* row gap then column gap — a single value put 72px between the lede and
       its own body paragraph. */
    gap: 22px clamp(32px, 5vw, 72px);
  }
  .editorial--split .eyebrow,
  .editorial--split .editorial__aside { grid-column: 1; align-self: start; }
  .editorial--split .editorial__lede,
  .editorial--split .editorial__body { grid-column: 2; }
  /* The aside spans the copy beside it rather than sitting on row 1 alone —
     without this the spec list floats against the lede and leaves the hole it
     was added to fill. */
  .editorial--split .editorial__aside { grid-row: 1 / -1; }
  /* Explicit clamp, NOT var(--text-h2): at 900-1100px the h2's 3.6vw closes
     on the H1's 4.6vw and the ladder flattens. */
  .editorial--split .editorial__lede { font-size: clamp(30px, 3vw, 44px); line-height: 1.18; max-width: 26ch; }
  .editorial--split .editorial__body { font-size: var(--text-lead); }
}

@media (min-width: 1024px) {
  .ggrid { gap: 22px; grid-auto-rows: 262px; }
}

/* Mega menu only exists where the desktop nav does (>=900px).
   Below that the drawer accordion is the navigation. */
@media (max-width: 899px) {
  .mega { display: none; }
}

/* Small phones — long treatment names must not force overflow */
@media (max-width: 420px) {
  /* Grid, not wrap: a wrapped long name orphaned the arrow onto its own line
     and broke the row rhythm. */
  .tlist__inner { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; }
  .tlist__name { min-width: 0; }
}

/* ---------------------------------------------------------------
   40. Inner-page reduced motion
   (§25's universal rule already neutralises transitions; these are
   the cases that need more than a duration change.)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ggrid__btn:hover img { transform: none; }
  .lightbox__stage { transform: none !important; }
  .drawer__panel-list { transition: none; }
}

/* === BEGIN PHASE 2C COMPLETE-SITE STYLES === */

/* A denser two-column treatment index keeps eleven current categories visible
   without making the desktop menu taller than a typical laptop viewport. */
@media (min-width: 900px) {
  .mega { width: min(860px, calc(100vw - 48px)); grid-template-columns: minmax(0, 1fr) 210px; }
  .mega__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  .mega__link { min-height: 58px; }
}

.catalog-hub-hero .page-hero__copy { max-width: 58ch; }
.catalog-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-default); }
.catalog-index__item { border-bottom: 1px solid var(--border-default); }
.catalog-index__item a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  padding: clamp(20px, 3vw, 34px) 0;
  color: var(--text-primary);
}
.catalog-index__name { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 43px); line-height: 1.05; font-weight: 300; }
.catalog-index__blurb { grid-column: 1; max-width: 58ch; color: var(--text-secondary); line-height: 1.65; }
.catalog-index__action { grid-column: 2; grid-row: 1; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.catalog-index__arrow { grid-column: 2; grid-row: 2; justify-self: end; transition: transform var(--t-base); }
.catalog-index__item a:hover .catalog-index__arrow { transform: translateX(4px); }

.campaign__intro { max-width: 67ch; margin-bottom: clamp(32px, 5vw, 60px); }
.campaign__intro .section__title { margin-block: 10px 16px; }
.campaign__intro .btn { margin-top: 22px; }

.catalog-hero { background: var(--surface-section); padding-block: clamp(30px, 5vw, 72px); }
.catalog-hero__inner { display: grid; gap: clamp(24px, 5vw, 68px); align-items: center; }
.catalog-hero__copy { display: flex; flex-direction: column; gap: 16px; max-width: 61ch; }
.catalog-hero__copy h1, .detail-hero h1, .voucher-hero h1, .legal-hero h1, .not-found h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.catalog-hero__copy > p { color: var(--text-secondary); font-size: var(--text-lead); line-height: 1.75; max-width: 58ch; text-wrap: pretty; }
.catalog-hero__figure { margin: 0; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; background: var(--surface-deep); }
.catalog-hero__figure img { width: 100%; height: 100%; object-fit: cover; }
.catalog-hero--editorial .catalog-hero__figure { aspect-ratio: 16 / 10; }
.catalog-hero--pricing { background: var(--surface-page); border-bottom: 1px solid var(--border-default); }
.catalog-hero--immersive { background: var(--surface-dark); color: var(--text-inverse); }
.catalog-hero--immersive .catalog-hero__copy > p, .catalog-hero--immersive .crumbs, .catalog-hero--immersive .crumbs a { color: rgba(255,255,255,.78); }
.catalog-hero--immersive .crumbs__current { color: #fff; }

.catalog-jumps { padding-block: 18px; border-bottom: 1px solid var(--border-default); background: var(--surface-card); }
.catalog-menu { padding-top: clamp(44px, 7vw, 86px); }
.catalog-note { max-width: 74ch; padding: 18px 20px; margin-bottom: 40px; background: var(--surface-section); border-radius: var(--radius-md); color: var(--text-secondary); }
.catalog-group + .catalog-group { margin-top: clamp(54px, 8vw, 96px); }
.catalog-group__heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.catalog-group__heading h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 300; line-height: 1.08; }
.catalog-group__heading p { color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.price-table-wrap { width: 100%; }
.price-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.price-table thead { border-block: 1px solid var(--border-default); }
.price-table th, .price-table td { padding: 17px 12px; text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.price-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-accent); font-weight: 600; }
.price-table tbody tr { border-bottom: 1px solid var(--border-default); }
.price-table tbody th { width: 52%; font-size: 15px; line-height: 1.5; font-weight: 500; }
.price-table td { width: 16%; font-size: 14px; color: var(--text-secondary); }
.price-table td strong { color: var(--text-primary); font-weight: 600; }
.price-table__qualifier { display: block; margin-top: 2px; font-size: 11px; }
.price-table__service-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-decoration-color: var(--bisque); text-underline-offset: 4px; }
.price-table__service-link svg { flex: 0 0 auto; }
.price-table__action { text-align: right !important; }
.price-table__action a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: var(--text-link); text-decoration: underline; text-underline-offset: 4px; }

.catalog-related__inner { display: grid; gap: 30px; }
.catalog-related__inner .section__title { margin-top: 10px; }
.catalog-related ul, .detail-related ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-strong); }
.catalog-related li, .detail-related li { border-bottom: 1px solid var(--border-strong); }
.catalog-related li a, .detail-related li a { display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 58px; padding-block: 10px; color: var(--text-primary); }

.detail-hero { padding-block: clamp(34px, 6vw, 86px); background: var(--surface-section); }
.detail-hero__inner { display: grid; gap: clamp(30px, 5vw, 70px); align-items: center; }
.detail-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.detail-hero__copy > p { color: var(--text-secondary); font-size: var(--text-lead); line-height: 1.75; max-width: 57ch; }
.detail-hero__figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); }
.detail-hero__figure img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero--dark { background: var(--surface-dark); color: #fff; }
.detail-hero--dark h1 { color: #fff; }
.detail-hero--dark .detail-hero__copy > p, .detail-hero--dark .crumbs, .detail-hero--dark .crumbs a { color: rgba(255,255,255,.78); }
.detail-hero--dark .crumbs__current { color: #fff; }
.detail-hero--immersive .detail-hero__figure { aspect-ratio: 16 / 10; }
.detail-facts { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 4px 0 2px; }
.detail-facts div { display: grid; gap: 2px; min-width: 120px; }
.detail-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-accent); }
.detail-hero--dark .detail-facts dt { color: var(--bisque-light); }
.detail-facts dd { margin: 0; font-size: 20px; font-weight: 600; }
.detail-context__grid { display: grid; gap: 24px; }
.detail-context__grid .section__title { margin-top: 10px; }
.detail-context__grid p { max-width: 65ch; line-height: 1.75; color: var(--text-secondary); }
.detail-context__grid .lead { color: var(--text-primary); }
.detail-related .section__title { margin-bottom: 26px; }

.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(18px, 3vw, 30px); }
.team-card { background: var(--surface-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.team-card img, .team-card__initial { width: 100%; aspect-ratio: 1; object-fit: cover; }
.team-card__initial { display: grid; place-items: center; background: var(--surface-deep); font-family: var(--font-display); font-size: 82px; color: var(--bronze-dark); }
.team-card__body { display: grid; gap: 5px; padding: 18px; }
.team-card__body h3 { font-family: var(--font-display); font-size: 27px; font-weight: 400; }
.team-card__body p { color: var(--text-secondary); }
.team-card__body a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 5px; color: var(--text-link); text-decoration: underline; text-underline-offset: 4px; }

.about-team__head { display: grid; gap: 18px; margin-bottom: 34px; }
.about-team__head .section__title { margin-top: 10px; }
.about-team__preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vw, 28px); }
.about-team__preview figure { margin: 0; }
.about-team__preview img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); }
.about-team__preview figcaption { display: grid; gap: 3px; margin-top: 10px; }
.about-team__preview figcaption span { font-size: 13px; color: var(--text-secondary); }
.about-team__link { margin-top: 28px; }

.voucher-hero { background: var(--surface-section); padding-block: clamp(34px, 6vw, 90px); }
.voucher-hero__grid { display: grid; gap: clamp(30px, 6vw, 82px); align-items: center; }
.voucher-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.voucher-hero__figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-lg); }
.voucher-hero__figure img { width: 100%; height: 100%; object-fit: cover; }
.voucher-how__grid { display: grid; gap: 24px; }
.voucher-how__grid .section__title { margin-top: 10px; }
.voucher-how__grid p { max-width: 62ch; line-height: 1.75; color: var(--text-secondary); }
.voucher-how__grid .lead { color: var(--text-primary); }

.legal-hero { background: var(--surface-section); padding-block: clamp(34px, 6vw, 82px); }
.legal-hero__inner { max-width: 76ch; display: grid; gap: 16px; }
.legal-hero__date { font-size: 13px; color: var(--text-secondary); }
.legal__grid { display: grid; gap: 38px; }
.legal__aside nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal__aside a { min-height: 44px; display: inline-flex; align-items: center; color: var(--text-link); text-decoration: underline; text-underline-offset: 4px; }
.legal__content { max-width: 74ch; }
.legal__content section + section { margin-top: 54px; }
.legal__content h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 300; margin-bottom: 16px; }
.legal__content p { line-height: 1.8; color: var(--text-secondary); }
.legal__content p + p { margin-top: 14px; }
.legal__content a { color: var(--text-link); text-decoration: underline; text-underline-offset: 4px; }

.not-found { min-height: 70svh; display: grid; align-items: center; padding-block: clamp(38px, 7vw, 100px); background: var(--surface-section); }
.not-found__inner { display: grid; gap: clamp(30px, 6vw, 80px); align-items: center; }
.not-found__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.not-found__code { margin: 0; font-size: 13px; letter-spacing: .16em; color: var(--text-accent); }
.not-found figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); }
.not-found figure img { width: 100%; height: 100%; object-fit: cover; }

.visitband__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); }
.visitband__photo img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .catalog-hero__inner, .detail-hero__inner, .voucher-hero__grid, .not-found__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .catalog-hero--editorial .catalog-hero__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; }
  .catalog-related__inner, .detail-context__grid, .voucher-how__grid, .about-team__head { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .legal__grid { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .legal__aside { position: sticky; top: calc(var(--announce-h) + 112px); }
  .legal__aside nav { flex-direction: column; gap: 0; }
}

@media (max-width: 767px) {
  .catalog-index__action { grid-column: 1; grid-row: 3; }
  .catalog-index__arrow { grid-row: 1 / span 2; }
  .catalog-group__heading { align-items: flex-end; }
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; width: 100%; }
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .price-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 18px 0; }
  .price-table th, .price-table td { padding: 0; }
  .price-table tbody th { grid-column: 1 / -1; font-size: 16px; }
  .price-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-accent); }
  .price-table__action { grid-column: 1 / -1; text-align: left !important; }
  .price-table__action a { justify-content: flex-start; }
  .about-team__preview { grid-template-columns: repeat(2, 1fr); }
  .about-team__preview figure:last-child { display: none; }
}

@media (max-width: 390px) {
  .catalog-group__heading { display: grid; }
  .catalog-group__heading p { white-space: normal; }
  .about-team__preview { grid-template-columns: 1fr; }
  .about-team__preview figure:nth-child(2) { display: none; }
  .cactions__card[href^="mailto:"] .cactions__value { font-size: 14px; overflow-wrap: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-index__arrow, .price-table__service-link svg { transition: none; }
}

/* --- Reduced prices -------------------------------------------------------
   A struck original beside the price now charged. Used for the permanent
   laser reduction and for the month's offers. --text-secondary, not
   --text-muted: this is small text and has to clear 4.5:1. */
.price-table__was {
  margin-right: 6px;
  color: var(--text-secondary);
  font-weight: 400;
  text-decoration-thickness: 1px;
}
.price-table__note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* --- Offers inside the homepage popup -------------------------------------
   The client's review said the offers were hard to find; this is the fix.
   A glanceable list, not a second price table. */
.popup__dialog--offers { width: min(500px, 100%); }
.popup-offers {
  width: 100%;
  margin: 2px 0 4px;
  padding: 0;
  list-style: none;
  text-align: left;
  border-top: 1px solid var(--surface-deep);
}
.popup-offer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-deep);
}
.popup-offer__name {
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-primary);
}
.popup-offer__note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}
.popup-offer__price {
  flex: 0 0 auto;
  font-size: 14px;
  white-space: nowrap;
  color: var(--text-primary);
}
.popup-offer__price s {
  margin-right: 5px;
  color: var(--text-secondary);
  text-decoration-thickness: 1px;
}
.popup__phone {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text-link);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.popup__phone:hover { color: var(--text-link-hover); }

@media (max-width: 390px) {
  .popup-offer { flex-direction: column; gap: 2px; }
  .popup-offer__price { font-weight: 600; }
}

/* --- Before and after ------------------------------------------------------
   Two images, deliberately. They are 640x800 source graphics, so they are
   capped rather than stretched — an upscale would show. */
.results__grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.results__item {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.results__item img {
  display: block;
  width: 100%;
  height: auto;
}
.results__caption {
  margin: 0;
  padding: 14px 18px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text-secondary);
}

@media (min-width: 700px) {
  .results__grid { grid-template-columns: repeat(2, 1fr); }
}



/* ---------------------------------------------------------------
   Customer reviews (homepage).

   Quotes are short and uneven — two words to three lines — so the grid
   is `align-items: start`: stretched cards would make a six-word review
   sit in a tall box of nothing. No card fill, no border, no quote-mark
   glyph, no star icons. The bisque rule at the top of each is the only
   ornament, and it is a hairline, which is the one job bisque has.
   --------------------------------------------------------------- */
.reviews__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  align-items: start;
}
.review { padding-top: 20px; border-top: 1px solid var(--border-default); }
.review__quote {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.62;
  color: var(--text-primary);
}
.review__cite {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@media (min-width: 700px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
}

/* === END PHASE 2C COMPLETE-SITE STYLES === */