/* ==========================================================================
   Baldwin Financial, LLC
   Warm quiet luxury — espresso foundation, ivory and stone, one brass accent.
   Newsreader (editorial serif) for headlines · Archivo (sans) for interface.
   A single committed visual world: the palette does not invert by theme.
   ========================================================================== */

:root {
  /* foundation — warm, never pure black */
  --espresso:   #14100D;
  --graphite:   #1B1714;
  --raised:     #221D19;
  --walnut:     #2C2521;

  /* warm neutrals */
  --ivory:      #EFE9DF;
  --sand:       #CFC4B2;
  --stone:      #A0958A;
  --taupe:      #8D837A;

  /* one accent: aged brass */
  --brass:      #B08D57;
  --brass-soft: #C6A472;
  --brass-dim:  rgba(176, 141, 87, 0.28);

  /* lines — always warm, always low */
  --line:       rgba(239, 233, 223, 0.13);
  --line-soft:  rgba(239, 233, 223, 0.07);

  /* the one light section: warm paper, not white */
  --paper:      #EFE9DF;
  --paper-ink:  #17120E;
  --paper-2:    #5D5348;
  --paper-line: rgba(23, 18, 14, 0.14);

  --shell: 1300px;
  --gut: clamp(22px, 5.4vw, 84px);

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --slow: cubic-bezier(.19, 1, .22, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--espresso);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: clamp(15.5px, .98vw, 17px);
  font-weight: 350;
  line-height: 1.75;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* linen grain — one fixed overlay, deliberately faint */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .033; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--brass); color: var(--espresso); }
:focus-visible { outline: 1px solid var(--brass-soft); outline-offset: 4px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 18px; top: -70px; z-index: 200;
  background: var(--brass); color: var(--espresso); padding: 12px 20px;
  font-family: var(--sans); font-size: 13px; letter-spacing: .06em;
  text-decoration: none; transition: top .3s var(--ease);
}
.skip:focus { top: 18px; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; font-weight: 400; }

.display, .h2 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--ivory);
}
.display { font-size: clamp(2.55rem, 5.6vw, 4.9rem); }
.h2 { font-size: clamp(2rem, 3.9vw, 3.35rem); }
.h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.18; letter-spacing: -0.014em;
}
.display em, .h2 em, .h3 em { font-style: italic; font-weight: 300; }

.eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-soft); margin: 0;
}

.lede {
  font-size: clamp(1.02rem, 1.24vw, 1.15rem);
  line-height: 1.72; color: var(--sand); max-width: 46ch; font-weight: 350;
}

p { margin: 0 0 1.15em; color: var(--stone); max-width: 62ch; }
p:last-child { margin-bottom: 0; }
.h2 + p, .h3 + p, .display + p { margin-top: 22px; }
.strong { color: var(--sand); }
.small { font-size: .85rem; line-height: 1.7; }
.fine { font-size: .78rem; line-height: 1.75; color: var(--taupe); max-width: 68ch; }

/* ---------- rules ---------- */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; transform-origin: left center; }
.rule--brass { background: var(--brass-dim); }
.rule-draw { transform: scaleX(0); transition: transform 1.6s var(--slow); }
.rule-draw.is-in { transform: scaleX(1); }

/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--espresso) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color .6s var(--ease), background .6s var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--line-soft); }

.masthead__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; height: 104px; transition: height .6s var(--slow);
}
.masthead.is-stuck .masthead__bar { height: 74px; }

.brand { display: flex; align-items: center; line-height: 0; flex: 0 0 auto; padding: 8px 0; }
.brand img { height: 24px; width: auto; opacity: .95; transition: height .6s var(--slow); }
.masthead.is-stuck .brand img { height: 20px; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav a {
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: .05em; text-decoration: none; color: var(--stone);
  white-space: nowrap; position: relative; padding: 4px 0;
  transition: color .45s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: right center;
  transition: transform .6s var(--slow);
}
.nav a:hover { color: var(--ivory); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.nav a[aria-current="page"] { color: var(--ivory); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: 17px 30px; border: 1px solid var(--brass); color: var(--brass-soft);
  background: transparent; cursor: pointer; position: relative; overflow: hidden;
  isolation: isolate; /* keeps the fill pseudo-element inside the button */
  transition: color .6s var(--ease), border-color .6s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--brass);
  transform: scaleX(0); transform-origin: left center; z-index: -1;
  transition: transform .7s var(--slow);
}
.btn > * { position: relative; }
.btn:hover { color: var(--espresso); border-color: var(--brass); }
.btn:hover::before { transform: scaleX(1); }
.btn__arrow { transition: transform .6s var(--slow); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--quiet { border-color: var(--line); color: var(--sand); }
.btn--quiet::before { background: var(--ivory); }
.btn--quiet:hover { color: var(--espresso); border-color: var(--ivory); }

.nav a.btn, .nav a.btn:hover::after { padding: 13px 22px; }
.nav a.btn::after { display: none; }
.nav a.btn:hover { color: var(--espresso); }

.link-q {
  display: inline-block;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--brass-soft); border-bottom: 1px solid var(--brass-dim);
  padding: 6px 0;   /* standalone link, so it carries a real tap target */
  transition: border-color .5s var(--ease), color .5s var(--ease);
}
.link-q:hover { border-color: var(--brass); color: var(--ivory); }

/* ---------- mobile menu ---------- */
.nav__toggle {
  display: none; width: 44px; height: 44px; padding: 0; position: relative;
  background: transparent; border: 1px solid var(--line); cursor: pointer;
}
.nav__toggle span {
  position: absolute; left: 13px; width: 18px; height: 1px; background: var(--ivory);
  transition: transform .5s var(--slow), opacity .3s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 18px; }
.nav__toggle span:nth-child(2) { top: 25px; }
.masthead.is-open .nav__toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.masthead.is-open .nav__toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu { display: none; border-top: 1px solid var(--line-soft); padding: 12px 0 34px; }
.menu a {
  display: block; padding: 18px 0; text-decoration: none;
  font-family: var(--serif); font-weight: 300; font-size: 1.5rem;
  color: var(--ivory); border-bottom: 1px solid var(--line-soft);
}
.menu a.btn {
  display: inline-flex; margin-top: 26px; border: 1px solid var(--brass);
  font-family: var(--sans); font-size: 12px; color: var(--brass-soft);
}

@media (max-width: 900px) {
  .nav a:not(.btn), .nav a.btn { display: none; }
  .nav__toggle { display: block; }
  .masthead.is-open .menu { display: block; }
  .masthead__bar { height: 84px; }
}

/* ---------- arrival ---------- */
.arrival { position: relative; overflow: hidden; }
/* soft architectural light falling from upper left */
.arrival::before {
  content: ""; position: absolute; top: -34%; left: -18%;
  width: 92%; height: 136%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 186, 140, .10), transparent 100%);
}
/* structural columns, the way light falls between window mullions */
.arrival::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to right, rgba(239,233,223,.05) 0 1px, transparent 1px 172px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
}
.arrival__grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(44px, 5vw, 76px);
  padding: clamp(46px, 7vw, 104px) 0 clamp(52px, 7vw, 108px);
  align-items: center;
}
@media (min-width: 940px) {
  .arrival__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    gap: clamp(56px, 6vw, 100px);
    min-height: calc(100svh - 104px);
  }
}

.arrival__title { margin: 26px 0 0; max-width: 15ch; }
.arrival__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(34px, 4vw, 48px); }

/* portrait panel — brass rule offset behind, printed-menu framing */
.plate { position: relative; }
.plate::before {
  content: ""; position: absolute; inset: 20px -20px -20px 20px;
  border: 1px solid var(--brass-dim); pointer-events: none;
}
@media (max-width: 640px) { .plate::before { inset: 14px -14px -14px 14px; } }
.plate__img { position: relative; overflow: hidden; background: var(--graphite); }
.plate__img img { width: 100%; height: auto; display: block; }
/* slow wipe reveal */
.plate__img img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 1.9s var(--slow), transform 2.4s var(--slow);
}
.plate.is-in .plate__img img { clip-path: inset(0 0 0 0); transform: scale(1); }
.plate__cap {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: baseline; font-size: 12px; letter-spacing: .05em;
}
.plate__cap b { font-weight: 500; color: var(--sand); }
.plate__cap span { color: var(--taupe); }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 9.5vw, 148px) 0; position: relative; }
.section--paper {
  background: var(--paper); color: var(--paper-ink);
}
.section--paper p { color: var(--paper-2); }
.section--paper .h2, .section--paper .h3, .section--paper .display { color: var(--paper-ink); }
.section--paper .eyebrow { color: #7A5C31; }
.section--paper .rule { background: var(--paper-line); }
.section--paper .fine { color: #665C50; }

.head { display: grid; gap: 22px; padding-top: 34px; }
@media (min-width: 940px) {
  .head { grid-template-columns: 230px minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
}

/* section index — the storyboard is a real sequence, so it is numbered */
.head__meta { display: flex; align-items: baseline; gap: 16px; }
@media (min-width: 940px) { .head__meta { display: block; } }
.head__num {
  font-family: var(--serif); font-weight: 300; font-size: 15px;
  letter-spacing: .08em; color: var(--brass); font-variant-numeric: tabular-nums;
  display: block; position: relative; padding-bottom: 14px; margin-bottom: 14px;
}
@media (min-width: 940px) {
  .head__num::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 1px;
    background: var(--brass-dim);
  }
}
@media (max-width: 939px) { .head__num { padding-bottom: 0; margin-bottom: 0; } }
.section--paper .head__num { color: #7A5C31; }

/* editorial rows — the repeating structure, in place of card grids */
.rows { display: grid; margin-top: clamp(34px, 4vw, 54px); }
.row {
  display: grid; gap: 10px 40px;
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.row:last-child { border-bottom: 1px solid var(--line); }
/* on hover the hairline above the row lights in brass — a small, quiet response */
.row::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--slow);
}
.row:hover::before { transform: scaleX(1); }
.row .row__n, .row .row__note { transition: color .6s var(--ease), transform .8s var(--slow); }
.row:hover .row__n, .row:hover .row__note { color: var(--brass-soft); transform: translateX(3px); }
.section--paper .row:hover .row__n, .section--paper .row:hover .row__note { color: #7A5C31; }
.section--paper .row { border-color: var(--paper-line); }
@media (min-width: 860px) {
  .row { grid-template-columns: 62px minmax(0, 300px) minmax(0, 1fr); align-items: baseline; }
  .row--wide { grid-template-columns: 62px minmax(0, 340px) minmax(0, 1fr); }
}
.row__n {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; color: var(--brass); font-variant-numeric: tabular-nums;
}
.section--paper .row__n { color: #8A6A3C; }
.row h3 { font-family: var(--serif); font-weight: 300; font-size: 1.32rem; line-height: 1.2; }
.row p { font-size: .96rem; margin: 0; }
.row__note {
  font-family: var(--sans); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--taupe);
}

/* ---------- the values figure ----------
   Concentric, not a flat list: values at the core, life outcomes around them,
   the technical work outermost. Placement is the argument. */
.figure { position: relative; width: 100%; max-width: 780px; margin: clamp(38px, 5vw, 64px) auto 0; }
.figure::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 186, 140, .14), transparent 100%);
}
.figure svg { position: relative; width: 100%; height: auto; overflow: visible; }

.fig-ring { fill: none; stroke-width: 1; }
.fig-ring--in  { stroke: var(--brass-dim); stroke-dasharray: 1257; stroke-dashoffset: 1257;
                 transition: stroke-dashoffset 2.4s var(--slow) .1s; }
.fig-ring--out { stroke: var(--line-soft); stroke-dasharray: 2011; stroke-dashoffset: 2011;
                 transition: stroke-dashoffset 3s var(--slow) .35s; }
.figure.is-in .fig-ring { stroke-dashoffset: 0; }

.fig-spoke { stroke: var(--line); stroke-width: 1; opacity: 0; transition: opacity 1s var(--ease) .7s; }
.fig-spoke--in { stroke: var(--brass-dim); }
.figure.is-in .fig-spoke { opacity: 1; }

.fig-core {
  fill: var(--brass); opacity: 0;
  transform-box: fill-box; transform-origin: center;
  transform: scale(.82);
  transition: opacity 1.1s var(--slow), transform 1.4s var(--slow);
}
.figure.is-in .fig-core { opacity: 1; transform: scale(1); }
.fig-core-t {
  /* sized and tracked to sit inside the disc with real breathing room */
  font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: .10em;
  fill: var(--espresso); opacity: 0; transition: opacity 1.1s var(--ease) .45s;
}
.figure.is-in .fig-core-t { opacity: 1; }

.fig-dot { opacity: 0; transition: opacity .9s var(--ease); }
.fig-dot--in  { fill: var(--brass); }
.fig-dot--out { fill: var(--stone); }
.fig-label {
  font-family: var(--sans); letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transition: opacity 1s var(--ease);
}
.fig-label--in  { font-size: 15px; font-weight: 500; fill: var(--ivory); }
.fig-label--out { font-size: 13px; font-weight: 400; fill: var(--stone); letter-spacing: .13em; }
.figure.is-in .fig-dot, .figure.is-in .fig-label { opacity: 1; }
.figure.is-in .fig-dot--in,  .figure.is-in .fig-label--in  { transition-delay: .8s; }
.figure.is-in .fig-dot--out, .figure.is-in .fig-label--out { transition-delay: 1.15s; }

