/* ==========================================================================
   Elite Hair by Erica — "In Full Bloom"
   Hand-written CSS, no build step. Colours and type live in :root below.
   ========================================================================== */

:root {
  /* Palette: blush + garnet + champagne gold */
  --cream: #fff8f3;
  --paper: #fffcfa;
  --blush: #f9e1e7;
  --blush-2: #f4cfd9;
  --peony: #ec9fb5;
  --rose: #c93d6a;
  --rose-ink: #a8285a;      /* rose text on light backgrounds (AA) */
  --garnet: #4a0b23;
  --garnet-2: #5e1030;
  --garnet-3: #2c0613;      /* deepest */
  --ink: #2a0f19;
  --muted: #6d5360;
  --muted-dark: #d9c3c8;    /* secondary text on garnet */
  --gold: #c6a15b;          /* ornament only, never small text on light */
  --gold-ink: #7d5719;      /* gold text on light backgrounds (AA) */
  --champagne: #f0d9a8;     /* gold text on garnet */
  --line: rgba(74, 11, 35, .14);
  --line-gold: rgba(198, 161, 91, .45);
  --foil: linear-gradient(105deg, #b98a3e 0%, #f3dc9f 26%, #d4ad62 46%, #fae7b8 64%, #c1924a 84%, #e9c983 100%);

  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-soft: cubic-bezier(.45, .05, .2, 1);
  --wrap: 1240px;
  --gutter: 16px;
  --header-h: 72px;
}

@media (min-width: 700px) {
  :root { --gutter: 32px; --header-h: 84px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

img { height: auto; }

a { color: inherit; }

button,
input { font: inherit; color: inherit; }

button { cursor: pointer; }

a,
button { -webkit-tap-highlight-color: transparent; }

::selection { color: var(--cream); background: var(--garnet); }

:focus-visible {
  outline: 2px solid var(--rose-ink);
  outline-offset: 3px;
  border-radius: 8px;
}

.on-dark :focus-visible { outline-color: var(--champagne); }

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  color: var(--cream);
  background: var(--garnet);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: none; }

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Type ---------- */

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.012em;
  font-optical-sizing: auto;
}

h1 em,
h2 em,
h3 em { font-style: italic; }

.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--rose-ink);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1.3;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: .55;
}

.section {
  position: relative;
  overflow-x: clip;
  padding-block: clamp(88px, 12vw, 168px);
}

.section-head {
  max-width: 820px;
  margin-bottom: clamp(44px, 6vw, 80px);
}

.section-title {
  font-size: clamp(2.75rem, 8.4vw, 6.2rem);
  line-height: .94;
  color: var(--garnet);
}

.section-title em { color: var(--rose-ink); }

.lede {
  max-width: 34em;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.6;
}

.foil {
  color: var(--champagne);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .foil {
    color: transparent;
    background: var(--foil);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: sheen 7s ease-in-out 1s 2;
  }
}

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

.btn {
  position: relative;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .35s var(--ease), background-color .3s ease, background-position .6s ease, color .3s ease, border-color .3s ease, box-shadow .35s ease;
}

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(0) scale(.98); }

.btn .i { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
@media (hover: hover) {
  .btn:hover .i-arrow { transform: translateX(4px); }
}

.btn-gold {
  color: var(--garnet-3);
  background: var(--foil);
  background-size: 200% 100%;
  background-position: 0% 0;
  box-shadow: 0 14px 34px -14px rgba(233, 196, 120, .75), inset 0 1px 0 rgba(255, 255, 255, .55);
}

@media (hover: hover) {
  .btn-gold:hover {
    background-position: 100% 0;
    box-shadow: 0 18px 42px -14px rgba(233, 196, 120, .9), inset 0 1px 0 rgba(255, 255, 255, .55);
  }
}

.btn-garnet {
  color: var(--cream);
  background: var(--garnet);
  box-shadow: 0 14px 34px -16px rgba(74, 11, 35, .7);
}

@media (hover: hover) {
  .btn-garnet:hover { background: var(--garnet-2); }
}

.btn-line {
  color: currentColor;
  border-color: rgba(240, 217, 168, .45);
  background: rgba(255, 255, 255, .03);
}

@media (hover: hover) {
  .btn-line:hover { border-color: var(--champagne); background: rgba(255, 255, 255, .08); }
}

.btn-line-dark {
  color: var(--garnet);
  border-color: rgba(74, 11, 35, .28);
  background: transparent;
}

@media (hover: hover) {
  .btn-line-dark:hover { border-color: var(--garnet); background: rgba(74, 11, 35, .04); }
}

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

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--cream);
}

.js .site-header {
  position: fixed;
  transition: background-color .45s ease, color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease;
}

