/* =========================================================
   Diversions Haus of Beauty — Luxury Theme
   ========================================================= */

:root {
  --bg: #ffffff;
  --bg-soft: #efe5cc;
  --bg-elev: #ffffff;
  --ink: #0a0a0a;
  --ink-dim: #4a4a4a;
  --ink-mute: #7a7468;
  --line: rgba(168, 138, 82, 0.28);
  --line-strong: rgba(168, 138, 82, 0.55);
  --gold: #8a6f3d;
  --gold-bright: #a88a52;
  --gold-deep: #5e4a26;
  --rose: #b08866;
  --cream: #f5ecdc;
  --shadow-1: 0 10px 40px rgba(80, 60, 30, 0.10);
  --shadow-2: 0 30px 80px rgba(80, 60, 30, 0.18);
  --gradient-gold: linear-gradient(135deg, #a88a52 0%, #8a6f3d 35%, #5e4a26 100%);
  --gradient-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 1) 100%);
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Typography */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}
h1 { font-size: clamp(3rem, 8vw, 7.5rem); }
h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
h4 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }

.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }
.eyebrow.center::after, .eyebrow.center::before {
  content: ''; width: 36px; height: 1px; background: var(--gold); display: inline-block;
}

.serif-italic {
  font-family: var(--display);
  font-style: italic;
  background: linear-gradient(100deg,
    var(--gold-deep) 0%,
    var(--gold) 30%,
    var(--gold-bright) 50%,
    var(--gold) 70%,
    var(--gold-deep) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: serifShimmer 7s linear infinite;
}
@keyframes serifShimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -100% 50%; }
}
.text-gold { color: var(--gold); }
.text-dim { color: var(--ink-dim); }

/* Layout */
.container { width: min(1280px, 92vw); margin-inline: auto; }
.container-wide { width: min(1480px, 94vw); margin-inline: auto; }
.container-narrow { width: min(880px, 90vw); margin-inline: auto; }

section { padding: clamp(5rem, 10vw, 9rem) 0; position: relative; }
.section-tight { padding: clamp(3rem, 6vw, 5rem) 0; }

/* =========================================================
   LOADING SCREEN — animated syringe
   ========================================================= */
#loader {
  position: fixed; inset: 0;
  background: linear-gradient(rgba(210, 208, 200, 0.32), rgba(210, 208, 200, 0.32)), #ffffff;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 0.45s var(--easing), visibility 0.45s var(--easing);
}
#loader.done { opacity: 0; visibility: hidden; }

.loader-mark {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.5rem;
  display: flex;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 0.5s var(--easing) 0s forwards;
}
.loader-mark span { display: inline-block; opacity: 0; transform: translateY(24px); animation: fadeUp 0.55s var(--easing) forwards; }

.syringe-wrap {
  width: min(540px, 88vw);
  height: 160px;
  position: relative;
  filter: drop-shadow(0 8px 32px rgba(212, 184, 134, 0.22));
  animation: syringeBreath 6.4s ease-in-out infinite;
}
.syringe-svg { width: 100%; height: 100%; overflow: visible; }

/* Fluid drains gently as the plunger presses — both ease out so they settle
   at a partial state instead of slamming all the way in when the loader dismisses. */
.syringe-fluid {
  transform-origin: right center;
  transform-box: fill-box;
  animation: fluidDrain 2.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}
.syringe-handle-shaft {
  animation: plungerPress 2.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
  transform-origin: left center;
}
.syringe-needle { stroke-linecap: round; }
/* Dripping drops: each forms at the tip, swells, releases, falls, and fades.
   Staggered delays produce a sequence of drops during the injection phase. */
.syringe-drop {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: dripFall 1.1s cubic-bezier(0.55, 0, 0.55, 1) infinite;
}
.drop-1 { animation-delay: 0s;    }
.drop-2 { animation-delay: 0.22s; }
.drop-3 { animation-delay: 0.44s; }
.drop-4 { animation-delay: 0.66s; }
.drop-5 { animation-delay: 0.88s; }
.syringe-sheen {
  animation: sheenSweep 2.2s ease-in-out infinite;
}

@keyframes syringeBreath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes fluidDrain {
  0%   { transform: scaleX(1);     opacity: 0.85; }
  /* End scale kept in sync with plungerPress travel (106px): the liquid's
     back edge stays flush against the rubber stopper. s = 1 - 106/262. */
  100% { transform: scaleX(0.595); opacity: 0.65; }
}
@keyframes plungerPress {
  0%   { transform: translateX(0); }
  /* Cap travel so the thumb pad stops just behind the finger flanges (~x124)
     instead of sinking into the glass barrel. Grip lip ends at x17, so 106px
     lands it flush against the flanges — never inside the tube. */
  100% { transform: translateX(106px); }
}

/* Continuous drip — each drop's full cycle is 2.4s.
   Five drops, staggered by 0.48s, produce an unbroken stream. */
@keyframes dripFall {
  0%   { opacity: 0;   transform: translate(0, -4px) scale(0.2); }
  10%  { opacity: 0.5; transform: translate(0, -2px) scale(0.7); }
  18%  { opacity: 1;   transform: translate(0, 0)    scale(1); }
  26%  { opacity: 1;   transform: translate(0, 6px)  scale(1.1); }
  45%  { opacity: 1;   transform: translate(0, 24px) scale(1); }
  65%  { opacity: 0.7; transform: translate(0, 48px) scale(0.85); }
  85%  { opacity: 0.3; transform: translate(0, 70px) scale(0.6); }
  100% { opacity: 0;   transform: translate(0, 90px) scale(0.4); }
}
@keyframes sheenSweep {
  0%, 4%    { transform: translateX(0); opacity: 0; }
  12%       { opacity: 0.6; }
  30%       { transform: translateX(346px); opacity: 0; }
  100%      { transform: translateX(346px); opacity: 0; }
}


.loader-tag {
  margin-top: 1.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0;
  animation: fadeUp 0.5s var(--easing) 0.7s forwards;
}

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav {
  position: fixed; top: calc(1.25rem + env(safe-area-inset-top, 0px)); left: 0; right: 0;
  z-index: 100;
  padding: 0.25rem 0;
  background: transparent;
  border: 0;
  transition: top 0.4s var(--easing), padding 0.4s var(--easing), transform 0.4s var(--easing), opacity 0.35s var(--easing);
}
.nav.scrolled {
  top: calc(0.5rem + env(safe-area-inset-top, 0px));
  padding: 0.2rem 0;
}
/* Desktop only: the nav retires as you scroll down the page and returns near
   the top. Modern browsers map the slide/fade directly onto scroll position
   (a compositor-run scroll-driven animation over the 100-400px range — smooth
   and reversible, no threshold snap). Browsers without animation-timeline
   (Firefox stable) fall back to the JS class toggle with a transform/opacity
   transition. Reduced-motion users keep a permanently visible nav. The fade
   covers the logo, which overflows the bar and would otherwise peek.
   (below 1300px the hamburger stays put — mobile menu depends on it) */
@media (min-width: 1301px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .nav {
      animation: navRetire linear both;
      animation-timeline: scroll(root);
      animation-range: 100px 400px;
    }
    /* JS still flags y>300 — let clicks pass through the retired bar */
    .nav.nav-hidden { pointer-events: none; }
  }
  @supports not (animation-timeline: scroll()) {
    .nav { will-change: transform, opacity; }
    .nav.nav-hidden {
      transform: translate3d(0, calc(-100% - 3rem), 0);
      opacity: 0;
      pointer-events: none;
    }
    .nav.nav-hidden:focus-within {
      transform: none;
      opacity: 1;
      pointer-events: auto;
    }
  }
}
@keyframes navRetire {
  to {
    transform: translate3d(0, calc(-100% - 3rem), 0);
    opacity: 0;
    visibility: hidden;
  }
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2.5rem;
}
.nav-logo {
  position: relative;
  display: block;
  width: 220px;
  height: 38px;
  overflow: visible;
  white-space: nowrap;
}
.nav-logo img {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  height: 200px;
  width: auto;
  display: block;
  filter: brightness(0);
  transition: height 0.45s var(--easing), top 0.45s var(--easing), filter 0.4s var(--easing);
  pointer-events: none;
}
.nav.scrolled .nav-logo { height: 30px; }
.nav.scrolled .nav-logo img { height: 140px; top: -2px; }
.nav-menu {
  display: flex; gap: 2rem;
  list-style: none;
  align-items: center;
}
.desktop-menu-left  { justify-content: flex-end; }
.desktop-menu-right { justify-content: flex-start; }
.mobile-menu { display: none; }
.nav-menu a {
  position: relative;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2c2a26;
  font-weight: 600;
  padding: 0.5rem 0;
  transition: color 0.3s var(--easing);
}
.nav-menu a::after {
  content: ''; position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--easing);
}
.nav-menu a:hover, .nav-menu a.active { color: var(--ink); }
.nav-menu a:hover::after, .nav-menu a.active::after {
  transform: scaleX(1); transform-origin: left;
}

