/* ==========================================================
   Best Alex Shots — main stylesheet
   Loaded on every page; cache-busted via ?v= in base template.
   ========================================================== */

:root{
  --black:#0a0a0a;
  --dark:#141414;
  --dark2:#1a1a1a;
  --dark3:#222;
  --red:#E03030;
  --red-deep:#B82424;
  --white:#fff;
  --gray:#888;
  --gray-light:#bbb;
  --font-display:'Oswald','Bebas Neue','Impact',sans-serif;
  --font-stencil:'Saira Stencil One','Stardos Stencil','Allerta Stencil','Stencil Std','Impact',sans-serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --transition:.4s cubic-bezier(.4,.0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.no-scroll,html.no-scroll body{overflow:hidden;height:100%}
body{
  background:var(--black);color:var(--white);
  font-family:var(--font-sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ===== Skip link ===== */
.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{position:fixed;top:-40px;left:0;background:var(--red);color:#fff;padding:8px 14px;z-index:9999;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:top .2s}
.skip:focus{top:0;outline:2px solid var(--white)}

/* ===== Grain ===== */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:50;
  opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ===== Author mark (top-left) ===== */
.author{
  position:fixed;top:24px;left:32px;z-index:30;
  font-size:12px;letter-spacing:.5px;line-height:1.4;color:var(--white);
}
.author strong{font-weight:600;display:block}
.author span{color:var(--gray-light);font-size:11px}

/* ===== Locale switcher (top-right area, beside CTA) ===== */
.locale-switch{
  position:fixed;top:24px;right:32px;z-index:30;
  display:flex;gap:14px;align-items:center;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
}
.locale-switch a{
  color:var(--gray);
  padding:4px 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.locale-switch a:hover{color:var(--white)}
.locale-switch a[aria-current="true"]{color:var(--white);border-color:var(--red)}

/* ===== Socials (bottom-left) ===== */
.socials{
  position:fixed;bottom:24px;left:32px;z-index:30;
  display:flex;gap:18px;font-size:12px;letter-spacing:.5px;
}
.socials a{
  color:var(--gray-light);transition:color .3s;
  border-bottom:1px solid transparent;padding-bottom:1px;
}
.socials a:hover{color:var(--red);border-color:var(--red)}

/* ===== Counter (bottom-right, shown only on home slide-shell) ===== */
.counter{
  position:fixed;bottom:24px;right:32px;z-index:30;
  font-family:var(--font-stencil);font-size:14px;letter-spacing:2px;color:var(--gray);
}
.counter .current{color:var(--white)}
.counter .sep{margin:0 4px;color:var(--red)}

/* ===== Made by (bottom-center) ===== */
.made-by{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:30;
  font-size:11px;letter-spacing:1px;color:var(--gray);
}
.made-by a{color:var(--gray-light);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.made-by a:hover{color:var(--white);border-color:var(--gray)}

/* ===== Nav arrows (slide shell) — circular, clearly visible ===== */
.nav-btn{
  position:fixed;top:50%;z-index:40;
  width:52px;height:52px;border-radius:50%;
  color:var(--white);
  background:rgba(20,20,20,.55);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,background .25s ease,border-color .25s ease,opacity .25s ease;
  opacity:.95;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.nav-btn:hover{
  background:var(--red);
  border-color:var(--red);
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 4px 22px rgba(224,48,48,.45);
}
.nav-btn:active{transform:translateY(-50%) scale(.96)}
.nav-btn.prev{left:24px;transform:translateY(-50%)}
.nav-btn.next{right:24px;transform:translateY(-50%)}
.nav-btn svg{width:22px;height:22px;stroke-width:2}
.nav-btn:disabled{opacity:.2;cursor:not-allowed;pointer-events:none}
.nav-btn:disabled:hover{background:rgba(20,20,20,.55);border-color:rgba(255,255,255,.18);transform:translateY(-50%) scale(1)}

@media (max-width:820px){
  .nav-btn{width:44px;height:44px}
  .nav-btn.prev{left:12px}
  .nav-btn.next{right:12px}
  .nav-btn svg{width:18px;height:18px}
}

/* ===== Slide shell ===== */
.frame{position:fixed;inset:0;overflow:hidden}
.slides{
  position:absolute;inset:0;
  display:flex;
  transition:transform .65s cubic-bezier(.65,.0,.25,1);
  will-change:transform;
}
.slide{
  flex:0 0 100vw;height:100vh;height:100dvh;
  position:relative;overflow:hidden;
  padding:80px 80px 60px;display:flex;flex-direction:column;
}

/* ===== Slide titles ===== */
.slide-title{
  font-family:var(--font-stencil);font-weight:900;
  text-transform:uppercase;letter-spacing:-.005em;line-height:.9;
}
.slide-title em{font-style:normal;color:var(--red);display:inline-block}

/* ===== HERO ===== */
.slide-hero{padding:60px 48px;position:relative;isolation:isolate;overflow:hidden}
.slide-hero .hero-grid{position:relative;z-index:2}

/* ============================================================
   Cinematic hero backdrop — 6 layered absolute children of .hero-fx.
   All pointer-events:none, aria-hidden, sit at z:0–1 behind content.
   Layers (z bottom→top):
     0  hero-fx-base       base dark radial gradient
     1  hero-fx-glow       soft red glow behind camera, breathes
     2  hero-fx-streak     3 horizontal red streaks, slow L→R drift
     3  hero-fx-dust       8 floating dust specks
     4  hero-fx-grain      film grain noise
     5  hero-fx-vignette   subtle dark vignette around edges
   ============================================================ */
.hero-fx{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.hero-fx > *{position:absolute;inset:0;pointer-events:none}

/* 1 — base — solid-color radial gradient (lishchuk.com pattern).
   Uses real RGB colors (no alpha) so the glow is GUARANTEED visible —
   it IS the background, not a transparent overlay over it.
   Dark-red core behind camera (#2a0808 → #1a0606 → #050505) fades to black. */
.hero-fx-base{
  background:
    /* big colour glow halo — centered on actual camera position (64% 50%).
       Bright zone extends past camera silhouette → visible halo AROUND the camera.
       Hue rotates through full spectrum every 36s so the brand colour cycles
       through red → orange → gold → green → cyan → blue → purple → magenta → red.
       Black areas stay black (hue-rotate doesn't touch lightness 0). */
    radial-gradient(ellipse 42% 55% at 64% 50%,#c83030 0%,#8a2020 18%,#4a1010 42%,#1a0606 68%,#070303 88%);
  z-index:1;
  animation:fxHue 36s linear infinite;
  will-change:filter;
}
@keyframes fxHue{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(360deg)}
}

/* 2 — cinematic red backlight — TIGHT, behind camera + slight center-left bleed.
   Main source positioned around the camera screen/middle (~75% x, 58% y),
   small radius (22% wide) so it doesn't become a "red wall".
   Falloff stops by ~50% horizontal — never reaches headline.
   No more horizontal-wash linear-gradient — just two radials + a flare point. */
/* Glow accent layer — adds a subtle pulsing brightness peak on top of base.
   Smaller and brighter accents only. Main glow is in base layer above. */
.hero-fx-glow{
  background:
    /* additional soft red halo on top of base — adds extra brightness pulse */
    radial-gradient(ellipse 28% 38% at 64% 50%,rgba(255,60,60,.30) 0%,rgba(255,60,60,.10) 50%,transparent 90%),
    /* small bright white flare point — looks like a studio bulb reflection on the corner of the camera body */
    radial-gradient(circle 2% at 56% 47%,rgba(255,240,230,.95) 0%,rgba(255,180,160,.30) 50%,transparent 100%);
  mix-blend-mode:screen;
  animation:fxGlow 9s ease-in-out infinite;
  will-change:opacity,transform;
  z-index:3;
}
@keyframes fxGlow{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}

/* 3 — thin sharp anamorphic horizontal lens-flare streaks.
   Each starts at left:32% (past headline zone) so the headline area stays clean.
   Sharp bright cores + soft falloff, blurred slightly. 3 lines at different
   y-positions/widths/speeds for parallax depth. */
/* Streaks hidden — user feedback 2026-05-03: only the glow behind camera, no stripes. */
.hero-fx-streak{display:none}
@keyframes fxStreak{
  0%{transform:translateX(-25%)}
  100%{transform:translateX(25%)}
}

/* 4 — dust particles (8 specks, each with own --x/--y/--d/--s vars) */
.hero-fx-dust{z-index:5}
.hero-fx-dust i{
  position:absolute;
  left:var(--x);top:var(--y);
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,230,215,.75);
  box-shadow:0 0 8px rgba(255,215,200,.50),0 0 14px rgba(255,200,180,.20);
  animation:fxDust var(--s,50s) ease-in-out infinite;
  animation-delay:var(--d,0s);
  will-change:transform,opacity;
}
@keyframes fxDust{
  0%,100%{transform:translate(0,0);opacity:.40}
  25%{transform:translate(-8vw,-4vh);opacity:.75}
  50%{transform:translate(6vw,-10vh);opacity:1}
  75%{transform:translate(10vw,-2vh);opacity:.55}
}

/* 5 — film grain (animated noise SVG, very subtle, on top) */
.hero-fx-grain{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='nh'><feTurbulence baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='220' height='220' filter='url(%23nh)' opacity='.7'/></svg>");
  opacity:.08;
  mix-blend-mode:overlay;
  animation:fxGrain 1.6s steps(6) infinite;
  z-index:6;
}
@keyframes fxGrain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-2%)}
  60%{transform:translate(2%,1%)}
  80%{transform:translate(-1%,-1%)}
  100%{transform:translate(0,0)}
}

/* 6 — light vignette — only the very corners, kept subtle so it doesn't kill the glow */
.hero-fx-vignette{
  background:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 78%,rgba(0,0,0,.45) 100%);
  z-index:2;
}

/* Mobile — reduce intensity (smaller glow, drop streaks 2&3, fewer particles) */
@media (max-width:820px){
  .hero-fx-glow{
    background:radial-gradient(ellipse 70% 60% at 50% 60%,rgba(224,48,48,.22) 0%,rgba(224,48,48,.06) 45%,transparent 75%);
  }
  .hero-fx-streak--2,
  .hero-fx-streak--3{display:none}
  .hero-fx-dust i:nth-child(n+5){display:none}  /* keep 4 of 8 particles */
}

/* ============================================================
   Extra cinematic accents — bokeh, rim light, shimmer
   ============================================================ */

/* 7 — bokeh (soft out-of-focus light circles, like a real lens) */
.hero-fx-bokeh{z-index:4;pointer-events:none}
.hero-fx-bokeh i{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--s,12px);height:var(--s,12px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,140,140,.85) 0%,rgba(255,80,80,.35) 50%,transparent 100%);
  filter:blur(4px);
  opacity:0;
  animation:fxBokeh var(--dur,22s) ease-in-out infinite;
  animation-delay:var(--d,0s);
  will-change:transform,opacity;
}
@keyframes fxBokeh{
  0%,100%{transform:translate(0,0) scale(.8);opacity:0}
  20%{opacity:.45}
  50%{transform:translate(-12vw,-6vh) scale(1.1);opacity:.7}
  80%{opacity:.30}
}

/* 8 — rim light — DISABLED (user feedback 2026-05-03: looked like a stray spot top-right) */
.hero-fx-rim{display:none}

/* 9 — shimmer line — DISABLED (user feedback 2026-05-03: ugly diagonal line) */
.hero-fx-shimmer{display:none}

@media (max-width:820px){
  /* Tame extras on mobile — fewer bokeh, no shimmer */
  .hero-fx-bokeh i:nth-child(n+4){display:none}
  .hero-fx-shimmer{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-fx-glow,
  .hero-fx-streak,
  .hero-fx-dust i,
  .hero-fx-grain,
  .hero-fx-bokeh i,
  .hero-fx-rim,
  .hero-fx-shimmer{animation:none}
}
.hero-grid{
  flex:1;display:grid;grid-template-columns:0.75fr 1.55fr;gap:24px;align-items:center;
}
.hero-titles{display:flex;flex-direction:column;justify-content:center}
.hero-tagline{
  font-family:var(--font-sans);font-weight:500;
  font-size:11px;letter-spacing:4px;text-transform:uppercase;
  color:var(--gray-light);margin-bottom:32px;
  display:flex;align-items:center;gap:14px;
}
.hero-tagline::before{content:"";width:32px;height:1px;background:var(--red)}
.hero-title{
  font-family:var(--font-stencil);font-weight:900;
  font-size:clamp(56px,8vw,128px);line-height:.92;letter-spacing:-.005em;
  text-transform:uppercase;
}
.hero-title .line{display:block;white-space:nowrap}
.hero-title .red{color:var(--red);display:block}
.hero-meta{
  margin-top:48px;display:flex;gap:48px;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);
  font-weight:500;
}
.hero-meta div{position:relative;padding-top:14px}
.hero-meta div::before{content:"";position:absolute;top:0;left:0;width:24px;height:1px;background:var(--red);opacity:.7}
.hero-meta strong{
  color:var(--white);font-weight:700;display:block;margin-bottom:4px;
  font-size:32px;letter-spacing:0;font-family:var(--font-stencil);
  line-height:.9;
}

.hero-camera{position:relative;display:flex;align-items:center;justify-content:center}
.camera-frame{
  position:relative;width:100%;max-width:1200px;aspect-ratio:1848/1040;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  /* Safety: child .camera-screen can never extend past the camera silhouette,
     even if its geometry % values are tweaked later. Drop-shadow is unaffected. */
  overflow:hidden;
}
.camera-frame .body{
  position:absolute;inset:0;
  background:url('/images/sony-a9-iii-back.png') center/contain no-repeat;
  z-index:2;pointer-events:none;
}
/* LCD position — locked to Python pixel-detection of the PNG's transparent cutout.
   PNG sony-a9-iii-back.png is 1848x1040; LCD bbox = (373,436)..(1101,923) = 729x488 px,
   fill=1.000 (sharp edges, no anti-aliasing). Aspect 1.494 ≈ 3:2 (Sony A9 III spec).
   Values include 0.05% sub-pixel safety margin on each side; .camera-frame's
   overflow:hidden clips any accidental overhang. To re-detect, run:
     python3 scripts/detect-camera.py  (uses scipy.ndimage.label) */
.camera-screen{
  position:absolute;
  left:20.13%;   /* detected 20.184 - 0.05 */
  top:41.87%;    /* detected 41.923 - 0.05 */
  width:39.55%;  /* detected 39.448 + 0.10 */
  height:47.02%; /* detected 46.923 + 0.10 */
  background:#000;
  overflow:hidden;
  z-index:1;
}
.camera-screen img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.04) saturate(.95);
  position:absolute;inset:0;
}
.camera-screen .slide-img{
  opacity:0;transition:opacity .9s ease;
  will-change:opacity;
}
.camera-screen .slide-img.is-active{opacity:1}

