/* ==========================================================================
   AE.CAE$AR — Verified Trading Portfolio
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Space+Mono:wght@400;700&family=Marck+Script&display=swap');

:root{
  /* ---- dark theme (default) ---- */
  --bg:#08080a;
  --bg-soft:#0d0e12;
  --bg-panel:#111219;
  --text:#f3f2ee;
  --text-dim:#a9abb8;
  --text-dimmer:#6c6f7d;
  --line:rgba(245,244,240,0.14);
  --line-strong:rgba(245,244,240,0.28);

  --bull:#39ff8c;        /* neon green — bullish / performance data */
  --bull-2:#8effc2;
  --bull-deep:#0a3d20;   /* deep green for gradient bases */
  --accent:#39ff8c;      /* brand accent = bullish green (single-accent theme) */
  --accent-2:#8effc2;
  --gold:#c9a227;
  --navy:#0b1440;

  --f-display:'Archivo', sans-serif;
  --f-mono:'Space Mono', monospace;
  --f-script:'Marck Script', cursive;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg:#f7f6f1;
  --bg-soft:#edebe3;
  --bg-panel:#ffffff;
  --text:#14151a;
  --text-dim:#4b4d59;
  --text-dimmer:#83869a;
  --line:rgba(20,21,26,0.12);
  --line-strong:rgba(20,21,26,0.24);

  --bull:#0c9a4c;
  --bull-2:#0fb85c;
  --bull-deep:#0a3d20;
  --accent:#0c9a4c;
  --accent-2:#0fb85c;
  --gold:#a9821e;

  color-scheme: light;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{
  background:var(--bg);
  scroll-behavior:smooth;
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-display);
  overflow-x:hidden;
  cursor:default;
  -webkit-font-smoothing:antialiased;
  transition:background-color .5s var(--ease-out), color .5s var(--ease-out);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
::selection{ background:var(--accent); color:#fff; }

.container{
  width:100%;
  max-width:1520px;
  margin:0 auto;
  padding:0 6vw;
}

/* ---------------- Utility text styles ---------------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--accent-2);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--accent-2);
  display:inline-block;
}
.eyebrow.dim{ color:var(--text-dim); }
.eyebrow.dim::before{ background:var(--text-dimmer); }
.eyebrow.bull{ color:var(--bull); }
.eyebrow.bull::before{ background:var(--bull); }

.big-word{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:0.86;
  text-transform:uppercase;
}
.outline-text{
  -webkit-text-stroke:1.5px var(--text);
  color:transparent;
  font-weight:700;
}
.up-tick{ color:var(--bull); font-style:normal; margin-right:8px; display:inline-block; }

/* ==========================================================================
   FIXED CHROME — logo / get in touch / theme / hamburger / progress / nav
   ========================================================================== */

.top-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background:transparent; z-index:900;
}
.top-progress .fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--bull), var(--accent-2));
}

.chrome{
  position:fixed; inset:0; pointer-events:none; z-index:800;
}
.chrome > *{ pointer-events:auto; }

.brand-mark{
  position:absolute; top:5vh; left:6vw;
  width:52px; height:52px;
  border-radius:50%;
  background:#0b0c10;
  border:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease-out);
}
.brand-mark:hover{ transform:scale(1.08); }
.brand-mark svg{ width:22px; height:15px; }

.chrome-right{
  position:absolute; top:5vh; right:6vw;
  display:flex; align-items:center; gap:12px;
}
.pill-cta{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:16px 26px;
  border-radius:40px;
  border:1px solid var(--line-strong);
  background:rgba(127,127,127,0.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:background .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out), color .35s;
  white-space:nowrap;
}
.pill-cta:hover{ background:var(--text); color:var(--bg); border-color:var(--text); }

