:root {
  --bg: #05060a;
  --bg-deep: #020307;
  --panel: rgba(17, 20, 29, 0.72);
  --panel-strong: rgba(22, 25, 36, 0.88);
  --text: #f5f3ee;
  --muted: #b7bac4;
  --dim: #737989;
  --purple-900: #140c22;
  --purple-800: #211334;
  --purple-700: #31204a;
  --purple-600: #4a3174;
  --purple-500: #7053b9;
  --green: #a9ef8f;
  --green-soft: #75c96d;
  --green-dim: rgba(169, 239, 143, 0.18);
  --line: rgba(255, 255, 255, 0.095);
  --line-purple: rgba(134, 97, 210, 0.38);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shell: min(1510px, calc(100vw - 72px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }


body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #040509 0%, #080a10 54%, #040509 100%);
  line-height: 1.55;
  overflow-x: hidden;
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.site-bg__wash,
.site-bg__grid,
.site-bg__noise {
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.site-bg__image {
  position: absolute;
  left: -3vw;
  top: 42px;
  width: min(64vw, 980px);
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: .42;
  filter: grayscale(1) saturate(0) brightness(.72) contrast(1.08);
  transform: scale(1.02);
}
.site-bg__wash {
  background:
    linear-gradient(90deg, rgba(4,5,9,.16) 0%, rgba(4,5,9,.32) 31%, rgba(4,5,9,.74) 66%, rgba(4,5,9,.95) 100%),
    linear-gradient(180deg, rgba(4,5,9,.28) 0%, rgba(4,5,9,.42) 44%, rgba(4,5,9,.64) 62%, rgba(4,5,9,.92) 100%),
    radial-gradient(circle at 8% 28%, rgba(92, 61, 143, 0.09), transparent 17rem),
    radial-gradient(circle at 72% 18%, rgba(92, 61, 143, 0.22), transparent 18rem),
    radial-gradient(circle at 86% 80%, rgba(169, 239, 143, 0.035), transparent 22rem);
}
.site-bg__grid {
  opacity: .075;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 76px 76px;
}
.site-bg__noise {
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

body > *:not(.site-bg) {
  position: relative;
  z-index: 1;
}

body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: rgba(169, 239, 143, .35); color: var(--text); }

.page-shell { width: var(--shell); margin: 0 auto; }
.section-pad { padding: 82px 0 44px; }
.section-pad-sm { padding: 16px 0; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  background: var(--green);
  color: #071008;
  padding: 10px 14px;
  border-radius: 999px;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(3,4,8,.72);
  backdrop-filter: blur(20px);
}
.site-header.is-scrolled { background: rgba(3,4,8,.92); border-color: rgba(134, 97, 210, .26); }
.nav-shell { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: max-content; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(169,239,143,.42);
  border-left-color: rgba(134,97,210,.72);
  border-bottom-color: rgba(134,97,210,.58);
  border-radius: 10px;
  color: #f7f4ff;
  font-weight: 800;
  letter-spacing: -0.08em;
  background:
    linear-gradient(135deg, rgba(112,83,185,.30), rgba(169,239,143,.07)),
    rgba(255,255,255,.03);
  box-shadow: 0 0 28px rgba(112,83,185,.18), inset 0 1px 0 rgba(255,255,255,.14);
}
.brand-text { display: grid; line-height: 1.05; }
.brand-text strong { text-transform: uppercase; letter-spacing: .24em; font-size: .86rem; }
.brand-text small { color: var(--green); letter-spacing: .34em; text-transform: uppercase; font-weight: 700; font-size: .62rem; }
.site-nav { display: flex; align-items: center; gap: 42px; }
.site-nav a { position: relative; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .19em; padding: 24px 0; transition: color 160ms ease; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 17px; height: 2px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--green), transparent); transition: transform 180ms ease; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-active { color: var(--text); }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.is-active::after { transform: scaleX(1); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); color: var(--text); padding: 10px; }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; background: currentColor; border-radius: 999px; margin: 5px 0; }

