:root{
  --bg:#0b0a08;
  --bg-2:#131110;
  --ink:#050504;
  --paper:#efe8dc;
  --muted:#a89c89;
  --muted-dim:#79705f;
  --hairline:rgba(197,169,124,0.16);
  --hairline-strong:rgba(197,169,124,0.32);
  --brass:#ab8a5c;
  --brass-bright:#c7a878;
  --serif:'Cormorant',serif;
  --sans:'Work Sans',sans-serif;
  --font-headline:'Fraunces',serif;
  --font-body:'Spectral',serif;
  --font-accent:'Cormorant Garamond',serif;
  --ease:cubic-bezier(0.16,0.8,0.24,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--paper);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
ul,ol{list-style:none;}
img{max-width:100%; display:block;}
button{font:inherit; background:none; border:none; cursor:pointer; color:inherit;}
input,select,textarea{font:inherit; color:inherit;}

/* ---------- GRAIN ---------- */
.grain{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.section-inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
}

.kicker{
  font-family:var(--font-headline);
  font-size:11.5px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
  margin-bottom:22px;
}
.kicker.center{text-align:center;}

h1,h2,h3{
  font-family:var(--font-headline);
  font-weight:500;
  color:var(--paper);
  letter-spacing:0.005em;
}
h2{
  font-size:clamp(30px,4vw,46px);
  line-height:1.18;
  font-weight:400;
  margin-bottom:26px;
  letter-spacing:0.01em;
}
h2.center{text-align:center;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
.reveal.is-in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- INVITE (CTA) ---------- */
.invite{
  display:inline-flex; align-items:baseline; gap:10px;
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--paper);
  padding-bottom:3px;
  border-bottom:1px solid var(--hairline-strong);
  transition:border-color 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease);
}
.invite i{
  font-style:normal; color:var(--brass);
  transition:transform 0.3s var(--ease);
}
.invite:hover{border-color:var(--brass); color:var(--brass-bright); gap:14px;}
.invite:hover i{transform:translateX(2px);}
.invite-large{font-size:13.5px; padding-bottom:6px;}
.invite-submit{border:none; padding:14px 0 6px; border-bottom:1px solid var(--hairline-strong);}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(11,10,8,0.6);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.scrolled{background:rgba(11,10,8,0.86); border-color:var(--hairline);}
.nav-inner{
  width:100%; padding:26px 40px 26px 80px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.wordmark{
  font-family:var(--font-accent);
  font-size:18px;
  letter-spacing:0.1em;
  font-weight:400;
  color:var(--paper);
  white-space:nowrap;
}
.wordmark span{color:var(--brass);}
.wordmark.small{font-size:16px; margin-bottom:16px; justify-content:center; display:flex;}

.nav-right{
  display:flex; align-items:center; gap:44px;
}
.nav-links{
  display:flex; gap:34px;
  font-size:12px; letter-spacing:0.04em;
}
.nav-links a{color:var(--muted); transition:color 0.25s;}
.nav-links a:hover{color:var(--paper);}

/* Dropdown menus: glass, not a panel -- same blurred, translucent
   language as .nav itself, so a submenu reads as part of the same fixture
   rather than a UI component dropped on top of it. A small arrow marks
   which nav items open one; the others are just plain links. */
/* padding-bottom + a matching negative margin stretch the hoverable box
   down to meet the dropdown with zero dead zone in between -- without it,
   the gap needed for visual breathing room would drop :hover the instant
   the cursor crosses it, before ever reaching the menu. */
.nav-item{position:relative; padding-bottom:14px; margin-bottom:-14px;}
.nav-item > a{display:inline-flex; align-items:center; gap:6px;}
.nav-item > a::after{
  content:"";
  width:5px; height:5px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); margin-top:-3px; opacity:0.55;
  transition:transform 0.25s var(--ease);
}
.nav-item:hover > a::after, .nav-item:focus-within > a::after{transform:rotate(225deg); margin-top:2px;}
.dropdown-menu{
  position:absolute; top:100%; left:50%;
  transform:translate(-50%,4px);
  background:rgba(11,10,8,0.55);
  backdrop-filter:blur(18px);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:10px 0;
  min-width:230px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.dropdown-menu a{
  padding:11px 24px;
  color:var(--muted);
  font-size:12px; letter-spacing:0.03em;
  white-space:nowrap;
}
.dropdown-menu a:hover{color:var(--paper); background:rgba(197,169,124,0.07);}
.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu{
  opacity:1; visibility:visible; pointer-events:all;
  transform:translate(-50%,0);
}

.invite-nav{
  position:relative;
  font-family:var(--sans);
  font-size:12px; letter-spacing:0.04em;
  color:var(--brass);
  padding-left:44px;
  transition:color 0.25s;
}
.invite-nav::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:28px; height:1px; background:var(--hairline-strong);
}
.invite-nav:hover{color:var(--brass-bright);}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; padding:8px;
}
.nav-toggle span{width:20px; height:1px; background:var(--brass);}

