/* ── SELF-HOSTED FONTS ──────────────────────────────────── */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('MEDIA/FONTS/BebasNeue_400.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('MEDIA/FONTS/CormorantGaramond_300.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('MEDIA/FONTS/CormorantGaramond_300i.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('MEDIA/FONTS/CormorantGaramond_400.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('MEDIA/FONTS/CormorantGaramond_400i.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('MEDIA/FONTS/Inter_300.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('MEDIA/FONTS/Inter_400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('MEDIA/FONTS/Inter_500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('MEDIA/FONTS/Inter_600.woff2') format('woff2');}
/* ── RESET & BASE ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --page:   #edeef5;       /* brand light cool grey base */
  --p1:     #e8e9f0;       /* paper tone 1 — brand #E1E3ED family */
  --p2:     #e1e2ec;       /* paper tone 2 — slightly deeper */
  --p3:     #f0f1f7;       /* paper tone 3 — lightest */
  --navy:   #33345c;       /* brand deep navy */
  --navy2:  #25242e;       /* brand darkest */
  --purple: #4f518e;       /* brand indigo */
  --accent: #4f518e;       /* brand indigo — primary accent */
  --blue:   #5278c2;       /* brand medium blue */
  --gray:   #595a68;       /* brand mid cool grey */
  --border: rgba(51,52,92,.09);
  --ink:    #25242e;       /* brand darkest for headings & body */
  --ff:'Bebas Neue',sans-serif;
  --fs:'Cormorant Garamond',serif;
  --fb:'Inter',sans-serif;
  --overlap: 56px;         /* how much each paper slides under the next */
}

/* ── ACCESSIBILITY UTILITIES ────────────────────────────── */
/* Visually hidden but available to screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Skip-navigation link — visible only on focus */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:99999}
.skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem 1.2rem;background:var(--accent);color:#fff;border-radius:2px;font-size:.75rem;font-weight:600;text-decoration:none;letter-spacing:.08em}

/* smooth for anchor nav; hero snap uses behavior:'instant' to override */
html{scroll-behavior:smooth}
body{
  margin:0;padding:0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--fb);
  overflow-x: hidden;
  cursor: none;
}
::selection{background:var(--accent);color:#fff}

/* ── CURSOR — dual octagon (lead dot + lagging ring) ─── */
/* Single canvas overlay; JS drives both shapes via rAF. */
#oct-cursor{
  position:fixed;top:0;left:0;
  width:100vw;height:100vh;
  pointer-events:none;
  z-index:10002; /* above modal backdrop (10000) */
}

/* ── WEBGL BACKGROUND ─────────────────────────────────── */
#webgl-bg{
  position:fixed;inset:0;
  z-index:0;pointer-events:none;
}
/* ── PAGE-WIDE FILM GRAIN ────────────────────────────── */
#pg-grain{
  position:fixed;inset:0;
  z-index:9997; /* above content, below cursor */
  pointer-events:none;
  opacity:1;
  mix-blend-mode:overlay;
}
/* ── CURSOR TRAIL CANVAS ──────────────────────────────── */
#trail-cvs{
  position:fixed;inset:0;
  z-index:9996;pointer-events:none; /* one below pg-grain so grain stays on top */
}
/* ── NAV ──────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  padding:1.5rem 3.5rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .4s,box-shadow .4s;
}
nav.scrolled{
  background:rgba(237,238,245,.97);
  backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(51,52,92,.10), 0 2px 12px rgba(51,52,92,.07);
}
/* Light mode while over video */
nav.over-video .n-word{color:rgba(255,255,255,.95)}
nav.over-video .n-links a{color:rgba(255,255,255,.88)}
nav.over-video .n-socials a{background:rgba(255,255,255,.18);color:#fff}
nav.over-video .n-socials a:hover{background:rgba(255,255,255,.28)}

.n-logo{display:flex;flex-direction:row;align-items:center;gap:10px;text-decoration:none}
.n-logo img{height:36px;width:auto;display:block;transition:filter .35s}
/* Single SVG file — CSS filter makes it white over the hero video */
nav.over-video .n-logo img{filter:brightness(0) invert(1)}
.n-word{font-size:.57rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);transition:color .3s}
.n-links{display:flex;gap:2.5rem;list-style:none}
.n-links a{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;opacity:.62;transition:opacity .25s,color .3s}
.n-links a:hover{opacity:1}
.n-socials{display:flex;gap:.9rem;align-items:center}
.n-socials a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(44,36,22,.07);text-decoration:none;color:var(--ink);transition:background .25s,color .3s}
.n-socials a:hover{background:rgba(44,36,22,.15)}

/* ── HERO: FULLSCREEN VIDEO ───────────────────────────── */
#hero{
  position:relative;
  z-index:10;
  width:100%;
  height:100vh;
}
.hero-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}
/* Vimeo background embed — simulates object-fit:cover */
.hero-sticky iframe{
  position:absolute;
  top:50%;left:50%;
  width:177.78vh; /* 16:9 = 100vh × 16/9 */
  height:56.25vw; /* 16:9 = 100vw × 9/16 */
  min-width:100%;
  min-height:100%;
  transform:translate(-50%,-50%);
  border:none;
  pointer-events:none;
}
/* Mobile: skip loading Vimeo background video — use static gradient instead.
   Saves ~330KB of Vimeo JS and eliminates the 4–5s mobile LCP penalty. */
@media(max-width:768px){
  #hero-vid{display:none!important}
  .hero-sticky{background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 55%,#1a0f2e 100%)}
}
/* Dark gradient vignette at top so nav is always readable over video */
.hero-sticky::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:160px;
  background:linear-gradient(to bottom,rgba(0,0,0,.52) 0%,rgba(0,0,0,.18) 60%,transparent 100%);
  z-index:1;
  pointer-events:none;
}

