/* ==========================================================================
   CityCore Creative — cinematic site
   Palette comes from the logo: deep teal, brass gold, warm bone.
   ========================================================================== */

:root{
  --ink:#051514;
  --deep:#0a2a29;
  --teal:#134c4d;
  --teal-hi:#1c6664;
  --bone:#ece5d4;
  --bone-dim:rgba(236,229,212,.66);
  --gold:#c9a24b;
  --film:#030c0c;
  --display:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --pad:clamp(20px,4vw,56px);
  /* Height of one letterbox matte when the frame is 2.39:1 */
  --matte:calc((100vh - min(100vh, 100vw / 2.39)) / 2);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);overflow-x:clip;-webkit-text-size-adjust:100%}
html.is-locked{overflow:hidden}
body{
  font-family:var(--body);font-size:17px;line-height:1.6;
  color:var(--bone);background:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:2px;
  font-size:15px;font-weight:600;letter-spacing:.01em;
  transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--bone);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(236,229,212,.38);color:var(--bone)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* --------------------------------------------------------------------------
   Film grain (generated in JS) — one overlay for the whole page
   -------------------------------------------------------------------------- */
.grain{
  position:fixed;inset:-60px;z-index:150;pointer-events:none;
  background-image:var(--grain,none);background-size:180px 180px;opacity:.035;
  animation:grain .9s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}  17%{transform:translate(-18px,12px)}
  33%{transform:translate(14px,-20px)} 50%{transform:translate(-10px,-6px)}
  67%{transform:translate(20px,16px)} 83%{transform:translate(-14px,22px)}
  100%{transform:translate(0,0)}
}

/* --------------------------------------------------------------------------
   Opening sequence
   -------------------------------------------------------------------------- */
.intro{position:fixed;inset:0;z-index:400;pointer-events:none;display:none}
.js .intro{display:block;pointer-events:auto}
.is-failsafe .intro{display:none}
.matte{
  position:absolute;left:0;right:0;height:50.2%;background:var(--film);z-index:1;
  transition:transform 1.25s var(--ease);
}
.matte-top{top:0}
.matte-bot{bottom:0}
.intro.stage1 .matte-top{transform:translateY(calc(-50vh + var(--matte)))}
.intro.stage1 .matte-bot{transform:translateY(calc(50vh - var(--matte)))}
.intro.stage2 .matte-top{transform:translateY(-101%)}
.intro.stage2 .matte-bot{transform:translateY(101%)}
.intro.done{display:none}

.leader{
  position:absolute;z-index:2;left:50%;top:50%;
  width:min(46vmin,360px);aspect-ratio:1;transform:translate(-50%,-50%);
  display:grid;place-items:center;color:var(--gold);
  transition:opacity .35s;
}
.intro.stage1 .leader{opacity:0}
.leader-ring{position:absolute;inset:0;width:100%;height:100%}
.leader-sweep{
  position:absolute;inset:3%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(201,162,75,0) 0deg,rgba(201,162,75,.30) 340deg,rgba(201,162,75,0) 360deg);
}
.leader.tick .leader-sweep{animation:sweep .4s linear}
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.leader-num{
  position:relative;font-family:var(--display);font-size:min(30vmin,240px);line-height:1;color:var(--bone);
}
.leader.tick .leader-num{animation:numIn .4s var(--ease)}
@keyframes numIn{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}
.intro-skip{
  position:absolute;z-index:3;right:var(--pad);bottom:var(--pad);
  font-size:14px;color:var(--bone-dim);padding:8px 2px;border-bottom:1px solid rgba(236,229,212,.3);
  transition:opacity .3s,color .3s;
}
.intro-skip:hover{color:var(--gold)}
.intro.stage1 .intro-skip{opacity:0;pointer-events:none}

