/* ==========================================================
   FELIX MARI TOLERO - PIXEL PORTFOLIO
   8-bit design system on a strict 12-column grid
   Display: Oughter | Body: Clemente PD
   ========================================================== */

/* ---------- 1. FONTS ---------- */
@font-face{
  font-family:"Oughter";
  src:url("../fonts/Oughter.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Clemente PD";
  src:url("../fonts/ClementePDae-Light.ttf") format("truetype");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Clemente PD";
  src:url("../fonts/ClementePDai-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Clemente PD";
  src:url("../fonts/ClementePDak-SemiBold.ttf") format("truetype");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Clemente PD";
  src:url("../fonts/ClementePDam-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}

/* ---------- 2. TOKENS ---------- */
:root{
  --void:#0b0a14;
  --night:#12101f;
  --panel:#1b1830;
  --panel-2:#252142;
  --line:#3b3566;
  --line-soft:#2b2749;
  --paper:#f4efe4;
  --muted:#a29cc9;
  --pink:#ff4f9a;
  --cyan:#46e0d2;
  --gold:#ffc44f;
  --lime:#a6e34d;
  --violet:#9b6dff;

  --px:4px;

  --cols:12;
  --gutter:24px;
  --margin:32px;
  --maxw:1360px;

  --display:"Oughter","Arial Black",system-ui,sans-serif;
  --body:"Clemente PD","Helvetica Neue",Arial,sans-serif;

  --stair:
    12px 0, calc(100% - 12px) 0,
    calc(100% - 12px) 4px, calc(100% - 8px) 4px,
    calc(100% - 8px) 8px, calc(100% - 4px) 8px,
    calc(100% - 4px) 12px, 100% 12px,
    100% calc(100% - 12px),
    calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%,
    12px 100%,
    12px calc(100% - 4px), 8px calc(100% - 4px),
    8px calc(100% - 8px), 4px calc(100% - 8px),
    4px calc(100% - 12px), 0 calc(100% - 12px),
    0 12px, 4px 12px, 4px 8px, 8px 8px, 8px 4px, 12px 4px;
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--paper);
  font-family:var(--body);font-weight:400;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:var(--px) solid var(--cyan);outline-offset:var(--px)}
::selection{background:var(--pink);color:var(--void)}

/* ---------- 4. THE 12-COLUMN GRID ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gutter);
  row-gap:0;
  width:min(100% - (var(--margin) * 2), var(--maxw));
  margin-inline:auto;
}
.c1{grid-column-end:span 1}   .c2{grid-column-end:span 2}   .c3{grid-column-end:span 3}
.c4{grid-column-end:span 4}   .c5{grid-column-end:span 5}   .c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}   .c8{grid-column-end:span 8}   .c9{grid-column-end:span 9}
.c10{grid-column-end:span 10} .c11{grid-column-end:span 11} .c12{grid-column-end:span 12}
.s2{grid-column-start:2} .s3{grid-column-start:3} .s4{grid-column-start:4}
.s5{grid-column-start:5} .s6{grid-column-start:6} .s7{grid-column-start:7}
.s8{grid-column-start:8} .s9{grid-column-start:9}

/* tablet: reads as an 8-column layout */
@media (max-width:1023px){
  :root{--gutter:20px;--margin:24px}
  .t2{grid-column-end:span 2}  .t3{grid-column-end:span 3}  .t4{grid-column-end:span 4}
  .t5{grid-column-end:span 5}  .t6{grid-column-end:span 6}  .t7{grid-column-end:span 7}
  .t8{grid-column-end:span 8}  .t9{grid-column-end:span 9}  .t10{grid-column-end:span 10}
  .t12{grid-column-end:span 12}
  .t-auto{grid-column-start:auto}
}
/* mobile: reads as a 4-column layout */
@media (max-width:639px){
  :root{--gutter:16px;--margin:16px}
  .m6{grid-column-end:span 6}
  .m12{grid-column-end:span 12}
  .m-auto{grid-column-start:auto}
}

/* ---------- 5. GRID OVERLAY (12-col visualiser) ---------- */
.gridlines{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:0;transition:opacity .18s steps(3);
}
.gridlines[data-on="true"]{opacity:1}
.gridlines .grid{height:100%}
.gridlines .col{
  grid-column:span 1;height:100%;
  background:linear-gradient(180deg,rgba(255,79,154,.16),rgba(70,224,210,.10));
  border-left:1px solid rgba(255,79,154,.30);
  border-right:1px solid rgba(255,79,154,.30);
}
.gridlines__tag{
  position:fixed;left:var(--margin);bottom:16px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--pink);background:var(--void);padding:6px 10px;
  border:2px solid var(--pink);
}
@media (max-width:639px){.gridlines .col:nth-child(n+5){display:none}}
@media (min-width:640px) and (max-width:1023px){.gridlines .col:nth-child(n+9){display:none}}

/* ---------- 6. PIXEL PANEL PRIMITIVE ---------- */
.pxbox{
  position:relative;
  isolation:isolate;
  background:var(--line);
  clip-path:polygon(var(--stair));
  filter:drop-shadow(6px 6px 0 rgba(0,0,0,.55));
}
.pxbox::before{
  content:"";position:absolute;inset:var(--px);z-index:-1;
  background:var(--panel);
  clip-path:polygon(var(--stair));
}
.pxbox > *{position:relative;z-index:1}
.pxbox--flat{filter:none}
.pxbox--pink{background:var(--pink)}
.pxbox--cyan{background:var(--cyan)}
.pxbox--gold{background:var(--gold)}
.pxbox--lime{background:var(--lime)}
.pxbox--violet{background:var(--violet)}
.pxbox--deep::before{background:var(--void)}
.pxbox--raised::before{background:var(--panel-2)}

/* ---------- 7. TEXTURE ---------- */
.scanlines{
  position:fixed;inset:0;z-index:940;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.20) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.5;
}
.vignette{
  position:fixed;inset:0;z-index:939;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.5) 100%);
}
.dots{
  background-image:radial-gradient(var(--line-soft) 1px,transparent 1px);
  background-size:8px 8px;
}

