/* ==========================================================================
   Laine Doll — Boudoir Editorial Noir
   Liquid glass · rounded geometry · slow, deliberate motion
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* surface */
  --ink-0:      #080507;
  --ink-1:      #0E080C;
  --wine:       #240A14;
  --wine-2:     #3A1122;

  /* signature */
  --rose:       #E4568F;
  --rose-deep:  #C22E68;
  --rose-lt:    #F8BBD0;
  --gold:       #D9B382;
  --gold-lt:    #F0DCC0;

  /* type */
  --ivory:      #F9F2EE;
  --mute:       #B9A3AC;
  --mute-2:     #7E6C74;

  /* glass */
  --g-fill:     linear-gradient(148deg, rgba(255,255,255,.11), rgba(255,255,255,.028) 62%);
  --g-line:     rgba(255,255,255,.14);
  --g-blur:     blur(26px) saturate(165%);
  --g-shadow:   0 26px 70px -20px rgba(0,0,0,.72), 0 2px 10px rgba(0,0,0,.35);
  --g-inset:    inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.05);

  /* geometry */
  --r-xs: 14px;
  --r-sm: 20px;
  --r-md: 28px;
  --r-lg: 40px;
  --r-xl: 56px;
  --pill: 999px;

  /* rhythm */
  --pad: clamp(20px, 5vw, 72px);
  --gap: clamp(24px, 4vw, 56px);
  --sec: clamp(64px, 7.2vw, 116px);
  --max: 1320px;

  --ease: cubic-bezier(.22, .68, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 6px; }

body {
  background: var(--ink-0);
  color: var(--ivory);
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(15.5px, .55vw + 14px, 17.5px);
  line-height: 1.72;
  font-weight: 300;
  letter-spacing: .004em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ambient wash — soft rose/wine light behind everything */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 80% at 8% -8%,  rgba(228,86,143,.16), transparent 58%),
    radial-gradient(90%  70% at 96% 12%, rgba(58,17,34,.62),   transparent 62%),
    radial-gradient(110% 90% at 50% 108%, rgba(194,46,104,.13), transparent 60%),
    linear-gradient(180deg, #0A0609, #120810 46%, #0A0609);
  pointer-events: none;
}
/* fine film grain, keeps large dark areas from banding */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type scale ---------- */
.display,
h1, h2, h3 {
  font-family: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.018em;
}
.script {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1;
}
.eyebrow {
  font-size: clamp(9.5px, .7vw, 11.5px);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--rose-lt);
}
@media (min-width: 700px) { .eyebrow { letter-spacing: .34em; } }
.eyebrow--gold { color: var(--gold); }

.h-sec { font-size: clamp(38px, 6.6vw, 88px); }
.h-sec .script { display: block; color: var(--rose); font-size: 1.06em; margin-top: .04em; }

.lede {
  font-size: clamp(17px, 1.35vw, 21px);
  color: #EADCE2;
  font-weight: 300;
  line-height: 1.62;
}
p + p { margin-top: 1.05em; }
.muted { color: var(--mute); }
em.rose { color: var(--rose-lt); font-style: normal; }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(228,86,143,.42) 34%, rgba(217,179,130,.5) 50%, rgba(228,86,143,.42) 66%, transparent);
}

/* ---------- Layout ---------- */
.wrap { width: min(100% - (var(--pad) * 2), var(--max)); margin-inline: auto; }
.section { padding-block: var(--sec); position: relative; }
.grid-2 { display: grid; gap: var(--gap); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); }
  .grid-2--wide-l { grid-template-columns: 1.15fr .85fr; }
  .grid-2--wide-r { grid-template-columns: .85fr 1.15fr; }
  .order-first { order: -1; }
}

/* ==========================================================================
   Liquid glass
   ========================================================================== */
.glass {
  position: relative;
  background: var(--g-fill);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line);
  border-radius: var(--r-md);
  box-shadow: var(--g-shadow), var(--g-inset);
  isolation: isolate;
}
.glass::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(130% 90% at 12% -12%, rgba(255,255,255,.20), transparent 52%),
    radial-gradient(90% 80% at 92% 108%, rgba(228,86,143,.20), transparent 58%);
  opacity: .9;
  transition: opacity .6s var(--ease);
}
.glass--soft { border-radius: var(--r-lg); }
.glass--pill { border-radius: var(--pill); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .62em;
  padding: 1.02em 2.15em;
  border-radius: var(--pill);
  font-size: clamp(12.5px, .9vw, 14px);
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), color .4s var(--ease), border-color .4s;
  will-change: transform;
}
.btn > span { position: relative; z-index: 2; }
.btn::after {
  content: '';
  position: absolute; z-index: 1; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg);
  transition: left .85s var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { left: 118%; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--primary {
  background:
    linear-gradient(150deg, rgba(255,255,255,.30), rgba(255,255,255,.06) 48%),
    linear-gradient(120deg, var(--rose) 4%, var(--rose-deep) 96%);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow:
    0 16px 42px -14px rgba(228,86,143,.75),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -8px 18px -10px rgba(0,0,0,.5);
}
.btn--primary:hover { box-shadow: 0 22px 56px -14px rgba(228,86,143,.9), inset 0 1px 0 rgba(255,255,255,.6); }

.btn--ghost {
  background: var(--g-fill);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-inset), 0 12px 34px -18px rgba(0,0,0,.8);
}
.btn--ghost:hover { border-color: rgba(248,187,208,.44); }

