/* ---------------------------------------------------------------
   Renaissance Wealth Strategies
   Shared stylesheet. Seven pages, one system.
   Copy is verbatim from the approved source. Do not rewrite it.
   --------------------------------------------------------------- */

@font-face{font-family:'Cormorant Garamond';src:url('fonts/CormorantGaramond-var.woff2') format('woff2');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/CormorantGaramond-italic.woff2') format('woff2');font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/Jost-var.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant fallback';src:local('Georgia'),local('Times New Roman');
  size-adjust:88.3803%;ascent-override:104.5482%;descent-override:32.4733%;line-gap-override:0%}
@font-face{font-family:'Jost fallback';src:local('Arial'),local('Helvetica');
  size-adjust:96.007%;ascent-override:111.4502%;descent-override:39.0596%;line-gap-override:0%}

:root{
  --ivory:#F5F0E6;
  --ink:#171512;
  --gold:#A87F35;          /* rules and marks. 3.21:1, never body text */
  --gold-text:#7A5820;     /* 5.70:1 on ivory, the gold that may carry text */
  --gold-film:#EFDFA8;     /* the gold that survives the hero film. Brand gold
                              measures 1.67:1 there, a severe fail at 13px, so
                              type over the film uses this lighter champagne
                              cut: 4.57:1, and five times warmer than ivory. */
  --forest:#1E3830;
  --stone:#CBC2AE;
  --field-line:#86827C;

  --serif:'Cormorant Garamond','Cormorant fallback',Garamond,Georgia,serif;
  --sans:'Jost','Jost fallback',Futura,'Century Gothic',system-ui,sans-serif;

  --t-display:clamp(3rem,2.1rem + 3vw,4.5rem);
  --t-h1:clamp(2.25rem,1.7rem + 1.8vw,3.25rem);
  --t-h2:clamp(1.6875rem,1.52rem + .55vw,2.125rem);
  --t-quote:clamp(1.4375rem,1.34rem + .33vw,1.6875rem);
  --t-body:clamp(1.0625rem,1.03rem + .13vw,1.125rem);
  --t-label:.8125rem;
  --t-voice:clamp(2rem,1.1rem + 3.2vw,3.75rem);

  --measure:46ch;
  --gutter:clamp(1.5rem,5vw,3rem);
  --section-y:clamp(3rem,6.5vh,5rem);   /* tightened for scroll snap: a snapped
                                          section must show content, not padding */
  --header-h:5.5rem;

  --ease:cubic-bezier(.22,1,.36,1);
  --in:160ms;
  --out:420ms;
}
@media (prefers-reduced-motion:reduce){:root{--in:1ms;--out:1ms}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  /* Paper tooth on the cream only. Mean preserving, so the ivory value holds. */
  background-color:var(--ivory);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncG type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncB type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  background-blend-mode:soft-light;
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
/* Deep forest carries no grain. The tooth belongs to the paper. */
.on-forest{background-color:var(--forest);background-image:none;color:var(--ivory)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.on-forest :focus-visible{outline-color:var(--ivory)}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}

/* ---- Header, on every page ------------------------------------------ */

.skip{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  background:var(--ink);color:var(--ivory);padding:.75rem 1.25rem;z-index:60;
}
.skip:focus{position:fixed;top:0;left:0;width:auto;height:auto;clip-path:none}

.header{
  position:sticky;top:0;z-index:40;
  background:var(--ivory);
  border-bottom:1px solid var(--gold);
}
.header--forest{background:var(--forest);border-bottom-color:rgba(168,127,53,.6)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--header-h)}
/* Horizontal lockup, as drawn on the identity sheet: the full emblem, a gold
   hairline, then the wordmark. The reduced mark is not a logo, it is the
   under-64px fallback, so it belongs on the favicon and nowhere else. The
   emblem is therefore sized above that floor and the header grew to hold it.
   currentColor lets one mark serve the ivory and forest headers. */
.mark__emblem{width:3.5rem;height:3.5rem;flex:0 0 auto;display:block;color:var(--gold);
  overflow:visible}
.mark__rws{font-family:var(--serif);font-weight:500;font-size:62px;letter-spacing:18px}
.header__word{
  padding-left:1.1rem;margin-left:1.1rem;border-left:1px solid var(--gold);
}
/* The wordmark holds one size at every width. It used to shrink in steps to buy
   room for the nav, which made the brand look unstable on resize. The menu now
   collapses instead: a disclosure is a normal thing for a header to do, a
   wordmark that changes size is not. */
