/* ============================================================
   FLAVOR® — Design System
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --bg:#f2f1ec;
  --paper:#faf8f4;
  --ink:#0c0c0b;
  --ink-2:#6b6964;
  --ink-3:#a4a29b;
  --line:rgba(12,12,11,0.16);
  --line-strong:rgba(12,12,11,0.6);
  --sq:#e7e5e0;
  --sq-hover:#deddd6;
  --mono:'IBM Plex Mono','Courier New',Courier,monospace;
  --grotesk:'IBM Plex Mono',monospace;
  --cond:'IBM Plex Mono',monospace;
  --pad:clamp(20px,4vw,56px);
}
[data-theme="dark"]{
  --bg:#0a0a0a;
  --paper:#0d0d0d;
  --ink:#f4f2ec;
  --ink-2:#9d9b94;
  --ink-3:#5a5852;
  --line:rgba(244,242,236,0.18);
  --line-strong:rgba(244,242,236,0.5);
  --sq:#161616;
  --sq-hover:#1d1d1d;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;transition:background .4s ease;}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.5;}
body,.page,.nav,.foot,.legal{transition:background .4s ease,color .4s ease,border-color .4s ease;}
.page{width:100%;background:var(--paper);min-height:100vh;}
a{color:inherit;text-decoration:none;}
img{display:block;width:100%;height:100%;object-fit:cover;}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);border-bottom:0.5px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:20;transition:background .35s,backdrop-filter .35s,box-shadow .35s,-webkit-backdrop-filter .35s;}
.home-nav{background:transparent;border-bottom:none;}
.home-nav + .home-hero-illust{margin-top:-50px;}
.home-nav .nav-logo{filter:invert(1);}
.home-nav .links,.home-nav .links a{color:#fff;}
.home-nav .links a:hover,.home-nav .links a.on{opacity:0.7;}
[data-theme="dark"] .home-nav .nav-logo{filter:none;}
.nav.scrolled{background:var(--nav-scrolled-bg,rgba(255,255,255,0.72));-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:0 1px 0 var(--line),0 8px 32px var(--nav-scrolled-shadow,rgba(12,12,11,0.06));}
[data-theme="dark"] .nav.scrolled{--nav-scrolled-bg:rgba(13,13,13,0.72);--nav-scrolled-shadow:rgba(0,0,0,0.3);}
[data-theme="dark"] .nav .links.open{background:rgba(10,10,10,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.nav .mark{display:flex;align-items:center;}
.nav-logo{height:18px;width:auto;object-fit:contain;filter:none;}
[data-theme="dark"] .nav-logo{filter:invert(1);}
.nav .links{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-2);}
.nav .links a{transition:color .25s;}
.nav .links a:hover,.nav .links a.on{opacity:0.5;}
.hamburger{display:none;}

/* ============================================================
   MASTHEAD & TYPOGRAPHY
   ============================================================ */
.head{display:flex;align-items:flex-end;justify-content:space-between;padding:clamp(32px,6vw,72px) var(--pad) clamp(16px,2.4vw,26px);gap:24px;}
.logo{font-family:var(--mono);font-size:clamp(40px,10vw,120px);line-height:0.9;letter-spacing:-0.03em;font-weight:700;text-transform:uppercase;}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:0.03em;color:var(--ink-2);text-align:right;max-width:260px;padding-bottom:12px;line-height:1.7;}
.meta{display:flex;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);border-top:0.5px solid var(--line-strong);border-bottom:0.5px solid var(--line-strong);}
.meta span{padding:9px var(--pad);border-right:0.5px solid var(--line);}
.meta .grow{flex:1;}
.meta span:last-child{border-right:none;margin-left:auto;text-align:right;}

/* ============================================================
   SECTION LABEL
   ============================================================ */
.seclabel{display:flex;align-items:center;justify-content:space-between;padding:13px var(--pad);border-bottom:0.5px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);}
.seclabel a:hover{color:var(--ink);}

/* ============================================================
   SHARED PICTURE COMPONENT
   ============================================================ */
