/* ═══════════════════════════════════════════════════════
   ClearestFinances — Complimentary Clarity Session
   Stylesheet
═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   TOKEN SYSTEM
───────────────────────────────────────────────────── */
em,i,cite,dfn,address{font-style:normal}
:root {
  --ink:        #0F0F0E;
  --charcoal:   #1A1917;
  --stone:      #2C2B28;
  --cream:      #F7F5F0;
  --warm-white: #FAFAF8;
  --white:      #FFFFFF;
  --gold:       #B8954A;
  --gold-hover: #C9A85C;
  --gold-faint: rgba(184,149,74,0.10);
  --text:       #1A1917;
  --text-mid:   #4A4742;
  --text-quiet: #6C6862;
  --rule:       #E5E2DC;
  --rule-dark:  rgba(255,255,255,0.12);

  --display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-serif: 'Fraunces', 'Palatino Linotype', Georgia, serif; /* logo wordmark only */
  --sans:    'Inter Tight', system-ui, -apple-system, sans-serif;

  --section-y:   6rem;
  --section-x:   clamp(1.5rem, 6vw, 7rem);
  --max-w:       1160px;
}

/* ─────────────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }

/* Focus states */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────
   TYPOGRAPHY UTILITIES
───────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}
.display-1 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--white);
}
.display-1 em { font-style: normal; font-weight: 600; }
.heading-2 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.875rem, 3vw, 2.875rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--text);
}
.heading-2--light { color: var(--white); }

/* ─────────────────────────────────────────────────────
   SECTION SHELL
───────────────────────────────────────────────────── */
.section {
  padding: var(--section-y) var(--section-x);
}
.section--cream  { background: var(--cream); }
.section--white  { background: var(--white); }
.section--dark   { background: var(--ink); }
.section--warm   { background: var(--warm-white); }

.inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────
   BUTTON
───────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.125rem 2.5rem;
  transition: background 0.18s ease, transform 0.14s ease;
  cursor: pointer;
  border: none;
}
.btn:hover { background: var(--gold-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ─────────────────────────────────────────────────────
   SITE NAV — section tabs + other services
   Sits on the hero's own ink so it reads as the top edge
   of the hero band rather than a separate strip of chrome.
   Sticky on desktop only.
───────────────────────────────────────────────────── */
.sitenav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15,15,14,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(184,149,74,0.18);
}
.sitenav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.6rem var(--section-x);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.sitenav__brand {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Section tabs ── */
.sitenav__tabs {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-right: auto;
}
.sitenav__tab {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  padding: 0.35rem 0;
  white-space: nowrap;
  transition: color 0.16s ease;
}
.sitenav__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.62rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.2s cubic-bezier(0.22,0.9,0.3,1);
}
.sitenav__tab:hover,
.sitenav__tab:focus-visible { color: var(--white); outline: none; }
.sitenav__tab:hover::after { transform: scaleX(1); }
/* Set by main.js as each section passes under the bar. */
.sitenav__tab.is-current { color: var(--white); }
.sitenav__tab.is-current::after { transform: scaleX(1); }

/* ── Other services — these leave the page, so they read
   differently from the section tabs above. ── */
.sitenav__services {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.sitenav__ext {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.38rem 0.8rem;
  border: 1px solid rgba(184,149,74,0.30);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.sitenav__ext:hover,
.sitenav__ext:focus-visible {
  background: var(--gold-faint);
  border-color: rgba(184,149,74,0.62);
  outline: none;
}
.sitenav__out { color: var(--gold); font-size: 0.8125rem; line-height: 1; }
.sitenav__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sitenav__book {
  padding: 0.45rem 1rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease;
}
.sitenav__book:hover { background: var(--gold-hover); }

/* Stop the sticky bar covering a heading it just scrolled to. */
#who, #advisor, #session, #strategies, #faq, #book, #contact { scroll-margin-top: 72px; }

/* The bar eats into the first viewport, so the hero stops
   short of it rather than forcing a scroll to see its base. */
.hero { min-height: calc(100svh - 53px); }


/* ─────────────────────────────────────────────────────
   COMMON STRATEGIES
   Cards are <a> elements — the whole card is the target,
   not just the arrow. Same mailto mechanic as the hero
   Journey rows.
───────────────────────────────────────────────────── */
.strat__intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 54ch;
  margin: 1.5rem 0 2.75rem;
}
.strat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
}
.strat__card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.4rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.16s ease, transform 0.16s ease,
              box-shadow 0.16s ease, background 0.16s ease;
}
.strat__card:hover,
.strat__card:focus-visible {
  background: var(--white);
  border-color: rgba(184,149,74,0.55);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,15,14,0.07);
  outline: none;
}
.strat__kind {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.strat__title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.strat__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-mid);
  margin-bottom: 1.1rem;
  flex-grow: 1;
}
.strat__cta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  transition: opacity 0.16s ease;
}
.strat__card:hover .strat__cta,
.strat__card:focus-visible .strat__cta { opacity: 1; }
.strat__note {
  margin-top: 2rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-quiet);
  max-width: 62ch;
}