/* ---- Dropdowns ---- */
.has-dropdown { position: relative; }
.dropdown-trigger {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.45rem;
  position: relative;
  transition: color 0.3s;
}
.dropdown-trigger:hover,
.dropdown-trigger.active,
.has-dropdown.open .dropdown-trigger { color: var(--ink); }
.dropdown-trigger::after {
  content: ''; position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--easing);
}
.dropdown-trigger:hover::after,
.dropdown-trigger.active::after,
.has-dropdown.open .dropdown-trigger::after {
  transform: scaleX(1); transform-origin: left;
}
.dropdown-caret {
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s var(--easing);
}
.has-dropdown.open .dropdown-caret { transform: translateY(0) rotate(-135deg); }

.dropdown {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 6px);
  margin-top: 0.85rem;
  min-width: 13rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.5rem 0;
  list-style: none;
  box-shadow: 0 18px 40px rgba(40, 30, 10, 0.10), 0 4px 12px rgba(40, 30, 10, 0.06);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.28s var(--easing), transform 0.28s var(--easing), visibility 0s linear 0.28s;
  z-index: 110;
}
.dropdown::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -1.4rem;
  height: 1.4rem;
  background: transparent;
}
.has-dropdown::after {
  content: '';
  position: absolute;
  left: -0.6rem; right: -0.6rem;
  top: 100%;
  height: 1.4rem;
  background: transparent;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.dropdown li { display: block; }
.dropdown a {
  display: block;
  padding: 0.65rem 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  white-space: nowrap;
  color: var(--ink-dim);
  border-left: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.dropdown a::after { display: none; }
.dropdown a:hover,
.dropdown a.active {
  color: var(--ink);
  border-left-color: var(--gold);
  background: rgba(168, 138, 82, 0.05);
}

/* Mobile dropdown rendering: parent as section label, children listed below */
.mobile-group-label {
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1.25rem;
  opacity: 0.85;
}
.mobile-group-label:first-child { margin-top: 0; }
.mobile-menu .mobile-child a { font-size: 0.95rem; }
.nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }

.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  position: relative;
}
.nav-toggle span {
  position: absolute; left: 6px; right: 6px; height: 1px;
  background: var(--ink); transition: transform 0.4s var(--easing), opacity 0.3s, top 0.3s;
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 18px; }
.nav-toggle span:nth-child(3) { top: 24px; }
.nav-toggle.open span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 18px; transform: rotate(-45deg); }

/* Intermediate width: tighten the desktop menu to fit between logo + items */
@media (max-width: 1500px) {
  .nav-menu { gap: 1.4rem; }
  .nav-menu a { font-size: 0.74rem; letter-spacing: 0.18em; }
  .nav-logo { width: 180px; }
  .nav-logo img { height: 170px; }
  .nav.scrolled .nav-logo img { height: 120px; }
}

/* Below this, switch to hamburger — desktop layout simply runs out of room */
@media (max-width: 1300px) {
  .nav-toggle { display: block; }
  .nav-inner { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .nav-logo {
    grid-column: 1;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .nav-logo img {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 80px;
    height: 80px;
  }
  .nav.scrolled .nav-logo { width: 56px; height: 56px; }
  .nav.scrolled .nav-logo img { width: 56px; height: 56px; top: auto; }
  .nav-toggle { grid-column: 3; }
  .desktop-menu { display: none; }
  .mobile-menu {
    display: flex;
    position: fixed; inset: 0;
    z-index: 99;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.55rem;
    padding: calc(7rem + env(safe-area-inset-top, 0px)) 1.5rem calc(3rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.6s var(--easing), visibility 0s linear 0.6s;
    list-style: none;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-menu.open { transform: translateY(0); visibility: visible; transition: transform 0.6s var(--easing), visibility 0s; }
  .mobile-menu a {
    font-size: 1.05rem;
    display: inline-block;
    padding: 0.3rem 0;
  }
  .mobile-menu .mobile-child a { font-size: 0.92rem; color: var(--ink-dim); }
  .mobile-menu .mobile-child { margin-top: -0.15rem; }
  .mobile-group-label {
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
    width: 60%;
    text-align: center;
  }
  .mobile-group-label:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .nav-toggle { z-index: 101; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1.05rem 2.2rem;
  font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--gold);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--easing), border-color 0.4s var(--easing);
  cursor: pointer;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform 0.5s var(--easing);
  z-index: -1;
}
.btn:hover { color: var(--bg); border-color: var(--gold-bright); }
.btn:hover::before { transform: translateY(0); }
.btn .arrow { transition: transform 0.4s var(--easing); }
.btn:hover .arrow { transform: translateX(6px); }

.btn-solid {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  animation: btnPulse 2.8s ease-in-out infinite;
}
.btn-solid::before { background: #1b1610; }
.btn-solid:hover {
  color: var(--gold-bright);
  animation: none;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 138, 82, 0.45); }
  60%      { box-shadow: 0 0 0 16px rgba(168, 138, 82, 0); }
}

.btn-ghost { border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold); }

.btn-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  padding: 0.4rem 0;
  position: relative;
}
.btn-link::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(1); transform-origin: right;
  transition: transform 0.5s var(--easing);
}
.btn-link:hover::after { transform: scaleX(0); }
.btn-link:hover .arrow { transform: translateX(6px); }
.btn-link .arrow { transition: transform 0.4s var(--easing); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  min-height: 78vh;
  position: relative;
  display: flex; align-items: center;
  padding-top: 6.5rem;
  padding-bottom: 8rem;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(168, 138, 82, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(176, 136, 102, 0.08) 0%, transparent 50%),
    #ffffff;
  z-index: -2;
}
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(168, 138, 82, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 138, 82, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero-bg::after {
  content: ''; position: absolute;
  width: 65vmin; height: 65vmin;
  top: 22%; right: -8%;
  background: radial-gradient(circle, rgba(168, 138, 82, 0.42) 0%, rgba(176, 136, 102, 0.18) 38%, transparent 70%);
  filter: blur(48px);
  animation: heroBlob 14s var(--easing-soft) infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes heroBlob {
  0%   { transform: translate(0, 0) scale(1);     opacity: 0.65; }
  50%  { transform: translate(-8vw, 5vh) scale(1.18); opacity: 0.95; }
  100% { transform: translate(5vw, -4vh) scale(0.92); opacity: 0.55; }
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: -1;
  overflow: hidden;
}
.hero-image::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.18) 30%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 22%, rgba(255,255,255,0.28) 100%),
    radial-gradient(ellipse at 75% 45%, rgba(168, 138, 82, 0.06), transparent 55%);
}
.hero-image-inner {
  position: absolute; inset: 0;
  /* Anchored right: the subject sits at the right edge of the hero art and the
     extra backdrop runs off to the left, so cover crops empty space rather than
     the face at any viewport width. */
  background: url('../img/hero.webp?v=20260725b') right calc(50% + 3px) / cover no-repeat;
  filter: saturate(0.9) contrast(1.02);
  animation: heroDrift 32s var(--easing-soft) infinite alternate;
  transform: translate(var(--hero-px, 0), var(--hero-py, 0));
  transition: transform 0.6s var(--easing-soft);
  will-change: filter, transform;
}
@keyframes heroDrift {
  0%   { filter: saturate(0.9)  contrast(1.02) brightness(1)    hue-rotate(0deg); }
  50%  { filter: saturate(1.0)  contrast(1.04) brightness(1.02) hue-rotate(-3deg); }
  100% { filter: saturate(0.95) contrast(1.03) brightness(1)    hue-rotate(2deg); }
}

