/* =====================================================================
   Primegate — Landing Page v2.1
   Modern luxury advisory. Dark-first. Champagne signature.
   Fraunces display + Inter body.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Colour — dark-luxe palette */
  --ink:          #0A0D14;   /* Near-black with blue undertone. Base. */
  --ink-surface:  #10141D;   /* Slightly lifted — cards, inputs */
  --ink-rule:     rgba(237, 232, 220, 0.08);

  --bone:         #EDE8DC;   /* Warm ivory, never pure white */
  --bone-soft:    #D9D3C2;
  --bone-muted:   rgba(237, 232, 220, 0.62);
  /* Bumped from 0.42 to 0.58 to clear WCAG AA on dark ink (was 3.54:1, now ~5.1:1). */
  --bone-faint:   rgba(237, 232, 220, 0.58);

  --gold:         #C9A961;   /* Champagne signature, used on dark ink. */
  --gold-deep:    #A8863E;   /* Decorative use only on paper (rules, bars, dividers). */
  /* Gold dark enough to clear WCAG AA when used as TEXT on the paper panel.
     Used on .panel-light for section labels, form labels, intake-path labels. */
  --gold-darkest: #6B5320;
  --gold-soft:    rgba(201, 169, 97, 0.18);

  /* Light panel (About, Intake) */
  --paper:        #F2ECDE;
  --paper-deep:   #E7DFC9;
  --paper-rule:   #D9CFB4;
  --paper-ink:    #14171F;
  --paper-muted:  #5A5A55;

  /* Brand-blue (logo) — used ONLY inside the icon when coloured variant is shown */
  --brand-blue:   #078ED1;

  /* Typography */
  --ff-display:   'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif;
  --ff-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --maxw:         1280px;
  --maxw-prose:   720px;
  --pad-x:        clamp(20px, 4vw, 48px);
  --pad-x-wide:   clamp(24px, 5vw, 64px);

  /* Rhythm */
  --section-pad:  clamp(96px, 12vw, 180px);
  --section-pad-sm: clamp(72px, 9vw, 128px);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--bone);
  background: var(--ink);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Old-style (text) numerals for prose — lining figures stay for display,
   UI labels, form inputs, and the oversized 01/02/03 lane numerals. */
p, .lede, .section-lede, .lane > p, .about-body p, .pillar p,
.donot-gloss, .donot-lead, .donot-close, .about-close,
.intake-path-lede, .disclosure-inline, .submit-note, .submit-row p,
.footer-col p, .disclosure-block p {
  font-variant-numeric: oldstyle-nums proportional-nums;
}
/* Keep lining figures wherever numbers need to read as precise data / graphic */
.lane-num, .pillar-num, .lane-tag, .section-label, .eyebrow, .intake-path-label,
.nav-cta, .brand-sub, .copyright, .regnum, .submit,
input, select, textarea, label, .about-title-line, h1, h2, h3, h4 {
  font-variant-numeric: lining-nums tabular-nums;
}

main, section, footer, header { position: relative; }

img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

a {
  color: var(--bone);
  text-decoration: none;
  transition: color .25s ease;
}
a:hover { color: var(--gold); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: var(--ink); }

/* ---------- Utility ---------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
}
.container-prose {
  max-width: var(--maxw-prose);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.skip-link {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 20px; top: 20px;
  width: auto; height: auto;
  padding: 12px 20px;
  background: var(--gold); color: var(--ink);
  z-index: 200;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  color: var(--bone);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
}
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 300;
  color: var(--bone);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.eyebrow, .section-label {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 32px;
}
.section-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

.eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
.topbar.scrolled {
  background: rgba(10, 13, 20, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--ink-rule);
}

/* Inverted state — when the topbar is floating over a cream/paper panel */
.topbar.over-light {
  background: rgba(242, 236, 222, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--paper-rule);
}
.topbar.over-light .brand,
.topbar.over-light .brand-name,
.topbar.over-light .brand-mark,
.topbar.over-light nav a {
  color: var(--paper-ink) !important;
}
.topbar.over-light .brand-sub {
  color: var(--paper-muted) !important;
}
.topbar.over-light nav a::after {
  background: var(--gold-deep);
}
.topbar.over-light nav a:hover,
.topbar.over-light .brand:hover .brand-mark {
  color: var(--gold-deep);
}
.topbar.over-light .nav-cta {
  border-color: var(--paper-ink);
}
.topbar.over-light nav a.nav-cta:hover {
  background: var(--paper-ink);
  color: var(--paper) !important;
  border-color: var(--paper-ink);
}
.topbar.over-light .nav-toggle {
  border-color: rgba(20, 23, 31, 0.15);
}
.topbar.over-light .nav-toggle span {
  background: var(--paper-ink);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--pad-x-wide);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--bone);
}
.brand-mark {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  color: var(--bone);
  transition: color .25s ease;
}
.brand:hover .brand-mark { color: var(--gold); }

/* Two-tone brand mark. Outer L-frame renders in champagne gold so the mark
   carries the brand accent everywhere it appears; inner detail renders in
   bone for the dark-ink topbar/footer or in paper-ink for the cream
   over-light topbar state. CSS `fill` overrides the inline
   `fill="currentColor"` on each polygon. */
.brand-mark polygon:first-of-type,
.footer-mark polygon:first-of-type {
  fill: var(--gold);
}
.brand-mark polygon:last-of-type,
.footer-mark polygon:last-of-type {
  fill: var(--bone);
  opacity: 1;
}
/* Outer L-frame switches to deeper gold when over a cream panel — keeps
   the brand-mark legible on both palettes. Inner polygon is handled by
   the mix-blend-mode rule on .topbar .brand-mark polygon:last-of-type
   above, which auto-adapts and supersedes any over-light override. */
.topbar.over-light .brand-mark polygon:first-of-type {
  fill: var(--gold-deep) !important;
}
.brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.005em;
  color: var(--bone);
  font-variation-settings: "opsz" 72, "SOFT" 30;
}
.brand-sub {
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-muted);
  margin-top: 6px;
}