.theme-toggle{
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(127,127,127,0.08);
  backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.theme-toggle svg{ width:20px; height:20px; position:absolute; transition:opacity .35s var(--ease-out), transform .5s var(--ease-out); }
.theme-toggle .sun{ opacity:0; transform:rotate(-90deg) scale(0.5); color:var(--gold); }
.theme-toggle .moon{ opacity:1; transform:rotate(0) scale(1); color:var(--text); }
:root[data-theme="light"] .theme-toggle .sun{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle .moon{ opacity:0; transform:rotate(90deg) scale(0.5); }

.burger{
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(127,127,127,0.08);
  backdrop-filter:blur(14px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
}
.burger span{ width:18px; height:1px; background:var(--text); display:block; transition:transform .3s var(--ease-out), opacity .3s; }
.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.chapter-bar{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 6vw;
  display:flex; align-items:center; gap:5vw;
  border-top:1px solid var(--line);
  background:linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
:root[data-theme="light"] .chapter-bar{
  background:linear-gradient(0deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
}
.chapter-current{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--text);
  min-width:150px;
  display:flex; flex-direction:column; gap:8px;
}
.chapter-current .track{
  width:120px; height:1px; background:var(--line-strong); position:relative; overflow:hidden;
}
.chapter-current .track .bar{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:var(--bull);
}
.chapter-roman{
  display:flex; gap:26px; flex:1;
  font-family:var(--f-mono); font-size:12px; letter-spacing:1px;
  color:var(--text-dimmer);
  overflow-x:auto;
  scrollbar-width:none;
}
.chapter-roman::-webkit-scrollbar{ display:none; }
.chapter-roman button{
  padding:6px 12px; border-radius:4px; transition:color .3s, background .3s;
  white-space:nowrap;
}
.chapter-roman button.active{ color:var(--bg); background:var(--text); }

/* full screen nav overlay */
.nav-overlay{
  position:fixed; inset:0; z-index:950;
  background:var(--bg-soft);
  display:flex; flex-direction:column; justify-content:center;
  padding:6vw;
  overflow:hidden;
  transform:translateY(-100%);
  transition:transform .6s var(--ease-in-out);
}
.nav-overlay.open{ transform:translateY(0); }
.nav-overlay ul{ list-style:none; }
.nav-overlay li{ border-top:1px solid var(--line); }
.nav-overlay li:last-child{ border-bottom:1px solid var(--line); }
.nav-overlay a{
  display:flex; align-items:baseline; gap:24px;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(28px, 6vw, 64px);
  letter-spacing:-0.02em;
  padding:18px 0;
  text-transform:uppercase;
  transition:padding-left .35s var(--ease-out), color .35s;
}
.nav-overlay a:hover{ padding-left:24px; color:var(--accent-2); }
.nav-overlay a span{ font-family:var(--f-mono); font-size:14px; color:var(--text-dimmer); }
.nav-overlay-foot{
  margin-top:6vh; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
  font-family:var(--f-mono); font-size:12px; color:var(--text-dim); letter-spacing:1px;
}

/* ==========================================================================
   CHAPTER GENERIC
   ========================================================================== */
.chapter{ position:relative; background:var(--bg); }
.scene{ position:relative; width:100%; min-height:100vh; }
.scene-inner{
  position:relative; z-index:2; width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:center;
}

/* ---------------- CHAPTER I : HERO (always dark — cinematic) ---------------- */
#hero{ overflow:hidden; background:#000; }
#hero, #hero .chapter{ color:#f3f2ee; }
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 14% 8%, rgba(57,255,140,0.09), transparent 45%),
    radial-gradient(ellipse at 92% 96%, rgba(57,255,140,0.10), transparent 42%),
    #000;
}
.hero-bg .grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:0.6;
}


/* Full-height portrait, centered between the text columns, feathered into the black background */
.hero-portrait-pos{
  position:absolute; left:50%; bottom:0; z-index:1;
  width:min(30vw, 420px); height:88vh;
  translate:-50% 0;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 8%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 8%, #000 100%);
}
.hero-portrait{ width:100%; height:100%; position:relative; }
.hero-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; filter:brightness(0.68) contrast(1.12); }
.hero-portrait::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.45) 100%),
             radial-gradient(ellipse at 50% 35%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
}

.hero-copy{
  position:relative; z-index:3; height:100%;
  display:grid; grid-template-columns:1fr min(32vw, 440px) 1fr;
  align-content:start; row-gap:0; column-gap:4vw;
  padding-top:24vh;
}
.hero-copy-left{ max-width:460px; grid-column:1; }
.hero-copy-right{ grid-column:3; }
.badge-pill{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:#e7e8ee;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(10px);
  padding:10px 18px; border-radius:40px;
  margin-bottom:22px;
}
.badge-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--bull); box-shadow:0 0 10px var(--bull); flex-shrink:0; }
.hero-headline{
  font-family:var(--f-display); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(30px, 3.4vw, 46px); line-height:1.18; color:#fff;
}
.hero-headline--statement{
  font-size:clamp(26px, 3.1vw, 42px); line-height:1.28;
}