.js .site-header.is-scrolled {
  background: rgba(31, 3, 13, .8);
  box-shadow: 0 1px 0 rgba(240, 217, 168, .14);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

.js .site-header.is-solid {
  color: var(--garnet);
  background: rgba(255, 248, 243, .86);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgba(74, 11, 35, .35);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

.header-inner {
  display: flex;
  height: var(--header-h);
  align-items: center;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  text-decoration: none;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25));
}

.brand-word {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.brand-word em {
  font-style: italic;
  color: var(--champagne);
  transition: color .45s ease;
}

.is-solid .brand-word em { color: var(--rose-ink); }

.nav {
  display: none;
  align-items: center;
  gap: clamp(22px, 2.6vw, 38px);
}

.nav a {
  position: relative;
  padding-block: 10px;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}

@media (hover: hover) {
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.header-cta { display: none; min-height: 46px; padding: 0 22px; font-size: .74rem; }

.is-solid .header-cta.btn-gold { box-shadow: 0 10px 26px -14px rgba(160, 110, 40, .8), inset 0 1px 0 rgba(255, 255, 255, .55); }

.menu-btn {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  border-color: rgba(240, 217, 168, .45);
  background: transparent;
  transition: border-color .3s ease;
}

.is-solid .menu-btn { border-color: rgba(74, 11, 35, .25); }

.menu-btn svg { width: 20px; height: 20px; }

@media (min-width: 560px) {
  .header-cta { display: inline-flex; }
}

@media (min-width: 1000px) {
  .nav { display: flex; }
  .menu-btn { display: none; }
  .brand-mark { width: 46px; height: 46px; }
  .brand-word { font-size: 1.28rem; }
}

/* Mobile navigation: native popover, works without JavaScript */
.mobile-nav {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: calc(var(--header-h) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto;
  border: 0;
  color: var(--cream);
  background:
    radial-gradient(70% 45% at 90% 8%, rgba(201, 61, 106, .38), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(198, 161, 91, .18), transparent 70%),
    var(--garnet-3);
}

.mobile-nav:popover-open {
  display: flex;
  flex-direction: column;
}

.mobile-nav::backdrop { background: rgba(20, 2, 9, .5); }

@media (prefers-reduced-motion: no-preference) {
  .mobile-nav {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .35s ease, transform .45s var(--ease), overlay .45s allow-discrete, display .45s allow-discrete;
  }
  .mobile-nav:popover-open { opacity: 1; transform: none; }
  @starting-style {
    .mobile-nav:popover-open { opacity: 0; transform: translateY(-12px); }
  }
}

.mobile-nav-brand {
  position: absolute;
  top: calc((var(--header-h) - 42px) / 2);
  left: var(--gutter);
}

.mobile-nav-close {
  position: absolute;
  top: calc((var(--header-h) - 48px) / 2);
  right: var(--gutter);
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(240, 217, 168, .45);
  border-radius: 50%;
  background: transparent;
}

.mobile-nav-close svg { width: 20px; height: 20px; }

.mobile-nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nav;
}

.mobile-nav li { counter-increment: nav; }

.mobile-nav ol a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(240, 217, 168, .16);
  font-family: var(--serif);
  font-size: clamp(2.1rem, 10vw, 3rem);
  line-height: 1.05;
  text-decoration: none;
}

.mobile-nav ol a::before {
  content: "0" counter(nav);
  color: var(--champagne);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .2em;
}

.mobile-nav-foot {
  margin-top: auto;
  padding-top: 36px;
}

.mobile-nav-foot .btn { width: 100%; }

.mobile-nav-foot p {
  margin: 18px 0 0;
  color: var(--muted-dark);
  font-size: .9rem;
  text-align: center;
}

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

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(var(--header-h) + 28px) 0 clamp(64px, 8vw, 110px);
  color: var(--cream);
  background: var(--garnet-3);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(55% 48% at 78% 52%, rgba(201, 61, 106, .5), transparent 72%),
    radial-gradient(38% 34% at 8% 12%, rgba(198, 161, 91, .17), transparent 70%),
    radial-gradient(90% 60% at 50% 115%, rgba(236, 159, 181, .22), transparent 62%),
    linear-gradient(165deg, #3d0a20 0%, #2c0613 52%, #1f030d 100%);
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 6vw, 64px);
}

.hero-copy { position: relative; z-index: 2; max-width: 640px; }

.hero .kicker { color: var(--champagne); }

.hero-title {
  font-size: clamp(3.5rem, 15.5vw, 8.6rem);
  line-height: .9;
  letter-spacing: -.025em;
}

.hero-title .line { display: block; }

.hero-title .line > span { display: inline-block; }

.hero-title em { padding-right: .06em; }

.hero-lede {
  max-width: 30em;
  margin: 26px 0 0;
  color: var(--muted-dark);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 28px 0 0;
  color: var(--muted-dark);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero-meta a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 217, 168, .5);
}

@media (hover: hover) {
  .hero-meta a:hover { border-color: var(--champagne); }
}