.topbar nav ul {
  display: flex;
  align-items: center;
  gap: 40px;
}
.topbar nav a {
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  position: relative;
  padding: 6px 0;
}
.topbar nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px; width: 0;
  background: var(--gold);
  transition: width .28s ease;
}
.topbar nav a:hover { color: var(--gold); }
.topbar nav a:hover::after { width: 100%; }

.nav-cta {
  padding: 11px 24px !important;
  border: 1px solid var(--bone);
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.nav-cta::after { display: none !important; }
.topbar nav a.nav-cta:hover {
  background: var(--gold);
  color: var(--ink) !important;
  border-color: var(--gold);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ink-rule);
  border-radius: 999px;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1px;
  background: var(--bone);
}
.mobile-nav {
  background: rgba(10, 13, 20, 0.97);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--ink-rule);
  padding: 20px var(--pad-x-wide) 32px;
}
.mobile-nav ul { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav a {
  display: block;
  padding: 18px 0;
  font-family: var(--ff-display);
  font-size: 22px;
  color: var(--bone);
  border-bottom: 1px solid var(--ink-rule);
  letter-spacing: -0.01em;
}
@media (max-width: 820px) {
  /* Hide ONLY the desktop nav inside .topbar-inner. The mobile nav lives
     as a sibling of .topbar-inner and must stay reachable so the JS
     toggle can show it when the hamburger is tapped. The previous
     selector (.topbar nav) was hitting both. */
  .topbar-inner nav { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Brand subtitle stays visible on mobile so 'A personal practice of
     Taran Aujla' reads under the wordmark. Slightly tighter scale to
     keep the topbar from cramping at 375px. */
  .brand-sub {
    font-size: 8.5px;
    letter-spacing: 0.18em;
  }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 85% 20%, rgba(201, 169, 97, 0.10), transparent 70%),
    radial-gradient(900px 500px at 10% 90%, rgba(7, 142, 209, 0.06), transparent 70%);
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
  width: 100%;
}
.hero .eyebrow {
  margin-bottom: 40px;
}
.hero h1 {
  font-size: clamp(44px, 9vw, 132px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin-bottom: clamp(40px, 5vw, 64px);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.hero h1 .h1-line1 {
  display: block;
  color: var(--bone);
  font-weight: 300;
  /* Constrain just Line 1 to 15ch so "Real estate for serious files."
     wraps cleanly at the right point. Line 2 (smaller, longer combined
     phrase) extends to the full container width below. */
  max-width: 15ch;
}
/* Line 2 is the combined supporting phrase at ~46-48% of Line 1's scale.
   "Reviewed carefully. Handled calmly." sits on a single visual line at
   desktop and tablet; wraps naturally at mobile when there isn't room.
   The italic gold treatment on "carefully" / "calmly" comes from the
   shared .hero h1 em rule. */
.hero h1 .h1-line2 {
  display: block;
  color: var(--bone);
  font-weight: 300;
  font-size: clamp(22px, 4.2vw, 60px);
  letter-spacing: -0.018em;
  line-height: 1.2;
  /* Breathing room from the dominant Line 1. */
  margin-top: clamp(12px, 1.2vw, 22px);
  /* Allow the supporting line to extend wider than Line 1's 15ch cap so
     "Reviewed carefully. Handled calmly." fits on a single line at desktop
     widths. The H1 still caps Line 1 at 15ch via its own max-width. */
  max-width: 100%;
}
.hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  letter-spacing: -0.04em;
}

.hero-subhead {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.3;
  color: var(--bone);
  font-weight: 300;
  max-width: 40ch;
  margin-bottom: clamp(36px, 4.5vw, 56px);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}

.hero-lede-block {
  max-width: 620px;
  margin-bottom: 56px;
  display: grid;
  gap: 16px;
}
.hero .lede {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--bone);
  font-weight: 300;
}
.hero .lede-continued {
  color: var(--bone-muted);
}

/* Hero CTA — quiet italic-gold inline link to intake */
.hero .hero-cta {
  margin: 0 0 clamp(36px, 4.5vw, 56px);
}
.hero .hero-cta a {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: -0.005em;
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1;
  transition: text-decoration-color 0.3s ease;
}
.hero .hero-cta a:hover,
.hero .hero-cta a:focus-visible {
  text-decoration-color: currentColor;
}
.hero .hero-cta-arrow {
  display: inline-block;
  font-style: normal;
  margin-left: 0.05em;
}

.hero .disclosure-inline {
  max-width: 560px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-rule);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--bone-muted);
  letter-spacing: 0.005em;
}
.hero .disclosure-inline strong {
  color: var(--bone);
  font-weight: 500;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  right: var(--pad-x-wide);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--bone-muted);
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 3;
}
.scroll-indicator:hover { color: var(--gold); }
.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--gold) 30%, var(--gold));
  display: block;
}
@media (max-width: 820px) {
  .scroll-indicator { display: none; }
}

/* ---------- Sections ---------- */
section {
  padding: var(--section-pad) 0;
  position: relative;
}

section h2 {
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  font-weight: 300;
  max-width: 14ch;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
section h2 em {
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.section-lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--bone-muted);
  max-width: 60ch;
  font-weight: 300;
}