/* LCD chevron arrows — subtle, appear stronger on hover */
.lcd-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;cursor:pointer;z-index:4;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,opacity .25s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:.85;
}
.lcd-arrow svg{width:14px;height:14px}
.lcd-arrow:hover{
  background:rgba(224,48,48,.85);
  border-color:#fff;
  opacity:1;
  transform:translateY(-50%) scale(1.08);
}
.lcd-arrow:active{transform:translateY(-50%) scale(.96)}
.lcd-arrow-prev{left:12px}
.lcd-arrow-next{right:12px}
@media (max-width:820px){
  .lcd-arrow{width:30px;height:30px}
  .lcd-arrow svg{width:12px;height:12px}
  .lcd-arrow-prev{left:8px}
  .lcd-arrow-next{right:8px}
}
.camera-screen::after{
  /* faint screen reflection */
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,.06) 0%,transparent 35%,transparent 70%,rgba(255,255,255,.04) 100%);
  mix-blend-mode:screen;
}
.camera-rec{
  position:absolute;top:8%;left:5%;z-index:4;
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-sans);font-weight:600;font-size:9px;
  color:#fff;letter-spacing:2px;text-transform:uppercase;
}
.camera-rec::before{
  content:"";width:6px;height:6px;background:#E03030;border-radius:50%;
  animation:recBlink 1.5s ease-in-out infinite;
}
@keyframes recBlink{
  0%,100%{opacity:1;box-shadow:0 0 6px rgba(224,48,48,.8)}
  50%{opacity:.4;box-shadow:0 0 0 rgba(224,48,48,0)}
}

/* ============================================================
   Camera module — interactive overlays, HUD, buttons, animations
   ============================================================ */