/* the key, which is where the model is actually explained */
.fig-key { display: grid; gap: 18px; margin-top: clamp(34px, 4vw, 52px); }
@media (min-width: 820px) { .fig-key { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; } }
.fig-key div { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: start; }
.fig-key i { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; }
.fig-key .k-core { background: var(--brass); }
.fig-key .k-in   { background: var(--brass); opacity: .55; }
.fig-key .k-out  { background: var(--stone); }
.fig-key b { display: block; font-family: var(--sans); font-size: 13px; font-weight: 500;
             letter-spacing: .1em; text-transform: uppercase; color: var(--sand); margin-bottom: 6px; }
.fig-key p { font-size: .92rem; margin: 0; }

/* below 640 the rings stop being readable, so the model becomes a list */
.fig-list { display: none; }
@media (max-width: 640px) {
  .figure svg { display: none; }
  .figure::before { display: none; }
  .fig-list { display: grid; margin-top: 30px; }
  .fig-list > div { border-top: 1px solid var(--line); padding: 20px 0; }
  .fig-list > div:last-child { border-bottom: 1px solid var(--line); }
  .fig-list b { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500;
                letter-spacing: .14em; text-transform: uppercase; color: var(--brass-soft); margin-bottom: 8px; }
  .fig-list span { color: var(--sand); font-size: .95rem; }
}

/* ---------- pull quote ---------- */
.pull {
  border-left: 1px solid var(--brass-dim);
  padding-left: clamp(24px, 3vw, 42px);
  margin: clamp(30px, 4vw, 46px) 0 0;
}
.pull p {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.3rem, 2.3vw, 1.95rem); line-height: 1.35;
  color: var(--ivory); max-width: 30ch; margin: 0;
}
.pull__by { margin-top: 22px; font-size: 12px; letter-spacing: .05em; }
.pull__by b { font-weight: 500; color: var(--sand); display: block; }
.pull__by span { color: var(--taupe); }

/* ---------- closing ----------------------------------------------------
   Two columns: the invitation, and the answer to the question everybody has
   before they book, which is what the meeting actually consists of.
   ---------------------------------------------------------------------- */
.closing { position: relative; overflow: hidden; padding: clamp(84px, 11vw, 156px) 0 clamp(70px, 8vw, 120px); }
.closing::before {
  content: ""; position: absolute; bottom: -40%; right: -10%;
  width: 70%; height: 130%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(176, 141, 87, .10), transparent 100%);
}
.invite { position: relative; display: grid; gap: clamp(48px, 6vw, 74px); }
@media (min-width: 940px) {
  .invite { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(56px, 7vw, 110px); }
}
.invite__l .h2 { max-width: 18ch; }
.invite__note { font-size: .82rem; line-height: 1.75; color: var(--taupe); max-width: 40ch; margin-top: 30px; }

/* the right column sits behind a hairline so it reads as a companion panel
   rather than a second, competing headline */
.invite__r { position: relative; }
@media (min-width: 940px) {
  .invite__r { padding-left: clamp(34px, 4vw, 56px); }
  .invite__r::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
    background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  }
}
.invite__lab {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-soft); margin: 0 0 4px;
}

.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
  transition: border-color .7s var(--ease);
}
.steps li:last-child { border-bottom: 0; }
.steps li:hover { border-color: rgba(176, 141, 87, .40); }
.steps__n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--brass);
  padding-top: 5px; transition: color .6s var(--ease), transform .8s var(--slow);
}
.steps li:hover .steps__n { transform: translateY(-2px); color: var(--brass-soft); }
.steps p { margin: 0; font-size: .93rem; line-height: 1.7; color: var(--sand); max-width: 42ch; }

/* how to reach a person, without making it a form */
.invite__lab--2 { margin-top: 40px; color: var(--taupe); }
.reach { margin: 18px 0 0; display: grid; gap: 0; }
.reach > div {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px;
  align-items: baseline; padding: 13px 0; border-top: 1px solid var(--line);
}
.reach > div:first-child { border-top: 0; padding-top: 0; }
.reach dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--taupe);
}
.reach dd { margin: 0; font-size: .9rem; color: var(--sand); }
.reach dd a { color: var(--sand); text-decoration: none; position: relative; }
.reach dd a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--slow);
}
.reach dd a:hover { color: var(--ivory); }
.reach dd a:hover::after, .reach dd a:focus-visible::after { transform: scaleX(1); }

/* the three steps arrive one after another */
.invite__r .rise:nth-child(2) { transition-delay: .06s; }
.invite__r .steps li:nth-child(1) { transition-delay: .12s; }
.invite__r .steps li:nth-child(2) { transition-delay: .22s; }
.invite__r .steps li:nth-child(3) { transition-delay: .32s; }
.invite__r .invite__lab--2 { transition-delay: .40s; }
.invite__r .reach { transition-delay: .48s; }

/* ---------- detail lists ---------- */
.dl { margin: 0; display: grid; }
.dl__row { border-top: 1px solid var(--line); padding: 20px 0; display: grid; gap: 6px; }
.dl__row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .dl__row { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; align-items: baseline; } }
.dl dt { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }
.dl dd { margin: 0; color: var(--sand); }
.dl dd a {
  display: inline-block; padding-bottom: 4px;
  color: var(--brass-soft); text-decoration: none; border-bottom: 1px solid var(--brass-dim);
}
.dl dd a:hover { border-color: var(--brass); }

/* ---------- questions ---------- */
.qa { margin-top: clamp(30px, 4vw, 46px); }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-of-type { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 26px 52px 26px 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.12rem, 1.6vw, 1.35rem); line-height: 1.3;
  color: var(--ivory); transition: color .5s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--brass-soft); }
.qa summary::before, .qa summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  background: var(--brass); transition: transform .6s var(--slow), opacity .4s var(--ease);
}
.qa summary::before { width: 14px; height: 1px; margin-top: 0; }
.qa summary::after { width: 1px; height: 14px; margin-top: -7px; right: 14.5px; }
.qa details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.qa__body { padding: 0 clamp(0px, 10vw, 150px) 30px 0; }
.qa__body p { font-size: .96rem; }

/* ---------- form ---------- */
.form { display: grid; gap: 26px; margin-top: clamp(30px, 4vw, 42px); max-width: 560px; }
.field { display: grid; gap: 9px; }
.field label { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 1rem; font-weight: 350; color: var(--ivory);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 12px 0; border-radius: 0; transition: border-color .5s var(--ease);
}
.field select { color: var(--sand); }
.field select option { background: var(--graphite); color: var(--ivory); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--brass); }
.field textarea { resize: vertical; min-height: 130px; }
.form__note { font-size: .8rem; line-height: 1.7; color: var(--taupe); max-width: 54ch; }

/* ---------- prose ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 52px 0 16px; color: var(--ivory); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.15em; margin: 0 0 1.15em; color: var(--stone); }
.prose li { margin-bottom: .6em; }
.prose a { color: var(--brass-soft); }

/* ---------- reveals ---------- */
.rise { opacity: 0; transform: translateY(26px); transition: opacity 1.3s var(--slow), transform 1.3s var(--slow); }
.rise.is-in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 1.2s var(--slow), transform 1.2s var(--slow); }
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(2) { transition-delay: .10s; }
.stagger.is-in > *:nth-child(3) { transition-delay: .20s; }
.stagger.is-in > *:nth-child(4) { transition-delay: .30s; }
.stagger.is-in > *:nth-child(5) { transition-delay: .40s; }
.stagger.is-in > *:nth-child(6) { transition-delay: .50s; }
.stagger.is-in > *:nth-child(7) { transition-delay: .60s; }

/* the arrival column resolves on load rather than on scroll */
.arrival .rise { transition-delay: .15s; }
.arrival .rise--2 { transition-delay: .30s; }
.arrival .rise--3 { transition-delay: .45s; }
.arrival .rise--4 { transition-delay: .60s; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line-soft); padding: clamp(56px, 6.5vw, 92px) 0 44px; }
.foot__top { display: grid; gap: 44px; }
@media (min-width: 900px) { .foot__top { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, .82fr)); gap: 44px; } }
.foot img { height: 22px; width: auto; opacity: .9; }
.foot .foot__label {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--taupe); margin: 0 0 18px; line-height: 1.6;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot ul a {
  display: inline-block; padding: 5px 0;   /* lifts the tap target past 24px */
  text-decoration: none; font-size: .93rem; color: var(--stone);
  transition: color .4s var(--ease);
}
.foot ul a:hover { color: var(--ivory); }

.foot__legal {
  margin-top: clamp(46px, 5vw, 72px); padding-top: 30px;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem; line-height: 1.8; color: var(--taupe); max-width: 92ch;
}
.foot__legal p { max-width: none; margin-bottom: 1em; color: var(--taupe); }
.foot__legal a { color: var(--stone); }
.foot__base {
  margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 30px;
  justify-content: space-between; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--taupe);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .rise, .stagger > * { opacity: 1; transform: none; }
  .rule-draw { transform: scaleX(1); }
  .plate__img img { clip-path: none; transform: none; }
  .orbit .o-ring { stroke-dashoffset: 0; }
  .orbit .o-label, .orbit .o-center, .orbit .o-tick { opacity: 1; }
}

/* ==========================================================================
   Warm-paper section overrides
   Components authored for the espresso ground use ivory-based text and
   ivory-alpha hairlines. Inside a paper section both vanish, so every one
   of them is restated here against the light ground.
   ========================================================================== */

