/* FiKhair · Version 2 · vision board · mockup
   Bones built from Fi's Freeform board (Oct 10): his brother's section types + the orb window + Dune & Ink.
   Tokens first. One accent (navy). One radius system. Glass on the nav, the orb window and the section cards
   (Fi: "still glass / Apple themed"), each with a solid fallback. Nothing here is live. */
:root {
  /* Dune & Ink (locked) */
  --paper: #F6F1E7; --sand: #E5D2B4; --ink: #151515; --navy: #1E2A3E; --brass: #C9A45C;
  /* one warm gray ramp between ink and paper */
  --ink-2: #3A3128; --ink-3: #574C40; --line: rgba(58,49,40,.16); --line-soft: rgba(58,49,40,.09);
  --navy-2: #2B3A54; --on-navy: #F6F1E7; --on-navy-2: #D8D2C6;
  --ground: #D9C7A8;                         /* deeper sand so lighter glass cards pop (Fi Oct 10) */
  --accent-word: #8A5418;                   /* warm brass italic accent in headings; AA at display size */
  /* type */
  --display: Gambetta, 'Iowan Old Style', Georgia, serif;
  --body: Switzer, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* radius system: pill for controls and chips, 14 for cards and tiles, 24 for panels, 30 for the orb window */
  --r-pill: 999px; --r-card: 14px; --r-panel: 24px; --r-window: 30px;
  /* spacing (4-based) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  /* z-index scale */
  --z-bg: 0; --z-content: 1; --z-nav: 60; --z-ribbon: 70; --z-skip: 100;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.65, 0, .25, 1);
  --shadow: 0 1px 2px rgba(74,52,24,.06), 0 18px 44px -26px rgba(74,52,24,.38);
  --wrap: 1120px;
  /* hero window geometry (Version 2 hero) */
  --ww: min(1120px, calc(100vw - 28px)); --wtop: 88px; --wh: clamp(480px, 70vh, 620px); --wb: calc(var(--wtop) + var(--wh));
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--body); color: var(--ink); overflow-x: hidden;
  /* Fi Oct 10: sand grain much subtler; deeper ground so glass pops. */
  background-color: var(--ground);
  background-image: linear-gradient(rgba(246,241,231,.28), rgba(246,241,231,.28)), image-set(url(img/bg/sand-grain-1x.webp) 1x, url(img/bg/sand-grain.webp) 2x);
  background-size: auto, 600px 600px; }
