/* Self-hosted webfonts (SIL Open Font License 1.1; see assets/fonts/LICENSES.txt). Latin + Latin Extended subsets. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-condensed-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-condensed-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/source-serif-4-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/source-serif-4-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Life UnLocked Partners: design comp v2 (2026-10-02)
   Brand-led system: ink, logo gold, paper. Display type from the condensed
   wordmark (Barlow Condensed), text in Source Serif 4, UI in Barlow.
   Gold rule: logo gold on ink only; on light, gold is a fill under ink text. */

:root {
  --ink: #121821;
  --ink-raised: #1c2531;
  --on-ink: #eef1f5;
  --on-ink-2: #b9c1cc;
  --line-ink: rgba(238, 241, 245, 0.16);

  --paper: #fbf9f4;
  --paper-gold: #f7efdc;
  --text: #161b22;
  --text-2: #4a5160;
  --line: rgba(22, 27, 34, 0.16);
  --field-border: #7a7568;

  --gold: #e3ac38;            /* logo gold: on ink only */
  --gold-ink-hover: #f0bf55;
  --gold-fill: #de9c21;       /* fills on light, ink text (6.8:1) */
  --gold-fill-hover: #ca8c21;
  --gold-deep: #98671b;       /* text-safe gold on light (4.6:1) */
  --on-gold: #0b0f17;         /* text on gold: darkest ink, one weight step heavier than elsewhere */

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-ui: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Source Serif 4", Georgia, serif;

  --fs-label: 0.875rem;
  --fs-small: 1rem;
  --fs-body: 1.125rem;
  --fs-lead: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
  --fs-h3: clamp(1.5rem, 1.35rem + 0.55vw, 1.75rem);
  --fs-h2: clamp(2.375rem, 1.75rem + 2.3vw, 3.5rem);
  --fs-h1a: clamp(2.75rem, 1.65rem + 4.3vw, 5.25rem);
  --fs-h1b: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --wrap: min(100% - 2 * var(--gutter), 75rem);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 var(--fs-body)/1.6 var(--font-text);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.05; text-wrap: balance; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

.container { width: var(--wrap); margin-inline: auto; }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--gold); color: var(--on-gold); padding: var(--s-3) var(--s-4);
  font: 600 1rem var(--font-ui); text-decoration: none;
}
.skip:focus { top: var(--s-4); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.site-header :focus-visible, .section--ink :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }

/* ---------- shared pieces ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 0.6em;
  font: 600 var(--fs-label)/1 var(--font-display);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2);
  margin-bottom: var(--s-5);
}
.kicker::before { content: ""; width: 0.7em; height: 0.7em; background: var(--gold-fill); flex: none; }
.kicker--gold { color: var(--gold); }
.kicker--gold::before { background: var(--gold); }

.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 36rem; color: var(--text-2); }
.lead--ink { color: var(--on-ink); }

.section { padding-block: var(--section-y); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--paper2 { background: var(--paper-gold); }
.section-head { max-width: 46rem; margin-bottom: var(--s-8); }
.section-head__sub { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 38rem; }

.gold { color: var(--gold); }

/* buttons: one border width for every variant, so heights always match */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0 1.5rem;
  font: 600 1rem/1 var(--font-ui); letter-spacing: 0.01em; text-decoration: none;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 2.75rem; padding: 0 1.1rem; }
.btn--gold { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--on-gold); font-weight: 700; }
.btn--gold:hover { background: var(--gold-fill-hover); border-color: var(--gold-fill-hover); }
.btn--gold-on-ink { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; }
.btn--gold-on-ink:hover { background: var(--gold-ink-hover); border-color: var(--gold-ink-hover); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--ink-raised); border-color: var(--ink-raised); }

.link-arrow {
  display: inline-flex; align-items: baseline; gap: 0.45em;
  font: 600 1rem/1.4 var(--font-ui); color: var(--text);
  text-decoration: underline; text-decoration-color: var(--gold-fill);
  text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  transition: text-decoration-color 0.15s ease;
}
.link-arrow::after { content: "→"; display: inline-block; transition: transform 0.15s ease; }
.link-arrow:hover { text-decoration-color: var(--text); }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow--external::after { content: "↗"; }
.link-arrow--external:hover::after { transform: translate(2px, -2px); }

