/* =============================================================
   machut.com — styles.css
   VT Orange #E5751F is the primary UI color · VT Maroon #861F41 reserved for VT identity elements
   DARK MODE is the default. Light mode via [data-theme="light"].
   ============================================================= */

/* ── STATIC BRAND TOKENS (never flip) ─────────────────────── */
:root {
  --maroon:    #861F41;    /* VT identity only — tags, VT credential strip */
  --maroon-dk: #5e1530;    /* VT identity hover */
  --orange:    #E5751F;    /* Primary UI color — dark sections, dark mode */
  --orange-dk: #8f3e0d;    /* Section/card backgrounds; hover on dark sections */
  --orange-lt: #f08c3c;    /* Tint / light accent */
  --orange-btn: #be5810;   /* Buttons / CTAs needing white text — 4.57:1 on white */
  --serif:     "Playfair Display", Georgia, serif;
  --sans:      "Figtree", system-ui, sans-serif;
  --ease:      cubic-bezier(.22,.68,0,1.2);
  --r:         5px;
  --max:       1120px;
}

/* ── DARK MODE TOKENS (default) ────────────────────────────── */
:root {
  --bg:       #181614;
  --bg-alt:   #1e1b18;
  --bg-warm:  #231f1c;
  --fg:       #f0ede8;
  --fg-body:  #b4b0a6;
  --fg-mid:   #7a7570;
  --bdr:      rgba(255,255,255,.10);
  --nav-bg:   rgba(24,22,20,.97);
  --tl-bdr:   #181614;
  --chip-bg:  rgba(38,34,30,.94);
  --chip-bdr: rgba(255,255,255,.13);
  --chip-lbl: #7a7570;
  --badge-bg:  rgba(30,27,24,.95);
  --badge-bdr: rgba(255,255,255,.12);
  --sh:    0 4px 24px rgba(0,0,0,.4);
  --sh-md: 0 12px 48px rgba(0,0,0,.5);
  --sh-lg: 0 28px 80px rgba(0,0,0,.6);
}

/* ── LIGHT MODE OVERRIDES ───────────────────────────────────── */
[data-theme="light"] {
  --bg:      #f9f7f4;
  --bg-alt:  #f5f2ee;
  --bg-warm: #ede8df;
  --fg:      #1c1917;
  --fg-body: #374151;
  --fg-mid:  #4b5563;
  --bdr:     rgba(28,25,23,.11);
  --nav-bg:  rgba(249,247,244,.96);
  --tl-bdr:  #f9f7f4;
  --chip-bg: #fff;
  --chip-bdr: rgba(28,25,23,.10);
  --chip-lbl: #6b7280;
  --badge-bg:  #fff;
  --badge-bdr: rgba(28,25,23,.10);
  --sh:    0 4px 24px rgba(229,117,31,.10);
  --sh-md: 0 12px 48px rgba(229,117,31,.12);
  --sh-lg: 0 28px 80px rgba(229,117,31,.15);
}

/* =============================================================
   RESET + BASE
   ============================================================= */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body  {
  font-family:var(--sans); background:var(--bg); color:var(--fg-body);
  overflow-x:hidden; font-size:clamp(15px,1.1vw,17px); line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background .3s, color .3s;
}
img   { display:block; max-width:100%; height:auto; }
a     { color:inherit; text-decoration:none; }
ul    { list-style:none; }
button { font-family:var(--sans); cursor:pointer; border:none; background:none; }
figure { margin:0; }

/* =============================================================
   UTILITY
   ============================================================= */
.wrap { max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,48px); }
.sp   { padding:clamp(72px,8vw,130px) 0; }

/* Eyebrow labels */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:clamp(.65rem,.6vw,.72rem); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--orange);
  margin-bottom:18px;
}
.eyebrow::before { content:""; display:block; width:24px; height:2px; background:var(--orange); flex-shrink:0; }
/* Light-on-dark eyebrow (permanently dark sections only) */
.eyebrow-lt { color:rgba(255,255,255,.82) !important; }
.eyebrow-lt::before { background:rgba(255,255,255,.55) !important; }

/* Section headings */
.sh {
  font-family:var(--serif);
  font-size:clamp(2rem,3.5vw,3rem);
  line-height:1.12; letter-spacing:-.025em;
  margin-bottom:clamp(16px,2vw,24px);
  color:var(--fg);
  transition:color .3s;
}
.sh em { font-style:italic; color:var(--orange); }

/* Body text block */
.bt p { color:var(--fg-body); line-height:1.9; margin-bottom:18px; font-size:clamp(.88rem,1vw,.96rem); transition:color .3s; }
.bt p:last-child { margin-bottom:0; }
.bt strong { color:var(--fg); font-weight:600; transition:color .3s; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:clamp(11px,1.2vw,14px) clamp(22px,2.5vw,30px);
  border-radius:var(--r); font-family:var(--sans);
  font-size:clamp(.75rem,.75vw,.83rem); font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.btn-primary { background:var(--orange-btn); color:#fff; box-shadow:0 4px 18px rgba(190,88,16,0.24); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:var(--sh-md); }
/* Outline button adapts to both themes */
.btn-outline {
  background:transparent;
  color:var(--fg);
  border:1.5px solid var(--bdr);
}
.btn-outline:hover { border-color:var(--fg); transform:translateY(-2px); }
/* Light-text button for permanently-dark sections */
.btn-lt {
  background:rgba(255,255,255,.10); color:#fff;
  border:1.5px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
}
.btn-lt:hover { background:rgba(255,255,255,.18); transform:translateY(-2px); }

/* Tags */
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.tag  {
  padding:5px 13px; border-radius:3px;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--bg-warm); color:var(--fg); border:1px solid var(--bdr);
  transition:background .2s, color .2s;
}
.tag:hover { background:var(--orange); color:#fff; border-color:var(--orange); }
.tag.vt    { background:var(--maroon); color:#fff; border-color:var(--maroon); }
.tag.vt:hover { background:var(--maroon-dk); }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.d1 { transition-delay:.08s; } .d2 { transition-delay:.16s; }
.d3 { transition-delay:.24s; } .d4 { transition-delay:.32s; }

/* =============================================================
   NAV
   ============================================================= */
#nav {
  position:fixed; inset:0 0 auto; z-index:200;
  padding:clamp(14px,1.5vw,20px) 0;
  transition:background .35s, box-shadow .35s, padding .35s;
}
#nav.scrolled {
  background:var(--nav-bg);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 var(--bdr), var(--sh);
  padding:clamp(10px,1vw,13px) 0;
}
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nav-logo {
  font-family:var(--serif); font-size:clamp(1rem,1.2vw,1.2rem); font-weight:700;
  color:var(--fg); line-height:1; transition:color .3s;
}
.nav-logo .dot { color:var(--orange); }
.nav-logo .vt  { font-size:.6em; font-family:var(--sans); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--orange);
  display:block; margin-top:1px; }