/* Drifting gold light leak — soft diagonal sheen that crosses the image */
.hero-image-inner::before {
  content: ''; position: absolute; inset: -10%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 232, 184, 0.18) 45%,
    rgba(168, 138, 82, 0.22) 50%,
    rgba(255, 232, 184, 0.18) 55%,
    transparent 70%);
  filter: blur(28px);
  mix-blend-mode: screen;
  animation: heroLightLeak 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes heroLightLeak {
  0%, 100% { transform: translateX(-25%) rotate(-2deg); opacity: 0.5; }
  50%      { transform: translateX(25%)  rotate(2deg);  opacity: 0.95; }
}

/* Soft vignette + warm light-bloom layered above the SVG */
.hero-image::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255, 232, 184, 0.28), transparent 45%),
    radial-gradient(ellipse at 25% 65%, rgba(168, 138, 82, 0.16), transparent 55%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.18) 100%);
  mix-blend-mode: soft-light;
  animation: heroBloom 11s ease-in-out infinite alternate;
}
@keyframes heroBloom {
  0%   { opacity: 0.75; transform: scale(1); }
  100% { opacity: 1;    transform: scale(1.06); }
}

/* Fine-grain film texture — adds tactile luxury without distracting */
.hero-image-inner::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: grainShift 1.6s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}
@keyframes kenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.10) translate(-2%, -1.5%); }
}

.hero-content { position: relative; z-index: 2; max-width: 880px; }
.hero-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #6b5529;
  font-weight: 600;
  margin-bottom: 1.6rem;
  opacity: 0;
  transform: translateY(14px);
  animation: heroEyebrowReveal 1.1s var(--easing) 0.4s forwards;
}
@keyframes heroEyebrowReveal {
  to { opacity: 1; transform: translateY(0); }
}
.hero-title {
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 0.9;
  margin-bottom: 2.75rem;
  letter-spacing: -0.025em;
}
.hero-title .word { margin-right: 0; }
.hero-title .word:last-child { margin-right: 0; padding-right: 0.2em; }
.hero-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.05em 0.5em 0;
  margin-bottom: -0.5em;
}
.hero-title .word > span {
  display: inline-block;
  transform: translateY(110%);
  animation: heroReveal 1.2s var(--easing) forwards;
  /* background-clip:text (.serif-italic) only paints inside the box; with line-height 0.9
     the inline-block box ends above Cormorant's descenders, leaving g/p/y tails unpainted.
     Padding extends the paint area below the baseline; the margin cancels the layout shift. */
  padding-bottom: 0.4em;
  margin-bottom: -0.4em;
}
.hero-title .word:nth-child(1) > span { animation-delay: 0.6s; }
.hero-title .word:nth-child(2) > span { animation-delay: 0.75s; }
.hero-title .word:nth-child(3) > span { animation-delay: 0.9s; }
.hero-title .word:nth-child(4) > span { animation-delay: 1.05s; }
.hero-title .word:nth-child(5) > span { animation-delay: 1.2s; }
.hero-title .word:nth-child(6) > span { animation-delay: 1.35s; }
.hero-title .word:nth-child(7) > span { animation-delay: 1.5s; }
@keyframes heroReveal {
  0% { transform: translateY(110%); }
  100% { transform: translateY(0); }
}
.hero-sub {
  font-size: 1.05rem;
  color: #322f2a;
  max-width: 480px;
  margin-bottom: 1.6rem;
  text-shadow: 0 1px 10px rgba(255,255,255,0.55);
  opacity: 0;
  animation: fadeUp 1s var(--easing) 1.4s forwards;
}
.hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1s var(--easing) 1.6s forwards;
}
.hero-trust {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1.6rem; text-decoration: none;
  opacity: 0; animation: fadeUp 1s var(--easing) 1.5s forwards;
}
.hero-trust-stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 0.06em; }
.hero-trust-text { font-size: 0.85rem; color: #322f2a; letter-spacing: 0.02em; }
.hero-trust-text strong { font-weight: 700; color: var(--ink); }
.hero-trust:hover .hero-trust-text { color: var(--ink); }

.hero-meta {
  position: absolute;
  bottom: 1.5rem;
  left: 0; right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-inline: 2vw;
  opacity: 0;
  animation: fadeUp 1s var(--easing) 2s forwards;
}
.meta-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
}
.meta-block:nth-child(1) { align-items: flex-start; text-align: left; }
.meta-block:nth-child(2) { align-items: center;     text-align: center; }
.meta-block:nth-child(3) { align-items: flex-end;   text-align: right; }
.meta-label {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  line-height: 1;
}
.meta-value {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1;
  font-weight: 400;
}
.meta-link {
  position: relative;
  font-style: italic;
}
.meta-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--easing);
}
.meta-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.meta-aux {
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.25rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .hero-meta {
    flex-direction: column;
    gap: 1.4rem;
    align-items: center;
  }
  .meta-block,
  .meta-block:nth-child(1),
  .meta-block:nth-child(2),
  .meta-block:nth-child(3) { align-items: center; text-align: center; }
}


.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%; transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  z-index: 3;
}
.scroll-cue-label {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--gold);
  letter-spacing: 0.22em;
  opacity: 0.78;
}
.scroll-cue-svg {
  width: 10px;
  height: 88px;
  overflow: visible;
}
.cue-comet {
  transform-origin: center;
  transform-box: fill-box;
  animation: cueComet 2.8s cubic-bezier(0.4, 0, 0.65, 1) infinite;
  filter: drop-shadow(0 0 4px rgba(232, 207, 159, 0.6));
}
@keyframes cueComet {
  0%, 4%    { transform: translateY(0);     opacity: 0; }
  18%       { opacity: 1; }
  82%       { opacity: 1; }
  96%, 100% { transform: translateY(108px); opacity: 0; }
}

/* =========================================================
   SECTIONS / HEADERS
   ========================================================= */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-head h2 { max-width: 680px; }
.section-head p { color: var(--ink-dim); max-width: 480px; }
.section-head.center { grid-template-columns: 1fr; text-align: center; }
.section-head.center h2, .section-head.center p { margin-inline: auto; }

@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--easing), transform 1s var(--easing);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="left"].in { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="right"].in { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].in { transform: scale(1); }
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }
[data-reveal-delay="6"] { transition-delay: 0.6s; }

.split-line {
  display: block;
  overflow: hidden;
}
.split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.2s var(--easing);
}
.split-line.in > span { transform: translateY(0); }

/* =========================================================
   INFO BAND — accent banner with studio details
   ========================================================= */
.info-band {
  background: var(--bg-soft);
  border: 0;
  padding: clamp(2.2rem, 4vw, 3.4rem) 0;
  position: relative;
  overflow: hidden;
}
/* When sitting at the top of the footer */
.info-band--in-footer {
  background: transparent;
  border: 0;
  padding: clamp(2rem, 3.5vw, 3rem) 0;
}
.info-band--in-footer::before,
.info-band--in-footer::after { display: none; }
.footer { padding-top: 0; }
.footer .info-band--in-footer + .container { padding-top: clamp(3rem, 6vw, 5rem); }
.info-band::before,
.info-band::after {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.25;
}
.info-band::before { background: var(--gold);      top: -60%; left: 8%; }
.info-band::after  { background: var(--gold-deep); bottom: -60%; right: 10%; }
.info-band-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  position: relative;
  z-index: 1;
}
.info-band .meta-block:nth-child(1) { align-items: flex-start; text-align: left; }
.info-band .meta-block:nth-child(2) { align-items: center;     text-align: center; }
.info-band .meta-block:nth-child(3) { align-items: flex-end;   text-align: right; }

@media (max-width: 800px) {
  .info-band-inner { grid-template-columns: 1fr; gap: 2rem; }
  .info-band .meta-block,
  .info-band .meta-block:nth-child(1),
  .info-band .meta-block:nth-child(2),
  .info-band .meta-block:nth-child(3) { align-items: center; text-align: center; }
}

/* =========================================================
   KINETIC WORD CYCLER — single elegant word fades through
   ========================================================= */