.tbc {
  display: inline-block; margin-left: 0.15em; padding: 0.05em 0.45em;
  font: 600 0.8125rem/1.5 var(--font-ui); color: #6b4a12; white-space: nowrap;
  border: 1px dashed var(--gold-deep); border-radius: 2px; background: rgba(222, 156, 33, 0.1);
}
.tbc--ink-bg { color: #f3d58a; border-color: rgba(227, 172, 56, 0.7); background: rgba(227, 172, 56, 0.08); margin-left: 0; }
.tbc--on-gold { color: var(--on-gold); border-color: var(--on-gold); background: rgba(11, 15, 23, 0.06); font-weight: 700; white-space: normal; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--on-ink); }
.site-header__bar { display: flex; align-items: center; gap: var(--s-6); min-height: var(--header-h); }
.site-header__logo { flex: none; display: block; }
.site-header__logo img { height: 50px; width: auto; transition: opacity 0.15s ease; }
.site-header__logo:hover img { opacity: 0.82; }
.site-nav { display: flex; align-items: center; gap: var(--s-6); flex: 1; }
.site-nav__list { display: flex; gap: 1.6rem; }
.site-nav__list a {
  font: 500 1rem/1 var(--font-ui); color: var(--on-ink); text-decoration: none;
  padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: border-color 0.15s ease, color 0.15s ease;
}
.site-nav__list a:hover { border-bottom-color: var(--gold); }
.site-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.menu-toggle { display: none; }

/* ---------- hero: the split ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; }
.hero::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0;
  left: calc((100% - var(--wrap)) / 2 + var(--wrap) * 0.5833);
  background: var(--gold-fill);
}
.hero__grid { display: grid; grid-template-columns: 7fr 5fr; position: relative; z-index: 1; }

/* the wave: one engraved drawing, gold on paper, paper-white on gold, flipping at the split like the monogram.
   It always runs edge to edge (the svg uses preserveAspectRatio="none"). Up to 1520px the drawing scales with the
   page, exactly as approved; wider than that its height holds at 380px and only its length grows, so the same arc
   spans 2560, ultrawide and 4K. On those widths the copy sits further along the back of the swell, so the hero
   gains a little foot room (--wave-room) to keep the lines clear of the buttons. */
.hero { --split: calc((100% - var(--wrap)) / 2 + var(--wrap) * 0.5833); --wave-room: clamp(0px, (100vw - 1520px) * 0.035, 3rem); }
.hero__wave { position: absolute; left: 0; right: 0; bottom: 0; height: 0; padding-top: min(25%, 380px); pointer-events: none; }  /* 25% of the hero's own width, so a scrollbar never skews it */
.hero__wave svg, .panel-wave svg { display: block; width: 100%; height: 100%; }
.hero__wave svg { position: absolute; inset: 0; overflow: visible; }
.hero__wave--paper { color: var(--gold-fill); clip-path: inset(0 calc(100% - ((100% - var(--wrap)) / 2 + var(--wrap) * 0.5833)) 0 0); }
.hero__wave--gold { color: var(--paper); clip-path: inset(0 0 0 calc((100% - var(--wrap)) / 2 + var(--wrap) * 0.5833)); }
.panel-wave { display: none; }
.hero__copy { padding: var(--section-y) clamp(2rem, 4vw, 4.5rem) calc(var(--section-y) + 5rem + var(--wave-room)) 0; }
.hero__title { margin-bottom: var(--s-6); }
.hero__title-a {
  display: block; font: 500 var(--fs-h1a)/0.98 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.005em;
}
.hero__title-b {
  display: block; margin-top: 0.55em; max-width: 30ch;
  font: italic 400 var(--fs-h1b)/1.3 var(--font-text); color: var(--text);
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); margin-top: var(--s-6); }

