/* HeyFi. Engraved direction, ported from the "HeyFi Homepage Directions" canvas
   (C. Engraved desktop boards, C. Mobile phone boards). Shared with F'd Up Wealth.

   Signal Blue is used to create a signal. How much depends on what the
   composition needs.

   The site's Content-Security-Policy blocks inline styles, so every rule lives
   here. Nothing on the page carries a style="" attribute.

   Phone layout is the base. Tablet (768px) keeps the phone structure on a
   wider measure. Desktop layouts start at 1200px, where the side-by-side rows
   have room to breathe. */

:root {
  --ink: #0B0F1A;
  --paper: #F2F4F8;
  --slate: #8E9BB3;
  --signal: #3B7DD8;
  --muted: #4A5670;        /* slate deepened for body text on paper */
  --muted-dark: #C7CFDD;   /* secondary text on ink */
  --rule-dark: #3A4560;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pad: 16px;
  --max: 1248px;
}

/* Fonts are served from this site, not Google's: faster first paint, and no
   visitor's browser contacts Google just to read the page. Subset to Latin,
   variable weight (Playfair 400 to 700, Inter 400 to 600). Built by
   scripts/build-fonts.md. If a file changes, change its name too, because
   /fonts/ is cached for a year. Licences: /fonts/OFL-*.txt */
@font-face { font-family: "Playfair Display"; src: url(/fonts/playfair.woff) format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(/fonts/playfair-italic.woff) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter.woff) format("woff"); font-weight: 400 600; font-style: normal; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper) url(/paper.svg?v=2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
p { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--signal); }
img, svg { display: block; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--paper); color: var(--ink); padding: 0.5rem 1rem; z-index: 20; }

.it { font-style: italic; }
.sig { color: var(--signal); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; }

/* The dark bands: ink with a fine slate hatch. The footer is solid ink. */
.band {
  background-color: var(--ink);
  background-image: url(/hatch.svg);
  color: var(--paper);
}

.sec { padding: 56px var(--pad) 64px; }
.sec.band { padding: 64px var(--pad) 72px; }

/* Text links: the rule draws in from the left on hover, like a line being cut. */
.rule-link, .sign-link, .foot-link, .q-name {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--rule-color, currentColor), var(--rule-color, currentColor));
  background-size: 0 1px, var(--rule-base, 100%) 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.35s ease;
  padding-bottom: 2px;
}
.nav-main .rule-link { --rule-base: 0%; }
.nav-main .nav-cta { --rule-base: 100%; }
.rule-link:hover, .sign-link:hover, .foot-link:hover, .q-name:hover { background-size: 100% 1px, var(--rule-base, 100%) 1px; }
@media (prefers-reduced-motion: reduce) { .rule-link, .sign-link, .foot-link, .q-name { transition: none; } }

/* Seals: the roman numeral in a double ring, with the section label beside it. */
.seal-row { display: flex; align-items: center; gap: 14px; }
.seal {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%; border: 3px double currentColor;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 20px; line-height: 1;
}
/* Section labels in Playfair's own small capitals. Sentence case in the HTML, so each line opens on a full capital. */
.seal-label { font-family: var(--serif); font-variant-caps: small-caps; font-size: 14px; letter-spacing: 0.04em; color: var(--muted); line-height: 1.5; }
.band .seal { border-color: var(--slate); }
.band .seal-label { color: var(--paper); }

.prose { display: flex; flex-direction: column; gap: 18px; }
.prose .seal-row { margin-bottom: 6px; }
.gap { margin-top: 12px; }

.double-rule { width: 90px; border-top: 3px double var(--slate); }

/* ------------------------------------------------------------ header */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.brand { display: block; line-height: 0; color: var(--ink); background: none; }
.brand:hover { color: var(--ink); }
.site-header .wordmark { height: 34px; width: auto; }
.nav-main { display: none; }
.nav-menu { position: relative; }
.nav-menu summary {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px; margin-right: -10px;
  display: flex; align-items: center; justify-content: center;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu nav {
  position: absolute; right: -6px; top: 52px; z-index: 30;
  min-width: 240px; padding: 8px 0;
  background: var(--paper); border: 1px solid var(--ink);
  display: flex; flex-direction: column;
}
.nav-menu nav a { padding: 12px 20px; font-size: 16px; font-weight: 500; text-decoration: none; }

/* ------------------------------------------------------------ 1. hero */
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px var(--pad) 20px; }
.kicker { display: none; }
.hero h1 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: 36px; line-height: 1.08; letter-spacing: -0.015em;
}
.hero h1 span { display: block; font-style: italic; margin-top: 6px; }
.hero-sub { font-size: 16px; line-height: 1.5; color: var(--muted); }
.btn-signal {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch; min-height: 52px; padding: 0 36px;
  background: var(--signal); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none;
}
/* Phones: a tall crop of the room (canvas viewBox 30 30 585 660) fading into the page. */
.hero-art {
  position: relative; overflow: hidden;
  aspect-ratio: 585 / 660;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.hero-art .hero-svg { width: calc(100% * 720 / 585); height: auto; margin: calc(-100% * 30 / 585) 0 0 calc(-100% * 30 / 585); }


/* ------------------------------------------------------------ drawings */
.art { width: 100%; height: auto; }
.draw, .shade, .halo { opacity: 1; }
/* The empty chair rests pulled out and turned, its left side drawn back further,
   the way someone pulls a chair out to sit. A skew rather than a rotation, so its
   legs stay upright. */
.slide { transform-box: fill-box; transform-origin: 92% 70%; transform: translate(12px, 16px) skewY(-7deg) scaleX(0.96); }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: hf-flick 1.3s ease-in-out infinite alternate; }
.flame-8 { animation-duration: 0.8s; }
.flame-11 { animation-duration: 1.1s; }
.flame-15 { animation-duration: 1.5s; }
@keyframes hf-flick {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(1.14) skewX(2deg); }
  100% { transform: scaleY(0.92) skewX(-1deg); }
}
@media (prefers-reduced-motion: reduce) { .flame { animation: none; } }

