/* ============ Dezenyo warm cinematic prototype ============ */
*, *::before, *::after { box-sizing: border-box; }
figure, blockquote, dl, fieldset, menu { margin: 0; }
html, body { margin: 0; }

/* lock scroll while the preloader is up (class set by inline head script) */
html.is-preloading, html.is-preloading body { overflow: hidden; }

/* Metric-matched fallback for the display serif. Georgia renders ~15% wider than Fraunces,
   so the big hero H1 wrapped to 3 lines in the fallback then jumped to 2 when Fraunces swapped
   in -- a ~0.30 CLS on desktop. size-adjust shrinks the Georgia fallback to Fraunces' advance
   width, so the wrap (and block height) match and the webfont swap is shift-free. */
@font-face{
  font-family:"Fraunces fallback";
  src:local("Georgia"),local("Times New Roman"),local("Times");
  size-adjust:86.5%;
}

/* Self-hosted Fraunces (variable, weight 300-900) -- same-origin so it loads fast enough to
   paint the hero H1 in the brand serif on first visit, with display:swap + the matched fallback
   above covering the brief load window (no CLS). Replaces the slow cross-origin Google variable. */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("fonts/fraunces-latin-roman.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
  src:url("fonts/fraunces-latin-italic.woff2") format("woff2");
}

:root{
  --paper:#FAF6EE;       /* warm cream */
  --paper-2:#F2EBDD;
  --bloom-paper:#FFFCF6; /* warm near-white: the bloom gallery wall, brighter than cream, never pure #fff */
  --ink:#1F1916;         /* warm near-black */
  --ink-soft:#6B6157;
  --espresso:#160F0B;    /* warm cinematic dark */
  --espresso-2:#201611;
  --oxblood:#8A2A22;     /* brand accent, slightly lifted for AA on dark */
  --oxblood-deep:#5E1A16;
  --honey:#D9A85C;
  --rule:rgba(250,246,238,.14);
  --rule-ink:rgba(31,25,22,.14);
  --display:"Fraunces", "Fraunces fallback", Georgia, serif;
  --body:"Instrument Sans", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --rails: clamp(1.25rem, 5vw, 5rem);
}

html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--body);
  background:var(--espresso);
  color:var(--paper);
  font-size:clamp(1rem,.95rem + .2vw,1.125rem);
  line-height:1.5;
  overflow-x:hidden;
}
body.lenis, html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

.mono{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:400; }
.eyebrow{ color:var(--honey); }

h1,h2,h3{ font-family:var(--display); font-weight:340; line-height:1; letter-spacing:-.015em; margin:0; font-optical-sizing:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); background:var(--oxblood);
  padding:.95rem 1.6rem; border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s;
}
.btn:hover{ background:var(--oxblood-deep); transform:translateY(-2px); }
.btn--big{ padding:1.15rem 2rem; font-size:.8rem; }
.link{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  position:relative; padding-bottom:.25rem; color:var(--paper);
}
.link::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(.3); transform-origin:left; opacity:.5; transition:transform .4s, opacity .4s; }
.link:hover::after{ transform:scaleX(1); opacity:1; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--rails);
  color:var(--paper);               /* default white: dark hero + dark work reel */
  transition:color .4s;
}
.nav__mark{ font-family:var(--display); font-size:1.4rem; font-weight:500; letter-spacing:-.02em; }
.nav__mark span{ color:var(--oxblood); }   /* the dot stays oxblood on every backdrop */
.nav__links{ display:flex; align-items:center; gap:1.6rem; }
.nav__links a{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.nav__links a:hover{ opacity:1; }
.nav__cta{ border:1px solid currentColor; padding:.55rem 1rem; border-radius:999px; opacity:1 !important;
  transition:background .35s ease, color .35s ease, border-color .35s ease; }
.nav__cta:hover{ background:var(--oxblood); border-color:var(--oxblood); color:var(--paper); }
body.nav-dark .nav{ color:var(--ink); }   /* flip ink over the cream conversion region */
body.nav-over-footer .nav{ color:var(--paper); }              /* nav overlaps the oxblood footer -> stay light + legible */
body.nav-over-footer .nav__mark span{ color:var(--honey); }   /* keep the wordmark dot visible on oxblood */

/* ============ PRELOADER ============ */
#preloader{ display:none; }                 /* shown only when JS is on */
html.js #preloader{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:200;
  background:radial-gradient(125% 95% at 50% 32%, #FFFDF9 0%, var(--paper) 46%, var(--paper-2) 100%);
  overflow:hidden;
}
#preloader::after{ /* faint warm honey glow so the light panel is not flat */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(95% 72% at 50% 40%, rgba(217,168,92,.12), transparent 62%);
}
.pre__inner{
  position:relative; z-index:1; text-align:center; padding:0 var(--rails);
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
}
.pre__notice{ color:var(--oxblood); opacity:0; font-size:.62rem;
  animation:preIn .6s .35s ease both, preBlink 1.8s 1.1s ease-in-out infinite; }
