/* =========================================================
   Karim Ali - Portfolio  (matches Designvorgabe)
   Font licenses:
   /assets/fonts/OFL-Anton.ee67e6ee2279.txt
   /assets/fonts/OFL-Archivo.108b4e57c9c7.txt
   /assets/fonts/OFL-Space-Mono.8e4ee42b2553.txt
   ========================================================= */
@font-face{
  font-family:"Anton";
  src:url("/assets/fonts/anton-latin-400.d0fa07ff63dd.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap
}
@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-latin-400-700.8f704806dbed.woff2") format("woff2");
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap
}
@font-face{
  font-family:"Space Mono";
  src:url("/assets/fonts/space-mono-latin-400.fb4a81a2d0a8.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap
}
@font-face{
  font-family:"Space Mono";
  src:url("/assets/fonts/space-mono-latin-700.2d46bd159b53.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap
}

:root{
  --bg:#060606;
  --panel:#0A0A0A;
  --ink:#F5F5F0;
  --lime:#D7FF3E;
  --lime-ink:#0B0B0B;
  --m1:#DDDDD6;   /* bright muted */
  --m2:#C6C6C0;   /* body text */
  --m3:#B9B9B4;   /* nav */
  --m4:#8C8C86;   /* labels */
  --m5:#BFBFB9;   /* case body */
  /* light section */
  --paper:#F1F1EC;
  --paper-2:#E7E7DF;
  --paper-ink:#0B0B0B;
  --paper-body:#3D3D36;
  --paper-mut:#6B6B63;
  --pad:clamp(24px,5vw,96px);
  --nav-h:76px;
  --anton:"Anton",Impact,"Arial Narrow",sans-serif;
  --archivo:"Archivo",Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--archivo);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,picture{display:block;max-width:100%}
a{color:var(--lime);text-decoration:none}
a:hover{color:#fff}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.display{font-family:var(--anton);font-weight:400;text-transform:uppercase;letter-spacing:.005em}
.accent{color:var(--lime)}
.eyebrow{font-family:var(--mono);font-size:17px;line-height:1.35;letter-spacing:.2em;text-transform:uppercase;color:var(--m4);margin:0 0 14px}
.eyebrow .accent{color:var(--lime)}
.eyebrow--dark{color:var(--paper-mut)}
.eyebrow--dark span{color:var(--paper-ink)}

:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.skip-link{position:fixed;left:12px;top:-120px;z-index:200;background:var(--lime);color:var(--lime-ink);font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding:10px 16px;transition:top .2s}
.skip-link:focus{top:12px}
#top,section[id],#main{scroll-margin-top:calc(var(--nav-h) + 12px)}
/* skip-link target: focus it programmatically without showing an outline box */
#main:focus{outline:none}

/* sr-only case source (revealed for no-JS) */
.cases-src{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cases-src img{height:auto}

/* ================= NAV ================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;background:rgba(6,6,6,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 var(--pad)}
.nav__brand{font-family:var(--anton);font-size:22px;letter-spacing:.04em;color:var(--ink)}
.nav__brand:hover{color:var(--ink)}
.nav__mid{display:flex;align-items:center;gap:40px}
.nav__links{display:flex;align-items:center;gap:32px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav__links a{color:var(--m3)}
.nav__links a:hover,.nav__links a[aria-current="true"]{color:var(--lime)}
.lang{display:none;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;padding-left:36px;border-left:1px solid rgba(255,255,255,.12)}
.lang__on{color:var(--lime)}
.lang__sep{color:rgba(255,255,255,.22)}
.lang__off{color:rgba(255,255,255,.28);cursor:not-allowed}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 8px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .28s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:58;background:#060606;padding:calc(var(--nav-h) + 32px) 24px 32px;display:flex;flex-direction:column;justify-content:space-between;height:100svh}
.mobile-menu[hidden]{display:none}
.mobile-menu ul{display:flex;flex-direction:column}
.mobile-menu li a{display:block;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1);color:var(--ink);font-family:var(--anton);font-size:34px;text-transform:uppercase}
.mobile-menu li:last-child a{border-bottom:0}
.mobile-menu__foot{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.14em}
.mobile-menu__foot a{color:var(--m1)}

/* ================= HERO ================= */
.hero{position:relative;height:100svh;min-height:640px;width:100%;overflow:hidden}
.hero__bg,.hero__bg img{position:absolute;inset:0;width:100%;height:100%}
.hero__bg img{object-fit:cover;object-position:50% 22%}
.hero__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,6,.72) 0%,rgba(6,6,6,.28) 38%,rgba(6,6,6,.86) 78%,#060606 100%)}
.hero__vign{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 30%,transparent 30%,rgba(6,6,6,.65) 100%)}
.hero__content{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) 72px;display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.hero__title{font-family:var(--anton);font-size:clamp(64px,11.5vw,196px);line-height:.82;letter-spacing:-.01em;text-transform:uppercase}
.hero__tag{margin-top:28px;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--m1)}
.hero__stat{flex:none;text-align:right;padding-bottom:8px}
.hero__stat-num{font-family:var(--anton);font-size:60px;line-height:.9;color:var(--lime)}
.hero__stat-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--m1);margin-top:6px}
.hero__stat-rule{width:100%;height:1px;background:rgba(255,255,255,.18);margin:20px 0 16px}
.hero__fields{font-family:var(--mono);font-size:11px;letter-spacing:.16em;line-height:2;text-transform:uppercase;color:var(--m4)}
.hero__scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);animation:kaCue 2.4s ease-in-out infinite}
.hero__scroll:hover{color:#fff}
@keyframes kaCue{0%,100%{transform:translateX(-50%) translateY(0);opacity:.5}50%{transform:translateX(-50%) translateY(8px);opacity:1}}

/* ================= SELECTED WORK ================= */
.work{padding:120px 0 130px}
.work__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:0 var(--pad);margin-bottom:44px}
.work__title{font-size:clamp(46px,5.4vw,88px);line-height:.92}
.work__nav{display:flex;align-items:center;gap:18px;flex:none;padding-bottom:10px}
.work__count{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--m4)}
.rbtn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:var(--ink);font-size:18px;display:grid;place-items:center;transition:.25s}
.rbtn:hover:not(:disabled){border-color:var(--lime);color:var(--lime)}
.rbtn:disabled{opacity:.3;cursor:default}
.rbtn--sm{width:44px;height:44px;font-size:16px}
.rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;scroll-padding-inline:var(--pad)}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.rail__track{display:flex;gap:20px;padding:12px var(--pad) 18px}
.rail__track::after{content:"";flex:none;width:1px}
.card{position:relative;flex:none;width:330px;scroll-snap-align:start;text-align:left;display:block}
.card__media{display:block;position:relative;width:100%;padding-bottom:125%;overflow:hidden;background:#121212}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__media img,.card:focus-visible .card__media img{transform:scale(1.06)}
.card__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,6,0) 35%,rgba(6,6,6,.9) 100%)}
.card__ring{position:absolute;inset:0;pointer-events:none;border:1px solid rgba(255,255,255,.1);transition:border-color .25s}
.card__num{position:absolute;top:16px;left:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.65)}
.card__year{position:absolute;top:14px;right:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--lime);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.card:hover .card__year,.card:focus-visible .card__year{opacity:1;transform:none}
.card__title{position:absolute;left:18px;right:18px;bottom:18px;font-family:var(--anton);font-size:25px;line-height:1.02;text-transform:uppercase}
.rail.is-dim .card:not(.is-active) .card__media img{filter:grayscale(.5) brightness(.72)}
.card.is-active .card__ring{border:2px solid var(--lime)}
.card.is-active .card__year{opacity:1;transform:none}