/* Hero draw-in, every visit unless reduced motion (see the script in <head>). The finished
   drawing is the default. These rules only run when that script opts in. */
.draw-in .hero-svg { --k: 0.6s; }
/* The script right after the hero measures each line's real length and sets its
   dash to match (Safari ignores pathLength), removing pathLength as it goes. Until
   then those lines stay hidden. If the script never runs, the head script drops
   draw-in once the page has loaded and the finished drawing shows. */
.draw-in:not(.measured) .hero-svg .draw { opacity: 0; }
.draw-in .hero-svg .draw * {
  animation-name: hf-draw; animation-duration: calc(var(--k) * 2.4);
  animation-timing-function: ease-out; animation-fill-mode: forwards;
}
.draw-in .hero-svg .draw [fill^="url"], .draw-in .hero-svg .draw [fill="#0B0F1A"] {
  fill-opacity: 0;
  animation-name: hf-draw, hf-fill; animation-duration: calc(var(--k) * 2.4), calc(var(--k) * 1.4);
  animation-timing-function: ease-out; animation-fill-mode: forwards;
}
.draw-in .hero-svg .shade { opacity: 0; animation-name: hf-fade; animation-timing-function: ease-out; animation-fill-mode: forwards; }
.draw-in .hero-svg .slide { transform: translate(-8px, -11px) skewY(0deg) scaleX(1); animation-name: hf-slide; animation-duration: 1.4s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.draw-in .hero-svg .draw [stroke="none"] { opacity: 0; animation-name: hf-fade; animation-timing-function: ease-out; animation-fill-mode: forwards; }
.draw-in .hero-svg .draw .flame {
  animation-name: hf-draw, hf-flick; animation-duration: calc(var(--k) * 2.4), 1.3s;
  animation-timing-function: ease-out, ease-in-out; animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite; animation-direction: normal, alternate;
}
/* Hold every hero animation until the page has actually been painted. Safari
   can show a blank screen for a second or two while it reads a long page, and
   the animation clock would otherwise run out during that time. The script
   after the hero adds draw-go two frames after the room is first painted. */
.draw-in:not(.draw-go) .hero-svg * { animation-play-state: paused !important; }
/* The fireplace flames sit outside the draw layers. They light once the
   fireplace has been drawn, rather than burning in an empty room. */
.draw-in .hero-svg g.flame {
  opacity: 0;
  animation-name: hf-flick, hf-fade; animation-duration: 0.9s, calc(var(--k) * 1.2);
  animation-timing-function: ease-in-out, ease-out; animation-iteration-count: infinite, 1;
  animation-direction: alternate, normal; animation-fill-mode: none, forwards;
  animation-delay: 0s, calc(var(--k) * 2.6);
}
/* Per-stroke delays and durations are set inline by the sketch script after
   the hero. The rules above use longhands, never the animation shorthand,
   because a shorthand would reset those. */
@keyframes hf-draw { to { stroke-dashoffset: 0; } }
@keyframes hf-fill { to { fill-opacity: 1; } }
@keyframes hf-fade { to { opacity: 1; } }
/* The chair waits for the sketch script's go (drawn, and on screen). */
.draw-in .hero-svg .slide:not(.go) { animation-play-state: paused; }
/* Straight back off the table first, then the turn as it clears. */
@keyframes hf-slide {
  0% { transform: translate(-8px, -11px) skewY(0deg) scaleX(1); }
  45% { transform: translate(4px, 5px) skewY(-1.5deg) scaleX(0.993); }
  100% { transform: translate(12px, 16px) skewY(-7deg) scaleX(0.96); }
}
/* Phones run the same sequence in about 2.5 seconds. */
@media (max-width: 767px) { .draw-in .hero-svg { --k: 0.32s; } }

/* Every drawing engraves in (bespoke-plan item 6). Only when the script at the
   foot of the page has opted in with html.motion. */
.motion .engrave:not(.engraved) {
  -webkit-mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.motion .engrave.inview:not(.engraved) { animation: hf-sweep 0.9s cubic-bezier(0.4, 0, 0.3, 1) forwards; }
@keyframes hf-sweep {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.motion .engrave .shade { opacity: 0; transition: opacity 0.7s ease-out 0.85s; }
.motion .engrave.inview .shade { opacity: 1; }
@media print { .motion .engrave { -webkit-mask-image: none; mask-image: none; } .motion .engrave .shade { opacity: 1; } }

/* Section 2: the drawer slides open as its drawing engraves in. It starts
   about 28 units in along its own depth, then eases out to the drawn position. */
.motion .s2-art .drawer-move { transform: translate(16px, -23px); }
.motion .s2-art.inview .drawer-move { transform: none; transition: transform 1s cubic-bezier(0.25, 0.7, 0.3, 1) 0.75s; }
@media print { .motion .s2-art .drawer-move { transform: none; } }

/* ------------------------------------------------------------ 2 */
.s2-grid { display: flex; flex-direction: column; gap: 18px; }
.s2-aside, .s2-copy { display: contents; }
.m-first { order: 0; }
.m-early { order: 1; }
.m-art { order: 2; }
.m-late { order: 3; }
.s2 .seal-row { margin-bottom: 6px; }
.s2-art { margin: 8px 0; }
.identity { font-family: var(--serif); font-size: 28px; line-height: 1.25; }
.room { font-family: var(--serif); font-size: 24px; line-height: 1.3; }
.verdict {
  margin-top: 40px; padding-top: 32px; border-top: 3px double var(--ink);
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--serif); font-size: 24px; line-height: 1.3;
}
.verdict p:last-child { font-style: italic; }

/* ------------------------------------------------------------ 3 */
.s3-inner { display: flex; flex-direction: column; align-items: center; gap: 44px; text-align: center; }
.s3-open { font-family: var(--serif); font-size: 30px; line-height: 1.2; }
.br-wide { display: none; }
.s3-intro, .s3-mid, .s3-close { display: flex; flex-direction: column; gap: 16px; max-width: 720px; color: var(--muted-dark); }
.figs { display: flex; flex-direction: column; align-items: center; gap: 44px; }
.fig { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 320px; font-size: 16px; line-height: 1.55; color: var(--muted-dark); }
.fig .fig-label { font-size: 15px; line-height: 1.5; }
.fig-60 .fig-label { color: var(--paper); }
.ring {
  border-radius: 50%; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); color: var(--paper); line-height: 1;
}
.fig-15 .ring { width: 96px; height: 96px; --in: 1px solid var(--slate); --out: 1px solid var(--rule-dark); --off: 5px; font-size: 30px; }
.fig-25 .ring { width: 128px; height: 128px; --in: 1px solid var(--signal); --out: 1px solid var(--signal); --off: 6px; font-size: 40px; }
.fig-60 .ring { width: 176px; height: 176px; --in: 3px double var(--signal); --out: 1px solid var(--signal); --off: 8px; font-size: 58px; }
/* The rings are drawn by two pseudo-elements (the inner line and the outer
   line) instead of border and outline, so each can be engraved in: a sweep
   around the circle, like a burin turning, with the numeral appearing once
   its ring is closed. Rings in view together draw one after another, 15, 25,
   60, so the blue builds. The 85% oval closes last. Without motion, the
   sweep is already full and nothing changes. */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.ring, .oval { position: relative; }
.ring::before, .ring::after, .oval::before, .oval::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  -webkit-mask: conic-gradient(#000 var(--sweep), transparent 0); mask: conic-gradient(#000 var(--sweep), transparent 0);
  transition: --sweep 1.2s cubic-bezier(0.45, 0, 0.25, 1) var(--d, 0s);
}
.ring::before, .oval::before { inset: 0; border: var(--in); }
.ring::after, .oval::after { inset: calc(-1 * (var(--off) + 1px)); border: var(--out); transition-delay: calc(var(--d, 0s) + 0.2s); }
.motion .ring:not(.drawn)::before, .motion .ring:not(.drawn)::after, .motion .oval:not(.drawn)::before, .motion .oval:not(.drawn)::after { --sweep: 0deg; }
.motion .ring { transition: color 0.6s ease-out calc(var(--d, 0s) + 1.1s); }
.motion .ring:not(.drawn) { color: transparent; }
.s3-caption { font-size: 12px; line-height: 1.5; color: var(--slate); }
.oval {
  margin-top: 12px; width: 100%; max-width: 342px; min-height: 310px;
  border-radius: 50%; --in: 3px double var(--signal); --out: 1px solid var(--signal); --off: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 36px; background: var(--ink);
}
.oval p { font-family: var(--serif); font-size: 25px; line-height: 1.2; }
/* The 85% is drawn, not typed: outlined Playfair with the wordmark's engraver's
   inline down its heavy strokes, the only numeral on the page that gets it. It
   sits on its own line above the rest of the sentence. */
.n85-wrap { display: block; margin: 0 0 10px; line-height: 0; }
.n85 { display: block; margin: 0 auto; height: 72px; width: auto; overflow: visible; }
.s3-last { font-family: var(--serif); font-size: 24px; line-height: 1.3; color: var(--paper); margin-top: 8px; }

/* ------------------------------------------------------------ 4 */
.s4-row { display: flex; flex-direction: column; gap: 18px; }
.s4-copy { display: contents; }
.s4-art { margin: 10px calc(-1 * var(--pad)) 0; }
.advisors {
  list-style: none; margin: 26px 0 0; padding: 30px 0 0; border-top: 1px solid var(--slate);
  display: grid; grid-template-columns: 1fr 1fr; gap: 38px 18px;
}
.advisors li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.icon { width: 56px; height: auto; }
.adv-name { font-size: 15px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.adv-rule { font-size: 14px; line-height: 1.45; color: var(--muted); }
.s4-close {
  margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--slate);
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--serif); font-size: 22px; line-height: 1.35;
}