/* ── HERO TEXT OVERLAY ────────────────────────────────── */
.hero-text{
  position:absolute;
  bottom:6vh;left:6vw;
  z-index:2;
  pointer-events:none;
}
.ht-eyebrow{
  display:block;
  font-family:var(--fs);
  font-size:clamp(.85rem,1.3vw,1.05rem);
  font-style:italic;
  color:rgba(10,10,30,.68);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:.5rem;
}
.ht-name{
  display:block;
  font-family:var(--ff);
  font-size:clamp(3.8rem,8.5vw,7.5rem);
  line-height:.88;
  color:#0a0a1e;
  letter-spacing:.025em;
  text-shadow:0 2px 20px rgba(255,255,255,.28);
  margin-bottom:1.2rem;
}
.ht-tags{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
}
.ht-tag{
  font-family:var(--fs);
  font-size:clamp(.72rem,1vw,.9rem);
  font-style:italic;
  color:rgba(10,10,30,.72);
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.14);
  padding:.24em .85em;
  border-radius:2px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
/* Dark mode: restore white text on video */
[data-theme="dark"] .ht-eyebrow{color:rgba(255,255,255,.72)}
[data-theme="dark"] .ht-name{color:#fff;text-shadow:0 4px 48px rgba(0,0,0,.38)}
[data-theme="dark"] .ht-tag{color:rgba(255,255,255,.78);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
@media(max-width:768px){
  .hero-text{bottom:5vh;left:5vw;}
  .ht-name{font-size:clamp(3rem,12vw,4.8rem);}
}

/* ── SCROLL CUE — minimal single chevron, no frosted pill ── */
.scroll-cue{
  position:absolute;
  bottom:2.2rem;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  z-index:2;
  opacity:0;
  animation:fadeIn 1s 2.5s forwards;
  pointer-events:none;
}
.scroll-cue.sc-hide{
  opacity:0!important;
  transition:opacity .4s ease;
}
/* Scroll cue — mouse icon with animated wheel */
.scroll-cue>span{
  display:block;
  font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(10,10,30,.55);margin-top:.7rem;
}
.sc-mouse{
  width:26px;height:42px;
  border:2px solid rgba(10,10,30,.6);
  border-radius:13px;
  position:relative;
  display:flex;justify-content:center;
  padding-top:7px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.sc-wheel{
  width:3px;height:8px;
  background:rgba(10,10,30,.72);
  border-radius:2px;
  animation:wheelScroll 1.8s cubic-bezier(.45,0,.55,1) infinite;
}
[data-theme="dark"] .scroll-cue>span{ color:rgba(255,255,255,.5); }
[data-theme="dark"] .sc-mouse{ border-color:rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(0,0,0,.18); }
[data-theme="dark"] .sc-wheel{ background:rgba(255,255,255,.88); }
@keyframes wheelScroll{
  0%  {opacity:1;transform:translateY(0)}
  55% {opacity:0;transform:translateY(12px)}
  56% {opacity:0;transform:translateY(0)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── PAPER STACK ─────────────────────────────────────── */
/*
  Each .paper slides UP under the next sheet.
  - negative margin-top pulls it up behind the previous paper's bottom edge
  - box-shadow from above gives the illusion of depth / layering
  - z-index increases so later sheets sit on top
  - padding-top compensates for the overlap area
*/
.paper{
  position:relative;
  width:100%;
  padding: calc(var(--overlap) + 5rem) 4rem 8rem;
  margin-top: calc(var(--overlap) * -1);
  /* shadow feels like the sheet above is casting onto this one */
  box-shadow:
    0 calc(var(--overlap) * -0.3) calc(var(--overlap) * 1.2) rgba(20,20,50,.11),
    0 -2px 10px rgba(20,20,50,.07);
}
/* Stacking z-indices — JS assigns dynamically, but set base */
.paper:nth-child(1){z-index:11}
.paper:nth-child(2){z-index:12}
.paper:nth-child(3){z-index:13}
.paper:nth-child(4){z-index:14}
.paper:nth-child(5){z-index:15}
.paper:nth-child(6){z-index:16}
.paper:nth-child(7){z-index:17}
.paper:nth-child(8){z-index:18}

/* Paper colour alternation — warm tones */
.paper.p1{background:var(--p1)}
.paper.p2{background:var(--p2)}
.paper.p3{background:var(--p3)}
.paper.dark{
  background:var(--navy2);
  box-shadow:
    0 calc(var(--overlap) * -0.3) calc(var(--overlap) * 1.8) rgba(10,10,30,.32),
    0 -2px 10px rgba(10,10,30,.18);
}

/* Torn paper SVGs are injected by JS — ::before is reserved for the drop shadow line */
.paper::before{display:none}
/* The torn edge SVG lives inside each .paper, positioned absolutely */
.torn-edge{
  position:absolute;
  top:-14px;
  left:-1px;
  width:calc(100% + 2px);
  height:26px;
  display:block;
  pointer-events:none;
  z-index:3;
}

/* Per-paper grain removed — the full-page #pg-grain canvas already covers all papers */
.paper::after{content:'';position:absolute;inset:0;pointer-events:none}

/* MARQUEE — sits between hero and first paper */
.marquee-strip{
  position:relative;z-index:30;
  background:var(--navy);
  padding:2.4rem 0;
  overflow:hidden;
  white-space:nowrap;
}
.m-inner{display:inline-flex;animation:mrun 22s linear infinite}
.m-inner span{font-family:var(--ff);font-size:1.1rem;letter-spacing:.08em;color:rgba(255,255,255,.72);padding:0 1.6rem}
.m-inner .dot{color:var(--accent)}
@keyframes mrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SECTION LABEL ────────────────────────────────────── */
.s-lbl{
  font-size:.6rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--gray);
  margin-bottom:2rem;
  display:flex;align-items:center;gap:.9rem;
}
.s-lbl::after{content:'';flex:1;max-width:44px;height:1px;background:var(--border)}
.s-lbl.lt{color:rgba(255,255,255,.3)}
.s-lbl.lt::after{background:rgba(255,255,255,.08)}

/* ── QUOTE ────────────────────────────────────────────── */
.q-inner{max-width:720px;margin:0 auto}
.q-text{
  font-family:var(--fs);
  font-size:clamp(1.28rem,2.4vw,1.9rem);
  font-weight:300;line-height:1.58;
  color:var(--ink);
  border-left:3px solid var(--accent);
  padding-left:1.7rem;
  margin-bottom:1.4rem;
}
.q-text em{font-style:italic;color:var(--purple)}
.q-attr{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);padding-left:1.7rem}
.q-text.lt{color:rgba(255,255,255,.88)}
.q-attr.lt{color:rgba(255,255,255,.32)}

/* ── DESIGN PORTFOLIO ─────────────────────────────────── */
.dh{margin-bottom:3.5rem;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.dt{font-family:var(--ff);font-size:clamp(2.8rem,6.5vw,6rem);line-height:.9;color:var(--ink)}
.dt .acc{color:var(--accent)}
.dsub{max-width:250px;font-family:var(--fs);font-size:.95rem;font-style:italic;color:var(--purple);line-height:1.62;padding-bottom:.4rem}
/* ── HORIZONTAL SHOWCASE TRACK ───────────────────────── */
/* ── FEATURED PROJECT SHOWCASE ───────────────────────── */
.showcase-wrap{margin-top:2.2rem;padding-bottom:3.5rem}

/* Full-bleed feature panel */
.feat-panel{
  position:relative;width:100%;height:520px;
  border-radius:3px;overflow:hidden;
  background:#0d0d1c;
}
.feat-cover{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter:none;
  transition:opacity .5s ease,transform .8s cubic-bezier(.25,.46,.45,.94);
}
.feat-cover.fading{opacity:0;transform:scale(1.03)}
.feat-veil{display:none}
.feat-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:1rem 1.4rem 1.2rem;
  display:flex;flex-direction:column;gap:.22rem;
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.feat-label{
  font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--navy);
}
.feat-name{
  font-family:var(--ff);
  font-size:clamp(2rem,5vw,3.6rem);
  letter-spacing:.04em;line-height:.92;
  color:var(--ink);margin-bottom:.15rem;
}
.feat-works{
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray);
}
.feat-cta{
  align-self:flex-start;margin-top:.6rem;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(51,52,92,.35);
  padding:.52rem 1.1rem;
  font-family:var(--fb);font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);border-radius:1px;
  transition:background .25s,border-color .25s,color .25s;
}
.feat-cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.feat-cta.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Gallery drop panel */
.sc-drop{
  max-height:0;overflow:hidden;
  transition:max-height .48s cubic-bezier(.4,0,.2,1),opacity .38s ease;
  opacity:0;
}
.sc-drop.open{max-height:620px;opacity:1}
.sc-drop-inner{
  padding:1.4rem 1.4rem 1.8rem;
  border-top:2px solid var(--accent);
  background:rgba(10,10,24,.92);
  backdrop-filter:blur(12px);
}
.sc-drop-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.1rem;
}
.sc-drop-title{font-family:var(--ff);font-size:1.7rem;line-height:1;color:#dcdff5}
.sc-drop-link{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  border:1px solid var(--accent);padding:.38rem .9rem;border-radius:1px;
  transition:background .2s,color .2s;
}
.sc-drop-link:hover{background:var(--accent);color:#fff}
.sc-drop-close{
  background:none;border:none;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(220,223,245,.38);padding:.3rem .6rem;
  transition:color .2s;
}
.sc-drop-close:hover{color:#dcdff5}
.sc-drop-grid{display:flex;gap:8px;flex-wrap:wrap}
.sc-drop-item{
  flex:1 1 200px;max-width:360px;min-width:160px;
  border-radius:2px;overflow:hidden;
  border:1px solid rgba(79,81,142,.22);
  transition:transform .25s,box-shadow .25s;
}
.sc-drop-item:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,20,.5)}
.sc-drop-item img{
  width:100%;height:200px;
  object-fit:cover;display:block;
  filter:none;
}

/* ── ABOUT / RESUME section — extra breathing room at bottom */
#about{padding-bottom:11rem}

/* ── EDITORIAL SERVICE ROWS ────────────────────────── */
.k-row{
  display:grid;
  grid-template-columns:2.6rem 1fr auto;
  align-items:center;
  gap:0 1.6rem;
  padding:1.7rem 0;
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
  transition:padding-left .3s cubic-bezier(.4,0,.2,1);
}
.k-row:first-of-type{border-top:1px solid var(--border)}
.k-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  background:rgba(79,81,142,.05);
  transition:width .38s cubic-bezier(.4,0,.2,1);pointer-events:none;
}
.k-row:hover::before{width:100%}
.k-row:hover{padding-left:.5rem}
.k-num{font-size:.62rem;letter-spacing:.16em;color:var(--gray)}
.k-body{display:flex;flex-direction:column;gap:.3rem}
.k-word{
  font-family:var(--ff);
  font-size:clamp(2.6rem,6.5vw,5.5rem);
  letter-spacing:.03em;line-height:1;
  color:var(--ink);
  transition:letter-spacing .4s cubic-bezier(.4,0,.2,1);
}
.k-row:hover .k-word{letter-spacing:.09em}
.k-desc{font-size:.78rem;line-height:1.58;color:var(--gray);max-width:420px}
.k-arr{
  font-size:1.1rem;color:var(--accent);
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s,transform .3s;
}
.k-row:hover .k-arr{opacity:1;transform:translateX(0)}
/* ── PORTFOLIO ACCORDION ─────────────────────────────── */
.k-entry{position:relative}
.k-entry .k-row{}
.k-entry.active .k-arr{opacity:1;transform:translateX(0) rotate(90deg)}
/* Thumbnail strip — slides in from right on row hover */
.k-thumb-strip{
  position:absolute;
  right:2.8rem;           /* sits left of the arrow */
  top:50%;
  transform:translateY(-50%) translateX(16px);
  display:flex;gap:5px;
  opacity:0;pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.4,0,.2,1);
  z-index:8;
}
.k-entry:hover .k-thumb-strip{opacity:1;transform:translateY(-50%) translateX(0)}
.k-entry.active .k-thumb-strip{opacity:0;pointer-events:none}
.k-thumb{
  width:140px;height:96px;
  border-radius:2px;overflow:hidden;
  border:1px solid rgba(79,81,142,.22);
  box-shadow:0 3px 10px rgba(0,0,20,.14);
  flex-shrink:0;
}
.k-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:none;
  transition:transform .22s;
}
.k-entry .k-drop{
  max-height:0;overflow:hidden;
  transition:max-height .52s cubic-bezier(.4,0,.2,1),opacity .4s ease;
  opacity:0;
}
.k-entry .k-drop.open{max-height:1600px;opacity:1}