.header__mark{
  display:flex;align-items:center;
  font-family:var(--serif);font-weight:500;font-size:1rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  white-space:nowrap;flex:0 0 auto;
}
/* Phones. The one-size wordmark plus the 56px emblem is wider than a phone:
   measured, the header overflowed by 18px at 430 and 128px at 320, and because
   the body clips overflow-x the excess was invisible and the Menu button was
   simply pushed off-screen. The nav was unreachable on every phone.
   The wordmark now wraps to two lines against the emblem, which is the stacked
   relationship the identity sheet already draws, and the toggle gets its room
   back. */
@media (max-width:34rem){
  .header__mark{font-size:.6875rem;letter-spacing:.08em}
  .mark__emblem{width:2.5rem;height:2.5rem}
  .header__word{
    white-space:normal;max-width:8.5rem;line-height:1.3;
    padding-left:.7rem;margin-left:.7rem;
  }
  .header__inner{gap:.75rem}
}
.header--forest .header__mark{color:var(--ivory)}
.menu{display:flex;gap:clamp(.85rem,1.7vw,1.6rem);list-style:none;margin:0;padding:0;align-items:center}
.menu a{
  font-family:var(--sans);font-size:var(--t-label);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;padding-block:.3rem;white-space:nowrap;
  transition:border-color var(--out) var(--ease),color var(--out) var(--ease);
}
.header--forest .menu a{color:var(--ivory)}
@media (hover:hover) and (pointer:fine){
  .menu a:hover{transition-duration:var(--in);border-bottom-color:var(--gold)}
}
.menu a[aria-current=page]{border-bottom-color:var(--gold);color:var(--gold-text)}
.header--forest .menu a[aria-current=page]{color:var(--gold)}
.menu__begin{border:1px solid currentColor;padding:.5rem .95rem}
@media (hover:hover) and (pointer:fine){
  .menu__begin:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
  .header--forest .menu__begin:hover{background:var(--ivory);color:var(--forest);border-color:var(--ivory)}
}
/* Below 58rem the menu becomes a disclosure. No overlay, no hamburger theatre.
   The breakpoint has moved twice. 62rem was too low and the wordmark ran
   through the nav; 75rem was correct for seven items but far too eager for
   four, collapsing a menu that still had hundreds of pixels of room. Sized to
   what the four items actually measure, with the mark tightening in two steps
   on the way down so the inline nav survives as long as it honestly can. */
.menu__toggle{display:none;font-family:var(--sans);font-size:var(--t-label);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;background:none;border:0;border-bottom:1px solid currentColor;color:inherit;
  padding:.3rem 0;cursor:pointer}
@media (max-width:67.99rem){
  .menu__toggle{display:inline-block}
  .menu{
    position:absolute;left:0;right:0;top:100%;
    background:var(--ivory);border-bottom:1px solid var(--gold);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:.5rem var(--gutter) 1.25rem;
    display:none;
  }
  .header--forest .menu{background:var(--forest)}
  .header.is-open .menu{display:flex}
  .menu li{width:100%;border-top:1px solid rgba(168,127,53,.35)}
  .menu a{display:block;padding-block:.9rem;border-bottom:0}
  .menu__begin{border:0;padding:.9rem 0}
}
/* Touch targets. Measured on a phone: the toggle was 30px, footer and menu
   links 20px, the skip link 24px. 44px is the floor. Padding rather than height
   so nothing shifts on pointer devices. */
@media (any-pointer:coarse){
  .menu a{min-block-size:44px;display:flex;align-items:center}
  .menu__toggle{min-block-size:44px;padding-block:.7rem}
  .footer__nav a{min-block-size:44px;display:flex;align-items:center}
  .action,.pager__link{min-block-size:44px;display:inline-flex;align-items:center}
  .header__mark{min-block-size:44px}
  .skip:focus{min-block-size:44px;display:flex;align-items:center}
}

/* ---- Type ------------------------------------------------------------ */