/* ------------------------------------------------------------ 4a punch band */
.punch { padding: 64px var(--pad) 72px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.punch-line { font-family: var(--serif); font-size: 30px; line-height: 1.22; letter-spacing: -0.01em; }
.punch-sub { font-family: var(--serif); font-size: 20px; line-height: 1.35; color: var(--muted-dark); }

/* ------------------------------------------------------------ 5 */
.s5-row { display: flex; flex-direction: column; gap: 18px; }
.s5-art { margin: -20px calc(-1 * var(--pad)) 4px; }
.s5-serif { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; font-family: var(--serif); font-size: 21px; line-height: 1.4; }
.cause-title { margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.22; }
.stage { padding-top: 34px; }
.stage + .stage { margin-top: 30px; border-top: 1px solid var(--rule-dark); }
.stage-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.emblem { width: 40px; height: 40px; flex-shrink: 0; }
.stage-name { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); }
.stage-body { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.6; color: var(--muted-dark); }
.with { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--paper); }
.recap { margin-top: 44px; padding-top: 34px; border-top: 3px double var(--slate); }
.recap-line { font-family: var(--serif); font-size: 27px; line-height: 1.45; }
/* Phones: one word to a line, so the blue initials read down as C.A.U.S.E. */
.recap-line > span { display: block; }
.recap-note { margin-top: 28px; font-size: 17px; line-height: 1.6; color: var(--muted-dark); }

/* ------------------------------------------------------------ 6 */
.s6-inner { display: flex; flex-direction: column; gap: 18px; }
.s6-block { display: flex; flex-direction: column; gap: 18px; }
.s6-b2 .s6-copy, .s6-b4 .s6-copy { display: contents; }
.s6-title { margin: 10px 0 2px; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.18; }
.portrait { margin: 18px 0 6px; padding: 8px; border: 1px solid var(--ink); }
.portrait-inner { border: 3px double var(--ink); line-height: 0; }
.portrait img { width: 100%; height: auto; }
.callout { margin: 20px 0; padding: 34px 0; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); }
.callout-lead { font-size: 17px; line-height: 1.5; color: var(--muted); margin-bottom: 18px; }
.callout-close { font-size: 17px; line-height: 1.5; color: var(--muted); margin-top: 18px; }
.callout-words { border-left: 2px solid var(--signal); padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-family: var(--serif); font-size: 30px; line-height: 1.16; letter-spacing: -0.01em; }
.alignment { margin: 22px 0; padding: 36px 0; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); text-align: center; font-family: var(--serif); font-size: 34px; line-height: 1.16; letter-spacing: -0.01em; }
.s6-art { margin: 10px calc(-1 * var(--pad)); padding: 0 14px; }
/* One beat after the branding iron has engraved in, the F it burned into the
   wall comes up. No smoke. */
