/* ==========================================================================
   ERIC CAWALING — neo-brutalist portfolio
   Hand-written CSS. Tailwind (CDN) is loaded for utilities; the art direction
   below is the source of truth so the page still reads if the CDN stalls.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#0A0A0A;
  --ink-soft:#1A1A1A;
  --paper:#F2F2F2;
  --paper-warm:#F7F5EF;
  --rule:#D5D5D5;
  --red:#E63329;
  --red-deep:#B02017;
  --kraft:#C9A06A;
  --kraft-dark:#A87F4C;
  --tape:#E8D96B;
  --lime:#D6F24B;

  --grid: 26px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22,.72,.24,1);

  --f-display:'Anton', 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --f-gothic:'Pirata One', 'UnifrakturCook', 'Times New Roman', serif;
  --f-label:'Oswald', 'Arial Narrow', sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body{
  margin:0;
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: var(--grid) var(--grid), var(--grid) var(--grid), calc(var(--grid)/5) calc(var(--grid)/5), calc(var(--grid)/5) calc(var(--grid)/5);
  color:var(--ink);
  font-family:var(--f-label);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{ display:block; max-width:100%; }

/* the hidden attribute must always win over component display rules */
[hidden]{ display:none !important; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure,ul,ol{ margin:0; }
ul,ol{ list-style:none; padding:0; }

::selection{ background:var(--red); color:#fff; }

.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;
}
.mono{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- paper grain + scroll rail ---------- */
.grain-layer{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.scroll-rail{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:9999;
  background:rgba(10,10,10,.12);
}
.scroll-rail > span{ display:block; height:100%; width:0; background:var(--red); transition:width .12s linear; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:10000;
  background:var(--ink); color:var(--paper); padding:10px 16px;
  font-family:var(--f-mono); font-size:12px; text-transform:uppercase;
  transition:top .2s;
}
.skip-link:focus{ top:12px; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:1460px; margin-inline:auto; padding-inline:clamp(16px,4vw,56px); }

.eyebrow{
  font-family:var(--f-label); font-weight:600; font-size:clamp(10px,.85vw,13px);
  letter-spacing:.22em; text-transform:uppercase; line-height:1.5;
}
.eyebrow--right{ text-align:right; }
.eyebrow--red{ color:var(--red); }
.eyebrow i{ font-style:normal; opacity:.5; }

.section-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.2rem,6.4vw,5.4rem); line-height:.86; letter-spacing:-.015em;
  text-transform:uppercase;
}
.section-title--light{ color:var(--paper); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:9000;
  background:rgba(242,242,242,.9);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:2px solid var(--ink);
  transition:height .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__inner{
  height:var(--nav-h); max-width:1460px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  transition:height .25s var(--ease);
}
.nav.is-stuck .nav__inner{ height:64px; }
.nav.is-stuck{ box-shadow:0 6px 0 rgba(10,10,10,.06); }

.nav__brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.nav__mark{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  background:var(--red); color:var(--ink); border:2px solid var(--ink);
  font-family:var(--f-display); font-size:20px; letter-spacing:-.02em;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.nav__brand:hover .nav__mark{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.nav__name{
  display:flex; flex-direction:column; line-height:1;
  font-family:var(--f-display); font-size:15px; letter-spacing:.03em; text-transform:uppercase;
  white-space:nowrap;
}
.nav__name em{
  font-family:var(--f-mono); font-style:normal; font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin-top:5px;
}
.nav__links{ display:flex; align-items:center; gap:clamp(10px,2vw,28px); }
.nav__links a{
  position:relative; font-family:var(--f-label); font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; padding:6px 2px;
  display:flex; align-items:baseline; gap:6px;
}
.nav__links a span{ font-family:var(--f-mono); font-size:9px; opacity:.45; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--red-deep); }

.nav__actions{ display:flex; align-items:center; gap:14px; }
.nav__time{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; opacity:.55;
  display:flex; align-items:center; gap:6px;
}
.btn-hire{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--paper); border:2px solid var(--ink);
  padding:11px 18px; font-family:var(--f-label); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  box-shadow:4px 4px 0 var(--red);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn-hire:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--red); background:var(--red-deep); }

.nav__burger{ display:none; width:44px; height:40px; border:2px solid var(--ink); padding:9px 8px; flex-direction:column; justify-content:space-between; }
.nav__burger span{ display:block; height:2px; background:var(--ink); transition:transform .2s var(--ease), opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  /* the nav's backdrop-filter makes it the containing block, so anchor here */
  position:absolute; top:100%; left:0; right:0;
  height:calc(100svh - var(--nav-h));
  z-index:8999; overflow:auto;
  background:var(--ink); border-bottom:3px solid var(--red);
  padding:20px clamp(16px,6vw,40px) 34px;
  display:flex; flex-direction:column;
  animation:menu-in .22s var(--ease);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--f-display); font-size:clamp(1.9rem,7vw,2.6rem); text-transform:uppercase;
  color:var(--paper); padding:12px 0; border-bottom:1px solid rgba(255,255,255,.14);
  letter-spacing:.01em;
}
.mobile-menu a em{ font-family:var(--f-mono); font-style:normal; font-size:11px; opacity:.45; }
.mobile-menu a.is-red{ color:var(--red); border-bottom:0; }
.mobile-menu__foot{
  margin-top:auto; padding-top:26px; display:flex; justify-content:space-between; gap:16px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:#9A9A9A;
}
.mobile-menu__foot a{ display:inline; padding:0; border:0; font-family:var(--f-mono); font-size:10px; color:var(--paper); letter-spacing:.06em; }
.mobile-menu__foot a:hover{ color:var(--red); }
.mobile-menu__foot span{ text-align:right; line-height:1.6; }

/* ---------- hero ---------- */
.hero{
  position:relative; padding-top:calc(var(--nav-h) + clamp(18px,4vw,48px));
  padding-bottom:clamp(10px,2vw,22px);
  min-height:calc(100svh - 96px);
  display:flex; align-items:center;
}
.hero .wrap{ width:100%; }
.hero__meta{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  border-bottom:1px solid rgba(10,10,10,.16); padding-bottom:12px;
}
.hero__meta--bottom{ border-bottom:0; border-top:1px solid rgba(10,10,10,.16); padding-top:12px; padding-bottom:0; margin-top:clamp(6px,1.4vw,18px); }

.mega{
  margin:clamp(4px,1.2vw,18px) 0 0;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(3rem,23.4vw,16rem);
  line-height:.8; letter-spacing:-.028em; text-transform:uppercase;
  user-select:none;
}
.mega__row{ display:flex; align-items:flex-end; justify-content:center; }
.mega__chunk{ display:block; }

.mega__cut{
  position:relative; flex:none;
  width:.74em; height:.92em; margin:0 -.02em -.05em;
  z-index:2;
}
.mega__cut-inner{
  position:absolute; inset:0;
  overflow:visible;
  background:none; border:0; box-shadow:none;
}
.mega__photo{
  position:absolute; left:50%; bottom:-7%;
  width:182%; height:auto; max-width:none;
  transform:translateX(-50%) translate3d(var(--px,0px), var(--py,0px), 0);
  transition:transform .5s var(--ease);
  filter:grayscale(1) contrast(1.3) brightness(1.04);
  mix-blend-mode:multiply;
}
/* (halftone overlay retired with the circular avatar) */
.mega__scan{
  position:absolute; left:-10%; right:-10%; height:34%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.5), transparent);
  mix-blend-mode:soft-light; opacity:.7;
  animation:scan-sweep 5.5s linear infinite;
}
.mega__handle{
  position:absolute; width:.062em; height:.062em; min-width:7px; min-height:7px;
  background:#fff; border:1px solid var(--red); z-index:3;
}
.mega__handle--tl{ left:-.02em; top:-.02em; }
.mega__handle--tr{ right:-.02em; top:-.02em; }
.mega__handle--bl{ left:-.02em; bottom:-.02em; }
.mega__handle--br{ right:-.02em; bottom:-.02em; }

.hero__sigils{ display:flex; justify-content:center; align-items:center; gap:clamp(14px,2.4vw,30px); padding:clamp(8px,1.6vw,20px) 0 0; }
.sigil{ width:clamp(28px,3.4vw,46px); height:clamp(28px,3.4vw,46px); }
.sigil--burst{ animation:spin 26s linear infinite; }
.sigil--star{ animation:spin 34s linear infinite reverse; }
.arrow-down{ display:inline-block; animation:bob 1.8s ease-in-out infinite; }