body.bg-off { background: var(--paper); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 10px; z-index: var(--z-skip); padding: .7rem 1.1rem; border-radius: var(--r-pill); background: var(--navy); color: var(--on-navy); font-weight: 500; }
.skip-link:focus { left: 12px; }
.ph { background: rgba(201,164,92,.18); border-bottom: 1px dashed rgba(87,76,64,.6); padding: 0 .2em; font-style: normal; border-radius: 2px; }
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: -.012em; margin: 0; text-wrap: balance; color: var(--ink); }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.1; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--accent-word); }
h3 { font-size: 1.35rem; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.i { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.2em; }

/* ---------- Version ribbon (remove before launch) ---------- */
.version-ribbon { position: fixed; right: 12px; bottom: 12px; z-index: var(--z-ribbon); margin: 0; padding: .38rem .7rem; border-radius: var(--r-pill);
  font: 600 .66rem/1 var(--body); letter-spacing: .08em; color: var(--paper); background: rgba(21,21,21,.8); pointer-events: none; }

/* ---------- Glass ---------- */
.glass { background: rgba(252,249,243,.78); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 1px 2px rgba(74,52,24,.05), 0 18px 44px -26px rgba(74,52,24,.42); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--paper); } }
@media (prefers-reduced-transparency: reduce) { .glass, .nav-pill, .glass-window { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }

/* ---------- Buttons (navy is the only action colour) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.4rem; border-radius: var(--r-pill);
  background: var(--navy); color: var(--on-navy); font: 500 .98rem/1 var(--body); text-decoration: none; white-space: nowrap; border: 1px solid var(--navy);
  box-shadow: 0 10px 22px -14px rgba(30,42,62,.8); transition: transform .16s var(--ease-out), background-color .2s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn-small { min-height: 44px; padding: 0 1.1rem; font-size: .92rem; }
.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(30,42,62,.4); box-shadow: none; }
.btn-on-navy { background: var(--paper); color: var(--navy); border-color: var(--paper); }
.text-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 500; color: var(--navy); text-decoration: underline; text-decoration-color: rgba(30,42,62,.35); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--navy-2); }
  .btn-ghost:hover { background: rgba(30,42,62,.06); }
  .btn-on-navy:hover { background: #fff8ec; }
  .text-link:hover { text-decoration-color: currentColor; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ---------- Nav pill (glass, always on) ---------- */
.nav-shell { position: fixed; top: 14px; left: 0; right: 0; z-index: var(--z-nav); display: flex; justify-content: center; padding: 0 14px; pointer-events: none; }
.nav-pill { pointer-events: auto; position: relative; width: min(1080px, 100%); min-height: 60px; display: flex; align-items: center; gap: var(--s4); padding: 6px 6px 6px 18px; border-radius: var(--r-pill);
  background: rgba(250,246,238,.66); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 30px -18px rgba(74,52,24,.45); }
.brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; min-height: 44px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand-mark { width: 34px; height: auto; }
.brand-name { font: 500 1.1rem/1 var(--display); letter-spacing: -.005em; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.nav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .95rem; border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav-list a[aria-current="page"] { background: rgba(30,42,62,.08); }
.nav-list .nav-cta a { background: var(--navy); color: var(--on-navy); margin-left: .35rem; padding: 0 1.15rem; }
@media (hover: hover) and (pointer: fine) { .nav-list a:hover { background: rgba(30,42,62,.07); } .nav-list .nav-cta a:hover { background: var(--navy-2); } }
.menu-toggle { display: none; }

/* ---------- Sections ---------- */
.section { position: relative; z-index: var(--z-content); padding: var(--s9) 0; }
.section.tight { padding: var(--s8) 0; }
.section-head { max-width: 640px; margin: 0 auto var(--s7); text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.section-head p { margin-top: var(--s3); color: var(--ink-3); font-size: 1.05rem; }
.kicker { font: 500 .8rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.hairline { width: 48px; height: 1px; background: var(--brass); border: 0; margin: var(--s4) auto 0; }
.section-head.left .hairline, .fee-panel .hairline, .story .hairline { margin-left: 0; }
.page-top { padding-top: 140px; }
.fade-once { opacity: 1; }
.js .fade-once { opacity: 0; transition: opacity .7s var(--ease-out); }
.js .fade-once.is-in { opacity: 1; }

/* =====================================================================
   HOME
   ===================================================================== */
/* Hero: glass window with the orb inside (dune cover dropped Oct 10; saved for a future iteration) */
.hero { position: relative; height: calc(var(--wb) + 40px); min-height: 560px; }
.window-wrap { position: absolute; left: 50%; top: var(--wtop); width: var(--ww); height: var(--wh); transform: translateX(-50%); z-index: 2; }
.glass-window { position: absolute; inset: 0; padding: 9px; border-radius: var(--r-window);
  background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.22) 45%, rgba(255,255,255,.40));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 50px 90px -46px rgba(74,46,18,.55), 0 18px 40px -26px rgba(74,46,18,.35); }
.screen { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #E9DCC4; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 28%, rgba(255,255,255,0) 42%); }
.screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.stage { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); width: min(36rem, 86%); text-align: center; z-index: 2; transition: opacity .5s var(--ease-io), filter .5s var(--ease-io); }
.screen .q { margin: 0 auto 1rem; font: italic 400 clamp(.95rem, 1.4vw, 1.08rem)/1.5 var(--body); max-width: 30ch; min-height: 3em; text-wrap: balance; }
.screen .a { margin: 0 auto .8rem; font: 400 clamp(1.6rem, 2.9vw, 2.4rem)/1.14 var(--display); letter-spacing: -.02em; max-width: 15em; }
.screen .n { margin: 0; font: 500 .74rem var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: 0; }
.screen .w { opacity: 0; }
.replay { display: none !important; }
.orb-hit { position: absolute; z-index: 4; width: 120px; height: 120px; left: 50%; top: 60%; transform: translate(-50%, -50%); border-radius: 50%; background: transparent; border: 0; cursor: pointer; padding: 0; }
.orb-hit:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; box-shadow: 0 0 0 6px rgba(246,241,231,.8); }
.orb-pill { position: absolute; z-index: 6; left: 50%; bottom: 22px; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  padding: 0 1.1rem; border-radius: var(--r-pill); font: 500 .86rem/1 var(--body); white-space: nowrap; cursor: pointer; color: var(--ink);
  background: rgba(250,246,238,.86); border: 1px solid rgba(255,255,255,.75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 22px -12px rgba(60,34,12,.5);
  opacity: 0; pointer-events: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.orb-pill .i { color: var(--navy); }
.hero.pill-on .orb-pill { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hero.is-open .stage { opacity: 0; filter: blur(6px); pointer-events: none; }
.hero.is-open .orb-pill, .hero.is-open .orb-hit { opacity: 0; pointer-events: none; visibility: hidden; }
.ask[hidden] { display: none !important; }
.ask { position: absolute; z-index: 7; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15% 6% 8%; text-align: center; opacity: 0; transition: opacity .45s var(--ease-out) .12s; }
.hero.is-open .ask { opacity: 1; }
.ask > * { width: min(560px, 100%); }
.ask-title { display: block; margin: 0 0 1rem; font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--display); color: var(--ink); }
.ask-field { display: flex; align-items: flex-end; gap: .5rem; padding: 6px 6px 6px 20px; border-radius: 28px; background: rgba(252,249,243,.9);
  border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 16px 36px -22px rgba(60,34,12,.55); }
.ask-field:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,42,62,.18); }
.ask textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; font: 400 1.05rem/1.45 var(--body); color: var(--ink); padding: .62rem 0; min-height: 44px; max-height: 120px; }
.ask textarea::placeholder { color: #6A5E50; }
.ask-go { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--navy); color: var(--on-navy); cursor: pointer; display: grid; place-items: center; }
.ask-go:active { transform: scale(.97); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 1rem 0 .8rem; }
.chip { font: 500 .86rem/1 var(--body); color: var(--ink); padding: 0 .95rem; min-height: 40px; border-radius: var(--r-pill); cursor: pointer; background: rgba(252,249,243,.72); border: 1px solid rgba(58,49,40,.18); }
@media (hover: hover) and (pointer: fine) { .chip:hover { background: #fff; } }
.ask-note { margin: .25rem 0 0; font-size: .84rem; color: var(--ink-2); }
.ask-crisis { margin: .8rem auto 0; padding: .8rem 1rem; border-radius: var(--r-card); background: rgba(252,249,243,.95); font-size: .95rem; color: var(--ink); }
.ask .ask-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(58,49,40,.18); background: rgba(252,249,243,.8); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
/* Intro under the hero: the site label and one line, then the service cards */
.intro { text-align: center; padding: var(--s6) 0 0; position: relative; z-index: var(--z-content); }
.intro .label { font: 500 .95rem/1.4 var(--body); color: var(--ink-2); }

/* Service cards with images (brother's layout) carrying the fee facts from the Version 2 cards */
.svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4); }
.svc-card { display: flex; flex-direction: column; border-radius: var(--r-panel); overflow: hidden; }
.svc-card figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.svc-card figure img { width: 100%; height: 100%; object-fit: cover; }
.svc-body { padding: var(--s4) var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.svc-body h3 { font-size: 1.2rem; }
.svc-meta { font: 500 .84rem/1.3 var(--body); color: var(--ink-3); }
.svc-body p { color: var(--ink-2); font-size: .98rem; }
.svc-body .text-link { margin-top: auto; padding-top: var(--s2); }

/* Topic cards on a sand band (the board's glass-on-sand row) */
.topics { position: relative; z-index: var(--z-content); }
.topic-band { border-radius: 32px; padding: var(--s7) var(--s6); background: linear-gradient(180deg, rgba(229,210,180,.55), rgba(229,210,180,.35)); border: 1px solid rgba(255,255,255,.4); }
.topic-band h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); text-align: center; margin-bottom: var(--s5); }
.topic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4); }
.topic { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) var(--s4); border-radius: var(--r-card); color: var(--ink); text-decoration: none; min-height: 100%; transition: transform .2s var(--ease-out); }
.topic h3 { font-size: 1.18rem; }
.topic p { font-size: .92rem; color: var(--ink-2); }
.topic .go { margin-top: auto; color: var(--navy); font-size: .88rem; font-weight: 500; display: inline-flex; gap: .35rem; align-items: center; }
.topic:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .topic:hover { background: rgba(252,249,243,.86); } }