.kinetic {
  background: rgba(208, 204, 194, 0.48);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  border: 0;
  padding: 1.55rem 1.5rem 2rem;
  display: flex;
  align-items: center; /* vertically center the label against the word; .kinetic-label's transform nudges it to the word's optical center so it doesn't read high */
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  overflow: hidden;
}
.hero .kinetic {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1; /* below .hero-content (z-index:2): the band is a frosted shelf, CTAs stay sharp on top */
  border-top: 1px solid rgba(168, 138, 82, 0.40); /* warm rail defines the shelf over the cream */
}
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: auto; /* hero hugs its content on mobile: content flows top→bottom, the "A studio for" shelf sits flush beneath it, then the next section. No forced 92vh floor — a floor taller than the content dumps an empty gap either below the band or above the content on tall phones. */
    padding-bottom: 0;
  }
  .hero-content { align-self: center; padding-top: 2rem; padding-bottom: 1.25rem; }
  .hero .kinetic { position: static; padding: 1.4rem 1rem 1.4rem; border-top: 1px solid rgba(168, 138, 82, 0.38); -webkit-mask-image: none; mask-image: none; }
  .hero-image::before {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.82) 42%, rgba(255,255,255,0.6) 72%, rgba(255,255,255,0.34) 100%),
      radial-gradient(ellipse at 75% 45%, rgba(168, 138, 82, 0.04), transparent 60%);
  }
  .hero-image-inner { background-position: 65% center; }
  .hero-eyebrow,
  .hero-title,
  .hero-sub,
  .hero-trust-text,
  .kinetic-label,
  .kinetic-stage {
    text-shadow: 0 1px 18px rgba(255,255,255,0.95), 0 0 6px rgba(255,255,255,0.8);
  }
}
.kinetic-label {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #4f4a40;
  font-weight: 600;
  /* Drop the label to the word's OPTICAL center (its x-height), which sits below the geometric
     center — plain vertical-centering reads slightly high next to the much larger word. The shift
     scales with the word's clamp(1.45rem,2.8vw,2.4rem) size so it stays centered at any width. */
  transform: translateY(clamp(0.15rem, 0.28vw, 0.24rem));
}
.kinetic-mark {
  color: var(--gold);
  font-size: 1.1rem;
  opacity: 0.7;
  animation: kineticMark 4.2s ease-in-out infinite;
}
@keyframes kineticMark {
  0%, 100% { opacity: 0.4;  transform: rotate(0deg); }
  50%      { opacity: 0.95; transform: rotate(180deg); }
}
.kinetic-stage {
  position: relative;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.45rem, 2.8vw, 2.4rem);
  color: var(--gold);
  line-height: 1;
  height: 1.15em;
  min-width: clamp(190px, 22vw, 330px);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kinetic-word {
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 20px));
  filter: blur(4px);
}
/* Elegant default / fallback: the first word shows statically — centered and sharp. This is what
   renders with no JS, under prefers-reduced-motion, and on iPhones in Low Power Mode (where iOS
   throttles CSS animations to ~30fps and we deliberately don't run the cycler). The rotation is
   opt-in: main.js adds .is-cycling once it confirms motion is allowed AND the device isn't in Low
   Power Mode (LPM blocks muted-video autoplay, so a muted-autoplay probe detects it). */
.kinetic-word:first-child { opacity: 1; transform: translate(-50%, -50%); filter: none; }
.kinetic.is-cycling .kinetic-word { animation: kineticCycle 15s cubic-bezier(0.55, 0, 0.35, 1) infinite; }
.kinetic.is-cycling .kinetic-word:nth-child(1) { animation-delay: 0s; }
.kinetic.is-cycling .kinetic-word:nth-child(2) { animation-delay: 3s; }
.kinetic.is-cycling .kinetic-word:nth-child(3) { animation-delay: 6s; }
.kinetic.is-cycling .kinetic-word:nth-child(4) { animation-delay: 9s; }
.kinetic.is-cycling .kinetic-word:nth-child(5) { animation-delay: 12s; }

@keyframes kineticCycle {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 20px)); filter: blur(4px); }
  4%   { opacity: 1; transform: translate(-50%, -50%);             filter: blur(0); }
  12%  { opacity: 1; transform: translate(-50%, -50%);             filter: blur(0); }
  16%  { opacity: 0; transform: translate(-50%, calc(-50% - 20px)); filter: blur(4px); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 20px)); filter: blur(4px); }
}

/* =========================================================
   MARQUEE — continuous-scrolling word band
   ========================================================= */
.marquee {
  overflow: hidden;
  border: 0;
  padding: 2rem 0;
  background: rgba(210, 208, 200, 0.32);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  position: relative;
}
.marquee::before, .marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 18%;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee-track {
  display: flex;
  gap: 3.5rem;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: marqueeScroll 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.marquee-item::after {
  content: '✦';
  color: var(--gold);
  font-size: 0.7em;
  font-style: normal;
  opacity: 0.85;
}
@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
  background: rgba(210, 208, 200, 0.32);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  border: 0;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.6s var(--easing), border-color 0.6s var(--easing), background 0.6s var(--easing);
}
.card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(212, 184, 134, 0.12) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s var(--easing);
  pointer-events: none;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-6px); }
.card:hover::before { opacity: 1; }
.card .card-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.card .card-num--lg {
  font-size: 2rem;
  letter-spacing: 0.04em;
  display: block;
  line-height: 1.1;
}
.card h3 { margin: 1rem 0; }
.card p { color: var(--ink-dim); font-size: 0.95rem; }
.card .card-foot { margin-top: 2rem; }

/* Service card */
.service-card {
  background: rgba(210, 208, 200, 0.32);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  border: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: border-color 0.5s var(--easing), transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
}
.service-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 246, 220, 0.6) 50%, transparent 62%);
  transform: translateX(-110%) skewX(-12deg);
  transition: transform 1s var(--easing);
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: overlay;
}
.service-card:hover {
  border-color: var(--line-strong);
  transform: perspective(900px) rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg)) translateY(-6px);
  box-shadow: var(--shadow-1);
}
.service-card:hover::before { transform: translateX(110%) skewX(-12deg); }
.service-card-img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f5ecdc, #e8d8b8);
  position: relative;
  overflow: hidden;
}
.service-card-img::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(168, 138, 82, 0.28) 0%, transparent 60%);
  transition: transform 1s var(--easing);
}
.service-card-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.service-card-img.has-product { display: flex; align-items: center; justify-content: center; }
.product-floater {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(var(--prod-x, 0px), var(--prod-y, 0px), 0) rotate(var(--prod-rot, 0deg));
  transition: transform 0.5s var(--easing-soft);
  will-change: transform;
}
.product-float {
  position: relative;
  z-index: 2;
  max-height: 78%;
  max-width: 50%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) drop-shadow(0 22px 32px rgba(210, 208, 200, 0.85)) drop-shadow(0 6px 12px rgba(210, 208, 200, 0.6));
  animation: productFloat 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform, filter;
  transition: filter 0.6s var(--easing);
}
.service-card:hover .product-float {
  filter: grayscale(0) drop-shadow(0 22px 32px rgba(210, 208, 200, 0.85)) drop-shadow(0 6px 12px rgba(210, 208, 200, 0.6));
}
.service-card:hover .product-float { animation-duration: 6.5s; }
@keyframes productFloat {
  0%, 100% { transform: translate3d(-2px, -12px, 0) rotate(-1.6deg); }
  50%      { transform: translate3d(2px, 12px, 0)   rotate(1.6deg); }
}

/* Larger, bolder eyebrow on service cards — no leading dash */
.service-card .eyebrow {
  font-size: 1rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--gold-deep);
  gap: 0;
}
.service-card .eyebrow::before { display: none; content: none; }