.pre__word{
  font-family:var(--display); font-weight:340; line-height:1.2; white-space:nowrap;  /* strut governs line height -> faces can't bob the block */
  font-size:clamp(3rem,12vw,9rem); color:var(--ink); letter-spacing:-.02em;
  margin:0; opacity:0; animation:preIn .8s .05s ease both;
}
.pre__dot{ color:var(--oxblood); font-style:normal; }
#zen{ display:inline-block; color:var(--ink); }
/* each "zen" letter wears its own face + cycles independently -> lock each in its own
   box (height + width fixed) so face swaps never bob the word or jitter the "yo" after it. */
.zl{
  display:inline-block; width:.5em; height:1em; line-height:1; overflow:visible;
  text-align:center; vertical-align:baseline; transform-origin:center bottom;
}
/* per-face height match: scale each face so z/e/n share ONE ink height (Fraunces's),
   measured ratios -> scale = 0.465 / face-ink-ratio. transform keeps the box fixed (no jitter). */
.zl.pf-fraunces { transform:scale(1.00); }
.zl.pf-caveat   { transform:scale(1.15); }
.zl.pf-dmserif  { transform:scale(0.89); }
.zl.pf-bricolage{ transform:scale(0.83); }
.zl.pf-anton    { transform:scale(0.63); }
.zl.pf-mono     { transform:scale(0.92); }
.zl.pf-sans     { transform:scale(0.88); }
/* "zen" typeface presets the JS cycles through */
.pf-fraunces { font-family:"Fraunces", Georgia, serif; font-weight:600; font-style:italic; }
.pf-anton    { font-family:"Anton", sans-serif; font-weight:400; letter-spacing:.02em; }
.pf-caveat   { font-family:"Caveat", cursive; font-weight:700; }
.pf-dmserif  { font-family:"DM Serif Display", serif; font-style:italic; }
.pf-mono     { font-family:"Space Mono","JetBrains Mono", monospace; font-weight:700; letter-spacing:-.04em; }
.pf-bricolage{ font-family:"Bricolage Grotesque", sans-serif; font-weight:800; }
.pf-sans     { font-family:"Instrument Sans", system-ui, sans-serif; font-weight:600; }
.pf-accent   { color:var(--oxblood); }       /* JS may add this for an occasional colour beat */
.pre__bar{
  display:block; width:100%; height:1px; background:var(--rule-ink);   /* span the whole word */
  position:relative; overflow:hidden; opacity:0; animation:preIn .7s .3s ease both;
}
.pre__bar i{
  position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
  background:var(--oxblood); animation:preBar 1.7s .3s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes preIn { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes preBar{ to{ transform:scaleX(1) } }
@keyframes preBlink{ 0%,100%{ opacity:1 } 50%{ opacity:.5 } }

/* exit: lift the word, then fade the panel away to reveal the dark hero */
#preloader.is-done{
  pointer-events:none; opacity:0; visibility:hidden;
  transition:opacity .7s ease .12s, visibility 0s .82s;
}
#preloader.is-done .pre__inner{
  opacity:0; transform:translateY(-18px);
  transition:opacity .55s ease, transform .7s cubic-bezier(.5,0,.2,1);
}

/* ============ HERO (dark, lifted ~10%) ============ */
#hero{ position:relative; background:var(--espresso); }
#heroPin{ position:relative; height:100vh; width:100%; overflow:hidden; }

#heroBg{ /* ambient bg video; plays once on load, pauses at end */
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(.85) brightness(.5) blur(2px); transform:scale(1.06);
}
#heroBgGrade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  /* linear-gradient scrim turned off 2026-06-20; legibility now carried by the
     #heroBg brightness(.5) filter + the headline text-shadow. */
  background:none;
}
/* hero footage-scrub layer (#heroWindow / #heroCanvas / #heroScrim / #heroCaption) removed
   2026-06-19 -- the hero is now just the looping ambient bg video + the morphing headline. */

#heroCopy{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:0 var(--rails) clamp(2rem,6vh,4.5rem); will-change:transform,opacity;
}
#heroCopy h1{
  font-size:clamp(3rem, 11vw, 11rem);
  letter-spacing:-.03em; color:var(--paper);
  text-shadow:0 2px 40px rgba(0,0,0,.35);
  min-height:2em;            /* reserve 2 lines so the typewriter starts on the top line + nothing jumps */
}
#heroCopy h1 em{ color:var(--paper); font-weight:300; white-space:nowrap; }
#heroCopy h1.is-typing::after{ /* typewriter caret while the heading re-types */
  content:'|'; display:inline-block; margin-left:.04em; font-weight:300;
  color:var(--paper); animation:caret .7s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0 } }
#heroCopy .lede{
  font-family:var(--body); max-width:34ch; margin:1.8rem 0 0;
  font-size:clamp(1rem,1.4vw,1.3rem); color:rgba(250,246,238,.82);
}
.hero__cta{ display:flex; align-items:center; gap:1.9rem; margin-top:2.3rem; flex-wrap:wrap; }
.cta{
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); padding:.95rem 1.7rem;
  border:1px solid rgba(250,246,238,.38); border-radius:999px;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s ease, border-color .45s ease;
}
.cta > span, .cta > i{ position:relative; z-index:1; }
.cta::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--oxblood);
  transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.65,0,.35,1); }