/* ---------- HERO ---------- */
/* hero-media is sized purely by the image's own aspect ratio (cropped to
   1200:663 -- full width and floor kept intact, only the blank ceiling
   trimmed off the top so the recessed lights and cove light survive),
   so background-size:cover never has to scale beyond an exact fit -- the
   full frame is always shown, at any viewport width, with zero additional
   cropping. */
.hero{
  position:relative;
  background:var(--bg);
}

/* ---------- PAGE TRANSITION ---------- */
/* A slow, single cross-fade through the brand mark between pages -- no
   sliding panels, no snap. The overlay is opaque by default (so a fresh
   load never flashes unstyled content), then fades away shortly after
   paint; a tagged link reverses that fade before the browser navigates,
   so entering and leaving both pages feel like the same held breath.

   The mark and the backdrop are deliberately NOT on the same timing: when
   covering the page, the backdrop leads and the mark only eases in once
   it has somewhere dark to sit on (a delayed fade-in). When revealing,
   the order reverses -- the mark finishes dissolving completely before
   the backdrop even starts to lift, so the name is never seen sitting
   on top of the room it's supposedly still announcing. */
.page-transition{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  opacity:1; pointer-events:all;
  transition:opacity 2.3s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.page-transition.is-revealed{
  opacity:0; pointer-events:none;
  transition:opacity 1.3s var(--ease) 1.8s;
}
/* A native serif, not the webfont -- this mark can appear before Cormorant
   has finished loading, and swapping fonts mid-fade was what read as the
   mark "expanding": the fallback and the webfont don't share metrics, so
   the swap visibly resized the text. A system serif never needs a fetch,
   so the size never moves; only opacity does.

   Each letter (split into spans by app.js, indexed via --i) fades on its
   own, staggered so the word flows in and out one character at a time
   rather than switching as a single block. On entry it builds left to
   right a half-second after the room has begun to close, like a name
   being spelled out once the doors are shut -- that's entering the inner
   room. On the way out it dissolves the same way, and finishes completely
   before the backdrop (above) even begins to lift -- that's leaving it. */
.page-transition-mark{
  font-family:Georgia,'Times New Roman',serif; font-size:20px; letter-spacing:0.14em;
  color:var(--paper); font-weight:400; font-style:normal; white-space:nowrap;
}
.page-transition-mark .mark-gold{color:var(--brass-bright);}
.page-transition-mark .mark-letter{
  opacity:1;
  transition:opacity 0.7s var(--ease);
  transition-delay:calc(0.65s + var(--i) * 70ms);
}
.page-transition.is-revealed .page-transition-mark .mark-letter{
  opacity:0;
  transition:opacity 0.85s var(--ease);
  transition-delay:calc(var(--i) * 75ms);
}
@media (prefers-reduced-motion: reduce){
  .page-transition{display:none;}
}
.hero-media{
  position:relative;
  width:100%;
  aspect-ratio:1200 / 663;
  overflow:hidden;
}
.hero-backdrop{
  position:absolute; inset:0;
  background-image:url("assets/hero-480.jpg?v=1");
  background-size:cover;
  background-position:center;
}
@media (min-width:640px){
  .hero-backdrop{background-image:url("assets/hero-800.jpg?v=1");}
}
@media (min-width:1000px){
  .hero-backdrop{background-image:url("assets/hero-1200.jpg?v=1");}
}
@media (min-width:1440px){
  .hero-backdrop{background-image:url("assets/hero-1800.jpg?v=1");}
}
@media (min-width:1920px){
  .hero-backdrop{background-image:url("assets/hero-2688.jpg?v=1");}
}
/* No darkening overlay -- the photo stays at its true brightness. The
   cover page carries no text over the image, so nothing ever has to
   compete with -- or collide with -- whatever happens to be in the frame. */
.hero-scrim{display:none;}

/* Sits directly on the photo, on the lower pane of the window glass to
   the left -- a seal-like medallion (double ring, set type, opaque fill)
   so it reads as a deliberate mark rather than a generic UI icon dropped
   onto the image. */
.hero-begin{
  position:absolute; z-index:3; left:14%; top:52%; transform:translate(-50%,-50%);
}
.begin-badge{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:96px; height:96px;
  border-radius:50%;
  border:1px solid var(--hairline-strong);
  background:var(--bg);
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.55));
  transition:border-color 0.35s var(--ease), transform 0.35s var(--ease), background 0.35s var(--ease);
  animation:badge-breathe 3.2s ease-in-out infinite;
}
/* A deliberate, unhurried expand-and-contract -- reads as "press here"
   at a glance without ever ticking or blinking like a UI affordance.
   The beacon ring (::before) rides the same clock, expanding outward
   and dissolving in the brand's own brass rather than a UI-notification
   color, so the whole thing reads as a fixture of the room, not a badge
   bolted on top of it. Both pause on hover so the deliberate hover scale
   below always starts from a settled shape. */