/* ---------- The Practice — Bento grid ---------- */
#practice { padding-bottom: var(--section-pad); }
.lanes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: clamp(64px, 8vw, 112px);
  max-width: var(--maxw);
  padding: 0 var(--pad-x-wide);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 900px) {
  .lanes {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  /* Tablet / small desktop: 2x2 grid keeps each card readable. */
}

/* 3D card flip structure.
   .lane         is the outer container, sets perspective and is otherwise transparent
   .lane-inner   is the rotating element (flips 180deg on .is-flipped)
   .lane-front   absolutely overlays the back so the card height is set by .lane-back
   .lane-back    sits in normal flow (its content sets the card's height) and is rotated 180deg
                 so it faces away by default; preserves card height across the flip
*/
.lane {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  perspective: 1500px;
  -webkit-perspective: 1500px;
  /* Flex column so .lane-inner can stretch to the grid row's height
     (each row's height is set by the tallest back content). All four
     cards then render at uniform height per row regardless of which
     card has the longest body. */
  display: flex;
  flex-direction: column;
}

.lane-inner {
  position: relative;
  width: 100%;
  flex: 1 1 auto;          /* fills .lane (which the grid row stretched) */
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* Explicit initial transform gives the browser a stable interpolation
     start when the .is-flipped class is added. Without this some engines
     compute a flat 2D matrix mid-flip. */
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transition: transform 0.85s cubic-bezier(.4, .12, .2, 1);
}
.lane.is-flipped .lane-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.lane-front,
.lane-back {
  background: var(--ink-surface);
  border: 1px solid var(--ink-rule);
  border-radius: 4px;
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: border-color .35s ease, background .35s ease;
}
/* Permanent soft gold frame on the FRONT face only. Gives every card the
   brand accent at rest so the four-up grid reads as a deliberate set
   rather than dark voids on dark. The BACK face keeps the quiet ink-rule
   border, since the gold top-accent line (.lane-back::before) is the
   active visual on the flipped state. */
.lane-front {
  border-color: rgba(201, 169, 97, 0.38);
}
.lane-front::before,
.lane-back::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.lane-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Header at top, "Read the detail" cue at bottom. The cue is decorative
     (pointer-events: none, aria-hidden); the entire front face is the
     interactive target via role=button + tabindex=0 on .lane-front itself. */
  justify-content: space-between;
  cursor: pointer;
}
/* Keyboard focus indicator: the front IS the button now (role=button, tabindex=0). */
.lane-front:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* Visual flip-cue affordance: tells users the card responds to a click,
   without itself being a clickable element. Click events pass through to
   .lane-front via pointer-events: none. */
.lane-flip-cue {
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 0 0 4px 0;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.lane:not(.is-flipped) .lane-front:hover .lane-flip-cue {
  gap: 14px;
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}
.lane-back {
  position: relative;
  flex: 1 1 auto;          /* fills .lane-inner so the visible back box matches the row height */
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.lane:not(.is-flipped) .lane-front:hover {
  border-color: rgba(201, 169, 97, 0.75);
  background: #121722;
}
.lane:not(.is-flipped) .lane-front:hover::before { opacity: 1; }
.lane.is-flipped .lane-back::before { opacity: 1; }

/* Back-face "Back" button. The front-face trigger button was removed once the
   entire .lane-front became the click target (with role=button + Enter/Space
   key handlers), so we only style the back button here. */
.lane-flip-back {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0 0 4px 0;
  margin-bottom: 4px;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.lane-flip-back:hover {
  gap: 14px;
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}
.lane-flip-back:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: 2px;
}
.lane-flip-arrow {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0;
  font-variation-settings: "opsz" 72, "WONK" 1;
  line-height: 1;
}

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

.lane-header {
  display: flex;
  flex-direction: column;
  /* Iterations: 16px (original, cramped), 52px (too airy), 35px
     (still too airy). Landed at ~22px at desktop — modest bump
     from original, breathes a touch without feeling spread out. */
  gap: clamp(20px, 1.5vw, 24px);
  margin-bottom: 4px;
}
.lane-num {
  font-family: var(--ff-display);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  display: block;
}
.lane h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--bone);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.lane-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  /* Vertical padding bumped from 7 → 10 and line-height set to 1.7
     so multi-line tags (e.g. card 04: "Principals · Executives ·
     Family-Held Assets · Sensitive Transactions") get visible
     breathing room between wrapped lines instead of stacking tight. */
  padding: 10px 16px;
  line-height: 1.7;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 18px;
}
.lane p {
  color: var(--bone-muted);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
}

/* Wide desktop: four cards in a single horizontal row, each taller than wide.
   Card height is capped (independent of body length); any back content longer
   than the card scrolls inside the back face. */
@media (min-width: 1200px) {
  .lanes {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    /* Equal-height row regardless of back content length. */
    align-items: stretch;
  }

  /* Disable the flex-stretch chain that propagated back content height up to
     the lane. Use explicit height instead so every card is exactly the same
     vertical dimension and the front never looks half-empty. */
  .lane {
    min-height: 0;
    /* Tightened so the front face has less empty space.
       Cat 02 / Cat 04 backs are slightly longer than the card and will
       scroll a small amount inside the back face (thin gold scrollbar). */
    height: clamp(440px, 38vw, 500px);
    flex-direction: column;
  }
  .lane-inner {
    flex: none;
    height: 100%;
  }
  .lane-front,
  .lane-back {
    padding: 30px 26px;
    gap: 18px;
  }

  /* Front: header at top, "Read the detail" cue anchored at bottom via
     space-between (matches the base .lane-front rule). */
  .lane-front {
    justify-content: space-between;
  }

  /* Back: scrolls if content exceeds card height. Thin champagne scrollbar. */
  .lane-back {
    flex: none;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 169, 97, 0.4) transparent;
  }
  .lane-back::-webkit-scrollbar { width: 6px; }
  .lane-back::-webkit-scrollbar-track { background: transparent; }
  .lane-back::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 97, 0.35);
    border-radius: 3px;
  }
  .lane-back::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 169, 97, 0.6);
  }

  /* Typography scaled for the narrower 4-col cards. */
  .lane-num {
    font-size: clamp(48px, 5vw, 76px);
  }
  .lane h3 {
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.012em;
  }
  .lane-tag {
    font-size: 9.5px;
    letter-spacing: 0.18em;
    /* Card 04 ("Principals · Executives · Family-Held Assets ·
       Sensitive Transactions") wraps to 3 lines. line-height 1.9
       and padding 12 vertical gives visible separation between
       wrapped lines so the pill reads as deliberate, not stuffed. */
    padding: 12px 16px;
    line-height: 1.9;
  }
  .lane p {
    font-size: 14px;
    line-height: 1.6;
  }
  .lane-flip-back {
    font-size: 10.5px;
    letter-spacing: 0.18em;
  }
}

/* Lane-card accent — subtle gold ambient glow on hover only (no single-lead treatment now that there are four) */

