/* ── Poppins, self-hosted (SIL Open Font License — assets/fonts/OFL.txt).
   No external font host is contacted; this package has no outbound
   dependencies of any kind. ── */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/poppins-latin-ext-300-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/poppins-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/poppins-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/poppins-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/poppins-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/poppins-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/poppins-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/poppins-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/poppins-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/poppins-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/fonts/poppins-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/fonts/poppins-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ══════════════════ TOKENS ══════════════════ */
:root{
  /* Official VFO digital HEX values */
  --red:#EC1B33;
  --teal:#0FA8B9;
  --gold:#F8AE32;
  --orange:#F07521;
  --offwhite:#F7F1EB;
  --black:#090909;

  /* Working neutrals derived only for surface / opacity / contrast */
  --ink:#141414;
  --card-d:#131315;
  --line-d:rgba(247,241,235,.13);
  --line-l:rgba(9,9,9,.13);
  --body-d:#C6C4C1;
  --muted-d:#8C8A88;
  --body-l:#4A4845;
  --muted-l:#6E6B67;
  --paper:#FFFFFF;

  --maxw:1280px;
  --pad:48px;

  /* National map asset — used ONLY in the final CTA on this page. */
  --map:url(../images/vfo-national-map.jpg);
}

/* ══════════════════ RESET / BASE ══════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  background:var(--black);
  color:var(--offwhite);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.modal-open{overflow:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
h1,h2,h3,h4{font-weight:700;line-height:1.1;letter-spacing:-0.02em;}
em{font-style:normal;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--black);padding:12px 20px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* ── Shared type primitives ── */
.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  line-height:1.4;
}
.eyebrow .sq{width:9px;height:9px;flex:0 0 9px;background:var(--red);}
.h-sec{
  font-size:clamp(34px,3.1vw,46px);
  font-weight:700;line-height:1.08;letter-spacing:-0.025em;
  text-transform:uppercase;margin-top:22px;
}
.lede{font-size:17px;line-height:1.8;max-width:660px;margin-top:20px;}
.lede + .lede{margin-top:16px;}
.sec-head{display:grid;grid-template-columns:1.08fr 1fr;gap:0 72px;align-items:end;}
.sec-head .head-l{grid-column:1;}
.sec-head .head-r{grid-column:2;padding-bottom:6px;}
.sec-head .head-r .lede{max-width:none;margin-top:0;}
.on-dark .h-sec{color:var(--offwhite);}
.on-dark .eyebrow{color:var(--muted-d);}
.on-dark .lede{color:var(--body-d);}
.on-dark .lede strong{color:#fff;font-weight:600;}
.on-light .h-sec{color:var(--black);}
.on-light .eyebrow{color:var(--muted-l);}
.on-light .lede{color:var(--body-l);}
.on-light .lede strong{color:var(--black);font-weight:600;}

/* ── Buttons — identical system to the approved Homepage / Services ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 32px;border:1.5px solid transparent;line-height:1;
  transition:background-color .22s,color .22s,border-color .22s,transform .22s;
}
.btn-red{background:var(--red);color:#fff;border-color:var(--red);}
.btn-red:hover{background:#C9142A;border-color:#C9142A;transform:translateY(-2px);}
.btn-ink{background:var(--black);color:var(--offwhite);border-color:var(--black);}
.btn-ink:hover{background:#2A2A2A;border-color:#2A2A2A;transform:translateY(-2px);}
.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:2px solid currentColor;transition:gap .22s;
}
.tlink:hover{gap:15px;}

/* ── Photography — authentic VFO imagery only, no stock ──
   .ph is the approved frame. Placeholder styling below is retained only as
   the fallback surface behind each photograph; every slot on this page now
   carries a real image via img.pic. ── */
.ph img.pic{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
.ph{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(9,9,9,.04),rgba(9,9,9,.10)),
    repeating-linear-gradient(135deg,#EDE7E0 0 16px,#E7E0D8 16px 32px);
  border:1px solid rgba(9,9,9,.16);
}
.ph .mk{width:76px;opacity:.30;}
.ph .t{
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  line-height:2;color:#8A837B;padding:0 22px;max-width:340px;
}
.ph.on-black{
  background:
    linear-gradient(180deg,rgba(247,241,235,.05),rgba(247,241,235,.02)),
    repeating-linear-gradient(135deg,#141416 0 16px,#101012 16px 32px);
  border-color:var(--line-d);
}
.ph.on-black .t{color:#7C7A78;}
.ph.on-black .mk{opacity:.34;}

/* ══════════════════ NAV ══════════════════ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(9,9,9,.90);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-d);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:96px;display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.nav-logo img{height:34px;width:auto;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-size:13.5px;font-weight:500;letter-spacing:.06em;
  color:var(--body-d);transition:color .2s;position:relative;padding:6px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red);transition:width .25s;
}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::after{width:100%;}
.nav-links a.current{color:#fff;}
.nav-links a.current::after{width:100%;}
.nav-links a.btn{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 32px;color:#fff;
}
.nav-links a.btn::after{content:none;}
.nav-links a.btn:hover{color:#fff;}

/* ══════════════════ 1 · HERO — EDITORIAL, HUMAN, NOT MAP-LED ══════════════════
   Deliberately different from the Homepage hero: no national map, no proof bar
   beneath it, no four-lane routing grid. A dominant authentic photograph is
   the visual, with the node language reduced to a faint constellation behind
   the copy column. */
.hero{position:relative;background:var(--black);overflow:hidden;min-height:680px;display:flex;align-items:center;}
.hero-net{position:absolute;left:-40px;top:0;width:62%;height:100%;opacity:.5;pointer-events:none;}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;width:100%;padding:96px var(--pad) 0;}
.hero-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:0 64px;align-items:center;}
.hero h1{
  font-size:clamp(42px,3.8vw,56px);
  line-height:1.04;letter-spacing:-0.035em;color:#fff;
  margin-top:26px;text-transform:uppercase;
}
.hero h1 em{color:var(--red);}
.hero .lede{font-size:17.5px;max-width:600px;margin-top:28px;color:var(--body-d);}
.hero .lede strong{color:#fff;font-weight:600;}
.hero .pov{
  margin-top:30px;padding:22px 0 0;border-top:1px solid var(--line-d);
  font-size:15px;font-weight:700;letter-spacing:.15em;line-height:1.75;
  text-transform:uppercase;color:var(--teal);max-width:540px;
}
.hero-cta{margin-top:36px;padding-bottom:104px;}

/* PHOTO SLOT 1 — the dominant hero image. Bleeds to the right edge. */
.hero-figure{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:44vw;max-width:720px;
  display:flex;flex-direction:column;
}
/* The approved hero frame anticipated a portrait image. The approved hero
   photograph is a wide field photograph containing three people; a portrait
   crop would have removed two of them. The frame is therefore a vertically
   centred 16:10 panel that still bleeds to the right edge and keeps the
   accent bar and caption. Nothing else in the hero changed. */
/* No border, rule or separator of any kind between the photograph and the
   black hero environment — the photograph sits cleanly against it. */
.hero-figure .ph{flex:none;aspect-ratio:16/10;border:none;}
.hero-figure .cap{
  /* .cap is also the capability-card class further down this stylesheet, and
     its border-top was painting a grey rule across the hero photograph.
     Explicitly cleared here — the photo must meet the caption gradient with
     no line, border, divider or stroke of any kind. */
  border-top:0;margin-top:0;
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(180deg,rgba(9,9,9,0),rgba(9,9,9,.92) 46%);
  padding:64px 40px 30px;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.9;
}

/* ══════════════════ 2 · FOUR CAPABILITY AREAS ══════════════════
   Buyer identification and site consistency only — NOT a second Services
   section. Names and positioning lines are locked to the approved Homepage. */
.caps{background:var(--offwhite);padding:96px 0 100px;}
.capgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--line-l);}
.cap{
  position:relative;padding:34px 30px 36px 0;border-top:3px solid;margin-top:-1px;
}
.cap:last-child{padding-right:0;}
.cap .n{font-size:11.5px;font-weight:700;letter-spacing:.24em;color:var(--muted-l);}
.cap h3{
  font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--black);margin-top:14px;
}
.cap .pos{
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  margin-top:12px;line-height:1.8;
}
.caps .foot{
  margin-top:44px;display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line-l);
}
.caps .foot p{font-size:16px;line-height:1.8;color:var(--body-l);max-width:720px;}
.caps .foot p strong{color:var(--black);font-weight:600;}