.pic{position:relative;background:var(--sq);overflow:hidden;cursor:pointer;display:block;}
.pic::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--sq) 0%,var(--sq-hover) 50%,var(--sq) 100%);background-size:200% 100%;animation:shimmer 1.8s ease-in-out infinite;z-index:1;transition:opacity .4s;}
.pic.loaded::before{opacity:0;pointer-events:none;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.pic .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--ink-3);}
.pic img,.pic video{opacity:0;transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1),clip-path 1.1s cubic-bezier(.77,0,.18,1);}
.pic.loaded img,.pic.loaded video{opacity:1;}
.pic .fig{position:absolute;bottom:14px;left:16px;font-family:var(--mono);font-size:9px;letter-spacing:0.14em;color:#fff;mix-blend-mode:difference;z-index:2;}
.pic .tagtop{position:absolute;top:14px;left:16px;font-family:var(--mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;z-index:2;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{display:grid;grid-template-columns:0.3fr 1fr;gap:clamp(24px,4vw,48px);padding:clamp(36px,4vw,56px) var(--pad);margin-top:clamp(40px,5vw,60px);background:#2d4a3e;color:#c8d9cf;}
.foot a{color:#c8d9cf;}
.foot a:hover{color:#fff;}
.foot b{color:#7a9e8a;}
.foot-left{display:flex;flex-direction:column;justify-content:space-between;gap:24px;}
.foot-left .foot-img{width:80%;max-width:280px;overflow:hidden;border-radius:2px;}
.foot-left .foot-img img{width:100%;height:auto;object-fit:contain;}
.foot-left .foot-say{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:#7a9e8a;}
.foot-left .foot-say a{display:block;color:#fff;font-size:12px;margin-top:4px;}
.foot-right{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);}
.foot-row{display:grid;grid-template-columns:200px 1fr;gap:16px;padding-bottom:clamp(16px,2vw,24px);border-bottom:0.5px solid rgba(200,217,207,0.15);}
.foot-row-label{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:#7a9e8a;}
.foot-row-body{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;line-height:1.7;display:flex;flex-direction:column;gap:3px;}
.foot-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:clamp(20px,3vw,32px);}
.foot-logo-wrap{display:block;}
.foot-logo{height:clamp(24px,3vw,36px);width:auto;}
.foot .cols{display:flex;gap:60px;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-2);text-transform:uppercase;}
.foot .cols .c{display:flex;flex-direction:column;gap:6px;}
.foot .cols .c b{color:var(--ink);font-weight:400;margin-bottom:4px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;}
.foot .cols a{transition:color .25s;}
.foot .cols a:hover{color:var(--ink);}
.foot .big{display:inline-block;transition:opacity .3s;}
.foot-logo{height:clamp(28px,4vw,48px);width:auto;object-fit:contain;filter:none;}
[data-theme="dark"] .foot-logo{filter:invert(1);}
.foot .big:hover{opacity:0.5;}
.legal{padding:14px var(--pad) 52px;font-family:var(--mono);font-size:9px;letter-spacing:0.06em;color:#7a9e8a;display:flex;justify-content:space-between;text-transform:uppercase;background:#2d4a3e;}
@media(max-width:860px){
  .foot{grid-template-columns:1fr;}
  .foot-left{order:2;}
  .foot-right{order:1;}
  .foot-row{grid-template-columns:1fr;gap:6px;}
  .foot-left .foot-img{width:60%;max-width:220px;}
}

/* ============================================================
   ANIMATIONS & TRANSITIONS
   ============================================================ */
[data-rise]{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);}
[data-rise].in{opacity:1;transform:translateY(0);}

/* ── image reveal ── */
.clip-reveal{opacity:0;transform:scale(1.04);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1.2s cubic-bezier(.2,.8,.2,1);}
.clip-reveal.revealed{opacity:1;transform:scale(1);}
.pic:hover .clip-reveal.revealed{transform:scale(1.04);}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;will-change:transform;}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#fff;border-radius:50%;transition:opacity .2s;mix-blend-mode:difference;}
.cursor-dot.hide{opacity:0;}
.cursor-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid #fff;border-radius:50%;opacity:0.4;transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),margin .3s cubic-bezier(.2,.8,.2,1),opacity .3s,border-color .3s;mix-blend-mode:difference;}
.cursor-ring.expand{width:56px;height:56px;margin:-28px 0 0 -28px;opacity:0.2;border-color:#fff;}
html{cursor:none;}
a,button,.pic,.proj,.item,.qd{cursor:none;}
@media(max-width:860px),(pointer:coarse){
  .cursor-dot,.cursor-ring{display:none;}
  html,a,button,.pic,.proj,.item,.qd{cursor:auto;}
}

/* ============================================================
   LIVE CLOCK
   ============================================================ */
.nav-clock{text-align:right;}
.nav-clock .clock-city{display:block;color:var(--ink);font-size:10px;letter-spacing:0.06em;}
.nav-clock .clock-time{display:block;color:var(--ink-3);font-size:9px;letter-spacing:0.04em;font-variant-numeric:tabular-nums;}

/* ── stagger entrance ── */
.stagger-item{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);}
.stagger-item.stagger-in{opacity:1;transform:translateY(0);}

/* ── reduced motion ── */
@media(prefers-reduced-motion:reduce){
  [data-rise],.clip-reveal,.stagger-item{transition:none !important;opacity:1 !important;transform:none !important;}
  .clip-reveal{opacity:1 !important;transform:none !important;}
  .nav{transition:none !important;}
}

/* ── logo letter spread ── */
.logo-char{display:inline-block;transition:letter-spacing .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1);}
.logo:hover .logo-char{letter-spacing:0.04em;}

/* ============================================================
   THEME TOGGLE & NAV CONTROLS
   ============================================================ */
.nav-ctrl{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-2);background:none;border:none;cursor:pointer;padding:0;transition:color .25s;}
.nav-ctrl:hover{color:var(--ink);}
.home-nav .nav-ctrl{color:#fff;}
.home-nav .nav-ctrl:hover{opacity:0.7;}
.theme-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;}
.theme-toggle input{position:absolute;opacity:0;width:0;height:0;}
.toggle-track{width:24px;height:14px;background:var(--sq);border:0.5px solid var(--line);border-radius:7px;position:relative;transition:background .3s,border-color .3s;}
.toggle-track::after{content:'';position:absolute;top:2px;left:2px;width:8px;height:8px;background:var(--ink-3);border-radius:50%;transition:transform .3s,background .3s;}
[data-theme="dark"] .toggle-track{background:var(--ink-2);border-color:var(--ink-2);}
[data-theme="dark"] .toggle-track::after{transform:translateX(10px);background:var(--paper);}
.home-nav .toggle-track{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.4);}
.home-nav .toggle-track::after{background:#fff;}


/* ============================================================
   HOME PAGE
   ============================================================ */

/* ── statement ── */
.home-statement{padding:0 var(--pad) clamp(48px,8vw,120px);}
.home-statement-text{font-size:11px;line-height:1.6;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-2);max-width:560px;font-weight:400;margin:0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.home-statement p{font-size:11px;line-height:1.6;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-2);max-width:560px;}
.home-hero-illust{width:100%;margin:0 0 clamp(80px,12vw,160px);padding:0;position:relative;}
.home-hero-illust img{width:100%;height:100vh;display:block;object-fit:cover;}
.home-hero-illust .hero-night{display:none;}
[data-theme="dark"] .home-hero-illust .hero-day{display:none;}
[data-theme="dark"] .home-hero-illust .hero-night{display:block;}
.hero-cta{position:absolute;bottom:clamp(16px,3vw,32px);left:var(--pad);font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.7);}
.no-illust .home-hero-illust{display:none;}
.no-illust .home-statement{padding-top:clamp(48px,8vw,120px);}
.no-illust .p-hero{display:none;}
.no-illust .pr-duo-img{display:none;}
.no-illust .pr-locations{display:none;}
.no-illust .home-nav{border-bottom:0.5px solid var(--line);}
.no-illust .home-nav .nav-logo{filter:none;}
.no-illust .home-nav .links,.no-illust .home-nav .links a{color:var(--ink-2);}
[data-theme="dark"] .no-illust .home-nav .nav-logo{filter:invert(1);}
.home-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);margin-top:clamp(24px,3vw,40px);padding-top:14px;border-top:0.5px solid var(--line);}

/* ── grid ── */
.home-grid{display:flex;flex-direction:column;}