/* ---------- How We Work ---------- */
.section-how {
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
.section-how::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 50% 100%, rgba(201, 169, 97, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.section-how > * { position: relative; z-index: 1; }

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  margin-top: clamp(56px, 7vw, 96px);
  max-width: var(--maxw);
  padding: 0 var(--pad-x-wide);
  margin-left: auto;
  margin-right: auto;
}

/* Tablet to small desktop: 2 columns x 3 rows (six commitments). */
@media (min-width: 900px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .pillar {
    padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 56px);
  }
  .pillar:nth-child(2n) { border-left: 1px solid var(--ink-rule); }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--ink-rule); }
}

/* Wide desktop: 3 columns x 2 rows (clean 3+3). */
@media (min-width: 1180px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  /* Reset borders so we can re-apply for the 3-col layout. */
  .pillar { border-left: 0; border-top: 0; }
  /* Vertical dividers between cols 1-2 and 2-3 in both rows. */
  .pillar:nth-child(3n+2),
  .pillar:nth-child(3n) { border-left: 1px solid var(--ink-rule); }
  /* Horizontal divider between row 1 and row 2. */
  .pillar:nth-child(n+4) { border-top: 1px solid var(--ink-rule); }
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Selector bumped from .pillar-num to .pillar .pillar-num so the gold colour
   beats the later .pillar p { color: var(--bone-muted) } rule on specificity
   (2 classes > 1 class + 1 element). */
.pillar .pillar-num {
  font-family: var(--ff-display);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-variation-settings: "opsz" 72, "WONK" 1;
  font-weight: 500;
}
.pillar h4 {
  font-family: var(--ff-display);
  /* Reduced max from 28 to 24 to align with category card h3 hierarchy at 4-col viewport. */
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 400;
  color: var(--bone);
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
  max-width: 22ch;
}
.pillar p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--bone-muted);
  font-weight: 300;
}

/* ---------- Pullquote ---------- */
.pullquote {
  margin: clamp(80px, 10vw, 140px) auto 0;
  max-width: 1080px;
  padding: 0 var(--pad-x-wide);
  position: relative;
  text-align: center;
}
.pullquote p {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.25;
  color: var(--bone);
  font-weight: 300;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  position: relative;
}
.pullquote::before {
  content: '"';
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(80px, 10vw, 140px);
  font-style: italic;
  color: var(--gold);
  line-height: 0.5;
  margin-bottom: 24px;
  font-weight: 300;
}

/* ---------- Panel: light (About, Intake) ---------- */
.panel-light {
  background: var(--paper);
  color: var(--paper-ink);
}
.panel-light .section-label {
  color: var(--gold-darkest);
}
/* Decorative bar; not text, contrast rule does not apply. */
.panel-light .section-label::before { background: var(--gold-deep); }
.panel-light h2, .panel-light h3 {
  color: var(--paper-ink);
}
.panel-light h2 em, .panel-light h3 em {
  color: var(--gold-deep);
}
.panel-light .section-lede { color: var(--paper-muted); }

/* ---------- About ---------- */
#about .container-prose,
#about .container {
  max-width: 1080px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}
@media (min-width: 780px) {
  .about-grid {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(56px, 7vw, 96px);
  }
  /* Sticky portrait on desktop: photo stays in view as the bio text scrolls.
     Top offset = brokerage-bar (60px) + topbar (~80px) + breathing room.
     align-items: start on .about-grid is required for sticky to work in
     the grid track (already set above at line ~1074). */
  .about-grid .portrait-figure {
    position: sticky;
    top: calc(var(--brokerage-bar-h, 60px) + 80px + 24px);
    align-self: start;
  }
}
.portrait-figure { margin: 0; }
.portrait-artwork {
  aspect-ratio: 4 / 5;
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--paper-rule);
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 40px -24px rgba(10, 13, 20, 0.35);
}
.portrait-artwork svg,
.portrait-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Portrait placeholder caption: shown beneath the editorial mark while
   the commissioned photograph is in preparation. Remove the figcaption
   from index.html when the actual photo is wired in. */
.portrait-caption {
  margin-top: 14px;
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-muted);
  text-align: center;
}

.about-body h3 {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 300;
  color: var(--paper-ink);
  margin-bottom: 10px;
  letter-spacing: -0.025em;
  line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.about-title-line {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 36px;
  font-weight: 500;
}
.about-body p {
  max-width: 62ch;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--paper-ink);
  font-weight: 400;
}
.about-body p:last-child { margin-bottom: 0; }

.about-body .about-transition {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--paper-ink);
  margin: 8px 0 28px;
  line-height: 1.3;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.about-body .about-emphasis {
  font-family: var(--ff-display);
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--paper-ink);
  line-height: 1.5;
  margin-bottom: 22px;
  font-weight: 400;
  max-width: 60ch;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}

.about-body .about-close {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--paper-rule);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--paper-ink);
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
  max-width: 48ch;
}

/* ---------- For Clarity ---------- */
.donot-list {
  margin-top: clamp(56px, 7vw, 96px);
  max-width: 880px;
}
.donot-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--ink-rule);
  transition: background .3s ease;
}
.donot-list li:last-child { border-bottom: 1px solid var(--ink-rule); }
.donot-list li::before {
  content: '—';
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 20px;
  color: var(--gold);
  font-weight: 300;
  line-height: 1;
  align-self: center;
  font-variation-settings: "opsz" 72, "WONK" 1;
}
.donot-text { flex: 1; }
.donot-lead {
  font-family: var(--ff-display);
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--bone);
  font-weight: 400;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.donot-gloss {
  font-size: 14px;
  color: var(--bone-muted);
  line-height: 1.7;
  font-weight: 300;
}
.donot-close {
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 62ch;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  color: var(--bone-muted);
  font-weight: 300;
  font-style: italic;
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
}