.nav-links { display:flex; gap:clamp(16px,2vw,28px); align-items:center; }
.nav-links a {
  font-size:clamp(.7rem,.75vw,.78rem); font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--fg-mid); transition:color .2s;
}
.nav-links a:hover { color:var(--fg); }
.nav-cta {
  background:var(--orange-btn); color:#fff !important;
  padding:8px 18px; border-radius:var(--r);
  font-weight:700; box-shadow:0 2px 10px rgba(190,88,16,0.24);
  transition:box-shadow .2s, transform .2s;
}
.nav-cta:hover { box-shadow:var(--sh); transform:translateY(-1px); }

/* ── Dark / Light theme toggle ─────────────────────────────── */
.theme-btn {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(229,117,31,0.09); border:1px solid rgba(229,117,31,0.19);
  color:var(--fg-mid);
  transition:background .2s, border-color .2s, color .2s, transform .25s;
}
.theme-btn:hover {
  background:rgba(229,117,31,0.19); border-color:var(--orange);
  color:var(--fg); transform:rotate(18deg);
}
.theme-btn:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.theme-btn svg { display:block; }
/* Moon shown in dark, hidden in light */
.icon-moon { display:block; }
.icon-sun  { display:none; }
[data-theme="light"] .icon-moon { display:none; }
[data-theme="light"] .icon-sun  { display:block; }

/* ── Hamburger ─────────────────────────────────────────────── */
.ham { display:none; flex-direction:column; gap:5px; padding:4px; }
.ham span { display:block; width:22px; height:2px; background:var(--fg); border-radius:2px; transition:all .3s; }
.ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity:0; }
.ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── Mobile menu ───────────────────────────────────────────── */
.mob {
  display:none; position:fixed; inset:0; z-index:190;
  background:var(--bg); padding:clamp(80px,12vw,100px) clamp(24px,6vw,40px) 40px;
  flex-direction:column; gap:4px; overflow-y:auto;
  transition:background .3s;
}
.mob.open { display:flex; }
.mob a {
  font-family:var(--serif); font-size:clamp(1.6rem,5vw,2.4rem); color:var(--fg);
  border-bottom:1px solid var(--bdr); padding:14px 0;
  transition:color .2s, padding-left .2s;
}
.mob a:hover { color:var(--orange); padding-left:8px; }

/* =============================================================
   HERO
   ============================================================= */
#hero {
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr clamp(240px,28vw,360px);
  align-items:center; gap:clamp(32px,5vw,64px);
  padding:clamp(110px,12vw,160px) 0 clamp(60px,7vw,90px);
  position:relative; overflow:hidden;
  background:var(--bg); transition:background .3s;
}
.hero-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 75% 40%, rgba(229,117,31,0.1) 0%,transparent 65%),
    radial-gradient(ellipse 50% 50% at 5% 90%,  rgba(229,117,31,.07) 0%,transparent 60%);
}
.hero-dots {
  position:absolute; inset:0; pointer-events:none; opacity:.3;
  background-image:radial-gradient(circle, var(--bdr) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent 74%);
}
.hero-text { position:relative; z-index:1; }
.hero-pre  {
  display:inline-flex; align-items:center; gap:10px;
  font-size:clamp(.65rem,.7vw,.72rem); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange); margin-bottom:clamp(18px,2vw,26px);
}
.hero-pre::before { content:""; width:24px; height:2px; background:var(--orange); display:block; }
.hero-h1 {
  font-family:var(--serif);
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:1.05; letter-spacing:-.03em;
  margin-bottom:clamp(18px,2vw,28px);
  color:var(--fg); transition:color .3s;
}
.hero-h1 em { font-style:italic; color:var(--orange); }
.hero-sub {
  font-size:clamp(.9rem,1.1vw,1.05rem);
  color:var(--fg-body);
  max-width:500px; margin-bottom:clamp(32px,4vw,48px); line-height:1.88;
  transition:color .3s;
}
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }

/* VT credential strip */
.vt-strip {
  display:inline-flex; align-items:center; gap:12px;
  background:rgba(229,117,31,0.07); border:1px solid rgba(229,117,31,0.15);
  border-radius:40px; padding:8px 16px 8px 10px;
  margin-bottom:clamp(22px,2.5vw,32px); font-size:clamp(.7rem,.7vw,.76rem);
}
.vt-pill-logo { height:clamp(18px,2vw,22px); width:auto; display:block; flex-shrink:0; }
/* Invert logo for dark mode (PNG is dark on transparent) */
[data-theme="dark"]  .vt-pill-logo { filter:brightness(0) invert(1); opacity:.8; }
[data-theme="light"] .vt-pill-logo { filter:none; opacity:1; }
.vt-strip-text { line-height:1.35; }
.vt-strip-text strong { display:block; font-weight:700; color:var(--maroon); font-size:.95em; }
.vt-strip-text span   { color:var(--fg-mid); font-size:.88em; transition:color .3s; }

/* Hero photo */
.hero-photo { position:relative; z-index:1; }
.hero-frame {
  border-radius:8px; overflow:hidden;
  aspect-ratio:3/4; background:var(--bg-warm);
  box-shadow:var(--sh-lg);
  /* ── Chrome GPU compositing fix ──────────────────────────────
     Chrome repaints a white block when overflow:hidden + border-radius
     interacts with a scaled child during re-layout. Fix: create a new
     GPU compositing layer. isolation:isolate creates a stacking context;
     translateZ(0) promotes the element to its own compositor tile.     */
  isolation:isolate;
  transform:translateZ(0);
  will-change:transform;
  transition:background .3s, box-shadow .3s;
}
.hero-frame img {
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  filter:saturate(.9) contrast(1.04);
  transition:transform 9s ease;
  /* Prevent sub-pixel flip artifact during scale animation */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hero-frame:hover img { transform:scale(1.04); }

/* Corner accents */
.hero-photo::before {
  content:""; position:absolute; top:-14px; right:-14px;
  width:80px; height:80px;
  border-top:2px solid var(--orange); border-right:2px solid var(--orange);
  z-index:2; pointer-events:none;
}
.hero-photo::after {
  content:""; position:absolute; bottom:-14px; left:-14px;
  width:60px; height:60px;
  border-bottom:2px solid var(--orange); border-left:2px solid var(--orange);
  z-index:2; pointer-events:none;
}

/* Floating stat chips */
.chip {
  position:absolute; z-index:3;
  background:var(--chip-bg);
  border:1px solid var(--chip-bdr);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-radius:8px; padding:clamp(10px,1.2vw,14px) clamp(12px,1.5vw,18px);
  box-shadow:var(--sh-md);
  animation:chipFloat 4s ease-in-out infinite;
  transition:background .3s, border-color .3s;
}
.chip-b { bottom:40px; right:-clamp(24px,4vw,40px); animation-delay:-2s; }
.chip-t { top:44px;  left:-clamp(24px,4vw,40px); animation-delay:-.5s; }
.chip .val { font-family:var(--serif); font-size:clamp(1.2rem,1.6vw,1.6rem); color:var(--orange); line-height:1; font-weight:700; }
.chip .lbl { font-size:clamp(.6rem,.65vw,.68rem); color:var(--chip-lbl); font-weight:600; letter-spacing:.04em; margin-top:3px; transition:color .3s; }
@keyframes chipFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* =============================================================
   VENTURES — permanently dark (#1c1917), never flips
   ============================================================= */
#ventures { background:#1c1917; padding:clamp(72px,8vw,130px) 0 clamp(56px,6vw,80px); }
.ventures-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,280px),1fr));
  border-top:1px solid rgba(255,255,255,.1);
}
.v-card {
  border-right:1px solid rgba(255,255,255,.1); position:relative; overflow:hidden;
  transition:background .25s;
}
.v-card:last-child { border-right:none; }
.v-card:hover { background:rgba(255,255,255,.04); }
.v-card::after {
  content:""; position:absolute; bottom:0; left:0; width:0; height:3px;
  background:var(--orange); transition:width .45s var(--ease);
}
.v-card:hover::after { width:100%; }
.v-img { overflow:hidden; aspect-ratio:16/9; border-bottom:1px solid rgba(255,255,255,.1); }
.v-img img {
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.55) brightness(.6);
  transition:transform 9s ease, filter .5s;
}
.v-card:hover .v-img img { transform:scale(1.06); filter:saturate(.75) brightness(.72); }
.v-body { padding:clamp(20px,2.5vw,28px) clamp(20px,2.5vw,28px) clamp(26px,3vw,34px); }
.v-role { font-size:.67rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:6px; }
.v-name { font-family:var(--serif); font-size:clamp(1.2rem,1.6vw,1.5rem); color:#fff; margin-bottom:10px; }
/* CONTRAST FIX: raised from .42 → .75 */
.v-desc { font-size:clamp(.78rem,.85vw,.84rem); color:rgba(255,255,255,.75); line-height:1.75; margin-bottom:20px; }
.v-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.73rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange); transition:gap .2s;
}
.v-link:hover { gap:11px; }