/* ---------- ticker ---------- */
.ticker{
  position:relative; overflow:hidden; background:var(--ink); color:var(--paper);
  border-block:2px solid var(--ink);
  padding:clamp(8px,1.1vw,14px) 0;
  contain:paint;
}
.ticker__track{
  display:flex; width:max-content; will-change:transform;
  animation:marquee var(--dur,26s) linear infinite;
}
.ticker[data-reverse="true"] .ticker__track{ animation-direction:reverse; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  display:inline-flex; align-items:center; gap:clamp(10px,1.4vw,22px);
  padding-right:clamp(10px,1.4vw,22px);
  white-space:nowrap; line-height:1;
}
.ticker__label{
  font-family:var(--f-display); font-size:clamp(1.35rem,3vw,2.55rem);
  letter-spacing:.01em; text-transform:uppercase;
}
.ticker--script .ticker__label{
  font-family:var(--f-gothic); font-size:clamp(1.5rem,3.3vw,2.85rem); letter-spacing:.03em;
}
.ticker__tech{
  font-family:var(--f-mono); font-size:clamp(8.5px,.92vw,12px);
  letter-spacing:.16em; opacity:.58;
}
.ticker__sep{
  color:var(--red); font-size:clamp(13px,1.45vw,19px);
  line-height:1; opacity:1; transform:translateY(-.02em);
}
.ticker__rec{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:clamp(8.5px,.92vw,12px);
  letter-spacing:.2em; text-transform:uppercase; opacity:.85;
}
.ticker__rec i{
  width:8px; height:8px; border-radius:50%; background:var(--red); flex:none;
  box-shadow:0 0 8px rgba(230,51,41,.55);
  animation:rec-blink 1.7s steps(1,end) infinite;
}

/* ---------- about ---------- */
.about{ padding:clamp(34px,6vw,86px) 0 clamp(28px,5vw,64px); }
.about__grid{
  display:grid; grid-template-columns:minmax(240px,330px) minmax(0,1fr) minmax(230px,330px);
  gap:clamp(22px,3.4vw,52px); align-items:start;
}

.portrait-frame{ position:relative; padding:14px 14px 0; transform:rotate(-1.1deg); }
.portrait-frame__media{ position:relative; }
.portrait-frame__paper{
  position:relative; background:#fff; border:1px solid rgba(10,10,10,.5);
  padding:clamp(10px,1.2vw,18px);
  box-shadow:10px 10px 0 rgba(10,10,10,.08), 0 1px 0 rgba(0,0,0,.06);
}
.portrait-frame__art{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 15%, #FF6A5E 0%, var(--red) 42%, #A8140C 100%);
}
.portrait-frame__art::before{
  content:''; position:absolute; left:50%; top:44%;
  width:78%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--paper-warm);
  box-shadow:0 18px 30px rgba(80,0,0,.28);
}
.portrait-frame__art svg{ position:relative; width:100%; height:auto; filter:drop-shadow(0 10px 16px rgba(60,0,0,.22)); }
.portrait-frame__tag,
.portrait-frame__stamp{
  position:absolute; z-index:2; font-family:var(--f-mono); font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--paper);
  padding:3px 6px;
}
.portrait-frame__tag{ top:8px; left:8px; }
.portrait-frame__stamp{ bottom:8px; right:8px; background:var(--paper); color:var(--ink); }

.portrait-frame__selection{
  position:absolute; inset:0; border:1.5px dashed var(--red); z-index:3; pointer-events:none;
}
.handle{
  position:absolute; width:9px; height:9px; background:#fff; border:1.5px solid var(--red);
  transform:translate(-50%,-50%);
}
.handle--tl{ left:0; top:0; } .handle--tr{ left:100%; top:0; }
.handle--bl{ left:0; top:100%; } .handle--br{ left:100%; top:100%; }
.handle--ml{ left:0; top:50%; } .handle--mr{ left:100%; top:50%; }
.handle--mt{ left:50%; top:0; } .handle--mb{ left:50%; top:100%; }