.hg-row{display:grid;gap:clamp(4px,0.5vw,8px);padding:0 0 clamp(4px,0.5vw,8px);}
.hg-3{grid-template-columns:2fr 1fr 1fr;}
.hg-3r{grid-template-columns:1fr 1fr 2fr;}
.hg-2{grid-template-columns:1fr 1fr;}
.hg-2w{grid-template-columns:1.6fr 1fr;}
.hg-2wr{grid-template-columns:1fr 1.6fr;}

.hg-card{display:block;text-decoration:none;color:inherit;overflow:hidden;}
.hg-img{aspect-ratio:4/3;overflow:hidden;position:relative;}
.hg-img img{transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.hg-card:hover .hg-img img{transform:scale(1.04);}
.hover-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s;}
.hover-vid.on{position:static;opacity:1;}
.hg-card:hover .hover-vid{opacity:1;}

.hg-info{padding:clamp(10px,1.4vw,16px) clamp(4px,0.8vw,12px);display:flex;flex-direction:column;gap:3px;}
.hg-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.hg-client{font-family:var(--mono);font-size:10px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-3);}
.hg-cat{font-family:var(--mono);font-size:10px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-3);text-align:right;flex-shrink:0;}
.hg-info h3{font-family:var(--mono);font-weight:400;font-size:clamp(11px,1.1vw,13px);line-height:1.2;text-transform:uppercase;letter-spacing:0.02em;color:var(--ink);transition:opacity .3s;}
.hg-card:hover h3{opacity:0.5;}

/* trio row */
.hg-trio-row{grid-template-columns:repeat(3,1fr);}

/* explore tail */
.home-explore{border-top:0.5px solid var(--line-strong);}
.home-explore-label{display:flex;justify-content:space-between;padding:13px var(--pad);font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);border-bottom:0.5px solid var(--line);}
.home-explore-label a{transition:color .25s;}
.home-explore-label a:hover{color:var(--ink);}
.he-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.he-card{padding:clamp(16px,2vw,28px) var(--pad);border-right:0.5px solid var(--line);border-bottom:0.5px solid var(--line);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;aspect-ratio:1/0.8;justify-content:space-between;transition:background .3s;}
.he-card:nth-child(4n){border-right:none;}
.he-card:nth-child(n+5){border-bottom:none;}
.he-card:hover{background:rgba(255,255,255,0.04);}
.he-num{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.06em;}
.he-client{font-family:var(--mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-2);}
.he-card h4{font-family:var(--cond);font-weight:600;font-size:clamp(16px,1.8vw,22px);line-height:0.94;text-transform:uppercase;letter-spacing:0;}

@media(max-width:860px){
  .hg-3,.hg-3r{grid-template-columns:1fr 1fr;}
  .hg-3 .hg-card:first-child,.hg-3r .hg-card:last-child{grid-column:span 2;}
  .hg-2w,.hg-2wr{grid-template-columns:1fr 1fr;}
  .hg-trio-row{grid-template-columns:1fr 1fr;}
  .hg-trio-row .hg-card:last-child{grid-column:span 2;}
  .he-grid{grid-template-columns:repeat(2,1fr);}
  .he-card:nth-child(4n){border-right:0.5px solid var(--line);}
  .he-card:nth-child(2n){border-right:none;}
  .he-card:nth-child(n+5){border-bottom:0.5px solid var(--line);}
  .he-card:nth-child(n+7){border-bottom:none;}
}
@media(max-width:560px){
  .hg-3,.hg-3r,.hg-2,.hg-2w,.hg-2wr,.hg-trio-row{grid-template-columns:1fr;}
  .hg-3 .hg-card:first-child,.hg-3r .hg-card:last-child,.hg-trio-row .hg-card:last-child{grid-column:span 1;}
  .he-grid{grid-template-columns:1fr;}
  .he-card,.he-card:nth-child(4n),.he-card:nth-child(2n){border-right:none;}
}


/* ============================================================
   ABOUT PAGE
   ============================================================ */

.ab-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4px,0.5vw,8px);min-height:60vh;}
.ab-hero-img{min-height:400px;}
.ab-hero-text{display:flex;align-items:center;padding:clamp(24px,4vw,56px);}
.ab-hero-text p{font-family:var(--mono);font-weight:400;font-size:clamp(14px,1.6vw,20px);line-height:1.6;color:var(--ink);max-width:48ch;}

.ab-section{display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,3vw,40px);padding:clamp(32px,4vw,56px) var(--pad);border-top:0.5px solid var(--line);}
.work-header{border-top:none;}
.ab-label{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);padding-top:4px;}
.ab-body p{font-family:var(--mono);font-size:13px;line-height:1.8;color:var(--ink-2);max-width:60ch;}

.ab-services{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px) clamp(32px,4vw,64px);}
.ab-img-full{width:100%;aspect-ratio:16/9;overflow:hidden;}
.ab-img-full img{width:100%;height:100%;object-fit:cover;}
.ab-svc h3{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:8px;}
.ab-svc p{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ink-3);}

.ab-team{display:flex;flex-direction:column;gap:16px;}
.ab-person{display:flex;gap:clamp(16px,2vw,32px);align-items:baseline;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:0.04em;}
.ab-name{font-weight:700;color:var(--ink);}
.ab-role{color:var(--ink-3);}
.ab-loc{color:var(--ink-3);font-size:11px;}

.ab-clients{font-family:var(--mono);font-size:13px;line-height:2;color:var(--ink-2);text-transform:uppercase;letter-spacing:0.02em;}

.ab-offerings{padding:0 var(--pad);display:grid;grid-template-columns:repeat(2,1fr);border-top:0.5px solid var(--line);}
.ab-offer{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2.5vw,36px) clamp(12px,2vw,24px);border-bottom:0.5px solid var(--line);border-right:0.5px solid var(--line);}
.ab-offer:nth-child(2n){border-right:none;}
.ab-offer-title{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);}
.ab-offer-desc{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ink-3);}
.ab-client-list{text-transform:uppercase;letter-spacing:0.02em;}