@keyframes badge-breathe{
  0%, 100%{transform:scale(0.93);}
  50%{transform:scale(1.06);}
}
.begin-badge::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:50%;
  border:1px solid var(--brass);
  opacity:0;
  animation:badge-beacon 3.2s ease-out infinite;
  pointer-events:none;
}
@keyframes badge-beacon{
  0%{transform:scale(1); opacity:0.6;}
  75%, 100%{transform:scale(1.6); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .begin-badge, .begin-badge::before{animation:none;}
}
.begin-badge-ring{
  position:absolute; inset:7px;
  border:1px solid var(--hairline);
  border-radius:50%;
  transition:border-color 0.35s var(--ease);
}
.begin-badge-text{
  position:relative; z-index:1;
  font-family:var(--sans);
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--brass-bright);
}
.begin-badge:hover{border-color:var(--brass); background:var(--bg-2); transform:scale(1.04); animation-play-state:paused;}
.begin-badge:hover .begin-badge-ring{border-color:var(--hairline-strong);}
.begin-badge:hover::before{animation-play-state:paused; opacity:0;}

/* ---------- INTRODUCTION ---------- */
/* The old hero headline and CTA, relocated here now that the cover page
   holds only the photograph and the Enter mark. First thing read once
   inside the room -- top padding is generous enough to clear the fixed
   nav, since nothing else sits above it on this page. */
.intro{
  position:relative;
  padding:170px 40px 130px;
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
}
.intro-inner{max-width:640px; margin-left:0; margin-right:auto; padding:0 40px;}
.intro .kicker{color:var(--brass-bright);}
/* Quiet self-qualifying signal in the hero's open right-hand space --
   plain text, no border or background, sized and colored to read as a
   marginal note rather than a competing headline or badge. */
.hero-note{
  position:absolute;
  right:40px;
  bottom:150px;
  max-width:260px;
  text-align:right;
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--paper);
  line-height:1.8;
}
@media (max-width:1100px){
  .hero-note{display:none;}
}
.cta-note{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--muted);
  margin-top:14px;
}
.intro h1{
  font-family:var(--font-headline);
  font-weight:300;
  font-size:clamp(30px,5vw,52px);
  line-height:1.28;
  letter-spacing:0.01em;
  max-width:20ch;
  margin:0 0 28px;
}
.intro h1 em{
  font-family:var(--font-accent);
  font-style:italic;
  color:var(--brass-bright);
  font-weight:400;
}
.intro-sub{
  color:var(--muted);
  font-size:16px;
  max-width:480px;
  margin:0 0 40px;
  font-weight:400;
}

/* Shared "page card" -- a bordered, faintly brass-tinted panel used to
   give a section's content its own discrete, framed module instead of
   floating loose on the section background. Restrained on purpose: a
   hairline border and a whisper of tint, not a boxed SaaS card. */
