/* ===========================================================
   VR Studios — site.css
   Dark luxury theme · frosted command panel · amber volumetric
   glow · sliding pill navigation.
   =========================================================== */

:root{
  --bg-0:#050506;
  --bg-1:#0c0c0f;
  --panel:rgba(20,20,24,.55);
  --panel-solid:#141418;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.055);
  --ink:#F5F5F7;
  --ink-dim:#B4B4BC;
  --ink-mute:#7C7C86;
  --gold:#F4B740;
  --gold-soft:rgba(244,183,64,.16);
  --glow:255,146,48;              /* amber, used as rgba(var(--glow), a) */
  --radius:26px;
  --radius-sm:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
  --shell-max:1280px;
  --pad:clamp(16px,2.4vw,36px);
  --appW:100vw;                    /* logical viewport (overridden on mobile) */
  --appH:100vh;
  --font-display:"Sora","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                 /* app-like: the panel scrolls, not the page */
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold-soft);color:#fff}

/* ---------- Word-by-word reveal (blur → sharp, rising ~9px) ---------- */
.word{
  display:inline-block;
  opacity:0;filter:blur(8px);transform:translateY(9px);
  animation:wordIn .6s var(--ease) forwards;
  animation-delay:var(--d,0ms);
  will-change:opacity,filter,transform;
}
@keyframes wordIn{to{opacity:1;filter:blur(0);transform:none}}

/* ---------- Ambient background ---------- */
.stage{
  position:fixed;inset:0;
  background:linear-gradient(120deg,#050506 0%,#0b0b0e 45%,#111015 100%);
}
/* the amber volumetric glow — animated so it slowly breathes down to black */
.stage .glow{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 900px at 78% 42%, rgba(var(--glow),.5), transparent 60%),
    radial-gradient(900px 700px at 85% 30%, rgba(255,90,20,.32), transparent 55%);
  animation:breathe 11s ease-in-out infinite;
  will-change:opacity,transform;
}
@keyframes breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.14;transform:scale(1.04)}
}
.stage::after{           /* subtle grain/vignette */
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.6) 100%);
  pointer-events:none;
}

/* The person cutout — lives inside the frame, anchored bottom-right,
   painting above any background video but below the text + nav */
.figure{
  position:absolute;right:clamp(8px,2.6vw,64px);bottom:0;
  height:97%;max-height:none;width:auto;z-index:1;pointer-events:none;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 99%);
          mask-image:linear-gradient(to bottom,#000 86%,transparent 99%);
  animation:figIn 1.1s var(--ease) both;
  transition:filter .6s var(--ease),opacity .6s var(--ease);
}
/* defocused on Portfolio + Behind the scenes so the work reads first */
.figure.blur{
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)) blur(52px);
  opacity:.42;
}
@keyframes figIn{from{opacity:0;transform:translateY(24px) scale(1.02)}to{opacity:1;transform:none}}

