:root{
  --ink:#050507;
  --panel:#0c0d11;
  --panel-2:#111219;
  --line:rgba(244,243,240,.08);
  --line-2:rgba(244,243,240,.15);
  --text:#f4f3f0;
  --muted:#9fa0aa;
  --soft:#d3d3da;
  --accent:#59a5c9;
  --accent-bright:#7cc0e8;
  --accent-dim:rgba(89,165,201,.14);
  --radius:16px;
  --sans:'Figtree',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:var(--sans);font-size:17px;font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:var(--ink)}
html[lang="sr"] .en{display:none !important}
html[lang="en"] .sr{display:none !important}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
section{padding:120px 0}

/* Takumi-style type: clean sans headings, serif-italic accent words */
h1,h2,h3,h4{font-family:var(--sans);font-weight:400;letter-spacing:-.025em;line-height:1.08}
h1 em,h2 em,h3 em,.si{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:inherit}
.eyebrow{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:60;backdrop-filter:blur(16px);background:rgba(5,5,7,.6);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
nav.scrolled{border-color:var(--line);background:rgba(5,5,7,.85)}
.nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:76px;gap:1.5rem}
.logo{display:flex;align-items:center;gap:.7rem}
.logo img{height:34px;width:auto;max-width:100%;mix-blend-mode:screen}
.logo .wordmark{font-family:var(--sans);font-weight:500;font-size:1.05rem;letter-spacing:.34em;text-transform:uppercase}
.logo .wordmark small{display:block;font-weight:400;font-size:.58rem;letter-spacing:.52em;color:var(--muted)}
.nav-center{display:flex;gap:2.1rem;align-items:center;font-size:.93rem;justify-self:center}
.nav-center a{color:var(--muted);transition:color .2s}
.nav-center a:hover{color:var(--text)}
.nav-actions{display:flex;gap:1.2rem;align-items:center}
.lang-toggle{display:flex;align-items:center;gap:2px;border:1px solid var(--line-2);border-radius:999px;padding:3px}
.lang-toggle button{background:none;border:none;color:var(--muted);padding:.35rem .65rem;border-radius:999px;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;transition:background .2s,color .2s}
.lang-toggle button:hover{color:var(--text)}
.lang-toggle button.on{background:var(--accent);color:#fff}
.lang-toggle button.on:hover{color:#fff}
.nav-collapse{display:contents}
.menu-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:38px;height:38px;background:none;border:1px solid var(--line-2);border-radius:10px;cursor:pointer;padding:0}
.menu-btn span{display:block;width:16px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s}
nav.menu-open .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
nav.menu-open .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(max-width:820px){
  .logo .wordmark small{display:none}
  .nav-in{grid-template-columns:auto auto}
  .nav-collapse{display:none}
  .menu-btn{display:flex}
  nav.menu-open .nav-collapse{
    display:flex;flex-direction:column;align-items:center;gap:1.4rem;
    position:absolute;top:76px;left:0;right:0;
    background:rgba(5,5,7,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);padding:1.8rem 0
  }
  nav.menu-open .nav-center,nav.menu-open .nav-actions{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.7rem;border-radius:10px;font-weight:500;font-size:.98rem;border:1px solid var(--line-2);transition:transform .18s,box-shadow .25s,background .2s,border-color .2s,color .2s;position:relative}
.btn:hover{transform:translateY(-2px)}
button.btn{font-family:inherit;cursor:pointer}
.btn-cta{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-cta.btn-ghost{background:none}
.btn-cta::after{content:"→";transition:transform .2s}
.btn-cta:hover{background:var(--accent-bright);border-color:var(--accent-bright);color:#fff;box-shadow:0 8px 32px rgba(89,165,201,.35)}
.btn-cta:hover::after{transform:translateX(4px)}
.btn-outline{background:none;color:var(--text);border-color:var(--line-2)}
.btn-outline::after{content:"→";transition:transform .2s}
.btn-outline:hover{background:var(--panel);border-color:var(--accent);color:var(--accent-bright)}
.btn-outline:hover::after{transform:translateX(4px)}
.btn-sm{padding:.55rem 1.15rem;font-size:.88rem}
@media(max-width:820px){.btn{padding:.72rem 1.3rem;font-size:.88rem}.btn-sm{padding:.5rem 1rem;font-size:.82rem}}

/* hero */
.hero{position:relative;padding:190px 0 100px;overflow:hidden}
/* futuristic animated line grid behind hero */
.grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.grid-bg .lines{position:absolute;inset:-2px;
  background-image:linear-gradient(var(--accent) 1px,transparent 1px),linear-gradient(90deg,var(--accent) 1px,transparent 1px);
  background-size:64px 64px;opacity:.06;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 42%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 42%,#000 20%,transparent 75%);
  animation:gridpan 26s linear infinite}
@keyframes gridpan{to{background-position:64px 64px}}
.grid-bg .beam{position:absolute;height:1px;left:0;right:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0}
.grid-bg .b1{top:32%;animation:beam 7s ease-in-out infinite}
.grid-bg .b2{top:58%;animation:beam 9s ease-in-out 2.5s infinite}
.grid-bg .vbeam{position:absolute;width:1px;top:0;bottom:0;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);opacity:0}
.grid-bg .v1{left:24%;animation:vbeam 8s ease-in-out 1s infinite}
.grid-bg .v2{left:73%;animation:vbeam 10s ease-in-out 4s infinite}
@keyframes beam{0%{transform:translateX(-40%);opacity:0}50%{opacity:.5}100%{transform:translateX(40%);opacity:0}}
@keyframes vbeam{0%{transform:translateY(-30%);opacity:0}50%{opacity:.4}100%{transform:translateY(30%);opacity:0}}
.grid-bg .node{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 2px var(--accent);opacity:.35;animation:pulse 4s ease-in-out infinite}
.grid-bg .n1{left:24%;top:32%}.grid-bg .n2{left:73%;top:58%;animation-delay:1.5s}.grid-bg .n3{left:73%;top:32%;animation-delay:2.5s}
@keyframes pulse{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.6;transform:scale(1.3)}}
.aurora{position:absolute;inset:-25% -10% 0;pointer-events:none;z-index:0;filter:blur(70px);opacity:.5}
.aurora i{position:absolute;border-radius:50%;display:block}
.aurora .a1{width:560px;height:560px;left:4%;top:-8%;background:radial-gradient(circle,var(--accent-dim),transparent 65%);animation:drift1 24s ease-in-out infinite}
.aurora .a2{width:480px;height:480px;right:2%;top:16%;background:radial-gradient(circle,rgba(89,165,201,.10),transparent 65%);animation:drift2 28s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(46px,32px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-54px,26px)}}
.hero .wrap{position:relative;z-index:1;text-align:center}
.hero .eyebrow{margin-bottom:1.9rem;display:block}
.hero h1{font-size:clamp(2.1rem,6vw,4.4rem);max-width:1020px;margin:0 auto 1.8rem}
.hero h1 em{font-size:1.04em}
.hero .lead{color:var(--muted);font-size:1.15rem;max-width:620px;margin:0 auto 2.8rem}
.hero .lead b{color:var(--soft);font-weight:400}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.rise{opacity:0;transform:translateY(28px);filter:blur(8px);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none;filter:blur(0)}}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}.d4{animation-delay:.46s}