/* ─────────────────────────────────────────────────────
   MID-PAGE BOOKING BAND
   Deliberately short. Its whole job is to put a booking
   action at ~40% of the page instead of 83%.
───────────────────────────────────────────────────── */
.bookband {
  background: var(--ink);
  padding: 2.5rem var(--section-x);
  border-top: 1px solid rgba(184,149,74,0.20);
  border-bottom: 1px solid rgba(184,149,74,0.20);
}
.bookband__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.bookband__heading {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--white);
}
.bookband__sub {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.58);
}
.bookband__btn { flex-shrink: 0; }

/* Link out to the full set of twelve */
.strat__more {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
}
.strat__more a {
  color: var(--gold);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(184,149,74,0.35);
  padding-bottom: 1px;
}
.strat__more a:hover { border-bottom-color: var(--gold); }

/* ── Strategy bands ──────────────────────────────── */
.strat__band { margin: 2.75rem 0 1.25rem; }
.strat__band:first-of-type { margin-top: 0; }
.strat__bandname {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.75rem;
}
.strat__bandblurb {
  font-size: 0.9375rem;
  color: var(--text-quiet);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────
   WHO I'VE WORKED WITH
   Not testimonials. Franklyn's own description of the work
   — no client voice, no quote marks, nothing identifiable.
───────────────────────────────────────────────────── */
.case__intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 52ch;
  margin: 1.5rem 0 2.5rem;
}
.case__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.1rem;
}
.case {
  padding: 1.4rem 1.35rem;
  background: var(--white);
  border-left: 2px solid var(--gold);
  border-radius: 0 10px 10px 0;
}
.case__kind {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.case__text {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--text);
}
.case__note {
  margin-top: 2rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-quiet);
  max-width: 62ch;
}

/* ─────────────────────────────────────────────────────
   WRITE TO ME — contact form
───────────────────────────────────────────────────── */
.contact__inner { max-width: 680px; }
.contact__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-mid);
  margin: 1.5rem 0 2.25rem;
}
.contact__form { display: block; }
.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.contact__field {
  display: block;
  margin-bottom: 1rem;
}
.contact__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.contact__label em {
  font-style: normal;
  color: var(--gold);
}
.contact__field input,
.contact__field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.contact__field textarea { resize: vertical; line-height: 1.55; }
.contact__field input:focus,
.contact__field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-faint);
}
.contact__field input::placeholder,
.contact__field textarea::placeholder { color: #A9A49C; }
.contact__submit {
  margin-top: 0.5rem;
  width: 100%;
  text-align: center;
}
.contact__consent {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-quiet);
}
.contact__consent a { color: var(--text-mid); }
.contact__alt {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--text-mid);
}
.contact__alt a {
  color: var(--gold);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(184,149,74,0.35);
}
.contact__alt a:hover { border-bottom-color: var(--gold); }

/* ─────────────────────────────────────────────────────
   SECTION 1 — HERO
───────────────────────────────────────────────────── *//* ─────────────────────────────────────────────────────
   SECTION 1 — HERO
───────────────────────────────────────────────────── */
.hero {
  background: var(--ink);
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
}