/* Profile card (brother's layout): photo, name, credentials as tiles */
.profile { border-radius: 32px; padding: var(--s7) var(--s7) var(--s7); }
.profile-top { text-align: center; }
.avatar { width: 168px; height: 168px; margin: 0 auto var(--s4); border-radius: 50%; overflow: hidden; border: 4px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px var(--brass), var(--shadow); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-top h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.profile-top .role { margin-top: var(--s2); color: var(--ink-3); font-size: .98rem; }
.profile-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s7); align-items: start; margin-top: var(--s7); padding-top: var(--s7); border-top: 1px solid var(--line); }
.mission { font: 400 clamp(1.5rem, 2.4vw, 1.95rem)/1.22 var(--display); letter-spacing: -.015em; color: var(--ink); }
.mission-sub { margin-top: var(--s3); font: italic 400 1.15rem/1.45 var(--display); color: var(--ink-2); }
.bio { margin-top: var(--s5); color: var(--ink-2); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.tile { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r-card); background: rgba(252,249,243,.7); border: 1px solid var(--line-soft); }
.tile .ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(30,42,62,.07); color: var(--navy); }
.tile strong { display: block; font-weight: 500; font-size: .98rem; line-height: 1.3; }
.tile span { display: block; color: var(--ink-3); font-size: .88rem; line-height: 1.35; margin-top: 2px; }