/* ══════════════════ 3 · PROOF WALL ══════════════════
   Eight proof points. Every figure carries context and implication — no bare
   statistics. Presented as one scannable wall rather than eight heavy cards. */
.wall{position:relative;background:var(--black);padding:100px 0 106px;overflow:hidden;}
.wall-mark{position:absolute;top:-70px;right:-120px;width:420px;opacity:.045;pointer-events:none;}
.wall-in{position:relative;}
.wallgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-d);border-left:1px solid var(--line-d);
  margin-top:58px;
}
.wp{
  position:relative;padding:32px 30px 34px;
  border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  transition:background-color .24s;
}
.wp:hover{background:#121214;}
.wp .v{
  font-size:clamp(28px,2.5vw,36px);font-weight:700;line-height:1.05;letter-spacing:-0.035em;
  text-transform:uppercase;
}
.wp .v.sm{font-size:clamp(22px,1.9vw,27px);letter-spacing:-0.02em;line-height:1.15;}
.wp .l{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-top:14px;line-height:1.75;min-height:40px;
}
.wp .c{
  font-size:14px;line-height:1.75;color:var(--body-d);margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line-d);
}
.wall .note{
  margin-top:26px;font-size:12.5px;line-height:1.9;letter-spacing:.03em;color:var(--muted-d);
  max-width:900px;
}

/* ══════════════════ TESTIMONIAL SYSTEM ══════════════════
   One reusable component, four placements. Light band, dark band and inline
   card variants. No quote, attribution or client mark may be invented. */
.tstm{padding:78px 0;}
.tstm--light{background:var(--paper);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);}
.tstm--sand{background:var(--offwhite);}
.tstm--dark{background:var(--card-d);border-top:1px solid var(--line-d);}
.tstm-in{display:grid;grid-template-columns:auto 1fr;gap:0 40px;align-items:start;}
.tstm .qm{
  font-size:96px;font-weight:800;line-height:.72;letter-spacing:-0.04em;
  color:var(--red);opacity:.9;
}
.tstm--dark .qm{color:var(--gold);}
.tstm .k{
  font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
}
.tstm--light .k,.tstm--sand .k{color:var(--muted-l);}
.tstm--dark .k{color:var(--muted-d);}
.tstm .slot{
  margin-top:18px;border:1.5px dashed rgba(9,9,9,.24);padding:34px 34px;
  display:flex;flex-direction:column;gap:12px;
}
.tstm--dark .slot{border-color:var(--line-d);background:rgba(247,241,235,.02);}
.tstm .slot .h{
  font-size:clamp(19px,1.5vw,23px);font-weight:700;letter-spacing:.02em;line-height:1.4;
  text-transform:uppercase;color:var(--black);
}
.tstm--dark .slot .h{color:#fff;}
.tstm .slot .s{font-size:14.5px;line-height:1.85;color:var(--body-l);max-width:760px;}
.tstm--dark .slot .s{color:var(--body-d);}
.tstm .slot .attr{
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-l);padding-top:14px;border-top:1px solid var(--line-l);
}
.tstm--dark .slot .attr{color:var(--muted-d);border-top-color:var(--line-d);}
/* Compact inline variant used inside other sections. */
.tstm.inline{padding:56px 0 0;border:none;background:none;margin-top:60px;border-top:1px solid var(--line-d);}
.tstm.inline .qm{font-size:80px;}
/* ── Real client testimonials ──
   Three approved, named client testimonials. Built natively in the About
   page design language — Poppins, black / off-white, restrained accent
   rules. No star ratings, no review-card treatment, no imported artwork. */