.btn--gold {
  background: linear-gradient(150deg, rgba(255,255,255,.26), rgba(255,255,255,.04) 50%), linear-gradient(120deg, var(--gold), #B98F58);
  border: 1px solid rgba(255,255,255,.32);
  color: #2A1608;
  box-shadow: 0 14px 40px -16px rgba(217,179,130,.7), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--sm { padding: .78em 1.5em; font-size: 11.5px; letter-spacing: .15em; }
.btn[disabled] { opacity: .38; pointer-events: none; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding: clamp(14px, 2vw, 22px) var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: background .55s var(--ease), backdrop-filter .55s var(--ease), border-color .55s var(--ease), padding .55s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(12,6,10,.58);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom-color: rgba(255,255,255,.09);
  padding-block: clamp(10px, 1.4vw, 15px);
}
.brand { display: flex; align-items: baseline; gap: .55em; line-height: 1; }
.brand__mark { font-family: 'Bodoni Moda', serif; font-size: clamp(19px, 1.8vw, 25px); letter-spacing: .1em; }
.brand__mark b { font-weight: 400; color: var(--rose); }
.brand__sig { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(12px, 1.1vw, 15px); color: var(--mute); }
@media (max-width: 620px) { .brand__sig { display: none; } }

.nav__links { display: none; gap: clamp(18px, 2.4vw, 38px); }
@media (min-width: 1000px) { .nav__links { display: flex; } }
.nav__links a {
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mute); position: relative; padding-block: 6px;
  transition: color .4s var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--rose); transition: width .5s var(--ease-out);
}
.nav__links a:hover { color: var(--ivory); }
.nav__links a:hover::after { width: 100%; }

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

.burger {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: var(--pill);
  background: var(--g-fill);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line); box-shadow: var(--g-inset);
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger i { display: block; width: 17px; height: 1px; background: var(--ivory); position: relative; transition: background .3s; }
.burger i::before, .burger i::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1px; background: var(--ivory);
  transition: transform .45s var(--ease-out);
}
.burger i::before { top: -5px; } .burger i::after { top: 5px; }
.burger.is-open i { background: transparent; }
.burger.is-open i::before { transform: translateY(5px) rotate(45deg); }
.burger.is-open i::after  { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(8,5,7,.86);
  backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
  display: grid; place-content: center; gap: 6px; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a {
  font-family: 'Bodoni Moda', serif; font-size: clamp(28px, 7vw, 46px);
  padding: .14em 0; opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
}
.drawer.is-open a { opacity: 1; transform: none; }
.drawer.is-open a:nth-child(1) { transition-delay: .06s; }
.drawer.is-open a:nth-child(2) { transition-delay: .11s; }
.drawer.is-open a:nth-child(3) { transition-delay: .16s; }
.drawer.is-open a:nth-child(4) { transition-delay: .21s; }
.drawer.is-open a:nth-child(5) { transition-delay: .26s; }
.drawer.is-open a:nth-child(6) { transition-delay: .31s; }
.drawer a:hover { color: var(--rose); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  padding: calc(var(--sec) * .55) var(--pad) clamp(36px, 6vw, 76px);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
  transform: scale(1.06);
  animation: heroDrift 26s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,5,7,.76) 0%, rgba(8,5,7,.30) 26%, rgba(8,5,7,.34) 52%, rgba(8,5,7,.92) 92%),
    linear-gradient(96deg, rgba(36,10,20,.80) 0%, rgba(36,10,20,.30) 44%, transparent 72%),
    radial-gradient(70% 55% at 22% 72%, rgba(194,46,104,.28), transparent 66%);
}
.hero__inner { position: relative; z-index: 2; width: min(100%, var(--max)); margin-inline: auto; }

.hero__title {
  font-size: clamp(48px, 11vw, 152px);
  line-height: .86;
  letter-spacing: -.035em;
  margin-top: .18em;
  text-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.hero__title .l1 { display: block; text-transform: uppercase; }
.hero__title .l2 {
  display: block; font-size: .84em; margin-top: .04em; margin-left: .04em;
  background: linear-gradient(96deg, var(--rose-lt) 6%, var(--rose) 46%, var(--gold) 104%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.js .hero__title .l2 { opacity: 0; transform: translateY(40px); }
.js .loaded .hero__title .l2 { animation: wIn 1.15s var(--ease-out) .28s forwards; }
.hero__sub { max-width: 46ch; margin-top: clamp(20px, 2.6vw, 34px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3vw, 40px); }

.hero__meta { margin-top: clamp(30px, 4vw, 52px); display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .58em 1.2em; border-radius: var(--pill);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #E7D6DD;
  background: var(--g-fill);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line); box-shadow: var(--g-inset);
}
.chip b { color: var(--rose-lt); font-weight: 400; }

.hero__cue {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(14px, 2.4vw, 26px);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px;
  font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute-2);
}
.hero__cue span { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, var(--rose), transparent); animation: cue 2.6s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.32); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
/* the cue fights the meta chips on narrow screens */
@media (max-width: 860px) { .hero__cue { display: none; } }