/* FAQ (brother's centred accordion) */
.faq-wrap { border-radius: 32px; padding: var(--s7) var(--s6); }
.acc { display: grid; gap: var(--s3); max-width: 760px; margin: 0 auto; }
.acc details { border-radius: var(--r-card); background: rgba(252,249,243,.78); border: 1px solid var(--line-soft); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; padding: var(--s3) var(--s5); font-weight: 500; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .i { color: var(--navy); transition: transform .2s var(--ease-out); }
.acc details[open] summary .i { transform: rotate(45deg); }
.acc .acc-body { padding: 0 var(--s5) var(--s5); color: var(--ink-2); }
.acc .acc-body p + p { margin-top: var(--s3); }
.acc .methods { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); padding: 0; list-style: none; }
.acc .methods li { font-size: .84rem; padding: .35rem .7rem; border-radius: var(--r-pill); background: rgba(30,42,62,.06); color: var(--ink-2); }

/* Footer strip: fees pill + disclaimer card (from the Version 2 + dune strip on the board) */
.site-footer { position: relative; z-index: var(--z-content); padding: var(--s8) 0 var(--s7); }
.fees-pill { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; max-width: 900px; margin: 0 auto var(--s5); padding: 10px 10px 10px 26px; border-radius: var(--r-pill); }
.fees-pill p { font-size: .98rem; }
.foot-card { border-radius: var(--r-panel); padding: var(--s6); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s6); font-size: .93rem; color: var(--ink-2); }
.foot-card h2 { font: 600 .8rem/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.foot-card ul { list-style: none; margin: 0; padding: 0; }
.foot-card li a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot-card li a:hover { text-decoration: underline; } }
.foot-card li svg { width: 18px; height: 18px; fill: currentColor; }
.footer-license { font-weight: 500; color: var(--ink); }
.foot-brand p + p { margin-top: var(--s2); }
.foot-legal { grid-column: 1 / -1; padding-top: var(--s5); border-top: 1px solid var(--line); }
.foot-legal p + p { margin-top: var(--s3); }
.footer-disclaimer strong { color: var(--ink); font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* =====================================================================
   INNER PAGES
   ===================================================================== */
.page-hero { padding: 132px 0 var(--s7); position: relative; z-index: var(--z-content); }
.page-hero .panel { border-radius: 32px; padding: var(--s8) var(--s7); }
.page-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.05; }
.page-hero .lead { margin-top: var(--s4); font-size: 1.12rem; color: var(--ink-2); max-width: 46ch; }
.page-hero .label { margin-bottom: var(--s4); }
.split-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s7); align-items: center; }
.photo-card { border-radius: var(--r-panel); overflow: hidden; background: rgba(252,249,243,.8); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow); }
.photo-card figure { margin: 0; aspect-ratio: 4 / 4.4; overflow: hidden; }
.photo-card figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.photo-card .cap { padding: var(--s4) var(--s5) var(--s5); }
.photo-card .cap strong { display: block; font: 500 1.15rem/1.2 var(--display); }
.photo-card .cap span { display: block; margin-top: 2px; font-size: .9rem; color: var(--ink-3); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); padding: 0; list-style: none; }
.tags li { font-size: .8rem; padding: .3rem .65rem; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-2); }