.hero__panel { padding: var(--section-y) 0 var(--section-y) clamp(2rem, 3.5vw, 3.5rem); color: var(--on-gold); }
.panel-label {
  font: 700 var(--fs-label)/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: var(--s-5); padding-top: calc(0.4em + 2.5px);
}
.promises li {
  position: relative; padding: var(--s-4) 0 var(--s-4) 2.1rem;
  border-top: 1px solid rgba(11, 15, 23, 0.32); line-height: 1.5; font-weight: 500;
}
.promises li:last-child { border-bottom: 1px solid rgba(11, 15, 23, 0.32); }
.promises li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem; width: 1.15rem; height: 1.15rem;
  background: var(--on-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
.promises__title { display: block; font: 700 1.125rem/1.3 var(--font-ui); margin-bottom: 0.15rem; }

/* ---------- who we help ---------- */
.split-head { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.split-head__intro { position: sticky; top: calc(var(--header-h) + 2.5rem); }
.who-list__item { position: relative; padding: var(--s-6) 0 var(--s-7); border-top: 1px solid var(--line); }
.who-list__item::before { content: ""; position: absolute; top: -5px; left: 0; width: 10px; height: 10px; background: var(--gold-fill); }
.who-list__item h3 { margin-bottom: var(--s-3); }
.who-list__item p { max-width: 38rem; color: var(--text-2); margin-bottom: var(--s-4); }

/* ---------- special needs (ink) ---------- */
.sn { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.sn__title { font-size: clamp(2.5rem, 1.6rem + 3.3vw, 4.25rem); line-height: 1.02; max-width: 14ch; }
.sn__body { padding-top: 2.6rem; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-6); margin: var(--s-7) 0; }
.pillars > div { border-top: 2px solid var(--gold); padding-top: var(--s-4); }
.pillars dt { font: 600 1.125rem/1.3 var(--font-ui); color: var(--on-ink); margin-bottom: 0.35rem; }
.pillars dd { line-height: 1.5; color: var(--on-ink-2); }

/* ---------- how it works ---------- */
.steps, .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; margin-bottom: var(--s-5);
  background: var(--gold-fill); color: var(--on-gold); font: 700 1.75rem/1 var(--font-display);
}
.step h3 { margin-bottom: var(--s-3); }
.step p { color: var(--text-2); }
.facts { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--text); }
.facts dt { font: 600 var(--fs-label)/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--s-3); }
.facts dd { line-height: 1.55; color: var(--text-2); }

/* ---------- why / Mark ---------- */
.why { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.portrait { margin: 0; position: sticky; top: calc(var(--header-h) + 2.5rem); isolation: isolate; }
.portrait__frame { position: relative; aspect-ratio: 4 / 5; background: var(--ink); display: grid; place-items: center; }
.portrait__frame::before { content: ""; position: absolute; z-index: -1; right: -18px; bottom: -18px; width: 58%; height: 58%; background: var(--gold-fill); }
.portrait__mark { width: 34%; }
.portrait__note { position: absolute; left: var(--s-4); bottom: var(--s-4); font: 500 0.875rem/1 var(--font-ui); color: var(--on-ink-2); }
.portrait figcaption { margin-top: calc(var(--s-5) + 18px); font: 400 1rem/1.5 var(--font-ui); color: var(--text-2); }
.portrait figcaption strong { display: block; font: 600 var(--fs-lead)/1.2 var(--font-display); color: var(--text); }
.why__body .section-head__sub { margin-bottom: var(--s-7); }
.reasons > div { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.reasons > div:last-child { border-bottom: 1px solid var(--line); margin-bottom: var(--s-6); }
.reasons dt { font: 600 var(--fs-lead)/1.2 var(--font-display); margin-bottom: 0.35rem; }
.reasons dd { color: var(--text-2); max-width: 40rem; }

/* ---------- questions ---------- */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0; font: 600 var(--fs-lead)/1.35 var(--font-ui);
  transition: color 0.15s ease;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; position: absolute; right: 0.25rem; top: 50%; width: 1.25rem; height: 1.25rem; margin-top: -0.625rem;
  background:
    linear-gradient(var(--text), var(--text)) center / 100% 2px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 2px 100% no-repeat;
  transition: transform 0.2s ease;
}
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list summary:hover { color: var(--gold-deep); }
.faq__list details p { padding: 0 3rem 1.6rem 0; color: var(--text-2); max-width: 44rem; }

/* ---------- talk (gold) ---------- */
.talk { background: var(--gold-fill); color: var(--on-gold); padding-block: var(--section-y); }
.talk__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.talk__copy h2 { font-size: clamp(2.5rem, 1.6rem + 3.3vw, 4.25rem); font-weight: 600; line-height: 1.02; margin-bottom: var(--s-5); }
.talk__copy p { font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; max-width: 30rem; }
.talk__copy .talk__alt { margin-top: var(--s-6); font: 600 1rem/1.6 var(--font-ui); }
.talk__form { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 2px; }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--s-5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.field label { font: 600 1rem/1.3 var(--font-ui); }
.field .opt { font-weight: 500; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 var(--fs-body)/1.4 var(--font-text); color: var(--text);
  background: #fff; border: 1px solid var(--field-border); border-radius: 2px; padding: 0.75rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(222, 156, 33, 0.55); }
.field textarea { resize: vertical; min-height: 7.5rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.talk__form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.form-status { font: 500 1rem/1.4 var(--font-ui); color: var(--text-2); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-2); padding: var(--s-9) 0 var(--s-7); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); }
.site-footer__brand img { width: 190px; margin-bottom: var(--s-5); }
.site-footer__brand p { font-size: 1rem; line-height: 1.55; max-width: 18rem; }
.site-footer h2 { font: 600 var(--fs-label)/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-5); }
.site-footer__col li { margin-bottom: 0.7rem; }
.site-footer__col a, .linklike {
  font: 500 1rem/1.4 var(--font-ui); color: var(--on-ink-2); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease;
}
.site-footer__col a:hover, .linklike:hover { color: var(--on-ink); border-bottom-color: var(--gold); }
.linklike { background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0; cursor: pointer; }
.site-footer__legal { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-ink); }
.site-footer__legal p { font-size: 1rem; line-height: 1.6; max-width: 72ch; }
.site-footer__copy { margin-top: var(--s-4); font-family: var(--font-ui); }