/* Bare variant — no card frame, just the floating product over the page */
.service-card--bare {
  background: transparent;
  border: 0;
  box-shadow: none !important;
}
.service-card--bare::before { content: none; }
.service-card--bare:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.service-card--bare .service-card-img,
.service-card--bare .service-card-img.has-product {
  background: transparent;
  aspect-ratio: 1 / 1;
  overflow: visible;
}
@media (max-width: 900px) {
  .service-card--bare .service-card-img.has-product { overflow: hidden; }
  .service-card--bare .product-float { max-height: 88%; max-width: 78%; }
  .service-card--bare .product-float--small { max-height: 70% !important; max-width: 70% !important; }
}
.service-card--bare .service-card-img::after { content: none; }
.service-card--bare .product-float {
  max-height: 110%;
  max-width: 92%;
  filter: drop-shadow(0 30px 42px rgba(210, 208, 200, 0.9)) drop-shadow(0 10px 18px rgba(210, 208, 200, 0.65));
}
.service-card--bare:hover .product-float {
  filter: drop-shadow(0 30px 42px rgba(210, 208, 200, 0.9)) drop-shadow(0 10px 18px rgba(210, 208, 200, 0.65));
}
/* Stagger float phase across products so they don't move in lockstep */
.service-card--bare:nth-of-type(2) .product-float { animation-delay: -3s; }
.service-card--bare:nth-of-type(3) .product-float { animation-delay: -6s; }
.service-card--bare:nth-of-type(4) .product-float { animation-delay: -1.5s; }
.service-card--bare:nth-of-type(5) .product-float { animation-delay: -4.5s; }
.service-card--bare:nth-of-type(6) .product-float { animation-delay: -7.5s; }

/* Rotated 45° variant — for landscape devices like the SkinPen */
.product-float--rotated {
  animation-name: productFloatRotated !important;
  max-height: 80% !important;
  max-width: 80% !important;
}
@keyframes productFloatRotated {
  0%, 100% { transform: translate3d(-2px, -10px, 0) rotate(43.6deg); }
  50%      { transform: translate3d(2px, 10px, 0)   rotate(46.4deg); }
}

/* Smaller variant — for illustrative/wider artwork */
.product-float--small {
  max-height: 78% !important;
  max-width: 78% !important;
}
/* No-rotate variant — floats vertically without tilting */
.product-float--straight {
  animation-name: productFloatStraight !important;
}
@keyframes productFloatStraight {
  0%, 100% { transform: translate3d(0, -10px, 0); }
  50%      { transform: translate3d(0, 10px, 0); }
}
/* Static variant — same sizing rules but no float animation, no scroll parallax */
.product-float--static {
  animation: none !important;
}
.product-float--static + *,
.has-product:has(.product-float--static) { /* fallback selectors */ }
.service-card--bare .service-card-body { padding: 1.5rem 1rem 0; text-align: center; }
.service-card:hover .service-card-img::after { transform: scale(1.15); }
.service-card-body { padding: 1.75rem; }
.service-card h4 { margin-bottom: 0.5rem; transition: color 0.4s; }
.service-card:hover h4 { color: var(--gold); }
.service-card p { color: var(--ink-dim); font-size: 0.9rem; }

/* =========================================================
   GRIDS
   ========================================================= */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* =========================================================
   FEATURED IMAGE/SPLIT
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split-image {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #f5ecdc, #e8d8b8);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.split-image::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(168, 138, 82, 0.28), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(176, 136, 102, 0.22), transparent 50%);
}
.split-image .badge {
  position: absolute;
  bottom: 1.5rem; right: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 0.7rem 1.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
}
.split-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.split-image .badge { z-index: 2; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } .split-image { aspect-ratio: 4/3; } }

/* =========================================================
   FEATURE LIST
   ========================================================= */
/* =========================================================
   SERVICES MENU (editorial)
   ========================================================= */
.svc-cat { margin: 5.5rem 0; }
.svc-cat:first-of-type { margin-top: 2.5rem; }
.svc-cat-head {
  max-width: 38rem;
  margin: 0 auto 2.75rem;
  text-align: center;
}
.svc-cat-num {
  font-family: var(--display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  display: block;
}
.svc-cat-head h2 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0.6rem 0 1rem;
  line-height: 1;
}
.svc-cat-lede {
  font-size: 1.02rem;
  margin: 0;
}
.svc-list { border-top: 1px solid var(--line); }
.svc-item {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 2.5rem;
  padding: 2rem 0.25rem;
  border-bottom: 1px solid var(--line);
  align-items: start;
  position: relative;
  transition: padding 0.45s var(--easing), background-color 0.45s var(--easing);
}
.svc-item::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--easing);
}
.svc-item:hover::before { transform: scaleY(1); transform-origin: top; }
.svc-item:hover { padding-left: 1.25rem; background: rgba(168, 138, 82, 0.025); }
.svc-item-title h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.85rem;
  margin: 0;
  color: var(--ink);
  line-height: 1.1;
}
.svc-item-title h3 sup {
  font-size: 0.55em;
  vertical-align: super;
  color: var(--gold);
}
.svc-item-meta {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.55rem;
  font-weight: 600;
}
.svc-item-meta a { color: inherit; transition: color 0.3s; }
.svc-item-meta a:hover { color: var(--gold-bright); }
.svc-item p {
  color: var(--ink-dim);
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 720px) {
  .svc-item {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 1.5rem 0.25rem;
  }
  .svc-item:hover { padding-left: 1rem; }
  .svc-cat { margin: 4rem 0; }
}

.feature-list { list-style: none; }
.feature-list li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  transition: padding 0.4s var(--easing);
}
.feature-list li:hover { padding-left: 1rem; }
.feature-list .num {
  font-family: var(--display);
  font-style: italic;
  color: var(--gold);
  font-size: 1rem;
}
.feature-list h4 { font-size: 1.4rem; }
.feature-list .meta { color: var(--ink-dim); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 640px) {
  .feature-list li {
    grid-template-columns: auto 1fr;
    grid-template-areas: 'num title' '. meta';
    gap: 0.4rem 1rem;
    padding: 1.25rem 0;
  }
  .feature-list .num { grid-area: num; align-self: start; padding-top: 0.25rem; }
  .feature-list h4 { grid-area: title; font-size: 1.15rem; }
  .feature-list .meta { grid-area: meta; font-size: 0.72rem; letter-spacing: 0.18em; }
}

/* =========================================================
   ACCORDION (FAQ)
   ========================================================= */