.eyebrow{
  font-family:var(--sans);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.4;margin:0 0 clamp(1.25rem,3vh,2rem);color:inherit;
}
.on-forest .eyebrow{color:var(--stone)}
.display{font-family:var(--serif);font-weight:300;font-size:var(--t-display);line-height:1.06;letter-spacing:-.006em;margin:0;text-wrap:balance}
h1.page-title{font-family:var(--serif);font-weight:300;font-size:var(--t-h1);line-height:1.1;margin:0 0 1.25rem;max-width:18ch;text-wrap:balance}
h2.head{font-family:var(--serif);font-weight:300;font-size:var(--t-h1);line-height:1.14;margin:0 0 1.5rem;max-width:20ch;text-wrap:balance}
h3{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:1.2;margin:0 0 1rem}
p{margin:0 0 1.35em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem);line-height:1.55;max-width:52ch}
.prose p{text-wrap:pretty}
.voice{font-family:var(--serif);font-weight:300;font-style:italic;font-size:var(--t-voice);
  line-height:1.16;letter-spacing:-.008em;margin:0;max-width:20ch;text-wrap:balance}
.voice--wide{max-width:26ch}
.conn{font-style:italic;text-transform:none;letter-spacing:0}
.rule{border:0;border-top:1px solid var(--gold);margin:clamp(3rem,7vh,5rem) 0}

section{padding-block:var(--section-y)}

/* ---- Actions ---------------------------------------------------------- */

.action{
  display:inline-block;
  font-family:var(--sans);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:inherit;text-decoration:none;padding-block:.55rem;
  border-bottom:1px solid currentColor;
  transition:border-color var(--out) var(--ease),color var(--out) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .action:hover{transition-duration:var(--in);border-bottom-color:var(--gold);color:var(--gold-text)}
  .on-forest .action:hover{color:var(--gold)}
  .stage .action:hover{color:var(--ivory);border-bottom-color:var(--ivory)}
}
.actions{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;align-items:baseline;margin-top:clamp(2rem,5vh,3rem)}

/* Page-to-page pager. Every page ends by pointing somewhere. */
.pager{border-top:1px solid var(--gold);padding-block:clamp(2.5rem,6vh,4rem)}
.pager__label{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .6rem;color:inherit;opacity:.75}
.pager__link{font-family:var(--serif);font-weight:300;font-size:var(--t-h2);text-decoration:none;color:inherit;
  border-bottom:1px solid transparent;transition:border-color var(--out) var(--ease)}
@media (hover:hover) and (pointer:fine){.pager__link:hover{border-bottom-color:var(--gold);transition-duration:var(--in)}}

/* ---- Plates ----------------------------------------------------------- */