/* =============================================================
   FOUNDER STORY — theme-sensitive
   ============================================================= */
#story { background:var(--bg-alt); transition:background .3s; }
.story-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,420px),1fr));
  gap:clamp(40px,6vw,96px); align-items:center;
}
.story-img-wrap { position:relative; }
.story-frame {
  border-radius:8px; overflow:hidden;
  aspect-ratio:4/5; box-shadow:var(--sh-md);
  /* Chrome GPU compositing fix (same as hero-frame) */
  isolation:isolate; transform:translateZ(0);
  transition:box-shadow .3s;
}
.story-frame img {
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:saturate(.88); transition:transform 9s ease;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.story-frame:hover img { transform:scale(1.04); }
.story-badge {
  position:absolute; bottom:clamp(16px,2.5vw,28px); left:-clamp(10px,2vw,22px);
  background:var(--orange); color:#fff; padding:clamp(12px,1.5vw,16px) clamp(16px,2vw,22px);
  border-radius:var(--r); box-shadow:var(--sh); z-index:2;
  font-size:clamp(.7rem,.75vw,.78rem); font-weight:600; line-height:1.5;
}
.story-badge strong { display:block; font-family:var(--serif); font-size:clamp(1rem,1.2vw,1.15rem); font-weight:700; }
/* VT v-mark watermark */
.story-seal {
  position:absolute; bottom:clamp(16px,2.5vw,24px); right:clamp(16px,2.5vw,24px);
  width:clamp(52px,6vw,72px); height:auto; opacity:.14; pointer-events:none; z-index:2;
  filter:brightness(0) invert(1);
  transition:filter .3s, opacity .3s;
}
/* In light mode the photo is brighter — flip the mark dark so it stays visible */
[data-theme="light"] .story-seal { filter:brightness(0); opacity:.08; }
.timeline { margin-top:clamp(28px,3vw,40px); }
.tl-row   { display:flex; gap:18px; padding-bottom:clamp(18px,2.5vw,26px); }
.tl-row:last-child { padding-bottom:0; }
.tl-left  { display:flex; flex-direction:column; align-items:center; padding-top:5px; flex-shrink:0; }
.tl-dot   { width:11px; height:11px; border-radius:50%; background:var(--orange); border:2.5px solid var(--tl-bdr); transition:border-color .3s; }
.tl-line  { width:1.5px; flex:1; background:var(--bdr); margin-top:4px; transition:background .3s; }
.tl-row:last-child .tl-line { display:none; }
.tl-yr    { font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-bottom:3px; }
.tl-title { font-weight:700; font-size:clamp(.85rem,.9vw,.92rem); margin-bottom:2px; color:var(--fg); transition:color .3s; }
.tl-org   { font-size:clamp(.76rem,.82vw,.82rem); color:var(--fg-mid); line-height:1.55; transition:color .3s; }

/* =============================================================
   THOUGHTLEADERSHIP.BIZ — permanently dark orange, never flips
   ============================================================= */
#tl { background:var(--orange-dk); position:relative; overflow:hidden; }
.tl-noise {
  position:absolute; inset:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.tl-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 90% 50%, rgba(229,117,31,.2) 0%,transparent 65%);
}
.tl-inner { position:relative; z-index:1; }
.tl-top {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,380px),1fr));
  gap:clamp(36px,5vw,72px); align-items:start;
  margin-bottom:clamp(40px,5vw,64px);
}
.tl-brand-lockup { display:flex; align-items:center; gap:14px; margin-bottom:clamp(16px,2vw,22px); }
.tl-brand-icon {
  width:clamp(44px,5vw,56px); height:clamp(44px,5vw,56px);
  background:var(--orange); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:clamp(1rem,1.4vw,1.35rem); font-weight:700; color:#fff;
  flex-shrink:0; box-shadow:0 4px 16px rgba(229,117,31,.4);
}
.tl-brand-name { font-family:var(--serif); font-size:clamp(1.3rem,1.8vw,1.7rem); color:#fff; font-weight:700; line-height:1.2; }
.tl-brand-name span { color:var(--orange); }
/* CONTRAST FIX: raised from .45 → .75 */
.tl-brand-tagline { font-size:clamp(.72rem,.75vw,.78rem); color:rgba(255,255,255,.75); letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
/* CONTRAST FIX: raised from .65 → .85 */
.tl-desc { font-size:clamp(.88rem,1vw,.96rem); color:rgba(255,255,255,.85); line-height:1.9; margin-bottom:clamp(20px,2.5vw,30px); }
.tl-stats { display:flex; gap:clamp(20px,3vw,32px); flex-wrap:wrap; margin-bottom:clamp(22px,2.5vw,30px); }
.tl-stat .sv { font-family:var(--serif); font-size:clamp(1.6rem,2.2vw,2.2rem); color:var(--orange); font-weight:700; line-height:1; }
/* CONTRAST FIX: raised from .4 → .68 */
.tl-stat .sl { font-size:.72rem; color:rgba(255,255,255,.68); text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }
.tl-plats { display:flex; flex-wrap:wrap; gap:8px; }
.tl-plat {
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border-radius:20px; font-size:.7rem; font-weight:600; letter-spacing:.05em;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.88);
  transition:background .2s, color .2s;
}
.tl-plat:hover { background:rgba(255,255,255,.22); color:#fff; }
.tl-episodes-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:clamp(16px,2vw,22px); flex-wrap:wrap; gap:12px;
}
.tl-episodes-header h3 { font-family:var(--serif); font-size:clamp(1.1rem,1.4vw,1.35rem); color:#fff; }
/* CONTRAST FIX: raised from .45 → .72 */
.tl-live { display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.tl-live::before { content:""; width:8px; height:8px; border-radius:50%; background:#4ade80; animation:pulse 2s ease-in-out infinite; flex-shrink:0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.ep-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%,260px),1fr));
  gap:clamp(10px,1.2vw,14px);
}
.ep-card {
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); padding:clamp(16px,2vw,22px);
  display:flex; flex-direction:column; gap:8px;
  transition:background .2s, border-color .2s, transform .2s;
  cursor:pointer;
}
.ep-card:hover { background:rgba(255,255,255,.17); border-color:var(--orange); transform:translateY(-3px); }
.ep-num   { font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
.ep-title { font-family:var(--serif); font-size:clamp(.88rem,1vw,1rem); color:#fff; line-height:1.4; font-weight:600; }
.ep-arrow { margin-top:auto; font-size:.72rem; font-weight:600; color:var(--orange); opacity:0; transition:opacity .2s; align-self:flex-end; }
.ep-card:hover .ep-arrow { opacity:1; }
/* Snippet text on each content card */
.ep-snip {
  font-size:clamp(.72rem,.76vw,.78rem);
  color:rgba(255,255,255,.58);
  line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* CTA buttons converted from <button> to <a> — inherit base btn styles */
.tl-cta-primary, .tl-cta-secondary {
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; border-radius:var(--r);
  padding:clamp(11px,1.2vw,14px) clamp(22px,2.5vw,30px);
  font-family:var(--sans); font-size:clamp(.75rem,.78vw,.82rem);
  font-weight:700; letter-spacing:.07em; text-transform:uppercase; cursor:pointer;
}
.tl-cta-primary { background:var(--orange); color:#fff; border:none; box-shadow:0 4px 18px rgba(229,117,31,.32); transition:transform .2s var(--ease), box-shadow .2s; }
.tl-cta-primary:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(229,117,31,.48); }
.tl-cta-secondary { background:rgba(255,255,255,.10); color:#fff; border:1.5px solid rgba(255,255,255,.28); backdrop-filter:blur(8px); transition:background .2s, transform .2s; }
.tl-cta-secondary:hover { background:rgba(255,255,255,.18); transform:translateY(-2px); }
/* Attribution line under CTAs */
.tl-cta-attr {
  margin-top:clamp(10px,1.2vw,14px);
  font-size:.7rem; color:rgba(255,255,255,.45); line-height:1.5;
}
.tl-cta-attr a { color:rgba(255,255,255,.72); text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.tl-cta-attr a:hover { color:#fff; }
.ep-skel { background:rgba(255,255,255,.06); border-radius:var(--r); overflow:hidden; }
.sk { height:12px; border-radius:4px; background:rgba(255,255,255,.1); animation:shim 1.6s ease-in-out infinite; }
.sk.lg { width:80%; } .sk.md { width:55%; } .sk.sm { width:40%; }
.sk-gap { height:8px; }
@keyframes shim { 0%,100%{opacity:.45} 50%{opacity:.9} }
.tl-cta-row { margin-top:clamp(28px,3.5vw,40px); display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* LinkedIn platform chip — slightly brighter to stand out */
.tl-plat-li {
  background:rgba(10,102,194,.25);
  border-color:rgba(10,102,194,.45);
}
.tl-plat-li:hover { background:rgba(10,102,194,.42); border-color:rgba(10,102,194,.7); }

/* LinkedIn follow strip — sits below the episode grid + CTAs */
.tl-li-strip {
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,2vw,20px); flex-wrap:wrap;
  margin-top:clamp(22px,2.5vw,30px);
  padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,22px);
  background:rgba(10,102,194,.14);
  border:1px solid rgba(10,102,194,.28);
  border-radius:var(--r);
}
.tl-li-text { display:flex; flex-direction:column; gap:4px; }
.tl-li-text strong { font-size:clamp(.82rem,.88vw,.9rem); color:#fff; font-weight:700; }
.tl-li-text span   { font-size:clamp(.72rem,.76vw,.78rem); color:rgba(255,255,255,.68); line-height:1.5; max-width:340px; }
.tl-li-btn {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0;
  padding:9px 18px; border-radius:var(--r);
  background:rgba(10,102,194,.32); border:1.5px solid rgba(10,102,194,.55);
  color:#fff; font-family:var(--sans);
  font-size:clamp(.7rem,.74vw,.76rem); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  transition:background .2s, border-color .2s, transform .2s;
}
.tl-li-btn:hover { background:rgba(10,102,194,.52); border-color:rgba(10,102,194,.8); transform:translateY(-2px); }

/* X (Twitter) platform chip */
.tl-plat-x {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.28);
}
.tl-plat-x:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.6); }

/* X follow strip */
.tl-x-strip {
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,2vw,20px); flex-wrap:wrap;
  margin-top:clamp(10px,1.2vw,14px);
  padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,22px);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);
}
.tl-x-btn {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0;
  padding:9px 18px; border-radius:var(--r);
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.28);
  color:#fff; font-family:var(--sans);
  font-size:clamp(.7rem,.74vw,.76rem); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  transition:background .2s, border-color .2s, transform .2s;
}
.tl-x-btn:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.55); transform:translateY(-2px); }
.btn-orange {
  background:var(--orange); color:#fff; border:none; border-radius:var(--r);
  padding:clamp(11px,1.2vw,14px) clamp(22px,2.5vw,30px);
  font-size:clamp(.75rem,.78vw,.82rem); font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s;
  box-shadow:0 4px 18px rgba(229,117,31,.32);
}
.btn-orange:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(229,117,31,.48); }