.accordion-item {
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
}
.accordion-q {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  color: var(--ink);
  padding: 0.5rem 0;
  transition: color 0.4s var(--easing);
}
.accordion-q:hover { color: var(--gold); }
.accordion-q .icon {
  width: 28px; height: 28px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.5s var(--easing), background 0.4s;
}
.accordion-q .icon::before, .accordion-q .icon::after {
  content: ''; position: absolute;
  background: var(--gold);
  top: 50%; left: 50%;
  transition: transform 0.4s var(--easing);
}
.accordion-q .icon::before { width: 12px; height: 1px; transform: translate(-50%, -50%); }
.accordion-q .icon::after { width: 1px; height: 12px; transform: translate(-50%, -50%); }
.accordion-item.open .accordion-q .icon::after { transform: translate(-50%, -50%) scaleY(0); }
.accordion-item.open .accordion-q .icon { transform: rotate(180deg); background: rgba(212, 184, 134, 0.1); }
.accordion-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--easing);
  color: var(--ink-dim);
}
.accordion-a-inner { padding: 1.25rem 0 0.5rem; max-width: 760px; }
.accordion-item.open .accordion-a { max-height: 600px; }

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.testimonial {
  text-align: center;
  max-width: 880px;
  margin-inline: auto;
}
.testimonial-quote {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 2rem;
  letter-spacing: -0.005em;
}
.testimonial-quote::before { content: '“'; color: var(--gold); margin-right: 0.2em; }
.testimonial-quote::after { content: '”'; color: var(--gold); margin-left: 0.1em; }
.testimonial-meta { font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.testimonial-meta span { color: var(--ink-mute); margin-left: 0.5rem; }

/* =========================================================
   SERVICES SECTION — decorative off-center rectangle
   ========================================================= */
.services-section {
  position: relative;
  isolation: isolate;
}
/* Frosted accent behind the section heading. Applied to the heading block ITSELF (not an
   absolutely-positioned ::before) so it is content-sized and gutter-aligned: it hugs whatever
   the heading wraps to and sits behind the words at EVERY viewport width. The old ::before used
   vw coordinates measured from the full-width section while the heading lives in a centered
   max-1480px container, so the two drifted apart as the window resized — into the left margin on
   wide screens, clipping the text on phones. Anchoring the tint to the content removes that whole
   class of bug. Padding scales with the viewport so the breathing room matches the heading size. */
.services-section .section-head > div:first-child {
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: clamp(1rem, 1.5vw, 1.6rem) clamp(1.25rem, 1.8vw, 2rem);
  background: rgba(210, 208, 200, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  backdrop-filter: blur(10px) saturate(110%);
}

/* =========================================================
   REVIEWS — Google rating + testimonial cards
   ========================================================= */
.reviews-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.reviews-rating-num {
  font-family: var(--display);
  font-size: clamp(3rem, 5vw, 4.2rem);
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.reviews-rating-meta {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.stars {
  display: inline-flex;
  gap: 0.25rem;
  font-size: 1.05rem;
  line-height: 1;
}
.stars--lg { font-size: 1.4rem; }
.star {
  display: inline-block;
  width: 1em; height: 1em;
  background: linear-gradient(90deg, var(--gold) var(--fill, 0%), rgba(168, 138, 82, 0.22) var(--fill, 0%));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l2.94 6.36 6.96.78-5.18 4.78 1.44 6.86L12 17.9l-6.16 3.38 1.44-6.86L2.1 9.64l6.96-.78z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l2.94 6.36 6.96.78-5.18 4.78 1.44 6.86L12 17.9l-6.16 3.38 1.44-6.86L2.1 9.64l6.96-.78z'/></svg>") center/contain no-repeat;
}
.star--filled  { --fill: 100%; }
.star--partial { --fill: 80%; }
.star--empty   { --fill: 0%; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.review-card {
  background: rgba(210, 208, 200, 0.32);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform 0.5s var(--easing);
}
.review-card:hover { transform: translateY(-4px); }
.review-quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.review-quote::before { content: '"'; color: var(--gold); margin-right: 0.1em; }
.review-quote::after { content: '"'; color: var(--gold); margin-left: 0.05em; }
.review-author {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0;
}
.review-author span {
  color: var(--ink-mute);
  margin-left: 0.4rem;
  font-weight: 600;
}
.reviews-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 1000px) { .reviews-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }

/* =========================================================
   STATS
   ========================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 4rem;
}
.stat { text-align: center; }
.stat-num {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.stat-label { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 3rem 1.5rem; } }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #f5ecdc, #e3d2ad);
  border: 0;
  margin: 0;
}
.gallery-item::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at var(--gx, 30%) var(--gy, 30%), rgba(168, 138, 82, 0.28), transparent 55%),
    radial-gradient(circle at calc(100% - var(--gx, 30%)) calc(100% - var(--gy, 30%)), rgba(176, 136, 102, 0.22), transparent 55%);
  transition: transform 1.2s var(--easing);
}
.gallery-item:hover::after { transform: scale(1.15); }
.gallery-item .label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(27, 22, 16, 0.78));
  z-index: 2;
  transform: translateY(20%);
  opacity: 0;
  transition: transform 0.5s var(--easing), opacity 0.5s var(--easing);
}
.gallery-item .label h4 { color: var(--bg); }
.gallery-item:hover .label { transform: translateY(0); opacity: 1; }
.gallery-item .label small { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; }
.gallery-item .label h4 { font-size: 1.1rem; margin-top: 0.4rem; }
.gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 1.2s var(--easing); }
.gallery-item:hover img { transform: scale(1.05); }
/* keep labels readable on touch devices where there is no hover */
@media (hover: none) and (pointer: coarse) { .gallery-item .label { opacity: 1; transform: none; } }

.gallery-item.span-3 { grid-column: span 3; }
.gallery-item.span-4 { grid-column: span 4; }
.gallery-item.span-6 { grid-column: span 6; }
.gallery-item.span-8 { grid-column: span 8; aspect-ratio: 16/9; }
.gallery-item.span-12 { grid-column: span 12; aspect-ratio: 21/9; }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(6, 1fr); }
  .gallery-item.span-3 { grid-column: span 3; }
  .gallery-item.span-4 { grid-column: span 6; }
  .gallery-item.span-6 { grid-column: span 6; }
  .gallery-item.span-8 { grid-column: span 6; aspect-ratio: 4/3; }
}

/* =========================================================
   FORMS
   ========================================================= */
.form { display: grid; gap: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { position: relative; }
.field label {
  position: absolute; top: 1rem; left: 0;
  font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  pointer-events: none;
  transition: transform 0.4s var(--easing), color 0.4s, font-size 0.4s;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.4s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field.filled label { transform: translateY(-1.4rem); font-size: 0.66rem; color: var(--gold); }
.field select { padding-right: 2rem; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

/* =========================================================
   PRICING
   ========================================================= */
.price-card {
  background: rgba(210, 208, 200, 0.32);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  border: 0;
  padding: 3rem 2.5rem;
  position: relative;
  transition: border-color 0.5s var(--easing), transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
  transform-style: preserve-3d;
  will-change: transform;
}
.price-card:hover {
  border-color: var(--line-strong);
  transform: perspective(900px) rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg)) translateY(-6px);
  box-shadow: var(--shadow-1);
}
.price-card.featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(212, 184, 134, 0.08), transparent 50%), var(--bg-soft);
}
.price-card.featured::before {
  content: 'Most Popular';
  position: absolute; top: -1px; left: 50%; transform: translate(-50%, -50%);
  background: var(--gradient-gold);
  color: var(--bg);
  padding: 0.4rem 1.2rem;
  font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 600;
}
.price-card h3 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.price-card .price {
  font-family: var(--display);
  font-size: 3.5rem;
  color: var(--gold);
  line-height: 1;
  margin: 1.2rem 0 0.5rem;
  letter-spacing: -0.02em;
}
.price-card .price small { font-size: 0.9rem; color: var(--ink-dim); margin-left: 0.4rem; letter-spacing: 0.1em; }
.price-card ul { list-style: none; margin: 2rem 0; }
.price-card li {
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.95rem;
  color: var(--ink-dim);
  position: relative;
  padding-left: 1.5rem;
}
.price-card li::before {
  content: '✦'; color: var(--gold);
  position: absolute; left: 0; top: 0.7rem;
  font-size: 0.65rem;
}

/* =========================================================
   PAGE HEADER (sub-pages)
   ========================================================= */
.page-header {
  padding: 12rem 0 5rem;
  position: relative;
  overflow: hidden;
  border: 0;
}
@media (max-width: 720px) {
  .page-header { padding: 7.5rem 0 3rem; }
  .page-header h1 { margin-bottom: 1rem; }
  .breadcrumb { font-size: 0.62rem; letter-spacing: 0.22em; margin-bottom: 1rem; }
  .page-header p { font-size: 0.98rem; }
}
.page-header::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.2) 100%),
    url('../img/page-header-bg.webp') center center / cover no-repeat;
  z-index: -1;
}
.page-header--shop::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.05) 100%),
    url('../img/shop-bg.webp') center center / cover no-repeat;
}
.page-header h1 { font-size: clamp(2.5rem, 7vw, 6rem); margin-bottom: 1.5rem; }
.page-header p { color: var(--ink-dim); max-width: 640px; font-size: 1.05rem; }
.breadcrumb { display: flex; gap: 0.6rem; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.5rem; font-weight: 600; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: var(--gold); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: #ffffff;
  border-top: 1px solid var(--line);
  padding: 6rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-mark {
  font-family: var(--display);
  font-size: clamp(1.6rem, 11.2vw, 11rem);
  text-align: center;
  letter-spacing: 0.18em;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4rem;
  line-height: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--line);
}
.footer h5 {
  font-family: var(--body);
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  font-weight: 600;
}
.footer ul { list-style: none; display: grid; gap: 0.75rem; }
.footer ul a {
  color: var(--ink-dim);
  font-size: 0.95rem;
  transition: color 0.3s, padding 0.3s;
}
.footer ul a:hover { color: var(--gold); padding-left: 0.5rem; }
.footer-info p { color: var(--ink-dim); font-size: 0.95rem; margin-bottom: 1rem; max-width: 360px; }
.footer-bottom {
  display: flex; justify-content: space-between;
  padding-top: 2rem;
  font-size: 0.75rem; color: var(--ink-mute); letter-spacing: 0.1em;
}
.footer-bottom a:hover { color: var(--gold); }
.socials { display: flex; gap: 1rem; }
.socials a {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.4s, color 0.4s, transform 0.4s;
  color: var(--ink-dim);
}
.socials a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.socials svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer { padding: 4rem 0 2rem; }
}

