/* Portfolio page — its own layout, shared tokens from style.css */
.pf{background:#0c0c0e}
.pf .nav{justify-content:space-between}

/* hero */
.pf-hero{position:relative;min-height:100vh;min-height:100svh;padding:120px 28px 40px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  background:radial-gradient(70% 60% at 80% 10%,rgba(252,204,10,.10),transparent 60%),#0c0c0e}
.pf-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/calc(100%/6) 100%}
.trail{position:absolute;inset:0;pointer-events:none;z-index:1}
.trail img{position:absolute;left:0;top:0;width:clamp(150px,16vw,260px);aspect-ratio:1;object-fit:cover;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;will-change:transform,opacity}
.pf-kicker{position:absolute;top:110px;left:28px;color:var(--yellow);z-index:2}
.pf-hint{position:absolute;top:110px;right:28px;color:#666;z-index:2}
.pf-name{position:relative;z-index:2;font-weight:800;font-size:clamp(76px,17vw,300px);line-height:.82;letter-spacing:-.06em;pointer-events:none}
.pf-name .row{display:block;overflow:hidden;padding-bottom:.06em}
.pf-name .ln{display:inline-block;will-change:transform}
.pf-name em{color:var(--yellow);font-size:1.12em;letter-spacing:-.02em;padding-left:.12em}
.pf-hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:40px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
.pf-intro{max-width:42ch;font-size:clamp(16px,1.4vw,21px);line-height:1.45;color:#cfcfd4}
.pf-stats{list-style:none;display:flex;gap:clamp(20px,4vw,60px)}
.pf-stats b{display:block;font-size:clamp(34px,4vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1}
.pf-stats span{color:#888;font-size:10px}

/* index */
.pf-index{position:relative;padding:14vh 28px 10vh}
.idx-head{display:flex;justify-content:space-between;color:#777;padding-bottom:14px}
.idx-row{position:relative;display:grid;grid-template-columns:72px 1fr auto;align-items:center;padding:clamp(14px,2vw,26px) 0;border-top:1px solid rgba(255,255,255,.14);transition:color .3s,padding .4s cubic-bezier(.2,.8,.2,1)}
.idx-row:last-of-type{border-bottom:1px solid rgba(255,255,255,.14)}
.idx-row b{font-size:clamp(36px,6.4vw,112px);font-weight:700;letter-spacing:-.045em;line-height:1}
.idx-row .mono{color:#777}
.idx-row::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--yellow);transition:height .45s cubic-bezier(.2,.8,.2,1);z-index:-1}
.idx-row:hover{color:#111;padding-left:24px}.idx-row:hover .mono{color:#111}
.idx-row:hover::before{height:100%}
.pf-index{isolation:isolate}
.idx-preview{position:fixed;left:0;top:0;width:280px;height:200px;object-fit:cover;border-radius:10px;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.7);box-shadow:0 30px 60px rgba(0,0,0,.6)}
@media (hover:none){.idx-preview{display:none}}

/* categories */
.cat{padding:12vh 28px 6vh}
.sec-head{display:grid;grid-template-columns:auto 1fr minmax(0,38ch);align-items:end;gap:16px 24px;margin-bottom:6vh;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:26px}
.sec-head>.bullet{align-self:start;margin-top:4px}
.sec-head .kicker{margin-bottom:10px}
.sec-head .lead{font-size:15px;margin:0}

.tile{position:relative;display:block;width:100%;overflow:hidden;border-radius:10px;background:#1a1a1d;cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tile:hover img{transform:scale(1.05)}
.tile .cap{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:99px;background:rgba(10,10,12,.75);backdrop-filter:blur(8px);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.35s}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
.tile:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}


.masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.masonry .col{display:flex;flex-direction:column;gap:14px;will-change:transform}

.stack{position:relative}
.stack .card{position:sticky;top:12vh;margin-bottom:6vh;transform-origin:50% 0}
.stack .tile{border-radius:16px;box-shadow:0 -20px 60px rgba(0,0,0,.6)}
.stack .card .num{position:absolute;right:20px;top:18px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#fff;background:rgba(0,0,0,.5);padding:6px 10px;border-radius:99px}

.edit-grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:14px}
.edit-grid .tile:first-child{grid-row:span 2}
.edit-grid .tile{height:100%}
.edit-grid .tile img{transform:scale(1.3)}

.phones{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px);padding:4vh 0}
.phone{position:relative;border-radius:28px;padding:8px;background:#222326;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.5)}
.phone .tile{aspect-ratio:9/16;border-radius:22px}
.phone:nth-child(even){margin-top:8vh}

/* lightbox nav */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:20px}
.lb-nav:hover{background:var(--yellow);color:#111}
.lb-nav.prev{left:20px}.lb-nav.next{right:20px}

.pf .contact{padding-bottom:110px}
.pf .to-portfolio{margin-left:0}

@media (max-width:900px){
  .pf-hero{padding:100px 16px 90px}
  .pf-kicker{left:16px;top:84px}.pf-hint{display:none}
  .pf-hero-foot{flex-direction:column;align-items:flex-start;gap:24px}
  .pf-index,.cat{padding-left:16px;padding-right:16px}
  .idx-row{grid-template-columns:44px 1fr auto}
  .sec-head{grid-template-columns:auto 1fr;gap:12px}
  .sec-head .lead{grid-column:1/-1}
  .brand-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .masonry{grid-template-columns:repeat(2,1fr);gap:8px}
  .masonry .col{gap:8px}
  .edit-grid{grid-template-columns:1fr}
  .edit-grid .tile:first-child{grid-row:auto}
  .phones{grid-template-columns:repeat(2,1fr)}
  .phone:nth-child(even){margin-top:4vh}
  .lb-nav{width:42px;height:42px;top:auto;bottom:60px;transform:none}
  .switch{bottom:14px}
}

/* branding bento */
.brand-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,1fr);gap:14px}
.bcard{display:flex;flex-direction:column;aspect-ratio:auto;background:#f4f2ee;border-radius:16px;color:#111;text-align:left}
.bcard .bc-logo{position:relative;display:block;aspect-ratio:1/0.82;overflow:hidden}
.bcard .bc-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.42);transform-origin:50% 40%;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.bcard:hover .bc-logo img{transform:scale(1.52)}
.bcard.big{grid-column:span 2;grid-row:span 2}
.bcard.big .bc-logo{flex:1;aspect-ratio:auto}
.bc-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid rgba(0,0,0,.08)}
.bc-meta b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.bc-meta .mono{font-size:9.5px;color:#7a7a80;padding:4px 8px;border:1px solid rgba(0,0,0,.14);border-radius:99px}
.bcard.big .bc-meta b{font-size:20px}

/* video */
.vcard{position:relative;display:block;width:100%;overflow:hidden;border-radius:18px;background:#16161a;color:#fff;text-align:left}
.vcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .5s}
.vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0,transparent 30%,transparent 55%,rgba(0,0,0,.75));pointer-events:none}
.vcard:hover img{transform:scale(1.06);filter:saturate(1.15)}
.vc-play{position:absolute;left:50%;top:50%;z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35);transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s}
.vc-play svg{width:26px;height:26px;fill:#fff;margin-left:4px;transition:fill .3s}
.vcard:hover .vc-play{transform:scale(1.12);background:var(--yellow)}
.vcard:hover .vc-play svg{fill:#111}
.vc-meta{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.vc-meta b{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.vc-meta .mono{font-size:9.5px;color:#ddd;white-space:nowrap}
.vc-num{position:absolute;left:18px;top:16px;z-index:2;font-size:10px;color:#fff}
.vcard:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.vcard.feature{aspect-ratio:16/9}
.vcard.feature .vc-play{width:110px;height:110px;margin:-55px 0 0 -55px}
.vcard.feature .vc-play svg{width:36px;height:36px}
.vcard.feature .vc-meta b{font-size:clamp(28px,3.4vw,52px);letter-spacing:-.04em}
.cat-video{padding-bottom:4vh}
.reel{position:relative}
.reel-sticky{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:22px;overflow:hidden}
.reel-head{display:flex;justify-content:space-between;align-items:flex-end;padding:0 28px}
.reel-head .kicker{margin:0}
.reel-count{color:#888}
.reel-track{display:flex;gap:18px;padding:0 28px;will-change:transform}
.reel-track .vcard{flex:none;width:auto;height:min(68vh,640px);aspect-ratio:9/16}
.reel-track .vcard[data-r="4/5"]{aspect-ratio:4/5}
.reel-progress{margin:0 28px;height:2px;background:rgba(255,255,255,.12)}
.reel-progress i{display:block;height:100%;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%}
.vbox{position:fixed;inset:0;z-index:200;background:rgba(5,5,6,.94);display:grid;place-items:center;padding:60px 20px}
.vbox[hidden]{display:none}
.vbox-frame{max-height:82vh;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vbox-frame iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:900px){
  .brand-bento{grid-template-columns:repeat(2,1fr);gap:8px}
  .bcard.big{grid-column:span 2;grid-row:auto}
  .bcard.big .bc-logo{aspect-ratio:1/0.7}
  .bc-meta{padding:10px 12px}.bc-meta b{font-size:13px}
  .reel-head,.reel-track{padding:0 16px}.reel-progress{margin:0 16px}
  .reel-track{gap:10px}
  .reel-track .vcard{height:62vh}
  .vcard.feature .vc-play{width:72px;height:72px;margin:-36px 0 0 -36px}
  .vbox-frame{height:auto;width:92vw;max-height:80vh}
}

/* ===== tidy, even layout ===== */
.pf-name{font-size:clamp(64px,12vw,200px)}
.idx-row b{font-size:clamp(28px,4.4vw,72px)}
.idx-row{padding:clamp(12px,1.5vw,20px) 0}
.cat{padding:11vh 28px 4vh;max-width:1480px;margin:0 auto}
.brand-bento{grid-template-columns:repeat(3,1fr);gap:16px}
.bcard .bc-logo{aspect-ratio:4/3}
.bcard .bc-logo img{transform:scale(1.32);transform-origin:50% 42%}
.bcard:hover .bc-logo img{transform:scale(1.4)}
.grid-social{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-social .tile{aspect-ratio:1/1;border-radius:14px}
.grid-camp{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-camp .tile{aspect-ratio:16/10;border-radius:14px}
.edit-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:none}
.edit-grid .tile:first-child{grid-row:auto}
.edit-grid .tile{aspect-ratio:4/3;height:auto}
.edit-grid .tile img{transform:none}
.tile .cap{opacity:1;transform:none;background:rgba(10,10,12,.62)}
.reel-track .vcard{height:min(62vh,580px)}
.vcard.feature{max-height:78vh}
@media (max-width:900px){
  .cat{padding:9vh 16px 3vh}
  .brand-bento{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid-social{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid-camp{grid-template-columns:1fr;gap:10px}
  .edit-grid{grid-template-columns:1fr}
}

/* ===== campaigns as full sets ===== */
.case{margin-bottom:9vh}
.case-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;border-top:1px solid rgba(255,255,255,.16);padding:18px 0 18px}
.case-head .mono{color:var(--yellow)}
.case-head h3{font-size:clamp(26px,3vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1}
.case-head p{color:#a8a8ae;font-size:15px}
.case-head .case-n{margin-left:auto;color:#8a8a90}
.case-row{--rh:250px;display:flex;flex-wrap:wrap;gap:12px}
.case-row .tile{flex:var(--ar) 1 calc(var(--ar)*var(--rh));aspect-ratio:var(--ar);max-width:calc(var(--ar)*440px);width:auto;border-radius:12px}
@media (max-width:900px){.case-row{--rh:120px;gap:8px}.case-head .case-n{margin-left:0}}

/* ===== Finale: Let's make something together ===== */
.fin{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,14vh,160px) clamp(16px,5vw,72px) 32px;background:radial-gradient(120% 80% at 50% 0%,#1b1a14 0%,#0b0b0d 60%);isolation:isolate}
.fin-glow{position:absolute;inset:auto -20% -40% -20%;height:90%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(252,204,10,.22),rgba(252,204,10,0) 70%);filter:blur(30px);animation:finGlow 9s ease-in-out infinite alternate}
@keyframes finGlow{from{transform:translate3d(-6%,0,0) scale(1)}to{transform:translate3d(6%,-4%,0) scale(1.08)}}
.fin-in{max-width:1180px;width:100%;margin:0 auto}
.fin-badge{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);backdrop-filter:blur(8px);font-size:12px;letter-spacing:.08em;color:#d9d6cc}
.fin-badge i{width:8px;height:8px;border-radius:50%;background:#2fd16b;box-shadow:0 0 0 0 rgba(47,209,107,.6);animation:finPulse 2s infinite}
@keyframes finPulse{70%{box-shadow:0 0 0 10px rgba(47,209,107,0)}100%{box-shadow:0 0 0 0 rgba(47,209,107,0)}}
.fin-h{margin:28px 0 18px;font-size:clamp(46px,9.2vw,148px);line-height:.92;letter-spacing:-.045em;font-weight:800;color:#f3f1ec}
.fin-h em{font-family:"Instrument Serif",serif;font-weight:400;font-style:italic;letter-spacing:-.02em;color:var(--yellow)}
.fin-lead{max-width:540px;font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:#a9a7a0;margin:0 0 44px}
.fin-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fin-card{--mx:50%;--my:50%;position:relative;display:flex;align-items:center;gap:16px;padding:22px 22px;border-radius:22px;text-decoration:none;color:#f3f1ec;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s,background .4s}
.fin-card::before{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(252,204,10,.16),transparent 60%);opacity:0;transition:opacity .4s}
.fin-card:hover,.fin-card:focus-visible{transform:translateY(-6px);border-color:rgba(252,204,10,.5);background:rgba(255,255,255,.07)}
.fin-card:hover::before,.fin-card:focus-visible::before{opacity:1}
.fc-ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--yellow);color:#0b0b0d}
.fc-wa .fc-ic{background:#25d366}.fc-call .fc-ic{background:#f3f1ec}
.fc-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fc-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.fc-t small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8f8d86}
.fc-t b{font-size:clamp(15px,1.25vw,18px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-go{margin-left:auto;font-size:20px;color:#8f8d86;transition:transform .4s,color .4s}
.fin-card:hover .fc-go{transform:translate(3px,-3px);color:var(--yellow)}
.fin-prop{display:flex;align-items:center;gap:18px;margin-top:22px;padding:20px 24px;border-radius:22px;text-decoration:none;color:#0b0b0d;background:var(--yellow);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fin-prop .mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.fin-prop b{font-size:clamp(18px,1.8vw,24px);letter-spacing:-.01em}
.fin-prop i{margin-left:auto;font-style:normal;font-size:24px;transition:transform .4s}
.fin-prop:hover{transform:translateY(-4px)}.fin-prop:hover i{transform:translateX(6px)}
.fin-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1180px;width:100%;margin:72px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;letter-spacing:.06em;color:#77756f}
@media (max-width:900px){.fin-cards{grid-template-columns:1fr}.fin{min-height:auto;padding-bottom:110px}.fin-prop{flex-wrap:wrap}.fin-prop i{margin-left:auto}}
@media (prefers-reduced-motion:reduce){.fin-glow,.fin-badge i{animation:none}}
body.calm .fin-glow{animation:none}