.section-card{
  border:1px solid var(--hairline-strong);
  background:linear-gradient(160deg, rgba(197,169,124,0.055), transparent 68%);
  padding:48px 44px;
  margin-top:56px;
}

/* ---------- PROBLEM ---------- */
/* The backdrop is purely decorative -- position:absolute inside a
   position:relative section with no set height, so it fills whatever
   box the text and padding already produce (cover-cropped) rather than
   ever dictating that height itself. Shown at full brightness, no dimming
   scrim and no card behind the text either -- legibility comes entirely
   from a text-shadow, so nothing sits between the viewer and the photo. */
.problem{
  position:relative;
  padding:130px 40px;
  background:var(--bg-2);
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
}
.problem-backdrop{
  position:absolute; inset:0;
  background-image:url("assets/problem-480.jpg?v=1");
  background-size:cover;
  background-position:center;
}
@media (min-width:640px){
  .problem-backdrop{background-image:url("assets/problem-800.jpg?v=1");}
}
@media (min-width:1000px){
  .problem-backdrop{background-image:url("assets/problem-1200.jpg?v=1");}
}
@media (min-width:1440px){
  .problem-backdrop{background-image:url("assets/problem-1800.jpg?v=1");}
}
@media (min-width:1920px){
  .problem-backdrop{background-image:url("assets/problem-2688.jpg?v=1");}
}
.problem .section-inner{
  position:relative; z-index:1; max-width:640px;
  margin-left:0; margin-right:auto;
}
.problem .problem-line{color:var(--paper);}
.problem-lines{margin-top:40px;}
/* A soft, rounded card that now holds the kicker and heading too, not
   just the body paragraph -- guarantees every word of this section reads
   against the same warm, opaque backing instead of the raw photo, so
   nothing needs a text-shadow to stay legible. */
.problem .problem-lines{
  background:rgba(59,41,26,0.86);
  border-radius:28px;
  padding:32px 36px;
  backdrop-filter:blur(4px);
  box-shadow:0 8px 40px rgba(0,0,0,0.18);
  margin-top:0;
}
.problem .problem-lines .kicker{color:var(--brass-bright);}
@media (max-width:640px){
  .problem .problem-lines{padding:24px 24px; border-radius:20px;}
}
.problem-line{
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
  max-width:640px;
  margin:0 0 28px;
}
.problem-line:last-child{margin-bottom:0;}
.problem-line-accent{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(22px,2.8vw,28px);
  color:var(--brass-bright);
  line-height:1.5;
}

/* ---------- HOW / RAIL ---------- */
.how{
  position:relative;
  padding:130px 40px;
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
}
.how-backdrop{
  position:absolute; inset:0;
  background-image:url("assets/how-480.jpg?v=1");
  background-size:cover;
  background-position:center;
}
@media (min-width:640px){
  .how-backdrop{background-image:url("assets/how-800.jpg?v=1");}
}
@media (min-width:1000px){
  .how-backdrop{background-image:url("assets/how-1200.jpg?v=1");}
}
@media (min-width:1440px){
  .how-backdrop{background-image:url("assets/how-1800.jpg?v=1");}
}
@media (min-width:1920px){
  .how-backdrop{background-image:url("assets/how-2688.jpg?v=1");}
}
.how .section-inner{position:relative; z-index:1; max-width:640px; margin-left:0; margin-right:auto;}
.how h2{max-width:14ch;}
.how .problem-line{color:var(--paper);}
.how .problem-lines{
  background:rgba(59,41,26,0.86);
  border-radius:28px;
  padding:32px 36px;
  backdrop-filter:blur(4px);
  box-shadow:0 8px 40px rgba(0,0,0,0.18);
  margin-top:0;
}
.how .problem-lines .kicker{color:var(--brass-bright);}
@media (max-width:640px){
  .how .problem-lines{padding:24px 24px; border-radius:20px;}
}
.rail{
  position:relative;
  padding-left:64px;
  border-left:1px solid var(--hairline-strong);
  text-align:left;
}
.rail-step{position:relative; padding-bottom:40px;}
.rail-step:last-child{padding-bottom:0;}
.rail-num{
  position:absolute; left:-96px; top:-4px;
  width:56px; height:56px;
  border:1px solid var(--hairline-strong);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:16px; color:var(--brass);
  background:var(--bg);
}
.rail-step h3{font-size:22px; margin-bottom:10px; font-weight:400;}
.rail-step p{color:var(--muted); font-size:15px; max-width:520px;}