.fx-ticker{
  margin-top:26px; max-width:380px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.fx-ticker--wide{ max-width:100%; }

.fx-interlude{
  background:#000; border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1);
  padding:5vh 0;
}
.fx-interlude .fx-ticker{ margin-top:0; }
.fx-ticker--wide .fx-track{ animation-duration:26s; }
.fx-track{
  display:inline-flex; gap:22px; white-space:nowrap;
  animation:fx-scroll 16s linear infinite;
}
.fx-track span{
  font-family:var(--f-mono); font-size:11px; letter-spacing:1.5px; color:#6c6f7d;
  position:relative; padding-right:22px;
}
.fx-track span::after{
  content:"\2022"; position:absolute; right:0; top:0; color:var(--bull);
}
@keyframes fx-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.hero-copy-right{ max-width:360px; text-align:left; padding-top:6px; }
.hero-copy-right p{ font-size:15px; line-height:1.7; color:#c7c9d6; font-weight:300; }
.cta-pill{
  position:relative; display:inline-flex; align-items:center;
  margin-top:22px; padding:10px 28px 10px 54px;
  background:var(--bull); color:#06210f; font-weight:700; font-size:14px;
  border-radius:40px; white-space:nowrap;
  transition:filter .3s var(--ease-out), transform .3s var(--ease-out);
}
.cta-pill:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.cta-pill .icon-bubble{
  position:absolute; left:4px; top:4px; bottom:4px; aspect-ratio:1;
  border-radius:50%; background:#06210f; color:var(--bull);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.hero-mini-stats{
  display:flex; gap:26px; margin-top:34px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.14);
}
.hero-mini-stats div{ font-family:var(--f-mono); font-size:10px; color:#6c6f7d; letter-spacing:0.5px; }
.hero-mini-stats div b{ display:block; font-family:var(--f-display); font-size:19px; color:var(--bull); font-weight:700; margin-bottom:2px; }

.scroll-ticker{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  border-top:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.03);
  overflow:hidden;
  white-space:nowrap;
  padding:14px 0;
}
.scroll-ticker .track{
  display:flex; justify-content:center; gap:60px;
}
.scroll-ticker span{
  font-family:var(--f-mono); font-size:12px; letter-spacing:3px; text-transform:uppercase; color:#6c6f7d;
}

/* ---------------- Portrait pin scene (always dark) ---------------- */
.portrait-scene{ overflow:hidden; background:#000; }
.portrait-scene .scene-inner{ height:100vh; padding:0; }
.portrait-media{
  position:absolute; inset:0;
  background-size:cover; background-position:center 20%;
  filter:grayscale(1) contrast(1.08) brightness(0.85);
}
.portrait-scene::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,10,0.15) 0%, rgba(8,8,10,0.1) 40%, rgba(8,8,10,0.92) 100%);
  z-index:1;
}
.portrait-caption{
  position:absolute; left:6vw; bottom:16vh; z-index:2;
  max-width:640px; color:#f3f2ee;
}
.portrait-caption .name{
  font-size:clamp(30px, 4.4vw, 58px); font-weight:800; letter-spacing:-0.02em; text-transform:uppercase;
}
.portrait-caption .role{
  font-family:var(--f-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--bull);
  margin-top:10px;
}

/* ---------------- Bio + signature + credibility ---------------- */
.bio-scene{ background:var(--bg-soft); padding:16vh 0; }
.bio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:start; }
.bio-text p{
  font-size:clamp(20px, 2.1vw, 28px);
  line-height:1.5;
  color:var(--text-dim);
  font-weight:300;
  margin-bottom:1.4em;
}
.bio-text p b{ color:var(--text); font-weight:600; }
.signature{
  font-family:var(--f-script);
  font-size:56px;
  color:var(--text);
  margin-top:24px;
  opacity:0.92;
}
.signature-cap{ font-family:var(--f-mono); font-size:11px; letter-spacing:2px; color:var(--text-dimmer); text-transform:uppercase; margin-top:8px; }

.cred-strip{
  margin-top:10vh;
  border-top:1px solid var(--line);
  padding-top:5vh;
}
.cred-strip .lbl{ font-family:var(--f-mono); font-size:11px; letter-spacing:2px; color:var(--text-dimmer); text-transform:uppercase; margin-bottom:3vh; }
.cred-logos{ display:flex; flex-wrap:wrap; gap:6vw; align-items:center; }
.cred-logos span{ font-family:var(--f-display); font-weight:700; font-size:clamp(18px,2vw,26px); color:var(--text-dim); letter-spacing:-0.01em; }