.hero { position: relative; overflow: hidden; min-height: 480px; }
.ambient { position: absolute; pointer-events: none; filter: blur(2px); opacity: .95; }
.ambient-left { width: 22rem; height: 34rem; left: -14rem; top: 6rem; background: radial-gradient(ellipse, rgba(92,61,143,.55), transparent 63%); }
.ambient-right { width: 30rem; height: 24rem; right: 5%; top: 4rem; background: radial-gradient(ellipse, rgba(92,61,143,.42), transparent 65%); }
.hero-grid { position: relative; display: grid; grid-template-columns: .84fr 1.08fr; gap: clamp(48px, 8vw, 118px); align-items: center; }
.hero-copy { padding-left: min(9vw, 125px); }
.eyebrow { margin: 0 0 16px; color: #c6a9ff; text-transform: uppercase; letter-spacing: .26em; font-weight: 800; font-size: .75rem; }
.eyebrow span { display: inline-block; width: 5px; height: 5px; margin: 0 11px 2px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.eyebrow.compact { color: var(--green); font-size: .68rem; margin-bottom: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0 0 18px; font-size: clamp(4.2rem, 7.8vw, 7.7rem); line-height: .79; letter-spacing: -.075em; text-shadow: 0 8px 24px rgba(0,0,0,.34); }
.hero-rule { width: 118px; height: 2px; margin: 0 0 12px; background: linear-gradient(90deg, var(--green), transparent); }
.hero-lede { max-width: 520px; color: #c3c2cb; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.42; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 13px 26px; border-radius: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; border: 1px solid transparent; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn-primary { color: var(--text); border-color: rgba(134,97,210,.42); background: linear-gradient(135deg, rgba(112,83,185,.74), rgba(45,34,68,.86)); box-shadow: 0 18px 46px rgba(92,61,143,.22), inset 0 1px 0 rgba(255,255,255,.11); }
.btn-primary:hover { border-color: rgba(169,239,143,.38); box-shadow: 0 18px 54px rgba(112,83,185,.32); }
.btn-secondary { color: #e7e0f4; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.035); }
.btn-secondary span, .btn-primary span, .link-button span { color: var(--green); }
.btn[aria-disabled="true"] { opacity: .75; cursor: not-allowed; }
.status-pill { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; color: #acadb8; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 22px rgba(255,255,255,.02); font-size: .8rem; text-transform: uppercase; letter-spacing: .13em; }
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: var(--green); box-shadow: 0 0 14px var(--green); }
.pulse-dot::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(169,239,143,.55); border-radius: inherit; animation: pulse 1.8s infinite; }
@keyframes pulse { from { transform: scale(.65); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }

.featured-player { border-radius: 17px; padding: 10px; border: 1px solid var(--line-purple); background: linear-gradient(135deg, rgba(112,83,185,.18), rgba(255,255,255,.035)); box-shadow: 0 22px 90px rgba(0,0,0,.46), 0 0 70px rgba(92,61,143,.16); }
.featured-media { position: relative; min-height: 360px; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,.075); background:
  linear-gradient(90deg, rgba(5,6,10,.96) 0%, rgba(7,8,13,.72) 47%, rgba(7,8,13,.28) 100%),
  radial-gradient(circle at 70% 20%, rgba(126,78,195,.58), transparent 18rem),
  linear-gradient(135deg, #0a0b10, #171425);
}
.featured-media::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 280 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.28'%3E%3Cpath d='M220 24v112M204 42v76M236 42v76M188 60v42M252 60v42' stroke-width='7' stroke-linecap='round'/%3E%3Crect x='195' y='16' width='50' height='116' rx='24' stroke-width='5'/%3E%3Cpath d='M174 82c-30 7-45 25-46 52M184 142h72M160 74c11-18 30-28 57-29' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 50% 70%; background-position: 88% 44%; }
.featured-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 69%, rgba(3,4,8,.82) 100%); }
.featured-copy { position: relative; z-index: 2; max-width: 480px; padding: 86px 44px 118px; }
.featured-copy h2 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1; margin: 0 0 12px; letter-spacing: -.045em; }
.featured-copy p:not(.eyebrow) { color: #c6c5cf; max-width: 380px; }
.preview-btn { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; min-width: 176px; height: 40px; padding: 0 22px; border-radius: 6px; color: #e9e7ef; border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.025); text-transform: uppercase; letter-spacing: .18em; font-weight: 800; font-size: .68rem; cursor: pointer; transition: border-color 160ms ease, transform 160ms ease, background 160ms ease; }
.preview-btn span { color: var(--green); }
.preview-btn:hover { transform: translateY(-2px); border-color: rgba(169,239,143,.38); background: rgba(169,239,143,.05); }
.audio-strip { position: absolute; z-index: 3; left: 30px; right: 30px; bottom: 24px; display: grid; grid-template-columns: 20px 1fr auto; gap: 16px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.07); }
.play-mini { color: white; font-size: .72rem; }
.waveform { height: 28px; display: flex; align-items: end; gap: 4px; overflow: hidden; }
.waveform i { width: 3px; height: 9px; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, var(--purple-500), rgba(169,239,143,.55)); opacity: .82; }
.waveform i:nth-child(3n) { height: 18px; } .waveform i:nth-child(4n) { height: 24px; } .waveform i:nth-child(5n) { height: 13px; }
.timecode { color: #bbb7c8; font-size: .72rem; letter-spacing: .12em; }

.reels-section { position: relative; padding: 22px 0 12px; }
.reels-section::before {
  content: "";
  position: absolute;
  inset: -42px 0 -24px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,5,9,.26), rgba(4,5,9,.56) 46%, rgba(4,5,9,.80)),
    linear-gradient(180deg, rgba(4,5,9,.16), rgba(4,5,9,.54) 44%, rgba(4,5,9,.44));
}
.section-line { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.section-title-wrap { display: flex; align-items: center; gap: 12px; }
.green-line { width: 30px; height: 2px; background: linear-gradient(90deg, var(--green), transparent); }
.section-line h2 { margin: 0; font-size: .94rem; letter-spacing: .22em; text-transform: uppercase; }
.link-button { border: 0; background: transparent; color: #bbb6cb; text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; cursor: pointer; }
.filter-bar { display: none; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 16px; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display:none; }
.filter-btn { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--muted); padding: 8px 13px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; font-size: .65rem; cursor: pointer; }
.filter-btn.is-active, .filter-btn:hover { border-color: rgba(169,239,143,.46); color: var(--text); background: rgba(169,239,143,.08); }
.section-line, .filter-bar, .reel-rail { position: relative; z-index: 1; }
.reel-rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.reel-card { min-height: 158px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.reel-card:hover { transform: translateY(-4px); border-color: rgba(169,239,143,.38); background: rgba(255,255,255,.05); }
.reel-visual { position: relative; min-height: 84px; overflow: hidden; background: linear-gradient(135deg, rgba(112,83,185,.25), rgba(255,255,255,.04)); }
.reel-visual::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(4,5,9,.78) 100%); }
.reel-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; filter: saturate(.88) contrast(1.05); }
.placeholder-play { position: absolute; z-index: 3; inset: 0; margin: auto; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.75); border-radius: 999px; color: white; background: rgba(2,3,7,.34); backdrop-filter: blur(3px); cursor: pointer; display: grid; place-items: center; transition: transform 160ms ease, border-color 160ms ease, color 160ms ease; }
.placeholder-play:hover { transform: scale(1.06); color: var(--green); border-color: var(--green); }
.duration { position: absolute; right: 8px; bottom: 8px; z-index: 3; color: #d6d2de; font-size: .65rem; letter-spacing: .08em; }
.reel-body { padding: 11px 12px 13px; }
.reel-body::after { content:""; display:block; width: 33px; height: 2px; margin-top: 9px; background: linear-gradient(90deg, var(--green), transparent); }
.reel-body h3 { margin: 0 0 3px; font-size: .73rem; letter-spacing: .13em; text-transform: uppercase; line-height: 1.2; }
.reel-body p { margin: 0; color: #aaaab5; font-size: .68rem; line-height: 1.25; }
.card-kicker, .reel-tags { display: none; }
video, audio { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }

.about-card { display: grid; grid-template-columns: .9fr .9fr 1.06fr; min-height: 196px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); box-shadow: 0 18px 70px rgba(0,0,0,.26); }
.portrait-panel { position: relative; min-height: 196px; background:
  linear-gradient(90deg, rgba(4,5,9,.18), rgba(4,5,9,.72)),
  radial-gradient(circle at 70% 30%, rgba(112,83,185,.24), transparent 12rem),
  linear-gradient(135deg, #11131a, #08090d);
  border-right: 1px solid var(--line);
}
.portrait-panel::after { content:""; position:absolute; inset:0; opacity:.33; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.22'%3E%3Cpath d='M94 187c24-55 50-84 88-93 51-12 99 16 122 94' stroke-width='18' stroke-linecap='round'/%3E%3Ccircle cx='180' cy='70' r='44' stroke-width='18'/%3E%3Cpath d='M302 58v89M283 76v51M321 76v51M274 149h58' stroke-width='6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size: 100% 100%; }
.portrait-content { position: absolute; z-index:2; left: 28px; bottom: 24px; display:grid; gap:4px; color:#eee; }
.portrait-content span { font-weight:900; font-size:2rem; letter-spacing:-.08em; }
.portrait-content small { color:#8f93a0; text-transform:uppercase; letter-spacing:.12em; font-size:.62rem; }
.about-copy { padding: 28px 34px; border-right: 1px solid var(--line); }
.about-copy h2 { font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.08; margin: 0 0 14px; }
.about-copy p { color: #c0c1ca; font-size: .9rem; line-height: 1.56; }
.about-btn { margin-top: 4px; min-height: 38px; padding: 10px 20px; font-size: .64rem; }
.traits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; padding: 24px 32px; align-content: center; }
.trait-card { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; }
.trait-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--green); border: 1px solid var(--line); border-radius: 50%; background: rgba(169,239,143,.04); }
.trait-card h3 { margin: 0 0 5px; color: #cbb9fb; text-transform: uppercase; letter-spacing: .15em; font-size: .72rem; }
.trait-card p { margin: 0; color: #aaaeba; font-size: .78rem; line-height: 1.35; }

.resume-grid { display: grid; grid-template-columns: .58fr 1fr; gap: 28px; align-items: stretch; }
.section-heading { border: 1px solid var(--line); border-radius: 8px; padding: 30px; background: rgba(255,255,255,.025); }
.section-heading h2 { font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: .98; margin-bottom: 12px; }
.section-heading p { color: var(--muted); }
.resume-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.info-card { border: 1px solid var(--line); border-radius: 8px; padding: 26px; background: linear-gradient(135deg, rgba(112,83,185,.10), rgba(255,255,255,.025)); }
.info-card h3 { color: #d9ceff; text-transform: uppercase; letter-spacing: .13em; font-size: .8rem; }
.info-card p { color: var(--muted); font-size: .92rem; }
.resume-actions { margin-top: 22px; }
.btn-disabled { cursor: not-allowed; opacity: .62; }
.btn-disabled:hover { transform: none; border-color: var(--line-purple); color: var(--text); }

.cta-card { display: grid; grid-template-columns: 70px 1fr auto; gap: 26px; align-items: center; min-height: 70px; padding: 16px 28px; border: 1px solid rgba(134,97,210,.30); border-radius: 8px; background: linear-gradient(90deg, rgba(112,83,185,.18), rgba(18,20,30,.56), rgba(112,83,185,.12)); box-shadow: 0 20px 70px rgba(0,0,0,.25); }
.cta-icon { width: 46px; height: 46px; display:grid; place-items:center; border:1px solid var(--line-purple); border-radius:50%; color: var(--green); background: rgba(255,255,255,.035); }
.cta-card h2 { margin: 0; font-size: clamp(1.4rem, 2.3vw, 2.2rem); line-height: 1; }
.cta-card p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.5; }
.cta-actions { justify-self: end; }

.site-footer { padding: 28px 0 34px; color: var(--dim); border-top: 1px solid var(--line); }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand .brand-mark { width: 34px; height: 34px; border-radius: 8px; font-size: .78rem; }
.footer-brand .brand-text strong { font-size: .72rem; }
.footer-brand .brand-text small { font-size: .55rem; }
.version { color: #9b91b9; }

.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,3,7,.74); backdrop-filter: blur(10px); }
.modal-card { position: relative; width: min(520px, 100%); border: 1px solid var(--line-purple); border-radius: 18px; padding: 30px; background: linear-gradient(135deg, rgba(23,20,34,.98), rgba(7,8,13,.98)); box-shadow: var(--shadow); }
.modal-card h2 { font-size: 2rem; margin-bottom: 12px; }
.modal-card p { color: var(--muted); }
.modal-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: rgba(255,255,255,.05); cursor: pointer; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 520ms ease, transform 520ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }


@media (max-width: 1260px) {
  .site-bg__image {
    left: -8vw;
    top: 64px;
    width: min(78vw, 880px);
    opacity: .36;
    filter: grayscale(1) saturate(0) brightness(.68) contrast(1.08);
  }
:root { --shell: min(1120px, calc(100vw - 40px)); }
  .hero-copy { padding-left: 0; }
  .reel-rail { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .resume-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .about-card { grid-template-columns: 1fr; }
  .portrait-panel, .about-copy { border-right: 0; border-bottom: 1px solid var(--line); }
  .traits-grid { grid-template-columns: 1fr 1fr; }
}


@media (max-width: 980px) {
  .site-bg__image {
    left: 50%;
    top: 72px;
    width: min(112vw, 760px);
    opacity: .24;
    filter: grayscale(1) saturate(0) brightness(.62) contrast(1.08);
    transform: translateX(-50%) scale(1.02);
  }
.site-nav { position: fixed; top: 70px; left: 20px; right: 20px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(5,6,10,.96); box-shadow: var(--shadow); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px; }
  .nav-toggle { display: block; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .featured-media { min-height: 320px; }
  .reel-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filter-bar { display: flex; }
  .resume-grid { grid-template-columns: 1fr; }
  .resume-cards { grid-template-columns: 1fr; }
  .cta-card { grid-template-columns: 1fr; text-align: left; }
  .cta-actions { justify-self: stretch; }
  .cta-actions .btn { width: 100%; }
}


@media (max-width: 640px) {
  .site-bg__image {
    left: 50%;
    top: 82px;
    width: min(132vw, 630px);
    opacity: .18;
    filter: grayscale(1) saturate(0) brightness(.58) contrast(1.08);
    transform: translateX(-50%) scale(1.02);
  }
:root { --shell: min(100% - 28px, 560px); }
  .nav-shell { min-height: 64px; }
  .brand-text strong { font-size: .72rem; letter-spacing: .18em; }
  .brand-text small { letter-spacing: .24em; }
  .section-pad { padding: 58px 0 28px; }
  h1 { font-size: clamp(3.9rem, 21vw, 6.2rem); }
  .eyebrow { letter-spacing: .17em; }
  .hero-actions .btn { width: 100%; }
  .status-pill { align-items: flex-start; border-radius: 14px; text-transform: none; letter-spacing: normal; }
  .featured-copy { padding: 54px 24px 106px; }
  .featured-media::before { opacity: .18; background-size: 95% 70%; background-position: center; }
  .audio-strip { left: 20px; right: 20px; grid-template-columns: 20px 1fr; }
  .timecode { display:none; }
  .section-line { align-items: flex-start; }
  .link-button { display:none; }
  .reel-rail { grid-template-columns: 1fr; }
  .reel-card { min-height: 190px; }
  .reel-visual { min-height: 112px; }
  .traits-grid { grid-template-columns: 1fr; padding: 24px; }
  .about-copy { padding: 24px; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
}