@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fonts/cormorant_italic.woff2") format("woff2"); font-style: italic; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --void: #09090a;
  --obsidian: #111112;
  --basalt: #1a1a1c;
  --line: #2a2a2d;
  --bone: #f2f1ec;
  --ash: #8a8a8e;
  --marble: #ecebe6;
  --gold: #c9a25a;
  --bronze: #8c6a3a;
  --pad: clamp(20px, 5vw, 72px);
  --serif: "Cinzel", "Times New Roman", serif;
  --italic: "Cormorant", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, .84, .24, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--void); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* film grain over everything */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  transition: background .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.solid { background: rgba(9, 9, 10, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 14px; padding-bottom: 14px; border-color: var(--line); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; font-family: var(--serif); letter-spacing: .38em; font-size: .8rem; }
.brand svg { width: 26px; height: 26px; }
.nav-links { display: flex; align-items: center; gap: 34px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.nav-links a { text-decoration: none; color: var(--ash); transition: color .25s; }
.nav-links a:hover { color: var(--bone); }
.nav-links .pill { color: var(--bone); border: 1px solid var(--line); padding: 10px 18px; border-radius: 12px; transition: border-color .25s, background .25s; }
.nav-links .pill:hover { border-color: var(--gold); background: rgba(201, 162, 90, .08); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 120px var(--pad) 90px;
  overflow: hidden;
  isolation: isolate;
}
#dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-art img {
  position: absolute; z-index: -2; right: 3%; bottom: 0;
  height: 96%; width: auto; max-width: none;
  animation: rise 3s var(--ease) .15s both;
  will-change: transform;
}
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 11%, 0) scale(1.04); filter: brightness(.3) blur(7px); }
  60% { filter: brightness(.8) blur(1px); }
  to { opacity: 1; transform: none; filter: none; }
}

.hero-copy { max-width: 780px; position: relative; }
.eyebrow {
  font-family: var(--italic); font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--gold); letter-spacing: .06em; margin-bottom: 22px;
  display: flex; align-items: center; gap: 16px;
}
.eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--bronze); }
.wordmark {
  font-family: var(--serif); font-weight: 500; text-transform: uppercase;
  font-size: clamp(2.3rem, 6.3vw, 6.4rem); line-height: .98; letter-spacing: .16em;
  margin-right: -.16em;
}
.slogan {
  margin-top: clamp(26px, 4vw, 44px);
  font-family: var(--italic); font-style: italic; font-weight: 300;
  font-size: clamp(1.7rem, 3.5vw, 3.1rem); line-height: 1.12; color: var(--bone);
}
.cta { margin-top: clamp(34px, 5vw, 58px); max-width: 480px; }
.fine { margin-top: 14px; font-size: .82rem; color: var(--ash); letter-spacing: .02em; }

/* reveal on load */
.fade { opacity: 0; transform: translateY(18px); animation: up 1.1s var(--ease) both; }
@keyframes up { to { opacity: 1; transform: none; } }
.d1 { animation-delay: .25s; } .d2 { animation-delay: .45s; } .d3 { animation-delay: .75s; } .d4 { animation-delay: 1s; } .d5 { animation-delay: 1.2s; }