.plate{position:relative;overflow:hidden;isolation:isolate;background:var(--forest)}
.plate img{display:block;width:100%;height:100%;object-fit:cover;filter:url(#duo-ivory)}
.plate--forest img,.on-forest .plate img{filter:url(#duo-forest)}
.plate--held{outline:1px solid var(--gold);outline-offset:.7rem}
.plate--held img{filter:url(#duo-ivory)}
.grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background-size:140px 140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)'/%3E%3C/svg%3E");
}
@supports not (filter:url(#duo-ivory)){.plate img{filter:grayscale(1) sepia(.2)}}
.plate--band{width:100vw;margin-inline:calc(50% - 50vw);aspect-ratio:21/8}
/* Half-height band. At the full 21/8 the picture ate a whole screen between two
   short text sections and broke the rhythm rather than punctuating it. The image
   is unchanged; object-fit crops it. */
.plate--half{aspect-ratio:21/4}
@media (max-width:48rem){.plate--band{aspect-ratio:3/2}}
.plate--tall{aspect-ratio:3/4}
.plate--square{aspect-ratio:1}

/* ---- Page hero -------------------------------------------------------- */

.hero{position:relative;overflow:hidden;padding-block:clamp(4rem,11vh,8rem)}
.hero__plate{position:absolute;inset:0;z-index:0;opacity:.17}
.hero > .wrap{position:relative;z-index:1}
.hero--tall{min-height:calc(88svh - var(--header-h));display:grid;align-content:center}

/* ---- Shared blocks ---------------------------------------------------- */

.two-col{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:start}
@media (min-width:62rem){.two-col{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.two-col--even{grid-template-columns:1fr}
@media (min-width:62rem){.two-col--even{grid-template-columns:1fr 1fr}}

.listing{list-style:none;margin:0;padding:0;border-top:1px solid var(--stone)}
.on-forest .listing{border-top-color:rgba(203,194,174,.35)}
.listing li{padding-block:.9rem;border-bottom:1px solid var(--stone);font-size:var(--t-body)}
.on-forest .listing li{border-bottom-color:rgba(203,194,174,.35)}

.numbered{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.5rem,6vh,4rem)}
@media (min-width:62rem){.numbered{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem)}}
.numbered .n{font-family:var(--sans);font-weight:500;font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:.55rem;color:var(--gold-text)}
.numbered h3{margin-bottom:.9rem}
.numbered p{max-width:38ch}

.tiers{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.5rem,6vh,3.5rem)}
.tier{padding-top:clamp(1.5rem,3vh,2rem);border-top:1px solid var(--stone);display:grid;gap:.5rem clamp(2rem,5vw,4rem)}
@media (min-width:62rem){.tier{grid-template-columns:minmax(14rem,20rem) 1fr}.tier h3{grid-row:span 2;font-size:var(--t-quote)}}
.tier p{max-width:var(--measure);margin-bottom:0}
.tier__lines{list-style:none;margin:.9rem 0 0;padding:0;font-size:var(--t-body);line-height:1.8}
.tier__lines li{display:inline-block}
.tier__lines li:not(:last-child)::after{content:'\00A0·'}

.values{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.75rem,6vh,4.5rem)}
@media (min-width:52rem){.values{grid-template-columns:1fr 1fr;gap:clamp(3rem,5vw,5rem)}}
.value{border-top:1px solid var(--gold);padding-top:1.25rem}
.value h3{font-size:var(--t-quote);margin-bottom:.6rem}
.value p{font-family:var(--serif);font-weight:300;font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);
  line-height:1.2;max-width:20ch;margin:0}

/* Compact values. At 40px the statements read like a picture book and swamp
   everything around them. The name drops to a tracked label and the statement
   to quote size, four across, so the set reads as one considered row rather
   than four billboards. */
.values--compact{gap:clamp(2rem,4vh,2.75rem)}
@media (min-width:64rem){
  .values--compact{grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,2.6vw,2.5rem)}
}
.values--compact .value h3{
  font-family:var(--sans);font-size:var(--t-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.85rem}
.values--compact .value p{font-size:var(--t-quote);max-width:26ch;line-height:1.3}

/* ---- Our Partnership --------------------------------------------------
   The questions are an index, not a form. Set as a ruled ledger: a tracked
   Roman numeral in its own column, the question in Cormorant at quote size,
   and a gold hairline over every row. The rules and numerals are the same
   language as the process grid and the section numerals, so the page reads as
   one system, and the generous leading is what makes it feel considered
   rather than a checklist. No fields here on purpose: the answers belong to a
   conversation, and asking twice would turn reflection into admin. */
.enquiry{list-style:none;margin:0;padding:0;counter-reset:none}
.enquiry li{
  display:grid;grid-template-columns:1fr;gap:.35rem;
  border-top:1px solid var(--gold);
  padding:clamp(.95rem,2.2vh,1.35rem) 0 clamp(1.05rem,2.4vh,1.5rem);
}
.enquiry li:last-child{border-bottom:1px solid var(--gold)}
.enquiry__n{
  font-family:var(--serif);font-size:1rem;font-weight:400;
  letter-spacing:.12em;color:var(--gold-text);line-height:1.45;
}
.enquiry p{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.1875rem,1.06rem + .5vw,1.5rem);line-height:1.32;
  max-width:44ch;text-wrap:balance;
}
@media (min-width:52rem){
  .enquiry li{grid-template-columns:4rem 1fr;gap:0;align-items:baseline}
  .enquiry p{max-width:48ch}
}

/* Four phases and the result. Three across and two down, with the result
   holding the whole right column so it reads as the outcome of all four
   rather than a fifth step. Gold hairlines come from a 1px grid gap over a
   gold ground, which keeps the rules perfectly aligned without borders that
   double up between cells. */
.process{margin-top:clamp(1.75rem,4vh,2.75rem);display:grid;gap:1px;
  background:var(--gold);border:1px solid var(--gold)}
.process__step,.process__result{padding:clamp(1.25rem,2.6vw,1.75rem)}
.process__step{background:var(--ivory)}
.process__result{background:var(--forest);color:var(--ivory)}
.process .n{display:block;font-family:var(--sans);font-size:var(--t-label);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:.9rem}
.process__result .n{color:var(--gold)}
.process h3{font-size:var(--t-quote);margin:0 0 .7rem}
.process p{margin:0;font-size:var(--t-body);line-height:1.55;max-width:38ch}
/* Stacked, the result must fall last. It sits third in the DOM so that it can
   hold the right column of the 3x2 grid, which puts it between phase two and
   phase three the moment the grid collapses to one column. */
.process__result{order:1}
@media (min-width:64rem){
  .process{grid-template-columns:repeat(3,1fr)}
  .process__result{order:0;grid-column:3;grid-row:1 / span 2;display:flex;
    flex-direction:column;justify-content:center}
}

/* This page carries two dense blocks, so it breathes at a tighter rhythm
   than the editorial pages. */
.section--tight{padding-block:clamp(2.25rem,5vh,3.5rem)}
.hero--compact{padding-block:clamp(3rem,7vh,5rem)}


/* The tagline is the one string truths.md 1.4 locks for exact capitalisation.
   It had drifted onto .eyebrow, which uppercases, so the page was shipping
   "BUILD WEALTH. AWAKEN TO THE BEST OF LIFE." This class carries the eyebrow's
   size and tracking and deliberately never transforms the case. */
.tagline{font-family:var(--sans);font-size:var(--t-label);font-weight:500;
  letter-spacing:.14em;text-transform:none;line-height:1.4;color:inherit}

/* Portrait left, one text column to its right. Not stacked: the picture and
   the writing sit side by side, and the writing is a single column rather than
   the two-up it used to be. The portrait column is 20rem so the text gets the
   room, and the biography, the story and the mission all hang off that same
   right-hand edge, so there is one text spine down the page. */
.founder__row{display:grid;gap:clamp(2rem,5vh,2.75rem)}
@media (min-width:62rem){
  .founder__row{grid-template-columns:20rem minmax(0,1fr);gap:clamp(3rem,5vw,4.5rem);align-items:start}
}
.founder__row .portrait{width:100%;max-width:20rem;filter:none}
.founder__quote{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.1875rem,1.1rem + .45vw,1.4375rem);line-height:1.4;
  margin:clamp(1.5rem,3.5vh,2.25rem) 0 clamp(1.75rem,4vh,2.5rem);
  max-width:54ch;color:var(--ivory);
}
.founder__body p{max-width:62ch;color:var(--ivory)}

/* The story heading is capped at the house 20ch, which in this wide column
   broke it into four ragged lines of 330, 460, 368 and 309px. text-wrap:balance
   cannot help when the box is the constraint. Widened here only. */
.founder__offset .head{max-width:28ch}

/* Sections below sit on the same right-hand edge as the text beside the photo. */
@media (min-width:62rem){
  .founder__offset{display:grid;grid-template-columns:20rem minmax(0,1fr);gap:0 clamp(3rem,5vw,4.5rem)}
  .founder__offset > *{grid-column:2;max-width:62ch}
}


/* Begin: the introduction on the left, the questions to sit with on the right.
   Set quieter than the ruled index on Our Partnership, because there they are
   the subject and here they are context for the form beside them. Hairlines
   only between rows, no rule above the first, so the column reads as a margin
   note rather than a second table.

   These rules were lost in an earlier edit while the markup kept using them,
   which left the list rendering with browser markers on top of the Roman
   numerals and the two columns stacked. Restored. */
.begin__grid{display:grid;gap:clamp(3rem,7vh,4.5rem)}
@media (min-width:62rem){
  .begin__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,7vw,6rem);align-items:start}
}
.begin__grid .apply{margin-top:0;max-width:24rem}
.ponder{list-style:none;margin:0;padding:0}
.ponder li{display:grid;grid-template-columns:2.25rem 1fr;align-items:baseline;
  padding:clamp(.85rem,2vh,1.15rem) 0;border-bottom:1px solid rgba(168,127,53,.45)}