.sound-btn {
  position: absolute; z-index: 3; right: var(--pad); bottom: clamp(20px, 3vw, 34px);
  width: 50px; height: 50px; border-radius: var(--pill);
  display: grid; place-items: center;
  background: var(--g-fill); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line); box-shadow: var(--g-inset);
  transition: transform .4s var(--ease-out), border-color .4s;
}
.sound-btn:hover { transform: scale(1.08); border-color: rgba(248,187,208,.5); }
.sound-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--ivory); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Editorial figures
   ========================================================================== */
.fig {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px -34px rgba(0,0,0,.9);
}
.fig::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.2);
  background: linear-gradient(190deg, transparent 52%, rgba(36,10,20,.5));
}
.fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
/* a portrait far taller than its frame loses the head to a centred crop */
.fig img.pos-hi { object-position: center 20%; }
.fig:hover img { transform: scale(1.045); }
.fig--tall  { aspect-ratio: 3 / 4.1; }
.fig--port  { aspect-ratio: 4 / 5; }
.fig--wide  { aspect-ratio: 5 / 4; }
.fig--frame { border-radius: var(--r-xl); }

/* A second, smaller frame overlapping the main photograph's lower corner.
   The two drift at opposite parallax rates, so the pair reads as depth. */
.fig-stack { position: relative; }
.fig--inset {
  position: absolute; z-index: 4;
  right: 5%; bottom: -7%;
  width: 46%;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.95), 0 0 0 6px rgba(10,6,9,.55);
}
/* 45% keeps both ends of the story in frame: the chain up top, the cuffed
   hands near the bottom. Higher and the hands are cropped away. */
.fig--inset img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* full-length portraits need the crop held high or the head is cut */
.fig--inset img.top { object-position: center 22%; }
/* single-column layout: the inset hangs below the photo, so the stack needs
   clearance or it lands on the copy underneath */
.fig-stack { margin-bottom: 9%; }
@media (min-width: 900px) {
  /* on two columns it may spill into the gutter — never past it */
  .fig--inset { right: -12%; bottom: -9%; width: 48%; }
  .fig-stack { margin-bottom: 0; }
}

.fig-halo { position: relative; }
.fig-halo::before {
  content: ''; position: absolute; z-index: -1;
  inset: -14% -10% -10% -14%;
  background: radial-gradient(60% 55% at 30% 30%, rgba(228,86,143,.30), transparent 70%);
  filter: blur(38px);
}

.tag-float {
  position: absolute; z-index: 3;
  padding: .82em 1.35em; border-radius: var(--pill);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(14,8,12,.5);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.17);
  box-shadow: var(--g-inset), 0 14px 34px -16px rgba(0,0,0,.85);
}
.tag-float--br { right: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px); }
.tag-float--tl { left: clamp(12px, 2vw, 22px); top: clamp(12px, 2vw, 22px); }

/* ==========================================================================
   Manifesto band
   ========================================================================== */
.manifesto { text-align: center; }
.manifesto__quote {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(28px, 4.4vw, 62px);
  line-height: 1.14; letter-spacing: -.02em;
  max-width: 19ch; margin-inline: auto;
}
.manifesto__quote .script { color: var(--rose); font-size: 1.1em; }

/* ==========================================================================
   Offerings
   ========================================================================== */
.offer-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr));
}
@media (min-width: 560px) { .offer-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); } }
.offer {
  padding: 1.35em 1.35em 1.45em;
  border-radius: var(--r-sm);
  background: var(--g-fill);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-inset);
  transition: transform .6s var(--ease-out), border-color .5s, box-shadow .6s;
}
.offer:hover {
  transform: translateY(-4px);
  border-color: rgba(248,187,208,.34);
  box-shadow: var(--g-inset), 0 22px 50px -24px rgba(228,86,143,.6);
}
.offer__i { color: var(--rose); font-size: 11px; letter-spacing: .2em; line-height: 1; }
.offer__t { font-family: 'Bodoni Moda', serif; font-size: 19px; margin-top: .5em; letter-spacing: -.01em; line-height: 1.2; }
.offer__d { font-size: 14px; color: var(--mute); margin-top: .55em; line-height: 1.55; }

