/* KYRIAKE MEDIA — built from scratch, Core Studios direction */

:root{
  --bg:#0c0c0c;
  --bg-2:#141414;
  --fg:#f4f4f1;
  --dim:#9c9c96;
  --hair:rgba(244,244,241,.14);
  --pop:#f4f4f1;
  --pop-ink:#0c0c0c;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--fg);
  font-family:'Switzer', sans-serif; font-weight:400; line-height:1.55;
  overflow-x:hidden; opacity:0;
}
body.ready{opacity:1; transition:opacity .5s ease;}
a{color:inherit; text-decoration:none;}
img,video{display:block; max-width:100%;}

.shell{max-width:1500px; margin:0 auto; padding:0 40px;}
@media (max-width:700px){ .shell{padding:0 20px;} }

.kicker{
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}

h1,h2,h3,.display{
  font-family:'Archivo Expanded', sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.05;
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-radius:999px; border:1px solid var(--fg); transition:all .25s ease; cursor:pointer;
  background:transparent; color:var(--fg); font-family:'Switzer', sans-serif;
}
.pill:hover{background:var(--fg); color:var(--bg);}
.pill--pop{background:var(--pop); border-color:var(--pop); color:var(--pop-ink);}
.pill--pop:hover{background:transparent; color:var(--fg);}

/* ======== HEADER ======== */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(12,12,12,.30); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
  transition:background .3s;
}
.site-head-row{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  max-width:1500px; margin:0 auto; padding:20px 40px;
}
@media (max-width:700px){ .site-head-row{padding:16px 20px; gap:14px;} }
@media (max-width:1120px){
  .site-head-row > a.pill--pop{display:none;}
}
.brand{
  font-family:'Archivo Expanded', sans-serif; font-weight:800; font-size:15px;
  letter-spacing:.08em; text-transform:uppercase;
}
.brand em{font-style:normal;}

/* logo mark, left of header */
.logo-mark{display:flex; align-items:center; flex:0 0 auto;}
.logo-mark img{width:120px; height:auto; display:block;}
@media (max-width:900px){ .logo-mark img{width:88px;} }
@media (max-width:700px){ .logo-mark img{width:62px;} }
@media (max-width:480px){ .logo-mark img{width:52px;} }

/* centre cluster — wordmark pinned to true page centre,
   Film/Photography to its left, About/Contact to its right */
.nav-centre{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:36px;
  white-space:nowrap;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.nav-group{display:flex; gap:26px;}
.nav-group--left{justify-self:end;}
.nav-group--right{justify-self:start;}
.nav-centre .wordmark{
  font-family:'Archivo Expanded', sans-serif; font-weight:800; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase;
}
@media (max-width:1120px){
  .nav-centre{grid-template-columns:auto; gap:0;}
  .nav-group{display:none;}
}
@media (max-width:560px){ .nav-centre .wordmark{font-size:12px;} }

.menu{display:flex; gap:26px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;}
.menu a,
.nav-group a{opacity:.6; transition:opacity .2s; position:relative;}
.menu a::after,
.nav-group a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--pop);
  transition:right .28s ease;
}
.menu a:hover, .menu a[aria-current],
.nav-group a:hover, .nav-group a[aria-current]{opacity:1;}
.menu a:hover::after, .menu a[aria-current]::after,
.nav-group a:hover::after, .nav-group a[aria-current]::after{right:0;}
@media (max-width:900px){ .menu{display:none;} }

/* ======== MOBILE MENU TOGGLE ======== */
.menu-toggle{
  display:none; flex:0 0 auto; align-items:center; justify-content:center;
  width:40px; height:40px; margin-left:6px;
  background:none; border:none; cursor:pointer; padding:0;
}
.menu-toggle span{
  display:block; width:22px; height:2px; background:var(--fg);
  transition:transform .25s ease, opacity .2s ease;
}
.menu-toggle span + span{margin-top:5px;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:1120px){ .menu-toggle{display:inline-flex;} }

