:root {
  --ink: #171316;
  --ink-soft: #302a2e;
  --pink: #e40058;
  --pink-dark: #bd0048;
  --blush: #f7dfe7;
  --cream: #f6f1eb;
  --paper: #fffdf9;
  --line: rgba(23, 19, 22, 0.16);
  --sans: "DM Sans", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 0.75rem; left: 0.75rem; padding: 0.75rem 1rem; background: white; color: black; transform: translateY(-160%); transition: transform 0.2s; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 110px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; color: white; border-bottom: 1px solid rgba(255,255,255,0.22); }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; line-height: 0.88; }
.brand-mark { width: 58px; height: 56px; overflow: hidden; border-radius: 50%; background: white; display: grid; place-items: center; }
.brand-mark img { width: 62px; max-width: none; transform: translateY(1px); }
.brand-copy { display: flex; flex-direction: column; }
.brand-name { font: 600 1.7rem/0.9 var(--serif); letter-spacing: -0.04em; }
.brand-sub { font: 500 0.87rem/1.2 var(--serif); margin-top: 0.25rem; }
.brand-sub b { color: #ff176d; font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.3vw, 2.7rem); font-size: 0.82rem; font-weight: 600; }
.site-nav > a:not(.nav-cta) { position: relative; }
.site-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -0.35rem; height: 1px; background: var(--pink); transition: right 0.25s; }
.site-nav > a:hover::after { right: 0; }
.nav-cta { padding: 0.75rem 1rem; border: 1px solid rgba(255,255,255,0.55); border-radius: 99px; transition: background 0.25s, color 0.25s; }
.nav-cta:hover { background: white; color: var(--ink); }
.menu-toggle { display: none; }

.hero { min-height: 820px; height: 100svh; position: relative; display: flex; align-items: center; overflow: hidden; background: var(--ink); color: white; }
.hero-image { position: absolute; inset: 0; background-image: url("assets/hero-woman.jpg"); background-size: cover; background-position: 60% center; transform: scale(1.015); animation: heroReveal 1.2s ease-out both; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,11,15,0.94) 0%, rgba(18,11,15,0.73) 37%, rgba(18,11,15,0.12) 68%, rgba(18,11,15,0.06) 100%), linear-gradient(0deg, rgba(18,11,15,0.3), transparent 35%); }
.hero-content { position: relative; z-index: 2; width: min(680px, 52vw); margin-left: 8vw; padding-top: 90px; animation: contentReveal 0.8s 0.25s ease-out both; }
.eyebrow { margin: 0 0 1.35rem; display: flex; align-items: center; gap: 0.75rem; color: rgba(255,255,255,0.76); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.71rem; font-weight: 600; }
.eyebrow > span { width: 34px; height: 1px; background: currentColor; }
.eyebrow.dark { color: #756b71; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; }
h1 { max-width: 650px; margin-bottom: 1.8rem; font-size: clamp(4rem, 6.3vw, 7.2rem); }
h1 em, h2 em { color: var(--pink); font-weight: 500; }
.hero-intro { max-width: 550px; color: rgba(255,255,255,0.82); font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.1rem; }
.button { min-height: 54px; padding: 0.95rem 1.4rem; border: 0; border-radius: 2px; display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; font-size: 0.81rem; font-weight: 600; cursor: pointer; transition: transform 0.2s, background 0.2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--pink); }
.button-primary:hover { background: var(--pink-dark); }
.button-light { color: var(--ink); background: white; }
.text-link { padding-bottom: 0.15rem; border-bottom: 1px solid rgba(255,255,255,0.45); font-size: 0.82rem; font-weight: 600; }
.reassurance { margin: 2rem 0 0; color: rgba(255,255,255,0.62); font-size: 0.78rem; }
.reassurance span { color: #ff6c9f; font-size: 1rem; margin-right: 0.35rem; }
.hero-rail { position: absolute; z-index: 2; right: 3vw; bottom: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; color: rgba(255,255,255,0.7); }
.hero-rail span { writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.58rem; }
.hero-rail i { height: 48px; width: 1px; background: rgba(255,255,255,0.5); }

.section-pad { padding: 8rem max(6vw, calc((100vw - 1380px)/2)); }
.section-number { position: absolute; top: 3.2rem; left: 3vw; color: rgba(23,19,22,0.24); font-size: 0.68rem; letter-spacing: 0.18em; }
.intro { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr); gap: 8vw; align-items: end; background: var(--paper); }
.intro h2, .paths h2, .pace h2, .finder h2 { margin: 0; font-size: clamp(3rem, 5vw, 5.8rem); }
.intro-copy { padding-bottom: 0.35rem; }
.intro-copy p { color: #645a60; line-height: 1.85; }
.arrow-link { display: inline-flex; justify-content: space-between; gap: 2.5rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--ink); font-size: 0.78rem; font-weight: 600; }