/* Status LED on camera body — always-on living indicator */
.cam-led{
  position:absolute;top:6.5%;left:48.5%;z-index:5;
  width:.55%;aspect-ratio:1;border-radius:50%;
  background:#3aff66;
  box-shadow:0 0 6px rgba(58,255,102,.7),0 0 12px rgba(58,255,102,.4);
  animation:ledBreathe 3s ease-in-out infinite;pointer-events:none;
}
@keyframes ledBreathe{
  0%,100%{opacity:.45;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}

/* LCD HUD layer — sits inside .camera-screen above photos, below ::after gloss */
.lcd-hud{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  font-family:var(--font-sans);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* REC indicator (top-left of LCD) */
.lcd-rec{
  position:absolute;top:5%;left:5%;
  display:flex;align-items:center;gap:4px;
  font-size:clamp(8px,1vw,11px);font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
}
.lcd-rec-dot{
  width:6px;height:6px;border-radius:50%;background:#E03030;
  box-shadow:0 0 4px rgba(224,48,48,.8);
  animation:lcdRecBlink 2s ease-in-out infinite;
}
@keyframes lcdRecBlink{
  0%,40%,100%{opacity:1}
  60%{opacity:.2}
}

/* Battery + shots counter (top-right of LCD) */
.lcd-battery{
  position:absolute;top:5%;right:5%;
  display:flex;align-items:center;gap:6px;
  font-size:clamp(8px,1vw,11px);font-weight:500;letter-spacing:.5px;
}
.lcd-batt-bars{
  display:inline-flex;gap:1px;padding:2px;
  border:1px solid rgba(255,255,255,.7);border-radius:2px;
  position:relative;
}
.lcd-batt-bars::after{
  content:"";position:absolute;right:-3px;top:25%;height:50%;width:2px;
  background:rgba(255,255,255,.7);border-radius:0 1px 1px 0;
}
.lcd-batt-bars i{
  display:block;width:3px;height:7px;background:#fff;
}
.lcd-batt-bars i:last-child{background:rgba(255,255,255,.25)}

/* EXIF strip (bottom of LCD) — shown only in DISP=EXIF mode or during reveal */
.lcd-exif{
  position:absolute;left:0;right:0;bottom:0;
  padding:6px 10px;
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:clamp(8px,1vw,11px);font-weight:500;letter-spacing:1px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;
}
.lcd-hud[data-disp-mode="1"] .lcd-exif,
.lcd-exif.is-revealing{opacity:1;transform:translateY(0)}

/* Rule-of-thirds grid (DISP=Grid mode) */
.lcd-grid{
  position:absolute;inset:0;opacity:0;transition:opacity .25s;
}
.lcd-hud[data-disp-mode="2"] .lcd-grid{opacity:1}
.lcd-grid i{position:absolute;background:rgba(255,255,255,.35)}
.lcd-grid i:nth-child(1){left:33.33%;top:0;bottom:0;width:1px}
.lcd-grid i:nth-child(2){left:66.66%;top:0;bottom:0;width:1px}
.lcd-grid i:nth-child(3){top:33.33%;left:0;right:0;height:1px}
.lcd-grid i:nth-child(4){top:66.66%;left:0;right:0;height:1px}

/* White flash (shutter shot) */
.lcd-flash{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;
  transition:opacity 60ms ease-out;
}
.lcd-flash.is-firing{opacity:.92;transition-duration:0ms}
.lcd-flash.is-rejecting{
  background:rgba(224,48,48,.55);opacity:1;
  transition:opacity 260ms ease-out;
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
.camera-screen.is-shaking{animation:shake .36s ease-in-out}

/* Focus reticle (AF-ON pulse — 4 corner brackets that converge) */
.lcd-focus{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:25%;aspect-ratio:1;opacity:0;transition:opacity .15s;
}
.lcd-focus i{
  position:absolute;width:18%;height:18%;border:2px solid #f5d048;
}
.lcd-focus i:nth-child(1){top:0;left:0;border-right:none;border-bottom:none}
.lcd-focus i:nth-child(2){top:0;right:0;border-left:none;border-bottom:none}
.lcd-focus i:nth-child(3){bottom:0;left:0;border-right:none;border-top:none}
.lcd-focus i:nth-child(4){bottom:0;right:0;border-left:none;border-top:none}
.lcd-focus.is-firing{
  opacity:1;
  animation:focusLock .6s cubic-bezier(.4,1.4,.5,1) both;
}
@keyframes focusLock{
  0%{transform:translate(-50%,-50%) scale(1.4);opacity:0}
  40%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:.85}
}

/* MENU overlay — slides in from right, covers LCD when open */
.cam-menu{
  position:absolute;inset:0;z-index:6;
  background:linear-gradient(180deg,rgba(8,12,28,.92),rgba(8,12,28,.96));
  color:#fff;font-family:var(--font-sans);
  padding:8% 7% 7%;display:flex;flex-direction:column;
  transform:translateX(100%);opacity:0;
  transition:transform .35s cubic-bezier(.5,.1,.25,1),opacity .25s;
  pointer-events:none;
}
.cam-menu[aria-hidden="false"]{
  transform:translateX(0);opacity:1;pointer-events:auto;
}
.cam-menu-title{
  font-size:clamp(10px,1.3vw,14px);font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:#f5a648;margin-bottom:8%;
  border-bottom:1px solid rgba(245,166,72,.4);padding-bottom:4%;
}
.cam-menu-list{display:flex;flex-direction:column;gap:6%;flex:1}
.cam-menu-list li{
  display:flex;justify-content:space-between;
  font-size:clamp(9px,1.1vw,12px);
}
.cam-menu-list li span{color:rgba(255,255,255,.7)}
.cam-menu-list li strong{color:#fff;font-weight:500}

/* Camera-frame: position context for cam buttons; also clip via overflow */
.camera-frame{position:relative}

/* Interactive button overlays — fully invisible, just clickable region.
   The physical button on the PNG IS the affordance. We only add cursor + press feedback. */
.cam-btn{
  position:absolute;z-index:7;
  background:transparent;border:none;
  border-radius:50%;cursor:pointer;padding:0;
  transition:transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.cam-btn:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}
.cam-btn.is-pressed{transform:scale(.88)}

/* Tooltip on hover — DISABLED (user feedback 2026-05-03: visual clutter).
   Markup stays in template for screen readers via aria-label only. */
.cam-btn-tip{display:none}

/* REC button — red pulse ring (onboarding) */
.cam-btn-pulse{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--red);opacity:0;pointer-events:none;
}
.camera-frame.is-onboarding .cam-btn.has-pulse .cam-btn-pulse{
  animation:recPulseRing 1.6s ease-out infinite;
}
@keyframes recPulseRing{
  0%{transform:scale(.6);opacity:.95}
  100%{transform:scale(2);opacity:0}
}

/* REC button — own internal red glow when active */
.cam-btn-rec.is-pressed{
  background:rgba(224,48,48,.4);border-color:var(--red);
  box-shadow:0 0 18px rgba(224,48,48,.7);
}

/* MENU button — visible state when menu is open */
.camera-frame.menu-open .cam-btn-menu{
  border-color:var(--red);background:rgba(224,48,48,.18);
}

/* AF-ON button — yellow on press */
.cam-btn-afon.is-pressed{
  background:rgba(245,208,72,.3);border-color:#f5d048;
  box-shadow:0 0 14px rgba(245,208,72,.6);
}

/* Dial — slow rotate on hover, fast on press */
.cam-btn-dial{transition:transform 1s cubic-bezier(.3,.7,.3,1)}
.cam-btn-dial:hover{animation:dialSpin 8s linear infinite}
.cam-btn-dial.is-spinning{animation:dialSpin .9s ease-out 1}
@keyframes dialSpin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
/* Counteract: don't shrink dial on press, keep its rotation transform */
.cam-btn-dial.is-pressed{transform:none}

/* Onboarding hint under camera */
.cam-onboarding{
  position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-sans);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gray-light);
  opacity:0;transition:opacity .5s ease .1s;pointer-events:none;
  white-space:nowrap;
}
.cam-onboarding-line{
  width:32px;height:1px;background:var(--red);
}
.cam-onboarding[aria-hidden="false"]{opacity:1}

/* Sound toggle — hidden (user feedback 2026-05-03: temporarily not needed).
   Markup stays in template; just hidden via CSS so we can flip back later. */
