/* ─────────────────────────────────────────────
   Be Website — styles.css
   ───────────────────────────────────────────── */

:root {
  --color-gold:       #B89112;
  --color-forest:     #1E2E29;
  --color-blush:      #F6DFD6;
  --color-cream:      #FFFEF6;
  --color-white:      #FFFFFF;
  --color-page-base:  #FFFEFF;

  --font-primary:     "Afacad Flux", sans-serif;
  --radius-card:          24px;
  --radius-button-header: 8px;
  --radius-button-pill:   64px;

  /* Sticky header is 80px tall at every breakpoint. Exposed as a var so
     content panels below it can re-anchor their vertical centring to
     the visible area underneath. */
  --hero-header-height:   80px;
  /* weight scale
     400 — body text, default UI
     500 — subheadings, labels
     600 — section headings
     700 — hero display text, primary CTAs */
}

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

body {
  font-family: var(--font-primary);
  font-weight: 300;
  color: #411900;
}

/* ─── PERMANENT H1: Universal heading — Services & Nantucket ─── */
.services-heading,
.location-heading {
  font-family: var(--font-primary);
  font-size: 48px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4em !important;
  color: #411900;
  opacity: 0.95;
}

/* ─── PERMANENT H3: Body text ─── */
.location-card p {
  font-family: var(--font-primary);
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #411900;
}

.location-card a {
  display: inline-block;
  transition: transform 0.2s ease;
}

.location-card a:hover {
  transform: scale(1.08);
}

/* ─── Accordion item text — matches .sp-service-title ─── */
.accordion-item span {
  font-family: var(--font-primary);
  font-size: 24px !important;
  font-weight: 500;
  color: #411900;
  line-height: 1.3;
  letter-spacing: 4px;
  opacity: 0.95;
}

/* ─── Button text — desktop (lg + base) only. ≤430px override: 14px !important ─── */
.btn-view-services,
.btn-view,
.btn-book {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 4px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #F6DFD6;
}

#homepage {
  position: relative;
  width: 100%;
  height: 100%;
}


/* ─── Sticky Header ──────────────────────────── */

/* Phase 5: #sticky-header is a viewport-level sibling of sections under #homepage.
   position: fixed anchors it to viewport top regardless of which section is active.
   Base opacity:0 + pointer-events:none keep it hidden on Hero; Phase A of the mobile
   forward timeline (0.25s power2.out) fades it in to opacity 1 before Location's slide
   begins. .is-visible toggles pointer-events:auto for interactivity. */
#sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 48px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  background: #B89112;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: none;
}

#sticky-header.is-visible {
  pointer-events: auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo {
  height: 48px;
  width: auto;
}

.header-actions {
  /* position: relative makes this the containing block for the absolute
     .menu-dropdown inside. With justify-content: space-between on
     #sticky-header, .header-actions pins to the header's content-right
     edge — so a dropdown at `right: 0` anchors to the close button's
     right edge regardless of header padding at each breakpoint. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-header {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 4px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}

.btn-header--services {
  background: #FFFFFF;
  color: #B89112;
  border: none;
}

.btn-header--about {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.btn-menu {
  display: none;
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0;
}


/* ─── Section base (fixed overlay stack) ─────── */

section {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100vh;
}


/* ─── Hero ───────────────────────────────────── */

#section-hero {
  z-index: 40;
  overflow: hidden;
  bottom: auto;
  height: 100dvh;
  min-height: 100dvh;
  will-change: opacity, transform;
}

.bck-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(471px, 80%);
  z-index: 2;
}

/* ─── PERMANENT: bar must be flush to bottom — do not add padding/margin ─── */
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  overflow: hidden;
  z-index: 3;
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
}

.bar img {
  position: absolute;
  bottom: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: max(1460px, 103%);
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}


/* ─── Location ───────────────────────────────── */