.tstm .q{
  font-size:17px;line-height:1.82;font-weight:400;margin-top:18px;max-width:70ch;
}
.tstm--light .q,.tstm--sand .q{color:var(--body-l);}
.tstm--dark .q{color:var(--body-d);}
.tstm .q strong{font-weight:600;}
.tstm--light .q strong,.tstm--sand .q strong{color:var(--black);}
.tstm--dark .q strong{color:#fff;}
/* Feature variant — the lead testimonial, set as a display quote. */
.tstm.feature .q{
  font-size:clamp(21px,1.85vw,27px);line-height:1.5;font-weight:600;
  letter-spacing:-0.015em;color:var(--black);max-width:46ch;
}
.tstm.feature .qm{font-size:120px;}
/* Long variant — the longest approved quote, set in two balanced columns
   so three testimonials of very different lengths still read as a set. */
.tstm .q.long{max-width:none;columns:2;column-gap:56px;font-size:15.5px;line-height:1.8;}
.tstm .who{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line-l);
  display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;
}
.tstm--dark .who{border-top-color:var(--line-d);}
.tstm .who .nm{
  font-size:14px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--black);
}
.tstm--dark .who .nm{color:#fff;}
.tstm .who .org{
  font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-l);
}
.tstm--dark .who .org{color:var(--muted-d);}
.tstm .who .rule{flex:1;min-width:40px;height:2px;opacity:.75;}

/* ══════════════════ 4 · WHY VFO EXISTS ══════════════════ */
.why{background:var(--paper);padding:104px 0;}
.whygrid{display:grid;grid-template-columns:.88fr 1.12fr;gap:0 76px;align-items:center;}
/* PHOTO SLOT 2 — editorial. 5:6 frame, object-fit:cover. */
.whygrid .ph{aspect-ratio:5/6;}
.why .body p{font-size:17px;line-height:1.85;color:var(--body-l);margin-top:20px;}
.why .body p strong{color:var(--black);font-weight:600;}
.gap{margin-top:28px;border-left:3px solid var(--line-l);padding-left:24px;}
.gap .had{
  font-size:14.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-l);line-height:2.1;
}
.gap .miss{
  font-size:clamp(19px,1.6vw,23px);font-weight:700;line-height:1.45;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--red);margin-top:12px;
}
.why .body p.close{
  margin-top:34px;padding-top:28px;border-top:1px solid var(--line-l);
  font-size:clamp(24px,2vw,30px);font-weight:700;line-height:1.3;letter-spacing:-0.02em;
  text-transform:uppercase;color:var(--black);
}
.why .body p.close em{color:var(--red);}

/* ══════════════════ 5 · VFO³ SYSTEM — FOUR STEPS + RETURN LOOP ══════════════════ */
.system{position:relative;background:var(--black);padding:104px 0 110px;overflow:hidden;}
.system-mark{position:absolute;top:50%;right:-110px;transform:translateY(-50%);width:470px;opacity:.05;pointer-events:none;}
.system-in{position:relative;}
.system h2 em{color:var(--teal);}
.system .sup{font-size:.58em;vertical-align:super;letter-spacing:0;}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:60px;}
.step{
  position:relative;background:var(--card-d);border:1px solid var(--line-d);border-top:3px solid;
  padding:34px 30px 32px;transition:transform .26s,background-color .26s,box-shadow .26s;
}
.step:hover{transform:translateY(-6px);background:#17171A;box-shadow:0 24px 52px rgba(0,0,0,.62);}
.step .n{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
.step .n .dot{width:9px;height:9px;border-radius:50%;background:currentColor;}
.step h3{font-size:clamp(21px,1.7vw,26px);color:#fff;margin-top:18px;text-transform:uppercase;letter-spacing:-0.015em;}
.step .imp{font-size:13.5px;font-weight:700;letter-spacing:.06em;line-height:1.6;margin-top:12px;}
.step .s{font-size:15px;line-height:1.75;color:var(--body-d);margin-top:14px;}
.step .arrow{position:absolute;right:-16px;top:50%;transform:translateY(-50%);font-size:17px;font-weight:700;color:var(--muted-d);z-index:2;}
.loopback{display:flex;align-items:center;gap:20px;margin-top:34px;flex-wrap:wrap;}
.loopback .k{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;
}
.loopback .rline{flex:1;min-width:120px;height:2px;background:linear-gradient(90deg,var(--orange),var(--red));opacity:.8;}
.loopback .n{font-size:14.5px;line-height:1.8;color:var(--body-d);}
.sequence{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:34px;
  padding:30px 0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
}
.sequence .s{
  font-size:15px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.sequence .s .dot{width:9px;height:9px;border-radius:50%;background:currentColor;}
.sequence .arw{color:var(--muted-d);font-weight:700;font-size:16px;}
.sequence .rtn{
  margin-left:6px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:8px;
}
.system-cta{margin-top:40px;}

/* ══════════════════ 6 · THE RECEIPTS ══════════════════ */
.receipts{background:var(--offwhite);padding:104px 0;}
.receipts h2 em{color:var(--gold);}
.resgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:58px;}
.brief{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line-l);border-top:3px solid;
  transition:transform .26s,box-shadow .26s;
}
.brief:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(9,9,9,.13);}
.brief-hd{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 32px;border-bottom:1px solid var(--line-l);
}
.brief-hd .cat{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;}
.brief-hd .file{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-l);}
.brief-bd{padding:34px 32px;display:flex;flex-direction:column;flex:1;}
.brief .result{
  font-size:clamp(25px,2.1vw,31px);line-height:1.16;letter-spacing:-0.03em;
  color:var(--black);text-transform:uppercase;
}
.brief .did{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-l);margin-top:22px;}
.brief .copy{font-size:15.5px;line-height:1.8;color:var(--body-l);margin-top:10px;}
.brief .proofline{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-l);}
.brief .proofline span{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body-l);background:var(--offwhite);border:1px solid var(--line-l);padding:7px 12px;
}
.brief .pending{
  margin-top:20px;border:1.5px dashed rgba(9,9,9,.26);padding:20px 18px;text-align:center;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-l);line-height:1.95;
}
.brief .go{margin-top:26px;align-self:flex-start;}
.receipts-cta{margin-top:46px;}

/* ══════════════════ 7 · BUILT BY OPERATORS ══════════════════ */
.ops{background:var(--paper);padding:104px 0 0;}
.ops .posline{
  margin-top:46px;padding:26px 0;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
  font-size:clamp(20px,1.7vw,25px);font-weight:700;line-height:1.4;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--black);
}
.ops .posline em{color:var(--red);}