/* Right panel — slightly lighter */
.hero::after {
  content: '';
  position: absolute;
  inset: 0 0 0 55%;
  background: var(--charcoal);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 8vw, 7rem) var(--section-x) clamp(4rem, 8vw, 7rem) var(--section-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.hero__brand {
  display: block;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 2.25rem;
}

/* ─────────────────────────────────────────────────────
   🔒 BRAND LOCK — WORDMARK
   "Clearest" in the surrounding text colour, "Finances"
   in gold. This applies to EVERY instance of the wordmark
   across every page. Do not change without instruction.
   Markup: Clearest<span class="brand-accent">Finances</span>
───────────────────────────────────────────────────── */
.brand-accent { color: var(--gold); }
.hero__headline { margin-bottom: 2rem; }

.hero__rule {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 2rem;
  flex-shrink: 0;
}

.hero__sub {
  font-size: 1.0625rem;
  font-weight: 400;
  color: rgba(255,255,255,0.66);
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: 2.5rem;
}

.hero__micro {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}

.hero__graphic {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 4rem clamp(2rem, 4vw, 5rem);
}

/* ── The Clarity Lens ─────────────────────────────
   Blurred structure = how finances feel.
   Roaming glass lens = one conversation bringing
   each piece into focus. */

.clarity-viz {
  position: relative;
  width: min(430px, 100%);
  /* Matches the SVG viewBox (-45 5 410 320). The canvas is taller than
     the diamond itself so the domain labels have room above TAX/BUSINESS
     and below ASSET OWNERSHIP without clipping. */
  aspect-ratio: 410 / 320;
}

.clarity-viz__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.clarity-viz__base {
  filter: blur(4px);
  opacity: 0.32;
}

.clarity-viz__focus {
  clip-path: circle(24% at 50% 50%);
  animation: clarityFocus 16s ease-in-out infinite;
}

.clarity-viz__lens {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(184, 149, 74, 0.55);
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.015) 55%,
      rgba(255, 255, 255, 0) 70%);
  box-shadow:
    0 0 44px rgba(184, 149, 74, 0.14),
    inset 0 0 22px rgba(255, 255, 255, 0.05),
    inset 0 0 2px rgba(255, 255, 255, 0.12);
  animation: clarityLens 16s ease-in-out infinite;
  pointer-events: none;
}

.clarity-viz__caption {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

/* Lens waypoints: risk management (centre) → tax → estate planning
   → portfolio management → ownership planning → saving → centre */
@keyframes clarityLens {
  0%, 100% { left: 50%; top: 46%; }
  16%      { left: 33%; top: 16%; }
  32%      { left: 67%; top: 16%; }
  48%      { left: 82%; top: 46%; }
  64%      { left: 50%; top: 86%; }
  80%      { left: 18%; top: 46%; }
}

@keyframes clarityFocus {
  0%, 100% { clip-path: circle(24% at 50% 46%); }
  16%      { clip-path: circle(24% at 33% 16%); }
  32%      { clip-path: circle(24% at 67% 16%); }
  48%      { clip-path: circle(24% at 82% 46%); }
  64%      { clip-path: circle(24% at 50% 86%); }
  80%      { clip-path: circle(24% at 18% 46%); }
}

@media (prefers-reduced-motion: reduce) {
  .clarity-viz__lens { display: none; }
  .clarity-viz__base { display: none; }
  .clarity-viz__focus {
    clip-path: none;
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────
   SECTION 2 — THE PROBLEM
───────────────────────────────────────────────────── */
.problem__heading { margin-bottom: 2.25rem; max-width: 20ch; }
.problem__intro {
  font-size: 1.125rem;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 2rem;
}
.problem__intro strong { color: var(--text); font-weight: 500; }
.problem__pivot {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 2.5rem;
}
.problem__gaps {
  border-top: 1px solid var(--rule);
  max-width: 820px;
  margin-bottom: 2.5rem;
}
.problem__gap {
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1.5;
}
.problem__gap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2rem;
  width: 10px;
  height: 1px;
  background: var(--gold);
}
.problem__close {
  font-size: 1.0625rem;
  color: var(--text-mid);
  line-height: 1.65;
  max-width: 62ch;
}
.problem__close strong { color: var(--text); font-weight: 500; }

/* ─────────────────────────────────────────────────────
   SECTION 3 — WHO THIS IS FOR
───────────────────────────────────────────────────── */
.who__layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}
.who__heading { margin-bottom: 1.25rem; }
.who__intro {
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 0;
}
.who__list {
  display: grid;
  grid-template-columns: 1fr;
}
.who__item {
  padding: 1.375rem 0 1.375rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1.5;
  position: relative;
}
.who__item:first-child { border-top: 1px solid var(--rule); }
.who__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2rem;
  width: 10px;
  height: 1px;
  background: var(--gold);
}
.who__closing {
  margin-top: 2.5rem;
  font-family: var(--display);
  font-style: normal;
  font-size: 1.375rem;
  color: var(--text-mid);
}