/* Navy band (brother's dark sections: "Where I excel", "My story"). One deliberate contrast band per page. */
.navy-band { background: var(--navy); color: var(--on-navy); border-radius: 32px; padding: var(--s8) var(--s7); position: relative; overflow: hidden; }
.navy-band::before { content: ""; position: absolute; inset: 0; background: image-set(url(img/bg/sand-grain-1x.webp) 1x, url(img/bg/sand-grain.webp) 2x) 0 0 / 600px 600px; opacity: .06; mix-blend-mode: screen; pointer-events: none; }
.navy-band > * { position: relative; }
.navy-band h2, .navy-band h3 { color: var(--on-navy); }
.navy-band p { color: var(--on-navy-2); }
.navy-band .kicker { color: var(--on-navy-2); }
.navy-band .hairline { background: var(--brass); }
.navy-band :focus-visible { outline-color: var(--paper); }
.navy-band a:not(.btn) { color: var(--on-navy); }
.excel-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s4); }
.excel { padding: var(--s6) var(--s5); border-radius: var(--r-card); border: 1px solid rgba(201,164,92,.45); background: rgba(246,241,231,.04); }
.excel .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(201,164,92,.55); color: var(--brass); margin-bottom: var(--s4); }
.excel h3 { margin-bottom: var(--s2); }
.excel:first-child h3 { font-size: 1.6rem; }

.issue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.issue { padding: var(--s5); border-radius: var(--r-card); scroll-margin-top: 110px; transition: box-shadow .25s var(--ease-out), background-color .25s var(--ease-out), opacity .25s; }
.issue .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(30,42,62,.07); color: var(--navy); margin-bottom: var(--s3); }
.issue h3 { font-size: 1.2rem; margin-bottom: var(--s2); }
.issue p { font-size: .95rem; color: var(--ink-2); }
.issue.is-match { background: rgba(252,249,243,.95); box-shadow: 0 0 0 2px var(--navy), var(--shadow); }
.match-note[hidden] { display: none; }
.match-note { max-width: 760px; margin: 0 auto var(--s5); padding: var(--s4) var(--s5); border-radius: var(--r-card); display: flex; gap: var(--s4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.match-note:focus { outline: none; }
.match-note p { flex: 1 1 300px; }

.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.who { padding: var(--s6) var(--s5); border-radius: var(--r-card); }
.who .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(30,42,62,.07); color: var(--navy); margin-bottom: var(--s4); }
.who h3 { margin-bottom: var(--s3); }
.who ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); color: var(--ink-2); }
.who li { padding-left: 1.1rem; position: relative; }
.who li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--brass); }

