/* ============================================================
   DAILY DROP GROUP — design system
   Palette: ink black / champagne gold / bone / stone
   Type: Fraunces (display serif) + Manrope (geometric sans)
   ============================================================ */

:root{
  --ink: #0a0a0a;
  --ink-2: #121212;
  --ink-3: #1a1a19;
  --hair: rgba(212,175,106,0.16);
  --hair-strong: rgba(212,175,106,0.32);
  --gold: #b8892b;
  --gold-light: #d4af6a;
  --gold-pale: #e9d4a6;
  --bone: #f4f1e8;
  --stone: #9c9788;
  --stone-dim: #6b675c;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Manrope', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.serif{font-family:'Fraunces', serif;}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
  color:var(--bone);
}

.eyebrow{
  font-family:'Manrope',sans-serif;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:600;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

@media (max-width:640px){
  .wrap{padding:0 20px;}
}

/* ---------- nav ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(10,10,10,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.scrolled{
  border-bottom:1px solid var(--hair);
}
/* While the installation photo is passing behind the fixed nav, ease off
   to a lighter, more heavily blurred glass treatment so the bar reads as
   sitting over the photograph rather than cutting a hard band across it.
   Nav stays fully present and operable — this only softens its backing. */
.nav.over-media{
  background:rgba(10,10,10,0.58);
  backdrop-filter:blur(20px);
}
.nav.over-media .nav-brand,
.nav.over-media .nav-links a{
  text-shadow:0 1px 4px rgba(0,0,0,0.55);
}
@media (prefers-reduced-motion:reduce){
  .nav{transition:none;}
}
.nav-inner{
  max-width:1180px;
  margin:0 auto;
  padding:18px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Fraunces',serif;
  font-size:18px;
  letter-spacing:0.02em;
  color:var(--bone);
}
.nav-brand img{height:30px;width:auto;}
.nav-links{
  display:flex;
  gap:36px;
  align-items:center;
}
.nav-links a{
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--stone);
  transition:color .25s var(--ease);
}
.nav-links a:hover{color:var(--gold-light);}
.nav-cta{
  border:1px solid var(--hair-strong);
  padding:10px 20px;
  border-radius:2px;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-light) !important;
  transition:all .3s var(--ease);
  white-space:nowrap;
}
.nav-cta:hover{background:var(--gold);color:var(--ink) !important;border-color:var(--gold);}
.nav-toggle{display:none;background:none;border:none;color:var(--bone);font-size:24px;cursor:pointer;}

@media (max-width:1130px){
  .nav-links{
    position:fixed; top:66px; left:0; right:0;
    background:var(--ink-2);
    flex-direction:column;
    padding:24px 32px 32px;
    gap:20px;
    border-bottom:1px solid var(--hair);
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:all .3s var(--ease);
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-toggle{display:block;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 32px;
  border-radius:2px;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  transition:all .3s var(--ease);
  border:1px solid transparent;
}
.btn-gold{
  background:var(--gold);
  color:var(--ink);
}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-1px);}
.btn-ghost{
  border-color:var(--hair-strong);
  color:var(--bone);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-light);}

/* ---------- hero ---------- */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  /* Bottom padding raised 64px->80px only after the closing "A private
     amenity." / scarcity / CTA block below the reveal was removed —
     "It's already downstairs." is now the Hero's final line, and 64px
     alone left a visibly tighter seam into Prompt 3 than the ~150px gap
     visitors previously saw after that block. 80px restores a comparable,
     natural gap (80px + #showcase's own 72px/56px top padding) without
     touching #showcase or any other section's spacing. */
  padding:150px 24px 80px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(184,137,43,0.09), transparent 60%),
    var(--ink);
}
.hero-kicker{
  font-family:'Manrope',sans-serif;
  font-size:clamp(16px,1.3vw,19px);
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:600;
  color:#e8b13f;
  margin:0 0 28px;
  opacity:0;
  animation:fadeUp 1s var(--ease) .1s forwards;
}
.hero-headline{
  font-size:clamp(42px,5.4vw,57px);
  line-height:1.06;
  font-weight:500;
  color:var(--gold-light);
  max-width:960px;
  margin:0 auto;
  opacity:0;
  animation:fadeUp 1s var(--ease) .2s forwards;
}
.hero-subhead{
  font-size:clamp(19px,2.4vw,25px);
  line-height:1.4;
  font-weight:400;
  color:#ffffff;
  max-width:760px;
  margin:20px auto 0;
  opacity:0;
  animation:fadeUp 1s var(--ease) .3s forwards;
}
.hero-problem{
  font-family:'Manrope',sans-serif;
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.7;
  color:var(--stone);
  max-width:640px;
  margin:24px auto 0;
  opacity:0;
  animation:fadeUp 1s var(--ease) .4s forwards;
}
.hero-setup{
  font-size:clamp(24px,3.2vw,36px);
  line-height:1.3;
  font-weight:400;
  color:#ffffff;
  margin:48px auto 0;
  opacity:0;
  animation:fadeUp 1s var(--ease) .5s forwards;
}
.hero-reveal{
  width:100%;
  margin:28px auto 0;
}
.hero-visual{
  width:100%;
  max-width:920px;
  margin:0 auto;
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--hair-strong);
}
.hero-visual img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center center;
  display:block;
}
/* Cinematic scroll reveal: the frame fades/lifts in as it enters view, while
   the photograph itself settles from a very gentle zoom — an editorial
   "coming into focus" rather than a UI element popping in. The payoff line
   below is staggered slightly behind it so it reads as the answer arriving
   just after the installation becomes visible. */