/* ==========================================================================
   Styles rail
   ========================================================================== */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 25vw, 310px);
  gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  padding-block: 6px 22px;
  /* the rail is already a full-bleed child of .section — no negative margin,
     that pushed the document 1x --pad wider than the viewport at every size */
  padding-inline: var(--pad);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: rgba(228,86,143,.5) transparent;
}
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: rgba(228,86,143,.5); border-radius: 4px; }
.rail::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
.style-card {
  scroll-snap-align: start;
  position: relative; border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 3 / 4.2;
  background: linear-gradient(160deg, #2A0F1B, #140A11);
  box-shadow: 0 30px 64px -30px rgba(0,0,0,.9);
}
.style-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.style-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.style-card:hover img { transform: scale(1.06); }
.style-card__scrim { position: absolute; inset: 0; background: linear-gradient(186deg, rgba(8,5,7,.06) 40%, rgba(8,5,7,.78)); }
.style-card__body { position: absolute; inset: auto 0 0 0; padding: 1.4em 1.35em; }
.style-card__n { font-size: 10px; letter-spacing: .28em; color: var(--rose-lt); }
.style-card__t { font-family: 'Bodoni Moda', serif; font-size: clamp(20px, 2vw, 25px); margin-top: .25em; }

.chips-wrap { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(24px, 3vw, 36px); }
.chips-wrap .chip { text-transform: none; letter-spacing: .04em; font-size: 13px; color: #DCC9D2; }

/* ==========================================================================
   Rates
   ========================================================================== */
.rates { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .rates { grid-template-columns: repeat(3, 1fr); } }
.rate {
  position: relative; overflow: hidden;
  padding: clamp(28px, 3vw, 42px) clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-lg);
  background: var(--g-fill);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-shadow), var(--g-inset);
  transition: transform .7s var(--ease-out), border-color .6s, box-shadow .7s;
}
.rate::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 80% at 20% -20%, rgba(255,255,255,.16), transparent 56%);
}
.rate:hover { transform: translateY(-6px); border-color: rgba(248,187,208,.4); }
.rate--feature {
  border-color: rgba(217,179,130,.42);
  box-shadow: var(--g-shadow), var(--g-inset), 0 0 0 1px rgba(217,179,130,.16), 0 30px 70px -30px rgba(217,179,130,.4);
}
.rate__badge {
  position: absolute; top: 18px; right: 18px;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  padding: .5em 1em; border-radius: var(--pill);
  background: linear-gradient(120deg, var(--gold), #B98F58); color: #2A1608;
}
.rate__h { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--mute); }
.rate__d { font-family: 'Bodoni Moda', serif; font-size: clamp(38px, 4.4vw, 58px); line-height: 1; margin-top: .3em; }
.rate__d sup { font-size: .34em; letter-spacing: .12em; vertical-align: super; color: var(--mute); font-family: 'Jost', sans-serif; }
.rate__p {
  margin-top: .55em; font-size: clamp(22px, 2.2vw, 29px);
  font-family: 'Bodoni Moda', serif;
  background: linear-gradient(96deg, var(--rose-lt), var(--rose) 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rate__n { margin-top: 1em; font-size: 14px; color: var(--mute); line-height: 1.55; }

/* ==========================================================================
   Video panel (London)
   ========================================================================== */
.vpanel {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 9 / 15;
  max-height: 78vh;
  box-shadow: 0 46px 100px -36px rgba(0,0,0,.95);
  background: #120810;
}
@media (min-width: 900px) { .vpanel { aspect-ratio: 9 / 14; } }
.vpanel video { width: 100%; height: 100%; object-fit: cover; }
.vpanel__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(188deg, rgba(8,5,7,.28) 22%, transparent 46%, rgba(8,5,7,.72));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
  border-radius: inherit;
}

/* ==========================================================================
   Enquiry — the quiz
   ========================================================================== */
.quiz { padding: clamp(26px, 3.4vw, 52px); border-radius: var(--r-xl); max-width: 880px; margin-inline: auto; }
.quiz__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.quiz__count { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.quiz__count b { color: var(--rose-lt); font-weight: 400; }

.bar { height: 2px; border-radius: 2px; background: rgba(255,255,255,.11); margin-top: 20px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 14%; border-radius: 2px;
  background: linear-gradient(90deg, var(--rose-lt), var(--rose) 52%, var(--gold));
  transition: width .75s var(--ease-out); }

.step { display: none; padding-top: clamp(26px, 3vw, 40px); }
.step.is-active { display: block; animation: stepIn .6s var(--ease-out) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.step__q { font-family: 'Bodoni Moda', serif; font-size: clamp(24px, 3.1vw, 38px); line-height: 1.14; }
.step__hint { color: var(--mute); font-size: 15px; margin-top: 1em; max-width: 54ch; line-height: 1.6; }

.opts { display: grid; gap: 11px; margin-top: clamp(22px, 2.6vw, 32px); }
@media (min-width: 620px) { .opts--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 620px) { .opts--3 { grid-template-columns: repeat(3, 1fr); } }

.opt {
  position: relative; display: flex; align-items: center; gap: .9em;
  width: 100%; text-align: left;
  padding: 1.12em 1.3em;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.11);
  transition: border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease-out), box-shadow .45s;
}
.opt:hover { border-color: rgba(248,187,208,.4); background: rgba(255,255,255,.075); transform: translateY(-2px); }
.opt__box {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.3);
  display: grid; place-items: center;
  transition: background .35s, border-color .35s;
}
.opt--radio .opt__box { border-radius: 50%; }
.opt__box::after {
  content: ''; width: 8px; height: 8px; border-radius: inherit; background: #fff;
  transform: scale(0); transition: transform .35s var(--ease-out);
}
.opt__t { font-size: 15.5px; }
.opt__s { display: block; font-size: 13px; color: var(--mute); margin-top: .12em; }
.opt__price { margin-left: auto; font-family: 'Bodoni Moda', serif; font-size: 21px; color: var(--rose-lt); }
.opt.is-on {
  border-color: rgba(228,86,143,.62);
  background: linear-gradient(120deg, rgba(228,86,143,.20), rgba(228,86,143,.06));
  box-shadow: 0 16px 40px -22px rgba(228,86,143,.85);
}
.opt.is-on .opt__box { background: var(--rose); border-color: var(--rose); }
.opt.is-on .opt__box::after { transform: scale(1); }