/* =============================================================
   ABOUT / VT CREDENTIALS — theme-sensitive
   ============================================================= */
#about { background:var(--bg-warm); transition:background .3s; }
.about-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,400px),1fr));
  gap:clamp(40px,6vw,96px); align-items:start;
}
.about-photo-wrap { position:relative; }
.about-frame {
  border-radius:8px; overflow:hidden;
  aspect-ratio:3/4; box-shadow:var(--sh-md);
  /* Chrome GPU compositing fix */
  isolation:isolate; transform:translateZ(0);
  transition:box-shadow .3s;
}
.about-frame img {
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform 9s ease;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.about-frame:hover img { transform:scale(1.04); }
/* VT badge floats off corner of photo */
.about-badge {
  position:absolute; bottom:clamp(16px,2.5vw,28px); right:-clamp(8px,2vw,20px);
  background:var(--badge-bg); border:1px solid var(--badge-bdr);
  padding:clamp(14px,1.8vw,18px) clamp(16px,2vw,22px);
  border-radius:var(--r); box-shadow:var(--sh-md); z-index:2;
  display:flex; align-items:center; gap:12px;
  transition:background .3s, border-color .3s;
}
.vt-badge-logo { height:clamp(16px,1.8vw,20px); width:auto; display:block; flex-shrink:0; }
/* Invert VT badge logo for dark mode */
[data-theme="dark"]  .vt-badge-logo { filter:brightness(0) invert(1); opacity:.75; }
[data-theme="light"] .vt-badge-logo { filter:none; opacity:1; }
.about-badge-text strong { display:block; font-size:clamp(.78rem,.82vw,.86rem); font-weight:700; color:var(--maroon); }
.about-badge-text span   { font-size:clamp(.66rem,.7vw,.72rem); color:var(--fg-mid); display:block; margin-top:1px; transition:color .3s; }

/* Expertise pillars */
.pillars {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr));
  gap:1px; background:var(--bdr); margin-top:clamp(28px,3.5vw,40px);
  transition:background .3s;
}
.pillar { background:var(--bg-warm); padding:clamp(28px,3.5vw,40px) clamp(22px,2.5vw,28px); transition:background .3s; }
.pillar:hover { background:var(--orange); }
.p-n  { font-family:var(--serif); font-size:2.4rem; color:var(--bdr); line-height:1; margin-bottom:18px; transition:color .3s; }
.p-t  { font-weight:700; font-size:clamp(.84rem,.9vw,.9rem); margin-bottom:10px; color:var(--fg); transition:color .3s; }
.p-d  { font-size:clamp(.77rem,.82vw,.82rem); color:var(--fg-body); line-height:1.72; transition:color .3s; }
.pillar:hover .p-n  { color:rgba(255,255,255,.12); }
.pillar:hover .p-t  { color:#fff; }
.pillar:hover .p-d  { color:rgba(255,255,255,.75); }
/* expertise intro text */
.expertise-intro { max-width:560px; margin-bottom:clamp(40px,5vw,60px); }

/* =============================================================
   IN THE FIELD — permanently dark
   ============================================================= */
#field { background:#1c1917; padding:clamp(56px,6vw,80px) 0; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.field-col  { display:flex; flex-direction:column; gap:2px; }
.field-col-hd {
  padding:clamp(16px,2vw,22px) clamp(18px,2.5vw,26px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.field-col-hd.hc { background:rgba(229,117,31,0.15); }
.field-col-hd.st { background:rgba(229,117,31,.12); }
.field-col-hd h4 { font-family:var(--serif); font-size:clamp(.95rem,1.2vw,1.1rem); color:#fff; margin-bottom:3px; }
/* CONTRAST FIX: raised from .35 → .68 */
.field-col-hd p  { font-size:clamp(.7rem,.75vw,.76rem); color:rgba(255,255,255,.68); line-height:1.5; }
.fi { position:relative; overflow:hidden; }
.fi.tall  { aspect-ratio:4/3; }
.fi.short { aspect-ratio:16/9; }
.fi.pair  { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.fi img {
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) brightness(.76);
  transition:filter .5s, transform 9s ease;
}
.fi:hover img { filter:saturate(1) brightness(1); transform:scale(1.04); }
figcaption.fcap {
  position:absolute; bottom:0; left:0; right:0; padding:12px 14px;
  background:linear-gradient(to top, rgba(28,25,23,.9) 0%, transparent 100%);
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.88); opacity:0; transition:opacity .3s;
}
.fi:hover figcaption.fcap { opacity:1; }

/* =============================================================
   SPEAKING / MEDIA — permanently dark
   ============================================================= */
#speaking { position:relative; overflow:hidden; background:#1c1917; }
.sp-layout {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,420px),1fr));
  gap:0;
}
.sp-content {
  /* Left padding matches .wrap gutter so text is never flush with viewport edge.
     Right padding is the gap between the content column and the photo.
     Max-width prevents text from sprawling too wide on very wide screens. */
  padding: clamp(60px,7vw,100px) clamp(24px,4vw,60px) clamp(60px,7vw,100px) clamp(20px,5vw,48px);
  max-width: 640px;
}
.sp-content h2 { color:#fff; }
.sp-content .eyebrow-lt { margin-bottom:18px; }
/* CONTRAST FIX: raised from .56 → .80 */
.sp-content > p { color:rgba(255,255,255,.80); font-size:clamp(.88rem,1vw,.96rem); line-height:1.9; margin-bottom:18px; }
.sp-content > p a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.stabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.stab {
  padding:6px 13px; border-radius:20px;
  font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  /* CONTRAST FIX: raised from .42 → .75 */
  color:rgba(255,255,255,.75); cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.stab.on, .stab:hover { background:var(--orange-btn); border-color:var(--orange-btn); color:#fff; }
.events { display:flex; flex-direction:column; gap:9px; }
.ev {
  display:flex; align-items:center; gap:13px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r); padding:12px 15px;
  transition:background .2s, border-color .2s;
}
.ev:hover { background:rgba(255,255,255,.13); border-color:rgba(229,117,31,0.45); }
.ev-ico  { width:34px; height:34px; border-radius:var(--r); background:var(--orange); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
.ev-name { font-weight:700; color:#fff; font-size:clamp(.8rem,.86vw,.85rem); }
/* CONTRAST FIX: raised from .38 → .68 */
.ev-det  { font-size:.7rem; color:rgba(255,255,255,.68); margin-top:2px; }
.ev-badge {
  margin-left:auto; flex-shrink:0;
  font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:10px;
  /* FIX: was var(--orange) text on maroon bg — now light pink on maroon */
  background:rgba(229,117,31,0.26); color:#ffbbbb; border:1px solid rgba(229,117,31,0.45);
}
.sp-photo { position:relative; overflow:hidden; min-height:clamp(300px,40vw,600px); }
.sp-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; filter:saturate(.75) brightness(.65); }
.sp-photo-overlay { position:absolute; inset:0; background:linear-gradient(to left, transparent 40%, rgba(28,25,23,.7) 100%); }
.sp-photo figcaption {
  position:absolute; bottom:clamp(16px,3vw,28px); right:clamp(16px,3vw,24px);
  background:rgba(28,25,23,.92); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); padding:11px 15px; max-width:200px;
}
.sp-photo figcaption .cl { font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin-bottom:3px; }
/* CONTRAST FIX: raised from .6 → .82 */
.sp-photo figcaption .ct { font-size:.73rem; color:rgba(255,255,255,.82); line-height:1.45; }

/* =============================================================
   GALLERY — permanently dark
   ============================================================= */
#gallery { background:#1c1917; overflow:hidden; padding-bottom: clamp(44px,5vw,64px); }
.gal-hd { padding:clamp(44px,5vw,60px) 0 clamp(24px,3vw,32px); }
.gal-g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.gal-g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:2px; }
.gal-item { position:relative; overflow:hidden; }
.gal-item.port { aspect-ratio:3/4; }
.gal-item.land { aspect-ratio:16/9; }
.gal-item img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:saturate(.6) brightness(.72);
  transition:filter .5s, transform .5s;
}
.gal-item.land img { object-position:center center; }
.gal-item:hover img { filter:saturate(1) brightness(1); transform:scale(1.05); }
.gal-cap {
  position:absolute; bottom:0; left:0; right:0; padding:12px 14px;
  background:linear-gradient(to top, rgba(28,25,23,.82) 0%, transparent 100%);
  opacity:0; transition:opacity .3s;
}
.gal-item:hover .gal-cap { opacity:1; }
.gal-cap .gc { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; }
.gal-cap .gs { font-size:.62rem; color:rgba(255,255,255,.65); margin-top:2px; }