.motion .s6-art:not(.inview) .burn, .motion .s6-art.inview:not(.engraved) .burn { opacity: 0; }
.motion .s6-art .burn { transition: opacity 1.4s ease-in 0.6s; }
/* The door's floor: as each field is used, the shadow on either side of the
   path draws back a little and lightens, so the way to the door opens up.
   --p runs from 0 to 1 as the four fields are visited (set by the door script). */
.door-art .fl-l, .door-art .fl-r { transition: transform 0.9s cubic-bezier(0.3, 0, 0.2, 1), opacity 0.9s ease-out; opacity: calc(1 - var(--p, 0) * 0.45); }
.door-art .fl-l { transform: translateX(calc(var(--p, 0) * -16px)); }
.door-art .fl-r { transform: translateX(calc(var(--p, 0) * 16px)); }
@media (prefers-reduced-motion: reduce) { .motion .s6-art .burn, .door-art .fl-l, .door-art .fl-r { transition: none; } }
.s6-close { margin-top: 30px; padding-top: 34px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.sign { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.sign-img { width: 260px; height: auto; margin-top: 12px; margin-bottom: -22px; position: relative; }
.sign-line { width: min(320px, 100%); border-top: 1px solid var(--ink); margin-bottom: 12px; }
.sign-name { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; }
.sign-more { margin-top: 10px; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.9; }
.sign-link { display: inline; }

/* ------------------------------------------------------------ 7 */
.s7 .wrap { display: flex; flex-direction: column; gap: 40px; }
.quotes { display: flex; flex-direction: column; gap: 44px; }
.q-col { display: contents; }
.q-borden { order: 1; } .q-prickett { order: 2; } .q-holland { order: 3; } .q-jolley { order: 4; }
.q { margin: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 30px; border-top: 1px solid var(--rule-dark); }
.q-mark { font-family: var(--serif); font-size: 60px; line-height: 0.5; height: 16px; color: var(--signal); }
.q blockquote { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--paper); }
.q figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.q-name { --rule-color: var(--slate); font-size: 16px; font-weight: 600; color: var(--paper); }
.q-name:hover { color: var(--paper); }
.q-title { font-size: 14px; line-height: 1.5; color: var(--muted-dark); }
.s7-close { margin-top: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.s7-close .double-rule { margin-bottom: 26px; }
.s7-close p { font-size: 17px; line-height: 1.6; color: var(--muted-dark); }
.s7-close .s7-promise { margin-top: 14px; font-family: var(--serif); font-size: 27px; line-height: 1.2; color: var(--paper); }

/* ------------------------------------------------------------ 8, the door */
.s8-row { display: flex; flex-direction: column; gap: 18px; }
.s8-copy { display: contents; }
.s8-lead { margin: 12px 0 4px; font-family: var(--serif); font-size: 27px; line-height: 1.3; }
.s8-fit { padding-top: 26px; border-top: 1px solid var(--slate); display: flex; flex-direction: column; gap: 18px; }
.s8-form { margin: 14px calc(-1 * var(--pad)); display: flex; flex-direction: column; align-items: center; }
.door-form { width: 100%; max-width: 390px; margin: 0 auto; }
.door { position: relative; width: 100%; aspect-ratio: 390 / 760; }
/* The drawings never take clicks. The door frame is drawn on top of the doorway,
   and without this it sat over "Choose a time" and swallowed every tap on it. */
.door-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.door-art-desk { display: none; }
.door-field { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.door-field label { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
.door-field input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--ink); border-radius: 0; background: #fff;
  font-family: var(--sans); font-size: 16px; color: var(--ink);
}
.door-field input::placeholder { color: var(--slate); }
.door-plate {
  position: absolute; border: 0; border-radius: 0; cursor: pointer;
  background: var(--signal); color: #fff;
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 3px var(--signal), inset 0 0 0 4px rgba(255, 255, 255, 0.55);
}
/* Brass plate: pressed, not recolored. */
/* The same plate on every blue button: an engraved keyline, pressed in on hover, deeper on press. */
.btn-signal, .btn, .door-thanks-btn {
  box-shadow: inset 0 0 0 3px var(--signal), inset 0 0 0 4px rgba(255, 255, 255, 0.55);
  transition: box-shadow 0.15s ease;
}
.btn-signal:hover, .btn:hover, .door-thanks-btn:hover { color: #fff; box-shadow: inset 0 0 0 3px var(--signal), inset 0 0 0 4px rgba(255, 255, 255, 0.55), inset 0 3px 6px rgba(11, 15, 26, 0.35); }
.btn-signal:active, .btn:active, .door-thanks-btn:active { box-shadow: inset 0 0 0 3px var(--signal), inset 0 0 0 4px rgba(255, 255, 255, 0.55), inset 0 4px 10px rgba(11, 15, 26, 0.5); }
.door-plate:hover { box-shadow: inset 0 0 0 3px var(--signal), inset 0 0 0 4px rgba(255, 255, 255, 0.55), inset 0 3px 6px rgba(11, 15, 26, 0.35); }
.door-plate:active { box-shadow: inset 0 0 0 3px var(--signal), inset 0 0 0 4px rgba(255, 255, 255, 0.55), inset 0 4px 10px rgba(11, 15, 26, 0.5); }
/* Field and plate boxes, from section8-door-mobile.json as placed on the board */
.df-1 { left: 16.923%; top: 12.105%; width: 66.154%; height: 9.211%; }
.df-2 { left: 16.923%; top: 27.368%; width: 66.154%; height: 9.211%; }
.df-3 { left: 16.923%; top: 42.632%; width: 66.154%; height: 9.211%; }
.df-4 { left: 16.923%; top: 57.895%; width: 66.154%; height: 9.211%; }
.door-plate { left: 12.821%; top: 71.184%; width: 74.359%; height: 6.579%; }
.cf-turnstile { margin-top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { border-left: 3px solid var(--ink); padding: 0.75rem 1rem; background: #fff; margin: 0 var(--pad) 16px; font-size: 16px; }

/* ------------------------------------------------------------ footer */
.site-footer { background: var(--ink); color: var(--paper); padding: 64px var(--pad) 36px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 44px; }
.foot-top { display: flex; flex-direction: column; gap: 44px; }
.foot-firm { display: flex; flex-direction: column; gap: 16px; }
.site-footer .brand { color: var(--paper); align-self: flex-start; }
.site-footer .brand:hover { color: var(--paper); }
.site-footer .wordmark { height: 46px; width: auto; }
.foot-name { font-family: var(--serif); font-size: 21px; line-height: 1.3; }
.foot-desc { font-size: 15px; line-height: 1.6; color: var(--muted-dark); }
.foot-pod { display: flex; flex-direction: column; gap: 12px; padding-top: 30px; border-top: 1px solid var(--rule-dark); }
.foot-kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); }
.foot-show { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.3; }
.foot-fs { font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--muted-dark); }
.foot-link { --rule-color: var(--slate); margin-top: 6px; align-self: flex-start; font-size: 15px; font-weight: 500; }
.foot-link:hover { color: var(--paper); }
.foot-bottom { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; border-top: 1px solid var(--rule-dark); font-size: 14px; color: var(--slate); }
.foot-bottom nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.foot-bottom nav a { color: var(--muted-dark); text-decoration: none; }
.foot-bottom nav a:hover { color: var(--paper); }

/* ------------------------------------------------------------ tablet */
@media (min-width: 768px) {
  :root { --pad: 48px; }
  .s2-art, .s4-art, .s5-art, .s6-art { width: 100%; max-width: 560px; align-self: center; margin-left: auto; margin-right: auto; }
  .door-form { max-width: 536px; }
  .door { aspect-ratio: 536 / 880; }
  .door-art-desk { display: block; }
  .door-art-mob { display: none; }
  .door-field label { font-size: 11px; letter-spacing: 0.18em; }
  /* from section8-door.json as placed on the board */
  .df-1 { left: 22.761%; top: 12.727%; width: 54.478%; height: 8.182%; }
  .df-2 { left: 22.761%; top: 27.273%; width: 54.478%; height: 8.182%; }
  .df-3 { left: 22.761%; top: 41.818%; width: 54.478%; height: 8.182%; }
  .df-4 { left: 22.761%; top: 56.364%; width: 54.478%; height: 8.182%; }
  .door-plate { left: 18.843%; top: 69.205%; width: 62.313%; height: 6.136%; }
}

/* tablet only: keep a readable measure and sensible drawing sizes */
@media (min-width: 768px) and (max-width: 1199px) {
  .wrap { max-width: 720px; }
  .hero-copy { max-width: 720px; margin: 0 auto; padding-top: 48px; }
  .btn-signal { align-self: flex-start; }
  .hero-art { max-width: 560px; margin: 0 auto; }
}

/* ------------------------------------------------------------ desktop */
@media (min-width: 1200px) {
  :root { --pad: clamp(48px, 6.7vw, 96px); }
  body { font-size: 20px; }
  .m-first, .m-early, .m-art, .m-late { order: 0; }
  .sec { padding: 140px var(--pad); }
  .sec.band { padding: 140px var(--pad) 150px; }
  .seal-row { gap: 18px; }
  .seal { width: 72px; height: 72px; font-size: 28px; }
  .seal-label { font-size: 17px; letter-spacing: 0.08em; }
  .prose { gap: 20px; }
  .prose .seal-row { margin-bottom: 16px; }
  .gap { margin-top: 16px; }
  .double-rule { width: 120px; }

  /* header */
  .site-header { padding: 32px var(--pad); border-bottom: 0; }
  .site-header .wordmark { height: 48px; }
  .nav-menu { display: none; }
  .nav-main { display: flex; align-items: center; gap: 36px; font-size: 14px; font-weight: 500; }
  .nav-cta { margin-left: 12px; }

  /* hero */
  .hero { padding: 0 48px; }
  .hero-frame { max-width: 1344px; margin: 0 auto; padding: 8px; border: 1px solid var(--ink); position: relative; }
  .hero-frame::before { content: ""; position: absolute; inset: 8px; border: 3px double var(--ink); pointer-events: none; }
  .hero-frame { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .hero-copy { flex: 0 1 620px; padding: 30px 0 30px 72px; gap: 30px; }
  .kicker { display: block; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
  .hero h1 { font-size: clamp(46px, 4.3vw, 62px); line-height: 1.06; letter-spacing: -0.02em; }
  .hero h1 span { margin-top: 8px; }
  .hero-sub { font-size: 18px; }
  .btn-signal { align-self: flex-start; min-height: 56px; }
  .hero-art { flex: 0 1 720px; min-width: 0; aspect-ratio: 1 / 1; margin: 30px 3px 30px 0; -webkit-mask-image: none; mask-image: none; }
  .hero-art .hero-svg { width: 100%; margin: 0; }

  /* 2 */
  .s2-grid { flex-direction: row; align-items: flex-start; gap: 72px; }
  .s2-aside { display: flex; flex-direction: column; gap: 28px; flex: 0 1 560px; min-width: 0; position: sticky; top: 48px; }
  .s2-copy { display: flex; flex: 0 1 600px; min-width: 0; gap: 22px; font-size: 21px; }
  .s2 .seal-row { margin-bottom: 0; }
  .s2-art { margin: 0; max-width: none; align-self: stretch; }
  .identity { font-size: 36px; }
  .room { font-size: 30px; }
  .gap { margin-top: 20px; }
  .verdict { margin-top: 96px; padding-top: 56px; gap: 20px; font-size: 36px; line-height: 1.25; }

  /* 3 */
  .s3-inner { gap: 64px; }
  .s3-open { font-size: clamp(40px, 3.4vw, 48px); max-width: 1152px; }
  .br-wide { display: inline; }
  .s3-intro, .s3-mid, .s3-close { font-size: 21px; gap: 18px; }
  .figs { flex-direction: row; align-items: flex-start; justify-content: center; gap: 72px; }
  .fig { gap: 22px; font-size: 17px; }
  .fig-15 { width: 220px; } .fig-25 { width: 260px; } .fig-60 { width: 320px; }
  .ring-box { height: 312px; display: flex; align-items: flex-end; justify-content: center; }
  .fig-15 .ring { width: 160px; height: 160px; --off: 6px; font-size: 48px; }
  .fig-25 .ring { width: 210px; height: 210px; --off: 8px; font-size: 64px; }
  .fig-60 .ring { width: 290px; height: 290px; --off: 10px; font-size: 96px; }
  .s3-caption { font-size: 13px; }
  .oval { margin-top: 40px; max-width: 1040px; min-height: 440px; padding: 0 130px; --off: 12px; }
  .oval p { font-size: clamp(40px, 3.4vw, 48px); line-height: 1.15; }
  .n85 { height: 96px; }
  .n85-wrap { margin-bottom: 14px; }
  .s3-last { font-size: 32px; }

  /* 4 */
  .s4 .wrap + .wrap { margin-top: 96px; }
  .s4-row { flex-direction: row; align-items: flex-end; gap: 72px; }
  .s4-copy { display: flex; flex: 0 1 520px; min-width: 380px; }
  .s4-art { flex: 0 1 656px; min-width: 0; max-width: 656px; margin: 0 0 -52px; }
  .advisors { margin: 0; padding: 0; border: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; }
  .advisors li { gap: 14px; }
  .icon { width: 88px; }
  .adv-name { font-family: var(--serif); font-size: 32px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.1; }
  .adv-rule { font-size: 20px; line-height: 1.5; color: var(--ink); align-self: stretch; border-top: 1px solid var(--ink); padding-top: 18px; margin-top: 2px; }
  .s4-close { margin-top: 64px; padding-top: 0; border-top: 0; gap: 28px; font-size: 32px; line-height: 1.3; }

  /* punch band */
  .punch { padding: 150px var(--pad); gap: 44px; }
  .punch-line { font-size: clamp(42px, 3.6vw, 52px); line-height: 1.2; }
  .nowrap-wide { white-space: nowrap; }
  .punch-sub { font-size: 30px; line-height: 1.3; }

  /* 5 */
  .s5-row { flex-direction: row; align-items: center; gap: 72px; }
  .s5-art { flex: 0 1 640px; min-width: 0; max-width: 640px; margin: -20px 0 -20px -40px; }
  .s5-copy { gap: 18px; flex: 1 1 480px; min-width: 400px; }
  .s5-serif { margin-top: 96px; gap: 22px; font-size: 30px; line-height: 1.35; }
  .s5-serif p { max-width: 1100px; }
  .cause-title { font-size: 48px; line-height: 1.2; margin-bottom: 48px; }
  .stage { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 64px; padding: 44px 0; border-top: 1px solid var(--rule-dark); }
  .stage + .stage { margin-top: 0; }
  .stage-head { align-self: start; gap: 20px; margin: 0; }
  .emblem { width: 64px; height: 64px; }
  .stage-name { font-size: 15px; letter-spacing: 0.22em; }
  .stage-body { gap: 16px; font-size: 19px; max-width: 760px; }
  .with { margin-top: 8px; font-size: 26px; }
  .recap { margin-top: 52px; padding-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
  .recap-line { font-size: 44px; line-height: 1.2; display: flex; gap: 0 34px; flex-wrap: wrap; justify-content: center; }
  .recap-note { margin-top: 0; font-size: 19px; max-width: 820px; }

  /* 6 */
  .s6-inner { gap: 120px; }
  .s6-copy { gap: 18px; font-size: 21px; line-height: 1.65; }
  .s6-block { flex-direction: row; align-items: center; }
  .s6-b1 { gap: 88px; }
  .s6-b1 .s6-copy { flex: 1 1 760px; min-width: 0; }
  .s6-title { margin: 0 0 8px; font-size: 46px; line-height: 1.15; }
  .portrait { flex: 0 1 400px; min-width: 300px; margin: 120px 0 0; }
  .s6-b2 { gap: 96px; }
  .s6-b2 .s6-copy, .s6-b4 .s6-copy { display: flex; }
  .s6-b2 .s6-copy { flex: 1 1 auto; min-width: 0; }
  .callout { flex: 0 0 400px; margin: 0; padding: 56px 0; }
  .callout-lead { font-size: 20px; margin-bottom: 24px; }
  .callout-close { font-size: 20px; margin-top: 24px; }
  .callout-words { padding-left: 28px; gap: 10px; font-size: 44px; line-height: 1.15; }
  .alignment { margin: 0; padding: 56px 0; font-size: clamp(52px, 4.4vw, 64px); line-height: 1.1; }
  .s6-b4 { gap: 48px; }
  .s6-b4 .s6-copy { flex: 1 1 760px; min-width: 0; }
  .s6-art { flex: 0 1 480px; min-width: 0; max-width: 480px; margin: 0 -40px 0 0; padding: 0; }
  .s6-close { align-self: center; width: min(1180px, 100%); margin-top: 0; padding-top: 72px; font-size: 21px; line-height: 1.65; }
  .sign { margin-top: 40px; gap: 10px; }
  .sign-img { width: 440px; margin-top: 20px; margin-bottom: -38px; }
  .sign-line { width: 560px; margin-bottom: 14px; }
  .sign-name { font-size: 24px; }
  .sign-more { margin-top: 8px; font-size: 16px; line-height: 1.6; }

  /* 7 */
  .s7 .wrap { gap: 80px; }
  .quotes { flex-direction: row; align-items: flex-start; gap: 96px; }
  .q-col { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 72px; }
  .q { gap: 18px; padding-top: 36px; }
  .q-mark { font-size: 88px; height: 22px; }
  .q blockquote { font-size: 25px; }
  .q-name { font-size: 17px; }
  .q-title { font-size: 15px; }
  .s7-close { margin-top: 24px; gap: 18px; }
  .s7-close .double-rule { margin-bottom: 36px; }
  .s7-close p { font-size: 21px; line-height: 1.65; }
  .s7-close .s7-promise { margin-top: 18px; font-size: 40px; letter-spacing: -0.01em; }

  /* 8 */
  .s8 { padding: 150px var(--pad) 140px; }
  .s8-row { flex-direction: row; align-items: center; gap: clamp(48px, 7.8vw, 112px); }
  .s8-copy { display: flex; flex: 1 1 600px; min-width: 0; gap: 18px; font-size: 21px; line-height: 1.65; }
  .s8-copy .seal-row { margin-bottom: 24px; }
  .s8-lead { margin: 0 0 12px; font-size: 34px; line-height: 1.35; }
  .s8-fit { margin-top: 18px; padding-top: 30px; }
  .s8-form { flex: 0 1 536px; min-width: 460px; margin: 0; }
  .form-error { margin: 0 0 16px; }

  /* footer */
  .site-footer { padding: 110px var(--pad) 56px; }
  .site-footer .wrap { gap: 80px; }
  .foot-top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 96px; }
  .foot-firm { gap: 22px; }
  .site-footer .wordmark { height: 58px; }
  .foot-name { font-size: 24px; }
  .foot-desc { font-size: 16px; }
  .foot-pod { flex: 0 1 460px; gap: 14px; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--rule-dark); }
  .foot-kicker { font-size: 12px; letter-spacing: 0.22em; }
  .foot-show { font-size: 26px; }
  .foot-fs { font-size: 20px; }
  .foot-link { font-size: 16px; }
  .foot-bottom { flex-direction: row; justify-content: space-between; align-items: center; padding-top: 28px; }
  .foot-bottom nav { gap: 14px; }
}

/* ------------------------------------------------------------ interior pages
   /about, /privacy, /terms, /wealth-diagnostic, the blog, thank-you and 404
   share the header and footer above plus these few rules. */
.page { padding: clamp(56px, 10vw, 128px) var(--pad); }
.page-inner { max-width: 42rem; margin: 0 auto; }
.page-inner p { margin: 0 0 1.1em; }
.crumb { font-size: 0.875rem; line-height: 1.5; color: var(--muted); margin-bottom: 1.5rem; }
.page-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4vw + 1rem, 3rem); line-height: 1.15; margin: 0 0 2rem; }
.caption { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.mt { margin-top: 2rem; }
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 32px; background: var(--signal); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; }
.btn:hover { color: #fff; box-shadow: inset 0 2px 0 rgba(11, 15, 26, 0.25); }
.page-narrow { max-width: 38rem; }
.page-inner h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2vw + 1rem, 2rem); line-height: 1.25; margin: 2.75rem 0 1rem; }
.page-inner h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin: 2rem 0 0.4rem; }
.page-inner ul, .page-inner ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.page-inner li { margin-bottom: 0.45em; }
.page-inner blockquote { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 2px solid var(--signal); font-family: var(--serif); font-size: 1.3rem; line-height: 1.4; }
.page-inner blockquote p { margin-bottom: 0.4em; }
.page-inner .cite { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); }
.page-inner .lead { font-family: var(--serif); font-size: clamp(1.35rem, 1.2vw + 1rem, 1.7rem); line-height: 1.35; }
.page-inner .sources { font-size: 0.875rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.page-inner hr { border: 0; border-top: 3px double var(--ink); margin: 3rem 0; }
.lede { margin-bottom: 3rem; }
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; }
.post-list .caption { margin: 0 0 0.35rem; }
.post-title { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.3; margin: 0 0 0.5rem; }
.post-title a { text-decoration: none; }
.post-meta { margin: 0 0 0.75rem; }