/* ---------- 8. TYPE ---------- */
.display{
  font-family:var(--display);font-weight:400;
  line-height:.86;letter-spacing:-.01em;text-transform:uppercase;margin:0;
}
h1.display{font-size:clamp(3rem,10vw,8.4rem)}
h2.display{font-size:clamp(2.3rem,5.6vw,4.4rem)}
h3.display{font-size:clamp(1.4rem,2.4vw,2rem)}


.lead{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--muted);font-weight:300;max-width:62ch}
.small{font-size:13px;color:var(--muted)}
.label{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- 9. SECTIONS ---------- */
.section{padding:clamp(72px,11vw,140px) 0;position:relative}
.section--night{background:var(--night)}
.section__head{margin-bottom:56px}

/* ---------- 10. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--pink);color:var(--void);
  clip-path:polygon(var(--stair));
  transition:transform .1s steps(2),filter .1s steps(2);
  filter:drop-shadow(5px 5px 0 rgba(0,0,0,.6));
}
.btn:hover{transform:translate(3px,3px);filter:drop-shadow(2px 2px 0 rgba(0,0,0,.6))}
.btn:active{transform:translate(5px,5px);filter:none}
.btn--ghost{background:var(--panel-2);color:var(--paper)}
.btn--cyan{background:var(--cyan)}
.btn--gold{background:var(--gold)}


/* ---------- 11. NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:950;
  background:rgba(11,10,20,.9);backdrop-filter:blur(6px);
  border-bottom:var(--px) solid var(--line);
}
.nav__in{display:flex;align-items:center;gap:20px;padding:12px 0;
  width:min(100% - (var(--margin) * 2),var(--maxw));margin-inline:auto}
.nav__brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.nav__mark{width:32px;height:32px;flex:none;image-rendering:pixelated}
.nav__name{font-family:var(--display);font-size:18px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.nav__role{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
.nav__links{display:flex;gap:26px;align-items:center}
.nav__links a{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);padding:6px 0;position:relative;transition:color .15s steps(2);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:var(--px);
  background:var(--pink);transition:width .15s steps(3);
}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after{width:100%}
.nav__tools{display:flex;gap:8px;align-items:center}
.navtoggle{display:none;width:40px;height:40px;background:var(--panel-2);
  clip-path:polygon(var(--stair));align-items:center;justify-content:center}
.navtoggle span{display:block;width:18px;height:3px;background:var(--paper);
  box-shadow:0 -6px 0 var(--paper),0 6px 0 var(--paper)}
@media (max-width:900px){
  .nav__links{
    position:fixed;inset:64px 0 auto;flex-direction:column;gap:0;
    background:var(--night);border-bottom:var(--px) solid var(--line);
    padding:8px 0;display:none;
  }
  .nav__links[data-open="true"]{display:flex}
  .nav__links a{padding:14px var(--margin);width:100%;font-size:13px}
  .navtoggle{display:flex}
  .nav__role{display:none}
}

/* ---------- 12. SECTION HEADINGS (no numbered eyebrows) ---------- */
.section__head{margin-bottom:56px}
.kicker{
  display:block;font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 14px;
}

/* ---------- 13. HERO ---------- */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.hero__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 24%,rgba(155,109,255,.20),transparent 70%),
    radial-gradient(50% 45% at 12% 72%,rgba(255,79,154,.14),transparent 70%);
}
.hero__stars{position:absolute;inset:0;pointer-events:none;image-rendering:pixelated;opacity:.5}
.hero__copy{align-self:center;padding-block:12px}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime);background:rgba(166,227,77,.10);
  padding:8px 14px;margin-bottom:26px;
  clip-path:polygon(var(--stair));
}
.badge i{width:8px;height:8px;background:var(--lime);animation:blink 1.4s steps(2,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.hero h1{margin:0 0 18px}
.hero h1 .ln{display:block}
.hero h1 .ln--out{color:transparent;-webkit-text-stroke:3px var(--paper);paint-order:stroke fill}
.hero__sub{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 24px;
}
.hero__sub span{display:inline-flex;align-items:center;gap:14px}
.hero__sub span::after{content:"";width:6px;height:6px;background:var(--pink)}
.hero__sub span:last-child::after{display:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__art{align-self:end}
.hero__art canvas{width:100%;height:auto;display:block;image-rendering:pixelated}

/* hero portrait: the photo stands on its own - nothing behind it, nothing beside it */
.portrait{position:relative;margin:0 auto;width:fit-content;
  display:flex;align-items:flex-end;justify-content:center}
.portrait img{position:relative;z-index:1;display:block;
  width:auto;height:auto;max-width:100%;max-height:600px}
.hero__foot{
  margin-top:64px;display:flex;justify-content:space-between;gap:16px;
  flex-wrap:wrap;border-top:var(--px) solid var(--line);padding-top:18px;
}

/* ---------- 14. MARQUEES ---------- */
.ticker{
  background:var(--pink);color:var(--void);
  border-block:var(--px) solid var(--void);
  overflow:hidden;padding:12px 0;
}
.ticker__track{display:flex;width:max-content;animation:slideL 34s linear infinite}
.ticker__track span{
  font-family:var(--display);font-size:20px;text-transform:uppercase;
  padding:0 26px;display:inline-flex;align-items:center;gap:26px;white-space:nowrap;
}
.ticker__track span::after{content:"";width:10px;height:10px;background:var(--void);flex:none}
@keyframes slideL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* worked-with marquee: same mechanic, running the other way */
.marquee{overflow:hidden;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:slideR 40s linear infinite}
.marquee__track span{
  font-family:var(--display);font-size:clamp(1.4rem,3vw,2.4rem);text-transform:uppercase;
  color:var(--muted);padding:0 24px;display:inline-flex;align-items:center;gap:24px;white-space:nowrap;
  transition:color .2s steps(2);
}
.marquee__track span::after{content:"";width:9px;height:9px;background:var(--pink);flex:none}
.marquee:hover .marquee__track span{color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .ticker__track,.marquee__track{animation:none}
  .badge i{animation:none}
}

/* ---------- 15. STATS (no panels, just rules) ---------- */
.stat{border-top:var(--px) solid var(--line);padding:22px 0 4px}
.stat__n{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--gold)}
.stat__l{margin-top:6px}

/* ---------- 16. WORK INDEX (rows, not cards) ---------- */
.worklist{border-top:var(--px) solid var(--line)}
.wrow{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter);row-gap:6px;align-items:baseline;
  padding:30px 0;border-bottom:var(--px) solid var(--line-soft);
  position:relative;transition:background .15s steps(2);
}
.wrow:hover{background:rgba(255,79,154,.04)}
.wrow__n{grid-column:span 1;font-family:var(--display);font-size:1.1rem;color:var(--pink);line-height:1}
.wrow__main{grid-column:span 5;display:flex;flex-direction:column;gap:8px}
.wrow__title{
  font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.2rem);
  text-transform:uppercase;line-height:.96;transition:color .15s steps(2);
}
.wrow:hover .wrow__title{color:var(--pink)}
.wrow__sum{font-size:14px;color:var(--muted);font-weight:300;line-height:1.55;max-width:44ch}
.wrow__meta{grid-column:span 2;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.wrow__count{grid-column:span 2;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.wrow__go{
  grid-column:span 2;justify-self:end;text-align:right;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
}
.wrow:hover .wrow__go{color:var(--pink)}
.wrow__go i{display:inline-block;font-style:normal;transition:transform .15s steps(2)}
.wrow:hover .wrow__go i{transform:translateX(5px)}
/* hover preview - desktop only, never a card in the flow */
.wrow__peek{
  position:absolute;right:16%;top:50%;transform:translateY(-50%) scale(.96);
  width:170px;aspect-ratio:1/1;object-fit:cover;pointer-events:none;
  opacity:0;transition:opacity .18s steps(3),transform .18s steps(3);
  border:var(--px) solid var(--pink);z-index:2;
}
.wrow:hover .wrow__peek{opacity:1;transform:translateY(-50%) scale(1)}
/* the two video projects preview in 16:9; everything else stays square */
.wrow__peek--wide{width:270px;aspect-ratio:16/9}
/* let the preview sit cleanly over the meta columns */
.wrow__meta,.wrow__count{transition:opacity .18s steps(3)}
.wrow:hover .wrow__meta,.wrow:hover .wrow__count{opacity:.2}
@media (max-width:1023px){
  .wrow{grid-template-columns:repeat(8,minmax(0,1fr));row-gap:10px}
  .wrow__n{grid-column:span 1}
  .wrow__main{grid-column:span 7}
  .wrow__meta,.wrow__count{grid-column:span 3}
  .wrow__go{grid-column:span 2;justify-self:start;text-align:left}
  .wrow__peek{display:none}
}
@media (max-width:639px){
  .wrow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wrow__n{grid-column:span 4}
  .wrow__main{grid-column:span 4}
  .wrow__meta,.wrow__count{grid-column:span 2}
  .wrow__go{grid-column:span 4}
}

/* ---------- 17. CAPABILITIES + TOOLBOX (rows) ---------- */
.rowlist{border-top:var(--px) solid var(--line)}
.crow{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter);row-gap:10px;align-items:start;
  padding:28px 0;border-bottom:var(--px) solid var(--line-soft);
}
.crow__icon{grid-column:span 1;width:44px;height:44px;image-rendering:pixelated}
.crow__title{grid-column:span 3;font-family:var(--display);font-size:1.35rem;
  text-transform:uppercase;line-height:1.02;margin:0}
.crow__body{grid-column:span 8;margin:0;font-size:15px;color:var(--muted);
  font-weight:300;line-height:1.6;max-width:70ch}
.crow__label{grid-column:span 3;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan)}
.crow__chips{grid-column:span 9}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:13px;font-weight:600;color:var(--paper);
  padding:4px 0 4px 10px;border-left:var(--px) solid var(--pink);margin-right:14px}