.ponder li::marker{content:none}
.ponder li:first-child{padding-top:0}
.ponder li:last-child{border-bottom:0}
.ponder__n{font-family:var(--serif);font-size:.9375rem;color:var(--gold-text);letter-spacing:.12em}
.ponder p{margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.36;max-width:36ch}

/* The series title stacks over two lines and must not be capped at the 18ch
   page-title measure. Also lost in an earlier edit; restored. */
.page-title.stacked{max-width:none}

/* The closing mark. The page ends on the emblem and the locked tagline rather
   than trailing off after a form. */
.closer{text-align:center}
.closer__emblem{width:clamp(4.5rem,9vw,6.5rem);height:auto;margin:0 auto;color:var(--ivory)}
/* Every p is capped at --measure and sits flush left, so text-align alone
   centred the text inside a left-hung box. The box has to be centred too. */
.closer__line{margin:clamp(1.75rem,4vh,2.5rem) auto 0;max-width:46ch;
  color:var(--stone);text-align:center}


/* The hero closes on the tagline rather than on links. It sits where the two
   actions sat, so it inherits their measured position, and takes the same
   champagne gold the rest of the hero furniture uses. truths.md 1.4 locks the
   capitalisation, which is why it carries .tagline and never a transform. */
.hero__tagline{margin:clamp(2rem,5vh,3rem) 0 0;color:var(--gold-film)}