/* Signature traces itself (bespoke-plan item 1). The pen strokes are hidden
   except while writing. When the pen finishes, the exact signature fades in over
   them, then the name and link fade up. */
.sig-pen { visibility: hidden; }
.motion .sign:not(.inview) .sign-img, .motion .sign:not(.inview) .sign-name, .motion .sign:not(.inview) .sign-more { opacity: 0; }
.motion .sign.inview:not(.done) .sig-pen { visibility: visible; }
.motion .sign.inview .sig-pen path { animation-name: hf-draw; animation-timing-function: linear; animation-fill-mode: forwards; }
.motion .sign.inview:not(.signed) .sig-ink { opacity: 0; }
.motion .sign.signed .sig-ink, .motion .sign.signed .sig-pen { transition: opacity 0.35s ease-out; }
.motion .sign.signed .sig-pen { opacity: 0; }
.motion .sign .sign-name, .motion .sign .sign-more { transition: opacity 0.6s ease-out 1.3s; }

/* Below-the-fold drawings load after first paint (see the loader at the foot of
   index.html). Without JavaScript the <noscript> image shows instead, so the
   empty placeholder steps aside. */
svg[data-art]:has(+ noscript > img) { display: none; }

/* Section 5's emblems settle once (bespoke-plan item 3). Only the moving part
   of each is wrapped in .em-move. Without html.motion they are simply at rest. */
