:root{
  --text-overlap: 96px;  /* how far text intrudes into the right image */
  --left: 58%;
  --rail: 68px;
  --ink: #0b0b0b;
  --muted: #6f7781;
  --line: #e9ecf0;
}

/* Base */
*{ box-sizing:border-box; }
html, body { height:100%; }
body{ margin:0; font-family:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:#fff; }

/* Hero */
.hero{ position:relative; width:100%; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:#fff; }

/* Full-bleed image; left white panel recreated as overlay (prevents mask "running out") */
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.9); }
.hero::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--left); background:#fff; z-index:1; pointer-events:none;
}

/* Rail / Nav / Auth */
.rail{ position:absolute; left:0; top:0; bottom:0; width:var(--rail); background:#fff; border-right:1px solid var(--line); display:grid; grid-template-rows:72px 1fr auto; z-index:4; }
.rail-logo{ display:grid; place-items:center; font-size:22px; }
.rail-menu{ margin:0 0 16px 16px; width:36px; height:24px; border:0; background:transparent; cursor:pointer; position:relative; }
.rail-menu span{ position:absolute; left:0; right:0; height:2px; background:#171717; border-radius:2px; }
.rail-menu span:nth-child(1){ top:4px; width:22px; }
.rail-menu span:nth-child(2){ bottom:4px; width:16px; }

.vnav{ position:absolute; left:calc(var(--rail) + 24px); top:72px; height:calc(100% - 144px); writing-mode:vertical-rl; transform:rotate(180deg); display:flex; gap:42px; align-items:center; justify-content:space-between; color:#838b94; font-size:11px; letter-spacing:.18em; z-index:3; }
.vnav a{ color:inherit; text-decoration:none; }

.auth{ position:absolute; right:22px; top:22px; display:flex; gap:16px; align-items:center; z-index:5; }
.auth .login{ font-size:12px; letter-spacing:.08em; color:#f0f3f7; opacity:.95; text-decoration:none; }
.auth .signup{ font-size:12px; letter-spacing:.08em; color:#e9fbff; padding:8px 14px; border-radius:999px; border:1.5px solid rgba(175,255,240,.8); background:rgba(255,255,255,.05); backdrop-filter:blur(6px); text-decoration:none; }

/* Content */
.content{ position:absolute; left:calc(var(--rail) + 92px); right:calc(100% - var(--left) - 96px); top:50%; transform:translateY(-50%); z-index:3; isolation:isolate; }
.center-split{ position:absolute; left:calc(var(--left) - 1px); top:0; bottom:0; width:2px; background:linear-gradient(#f1f3f6,#e8eaee); border-radius:2px; z-index:2; }
.scroll-hint{ position:absolute; left:calc(var(--left) + 12px); bottom:28px; writing-mode:vertical-rl; transform:rotate(180deg); color:#aeb5bd; font-size:10px; letter-spacing:.28em; z-index:2; }
.pager{ position:absolute; right:18px; top:50%; transform:translateY(-50%); display:grid; gap:12px; align-items:center; justify-items:center; color:#e8eef5; z-index:2; }
.pager .num{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; letter-spacing:.2em; }
.pager .ticks{ display:grid; gap:6px; }
.pager .ticks i{ display:block; width:28px; height:2px; background:rgba(255,255,255,.7); border-radius:2px; }
.pager .ticks i:nth-child(2){ width:18px; opacity:.75; }
.pager .ticks i:nth-child(3){ width:12px; opacity:.6; }

/* Headline (larger): masked text without JS alignment */
.headline{ margin:0 0 16px 0; line-height:1.02; contain:paint; }
.headline .mask{
  display:block;
  font-weight:900; text-transform:uppercase;
  font-size:clamp(84px, 12vw, 176px);   /* was 56/8.4vw/114 */
  letter-spacing:0.125in;
  padding-inline:0.06em;
  background-image: url('assets/hero.jpg') !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:30% 44% !important;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 0 1px rgba(0,0,0,0);
  -webkit-text-stroke:0.2px transparent;
  transform:translateZ(0);
}
.headline .line2{
  font-size:clamp(84px, 12vw, 176px);   /* was 56/8.2vw/114 */
  background-position:58% 52% !important;
}
.headline .line3{
  font-size:clamp(112px, 15vw, 228px);  /* was 72/10.6vw/146 */
  background-position:74% 60% !important;
}

/* Subcopy */
.subcopy .tiny{ margin:6px 0 0 0; font-size:11px; letter-spacing:.38em; color:#9aa2ac; }

/* Responsive */
@media (max-width:1000px){
  :root{
  --text-overlap: 96px;  /* how far text intrudes into the right image */ --left: 60%; }
  .content{ right:calc(100% - var(--left) - 72px); }
}
@media (max-width:760px){
  :root{
  --text-overlap: 96px;  /* how far text intrudes into the right image */ --left: 64%; }
  .vnav{ display:none; }
  .content{ left:calc(var(--rail) + 72px); right:10vw; }
}

/* ===== RIGHT-EDGE SAFETY (Nov 2025) =====
   Prevent any right-side clipping after increasing headline size. */

/* Let text intrude further into the photo so it never hits the split boundary */
:root{ --text-overlap: 128px; }
@media (max-width: 1000px){ :root{ --text-overlap: 72px; } }
@media (max-width: 760px){  :root{ --text-overlap: 32px; } }

/* Extra breathing room at the end of each line to avoid glyph nips */
.headline .mask{ padding-right: 0.18em; }

/* Ensure the content box never clips the larger text */
.content{ overflow: visible; }

/* ===== RIGHT-EDGE SAFETY (Nov 2025) =====
   Prevent background-clip text from truncating at the right edge.
   - Give the text more room to intrude over the photo
   - Make the headline size to its intrinsic width (not the container)
   - Extend the background painting area slightly past the last glyph
*/
.content{
  right: calc(100% - var(--left) - 180px); /* was ~64px; more overlap = more room */
  overflow: visible;                        /* ensure any overflow is visible */
}
.headline{
  display: inline-block;                    /* shrink-to-content width */
  width: max-content;                       /* intrinsic width = full word width */
  white-space: nowrap;                      /* never wrap the single words */
}
.headline .mask{
  padding-inline-end: 0.35em;               /* extend background area beyond last letter */
}

/* ===== FAR-RIGHT GLYPH FIX (WEALTH 'H') — Nov 2025 ===== */

/* Give the content even more safe overlap into the image so
   the last letter never sits on the container edge */
:root{ --text-overlap: clamp(220px, 28vw, 700px); }

/* Re-apply using the larger overlap at the very end so it wins */
.content{
  right: calc(100% - var(--left) - var(--text-overlap));
  overflow: visible;
}

/* Force a stable offscreen layer for the headline to avoid WebKit raster nips */
.headline{ filter: opacity(1); contain: paint; }

/* Expand paint area and box on the last line specifically */
.headline .line3{
  padding-right: clamp(24px, 6vw, 96px);   /* extend background paint region */
  margin-right: clamp(8px, 2vw, 32px);     /* ensure glyph not flush with edge */
  -webkit-text-stroke: 0.6px transparent;  /* stronger edge stability on WebKit */
}

/* Ensure the background actually paints into the padding */
.headline .mask{ background-origin: padding-box; }

@media (max-width: 760px){
  .content{
    right: max(10vw, calc(100% - var(--left) - var(--text-overlap)));
  }
  .headline .line3{
    padding-right: max(16px, 5vw);
    margin-right: max(6px, 1.2vw);
  }
}

/* ===== FINAL TWEAK: protect the far-right of the 'H' in WEALTH ===== */
/* Make sure the content area and the masked paint extend far enough.
   This targets only the third line so other lines don't shift. */
:root{
  --text-overlap: clamp(240px, 28vw, 720px); /* more room into the image */
}
.headline .mask.line3{
  padding-right: max(10vw, calc(var(--text-overlap) + 6vw)); /* extra paint on the right */
  background-origin: padding-box; /* ensure background covers padding */
  margin-right: 0.08em;           /* tiny breathing room for glyph edge */
}

/* ===== FINAL RIGHT-EDGE FIX (Decisive) ===== */
/* Give more room into the photo and remove the left nudge so 'W' is visible */
:root{
  --text-overlap: clamp(220px, 24vw, 640px); /* more space for large type */
  --right-safe: 0px;                          /* remove width shrink */
}
.content{
  right: calc(100% - var(--left) - var(--text-overlap));
  overflow: visible;
}
/* No left shift; keep GPU hint only */
.headline .line3{ transform: translateZ(0); }
/* Ensure enough paint behind the final letters */
.headline .mask{ padding-right: calc(var(--text-overlap) + 6vw); background-origin: padding-box; }

@media (max-width: 760px){
  .content{
    right: max(10vw, calc(100% - var(--left) - var(--text-overlap)));
  }
  .headline .mask{
    padding-right: max(6vw, calc(var(--text-overlap) * .6));
  }
}

/* ===== READABILITY ENHANCEMENT — LIGHTER LETTERS (Nov 2025) =====
   Makes the photo inside the masked letters lighter without changing layout.
   Uses a white gradient layer + background-blend-mode on the text only. */

:root{
  /* Increase to make letters lighter; decrease if too bright */
  --letters-lighten: rgba(255,255,255,.28);  /* 28% white */
  --letters-blend: screen;                   /* or 'lighten' */
}

/* Apply to all headline lines; preserve existing background-position/size */
.headline .mask{
  background-image:
    linear-gradient(var(--letters-lighten), var(--letters-lighten)),
    url('assets/hero.jpg') !important;   /* keep the photo as the second layer */
  background-blend-mode: var(--letters-blend), normal;
  /* Keep previous paint rules intact (size/position/origin set earlier) */

  /* Subtle edge definition so letters pop on busy areas */
  -webkit-text-stroke: 0.4px rgba(0,0,0,.18);
  text-shadow: 0 0 1px rgba(0,0,0,0); /* stability hint */
}

/* Fallback if 'background-blend-mode' is not available */
@supports not (background-blend-mode: screen){
  .headline .mask{
    filter: brightness(1.14) contrast(.96);
  }
}

/* ===== CONTRAST SAFETY OVERRIDE (No blends; no clip regressions) =====
   Make letters lighter using a filter on the clipped text instead of
   background-blend-mode. Keeps all anti-cutoff rules intact. */
:root{
  --letter-tint: initial;
  --letter-blend: normal;
}
.headline .mask{
  /* Use the single image again (no gradient), and normalize blend */
  background-image: url('assets/hero.jpg') !important;
  background-blend-mode: normal !important;

  /* Gentle readability boost without affecting layout */
  filter: brightness(1.18) contrast(0.94) saturate(0.96);
  /* Optional micro edge-crisping without visible outline */
  -webkit-text-stroke: 0.25px rgba(255,255,255,.12);
  text-shadow: 0 0 0.3px rgba(255,255,255,.18);
}

/* ===== VISIBILITY TUNE (lighter by default) — Nov 2025 ===== */
:root{
  /* Increase brightness slightly for readability */
  --letter-bright: 1.24;   /* was 1.18 */
  --letter-contrast: 1.06; /* was 1.04 */
  --letter-sat: 1.05;      /* was 1.06 (slightly toned down) */
}

/* Optional quick “darker” preset (disabled by default) */
/*
:root{
  --letter-bright: 0.88;
  --letter-contrast: 1.08;
  --letter-sat: 1.00;
}
*/
/* legacy-styles.css — add near the end */
/* Fit the logo into the 72px rail header row without layout changes */
/*  [oai_citation:1‡legacy-styles.css](sediment://file_00000000a60871f5915e4dfeb002e4c9) */
.rail-logo img{
  display: block;
  max-width: 42px;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* =========================
   legacy-styles.css — MOBILE GUARDRAILS (append at the VERY END)
   Keeps your current legacy layout/anti‑cutoff fixes, but prevents the
   headline from running off the right edge on smaller screens.
   Structure: legacy-index.html   [oai_citation:0‡legacy-index.html](sediment://file_00000000c33871f5ae7d6d495066148d)
   Current CSS baseline: legacy-styles.css   [oai_citation:1‡legacy-styles.css](sediment://file_00000000a60871f5915e4dfeb002e4c9)
   ========================= */

/* Tablet and down (tighten tracking a bit, give text more room) */
@media (max-width: 900px){
  :root{
    --left: 60%;                 /* a touch more width for the text block */
    --text-overlap: 96px;        /* moderate overlap into the image */
  }
  .content{
    right: calc(100% - var(--left) - var(--text-overlap)) !important;
  }
  .headline .mask{
    letter-spacing: clamp(6px, 0.9vw, 10px) !important;
  }
}

/* Phones — clamp sizes + enforce a right margin so text never goes off screen */
@media (max-width: 720px){
  :root{
    --left: 64%;
    --text-overlap: 48px;        /* we still allow some overlap, but much less */
  }

  .content{
    left: calc(var(--rail) + 64px) !important;
    /* Keep at least 6vw of breathing room on the right edge */
    right: max(6vw, calc(100% - var(--left) - var(--text-overlap))) !important;
    transform: translateY(-46%);
    overflow: visible;
  }

  /* Keep three-line hierarchy but scale to viewport */
  .headline .mask{
    font-size: clamp(42px, 13.5vw, 88px) !important;
    letter-spacing: clamp(4px, 1.2vw, 8px) !important;
    padding-inline: 0.06em !important;      /* tiny buffer avoids edge nips */
    background-size: cover !important;
    background-origin: padding-box !important;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .headline .line2{
    font-size: clamp(42px, 13.5vw, 88px) !important;
  }
  .headline .line3{
    font-size: clamp(60px, 17.5vw, 120px) !important;
    /* extend paint area so the last glyph never appears cropped */
    padding-right: max(6vw, calc(var(--text-overlap) * .6)) !important;
  }

  /* Decorative elements: hide on small screens */
  .vnav, .scroll-hint, .pager{ display: none !important; }
}

/* Very small phones — tighten further so nothing spills */
@media (max-width: 420px){
  :root{
    --left: 66%;
    --text-overlap: 24px;        /* minimal overlap on extra-small screens */
  }
  .content{
    left: calc(var(--rail) + 56px) !important;
    right: 7vw !important;       /* hard stop; never let text run off-screen */
  }
  .headline .mask{
    font-size: clamp(36px, 15vw, 72px) !important;
    letter-spacing: clamp(3px, 1vw, 6px) !important;
  }
  .headline .line3{
    font-size: clamp(52px, 19vw, 98px) !important;
    padding-right: 8vw !important;
  }
}
/* legacy-styles.css — MOBILE ONLY: make headline ~10% smaller (append at the very end)   [oai_citation:0‡legacy-styles.css](sediment://file_000000006728722f8536ee53c158c8dd) */
@media (max-width: 760px){
  /* CONTROL / YOUR */
  .headline .mask{
    /* was clamp(42px, 13.5vw, 88px) in your current mobile rules */
    font-size: clamp(38px, 12.15vw, 79px) !important;
  }
  .headline .line2{
    font-size: clamp(38px, 12.15vw, 79px) !important;
  }
  /* WEALTH */
  .headline .line3{
    /* was clamp(60px, 17.5vw, 120px) */
    font-size: clamp(54px, 15.75vw, 108px) !important;
  }
}
/* MOBILE ONLY — shift headline left slightly + make it 25% smaller
   Append at the very end of legacy-styles.css.   [oai_citation:0‡legacy-styles.css](sediment://file_00000000a60871f5915e4dfeb002e4c9)  [oai_citation:1‡legacy-index.html](sediment://file_00000000c33871f5ae7d6d495066148d) */
@media (max-width: 760px){
  /* move the text block left a bit */
  .content{
    left: calc(var(--rail) + 56px) !important; /* was ~72px */
    overflow: visible !important;
  }

  /* scale the headline down by ~25%, anchored to the left */
  .headline{
    transform: scale(0.75);          /* 25% smaller */
    transform-origin: left center;    /* don’t drift right */
    contain: paint;                   /* safe compositing */
  }
}
/* WHAT WE DO — append to the end of legacy-styles.css (keeps the vibe & split)
   Works with your variables/layout.  [oai_citation:1‡legacy-styles.css](sediment://file_000000006728722f8536ee53c158c8dd) */

/* Base band + alternating backgrounds */
.band{
  --band-bg: #ffffff;
  --band-left-bg: #ffffff;
  --band-ink: var(--ink);
  --band-muted: #6f7781;
  --card-bg: #f7f9fc;
  --card-b: #e8edf4;

  position: relative;
  background: var(--band-bg);
  color: var(--band-ink);
  padding: clamp(56px, 10vh, 120px) 0;
}
.band.alt{
  --band-bg: #0f141a;
  --band-left-bg: #0f141a;
  --band-ink: #e9eef5;
  --band-muted: #a9b7c7;
  --card-bg: rgba(255,255,255,.05);
  --card-b: rgba(255,255,255,.12);
}

/* Left panel + split line to echo the hero */
.band::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: var(--left); background: var(--band-left-bg); z-index:0;
}
.band-split{
  position:absolute; left: calc(var(--left) - 1px); top:0; bottom:0;
  width:2px; background: linear-gradient(#f1f3f6,#e8eaee); opacity:.9; z-index:1;
}

/* Two-column layout aligned to the split */
.band-inner{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: var(--left) 1fr;
  gap: clamp(24px, 3vw, 48px);
}
.band .col-left{
  padding-left: calc(var(--rail) + 92px);
  padding-right: clamp(24px, 3vw, 48px);
}
.band .col-right{
  padding: 0 clamp(24px, 3vw, 56px) 0 0;
}

/* Type system (keeps your aesthetic) */
.kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .36em;
  color: var(--band-muted);
  margin-bottom: 12px;
}
.display{
  margin: 0 0 10px 0;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(28px, 3.4vw, 44px);
}
.lede{
  margin: 0;
  color: var(--band-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* What‑we‑do cards */
.wwd-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(16px, 2vw, 24px);
}
.card{
  background: var(--card-bg);
  border: 1px solid var(--card-b);
  border-radius: 14px;
  padding: clamp(16px, 2.5vw, 22px);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.card h3{
  margin: 0 0 6px 0;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--band-muted);
}

/* Mobile */
@media (max-width: 900px){
  .band-inner{ grid-template-columns: 1fr; }
  .band .col-left{ padding-left: calc(var(--rail) + 72px); }
}
@media (max-width: 760px){
  .band .col-left{ padding-left: calc(var(--rail) + 56px); }
  .wwd-grid{ grid-template-columns: 1fr; }
}
/* RESULTS (different layout than WWD; same split vibe + alternating background)
   Append to legacy-styles.css. Reuses your variables and split from the hero.  [oai_citation:1‡legacy-styles.css](sediment://file_000000006728722f8536ee53c158c8dd) */

/* Light by default; add `.alt` on the <section> to flip to dark */
.band-results{
  --band-bg: #ffffff;
  --band-left-bg: #ffffff;
  --band-ink: var(--ink);
  --band-muted: #6f7781;
  --accent: #2fb67e;
  --accent-dim: #8bd5b7;

  position: relative;
  background: var(--band-bg);
  color: var(--band-ink);
  padding: clamp(56px, 10vh, 120px) 0;
}
.band-results.alt{
  --band-bg: #0f141a;
  --band-left-bg: #0f141a;
  --band-ink: #e9eef5;
  --band-muted: #a9b7c7;
  --accent: #51e3a2;
  --accent-dim: rgba(81,227,162,.45);
}

/* Left panel + split line to echo the hero */
.band-results::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: var(--left);
  background: var(--band-left-bg);
  z-index:0;
}
.band-results .band-split{
  position:absolute; left: calc(var(--left) - 1px); top:0; bottom:0;
  width:2px; background: linear-gradient(#f1f3f6,#e8eaee); opacity:.9; z-index:1;
}

/* DISTINCT LAYOUT vs WWD: asymmetric grid */
.band-results .results-layout{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, calc(var(--left))) 1fr;
  gap: clamp(24px, 3vw, 48px);
}
.band-results .r-left{
  padding-left: calc(var(--rail) + 92px);
  padding-right: clamp(18px, 3vw, 28px);
}
.band-results .r-right{
  padding-right: clamp(24px, 3vw, 56px);
}

/* Typographic system */
.band-results .kicker{
  display:inline-block; font-size:12px; letter-spacing:.36em;
  color: var(--band-muted); margin-bottom: 10px;
}
.band-results .display{
  margin: 0 0 8px 0; font-weight: 800; letter-spacing: .02em;
  font-size: clamp(28px, 3.2vw, 44px);
}
.band-results .lede{ margin:0 0 16px 0; color: var(--band-muted); font-size:15px; line-height:1.6; }
.band-results .tiny-note{ margin-top:12px; font-size:11px; color: var(--band-muted); opacity:.85; }

/* Period returns table (NEW pattern vs WWD cards) */
.period-returns{
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}
.period-returns thead th{
  text-align: left; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--band-muted); padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.band-results.alt .period-returns thead th{
  border-bottom-color: rgba(255,255,255,.12);
}
.period-returns td{
  padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,.06);
}
.band-results.alt .period-returns td{
  border-bottom-color: rgba(255,255,255,.1);
}
.period-returns td.pos{ color: var(--accent); }

/* KPI strip (chips) */
.kpi-strip{
  list-style:none; margin: 0 0 clamp(18px,3vw,24px) 0; padding:0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(5, minmax(0,1fr));
}
.kpi-strip li{
  border: 1px solid rgba(0,0,0,.06);
  background: #f7f9fc;
  border-radius: 12px;
  padding: 12px;
  display: grid; gap: 6px;
}
.band-results.alt .kpi-strip li{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.kpi-strip .lab{
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--band-muted);
}
.kpi-strip .val{
  font-weight: 800; font-size: 20px; letter-spacing: .02em;
  color: var(--band-ink);
}
.kpi-strip .val.pos{ color: var(--accent); }
.kpi-strip .val.neg{ color: #d9534f; }

/* Chart card (compact; different from WWD) */
.chart-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px;
}
.band-results.alt .chart-card{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
.chart-card header{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  margin-bottom: 8px;
}
.chart-card h3{
  margin:0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--band-ink);
}
.band-results.alt .chart-card h3{ color: #e9eef5; }
.legend{ display:flex; align-items:center; gap: 12px; color: var(--band-muted); font-size:12px; }
.legend .swatch{ width:14px; height:4px; border-radius:3px; display:inline-block; }
.legend .swatch.strategy{ background: var(--accent); }
.legend .swatch.benchmark{ background: var(--band-muted); opacity:.5; }

.chart-card svg{
  width: 100%; height: auto; display:block;
  color: var(--band-ink);
}
.band-results.alt .chart-card svg{ color: #e9eef5; }
.chart-card .strat{ color: var(--accent); }
.chart-card .bench{ color: var(--band-muted); }

.chart-foot{ margin-top: 8px; color: var(--band-muted); }

/* Responsive */
@media (max-width: 1000px){
  .band-results .results-layout{ grid-template-columns: 1fr; }
  .band-results .r-left{ padding-left: calc(var(--rail) + 72px); }
}
@media (max-width: 760px){
  .band-results .r-left{ padding-left: calc(var(--rail) + 56px); }
  .kpi-strip{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* WHAT WE DO image (under left text) — append to the end of legacy-styles.css */
/* Uses your existing band/band-wwd structure and color tokens.  [oai_citation:1‡legacy-styles.css](sediment://file_000000006728722f8536ee53c158c8dd) */
.band-wwd .wwd-photo{
  margin-top: clamp(14px, 3vh, 24px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);   /* adapts in .alt (dark) */
  border: 1px solid var(--card-b);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.band-wwd .wwd-photo img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;        /* keeps it landscape */
  object-fit: cover;
}

/* Mobile spacing so the image breathes when the grid stacks */
@media (max-width: 900px){
  .band-wwd .wwd-photo{ margin-top: clamp(12px, 2.4vh, 20px); }
}
/* WHAT WE DO — alignment fixes (append to the END of legacy-styles.css)
   Centers the right‑side cards vertically and aligns the photo with the left text. 
    [oai_citation:0‡legacy-styles.css](sediment://file_000000006728722f8536ee53c158c8dd)  [oai_citation:1‡legacy-index.html](sediment://file_00000000f750722f85b3f946fa537f13) */

/* 1) Vertically center the right column (cards) within the section */
.band-wwd .band-inner{ align-items: center; }  /* center items in the row */
.band-wwd .col-right{ align-self: center; }    /* right column centers vertically */

/* 2) Make the photo align with the text width in the left column */
.band-wwd .col-left{
  /* limit line length and use it for both text and photo */
  --measure: clamp(520px, 56ch, 760px);
  display: grid;
  align-content: start;         /* keep text at the top of its column */
  grid-auto-rows: min-content;  /* no stretching */
}

/* Apply the same horizontal measure to the text blocks and the photo */
.band-wwd .col-left > .kicker,
.band-wwd .col-left > .display,
.band-wwd .col-left > .lede,
.band-wwd .col-left > .wwd-photo{
  max-width: var(--measure);
  margin-left: 0;               /* align left edges */
}

/* Ensure the photo itself behaves (fills its figure and stays aligned) */
.band-wwd .wwd-photo{ justify-self: start; }   /* same left edge as text */
.band-wwd .wwd-photo img{
  display:block; width:100%; height:auto; object-fit:cover;
}
/* ABOUT — clean redo (unique layout, no horizontal overflow)
   Append to the END of legacy-styles.css. Reuses --left / --rail / tokens.   [oai_citation:1‡legacy-styles.css](sediment://file_000000006728722f8536ee53c158c8dd) */

/* Section theme (alternates with your light band) */
.band-about{
  --band-bg: #0f141a;
  --band-left-bg: #0f141a;
  --band-ink: #e9eef5;
  --band-muted: #a9b7c7;
  --card-bg: rgba(255,255,255,.06);
  --card-b: rgba(255,255,255,.14);
  --accent: #51e3a2;

  position: relative;
  background: var(--band-bg);
  color: var(--band-ink);
  padding: clamp(64px, 11vh, 136px) 0;
  overflow-x: clip;
}
@supports not (overflow: clip){ .band-about{ overflow-x: hidden; } }

/* Left panel + split (mirrors hero/WWD vibe) */
.band-about::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: var(--left); background: var(--band-left-bg); z-index: 0;
}
.band-about .band-split{
  position:absolute; left: calc(var(--left) - 1px); top:0; bottom:0;
  width:2px; background: linear-gradient(#2a3139,#181d23); opacity:.85; z-index: 1;
}

/* Grid: unique proportions vs other bands; everything contained */
.band-about .about-grid{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: var(--left) 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  overflow-x: clip;
}
@supports not (overflow: clip){ .band-about .about-grid{ overflow-x: hidden; } }

/* Columns */
.band-about .a-left{
  padding-left: calc(var(--rail) + 92px);
  padding-right: clamp(22px, 3vw, 36px);
}
.band-about .a-right{
  padding-right: clamp(24px, 3vw, 56px);
  display: grid; gap: 16px;
  align-content: center;
}

/* Type */
.band-about .kicker{
  display:inline-block; font-size:12px; letter-spacing:.36em;
  color: var(--band-muted); margin-bottom: 10px;
}
.band-about .display{
  margin: 0 0 8px 0; font-weight: 800; letter-spacing:.02em;
  font-size: clamp(28px, 3.2vw, 44px);
}
.band-about .lede{
  margin: 0 0 14px 0; color: var(--band-muted);
  font-size: 15px; line-height: 1.6;
}

/* Values list (contained chips) */
.values-grid{
  list-style:none; margin: 0 0 clamp(14px,2.6vh,22px) 0; padding:0;
  display:grid; gap: 12px;
  max-width: min(56ch, 760px);    /* aligns with text width */
}
.values-grid li{
  border: 1px solid var(--card-b); background: var(--card-bg);
  border-radius: 14px; padding: 14px 16px;
}
.values-grid h3{
  margin: 0 0 4px 0; font-size: 13px; letter-spacing:.16em; text-transform: uppercase;
}
.values-grid p{ margin: 0; color: var(--band-muted); font-size: 14px; line-height: 1.55; }

/* Photo under text (contained; cannot cause sideways scroll) */
.about-photo{
  margin-top: clamp(14px, 3vh, 24px);
  border-radius: 16px; overflow: hidden;
  background: var(--card-bg); border: 1px solid var(--card-b);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  max-width: min(56ch, 760px);   /* matches text measure */
}
.about-photo img{ display:block; width:100%; height:auto; object-fit:cover; aspect-ratio: 16/9; }
.about-photo figcaption{ padding: 10px 12px; color: var(--band-muted); font-size: 12px; }

/* Stats chips (auto-fit, never overflow) */
.stats-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
}
.stats-grid li{
  display:grid; gap:6px; align-content:center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 12px 14px; min-width: 0;
}
.stats-grid .lab{
  font-size: 11px; letter-spacing:.18em; text-transform: uppercase; color: var(--band-muted);
}
.stats-grid .val{
  font-weight: 800; font-size: 20px; letter-spacing:.02em; color: var(--band-ink);
}

/* Founder card */
.founder-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 16px 18px;
}
.founder-card blockquote{ margin:0 0 8px 0; font-size: 18px; line-height:1.5; color: var(--band-ink); }
.founder-card .sig{ color: var(--band-muted); font-size: 13px; }
.founder-card .note{ display:block; margin-top:8px; color: var(--band-muted); font-size:11px; }

/* Responsive: stack cleanly, keep alignment with the rail */
@media (max-width: 1000px){
  .band-about .about-grid{ grid-template-columns: 1fr; }
  .band-about .a-left{ padding-left: calc(var(--rail) + 72px); }
}
@media (max-width: 760px){
  .band-about .a-left{ padding-left: calc(var(--rail) + 56px); }
}
/* legacy-styles.css — ABOUT fixes: left photo aligns to text width; add right photo styles. Append at the VERY end.   [oai_citation:1‡legacy-styles.css](sediment://file_000000006728722f8536ee53c158c8dd) */

/* Keep the left column’s photo horizontally aligned with the text block */
.band-about .a-left{
  --about-measure: min(56ch, 760px);     /* shared text/photo width */
  display: grid;
  grid-auto-rows: min-content;
}
.band-about .a-left > .kicker,
.band-about .a-left > .display,
.band-about .a-left > .lede,
.band-about .a-left > .values-grid,
.band-about .a-left > .about-photo{
  max-width: var(--about-measure);
  justify-self: start;                   /* same left edge as text */
}
.band-about .about-photo{ margin-top: clamp(14px, 3vh, 24px); }
.band-about .about-photo img{ display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:16/9; }

/* Right-side photo (contained; no overflow) */
.band-about .a-right{ display:grid; gap:16px; align-content:start; }
.band-about .about-photo--right{
  width: 100%;
  max-width: min(540px, 48vw);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-b);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  justify-self: start;                    /* stays within the right column */
}
.band-about .about-photo--right img{
  display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:4/3;
}

/* Responsive: stack cleanly and keep alignment with the rail */
@media (max-width: 1000px){
  .band-about .about-grid{ grid-template-columns: 1fr; }       /* stack columns */
}
@media (max-width: 760px){
  .band-about .a-left{ padding-left: calc(var(--rail) + 56px); }/* match your mobile left gutter */
  .band-about .about-photo--right{ max-width: 100%; }          /* photo scales to column */
}
/* ABOUT — center the photos on their respective sides (append at END of legacy-styles.css)
   Uses your existing About markup.   [oai_citation:0‡legacy-index.html](sediment://file_00000000f750722f85b3f946fa537f13)  [oai_citation:1‡legacy-styles.css](sediment://file_000000006728722f8536ee53c158c8dd) */

/* Left column: keep the same text measure, but center the photo under the text block */
.band-about .a-left{
  --about-measure: min(56ch, 760px);
  display: grid;                 /* ensures justify-self works on children */
  grid-auto-rows: min-content;
}
.band-about .a-left > .about-photo{
  max-width: var(--about-measure);
  justify-self: center;          /* center horizontally under the text */
  margin-inline: auto;           /* fallback centering */
}

/* Right column: center the photo within its column */
.band-about .about-photo--right{
  justify-self: center;
  margin-inline: auto;           /* fallback centering */
  width: 100%;
  max-width: min(540px, 48vw);   /* contained — no overflow */
}

/* Mobile: keep centering when the grid stacks */
@media (max-width: 1000px){
  .band-about .about-photo--right{ max-width: 100%; }
}
/* ABOUT — top‑align the right column with the left (and keep right photo centered)
   Append at the VERY end of legacy-styles.css.  [oai_citation:0‡legacy-styles.css](sediment://file_00000000f5e0720cb9a64119f61e02aa)  [oai_citation:1‡legacy-index.html](sediment://file_00000000a910722fb5d873a5bb54b7fc) */

/* 1) Align both columns to the top of the row (was centered) */
.band-about .about-grid{
  align-items: start !important;     /* top edges line up */
  align-content: start !important;   /* grid content starts at top */
}

/* 2) Ensure the entire right column starts at the top and doesn’t re-center itself */
.band-about .a-right{
  align-self: start !important;
  align-content: start !important;
  justify-items: center;             /* keep its contents (photo/cards) centered horizontally */
  display: grid;
  gap: 16px;
}

/* 3) Keep the right-side photo centered within its column (no overflow) */
.band-about .about-photo--right{
  justify-self: center !important;
  margin-inline: auto !important;
  width: 100%;
  max-width: min(540px, 48vw);
}
/* =============================
   FIX: compress right stacks + trim photo heights
   Append at the VERY end of legacy-styles.css
   (targets WHAT WE DO + ABOUT only; no hero changes)
   Structure/classes come from your current HTML/CSS.  [oai_citation:0‡legacy-index.html](sediment://file_00000000a910722fb5d873a5bb54b7fc)  [oai_citation:1‡legacy-styles.css](sediment://file_00000000f5e0720cb9a64119f61e02aa)
   ============================= */

/* --- WHAT WE DO (right side cards too tall) --- */
/* Desktop: 3-up grid to avoid a long vertical stack */
@media (min-width: 1001px){
  .band-wwd .wwd-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
/* Tablets: 2-up grid */
@media (max-width: 1000px) and (min-width: 761px){
  .band-wwd .wwd-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
/* Phones: 1-up as you had */
@media (max-width: 760px){
  .band-wwd .wwd-grid{ grid-template-columns: 1fr !important; }
}

/* Limit the left photo under text so the left/right columns feel closer in height */
.band-wwd .wwd-photo{
  aspect-ratio: 16 / 9;                       /* keeps it landscape */
  max-height: clamp(240px, 34vh, 360px);      /* cap height so it doesn’t make the column too tall */
  overflow: hidden;
}
.band-wwd .wwd-photo img{ width: 100%; height: 100%; object-fit: cover; }

/* Keep the right column vertically centered within the section row */
.band-wwd .band-inner{ align-items: center; } /* already present, reinforce here */
.band-wwd .col-right{ align-self: center; }

/* --- ABOUT (right column too long) --- */
/* Make the stats chips form multiple columns instead of one long column */
@media (min-width: 1001px){
  .band-about .stats-grid{ grid-template-columns: repeat(3, minmax(140px,1fr)) !important; }
}
@media (max-width: 1000px) and (min-width: 761px){
  .band-about .stats-grid{ grid-template-columns: repeat(3, minmax(120px,1fr)) !important; }
}
@media (max-width: 760px){
  .band-about .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Cap the RIGHT photo height so the column doesn’t outrun the left */
.band-about .about-photo--right{
  width: 100%;
  max-width: min(540px, 48vw);
  aspect-ratio: 4 / 3;                         /* controlled height from width */
  max-height: clamp(240px, 32vh, 380px);       /* hard cap height */
  overflow: hidden;
  margin-inline: auto;                          /* keep it centered in its column */
}
.band-about .about-photo--right img{ width: 100%; height: 100%; object-fit: cover; }

/* Top-align both columns so their first lines are level */
.band-about .about-grid{ align-items: start !important; }
.band-about .a-right{
  align-self: start !important;
  align-content: start !important;
  display: grid; gap: 16px;
}

/* ===== FOOTER (matches split/rail system; light by default) =====
   Append at the VERY END of legacy-styles.css. Uses your variables & band pattern.  [oai_citation:1‡legacy-styles.css](sediment://file_00000000f5e0720cb9a64119f61e02aa) */

.band-footer{
  --band-bg: #f8fafc;         /* light footer to alternate after dark About */
  --band-left-bg: #ffffff;     /* subtle two‑tone with the left panel */
  --band-ink: var(--ink);
  --band-muted: #6f7781;
  --card-b: #e8edf4;

  position: relative;
  background: var(--band-bg);
  color: var(--band-ink);
  padding: clamp(48px, 9vh, 96px) 0 clamp(28px, 5vh, 56px);
  overflow-x: clip;
}
.band-footer::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width: var(--left); background: var(--band-left-bg); z-index:0;
}
.band-footer .band-split{
  position:absolute; left: calc(var(--left) - 1px); top:0; bottom:0;
  width:2px; background: linear-gradient(#f1f3f6,#e8eaee); opacity:.9; z-index:1;
}

/* Grid aligned to the split */
.footer-inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: var(--left) 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items:start;
}
.f-left{ padding-left: calc(var(--rail) + 92px); padding-right: clamp(18px,3vw,28px); }
.f-nav{ padding-right: clamp(24px,3vw,56px); display:grid; gap: 18px; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* Brand + tag */
.f-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; font-weight:800; letter-spacing:.02em; }
.f-brand img{ width:36px; height:36px; object-fit:contain; display:block; } /* logo sizing */
.f-tag{ margin:8px 0 16px; color: var(--band-muted); font-size:14px; }

/* Subscribe */
.f-sub label{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--band-muted); margin-bottom:8px; }
.f-sub-row{ display:flex; gap:8px; }
.f-sub input{
  flex:1; min-width: 0; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--card-b);
  background:#fff; outline: none;
}
.f-sub button{
  height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--card-b);
  background:#111; color:#fff; font-weight:700; letter-spacing:.02em; cursor:pointer;
}
.f-sub small{ display:block; margin-top:8px; color: var(--band-muted); }

/* Link columns */
.f-col h4{ margin:0 0 8px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: var(--band-muted); }
.f-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.f-col a{ color:inherit; text-decoration:none; opacity:.9; }
.f-col a:hover{ opacity:1; text-decoration:underline; }

/* Bottom bar */
.footer-meta{
  position:relative; z-index:2;
  margin-top: clamp(24px, 4vh, 36px);
  padding-top: 16px;
  border-top: 1px solid var(--card-b);
}
.footer-meta .disclaimer{
  margin:0 0 10px; font-size:12px; line-height:1.55; color: var(--band-muted);
  max-width: min(80ch, 100%);
  padding-left: calc(var(--rail) + 92px);
}
.meta-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 6px calc(24px + 3vw) 0 calc(var(--rail) + 92px);
}
.social{ display:flex; gap:10px; }
.social .ico{ width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#fff; color:#111; border:1px solid var(--card-b); }

/* Dark variant (optional): add .alt to <footer> to flip */
.band-footer.alt{
  --band-bg: #0f141a;
  --band-left-bg: #0f141a;
  --band-ink: #e9eef5;
  --band-muted: #a9b7c7;
  --card-b: rgba(255,255,255,.14);
}
.band-footer.alt .social .ico{ background: rgba(255,255,255,.06); color:#e9eef5; border-color: rgba(255,255,255,.12); }

/* Responsive */
@media (max-width: 1000px){
  .footer-inner{ grid-template-columns: 1fr; }
  .f-left{ padding-left: calc(var(--rail) + 72px); }
  .footer-meta .disclaimer{ padding-left: calc(var(--rail) + 72px); }
  .meta-row{ padding-left: calc(var(--rail) + 72px); }
}
@media (max-width: 760px){
  .f-left{ padding-left: calc(var(--rail) + 56px); }
  .footer-meta .disclaimer{ padding-left: calc(var(--rail) + 56px); }
  .meta-row{ padding-left: calc(var(--rail) + 56px); flex-direction: column; align-items: flex-start; }
  .f-nav{ grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* WHAT WE DO — MOBILE FIX (append at the very end of legacy-styles.css)
   Removes the vertical split on phones, stacks cleanly, and keeps
   text/cards inside safe gutters.   [oai_citation:0‡legacy-styles.css](sediment://file_00000000f5e0720cb9a64119f61e02aa)  [oai_citation:1‡legacy-index.html](sediment://file_00000000a910722fb5d873a5bb54b7fc) */

@media (max-width: 760px){

  /* 1) Kill the vertical split line & left-panel width for this section */
  #investing.band-wwd .band-split{ display:none; }
  #investing.band-wwd::before{ width:100%; } /* no split layout on mobile */

  /* 2) Single-column stack with consistent side gutters */
  #investing.band-wwd .band-inner{
    grid-template-columns: 1fr;
    row-gap: clamp(18px, 3vh, 28px);
  }
  #investing.band-wwd .col-left,
  #investing.band-wwd .col-right{
    padding-left: calc(var(--rail) + 56px);
    padding-right: 6vw;
  }

  /* 3) Headline & copy tuned for small screens */
  #investing.band-wwd .display{ 
    font-size: clamp(22px, 6.5vw, 30px);
    text-wrap: balance; /* nicer line breaks on iOS/modern browsers */
  }
  #investing.band-wwd .kicker{ letter-spacing: .28em; }

  /* 4) Image under text – full width inside column, never causes scroll */
  #investing.band-wwd .wwd-photo{ 
    margin-top: 14px; 
    overflow: hidden;
    border-radius: 14px;
  }
  #investing.band-wwd .wwd-photo img{
    width: 100%; height: auto; object-fit: cover; aspect-ratio: 16/9;
  }

  /* 5) Cards – one per row with tighter padding so the section feels compact */
  #investing.band-wwd .wwd-grid{ grid-template-columns: 1fr; gap: 14px; }
  #investing.band-wwd .card{ padding: 14px; border-radius: 12px; }

  /* 6) Safety: no accidental sideways scroll within this band */
  #investing.band-wwd, 
  #investing.band-wwd .band-inner{ overflow-x: clip; }
}
/* === WHAT WE DO (MOBILE REALIGN) ===================== */
@media (max-width: 760px){

  /* Kill the split + left-panel geometry for this section only */
  #investing.band-wwd{ --left: 100%; }
  #investing.band-wwd::before{ left: 0; width: 100% !important; }
  #investing.band-wwd .band-split{ display: none !important; }

  /* True single column; no hidden margins pushing right */
  #investing.band-wwd .band-inner{
    grid-template-columns: 1fr !important;
    gap: clamp(16px, 2.8vh, 24px);
    margin: 0;
    padding: 0;
  }

  /* Align both columns to the same left gutter as the rail */
  #investing.band-wwd .col-left,
  #investing.band-wwd .col-right{
    padding-left: calc(var(--rail) + 24px) !important; /* tighter, not pushed right */
    padding-right: 24px !important;
  }

  /* Ensure inner blocks aren’t carrying extra left offset */
  #investing.band-wwd .col-left > .kicker,
  #investing.band-wwd .col-left > .display,
  #investing.band-wwd .col-left > .lede,
  #investing.band-wwd .col-left > .wwd-photo{
    margin-left: 0 !important;
  }

  /* Safety: never allow sideways scroll inside this band */
  #investing.band-wwd,
  #investing.band-wwd .band-inner{ overflow-x: clip; }
}
/* WHAT WE DO — MOBILE CENTERED (append at END of legacy-styles.css)
   Centers the whole band on phones (no push-right), keeps text left‑aligned.
    [oai_citation:0‡legacy-index.html](sediment://file_00000000a910722fb5d873a5bb54b7fc)  [oai_citation:1‡legacy-styles.css](sediment://file_00000000f5e0720cb9a64119f61e02aa) */

@media (max-width: 760px){
  /* remove split geometry on mobile for this band */
  #investing.band-wwd{ --left: 100%; }
  #investing.band-wwd::before{ width: 100% !important; }
  #investing.band-wwd .band-split{ display: none !important; }

  /* center the entire inner grid */
  #investing.band-wwd .band-inner{
    grid-template-columns: 1fr !important;
    max-width: min(680px, 92vw);
    margin-inline: auto;                 /* <-- centered */
    padding: 0 !important;
  }

  /* remove asymmetric paddings that push content right */
  #investing.band-wwd .col-left,
  #investing.band-wwd .col-right{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* center the text block area while keeping text left-aligned */
  #investing.band-wwd .kicker,
  #investing.band-wwd .display,
  #investing.band-wwd .lede{
    max-width: 56ch;
    margin-inline: auto;                 /* center the block */
    text-align: left;
  }

  /* center the photo under the text */
  #investing.band-wwd .wwd-photo{
    justify-self: center !important;
    margin-inline: auto !important;
    width: 100%;
  }

  /* center the cards grid container */
  #investing.band-wwd .wwd-grid{
    max-width: min(680px, 92vw);
    margin-inline: auto;
  }
}
/* RESULTS — MOBILE CENTERED (append at END of legacy-styles.css)
   Centers the whole Results band on phones (no push‑right), keeps text left‑aligned.
   Uses your current #results markup and results CSS.   [oai_citation:0‡legacy-index.html](sediment://file_00000000a910722fb5d873a5bb54b7fc)  [oai_citation:1‡legacy-styles.css](sediment://file_00000000f5e0720cb9a64119f61e02aa) */

@media (max-width: 760px){
  /* remove split geometry on mobile for this band */
  #results.band-results{ --left: 100%; }
  #results.band-results::before{ width: 100% !important; }
  #results.band-results .band-split{ display: none !important; }

  /* center the entire inner grid container */
  #results.band-results .results-layout{
    grid-template-columns: 1fr !important;
    max-width: min(680px, 92vw);
    margin-inline: auto;                 /* centered */
    gap: clamp(16px, 2.8vh, 24px);
    padding: 0 !important;
  }

  /* kill asymmetric paddings that push content right */
  #results.band-results .r-left,
  #results.band-results .r-right{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* center the text block while keeping it left-aligned */
  #results.band-results .kicker,
  #results.band-results .display,
  #results.band-results .lede,
  #results.band-results .tiny-note{
    max-width: 56ch;
    margin-inline: auto;
    text-align: left;
  }

  /* table, KPI strip, and chart all centered and contained */
  #results.band-results .period-returns,
  #results.band-results .kpi-strip,
  #results.band-results .chart-card{
    max-width: min(680px, 92vw);
    margin-inline: auto;
  }

  /* 2-up KPI chips on phones; drop to 1-up on extra small */
  #results.band-results .kpi-strip{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* safety: never allow sideways scroll inside this band */
  #results.band-results,
  #results.band-results .results-layout{ overflow-x: clip; }
}

/* extra-small phones: stack KPI chips to one column */
@media (max-width: 480px){
  #results.band-results .kpi-strip{ grid-template-columns: 1fr; }
}
/* ABOUT — MOBILE CENTERED (append at END of legacy-styles.css)
   Centers the whole About band on phones, removes the split geometry,
   and keeps copy left‑aligned.   [oai_citation:0‡legacy-index.html](sediment://file_00000000a910722fb5d873a5bb54b7fc)  [oai_citation:1‡legacy-styles.css](sediment://file_00000000f5e0720cb9a64119f61e02aa) */
@media (max-width: 760px){
  /* 1) Disable split layout on mobile for this band */
  #about.band-about{ --left: 100%; }
  #about.band-about::before{ width: 100% !important; }
  #about.band-about .band-split{ display: none !important; }

  /* 2) Center the inner grid container */
  #about.band-about .about-grid{
    grid-template-columns: 1fr !important;
    max-width: min(680px, 92vw);
    margin-inline: auto;                 /* centered band */
    gap: clamp(16px, 2.8vh, 24px);
    padding: 0 !important;
  }

  /* 3) Remove asymmetric paddings that push content right */
  #about.band-about .a-left,
  #about.band-about .a-right{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4) Center the text block area while keeping text left-aligned */
  #about.band-about .kicker,
  #about.band-about .display,
  #about.band-about .lede,
  #about.band-about .values-grid,
  #about.band-about .founder-card{
    max-width: 56ch;
    margin-inline: auto;
    text-align: left;
  }

  /* 5) Stats & photo containers centered and contained */
  #about.band-about .stats-grid{
    max-width: min(680px, 92vw);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  #about.band-about .about-photo--right{
    width: 100%;
    max-width: min(680px, 92vw);
    justify-self: center;
    margin-inline: auto;
  }

  /* 6) Safety: no sideways scroll inside this band */
  #about.band-about,
  #about.band-about .about-grid{ overflow-x: clip; }
}