/* ── FILM ─────────────────────────────────────────────── */
.film-title{font-family:var(--ff);font-size:clamp(2.8rem,6.5vw,6rem);line-height:.9;color:var(--ink);margin-bottom:3rem}
.film-title em{font-style:normal;color:var(--accent)}
.film-title-link{color:inherit;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:.05em;transition:color .2s}
.film-title-link:hover{color:var(--accent)}
.film-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:2.5rem;align-items:start}
.reel-main{
  position:relative;aspect-ratio:16/9;
  overflow:hidden;
  box-shadow:0 16px 48px rgba(40,28,14,.18);
}
#reel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .5s}
#reel-frame{position:absolute;inset:0;width:100%;height:100%;border:none;z-index:2;display:none}
.reel-ov{position:absolute;inset:0;background:rgba(20,16,30,.35);opacity:0;transition:opacity .3s;z-index:3;pointer-events:none}
.reel-main:not(.playing):hover .reel-ov{opacity:1}
/* Once playing, overlay fully out of the way so Vimeo controls are clickable */
.reel-main.playing .reel-ov{display:none}
.reel-main.playing{cursor:default}
/* Fade octagon cursor out over the video player — iframe boundary stops
   parent mousemove so cursor would freeze; system cursor handles Vimeo controls. */