.cam-sound{display:none !important}

/* Hero-camera positioning context */
.hero-camera{position:relative}

/* ===== Gallery (scrollable, scattered editorial layout) ===== */
.slide-gallery{
  padding:0;
  /* Slide grows past 100vh — internal vertical scroll handled by .gallery-scroll */
  overflow:hidden;
}
.gallery-scroll{
  width:100%;height:100%;
  overflow-y:auto;overflow-x:hidden;
  padding:80px 64px 100px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.gallery-scroll::-webkit-scrollbar{width:6px}
.gallery-scroll::-webkit-scrollbar-track{background:transparent}
.gallery-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}

.gallery-head{
  margin-bottom:48px;
}
.gallery-title{
  font-family:var(--font-stencil);font-weight:900;
  /* Match .portfolio-mega exactly so titles across slides look identical */
  font-size:clamp(64px,12vw,200px);line-height:.86;
  text-transform:uppercase;letter-spacing:0;color:var(--white);
}
.gallery-title em{font-style:normal;color:var(--red)}
.gallery-sub{
  margin-top:16px;
  font-family:var(--font-sans);font-size:11px;letter-spacing:4px;
  text-transform:uppercase;color:var(--gray-light);
  display:flex;align-items:center;gap:14px;
}
.gallery-sub::before{content:"";width:32px;height:1px;background:var(--red)}

/* Scattered masonry — CSS columns + per-photo tilts via margin-top */
.gallery-scatter{
  column-count:5;
  column-gap:24px;
}
@media (max-width:1400px){.gallery-scatter{column-count:4}}
@media (max-width:1100px){.gallery-scatter{column-count:3}}
@media (max-width:760px){.gallery-scatter{column-count:2;column-gap:2px}}
@media (max-width:600px){.gallery-scatter{column-count:1;column-gap:0}}

/* Mobile: Gallery edge-to-edge — title keeps its own padding, photos fill viewport */
@media (max-width:820px){
  .gallery-scroll{padding:80px 0 100px}
  .gallery-head{padding:0 18px;margin-bottom:32px}
  .gallery-scatter .ph{margin-bottom:2px;border-radius:0}
}
@media (max-width:440px){
  .gallery-scatter .ph{margin-bottom:0}
}

.gallery-scatter .ph{
  break-inside:avoid;
  margin:0 0 24px;
  display:block;
  position:relative;
  overflow:hidden;
  background:var(--dark2);
  cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
@media (max-width:760px){.gallery-scatter .ph{margin-bottom:12px}}

/* Tilts disabled (2026-05-03): CSS-Columns puts the first photo of each column
   at the top — applying margin-top to "first-in-column" items shifts the whole
   column down and breaks horizontal alignment across columns. Natural variance
   in photo aspect ratios already creates a sufficient masonry/scattered feel. */
.gallery-scatter .ph[class*="tilt-"]{margin-top:0}

.gallery-scatter .ph img{
  display:block;width:100%;height:auto;
  transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s ease;
  will-change:transform;
}
/* Subtle hover zoom — exactly «чуть зумит фотку но не сильно» */
.gallery-scatter .ph:hover img{transform:scale(1.035)}
.gallery-scatter .ph::after{
  /* On hover, very subtle dark vignette appears — adds depth without dominating */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.18));
  opacity:0;transition:opacity .4s ease;
}
.gallery-scatter .ph:hover::after{opacity:1}

/* Placeholder slot — "Your photo could be in my gallery" CTA card.
   Appears in a few spots between real photos to invite visitors to book. */
.gallery-scatter .ph-slot{
  aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(40,40,40,.55),rgba(20,20,20,.85));
  border:1px dashed rgba(255,255,255,.20);
  text-decoration:none;color:var(--white);
  cursor:pointer;
  transition:border-color .25s ease,background .25s ease,transform .35s ease;
}
.gallery-scatter .ph-slot:hover{
  border-color:var(--red);
  background:linear-gradient(160deg,rgba(60,30,30,.55),rgba(40,12,12,.85));
  transform:translateY(-3px);
}
.gallery-scatter .ph-slot::after{display:none}
.ph-slot-inner{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:24px;text-align:center;max-width:240px;
}
.ph-slot-text{
  font-family:var(--font-stencil);font-weight:900;
  font-size:clamp(15px,1.2vw,18px);line-height:1.25;
  letter-spacing:.5px;text-transform:uppercase;
}
.ph-slot-cta{
  font-family:var(--font-sans);font-weight:600;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--red);
  display:inline-flex;align-items:center;gap:6px;
  border-bottom:1px solid currentColor;padding-bottom:3px;
}
.ph-slot-cta em{font-style:normal;transition:transform .25s ease}
.gallery-scatter .ph-slot:hover .ph-slot-cta em{transform:translateX(4px)}

/* Instagram CTA variant — IG signature gradient (purple → pink → orange) */
.gallery-scatter .ph-slot-ig{
  background:linear-gradient(135deg,#405DE6 0%,#5851DB 18%,#833AB4 35%,#C13584 52%,#E1306C 70%,#FD1D1D 84%,#F77737 100%);
  border:1px solid rgba(255,255,255,.25);
}
.gallery-scatter .ph-slot-ig:hover{
  background:linear-gradient(135deg,#FD1D1D 0%,#E1306C 25%,#C13584 50%,#833AB4 75%,#405DE6 100%);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 30px rgba(225,48,108,.40);
}
.ph-slot-ig .ph-slot-icon{
  width:42px;height:42px;color:#fff;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.ph-slot-ig .ph-slot-text{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.ph-slot-ig .ph-slot-cta{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.7);
}

/* ===== Portfolio intro ===== */
.slide-portfolio-intro{justify-content:center;align-items:center;padding:80px;text-align:center}
.portfolio-overline{
  font-family:var(--font-sans);font-weight:500;
  font-size:clamp(11px,1vw,13px);letter-spacing:6px;
  text-transform:uppercase;color:var(--gray-light);
  margin-bottom:24px;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.portfolio-overline::before,
.portfolio-overline::after{
  content:"";width:36px;height:1px;background:var(--red);
}
.portfolio-mega{
  font-family:var(--font-stencil);font-weight:900;
  /* 9 letters of PORTFOLIO must fit within viewport with 160px padding.
     Cap below the natural font-size so the word never clips. */
  font-size:clamp(64px,12vw,200px);
  line-height:.85;letter-spacing:0;
  text-transform:uppercase;
  max-width:100%;
}
.portfolio-mega em{font-style:normal;color:var(--red)}
/* Per-letter hover — each letter becomes red on mouseover, back to white on leave */
.portfolio-mega .letter{
  display:inline-block;
  transition:color .25s ease;
  color:inherit;
}
.portfolio-mega .letter:hover{color:var(--red)}
.portfolio-list{
  margin-top:40px;display:flex;gap:32px;flex-wrap:wrap;justify-content:center;
  font-family:var(--font-stencil);font-weight:700;
  font-size:clamp(16px,1.6vw,22px);letter-spacing:2px;text-transform:uppercase;color:var(--gray-light);
}
.portfolio-list a{position:relative;transition:color .3s}
.portfolio-list a:hover{color:var(--red)}
.portfolio-list a:not(:last-child)::after{content:"·";position:absolute;right:-20px;color:var(--red)}

/* ===== Category slides + standalone pages ===== */
.slide-category{padding:0;overflow:hidden}
.category-scroll{
  width:100%;height:100%;
  overflow-y:auto;overflow-x:hidden;
  padding:80px 80px 60px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.category-scroll::-webkit-scrollbar{width:6px}
.category-scroll::-webkit-scrollbar-track{background:transparent}
.category-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.category-head{margin-bottom:32px}
.category-eyebrow{
  font-family:var(--font-sans);font-size:11px;letter-spacing:4px;
  text-transform:uppercase;color:var(--red);margin-bottom:14px;
  display:flex;align-items:center;gap:14px;
}
.category-eyebrow::before{content:"";width:32px;height:1px;background:var(--red)}
.category-title{
  font-family:var(--font-stencil);font-weight:900;
  font-size:clamp(56px,8vw,120px);line-height:.9;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--white);
}
.category-title em{font-style:normal;color:var(--red)}
.category-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(3,1fr);
  align-content:start;
}
.category-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.category-grid.cols-2{grid-template-columns:repeat(2,1fr)}
/* Each preview cell is fixed-aspect landscape so photos don't crop vertically */
.category-grid .ph{aspect-ratio:4/3}

/* Corporate slide — portrait-heavy. Use squarer cells + object-position: top
   so faces stay in frame and heads are not chopped off. */
[data-slide="cat-corporate"] .category-grid .ph{
  aspect-ratio:4/5;
}
[data-slide="cat-corporate"] .category-grid .ph img{
  object-position:center 25%;
}
.category-grid .ph{overflow:hidden;background:var(--dark2);position:relative}
.category-grid .ph .label{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-family:var(--font-stencil);font-weight:700;font-size:14px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--white);
  background:rgba(10,10,10,.7);padding:6px 10px;
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;
}
.category-grid .ph:hover .label{opacity:1;transform:translateY(0)}
.category-grid .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.category-grid .ph:hover img{transform:scale(1.04)}

/* «Poster» bottom of each category slide — short summary + CTA link */
.category-foot{
  margin-top:24px;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.category-summary{
  max-width:640px;
  font-family:var(--font-sans);font-size:13px;line-height:1.6;
  color:var(--gray-light);letter-spacing:.2px;
}
.category-cta{
  font-family:var(--font-sans);font-weight:600;font-size:11px;
  letter-spacing:3px;text-transform:uppercase;color:var(--white);
  border-bottom:1px solid var(--red);padding-bottom:4px;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:color .25s ease,gap .25s ease,border-color .25s ease;
}
.category-cta:hover{color:var(--red);gap:12px;border-color:var(--white)}
@media (max-width:760px){
  .category-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .category-summary{font-size:12px}
}

/* ===== Showreels slide — vintage TV + YouTube embed + Reels row ===== */
.slide-showreels{
  /* Top padding 90px so title clears the global .author header (top:24 + ~50px text) */
  padding:90px 56px 50px;
  align-items:center;
  justify-content:flex-start;
  position:relative;isolation:isolate;
}
/* Animated red glow behind the TV — same hue-rotate cycle as hero-fx-base */
.slide-showreels::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 55% at 50% 50%,#c83030 0%,#7a1c1c 18%,#3a1010 42%,#1a0606 68%,#050505 88%);
  animation:fxHue 36s linear infinite;
  will-change:filter;
}
/* Lift content above the glow */
.slide-showreels > *{position:relative;z-index:1}
.showreels-head{margin-bottom:18px;align-self:flex-start;flex-shrink:0}
.showreels-title{
  font-family:var(--font-stencil);font-weight:900;
  /* Smaller than other titles so TV + reels both fit on one screen */
  font-size:clamp(48px,8vw,120px);line-height:.86;
  text-transform:uppercase;letter-spacing:0;color:var(--white);
}
.showreels-title em{font-style:normal;color:var(--red)}
.showreels-stage{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:20px;width:100%;justify-content:center;min-height:0;
}

/* TV frame — keeps PNG aspect 670/515. Sized so TV + reels fit on 800–1080vh. */
.tv-frame{
  position:relative;width:auto;
  height:min(40vh,360px);
  aspect-ratio:670/515;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.55));
  flex-shrink:0;
}
.tv-body{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:2;pointer-events:none;
}
/* Screen cutout — sits well inside the curved CRT bezel so video never bleeds past it.
   Border-radius matches the visible CRT curve (more aggressive than the bare cutout). */