/* ---------- WHO IT'S FOR / PAGES ---------- */
.who{padding:130px 40px; background:var(--bg); border-bottom:1px solid var(--hairline);}
.pages{
  display:grid; grid-template-columns:1fr 1fr;
  position:relative;
}
.pages::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:var(--hairline-strong);
}
.page{padding:0 56px;}
.page:first-child{padding-left:0;}
.page:last-child{padding-right:0;}
.page-eyebrow{font-family:var(--serif); font-style:italic; color:var(--brass); font-size:20px; margin-bottom:14px;}
.page h3{font-size:26px; margin-bottom:18px; font-weight:400;}
.page-pain{color:var(--muted); font-size:15px; margin-bottom:30px;}
.page-outcome{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--paper); line-height:1.5;}

/* ---------- ROOM / SPEC ---------- */
.room{padding:130px 40px; background:var(--bg-2); border-bottom:1px solid var(--hairline);}

/* ---------- ON YOUR DOMAIN / WHY US ---------- */
.domain, .why{
  padding:130px 40px;
  border-bottom:1px solid var(--hairline);
}
.domain{background:var(--bg);}
.why{background:var(--bg-2);}
.domain .section-inner{max-width:640px; margin:0 auto;}
.why .section-inner{max-width:640px; margin-left:0; margin-right:auto;}
.referrals{
  padding:130px 40px;
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
}
.referrals .section-inner{max-width:900px;}
.room .section-inner{max-width:900px;}
.spec{margin-top:56px;}
.spec-row{
  display:grid; grid-template-columns:130px 1fr; gap:24px;
  padding:20px 0;
  border-top:1px solid var(--hairline);
}
.spec-row:last-child{border-bottom:1px solid var(--hairline);}
.spec-row dt{
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass);
  font-weight:600; padding-top:2px;
}
.spec-row dd{font-size:14.5px; color:var(--muted); line-height:1.6;}

/* ---------- PRICING ---------- */
.pricing{padding:130px 40px; background:var(--bg); border-bottom:1px solid var(--hairline);}
/* Matches .problem's own section-inner width exactly (900px, centered)
   so "What's Inside" reads at the same length/width/height rhythm as
   "The Problem" instead of stretching to the wider site-wide default. */
#whats-inside .section-inner{max-width:640px; margin-left:0; margin-right:auto;}
.engagement{
  max-width:960px; margin:70px auto 0; text-align:center;
  border-top:1px solid var(--hairline-strong);
  padding-top:56px;
}
.engagement h3{font-size:15px; letter-spacing:0.1em; text-transform:uppercase; font-family:var(--sans); font-weight:600; color:var(--brass); margin-bottom:18px;}
.tier-price{font-family:var(--serif); font-size:44px; color:var(--paper); margin-bottom:14px; font-weight:300;}
.tier-frame{color:var(--muted); font-size:15px; margin-bottom:40px; max-width:440px; margin-left:auto; margin-right:auto;}
/* Three categories, side by side like a spec sheet, so the whole scope
   of the engagement reads in one glance instead of three long scrolls
   stacked on top of each other -- hairline dividers between columns,
   the same device used for the Who's-For pages and the old tier cards. */
.detail-groups{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin:44px 0 40px;
  text-align:left;
}
.detail-group{padding:0 32px; border-right:1px solid var(--hairline);}
.detail-group:first-child{padding-left:0;}
.detail-group:last-child{padding-right:0; border-right:none;}
.detail-label{
  font-family:var(--sans); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--brass); font-weight:600; margin-bottom:16px;
  padding-bottom:10px; border-bottom:1px solid var(--hairline);
}
.detail-list li{
  position:relative; padding-left:18px; margin-bottom:14px;
  font-size:13.5px; color:var(--paper); line-height:1.6;
}
.detail-list li:last-child{margin-bottom:0;}
.detail-list li::before{content:"–"; position:absolute; left:0; color:var(--muted-dim);}
.engagement-mark{
  max-width:520px; margin:0 auto 44px; text-align:center;
  font-family:var(--serif); font-style:italic; color:var(--muted); font-size:14px;
}