/* =============================================================
   COMMUNITY — theme-sensitive
   ============================================================= */
#community { background:var(--bg); transition:background .3s; }
.community-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,380px),1fr));
  gap:clamp(40px,6vw,90px); align-items:center;
}
.bq {
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.2vw,2rem);
  line-height:1.48; color:var(--fg); margin-bottom:22px; transition:color .3s;
}
.bq::before {
  content:"\201C"; display:block;
  font-size:clamp(4rem,6vw,5.5rem); line-height:.5;
  color:var(--orange); opacity:.3; margin-bottom:16px;
}
/* Community body text (was hardcoded var(--mid) inline) */
.comm-body { font-size:clamp(.88rem,1vw,.96rem); line-height:1.9; color:var(--fg-body); transition:color .3s; }
/* Stats card — always dark orange */
.sc { background:var(--orange-dk); border-radius:var(--r); padding:clamp(32px,4vw,44px); position:relative; overflow:hidden; }
.sc-glow { position:absolute; bottom:-50px; right:-50px; width:200px; height:200px; border-radius:50%; background:var(--orange); opacity:.12; pointer-events:none; }
.sc-t  { font-family:var(--serif); font-size:clamp(1.1rem,1.3vw,1.25rem); color:#fff; margin-bottom:4px; position:relative; z-index:1; }
/* CONTRAST FIX: raised from .35 → .65 */
.sc-s  { font-size:.73rem; color:rgba(255,255,255,.65); margin-bottom:clamp(24px,3vw,32px); position:relative; z-index:1; }
.sr    { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.14); position:relative; z-index:1; }
.sr:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.sv   { font-family:var(--serif); font-size:clamp(2rem,2.5vw,2.5rem); color:var(--orange); line-height:1; margin-bottom:3px; font-weight:700; }
/* CONTRAST FIX: raised from .4 → .68 */
.sd   { font-size:.76rem; color:rgba(255,255,255,.68); }