.tv-screen{
  position:absolute;
  /* Rectangular screen — sized to fully fill the TV's screen cutout.
     Coords from Python detection (40,57)..(535,468) px in 670x515 ≈ 6/11/74/80%.
     PNG bezel (z:2) covers anything that overflows this rectangle, so video
     stretches fully across the visible screen area without gaps. */
  left:6%;top:11%;
  width:74%;height:80%;
  background:#000;
  overflow:hidden;
  z-index:1;
}
.tv-screen iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  /* No clicks/focus to iframe — keeps slide arrows working, video keeps autoplay */
  pointer-events:none;
  /* Scale up so 16:9 video fills 1.2:1 CRT screen without letterbox bars */
  transform:scale(1.5) translateZ(0);
  transform-origin:center center;
  /* Force own compositor layer so parent transform anims don't repaint iframe */
  will-change:transform;
  backface-visibility:hidden;
}
.tv-screen{isolation:isolate}
/* Subtle CRT glass reflection */
.tv-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.06) 0%,transparent 28%,transparent 72%,rgba(255,255,255,.04) 100%);
  z-index:2;
}

/* Reels — fixed row, no horizontal scroll. Whatever fits in the viewport shows;
   the rest is clipped (so slide-shell arrows don't conflict with reel scrolling). */
.reels-track-wrap{
  width:100%;max-width:100%;flex-shrink:0;position:relative;
  overflow:hidden;
}
.reels-track{
  display:flex;gap:14px;
  flex-wrap:nowrap;justify-content:center;
  padding:8px 16px;
}
.reel-card{
  position:relative;
  flex:0 0 auto;
  width:auto;
  /* Sized so 10 fit a 1920px viewport horizontally and the showreels slide
     fits a typical 800–1080px viewport vertically together with TV + title. */
  height:min(26vh,230px);
  aspect-ratio:9/16;
  background:var(--dark2);
  overflow:hidden;
  text-decoration:none;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
  border-radius:10px;
  border:0;padding:0;
  font:inherit;color:inherit;
  opacity:0;transform:translateY(16px);
  animation:reelEnter .55s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 60ms) forwards;
}
@keyframes reelEnter{
  to{opacity:1;transform:translateY(0)}
}
.reel-card.reel-featured{
  outline:2px solid var(--red);outline-offset:0;
}
.reel-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 36px rgba(0,0,0,.55),0 0 0 1px rgba(224,48,48,.55);
}
.reel-thumb{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .35s ease;
  z-index:1;
}
.reel-card:hover .reel-thumb{transform:scale(1.06);filter:brightness(.45) saturate(1.1)}

/* Big stencil number — design anchor (editorial style) */
.reel-card .reel-num{
  position:absolute;top:10px;left:12px;z-index:3;
  font-family:var(--font-stencil);font-weight:900;
  font-size:clamp(28px,4vw,48px);line-height:.9;
  color:var(--white);
  letter-spacing:-.01em;
  text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 24px rgba(0,0,0,.5);
  transition:color .25s ease,transform .35s ease;
  pointer-events:none;
}
.reel-card:hover .reel-num{color:var(--red);transform:scale(1.08)}
.reel-featured .reel-num{color:var(--red)}

/* Vibe layer — red gradient that washes from bottom on hover, gives "cinematic poster" feel */
.reel-vibe{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(224,48,48,.22) 75%,rgba(0,0,0,.85) 100%);
  opacity:.55;
  transition:opacity .35s ease;
}
.reel-card:hover .reel-vibe{opacity:1}

/* Meta strip — title + Watch CTA, slides up from bottom on hover */
.reel-meta{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:14px 14px 16px;
  display:flex;flex-direction:column;gap:6px;
  transform:translateY(36%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.reel-card:hover .reel-meta{transform:translateY(0)}
.reel-meta-label{
  font-family:var(--font-sans);font-weight:600;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--white);line-height:1.3;
}
.reel-meta-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-sans);font-weight:700;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--red);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s ease,transform .35s ease;
}
.reel-meta-cta svg{width:11px;height:11px;margin-left:-2px}
.reel-card:hover .reel-meta-cta{opacity:1;transform:translateY(0)}

/* CRT scanlines + slight noise on the TV screen for vintage feel */
.tv-screen::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.13) 0px,rgba(0,0,0,.13) 1px,
      transparent 1px,transparent 3px);
  opacity:.55;
  mix-blend-mode:overlay;
}