/* Extra‑small phones: stack stats to one column */
@media (max-width: 480px){
  #about.band-about .stats-grid{ grid-template-columns: 1fr; }
}
/* FOOTER — MOBILE CENTERED & COMPACT (append at END of legacy-styles.css)
   Centers the footer on phones, removes split geometry, stacks nav columns,
   and makes the subscribe form full‑width. 
   HTML structure: legacy-index.html   [oai_citation:0‡legacy-index.html](sediment://file_00000000a910722fb5d873a5bb54b7fc)
   Baseline styles: legacy-styles.css   [oai_citation:1‡legacy-styles.css](sediment://file_00000000f5e0720cb9a64119f61e02aa) */

@media (max-width: 760px){
  /* 1) Disable split layout and left panel for the footer on mobile */
  #footer.band-footer{ --left: 100%; }
  #footer.band-footer::before{ width: 100% !important; }
  #footer.band-footer .band-split{ display: none !important; }

  /* 2) Center the inner grid and keep everything inside safe gutters */
  #footer.band-footer .footer-inner{
    grid-template-columns: 1fr !important;
    max-width: min(680px, 92vw);
    margin-inline: auto;                 /* centered container */
    gap: clamp(16px, 2.8vh, 24px);
    padding: 0 !important;
  }

  /* 3) Remove asymmetric paddings that pushed to the right */
  #footer.band-footer .f-left,
  #footer.band-footer .f-nav{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4) Brand + tagline */
  #footer.band-footer .f-brand{
    margin-inline: auto;                 /* center brand row */
  }
  #footer.band-footer .f-tag{
    max-width: 56ch;
    margin: 8px auto 16px;               /* centered block, left‑aligned text */
    text-align: left;
  }

  /* 5) Subscribe: full‑width input & button stacked */
  #footer.band-footer .f-sub{
    max-width: min(680px, 92vw);
    margin-inline: auto;
  }
  #footer.band-footer .f-sub-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #footer.band-footer .f-sub input,
  #footer.band-footer .f-sub button{
    width: 100%;
  }

  /* 6) Nav columns: center container, 2-up on phones */
  #footer.band-footer .f-nav{
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px 24px;
    max-width: min(680px, 92vw);
    margin-inline: auto;
  }

  /* 7) Bottom meta: centered container, stacked row */
  #footer.band-footer .footer-meta{
    margin-top: clamp(18px, 3vh, 28px);
    padding-top: 14px;
  }
  #footer.band-footer .footer-meta .disclaimer{
    padding-left: 0 !important;
    max-width: min(680px, 92vw);
    margin-inline: auto;
    text-align: left;
  }
  #footer.band-footer .meta-row{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: min(680px, 92vw);
    margin: 8px auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* 8) Safety: never allow sideways scroll in this band */
  #footer.band-footer,
  #footer.band-footer .footer-inner{ overflow-x: clip; }
}