/* ================= ABOUT ================= */
.about{padding:20px 0 130px}
.about__grid{display:grid;grid-template-columns:.4fr 1.15fr;grid-template-areas:"eyebrow ." "rail body";column-gap:clamp(40px,6vw,96px);row-gap:14px;align-items:start;padding:0 var(--pad)}
.about__eyebrow{grid-area:eyebrow;margin-bottom:0}
.about__rail{grid-area:rail;border-top:2px solid var(--lime);padding-top:22px}
.about__body{grid-area:body}
.about__year{font-family:var(--anton);font-size:clamp(52px,5vw,76px);line-height:.9;color:var(--lime)}
.about__year-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--m1);margin-top:10px}
.about__fields{font-family:var(--mono);font-size:11px;letter-spacing:.16em;line-height:2;text-transform:uppercase;color:var(--m4);margin-top:28px}
.about__title{font-size:clamp(46px,5.4vw,88px);line-height:.92;margin-bottom:34px}
.about__body>p:not(.eyebrow){font-size:17px;line-height:1.7;color:var(--m2);max-width:62ch;margin-bottom:20px;text-wrap:pretty}
.about__body>p:not(.eyebrow):last-of-type{margin-bottom:0}
.about__quote{border-left:2px solid var(--lime);padding:6px 0 6px 28px;margin:16px 0 36px;font-family:var(--anton);font-size:clamp(24px,2.4vw,34px);line-height:1.16;text-transform:uppercase;color:var(--ink)}
.journey{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.journey li{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--m4);border:1px solid rgba(255,255,255,.14);padding:8px 12px}
.journey .is-now{color:var(--lime-ink);background:var(--lime);border-color:var(--lime)}
/* forces a line break so at most 4 chips sit on one row */
.journey li.journey__brk{flex-basis:100%;height:0;margin:0;padding:0;border:0}