/* --------------------------------------------------------------------------
   Navigation + camera readout
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--pad);
  transition:transform .7s var(--ease),padding .4s var(--ease);
}
.nav::before{
  content:"";position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,21,20,.82),rgba(5,21,20,0));
}
.nav.is-hidden{transform:translateY(-120%)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:36px;width:auto}
.brand span{font-family:var(--display);font-size:25px;letter-spacing:.07em;line-height:1;padding-top:3px;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(18px,3vw,38px)}
.nav-links a{font-size:15px;font-weight:500;color:var(--bone-dim);transition:color .3s}
.nav-links a:hover{color:var(--bone)}
.nav-links .nav-cta{
  color:var(--gold);padding:9px 20px;border:1px solid rgba(201,162,75,.55);border-radius:2px;
  transition:background .3s,color .3s;
}
.nav-links .nav-cta:hover{background:var(--gold);color:var(--ink)}

.hud{
  position:fixed;left:var(--pad);bottom:22px;z-index:110;
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--bone-dim);
  opacity:0;transition:opacity 1s .4s;pointer-events:none;
}
.is-ready .hud{opacity:1}
body.lb-open .hud{opacity:0}
.on-light .hud{color:rgba(5,21,20,.72)}
.rec{width:9px;height:9px;border-radius:50%;background:#d8452f;animation:rec 1.6s steps(1) infinite}
@keyframes rec{50%{opacity:.15}}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;
  padding:120px var(--pad) clamp(72px,12vh,128px);
}
.hero-media{
  position:absolute;inset:0;z-index:-4;
  background:
    radial-gradient(70% 90% at 70% 20%,var(--teal-hi) 0%,transparent 70%),
    linear-gradient(160deg,var(--teal) 0%,var(--ink) 80%);
}
.hero-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s;
}
.hero-poster.on{opacity:1;animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.13) translate(-1.2%,-.8%)}}
.hero-video{position:absolute;inset:0;opacity:0;transition:opacity 2s;overflow:hidden}
.hero-video.on{opacity:1}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-shade{
  position:absolute;inset:0;z-index:-3;
  background:
    linear-gradient(to top,rgba(5,21,20,.92) 0%,rgba(5,21,20,.58) 30%,rgba(5,21,20,.12) 62%,rgba(5,21,20,.5) 100%),
    radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(5,21,20,.45) 100%);
}
.leak{
  position:absolute;inset:-20%;z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:.34;
  background:
    radial-gradient(40% 50% at 12% 78%,rgba(201,162,75,.9),transparent 70%),
    radial-gradient(34% 44% at 92% 18%,rgba(215,110,60,.6),transparent 70%);
  animation:leak 22s ease-in-out infinite alternate;
}
@keyframes leak{from{transform:translate(-3%,2%) scale(1)}to{transform:translate(4%,-3%) scale(1.15)}}

/* Viewfinder corners */
.vf i{position:absolute;width:26px;height:26px;border:0 solid rgba(236,229,212,.55);opacity:0;transition:opacity 1.4s 1.2s}
.is-ready .vf i{opacity:1}
.vf i:nth-child(1){top:92px;left:var(--pad);border-width:1px 0 0 1px}
.vf i:nth-child(2){top:92px;right:var(--pad);border-width:1px 1px 0 0}
.vf i:nth-child(3){bottom:56px;left:var(--pad);border-width:0 0 1px 1px}
.vf i:nth-child(4){bottom:56px;right:var(--pad);border-width:0 1px 1px 0}