@media (max-width: 480px){
  /* Extra‑small phones: nav becomes a single column */
  #footer.band-footer .f-nav{ grid-template-columns: 1fr; }
}
/* FOOTER — MOBILE LINK GRID (compact 2‑up lists to avoid tall stacks)
   Paste at the VERY END of legacy-styles.css.
   HTML footer structure: legacy-index.html   [oai_citation:0‡legacy-index.html](sediment://file_00000000a910722fb5d873a5bb54b7fc)
   Baseline footer styles: legacy-styles.css   [oai_citation:1‡legacy-styles.css](sediment://file_00000000f5e0720cb9a64119f61e02aa) */

@media (max-width: 760px){
  /* Keep the footer container centered (from prior mobile rules),
     but make the link lists two columns inside each group */
  #footer.band-footer .f-nav{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px 18px !important; /* tighter spacing between groups */
  }

  /* Two-column links per group so they don’t stack in one long column */
  #footer.band-footer .f-col ul{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 6px 18px;              /* row gap / column gap */
  }
  #footer.band-footer .f-col li{ min-width: 0; }  /* allow wrapping inside cells */
  #footer.band-footer .f-col a{
    font-size: 13px;            /* slightly smaller on mobile */
    line-height: 1.35;
    text-wrap: balance;         /* nicer wrapping where supported */
  }

  /* Tighten headings to save vertical space */
  #footer.band-footer .f-col h4{ margin: 0 0 6px 0; }
}