/* section heads */
.head{margin:0 auto 3.2rem;max-width:800px;text-align:center}
.head .eyebrow{margin-bottom:1.2rem;display:block}
.head h2{font-size:clamp(2rem,4.2vw,3.2rem)}
.head p{color:var(--muted);font-size:1.07rem;margin:1.1rem auto 0;max-width:640px}

/* SERVICES — tabbed, Takumi-style */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2.6rem;position:sticky;top:84px;z-index:2}
.tab{font-family:var(--sans);font-weight:500;font-size:.95rem;color:var(--muted);background:none;border:1px solid var(--line);border-radius:10px;padding:.7rem 1.4rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.tab:hover{color:var(--text);border-color:var(--line-2)}
.tab.on{color:var(--ink);background:var(--text);border-color:var(--text)}
.panel{display:none;animation:panelIn .5s cubic-bezier(.2,.7,.2,1)}
.panel.on{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel-top{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;margin-bottom:2.6rem;align-items:start}
.panel-top p{color:var(--muted);font-size:1.03rem}
.panel-top .cta-line{margin-top:1.6rem}
.panel-top>div:first-child{position:sticky;top:150px}
.panel-top .sstep{text-align:left}
.panel-top .svc-steps{margin-top:-91px}
.svc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:sstep}
.sstep{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:1.7rem 1.5rem;counter-increment:sstep;text-align:center;transition:border-color .25s,transform .25s}
.sstep:hover{transform:translateY(-4px);border-color:rgba(89,165,201,.4)}
.sstep::before{content:"Korak 0" counter(sstep);font-family:var(--mono);color:var(--accent);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.9rem}
html[lang="en"] .sstep::before{content:"Step 0" counter(sstep)}
.agency-card::before{display:none}
.sstep h4{font-size:1.08rem;font-weight:500;margin-bottom:.5rem}
.sstep p{color:var(--muted);font-size:.93rem;line-height:1.55}
.svc-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem}
.svc-chips i{font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;border:1px solid var(--line-2);border-radius:999px;padding:.28rem .75rem;color:var(--muted)}
@media(max-width:880px){
  .panel-top{grid-template-columns:1fr;gap:1.2rem}
  .svc-steps{grid-template-columns:1fr}
  .panel-top>div:first-child{position:static;text-align:center}
  .panel-top .sstep{text-align:center}
  .tabs{position:static;justify-content:center}
  .svc-chips{justify-content:center}
  .panel-top .svc-steps{
    margin-top:0;display:flex;grid-template-columns:none;
    overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;padding-bottom:10px
  }
  .panel-top .svc-steps .sstep{flex:0 0 82%;scroll-snap-align:start}
}

