@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Variable.woff2") format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../assets/fonts/Satoshi-Variable.woff2") format("woff2");font-weight:300 900;font-display:swap}

:root{--bg:#08080a;--surface:#0e0e10;--ink:#f2f1ec;--muted:#aaa79f;--brass:#c9a06c;--ember:#e0443c;--line:rgba(242,241,236,.13);--gutter:clamp(1.25rem,3.5vw,4.5rem);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;overflow-x:hidden;background:radial-gradient(circle at 86% 4%,rgba(224,68,60,.1),transparent 33rem),var(--bg);color:var(--ink);font-family:"Satoshi","Segoe UI",sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.portfolio-open{overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.portfolio-header{position:fixed;z-index:30;top:0;left:0;right:0;height:78px;display:flex;align-items:center;gap:2rem;padding:0 var(--gutter);border-bottom:1px solid var(--line);background:rgba(8,8,10,.82);backdrop-filter:blur(16px)}
.portfolio-brand{display:inline-flex;text-decoration:none}
.portfolio-brand img{display:block;width:clamp(132px,11vw,184px);height:auto;filter:brightness(1.34) contrast(.96) saturate(.2)}
.portfolio-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.8vw,3rem)}
.portfolio-nav a{text-decoration:none;color:rgba(242,241,236,.76);font-size:.72rem}
.portfolio-nav a[aria-current=page],.portfolio-nav a:hover{color:var(--brass)}
.portfolio-languages{display:flex;padding:.18rem;border:1px solid var(--line);border-radius:99px}
.portfolio-languages button{min-width:44px;min-height:44px;padding:.38rem .52rem;border:0;border-radius:99px;background:transparent;font-size:.75rem;cursor:pointer}
.portfolio-languages button[aria-pressed=true]{background:var(--brass);color:#08080a}
.portfolio-menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent}
.portfolio-menu-toggle span{display:block;width:15px;height:1px;margin:4px auto;background:currentColor}
.portfolio-mobile-menu{position:fixed;z-index:25;inset:78px 0 auto;padding:2rem var(--gutter);border-bottom:1px solid var(--line);background:#0b0b0d}
.portfolio-mobile-menu a{display:block;padding:.7rem 0;text-decoration:none;font:520 1.8rem/1 "Clash Display",sans-serif}

.portfolio-hero{position:relative;min-height:84vh;display:grid;align-content:end;padding:calc(78px + clamp(5rem,10vw,9rem)) var(--gutter) clamp(4rem,8vw,7rem);overflow:hidden;border-bottom:1px solid var(--line)}
.portfolio-hero::before{content:attr(data-ghost);position:absolute;left:-2vw;bottom:-.07em;color:transparent;-webkit-text-stroke:1px rgba(201,160,108,.07);font:650 clamp(11rem,31vw,35rem)/.68 "Clash Display",sans-serif;letter-spacing:-.06em;pointer-events:none}
.portfolio-hero__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(5rem,12vw,11rem);color:var(--brass);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase}
.portfolio-hero__count{display:flex;align-items:center;gap:.8rem}
.portfolio-hero__count::before{content:"";width:3rem;height:1px;background:var(--ember)}
.portfolio-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(16rem,.55fr);gap:clamp(2rem,8vw,9rem);align-items:end}
.portfolio-hero h1{margin:0;font:600 clamp(4rem,10.5vw,6rem)/.82 "Clash Display",sans-serif;letter-spacing:-.04em}
.portfolio-hero h1 span{display:block;color:var(--brass)}
.portfolio-hero__copy{max-width:38ch;margin:0;color:var(--muted);font-size:clamp(.95rem,1.3vw,1.15rem)}