#oct-cursor{transition:opacity .25s ease}
body.reel-hover #oct-cursor{opacity:0 !important}
.reel-main:hover .play-ring{transform:translate(-50%,-50%) scale(1.08)}
.play-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:1.5px solid rgba(255,255,255,.75);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s;z-index:4}
.play-ring::after{content:'';border-style:solid;border-width:7px 0 7px 14px;border-color:transparent transparent transparent #fff;margin-left:3px}
/* Reel bar — no gradient; controls float as a frosted pill in the corner */
.reel-bar{position:absolute;bottom:.9rem;right:.9rem;left:auto;padding:0;background:none;display:flex;align-items:center;justify-content:flex-end;z-index:5;gap:.5rem}
/* Title + duration hidden (no gradient backdrop to contrast against) */
.reel-ttl{display:none}
.reel-dur{display:none}
/* Reel control buttons — frosted glass pills, always legible over video */
.reel-ctls{display:none;align-items:center;gap:.4rem;flex-shrink:0}
.reel-ctls.active{display:flex}
.reel-btn{
  background:rgba(0,0,0,0.38);
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;border-radius:50%;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;
  transition:background .2s,transform .15s;
  padding:0;line-height:1;
}
.reel-btn:hover{background:rgba(0,0,0,0.62);transform:scale(1.1)}
.film-stmt{margin-top:2rem;font-family:var(--fs);font-size:clamp(.92rem,1.6vw,1.18rem);font-weight:300;font-style:italic;color:var(--purple);line-height:1.65;border-left:2px solid var(--accent);padding-left:1.2rem}
.film-list{display:flex;flex-direction:column}
.fi{display:flex;align-items:center;gap:1.3rem;padding:1.1rem 0;border-bottom:1px solid var(--border);transition:padding-left .25s}
.fi:first-child{border-top:1px solid var(--border)}
.fi:hover{padding-left:.7rem}.fi:hover .fi-n{color:var(--accent)}.fi:hover .fi-a{opacity:1}
.fi-n{font-size:.63rem;letter-spacing:.1em;color:var(--gray);min-width:1.8rem;transition:color .25s}
.fi-t{flex:1;font-family:var(--fs);font-size:.95rem;color:var(--ink)}
.fi-ty{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
/* Right-side Vimeo link wraps type label + arrow — always a real hit target */
.fi-vimeo{
  display:flex;align-items:center;gap:.5rem;
  text-decoration:none;
  flex-shrink:0;
}
.fi-a{font-size:.8rem;color:var(--accent);opacity:0;transition:opacity .25s}
.fi:hover .fi-vimeo .fi-ty{color:var(--accent)}
.fi:hover .fi-a{opacity:1}

/* ── ABOUT (dark paper) ───────────────────────────────── */
.about-inner{display:grid;grid-template-columns:1fr;max-width:720px;gap:5rem;align-items:start}
.a-lbl{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:2rem;display:flex;align-items:center;gap:.9rem}
.a-lbl::after{content:'';flex:1;max-width:44px;height:1px;background:rgba(255,255,255,.07)}
.big-mark{margin-bottom:2rem}
.a-phil{font-family:var(--fs);font-size:clamp(1.1rem,2vw,1.75rem);font-weight:300;line-height:1.52;color:rgba(255,255,255,.9);margin-bottom:1.4rem}
.a-phil em{font-style:italic;color:rgba(255,255,255,.4)}
.a-body{font-size:.84rem;line-height:1.88;color:rgba(255,255,255,.34);margin-bottom:2.2rem}
.a-ctas{display:flex;gap:.9rem;flex-wrap:wrap}
.btn-lt{padding:.78rem 1.7rem;background:rgba(255,255,255,.92);color:var(--navy);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s,box-shadow .25s}
.btn-lt:hover{background:var(--accent);color:#fff;box-shadow:0 0 0 3px rgba(79,81,142,.32),0 0 14px rgba(79,81,142,.22)}
.btn-ol{padding:.78rem 1.7rem;background:transparent;color:rgba(255,255,255,.45);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(255,255,255,.1);transition:border-color .25s,color .25s,box-shadow .25s}
.btn-ol:hover{border-color:rgba(79,81,142,.7);color:#fff;box-shadow:0 0 0 2px rgba(79,81,142,.2)}
/* ── FAVORITE LINKS ─────────────────────────────────────── */
.fav-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
  margin-top:3rem;
}
.fav-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:2rem 1.8rem 1.6rem;
  background:var(--p3);
  border:1px solid var(--border);
  border-top:3px solid var(--card-stripe,var(--accent));
  text-decoration:none;color:inherit;
  transition:transform .38s cubic-bezier(.23,1,.32,1),
             box-shadow .38s,background .25s;
}
.fav-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 52px rgba(51,52,92,.13);
  background:var(--p1);
}
.fav-card::after{
  content:attr(data-num);
  position:absolute;bottom:-.12em;right:.15em;
  font-family:var(--ff);font-size:8rem;line-height:1;
  color:var(--card-stripe,var(--accent));
  opacity:.055;pointer-events:none;
  transition:opacity .38s,transform .38s;
}
.fav-card:hover::after{opacity:.11;transform:scale(1.04) translateY(-4px)}
.fav-tag{
  font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--card-stripe,var(--accent));
  margin-bottom:1rem;
}
.fav-name{
  font-family:var(--ff);font-size:1.85rem;letter-spacing:.05em;
  color:var(--ink);line-height:1;
  margin-bottom:.65rem;
}
.fav-desc{
  font-size:.8rem;color:var(--gray);line-height:1.65;
  flex:1;margin-bottom:1.6rem;
}
.fav-foot{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--border);padding-top:.95rem;margin-top:auto;
}
.fav-domain{
  font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gray);opacity:.65;
}
.fav-arr{
  font-size:1rem;color:var(--card-stripe,var(--accent));
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.fav-card:hover .fav-arr{transform:translate(4px,-4px)}
.fav-ref{
  display:inline-block;
  font-size:.44rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--card-stripe,var(--accent));
  background:rgba(79,81,142,.09);
  border:1px solid rgba(79,81,142,.2);
  padding:.2em .55em .14em;border-radius:2px;
  font-family:var(--fb);font-weight:500;
  vertical-align:middle;margin-left:.45em;
}