/* CASE STUDIES */
.case{display:grid;grid-template-columns:90px 1fr 300px;gap:2.2rem;padding:2.6rem 0;border-top:1px solid var(--line);align-items:center;
  position:relative;overflow:hidden;
  opacity:0;filter:blur(16px);transform:translateY(52px) scale(.97);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),filter 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s}
.case:last-child{border-bottom:1px solid var(--line)}
.case.in{opacity:1;filter:none;transform:none}
.case:hover{background:var(--panel);border-radius:var(--radius);border-color:transparent;box-shadow:0 0 0 1px var(--line)}
.case::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(124,192,232,.16) 50%,transparent 65%);
  transform:translateX(-140%)}
.case.shine::after{animation:caseShine 1.15s cubic-bezier(.2,.7,.2,1) .15s forwards}
@keyframes caseShine{to{transform:translateX(140%)}}
.case .num{font-family:var(--mono);color:var(--muted);font-size:.82rem;letter-spacing:.12em;position:relative;
  opacity:0;transform:translateX(-10px);transition:opacity .6s ease .35s,transform .6s ease .35s}
.case.in .num{opacity:1;transform:none}
.case h3{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:500;margin-bottom:.6rem;position:relative}
.case h3 em{font-size:1.05em}
.case p{color:var(--muted);font-size:.98rem;max-width:560px;line-height:1.6;position:relative}
.case .metric{text-align:right;position:relative}
.case .metric b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.05;color:var(--accent);
  opacity:0;transform:translateY(10px) scale(.9);transition:opacity .7s cubic-bezier(.2,.7,.2,1) .3s,transform .7s cubic-bezier(.2,.7,.2,1) .3s,text-shadow .6s}
.case.in .metric b{opacity:1;transform:none}
.case:hover .metric b{text-shadow:0 0 24px rgba(124,192,232,.45)}
.case .metric span{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.case .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.95rem;position:relative}
.case .chips i{font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;border:1px solid var(--line-2);border-radius:999px;padding:.24rem .68rem;color:var(--muted);transition:border-color .3s,color .3s}
.case:hover .chips i{border-color:rgba(89,165,201,.4);color:var(--soft)}
.case .visit{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.9rem;color:var(--accent);position:relative}
.case .visit::after{content:"↗";transition:transform .25s}
.case .visit:hover::after{transform:translate(2px,-2px)}
@media(max-width:820px){.case{grid-template-columns:1fr;gap:1rem;padding-left:1.2rem;padding-right:1.2rem}.case .metric{text-align:left}.case>div:nth-child(2){text-align:center}.case p{margin-left:auto;margin-right:auto}.case .chips{justify-content:center}}
@media(prefers-reduced-motion:reduce){.case{opacity:1;filter:none;transform:none}.case .num,.case .metric b{opacity:1;transform:none}.case::after{display:none}}