.cta:hover{ border-color:var(--oxblood); color:var(--paper); }
.cta:hover::before{ transform:scaleX(1); }
/* 2nd heading active -> the primary "Book a call" fills with brand oxblood to pop */
body.hero-solution .cta{ border-color:var(--oxblood); color:var(--paper); }
body.hero-solution .cta::before{ transform:scaleX(1); }
.cta__arrow{ position:relative; width:20px; height:1px; background:currentColor; display:inline-block; transition:width .4s ease; }
.cta__arrow::after{ content:""; position:absolute; right:0; top:50%; width:6px; height:6px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:translateY(-50%) rotate(45deg); }
.cta:hover .cta__arrow{ width:28px; }
.cta-text{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(250,246,238,.72); position:relative; padding-bottom:.35rem;
}
.cta-text::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .45s ease; }
.cta-text:hover{ color:var(--paper); }
.cta-text:hover::after{ transform:scaleX(1); }

/* ============ WORK (stacked laptops) ============ */
#work{ position:relative; background:var(--espresso-2); }
#workPin{ position:relative; height:100vh; overflow:hidden; }
.work__head{
  position:absolute; z-index:1; top:14vh; left:var(--rails); right:var(--rails);
  pointer-events:none;
}
.work__head .mono{ color:var(--honey); }
.work__head h2{ font-size:clamp(2rem,5.5vw,5rem); color:var(--paper); max-width:16ch; margin-top:.6rem; }
.work__head em{ color:var(--honey); }

.wcard{
  position:absolute; inset:0; z-index:2;
  overflow:hidden;
  background:#120c08;
  will-change:clip-path;
}
.wcard:first-of-type{ z-index:2; }
.wcard img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.wcard::after{ /* legibility scrim for the meta */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,12,8,.18) 0%, rgba(18,12,8,0) 32%, rgba(18,12,8,.10) 60%, rgba(18,12,8,.62) 100%);
}
.wcard__meta{
  position:absolute; left:var(--rails); bottom:8vh; z-index:3;
  display:flex; flex-direction:column; gap:.6rem;
}
.wcard__meta .mono{ color:var(--honey); }
.wcard__meta h3{ font-size:clamp(2.4rem,6vw,5.5rem); color:var(--paper); }
.wcard__meta .link{ align-self:flex-start; margin-top:.4rem; }

/* right-side "journey" rail: progress line + project thumbnails (tbp.studio cue) */
.work__rail{
  position:absolute; z-index:30; right:var(--rails); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.7rem; align-items:center; padding-left:18px;
}
.work__rail::before,
.work__rail::after{ content:""; position:absolute; left:0; top:0; width:2px; border-radius:2px; }
.work__rail::before{ bottom:0; background:rgba(250,246,238,.18); }                 /* track */
.work__rail::after{ height:calc(var(--rail-progress,0) * 100%); background:var(--honey); transition:height .15s linear; } /* fill */
.work__dot{
  width:46px; height:58px; padding:0; border:0; background:none; cursor:pointer;
  border-radius:7px; overflow:hidden; opacity:.42; filter:saturate(.7);
  transform:scale(.92); transition:opacity .4s ease, transform .4s ease, filter .4s ease, box-shadow .4s ease;
}
.work__dot-img{ display:block; width:100%; height:100%; background-size:cover; background-position:center; }
.work__dot:hover{ opacity:.75; }
.work__dot.is-active{ opacity:1; transform:scale(1); filter:none; box-shadow:0 0 0 2px var(--honey); }

/* ============ BLOOM (footage window rising over the frozen work reel) ============ */
/* lives inside #workPin; starts off-screen below, rises to cover the frozen reel,
   then the contained window blooms open from the centre with the caption at its foot.
   Reduced-motion / no-JS: stays translated off-screen (the deck wipe also no-ops). */
#bloomStage{
  position:absolute; inset:0; z-index:40;
  background:var(--bloom-paper);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(100%); will-change:transform;
}
#bloomWindow{
  position:relative;
  width:calc(100% - 2 * var(--rails));                 /* full-bleed minus the nav/#run rails (100% not 100vw -> no scrollbar skew) */
  height:80vh;                                          /* 80vh ceiling, no fixed ratio */
  border-radius:24px; overflow:hidden;
  background:#120c08;
  clip-path:inset(50% 50% 50% 50% round 24px);         /* closed to a point until it blooms */
  will-change:clip-path;
}
#bloomCanvas{ position:absolute; inset:0; width:100%; height:100%; filter:saturate(.92) contrast(1.03) brightness(.95); }
#bloomGrade{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 70% 12%, rgba(217,168,92,.18), transparent 60%),
    linear-gradient(180deg, rgba(22,15,11,.05), rgba(94,26,22,.20));
  mix-blend-mode:multiply; }
#bloomScrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,12,8,0) 42%, rgba(18,12,8,.18) 64%, rgba(18,12,8,.66) 100%); }
#bloomCaption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:clamp(1.6rem,4vw,3.2rem);
  opacity:0;                                            /* JS fades it in as the window settles */
}
#bloomCaption .mono{ color:var(--honey); }
#bloomCaption h2{ font-family:var(--display); font-weight:340; letter-spacing:-.02em;
  font-size:clamp(1.8rem,4.4vw,3.9rem); line-height:1.0; color:var(--paper); margin-top:.55rem; max-width:18ch; }
#bloomCaption em{ color:var(--honey); font-style:italic; }