.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--champagne); opacity: .7; }

/* The bouquet: three arched photographs fanned like stems, a posy at the base */
.hero-art {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 1 / .98;
  justify-self: center;
  margin-inline: auto;
  --px: 0;
  --py: 0;
}

.strands {
  position: absolute;
  inset: -4% -6% 2% -10%;
  z-index: 0;
  width: 116%;
  height: 102%;
  overflow: visible;
  pointer-events: none;
}

.strands path {
  fill: none;
  stroke: url(#strandGold);
  stroke-linecap: round;
}

.fan {
  position: absolute;
  bottom: 17%;
  width: 40%;
  margin: 0;
  aspect-ratio: 3 / 4.15;
  overflow: hidden;
  border-radius: 999px 999px 20px 20px;
  background: var(--garnet-2);
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(240, 217, 168, .38);
  transform-origin: 50% 100%;
}

.fan::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(240, 217, 168, .6);
  border-radius: 999px 999px 14px 14px;
  pointer-events: none;
}

.fan picture,
.fan img { width: 100%; height: 100%; }

.fan img {
  object-fit: cover;
  transform: translate(calc(var(--px) * -8px), calc(var(--py) * -8px)) scale(1.07);
  transition: transform .8s var(--ease);
}

.fan-c { left: 29%; z-index: 2; width: 42%; bottom: 20%; }
.fan-l { left: 3%; z-index: 1; rotate: -12deg; }
.fan-r { right: 3%; z-index: 1; rotate: 12deg; }

.fan-l img { object-position: 50% 42%; }
.fan-c img { object-position: 50% 40%; }
.fan-r img { object-position: 62% 40%; }

.posy {
  position: absolute;
  bottom: -4%;
  left: 50%;
  z-index: 3;
  width: 104%;
  overflow: visible;
  translate: -50% 0;
  transform: translate(calc(var(--px) * 6px), calc(var(--py) * 5px));
  transition: transform .8s var(--ease);
  filter: drop-shadow(0 18px 26px rgba(20, 0, 8, .45));
}

.hero-badge {
  position: absolute;
  top: 2%;
  right: 1%;
  z-index: 4;
  display: grid;
  width: clamp(88px, 20%, 124px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(240, 217, 168, .5);
  border-radius: 50%;
  background: rgba(44, 6, 19, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: spin 40s linear infinite;
}

.badge-ring text {
  fill: var(--champagne);
  font-family: var(--sans);
  font-size: 8.6px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.badge-rose { width: 44%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }

@media (min-width: 1000px) {
  .hero {
    display: grid;
    min-height: min(100svh, 980px);
    align-items: center;
    padding-bottom: 72px;
  }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
  .hero-art { justify-self: end; margin-right: -10px; }
}

@media (min-width: 760px) and (max-width: 999px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 28px; }
  .hero-title { font-size: clamp(3.6rem, 8.8vw, 5.6rem); }
  .hero-lede { font-size: 1.02rem; }
}

/* Phones: headline, then the bouquet, then the words and buttons */
@media (max-width: 759px) {
  .hero { padding-top: calc(var(--header-h) + 22px); }
  .hero-grid { row-gap: 0; }
  .hero-copy { display: contents; }
  .hero .kicker { order: 1; margin-bottom: 16px; }
  .hero-title { order: 2; font-size: clamp(3.3rem, 17vw, 4.8rem); }
  .hero-art { order: 3; width: min(100%, 460px); margin: 18px auto 0; }
  .hero-lede { order: 4; margin-top: 30px; }
  .hero-actions { order: 5; }
  .hero-meta { order: 6; }
}

@media (max-width: 599px) {
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ---------- Ribbon ---------- */

.ribbon {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  color: var(--garnet);
  background: var(--blush);
  border-block: 1px solid var(--line-gold);
}

.ribbon-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(22px, 3vw, 40px);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.8vw, 2.15rem);
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
  animation: marquee 60s linear infinite;
}

@media (hover: hover) {
  .ribbon:hover .ribbon-track { animation-play-state: paused; }
}

.ribbon-track svg { width: 26px; height: 26px; flex: none; }

/* ---------- Menu ---------- */

.menu {
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(249, 225, 231, .75), transparent 70%),
    var(--cream);
}

.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--garnet);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  color: var(--rose-ink);
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0;
}

.steps li + li::after {
  order: -1;
  content: "";
  width: 22px;
  height: 1px;
  margin-right: 2px;
  background: var(--line-gold);
}

.menu-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
}

@media (min-width: 1040px) {
  .menu-layout { grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); }
}

.menu-card {
  position: relative;
  padding: clamp(26px, 4.6vw, 64px) clamp(20px, 4.2vw, 60px);
  border: 1px solid var(--line-gold);
  border-radius: 30px;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(249, 225, 231, .55), transparent 70%),
    var(--paper);
  box-shadow: 0 50px 90px -50px rgba(74, 11, 35, .35);
}