/* Full-frame background video (home only) + black tint fill */
.bgvideo{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s;
}
.bgvideo.show{opacity:1;visibility:visible}
.bgvideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bgvideo .tint{position:absolute;inset:0;background:#000;opacity:var(--tint,.5)}

/* ---------- Shell + glass panel ---------- */
.shell{
  position:relative;z-index:2;
  height:var(--appH);width:var(--appW);
  display:flex;align-items:center;justify-content:center;
  padding:var(--pad);
}
.panel{
  position:relative;
  /* 4:3 frame, as large as it can be inside the padded viewport */
  width:min(100%, calc((var(--appH) - 2 * var(--pad)) * 4 / 3));
  aspect-ratio:4 / 3;
  height:auto;
  max-height:calc(var(--appH) - 2 * var(--pad));
  border-radius:var(--radius);
  border:1px solid var(--line);
  /* opaque on the left for legible text, transparent on the right so the
     figure + amber glow read through crisply (like the reference) */
  background:linear-gradient(100deg,
    rgba(8,8,10,.95) 0%,
    rgba(8,8,10,.90) 30%,
    rgba(8,8,10,.60) 47%,
    rgba(8,8,10,.16) 66%,
    rgba(8,8,10,0) 82%);
  box-shadow:0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  display:flex;flex-direction:column;
  animation:panelIn 1s var(--ease) both;
}
/* thin frosted glass edge only on the left column, keeps the "card" feel
   without blurring the person */
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140% 120% at 0% 40%, rgba(255,255,255,.04), transparent 45%);
}
@keyframes panelIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Top bar inside panel */
.topbar,.stagearea,.nav-wrap{position:relative;z-index:1}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.4vw,30px) clamp(20px,3vw,44px);
  flex:0 0 auto;
}
.status{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:.01em}
.status .dot{width:9px;height:9px;border-radius:50%;background:#39d353;box-shadow:0 0 0 4px rgba(57,211,83,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(57,211,83,.18)}50%{box-shadow:0 0 0 7px rgba(57,211,83,.05)}}
.cta-top{
  background:var(--gold);color:#1a1305;font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:999px;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  box-shadow:0 8px 24px rgba(244,183,64,.25);
}
.cta-top:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(244,183,64,.38)}

/* Scrollable content region between topbar and nav */
.stagearea{flex:1 1 auto;position:relative;overflow:hidden}
.view{
  position:absolute;inset:0;
  padding:clamp(6px,1vw,10px) clamp(20px,3vw,44px) 8px;
  overflow-y:auto;overflow-x:hidden;
  opacity:0;visibility:hidden;
  transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .55s var(--ease),visibility .5s;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
.view::-webkit-scrollbar{width:8px}
.view::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
.view.is-active{opacity:1;visibility:visible;transform:none}
.view.is-leaving{transform:translateY(-14px)}

/* ---------- HOME ---------- */
.home-wrap{max-width:680px;display:flex;flex-direction:column;justify-content:center;min-height:100%}
.eyebrow{color:var(--gold);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(13px,1.15vw,15.5px);margin-bottom:24px}
.home-logo{width:clamp(300px,40vw,540px);height:auto;margin-bottom:24px}
.home-by{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.9vw,50px);letter-spacing:-.01em;line-height:1.02}
.home-desc{margin-top:26px;max-width:560px;color:var(--ink-dim);font-size:clamp(16px,1.4vw,19px);line-height:1.62}

/* ---------- Section header (shared) ---------- */
.sec-head{margin:6px 0 26px}
.sec-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.02em}
.sec-sub{margin-top:8px;color:var(--ink-mute);font-size:15px;max-width:560px}