.fields { display: grid; gap: 14px; margin-top: clamp(22px, 2.6vw, 32px); }
@media (min-width: 620px) { .fields--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field > span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.field input, .field textarea, .field select {
  width: 100%; padding: 1.02em 1.2em;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ivory);
  font-size: 15.5px; font-weight: 300;
  transition: border-color .4s, background .4s, box-shadow .4s;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: rgba(185,163,172,.5); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: rgba(228,86,143,.65);
  background: rgba(255,255,255,.075);
  box-shadow: 0 0 0 4px rgba(228,86,143,.12);
}
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--rose-lt) 50%), linear-gradient(135deg, var(--rose-lt) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field select option { background: #150A11; color: var(--ivory); }
.field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-color: rgba(255,96,120,.75); }
.err { font-size: 12.5px; color: #FF8FA3; display: none; }
.field.is-bad .err { display: block; }

.summary { display: grid; gap: 0; margin-top: 26px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid rgba(255,255,255,.11); }
.summary > div { display: flex; gap: 18px; justify-content: space-between; padding: .95em 1.25em; background: rgba(255,255,255,.035); }
.summary > div + div { border-top: 1px solid rgba(255,255,255,.07); }
.summary dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); flex: 0 0 auto; padding-top: .35em; }
.summary dd { margin: 0; text-align: right; font-size: 15px; }

.consent { display: flex; gap: .85em; align-items: flex-start; margin-top: 22px; cursor: pointer; position: relative; }
/* visually hidden but still focusable — the styled box mirrors its state */
.consent input {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.consent .opt__box { margin-top: 3px; border-radius: 6px; }
.consent input:checked + .opt__box { background: var(--rose); border-color: var(--rose); }
.consent input:checked + .opt__box::after { transform: scale(1); }
.consent input:focus-visible + .opt__box { outline: 2px solid var(--rose); outline-offset: 3px; }
.consent span { font-size: 14px; color: var(--mute); line-height: 1.55; }
.consent.is-bad span { color: #FF8FA3; }

.quiz__nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: clamp(28px, 3vw, 40px); flex-wrap: wrap; }
.back-btn { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); transition: color .35s; }
.back-btn:hover { color: var(--ivory); }
.back-btn[hidden] { visibility: hidden; display: inline-block; }

.done { text-align: center; padding: clamp(22px, 4vw, 44px) 0; }
.done__ring {
  width: 74px; height: 74px; margin: 0 auto 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(228,86,143,.35), rgba(217,179,130,.22));
  border: 1px solid rgba(248,187,208,.45);
  box-shadow: 0 0 0 8px rgba(228,86,143,.08), inset 0 1px 0 rgba(255,255,255,.4);
}
.done__ring svg { width: 30px; height: 30px; fill: none; stroke: var(--rose-lt); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Gallery
   ========================================================================== */
/* Uniform editorial grid. CSS columns balanced badly here — the three
   landscape selfies left a tall hole mid-gallery — so every frame gets the
   same 3:4 crop and the rows stay level. */
.gal { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px)  { .gal { gap: 14px; grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .gal { gap: 16px; grid-template-columns: repeat(4, 1fr); } }
.gal button {
  display: block; width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-sm); overflow: hidden; position: relative;
  box-shadow: 0 22px 50px -28px rgba(0,0,0,.9);
}
.gal img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  transition: transform 1.1s var(--ease-out), filter .7s; filter: saturate(.94);
}
/* The 2x2 opener earned its place at 17 photos (4 + 16 = five exact rows).
   At 11 it costs two empty cells instead of saving one, so the plain grid
   wins: 4 + 4 + 3. */
.gal button::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.11);
  background: linear-gradient(190deg, transparent 58%, rgba(36,10,20,.42));
  opacity: 0; transition: opacity .5s var(--ease);
}
.gal button:hover img { transform: scale(1.05); filter: saturate(1.06); }
.gal button:hover::after { opacity: 1; }
/* the frames lift and tilt in space, so the 3D entrance that follows the
   click reads as one continuous movement */