.scroll-cue {
  position: absolute; left: var(--pad); bottom: 30px; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ash);
  display: flex; align-items: center; gap: 14px;
}
.scroll-cue i { display: block; width: 1px; height: 38px; background: linear-gradient(var(--gold), transparent); animation: drip 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- waitlist form ---------- */
.waitlist { display: flex; gap: 10px; }
.waitlist input[type="email"] {
  flex: 1; min-width: 0;
  background: rgba(242, 241, 236, .04); border: 1px solid var(--line); color: var(--bone);
  font: inherit; font-size: 1rem; padding: 17px 20px; border-radius: 14px;
  transition: border-color .25s, background .25s;
}
.waitlist input::placeholder { color: #6c6c70; }
.waitlist input:focus { outline: none; border-color: #55555a; background: rgba(242, 241, 236, .06); }
.btn {
  appearance: none; cursor: pointer; border: 0; border-radius: 14px;
  background: var(--bone); color: var(--void);
  font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  padding: 0 26px; white-space: nowrap;
  transition: background .3s, box-shadow .3s, transform .2s;
}
.btn:hover { background: #fff; box-shadow: 0 0 0 1px var(--gold), 0 10px 40px -8px rgba(201, 162, 90, .55); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .6; cursor: wait; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { margin-top: 12px; font-size: .9rem; min-height: 1.4em; color: var(--ash); }
.form-msg.ok { color: var(--gold); }
.form-msg.err { color: #c9695f; }
.light .waitlist input[type="email"] { background: rgba(0, 0, 0, .04); border-color: #c9c8c2; color: #111; }

/* ---------- sections ---------- */
section { position: relative; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.roman { font-family: var(--serif); color: var(--gold); letter-spacing: .3em; font-size: .8rem; display: flex; align-items: center; gap: 18px; }
.roman::after { content: ""; flex: 0 0 64px; height: 1px; background: var(--bronze); }
h2 {
  font-family: var(--italic); font-style: italic; font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.04; margin-top: 22px;
}
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #bdbcb6; max-width: 40em; margin-top: 28px; }

.why { padding: clamp(100px, 14vw, 190px) 0 clamp(80px, 10vw, 140px); }
.why .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: end; }
.why .pull { font-family: var(--serif); font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.5; letter-spacing: .02em; border-left: 1px solid var(--gold); padding-left: 28px; color: var(--bone); }

.protocol { padding: clamp(40px, 6vw, 80px) 0 clamp(100px, 12vw, 170px); }
.steps { margin-top: clamp(48px, 7vw, 90px); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.step { padding: 36px clamp(20px, 3vw, 44px) 12px 0; border-right: 1px solid var(--line); }
.step + .step { padding-left: clamp(20px, 3vw, 44px); }
.step:last-child { border-right: 0; }
.step small { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ash); }
.step h3 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; letter-spacing: .08em; margin: 14px 0 14px; text-transform: uppercase; }
.step p { color: #a9a8a2; font-size: .98rem; }

/* marble band */
.band { background: var(--marble); color: #121212; overflow: hidden; }
.band .grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(20px, 5vw, 90px); min-height: min(92vh, 860px); }
.band figure { position: relative; align-self: end; }
.band figure img { width: min(100%, 520px); margin: 0 auto; }
.band figcaption { position: absolute; left: 0; top: 110px; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: #6d6c66; }
.band .copy { padding: clamp(70px, 9vw, 130px) 0; }
.band .roman { color: #8c6a3a; }
.band h2 { font-family: var(--serif); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.04; }
.band p { margin-top: 26px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #3b3a36; max-width: 30em; }
.band .rule { margin-top: 40px; font-family: var(--italic); font-style: italic; font-size: 1.5rem; color: #121212; }

.streak { padding: clamp(110px, 14vw, 200px) 0; overflow: hidden; }
.streak .grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 90px); align-items: center; }
.streak blockquote { font-family: var(--italic); font-style: italic; font-weight: 300; font-size: clamp(2.2rem, 5.4vw, 5rem); line-height: 1.04; }
.streak blockquote em { color: var(--gold); font-style: italic; }
.streak .art { position: relative; justify-self: end; width: min(100%, 440px); }
.streak .art img { width: 100%; }

.price { padding: clamp(60px, 8vw, 110px) 0 clamp(110px, 14vw, 190px); text-align: left; border-top: 1px solid var(--line); }
.price .cta { max-width: 520px; }
.price h2 { margin-top: 18px; }

.faq { padding: clamp(70px, 9vw, 120px) 0; border-top: 1px solid var(--line); background: var(--obsidian); }
.faq .grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 6vw, 110px); }
details { border-bottom: 1px solid var(--line); }
details:first-of-type { border-top: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 24px 0; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .05em; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--sans); font-weight: 200; font-size: 1.7rem; color: var(--gold); transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 26px; color: #a9a8a2; max-width: 38em; }

footer { padding: 70px var(--pad) 46px; border-top: 1px solid var(--line); }
.foot { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px 60px; justify-content: space-between; align-items: flex-start; }
.foot .brand { font-size: .78rem; }
.foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 30px; font-size: .84rem; color: var(--ash); }
.foot a { text-decoration: none; color: var(--ash); transition: color .2s; }
.foot a:hover { color: var(--bone); }
.legal-line { max-width: 1240px; margin: 40px auto 0; font-size: .76rem; color: #5d5d61; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- legal pages ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 150px var(--pad) 100px; }
.doc h1 { font-family: var(--serif); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
.doc .meta { margin-top: 14px; color: var(--ash); font-size: .9rem; }
.doc h2 { font-family: var(--serif); font-style: normal; font-weight: 500; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 54px; color: var(--bone); }
.doc p, .doc li { color: #bdbcb6; margin-top: 14px; }
.doc ul { padding-left: 1.2em; }
.doc a { color: var(--gold); text-underline-offset: 3px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .94rem; }
.doc th, .doc td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: #bdbcb6; }
.doc th { color: var(--bone); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav-links a:not(.pill) { display: none; }
  .hero { align-items: flex-start; padding-top: 55svh; padding-bottom: 80px; }
  .hero-art { height: 64svh; bottom: auto; }
  .hero-art img { right: 9%; bottom: 0; height: 100%; }
  .hero-copy { max-width: 100%; }
  .why .grid, .band .grid, .streak .grid, .faq .grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 30px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: 0; }
  .band .grid { min-height: 0; }
  .band figure { order: 2; }
  .streak .art { justify-self: center; order: 2; max-width: 340px; }
  .scroll-cue { display: none; }
}
@media (max-width: 520px) {
  .waitlist { flex-direction: column; }
  .btn { padding: 18px 26px; }
  .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade, .rv, .hero-art img { animation: none; opacity: 1; transform: none; transition: none; filter: none; }
  .scroll-cue i { animation: none; }
  #dust { display: none; }
}

/* spacing tweaks that used to be inline styles (the content security policy forbids inline styles) */
.streak .lead { margin-top: 44px; }
.price .cta { margin-top: 44px; }