/* ---------- PORTFOLIO ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.chip{
  padding:12px 22px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--ink-dim);font-size:15px;font-weight:600;
  transition:all .3s var(--ease);
}
.chip:hover{border-color:rgba(255,255,255,.22);color:var(--ink)}
.chip.is-active{background:var(--ink);color:#111;border-color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding-bottom:20px}
.card{
  border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);
  background:rgba(255,255,255,.02);cursor:pointer;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
  animation:cardIn .5s var(--ease) both;
}
.card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.22);box-shadow:0 26px 50px rgba(0,0,0,.5)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card-thumb{position:relative;aspect-ratio:16/9;background:#0e0e11 center/cover no-repeat}
.card-thumb .play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.15);opacity:0;transition:opacity .3s var(--ease)
}
.card:hover .play{opacity:1}
.play svg{width:58px;height:58px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.card-body{padding:16px 18px 18px}
.card-cat{color:var(--gold);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.card-title{margin-top:6px;font-weight:600;font-size:18px;line-height:1.3}

/* ---------- CLIENTS ---------- */
.view[data-view=clients]{display:flex;flex-direction:column}
.logo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;
  gap:18px 24px;max-width:38%;flex:1;min-height:0;align-content:stretch;padding-bottom:0;
}
.logo-tile{
  display:grid;place-items:center;overflow:visible;min-height:0;
  width:auto!important;height:auto!important;                 /* fill the grid cell, scale to fit */
  background:transparent;border:none;padding:4px;
  transition:transform .4s var(--ease-spring);
  animation:cardIn .5s var(--ease) both;
}
.logo-tile img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .4s var(--ease-spring),filter .4s var(--ease)}
.logo-tile:hover{transform:translateY(-6px)}
.logo-tile:hover img{transform:scale(1.09);filter:drop-shadow(0 10px 24px rgba(244,183,64,.4))}
/* only empty placeholders show a boundary so you can size them */
.logo-tile.empty{border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.logo-tile.empty:hover{transform:none}
.logo-tile .ph{color:var(--ink-mute);font-size:12px;text-align:center;font-weight:600}
.logo-tile .ph small{display:block;margin-top:4px;color:rgba(255,255,255,.25);font-weight:500}

/* ---------- BEHIND THE SCENES (blog) ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding-bottom:24px}
.post{
  border-radius:var(--radius-sm);border:1px solid var(--line);overflow:hidden;
  background:rgba(255,255,255,.02);cursor:pointer;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
  animation:cardIn .5s var(--ease) both;
}
.post:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.post-cover{aspect-ratio:16/9;background:#0e0e11 center/cover no-repeat;flex:0 0 auto}
.post-cover.empty{display:grid;place-items:center;color:var(--ink-mute);font-size:13px}
.post-body{padding:16px 18px 20px}
.post-date{color:var(--ink-mute);font-size:12px;font-weight:600;letter-spacing:.03em}
.post-title{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.25;margin:8px 0 8px}
.post-excerpt{color:var(--ink-dim);font-size:14px;line-height:1.55}
.read{margin-top:14px;color:var(--gold);font-weight:600;font-size:13.5px;display:inline-flex;gap:6px;align-items:center}

/* Article reader */
.article{max-width:720px;padding-bottom:40px;animation:cardIn .5s var(--ease) both}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--ink-dim);font-weight:600;font-size:14px;margin-bottom:20px;transition:color .25s}
.back:hover{color:var(--ink)}
.article h1{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;line-height:1.1}
.article .a-date{color:var(--ink-mute);font-size:13px;font-weight:600;margin:12px 0 26px}
.blk{margin:0 0 20px}
.blk-h{font-family:var(--font-display);font-weight:600;font-size:22px;margin:34px 0 12px}
.blk-p{color:var(--ink-dim);font-size:16.5px;line-height:1.7}
.blk-img{border-radius:14px;border:1px solid var(--line);width:100%}
.blk-yt{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.blk-yt iframe{position:absolute;inset:0;width:100%;height:100%}

/* ---------- ABOUT ---------- */
.about-wrap{max-width:560px;display:flex;flex-direction:column;justify-content:center;min-height:100%}
.about-desc{color:var(--ink-dim);font-size:clamp(15px,1.3vw,17.5px);line-height:1.7;margin:18px 0 30px}
.about-links{display:flex;flex-direction:column;gap:14px}
.about-link{display:inline-flex;align-items:center;gap:13px;font-size:16px;font-weight:600;width:fit-content;transition:color .25s}
.about-link:hover{color:var(--gold)}
.about-link .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);flex:0 0 auto}
.about-link .ic svg{width:19px;height:19px}