/* =========================================================
   CURSOR (custom)
   ========================================================= */
.cursor {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-deep);
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: transform 0.15s var(--easing-soft), width 0.4s, height 0.4s, background 0.4s, opacity 0.3s;
  mix-blend-mode: multiply;
}
.cursor.ring {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--gold-deep);
  transition: transform 0.5s var(--easing-soft), width 0.4s, height 0.4s;
}
.cursor.hover { width: 60px; height: 60px; background: rgba(168, 138, 82, 0.18); border-color: var(--gold-deep); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* =========================================================
   FILTERS / TABS
   ========================================================= */
.filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center;
  margin-bottom: 3rem;
}
.filter-btn {
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--line);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s var(--easing);
  border-radius: 999px;
}
.filter-btn:hover { color: var(--ink); border-color: var(--gold); }
.filter-btn.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

/* =========================================================
   SHOP
   ========================================================= */
.shop-card {
  background: rgba(210, 208, 200, 0.32);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.4s, transform 0.5s var(--easing);
}
.shop-card:hover { border-color: var(--line-strong); transform: translateY(-6px); }
.shop-card-img {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #f5ecdc 0%, #e8d8b8 100%);
  position: relative; overflow: hidden;
}
.shop-card-img::after {
  content: ''; position: absolute; inset: 30% 25%;
  background: var(--gradient-gold);
  opacity: 0.35;
  border-radius: 50%;
  filter: blur(20px);
  transition: transform 1s var(--easing);
}
.shop-card:hover .shop-card-img::after { transform: scale(1.4); }
.shop-card-body { padding: 1.5rem; }
.shop-card .brand { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.shop-card h4 { font-size: 1.1rem; margin: 0.3rem 0 0.8rem; }
.shop-card .price-tag { font-family: var(--display); font-size: 1.3rem; color: var(--ink); }

/* =========================================================
   BRAND GRID — for Shop page (no e-commerce, in-studio only)
   ========================================================= */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.brand-card {
  background: rgba(210, 208, 200, 0.32);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  padding: 2.5rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.5s var(--easing);
}
.brand-card:hover { transform: translateY(-6px); }
.brand-logo {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.brand-logo img {
  max-width: 80%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
}
.brand-logo[data-brand="skin-medica"] img {
  max-width: 105%;
  max-height: 130%;
}
.brand-card h4 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.brand-card p {
  color: var(--ink-dim);
  font-size: 0.9rem;
  line-height: 1.55;
}
@media (max-width: 1000px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .brand-grid { grid-template-columns: 1fr; } }

/* =========================================================
   GIFT CARD
   ========================================================= */
.giftcard {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, #fbf3df 0%, #f0e1bc 50%, #e8d4a4 100%);
  border: 1px solid var(--gold);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.giftcard::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(201, 168, 106, 0.45), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(176, 136, 102, 0.32), transparent 50%);
  animation: shimmer 6s var(--easing-soft) infinite alternate;
}
@keyframes shimmer {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2%, -2%) scale(1.05); }
}
.giftcard-mark { font-family: var(--display); font-size: 1.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); position: relative; z-index: 1;}
.giftcard-amount { position: relative; z-index: 1; }
.giftcard-amount .label { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.5rem; font-weight: 600; }
.giftcard-amount .num { font-family: var(--display); font-size: 3.5rem; color: var(--ink); line-height: 1; }

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline {
  position: relative;
  padding-left: 3rem;
}
.timeline::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 0.6rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.timeline-item { padding-bottom: 3rem; position: relative; }
.timeline-item::before {
  content: ''; position: absolute;
  left: -2.45rem; top: 0.3rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 184, 134, 0.2);
}
.timeline-item .year { font-family: var(--display); font-style: italic; color: var(--gold); font-size: 0.95rem; letter-spacing: 0.1em; margin-bottom: 0.3rem; }
.timeline-item h4 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.timeline-item p { color: var(--ink-dim); font-size: 0.95rem; }

/* =========================================================
   STORY TIMELINE — clean modern vertical timeline
   ========================================================= */
.story-timeline {
  list-style: none;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0;
  max-width: 760px;
  position: relative;
}
.story-timeline::before {
  content: '';
  position: absolute;
  left: 7.5rem;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
}
.story-step {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 2rem;
  padding: 1.4rem 0 2.6rem;
  align-items: start;
}
.story-step::before {
  content: '';
  position: absolute;
  left: calc(7.5rem - 6px);
  top: 1.85rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--gold);
  z-index: 1;
  transition: background 0.4s var(--easing), transform 0.4s var(--easing);
}
.story-step:hover::before {
  background: var(--gold);
  transform: scale(1.3);
}
.story-step--present::before {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(168, 138, 82, 0.18);
}
.story-year {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: right;
  padding-right: 1.5rem;
}
.story-content h4 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  color: var(--ink);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.story-content p {
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0;
  max-width: 50ch;
}
@media (max-width: 600px) {
  .story-timeline::before { left: 0.6rem; }
  .story-step {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding-left: 2rem;
  }
  .story-step::before {
    left: 0;
    top: 0.5rem;
  }
  .story-year {
    text-align: left;
    padding-right: 0;
  }
}

/* =========================================================
   STORY FLOW — editorial "ghost year" layout. Massive faded
   italic years sit behind the content, alternating sides.
   ========================================================= */
