/* =========================================================
   PRINCE FOLORUNSHO ADEGOKE — PORTFOLIO
   Design system: "The Site Plan" — architectural blueprint
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens ---------- */
/* Light is the default theme (site opens in light/white mode
   regardless of OS preference); dark is an opt-in override via
   the floating switch, persisted in localStorage. */
:root{
  color-scheme: light;
  --bg: #f6f4ef;
  --bg-gradient: linear-gradient(160deg, #ffffff 0%, #fbf8f2 32%, #f4f6f8 68%, #eaf1f4 100%);
  --bg-soft: #eef1ee;
  --bg-elevated: #ffffff;
  --panel: rgba(10, 18, 32, 0.04);
  --panel-hover: rgba(10, 18, 32, 0.07);
  --panel-border: rgba(10, 18, 32, 0.10);
  --panel-border-strong: rgba(10, 18, 32, 0.20);
  --text: #0e1626;
  --text-dim: #4a5568;
  --text-faint: #7a8494;
  --amber: #a8701f;
  --amber-soft: #8a5c19;
  --amber-deep: #6b4712;
  --cyan: #1c8494;
  --cyan-soft: #146a77;
  --line: rgba(10, 18, 32, 0.14);
  --grid-line: rgba(28, 132, 148, 0.10);
  --shadow-lg: 0 30px 80px -35px rgba(10,20,35,0.28);
  --shadow-md: 0 16px 40px -20px rgba(10,20,35,0.22);
  --blur: blur(20px);
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-s: .25s;
  --dur-m: .5s;

  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --container: 1280px;
  --pad: clamp(20px, 5vw, 64px);
  --topbar-h: 0px;
}

[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0a1220;
  --bg-gradient: linear-gradient(160deg, #0a1220 0%, #0c1728 45%, #0a1220 100%);
  --bg-soft: #0e1a2c;
  --bg-elevated: #122036;
  --panel: rgba(232, 238, 245, 0.045);
  --panel-hover: rgba(232, 238, 245, 0.07);
  --panel-border: rgba(232, 238, 245, 0.10);
  --panel-border-strong: rgba(232, 238, 245, 0.20);
  --text: #e9eef4;
  --text-dim: #aab6c4;
  --text-faint: #6c7a8c;
  --amber: #e0a04a;
  --amber-soft: #f0c07e;
  --amber-deep: #b87f34;
  --cyan: #5ec8d8;
  --cyan-soft: #8fdce8;
  --line: rgba(232, 238, 245, 0.14);
  --grid-line: rgba(94, 200, 216, 0.07);
  --shadow-lg: 0 30px 80px -30px rgba(0,0,0,0.75);
  --shadow-md: 0 16px 40px -16px rgba(0,0,0,0.6);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *:not(.marquee__track),
  *::before,
  *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin:0;
  background: var(--bg-gradient), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background var(--dur-m) var(--ease-soft), color var(--dur-m) var(--ease-soft);
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
svg{ display:block; }

::selection{ background: var(--amber); color: #0a1220; }

:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Blueprint grid atmosphere ---------- */
.atmosphere{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.atmosphere__glow{
  position:absolute;
  width: 55vw; height: 55vw;
  max-width: 850px; max-height: 850px;
  border-radius: 50%;
  filter: blur(130px);
  opacity: .16;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 70%);
  top: -18%; right: -12%;
}
.atmosphere__glow--two{
  background: radial-gradient(circle, var(--amber) 0%, transparent 70%);
  top: auto; bottom: -22%; left: -12%; right:auto;
  opacity: .12;
  width: 46vw; height: 46vw;
}
[data-theme="light"] .atmosphere__glow{ opacity:.14; }
[data-theme="light"] .atmosphere__glow--two{ opacity:.09; }

/* ---------- Layout helpers ---------- */
.wrap{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  position: relative;
  z-index: 1;
  min-width: 0;
  box-sizing: border-box;
}
section{ position: relative; z-index:1; }
.section-pad{ padding: clamp(72px, 12vw, 160px) 0; }

/* Eyebrow — blueprint sheet numbering */
.eyebrow{
  display:flex; align-items:center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-soft);
  margin-bottom: 20px;
}
.eyebrow__mark{
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--amber);
}
.eyebrow span.dim{ color: var(--text-faint); font-weight:400; }

.section-head{ max-width: 760px; margin-bottom: 56px; }
.section-head h2{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.0;
  letter-spacing: .01em;
  color: var(--text);
}
.section-head p{
  margin-top:18px;
  color: var(--text-dim);
  font-size: 17px;
  max-width: 62ch;
}

/* Parallax zones always sit over a dark image scrim regardless of
   active theme — rescope the text/panel variables to fixed
   light-on-dark values so every descendant stays legible. */
.parallax-zone__content{
  --text: #f4f6f9;
  --text-dim: #c3ccd6;
  --text-faint: #8695a7;
  --panel: rgba(232,238,245,.07);
  --panel-hover: rgba(232,238,245,.10);
  --panel-border: rgba(232,238,245,.14);
  --panel-border-strong: rgba(232,238,245,.24);
  --line: rgba(232,238,245,.18);
  --bg-soft: rgba(8,13,22,.55);
  --cyan-soft: #8fdce8;
  --amber-soft: #f0c07e;
  --amber: #e0a04a;
}
.parallax-zone__content .eyebrow,
.parallax-zone__content .section-head h2,
.parallax-zone__content .section-head p,
.parallax-zone__content .dossier__title,
.parallax-zone__content .dossier__org{
  text-shadow: 0 2px 24px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55);
}

.rule{
  height:1px; width:100%;
  background: linear-gradient(90deg, var(--line), transparent 85%);
}

/* Dimension line — architectural annotation motif */
.dim-line{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.08em;
  color: var(--text-faint);
}
.dim-line::before, .dim-line::after{
  content:"";
  height:1px; flex:1;
  background: var(--panel-border-strong);
}

/* ---------- Glass / blueprint panel ---------- */
.glass{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-md);
  position: relative;
}
/* Registration corner marks — technical drawing detail */
.reg-corners::before, .reg-corners::after{
  content:"";
  position:absolute;
  width:14px; height:14px;
  pointer-events:none;
  z-index: 2;
}
.reg-corners::before{
  top:-1px; left:-1px;
  border-top:2px solid var(--amber);
  border-left:2px solid var(--amber);
}
.reg-corners::after{
  bottom:-1px; right:-1px;
  border-bottom:2px solid var(--amber);
  border-right:2px solid var(--amber);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 30px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  cursor:pointer;
  transition: transform var(--dur-s) var(--ease-soft), box-shadow var(--dur-s) var(--ease-soft), border-color var(--dur-s) var(--ease-soft);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:active{ transform: scale(.97); }
.btn--primary{
  background: linear-gradient(135deg, var(--amber-soft), var(--amber-deep));
  color: #17110a;
  box-shadow: 0 12px 30px -10px rgba(224,160,74,.45);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(224,160,74,.55); }
.btn--ghost{
  background: var(--panel);
  border-color: var(--panel-border-strong);
  color: var(--text);
  backdrop-filter: var(--blur);
}
.btn--ghost:hover{ background: var(--panel-hover); transform: translateY(-2px); }
.btn--whatsapp{
  background: linear-gradient(135deg, #2fae63, #1f8a4d);
  color:#fff;
  box-shadow: 0 12px 30px -10px rgba(47,174,99,.5);
}
.btn--whatsapp:hover{ transform: translateY(-2px); }
.btn svg{ width:16px; height:16px; }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }
.reveal-delay-4{ transition-delay: .32s; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--panel-border-strong); border-radius:10px; }

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position: fixed; inset:0; z-index: 999;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  flex-direction: column;
  gap: 20px;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__mark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .18em;
  color: var(--amber);
  text-transform: uppercase;
}
.loader__rule{
  width: 220px; height:1px;
  background: var(--line);
  position: relative;
  overflow:hidden;
}
.loader__rule::after{
  content:"";
  position:absolute; left:-100%; top:0; bottom:0; width:100%;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: sweep 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .loader__rule::after{ animation:none; left:0; } }