/* ── Porto Rocha–style about layout ── */
.pr-section{display:grid;grid-template-columns:200px 1fr;gap:0;padding:0 var(--pad);border-top:0.5px solid var(--line);}
.pr-label{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:clamp(24px,3vw,40px) 0;border-right:0.5px solid var(--line);padding-right:24px;}
.pr-body{padding:clamp(24px,3vw,40px) 0 clamp(24px,3vw,40px) clamp(24px,3vw,40px);}
.pr-big{font-family:var(--grotesk);font-size:clamp(14px,1.6vw,18px);line-height:1.6;color:var(--ink);margin-bottom:1em;}
.pr-big:last-child{margin-bottom:0;}

.pr-client-filters{display:flex;gap:16px;margin-bottom:clamp(20px,2.5vw,32px);flex-wrap:wrap;}
.pr-filter{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;background:none;border:none;padding:0;cursor:pointer;color:var(--ink-3);transition:color .2s;}
.pr-filter.on{color:var(--ink);font-weight:700;}
.pr-filter:hover{color:var(--ink);}
.pr-client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(16px,2vw,32px);}
.pr-client-col{display:flex;flex-direction:column;}
.pr-client-col span{font-family:var(--mono);font-size:12px;letter-spacing:0.02em;line-height:2;color:var(--ink-2);transition:opacity .3s;}
.pr-client-col span.hidden{opacity:0.15;}

.pr-duo-img{display:grid;grid-template-columns:1fr 1fr;border-top:0.5px solid var(--line);}
.pr-duo-img .pic{overflow:hidden;}
.pr-duo-img .pic:first-child{border-right:0.5px solid var(--line);}
.pr-duo-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.pr-locations{display:grid;grid-template-columns:1fr 1fr;border-bottom:0.5px solid var(--line);}
.pr-loc{padding:clamp(16px,2vw,24px) var(--pad);font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.6;}
.pr-loc:first-child{border-right:0.5px solid var(--line);}
.pr-loc strong{display:block;color:var(--ink);margin-bottom:4px;}

.pr-off-tabs{display:flex;gap:16px;margin-bottom:clamp(24px,3vw,40px);flex-wrap:wrap;}
.pr-off-tab{font-family:var(--mono);font-size:12px;letter-spacing:0.04em;background:none;border:none;padding:0;cursor:pointer;color:var(--ink-3);transition:color .2s;}
.pr-off-tab.active{color:var(--ink);font-weight:700;}
.pr-off-tab:hover{color:var(--ink);}
.pr-off-desc{font-family:var(--grotesk);font-size:clamp(18px,2.2vw,24px);line-height:1.5;color:var(--ink);margin-bottom:clamp(24px,3vw,40px);}
.pr-off-svc{display:flex;gap:8px;flex-direction:column;}
.pr-off-svc-lbl{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);}
.pr-off-svc-list{font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.6;}

/* ── Offerings Grid (about page) ── */
.pr-off-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.pr-off-cell{padding:clamp(24px,3vw,40px) clamp(16px,2vw,28px);border-right:0.5px solid var(--line);border-bottom:0.5px solid var(--line);}
.pr-off-cell:nth-child(3n){border-right:none;}
.pr-off-cell:nth-child(n+4){border-bottom:none;}
.pr-off-cell:first-child{padding-left:0;}
.pr-off-cell:nth-child(4){padding-left:0;}
.pr-off-cell h3{font-family:var(--mono);font-size:clamp(14px,1.6vw,18px);font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.1;margin-bottom:clamp(10px,1.5vw,16px);}
.pr-off-cell p{font-family:var(--mono);font-size:10px;color:var(--ink-3);line-height:1.8;}

/* ── Client Grid 5-col (about page) ── */
.pr-client-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
.pr-client-grid-5 span{font-family:var(--mono);font-size:11px;letter-spacing:0.01em;color:var(--ink-2);padding:6px 0;transition:color .2s;}
.pr-client-grid-5 span:hover{color:var(--ink);}

/* ── Contact block (about page) ── */
.pr-contact{padding:clamp(48px,6vw,80px) var(--pad);border-top:0.5px solid var(--line);}
.pr-contact p{font-family:var(--mono);font-size:14px;font-weight:600;margin-bottom:6px;}
.pr-contact small{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.04em;}

.pr-team{display:grid;grid-template-columns:1fr 1fr;border-top:0.5px solid var(--line);}
.pr-team-member{padding:0 0 clamp(24px,3vw,40px) 0;}
.pr-team-member:first-child{border-right:0.5px solid var(--line);padding-right:clamp(16px,2vw,24px);}
.pr-team-member:last-child{padding-left:clamp(16px,2vw,24px);}
.pr-team-photo{margin-bottom:clamp(16px,2vw,24px);}
.pr-team-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;}
.pr-team-member strong{font-family:var(--mono);font-size:14px;display:block;margin:0 var(--pad);color:var(--ink);}
.pr-team-role{font-family:var(--mono);font-size:12px;color:var(--ink-3);display:block;margin:4px var(--pad) 12px;}
.pr-team-bio{font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.6;margin:0 var(--pad);}
.ab-client-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,60px);}
.ab-client-col{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:12px;letter-spacing:0.04em;text-transform:uppercase;line-height:2.2;color:var(--ink-2);}

/* ── Offerings V-A: Tabs ── */
.off-tabs{padding:0 var(--pad);border-top:0.5px solid var(--line);border-bottom:0.5px solid var(--line);}
.off-tabs-nav{display:flex;gap:clamp(12px,2vw,24px);padding:clamp(16px,2vw,24px) 0;border-bottom:0.5px solid var(--line);flex-wrap:wrap;}
.off-tab-btn{font-family:var(--mono);font-size:12px;letter-spacing:0.04em;text-transform:uppercase;background:none;border:none;padding:0;cursor:pointer;color:var(--ink-3);font-weight:400;transition:color .2s;}
.off-tab-btn.active{color:var(--ink);font-weight:700;}
.off-tab-btn:hover{color:var(--ink);}
.off-tab-panel{display:none;padding:clamp(24px,3vw,40px) 0;}
.off-tab-panel.active{display:block;}
.off-tab-desc{font-family:var(--grotesk);font-size:clamp(18px,2.2vw,26px);line-height:1.4;color:var(--ink);max-width:580px;margin-bottom:20px;}
.off-tab-svc-lbl{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;}
.off-tab-svc{font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.6;}