.gal { perspective: 1200px; }
.gal button { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease); }
.gal button:hover { transform: rotateX(4deg) rotateY(-4deg) translateZ(18px); box-shadow: 0 34px 64px -26px rgba(0,0,0,.95); }
.gal button:active { transform: rotateX(2deg) rotateY(-2deg) translateZ(4px) scale(.98); transition-duration: .18s; }

/* Column flex, not centred grid: an auto-sized grid row takes its height from
   the image, so the image's own max-height:100% had nothing to resolve
   against and portraits blew past the viewport by up to 3.6x. A flex child
   with flex:1 + min-height:0 gives the stage a definite height. */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column;
  gap: clamp(8px, 1.4vw, 16px);
  padding: clamp(12px, 2.4vw, 26px);
  background: rgba(6,3,5,.92);
  backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
  perspective: 1600px;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lb-top { flex: 0 0 auto; display: flex; justify-content: flex-end; }
/* grid-template 100%/100%, not auto: an auto track sizes itself from the
   image, which is the very cycle that made max-height:100% resolve to none.
   A definite track gives the percentage something real to measure. */
.lb-stage {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template: 100% / 100%; place-items: center;
}
.lb-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 28px); }
.lb-count { font-family: 'IBM Plex Mono', 'Jost', monospace; font-size: 11.5px; letter-spacing: .18em; color: var(--mute); min-width: 6ch; text-align: center; }

.lightbox img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,1);
  /* the 3D entrance: the photo swings in from depth and settles flat */
  transform: rotateY(-17deg) rotateX(7deg) scale(.84) translateZ(-160px);
  opacity: 0;
  transition: transform .8s var(--ease-out), opacity .5s var(--ease);
}
.lightbox.is-open img { transform: none; opacity: 1; }

.lb-btn {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: var(--pill);
  display: grid; place-items: center;
  background: var(--g-fill); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line); box-shadow: var(--g-inset);
  transition: transform .35s var(--ease-out), border-color .35s;
}
.lb-btn:hover { transform: scale(1.09); border-color: rgba(248,187,208,.5); }
.lb-btn svg { width: 19px; height: 19px; fill: none; stroke: var(--ivory); stroke-width: 1.4; stroke-linecap: round; }

/* With room to spare, the arrows flank the photo instead of stacking under it.
   That hands the bar's height back to the image — the binding constraint for
   a portrait in a landscape window. */
@media (min-width: 900px) {
  .lightbox {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: clamp(14px, 2vw, 26px);
    row-gap: clamp(6px, 1vw, 12px);
  }
  .lb-top   { grid-column: 1 / -1; grid-row: 1; }
  .lb-stage { grid-column: 2; grid-row: 2; height: 100%; }
  .lb-bar   { display: contents; }
  #lbPrev   { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; }
  #lbNext   { grid-column: 3; grid-row: 2; align-self: center; justify-self: center; }
  .lb-count { grid-column: 1 / -1; grid-row: 3; }
}

/* A phone held sideways has almost no height to give. Shrink the chrome so
   the photo keeps what little there is. */