/* ---------- Sliding pill navigation (scaled up) ---------- */
.nav-wrap{flex:0 0 auto;display:flex;justify-content:center;padding:0 20px clamp(22px,2.8vw,38px)}
.nav{
  position:relative;display:flex;gap:4px;
  padding:10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(14,14,16,.5);
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  box-shadow:0 22px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
}
.nav .pill{                /* the moving white patch */
  position:absolute;top:10px;left:0;height:calc(100% - 20px);
  background:var(--ink);border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.38);
  transition:transform .5s var(--ease-spring),width .5s var(--ease-spring);
  z-index:0;
}
.nav-btn{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:11px;
  padding:16px 28px;border-radius:999px;font-size:16px;font-weight:600;color:var(--ink-dim);
  white-space:nowrap;transition:color .35s var(--ease);
}
.nav-btn svg{width:20px;height:20px;transition:color .35s var(--ease)}
.nav-btn:hover{color:var(--ink)}
.nav-btn.is-active{color:#111}
.nav-btn .lbl{transition:opacity .3s}

/* Video lightbox — a card with the player maximized on top, details below */
.lightbox{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  background:rgba(3,3,4,.86);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  padding:clamp(14px,3vw,40px);
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox.plain .lb-details{display:none}
.lightbox.plain .lb-card{width:min(1100px,100%)}
.lb-card{
  width:min(980px,100%);max-height:92vh;overflow:auto;
  background:var(--panel-2,#0d0d11);border:1px solid var(--line);
  border-radius:20px;padding:clamp(14px,1.8vw,22px);
  box-shadow:0 50px 140px rgba(0,0,0,.7);
  transform:scale(.94) translateY(10px);opacity:0;
  transition:transform .5s var(--ease-spring),opacity .45s var(--ease);
}
.lightbox.open .lb-card{transform:none;opacity:1}
.lb-video{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line)}
.lb-video .frame{width:100%;height:100%}
.lb-video iframe{width:100%;height:100%;border:0;display:block}
.lb-novid{width:100%;height:100%;display:grid;place-items:center;color:var(--ink-mute);font-size:14px}
.lb-details{padding:clamp(14px,1.6vw,20px) 6px 4px}
.lb-title{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.6vw,32px);line-height:1.12;letter-spacing:-.01em;margin-bottom:16px}
.lb-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px 26px;margin-bottom:16px}
.lb-row{display:flex;flex-direction:column;gap:3px;padding:9px 0;border-top:1px solid var(--line-soft)}
.lb-k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.lb-v{font-size:15.5px;color:var(--ink);font-weight:500}
.lb-desc{color:var(--ink-dim);font-size:15px;line-height:1.66;margin-top:4px}
.lightbox .close,.brandbox .close{position:fixed;top:20px;right:24px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:22px;color:#fff;transition:background .25s,transform .25s;z-index:2}
.lightbox .close:hover,.brandbox .close:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}

/* brand logo shown inside the video popup Brand row */
.lb-v.brand-v{display:flex;align-items:center;gap:10px}
.lb-brandlogo{display:inline-grid;place-items:center;height:30px;max-width:120px}
.lb-brandlogo img{max-height:30px;max-width:120px;object-fit:contain}

/* ---------- Homben Ai ---------- */
.homben-featured{margin-bottom:22px}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding-bottom:20px}
.yt-cell{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0e0e11;animation:cardIn .5s var(--ease) both;transition:transform .35s var(--ease),border-color .35s var(--ease)}
.yt-cell.big{aspect-ratio:16/8}
.yt-cell:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22)}
.yt-cell iframe{width:100%;height:100%;border:0;display:block}
.yt-thumb{position:absolute;inset:0;background:#0e0e11 center/cover no-repeat}
.yt-cell .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.2);transition:background .3s var(--ease)}
.yt-cell:hover .play{background:rgba(0,0,0,.32)}
.yt-cell .play svg{width:64px;height:64px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.yt-cell.big .play svg{width:84px;height:84px}
.yt-ph{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;color:var(--ink-mute)}
.yt-ph svg{width:46px;height:46px;opacity:.5}
.yt-ph span{font-size:13px;font-weight:600}

/* behind-the-scenes button inside the video popup */
.lb-actions{margin-top:18px}
.lb-actions:empty{display:none}
.bts-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:12px;background:var(--gold);color:#111;font-weight:700;font-size:14.5px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.bts-btn svg{width:18px;height:18px}
.bts-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(244,183,64,.3)}