/* ---------- BEYOND THE STANDARD (its own section, opposite tone from
   the Engagement above it, so the add-on list reads as a distinct
   moment rather than a long tail on the pricing block) ---------- */
.addons-section{padding:130px 40px; background:var(--bg-2); border-bottom:1px solid var(--hairline);}
.addons-section .section-inner{max-width:760px;}
.addons-intro{color:var(--muted); font-size:14px; margin:0 0 36px; text-align:center; max-width:460px; margin-left:auto; margin-right:auto;}
.addon-row{
  display:grid; grid-template-columns:1fr auto; gap:24px;
  padding:22px 0; border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
.addon-row:first-of-type{border-top:1px solid var(--hairline);}
.addon-row dt{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--paper); letter-spacing:0.02em;}
.addon-row dt span{display:block; font-family:var(--sans); font-weight:400; color:var(--muted); font-size:12.5px; margin-top:6px; letter-spacing:normal;}
.addon-row dd{font-family:var(--serif); font-size:16px; color:var(--brass); white-space:nowrap;}

/* ---------- ABOUT ---------- */
/* Same pattern as .problem: a full-brightness photo backdrop with no
   dimming scrim, position:absolute inside a position:relative section
   with no set height, so it never dictates the section's height. The
   kicker sits bare on the photo (a text-shadow carries it); the copy and
   closing line get a soft, translucent card behind them instead, for
   the same reason -- legible without ever turning into an opaque panel. */
.about{
  position:relative; overflow:hidden;
  padding:100px 24px; background:var(--bg-2); border-bottom:1px solid var(--hairline);
}
.about-backdrop{
  position:absolute; inset:0;
  background-image:url("assets/about-480.jpg?v=1");
  background-size:cover;
  background-position:center;
}
@media (min-width:640px){
  .about-backdrop{background-image:url("assets/about-800.jpg?v=1");}
}
@media (min-width:1000px){
  .about-backdrop{background-image:url("assets/about-1200.jpg?v=1");}
}
@media (min-width:1440px){
  .about-backdrop{background-image:url("assets/about-1800.jpg?v=1");}
}
@media (min-width:1920px){
  .about-backdrop{background-image:url("assets/about-2048.jpg?v=1");}
}
.about-inner{position:relative; z-index:1; max-width:560px; margin-left:0; margin-right:auto; padding:0;}
.about .kicker{text-align:left; text-shadow:0 2px 14px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.9);}
.about-lines{
  background:rgba(59,41,26,0.86);
  border-radius:22px;
  padding:24px 28px;
  backdrop-filter:blur(4px);
  box-shadow:0 8px 40px rgba(0,0,0,0.18);
}
@media (max-width:640px){
  .about-lines{padding:20px 20px; border-radius:18px;}
}
.about-copy{font-size:16px; color:var(--muted); line-height:1.6; margin-bottom:20px; text-align:left;}
.about-line{font-family:var(--font-accent); font-style:italic; font-size:clamp(20px,2.4vw,25px); color:var(--brass-bright); line-height:1.4; text-align:left;}

/* ---------- CONTACT ---------- */
.contact{padding:130px 40px; background:var(--bg);}
.contact-inner{max-width:760px;}

/* ---------- UNIFORM SECTION HEIGHT ---------- */
/* Every section is sized to match the Introduction, except Room and
   Pricing -- those two carry enough content on their own that forcing
   them into the same box would either clip them or force everything
   else to shrink to fit around them, so they're left to their natural
   height. Shorter sections get their content vertically centered in the
   shared height rather than left stranded at the top. */
.problem, .how, .who, .domain, .why, .referrals, .about, .contact{
  min-height:654px;
  display:flex;
  align-items:center;
}
.problem > .section-inner,
.how > .section-inner,
.who > .section-inner,
.domain > .section-inner,
.why > .section-inner,
.referrals > .section-inner,
.about > .section-inner,
.contact > .section-inner{
  width:100%;
}
@media (max-width:640px){
  .problem, .how, .who, .domain, .why, .referrals, .about, .contact{min-height:0;}
}
.contact h2{max-width:none;}
.contact-sub{color:var(--muted); font-size:15.5px; margin-bottom:56px;}