/* disclosure questions */
.section--paper .qa details { border-top-color: var(--paper-line); }
.section--paper .qa details:last-of-type { border-bottom-color: var(--paper-line); }
.section--paper .qa summary { color: var(--paper-ink); }
.section--paper .qa summary:hover { color: #7A5C31; }
.section--paper .qa summary::before,
.section--paper .qa summary::after { background: #7A5C31; }

/* definition lists */
.section--paper .dl__row { border-top-color: var(--paper-line); }
.section--paper .dl__row:last-child { border-bottom-color: var(--paper-line); }
.section--paper .dl dt { color: #7A7065; }
.section--paper .dl dd { color: var(--paper-ink); }
.section--paper .dl dd a { color: #7A5C31; border-bottom-color: rgba(122, 92, 49, .35); }
.section--paper .dl dd a:hover { border-bottom-color: #7A5C31; }

/* pull quotes and quiet links, should either appear on paper */
.section--paper .pull { border-left-color: rgba(122, 92, 49, .35); }
.section--paper .pull p { color: var(--paper-ink); }
.section--paper .pull__by b { color: var(--paper-ink); }
.section--paper .pull__by span { color: #7A7065; }
.section--paper .link-q { color: #7A5C31; border-bottom-color: rgba(122, 92, 49, .35); }
.section--paper .link-q:hover { color: var(--paper-ink); border-bottom-color: #7A5C31; }

/* ---------- biography layout ----------
   Deliberately NOT .arrival__grid — that carries a viewport min-height that
   tears a hole in any page it is reused on. */
.bio { display: grid; gap: clamp(30px, 4vw, 60px); align-items: start; }
@media (min-width: 900px) { .bio { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }

/* ==========================================================================
   Motion craft
   Everything below is precision, not volume: per-word settling on headlines,
   light that responds to where you are, and transitions between pages.
   Nothing loops. Every rule has a reduced-motion counterpart at the bottom.
   ========================================================================== */

/* ---- headlines settle in, word by word, a line at a time ---------------- */
.split .wd {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 1.15s var(--slow), transform 1.15s var(--slow);
  /* deliberately no will-change: a headline is a dozen words, and promoting
     every one of them to its own compositor layer costs more than it buys */
}
.split.is-in .wd { opacity: 1; transform: none; }
/* italics carry a fractional extra beat, so the emphasis lands last */
.split .wd--em { transition-duration: 1.35s; }

/* ---- the arrival's light follows the pointer ---------------------------- */
@media (hover: hover) and (pointer: fine) {
  .arrival::before {
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(
      620px circle at var(--mx, 26%) var(--my, 32%),
      rgba(214, 186, 140, .115), transparent 68%);
    transition: background .9s cubic-bezier(.4, 0, .2, 1);
  }
}

/* ---- the arrival yields as you leave it -------------------------------- */
.arrival__grid { will-change: transform; }

/* ---- portrait breathes under the cursor -------------------------------- */
.plate__img { overflow: hidden; }
.plate.is-in .plate__img img { transition: clip-path 1.9s var(--slow), transform 1.6s var(--slow); }
@media (hover: hover) and (pointer: fine) {
  .plate:hover .plate__img img { transform: scale(1.022); }
  /* the offset brass frame drifts a hair closer, like a card being picked up */
  .plate::before { transition: inset .9s var(--slow), border-color .9s var(--ease); }
  .plate:hover::before { inset: 14px -14px -14px 14px; border-color: rgba(176, 141, 87, .5); }
}

/* ---- quiet links: the rule retreats, then returns from the other side --- */
.link-q { position: relative; border-bottom-color: transparent; }
.link-q::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brass); transform: scaleX(1); transform-origin: right center;
  transition: transform .65s var(--slow);
}
.link-q:hover::after { transform: scaleX(0); transform-origin: right center; }
.link-q::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brass-soft); transform: scaleX(0); transform-origin: left center;
  transition: transform .65s var(--slow) .12s;
}
.link-q:hover::before { transform: scaleX(1); }

/* ---- page transitions: a held breath between rooms --------------------- */
main { opacity: 1; transition: opacity .42s var(--ease); }
html.is-leaving main { opacity: 0; }
html.is-leaving { cursor: progress; }

/* ---- reduced motion: all of the above resolves instantly ---------------- */
@media (prefers-reduced-motion: reduce) {
  .split .wd { opacity: 1 !important; transform: none !important; }
  .arrival__grid { transform: none !important; }
  .plate:hover .plate__img img { transform: none; }
  .link-q { border-bottom-color: var(--brass-dim); }
  .link-q::before, .link-q::after { display: none; }
  main { opacity: 1 !important; }
  html.is-leaving main { opacity: 1; }
}

/* ---------- client access ---------- */
.access { display: grid; gap: 14px; margin-top: clamp(30px, 4vw, 44px); }
@media (min-width: 700px) { .access { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.access a {
  display: block; text-decoration: none; padding: 26px 28px;
  border: 1px solid var(--line); position: relative; overflow: hidden;
  transition: border-color .6s var(--ease);
}
.access a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--slow);
}
.access a:hover { border-color: var(--brass-dim); }
.access a:hover::after { transform: scaleX(1); }
.access b { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.4rem;
            color: var(--ivory); margin-bottom: 8px; letter-spacing: -.012em; }
.access span { display: block; font-size: .9rem; color: var(--stone); }
.access em {
  display: inline-block; margin-top: 16px; font-family: var(--sans); font-style: normal;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-soft);
}

@media (prefers-reduced-motion: reduce) {
  .fig-ring { stroke-dashoffset: 0 !important; }
  .fig-spoke, .fig-dot, .fig-label, .fig-core-t { opacity: 1 !important; }
  .fig-core { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   The path
   The engagement is the thing clients are actually buying, so it gets the
   loudest treatment on the site: large numerals, a spine that draws itself,
   and an explicit outcome against every step.
   ========================================================================== */

.path { position: relative; list-style: none; margin: clamp(38px, 4.5vw, 60px) 0 0; padding: 0; }

/* the spine, drawn top to bottom as the section arrives */
.path::before {
  content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(to bottom, rgba(122,92,49,.42), rgba(122,92,49,.18));
  transform: scaleY(0); transform-origin: top center;
  transition: transform 2.2s var(--slow);
}
.path.is-in::before { transform: scaleY(1); }

.path__step {
  position: relative;
  display: grid; gap: 4px 0;
  padding: clamp(30px, 3.6vw, 46px) 0 clamp(30px, 3.6vw, 46px) 36px;
  border-top: 1px solid var(--paper-line);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.1s var(--slow), transform 1.1s var(--slow);
}
.path.is-in .path__step { opacity: 1; transform: none; }
.path.is-in .path__step:nth-child(2) { transition-delay: .12s; }
.path.is-in .path__step:nth-child(3) { transition-delay: .24s; }
.path.is-in .path__step:nth-child(4) { transition-delay: .36s; }
.path.is-in .path__step:nth-child(5) { transition-delay: .48s; }
.path__step:first-child { border-top: 0; }
.path__step:last-child { border-bottom: 1px solid var(--paper-line); }

/* the marker sits on the spine */
.path__step::before {
  content: ""; position: absolute; left: 0; top: clamp(38px, 4.2vw, 56px);
  width: 12px; height: 12px; border-radius: 50%; margin-left: -5px;
  background: #7A5C31;
  box-shadow: 0 0 0 7px var(--paper), 0 0 0 8px rgba(122,92,49,.22);
}

@media (min-width: 860px) {
  .path__step { grid-template-columns: 108px minmax(0, 1fr); gap: 0 clamp(28px, 3.4vw, 56px); }
}

.path__n {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .92;
  letter-spacing: -.03em; color: #7A5C31;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 859px) { .path__n { font-size: 2.1rem; margin-bottom: 10px; } }

.path__step h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.85rem, 3.1vw, 2.75rem); line-height: 1.02;
  letter-spacing: -.026em; color: var(--paper-ink); margin-bottom: 16px;
}
.path__step p { font-size: 1rem; max-width: 54ch; }

/* the outcome: the reason this section exists */
.path__out {
  margin-top: 24px; padding: 20px 24px 22px;
  border-left: 3px solid #7A5C31;
  background: rgba(122, 92, 49, .075);
}
.path__out b {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: #7A5C31; margin-bottom: 7px;
}
.path__out span { display: block; color: var(--paper-ink); font-size: 1.06rem; line-height: 1.58; max-width: 50ch; }

@media (prefers-reduced-motion: reduce) {
  .path::before { transform: scaleY(1); }
  .path__step { opacity: 1; transform: none; }
}

/* ==========================================================================
   ORIGIN BLEND
   Origin's structural moves (rotating question hero, category tiles, phone
   module, mono data labels) rendered in Baldwin's palette. The four tile
   grounds come from the brand brief's own sanctioned accent list: muted
   bronze, deep oxblood, dark forest, subtle clay.
   ========================================================================== */

:root {
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tile-tax:    #4E1B1C;   /* deep oxblood     */
  --tile-estate: #193B28;   /* dark forest      */
  --tile-plan:   #664C1B;   /* bronze, olive-gold */
  --tile-wealth: #743519;   /* burnished copper */
  --r-tile: 10px;
}

/* ---- mono micro-labels: the precision voice ---------------------------- */
.mono {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass-soft);
  margin: 0;
}
.mono--dim { color: var(--taupe); }

/* ---- the question hero ------------------------------------------------- */
.ask { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 88px); }
.ask::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px circle at var(--mx, 30%) var(--my, 28%),
              rgba(214,186,140,.10), transparent 66%);
  transition: background .9s var(--ease);
}
.ask__in { position: relative; max-width: 1080px; }

.ask__who { display: flex; align-items: center; gap: 12px; min-height: 20px; }
.ask__who i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); flex: 0 0 auto; }

.ask__q {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.3rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.028em;
  color: var(--ivory); margin: 26px 0 0; max-width: 22ch;
}
.ask__q em { font-style: italic; }
.ask__rot { display: inline-block; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.ask__q.is-out .ask__rot { opacity: 0; transform: translateY(-10px); }

.ask__sub { margin-top: clamp(26px, 3vw, 38px); max-width: 50ch; }
.ask__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(30px, 3.6vw, 44px); }

.ask__dots { display: flex; gap: 0; margin-top: clamp(28px, 3.4vw, 42px); margin-left: -0px; }
.ask__dots span {
  width: 22px; height: 2px; background: var(--line);
  transition: background .5s var(--ease);
}
.ask__dots span.on { background: var(--brass); }

/* ---- four category tiles ---------------------------------------------- */
.tiles { display: grid; gap: 12px; margin-top: clamp(38px, 4.5vw, 56px); }
@media (min-width: 700px)  { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--r-tile); padding: clamp(26px, 2.6vw, 34px);
  min-height: clamp(300px, 28vw, 380px);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07),
              0 30px 50px -40px rgba(0, 0, 0, .9);
  transition: transform .8s var(--slow), box-shadow .8s var(--ease);
}
.tile:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14),
              0 44px 64px -38px rgba(0, 0, 0, .95);
}
/* content rides above both pseudo-layers */
.tile > * { position: relative; z-index: 1; }
/* a fixed sheen and a fine grain, so the colour has a surface rather than
   being a flat fill */
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(158deg, rgba(255,255,255,.04), transparent 42%),
    linear-gradient(0deg, rgba(0,0,0,.46), rgba(0,0,0,.14) 62%, transparent 88%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-blend-mode: normal, normal, overlay;
}
/* light that follows the cursor across the tile */
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(380px circle at var(--tx, 50%) var(--ty, -10%),
              rgba(255,255,255,.15), transparent 62%);
  opacity: 0; transition: opacity .8s var(--ease);
}
.tile:hover::after { opacity: 1; }
.tile:hover { transform: translateY(-7px); }

/* the oversized numeral sitting behind the content */
.tile__ghost {
  position: absolute; right: -4px; bottom: -46px; z-index: 0; pointer-events: none;
  font-family: var(--serif); font-weight: 300; font-size: 11.5rem; line-height: 1;
  letter-spacing: -.04em; color: rgba(239, 233, 223, .045);
  transition: transform 1.2s var(--slow), color .8s var(--ease);
}
.tile:hover .tile__ghost { transform: translate(-10px, -14px); color: rgba(239, 233, 223, .10); }
.tile--tax    { background: var(--tile-tax); }
.tile--estate { background: var(--tile-estate); }
.tile--plan   { background: var(--tile-plan); }
.tile--wealth { background: var(--tile-wealth); }

.tile .mono { color: rgba(239,233,223,.62); }
.tile > div { transition: transform .9s var(--slow); }
.tile:hover > div { transform: translateY(-4px); }
.tile h3 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.65rem, 2.2vw, 2.1rem);
  line-height: 1.04; letter-spacing: -.022em; color: var(--ivory); margin: 22px 0 12px;
}
.tile p { color: rgba(239,233,223,.72); font-size: .94rem; margin: 0; max-width: 30ch; }
.tile__go {
  margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ivory); opacity: .8;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap .5s var(--slow), opacity .5s var(--ease);
}
.tile:hover .tile__go { gap: 14px; opacity: 1; }

/* ---- the device module ------------------------------------------------- */
.device {
  background: var(--graphite); border-radius: 16px;
  padding: clamp(34px, 5vw, 80px);
  display: grid; gap: clamp(38px, 5vw, 68px); align-items: center;
  margin-top: clamp(38px, 4.5vw, 56px);
}
@media (min-width: 940px) { .device { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); } }

.phone {
  width: 100%; max-width: 288px; margin-inline: auto;
  aspect-ratio: 293 / 600; position: relative;
  border-radius: 40px; padding: 9px;
  background: linear-gradient(150deg, #3a3a3c, #131313);
  box-shadow: 0 40px 70px -40px rgba(0,0,0,.9);
}
.phone__screen {
  width: 100%; height: 100%; border-radius: 32px; overflow: hidden;
  background: var(--espresso); position: relative;
  display: flex; flex-direction: column;
  padding: 26px 18px 18px;
}
.phone__notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 22px; border-radius: 12px; background: #0b0b0c; z-index: 3;
}
.phone__top { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.phone__top .mono { font-size: 9px; letter-spacing: .16em; }
.phone__hd {
  font-family: var(--serif); font-weight: 300; font-size: 19px; color: var(--ivory);
  margin: 16px 0 4px; letter-spacing: -.01em;
}
.phone__rows { margin-top: 14px; display: grid; gap: 11px; }
.phone__row { border-top: 1px solid var(--line-soft); padding-top: 11px; }
.phone__row b {
  display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 400;
  color: var(--sand); margin-bottom: 7px;
}
.phone__bar { height: 3px; background: rgba(239,233,223,.09); border-radius: 2px; overflow: hidden; }
.phone__bar i { display: block; height: 100%; background: var(--brass); border-radius: 2px;
                transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--slow); }
.device.is-in .phone__bar i { transform: scaleX(1); }
.device.is-in .phone__row:nth-child(2) .phone__bar i { transition-delay: .12s; }
.device.is-in .phone__row:nth-child(3) .phone__bar i { transition-delay: .24s; }
.device.is-in .phone__row:nth-child(4) .phone__bar i { transition-delay: .36s; }
.phone__row span { font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
                   color: var(--taupe); display: block; margin-top: 6px; }
.phone__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* ---- the coordination panel ------------------------------------------- */
.panel { display: grid; gap: 14px; }
@media (min-width: 620px) { .panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel__card {
  background: var(--espresso); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 22px 22px 20px;
}
.panel__card .mono { font-size: 10px; margin-bottom: 14px; }
.panel__card h3 {
  font-family: var(--serif); font-weight: 300; font-size: 1.15rem;
  color: var(--ivory); margin: 0 0 12px; letter-spacing: -.012em;
}
.panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.panel__list li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: .86rem; color: var(--stone);
}
.panel__list i { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; margin-top: 7px; }
.panel__list .ok   { background: #6E8F72; }
.panel__list .due  { background: var(--brass); }
.panel__list .open { background: var(--taupe); }

/* a small allocation read-out, structure not performance */
.alloc { display: grid; gap: 11px; }
.alloc__row { display: grid; grid-template-columns: 1fr 44px; gap: 12px; align-items: center; }
.alloc__row b { font-family: var(--sans); font-size: .84rem; font-weight: 400; color: var(--sand); }
.alloc__track { grid-column: 1 / -1; height: 3px; background: rgba(239,233,223,.08); border-radius: 2px; overflow: hidden; }
.alloc__track i { display: block; height: 100%; background: var(--brass-soft); border-radius: 2px;
                  transform: scaleX(0); transform-origin: left; transition: transform 1.5s var(--slow); }
.device.is-in .alloc__track i { transform: scaleX(1); }
.alloc__row span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
                   color: var(--taupe); text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .ask__rot { opacity: 1 !important; transform: none !important; }
  .phone__bar i, .alloc__track i { transform: scaleX(1) !important; }
  .tile:hover { transform: none; }
}

/* the question markers are real buttons, because auto-rotating text
   must be stoppable */
.ask__dots button {
  /* the button carries a real 34px tap target; the visible bar is the ::after */
  width: 30px; height: 34px; padding: 0; border: 0; cursor: pointer;
  background: transparent; position: relative;
}
.ask__dots button::after {
  content: ""; position: absolute; left: 0; right: 8px; top: 50%; height: 2px;
  background: var(--line); transition: background .5s var(--ease);
}
.ask__dots button.on::after, .ask__dots button:hover::after { background: var(--brass); }
.ask__dots button:focus-visible { outline: 1px solid var(--brass-soft); outline-offset: 6px; }

/* ==========================================================================
   ORIGIN BLEND · REVISION
   Centred hero, tilted device, and three textural track cards, per reference.
   ========================================================================== */