/* Founder — clickable card opening the bio modal. */
.founder{
  display:grid;grid-template-columns:360px 1fr;gap:0 60px;align-items:center;width:100%;text-align:left;
  background:var(--offwhite);border:1px solid var(--line-l);border-left:3px solid var(--red);
  padding:52px 56px;margin-top:44px;transition:box-shadow .26s,transform .26s;
}
.founder:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(9,9,9,.12);}
.founder,.lead{cursor:pointer;}
/* PHOTO SLOT 3 — approved founder headshot. 4:5 frame, object-fit:cover. */
.founder .ph{aspect-ratio:4/5;}
.founder h3{font-size:clamp(30px,2.6vw,38px);text-transform:uppercase;letter-spacing:-0.03em;color:var(--black);}
.founder h3 em{color:var(--red);}
.founder .ti{
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted-l);margin-top:12px;padding-bottom:22px;border-bottom:1px solid var(--line-l);
}
.founder p{font-size:16.5px;line-height:1.85;color:var(--body-l);margin-top:22px;}
.founder p strong{color:var(--black);font-weight:600;}
.founder .go{margin-top:26px;color:var(--red);}

.leadgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:22px;}
.lead{
  background:var(--paper);border:1px solid var(--line-l);border-top:3px solid;
  padding:0 0 26px;display:flex;flex-direction:column;text-align:left;width:100%;
  transition:transform .26s,box-shadow .26s;
}
.lead:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(9,9,9,.13);}
/* PHOTO SLOT 4 — approved leadership headshots. 4:5 frames, object-fit:cover. */
.lead .ph{aspect-ratio:4/5;border:none;border-bottom:1px solid var(--line-l);}
.lead .ph .mk{width:58px;}
.lead .ph .t{font-size:11.5px;letter-spacing:.16em;padding:0 16px;}
.lead .nm{font-size:19px;font-weight:700;letter-spacing:-0.01em;text-transform:uppercase;color:var(--black);margin:26px 26px 0;}
.lead .ti{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;line-height:1.85;margin:10px 26px 0;min-height:64px;}
.lead .s{font-size:14.5px;line-height:1.75;color:var(--body-l);margin:16px 26px 0;padding-top:16px;border-top:1px solid var(--line-l);flex:1;}
.lead .go{margin:22px 26px 0;align-self:flex-start;font-size:11.5px;}

/* Authentic people photography, integrated — not a separate collage section. */
.opsphoto{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;margin-top:22px;}
/* PHOTO SLOT 5 — authentic VFO team / field photography. */
.opsphoto .ph{height:330px;}

/* The VFO Standard — one compact brand statement. */
.standard{background:var(--black);margin-top:96px;padding:78px 0;}
.standard-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);text-align:center;}
.standard .k{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-d);}
.standard .lines{margin-top:22px;font-size:clamp(24px,2.3vw,34px);font-weight:700;line-height:1.45;letter-spacing:.02em;text-transform:uppercase;}
.standard .lines span{white-space:nowrap;}
.standard .r{color:var(--red);}
.standard .b{color:var(--teal);}
.standard .g{color:var(--gold);}

/* ══════════════════ 8 · FINAL CTA ══════════════════ */
.final{position:relative;background:var(--black);border-top:1px solid var(--line-d);padding:122px 0;overflow:hidden;}
.mapimg{background:var(--map) no-repeat center center;background-size:100% auto;aspect-ratio:1640/959;}
.final-map{position:absolute;top:-38%;right:-14%;width:74%;pointer-events:none;opacity:.44;}
.final-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--black) 38%,rgba(9,9,9,.80) 66%,rgba(9,9,9,.52) 100%);}
.final-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.final h2{font-size:clamp(42px,4.4vw,58px);line-height:1.06;letter-spacing:-0.035em;color:#fff;text-transform:uppercase;margin-top:24px;max-width:720px;}
.final h2 em{color:var(--gold);}
.final p{font-size:17px;line-height:1.8;color:var(--body-d);max-width:580px;margin-top:22px;}
.final .cta{margin-top:40px;}

/* ══════════════════ LEADERSHIP BIO MODALS ══════════════════
   Accessible dialog: ESC close, click-outside close, focus trap, focus
   restore, no page reload. Styled as part of the VFO system — not a generic
   browser popup. */
.modal{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;padding:48px 24px;
}
.modal[open],.modal.is-open{display:flex;}
.modal-scrim{position:absolute;inset:0;background:rgba(9,9,9,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.modal-card{
  position:relative;width:min(980px,100%);max-height:86vh;overflow-y:auto;
  background:var(--paper);border-top:4px solid var(--red);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  display:grid;grid-template-columns:320px 1fr;gap:0;
  animation:modalin .28s ease;
}
@keyframes modalin{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.modal-photo{background:var(--offwhite);padding:40px;}
/* PHOTO SLOT 6 — approved headshot inside each bio modal. FILLED. */
.modal-photo .ph{aspect-ratio:4/5;}
.modal-body{padding:44px 44px 44px 40px;}
.modal-body .k{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-l);}
.modal-body h3{font-size:clamp(28px,2.4vw,34px);text-transform:uppercase;letter-spacing:-0.03em;color:var(--black);margin-top:14px;}
.modal-body .ti{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1.85;
  margin-top:12px;padding-bottom:20px;border-bottom:1px solid var(--line-l);
}
.modal-body .role{font-size:16px;line-height:1.8;color:var(--body-l);margin-top:20px;}
.modal-slot{
  margin-top:22px;border:1.5px dashed rgba(9,9,9,.26);padding:26px 26px;
  display:flex;flex-direction:column;gap:10px;
}
.modal-slot .h{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--black);}
.modal-slot .s{font-size:14px;line-height:1.85;color:var(--muted-l);}
.modal-close{
  position:absolute;top:14px;right:14px;z-index:4;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);color:#fff;font-size:20px;line-height:1;
  transition:background-color .2s;
}
.modal-close:hover{background:var(--red);}

/* ══════════════════ DESKTOP RANGE TUNING (1280–1920) ══════════════════ */
@media (max-width:1500px){
  .hero-figure{width:42vw;}
}
@media (max-width:1400px){
  :root{--pad:40px;}
  .hero-grid{gap:0 56px;}
  .system-mark{width:400px;right:-120px;}
  .founder{grid-template-columns:320px 1fr;gap:0 48px;padding:46px 44px;}
  .step{padding:30px 26px 28px;}
  .wp{padding:28px 24px 30px;}
}
/* Responsive fundamentals only — the intentional mobile redesign is a later pass. */
@media (max-width:1180px){
  .sec-head{grid-template-columns:1fr;gap:26px;}
  .sec-head .head-r{padding-bottom:0;}
  .hero{min-height:0;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-figure{position:relative;width:100%;max-width:none;height:420px;margin-top:48px;}
  .hero-cta{padding-bottom:0;}
  .hero-in{padding-bottom:80px;}
  .capgrid,.wallgrid,.flow,.leadgrid{grid-template-columns:1fr 1fr;}
  .resgrid{grid-template-columns:1fr;}
  .whygrid{grid-template-columns:1fr;gap:40px;}
  .whygrid .ph{aspect-ratio:16/9;}
  .founder{grid-template-columns:1fr;gap:36px;}
  .founder .ph{max-width:340px;}
  .step .arrow{display:none;}
  .opsphoto{grid-template-columns:1fr;}
  .modal-card{grid-template-columns:1fr;}
  .modal-photo{padding:40px 40px 0;}
  .modal-photo .ph{max-width:300px;}
}
@media (max-width:900px){
  .fgrid{grid-template-columns:1fr 1fr;}
  .nav-links a:not(.btn){display:none;}
  .fdescriptor{white-space:normal;}
  .capgrid,.wallgrid,.flow,.leadgrid{grid-template-columns:1fr;}
  .tstm-in{grid-template-columns:1fr;gap:18px;}
}

/* ══════════════════ FOOTER ══════════════════ */
footer{background:var(--black);border-top:1px solid var(--line-d);padding:76px 0 34px;}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:54px;}
.fbrand img{width:236px;}
.tagline{margin-top:26px;}
.tagline .l{display:block;font-size:14px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;line-height:1.9;white-space:nowrap;}
.tagline .r{color:var(--red);}
.tagline .b{color:var(--teal);}
.tagline .g{color:var(--gold);}
.fdescriptor{margin-top:18px;white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:var(--muted-d);line-height:1.6;}
.fcontact{margin-top:20px;font-size:13px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-d);line-height:2.15;}
.fcontact a:hover{color:var(--offwhite);}
.fcol .h{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--offwhite);margin-bottom:20px;}
.fcol li{margin-bottom:12px;}
.fcol a{font-size:14px;color:var(--body-d);transition:color .2s;}
.fcol a:hover{color:#fff;}
.legal{
  margin-top:64px;padding-top:28px;border-top:1px solid var(--line-d);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);
}