.hero-visual.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.hero-visual.reveal.in{
  opacity:1;
  transform:translateY(0);
}
.hero-visual.reveal img{
  transform:scale(1.05);
  transition:transform 1.6s var(--ease);
}
.hero-visual.reveal.in img{
  transform:scale(1);
}
.hero-payoff{
  font-size:clamp(24px,3.6vw,37px);
  line-height:1.3;
  font-weight:500;
  color:var(--gold-light);
  margin:28px auto 0;
}
.hero-payoff.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .9s var(--ease) .3s, transform .9s var(--ease) .3s;
}
.hero-payoff.reveal.in{
  opacity:1;
  transform:translateY(0);
}
.hero-club{
  font-size:clamp(20px,1.6vw,24px);
  line-height:1.3;
  font-weight:500;
  color:var(--gold);
  margin:28px auto 0;
  opacity:0;
  animation:fadeUp 1s var(--ease) .8s forwards;
}
.hero-scarcity{
  margin-top:32px;
  opacity:0;
  animation:fadeUp 1s var(--ease) .85s forwards;
}
.hero-cta-secondary{
  border-color:rgba(184,137,43,0.4);
  color:var(--stone);
  font-weight:500;
}
.hero-cta-secondary:hover{border-color:var(--gold);color:var(--gold-light);}
.hero-actions{
  display:flex;
  gap:24px;
  margin-top:40px;
  flex-wrap:wrap;
  justify-content:center;
  opacity:0;
  animation:fadeUp 1s var(--ease) .9s forwards;
}
.hero-scroll{
  position:absolute;
  bottom:36px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:var(--stone-dim);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0;
  animation:fadeUp 1s var(--ease) 1s forwards;
}
.hero-scroll-line{
  width:1px;height:44px;
  background:linear-gradient(var(--gold),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{opacity:.3;}
  50%{opacity:1;}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
/* Mobile hero typography refinement (390px/375px): headline wraps to a
   deliberate 3-line composition instead of stranding "needed." alone,
   supporting line loses visual weight, problem trigger gains a touch of
   contrast. Scoped to small phones only — no other breakpoint is affected. */
@media (max-width:480px){
  .hero-headline{font-size:clamp(30px,9.3vw,44px);}
  .hero-subhead{font-size:17px;}
  .hero-problem{color:#b2aea0;}
  /* Desktop-only image/spacing tightening (below) is scoped out here so the
     approved mobile composition and spacing stay pixel-for-pixel unchanged. */
  .hero-reveal{margin:40px auto 0;}
  .hero-payoff{margin:22px auto 0;}
}
/* Product-reveal transition: honor reduced-motion for the two elements
   above — content still appears immediately, just without the fade/scale/
   stagger. Scoped to these two hero elements only. */
@media (prefers-reduced-motion:reduce){
  .hero-visual.reveal,
  .hero-visual.reveal img,
  .hero-payoff.reveal{
    transition:none;
  }
  .hero-visual.reveal,
  .hero-visual.reveal img,
  .hero-payoff.reveal{
    opacity:1;
    transform:none;
  }
}

/* ---------- section shell ---------- */
section{
  padding:100px 0;
  position:relative;
}
@media (max-width:640px){
  section{padding:72px 0;}
}
/* Hero-to-showcase seam only: a touch less dead air after the hero's own
   padding was tightened above, plus a faint echo of the hero's radial gold
   glow so the two feel like one continuous scene rather than a hard cut
   into a new block. Scoped to #showcase alone — its own bottom padding,
   and every other section's padding, are untouched. */
#showcase{
  padding-top:72px;
  background:radial-gradient(ellipse 900px 400px at 50% 0%, rgba(184,137,43,0.05), transparent 65%);
}
@media (max-width:640px){
  #showcase{padding-top:56px;}
}
/* Anchor-jump clearance: on narrow viewports the fixed nav (~67px tall)
   was landing directly over the top of "THE LOBBY AMENITY" eyebrow when
   the section is scrolled to via the nav link or "See It in a Lobby" CTA.
   scroll-margin-top only affects where the browser stops an anchor
   scroll — it changes no visible layout, padding, or section height. */
@media (max-width:640px){
  #showcase{scroll-margin-top:96px;}
}
.section-head{
  max-width:640px;
  margin-bottom:64px;
}
.section-head .eyebrow{display:block;margin-bottom:16px;}
.section-head h2{
  font-size:clamp(28px,4vw,46px);
  line-height:1.12;
}
.section-head p{
  color:var(--stone);
  font-size:16px;
  margin-top:18px;
  line-height:1.75;
}
.center{text-align:center;margin-left:auto;margin-right:auto;}

.divider{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-strong),transparent);
  border:none;
  margin:0;
}