/* ── FOOTER ───────────────────────────────────────────── */
footer{
  position:relative;z-index:20;
  background:var(--navy);
  padding:2rem 3.5rem;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
}
.f-left{display:flex;align-items:center;gap:1.1rem}
.f-copy{font-size:.6rem;letter-spacing:.1em;color:rgba(255,255,255,.26)}
/* Privacy link — lives in the centre column, deliberately prominent */
.f-privacy{
  display:flex;justify-content:center;
}
.f-privacy a{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.58);text-decoration:none;
  transition:color .25s,border-color .25s;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:2px;
}
.f-privacy a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.f-links{display:flex;gap:1.6rem;justify-content:flex-end}
.f-links a{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.28);text-decoration:none;transition:color .25s}
.f-links a:hover{color:#fff}

/* ── MAGNETIC ────────────────────────────────────────────*/
.magnetic{
  display:inline-block;
  transition:transform .42s cubic-bezier(.23,1,.32,1);
}

/* ── SCROLL REVEAL ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
/* transform:none (not translateY(0)) dissolves the stacking context after
   the animation completes, letting dropdowns/tooltips escape correctly */
.reveal.visible{opacity:1;transform:none}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}.rd4{transition-delay:.4s}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media(max-width:1024px){
  nav{padding:1.2rem 2rem}
  .paper{padding:calc(var(--overlap) + 3.5rem) 2rem 6rem}
  .film-grid{grid-template-columns:1fr}
  .about-inner{grid-template-columns:1fr;gap:3rem}
  .fav-grid{grid-template-columns:repeat(2,1fr)}
  footer{padding:1.8rem 2rem;grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;gap:.8rem;text-align:center}
  .f-links{justify-content:center}
}
/* ── MOBILE NAV — HAMBURGER BUTTON ─────────────────────── */
.n-burger{
  display:none; /* shown only at ≤680px via media query below */
  background:none;border:none;padding:6px 4px;
  cursor:pointer;color:var(--ink);
  flex-direction:column;gap:5px;align-items:center;justify-content:center;
  transition:color .3s;
}
.n-burger span{
  display:block;width:22px;height:2px;
  background:currentColor;
  border-radius:1px;
  transition:transform .32s cubic-bezier(.19,1,.22,1),opacity .22s;
}
/* White over hero video */
nav.over-video .n-burger{color:#fff}
/* Animated X when open */
.n-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.n-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.n-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE FULL-SCREEN DRAWER ──────────────────────────── */
#mob-nav{
  position:fixed;inset:0;
  z-index:1500;
  background:var(--page);
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.19,1,.22,1);
  display:flex;flex-direction:column;
  padding:1.6rem 2rem 3rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#mob-nav.open{transform:translateX(0)}