/* ============ CREAM BODY ============ */
.cream{ background:var(--paper); color:var(--ink); }
.cream--2{ background:var(--paper-2); }   /* alternate tint for section rhythm (how-it-works.html) */
.cream .mono{ color:var(--oxblood); }
/* every cream section is full-bleed: full viewport width with --rails side padding, so its
   content sits on the same left/right rail as the nav and #run (consistency, 2026-06-17) */
.wrap{ max-width:none; padding:clamp(4.5rem,11vh,9rem) var(--rails); }
.cream__h{ font-size:clamp(2.2rem,6vw,5rem); color:var(--ink); max-width:16ch; margin:.6rem 0 0; }
.cream__h em{ color:var(--oxblood); }
.cream .lede{ font-family:var(--body); font-size:clamp(1rem,1.3vw,1.2rem); max-width:54ch; margin:1.3rem 0 0; }
.cream .lede.ink{ color:var(--ink-soft); }

/* shared section head */
.sec__head{ max-width:56ch; }
.sec__head--center{ text-align:center; margin-inline:auto; }
.sec__head--center .cream__h,
.sec__head--center .lede{ margin-inline:auto; }

/* shared honest placeholder (founder portrait, calendly embed) */
.placeholder-img{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(150deg, var(--oxblood-deep), var(--oxblood));
  color:var(--paper); border-radius:18px; text-align:center; padding:2rem;
}
.placeholder-img .mono{ color:var(--paper); font-size:.82rem; letter-spacing:.16em; }
.placeholder-img .ph__note{ color:rgba(250,246,238,.7); font-size:.62rem; }

/* ---------- SERVICES (#run) : editorial hover list (clone of withradiance.com S2) ---------- */
/* A restrained text list -- mono index + sans title left, short description right, a hairline per
   row. The only imagery is a photo that fades in and follows the cursor (desktop, see proto.js);
   the sans title wipes up to a serif line on hover. Mobile shows the photo statically per row. */
.run__list{ position:relative; margin-top:clamp(2.5rem,5vw,4rem); }
.run__rows{ list-style:none; margin:0; padding:0; }

.run-row{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(15rem,22rem);
  align-items:start; column-gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(1.9rem,3.6vw,3rem);
  border-top:1px solid var(--rule-ink);
}
.run-row:last-child{ border-bottom:1px solid var(--rule-ink); }

.run-row__num{ color:var(--oxblood); padding-top:.5rem; transition:opacity .4s; opacity:.55; }
.run-row:hover .run-row__num{ opacity:1; }

/* the title window: a single-line clip; the sans line wipes up, the serif line wipes in */
.run-row__head{
  position:relative; overflow:hidden; line-height:1.12;
  font-size:clamp(1.55rem,1rem + 2.1vw,2.6rem); letter-spacing:-.015em;
}
.run-row__title,
.run-row__alt{
  display:block;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.run-row__title{ font-family:var(--body); font-weight:500; color:var(--ink); }
.run-row__alt{
  position:absolute; inset:0; transform:translateY(105%);
  font-family:var(--display); font-style:italic; font-weight:340; color:var(--oxblood);
}
.run-row:hover .run-row__title{ transform:translateY(-105%); }
.run-row:hover .run-row__alt{ transform:translateY(0); }

.run-row__desc{
  justify-self:start; max-width:34ch; margin:0; padding-top:.55rem;
  display:flex; gap:.6rem; align-items:flex-start;
  color:var(--ink-soft); font-size:clamp(.9rem,1vw,1rem); line-height:1.45;
}
.run-row__dot{ flex:none; width:7px; height:7px; margin-top:.55em; background:var(--oxblood); }

/* per-row image: hidden on desktop (the follower carries it); shown statically on mobile */
.run-row__media{ display:none; }

/* the floating follower: shown only when proto.js enables follow on a fine pointer */
.run__cursor{
  display:none; position:absolute; top:0; left:0; z-index:5; pointer-events:none;
  width:clamp(13rem,17vw,16rem); aspect-ratio:4 / 5; overflow:hidden;
  box-shadow:0 30px 60px -26px rgba(94,26,22,.6);
  opacity:0;                                              /* GSAP autoAlpha manages reveal */
}
.run__list--follow .run__cursor{ display:block; }
.run__cursor img{ width:100%; height:100%; object-fit:cover; }
.run__cursor::after{                                      /* warm cinematic grade so placeholders read on-brand */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 75% 12%, rgba(217,168,92,.20), transparent 58%),
    linear-gradient(180deg, rgba(22,15,11,.06), rgba(94,26,22,.22));
  mix-blend-mode:multiply;
}