/* ---- centred question hero -------------------------------------------- */
.ask--center { text-align: center; padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 7vw, 100px); }
.ask--center .ask__in { max-width: 1000px; margin-inline: auto; }
.ask--center .ask__who { justify-content: center; }
.ask--center .ask__q { max-width: 17ch; margin-inline: auto; }
.ask--center .ask__sub { margin-inline: auto; text-align: center; max-width: 60ch; }
.ask--center .ask__cta { justify-content: center; }
.ask--center .ask__dots { justify-content: center; }

/* the eyebrow becomes a pill, the way Origin frames its promo line */
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-soft); background: rgba(176,141,87,.10);
  border: 1px solid var(--brass-dim); border-radius: 999px;
  padding: 9px 20px; margin: 0;
}
.chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }

/* ---- the tilted device ------------------------------------------------- */
.stage {
  position: relative; padding: clamp(40px, 6vw, 90px) 0 clamp(20px, 3vw, 40px);
  display: flex; justify-content: center; perspective: 2000px;
}
.stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(760px, 92%); aspect-ratio: 16/10; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214,186,140,.10), transparent 100%);
}
.tilt {
  position: relative; width: min(320px, 78vw);
  transform: rotateX(7deg) rotateY(-21deg) rotateZ(3deg) translateZ(0);
  transform-style: preserve-3d;
  opacity: 0;
  transition: transform 2.2s var(--slow), opacity 1.6s var(--ease);
}
.stage.is-in .tilt { opacity: 1; transform: rotateX(5deg) rotateY(-17deg) rotateZ(2deg); }
@media (max-width: 700px) {
  .tilt { transform: rotateX(4deg) rotateY(-9deg) rotateZ(1deg); }
  .stage.is-in .tilt { transform: rotateX(3deg) rotateY(-7deg) rotateZ(1deg); }
}

.tilt__body {
  border-radius: 44px; padding: 10px;
  background: linear-gradient(145deg, #454547, #17171a 62%);
  box-shadow: 40px 60px 90px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06);
}
.tilt__screen {
  border-radius: 35px; overflow: hidden; background: #FBF9F6;
  aspect-ratio: 300 / 640; display: flex; flex-direction: column;
  padding: 22px 18px 16px; position: relative;
}
.tilt__island {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 22px; border-radius: 12px; background: #0c0c0d; z-index: 4;
}

/* the light portal screen */
.pf { display: flex; flex-direction: column; height: 100%; color: #14100D; }
.pf__bar { display: flex; justify-content: space-between; font-family: var(--mono);
           font-size: 9px; letter-spacing: .1em; color: #6E655C; }
.pf__hd { margin-top: 30px; font-family: var(--mono); font-size: 9.5px;
          letter-spacing: .18em; text-transform: uppercase; color: #8A8078; }
.pf__bal { font-family: var(--serif); font-weight: 300; font-size: 30px;
           letter-spacing: -.02em; margin: 6px 0 2px; color: #14100D; }
.pf__sub { font-family: var(--sans); font-size: 10px; color: #6E655C; }
.pf__chart { margin: 14px -4px 0; }
.pf__chart svg { width: 100%; height: auto; display: block; }
.pf__seg { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-top: 20px; gap: 2px; }
.pf__seg i { display: block; height: 100%; border-radius: 2px; }
.pf__rows { margin-top: 14px; display: grid; gap: 10px; }
.pf__row { display: grid; grid-template-columns: 9px 1fr auto; gap: 9px; align-items: center;
           font-family: var(--sans); font-size: 10.5px; color: #3C342C; }
.pf__row i { width: 7px; height: 7px; border-radius: 2px; }
.pf__row span { font-family: var(--mono); font-size: 9.5px; color: #6E655C; }
.pf__tabs { margin-top: auto; display: flex; justify-content: space-between;
            border-top: 1px solid rgba(20,16,13,.10); padding-top: 12px;
            font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
            text-transform: uppercase; color: #8A8078; }
.pf__tabs b { color: #14100D; font-weight: 500; }

.stage__cap {
  text-align: center; margin-top: clamp(24px, 3vw, 38px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--taupe);
}

/* ---- three textural track cards ---------------------------------------
   These are the only place on the page where we show a working surface, so
   they carry the same treatment as the tiles: a real material (sheen, grain,
   a hairline), light that follows the cursor, and motion that arrives once
   and then stops. Everything inside is illustrative and deliberately shows
   no balances, no returns and no performance of any kind.
   ---------------------------------------------------------------------- */
.track { display: grid; gap: 14px; margin-top: clamp(40px, 5vw, 62px); }
@media (min-width: 900px) { .track { grid-template-columns: repeat(3, 1fr); } }

.track__card {
  border-radius: 14px; overflow: hidden; position: relative; isolation: isolate;
  padding: clamp(20px, 2vw, 26px);
  display: flex; flex-direction: column; gap: 18px;
  min-height: 470px;
  background: var(--graphite);
  box-shadow: 0 1px 0 rgba(239,233,223,.06) inset, 0 18px 44px rgba(0,0,0,.34);
  transition: transform .9s var(--slow), box-shadow .9s var(--slow);
}
/* the ground colour, plus a sheen and a fine grain so it reads as a surface */
.track__card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .94; pointer-events: none;
  background-image:
    linear-gradient(152deg, rgba(255,255,255,.075), transparent 44%),
    linear-gradient(0deg, rgba(0,0,0,.34), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    var(--grad);
  background-blend-mode: normal, normal, overlay, normal;
}
/* light that follows the cursor, exactly as on the tiles */
.track__card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--tx, 50%) var(--ty, -10%),
              rgba(255,255,255,.13), transparent 64%);
  opacity: 0; transition: opacity .8s var(--ease);
}
.track__card:hover::after { opacity: 1; }
.track__card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(239,233,223,.09) inset, 0 30px 60px rgba(0,0,0,.44); }
.track--a { --grad: linear-gradient(168deg, #664C1B, #281D09 78%); }
.track--b { --grad: linear-gradient(168deg, #4E1B1C, #1F0909 78%); }
.track--c { --grad: linear-gradient(168deg, #193B28, #0A1711 78%); }
.track__card > * { position: relative; z-index: 1; }

/* the widget that floats inside each card */
.widget {
  /* grows to fill, so all three cards carry the same panel height and the
     slack lands inside the panel rather than as a hole beneath it */
  flex: 1 1 auto; display: flex; flex-direction: column;
  background: rgba(12, 9, 7, .55); border: 1px solid rgba(239,233,223,.10);
  border-radius: 10px; padding: 18px; backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .8s var(--ease), background .8s var(--ease);
}
.track__card:hover .widget { border-color: rgba(239,233,223,.18); background: rgba(12, 9, 7, .62); }
.widget__hd { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
              text-transform: uppercase; color: var(--brass-soft); margin: 0 0 14px;
              display: flex; align-items: center; gap: 9px; }
/* a small live dot on the section label, breathing slowly rather than blinking */
.widget__hd::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--brass); box-shadow: 0 0 0 0 rgba(176,141,87,.45);
}
.track.is-in .widget__hd::before { animation: pulseDot 4.2s var(--ease) infinite; }
@keyframes pulseDot {
  0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(176,141,87,.40); }
  36%           { box-shadow: 0 0 0 6px rgba(176,141,87,0); }
}
.widget__big { font-family: var(--serif); font-weight: 300; font-size: 1.9rem;
               color: var(--ivory); letter-spacing: -.02em; margin: 0 0 4px; line-height: 1.06; }
.widget__note { font-family: var(--sans); font-size: .78rem; color: var(--stone); margin: 0; }

/* every row inside a widget arrives on its own beat */
.wrow { opacity: 0; transform: translateY(9px);
        transition: opacity .8s var(--slow) var(--d, 0s), transform .8s var(--slow) var(--d, 0s); }
.track.is-in .wrow { opacity: 1; transform: none; }

.wlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.wlist li { display: grid; grid-template-columns: 6px 1fr auto; gap: 10px; align-items: baseline;
            font-size: .8rem; color: var(--sand); }
.wlist i { width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; }
.track.is-in .wlist i { transform: scale(1); }
.wlist .ok { background: #7FA083; } .wlist .due { background: var(--brass); }
.wlist .open { background: var(--taupe); }
.wlist em { font-family: var(--mono); font-style: normal; font-size: 9px;
            letter-spacing: .1em; text-transform: uppercase; color: var(--taupe);
            transition: color .5s var(--ease); }
.track__card:hover .wlist .due ~ em, .track__card:hover .wlist em { color: var(--sand); }

.wbar { display: grid; gap: 9px; margin-top: 14px; }
.wbar__r { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
           font-size: .78rem; color: var(--sand); }
.wbar__r span { font-family: var(--mono); font-size: 9px; color: var(--taupe); }
.wbar__t { grid-column: 1/-1; height: 3px; background: rgba(239,233,223,.1);
           border-radius: 2px; overflow: hidden; position: relative; }
.wbar__t i { display: block; height: 100%; background: var(--brass-soft); border-radius: 2px;
             transform: scaleX(0); transform-origin: left;
             transition: transform 1.4s var(--slow) var(--d, 0s); position: relative; }
.track.is-in .wbar__t i { transform: scaleX(1); }
/* one pass of light along each filled bar, after it has finished drawing */
.wbar__t i::after {
  content: ""; position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-120%);
}
.track.is-in .wbar__t i::after { animation: barSheen 1.5s var(--ease) forwards; animation-delay: calc(var(--d, 0s) + 1.2s); }
@keyframes barSheen { to { transform: translateX(220%); } }

/* the draw-order strip: how the buckets are actually spent down */
.wseq { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(239,233,223,.10); }
.wseq__lab { font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
             text-transform: uppercase; color: var(--taupe); margin: 0 0 11px; }
.wseq ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wseq li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
           font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
           text-transform: uppercase; color: var(--taupe);
           transition: color .7s var(--ease) var(--d, 0s); }
.wseq li b { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
             background: rgba(239,233,223,.10); color: var(--sand); font-size: 8px; font-weight: 500;
             transition: background .7s var(--ease) var(--d, 0s), color .7s var(--ease) var(--d, 0s),
                         box-shadow .7s var(--ease) var(--d, 0s); }
.track.is-in .wseq li { color: var(--sand); }
.track.is-in .wseq li b { background: var(--brass); color: #17120E; box-shadow: 0 0 0 3px rgba(176,141,87,.14); }
.wseq li + li::before { content: "\203A"; color: rgba(239,233,223,.28); margin-right: 1px; font-size: 12px; }

/* a quiet line pinned to the bottom of a widget, so all three panels
   finish at the same place */
.wfoot { margin-top: auto; padding-top: 16px; display: flex; gap: 14px;
         justify-content: space-between; align-items: baseline;
         border-top: 1px solid rgba(239,233,223,.10);
         font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
         text-transform: uppercase; color: var(--taupe); }
.wfoot b { font-weight: 500; color: var(--sand); text-align: right;
           transition: color .6s var(--ease); }
.track__card:hover .wfoot b { color: var(--brass-soft); }

/* the reconciliation ring */
.wring { display: flex; align-items: center; gap: 15px; margin-bottom: 4px; }
.wring svg { width: 58px; height: 58px; flex: none; transform: rotate(-90deg); }
.wring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.wring__bg { stroke: rgba(239,233,223,.10); }
.wring__fg { stroke: var(--brass-soft); stroke-dasharray: 169.6;
             stroke-dashoffset: 169.6; transition: stroke-dashoffset 1.8s var(--slow) .25s; }
.track.is-in .wring__fg { stroke-dashoffset: 56.5; }
.wring .widget__big { font-size: 1.55rem; margin-bottom: 2px; }

/* the planning year: month rail, deadline ticks, and today */
.wcal { margin: 16px 0 4px; }
.wcal__rail { position: relative; height: 3px; border-radius: 2px;
              background: rgba(239,233,223,.10); }
.wcal__rail b { position: absolute; top: -3px; left: var(--p); width: 2px; height: 9px;
                border-radius: 1px; background: var(--brass); opacity: 0;
                transform: scaleY(.3); transform-origin: center;
                transition: opacity .6s var(--ease) var(--d, 0s), transform .6s var(--slow) var(--d, 0s); }
.track.is-in .wcal__rail b { opacity: .85; transform: scaleY(1); }
.wcal__now { position: absolute; top: -5px; left: 0; width: 13px; height: 13px;
             margin-left: -6.5px; border-radius: 50%;
             background: var(--ivory); box-shadow: 0 0 0 4px rgba(239,233,223,.10);
             transition: left 2.2s var(--slow) .5s; }
.track.is-in .wcal__now { left: var(--p, 50%); }
.wcal__m { display: flex; justify-content: space-between; margin-top: 9px;
           font-family: var(--mono); font-size: 8px; letter-spacing: .1em; color: var(--taupe); }

.track__foot h3 { font-family: var(--sans); font-size: .98rem; font-weight: 500;
                  color: var(--ivory); margin: 0 0 6px; letter-spacing: -.01em;
                  transition: color .6s var(--ease); }
.track__foot p { font-size: .86rem; color: rgba(239,233,223,.62); margin: 0; }
.track__card .track__foot { margin-top: auto; }
/* a hairline that draws itself across the foot on hover */
.track__foot { padding-top: 16px; position: relative; }
.track__foot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(239,233,223,.12);
}
.track__foot::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--slow);
}
.track__card:hover .track__foot::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .tilt { opacity: 1 !important; }
  .wbar__t i { transform: scaleX(1) !important; }
  .wbar__t i::after { display: none; }
  .wrow { opacity: 1 !important; transform: none !important; }
  .wlist i { transform: scale(1) !important; }
  .wring__fg { stroke-dashoffset: 56.5 !important; transition: none; }
  .wcal__rail b { opacity: .85 !important; transform: scaleY(1) !important; }
  .wcal__now { left: var(--p, 50%) !important; transition: none; }
  .widget__hd::before { animation: none !important; }
  .track__card, .track__card:hover { transform: none !important; }
}

/* ==========================================================================
   THE QUESTION REEL
   A scroll-snap carousel: native drag and swipe, keyboard reachable, and
   auto-advancing with a real pause control (WCAG 2.2.2).
   ========================================================================== */

.reel { margin-top: clamp(38px, 4.5vw, 58px); }

.reel__vp {
  display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-block: 6px;
  /* side padding is set in site.js once the real widths are known */
  padding-inline: var(--gut);
  margin-inline: calc(var(--gut) * -1);
  cursor: grab;
}
.reel__vp::-webkit-scrollbar { display: none; }
.reel__vp:active { cursor: grabbing; }

.reel__card {
  flex: 0 0 auto; width: min(380px, 78vw);
  scroll-snap-align: center;
  background: var(--graphite);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: clamp(24px, 2.4vw, 32px);
  text-align: left;
  min-height: 250px;
  display: flex; flex-direction: column; gap: 16px;
  opacity: .38; transform: scale(.94);
  transition: opacity .7s var(--ease), transform .7s var(--slow),
              border-color .7s var(--ease), background .7s var(--ease);
}
.reel__card.is-mid {
  opacity: 1; transform: scale(1);
  background: var(--raised); border-color: var(--brass-dim);
}

.reel__who {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-soft); margin: 0;
}
.reel__who i { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }

.reel__q {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.3rem, 1.9vw, 1.62rem); line-height: 1.16;
  letter-spacing: -.018em; color: var(--ivory); margin: 0;
}
.reel__tag {
  margin-top: auto; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--taupe);
}

/* controls */
.reel__ctl {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: clamp(24px, 3vw, 34px); flex-wrap: wrap;
}
.reel__btn {
  width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--line);
  color: var(--sand); font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .5s var(--ease), color .5s var(--ease);
}
.reel__btn:hover { border-color: var(--brass); color: var(--brass-soft); }
.reel__dots { display: flex; gap: 0; }
.reel__dots button {
  width: 26px; height: 34px; padding: 0; border: 0; background: transparent;
  cursor: pointer; position: relative;
}
.reel__dots button::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px;
  background: var(--line); transition: background .5s var(--ease);
}
.reel__dots button[aria-current="true"]::after,
.reel__dots button:hover::after { background: var(--brass); }
.reel__btn:focus-visible, .reel__dots button:focus-visible {
  outline: 1px solid var(--brass-soft); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .reel__vp { scroll-behavior: auto; }
  .reel__card { opacity: 1; transform: none; }
}