.hero-copy{position:relative;max-width:1320px}
.hero-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(66px,12.6vw,214px);line-height:.86;letter-spacing:.004em;
  margin-bottom:clamp(22px,4vh,40px);
}
.line{display:block;overflow:hidden;padding-top:.05em;margin-top:-.05em}
.line > span{display:block}
.js .hero-title .line > span{
  transform:translateY(112%);
  transition:transform 1.5s var(--ease);transition-delay:calc(var(--i) * .13s + .05s);
}
.is-ready .hero-title .line > span{transform:none}
.hero-sub{max-width:50ch;font-size:clamp(16px,1.3vw,19px);color:var(--bone-dim);margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.js .hero-copy .fade{opacity:0;transform:translateY(18px);transition:opacity 1.2s,transform 1.4s var(--ease);transition-delay:calc(var(--i) * .13s + .1s)}
.is-ready .hero-copy .fade{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   The reel — a horizontal film strip, pinned while you scroll
   -------------------------------------------------------------------------- */
.work{background:linear-gradient(var(--ink),var(--deep) 45%,var(--ink));padding:clamp(72px,12vh,120px) 0}
.work-stage{display:flex;flex-direction:column;gap:clamp(28px,5vh,56px)}
.work-head{padding:0 var(--pad);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.work-head h2{font-family:var(--display);font-weight:400;font-size:clamp(56px,8vw,128px);line-height:.86}
.work-head p{max-width:36ch;color:var(--bone-dim);padding-bottom:.4em}

.reel{overflow-x:auto;scroll-padding-left:var(--pad);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel-track{
  --fw:clamp(280px,78vw,520px);
  position:relative;display:flex;gap:16px;width:max-content;
  padding:58px var(--pad) 62px;background:var(--film);
}
/* Sprocket holes along both edges */
.reel-track::before,.reel-track::after{
  content:"";position:absolute;left:0;right:0;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14'%3E%3Crect x='6' y='1' width='18' height='12' rx='3' fill='%23ece5d4' fill-opacity='.2'/%3E%3C/svg%3E") repeat-x;
}
.reel-track::before{top:14px}
.reel-track::after{bottom:14px}

.frame{position:relative;flex:none;width:var(--fw);scroll-snap-align:start;display:block}
/* Edge print, like real film stock */
.frame::before,.frame::after{
  position:absolute;font-size:10px;font-weight:600;letter-spacing:.22em;color:rgba(201,162,75,.72);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.frame::before{content:attr(data-edge);top:-26px;left:0}
.frame::after{content:attr(data-n);bottom:-34px;right:0}
.frame-img{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(140deg,var(--teal) 0%,var(--deep) 100%);
}
.frame-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:saturate(.78) brightness(.82);
  transition:opacity .9s,transform 1.4s var(--ease),filter .7s;
}
.frame-img img.is-loaded{opacity:1}
.frame-ph{position:absolute;inset:0;display:grid;place-items:center}
.frame-ph img{position:static;width:56px;height:auto;opacity:.22;filter:none;transform:none}
.frame-play{
  position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;
  border:1px solid rgba(236,229,212,.75);background:rgba(5,21,20,.28);
  opacity:0;transform:scale(.8);transition:opacity .4s,transform .6s var(--ease),background .3s,border-color .3s;
}
.frame-play::after{
  content:"";position:absolute;left:27px;top:22px;
  border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--bone);
}
.frame:hover .frame-img img.is-loaded,.frame:focus-visible .frame-img img.is-loaded{transform:scale(1.06);filter:none}
.frame:hover .frame-play,.frame:focus-visible .frame-play{opacity:1;transform:none;background:rgba(201,162,75,.9);border-color:var(--gold)}
.frame:hover .frame-play::after,.frame:focus-visible .frame-play::after{border-left-color:var(--ink)}
@media (hover:none){ .frame-play{opacity:.85;transform:none} }
.frame-cap{display:block;padding-top:16px}
.frame-cap b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.3vw,34px);line-height:1;letter-spacing:.03em;color:var(--bone)}
.frame-cap i{display:block;font-style:normal;font-size:14px;color:var(--bone-dim);margin-top:5px}

.reel-meter{display:none;align-items:center;gap:20px;padding:0 var(--pad);font-size:13px;font-weight:500;letter-spacing:.12em;color:var(--bone-dim);font-variant-numeric:tabular-nums}
.reel-bar{flex:1;height:1px;background:rgba(236,229,212,.2);position:relative;overflow:hidden}
.reel-bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* Pinned mode (set by JS on wide screens): the page scrolls, the strip slides */
.work.is-pinned{padding:0}
.work.is-pinned .work-pin{position:relative}
.work.is-pinned .work-stage{
  position:sticky;top:0;height:100vh;height:100svh;justify-content:center;overflow:hidden;overflow:clip;
}
.work.is-pinned .reel{overflow:hidden;overflow:clip;scroll-snap-type:none}
.work.is-pinned .reel-track{--fw:clamp(300px,32vw,520px);will-change:transform}
.work.is-pinned .reel-meter{display:flex}
.plain-list{padding:24px var(--pad);display:grid;gap:8px}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about{padding:clamp(110px,22vh,240px) var(--pad) clamp(90px,16vh,180px);background:var(--ink)}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px clamp(40px,7vw,120px);align-items:center}
.eyebrow{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.about-copy h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,5.6vw,92px);line-height:.95;letter-spacing:.01em;margin-bottom:28px;max-width:12em}
.about-copy p{color:var(--bone-dim);font-size:clamp(16px,1.25vw,19px);max-width:52ch;margin-bottom:16px}
.about-copy p.eyebrow{color:var(--gold);font-size:13px;margin-bottom:18px}
.about-copy em{color:var(--gold);font-style:italic}
.about-photo{position:relative;aspect-ratio:4/5;margin:0;background:var(--deep);overflow:hidden;border:1px solid rgba(236,229,212,.14);max-width:520px;width:100%;justify-self:end}
.about-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
  background:radial-gradient(80% 60% at 50% 40%,var(--teal) 0%,var(--deep) 75%);color:rgba(236,229,212,.6);font-size:12px;letter-spacing:.2em;text-transform:uppercase;line-height:1.7}