.mobile-nav{
  position:fixed; inset:0; z-index:300;
  background:rgba(12,12,12,.98); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.mobile-nav.is-open{opacity:1; visibility:visible; transform:none; transition:opacity .3s ease, transform .3s ease;}
.mobile-nav nav{display:flex; flex-direction:column; align-items:center; gap:30px;}
.mobile-nav a{
  font-family:'Archivo Expanded', sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(26px,7vw,42px); letter-spacing:.02em; color:var(--fg); opacity:.75; transition:opacity .2s;
}
.mobile-nav a:hover, .mobile-nav a[aria-current]{opacity:1;}
.mobile-nav a.pill{font-family:'Switzer', sans-serif; font-size:13px; margin-top:10px;}
.mobile-nav a.pill--pop{color:var(--pop-ink); opacity:1;}
.mobile-nav a.pill--pop:hover{color:var(--fg);}
body.mobile-nav-locked{overflow:hidden;}
@media (min-width:1121px){ .mobile-nav{display:none;} }

main{padding-top:76px;}

/* ======== MEGA HERO — typographic over film ======== */
.mega{
  min-height:92vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 70px; position:relative; overflow:hidden;
  margin-top:-76px; padding-top:76px;
}
.mega-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0;
}
.mega-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,12,12,.62) 0%, rgba(12,12,12,.3) 45%, rgba(12,12,12,.5) 100%);
}
.mega-inner{position:relative; z-index:2; width:100%;}
.mega h1{
  font-size:clamp(30px,5.2vw,76px); line-height:1.04; max-width:15ch;
  text-wrap:balance;
}
.mega h1 .alt{font-style:italic; text-transform:none; letter-spacing:-.01em;}
.mega .mega-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-top:48px;
}
.mega .mega-foot p{max-width:44ch; color:var(--dim); font-size:16px;}

/* ======== TICKER ======== */
.ticker{
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  overflow:hidden; white-space:nowrap; padding:16px 0; user-select:none;
}
.ticker-track{display:inline-block; animation:tick 28s linear infinite;}
.ticker span{
  font-family:'Archivo Expanded', sans-serif; font-weight:700; text-transform:uppercase;
  font-size:14px; letter-spacing:.14em; margin-right:56px; color:var(--dim);
}
.ticker span i{font-style:normal; color:var(--fg); margin-right:56px; opacity:.35;}
@keyframes tick{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (max-width:700px){
  .ticker{padding:11px 0;}
  .ticker span{font-size:11px; letter-spacing:.1em; margin-right:34px;}
  .ticker span i{margin-right:34px;}
}

/* ======== MOSAIC — mixed project grid ======== */
.mosaic-head{padding:90px 0 44px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.mosaic-head h2{font-size:clamp(24px,3.4vw,44px);}
.mosaic{
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px; padding-bottom:8px;
}
.chip{position:relative; overflow:hidden; display:block; background:var(--bg-2);}
.chip img{width:100%; height:100%; object-fit:cover; transition:transform 1s ease, opacity .4s;}
.chip:hover img{transform:scale(1.05);}
.chip .chip-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(12,12,12,.72); color:var(--fg); padding:6px 12px; border-radius:999px;
}
.chip .chip-name{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:40px 16px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  font-family:'Archivo Expanded', sans-serif; font-weight:700; text-transform:uppercase;
  font-size:13px; letter-spacing:.04em;
}
.chip--w4{grid-column:span 4; aspect-ratio:16/10;}
.chip--w2{grid-column:span 2; aspect-ratio:4/5;}
.chip--w3{grid-column:span 3; aspect-ratio:3/2;}
@media (max-width:800px){
  .mosaic{grid-template-columns:1fr 1fr;}
  .chip--w4,.chip--w2,.chip--w3{grid-column:span 2; aspect-ratio:4/3;}
}

/* ======== SERVICES — numbered rows ======== */
.svc{padding-top:20px; padding-bottom:110px;}
.svc-row{
  display:grid; grid-template-columns:90px 1fr 1.2fr; gap:30px; align-items:baseline;
  padding:34px 0; border-top:1px solid var(--hair);
}
.svc-row:last-child{border-bottom:1px solid var(--hair);}
.svc-row .n{font-family:'Archivo Expanded', sans-serif; font-weight:700; color:var(--dim); font-size:14px;}
.svc-row h3{font-size:clamp(18px,2.4vw,28px);}
.svc-row p{color:var(--dim); font-size:15px; max-width:56ch;}
@media (max-width:760px){
  .svc{padding-top:10px; padding-bottom:70px;}
  .svc-row{grid-template-columns:1fr; gap:8px; padding:22px 0 22px 16px;}
}

/* ======== CLIENT LOGOS ======== */
.clients{padding-top:90px; padding-bottom:90px;}
.clients .kicker{display:block; text-align:center; margin-bottom:40px;}
.clients-grid{display:flex; flex-direction:column; gap:32px;}
.clients-row{display:flex; align-items:center; justify-content:space-evenly; flex-wrap:wrap; gap:24px 40px;}
.clients-row img{width:auto; height:38px; max-width:100%; object-fit:contain; opacity:.85; transition:opacity .2s, transform .3s;}
.clients-row img.logo-compact{height:29px;}
.clients-row img:hover{opacity:1; transform:translateY(-3px);}
@media (max-width:700px){
  .clients-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px 12px; align-items:center;}
  .clients-row{display:contents;}
  .clients-row img{height:28px; justify-self:center;}
  .clients-row img.logo-compact{height:22px;}
}
@media (max-width:420px){
  .clients-row img{height:24px;}
  .clients-row img.logo-compact{height:19px;}
}