.turntable{ display:grid; gap:9px; }
.turntable__stage{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  perspective:1000px; perspective-origin:50% 46%;
  background:
    radial-gradient(75% 60% at 50% 34%, #232528 0%, #141517 55%, #0A0B0C 100%);
  border:1px solid rgba(10,10,10,.7);
  cursor:grab; touch-action:pan-y;
}
.turntable__stage:active{ cursor:grabbing; }
.turntable__stage:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }
.turntable__glow{
  position:absolute; left:50%; top:46%; width:78%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(230,51,41,.5), rgba(230,51,41,0) 66%);
  pointer-events:none;
}
.turntable__card{
  position:absolute; inset:3% 3.5% 7%;
  transform-style:preserve-3d;
  transform:rotateY(var(--tt-angle,0deg));
  will-change:transform;
}
.tt-face{
  position:absolute; inset:0; overflow:hidden;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:#0B0B0C; border:1px solid rgba(10,10,10,.55);
  box-shadow:0 14px 26px rgba(10,10,10,.28);
}
.tt-face--front img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.07) saturate(.96); }
.tt-face--front{ background:#e7e2d6; }
.tt-tag{
  position:absolute; left:8px; bottom:8px;
  font-family:var(--f-mono); font-size:8px; letter-spacing:.12em;
  background:var(--ink); color:var(--paper); padding:3px 6px;
}
.tt-frame-line{
  position:absolute; inset:8px; border:1px dashed rgba(230,51,41,.85);
  pointer-events:none;
}
.tt-face--back{
  transform:rotateY(180deg);
  display:grid; place-content:center; gap:12px; text-align:center; padding:18px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px),
    linear-gradient(160deg,#141416,#08080A 70%);
}
.tt-mono{ font-family:var(--f-display); font-size:clamp(2.4rem,4vw,3.4rem); line-height:.85; color:var(--paper); letter-spacing:.02em; }
.tt-rule{ width:44px; height:3px; background:var(--red); justify-self:center; }
.tt-back{ font-family:var(--f-display); font-size:clamp(.95rem,1.4vw,1.2rem); line-height:1.06; color:var(--red); letter-spacing:.03em; }
.tt-year{ font-family:var(--f-mono); font-size:8px; letter-spacing:.18em; color:rgba(242,242,242,.55); }
.turntable__shadow{
  position:absolute; left:16%; right:16%; bottom:5%; height:18px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(10,10,10,.42), rgba(10,10,10,0) 72%);
  transform:scaleX(var(--tt-flat,1)); filter:blur(2px);
  pointer-events:none;
}
.turntable__hud{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
}
.tt-angle{ background:var(--ink); color:var(--paper); padding:3px 6px; min-width:44px; text-align:center; }
.tt-hint{ flex:1; color:rgba(10,10,10,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-auto{
  border:1px solid var(--ink); padding:3px 8px; background:transparent;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  transition:background .18s, color .18s, border-color .18s;
}
.tt-auto:hover{ background:var(--ink); color:var(--paper); }
.tt-auto[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:#fff; }

.cv-card{
  display:flex; align-items:center; gap:10px;
  margin-top:14px; padding:10px 12px;
  border:2px solid var(--ink); background:var(--paper);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.cv-card:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--red); background:#fff; }
.cv-card__ico{
  font-family:var(--f-mono); font-size:8px; letter-spacing:.1em;
  background:var(--red); color:#fff; padding:5px 6px; flex:none;
}
.cv-card__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cv-card__txt b{ font-family:var(--f-label); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.cv-card__txt em{ font-family:var(--f-mono); font-style:normal; font-size:8px; letter-spacing:.08em; opacity:.55; text-transform:uppercase; }
.cv-card__arrow{ margin-left:auto; font-size:13px; color:var(--red); }
.avail{
  display:flex; align-items:center; gap:7px; margin-top:10px;
  font-family:var(--f-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; opacity:.7;
}
.portrait-frame figcaption{
  display:flex; justify-content:space-between; gap:8px; padding:10px 2px 0;
  opacity:.6;
}
.portrait-frame figcaption .mono{ font-size:9px; }

.about__copy{ padding-top:6px; }
.hello{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(3.4rem,10.4vw,7.4rem); line-height:.82; letter-spacing:-.02em;
  margin:6px 0 14px;
  text-shadow:4px 4px 0 rgba(230,51,41,.16);
}
.about__lead{
  font-family:var(--f-label); font-weight:600; font-size:clamp(15px,1.45vw,18px);
  margin-bottom:14px; line-height:1.45;
}
.about__copy p{
  font-size:clamp(12.5px,1.08vw,14px); line-height:1.62; letter-spacing:.015em;
  max-width:60ch; margin-bottom:12px; text-transform:none; color:#242424;
}

.badges{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 6px; }
.badge{
  display:grid; place-items:center; width:56px; height:52px;
  border:2px solid var(--ink); border-radius:10px;
  font-family:var(--f-label); font-weight:600; font-size:19px; letter-spacing:0;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.badge:hover{ transform:translate(-2px,-3px) rotate(-3deg); box-shadow:5px 6px 0 var(--ink); }
.badge--pr{ background:linear-gradient(160deg,#3B0A5C,#1B0429); color:#C79BFF; }
.badge--ae{ background:linear-gradient(160deg,#2B0B4F,#12021F); color:#BFAAFF; }
.badge--ps{ background:linear-gradient(160deg,#00233F,#001320); color:#3BA9FF; }
.badge--ai{ background:linear-gradient(160deg,#3A1500,#1E0900); color:#FF9A00; }
.badge--au{ background:linear-gradient(160deg,#00333A,#001418); color:#0FE9C4; }
.badge--dv{ width:auto; padding-inline:12px; font-size:12px; background:linear-gradient(160deg,#20242B,#0B0D10); color:#E8E8E8; letter-spacing:.02em; }
.badge--fl{ width:auto; padding-inline:12px; font-size:12px; background:linear-gradient(160deg,#3A2000,#160C00); color:#FF8A1E; letter-spacing:.02em; }

.about__stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(10,10,10,.18); margin-top:22px; padding-top:16px; gap:8px;
}
.about__stats div{ display:flex; flex-direction:column; gap:2px; }
.about__stats b{ font-family:var(--f-display); font-weight:400; font-size:clamp(20px,2.2vw,30px); line-height:1; }
.about__stats span{ font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; }

.side-group{ min-width:0; }
.side-group > .side-title:first-child{ margin-top:0; }
@media (min-width:1181px){
  .side-group + .side-group > .side-title:first-child{ margin-top:26px; }
}
.creds{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(20px,2.6vw,32px);
  padding-top:clamp(14px,2vw,22px);
  border-top:2px solid var(--ink);
}
.creds .side-title{ margin-top:0; margin-bottom:8px; font-size:clamp(.95rem,1.2vw,1.15rem); padding-bottom:6px; }
.creds .side-title + .edu{ margin-bottom:16px; }
.creds .cert-list li{ padding:7px 0; }
.cert-list li{
  padding:9px 0; border-bottom:1px dotted rgba(10,10,10,.28);
  display:flex; flex-direction:column; gap:2px;
}
.cert-list b{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.cert-list span{ font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; opacity:.6; text-transform:uppercase; }

.tools{ margin:14px 0 2px; display:flex; flex-direction:column; gap:7px; }
.tools__label{ font-size:8.5px; letter-spacing:.16em; opacity:.5; text-transform:uppercase; }
.tools__list{ display:flex; flex-wrap:wrap; gap:5px; }
.tools__list span{
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.06em;
  border:1px solid rgba(10,10,10,.35); padding:3px 7px; text-transform:uppercase;
  transition:background .16s, color .16s, border-color .16s;
}
.tools__list span:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.contact__links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.contact__links a{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  border:1.5px solid var(--ink); padding:6px 10px;
  transition:background .16s, color .16s, transform .16s var(--ease);
}
.contact__links a:hover{ background:var(--ink); color:var(--paper); transform:translate(-1px,-1px); }

.side-title{
  font-family:var(--f-display); font-weight:400; font-size:clamp(1.1rem,1.5vw,1.5rem);
  text-transform:uppercase; letter-spacing:.01em;
  padding-bottom:8px; margin-bottom:12px; border-bottom:2px solid var(--ink);
}
.about__side > .side-title:not(:first-child){ margin-top:26px; }
.skill-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:7px 0; border-bottom:1px dotted rgba(10,10,10,.28);
  font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; font-weight:500;
}
.skill-list li i{ font-family:var(--f-mono); font-style:normal; font-size:9.5px; opacity:.55; white-space:nowrap; }

.timeline li{ padding:0 0 12px; border-left:2px solid rgba(10,10,10,.18); padding-left:12px; position:relative; }
.timeline li::before{
  content:''; position:absolute; left:-5px; top:4px; width:8px; height:8px;
  background:var(--red); border:1px solid var(--ink);
}
.timeline time{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; opacity:.6; text-transform:uppercase; }
.timeline b{ display:block; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin:3px 0 0; }
.timeline p{ font-size:11.5px; line-height:1.5; opacity:.72; }

.role-more{ margin-top:7px; }
.role-more summary{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-deep); cursor:pointer; list-style:none;
}
.role-more summary::-webkit-details-marker{ display:none; }
.role-more summary::before{ content:'+'; font-size:11px; line-height:1; }
.role-more[open] summary::before{ content:'–'; }
.role-more summary:hover{ color:var(--red); }
.role-more summary:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.role-more ul{ margin:9px 0 0; display:flex; flex-direction:column; gap:6px; }
.role-more li{
  position:relative; padding-left:10px;
  font-size:10.5px; line-height:1.45; color:#333; letter-spacing:.01em;
}
.role-more li::before{
  content:''; position:absolute; left:0; top:6px; width:4px; height:4px; background:var(--red);
}
.role-more[open]{ margin-bottom:6px; }

.edu b{ display:block; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.edu span{ font-family:var(--f-mono); font-size:9.5px; opacity:.6; letter-spacing:.06em; }

/* ---------- about figure (paper cut-out) ---------- */
.figure{ display:grid; gap:9px; }
.figure__stage{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:
    radial-gradient(85% 60% at 50% 30%, #FAF8F3 0%, #EFEBE2 55%, #DED8CB 100%);
  border:1px solid rgba(10,10,10,.28);
}
.figure__glow{
  position:absolute; left:50%; top:42%; width:80%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(230,51,41,.22), rgba(230,51,41,0) 66%);
  pointer-events:none;
}
.figure__img{
  position:absolute; left:50%; bottom:4%;
  height:95%; width:auto; max-width:none;
  transform:translateX(-50%);
  filter:drop-shadow(0 18px 18px rgba(10,10,10,.22));
  will-change:transform;
}
.figure__shadow{ display:none; }
.figure__tag{
  position:absolute; left:9px; bottom:9px;
  font-family:var(--f-mono); font-size:8px; letter-spacing:.12em;
  background:var(--ink); color:var(--paper); padding:3px 6px;
}
.figure__hud{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
}
.figure__hud .tt-angle{ background:var(--ink); color:var(--paper); padding:3px 6px; }
.figure__hud .tt-hint{ flex:1; color:rgba(10,10,10,.5); }
.figure__hud .tt-auto{ border:1px solid rgba(10,10,10,.28); padding:2px 6px; color:rgba(10,10,10,.45); }

/* ---------- services ---------- */
.services{ position:relative; }
.services__band{
  position:relative; background:var(--ink); color:var(--paper);
  padding:clamp(30px,5vw,64px) 0 clamp(70px,8vw,120px);
  overflow:hidden;
}
.services__band::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
}
.services__band-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.band-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(3rem,11.5vw,9.6rem); line-height:.82; letter-spacing:-.02em;
  color:var(--paper);
  -webkit-text-stroke:1px rgba(242,242,242,.9);
}
.band-title__dot{ color:var(--red); -webkit-text-stroke:0; }
.band-sub{
  position:absolute; left:0; bottom:-2.2em; font-family:var(--f-mono);
  font-size:clamp(9px,.9vw,11px); letter-spacing:.14em; text-transform:uppercase; opacity:.6;
}
.band-art{
  width:clamp(110px,13vw,190px); flex:none; margin-bottom:clamp(10px,1.6vw,22px);
  aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:var(--paper-warm); border:2px solid rgba(242,242,242,.9);
  box-shadow:9px 9px 0 rgba(230,51,41,.95);
}
.band-art svg, .band-art img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; }
.band-art img{ filter:grayscale(1) contrast(1.12); }

.torn{
  position:absolute; left:0; right:0; height:clamp(26px,3.4vw,46px);
  background:var(--paper);
  pointer-events:none; z-index:2;
}
.torn--bottom{
  bottom:-1px;
  clip-path:polygon(0.0% 52.2%, 1.0% 53.2%, 1.8% 28.5%, 2.6% 17.0%, 3.3% 8.0%, 4.9% 20.5%, 6.2% 8.0%, 7.3% 8.0%, 8.3% 16.9%, 9.3% 20.7%, 10.6% 8.0%, 11.8% 8.0%, 13.2% 8.0%, 14.5% 13.6%, 16.0% 14.3%, 17.2% 8.3%, 18.7% 8.0%, 19.5% 8.0%, 20.3% 10.0%, 21.8% 15.5%, 22.8% 14.3%, 24.1% 13.6%, 25.7% 19.2%, 26.5% 28.2%, 28.2% 8.0%, 29.3% 8.0%, 30.1% 8.0%, 31.0% 8.0%, 32.5% 18.7%, 33.8% 12.5%, 35.4% 23.3%, 36.4% 14.2%, 37.3% 13.8%, 38.2% 8.0%, 39.2% 9.9%, 40.2% 10.3%, 41.6% 8.0%, 43.0% 18.5%, 44.5% 15.7%, 45.6% 8.0%, 46.9% 8.0%, 47.8% 8.0%, 48.6% 18.5%, 49.3% 11.5%, 50.2% 8.0%, 51.3% 8.0%, 53.0% 8.0%, 53.7% 17.2%, 54.7% 29.8%, 55.4% 8.0%, 56.3% 18.2%, 58.0% 14.4%, 58.9% 15.4%, 60.4% 8.0%, 61.4% 17.9%, 63.1% 24.6%, 64.6% 8.0%, 65.8% 8.0%, 66.8% 8.0%, 68.5% 20.7%, 70.2% 13.1%, 71.1% 16.6%, 72.0% 16.0%, 73.5% 8.0%, 75.0% 15.9%, 76.6% 8.0%, 77.8% 16.4%, 78.8% 13.7%, 79.9% 8.0%, 81.4% 19.3%, 82.2% 28.5%, 83.1% 24.3%, 84.4% 10.7%, 85.3% 11.4%, 86.6% 21.8%, 87.7% 14.9%, 88.6% 17.3%, 89.6% 8.0%, 90.7% 8.0%, 91.8% 8.0%, 93.4% 8.9%, 94.6% 8.0%, 95.3% 16.4%, 96.0% 22.7%, 97.2% 23.2%, 98.2% 12.2%, 99.7% 8.0%, 100% 64%, 100% 100%, 0% 100%);
}

.services__paper{ position:relative; background:var(--paper); padding:clamp(30px,4vw,58px) 0 clamp(50px,7vw,90px); overflow:hidden; }
.services__paper::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.9), transparent 60%);
}
.services__grid{
  position:relative;
  display:grid; grid-template-columns:64px repeat(3,minmax(0,1fr));
  gap:clamp(20px,3.4vw,46px) clamp(18px,2.6vw,34px);
  align-items:start;
}

.services__label{
  grid-row:1 / span 2; display:flex; align-items:flex-start; justify-content:center;
}
.services__label span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--f-display); font-size:clamp(2rem,4vw,3.4rem); line-height:1;
  letter-spacing:.02em; color:var(--red);
  text-shadow:
    1px 1px 0 #FF8A5C, 2px 2px 0 #FF8A5C, 3px 3px 0 #FF8A5C,
    4px 4px 0 var(--red-deep), 5px 5px 0 var(--red-deep), 6px 6px 0 var(--ink);
}

.note{
  position:relative;
  transform:rotate(var(--rot,-0.5deg));
  transition:transform .28s var(--ease);
  z-index:1;
}
.note__card{
  filter:drop-shadow(7px 8px 0 rgba(230,51,41,.92)) drop-shadow(0 14px 22px rgba(10,10,10,.22));
  transition:filter .28s var(--ease);
}
.note__face{
  position:relative;
  padding:clamp(20px,2.3vw,30px) clamp(16px,2vw,26px) clamp(22px,2.5vw,32px);
  background:
    radial-gradient(130% 90% at 12% 0%, rgba(255,255,255,.07), transparent 55%),
    linear-gradient(158deg,#1B1C1F 0%, #121316 52%, #0A0B0C 100%);
  border:1px solid rgba(255,255,255,.11);
  color:#EDEDED;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -40px 60px rgba(0,0,0,.35);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.note__face::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
}
.note:hover{
  transform:rotate(0deg) translateY(-6px);
  z-index:3;
}
.note:hover .note__card{
  filter:drop-shadow(10px 12px 0 rgba(230,51,41,1)) drop-shadow(0 20px 30px rgba(10,10,10,.28));
}
.note:hover .note__face{
  border-color:rgba(183,255,58,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -40px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(183,255,58,.18);
}

.note__top{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.38);
  margin-bottom:clamp(14px,1.6vw,20px);
  padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.note__rec{ display:inline-flex; align-items:center; gap:6px; }
.note__rec i{
  width:6px; height:6px; border-radius:50%; background:var(--red); flex:none;
  animation:rec-blink 1.7s steps(1,end) infinite;
}
.note__idx{ color:rgba(183,255,58,.85); letter-spacing:.14em; }

.note h3{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.2rem,1.75vw,1.55rem); line-height:1; letter-spacing:.012em;
  text-transform:uppercase; color:#F4F4F2; margin-bottom:11px;
}
.note p{
  font-family:var(--f-label); font-size:12px; line-height:1.55; letter-spacing:.02em;
  color:#9EA4A9; max-width:28ch;
}

.note__tape{
  position:absolute; width:118px; height:21px;
  left:-28px; top:-4px;
  transform:rotate(-35deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(208,255,124,.46), rgba(148,224,26,.3));
  border:1px solid rgba(190,255,110,.28);
  box-shadow:0 0 10px rgba(150,255,40,.16);
  clip-path:polygon(0 16%, 2% 3%, 11% 0, 30% 3%, 55% 0, 78% 2%, 93% 0, 99% 5%, 100% 30%, 99% 66%, 100% 96%, 92% 100%, 74% 97%, 52% 100%, 30% 97%, 11% 100%, 2% 95%, 0 74%);
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
  z-index:3; pointer-events:none;
  transition:filter .28s var(--ease), background .28s var(--ease);
}
.note__tape--br{
  left:auto; right:-28px; top:auto; bottom:-4px;
  transform:rotate(35deg);
}
.note:hover .note__tape{ filter:brightness(1.12); }

/* ---------- showreel ---------- */
.reel{
  position:relative; background:var(--ink); color:var(--paper);
  padding:clamp(30px,5vw,70px) 0 clamp(46px,7vw,96px);
  overflow:hidden;
}
.reel::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 45% at 78% 8%, rgba(230,51,41,.42), transparent 62%),
    radial-gradient(60% 40% at 12% 92%, rgba(230,51,41,.18), transparent 65%);
}
.reel__ghost{
  position:absolute; top:-.1em; left:50%; transform:translateX(-50%);
  font-family:var(--f-display); font-size:clamp(5rem,21vw,19rem); line-height:.8;
  letter-spacing:-.02em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(242,242,242,.13);
  pointer-events:none; user-select:none;
}
.reel__head{
  position:relative; display:flex; justify-content:space-between; gap:20px;
  padding-top:clamp(48px,9vw,120px);
  border-bottom:1px solid rgba(242,242,242,.16); padding-bottom:14px;
}
.reel__head .eyebrow{ opacity:.75; }
.reel__title-block{ position:relative; padding:clamp(14px,2vw,26px) 0 clamp(20px,3vw,34px); }
.reel__name{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,6.6vw,5.6rem); line-height:.86; letter-spacing:-.01em;
  color:var(--red);
}
.reel__tag{
  font-family:var(--f-label); font-weight:500; font-size:clamp(10px,1vw,13px);
  letter-spacing:.42em; text-transform:uppercase; opacity:.8; margin-top:8px;
}

.player{ position:relative; }
.player__stage{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#000; border:2px solid rgba(242,242,242,.9);
  box-shadow:12px 12px 0 var(--red), 0 30px 60px rgba(0,0,0,.5);
  cursor:pointer;
}
.player__canvas{ width:100%; height:100%; }
.player__scanlines{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.player__overlay{
  position:absolute; inset:14px 14px auto 14px; display:flex; justify-content:space-between;
  gap:10px; pointer-events:none;
}
.chip{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(10,10,10,.7); color:var(--paper); padding:4px 8px; border:1px solid rgba(242,242,242,.28);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.chip--right{ color:var(--red); }

.player__bigplay{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(62px,7vw,88px); aspect-ratio:1; border-radius:50%;
  background:rgba(242,242,242,.94); color:var(--ink);
  display:grid; place-items:center;
  border:2px solid var(--ink);
  box-shadow:0 0 0 6px rgba(230,51,41,.32), 5px 5px 0 rgba(10,10,10,.7);
  transition:transform .2s var(--ease), opacity .2s, box-shadow .2s;
  z-index:4;
}
.player__bigplay svg{ width:44%; height:44%; margin-left:8%; }
.player__bigplay:hover{ transform:translate(-50%,-50%) scale(1.07); box-shadow:0 0 0 10px rgba(230,51,41,.34), 5px 5px 0 rgba(10,10,10,.7); }
.player.is-playing .player__bigplay{ opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.8); }

.player__apps{
  position:absolute; left:50%; bottom:78px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; z-index:3; pointer-events:none;
}
.player__apps i{ font-style:normal; color:var(--red); font-size:12px; }
.mini-badge{
  display:grid; place-items:center; width:30px; height:30px; border-radius:6px;
  font-family:var(--f-label); font-weight:600; font-size:14px;
  border:1px solid rgba(242,242,242,.4);
}
.mini-badge--pr{ background:#2B0A4A; color:#C79BFF; }
.mini-badge--ae{ background:#1D0838; color:#BFAAFF; }
.mini-badge--ps{ background:#001C30; color:#3BA9FF; }

.player__bar{
  position:absolute; left:0; right:0; bottom:0; height:64px; z-index:5;
  display:flex; align-items:center; gap:12px; padding:0 14px;
  background:linear-gradient(180deg, rgba(10,10,10,.72), rgba(6,6,6,.96));
  border-top:1px solid rgba(242,242,242,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pbtn{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  color:var(--paper); border:1px solid transparent; transition:color .16s, border-color .16s, background .16s;
}
.pbtn:hover{ color:var(--red); border-color:rgba(242,242,242,.3); background:rgba(242,242,242,.06); }
.pbtn svg{ width:18px; height:18px; }
.pbtn--play{ width:38px; height:38px; }
.pbtn--play .ico-pause{ display:none; }
.player.is-playing .pbtn--play .ico-play{ display:none; }
.player.is-playing .pbtn--play .ico-pause{ display:block; }
.pbtn--small{
  width:auto; min-width:30px; padding:0 7px; height:28px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; opacity:.82;
}
.pbtn--small[aria-pressed="true"]{ color:var(--ink); background:var(--red); border-color:var(--red); opacity:1; }

.player__tc{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.02em;
  background:var(--paper); color:var(--ink); padding:3px 7px; flex:none;
  box-shadow:2px 2px 0 var(--red);
}
.player__dur{ font-family:var(--f-mono); font-size:10px; opacity:.55; flex:none; }

.player__scrub{ position:relative; flex:1; height:26px; display:flex; align-items:center; cursor:pointer; touch-action:none; }
.player__scrub:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.player__track{ position:relative; width:100%; height:5px; background:rgba(242,242,242,.22); }
.player__buffered{ position:absolute; left:0; top:50%; height:2px; width:0; background:rgba(242,242,242,.26); transform:translateY(-50%); pointer-events:none; }
.player__fill{ position:absolute; inset:0 auto 0 0; width:0; background:var(--red); }
.player__head{
  position:absolute; top:50%; left:0; width:11px; height:11px;
  background:var(--red); border:1px solid var(--paper);
  transform:translate(-50%,-50%) rotate(45deg);
  transition:transform .12s var(--ease);
}
.player__scrub:hover .player__head{ transform:translate(-50%,-50%) rotate(45deg) scale(1.28); }

.player__right{ display:flex; align-items:center; gap:4px; flex:none; }
.player__mark{
  font-family:var(--f-display); font-size:13px; letter-spacing:.04em; margin-left:6px; opacity:.9;
}
.player__mark span{ color:var(--red); }
.player__note{ margin-top:16px; opacity:.42; font-size:9.5px; }

.intro-facade{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
  background:#000; cursor:pointer; overflow:hidden; z-index:1;
}
.intro-facade img{
  width:100%; height:100%; object-fit:cover; display:block; opacity:.92;
  transition:transform .8s var(--ease), opacity .3s;
}
.intro-facade:hover img{ transform:scale(1.035); opacity:1; }
.intro-poster{
  position:absolute; inset:0; display:grid; grid-template-columns:1.15fr .85fr;
  align-items:center; gap:clamp(10px,2vw,30px);
  padding:clamp(20px,3.4vw,52px);
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(70% 60% at 78% 38%, rgba(230,51,41,.42), transparent 62%),
    linear-gradient(150deg,#111214,#08090A 65%);
  background-size:28px 28px, 28px 28px, auto, auto;
}
.intro-poster__type{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left; }
.intro-poster__kicker{
  font-family:var(--f-label); font-weight:600; font-size:clamp(9px,.9vw,12px);
  letter-spacing:.3em; text-transform:uppercase; color:var(--red);
}
.intro-poster__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.4rem,6.6vw,5.6rem); line-height:.84; letter-spacing:-.01em;
  color:var(--paper); text-transform:uppercase;
}
.intro-poster__rule{ width:clamp(40px,6vw,86px); height:4px; background:var(--red); }
.intro-poster__meta{
  font-family:var(--f-mono); font-size:clamp(7.5px,.78vw,10px);
  letter-spacing:.16em; text-transform:uppercase; color:rgba(242,242,242,.55);
}
.intro-poster__photo{
  position:relative; justify-self:center; width:80%; max-width:340px; aspect-ratio:1;
  border-radius:50%; overflow:hidden; border:2px solid rgba(242,242,242,.85);
  box-shadow:0 0 0 10px rgba(230,51,41,.16), 14px 14px 0 rgba(230,51,41,.9);
}
.intro-poster__photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter:grayscale(1) contrast(1.25);
}
.intro-facade__shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,6,8,.10) 0%, rgba(6,6,8,.35) 60%, rgba(6,6,8,.72) 100%);
}
.intro-facade__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(64px,7vw,92px); aspect-ratio:1; border-radius:50%;
  background:var(--paper); color:var(--ink); display:grid; place-items:center;
  border:2px solid var(--ink);
  box-shadow:0 0 0 8px rgba(230,51,41,.3), 6px 6px 0 rgba(10,10,10,.7);
  transition:transform .22s var(--ease), box-shadow .22s;
}
.intro-facade:hover .intro-facade__play{ transform:translate(-50%,-50%) scale(1.07); box-shadow:0 0 0 12px rgba(230,51,41,.32), 6px 6px 0 rgba(10,10,10,.7); }
.intro-facade__play svg{ width:40%; height:40%; margin-left:8%; }
.intro-facade__label{
  position:absolute; left:clamp(12px,1.6vw,22px); bottom:clamp(34px,4vw,58px);
  color:var(--paper); font-size:9.5px; letter-spacing:.16em; opacity:.85;
}
.intro-bar__label{
  flex:1; font-family:var(--f-mono); font-size:9px; letter-spacing:.1em;
  color:rgba(242,242,242,.5); text-transform:uppercase; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.intro-bar__link{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; white-space:nowrap;
  color:var(--red); padding:4px 8px; border:1px solid rgba(230,51,41,.5);
  transition:background .18s, color .18s;
}
.intro-bar__link:hover{ background:var(--red); color:#fff; }
.player__stage.is-loaded .intro-facade,
.player__stage.is-loaded .player__bar,
.player__stage.is-loaded .player__overlay{ display:none; }
.player__stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.player:fullscreen{ background:#000; display:grid; place-items:center; }
.player:fullscreen .player__stage{ width:100%; height:100%; aspect-ratio:auto; border:0; box-shadow:none; }

/* ---------- work ---------- */
.work{ padding:clamp(40px,6vw,84px) 0 clamp(40px,6vw,80px); position:relative; }
.work__head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  flex-wrap:wrap; margin-bottom:clamp(14px,2vw,22px);
  border-bottom:2px solid var(--ink); padding-bottom:14px;
}
.work__count{ font-size:9.5px; letter-spacing:.12em; opacity:.55; text-transform:uppercase; }
.work__group{ margin-top:clamp(22px,3vw,38px); }
.work__group-head{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  flex-wrap:wrap; margin-bottom:clamp(12px,1.6vw,20px);
}
.work__group-head h3{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.6rem); line-height:1;
  letter-spacing:.02em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.work__group-head h3::before{
  content:''; width:10px; height:10px; background:var(--red); flex:none;
}
.work__group-meta{ font-size:9px; letter-spacing:.12em; opacity:.5; text-transform:uppercase; }
.tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.tab{
  font-family:var(--f-label); font-weight:500; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:8px 12px; border:1.5px solid var(--ink);
  background:transparent; display:inline-flex; align-items:center; gap:7px;
  transition:background .16s, color .16s, transform .16s var(--ease), box-shadow .16s;
}
.tab em{ font-family:var(--f-mono); font-style:normal; font-size:9px; opacity:.55; }
.tab:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--red); }
.tab.is-active{ background:var(--ink); color:var(--paper); box-shadow:3px 3px 0 var(--red); }
.tab.is-active em{ opacity:.7; }

.work__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,34px); }
.work__grid--wide{ gap:clamp(18px,2.4vw,30px); }
.work__grid--two{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px); }
.card{ transition:opacity .3s var(--ease), transform .3s var(--ease); }
.card.is-hidden{ display:none; }
.card__btn{ display:block; width:100%; text-align:left; }
.card__art{
  position:relative; aspect-ratio:16/9; overflow:hidden; isolation:isolate;
  border:2px solid var(--ink); background:#111;
  box-shadow:6px 6px 0 var(--ink);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card__btn:hover .card__art{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--red); }
.card__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.card__art--video{ aspect-ratio:4/5; background:#0A0A0A; }
.card__art--wide{ aspect-ratio:16/9; background:#0A0A0A; }
.card__art--wide img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--ease);
}
.card__btn:hover .card__art--wide img{ transform:scale(1.04); }
.card__art--video img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  display:block; transition:transform .55s var(--ease), filter .3s;
}
.card__btn:hover .card__art--video img{ transform:scale(1.045); }
.card__ghost{
  position:absolute; left:-2%; bottom:-.14em; font-family:var(--f-display);
  font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:.8; letter-spacing:-.02em;
  color:rgba(255,255,255,.14); text-transform:uppercase; white-space:nowrap;
}
.card__badge{
  position:absolute; top:10px; left:10px; font-family:var(--f-mono); font-size:8.5px;
  letter-spacing:.14em; text-transform:uppercase; background:var(--paper); color:var(--ink);
  padding:3px 6px; border:1px solid var(--ink);
}
.card__time{
  position:absolute; right:10px; bottom:10px; font-family:var(--f-mono);
  font-size:9.5px; color:var(--paper); background:rgba(10,10,10,.7); padding:2px 5px;
}
.card__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9);
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(242,242,242,.92); color:var(--ink); border:2px solid var(--ink);
  opacity:0; transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.card__play svg{ width:20px; height:20px; margin-left:3px; }
.card__btn:hover .card__play, .card__btn:focus-visible .card__play{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.card__open{
  position:absolute; inset:0; z-index:2; cursor:pointer;
  background:transparent; border:0;
}
.card__stem{
  position:absolute; left:9px; right:9px; bottom:9px; z-index:3;
  display:flex; align-items:center; gap:9px;
  padding:6px 8px;
  background:rgba(6,9,5,.74);
  border:1px solid rgba(183,255,58,.32);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  transition:border-color .2s, box-shadow .2s;
}
.card__stem.is-live{
  border-color:rgba(183,255,58,.85);
  box-shadow:0 0 18px rgba(150,255,40,.22), inset 0 0 12px rgba(150,255,40,.08);
}
.stem-btn{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em;
  color:#C9F57A; padding:1px 0;
}
.stem-btn:hover{ color:#E8FFB8; }
.stem-btn__ico{ width:11px; height:11px; }
.stem-btn__txt{ white-space:nowrap; }
.stem-wave{ flex:1; min-width:0; height:18px; width:100%; }
.stem-state{
  font-family:var(--f-mono); font-size:7.5px; letter-spacing:.16em;
  color:rgba(201,245,122,.5); flex:none;
}
.card__stem.is-live .stem-state{ color:#C9F57A; }

.card__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-top:10px; }
.card__meta h3{ font-family:var(--f-display); font-weight:400; font-size:clamp(15px,1.5vw,20px); text-transform:uppercase; letter-spacing:.01em; }
.card__meta p{ font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; opacity:.55; }

.art--noir{ background:linear-gradient(135deg,#0d0d0f,#26262b 55%,#3a3a42); }
.art--noir::after{ content:''; position:absolute; inset:0; background:radial-gradient(60% 80% at 78% 30%, rgba(230,51,41,.5), transparent 60%); }
.art--kinetic{ background:linear-gradient(140deg,#D9B689,#B78D57 60%,#8E693C); }
.art--kinetic .card__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.card__art--video{ aspect-ratio:4/5; background:#0A0A0A; }
.card__art--wide{ aspect-ratio:16/9; background:#0A0A0A; }
.card__art--wide img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--ease);
}
.card__btn:hover .card__art--wide img{ transform:scale(1.04); }
.card__art--video img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  display:block; transition:transform .55s var(--ease), filter .3s;
}
.card__btn:hover .card__art--video img{ transform:scale(1.045); }
.card__ghost{ color:rgba(10,10,10,.62); }
.art--midnight{ background:linear-gradient(140deg,#1B0838,#3D0F5C 55%,#12061F); }
.art--midnight::after{ content:''; position:absolute; inset:0; background:radial-gradient(50% 70% at 25% 20%, rgba(120,60,255,.5), transparent 62%); }
.art--product{ background:linear-gradient(140deg,#E63329,#A8140C 65%,#5E0803); }
.art--podcast{ background:linear-gradient(140deg,#1C1C1C,#3A3A3A 70%,#161616); }
.art--sound{ background:linear-gradient(140deg,#DBF553,#9CC020 65%,#6B8A0F); }
.art--sound .card__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.card__art--video{ aspect-ratio:4/5; background:#0A0A0A; }
.card__art--wide{ aspect-ratio:16/9; background:#0A0A0A; }
.card__art--wide img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--ease);
}
.card__btn:hover .card__art--wide img{ transform:scale(1.04); }
.card__art--video img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  display:block; transition:transform .55s var(--ease), filter .3s;
}
.card__btn:hover .card__art--video img{ transform:scale(1.045); }
.card__ghost{ color:rgba(10,10,10,.6); }

.work__empty{ margin-top:22px; opacity:.7; }
.link-red{ color:var(--red); text-decoration:underline; }

/* ---------- graphics ---------- */
.graphics{ padding:clamp(30px,4.5vw,64px) 0 clamp(40px,6vw,80px); }
.graphics{ border-top:0; }
.graphics__head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:clamp(20px,3vw,32px);
}
.graphics__sub{ font-size:9.5px; letter-spacing:.1em; opacity:.55; text-transform:uppercase; }
.graphics__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,32px); }
.gcard{ display:block; text-align:left; padding:0; cursor:pointer; }
.gcard__frame{
  position:relative; display:block; aspect-ratio:1; overflow:hidden;
  border:2px solid var(--ink); background:#111;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.gcard:hover .gcard__frame{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--red); }
.gcard__frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.gcard:hover .gcard__frame img{ transform:scale(1.03); }
.gcard__cap{
  display:flex; align-items:center; gap:8px;
  padding-top:10px;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
}
.gcard__cap::before{
  content:''; width:7px; height:7px; background:var(--red); flex:none;
}

/* ---------- thumbnails ---------- */
.thumbs{ padding:clamp(10px,1.5vw,20px) 0 clamp(40px,6vw,80px); }
.thumbs__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,32px); }
.thumb{ display:block; text-align:left; padding:0; cursor:pointer; }
.thumb__frame{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  border:2px solid var(--ink); background:#111;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.thumb:hover .thumb__frame{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--red); }
.thumb__frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.thumb:hover .thumb__frame img{ transform:scale(1.035); }

/* ---------- reels ---------- */
.reels{
  position:relative; background:var(--ink); color:var(--paper);
  padding:clamp(34px,5vw,64px) 0 clamp(44px,7vw,90px); overflow:hidden;
}
.reels::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 20% 0%, rgba(230,51,41,.34), transparent 60%),
    radial-gradient(50% 40% at 88% 88%, rgba(230,51,41,.2), transparent 62%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto, auto, 30px 30px, 30px 30px;
}
.reels .wrap{ position:relative; }
.reels__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(26px,4vw,46px); }
.reels__sub{ max-width:34ch; font-size:12.5px; line-height:1.65; color:#B9B9B9; }

.reels__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,4vw,56px); justify-items:center; }
.phone{ width:100%; max-width:290px; }
.phone__shell{
  position:relative; aspect-ratio:9/18.6; padding:10px;
  background:#151515; border:2px solid var(--ink); border-radius:30px;
  box-shadow:9px 9px 0 var(--red), 0 26px 46px rgba(0,0,0,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.phone:hover .phone__shell{ transform:translateY(-8px) rotate(-1.2deg); box-shadow:12px 14px 0 var(--red), 0 32px 54px rgba(0,0,0,.55); }
.phone__notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:34%; height:8px; border-radius:99px; background:#000; z-index:3;
}
.phone__screen{ position:relative; height:100%; border-radius:22px; overflow:hidden; background:#000; }
.phone__canvas{ width:100%; height:100%; }
.phone__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.phone__ui{
  position:absolute; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.8); z-index:2;
}
.phone__ui--top{ top:14px; left:12px; }
.phone__ui--bottom{ bottom:16px; left:12px; }
.phone__progress{
  position:absolute; left:12px; right:12px; bottom:8px; height:2px;
  background:rgba(255,255,255,.25); z-index:2;
}
.phone__progress i{ display:block; height:100%; width:0; background:#fff; }
.phone.is-playing .phone__progress i{ animation:progress 18s linear infinite; }
.phone__hit{ position:absolute; inset:0; z-index:4; }
.phone__hit:focus-visible{ outline:2px solid var(--red); outline-offset:-4px; }
.phone__btn{
  position:absolute; right:-3px; top:38%; width:3px; height:52px;
  background:#2a2a2a; border-radius:2px;
}
.phone__meta{ padding-top:14px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.phone__meta h3{ font-family:var(--f-display); font-weight:400; font-size:16px; text-transform:uppercase; letter-spacing:.02em; }
.phone__meta p{ font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; opacity:.5; }

/* ---------- contact ---------- */
.contact{
  position:relative; background:var(--red); color:var(--ink);
  padding:clamp(44px,7vw,90px) 0 clamp(56px,8vw,110px); overflow:hidden;
  border-top:3px solid var(--ink);
}
.contact::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(10,10,10,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.1) 1px, transparent 1px);
  background-size:26px 26px;
}
.contact__inner{ position:relative; }
.contact__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.4rem,8.4vw,7rem); line-height:.92; letter-spacing:-.02em;
  margin:10px 0 clamp(22px,3vw,34px);
}
.contact__title-red{ color:var(--paper); text-shadow:4px 4px 0 var(--ink); }
.contact__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-label); font-weight:600; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:15px 22px; border:2px solid var(--ink);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s;
}
.btn--ink{ background:var(--ink); color:var(--paper); box-shadow:5px 5px 0 rgba(10,10,10,.35); }
.btn--ink:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(10,10,10,.4); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:5px 5px 0 rgba(10,10,10,.22); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(10,10,10,.28); }
.btn__dot{ width:8px; height:8px; background:var(--lime); border:1px solid var(--ink); flex:none; }
.btn--ghost .btn__dot{ background:var(--ink); border-color:var(--ink); }
.btn--ghost:hover .btn__dot{ background:var(--lime); border-color:var(--paper); }
.contact__meta{ margin-top:22px; font-size:9.5px; letter-spacing:.12em; opacity:.72; }
.contact__stamp{
  position:absolute; right:clamp(0px,3vw,40px); top:clamp(6px,4vw,40px);
  transform:rotate(7deg);
  display:grid; gap:2px; justify-items:center; text-align:center;
  padding:14px 18px; border:2.5px solid var(--ink); outline:2px solid var(--ink); outline-offset:4px;
  background:rgba(242,242,242,.14); color:var(--ink);
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em;
  box-shadow:8px 8px 0 rgba(10,10,10,.18);
}
.contact__stamp b{
  font-family:var(--f-display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.4rem);
  line-height:.88; letter-spacing:.01em;
}
.contact__stamp span{ font-size:9px; font-weight:600; }

.contact__tape{
  position:absolute; left:50%; bottom:-16px; width:min(280px,52vw); height:34px;
  transform:translateX(-50%) rotate(-2deg);
  background:linear-gradient(180deg, rgba(242,242,242,.92), rgba(214,214,214,.9));
  box-shadow:0 3px 8px rgba(10,10,10,.25);
  clip-path:polygon(2% 10%,10% 0,22% 8%,36% 0,50% 9%,64% 0,78% 8%,90% 1%,99% 10%,100% 48%,95% 90%,82% 100%,68% 91%,54% 100%,40% 92%,26% 100%,12% 92%,3% 100%,0 52%);
  z-index:3;
}

/* ---------- footer ---------- */
.footer{
  position:relative; background:var(--ink); color:var(--paper);
  padding:clamp(28px,4vw,54px) 0 30px; overflow:hidden;
}
.footer__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.footer .wrap{ position:relative; }
.footer__thanks{
  font-family:var(--f-gothic); font-weight:400;
  font-size:clamp(2.6rem,12.6vw,10.4rem); line-height:.9; letter-spacing:.1em;
  text-align:center; padding:clamp(6px,2vw,26px) 0 clamp(18px,3vw,38px);
  text-shadow:0 0 34px rgba(230,51,41,.22);
}
.footer__contacts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(242,242,242,.18); border-bottom:1px solid rgba(242,242,242,.18);
}
.footer__contact{
  display:flex; align-items:center; gap:14px; padding:clamp(14px,2vw,22px) clamp(10px,1.6vw,20px);
  border-right:1px solid rgba(242,242,242,.18);
  transition:background .2s, color .2s, transform .2s var(--ease);
}
.footer__contact:last-child{ border-right:0; }
.footer__contact:hover{ background:rgba(230,51,41,.14); transform:translateY(-2px); }
.footer__ico{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  border:1.5px solid rgba(242,242,242,.4); border-radius:50%;
}
.footer__ico svg{ width:18px; height:18px; }
.footer__ico--wa{ background:#1FAF54; border-color:#1FAF54; color:#fff; }
.footer__contact b{ display:block; font-family:var(--f-label); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.footer__contact em{ display:block; font-family:var(--f-mono); font-style:normal; font-size:11px; letter-spacing:.03em; opacity:.7; margin-top:3px; }

.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:20px; font-size:10.5px; letter-spacing:.04em; opacity:.72;
}
.footer__bottom .mono{ font-size:9.5px; }
.footer__status{ display:flex; align-items:center; gap:7px; }
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 0 rgba(214,242,75,.6); animation:pulse 2.2s infinite; }

/* ---------- lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:9600; display:grid; place-items:center; padding:clamp(12px,3vw,34px); }
.lightbox[hidden]{ display:none; }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(6,6,6,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lightbox__panel{
  position:relative; width:min(940px,100%); background:var(--paper);
  border:2px solid var(--ink); box-shadow:14px 14px 0 var(--red);
  animation:pop .28s var(--ease); max-height:92vh; overflow:hidden;
  margin-right:14px; margin-bottom:14px;
}
.lightbox__stage{ position:relative; aspect-ratio:16/9; background:#000; border-bottom:2px solid var(--ink); }
.lightbox__stage.is-vertical{ width:min(100%,39.4vh); aspect-ratio:9/16; margin-inline:auto; }
.lightbox__panel.is-vertical{ width:min(940px, calc(39.4vh + 4px)); }
.lightbox__stage.is-square{ width:min(100%,64vh); aspect-ratio:1; margin-inline:auto; }
.lightbox__panel.is-square{ width:min(940px, calc(64vh + 4px)); }
#lbCanvas{ width:100%; height:100%; }
.lightbox__stage iframe{ width:100%; height:100%; border:0; display:block; }
#lbVideo{ width:100%; height:100%; object-fit:contain; background:#000; display:block; }
#lbImage{ width:100%; height:100%; object-fit:contain; background:#0A0A0A; display:block; }
.lightbox__meta{ display:grid; gap:4px; padding:14px 18px 18px; }
.lightbox__meta h3{ font-family:var(--f-display); font-weight:400; font-size:clamp(18px,2.2vw,26px); text-transform:uppercase; }
.lightbox__meta p{ opacity:.6; }
.lightbox__note{ font-size:11px; opacity:.5 !important; margin-top:6px; }
.lightbox__close{
  position:absolute; right:10px; top:10px; width:38px; height:38px; z-index:5;
  background:var(--ink); color:var(--paper); border:2px solid var(--paper);
  display:grid; place-items:center; font-size:15px;
  transition:background .16s, transform .16s;
}
.lightbox__close:hover{ background:var(--red); transform:rotate(90deg); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,160%);
  opacity:0; visibility:hidden; pointer-events:none;
  background:var(--ink); color:var(--paper); border:2px solid var(--red);
  padding:12px 20px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; z-index:9700;
  transition:transform .3s var(--ease), opacity .25s var(--ease), visibility .25s;
  box-shadow:5px 5px 0 rgba(230,51,41,.4);
}
.toast.is-on{ transform:translate(-50%,0); opacity:1; visibility:visible; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .ticker__rec i, .note__rec i, .dot-live{ animation:none; }
}

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--red); outline-offset:3px;
}

/* ---------- keyframes ---------- */
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@keyframes progress{ from{ width:0; } to{ width:100%; } }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(214,242,75,.6); } 70%{ box-shadow:0 0 0 8px rgba(214,242,75,0); } 100%{ box-shadow:0 0 0 0 rgba(214,242,75,0); } }
@keyframes scan-sweep{ 0%{ transform:translateY(-130%) } 100%{ transform:translateY(330%) } }
@keyframes rec-blink{ 0%,58%{ opacity:1 } 59%,100%{ opacity:.16 } }
@keyframes menu-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .about__grid{ grid-template-columns:minmax(220px,280px) minmax(0,1fr); }
  .about__side{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 clamp(18px,3vw,34px);
    align-items:start;
  }
  .about__side > .side-group{ min-width:0; }
.side-group > .side-title:first-child{ margin-top:0; }
@media (min-width:1181px){
  .side-group + .side-group > .side-title:first-child{ margin-top:26px; }
}
.creds{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(20px,2.6vw,32px);
  padding-top:clamp(14px,2vw,22px);
  border-top:2px solid var(--ink);
}
.creds .side-title{ margin-top:0; margin-bottom:8px; font-size:clamp(.95rem,1.2vw,1.15rem); padding-bottom:6px; }
.creds .side-title + .edu{ margin-bottom:16px; }
.creds .cert-list li{ padding:7px 0; }
.cert-list li{
  padding:9px 0; border-bottom:1px dotted rgba(10,10,10,.28);
  display:flex; flex-direction:column; gap:2px;
}
.cert-list b{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.cert-list span{ font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; opacity:.6; text-transform:uppercase; }

.tools{ margin:14px 0 2px; display:flex; flex-direction:column; gap:7px; }
.tools__label{ font-size:8.5px; letter-spacing:.16em; opacity:.5; text-transform:uppercase; }
.tools__list{ display:flex; flex-wrap:wrap; gap:5px; }
.tools__list span{
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.06em;
  border:1px solid rgba(10,10,10,.35); padding:3px 7px; text-transform:uppercase;
  transition:background .16s, color .16s, border-color .16s;
}
.tools__list span:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.contact__links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.contact__links a{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  border:1.5px solid var(--ink); padding:6px 10px;
  transition:background .16s, color .16s, transform .16s var(--ease);
}
.contact__links a:hover{ background:var(--ink); color:var(--paper); transform:translate(-1px,-1px); }

.side-title{ margin-top:0; align-self:end; }
  .work__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:1180px){
  .badge{ width:50px; height:48px; font-size:17px; }
  .badge--dv, .badge--fl{ width:auto; padding-inline:9px; font-size:11px; }
}

@media (max-width:980px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__time{ display:none; }
  .reel__name{ font-size:clamp(1.8rem,7vw,3.4rem); }
  .player__apps{ bottom:70px; }
  .services__grid{ grid-template-columns:48px repeat(2,minmax(0,1fr)); }
  .services__label{ grid-row:1 / span 3; }
  .band-sub{ position:static; margin-top:10px; }
}

@media (max-width:980px){
  .hero{ min-height:auto; padding-bottom:8px; }
}

@media (max-width:820px){
  :root{ --nav-h:68px; }
  .mega{ font-size:clamp(2.4rem,21.4vw,8.4rem); }
  .hero__sigils{ padding-top:14px; }
  .about__grid{ grid-template-columns:minmax(0,1fr); }
  .portrait-frame{ max-width:340px; margin-inline:auto; }
  .about__side{ grid-template-columns:minmax(0,1fr); gap:0; }
  .about__side > .side-group + .side-group{ margin-top:8px; }
  .creds{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .about__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:14px; }
  .work__grid{ grid-template-columns:minmax(0,1fr); }
  .reels__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .reels__grid .phone:last-child{ grid-column:1 / -1; max-width:290px; }
  .footer__contacts{ grid-template-columns:1fr; }
  .footer__contact{ border-right:0; border-bottom:1px solid rgba(242,242,242,.18); }
  .footer__contact:last-child{ border-bottom:0; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
  .player__bar{ height:58px; gap:8px; padding:0 9px; }
  .player__dur, .player__mark{ display:none; }
  .player__apps{ bottom:62px; }
  .player__overlay{ inset:8px 8px auto 8px; }
  .chip{ font-size:8px; padding:3px 5px; }
  .services__grid{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .services__label{ grid-row:auto; justify-content:flex-start; }
  .services__label span{ writing-mode:horizontal-tb; transform:none; font-size:clamp(2rem,9vw,3rem); }
  .note{ max-width:420px; margin-inline:auto; width:100%; }
  .services__band-inner{ flex-direction:column; align-items:flex-start; gap:8px; }
  .band-sub{ position:static; margin-top:6px; }
  .band-art{ width:clamp(96px,26vw,150px); align-self:flex-end; margin-top:-10px; }
}

@media (max-width:560px){
  .nav__name em{ display:none; }
  .btn-hire{ padding:9px 12px; font-size:10.5px; letter-spacing:.1em; }
  .nav__mark{ width:36px; height:36px; font-size:18px; }
  .mega{ font-size:23vw; }
  .mega__cut{ width:.8em; }
  .hero__meta .eyebrow{ font-size:9px; letter-spacing:.16em; }
  .about__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .badges{ gap:6px; }
  .badge{ width:42px; height:40px; font-size:15px; border-radius:8px; box-shadow:2px 2px 0 var(--ink); }
  .badge--dv, .badge--fl{ width:auto; padding-inline:7px; font-size:9.5px; letter-spacing:0; }
  .reels__grid{ grid-template-columns:minmax(0,1fr); }
  .reels__grid .phone, .reels__grid .phone:last-child{ max-width:300px; margin-inline:auto; width:100%; }
  .contact__title{ font-size:clamp(2rem,11vw,3rem); }
  .contact__stamp{ display:none; }
  .note__tape{ width:98px; height:19px; left:-26px; top:-2px; }
  .note__tape--br{ right:-26px; bottom:-2px; }
  .btn{ padding:13px 16px; font-size:11px; }
  .footer__thanks{ letter-spacing:.06em; }
  .ticker__item{ font-size:1.25rem; }
  .ticker--script .ticker__item{ font-size:1.5rem; }
  .player__tc{ font-size:10px; padding:2px 5px; }
  .player__bar{ height:46px; gap:7px; padding:0 8px; }
  .player__apps{ display:none; }
  .pbtn--small{ min-width:24px; height:26px; }
  .player__right .pbtn:nth-child(2){ display:none; }
  .player__right [data-action="mute"]{ display:none; }
  .player__stage{ box-shadow:7px 7px 0 var(--red); }
  .player__note{ font-size:8.5px; }
  .section-title{ font-size:clamp(1.9rem,10vw,3rem); }
  .work__head{ align-items:flex-start; }
  .tabs{ gap:5px; }
  .tab{ font-size:9.5px; padding:7px 9px; letter-spacing:.08em; }
}

@media (max-width:380px){
  .nav__name{ display:none; }
  .mega{ font-size:22.5vw; }
  .about__stats{ grid-template-columns:minmax(0,1fr); }
}