/* ---------- story v3 (2026-10-05): how we invest, in plain words ----------
   Mark asked for the retail site to speak to "regular people". The investing idea is told without jargon,
   beside one picture of the portfolio: 22 equal squares, two for each part of the economy (his Schwab page:
   "two in each of the eleven sectors"). Gold stays a fill on light, as everywhere on this site. */
.invest { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.invest__body .section-head__sub { margin-bottom: var(--s-7); }
.idea { position: relative; padding: var(--s-6) 0 var(--s-6); border-top: 1px solid var(--line); }
.idea::before { content: ""; position: absolute; top: -5px; left: 0; width: 10px; height: 10px; background: var(--gold-fill); }
.idea:last-child { padding-bottom: 0; }
.idea h3 { margin-bottom: var(--s-3); }
.idea p { max-width: 40rem; color: var(--text-2); }
.portfolio { margin: 0; position: sticky; top: calc(var(--header-h) + 2.5rem); padding: var(--s-6) var(--s-6) var(--s-5); background: var(--paper); border: 1px solid var(--line); }
.portfolio figcaption { margin-bottom: var(--s-5); }
.portfolio__title { display: block; font: 600 var(--fs-h3)/1.15 var(--font-display); color: var(--text); }
.portfolio__sub { display: block; margin-top: var(--s-2); font: 500 1rem/1.45 var(--font-ui); color: var(--text-2); }
.portfolio__rows li { display: flex; align-items: center; gap: var(--s-4); padding: 0.6rem 0; border-top: 1px solid var(--line); font: 500 1rem/1.3 var(--font-ui); color: var(--text); }
.portfolio__rows li:last-child { border-bottom: 1px solid var(--line); }
.pair { display: inline-flex; gap: 5px; flex: none; }
.pair i { display: block; width: 16px; height: 16px; background: var(--gold-fill); }
.portfolio__note { margin-top: var(--s-4); font: italic 400 1rem/1.5 var(--font-text); color: var(--text-2); }
.invest__pro { margin-top: var(--s-8); }
/* the portfolio card and the portrait start level with the kicker's square, as the hero's panel label does
   (measured 2026-10-05: the inline-flex kicker sits 10.7px down its 1.6 line box) */
.portfolio, .why .portrait { margin-top: 10.7px; }

/* ---------- story v4 (2026-10-05): the people at the table ----------
   Mark, by phone: use lul-lc.com, above all the Diligence page. The retail site now names the three people
   a family meets (Mark, Lela, Aleks), states the minimum and the fee-only basis, and gives the inquiry
   address. Still no performance here. */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.person { padding: var(--s-5); background: var(--paper); border: 1px solid var(--line); }
.person__role { font: 600 var(--fs-label)/1.35 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.person__name { margin: var(--s-2) 0 var(--s-3); }
.person p:last-child { font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.people__note { margin-top: var(--s-5); font: italic 400 1rem/1.5 var(--font-text); color: var(--text-2); }
.sn__note { margin: 0 0 var(--s-6); max-width: 38rem; line-height: 1.55; color: var(--on-ink-2); }
.talk__alt a { color: inherit; text-decoration: underline; text-decoration-color: rgba(11, 15, 23, 0.45); text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: text-decoration-color 0.15s ease; }
.talk__alt a:hover { text-decoration-color: var(--on-gold); }

/* ---------- responsive ---------- */
@media (max-width: 1140px) {
  :root { --header-h: 68px; }
  .site-header__logo img { height: 40px; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 0.6rem; margin-left: auto;
    background: none; border: 1px solid var(--line-ink); border-radius: 2px; color: var(--on-ink);
    font: 600 1rem/1 var(--font-ui); padding: 0.7rem 0.9rem; cursor: pointer;
  }
  .menu-toggle:hover { border-color: var(--gold); }
  .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; }
  .menu-toggle__bars { position: relative; }
  .menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .menu-toggle__bars::before { top: -6px; } .menu-toggle__bars::after { top: 6px; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--s-5);
    background: var(--ink); padding: var(--s-4) var(--gutter) var(--s-6); border-top: 1px solid var(--line-ink);
  }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { display: block; padding: 0.9rem 0; font-size: 1.125rem; border-bottom: 1px solid var(--line-ink); }
  .site-nav__actions { margin-left: 0; justify-content: space-between; }
}

@media (max-width: 960px) {
  .hero::before, .hero__wave { display: none; }
  .hero__grid, .split-head, .sn, .why, .faq, .talk__grid { grid-template-columns: 1fr; }
  .hero__copy { padding: var(--s-8) 0 var(--s-7); }
  .hero__panel { position: relative; margin-inline: calc(-1 * var(--gutter)); padding: var(--s-7) var(--gutter) calc(var(--s-7) + 150px); background: var(--gold-fill); overflow: hidden; }
  .panel-wave { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; color: var(--paper); }
  .split-head__intro, .portrait { position: static; }
  .sn__body { padding-top: 0; }
  .portrait { max-width: 22rem; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .steps, .facts, .pillars, .field-row { grid-template-columns: 1fr; }
  .facts { gap: var(--s-5); }
  .faq__list summary { font-size: var(--fs-body); }
  .site-nav__actions { flex-direction: column; align-items: stretch; }
  .site-nav__actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .talk__form-foot .btn { width: 100%; }
}

/* story v3: responsive */
@media (max-width: 960px) {
  .invest { grid-template-columns: 1fr; }
  .portfolio { position: static; max-width: 30rem; }
  .portfolio, .why .portrait { margin-top: 0; }
}

/* story v4: responsive */
@media (max-width: 720px) {
  .people { grid-template-columns: 1fr; }
  .tbc { white-space: normal; }   /* a long chip wraps instead of running past a phone's edge */
}

@media print {
  .site-header, .talk__form, #userprefs-root { display: none !important; }
}

/* ---------- story v5 (2026-10-06): Mark's retail memo ----------
   30-day agreements above the fold, the monthly one-on-one time as a fifth promise, "Why families choose us"
   with the big-bank comparison and his eight points of difference, steps with actions, special needs on its own
   page. Performance is built but shown only in review mode until Lela approves it. Placeholders ("to confirm")
   show only in review mode (?review). */
[hidden] { display: none !important; }
.tbc { display: none; }
.is-review .tbc { display: inline-block; }
.review-only { display: none !important; }
.is-review .review-only { display: block !important; }

.hero__promise { margin: 0 0 var(--s-5); max-width: 36rem; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--gold-fill); background: rgba(222, 156, 33, 0.09); font: 500 1.0625rem/1.5 var(--font-ui); color: var(--text); }
.hero__promise b { font-weight: 700; }

.section-head--wide { max-width: 52rem; }
.bank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.bank__col { padding: var(--s-6); background: var(--paper); border: 1px solid var(--line); }
.bank__col--us { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.bank__label { margin-bottom: var(--s-4); font: 600 var(--fs-label)/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.bank__col--us .bank__label { color: var(--gold); }
.bank__col p:not(.bank__label) { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); }
.bank__col--us p:not(.bank__label) { color: var(--on-ink-2); }
.bank__note { margin-top: var(--s-5); max-width: 52rem; font: 500 1rem/1.6 var(--font-ui); color: var(--text-2); }
.inline-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold-fill); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.inline-link:hover { text-decoration-color: var(--text); }
.diff-title { margin: var(--s-8) 0 var(--s-5); font-size: var(--fs-h3); }
.diffs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.diffs li { position: relative; padding-top: var(--s-4); border-top: 2px solid var(--gold-fill); font: 500 1rem/1.55 var(--font-ui); color: var(--text-2); }
.diffs b { display: block; margin-bottom: 0.25rem; font: 600 1.125rem/1.3 var(--font-ui); color: var(--text); }

.perf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.perf__review { margin-top: var(--s-5); }
.perf__card { padding: var(--s-6); background: var(--ink-raised); border-top: 3px solid var(--gold); }
.perf__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.perf__figs dt { font: 600 var(--fs-label)/1.35 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-2); margin-bottom: 0.4rem; }
.perf__figs dd { font: 600 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem)/1.05 var(--font-display); color: var(--on-ink); }
.perf__figs > div:first-child dd { color: var(--gold); }
.perf__span { margin-top: var(--s-4); font: 500 0.9375rem/1.5 var(--font-ui); color: var(--on-ink-2); }
.perf__luck { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-ink); line-height: 1.55; color: var(--on-ink); }
.perf__fine { margin-top: var(--s-4); font: 500 0.9375rem/1.55 var(--font-ui); color: var(--on-ink-2); }
.perf__fine a, .section--ink .inline-link { color: var(--on-ink); text-decoration-color: var(--gold); }