[data-theme="dark"] #mob-nav{background:var(--page)}
.mob-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:2.8rem;flex-shrink:0;
}
.mob-close{
  background:none;border:none;padding:6px;
  cursor:pointer;color:var(--ink);font-size:1.3rem;line-height:1;
  opacity:.55;transition:opacity .2s;
}
.mob-close:hover{opacity:1}
.mob-links{list-style:none;margin:0 0 2.4rem;padding:0}
.mob-links li{border-bottom:1px solid var(--border)}
.mob-links a{
  display:block;padding:1rem 0;
  font-family:var(--ff);
  font-size:clamp(2rem,9vw,3rem);
  font-weight:300;line-height:1;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
  transition:color .2s,padding-left .2s;
}
.mob-links a:hover{color:var(--accent);padding-left:.4rem}
.mob-links a:active{color:var(--accent)}
.mob-socials{
  display:flex;gap:.9rem;flex-wrap:wrap;
  margin-bottom:2.4rem;
}
.mob-socials a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:rgba(44,36,22,.07);
  color:var(--ink);text-decoration:none;
  transition:background .2s;
}
[data-theme="dark"] .mob-socials a{background:rgba(160,162,220,.09)}
.mob-socials a:hover{background:rgba(44,36,22,.15)}
[data-theme="dark"] .mob-socials a:hover{background:rgba(160,162,220,.18)}
/* Dark mode row inside drawer */
.mob-dm{
  display:flex;align-items:center;gap:1rem;margin-top:auto;padding-top:2rem;
  border-top:1px solid var(--border);
}
.mob-dm-lbl{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gray)}
.mob-dm-btn{
  background:var(--border);border:none;
  width:2.4rem;height:2.4rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink);
  transition:background .2s,color .2s;border-radius:2px;
  flex-shrink:0;
}
.mob-dm-btn:hover{background:var(--accent);color:#fff}
.mob-dm-btn svg{display:block;}

@media(max-width:680px){
  .n-links,.n-socials{display:none}
  .n-burger{display:flex}
  /* dm-float stays fixed regardless of breakpoint */
  .dh{flex-direction:column;align-items:flex-start}
  .feat-panel{height:380px}
  .feat-name{font-size:clamp(2.4rem,10vw,4rem)}
  .fr{grid-template-columns:1fr}
  /* Paper padding tighter on mobile */
  .paper{padding:calc(var(--overlap) + 2.5rem) 1.5rem 5rem}
  /* Section labels */
  .s-lbl{font-size:.52rem}
  /* DT / section heading sizes */
  .dt{font-size:clamp(2.4rem,10vw,4rem)}
  .film-title{font-size:clamp(2.2rem,9vw,3.8rem)}
  /* Contact form */
  .c-form{gap:1rem}
  input,textarea{font-size:16px} /* prevent iOS zoom on focus */
  /* Showcase */
  .showcase-wrap{padding:0 1.5rem}
  /* Footer already 1-col from 1024px breakpoint */
  footer{padding:1.4rem 1.5rem}
  .f-copy{font-size:.6rem}
  /* Stats numbers — reduce size to fit */
  .a-num{font-size:clamp(1.8rem,7vw,2.6rem)}
}

@media(max-width:480px){
  nav{padding:1rem 1.25rem}
  .paper{padding:calc(var(--overlap) + 2rem) 1.25rem 4rem}
  .dt{font-size:clamp(2.2rem,11vw,3.2rem)}
  .film-title{font-size:clamp(2rem,10vw,3rem)}
  .a-phil{font-size:clamp(.95rem,4vw,1.3rem)}
  .q-text{font-size:clamp(1rem,4.5vw,1.45rem)}
  footer{grid-template-columns:1fr;gap:.6rem}
  .fav-grid{grid-template-columns:1fr}
  .fav-name{font-size:1.55rem}
  .fav-desc{font-size:.78rem}
  .f-privacy a{font-size:.62rem}
}

/* ── DARK MODE FLOATING TOGGLE — real wall rocker switch ──── */
@keyframes dm-intro{
  0%  { transform:translateY(-50%) translateX(140%); opacity:0; }
  18% { opacity:1; }
  52% { transform:translateY(-50%) translateX(-18px); }
  66% { transform:translateY(-50%) translateX(7px); }
  77% { transform:translateY(-50%) translateX(-5px); }
  86% { transform:translateY(-50%) translateX(2px); }
  93% { transform:translateY(-50%) translateX(-1px); }
  100%{ transform:translateY(-50%) translateX(0); opacity:1; }
}
.dm-switch{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:9996; background:none; border:none; padding:0;
  cursor:pointer;
  transform-origin:right center;
  /* drop-shadow follows the rendered shape — no bleed artifacts */
  filter:drop-shadow(-4px 0 6px rgba(0,0,0,.18));
  transition:filter .3s, transform .22s cubic-bezier(.23,1,.32,1);
  animation:dm-intro 1s cubic-bezier(.23,1,.32,1) .4s both;
}
.dm-switch:hover{
  transform:translateY(-50%);
  filter:drop-shadow(-6px 0 10px rgba(0,0,0,.26));
}

/* ── Molded plastic cover plate — the wall housing ── */
.dm-plate{
  display:block; position:relative;
  width:72px; height:145px;
  border-radius:7px 0 0 7px;
  background:linear-gradient(160deg,#f0f0ec 0%,#e4e4df 100%);
  box-shadow:
    inset 3px  3px 0 rgba(255,255,255,.95),
    inset -2px -2px 0 rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(0,0,0,.08);
  padding:10px;
  transition:box-shadow .3s;
}
.dm-switch:hover .dm-plate{
  box-shadow:
    inset 3px  3px 0 rgba(255,255,255,.95),
    inset -2px -2px 0 rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(0,0,0,.08);
}
/* ── Rocker paddle — no overflow:hidden so shadows escape into the gap ── */
.dm-paddle{
  width:100%; height:100%;
  display:flex; flex-direction:column;
  /* No overflow:hidden — shadows bleed into the bezel gap */
  transform:perspective(360px) rotateX(24deg); /* light: sun active = top depressed */
  transform-origin:center center;
  transition:transform .44s cubic-bezier(.23,1,.32,1);
  position:relative; z-index:2;
}
[data-theme="dark"] .dm-paddle{
  transform:perspective(360px) rotateX(-24deg); /* dark: moon active = bottom depressed */
}

/* ── Top half — sun / DEPRESSED in light mode (active state) ── */
.dm-top{
  flex:1; display:flex; align-items:center; justify-content:center;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#d4d5e4 0%,#cfd0dc 100%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.11);
  color:#c87a0c;
  transition:background .35s, box-shadow .35s, color .35s;
}

/* ── Groove — hairline crease only ── */
.dm-groove{
  flex:0 0 1px;
  background:rgba(0,0,0,.18);
  transition:background .3s;
}

/* ── Bottom half — moon / RAISED in light mode (inactive state) ── */
.dm-bot{
  flex:1; display:flex; align-items:center; justify-content:center;
  border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#eeeef8 0%,#e2e2ec 100%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.9);
  color:rgba(79,81,142,.52);
  transition:background .35s, box-shadow .35s, color .35s;
}

/* ── Dark mode — deeper drop shadow ── */
[data-theme="dark"] .dm-switch{
  filter:drop-shadow(-4px 0 8px rgba(0,0,0,.45));
}
[data-theme="dark"] .dm-switch:hover{
  filter:drop-shadow(-7px 0 14px rgba(0,0,0,.6));
}
[data-theme="dark"] .dm-plate{
  background:linear-gradient(160deg,#222236 0%,#18182a 100%);
  box-shadow:
    inset 2px  2px 0 rgba(255,255,255,.09),
    inset -2px -2px 0 rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0,0,0,.3);
}
[data-theme="dark"] .dm-switch:hover .dm-plate{
  box-shadow:
    inset 2px  2px 0 rgba(255,255,255,.09),
    inset -2px -2px 0 rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0,0,0,.3);
}
/* ── Dark mode top — sun RAISED (inactive) ── */
[data-theme="dark"] .dm-top{
  background:linear-gradient(180deg,#3a3a6e 0%,#2e2e58 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  color:rgba(200,175,80,.28);
}

/* ── Dark mode bottom — moon DEPRESSED / active, brand purple ── */
[data-theme="dark"] .dm-bot{
  background:linear-gradient(180deg,#32326a 0%,#26265a 100%);
  box-shadow:inset 0 -5px 10px rgba(0,0,0,.32);
  color:#e8eaff;
}
[data-theme="dark"] .dm-groove{
  background:rgba(0,0,0,.28);
}

/* ── DEMO: slam to dark, hold, snap back ── */
@keyframes dm-demo-paddle{
  0%   { transform:perspective(360px) rotateX(22deg); }
  10%  { transform:perspective(360px) rotateX(-50deg); }
  20%  { transform:perspective(360px) rotateX(-22deg); }
  63%  { transform:perspective(360px) rotateX(-22deg); }
  72%  { transform:perspective(360px) rotateX(50deg); }
  82%  { transform:perspective(360px) rotateX(18deg); }
  90%  { transform:perspective(360px) rotateX(24deg); }
  100% { transform:perspective(360px) rotateX(22deg); }
}
@keyframes dm-demo-top{
  0%  { background:linear-gradient(180deg,#d4d5e4 0%,#cfd0dc 100%); box-shadow:inset 0 3px 6px rgba(0,0,0,.11); color:#c87a0c; }
  20% { background:linear-gradient(180deg,#3a3a6e 0%,#2e2e58 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); color:rgba(200,175,80,.28); }
  63% { background:linear-gradient(180deg,#3a3a6e 0%,#2e2e58 100%); color:rgba(200,175,80,.28); }
  72% { background:linear-gradient(180deg,#d4d5e4 0%,#cfd0dc 100%); box-shadow:inset 0 3px 6px rgba(0,0,0,.11); color:#c87a0c; }
  100%{ color:#c87a0c; }
}
@keyframes dm-demo-bot{
  0%  { background:linear-gradient(180deg,#eeeef8 0%,#e2e2ec 100%); box-shadow:inset 0 -1px 0 rgba(255,255,255,.9); color:rgba(79,81,142,.52); }
  20% { background:linear-gradient(180deg,#32326a 0%,#26265a 100%); box-shadow:inset 0 -5px 10px rgba(0,0,0,.32); color:#e8eaff; }
  63% { background:linear-gradient(180deg,#32326a 0%,#26265a 100%); color:#e8eaff; }
  72% { background:linear-gradient(180deg,#eeeef8 0%,#e2e2ec 100%); box-shadow:inset 0 -1px 0 rgba(255,255,255,.9); color:rgba(79,81,142,.52); }
  100%{ color:rgba(79,81,142,.52); }
}
.dm-paddle.dm-demo{ animation:dm-demo-paddle 1.6s cubic-bezier(.23,1,.32,1) both; }
.dm-top.dm-demo   { animation:dm-demo-top    1.6s ease both; }
.dm-bot.dm-demo   { animation:dm-demo-bot    1.6s ease both; }

/* ── DARK MODE ───────────────────────────────────────── */
[data-theme="dark"]{
  --page:   #0e0e1c;
  --p1:     #141425;
  --p2:     #19192e;
  --p3:     #101020;
  --navy:   #b8bae4;
  --navy2:  #0a0a18;   /* dark papers stay ultra-dark */
  --purple: #5278c2;
  --ink:    #dcdff5;
  --accent: #5278c2;
  --border: rgba(160,162,220,0.13);
  --gray:   #8a8aaa;
  color-scheme:dark;
}
[data-theme="dark"] nav.scrolled{
  background:rgba(10,10,24,.97);
  box-shadow:0 1px 0 rgba(160,162,220,.10),0 2px 12px rgba(0,0,0,.35);
}
[data-theme="dark"] .n-socials a{background:rgba(160,162,220,.09)}
[data-theme="dark"] .n-socials a:hover{background:rgba(160,162,220,.18)}
/* Papers */
[data-theme="dark"] .paper{background:var(--page)}
[data-theme="dark"] .paper.p1{background:var(--p1)}
[data-theme="dark"] .paper.p2{background:var(--p2)}
[data-theme="dark"] .paper.p3{background:var(--p3)}
[data-theme="dark"] .paper.dark{background:#050510}
/* WebGL — dim and cool-shift for dark mode */
[data-theme="dark"] #webgl-bg{opacity:.22;filter:hue-rotate(180deg) brightness(.5)}
/* Form inputs */
[data-theme="dark"] input,[data-theme="dark"] textarea{
  background:rgba(22,22,42,.6);
  border-color:rgba(160,162,220,.18);
  color:var(--ink);
}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--gray)}
/* Nav logo — keep readable in dark (dark purple lines on dark bg → invert to light) */
[data-theme="dark"] nav:not(.over-video) .n-logo img{filter:brightness(0) invert(1)}
/* Hide torn-paper SVG edges in dark mode — clean flat section breaks instead */
[data-theme="dark"] .torn-edge{display:none}
[data-theme="dark"] .fav-card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}
[data-theme="dark"] .fav-card:hover{background:rgba(255,255,255,.06);box-shadow:0 20px 52px rgba(0,0,0,.45)}
[data-theme="dark"] .fav-name{color:#fff}
[data-theme="dark"] .fav-desc{color:rgba(255,255,255,.48)}
[data-theme="dark"] .fav-domain{color:rgba(255,255,255,.28)}
[data-theme="dark"] .fav-foot{border-color:rgba(255,255,255,.07)}
[data-theme="dark"] .fav-ref{background:rgba(79,81,142,.22);border-color:rgba(160,162,220,.3)}
[data-theme="dark"] footer{background:#0d1a33}
[data-theme="dark"] .marquee-strip{background:#0a0f1e}
[data-theme="dark"] .m-inner span{color:rgba(180,185,220,.55)}
[data-theme="dark"] .m-inner .dot{color:var(--accent)}
/* Dark mode — CTA buttons use deep navy-purple instead of near-white */
[data-theme="dark"] .btn-lt{background:#33345c;color:#dcdff5}
[data-theme="dark"] .btn-lt:hover{background:var(--accent);color:#fff}


/* ── REDUCED MOTION ──────────────────────────────────────
   Respect OS-level "reduce motion" preference.
   Kill all decorative animations; keep functional transitions. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  /* Keep the scroll-cue visible (can't scroll to dismiss) */
  .scroll-cue{opacity:1!important;animation:none!important}
  .sc-wheel{animation:none!important;opacity:.8!important}
  /* Keep scroll-reveal elements visible */
  .reveal{opacity:1!important;transform:none!important}
  /* Pause marquee */
  .m-inner{animation-play-state:paused}
  /* New feature reduced-motion overrides */
  .film-title,.dt{transition:none!important;letter-spacing:0!important}
  .s-lbl::before{transition:none!important;width:1.6rem!important;margin-right:.6rem!important}
  .play-ring::before{animation:none!important;opacity:.3}
  .fi-a{transition:opacity .25s!important;transform:none!important}
}

/* ── SCROLL-LINKED TYPOGRAPHY ─────────────────────────── */
/* Headlines letter-spacing opens as they scroll into view */
.film-title,.dt{
  letter-spacing:-0.06em;
  transition:letter-spacing 1.1s cubic-bezier(.19,1,.22,1);
}
.film-title.visible,.dh.visible .dt,.dt.visible{letter-spacing:.02em}
/* .dt inside .dh: opacity/transform already handled by parent — only letter-spacing needed */
.dh .dt.reveal{opacity:1;transform:none;transition:letter-spacing 1.1s cubic-bezier(.19,1,.22,1)}


/* ── PRIVACY SHIELD BADGE ────────────────────────────── */
#priv-shield{
  position:fixed;bottom:0;right:2.2rem;
  z-index:9995;
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--accent);
  padding:10px 16px 9px;
  border-radius:6px 6px 0 0;
  cursor:pointer;
  border:none;
  text-decoration:none;
  transition:background .2s,box-shadow .35s cubic-bezier(.23,1,.32,1),opacity .25s ease,transform .25s ease;
  transform:translateY(0);
}
#priv-shield:hover{
  background:#6264b0;
  box-shadow:0 0 0 4px rgba(99,100,176,0.32),0 0 0 9px rgba(99,100,176,0.12);
}
#priv-shield.hidden{
  opacity:0;pointer-events:none;
  transform:translateY(100%);
}
#priv-shield svg{
  width:18px;height:18px;
  fill:none;stroke:rgba(232,234,255,.9);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;
}
#priv-shield span{
  font-family:var(--fb);
  font-size:8px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(232,234,255,.88);
  white-space:nowrap;
}
/* pointy chevron tip at the bottom */
#priv-shield::after{
  content:'';
  position:absolute;bottom:-7px;left:0;right:0;
  height:7px;
  background:var(--accent);
  clip-path:polygon(0 0,50% 100%,100% 0);
  transition:background .2s;
}
#priv-shield:hover::after{ background:#6264b0; }
[data-theme="dark"] #priv-shield{ background:#5c5fa0; }
[data-theme="dark"] #priv-shield:hover{ background:#6e71bb;box-shadow:0 0 0 4px rgba(110,113,187,0.30),0 0 0 9px rgba(110,113,187,0.10); }
[data-theme="dark"] #priv-shield::after{ background:#5c5fa0; }
[data-theme="dark"] #priv-shield:hover::after{ background:#6e71bb; }

/* ── PRIVACY MODAL ────────────────────────────────────── */
#priv-backdrop{
  position:fixed;inset:0;
  background:rgba(20,20,40,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
#priv-backdrop.open{opacity:1;pointer-events:auto}
#priv-modal{
  background:var(--page);
  border:1px solid var(--border);
  border-radius:4px;
  max-width:580px;width:100%;
  max-height:82vh;
  overflow-y:auto;
  padding:0 2.4rem 2.4rem;
  position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  transform:translateY(12px);
  transition:transform .3s ease;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
#priv-backdrop.open #priv-modal{transform:translateY(0)}
/* Sticky header keeps title + close always visible while scrolling */
.priv-hd{
  position:sticky;top:0;
  background:var(--page);
  padding:1.4rem 0 .8rem;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;
  z-index:2;
  border-bottom:1px solid var(--border);
  margin-bottom:1.4rem;
}
.priv-close{
  flex-shrink:0;
  background:rgba(0,0,0,.06);
  border:1px solid var(--border);
  border-radius:50%;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--ink);
  line-height:1;
  transition:background .2s,color .2s;
  margin-top:.2rem;
}
.priv-close:hover{background:rgba(0,0,0,.14)}
[data-theme="dark"] .priv-close{background:rgba(255,255,255,.07)}
[data-theme="dark"] .priv-close:hover{background:rgba(255,255,255,.15)}
.priv-h{font-family:var(--ff);font-size:clamp(1.4rem,3vw,2rem);color:var(--ink);line-height:1;margin-bottom:.3rem}
.priv-up{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);display:block}
.priv-body{font-size:.8rem;line-height:1.62;color:var(--ink);opacity:.8}
.priv-body h3{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:.95rem 0 .3rem;opacity:1}
.priv-body h3:first-child{margin-top:0}
.priv-body p{margin-bottom:.5rem}
.priv-body a{color:var(--accent);text-decoration:none}
.priv-body a:hover{text-decoration:underline}
[data-theme="dark"] #priv-modal{box-shadow:0 24px 80px rgba(0,0,0,.55)}

/* ── LOTTIE-STYLE MICRO ANIMATIONS ───────────────────── */
/* Play-button outer pulse ring */
.play-ring{position:relative} /* ensure ::before stacks correctly */
.play-ring::before{
  content:'';
  position:absolute;inset:-14px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.32);
  animation:ring-pulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes ring-pulse{
  0%  {transform:scale(.8);opacity:.75}
  65% {transform:scale(1.38);opacity:0}
  100%{transform:scale(1.38);opacity:0}
}
/* Section label line draw-in */
.s-lbl::before{
  content:'';display:inline-block;
  width:0;height:1px;
  background:var(--accent);
  vertical-align:middle;
  margin-right:0;
  transition:width .7s cubic-bezier(.19,1,.22,1),margin-right .6s cubic-bezier(.19,1,.22,1);
}
.s-lbl.visible::before{width:1.6rem;margin-right:.6rem}
/* Film list arrow slide (enhance existing .fi-a) */
.fi-a{transform:translateX(-6px);transition:opacity .3s ease,transform .38s cubic-bezier(.19,1,.22,1)!important}
.fi:hover .fi-a,.fi:focus-within .fi-a{transform:translateX(2px)}