.em-move { transform-box: view-box; }
.em-plumb { transform-origin: 32px 6px; }
.em-needle { transform-origin: 32px 32px; }
.em-flame { transform-origin: 32px 22px; }
.motion .emblem:not(.settle) .em-plumb { transform: rotate(14deg); }
.motion .emblem:not(.settle) .em-needle { transform: rotate(100deg); }
.motion .emblem:not(.settle) .em-flame { transform: scale(0.9, 0.7); }
.motion .emblem.settle .em-move {
  animation-duration: 2.4s; animation-timing-function: ease-in-out;
  animation-fill-mode: both; animation-delay: 0.15s;
}
.motion .emblem.settle .em-plumb { animation-name: hf-plumb; }
.motion .emblem.settle .em-needle { animation-name: hf-needle; animation-duration: 2.2s; }
.motion .emblem.settle .em-flame { animation-name: hf-candle; animation-duration: 1.6s; }
@keyframes hf-plumb {
  0% { transform: rotate(14deg); } 22% { transform: rotate(-10deg); }
  42% { transform: rotate(6.5deg); } 60% { transform: rotate(-4deg); }
  76% { transform: rotate(2deg); } 90% { transform: rotate(-0.8deg); }
  100% { transform: rotate(0deg); }
}
@keyframes hf-needle {
  0% { transform: rotate(100deg); } 35% { transform: rotate(-18deg); }
  58% { transform: rotate(9deg); } 78% { transform: rotate(-3.5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes hf-candle {
  0% { transform: scale(0.9, 0.7); } 15% { transform: scale(0.92, 1.12) skewX(-4deg); }
  30% { transform: scale(1.06, 0.92) skewX(3deg); } 48% { transform: scale(0.96, 1.06) skewX(-2deg); }
  66% { transform: scale(1.03, 0.97) skewX(1deg); } 82% { transform: scale(0.99, 1.02); }
  100% { transform: none; }
}
@media print { .motion .emblem .em-move { transform: none; animation: none; } }

/* Section 8: the door opens on submit (bespoke-plan item 2). The leaf (its
   drawing, the four fields and the plate) swings inward on its left hinge. The
   thank-you sits in the dark doorway behind it. Hinge and doorway positions come
   from claude/section8-door.py (leaf left edge, door opening). */
/* Perspective sits on the leaf itself, not on .door: with it on the parent,
   Safari re-sorts the leaf and the doorway in 3D and draws them wrongly. */
.door-leaf {
  position: absolute; inset: 0; z-index: 2; transform-origin: 7.692% 50%;
  transform: perspective(1600px) rotateY(0deg);
  transition: transform 1.6s cubic-bezier(0.45, 0, 0.15, 1);
}
.door.open .door-leaf { transform: perspective(1600px) rotateY(80deg); pointer-events: none; }
.door-inside {
  position: absolute; left: 6.41%; top: 5.526%; width: 87.18%; height: 76.05%;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 0 10% 0 27%; background: var(--ink); color: var(--paper);
  font-size: 15px; line-height: 1.6;
}
.door-inside[hidden] { display: none; }
.door-inside:focus { outline: none; }
.door-inside > * { opacity: 0; transition: opacity 0.7s ease-out 0.8s; }
.door.open .door-inside > * { opacity: 1; }
.door-thanks-title { font-family: var(--serif); font-size: 28px; line-height: 1.2; margin-bottom: 4px; }
/* Walking through the door into the calendar (Select a time). The frame and
   the open leaf slide away past the reader in every direction, the doorway
   grows to the whole box and turns from ink to paper, and the calendar fades
   in over it. */
.door.through > .door-art { transform: scale(2.4); opacity: 0; transition: transform 1.2s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.9s ease-in 0.2s; }
.door.through .door-leaf { opacity: 0; transition: opacity 0.5s ease-out; }
.door.through .door-inside {
  left: 0; top: 0; width: 100%; height: 100%; background-color: var(--paper);
  transition: left 1.1s cubic-bezier(0.5, 0, 0.2, 1), top 1.1s cubic-bezier(0.5, 0, 0.2, 1), width 1.1s cubic-bezier(0.5, 0, 0.2, 1), height 1.1s cubic-bezier(0.5, 0, 0.2, 1), background-color 0.8s ease 0.5s;
}
.door.through .door-inside > * { opacity: 0; transition: opacity 0.3s ease-out 0s; }
.door-cal { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: var(--paper); opacity: 0; transition: opacity 0.7s ease-out; }
.door-cal.in { opacity: 1; }
.door-cal iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.door-cal-alt { margin: 0; padding: 10px 16px; font-size: 14px; text-align: center; }
.door-cal-alt a { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .door.through > .door-art, .door.through .door-leaf, .door.through .door-inside, .door-cal { transition: none; }
}
.door-thanks-btn {
  align-self: flex-start; margin-top: 10px; padding: 12px 22px; background: var(--signal);
  color: var(--paper); font-weight: 600; text-decoration: none;
}
@media (min-width: 768px) {
  .door-leaf { transform-origin: 11.007% 50%; }
  .door-inside { left: 10.075%; top: 5.455%; width: 79.851%; height: 74.091%; font-size: 16px; }
  .door-thanks-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .door-leaf { transition: opacity 0.4s ease-out; }
  .door.open .door-leaf { transform: perspective(1600px) rotateY(0deg); opacity: 0; }
  .door-inside > * { transition: none; }
}

/* Section 4: an advisor's place at the table lights up (bespoke-plan item 5).
   Set by the script at the foot of index.html. Only the lit advisor's things stay
   at full strength. Everything else dims, the empty chair included: at full
   strength it read as belonging to whichever advisor was lit. */
.s4-art svg g[mask] > *, .s4-art .d4 > * { transition: opacity 0.4s ease, stroke 0.4s ease; }
.s4-art[data-lit] svg g[mask] > *:not(.d4) { opacity: 0.28; }
.s4-art[data-lit] .d4 > * { opacity: 0.28; }
.s4-art[data-lit="attorneys"] .d4 > [data-adv="attorneys"],
.s4-art[data-lit="cpas"] .d4 > [data-adv="cpas"],
.s4-art[data-lit="rias"] .d4 > [data-adv="rias"],
.s4-art[data-lit="agents"] .d4 > [data-adv="agents"] { opacity: 1; stroke: var(--signal); stroke-width: 1.6px; fill: #CFDDF3; }
.adv-hover .advisors li { cursor: default; }
.adv-hover .advisors li:focus { outline: none; }
.adv-hover .advisors li:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; }
.adv-name, .adv-rule { transition: color 0.3s ease, border-color 0.3s ease; }
.advisors li.lit .adv-name { color: var(--signal); }
.advisors li.lit .adv-rule { border-color: var(--signal); }
@media (prefers-reduced-motion: reduce) {
  .s4-art svg g[mask] > *, .s4-art .d4 > *, .adv-name, .adv-rule { transition: none; }
}