.step { display: flex; flex-direction: column; align-items: flex-start; }
.step p { flex-grow: 1; }
.step__cta { margin-top: var(--s-4); }
.facts--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.actions--sn { margin-top: 0; }
.link-arrow--ink { color: var(--on-ink); text-decoration-color: var(--gold); }
.link-arrow--ink:hover { text-decoration-color: var(--on-ink); }
.invest__idea { margin: 0 0 var(--s-4); max-width: 40rem; font: italic 400 var(--fs-lead)/1.5 var(--font-text); color: var(--text); }

.glance { margin-top: 10.7px; position: sticky; top: calc(var(--header-h) + 2.5rem); padding: var(--s-6); background: var(--ink); color: var(--on-ink); isolation: isolate; }
.glance::before { content: ""; position: absolute; z-index: -1; right: -18px; bottom: -18px; width: 58%; height: 58%; background: var(--gold-fill); }
.glance::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--ink); }
.glance__mark { width: 4.5rem; margin-bottom: var(--s-5); }
.glance__title { margin-bottom: var(--s-4); font: 600 var(--fs-h3)/1.15 var(--font-display); color: var(--on-ink); }
.glance__list > div { padding: var(--s-3) 0; border-top: 1px solid var(--line-ink); }
.glance__list dt { font: 600 0.8125rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.2rem; }
.glance__list dd { font: 500 1rem/1.45 var(--font-ui); color: var(--on-ink); }