/* ---------- PRICING ---------- */
.pricing{ background:var(--paper-2); }
.tiers{ margin:clamp(2.5rem,5vw,4rem) 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }
.tier{
  position:relative; display:flex; flex-direction:column; gap:1.1rem;
  background:var(--paper); border:1px solid var(--rule-ink); border-radius:18px;
  padding:clamp(1.7rem,2.5vw,2.4rem);
}
.tier--rec{ border:2px solid var(--oxblood); box-shadow:0 24px 60px -30px rgba(94,26,22,.45); }
/* .tier--rec context wins specificity over `.cream .mono` so the label stays paper, not oxblood-on-oxblood */
.tier--rec .tier__badge{
  position:absolute; top:-.75rem; left:50%; transform:translateX(-50%);
  background:var(--oxblood); color:var(--paper);
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; padding:.35rem .85rem; border-radius:999px;
}
.tier__head .mono{ color:var(--oxblood); }
.tier__price{ font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,3.4vw,3rem); color:var(--ink); margin:.5rem 0 0; letter-spacing:-.02em; }
.tier__price span{ font-family:var(--body); font-size:1rem; color:var(--ink-soft); letter-spacing:0; }
.tier__tag{ color:var(--ink-soft); margin:.45rem 0 0; font-size:.95rem; }
.tier__plus{ color:var(--oxblood); margin:0; font-size:.66rem; }
.tier__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.tier__list li{ position:relative; padding-left:1.3rem; color:var(--ink); font-size:.95rem; }
.tier__list li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--oxblood); }
.tier .btn{ margin-top:auto; justify-content:center; }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.pricing__foot{ margin:clamp(2.2rem,4vw,3rem) auto 0; max-width:62ch; text-align:center; color:var(--ink-soft); }

/* ---------- HOW IT WORKS : the promise ladder (how-it-works.html) ----------
   A connected 5-node timeline. A segmented phase track above tells the whole
   money story at a glance (a long free runway, then the subscription); the
   final node is filled oxblood -- the payoff the eye lands on. */
.howto__kicker{ display:inline-block; }

/* segmented phase track: free runway (cols 1-4) + subscription (col 5) */
.ladder__phases{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.ladder__phase{
  position:relative; padding-bottom:.6rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.ladder__phase::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:2px; }
.ladder__phase--free{ grid-column:1 / 5; }
.ladder__phase--free::before{ background:var(--rule-ink); }
.ladder__phase--paid{ grid-column:5 / 6; color:var(--oxblood); }
.ladder__phase--paid::before{ background:var(--oxblood); }

.ladder{
  list-style:none; margin:1.4rem 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem;
}
.ladder__step{ position:relative; z-index:1; }
/* connector rail: each step (bar the last) draws a line across the gap from its
   own node edge to the next node edge -- anchors to the nodes, never floats. */
.ladder__step:not(:last-child)::before{
  content:""; position:absolute; top:21px; left:44px; width:calc(100% + 1.5rem - 44px); height:2px;
  background:var(--rule-ink); z-index:0;
}
.ladder__node{
  width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center; margin-bottom:1.1rem;
  background:var(--paper); border:2px solid var(--ink);
}
.ladder__node .mono{ color:var(--ink); font-size:.7rem; }
.ladder__body b{ font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,1.5vw,1.5rem); display:block; margin-bottom:.35rem; letter-spacing:-.01em; color:var(--ink); }
.ladder__body p{ margin:0; color:var(--ink-soft); font-size:.94rem; line-height:1.5; }
/* the payoff node */
.ladder__step--pay .ladder__node{ background:var(--oxblood); border-color:var(--oxblood); }
.ladder__step--pay .ladder__node .mono{ color:var(--paper); }
.ladder__step--pay .ladder__body b{ color:var(--oxblood); }

.ladder__promise{
  margin:clamp(2.4rem,4.5vw,3.4rem) 0 0; max-width:64ch;
  border-left:3px solid var(--oxblood); padding:.15rem 0 .15rem 1.25rem;
  color:var(--ink); font-size:clamp(1.02rem,1.2vw,1.2rem); line-height:1.55;
}
.ladder__promise b{ color:var(--oxblood); font-weight:600; }

/* ---------- WHAT WE RUN (how-it-works.html) : the operations layer ---------- */
.run-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,3vw,2.6rem) clamp(2rem,4vw,4rem); margin:clamp(2.5rem,5vw,3.75rem) 0 0; }
.run-item{ border-top:2px solid var(--ink); padding-top:1.1rem; }
.run-item__t{ display:flex; align-items:baseline; gap:.6rem; font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,1.6vw,1.45rem); color:var(--ink); margin:0 0 .45rem; letter-spacing:-.01em; }
.run-item__t::before{ content:""; flex:none; width:.5rem; height:.5rem; border-radius:999px; background:var(--oxblood); transform:translateY(-.12em); }
.run-item p{ margin:0; color:var(--ink-soft); font-size:.96rem; line-height:1.5; }
.run-foot{ margin:clamp(2.4rem,4.5vw,3.25rem) 0 0; font-size:clamp(1rem,1.15vw,1.12rem); color:var(--ink-soft); }
.run-foot a{ color:var(--oxblood); border-bottom:1px solid currentColor; padding-bottom:1px; transition:opacity .3s; }
.run-foot a:hover{ opacity:.7; }

/* ---------- CLOSING CTA (how-it-works.html, centred, no image) ---------- */
.book-simple .wrap{ display:flex; flex-direction:column; align-items:center; }

/* ---------- FAQ ---------- */
.faq__list{ margin:clamp(2rem,4vw,3rem) 0 0; max-width:840px; }
.faq__item{ border-top:1px solid var(--rule-ink); }
.faq__item:last-child{ border-bottom:1px solid var(--rule-ink); }
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.35rem 0; font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,1.9vw,1.55rem);
  color:var(--ink); letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary i{ position:relative; flex:none; width:15px; height:15px; }