/* ======== OUTRO CTA ======== */
.outro{padding-top:130px; padding-bottom:130px; text-align:left; border-top:1px solid var(--hair);}
.outro h2{font-size:clamp(30px,5.4vw,72px); max-width:16ch; margin-bottom:36px;}
.outro h2 .alt{font-style:italic; text-transform:none; letter-spacing:-.01em;}

/* ======== PAGE INTRO (subpages) ======== */
.page-intro{padding-top:110px; padding-bottom:60px;}
.page-intro .kicker{display:block; margin-bottom:18px;}
.page-intro h1{font-size:clamp(34px,6vw,84px); line-height:1; max-width:14ch;}
.page-intro p{margin-top:26px; color:var(--dim); max-width:52ch; font-size:16px;}

/* ======== WORK GRID (film / photo pages) ======== */
.workgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:20px 0 110px;}
.workgrid .chip{aspect-ratio:4/5;}
@media (max-width:900px){ .workgrid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .workgrid{grid-template-columns:1fr;} }

.chip--soon{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--hair); cursor:default;
}
.chip--soon .chip-name{
  position:static; background:none; padding:0; text-align:center;
  color:var(--dim); font-size:11px; letter-spacing:.14em;
}
.chip--soon:hover img{transform:none;}

/* ======== PAGE LEAD — headline left, supporting copy right ======== */
.page-lead{padding-top:120px; padding-bottom:80px;}
.page-lead-grid{
  display:grid; grid-template-columns:40fr 60fr; gap:60px; align-items:end;
}
.page-lead .kicker{display:block; margin-bottom:20px;}
.page-lead h1{font-size:clamp(34px,5.6vw,76px); line-height:1; max-width:11ch;}
.page-lead p{color:var(--dim); font-size:17px; max-width:52ch;}
.lead-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px;}
.lead-tags span{
  border:1px solid var(--hair); border-radius:999px; padding:9px 17px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
@media (max-width:900px){
  .page-lead{padding-top:80px; padding-bottom:50px;}
  .page-lead-grid{grid-template-columns:1fr; gap:30px; align-items:start;}
  .page-lead h1{max-width:none;}
}

/* ======== PROJECT — sticky detail column + stepped image column ======== */
.proj{
  display:grid; grid-template-columns:40fr 60fr; gap:60px;
  padding:100px 0; border-top:1px solid var(--hair);
}
.proj:first-of-type{border-top:none; padding-top:60px;}

.proj-side{position:sticky; top:120px; align-self:start;}
.proj-side .kicker{display:block; margin-bottom:16px;}
.proj-side h2{font-size:clamp(23px,3vw,37px); line-height:1.1; margin-bottom:20px;}
.proj-side p{color:var(--dim); font-size:15.5px; max-width:42ch;}
.proj-meta{max-width:42ch;}

.proj-meta{margin-top:30px; border-top:1px solid var(--hair);}
.proj-meta div{
  display:flex; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--hair);
  font-size:12px; letter-spacing:.06em;
}
.proj-meta dt, .proj-meta .k{
  text-transform:uppercase; letter-spacing:.16em; font-size:10.5px; color:var(--dim);
}
.proj-meta .v{color:var(--fg); text-align:right;}
.proj-side .pill{margin-top:26px;}

.proj-shots{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start;}
.proj-shots figure{margin:0; overflow:hidden;}
.proj-shots figure.wide{grid-column:1 / -1;}
.proj-shots img{
  width:100%; height:100%; object-fit:cover; cursor:pointer;
  transition:transform 1.1s ease, opacity .3s ease;
}
.proj-shots figure:hover img{transform:scale(1.03); opacity:.92;}
.proj-shots figure.wide img{aspect-ratio:3/2;}
.proj-shots figure:not(.wide) img{aspect-ratio:4/5;}
.proj-shots figure.tall img{aspect-ratio:3/4;}

@media (max-width:980px){
  .proj{grid-template-columns:1fr; gap:34px; padding:70px 0;}
  .proj-side{position:static;}
}
@media (max-width:600px){
  .proj-shots{grid-template-columns:1fr;}
  .proj-shots figure:not(.wide) img{aspect-ratio:3/2;}
}