.paths { background: var(--cream); }
.paths-head { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.paths-head > p { max-width: 370px; color: #685e64; line-height: 1.8; }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.path-card { min-height: 460px; padding: 2.2rem; display: flex; flex-direction: column; }
.path-card-dark { color: white; background: var(--ink); }
.path-card-pink { color: white; background: var(--pink); transform: translateY(-1.4rem); }
.path-card-light { background: #fffaf4; border: 1px solid rgba(23,19,22,0.08); }
.path-icon { align-self: flex-end; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; opacity: 0.65; font-size: 0.63rem; }
.card-kicker { margin: auto 0 1rem; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.63rem; font-weight: 600; opacity: 0.68; }
.path-card h3 { margin-bottom: 1rem; font: 500 clamp(1.8rem, 2.4vw, 2.7rem)/1.05 var(--serif); letter-spacing: -0.035em; }
.path-card > p:not(.card-kicker) { max-width: 350px; margin-bottom: 1.7rem; font-size: 0.9rem; opacity: 0.72; }
.path-card a { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid currentColor; font-size: 0.7rem; font-weight: 600; }

.pace { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 8vw; background: var(--paper); }
.pace-title-wrap { position: sticky; top: 4rem; align-self: start; }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { padding: 2.3rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 80px 1fr; gap: 1.5rem; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-no { color: var(--pink); font-size: 0.69rem; letter-spacing: 0.14em; }
.steps h3 { margin-bottom: 0.6rem; font: 500 1.6rem/1.2 var(--serif); }
.steps p { max-width: 520px; margin: 0; color: #746970; font-size: 0.9rem; }

.night-out { position: relative; min-height: 760px; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); color: white; }
.night-out-image { position: absolute; inset: 0; background: url("assets/night-out-dancefloor-v2.jpg") center 45% / cover no-repeat; }
.night-out-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,19,22,0.9) 0%, rgba(23,19,22,0.58) 37%, rgba(23,19,22,0.08) 70%), linear-gradient(0deg, rgba(23,19,22,0.62), transparent 48%); }
.night-out-panel { position: relative; z-index: 1; width: min(610px, 48vw); margin: 0 0 5vw 6vw; padding: 3rem; background: rgba(23,19,22,0.88); backdrop-filter: blur(10px); border-left: 3px solid var(--pink); }
.night-out-panel h2 { margin-bottom: 1.5rem; font-size: clamp(3.7rem, 5.4vw, 6.4rem); }
.night-out-panel > p:not(.eyebrow):not(.night-out-note) { max-width: 510px; color: rgba(255,255,255,0.74); line-height: 1.85; }
.night-out-note { margin: 1.8rem 0 0; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.82); font: 500 1rem/1.6 var(--serif); }
.night-out-note span { color: var(--pink); margin-right: 0.45rem; }