@keyframes sweep{
  0%{ left:-100%; }
  100%{ left:100%; }
}
.loader__caption{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 1180px);
  z-index: 200;
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 10px 10px 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  border: 1px solid var(--panel-border);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-md);
}
.nav__brand{
  display:flex; align-items:center; gap:10px;
  line-height:1;
}
.nav__brand-mark{
  height: 46px;
  width: auto;
  flex-shrink:0;
  object-fit: contain;
}
.nav__brand-text{ display:flex; flex-direction:column; }
.nav__brand-text strong{ font-family: var(--font-display); font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.02em; }
.nav__brand-text span{
  font-family: var(--font-mono); font-size:9px; letter-spacing:.14em; color: var(--text-faint); text-transform:uppercase; margin-top:2px;
}
.nav__links{
  display:flex; align-items:center; gap: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.06em;
  text-transform: uppercase;
}
.nav__links a{
  padding: 10px 13px;
  border-radius: 4px;
  color: var(--text-dim);
  transition: color var(--dur-s);
}
.nav__links a:hover, .nav__links a.is-active{ color: var(--text); background: var(--panel); }
.nav__links a.is-active{ color: var(--amber); }
.nav__actions{ display:flex; align-items:center; gap:8px; }

.theme-toggle{
  width:60px; height:32px;
  border-radius: 100px;
  display:flex; align-items:center;
  background: var(--panel);
  border: 1px solid var(--panel-border-strong);
  position: relative;
  flex-shrink:0;
  padding: 3px;
  cursor: pointer;
}
.theme-toggle__thumb{
  width:24px; height:24px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--amber-soft), var(--amber-deep));
  display:flex; align-items:center; justify-content:center;
  position: relative;
  transform: translateX(0);
  transition: transform var(--dur-m) var(--ease);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.3);
  flex-shrink: 0;
}
[data-theme="dark"] .theme-toggle__thumb{ transform: translateX(28px); }
.theme-toggle svg{ width:14px; height:14px; position:absolute; color:#17130a; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.theme-toggle .i-sun{ opacity:1; transform: rotate(0) scale(1); }
.theme-toggle .i-moon{ opacity:0; transform: rotate(-90deg) scale(.4); }
[data-theme="dark"] .theme-toggle .i-sun{ opacity:0; transform: rotate(90deg) scale(.4); }
[data-theme="dark"] .theme-toggle .i-moon{ opacity:1; transform: rotate(0) scale(1); }
.theme-toggle__track-icon{
  position:absolute;
  width:13px; height:13px;
  color: var(--text-faint);
  top: 50%; transform: translateY(-50%);
}
.theme-toggle__track-icon--sun{ left: 6px; }
.theme-toggle__track-icon--moon{ right: 6px; }

.nav__burger{
  display:none;
  width:40px; height:40px;
  border-radius:4px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  align-items:center; justify-content:center;
  flex-direction: column; gap:4px;
}
.nav__burger span{ width:16px; height:1.5px; background: var(--text); display:block; transition: all .3s var(--ease); }
.nav__burger.is-open span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0; z-index:196;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(30px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 4px;
  opacity:0; visibility:hidden; transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform: translateY(0); }
.mobile-menu a{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 30px;
  padding: 10px 0;
  color: var(--text);
}
.mobile-menu__meta{
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--text-faint);
}