#section-location {
  z-index: 30;
  background: #FFFEF6;
  bottom: auto;
  height: 100dvh;
  min-height: 100dvh;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.location-inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe center` centres content in the below-header area when it
     fits, and falls back to flex-start alignment when content exceeds
     `viewport − padding-top`. Without `safe`, plain `center` lets
     overflow spill equally in BOTH directions — pushing the pin icon
     up behind the sticky header on short viewports (the ≤430 "mobile
     no top padding" symptom). With `safe`, padding-top becomes a hard
     floor: pin is pinned at y=80 (below header) whenever content
     overflows, and extra length spills only at the bottom. */
  justify-content: safe center;
  text-align: center;
  gap: 64px;
  /* Asymmetric padding-top = --hero-header-height, padding-bottom = 0
     shifts the flex-centered content into the below-header area. With
     `justify-content: safe center` the content centre sits at
     (header + (V - header) / 2) when it fits — midpoint of the visible
     area below the fixed sticky header rather than midpoint of the
     full viewport. Same technique applies at every breakpoint (the
     override blocks only adjust gap/horizontal padding). */
  padding-top: var(--hero-header-height);
  padding-bottom: 0;
  padding-left: 48px;
  padding-right: 48px;
}

.location-well {
  max-width: 680px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: visible;
}

#section-location.is-active {
  pointer-events: auto;
}

.location-pin {
  position: relative;
  z-index: 110;
  width: 32px;
  height: auto;
  margin-top: 4px;
  margin-bottom: 8px;
}

.location-heading {
  font-weight: 700;
  color: #411900;
  white-space: nowrap;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}

.location-subheading {
  font-size: 40px !important;
  font-weight: 400 !important;
  letter-spacing: 6px !important;
  color: #5E3A3D;
  line-height: 1.2;
  opacity: 0.95;
  max-width: 680px;
  text-align: center;
  margin-bottom: 8px;
}

.location-address {
  font-size: 24px;
  color: var(--color-gold);
  text-align: center;
  margin-bottom: 0;
  text-decoration: none;
  display: block;
  line-height: 1;
}

.address-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.location-cards {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: 680px;
}

.location-card {
  flex: 1;
  background-color: #FFFEF6;
  border: 1px solid #B89112;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
  min-height: 204px;
  box-sizing: border-box;
}

/* Card-title base weight lowered 600 → 500 → 400 across 2026-04-24 sessions
   via explicit overrides of the prior PERMANENT comment and RULES.md § 9.
   400 matches .btn-header base weight exactly (original intent). Size / color
   / letter-spacing / text-align / font-family / opacity remain locked. No
   per-breakpoint weight overrides remain; ≤430 retains only the 20px size
   override (scoped to #section-location / #services-popup). */
.card-title {
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #B89112 !important;
  text-align: center !important;
  font-family: var(--font-primary) !important;
  letter-spacing: 4px;
  opacity: 0.95;
}

.location-card p {
  font-weight: 400;
  color: #411900;
  text-align: center;
  line-height: 1.35;
  font-family: var(--font-primary);
}

.card-link {
  font-size: 16px;
  color: rgba(65, 25, 0, 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--font-primary);
  display: inline-block;
  transition: transform 0.2s ease;
}

a[href^="tel"],
a[href^="mailto"] {
  color: #411900;
  text-decoration: none;
}

.card-link:hover,
.accordion-link:hover,
.learn-more-mobile:hover {
  transform: scale(1.08);
}

.btn-view {
  width: 145px;
  height: auto;
  cursor: pointer;
  display: block;
  margin-top: 8px;
}

.scroll-chevron-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
}

/* Hero chevron — base rules apply at all breakpoints > 430; ≤430 override
   inside @media below. Position pins to the bottom of the hero (over the
   visible gold of the bar). GSAP drives the path fill animation; see
   js/main.js near the hero-chevron wiring. */
.scroll-chevron-btn--hero {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 50px;
  align-items: center;
  justify-content: center;
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease-out;
  cursor: pointer;
}
.scroll-chevron-btn--hero.is-scrolling {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in;
}
.scroll-chevron {
  /* SVG is 2:3 aspect with viewBox 24×36 — every scaled size is on the
     4-grid (both W and H multiples of 4). Default / >768 renders at
     24×36 (natural SVG size); ≤768 overrides to 16×24. */
  width: 24px;
  height: 36px;
  display: block;
  opacity: 1;
}
.scroll-chevron-btn--hero .scroll-chevron path {
  fill: #411900;
}
.scroll-chevron-btn--hero .scroll-chevron path:nth-child(1) {
  fill-opacity: 0.25;
}
.scroll-chevron-btn--hero .scroll-chevron path:nth-child(2) {
  fill-opacity: 0.5;
}
.scroll-chevron-btn--hero .scroll-chevron path:nth-child(3) {
  fill-opacity: 0.75;
}

/* Hero chevron color wash is now GSAP-driven (see js/main.js near the
   hero-chevron wiring). CSS previously had @keyframes here but
   keyframes-based color oscillation kept producing segmented/jerky
   renders across iterations; handing the tween to GSAP gave access to
   RAF-driven rendering and smoother ease curves. Static rest state
   (brown) is set on the path rule below; GSAP tweens from that. */



/* ─── Services ───────────────────────────────── */

#section-services {
  z-index: 20;
  background: var(--color-blush);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: safe center;
  /* Below-header centring: padding-top = --hero-header-height,
     padding-bottom = 0, justify-content: safe center. Same pattern as
     #section-location, but applied to the section itself because
     Services uses the section (not an inner wrapper) as its flex
     container. Horizontal 48px preserved at this breakpoint; ≤430
     override below substitutes 16px. */
  justify-content: safe center;
  padding: var(--hero-header-height) 48px 0;
  overflow-y: hidden;
  will-change: opacity, transform;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

#section-services.is-active {
  pointer-events: auto;
}

.services-content {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.services-heading {
  font-weight: 700;
  color: #411900;
  letter-spacing: 0.4em;
  text-align: left;
  margin-bottom: 8px;
  white-space: nowrap;
}

.services-intro {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 400;
  color: #411900;
  text-align: left;
  margin-bottom: 32px;
  line-height: 1.5;
  letter-spacing: 0;
}

.services-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

.accordion-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 48px;
}

.accordion-label {
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: 400;
  color: #411900;
  letter-spacing: 4px;
  margin-bottom: 8px;
  opacity: 0.95;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.accordion-label-title {
  white-space: nowrap;
}

.accordion-label .accordion-label-note {
  font-weight: 300;
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
}

.accordion-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 680px;
  cursor: pointer;
}

.accordion-label-row .accordion-label {
  margin-bottom: 0;
}

.accordion-list {
  list-style: disc;
  padding-left: 24px;
  margin: 16px 0 0 0;
  max-width: 640px;
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 300;
  color: #411900;
  line-height: 1.5;
  text-align: left;
}

.accordion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  max-width: 640px;
  font-size: 24px;
  font-weight: 400;
  color: #411900;
  cursor: pointer;
}

.icon-plus {
  position: absolute;
  top: 0;
  right: -10%;
  bottom: -20%;
  left: -10%;
  width: 120%;
  height: auto;
  display: block;
  max-width: none;
  cursor: pointer;
}

.accordion-body {
  font-size: 24px;
  font-weight: 400;
  color: #411900;
  line-height: 1.5;
  text-align: left;
  margin-top: 8px;
  max-width: 640px;
}

#section-services .accordion-body {
  font-weight: 300;
}

/* Sub-item descriptions — matches .sp-service-desc (16px) */
.accordion-item + .accordion-body {
  font-size: 20px;
  margin-top: 4px;
  padding: 0 0 16px 0;
  text-align: left;
}

.accordion-link {
  color: #411900;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  transition: transform 0.2s ease;
}

/* ─── PERMANENT: View services button ─── */
.learn-more-mobile {
  display: none;
  font-family: var(--font-primary);
  font-weight: 500;
  color: #411900;
  text-decoration: none;
  transition: transform 0.2s ease;
  align-items: center;
  gap: 8px;
}

.services-cta-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
}

.btn-view-services {
  color: #411900;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 64px;
  padding: 8px 16px;
  cursor: pointer;
  text-align: center;
  display: block;
}

.btn-book {
  color: #FFFEF6;
  background-color: var(--color-gold);
  border: none;
  border-radius: 64px;
  padding: 8px 16px;
  cursor: pointer;
  text-align: center;
  display: block;
}


/* ─── Footer ─────────────────────────────────── */

#section-footer {
  position: relative;
  z-index: 10;
  background: var(--color-gold);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px 48px;
  padding-top: 64px;
  padding-bottom: 64px;
  min-height: 100dvh;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

#section-footer.is-active {
  pointer-events: auto;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1440px;
  width: 100%;
  padding: 0 48px;
  margin: 0 auto;
  align-items: start;
  margin-bottom: 48px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-col-label {
  font-size: 20px;
  font-weight: 700 !important;
  color: #411900;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.footer-col p,
.footer-col a {
  font-size: 16px;
  font-weight: 400;
  color: #411900;
  line-height: 1.6;
}

.footer-col:last-child {
  width: 100%;
}

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

.footer-faq-list li {
  font-size: 16px;
  color: #411900;
  line-height: 1.8;
}

.footer-col a,
.about-footer-col a,
.sp-footer-col a,
#footer-our-team,
.about-footer-our-team,
.footer-book-link {
  display: inline-block;
  transition: transform 0.2s ease;
}

.footer-col a:hover,
.about-footer-col a:hover,
.sp-footer-col a:hover,
#footer-our-team:hover,
.about-footer-our-team:hover,
.footer-book-link:hover {
  transform: scale(1.08);
  cursor: pointer;
}

.faq-item { list-style: none; width: 100%; }

.faq-btn {
  width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1.8;
}

.faq-label {
  font-size: 16px;
  color: #411900;
  font-family: var(--font-primary);
  font-weight: 300;
  text-align: left;
  display: inline-block;
  transition: color 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-btn::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(65, 25, 0, 0.75);
  flex-shrink: 0;
  align-self: center;
}

.faq-btn:hover::after, .faq-item.is-open .faq-btn::after { display: none; }

.faq-icon {
  display: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: rgba(65, 25, 0, 0.5);
  position: relative;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: -10px;
  transition: background 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-btn:hover .faq-icon {
  display: flex;
}

.faq-item.is-open .faq-icon {
  display: flex;
  background: #F6DFD6;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  min-width: 16px;
}

.faq-item.is-open .faq-icon::before {
  content: '×';
  color: #411900;
  font-size: 14px;
  font-weight: 400;
  position: static;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  line-height: 1;
}

.faq-item.is-open .faq-icon::after {
  display: none;
}

.faq-icon::before {
  content: '';
  position: absolute;
  display: block;
  width: 8px;
  height: 1.13px;
  background: #F6DFD6;
  border-radius: 1px;
}

.faq-icon::after {
  content: '';
  position: absolute;
  width: 1.13px;
  height: 8px;
  background: #F6DFD6;
  border-radius: 1px;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer {
  position: absolute;
  z-index: 10;
  max-width: 200px;
  padding: 8px 16px 8px 8px;
  font-size: 14px;
  font-weight: 300;
  color: #F6DFD6;
  font-family: var(--font-primary);
  line-height: 1.5;
  background: rgba(65, 25, 0, 0.75);
  box-shadow: inset 0 0 4px #F6DFD6;
  border-radius: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 600ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer p { color: #F6DFD6 !important; }
.faq-answer ul { list-style: disc; padding-left: 16px; margin-top: 4px; }
.faq-answer li { color: #F6DFD6; font-size: 14px; line-height: 1.6; }
.faq-item--contact .faq-answer a[href^="tel"],
.faq-item--contact .faq-answer a[href^="mailto"] {
  color: #F6DFD6;
  font-weight: 300;
}
.faq-item.is-open .faq-answer { max-height: 300px; opacity: 1; }

.footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid #FFFEF6;
  padding-top: 24px;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-bottom p {
  font-size: 12px;
  color: #FFFEF6;
  font-family: var(--font-primary);
}

.footer-bar-logo {
  height: 48px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(200%) hue-rotate(10deg) brightness(103%) contrast(100%);
}

.footer-bar-copy {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 300;
  color: #FFFEF6;
  margin-bottom: 3px;
}

/* ─── Homepage — Responsive Typography (override) ── */
/* User-confirmed override of committed sizes at sm + xs only */
/* ─── 768px LOCKED TYPE SCALE — DO NOT MODIFY WITHOUT EXPLICIT INSTRUCTION ───
   H1:          .services-heading / .location-heading     28px / 700
   H2:          .accordion-label / .card-title            40px / 400
   Sub-items:   .accordion-item span                      18px / 500  !important
   Subheading:  .location-subheading                      18px / 400  letter-spacing: 4px
   Body:        .services-intro / .location-card p   16px / 400
   Links:       .card-link                                16px
   Buttons:     .btn-view-services / .btn-header          14px
   Exceptions:  .location-card p stays 16px (no-wrap), btn-header 14px intentional
─────────────────────────────────────────────────────────────────────────────── */

.menu-dropdown {
  display: none;
}

@media (max-width: 768px) {
  .menu-dropdown {
    display: none;
    position: absolute;
    top: 64px;
    right: 0;
    width: 120px;
    background: #F6DFD6;
    border-radius: 8px;
    padding: 4px;
    gap: 8px;
    flex-direction: column;
    overflow: visible;
    z-index: 300;
    box-shadow: inset 0 0 4px rgba(65, 25, 0, 0.25);
  }

  .menu-dropdown.is-open {
    display: flex;
  }

  .btn-menu-item {
    width: 100%;
    height: 37px;
    border-radius: 8px;
    background: #411900;
    color: #FFFEF6;
    font-size: 16px;
    letter-spacing: 4px;
    border: none;
    cursor: pointer;
  }

  .btn-menu-item--alt {
    background: transparent;
    color: #411900;
    border: 0.75px solid #411900;
    border-radius: 7.5px;
    height: 36px;
  }

  .location-heading,
  .services-heading {
    font-size: 40px !important;
    font-weight: 700 !important;
  }

  .location-heading {
    letter-spacing: 0.15em !important;
  }

  .location-subheading {
    font-size: 32px !important;
    font-weight: 400 !important;
    letter-spacing: 4px !important;
  }

  /* Section padding (top/bottom) inherits from base — below-header
     anchor applied uniformly at every breakpoint. No ≤768 override
     needed anymore (the old 96px padding-top was pre-anchor). */

  .services-heading {
    margin-bottom: 0;
  }

  .services-intro {
    margin-bottom: 0;
  }

  .services-accordion {
    margin-top: 0;
    gap: 48px;
  }

  .services-content {
    gap: 48px;
    min-height: calc(100vh - var(--hero-header-height));
    justify-content: safe center;
  }

  .accordion-group {
    margin-bottom: 0;
    margin-top: 0;
  }

  .services-cta-row {
    gap: 16px;
    margin-top: 48px;
  }

  .btn-view-services {
    padding: 9px 12px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }

  .btn-book {
    padding: 9px 12px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }

  .accordion-item {
    font-size: 18px;
    padding: 1px 0 2px 0;
  }

  .accordion-item span {
    font-weight: 400;
  }

  .accordion-item + .accordion-body {
    margin-top: 0;
    padding-top: 2px;
    padding-bottom: 12px;
  }

  .accordion-list {
    font-size: 18px;
    font-weight: 400;
    margin-top: 8px;
  }

  .services-intro {
    font-size: 20px;
  }

  .accordion-item span {
    font-size: 18px !important;
  }

  .accordion-body {
    font-size: 18px;
  }

  .location-card p {
    font-size: 18px !important;
    font-weight: 400 !important;
  }

  .card-link {
    font-size: 20px;
  }

  .location-address {
    font-weight: 300;
  }

  .header-logo {
    height: 40px;
  }

  .btn-menu  { display: flex; }
  .btn-header { display: none; }

  .btn-menu-icon {
    display: none;
  }

  .btn-menu-icon--open {
    display: block;
  }

  .btn-menu.is-open .btn-menu-icon--open {
    display: none;
  }

  .btn-menu.is-open .btn-menu-icon--close {
    display: block;
  }

  /* Vertical padding inherits from base (--hero-header-height top, 0 bottom);
     only the gap is overridden here. See RULES.md "Location Panel —
     ≤768px Vertical Spacing" for background, now amended: the 24/24
     symmetric padding that rule described produced full-viewport
     centring and clipped the pin behind the sticky header. Base rule
     anchors to the below-header area at every breakpoint. */
  .location-inner {
    gap: 24px;
  }

  /* Hero chevron at ≤768 (and ≤430 by cascade): 16×24.
     Padding in 50px button = (50-24)/2 = 13px each side. */
  .scroll-chevron {
    width: 16px;
    height: 24px;
  }

  .location-cards {
    flex-direction: column;
    gap: 12px;
    /* Width matches address line. Retuned 344→412 after address font-size reverted to base 24px (was 20px at ≤768). Scale: 344 × (24/20) = 412.8 → 412 (4px grid). See RULES.md "Location Panel — ≤768px Card Width". */
    max-width: min(412px, 100%);
  }

  .location-card {
    padding: 16px 24px;
    width: 100%;
    box-sizing: border-box;
  }

  /* ─── Mobile touch panel slide system ──────────
     Activated when JS adds body.touch-device (pointer:coarse match at
     load, or touchstart fallback). Drives the class-toggle translate
     that mobileForward / mobileBack apply at the Location↔Services
     and Services↔Footer steps. Wheel-based nav can still engage the
     GSAP opacity paths in the wheel handler — this block does not
     conflict with those.

     Hero is deliberately excluded from opacity: 1 !important so its
     default opacity + children's GSAP opacity fades remain intact.

     Architecture C: Hero↔Location across the touch regime is
     GSAP-owned (mobileHeroToLocation / mobileLocationToHero). The
     CSS transform transition on #section-hero was removed so hero
     class toggles snap instantly under the unified GSAP timeline.
     Location retains its base transition for the Location↔Services
     out-of-scope path; GSAP disables it via inline
     style.transition='none' during Hero↔Location tweens only.

     Scope note: these rules previously lived inside @media (max-width:
     430px). At 431–768 with touch-device active (real iPad portrait,
     DevTools touch emulation), mobileForward/mobileBack class-toggles
     produced no visual change — Location↔Services and Services↔Footer
     reads as "skipped." Moved into the ≤768 block so the class-toggle
     path is functional across the full touch regime. */

  body.touch-device #section-location,
  body.touch-device #section-services,
  body.touch-device #section-footer {
    opacity: 1 !important;
    transform: translateY(100%);
  }

  body.touch-device #section-hero.panel-active,
  body.touch-device #section-location.panel-active,
  body.touch-device #section-services.panel-active,
  body.touch-device #section-footer.panel-active {
    transform: translateY(0);
  }

  body.touch-device #section-hero.panel-above,
  body.touch-device #section-location.panel-above,
  body.touch-device #section-services.panel-above {
    transform: translateY(-100%);
  }

  /* Defensive: when Footer is the active panel, force Location
     opacity to 0 so its content cannot bleed over the footer area
     regardless of inline/JS state. Covers both touch-device opacity:1
     CSS and any stale inline opacity left by prior transitions. */
  body:has(#section-footer.is-active) #section-location {
    opacity: 0 !important;
  }

}

@media (max-width: 430px) {
  .header-logo {
    height: 40px;
  }

  .location-heading {
    font-size: 20px !important;
    letter-spacing: 0.25em !important;
  }

  .services-heading {
    font-size: 24px !important;
  }

  .location-subheading {
    font-size: 20px !important;
  }

  #section-location .card-title {
    font-size: 20px !important;
  }

  #section-location .location-card p {
    font-size: 16px !important;
  }

  /* ≤430: horizontal padding 16px; vertical uses the below-header offset
     from base (--hero-header-height top, 0 bottom). Fixed 24px gap
     between well and cards. justify-content: center already inherited
     from base — the shorter content block re-centres in the below-
     header area automatically. */
  .location-inner {
    padding-left: 16px;
    padding-right: 16px;
    gap: 24px;
  }

  .location-pin {
    margin-top: 0;
  }

  .location-well {
    max-width: 100%;
    flex: 0 1 auto;
    margin: 0;
    padding-top: 16px;
  }

  #section-services {
    min-height: auto;
    display: flex;
    flex-direction: column;
    /* Below-header anchor matches base; only horizontal padding
       changes to 16px at ≤430. justify-content: safe center already
       inherited from base. */
    padding: var(--hero-header-height) 16px 0;
    box-sizing: border-box;
  }

  .services-heading {
    margin-top: 0 !important;
    margin-bottom: 12px;
  }

  .services-intro {
    margin-bottom: 44px;
    text-align: left;
  }

  .accordion-body {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.5;
    text-align: left;
  }

  .accordion-body {
    list-style: none;
    list-style-position: inside;
    padding-left: 16px !important;
    margin: 0 !important;
    text-indent: -16px;
  }

  .accordion-body li {
    padding: 0 !important;
    margin: 0 !important;
  }

  ul.accordion-body li {
    text-indent: 0 !important;
  }

  .accordion-item + .accordion-body {
    font-size: 16px;
  }

  p.accordion-body {
    padding-left: 0 !important;
    text-indent: 0;
  }

  .services-content {
    max-width: 100%;
    gap: 4px;
    padding: 0;
    text-align: left;
  }

  .services-content * {
    text-align: left !important;
  }

  .accordion-group {
    margin-bottom: 8px;
  }

  /* ≤430 — match .accordion-label to .sp-section-label-title.
     Font-size dropped 32 → 28 (override RULES.md § 11 per Shoon 2026-04-24). */
  .accordion-label {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 2px;
  }

  /* Pin .sp-book-btn right edge to the container's right padding (16px from
     viewport) regardless of title width. Base .accordion-label-row has
     max-width: 680 but no width: 100%, so the row shrinks to content-size
     and the button drifts per group. Popup's .sp-section-label-row already
     has width: 100% at base — this brings homepage to parity at ≤430. */
  .accordion-label-row {
    width: 100%;
  }

  .services-cta-row {
    gap: 16px;
    margin-top: 24px;
  }

  .btn-view-services {
    display: block;
    background: rgba(255, 255, 255, 0.5);
    color: #411900;
    font-size: 14px !important;
    font-weight: 400;
    font-family: "Afacad Flux", sans-serif;
    border: none;
    border-radius: 64px;
    padding: 10px 12px;
  }

  .btn-book {
    display: block;
    background: var(--color-gold);
    color: #FFFEF6;
    font-size: 14px !important;
    font-weight: 400;
    font-family: "Afacad Flux", sans-serif;
    border: none;
    border-radius: 64px;
    padding: 10px 12px;
  }

  .learn-more-mobile {
    display: none;
  }

  .learn-more-mobile img {
    width: 14px;
    height: 11px;
  }

  .location-pin {
    width: 26px;
    margin-top: 0;
  }

  .location-card {
    padding: 24px;
    min-height: 216px;
  }

  #section-location .location-cards {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Hero chevron at ≤430 inherits the 16×24 size from the ≤768 rule.
     No ≤430 override needed — removed to keep the cascade clean. */

  .header-logo {
    display: block;
    height: 40px;
  }

  .location-address {
    font-size: 20px;
    margin-bottom: 0;
    line-height: 1.5;
  }

  #sticky-header {
    padding: 0 16px;
    position: fixed;
  }

  .btn-header {
    height: 32px;
    font-size: 14px;
    padding: 0 8px;
  }

  .menu-dropdown {
    display: none;
    position: absolute;
    top: 64px;
    right: 0;
    width: fit-content;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    z-index: 300;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 4px rgba(65, 25, 0, 0.25);
  }

  .menu-dropdown.is-open {
    display: flex;
  }

  .btn-menu-item {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    white-space: nowrap;
    background: #411900;
    color: #FFFEF6;
    font-family: "Afacad Flux", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 4px;
    border: none;
    cursor: pointer;
    text-align: center;
  }

  .btn-menu-item--alt {
    background: transparent;
    color: #411900;
    border: 1px solid #411900;
    padding-inline: 4px;
  }

  .btn-menu-icon {
    display: none;
  }

  .btn-menu-icon--open {
    display: block;
  }

  .btn-menu.is-open .btn-menu-icon--open {
    display: none;
  }

  .btn-menu.is-open .btn-menu-icon--close {
    display: block;
  }

}


/* ─── Footer — Responsive ────────────────────── */

@media (max-width: 1024px) {
  #sticky-header {
    padding: 0 24px;
  }

  #section-footer {
    padding: 64px 24px;
  }

  .footer-columns {
    padding: 0;
    gap: 16px;
  }

}

@media (max-width: 768px) {
  #sticky-header {
    padding: 0 48px;
  }

  #section-footer {
    padding: 64px 48px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: 32px;
    row-gap: 40px;
    margin-bottom: 32px;
  }

  .footer-col:last-child {
    width: 100%;
  }

  .footer-faq-list {
    width: 100%;
  }

  .footer-col-label {
    font-weight: 500 !important;
  }

  .footer-bar-copy {
    font-size: 16px;
  }

}

@media (max-width: 430px) {
  #sticky-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  #section-footer {
    position: fixed;
    bottom: auto;
    padding: 24px 16px;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    gap: 40px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    row-gap: 40px;
    margin-bottom: 0;
    flex: 0 1 auto;
    min-height: 0;
  }

  .footer-col {
    gap: 8px;
  }

  .footer-col-label {
    font-size: 18px;
    font-weight: 500 !important;
    margin-bottom: 0;
    letter-spacing: normal;
  }

  .footer-faq-list {
    width: 100%;
  }

  .footer-bottom {
    flex-shrink: 0;
    border-top: 1px solid #FFFEF6;
    padding-top: 24px;
  }

  .footer-bar-logo {
    height: 40px;
  }

  .footer-bar-copy {
    font-size: 14px;
    color: #FFFEF6;
    margin-bottom: 0;
  }
}


/* ═══════════════════════════════════════════════
   ABOUT POPUP
   ═══════════════════════════════════════════════ */

#about-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  overflow: visible;
}

#about-popup.is-open {
  pointer-events: auto;
}

/* Close button — inside the header, scrolls with content */
.about-close {
  position: fixed;
  right: 48px;
  top: 24px;
  z-index: 210;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-close svg {
  width: 30px;
  height: 30px;
  display: block;
}

/* Scrollable content layer */
.about-popup-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
}


/* ─── About — Header ─────────────────────────── */

.about-section-header {
  height: 100px;
  overflow: hidden;
  background: #F6DFD6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 64px;
  position: relative;
}

.about-title-group {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.about-header-logo {
  height: 48px;
  width: auto;
  display: block;
  position: relative;
  top: -6px;
  filter: brightness(0) saturate(100%) invert(13%) sepia(50%) saturate(800%) hue-rotate(340deg) brightness(90%) contrast(110%);
}

.about-title {
  font-family: var(--font-primary);
  font-size: 60px;
  font-weight: 500;
  color: #411900;
  letter-spacing: 24px;
  line-height: 1;
  opacity: 0.95;
  margin: 0;
  margin-right: -20px;
}


/* ─── About — Hero ───────────────────────────── */

.about-section-hero {
  background: #F6DFD6;
  padding: 48px 64px;
  min-height: 496px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero-well {
  max-width: 1312px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.about-hero-left {
  flex: 1;
  max-width: 632px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

/* #5E3A3D editorial exception — see RULES.md */
.about-intro-text {
  font-family: var(--font-primary);
  font-size: 40px;
  font-weight: 400;
  color: #5E3A3D;
  letter-spacing: 6px;
  line-height: 1;
  opacity: 0.95;
}

.about-founders-text {
  font-family: var(--font-primary);
  font-size: 40px;
  font-weight: 400;
  color: #5E3A3D;
  letter-spacing: 6px;
  line-height: 1;
  opacity: 0.95;
}

.about-founders-block {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-self: flex-start;
}

.about-founders-rule {
  width: 100%;
  border: none;
  border-top: 1px solid #411900;
  margin: 0;
}

.about-hero-right {
  flex-shrink: 0;
}

.about-team-photo {
  width: 400px;
  height: 400px;
  display: block;
}

/* About Popup hero — applies only above 1440 viewport. Aligns the team
   photo's left edge with the Elaine bio card's left edge in the bios row
   below. Geometry: hero and bios share max-width: 1312 with equal horizontal
   centering; bios row is (1312 − 74 gap) / 2 = 619 per card + 74 gap →
   Elaine's left edge at 693. Photo sits at hero-left width (619) + gap (74)
   = 693, matching. Gated at min-width: 1441 so it never cascades into
   ≤1024 / ≤768 / ≤430. */
@media (min-width: 1441px) {
  .about-hero-well {
    justify-content: flex-start;
    gap: 74px;
  }

  .about-hero-left {
    flex: 0 0 619px;
    max-width: 619px;
  }
}

/* About popup hero — left-edge align photo with Elaine bio card.
   Scoped to the side-by-side regime only (≥1025–1440). Below 1025 hero
   is stacked (governed by the (max-width: 1024px) block); above 1440 the
   ≥1441 mechanism applies (separate flex-based alignment). Pushes
   .about-hero-right inward via margin-right while
   `justify-content: space-between` keeps .about-hero-left pinned at
   flex-start. Formula: shift = (well − 874) / 2, where 874 = photo (400)
   + gap (74) + photo (400) — the well width at which photo right edge
   already sits at the Elaine card right edge. At 1440 (well 1312) →
   219px shift, photo left = 693 (matches ≥1441 mechanism; zero visual
   jump at the 1440↔1441 boundary). At 1025 (well 897) → 11.5px shift.
   Plain calc() — formula is positive at every viewport in scope
   (well ≥ 897 > 874); no clamp needed. Scope tightened from
   (min-width: 769px) post-c2eda92 stacking lock in 6ac69cf; max(0px, …)
   safety clamp dropped as mathematically unreachable. Locked in 34de0ba.
   Supersedes the earlier center-alignment test in 5b242ae. */
@media (min-width: 1025px) and (max-width: 1440px) {
  .about-hero-right {
    margin-right: calc((100% - 874px) / 2);
  }
}


/* ─── About — Bios ───────────────────────────── */

.about-section-bios {
  background: #FFFEF6;
  padding: 48px 64px 64px;
  display: flex;
  justify-content: center;
}

.about-bios-well {
  max-width: 1312px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.about-bios-row {
  display: flex;
  flex-wrap: wrap;
  gap: 74px;
}

.about-bio-card {
  flex: 1;
  border: 0.75px solid #F6DFD6;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-bio-name {
  font-family: var(--font-primary);
  font-size: 40px;
  line-height: 53.33px;
  display: flex;
  flex-direction: column;
}

.bio-first {
  font-weight: 300;
  color: #411900;
  letter-spacing: 16px;
}

.bio-last {
  font-weight: 700;
  color: #411900;
  letter-spacing: 16px;
}

/* Bio label exception: 24px/300/gold — not an H2. See RULES.md */
.about-bio-role {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 400;
  color: #B89112;
  line-height: 1.35;
}

.about-bio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.about-bio-img {
  width: 178px;
  height: 178px;
  border-radius: 50%;
  border: 0.75px solid #F6DFD6;
  box-shadow: 0 4px 4px #F6DFD6;
  object-fit: cover;
  flex-shrink: 0;
}

.about-bio-img-clip {
  position: relative;
  overflow: hidden;
  object-fit: initial;
}

.about-bio-img-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}


/* #5E3A3D editorial exception — see RULES.md */
.about-bio-body {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 400;
  color: #5E3A3D;
  letter-spacing: 3.6px;
  line-height: 1.5;
  opacity: 0.95;
}

.about-bio-quote {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 600;
  color: #5E3A3D;
  opacity: 0.95;
  letter-spacing: 6px;
  line-height: 1.45;
}

/* Meet the rest of the team */
.about-meet-team {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0;
}

.about-meet-heading {
  font-family: var(--font-primary);
  font-size: 60px;
  font-weight: 700;
  color: #B89112;
  letter-spacing: 9px;
  line-height: 80px;
  text-align: left;
}

.about-meet-rule {
  width: 810px;
  border: none;
  border-top: 1px solid #B89112;
  margin: 0;
}

.about-bios-row--team .about-bio-card {
  flex: 1;
}


/* ─── About — Footer ─────────────────────────── */

.about-popup-footer {
  background: #B89112;
  padding: 64px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  gap: 0;
}

.about-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1440px;
  width: 100%;
  padding: 0 48px;
  margin: 0 auto;
  align-items: start;
  margin-bottom: 48px;
}

.about-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.about-footer-label {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 500 !important;
  color: #411900;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.about-footer-col p {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  color: #411900;
  line-height: 1.6;
}

.about-footer-our-team {
  cursor: pointer;
}

.about-footer-faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-footer-faq-list li {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 300;
  color: #411900;
  line-height: 1.8;
}

.about-footer-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid #FFFEF6;
  padding-top: 24px;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.about-footer-bar-left {
  display: flex;
  align-items: center;
}

.about-footer-bar-logo {
  height: 48px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(200%) hue-rotate(10deg) brightness(103%) contrast(100%);
}

.about-footer-bar-copy {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 300;
  color: #FFFEF6;
  margin-bottom: 3px;
}


/* ─── About Popup — Responsive Typography ────── */

@media (max-width: 1024px) {
  .about-popup-footer {
    padding: 64px 24px;
  }

  /* About popup hero — stacked (column-reverse, photo above text) at ≤1024.
     Three-state evolution: original side-by-side at ≤768 (forbade stacking)
     → stacked ≤768 in aebb57d (Step 5 accept-conflict override) → stacked
     ≤1024 in c2eda92 (Step 5 accept-conflict, extended boundary up to the
     canonical 1024). Cascades through ≤768 and ≤430 unchanged. ≥1025 keeps
     side-by-side (base + ≥1025–1440 left-edge alignment + ≥1441 mechanism).
     Locked in 34de0ba. */
  .about-hero-well {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 16px;
  }

  .about-hero-left {
    min-width: 0;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .about-hero-right {
    flex: 0 0 auto;
  }

  .about-team-photo {
    width: 100%;
    max-width: 400px;
    height: auto;
    max-height: none;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .about-popup-footer {
    padding: 64px 24px;
  }

  .about-title {
    font-size: 48px;
    font-weight: 500;
    letter-spacing: 20px;
  }

  .about-intro-text,
  .about-founders-text {
    font-size: 24px;
    line-height: 1.45;
  }

  .about-meet-heading {
    font-size: 32px;
    line-height: 1.375;
  }

  .about-bio-body {
    font-size: 20px;
    line-height: 1.45;
  }

  .about-meet-rule {
    width: 100%;
  }

  .about-section-hero {
    padding: 16px 48px 48px;
    min-height: auto;
  }

  .about-section-bios {
    padding-inline: 48px;
  }

  /* Bios section — single column stack */
  .about-bios-row {
    flex-direction: column;
    gap: 48px;
  }

  .about-bios-row--team .about-bio-card {
    flex: none;
    width: 100%;
  }

  /* Founder names — reduce size */
  .about-bio-name {
    font-size: 32px;
    line-height: 1.4;
  }

  .bio-first,
  .bio-last {
    letter-spacing: 8px;
  }

  .about-footer-cols {
    grid-template-columns: 1fr;
    gap: 32px;
    row-gap: 40px;
    margin-bottom: 32px;
  }

  .about-footer-col:last-child {
    width: 100%;
  }

  .about-footer-faq-list {
    width: 100%;
  }

  .about-footer-label {
    font-weight: 500 !important;
  }

  .about-section-header {
    height: 80px;
  }

  .about-header-logo {
    height: 40px;
  }

  .about-close {
    top: 24px;
    width: 24px;
    height: 24px;
  }

  .about-close svg {
    width: 24px;
    height: 24px;
  }

  .about-footer-bar-copy {
    font-size: 16px;
  }
}

@media (max-width: 430px) {
  .about-section-hero,
  .about-section-bios {
    padding-inline: 16px;
  }

  .about-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 80px;
    padding: 0 16px;
  }

  .about-header-logo {
    height: 40px;
  }

  .about-title {
    font-size: 48px;
    font-weight: 500;
    letter-spacing: 20px;
    margin: 0;
    margin-right: -16px;
  }

  .about-intro-text,
  .about-founders-text {
    font-size: 24px;
    line-height: 1.45;
  }

  /* Hero — ≤430 keeps only the small-viewport-specific caps; column-reverse
     and align-items: stretch + .about-hero-right { flex: 0 0 auto } now
     cascade from the ≤768 stacking block (updated 2026-04-28). */
  .about-hero-left {
    max-width: 50dvh;
    margin-left: auto;
    margin-right: auto;
  }

  .about-team-photo {
    max-height: 50dvh;
    object-fit: contain;
  }

  .about-meet-heading {
    font-size: 32px;
    line-height: 1.375;
  }

  .about-bio-quote {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.375;
  }

  /* Founder names */
  .about-bio-name {
    font-size: 32px;
    line-height: 1.4;
  }

  .bio-first,
  .bio-last {
    letter-spacing: 8px;
  }

  .about-bio-img {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
  }

  .about-close {
    position: fixed;
    right: 16px;
    top: 32px;
    width: 24px;
    height: 24px;
  }

  .about-meet-rule {
    width: 100%;
  }

  .about-popup-footer {
    padding: 24px 16px;
    gap: 40px;
    min-height: 100dvh;
  }

  .about-footer-cols {
    grid-template-columns: 1fr;
    row-gap: 40px;
    padding: 0;
    margin-bottom: 0;
  }

  .about-footer-col {
    gap: 8px;
  }

  .about-footer-label {
    font-size: 18px;
    font-weight: 500 !important;
    color: #411900;
    margin-bottom: 0;
  }

  .about-footer-faq-list {
    width: 100%;
  }

  .about-footer-bar {
    padding-top: 24px;
  }

  .about-footer-bar-logo {
    height: 40px;
  }

  .about-footer-bar-copy {
    font-size: 14px;
    color: #FFFEF6;
    margin-bottom: 0;
  }
}

@media (max-width: 390px) {
  .about-header-logo {
    height: 32px;
  }
}


/* ═══════════════════════════════════════════════
   SERVICES POPUP
   ═══════════════════════════════════════════════ */

#services-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

#services-popup.is-open {
  pointer-events: auto;
}

.sp-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: #F6DFD6;
}

/* ─── Close button ─── */
.sp-close {
  position: fixed;
  right: 48px;
  top: 20px;
  z-index: 210;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-close svg {
  width: 30px;
  height: 30px;
  display: block;
}

/* ─── Header ─── */
.sp-header {
  position: relative;
  top: 0;
  z-index: 100;
  height: 80px;
  background: #F6DFD6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 64px;
  transition: opacity 300ms ease;
}

.sp-header-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(184, 145, 18, 0.2) 0,
    rgba(184, 145, 18, 0.2) 0.5px,
    transparent 0.5px,
    transparent 10px
  );
  pointer-events: none;
}

.sp-header-logo {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  height: 48px;
  width: auto;
  z-index: 3;
  filter: brightness(0) saturate(100%) invert(13%) sepia(50%) saturate(800%) hue-rotate(340deg) brightness(90%) contrast(110%);
}

.sp-title {
  font-family: var(--font-primary);
  font-size: 60px;
  font-weight: 500;
  color: #411900;
  letter-spacing: 24px;
  text-indent: 24px;
  line-height: 1;
  opacity: 0.95;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  right: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* ─── Sticky Tabs ─── */
.sp-tabs {
  position: sticky;
  top: 0;
  z-index: 101;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: 40px;
  transition: opacity 300ms ease;
}

.sp-tab {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 3.6px;
  display: inline-flex;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
  opacity: 0.95;
  color: #B89112;
  background: #F6DFD6;
  text-decoration: none;
  border: 2px solid #B89112;
  border-radius: 0;
  padding: 0 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.sp-tab.is-active {
  background: #B89112;
  color: #F6DFD6;
  border: none;
}

/* ─── Sections ─── */
.sp-section {
  background: #F6DFD6;
  padding: 48px 0 0 0;
  scroll-margin-top: 205px;
  width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: visible;
}

.sp-section {
  position: relative;
  inset: auto;
  min-height: 0;
}

.sp-section-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
}

/* ─── Booking note ─── */
.sp-booking-note {
  font-size: 24px;
  font-weight: 300;
  color: #411900;
  line-height: 1.5;
  overflow: visible;
  margin-bottom: 32px;
  max-width: 640px;
}

.sp-link {
  color: #411900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Section label (H2) ─── */
/* LOCKED: expand/close icon always align-items center — do not override */
.sp-section-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
}

#section-skin .sp-section-label-row {
  margin-bottom: 12px;
}

.sp-section-label-row .sp-section-label {
  margin-bottom: 0;
}

.sp-section-label {
  overflow: visible;
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.sp-section-label-title {
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: 400;
  color: #411900;
  letter-spacing: 4px;
  line-height: 40px;
  opacity: 0.95;
  white-space: nowrap;
}

.sp-section-label-note {
  font-size: 24px;
  font-weight: 300;
  color: #5E3A3D;
  line-height: 1;
  overflow: visible;
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Service list & rows ─── */
.sp-service-list {
  display: flex;
  flex-direction: column;
}

.sp-divider {
  border: none;
  border-top: 1px solid rgba(184, 145, 18, 0.4);
  margin: 16px 0;
}

.sp-service-row {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sp-service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.sp-service-list .sp-service-row:first-child {
  border-top: none;
  padding-top: 0;
}

#section-skin .sp-service-list .sp-service-row:last-child {
  border-bottom: none;
}

.sp-service-title {
  font-size: 24px;
  font-weight: 500;
  color: #411900;
  line-height: 40px;
  overflow: visible;
  letter-spacing: 3.6px;
  opacity: 0.95;
  margin-bottom: 4px;
  max-width: 640px;
}

.sp-service-items {
  list-style: disc;
  padding-left: 24px;
  margin: 0;
  max-width: 640px;
}

.sp-service-items li {
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  color: #411900;
}

/* ─── Book button (40×40 circle "–" / "+") ─── */
.sp-book-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 24px;
  background: rgba(255, 254, 246, 0.5);
  border: none;
  color: #411900;
  font-size: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 16px;
  position: relative;
  outline: none;
}

.sp-book-btn:focus-visible {
  outline: 2px solid #B89112;
  outline-offset: 2px;
}

/* Horizontal bar (always visible = minus) */
.sp-book-btn::before {
  content: '';
  display: block;
  width: 10px;
  height: 1.13px;
  background: #411900;
  border-radius: 1px;
}

/* Vertical bar (visible only when collapsed = plus) */
.sp-book-btn::after {
  content: '';
  position: absolute;
  width: 1.13px;
  height: 10px;
  background: #411900;
  border-radius: 1px;
  opacity: 0;
}

.sp-service-row.collapsed .sp-book-btn::after {
  opacity: 1;
}

.sp-book-btn[aria-expanded="false"]::after {
  opacity: 1;
}

/* Small icon variant (24×24, 10px dash) — per Figma node 834:202 */
.sp-book-btn--sm {
  width: 24px;
  height: 24px;
  min-width: 24px;
}

.sp-book-btn--sm::before {
  width: 8px;
}

.sp-book-btn--sm::after {
  height: 8px;
}

/* ─── Skin Treatments section CTA ("Book now") ─────────────
   Mirrors homepage .btn-book at the same visual styling.
   Popup-prefixed defenders at ≤768 / ≤430 live in their
   respective media blocks to beat the L3739–3745 blanket. */
.sp-section-cta-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 48px;
}

.sp-btn-book {
  color: #FFFEF6;
  background: var(--color-gold);
  border: none;
  border-radius: 64px;
  padding: 8px 16px;
  cursor: pointer;
  text-align: center;
  display: block;
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 4px;
}

/* ─── Section 2: Skin Treatments ─── */
.sp-doctor-intro-row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 640px;
  margin-bottom: 8px;
}

.sp-doctor-text {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  order: 1;
}

#section-skin .sp-service-title {
  color: #B89112;
}

.sp-doctor-desc {
  font-size: 24px;
  font-weight: 400;
  color: #411900;
  line-height: 1.5;
}

.sp-doctor-appointments {
  font-size: 24px;
  font-weight: 400;
  color: #411900;
  line-height: 1.5;
  margin-top: 8px;
  margin-bottom: 24px;
}

.sp-doctor-appointments a,
.sp-doctor-appointments .__cf_email__ {
  font-weight: 400;
  color: #411900;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s ease;
}

.sp-doctor-appointments a:hover,
.sp-doctor-appointments .__cf_email__:hover {
  transform: scale(1.08);
}

.sp-doctor-photo {
  flex: 0 0 178px;
  width: 178px;
  height: 178px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #B89112;
  object-fit: cover;
  order: 2;
  align-self: center;
}

.sp-learn-more {
  color: #411900;
  text-decoration: underline;
  font-weight: 400;
  display: inline-block;
  transition: transform 0.2s ease;
}

.sp-learn-more:hover {
  transform: scale(1.08);
}

.sp-show-less {
  color: #411900;
  font-weight: 500;
  text-decoration: underline;
}

.sp-doctor-bio {
  font-size: 24px;
  font-weight: 300;
  color: #411900;
  line-height: 1.5;
  margin-bottom: 48px;
  max-width: 640px;
}

/* Service rows with expanded desc (Skin section) */
.sp-service-desc {
  font-size: 20px;
  font-weight: 300;
  color: #411900;
  line-height: 1.5;
  margin-top: 4px;
  max-width: 640px;
}

.sp-service-subhead {
  font-size: 24px;
  font-weight: 400;
  color: #5E3A3D;
  line-height: 1;
  opacity: 0.95;
  margin-top: 24px;
}

/* ─── Section 3: Artist Pop-ups ─── */
.sp-section--artist {
  padding-top: 48px;
  padding-bottom: 0;
  overflow: hidden;
}

.sp-doc-arrow {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  opacity: 1;
  transition: opacity 300ms ease;
}

.sp-doc-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.sp-doc-arrow svg .arrow-shape {
  transition: fill-opacity 250ms ease;
}

.sp-doc-arrow:hover svg .arrow-shape {
  fill-opacity: 1;
}

.sp-slideshow-wrapper {
  position: relative;
  width: calc(100% - 128px);
  max-width: 1312px;
  margin: 0 auto;
}

#sp-prev {
  position: absolute;
  left: 0;
  bottom: 0;
}

#sp-next {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* Slideshow */
.sp-slideshow {
  position: relative;
  height: 684px;
  overflow: visible;
  background: #411900;
  box-shadow: 0 0 0 1px #411900;
}

.sp-slideshow.is-playing {
  overflow: hidden;
  height: auto;
  aspect-ratio: 16 / 9;
}

.sp-slideshow-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.sp-slideshow-play img {
  opacity: 0.5;
  transition: opacity 300ms ease;
}

.sp-slideshow-play:hover img {
  opacity: 1;
}

.sp-slideshow-pagination {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(65, 25, 0, 0.45);
  border-radius: 999px;
  padding: 8.91px 13.365px;
  display: flex;
  align-items: center;
  gap: 8.91px;
}

.sp-dot {
  width: 2.2px;
  height: 2.2px;
  border-radius: 999px;
  background: #FFFFFF;
  flex-shrink: 0;
  transition: width 300ms ease, height 300ms ease;
  padding: 0;
  border: none;
  cursor: pointer;
}

/* Distance-based dot sizing — set by JS via class */
.sp-dot--d0 { width: 20px;  height: 4.5px; }
.sp-dot--d1 { width: 4.5px; height: 4.5px; }
.sp-dot--d2 { width: 3.3px; height: 3.3px; }
/* d3+ uses base 2.2px × 2.2px */

/* Documentary banner */
.sp-doc-banner {
  width: calc(100% - 128px);
  max-width: 1312px;
  margin: 0 auto;
  background: #411900;
  padding: 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 0 0 1px #411900;
}

.sp-doc-title {
  font-size: 24px;
  font-weight: 500;
  color: #F6DFD6;
  line-height: 1.3;
}

.sp-doc-subtitle {
  font-size: 18px;
  font-weight: 300;
  color: #F6DFD6;
  line-height: 1.5;
}

/* Artist two-column content */
.sp-artist-content {
  width: calc(100% - 128px);
  max-width: 1312px;
  margin: 0 auto;
  background: #F6DFD6;
  padding: 48px 40px;
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.sp-artist-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sp-artist-bio-text {
  font-size: 24px;
  font-weight: 400;
  color: #411900;
  line-height: 1.5;
}

.sp-artist-inline-name {
  font-size: 64px;
  font-weight: 400;
  color: #B89112;
  line-height: 1;
  display: inline;
}

/* Pop-ups card */
.sp-popup-card {
  width: 364px;
  flex-shrink: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #B89112;
  background: #F6DFD6;
}

.sp-popup-card-header {
  background: #B89112;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-popup-card-label {
  font-size: 24px;
  font-weight: 400;
  color: #F6DFD6;
  line-height: 1;
}

.sp-popup-card-icon {
  width: 32px;
  height: 32px;
  opacity: 0.8;
}

.sp-popup-card-body {
  background: #F6DFD6;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sp-popup-card-body ul {
  margin: 0;
}

.sp-popup-card-desc {
  font-size: 24px;
  font-weight: 300;
  color: #411900;
  line-height: 1.5;
  margin: 0;
}

.sp-popup-dates {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-popup-dates li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 300;
}

.sp-popup-dates li::before {
  content: '';
  width: 8.438px;
  height: 8.438px;
  border-radius: 50%;
  background: #411900;
  flex-shrink: 0;
}

.sp-date-label {
  font-size: 24px;
  font-weight: 300;
  color: #411900;
}

/* ─── Shared Cards Row (after each section) ─── */
.sp-cards-row {
  background: #F6DFD6;
  padding: 16px 0 0 0;
  width: 680px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 0;
  overflow: visible;
  display: flex;
  justify-content: space-between;
}

.sp-cards-row .location-card { flex: 1; max-width: 320px; background: transparent; }
.sp-cards-row .location-card:first-child .sp-card-face--front p:nth-child(3) { margin-top: -2px; }
.sp-cards-row .location-card:first-child .sp-card-face--front .card-link { margin-top: -2px; }
.sp-cards-row .location-card:last-child .sp-card-face--front p:nth-child(3) { margin-top: -2px; }

.sp-card-face {
  position: absolute;
  inset: 0;
  padding: 28px 24px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background: inherit;
}

/* ─── Flip-card (Appointments ↔ Cancellation) ───
   3D rotateY flip matching animationnights.com. The outer .location-card is
   stripped of its visual frame (bg, border, overflow clip) so the whole card
   flips as one object — front face carries the cream fill + gold border,
   back face carries the blush fill with no border. Only cards that contain
   .sp-card-inner are affected; the non-flip Opening hours card keeps its
   native frame. */
.location-card:has(> .sp-card-inner) {
  perspective: 1400px;
  background: transparent;
  border: none;
  overflow: visible;
}
.sp-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.45, 0, 0.15, 1);
}
.sp-card-inner > .sp-card-face {
  box-sizing: border-box;
  border-radius: 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sp-card-inner > .sp-card-face--front {
  background: var(--color-cream);
  border: 1px solid var(--color-gold);
}
.sp-card-inner > .sp-card-face--back {
  transform: rotateY(180deg);
  background: var(--color-blush);
}
.location-card.is-flipped .sp-card-inner {
  transform: rotateY(-180deg);
}
/* Services Popup instance: front face reverts to transparent so the popup
   background shows through, matching its pre-flip appearance. Gold border
   still rides on the front face. */
.sp-cards-row .sp-card-inner > .sp-card-face--front {
  background: transparent;
}
/* Popup back face carries the gold stroke so the flipped blush fill is
   visibly delineated from the same-blush .sp-cards-row container.
   Homepage back face (no .sp-cards-row ancestor) keeps its borderless
   base — container cream provides the contrast there. */
.sp-cards-row .sp-card-inner > .sp-card-face--back {
  border: 1px solid var(--color-gold);
}
.sp-cancel-policy { font-size: 18px; font-weight: 300; color: rgba(65, 25, 0, 0.5); line-height: 1.5; }
.location-card .sp-cancel-policy { color: rgba(65, 25, 0, 0.5); }

/* ─── Footer ─── */
.sp-footer {
  background: #B89112;
  padding: 64px 48px;
  width: 100%;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  gap: 0;
}

.sp-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1440px;
  width: 100%;
  padding: 0 48px;
  margin: 0 auto;
  align-items: start;
  margin-bottom: 48px;
}

.sp-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.sp-footer-label {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 700 !important;
  color: #411900;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.sp-footer-col p,
.sp-footer-col a {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 300;
  color: #411900;
  line-height: 1.6;
}

.sp-footer-faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-footer-faq-list li {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 300;
  color: #411900;
  line-height: 1.8;
}

.sp-footer-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid #FFFEF6;
  padding-top: 24px;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.sp-footer-bar-left {
  display: flex;
  align-items: center;
}

.sp-footer-bar-logo {
  height: 48px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(200%) hue-rotate(10deg) brightness(103%) contrast(100%);
}

.sp-footer-bar-copy {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 300;
  color: #FFFEF6;
  margin-bottom: 3px;
}

.sp-service-row.collapsed .sp-service-items,
.sp-service-row.collapsed .sp-service-desc {
  display: none;
}

/* Section-level collapse: hide everything after the title row.
   .sp-section-cta-row exempt so the Skin "Book now" button stays
   visible even when the section is collapsed (mirrors homepage). */
.sp-section-inner.collapsed > *:not(.sp-section-label-row):not(.sp-booking-note):not(.sp-section-cta-row) {
  display: none;
}

.sp-section-inner.collapsed .sp-section-label-row {
  margin-bottom: 0;
}

.sp-section:has(.sp-section-inner.collapsed) {
  padding-bottom: 0;
}

#section-skin:has(.sp-section-inner.collapsed) .sp-cards-row {
  margin-top: 32px;
}

.sp-section-inner.collapsed .sp-section-label-row .sp-book-btn::after {
  opacity: 1;
}

/* ─── Services Popup — ≤1024px overrides ─── */
@media (max-width: 1024px) {
  #sp-prev,
  #sp-next {
    width: 48px;
    height: 48px;
  }

  .sp-header-logo {
    left: 24px;
    height: 48px;
  }

  .sp-title {
    font-size: 60px;
    font-weight: 500;
  }

  .sp-section {
    padding-top: 32px;
  }

  .sp-section-label-row {
    margin-bottom: 20px;
  }

  #section-skin .sp-section-label-row {
    margin-bottom: 20px;
  }

  .sp-service-row {
    padding: 12px 0;
  }

  .sp-service-list .sp-service-row:first-child {
    padding-top: 0;
  }

  .sp-footer {
    padding: 64px 24px;
  }

  .sp-slide-grid img:nth-child(3) {
    display: none;
  }

  .sp-artist-content {
    flex-direction: column;
  }

  .sp-popup-card {
    width: 100%;
  }

  .sp-slideshow-wrapper,
  .sp-doc-banner {
    width: calc(100% - 128px);
    max-width: 1312px;
    margin: 0 auto;
  }
}

/* ─── Services Popup — ≤768px overrides ─── */
@media (max-width: 768px) {
  .sp-header {
    height: 80px;
    position: relative;
  }

  .sp-header-logo {
    display: none;
  }

  .sp-section-label-row {
    margin-bottom: 0;
  }

  #section-color .sp-section-label-row {
    margin-top: 0;
  }

  .sp-section-label-title {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 2px;
  }

  .sp-title {
    font-size: 48px;
    font-weight: 500;
    letter-spacing: 20px;
    text-indent: 20px;
  }

  .sp-doctor-photo {
    transform: scale(0.9);
  }

  .sp-tabs {
    top: 0;
    width: calc(100% - 32px);
    margin: 0 16px;
    padding: 0;
    gap: 8px;
  }

  .sp-tab {
    font-size: 20px;
    letter-spacing: 3.6px;
    padding: 0 20px;
    text-align: center;
    justify-content: center;
  }

  .sp-service-row {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .sp-service-list {
    gap: 48px;
  }

  .sp-service-list > .sp-divider {
    display: none;
  }

  .sp-section-inner > .sp-divider:last-child {
    display: none;
  }

  .sp-book-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .sp-cards-row {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    width: calc(100% - 96px);
    max-width: 672px;
    margin-left: auto;
    margin-right: auto;
    gap: 24px;
    flex-direction: column;
  }

  .sp-cards-row .location-card {
    width: 100%;
    max-width: 100%;
  }

  .sp-section-inner.collapsed {
    margin-bottom: 0;
  }

  .sp-section-inner.collapsed .sp-booking-note {
    margin-bottom: 0;
  }

  #section-color:has(.sp-section-inner:not(.collapsed)) {
    padding-bottom: 32px;
  }

  #section-color:has(.sp-section-inner.collapsed) {
    padding-bottom: 0;
  }

  #section-color:has(.sp-section-inner.collapsed) .sp-section-label-row {
    margin-top: 32px;
  }

  #section-skin:has(.sp-section-inner.collapsed) {
    padding-bottom: 0;
  }

  #section-skin:has(.sp-section-inner:not(.collapsed)) .sp-cards-row {
    margin-top: 48px;
  }

  #section-skin:has(.sp-section-inner.collapsed) .sp-cards-row {
    margin-top: 48px;
  }

  .sp-footer {
    padding: 64px 48px;
    margin-top: 48px;
  }

  .sp-section-label {
    margin-bottom: 0;
  }

  #section-skin .sp-booking-note {
    margin-top: 16px;
  }

  .sp-service-title {
    font-size: 20px;
  }

  .sp-service-items li {
    font-size: 20px;
  }

  .sp-doctor-bio,
  .sp-doctor-desc {
    font-size: 20px;
  }

  .sp-section-inner {
    max-width: 100%;
    padding: 0 48px;
  }

  .sp-doctor-intro-row {
    width: 100%;
    align-items: center;
    margin-bottom: 32px;
  }

  .sp-doctor-text {
    flex: 1 1 50%;
    min-width: 0;
    order: 1;
  }

  .sp-doctor-photo {
    flex: 1 1 50%;
    width: 50%;
    max-width: 50%;
    /* Base rule hardcodes width: 178px; height: 178px — the 50%
       width override here left height stuck at 178px, squashing the
       portrait horizontally when parent < 356px. Reset height to
       auto so aspect-ratio: 1 (from base) produces a square. */
    height: auto;
    order: 2;
    align-self: center;
  }

  .sp-booking-note {
    font-size: 20px;
    max-width: 100%;
    margin-top: 32px;
  }

  .sp-doctor-bio {
    max-width: 100%;
  }

  .sp-service-desc {
    max-width: 100%;
  }

  .sp-service-items {
    max-width: 100%;
  }

  .sp-doctor-appointments {
    max-width: 100%;
  }

  .sp-doctor-appointments,
  .sp-service-desc {
    font-size: 20px;
  }

  .sp-artist-bio-text {
    font-size: 20px;
  }

  .sp-popup-card-desc {
    font-size: 20px;
  }

  .sp-date-label {
    font-size: 20px;
  }

  .sp-doc-title,
  .sp-doc-subtitle {
    font-size: 20px;
  }

  .sp-footer-cols {
    grid-template-columns: 1fr;
    gap: 32px;
    row-gap: 40px;
    margin-bottom: 32px;
    padding: 0;
  }

  .sp-footer-col:last-child {
    width: 100%;
  }

  .sp-footer-faq-list {
    width: 100%;
  }

  .sp-footer-label {
    font-weight: 500 !important;
  }

  .sp-footer-bar-copy {
    font-size: 16px;
  }

  .sp-slideshow {
    position: relative;
    width: 100%;
  }

  .sp-slide-grid img:nth-child(3) {
    display: none;
  }

  .sp-doc-banner {
    width: 100%;
    box-shadow: none;
  }

  .sp-doc-banner-top {
    max-width: 100%;
    margin: 0 auto;
  }

  .sp-section--artist {
    margin-top: 0;
    overflow: visible;
  }

  .sp-artist-content {
    width: 100%;
    max-width: 100%;
    padding: 0 48px;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    margin-top: 32px;
  }

  .sp-artist-left {
    flex: 0 0 60%;
  }

  .sp-popup-card {
    flex: 0 0 calc(40% - 24px);
    width: auto;
  }

  .sp-popup-card-label {
    font-size: 24px;
  }

  .sp-slideshow-pagination {
    bottom: 12px;
  }

  .sp-slideshow-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .sp-section--artist .sp-slideshow-wrapper {
    margin-left: -48px;
    margin-right: -48px;
    width: calc(100% + 96px);
    max-width: none;
  }

  #sp-prev {
    position: absolute;
    left: 48px;
    bottom: 0;
    width: 40px;
    height: 40px;
  }

  #sp-next {
    position: absolute;
    right: 48px;
    bottom: 0;
    width: 40px;
    height: 40px;
  }

  .sp-close {
    top: 80px;
    right: 48px;
    width: 24px;
    height: 40px;
  }

  .sp-close svg {
    width: 24px;
    height: 24px;
  }

  .sp-footer-bar-copy {
    font-size: 16px;
  }

  /* ─── TEST: zero all vertical padding/margin on popup ≤768 except
     section padding-top which preserves the 48px accordion-group gap
     between adjacent .sp-section elements (Hair/Nails/Skin/Artist).
     Appended last in the ≤768 popup block so specificity + source
     order win over every earlier declaration. !important needed to
     beat inline styles and base !important rules. */
  #services-popup,
  #services-popup *:not(.sp-section) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #services-popup .sp-section {
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Accordion sections (Hair / Nails / Skin) keep 48 padding-top —
     that's the mechanism providing the inter-accordion rhythm.
     Artist section opts out; its top gap comes from cards margin-bottom
     instead (see #section-skin .sp-cards-row rule below). */
  #services-popup .sp-section:not(.sp-section--artist) {
    padding-top: 48px !important;
  }

  #services-popup .sp-section--artist {
    padding-top: 0 !important;
  }

  #services-popup .sp-booking-note {
    margin-bottom: 48px !important;
  }

  /* Cards bottom → artist top: 48 via cards margin-bottom. */
  #services-popup #section-skin .sp-cards-row {
    margin-bottom: 48px !important;
  }

  /* Restore inner padding/margin inside the artist section that
     d087f74 blanket-zeroed. Inter-section zeros stay — this only
     re-enables content padding within .sp-section--artist. */
  #services-popup .sp-doc-banner {
    padding: 24px 40px !important;
  }

  #services-popup .sp-artist-content {
    margin-top: 32px !important;
  }

  #services-popup .sp-popup-card-header {
    padding: 24px 32px !important;
  }

  #services-popup .sp-popup-card-body {
    padding: 24px !important;
  }

  /* Restore top inner padding on Skin cards (between card title
     and top card stroke). Base .sp-card-face has padding:
     28px 24px 32px 24px — d087f74 zeroed vertical. Restore top
     per brief. */
  #services-popup .sp-card-face {
    padding-top: 28px !important;
  }

  /* Restore carousel pagination pill padding zeroed by d087f74.
     Base .sp-slideshow-pagination has padding: 8.91px 13.365px;
     blanket zeroed the vertical. Horizontal (13.365) was untouched
     by d087f74 but re-declared via shorthand for clarity. */
  #services-popup .sp-slideshow-pagination {
    padding: 8.91px 13.365px !important;
  }

  /* 48px gap above cards row. The existing scoped rules at lines
     3368 / 3372 set margin-top: 48 but without !important, so
     d087f74's margin-top: 0 !important beat them on cascade. This
     rule with !important restores the 48 unconditionally. */
  #services-popup .sp-cards-row {
    margin-top: 48px !important;
  }

  /* Skin section "Book now" CTA defenders. Specificity (1,1,0)
     + !important + source-order-after-blanket beat the L3739
     blanket's margin-top:0 / padding-top|bottom:0. */
  #services-popup .sp-section-cta-row {
    margin-top: 48px !important;
  }

  #services-popup .sp-btn-book {
    padding: 9px 12px !important;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 400;
  }
}

/* Footer-related #services-popup overrides — scope-tightened to ≥431 so they don't leak into the ≤430 layer. See RULES.md "Committed — ≤768 #services-popup leak scope-tightening". */
@media (min-width: 431px) and (max-width: 768px) {
  #services-popup .sp-footer {
    padding: 64px 48px !important;
    margin-top: 48px !important;
  }

  #services-popup .sp-footer-cols {
    margin-bottom: 32px !important;
  }

  #services-popup .sp-footer-label {
    margin-bottom: 12px !important;
  }

  #services-popup .sp-footer-bar {
    padding-top: 24px !important;
  }

  #services-popup .sp-footer-bar-copy {
    margin-bottom: 3px !important;
  }
}

/* ─── Services Popup — ≤430px overrides ─── */
@media (max-width: 430px) {

  .sp-header {
    height: 80px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  .sp-header-logo {
    display: none;
  }

  .sp-title {
    position: absolute;
    left: 50%;
    top: calc(50% + 4px);
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 20px;
    text-indent: 12px;
    margin: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
  }

  .sp-close {
    position: fixed;
    right: 16px;
    top: 80px;
    width: 24px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 210;
  }

  .sp-tabs {
    top: 0;
    padding: 0 16px;
    padding-top: 0 !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    gap: 0;
    overflow-x: visible;
    height: 40px;
    justify-content: center;
    box-sizing: border-box;
  }

  .sp-tab {
    flex: 0 0 auto;
    min-width: 0;
    height: 40px;
    font-size: 20px;
    letter-spacing: 3.6px;
    text-indent: 3.6px;
    padding: 0 4px;
    border: 1.25px solid #B89112;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.95;
    box-sizing: border-box;
  }

  .sp-tab.is-active {
    background: #B89112;
    color: #F6DFD6;
    font-weight: 500;
    border: none;
  }

  .sp-service-row .sp-book-btn { display: none; }
  .sp-service-row.collapsed .sp-book-btn { display: flex; }
  .sp-service-row .sp-service-row .sp-book-btn { display: flex; }
  .sp-service-row .sp-service-header {
    padding: 16px 0 8px 0;
    align-items: center;
  }

  .sp-service-subhead {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .sp-book-btn::before {
    width: 8px;
  }

  .sp-book-btn::after {
    height: 8px;
  }

  .sp-service-row {
    border-bottom: none;
  }

  .sp-service-list .sp-service-row:first-child {
    border-top: none;
  }

  .sp-section {
    padding-top: 16px;
    scroll-margin-top: 56px;
  }

  #section-skin .sp-section-label-row {
    margin-top: 0;
  }

  #section-color .sp-service-list .sp-service-row:last-child {
    padding-bottom: 0;
  }

  .sp-section-inner {
    max-width: 100%;
    padding: 0 16px;
  }

  .sp-booking-note {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 16px;
    margin-bottom: 24px;
  }

  /* LOCKED: expand/close icon always align-items center — do not override.
     margin-bottom (formerly on .sp-section-label P) moved here so it does not
     contribute to the flex row's cross-axis and thus does not misalign the
     button. Preserves the existing 24px gap below the label area for all
     sections (Color, Manicures, Skin). */
  .sp-section-label-row {
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 0;
  }

  .sp-section-label-title {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 2px;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .sp-service-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
  }

  .sp-service-items li {
    font-size: 16px;
    font-weight: 300;
    line-height: normal;
  }

  .sp-service-list {
    gap: 16px;
  }

  .sp-doctor-intro-row {
    display: grid;
    grid-template-columns: 1fr 106px;
    gap: 16px;
    align-items: center;
    max-width: 332px;
    width: 100%;
  }

  .sp-doctor-text {
    display: contents;
  }

  .sp-doctor-photo {
    width: 106px;
    height: 106px;
    max-width: 106px;
    flex-shrink: 0;
    transform: scale(0.9);
    grid-row: 1;
    grid-column: 2;
  }

  .sp-doctor-desc {
    max-width: 100%;
    box-sizing: border-box;
    grid-column: 1;
  }

  .sp-doctor-appointments {
    width: 100%;
    display: block;
    margin-top: 16px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .sp-service-row {
    padding-left: 0;
  }

  .sp-doctor-bio {
    font-size: 20px;
    font-weight: 300 !important;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  #services-popup .sp-doctor-bio {
    font-weight: 300 !important;
  }

  .sp-slideshow {
    width: 100%;
    height: 240px;
  }

  .sp-doc-banner {
    width: 100%;
    padding: 16px;
    text-align: left;
  }

  .sp-doc-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
  }

  .sp-doc-subtitle {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    text-align: left;
  }

  .sp-slideshow-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .sp-section--artist {
    overflow: visible;
  }

  .sp-section--artist .sp-slideshow-wrapper {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  .sp-slide-grid {
    display: flex;
    flex-direction: column;
  }

  .sp-slide-grid img:not(:first-child) {
    display: none;
  }

  #sp-prev,
  #sp-next {
    width: 32px;
    height: 32px;
    left: auto;
    right: auto;
    margin: 0;
  }

  .sp-doc-arrow svg {
    width: 32px;
    height: 32px;
    display: block;
  }

  #sp-prev {
    left: 0;
  }

  #sp-next {
    right: 0;
  }

  .sp-slideshow-pagination {
    bottom: 8px;
  }

  .sp-artist-content {
    width: 100%;
    padding: 0 16px;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    margin-top: 24px;
  }

  .sp-artist-bio-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
  }

  .sp-artist-inline-name {
    font-size: 40px;
  }

  .sp-popup-card {
    width: 100%;
    margin-bottom: 40px;
  }

  .sp-popup-card-label {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
  }

  .sp-popup-card-desc {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
  }

  .sp-date-label {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
  }

  .sp-cards-row {
    width: 100%;
    max-width: 100%;
    padding: 24px 16px 0 16px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 24px 0;
  }

  #section-skin:has(.sp-section-inner.collapsed) .sp-cards-row {
    padding-top: 0;
  }

  .sp-cards-row .location-card {
    width: 100%;
    max-width: 100%;
  }

  #services-popup .card-title {
    font-size: 20px !important;
  }

  #services-popup .location-card p,
  #services-popup .sp-cancel-policy,
  #services-popup .card-link {
    font-size: 20px !important;
  }

  .sp-booking-note,
  .sp-doctor-desc,
  .sp-doctor-appointments,
  .sp-artist-bio-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
  }

  .sp-footer {
    padding: 24px 16px;
    gap: 40px;
    min-height: calc(100dvh - 48px);
    margin-top: 48px;
  }

  #services-popup .sp-footer {
    padding: 24px 16px !important;
    margin-top: 48px !important;
    min-height: 100dvh !important;
  }

  .sp-footer-cols {
    grid-template-columns: 1fr;
    row-gap: 40px;
    padding: 0;
    margin-bottom: 0;
  }

  .sp-footer-col {
    gap: 8px;
  }

  .sp-footer-label {
    font-size: 18px;
    font-weight: 500 !important;
    color: #411900;
    margin-bottom: 0;
  }

  .sp-footer-faq-list {
    width: 100%;
  }

  .sp-footer-bar {
    padding-top: 24px;
  }

  #services-popup .sp-footer-bar {
    padding-top: 24px !important;
  }

  .sp-footer-bar-logo {
    height: 40px;
  }

  .sp-footer-bar-copy {
    font-size: 14px;
    color: #FFFEF6;
    margin-bottom: 0;
  }

  #section-color .sp-service-items,
  #section-color .sp-service-desc,
  #section-mani .sp-service-items,
  #section-mani .sp-service-desc,
  #section-skin .sp-service-items,
  #section-skin .sp-service-desc,
  #section-skin .sp-doctor-desc,
  #section-skin .sp-doctor-appointments,
  #section-skin .sp-doctor-bio {
    max-width: 332px;
  }

  /* Skin section "Book now" CTA at ≤430. margin-top !important
     beats the still-firing L3739 ≤768 blanket. Padding doesn't
     need !important — its vertical 0 agrees with blanket's 0. */
  #services-popup .sp-section-cta-row {
    margin-top: 24px !important;
  }

  #services-popup .sp-btn-book {
    font-size: 14px !important;
    font-weight: 400;
    font-family: "Afacad Flux", sans-serif;
    padding: 10px 12px;
    border-radius: 64px;
  }
}

/* ─── Slideshow: multi-state ─── */

.sp-slide {
  position: absolute;
  inset: 0;
  display: none;
  background: #F6DFD6;
}

.sp-slide.sp-slide--active {
  display: block;
}

/* State 1: full-bleed thumbnail */
.sp-slide-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-slide-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sp-slide-play-overlay img {
  width: 100%;
  height: auto;
}

/* Grid layouts */
.sp-slide-grid {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 16px;
}

.sp-slide-grid img {
  flex: 1;
  height: 100%;
  object-fit: contain;
  background: #F6DFD6;
  min-width: 0;
}

/* Single full-width painting */
.sp-slide-single-painting {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #F6DFD6;
}

/* Hide dots outside the ±3 window */
.sp-dot[hidden] {
  display: none !important;
}

/* ─── Dot pagination: 9 dots ─── */
/* Rules defined above with .sp-slideshow-pagination */

#section-color,
#section-mani,
#section-skin,
#section-artist {
  display: block !important;
  visibility: visible !important;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
#section-color.is-visible,
#section-mani.is-visible,
#section-skin.is-visible,
#section-artist.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ─── Services popup ──────────────────────────────────────── */
#services-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  overflow: visible;
}

#services-popup.is-open {
  pointer-events: auto;
}

/* Override global section { position: fixed } within services page */
#section-color,
#section-mani,
#section-skin,
#section-artist {
  position: static !important;
  inset: auto !important;
}

/* Play button — needs pointer events and button reset */
#sp-play {
  cursor: pointer;
  border: none;
}

/* Documentary banner — row layout with arrow */
.sp-doc-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sp-doc-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Footer bar tagline */
/* Footer col link (e.g. Our team) */
.sp-footer-col-link {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 300;
  color: #411900;
  text-decoration: none;
  line-height: 1.6;
}