.fee-panel { border-radius: 32px; padding: var(--s7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
.fee-list { list-style: none; margin: 0; padding: 0; }
.fee-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.fee-list li:first-child { padding-top: 0; }
.fee-list .price { font: 400 1.9rem/1 var(--display); font-variant-numeric: tabular-nums lining-nums; }
.fee-list .what strong { display: block; font-weight: 500; }
.fee-list .what span { font-size: .9rem; color: var(--ink-3); }
.fee-notes { display: grid; gap: var(--s5); }
.fee-notes h3 { font-size: 1.2rem; margin-bottom: var(--s2); }
.fee-notes p { color: var(--ink-2); }
.gfe { margin-top: var(--s5); padding: var(--s5); border-radius: var(--r-card); background: rgba(252,249,243,.75); border: 1px solid var(--line-soft); font-size: .92rem; color: var(--ink-2); }
.gfe h3 { font-size: 1.1rem; margin-bottom: var(--s2); color: var(--ink); }
.gfe p + p { margin-top: var(--s2); }

/* About */
.story { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s7); align-items: center; }
.story figure { margin: 0; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); border: 1px solid rgba(201,164,92,.5); }
.story figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.story .mission { color: var(--on-navy); margin-top: var(--s6); }
.story .mission-sub { color: var(--on-navy-2); }
.story-copy p + p { margin-top: var(--s3); }
.train-panel { border-radius: 32px; padding: var(--s7); }
.train-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.train-list li { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--r-card); background: rgba(252,249,243,.7); border: 1px solid var(--line-soft); min-height: 60px; }
.train-list .i { color: var(--navy); width: 22px; height: 22px; }
.train-list span small { display: block; color: var(--ink-3); font-size: .85rem; }
.approach { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s7); align-items: start; }
.approach .acc { margin: 0; max-width: none; }
.expect-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.expect { padding: var(--s6) var(--s5); border-radius: var(--r-card); display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.expect .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(30,42,62,.07); color: var(--navy); }
.expect h3 { font-size: 1.2rem; margin-bottom: var(--s2); }
.expect p { color: var(--ink-2); font-size: .97rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: stretch; }
.info-list { display: grid; gap: var(--s3); list-style: none; margin: var(--s5) 0 0; padding: 0; }
.info-list li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r-card); background: rgba(252,249,243,.7); border: 1px solid var(--line-soft); }
.info-list .ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(30,42,62,.07); color: var(--navy); }
.info-list strong { display: block; font-weight: 500; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.info-list span, .info-list a { font-size: 1rem; }
.book-panel { border-radius: 32px; padding: var(--s7); display: flex; flex-direction: column; gap: var(--s4); justify-content: center; }
.book-panel h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.book-panel p { color: var(--ink-2); }
.safety { font-size: .93rem; padding: var(--s4); border-radius: var(--r-card); background: rgba(30,42,62,.05); border-left: 2px solid var(--brass); color: var(--ink-2); }
.know-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.know { padding: var(--s5); border-radius: var(--r-card); display: grid; grid-template-columns: auto 1fr; gap: var(--s3); }
.know .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(30,42,62,.07); color: var(--navy); }
.know h3 { font-size: 1.1rem; margin-bottom: var(--s1); }
.know p { color: var(--ink-2); font-size: .94rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); position: relative; list-style: none; margin: 0; padding: 0; }
.steps li { padding: var(--s6) var(--s5); border-radius: var(--r-card); text-align: center; }
.steps .ico { width: 48px; height: 48px; margin: 0 auto var(--s4); border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--brass); color: var(--navy); background: rgba(252,249,243,.8); }
.steps h3 { font-size: 1.2rem; margin-bottom: var(--s2); }
.steps p { color: var(--ink-2); font-size: .95rem; }
.cta-band { border-radius: 32px; padding: var(--s8) var(--s6); text-align: center; background: linear-gradient(180deg, rgba(229,210,180,.6), rgba(229,210,180,.4)); border: 1px solid rgba(255,255,255,.5); }
.cta-band p { max-width: 52ch; margin: var(--s3) auto var(--s5); color: var(--ink-2); }
.cta-band .btn-row { justify-content: center; }