/* ---------- Intake — two paths ---------- */
.intake {
  padding: var(--section-pad) 0;
}
.intake h2 { margin-bottom: 20px; }
.intake-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(56px, 7vw, 88px);
  margin-top: clamp(56px, 7vw, 88px);
}
@media (min-width: 960px) {
  .intake-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 72px);
  }
}
.intake-path {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
}
@media (min-width: 960px) {
  .intake-path + .intake-path {
    padding-left: clamp(40px, 5vw, 72px);
    border-left: 1px solid var(--paper-rule);
  }
}
.intake-path-head { display: flex; flex-direction: column; gap: 14px; }
.intake-path-label {
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-darkest);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.intake-path-label::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--gold-deep);
  display: inline-block;
}
.intake-path h3 {
  font-family: var(--ff-display);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 400;
  color: var(--paper-ink);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
  max-width: 18ch;
}
.intake-path-lede {
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper-muted);
  max-width: 42ch;
  font-weight: 400;
}
.intake-form {
  max-width: 100%;
  margin-top: 0;
}
.field { margin-bottom: 28px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.field-row .field { margin-bottom: 28px; }
@media (min-width: 620px) {
  .field-row { grid-template-columns: 1fr 1fr; gap: 28px; }
}

.intake-form label {
  display: block;
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-darkest);
  margin-bottom: 12px;
}
.intake-form label .req {
  color: var(--gold-darkest);
  margin-left: 2px;
}
.intake-form label .optional {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--paper-muted);
  font-weight: 400;
  font-size: 11px;
  margin-left: 6px;
}

.intake-form input,
.intake-form select,
.intake-form textarea {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper-ink);
  background: transparent;
  border: 1px solid var(--paper-rule);
  border-radius: 2px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.intake-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23A8863E' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
.intake-form textarea { resize: vertical; min-height: 140px; }
.intake-form input:focus,
.intake-form select:focus,
.intake-form textarea:focus {
  border-color: var(--gold-darkest);
  outline: none;
  box-shadow: 0 0 0 3px rgba(107, 83, 32, 0.18);
  background: rgba(255,255,255,0.4);
}

.submit-row {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
@media (min-width: 680px) {
  .submit-row { flex-direction: row; align-items: center; gap: 32px; }
}
.submit {
  padding: 17px 38px;
  background: var(--paper-ink);
  color: var(--paper);
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--paper-ink);
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
  position: relative;
  overflow: hidden;
}
.submit:hover {
  background: var(--gold-darkest);
  border-color: var(--gold-darkest);
  color: var(--paper);
}
.submit-note {
  font-size: 12px;
  color: var(--paper-muted);
  line-height: 1.6;
  max-width: 360px;
  font-style: italic;
}

/* Inline error after AJAX submission failure. Hidden by default via the
   [hidden] HTML attribute; JS removes [hidden] and populates textContent
   when Formspree returns an error. */
.form-error {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(168, 134, 62, 0.08);
  border-left: 2px solid var(--gold-darkest);
  font-family: var(--ff-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--paper-ink);
  max-width: 480px;
}

/* ---------- Footer ---------- */
footer {
  background: #060810;
  color: var(--bone-muted);
  padding: clamp(72px, 9vw, 128px) 0 56px;
  border-top: 1px solid var(--ink-rule);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  /* margin-bottom removed: in v3 .footer-brand is a flex item inside
     .footer-lockup, which handles vertical spacing via its own
     padding-bottom + margin-bottom. The legacy 56px margin here was
     inflating the lockup row height to ~140px and pushing the
     brokerage block visibly off-center. */
  margin-bottom: 0;
}
.footer-mark {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  color: var(--gold);
}
.footer-brandname {
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--bone);
  letter-spacing: 0.005em;
  font-variation-settings: "opsz" 72, "SOFT" 30;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--ink-rule);
}
@media (min-width: 780px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 64px;
  }
}
.footer-col h4 {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.footer-col p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--bone-muted);
  margin-bottom: 6px;
}
.footer-col strong { color: var(--bone); font-weight: 500; }
.footer-col a { color: var(--bone); text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease; }
.footer-col a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.footer-cta {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--ff-sans);
  font-size: 11.5px !important;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold) !important;
  border-bottom: 1px solid var(--gold) !important;
  padding-bottom: 3px;
}

.disclosure-block {
  margin-top: 40px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(237, 232, 220, 0.62);
  max-width: 880px;
}
.disclosure-block p { margin-bottom: 16px; }
.disclosure-block strong {
  color: var(--bone);
  font-weight: 500;
}
.regnum {
  font-family: var(--ff-sans);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: rgba(237, 232, 220, 0.65);
  margin-top: 28px;
  text-transform: uppercase;
}
.regnum-value {
  font-style: italic;
  color: var(--gold);
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 72, "WONK" 1;
}
.copyright {
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 232, 220, 0.5);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   NOTES SECTION — index (Level 1) + article (Level 2)
   ===================================================================== */

/* ---------- Notes index page ---------- */
.notes-page {
  padding: clamp(120px, 14vw, 200px) 0 clamp(80px, 10vw, 140px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.notes-head {
  max-width: var(--maxw-prose);
  padding: 0 var(--pad-x-wide);
  margin: 0 auto clamp(64px, 8vw, 112px);
}
.notes-head h1 {
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 300;
  margin-bottom: 28px;
  max-width: 14ch;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.notes-head .notes-intro {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--bone-muted);
  max-width: 60ch;
  font-weight: 300;
}

.notes-groups {
  padding: 0 var(--pad-x-wide);
  display: grid;
  gap: clamp(72px, 9vw, 128px);
}

.notes-group-head {
  max-width: var(--maxw-prose);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.notes-group-head h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 12px;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.notes-group-head .notes-group-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--bone-muted);
  max-width: 58ch;
  font-weight: 300;
}

.notes-entry-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.notes-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 2.5vw, 32px);
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--ink-rule);
  text-decoration: none;
  color: var(--bone);
  transition: border-color .25s ease;
}
.notes-entry:last-of-type { border-bottom: 1px solid var(--ink-rule); }
.notes-entry:hover { border-top-color: rgba(201, 169, 97, 0.35); }
.notes-entry:hover + .notes-entry { border-top-color: rgba(201, 169, 97, 0.35); }