/* Blocks inside one snapped section are separated by their own rhythm, which is
   far tighter than two sections stacked. Merging the problem statement and the
   wealth-architects block removed 256px of stacked padding between them. */
.band--next{margin-top:clamp(2.5rem,6vh,4rem)}

/* ---- Section navigation -----------------------------------------------
   CSS scroll-snap is deliberately NOT used on pointer devices. It waits for
   the scroll gesture to finish before it moves, which is why it felt like
   "scroll a little, wait, then it lurches" - that delay is the feature, not a
   tuning problem, and no combination of proximity or mandatory removes it.
   site.js drives the movement instead and starts on the first wheel event.

   Touch keeps native scrolling with proximity snap: hijacking a momentum
   scroll on a phone fights the platform and feels broken.

   scroll-behavior must stay auto for fine pointers or the browser's own
   smooth scrolling fights the driven animation. */
@media (prefers-reduced-motion:no-preference){
  @media (any-pointer:coarse){
    html{scroll-snap-type:y proximity}
    main > section,
    main > .plate--band,
    main > .pager,
    .footer{scroll-snap-align:start}
  }
  @media (hover:hover) and (pointer:fine){
    html{scroll-behavior:auto}
  }
}

/* ---- Scroll reveals ----------------------------------------------------
   One job: carry the eye down the page toward the one action at the end.

   Gate. Rare tier, first visit, marketing surface, so the delight budget is
   available. Purpose is guiding attention, not decoration, which is why only
   meaningful blocks are marked and never every element.

   Ingredients. transform and opacity only, so it stays off layout and paint.
   One-shot on entry, not scroll-linked: continuous parallax is the loud
   version of this idea and would fight the film. --ease is the existing token,
   a strong ease-out, entering. 700ms is longer than the 300ms UI ceiling
   because this is marketing and the slowness is the point.

   The rule draw is the brand idea made literal: a gold hairline extends left
   to right the way a drafted line is struck, and the eye follows it.

   Gated on .js so nothing is ever hidden without script to reveal it, and
   fully disabled under reduced motion on every device, unlike the film. ---- */
.js [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
  will-change:opacity,transform;
}
.js [data-reveal].is-in{opacity:1;transform:none;will-change:auto}

/* The hairline over each question and each process cell is struck rather than
   simply appearing. Border becomes a pseudo-element so it can be scaled. */
.js .enquiry li[data-reveal]{border-top-color:transparent}
.js .enquiry li[data-reveal]::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 900ms var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.js .enquiry li[data-reveal].is-in::before{transform:scaleX(1)}
.enquiry li{position:relative}

/* The pager is the crumb. Its rule draws last, pointing at what follows. */
.pager__link{position:relative}
.js .pager__link[data-reveal]::after{
  content:'';position:absolute;left:0;right:0;bottom:-.45rem;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 900ms var(--ease) 160ms;
}
.js .pager__link[data-reveal].is-in::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .enquiry li[data-reveal]{border-top-color:var(--gold)}
  .js .enquiry li[data-reveal]::before,
  .js .pager__link[data-reveal]::after{transform:scaleX(1);transition:none}
}

/* ---- Forms ------------------------------------------------------------- */

.field-label{display:block;font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.6rem}
.q{margin-bottom:clamp(2.5rem,6vh,3.5rem)}
.q .field-label{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);letter-spacing:0;
  text-transform:none;line-height:1.25;margin-bottom:1rem;max-width:24ch;text-wrap:balance}