.about-ph img{width:90px;height:auto;opacity:.85}
.about-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-photo .cm{position:absolute;width:22px;height:22px;border:0 solid rgba(236,229,212,.65);pointer-events:none}
.cm.tl{top:12px;left:12px;border-width:1px 0 0 1px}.cm.tr{top:12px;right:12px;border-width:1px 1px 0 0}
.cm.bl{bottom:12px;left:12px;border-width:0 0 1px 1px}.cm.br{bottom:12px;right:12px;border-width:0 1px 1px 0}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.about-photo{justify-self:start;max-width:420px}}
.stats{
  display:flex;flex-wrap:wrap;gap:32px clamp(40px,9vw,140px);
  margin-top:clamp(64px,12vh,130px);padding-top:30px;border-top:1px solid rgba(236,229,212,.16);
}
.stats div{display:flex;flex-direction:column-reverse;gap:6px}
.stats dd{font-family:var(--display);font-size:clamp(54px,6vw,92px);line-height:.9;color:var(--gold);font-variant-numeric:tabular-nums}
.stats dt{font-size:15px;color:var(--bone-dim)}

/* --------------------------------------------------------------------------
   Clients — bone paper band, two counter-moving rows
   -------------------------------------------------------------------------- */
.clients{background:var(--bone);color:var(--ink);padding:clamp(80px,14vh,150px) 0;overflow:hidden}
.clients h2{font-family:var(--display);font-weight:400;font-size:clamp(52px,7.5vw,120px);line-height:.86;color:var(--teal);padding:0 var(--pad)}
.clients .lede{padding:0 var(--pad);max-width:46ch;margin-top:16px;color:rgba(5,21,20,.68)}
.marquee{
  display:flex;overflow:hidden;margin-top:clamp(28px,5vh,52px);background:var(--bone);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee + .marquee{margin-top:clamp(16px,3vh,32px)}
.marquee-track{
  display:flex;flex:none;align-items:center;gap:clamp(56px,8vw,120px);padding-right:clamp(56px,8vw,120px);
  min-width:100%;justify-content:space-around;background:var(--bone);
  animation:marq 55s linear infinite;
}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:62s}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.marquee li{flex:none}
.marquee img{
  height:clamp(40px,5.2vw,64px);width:auto;max-width:190px;object-fit:contain;
  filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply;opacity:.92;
  transition:filter .5s,opacity .5s;
}
.marquee img.big{height:clamp(58px,7.4vw,92px)}
.marquee img.lite{filter:grayscale(1) brightness(.55) contrast(1.4)}
.marquee li:hover img{filter:none;opacity:1}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact{
  position:relative;overflow:hidden;
  padding:clamp(100px,20vh,220px) var(--pad) clamp(70px,12vh,120px);
  background:radial-gradient(70% 60% at 50% 110%,var(--teal) 0%,transparent 70%),var(--ink);
}
.contact-title{font-family:var(--display);font-weight:400;font-size:clamp(100px,21vw,380px);line-height:.82;letter-spacing:.005em;margin-bottom:clamp(40px,8vh,90px)}
.js .contact-title .line > span{transform:translateY(112%);transition:transform 1.6s var(--ease)}
.contact-title.in .line > span{transform:none}
.contact-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:48px clamp(40px,8vw,140px);align-items:end}
.contact-lede{font-size:clamp(18px,1.6vw,22px);max-width:30ch;color:var(--bone-dim);margin-bottom:22px}
.contact-mail{
  display:inline-block;font-family:var(--display);font-size:clamp(34px,5.4vw,84px);line-height:1;letter-spacing:.02em;
  color:var(--gold);padding-bottom:6px;
  background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;
  transition:background-size .7s var(--ease),color .3s;
}
.contact-mail:hover{color:var(--bone);background-size:0 1px;background-position:right bottom}
.contact-list{display:grid;gap:22px}
.contact-list div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding-top:16px;border-top:1px solid rgba(236,229,212,.16)}
.contact-list dt{font-size:15px;color:var(--bone-dim)}
.contact-list dd{font-size:18px}
.contact-list a{transition:color .3s}
.contact-list a:hover{color:var(--gold)}
.socials{display:flex;flex-wrap:wrap;gap:6px 22px}
.contact-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.social-icons{display:flex;gap:12px;list-style:none;padding:0;margin:0}
.social-icons a{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(236,229,212,.38);border-radius:50%;color:var(--bone);transition:color .3s,border-color .3s,background .3s,transform .3s}
.social-icons a:hover{color:var(--ink);background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.contact-list .social-icons a:hover{color:var(--ink)}
.foot-text{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.credit{font-size:12px;opacity:.7}
.credit a{text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.credit a:hover{color:var(--gold)}
@media (max-width:600px){.foot-text{align-items:flex-start;text-align:left}}

.foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:28px var(--pad) 72px;background:var(--ink);border-top:1px solid rgba(236,229,212,.1);
  font-size:14px;color:var(--bone-dim);
}
.foot img{height:54px;width:auto;opacity:.9}

/* --------------------------------------------------------------------------
   Video pop-up
   -------------------------------------------------------------------------- */
.lb{
  position:fixed;inset:0;z-index:300;
  display:grid;grid-template-rows:auto 1fr auto;
  background:rgba(2,9,9,.97);
}
.lb[hidden]{display:none}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad);background:#000}
.lb-meta{min-width:0}
.lb-meta h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:.03em}
.lb-meta p{font-size:14px;color:var(--bone-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-actions{display:flex;align-items:center;gap:10px;flex:none}
.lb-icon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(236,229,212,.28);transition:border-color .3s,color .3s,background .3s;
}
.lb-icon:hover{border-color:var(--gold);color:var(--gold)}
.lb-note{font-size:13px;color:var(--bone-dim);text-align:center}
.lb-note span{font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--bone);margin-right:10px}
.lb-stage{display:grid;place-items:center;padding:clamp(10px,2.4vw,32px);min-height:0}
.lb-frame{
  width:min(100%,calc((100vh - 176px - 2 * clamp(10px,2.4vw,32px)) * 16 / 9));aspect-ratio:16/9;background:#000;
  box-shadow:0 40px 140px rgba(0,0,0,.7);
}
.lb-frame iframe{width:100%;height:100%;border:0;display:block}
.lb.open .lb-frame{animation:lbFrame .9s var(--ease) both}
.lb.open .lb-top{animation:lbTop .7s var(--ease) both}
.lb.open .lb-bottom{animation:lbBottom .7s var(--ease) both}
.lb.closing{opacity:0;transition:opacity .3s}
@keyframes lbFrame{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes lbTop{from{transform:translateY(-100%)}to{transform:none}}
@keyframes lbBottom{from{transform:translateY(100%)}to{transform:none}}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  body{font-size:16px}
  .hud{display:none}
  .nav-links a:not(.nav-cta){display:none}
  .brand span{font-size:22px}
  .vf i:nth-child(1),.vf i:nth-child(2){top:78px}
  .contact-grid{grid-template-columns:1fr}
  .contact-list div{grid-template-columns:6em 1fr}
  .lb-note{font-size:12px}
  .lb-top .btn-sm{padding:9px 12px}
  .lb-frame{width:100%}
}