/* ======== CASE — featured project band (legacy) ======== */
.case{padding:80px 0; border-top:1px solid var(--hair);}
.case-head{display:grid; grid-template-columns:1fr 1.3fr; gap:44px; margin-bottom:30px;}
.case-head h2{font-size:clamp(20px,2.8vw,34px);}
.case-head p{color:var(--dim); font-size:15px;}
.case-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.case-strip img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;
  cursor:pointer; transition:opacity .3s ease;
}
.case-strip img:hover{opacity:.82;}
@media (max-width:860px){
  .case-head{grid-template-columns:1fr;}
  .case-strip{grid-template-columns:repeat(2,1fr);}
}

/* ======== ABOUT SPLITS ======== */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:80px 0; border-top:1px solid var(--hair);}
.duo img{width:100%; height:100%; object-fit:cover; border-radius:6px;}
.duo .map-embed{width:100%; height:100%; min-height:360px; border:0; border-radius:6px;}
.duo .kicker{display:block; margin-bottom:14px;}
.duo h2{font-size:clamp(22px,3.2vw,38px); margin-bottom:18px;}
.duo p{color:var(--dim); font-size:16px; max-width:56ch;}
.duo p + p{margin-top:18px;}
@media (max-width:800px){ .duo{grid-template-columns:1fr;} }

/* ======== CONTACT ======== */
.contact-wrap{padding-top:40px; padding-bottom:120px;}
.contact-cols{display:grid; grid-template-columns:1fr 1.4fr; gap:70px;}
.contact-cols .side{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:100%;}
.contact-cols .side h2{font-size:clamp(28px,3.6vw,42px); line-height:1.1;}
.contact-cols .side p{color:var(--dim); font-size:15px; line-height:1.6; max-width:36ch; margin-top:18px;}
.contact-cols .side p.hours{color:var(--fg); margin-top:26px;}
.contact-cols .side p.only-mobile{display:none;}
@media (max-width:820px){
  .contact-cols .side p.only-desktop{display:none;}
  .contact-cols .side p.only-mobile{display:block;}
}
form{display:grid; gap:22px;}
.contact-form-solo{
  border-left:2px solid var(--pop); padding-left:50px;
}
@media (max-width:820px){ .contact-cols{grid-template-columns:1fr; gap:40px;} }
@media (max-width:700px){
  .contact-form-solo{
    border-left:none; padding:26px 20px;
    border:1px solid var(--hair); border-radius:10px; background:var(--bg-2);
  }
}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); display:block; margin-bottom:6px;}
input,select,textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--hair);
  color:var(--fg); font-family:'Switzer', sans-serif; font-size:16px; padding:12px 2px;
}
input:focus,select:focus,textarea:focus{outline:none; border-bottom-color:var(--pop);}
textarea{min-height:100px; resize:vertical;}
select option{background:var(--bg); color:var(--fg);}
@media (max-width:820px){ .frow{grid-template-columns:1fr;} }

.check-group{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:2px;}
.check-item{
  display:flex; align-items:center; gap:8px;
  border:none; border-radius:8px; padding:8px 10px;
  cursor:pointer; transition:background .2s;
}
.check-item:hover{background:var(--bg-2);}
.check-item input[type="checkbox"]{
  width:14px; height:14px; flex:0 0 auto; padding:0; border:1px solid var(--hair);
  accent-color:var(--pop); background:transparent; cursor:pointer;
}
.check-item span{font-size:11px; color:var(--fg);}
@media (max-width:400px){
  .check-group{gap:8px;}
  .check-item{padding:8px 6px;}
  .check-item span{font-size:10px;}
}

.btn-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 32px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-radius:4px; border:1px solid var(--pop); transition:all .25s ease; cursor:pointer;
  background:var(--pop); color:var(--pop-ink); font-family:'Switzer', sans-serif;
}
.btn-submit:hover{background:transparent; color:var(--pop);}

/* ======== BOOKING ======== */
.book-lead{padding:110px 0 50px;}
.book-lead h1{font-size:clamp(34px,6vw,84px); line-height:1;}
.book-lead p{margin-top:24px; color:var(--dim); max-width:50ch;}
.book-lead .pill{margin-top:30px;}
.book-kinds{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding-bottom:70px;}
.book-kind{background:var(--bg-2); border-radius:6px; padding:30px;}
.book-kind h3{font-size:15px; margin-bottom:12px;}
.book-kind p{color:var(--dim); font-size:14px;}
@media (max-width:800px){ .book-kinds{grid-template-columns:1fr;} }
.book-embed{max-width:960px; margin:0 auto 26px;}
.book-embed iframe{width:100%; height:820px; border:1px solid var(--hair); border-radius:6px; background:var(--bg-2);}
.book-note{text-align:center; color:var(--dim); font-size:14px; padding-bottom:120px;}
.book-note a{border-bottom:1px solid var(--pop);}