/* ---------- gallery / showcase ----------
   Presented as an architectural portfolio rather than a product grid:
   large, unequal-width plates in a single vertical column, generous
   negative space between them, and a plain caption set below each
   image (never overlaid) so it reads like a wall label, not a tag. */
.portfolio{
  margin-top:64px;
  display:flex;
  flex-direction:column;
  gap:96px;
}
.portfolio-figure{margin:0;}
.portfolio-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:2px;
  border:1px solid var(--hair);
}
.portfolio-figure.wide img{aspect-ratio:16/9;object-fit:cover;}
.portfolio-figure.inset{
  max-width:720px;
  margin-left:auto;
  margin-right:0;
}
.portfolio-figure.inset img{aspect-ratio:4/3;object-fit:cover;}
.portfolio-figure figcaption{
  margin-top:20px;
  font-size:13px;
  letter-spacing:0.05em;
  color:var(--stone);
}
.portfolio-figure.inset figcaption{text-align:right;}
@media (max-width:800px){
  .portfolio{gap:56px;}
  .portfolio-figure.inset{max-width:100%;margin-left:0;margin-right:0;}
  .portfolio-figure.inset figcaption{text-align:left;}
}
@media (max-width:480px){
  .portfolio{margin-top:48px;gap:44px;}
  .portfolio-figure figcaption{font-size:12.5px;}
}

/* ---------- transition into visualizer ----------
   A short, quiet statement bridging the portfolio proof into the
   configurator below — no divider under it, so it reads as the lead-in
   line for the Visualizer rather than the close of its own section. */
.picture-transition{
  max-width:640px;
  margin:0 auto;
  padding:88px 24px 0;
  text-align:center;
}
.picture-transition-head{
  font-size:clamp(26px,3vw,38px);
  color:var(--gold-light);
  line-height:1.2;
}
.picture-transition-sub{
  margin-top:14px;
  font-size:16px;
  color:var(--stone);
  line-height:1.6;
}
#visualizer{padding-top:64px;}
@media (max-width:640px){
  .picture-transition{padding:56px 24px 0;}
  #visualizer{padding-top:40px;}
}

/* ---------- visualizer ---------- */
.viz{
  border:1px solid var(--hair);
  border-radius:4px;
  overflow:hidden;
  background:var(--ink-2);
}
.viz-tabs{
  display:flex;
  flex-wrap:wrap;
  border-bottom:1px solid var(--hair);
}
.viz-tab{
  flex:1 1 auto;
  min-width:120px;
  padding:16px 14px;
  text-align:center;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--stone);
  cursor:pointer;
  border-right:1px solid var(--hair);
  transition:all .25s var(--ease);
  background:transparent;
}
.viz-tab:last-child{border-right:none;}
.viz-tab:hover{color:var(--gold-light);background:rgba(184,137,43,0.05);}
.viz-tab.active{
  color:var(--ink);
  background:var(--gold);
  font-weight:600;
}
.viz-stage{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
}
.viz-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity .55s var(--ease);
}
.viz-img.active{opacity:1;}
.viz-caption{
  padding:22px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.viz-caption p{color:var(--stone);font-size:14px;margin:0;max-width:520px;}
.viz-caption .tag{
  font-family:'Fraunces',serif;
  font-style:italic;
  color:var(--gold-light);
  font-size:18px;
}

/* ---------- commercial model (zero cost / zero operation) ----------
   Editorial, not promotional: no cards, no icons, no badges. The three
   propositions sit in open columns separated only by a hairline rule,
   the same restrained divider language used everywhere else on the
   page, so this reads as a description of how the service works rather
   than a pricing table. */
#model .section-head .model-lede{
  color:var(--gold-light);
  font-size:clamp(19px,1.8vw,24px);
  margin-top:22px;
  line-height:1.5;
}
/* Sign-off correction: this section's own supporting-copy color, ~12%
   brighter than the site-wide --stone token used for the same role
   elsewhere, for readability. Scoped to #model only — the shared
   --stone variable and every other section's supporting copy (all of
   it outside this section) are untouched. */