/* ══════════════════ MOTION ══════════════════ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .reveal{opacity:1;transform:none;}
}
/* ═══════════════════════════════════════════════════════════════════════════
   LEADERSHIP CREDIBILITY PROFILE — PROTOTYPE (MEGHAN RECKLING ONLY)
   ═══════════════════════════════════════════════════════════════════════════
   Everything below is NEW and is namespaced .cp-* / .modal--profile.
   Nothing above this block was edited. The four remaining bio modals continue
   to use the approved .modal-card / .modal-photo / .modal-body system and are
   completely unaffected by this stylesheet.

   PURPOSE
   Not a biography popup — an executive credibility profile. Large overlay
   (~88% of the usable desktop viewport), internally scrolled, composed of
   alternating black / off-white bands so it reads as an extension of the VFO
   site rather than a third-party modal plugin.

   CONTENT RULE
   No credential, employer, office, date, client, award or accomplishment has
   been invented. Every fact rendered here was explicitly supplied.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay shell ─────────────────────────────────────────────────────── */
.modal--profile{padding:3vh 3vw;}
.modal--profile .modal-scrim{background:rgba(9,9,9,.80);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);}

.cp-card{
  position:relative;
  width:min(1420px,94vw);
  height:88vh;
  max-height:88vh;
  display:flex;flex-direction:column;
  background:var(--black);
  border-top:4px solid var(--red);
  box-shadow:0 60px 140px rgba(0,0,0,.72);
  overflow:hidden;
  animation:cpin .34s cubic-bezier(.22,.7,.28,1) both;
}
@keyframes cpin{from{opacity:0;transform:translateY(20px) scale(.985);}to{opacity:1;transform:none;}}

/* ── Sticky utility bar — close control is always reachable ───────────── */
.cp-bar{
  position:relative;z-index:6;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:62px;padding:0 22px 0 34px;
  background:var(--black);border-bottom:1px solid var(--line-d);
}
.cp-bar .k{
  display:flex;align-items:center;gap:12px;
  font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-d);
}
.cp-bar .k .sq{width:9px;height:9px;flex:0 0 9px;background:var(--red);}
.cp-bar .grad{
  flex:1;height:2px;margin:0 4px;
  background:linear-gradient(90deg,var(--red),var(--teal) 42%,var(--gold) 74%,var(--orange));
  opacity:.55;
}
.cp-close{
  display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;
  height:42px;padding:0 18px;
  border:1px solid var(--line-d);background:transparent;color:var(--offwhite);
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:background-color .2s,border-color .2s,color .2s;
}
.cp-close .x{font-size:19px;line-height:1;font-weight:400;}
.cp-close:hover{background:var(--red);border-color:var(--red);color:#fff;}

/* ── Internal scroll region ───────────────────────────────────────────── */
.cp-scroll{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(247,241,235,.22) transparent;
}
.cp-scroll::-webkit-scrollbar{width:10px;}
.cp-scroll::-webkit-scrollbar-track{background:rgba(247,241,235,.04);}
.cp-scroll::-webkit-scrollbar-thumb{background:rgba(247,241,235,.20);}
.cp-scroll::-webkit-scrollbar-thumb:hover{background:rgba(247,241,235,.34);}

/* ── Band system ──────────────────────────────────────────────────────── */
.cp-band{padding:64px 56px 68px;}
.cp-band--dark{background:var(--black);color:var(--offwhite);}
.cp-band--sand{background:var(--offwhite);color:var(--black);}
.cp-band--dark + .cp-band--dark{border-top:1px solid var(--line-d);}

.cp-eye{
  display:flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;line-height:1.4;
}
.cp-eye .sq{width:9px;height:9px;flex:0 0 9px;}
.cp-band--dark .cp-eye{color:var(--muted-d);}
.cp-band--sand .cp-eye{color:var(--muted-l);}
.cp-h{
  font-size:clamp(28px,2.5vw,38px);font-weight:700;line-height:1.08;letter-spacing:-0.03em;
  text-transform:uppercase;margin-top:18px;
}
.cp-band--dark .cp-h{color:var(--offwhite);}
.cp-band--sand .cp-h{color:var(--black);}
.cp-rule{height:1px;background:var(--line-d);margin:30px 0 0;}
.cp-band--sand .cp-rule{background:var(--line-l);}

/* ═══ HEADER ═══════════════════════════════════════════════════════════ */
.cp-head{position:relative;background:var(--black);overflow:hidden;padding:0;}
.cp-head-net{position:absolute;right:-30px;top:0;width:56%;height:100%;opacity:.42;pointer-events:none;}
.cp-head-in{
  position:relative;display:grid;grid-template-columns:392px 1fr;gap:0 56px;
  padding:52px 56px 56px;align-items:start;
}

/* PHOTO — approved professional headshot, supplied by VFO. 4:5 frame. */
.cp-photo{position:relative;}
.cp-photo .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#111;}
.cp-photo .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;}
.cp-photo .bar{
  position:absolute;left:0;top:0;bottom:0;width:4px;z-index:2;
  background:linear-gradient(180deg,var(--red) 0%,var(--teal) 50%,var(--gold) 100%);
}
.cp-photo .cap{
  margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.9;
}
/* Placeholder state — used only if the approved headshot is not supplied. */
.cp-photo .frame.is-placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(135deg,#141416 0 16px,#101012 16px 32px);
  border:1px solid var(--line-d);
}