/* =============================================================
   CONTACT — permanently dark
   ============================================================= */
#contact { background:#1c1917; padding:clamp(72px,8vw,130px) 0 clamp(56px,6vw,80px); }
.contact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,380px),1fr));
  gap:clamp(44px,6vw,80px); align-items:start;
}
.ct h2 { color:#fff; }
/* CONTRAST FIX: raised from .48 → .78 */
.ct > p { color:rgba(255,255,255,.78); font-size:clamp(.88rem,1vw,.96rem); line-height:1.9; margin-bottom:clamp(24px,3vw,34px); }
.c-links { display:flex; flex-direction:column; gap:9px; }
.c-link {
  display:flex; align-items:center; gap:14px; padding:13px 18px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); color:rgba(255,255,255,.88); font-size:clamp(.82rem,.88vw,.88rem); font-weight:500;
  transition:background .2s, border-color .2s, transform .2s;
}
.c-link:hover { background:rgba(255,255,255,.13); border-color:var(--orange); color:#fff; transform:translateX(5px); }
.c-ico { width:34px; height:34px; border-radius:var(--r); background:var(--orange); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
.li-wrap { margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); }
/* CONTRAST FIX: raised from .28 → .58 */
.li-lbl  { font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.58); margin-bottom:12px; }

/* =============================================================
   FOOTER — permanently dark
   ============================================================= */
footer { background:#1c1917; border-top:1px solid rgba(255,255,255,.08); }
.ft-in {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(20px,3vw,32px); flex-wrap:wrap;
  padding:clamp(28px,4vw,44px) 0 clamp(20px,3vw,30px);
}
.ft-logo { font-family:var(--serif); font-size:clamp(.92rem,1vw,1.05rem); font-weight:700; color:rgba(255,255,255,.55); }
.ft-logo span { color:var(--orange); }
/* CONTRAST FIX: raised from .25 → .48 */
.ft-tagline { font-size:.68rem; color:rgba(255,255,255,.48); margin-top:4px; letter-spacing:.03em; }
.ft-links { display:flex; gap:clamp(14px,2vw,22px); flex-wrap:wrap; }
/* CONTRAST FIX: raised from .25 → .55 */
.ft-links a { font-size:.72rem; color:rgba(255,255,255,.55); letter-spacing:.03em; transition:color .2s; }
.ft-links a:hover { color:rgba(255,255,255,.88); }
.ft-ext-links { display:flex; flex-direction:column; gap:6px; }
/* CONTRAST FIX: raised from .25 → .55 */
.ft-ext-links a { font-size:.72rem; color:rgba(255,255,255,.55); letter-spacing:.03em; transition:color .2s; }
.ft-ext-links a:hover { color:rgba(255,255,255,.88); }
.ft-vt { display:flex; flex-direction:column; align-items:flex-end; gap:6px; font-size:.68rem; color:rgba(255,255,255,.42); letter-spacing:.03em; }
.vt-footer-logo { height:clamp(14px,1.6vw,18px); width:auto; display:block; opacity:.45; filter:brightness(0) invert(1); }
/* Copyright bar */
.ft-bar { border-top:1px solid rgba(255,255,255,.08); padding:clamp(12px,1.5vw,16px) 0; margin-top:clamp(22px,3vw,30px); }
.ft-bar-in {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px;
  /* CONTRAST FIX: raised from .2 → .48 */
  font-size:.65rem; color:rgba(255,255,255,.48); letter-spacing:.02em;
}
/* CONTRAST FIX: raised from .28 → .60 */
.ft-bar-in a { color:rgba(255,255,255,.60); text-decoration:none; transition:color .2s; }
.ft-bar-in a:hover { color:rgba(255,255,255,.88); }
.ft-bar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:900px) {
  #hero { grid-template-columns:1fr; text-align:center; padding-top:clamp(100px,14vw,130px); }
  .hero-pre { justify-content:center; }
  .hero-sub  { margin-left:auto; margin-right:auto; }
  .hero-btns { justify-content:center; }
  .vt-strip  { margin-left:auto; margin-right:auto; }
  .hero-photo { order:-1; max-width:clamp(200px,55vw,300px); margin:0 auto; }
  .hero-photo::before, .hero-photo::after { display:none; }
  .chip-b { right:-8px; } .chip-t { left:-8px; }
  .field-grid { grid-template-columns:1fr; }
  .gal-g4 { grid-template-columns:repeat(2,1fr); }
  .gal-g3 { grid-template-columns:repeat(2,1fr); }
  .ham    { display:flex; }
  .nav-links { display:none; }
  .sp-content { padding: clamp(44px,5vw,60px) clamp(20px,5vw,48px); max-width: 100%; }
}
@media (max-width:560px) {
  .wrap { padding:0 clamp(16px,5vw,24px); }
  .frow { grid-template-columns:1fr; }
  .gal-g4, .gal-g3 { grid-template-columns:repeat(2,1fr); }
  .fi.pair { grid-template-columns:1fr; }
  .ep-grid { grid-template-columns:1fr; }
  .tl-stats { gap:16px; }
}