.safety { min-height: 620px; display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: white; overflow: hidden; }
.safety-art { position: relative; min-height: 520px; background: radial-gradient(circle at 45% 47%, #3c2832 0, #21191e 36%, #171316 69%); }
.outline-heart { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -55%) rotate(-9deg); color: transparent; -webkit-text-stroke: 2px var(--pink); font: 500 clamp(20rem, 38vw, 37rem)/1 var(--serif); opacity: 0.72; }
.solid-heart { position: absolute; left: 50%; top: 50%; transform: translate(-32%, -10%); color: var(--pink); font: 500 6rem/1 var(--serif); filter: drop-shadow(0 8px 20px rgba(228,0,88,0.36)); }
.safety-copy { padding: 7rem 8vw 7rem 6vw; display: flex; flex-direction: column; justify-content: center; }
.safety-copy h2 { margin-bottom: 1.8rem; font-size: clamp(3.5rem, 5.3vw, 6rem); }
.safety-copy p:not(.eyebrow) { max-width: 540px; color: rgba(255,255,255,0.68); line-height: 1.85; }
.safety-copy .button { align-self: flex-start; margin-top: 1rem; }

.finder { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 8vw; background: #f2e8e9; }
.finder-copy > p:last-child { max-width: 420px; color: #6b5f66; margin-top: 1.5rem; }
.finder-form fieldset { margin: 0 0 1.2rem; padding: 0; border: 0; }
.finder-form label { position: relative; padding: 1.25rem 1rem; display: grid; grid-template-columns: 26px 1fr 30px; gap: 0.8rem; align-items: center; border-top: 1px solid rgba(23,19,22,0.22); cursor: pointer; transition: background 0.2s; }
.finder-form label:last-child { border-bottom: 1px solid rgba(23,19,22,0.22); }
.finder-form label:hover { background: rgba(255,255,255,0.4); }
.finder-form input { width: 17px; height: 17px; accent-color: var(--pink); }
.finder-form b, .finder-form small { display: block; }
.finder-form b { font: 500 1.25rem/1.3 var(--serif); }
.finder-form small { margin-top: 0.2rem; color: #746970; }
.finder-form i { font-style: normal; color: var(--pink); }
.finder-form .button { width: 100%; }
.form-note { margin: 0.75rem 0 0; color: #766b71; font-size: 0.72rem; }

.site-footer { padding: 5rem 6vw 2rem; background: var(--ink); color: white; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; }
.brand-footer .brand-name { font-size: 3rem; }
.brand-footer .brand-sub { font-size: 1.3rem; }
.footer-brand > p { color: rgba(255,255,255,0.44); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.64rem; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-links div { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-links p { margin-bottom: 0.45rem; color: #ff478a; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.62rem; }
.footer-links a { color: rgba(255,255,255,0.67); font-size: 0.83rem; }
.footer-bottom { grid-column: 1/-1; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.14); display: flex; justify-content: space-between; color: rgba(255,255,255,0.38); font-size: 0.67rem; }
.footer-bottom p { margin: 0; }

@keyframes heroReveal { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1.015); } }
@keyframes contentReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 920px) {
  .site-header { height: 86px; padding: 0 1.25rem; }
  .brand-mark { width: 48px; height: 46px; }
  .brand-mark img { width: 52px; }
  .brand-name { font-size: 1.45rem; }
  .menu-toggle { z-index: 4; display: grid; gap: 6px; width: 44px; height: 44px; place-content: center; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; background: transparent; color: white; }
  .menu-toggle span:not(.sr-only) { display: block; width: 18px; height: 1px; background: currentColor; transition: transform 0.2s; }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 0; padding: 8rem 2rem 3rem; flex-direction: column; align-items: flex-start; justify-content: center; background: rgba(23,19,22,0.98); transform: translateX(100%); transition: transform 0.3s ease; font: 500 2rem/1.2 var(--serif); }
  .site-nav.is-open { transform: translateX(0); }
  .nav-cta { margin-top: 1rem; font: 600 0.85rem/1 var(--sans); }
  .hero { min-height: 760px; align-items: flex-end; }
  .hero-image { background-position: 66% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(18,11,15,0.96) 0%, rgba(18,11,15,0.68) 53%, rgba(18,11,15,0.06) 100%); }
  .hero-content { width: auto; margin: 0; padding: 8rem 1.4rem 4rem; }
  .hero-intro { max-width: 620px; }
  .hero-rail { display: none; }
  .section-pad { padding: 6rem 1.4rem; }
  .intro, .paths-head, .pace, .finder { grid-template-columns: 1fr; gap: 3rem; }
  .intro { align-items: start; }
  .path-grid { grid-template-columns: 1fr; gap: 1px; }
  .path-card { min-height: 390px; }
  .path-card-pink { transform: none; }
  .pace-title-wrap { position: static; }
  .night-out { min-height: 680px; }
  .night-out-image { background-position: 58% center; }
  .night-out-panel { width: min(460px, 52vw); margin: 0 0 3rem 1.8rem; }
  .safety { grid-template-columns: 0.75fr 1.25fr; }
  .safety-copy { padding: 5rem 1.8rem; }
}

@media (max-width: 640px) {
  .hero { min-height: 730px; }
  h1 { font-size: clamp(3.35rem, 15vw, 4.7rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
  .button { width: 100%; }
  .intro h2, .paths h2, .pace h2, .finder h2 { font-size: clamp(2.7rem, 12vw, 4.4rem); }
  .paths-head { margin-bottom: 2.5rem; }
  .path-card { padding: 1.6rem; }
  .steps li { grid-template-columns: 50px 1fr; }
  .night-out { min-height: 760px; align-items: flex-end; }
  .night-out-image { background-position: 60% center; }
  .night-out-image::after { background: linear-gradient(0deg, rgba(23,19,22,0.96) 0%, rgba(23,19,22,0.74) 49%, rgba(23,19,22,0.04) 78%); }
  .night-out-panel { width: auto; margin: 0; padding: 3.2rem 1.4rem 3.8rem; background: transparent; border-left: 0; backdrop-filter: none; }
  .night-out-panel h2 { font-size: 3.8rem; }
  .safety { grid-template-columns: 1fr; }
  .safety-art { min-height: 360px; }
  .outline-heart { font-size: 23rem; }
  .safety-copy { padding: 4.5rem 1.4rem 5rem; }
  .safety-copy h2 { font-size: 3.6rem; }
  .site-footer { grid-template-columns: 1fr; padding: 4rem 1.4rem 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.4rem; }
}

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