/* ---- the figure, made interactive -------------------------------------- */
.fig-hit { fill: transparent; cursor: pointer; }
.fig-node { outline: none; }
.fig-node .fig-dot, .fig-node .fig-label { transition: opacity .9s var(--ease), r .5s var(--slow), fill .5s var(--ease); }
.fig-dot--in.k-plan   { fill: #B08D57; }
.fig-dot--in.k-wealth { fill: #C08E6E; }
.fig-dot--in.k-tax    { fill: #B4685E; }
.fig-dot--in.k-estate { fill: #6E9481; }
.fig-node:hover .fig-dot--in,
.fig-node:focus-visible .fig-dot--in,
.fig-node.on .fig-dot--in { r: 15; }
.fig-node:hover .fig-label--in,
.fig-node:focus-visible .fig-label--in,
.fig-node.on .fig-label--in { fill: #fff; }
.fig-node:focus-visible .fig-hit { stroke: var(--brass-soft); stroke-width: 1; }
.fig-spoke--in { transition: stroke .5s var(--ease), stroke-width .4s var(--ease); }
.fig-spoke--in.on { stroke: var(--brass); stroke-width: 1.6; }

.fig-out {
  max-width: 560px; margin: clamp(18px, 2.4vw, 30px) auto 0; text-align: center;
  min-height: 78px;
}
.fig-out .mono { margin-bottom: 8px; transition: color .4s var(--ease); }
.fig-out p:last-child { color: var(--sand); margin: 0 auto; max-width: 46ch; font-size: .98rem; }

/* ---- anticipation: timing chips on a raised surface -------------------- */
.when {
  background: var(--graphite); border: 1px solid var(--line-soft);
  border-radius: 16px; overflow: hidden;
  margin-top: clamp(38px, 4.5vw, 56px);
}
.when__row {
  display: grid; gap: 14px 34px;
  padding: clamp(28px, 3.2vw, 42px) clamp(24px, 3vw, 44px);
  border-top: 1px solid var(--line-soft); position: relative;
  transition: background .6s var(--ease);
}
.when__row:first-child { border-top: 0; }
.when__row:hover { background: var(--raised); }
.when__row::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 3px; bottom: 0;
  background: var(--brass); transform: scaleY(0); transform-origin: top;
  transition: transform .7s var(--slow);
}
.when__row:hover::before { transform: scaleY(1); }
@media (min-width: 900px) {
  .when__row { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
}
.when__chip {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass-soft); background: rgba(176,141,87,.10);
  border: 1px solid var(--brass-dim); border-radius: 999px; padding: 8px 14px;
  justify-self: start; max-width: 100%;
}
.when__chip i { width: 4px; height: 4px; border-radius: 50%; background: var(--brass); }
.when__row h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.08; letter-spacing: -.024em;
  color: var(--ivory); margin: 0 0 14px;
}
.when__row p { font-size: .98rem; margin: 0; max-width: 62ch; }

@media (prefers-reduced-motion: reduce) { .when__row::before { display: none; } }

/* ==========================================================================
   THE PROMPT
   A question types itself out, the way a client would actually ask it.
   It is a link, not a text field: an input that does nothing is a small
   betrayal, so this one goes somewhere.
   ========================================================================== */

.prompt-wrap { max-width: 720px; margin: clamp(34px, 4vw, 52px) auto 0; }

.prompt {
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-decoration: none; text-align: left;
  background: rgba(239, 233, 223, .045);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 10px 10px clamp(22px, 2.6vw, 30px);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .6s var(--ease), background .6s var(--ease);
}
.prompt:hover { border-color: var(--brass-dim); background: rgba(239, 233, 223, .07); }

.prompt__text {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--sans); font-weight: 350;
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  color: var(--ivory); line-height: 1.5;
  min-height: 1.5em;
  display: flex; align-items: center; gap: 1px;
}
.prompt__caret {
  display: inline-block; width: 1.5px; height: 1.15em; background: var(--brass);
  animation: caret 1.05s steps(1) infinite; flex: 0 0 auto;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.prompt__go {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: var(--brass); color: var(--espresso);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  transition: transform .6s var(--slow), background .5s var(--ease);
}
.prompt:hover .prompt__go { transform: translateY(-2px); background: var(--brass-soft); }

.prompt__meta {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 20px; min-height: 24px;
}
.prompt__by {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-soft); margin: 0;
  opacity: 0; transform: translateY(3px);
  transition: opacity .5s var(--ease), transform .5s var(--slow);
}
.prompt__by.on { transform: none; }
.prompt__by.on { opacity: 1; }
.prompt__pause {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--line-soft); color: var(--taupe);
  font-size: 8px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.prompt__pause:hover { color: var(--brass-soft); border-color: var(--brass-dim); }
.prompt__pause:focus-visible { outline: 1px solid var(--brass-soft); outline-offset: 3px; }

.prompt__tag {
  text-align: center; margin-top: clamp(26px, 3vw, 36px);
  font-family: var(--sans); font-size: clamp(.95rem, 1.2vw, 1.05rem); color: var(--sand);
}

@media (prefers-reduced-motion: reduce) {
  .prompt__caret { animation: none; opacity: 1; }
  .prompt__by { opacity: 1; }
}

/* ==========================================================================
   DISCIPLINE PAGES
   Each of the four gets a coloured arrival that matches the tile you clicked
   to get here, so the colour is doing navigational work rather than decoration.
   ========================================================================== */

.phero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(120px, 15vw, 190px) 0 clamp(62px, 8vw, 96px);
  min-height: clamp(560px, 76svh, 820px);
  display: grid; align-items: center;
}
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(152deg, rgba(255,255,255,.07), transparent 42%),
    linear-gradient(0deg, rgba(0,0,0,.46), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    var(--grad);
  background-blend-mode: normal, normal, overlay, normal;
}
/* a slow bloom of light, so the field is not a flat rectangle of colour */
.phero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -30%; right: -14%; width: 62%; height: 150%;
  background: radial-gradient(closest-side, rgba(255,255,255,.06), transparent 100%);
}
.phero--plan   { --grad: linear-gradient(158deg, #664C1B 4%, #31250C 62%, #1A1206 100%); }
.phero--wealth { --grad: linear-gradient(158deg, #743519 4%, #38190A 62%, #1C0D05 100%); }
.phero--tax    { --grad: linear-gradient(158deg, #4E1B1C 4%, #2A0E0D 62%, #160707 100%); }
.phero--estate { --grad: linear-gradient(158deg, #1D4430 4%, #0D2117 62%, #07120C 100%); }
.phero__in { position: relative; }

.crumb {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(239,233,223,.55);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
}
.crumb a { color: rgba(239,233,223,.55); text-decoration: none; padding: 4px 0;
           transition: color .4s var(--ease); }
.crumb a:hover { color: var(--ivory); }
.crumb b { font-weight: 400; color: var(--brass-soft); }

.phero__t {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.4rem, 5.6vw, 4.5rem); line-height: 1.02; letter-spacing: -.03em;
  color: var(--ivory); margin: clamp(24px, 3vw, 38px) 0 0; max-width: 17ch;
}
.phero__t em { font-style: italic; color: #F3EDE3; }
.phero__l { margin-top: clamp(22px, 2.6vw, 32px); max-width: 54ch; color: rgba(239,233,223,.80); }
.phero__cta { margin-top: clamp(30px, 3.6vw, 44px); display: flex; flex-wrap: wrap; gap: 14px; }

/* the six things this discipline covers, set as a quiet mono index */
.hkeys {
  list-style: none; margin: clamp(38px, 5vw, 62px) 0 0; padding: clamp(20px, 2vw, 26px) 0 0;
  border-top: 1px solid rgba(239,233,223,.16);
  display: grid; gap: 10px 30px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(239,233,223,.58);
}
@media (min-width: 620px) { .hkeys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .hkeys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hkeys li { position: relative; padding-left: 16px; }
.hkeys li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 5px; height: 1px; background: var(--brass);
}

/* ---- text beside a working panel ---------------------------------------- */
.panel { display: grid; gap: clamp(36px, 5vw, 60px); padding-top: 34px; }
@media (min-width: 940px) {
  .panel { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(44px, 6vw, 90px); align-items: start; }
  .panel__v { position: sticky; top: 108px; }
}
.panel__t .h2 { max-width: 17ch; }
.panel__t p { max-width: 46ch; }
/* one card, so it should not sit in a three-column grid */
.track--one { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.track--one .track__card { min-height: 0; }

/* the target tick on an allocation bar */
.wbar__t u {
  position: absolute; top: -3px; width: 1px; height: 9px; margin-left: -.5px;
  background: var(--ivory); opacity: 0; text-decoration: none;
  transition: opacity .6s var(--ease) 1.5s;
}
.track.is-in .wbar__t u { opacity: .8; }

/* ---- the other three ---------------------------------------------------- */
.more { display: grid; gap: 14px; margin-top: clamp(38px, 4.6vw, 58px); }
@media (min-width: 820px) { .more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.more__c {
  position: relative; isolation: isolate; overflow: hidden; text-decoration: none;
  border-radius: 14px; padding: clamp(24px, 2.4vw, 32px);
  min-height: 240px; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(239,233,223,.06) inset;
  transition: transform .9s var(--slow), box-shadow .9s var(--slow);
}
.more__c::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(152deg, rgba(255,255,255,.07), transparent 44%),
    linear-gradient(0deg, rgba(0,0,0,.34), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    var(--grad);
  background-blend-mode: normal, normal, overlay, normal;
}
.more--plan   { --grad: linear-gradient(168deg, #664C1B, #281D09 78%); }
.more--wealth { --grad: linear-gradient(168deg, #743519, #2A1207 78%); }
.more--tax    { --grad: linear-gradient(168deg, #4E1B1C, #1F0909 78%); }
.more--estate { --grad: linear-gradient(168deg, #193B28, #0A1711 78%); }
.more__c:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(239,233,223,.09) inset, 0 26px 54px rgba(0,0,0,.42); }
.more__k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--brass-soft);
}
.more__c h3 {
  font-family: var(--serif); font-weight: 300; font-size: 1.5rem; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ivory); margin: 18px 0 10px;
}
.more__c p { font-size: .9rem; color: rgba(239,233,223,.70); margin: 0; max-width: 32ch; }
.more__go {
  margin-top: auto; padding-top: 24px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ivory); opacity: .82;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap .5s var(--slow), opacity .5s var(--ease);
}
.more__c:hover .more__go { gap: 14px; opacity: 1; }

/* the four sit indented under What We Do in the mobile menu */
.menu__sub { display: grid; padding-left: 18px; border-left: 1px solid var(--line); margin: 2px 0 6px; }
.menu__sub a { font-size: 1rem; color: var(--stone); }

.rise--5 { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .more__c, .more__c:hover { transform: none !important; }
  .wbar__t u { opacity: .8 !important; transition: none; }
}

/* the arrival is two columns on a wide screen: the claim, and the index of
   what the discipline actually covers, so no half of it sits empty */
.phero { padding: clamp(112px, 13vw, 164px) 0 clamp(52px, 6.5vw, 84px);
         min-height: clamp(520px, 70svh, 780px); }
.phero__in { display: grid; gap: clamp(40px, 5vw, 60px); align-items: end; }
@media (min-width: 1040px) {
  .phero__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .58fr); gap: clamp(52px, 6vw, 96px); }
  .phero__r { padding-left: clamp(30px, 3.4vw, 48px); border-left: 1px solid rgba(239,233,223,.18); }
}
.phero__l-t { margin-top: clamp(22px, 2.6vw, 32px); max-width: 50ch; color: rgba(239,233,223,.80); }
.hkeys__lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-soft); margin: 0;
}
.hkeys { margin-top: 20px; padding-top: 0; border-top: 0;
         grid-template-columns: minmax(0, 1fr) !important; gap: 13px;
         font-size: 10.5px; color: rgba(239,233,223,.70); }
.hkeys li { padding-left: 18px; }
.phero__n {
  font-family: var(--serif); font-weight: 300; font-size: 3.4rem; line-height: 1;
  letter-spacing: -.04em; color: rgba(239,233,223,.13); margin: clamp(26px, 3vw, 40px) 0 0;
}

@media (min-width: 1040px) {
  /* the claim needs the room; the index is a margin note, not a column */
  .phero__in { grid-template-columns: minmax(0, 1.34fr) minmax(0, .52fr); }
}
.phero__n { font-size: 2.9rem; margin: 0 0 18px; color: rgba(239,233,223,.16); }
.phero__cta .btn { flex: 0 0 auto; }

/* a panel card takes the colour of the discipline whose page it sits on */
.track--plan   { --grad: linear-gradient(168deg, #664C1B, #281D09 78%); }
.track--wealth { --grad: linear-gradient(168deg, #743519, #2A1207 78%); }
.track--tax    { --grad: linear-gradient(168deg, #4E1B1C, #1F0909 78%); }
.track--estate { --grad: linear-gradient(168deg, #193B28, #0A1711 78%); }

/* the four headlines run to different lengths; this size holds all of them
   to two or three lines without the longest one pushing the buttons under */
.phero__t { font-size: clamp(2.2rem, 4.7vw, 3.75rem); max-width: 20ch; }

/* one button and one quiet link reads better than two competing buttons */
.phero__cta { align-items: center; gap: 12px 26px; }
.phero__alt { border-bottom-color: rgba(239,233,223,.34); color: rgba(239,233,223,.86); }
.phero__alt:hover { border-bottom-color: var(--brass); color: var(--ivory); }

/* ==========================================================================
   DISCIPLINE MARKS
   A measured problem, not a decorative one: two of the four discipline
   colours sat 2.3 ΔE apart under normal vision and 1.8 under deutan
   simulation, which is to say they were the same colour. The hues moved as
   far apart as the brief allows, and every discipline now carries a
   geometric mark as well, so which one you are looking at survives colour
   blindness, greyscale and a phone at minimum brightness.
   ========================================================================== */

.mark {
  width: 22px; height: 22px; flex: none; display: block;
  fill: none; stroke: var(--brass-soft); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .92;
}
.mark--lg { width: 34px; height: 34px; stroke-width: 1.15; }

/* the mark opens the discipline arrival, above the breadcrumb */
.phero__mark { display: block; margin-bottom: clamp(20px, 2.4vw, 30px); }
.phero__mark .mark { stroke: var(--ivory); opacity: .78; }

/* on a tile, the mark sits with the eyebrow */
.tile__head { display: flex; align-items: center; gap: 11px; }
.tile .mark { stroke: rgba(239,233,223,.72); }
.tile:hover .mark { stroke: var(--ivory); }
.tile .mark, .more__c .mark { transition: stroke .6s var(--ease), transform .9s var(--slow); }
.tile:hover .mark, .more__c:hover .mark { transform: translateY(-2px); }

/* on a cross-link card the mark carries the identity and the ordinal
   carries the reading order, so neither has to do both jobs */
.more__k { display: flex; align-items: center; gap: 10px; }
.more__k b { font-weight: 400; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; }

/* ==========================================================================
   THE CREDENTIALS RAIL
   Proof beside the claim, not buried in the footer. Four structural facts,
   each one checkable, which is the only proof a registered adviser may lead
   with. It doubles as the reassurance: this is what "we have you covered"
   looks like when you are not allowed to simply say it.
   ========================================================================== */

.trust { background: var(--graphite); border-block: 1px solid var(--line-soft); }
.trust__in {
  display: grid; gap: clamp(26px, 3vw, 34px);
  padding-block: clamp(38px, 4.4vw, 58px);
}
@media (min-width: 720px)  { .trust__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 48px; } }
@media (min-width: 1080px) { .trust__in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px; } }

.trust__i { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; }
.trust__i .mark { margin-top: 2px; stroke: var(--brass); }
.trust__i p { margin: 0; font-size: .84rem; line-height: 1.62; color: var(--taupe); text-wrap: pretty; }
.trust__i b {
  display: block; font-family: var(--sans); font-weight: 500; font-size: .93rem;
  color: var(--ivory); letter-spacing: -.01em; margin-bottom: 5px;
}
.trust__i a { color: var(--sand); text-decoration: none; border-bottom: 1px solid var(--brass-dim);
              padding-bottom: 1px; transition: border-color .5s var(--ease), color .5s var(--ease); }
.trust__i a:hover { color: var(--ivory); border-bottom-color: var(--brass); }

/* ==========================================================================
   THE RESERVATION
   One sentence, at a size nothing else on the page reaches, lit a word at a
   time as it crosses the reading line. It is the only scroll-scrubbed motion
   on the site, which is what keeps it feeling like a held breath rather than
   another effect.
   ========================================================================== */

.creed { padding: clamp(90px, 13vw, 200px) 0; position: relative; overflow: hidden; }
.creed::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 62% at 50% 50%, rgba(176,141,87,.09), transparent 72%);
}
.creed__lab { position: relative; color: var(--taupe); margin: 0 0 clamp(30px, 3.4vw, 46px); }
.creed__t {
  position: relative; margin: 0; max-width: 22ch;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 5.4vw, 4.4rem); line-height: 1.1; letter-spacing: -.028em;
  text-wrap: balance;
}
.creed__t .sw {
  color: rgba(239, 233, 223, .16);
  transition: color .7s var(--slow), opacity .7s var(--slow);
  display: inline-block;
}
.creed__t .sw.on { color: var(--ivory); }

/* ==========================================================================
   CRAFT PASS
   The details that separate "styled" from "built": every control answers a
   press, headings never strand a word on their own line, and every column of
   figures lines up on the decimal.
   ========================================================================== */

/* ---- pressed states. A control that only responds to hover feels like a
   picture of a control on a touchscreen, where hover does not exist. ------ */
.btn:active,
.tile:active,
.more__c:active,
.track__card:active,
.prompt:active,
.access__c:active { transform: translateY(1px) scale(.995); }
.btn, .prompt, .access__c { transition: color .5s var(--ease), border-color .5s var(--ease),
                                        transform .12s var(--ease); }
.tile:active, .more__c:active, .track__card:active { transition-duration: .12s; }
.link-q:active, .crumb a:active, .foot ul a:active, .nav a:active { opacity: .72; }
.prompt__pause:active, .nav__toggle:active { transform: scale(.94); }

/* ---- text wrapping. `balance` evens the lines of a headline; `pretty`
   stops a single word being left alone at the end of a paragraph. -------- */
h1, h2, h3, .display, .h2, .h3, .phero__t, .creed__t, .ask__q, .widget__big,
.tile h3, .more__c h3, .row h3, .when__row h3, .track__foot h3, .qa summary {
  text-wrap: balance;
}
p, li, dd, .lede, .fine, .small, .qa__body p { text-wrap: pretty; }

/* ---- figures line up. Every place the site shows a number in a column, the
   digits have to occupy the same width or the column visibly wobbles. ---- */
.wbar__r span, .wlist em, .wfoot b, .wcal__m, .wseq li, .reach dd,
.figure text, .track__card, .mono, .crumb, .row__n, .steps__n, .more__k b {
  font-variant-numeric: tabular-nums;
}

/* ---- one more pass on focus. The ring has to clear the surface it sits on,
   including inside a coloured field. ------------------------------------- */
:focus-visible { outline: 2px solid var(--brass-soft); outline-offset: 3px; border-radius: 2px; }
.tile:focus-visible, .more__c:focus-visible, .track__card:focus-visible { outline-offset: 4px; }
.phero a:focus-visible, .tile:focus-visible, .more__c:focus-visible { outline-color: var(--ivory); }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .tile:active, .more__c:active, .track__card:active,
  .prompt:active, .access__c:active,
  .prompt__pause:active, .nav__toggle:active { transform: none; }
}

/* ---- the six things a discipline covers are a list, not a sequence, so the
   marker is a rule rather than an ordinal. Numbering them implied an order
   that does not exist: nobody does cash flow before reserves. The rule earns
   its place by extending into the row on hover. --------------------------- */
.row__tick {
  display: block; width: 22px; height: 1px; margin-top: .68em;
  background: var(--brass); opacity: .55;
  transform-origin: left center;
  transition: transform .8s var(--slow), opacity .6s var(--ease);
}
.row:hover .row__tick { transform: scaleX(1.7); opacity: 1; }
.section--paper .row__tick { background: #8A6A3C; }

/* ==========================================================================
   MOTION GATES
   Two fixes a motion audit asks for. Hover transforms are gated behind a real
   pointer, because on a touchscreen :hover latches after a tap and leaves a
   card stuck in its lifted state. And nothing scales up from literal zero:
   marks that pop out of nothing read as cheap, so they start small instead.
   ========================================================================== */

@media (hover: none) {
  .tile:hover, .more__c:hover, .track__card:hover, .row:hover .row__tick,
  .tile:hover .tile__ghost, .tile:hover > div, .tile:hover .mark,
  .more__c:hover .mark, .steps li:hover .steps__n {
    transform: none;
  }
  .tile:hover::after, .track__card:hover::after { opacity: 0; }
}

.wlist i { transform: scale(.45); opacity: 0;
           transition: transform .5s var(--slow) var(--d, 0s), opacity .4s var(--ease) var(--d, 0s); }
.track.is-in .wlist i { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .wlist i { transform: scale(1) !important; opacity: 1 !important; }
}

/* ==========================================================================
   WEIGHT FLOOR
   Newsreader Light is a display weight. Below roughly 28px it stops reading as
   elegant and starts reading as faint, especially on the warm-paper sections
   where the ink is dark on light. Everything under that size steps up to 400;
   the display sizes keep the Light cut that makes the headlines what they are.
   ========================================================================== */

.row h3,
.more__c h3,
.access b,
.menu a,
.head__meta p,
.panel__card b,
.phone__row b,
.qa summary,
.prose h3 { font-weight: 400; }

/* the reservation is a sentence to be read across four lines, not a headline
   to be glanced at, so it gets the leading a sentence needs */
.creed__t { line-height: 1.18; }

/* ==========================================================================
   THE PLATFORM MODULES
   Nine capabilities is exactly the count that tempts a card grid, and the
   brief bans those. An editorial index carries the same information with less
   furniture, and it stays readable when a name runs long.
   ========================================================================== */

.mods { display: grid; gap: 0; margin-top: clamp(38px, 4.4vw, 58px); }
@media (min-width: 760px)  { .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(34px, 4vw, 64px); } }
@media (min-width: 1120px) { .mods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mod { padding: 22px 0; border-top: 1px solid var(--line); position: relative; }
.mod::after {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--slow);
}
.mod:hover::after { transform: scaleX(1); }
.mod b {
  display: block; font-family: var(--sans); font-weight: 500; font-size: .93rem;
  color: var(--ivory); letter-spacing: -.01em; margin-bottom: 7px;
  transition: color .5s var(--ease);
}
.mod:hover b { color: var(--brass-soft); }
.mod p { margin: 0; font-size: .86rem; line-height: 1.62; color: var(--taupe); max-width: 40ch; }

/* ==========================================================================
   THE PRICE LADDER
   Three tiers that ascend, so the layout ascends: each one indents a little
   further and its rule runs a little longer. Prices are set in the display
   serif with tabular figures, so the column of numbers lines up on the dollar
   sign instead of drifting.
   ========================================================================== */

.tiers { margin-top: clamp(38px, 4.4vw, 58px); display: grid; gap: 0; }
.tier {
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--paper-line);
  display: grid; gap: 14px;
}
.tier:last-child { border-bottom: 1px solid var(--paper-line); }
@media (min-width: 900px) {
  .tier { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(36px, 4vw, 72px); align-items: start; }
  /* The ladder indents the name and the description, never the price.
     Moving the whole rung would carry the price column with it, and a column
     of figures that does not line up is the one thing tabular numerals exist
     to prevent. */
  .tier:nth-child(2) h3, .tier:nth-child(2) .tier__w { margin-left: 34px; }
  .tier:nth-child(3) h3, .tier:nth-child(3) .tier__w { margin-left: 68px; }
  .tier__h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .tier__p { justify-self: end; }
}

.tier__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.tier h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.62rem);
  line-height: 1.15; letter-spacing: -.015em; color: var(--paper-ink); margin: 0;
}
.tier__p { margin: 0; display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.tier__from {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #7A5C31;
}
.tier__p b {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  letter-spacing: -.03em; color: var(--paper-ink);
  font-variant-numeric: tabular-nums lining;
}
.tier__w { grid-column: 1; margin: 0; font-size: .95rem; color: var(--paper-2); max-width: 42ch; }
@media (min-width: 900px) { .tier__h { grid-column: 1; } .tier__w { grid-row: 2; } .tier__l { grid-column: 2; grid-row: 1 / span 2; } }

.tier__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; align-content: start; }
.tier__l li {
  position: relative; padding-left: 20px;
  font-size: .88rem; line-height: 1.5; color: var(--paper-2);
}
.tier__l li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: #8A6A3C;
}

/* what every tier gets, stated once instead of repeated down three columns */
.tier__all {
  margin-top: clamp(30px, 3.4vw, 44px);
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--paper-line); border-radius: 12px;
  background: rgba(23, 18, 14, .035);
}
.tier__all p { margin: 0; font-size: .93rem; line-height: 1.7; color: var(--paper-2); max-width: 74ch; }
.tier__all b { color: var(--paper-ink); font-weight: 500; }

/* ==========================================================================
   WHO THIS HELPS MOST
   Three audiences, one panel. A switch rather than three columns, because the
   visitor is one of these three and should be able to say which — and because
   three static columns would be the boxed card grid the brief rules out.
   ========================================================================== */

.who { margin-top: clamp(40px, 4.6vw, 62px); }

.who__ts {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.who__t {
  appearance: none; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--taupe);
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 18px;
  transition: color .5s var(--ease), border-color .5s var(--ease),
              background .5s var(--ease), transform .12s var(--ease);
}
.who__t:hover { color: var(--sand); border-color: var(--brass-dim); }
.who__t:active { transform: translateY(1px); }
.who__t[aria-selected="true"] {
  color: var(--espresso); background: var(--brass-soft); border-color: var(--brass-soft);
}

.who__p { padding-top: clamp(28px, 3.2vw, 40px); }
.who__p--in { animation: whoIn .7s var(--slow) both; }
@keyframes whoIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.who__who {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.14; letter-spacing: -.02em;
  color: var(--ivory); margin: 0;
}
.who__sit { margin: 16px 0 0; max-width: 58ch; color: var(--sand); font-size: 1rem; }
.who__lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-soft);
  margin: clamp(28px, 3vw, 38px) 0 14px;
}
.who__l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.who__l li {
  font-family: var(--sans); font-size: .82rem; color: var(--sand);
  border: 1px solid rgba(239,233,223,.14); border-radius: 999px;
  padding: 8px 14px; background: var(--raised);
}
.who__line {
  margin: clamp(28px, 3vw, 38px) 0 0; max-width: 54ch;
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--stone);
  padding-left: 20px; border-left: 1px solid var(--brass-dim);
}

/* ---- how the agent works: what goes in, what comes out, where it lives --- */
.agent__how { display: grid; gap: 0; margin-top: clamp(44px, 5vw, 70px); }
@media (min-width: 880px) { .agent__how { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(30px, 3.4vw, 56px); } }

.how__c { padding: 24px 0; border-top: 1px solid var(--line); }
.how__lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--taupe); margin: 0 0 14px;
}
.how__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.how__l li {
  position: relative; padding-left: 18px;
  font-size: .88rem; color: var(--sand);
}
.how__l li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--brass);
}
.how__p { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--sand); }
.how__c--trust { border-top-color: var(--brass-dim); }