.faq__item summary i::before,
.faq__item summary i::after{ content:""; position:absolute; background:var(--oxblood); }
.faq__item summary i::before{ left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); }
.faq__item summary i::after{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); transition:transform .3s ease, opacity .3s ease; }
.faq__item[open] summary i::after{ transform:translateX(-50%) scaleY(0); opacity:0; }
.faq__item p{ margin:0; padding:0 0 1.5rem; color:var(--ink-soft); max-width:64ch; }

/* ---------- FOUNDER (portrait-left, big-quote-right) ---------- */
.founder{ background:var(--paper); }   /* light beat: run(light) -> pricing(dark) -> founder(light) -> book(dark) */
.founder__grid{
  display:grid; grid-template-columns:clamp(15rem,30vw,27rem) 1fr;
  gap:clamp(2.5rem,5vw,6rem); align-items:center;
}
.founder__portrait{ aspect-ratio:4/5; width:100%; border-radius:0; overflow:hidden; }   /* sharp, editorial */
.founder__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; }
.founder__quote{ margin:0; max-width:none; }
.founder__mark{
  display:block; font-family:var(--display); font-weight:900; color:var(--oxblood);
  font-size:clamp(3rem,5vw,4.5rem); line-height:.55; margin-bottom:.35rem;
}
.founder__statement{
  margin:0; font-family:var(--display); font-weight:340; color:var(--ink);
  font-size:clamp(1.6rem,1rem + 2.2vw,2.9rem); line-height:1.16; letter-spacing:-.015em;
}
.founder__statement em{ color:var(--oxblood); }
.founder__support{ margin:1.7rem 0 0; color:var(--ink-soft); font-size:clamp(1.02rem,1.1vw,1.18rem); line-height:1.55; max-width:74ch; }
.founder__note{ margin:1.1rem 0 0; font-family:var(--display); font-style:italic; color:var(--ink-soft); font-size:clamp(1.02rem,1vw,1.12rem); line-height:1.5; max-width:74ch; }
.founder__rule{ border:0; border-top:1px solid var(--rule-ink); margin:clamp(1.8rem,3vw,2.6rem) 0 0; }
.founder__cap{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.3rem; }
.founder__name{ font-family:var(--display); font-weight:500; color:var(--ink); font-size:1.2rem; letter-spacing:-.01em; }

/* ---------- BOOK (close: copy-left, full-bleed image-right) ---------- */
.book{ background:var(--paper-2); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.book__copy{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.5rem;
  padding-block:clamp(4.5rem,11vh,9rem);
  padding-inline:var(--rails) clamp(2.5rem,4vw,4.5rem);   /* left rail + a gap before the image */
}
.book__h{ font-size:clamp(2.2rem,4.6vw,4rem); color:var(--ink); max-width:18ch; margin:0; line-height:1.03; }
.book__h em{ color:var(--oxblood); }
.book__sub{ color:var(--ink-soft); font-size:clamp(1rem,1.2vw,1.18rem); line-height:1.55; max-width:48ch; margin:0; }
/* right side: image bleeds to the viewport edge and fills the section height */
.book__media{ position:relative; overflow:hidden; min-height:100vh; background:var(--paper); }
.book__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.book__media::after{                 /* warm cinematic grade so the temporary photo reads on-brand */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 75% 12%, rgba(217,168,92,.18), transparent 58%),
    linear-gradient(180deg, rgba(22,15,11,.05), rgba(94,26,22,.18));
  mix-blend-mode:multiply;
}

/* ---------- FOOTER (brand-colour edge-to-edge wordmark) ---------- */
.pf{
  --pf-rule:rgba(250,246,238,.26);
  --pf-rule-strong:rgba(250,246,238,.45);
  --pf-dim:rgba(250,246,238,.8);
  --pf-fg:var(--paper);
  background:var(--oxblood); color:var(--pf-fg);
  padding:clamp(4.5rem,9vh,6.5rem) var(--rails) 0; overflow:hidden;   /* top pad clears the fixed nav when the footer fills the screen */
  min-height:100vh; display:flex; flex-direction:column;
}
/* full-screen footer: columns sit at the top, the giant wordmark group anchors to the
 * bottom (the gap grows to fill the viewport). */