@media (max-height: 520px) {
  .lightbox { padding: 8px; gap: 6px; }
  .lb-btn { width: 40px; height: 40px; }
  .lb-btn svg { width: 16px; height: 16px; }
  .lb-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox img { transform: none !important; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { padding: var(--sec) var(--pad) clamp(34px, 4vw, 56px); position: relative; }
.foot__cta { text-align: center; max-width: 760px; margin-inline: auto; }
.foot__grid {
  margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(30px, 3.4vw, 44px);
  border-top: 1px solid rgba(255,255,255,.09);
  display: grid; gap: 26px; align-items: start;
}
@media (min-width: 860px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--mute-2); font-family: 'Jost', sans-serif; font-weight: 400; margin-bottom: 1em; }
.foot li + li { margin-top: .5em; }
.foot a { color: var(--mute); font-size: 14.5px; transition: color .35s; }
.foot a:hover { color: var(--rose-lt); }
.foot__fine { margin-top: clamp(34px, 4vw, 52px); font-size: 12.5px; color: var(--mute-2); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
.age {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(248,187,208,.4); color: var(--rose-lt);
  font-size: 12px; letter-spacing: .04em; margin-bottom: 14px;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Every hidden-until-revealed state is scoped to .js. Without scripting the
   page renders complete instead of blank. */
.js .rv { opacity: 0; transform: translateY(30px); }
.rv { transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .09s; } .rv-d2 { transition-delay: .18s; }
.rv-d3 { transition-delay: .27s; } .rv-d4 { transition-delay: .36s; }

/* The clip lives on the media, NEVER on the observed element. An element
   clipped to zero height reports an empty intersection rect, so the observer
   would never fire on it and the image would stay hidden for good. */
.js .rv-mask > img,
.js .rv-mask > video { clip-path: inset(0 0 100% 0); opacity: .35; }
.rv-mask > img,
.rv-mask > video {
  transition: clip-path 1.4s var(--ease-out), opacity .9s var(--ease-out),
              transform 1.4s var(--ease-out);
}
.js .rv-mask.in > img,
.js .rv-mask.in > video { clip-path: inset(0 0 0 0); opacity: 1; }

.w { display: inline-block; }
.js .w { opacity: 0; transform: translateY(46px) rotate(2.2deg); }
.js .loaded .w { animation: wIn 1.15s var(--ease-out) forwards; }
.loaded .w:nth-child(2) { animation-delay: .09s; }
.loaded .w:nth-child(3) { animation-delay: .18s; }
@keyframes wIn { to { opacity: 1; transform: none; } }

.px { will-change: transform; }

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

/* ==========================================================================
   Experiences — the client's reference layout, rebuilt in this palette:
   centred title, ornamental flourish, then cards whose crown badge straddles
   the foot of each photograph.
   ========================================================================== */
.exp { text-align: center; }
.exp__title {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(30px, 4.6vw, 58px);
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1;
}
.exp__flourish { display: block; width: clamp(180px, 22vw, 260px); height: auto; margin: clamp(16px, 2vw, 24px) auto clamp(20px, 2.6vw, 30px); color: var(--gold); }
.exp__flourish path, .exp__flourish circle { fill: none; stroke: currentColor; stroke-width: 1.1; }
.exp__flourish .di { fill: currentColor; stroke: none; }
.exp__lede { color: var(--mute); max-width: 52ch; margin-inline: auto; }
.exp__lede b { color: var(--ivory); font-weight: 300; }

.exp__grid {
  display: grid; gap: clamp(28px, 3.4vw, 44px);
  grid-template-columns: 1fr;
  margin-top: clamp(48px, 6vw, 80px);
  text-align: center;
}
/* four across on a wide screen, exactly as the reference lays them out */
@media (min-width: 640px)  { .exp__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .exp__grid { grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.1vw, 30px); } }

.exp-card__fig {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 30px 70px -26px rgba(0,0,0,.92);
}
.exp-card__fig::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
  background: linear-gradient(184deg, transparent 46%, rgba(8,5,7,.72));
}
.exp-card__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); }
.exp-card:hover .exp-card__fig img { transform: scale(1.05); }

/* the badge sits astride the lower edge, exactly as in the reference */
.exp-card__badge {
  position: relative; z-index: 3;
  width: 68px; height: 68px; margin: -34px auto 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 55%), rgba(18,9,14,.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(217,179,130,.44);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.34);
  transition: transform .6s var(--ease-out), border-color .5s;
}
.exp-card:hover .exp-card__badge { transform: translateY(-3px); border-color: rgba(217,179,130,.85); }
.exp-card__badge svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; }

.exp-card__t {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: .14em; text-transform: uppercase;
  margin-top: clamp(14px, 1.6vw, 20px);
}
.exp-card__d { color: var(--mute); font-size: 14.5px; line-height: 1.6; margin-top: .7em; max-width: 30ch; margin-inline: auto; }

/* ==========================================================================
   Social — placed after the gallery on purpose: by then a visitor has seen
   every photograph and wants more, and the enquiry form is already behind
   them, so this cannot leak a booking away to Instagram.
   ========================================================================== */
.social { text-align: center; padding-top: clamp(40px, 5vw, 68px); }
.social__rule { max-width: 200px; margin: 0 auto clamp(24px, 3vw, 34px); }
.social__t { font-family: 'Bodoni Moda', serif; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.1; }
.social__t .script { color: var(--rose); }
.social__d { color: var(--mute); font-size: 15px; margin-top: .9em; max-width: 40ch; margin-inline: auto; }

.social__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 3vw, 34px); }
.social-link {
  display: inline-flex; align-items: center; gap: .8em;
  padding: .95em 1.7em .95em 1.4em;
  border-radius: var(--pill);
  background: var(--g-fill);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-inset), 0 14px 34px -20px rgba(0,0,0,.85);
  transition: transform .5s var(--ease-out), border-color .45s, box-shadow .5s;
}
.social-link:hover {
  transform: translateY(-3px);
  border-color: rgba(248,187,208,.5);
  box-shadow: var(--g-inset), 0 22px 46px -20px rgba(228,86,143,.6);
}
.social-link svg {
  width: 21px; height: 21px; flex: 0 0 auto;
  fill: none; stroke: var(--rose-lt); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .45s;
}
.social-link:hover svg { stroke: var(--rose); }
.social-link b { font-weight: 400; font-size: 15px; letter-spacing: .01em; }
.social-link span {
  display: block; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute-2); margin-top: .15em;
}