/* ─────────────────────────────────────────────────────
   SECTION 4 — WHO YOU ARE (BIO, on dark)
───────────────────────────────────────────────────── */
.bio__layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 4rem;
  align-items: center;
}
/* The portrait slot now holds the "Waiting has a cost" explainer.
   Keeps the offset gold frame the photo had, so the section's
   composition is unchanged — only the medium is different.
   preload="none" on the element: the poster is 86KB, the video is
   1.6MB, and it only downloads if someone presses play. */
.bio__video-wrap {
  position: relative;
  align-self: start;
  display: block;
  line-height: 0;        /* no inline descender gap under the video */
  font-size: 0;
}
.bio__video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 864 / 952;
  border-radius: 2px;
  display: block;
  background: var(--ink);
  object-fit: cover;
}
.bio__video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184,149,74,0.55);
  border-radius: 2px;
  transform: translate(14px, 14px);
  z-index: 0;
  pointer-events: none;
}

.bio__name { margin-bottom: 1.25rem; }
.bio__heading { margin-bottom: 1.75rem; }
.bio__body {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}
.bio__body p + p { margin-top: 1.25rem; }
.bio__body strong { color: var(--white); font-weight: 500; }

/* ─────────────────────────────────────────────────────
   SECTION 5 — WHAT HAPPENS ON THE CALL (real sequence)
───────────────────────────────────────────────────── */
.steps__intro {
  font-size: 1.0625rem;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 60ch;
  margin-top: 1.25rem;
}
.steps__list {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
}
.steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.75rem;
  padding: 1.875rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.steps__num {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}
.steps__text {
  font-size: 1.0625rem;
  color: var(--text-mid);
  line-height: 1.55;
}
.steps__text strong {
  display: block;
  color: var(--text);
  font-weight: 500;
  font-size: 1.125rem;
  margin-bottom: 0.35rem;
}
.steps__close {
  margin-top: 2.75rem;
  font-size: 1.0625rem;
  color: var(--text-mid);
  line-height: 1.65;
  max-width: 62ch;
}
.steps__close strong { color: var(--text); font-weight: 500; }