/* =========================================================
   PARALLAX ZONE — pinned background, content scrolls over it
   ========================================================= */
.parallax-zone{
  position: relative;
}
.parallax-zone__bg{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
.parallax-zone__bg img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 20%;
}
.parallax-zone__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,10,18,.72) 0%, rgba(6,10,18,.78) 55%, rgba(6,10,18,.94) 100%),
    linear-gradient(90deg, rgba(6,10,18,.6) 0%, rgba(6,10,18,.25) 45%, rgba(6,10,18,.6) 100%);
}
.parallax-zone__content{
  position: relative;
  z-index: 1;
  margin-top: calc(-100vh + 1px);
  min-height: 128vh;
}
.parallax-inner{
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce){
  .parallax-zone__bg{ position: relative; height: auto; min-height: 60vh; }
  .parallax-zone__content{ margin-top: 0; min-height: auto; }
  .parallax-inner{ min-height: auto; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero-section{ padding-top: 150px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(30px, 5vw, 70px);
  align-items:center;
}
.hero__eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--cyan-soft);
  margin-bottom: 22px;
  font-weight: 600;
}
.hero__dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes pulse{
  0%,100%{ opacity:1; } 50%{ opacity:.4; }
}
.hero__name{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: .96;
  letter-spacing: .005em;
  color: var(--text);
  max-width: 14ch;
}
.hero__name em{
  font-style: normal;
  color: var(--amber-soft);
}
.hero__roles{
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  max-width: 62ch;
  line-height:1.9;
}
.hero__roles b{ color: var(--text); font-weight:700; }
.hero__statement{
  margin-top: 22px;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--text-dim);
  font-weight: 500;
  max-width: 58ch;
  line-height: 1.65;
}
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 36px; }