/* Extra-small phones: fall back to single-column links if width is too tight */
@media (max-width: 380px){
  #footer.band-footer .f-col ul{ grid-template-columns: 1fr; }
}
/* === REVERT HERO HEADLINE TO ORIGINAL PHOTO COLOUR — APPEND TO END ===
   Removes the temporary lightening (blend/filter) from the masked letters and
   restores the original photo-only look for the main hero text. 
   Markup reference: .headline .mask in legacy-index.html.   [oai_citation:0‡legacy-styles.css](sediment://file_0000000025ac71f7926e3a9c4ee26d54)  [oai_citation:1‡legacy-index.html](sediment://file_00000000f6f071f79c593bc9016e8659) */

.headline .mask{
  /* ensure only the photo paints the text */
  background-image: url('assets/hero.jpg') !important;
  background-blend-mode: normal !important;

  /* remove the lightening/filtering added earlier */
  filter: none !important;

  /* remove white stroke/shadow tint; keep any existing stroke widths */
  -webkit-text-stroke-color: transparent !important;
  text-shadow: none !important;
}

/* Fallback neutralization for older no-blend browsers that were brightened */
@supports not (background-blend-mode: screen){
  .headline .mask{ filter: none !important; }
}
/* HERO — MOBILE: full white, no right photo, keep text unchanged */
@media (max-width: 760px){
  .hero { background:#fff !important; }            /* ensure white background */
  .hero-bg { display:none !important; }            /* remove the right-side photo */
  .hero::before { width:100% !important; }         /* expand the white overlay to full width */
  .center-split { display:none !important; }       /* hide the vertical split line */
}
/* --- Mobile scroll trap fix for the hero --- */
.hero--cinematic { touch-action: pan-y; }           /* allow vertical scroll gestures */
.hero__image,
.hero__scrim,
.hero__glow,
.hero__texture { pointer-events: none; }            /* let touches fall through to the page */
/* === FINAL: Mobile scroll-trap fixes for the hero === */

/* Always let touches fall through decorative layers */
.hero--cinematic { touch-action: pan-y; } /* hint browsers to start vertical scroll */
.hero__image,
.hero__scrim,
.hero__glow,
.hero__texture,
.hero__ruler { pointer-events: none; }    /* never capture the first touch */

/* On touch devices, avoid big transformed layers */
@media (hover: none) and (pointer: coarse){
  /* stop promoting the photo to a composited/transform layer */
  .hero__image { transform: none !important; }

  /* center the headline block without using transform */
  .hero--cinematic { display: grid; place-items: center; }
  .hero__content{
    position: relative; z-index: 5;       /* keep above the backdrops */
    top: auto; left: auto; transform: none !important;
    /* (optional) if you want it slightly higher on phones: */
    /* margin-top: -6vh; */
  }
}