.menu-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(198, 161, 91, .3);
  border-radius: 22px;
  pointer-events: none;
}

.menu-sprig {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

.menu-sprig {
  width: clamp(170px, 24vw, 280px);
  filter: drop-shadow(0 14px 18px rgba(74, 11, 35, .18));
}

.menu-sprig--top { top: clamp(-70px, -5vw, -44px); right: clamp(-60px, -3vw, -24px); rotate: 10deg; }
.menu-sprig--bottom { bottom: clamp(-64px, -4.5vw, -40px); left: clamp(-60px, -3.5vw, -26px); rotate: 192deg; width: clamp(130px, 17vw, 210px); }

@media (max-width: 1039px) {
  .menu-sprig--bottom { display: none; }
}

.menu-cats {
  columns: 1;
  column-gap: clamp(32px, 5vw, 64px);
}

@media (min-width: 720px) {
  .menu-cats { columns: 2; }
}

.menu-cat {
  break-inside: avoid;
  margin-bottom: clamp(34px, 4vw, 48px);
}

.menu-cat:last-child { margin-bottom: 0; }

.cat-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-gold);
  color: var(--garnet);
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
  font-style: italic;
}

.cat-num {
  color: var(--gold-ink);
  font-family: var(--sans);
  font-size: .7rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .2em;
}

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

/* Without JavaScript, each service is a simple list line */
.svc-list li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-bottom: 1px dashed rgba(74, 11, 35, .12);
  font-size: 1.02rem;
  line-height: 1.35;
}

.svc-list li:last-child { border-bottom: 0; }

.svc-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.2c1.1 1.5 1.1 3 0 4.8C4.9 4.2 4.9 2.7 6 1.2Zm4.8 4.8C9.3 7.1 7.8 7.1 6 6c1.8-1.1 3.3-1.1 4.8 0ZM6 10.8C4.9 9.3 4.9 7.8 6 6c1.1 1.8 1.1 3.3 0 4.8ZM1.2 6c1.5-1.1 3-1.1 4.8 0-1.8 1.1-3.3 1.1-4.8 0Z' fill='%23c93d6a'/%3E%3C/svg%3E") center / contain no-repeat;
}

.svc-list .price {
  float: right;
  color: var(--gold-ink);
  font-family: var(--serif);
  font-style: italic;
}

/* With JavaScript, each service becomes a toggle */
.svc-list li.is-pickable {
  padding: 0;
  border-bottom: 0;
}

.svc-list li.is-pickable::before { display: none; }

.svc {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  transition: background-color .25s ease, color .25s ease;
}

@media (max-width: 599px) {
  .svc { min-height: 48px; }
}

.svc-name {
  flex: 0 1 auto;
  font-size: 1.02rem;
  line-height: 1.3;
}

.svc-name .price {
  float: none;
  margin-left: 8px;
}

.svc-leader {
  flex: 1 1 18px;
  min-width: 18px;
  height: 1px;
  margin-top: 5px;
  background-image: radial-gradient(circle, rgba(74, 11, 35, .35) 1px, transparent 1.2px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  opacity: .8;
}

.svc-tick {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(74, 11, 35, .28);
  border-radius: 50%;
  color: var(--garnet);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .4s var(--ease);
}

.svc-tick svg { width: 14px; height: 14px; }

.svc-tick .i-check { display: none; }

@media (hover: hover) {
  .svc:hover { background: rgba(249, 225, 231, .65); }
}
@media (hover: hover) {
  .svc:hover .svc-tick { border-color: var(--rose); color: var(--rose-ink); }
}

.svc[aria-pressed="true"] {
  color: var(--garnet);
  background: var(--blush);
}

.svc[aria-pressed="true"] .svc-name { font-weight: 500; }

.svc[aria-pressed="true"] .svc-tick {
  border-color: var(--rose-ink);
  color: #fff;
  background: var(--rose-ink);
  transform: rotate(360deg);
}

.svc[aria-pressed="true"] .svc-tick .i-plus { display: none; }
.svc[aria-pressed="true"] .svc-tick .i-check { display: block; }

.svc:focus-visible { outline-offset: 0; border-radius: 14px; }

.menu-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-gold);
  color: var(--muted);
  font-size: .95rem;
}

.menu-foot a { color: var(--rose-ink); font-weight: 500; text-underline-offset: 4px; }

/* Composer: the live "text to Erica" preview */
.composer { position: relative; }

@media (min-width: 1040px) {
  .composer { position: sticky; top: calc(var(--header-h) + 24px); }
}