/* ── Offerings V-B: Stacked ── */
.off-stack{padding:0 var(--pad);border-top:0.5px solid var(--line);}
.off-stack-item{display:grid;grid-template-columns:200px 1fr;gap:clamp(16px,2vw,32px);padding:clamp(16px,2vw,24px) 0;border-bottom:0.5px solid var(--line);align-items:baseline;}
.off-stack-item:last-child{border-bottom:none;}
.off-stack-title{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);}
.off-stack-desc{font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.7;}

@media(max-width:860px){
  .ab-hero{grid-template-columns:1fr;}
  .ab-section{grid-template-columns:1fr;gap:12px;}
  .ab-services{grid-template-columns:1fr 1fr;}
  .ab-person{flex-direction:column;gap:4px;}
  .pr-section{grid-template-columns:1fr;}
  .pr-label{border-right:none;padding-bottom:0;}
  .pr-body{padding-left:0;}
  .pr-off-grid{grid-template-columns:1fr 1fr;}
  .pr-off-cell{border-right:0.5px solid var(--line);padding:clamp(16px,2vw,24px) clamp(12px,2vw,20px);}
  .pr-off-cell:nth-child(2n){border-right:none;}
  .pr-off-cell:nth-child(3n){border-right:0.5px solid var(--line);}
  .pr-off-cell:nth-child(n){border-bottom:0.5px solid var(--line);}
  .pr-off-cell:nth-child(2n+1){padding-left:0;}
  .pr-off-cell:nth-last-child(-n+2){border-bottom:none;}
  .pr-off-cell:first-child{padding-left:0;}
  .pr-off-cell:nth-child(4){padding-left:0;}
  .pr-client-grid-5{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:560px){
  .ab-services{grid-template-columns:1fr;}
  .ab-offerings{grid-template-columns:1fr;}
  .ab-offer{border-right:none;}
  .off-stack-item{grid-template-columns:1fr;gap:4px;}
  .pr-off-grid{grid-template-columns:repeat(2,1fr);}
  .pr-off-cell{padding:clamp(14px,3vw,20px) clamp(10px,2vw,16px);border-right:0.5px solid var(--line);border-bottom:0.5px solid var(--line);}
  .pr-off-cell h3 br{display:none;}
  .pr-off-cell:nth-child(3n){border-right:0.5px solid var(--line);}
  .pr-off-cell:nth-child(2n){border-right:none;}
  .pr-off-cell:nth-child(n+5){border-bottom:none;}
  .pr-off-cell:nth-child(2n+1){padding-left:0;}
  .pr-off-cell:first-child{padding-left:0;}
  .pr-off-cell:nth-child(3){padding-left:0;}
  .pr-off-cell:nth-child(5){padding-left:0;}
  .pr-client-grid{grid-template-columns:1fr 1fr;}
  .pr-client-grid-5{grid-template-columns:repeat(2,1fr);gap:0 clamp(16px,4vw,32px);}
  .pr-client-grid-5 span{padding:5px 0;border-bottom:0.5px solid var(--line);}
  .pr-client-grid-5 span:nth-last-child(-n+2){border-bottom:none;}
  .pr-duo-img{grid-template-columns:1fr;}
  .pr-duo-img .pic:first-child{border-right:none;}
  .pr-locations{grid-template-columns:1fr;}
  .pr-loc:first-child{border-right:none;border-bottom:0.5px solid var(--line);}
  .pr-team{grid-template-columns:1fr;}
  .pr-team-member:first-child{border-right:none;border-bottom:0.5px solid var(--line);padding-right:0;padding-bottom:clamp(24px,3vw,40px);}
  .pr-team-member:last-child{padding-left:0;padding-top:clamp(24px,3vw,40px);}
}

.services{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:0.5px solid var(--line);}
.services .s{padding:clamp(22px,2.8vw,38px) var(--pad);border-right:0.5px solid var(--line);border-bottom:0.5px solid var(--line);}
.services .s:nth-child(3n){border-right:none;}
.services .s .n{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-bottom:14px;}
.services .s h3{font-family:var(--cond);font-weight:600;font-size:24px;line-height:0.96;text-transform:uppercase;margin-bottom:12px;}
.services .s p{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--ink-2);}

.band-img{height:clamp(320px,46vw,540px);border-bottom:0.5px solid var(--line-strong);}
.band-img .ph{font-size:40px;}

.clients-wrap{padding:clamp(20px,3vw,40px) var(--pad);border-bottom:0.5px solid var(--line-strong);}
.clients{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.8vw,26px) clamp(10px,1.4vw,18px);}
.clients .cl{aspect-ratio:1/1;background:#efede7;border:0.5px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center;padding:10px;transition:background .3s;}
.clients .cl:hover{background:var(--sq-hover);}
.clients .cl .ct{font-family:var(--cond);font-weight:600;font-size:clamp(13px,1.3vw,17px);line-height:0.95;text-transform:uppercase;text-align:center;}
.clients .cl .cn{position:absolute;top:7px;left:8px;font-family:var(--mono);font-size:8px;letter-spacing:0.04em;color:var(--ink-3);}

.offices{display:grid;grid-template-columns:1fr 1fr;border-bottom:0.5px solid var(--line-strong);}
.offices .of{border-right:0.5px solid var(--line);}
.offices .of:last-child{border-right:none;}
.offices .of .pic{aspect-ratio:16/9;border-bottom:0.5px solid var(--line);}
.offices .of .body{padding:clamp(20px,2.6vw,34px) var(--pad);}
.offices .of .body h3{font-family:var(--cond);font-weight:700;font-size:clamp(24px,3vw,38px);text-transform:uppercase;line-height:0.92;margin-bottom:12px;}
.offices .of .body p{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--ink-2);}

.offer{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:0.5px solid var(--line-strong);}
.offer .o{border-right:0.5px solid var(--line);border-bottom:0.5px solid var(--line);padding:clamp(22px,2.8vw,38px) var(--pad);display:flex;flex-direction:column;gap:18px;}
.offer .o:nth-child(2n){border-right:none;}
.offer .o:nth-child(n+5){border-bottom:none;}
.offer .o .on{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;color:var(--ink-3);}
.offer .o h3{font-family:var(--cond);font-weight:600;font-size:22px;line-height:0.96;text-transform:uppercase;}
.offer .o p{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--ink-2);flex:1;}
.offer .o .svc{font-family:var(--mono);font-size:10px;line-height:1.7;color:var(--ink-3);border-top:0.5px solid var(--line);padding-top:12px;}
.offer .o .svc b{display:block;color:var(--ink);font-weight:400;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px;font-size:9px;}