.notes-entry-tag {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 12px;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 999px;
  white-space: nowrap;
  align-self: center;
}
.notes-entry-text h3 {
  font-family: var(--ff-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  color: var(--bone);
  line-height: 1.25;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.notes-entry-text .notes-entry-desc {
  font-size: 14.5px;
  color: var(--bone-muted);
  line-height: 1.6;
  font-weight: 300;
  max-width: 62ch;
}
.notes-entry-date {
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-muted);
  white-space: nowrap;
  align-self: center;
}

/* Placeholder entry state — lower opacity so real content pops when added */
.notes-entry.is-placeholder {
  opacity: 0.38;
  pointer-events: none;
}
.notes-entry.is-placeholder h3 { font-style: italic; font-weight: 300; }
.notes-entry.is-placeholder .notes-entry-date { font-style: italic; text-transform: none; letter-spacing: 0.04em; font-family: var(--ff-display); font-weight: 300; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; color: var(--bone-muted); }

@media (max-width: 680px) {
  .notes-entry {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .notes-entry-tag { justify-self: start; }
  .notes-entry-date { justify-self: start; }
}

.notes-close {
  max-width: var(--maxw-prose);
  margin: clamp(72px, 9vw, 120px) auto 0;
  padding: 0 var(--pad-x-wide);
  font-size: 14px;
  line-height: 1.65;
  color: var(--bone-faint);
  font-style: italic;
  font-family: var(--ff-display);
  font-weight: 300;
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
}

/* Notes "coming soon" indicator. Sits beneath the intro paragraph, above
   the (currently empty) groups area. Subtle, italic, gold to signal "this
   page will populate" without resembling marketing urgency copy. */
.notes-coming-soon {
  margin-top: 28px;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.notes-coming-soon::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* Empty-state logic: a group is hidden whenever its entry list contains
   zero real <a class="notes-entry"> children. The `:has()` selector
   is supported in all modern evergreen browsers (Chrome/Edge/Safari/Firefox).
   The HTML also comments out groups B and C entirely at launch as a
   belt-and-suspenders fallback. */
.notes-group:not(:has(.notes-entry-list a.notes-entry)) {
  display: none;
}

/* ---------- Individual note page (Level 2 article template) ---------- */
.article { padding: 0; }
.article-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
}

/* Hero band: dark, holds eyebrow/title/date/byline/PDF link. */
.article-hero {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(120px, 14vw, 180px) 0 clamp(56px, 7vw, 96px);
}

/* Paper band: cream panel that wraps the body for legibility. */
.article-paper {
  background: var(--paper);
  color: var(--paper-ink);
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
}

/* Inner two-column wrapper. Mobile-first: single column, TOC hidden.
   At >= 1024px, splits into a sticky-TOC rail + prose column. */
.article-paper-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
  display: block;
}
.article-paper-inner .article-body-wrap { min-width: 0; }
@media (min-width: 1024px) {
  .article-paper-inner {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 220px minmax(0, 720px);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
    justify-content: center;
  }
}

/* ---------- Sticky table of contents ---------- */
.article-toc {
  display: none; /* hidden < 1024px; built/shown by JS only when there are H2s */
  position: sticky;
  top: 96px;
  align-self: start;
  background: var(--ink);
  color: var(--bone);
  padding: 22px 22px 24px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  border: 1px solid rgba(201, 169, 97, 0.18);
}
.article-toc.is-ready { display: block; }
.article-toc-label {
  margin: 0 0 16px;
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.article-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.article-toc-list li {
  counter-increment: toc;
  margin: 0;
}
/* Resting state: every section reads clearly so the reader sees the full
   shape of the article. Bone at ~78% opacity keeps it bright and legible
   against the dark card without competing with the active row.
   Active state: full bone + a thicker gold left border + slight weight bump
   makes the current section unmistakable, while the unread sections still
   look like a real list of forthcoming content rather than greyed-out filler. */
.article-toc-list a {
  display: block;
  padding: 8px 0 8px 14px;
  border-left: 1px solid rgba(201, 169, 97, 0.30);
  font-family: var(--ff-display);
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 400;
  color: rgba(237, 232, 220, 0.82);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, border-left-width .2s ease, padding-left .2s ease;
  font-variation-settings: "opsz" 14, "SOFT" 30;
}
.article-toc-list a:hover {
  color: var(--bone);
  border-left-color: var(--gold);
}
.article-toc-list a.is-current {
  color: var(--bone);
  border-left-color: var(--gold);
  border-left-width: 2px;
  padding-left: 13px; /* compensate so text doesn't shift on activation */
  font-weight: 500;
}

/* Smooth-scroll target offset so anchored sections land below the topbar. */
.article-body h2 {
  scroll-margin-top: 96px;
}
@media (min-width: 1024px) {
  .article-body h2 { scroll-margin-top: 112px; }
}
@media (max-width: 1023px) {
  .article-toc { display: none !important; }
}

.article-tail {
  padding: clamp(48px, 6vw, 72px) 0 clamp(80px, 10vw, 140px);
  background: var(--ink);
}
.article-return {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-muted);
  text-decoration: none;
  margin-bottom: clamp(56px, 7vw, 88px);
  transition: color .25s ease, gap .25s ease;
}
.article-return:hover { color: var(--gold); gap: 14px; }
.article-return-bottom { margin-top: clamp(72px, 9vw, 120px); margin-bottom: 0; }

.article-meta .article-eyebrow {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.article-meta .article-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.article-title {
  font-family: var(--ff-display);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  color: var(--bone);
  max-width: 22ch;
}
.article-date {
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-muted);
}

.article-pdf-link {
  margin-top: 18px;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.article-pdf-link a {
  color: var(--bone-muted);
  border-bottom: 1px solid rgba(237, 232, 220, 0.25);
  padding-bottom: 3px;
  transition: color .25s ease, border-color .25s ease;
}
.article-pdf-link a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.article-divider {
  height: 1px;
  background: var(--gold);
  width: 56px;
  margin: clamp(40px, 5vw, 56px) 0 clamp(40px, 5vw, 56px);
  border: 0;
  opacity: 0.8;
}
.article-divider.is-full {
  width: 100%;
  background: rgba(201, 169, 97, 0.3);
}

.article-body {
  font-family: var(--ff-display);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--bone);
  font-weight: 400;
  font-variation-settings: "opsz" 14, "SOFT" 30;
}
.article-body p {
  margin: 0 0 26px;
  max-width: 68ch;
}
.article-body p:last-child { margin-bottom: 0; }
.article-body h2 {
  font-family: var(--ff-display);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: clamp(48px, 6vw, 72px) 0 18px;
  color: var(--bone);
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.article-body h3 {
  font-family: var(--ff-display);
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: clamp(36px, 4.5vw, 48px) 0 14px;
  color: var(--bone);
  font-variation-settings: "opsz" 72, "SOFT" 30;
}
.article-body ul, .article-body ol {
  margin: 0 0 26px;
  padding-left: 0;
  list-style: none;
  max-width: 64ch;
}
.article-body ul li, .article-body ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.65;
}
.article-body ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.65em;
  width: 10px; height: 1px;
  background: var(--gold);
}
.article-body ol { counter-reset: article-ol; }
.article-body ol li { counter-increment: article-ol; }
.article-body ol li::before {
  content: counter(article-ol) '.';
  position: absolute;
  left: 0; top: 0;
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "WONK" 1;
}
.article-body blockquote {
  margin: clamp(32px, 4vw, 48px) 0;
  padding: 0 0 0 28px;
  border-left: 2px solid var(--gold);
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--bone);
  font-weight: 300;
  max-width: 62ch;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}