/* ================= EXPERTISE (light) ================= */
.expertise{background:var(--paper);color:var(--paper-ink);padding:120px 0 110px}
.expertise__inner{padding:0 var(--pad)}
.expertise .eyebrow--dark span{display:inline-block;background:var(--lime);color:var(--lime-ink);padding:2px 7px}
.expertise__title{font-size:clamp(46px,5.4vw,88px);line-height:.92;max-width:20ch;margin-bottom:64px}
.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(11,11,11,.14)}
.ex-card{position:relative;background:var(--paper);padding:40px 44px 44px;transition:background .3s}
.ex-card:hover{background:var(--paper-2)}
.ex-card__head{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.ex-card__no{display:inline-grid;place-items:center;min-width:48px;background:var(--lime);color:var(--lime-ink);font-family:var(--anton);font-size:30px;line-height:1;padding:5px 8px}
.ex-card__head h3{font-family:var(--anton);font-size:clamp(24px,2.3vw,32px);line-height:1.04;text-transform:uppercase}
.ex-card p{font-size:16px;line-height:1.66;color:var(--paper-body);max-width:46ch;text-wrap:pretty}
.capabilities{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.capabilities__label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-mut);margin-right:8px}
.cap{font-family:var(--archivo);font-weight:600;font-size:15px;border:1px solid rgba(11,11,11,.2);padding:9px 14px}

/* ================= CONTACT ================= */
.contact{padding:130px 0 90px}
.contact__inner{padding:0 var(--pad)}
.contact__title{font-size:clamp(64px,9.5vw,180px);line-height:.86}
.contact__row{margin-top:40px;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:40px}
.contact__lead{font-size:19px;line-height:1.6;color:var(--m2);max-width:44ch;text-wrap:pretty}
.contact__cta{display:inline-flex;align-items:center;gap:18px;background:var(--lime);color:var(--lime-ink);font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:22px 34px;transition:.25s;white-space:nowrap}
.contact__cta:hover{background:var(--ink);color:var(--lime-ink)}
.contact__foot{margin-top:80px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px}
.contact__links{display:flex;flex-wrap:wrap;gap:28px;font-family:var(--mono);font-size:12px;letter-spacing:.14em}
.contact__links a{color:var(--m1)}
.contact__links a:hover{color:var(--lime)}
.contact__copy{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--m4)}

