/* =============================================================================
   KBM Capital — site design system
   Source of truth: Web Brain 09_Design_System.md (binding, 2026-08-18).
   Type-led, photo-free, two first-class modes, performance budget ≤400KB.

   Design round 2: emerald is PUNCTUATION, not atmosphere. Ink headings,
   neutral surfaces; emerald survives in the logo, kickers, buttons, links,
   step numerals, the case panel, and the frond. (Feedback #1, taste refs
   hiive/preqin — one saturated color, used sparingly.)
   ========================================================================== */

:root{
  --paper:#FBFBF9; --ink:#202824; --muted:#626D67;
  --emerald:#065F46; --green:#047857; --mint:#D1FAE5; --card:#F4F5F2;
  --line:#E4E6E1; --amber:#B45309; --amberbg:#FEF3C7;
  --display:'Fraunces',Georgia,serif; --body:'Inter',-apple-system,sans-serif;
  --maxw:1080px; --pad:clamp(1.1rem,4vw,2rem);
}
/* Theme (W-01, feedback round 1): follows the SYSTEM appearance only, via
   prefers-color-scheme. The manual toggle is gone; the masthead stays
   permanently dark in both themes per round 2.1. */
@media(prefers-color-scheme:dark){:root{
  --paper:#121514; --ink:#E9EDEB; --muted:#99A39D;
  --emerald:#34D399; --green:#3ECF9A; --mint:#0F2A20; --card:#191D1B;
  --line:#282D2A; --amber:#FBBF24; --amberbg:#2A2210;
}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased}
@media(min-width:760px){body{font-size:18px}}
img,svg{max-width:100%}
a{color:var(--emerald);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1.12;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,6.5vw,3.6rem)}
h2{font-size:clamp(1.5rem,4vw,2.2rem)}
h3{font-size:1.15rem}
p{max-width:68ch}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* ---- shell: the masthead is PERMANENTLY dark, both themes (round 2.1).
   The white logo lives here; the dark ground is what makes it pop, and the
   dark-top / light-body split is the institutional contrast move (aqr,
   preqin). Fixed colors on purpose — this band does not follow the theme. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