/* ---------- cursor / idle edge glow on the frame ---------- */
.edgeglow{
  position:absolute;inset:0;border-radius:var(--radius);padding:2px;
  pointer-events:none;z-index:6;opacity:1;
  filter:blur(.6px);
  background:radial-gradient(440px 440px at var(--mx,50%) var(--my,0%),
            rgba(var(--glow),.95) 0%, rgba(255,205,130,.45) 34%, rgba(var(--glow),0) 68%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* ---------- My Passion ---------- */
.passion-wrap{max-width:min(640px,60%);display:flex;flex-direction:column;justify-content:center;min-height:100%}
.passion-desc{margin-top:16px;color:var(--ink-dim);font-size:clamp(16px,1.4vw,19px);line-height:1.7;max-width:560px}
.passion-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.shorts-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px}
.short-cell{width:clamp(150px,20vw,220px);aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0e0e11;animation:cardIn .5s var(--ease) both}
.short-cell iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Brand popup ---------- */
.brandbox{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(3,3,4,.86);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  padding:clamp(14px,3vw,40px);
}
.brandbox.open{opacity:1;visibility:visible}
.bp-card{
  width:min(1000px,100%);max-height:90vh;overflow:auto;
  background:var(--panel-2,#0d0d11);border:1px solid var(--line);border-radius:20px;
  padding:clamp(18px,2vw,28px);box-shadow:0 50px 140px rgba(0,0,0,.7);
  transform:scale(.94) translateY(10px);opacity:0;
  transition:transform .5s var(--ease-spring),opacity .45s var(--ease);
}
.brandbox.open .bp-card{transform:none;opacity:1}
.bp-head{display:flex;align-items:center;gap:18px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.bp-logo{width:96px;height:64px;display:grid;place-items:center;flex:0 0 auto}
.bp-logo img{max-width:100%;max-height:100%;object-fit:contain}
.bp-logo.noimg{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--gold)}
.bp-name{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em}
.bp-count{color:var(--gold);font-size:13px;font-weight:600;margin-top:4px}
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}

/* ---------- nav overflow (7 items) ---------- */
.nav{max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{display:none}

/* Preview ribbon (only shown when viewing local unsaved builder content) */
.preview-flag{position:fixed;top:0;left:0;right:0;z-index:80;text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:6px;background:var(--gold);color:#1a1305}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  html:not(.m-land):not(.force-pc) body{overflow:auto}
  html:not(.m-land):not(.force-pc) .figure{height:46vh;right:-4vw;bottom:auto;top:70px;opacity:.32;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)) blur(.4px)}
  html:not(.m-land):not(.force-pc) .panel{aspect-ratio:auto;width:100%;height:auto;min-height:calc(100vh - 28px);max-height:none}
  html:not(.m-land):not(.force-pc) .shell{align-items:stretch}
  html:not(.m-land):not(.force-pc) .home-wrap,html:not(.m-land):not(.force-pc) .about-wrap{min-height:auto;padding:20px 0 40px}
  html:not(.m-land):not(.force-pc) .logo-grid{max-width:none}
  html:not(.m-land):not(.force-pc) .passion-wrap{max-width:none}
  html:not(.m-land):not(.force-pc) .nav{overflow-x:auto;max-width:100%;justify-content:flex-start}
  html:not(.m-land):not(.force-pc) .nav-btn{padding:14px 18px;font-size:15px}
}
@media (max-width:560px){
  html:not(.m-land):not(.force-pc) .nav-btn .lbl{display:none}   /* icons only on small screens */
  html:not(.m-land):not(.force-pc) .nav-btn{padding:15px}
  html:not(.m-land):not(.force-pc) .figure{display:none}
  html:not(.m-land):not(.force-pc) .home-logo{width:min(74vw,300px)}
}

/* ============ MOBILE FORCED-LANDSCAPE MODE ============ */
/* The whole app is sized to the device's landscape box (via --appW/--appH set
   in JS). When the phone is held portrait we rotate the app so it always reads
   as landscape. Touch-only: page never scrolls; arrows move overflowing views. */