/* sub-pages */
.page-top { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; background: var(--ink); color: var(--on-ink); }
.page-top--paper { background: var(--paper-gold); color: var(--text); }
.page-top__title { margin-bottom: var(--s-5); max-width: 20ch; font: 500 clamp(2.5rem, 1.6rem + 3.3vw, 4.25rem)/1.02 var(--font-display); }
.page-top .lead { max-width: 44rem; }
.page-top .actions { margin-top: var(--s-6); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-bottom: var(--s-6); font: 500 0.9375rem/1.4 var(--font-ui); color: var(--text-2); }
.crumbs li + li::before { content: "/"; margin-right: 0.6rem; opacity: 0.5; }
.crumbs a { color: inherit; }
.crumbs--ink ol { color: var(--on-ink-2); }
.section--tight { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.snp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.snp__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text); max-width: 42rem; }
.section--ink .snp__lead { color: var(--on-ink); }
.snp__list { margin-top: var(--s-6); }
.snp__list > div { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.snp__list dt { margin-bottom: 0.35rem; font: 600 var(--fs-lead)/1.2 var(--font-display); }
.snp__list dd { color: var(--text-2); max-width: 42rem; }
.snp__note { margin-top: var(--s-6); max-width: 42rem; font: italic 400 1rem/1.55 var(--font-text); color: var(--text-2); }
.pillars--paper { margin-top: 0; }
.pillars--paper > div { border-top-color: var(--gold-fill); }
.pillars--paper dt { color: var(--text); }
.pillars--paper dd { color: var(--text-2); }
.snp__steps { counter-reset: snp; }
.snp__steps li { position: relative; padding: var(--s-5) 0 var(--s-5) 3.25rem; border-top: 1px solid var(--line); line-height: 1.55; color: var(--text-2); counter-increment: snp; }
.snp__steps li::before { content: counter(snp); position: absolute; left: 0; top: var(--s-5); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--gold-fill); color: var(--on-gold); font: 700 1.25rem/1 var(--font-display); }
.snp__steps b { color: var(--text); }
.fitlist { margin: var(--s-6) 0; }
.fitlist li { position: relative; padding: var(--s-4) 0 var(--s-4) 2.1rem; border-top: 1px solid var(--line-ink); line-height: 1.55; color: var(--on-ink-2); }
.fitlist li::before { content: ""; position: absolute; left: 0; top: 1.3rem; width: 1.1rem; height: 1.1rem; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; }
.fitlist b { color: var(--on-ink); }
.snp__docs li { padding: var(--s-3) 0; }
.info { max-width: 48rem; }
.info h2 { margin: var(--s-7) 0 var(--s-3); font-size: 1.875rem; }
.info h2:first-child { margin-top: 0; }
.info p { color: var(--text-2); }
.info a { color: var(--text); text-decoration-color: var(--gold-fill); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.info__more { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.site-nav__list a[aria-current="page"] { border-bottom-color: var(--gold); }

@media (max-width: 1140px) {
  .diffs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .bank, .perf, .snp { grid-template-columns: 1fr; }
  .glance { position: relative; top: auto; max-width: calc(100% - 18px); margin-top: 0; }   /* stays positioned so its offset block anchors to it; leaves room for the 18px offset */
}
@media (max-width: 720px) {
  .diffs, .facts--four, .perf__figs { grid-template-columns: 1fr; }
  .bank__col, .perf__card { padding: var(--s-5); }
}

/* Mark's 15 Oct punch list: the call to action sits under the headline (PB2); a privacy line at the form (PA14). */
.actions--top { margin: var(--s-4, 1rem) 0 var(--s-4, 1rem); }
.form-privacy { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.5; opacity: 0.85; }

/* hero photo: framed like a print at the top of the gold panel (Lela via Mark's 15 Oct Zoom: show people; Mike: one couple) */
.hero__photo { margin: 0 0 var(--s-6); padding: 6px; background: var(--paper); box-shadow: 0 18px 40px -22px rgba(11, 15, 23, 0.55); }
.hero__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 939; object-fit: cover; }
/* with the photo the panel is taller, so it keeps the wave's own height clear below its list, as the copy column does */
@media (min-width: 961px) { .hero__panel:has(.hero__photo) { padding-bottom: calc(min(25vw, 380px) * 0.85 + var(--s-5)); } }

/* Mark, 18 Oct recording (42:07): a route for professional investors to LUL Asset Management, mirroring the
   "I am a ... Individuals" route LULAM gives individuals to this site. */
.utility { background: #0b1017; border-bottom: 1px solid var(--line-ink); }
.utility__bar { display: flex; align-items: center; justify-content: flex-end; min-height: 36px; }
.utility__link { display: inline-flex; align-items: center; gap: 0.35rem; font: 500 0.9375rem/1 var(--font-ui); color: var(--on-ink-2); text-decoration: none; transition: color 0.15s ease; }
.utility__link:hover { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.3em; }
.utility__ext { font-size: 0.8125rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Mark, 18 Oct recording (42:55-43:57): pictures on the special-needs page to break up the text. */
.snp__photo { margin: var(--s-6) 0 var(--s-3); padding: 6px; background: var(--paper); box-shadow: 0 18px 40px -22px rgba(11, 15, 23, 0.55); }
.snp__photo--ink { background: var(--ink-raised); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8); }
.snp__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 932; object-fit: cover; }
@media (max-width: 960px) { .snp__photo { max-width: 560px; } }