header.site{position:sticky;top:0;background:#0E1713;
  border-bottom:1px solid #1F2D26;z-index:50}
.nav{display:flex;align-items:center;gap:1.2rem;padding:.7rem var(--pad);max-width:var(--maxw);margin:0 auto}
.nav .logo{display:flex;align-items:center;text-decoration:none}
.nav .logo img{height:36px;width:auto;display:block}
.nav .links{display:none;gap:1.4rem;margin-left:auto}
.nav .links a{text-decoration:none;color:#DCE5E0;font-size:.95rem}
.nav .links a[aria-current]{color:#34D399;font-weight:600}
.nav .phone{margin-left:auto;font-size:.9rem;white-space:nowrap;text-decoration:none;font-weight:600;color:#34D399}
@media(min-width:860px){.nav .links{display:flex}.nav .phone{margin-left:1rem}}
.menu-btn{margin-left:auto;background:none;border:1px solid #2B3B33;border-radius:8px;
  padding:.6rem .55rem;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:#DCE5E0}
@media(min-width:860px){.menu-btn{display:none}.nav .phone{margin-left:0}}
.mobile-menu{display:none;border-bottom:1px solid #1F2D26;background:#0E1713}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:.85rem var(--pad);text-decoration:none;color:#DCE5E0;border-top:1px solid #1F2D26}

/* ---- hero: continuous with the masthead — one dark panel, both themes.
   The frond finally has a ground it can glow against. */
.hero{position:relative;overflow:hidden;padding:clamp(3.2rem,10vw,6.5rem) 0 clamp(2.6rem,8vw,5rem);
  background:radial-gradient(120% 100% at 85% -10%,#14352A 0%,#0E1713 60%)}
.hero .frond{position:absolute;right:-8%;top:-12%;width:min(58vw,540px);opacity:.10;color:#34D399;pointer-events:none}
.hero h1{max-width:16ch;color:#F2F6F3}
.hero .kicker{color:#3ECF9A}
.hero .sub{font-size:clamp(1.05rem,2.6vw,1.3rem);margin-top:1.1rem;max-width:44ch;color:#A9B8B0}
.hero .sub a{color:#6EE7B7}
.hero .textlink{color:#6EE7B7}
.hero .muted,.hero .conf{color:#A9B8B0}
.hero .btn{background:#34D399;color:#06281C}
.cta-row{margin-top:1.8rem;display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.btn{display:inline-block;background:var(--emerald);color:var(--paper);font-weight:600;
  text-decoration:none;padding:.9rem 1.5rem;border-radius:10px;border:0;font-size:1.02rem;cursor:pointer}
@media(prefers-color-scheme:dark){.btn{color:#06281C}}
.btn:hover{filter:brightness(1.08)}
.textlink{font-size:.92rem}

/* ---- sections ---- */
section.band{padding:clamp(2.6rem,7vw,4.5rem) 0;border-top:1px solid var(--line)}
section.band.tint{background:var(--card);border-top:0}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green);margin-bottom:.6rem}
.lede{font-size:clamp(1.02rem,2.4vw,1.18rem);margin-top:.9rem}
.grid2{display:grid;gap:1.2rem;margin-top:1.6rem}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.4rem;
  transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px -18px rgba(6,95,70,.45)}
.card.plain{background:transparent}
.card h3{margin-bottom:.6rem}
.card ul{padding-left:1.1rem;display:grid;gap:.45rem}

/* closing CTA band — the saturated emerald bookend that mirrors the dark
   masthead: dark top, dark close, calm light middle. */
section.band.cta-band{position:relative;overflow:hidden;background:var(--emerald);border-top:0}
section.band.cta-band h2{color:#F2F6F3}
section.band.cta-band .lede{color:var(--mint)}
section.band.cta-band .btn{background:var(--paper);color:var(--emerald)}
section.band.cta-band .textlink{color:var(--mint)}
@media(prefers-color-scheme:dark){
section.band.cta-band{background:var(--mint)}
section.band.cta-band h2{color:var(--ink)}
section.band.cta-band .lede{color:var(--muted)}
section.band.cta-band .btn{background:var(--emerald);color:#06281C}
section.band.cta-band .textlink{color:var(--emerald)}
}
.cta-band .frond-corner{position:absolute;right:-3%;bottom:-38%;width:min(40vw,300px);
  opacity:.12;color:#A7F3D0;pointer-events:none;transform:rotate(18deg)}
@media(prefers-color-scheme:dark){.cta-band .frond-corner{opacity:.08;color:var(--emerald)}}

/* numbered path (How It Works) */
.path{display:grid;gap:1.1rem;margin-top:1.6rem;max-width:640px}
.step{display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;align-items:start}
.step .n{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--emerald);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700}
@media(prefers-color-scheme:dark){.step .n{color:#06281C}}
.step h3{margin-bottom:.15rem}

/* case panel — the ONE deliberately saturated block per page */
.case{background:var(--emerald);color:var(--mint);border-radius:16px;padding:1.6rem;margin-top:1.8rem}
@media(prefers-color-scheme:dark){.case{background:var(--mint);color:var(--ink);border:1px solid var(--line)}}
.case h3{color:inherit;margin-bottom:.8rem}
.case p{color:inherit}
.case .beat{margin-top:.9rem;padding-top:.9rem;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.case .beat b{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:.25rem}

/* bios — flip cards (about page). Click/Enter rotates front → back. */
.bios{display:grid;gap:1.2rem;margin-top:1.6rem}
@media(min-width:760px){.bios{grid-template-columns:repeat(3,1fr)}}
.bio-card{perspective:1200px;cursor:pointer;outline-offset:3px;transition:transform .25s ease}
.bio-card:hover{transform:translateY(-3px)}
.bio-inner{display:grid;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.35,.9,.4,1);height:100%}
.bio-card.flipped .bio-inner{transform:rotateY(180deg)}
.bio-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.9rem 1.7rem;
  min-height:17rem;display:flex;flex-direction:column;gap:.55rem}
.bio-back{transform:rotateY(180deg);background:var(--card)}
.bio-face h3{color:var(--ink);font-size:1.35rem}
.bio-face .role{font-size:.88rem;color:var(--green);font-weight:600}
.bio-face .bio-text{font-size:.95rem;line-height:1.55}
.flip-hint{margin-top:auto;padding-top:.6rem;font-size:.8rem;font-weight:600;color:var(--green)}
@media(prefers-reduced-motion:reduce){.bio-inner{transition:none}}

/* ---- forms ---- */
form.lead{display:grid;gap:1rem;margin-top:1.6rem;max-width:640px}
.frow{display:grid;gap:1rem}
@media(min-width:600px){.frow.two{grid-template-columns:1fr 1fr}}
label{font-weight:600;font-size:.92rem;display:block;margin-bottom:.35rem}
label .opt,.pair-label .opt{font-weight:400;color:var(--muted);font-size:.82rem}
.contact-pair{display:grid;gap:.5rem;padding:.9rem;border:1px solid var(--line);border-radius:12px}
.pair-label{font-weight:600;font-size:.92rem}
input,select{width:100%;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:10px;
  font-size:1rem;background:var(--paper);color:var(--ink);min-height:52px}
input:focus,select:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
input::placeholder{color:color-mix(in srgb,var(--muted) 65%,transparent)}
.hint{font-size:.82rem;color:var(--muted);margin-top:.35rem}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.conf{font-size:.85rem;color:var(--muted)}
.err{color:var(--amber);font-size:.85rem;margin-top:.3rem;display:none}
.field.bad input,.field.bad select{border-color:var(--amber)}
.field.bad .err{display:block}
.formnote{font-size:.85rem;color:var(--muted)}

/* sticky mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;display:none;gap:.6rem;padding:.7rem var(--pad);
  background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);z-index:60}
.sticky-cta a{flex:1;text-align:center;padding:.75rem;font-size:.95rem}
.sticky-cta .call{background:transparent;color:var(--emerald);border:1.5px solid var(--emerald)}
@media(min-width:860px){.sticky-cta{display:none!important}}
body.show-cta .sticky-cta{display:flex}
body.form-visible .sticky-cta{display:none}

/* footer */
footer.site{border-top:1px solid var(--line);padding:2.4rem 0 5.5rem;margin-top:2rem}
footer .cols{display:grid;gap:1.4rem}
@media(min-width:760px){footer .cols{grid-template-columns:2fr 1fr 1fr}}
footer a{text-decoration:none;color:var(--muted);font-size:.9rem;display:block;padding:.2rem 0}
footer .sig{font-family:var(--display);color:var(--emerald);font-size:1.02rem;margin-top:.6rem}

/* motion */
.fade{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.fade.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}