/* footer row — the quiet copy, for anyone who reads the very bottom */
.foot__social { display: flex; gap: 10px; margin-top: 1.2em; }
.foot__social a {
  width: 40px; height: 40px; border-radius: var(--pill);
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  transition: border-color .4s, transform .4s var(--ease-out);
}
.foot__social a:hover { border-color: rgba(248,187,208,.5); transform: translateY(-2px); }
.foot__social svg { width: 17px; height: 17px; fill: none; stroke: var(--mute); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.foot__social a:hover svg { stroke: var(--rose-lt); }

/* ==========================================================================
   Age gate — two halves of one photograph, parted by a lock
   ========================================================================== */
html.gate-locked, html.gate-locked body { overflow: hidden; height: 100%; }

.gate {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--ink-0);
  overscroll-behavior: contain;
  transition: background .4s var(--ease);
}
/* drop the backdrop as the doors part, so what appears between them is the
   site itself and not a black void */
.gate.is-open { background: transparent; }
/* Without scripting the gate could never be unlocked, so it only exists for
   .js visitors. gate-passed hides it before first paint on a return visit. */
html:not(.js) .gate, html.gate-passed .gate { display: none; }

/* ---- the two doors ---- */
.gate__door {
  position: absolute; top: 0; bottom: 0; width: 50.2%;
  overflow: hidden;
  will-change: transform;
  transition: transform 1.25s cubic-bezier(.76, 0, .24, 1);
}
.gate__door--l { left: 0; }
.gate__door--r { right: 0; }
/* one image spanning both doors: the right door offsets its copy by a full
   door width so the seam lines up exactly */
.gate__door::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100vw; height: 100%;
  background: url('../img/gate.webp?v=752a1437') center 28% / cover no-repeat;
}
.gate__door--r::before { left: -100%; }
.gate__door::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,5,7,.58), rgba(8,5,7,.34) 38%, rgba(8,5,7,.82));
}
.gate__door--l::after { box-shadow: inset -1px 0 0 rgba(248,187,208,.22); }
.gate__door--r::after { box-shadow: inset 1px 0 0 rgba(248,187,208,.22); }

.gate.is-open .gate__door--l { transform: translateX(-100.5%); }
.gate.is-open .gate__door--r { transform: translateX(100.5%); }

/* hairline of rose light down the seam, blooms as the doors part */
.gate__seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  transform: translateX(-50%); z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(248,187,208,.55) 30%, rgba(228,86,143,.9) 50%, rgba(248,187,208,.55) 70%, transparent);
  opacity: .5;
  transition: opacity .6s var(--ease), box-shadow .6s var(--ease);
}
.gate.is-open .gate__seam { opacity: 0; box-shadow: 0 0 40px 10px rgba(228,86,143,.55); }

/* ---- the panel ---- */
.gate__panel {
  position: relative; z-index: 3;
  width: min(100% - 40px, 460px);
  padding: clamp(30px, 4.5vw, 46px) clamp(24px, 4vw, 40px) clamp(26px, 4vw, 38px);
  text-align: center;
  border-radius: var(--r-lg);
  /* tinted, not clear: the photograph behind runs bright in the middle and
     clear glass left the copy unreadable over it */
  background:
    linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%),
    linear-gradient(160deg, rgba(26,12,20,.80), rgba(10,6,9,.88));
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.3);
  transition: opacity .55s var(--ease), transform .8s var(--ease-out);
}
.gate.is-open .gate__panel { opacity: 0; transform: translateY(-14px) scale(.94); }

.gate__brand { font-family: 'Bodoni Moda', serif; font-size: clamp(21px, 2.4vw, 27px); letter-spacing: .1em; }
.gate__brand b { font-weight: 400; color: var(--rose); }
.gate__sig { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--rose-lt); font-size: 15px; margin-top: .1em; }

/* ---- the lock ---- */
.lock { width: 58px; height: 58px; margin: 0 auto clamp(16px, 2.2vw, 24px); display: block; }
.lock * { fill: none; stroke: var(--rose-lt); stroke-width: 2.6; stroke-linecap: round; transition: stroke .6s var(--ease); }
.lock__shackle {
  transform-origin: 15px 25px;
  transition: transform .8s cubic-bezier(.5, -.4, .3, 1.5);
}
.gate.is-open .lock__shackle { transform: translateY(-5px) rotate(16deg); }
.lock__body { fill: rgba(228,86,143,.16); }
.gate.is-open .lock * { stroke: var(--rose); }

.gate__title { font-family: 'Bodoni Moda', serif; font-size: clamp(23px, 2.9vw, 31px); line-height: 1.12; margin-top: clamp(14px, 1.8vw, 20px); }
.gate__copy { color: var(--mute); font-size: 14.5px; line-height: 1.6; margin-top: .9em; }
.gate__acts { display: grid; gap: 10px; margin-top: clamp(20px, 2.6vw, 28px); }
.gate__leave { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); padding: .7em; transition: color .35s; }
.gate__leave:hover { color: var(--ivory); }
.gate__fine {
  margin-top: clamp(14px, 1.8vw, 20px); padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 11.5px; color: var(--mute-2); line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .gate__door, .gate__panel, .lock__shackle { transition: none !important; }
  .gate.is-open { opacity: 0; }
}