/* Legal pages (privacy / terms bodies are carried over verbatim) */
.page-head { padding: 140px 0 var(--s5); position: relative; z-index: var(--z-content); }
.page-head .wrap { width: min(760px, calc(100% - 40px)); }
.page-head .eyebrow { font: 500 .8rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.page-head h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.06; }
.page-head .lead { margin-top: var(--s3); color: var(--ink-2); font-size: 1.1rem; }
.section-cream { padding: var(--s5) 0 var(--s8); position: relative; z-index: var(--z-content); }
.section-cream > .wrap { width: min(820px, calc(100% - 40px)); border-radius: 32px; padding: var(--s7); }
.prose h2 { font-size: 1.5rem; margin: var(--s6) 0 var(--s3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin: var(--s5) 0 var(--s2); }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: var(--s3); }
.prose ul { padding-left: 1.2rem; margin: var(--s3) 0; }
.prose li + li { margin-top: var(--s2); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .topic-grid { grid-template-columns: repeat(3, 1fr); }
  .issue-grid, .know-grid { grid-template-columns: repeat(2, 1fr); }
  .excel-grid { grid-template-columns: 1fr 1fr; } .excel:first-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .nav-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; border-radius: var(--r-panel);
    background: var(--paper); border: 1px solid rgba(58,49,40,.12); box-shadow: 0 20px 40px -20px rgba(60,34,12,.5);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s linear .2s; }
  .menu-open .nav-list { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
  .menu-kbd .nav-list { transition: none; }
  .nav-list a { display: flex; min-height: 48px; padding: 0 1rem; font-size: 1.02rem; }
  .nav-list .nav-cta a { margin: 4px 0 0; justify-content: center; }
  .menu-toggle { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1rem 0 .85rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(255,255,255,.4); color: var(--ink); font: 500 .95rem var(--body); cursor: pointer; }
  .menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s var(--ease-out), background-color .2s; }
  .menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
  .menu-bars::before { top: -5px; } .menu-bars::after { top: 5px; }
  .menu-open .menu-bars { background: transparent; }
  .menu-open .menu-bars::before { top: 0; transform: rotate(45deg); } .menu-open .menu-bars::after { top: 0; transform: rotate(-45deg); }
  .split-hero, .story, .approach, .contact-grid, .fee-panel, .profile-grid { grid-template-columns: 1fr; }
  .photo-card { max-width: 420px; }
  .story figure { max-width: 360px; }
}
@media (max-width: 720px) {
  :root { --ww: calc(100vw - 24px); --wtop: 82px; --wh: clamp(460px, 72svh, 600px); }
  body { font-size: 1rem; }
  .nav-shell { top: 10px; padding: 0 12px; }
  .nav-pill { min-height: 56px; padding-left: 14px; }
  .brand-mark { width: 30px; } .brand-name { font-size: 1.02rem; }
  .section { padding: var(--s8) 0; }
  .wrap, .narrow { width: calc(100% - 24px); }
  .glass-window { padding: 7px; border-radius: 26px; } .screen { border-radius: 20px; }
  .stage { top: 30%; width: 90%; }
  .ask { padding: 32% 5% 5%; justify-content: flex-start; }
  .svc-card figure { aspect-ratio: 16 / 8; }
  .svc-grid, .topic-grid, .issue-grid, .who-grid, .know-grid, .steps, .expect-grid, .tiles, .train-list, .excel-grid { grid-template-columns: 1fr; }
  .topic-band, .profile, .faq-wrap, .navy-band, .fee-panel, .train-panel, .book-panel, .cta-band, .page-hero .panel, .section-cream > .wrap { padding: var(--s6) var(--s4); border-radius: var(--r-panel); }
  .fees-pill { border-radius: var(--r-panel); padding: var(--s4); justify-content: center; text-align: center; }
  .foot-card { grid-template-columns: 1fr; padding: var(--s5) var(--s4); }
  .page-hero { padding-top: 104px; } .page-head { padding-top: 112px; }
  .version-ribbon { font-size: .58rem; right: 8px; bottom: 8px; padding: .3rem .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js .fade-once { opacity: 1; }
  .btn:active, .topic:active { transform: none; }
}
/* No-WebGL fallback for the orb (orb-h.js adds .orb-fallback) */
.orb-fallback { position: absolute; left: 50%; width: calc(var(--r, 44px) * 2); height: calc(var(--r, 44px) * 2); transform: translate(-50%, -50%); z-index: 1; }
.orb-fallback .of-ball { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F4D9A8, #B26E1A 55%, #5A2E0C); box-shadow: 0 0 60px rgba(201,164,92,.55); }
.orb-fallback .of-ring { position: absolute; inset: -40%; border-radius: 50%; border: 1px solid rgba(201,164,92,.35); }
.orb-fallback .of-ring.r2 { inset: -90%; }
@media (max-width: 720px) { .story figure { max-width: 240px; aspect-ratio: 1 / 1; } }

/* Final build additions (Oct 11) */
.excel-grid.focus-grid { grid-template-columns: 1fr 1fr; }
.excel-grid.focus-grid .excel:first-child { grid-column: auto; } .excel-grid.focus-grid .excel:first-child h3 { font-size: 1.35rem; }
.also { margin-top: var(--s6); }
.also h3 { margin-bottom: var(--s2); }
.also-note { margin-top: var(--s3); color: var(--ink-2); font-size: .95rem; }
.story { align-items: start; }
.story figure { position: sticky; top: 96px; }
.story-copy { max-width: 65ch; }
.story-copy .story-h { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; color: var(--on-navy); margin: var(--s7) 0 var(--s3); text-wrap: balance; }
.story-copy .story-h::before { content: ""; display: block; width: 40px; height: 1px; background: var(--brass); margin-bottom: var(--s3); }
.story-copy p { color: var(--on-navy-2); text-wrap: pretty; }
.story-cta { margin-top: var(--s6); }
.first-session { padding: var(--s7) var(--s6); border-radius: var(--r-panel); max-width: 760px; margin: 0 auto; text-align: center; }
.first-session p { margin-top: var(--s3); }
.contact-panel { max-width: 720px; margin: 0 auto; text-align: center; }
.contact-panel .btn-row { justify-content: center; margin-top: var(--s5); }
.contact-panel .msg-link { margin-top: var(--s4); }
.contact-panel .safety { margin-top: var(--s5); }
.contact-panel .small-print { margin-top: var(--s3); font-size: .9rem; color: var(--ink-2); }
@media (max-width: 960px) { .story figure { position: static; } }
@media (max-width: 720px) { .excel-grid.focus-grid { grid-template-columns: 1fr; } }

/* Fix1 (Oct 12): fees, CTA contrast, topics contrast, profile line */
.fee-panel { gap: var(--s6); align-items: start; }
.fee-list li { padding: var(--s3) 0; }
.fee-list .price { font-size: 1.6rem; }
.fee-sub { margin-top: var(--s3); font-size: .92rem; color: var(--ink-2); }
.fee-notes { gap: var(--s3); align-content: start; padding-top: var(--s2); }
.fee-notes p { font-size: .95rem; line-height: 1.5; }
.fee-notes strong { color: var(--ink); font-weight: 600; }
.cta-band { background: var(--navy); border: 1px solid rgba(201,164,92,.5); box-shadow: 0 30px 60px -30px rgba(30,42,62,.55); }
.cta-band h2 { color: var(--on-navy); }
.cta-band h2 em { color: var(--brass); }
.cta-band p { color: var(--on-navy-2); }
.cta-band .btn { background: var(--paper); color: var(--navy); border-color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .cta-band .btn:hover { background: #fff; } }
.topic-band { background: rgba(252,249,243,.72); border: 1px solid rgba(30,42,62,.12); box-shadow: 0 24px 50px -32px rgba(30,42,62,.35); }
.topic-band .topic { background: #fff; border: 1px solid rgba(30,42,62,.14); box-shadow: 0 10px 24px -18px rgba(30,42,62,.4); }
.mission-solo { font-style: italic; }

/* Orb static fallback (no WebGL / context lost): keep the warm glowing look */
.orb-fallback .of-ball {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,250,235,.95) 0 6%, rgba(255,240,205,.55) 12%, transparent 26%),
    radial-gradient(circle at 50% 55%, #F2D08E 0%, #D9A24A 38%, #9A5F1C 72%, #4A2A0A 100%);
  box-shadow: 0 0 0 1px rgba(255,226,170,.35) inset, 0 0 calc(var(--r,44px) * .9) rgba(233,180,90,.75), 0 0 calc(var(--r,44px) * 2.4) rgba(221,164,74,.45), 0 0 calc(var(--r,44px) * 4.5) rgba(201,140,60,.22);
}
.orb-fallback::before { content: ""; position: absolute; inset: -160%; border-radius: 50%; background: radial-gradient(circle, rgba(233,180,90,.28) 0%, rgba(233,180,90,.10) 35%, transparent 65%); pointer-events: none; }
.orb-fallback .of-ring { border-color: rgba(228,198,134,.45); }