input[type=email],input[type=text],textarea{
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--ink);
  padding:.55rem 0;width:100%;border-radius:0;-webkit-appearance:none;appearance:none;
}
input::placeholder,textarea::placeholder{color:#6F675A;opacity:1}
textarea{min-height:8.5rem;resize:vertical;border:1px solid var(--field-line);padding:.9rem 1rem}
textarea:focus{border-color:var(--ink)}
[aria-invalid="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.field-note{font-size:var(--t-label);margin:.6rem 0 0}
.field-note:empty{display:none}
.pair{display:grid;gap:clamp(1.5rem,4vh,2rem)}
@media (min-width:40rem){.pair{grid-template-columns:1fr 1fr;gap:2.5rem}}
button{
  font-family:var(--sans);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory);background:var(--ink);border:1px solid var(--ink);padding:.85rem 1.9rem;cursor:pointer;border-radius:0;
  transition:background-color var(--out) var(--ease),color var(--out) var(--ease),transform 120ms var(--ease);
}
@media (hover:hover) and (pointer:fine){button:hover{transition-duration:var(--in);background:transparent;color:var(--ink)}}
button:active{transform:scale(.98)}
button:disabled{background:var(--stone);border-color:var(--stone);color:var(--ink);cursor:default}
.apply{margin-top:clamp(2.5rem,7vh,4rem);max-width:44rem}
.apply__send{margin-top:clamp(2rem,5vh,2.75rem)}
.apply__send button{padding:1.15rem 3.25rem}
.notify{margin-top:clamp(2rem,5vh,3rem);max-width:26rem}
.notify__row{display:flex;flex-wrap:wrap;gap:1rem}
.notify__row input{flex:1 1 14rem;min-width:0}
.form-note{font-size:var(--t-label);margin:1rem 0 0;min-height:1.4em}
.form-note[data-state=error]{border-left:2px solid currentColor;padding-left:.75rem}
.form-note:empty{min-height:0}

/* ---- Footer ------------------------------------------------------------ */

/* The footer echoes the header lockup rather than inventing a second one: the
   emblem and the wordmark sit side by side over one gold hairline. Stacked, the
   mark was three lines tall against a single line of navigation and the whole
   band leaned left. Sized down and set on one baseline, it balances. */
.footer{border-top:1px solid var(--gold);padding-block:clamp(2.25rem,5vh,3.25rem);margin-top:auto}
.footer__grid{display:grid;gap:1.25rem;align-items:center}
@media (min-width:52rem){
  .footer__grid{grid-template-columns:auto 1fr;gap:2rem 3rem}
  .footer__nav{justify-content:flex-end}
}
.footer__mark{display:flex;align-items:center;margin:0;max-width:none;
  font-family:var(--serif);font-weight:500;font-size:.8125rem;
  letter-spacing:.16em;text-transform:uppercase}
.footer__mark .mark__emblem{width:2.5rem;height:2.5rem;margin:0}
.footer__word{padding-left:.85rem;margin-left:.85rem;border-left:1px solid var(--gold);
  white-space:nowrap}
.footer__legal{font-size:var(--t-label);margin:clamp(1.75rem,4vh,2.5rem) auto 0;
  max-width:46ch;text-align:center;opacity:.75}
@media (max-width:34rem){
  .footer__mark{font-size:.75rem;letter-spacing:.1em}
  .footer__word{white-space:normal}
}
.footer__nav{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;list-style:none;margin:0;padding:0}
.footer__nav a{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color var(--out) var(--ease)}
@media (hover:hover) and (pointer:fine){.footer__nav a:hover{border-bottom-color:var(--gold);transition-duration:var(--in)}}

/* ---- Motion. Plates only, never reading copy. -------------------------- */

.js .plate[data-fade]{opacity:0}
.js .plate[data-fade].is-in{opacity:1;transition:opacity 900ms var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js .plate[data-fade]{opacity:1;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{display:flex;flex-direction:column;min-height:100svh}
main{flex:1}

/* The founder portrait. Used as shot: no crop, no grade, never duotoned. */
.portrait{width:100%;max-width:min(22rem,100%);filter:none}
@media (max-width:62rem){.portrait{max-width:min(70%,18rem)}}

/* ---- Film -------------------------------------------------------------
   Four shots, 6s each, 1.2s dissolves, on a 19.2s seamless loop. One file
   with the dissolves baked in by assets/film/build-loop.sh, not four video
   elements: four simultaneous decodes is punishing on battery and would
   need script to keep them in sync. One file is one decode, one element,
   and no JavaScript.

   The poster is a real image element underneath, rather than only the
   video's own poster attribute, so it can carry a srcset, so it is the LCP
   element, and so it is still there when the video is suppressed. Full
   colour, never duotoned. The scrim lives on .stage.
   --------------------------------------------------------------------- */
.film{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate;background:var(--forest)}
.film__poster,.film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film__poster{z-index:1}
.film__video{z-index:2}
.film .grain{z-index:3;opacity:.16}

/* Reduced motion, split by input device. Decided with Kenzie 2026-08-07.

   On a pointer device, honour the setting: the film is hidden and the poster
   stands in. Someone who sets Reduce Motion on a desktop meant to.

   On touch, play it anyway. Android Battery Saver switches Reduce Motion on by
   itself, so a phone reports "reduce" without its owner ever asking for it, and
   that false positive was turning the hero into a still for visitors who had
   made no such choice. This was the actual cause of the film not playing on
   both test phones.

   Split on (hover:hover) and (pointer:fine) rather than width, because a narrow
   desktop window is still a desktop and should still be obeyed.

   Everything else honours reduced motion on every device: transition and
   animation durations collapse to ~0, plate reveals resolve instantly, and
   smooth scrolling stays off. The film is muted, slow, uncut and without
   parallax, which is a long way from what the setting guards against. */
@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){
  .film__video{display:none}
}

/* The film is a ground for the message, never the message. Held type sits
   above it with enough scrim to stay legible on any frame. */
/* The film fills the screen. Header plus stage is exactly one viewport, so the
   first thing a visitor sees is the film and nothing else, and the first wheel
   tick moves cleanly to the next section. svh rather than vh so mobile browser
   chrome does not push the bottom out of view. */
.stage{position:relative;min-height:calc(100svh - var(--header-h));display:grid;align-content:center;overflow:hidden;padding-block:clamp(3rem,7vh,5rem)}
/* Scrim shaped to the type, not slabbed across the frame.
   The first version was a horizontal ramp at .86 to .76 over the left 74%,
   derived purely from contrast maths. It passed every measurement and wrecked
   the footage: mean luma 84 down to 55, the lake's blues and mountains gone,
   a green wash where there should be a photograph.
   Solving for the tightest scrim the text actually needs, column by column
   across every frame, the true peak is 0.67 and only between 20% and 60% of
   the width. Text ends at 66%. Everything right of that needed nothing.
   So: an ellipse over the text block, plus a light overall tint for cohesion
   and slightly more top and bottom to seat the header and the section edge.
   The two layers composite as 1-(1-a1)(1-a2), which is how the centre still
   reaches ~0.71 while the open right side sits at 0.14. */
.stage::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    radial-gradient(ellipse 66% 92% at 34% 52%,
      rgba(30,56,48,.72) 0%, rgba(30,56,48,.68) 42%,
      rgba(30,56,48,.38) 68%, rgba(30,56,48,0) 84%),
    linear-gradient(180deg,
      rgba(30,56,48,.32) 0%, rgba(30,56,48,.15) 20%,
      rgba(30,56,48,.15) 76%, rgba(30,56,48,.36) 100%)}

/* The type sits on the film at every width. An earlier version stacked them
   below 75rem, putting the copy under the image on a flat panel; that made
   the hero fall apart the moment the window was resized. Narrow screens keep
   the overlay and get a scrim weighted down the frame instead of across it,
   because the copy runs full width there and there is no quiet side left. */
@media (max-width:74.99rem){
  .stage::after{
    background:
      radial-gradient(ellipse 120% 70% at 50% 46%,
        rgba(30,56,48,.74) 0%, rgba(30,56,48,.70) 46%,
        rgba(30,56,48,.52) 74%, rgba(30,56,48,.34) 100%),
      linear-gradient(180deg,
        rgba(30,56,48,.40) 0%, rgba(30,56,48,.22) 26%,
        rgba(30,56,48,.24) 74%, rgba(30,56,48,.40) 100%)}
}
.stage > .wrap{position:relative;z-index:5}
.stage,.stage a{color:var(--ivory)}
/* Stone is a flat-forest colour. Over film it needs an 0.84 scrim to clear
   AA, which would erase the photograph, so the stage eyebrow is ivory. */
.stage .eyebrow{color:var(--gold-film)}
.stage .action{color:var(--gold-film)}
.stage .action{border-bottom-color:var(--gold-film)}

/* The four chapters of a life. Each is a full field. */
.chapter{position:relative;overflow:hidden;min-height:80svh;display:grid;align-content:center;padding-block:clamp(4rem,10vh,7rem)}
.chapter .plate,.chapter .film{position:absolute;inset:0;z-index:0}
.chapter::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(30,56,48,.86) 0%,rgba(30,56,48,.62) 48%,rgba(30,56,48,.34) 100%)}
.chapter > .wrap{position:relative;z-index:2;color:var(--ivory)}
.chapter .eyebrow{color:var(--stone)}
.chapter__line{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,1.2rem + 2.8vw,3.5rem);
  line-height:1.16;margin:0;max-width:18ch;text-wrap:balance}
.chapter__body{margin-top:clamp(1.5rem,4vh,2.25rem);max-width:44ch;color:var(--ivory)}