.phone {
  position: relative;
  max-width: 460px;
  margin-inline: auto;
  padding: 12px;
  border-radius: 40px;
  background: linear-gradient(160deg, #3d0a20, #1f030d);
  box-shadow: 0 60px 100px -50px rgba(74, 11, 35, .7), 0 0 0 1px rgba(198, 161, 91, .5);
}

.phone-screen {
  overflow: hidden;
  border-radius: 30px;
  background: #fff;
}

.phone-top {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid #f1e5e8;
  background: #fbf7f8;
  text-align: center;
}

.phone-avatar {
  width: 52px;
  height: 52px;
}

.phone-name {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
}

.phone-sub {
  color: #76636b;
  font-size: .72rem;
  letter-spacing: .04em;
}

.thread {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px 16px 18px;
  background:
    radial-gradient(90% 60% at 100% 100%, rgba(249, 225, 231, .55), transparent 70%),
    #fff;
}

.thread-stamp {
  margin: 0 0 auto;
  color: #76636b;
  font-size: .7rem;
  text-align: center;
}

.bubble {
  position: relative;
  align-self: flex-end;
  max-width: 88%;
  margin: 0;
  padding: 12px 16px;
  border-radius: 22px 22px 6px 22px;
  color: #fff;
  background: linear-gradient(165deg, #b93264, #9a2352);
  font-size: 1rem;
  line-height: 1.42;
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 22px -12px rgba(154, 35, 82, .8);
  transition: transform .35s var(--ease);
}

.bubble.is-bumped { transform: scale(1.025); }

.bubble-meta {
  align-self: flex-end;
  margin: -4px 4px 0 0;
  color: #76636b;
  font-size: .7rem;
}

.compose-body {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-top: 1px solid #f1e5e8;
  background: #fbf7f8;
}

.compose-picks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  color: var(--muted);
  font-size: .86rem;
}

.compose-picks strong { color: var(--garnet); font-weight: 600; }

.link-btn {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--rose-ink);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.field { display: grid; gap: 6px; }

.field span {
  color: var(--garnet);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.field small { color: var(--muted); font-size: .9em; letter-spacing: .06em; text-transform: none; }

.field input {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid #e3d3d8;
  border-radius: 14px;
  background: #fff;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.field input:focus {
  border-color: var(--rose-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(168, 40, 90, .18);
}

.compose-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.compose-actions .btn { width: 100%; padding: 0 18px; }

@media (max-width: 419px) {
  .compose-actions { grid-template-columns: minmax(0, 1fr); }
}

.compose-note {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
  text-align: center;
}

.compose-note a { color: var(--rose-ink); font-weight: 500; }

html:not(.js) .js-only { display: none !important; }

/* Petal burst when a service is picked */
.burst {
  position: fixed;
  z-index: 70;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  pointer-events: none;
}

/* ---------- Work / lookbook ---------- */

.work {
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(244, 207, 217, .7), transparent 70%),
    linear-gradient(180deg, var(--blush) 0%, #fbeaee 55%, var(--cream) 100%);
}

.work-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: end;
}

@media (min-width: 900px) {
  .work-head { grid-template-columns: 1fr minmax(260px, 380px); }
  .work-head .lede { margin: 0 0 8px; }
}

.looks {
  display: grid;
  gap: clamp(48px, 6vw, 72px) clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .look:nth-child(3n + 2) { margin-top: 96px; }
}

/* Two-column layout without a booking tile: an odd look out sits centered */
@media (min-width: 760px) and (max-width: 1099px) {
  .look:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - clamp(24px, 3vw, 40px)) / 2);
  }
}

/* The booking tile always fills whatever the final row has left, so rows stay even
   for any number of looks. Its shape follows the space it gets. */
@media (min-width: 760px) and (max-width: 1099px) {
  .look-cta:nth-child(odd) { grid-column: 1 / -1; --cta-ratio: 21 / 9; }
}

@media (min-width: 1100px) {
  .look-cta:nth-child(3n + 1) { grid-column: 1 / -1; --cta-ratio: 16 / 5; }
  .look-cta:nth-child(3n + 2) { grid-column: span 2; --cta-ratio: 16 / 10; }
}