/* ======== FOOTER ======== */
.site-foot{border-top:1px solid var(--hair); padding:70px 0 40px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; margin-bottom:60px;}
.foot-grid .brand{font-size:18px;}
.foot-grid .kicker{display:block; margin-bottom:16px;}
.foot-grid a{display:block; margin-bottom:10px; font-size:14px; color:var(--dim); transition:color .2s;}
.foot-grid a:hover{color:var(--fg);}
.foot-base{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--hair); padding-top:26px; color:var(--dim); font-size:13px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr;} }

section{scroll-margin-top:90px;}

/* ======== MOTION ======== */
[data-in]{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);}
[data-in].go{opacity:1; transform:none;}

/* ======== LIGHTBOX GALLERY ======== */
.lb{
  position:fixed; inset:0; z-index:10000; display:none;
  background:rgba(8,8,8,.96); backdrop-filter:blur(6px);
}
.lb.is-open{display:flex; flex-direction:column;}
body.lb-locked{overflow:hidden;}

.lb-top{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 32px; flex:0 0 auto; border-bottom:1px solid var(--hair);
}
.lb-title{
  font-family:'Archivo Expanded', sans-serif; font-weight:700; text-transform:uppercase;
  font-size:13px; letter-spacing:.08em; color:var(--fg);
}
.lb-count{font-size:12px; letter-spacing:.16em; color:var(--dim);}
.lb-close{
  background:none; border:1px solid var(--hair); color:var(--fg); cursor:pointer;
  width:40px; height:40px; border-radius:50%; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;
}
.lb-close:hover{background:var(--fg); color:var(--bg); border-color:var(--fg);}

.lb-stage{
  flex:1 1 auto; position:relative; display:flex; align-items:center; justify-content:center;
  padding:26px 84px; min-height:0;
}
.lb-stage img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  opacity:0; transition:opacity .32s ease;
}
.lb-stage img.shown{opacity:1;}

.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(20,20,20,.7); border:1px solid var(--hair); color:var(--fg);
  cursor:pointer; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.lb-nav:hover{background:var(--fg); color:var(--bg);}
.lb-prev{left:18px;}
.lb-next{right:18px;}

.lb-strip{
  flex:0 0 auto; display:flex; gap:8px; padding:16px 32px 24px;
  overflow-x:auto; scrollbar-width:thin;
}
.lb-strip img{
  width:96px; height:66px; object-fit:cover; cursor:pointer; flex:0 0 auto;
  opacity:.4; transition:opacity .2s, outline-color .2s;
  outline:2px solid transparent; outline-offset:2px;
}
.lb-strip img:hover{opacity:.8;}
.lb-strip img.active{opacity:1; outline-color:var(--fg);}

@media (max-width:700px){
  .lb-stage{padding:16px 12px;}
  .lb-nav{width:42px; height:42px;}
  .lb-prev{left:6px;} .lb-next{right:6px;}
  .lb-top{padding:16px 18px;}
  .lb-strip{padding:12px 18px 18px;}
  .lb-strip img{width:70px; height:50px;}
}

/* ======== FILM LIGHTBOX (video) ======== */
.lbv .lb-stage{padding:26px 40px;}
.lbv .lb-stage video{
  width:100%; max-width:1100px; max-height:100%; aspect-ratio:16/9;
  background:#000; border-radius:4px;
}
@media (max-width:700px){ .lbv .lb-stage{padding:14px 12px;} }

/* cursor */
.cur-dot,.cur-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; transform:translate(-100px,-100px);}
.cur-dot{width:6px; height:6px; margin:-3px; background:var(--pop); opacity:0; transition:opacity .2s;}
.cur-ring{width:36px; height:36px; margin:-18px; border:1px solid var(--fg); opacity:0; transition:opacity .2s, width .3s, height .3s, margin .3s, border-color .3s;}
body.cur-on .cur-dot, body.cur-on .cur-ring{opacity:.6;}
body.cur-big .cur-ring{width:70px; height:70px; margin:-35px; border-color:var(--pop);}
@media (max-width:900px){ .cur-dot,.cur-ring{display:none;} }