.cp-id{padding-top:4px;}
.cp-id .role{
  display:inline-flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-d);
}
.cp-id .role .sq{width:9px;height:9px;background:var(--red);}
.cp-id h2{
  font-size:clamp(40px,4vw,60px);font-weight:700;line-height:1;letter-spacing:-0.04em;
  text-transform:uppercase;color:#fff;margin-top:20px;
}
.cp-id h2 em{color:var(--red);}
.cp-id .title{
  font-size:13px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);
  margin-top:16px;
}
.cp-claim{
  margin-top:26px;padding-top:26px;border-top:1px solid var(--line-d);
  font-size:clamp(30px,2.9vw,44px);font-weight:800;line-height:1.02;letter-spacing:-0.035em;
  text-transform:uppercase;color:#fff;
}
.cp-claim em{color:var(--red);}
.cp-span{
  margin-top:22px;padding:16px 20px;
  border-left:3px solid var(--gold);background:rgba(248,174,50,.07);
  font-size:12.5px;font-weight:700;letter-spacing:.15em;line-height:2;text-transform:uppercase;
  color:#fff;
}
.cp-span .yr{color:var(--gold);}
.cp-lede{
  margin-top:24px;font-size:16px;line-height:1.85;color:var(--body-d);max-width:760px;
}
.cp-lede strong{color:#fff;font-weight:600;}

.cp-way{
  display:flex;align-items:center;gap:16px;
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line-d);
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-d);
}
.cp-way .nodes{display:inline-flex;align-items:center;gap:7px;}
.cp-way .nodes i{width:7px;height:7px;border-radius:50%;display:block;}

/* ═══ SECTION 1 — EXPERIENCE AT A GLANCE ══════════════════════════════ */
.cp-dash{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:44px;border-top:1px solid var(--line-l);border-left:1px solid var(--line-l);
}
.cp-cell{
  position:relative;display:flex;flex-direction:column;min-height:172px;
  padding:30px 28px 32px;
  border-right:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
  transition:background-color .24s;
}
.cp-cell:hover{background:rgba(9,9,9,.035);}
.cp-cell::before{
  content:'';position:absolute;left:-1px;top:-1px;width:44px;height:3px;background:currentColor;
}
.cp-cell .v{
  font-size:clamp(26px,2.4vw,34px);font-weight:700;line-height:1.06;letter-spacing:-0.035em;
  text-transform:uppercase;color:var(--black);
}
.cp-cell .v.sm{font-size:clamp(19px,1.7vw,24px);letter-spacing:-0.02em;line-height:1.2;}
.cp-cell .l{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-l);margin-top:auto;padding-top:18px;line-height:1.85;
}
.cp-scan{
  margin-top:26px;font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-l);line-height:1.9;
}

/* ═══ SECTION 2 — CAREER TRAJECTORY ═══════════════════════════════════ */
.cp-traj{position:relative;margin-top:52px;}
.cp-traj .rail{
  position:absolute;left:0;right:0;top:26px;height:1px;
  background:linear-gradient(90deg,var(--red),var(--teal) 38%,var(--gold) 70%,var(--orange));
  opacity:.55;transform-origin:left center;transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.4,0,.2,1);
}
.cp-traj.on .rail{transform:scaleX(1);}
.cp-steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0 20px;list-style:none;}
.cp-step{position:relative;padding-right:18px;}
.cp-step .nd{
  position:relative;display:block;width:13px;height:13px;border-radius:50%;
  background:var(--black);border:2px solid currentColor;margin:20px 0 0;
}
.cp-step .nd::after{
  content:'';position:absolute;inset:2px;border-radius:50%;background:currentColor;
}
.cp-step .n{
  font-size:11.5px;font-weight:700;letter-spacing:.24em;color:var(--muted-d);margin-top:22px;
}
.cp-step h4{
  font-size:16px;font-weight:700;line-height:1.28;letter-spacing:-0.005em;text-transform:uppercase;
  color:#fff;margin-top:12px;min-height:62px;
}
.cp-step .s{
  font-size:13px;line-height:1.75;color:var(--body-d);margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line-d);
}
.cp-step .arw{
  position:absolute;right:2px;top:20px;font-size:15px;color:var(--muted-d);opacity:.5;
}
.cp-step:last-child .arw{display:none;}
.cp-traj-note{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--line-d);
  font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-d);
  line-height:1.9;
}

/* ═══ SECTION 3 + 5 + 6 — CREDENTIAL BLOCKS ═══════════════════════════ */
.cp-creds{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin-top:44px;}
.cp-cred{
  padding:24px 0 24px 22px;border-left:3px solid;border-bottom:1px solid var(--line-l);
}
.cp-cred .o{
  font-size:14px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:var(--black);line-height:1.5;
}
.cp-cred .d{font-size:14px;line-height:1.8;color:var(--body-l);margin-top:8px;}
.cp-cred .d strong{color:var(--black);font-weight:600;}
.cp-creds--three{grid-template-columns:repeat(3,1fr);gap:0 34px;}
.cp-cred--wide{grid-column:1/-1;}
/* Colour context only — the credential block re-used on a black band, the same
   way the site pairs .on-light / .on-dark. No geometry, type or spacing change. */