@media (prefers-reduced-motion: reduce) {
  .who__p--in { animation: none; }
}

/* ==========================================================================
   HOW THE PLAN GETS BUILT
   Three commitments, then the evidence for the middle one. The receipts grid
   is the whole argument of this page made visible: a plan you can audit reads
   differently from a plan you have to trust.
   ========================================================================== */

.proms { display: grid; gap: 0; margin-top: clamp(38px, 4.4vw, 58px); }
.prom {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 18px;
  padding: clamp(24px, 2.8vw, 34px) 0; border-top: 1px solid var(--line);
  position: relative;
}
.proms .prom:last-child { border-bottom: 1px solid var(--line); }
.prom::after {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--slow);
}
.prom:hover::after { transform: scaleX(1); }
.prom__n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--brass);
  padding-top: .42em; transition: color .5s var(--ease), transform .8s var(--slow);
}
.prom:hover .prom__n { color: var(--brass-soft); transform: translateX(3px); }
.prom h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.18rem, 1.9vw, 1.5rem); line-height: 1.18; letter-spacing: -.015em;
  color: var(--ivory); margin: 0 0 10px;
}
.prom p { margin: 0; font-size: .95rem; color: var(--sand); max-width: 62ch; }

/* ---- the receipts ------------------------------------------------------ */
.trace { margin-top: clamp(52px, 6vw, 84px); display: grid; gap: clamp(30px, 3.6vw, 48px); }
@media (min-width: 1000px) {
  .trace { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 5vw, 76px); align-items: start; }
  .trace__t { position: sticky; top: 108px; }
}
.trace__lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-soft); margin: 0 0 16px;
}
.trace__t h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.12; letter-spacing: -.022em;
  color: var(--ivory); margin: 0 0 18px; max-width: 18ch;
}
.trace__t p { margin: 0; font-size: .95rem; color: var(--taupe); max-width: 40ch; }