@media (max-width:1023px){
  .crow{grid-template-columns:repeat(8,minmax(0,1fr))}
  .crow__icon{grid-column:span 1}
  .crow__title{grid-column:span 7}
  .crow__body{grid-column:span 8}
  .crow__label{grid-column:span 8}
  .crow__chips{grid-column:span 8}
}
@media (max-width:639px){
  .crow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .crow__icon,.crow__title,.crow__body,.crow__label,.crow__chips{grid-column:span 4}
}

/* ---------- 18. ABOUT + TIMELINE ---------- */
.about p{color:var(--muted);font-weight:300}
.about strong{color:var(--paper);font-weight:600}
.about__art canvas{width:100%;height:auto;image-rendering:pixelated;display:block}
.about__quote{
  margin:var(--gutter) 0 0;padding:18px 0 4px 20px;
  border-left:var(--px) solid var(--pink);
  font-size:15px;font-weight:300;line-height:1.6;color:var(--paper);
}
.about__quote cite{display:block;margin-top:12px;font-style:normal;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}

.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 26px 30px;border-left:var(--px) solid var(--line)}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-8px;top:4px;width:12px;height:12px;background:var(--line)}
/* currently-active roles read green */
.tl li[data-active="true"]::before{background:var(--lime)}
.tl li[data-active="true"]{border-left-color:var(--lime)}
.tl li[data-active="true"] .tl__date{color:var(--lime)}
.tl__role{font-family:var(--display);font-size:1.05rem;text-transform:uppercase;line-height:1.1}
.tl__org{font-size:13px;color:var(--cyan);font-weight:600;margin-top:3px}
.tl__date{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:5px}
.tl__desc{font-size:13.5px;color:var(--muted);font-weight:300;margin-top:8px;line-height:1.55}
.tag{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 8px;background:var(--panel-2);color:var(--muted)}
.tag--live{background:rgba(166,227,77,.14);color:var(--lime)}