/* ============================================================
   WORK PAGE
   ============================================================ */

.filters{display:flex;flex-wrap:wrap;gap:0;border-bottom:0.5px solid var(--line-strong);font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;}
.filters a{padding:11px 18px;border-right:0.5px solid var(--line);color:var(--ink-2);transition:color .25s,background .25s;}
.filters a:hover{color:var(--ink);}
.filters a.on{background:var(--ink);color:var(--paper);}
.filters .count{margin-left:auto;border-right:none;color:var(--ink-3);}

/* work tags filter */
.work-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.work-tag{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;padding:8px 16px;background:none;border:1px solid var(--line);color:var(--ink-3);cursor:pointer;transition:background .25s,color .25s,border-color .25s;}
.work-tag:hover{color:var(--ink);border-color:var(--ink);}
.work-tag.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(4px,0.5vw,8px);}
.proj{transition:opacity .35s,transform .35s;}
.proj.hidden{opacity:0;transform:scale(0.95);pointer-events:none;position:absolute;visibility:hidden;}
@media(max-width:860px){.work-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.work-grid{grid-template-columns:repeat(2,1fr);}}
.proj{display:block;text-decoration:none;color:inherit;overflow:hidden;}
.proj .pic{aspect-ratio:4/3;}
.proj:hover h3{opacity:0.5;}


/* ============================================================
   AWARDS PAGE
   ============================================================ */

.aw-grid{display:grid;grid-template-columns:repeat(6,1fr);padding:0;}
.aw-card{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;padding:clamp(16px,2vw,32px) clamp(8px,1vw,16px);}
.aw-thumb{position:relative;width:100%;height:clamp(100px,10vw,160px);display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden;}
.aw-thumb::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--sq) 0%,var(--sq-hover) 50%,var(--sq) 100%);background-size:200% 100%;animation:shimmer 1.8s ease-in-out infinite;z-index:1;transition:opacity .4s;}
.aw-thumb.loaded::before{opacity:0;pointer-events:none;}
.aw-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .6s ease;}
.aw-thumb.loaded img{opacity:1;}
.aw-thumb img[src*="trophy-gold"],.aw-thumb img[src*="trophy-silver"]{transform:scale(1.15);}
.aw-thumb img[src*="trophy-dad"]{max-height:100%;transform:scale(1.15);}
.aw-thumb img[src*="trophy-clio"]{transform:scale(1.05);}
.aw-thumb img[src*="trophy-lia"]{transform:scale(1.15);}
.aw-thumb img[src*="trophy-oneshow-bronze"]{transform:scale(1.2);}
.aw-thumb img[src*="trophy-cannes-bronze"]{transform:scale(1.15);}
.aw-thumb img[src*="trophy-bda"]{transform:scale(1.3);}
.aw-thumb img[src*="trophy-dubailynx"]{transform:scale(1.35);}
.aw-thumb img[src*="trophy-lad"]{height:100%;max-height:100%;}
.aw-thumb img[src*="trophy-lad-silver"]{transform:scale(1.45);}
.aw-thumb img[src*="trophy-lad-bronze"]{transform:scale(1.35);}
.aw-name{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:0.04em;text-transform:uppercase;text-align:center;color:var(--ink);min-height:2.4em;display:flex;align-items:flex-start;justify-content:center;}
@media(max-width:860px){.aw-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:560px){.aw-grid{grid-template-columns:repeat(3,1fr);}}


/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* contact split layout */
.ct-split{display:grid;grid-template-columns:1.2fr 0.8fr;gap:clamp(40px,6vw,80px);padding:clamp(40px,6vw,80px) var(--pad);}
.ct-heading{font-family:var(--mono);font-weight:700;font-size:clamp(20px,2.6vw,32px);letter-spacing:-0.02em;margin-bottom:12px;}
.ct-intro{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-3);margin-bottom:clamp(24px,3vw,40px);}
.ct-right{display:flex;flex-direction:column;gap:clamp(24px,3vw,36px);padding-top:4px;}
.ct-block{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-2);}
.ct-block a{color:var(--ink-2);transition:color .25s;border-bottom:0.5px solid transparent;}
.ct-block a:hover{color:var(--ink);border-color:var(--ink);}
.ct-label{font-size:10px;letter-spacing:0.08em;color:var(--ink-3);margin-bottom:4px;}
.ct-field{display:flex;flex-direction:column;gap:6px;margin-bottom:clamp(16px,2vw,24px);}
.ct-field label{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--ink-3);}
.ct-field input,.ct-field textarea,.ct-form select{font-family:var(--mono);font-size:13px;padding:12px 0;background:none;border:none;border-bottom:1px solid var(--line);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;border-radius:0;width:100%;transition:border-color .25s;}
.ct-field input:focus,.ct-field textarea:focus{border-color:var(--ink);}
.ct-field textarea{resize:vertical;min-height:100px;}
.ct-submit{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;padding:14px 32px;background:var(--ink);color:var(--paper);border:none;cursor:pointer;margin-top:8px;transition:opacity .25s;}
.ct-submit:hover{opacity:0.7;}
@media(max-width:860px){.ct-split{grid-template-columns:1fr;}}

.big-mail{padding:clamp(36px,6vw,90px) var(--pad);border-bottom:0.5px solid var(--line-strong);}
.big-mail a{font-family:var(--cond);font-weight:700;font-size:clamp(28px,6vw,84px);line-height:0.9;letter-spacing:-0.02em;text-transform:uppercase;border-bottom:1.5px solid var(--ink);transition:opacity .25s;}
.big-mail a:hover{opacity:0.5;}
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:0.5px solid var(--line);}
.contact-grid .blk{padding:clamp(26px,3vw,44px) var(--pad);border-right:0.5px solid var(--line);border-bottom:0.5px solid var(--line);}
.contact-grid .blk:nth-child(2n){border-right:none;}
.contact-grid .blk .l{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;}
.contact-grid .blk .nm{font-family:var(--cond);font-weight:600;font-size:22px;text-transform:uppercase;line-height:1;margin-bottom:8px;}
.contact-grid .blk a,.contact-grid .blk p{display:block;font-family:var(--mono);font-size:12px;line-height:1.8;color:var(--ink-2);}
.contact-grid .blk a{border-bottom:0.5px solid var(--line);display:inline;transition:color .25s,border-color .25s;}
.contact-grid .blk a:hover{color:var(--ink);border-color:var(--ink);}
.socials{display:flex;flex-wrap:wrap;border-bottom:0.5px solid var(--line-strong);}
.socials a{flex:1 1 20%;min-width:140px;padding:clamp(20px,2.6vw,34px) var(--pad);border-right:0.5px solid var(--line);font-family:var(--cond);font-weight:600;font-size:clamp(18px,2vw,26px);text-transform:uppercase;transition:background .3s;}
.socials a:last-child{border-right:none;}
.socials a:hover{background:rgba(12,12,11,0.02);}