/* ================= LEGAL PAGES ================= */
.legal-page{min-height:100svh;background:var(--paper);color:var(--paper-ink)}
.legal-page a{color:inherit;text-decoration-color:rgba(11,11,11,.38);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.legal-page a:hover{color:#315000;text-decoration-color:#315000}
.legal-header{border-bottom:1px solid rgba(11,11,11,.16)}
.legal-header__inner{width:min(1120px,calc(100% - 48px));height:76px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.legal-brand{font-family:var(--anton);font-size:22px;letter-spacing:.04em;text-decoration:none!important}
.legal-back{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none!important}
.legal-main{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:clamp(64px,9vw,120px) 0 100px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,9vw,120px);align-items:start}
.legal-intro{position:sticky;top:48px}
.legal-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-mut);margin-bottom:18px}
.legal-title{font-family:var(--anton);font-size:clamp(58px,8vw,96px);line-height:.88;text-transform:uppercase;white-space:nowrap}
.legal-updated{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-mut)}
.legal-content{max-width:68ch}
.legal-content section{padding:0 0 38px;margin:0 0 38px;border-bottom:1px solid rgba(11,11,11,.14)}
.legal-content section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.legal-content h2{font-family:var(--anton);font-size:clamp(28px,3vw,40px);line-height:1.06;text-transform:uppercase;margin:0 0 18px}
.legal-content h3{font-family:var(--archivo);font-size:17px;font-weight:700;line-height:1.35;margin:24px 0 8px}
.legal-content p,.legal-content li,.legal-address{font-size:16px;line-height:1.72;color:var(--paper-body)}
.legal-content p+p{margin-top:14px}
.legal-content ul{list-style:disc;padding-left:22px;margin-top:14px}
.legal-content li+li{margin-top:8px}
.legal-address{font-style:normal}
.legal-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-mut);display:block;margin-bottom:4px}
.legal-note{border-left:3px solid var(--lime);padding-left:18px}
.legal-footer{border-top:1px solid rgba(11,11,11,.16)}
.legal-footer__inner{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:28px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-mut)}
.legal-footer__links{display:flex;gap:22px;flex-wrap:wrap}

@media (max-width:800px){
  .legal-main{grid-template-columns:1fr;gap:54px}
  .legal-intro{position:static}
  .legal-title{font-size:clamp(44px,13vw,72px);white-space:nowrap;overflow-wrap:normal}
}

@media (max-width:520px){
  .legal-header__inner,.legal-main,.legal-footer__inner{width:min(100% - 32px,1120px)}
  .legal-header__inner{height:68px}
  .legal-main{padding-top:52px;padding-bottom:72px}
  .legal-back{font-size:10px;letter-spacing:.1em}
}

/* ================= CASE PANEL (dialog) ================= */
.panel{padding:0;margin:0;border:0;max-width:none;max-height:none;background:var(--panel);color:var(--ink)}
.panel[open]{display:flex;flex-direction:column;position:fixed;inset:0 0 0 auto;width:min(1120px,88vw);height:100%;border-left:1px solid rgba(255,255,255,.14);animation:kaSlide .42s var(--ease) both}
.panel::backdrop{background:rgba(3,3,3,.8);backdrop-filter:blur(4px);animation:kaFade .25s ease both}
@keyframes kaSlide{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
@keyframes kaUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes kaFade{from{opacity:0}to{opacity:1}}
.panel__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 40px;background:rgba(10,10,10,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1)}
.panel__idx{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--m4)}
.panel__actions{display:flex;align-items:center;gap:10px}
.panel__close{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:22px;background:var(--lime);color:var(--lime-ink);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.panel__close:hover{background:var(--ink)}
.panel__scroll{flex:1;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.panel__scroll>*{flex:0 0 auto}
.panel__head{padding:40px 40px 0}
.panel__year{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--lime);margin-bottom:14px}
.panel__title{font-family:var(--anton);font-size:clamp(38px,4.4vw,70px);line-height:.94;text-transform:uppercase}
.panel__roles{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.panel__roles li{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--m1);border:1px solid rgba(255,255,255,.18);padding:7px 12px}
.panel__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:44px 40px}
.panel__col-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:16px}
.panel__col p{font-size:15.5px;line-height:1.68;color:var(--m5);margin-bottom:14px;text-wrap:pretty}
.panel__col p:last-child{margin-bottom:0}
.panel__media{display:grid;gap:12px;padding:0 40px 44px;margin:0 auto;width:100%}
.panel__media figure{margin:0;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#141414}
.panel__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.panel__media-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;display:block}
.panel__media-btn:hover img{transform:scale(1.04)}
.panel__media-btn:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.panel__originals{margin:0 40px 56px;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.originals__summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.originals__summary::-webkit-details-marker{display:none}
.originals__summary:hover{color:var(--lime)}
.originals__count{color:var(--m4)}
.originals__chevron{display:inline-grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid rgba(255,255,255,.22);border-radius:50%;transition:border-color .25s}
.originals__chevron svg{display:block;width:16px;height:16px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 50%;transition:transform .25s var(--ease)}
.panel__originals[open] .originals__chevron{border-color:var(--lime)}
.panel__originals[open] .originals__chevron svg{transform:rotate(180deg)}
.originals__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 0 24px}
.original-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.14);color:var(--ink);transition:border-color .25s,background .25s}
.original-card:hover{color:var(--ink);border-color:var(--lime);background:#151515}
.original-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#1d1d1d,#0d0d0d);isolation:isolate}
.original-card__media img{position:absolute;inset:0;width:100%;height:100%}
.original-card__backdrop{object-fit:cover;filter:blur(18px);opacity:.48;transform:scale(1.12)}
.original-card__image{z-index:1;object-fit:contain;transition:transform .5s var(--ease)}
.original-card:hover .original-card__image{transform:scale(1.025)}
.original-card__media.is-empty::after{content:"Preview";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--m4)}
.original-card__copy{display:flex;min-width:0;min-height:92px;flex-direction:column;justify-content:center;gap:9px;padding:14px 16px}
.original-card__platform{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.original-card__arrow{font-size:15px;line-height:1;transition:transform .2s var(--ease)}
.original-card:hover .original-card__arrow{transform:translate(2px,-2px)}
.original-card__title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:14px;line-height:1.35;color:var(--m1)}