.pf__ledger + .pf__rule{ margin-top:auto; }
.pf__bleed{ width:100vw; margin-inline:calc(50% - 50vw); }
.pf__rule{ display:block; height:1px; background:var(--pf-rule); border:0; }
.pf__rule--strong{ background:var(--pf-rule-strong); }
.pf__ledger{ display:grid; grid-template-columns:1.7fr 1fr 1fr .95fr; padding-block:clamp(2rem,3.8vw,3rem); }
.pf__cell{ padding-inline:clamp(1.1rem,2.6vw,2.4rem); display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.pf__cell:first-child{ padding-left:0; }
.pf__cell:last-child{ padding-right:0; }
.pf__cell + .pf__cell{ border-left:1px solid var(--pf-rule); }
.pf__tag{ font-family:var(--display); font-weight:340; font-size:clamp(1.15rem,1.5vw,1.5rem); line-height:1.2; max-width:24ch; margin:0; }
.pf__email{ font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--pf-dim); border-bottom:1px solid var(--pf-rule); padding-bottom:.2rem; transition:color .3s,border-color .3s; }
.pf__email:hover{ color:var(--pf-fg); border-color:var(--pf-fg); }
.pf__h{ color:var(--pf-dim); font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.35rem; }
.pf__cell a:not(.pf__email){ color:rgba(250,246,238,.95); font-size:.95rem; line-height:1.25; transition:color .3s; }
.pf__cell a:not(.pf__email):hover{ color:var(--pf-fg); }
.pf__built{ display:flex; flex-direction:column; gap:.5rem; color:rgba(250,246,238,.95); font-size:.95rem; }
.pf__soon{ color:var(--pf-dim); cursor:default; display:inline-flex; align-items:center; gap:.5rem; }
.pf__soon i{ font-style:normal; font-family:var(--mono); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--pf-rule); padding:.12rem .42rem; border-radius:999px; }
.pf__mark{
  display:block; width:100vw; margin-inline:calc(50% - 50vw); text-align:center; white-space:nowrap;
  font-family:var(--display); font-weight:360; letter-spacing:.01em;
  font-size:28.4vw; line-height:.8; color:var(--pf-fg);
  margin-top:clamp(1.4rem,2.6vw,2rem); padding-bottom:.1em;
}
.pf__dot{ color:var(--honey); }
.pf__base{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.8rem 1.4rem; padding-block:1.3rem 1.6rem; }
.pf__legal, .pf__social{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.pf__base a, .pf__base span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(250,246,238,.82); }
.pf__base a{ transition:color .3s; }
.pf__base a:hover{ color:var(--pf-fg); }
.pf a:focus-visible, .pf__email:focus-visible{ outline:2px solid var(--honey); outline-offset:3px; }

/* fixed-footer reveal: the page content scrolls up like a curtain to uncover the
 * footer pinned behind it. JS-only (html.js); no-JS keeps the footer in normal flow
 * at the end of the page (fully visible, just no reveal). */
.pf-spacer{ display:none; }
html.js main{ position:relative; z-index:1; }
html.js .pf{ position:fixed; inset:auto 0 0 0; z-index:0; }
html.js .pf-spacer{ display:block; height:var(--pf-h, 86vh); pointer-events:none; }