#model .section-head p{color:#afa998;}
#model h2{font-size:clamp(30px,4.3vw,49px);}
@media (max-width:480px){
  #model h2{font-size:28px;}
}
.value-props{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
}
.value-prop{
  padding-left:32px;
  border-left:1px solid var(--hair);
}
.value-prop:first-child{padding-left:0;border-left:none;}
.value-prop-title{
  font-family:'Manrope',sans-serif;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:600;
  color:#ffffff;
  margin:0 0 14px;
}
.value-prop p{
  color:#afa998;
  font-size:15px;
  line-height:1.7;
  margin:0;
}
.model-conclusion{
  text-align:center;
  max-width:680px;
  margin:96px auto 0;
  font-size:clamp(24px,3vw,34px);
  color:var(--gold-pale);
  line-height:1.3;
}
.model-transition{
  text-align:center;
  max-width:520px;
  margin:20px auto 0;
  font-size:15px;
  color:#afa998;
  line-height:1.6;
}
@media (max-width:900px){
  .value-props{grid-template-columns:1fr;gap:0;margin-top:48px;}
  .value-prop{
    border-left:none;
    border-top:1px solid var(--hair);
    padding:28px 0 0;
    margin-top:28px;
  }
  .value-prop:first-child{border-top:none;padding-top:0;margin-top:0;}
}
@media (max-width:640px){
  .model-conclusion{margin-top:64px;}
}

/* ---------- process journey (how it comes together) ----------
   Architectural rather than a SaaS timeline: one thin structural rule
   across the top of the row on desktop, four open columns beneath it —
   no cards, no numbered circles, no icons. Reuses the site's existing
   .reveal mechanism per stage; disabling motion (prefers-reduced-motion,
   handled globally by main.js/.reveal already) still leaves every stage
   fully readable. */
.journey{
  margin-top:64px;
  padding-top:32px;
  border-top:1px solid var(--hair);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}
/* Sign-off correction: the 0/.12/.24/.36s desktop stagger (four stages
   entering together in one row, so a cascade reads nicely) was also
   firing on mobile, where each stage instead enters the viewport on
   its own during vertical scrolling — verified via simulated real
   scroll input that this left a stage sitting mostly/fully in view at
   0 opacity for ~150-300ms before its delayed transition started,
   reading as content gone dark rather than a deliberate reveal. Scoped
   the stagger to the desktop row (matching the existing 900px
   breakpoint where the four-column layout applies) so mobile stages
   fade in immediately as they're scrolled to, with no other change to
   spacing, typography, colour or the fade/translate animation itself. */
@media (min-width:901px){
  .journey-stage:nth-child(1){transition-delay:0s;}
  .journey-stage:nth-child(2){transition-delay:.12s;}
  .journey-stage:nth-child(3){transition-delay:.24s;}
  .journey-stage:nth-child(4){transition-delay:.36s;}
}
.journey-num{
  display:block;
  font-style:italic;
  font-size:16px;
  color:var(--gold);
  margin-bottom:14px;
}
.journey-name{
  font-family:'Manrope',sans-serif;
  font-size:14px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--bone);
  margin:0 0 12px;
}
.journey-desc{
  color:#afa998;
  font-size:14.5px;
  line-height:1.7;
  margin:0;
}
.journey-conclusion{
  text-align:center;
  max-width:640px;
  margin:84px auto 0; /* sign-off correction: 96px -> 84px (12.5%) on desktop/tablet only; the mobile override below is untouched */
  font-size:clamp(24px,3vw,34px);
  color:var(--gold-pale);
  line-height:1.3;
}
.journey-transition{
  text-align:center;
  max-width:480px;
  margin:20px auto 0;
  font-size:15px;
  color:#afa998;
  line-height:1.6;
}
@media (max-width:900px){
  .journey{grid-template-columns:1fr;gap:0;margin-top:48px;}
  .journey-stage{
    border-top:1px solid var(--hair);
    padding:28px 0 0;
    margin-top:28px;
  }
  .journey-stage:first-child{border-top:none;padding-top:0;margin-top:0;}
}
@media (max-width:640px){
  .journey-conclusion{margin-top:64px;}
}