/* ─────────────────────────────────────────────────────
   SECTION 6 — SOCIAL PROOF
───────────────────────────────────────────────────── */
.quotes__heading { margin-bottom: 3rem; }
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.quote {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.quote__mark {
  width: 24px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.5rem;
}
.quote__text {
  font-family: var(--display);
  font-style: normal;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 1.75rem;
  flex: 1;
}
.quote__attr {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

/* ─────────────────────────────────────────────────────
   SECTION 7 — WHAT THIS COSTS (dark statement)
───────────────────────────────────────────────────── */
.cost__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.cost__eyebrow { margin-bottom: 2rem; text-align: center; }
.cost__heading {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  margin-bottom: 2rem;
}
.cost__strikes {
  margin-bottom: 1.75rem;
}
.cost__strikes p {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.9;
}
.cost__actually {
  font-family: var(--display);
  font-style: normal;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 2rem;
}
.cost__body {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}
.cost__body strong { color: var(--white); font-weight: 500; }

/* ─────────────────────────────────────────────────────
   SECTION 8 — FINAL CTA
───────────────────────────────────────────────────── */
.cta {
  padding: 9rem var(--section-x);
}
.cta__inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.cta__eyebrow { margin-bottom: 2rem; text-align: center; }
.cta__heading { margin-bottom: 1.5rem; }
.cta__body {
  font-size: 1.0625rem;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 2.75rem;
}
.cta__micro {
  display: block;
  margin-top: 1.375rem;
  font-size: 0.8125rem;
  color: var(--text-quiet);
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────── */
.footer {
  background: var(--charcoal);
  padding: 2.25rem var(--section-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.footer__brand {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.02em;
}
.footer__legal {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  text-align: right;
  max-width: 48ch;
}

/* ─────────────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  .reveal--delay-1 { transition-delay: 0.1s; }
  .reveal--delay-2 { transition-delay: 0.2s; }
  .reveal--delay-3 { transition-delay: 0.3s; }
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE — TABLET
───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .who__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .bio__layout {
    grid-template-columns: 340px 1fr;
    gap: 2.5rem;
  }
  .quotes__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE — MOBILE
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-y: 4rem;
    --section-x: 1.5rem;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    position: relative;
    isolation: isolate;
  }
  .hero::after { display: none; }
  .hero__content {
    padding: 5rem 1.5rem 4rem;
    position: relative;
    z-index: 1;
  }
  /* Two lines, with the italic "one page." landing on the second.
     The card below is the payload, so the headline stays compact
     and hands off rather than filling the screen. */
  .hero__headline {
    font-size: 2.1rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }

  /* ── Mobile: the diamond becomes an ambient background ──
     Same artwork and same roaming lens as desktop, but sized
     up, dimmed right down and placed behind the headline.
     The lens still travels its six waypoints, so the "pieces
     coming into focus" idea reads as atmosphere rather than
     as a diagram competing with the copy. */
  .hero__graphic {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 0;
    gap: 0;
    pointer-events: none;
    overflow: hidden;
  }
  /* vw, not % — the viz has only absolutely-positioned children, so a
     percentage width has no in-flow content to resolve against and
     collapses to zero. Anchored near the headline rather than the
     centre of the hero, which on mobile sits behind the booking card. */
  /* Tucked into the top-right corner, clear of the headline — the
     diamond and the type each get their own space. 58vw is the floor
     for legible labels: below it the 17px type renders under 8px and
     no amount of contrast rescues it. */
  .clarity-viz {
    position: absolute;
    left: 64%;
    top: 22vh;
    width: 58vw;
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: 0.62;
  }
  /* Lighter blur and a fully opaque focus layer so the labels read
     sharply wherever the lens passes over them. */
  .clarity-viz__base  { filter: blur(5px); opacity: 0.50; }
  .clarity-viz__focus { opacity: 1; }
  .clarity-viz__lens {
    border-color: rgba(184, 149, 74, 0.40);
    box-shadow:
      0 0 70px rgba(184, 149, 74, 0.16),
      inset 0 0 26px rgba(255, 255, 255, 0.04);
  }
  .clarity-viz__caption { display: none; }

  /* The document, full-bleed to the gutters on a phone. */
  .deliver__card {
    max-width: none;
    margin-top: 1.75rem;
    padding: 1.6rem 1.25rem 1.25rem;
  }
  .dcard__label { font-size: 1.25rem; }
  .dcard__row {
    font-size: 1rem;
    flex-wrap: wrap;
    row-gap: 0.35rem;
    padding: 0.6rem 0.6rem;
  }
  .dcard__topic {
    flex: 1 1 100%;
    padding-right: 0;
  }
  .dcard__rt {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  /* Guarantees headline contrast no matter where the lens sits. */
  .hero__content::before {
    content: '';
    position: absolute;
    inset: -2rem -1.5rem;
    z-index: -1;
    background: radial-gradient(
      ellipse 95% 38% at 50% 18%,
      rgba(15, 15, 14, 0.45) 0%,
      rgba(15, 15, 14, 0.20) 55%,
      rgba(15, 15, 14, 0) 85%);
    pointer-events: none;
  }

  /* Not sticky on a phone: the booking CTA already owns the
     bottom of the screen, and two fixed bars is one too many.
     Tabs become a single scrollable row of chips — no menu
     button, no JS, everything reachable with a thumb swipe. */
  .sitenav {
    position: static;
    backdrop-filter: none;
    background: var(--ink);
  }
  .sitenav__inner {
    padding: 0.5rem 0;
    gap: 0;
  }
  .sitenav__brand { display: none; }
  .sitenav__tabs,
  .sitenav__services {
    display: contents;
  }
  .sitenav__inner {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 1rem;
  }
  .sitenav__inner::-webkit-scrollbar { display: none; }
  .sitenav__inner > *:first-child,
  .sitenav__tab:first-child { margin-left: 1rem; }
  .sitenav__inner > *:last-child { margin-right: 1rem; }
  .sitenav__tab,
  .sitenav__ext,
  .sitenav__book {
    flex: 0 0 auto;
    margin-right: 0.45rem;
    font-size: 0.75rem;
  }
  .sitenav__tab {
    padding: 0.38rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 100px;
  }
  .sitenav__tab::after { display: none; }
  .sitenav__tab.is-current {
    border-color: rgba(184,149,74,0.62);
    background: var(--gold-faint);
  }

  .bookband { padding: 2rem 1.5rem; }
  .bookband__inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .bookband__btn { width: 100%; text-align: center; }

  .contact__row { grid-template-columns: 1fr; gap: 0; }
  .strat__grid { gap: 1rem; }

  .bio__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* Full width on a phone — a 280px-wide whiteboard video is
     unwatchable, and this is the one asset that earns the space. */
  .bio__video-wrap {
    max-width: 480px;
  }
  .bio__video-wrap::after {
    transform: translate(10px, 10px);
  }

  .steps__item { gap: 1.25rem; }

  .footer { flex-direction: column; text-align: center; }
  .footer__legal { text-align: center; }

  .cta { padding: 6rem 1.5rem; }
}

/* ── Sticky mobile CTA ─────────────────────────────
   Desktop never sees this. On mobile it appears once
   the hero is gone and steps aside at the calendar. */
.stickycta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(15, 15, 14, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(184, 149, 74, 0.28);
  transform: translateY(105%);
  transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.stickycta.is-visible { transform: translateY(0); }
.stickycta__btn {
  display: block;
  width: 100%;
  max-width: 24rem;
  text-align: center;
  padding: 0.95rem 1.5rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  border-radius: 2px;
  text-decoration: none;
}
.stickycta__micro {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 768px) { .stickycta { display: flex; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stickycta { transition: none; }
  .sitenav__tab::after { transition: none; }
}

/* ── FAQ — native <details> accordion ──────────────
   Collapsed by default so six answers cost the page
   six lines instead of six paragraphs. No JS. */
.faq__list {
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
  max-width: 42rem;
}
.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.75rem 1.15rem 0;
  position: relative;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
  transition: color 0.18s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold); }
.faq__item summary::after {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.22s ease;
}
.faq__item[open] summary::after {
  transform: translateY(-25%) rotate(225deg);
}
.faq__item summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.faq__a {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(26, 25, 23, 0.72);
  padding: 0 2.5rem 1.4rem 0;
  margin: 0;
  animation: faqOpen 0.22s ease both;
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__a { animation: none; }
  .faq__item summary::after { transition: none; }
}

/* ── The Clarity Check ─────────────────────────── */
.check__inner {
  max-width: 720px;
  text-align: center;
}
.check__intro {
  margin: 1.5rem auto 2.5rem;
  max-width: 44ch;
  color: var(--text-mid);
}
.check__card {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 2rem;
  text-align: center;
}
.check__q {
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.3;
  margin-bottom: 1.75rem;
}
.check__opt {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 0.75rem;
  padding: 1rem 1.25rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--warm-white);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.check__opt:hover, .check__opt:focus-visible {
  border-color: var(--gold);
  background: var(--gold-faint);
}
.check__opt:active { transform: scale(0.985); }
.check__note {
  font-size: 0.8125rem;
  color: var(--text-quiet);
  margin-top: 1rem;
}
.check__reassure {
  color: var(--text-mid);
  margin-bottom: 1.75rem;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.check__micro {
  font-size: 0.8125rem;
  color: var(--text-quiet);
  margin-top: 1rem;
}
.check__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
}
.check__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule);
  transition: background 0.2s ease;
}
.check__dot--on { background: var(--gold); }

/* ── Clarity Check in the hero ─────────────────── */
.check__card--hero {
  max-width: 500px;
  margin-top: 0.5rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem) 1.5rem;
}
.check__kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.check__card--hero .check__q {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}
.check__card--hero .check__opt {
  padding: 0.875rem 1rem;
}
.check__card--hero .check__dots { margin-top: 1.5rem; }
#cal-hero-booking {
  width: 100%;
  min-height: 480px;
  overflow: auto;
  margin-top: 0.5rem;
}
#cal-hero-booking:empty { min-height: 0; }
.hero__skip {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 0.5rem;
  cursor: pointer;
}
.check__fallback {
  color: var(--text-quiet);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .check__card--hero { max-width: 100%; }
}

/* ── The Financial Journey card — THE HERO DOCUMENT ──
   This card is the page. It sits inside .hero__content on the
   dark band: a cream document lifted off near-black, which is
   the whole wow factor. Sized to the hero column rather than a
   two-up grid, and lit with a faint gold rim so it reads as an
   artefact someone hands you, not a UI panel. */
.deliver__card {
  background: var(--cream);
  border-radius: 14px;
  padding: 2rem 1.75rem 1.5rem;
  max-width: 540px;
  width: 100%;
  margin-top: 2.25rem;
  border: 1px solid rgba(184,149,74,0.22);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 90px rgba(184,149,74,0.07);
}
.dcard__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.5rem;
}
.dcard__label {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink);
}
.dcard__meta { font-size: 0.8125rem; color: var(--text-quiet); }
.dcard__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem;
  color: var(--text);
}
.pill {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  white-space: nowrap;
}
.pill--ok   { background: rgba(76,120,60,0.12); color: #4C783C; }
.pill--look { background: var(--gold-faint); color: #8A6D28; }
.pill--todo { background: rgba(108,104,98,0.12); color: var(--text-quiet); }
.dcard__next {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--charcoal);
  border-radius: 8px;
}
.dcard__next-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.dcard__next-text { font-size: 0.95rem; line-height: 1.5; color: #FFFFFF; }
.dcard__note {
  display: block;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-quiet);
  text-align: center;
}
@media (max-width: 820px) {
  .deliver__card { max-width: 480px; }
}

/* ── Clarity Map rows: clickable ask-by-email ──── */
.dcard__hint {
  font-size: 0.8125rem;
  color: var(--gold);
  margin: 0 0 0.5rem;
}
a.dcard__row {
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  padding: 0.85rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 6px;
  transition: background 0.14s ease;
}
a.dcard__row:hover,
a.dcard__row:focus-visible {
  background: var(--gold-faint);
  outline: none;
}
a.dcard__row:hover span:first-child { color: var(--ink); }

/* ── Clarity Map: tap affordance ───────────────── */
.dcard__rt { display: flex; align-items: center; gap: 0.5rem; }

/* Small, gold and always on. The chevron alone reads as decoration;
   two words naming the action is what makes people press it. */
.dcard__cue {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
  white-space: nowrap;
  transition: opacity 0.14s ease;
}
a.dcard__row:hover .dcard__cue,
a.dcard__row:focus-visible .dcard__cue { opacity: 1; }
.dcard__topic { padding-right: 0.5rem; }
.dcard__chev {
  color: var(--gold);
  font-weight: 600;
  font-size: 1.05rem;
  opacity: 0.45;
  transition: transform 0.14s ease, opacity 0.14s ease;
}
a.dcard__row:hover .dcard__chev,
a.dcard__row:focus-visible .dcard__chev {
  opacity: 1;
  transform: translateX(3px);
}

/* Headings are the plain sans (2026-10-19). Only the logo wordmark keeps the serif. */
html .mnav__brand, html .sfoot__brand, html .sitenav__brand, html .footer__brand, html .mt-bar__brand,
html .wp-bar__brand, html .fq-bar__brand, html .fx-bar__brand, html .mp-bar__brand, html .cx__brand, html .brand {
  font-family: var(--brand-serif, 'Fraunces', Georgia, serif); font-style: normal;
}