@media (max-width: 759px) {
  .looks {
    display: flex;
    gap: 18px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 14px var(--gutter) 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .looks::-webkit-scrollbar { display: none; }
  .look,
  .look-cta { flex: 0 0 min(80%, 340px); scroll-snap-align: start; }
}

.look { position: relative; margin: 0; }

/* ---------- Booking tile ---------- */

.look-cta {
  position: relative;
  margin: 0;
  container-type: inline-size;
}

.cta-card {
  position: relative;
  isolation: isolate;
  display: grid;
  aspect-ratio: var(--cta-ratio, 4 / 5.2);
  overflow: hidden;
  align-content: end;
  padding: clamp(22px, 7cqi, 48px);
  border-radius: 999px 999px 22px 22px;
  color: var(--cream);
  background:
    radial-gradient(75% 60% at 100% 0%, rgba(201, 61, 106, .5), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(198, 161, 91, .16), transparent 70%),
    linear-gradient(165deg, #3d0a20 0%, #2c0613 55%, #1f030d 100%);
  box-shadow: 0 30px 60px -34px rgba(74, 11, 35, .6);
}

.cta-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px solid rgba(240, 217, 168, .35);
  border-radius: inherit;
  pointer-events: none;
}

.cta-bloom {
  position: absolute;
  top: 6%;
  left: 50%;
  z-index: -1;
  width: 50%;
  overflow: visible;
  translate: -50% 0;
  filter: drop-shadow(0 18px 26px rgba(20, 0, 8, .45));
  animation: spin 240s linear infinite;
}

.cta-card .kicker { margin-bottom: 12px; color: var(--champagne); }

.cta-title {
  font-size: clamp(2rem, 11cqi, 3.6rem);
  line-height: .95;
}

.cta-title em { color: var(--peony); }

.cta-text {
  max-width: 30em;
  margin: 14px 0 0;
  color: var(--muted-dark);
  font-size: .98rem;
  line-height: 1.55;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 22px;
}

.cta-actions .btn { flex: 1 1 100%; }

.cta-link {
  color: var(--cream);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-decoration: underline;
  text-decoration-color: rgba(240, 217, 168, .5);
  text-transform: uppercase;
  text-underline-offset: 5px;
}

@media (hover: hover) {
  .cta-link:hover { text-decoration-color: var(--champagne); }
}

/* Small tile (phone carousel): drop the paragraph so everything fits the arch */
@container (max-width: 300px) {
  .cta-text { display: none; }
}

@container (max-width: 280px) {
  .cta-card .kicker { display: none; }
}

/* Wide tile (end of a computer or iPad row): words on the left, bloom on the right */
@container (min-width: 560px) {
  .cta-card {
    align-content: center;
    padding-right: 44%;
    border-radius: 28px;
  }
  .cta-card::after { border-radius: 20px; }
  .cta-bloom {
    top: 50%;
    right: -4%;
    left: auto;
    width: 46%;
    translate: 0 -50%;
  }
  .cta-actions .btn { flex: 0 0 auto; }
  .cta-title { font-size: clamp(2.4rem, 6.4cqi, 3.9rem); }
}

.look-media { position: relative; }

.look-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid var(--line-gold);
  border-radius: 999px 999px 26px 26px;
  transform: translate(10px, 10px);
  transition: transform .6s var(--ease);
}

@media (hover: hover) {
  .look:hover .look-media::before { transform: translate(14px, 14px); }
}

.look-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5.2;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 999px 999px 22px 22px;
  background: var(--blush-2);
  box-shadow: 0 30px 60px -34px rgba(74, 11, 35, .5);
}

.look-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease, transform 1.1s var(--ease);
}

.look-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease);
}

@media (hover: hover) {
  .look:hover .look-shot img { transform: scale(1.06); }
}

.look-shot:first-child { opacity: 1; }
.look:has(input[value="1"]:checked) .look-shot:nth-child(1),
.look:has(input[value="2"]:checked) .look-shot:nth-child(2),
.look:has(input[value="3"]:checked) .look-shot:nth-child(3),
.look:has(input[value="4"]:checked) .look-shot:nth-child(4) { opacity: 1; }

.look-num {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  translate: -50% 0;
  padding: 6px 12px 5px;
  border-radius: 999px;
  color: var(--garnet);
  background: rgba(255, 248, 243, .88);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.look-turn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  color: var(--garnet);
  background: rgba(255, 248, 243, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .5s var(--ease);
}

@media (hover: hover) {
  .look-turn:hover { transform: rotate(-90deg); }
}

.look-turn svg { width: 20px; height: 20px; }

.look-info { position: relative; padding-top: 26px; }

.look-title {
  color: var(--garnet);
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-style: italic;
  line-height: 1.05;
}

.look-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.angles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.angles label { position: relative; display: inline-flex; }

.angles input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.angles span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(74, 11, 35, .22);
  border-radius: 999px;
  color: var(--garnet);
  background: rgba(255, 255, 255, .55);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

@media (hover: hover) {
  .angles label:hover span { border-color: var(--garnet); }
}

.angles input:checked + span {
  border-color: var(--garnet);
  color: var(--cream);
  background: var(--garnet);
}

.angles input:focus-visible + span {
  outline: 2px solid var(--rose-ink);
  outline-offset: 3px;
}

.swipe-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.swipe-hint svg { width: 34px; height: 12px; }

@media (min-width: 760px) {
  .swipe-hint { display: none; }
}

/* ---------- Meet Erica ---------- */

.erica { overflow: clip; background: var(--cream); }

.erica-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(56px, 8vw, 120px);
}

@media (min-width: 900px) {
  .erica-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

.portrait {
  position: relative;
  width: min(100%, 470px);
  margin: 0 auto;
  padding-top: 40px;
}

.portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 28px 28px;
  background: var(--blush-2);
  box-shadow: 0 50px 90px -46px rgba(74, 11, 35, .55);
}