/* ---------- private consultation invitation (Prompt 6) ----------
   The closing invitation of the homepage narrative: a single quiet,
   centered moment rather than a conventional CTA banner. Every other
   section on the site that isn't paired with a wide grid or image
   (.picture-transition, .model-conclusion, .journey-conclusion) is
   centered with a capped max-width for exactly this reason — a narrow
   left-aligned block on a wide viewport reads as unfinished, not
   restrained. This follows that same established convention. */
.invitation-head{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.invitation-head .eyebrow{display:block;margin-bottom:16px;}
.invitation-head h2{
  font-size:clamp(32px,4.8vw,53px); /* a stronger serif moment than the
    standard section h2 (max 46px) and #model's 49px, but capped well
    below the homepage hero headline's 57px ceiling at every width */
  line-height:1.14;
}
.invitation-head p{
  color:var(--stone);
  font-size:16px;
  margin-top:20px;
  line-height:1.75;
}
@media (max-width:480px){
  .invitation-head h2{font-size:32px;}
}
.invitation-panel{
  margin:64px auto 0;
  padding-top:40px;
  max-width:480px;
  text-align:center;
  border-top:1px solid var(--hair);
}
.invitation-label{
  display:block;
  font-family:'Manrope',sans-serif;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold-light);
  margin-bottom:14px;
}
.invitation-desc{
  color:var(--stone);
  font-size:15.5px;
  line-height:1.7;
  margin:0 0 32px;
}
.invitation-cta{display:inline-flex;}
.invitation-note{
  font-size:12.5px;
  color:var(--stone-dim);
  margin:18px 0 0;
}
.invitation-scarcity{
  display:block;
  text-align:center;
  margin:56px auto 0;
  opacity:0.75; /* sign-off correction: 0.82 -> 0.75, a further ~8.5% quieting
    of the capacity signal via colour intensity only (font-size left alone,
    per "do not aggressively change both") — applies at every width, since
    this permission asked for an equally restrained reduction on mobile too */
}
@media (max-width:640px){
  .invitation-panel{margin-top:48px;padding-top:32px;}
  .invitation-scarcity{margin-top:40px;}
}
@media (max-width:480px){
  .invitation-cta{width:100%;justify-content:center;}
}
/* Sign-off correction, desktop only (mobile spacing above is untouched):
   internal vertical rhythm tightened ~9-12% across the section's own
   elements so they read as more intentionally connected, while the
   100px section padding that creates the pause after "Opening day is
   only the beginning." (shared, generic section spacing — not specific
   to this section) is left completely alone. */
@media (min-width:641px){
  .invitation-head .eyebrow{margin-bottom:14px;}
  .invitation-head p{margin-top:18px;}
  .invitation-panel{margin-top:58px;padding-top:36px;}
  .invitation-label{margin-bottom:13px;}
  .invitation-desc{margin-bottom:29px;}
  .invitation-note{margin-top:16px;}
  .invitation-scarcity{margin-top:50px;}
}

/* ---------- resolved / objections ledger ---------- */
.ledger{
  border:1px solid var(--hair);
  border-radius:4px;
  overflow:hidden;
}
.ledger-row{
  display:grid;
  grid-template-columns:64px 200px 1fr 110px;
  align-items:center;
  gap:24px;
  padding:26px 28px;
  border-bottom:1px solid var(--hair);
  transition:background .25s var(--ease);
}
.ledger-row:last-child{border-bottom:none;}
.ledger-row:hover{background:rgba(184,137,43,0.04);}
.ledger-num{
  font-family:'Fraunces',serif;
  font-size:14px;
  color:var(--stone-dim);
}
.ledger-title{
  font-family:'Fraunces',serif;
  font-size:18px;
  color:var(--bone);
}
.ledger-body{
  color:var(--stone);
  font-size:14.5px;
  line-height:1.6;
}
.ledger-status{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:600;
}
.ledger-status svg{width:14px;height:14px;flex-shrink:0;}

@media (max-width:760px){
  .ledger-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:24px 22px;
  }
  .ledger-num{order:1;}
  .ledger-title{order:2;font-size:17px;}
  .ledger-status{order:3;justify-content:flex-start;margin-top:4px;}
  .ledger-body{order:4;}
}