.cp-band--dark .cp-cred{border-bottom-color:var(--line-d);}
.cp-band--dark .cp-cred .o{color:#fff;}
.cp-band--dark .cp-cred .d{color:var(--body-d);}
.cp-band--dark .cp-cred .d strong{color:#fff;}
.cp-creds--tight .cp-cred{padding-top:20px;padding-bottom:20px;}

/* Secondary emphasis — community band sits below the professional record. */
.cp-band--secondary .cp-cred .o{font-size:13.5px;}
.cp-band--secondary .cp-cred .d{font-size:13.5px;}

/* ═══ SECTION 4 — BUILDER + OPERATOR PROOF STACK ══════════════════════ */
.cp-op{display:grid;grid-template-columns:1.05fr .95fr;gap:0 64px;align-items:center;}
.cp-op .copy{font-size:16px;line-height:1.85;color:var(--body-d);margin-top:24px;max-width:620px;}
.cp-op .copy strong{color:#fff;font-weight:600;}
.cp-stack{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line-d);border-left:1px solid var(--line-d);margin-top:6px;
}
.cp-stat{
  padding:26px 24px 28px;border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  transition:background-color .24s;
}
.cp-stat:hover{background:#121214;}
.cp-stat .v{
  font-size:clamp(28px,2.6vw,38px);font-weight:700;line-height:1.05;letter-spacing:-0.035em;
  text-transform:uppercase;
}
.cp-stat .l{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-top:12px;line-height:1.8;
}
.cp-attrib{
  margin-top:18px;padding:14px 18px;border:1px solid var(--line-d);
  font-size:11.5px;font-weight:600;letter-spacing:.1em;line-height:1.95;text-transform:uppercase;
  color:var(--muted-d);
}

/* ═══ SECTION 7 — CAPABILITY GRID + CLOSE ═════════════════════════════ */
.cp-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;}
.cp-tag{
  position:relative;padding:26px 24px 26px 26px;
  background:#111113;border:1px solid var(--line-d);border-left:3px solid;
  font-size:15px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1.4;
  color:#fff;transition:background-color .24s,transform .24s;
}
.cp-tag:hover{background:#17171A;transform:translateY(-3px);}
.cp-closing{
  margin-top:56px;padding-top:44px;border-top:1px solid var(--line-d);
}
.cp-closing p{
  font-size:clamp(22px,2.1vw,31px);font-weight:700;line-height:1.32;letter-spacing:-0.02em;
  text-transform:uppercase;color:#fff;
}
.cp-closing p + p{margin-top:6px;}
.cp-closing .a{color:var(--teal);}
.cp-closing .b{color:var(--gold);}
.cp-closing .c{color:var(--red);}

/* ── Restrained in-modal reveal ───────────────────────────────────────── */
.cp-rv{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;}
.cp-rv.on{opacity:1;transform:none;}

/* ── Desktop range tuning ─────────────────────────────────────────────── */
@media (max-width:1440px){
  .cp-head-in{grid-template-columns:340px 1fr;gap:0 46px;padding:46px 46px 50px;}
  .cp-band{padding:56px 46px 60px;}
  .cp-bar{padding:0 18px 0 28px;}
}
@media (max-width:1200px){
  .cp-head-in{grid-template-columns:290px 1fr;gap:0 38px;}
  .cp-dash{grid-template-columns:1fr 1fr;}
  .cp-steps{grid-template-columns:1fr 1fr 1fr;gap:26px 20px;}
  .cp-traj .rail{display:none;}
  .cp-op{grid-template-columns:1fr;gap:36px;}
  .cp-tags{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .cp-card{width:96vw;height:92vh;max-height:92vh;}
  .cp-head-in{grid-template-columns:1fr;gap:34px;}
  .cp-photo{max-width:320px;}
  .cp-dash,.cp-creds,.cp-creds--three,.cp-stack,.cp-tags,.cp-steps{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .cp-rv{opacity:1;transform:none;}
  .cp-traj .rail{transform:scaleX(1);}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEADERSHIP PROFILE — REVISION OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════
   Additive only. The profile system above is unchanged; these rules support
   the tightened content architecture:
     · the trajectory is now FIVE dated stages instead of six undated ones
     · each stage carries a date line
     · the Founder band carries a single credential instead of two
     · the closing statement is now its own final band, with the
       "What She Brings to the Table" tag grid removed
   No colour, type family, spacing scale or interaction behaviour changed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Five stages, not six. */
.cp-steps{grid-template-columns:repeat(5,1fr);}

/* Date line under each stage headline. Uses the stage's own accent colour,
   so it inherits the approved red → teal → gold → orange → red sequence. */
.cp-step .dt{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  line-height:1.5;margin-top:10px;color:currentColor;
}
/* The headline min-height existed to keep six undated cards aligned. With a
   date line added the row aligns on its own; trimming it removes the gap. */
.cp-step h4{min-height:52px;}
.cp-step .s{margin-top:10px;padding-top:10px;}

/* Founder band — one credential, full width of its column. */
.cp-creds--one{grid-template-columns:1fr;}

/* Final band — the closing statement is the whole band. */
.cp-band--close{padding-top:56px;padding-bottom:64px;}
.cp-closing--solo{margin-top:0;padding-top:0;border-top:0;}

@media (max-width:1200px){
  .cp-steps{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:900px){
  .cp-steps{grid-template-columns:1fr;}
  .cp-step h4{min-height:0;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — ABOUT DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════
   The About item is BOTH a destination and a disclosure trigger, matching the
   approved VFO navigation architecture. The submenu is always fully populated
   — being on the About page never removes About VFO or Join Our Team.
   Opens on hover and on keyboard focus; ESC closes it. Nothing else in the
   header changed.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-links .has-sub{position:relative;}
.nav-links .has-sub > a{display:inline-flex;align-items:center;gap:8px;}
.nav-links .has-sub > a .caret{
  width:7px;height:7px;flex:0 0 7px;margin-top:-3px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg);transition:transform .22s;
}
.nav-links .has-sub:hover > a .caret,
.nav-links .has-sub:focus-within > a .caret,
.nav-links .has-sub[data-open="true"] > a .caret{transform:rotate(-135deg) translate(-2px,-2px);}

.nav-links .subnav{
  position:absolute;top:100%;left:-22px;z-index:120;min-width:236px;
  background:rgba(9,9,9,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line-d);border-top:2px solid var(--red);
  padding:8px 0;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  box-shadow:0 24px 52px rgba(0,0,0,.55);
}
.nav-links .has-sub:hover .subnav,
.nav-links .has-sub:focus-within .subnav,
.nav-links .has-sub[data-open="true"] .subnav{opacity:1;visibility:visible;transform:none;}
/* A hover bridge so the pointer can travel from About into the panel. */
.nav-links .has-sub::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px;}
.nav-links .subnav li{margin:0;}
.nav-links .subnav a{
  display:block;padding:13px 26px;
  font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--body-d);transition:color .18s,background-color .18s;
}
.nav-links .subnav a::after{content:none;}
.nav-links .subnav a:hover,.nav-links .subnav a:focus-visible{color:#fff;background:rgba(247,241,235,.06);}
.nav-links .subnav a.sub-current{color:#fff;}
.nav-links .subnav a.sub-current::before{
  content:'';display:inline-block;width:6px;height:6px;background:var(--red);
  margin-right:10px;vertical-align:middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEADERSHIP PROFILE — TIGHTENING PASS · COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════
   Structural pieces introduced by the tightened content architecture. No
   density values here — those live in the platform blocks that follow, so
   desktop and mobile never fight over the cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Founder — one compact role line in place of a credential card. */
.cp-role{padding-left:16px;border-left:3px solid var(--red);}
.cp-role .r{
  display:block;font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;
}
.cp-role .v{display:block;margin-top:7px;font-size:14px;line-height:1.7;color:var(--body-d);}

/* Beyond VFO — one band, two labelled rows. */
.cp-striplabel{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-l);
}
.cp-band--beyond .cp-cred .o{font-size:13.5px;}
.cp-band--beyond .cp-cred .d{font-size:13.5px;}

/* ── Tightening pass · DESKTOP density. No type size reduced, no colour or
      interaction changed. Length comes out of padding, gaps and grid shape. ── */
.cp-band{padding:38px 56px 40px;}
.cp-head-in{grid-template-columns:270px 1fr;gap:0 48px;padding:36px 56px 34px;}
.cp-photo .cap{margin-top:12px;}
.cp-claim{margin-top:18px;}
.cp-lede{margin-top:15px;}
.cp-way{margin-top:16px;}
.cp-h{margin-top:14px;}

.cp-dash{margin-top:22px;}
.cp-cell{min-height:104px;padding:18px 22px 20px;}
.cp-scan{margin-top:16px;}

.cp-traj{margin-top:24px;}
.cp-step .nd{margin:14px 0 0;}
.cp-step h4{min-height:44px;margin-top:10px;}
.cp-step .dt{margin-top:8px;}
.cp-step .s{margin-top:9px;padding-top:9px;}
.cp-traj-note{margin-top:18px;}

.cp-creds{margin-top:22px;}
.cp-cred{padding-top:12px;padding-bottom:13px;}
.cp-creds--four{grid-template-columns:repeat(4,1fr);gap:0 22px;}
/* Five political credentials across three columns is two rows instead of
   three — that is where most of this band's height was going. */
[aria-labelledby="cp-before-h"] .cp-creds{grid-template-columns:repeat(3,1fr);gap:0 28px;}

.cp-op{gap:0 52px;}
.cp-op .copy{margin-top:14px;}
.cp-role{margin-top:20px;}
.cp-attrib{margin-top:13px;}
.cp-stat{padding:20px 22px 22px;}

.cp-strip{margin-top:20px;}
.cp-strip + .cp-strip{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-l);}
.cp-strip .cp-creds{margin-top:12px;}
.cp-band--close{padding-top:34px;padding-bottom:38px;}

@media (max-width:1200px){
  [aria-labelledby="cp-before-h"] .cp-creds{grid-template-columns:1fr 1fr;}
  .cp-creds--four{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  [aria-labelledby="cp-before-h"] .cp-creds,.cp-creds--four{grid-template-columns:1fr;}
}

/* ── Density increment 3 · desktop ── */
.cp-band{padding:32px 56px 34px;}
.cp-head-in{padding:30px 56px 28px;}
.cp-cell{padding:16px 22px 18px;}
.cp-cred{padding-top:10px;padding-bottom:11px;}
.cp-stat{padding:18px 22px 20px;}
.cp-band--close{padding-top:30px;padding-bottom:34px;}


/* ═══════════════════════════════════════════════════════════════════════════
   LEADERSHIP PROFILE — REVEAL FAIL-SAFE
   ═══════════════════════════════════════════════════════════════════════════
   The in-modal reveal used to start every block at opacity:0 and rely on
   JavaScript to turn it on. If the profile script did not run — or, as
   happened in production, the browser served a CACHED OLDER STYLESHEET that
   had no .cp-* rules at all — the modal opened to an empty area.

   The default is now VISIBLE. The animation only arms itself once the script
   has confirmed it is running, by putting .vfo-cp-anim on <html>. No script,
   no stylesheet mismatch and no observer failure can hide the profile again.
   ═══════════════════════════════════════════════════════════════════════════ */
.cp-rv{opacity:1;transform:none;}
html.vfo-cp-anim .cp-rv:not(.on){opacity:0;transform:translateY(10px);}


/* ═══════════════════════════════════════════════════════════════════════════
   HEADER STANDARDISATION + FIELD BRIEF SET
   ═══════════════════════════════════════════════════════════════════════════
   The About dropdown is gone — About VFO and Join Our Team are now top-level
   items, matching the Homepage. The dropdown rules below are retained only so
   nothing inherits from a stale cache; no element uses them any more.

   The three Field Briefs are now one deliberate set: identical internal
   sequence, and the proof row is pinned to the bottom of every card so all
   three finish on the same line whatever the copy length.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Field Brief cards — equal height, aligned internal rhythm. */
.resgrid{align-items:stretch;}
.brief{height:100%;}
.brief-bd{flex:1 1 auto;display:flex;flex-direction:column;}
/* The proof row is the bottom fact area on every card. */
.brief .proofline{margin-top:auto;}
/* Pre-title above the headline, identical treatment on all three cards. */
.brief .pretitle{
  margin:0 0 14px;
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.6;
}

/* Leadership cards — the four Read Bio controls are gone, so the card closes
   on its role summary. This keeps the bottom rhythm intentional rather than
   leaving the space the button used to occupy. */
.lead .s{padding-bottom:2px;}