/* === Reel Lightbox Modal === */
.reel-lightbox{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:32px;
  /* No backdrop-filter — it breaks iframe GPU video rendering (audio plays, video black) */
  background:rgba(0,0,0,.94);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
  isolation:isolate;
}
.reel-lightbox[aria-hidden="false"]{opacity:1;visibility:visible}
/* 16:9 modal — explicit width AND height (no aspect-ratio quirks), so iframe never collapses */
.reel-lightbox-inner{
  position:relative;
  /* width capped by viewport, height derived as 9/16 of width but capped to 86vh */
  width:min(92vw,calc(86vh * 16 / 9),1280px);
  height:min(calc(92vw * 9 / 16),86vh,720px);
  background:#000;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.85),0 0 60px rgba(224,48,48,.18);
}
.reel-lightbox-frame{position:absolute;inset:0}
.reel-lightbox-frame iframe{
  position:absolute;inset:0;
  width:100% !important;height:100% !important;border:0;display:block;
}
.reel-lightbox-close{
  position:absolute;top:24px;right:24px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(20,20,20,.65);border:1px solid rgba(255,255,255,.18);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
  backdrop-filter:blur(6px);
}
.reel-lightbox-close:hover{
  background:var(--red);border-color:var(--red);transform:scale(1.08);
}
.reel-lightbox-close svg{width:22px;height:22px}
html.reel-lightbox-open{overflow:hidden}
@media (max-width:820px){
  .reel-lightbox{padding:12px}
  .reel-lightbox-close{top:12px;right:12px;width:36px;height:36px}
  .reel-lightbox-close svg{width:18px;height:18px}
}

/* Hover UI — visible only on hover, centered play button + Watch on YouTube */
.reel-hover-ui{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  opacity:0;transition:opacity .3s ease;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 100%);
}
.reel-card:hover .reel-hover-ui{opacity:1}
.reel-play-btn{
  width:54px;height:54px;border-radius:50%;
  background:rgba(224,48,48,.95);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,background .25s ease;
  box-shadow:0 0 0 8px rgba(224,48,48,.18),0 8px 22px rgba(0,0,0,.4);
}
.reel-play-btn svg{margin-left:2px}
.reel-card:hover .reel-play-btn{transform:scale(1.08);background:#fff;color:var(--red)}
.reel-watch{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-sans);font-weight:600;font-size:11px;
  letter-spacing:1.2px;text-transform:uppercase;color:#fff;
}

/* Number badge (01, 02, ...) — lishchuk pattern */
.reel-num{
  position:absolute;top:8px;left:10px;z-index:3;
  font-family:var(--font-stencil);font-weight:900;
  font-size:18px;color:var(--white);
  text-shadow:0 1px 4px rgba(0,0,0,.7);
  letter-spacing:1px;
}

@media (max-width:820px){
  .slide-showreels{padding:80px 16px 60px}
  .showreels-stage{gap:16px}
  .reels-track{padding:6px 14px;gap:10px}
  .reel-card{height:min(28vh,200px)}
  .reel-play-btn{width:44px;height:44px;box-shadow:0 0 0 6px rgba(224,48,48,.14)}
  .reel-play-btn svg{width:16px;height:16px}
  .reel-watch{font-size:10px}
}

/* ===== Contact slide ===== */
.slide-contact{justify-content:center;align-items:center;text-align:center;padding:80px}
.contact-eyebrow{
  font-family:var(--font-sans);font-size:11px;letter-spacing:4px;
  text-transform:uppercase;color:var(--red);margin-bottom:24px;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.contact-eyebrow::before,.contact-eyebrow::after{content:"";width:48px;height:1px;background:var(--red)}
.contact-title{
  font-family:var(--font-stencil);font-weight:900;
  font-size:clamp(64px,10vw,160px);line-height:.85;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:48px;
}
.contact-title em{font-style:normal;color:var(--red)}
.contact-buttons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 38px;font-family:var(--font-sans);
  font-size:12px;letter-spacing:3px;text-transform:uppercase;
  font-weight:600;border:2px solid;cursor:pointer;transition:all .3s;
}
.btn-red{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-red:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--white);border-color:var(--white)}
.btn-outline:hover{background:var(--white);color:var(--black)}
.contact-meta{margin-top:48px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gray-light)}
.contact-meta strong{color:var(--white);font-weight:500}

/* ===== Slide enter animation ===== */
.slide.is-active .gallery-title,
.slide.is-active .hero-title,
.slide.is-active .portfolio-mega,
.slide.is-active .category-title,
.slide.is-active .contact-title{
  animation:titleIn .8s cubic-bezier(.2,.8,.2,1) both;
}
.slide.is-active .ph,
.slide.is-active .camera-frame{
  animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) both;
}
.slide.is-active .ph:nth-child(2){animation-delay:.05s}
.slide.is-active .ph:nth-child(3){animation-delay:.1s}
.slide.is-active .ph:nth-child(4){animation-delay:.15s}
.slide.is-active .ph:nth-child(5){animation-delay:.2s}
.slide.is-active .ph:nth-child(6){animation-delay:.25s}
.slide.is-active .ph:nth-child(7){animation-delay:.3s}
.slide.is-active .ph:nth-child(8){animation-delay:.35s}
@keyframes titleIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ==================================================
   Standalone page layout (portfolio/[category])
   Used when user lands directly on a category page.
   No slide shell — vertical scroll, deep content.
   ================================================== */
.page{min-height:100vh;min-height:100dvh;padding:120px 32px 80px}
.page-inner{max-width:1320px;margin:0 auto}
.page-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--gray);margin-bottom:32px;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .3s,border-color .3s;
}
.page-back:hover{color:var(--white);border-color:var(--gray)}
.page-eyebrow{
  font-family:var(--font-sans);font-size:11px;letter-spacing:4px;
  text-transform:uppercase;color:var(--red);margin-bottom:14px;
  display:flex;align-items:center;gap:14px;
}
.page-eyebrow::before{content:"";width:32px;height:1px;background:var(--red)}
.page-title{
  font-family:var(--font-stencil);font-weight:900;
  font-size:clamp(48px,7vw,108px);line-height:.9;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:24px;
}
.page-title em{font-style:normal;color:var(--red)}
.page-summary{
  max-width:680px;color:var(--gray-light);font-size:16px;line-height:1.7;
  margin-bottom:64px;
}
/* Deep-page photo grid — masonry columns, photos shown at natural aspect (no crop). */
.page-grid{
  column-count:3;
  column-gap:14px;
  margin-bottom:80px;
}
@media (max-width:1100px){.page-grid{column-count:2}}
@media (max-width:640px){.page-grid{column-count:1}}
.page-grid .ph{
  break-inside:avoid;
  margin:0 0 14px;
  position:relative;overflow:hidden;
  background:var(--dark2);
  display:block;
}
.page-grid .ph img{
  display:block;width:100%;height:auto;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.page-grid .ph:hover img{transform:scale(1.03)}
.page-grid .ph .caption{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-family:var(--font-stencil);font-weight:700;font-size:13px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--white);
  background:rgba(10,10,10,.7);padding:5px 10px;
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;
}
.page-grid .ph:hover .caption{opacity:1;transform:translateY(0)}

.page-related{
  border-top:1px solid var(--dark3);padding-top:48px;margin-top:48px;
}
.related-title{
  font-family:var(--font-stencil);font-weight:700;
  font-size:24px;text-transform:uppercase;letter-spacing:1px;margin-bottom:24px;
}
.related-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
}
.related-item{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--dark2);
}
.related-item img{
  width:100%;height:100%;object-fit:cover;
  /* Keep heads visible — heroes are often portrait shots framed top-center */
  object-position:center 25%;
  transition:transform .8s ease,filter .4s;
}
.related-item:hover img{transform:scale(1.04);filter:brightness(.7)}
.related-item .label{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;z-index:2;
  font-family:var(--font-stencil);font-weight:700;font-size:18px;
  letter-spacing:1px;text-transform:uppercase;color:var(--white);
  background:linear-gradient(180deg,transparent 40%,rgba(10,10,10,.85) 100%);
}

/* Related slots — CTA placeholders that fill empty grid space (matches Gallery slots) */
.related-slot{
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--white);
  border:1px dashed rgba(255,255,255,.20);
  background:linear-gradient(160deg,rgba(40,40,40,.55),rgba(20,20,20,.85));
  transition:border-color .25s ease,background .25s ease,transform .35s ease;
}
.related-slot:hover{
  border-color:var(--red);
  transform:translateY(-3px);
}
.related-slot-inner{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px;text-align:center;max-width:240px;
}
.related-slot-text{
  font-family:var(--font-stencil);font-weight:900;
  font-size:14px;line-height:1.3;
  letter-spacing:.5px;text-transform:uppercase;
}
.related-slot-cta{
  font-family:var(--font-sans);font-weight:600;
  font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--red);
  display:inline-flex;align-items:center;gap:6px;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.related-slot-cta em{font-style:normal;transition:transform .25s ease}