/* ================= LIGHTBOX ================= */
.lightbox{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100svh;max-height:100svh;background:rgba(6,6,6,.94);overflow:hidden}
.lightbox[open]{display:grid;place-items:center;animation:kaFade .2s ease both}
.lightbox::backdrop{background:rgba(6,6,6,.6)}
.lightbox__img{max-width:92vw;max-height:88svh;width:auto;height:auto;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.7)}
.lightbox__close{position:fixed;top:18px;right:18px;width:46px;height:46px;border-radius:50%;background:rgba(20,20,20,.82);border:1px solid rgba(255,255,255,.22);color:var(--ink);font-size:1rem;display:grid;place-items:center;z-index:2}
.lightbox__close:hover{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
.lightbox__nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(20,20,20,.72);border:1px solid rgba(255,255,255,.22);color:var(--ink);font-size:1.2rem;display:grid;place-items:center;z-index:2}
.lightbox__prev{left:16px}
.lightbox__next{right:16px}
.lightbox__nav:hover{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
.lightbox__nav[hidden]{display:none}

/* ================= reveal ================= */
.reveal{transform:translateY(28px);transition:transform .7s var(--ease);will-change:transform}
.reveal.is-in{transform:none}

/* ================= no-JS fallback ================= */
.no-js .cases-src{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;max-width:960px;margin:0 auto;padding:0 var(--pad) 80px}
.no-js .case-src{display:block;margin-bottom:52px;padding-top:30px;border-top:1px solid rgba(255,255,255,.12)}
.no-js .case-src::before{content:attr(data-title) " · " attr(data-year);display:block;font-family:var(--anton);font-size:30px;text-transform:uppercase;margin-bottom:14px}
.no-js .cs-roles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.no-js .cs-roles li{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--m1);border:1px solid rgba(255,255,255,.18);padding:6px 10px}
.no-js .cs-idea,.no-js .cs-exec,.no-js .cs-impact{margin-bottom:18px;color:var(--m5);max-width:70ch}
.no-js .cs-cover{display:none}
.no-js .cs-imgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:18px 0}
.no-js .cs-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:14px}
.no-js .cs-links a{position:relative;display:flex;flex-wrap:wrap;gap:5px 8px;height:100%;border:1px solid rgba(255,255,255,.2);padding:12px 38px 12px 12px;font-family:var(--mono);font-size:11px}
.no-js .cs-link__platform,.no-js .cs-link__date{color:var(--lime);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.no-js .cs-link__title{flex-basis:100%;color:var(--ink);line-height:1.45}
.no-js .cs-link__arrow{position:absolute;top:12px;right:12px;color:var(--lime)}
.no-js .panel{display:none}

/* ================= RESPONSIVE - reproduces the design's mobile view ================= */
@media (max-width:720px){
  :root{--nav-h:56px}
  .nav__mid{display:none}
  .burger{display:flex}
  .nav__brand{font-size:17px}

  .hero{height:78svh;min-height:520px}
  .hero__bg img{object-position:50% 20%}
  .hero__content{padding:0 20px 30px;flex-direction:column;align-items:flex-start;gap:0}
  .hero__title{font-size:clamp(46px,15vw,60px);line-height:1.02}
  .hk{display:block}
  .hero__tag{margin-top:18px;font-size:11px;line-height:1.9;gap:2px}
  .hero__stat{display:block;text-align:left;margin-top:22px;padding-bottom:0}
  .hero__stat-num{font-size:40px}
  .hero__stat-num,.hero__stat-label{display:inline-block;vertical-align:middle}
  .hero__stat-label{margin:0 0 0 10px}
  .hero__stat-rule{margin:12px 0 10px}
  .hero__fields{display:flex;flex-wrap:wrap;gap:6px 16px;line-height:1.4}
  .hero__scroll{display:none}

  .work{padding:52px 0 40px}
  .work__head{padding:0 20px;margin-bottom:26px}
  .work__title{font-size:38px}
  .work__nav{display:none}
  .rail{overflow:visible;scroll-snap-type:none}
  .rail__track{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px}
  .rail__track::after{display:none}
  .card{width:100%}
  .card__num,.card__year{display:none}
  .card__title{left:12px;right:12px;bottom:12px;font-size:15px;line-height:1.05}

  .about{padding:48px 0}
  .about__grid{grid-template-columns:1fr;grid-template-areas:"eyebrow" "body";gap:14px;padding:0 20px}
  .about__rail{display:none}
  .about__title{font-size:38px;line-height:.94;margin-bottom:22px}
  .about__body>p:not(.eyebrow){font-size:15.5px;max-width:none}
  .about__quote{font-size:22px;padding-left:18px;margin:8px 0 24px}
  .journey{display:none}

  .expertise{padding:48px 0}
  .expertise__inner{padding:0 20px}
  .expertise__title{font-size:38px;margin-bottom:30px}
  .ex-grid{grid-template-columns:1fr}
  .ex-card{padding:24px 20px}
  .ex-card__no{font-size:24px}
  .ex-card__head h3{font-size:21px}
  .ex-card p{font-size:14.5px;max-width:none}
  .capabilities{margin-top:28px}

  .contact{padding:56px 0 40px}
  .contact__inner{padding:0 20px}
  .contact__title{font-size:52px;line-height:.88}
  .contact__row{flex-direction:column;align-items:stretch;gap:22px;margin-top:22px}
  .contact__lead{font-size:16px;max-width:none}
  .contact__cta{justify-content:space-between;padding:20px 22px;font-size:12px}
  .contact__foot{margin-top:36px;gap:16px}
  .contact__links{gap:18px;font-size:11px}

  /* case panel → full screen, media rail, stacked text (design mobile) */
  .panel[open]{width:100vw;inset:0;border-left:0;animation-name:kaUp}
  .panel__bar{padding:12px 14px}
  .panel__idx{font-size:10px}
  .panel__close{width:36px;height:36px;padding:0;border-radius:50%;justify-content:center;gap:0}
  .panel__close .panel__close-txt{display:none}
  .rbtn--sm{width:36px;height:36px;font-size:13px}
  .panel__head{padding:26px 20px 4px;order:1}
  .panel__title{font-size:30px}
  .panel__media{order:2;display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:8px;padding:20px 20px 4px;height:auto;max-width:none!important;grid-template-columns:none!important}
  .panel__media figure{flex:none;height:280px;width:224px;aspect-ratio:auto;scroll-snap-align:start}
  .panel__cols{order:3;grid-template-columns:1fr;gap:0;padding:24px 20px 0}
  .panel__col{margin-bottom:24px}
  .panel__originals{order:4;margin:26px 20px 40px}
  .originals__grid{grid-template-columns:1fr}
  .original-card__copy{min-height:84px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{transform:none}
  .hero__scroll{animation:none}
}