/* --------------------------------------------------------------------------
   Reduced motion: still, quiet, fully readable
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .grain,.leak{display:none}
  .intro{display:none!important}
  .js .hero-title .line > span,.js .contact-title .line > span{transform:none}
  .js .hero-copy .fade{opacity:1;transform:none}
  .marquee-track{animation:none}
  .marquee{overflow-x:auto}
}

/* Reel skip buttons */
.reel-jump{position:fixed;right:var(--pad);bottom:22px;z-index:120;display:flex;gap:10px;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .4s,transform .4s}
.reel-jump.show{opacity:1;transform:none;pointer-events:auto}
.rj-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:rgba(5,21,20,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(236,229,212,.38);color:var(--bone);font-size:14px;font-weight:500;transition:background .3s,color .3s,border-color .3s}
.rj-btn:hover,.rj-btn:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--ink)}
@media (max-width:760px){.reel-jump{left:var(--pad);right:var(--pad);bottom:16px;justify-content:space-between}.rj-btn{padding:11px 16px}}

/* Short opening: logo fades up, then the letterbox opens */
.leader{width:auto;aspect-ratio:auto}
.leader-logo{width:clamp(90px,14vmin,150px);height:auto;opacity:0;transform:scale(.94);animation:logoIn .8s var(--ease) .1s forwards}
@keyframes logoIn{to{opacity:1;transform:none}}

/* Menu bar stays on screen; solid backing once the page scrolls */
.nav::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:rgba(5,21,20,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(236,229,212,.1)}
.nav.is-solid{padding-top:10px;padding-bottom:10px}
.nav.is-solid::after{opacity:1}

/* Tighter gap between the end of the reel and About */
.about{padding-top:clamp(56px,9vh,100px)}
.work.is-pinned{margin-bottom:-12vh}