.hero__dims{
  margin-top: 48px;
  display:flex;
  flex-wrap: wrap;
  gap: 30px;
}
.hero__dim{
  display:flex; flex-direction:column; gap:6px;
  min-width: 120px;
}
.hero__dim b{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  color: var(--amber-soft);
  line-height:1;
}
.hero__dim span{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
}

.hero__portrait{
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 1px solid var(--panel-border-strong);
  box-shadow: var(--shadow-lg);
}
.hero__portrait img{
  width:100%; height:100%; object-fit:cover; object-position: top center;
}
.hero__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}
.hero__slide.is-active{
  opacity: 1;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce){
  .hero__slide{ transition: none; }
}

/* Title block — architectural drawing info box, overlaid on the portrait */
.titleblock{
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 2;
  border: 1px solid rgba(232,238,245,.25);
  background: rgba(8,13,22,.68);
  backdrop-filter: blur(14px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #cfd8e2;
}
.titleblock__row{
  display:flex; justify-content:space-between; gap:10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(232,238,245,.15);
}
.titleblock__row:last-child{ border-bottom:none; }
.titleblock__row span:first-child{ color: #8695a7; letter-spacing:.06em; }
.titleblock__row span:last-child{ color: #f0c07e; text-align:right; font-weight:600; }

/* =========================================================
   PROFILE (About)
   ========================================================= */
.profile__heading{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 40px;
  max-width: 18ch;
}
.profile__grid{
  display:grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(30px, 5vw, 80px);
  align-items:start;
}
.profile__portrait{
  position: sticky; top: 100px;
  overflow:hidden;
  aspect-ratio: 3/4;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-lg);
}
.profile__portrait img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.profile__intro{
  font-family: var(--font-body);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 40px;
}
.profile__intro b{ font-weight: 600; color: var(--amber-soft); }

.accordion{ display:flex; flex-direction:column; gap:10px; }
.accordion__item{
  border-left: 2px solid var(--panel-border-strong);
  background: var(--panel);
  overflow:hidden;
  transition: border-color var(--dur-s);
}
.accordion__item[open]{ border-left-color: var(--amber); }
.accordion__item summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 17px;
}
.accordion__item summary::-webkit-details-marker{ display:none; }
.accordion__item summary .num{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing:.1em;
  margin-right: 14px;
  font-weight: 400;
  text-transform: none;
}
.accordion__plus{
  width:26px; height:26px;
  border: 1px solid var(--panel-border-strong);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  position:relative;
}
.accordion__plus::before, .accordion__plus::after{
  content:""; position:absolute; background: var(--amber);
  transition: transform var(--dur-s) var(--ease-soft);
}
.accordion__plus::before{ width:11px; height:1.4px; }
.accordion__plus::after{ width:1.4px; height:11px; }
.accordion__item[open] .accordion__plus::after{ transform: rotate(90deg) scaleY(0); }
.accordion__body{
  padding: 0 24px 24px 24px;
  color: var(--text-dim);
  font-size: 15px;
  line-height:1.75;
  max-width: 64ch;
}
.accordion__body p + p{ margin-top:12px; }
.accordion__body .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.accordion__body .chips span{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing:.04em;
  padding: 6px 11px;
  border: 1px solid var(--panel-border-strong);
  color: var(--text-dim);
}

/* =========================================================
   LEADERSHIP — featured role dossiers
   ========================================================= */
.leadership__grid{
  display:flex; flex-direction:column; gap:20px;
}
.dossier{
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  backdrop-filter: var(--blur);
}
.dossier__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dossier__status{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing:.1em;
  text-transform: uppercase;
  color: var(--cyan-soft);
  border: 1px solid var(--cyan-soft);
  padding: 5px 11px;
  border-radius: 100px;
}
.dossier__status::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background: var(--cyan-soft);
}
.dossier__dates{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .04em;
}
.dossier__title{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 8px;
}
.dossier__org{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber-soft);
  letter-spacing:.03em;
  margin-bottom: 24px;
}
.dossier__body{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.dossier__col h4{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--cyan-soft);
  margin-bottom: 14px;
}
.dossier__col ul{ display:flex; flex-direction:column; gap:10px; }
.dossier__col li{
  font-size: 14.5px;
  color: var(--text-dim);
  line-height:1.6;
  padding-left: 18px;
  position: relative;
}
.dossier__col li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:7px; height:1px;
  background: var(--amber);
}