/* ---------- process steps ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
  border-radius:4px;
  overflow:hidden;
}
.step{
  background:var(--ink);
  padding:36px 28px;
}
.step-num{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:32px;
  color:var(--gold);
  margin-bottom:18px;
  display:block;
}
.step h4{font-size:16px;margin-bottom:10px;}
.step p{color:var(--stone);font-size:13.5px;line-height:1.6;margin:0;}
.steps.cols-3{grid-template-columns:repeat(3,1fr);}
.steps.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr;}
  .steps.cols-3,.steps.cols-4{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr;}
  .steps.cols-3,.steps.cols-4{grid-template-columns:1fr;}
}

/* ---------- craving list ---------- */
.craving-list{border-top:1px solid var(--hair);}

/* ---------- category bullet list ---------- */
.category-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
.category-list li{
  position:relative;
  padding-left:26px;
  font-family:'Fraunces',serif;
  font-size:19px;
  color:var(--bone);
  line-height:1.4;
}
.category-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:9px;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--gold);
}
.craving-item{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  padding:14px 4px;
  border-bottom:1px solid var(--hair);
}
.craving-item::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
  align-self:center;
  margin-right:4px;
}
.craving-name{
  font-family:'Fraunces',serif;
  font-size:19px;
  color:var(--bone);
  flex-shrink:0;
}
.craving-desc{color:var(--stone);font-size:14.5px;}

/* ---------- tagline strip ---------- */
.tagline-strip{
  text-align:center;
  padding:36px 20px;
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:clamp(20px,3vw,30px);
  color:var(--gold-light);
  letter-spacing:0.01em;
}
.tagline-link{
  display:block;
  margin-top:14px;
  font-family:'Manrope',sans-serif;
  font-style:normal;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--stone);
}
.tagline-link:hover{color:var(--gold-light);}

/* ---------- email template card ---------- */
.email-template-card{
  border:1px solid var(--hair-strong);
  border-radius:4px;
  padding:40px;
  background:var(--ink-2);
}
@media (max-width:640px){.email-template-card{padding:24px;}}
.email-template-body{
  font-size:13.5px;
  line-height:1.85;
  color:var(--stone);
  white-space:pre-line;
  max-height:260px;
  overflow-y:auto;
  padding-right:8px;
}
.email-template-body strong{color:var(--bone);}

/* ---------- lobby gallery ---------- */
.lobby-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:32px;
}
.lobby-gallery-item{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  aspect-ratio:16/10;
}
.lobby-gallery-item img{
  width:100%;height:100%;object-fit:cover;
}
.lobby-gallery-cap{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:16px 18px;
  background:linear-gradient(0deg,rgba(0,0,0,0.85),transparent);
  font-size:12.5px;
  letter-spacing:0.03em;
  color:var(--bone);
}
@media (max-width:640px){
  .lobby-gallery{grid-template-columns:1fr;}
}

/* ---------- category strip ---------- */
.cat-strip{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:8px;
  scrollbar-width:none;
}
.cat-strip::-webkit-scrollbar{display:none;}
.cat-pill{
  flex:0 0 auto;
  padding:10px 20px;
  border:1px solid var(--hair);
  border-radius:100px;
  font-size:12.5px;
  color:var(--stone);
  letter-spacing:0.03em;
}

/* ---------- about / mission ---------- */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:72px;
  align-items:center;
}
.about-quote{
  font-family:'Fraunces',serif;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.35;
  color:var(--bone);
}
.about-quote em{color:var(--gold-light);font-style:italic;}
.use-instructions-label{
  font-family:'Fraunces',serif;
  font-size:clamp(22px,2.4vw,28px);
  font-weight:600;
  color:var(--gold-light);
  margin:0 0 18px;
  letter-spacing:0.02em;
}
.use-steps{
  list-style:none;
  counter-reset:use-step;
  margin:0 0 20px;
  padding:0;
  display:grid;
  gap:14px;
}
.use-steps li{
  counter-increment:use-step;
  position:relative;
  padding-left:34px;
  font-size:16px;
  line-height:1.5;
  color:var(--stone);
}
.use-steps li::before{
  content:counter(use-step);
  position:absolute;
  left:0;top:1px;
  width:24px;height:24px;
  border:1px solid var(--hair-strong);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  font-weight:700;
  font-family:'Manrope',sans-serif;
  color:var(--gold-light);
}
.use-steps li strong{color:var(--bone);font-weight:700;}
.use-important{
  font-size:14px;
  line-height:1.6;
  color:var(--stone);
  border-top:1px solid var(--hair);
  padding-top:16px;
  margin:0;
}
.use-important strong{color:var(--gold-light);}
.about-pillars{margin-top:40px;display:grid;gap:24px;}
.pillar{display:flex;gap:18px;}
.pillar-icon{
  flex:0 0 auto;
  width:38px;height:38px;
  border:1px solid var(--hair-strong);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-light);
}
.pillar h4{font-size:15px;margin-bottom:6px;}
.pillar p{color:var(--stone);font-size:13.5px;margin:0;line-height:1.6;}
.about-media{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  aspect-ratio:4/5;
}
.about-media img{width:100%;height:100%;object-fit:cover;}
@media (max-width:860px){
  .about-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  .about-media{order:-1;aspect-ratio:16/10;}
}