.story-flow {
  max-width: 1320px;
  margin: clamp(3rem, 6vw, 6rem) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 3rem);
  position: relative;
}
.chapter {
  position: relative;
  padding: clamp(3rem, 5vw, 5rem) 0;
  display: flex;
  align-items: center;
  min-height: clamp(220px, 26vw, 360px);
  isolation: isolate;
}
.ghost-year {
  position: absolute;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  background: linear-gradient(140deg,
    rgba(245, 227, 185, 0.22) 0%,
    rgba(212, 184, 134, 0.12) 45%,
    rgba(122, 98, 56, 0.04) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  z-index: 0;
  top: 50%;
  white-space: nowrap;
  transition: background 0.8s var(--easing), transform 0.9s var(--easing);
}
.chapter-left  .ghost-year { left:  -2vw; transform: translateY(-50%); }
.chapter-right .ghost-year { right: -2vw; transform: translateY(-50%); }

.chapter-body {
  position: relative;
  z-index: 2;
  max-width: 480px;
  padding: 1.4rem 1.6rem 1.4rem 1.8rem;
  background: linear-gradient(180deg, rgba(248, 241, 227, 0.65), rgba(248, 241, 227, 0.92));
  backdrop-filter: blur(2px);
  border-left: 1px solid var(--gold);
}
.chapter-right .chapter-body {
  margin-left: auto;
  border-left: none;
  border-right: 1px solid var(--gold);
  padding: 1.4rem 1.8rem 1.4rem 1.6rem;
  text-align: right;
}
.chapter-left  .chapter-body { margin-left: clamp(2rem, 14vw, 12rem); }
.chapter-right .chapter-body { margin-right: clamp(2rem, 14vw, 12rem); }

.chapter-mark {
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  display: block;
  margin-bottom: 0.9rem;
}
.chapter h4 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.05;
  margin-bottom: 0.85rem;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.chapter p {
  color: var(--ink-dim);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 48ch;
}
.chapter-right p { margin-left: auto; }

.chapter:hover .ghost-year {
  background: linear-gradient(140deg,
    rgba(245, 227, 185, 0.45) 0%,
    rgba(212, 184, 134, 0.25) 45%,
    rgba(122, 98, 56, 0.08) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.chapter-left:hover  .ghost-year { transform: translateY(-50%) translateX(-1.5vw); }
.chapter-right:hover .ghost-year { transform: translateY(-50%) translateX(1.5vw); }

.chapter.present .ghost-year {
  background: linear-gradient(140deg,
    rgba(255, 251, 237, 0.4) 0%,
    rgba(232, 207, 159, 0.22) 45%,
    rgba(168, 138, 82, 0.08) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 800px) {
  .chapter {
    padding: clamp(4rem, 10vw, 6rem) 0 1.5rem;
    min-height: 0;
    flex-direction: column;
  }
  .ghost-year {
    font-size: clamp(5rem, 22vw, 9rem);
    top: 0;
    transform: none;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .chapter-left .ghost-year,
  .chapter-right .ghost-year { left: 50%; right: auto; transform: translateX(-50%); }
  .chapter-body,
  .chapter-left .chapter-body,
  .chapter-right .chapter-body {
    margin: 0;
    text-align: left;
    border-left: 1px solid var(--gold);
    border-right: none;
    max-width: 100%;
  }
  .chapter-right p { margin-left: 0; }
}

/* =========================================================
   BANNER CTA
   ========================================================= */
.cta-band {
  background: rgba(210, 208, 200, 0.32);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  padding: clamp(4rem, 8vw, 7rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 0;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(168, 138, 82, 0.18), transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(176, 136, 102, 0.12), transparent 50%);
}
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: 1.5rem; max-width: 780px; margin-inline: auto; }
.cta-band p { color: var(--ink-dim); margin-bottom: 2.5rem; max-width: 600px; margin-inline: auto; }

/* Utility */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* =========================================================
   PARALLAX FLOATERS
   ========================================================= */
.floater {
  position: absolute;
  pointer-events: none;
  opacity: 0.4;
  filter: blur(0.5px);
}
.floater.f1 {
  top: 10%; left: 5%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  opacity: 0.08;
  animation: floatY 12s var(--easing-soft) infinite alternate;
}
.floater.f2 {
  bottom: 10%; right: 8%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--rose) 0%, transparent 70%);
  opacity: 0.07;
  animation: floatY 15s var(--easing-soft) infinite alternate-reverse;
}
@keyframes floatY {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -30px) scale(1.1); }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(248, 241, 227, 0.94);
  backdrop-filter: blur(20px);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  opacity: 0;
  transition: opacity 0.5s var(--easing);
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox-content {
  max-width: 1100px;
  width: 100%;
  text-align: center;
}
.lightbox-img {
  aspect-ratio: 4/5;
  max-height: 75vh;
  margin-inline: auto;
  background: linear-gradient(135deg, #f5ecdc, #e3d2ad);
  border: 1px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.lightbox-img::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(168, 138, 82, 0.32), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(176, 136, 102, 0.25), transparent 55%);
}
.lightbox-close {
  position: absolute; top: 2rem; right: 2rem;
  width: 50px; height: 50px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.4rem;
}
.lightbox-caption { margin-top: 1.5rem; color: var(--gold); letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.78rem; font-weight: 600; }

/* ============================================================
   Motion preferences (added 2026-05-27, fixed) — smooth on mobile/low-power.
   Neutralize animations by finishing them INSTANTLY (NOT animation:none, which
   strands opacity:0 entrance elements hidden). Entrance animations use
   fill-mode:forwards, so they end visible; infinite ambient ones stop after one
   instant cycle — no continuous GPU cost.
   ============================================================ */
@media (prefers-reduced-motion: reduce), (hover: none) and (pointer: coarse) {
  /* Snap ambient/continuous animations to one instant cycle (battery + perf on phones,
     accessibility for reduced-motion). EXEMPT .kinetic-word — the word-cycler is opt-in via
     .is-cycling and gated separately (JS + Low Power Mode probe), so it must keep real timing
     when enabled; the base rule already shows a static first word when it isn't. */
  *:not(.kinetic-word), *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}
/* Reduced-motion only: flatten transitions, reveal scroll content immediately, and force the
   word-cycler to its static first word (accessibility always wins over the JS opt-in). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  [data-reveal], .split-line { opacity: 1 !important; transform: none !important; }
  .kinetic.is-cycling .kinetic-word { animation: none !important; opacity: 0 !important; }
  .kinetic.is-cycling .kinetic-word:first-child { opacity: 1 !important; transform: translate(-50%, -50%) !important; filter: none !important; }
}

/* =========================================================
   EVENT REEL (Sip & Glow — vertical Instagram reel)
   ========================================================= */
.split-image--reel { aspect-ratio: 9 / 16; max-width: 400px; width: 100%; justify-self: center; }
.split-image--reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
@media (max-width: 800px) {
  .split-image--reel { aspect-ratio: 9 / 16; max-width: 320px; margin-inline: auto; }
}

/* =========================================================
   TEAM BIO MODAL
   ========================================================= */
button.btn-link { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; text-align: left; }
.bio-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.bio-modal[hidden] { display: none; }
.bio-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 16, 10, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.bio-modal-panel {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: min(85vh, 85dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border: 1px solid var(--gold);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.bio-modal-panel h3 { font-size: clamp(1.6rem, 3vw, 2rem); }
.bio-modal-body p { color: var(--ink-dim); margin-bottom: 1.1rem; }
.bio-modal-body p:last-child { margin-bottom: 0; }
.bio-modal-close {
  position: absolute;
  top: 0.9rem; right: 1.1rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.9rem; line-height: 1;
  color: var(--ink-dim);
}
.bio-modal-close:hover { color: var(--gold); }

/* =========================================================
   PHOTO SERVICE TILES (Facials & Peels, For Him)
   Full-bleed photography instead of floating product cutouts.
   ========================================================= */
.service-card--bare .service-card-img.has-photo {
  overflow: hidden;
  background: linear-gradient(135deg, #f5ecdc, #e8d8b8);
  border: 1px solid var(--line);
}
.service-card--bare .service-card-img.has-photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--easing);
}
.service-card--bare:hover .service-card-img.has-photo > img { transform: scale(1.04); }

/* 5-tile brand grid: center the odd tile on its own row */
.brand-grid > .brand-card:nth-child(5):last-child { grid-column: 2 / span 2; }
@media (max-width: 1000px) { .brand-grid > .brand-card:nth-child(5):last-child { grid-column: span 2; } }
@media (max-width: 540px)  { .brand-grid > .brand-card:nth-child(5):last-child { grid-column: auto; } }

/* Footer wordmark sub-line (Haus of Beauty rebrand) */
.footer-mark-sub {
  text-align: center;
  font-size: clamp(0.6rem, 1.6vw, 1.05rem);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  color: var(--gold);
  margin-top: 0.35rem;
}

/* Settled hero: after the word-reveal has finished (or been skipped by a frozen
   background-tab timeline), never clip the glyphs again. */
.hero-title--settled .word { overflow: visible; }
.hero-title--settled .word > span { animation: none; transform: none; }


/* ---------- Monthly specials ---------- */
.specials-mount { min-height: 12rem; }
.specials-loading { text-align: center; padding: 4rem 0; }

.specials-grid { display: grid; gap: 2.5rem; }
.specials-grid.count-1 { grid-template-columns: minmax(0, 620px); justify-content: center; }
.specials-grid.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin: 0 auto; }
.specials-grid.count-many { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.special-card { margin: 0; }

/* Flyers are 8.5x11. Contain, never crop: these carry pricing text. */
.special-flyer {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 17 / 22; background: var(--cream);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: box-shadow 0.5s var(--easing), border-color 0.5s var(--easing);
}
.special-flyer img { width: 100%; height: 100%; object-fit: contain; display: block; }
.special-flyer:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }

.special-zoom {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  padding: 0.55rem 1rem; background: rgba(27, 22, 16, 0.78); color: var(--cream);
  font-family: var(--body); font-size: 0.62rem; letter-spacing: 0.24em;
  text-transform: uppercase; font-weight: 600;
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.4s var(--easing), transform 0.4s var(--easing);
}
.special-flyer:hover .special-zoom, .special-flyer:focus-visible .special-zoom {
  opacity: 1; transform: translateY(0);
}

.special-meta { padding-top: 1.25rem; }
.special-meta h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.special-meta p { font-size: 0.92rem; line-height: 1.65; margin: 0; }

.specials-note { text-align: center; max-width: 620px; margin: 0 auto; padding: 3rem 0 4rem; }
.specials-note a { color: var(--gold); border-bottom: 1px solid var(--line-strong); }
.specials-note a:hover { color: var(--gold-deep); }

@media (max-width: 1100px) {
  .specials-grid.count-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .specials-grid { gap: 2rem; }
  .specials-grid.count-1,
  .specials-grid.count-2,
  .specials-grid.count-many {
    grid-template-columns: minmax(0, 420px); justify-content: center; max-width: none;
  }
  .special-zoom { opacity: 1; transform: translateY(0); }
}