/* =========================================================
   JOURNEY — career timeline
   ========================================================= */
.journey__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.journey__portrait{
  width: 240px;
  flex-shrink: 0;
}
.journey__portrait-frame{
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid var(--panel-border-strong);
  box-shadow: var(--shadow-md);
}
.journey__portrait-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: top center;
  display: block;
}
.journey__portrait-caption{
  display:block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
}

.timeline{
  position: relative;
  padding-left: 32px;
}
.timeline::before{
  content:"";
  position:absolute; left:5px; top:6px; bottom:6px;
  width:1px;
  background: linear-gradient(180deg, var(--panel-border-strong), var(--line) 90%, transparent);
}
.timeline__item{
  position: relative;
  padding-bottom: 42px;
}
.timeline__item:last-child{ padding-bottom:0; }
.timeline__node{
  position:absolute; left:-32px; top:4px;
  width:11px; height:11px;
  border: 2px solid var(--amber);
  background: var(--bg);
  transform: rotate(45deg);
}
.timeline__item--current .timeline__node{
  background: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 22%, transparent);
}
.timeline__dates{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.timeline__role{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 20px;
  color: var(--text);
  margin-bottom: 3px;
}
.timeline__org{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--amber-soft);
  margin-bottom: 12px;
}
.timeline__desc{
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 68ch;
}

/* =========================================================
   PRESS
   ========================================================= */
.press__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.press-card{
  padding: 26px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  display:flex; flex-direction:column;
  transition: border-color var(--dur-s), transform var(--dur-s) var(--ease-soft);
}
.press-card:hover{ border-color: var(--panel-border-strong); transform: translateY(-3px); }
.press-card__source{
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--cyan-soft);
  margin-bottom: 16px;
}
.press-card h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height:1.25;
  text-transform: none;
  color: var(--text);
  margin-bottom: 12px;
  flex: 1;
}
.press-card p{
  font-size: 13.5px;
  color: var(--text-dim);
  line-height:1.6;
  margin-bottom: 18px;
}
.press-card__link{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.06em;
  text-transform: uppercase;
  color: var(--amber-soft);
}
.press-card__link svg{ width:13px; height:13px; }