/* ---------- about: where we install (compact, folded in) ---------- */
.about-categories{margin-top:40px;}
.about-categories h5{
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--stone-dim);margin-bottom:16px;font-weight:600;
  font-family:'Manrope',sans-serif;
}

/* ---------- about: instructional video ---------- */
.video-feature{
  margin-top:56px;
}
.instructional-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border-radius:4px;
  border:1px solid var(--hair);
  background:var(--ink-2);
  object-fit:cover;
}
.video-caption{
  margin-top:16px;
  font-size:13px;
  color:var(--stone-dim);
  text-align:center;
}

/* ---------- booking banner ---------- */
.booking-banner{
  margin-top:40px;
  padding:36px 40px;
  border:1px solid var(--hair-strong);
  border-radius:6px;
  background:linear-gradient(135deg, rgba(184,137,43,0.10), rgba(184,137,43,0.02));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.booking-banner h3{
  font-size:22px;
  margin-bottom:8px;
}
.booking-banner p{
  color:var(--stone);
  font-size:14.5px;
  margin:0;
  max-width:420px;
}
.booking-banner .btn{
  flex-shrink:0;
}
@media (max-width:600px){
  .booking-banner{padding:28px 24px;}
}

.form-prefer-note{
  font-size:13px;
  color:var(--stone-dim);
  text-align:center;
  margin:0 0 28px;
  padding-bottom:24px;
  border-bottom:1px solid var(--hair);
  letter-spacing:0.02em;
}

/* ---------- form ---------- */
.form-card{
  border:1px solid var(--hair);
  border-radius:4px;
  padding:48px;
  background:var(--ink-2);
}
@media (max-width:640px){.form-card{padding:28px;}}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:22px;}
.field label{
  display:block;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:10px;
}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--ink);
  border:1px solid var(--hair-strong);
  color:var(--bone);
  padding:14px 16px;
  border-radius:2px;
  font-family:'Manrope',sans-serif;
  font-size:14.5px;
  transition:border-color .25s var(--ease);
}
.field textarea{resize:vertical;min-height:110px;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--gold);
}
.field input::placeholder,.field textarea::placeholder{color:var(--stone-dim);}
.checkline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12.5px;
  color:var(--stone);
  margin-bottom:26px;
}
.checkline input{margin-top:3px;}
.form-note{
  font-size:12px;
  color:var(--stone-dim);
  margin-top:18px;
}

.success-msg{
  display:none;
  text-align:center;
  padding:50px 20px;
}
.success-msg.show{display:block;}
.success-msg svg{width:42px;height:42px;color:var(--gold-light);margin-bottom:20px;}
.success-msg h3{margin-bottom:10px;}
.success-msg p{color:var(--stone);}

/* ---------- private consultation inquiry (Prompt 7) ----------
   Rebuilds #consult as a quiet, single-column "concierge intake" rather
   than a boxed corporate form: no .form-card background/border, no
   two-column contact/form split, no checkbox, no "24 hours" promises.
   Reuses the site's existing .field/.form-row/input styling untouched
   (those are shared with user-portal.html's other forms) — only new,
   uniquely-named classes are added here so nothing elsewhere is affected.
   #consultSuccess is styled by ID only, leaving the shared .success-msg
   base rules (and the checkmark-icon success states on user-portal.html)
   completely untouched. */
.consult-head{
  max-width:600px;
  margin:0 auto;
  text-align:center;
}
.consult-head .eyebrow{display:block;margin-bottom:16px;}
.consult-head h2{
  font-size:clamp(28px,4vw,42px);
  line-height:1.16;
}
.consult-head p{
  color:var(--stone);
  font-size:16px;
  margin-top:18px;
  line-height:1.75;
}
.consult-form-wrap{
  max-width:560px;
  margin:56px auto 0;
}
.consult-form-wrap .field{margin-bottom:24px;}
/* Sign-off correction, desktop only (mobile field spacing/heights above
   are untouched): ~8-10% more breathing room per field — label-to-field
   gap, field-to-field gap, and input/select/textarea vertical padding —
   scoped to .consult-form-wrap only, so the shared .field/input rules
   used by user-portal.html's other forms are unaffected. */