.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 248, 243, .75);
  border-radius: 999px 999px 20px 20px;
  pointer-events: none;
}

.portrait-frame picture { height: 100%; }

.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 40%;
}

.garland {
  position: absolute;
  top: 0;
  left: -9%;
  z-index: 2;
  width: 118%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 12px 16px rgba(74, 11, 35, .22));
}

.portrait-tag {
  position: absolute;
  right: -6px;
  bottom: 34px;
  z-index: 3;
  padding: 12px 18px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  color: var(--garnet);
  background: rgba(255, 252, 250, .92);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  box-shadow: 0 16px 30px -18px rgba(74, 11, 35, .5);
}

.erica-copy p:not(.kicker):not(.signature) {
  max-width: 34em;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
}

.erica-copy .section-title { max-width: 11ch; }

.facts {
  display: grid;
  gap: 1px;
  margin: 36px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: 20px;
  background: var(--line-gold);
  list-style: none;
}

@media (min-width: 520px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.facts li {
  padding: 18px 20px;
  background: var(--paper);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
}

.facts strong {
  display: block;
  margin-bottom: 4px;
  color: var(--garnet);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.signature-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 36px;
}

.signature {
  margin: 0;
  color: var(--rose-ink);
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-style: italic;
  line-height: 1;
}

/* ---------- Visit ---------- */

.visit {
  overflow: clip;
  isolation: isolate;
  color: var(--cream);
  background: var(--garnet-3);
}

.visit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(50% 45% at 100% 100%, rgba(201, 61, 106, .45), transparent 70%),
    radial-gradient(40% 40% at 0% 0%, rgba(198, 161, 91, .14), transparent 70%),
    linear-gradient(180deg, #33081a, #22040f);
}

.visit .kicker { color: var(--champagne); }

.visit-title {
  max-width: 13ch;
  font-size: clamp(2.7rem, 7.6vw, 6rem);
  line-height: .96;
}

.visit-title em { color: var(--peony); }

.visit-lede {
  max-width: 36em;
  margin: 24px 0 0;
  color: var(--muted-dark);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.big-number {
  display: inline-block;
  margin-top: clamp(30px, 5vw, 48px);
  font-family: var(--serif);
  font-size: clamp(2.6rem, 10.5vw, 7.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .big-number:hover { filter: brightness(1.08); }
}

.actions {
  display: grid;
  gap: 12px;
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.action {
  display: flex;
  height: 100%;
  min-height: 164px;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: 22px;
  border: 1px solid rgba(240, 217, 168, .22);
  border-radius: 24px;
  color: var(--cream);
  background: rgba(255, 255, 255, .035);
  text-decoration: none;
  transition: transform .4s var(--ease), background-color .3s ease, border-color .3s ease;
}

@media (hover: hover) {
  .action:hover {
    transform: translateY(-4px);
    border-color: rgba(240, 217, 168, .55);
    background: rgba(255, 255, 255, .07);
  }
}

.action-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.action-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(240, 217, 168, .4);
  border-radius: 50%;
  color: var(--champagne);
}

.action-icon svg { width: 20px; height: 20px; }

.action-tag {
  color: var(--champagne);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.action-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.05;
}

.action-sub {
  display: block;
  margin-top: 6px;
  color: var(--muted-dark);
  font-size: .9rem;
}

.action--primary {
  color: var(--garnet-3);
  border-color: transparent;
  background: var(--foil);
  background-size: 200% 100%;
}

@media (hover: hover) {
  .action--primary:hover {
    border-color: transparent;
    background: var(--foil);
    background-size: 200% 100%;
    background-position: 100% 0;
  }
}

.action--primary .action-icon { color: var(--garnet-3); border-color: rgba(44, 6, 19, .35); }
.action--primary .action-tag { color: var(--garnet-3); }
.action--primary .action-sub { color: rgba(44, 6, 19, .78); }

.visit-facts {
  display: grid;
  gap: 26px;
  margin: clamp(44px, 6vw, 72px) 0 0;
  padding-top: 34px;
  border-top: 1px solid rgba(240, 217, 168, .2);
}

@media (min-width: 760px) {
  .visit-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.visit-facts dt {
  margin-bottom: 8px;
  color: var(--champagne);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.visit-facts dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.35;
}

.visit-facts a { text-decoration-color: rgba(240, 217, 168, .5); text-underline-offset: 5px; }
@media (hover: hover) {
  .visit-facts a:hover { text-decoration-color: var(--champagne); }
}

.visit-bloom {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  overflow: visible;
  animation: spin 240s linear infinite;
}

.visit-bloom--rose {
  top: clamp(-150px, -9vw, -70px);
  right: clamp(-170px, -11vw, -80px);
  width: clamp(240px, 42vw, 620px);
}

.visit-bloom--carn {
  top: clamp(150px, 19vw, 280px);
  right: clamp(150px, 24vw, 360px);
  width: clamp(110px, 12vw, 180px);
  animation-duration: 180s;
  animation-direction: reverse;
}

@media (max-width: 899px) {
  .visit-bloom--rose { top: -120px; right: -110px; width: 250px; opacity: .8; }
  .visit-bloom--carn { display: none; }
}

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

.site-footer {
  position: relative;
  overflow: clip;
  padding: clamp(56px, 8vw, 96px) 0 calc(32px + env(safe-area-inset-bottom));
  color: var(--muted-dark);
  background: #1a020b;
}

.footer-word {
  margin: 0;
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(3.3rem, 12.4vw, 11.2rem);
  line-height: .9;
  letter-spacing: -.03em;
}

.footer-word em { display: inline-block; }

.footer-rule {
  height: 1px;
  margin: clamp(34px, 5vw, 56px) 0 26px;
  background: linear-gradient(90deg, rgba(240, 217, 168, .6), rgba(240, 217, 168, .08));
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.footer-row p { margin: 0; }

.footer-row a { color: var(--cream); text-decoration-color: rgba(240, 217, 168, .45); text-underline-offset: 4px; }
@media (hover: hover) {
  .footer-row a:hover { text-decoration-color: var(--champagne); }
}

/* ---------- Mobile dock ---------- */

.dock {
  position: fixed;
  right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 14px;
  z-index: 60;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  border: 1px solid rgba(240, 217, 168, .35);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(44, 6, 19, .94);
  box-shadow: 0 18px 40px -12px rgba(44, 6, 19, .6);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: opacity .35s ease, transform .45s var(--ease), visibility .35s;
}

.dock .i { width: 18px; height: 18px; color: var(--champagne); }

.dock-count {
  display: grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--garnet-3);
  background: var(--foil);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0;
}

.dock-count[hidden] { display: none; }

.dock.is-bumped { animation: bump .5s var(--ease); }

.js .dock.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
}

@media (max-width: 759px) {
  body { padding-bottom: 88px; }
}

@media (min-width: 760px) {
  .dock { display: none; }
}

/* ---------- Motion ---------- */

@keyframes sheen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

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

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes line-up {
  from { transform: translateY(105%); }
  to { transform: none; }
}

@keyframes fan-rise {
  from { opacity: 0; translate: 0 70px; rotate: 0deg; }
}

@keyframes fan-rise-c {
  from { opacity: 0; translate: 0 90px; scale: .94; }
}

@keyframes bloom {
  from { scale: .16; rotate: -38deg; opacity: 0; }
  35% { opacity: 1; }
  to { scale: 1; rotate: 0deg; opacity: 1; }
}

@keyframes leaf-in {
  from { scale: .3; opacity: 0; }
  to { scale: 1; opacity: 1; }
}

@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(-14px, 10px) rotate(-1.2deg); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance */
  .hero .kicker,
  .hero-lede,
  .hero-actions,
  .hero-meta { animation: rise .9s var(--ease) both; }
  .hero .kicker { animation-delay: .1s; }
  .hero-lede { animation-delay: .75s; }
  .hero-actions { animation-delay: .9s; }
  .hero-meta { animation-delay: 1.05s; }

  .hero-title .line { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
  .hero-title .line > span { animation: line-up 1.1s var(--ease) both; }
  .hero-title .line:nth-child(2) > span { animation-delay: .14s; }
  .hero-title .line:nth-child(3) > span { animation-delay: .28s; }

  .fan-c { animation: fan-rise-c 1.3s .3s var(--ease) both; }
  .fan-l,
  .fan-r { animation: fan-rise 1.5s .5s var(--ease) both; }

  .posy .bloom path {
    transform-origin: 0 0;
    transform-box: view-box;
    animation: bloom 1.25s var(--ease) both;
    animation-delay: calc(var(--d, 1s) + var(--i, 0) * 26ms);
  }

  .posy .bloom--carn path { animation-delay: calc(var(--d, 1s) + var(--i, 0) * 14ms); }

  .posy .leaf {
    transform-origin: 0 0;
    transform-box: view-box;
    animation: leaf-in 1s var(--ease) both;
    animation-delay: var(--d, 1s);
  }

  .strands path {
    stroke-dasharray: 1;
    animation: draw 2.6s var(--ease-soft) both;
    animation-delay: calc(.35s + var(--i, 0) * 60ms);
  }

  .strands { animation: drift 16s ease-in-out 3s infinite alternate; }

  /* Scroll-linked reveals where supported; content is simply visible elsewhere */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 240px;
    }
  }
}

@media print {
  .reveal { animation: none !important; }
  .dock, .site-header, .ribbon { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ribbon-track { animation: none; }
  .foil { animation: none; }
}