.related-slot:hover .related-slot-cta em{transform:translateX(4px)}

/* Instagram variant — IG signature gradient */
.related-slot-ig{
  background:linear-gradient(135deg,#405DE6 0%,#5851DB 18%,#833AB4 35%,#C13584 52%,#E1306C 70%,#FD1D1D 84%,#F77737 100%);
  border:1px solid rgba(255,255,255,.25);
}
.related-slot-ig:hover{
  background:linear-gradient(135deg,#FD1D1D 0%,#E1306C 25%,#C13584 50%,#833AB4 75%,#405DE6 100%);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 12px 30px rgba(225,48,108,.40);
}
.related-slot-ig .related-slot-icon{
  width:32px;height:32px;color:#fff;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.related-slot-ig .related-slot-text{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.related-slot-ig .related-slot-cta{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.7);
}

.page-cta{
  margin-top:80px;padding:64px 32px;text-align:center;
  background:var(--dark);border:1px solid var(--dark3);
}
.page-cta h3{
  font-family:var(--font-stencil);font-weight:900;
  font-size:clamp(36px,5vw,64px);line-height:1;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:32px;
}
.page-cta h3 em{font-style:normal;color:var(--red)}

/* ===== Mobile ===== */
@media (max-width:820px){
  /* Header overlays — tighter on phones */
  .author{top:16px;left:16px;font-size:10px}
  .author strong{font-size:11px}
  .author span{font-size:9px}
  .locale-switch{top:16px;right:16px;gap:8px;font-size:10px}
  .socials{bottom:16px;left:16px;gap:12px;font-size:10px}
  .counter{bottom:16px;right:16px;font-size:11px}
  .made-by{display:none}

  /* Slide-shell padding tighter — phones have ≤ 700px height for content */
  .slide{padding:64px 14px 56px}

  /* Hero — single column, camera below text */
  .slide-hero{padding:64px 14px 56px}
  .hero-grid{grid-template-columns:1fr;gap:24px;align-items:flex-start}
  .hero-tagline{font-size:10px;letter-spacing:3px;margin-bottom:18px}
  .hero-tagline::before{width:24px}
  .hero-title{font-size:clamp(48px,13vw,76px);line-height:.95}
  .hero-camera{display:flex;width:100%;justify-content:center;margin-top:0}
  .camera-frame{max-width:100%}
  .hero-meta{margin-top:18px;gap:20px;flex-wrap:wrap}
  .hero-meta strong{font-size:16px}
  .lcd-arrow{width:26px;height:26px}

  /* Gallery scatter mobile (column-count handled by separate media query above) */
  .gallery-title{font-size:clamp(44px,14vw,88px);letter-spacing:0}
  .gallery-sub{font-size:10px;letter-spacing:3px}

  /* Portfolio Intro — stacked column on mobile, no orphans */
  .slide-portfolio-intro{padding:64px 18px}
  .portfolio-overline{font-size:var(--m-eyebrow);letter-spacing:0.18em;margin-bottom:14px;color:var(--m-fg-dim)}
  .portfolio-mega{font-size:var(--m-mega);line-height:.95;letter-spacing:-0.01em}
  .portfolio-list{
    flex-direction:column;align-items:center;gap:14px;margin-top:24px;
    font-size:14px;letter-spacing:0.06em;
  }
  .portfolio-list a:not(:last-child)::after{display:none}

  /* Category slide — edge-to-edge photos on phones, head/foot keep their own padding */
  .category-scroll{padding:64px 0 60px}
  .category-head{padding:0 14px;margin-bottom:18px}
  .category-foot{padding:0 14px;margin-top:18px}
  /* Category preview — 2 cols on tablets, 1 col on phones (≤600px) for big photos */
  .category-grid{grid-template-columns:repeat(2,1fr);gap:2px}
  .category-grid.cols-4,.category-grid.cols-2{grid-template-columns:repeat(2,1fr)}
  @media (max-width:600px){
    .category-grid,.category-grid.cols-4,.category-grid.cols-2{grid-template-columns:1fr;gap:2px}
    .category-grid .ph{aspect-ratio:3/2}
    [data-slide="cat-corporate"] .category-grid .ph{aspect-ratio:4/5}
  }
  .category-eyebrow{font-size:10px;letter-spacing:3px;margin-bottom:10px}
  .category-eyebrow::before{width:20px}
  .category-title{font-size:clamp(40px,11vw,68px)}
  .category-summary{font-size:12px;line-height:1.55}
  .category-cta{font-size:10px;letter-spacing:2px}

  /* Contact — title was clamp(56,14,90) which can overflow with "GET IN TOUCH" */
  .contact-title{font-size:clamp(44px,12vw,80px);line-height:.92}
  .contact-eyebrow{font-size:10px;letter-spacing:3px;margin-bottom:18px}
  .contact-eyebrow::before,.contact-eyebrow::after{width:36px}
  .contact-buttons{gap:10px}
  .contact-buttons .btn{padding:14px 24px;font-size:11px;letter-spacing:2px;flex:1 1 auto;text-align:center;justify-content:center;min-width:140px}
  .contact-meta{font-size:10px;letter-spacing:1.5px;margin-top:32px}

  /* Deep-page (standalone /portfolio/[cat]/) */
  .page{padding:80px 16px 56px}
  .page-eyebrow{font-size:10px;letter-spacing:3px}
  .page-title{font-size:clamp(40px,11vw,72px);line-height:.92}
  .page-summary{font-size:14px;line-height:1.6;margin-bottom:48px}
  .related-title{font-size:18px}

  /* Showreels — tighter title, smaller TV, reels row stays */
  .slide-showreels{padding:80px 14px 50px}
  .showreels-title{font-size:clamp(38px,10vw,72px);line-height:.92}
  .showreels-stage{gap:14px}
  .tv-frame{height:min(38vh,300px)}
  .reels-track{padding:6px 12px;gap:10px}
  .reel-card{height:min(28vh,220px)}
  .reel-card .reel-num{font-size:24px;top:8px;left:10px}
  .reel-meta{padding:10px}
  .reel-meta-label{font-size:10px;letter-spacing:1px}

  /* Reels carousel: enable horizontal swipe on mobile */
  .reels-track-wrap{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory}
  .reels-track-wrap::-webkit-scrollbar{display:none}
  .reels-track{justify-content:flex-start;width:max-content;padding:6px 14px}
  .reel-card{scroll-snap-align:start}
}
@media (max-width:480px){
  .hero-meta{flex-direction:row;gap:12px}
  .hero-meta div{flex:1 1 0;min-width:0}
  .hero-meta strong{font-size:14px}
  .hero-meta div{font-size:9px;letter-spacing:1.5px;padding-top:10px}
  .hero-meta div::before{width:18px}

  .made-by{display:none}

  /* Camera buttons sized smaller on mini-phones */
  .cam-btn{display:none}  /* hide tooltips/buttons since they're tiny anyway */

  /* Contact buttons stack instead of row */
  .contact-buttons{flex-direction:column}
  .contact-buttons .btn{width:100%;flex:0 0 auto}

  /* Reels lightbox close button further from edge */
  .reel-lightbox-close{top:8px;right:8px;width:34px;height:34px}
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE REDESIGN 2026-05-04 · slide-carousel mode (kept) + visual polish
   Scope: ≤820px. Desktop is NOT touched.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  :root{
    --m-pad-x: clamp(16px, 4.5vw, 24px);
    --m-pad-top: clamp(56px, 14vw, 88px);
    --m-pad-bot: clamp(72px, 18vw, 112px);
    --m-stack-xs: 8px;
    --m-stack-s: 14px;
    --m-stack-m: 24px;
    --m-stack-l: 48px;

    --m-mega:    clamp(56px, 16vw, 96px);
    --m-h1:      clamp(40px, 11vw, 64px);
    --m-eyebrow: 12px;
    --m-body:    16px;
    --m-caption: 13px;
    --m-micro:   11px;

    --m-fg-dim:  rgba(255,255,255,0.62);
    --m-fg-mute: rgba(255,255,255,0.40);
    --m-line:    rgba(255,255,255,0.12);
    --m-surface: #141414;
    --m-accent:  #e63946;

    --m-dur:     280ms;
    --m-ease:    cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* — Hide redundant overlay UI on mobile (keep nav-btn + counter for slide-mode) — */
  .author { display:none !important; }
  .made-by { display:none !important; }
  /* socials kept on hero/contact via natural slide content; hide global fixed bar */
  .socials { display:none !important; }

  /* — Locale switcher: floating pill top-right with backdrop blur — */
  .locale-switch{
    position:fixed; top:16px; right:16px; left:auto;
    z-index:60;
    display:inline-flex; gap:6px;
    padding:8px 12px;
    background: rgba(20,20,20,0.72);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border:1px solid var(--m-line);
    border-radius:999px;
    font-size:11px; letter-spacing:0.12em;
    /* GPU layer to dodge iframe transform repaints */
    transform: translateZ(0);
    isolation: isolate;
  }
  .locale-switch a{
    min-width:28px; min-height:28px;
    display:inline-flex; align-items:center; justify-content:center;
    color: var(--m-fg-mute);
    text-decoration:none;
    border-radius:999px;
    transition: color var(--m-dur) var(--m-ease);
  }
  .locale-switch a[aria-current="true"]{ color:#fff; }
  .locale-switch a:active{ color:var(--m-accent); }

  /* — SLIDE 1 — Hero: camera top, eyebrow, title, chips — */
  .slide-hero{
    padding: var(--m-pad-top) var(--m-pad-x) var(--m-pad-bot);
    justify-content:center; gap:0;
  }
  .hero-grid{
    grid-template-columns:1fr; gap: var(--m-stack-l);
    align-items:start;
  }
  .hero-titles{ order:0; text-align:left; }
  .hero-camera{
    order:1; width:100%; max-width:100%; margin-top:0;
    justify-content:center;
  }
  .camera-frame{
    max-width:100%;
    filter: drop-shadow(0 16px 36px rgba(0,0,0,.55));
  }
  .hero-tagline{
    font-family: var(--font-sans); font-weight:500;
    font-size: var(--m-eyebrow); letter-spacing:0.18em;
    color: var(--m-fg-dim); margin-bottom: var(--m-stack-s);
    display:flex; align-items:center; gap:10px;
  }
  .hero-tagline::before{ width:18px; background:var(--m-accent); }
  .hero-title{
    font-size: var(--m-mega); line-height:.95; letter-spacing:-0.01em;
    margin:0;
  }
  /* Stats as 3 chips — wrap naturally, no orphan words */
  .hero-meta{
    margin-top: var(--m-stack-m);
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .hero-meta div{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 12px; padding-top:8px;
    border:1px solid var(--m-line); border-radius:999px;
    background: var(--m-surface);
    font-family: var(--font-sans); font-weight:500;
    font-size: var(--m-caption); letter-spacing:0.04em;
    text-transform:none; color: var(--m-fg-dim);
    flex: 0 1 auto; min-width:0;
  }
  .hero-meta div::before{ display:none; }
  .hero-meta strong{
    font-family: var(--font-sans); font-weight:700;
    font-size: var(--m-caption); letter-spacing:0;
    color: #fff; margin:0; line-height:1; display:inline;
  }

  /* — SLIDE 2 — Gallery: title clean, photos edge-to-edge — */
  .gallery-head{
    padding: 0 var(--m-pad-x);
    margin-bottom: var(--m-stack-m);
  }
  .gallery-title{ font-size: var(--m-mega); line-height:.95; letter-spacing:-0.01em; }
  .gallery-sub{
    margin-top: 6px;
    font-size: var(--m-caption); letter-spacing:0.08em;
    color: var(--m-fg-dim); text-transform:none;
  }
  .gallery-sub::before{ width:18px; background:var(--m-accent); }
  .gallery-scatter{ column-gap:0; }
  .gallery-scatter .ph{ margin-bottom:2px; border-radius:0; }
  @media (max-width:600px){
    .gallery-scatter{ column-count:1; }
    .gallery-scatter .ph{ margin-bottom:0; }
  }

  /* — SLIDE 3 — Portfolio Intro stays in horizontal carousel — */

  /* — SLIDES 4-6 — Categories: photos in natural ratio, footer sits at end — */
  .category-head{ padding: 0 var(--m-pad-x); margin-bottom: var(--m-stack-m); }
  .category-foot{ padding: var(--m-stack-m) var(--m-pad-x) 0; }
  .category-eyebrow{ font-size: var(--m-eyebrow); letter-spacing:0.18em; color: var(--m-fg-dim); margin-bottom:10px; }
  .category-eyebrow::before{ width:18px; background:var(--m-accent); }
  .category-title{ font-size: var(--m-mega); line-height:.95; letter-spacing:-0.01em; }
  .category-summary{ font-size: var(--m-caption); color: var(--m-fg-dim); max-width:none; line-height:1.55; }
  .category-cta{
    font-size: var(--m-eyebrow); letter-spacing:0.16em;
    min-height:44px; display:inline-flex; align-items:center;
  }
  .category-grid{ grid-template-columns: repeat(2,1fr); gap:2px; }
  @media (max-width:600px){
    .category-grid,
    .category-grid.cols-4,
    .category-grid.cols-2{ grid-template-columns:1fr; gap:2px; }
    /* Let images keep natural aspect — much better for mixed content (especially Events) */
    .category-grid .ph{ aspect-ratio:auto; }
    .category-grid .ph img{ height:auto; aspect-ratio:auto; display:block; }
    [data-slide="cat-corporate"] .category-grid .ph{ aspect-ratio:auto; }
  }

  /* — SLIDE 7 — Showreels: TV bigger, reels smaller (4 fit), kill leak — */
  .slide-showreels{
    padding: var(--m-pad-top) 0 var(--m-pad-bot);
  }
  .showreels-title{
    font-size: var(--m-mega); line-height:.95; letter-spacing:-0.01em;
    padding: 0 var(--m-pad-x); margin-bottom: var(--m-stack-m);
  }
  .showreels-stage{ gap: var(--m-stack-m); }
  .tv-frame{ height: min(40vh, 320px); margin: 0 auto; max-width: 100%; }
  .reel-card{ height: min(22vh, 180px); }
  .reels-track{ padding: 6px 16px; gap:10px; justify-content:flex-start; width:max-content; }
  .reels-track-wrap{ overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x mandatory; }
  .reels-track-wrap::-webkit-scrollbar{ display:none; }
  .reel-card{ scroll-snap-align:start; }
  /* KILL the hover-only "vibe" overlay text leaking on mobile */
  .reel-vibe{ opacity:0 !important; }
  .reel-meta{ opacity:1 !important; transform:translateY(0) !important; padding:10px; }
  .reel-meta-label{ font-size: var(--m-eyebrow); letter-spacing:0.1em; }
  .reel-card .reel-num{ font-size:24px; top:8px; left:10px; }

  /* — SLIDE 8 — Contact: top-aligned, simpler meta, full-width CTAs — */
  .slide-contact{
    padding: var(--m-pad-top) var(--m-pad-x) var(--m-pad-bot);
    justify-content:flex-start; gap:0;
  }
  .contact-eyebrow{
    font-size: var(--m-eyebrow); letter-spacing:0.18em;
    color: var(--m-fg-dim); margin-bottom: var(--m-stack-s);
  }
  .contact-eyebrow::before, .contact-eyebrow::after{ width:18px; background:var(--m-accent); }
  .contact-title{
    font-size: var(--m-mega); line-height:.95; letter-spacing:-0.01em;
    margin-bottom: var(--m-stack-l);
  }
  .contact-buttons{
    flex-direction:column; gap:10px; width:100%;
  }
  .contact-buttons .btn{
    width:100%; min-height:56px;
    padding:18px 24px;
    font-size:14px; letter-spacing:0.04em;
    border-radius:12px;
    justify-content:center; flex:0 0 auto;
  }
  .contact-meta{
    margin-top: var(--m-stack-l);
    font-size: var(--m-caption); letter-spacing:0.04em;
    color: var(--m-fg-dim); text-transform:none;
    text-align:left;
  }
  /* Locale chip top-right already shows languages — hide redundant list on mobile */
  .contact-meta-langs{ display:none; }

  /* — Touch + tap responsiveness — */
  body{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  a, button, .btn{ touch-action: manipulation; }

  /* — Safe-area awareness — applies to every slide top/bottom — */
  .slide{
    padding-top: max(var(--m-pad-top), calc(56px + env(safe-area-inset-top)));
    padding-bottom: max(var(--m-pad-bot), calc(72px + env(safe-area-inset-bottom)));
  }
}