.article-body strong, .article-body b { font-weight: 600; color: var(--bone); }
.article-body em, .article-body i { font-style: italic; font-variation-settings: "opsz" 14, "SOFT" 80, "WONK" 1; }
.article-body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover { color: var(--gold-deep); }

/* Callouts — Note and Caution */
.callout {
  margin: clamp(32px, 4vw, 48px) 0;
  padding: 24px 28px;
  background: rgba(201, 169, 97, 0.06);
  border-left: 2px solid var(--gold);
  max-width: 68ch;
}
.callout-label {
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display: block;
}
.callout p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--bone);
  font-weight: 400;
  max-width: 100%;
}
.callout-caution {
  border-left-color: var(--gold-deep);
  background: rgba(168, 134, 62, 0.09);
}
.callout-caution .callout-label { color: var(--gold-deep); }

.article-disclaimer {
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 13px;
  line-height: 1.65;
  color: var(--bone-faint);
  font-style: italic;
  font-family: var(--ff-display);
  font-weight: 300;
  max-width: 62ch;
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
}

/* Author byline. Sits beneath the date in the hero meta. */
.article-byline {
  margin-top: 14px;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--bone-muted);
  font-weight: 400;
  letter-spacing: 0.005em;
  font-variation-settings: "opsz" 14, "SOFT" 80, "WONK" 1;
}

/* Italic gold accent on the meta title. Authors mark the accent fragment
   of the title with <em>...</em> in the article HTML; the same markup is
   re-used by the PDF cover for the gold italic moment. */
.article-meta .article-title em {
  font-style: italic;
  color: var(--gold);
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
}

/* When the body sits inside the cream paper panel, switch all colors to
   dark-on-paper. This is what fixes the "perceived bold" issue caused by
   bright bone-on-ink body type, and what gives the page reading-grade
   contrast (matches the reference PDF body-page treatment). */
.article-paper .article-body {
  color: var(--paper-ink);
  counter-reset: article-section;
}
.article-paper .article-body h2,
.article-paper .article-body h3 {
  color: var(--paper-ink);
}

/* Section design rhythm. Each H2 gets a short gold hairline above it as a
   visual divider so the page reads as a sequence of moments rather than
   one continuous wall of prose. The first paragraph of each section gets
   a serif drop-cap in gold-deep — quiet editorial flourish that lifts the
   page without crowding the type. The first H2 keeps the rule but the
   margin is reduced because the divider above the body already separates
   it from the title. */
.article-paper .article-body h2 {
  counter-increment: article-section;
  position: relative;
  padding-top: clamp(36px, 4vw, 52px);
  margin-top: clamp(64px, 7vw, 96px);
}
.article-paper .article-body h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--gold-deep);
}
.article-paper .article-body h2 + p::first-letter {
  font-family: var(--ff-display);
  font-size: 4em;
  line-height: 0.85;
  font-weight: 300;
  color: var(--gold-deep);
  float: left;
  padding: 6px 14px 0 0;
  margin-top: 4px;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
}
.article-paper .article-body h2:first-of-type {
  margin-top: clamp(40px, 4vw, 56px);
}

/* Closing summary H2 ("What this list is, and what it is not.") — no
   number prefix in source, treated like a regular section. */
.article-paper .article-body blockquote {
  color: var(--paper-ink);
  border-left-color: var(--gold-deep);
}
.article-paper .article-body strong,
.article-paper .article-body b {
  color: var(--paper-ink);
  font-weight: 500; /* a notch above body, well below 600 — avoids the bold-on-bold effect */
}
.article-paper .article-body em,
.article-paper .article-body i {
  color: var(--paper-ink);
}
.article-paper .article-body a {
  color: var(--gold-deep);
  text-decoration-color: rgba(168, 134, 62, 0.45);
}
.article-paper .article-body a:hover { color: var(--gold-darkest); }
.article-paper .article-body ul li::before { background: var(--gold-deep); }
.article-paper .article-body ol li::before { color: var(--gold-deep); }
.article-paper .callout {
  background: rgba(168, 134, 62, 0.08);
  border-left-color: var(--gold-deep);
}
.article-paper .callout p { color: var(--paper-ink); }
.article-paper .callout-label { color: var(--gold-deep); }
.article-paper .callout-caution { background: rgba(168, 134, 62, 0.14); }
.article-paper .article-disclaimer {
  color: var(--paper-muted);
  border-top: 1px solid var(--paper-rule);
  padding-top: 24px;
}
.article-paper .article-divider.is-full {
  background: var(--paper-rule);
  opacity: 1;
}