/* TESTIMONIALS — Takumi-style cards */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.testi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem 2rem;display:flex;flex-direction:column;gap:1.3rem;transition:border-color .25s,transform .25s}
.testi:hover{transform:translateY(-4px);border-color:rgba(89,165,201,.35)}
.testi .stars{color:var(--accent);letter-spacing:.15em;font-size:.95rem}
.testi blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.45rem;line-height:1.35}
.testi ul{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.testi ul li{color:var(--muted);font-size:.9rem;padding-left:1.1rem;position:relative;line-height:1.5}
.testi ul li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.testi .who{display:flex;align-items:center;gap:.85rem;margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line)}
.testi .avatar{width:42px;height:42px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.8rem;color:var(--accent)}
.testi .who b{display:block;font-size:.95rem;font-weight:500}
.testi .who span{font-size:.8rem;color:var(--muted)}
.testi-attrib{color:var(--muted);font-size:.95rem}
.testi-attrib b{color:var(--text);font-weight:500}
.testi-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--accent);font-size:.9rem}
.testi-more::after{content:"→";transition:transform .25s}
.testi-more:hover::after{transform:translateX(4px)}
.testi-full{max-width:720px;margin:0 auto}
@media(max-width:880px){.testi-grid{grid-template-columns:1fr}}

/* PROCESS — 5 steps, Takumi copy rhythm */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.pstep{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:1.8rem 1.4rem;cursor:pointer;text-align:center;
  filter:blur(7px);opacity:.32;transform:translateY(16px) scale(.96);
  transition:border-color .4s,background .4s,box-shadow .5s,filter 1.1s cubic-bezier(.2,.7,.2,1),opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.pstep.loaded{filter:blur(0);opacity:1;transform:translateY(0) scale(1)}
.pstep.shaded{filter:blur(1.5px);opacity:.68;transform:translateY(0) scale(.99);transition:border-color .4s,background .4s,box-shadow .5s,filter .6s cubic-bezier(.2,.7,.2,1),opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}

/* connecting line — each segment draws itself from one card's number to the
   next, persisting once drawn so the finished sequence reads as one
   continuous line from card 1 through card 5 */
.proc-connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:5}
.proc-connector-line{stroke:var(--accent-bright);stroke-width:2.5px;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 6px rgba(124,192,232,.75)) drop-shadow(0 0 16px rgba(89,165,201,.4))}
@media(max-width:560px){.proc-connector{display:none}}
@media(prefers-reduced-motion:reduce){.proc-connector{display:none}}
.pstep.active{border-color:var(--accent-bright);background:var(--panel-2);box-shadow:0 0 0 1px rgba(124,192,232,.25),0 18px 44px rgba(89,165,201,.22)}
.pstep.reloading{filter:blur(5px);opacity:.5;transform:none;transition:filter .32s ease,opacity .32s ease}
.pstep:hover{transform:translateY(-5px);border-color:rgba(89,165,201,.4);background:var(--panel-2)}
.pstep.shaded:hover{transform:translateY(-2px) scale(.98)}
.pstep:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pstep .pnum{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:1.6rem;display:block;margin-bottom:.9rem;line-height:1;transition:color .4s}
.pstep.active .pnum{color:var(--accent-bright)}
.pstep h4{font-size:1.02rem;font-weight:500;margin-bottom:.5rem}
.pstep p{color:var(--muted);font-size:.88rem;line-height:1.55}
@media(max-width:1020px){.proc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .proc{
    grid-template-columns:none;display:flex;
    overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;padding-bottom:10px
  }
  .proc .pstep{flex:0 0 78%;scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){.pstep{filter:none;opacity:1;transform:none}.pstep.shaded{filter:none;opacity:.55}}

/* ABOUT */
.about{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:3.6rem;align-items:center}
.about-content{text-align:center}
.about-photo{aspect-ratio:4/5;border-radius:var(--radius);border:1px solid var(--line);background:radial-gradient(280px 280px at 30% 20%,var(--accent-dim),transparent),var(--panel);display:flex;align-items:center;justify-content:center;font-family:var(--mono);color:var(--muted);font-size:.78rem;letter-spacing:.1em;overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.about p{color:var(--muted);margin-top:1.1rem}
.about p b{color:var(--text);font-weight:500}
@media(max-width:820px){
  .about{grid-template-columns:1fr;row-gap:1.8rem}
  .about-photo{max-width:320px;justify-self:center;order:2}
  .about-content{display:contents}
  .about-heading{order:1}
  .about-text{order:3}
}

/* FINAL CTA */
.final{position:relative;text-align:center;border-top:1px solid var(--line);overflow:hidden}
.final .glow{position:absolute;left:50%;top:0;transform:translateX(-50%);width:760px;height:420px;background:radial-gradient(closest-side,var(--accent-dim),transparent);filter:blur(50px);pointer-events:none}
.final h2{font-size:clamp(2.3rem,5.4vw,4.2rem);margin-bottom:1.2rem;position:relative}
.final p{color:var(--muted);max-width:520px;margin:0 auto 2.6rem;position:relative}
.final .logo-big{height:64px;max-width:100%;mix-blend-mode:screen;margin-bottom:2.2rem;position:relative}

/* footer */
footer{border-top:1px solid var(--line);padding:3.4rem 0 2.4rem;margin-top:60px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:2.4rem;margin-bottom:2.6rem}
.foot-grid h5{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;font-weight:500}
.foot-grid a{display:block;color:var(--soft);font-size:.93rem;margin-bottom:.55rem;transition:color .2s}
.foot-grid a:hover{color:var(--text)}
.foot-grid button.foot-book{display:block;width:100%;text-align:left;background:none;border:none;padding:0;font-family:inherit;color:var(--soft);font-size:.93rem;margin-bottom:.55rem;cursor:pointer;transition:color .2s}
.foot-grid button.foot-book:hover{color:var(--text)}
.foot-grid img{height:44px;max-width:100%;mix-blend-mode:screen}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--line);padding-top:1.8rem}
@media(max-width:820px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* reveal */
.reveal{opacity:.35;transform:translateY(24px);transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}.rise,.reveal{opacity:1;transform:none;filter:none}.aurora,.final .glow,.grid-bg{display:none}}

