/* portfolio.css — page-specific styles (loaded after main.css) */
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--chalk)}
/* ── CURSOR ── */
#cur{position:fixed;width:6px;height:6px;background:var(--volt);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform;transition:width .2s var(--ease-out),height .2s var(--ease-out),background .2s,border-radius .25s}
#cur-f{position:fixed;width:32px;height:32px;border:1px solid rgba(64,102,255,.38);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);will-change:transform;transition:width .35s var(--ease-out),height .35s var(--ease-out),border-color .2s,opacity .2s}
body.s-work #cur{width:72px;height:72px;background:var(--volt);border-radius:var(--r-md);opacity:.9}
body.s-work #cur-f{opacity:0}
.ldr-fill{height:100%;background:var(--volt);width:0%;transition:width .08s linear}
.btn--primary{background:var(--volt);color:#fff;border:1px solid rgba(64,102,255,.5);padding:13px 24px;font-size:13px;box-shadow:0 0 0 0 rgba(64,102,255,0)}
.btn--outline-dark{background:transparent;color:var(--lt-text);border:1px solid var(--lt-line2);padding:13px 24px;font-size:13px}
.btn--outline-dark:hover{border-color:var(--lt-line3);background:rgba(0,0,0,.04)}
.btn--sm{padding:9px 18px;font-size:12px}
.nav.on-light .nav__wordmark{color:var(--lt-text2)}
.nav__link:hover{color:var(--chalk)}
.nav__link.active{color:var(--chalk)}
.nav.on-light .nav__link{color:var(--lt-text3)}
.nav.on-light .nav__link:hover,.nav.on-light .nav__link.active{color:var(--lt-text)}
.nav__dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(34,197,94,.3);animation:ping 2.5s ease-in-out infinite}
.mnav__link:hover,.mnav__link.active{color:var(--chalk)}
.eyebrow--lt{color:var(--lt-volt)}
.eyebrow--lt .eyebrow__mark{background:var(--lt-volt)}
.section-title{font-family:var(--ff-display);font-size:clamp(2.2rem,4.5vw,4rem);letter-spacing:-.045em;line-height:1.06;color:var(--chalk);margin-bottom:18px}
.section-title--lt{color:var(--lt-text)}
.section-sub{font-size:clamp(.92rem,1.1vw,1.05rem);color:var(--chalk3);line-height:1.78;max-width:48ch}
.section-sub--lt{color:var(--lt-text2)}
/* ═══════════════════════════════════════════════════════════
   PORTFOLIO HERO — editorial, no mockup, pure typography
   The headline IS the creative statement
═══════════════════════════════════════════════════════════ */
.port-hero{
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-h);
  padding-bottom: clamp(4rem,8vw,7rem);
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
/* Atmospheric depth — asymmetric, editorial */
.port-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 20%,rgba(64,102,255,.08) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 5% 90%,rgba(64,102,255,.05) 0%,transparent 60%);
  pointer-events:none;
}
/* Full-width rule at top — matches homepage */
.port-hero__rule{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--volt) 40%,var(--volt2) 60%,transparent 100%);
  opacity:.35;
}
/* Precise grid — concentrated on right */
.port-hero__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100px 100px;
  mask-image:radial-gradient(ellipse 55% 80% at 80% 30%,black 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 55% 80% at 80% 30%,black 0%,transparent 70%);
}
/* Grain */
.port-hero::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  background-size:180px;pointer-events:none;opacity:.6;
}
.port-hero__inner{
  position:relative;z-index:2;
  width:100%;
}
/* Breadcrumb */
.breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:var(--chalk4);
  font-family:var(--ff-body);
  margin-bottom:clamp(2rem,4vw,3.5rem);
  opacity:0;
}
.breadcrumb a{color:var(--chalk4);transition:color .18s}
.breadcrumb a:hover{color:var(--chalk3)}
.breadcrumb__sep{color:var(--chalk4);opacity:.4}
.breadcrumb__cur{color:var(--chalk3)}
/* The big editorial headline */
.port-hero__h1{
  font-family:var(--ff-display);
  font-size:clamp(3.5rem,8vw,9rem);
  font-weight:700;
  letter-spacing:-.055em;
  line-height:.93;
  color:var(--chalk);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.port-hero__h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.port-hero__h1 .word{display:inline-block}
.port-hero__h1 em{
  font-style:italic;font-weight:400;
  color:var(--chalk3);
}
/* Bottom row — count + description + CTA in one horizontal strip */
.port-hero__foot{
  display:flex;align-items:flex-end;
  justify-content:space-between;
  gap:clamp(2rem,5vw,6rem);
  flex-wrap:wrap;
  padding-top:clamp(1.5rem,3vw,2.5rem);
  border-top:1px solid var(--line);
  opacity:0;
}
.port-hero__count{
  display:flex;flex-direction:column;gap:4px;
  flex-shrink:0;
}
.port-hero__count-n{
  font-family:var(--ff-display);
  font-size:clamp(2.5rem,5vw,5rem);
  font-weight:700;letter-spacing:-.05em;
  color:var(--chalk);line-height:1;
}
.port-hero__count-l{
  font-size:11px;color:var(--chalk4);
  letter-spacing:.1em;text-transform:uppercase;
}
.port-hero__desc{
  font-size:clamp(.92rem,1.1vw,1.05rem);
  color:var(--chalk3);line-height:1.75;
  max-width:44ch;flex:1;
}
.port-hero__cta{flex-shrink:0}
/* ═══════════════════════════════════════════════════════════
   FILTER BAR — category navigation
═══════════════════════════════════════════════════════════ */
.filter-bar{
  background:var(--lt-bg);
  border-bottom:1px solid var(--lt-line);
  padding-block:clamp(1.2rem,2vw,1.6rem);
  position:sticky;top:var(--nav-h);
  z-index:100;
}
.filter-bar__inner{
  display:flex;align-items:center;
  justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.filter-tabs{
  display:flex;align-items:center;
  gap:4px;flex-wrap:wrap;
}
.filter-tab{
  font-size:12px;font-weight:500;
  padding:7px 16px;border-radius:var(--r-f);
  color:var(--lt-text3);
  background:transparent;border:1px solid transparent;
  cursor:none;transition:all .2s;letter-spacing:.02em;
  font-family:var(--ff-body);
}
.filter-tab:hover{color:var(--lt-text2);background:var(--lt-bg2)}
.filter-tab.active{
  color:var(--lt-volt);
  background:var(--lt-volt-dim);
  border-color:rgba(51,88,240,.2);
}
.filter-count{
  font-size:11px;color:var(--lt-text3);
  font-family:var(--ff-mono);
  letter-spacing:.06em;
}
/* ═══════════════════════════════════════════════════════════
   WORK GRID — the portfolio itself
   Layout: alternating large/small for visual rhythm
═══════════════════════════════════════════════════════════ */
.portfolio-section{background:var(--lt-bg);padding-block:clamp(5rem,9vw,8rem)}
.work-grid-main{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
/* Featured card — spans 8 cols */
.pcard--featured{grid-column:span 8}
/* Standard card — spans 4 cols */
.pcard--standard{grid-column:span 4}
/* Wide card — spans 7 cols */
.pcard--wide{grid-column:span 7}
/* Narrow card — spans 5 cols */
.pcard--narrow{grid-column:span 5}
/* Full width — spans all 12 */
.pcard--full{grid-column:span 12}
/* The project card */
.pcard{
  background:var(--lt-bg4);
  border:1px solid var(--lt-line);
  border-radius:var(--r-xl);
  overflow:hidden;
  position:relative;
  transition:border-color .35s,transform .5s var(--ease-out),box-shadow .5s;
  display:flex;flex-direction:column;
}
.pcard:hover{
  border-color:var(--lt-line2);
  transform:translateY(-5px);
  box-shadow:0 24px 64px rgba(0,0,0,.12);
}
/* Image zone */
.pcard__img{
  overflow:hidden;position:relative;
  flex-shrink:0;
}
.pcard--featured .pcard__img{height:clamp(280px,38vw,480px)}
.pcard--standard .pcard__img{height:clamp(200px,22vw,300px)}
.pcard--wide .pcard__img{height:clamp(240px,28vw,380px)}
.pcard--narrow .pcard__img{height:clamp(200px,22vw,300px)}
.pcard--full .pcard__img{height:clamp(300px,40vw,520px)}
.pcard__img img{
  width:100%;height:100%;
  transition:transform 1s var(--ease-out),filter .6s;
  filter:brightness(.75) saturate(.85);
}
.pcard:hover .pcard__img img{
  transform:scale(1.04);
  filter:brightness(.88) saturate(1);
}
/* Dark gradient at bottom */
.pcard__img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(15,14,12,.5) 100%);
}
/* Hover overlay with CTA */
.pcard__overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(244,242,238,.75);
  backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s;
}
.pcard:hover .pcard__overlay{opacity:1}
/* Meta section */
.pcard__meta{
  padding:clamp(1.25rem,2.2vw,1.75rem);
  flex:1;display:flex;flex-direction:column;
}
.pcard__tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.ptag{
  font-size:10px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--lt-text3);background:var(--lt-bg2);
  border:1px solid var(--lt-line);border-radius:var(--r-f);
  padding:3px 10px;
}
.ptag--volt{
  color:var(--lt-volt);
  background:rgba(51,88,240,.07);
  border-color:rgba(51,88,240,.18);
}
.pcard__title{
  font-family:var(--ff-display);
  font-size:clamp(1.05rem,1.8vw,1.5rem);
  font-weight:700;letter-spacing:-.025em;
  color:var(--lt-text);margin-bottom:8px;
}
.pcard__desc{
  font-size:13px;color:var(--lt-text2);line-height:1.65;
  flex:1;margin-bottom:clamp(1rem,1.8vw,1.5rem);
}
/* Stats row inside card */
.pcard__stats{
  display:flex;gap:clamp(1rem,2vw,2rem);
  padding-top:clamp(1rem,1.5vw,1.25rem);
  border-top:1px solid var(--lt-line);
  margin-top:auto;
}
.pstat strong{
  display:block;
  font-family:var(--ff-display);
  font-size:clamp(1rem,1.6vw,1.35rem);
  font-weight:700;letter-spacing:-.03em;
  color:var(--lt-volt);line-height:1;
}
.pstat span{font-size:10.5px;color:var(--lt-text3);margin-top:3px;display:block}
/* Award ribbon */
.pcard__award{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;
  background:var(--gold-dim);border:1px solid rgba(184,150,90,.22);
  border-radius:var(--r-f);font-size:10px;font-weight:600;
  color:var(--gold);letter-spacing:.04em;
  margin-bottom:10px;width:fit-content;
}
.pcard__award svg{width:10px;height:10px}
/* Chip inside image (top-left corner of featured) */
.pcard__year-tag{
  position:absolute;top:16px;left:16px;z-index:3;
  font-size:10px;font-weight:600;letter-spacing:.08em;
  color:rgba(255,255,255,.6);background:rgba(0,0,0,.4);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-f);padding:4px 10px;
}
/* ═══════════════════════════════════════════════════════════
   RESULTS STRIP — light section
═══════════════════════════════════════════════════════════ */
.results-strip{
  background:var(--lt-bg);
  border-top:1px solid var(--lt-line);
  border-bottom:1px solid var(--lt-line);
}
.results-strip__inner{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.rs-col{
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,2.5rem);
  border-right:1px solid var(--lt-line);
  position:relative;overflow:hidden;
  transition:background .3s;
}
.rs-col:last-child{border-right:none}
.rs-col::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--lt-volt),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.rs-col:hover::after{transform:scaleX(1)}
.rs-col:hover{background:rgba(51,88,240,.03)}
.rs-n{
  font-family:var(--ff-display);
  font-size:clamp(2.5rem,5.5vw,5rem);
  font-weight:700;letter-spacing:-.06em;
  color:var(--lt-text);line-height:.95;
  margin-bottom:10px;display:block;
}
.rs-label{font-size:13px;color:var(--lt-text2);line-height:1.5;max-width:22ch}
/* ═══════════════════════════════════════════════════════════
   TESTIMONIAL STRIP — single quote, dark
═══════════════════════════════════════════════════════════ */
.testi-strip{
  background:var(--ink);
  padding-block:clamp(6rem,11vw,10rem);
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);
}
.testi-strip::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(64,102,255,.05) 0%,transparent 65%);
  pointer-events:none;
}
.testi-strip__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(4rem,8vw,10rem);
  align-items:center;
}
/* Huge decorative Q on left */
.ts-quote-mark{
  font-family:var(--ff-display);
  font-size:clamp(10rem,20vw,20rem);
  font-weight:700;line-height:.8;
  color:rgba(64,102,255,.06);
  margin-bottom:-2rem;
  letter-spacing:-.05em;
  user-select:none;
}
.ts-quote{
  font-family:var(--ff-display);
  font-size:clamp(1.3rem,2.5vw,2.2rem);
  font-weight:400;letter-spacing:-.03em;
  line-height:1.42;color:var(--chalk);
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.ts-quote strong{font-weight:700}
.ts-quote em{font-style:italic;color:var(--chalk3)}
.ts-author{display:flex;align-items:center;gap:14px}
.ts-av{
  width:48px;height:48px;border-radius:var(--r-sm);
  overflow:hidden;border:1px solid var(--line2);flex-shrink:0;
}
.ts-av img{width:100%;height:100%}
.ts-name{font-family:var(--ff-display);font-size:14px;font-weight:700;display:block;margin-bottom:2px}
.ts-role{font-size:12px;color:var(--chalk4)}
.ts-stars{display:flex;gap:3px;margin-bottom:5px}
.ts-stars svg{width:12px;height:12px;fill:var(--gold)}
/* Right side — 3 mini testimonials stacked */
.ts-mini-stack{display:flex;flex-direction:column;gap:0}
.ts-mini{
  padding-block:clamp(1.2rem,2.2vw,1.75rem);
  border-bottom:1px solid var(--line);
  transition:background .3s;
}
.ts-mini:first-child{padding-top:0}
.ts-mini:last-child{border-bottom:none}
.ts-mini:hover{background:rgba(64,102,255,.02)}
.ts-mini__text{font-size:13.5px;color:var(--chalk3);line-height:1.7;margin-bottom:12px}
.ts-mini__author{display:flex;align-items:center;gap:10px}
.ts-mini__av{
  width:32px;height:32px;border-radius:var(--r-sm);
  overflow:hidden;border:1px solid var(--line);flex-shrink:0;
}
.ts-mini__av img{width:100%;height:100%}
.ts-mini__av--init{
  background:var(--volt-dim);color:var(--volt);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;
}
.ts-mini__name{font-size:12px;font-weight:600;font-family:var(--ff-display);display:block}
.ts-mini__role{font-size:11px;color:var(--chalk4)}
/* ═══════════════════════════════════════════════════════════
   CTA BAND
═══════════════════════════════════════════════════════════ */
.cta-band{
  background:var(--ink2);
  border-top:1px solid var(--line);
  padding-block:clamp(6rem,11vw,10rem);
  text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 70% at 50% 50%,rgba(64,102,255,.07) 0%,transparent 65%);
  pointer-events:none;
}
.cta-band::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 10%,var(--volt) 50%,transparent 90%);
  opacity:.3;
}
.cta-band__inner{position:relative;z-index:1;max-width:780px;margin-inline:auto}
.cta-scarcity{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;
  background:rgba(184,150,90,.08);border:1px solid rgba(184,150,90,.2);
  border-radius:var(--r-f);font-size:11px;font-weight:600;
  color:var(--gold);letter-spacing:.05em;
  margin-bottom:2rem;
}
.cta-scarcity__dot{
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  animation:ping-gold 2s ease-in-out infinite;
}
.cta-band__h{
  font-family:var(--ff-display);
  font-size:clamp(2.5rem,5.5vw,5rem);
  font-weight:700;letter-spacing:-.05em;
  line-height:1;color:var(--chalk);margin-bottom:1.25rem;
}
.cta-band__p{
  font-size:clamp(.9rem,1.1vw,1.05rem);
  color:var(--chalk3);line-height:1.75;
  max-width:48ch;margin-inline:auto;margin-bottom:2.5rem;
}
.cta-band__actions{
  display:flex;align-items:center;justify-content:center;
  gap:1.25rem;flex-wrap:wrap;margin-bottom:1.25rem;
}
.cta-band__note{font-size:11.5px;color:var(--chalk4);display:flex;align-items:center;justify-content:center;gap:8px}
/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .work-grid-main{grid-template-columns:repeat(6,1fr)}
  .pcard--featured,.pcard--full{grid-column:span 6}
  .pcard--standard,.pcard--wide,.pcard--narrow{grid-column:span 3}
  .testi-strip__inner{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav__links,.nav__r{display:none}
  .burger{display:flex}
  .work-grid-main{grid-template-columns:1fr}
  .pcard--featured,.pcard--standard,.pcard--wide,.pcard--narrow,.pcard--full{grid-column:span 1}
  .results-strip__inner{grid-template-columns:repeat(2,1fr)}
  .rs-col:nth-child(2){border-right:none}
  .rs-col:nth-child(3){border-top:1px solid var(--lt-line)}
  .rs-col:nth-child(4){border-top:1px solid var(--lt-line);border-right:none}
  .footer__nav{grid-template-columns:repeat(2,1fr)}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  .results-strip__inner{grid-template-columns:1fr}
  .rs-col{border-right:none;border-bottom:1px solid var(--lt-line)}
  .rs-col:last-child{border-bottom:none}
  .footer__nav{grid-template-columns:1fr}
  .port-hero__foot{flex-direction:column;align-items:flex-start;gap:1.5rem}
}