.intake{display:grid; grid-template-columns:1fr 1fr; gap:30px 32px;}
.field{display:flex; flex-direction:column; gap:10px;}
.field-wide{grid-column:1 / -1;}
.field label{
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
}
.field input, .field select, .field textarea{
  background:transparent;
  border:none; border-bottom:1px solid var(--hairline-strong);
  padding:10px 2px;
  font-size:15px; color:var(--paper);
  transition:border-color 0.3s;
  border-radius:0;
}
.field select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23ab8a5c'/></svg>");
  background-repeat:no-repeat; background-position:right 4px center;
}
.field select option{background:var(--bg-2); color:var(--paper);}
.field textarea{resize:vertical; min-height:88px; font-family:var(--sans);}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brass);
}
.intake-submit-row{grid-column:1 / -1;}
.invite-submit{margin-top:8px;}
.hp-field{position:absolute; left:-9999px; opacity:0;}

.intake-success{
  padding:36px 0;
  border-top:1px solid var(--hairline-strong);
  margin-top:8px;
}
.intake-success p:last-child{font-size:16px; color:var(--paper); max-width:52ch;}

/* ---------- FOOTER ---------- */
.footer{
  padding:64px 40px 70px;
  border-top:1px solid var(--hairline);
  text-align:center;
}
.footer-inner p{color:var(--muted-dim); font-size:13px; margin-bottom:10px;}
.footer-inner a{color:var(--brass); font-size:13px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .nav-right{display:none;}
  .nav-toggle{display:flex;}
  .pages{grid-template-columns:1fr; gap:56px;}
  .pages::before{display:none;}
  .page{padding:0 !important;}
  .rail{padding-left:0; border-left:none;}
  .rail-num{position:static; margin-bottom:16px;}
  .rail-step{padding-left:0; padding-bottom:44px; display:flex; flex-direction:column;}
  .engagement{padding-top:40px;}
  .detail-groups{grid-template-columns:1fr; gap:32px;}
  .detail-group{border-right:none; padding:0;}
  .addon-row{grid-template-columns:1fr; gap:6px;}
  .intake{grid-template-columns:1fr;}
  .problem, .how, .who, .room, .pricing, .addons-section, .referrals, .about, .contact{padding-left:24px; padding-right:24px;}
  .section-inner, .intro-inner{padding:0 24px;}
  .nav-inner{padding:26px 24px;}
}

body.nav-open .nav-inner{flex-wrap:wrap;}
body.nav-open .nav-right{
  display:flex; order:3; width:100%;
  flex-direction:column; align-items:flex-start; gap:22px;
  background:rgba(11,10,8,0.98);
  padding:28px 24px 32px;
}
body.nav-open .nav-links{flex-direction:column; gap:22px; width:100%;}
body.nav-open .nav-item{width:100%;}
body.nav-open .invite-nav{padding-left:0; padding-top:22px; border-top:1px solid var(--hairline); width:100%;}
body.nav-open .invite-nav::before{display:none;}
/* On mobile the dropdown just unfolds in place, always open once the
   nav itself is open -- no second tap, no hidden submenu to discover. */
body.nav-open .dropdown-menu{
  position:static; margin-top:16px;
  opacity:1; visibility:visible; pointer-events:all; transform:none;
  background:none; backdrop-filter:none; border:none; box-shadow:none;
  padding:0 0 0 18px; min-width:0;
  gap:16px;
}
body.nav-open .dropdown-menu a{padding:0; color:var(--muted-dim);}
body.nav-open .nav-item > a::after{display:none;}

/* ---------- PAGE-FIRST SECTION OFFSET ---------- */
/* Every page but the hero cover now leads with one of the content
   sections (they used to sit lower on one long scroll, cleared by
   whatever came before them). As the first thing under the fixed nav,
   each needs the same extra top clearance .intro always had. */
.page-hero-offset{padding-top:170px !important;}
@media (max-width:640px){
  .page-hero-offset{padding-top:140px !important;}
}