/* ============================================================
   PROJECT PAGES
   ============================================================ */

.crumb{display:flex;gap:18px;padding:11px var(--pad);border-bottom:0.5px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);}
.crumb a:hover{color:var(--ink);}
.crumb .sep{color:var(--line-strong);}

.p-hero{position:relative;border-bottom:0.5px solid var(--line-strong);overflow:hidden;aspect-ratio:1920/596;}
.p-hero video,.p-hero img{width:100%;height:100%;display:block;object-fit:cover;}
.p-hero .ph{font-size:42px;}
.p-hero .tagtop{font-size:10px;letter-spacing:0.12em;}

.p-title{padding:clamp(30px,5vw,68px) var(--pad);border-bottom:0.5px solid var(--line);}
.p-title .client{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px;}
.p-title h1{font-family:var(--cond);font-weight:700;font-size:clamp(40px,8vw,108px);line-height:0.86;letter-spacing:-0.02em;text-transform:uppercase;}

.credits{display:flex;border-bottom:0.5px solid var(--line-strong);}
.credits .c{flex:1;padding:clamp(20px,2.6vw,34px) var(--pad);border-right:0.5px solid var(--line);}
.credits .c:last-child{border-right:none;}
.credits .c .l{font-family:var(--mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;}
.credits .c .v{font-family:var(--cond);font-weight:600;font-size:clamp(11px,1.6vw,17px);line-height:1.1;text-transform:uppercase;}
.credits .c .v.sm{font-family:var(--mono);font-weight:400;font-size:11px;text-transform:none;letter-spacing:0;line-height:1.5;color:var(--ink-2);}

.intro{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:0.5px solid var(--line);}
.intro .lbl{grid-column:span 1;border-right:0.5px solid var(--line);padding:clamp(24px,3vw,40px) var(--pad);font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);}
.intro .body{grid-column:span 3;padding:clamp(24px,3vw,40px) var(--pad);columns:2;column-gap:clamp(24px,3vw,48px);}
.intro .body p{font-family:var(--mono);font-size:12px;line-height:1.85;color:var(--ink-2);}

.txt-block{display:grid;grid-template-columns:1fr 2fr;gap:0 clamp(24px,3vw,48px);padding:clamp(40px,5vw,72px) var(--pad);border-bottom:0.5px solid var(--line);}
.txt-lbl{grid-column:1;font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px;}
.txt-copy{grid-column:2;display:flex;flex-direction:column;gap:20px;}
.txt-copy p{font-family:var(--mono);font-size:15px;line-height:1.85;color:var(--ink-2);}

.full-img{aspect-ratio:16/9;border-bottom:0.5px solid var(--line);}
.full-img .ph{font-size:38px;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0 1px;background:var(--line-strong);border-bottom:0.5px solid var(--line);}
.duo .pic{aspect-ratio:1/1;background:var(--paper);}
.duo-auto .pic{aspect-ratio:auto;}
.grid-covers{display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:hidden;border-bottom:0.5px solid var(--line);}
.grid-covers .pic{overflow:hidden;}
.grid-covers .pic img{width:100%;height:100%;object-fit:cover;}
.proj-breathe .grid-covers{margin:12px 16px;border-radius:12px;border-bottom:none;}
.duo .pic video,.full-img video{width:100%;height:100%;object-fit:cover;display:block;}
.trio-img{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1px;background:var(--line-strong);border-bottom:0.5px solid var(--line);}
.trio-img .pic{aspect-ratio:3/4;background:var(--paper);}

.p-video{aspect-ratio:16/9;border-bottom:0.5px solid var(--line);overflow:hidden;position:relative;background:var(--sq);}
.p-video::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--sq) 0%,var(--sq-hover) 50%,var(--sq) 100%);background-size:200% 100%;animation:shimmer 1.8s ease-in-out infinite;z-index:1;transition:opacity .4s;}
.p-video.loaded::before{opacity:0;pointer-events:none;}
.p-video video,.p-video iframe{width:100%;height:100%;object-fit:cover;display:block;border:0;opacity:0;transition:opacity .6s ease;}
.p-video.loaded video,.p-video.loaded iframe{opacity:1;}

.pullquote{padding:clamp(40px,7vw,96px) var(--pad);border-bottom:0.5px solid var(--line);}
.pullquote p{font-family:var(--cond);font-weight:600;font-size:clamp(26px,4.4vw,58px);line-height:0.98;letter-spacing:-0.01em;text-transform:uppercase;max-width:20ch;}
.pullquote .by{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);margin-top:24px;}

/* ── proj-breathe (Polar-style lateral padding + rounded corners) ── */
.proj-breathe .p-hero,.proj-breathe .full-img,.proj-breathe .p-video,.proj-breathe .duo,.proj-breathe .trio-img{margin:12px 16px;border-radius:12px;overflow:hidden;border-bottom:none;}
.proj-breathe .p-hero{}
.proj-breathe .duo{background:none;gap:16px;}
.proj-breathe .duo .pic{border-radius:12px;overflow:hidden;}
.proj-breathe .trio-img{background:none;gap:16px;}
.proj-breathe .trio-img .pic{border-radius:12px;overflow:hidden;}