/* ---------- 19. CONTACT ---------- */
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:15px;color:var(--paper);
  background:transparent;border:0;border-bottom:var(--px) solid var(--line);
  padding:10px 2px;width:100%;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--pink)}
.field select{appearance:none;cursor:pointer}
.field select option{background:var(--night);color:var(--paper)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:12px;color:var(--muted);margin:0}
.form__msg{
  display:none;padding:12px 0 12px 16px;font-size:13px;
  border-left:var(--px) solid var(--lime);color:var(--lime);
}
.form__msg[data-on="true"]{display:block}
.form__msg[data-tone="warn"]{border-left-color:var(--gold);color:var(--gold)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.info{display:flex;flex-direction:column;gap:20px}
.info__row{display:flex;flex-direction:column;gap:4px;
  border-top:var(--px) solid var(--line-soft);padding-top:14px}
.info__v{font-size:15px;font-weight:600;word-break:break-word}
.info__v a:hover{color:var(--pink)}

/* ---------- 20. FOOTER ---------- */
.footer{background:var(--void);border-top:var(--px) solid var(--line);padding:44px 0 30px}
.footer__brand{font-family:var(--display);font-size:clamp(2rem,7vw,4.6rem);
  text-transform:uppercase;line-height:.9;color:var(--panel-2)}
.footer__links{display:flex;flex-wrap:wrap;gap:18px}
.footer__links a{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.footer__links a:hover{color:var(--pink)}
.footer__base{margin-top:26px;padding-top:18px;border-top:var(--px) solid var(--line-soft);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- 21. REVEAL ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s steps(6),transform .5s steps(6)}
.rv[data-in="true"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ==========================================================
   22. CASE STUDY PAGES
   ========================================================== */
.back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
}
.back:hover{color:var(--pink)}
.case{padding:140px 0 0;position:relative}
.case__client{display:block;font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.case h1{margin:0 0 22px}
.case__lead{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--paper);font-weight:300;max-width:56ch}
.case__meta{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter);row-gap:18px;margin-top:56px;
  border-top:var(--px) solid var(--line);padding-top:22px;
}
.case__meta > div{grid-column:span 3}
.case__meta dt{font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.case__meta dd{margin:0;font-size:14px;font-weight:600}

.case__body{padding:clamp(56px,7vw,90px) 0 0}
.crow--text{align-items:start}
.crow--text h2{grid-column:span 3;margin:0;font-family:var(--display);
  font-size:1.5rem;text-transform:uppercase;line-height:1}
.crow--text p{grid-column-end:span 8;grid-column-start:5;margin:0;font-size:16px;
  color:var(--muted);font-weight:300;line-height:1.7;max-width:66ch}
@media (max-width:1023px){
  .case__meta > div{grid-column:span 4}
  .crow--text h2{grid-column:span 8}
  .crow--text p{grid-column-start:auto;grid-column-end:span 8}
}
@media (max-width:639px){
  .case__meta > div{grid-column:span 2}
  .crow--text h2,.crow--text p{grid-column-start:auto;grid-column-end:span 4}
}

/* gallery - the output */
.gal{row-gap:var(--gutter)}
.gitem{display:block;width:100%;text-align:left;position:relative}
.gitem figure{margin:0}
.gitem img{
  width:100%;height:auto;display:block;background:var(--void);
  border:var(--px) solid var(--line-soft);transition:border-color .15s steps(2);
}
.gitem:hover img{border-color:var(--pink)}
.gitem figcaption{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.5}
.gitem__link{display:block;margin-top:4px;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.gitem--tall img{max-height:760px;object-fit:cover;object-position:center top}

.nextup{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  border-top:var(--px) solid var(--line);padding-top:26px;margin-top:clamp(56px,7vw,90px);
}
.nextup__t{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.6rem);text-transform:uppercase;line-height:1}
.nextup a:hover .nextup__t{color:var(--pink)}

/* ---------- 23. LIGHTBOX (case-study galleries) ---------- */
.lb{position:fixed;inset:0;z-index:1000;display:none;background:rgba(5,4,10,.985);backdrop-filter:blur(4px)}
.lb[data-open="true"]{display:flex;flex-direction:column}
.lb__bar{display:flex;align-items:center;gap:16px;padding:14px var(--margin);
  border-bottom:var(--px) solid var(--line);flex:none}
.lb__title{font-family:var(--display);font-size:1.2rem;text-transform:uppercase;line-height:1}
.lb__client{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
.lb__pos{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--muted)}
.lb__x{width:40px;height:40px;background:var(--pink);color:var(--void);
  clip-path:polygon(var(--stair));display:grid;place-items:center;font-size:18px;font-weight:700;flex:none}
.lb__stage{flex:1 1 0;display:flex;align-items:center;justify-content:center;
  padding:20px var(--margin);min-height:0;position:relative;overflow:hidden}
.lb__stage img{width:100%;height:100%;object-fit:contain}
.lb__stage--scroll{align-items:flex-start;overflow-y:auto}
.lb__stage--scroll img{width:auto;height:auto;max-width:min(100%,980px);object-fit:contain}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:64px;background:var(--panel-2);color:var(--paper);
  display:grid;place-items:center;font-size:20px;font-weight:700;clip-path:polygon(var(--stair))}
.lb__nav:hover{background:var(--pink);color:var(--void)}
.lb__nav--prev{left:8px}
.lb__nav--next{right:8px}
.lb__cap{flex:none;padding:12px var(--margin) 10px;font-size:13px;color:var(--muted);
  text-align:center;border-top:var(--px) solid var(--line-soft)}
.lb__links{display:flex;gap:10px;justify-content:center;padding:0 var(--margin) 14px;flex-wrap:wrap}
.lb__links a{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 14px;background:var(--panel-2);color:var(--cyan)}
.lb__links a:hover{background:var(--cyan);color:var(--void)}
@media (max-width:639px){
  .lb__nav{width:38px;height:52px}
  .lb__title{font-size:1rem}
}

@media (max-width:1023px){ .portrait img{max-height:460px} }
@media (max-width:639px){  .portrait img{max-height:360px} }