html.m-land, html.m-land body{overflow:hidden;height:100%;position:fixed;inset:0;width:100%}
html.m-land #app{position:fixed;left:0;top:0;width:var(--appW);height:var(--appH);overflow:hidden}
html.m-land.is-portrait #app{
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center center;
}
html.m-land{--pad:0px}
/* full screen — no frame, no glow, content uses the whole screen */
html.m-land .shell{padding:0}
html.m-land .panel{
  width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;
  border:none;border-radius:0;box-shadow:none;
  background:linear-gradient(115deg,#0a0a0d 0%,#0d0d12 60%,#141019 100%);
  animation:none;
}
html.m-land .edgeglow{display:none}
html.m-land .figure{display:block;height:86%;right:clamp(6px,2vw,26px);opacity:1}  /* keep photo, scaled down */
html.m-land .stage .glow{display:none}
html.m-land .topbar{display:none}                 /* remove status + CTA; titles go to top */
html.m-land .stagearea{padding:14px 18px 0}
html.m-land .nav-wrap{padding:0 12px 12px}

/* views may scroll vertically by touch where content overflows */
html.m-land .view{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

/* --- home: description may use full width and overlap the photo --- */
html.m-land .home-logo{width:clamp(190px,26vw,330px)}
html.m-land .home-by{font-size:clamp(24px,3.4vw,38px)}
html.m-land .home-wrap{max-width:none}
html.m-land .home-desc{font-size:clamp(14px,1.5vw,16px);max-width:none}
html.m-land .sec-head{margin-bottom:12px}
html.m-land .sec-title{font-size:clamp(24px,3.6vw,36px)}
html.m-land .sec-sub{font-size:13px}

/* --- compact bottom nav: icons only; active shows its label --- */
html.m-land .nav{padding:5px;gap:2px}
html.m-land .nav-btn{padding:9px 10px;font-size:12.5px;gap:0}
html.m-land .nav-btn svg{width:19px;height:19px}
html.m-land .nav-btn .lbl{display:none}
html.m-land .nav-btn.is-active{gap:8px;padding:9px 15px}
html.m-land .nav-btn.is-active .lbl{display:inline}

/* --- portfolio: categories left, videos 2-per-row right, scrollable --- */
html.m-land [data-view=portfolio]{display:flex;flex-direction:column}
html.m-land [data-view=portfolio] .pf-body{display:flex;flex-direction:row;gap:12px;flex:1;min-height:0}
html.m-land [data-view=portfolio] .chips{flex:0 0 128px;flex-direction:column;gap:7px;margin:0;overflow-y:auto;max-height:100%;padding-right:2px}
html.m-land [data-view=portfolio] .chip{width:100%;text-align:left;padding:8px 12px;font-size:12px}
html.m-land [data-view=portfolio] .grid{flex:1;grid-template-columns:repeat(2,1fr);gap:10px;overflow-y:auto;max-height:100%;align-content:start;padding-right:2px}
html.m-land [data-view=portfolio] .card-body{padding:9px 10px 11px}
html.m-land [data-view=portfolio] .card-title{font-size:12.5px;margin-top:3px}
html.m-land [data-view=portfolio] .card-cat{font-size:10px}
html.m-land [data-view=portfolio] .card-thumb{aspect-ratio:16/9}
html.m-land [data-view=portfolio] .play svg{width:40px;height:40px}

/* --- brands: 5 per row, low scale, clear of the photo --- */
html.m-land [data-view=clients]{display:flex;flex-direction:column}
html.m-land .logo-grid{grid-template-columns:repeat(5,1fr);gap:8px 10px;max-width:58%;flex:1;overflow:visible;align-content:stretch}
html.m-land .logo-tile{aspect-ratio:auto;padding:3px}
html.m-land .logo-tile .ph{font-size:9px}
html.m-land .logo-tile .ph small{display:none}

/* --- behind the scenes + homben: compact list rows, small thumb left --- */
html.m-land .posts{grid-template-columns:1fr;gap:10px}
html.m-land .post{flex-direction:row;align-items:stretch}
html.m-land .post-cover{width:132px;flex:0 0 132px;aspect-ratio:16/9}
html.m-land .post-cover.empty{font-size:10px}
html.m-land .post-body{padding:10px 14px;flex:1}
html.m-land .post-title{font-size:15px;margin:4px 0 6px}
html.m-land .post-excerpt{font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.m-land .post-date{font-size:11px}
html.m-land .post .read{display:none}
html.m-land .homben-featured{margin-bottom:12px}
html.m-land .homben-featured .yt-cell.big{aspect-ratio:16/9}
html.m-land .yt-grid{grid-template-columns:repeat(3,1fr);gap:10px}
html.m-land .yt-cell .play svg{width:38px;height:38px}
html.m-land .yt-cell.big .play svg{width:52px;height:52px}

/* --- passion + about (kept clear of the photo) --- */
html.m-land .passion-wrap{max-width:62%}
html.m-land .about-wrap{max-width:62%}
html.m-land .about-links{flex-direction:row;flex-wrap:wrap;gap:9px}
html.m-land .about-link{padding:9px 13px;font-size:12.5px}

/* popups fit the landscape frame */
html.m-land .lb-card,html.m-land .bp-card{max-height:calc(var(--appH) - 20px)}
html.m-land .lightbox,html.m-land .brandbox{padding:14px}
/* video popup on mobile: details on the left, player on the right */
html.m-land .lb-card{display:flex;flex-direction:row;gap:16px;align-items:stretch;width:100%;padding:16px}
html.m-land .lb-video{order:2;flex:1 1 58%;align-self:center}
html.m-land .lb-details{order:1;flex:1 1 40%;overflow-y:auto;max-height:100%;padding:2px}
html.m-land .lb-title{font-size:19px;margin-bottom:10px}
html.m-land .lb-meta{grid-template-columns:1fr;gap:0;margin-bottom:10px}
html.m-land .lb-desc{font-size:12.5px;line-height:1.55}
html.m-land .lb-actions{margin-top:12px}
html.m-land .bts-btn{padding:10px 15px;font-size:13px}
html.m-land .lightbox.plain .lb-video{flex:1 1 100%}

/* PC / mobile view toggle (mobile only, top-right, icon only) */
#viewToggle{
  position:absolute;top:10px;right:12px;z-index:9;display:none;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;color:var(--ink);
  background:rgba(20,20,24,.72);border:1px solid var(--line);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
#viewToggle svg{width:17px;height:17px}
html.m-land #viewToggle,html.force-pc #viewToggle{display:inline-flex}
html.force-pc #viewToggle{position:fixed}

/* rotate-your-screen preloader (mobile only) */
.preloader{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:#060608;transition:opacity .55s var(--ease)}
.preloader.hide{opacity:0;pointer-events:none}
.pl-rot{display:flex;flex-direction:column;align-items:center;gap:16px;animation:plRotate 4s var(--ease) forwards}
.pl-phone{color:var(--gold)}
.pl-phone svg{width:52px;height:52px}
.pl-text{color:var(--ink);font-weight:600;font-size:16px;letter-spacing:.01em;white-space:nowrap}
.pl-bar{width:210px;height:4px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.pl-bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:999px;animation:plBar 4s linear forwards}
@keyframes plBar{to{width:100%}}
@keyframes plRotate{0%,24%{transform:rotate(0)}50%,100%{transform:rotate(90deg)}}

/* up/down arrows for overflowing content (only shown when needed) */
.scroll-arrows{position:absolute;right:10px;bottom:78px;z-index:8;display:none;flex-direction:column;gap:8px}
html.m-land .scroll-arrows.show{display:flex}
.scroll-arrows button{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,20,24,.7);border:1px solid var(--line);color:var(--ink);
  backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(0,0,0,.45);
  transition:opacity .25s var(--ease),transform .2s var(--ease);
}
.scroll-arrows button:active{transform:scale(.92)}
.scroll-arrows button[disabled]{opacity:.28;pointer-events:none}
.scroll-arrows svg{width:20px;height:20px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001ms!important}
  .word{opacity:1!important;filter:none!important;transform:none!important}
  .stage .glow{opacity:1!important}
}