.poetry-block{
  padding: 32px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
}
.poetry-block__head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap; gap: 16px;
  margin-bottom: 22px;
}
.poetry-block__head h3{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--text);
}
.poetry-block__head span{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing:.04em;
}
.poetry-list{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 24px;
}
.poetry-list li{
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14.5px;
  color: var(--text-dim);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.poetry-list li::before{
  content:"\2022";
  position:absolute; left:0; color: var(--amber);
  font-style: normal;
}

/* =========================================================
   CREDENTIALS
   ========================================================= */
.credentials__layout{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(30px, 5vw, 60px);
  align-items:start;
}
.ledger-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--panel-border-strong);
}
.ledger-head h3{
  font-family: var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size: 18px;
  color: var(--text);
}
.ledger-head span{
  font-family: var(--font-mono);
  font-size:10.5px;
  color: var(--text-faint);
  letter-spacing:.06em;
}
.ledger{
  display:flex; flex-direction:column;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 10px;
}
.ledger__row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--panel-border);
  align-items:baseline;
}
.ledger__row:last-child{ border-bottom:none; }
.ledger__name{ font-size: 14px; color: var(--text); line-height:1.4; }
.ledger__issuer{
  display:block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 3px;
  letter-spacing:.02em;
}
.ledger__date{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cyan-soft);
  white-space: nowrap;
  letter-spacing:.04em;
}
.ledger::-webkit-scrollbar{ width:6px; }
.ledger::-webkit-scrollbar-thumb{ background: var(--panel-border-strong); }

.side-stack{ display:flex; flex-direction:column; gap: 28px; }

.awards-list{ display:flex; flex-direction:column; gap:14px; }
.award-card{
  display:flex; gap:16px;
  padding: 18px 20px;
  border-left: 2px solid var(--amber);
  background: var(--panel);
}
.award-card__icon{
  width:34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--amber) 16%, transparent);
}
.award-card__icon svg{ width:17px; height:17px; color: var(--amber); }
.award-card h4{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 15px;
  text-transform: none;
  line-height:1.3;
  margin-bottom: 4px;
  color: var(--text);
}
.award-card p{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing:.03em;
}

.chip-row{ display:flex; flex-wrap:wrap; gap:9px; }
.chip-row span{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.03em;
  padding: 8px 13px;
  border: 1px solid var(--panel-border-strong);
  color: var(--text-dim);
}

.edu-card{
  padding: 20px 22px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
}
.edu-card h4{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--text);
}
.edu-card p{
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.6;
}
.edu-card span{
  display:block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 8px;
  letter-spacing:.04em;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  border: 1px solid var(--panel-border);
  background: rgba(10,16,28,.5);
  backdrop-filter: var(--blur);
  padding: clamp(30px, 6vw, 70px);
  position: relative;
  overflow: hidden;
}
.contact__glow{
  position:absolute; width:500px; height:500px; border-radius:50%;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 70%);
  opacity:.15; top:-200px; right:-150px; filter: blur(60px); pointer-events:none;
}
.contact__inner{ position:relative; z-index:1; max-width: 660px; }
.contact h2{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height:1.05;
  margin-bottom: 18px;
}
.contact p.lead{ color: var(--text-dim); font-size:16px; max-width:54ch; margin-bottom: 30px; }

.contact__toggle{
  display:inline-flex; align-items:center; gap:12px;
  padding: 16px 26px;
  border-radius:100px;
  border: 1px solid var(--panel-border-strong);
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
}
.contact__toggle svg{ width:16px; height:16px; transition: transform var(--dur-s) var(--ease-soft); }
.contact__toggle.is-open svg{ transform: rotate(45deg); }