/* Article-specific print overrides (main print block handles the rest) */
@media print {
  .article-return { display: none; }
  .article-body { color: #000; }
  .callout { background: #f5f5f5; color: #000; }
}

/* =====================================================================
   THANKS PAGE — branded confirmation after Formspree submission
   ===================================================================== */
.thanks-page {
  min-height: calc(100vh - 200px);
  min-height: calc(100svh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(120px, 14vw, 180px) 0 clamp(80px, 10vw, 140px);
}
.thanks-inner {
  max-width: var(--maxw-prose);
  margin: 0 auto;
  padding: 0 var(--pad-x-wide);
  text-align: left;
}
.thanks-heading {
  font-family: var(--ff-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--bone);
  margin: 0 0 32px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.thanks-lede {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
  color: var(--bone);
  font-weight: 300;
  max-width: 52ch;
  margin: 0 0 32px;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}
.thanks-meta {
  font-family: var(--ff-sans);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--bone-muted);
  letter-spacing: 0.005em;
  max-width: 52ch;
  margin: 0 0 56px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-rule);
}
/* Thanks-return uses a slightly higher specificity selector to beat the
   global `a:hover { color: var(--gold) }` cascade and the body color. */
a.thanks-return {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  text-decoration: none;
  transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
a.thanks-return:hover {
  gap: 14px;
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}

/* =====================================================================
   v3 COMPLIANCE ADDITIONS — Brokerage Identification
   ---------------------------------------------------------------------
   RECO Bulletins 5.1 / 5.3 require the employing brokerage to be
   "clearly and prominently identified". v3 carries the brokerage in
   THREE places: (1) a dedicated strip ABOVE the topbar so it's the
   first thing painted, (2) the hero disclosure-inline immediately
   beneath the headline, and (3) the footer with full brokerage column
   and lockup. The Primegate topbar is reserved for navigation.
   ===================================================================== */

/* ---------- TOP BROKERAGE STRIP ----------
   Both the brokerage bar and the Primegate topbar are fixed at the
   top of the viewport. The brokerage bar sits at top:0 and is always
   visible (continuous brokerage identification per Bulletin 5.3). The
   topbar is offset downward so it doesn't overlap. The body picks up
   a padding-top equal to the brokerage bar height so the hero clears
   the bar on first paint.
*/
:root {
  --brokerage-bar-h: 60px;
}
body {
  padding-top: var(--brokerage-bar-h);
}
.brokerage-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: #06090F;
  border-bottom: 1px solid var(--ink-rule);
  font-family: var(--ff-sans);
  color: var(--bone);
}
/* Topbar sits beneath the brokerage strip, still fixed and persistent. */
.topbar {
  top: var(--brokerage-bar-h);
}
.brokerage-bar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--pad-x-wide);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.brokerage-bar-link {
  grid-column: 2;
  justify-self: center;
}
.brokerage-bar-meta {
  grid-column: 3;
  justify-self: end;
}
.brokerage-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--bone);
  text-decoration: none;
}
.brokerage-bar-link:hover { color: var(--gold); }
.brokerage-bar-logo {
  height: 36px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.brokerage-bar-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
}
.brokerage-bar-name {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}
.brokerage-bar-sub {
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-muted);
  margin-top: 3px;
}
.brokerage-bar-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bone-muted);
}
.brokerage-bar-meta a {
  color: var(--bone-muted);
  text-decoration: none;
}
.brokerage-bar-meta a:hover { color: var(--gold); }
.brokerage-bar-sep { opacity: 0.5; }

@media (max-width: 820px) {
  .brokerage-bar-inner { padding: 8px var(--pad-x); gap: 12px; }
  .brokerage-bar-meta { font-size: 10.5px; }
}
@media (max-width: 600px) {
  .brokerage-bar-inner { grid-template-columns: 1fr; }
  .brokerage-bar-link { grid-column: 1; }
  .brokerage-bar-meta { display: none; }
  .brokerage-bar-logo { height: 30px; }
  .brokerage-bar-name { font-size: 10.5px; }
  .brokerage-bar-sub { font-size: 8.5px; letter-spacing: 0.14em; }
}

/* Prevent nav items from ever wrapping mid-label. */
.topbar nav a { white-space: nowrap; }

/* ---------- LEGACY topbar lockup styles (no longer rendered — markup
   moved out of the topbar into .brokerage-bar above). Kept commented
   out for one cycle in case any local override references them; safe
   to delete in a future cleanup pass.
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}
.brand-divider {
  width: 1px;
  height: 44px;
  background: var(--ink-rule);
  flex: 0 0 1px;
}
.topbar.over-light .brand-divider {
  background: var(--paper-rule);
}
.brokerage-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.g1-logo {
  height: 36px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.topbar.over-light .g1-logo {
  content: url("assets/homelife-g1-logo-black.png");
}
.brokerage-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  font-family: var(--ff-sans);
  max-width: 245px;
  flex-shrink: 0;
}
.brokerage-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
}
.brokerage-sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-muted);
  margin-top: 6px;
}
.topbar.over-light .brokerage-name {
  color: var(--paper-ink);
}
.topbar.over-light .brokerage-sub {
  color: var(--paper-muted);
}

@media (max-width: 720px) {
  .brand-divider { display: none; }
  .brokerage-text { display: none; }
  .brand-lockup { gap: 12px; }
  .g1-logo { height: 26px; }
}
*/
/* ---------- END LEGACY ---------- */

/* ---------- FOOTER co-equal lockup ---------- */
.footer-lockup {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--ink-rule);
}
.footer-divider {
  width: 1px;
  height: 44px;
  background: var(--ink-rule);
  flex: 0 0 1px;
}
.footer-brokerage {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.footer-g1-logo {
  height: 40px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.footer-brokerage-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  font-family: var(--ff-sans);
}
.footer-brokerage-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
}
.footer-brokerage-sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-muted);
  margin-top: 5px;
}
.regnum-inline {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bone-muted);
  margin-top: 8px;
}
.regnum-inline .regnum-value {
  color: var(--bone);
  font-weight: 500;
}

@media (max-width: 720px) {
  .footer-lockup {
    gap: 18px;
    margin-bottom: 36px;
    padding-bottom: 28px;
  }
  .footer-divider { display: none; }
  .footer-g1-logo { height: 32px; }
}