/* case links (external + case-study) */
.case .case-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.case .visit.case-detail::after{content:"→"}
@media(max-width:820px){.case .case-links{justify-content:center}}

/* PROJECT DETAIL PAGES */
.proj-hero{padding:170px 0 70px;position:relative}
.proj-back{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;margin-bottom:2rem;transition:color .2s}
.proj-back:hover{color:var(--accent)}
.proj-back::before{content:"←"}
.proj-hero h1{font-size:clamp(2rem,5vw,3.6rem);max-width:900px;margin-bottom:1.3rem}
.proj-hero .lead{color:var(--muted);font-size:1.1rem;max-width:640px;margin-bottom:1.8rem}
.proj-meta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:.4rem}
.visit{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;position:relative}
a.visit{color:var(--accent)}
a.visit::after{content:"↗";transition:transform .25s}
a.visit:hover::after{transform:translate(2px,-2px)}
span.visit{color:var(--muted)}
.proj-meta .chips{display:flex;gap:.5rem;flex-wrap:wrap}
.proj-meta .chips i{font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;border:1px solid var(--line-2);border-radius:999px;padding:.28rem .75rem;color:var(--muted)}

/* .shot: a single screenshot frame. Placeholder (no image) keeps the old
   fixed-ratio box; .has-img sizes to the image's own aspect ratio so
   nothing is ever cropped. */
.shot{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid var(--line);background:radial-gradient(280px 280px at 30% 20%,var(--accent-dim),transparent),var(--panel);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);color:var(--muted);font-size:.75rem;letter-spacing:.08em;padding:1rem}
.shot.has-img{aspect-ratio:auto;padding:0;overflow:hidden;display:block;margin:0;border-color:var(--line-2);background:var(--panel);box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.shot.has-img img{width:100%;height:auto;display:block;object-fit:contain;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,.7,.2,1),filter .3s ease}
.shot.has-img img:hover{transform:scale(1.012);filter:brightness(1.05)}
.shot.has-img figcaption{padding:.6rem .9rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--line);text-align:left}
.gallery-note{margin:1rem 0 0;font-size:.85rem;font-style:italic;color:var(--muted)}

