#original-hero{--gut:5vw;--display:Fraunces,Georgia,serif;--sans:Figtree,Arial,sans-serif;--mono:monospace;--ink:#302629;--rose-d:#92536b;--font-display:Fraunces;--font-mono:monospace}#original-hero .hero{display:block;padding:0;position:relative;height:520vh;background:var(--paper)}#original-hero .stage{position:sticky;top:0;height:100svh;overflow:hidden}
@scope (#original-hero){:where(.hero-copy){padding:0}/* ---------- type ---------- */
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-d); margin: 0 0 18px; font-weight: 500; }
.display, .h2 { font-family: var(--display); font-variation-settings: "SOFT" 100, "opsz" 144; font-weight: 360; color: var(--cocoa); margin: 0; letter-spacing: -0.02em; }
.display { font-size: clamp(64px, 11vw, 176px); line-height: 0.92; }
.h2 { font-size: clamp(36px, 4.4vw, 66px); line-height: 1.05; }
.display em, .h2 em { font-style: italic; color: var(--rose-d); font-weight: 340; }
.lede { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; color: var(--ink); max-width: 30ch; margin: 26px 0 0; }
.body { font-size: 18px; line-height: 1.65; color: var(--ink); max-width: 46ch; margin: 22px 0 0; }

/* ---------- hero ---------- */
.hero .stage { background: var(--paper); }
.hero-wall { position: absolute; inset: 0; background: #e5e5e2; }
.hero-img { position: absolute; top: 0; left: 35vw; width: 65vw; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 52% 55%; will-change: transform, opacity; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); }
.hero-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-bra { position: absolute; z-index: 1; right: 14vw; top: 47%; translate: 0 -50%; width: min(33vw, 58svh, 560px); aspect-ratio: 970 / 999; perspective: 1400px; pointer-events: none; --shadow: 0; }
.hb-plane { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.hb-velvet { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 40px 38px rgba(110, 60, 50, 0.2)); user-select: none; }
.hb-sheen { position: absolute; inset: 0; opacity: 0; -webkit-mask: url(/media/bra.webp) center / 100% 100% no-repeat; mask: url(/media/bra.webp) center / 100% 100% no-repeat; mix-blend-mode: soft-light; background: radial-gradient(28% 34% at var(--sx, 40%) var(--sy, 35%), rgba(255, 240, 236, 0.9), rgba(255, 240, 236, 0) 70%); }
.hb-shadow { position: absolute; left: 12%; right: 12%; bottom: -12%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 70, 60, 0.24), rgba(110, 70, 60, 0)); filter: blur(6px); opacity: var(--shadow); transform: translateZ(-60px); }
.hb-dims { position: absolute; left: -24%; top: -14%; width: 148%; height: 132%; max-width: none; max-height: none; overflow: visible; }
.hb-dims g { opacity: 0; --dd: 1; }
.hb-dims path { fill: none; stroke: var(--rose-d); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--dd); }
.hb-dims circle { fill: var(--rose-d); }
.hb-dims text { font-family: var(--font-display), serif; font-style: italic; font-size: 46px; fill: var(--cocoa); }
.hb-dims text.num { font-family: var(--font-mono), monospace; font-style: normal; font-size: 30px; letter-spacing: 0.06em; fill: var(--rose-d); }
.hero-copy { position: absolute; z-index: 1; right: var(--gut); max-width: min(560px, 44vw); }
/* soft seam from the hero into the cream Why section; copy and bra sit above it */
.hero .stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18svh; background: linear-gradient(180deg, rgba(246, 239, 232, 0), var(--cream)); pointer-events: none; z-index: 0; }
.hero-copy.b1, .hero-copy.b2 { top: 50%; translate: 0 -50%; left: var(--gut); right: auto; max-width: min(470px, calc(35vw - var(--gut))); }
.hero .display { font-size: clamp(56px, 7.6vw, 128px); }
.hero-copy.b2 .h2 { font-size: clamp(32px, 3.6vw, 56px); }
.hero-copy.b2 .stats { gap: clamp(14px, 2vw, 30px); }
.hero-copy.b2 .stats b { font-size: clamp(32px, 3.2vw, 44px); }
.hero-copy.b3 { left: 5vw; right: auto; bottom: 9vh; max-width: 520px; }
.stats { display: flex; gap: 30px; margin-top: 30px; }
.stats div { display: grid; gap: 4px; }
.stats b { font: 400 44px/1 var(--display); font-variation-settings: "SOFT" 100; color: var(--cocoa); }
.stats span { font-size: 14px; color: var(--muted); max-width: 13ch; line-height: 1.35; }
.cue { position: absolute; left: var(--gut); bottom: 28px; translate: none; z-index: 1; font: 500 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: grid; justify-items: start; gap: 10px; }
@media (max-height: 760px) { .cue { display: none; } }
.cue span { width: 1px; height: 40px; background: linear-gradient(var(--rose), transparent); animation: cue 2.2s infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media(max-width:820px){  .hero { height: 620vh; }
  .hero-img { left: 0; width: 100%; -webkit-mask-image: none; mask-image: none; object-position: 53% 50%; }
  .hero-copy { left: var(--gut); right: var(--gut); max-width: none; }
  .hero-copy.b1, .hero-copy.b2 { top: auto; bottom: 7vh; translate: none; right: var(--gut); max-width: none; }
  .hero-copy.b1 { background: linear-gradient(0deg, rgba(251, 248, 244, 0.95) 60%, rgba(251, 248, 244, 0)); margin: 0 calc(-1 * var(--gut)); padding: 60px var(--gut) 10px; bottom: 0; }
  .hero-copy.b2 { background: rgba(251, 248, 244, 0.97); border-radius: 22px; padding: 22px; left: 12px; right: 12px; bottom: 12px; }
  .hero-copy.b2 .body { font-size: 16px; }
  .hero-copy.b3 { left: var(--gut); bottom: 6vh; }
  .hero-bra { right: auto; left: 50%; translate: -50% -50%; top: 36%; width: min(54vw, 300px); }
  .hb-x { display: none; }
  .hb-dims text { font-size: 64px; }
  .hb-dims text.num { font-size: 54px; letter-spacing: 0.04em; }
  .hb-dims g[data-d="1"] text.num, .hb-dims g[data-d="2"] text.num { transform: translateY(18px); }
  .stats { gap: 18px; }
  .stats b { font-size: 34px; }
  .cue { display: none; }
}}
@media(prefers-reduced-motion:reduce){#original-hero .hero{height:100svh}}/* Keep the complete opening message above the fold beneath the mobile header. */
@media(max-width:820px){#original-hero .hero-copy.b1{bottom:84px}}
/* Reserve the mounted hero's height so section links do not shift during load. */
#original-hero{min-height:520vh}
@media(prefers-reduced-motion:reduce){#original-hero{min-height:100svh}}