.nextproj{display:grid;grid-template-columns:repeat(4,1fr);border-top:0.5px solid var(--line-strong);border-bottom:0.5px solid var(--line-strong);margin-top:clamp(40px,6vw,80px);}
.nextproj .lbl{grid-column:span 1;border-right:0.5px solid var(--line);padding:clamp(24px,3vw,40px) var(--pad);font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:flex-start;}
.nextproj .big{grid-column:span 3;padding:clamp(24px,3vw,40px) var(--pad);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:14px;transition:background .3s;}
.nextproj .big:hover{background:rgba(12,12,11,0.02);}
.nextproj .big .client{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-2);}
.nextproj .big h2{font-family:var(--cond);font-weight:700;font-size:clamp(32px,5vw,64px);line-height:0.9;text-transform:uppercase;letter-spacing:-0.01em;}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:860px){
  .nav .links{gap:16px;}

  /* home */
  .explore{grid-template-columns:1fr;}
  .explore .col{border-right:none;}
  .explore .col:last-child .quad .qd:nth-child(n+3){border-bottom:none;}
  .explore .col:first-child .quad .qd:nth-child(n+3){border-bottom:0.5px solid var(--line);}

  /* about */
  .two{grid-template-columns:1fr;}.two .lbl{border-right:none;border-bottom:0.5px solid var(--line);}
  .services{grid-template-columns:1fr;}.services .s{border-right:none;}
  .clients{grid-template-columns:repeat(4,1fr);}
  .offices{grid-template-columns:1fr;}.offices .of{border-right:none;border-bottom:0.5px solid var(--line);}
  .offer{grid-template-columns:1fr;}.offer .o,.offer .o:nth-child(2n){border-right:none;}.offer .o:nth-child(n+5){border-bottom:0.5px solid var(--line);}.offer .o:last-child{border-bottom:none;}

  /* work */
  .work-grid{grid-template-columns:repeat(2,1fr);}.proj:nth-child(3n){border-right:0.5px solid var(--line);}.proj:nth-child(2n){border-right:none;}.filters{font-size:9px;}.filters a{padding:9px 12px;}

  /* awards */
  .grid{grid-template-columns:repeat(4,1fr);}
  .item:nth-child(6n){border-right:0.5px solid var(--line);}
  .item:nth-child(4n){border-right:none;}
  .index{grid-template-columns:repeat(2,1fr);}

  /* project */
  .credits .c{padding:16px 10px;}
  .credits .c .v{font-size:11px;}
  .credits .c .l{font-size:7px;margin-bottom:6px;}
  .intro,.nextproj{grid-template-columns:1fr;}
  .intro .lbl,.nextproj .lbl,.intro .body,.nextproj .big{grid-column:span 1;}
  .intro .lbl,.nextproj .lbl{border-right:none;border-bottom:0.5px solid var(--line);}
  .intro .body{columns:1;}
  .txt-block{grid-template-columns:1fr;}
  .txt-lbl{grid-column:1;margin-bottom:16px;}
  .txt-copy{grid-column:1;}
  .trio-img{grid-template-columns:1fr;gap:0;}
  .trio-img .pic{aspect-ratio:16/10;}
}

@media(max-width:560px){
  .head{flex-direction:column;align-items:flex-start;gap:14px;}
  .tag{text-align:left;}
  .nav .links{display:none !important;}
  .nav .links.open{display:flex !important;position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;z-index:999;background:rgba(255,255,255,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-direction:column;align-items:center;justify-content:center;gap:28px;font-size:16px;letter-spacing:0.06em;}
  .nav .links.open a{color:var(--ink);}
  .nav .links.open .nav-ctrl{color:var(--ink);}
  .nav .links.open .toggle-track{border-color:var(--ink);}
  .hamburger{display:flex !important;flex-direction:column;gap:4px;width:22px;cursor:pointer;z-index:1000;padding:4px 0;}
  .hamburger span{display:block;height:2px;background:var(--ink);transition:transform .3s,opacity .3s;}
  .home-nav .hamburger span{background:#fff;}
  .no-illust .home-nav .hamburger span{background:var(--ink);}
  .home-nav .hamburger.open span{background:var(--ink);}
  .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}
  .foot{flex-direction:column;align-items:flex-start;}
  .foot .cols{gap:32px;flex-wrap:wrap;}

  /* about */
  .clients{grid-template-columns:repeat(3,1fr);}

  /* work */
  .work-grid{grid-template-columns:repeat(2,1fr);}.proj,.proj:nth-child(2n){border-right:none;}

  /* awards */
  .grid{grid-template-columns:repeat(3,1fr);}
  .item:nth-child(6n),.item:nth-child(4n){border-right:0.5px solid var(--line);}
  .item:nth-child(3n){border-right:none;}
  .index{grid-template-columns:1fr;}

  /* contact */
  .contact-grid{grid-template-columns:1fr;}.contact-grid .blk{border-right:none;}

  /* project */
  .duo{grid-template-columns:1fr;gap:0;}
}

/* ============================================================
   BACKSTAGE
   ============================================================ */
.bs-confirm{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9000;text-align:center;padding:40px 60px;background:var(--paper);border:1px solid var(--ink);display:flex;flex-direction:column;align-items:center;gap:16px;font-family:var(--mono);}
.bs-sub{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2);}
.bs-btn{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;padding:10px 24px;background:none;color:var(--ink-3);border:1px solid var(--line);cursor:pointer;transition:color .25s,border-color .25s;}
.bs-btn:hover{color:var(--ink);border-color:var(--ink);}
.bs-canvas{position:fixed;inset:0;z-index:8000;pointer-events:none;display:none;overflow:hidden;}
.bs-canvas.active{display:block;pointer-events:auto;cursor:grab;}
.bs-canvas:active{cursor:grabbing;}
.bs-piece{position:absolute;top:0;left:0;will-change:transform;pointer-events:none;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.15);}
.bs-piece img{display:block;width:100%;height:100%;object-fit:cover;}
.konami-hud{display:flex;gap:8px;font-family:var(--mono);font-size:22px;letter-spacing:0.04em;}
.konami-hud span{opacity:0.15;transition:opacity .2s,color .2s;}
.konami-hud span.lit{opacity:1;color:var(--ink);}

/* ── 404 ── */
.err-404{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:var(--pad);font-family:var(--mono);}
.err-404 h1{font-size:clamp(48px,10vw,120px);letter-spacing:0.08em;margin:0 0 16px;font-weight:700;}
.err-404 p{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 24px;}
.err-404 a{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;border-bottom:0.5px solid var(--ink);padding-bottom:2px;}