@media (min-width:641px){
  .consult-form-wrap .field{margin-bottom:26px;}
  .consult-form-wrap .field label{margin-bottom:11px;}
  .consult-form-wrap .field input,
  .consult-form-wrap .field select,
  .consult-form-wrap .field textarea{padding:15px 16px;}
}
.field-optional{
  text-transform:none;
  color:var(--stone-dim);
  font-weight:400;
  letter-spacing:0;
}
.field-invalid{border-color:#d98a76 !important;}
.field-error{
  font-size:12.5px;
  color:#d98a76;
  margin:8px 0 0;
}
.consult-submit{
  text-align:center;
  margin-top:12px;
}
.consult-cta{display:inline-flex;}
.consult-note,
.consult-privacy{
  font-size:12.5px;
  color:var(--stone-dim);
  max-width:420px;
  margin:14px auto 0;
  line-height:1.6;
}
.consult-privacy{
  font-size:11.5px; /* stays smaller than .consult-note (12.5px), so it
    still reads as tertiary even with the modest contrast bump below */
  color:#837f72; /* sign-off correction: was inheriting plain --stone-dim
    (~3.5:1, this file's existing micro-copy baseline) — that combined
    with the smaller size here to read as too faint. This is the
    midpoint between --stone-dim and --stone (~4.9:1, clears WCAG AA
    for normal text), a modest, deliberately un-dramatic lift, not a
    jump to full --stone brightness, which would compete with
    .consult-note above it. */
}
.consult-error{
  font-size:13px;
  color:#d98a76;
  margin:18px auto 0;
  max-width:420px;
}
@media (max-width:480px){
  .consult-cta{width:100%;justify-content:center;}
}
/* #consultSuccess — ID-scoped so the shared .success-msg rules (used by
   the checkmark-icon confirmations on user-portal.html) are untouched */
#consultSuccess{padding:24px 0 0;}
#consultSuccess .eyebrow{display:block;margin-bottom:16px;}
#consultSuccess h3{
  font-size:clamp(26px,3.4vw,36px);
  margin-bottom:0;
}
#consultSuccess p{
  max-width:480px;
  margin:18px auto 0;
  line-height:1.7;
}
#consultSuccess .consult-success-secondary{
  color:var(--stone-dim);
  font-size:14px;
  margin-top:14px;
}
#consultSuccess .btn{margin-top:36px;}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--hair);
  padding:64px 0 40px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  margin-bottom:48px;
}
.footer-brand{display:flex;align-items:center;gap:12px;}
.footer-brand img{height:34px;}
.footer-brand span{font-family:'Fraunces',serif;font-size:20px;}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h5{
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--stone-dim);margin-bottom:16px;font-weight:600;font-family:'Manrope',sans-serif;
}
.footer-col a,.footer-col p{
  display:block;
  color:var(--stone);
  font-size:14px;
  margin-bottom:10px;
}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding-top:32px;
  border-top:1px solid var(--hair);
  font-size:12px;
  color:var(--stone-dim);
}

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- misc ---------- */
.pill-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:1px solid var(--hair-strong);
  border-radius:100px;
  font-size:12px;
  color:var(--gold-light);
  letter-spacing:0.04em;
  margin-bottom:20px;
}
.pill-note .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}

.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:20px;
}
@media (max-width:640px){.stat-row{grid-template-columns:1fr;gap:24px;}}
.stat{border-left:1px solid var(--hair-strong);padding-left:20px;}
.stat b{
  display:block;
  font-family:'Fraunces',serif;
  font-size:30px;
  color:var(--gold-light);
  font-weight:500;
}
.stat span{font-size:12.5px;color:var(--stone);}

/* ---------- QR destination routing (user-portal.html only) ----------
   The two permanently-printed QR codes must not collapse into the same
   experience. #view-decisionmaker and #view-advocate are both always in
   the DOM; a small synchronous inline script in <body> (user-portal.html
   only) toggles .route-advocate on <html> based on location.hash, before
   either view paints, and re-syncs on hashchange. Scoped entirely to
   these two new classes/ids — nothing here touches any homepage rule or
   any other page. */
.portal-view{display:none;}
html:not(.route-advocate) #view-decisionmaker{display:block;}
html.route-advocate #view-advocate{display:block;}

/* ---------- restrained "moment" pairs (decision-maker QR experience) ---------- */
.moment-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px 48px;
  max-width:680px;
  margin:0 auto;
}
.moment{text-align:center;}
.moment-line1{font-size:clamp(19px,2.4vw,22px);color:var(--bone);margin:0;}
.moment-line2{font-size:14.5px;color:var(--stone);margin:6px 0 0;}
@media (max-width:600px){
  .moment-grid{grid-template-columns:1fr;gap:28px;max-width:360px;}
}