.portfolio-archive{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;padding:1px;background:var(--line)}
.portfolio-card{grid-column:span 4;min-width:0;background:var(--bg);opacity:0;transform:translateY(35px);transition:opacity .8s var(--ease),transform .8s var(--ease),background .35s}
.portfolio-archive.is-ready .portfolio-card{opacity:1;transform:none;transition-delay:calc(var(--card-index) * 70ms)}
.portfolio-card:nth-child(5n+1){grid-column:span 7}
.portfolio-card:nth-child(5n+2){grid-column:span 5}
.portfolio-card__open{width:100%;display:block;padding:0;border:0;background:transparent;text-align:left;cursor:pointer}
.portfolio-card__media{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(201,160,108,.08),transparent 48%),#0b0b0d}
.portfolio-card:nth-child(5n+1) .portfolio-card__media,.portfolio-card:nth-child(5n+2) .portfolio-card__media{aspect-ratio:16/9}
.portfolio-card--video:nth-child(3n) .portfolio-card__media{aspect-ratio:9/12}
.portfolio-archive[data-portfolio-archive="video"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.portfolio-archive[data-portfolio-archive="video"] .portfolio-card:nth-child(n){grid-column:span 1}
.portfolio-archive[data-portfolio-archive="video"] .portfolio-card:nth-child(n) .portfolio-card__media{aspect-ratio:9/16}
.portfolio-card__media img,.portfolio-card__media video{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.04);transition:transform 1.1s var(--ease),filter .6s}
.portfolio-card__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.08),transparent 55%,rgba(8,8,10,.48));transition:background .5s}
.portfolio-card:hover .portfolio-card__media img,.portfolio-card:hover .portfolio-card__media video{transform:scale(1.035);filter:saturate(1) contrast(1.02)}
.portfolio-card:hover .portfolio-card__shade{background:linear-gradient(180deg,transparent,transparent 58%,rgba(8,8,10,.32))}
.portfolio-card__aperture{width:70px;aspect-ratio:1;background:url("../favicon.png") center/contain no-repeat;opacity:.18}
.portfolio-card__type{position:absolute;z-index:2;top:1rem;font-size:.58rem;font-weight:800;letter-spacing:.14em}
.portfolio-card__type{right:1rem;color:var(--brass)}
.portfolio-card__body{display:grid;grid-template-columns:1fr auto;gap:.6rem 1.5rem;padding:1.2rem clamp(1rem,2vw,1.6rem) 1.6rem;border-top:1px solid var(--line)}
.portfolio-card__meta{color:var(--brass);font-size:.61rem;letter-spacing:.11em;text-transform:uppercase}
.portfolio-card__body strong{grid-column:1/-1;font:520 clamp(1.4rem,2.4vw,2.4rem)/.94 "Clash Display",sans-serif;letter-spacing:-.035em}
.portfolio-card__desc{grid-column:1/-1;max-width:58ch;color:var(--muted);font-size:.82rem}
.portfolio-card__services{grid-column:1/-1;padding-top:.8rem;border-top:1px solid var(--line);color:rgba(242,241,236,.64);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.portfolio-archive-empty{grid-column:1/-1;min-height:60vh;display:grid;place-content:center;justify-items:center;padding:5rem var(--gutter);text-align:center;background:#0b0b0d}
.portfolio-archive-empty span{color:var(--brass);font-size:.65rem;letter-spacing:.14em}
.portfolio-archive-empty h2{margin:1rem 0 .5rem;font:560 clamp(2.5rem,6vw,5.5rem)/.88 "Clash Display",sans-serif}
.portfolio-archive-empty p{max-width:46ch;margin:0;color:var(--muted)}

.portfolio-cta{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end;padding:clamp(6rem,12vw,11rem) var(--gutter);background:radial-gradient(circle at 80% 20%,rgba(224,68,60,.09),transparent 28rem),#0b0b0d}
.portfolio-cta span{color:var(--brass);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em}
.portfolio-cta h2{max-width:11ch;margin:.8rem 0 0;font:560 clamp(3rem,7vw,6rem)/.86 "Clash Display",sans-serif;letter-spacing:-.04em}
.portfolio-cta a{display:inline-flex;align-items:center;min-height:54px;padding:0 1.25rem;background:var(--ember);color:#08080a;text-decoration:none;font-weight:800}
.portfolio-footer{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding:3rem var(--gutter);border-top:1px solid var(--line);color:var(--muted);font-size:.75rem}
.portfolio-footer img{display:block;width:145px;height:auto;aspect-ratio:1200/309;object-fit:contain;filter:brightness(1.34) saturate(.2)}
.portfolio-footer__meta{display:grid;justify-items:end;gap:.25rem;text-align:right}.portfolio-footer__meta p{margin:0}.company-id{display:block;margin-top:.35rem;max-width:48rem;font-size:.76em;line-height:1.55;letter-spacing:.025em;color:inherit}.portfolio-footer__meta nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem 1rem}.portfolio-footer__meta a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:3px}.portfolio-footer__meta a:hover{color:var(--ink)}

.portfolio-lightbox{position:fixed;z-index:80;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(5,5,6,.97);backdrop-filter:blur(18px)}
.portfolio-lightbox__bar,.portfolio-lightbox__foot{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1rem var(--gutter);border-bottom:1px solid var(--line)}
.portfolio-lightbox__bar>div{display:grid;gap:.15rem}
.portfolio-lightbox__bar span{color:var(--brass);font-size:.58rem;letter-spacing:.12em}
.portfolio-lightbox__bar strong{font:520 1rem/1 "Clash Display",sans-serif}
.portfolio-lightbox__bar button{width:44px;height:44px;border:1px solid var(--line);background:transparent;font-size:1.4rem}
.portfolio-lightbox__stage{min-height:0;display:grid;place-items:center;padding:1rem var(--gutter);overflow:hidden;container-type:size}
.portfolio-lightbox__stage img,.portfolio-lightbox__stage video{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.45)}
.portfolio-lightbox.is-reel .portfolio-lightbox__stage img,.portfolio-lightbox.is-reel .portfolio-lightbox__stage video{width:min(100cqw,56.25cqh);height:min(100cqh,177.778cqw);max-width:none;max-height:none;aspect-ratio:9/16;object-fit:cover;object-position:center;min-width:0;min-height:0}
.portfolio-lightbox__foot{border-top:1px solid var(--line);border-bottom:0}
.portfolio-lightbox__foot>p{max-width:60ch;margin:0;color:var(--muted);font-size:.75rem}
.portfolio-lightbox__actions{display:flex;align-items:center;gap:.55rem}
.portfolio-lightbox__actions a,.portfolio-lightbox__actions button{min-width:44px;min-height:44px;padding:.55rem .75rem;border:1px solid var(--line);background:transparent;text-decoration:none;font-size:.8rem}
.portfolio-lightbox__actions a{border-color:var(--brass);color:var(--brass)}
.portfolio-lightbox__actions span{min-width:58px;text-align:center;color:var(--muted);font-size:.65rem}

@media(max-width:850px){
  .portfolio-nav{display:none}
  .portfolio-menu-toggle{display:block;margin-left:auto}
  .portfolio-hero{min-height:76vh}
  .portfolio-hero__grid{grid-template-columns:1fr}
  .portfolio-archive{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portfolio-card,.portfolio-card:nth-child(n){grid-column:span 1}
  .portfolio-card:nth-child(n) .portfolio-card__media{aspect-ratio:4/3}
  .portfolio-archive[data-portfolio-archive="video"] .portfolio-card:nth-child(n) .portfolio-card__media{aspect-ratio:9/16}
}
@media(max-width:580px){
  .portfolio-header{height:70px}
  .portfolio-header{gap:.55rem}
  .portfolio-brand img{width:112px}
  .portfolio-languages{margin-left:auto}
  .portfolio-languages button{min-width:40px;min-height:40px}
  .portfolio-menu-toggle{margin-left:0}
  .portfolio-mobile-menu{inset:70px 0 auto}
  .portfolio-hero{padding-top:calc(70px + 4rem);min-height:74vh}
  .portfolio-hero__top{gap:1rem;margin-bottom:4rem;font-size:.58rem;letter-spacing:.11em}
  .portfolio-hero__count{gap:.45rem;white-space:nowrap}
  .portfolio-hero__count::before{width:1.35rem}
  .portfolio-hero h1{max-width:100%;font-size:clamp(2.7rem,13.2vw,4rem);letter-spacing:-.055em}
  .portfolio-archive{grid-template-columns:1fr}
  .portfolio-card__body strong{font-size:1.55rem}
  .portfolio-cta{grid-template-columns:1fr}
  .portfolio-cta a{justify-self:start}
  .portfolio-footer{align-items:start;flex-direction:column}.portfolio-footer__meta{justify-items:start;text-align:left}.portfolio-footer__meta nav{justify-content:flex-start}
  .portfolio-lightbox__foot{align-items:flex-start;flex-direction:column}
  .portfolio-lightbox__foot>p{display:none}
  .portfolio-lightbox__actions{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .portfolio-card{opacity:1;transform:none}
}