/* legacy top-of-page grid (kept for any page still using it) */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:1rem}
.gallery .shot.wide{grid-column:span 2}
@media(max-width:880px){.gallery{grid-template-columns:1fr 1fr}.gallery .shot.wide{grid-column:span 2}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}.gallery .shot.wide{grid-column:span 1}}

/* interleaved storytelling shots — sit inside the proj-block text column */
.shot-row{display:grid;grid-template-columns:1fr;gap:14px;margin:1.6rem 0}
.shot-row.two-up{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.shot-row.two-up{grid-template-columns:1fr}}

/* full-width finale shot — breaks out of the narrow text column for the
   single most important screenshot on a page */
.shot-finale{margin-top:.5rem}
.shot-finale .shot.has-img{border-radius:calc(var(--radius) + 6px)}

/* lightbox — vanilla JS/CSS, no dependencies */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(5,5,7,.94);display:flex;align-items:center;justify-content:center;padding:6vh 5vw;opacity:0;pointer-events:none;transition:opacity .25s ease}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:100%;max-height:100%;display:block;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.65);cursor:default}
.lightbox-close{position:fixed;top:22px;right:26px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(5,5,7,.7);color:var(--text);font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;z-index:301}
.lightbox-close:hover{border-color:var(--accent);color:var(--accent-bright)}
@media(prefers-reduced-motion:reduce){.lightbox{transition:none}.shot.has-img img{transition:none}}

.proj-block{display:grid;grid-template-columns:90px 1fr;gap:2.2rem;padding:2.6rem 0;border-top:1px solid var(--line)}
.proj-block:last-child{border-bottom:1px solid var(--line)}
.proj-block .num{font-family:var(--mono);color:var(--muted);font-size:.82rem;letter-spacing:.12em}
.proj-block h3{font-size:clamp(1.3rem,2.3vw,1.7rem);font-weight:500;margin-bottom:.7rem}
.proj-block h3 em{font-size:1.05em}
.proj-block p{color:var(--muted);font-size:1rem;max-width:640px}
.proj-block p+p{margin-top:.9rem}
@media(max-width:820px){.proj-block{grid-template-columns:1fr;gap:.8rem}}

.proj-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.proj-stat{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:1.8rem 1.6rem;text-align:center}
.proj-stat b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.8rem,3.2vw,2.4rem);color:var(--accent);margin-bottom:.4rem}
.proj-stat span{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media(max-width:820px){.proj-stats{grid-template-columns:1fr}}

/* WORK CARDS — photo + title + description + CTA, used on the homepage
   highlights and on the full "our work" listing. The whole card is a link;
   the photo gets its own framed border+shadow (matching the .shot treatment
   on project pages), and "See case study" is plain white text + arrow. */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem;margin-top:1rem}
.work-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:visible;padding:10px 10px 0;cursor:pointer;transition:transform .25s,border-color .25s}
.work-card:hover{transform:translateY(-4px);border-color:rgba(89,165,201,.35)}
.work-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--panel-2);border-radius:calc(var(--radius) - 6px);border:1px solid var(--line-2);box-shadow:0 20px 45px -18px rgba(0,0,0,.55)}
.work-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.work-card .thumb.placeholder{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--muted);padding:1rem;background:radial-gradient(280px 280px at 30% 20%,var(--accent-dim),transparent),var(--panel-2)}
.work-card .body{padding:1.5rem .7rem 1.8rem;display:flex;flex-direction:column;gap:1rem;flex:1}
.work-card .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.work-card h3{font-size:1.28rem;font-weight:500}
.work-card p{color:var(--muted);font-size:.95rem;line-height:1.6;flex:1}
.work-card .chips{display:flex;gap:.5rem;flex-wrap:wrap}
.work-card .chips i{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;border:1px solid var(--line-2);border-radius:999px;padding:.22rem .62rem;color:var(--muted)}
@media(max-width:480px){.work-card .chips i{font-size:.62rem;padding:.2rem .55rem}}
.work-card .btn.btn-cta{align-self:flex-start;background:none;border:none;color:#fff;padding:0;box-shadow:none}
.work-card .btn.btn-cta:hover{background:none;border:none;color:#fff;box-shadow:none;transform:none}
@media(max-width:820px){.work-grid{grid-template-columns:1fr}}

.work-grid.all-work{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.work-grid.all-work{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.work-grid.all-work{grid-template-columns:1fr}}