.contact__panel{
  overflow:hidden;
  max-height:0;
  transition: max-height .5s var(--ease), margin-top .5s var(--ease);
}
.contact__panel.is-open{ max-height: 460px; margin-top: 28px; }
.contact__panel-inner{ padding-top: 4px; }
.contact__cta-block{
  display:flex; align-items:center; gap:20px;
  flex-wrap:wrap;
  padding: 26px;
  background: var(--bg-soft);
  border: 1px solid var(--panel-border);
  margin-bottom: 22px;
}
.contact__cta-icon{
  width:56px; height:56px;
  background: linear-gradient(135deg, #2fae63, #1f8a4d);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.contact__cta-icon svg{ width:26px; height:26px; color:#fff; }
.contact__cta-text{ flex:1; min-width:180px; }
.contact__cta-text b{ display:block; font-family: var(--font-display); font-weight:700; text-transform:uppercase; font-size:17px; margin-bottom:4px; }
.contact__cta-text span{ font-size:13.5px; color: var(--text-dim); }

.contact__alt{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.contact__alt span.lbl{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-faint); margin-right:6px; }
.contact__alt a{
  width:42px; height:42px;
  border: 1px solid var(--panel-border-strong);
  display:flex; align-items:center; justify-content:center;
  transition: transform var(--dur-s);
}
.contact__alt a:hover{ background: var(--panel-hover); transform: translateY(-2px); }
.contact__alt a svg{ width:17px; height:17px; }

/* =========================================================
   FOOTER + marquee
   ========================================================= */
.footer-marquee{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
  overflow:hidden;
  white-space: nowrap;
}
.marquee__track{
  display:inline-flex;
  align-items:center;
  gap: 34px;
  padding-left: 34px;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.marquee__track span.sep{ color: var(--amber); }
@keyframes marquee-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@media (max-width: 760px){
  .marquee__track{ font-size:9.5px; gap:24px; padding-left:24px; animation-duration: 24s; }
}

.footer{
  padding: 40px 0 40px;
}
.footer__grid{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
  padding-top: 40px;
}
.footer__brand{ font-family: var(--font-display); font-weight:700; text-transform:uppercase; font-size:18px; }
.footer__brand span{
  display:block; font-family: var(--font-mono); font-size:10px; letter-spacing:.08em; color: var(--text-faint); text-transform:uppercase; margin-top:6px;
}
.footer__social{ display:flex; gap:10px; }
.footer__social a{
  width:38px; height:38px;
  border: 1px solid var(--panel-border-strong);
  display:flex; align-items:center; justify-content:center;
}
.footer__social a svg{ width:15px; height:15px; }
.footer__meta{
  font-family: var(--font-mono); font-size:11px; color: var(--text-faint);
  display:flex; align-items:center; gap:20px;
}
.back-to-top{
  display:flex; align-items:center; gap:8px;
  border: 1px solid var(--panel-border-strong);
  padding: 8px 14px;
}
.back-to-top svg{ width:12px; height:12px; }

/* =========================================================
   SOCIAL DOCK (floating)
   ========================================================= */
.dock{
  position: fixed;
  right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 150;
  display:flex; flex-direction:column; gap:10px;
}
.dock__item{
  display:flex; align-items:center;
  height:48px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--bg-elevated) 75%, transparent);
  border: 1px solid var(--panel-border);
  backdrop-filter: var(--blur);
  overflow:hidden;
  width:48px;
  transition: width .4s var(--ease);
  cursor:pointer;
}
.dock__item:hover, .dock__item:focus-within{ width: 168px; }
.dock__item--wa:hover, .dock__item--wa:focus-within{ width: 200px; }
.dock__icon{
  width:48px; height:48px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.dock__icon svg{ width:19px; height:19px; color: var(--text); }
.dock__item--wa .dock__icon svg{ color:#2fae63; }
.dock__label{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.04em;
  white-space:nowrap; color: var(--text-dim); padding-right:16px;
}
.dock a.dock__item{ text-decoration:none; }

.dock-mobile-fab{
  display:none;
  position:fixed; right:18px; bottom:18px; z-index:150;
  width:58px; height:58px; border-radius:50%;
  background: linear-gradient(135deg, #2fae63, #1f8a4d);
  align-items:center; justify-content:center;
  box-shadow: 0 14px 30px -10px rgba(31,138,77,.6);
}
.dock-mobile-fab svg{ width:24px; height:24px; color:#fff; }

.sheet{
  position: fixed; inset:0; z-index:250;
  display:flex; align-items:flex-end;
  opacity:0; visibility:hidden;
  transition: opacity .3s, visibility .3s;
}
.sheet.is-open{ opacity:1; visibility:visible; }
.sheet__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.6); }
.sheet__panel{
  position:relative; z-index:2; width:100%;
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-bottom: none;
  padding: 26px 22px 34px;
  transform: translateY(20px);
  transition: transform .35s var(--ease);
}
.sheet.is-open .sheet__panel{ transform: translateY(0); }
.sheet__bar{ width:40px; height:4px; border-radius:10px; background: var(--panel-border-strong); margin: 0 auto 22px; }
.sheet__item{
  display:flex; align-items:center; gap:16px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--line);
}
.sheet__item:last-child{ border-bottom:none; }
.sheet__item-icon{
  width:42px; height:42px;
  background: var(--panel); border: 1px solid var(--panel-border-strong);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sheet__item-icon svg{ width:18px; height:18px; }
.sheet__item b{ font-family: var(--font-body); font-size:14.5px; font-weight:600; display:block; }
.sheet__item span{ font-family: var(--font-mono); font-size:11px; color: var(--text-faint); }

/* =========================================================
   SKIP LINK / A11Y UTIL
   ========================================================= */
.skip-link{
  position:fixed; top:-60px; left:16px; z-index:1000;
  background: var(--amber); color:#14120c;
  padding: 12px 20px; border-radius: 4px;
  font-family: var(--font-mono); font-size:12px; letter-spacing:.06em;
  transition: top .25s var(--ease);
}
.skip-link:focus{ top:16px; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip: rect(0 0 0 0); white-space:nowrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .hero-section{ padding-top: 120px; }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__portrait{ max-width: 380px; aspect-ratio: 4/5; margin: 0 auto 36px; order: -1; }
  .profile__grid{ grid-template-columns:1fr; }
  .profile__portrait{ position:static; max-width:360px; margin: 0 auto 40px; }
  .dossier__body{ grid-template-columns:1fr; }
  .press__grid{ grid-template-columns: 1fr 1fr; }
  .poetry-list{ grid-template-columns: 1fr 1fr; }
  .credentials__layout{ grid-template-columns:1fr; }
  .ledger{ max-height: 460px; }
}

@media (max-width: 760px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav{ padding: 8px 8px 8px 14px; }
  .dock{ display:none; }
  .dock-mobile-fab{ display:flex; }
  .press__grid{ grid-template-columns: 1fr; }
  .poetry-list{ grid-template-columns: 1fr; }
  .hero__dims{ gap:20px; }
  .contact__cta-block{ flex-direction:column; align-items:flex-start; }
  .footer__grid{ flex-direction:column; align-items:flex-start; }
  .titleblock{ display:none; }
  .timeline{ padding-left: 26px; }
  .timeline__node{ left:-26px; }
}

@media (max-width: 480px){
  :root{ --radius-lg: 3px; }
  .hero__ctas{ flex-direction:column; align-items:stretch; }
  .hero__ctas .btn{ width:100%; }
}

/* Print */
@media print{
  .nav, .dock, .dock-mobile-fab, .loader, .atmosphere, .parallax-zone__bg{ display:none !important; }
}

/* =========================================================
   GALLERY SLIDER
   ========================================================= */
.slider{
  position: relative;
}
.slider__viewport{
  overflow: hidden;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-lg);
}
.slider__track{
  display:flex;
  transition: transform .6s var(--ease);
  will-change: transform;
}
.slider__slide{
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 16/8;
  background: var(--bg-soft);
}
.slider__slide img{
  width:100%; height:100%; object-fit:cover; object-position: top center;
}
.slider__slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(6,10,18,.85) 100%);
}
.slider__caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 26px 32px;
}
.slider__caption b{
  display:block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 21px;
  color: #f4f6f9;
  margin-bottom: 4px;
}
.slider__caption span{
  font-size: 14px;
  color: #c3ccd6;
}
.slider__nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  border: 1px solid var(--panel-border-strong);
  backdrop-filter: var(--blur);
  display:flex; align-items:center; justify-content:center;
  z-index:3;
  color: var(--text);
}
.slider__nav svg{ width:18px; height:18px; }
.slider__nav--prev{ left:16px; }
.slider__nav--next{ right:16px; }
.slider__dots{
  display:flex; justify-content:center; gap:9px;
  margin-top: 20px;
}
.slider__dots button{
  width:8px; height:8px; border-radius:50%;
  background: var(--panel-border-strong);
  transition: transform var(--dur-s);
}
.slider__dots button.is-active{
  background: var(--amber);
  transform: scale(1.3);
}
@media (max-width: 760px){
  .slider__slide{ aspect-ratio: 4/5; }
  .slider__nav{ width:36px; height:36px; }
  .slider__nav svg{ width:15px; height:15px; }
  .slider__caption{ padding: 18px 20px; }
  .slider__caption b{ font-size:17px; }
}