/* =============================================================
   IMAGE BLUR-UP PLACEHOLDER SYSTEM
   ============================================================= */
.img-wrap {
  position: relative; overflow: hidden;
  background: #2c2725;   /* dark warm placeholder */
  border-radius: inherit;
  /* height:100% makes the wrapper fill its aspect-ratio container so
     object-fit:cover on the img crops correctly — fixes blank strips   */
  height: 100%;
  display: block;
}
[data-theme="light"] .img-wrap { background: #d6cfc7; }
.img-wrap img {
  opacity: 0; transition: opacity .45s ease;
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.img-wrap img.loaded { opacity: 1; }
.img-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  background-size: 200% 100%; animation: shimmer 1.6s infinite;
  pointer-events: none; transition: opacity .3s;
}
/* In light mode swap the shimmer highlight to a dark wave */
[data-theme="light"] .img-wrap::after {
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 50%, transparent 100%);
  background-size: 200% 100%;
}
.img-wrap.done::after { opacity: 0; animation: none; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* =============================================================
   FORMSPREE CONTACT FORM — VT dark theme
   Scoped so fs-* rules don't bleed into page
   ============================================================= */
#contact .fs-form { display:grid; row-gap:1.125rem; }
#contact .fs-field { display:flex; flex-direction:column; row-gap:.375rem; }
#contact .fs-label {
  /* CONTRAST FIX: raised from .38 → .65 */
  color:rgba(255,255,255,.65);
  display:block; font-family:var(--sans);
  font-size:.625rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.25rem;
}
#contact .fs-input,
#contact .fs-textarea {
  appearance:none; border-radius:var(--r);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  box-shadow:none; color:#fff; font-family:var(--sans);
  font-size:clamp(.85rem,.9vw,.9rem); outline:none;
  padding:11px 14px; width:100%;
  transition:border-color .2s, background .2s;
}
#contact .fs-input:focus-visible,
#contact .fs-textarea:focus-visible {
  border-color:var(--orange);
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(229,117,31,.2);
  outline:none;
}
#contact .fs-input::placeholder,
#contact .fs-textarea::placeholder { color:rgba(255,255,255,.32); }
#contact .fs-input { height:2.625rem; line-height:1.5rem; }
#contact .fs-textarea { resize:vertical; min-height:128px; line-height:1.6; }
#contact .fs-button-group { display:flex; column-gap:1rem; margin-top:.375rem; }
#contact .fs-button {
  background-color:var(--orange-btn); border-radius:var(--r); color:#fff;
  cursor:pointer; font-family:var(--sans);
  font-size:clamp(.76rem,.8vw,.82rem); font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  line-height:1rem; padding:13px 28px; border:none;
  transition:transform .22s var(--ease), box-shadow .22s, background-color .2s;
}
#contact .fs-button:hover { background-color:var(--orange-dk); transform:translateY(-3px); box-shadow:0 10px 28px rgba(229,117,31,0.45); }
#contact .fs-button:focus-visible { background-color:var(--orange-dk); outline:3px solid var(--orange); outline-offset:2px; }
#contact .fs-button:disabled { opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
#contact .fs-button.sending { opacity:.7; cursor:wait; }
/* CONTRAST FIX: raised from .22 → .50 */
.fnote { font-size:.72rem; line-height:1.5; margin-top:4px; color:rgba(255,255,255,.50); min-height:1.2em; }
.fnote.ok  { color:#4ade80 !important; }
.fnote.err { color:#f87171 !important; }

/* =============================================================
   LIGHTBOX
   Triggered by any img with data-lb-title attribute.
   Full-screen overlay: dark scrim + centered image + caption + CTA.
   ============================================================= */

/* Images that have a lightbox get a pointer and subtle cue */
[data-lb-title] { cursor:zoom-in; }

/* Overlay wrapper */
.lb {
  position:fixed; inset:0; z-index:900;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
  padding:clamp(16px,3vw,40px);
}
.lb.lb-open { opacity:1; pointer-events:auto; }

/* Dark scrim — click closes */
.lb-scrim {
  position:absolute; inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  cursor:zoom-out;
}

/* Content box */
.lb-box {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  max-width:min(900px,96vw); width:100%;
  max-height:92svh;
  background:#1a1714; border-radius:8px;
  box-shadow:0 32px 100px rgba(0,0,0,.7);
  overflow:hidden;
  transform:scale(.94) translateY(18px);
  transition:transform .35s cubic-bezier(.22,.68,0,1.2);
}
.lb.lb-open .lb-box { transform:scale(1) translateY(0); }

/* Image area */
.lb-img-area {
  position:relative; overflow:hidden;
  background:#111;
  /* aspect-ratio handled by the image's natural dimensions */
  max-height:62svh;
  display:flex; align-items:center; justify-content:center;
}
.lb-img-area img {
  display:block; width:100%;
  max-height:62svh;
  object-fit:contain;
  /* no filter — show at full fidelity in lightbox */
}

/* Caption + CTA panel */
.lb-info {
  padding:clamp(18px,2.5vw,28px) clamp(20px,3vw,32px);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; gap:10px;
  background:#1a1714;
}
.lb-title {
  font-family:var(--serif); font-size:clamp(1rem,1.4vw,1.25rem);
  color:#fff; font-weight:700; line-height:1.2;
}
.lb-desc {
  font-size:clamp(.82rem,.9vw,.9rem);
  color:rgba(255,255,255,.72);
  line-height:1.78;
}
.lb-footer {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-top:4px;
}
.lb-cta {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 20px; border-radius:var(--r);
  background:var(--orange-btn); color:#fff;
  font-family:var(--sans); font-size:clamp(.72rem,.78vw,.78rem);
  font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  transition:background .2s, transform .2s, box-shadow .2s;
  white-space:nowrap; cursor:pointer; border:none; text-decoration:none;
}
.lb-cta:hover { background:var(--orange-dk); transform:translateY(-2px); box-shadow:0 8px 24px rgba(229,117,31,0.4); }
.lb-cta.st { background:var(--orange); }
.lb-cta.st:hover { background:var(--orange-lt); box-shadow:0 8px 24px rgba(229,117,31,.45); }

/* Close button */
.lb-close {
  position:absolute; top:12px; right:12px; z-index:10;
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.82); font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, color .2s;
  line-height:1;
}
.lb-close:hover { background:var(--orange); color:#fff; border-color:var(--orange); }
.lb-close:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }

/* Image count hint (1 of N) — removed; single-image lightbox only */

@media (max-width:560px) {
  .lb-box { border-radius:6px 6px 0 0; position:fixed; bottom:0; left:0; right:0; max-width:100%; transform:translateY(40px); }
  .lb.lb-open .lb-box { transform:translateY(0); }
  .lb-img-area { max-height:48svh; }
  .lb-img-area img { max-height:48svh; }
}

/* =============================================================
   COMPANY LOGOS
   All logo placements are in permanently-dark sections.
   Transparent PNGs render directly against dark bg.
   ============================================================= */

/* ── Venture card logos ──────────────────────────────────────
   Sit between .v-role and .v-name. On dark #1c1917 bg.        */
.v-logo-wrap {
  margin:clamp(10px,1.2vw,14px) 0 clamp(8px,1vw,12px);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.v-logo {
  height:clamp(24px,2.4vw,32px); width:auto;
  display:block; object-fit:contain;
  opacity:.88;
  transition:opacity .25s;
}
.v-logo-sm {
  height:clamp(16px,1.6vw,22px);
  opacity:.72;
}
.v-card:hover .v-logo  { opacity:1; }
.v-card:hover .v-logo-sm { opacity:.88; }

/* Screen-reader-only: keep v-name for SEO/a11y but hide visually
   since the logo already communicates the brand name             */
.v-name-sr {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; pointer-events:none;
}

/* ── Field column header logos ───────────────────────────────
   Sit above h4 inside .field-col-hd                            */
.field-logos {
  display:flex; align-items:center; gap:clamp(10px,1.5vw,16px);
  flex-wrap:wrap;
  margin-bottom:clamp(10px,1.2vw,14px);
}
.field-logo {
  height:clamp(20px,2vw,26px); width:auto;
  display:block; object-fit:contain;
  opacity:.82; transition:opacity .2s;
}
.field-logo-nt { height:clamp(14px,1.4vw,18px); opacity:.68; }
.field-col:hover .field-logo  { opacity:1; }
.field-col:hover .field-logo-nt { opacity:.88; }

/* ── Footer — Machut Inc wordmark logo ───────────────────────
   Replaces the text "Chris Machut." in the footer top row.     */
.ft-logo-img-wrap {
  display:inline-block; line-height:0;
}
.ft-machut-logo {
  height:clamp(28px,2.8vw,38px); width:auto;
  display:block; object-fit:contain;
  opacity:.62; transition:opacity .2s;
  /* If logo is dark-on-transparent, uncomment to invert for dark bg:
     filter:brightness(0) invert(1); */
}
.ft-logo-img-wrap:hover .ft-machut-logo { opacity:.9; }

/* ── Footer — company brand logo strip ───────────────────────
   Linked logos: SiteTrax · HoistCam · Netarus               */
.ft-brand-logos {
  display:flex; align-items:center; gap:clamp(14px,2vw,22px);
  flex-wrap:wrap;
  margin-bottom:clamp(12px,1.5vw,16px);
  padding-bottom:clamp(12px,1.5vw,16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ft-brand-logos a {
  display:flex; align-items:center; line-height:0;
}
.ft-brand-logo {
  height:clamp(18px,1.8vw,24px); width:auto;
  display:block; object-fit:contain;
  opacity:.45; transition:opacity .2s;
}
.ft-brand-logo-nt {
  height:clamp(13px,1.3vw,17px);
  opacity:.38;
}
.ft-brand-logos a:hover .ft-brand-logo    { opacity:.82; }
.ft-brand-logos a:hover .ft-brand-logo-nt { opacity:.75; }

/* =============================================================
   LIGHT MODE — ORANGE CONTRAST OVERRIDES
   #E5751F on light bg = 2.85:1 (fails WCAG AA).
   Override text/border uses to #8f3e0d (6.86:1 on #f9f7f4).
   Dark sections are unaffected — they always have dark bg.
   ============================================================= */

/* Eyebrows (appear in hero, story, about, community — all light-sensitive) */
[data-theme="light"] .eyebrow               { color: #8f3e0d; }
[data-theme="light"] .eyebrow::before       { background: #8f3e0d; }

/* Section heading italic emphasis */
[data-theme="light"] .sh em                 { color: #8f3e0d; }

/* Hero section */
[data-theme="light"] .hero-pre              { color: #8f3e0d; }
[data-theme="light"] .hero-pre::before      { background: #8f3e0d; }
[data-theme="light"] .hero-h1 em            { color: #8f3e0d; }
[data-theme="light"] .hero-btns .btn-primary { background: #8f3e0d; box-shadow: 0 4px 18px rgba(143,62,13,.3); }
[data-theme="light"] .hero-btns .btn-primary:hover { background: #7a3610; }

/* Nav */
[data-theme="light"] .nav-logo .dot         { color: #8f3e0d; }
[data-theme="light"] .nav-logo .vt          { color: #8f3e0d; }
[data-theme="light"] .nav-cta               { background: #8f3e0d !important; box-shadow: 0 2px 10px rgba(143,62,13,.28); }
[data-theme="light"] .nav-cta:hover         { background: #7a3610 !important; }
[data-theme="light"] .theme-btn:focus-visible { outline-color: #8f3e0d; }

/* Chip stats (hero area, light-sensitive) */
[data-theme="light"] .chip .val             { color: #8f3e0d; }
[data-theme="light"] .chip-frame            { border-top-color: #8f3e0d; border-right-color: #8f3e0d; }

/* Tags (hero area) */
[data-theme="light"] .tag:hover             { background: #8f3e0d; border-color: #8f3e0d; }

/* VT credential strip */
[data-theme="light"] .vt-strip             { background: rgba(143,62,13,.07); border-color: rgba(143,62,13,.18); }

/* Story / About (theme-sensitive) */
[data-theme="light"] .v-role               { color: #8f3e0d; }
[data-theme="light"] .v-link               { color: #8f3e0d; }

/* Mobile menu hover */
[data-theme="light"] .mob a:hover          { color: #8f3e0d; }

/* ── Award / recognition pills (about section — theme-sensitive) ── */
.award-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(229,117,31,.08);
  border: 1px solid rgba(229,117,31,.18);
  border-radius: 4px;
  font-size: .72rem; font-weight: 700;
  color: var(--orange);
  transition: color .3s, background .3s, border-color .3s;
}
[data-theme="light"] .award-pill {
  color: #8f3e0d;
  background: rgba(143,62,13,.07);
  border-color: rgba(143,62,13,.2);
}

/* =============================================================
   TAG / PILL POPOVER
   Subtle context card that appears on click.
   Positioned above the trigger by default; flips below if
   too close to the top of the viewport.
   ============================================================= */
[data-pop] { cursor: pointer; }
[data-pop]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.pop {
  position: fixed;
  z-index: 600;
  max-width: min(320px, calc(100vw - 32px));
  background: #1a1714;
  border: 1px solid rgba(229,117,31,.28);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(229,117,31,.08);
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.pop.pop-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Arrow */
.pop::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
}
.pop.pop-above::before {
  bottom: -13px;
  border-top-color: #1a1714;
}
.pop.pop-below::before {
  top: -13px;
  border-bottom-color: #1a1714;
}
/* Light mode: light card */
[data-theme="light"] .pop {
  background: #fff;
  border-color: rgba(143,62,13,.22);
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(143,62,13,.07);
  color: #374151;
}
[data-theme="light"] .pop.pop-above::before { border-top-color: #fff; }
[data-theme="light"] .pop.pop-below::before { border-bottom-color: #fff; }