/* ---------- reveal ---------- */
.reveal{ opacity:1; }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .founder__grid{ grid-template-columns:1fr; gap:clamp(1.5rem,5vw,2.5rem); }
  .founder__portrait{ max-width:360px; }
  .founder__quote{ max-width:none; }
  /* #run list: keep 3-col but tighten the description rail so the title keeps room */
  .run-row{ grid-template-columns:auto minmax(0,1fr) minmax(11rem,17rem); column-gap:clamp(1.25rem,3vw,2.5rem); }
}
@media (max-width:860px){
  .nav__links a:not(.nav__cta){ display:none; }
  #heroCopy h1{ font-size:clamp(2.6rem,15vw,5rem); }
  .wcard__meta h3{ font-size:clamp(2rem,11vw,3.4rem); }
  .work__rail{ display:none; }
  #bloomWindow{ height:72vh; }
  .tiers{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  /* book close: image on top, copy below (image leads on mobile) */
  .book{ grid-template-columns:1fr; }
  .book__media{ order:1; min-height:clamp(22rem,92vw,34rem); }
  .book__copy{ order:2; padding-inline:var(--rails); padding-block:clamp(3rem,9vh,4.5rem); gap:1.2rem; }
  /* promise ladder -> vertical timeline; the connector runs down between nodes */
  .ladder__phases{ display:none; }
  .ladder{ grid-template-columns:1fr; gap:0; margin-top:1.5rem; }
  .ladder__step{ display:grid; grid-template-columns:44px 1fr; column-gap:1.1rem; align-items:start; padding-bottom:1.8rem; }
  .ladder__step:last-child{ padding-bottom:0; }
  .ladder__step:not(:last-child)::before{ top:44px; left:21px; bottom:0; width:2px; height:auto; }
  .ladder__node{ margin-bottom:0; }
  /* what-we-run -> single column */
  .run-grid{ grid-template-columns:1fr; gap:1.6rem; }
  /* footer ledger -> 2-col, tagline + legal span full width */
  .pf__ledger{ grid-template-columns:1fr 1fr; gap:1.5rem 1.4rem; padding-block:1.8rem; }
  .pf__cell{ padding-inline:0; }
  .pf__cell + .pf__cell{ border-left:0; }
  .pf__cell:nth-child(1){ grid-column:1 / -1; border-bottom:1px solid var(--pf-rule); padding-bottom:1.5rem; }
  .pf__cell:nth-child(4){ grid-column:1 / -1; border-top:1px solid var(--pf-rule); padding-top:1.5rem; }
  .pf__base{ flex-direction:column; align-items:flex-start; gap:.7rem; }
}

/* #run editorial list -> stacked, with the photo shown statically per row. Fires on small
   screens OR any touch device (no hover means the cursor-follow can't run -- a 1024 landscape
   iPad would otherwise show zero images), so the static fallback is keyed to BOTH. */
@media (max-width:860px), (hover: none){
  .run-row{
    grid-template-columns:1fr;
    grid-template-areas:"media" "head" "desc";   /* stacked: image, heading, line */
    row-gap:0;                                   /* gaps set per element below */
    padding-block:clamp(1.7rem,6vw,2.4rem);
  }
  .run-row__media{
    grid-area:media; display:block; position:relative; width:100%; aspect-ratio:3 / 2;
    overflow:hidden; background:var(--paper-2);
  }
  .run-row__media img{ width:100%; height:100%; object-fit:cover; }
  .run-row__media::after{                 /* same warm grade as the desktop follower */
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(120% 90% at 75% 12%, rgba(217,168,92,.20), transparent 58%),
      linear-gradient(180deg, rgba(22,15,11,.06), rgba(94,26,22,.22));
    mix-blend-mode:multiply;
  }
  .run-row__num{ display:none; }                  /* no index on mobile */
  .run-row__head{ grid-area:head; overflow:visible; margin-top:clamp(.55rem,2.4vw,.85rem); }   /* text sits close under the image */
  .run-row__alt{ display:none; }
  /* a tap fires a sticky :hover on touch -- cancel the title wipe so the heading doesn't float up out of place */
  .run-row:hover .run-row__title{ transform:none; }
  .run-row__desc{ grid-area:desc; justify-self:start; max-width:none; padding-top:0; margin-top:.1rem; }   /* heading + line read as one tight pair */
  .run-row__dot{ display:none; }            /* drop the oxblood square before the line on mobile */
  .run__list--follow .run__cursor{ display:none; }   /* belt + braces: never a follower on touch */
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .scrollhint i{ animation:none; }
  /* preloader: no flicker, settle on the brand face (JS also skips cycling) */
  #zen .zl{ font-family:"Fraunces", Georgia, serif !important; font-style:italic; }
  .pre__bar i{ animation-duration:.45s; }
}

/* ---------- TRIAL GATE : qualifying modal before checkout ----------
   Opens from a pricing CTA (proto.js). Asks whether we have built the
   visitor a free concept yet, then routes: "not yet" -> free-concept.html,
   "all set" -> the tier's Whop checkout. Hidden by default, so no-JS
   visitors never see it and the CTA's own href carries them through. */
.qg-scrim{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center; padding:1.5rem;
  background:rgba(22,15,11,.66);
  opacity:0; visibility:hidden;
  transition:opacity .32s ease;
}
.qg-scrim.is-open{ opacity:1; visibility:visible; }
.qg{
  width:min(34rem,100%); position:relative;
  background:var(--paper); border:1px solid var(--rule-ink); border-radius:20px;
  padding:clamp(1.7rem,3.5vw,2.7rem);
  box-shadow:0 40px 90px -40px rgba(94,26,22,.55);
  color:var(--ink);
  transform:translateY(16px) scale(.985); opacity:0;
  transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .42s ease;
}
.qg:focus{ outline:none; }
.qg-scrim.is-open .qg{ transform:none; opacity:1; }
.qg__close{
  position:absolute; top:.9rem; right:.9rem; width:2.25rem; height:2.25rem; border-radius:999px;
  display:grid; place-items:center; color:var(--ink-soft); background:transparent; border:0; cursor:pointer;
  transition:background .25s, color .25s;
}
.qg__close:hover{ background:var(--paper-2); color:var(--ink); }
.qg__close svg{ width:16px; height:16px; }
.qg__eyebrow{ color:var(--oxblood); display:block; margin:0 0 1rem; }
.qg__h{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.55rem,3.1vw,2.05rem); line-height:1.04; letter-spacing:-.02em;
  color:var(--ink); margin:0; max-width:18ch;
}
.qg__h em{ font-style:italic; color:var(--oxblood); }
.qg__sub{ color:var(--ink-soft); margin:.85rem 0 0; font-size:.97rem; line-height:1.55; max-width:44ch; }
.qg__opts{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.6rem; }
.qg-opt{
  display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem; border-radius:14px;
  border:1px solid var(--rule-ink); background:var(--paper); cursor:pointer; text-align:left; width:100%;
  transition:border-color .25s, background .25s;
}
.qg-opt:hover{ border-color:var(--oxblood); }
.qg-opt__dot{
  width:1.2rem; height:1.2rem; border-radius:999px; flex:none;
  border:1.5px solid var(--ink-soft); display:grid; place-items:center; transition:border-color .25s;
}
.qg-opt__dot::after{ content:""; width:.58rem; height:.58rem; border-radius:999px; background:var(--oxblood); transform:scale(0); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.qg-opt__t{ font-size:.98rem; line-height:1.35; color:var(--ink); }
.qg-opt[aria-checked="true"]{ border-color:var(--oxblood); background:rgba(138,42,34,.05); }
.qg-opt[aria-checked="true"] .qg-opt__dot{ border-color:var(--oxblood); }
.qg-opt[aria-checked="true"] .qg-opt__dot::after{ transform:scale(1); }
.qg__go{ margin-top:1.6rem; }
.qg__go .btn{ width:100%; justify-content:center; padding:1.05rem 1.6rem; cursor:pointer; }
.qg__go .btn[aria-disabled="true"]{
  background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--rule-ink); pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .qg, .qg-scrim, .qg-opt__dot::after{ transition:none; }
  .qg{ transform:none; }
}