.trace__g { display: grid; gap: 0; }
.tr {
  padding: 18px 0; border-top: 1px solid var(--line);
  display: grid; gap: 11px;
}
.trace__g .tr:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 680px) {
  .tr { grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; }
}
.tr__f {
  margin: 0; font-family: var(--sans); font-size: .96rem; color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.tr__s { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
@media (min-width: 680px) { .tr__s { justify-content: flex-end; } }
.tr__s li {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--taupe); border: 1px solid rgba(239,233,223,.12); border-radius: 999px;
  padding: 6px 10px; white-space: nowrap;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.tr:hover .tr__s li { color: var(--sand); border-color: var(--brass-dim); }

/* ---- one document, six areas ------------------------------------------- */
.covers { margin-top: clamp(44px, 5vw, 70px); padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--line); }
.covers__lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--taupe); margin: 0 0 18px;
}
.covers__l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.covers__l li {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1rem, 1.6vw, 1.22rem);
  color: var(--ivory); letter-spacing: -.01em;
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--raised);
}

/* ==========================================================================
   WHAT THE MACHINE DOES, AND WHAT IT DOES NOT
   Three steps on warm paper. The third is the one that matters, so it is the
   only one that carries the accent.
   ========================================================================== */

.arch {
  margin-top: clamp(40px, 4.6vw, 60px);
  padding-top: clamp(28px, 3vw, 38px); border-top: 1px solid var(--paper-line);
}
.arch__lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #7A5C31; margin: 0 0 20px;
}
.arch__row { display: grid; gap: 12px; }
@media (min-width: 820px) { .arch__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.arch__s {
  padding: 20px 22px; border: 1px solid var(--paper-line); border-radius: 12px;
  position: relative;
}
.arch__s b {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: #7A5C31; margin-bottom: 10px;
}
.arch__s span { font-size: .92rem; line-height: 1.6; color: var(--paper-2); }
.arch__s--key { border-color: #8A6A3C; background: rgba(176, 141, 87, .07); }
.arch__s--key b { color: #6B4A20; }
.arch__s--key span { color: var(--paper-ink); }
/* the arrow between steps, on wide screens only */
@media (min-width: 820px) {
  .arch__s + .arch__s::before {
    content: "\203A"; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
    color: #A08A6A; font-size: 15px;
  }
}
.arch__note { margin: 20px 0 0; font-size: .9rem; line-height: 1.7; color: var(--paper-2); max-width: 72ch; }

/* ==========================================================================
   THE INVESTMENT UNIVERSE
   Seven categories, each with a use list and a risk note. Reference content
   people scan and open what applies to them, so an accordion is the honest
   form — and <details> works with no JavaScript at all, which matters for a
   page a prospect might print or read on a bad connection.
   ========================================================================== */

.uni { margin-top: clamp(38px, 4.4vw, 58px); }
.uni__i { border-top: 1px solid var(--line); position: relative; }
.uni .uni__i:last-of-type { border-bottom: 1px solid var(--line); }
.uni__i::after {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--slow);
}
.uni__i:hover::after, .uni__i[open]::after { transform: scaleX(1); }

.uni__i summary {
  list-style: none; cursor: pointer; position: relative;
  padding: clamp(22px, 2.6vw, 30px) 52px clamp(22px, 2.6vw, 30px) 0;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px;
  align-items: start;
}
.uni__i summary::-webkit-details-marker { display: none; }
.uni__n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--brass);
  padding-top: .5em; font-variant-numeric: tabular-nums;
  transition: color .5s var(--ease), transform .8s var(--slow);
}
.uni__i:hover .uni__n, .uni__i[open] .uni__n { color: var(--brass-soft); transform: translateX(3px); }
.uni__h b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.18rem, 1.9vw, 1.5rem); line-height: 1.16; letter-spacing: -.015em;
  color: var(--ivory); margin-bottom: 8px;
  transition: color .5s var(--ease);
}
.uni__i:hover .uni__h b { color: var(--brass-soft); }
.uni__h i { font-style: normal; font-size: .93rem; color: var(--taupe); max-width: 64ch; display: block; }

/* the open/close mark, same language as the questions elsewhere */
.uni__i summary::before, .uni__i summary::after {
  content: ""; position: absolute; right: 8px; top: clamp(32px, 3.4vw, 42px);
  background: var(--brass); transition: transform .6s var(--slow), opacity .4s var(--ease);
}
.uni__i summary::before { width: 14px; height: 1px; }
.uni__i summary::after { width: 1px; height: 14px; margin-top: -6.5px; right: 14.5px; }
.uni__i[open] summary::after { transform: rotate(90deg); opacity: 0; }

.uni__b { padding: 0 clamp(0px, 6vw, 90px) clamp(26px, 3vw, 34px) 56px; }
@media (max-width: 620px) { .uni__b { padding-left: 0; } }
.uni__c {
  margin: 22px 0 0; padding-left: 18px; border-left: 1px solid var(--brass-dim);
  font-size: .9rem; line-height: 1.7; color: var(--taupe); max-width: 68ch;
}