/* ---------------- Giant word bleed (always dark) ---------------- */
.bleed-scene{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:100vh; text-align:center; overflow:hidden; background:#08080a; color:#f3f2ee;
}
.bleed-word{
  font-size:clamp(90px, 22vw, 380px);
  line-height:0.8;
  position:absolute; z-index:0; white-space:nowrap;
  -webkit-text-stroke:1.5px #f3f2ee; color:transparent; font-weight:700;
}
.bleed-content{
  position:relative; z-index:1; max-width:640px; padding:0 6vw;
}
.bleed-content .eyebrow{ justify-content:center; margin-bottom:24px; }
.bleed-content .eyebrow::before{ display:none; }
.bleed-content p{ font-size:clamp(16px,1.6vw,20px); color:#a9abb8; line-height:1.7; font-weight:300; }
.bleed-content h3{ font-size:clamp(26px,3vw,40px); font-weight:800; margin-bottom:24px; text-transform:uppercase; letter-spacing:-0.01em; }

/* ==========================================================================
   CHAPTER II — verified results
   ========================================================================== */
.results-intro{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:14vh 0 10vh; }
.results-num{
  font-size:clamp(120px, 20vw, 300px);
  font-weight:800; line-height:0.85; color:var(--bg-panel); -webkit-text-stroke:1px var(--line-strong);
  margin-bottom:3vh;
}
.results-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.results-head h2{ font-size:clamp(34px,5vw,64px); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em; max-width:640px; }
.cycler{ position:relative; height:2.2em; overflow:visible; min-width:260px; text-align:right; }
.cycler span{
  position:absolute; right:0; top:0.55em; font-style:italic; font-weight:300; font-size:clamp(20px,2.4vw,32px);
  line-height:1.4; padding-bottom:0.15em;
  color:var(--text-dim);
  opacity:0; transform:translateY(100%);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.cycler span.active{ opacity:1; transform:translateY(0); }

.gallery-track{ position:relative; scroll-snap-type:y proximity; background:#08080a; }
.gallery-slide{
  position:relative; height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  scroll-snap-align:center;
  color:#f3f2ee;
  padding:0 5vw;
  gap:4vw;
}
.gallery-slide .frame{
  position:relative; width:min(46vw, 460px); height:78vh; flex:0 0 auto; order:2;
  border-radius:6px; overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.14);
  background:#111219;
  display:flex; align-items:center; justify-content:center;
}
.gallery-slide img{ width:100%; height:100%; object-fit:contain; }
.gallery-cap{
  position:relative; z-index:2; order:1;
  flex:1 1 340px; max-width:380px; min-width:0;
}
.gallery-cap .idx{ font-family:var(--f-mono); font-size:12px; color:var(--accent-2); letter-spacing:2px; margin-bottom:10px; }
.gallery-cap h4{ font-size:clamp(22px,2.6vw,32px); font-weight:800; text-transform:uppercase; }
.gallery-cap p{ color:#a9abb8; font-size:14px; margin-top:8px; line-height:1.6; }
.gallery-cap .amt{ font-family:var(--f-mono); font-size:clamp(26px,2.8vw,36px); color:var(--bull); margin-top:14px; display:flex; align-items:center; }

.manifesto{
  min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:10vh 6vw;
}
.manifesto p{
  font-size:clamp(26px, 4vw, 52px); font-weight:700; line-height:1.25; letter-spacing:-0.01em; text-transform:uppercase;
  max-width:1100px;
}
.manifesto .hl{ color:var(--bull); }

.view-all-wrap{ display:flex; justify-content:center; padding-bottom:14vh; }
.ghost-btn{
  font-family:var(--f-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase;
  border:1px solid var(--line-strong); border-radius:40px; padding:18px 34px;
  transition:background .35s, color .35s;
}
.ghost-btn:hover{ background:var(--text); color:var(--bg); }

/* ==========================================================================
   CHAPTER III — funded by / firms
   ========================================================================== */
.firms-scene{ padding:16vh 0; background:var(--bg-soft); }
.firms-scene .lede{ max-width:760px; font-size:clamp(18px,2vw,24px); color:var(--text-dim); font-weight:300; line-height:1.6; margin-top:20px; }

.firm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:10vh; background:var(--line); }
.firm-card{
  background:var(--bg-soft); padding:6vh 3vw; position:relative; overflow:hidden;
  transition:background .4s;
}
.firm-card:hover{ background:var(--bg-panel); }
.firm-card .tag{ font-family:var(--f-mono); font-size:11px; letter-spacing:2px; color:var(--text-dimmer); text-transform:uppercase; }
.firm-card h3{ font-size:clamp(24px,2.4vw,32px); font-weight:800; margin:18px 0 6px; text-transform:uppercase; }
.firm-card .metric{ font-family:var(--f-mono); font-size:clamp(28px,2.8vw,38px); color:var(--bull); margin:10px 0; display:flex; align-items:center; }
.firm-card p{ color:var(--text-dim); font-size:14px; line-height:1.6; }

.chart-scene{ padding:16vh 0 18vh; }
.chart-scene .chart-wrap{ margin-top:8vh; }
.chart-scene svg{ width:100%; height:auto; overflow:visible; }
.chart-labels{ display:flex; justify-content:space-between; margin-top:24px; font-family:var(--f-mono); font-size:11px; color:var(--text-dimmer); letter-spacing:1px; flex-wrap:wrap; gap:10px; }
.chart-labels span:last-child{ color:var(--bull); font-weight:700; }

/* ==========================================================================
   CHAPTER IV — framework / stats / process
   ========================================================================== */
.stats-scene{ min-height:100vh; display:flex; align-items:center; padding:14vh 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; width:100%; background:var(--line); }
.stat-cell{ background:var(--bg); padding:6vh 2vw; text-align:center; }
.stat-num{ font-family:var(--f-display); font-weight:800; font-size:clamp(40px,5.2vw,84px); letter-spacing:-0.02em; color:var(--bull); }
.stat-lbl{ font-family:var(--f-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text-dimmer); margin-top:14px; }

.process-scene{ padding:12vh 0 16vh; background:var(--bg-soft); }
.process-row{ margin-top:8vh; }
.process-item{
  display:grid; grid-template-columns:100px 1fr 1fr; gap:40px; align-items:start;
  padding:5vh 0; border-top:1px solid var(--line);
}
.process-item:last-child{ border-bottom:1px solid var(--line); }
.process-item .n{ font-family:var(--f-mono); font-size:14px; color:var(--text-dimmer); }
.process-item h4{ font-size:clamp(20px,2vw,28px); font-weight:700; text-transform:uppercase; }
.process-item p{ color:var(--text-dim); font-size:15px; line-height:1.7; }

.disclosure{
  margin-top:10vh; padding-top:5vh; border-top:1px solid var(--line);
}
.disclosure .lbl{ font-family:var(--f-mono); font-size:10px; letter-spacing:2px; color:var(--text-dimmer); text-transform:uppercase; margin-bottom:14px; }
.disclosure p{ color:var(--text-dimmer); font-size:12.5px; line-height:1.8; max-width:900px; }

/* ==========================================================================
   CHAPTER V — connect (brand panel — fixed dark red, both themes)
   ========================================================================== */
/* Always dark + neon, regardless of the site's light/dark toggle — this is the closing brand moment */
#connect{ min-height:100vh; background:#000; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-start; color:#fff; }
#connect .diagonal{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 14% 8%, rgba(57,255,140,0.09), transparent 45%),
    radial-gradient(ellipse at 92% 96%, rgba(57,255,140,0.10), transparent 42%),
    #000;
}
.connect-inner{ position:relative; z-index:2; padding-top:22vh; padding-bottom:14vh; }
.connect-word{
  font-size:clamp(70px, 16vw, 220px);
  font-weight:800; letter-spacing:-0.03em; text-transform:uppercase; line-height:0.85;
}
.connect-sub{ font-size:clamp(16px,1.8vw,22px); color:#c7cae3; max-width:560px; margin-top:34px; font-weight:300; line-height:1.6; }

.connect-cols{
  margin-top:14vh; padding-top:6vh; border-top:1px solid rgba(255,255,255,0.18);
  display:grid; grid-template-columns:repeat(4,1fr); gap:36px;
}
.connect-col h5{ font-family:var(--f-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#8effc2; margin-bottom:12px; }
.connect-col p, .connect-col a{ font-size:16px; line-height:1.8; }
.connect-col a:hover{ color:#8effc2; }

.site-footer{
  padding:5vh 0 3vh; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:1px; color:#8288ad;
  border-top:1px solid rgba(255,255,255,0.12); margin-top:10vh;
}

/* ==========================================================================
   MODAL — full documentation
   ========================================================================== */
.modal{
  position:fixed; inset:0; z-index:999; background:rgba(6,6,8,0.92);
  backdrop-filter:blur(10px);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease-out);
  color:#f3f2ee;
}
.modal.open{ opacity:1; pointer-events:auto; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:4vh 6vw 2vh; }
.modal-head h3{ font-size:clamp(22px,3vw,34px); font-weight:800; text-transform:uppercase; }
.modal-close{ width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.28); display:flex; align-items:center; justify-content:center; font-size:22px; color:#f3f2ee; }
.modal-body{ flex:1; overflow-y:auto; padding:2vh 6vw 6vh; }
.modal-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:22px; }
.modal-grid figure{ border:1px solid rgba(255,255,255,0.14); border-radius:6px; overflow:hidden; background:#111219; }
.modal-grid .thumb{ height:260px; display:flex; align-items:center; justify-content:center; background:#111219; }
.modal-grid img{ width:100%; height:100%; object-fit:contain; }
.modal-grid figcaption{ padding:12px 14px; font-family:var(--f-mono); font-size:11px; color:#a9abb8; letter-spacing:0.5px; }
.modal-group-title{ font-family:var(--f-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--accent-2); margin:5vh 0 2vh; }
.modal-group-title:first-child{ margin-top:0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .bio-grid{ grid-template-columns:1fr; gap:8vh; }
  .firm-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .process-item{ grid-template-columns:1fr; gap:12px; }
  .connect-cols{ grid-template-columns:repeat(2,1fr); }
  .chapter-bar{ gap:6vw; }
  .chapter-roman{ gap:16px; }

  /* Word cycler — abandon absolute right:0 anchoring (unreliable inside a
     shrink-to-fit flex/grid item on mobile Safari); anchor left instead. */
  .results-head{ flex-direction:column; align-items:flex-start; }
  .cycler{ text-align:left; width:100%; max-width:100%; min-width:0; }
  .cycler span{ left:0; right:auto; }

  /* Hero — switch from CSS grid to a flex column. A grid item sized via
     justify-self:start uses shrink-to-fit (max-content) sizing on some
     WebKit versions, which lets long paragraph text ignore max-width and
     overflow past the viewport instead of wrapping. Flex with the default
     stretch alignment avoids that entirely. */
  .hero-scene{ display:flex; flex-direction:column; padding-bottom:8vh; }
  .hero-copy{
    order:1; display:flex; flex-direction:column; padding-top:20vh; row-gap:8vw;
    height:auto; width:100%;
  }
  .hero-copy-left, .hero-copy-right{
    grid-column:unset; justify-self:unset; max-width:100%; width:100%; text-align:left;
  }
  .hero-portrait-pos{
    order:2; position:relative; left:auto; bottom:auto; translate:none;
    width:62vw; max-width:340px; height:56vh; margin:6vh auto 0;
    -webkit-mask-image:none; mask-image:none;
  }

  /* Certificate gallery — stack frame + caption in normal flow instead of
     absolutely overlapping them, so the caption can never sit on top of
     the image regardless of how many lines it wraps to. */
  .gallery-slide{
    height:auto; min-height:100vh; flex-direction:column;
    padding:16vh 6vw 8vh; gap:5vh;
  }
  .gallery-slide .frame{ width:88vw; max-width:440px; height:60vh; order:1; }
  .gallery-cap{ position:static; max-width:100%; order:2; flex:0 0 auto; }
}

@media (max-width:600px){
  .brand-mark{ width:42px; height:42px; top:3.5vh; }
  .brand-mark svg{ width:18px; height:12px; }
  .chrome-right{ top:3.5vh; gap:6px; }
  .pill-cta{ padding:12px 16px; font-size:9px; }
  .burger, .theme-toggle{ width:42px; height:42px; }
  .chapter-bar{ padding:16px 6vw; flex-wrap:wrap; }
  .chapter-current{ min-width:0; }
  .chapter-roman{ display:none; }
  .connect-cols{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
  .gallery-slide{ padding:14vh 6vw 6vh; }
  .gallery-slide .frame{ width:92vw; height:50vh; }
  .hero-copy{ padding-top:17vh; }
  .hero-headline{ font-size:clamp(26px,7.5vw,34px); }
  .badge-pill{ font-size:9.5px; padding:8px 14px; }
  .hero-portrait-pos{ width:70vw; height:46vh; }
  .hero-mini-stats{ flex-wrap:wrap; row-gap:14px; }
}