:root {
  --canvas: #120914;
  --raised: #211225;
  --ink: #fff7fb;
  --muted: #d8c6d6;
  --accent: #ff3bc8;
  --accent-ink: #180718;
  --blush: #f6dce9;
  --rule: #6d4568;
  --focus: #b7ff36;
  --rail: min(1200px, calc(100% - 2 * clamp(20px, 5vw, 72px)));
  --header-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Arial, Helvetica, sans-serif; line-height: 1.5; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[id] { scroll-margin-top: calc(var(--header-height) + 18px); }

.skip-link { position: fixed; z-index: 100; left: 16px; top: 12px; transform: translateY(-160%); padding: 12px 16px; color: #111; background: var(--focus); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.concept-notice { min-height: 34px; padding: 7px clamp(16px, 4vw, 44px); display: flex; justify-content: space-between; gap: 24px; color: #2b0d25; background: var(--blush); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.site-header { position: absolute; z-index: 20; top: 34px; left: 0; right: 0; height: var(--header-height); padding: 0 max(20px, calc((100% - 1200px) / 2)); display: flex; align-items: center; justify-content: space-between; transition: background-color .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { position: fixed; top: 0; background: rgba(18, 9, 20, .96); box-shadow: 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(14px); }
.wordmark { text-decoration: none; font: italic 700 clamp(30px, 3vw, 42px)/1 Georgia, serif; letter-spacing: -.08em; }
.wordmark span { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }
.site-nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.site-nav a:not(.header-call) { border-bottom: 1px solid transparent; }
.site-nav a:not(.header-call):hover { border-color: currentColor; }
.header-call { padding: 0 19px; border: 1px solid rgba(255,255,255,.75); border-radius: 999px; }
.header-call:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.menu-button { display: none; min-width: 82px; min-height: 44px; padding: 0; justify-content: space-between; align-items: center; color: var(--ink); background: transparent; border: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.hero { position: relative; min-height: calc(100svh - 34px); isolation: isolate; overflow: hidden; display: grid; align-items: end; }
.hero-media, .hero-scrim { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; }
.hero-scrim { z-index: -2; background: linear-gradient(100deg, rgba(17,2,20,.9) 0%, rgba(32,4,33,.5) 48%, rgba(17,2,20,.12) 78%), linear-gradient(0deg, rgba(18,9,20,.8), transparent 44%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 20% 45%, rgba(255,59,200,.22), transparent 36%); mix-blend-mode: screen; }
.hero-orb { position: absolute; right: -8vw; top: 16%; width: min(42vw, 610px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 50% 48% 45% 52%; box-shadow: inset 0 0 90px rgba(255,59,200,.15), 0 0 70px rgba(255,59,200,.12); transform: rotate(-14deg); }
.hero-copy { width: var(--rail); margin: 0 auto clamp(94px, 12vh, 150px); }
.hero h1 { max-width: 920px; margin: 0; font: 700 clamp(72px, 12vw, 184px)/.76 Georgia, "Times New Roman", serif; letter-spacing: -.085em; text-wrap: balance; }
.hero h1 em { margin-left: .36em; color: var(--accent); font-weight: 400; text-shadow: 0 0 35px rgba(255,59,200,.35); }
.hero-copy > p { margin: 34px 0 0 .5vw; color: #f6eaf3; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.35; }
.media-label { position: absolute; z-index: 3; left: clamp(20px, 5vw, 72px); bottom: 22px; margin: 0; max-width: calc(100% - 40px); color: rgba(255,247,251,.72); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.scroll-cue { position: absolute; right: clamp(20px, 5vw, 72px); bottom: 22px; display: inline-flex; gap: 13px; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }

.intro { width: var(--rail); margin: 0 auto; padding: clamp(100px, 14vw, 190px) 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: clamp(48px, 9vw, 130px); align-items: end; color: #2b112a; background: var(--blush); }
.intro::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; height: inherit; background: var(--blush); }
.section-kicker { margin: 0 0 22px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.intro h2, .choices h2, .visit h2, .call-reveal h2 { margin: 0; font: 700 clamp(48px, 7vw, 104px)/.92 Georgia, "Times New Roman", serif; letter-spacing: -.065em; }
.intro-lede { max-width: 640px; margin: 36px 0 28px; font-size: clamp(17px, 1.7vw, 23px); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; font-weight: 700; text-underline-offset: 6px; }
.polish-figure { margin: 0 0 -70px; transform: rotate(3deg); }
.polish-figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 50% 50% 12px 12px; box-shadow: 0 30px 80px rgba(62,14,54,.18); }
figcaption { margin-top: 12px; color: #6c4d68; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.scroll-scene { position: relative; background: #090509; }
html[data-motion-state="enhanced"] .scroll-scene { min-height: 300svh; }
.scroll-stage { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: center; background: #120b13; }
html[data-motion-state="enhanced"] .scroll-stage { position: sticky; top: 0; height: 100svh; }
.scroll-poster, .scroll-stage video, .video-grade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scroll-stage video { opacity: 0; }
html[data-motion-state="enhanced"] .scroll-stage video.is-ready { opacity: 1; }
.video-grade { background: linear-gradient(90deg, rgba(9,5,9,.89), rgba(20,9,20,.55) 48%, rgba(9,5,9,.25)), radial-gradient(circle at 76% 48%, transparent, rgba(9,5,9,.3) 65%); }
.scroll-copy { position: relative; z-index: 2; width: var(--rail); margin: 0 auto; }
.scene-label { margin: 0 0 30px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.scene-panels { max-width: 720px; }
.scene-panel { padding: 22px 0; }
.scene-panel + .scene-panel { border-top: 1px solid rgba(255,255,255,.25); }
html[data-motion-state="enhanced"] .scene-panels { position: relative; min-height: 380px; }
html[data-motion-state="enhanced"] .scene-panel { position: absolute; inset: 0; display: grid; align-content: center; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; border: 0; }
html[data-motion-state="enhanced"] .scene-panel.is-active { opacity: 1; transform: translateY(0); }
.scene-index { color: var(--accent); font-size: 13px; font-weight: 700; }
.scene-panel h2 { max-width: 690px; margin: 10px 0 22px; font: italic 700 clamp(52px, 8vw, 116px)/.88 Georgia, serif; letter-spacing: -.07em; }
.scene-panel > p:last-child { max-width: 460px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.5vw, 21px); }
.scroll-progress { position: absolute; z-index: 3; right: clamp(20px, 4vw, 56px); top: 20%; bottom: 20%; width: 2px; background: rgba(255,255,255,.25); }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.scene-credit { left: auto; right: clamp(20px, 5vw, 72px); text-align: right; }
.motion-note { position: relative; z-index: 4; width: var(--rail); margin: 0 auto 20px; padding: 14px 16px; display: none; align-items: center; justify-content: space-between; gap: 18px; color: var(--ink); background: rgba(18,9,20,.88); border: 1px solid var(--rule); }
.motion-note p { margin: 0; font-size: 13px; }
.motion-note button { min-height: 44px; padding: 0 17px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 999px; font-weight: 700; cursor: pointer; }
html[data-motion-state="static"] .motion-note { display: flex; }

.choices { position: relative; padding: clamp(100px, 13vw, 180px) max(20px, calc((100% - 1200px) / 2)); color: #291129; background: var(--blush); }
.choices-heading { display: grid; grid-template-columns: .45fr 1.55fr; gap: 40px; align-items: start; }
.choices h2 em { color: #bb167f; font-weight: 400; }
.choice-list { margin: clamp(70px, 10vw, 130px) 0; border-top: 1px solid #9c7994; }
.choice-list article { min-height: 145px; padding: 26px 0; display: grid; grid-template-columns: 80px 1fr 1.1fr; gap: 28px; align-items: center; border-bottom: 1px solid #9c7994; }
.choice-list article > span { color: #a31b75; font-size: 12px; font-weight: 700; }
.choice-list h3 { margin: 0; font: italic 700 clamp(30px, 4vw, 56px)/1 Georgia, serif; letter-spacing: -.04em; }
.choice-list p { max-width: 420px; margin: 0; font-size: 17px; }
.nail-art-figure { width: min(72%, 880px); margin: 0 0 0 auto; }
.nail-art-figure img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 180px 12px 12px 12px; }

.call-reveal { position: relative; min-height: 92svh; overflow: hidden; display: grid; align-items: end; isolation: isolate; }
.call-reveal > img, .call-reveal-grade { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.call-reveal-grade { z-index: -1; background: linear-gradient(0deg, rgba(15,5,15,.95), rgba(16,4,16,.12) 76%), linear-gradient(90deg, rgba(18,9,20,.56), transparent); }
.call-reveal-content { width: var(--rail); margin: 0 auto clamp(80px, 11vw, 150px); transform: translateY(24px); opacity: .82; transition: transform .38s ease, opacity .38s ease; }
.call-reveal:is(:hover, :focus-within) .call-reveal-content { transform: translateY(0); opacity: 1; }
.call-reveal h2 { max-width: 940px; }
.call-reveal-content > p:not(.section-kicker) { max-width: 540px; margin: 28px 0; font-size: clamp(16px, 1.5vw, 21px); }
.primary-action { min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; font-weight: 800; text-decoration: none; }
.primary-action:hover { color: var(--ink); background: transparent; }

.visit { width: var(--rail); margin: 0 auto; padding: clamp(100px, 13vw, 180px) 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(50px, 9vw, 120px); }
.visit-intro > p:not(.section-kicker) { max-width: 590px; margin: 30px 0; color: var(--muted); font-size: 17px; }
.visit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.visit-board { display: grid; align-self: start; border-top: 1px solid var(--rule); }
.visit-board > div { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.visit-board p { margin: 0 0 20px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
address { margin-bottom: 15px; font: italic 700 clamp(27px, 3vw, 42px)/1.15 Georgia, serif; }
.visit-board a { text-underline-offset: 5px; }
.hours-block dl, .hours-block dd { margin: 0; }
.hours-block dl > div { padding: 9px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.hours-block dl > div:last-child { border: 0; }
.hours-block dd { color: var(--muted); }

.site-footer { padding: 70px max(20px, calc((100% - 1200px) / 2)) 42px; color: #32152e; background: var(--blush); }
.footer-name { font: 700 clamp(45px, 7vw, 96px)/1 Georgia, serif; letter-spacing: -.07em; }
.footer-name em { color: #b41479; font-weight: 400; }
.footer-links { margin: 40px 0; display: flex; flex-wrap: wrap; gap: 28px; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; text-underline-offset: 6px; }
.footer-disclosure { max-width: 840px; padding-top: 24px; border-top: 1px solid #a8889e; font-size: 13px; }
.footer-meta { margin-top: 32px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 820px) {
  :root { --header-height: 66px; }
  .concept-notice span:last-child { display: none; }
  .site-header { padding-inline: 20px; }
  .menu-button { display: flex; }
  .site-nav { position: absolute; top: 66px; left: 0; right: 0; padding: 16px 20px 24px; display: none; align-items: stretch; flex-direction: column; gap: 0; background: rgba(18,9,20,.98); border-top: 1px solid var(--rule); }
  .site-nav.is-open { display: flex; }
  .site-nav a { justify-content: space-between; border-bottom: 1px solid var(--rule) !important; }
  .site-nav .header-call { margin-top: 16px; justify-content: center; border: 1px solid var(--accent) !important; }
  .hero { min-height: calc(100svh - 34px); }
  .hero-copy { margin-bottom: 110px; }
  .hero h1 { font-size: clamp(68px, 21vw, 116px); line-height: .8; }
  .hero h1 em { margin-left: 0; }
  .hero-media { object-position: 63% 50%; }
  .hero-scrim { background: linear-gradient(0deg, rgba(17,2,20,.95), rgba(32,4,33,.45) 60%, rgba(17,2,20,.25)); }
  .hero-orb { width: 82vw; right: -30vw; top: 18%; }
  .intro { grid-template-columns: 1fr; }
  .polish-figure { width: 72%; margin: 10px 0 0 auto; transform: none; }
  html[data-motion-state="enhanced"] .scroll-scene { min-height: 240svh; }
  .scene-panel h2 { font-size: clamp(52px, 15vw, 82px); }
  .scene-credit { left: 20px; right: auto; text-align: left; bottom: 12px; }
  .motion-note { margin-bottom: 46px; }
  .choices-heading { grid-template-columns: 1fr; }
  .choice-list article { grid-template-columns: 46px 1fr; }
  .choice-list article p { grid-column: 2; }
  .nail-art-figure { width: 100%; }
  .call-reveal { min-height: 82svh; }
  .call-reveal-content { transform: none; opacity: 1; }
  .visit { grid-template-columns: 1fr; }
}

@media (max-width: 470px) {
  .hero-copy > p { margin-top: 25px; }
  .scroll-cue { display: none; }
  .media-label { max-width: 78%; }
  .polish-figure { width: 88%; }
  .choice-list article { grid-template-columns: 34px 1fr; gap: 14px; }
  .motion-note { align-items: flex-start; flex-direction: column; }
  .footer-name { line-height: .9; }
}

@media (hover: none), (pointer: coarse) {
  .call-reveal-content { transform: none; opacity: 1; }
}

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

@media (forced-colors: active) {
  .hero-scrim, .video-grade, .call-reveal-grade { background: transparent; }
  .hero-copy, .scroll-copy, .call-reveal-content { padding: 18px; background: Canvas; color: CanvasText; }
}