/* ---- a compact multi-column list, for the long factor inventories ------- */
.cols { list-style: none; margin: 0; padding: 0; column-gap: clamp(28px, 3.4vw, 52px); }
@media (min-width: 640px)  { .cols { columns: 2; } }
@media (min-width: 1040px) { .cols { columns: 3; } }
.cols li {
  break-inside: avoid; position: relative; padding: 6px 0 6px 18px;
  font-size: .89rem; line-height: 1.5; color: var(--sand);
}
.cols li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 8px; height: 1px; background: var(--brass); opacity: .7;
}
.cols__lab { color: var(--taupe); margin-bottom: 16px; }
.section--paper .cols li { color: var(--paper-2); }
.section--paper .cols li::before { background: #8A6A3C; }
.section--paper .cols__lab { color: #7A5C31; }
.section--paper .mod { border-top-color: var(--paper-line); }
.section--paper .mod b { color: var(--paper-ink); }
.section--paper .mod p { color: var(--paper-2); }
.section--paper .mod:hover b { color: #6B4A20; }
.section--paper .mod::after { background: #8A6A3C; }

/* ==========================================================================
   THE ARRIVAL, REBUILT
   Diagnosis first, because two of these were bugs rather than taste.
   1. The markup said .ask--center and the stylesheet said .ask--centre, so
      every centring rule was dead and the hero rendered left-aligned with a
      third of the frame empty. That is what read as unfinished.
   2. The question bar was a flex row with an unwrapped child, so any question
      longer than the pill got sliced mid-word.
   The rest is composition: a hero has one job, and this one was carrying six
   stacked elements. The chip, the second button and the caption are gone.
   ========================================================================== */

.ask--center {
  min-height: clamp(620px, 92svh, 940px);
  display: grid; align-content: center;
  padding: clamp(96px, 12vw, 150px) 0 clamp(72px, 9vw, 120px);
}

/* ---- the facade -------------------------------------------------------
   Not a photograph of a building, because we do not have one and inventing a
   city is not something we will do. This is architecture as light: three
   ranks of mullions at different depths, a low sun, and a floor. It comes up
   on load the way house lights do, then drifts slowly enough that you notice
   it only if you sit still.
   -------------------------------------------------------------------- */

.facade { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.facade__l {
  position: absolute; inset: -10% -30%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 58%, transparent 92%);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 58%, transparent 92%);
  opacity: 0;
  animation: facadeUp 2.2s var(--slow) forwards;
}
/* three depths: the far rank is dense and dim, the near rank is wide and bright */
.facade__l--far {
  background-image: repeating-linear-gradient(90deg,
    rgba(239,233,223,.052) 0 1px, transparent 1px 46px);
  animation-delay: .15s;
}
.facade__l--mid {
  background-image: repeating-linear-gradient(90deg,
    rgba(239,233,223,.075) 0 1px, transparent 1px 137px);
  animation-delay: .35s;
}
.facade__l--near {
  background-image: repeating-linear-gradient(90deg,
    rgba(214,186,140,.115) 0 2px, transparent 2px 389px);
  animation-delay: .55s;
}
@keyframes facadeUp { to { opacity: 1; } }

/* the drift is deliberately below the threshold of noticing */
@media (prefers-reduced-motion: no-preference) {
  .facade__l--far  { animation: facadeUp 2.2s var(--slow) .15s forwards, drift 240s linear infinite; }
  .facade__l--mid  { animation: facadeUp 2.2s var(--slow) .35s forwards, drift 360s linear infinite reverse; }
  .facade__l--near { animation: facadeUp 2.2s var(--slow) .55s forwards, drift 520s linear infinite; }
}
@keyframes drift { to { transform: translate3d(-389px, 0, 0); } }

/* a low sun that catches the mullions from the upper left */
.facade__sun {
  position: absolute; top: -32%; left: -14%; width: 86%; height: 130%;
  background: radial-gradient(closest-side,
    rgba(214,186,140,.16), rgba(176,141,87,.05) 52%, transparent 100%);
  opacity: 0; animation: facadeUp 2.6s var(--slow) .2s forwards;
}
/* the ground the whole frame sits on, so the hero is never flat black */
.facade__floor {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 76% at 50% 118%, rgba(176,141,87,.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, transparent 26%, transparent 66%, rgba(0,0,0,.46) 100%);
}

.ask__in { position: relative; z-index: 1; }

/* ---- type ------------------------------------------------------------- */
.ask--center .ask__q { max-width: 19ch; letter-spacing: -.032em; }
.ask--center .ask__sub { max-width: 56ch; color: var(--sand); }
.ask--center .ask__cta { align-items: center; gap: 14px 30px; margin-top: clamp(34px, 4vw, 48px); }
.ask__alt { border-bottom-color: rgba(239,233,223,.3); color: var(--sand); }
.ask__alt:hover { border-bottom-color: var(--brass); color: var(--ivory); }

/* buttons: .16em uppercase at 12px was crowding into the wide-tracked look
   that dates a page. Slightly tighter, slightly larger, same shape. */
.btn { font-size: 12.5px; letter-spacing: .11em; padding: 17px 28px; gap: 12px; }

/* ---- the question bar -------------------------------------------------
   The clipping fix is the display change: a block wraps, a flex row does
   not. Height is reserved for two lines so the bar never jumps as the
   sentence grows.
   -------------------------------------------------------------------- */
.prompt-wrap { max-width: 660px; }
.prompt__eyebrow {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--taupe); margin: 0 0 14px; text-align: center;
}
.prompt { align-items: flex-start; padding: 16px 16px 16px clamp(22px, 2.6vw, 28px); border-radius: 18px; }
.prompt__text {
  display: block; min-width: 0;
  font-size: clamp(.92rem, 1.35vw, 1.04rem); line-height: 1.55;
  min-height: 3.1em; padding-top: 9px;
  overflow-wrap: break-word;
}
.prompt__caret { vertical-align: -.16em; margin-left: 1px; }
.prompt__go { width: 42px; height: 42px; font-size: 15px; align-self: flex-start; }
.prompt:hover .prompt__go { transform: translate(3px, -1px); }

/* ---- the scroll cue ---------------------------------------------------- */
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(26px, 3.4vw, 44px); z-index: 1;
  transform: translateX(-50%);
  width: 34px; height: 46px; display: grid; place-items: center;
}
.scroll-cue__l {
  width: 1px; height: 34px; background: linear-gradient(to bottom, transparent, var(--brass));
  transform-origin: top center;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue__l { animation: cue 3.4s var(--ease) 1.6s infinite; }
}
@keyframes cue {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  45%      { transform: scaleY(1);   opacity: 1; }
  80%      { transform: scaleY(.35); opacity: .35; }
}
.scroll-cue:focus-visible { outline: 1px solid var(--brass-soft); outline-offset: 4px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .facade__l, .facade__sun { opacity: 1; animation: none; }
}

/* ---- fold budget -------------------------------------------------------
   The question bar is the most distinctive thing we own and it had dropped
   below the fold once the hero was centred. Everything here buys it back:
   the headline holds two lines instead of three, the gaps tighten, and the
   frame stops just short of a full viewport so there is always something
   visibly below it.
   -------------------------------------------------------------------- */
.ask--center {
  min-height: clamp(600px, 86svh, 880px);
  padding: clamp(84px, 9.5vw, 122px) 0 clamp(58px, 6vw, 84px);
}
.ask--center .ask__q {
  font-size: clamp(2.05rem, 4.55vw, 3.95rem);
  line-height: 1.06; max-width: 27ch; margin-top: 0;
}
.ask--center .ask__sub {
  margin-top: clamp(20px, 2.2vw, 28px); max-width: 54ch;
  font-size: clamp(.98rem, 1.15vw, 1.06rem);
}
.ask--center .ask__cta { margin-top: clamp(26px, 3vw, 36px); }
.prompt-wrap { margin-top: clamp(30px, 3.4vw, 44px); }
.prompt__eyebrow { margin-bottom: 11px; }
.prompt__text { min-height: 2.9em; padding-top: 6px; }
.prompt__meta { margin-top: 12px; }

/* the bar holds two lines of room but centres whatever it has, so a short
   question does not sit stranded at the top of an empty box */
.prompt { align-items: center; }
.prompt__text { padding-top: 0; display: flex; align-items: center; flex-wrap: wrap; }
.prompt__go { align-self: center; }

/* a photograph drops in here the day there is one to drop in: set the custom
   property on .facade and the light field becomes its overlay rather than the
   whole picture. Nothing else has to change. */
.facade[style*="--photo"]::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--photo); background-size: cover; background-position: center;
  opacity: .42; filter: saturate(.7) contrast(1.05);
}
.facade[style*="--photo"] .facade__floor {
  background:
    radial-gradient(120% 76% at 50% 118%, rgba(176,141,87,.10), transparent 62%),
    linear-gradient(180deg, rgba(20,16,13,.72) 0%, rgba(20,16,13,.42) 32%, rgba(20,16,13,.58) 70%, rgba(20,16,13,.88) 100%);
}

/* ==========================================================================
   MOTION TIMING
   An audit of every interactive transition found eleven selectors running
   between 400ms and 700ms. Hover and press are the most frequently seen
   motion on any site: a person triggers them dozens of times a visit, and at
   that frequency slow reads as sluggish rather than as calm. The brief asks
   for unhurried, and that still holds for the rare motion, the scroll
   reveals and the ambient light. Feedback is a different job and gets a
   different budget: 120ms for a press, 160 to 220ms for a hover.

   The easing token moved too. --ease was cubic-bezier(.4, 0, .2, 1), which
   is Material's standard curve and too weak to read as deliberate at these
   durations. The replacement is a real ease-out.
   ========================================================================== */

:root {
  --ease: cubic-bezier(.23, 1, .32, 1);   /* strong ease-out, for UI feedback */
  --press: cubic-bezier(.3, 0, .1, 1);    /* short, for the pressed state */
}

/* buttons: the fill sweep was 700ms, which meant the colour was still
   arriving well after the cursor had settled */
.btn { transition: color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--press); }
.btn::before { transition: transform .26s var(--ease); }
.btn__arrow { transition: transform .2s var(--ease); }

/* the question bar and its controls */
.prompt { transition: border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--press); }
.prompt__go { transition: transform .2s var(--ease), background .2s var(--ease); }
.prompt__pause { transition: color .16s var(--ease), border-color .16s var(--ease), transform .12s var(--press); }
.prompt__by { transition: opacity .3s var(--ease), transform .3s var(--ease); }

/* accordions: the plus-to-minus mark is feedback, not choreography */
.qa summary { transition: color .16s var(--ease); }
.qa summary::before, .qa summary::after { transition: transform .22s var(--ease), opacity .16s var(--ease); }
.uni__i summary::before, .uni__i summary::after { transition: transform .22s var(--ease), opacity .16s var(--ease); }
.uni__i:hover .uni__h b, .uni__i[open] .uni__h b { transition: color .16s var(--ease); }

/* cards and rows: the lift can stay unhurried, the colour cannot */
.tile, .more__c, .track__card { transition: transform .34s var(--ease), box-shadow .34s var(--ease); }
.tile .mark, .more__c .mark { transition: stroke .18s var(--ease), transform .28s var(--ease); }
.tile__go, .more__go { transition: gap .22s var(--ease), opacity .18s var(--ease); }
.row::before, .mod::after, .prom::after, .uni__i::after, .track__foot::after { transition: transform .34s var(--ease); }
.row .row__n, .row .row__note, .row__tick, .prom__n, .uni__n {
  transition: color .18s var(--ease), transform .28s var(--ease), opacity .18s var(--ease);
}
.link-q, .crumb a, .foot ul a, .nav a, .reach dd a, .trust__i a {
  transition: color .16s var(--ease), border-color .16s var(--ease), opacity .12s var(--press);
}
.steps li { transition: border-color .2s var(--ease); }
.steps__n { transition: color .18s var(--ease), transform .28s var(--ease); }
.who__t { transition: color .18s var(--ease), border-color .18s var(--ease),
                      background .18s var(--ease), transform .12s var(--press); }

@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
}

/* ---- inner-page arrivals -----------------------------------------------
   The homepage earns a full viewport because it has a facade, a headline, a
   subhead, an action and the question bar. An inner page carrying a heading
   and three lines does not, and at the same height it read as an unfinished
   frame rather than as restraint. Height now follows content, and the light
   is pulled in tighter so it falls behind the words instead of off the edge.
   -------------------------------------------------------------------- */
.arrival__grid { padding: clamp(38px, 4.6vw, 68px) 0 clamp(34px, 4vw, 58px); }
.arrival .display { max-width: 20ch; }
.arrival .lede { max-width: 54ch; }
.arrival::before { top: -26%; left: -10%; width: 74%; height: 118%; }
.arrival::after {
  background-image: repeating-linear-gradient(
    to right, rgba(239,233,223,.045) 0 1px, transparent 1px 148px);
}

/* the viewport min-height belongs to the homepage arrival, which has a facade
   and five elements to fill it. An inner page has a heading and a lede, so it
   sizes to what it actually contains. */
@media (min-width: 940px) {
  .arrival__grid { min-height: 0; }
}

/* ==========================================================================
   EMPHASIS INSIDE BODY COPY
   The headline emphasises with the serif italic. A lede is set in the sans,
   where dropping into italic serif mid-sentence reads as an accident rather
   than a decision. So emphasis here is light and warm instead: the phrase
   steps up one weight and brightens from sand to ivory, which on a dark
   ground reads the way a raised voice does in a quiet room. One phrase per
   paragraph. Two would cancel each other out.
   ========================================================================== */

.lede strong, .ask__sub strong {
  font-weight: 500; color: var(--ivory);
  letter-spacing: -.004em;   /* the heavier cut sets slightly wide; pull it back */
}
.section--paper .lede strong { color: var(--paper-ink); }

/* the hook carries more weight than a standard lede, so it is set a step
   larger and given the room to breathe that a first impression deserves */
.ask--center .ask__sub {
  font-size: clamp(1.02rem, 1.28vw, 1.18rem);
  line-height: 1.62; max-width: 58ch; color: var(--sand);
}

/* `pretty` only protects the last line; on a four-line hook the whole rag
   matters, and `balance` evens every line instead of rescuing one. Short
   enough here that browsers will honour it. */
.ask--center .ask__sub { text-wrap: balance; max-width: 52ch; }

/* The byline used to be a label ("Asked by a surgeon") and wore uppercase and
   wide tracking accordingly. It is a sentence now, and a sentence set in
   tracked caps reads as shouting. Sentence case, normal tracking, and the
   sand ink that the rest of the quiet copy uses. */
.prompt__by {
  text-transform: none; letter-spacing: .01em;
  font-size: 12px; color: var(--stone);
  font-family: var(--sans); font-weight: 350;
}

/* ==========================================================================
   THE FOOTER, RECEDING
   It was 1,204px tall and the legal block alone was 438px of dense grey text
   closing every page. A footer is where a visitor confirms a detail, not
   where the site makes its last argument, so the whole thing steps back: the
   columns tighten, the type drops a step, and the four paragraphs of
   regulatory language collapse behind one quiet line.

   What stays visible is the part a person is actually meant to read: the
   registration, and that investing can lose money. Nothing is removed, and
   nothing is hidden from a crawler or a screen reader. It is one click, on
   the same page, which is how every adviser site worth reading handles it.
   ========================================================================== */

.foot { padding: clamp(46px, 5vw, 68px) 0 34px; }
.foot__top { gap: 34px; }
@media (min-width: 900px) { .foot__top { gap: 36px; } }
.foot img { height: 19px; }
.foot .foot__label { font-size: 10px; letter-spacing: .2em; margin-bottom: 13px; color: var(--taupe); }
.foot ul { gap: 3px; }
.foot ul a { font-size: .86rem; padding: 4px 0; color: var(--stone); }
.foot .small { font-size: .8rem; color: var(--taupe); margin-top: 18px; }

.foot__legal {
  margin-top: clamp(34px, 3.6vw, 50px); padding-top: 24px;
  font-size: 12px; line-height: 1.72; max-width: 88ch;
}
.foot__legal-lead { margin: 0; color: var(--taupe); }

/* one line, styled as a control rather than as a heading, so it reads as
   something you may open rather than something shouting to be read */
.foot__more { margin-top: 14px; }
.foot__more summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--taupe); padding: 6px 0;
  transition: color .16s var(--ease);
}
.foot__more summary::-webkit-details-marker { display: none; }
.foot__more summary::after {
  content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .22s var(--ease);
}
.foot__more[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.foot__more summary:hover { color: var(--sand); }
.foot__more summary:focus-visible { outline: 1px solid var(--brass-soft); outline-offset: 4px; border-radius: 2px; }
.foot__more-body { padding-top: 8px; }
.foot__more-body p { margin: 0 0 .95em; color: var(--taupe); max-width: 88ch; }
.foot__more-body p:last-child { margin-bottom: 0; }

.foot__base { margin-top: 26px; font-size: 10px; letter-spacing: .16em; color: var(--taupe); opacity: .8; }

/* the byline reads as an attribution now, so it is set like one: a short
   brass rule, then the archetype in the editorial serif */
.prompt__by {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 15px; letter-spacing: 0; color: var(--sand);
  display: inline-flex; align-items: center; gap: 12px;
}
.prompt__by::before {
  content: ""; width: 22px; height: 1px; background: var(--brass); flex: none;
}