/* ================================================================
   BILL MINHYUK KIM — DIGITAL MEDIA PORTFOLIO
   Deep dark cinematic theme · Mobile-first responsive
   ================================================================ */

/* ── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  --bg:       #050505;
  --bg2:      #0d0d0d;
  --bg3:      #141414;
  --border:   #1f1f1f;
  --border2:  #2c2c2c;
  --gray-dk:  #3a3a3a;
  --gray:     #6a6a6a;
  --gray-lt:  #aaaaaa;
  --white:    #e8e8e8;
  --white-p:  #ffffff;
  --gold:     #6ab0d4;
  --gold-dk:  #4a90b8;
  --accent-soft: rgba(106,176,212,0.14);
  --panel: rgba(14,14,14,0.72);

  --ff-sans:  'Noto Sans', 'Noto Sans KR', sans-serif;
  --ff-serif: 'Noto Sans', 'Noto Sans KR', sans-serif;
  --ff-noto:  'Noto Sans', 'Noto Sans KR', sans-serif;
  --ff-ko:    'Noto Sans KR', 'Noto Sans', sans-serif;

  --nav-h:    76px;
  --ease:     cubic-bezier(.4,0,.2,1);
  --t:        0.35s;
  --r:        4px;
}

/* ── BASE ────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  background: var(--bg);
  min-height: 100%;
}

/* Portfolio gallery surface polish — preserves every responsive grid and thumbnail size. */
#cinematography,
#photography,
#ai-visuals,
#behind-scene {
  position: relative;
  isolation: isolate;
}

#cinematography::before,
#photography::before,
#ai-visuals::before,
#behind-scene::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 2.4vw, 34px);
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.018), rgba(255,255,255,.004));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 28px 90px rgba(0,0,0,.18);
}

#cinematography .section-header,
#photography .section-header,
#ai-visuals .section-header,
#behind-scene .section-header {
  margin-bottom: clamp(28px, 3vw, 42px);
}

#cinematography .section-title,
#photography .section-title,
#ai-visuals .section-title,
#behind-scene .section-title {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  padding: 0 clamp(18px, 2vw, 28px);
  text-shadow: 0 12px 38px rgba(0,0,0,.5);
}

#cinematography .section-title::after,
#photography .section-title::after,
#ai-visuals .section-title::after,
#behind-scene .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.65em;
  width: clamp(54px, 7vw, 96px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(106,176,212,.76), transparent);
}

#cinematography .cat-tab,
#photography .cat-tab,
#ai-visuals .cat-tab,
#behind-scene .cat-tab {
  border-radius: 999px;
  border-color: rgba(255,255,255,.1);
  background: rgba(8,8,8,.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

#cinematography .cat-tab.active,
#photography .cat-tab.active,
#ai-visuals .cat-tab.active,
#behind-scene .cat-tab.active {
  color: #eaf7fc;
  border-color: rgba(106,176,212,.52);
  background: linear-gradient(180deg, rgba(106,176,212,.2), rgba(106,176,212,.08));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.2);
}

#cinematography .video-card,
#behind-scene .video-card,
#behind-scene .photo-card,
#photography .photo-card,
#ai-visuals .ai-card {
  border-color: rgba(255,255,255,.12);
  border-radius: 9px;
  background: #090909;
  box-shadow: 0 14px 38px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.045);
}

#cinematography .video-card::after,
#behind-scene .video-card::after,
#behind-scene .photo-card::after,
#photography .photo-card::after,
#ai-visuals .ai-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 -42px 56px rgba(0,0,0,.08);
}

#cinematography .play-btn,
#behind-scene .play-btn {
  width: 48px;
  height: 48px;
  border-color: rgba(255,255,255,.56);
  background: rgba(5,5,5,.58);
  box-shadow: 0 10px 30px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.12);
}

@media (hover:hover) and (pointer:fine) {
  #cinematography .video-card:hover,
  #behind-scene .video-card:hover,
  #behind-scene .photo-card:hover,
  #photography .photo-card:hover,
  #ai-visuals .ai-card:hover {
    border-color: rgba(106,176,212,.4);
    box-shadow: 0 26px 68px rgba(0,0,0,.4), 0 0 0 1px rgba(106,176,212,.055);
  }
}

@media (max-width:768px) {
  #cinematography::before,
  #photography::before,
  #ai-visuals::before,
  #behind-scene::before { inset: 10px; border-radius: 11px; }
  #cinematography .play-btn,
  #behind-scene .play-btn { width: 42px; height: 42px; }
}

body {
  font-family: var(--ff-sans);
  background:
    radial-gradient(circle at 18% 0%, rgba(106,176,212,0.08), transparent 30%),
    linear-gradient(180deg, #050505 0%, #090909 42%, #050505 100%);
  background-color: var(--bg);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100svh;
}

/* Prevent the static fallback menu from flashing before saved navigation loads. */
html:not(.nav-ready) #nav-links { visibility: hidden; }
html:not(.chrome-ready) #main-nav .nav-logo,
html:not(.chrome-ready) .hero-intro {
  visibility: hidden !important;
  opacity: 0 !important;
}
html.chrome-ready #main-nav .nav-logo,
html.chrome-ready .hero-intro {
  opacity: 1;
  transition: opacity 0.12s ease;
}

/* Sections — fully transparent so bokeh shows through */
.section-showreel,
.portfolio-section,
.portfolio-section.alt-bg,
.section-contact {
  background: transparent !important;
}

/* ── BOKEH LAYER ─────────────────────────────────────────────── */
#bokeh-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100svh;
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}

@media (max-width: 768px) {
  #bokeh-canvas {
    height: 100lvh;
    min-height: 100lvh;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1600px) {
  #bokeh-canvas .bokeh {
    animation: none !important;
    opacity: var(--bk-op) !important;
    transform: translate3d(0,0,0) scale(1) !important;
    will-change: auto !important;
  }
}

.bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(12px);
  opacity: 0;
  animation: bokeh-float linear infinite;
}

.bokeh.bokeh-lite {
  animation-name: bokeh-float-lite;
}

.bokeh.bokeh-static {
  animation: none;
  opacity: var(--bk-op);
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 768px) {
  #bokeh-canvas .bokeh {
    animation: none !important;
    opacity: var(--bk-op) !important;
    transform: translate3d(0,0,0) scale(1) !important;
    will-change: auto !important;
  }
}

.bokeh.bokeh-twinkle {
  animation-name: bokeh-twinkle;
  animation-timing-function: ease-in-out;
  transform: translate3d(0, 0, 0) scale(1);
}

.bokeh.bokeh-twinkle-strong {
  animation-name: bokeh-ipad-gentle;
  animation-timing-function: ease-in-out;
  will-change: opacity, transform;
}

.bokeh.bokeh-desktop-twinkle {
  animation-name: bokeh-desktop-float-twinkle;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  will-change: opacity, transform;
}

@keyframes bokeh-twinkle {
  0%, 100% { opacity: calc(var(--bk-op) * 0.55); }
  22%      { opacity: var(--bk-op); }
  38%      { opacity: calc(var(--bk-op) * 0.62); }
  58%      { opacity: var(--bk-op); }
  76%      { opacity: calc(var(--bk-op) * 0.7); }
}

@keyframes bokeh-twinkle-strong {
  0%, 100% { opacity: calc(var(--bk-op) * 0.16); }
  18%      { opacity: calc(var(--bk-op) * 0.42); }
  36%      { opacity: var(--bk-op); }
  52%      { opacity: calc(var(--bk-op) * 0.28); }
  72%      { opacity: calc(var(--bk-op) * 0.9); }
  86%      { opacity: calc(var(--bk-op) * 0.34); }
}

@keyframes bokeh-ipad-gentle {
  0%, 100% {
    opacity: calc(var(--bk-op) * 0.28);
    transform: translate3d(0, 0, 0) scale(0.96);
  }
  18% {
    opacity: calc(var(--bk-op) * 0.78);
    transform: translate3d(calc(var(--sway-x) * 0.06), -3px, 0) scale(1.01);
  }
  36% {
    opacity: calc(var(--bk-op) * 0.42);
    transform: translate3d(calc(var(--sway-x2) * 0.08), -6px, 0) scale(0.98);
  }
  54% {
    opacity: var(--bk-op);
    transform: translate3d(calc(var(--sway-x) * -0.1), -10px, 0) scale(1.045);
  }
  72% {
    opacity: calc(var(--bk-op) * 0.5);
    transform: translate3d(calc(var(--sway-x2) * 0.06), -13px, 0) scale(0.99);
  }
  88% {
    opacity: calc(var(--bk-op) * 0.86);
    transform: translate3d(calc(var(--sway-x) * -0.04), -15px, 0) scale(1.025);
  }
}

@keyframes bokeh-desktop-float-twinkle {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  7% {
    opacity: calc(var(--bk-op) * 0.42);
    transform: translate(calc(var(--sway-x) * 0.15), -20px) rotate(calc(var(--rot) * 0.08)) scale(1.015);
  }
  16% {
    opacity: var(--bk-op);
    transform: translate(calc(var(--sway-x) * 0.45), -52px) rotate(calc(var(--rot) * 0.2)) scale(1.04);
  }
  34% {
    opacity: calc(var(--bk-op) * 0.5);
    transform: translate(var(--sway-x), -112px) rotate(calc(var(--rot) * 0.45)) scale(1.08);
  }
  52% {
    opacity: var(--bk-op);
    transform: translate(var(--sway-x2), -178px) rotate(calc(var(--rot) * 0.7)) scale(1.1);
  }
  70% {
    opacity: calc(var(--bk-op) * 0.46);
    transform: translate(calc(var(--sway-x) * -0.5), -244px) rotate(var(--rot)) scale(1.05);
  }
  86% {
    opacity: var(--bk-op);
    transform: translate(calc(var(--sway-x2) * 0.25), -300px) rotate(calc(var(--rot) * 1.1)) scale(0.94);
  }
  94% {
    opacity: calc(var(--bk-op) * 0.24);
    transform: translate(calc(var(--sway-x2) * 0.28), -326px) rotate(calc(var(--rot) * 1.16)) scale(0.89);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--sway-x2) * 0.3), -340px) rotate(calc(var(--rot) * 1.2)) scale(0.85);
  }
}

@keyframes bokeh-float {
  0%   { transform: translate(0, 0)                          rotate(0deg)         scale(1);    opacity: 0; }
  8%   { opacity: var(--bk-op); }
  25%  { transform: translate(var(--sway-x), -80px)          rotate(calc(var(--rot) * 0.3))   scale(1.05); }
  50%  { transform: translate(var(--sway-x2), -170px)        rotate(calc(var(--rot) * 0.7))   scale(1.1);  opacity: var(--bk-op); }
  75%  { transform: translate(calc(var(--sway-x) * -0.5), -250px) rotate(var(--rot))          scale(1.05); }
  92%  { opacity: var(--bk-op); }
  100% { transform: translate(calc(var(--sway-x2) * 0.3), -340px) rotate(calc(var(--rot) * 1.2)) scale(0.85); opacity: 0; }
}

@keyframes bokeh-float-lite {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; }
  14%  { opacity: calc(var(--bk-op) * 0.82); }
  50%  { transform: translate(var(--sway-x), -72px) rotate(calc(var(--rot) * 0.5)) scale(1.04); opacity: calc(var(--bk-op) * 0.82); }
  86%  { opacity: calc(var(--bk-op) * 0.72); }
  100% { transform: translate(var(--sway-x2), -132px) rotate(var(--rot)) scale(0.94); opacity: 0; }
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-dk); border-radius: 2px; }

/* ── LABEL TAG ───────────────────────────────────────────────── */
.label-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.45em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ================================================================
   NAVIGATION
   ================================================================ */
/* Ensure all main content sits above bokeh (z-index: 0) */
body > *:not(#bokeh-canvas):not(.modal-overlay):not(#main-nav) {
  position: relative;
  z-index: 1;
}

#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--nav-h);
  background: rgba(5,5,5,0.90);
  transition: background var(--t) var(--ease), border-color var(--t);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#main-nav.scrolled {
  background: rgba(5,5,5,0.90);
  border-bottom-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-inner {
  max-width: 1540px;
  margin: 0 auto;
  height: 100%;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  border-radius: 4px;
}

.logo-name {
  font-family: var(--ff-noto);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--white-p);
  white-space: nowrap;
}

.logo-rule {
  display: block;
  width: 1px;
  height: 26px;
  background: var(--border2);
  flex-shrink: 0;
}

.logo-sub {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  color: var(--gold);
  white-space: nowrap;
}

/* Nav links */
.nav-links {
  display: flex;
  list-style: none;
  gap: clamp(16px, 2vw, 30px);
  align-items: center;
}

.nav-link {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gray-lt);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  transition: color var(--t);
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width var(--t) var(--ease);
}

.nav-link:hover, .nav-link.active { color: var(--white-p); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
}

.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: var(--t);
  transform-origin: center;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ================================================================
   SHOWREEL SECTION
   ================================================================ */
.section-showreel {
  background: var(--bg);
  padding-top: var(--nav-h);
  padding-bottom: 72px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
}

.hero-intro {
  width: min(1040px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 46px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-kicker {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.hero-title {
  font-family: var(--ff-noto);
  font-size: clamp(2rem, 5.2vw, 4.9rem);
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--white-p);
  max-width: 1100px;
  margin: 0 auto 14px;
  text-wrap: balance;
}

.hero-role {
  color: rgba(232,232,232,0.62);
  font-size: clamp(0.64rem, 0.86vw, 0.76rem);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.65;
  max-width: 920px;
  margin: 0 auto 14px;
}

.hero-summary {
  color: rgba(232,232,232,0.76);
  font-size: clamp(0.84rem, 1.12vw, 1rem);
  font-weight: 300;
  line-height: 1.8;
  max-width: 760px;
  margin: 0 auto 20px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hero-actions {
  gap: 12px;
  margin-bottom: 18px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--border2);
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform var(--t), border-color var(--t), background var(--t), color var(--t);
}

.hero-btn:hover {
  transform: translateY(-2px);
}

.hero-btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #050505;
}

.hero-btn-secondary {
  color: var(--white);
  background: rgba(255,255,255,0.03);
}

.hero-btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(106,176,212,0.08);
}

/* ── Showreel label row ──────────────────────────────────────── */
.showreel-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 60px 20px;
}

.showreel-label-row .label-tag {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--white-p);
  line-height: 1;
}

.showreel-hint {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: var(--gray);
  text-transform: uppercase;
}

/* ── Vimeo player ────────────────────────────────────────────── */
.showreel-player {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: 0 28px 90px rgba(0,0,0,0.64);
}

.showreel-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.showreel-player.is-aspect-pending {
  visibility: hidden;
}

/* ================================================================
   PORTFOLIO SECTIONS
   ================================================================ */
.portfolio-section {
  padding: 112px 60px;
}

.portfolio-section.alt-bg {
  background: var(--bg2);
}

.portfolio-section + .portfolio-section {
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Section content max-width wrapper */
.portfolio-section .section-header,
.portfolio-section .video-grid,
.portfolio-section .photo-grid,
.portfolio-section .ai-grid {
  max-width: 1540px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Section header ──────────────────────────────────────────── */
.section-header {
  margin-bottom: 44px;
  text-align: center;
}

.section-title {
  font-family: var(--ff-noto);
  font-size: clamp(1.28rem, 2.1vw, 2.02rem);
  font-weight: 900;
  letter-spacing: 0.095em;
  color: var(--white-p);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 18px;
  display: block;
  align-items: center;
  justify-content: center;
}

.section-title > .section-title-icon {
  display: inline-flex;
}

.section-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--gold);
  font-size: 0.96em;
  line-height: 1;
  margin-right: 0.46em;
  vertical-align: 0;
}

.section-title::after {
  content: none;
  display: none;
}

.section-cert {
  font-size: 0.75rem;
  color: var(--gray);
  font-style: italic;
  letter-spacing: 0.04em;
  max-width: 620px;
  line-height: 1.8;
  margin: 0 auto 4px;
}

.section-hint {
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-top: 10px;
}

/* ================================================================
   CATEGORY TABS
   ================================================================ */
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 42px;
}

.cat-tab {
  font-family: var(--ff-sans);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232,232,232,0.72);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 10px 18px;
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t), transform var(--t);
  white-space: nowrap;
}

.cat-tab:hover {
  color: var(--white-p);
  border-color: rgba(106,176,212,0.38);
  background: rgba(255,255,255,0.07);
  transform: translateY(-1px);
}

.cat-tab.active {
  color: var(--white-p);
  background: rgba(106,176,212,0.14);
  border-color: rgba(106,176,212,0.42);
}

.cat-select {
  display: none;
  width: fit-content;
  min-width: 168px;
  max-width: min(100%, 240px);
  margin: 0 0 28px;
  min-height: 42px;
  padding: 0 38px 0 14px;
  font-family: var(--ff-sans);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: none;
  text-align: left;
  text-align-last: left;
  color: var(--white-p);
  background:
    linear-gradient(45deg, transparent 50%, rgba(232,232,232,0.8) 50%) calc(100% - 18px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, rgba(232,232,232,0.8) 50%, transparent 50%) calc(100% - 13px) 50% / 7px 7px no-repeat,
    rgba(255,255,255,0.055);
  border: 1px solid rgba(106,176,212,0.34);
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
}

.cat-select:focus {
  outline: none;
  border-color: rgba(106,176,212,0.72);
  box-shadow: 0 0 0 3px rgba(106,176,212,0.12);
}

/* BTS category sub-tabs — slightly smaller, less margin, visually nested */
.bts-sub-tabs {
  margin-top: -32px;
  margin-bottom: 36px;
  gap: 6px;
}
.bts-sub-tabs .cat-tab {
  font-size: 0.62rem;
  padding: 8px 13px;
  letter-spacing: 0.14em;
}
.bts-sub-tabs .cat-tab.active {
  color: var(--white-p);
  background: rgba(106,176,212,0.14);
  border-color: rgba(106,176,212,0.42);
}

/* Loading / empty states */
.grid-loading, .empty-state {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--gray);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
}

.showreel-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 2rem;
}

.showreel-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gray);
}
.showreel-empty i { font-size: 3rem; color: var(--border2); }
.showreel-empty p { font-size: 0.85rem; letter-spacing: 0.2em; }

/* ================================================================
   VIDEO GRID
   ================================================================ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.video-card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  background: rgba(20,20,20,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.24);
  isolation: isolate;
}

.video-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(1) saturate(1);
  transition: transform 0.7s var(--ease), filter 0.5s;
}

.video-card:hover .video-card-thumb {
  transform: scale(1.045);
  filter: brightness(0.5) saturate(1.05);
}

.video-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity var(--t);
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.32));
}

.video-card:hover .video-card-overlay { opacity: 1; }

.play-btn {
  width: 60px; height: 60px;
  border: 1.5px solid rgba(255,255,255,0.84);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-p);
  background: rgba(5,5,5,0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 1.2rem;
  padding-left: 4px;
  transition: var(--t);
}

.video-card:hover .play-btn {
  background: var(--gold);
  color: var(--bg);
  transform: scale(1.1);
}

.video-card-label {
  display: none;
}

.video-card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 42px 18px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}

.video-card:hover .video-card-info,
.video-card:focus-visible .video-card-info,
.video-card:focus-within .video-card-info {
  opacity: 1;
  transform: translateY(0);
}

.video-card-info h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white-p);
  margin-bottom: 0;
}

.video-card-meta {
  display: block;
  margin-top: 6px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
}

.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px dashed var(--border2);
  gap: 10px;
}

.video-placeholder i    { font-size: 2rem; color: var(--border2); }
.video-placeholder p    { font-size: 0.80rem; letter-spacing: 0.16em; color: var(--gray-dk); }
.video-placeholder span { font-size: 0.70rem; color: var(--gray-dk); }

/* ================================================================
   PHOTO GRID
   ================================================================ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.photo-card {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  cursor: pointer;
  background: rgba(20,20,20,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.24);
}

.photo-card-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.95) saturate(1);
  transition: transform 0.7s var(--ease), filter 0.5s;
  display: block;
}

.photo-card:hover .photo-card-img {
  transform: none;
  filter: brightness(0.66) saturate(1.06);
}

.photo-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t);
  color: var(--gold);
  font-size: 1.8rem;
}

.photo-card:hover .photo-card-overlay { opacity: 1; }

.photo-placeholder {
  aspect-ratio: 3 / 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px dashed var(--border);
  gap: 8px;
}

.photo-placeholder i    { font-size: 1.8rem; color: var(--border2); }
.photo-placeholder span { font-size: 0.70rem; color: var(--gray-dk); letter-spacing: 0.1em; }

/* ================================================================
   AI ART GRID
   ================================================================ */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.ai-card {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(135deg, rgba(106,176,212,0.14), rgba(255,255,255,0.035)), rgba(12,12,12,0.92);
  cursor: pointer;
  transform: translateY(18px);
  opacity: 0;
  transition: transform .55s var(--ease), opacity .55s var(--ease), border-color var(--t);
}

.ai-card.visible,
.ai-card.reveal.visible { transform: translateY(0); opacity: 1; }
.ai-card:hover { border-color: rgba(106,176,212,0.38); }

.ai-card img,
.ai-card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.42);
  font-size: 2rem;
}

.ai-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.78));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t);
}

.ai-card:hover::after,
.ai-card:focus-visible::after,
.ai-card:focus-within::after { opacity: 1; }

.ai-card-info {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 16px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}

.ai-card:hover .ai-card-info,
.ai-card:focus-visible .ai-card-info,
.ai-card:focus-within .ai-card-info {
  opacity: 1;
  transform: translateY(0);
}

.ai-card-badge {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 9px;
  border: 1px solid rgba(106,176,212,0.4);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(5,5,5,0.42);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ai-card-title {
  color: var(--white-p);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.ai-card-meta {
  color: rgba(232,232,232,0.72);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ================================================================
   CONTACT
   ================================================================ */
.section-contact {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 118px 40px 52px;
  text-align: center;
}

.contact-inner {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  padding: 46px 40px 40px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.36);
}

.contact-photo-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 32px;
  border: 1px solid var(--border2);
  box-shadow: 0 0 0 5px rgba(106,176,212,0.08);
  background: #050505;
  position: relative;
  isolation: isolate;
}

.contact-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.contact-photo-wrap img.loaded {
  opacity: 1;
}

.contact-name {
  font-family: var(--ff-noto);
  font-size: clamp(1.12rem, 1.9vw, 1.86rem);
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.09em;
  color: var(--white-p);
  line-height: 1;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.contact-role {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--gray);
  margin-bottom: 32px;
  text-transform: uppercase;
  line-height: 2;
}

.contact-tagline {
  max-width: 620px;
  margin: 0 auto 40px;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--gray-lt);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-align: justify;
}

.contact-bio {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-bio p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--gray-lt);
  letter-spacing: 0.025em;
  font-weight: 300;
  text-align: justify;
}



.contact-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(52px, 52px));
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: rgba(232,232,232,0.72);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(8,8,8,0.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 12px 34px rgba(0,0,0,0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--t), color var(--t), background var(--t), box-shadow var(--t), transform var(--t);
}

.contact-btn i {
  font-size: 1.14rem;
  line-height: 1;
}

.contact-btn:hover {
  border-color: rgba(106,176,212,0.52);
  color: var(--gold);
  background:
    radial-gradient(circle at 50% 0%, rgba(106,176,212,0.18), transparent 62%),
    rgba(8,8,8,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.11),
    0 16px 42px rgba(0,0,0,0.34),
    0 0 22px rgba(106,176,212,0.1);
  transform: translateY(-2px);
}

.contact-btn:focus-visible {
  outline: 2px solid rgba(106,176,212,0.72);
  outline-offset: 4px;
}

/* ================================================================
   CONTACT FORM
   ================================================================ */
.contact-form {
  max-width: 680px;
  margin: 24px auto 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cf-row {
  display: flex;
  gap: 16px;
}

.cf-row--2 > .cf-field { flex: 1; }

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cf-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--gold);
  text-transform: uppercase;
}

.cf-input {
  font-family: var(--ff-sans);
  font-size: 0.84rem;
  color: var(--white);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 12px 15px;
  width: 100%;
  outline: none;
  transition: border-color var(--t);
  letter-spacing: 0.025em;
}

.cf-input::placeholder {
  color: var(--gray);
  letter-spacing: 0.02em;
}

.cf-input:focus { border-color: var(--gold); }

.cf-textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.7;
}

.cf-submit {
  font-family: var(--ff-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  border: none;
  border-radius: 4px;
  padding: 14px 34px;
  cursor: pointer;
  align-self: center;
  transition: background var(--t), transform 0.15s;
}

.cf-submit:hover { background: var(--gold-dk); }
.cf-submit:active { transform: scale(0.98); }
.cf-submit:disabled { opacity: 0.6; cursor: default; }

.cf-result {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-align: center;
  min-height: 1.4em;
  transition: color var(--t);
}

.cf-result.success { color: #7ecb8f; }
.cf-result.error   { color: #e07070; }

/* Mobile */
@media (max-width: 600px) {
  .cf-row--2 { flex-direction: column; }
  .cf-submit { align-self: stretch; text-align: center; }
  .contact-form { margin-top: 18px; gap: 13px; }
  .cf-row { gap: 13px; }
  .cf-field { gap: 5px; }
  .cf-label { font-size: 0.64rem; letter-spacing: 0.18em; }
  .cf-input { font-size: 0.82rem; padding: 10px 12px; }
  .cf-textarea { min-height: 108px; line-height: 1.5; }
  .cf-submit { padding: 12px 18px; }
}

/* ================================================================
   FOOTER
   ================================================================ */
/* ================================================================
   FOOTER
   ================================================================ */
#main-footer {
  background: linear-gradient(180deg, rgba(7,7,7,0.72), rgba(3,3,3,0.92));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.065);
  padding: clamp(22px, 3vw, 30px) clamp(18px, 4vw, 40px) clamp(16px, 2.4vw, 22px);
  text-align: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 680px);
  margin: 0 auto;
}

/* Brand name */
.footer-brand {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.38em;
  color: var(--white-p);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Gold divider line */
.footer-divider {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(106,176,212,0.78), transparent);
  box-shadow: 0 0 10px rgba(106,176,212,0.09);
  margin-bottom: 16px;
}

/* Credit line */
.footer-credit {
  font-size: 0.65rem;
  letter-spacing: 0.075em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 13px;
}
.footer-credit span {
  color: rgba(255,255,255,0.6);
  font-style: normal;
}
.footer-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.footer-credit p { margin: 0; line-height: 1.65; text-wrap: balance; }
.footer-credit > p {
  width: 100%;
  text-align: center;
}

.footer-site-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px 14px;
}
.footer-link-separator {
  color: rgba(255,255,255,0.3) !important;
}
.footer-site-links a {
  color: rgba(255,255,255,0.48);
  text-decoration: none;
  letter-spacing: 0.065em;
  text-underline-offset: 4px;
  transition: color var(--t), opacity var(--t), text-decoration-color var(--t);
}
.footer-site-links a:hover,
.footer-site-links a:focus-visible { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(106,176,212,0.5); }

/* Copyright */
.footer-copy {
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.56);
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* Admin */
.footer-admin {
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.14) !important;
  text-decoration: none;
  transition: color var(--t);
}
.footer-admin:hover { color: var(--gold) !important; }

/* ── Tablet ≤1024px ── */
@media (max-width: 1024px) {
  #main-footer { padding: 24px 32px 18px; }
  .footer-brand  { font-size: 0.68rem; letter-spacing: 0.32em; }
  .footer-credit  { font-size: 0.62rem; }
}

/* ── Mobile ≤600px ── */
@media (max-width: 600px) {
  html, body { height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
  #main-footer {
    padding: 18px 20px max(10px, env(safe-area-inset-bottom, 0px));
    margin-bottom: 0;
    min-height: 0;
    overflow: visible;
  }
  .footer-brand   { font-size: 0.62rem; letter-spacing: 0.28em; }
  .footer-credit  { font-size: 0.58rem; letter-spacing: 0.055em; margin-bottom: 10px; }
  .footer-copy    { font-size: 0.55rem; letter-spacing: 0.1em; margin-bottom: 8px; }
  .footer-admin   { display: inline-block; margin-bottom: 0; }
}

/* ================================================================
   ABOUT SECTION
   ================================================================ */
.section-about {
  padding: 112px 40px;
  background: transparent;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.about-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: 56px;
  align-items: start;
}

/* ── Left col ── */
.about-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.about-photo-wrap {
  position: relative;
  width: 280px;
  flex-shrink: 0;
}

.about-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 22px 70px rgba(0,0,0,0.42);
  transition: opacity 0.6s;
}

.about-photo-ring { display: none; }

.about-left.reveal .about-photo-wrap,
.about-left.reveal .about-bio-block,
.about-left.reveal .about-bio-block > .label-tag,
.about-left.reveal .about-name,
.about-left.reveal .about-bio,
.about-left.reveal .about-resume-btn {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.about-left.reveal.visible .about-photo-wrap {
  animation: bmk-about-photo-in 0.82s cubic-bezier(.2,.72,.18,1) 0.04s both;
}

.about-left.reveal.visible .about-bio-block {
  animation: bmk-about-panel-in 0.74s cubic-bezier(.2,.72,.18,1) 0.18s both;
}

.about-left.reveal.visible .about-bio-block > .label-tag {
  animation: bmk-about-rise-in 0.62s cubic-bezier(.2,.72,.18,1) 0.34s both;
}

.about-left.reveal.visible .about-name {
  animation: bmk-about-rise-in 0.66s cubic-bezier(.2,.72,.18,1) 0.44s both;
}

.about-left.reveal.visible .about-bio {
  animation: bmk-about-rise-in 0.7s cubic-bezier(.2,.72,.18,1) 0.56s both;
}

.about-left.reveal.visible .about-resume-btn {
  animation: bmk-about-rise-in 0.64s cubic-bezier(.2,.72,.18,1) 0.72s both;
}

@keyframes bmk-about-photo-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.975);
    filter: brightness(0.82) saturate(0.9);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1) saturate(1);
  }
}

@keyframes bmk-about-panel-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bmk-about-rise-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.about-bio-block,
.about-right {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  padding: 28px;
}

.about-name {
  font-family: var(--ff-noto);
  font-size: clamp(1rem, 1.75vw, 1.34rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--white-p);
  margin-bottom: 20px;
}

.name-en {
  display: block;
}

.name-ko {
  display: block;
  margin-top: 0.3em;
  color: rgba(232,232,232,0.82);
  font-family: var(--ff-ko);
  font-size: 0.52em;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: none;
  white-space: nowrap;
}

.about-bio {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
  text-align: left;
}

.about-bio p {
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--gray-lt);
  letter-spacing: 0.02em;
  font-weight: 300;
  text-align: justify;
}

.about-resume-btn {
  font-family: var(--ff-sans);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 4px;
  text-decoration: none;
  transition: background var(--t), color var(--t), transform var(--t);
}
.about-resume-btn:hover {
  background: var(--gold);
  color: #000;
  transform: translateY(-2px);
}
.about-resume-btn i { font-size: 1rem; }

/* ── Resume PDF viewer ── */
.resume-modal-box {
  position: relative;
  width: min(94vw, 1080px);
  height: min(88vh, 940px);
  overflow: hidden;
  background: #101010;
  border: 1px solid var(--border2);
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
.resume-modal-toolbar {
  height: 56px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.resume-external-link {
  margin-left: auto;
  color: var(--gray-lt);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.045);
}
.resume-external-link:hover { color: var(--gold); border-color: rgba(106,176,212,0.42); }
.resume-modal .modal-close {
  position: static;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  margin-left: 4px;
  padding: 0;
  font-size: 1.42rem;
  line-height: 1;
  border-radius: 7px;
}
.resume-pdf-stage {
  height: calc(100% - 56px); min-height: 0; overflow: auto; background: #202020; padding: 16px;
  overscroll-behavior: contain;
}
.resume-pages { display: grid; gap: 16px; width: min(100%, 860px); margin: 0 auto; }
.resume-pages canvas { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.resume-loading { color: var(--gray-lt); font-size: 0.66rem; letter-spacing: 0.16em; }

@media (max-width: 768px) {
  .resume-modal-box { width: calc(100vw - 16px); height: calc(100svh - 76px); max-height: calc(100svh - 76px); }
  .resume-modal-toolbar { height: 58px; padding: 0 10px; gap: 10px; }
  .resume-pdf-stage { height: calc(100% - 58px); padding: 8px; }
  .resume-pages { gap: 10px; }
  .resume-external-link {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.25rem !important;
  }
  .resume-modal .modal-close {
    position: static !important;
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.045) !important;
    font-size: 2rem !important;
  }
}

/* ── Right col — Skills ── */
.about-right { width: 100%; }

.skills-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skill-item {
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  padding: 16px;
}

.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.skill-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-p);
}

.skill-icon {
  width: 1.2em;
  flex: 0 0 1.2em;
  color: var(--gold);
  font-size: 0.92em;
  text-align: center;
  filter: drop-shadow(0 0 10px rgba(106,176,212,0.22));
}

.skill-pct {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  min-width: 36px;
  text-align: right;
}

.skill-track {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.skill-bar {
  height: 100%;
  width: 0%;                          /* starts at 0, animated by JS */
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, #a8d4ec 100%);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* shimmer sweep on fill */
.skill-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: skill-shimmer 2s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes skill-shimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* number count-up */
.skill-pct { transition: color 0.3s; }

.bokah-brand-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  gap: 42px;
  align-items: center;
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  padding: 38px 40px;
  overflow: hidden;
}

.bokah-brand-panel.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.74s ease,
    transform 0.74s cubic-bezier(.2,.72,.18,1),
    border-color var(--t),
    box-shadow var(--t),
    background var(--t);
}

.bokah-brand-panel.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.bokah-brand-panel.reveal .bokah-brand-copy,
.bokah-brand-panel.reveal .bokah-logo-card,
.bokah-brand-panel.reveal .bokah-evolution-arrow {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.bokah-brand-panel.reveal.visible .bokah-brand-copy,
.bokah-brand-panel.reveal.visible .bokah-logo-card,
.bokah-brand-panel.reveal.visible .bokah-evolution-arrow {
  animation: bmk-brand-rise 0.72s cubic-bezier(.2,.72,.18,1) both;
}

.bokah-brand-panel.reveal.visible .bokah-brand-copy { animation-delay: 0.06s; }
.bokah-brand-panel.reveal.visible .bokah-logo-card:not(.bokah-logo-card-featured) { animation-delay: 0.22s; }
.bokah-brand-panel.reveal.visible .bokah-evolution-arrow { animation-delay: 0.56s; }
.bokah-brand-panel.reveal.visible .bokah-logo-card-featured { animation-delay: 0.82s; }

@keyframes bmk-brand-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.bokah-brand-copy {
  position: relative;
  padding-left: 18px;
}

.bokah-brand-copy::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 2px;
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), rgba(106,176,212,0));
}

.bokah-brand-copy h3 {
  margin: 14px 0 18px;
  color: var(--white-p);
  font-family: var(--ff-noto);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.32;
  text-transform: uppercase;
}

.bokah-brand-copy .label-tag {
  color: var(--gold);
  margin-bottom: 0;
  font-family: var(--ff-sans) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase !important;
}

.bokah-brand-copy p {
  max-width: 58ch;
  margin-top: 13px;
  color: rgba(190,190,190,0.9);
  font-size: 0.86rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.78;
}

.bokah-brand-copy .bokah-brand-lede {
  color: rgba(232,232,232,0.95);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.72;
}

.bokah-brand-copy strong {
  color: var(--gold);
  font-weight: 800;
}

.bokah-brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.bokah-brand-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 11px;
  border: 1px solid rgba(106,176,212,0.22);
  border-radius: 999px;
  background: rgba(106,176,212,0.07);
  color: rgba(232,232,232,0.86);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bokah-logo-evolution {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.bokah-logo-evolution::before {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(106,176,212,0.32), transparent);
  transform: translateY(-50%);
  pointer-events: none;
}

.bokah-logo-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(7,7,7,0.76);
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}

.bokah-logo-card-featured {
  border-color: rgba(106,176,212,0.34);
  box-shadow: inset 0 0 0 1px rgba(106,176,212,0.06), 0 18px 56px rgba(0,0,0,0.32);
}

.bokah-logo-year {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.bokah-logo-year small {
  color: rgba(232,232,232,0.68);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.bokah-logo-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  max-width: 196px;
  margin: 0 auto;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}

.bokah-logo-frame-light {
  background: transparent;
}

.bokah-logo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bokah-logo-card p {
  margin-top: auto;
  color: rgba(190,190,190,0.9);
  font-size: 0.74rem;
  line-height: 1.62;
  letter-spacing: 0.02em;
}

.bokah-evolution-arrow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(106,176,212,0.28);
  border-radius: 999px;
  background: rgba(5,5,5,0.78);
  color: var(--gold);
  font-size: 0.96rem;
  box-shadow: 0 0 24px rgba(106,176,212,0.14);
}

/* ── About responsive ── */
@media (max-width: 1024px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .section-about { padding: 80px 32px; }
  .about-left { flex-direction: row; align-items: flex-start; gap: 32px; text-align: left; }
  .about-bio-block { text-align: left; }
  .about-photo-wrap { width: 220px; }
  .bokah-brand-panel {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (max-width: 1180px) and (orientation: portrait) {
  .bokah-brand-panel {
    padding: clamp(30px, 4.2vw, 42px);
  }

  .bokah-brand-copy {
    width: 100%;
    max-width: none;
    padding-left: 0;
  }

  .bokah-brand-copy::before {
    display: none;
  }

  .bokah-brand-copy p,
  .bokah-brand-copy .bokah-brand-lede {
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .section-about { padding: 64px 20px; }
  .about-left { flex-direction: column; align-items: center; }
  .about-photo-wrap { width: 180px; }
  .about-bio-block { text-align: center; }
  .about-bio { text-align: left; }
  .about-resume-btn { width: 100%; justify-content: center; }
  .about-right { padding: 22px; }
  .bokah-brand-panel {
    padding: 24px 18px;
  }
  .bokah-brand-copy {
    padding-left: 14px;
  }
  .bokah-brand-copy h3 {
    font-size: 1.18rem;
    letter-spacing: 0.1em;
  }
  .bokah-brand-copy p,
  .bokah-brand-copy .bokah-brand-lede {
    font-size: 0.78rem;
    line-height: 1.68;
  }
  .bokah-logo-evolution {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 7px;
  }
  .bokah-logo-card {
    padding: 10px 8px;
    gap: 9px;
  }
  .bokah-logo-frame {
    max-width: 98px;
  }
  .bokah-logo-year {
    font-size: 0.46rem;
    letter-spacing: 0.1em;
  }
  .bokah-logo-year small {
    font-size: 0.54rem;
  }
  .bokah-logo-card p {
    font-size: 0.56rem;
    line-height: 1.42;
  }
  .bokah-evolution-arrow {
    transform: none;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 0.66rem;
  }
}

/* ================================================================
   VIDEO MODAL
   ================================================================ */
.modal-overlay {
  position: fixed !important;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal-box {
  position: relative;
  width: 100%;
  max-width: 1400px;
  background: var(--bg2);
  border: 1px solid var(--border2);
}

.modal-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}

.modal-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}

.modal-info {
  padding: 16px 22px 20px;
  border-top: 1px solid var(--border);
}

.modal-info h3 {
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--white-p);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.modal-info p {
  font-size: 0.76rem;
  color: var(--gray);
  letter-spacing: 0.05em;
}

.modal-close {
  position: absolute;
  top: -44px; right: 0;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--gray-lt);
  cursor: pointer;
  transition: color var(--t);
}

.modal-close:hover { color: var(--gold); }

/* Modal prev/next navigation arrows */
.modal-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2010;
  background: rgba(5,5,5,0.7);
  border: 1px solid var(--border2);
  color: var(--gray-lt);
  font-size: 2.4rem;
  line-height: 1;
  width: 52px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0;
  flex-shrink: 0;
}

.modal-nav:hover {
  background: rgba(201,169,110,0.15);
  border-color: var(--gold);
  color: var(--gold);
}

.modal-nav:disabled,
.modal-nav[disabled] {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

.modal-nav--prev { left: 16px; }
.modal-nav--next { right: 16px; }

/* Counter — e.g. "3 / 12" */
.modal-counter {
  font-size: 0.70rem;
  letter-spacing: 0.18em;
  color: var(--gray);
  margin-left: 10px;
}

@media (max-width: 600px) {
  .modal-nav { width: 38px; height: 56px; font-size: 1.8rem; }
  .modal-nav--prev { left: 4px; }
  .modal-nav--next { right: 4px; }
}

@media (orientation: landscape) and (max-height: 820px) {
  #video-modal.modal-overlay {
    align-items: center;
    padding: 54px 72px 18px;
  }

  #video-modal .modal-box {
    max-width: min(100%, 960px);
    max-height: calc(100svh - 86px);
    overflow: visible;
  }

  #video-modal .modal-info {
    padding: 12px 18px 14px;
  }

  #video-modal .modal-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: calc(env(safe-area-inset-right, 0px) + 18px);
    z-index: 2025;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5,5,5,0.68);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

@media (orientation: landscape) and (max-width: 900px) {
  #video-modal.modal-overlay {
    padding-left: max(56px, env(safe-area-inset-left));
    padding-right: max(56px, env(safe-area-inset-right));
  }

  #video-modal .modal-box {
    max-width: min(100%, 820px);
  }
}

/* ================================================================
   LIGHTBOX
   ================================================================ */
.lightbox-box {
  position: relative;
  max-width: 95vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-box .modal-close { position: absolute; top: -46px; right: 0; }

#lightbox-img {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--border2);
  display: block;
}

#lightbox-caption {
  margin-top: 12px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--gray);
  text-align: center;
}

@media (orientation: landscape) and (max-height: 820px) {
  #lightbox.modal-overlay {
    align-items: center;
    padding: 54px 72px 18px;
  }

  #lightbox .lightbox-box {
    max-width: min(100%, 1080px);
    max-height: calc(100svh - 86px);
  }

  #lightbox-img {
    max-width: min(100%, 1080px);
    max-height: calc(100svh - 132px);
  }

  #lightbox .modal-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: calc(env(safe-area-inset-right, 0px) + 18px);
    z-index: 2025;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5,5,5,0.68);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

@media (orientation: landscape) and (max-width: 900px) {
  #lightbox.modal-overlay {
    padding-left: max(56px, env(safe-area-inset-left));
    padding-right: max(56px, env(safe-area-inset-right));
  }

  #lightbox .lightbox-box {
    max-width: min(100%, 820px);
  }
}

/* ================================================================
   PAGINATION  (all breakpoints — shown by JS when pages > 1)
   ================================================================ */
.pagination {
  position: relative;
  z-index: 4;
  isolation: isolate;
  pointer-events: auto;
  display: none; /* shown only on mobile by JS */
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 28px;
  padding: 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pagination.visible {
  display: flex;
}

.pagination::-webkit-scrollbar {
  display: none;
}

.pg-btn {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--ff-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  background: transparent;
  border: 1px solid var(--border2);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
  flex-shrink: 0;
}

.pg-btn:hover {
  color: var(--white);
  border-color: var(--gray);
}

.pg-btn.active {
  color: var(--bg);
  background: var(--gold);
  border-color: var(--gold);
}

.pg-btn.pg-arrow {
  font-size: 0.75rem;
  color: var(--gray-lt);
}

.pg-btn.pg-arrow:disabled,
.pg-btn.pg-arrow[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 768px) {
  .pagination {
    gap: 4px;
    margin-top: 18px;
    padding: 0 4px;
  }

  .pg-btn {
    width: clamp(26px, 7.2vw, 31px);
    height: clamp(26px, 7.2vw, 31px);
    font-size: clamp(0.56rem, 2.4vw, 0.66rem);
    letter-spacing: 0.04em;
  }

  .pg-btn.pg-arrow {
    width: clamp(28px, 7.8vw, 34px);
    font-size: 0.86rem;
  }
}

@media (hover: none) and (pointer: coarse), (any-pointer: coarse) {
  body,
  .portfolio-section,
  .section-showreel,
  .section-about,
  .section-contact,
  .video-card,
  .photo-card,
  .ai-card,
  .nav-link,
  .cat-tab,
  .hero-btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  img,
  video,
  canvas,
  .photo-card-img,
  .video-card-thumb,
  #lightbox-img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  input,
  textarea,
  select,
  button {
    -webkit-user-select: auto;
    user-select: auto;
  }
}

/* Release temporary compositor layers after mobile reveal animations finish.
   Keeping every scrolled card promoted can trigger tab reloads on memory-limited
   mobile browsers during long portfolio sessions. */
@media (hover: none) and (pointer: coarse) {
  .reveal.visible,
  .video-card.reveal.visible,
  .photo-card.reveal.visible,
  .ai-card.reveal.visible {
    will-change: auto !important;
  }
}

/* Reliable editorial motion for the asynchronous AI Art and BTS galleries.
   The section shell and each lane use only opacity/transform so the motion
   stays compositor-friendly on low-resolution tablets and phones. */
#ai-visuals .section-header.reveal,
#behind-scene .section-header.reveal,
#ai-dual-layout.reveal,
#bts-dual-layout.reveal,
#ai-dual-layout .media-lane.reveal,
#bts-dual-layout .media-lane.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .72s ease,
    transform .78s cubic-bezier(.2,.72,.18,1);
  backface-visibility: hidden;
}

#ai-visuals .section-header.reveal.visible,
#behind-scene .section-header.reveal.visible,
#ai-dual-layout.reveal.visible,
#bts-dual-layout.reveal.visible,
#ai-dual-layout .media-lane.reveal.visible,
#bts-dual-layout .media-lane.reveal.visible {
  opacity: 1;
  transform: translate3d(0,0,0);
}

#ai-dual-layout .media-lane.reveal,
#bts-dual-layout .media-lane.reveal {
  transition-delay: var(--lane-reveal-delay, 0ms);
}

#ai-visuals .section-header.reveal.visible .section-intro,
#behind-scene .section-header.reveal.visible .section-intro {
  animation: bmk-rise-soft .66s var(--ease) .08s both;
}

@media (hover: none) and (pointer: coarse) {
  #ai-visuals .section-header.reveal,
  #behind-scene .section-header.reveal,
  #ai-dual-layout.reveal,
  #bts-dual-layout.reveal,
  #ai-dual-layout .media-lane.reveal,
  #bts-dual-layout .media-lane.reveal {
    transform: translate3d(0, 10px, 0);
    transition-duration: .52s, .58s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ai-visuals .section-header.reveal,
  #behind-scene .section-header.reveal,
  #ai-dual-layout.reveal,
  #bts-dual-layout.reveal,
  #ai-dual-layout .media-lane.reveal,
  #bts-dual-layout .media-lane.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

#video-modal.modal-centered-mode > .carousel-gesture-hint > span:last-child,
#lightbox.modal-centered-mode > .carousel-gesture-hint > span:last-child {
  color: var(--gold) !important;
}

#video-modal.modal-centered-mode .carousel-gesture-glyph,
#lightbox.modal-centered-mode .carousel-gesture-glyph {
  color: rgba(126, 196, 229, .95) !important;
}

/* ================================================================
   MEDIA DUO GALLERIES — AI Art + Behind the Scene
   Keeps motion and still work visually distinct on wide screens while the
   existing type controls remain compact and touch-friendly on small screens.
   ================================================================ */
.section-intro {
  width:min(100%, 720px);
  margin:12px 0 0;
  color:rgba(255,255,255,.48);
  font-size:clamp(.68rem,.84vw,.82rem);
  line-height:1.7;
  letter-spacing:.025em;
}
.media-type-tabs { margin-bottom:12px !important; }
.media-type-tabs .cat-tab i { margin-right:6px; font-size:.78em; opacity:.72; }
.media-dual-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2vw,32px);
  width:min(100%,1540px);
  margin:26px auto 0;
  padding:0 var(--gallery-content-edge,0px);
  box-sizing:border-box;
  align-items:start;
}
.media-dual-layout.single-lane {
  grid-template-columns:minmax(0,1fr);
  width:min(100%,754px);
}
.media-lane {
  min-width:0;
  padding:clamp(14px,1.6vw,22px);
  border:1px solid rgba(255,255,255,.085);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.009));
  box-shadow:0 18px 50px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025);
}
.media-lane-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:30px;
  margin:0 0 15px;
  padding:0 2px 11px;
  border-bottom:1px solid rgba(255,255,255,.075);
  color:rgba(255,255,255,.9);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.14em;
}
.media-lane-heading span { display:flex;align-items:center;gap:8px; }
.media-lane-heading i { color:var(--blue);font-size:.78rem; }
.media-lane-heading small { color:rgba(255,255,255,.32);font-size:.5rem;letter-spacing:.16em; }
.media-dual-layout .video-grid,
.media-dual-layout .photo-grid,
.media-dual-layout .ai-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
}
.media-dual-layout.single-lane .video-grid,
.media-dual-layout.single-lane .photo-grid,
.media-dual-layout.single-lane .ai-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.media-lane .pagination { margin-bottom:0; }
.ai-card-play {
  position:absolute;
  z-index:3;
  inset:50% auto auto 50%;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:50%;
  color:#fff;
  background:rgba(8,8,10,.58);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  backdrop-filter:blur(8px);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.ai-card-play i { margin-left:2px;font-size:.72rem; }
.media-showcase { width:100%;min-width:0; }
.film-player-shell,
.photo-slideshow-stage {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:#050506;
  box-shadow:0 12px 32px rgba(0,0,0,.24);
  box-sizing:border-box;
}
.film-player-shell iframe { position:absolute;inset:0;width:100%;height:100%;border:0; }
.showcase-arrow {
  position:absolute;
  z-index:4;
  top:50%;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  color:#fff;
  background:rgba(5,5,7,.72);
  box-shadow:0 6px 20px rgba(0,0,0,.32);
  backdrop-filter:blur(9px);
  transform:translateY(-50%);
  cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s;
}
.showcase-arrow:hover { background:rgba(20,20,23,.92);border-color:var(--blue); }
.showcase-arrow-prev { left:12px; }
.showcase-arrow-next { right:12px; }
.showcase-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:30px;
  padding:9px 3px 0;
  color:rgba(255,255,255,.62);
  font-size:.61rem;
  letter-spacing:.045em;
}
.showcase-caption strong { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600; }
.showcase-caption span { flex:0 0 auto;color:rgba(255,255,255,.32);font-size:.54rem; }
.photo-slideshow-stage {
  padding:0;
  color:#fff;
  cursor:pointer;
  touch-action:pan-y;
}
.photo-slideshow-track {
  display:flex;
  width:100%;
  height:100%;
  will-change:transform;
  backface-visibility:hidden;
}
.photo-slide {
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  color:#fff;
  background:#050506;
  cursor:pointer;
  overflow:hidden;
}
.photo-slide img { width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(0);backface-visibility:hidden; }
.photo-slide-caption {
  position:absolute;
  inset:auto 0 0;
  padding:30px 14px 12px;
  overflow:hidden;
  color:rgba(255,255,255,.9);
  background:linear-gradient(transparent,rgba(0,0,0,.76));
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.045em;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.slideshow-dots {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:30px;
  padding:9px 4px 0;
  flex-wrap:wrap;
}
.slideshow-dot {
  flex:0 0 auto;
  width:6px;
  height:6px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.24);
  cursor:pointer;
  transition:width .22s ease,background .22s ease;
}
.slideshow-dot.active { width:18px;border-radius:999px;background:var(--blue); }

@media (max-width:520px) {
  .film-player-shell,.photo-slideshow-stage { border-radius:7px; }
  .showcase-arrow { width:32px;height:32px;font-size:.68rem; }
  .showcase-arrow-prev { left:8px; }
  .showcase-arrow-next { right:8px; }
  .showcase-caption { min-height:25px;padding-top:7px;font-size:.56rem; }
  .photo-slide-caption { padding:24px 10px 9px;font-size:.56rem; }
  .slideshow-dots { gap:5px;min-height:25px;padding-top:7px; }
  .slideshow-dot { width:5px;height:5px; }
  .slideshow-dot.active { width:15px; }
}

@media (max-width:1050px) {
  .media-dual-layout { grid-template-columns:minmax(0,1fr);gap:16px; }
  .media-dual-layout .video-grid,
  .media-dual-layout .photo-grid,
  .media-dual-layout .ai-grid,
  .media-dual-layout.single-lane .video-grid,
  .media-dual-layout.single-lane .photo-grid,
  .media-dual-layout.single-lane .ai-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:520px) {
  .section-intro { font-size:.66rem;line-height:1.55; }
  .media-dual-layout { margin-top:16px;gap:12px; }
  .media-lane { padding:10px;border-radius:10px; }
  .media-lane-heading { margin-bottom:9px;padding-bottom:9px; }
  .media-lane-heading small { display:none; }
  .media-dual-layout .video-grid,
  .media-dual-layout .photo-grid,
  .media-dual-layout .ai-grid { gap:7px !important; }
}

/* Hardware-detected low-resolution Samsung tablets can report a desktop-like
   viewport. Keep the duo composition inside the physical screen regardless. */
html.is-samsung-tablet .media-dual-layout {
  grid-template-columns:minmax(0,1fr) !important;
  width:min(100%,920px) !important;
  gap:14px !important;
  padding-left:max(10px,var(--gallery-content-edge,0px)) !important;
  padding-right:max(10px,var(--gallery-content-edge,0px)) !important;
  overflow:visible !important;
}
html.is-samsung-tablet .media-lane { min-width:0 !important;padding:12px !important; }
html.is-samsung-tablet .media-dual-layout .video-grid,
html.is-samsung-tablet .media-dual-layout .photo-grid,
html.is-samsung-tablet .media-dual-layout .ai-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  width:100% !important;
}
html.is-samsung-tablet .media-lane-heading { max-width:100%;overflow:hidden; }
html.is-samsung-tablet .media-lane-heading small { white-space:nowrap; }

@media (orientation:portrait) {
  html.is-samsung-tablet .media-lane-heading small { display:none; }
}

/* Phone portrait: preserve two useful thumbnails per row without horizontal
   overflow. Phone landscape: compact vertical chrome for short viewports. */
@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:599px) {
  .media-dual-layout { width:100% !important;padding-left:0 !important;padding-right:0 !important; }
  .media-lane { width:100%;box-sizing:border-box;overflow:hidden; }
  .media-type-tabs { flex-wrap:wrap !important; }
}
@media (orientation:landscape) and (max-width:950px) and (max-height:560px) {
  #ai-visuals,
  #behind-scene { height:auto !important;min-height:0 !important;overflow:visible !important; }
  #ai-visuals .section-header,
  #behind-scene .section-header { margin-bottom:8px !important; }
  #ai-visuals .section-intro { margin-top:7px;line-height:1.4; }
  #ai-visuals .cat-tabs,
  #behind-scene .cat-tabs { margin-bottom:8px !important; }
  .media-dual-layout { grid-template-columns:minmax(0,1fr) !important;margin-top:10px;padding-left:8px !important;padding-right:8px !important; }
  .media-lane { padding:9px !important; }
  .media-lane-heading { min-height:22px;margin-bottom:8px;padding-bottom:7px; }
  .media-lane-heading small { display:none; }
  .media-showcase {
    width:min(100%,calc(72svh * 16 / 9));
    margin-left:auto;
    margin-right:auto;
  }
}

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.62s ease, transform 0.62s cubic-bezier(.2,.72,.18,1);
  backface-visibility: hidden;
}

.reveal.visible { opacity: 1; transform: translate3d(0, 0, 0); }

/* Mobile motion: short, one-pass, compositor-friendly. Bokeh is intentionally
   excluded from these rules and retains its existing device behavior. */
@media (hover: none) and (pointer: coarse) {
  .reveal {
    transform: translate3d(0, 12px, 0);
    transition-duration: 0.44s;
    transition-timing-function: cubic-bezier(.22,.7,.22,1);
  }

  .video-card,
  .photo-card,
  .ai-card {
    contain: layout paint;
    transform: translateZ(0);
    box-shadow: 0 10px 26px rgba(0,0,0,.2);
  }

  .video-card-thumb,
  .photo-card-img,
  .ai-card img {
    transform: translateZ(0) !important;
    filter: none !important;
    transition: none !important;
    backface-visibility: hidden;
  }

  .video-card:hover .video-card-thumb,
  .photo-card:hover .photo-card-img,
  .ai-card:hover img {
    transform: translateZ(0) !important;
    filter: none !important;
  }

  .video-card-overlay,
  .photo-card-overlay,
  .video-card-info,
  .ai-card::after,
  .ai-card-info {
    transition-duration: 0.2s;
  }

  .about-left.reveal.visible .about-photo-wrap,
  .about-left.reveal.visible .about-bio-block,
  .about-left.reveal.visible .about-bio-block > .label-tag,
  .about-left.reveal.visible .about-name,
  .about-left.reveal.visible .about-bio,
  .about-left.reveal.visible .about-resume-btn,
  .bokah-brand-panel.reveal.visible .bokah-brand-copy,
  .bokah-brand-panel.reveal.visible .bokah-logo-card,
  .bokah-brand-panel.reveal.visible .bokah-evolution-arrow {
    animation-duration: 0.46s;
    animation-delay: 0.04s;
    animation-timing-function: cubic-bezier(.22,.7,.22,1);
  }

  .skill-bar-fill::after {
    animation: none;
  }
}

/* ================================================================
   RESPONSIVE — TABLET  ≤ 1024px
   ================================================================ */
@media (max-width: 1024px) {
  .logo-rule { display: block; }
  .logo-sub { display: block; font-size: 0.6rem; letter-spacing: 0.18em; }
  .logo-name { font-size: 1.05rem; letter-spacing: 0.16em; }
}

@media (min-width: 901px) and (max-width: 1100px) and (orientation: landscape) {
  .nav-inner { padding: 0 24px; gap: 18px; }
  .nav-links { gap: 16px; }
  .nav-link { font-size: 0.66rem; letter-spacing: 0.1em; }
  .logo-img { width: 40px; height: 40px; }
  .logo-name { font-size: 0.86rem; letter-spacing: 0.1em; }
  .logo-sub { display: none; }
  .logo-rule { display: none; }
}

/* Touch tablets use the compact menu before the desktop links can crowd each other. */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (max-width: 1600px) {
  .nav-toggle { display: flex; }

  /* Left-align logo */
  .nav-inner {
    padding: 0 24px;
    justify-content: space-between;
  }
  .nav-logo { margin-left: 0; }

  .nav-links {
    display: flex;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: rgba(5,5,5,0.90);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border2);
    padding: 0 0 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1),
                padding   0.38s cubic-bezier(0.4,0,0.2,1),
                opacity   0.28s ease;
    opacity: 0;
  }

  .nav-links.open {
    max-height: 480px;
    padding: 8px 0 20px;
    pointer-events: all;
    opacity: 1;
  }

  .nav-links li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 100%;
  }

  .nav-links li::before { display: none; }

  .nav-link {
    font-size: 0.9rem;
    padding: 14px 0;
    letter-spacing: 0.22em;
    width: 100%;
    text-align: center;
    position: relative;
    padding-bottom: 14px;
  }

  /* Same gold underline + bright text as desktop */
  .nav-link::after {
    display: block;
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width var(--t) var(--ease);
  }

  .nav-link:hover,
  .nav-link.active { color: var(--white-p); }

  .nav-link:hover::after,
  .nav-link.active::after { width: 24px; }

  .portfolio-section { padding: 80px 40px; }
  .showreel-label-row { padding: 0 40px 18px; }
  .hero-intro { width: min(100% - 40px, 860px); }
  .hero-title { font-size: clamp(2rem, 9vw, 4.2rem); }
}

@media (max-width: 900px) and (orientation: landscape) {
  .nav-links {
    align-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.open {
    max-height: min(58svh, 260px);
    padding: 6px 0 10px;
  }

  .nav-links li {
    min-height: 0;
  }

  .nav-link {
    padding: 7px 0 9px;
    font-size: clamp(0.58rem, 1.9vw, 0.72rem);
    letter-spacing: 0.16em;
    line-height: 1.2;
  }

  .nav-link::after {
    bottom: 4px;
  }

  .video-card-info {
    padding: 34px 10px 10px;
  }

  .video-card-info h3,
  .ai-card-title {
    font-size: clamp(0.54rem, 1.45vw, 0.66rem);
    letter-spacing: 0.045em;
    line-height: 1.28;
  }

  .video-card-meta,
  .ai-card-meta,
  .ai-card-badge {
    font-size: clamp(0.46rem, 1.22vw, 0.54rem);
    letter-spacing: 0.07em;
  }

  .skills-list {
    gap: 10px;
  }

  .skill-item {
    padding: 11px 12px;
  }

  .skill-header {
    margin-bottom: 6px;
  }

  .skill-name {
    font-size: clamp(0.5rem, 1.55vw, 0.62rem);
    letter-spacing: 0.095em;
  }

  .skill-pct {
    font-size: clamp(0.5rem, 1.5vw, 0.6rem);
  }

  .skill-track {
    height: 4px;
  }
}

/* ================================================================
   RESPONSIVE — MOBILE  ≤ 768px
   ================================================================ */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  .section-showreel {
    min-height: auto;
    padding-bottom: 58px;
    justify-content: flex-start;
    gap: 24px;
  }

  .hero-intro {
    width: min(100% - 32px, 640px);
    padding-top: 42px;
  }

  .hero-kicker {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    margin-bottom: 14px;
  }

  .hero-title {
    font-size: clamp(1.55rem, 9.2vw, 3rem);
    letter-spacing: 0.018em;
    line-height: 1.02;
    max-width: 100%;
    white-space: nowrap;
  }

  .hero-role {
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    line-height: 1.65;
  }

  .hero-summary {
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 22px;
  }

  .hero-actions {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
  }

  .hero-btn {
    flex: 0 1 calc(50% - 4px);
    min-width: 0;
    padding: 12px 10px;
    gap: 8px;
    font-size: clamp(0.56rem, 2.55vw, 0.66rem);
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  #hero-secondary-btn {
    flex-basis: calc(50% - 4px);
    margin-inline: auto;
  }

  .showreel-player {
    width: calc(100% - 32px);
    border-radius: 6px;
  }

  /* Nav — left-align logo, reduce side padding */
  .nav-inner {
    padding: 0 16px;
    justify-content: space-between;
  }
  .nav-logo {
    margin-left: 0;
    gap: 10px;
  }
  /* Issue 6 fix: balance logo text size vs PNG image size on mobile */
  .logo-img { width: 34px; height: 34px; }
  .logo-name { font-size: 0.95rem; letter-spacing: 0.14em; }
  .logo-rule, .logo-sub { display: none; }

  .showreel-label-row {
    padding: 0 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Category tabs */
  .cat-tabs { gap: 6px; margin-bottom: 32px; }
  .cat-tab  { font-size: 0.70rem; padding: 8px 14px; letter-spacing: 0.14em; }

  /* Sections */
  .portfolio-section { padding: 64px 20px; }

  /* Issue 4 fix: smaller section title on mobile */
  .section-title { font-size: clamp(0.78rem, 3.6vw, 1.05rem); letter-spacing: 0.08em; }

  /* Grids */
  .video-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .photo-grid, .ai-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .video-card-info { padding: 42px 12px 12px; }
  .video-card-info h3 { font-size: 0.72rem; letter-spacing: 0.06em; }
  .video-card-meta { font-size: 0.56rem; letter-spacing: 0.08em; }

  /* Contact */
  .section-contact { padding: 80px 24px; }
  .contact-inner { padding: 34px 22px 30px; }
  /* Issue 5 fix: contact name + role in one compact row on mobile */
  .contact-name {
    display: block;
    width: 100%;
    font-size: clamp(0.66rem, 3.35vw, 0.96rem);
    letter-spacing: 0.018em;
    margin-bottom: 6px;
    text-align: center;
    white-space: nowrap;
  }
  .contact-role { font-size: 0.68rem; letter-spacing: 0.12em; line-height: 1.5; margin-bottom: 20px; }
  .contact-btn  { width: 50px; height: 50px; padding: 0; }

  /* Modal */
  .modal-overlay { padding: 12px; }
  .modal-close { top: -38px; font-size: 1.7rem; }
}

/* ================================================================
   RESPONSIVE — SMALL MOBILE  ≤ 480px
   ================================================================ */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(1.18rem, 8.2vw, 2rem);
    letter-spacing: 0.006em;
  }

  .video-grid { grid-template-columns: 1fr; gap: 12px; }
  .photo-grid, .ai-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  .hero-actions { flex-direction: column; }
  .hero-btn { width: 100%; flex-basis: auto; }
  .section-cert { font-size: 0.72rem; }
  /* Further shrink section title on tiny phones */
  .section-title { font-size: clamp(0.72rem, 3.5vw, 0.92rem); }

  .contact-links {
    grid-template-columns: repeat(auto-fit, minmax(48px, 48px));
    gap: 10px;
  }
  .contact-btn {
    width: 48px;
    height: 48px;
  }
  .contact-btn i { font-size: 1rem; }
  .contact-name {
    font-size: clamp(0.56rem, 3.85vw, 0.82rem);
    letter-spacing: 0;
  }

  .play-btn { width: 46px; height: 46px; font-size: 1rem; }
}

@media (max-width: 768px) {
  .section-title {
    font-size: clamp(0.68rem, 3.1vw, 0.95rem);
    letter-spacing: 0.055em;
    white-space: nowrap;
  }

  .nav-link {
    font-size: clamp(0.72rem, 3.2vw, 0.86rem);
    letter-spacing: 0.14em;
  }

  .cat-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }

  .section-about {
    padding: 56px 16px;
  }

  .about-inner {
    gap: 22px;
  }

  .about-right,
  .about-bio-block {
    padding: 24px 18px;
    border-radius: 6px;
  }

  .about-right .label-tag {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    margin-bottom: 14px !important;
  }

  .skills-list {
    gap: 9px;
  }

  .skill-item {
    padding: 10px 11px;
    border-radius: 6px;
  }

  .skill-header {
    margin-bottom: 6px;
  }

  .skill-name {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    line-height: 1.25;
  }

  .skill-pct {
    font-size: 0.58rem;
    min-width: 30px;
  }

  .skill-track {
    height: 4px;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: clamp(0.58rem, 3.6vw, 0.82rem);
    letter-spacing: 0.035em;
  }

  .nav-link {
    font-size: clamp(0.66rem, 3.6vw, 0.78rem);
    letter-spacing: 0.1em;
  }

  .section-about {
    padding: 48px 14px;
  }

  .about-right,
  .about-bio-block {
    padding: 20px 14px;
  }

  .skills-list {
    gap: 8px;
  }

  .skill-item {
    padding: 9px 10px;
  }

  .skill-name {
    font-size: 0.54rem;
    letter-spacing: 0.085em;
  }

  .skill-pct {
    font-size: 0.54rem;
  }
}

@media (max-width: 768px) {
  /* Justified copy creates large, uneven word gaps on narrow touch screens. */
  .contact-tagline,
  .contact-bio p,
  .about-bio p {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
    letter-spacing: 0;
    word-spacing: normal;
    hyphens: auto;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.8;
    text-wrap: pretty;
  }

  .contact-tagline,
  .contact-bio p {
    font-size: 0.94rem;
  }

  .about-bio p {
    font-size: 0.88rem;
  }

  .section-contact .contact-inner {
    text-align: center !important;
  }

  .section-contact .contact-photo-wrap {
    margin-left: auto;
    margin-right: auto;
  }

  .section-contact .contact-name {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1.12rem, 5.8vw, 1.56rem) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .section-contact .contact-name {
    font-size: clamp(1rem, 5.55vw, 1.34rem) !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 768px) {
  #video-modal.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 6px)
      max(4px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom, 0px) + 6px)
      max(4px, env(safe-area-inset-left));
    align-items: center;
  }

  #video-modal .modal-box {
    width: 100%;
    max-width: none;
    max-height: calc(100svh - 12px);
    border-radius: 0;
    overflow: hidden;
    border-left: 0;
    border-right: 0;
  }

  #video-modal .modal-video-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  #video-modal .modal-info {
    display: none;
  }

  #video-modal .modal-close,
  #lightbox .modal-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    z-index: 2030;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-p);
    background: rgba(5,5,5,0.72);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    font-size: 1.7rem;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  #lightbox.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 52px)
      max(4px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom, 0px) + 4px)
      max(4px, env(safe-area-inset-left));
    align-items: center;
  }

  #lightbox .lightbox-box {
    width: 100%;
    max-width: 100%;
    max-height: calc(100svh - 60px);
    position: relative;
  }

  #lightbox-img {
    width: auto;
    max-width: calc(100vw - 8px);
    max-height: calc(100svh - 60px);
    object-fit: contain;
  }

  #lightbox-caption {
    display: none;
  }

  #lightbox .modal-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: calc(env(safe-area-inset-right, 0px) + 8px);
  }

  #video-modal .modal-nav,
  #lightbox .modal-nav {
    display: none;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  #video-modal.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 4px)
      max(4px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom, 0px) + 4px)
      max(4px, env(safe-area-inset-left));
  }

  #video-modal .modal-box {
    max-height: calc(100svh - 8px);
    max-width: min(100%, 100vw);
  }

  #video-modal .modal-info {
    padding: 8px 12px 10px;
  }

  #video-modal .modal-close {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: calc(env(safe-area-inset-right, 0px) + 8px);
  }

  #lightbox.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 48px)
      max(4px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom, 0px) + 4px)
      max(4px, env(safe-area-inset-left));
  }

  #lightbox-img {
    max-width: calc(100vw - 8px);
    max-height: calc(100svh - 56px);
  }
}

@media (hover: none) and (pointer: coarse) {
  #video-modal.modal-overlay,
  #lightbox.modal-overlay {
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.96);
  }

  #video-modal .modal-nav,
  #lightbox .modal-nav,
  #video-modal .swipe-hint,
  #lightbox .swipe-hint {
    display: none !important;
  }

  #video-modal .modal-close,
  #lightbox .modal-close {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 8px) !important;
    z-index: 2035 !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--white-p) !important;
    background: rgba(5,5,5,0.74) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 999px !important;
    font-size: 1.65rem !important;
    line-height: 1 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #video-modal .modal-info,
  #lightbox-caption {
    display: none !important;
  }

  #video-modal.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 54px)
      max(8px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom, 0px) + 8px)
      max(8px, env(safe-area-inset-left)) !important;
  }

  #video-modal .modal-box {
    width: min(calc(100vw - 16px), calc((100svh - 70px) * 1.7778)) !important;
    max-width: none !important;
    max-height: calc(100svh - 70px) !important;
    background: #000 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  #video-modal .modal-video-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #000 !important;
  }

  #video-modal .modal-video-wrap iframe {
    width: 100% !important;
    height: 100% !important;
  }

  #lightbox.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 54px)
      max(8px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom, 0px) + 8px)
      max(8px, env(safe-area-inset-left)) !important;
  }

  #lightbox .lightbox-box {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 70px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #lightbox-img {
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 70px) !important;
    object-fit: contain !important;
  }
}

/* Mobile photography density: portrait 3-up, landscape 4-up. */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) and (orientation: portrait) {
  #photography .photo-grid,
  #behind-scene .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #photography .photo-card,
  #behind-scene .photo-card {
    border-radius: 5px;
  }
}

@media (hover: none) and (pointer: coarse) and (max-height: 768px) and (orientation: landscape) {
  #photography .photo-grid,
  #behind-scene .photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}

/* Tablet: balanced between mobile density and desktop sizing. */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1180px) {
  #photography .photo-grid,
  #behind-scene .photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  #video-modal.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 6px)
      calc(env(safe-area-inset-right, 0px) + 8px)
      calc(env(safe-area-inset-bottom, 0px) + 6px)
      calc(env(safe-area-inset-left, 0px) + 8px) !important;
  }

  #video-modal .modal-box {
    width: min(calc(100vw - 16px), calc((100svh - 12px) * 1.7778)) !important;
    max-height: calc(100svh - 12px) !important;
  }

  #lightbox.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 48px)
      calc(env(safe-area-inset-right, 0px) + 8px)
      calc(env(safe-area-inset-bottom, 0px) + 6px)
      calc(env(safe-area-inset-left, 0px) + 8px) !important;
  }

  #lightbox .lightbox-box {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 56px) !important;
  }

  #lightbox-img {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 56px) !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 900px) {
  #video-modal.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 42px)
      calc(env(safe-area-inset-right, 0px) + 86px)
      calc(env(safe-area-inset-bottom, 0px) + 42px)
      calc(env(safe-area-inset-left, 0px) + 86px) !important;
    background: rgba(0,0,0,0.84) !important;
  }

  #video-modal .modal-box {
    width: min(calc(100vw - 172px), calc((100svh - 84px) * 1.7778)) !important;
    max-height: calc(100svh - 84px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  }

  #lightbox.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 54px)
      calc(env(safe-area-inset-right, 0px) + 96px)
      calc(env(safe-area-inset-bottom, 0px) + 46px)
      calc(env(safe-area-inset-left, 0px) + 96px) !important;
    background: rgba(0,0,0,0.84) !important;
  }

  #lightbox .lightbox-box {
    max-width: calc(100vw - 192px) !important;
    max-height: calc(100svh - 100px) !important;
  }

  #lightbox-img {
    max-width: calc(100vw - 192px) !important;
    max-height: calc(100svh - 100px) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  #video-modal .modal-box {
    width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 70px) !important;
  }

  #lightbox .lightbox-box,
  #lightbox-img {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 70px) !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  #video-modal .modal-nav,
  #lightbox .modal-nav {
    display: flex !important;
    width: 34px !important;
    height: 58px !important;
    z-index: 2028 !important;
    color: rgba(255,255,255,0.5) !important;
    background: rgba(5,5,5,0.16) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 2rem !important;
    opacity: 0.45 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  #video-modal .modal-nav:hover,
  #lightbox .modal-nav:hover {
    color: rgba(255,255,255,0.72) !important;
    background: rgba(5,5,5,0.26) !important;
    border-color: rgba(255,255,255,0.16) !important;
  }

  #video-modal .modal-nav:disabled,
  #video-modal .modal-nav[disabled],
  #lightbox .modal-nav:disabled,
  #lightbox .modal-nav[disabled] {
    display: none !important;
  }

  #video-modal .modal-nav--prev,
  #lightbox .modal-nav--prev {
    left: max(6px, env(safe-area-inset-left)) !important;
  }

  #video-modal .modal-nav--next,
  #lightbox .modal-nav--next {
    right: max(6px, env(safe-area-inset-right)) !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  #video-modal .modal-nav,
  #lightbox .modal-nav {
    width: 30px !important;
    height: 52px !important;
    font-size: 1.85rem !important;
    opacity: 0.38 !important;
  }
}

/* Stronger modal navigation/counters */
.modal-nav {
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.18);
}

.modal-counter {
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  text-shadow: 0 1px 12px rgba(0,0,0,0.85);
}

@media (hover: none) and (pointer: coarse) {
  #video-modal .modal-nav,
  #lightbox .modal-nav {
    color: rgba(255,255,255,0.82) !important;
    opacity: 0.62 !important;
    background: rgba(5,5,5,0.22) !important;
    border-color: rgba(255,255,255,0.16) !important;
  }

  #video-modal .modal-info {
    display: block !important;
    position: fixed !important;
    left: 50% !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    z-index: 2032 !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  #video-modal .modal-info h3,
  #video-modal .modal-info p {
    display: none !important;
  }

  #video-counter,
  #photo-counter {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    z-index: 2032 !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 96px !important;
    max-width: none !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: rgba(5,5,5,0.48) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: rgba(255,255,255,0.96) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.9) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Landscape video: keep the counter visible inside the lower edge of the frame. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  #video-modal .modal-box { position: relative !important; }

  #video-modal .modal-info {
    position: absolute !important;
    left: 50% !important;
    bottom: 8px !important;
    z-index: 12 !important;
    width: auto !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
  }

  #video-counter {
    display: inline-flex !important;
    position: static !important;
    margin: 0 !important;
    padding: 5px 11px !important;
    background: rgba(5,5,5,0.62) !important;
  }
}

/* Portrait photos use the same immediate-below-media counter treatment as video. */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) and (orientation: portrait) {
  #lightbox .lightbox-box {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #lightbox .modal-counter,
  #photo-counter {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    transform: none !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    margin: 4px 0 0 !important;
    padding: 6px 12px !important;
  }
}

/* Portfolio section glass panels */
#cinematography,
#ai-visuals,
#photography,
#behind-scene {
  position: relative;
  isolation: isolate;
}

#cinematography::before,
#ai-visuals::before,
#photography::before,
#behind-scene::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 44px clamp(18px, 4vw, 56px);
  max-width: 1660px;
  margin: 0 auto;
  border: 1px solid rgb(255 255 255 / var(--section-panel-border-opacity, 0.09));
  border-radius: 8px;
  background: rgb(5 5 5 / var(--section-panel-opacity, 0.24));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / var(--section-panel-highlight-opacity, 0.05)),
    0 24px 80px rgb(0 0 0 / var(--section-panel-shadow-opacity, 0.18));
  pointer-events: none;
}

@media (max-width: 768px) {
  #cinematography::before,
  #ai-visuals::before,
  #photography::before,
  #behind-scene::before {
    inset: 26px 12px;
    border-radius: 7px;
    background: rgb(5 5 5 / var(--section-panel-opacity, 0.24));
  }
}

/* Final mobile tuning */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .nav-links {
    background: rgba(5,5,5,0.90) !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.46);
  }

  .nav-links .nav-link {
    color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 1px 14px rgba(0,0,0,0.72);
  }

  .nav-links .nav-link.active {
    color: #fff !important;
  }
}

@media (max-width: 600px) {
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .video-card {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .video-card-info {
    padding: 28px 8px 8px !important;
  }

  .video-card-info h3 {
    font-size: 0.62rem !important;
    letter-spacing: 0.035em !important;
  }

  .video-card-meta {
    font-size: 0.48rem !important;
    letter-spacing: 0.055em !important;
  }

  .play-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .portfolio-section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .portfolio-section .section-header {
    margin-bottom: 22px;
  }

  .portfolio-section .section-title {
    font-size: clamp(1.24rem, 7.5vw, 1.9rem) !important;
    letter-spacing: 0.055em !important;
    line-height: 1.05;
    white-space: nowrap;
  }

  .portfolio-section .section-title-icon {
    font-size: 0.96em !important;
    margin-right: 0.42em !important;
    transform: none;
  }

  .pagination {
    margin-top: 16px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) and (orientation: portrait) {
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  }

  .video-card-info {
    padding: 42px 14px 12px !important;
  }

  .video-card-info h3 {
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
  }

  .video-card-meta {
    font-size: 0.56rem !important;
    letter-spacing: 0.08em !important;
  }
}

/* Final phone carousel information stack. */
@media (max-width: 700px) and (orientation: portrait) {
  #video-modal .modal-info,
  #video-modal .modal-info.modal-info--stacked {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title counter"
      "youtube counter"
      "desc desc" !important;
    align-items: start !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    min-height: 0 !important;
    padding: 15px 18px 17px !important;
  }

  #video-modal #modal-title,
  #video-modal .modal-info.modal-info--stacked #modal-title { grid-area: title !important; }
  #video-modal .modal-youtube-stats { grid-area: youtube !important; }
  #video-modal #modal-desc,
  #video-modal .modal-info.modal-info--stacked #modal-desc {
    grid-area: desc !important;
    margin-top: 4px !important;
  }
  #video-modal #video-counter {
    grid-area: counter !important;
    align-self: start !important;
  }
}

/* Pagination and category dropdown final responsive rules */
.pagination {
  width: min(100%, 680px);
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  gap: clamp(3px, 0.55vw, 6px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 5px;
  background: transparent;
}

.pg-btn {
  width: clamp(28px, 3.1vw, 38px);
  height: clamp(30px, 3.1vw, 38px);
  font-size: clamp(0.58rem, 0.85vw, 0.76rem);
  letter-spacing: 0.02em;
  border-radius: 4px;
}

.pg-btn.pg-arrow {
  width: clamp(30px, 3.35vw, 42px);
  color: var(--gold);
  border-color: rgba(106,176,212,0.36);
  background: rgba(106,176,212,0.06);
  font-size: clamp(0.62rem, 0.9vw, 0.78rem);
  font-weight: 900;
}

.pg-btn.pg-arrow:hover {
  color: var(--white-p);
  border-color: rgba(106,176,212,0.66);
  background: rgba(106,176,212,0.14);
}

.pg-btn.pg-arrow[data-dir="prev"] {
  margin-right: clamp(3px, 0.7vw, 8px);
}

.pg-btn.pg-arrow[data-dir="next"] {
  margin-left: clamp(3px, 0.7vw, 8px);
}

.pagination .pg-btn {
  color: rgba(255,255,255,0.84);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.16);
  font-weight: 900;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.pagination .pg-btn:hover {
  color: var(--white-p);
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.075);
}

.pagination .pg-btn.active {
  color: #030303;
  background: var(--gold);
  border-color: var(--gold);
  text-shadow: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 20px rgba(106,176,212,0.18);
}

.pagination .pg-btn.pg-arrow {
  color: var(--gold);
  background: rgba(106,176,212,0.09);
  border-color: rgba(106,176,212,0.45);
  text-shadow: 0 1px 10px rgba(0,0,0,0.75);
}

@media (max-width: 768px) and (orientation: portrait) {
  .pagination {
    width: 100%;
    padding: 4px;
    gap: 2px;
  }

  .pg-btn {
    width: clamp(24px, 6vw, 29px);
    height: clamp(29px, 7vw, 33px);
    font-size: clamp(0.52rem, 2.45vw, 0.62rem);
  }

  .pg-btn.pg-arrow {
    width: clamp(25px, 6.3vw, 31px);
    font-size: clamp(0.54rem, 2.5vw, 0.64rem);
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .pagination {
    width: min(100%, 560px);
  }

  .pg-btn {
    width: clamp(25px, 4.2vw, 32px);
    height: clamp(28px, 4.5vw, 34px);
    font-size: clamp(0.52rem, 1.65vw, 0.66rem);
  }

  .pg-btn.pg-arrow {
    width: clamp(27px, 4.5vw, 35px);
  }
}

@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
  .pagination {
    width: min(100%, 620px);
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1180px) {
  .cat-tabs {
    display: none !important;
  }

  .cat-select {
    display: block;
    width: fit-content;
    min-width: 168px;
    max-width: min(100%, 250px);
    min-height: clamp(36px, 5vw, 42px);
    margin: 0 0 clamp(20px, 3vw, 30px);
    padding-left: clamp(12px, 1.8vw, 16px);
    padding-right: clamp(34px, 4vw, 42px);
    font-size: clamp(0.58rem, 1.4vw, 0.68rem);
    letter-spacing: clamp(0.06em, 0.45vw, 0.1em);
  }
}

/* BTS category data is folded into the type control; its empty secondary row
   must not reserve an extra category-to-thumbnail gap. */
#behind-scene #bts-cat-tabs {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (hover: none) and (pointer: coarse) and (max-width: 768px) and (orientation: portrait) {
  .cat-select {
    min-width: 164px;
    max-width: min(100%, 220px);
    min-height: 38px;
    margin-bottom: 22px;
    font-size: clamp(0.58rem, 2.75vw, 0.66rem);
    letter-spacing: 0.075em;
  }

  #cinematography .video-grid,
  #photography .photo-grid,
  #behind-scene .video-grid,
  #behind-scene .photo-grid {
    padding-left: clamp(12px, 2.6vw, 20px);
    padding-right: clamp(12px, 2.6vw, 20px);
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 900px) and (orientation: landscape) {
  .cat-select {
    min-width: 160px;
    max-width: min(100%, 230px);
    min-height: 36px;
    margin-bottom: 20px;
    font-size: clamp(0.56rem, 1.55vw, 0.66rem);
    letter-spacing: 0.07em;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
  .cat-select {
    min-width: 176px;
    max-width: min(100%, 260px);
    min-height: 42px;
    margin-bottom: 30px;
  }

  #cinematography .video-grid,
  #photography .photo-grid,
  #behind-scene .video-grid,
  #behind-scene .photo-grid {
    padding-left: clamp(14px, 2.4vw, 26px);
    padding-right: clamp(14px, 2.4vw, 26px);
  }
}

/* Touch polish: compact dropdowns, swipe hints, and landscape density */
.swipe-hint {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .swipe-hint {
    position: fixed;
    left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    z-index: 2031;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(106,176,212,0.2);
    border-radius: 999px;
    background: rgba(5,5,5,0.28);
    color: rgba(255,255,255,0.64);
    font-family: var(--ff-sans);
    font-size: clamp(0.52rem, 1.45vw, 0.66rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: none;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .swipe-hint span:first-child,
  .swipe-hint span:last-child {
    color: var(--gold);
    font-size: 0.9em;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1180px) {
  .cat-select {
    min-width: 150px;
    max-width: min(100%, 206px);
    padding-right: 34px;
    background:
      linear-gradient(45deg, transparent 50%, rgba(232,232,232,0.8) 50%) calc(100% - 16px) 50% / 6px 6px no-repeat,
      linear-gradient(135deg, rgba(232,232,232,0.8) 50%, transparent 50%) calc(100% - 12px) 50% / 6px 6px no-repeat,
      rgba(255,255,255,0.055);
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 768px) and (orientation: portrait) {
  .cat-select {
    min-width: 150px;
    max-width: min(100%, 202px);
  }
}

/* Final touch landscape pass: stronger overrides for Safari/iPad viewport ranges */
/* Typography profiles from the admin panel take precedence on every device. */
.nav-link { font-size: var(--fs-nav, inherit) !important; }

/* Photo lightbox follows the same framed media and information-bar design as video. */
@media (hover: hover) and (pointer: fine) {
  #lightbox .lightbox-box {
    width: min(92vw, 1400px);
    max-width: min(92vw, 1400px);
    max-height: calc(100vh - 84px);
    overflow: visible;
    align-items: stretch;
    background: #080808;
    border: 1px solid var(--border);
    box-shadow: 0 24px 90px rgba(0,0,0,0.58);
  }

  #lightbox-img {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 190px);
    margin: 0 auto;
    border: 0;
    background: #000;
  }

  #lightbox-caption {
    margin: 0;
    padding: 16px 22px 4px;
    background: #080808;
    border-top: 1px solid var(--border);
    color: var(--white-p);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.35;
    text-align: left;
    text-transform: uppercase;
  }

  #photo-counter {
    display: block;
    padding: 4px 22px 18px;
    background: #080808;
    color: var(--gray);
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.18em;
  }
}

/* Dropdown mode: never render the button row and select at the same time. */
@media (hover: none) and (pointer: coarse) and (max-width: 1180px) {
  #cinematography .cat-tabs,
  #photography .cat-tabs,
  #behind-scene .cat-tabs {
    display: none !important;
  }

  #cinematography .cat-select,
  #photography .cat-select,
  #behind-scene .cat-select {
    display: block !important;
  }
}

/* Portrait touch modals: keep controls attached to media, not the browser edge. */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) and (orientation: portrait) {
  #video-modal.modal-overlay,
  #lightbox.modal-overlay {
    padding: 36px 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #video-modal .modal-nav,
  #lightbox .modal-nav {
    display: flex !important;
  }

  #video-modal .swipe-hint,
  #lightbox .swipe-hint {
    display: none !important;
  }

  #video-modal .modal-close,
  #lightbox .modal-close {
    position: absolute !important;
    top: -46px !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,0.26) !important;
    border-radius: 8px !important;
    background: rgba(5,5,5,0.72) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    z-index: 12 !important;
    overflow: visible !important;
  }

  #video-modal .modal-close::before,
  #video-modal .modal-close::after,
  #lightbox .modal-close::before,
  #lightbox .modal-close::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 16px; height: 2px;
    border-radius: 2px;
    background: rgba(255,255,255,0.94);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  #video-modal .modal-close::after,
  #lightbox .modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

  #video-modal .modal-box,
  #lightbox .lightbox-box {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
    max-height: calc(100svh - 72px) !important;
    overflow: visible !important;
  }

  #video-modal .modal-video-wrap { overflow: visible !important; }

  #lightbox-img {
    max-height: calc(100svh - 124px) !important;
  }

  #video-modal .modal-info {
    display: flex !important;
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 8px 0 0 !important;
    background: transparent !important;
  }

  #video-modal .modal-info h3,
  #video-modal .modal-info p {
    display: none !important;
  }

  #video-modal .modal-counter,
  #lightbox .modal-counter {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 6px 0 0 !important;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
    background: rgba(0,0,0,0.44);
    color: rgba(255,255,255,0.96) !important;
    letter-spacing: 0.12em;
  }

  .modal-yt-preview { position: absolute; inset: 0; z-index: 3; background: #000; }
  .modal-yt-preview[hidden] { display: none !important; }
  .modal-yt-play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
  .modal-yt-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .modal-yt-play span { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; border-radius: 13px; background: #ff0000; transform: translate(-50%, -50%); box-shadow: 0 8px 24px rgba(0,0,0,0.38); }
  .modal-yt-play span::after { content: ''; position: absolute; left: 28px; top: 14px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid #fff; }
}
#cinematography .video-grid { grid-template-columns:repeat(var(--grid-cinematography, 4), minmax(0, 1fr)) !important; }
#photography .photo-grid { grid-template-columns:repeat(var(--grid-photography, 5), minmax(0, 1fr)) !important; }
#ai-visuals .ai-grid { grid-template-columns:repeat(var(--grid-ai, 4), minmax(0, 1fr)) !important; }
#behind-scene .photo-grid { grid-template-columns:repeat(var(--grid-bts, 5), minmax(0, 1fr)) !important; }
#behind-scene .video-grid { grid-template-columns:repeat(var(--grid-bts, 5), minmax(0, 1fr)) !important; }

/* Design-owned typography scale. Admin controls color and font family only. */
.logo-name { font-size: calc(var(--fs-nav, 0.78rem) * 1.28) !important; }
.logo-sub { font-size: calc(var(--fs-nav, 0.78rem) * 0.9) !important; }

@media (max-width: 768px) {
  .logo-img { width: 38px !important; height: 38px !important; }
  .logo-name { font-size: calc(var(--fs-nav, 0.78rem) * 1.42) !important; }
}

#showreel .hero-title { font-size: var(--section-heading-size, clamp(2.8rem, 8vw, 7rem)) !important; }
#showreel .hero-summary { font-size: var(--section-body-size, var(--fs-body, inherit)) !important; }
#showreel .hero-role { font-size: calc(var(--section-body-size, 0.88rem) * 0.74) !important; }
#showreel .hero-kicker { font-size: calc(var(--section-body-size, 0.88rem) * 0.72) !important; }
#showreel .hero-btn { font-size: calc(var(--section-body-size, 0.94rem) * 0.9) !important; }

#about .about-name { font-size: var(--section-heading-size, 1.7rem) !important; }
#about .about-bio p { font-size: var(--section-body-size, var(--fs-body, inherit)) !important; }
#about .label-tag,
#about .skill-name,
#about .skill-percent { font-size: calc(var(--section-body-size, 0.84rem) * 0.82) !important; }
#about .skill-icon { font-size: 0.94em !important; }
#about .about-resume-btn { font-size: calc(var(--section-body-size, 0.94rem) * 0.88) !important; }

#cinematography .section-title,
#photography .section-title,
#ai-visuals .section-title,
#behind-scene .section-title {
  font-size: clamp(1.38rem, calc(var(--section-heading-size, var(--fs-heading, 1.6rem)) * 1.08), 2.24rem) !important;
}
#cinematography .section-title-icon,
#photography .section-title-icon,
#ai-visuals .section-title-icon,
#behind-scene .section-title-icon {
  font-size: 0.96em !important;
  margin-right: 0.46em !important;
  transform: none !important;
}

#cinematography .cat-tab,
#cinematography .cat-select,
#cinematography .video-placeholder p,
#cinematography .pagination .pg-btn,
#cinematography .empty-state,
#cinematography .grid-loading { font-size: var(--section-body-size, var(--fs-body, inherit)) !important; }
#cinematography .video-card-info h3 { font-size: calc(var(--section-body-size, 0.78rem) * 1) !important; }
#cinematography .video-card-meta,
#cinematography .video-placeholder span { font-size: calc(var(--section-body-size, 0.78rem) * 0.78) !important; }
#cinematography .cat-tab,
#cinematography .cat-select,
#cinematography .pagination .pg-btn { font-size: calc(var(--section-body-size, 0.84rem) * 0.95) !important; }

#photography .cat-tab,
#photography .cat-select,
#photography .pagination .pg-btn,
#photography .empty-state,
#photography .grid-loading { font-size: var(--section-body-size, var(--fs-body, inherit)) !important; }
#photography .photo-placeholder span { font-size: calc(var(--section-body-size, 0.78rem) * 0.82) !important; }
#photography .cat-tab,
#photography .cat-select,
#photography .pagination .pg-btn { font-size: calc(var(--section-body-size, 0.84rem) * 0.95) !important; }

#ai-visuals .cat-tab,
#ai-visuals .cat-select,
#ai-visuals .pagination .pg-btn,
#ai-visuals .empty-state,
#ai-visuals .grid-loading { font-size: var(--section-body-size, var(--fs-body, inherit)) !important; }
#ai-visuals .ai-card-title { font-size: calc(var(--section-body-size, 0.78rem) * 1) !important; }
#ai-visuals .ai-card-badge,
#ai-visuals .ai-card-meta { font-size: calc(var(--section-body-size, 0.78rem) * 0.78) !important; }
#ai-visuals .cat-tab,
#ai-visuals .cat-select,
#ai-visuals .pagination .pg-btn { font-size: calc(var(--section-body-size, 0.84rem) * 0.95) !important; }

#behind-scene .cat-tab,
#behind-scene .cat-select,
#behind-scene .pagination .pg-btn,
#behind-scene .empty-state,
#behind-scene .grid-loading { font-size: var(--section-body-size, var(--fs-body, inherit)) !important; }
#behind-scene .video-card-info h3 { font-size: calc(var(--section-body-size, 0.78rem) * 1) !important; }
#behind-scene .video-card-meta,
#behind-scene .photo-placeholder span { font-size: calc(var(--section-body-size, 0.78rem) * 0.78) !important; }
#behind-scene .cat-tab,
#behind-scene .cat-select,
#behind-scene .pagination .pg-btn { font-size: calc(var(--section-body-size, 0.84rem) * 0.95) !important; }

#contact .contact-name {
  font-size: clamp(1.42rem, calc(var(--section-heading-size, 1.55rem) * 0.82), 1.68rem) !important;
  letter-spacing: 0.075em !important;
  line-height: 1.04 !important;
  margin-bottom: 10px !important;
}
#about .name-ko,
#contact .name-ko {
  display: block !important;
  margin-top: 0.34em !important;
  font-size: 0.58em !important;
  letter-spacing: 0.06em !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
}
#contact .label-tag,
#contact .contact-role,
#contact .contact-tagline,
#contact .cf-result { font-size: var(--section-body-size, var(--fs-body, inherit)) !important; }
#contact .contact-role {
  font-size: clamp(0.64rem, calc(var(--section-body-size, 0.96rem) * 0.76), 0.74rem) !important;
  letter-spacing: 0.14em !important;
  line-height: 1.65 !important;
  margin-bottom: 28px !important;
}
#contact .contact-tagline {
  font-size: clamp(0.88rem, calc(var(--section-body-size, 0.96rem) * 0.98), 0.96rem) !important;
  line-height: 1.72 !important;
  letter-spacing: 0.01em !important;
  max-width: 680px !important;
  margin-bottom: 38px !important;
  text-align: justify !important;
  text-align-last: left !important;
  text-justify: inter-word;
}
@media (max-width: 768px) {
  #contact .contact-tagline,
  #contact .contact-bio p {
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-word;
    letter-spacing: 0 !important;
    word-spacing: normal;
    hyphens: auto;
  }
}
#contact .label-tag,
#contact .cf-label { font-size: calc(var(--section-body-size, 0.96rem) * 0.72) !important; }
#contact .label-tag { letter-spacing: 0.34em !important; }
#contact .cf-input {
  font-size: clamp(0.82rem, calc(var(--section-body-size, 0.96rem) * 0.88), 0.9rem) !important;
  letter-spacing: 0.025em !important;
}
#contact .cf-input::placeholder { letter-spacing: 0.02em !important; }
#contact .cf-submit {
  font-size: clamp(0.68rem, calc(var(--section-body-size, 0.96rem) * 0.74), 0.76rem) !important;
  letter-spacing: 0.18em !important;
}
#contact .cf-submit i { font-size: 1.02em !important; }
#contact .contact-btn i { font-size: calc(var(--section-body-size, 0.96rem) * 1.18) !important; }

#main-footer .footer-brand {
  font-size: var(--footer_media-heading-size, 0.72rem) !important;
}

#main-footer #footer-credit-label,
#main-footer #footer-credit-name,
#main-footer .footer-credit-tool {
  font-size: clamp(0.58rem, calc(var(--footer_media-body-size, 0.68rem) * 1.02), 0.68rem) !important;
}

#main-footer #footer-credit-name { color: rgba(255,255,255,0.7); }
#main-footer #footer-credit-label,
#main-footer .footer-credit-tool { color: rgba(255,255,255,0.5); }

#main-footer .footer-credit,
#main-footer .footer-admin,
#resume-loading,
#resume-open-tab { font-size: calc(var(--footer_media-body-size, 0.6rem) * 0.88) !important; }

#main-footer .footer-credit {
  font-size: clamp(0.54rem, calc(var(--footer_media-body-size, 0.6rem) * 0.88), 0.62rem) !important;
}

#main-footer .footer-admin {
  font-size: clamp(0.46rem, calc(var(--footer_media-body-size, 0.6rem) * 0.72), 0.52rem) !important;
}

#main-footer .footer-copy {
  font-size: clamp(0.56rem, calc(var(--footer_media-body-size, 0.6rem) * 1.02), 0.66rem) !important;
}

@media (min-width: 1025px) {
  #main-footer #footer-credit-label,
  #main-footer #footer-credit-name,
  #main-footer .footer-credit-tool {
    font-size: clamp(0.62rem, calc(var(--footer_media-body-size, 0.68rem) * 1.08), 0.72rem) !important;
  }

  #main-footer .footer-credit {
    font-size: clamp(0.58rem, calc(var(--footer_media-body-size, 0.6rem) * 0.94), 0.66rem) !important;
  }

  #main-footer .footer-copy {
    font-size: clamp(0.6rem, calc(var(--footer_media-body-size, 0.6rem) * 1.08), 0.7rem) !important;
  }

  #main-footer .footer-admin {
    font-size: clamp(0.48rem, calc(var(--footer_media-body-size, 0.6rem) * 0.76), 0.54rem) !important;
  }
}

.resume-modal-toolbar > span {
  font-size: 0.8rem !important;
  letter-spacing: 0.18em !important;
}
#resume-open-tab {
  width: 38px !important;
  height: 38px !important;
  font-size: 0.92rem !important;
}
#resume-close {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  font-size: 1.42rem !important;
}

#modal-title,
#lightbox-caption {
  font-size: 0.88rem !important;
  letter-spacing: 0.16em !important;
  line-height: 1.35 !important;
}

#modal-desc,
#video-modal .modal-counter,
#lightbox .modal-counter,
#photo-counter {
  font-size: 0.76rem !important;
}

/* One close-button language across desktop, tablet, and mobile media modals. */
#video-modal .modal-close,
#lightbox .modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: 8px;
  background: rgba(5,5,5,0.72);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
#video-modal .modal-close::before,
#video-modal .modal-close::after,
#lightbox .modal-close::before,
#lightbox .modal-close::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.94);
  transform: translate(-50%, -50%) rotate(45deg);
}
#video-modal .modal-close::after,
#lightbox .modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  #video-modal .modal-close,
  #lightbox .modal-close {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
    z-index: 2035 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: 1px solid rgba(255,255,255,0.26) !important;
    border-radius: 8px !important;
    background: rgba(5,5,5,0.72) !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .video-card,
  .photo-card,
  .ai-card,
  .modal-overlay,
  .modal-box,
  .lightbox-box,
  .modal-video-wrap,
  #modal-iframe,
  #lightbox-img {
    touch-action: manipulation;
  }

  #modal-embed-fallback {
    z-index: 4;
  }

  .video-card-thumb,
  .photo-card-img,
  .ai-card img,
  .ai-card-media {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, opacity;
  }

  .video-card,
  .photo-card,
  .ai-card {
    backface-visibility: hidden;
    contain: paint;
    transform: translateZ(0);
    will-change: transform, opacity;
  }

  .video-card.reveal,
  .photo-card.reveal,
  .ai-card.reveal {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
      opacity 0.48s ease,
      transform 0.48s cubic-bezier(.2,.74,.18,1),
      border-color var(--t),
      box-shadow var(--t),
      background var(--t);
  }

  .video-card.reveal.visible,
  .photo-card.reveal.visible,
  .ai-card.reveal.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .video-card:hover .video-card-thumb,
  .photo-card:hover .photo-card-img {
    transform: none !important;
    filter: brightness(0.95) saturate(1) !important;
  }

  .video-card:hover .video-card-info,
  .video-card:focus-visible .video-card-info,
  .video-card:focus-within .video-card-info,
  .ai-card:hover .ai-card-info,
  .ai-card:focus-visible .ai-card-info,
  .ai-card:focus-within .ai-card-info { transition-duration: 0.18s; }
}

@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (max-width: 1366px) {
  .video-card.reveal,
  .photo-card.reveal,
  .ai-card.reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
      opacity 0.62s ease,
      transform 0.62s cubic-bezier(.22,.72,.18,1),
      border-color var(--t),
      box-shadow var(--t),
      background var(--t);
  }

  .video-card.reveal.visible,
  .photo-card.reveal.visible,
  .ai-card.reveal.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Final mobile-portrait media layout: keep close and counter close to the frame. */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) and (orientation: portrait) {
  #video-modal .modal-close,
  #lightbox .modal-close {
    top: -42px !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 7px !important;
  }

  #video-modal .modal-close::before,
  #video-modal .modal-close::after,
  #lightbox .modal-close::before,
  #lightbox .modal-close::after {
    width: 14px !important;
  }

  #video-modal .modal-box {
    justify-content: flex-start !important;
    gap: 0 !important;
    transform: translateY(-16px) !important;
  }

  #video-modal .modal-info {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
  }

  #video-modal .modal-counter {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    transform: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 6px 12px !important;
  }

  #video-modal .modal-nav,
  #lightbox .modal-nav {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  #video-modal .modal-close,
  #lightbox .modal-close {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

/* Landscape touch modals: keep the counter below the media, never over it. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  #video-modal .modal-close,
  #lightbox .modal-close {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  #video-modal .modal-close::before,
  #video-modal .modal-close::after,
  #lightbox .modal-close::before,
  #lightbox .modal-close::after {
    width: 14px !important;
  }

  #video-modal .modal-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #video-modal .modal-info {
    display: flex !important;
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    justify-content: center !important;
    background: transparent !important;
  }

  #video-modal .modal-info h3,
  #video-modal .modal-info p { display: none !important; }

  #video-counter {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    transform: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 6px 12px !important;
  }
}

/* Show compact video details on phone portrait and tablet modals.
   Phone landscape stays media-first because vertical space is too tight. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 900px) and (min-height: 560px) {
  #video-modal.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 48px)
      max(12px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom, 0px) + 14px)
      max(12px, env(safe-area-inset-left)) !important;
  }

  #video-modal .modal-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: min(calc(100vw - 24px), 980px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100svh - 72px) !important;
    overflow: visible !important;
    background: #000 !important;
  }

  #video-modal .modal-video-wrap {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-height: calc(100svh - 196px) !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
  }

  #video-modal .modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title counter"
      "desc counter" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  #video-modal .modal-info h3,
  #video-modal .modal-info p {
    display: -webkit-box !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }

  #modal-title {
    grid-area: title !important;
    color: rgba(255,255,255,0.94) !important;
    font-size: clamp(0.68rem, 1.9vw, 0.86rem) !important;
    line-height: 1.28 !important;
    letter-spacing: 0.06em !important;
  }

  #modal-desc {
    grid-area: desc !important;
    color: rgba(232,232,232,0.56) !important;
    font-size: clamp(0.58rem, 1.55vw, 0.72rem) !important;
    line-height: 1.42 !important;
    letter-spacing: 0.035em !important;
  }

  #video-counter {
    grid-area: counter !important;
    align-self: center !important;
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    transform: none !important;
    min-width: 58px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.08em !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 480px) and (orientation: portrait) {
  #video-modal .modal-video-wrap {
    max-height: calc(100svh - 188px) !important;
  }

  #video-modal .modal-info {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "desc"
      "counter" !important;
    justify-items: center !important;
    padding-top: 9px !important;
  }

  #video-modal .modal-info h3,
  #video-modal .modal-info p {
    text-align: left !important;
  }

  #video-counter {
    margin-top: 4px !important;
  }
}

/* Final portrait pass: align controls to the media itself, not the full overlay. */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) and (orientation: portrait) {
  #video-modal .modal-nav,
  #lightbox .modal-nav {
    top: var(--modal-media-center, 50%) !important;
    transform: translateY(-50%) !important;
  }

  #lightbox .lightbox-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  #lightbox-caption {
    margin: 0 !important;
    min-height: 0 !important;
  }

  #photo-counter {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 6px 0 0 !important;
    padding: 6px 12px !important;
  }
}

/* Landscape photos use all available space and keep their counter just below the image. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  #lightbox .lightbox-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: min(98vw, 1800px) !important;
    max-width: 98vw !important;
    max-height: calc(100svh - 16px) !important;
  }

  #lightbox-img {
    width: auto !important;
    max-width: 98vw !important;
    max-height: calc(100svh - 20px) !important;
    object-fit: contain !important;
  }

  #lightbox-caption { margin: 0 !important; min-height: 0 !important; }

  #lightbox .modal-counter,
  #photo-counter {
    position: absolute !important;
    left: 50% !important;
    bottom: 8px !important;
    z-index: 12 !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    background: rgba(5,5,5,0.58) !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1180px) {
  .cat-select {
    width: 174px !important;
    min-width: 174px !important;
    max-width: 174px !important;
    min-height: 36px !important;
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 30px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.055em !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .hero-title {
    font-size: clamp(1.75rem, 7.2vw, 3.55rem) !important;
  }

  .showreel-player {
    width: min(calc(100% - 52px), 980px) !important;
  }

  #cinematography .video-grid {
    grid-template-columns: repeat(var(--grid-cinematography, 3), minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #cinematography .video-card {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Safe landscape pass for mobile browsers that do not report pointer/hover reliably. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  .hero-title {
    font-size: clamp(1.65rem, 6.4vw, 3.25rem) !important;
    letter-spacing: 0.055em !important;
  }

  .section-showreel {
    gap: 18px;
  }

  .showreel-player {
    width: min(calc(100% - 56px), 940px, calc(88svh * 16 / 9)) !important;
  }

  #cinematography .video-grid {
    grid-template-columns: repeat(var(--grid-cinematography, 3), minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: min(100%, 1540px) !important;
    overflow: hidden !important;
  }

  #cinematography .video-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  #cinematography .video-card-info h3 {
    font-size: clamp(0.58rem, 1.55vw, 0.72rem);
    line-height: 1.35;
  }
}

/* Keep every portfolio control inside its glass panel on wide touch tablets. */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1600px) and (orientation: landscape) {
  .portfolio-section {
    padding-left: clamp(24px, 4vw, 56px);
    padding-right: clamp(24px, 4vw, 56px);
    overflow-x: clip;
  }

  .portfolio-section .section-header,
  .portfolio-section .video-grid,
  .portfolio-section .photo-grid,
  .portfolio-section .ai-grid,
  .portfolio-section .pagination {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #cinematography .video-grid,
  #photography .photo-grid,
  #behind-scene .video-grid,
  #behind-scene .photo-grid {
    padding-left: clamp(12px, 1.6vw, 22px);
    padding-right: clamp(12px, 1.6vw, 22px);
  }

  .portfolio-section .cat-select {
    box-sizing: border-box;
    max-width: min(100%, 220px) !important;
  }

  .portfolio-section .video-card,
  .portfolio-section .photo-card,
  .portfolio-section .ai-card {
    min-width: 0;
    max-width: 100%;
  }
}

@media (min-width: 601px) {
  .hero-actions {
    flex-wrap: nowrap;
  }

  .hero-btn,
  #hero-secondary-btn {
    flex: 0 0 auto;
    flex-basis: auto;
    margin-inline: 0;
  }
}

/* ================================================================
   SUBTLE MOTION POLISH
   Quiet cinematic motion across desktop, tablet, and mobile.
   ================================================================ */
@keyframes bmk-rise-soft {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes bmk-line-draw {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes bmk-modal-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bmk-breath {
  0%, 100% { opacity: 0.62; transform: scaleX(0.82); }
  50% { opacity: 1; transform: scaleX(1); }
}

html.chrome-ready .hero-kicker,
html.chrome-ready .hero-title,
html.chrome-ready .hero-role,
html.chrome-ready .hero-summary,
html.chrome-ready .hero-actions {
  opacity: 0;
  animation: bmk-rise-soft 0.72s var(--ease) forwards;
  will-change: transform, opacity, filter;
}

html.chrome-ready .hero-kicker { animation-delay: 0.04s; }
html.chrome-ready .hero-title { animation-delay: 0.12s; }
html.chrome-ready .hero-role { animation-delay: 0.20s; }
html.chrome-ready .hero-summary { animation-delay: 0.28s; }
html.chrome-ready .hero-actions { animation-delay: 0.36s; }

.section-header.reveal.visible .section-title {
  animation: bmk-rise-soft 0.62s var(--ease) both;
}

.section-header.reveal.visible .section-cert,
.section-header.reveal.visible .section-hint {
  animation: bmk-rise-soft 0.56s var(--ease) 0.10s both;
}

.showreel-label-row.reveal.visible {
  animation: bmk-rise-soft 0.68s var(--ease) both;
}

.section-title,
.hero-title,
.contact-name,
.about-name {
  position: relative;
  overflow: hidden;
}

.hero-btn,
.cat-tab,
.contact-btn,
.about-resume-btn,
.cf-submit,
.pg-btn {
  will-change: transform;
}

.hero-btn:hover,
.cat-tab:hover,
.contact-btn:hover,
.about-resume-btn:hover,
.cf-submit:hover,
.pg-btn:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}

.hero-btn:active,
.cat-tab:active,
.contact-btn:active,
.about-resume-btn:active,
.cf-submit:active,
.pg-btn:active {
  transform: translateY(0) scale(0.985);
}

.video-card,
.photo-card,
.ai-card {
  transition:
    transform 0.42s var(--ease),
    opacity 0.48s ease,
    border-color var(--t),
    box-shadow 0.42s var(--ease),
    background var(--t);
  will-change: transform, opacity;
}

.photo-card-overlay i {
  transition: transform var(--t) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .video-card:hover,
  .photo-card:hover,
  .ai-card:hover,
  .video-card.reveal.visible:hover,
  .photo-card.reveal.visible:hover,
  .ai-card.reveal.visible:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 26px 72px rgba(0,0,0,0.34);
  }

  .video-card:hover .play-btn,
  .photo-card:hover .photo-card-overlay i {
    transform: scale(1.08);
  }
}

@media (hover: none), (pointer: coarse) {
  .video-card:active,
  .photo-card:active,
  .ai-card:active,
  .video-card.reveal.visible:active,
  .photo-card.reveal.visible:active,
  .ai-card.reveal.visible:active {
    transform: translate3d(0, -2px, 0) scale(0.992);
    border-color: rgba(106,176,212,0.32);
  }
}

/* Phone galleries are intentionally static. iOS Safari can repaint transformed
   thumbnail layers while momentum scrolling; removing card motion and hover
   composites prevents repeat flashing. Tablet and desktop reveals stay intact. */
@media (max-width: 768px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  .video-card-info h3,
  .video-card-label,
  .ai-card-title,
  .ai-card-badge {
    display: none !important;
  }

  .video-card-info,
  .ai-card-info {
    display: block !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 7px !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  .video-card-meta,
  .ai-card-meta {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    border-radius: 4px;
    color: #76c4e8 !important;
    background: rgba(0,0,0,0.58) !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.12em !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  }

  .video-card,
  .photo-card,
  .ai-card,
  .video-card.reveal,
  .photo-card.reveal,
  .ai-card.reveal,
  .video-card.reveal.visible,
  .photo-card.reveal.visible,
  .ai-card.reveal.visible,
  .video-card.reveal-settled,
  .photo-card.reveal-settled,
  .ai-card.reveal-settled,
  .video-card:hover,
  .photo-card:hover,
  .ai-card:hover,
  .video-card:active,
  .photo-card:active,
  .ai-card:active {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    contain: none !important;
    isolation: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    box-shadow: none !important;
  }

  .video-card::before,
  .video-card::after,
  .photo-card::before,
  .photo-card::after,
  .ai-card::before,
  .ai-card::after {
    display: none !important;
  }

  .video-card-overlay {
    opacity: 1 !important;
    background: none !important;
    transition: none !important;
  }

  .photo-card-overlay {
    display: none !important;
  }

  .video-card-thumb,
  .photo-card-img,
  .ai-card img,
  .ai-card-media,
  .video-card:hover .video-card-thumb,
  .photo-card:hover .photo-card-img,
  .ai-card:hover img {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    contain: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }
}

/* Confirmed taps get one short feedback pulse; scroll gestures never add this
   class because browsers suppress click after a drag/scroll gesture. */
@media (max-width: 768px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  .video-card.tap-feedback .video-card-thumb,
  .photo-card.tap-feedback .photo-card-img {
    filter: brightness(0.76) saturate(0.96) !important;
    transform: scale(0.985) !important;
    -webkit-transform: scale(0.985) !important;
    transition:
      filter 0.12s ease,
      transform 0.14s cubic-bezier(.2,.7,.2,1) !important;
  }

  #cinematography .video-card.tap-feedback .play-btn,
  #behind-scene .video-card.tap-feedback .play-btn {
    transform: translate(-50%,-50%) scale(0.84) !important;
    -webkit-transform: translate(-50%,-50%) scale(0.84) !important;
    background: rgba(255,255,255,0.94) !important;
    color: #080808 !important;
    transition:
      transform 0.12s ease,
      background 0.12s ease,
      color 0.12s ease !important;
  }

  .video-card.tap-feedback,
  .photo-card.tap-feedback {
    border-color: rgba(118,196,232,0.72) !important;
  }
}

/* Mobile video cards use one stable raster layer. The full-card overlay no
   longer paints; only the centered play button remains interactive/visible. */
@media (max-width: 768px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  .video-card,
  .video-card.reveal,
  .video-card.reveal.visible,
  .video-card.reveal-settled {
    transform: translate3d(0,0,0) !important;
    -webkit-transform: translate3d(0,0,0) !important;
    contain: paint !important;
    isolation: isolate !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  .video-card-overlay {
    display: contents !important;
  }

  .video-card .play-btn,
  .video-card:hover .play-btn,
  .video-card:focus-visible .play-btn,
  .video-card:focus-within .play-btn {
    position: absolute !important;
    z-index: 4 !important;
    top: 50% !important;
    left: 50% !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    transform: translate(-50%,-50%) !important;
    -webkit-transform: translate(-50%,-50%) !important;
  }

  #cinematography .video-card-meta,
  #behind-scene .video-card-meta,
  #ai-visuals .ai-card-meta {
    font-size: 7px !important;
    line-height: 1.1 !important;
    padding: 2px 5px !important;
    letter-spacing: 0.1em !important;
  }
}

/* Cinematic modal entrance for both mouse and touch. */
#video-modal,
#lightbox {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.42s;
}

#video-modal.open,
#lightbox.open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

#video-modal .modal-box,
#lightbox .lightbox-box {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.94);
  filter: blur(8px);
  animation: none !important;
  transition:
    opacity 0.34s ease,
    transform 0.46s cubic-bezier(.16,.84,.22,1),
    filter 0.36s ease;
  will-change: opacity, transform, filter;
}

#video-modal.open .modal-box,
#lightbox.open .lightbox-box {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  #video-modal,
  #lightbox,
  #video-modal .modal-box,
  #lightbox .lightbox-box {
    transition: none !important;
    filter: none !important;
  }
}

.modal-box,
.lightbox-box,
.resume-modal-box {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.985);
  transition: opacity 0.28s ease, transform 0.34s var(--ease);
  will-change: transform, opacity;
}

.modal-overlay.open .modal-box,
.modal-overlay.open .lightbox-box,
.modal-overlay.open .resume-modal-box {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: bmk-modal-in 0.34s var(--ease) both;
}

.modal-nav:hover {
  box-shadow: 0 12px 34px rgba(0,0,0,0.32);
}

.modal-nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.modal-nav--next:hover { transform: translateY(-50%) translateX(2px); }

@media (hover: none) and (pointer: coarse) {
  html.chrome-ready .hero-kicker,
  html.chrome-ready .hero-title,
  html.chrome-ready .hero-role,
  html.chrome-ready .hero-summary,
  html.chrome-ready .hero-actions {
    animation-duration: 0.52s;
  }

  .section-header.reveal.visible .section-title,
  .section-header.reveal.visible .section-cert,
  .section-header.reveal.visible .section-hint,
  .showreel-label-row.reveal.visible {
    animation-duration: 0.44s;
  }

  .modal-box,
  .lightbox-box,
  .resume-modal-box {
    transition-duration: 0.22s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .video-card.reveal,
  .photo-card.reveal,
  .ai-card.reveal,
  .modal-box,
  .lightbox-box,
  .resume-modal-box {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .bokeh {
    animation: none !important;
    opacity: var(--bk-op) !important;
    transform: none !important;
  }

  body::after,
  .section-title::before,
  .hero-title::after,
  .contact-name::after,
  .about-name::after,
  .hero-btn::after,
  .about-resume-btn::after,
  .cat-tab::after,
  .pg-btn::after,
  .cf-submit::after {
    display: none !important;
  }
}

/* ================================================================
   PREMIUM SURFACE POLISH
   Subtle finish layer: film texture, softer depth, refined controls.
   ================================================================ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.2) 0 1px, transparent 1px 4px);
}

#main-nav {
  background: rgba(5,5,5,0.82);
  border-bottom: 1px solid rgba(255,255,255,0.075);
  box-shadow: 0 10px 42px rgba(0,0,0,0.26);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.section-header,
.showreel-label-row,
.contact-inner {
  position: relative;
}

.section-header::before,
.showreel-label-row::before,
.contact-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: min(180px, 38vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(106,176,212,0.34), rgba(255,255,255,0.18), transparent);
  opacity: 0.46;
}

.label-tag,
.section-title,
.showreel-label-row .label-tag {
  text-shadow: 0 0 22px rgba(106,176,212,0.12);
}

.video-card,
.photo-card,
.ai-card {
  border-color: rgba(255,255,255,0.105);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
    rgba(12,12,12,0.84);
  box-shadow:
    0 16px 46px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.045);
}

.video-card::before,
.photo-card::before,
.ai-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.42s var(--ease);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(180deg, transparent 52%, rgba(5,5,5,0.26));
}

.video-card:hover::before,
.photo-card:hover::before,
.ai-card:hover::before,
.video-card:focus-visible::before,
.photo-card:focus-visible::before,
.ai-card:focus-visible::before {
  opacity: 0.54;
}

.video-card-info,
.ai-card-info {
  z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.82) 46%, rgba(0,0,0,0.94));
}

.photo-card-overlay {
  z-index: 3;
  background: radial-gradient(circle at 50% 50%, rgba(106,176,212,0.16), transparent 34%);
}

@media (hover: hover) and (pointer: fine) {
  .video-card:hover,
  .photo-card:hover,
  .ai-card:hover,
  .video-card.reveal.visible:hover,
  .photo-card.reveal.visible:hover,
  .ai-card.reveal.visible:hover {
    transform: translate3d(0, -5px, 0);
    border-color: rgba(106,176,212,0.32);
    box-shadow:
      0 30px 78px rgba(0,0,0,0.42),
      0 0 0 1px rgba(106,176,212,0.08),
      inset 0 1px 0 rgba(255,255,255,0.07);
  }
}

.cf-input {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008)),
    rgba(14,14,14,0.86);
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.cf-input:focus {
  border-color: rgba(106,176,212,0.62);
  box-shadow:
    0 0 0 3px rgba(106,176,212,0.075),
    0 14px 38px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.055);
  background: rgba(16,16,16,0.92);
}

.cf-submit,
.hero-btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 12px 34px rgba(106,176,212,0.16),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

.hero-btn-secondary,
.about-resume-btn,
.cat-tab,
.pg-btn {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.012)),
    rgba(8,8,8,0.56);
  border-color: rgba(255,255,255,0.12);
}

/* ================================================================
   CINEMATIC HERO — editorial opening, premium hierarchy
   ================================================================ */
.section-showreel {
  position: relative;
  isolation: isolate;
  gap: clamp(14px, 1.8vw, 24px);
  padding-bottom: clamp(68px, 7vw, 108px);
  overflow: clip;
  background: transparent !important;
}

.section-showreel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--nav-h) 0 auto;
  height: min(720px, 72vh);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 12%, rgba(106,176,212,0.035), transparent 40%);
}

.hero-intro {
  width: min(1120px, calc(100% - 64px));
  padding: clamp(28px, 3.6vh, 48px) clamp(28px, 5vw, 72px) 0;
}

.hero-intro::before {
  content: "";
  position: absolute;
  inset: 34px 0 -24px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(255,255,255,0.028), rgba(255,255,255,0.006));
  box-shadow: inset 0 1px rgba(255,255,255,0.035), 0 30px 90px rgba(0,0,0,0.18);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
}

.hero-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 0.61rem;
  letter-spacing: 0.38em;
  color: #83c7e8;
}

.hero-kicker::before,
.hero-kicker::after {
  content: "";
  width: clamp(30px, 5vw, 68px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(131,199,232,0.66));
}
.hero-kicker::after { transform: scaleX(-1); }

.hero-title {
  font-family: var(--ff-noto);
  font-size: clamp(3rem, 6.8vw, 6.8rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: 24px;
  background: linear-gradient(180deg, #fff 12%, #d5d8da 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 20px 60px rgba(0,0,0,0.42);
}

.hero-role {
  width: fit-content;
  margin: 0 auto 17px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px;
  background: rgba(5,5,5,0.34);
  backdrop-filter: blur(10px);
  color: rgba(238,242,244,0.68);
}

.hero-summary { max-width: 620px; margin-bottom: 28px; color: rgba(238,242,244,0.72); }
.hero-actions { gap: 10px; margin-bottom: 0; }
.hero-btn { min-height: 50px; padding: 13px 24px; border-radius: 999px; }
.hero-btn-primary { padding-inline: 30px; }
.hero-btn-secondary { color: rgba(255,255,255,0.76); }

.hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.42);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: color var(--t), transform var(--t);
}
.hero-scroll-cue:hover { color: var(--gold); transform: translateY(2px); }
.hero-scroll-cue i { font-size: 0.6rem; }

.showreel-player {
  position: relative;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 12px;
  box-shadow: 0 36px 110px rgba(0,0,0,0.58), 0 0 0 1px rgba(106,176,212,0.035);
  overflow: hidden;
}
.showreel-player::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255,255,255,0.14), inset 0 0 80px rgba(0,0,0,0.14);
}

@media (max-width: 768px) {
  .hero-intro { width: min(100% - 24px, 640px); padding: 42px 18px 0; }
  .hero-intro::before { inset: 22px 0 -18px; }
  .hero-title { font-size: clamp(2.25rem, 12vw, 4.5rem); white-space: normal; margin-bottom: 20px; }
  .hero-kicker { letter-spacing: 0.22em; gap: 10px; }
  .hero-role { font-size: 0.62rem; padding: 7px 11px; }
  .hero-summary { font-size: 0.88rem; max-width: 34rem; }
  .hero-actions { margin-bottom: 24px; }
  .hero-btn { min-height: 46px; border-radius: 999px; }
  .hero-scroll-cue { font-size: 0.5rem; }
  .showreel-player { border-radius: 9px; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .hero-btn, #hero-secondary-btn { width: 100%; flex-basis: auto; }
  .hero-scroll-cue { display: none; }
}

/* ================================================================
   PREMIUM CONTACT — editorial profile + focused project form
   ================================================================ */
.section-contact {
  position: relative;
  isolation: isolate;
  padding: clamp(92px, 10vw, 150px) clamp(20px, 5vw, 72px) clamp(72px, 8vw, 110px);
  text-align: left;
  overflow: clip;
}
.section-contact::before {
  display: none;
}
.contact-inner {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(440px, 1.18fr);
  max-width: 1180px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #090909;
  border-color: rgba(255,255,255,0.11);
  box-shadow: 0 44px 130px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.contact-inner::before { display: none; }
.contact-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(42px, 5vw, 68px);
  overflow: hidden;
  background: #0b0b0b;
  border-right: 1px solid rgba(255,255,255,0.09);
}
.contact-profile::after {
  display: none;
}
.contact-photo-wrap {
  width: 132px;
  height: 132px;
  margin: 0 auto 36px;
  border: 1px solid rgba(131,199,232,0.45);
  box-shadow: none;
  overflow: visible;
}

.contact-photo-wrap img { border-radius: 50%; }
.contact-profile .label-tag { margin-bottom: 18px; letter-spacing: 0.36em; color: #83c7e8; }
.contact-name { width: 100%; font-size: clamp(1.65rem, 2.7vw, 2.65rem); line-height: 1.05; margin-bottom: 16px; letter-spacing: 0.045em; text-align: center; }
.contact-name .name-ko { display: block; margin-top: 10px; font-size: 0.52em; color: rgba(255,255,255,0.62); letter-spacing: 0.04em; }
.contact-role { max-width: 100%; margin: 0 auto 30px; font-size: clamp(0.52rem, 0.72vw, 0.64rem); letter-spacing: 0.11em; line-height: 1.85; color: rgba(232,232,232,0.5); text-align: center; white-space: nowrap; }
.contact-tagline { max-width: 35rem; margin: 0 auto 28px; text-align: center; text-wrap: balance; font-size: 0.89rem; line-height: 1.9; color: rgba(232,232,232,0.68); }
.contact-links { justify-content: center; margin-top: auto; padding-top: 34px; grid-template-columns: repeat(auto-fit, 44px); gap: 9px; width: 100%; }
.contact-btn { width: 44px; height: 44px; }
.contact-btn i { font-size: 0.98rem; }

.contact-form {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(42px, 5vw, 68px);
  gap: 22px;
  background: #080808;
}
.contact-form-heading { margin-bottom: 8px; }
.contact-form-heading > span { color: var(--gold); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.3em; }
.contact-form-heading h3 { margin: 12px 0 10px; color: var(--white-p); font-family: var(--ff-noto); font-size: clamp(1.55rem, 2.6vw, 2.4rem); font-weight: 800; line-height: 1.12; }
.contact-form-heading p { color: rgba(232,232,232,0.52); font-size: 0.78rem; line-height: 1.65; }
.cf-label { font-size: 0.61rem; letter-spacing: 0.22em; color: rgba(131,199,232,0.82); }
.cf-input { min-height: 54px; padding: 15px 17px; border-radius: 8px; border-color: rgba(255,255,255,0.11); background: rgba(255,255,255,0.025); }
.cf-input:hover { border-color: rgba(255,255,255,0.2); }
.cf-input:focus { border-color: rgba(106,176,212,0.7); }
.cf-textarea { min-height: 160px; }
.cf-submit { align-self: stretch; min-height: 54px; border-radius: 999px; margin-top: 2px; }

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; max-width: 720px; }
  .contact-profile { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.09); }
  .contact-tagline { max-width: 580px; }
  .contact-links { margin-top: 0; }
}
@media (max-width: 600px) {
  .section-contact { padding-inline: 14px; }
  .contact-inner { border-radius: 12px; }
  .contact-profile, .contact-form { padding: 34px 24px; }
  .contact-photo-wrap { width: 108px; height: 108px; margin-bottom: 28px; }
  .contact-name { font-size: clamp(1.5rem, 8vw, 2rem); }
  .contact-role { font-size: clamp(0.48rem, 2.15vw, 0.58rem); letter-spacing: 0.07em; }
  .contact-tagline { text-align: center; }
  .cf-input { min-height: 50px; }
  .cf-textarea { min-height: 128px; }
}

/* ================================================================
   PREMIUM ABOUT — integrated portrait and expertise dashboard
   ================================================================ */
.section-about { padding: clamp(92px, 9vw, 140px) clamp(20px, 5vw, 72px); }
.about-inner {
  grid-template-columns: minmax(360px, 0.88fr) minmax(500px, 1.12fr);
  gap: 24px;
  max-width: 1240px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.105);
  border-radius: 18px;
  background: rgba(6,6,6,0.88);
  box-shadow: 0 38px 120px rgba(0,0,0,0.46), inset 0 1px rgba(255,255,255,0.035);
  overflow: hidden;
}
.about-left,
.about-right {
  border: 1px solid rgba(255,255,255,0.105);
  border-radius: 16px;
  background: rgba(8,8,8,0.86);
  box-shadow: inset 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
}
.about-left { display: block; padding: 12px; }
.about-photo-wrap { width: 100%; margin: 0; }
.about-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  filter: saturate(0.9) contrast(1.02);
}
.about-photo-wrap::after {
  content: "VISUAL STORYTELLER";
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  color: rgba(255,255,255,0.72);
  background: rgba(5,5,5,0.6);
  backdrop-filter: blur(12px);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}
.about-bio-block {
  padding: clamp(30px, 4vw, 48px) clamp(24px, 3.5vw, 42px) 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.about-bio-block > .label-tag,
.about-right > .label-tag { display: flex; align-items: center; gap: 12px; color: #83c7e8; letter-spacing: 0.34em; }
.about-bio-block > .label-tag::after,
.about-right > .label-tag::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(131,199,232,0.32), transparent); }
.about-name { font-size: clamp(1.55rem, 2.5vw, 2.25rem); letter-spacing: 0.065em; margin: 20px 0 24px; }
.about-bio { margin-bottom: 30px; }
.about-bio p { text-align: left; font-size: 0.88rem; line-height: 1.9; color: rgba(232,232,232,0.66); }
.about-resume-btn { min-height: 48px; padding: 12px 22px; border-radius: 999px; border-color: rgba(106,176,212,0.42); background: rgba(106,176,212,0.06); }

.about-right { padding: clamp(30px, 3.5vw, 46px); }
.about-right > .label-tag { margin-bottom: 30px !important; }
.skills-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.skill-item {
  position: relative;
  min-height: 112px;
  padding: 20px;
  border-color: rgba(255,255,255,0.09);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.skill-item:hover { transform: translateY(-3px); border-color: rgba(106,176,212,0.3); background: rgba(106,176,212,0.045); }
.skill-header { align-items: flex-start; margin-bottom: 22px; }
.skill-name { align-items: flex-start; gap: 11px; font-size: 0.66rem; line-height: 1.5; letter-spacing: 0.11em; }
.skill-icon { display: grid; place-items: center; width: 28px; height: 28px; flex-basis: 28px; margin-top: -5px; border-radius: 7px; background: rgba(106,176,212,0.09); filter: none; }
.skill-pct { font-size: 0.62rem; }
.skill-track { height: 3px; background: rgba(255,255,255,0.08); }
.skill-bar { background: linear-gradient(90deg, #5aacca, #a8d4ec); }

.about-inner > .bokah-brand-panel {
  margin-top: 0;
  padding: clamp(42px, 5vw, 64px) clamp(28px, 4.5vw, 56px);
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.09);
  border-radius: 0 0 12px 12px;
  background: transparent;
  box-shadow: none;
}
.about-inner > .bokah-brand-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, #6ab0d4, transparent);
}

@media (max-width: 1024px) {
  .about-inner { grid-template-columns: 1fr; max-width: 760px; gap: 20px; }
  .about-left { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); align-items: stretch; }
  .about-photo-wrap { height: 100%; min-height: 420px; }
  .about-photo { height: 100%; aspect-ratio: auto; }
  .about-inner > .bokah-brand-panel { margin-top: 0; }
}
@media (max-width: 700px) {
  .section-about { padding-inline: 14px; }
  .about-left { display: block; }
  .about-photo-wrap { min-height: 0; }
  .about-photo { height: auto; aspect-ratio: 4 / 3; }
  .about-bio-block, .about-right { padding: 30px 22px; }
  .skills-list { grid-template-columns: 1fr; }
  .skill-item { min-height: 100px; }
  .about-inner { padding: 8px; border-radius: 14px; }
  .about-inner > .bokah-brand-panel { padding: 36px 20px; }
}

/* Contact glass surface matches the About section exactly. */
.section-contact { background: transparent !important; }
.section-contact .contact-inner {
  background: rgba(7,7,7,.58);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  box-shadow: 0 36px 110px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.045);
}
.section-contact .contact-profile,
.section-contact .contact-form { background: transparent; }

.modal-overlay {
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-box,
.lightbox-box,
.resume-modal-box {
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    0 34px 96px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.055);
}

.resume-modal-toolbar,
.modal-info {
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.006));
}

/* Premium media modal info bar. */
@media (min-width: 769px) {
  #video-modal .modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title counter"
      "desc counter";
    align-items: center;
    column-gap: 22px;
    row-gap: 6px;
    padding: 18px 24px 20px !important;
    border-top: 1px solid rgba(255,255,255,0.095);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008)),
      rgba(8,8,8,0.92);
  }

  #modal-title {
    grid-area: title;
    max-width: 100%;
    margin: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    font-size: clamp(0.78rem, 0.86vw, 0.92rem) !important;
    line-height: 1.32 !important;
    letter-spacing: 0.11em !important;
    font-weight: 800 !important;
  }

  #modal-desc {
    grid-area: desc;
    max-width: 100%;
    margin: 0 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
    color: rgba(232,232,232,0.46) !important;
    font-size: clamp(0.64rem, 0.72vw, 0.74rem) !important;
    line-height: 1.55 !important;
    letter-spacing: 0.045em !important;
  }

  #video-counter {
    grid-area: counter;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 30px;
    margin: 0 !important;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    color: rgba(232,232,232,0.82) !important;
    font-size: 0.7rem !important;
    font-weight: 800;
    letter-spacing: 0.16em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }
}

/* Final touch modal detail pass. Keep phone landscape clean, but show title and
   description on phone portrait and tablet portrait/landscape. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 900px) and (min-height: 560px) {
  #video-modal .modal-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: min(calc(100vw - 24px), 980px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100svh - 72px) !important;
    overflow: visible !important;
  }

  #video-modal .modal-video-wrap {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-height: calc(100svh - 196px) !important;
    overflow: hidden !important;
  }

  #video-modal .modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title counter"
      "desc counter" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #video-modal #modal-title,
  #video-modal #modal-desc {
    display: -webkit-box !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
    text-overflow: clip !important;
  }

  #video-modal #modal-title {
    grid-area: title !important;
    font-size: clamp(0.68rem, 1.9vw, 0.86rem) !important;
    line-height: 1.28 !important;
    letter-spacing: 0.06em !important;
  }

  #video-modal #modal-desc {
    grid-area: desc !important;
    font-size: clamp(0.58rem, 1.55vw, 0.72rem) !important;
    line-height: 1.42 !important;
    letter-spacing: 0.035em !important;
  }

  #video-modal #video-counter {
    grid-area: counter !important;
    position: static !important;
    transform: none !important;
    min-width: 58px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.08em !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 480px) and (orientation: portrait) {
  #video-modal .modal-video-wrap {
    max-height: calc(100svh - 188px) !important;
  }

  #video-modal .modal-info {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "desc"
      "counter" !important;
    justify-items: center !important;
  }

  #video-modal #modal-title,
  #video-modal #modal-desc {
    text-align: left !important;
  }

  #video-modal #video-counter {
    margin-top: 4px !important;
  }
}

#video-modal #modal-title,
#video-modal #modal-desc {
  text-align: left !important;
}

#video-modal #modal-desc.modal-desc--stacked {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  white-space: pre-line !important;
  text-align: left !important;
}

/* Preserve author-entered line and paragraph breaks from the admin description. */
#video-modal #modal-desc.modal-desc--multiline {
  white-space: pre-line !important;
}

@media not all {
/* ================================================================
   CINEMATIC MODAL CAROUSEL
   The active media stays central while adjacent items become tactile,
   dimmed previews. Landscape flows horizontally; portrait flows vertically.
   ================================================================ */
#video-modal.open,
#lightbox.open {
  display: grid !important;
  grid-template-columns: minmax(132px, 0.82fr) minmax(0, 4.8fr) minmax(132px, 0.82fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "previous current next" !important;
  align-items: center !important;
  gap: clamp(14px, 1.45vw, 28px) !important;
  padding: clamp(54px, 5vw, 82px) clamp(16px, 2vw, 38px) clamp(26px, 3vw, 46px) !important;
  overflow: hidden !important;
}

#video-modal > .modal-box,
#lightbox > .lightbox-box {
  grid-area: current !important;
  position: relative !important;
  inset: auto !important;
  transform: translate3d(0, 0, 0);
  width: 100% !important;
  max-width: 1480px !important;
  max-height: calc(100svh - 104px) !important;
  margin: 0 auto !important;
  z-index: 3;
  transition:
    transform 380ms cubic-bezier(.22, .76, .25, 1),
    opacity 260ms ease,
    filter 320ms ease !important;
  will-change: transform, opacity;
}

#video-modal > .carousel-preview,
#lightbox > .carousel-preview {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: auto auto;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden;
  color: rgba(232, 245, 252, .82);
  background: rgba(8, 14, 18, .72) !important;
  border: 1px solid rgba(112, 190, 226, .18) !important;
  border-radius: clamp(10px, 1vw, 16px) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
  opacity: .58;
  transform: scale(.92);
  cursor: pointer;
  z-index: 2;
  transition:
    opacity 240ms ease,
    transform 360ms cubic-bezier(.22, .76, .25, 1),
    border-color 240ms ease,
    box-shadow 240ms ease !important;
  -webkit-tap-highlight-color: transparent;
}

#video-modal > .modal-nav--prev,
#lightbox > .modal-nav--prev {
  grid-area: previous !important;
}

#video-modal > .modal-nav--next,
#lightbox > .modal-nav--next {
  grid-area: next !important;
}

#video-modal > .carousel-preview:hover,
#video-modal > .carousel-preview:focus-visible,
#lightbox > .carousel-preview:hover,
#lightbox > .carousel-preview:focus-visible {
  opacity: .9;
  transform: scale(.97);
  border-color: rgba(112, 190, 226, .5) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .5), 0 0 26px rgba(86, 181, 225, .09);
  outline: none;
}

#video-modal > .carousel-preview:disabled,
#lightbox > .carousel-preview:disabled {
  display: block !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.carousel-preview-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #071016;
}

#lightbox .carousel-preview-media {
  aspect-ratio: 4 / 3;
}

.carousel-preview-media img,
.carousel-preview-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2.5px) saturate(.62) brightness(.55);
  transform: scale(1.045);
  transition: filter 320ms ease, transform 420ms cubic-bezier(.22, .76, .25, 1);
}

.carousel-preview:hover .carousel-preview-media img,
.carousel-preview:focus-visible .carousel-preview-media img {
  filter: blur(1px) saturate(.82) brightness(.68);
  transform: scale(1.015);
}

.carousel-preview-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 7, 10, .05), rgba(2, 7, 10, .5)),
    radial-gradient(circle at 50% 35%, transparent 0, rgba(0, 0, 0, .24) 85%);
}

.carousel-preview-copy {
  display: grid;
  gap: 5px;
  padding: clamp(10px, 1vw, 15px);
  min-width: 0;
  text-align: left;
}

.carousel-preview-kicker {
  color: rgba(123, 207, 244, .68);
  font-family: var(--ff-sans);
  font-size: clamp(.52rem, .55vw, .65rem);
  font-weight: 750;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.carousel-preview-title {
  overflow: hidden;
  color: rgba(242, 246, 248, .78);
  font-family: var(--ff-display);
  font-size: clamp(.6rem, .68vw, .78rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#video-modal.carousel-exit-next > .modal-box,
#lightbox.carousel-exit-next > .lightbox-box {
  transform: translate3d(-9vw, 0, 0) scale(.96) !important;
  opacity: 0;
  filter: blur(3px);
}

#video-modal.carousel-exit-prev > .modal-box,
#lightbox.carousel-exit-prev > .lightbox-box {
  transform: translate3d(9vw, 0, 0) scale(.96) !important;
  opacity: 0;
  filter: blur(3px);
}

#video-modal.carousel-enter-next > .modal-box,
#lightbox.carousel-enter-next > .lightbox-box {
  animation: carousel-enter-from-right 440ms cubic-bezier(.18, .78, .24, 1) both;
}

#video-modal.carousel-enter-prev > .modal-box,
#lightbox.carousel-enter-prev > .lightbox-box {
  animation: carousel-enter-from-left 440ms cubic-bezier(.18, .78, .24, 1) both;
}

@keyframes carousel-enter-from-right {
  from { opacity: 0; transform: translate3d(9vw, 0, 0) scale(.96); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes carousel-enter-from-left {
  from { opacity: 0; transform: translate3d(-9vw, 0, 0) scale(.96); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.open,
  #lightbox.open {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(72px, 13svh) minmax(0, 1fr) minmax(72px, 13svh) !important;
    grid-template-areas:
      "previous"
      "current"
      "next" !important;
    gap: clamp(8px, 1.5svh, 16px) !important;
    padding: calc(env(safe-area-inset-top, 0px) + 50px) clamp(4px, 1.8vw, 18px)
      calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  #video-modal > .modal-box,
  #lightbox > .lightbox-box {
    align-self: center !important;
    max-width: min(100%, 980px) !important;
    max-height: 68svh !important;
  }

  #video-modal > .carousel-preview,
  #lightbox > .carousel-preview {
    grid-template-columns: minmax(108px, 28%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    justify-self: center;
    width: min(82%, 600px) !important;
    height: 100% !important;
    border-radius: 11px !important;
    transform: scale(.96);
  }

  .carousel-preview-media,
  #lightbox .carousel-preview-media {
    height: 100%;
    aspect-ratio: auto;
  }

  .carousel-preview-copy {
    align-content: center;
    padding: 8px 12px;
  }

  .carousel-preview-title {
    font-size: clamp(.62rem, 2vw, .78rem);
  }

  #video-modal.carousel-exit-next > .modal-box,
  #lightbox.carousel-exit-next > .lightbox-box {
    transform: translate3d(0, -7svh, 0) scale(.97) !important;
  }

  #video-modal.carousel-exit-prev > .modal-box,
  #lightbox.carousel-exit-prev > .lightbox-box {
    transform: translate3d(0, 7svh, 0) scale(.97) !important;
  }

  #video-modal.carousel-enter-next > .modal-box,
  #lightbox.carousel-enter-next > .lightbox-box {
    animation-name: carousel-enter-from-bottom;
  }

  #video-modal.carousel-enter-prev > .modal-box,
  #lightbox.carousel-enter-prev > .lightbox-box {
    animation-name: carousel-enter-from-top;
  }
}

/* Polished navigation controls: larger optical target and a mathematically
   centered chevron independent of font baselines or grid line-height. */
#video-modal.modal-centered-mode > #video-prev,
#video-modal.modal-centered-mode > #video-next,
#video-modal.tablet-portrait-info.modal-centered-mode > #video-prev,
#video-modal.tablet-portrait-info.modal-centered-mode > #video-next,
#lightbox.modal-centered-mode > #photo-prev,
#lightbox.modal-centered-mode > #photo-next,
#lightbox.tablet-photo-layout.modal-centered-mode > #photo-prev,
#lightbox.tablet-photo-layout.modal-centered-mode > #photo-next {
  position: fixed !important;
  width: clamp(56px, 4.8vw, 64px) !important;
  height: clamp(56px, 4.8vw, 64px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(196, 226, 239, .24) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .09), transparent 40%),
    linear-gradient(145deg, rgba(24, 35, 41, .82), rgba(7, 11, 14, .84)) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(255, 255, 255, .025) inset,
    0 1px 0 rgba(255, 255, 255, .08) inset !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
}

#video-modal.modal-centered-mode > #video-prev::before,
#video-modal.modal-centered-mode > #video-next::before,
#lightbox.modal-centered-mode > #photo-prev::before,
#lightbox.modal-centered-mode > #photo-next::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(210, 234, 244, .055);
  border-radius: 50%;
  pointer-events: none;
}

#video-modal.modal-centered-mode > .carousel-preview::after,
#lightbox.modal-centered-mode > .carousel-preview::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 2px solid rgba(241, 248, 251, .96) !important;
  border-right: 2px solid rgba(241, 248, 251, .96) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-origin: 50% 50% !important;
}

#video-modal.modal-centered-mode > #video-prev::after,
#lightbox.modal-centered-mode > #photo-prev::after {
  transform: translate(-42%, -50%) rotate(-135deg) !important;
}

#video-modal.modal-centered-mode > #video-next::after,
#lightbox.modal-centered-mode > #photo-next::after {
  transform: translate(-58%, -50%) rotate(45deg) !important;
}

#video-modal.modal-centered-mode > .carousel-preview:hover,
#video-modal.modal-centered-mode > .carousel-preview:focus-visible,
#lightbox.modal-centered-mode > .carousel-preview:hover,
#lightbox.modal-centered-mode > .carousel-preview:focus-visible {
  border-color: rgba(160, 217, 242, .42) !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .13), transparent 42%),
    linear-gradient(145deg, rgba(32, 48, 56, .92), rgba(10, 17, 21, .94)) !important;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, .54),
    0 0 28px rgba(101, 194, 232, .08),
    0 1px 0 rgba(255, 255, 255, .1) inset !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.modal-centered-mode > #video-prev,
  #video-modal.modal-centered-mode > #video-next,
  #video-modal.tablet-portrait-info.modal-centered-mode > #video-prev,
  #video-modal.tablet-portrait-info.modal-centered-mode > #video-next,
  #lightbox.modal-centered-mode > #photo-prev,
  #lightbox.modal-centered-mode > #photo-next,
  #lightbox.tablet-photo-layout.modal-centered-mode > #photo-prev,
  #lightbox.tablet-photo-layout.modal-centered-mode > #photo-next {
    width: 52px !important;
    height: 52px !important;
  }

  #video-modal.modal-centered-mode > .carousel-preview::after,
  #lightbox.modal-centered-mode > .carousel-preview::after {
    width: 11px !important;
    height: 11px !important;
  }
}
}

/* Pre-carousel modal, with rounded framing as the only visual addition. */
#video-modal > .modal-box,
#video-modal .modal-video-wrap,
#lightbox > .lightbox-box,
#lightbox #lightbox-img {
  border-radius: clamp(12px, 1.15vw, 18px);
}

#video-modal > .modal-box,
#video-modal .modal-video-wrap,
#lightbox > .lightbox-box {
  overflow: hidden;
}

#lightbox #lightbox-img {
  display: block;
  max-width: 100%;
}

/* Authoritative video-modal geometry.
   Controls are positioned from the measured .modal-video-wrap in main.js. */
#video-modal.open {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding:
    calc(env(safe-area-inset-top, 0px) + 58px)
    76px
    calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  overflow: hidden !important;
}

#video-modal.open > .modal-box {
  position: relative !important;
  inset: auto !important;
  width: min(1240px, calc(100vw - 152px), calc(177.777svh - 320px)) !important;
  max-width: none !important;
  max-height: calc(100svh - 76px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

#video-modal.open .modal-video-wrap {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
}

#video-modal.open > #modal-close,
#video-modal.open > #video-prev,
#video-modal.open > #video-next {
  z-index: 90 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#video-modal.open > #modal-close {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
}

#video-modal.open > #video-prev,
#video-modal.open > #video-next {
  width: 44px !important;
  height: 62px !important;
  min-width: 44px !important;
  min-height: 62px !important;
  padding: 0 !important;
  place-items: center !important;
}

@media (orientation: landscape) and (max-height: 620px) {
  #video-modal.open {
    padding:
      calc(env(safe-area-inset-top, 0px) + 52px)
      58px
      calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
  }

  #video-modal.open > .modal-box {
    width: min(
      calc(100vw - 116px),
      calc(177.777svh - 103px)
    ) !important;
    max-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 56px) !important;
  }

  #video-modal.open .modal-info {
    display: none !important;
  }

  #video-modal.open > #modal-close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  #video-modal.open > #video-prev,
  #video-modal.open > #video-next {
    width: 40px !important;
    height: 56px !important;
    min-width: 40px !important;
    min-height: 56px !important;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #video-modal.open {
    padding:
      calc(env(safe-area-inset-top, 0px) + 56px)
      4px
      calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }

  #video-modal.open > .modal-box {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 68px) !important;
  }

  #video-modal.open > #modal-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #video-modal.open > #video-prev,
  #video-modal.open > #video-next {
    width: 40px !important;
    height: 56px !important;
    min-width: 40px !important;
    min-height: 56px !important;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #video-modal.open > .modal-box,
  #lightbox.open > .lightbox-box { overflow: visible !important; }

  #video-modal.open > .modal-box > .modal-nav,
  #lightbox.open > .lightbox-box > .modal-nav {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50% !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(241, 247, 250, .9) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: .68rem !important;
    font-weight: 650 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    transform: none !important;
  }

  #video-modal.open > .modal-box > .modal-nav--prev,
  #lightbox.open > .lightbox-box > .modal-nav--prev { left: 0 !important; right: auto !important; }
  #video-modal.open > .modal-box > .modal-nav--next,
  #lightbox.open > .lightbox-box > .modal-nav--next { right: 0 !important; left: auto !important; }

  #video-modal.open > .modal-box > .modal-nav::after,
  #lightbox.open > .lightbox-box > .modal-nav::after { display: none !important; }

  #video-modal.open > .modal-box > .modal-close,
  #lightbox.open > .lightbox-box > .modal-close {
    position: absolute !important;
    top: -46px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (orientation: portrait) and (min-width: 701px) and (max-width: 1200px) {
  #video-modal.open {
    padding:
      calc(env(safe-area-inset-top, 0px) + 60px)
      58px
      calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  }

  #video-modal.open > .modal-box {
    width: min(calc(100vw - 116px), 944px, calc(177.777svh - 391px)) !important;
    max-height: calc(100svh - 82px) !important;
  }
}

/* Utility controls sit directly above the media frame instead of at the
   viewport edge. JS supplies the rendered media coordinates responsively. */
#video-modal.modal-centered-mode > .carousel-gesture-hint {
  top: max(
    calc(env(safe-area-inset-top, 0px) + 8px),
    calc(var(--modal-media-top, 70px) - 42px)
  ) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

#video-modal.modal-centered-mode > #modal-close,
#video-modal.tablet-portrait-info.modal-centered-mode > #modal-close {
  top: var(
    --video-close-top,
    max(calc(env(safe-area-inset-top, 0px) + 8px), calc(var(--modal-media-top, 70px) - 44px))
  ) !important;
  right: auto !important;
  left: var(--video-close-left, calc(100vw - 48px)) !important;
}

/* Keep native YouTube/Vimeo controls fully interactive. Swipe capture lives
   only in slim side-edge zones and never covers the control bar. */
#video-modal.modal-centered-mode .carousel-swipe-surface {
  pointer-events: none !important;
}

.carousel-swipe-edge {
  position: absolute;
  z-index: 8;
  top: 18%;
  bottom: 26%;
  display: none;
  width: clamp(20px, 4%, 38px);
  background: transparent;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.carousel-swipe-edge--left {
  left: 0;
}

.carousel-swipe-edge--right {
  right: 0;
}

@media (any-pointer: coarse) {
  #video-modal.modal-centered-mode .carousel-swipe-edge {
    display: block;
    pointer-events: auto;
  }
}

#video-modal.modal-centered-mode .carousel-gesture-glyph,
#lightbox.modal-centered-mode .carousel-gesture-glyph {
  display: inline-flex !important;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: rgba(207, 232, 242, .9);
  font-size: .78rem;
  transform-origin: 50% 85%;
  animation: centered-swipe-hand 1.45s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes centered-swipe-hand {
  0%, 100% { transform: translateX(-3px) rotate(-7deg); opacity: .72; }
  50% { transform: translateX(4px) rotate(7deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #video-modal.modal-centered-mode .carousel-gesture-glyph,
  #lightbox.modal-centered-mode .carousel-gesture-glyph {
    animation: none;
  }
}

/* Refined centered controls: true circular buttons aligned to the actual
   media frame, with CSS-drawn chevrons and no slide transition. */
#video-modal.modal-centered-mode > .modal-box,
#lightbox.modal-centered-mode > .lightbox-box {
  animation: none !important;
}

#video-modal.modal-centered-mode.carousel-exit-next > .modal-box,
#video-modal.modal-centered-mode.carousel-exit-prev > .modal-box,
#video-modal.modal-centered-mode.carousel-enter-next > .modal-box,
#video-modal.modal-centered-mode.carousel-enter-prev > .modal-box,
#lightbox.modal-centered-mode.carousel-exit-next > .lightbox-box,
#lightbox.modal-centered-mode.carousel-exit-prev > .lightbox-box,
#lightbox.modal-centered-mode.carousel-enter-next > .lightbox-box,
#lightbox.modal-centered-mode.carousel-enter-prev > .lightbox-box {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

#video-modal.modal-centered-mode > #video-prev,
#video-modal.modal-centered-mode > #video-next,
#video-modal.tablet-portrait-info.modal-centered-mode > #video-prev,
#video-modal.tablet-portrait-info.modal-centered-mode > #video-next,
#lightbox.modal-centered-mode > #photo-prev,
#lightbox.modal-centered-mode > #photo-next,
#lightbox.tablet-photo-layout.modal-centered-mode > #photo-prev,
#lightbox.tablet-photo-layout.modal-centered-mode > #photo-next {
  top: var(--modal-media-center, 50%) !important;
  width: clamp(44px, 3.8vw, 50px) !important;
  height: clamp(44px, 3.8vw, 50px) !important;
  aspect-ratio: 1;
  border: 1px solid rgba(203, 230, 241, .18) !important;
  border-radius: 50% !important;
  background: rgba(10, 16, 19, .66) !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .42),
    0 1px 0 rgba(255, 255, 255, .035) inset !important;
  transform: translateY(-50%) !important;
}

#video-modal.modal-centered-mode > .carousel-preview::after,
#lightbox.modal-centered-mode > .carousel-preview::after {
  content: "" !important;
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-top: 1.5px solid rgba(239, 247, 251, .94) !important;
  border-right: 1.5px solid rgba(239, 247, 251, .94) !important;
  transform-origin: center !important;
}

#video-modal.modal-centered-mode > #video-prev::after,
#lightbox.modal-centered-mode > #photo-prev::after {
  margin-left: 4px;
  transform: rotate(-135deg) !important;
}

#video-modal.modal-centered-mode > #video-next::after,
#lightbox.modal-centered-mode > #photo-next::after {
  margin-right: 4px;
  transform: rotate(45deg) !important;
}

#video-modal.modal-centered-mode > .carousel-preview:hover,
#video-modal.modal-centered-mode > .carousel-preview:focus-visible,
#lightbox.modal-centered-mode > .carousel-preview:hover,
#lightbox.modal-centered-mode > .carousel-preview:focus-visible {
  border-color: rgba(164, 218, 240, .34) !important;
  background: rgba(24, 36, 42, .88) !important;
  transform: translateY(-50%) scale(1.045) !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.modal-centered-mode > #video-prev,
  #video-modal.modal-centered-mode > #video-next,
  #video-modal.tablet-portrait-info.modal-centered-mode > #video-prev,
  #video-modal.tablet-portrait-info.modal-centered-mode > #video-next,
  #lightbox.modal-centered-mode > #photo-prev,
  #lightbox.modal-centered-mode > #photo-next,
  #lightbox.tablet-photo-layout.modal-centered-mode > #photo-prev,
  #lightbox.tablet-photo-layout.modal-centered-mode > #photo-next {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Final polished arrow controls. */
#video-modal.modal-centered-mode > #video-prev,
#video-modal.modal-centered-mode > #video-next,
#video-modal.tablet-portrait-info.modal-centered-mode > #video-prev,
#video-modal.tablet-portrait-info.modal-centered-mode > #video-next,
#lightbox.modal-centered-mode > #photo-prev,
#lightbox.modal-centered-mode > #photo-next,
#lightbox.tablet-photo-layout.modal-centered-mode > #photo-prev,
#lightbox.tablet-photo-layout.modal-centered-mode > #photo-next {
  width: clamp(56px, 4.8vw, 64px) !important;
  height: clamp(56px, 4.8vw, 64px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(196, 226, 239, .24) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .09), transparent 40%),
    linear-gradient(145deg, rgba(24, 35, 41, .82), rgba(7, 11, 14, .84)) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(255, 255, 255, .025) inset,
    0 1px 0 rgba(255, 255, 255, .08) inset !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
}

#video-modal.modal-centered-mode > #video-prev::before,
#video-modal.modal-centered-mode > #video-next::before,
#lightbox.modal-centered-mode > #photo-prev::before,
#lightbox.modal-centered-mode > #photo-next::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(210, 234, 244, .055);
  border-radius: 50%;
  pointer-events: none;
}

#video-modal.modal-centered-mode > .carousel-preview::after,
#lightbox.modal-centered-mode > .carousel-preview::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 2px solid rgba(241, 248, 251, .96) !important;
  border-right: 2px solid rgba(241, 248, 251, .96) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-origin: 50% 50% !important;
}

#video-modal.modal-centered-mode > #video-prev::after,
#lightbox.modal-centered-mode > #photo-prev::after {
  transform: translate(-42%, -50%) rotate(-135deg) !important;
}

#video-modal.modal-centered-mode > #video-next::after,
#lightbox.modal-centered-mode > #photo-next::after {
  transform: translate(-58%, -50%) rotate(45deg) !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.modal-centered-mode > #video-prev,
  #video-modal.modal-centered-mode > #video-next,
  #video-modal.tablet-portrait-info.modal-centered-mode > #video-prev,
  #video-modal.tablet-portrait-info.modal-centered-mode > #video-next,
  #lightbox.modal-centered-mode > #photo-prev,
  #lightbox.modal-centered-mode > #photo-next,
  #lightbox.tablet-photo-layout.modal-centered-mode > #photo-prev,
  #lightbox.tablet-photo-layout.modal-centered-mode > #photo-next {
    width: 52px !important;
    height: 52px !important;
  }

  #video-modal.modal-centered-mode > .carousel-preview::after,
  #lightbox.modal-centered-mode > .carousel-preview::after {
    width: 11px !important;
    height: 11px !important;
  }
}

/* ================================================================
   CENTERED MEDIA MODALS
   Single focused post with minimal arrows. Adjacent media stays preloaded
   for transitions but is never presented as a visible preview card.
   ================================================================ */
#video-modal.open.modal-centered-mode,
#lightbox.open.modal-centered-mode {
  display: grid !important;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
  grid-template-areas: "current" !important;
  place-items: center !important;
  padding: clamp(62px, 7vh, 88px) clamp(54px, 6vw, 92px)
    clamp(28px, 4vh, 48px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(62, 139, 174, .055), transparent 38%),
    rgba(1, 3, 4, .975);
}

.modal-centered-mode > .modal-feed-track {
  display: none !important;
}

#video-modal.modal-centered-mode > .modal-box,
#lightbox.modal-centered-mode > .lightbox-box {
  position: relative !important;
  z-index: 5 !important;
  grid-area: current !important;
  inset: auto !important;
  width: min(72vw, 1360px) !important;
  max-width: min(72vw, 1360px) !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(207, 233, 244, .14);
  border-radius: clamp(14px, 1.25vw, 21px);
  background: #06090b;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    0 36px 110px rgba(0, 0, 0, .68);
}

#video-modal.modal-centered-mode > .carousel-preview,
#lightbox.modal-centered-mode > .carousel-preview,
#lightbox.tablet-photo-layout.modal-centered-mode > .carousel-preview,
#video-modal.tablet-portrait-info.modal-centered-mode > .carousel-preview {
  position: fixed !important;
  z-index: 20 !important;
  top: 50% !important;
  bottom: auto !important;
  display: grid !important;
  width: clamp(42px, 4vw, 54px) !important;
  height: clamp(58px, 6vw, 72px) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  border: 1px solid rgba(192, 225, 239, .18) !important;
  border-radius: 999px !important;
  background: rgba(12, 18, 22, .68) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .42) !important;
  filter: none !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  place-items: center;
  transform: translateY(-50%) !important;
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1) !important;
}

#video-modal.modal-centered-mode > .modal-nav--prev,
#lightbox.modal-centered-mode > .modal-nav--prev {
  right: auto !important;
  left: clamp(8px, 3vw, 42px) !important;
}

#video-modal.modal-centered-mode > .modal-nav--next,
#lightbox.modal-centered-mode > .modal-nav--next {
  right: clamp(8px, 3vw, 42px) !important;
  left: auto !important;
}

#video-modal.modal-centered-mode > .carousel-preview > *,
#lightbox.modal-centered-mode > .carousel-preview > * {
  display: none !important;
}

#video-modal.modal-centered-mode > .carousel-preview::after,
#lightbox.modal-centered-mode > .carousel-preview::after {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  color: rgba(239, 247, 251, .94) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: Arial, sans-serif;
  font-size: clamp(1.65rem, 2.4vw, 2.2rem) !important;
  font-weight: 300;
  line-height: 1;
  transform: none !important;
}

#video-modal.modal-centered-mode > .modal-nav--prev::after,
#lightbox.modal-centered-mode > .modal-nav--prev::after {
  content: "‹" !important;
}

#video-modal.modal-centered-mode > .modal-nav--next::after,
#lightbox.modal-centered-mode > .modal-nav--next::after {
  content: "›" !important;
}

#video-modal.modal-centered-mode > .carousel-preview:hover,
#video-modal.modal-centered-mode > .carousel-preview:focus-visible,
#lightbox.modal-centered-mode > .carousel-preview:hover,
#lightbox.modal-centered-mode > .carousel-preview:focus-visible {
  border-color: rgba(168, 220, 243, .34) !important;
  background: rgba(25, 38, 45, .86) !important;
  transform: translateY(-50%) scale(1.055) !important;
}

#video-modal.modal-centered-mode > .carousel-gesture-hint,
#lightbox.modal-centered-mode > .carousel-gesture-hint {
  position: fixed !important;
  z-index: 40 !important;
  top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 13px !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: rgba(207, 225, 233, .78) !important;
  border: 1px solid rgba(186, 220, 234, .14) !important;
  border-radius: 999px !important;
  background: rgba(10, 15, 18, .68) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  font-size: clamp(.56rem, .68vw, .68rem) !important;
  letter-spacing: .11em !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  animation: none !important;
}

#video-modal.modal-centered-mode > .modal-close,
#lightbox.modal-centered-mode > .modal-close {
  position: fixed !important;
  z-index: 50 !important;
  top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  bottom: auto !important;
  left: auto !important;
}

#lightbox.modal-centered-mode > .lightbox-box {
  display: flex !important;
  max-height: calc(100svh - 116px) !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: center;
  clip-path: inset(0 round clamp(14px, 1.25vw, 21px));
}

#lightbox.modal-centered-mode #lightbox-img {
  display: block;
  width: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: 100% !important;
  max-height: calc(100svh - 178px) !important;
  flex: 1 1 auto;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #030405;
}

#lightbox.modal-centered-mode #lightbox-caption {
  display: block !important;
  width: 100%;
  min-height: 58px;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 16px 92px 16px 20px !important;
  text-align: left;
  white-space: pre-line;
  border-top: 1px solid rgba(207, 233, 244, .1);
  background: rgba(7, 10, 12, .98);
}

#lightbox.modal-centered-mode #photo-counter {
  z-index: 7;
  top: auto !important;
  right: 18px !important;
  bottom: 16px !important;
  left: auto !important;
  transform: none !important;
}

#video-modal.modal-centered-mode.carousel-exit-next > .modal-box,
#lightbox.modal-centered-mode.carousel-exit-next > .lightbox-box {
  transform: translate3d(-12vw, 0, 0) scale(.985) !important;
}

#video-modal.modal-centered-mode.carousel-exit-prev > .modal-box,
#lightbox.modal-centered-mode.carousel-exit-prev > .lightbox-box {
  transform: translate3d(12vw, 0, 0) scale(.985) !important;
}

#video-modal.modal-centered-mode.carousel-dragging > .modal-box,
#lightbox.modal-centered-mode.carousel-dragging > .lightbox-box {
  transform: translate3d(var(--carousel-drag-offset, 0px), 0, 0) !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.open.modal-centered-mode,
  #lightbox.open.modal-centered-mode {
    padding:
      calc(env(safe-area-inset-top, 0px) + 58px)
      9px
      calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
  }

  #video-modal.modal-centered-mode > .modal-box,
  #lightbox.modal-centered-mode > .lightbox-box,
  #lightbox.tablet-photo-layout.modal-centered-mode > .lightbox-box {
    width: min(calc(100vw - 18px), 920px) !important;
    max-width: min(calc(100vw - 18px), 920px) !important;
  }

  #video-modal.modal-centered-mode > .carousel-preview,
  #lightbox.modal-centered-mode > .carousel-preview {
    top: 50% !important;
    width: 40px !important;
    height: 56px !important;
  }

  #video-modal.modal-centered-mode > .modal-nav--prev,
  #lightbox.modal-centered-mode > .modal-nav--prev {
    left: 4px !important;
  }

  #video-modal.modal-centered-mode > .modal-nav--next,
  #lightbox.modal-centered-mode > .modal-nav--next {
    right: 4px !important;
  }

  #lightbox.modal-centered-mode > .lightbox-box {
    max-height: calc(100svh - 92px) !important;
  }

  #lightbox.modal-centered-mode #lightbox-img {
    max-height: calc(100svh - 154px) !important;
  }
}

@keyframes carousel-enter-from-bottom {
  from { opacity: 0; transform: translate3d(0, 7svh, 0) scale(.97); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes carousel-enter-from-top {
  from { opacity: 0; transform: translate3d(0, -7svh, 0) scale(.97); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@media (max-width: 520px) and (orientation: portrait) {
  #video-modal.open,
  #lightbox.open {
    grid-template-rows: 78px minmax(0, 1fr) 78px !important;
    gap: 7px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #video-modal > .carousel-preview,
  #lightbox > .carousel-preview {
    grid-template-columns: 104px minmax(0, 1fr);
    width: min(88%, 430px) !important;
  }

  .carousel-preview-copy {
    gap: 3px;
    padding: 6px 10px;
  }

  .carousel-preview-kicker {
    font-size: .5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #video-modal > .modal-box,
  #lightbox > .lightbox-box,
  #video-modal > .carousel-preview,
  #lightbox > .carousel-preview {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

#video-modal #modal-desc a {
  color: var(--gold) !important;
  text-decoration: underline;
  text-decoration-color: rgba(106,176,212,.54);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--t), text-decoration-color var(--t);
}

#video-modal #modal-desc a:hover,
#video-modal #modal-desc a:focus-visible {
  color: #fff !important;
  text-decoration-color: currentColor;
}

#video-modal .modal-info.modal-info--stacked {
  align-items: start !important;
}

#video-modal .modal-info.modal-info--stacked #modal-title {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
  text-align: left !important;
}

#video-modal .modal-info.modal-info--stacked #modal-desc {
  max-height: none !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 769px) {
  #video-modal .modal-info.modal-info--stacked {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title counter"
      "desc counter" !important;
    row-gap: 7px !important;
  }

  #video-modal .modal-info.modal-info--stacked #modal-title {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: var(--ff-sans) !important;
    font-size: clamp(0.78rem, 0.86vw, 0.92rem) !important;
    line-height: 1.32 !important;
    letter-spacing: 0.11em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
  }

  #video-modal .modal-info.modal-info--stacked #modal-desc {
    font-size: clamp(0.64rem, 0.72vw, 0.74rem) !important;
    line-height: 1.55 !important;
    letter-spacing: 0.045em !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  #video-modal #modal-desc.modal-desc--stacked {
    font-size: clamp(0.56rem, 2.45vw, 0.68rem) !important;
    line-height: 1.45 !important;
  }

  #video-modal .modal-box.modal-box--stacked-info .modal-video-wrap {
    max-height: calc(100svh - 258px) !important;
  }
}

/* Premium thumbnail hover: cinematic caption, clearer image, restrained play control. */
.video-card {
  transform-origin: center;
}

.video-card-thumb {
  transition:
    transform 0.82s cubic-bezier(.2,.7,.2,1),
    filter 0.62s ease;
}

.video-card:hover .video-card-thumb,
.video-card:focus-visible .video-card-thumb,
.video-card:focus-within .video-card-thumb {
  transform: scale(1.055);
  filter: brightness(1) saturate(1);
}

.video-card-overlay {
  z-index: 4;
  opacity: 1;
  background:
    radial-gradient(circle at 50% 44%, rgba(106,176,212,0.12), transparent 22%),
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.2) 46%, rgba(0,0,0,0.58));
  transition: background 0.46s var(--ease);
}

.play-btn {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.34);
  background: rgba(5,5,5,0.22);
  color: rgba(255,255,255,0.86);
  font-size: 0.82rem;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.14);
  transform: translate3d(0, 0, 0) scale(0.96);
  transition:
    transform 0.42s var(--ease),
    background 0.36s ease,
    border-color 0.36s ease,
    color 0.36s ease,
    box-shadow 0.42s var(--ease);
}

.video-card:hover .play-btn,
.video-card:focus-visible .play-btn,
.video-card:focus-within .play-btn {
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.72);
  color: #080808;
  transform: translate3d(0, -2px, 0) scale(1);
  box-shadow:
    0 12px 36px rgba(255,255,255,0.08),
    0 18px 48px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.32);
}

.video-card-info {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 14px 12px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.62) 36%, rgba(0,0,0,0.88));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(10px);
  transition:
    opacity 0.42s var(--ease),
    transform 0.42s var(--ease),
    border-color 0.42s ease;
}

.video-card:hover .video-card-info,
.video-card:focus-visible .video-card-info,
.video-card:focus-within .video-card-info {
  opacity: 1;
  transform: translateY(0);
}

.video-card-info h3 {
  display: -webkit-box;
  max-width: 90%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(0.64rem, calc(var(--section-body-size, 0.78rem) * 0.82), 0.74rem) !important;
  line-height: 1.3;
  letter-spacing: 0.045em;
  text-transform: none;
}

.video-card-meta {
  margin-top: 6px;
  font-size: clamp(0.5rem, calc(var(--section-body-size, 0.78rem) * 0.58), 0.55rem) !important;
  letter-spacing: 0.14em;
}

@media (max-width: 768px) {
  body::after { opacity: 0.018; }
  .section-header::before,
  .showreel-label-row::before,
  .contact-inner::before {
    width: min(120px, 42vw);
    opacity: 0.34;
  }
}

/* Absolute final video modal text alignment: title and description always start left,
   regardless of platform, description format, or earlier mobile modal rules. */
#video-modal .modal-info {
  text-align: left !important;
}

#video-modal .modal-info h3,
#video-modal .modal-info p,
#video-modal #modal-title,
#video-modal #modal-desc {
  justify-self: stretch !important;
  text-align: left !important;
  text-align-last: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Final About refinement: one editorial frame, classic full-width skill bars. */
.section-about .about-inner {
  grid-template-columns: minmax(380px, .9fr) minmax(500px, 1.1fr);
  gap: 0;
  padding: 0;
  border-radius: 14px;
  background: rgba(7,7,7,.58);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  box-shadow: 0 36px 110px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.045);
}
.section-about .about-left,
.section-about .about-right {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.section-about .about-left { display: block; padding: clamp(36px, 4vw, 54px); }
.section-about .about-photo-wrap { width: 100%; margin: 0; }
.section-about .about-photo { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 22%; border-radius: 8px; }
.section-about .about-photo { object-fit: contain; object-position: center bottom; background: transparent; }
.section-about .about-photo-wrap {
  width: min(68%, 260px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(106,176,212,.24);
  border-radius: 50%;
  background: rgba(5,5,5,.22);
  box-shadow: 0 18px 54px rgba(0,0,0,.24), inset 0 0 0 7px rgba(255,255,255,.018);
}

@media (max-width: 700px) {
  .section-about .about-photo-wrap { width: min(56%, 155px); }
}

@media (max-width: 600px) {
  .contact-profile .contact-photo-wrap { width: 120px; height: 120px; }
}

/* Phone landscape: prevent tablet rules from stretching the About portrait. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 600px) {
  .section-about .about-left {
    grid-template-columns: 170px minmax(0,1fr);
    align-items: start;
    gap: 26px;
  }
  .section-about .about-photo-wrap {
    width: 156px !important;
    height: 156px !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    align-self: start;
    overflow: hidden;
    border-radius: 50%;
  }
  .section-about .about-photo {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    border-radius: 50% !important;
  }
  .section-about .about-bio-block { padding-top: 0; }
}

/* iPad/tablet portrait: align hero media, preserve round portrait, prevent role clipping. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1180px) and (orientation: portrait) {
  #showreel .hero-intro,
  #showreel .showreel-player {
    width: min(calc(100% - 48px), 900px) !important;
    max-width: min(calc(100% - 48px), 900px) !important;
    box-sizing: border-box;
  }

  #about .about-photo-wrap {
    width: 220px !important;
    height: 220px !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    align-self: center;
    overflow: hidden;
    border-radius: 50%;
  }
  #about .about-photo {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    border-radius: 50% !important;
  }

  #contact .contact-role {
    width: 100%;
    max-width: 34rem;
    padding-inline: 8px;
    font-size: clamp(.52rem, 1.45vw, .62rem) !important;
    letter-spacing: .08em;
    line-height: 1.65;
    white-space: normal;
    overflow-wrap: normal;
    text-align: center;
  }
}

/* iPad portrait video modal: override phone top anchoring and center in the safe viewport. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1180px) and (orientation: portrait) {
  #video-modal.modal-overlay,
  #video-modal.tablet-portrait-info.modal-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100svh;
    padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }
  #video-modal .modal-box,
  #video-modal.tablet-portrait-info .modal-box,
  #video-modal.tablet-portrait-info .modal-box.modal-box--stacked-info {
    margin: auto !important;
    max-height: calc(100svh - 72px) !important;
    transform-origin: center center;
  }
}

/* iPad portrait photo lightbox: use the same centered safe-area placement. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1180px) and (orientation: portrait) {
  #lightbox.modal-overlay,
  #lightbox.tablet-photo-layout.modal-overlay,
  #lightbox.tablet-photo-portrait.modal-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100svh;
    padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }
  #lightbox .lightbox-box,
  #lightbox.tablet-photo-layout .lightbox-box,
  #lightbox.tablet-photo-portrait .lightbox-box {
    margin: auto !important;
    max-height: calc(100svh - 72px) !important;
    transform-origin: center center;
  }
  #lightbox #lightbox-img,
  #lightbox.tablet-photo-layout #lightbox-img {
    max-height: calc(100svh - 150px) !important;
    object-fit: contain !important;
  }
}

/* iPad portrait: prevent viewport minimum-height from creating space below the footer. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1180px) and (orientation: portrait) {
  html,
  body {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overscroll-behavior-y: none;
    background-color: #050505;
  }
  #main-footer {
    min-height: 0;
    margin-bottom: 0;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }
  body > #main-footer:last-of-type { margin-bottom: 0 !important; }
}

/* Final editorial copy alignment: natural left rag across every platform. */
#showreel .hero-summary,
#about .about-bio,
#about .about-bio p,
#about .bokah-brand-copy,
#about .bokah-brand-copy > p:not(.label-tag),
#contact .contact-tagline,
#contact .contact-bio,
#contact .contact-bio p,
#video-modal .modal-info,
#video-modal .modal-info p,
#lightbox-caption {
  text-align: left !important;
  text-align-last: left !important;
  text-justify: auto !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal;
  overflow-wrap: break-word;
  word-spacing: normal !important;
  letter-spacing: normal;
}

/* Tablet/iPad Skills compression: shorter section without changing content. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1600px) and (orientation: portrait) {
  #about .about-right {
    padding: clamp(26px, 3.2vw, 38px);
  }
  #about .about-right > .label-tag {
    margin-bottom: 22px !important;
  }
  #about .skills-list { gap: 9px; }
  #about .skill-item {
    min-height: 0;
    padding: 12px 14px;
  }
  #about .skill-header { margin-bottom: 8px; }
  #about .skill-name {
    gap: 9px;
    line-height: 1.3;
  }
  #about .skill-track { height: 4px; }
}

#showreel .hero-summary {
  width: min(100%, 620px);
  text-wrap: pretty;
  text-align: center !important;
  text-align-last: center !important;
}

#about .about-bio p,
#about .bokah-brand-copy > p:not(.label-tag),
#contact .contact-tagline,
#contact .contact-bio p {
  line-height: 1.82;
  text-wrap: pretty;
}

@media (max-width: 700px) {
  #about .about-bio p,
  #about .bokah-brand-copy > p:not(.label-tag),
  #contact .contact-tagline,
  #contact .contact-bio p {
    line-height: 1.74;
  }
}

/* Profile photos: circular crop only, with no decorative ring on any platform. */
.section-about .about-photo-wrap,
.section-contact .contact-photo-wrap {
  border: 1px solid rgba(131,199,232,.14) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.section-about .about-photo,
.section-contact .contact-photo-wrap img { border-radius: 50% !important; }

@media (min-width: 901px) {
  .section-contact .contact-photo-wrap {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 700px) {
  .resume-modal-toolbar { height: 54px; }
  .resume-pdf-stage { height: calc(100% - 54px); }
  .resume-external-link {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }
  .resume-modal .modal-close {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 1.65rem !important;
  }

  .section-contact .contact-links-mobile {
    order: 3;
    width: 100%;
    margin: 0;
    padding: 0 24px 34px;
    justify-content: center;
  }

  /* 16px prevents iOS/Android browsers from zooming when a form field receives focus. */
  #contact .cf-input,
  #contact input,
  #contact textarea {
    font-size: 16px !important;
  }

  #contact .contact-form {
    padding: 28px 18px 26px;
    gap: 14px;
  }
  #contact .contact-form-heading { margin-bottom: 2px; }
  #contact .contact-form-heading h3 {
    margin: 9px 0 7px;
    font-size: clamp(1.3rem, 6.3vw, 1.65rem);
  }
  #contact .contact-form-heading p {
    font-size: .72rem;
    line-height: 1.55;
  }
  #contact .cf-row { gap: 11px; }
  #contact .cf-field { gap: 5px; }
  #contact .cf-label { font-size: .58rem !important; letter-spacing: .16em; }
  #contact .cf-input {
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 7px;
    line-height: 1.25;
    letter-spacing: -.025em !important;
  }
  #contact .cf-input::placeholder {
    color: rgba(232,232,232,.38);
    letter-spacing: -.025em !important;
  }
  #contact .cf-textarea {
    min-height: 108px;
    line-height: 1.5;
  }
  #contact .cf-submit {
    min-height: 48px;
    margin-top: 0;
    padding: 11px 18px;
  }
  #contact .contact-form-heading > span { font-size: .5rem; }

  #about .about-right { padding-top: 26px; padding-bottom: 26px; }
  #about .about-right > .label-tag { margin-bottom: 20px !important; }
  #about .skills-list { gap: 8px; }
  #about .skill-item {
    min-height: 0;
    padding: 11px 13px;
  }
  #about .skill-header { margin-bottom: 7px; }
  #about .skill-name { gap: 8px; line-height: 1.3; }
  #about .skill-track { height: 4px; }

  /* Mobile editorial copy: clean justification without broken words or wide rivers. */
  #about .about-bio p,
  #about .bokah-brand-copy > p:not(.label-tag),
  #contact .contact-tagline,
  #contact .contact-bio p {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-character;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal;
    overflow-wrap: normal;
    word-spacing: -.055em;
    letter-spacing: .006em;
    line-height: 1.78;
  }

  #about .about-bio,
  #about .bokah-brand-copy,
  #contact .contact-tagline {
    text-wrap: pretty;
  }
}
.section-about .about-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: contain;
  object-position: center bottom;
}
.section-about .about-photo-wrap::after { display: none; }
.section-about .about-bio-block { padding: 38px 0 0; border: 0; background: transparent; }
.section-about .about-resume-btn { border-radius: 4px; background: transparent; }
.section-about .about-right {
  padding: clamp(38px, 4.5vw, 58px);
  border-left: 1px solid rgba(255,255,255,.085);
}
.section-about .skills-list { display: flex; flex-direction: column; gap: 14px; }
.section-about .skill-item {
  min-height: 0;
  padding: 17px 18px;
  border-radius: 7px;
  background: rgba(255,255,255,.018);
}
.section-about .skill-item:hover { transform: translateX(3px); border-color: rgba(106,176,212,.26); background: rgba(255,255,255,.028); }
.section-about .skill-header { align-items: center; margin-bottom: 11px; }
.section-about .skill-name { align-items: center; gap: 11px; font-size: .68rem; line-height: 1.4; letter-spacing: .12em; }
.section-about .skill-icon { display: block; width: 1.2em; height: auto; flex-basis: 1.2em; margin-top: 0; border-radius: 0; background: transparent; filter: none; }
.section-about .skill-track { height: 5px; background: rgba(255,255,255,.075); }
.section-about .skill-bar { background: linear-gradient(90deg, #64b2d3, #a8d4ec); }
.section-about .about-inner > .bokah-brand-panel { border-radius: 0; }

@media (max-width: 1024px) {
  .section-about .about-inner { grid-template-columns: 1fr; }
  .section-about .about-left { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); gap: 34px; }
  .section-about .about-bio-block { padding-top: 8px; }
  .section-about .about-right { border-left: 0; border-top: 1px solid rgba(255,255,255,.085); }
}
@media (max-width: 700px) {
  .section-about .about-left { display: block; padding: 10px; }
  .section-about .about-bio-block { padding: 30px 14px 24px; }
  .section-about .about-right { padding: 30px 22px; }
  .section-about .skill-item { min-height: 0; }
}

@media (hover: none) and (pointer: coarse) {
  #video-modal .modal-info {
    justify-items: stretch !important;
    text-align: left !important;
  }
}

/* Touch animation parity: tablets use the same smooth reveal rhythm as mobile,
   while sticky hover image zoom is suppressed on touch screens. */
@media (hover: none) and (pointer: coarse) {
  .video-card:hover .video-card-thumb,
  .video-card:focus-visible .video-card-thumb,
  .video-card:focus-within .video-card-thumb,
  .photo-card:hover .photo-card-img,
  .photo-card:focus-visible .photo-card-img,
  .photo-card:focus-within .photo-card-img {
    transform: none !important;
    filter: brightness(0.95) saturate(1) !important;
  }

  .video-card.reveal,
  .photo-card.reveal,
  .ai-card.reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
      opacity 0.62s ease,
      transform 0.62s cubic-bezier(.22,.72,.18,1),
      border-color var(--t),
      box-shadow var(--t),
      background var(--t);
  }

  .video-card.reveal.visible,
  .photo-card.reveal.visible,
  .ai-card.reveal.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 768px) {
  .video-card.reveal,
  .photo-card.reveal,
  .ai-card.reveal {
    opacity: 0 !important;
    transform: translate3d(0, 14px, 0) !important;
    transition:
      opacity 0.62s ease,
      transform 0.62s cubic-bezier(.22,.72,.18,1),
      border-color var(--t),
      box-shadow var(--t),
      background var(--t) !important;
  }

  .video-card.reveal.visible,
  .photo-card.reveal.visible,
  .ai-card.reveal.visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

/* Admin typography controls must override device presentation rules. */
html, body { font-size: var(--fs-base, 16px); }
.nav-link { font-size: var(--fs-nav, inherit) !important; }

@media (max-width: 768px) and (orientation: portrait) {
  .nav-links.open .nav-link {
    font-size: calc(var(--fs-nav, 0.78rem) * 1.1) !important;
  }
}

/* Slightly larger menu labels in the iPad hamburger menu, both orientations. */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1600px) {
  .nav-links.open .nav-link {
    font-size: calc(var(--fs-nav, 0.78rem) * 1.16) !important;
  }
}

/* Tablet video modal follows the same layout language as the phone modal. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 900px) and (min-height: 560px) and (max-width: 1600px) {
  #video-modal.modal-overlay {
    padding: 52px 12px 14px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #video-modal .modal-box {
    position: relative !important;
    width: min(84vw, 980px, calc((100svh - 190px) * 1.7778)) !important;
    max-width: none !important;
    max-height: calc(100svh - 66px) !important;
    overflow: visible !important;
    background: #000 !important;
  }

  #video-modal .modal-video-wrap {
    width: 100% !important;
    max-height: calc(100svh - 190px) !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  #video-modal .modal-close {
    position: absolute !important;
    top: -40px !important;
    right: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 7px !important;
    z-index: 12 !important;
  }

  #video-modal .modal-info {
    display: grid !important;
    position: static !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title counter" "desc counter" !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 10px 10px 8px !important;
    overflow: visible !important;
    background: #000 !important;
    pointer-events: auto !important;
  }

  #video-modal #modal-title,
  #video-modal #modal-desc {
    display: -webkit-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  #video-modal #modal-title { grid-area: title !important; color: rgba(255,255,255,.94) !important; }
  #video-modal #modal-desc { grid-area: desc !important; color: rgba(232,232,232,.62) !important; }
  #video-modal #video-counter { grid-area: counter !important; position: static !important; transform: none !important; }

  #video-modal .modal-nav {
    top: var(--modal-media-center, 50%) !important;
    transform: translateY(-50%) !important;
  }
}

@media (orientation: portrait) and (min-width: 600px) and (max-width: 1200px) {
  #video-modal.modal-overlay {
    padding: 36px 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #video-modal .modal-box {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    max-height: calc(100svh - 72px) !important;
    justify-content: center !important;
    overflow: visible !important;
    background: #000 !important;
  }

  #video-modal .modal-video-wrap {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-height: calc(100svh - 220px) !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  #video-modal .modal-info {
    display: grid !important;
    position: static !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title counter" "desc counter" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 10px 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
    flex: 0 0 auto !important;
    min-height: 76px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
  }

  #video-modal #modal-title,
  #video-modal #modal-desc {
    display: -webkit-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    text-align: left !important;
    height: auto !important;
    max-height: none !important;
    line-height: 1.4 !important;
  }

  #video-modal #modal-title {
    grid-area: title !important;
    color: rgba(255,255,255,.96) !important;
    font-size: .86rem !important;
  }
  #video-modal #modal-desc {
    grid-area: desc !important;
    color: rgba(232,232,232,.68) !important;
    font-size: .72rem !important;
  }

  #video-modal #video-counter {
    grid-area: counter !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }

  #video-modal .modal-close {
    position: absolute !important;
    top: -42px !important;
    right: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 7px !important;
    z-index: 12 !important;
  }

  #video-modal .modal-nav {
    top: var(--modal-media-center, 50%) !important;
    transform: translateY(-50%) !important;
  }
}

/* JS-backed fallback for iPad browsers that report media input/orientation oddly. */
#video-modal.tablet-portrait-info .modal-info {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "title counter" "desc counter" !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 10px 10px 8px !important;
  overflow: visible !important;
  background: #000 !important;
  z-index: 2 !important;
}

#video-modal.tablet-portrait-info #modal-title,
#video-modal.tablet-portrait-info #modal-desc {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  white-space: normal !important;
  text-align: left !important;
}

#video-modal.tablet-portrait-info #modal-title {
  grid-area: title !important;
  color: rgba(255,255,255,.96) !important;
  font-size: .86rem !important;
}

#video-modal.tablet-portrait-info #modal-desc {
  grid-area: desc !important;
  color: rgba(232,232,232,.68) !important;
  font-size: .72rem !important;
  overflow-wrap: anywhere !important;
}

#video-modal.tablet-portrait-info .modal-video-wrap {
  flex: 0 0 var(--tablet-portrait-video-height, 383px) !important;
  height: var(--tablet-portrait-video-height, 383px) !important;
  min-height: 0 !important;
  max-height: calc(100svh - 260px) !important;
  aspect-ratio: auto !important;
}

#video-modal.tablet-portrait-info .modal-box {
  width: min(calc(100vw - 80px), var(--tablet-portrait-modal-width, 944px)) !important;
  max-width: min(calc(100vw - 80px), 944px) !important;
  max-height: calc(100svh - 72px) !important;
  overflow: visible !important;
}

#video-modal.tablet-portrait-info .modal-info {
  width: 100% !important;
  box-sizing: border-box !important;
}

#video-modal.tablet-portrait-info.modal-overlay {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

#video-modal.tablet-portrait-info .modal-box.modal-box--stacked-info {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

#video-modal.tablet-portrait-info .modal-info.modal-info--stacked #modal-title {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

/* Brand tagline must remain legible at every viewport. Compact navigation
   keeps the complete phrase instead of shrinking it into an ellipsis. */
#main-nav .logo-sub {
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: clamp(0.625rem, 1.15vw, 0.76rem) !important;
  letter-spacing: 0.1em !important;
  line-height: 1.25 !important;
  color: rgba(151,215,245,0.9) !important;
  text-shadow: 0 0 12px rgba(106,176,212,0.24), 0 2px 10px rgba(0,0,0,0.72) !important;
}

@media (max-width: 700px) {
  #main-nav .logo-sub {
    font-size: clamp(0.625rem, 2.65vw, 0.72rem) !important;
    letter-spacing: 0.07em !important;
  }
}

#video-modal.tablet-portrait-info .modal-info.modal-info--stacked #modal-desc {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: pre-line !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

#video-modal.tablet-portrait-info .modal-box.modal-box--stacked-info .modal-video-wrap {
  flex-basis: var(--tablet-portrait-video-height, 383px) !important;
  height: var(--tablet-portrait-video-height, 383px) !important;
  max-height: calc(100svh - 320px) !important;
}

#video-modal.tablet-portrait-info #video-counter {
  grid-area: counter !important;
  position: static !important;
  transform: none !important;
}

/* Portrait tablets stay media-first: show only the page counter below video. */
#video-modal.tablet-portrait-info .modal-info {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 6px 0 !important;
  text-align: center !important;
}

#video-modal.tablet-portrait-info #modal-title,
#video-modal.tablet-portrait-info #modal-desc,
#video-modal.tablet-portrait-info .modal-info.modal-info--stacked #modal-title,
#video-modal.tablet-portrait-info .modal-info.modal-info--stacked #modal-desc {
  display: none !important;
}

#video-modal.tablet-portrait-info #video-counter {
  display: inline-flex !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Tablet photo lightbox mirrors the video modal's frame, info and controls. */
#lightbox.tablet-photo-layout.modal-overlay {
  padding: 52px 48px 18px !important;
  align-items: center !important;
  justify-content: center !important;
}

#lightbox.tablet-photo-layout .lightbox-box {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "image image" "caption counter" !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: calc(100vw - 96px) !important;
  max-height: calc(100svh - 70px) !important;
  overflow: visible !important;
  background: #000 !important;
  border: 0 !important;
}

#lightbox.tablet-photo-layout #lightbox-img {
  grid-area: image !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 96px) !important;
  max-height: calc(100svh - 170px) !important;
  object-fit: contain !important;
  border: 0 !important;
  background: #000 !important;
}

#lightbox.tablet-photo-layout #lightbox-caption {
  grid-area: caption !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px 12px 10px !important;
  overflow: hidden !important;
  color: rgba(255,255,255,.86) !important;
  font-size: .76rem !important;
  line-height: 1.4 !important;
  letter-spacing: .06em !important;
  text-align: left !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
}

#lightbox.tablet-photo-layout #photo-counter {
  grid-area: counter !important;
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 58px !important;
  margin: 0 10px 0 0 !important;
  padding: 6px 10px !important;
}

#lightbox.tablet-photo-layout .modal-close {
  position: absolute !important;
  top: var(--lightbox-close-top, -40px) !important;
  left: calc(var(--lightbox-close-left, -2px) + 2px) !important;
  right: auto !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 7px !important;
  z-index: 12 !important;
}

#lightbox.tablet-photo-layout .modal-nav {
  display: flex !important;
  top: var(--modal-media-center, 50%) !important;
  transform: translateY(-50%) !important;
}

#lightbox.tablet-photo-portrait #lightbox-img {
  max-width: calc(100vw - 72px) !important;
  max-height: calc(100svh - 180px) !important;
}

#lightbox.tablet-photo-portrait .lightbox-box {
  max-width: calc(100vw - 72px) !important;
}

#lightbox.tablet-photo-landscape #lightbox-img {
  max-width: min(84vw, 1100px) !important;
  max-height: calc(100svh - 160px) !important;
}

/* Align tablet category selects with the first thumbnail column. */
@media (orientation: portrait) and (max-width: 599px) {
  .portfolio-section {
    --tablet-grid-edge: clamp(12px, 3vw, 18px);
  }

  .portfolio-section .video-grid,
  .portfolio-section .photo-grid,
  .portfolio-section .ai-grid {
    padding-left: var(--tablet-grid-edge) !important;
    padding-right: var(--tablet-grid-edge) !important;
    box-sizing: border-box !important;
  }

  .portfolio-section .cat-select {
    margin-left: var(--tablet-grid-edge) !important;
  }
}

/* Absolute final gallery alignment precedence. */
.portfolio-section .section-header {
  width: 100% !important;
  padding-left: var(--gallery-content-edge, 0px) !important;
  padding-right: var(--gallery-content-edge, 0px) !important;
  box-sizing: border-box !important;
}
.portfolio-section .cat-select {
  margin-left: var(--gallery-content-edge, 0px) !important;
  margin-right: auto !important;
}
.portfolio-section .section-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .18em !important;
  padding-left: 0 !important;
}
.portfolio-section .section-title-icon {
  margin-right: 0 !important;
}

/* One gallery edge for every platform: heading, category control and first
   thumbnail always share the exact same start line. */
.portfolio-section {
  --gallery-content-edge: var(--tablet-grid-edge, 0px);
}
.portfolio-section .section-header {
  width: 100% !important;
  padding-left: var(--gallery-content-edge) !important;
  padding-right: var(--gallery-content-edge) !important;
  box-sizing: border-box !important;
}
.portfolio-section .cat-select {
  margin-left: var(--gallery-content-edge) !important;
  margin-right: auto !important;
}
.portfolio-section .cat-tabs {
  justify-content: flex-start !important;
  margin-left: var(--gallery-content-edge) !important;
  margin-right: var(--gallery-content-edge) !important;
}
.portfolio-section .section-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .18em !important;
  padding-left: 0 !important;
}
.portfolio-section .section-title-icon {
  margin-right: 0 !important;
}

@media (orientation: landscape) and (max-width: 899px) {
  .portfolio-section {
    --tablet-grid-edge: clamp(10px, 2vw, 16px);
  }

  .portfolio-section .video-grid,
  .portfolio-section .photo-grid,
  .portfolio-section .ai-grid {
    padding-left: var(--tablet-grid-edge) !important;
    padding-right: var(--tablet-grid-edge) !important;
    box-sizing: border-box !important;
  }

  .portfolio-section .cat-select {
    margin-left: var(--tablet-grid-edge) !important;
  }
}

@media (orientation: portrait) and (min-width: 600px) and (max-width: 1200px) {
  .portfolio-section {
    --tablet-grid-edge: clamp(14px, 2.4vw, 26px);
  }

  .portfolio-section .video-grid,
  .portfolio-section .photo-grid,
  .portfolio-section .ai-grid {
    padding-left: var(--tablet-grid-edge) !important;
    padding-right: var(--tablet-grid-edge) !important;
    box-sizing: border-box !important;
  }

  .portfolio-section .cat-select {
    margin-left: var(--tablet-grid-edge) !important;
  }
}

@media (orientation: landscape) and (min-width: 900px) and (max-width: 1600px) {
  .portfolio-section {
    --tablet-grid-edge: clamp(12px, 1.6vw, 22px);
  }

  .portfolio-section .video-grid,
  .portfolio-section .photo-grid,
  .portfolio-section .ai-grid {
    padding-left: var(--tablet-grid-edge) !important;
    padding-right: var(--tablet-grid-edge) !important;
    box-sizing: border-box !important;
  }

  .portfolio-section .cat-select {
    margin-left: var(--tablet-grid-edge) !important;
  }
}

/* Final gallery polish precedence. Layout metrics intentionally untouched. */
.portfolio-section::before {
  border-color: rgba(255,255,255,.085);
  background: rgba(7,7,7,.58);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  box-shadow: 0 36px 110px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.045);
}

/* Responsive editorial body copy — justified without exaggerated gaps. */
#about .about-bio p,
#about .bokah-brand-copy > p:not(.label-tag),
#contact .contact-tagline,
#contact .contact-bio p {
  text-align: justify !important;
  text-align-last: left !important;
  text-justify: inter-word;
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-spacing: .005em;
  letter-spacing: .008em;
  line-height: 1.86;
}

/* Premium navigation finish — preserves menu structure and breakpoints. */
#main-nav {
  background: linear-gradient(180deg, rgba(5,5,5,.9), rgba(5,5,5,.76));
  border-bottom-color: rgba(255,255,255,.065);
  box-shadow: 0 12px 42px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
}

/* BTS thumbnails share the same restrained cinematic exposure as the main galleries. */
#behind-scene .video-card-thumb,
#behind-scene .photo-card-img {
  filter: brightness(1) saturate(1);
}

@media (hover:hover) and (pointer:fine) {
  #behind-scene .video-card:hover .video-card-thumb,
  #behind-scene .video-card:focus-visible .video-card-thumb,
  #behind-scene .photo-card:hover .photo-card-img,
  #behind-scene .photo-card:focus-visible .photo-card-img {
    filter: brightness(1) saturate(1) !important;
  }
}
#main-nav.scrolled {
  background: rgba(5,5,5,.93);
  border-bottom-color: rgba(106,176,212,.14);
  box-shadow: 0 16px 52px rgba(0,0,0,.34);
}
#main-nav .nav-logo { gap: 12px; }
#main-nav .logo-img {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#main-nav .logo-name { color: #f2f3f4; text-shadow: 0 8px 26px rgba(0,0,0,.42); }
#main-nav .logo-rule { height: 22px; background: linear-gradient(180deg, transparent, rgba(106,176,212,.42), transparent); }
#main-nav .logo-sub { color: rgba(131,199,232,.74); }

@media (hover: hover) and (pointer: fine) and (min-width: 1181px) {
  #main-nav .nav-links {
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 999px;
    background: rgba(255,255,255,.018);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
  }
  #main-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 clamp(10px, .85vw, 15px);
    border-radius: 999px;
    color: rgba(232,232,232,.58);
    transition: color .28s ease, background .28s ease, box-shadow .28s ease;
  }
  #main-nav .nav-link::after { display: none; }
  #main-nav .nav-link:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.045); }
  #main-nav .nav-link.active {
    color: #f4fbff;
    background: linear-gradient(180deg, rgba(106,176,212,.17), rgba(106,176,212,.07));
    box-shadow: inset 0 0 0 1px rgba(106,176,212,.2), 0 7px 20px rgba(0,0,0,.18);
  }
}

/* Touch-tablet hamburger panel: isolate it from the desktop pill navigation. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1600px) {
  #main-nav .nav-toggle { display: flex !important; }
  #main-nav .nav-links {
    display: flex !important;
    position: fixed !important;
    top: var(--nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(5,5,5,.95) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.4) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    max-height: 0;
    overflow: hidden !important;
    opacity: 0;
    pointer-events: none;
  }
  #main-nav .nav-links.open {
    max-height: min(62svh, 430px) !important;
    padding: 8px 0 14px !important;
    overflow-y: auto !important;
    opacity: 1;
    pointer-events: auto;
    border-bottom: 1px solid rgba(106,176,212,.14) !important;
  }
  #main-nav .nav-links li { width: 100% !important; }
  #main-nav .nav-links .nav-link {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 11px 24px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    font-size: clamp(.78rem, 1.7vw, .92rem) !important;
    letter-spacing: .18em;
    line-height: 1.25;
  }
  #main-nav .nav-links .nav-link::after { display: block; }
}

@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1600px) and (orientation: landscape) {
  #main-nav .nav-links.open {
    max-height: min(56svh, 320px) !important;
    padding-block: 5px 9px !important;
  }
  #main-nav .nav-links .nav-link { padding-block: 7px !important; }
}

@media (max-width: 1180px) {
  #main-nav .nav-toggle {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    background: rgba(255,255,255,.025);
    box-shadow: inset 0 1px rgba(255,255,255,.04);
  }
  #main-nav .nav-toggle span { width: 20px; height: 1.5px; margin-inline: auto; }
  #main-nav .nav-links.open {
    background: rgba(6,6,6,.94);
    border-bottom: 1px solid rgba(106,176,212,.14);
    box-shadow: 0 24px 60px rgba(0,0,0,.38);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
}

/* Tablet: slightly tighter measure and spacing. */
@media (min-width: 701px) and (max-width: 1180px) {
  #about .about-bio p,
  #about .bokah-brand-copy > p:not(.label-tag),
  #contact .contact-tagline,
  #contact .contact-bio p {
    text-justify: inter-word;
    word-spacing: -.018em;
    letter-spacing: .004em;
    line-height: 1.82;
  }
}

/* Phone: distribute tiny amounts across characters instead of opening large word gaps. */
@media (max-width: 700px) {
  #about .about-bio p,
  #about .bokah-brand-copy > p:not(.label-tag),
  #contact .contact-tagline,
  #contact .contact-bio p {
    text-justify: inter-character;
    word-spacing: -.045em;
    letter-spacing: 0;
    line-height: 1.76;
    hyphenate-limit-chars: 7 3 3;
  }

  #about .bokah-brand-copy > p:not(.label-tag),
  #contact .contact-tagline {
    max-width: 38rem;
  }
}
.portfolio-section .cat-tab { border-radius:999px; background:rgba(8,8,8,.52); backdrop-filter:blur(10px); }
.portfolio-section .cat-tab.active { border-color:rgba(106,176,212,.52); background:linear-gradient(180deg,rgba(106,176,212,.2),rgba(106,176,212,.08)); }
.portfolio-section .video-card,
.portfolio-section .photo-card,
.portfolio-section .ai-card { border-color:rgba(255,255,255,.12); border-radius:9px; box-shadow:0 14px 38px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.045); }
.portfolio-section .play-btn { border-color:rgba(255,255,255,.56); background:rgba(5,5,5,.58); box-shadow:0 10px 30px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.12); }
@media (hover:hover) and (pointer:fine) {
  .portfolio-section .video-card:hover,
  .portfolio-section .photo-card:hover,
  .portfolio-section .ai-card:hover { border-color:rgba(106,176,212,.4); box-shadow:0 26px 68px rgba(0,0,0,.4),0 0 0 1px rgba(106,176,212,.055); }
}

/* Absolute final Contact copy alignment across desktop, tablet, and phone. */
#contact .contact-tagline,
#contact .contact-bio,
#contact .contact-bio p {
  width: 100%;
  max-width: 35rem;
  margin-left: 0;
  margin-right: auto;
  text-align: left !important;
  text-align-last: left !important;
  text-justify: auto !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  line-height: 1.82;
  text-wrap: pretty;
}

@media (max-width: 700px) {
  #contact .contact-tagline,
  #contact .contact-bio,
  #contact .contact-bio p {
    max-width: 100%;
    line-height: 1.72;
  }

  /* Keep the actual field at 16px to prevent focus zoom; only shrink its hint text. */
  #contact .cf-input::placeholder,
  #contact input::placeholder,
  #contact textarea::placeholder {
    font-size: 13px !important;
    letter-spacing: -.01em !important;
  }
}

/* Absolute final About copy alignment: never distribute spaces between words. */
#about .about-bio,
#about .about-bio p,
#about .bokah-brand-copy,
#about .bokah-brand-copy > p:not(.label-tag) {
  text-align: left !important;
  text-align-last: left !important;
  text-justify: none !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  white-space: normal;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Mobile blue labels: unified size and line treatment across About subsections. */
@media (max-width: 700px) {
  #about .about-bio-block > .label-tag,
  #about .about-right > .label-tag,
  #about .bokah-brand-copy > .label-tag {
    display: flex !important;
    align-items: center;
    width: 100%;
    gap: 12px;
    margin-bottom: 18px !important;
    color: #83c7e8 !important;
    font-size: clamp(.64rem, 2.75vw, .7rem) !important;
    font-weight: 800 !important;
    letter-spacing: .22em !important;
    line-height: 1.3;
    white-space: nowrap;
  }
  #about .about-bio-block > .label-tag::after,
  #about .about-right > .label-tag::after,
  #about .bokah-brand-copy > .label-tag::after {
    content: "";
    display: block;
    flex: 1 1 auto;
    min-width: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(131,199,232,.38), transparent);
  }

  #contact .contact-profile > .label-tag,
  #contact .contact-form-heading > span,
  #showreel .hero-kicker {
    font-size: clamp(.64rem, 2.75vw, .7rem) !important;
  }
}

/* Phone portrait brand lockup: icon + two-line identity, isolated from other platforms. */
@media (max-width: 600px) and (orientation: portrait) {
  #main-nav .nav-logo {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    max-width: calc(100vw - 82px);
  }
  #main-nav .logo-img {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 38px;
    height: 38px;
  }
  #main-nav .logo-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: clamp(.76rem, 3.35vw, .9rem) !important;
    letter-spacing: .14em;
    line-height: 1.1;
  }
  #main-nav .logo-rule { display: none !important; }
  #main-nav .logo-sub {
    display: block !important;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    overflow: visible;
    color: rgba(131,199,232,.68);
    font-size: clamp(.42rem, 1.85vw, .5rem) !important;
    font-weight: 650;
    letter-spacing: .12em;
    line-height: 1.2;
    white-space: nowrap;
  }
}

/* Brand story body uses the exact same responsive type size as the About bio. */
#about .bokah-brand-copy p,
#about .bokah-brand-copy .bokah-brand-lede {
  font-size: var(--section-body-size, var(--fs-body, .9rem)) !important;
}

/* Logo evolution cards: one-step type increase across every platform. */
#about .bokah-logo-year {
  font-size: clamp(.68rem, .82vw, .76rem);
}
#about .bokah-logo-year small {
  font-size: clamp(.74rem, .9vw, .82rem);
}
#about .bokah-logo-card p {
  font-size: clamp(.8rem, .95vw, .88rem);
  line-height: 1.66;
}

#contact .contact-form-heading p {
  font-size: var(--section-body-size, var(--fs-body, .9rem)) !important;
}

/* Send CTA typography matches the Hero CTA scale on every responsive profile. */
#contact .cf-submit {
  font-size: calc(var(--section-body-size, .94rem) * .9) !important;
  font-weight: 800;
  letter-spacing: .18em !important;
}
#contact .cf-submit i { font-size: 1em !important; }

/* Absolute portrait geometry guard: stable through every resize and breakpoint. */
#about .about-photo-wrap {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  align-self: center !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}

/* Brand tagline is always visible; compact screens use the two-line lockup. */
#main-nav .logo-sub { display: block !important; }

@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-width: 1600px) {
  #main-nav .nav-logo {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    max-width: calc(100vw - 82px);
  }
  #main-nav .logo-img {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  #main-nav .logo-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    line-height: 1.1;
  }
  #main-nav .logo-rule { display: none !important; }
  #main-nav .logo-sub {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    overflow: hidden;
    color: rgba(131,199,232,.68);
    font-size: clamp(.42rem, 1.25vw, .54rem) !important;
    font-weight: 650;
    letter-spacing: .12em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.about-mobile-bio-label { display: none; }

@media (max-width: 700px) {
  #main-nav .logo-img {
    width: 42px !important;
    height: 42px !important;
  }

  #main-nav .logo-name {
    font-size: clamp(0.82rem, 3.6vw, 1rem) !important;
    letter-spacing: 0.135em;
  }

  #main-nav .logo-sub {
    font-size: clamp(0.5rem, 2.15vw, 0.6rem) !important;
    letter-spacing: 0.115em;
    line-height: 1.25;
  }
}

@media (max-width: 700px) {
  #about .about-mobile-bio-label {
    display: flex !important;
    align-items: center;
    width: calc(100% - 28px);
    gap: 12px;
    margin: 16px 14px 26px;
    color: #83c7e8;
    font-size: clamp(.64rem, 2.75vw, .7rem) !important;
    font-weight: 800;
    letter-spacing: .22em;
    line-height: 1.3;
  }
  #about .about-mobile-bio-label::after {
    content: "";
    flex: 1 1 auto;
    min-width: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(131,199,232,.38), transparent);
  }
  #about .about-bio-block > .label-tag { display: none !important; }
}
#about .about-photo {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  border-radius: 50% !important;
}

/* Final iPad/tablet refinements: type, one-line brand lockup and photo controls. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1180px) {
  #about #brand-story-label {
    font-size: .68rem !important;
    line-height: 1.3 !important;
  }

  #main-nav .nav-logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: calc(100vw - 82px);
  }
  #main-nav .logo-img,
  #main-nav .logo-name,
  #main-nav .logo-rule,
  #main-nav .logo-sub {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: center !important;
  }
  #main-nav .logo-rule { display: block !important; }
  #main-nav .logo-sub {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  #lightbox.tablet-photo-layout .modal-nav--prev {
    left: max(4px, calc(var(--modal-media-left, 48px) - 44px)) !important;
    right: auto !important;
  }
  #lightbox.tablet-photo-layout .modal-nav--next {
    left: min(calc(100vw - 42px), calc(var(--modal-media-right, 100vw) + 6px)) !important;
    right: auto !important;
  }
}

/* Compact screens retain the intentional two-row logo lockup. */
@media (max-width: 700px) {
  #main-nav .nav-logo {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }

  /* Only the biography label above the portrait may render in narrow in-app browsers. */
  #about .about-bio-block > p.label-tag:first-child {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Absolute responsive guards: no clipped Contact role or escaped Showreel player. */
#contact .contact-profile > .label-tag,
#contact .contact-form-heading > span {
  font-size: clamp(0.64rem, calc(var(--section-body-size, 0.96rem) * 0.72), 0.72rem) !important;
}

#contact .contact-role {
  width: 100%;
  max-width: min(100%, 42rem);
  margin-inline: auto;
  padding-inline: clamp(4px, 1vw, 12px);
  box-sizing: border-box;
  font-size: clamp(0.42rem, min(1.75vw, calc(var(--section-body-size, 0.96rem) * 0.76)), 0.74rem) !important;
  letter-spacing: clamp(0.045em, 0.22vw, 0.14em) !important;
  white-space: normal !important;
  overflow: visible;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: wrap;
  text-align: center;
}

@media (max-width: 600px) {
  #main-footer #footer-credit-label,
  #main-footer #footer-credit-name,
  #main-footer .footer-credit-tool {
    font-size: clamp(0.58rem, calc(var(--footer_media-body-size, 0.68rem) * 1.02), 0.64rem) !important;
  }
}

#showreel .hero-intro,
#showreel .showreel-player {
  width: min(calc(100% - clamp(24px, 5vw, 64px)), 1120px) !important;
  max-width: min(calc(100% - clamp(24px, 5vw, 64px)), 1120px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
#showreel .showreel-player {
  min-width: 0;
  contain: layout paint;
}
#showreel .showreel-player iframe {
  display: block;
  z-index: 1;
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box;
}

#showreel .vimeo-startup-cover {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity .14s ease, visibility 0s linear .14s;
}
#showreel .vimeo-startup-spinner {
  color: #83c7e8;
  font-size: clamp(1.35rem, 3vw, 2rem);
  filter: drop-shadow(0 0 10px rgba(106,176,212,.34));
  animation: vimeo-startup-spin .8s linear infinite;
}
@keyframes vimeo-startup-spin {
  to { transform: rotate(360deg); }
}
#showreel .vimeo-startup-cover.is-revealed {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  #showreel .vimeo-startup-cover {
    transition-duration: .01ms;
  }
  #showreel .vimeo-startup-spinner {
    animation-duration: 1.6s;
  }
}

#showreel .native-showreel,
#showreel .native-showreel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#showreel .native-showreel {
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: inherit;
}
#showreel .native-showreel video {
  display: block;
  object-fit: contain;
  background: #000;
}
#showreel .native-showreel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: clamp(58px, 7vw, 78px);
  height: clamp(58px, 7vw, 78px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  background: rgba(10,10,10,.55);
  color: #fff;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
#showreel .native-showreel-center:hover {
  background: rgba(201,169,110,.86);
  transform: translate(-50%, -50%) scale(1.05);
}
#showreel .native-showreel-center.is-hidden {
  opacity: 0;
  pointer-events: none;
}
#showreel .native-showreel-center.is-sound-prompt {
  top: 8px;
  bottom: auto;
  width: auto;
  min-width: 96px;
  height: 40px;
  padding: 0 9px;
  grid-template-columns: auto auto;
  gap: 6px;
  z-index: 20;
  border-color: transparent;
  border-radius: 8px;
  color: #f8fbfd;
  font-size: .78rem;
  letter-spacing: .04em;
  transform: translateX(-50%);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#showreel .native-showreel-center.is-sound-prompt::before {
  content: "";
  position: absolute;
  inset: 6px -12px;
  z-index: -1;
  border: 1px solid rgba(106,176,212,.72);
  border-radius: 8px;
  background: linear-gradient(105deg, #080b0d 0%, #10171b 100%);
  box-shadow:
    0 8px 24px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  pointer-events: none;
}
#showreel .native-showreel-center.is-sound-prompt:hover {
  transform: translateX(-50%) scale(1.03);
}
#showreel .native-showreel-center.is-sound-prompt:hover::before,
#showreel .native-showreel-center.is-sound-prompt:focus-visible::before {
  border-color: #83c7e8;
  background: linear-gradient(105deg, #0d171c 0%, #18313d 100%);
  box-shadow:
    0 10px 28px rgba(0,0,0,.58),
    0 0 0 2px rgba(106,176,212,.16);
}
#showreel .native-showreel-center.is-sound-prompt i,
#showreel .native-showreel-center.is-sound-prompt span {
  position: relative;
  z-index: 1;
}
#showreel .native-showreel-center.is-sound-prompt span {
  font-size: .54rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .09em;
  white-space: nowrap;
}
#showreel .native-showreel-center.is-sound-prompt i {
  color: #83c7e8;
  filter: drop-shadow(0 0 7px rgba(106,176,212,.28));
}
#showreel .vimeo-sound-prompt {
  top: 10px;
  z-index: 40;
  width: 130px;
  min-width: 130px;
  max-width: 130px;
  height: 48px;
  padding-inline: 12px;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 1px solid rgba(106,176,212,.72) !important;
  border-radius: 8px;
  background: linear-gradient(105deg, #080b0d 0%, #10171b 100%) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.08);
}
#showreel .vimeo-sound-prompt::before {
  display: none;
}
#showreel .vimeo-sound-prompt[hidden] {
  display: none !important;
}
#showreel .vimeo-sound-prompt:hover,
#showreel .vimeo-sound-prompt:focus-visible {
  border-color: #83c7e8 !important;
  background: linear-gradient(105deg, #0d171c 0%, #18313d 100%) !important;
}
@media (max-width: 480px) {
  html:not(.is-touch-tablet) #showreel .vimeo-sound-prompt {
    top: 10px !important;
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 34px;
    padding-inline: 4px;
    grid-template-columns: 12px auto;
    justify-content: center;
    gap: 4px;
    font-size: .5rem;
    transform: translateX(-50%);
    overflow: hidden;
  }
  html:not(.is-touch-tablet) #showreel .vimeo-sound-prompt i {
    width: 12px;
    height: 12px;
    display: inline-grid;
    place-items: center;
    border-radius: 0;
    background: transparent;
    font-size: .43rem;
  }
  html:not(.is-touch-tablet) #showreel .vimeo-sound-prompt span {
    min-width: 0;
    max-width: 58px;
    overflow: hidden;
    font-size: .48rem;
    letter-spacing: .035em;
    text-overflow: clip;
  }
}
@media (min-width: 481px) and (max-width: 900px) {
  html:not(.is-touch-tablet) #showreel .vimeo-sound-prompt {
    top: 10px;
    width: 84px;
    min-width: 84px;
    max-width: 84px;
    height: 34px;
    padding-inline: 4px;
    grid-template-columns: 12px auto;
    justify-content: center;
    gap: 4px;
    font-size: .5rem;
    transform: translateX(-50%);
    overflow: hidden;
  }
  html:not(.is-touch-tablet) #showreel .vimeo-sound-prompt i {
    width: 12px;
    height: 12px;
    display: inline-grid;
    place-items: center;
    border-radius: 0;
    background: transparent;
    font-size: .43rem;
  }
  html:not(.is-touch-tablet) #showreel .vimeo-sound-prompt span {
    min-width: 0;
    max-width: 58px;
    overflow: hidden;
    font-size: .48rem;
    letter-spacing: .035em;
    text-overflow: clip;
  }
}
@media (min-width: 901px) {
  #showreel .vimeo-sound-prompt {
    top: 14px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    height: 56px;
    padding-inline: 18px;
    gap: 9px;
    font-size: .82rem;
    transform: translateX(-50%);
  }
  #showreel .vimeo-sound-prompt span {
    font-size: .7rem;
    letter-spacing: .08em;
  }
  #showreel .vimeo-sound-prompt:hover {
    transform: translateX(-50%) scale(1.03);
  }
}
html.is-touch-tablet #showreel .vimeo-sound-prompt {
  top: 14px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  height: 56px !important;
  padding-inline: 18px !important;
  grid-template-columns: auto auto !important;
  justify-content: center;
  gap: 9px !important;
  overflow: visible !important;
  font-size: .82rem !important;
  transform: translateX(-50%) !important;
}
html.is-touch-tablet #showreel .vimeo-sound-prompt i {
  width: auto !important;
  height: auto !important;
  display: inline-block;
  border-radius: 0;
  background: transparent;
  font-size: .82rem !important;
}
html.is-touch-tablet #showreel .vimeo-sound-prompt span {
  max-width: none !important;
  overflow: visible !important;
  font-size: .7rem !important;
  letter-spacing: .08em !important;
}
#showreel .native-showreel-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto auto minmax(70px, 1fr) auto auto;
  align-items: center;
  gap: clamp(7px, 1.2vw, 13px);
  padding: 30px clamp(10px, 2vw, 20px) clamp(9px, 1.4vw, 15px);
  background: linear-gradient(transparent, rgba(0,0,0,.88));
  transition: opacity .22s ease, transform .22s ease;
}
#showreel .vimeo-custom-controls.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
#showreel .vimeo-controls-activator {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#showreel .native-showreel[data-controls-visible="false"] {
  cursor: none;
}
#showreel .native-showreel[data-controls-visible="false"] .native-showreel-controls {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
#showreel .native-control {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: .92rem;
  cursor: pointer;
}
#showreel .native-control:hover,
#showreel .native-control:focus-visible { color: var(--gold); }
#showreel .native-time {
  color: rgba(255,255,255,.82);
  font-size: clamp(.58rem, 1.2vw, .7rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#showreel .native-progress {
  width: 100%;
  height: 24px;
  min-height: 24px;
  margin-block: -10px;
  padding: 0;
  background: transparent;
  accent-color: var(--gold);
  cursor: pointer;
  touch-action: none;
}

#showreel .vimeo-progress-hitarea {
  width: 100%;
  min-width: 0;
  height: 28px;
  margin-block: -12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

#showreel .vimeo-progress-hitarea .native-progress {
  margin-block: 0;
}

@media (hover: none) and (pointer: coarse) {
  #showreel .native-progress {
    height: 44px;
    min-height: 44px;
    margin-block: -20px;
  }
  #showreel .vimeo-progress-hitarea {
    height: 48px;
    min-height: 48px;
    margin-block: -22px;
  }
  #showreel .vimeo-progress-hitarea .native-progress {
    height: 24px;
    min-height: 24px;
    margin-block: 0;
    pointer-events: none;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 600px) and (max-width: 1180px) {
  #showreel .native-showreel-controls {
    grid-template-columns: auto minmax(140px, 1fr) auto;
  }
  #showreel .native-current,
  #showreel .native-duration {
    display: none;
  }
}

@media (max-width: 560px) {
  #showreel .native-showreel-controls {
    grid-template-columns: auto minmax(60px, 1fr) auto auto;
  }
  #showreel .native-current,
  #showreel .native-duration { display: none; }
}

/* Unified Hero + Showreel glass shell keeps both elements inside one responsive frame. */
#showreel .showreel-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  width: min(calc(100% - clamp(20px, 4vw, 56px)), 1180px);
  margin: clamp(16px, 2vw, 28px) auto 0;
  padding: 0 clamp(12px, 2vw, 28px) clamp(14px, 2vw, 28px);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15,15,15,.52), rgba(5,5,5,.3) 54%, rgba(10,10,10,.42));
  box-shadow:
    0 34px 110px rgba(0,0,0,.26),
    inset 0 1px rgba(255,255,255,.065),
    inset 1px 0 rgba(255,255,255,.018),
    inset -1px 0 rgba(255,255,255,.012);
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
}
#showreel .hero-intro::before { display: none; }
#showreel .showreel-shell .hero-intro,
#showreel .showreel-shell .showreel-player {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#showreel .showreel-shell .hero-intro {
  padding-left: clamp(12px, 3vw, 44px);
  padding-right: clamp(12px, 3vw, 44px);
}

@media (max-width: 700px) {
  #showreel .showreel-shell {
    width: calc(100% - 16px);
    gap: 12px;
    margin-top: 8px;
    padding-inline: 8px;
    padding-bottom: 8px;
    border-radius: 11px;
  }
}

/* Mobile section rhythm: keep related sections visually connected. */
@media (max-width: 700px) {
  #showreel.section-showreel {
    padding-bottom: 34px !important;
  }
  #about.section-about {
    padding-top: 48px !important;
  }

  #about .section-about .about-bio-block,
  #about .about-bio-block {
    padding-top: 12px !important;
  }
  #about .about-name {
    margin-top: 8px !important;
  }

  #contact.section-contact {
    padding-top: 48px !important;
  }
}

/* Absolute final iPad overrides; keep after all shared responsive rules. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1180px) and (orientation: portrait) {
  #lightbox.tablet-photo-portrait .lightbox-box,
  #lightbox.tablet-photo-portrait #lightbox-img { max-width: calc(100vw - 168px) !important; }
  #lightbox.tablet-photo-portrait .modal-nav--prev {
    left: calc(var(--modal-media-left, 84px) - 46px) !important;
    right: auto !important;
  }
  #lightbox.tablet-photo-portrait .modal-nav--next {
    left: calc(var(--modal-media-right, calc(100vw - 84px)) + 8px) !important;
    right: auto !important;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-width: 1600px) and (orientation: landscape) {
  #main-nav .nav-logo {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: calc(100vw - 82px) !important;
  }
  #main-nav .logo-img,
  #main-nav .logo-name,
  #main-nav .logo-rule,
  #main-nav .logo-sub {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: center !important;
  }
  #main-nav .logo-rule { display: block !important; }
  #main-nav .logo-sub {
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  #main-nav .nav-links.open .nav-link {
    font-size: clamp(.9rem, 1.55vw, 1.05rem) !important;
    line-height: 1.3 !important;
    padding-top: 8px !important;
    padding-bottom: 13px !important;
  }
  #main-nav .nav-links.open .nav-link::after {
    bottom: 4px !important;
  }
  #showreel.section-showreel { padding-bottom: 42px !important; }
  #about.section-about { padding-top: 62px !important; }
  #contact.section-contact { padding-top: 62px !important; }
}

/* Desktop: tighten the transition from Showreel into About. */
@media (hover: hover) and (pointer: fine) and (min-width: 1181px) {
  #showreel.section-showreel { padding-bottom: 52px !important; }
  #about.section-about { padding-top: 72px !important; }
}

/* Compact Android tablets (for example Galaxy Tab S6 Lite). Their landscape
   viewport is wide enough to look desktop-like, but too short for desktop scale. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 769px) and (max-width: 1400px) and (max-height: 820px) {
  html,
  body { font-size: 14px !important; }

  #main-nav { --nav-h: 64px; }
  #main-nav .nav-inner { padding-inline: 20px !important; }
  #main-nav .logo-img { width: 40px !important; height: 40px !important; }
  #main-nav .logo-name { font-size: .9rem !important; letter-spacing: .13em !important; }
  #main-nav .logo-sub { font-size: .58rem !important; letter-spacing: .15em !important; }

  #showreel .showreel-shell {
    width: calc(100% - 28px) !important;
    gap: 12px !important;
    margin-top: 10px !important;
    padding: 0 12px 12px !important;
  }
  #showreel .hero-intro { padding-top: 24px !important; }
  #showreel .hero-title { font-size: clamp(2rem, 5vw, 3.15rem) !important; }
  #showreel .hero-summary { max-width: 540px !important; margin-bottom: 18px !important; }
  #showreel .hero-actions { margin-bottom: 10px !important; }

  .portfolio-section,
  #about.section-about,
  #contact.section-contact {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .portfolio-section { padding-top: 58px !important; padding-bottom: 58px !important; }
  .portfolio-section .section-header { margin-bottom: 24px !important; }
  .portfolio-section .section-title { font-size: clamp(1.35rem, 2.4vw, 1.75rem) !important; }

  #about.section-about { padding-top: 52px !important; padding-bottom: 58px !important; }
  #about .about-inner { max-width: 1040px !important; }
  #about .about-left { padding: 24px !important; gap: 24px !important; }
  #about .about-right { padding: 26px !important; }
  #about .about-photo-wrap { width: 170px !important; height: 170px !important; }
  #about .bokah-brand-panel { padding: 30px 28px !important; }

  #contact.section-contact { padding-top: 52px !important; padding-bottom: 58px !important; }
  #contact .contact-inner { max-width: 1040px !important; }
  #contact .contact-profile,
  #contact .contact-form { padding: 28px !important; }
}

/* Low-resolution tablet portrait: preserve the readable portrait scale, but
   keep the brand lockup on one line instead of the compact two-row treatment. */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1024px) {
  #main-nav .nav-logo {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: calc(100vw - 78px) !important;
  }
  #main-nav .logo-img,
  #main-nav .logo-name,
  #main-nav .logo-rule,
  #main-nav .logo-sub {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: center !important;
  }
  #main-nav .logo-rule { display: block !important; }
  #main-nav .logo-name { font-size: clamp(.78rem, 2vw, .94rem) !important; }
  #main-nav .logo-sub {
    display: block !important;
    overflow: visible !important;
    font-size: clamp(.48rem, 1.25vw, .58rem) !important;
    letter-spacing: .13em !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

/* Phone landscape: short-height screens need their own density instead of
   inheriting tablet/desktop proportions merely because the width is large. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  html,
  body { font-size: 13px !important; }

  #main-nav { --nav-h: 62px; }
  #main-nav .nav-inner { padding-inline: 14px !important; }
  #main-nav .logo-img { width: 40px !important; height: 40px !important; }
  #main-nav .logo-name { font-size: .96rem !important; letter-spacing: .115em !important; }
  #main-nav .logo-sub { font-size: .62rem !important; letter-spacing: .115em !important; }
  #main-nav .nav-links.open {
    max-height: calc(100svh - 62px) !important;
    padding-block: 3px 7px !important;
  }
  #main-nav .nav-links.open .nav-link {
    padding-block: 6px 10px !important;
    font-size: .82rem !important;
  }

  #showreel .showreel-shell {
    width: calc(100% - 16px) !important;
    gap: 8px !important;
    margin-top: 6px !important;
    padding: 0 8px 8px !important;
  }
  #showreel .hero-intro { padding: 16px 12px 0 !important; }
  #showreel .hero-kicker { margin-bottom: 10px !important; }
  #showreel .hero-title { font-size: clamp(1.65rem, 5.4vw, 2.6rem) !important; margin-bottom: 12px !important; }
  #showreel .hero-summary { margin-bottom: 12px !important; line-height: 1.55 !important; }
  #showreel .hero-actions { margin-bottom: 6px !important; }
  #showreel .hero-btn { min-height: 38px !important; padding-block: 8px !important; }

  .portfolio-section,
  #about.section-about,
  #contact.section-contact {
    padding: 42px 14px !important;
  }
  .portfolio-section .section-header { margin-bottom: 18px !important; }
  .portfolio-section .section-title { font-size: 1.35rem !important; }
  .portfolio-section .video-grid,
  .portfolio-section .photo-grid,
  .portfolio-section .ai-grid { gap: 7px !important; }

  #about .about-left {
    grid-template-columns: 138px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 18px !important;
  }
  #about .about-photo-wrap { width: 132px !important; height: 132px !important; }
  #about .about-bio-block { padding-top: 0 !important; }
  #about .about-right { padding: 22px !important; }
  #about .bokah-brand-panel { padding: 24px 20px !important; }

  #contact .contact-profile,
  #contact .contact-form { padding: 22px !important; }
}

/* Compact | icon TITLE | lockup, optically centred at every breakpoint. */
#cinematography .section-header,
#photography .section-header,
#behind-scene .section-header {
  width: max-content !important;
  max-width: 100% !important;
  margin-left: var(--gallery-content-edge, 0px) !important;
  margin-right: auto !important;
  padding-inline: 0 !important;
  gap: 0 !important;
}

#cinematography .section-title,
#photography .section-title,
#behind-scene .section-title {
  padding-inline: 0 !important;
  border-inline: 0 !important;
  line-height: 1 !important;
  gap: 0 !important;
}

#cinematography .section-title-mark,
#photography .section-title-mark,
#behind-scene .section-title-mark {
  display: none !important;
}

#cinematography .section-title-icon,
#photography .section-title-icon,
#behind-scene .section-title-icon {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  margin-right: .42em !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #6ab0d4 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: .88em !important;
  filter: drop-shadow(0 0 12px rgba(106,176,212,.2)) !important;
}

#cinematography .section-title-text,
#photography .section-title-text,
#behind-scene .section-title-text {
  display: inline-block !important;
  line-height: 1 !important;
  letter-spacing: .085em !important;
  text-shadow: 0 5px 22px rgba(0,0,0,.42) !important;
}

#cinematography .section-header::before,
#cinematography .section-header::after,
#photography .section-header::before,
#photography .section-header::after,
#behind-scene .section-header::before,
#behind-scene .section-header::after {
  content: none !important;
  display: none !important;
}

#cinematography .section-title::after,
#photography .section-title::after,
#behind-scene .section-title::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
}

/* Final compact-landscape panel system: every visible control shares one safe
   inset inside the glass frame, including headings, filters, grids and paging. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  #cinematography::before,
  #photography::before,
  #ai-visuals::before,
  #behind-scene::before {
    inset: 18px 8px !important;
  }
  .portfolio-section {
    padding: 44px 26px 52px !important;
    overflow-x: clip !important;
  }
  .portfolio-section .section-header,
  .portfolio-section .section-title,
  .portfolio-section .cat-select,
  .portfolio-section .video-grid,
  .portfolio-section .photo-grid,
  .portfolio-section .ai-grid,
  .portfolio-section .pagination {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .portfolio-section .section-header {
    width: 100% !important;
    margin: 0 0 20px !important;
    padding-inline: 0 !important;
  }
  .portfolio-section .section-title {
    margin-inline: auto !important;
    padding-inline: 8px !important;
  }
  .portfolio-section .cat-select {
    width: min(174px, 100%) !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
  }
  .portfolio-section .video-grid,
  .portfolio-section .photo-grid,
  .portfolio-section .ai-grid {
    width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    overflow: hidden !important;
  }
  .portfolio-section .pagination {
    width: 100% !important;
    margin: 18px auto 14px !important;
    padding-inline: 0 !important;
  }

  #about .skills-list { gap: 6px !important; }
  #about .skill-item {
    min-height: 0 !important;
    padding: 8px 11px !important;
  }
  #about .skill-header { margin-bottom: 5px !important; }
  #about .skill-name { line-height: 1.25 !important; }
  #about .skill-track { height: 3px !important; }

  /* Center short navigation elements; keep captions and long-form copy left. */
  .portfolio-section .section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .portfolio-section .section-cert,
  .portfolio-section .section-hint {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .portfolio-section .cat-select {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .portfolio-section .pagination {
    justify-content: center !important;
  }
  .portfolio-section .grid-loading,
  .portfolio-section .empty-state {
    text-align: center !important;
  }

  /* Compact form geometry without dropping below the 16px anti-zoom threshold. */
  #contact .contact-form {
    width: min(100%, 680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 16px 18px !important;
    gap: 9px !important;
  }
  #contact .contact-form-heading { margin-bottom: 0 !important; }
  #contact .contact-form-heading h3 {
    margin: 5px 0 4px !important;
    font-size: 1.25rem !important;
  }
  #contact .contact-form-heading p {
    font-size: .7rem !important;
    line-height: 1.4 !important;
  }
  #contact .cf-row { gap: 8px !important; }
  #contact .cf-field { gap: 3px !important; }
  #contact .cf-input,
  #contact input,
  #contact textarea {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }
  #contact .cf-input {
    min-height: 40px !important;
    padding: 7px 10px !important;
  }
  #contact .cf-textarea {
    min-height: 78px !important;
    height: 78px !important;
    line-height: 1.35 !important;
  }
  #contact .cf-submit {
    min-height: 42px !important;
    padding: 8px 16px !important;
  }
}

/* Final phone carousel information stack. */
@media (max-width: 700px) and (orientation: portrait) {
  #video-modal .modal-info,
  #video-modal .modal-info.modal-info--stacked {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title counter"
      "youtube counter"
      "desc desc" !important;
    align-items: start !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    min-height: 0 !important;
    padding: 15px 18px 17px !important;
  }

  #video-modal #modal-title,
  #video-modal .modal-info.modal-info--stacked #modal-title { grid-area: title !important; }
  #video-modal .modal-youtube-stats { grid-area: youtube !important; }
  #video-modal #modal-desc,
  #video-modal .modal-info.modal-info--stacked #modal-desc {
    grid-area: desc !important;
    margin-top: 4px !important;
  }
  #video-modal #video-counter {
    grid-area: counter !important;
    align-self: start !important;
  }
}

/* Absolute final carousel layout: follows every legacy modal breakpoint. */
#video-modal.open,
#lightbox.open {
  display: grid !important;
  grid-template-columns: minmax(132px, .82fr) minmax(0, 4.8fr) minmax(132px, .82fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "previous current next" !important;
  align-items: center !important;
  gap: clamp(14px, 1.45vw, 28px) !important;
  padding: clamp(54px, 5vw, 82px) clamp(16px, 2vw, 38px) clamp(26px, 3vw, 46px) !important;
  overflow: hidden !important;
}

#video-modal > .modal-box,
#lightbox > .lightbox-box {
  grid-area: current !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  z-index: 3 !important;
}

#video-modal > .carousel-preview,
#lightbox > .carousel-preview {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: clamp(10px, 1vw, 16px) !important;
  opacity: .58 !important;
  transform: scale(.92) !important;
}

#video-modal > .modal-nav--prev,
#lightbox > .modal-nav--prev { grid-area: previous !important; }

#video-modal > .modal-nav--next,
#lightbox > .modal-nav--next { grid-area: next !important; }

#video-modal > .carousel-preview:hover,
#video-modal > .carousel-preview:focus-visible,
#lightbox > .carousel-preview:hover,
#lightbox > .carousel-preview:focus-visible {
  opacity: .9 !important;
  transform: scale(.97) !important;
}

#video-modal > .carousel-preview:disabled,
#lightbox > .carousel-preview:disabled {
  display: block !important;
  visibility: hidden !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.open,
  #lightbox.open {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(72px, 13svh) minmax(0, 1fr) minmax(72px, 13svh) !important;
    grid-template-areas: "previous" "current" "next" !important;
    gap: clamp(8px, 1.5svh, 16px) !important;
    padding: calc(env(safe-area-inset-top, 0px) + 50px) clamp(4px, 1.8vw, 18px)
      calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  #video-modal > .modal-box,
  #lightbox > .lightbox-box {
    align-self: center !important;
    max-width: min(100%, 980px) !important;
    max-height: 68svh !important;
  }

  #video-modal > .carousel-preview,
  #lightbox > .carousel-preview {
    grid-template-columns: minmax(108px, 28%) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    justify-self: center !important;
    width: min(82%, 600px) !important;
    height: 100% !important;
    transform: scale(.96) !important;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  #video-modal.open,
  #lightbox.open {
    grid-template-rows: 78px minmax(0, 1fr) 78px !important;
    gap: 7px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #video-modal > .carousel-preview,
  #lightbox > .carousel-preview {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    width: min(88%, 430px) !important;
  }

  #video-modal .modal-info {
    display: grid !important;
  }
}

/* Apple-inspired gallery refinement: quiet chrome, edge-to-edge imagery and
   peripheral previews that feel like the next frame rather than UI cards. */
#video-modal.open,
#lightbox.open {
  grid-template-columns: clamp(170px, 17vw, 310px) minmax(0, 1fr) clamp(170px, 17vw, 310px) !important;
  gap: clamp(18px, 2.2vw, 42px) !important;
  padding: clamp(58px, 6vh, 86px) 0 clamp(26px, 4vh, 54px) !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(35, 76, 96, .11), transparent 38%),
    rgba(0, 2, 4, .965) !important;
}

#video-modal > .modal-box,
#lightbox > .lightbox-box {
  max-width: 1360px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: clamp(14px, 1.25vw, 22px) !important;
  background: rgba(7, 9, 11, .96) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(104, 200, 241, .025) inset !important;
}

#video-modal > .carousel-preview,
#lightbox > .carousel-preview {
  display: block !important;
  height: min(48svh, 520px) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: clamp(16px, 1.7vw, 28px) !important;
  background: #05080a !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .44) !important;
  opacity: .34 !important;
  filter: saturate(.72);
}

#video-modal > .modal-nav--prev,
#lightbox > .modal-nav--prev {
  transform: translateX(-22%) scale(.9) !important;
}

#video-modal > .modal-nav--next,
#lightbox > .modal-nav--next {
  transform: translateX(22%) scale(.9) !important;
}

#video-modal > .carousel-preview:hover,
#video-modal > .carousel-preview:focus-visible,
#lightbox > .carousel-preview:hover,
#lightbox > .carousel-preview:focus-visible {
  opacity: .7 !important;
  filter: saturate(.9);
  box-shadow: 0 32px 88px rgba(0, 0, 0, .56) !important;
}

#video-modal > .modal-nav--prev:hover,
#video-modal > .modal-nav--prev:focus-visible,
#lightbox > .modal-nav--prev:hover,
#lightbox > .modal-nav--prev:focus-visible {
  transform: translateX(-14%) scale(.94) !important;
}

#video-modal > .modal-nav--next:hover,
#video-modal > .modal-nav--next:focus-visible,
#lightbox > .modal-nav--next:hover,
#lightbox > .modal-nav--next:focus-visible {
  transform: translateX(14%) scale(.94) !important;
}

.carousel-preview-media,
#lightbox .carousel-preview-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

.carousel-preview-media img,
.carousel-preview-placeholder {
  filter: blur(5px) saturate(.7) brightness(.56) !important;
  transform: scale(1.08) !important;
}

.carousel-preview:hover .carousel-preview-media img,
.carousel-preview:focus-visible .carousel-preview-media img {
  filter: blur(2.5px) saturate(.88) brightness(.68) !important;
  transform: scale(1.04) !important;
}

.carousel-preview-shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .12) 20%, rgba(0, 0, 0, .76) 100%),
    radial-gradient(circle at 50% 38%, transparent, rgba(0, 0, 0, .3)) !important;
}

.carousel-preview-copy {
  position: absolute !important;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid !important;
  gap: 7px !important;
  padding: clamp(18px, 2vw, 28px) !important;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .26));
}

.carousel-preview-kicker {
  color: rgba(145, 216, 246, .72) !important;
  font-size: clamp(.5rem, .52vw, .62rem) !important;
  letter-spacing: .21em !important;
}

.carousel-preview-title {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, .82) !important;
  font-family: var(--ff-sans) !important;
  font-size: clamp(.67rem, .73vw, .86rem) !important;
  font-weight: 620 !important;
  line-height: 1.45 !important;
  letter-spacing: -.01em !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.open,
  #lightbox.open {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: clamp(76px, 10svh, 112px) auto clamp(76px, 10svh, 112px) !important;
    align-content: center !important;
    gap: clamp(12px, 1.8svh, 22px) !important;
    padding: calc(env(safe-area-inset-top, 0px) + 48px) 0
      calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }

  #video-modal > .modal-box,
  #lightbox > .lightbox-box {
    width: min(calc(100% - 16px), 920px) !important;
    max-height: min(68svh, 760px) !important;
    border-radius: clamp(12px, 2.8vw, 20px) !important;
  }

  #video-modal > .carousel-preview,
  #lightbox > .carousel-preview {
    display: block !important;
    width: min(calc(100% - 48px), 680px) !important;
    height: 100% !important;
    border-radius: clamp(13px, 2.7vw, 19px) !important;
    opacity: .38 !important;
    filter: saturate(.68);
  }

  #video-modal > .modal-nav--prev,
  #lightbox > .modal-nav--prev {
    transform: translateY(-18%) scale(.96) !important;
  }

  #video-modal > .modal-nav--next,
  #lightbox > .modal-nav--next {
    transform: translateY(18%) scale(.96) !important;
  }

  #video-modal > .modal-nav--prev:hover,
  #video-modal > .modal-nav--prev:focus-visible,
  #lightbox > .modal-nav--prev:hover,
  #lightbox > .modal-nav--prev:focus-visible {
    transform: translateY(-8%) scale(.98) !important;
  }

  #video-modal > .modal-nav--next:hover,
  #video-modal > .modal-nav--next:focus-visible,
  #lightbox > .modal-nav--next:hover,
  #lightbox > .modal-nav--next:focus-visible {
    transform: translateY(8%) scale(.98) !important;
  }

  .carousel-preview-media img,
  .carousel-preview-placeholder {
    filter: blur(3.5px) saturate(.7) brightness(.54) !important;
  }

  .carousel-preview-copy {
    gap: 3px !important;
    padding: 11px 16px !important;
  }

  .carousel-preview-title {
    font-size: clamp(.61rem, 1.8vw, .76rem) !important;
    -webkit-line-clamp: 1;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  #video-modal.open,
  #lightbox.open {
    grid-template-rows: 74px auto 74px !important;
    gap: 10px !important;
  }

  #video-modal > .modal-box,
  #lightbox > .lightbox-box {
    width: calc(100% - 8px) !important;
  }

  #video-modal > .carousel-preview,
  #lightbox > .carousel-preview {
    width: calc(100% - 42px) !important;
  }

  .carousel-preview-copy {
    padding: 9px 13px !important;
  }
}

.carousel-gesture-hint {
  display: none !important;
}

@media (hover: none) and (pointer: coarse) {
  #video-modal .carousel-gesture-hint,
  #lightbox .carousel-gesture-hint {
    position: absolute !important;
    z-index: 12;
    left: 50% !important;
    right: auto !important;
    bottom: 12px !important;
    top: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 13px !important;
    color: rgba(231, 245, 251, .86) !important;
    background: rgba(13, 19, 23, .58) !important;
    border: 1px solid rgba(156, 220, 247, .18) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .34) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
    font-family: var(--ff-sans);
    font-size: clamp(.52rem, 1.8vw, .64rem) !important;
    font-weight: 720;
    line-height: 1;
    letter-spacing: .15em;
    white-space: nowrap;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, 8px) !important;
    transition: opacity 320ms ease, transform 420ms cubic-bezier(.22, .76, .25, 1), visibility 320ms !important;
    pointer-events: none;
  }

  #video-modal.carousel-hint-visible .carousel-gesture-hint,
  #lightbox.carousel-hint-visible .carousel-gesture-hint {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
  }

  .carousel-gesture-glyph {
    color: rgba(126, 210, 246, .9);
    font-size: 1rem;
    line-height: .7;
    animation: carousel-gesture-float 1.45s ease-in-out infinite;
  }
}

@keyframes carousel-gesture-float {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}

@media (max-width: 700px) and (orientation: portrait) {
  #video-modal .modal-info,
  #video-modal .modal-info.modal-info--stacked {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title counter"
      "youtube counter"
      "desc desc" !important;
    align-items: start !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    min-height: 0 !important;
    padding: 15px 18px 17px !important;
  }

  #video-modal #modal-title,
  #video-modal .modal-info.modal-info--stacked #modal-title {
    grid-area: title !important;
  }

  #video-modal .modal-youtube-stats {
    grid-area: youtube !important;
  }

  #video-modal #modal-desc,
  #video-modal .modal-info.modal-info--stacked #modal-desc {
    grid-area: desc !important;
    margin-top: 4px !important;
  }

  #video-modal #video-counter {
    grid-area: counter !important;
    align-self: start !important;
  }
}

/* YouTube view count sits directly under the video title. */
#video-modal .modal-youtube-stats {
  margin: 5px 0 8px;
  color: rgba(142, 213, 244, 0.8);
  font-family: var(--ff-sans);
  font-size: clamp(0.62rem, 0.7vw, 0.76rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#video-modal .modal-youtube-stats[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  #video-modal .modal-youtube-stats {
    margin: 4px 0 7px;
    font-size: clamp(0.58rem, 2.45vw, 0.68rem);
    letter-spacing: 0.06em;
  }
}

/* Keep the YouTube count in its own grid row between title and description.
   Earlier modal layouts use named grid areas, so an unassigned child would be
   auto-placed after the description even when its DOM position is correct. */
#video-modal .modal-info {
  grid-template-areas:
    "title counter"
    "youtube counter"
    "desc counter" !important;
}

#video-modal .modal-youtube-stats {
  grid-area: youtube;
  justify-self: stretch;
  margin-bottom: 0;
}

@media (max-width: 700px) {
  #video-modal .modal-youtube-stats {
    margin-bottom: 0;
  }
}

/* Phone portrait: the video close control now lives outside .modal-box, so it
   needs a viewport-safe position instead of the legacy negative box offset. */
@media (orientation: portrait) and (max-width: 768px) {
  #video-modal > .modal-close {
    position: fixed !important;
    top: var(--video-close-top, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
    left: var(--video-close-left, auto) !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2045 !important;
  }
}

/* Desktop: align the overlay-level close control to the video frame instead
   of the viewport, leaving a clear gap above the player's top-right corner. */
@media (min-width: 1001px) {
  #video-modal > .modal-close {
    position: fixed !important;
    top: var(--video-close-top, 16px) !important;
    left: var(--video-close-left, auto) !important;
    right: auto !important;
    margin: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2045 !important;
  }
}

/* Give the modal a graceful exit before its player is removed. */
#video-modal.video-modal-leaving > .modal-box {
  animation: video-modal-exit .36s cubic-bezier(.22, .61, .36, 1) both !important;
}

@keyframes video-modal-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(.99);
    filter: blur(.6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #video-modal.video-modal-leaving > .modal-box {
    animation-duration: 1ms !important;
  }
}

/* The YouTube document is cross-origin, so some browsers do not bubble its
   pointer events to main.js. Use the iframe's own hover state as a reliable
   fallback: show navigation with the native controls, then fade it again. */
#video-modal.open #modal-iframe,
#video-modal.open .modal-video-wrap {
  pointer-events: auto !important;
}

/* Photo lightbox readiness on every viewport: expose only the loader until the
   requested full-size image has loaded and decoded. */
#lightbox.media-preparing .modal-stage-loader {
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

#lightbox.media-preparing .lightbox-box,
#lightbox.media-preparing .modal-nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#lightbox.media-ready .modal-stage-loader {
  opacity: 0 !important;
  visibility: hidden !important;
}

#lightbox.media-ready .lightbox-box,
#lightbox.media-ready .modal-nav {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Video modal readiness on every viewport: replace the empty iframe delay with
   the same centered loader used by the photo lightbox. */
#video-modal.media-preparing .modal-stage-loader {
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

#video-modal.media-preparing .modal-box,
#video-modal.media-preparing .modal-nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#video-modal.media-ready .modal-stage-loader {
  opacity: 0 !important;
  visibility: hidden !important;
}

#video-modal.media-ready .modal-box,
#video-modal.media-ready .modal-nav {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 769px) and (max-width: 1400px) and (max-height: 820px) {
  #cinematography::before,
  #photography::before,
  #ai-visuals::before,
  #behind-scene::before {
    inset: 24px 14px !important;
  }
  .portfolio-section {
    padding: 54px 40px 64px !important;
    overflow-x: clip !important;
  }
  .portfolio-section .section-header,
  .portfolio-section .cat-select,
  .portfolio-section .video-grid,
  .portfolio-section .photo-grid,
  .portfolio-section .ai-grid,
  .portfolio-section .pagination {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .portfolio-section .section-header {
    margin: 0 0 24px !important;
    padding-inline: 0 !important;
  }
  .portfolio-section .section-title {
    margin-inline: auto !important;
    padding-inline: 10px !important;
  }
  .portfolio-section .cat-select {
    width: 180px !important;
    min-width: 0 !important;
    margin: 0 0 20px !important;
  }
  .portfolio-section .video-grid,
  .portfolio-section .photo-grid,
  .portfolio-section .ai-grid {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    overflow: hidden !important;
  }
  .portfolio-section .pagination {
    margin: 22px auto 16px !important;
    padding-inline: 0 !important;
  }
}

/* 600px-wide Android tablet portrait is a tablet photo layout too. Reserve
   symmetrical arrow gutters and keep both controls outside the image bounds. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 600px) and (max-width: 1180px) {
  #lightbox.tablet-photo-portrait .lightbox-box,
  #lightbox.tablet-photo-portrait #lightbox-img {
    max-width: calc(100vw - 152px) !important;
  }
  #lightbox.tablet-photo-portrait .modal-nav--prev {
    left: calc(var(--modal-media-left, 76px) - 44px) !important;
    right: auto !important;
  }
  #lightbox.tablet-photo-portrait .modal-nav--next {
    left: calc(var(--modal-media-right, calc(100vw - 76px)) + 6px) !important;
    right: auto !important;
  }
}

/* Mobile landscape adopts the desktop editorial structures from the approved
   references, scaled for a short viewport instead of stacked like portrait. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  #about.section-about { padding-inline: 14px !important; }
  #about .about-inner {
    display: grid !important;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 920px !important;
  }
  #about .about-left {
    display: block !important;
    grid-template-columns: none !important;
    padding: 22px 20px !important;
    border-right: 1px solid rgba(255,255,255,.085) !important;
  }
  #about .about-photo-wrap {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto !important;
  }
  #about .about-bio-block {
    padding: 20px 4px 0 !important;
    text-align: left !important;
  }
  #about .about-name {
    margin: 9px 0 12px !important;
    font-size: 1.3rem !important;
  }
  #about .about-bio { margin-bottom: 16px !important; }
  #about .about-bio p {
    font-size: .78rem !important;
    line-height: 1.62 !important;
  }
  #about .about-resume-btn {
    width: auto !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
  }
  #about .about-right {
    padding: 22px 20px !important;
    border-top: 0 !important;
    border-left: 0 !important;
  }
  #about .about-right > .label-tag { margin-bottom: 14px !important; }
  #about .skills-list { gap: 7px !important; }
  #about .skill-item { padding: 9px 11px !important; }

  #about .about-inner > .bokah-brand-panel {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
    gap: 22px !important;
    padding: 26px 24px !important;
    border-top: 1px solid rgba(255,255,255,.085) !important;
  }
  #about .bokah-brand-copy { padding-left: 12px !important; }
  #about .bokah-brand-copy h3 {
    margin: 8px 0 10px !important;
    font-size: 1.12rem !important;
  }
  #about .bokah-brand-copy p,
  #about .bokah-brand-copy .bokah-brand-lede {
    margin-top: 7px !important;
    font-size: .72rem !important;
    line-height: 1.58 !important;
  }
  #about .bokah-logo-evolution {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) !important;
    gap: 7px !important;
  }
  #about .bokah-logo-card {
    padding: 10px 9px !important;
    gap: 8px !important;
  }
  #about .bokah-logo-frame { max-width: 118px !important; }
  #about .bokah-logo-card p {
    font-size: .62rem !important;
    line-height: 1.42 !important;
  }
  #about .bokah-evolution-arrow { width: 24px !important; height: 24px !important; }

  #contact .contact-inner {
    display: grid !important;
    grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr) !important;
    width: min(100%, 920px) !important;
    max-width: 920px !important;
    border-radius: 12px !important;
  }
  #contact .contact-profile {
    padding: 22px 18px !important;
    border-right: 1px solid rgba(255,255,255,.09) !important;
    border-bottom: 0 !important;
  }
  #contact .contact-photo-wrap {
    width: 100px !important;
    height: 100px !important;
    margin-bottom: 16px !important;
  }
  #contact .contact-profile .label-tag { margin-bottom: 10px !important; }
  #contact .contact-name {
    margin-bottom: 9px !important;
    font-size: 1.25rem !important;
  }
  #contact .contact-role { margin-bottom: 13px !important; }
  #contact .contact-tagline {
    margin-bottom: 12px !important;
    font-size: .72rem !important;
    line-height: 1.55 !important;
  }
  #contact .contact-links {
    padding-top: 8px !important;
    grid-template-columns: repeat(auto-fit, 34px) !important;
    gap: 6px !important;
  }
  #contact .contact-btn { width: 34px !important; height: 34px !important; }
  #contact .contact-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 20px !important;
  }
}

/* Keep the complete Showreel experience inside one landscape viewport. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  #showreel.section-showreel {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 62px 0 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  #showreel .showreel-shell {
    display: grid !important;
    grid-template-columns: minmax(250px, .88fr) minmax(0, 1.12fr) !important;
    align-items: center !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 12px) !important;
    margin: 6px auto !important;
    padding: 8px !important;
    gap: 12px !important;
  }
  #showreel .hero-intro {
    width: 100% !important;
    padding: 10px 12px !important;
  }
  #showreel .hero-kicker { margin-bottom: 8px !important; }
  #showreel .hero-title {
    margin-bottom: 10px !important;
    font-size: clamp(1.5rem, 4vw, 2.15rem) !important;
  }
  #showreel .hero-role { margin-bottom: 8px !important; padding-block: 5px !important; }
  #showreel .hero-summary {
    margin-bottom: 10px !important;
    font-size: .76rem !important;
    line-height: 1.48 !important;
  }
  #showreel .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 7px !important;
    margin: 0 !important;
  }
  #showreel .hero-btn,
  #showreel #hero-secondary-btn {
    width: auto !important;
    min-height: 36px !important;
    padding: 7px 11px !important;
    flex: 1 1 0 !important;
    font-size: .62rem !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
  }
  #showreel .showreel-player {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100svh - 94px) !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
  }

  #contact .cf-label {
    font-size: .56rem !important;
    line-height: 1.2 !important;
    letter-spacing: .14em !important;
  }
  #contact .cf-input::placeholder,
  #contact input::placeholder,
  #contact textarea::placeholder {
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }
}

/* Tighter Contact-to-footer handoff across every responsive profile. */
#contact.section-contact {
  padding-bottom: clamp(34px, 4vw, 54px) !important;
}
#main-footer {
  padding-top: clamp(14px, 2vw, 20px) !important;
}

/* Portfolio editorial alignment: titles and category controls follow the same
   left edge as their thumbnail grids on every platform. */
#cinematography .section-header,
#photography .section-header,
#behind-scene .section-header {
  align-items: flex-start !important;
  text-align: left !important;
}
#cinematography .section-title,
#photography .section-title,
#behind-scene .section-title,
#cinematography .section-cert,
#photography .section-cert,
#behind-scene .section-cert,
#cinematography .section-hint,
#photography .section-hint,
#behind-scene .section-hint,
#cinematography .cat-tabs,
#photography .cat-tabs,
#behind-scene .cat-tabs,
#cinematography .cat-select,
#photography .cat-select,
#behind-scene .cat-select {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
#cinematography .section-title,
#photography .section-title,
#behind-scene .section-title {
  padding-left: 0 !important;
}

/* Phone portrait: restore a comfortable inset from the glass frame and remove
   the doubled icon gap created by flex gap plus icon margin. */
@media (orientation: portrait) and (max-width: 599px) {
  #cinematography .section-header,
  #photography .section-header,
  #behind-scene .section-header {
    padding-left: var(--tablet-grid-edge, 14px) !important;
    padding-right: var(--tablet-grid-edge, 14px) !important;
    box-sizing: border-box !important;
  }
  #cinematography .cat-select,
  #photography .cat-select,
  #behind-scene .cat-select {
    margin-left: 0 !important;
  }
  #cinematography .section-title,
  #photography .section-title,
  #behind-scene .section-title {
    gap: .18em !important;
  }
  #cinematography .section-title-icon,
  #photography .section-title-icon,
  #behind-scene .section-title-icon {
    margin-right: 0 !important;
  }
}

/* Final precedence for the shared thumbnail edge and compact title lockup. */
.portfolio-section .section-header {
  width: 100% !important;
  padding-left: var(--gallery-content-edge, 0px) !important;
  padding-right: var(--gallery-content-edge, 0px) !important;
  box-sizing: border-box !important;
}
.portfolio-section .cat-select {
  margin-left: var(--gallery-content-edge, 0px) !important;
  margin-right: auto !important;
}
.portfolio-section .section-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .18em !important;
  padding-left: 0 !important;
}
.portfolio-section .section-title-icon { margin-right: 0 !important; }

/* Final gallery composition: align every filter with the first thumbnail,
   tighten title-to-filter rhythm, and replace the floating center rule with an
   editorial vertical marker plus a trailing blue rule. */
.portfolio-section .section-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: 1540px !important;
  margin: 0 auto 16px !important;
  text-align: left !important;
}
.portfolio-section .section-header::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  flex: 0 0 2px !important;
  width: 2px !important;
  height: 2.15em !important;
  transform: none !important;
  background: linear-gradient(180deg, #6ab0d4, rgba(106,176,212,.12)) !important;
  opacity: .9 !important;
}
.portfolio-section .section-header::after {
  content: "" !important;
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 24px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(106,176,212,.55), rgba(106,176,212,.08), transparent) !important;
}
.portfolio-section .section-title {
  flex: 0 0 auto !important;
  margin: 0 !important;
  overflow: visible !important;
}
.portfolio-section .section-title::after { display: none !important; }

.portfolio-section .cat-tabs {
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 28px !important;
  padding-left: var(--gallery-content-edge, 0px) !important;
  padding-right: var(--gallery-content-edge, 0px) !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
}
.portfolio-section .cat-select {
  margin-left: max(
    var(--gallery-content-edge, 0px),
    calc((100% - 1540px) / 2 + var(--gallery-content-edge, 0px))
  ) !important;
  margin-right: auto !important;
  margin-bottom: 22px !important;
}

@media (max-width: 768px) {
  .portfolio-section .section-header {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .portfolio-section .section-header::before {
    height: 1.8em !important;
  }
  .portfolio-section .section-header::after {
    min-width: 16px !important;
  }
  .portfolio-section .cat-select { margin-bottom: 16px !important; }
}

/* ID-level overrides neutralize older section-specific alignment rules. */
#cinematography .cat-tabs,
#photography .cat-tabs,
#ai-visuals .cat-tabs,
#behind-scene .cat-tabs {
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gallery-content-edge, 0px) !important;
  padding-right: var(--gallery-content-edge, 0px) !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
}
#cinematography .cat-select,
#photography .cat-select,
#ai-visuals .cat-select,
#behind-scene .cat-select {
  margin-left: max(
    var(--gallery-content-edge, 0px),
    calc((100% - 1540px) / 2 + var(--gallery-content-edge, 0px))
  ) !important;
  margin-right: auto !important;
}
#cinematography .section-title-icon,
#photography .section-title-icon,
#ai-visuals .section-title-icon,
#behind-scene .section-title-icon {
  margin-right: 0 !important;
}

/* Final title system: the heading uses the exact same responsive content box
   as the thumbnail grid and category controls on every platform. */
#cinematography .section-header,
#photography .section-header,
#behind-scene .section-header {
  display: flex !important;
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gallery-content-edge, 0px) !important;
  padding-right: var(--gallery-content-edge, 0px) !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
#cinematography .section-header::before,
#cinematography .section-header::after,
#photography .section-header::before,
#photography .section-header::after,
#behind-scene .section-header::before,
#behind-scene .section-header::after {
  content: none !important;
  display: none !important;
}
#cinematography .section-title,
#photography .section-title,
#behind-scene .section-title {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#cinematography .section-title-mark,
#photography .section-title-mark,
#behind-scene .section-title-mark {
  display: none !important;
}
#cinematography .section-title-icon,
#photography .section-title-icon,
#behind-scene .section-title-icon {
  width: auto !important;
  height: auto !important;
  margin-right: .42em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #6ab0d4 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: .88em !important;
  filter: drop-shadow(0 0 12px rgba(106,176,212,.2)) !important;
}

/* 2026 centred gallery identity system ------------------------------------ */
#cinematography .section-header,
#photography .section-header,
#behind-scene .section-header {
  display: flex !important;
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin: 0 auto clamp(18px, 2vw, 26px) !important;
  padding-inline: var(--gallery-content-edge, 0px) !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#cinematography .section-title,
#photography .section-title,
#behind-scene .section-title {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .48em !important;
  border: 0 !important;
  text-align: center !important;
}

#cinematography .section-title-icon,
#photography .section-title-icon,
#behind-scene .section-title-icon {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #82c9e9 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: .88em !important;
  filter: drop-shadow(0 0 10px rgba(106,176,212,.14)) !important;
}

#cinematography .section-title-text,
#photography .section-title-text,
#behind-scene .section-title-text {
  display: inline-block !important;
  line-height: .96 !important;
  letter-spacing: .105em !important;
  text-align: center !important;
  text-shadow: 0 7px 28px rgba(0,0,0,.48) !important;
}

#cinematography .cat-tabs,
#photography .cat-tabs,
#behind-scene .cat-tabs {
  display: flex !important;
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin: 0 auto clamp(22px, 2.6vw, 34px) !important;
  padding-inline: var(--gallery-content-edge, 0px) !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  gap: clamp(7px, .85vw, 12px) !important;
}

#cinematography .cat-tab,
#photography .cat-tab,
#behind-scene .cat-tab {
  min-height: clamp(38px, 3.1vw, 44px) !important;
  padding: .68em 1.35em !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.68) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  letter-spacing: .12em !important;
}

#cinematography .cat-tab.active,
#photography .cat-tab.active,
#behind-scene .cat-tab.active {
  border-color: rgba(106,176,212,.68) !important;
  color: #edf9ff !important;
  background: linear-gradient(145deg, rgba(106,176,212,.2), rgba(106,176,212,.075)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.2) !important;
}

#cinematography .cat-select,
#photography .cat-select,
#behind-scene .cat-select {
  width: clamp(174px, 22vw, 224px) !important;
  min-height: 42px !important;
  margin-left: max(
    var(--gallery-content-edge, 0px),
    calc((100% - 1540px) / 2 + var(--gallery-content-edge, 0px))
  ) !important;
  margin-right: auto !important;
  margin-bottom: clamp(20px, 2.4vw, 30px) !important;
  border: 1px solid rgba(106,176,212,.34) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.82) !important;
  background-color: rgba(10,14,17,.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 30px rgba(0,0,0,.2) !important;
}

@media (hover: hover) and (pointer: fine) {
  #cinematography .cat-tab:hover,
  #photography .cat-tab:hover,
  #behind-scene .cat-tab:hover {
    border-color: rgba(106,176,212,.42) !important;
    color: rgba(255,255,255,.9) !important;
    background: rgba(106,176,212,.075) !important;
  }
}

/* Final responsive precedence: dropdown replaces buttons on touch layouts. */
@media (hover: none) and (pointer: coarse) and (max-width: 1180px) {
  #cinematography .cat-tabs,
  #photography .cat-tabs,
  #behind-scene .cat-tabs {
    display: none !important;
  }

  #cinematography .cat-select,
  #photography .cat-select,
  #behind-scene .cat-select {
    display: block !important;
  }
}

/* Final BTS spacing precedence: remove the empty secondary category row. */
#behind-scene #bts-cat-tabs {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Landscape touch layouts already inset the section itself; grids start at
   that content edge, so the dropdown must not add gallery inset a second time. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1400px) and (max-height: 820px) {
  #cinematography .cat-select,
  #photography .cat-select,
  #behind-scene .cat-select {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Compact Samsung Galaxy Tab showreel: retain 16:9, reduce visual dominance,
   and keep the player centred inside the existing responsive glass shell. */
@media (orientation: landscape) and (min-width: 769px) and (max-width: 1400px) and (max-height: 820px) {
html.is-samsung-tablet #showreel .showreel-shell .showreel-player {
    width: min(78%, 840px, calc(52svh * 16 / 9)) !important;
    max-width: 840px !important;
    max-height: min(52svh, 472px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* AI Art + BTS share one editorial heading component. This final rule also
   neutralizes legacy BTS-only centring rules retained for older galleries. */
#ai-visuals .section-header,
#behind-scene .section-header {
  display: flex !important;
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin: 0 auto 16px !important;
  padding-inline: var(--gallery-content-edge, 0px) !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
}

#ai-visuals .section-header::before,
#behind-scene .section-header::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  flex: 0 0 2px !important;
  width: 2px !important;
  height: 2.15em !important;
  transform: none !important;
  background: linear-gradient(180deg, #6ab0d4, rgba(106,176,212,.12)) !important;
  opacity: .9 !important;
}

#ai-visuals .section-header::after,
#behind-scene .section-header::after {
  content: "" !important;
  position: static !important;
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 24px !important;
  width: auto !important;
  height: 1px !important;
  transform: none !important;
  background: linear-gradient(90deg, rgba(106,176,212,.55), rgba(106,176,212,.08), transparent) !important;
}

#ai-visuals .section-title,
#behind-scene .section-title {
  display: inline-flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .18em !important;
  border: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  overflow: visible !important;
}

#ai-visuals .section-title::after,
#behind-scene .section-title::after {
  content: none !important;
  display: none !important;
}

#ai-visuals .section-title-icon,
#behind-scene .section-title-icon {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #82c9e9 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: .88em !important;
  filter: drop-shadow(0 0 10px rgba(106,176,212,.14)) !important;
}

#ai-visuals .section-title-text,
#behind-scene .section-title-text {
  display: inline-block !important;
  line-height: .96 !important;
  letter-spacing: .105em !important;
  text-align: left !important;
  text-shadow: 0 7px 28px rgba(0,0,0,.48) !important;
}

#ai-visuals .section-intro,
#behind-scene .section-intro {
  flex: 0 1 auto !important;
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 0 0 clamp(14px, 2vw, 28px) !important;
  text-align: left !important;
}

@media (max-width: 768px) {
  #ai-visuals .section-header,
  #behind-scene .section-header {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  #ai-visuals .section-header::before,
  #behind-scene .section-header::before { height: 1.8em !important; }

  #ai-visuals .section-header::after,
  #behind-scene .section-header::after { min-width: 16px !important; }

  #ai-visuals .section-intro,
  #behind-scene .section-intro {
    margin-left: clamp(6px, 1.5vw, 12px) !important;
  }
}

@media (max-width: 560px) {
  #ai-visuals .section-header,
  #behind-scene .section-header {
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  #ai-visuals .section-header::before,
  #behind-scene .section-header::before {
    align-self: stretch !important;
    height: auto !important;
  }

  #ai-visuals .section-intro,
  #behind-scene .section-intro {
    flex: 1 1 auto !important;
    width: calc(100% - 18px) !important;
    order: 4 !important;
    margin: 0 0 0 10px !important;
  }

  #ai-visuals .section-header::after,
  #behind-scene .section-header::after { order: 3 !important; }
}

/* Final mobile motion layer — kept last so legacy responsive blocks cannot
   reintroduce long card transitions or image-filter animation. */
@media (hover: none) and (pointer: coarse) {
  .video-card,
  .photo-card,
  .ai-card {
    contain: layout paint;
    backface-visibility: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,.2);
  }

  .video-card.reveal,
  .photo-card.reveal,
  .ai-card.reveal {
    opacity: 0 !important;
    transform: translate3d(0, 10px, 0) !important;
    transition:
      opacity 0.44s ease-out,
      transform 0.44s cubic-bezier(.22,.7,.22,1),
      border-color 0.22s ease,
      box-shadow 0.22s ease !important;
  }

  .video-card.reveal.visible,
  .photo-card.reveal.visible,
  .ai-card.reveal.visible {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
  }

  .video-card-thumb,
  .photo-card-img,
  .ai-card img,
  .video-card:hover .video-card-thumb,
  .photo-card:hover .photo-card-img,
  .ai-card:hover img {
    transform: translateZ(0) !important;
    filter: none !important;
    transition: none !important;
    backface-visibility: hidden;
  }

  .video-card-overlay,
  .photo-card-overlay,
  .video-card-info,
  .ai-card::after,
  .ai-card-info {
    transition-duration: 0.2s !important;
  }
}

@media (orientation: portrait) and (min-width: 600px) and (max-width: 1024px) and (max-height: 1400px) {
  html.is-samsung-tablet #showreel .showreel-shell .showreel-player {
    width: min(86%, 720px, calc(38svh * 16 / 9)) !important;
    max-width: 720px !important;
    max-height: min(38svh, 405px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Samsung Internet may expose a desktop-like viewport on low-resolution
   Galaxy Tabs. Once hardware detection succeeds, size the player like desktop
   without changing the shell, hero copy or surrounding document flow. */
@media (orientation: landscape) {
  html.is-samsung-tablet #showreel .showreel-shell .showreel-player {
    width: min(78%, 1120px, calc(58svh * 16 / 9)) !important;
    max-width: 1120px !important;
    max-height: 58svh !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    aspect-ratio: 16 / 9 !important;
  }
}

@media (orientation: portrait) {
  html.is-samsung-tablet #showreel .showreel-shell .showreel-player {
    width: min(84%, 760px, calc(40svh * 16 / 9)) !important;
    max-width: 760px !important;
    max-height: 40svh !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Samsung low-resolution landscape must keep the desktop composition instead
   of inheriting the phone-landscape full-viewport/two-column showreel. */
@media (orientation: landscape) {
  html.is-samsung-tablet #showreel.section-showreel {
    min-height: auto !important;
    height: auto !important;
    padding: var(--nav-h) 0 clamp(44px, 6vw, 72px) !important;
    display: block !important;
    overflow: clip !important;
  }

  html.is-samsung-tablet #showreel .showreel-shell {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: center !important;
    width: min(calc(100% - 28px), 1180px) !important;
    height: auto !important;
    margin: 10px auto 0 !important;
    padding: 0 12px 16px !important;
    gap: clamp(14px, 2vw, 22px) !important;
  }

  html.is-samsung-tablet #showreel .hero-intro {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(20px, 3vw, 34px) clamp(16px, 3vw, 36px) 0 !important;
    box-sizing: border-box !important;
  }

  html.is-samsung-tablet #showreel .showreel-shell .showreel-player {
    width: min(98%, 1366px, calc(76svh * 16 / 9)) !important;
    max-width: 1366px !important;
    max-height: 76svh !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* BTS adaptive lane composition: retain a balanced card width when only one
   media type is available, while using the full safe content width on smaller
   touch screens. Kept last so Samsung's desktop-like viewport overrides do
   not pull a single lane off centre. */
#bts-dual-layout.single-lane {
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(100%, 754px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 769px) and (max-width: 1050px) {
  #bts-dual-layout.single-lane {
    width: min(calc(100% - 32px), 820px) !important;
  }
}

@media (max-width: 768px) {
  #bts-dual-layout.single-lane {
    width: 100% !important;
    padding-inline: clamp(8px, 3vw, 16px) !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  #bts-dual-layout.single-lane {
    width: min(calc(100% - 16px), 760px) !important;
    padding-inline: 0 !important;
  }
}

html.is-samsung-tablet #bts-dual-layout.single-lane {
  width: min(calc(100% - 24px), 760px) !important;
  padding-inline: 10px !important;
}

@media (orientation: portrait) {
  html.is-samsung-tablet #bts-dual-layout.single-lane {
    width: min(calc(100% - 20px), 680px) !important;
  }
}

@media (orientation: landscape) and (max-width: 1400px) and (max-height: 820px) {
  html.is-samsung-tablet #bts-dual-layout.single-lane {
    width: min(calc(100% - 24px), 720px) !important;
  }
}

/* Slightly larger unified Showreel composition. The shell, hero and player
   expand together so the media always remains inside the glass frame. */
#showreel .showreel-shell {
  width: min(calc(100% - clamp(16px, 3vw, 44px)), 1280px) !important;
  padding-left: clamp(12px, 2vw, 30px) !important;
  padding-right: clamp(12px, 2vw, 30px) !important;
  padding-bottom: clamp(16px, 2.2vw, 32px) !important;
  gap: clamp(18px, 2.2vw, 30px) !important;
}

#showreel .showreel-shell .hero-intro {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(32px, 4vh, 54px) clamp(14px, 3.3vw, 50px) 0 !important;
  box-sizing: border-box !important;
}

#showreel .showreel-shell .showreel-player {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  #showreel .showreel-shell {
    width: calc(100% - 10px) !important;
    padding-inline: 6px !important;
    padding-bottom: 7px !important;
    gap: 14px !important;
  }
  #showreel .showreel-shell .hero-intro {
    padding: clamp(30px, 8vw, 44px) 14px 0 !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 769px) and (max-width: 1400px) and (max-height: 820px) {
  #showreel .showreel-shell {
    width: calc(100% - 20px) !important;
    padding: 0 10px 14px !important;
    gap: 14px !important;
  }
  #showreel .showreel-shell .hero-intro {
    padding: 26px clamp(16px, 3vw, 40px) 0 !important;
  }
}

@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  #showreel .showreel-shell {
    width: calc(100% - 10px) !important;
    height: calc(100% - 8px) !important;
    margin: 4px auto !important;
    padding: 7px !important;
    gap: 10px !important;
  }
  #showreel .showreel-shell .hero-intro {
    padding: 11px 12px !important;
  }
}

@media (orientation: portrait) {
  html.is-samsung-tablet #showreel .showreel-shell {
    width: min(calc(100% - 18px), 1240px) !important;
  }
  html.is-samsung-tablet #showreel .showreel-shell .showreel-player {
    width: min(90%, 810px, calc(42svh * 16 / 9)) !important;
    max-width: 810px !important;
    max-height: 42svh !important;
  }
}

@media (orientation: landscape) {
  html.is-samsung-tablet #showreel .showreel-shell {
    width: min(calc(100% - 20px), 1260px) !important;
    padding: 0 10px 18px !important;
  }
  html.is-samsung-tablet #showreel .showreel-shell .hero-intro {
    padding: clamp(22px, 3.2vw, 38px) clamp(16px, 3.2vw, 40px) 0 !important;
  }
  html.is-samsung-tablet #showreel .showreel-shell .showreel-player {
    width: min(99%, 1420px, calc(77svh * 16 / 9)) !important;
    max-width: 1420px !important;
    max-height: 77svh !important;
  }
}

/* Hidden fixed modals must not leave interactive descendants above Vimeo.
   Some tablet breakpoints give .modal-info pointer-events:auto even while its
   parent overlay is transparent, which intercepts Vimeo's bottom controls. */
.modal-overlay:not(.open),
.modal-overlay:not(.open) * {
  visibility: hidden !important;
  pointer-events: none !important;
}
.modal-overlay.open {
  visibility: visible !important;
}
#video-modal:not(.open),
#video-modal:not(.open) *,
#lightbox:not(.open),
#lightbox:not(.open) *,
#resume-modal:not(.open),
#resume-modal:not(.open) * {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep cross-origin Vimeo controls directly touchable on coarse-pointer
   devices. Disabling paint containment avoids WebKit iframe hit-test drift. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  #showreel .showreel-player {
    contain: none !important;
  }
  #showreel .showreel-player iframe {
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Give Vimeo the widest practical mobile viewport. At 375px+ this keeps more
   native controls outside Vimeo's compact overflow menu. */
@media (max-width: 600px) {
  #showreel .showreel-shell .showreel-player {
    position: relative;
    left: 50%;
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%);
    border-radius: 9px !important;
    overflow: hidden !important;
  }
}

/* Keep video thumbnails at their resting exposure on hover/focus. */
.video-card:hover .video-card-thumb,
.video-card:focus-visible .video-card-thumb,
.video-card:focus-within .video-card-thumb {
  filter: brightness(1) saturate(1) !important;
}

#behind-scene .video-card:hover .video-card-thumb,
#behind-scene .video-card:focus-visible .video-card-thumb,
#behind-scene .video-card:focus-within .video-card-thumb {
  filter: brightness(1) saturate(1) !important;
}

.video-card-info h3 {
  color: #fff !important;
  opacity: 1 !important;
}

.video-card-info {
  z-index: 5 !important;
}

@media (max-width: 768px) {
  #cinematography .video-card-info h3,
  #behind-scene .video-card-info h3 {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 480px) {
  #cinematography .video-card-info h3,
  #behind-scene .video-card-info h3 {
    font-size: 9px !important;
  }
}

/* Unified one-pass gallery reveal. Images are decoded before observation in
   main.js; settled cards release compositor layers to avoid iOS scroll flash. */
@media (prefers-reduced-motion: no-preference) {
  .video-card.reveal,
  .photo-card.reveal,
  .ai-card.reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity 0.56s cubic-bezier(.22,.68,.2,1),
      transform 0.64s cubic-bezier(.18,.76,.2,1),
      border-color 0.28s ease,
      box-shadow 0.38s ease;
    will-change: opacity, transform;
  }

  .video-card.reveal.visible,
  .photo-card.reveal.visible,
  .ai-card.reveal.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: none), 
       (prefers-reduced-motion: no-preference) and (pointer: coarse) {
  .video-card,
  .photo-card,
  .ai-card {
    contain: layout !important;
    backface-visibility: visible !important;
    transform-style: flat;
  }

  .video-card.reveal,
  .photo-card.reveal,
  .ai-card.reveal {
    opacity: 0 !important;
    transform: translate3d(0, 12px, 0) !important;
    transition:
      opacity 0.5s cubic-bezier(.22,.68,.2,1),
      transform 0.56s cubic-bezier(.18,.76,.2,1),
      border-color 0.24s ease,
      box-shadow 0.32s ease !important;
    will-change: opacity, transform !important;
  }

  .video-card.reveal.visible,
  .photo-card.reveal.visible,
  .ai-card.reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }

  .video-card-thumb,
  .photo-card-img,
  .ai-card img,
  .ai-card-media {
    transform: none !important;
    filter: none !important;
    transition: none !important;
    backface-visibility: visible !important;
    will-change: auto !important;
  }
}

/* iOS/touch scroll stability: after the one-pass reveal finishes, freeze the
   card and its interactive layers so scroll gestures cannot toggle hover
   compositing states and repaint thumbnails. */
@media (hover: none), (pointer: coarse) {
  .video-card.reveal-settled,
  .photo-card.reveal-settled,
  .ai-card.reveal-settled,
  .video-card.reveal-settled:hover,
  .photo-card.reveal-settled:hover,
  .ai-card.reveal-settled:hover,
  .video-card.reveal-settled:active,
  .photo-card.reveal-settled:active,
  .ai-card.reveal-settled:active {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    contain: layout !important;
    backface-visibility: visible !important;
  }

  .video-card::before,
  .photo-card::before,
  .ai-card::before {
    display: none !important;
  }

  .video-card-info {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .video-card-overlay {
    opacity: 1 !important;
    transition: none !important;
  }

  .photo-card-overlay,
  .ai-card::after,
  .ai-card-info {
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  .video-card .play-btn,
  .video-card:hover .play-btn,
  .video-card:focus-visible .play-btn,
  .video-card:focus-within .play-btn {
    transform: none !important;
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(5,5,5,0.48) !important;
    color: var(--white-p) !important;
  }

  .video-card-thumb,
  .video-card:hover .video-card-thumb,
  .video-card:focus-visible .video-card-thumb,
  .video-card:focus-within .video-card-thumb,
  .photo-card-img,
  .photo-card:hover .photo-card-img,
  .ai-card img,
  .ai-card:hover img {
    transform: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }
}

/* Final modal motion override — kept last to beat legacy modal animations. */
@keyframes bmk-modal-cinematic-in {
  0% {
    opacity: 0;
    transform: translate3d(0,22px,0) scale(0.94);
    filter: blur(8px);
  }
  62% {
    opacity: 1;
    transform: translate3d(0,-2px,0) scale(1.008);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    filter: blur(0);
  }
}

#video-modal,
#lightbox {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.42s !important;
}

#video-modal.open,
#lightbox.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

#video-modal .modal-box,
#lightbox .lightbox-box {
  opacity: 0 !important;
  transform: translate3d(0, 22px, 0) scale(0.94) !important;
  filter: blur(8px) !important;
  animation: none !important;
  transition:
    opacity 0.34s ease,
    transform 0.46s cubic-bezier(.16,.84,.22,1),
    filter 0.36s ease !important;
}

#video-modal.open .modal-box,
#lightbox.open .lightbox-box {
  opacity: 1 !important;
  transform: translate3d(0,0,0) scale(1) !important;
  filter: blur(0) !important;
  animation: bmk-modal-cinematic-in 0.46s cubic-bezier(.16,.84,.22,1) both !important;
}

@media (prefers-reduced-motion: reduce) {
  #video-modal.open .modal-box,
  #lightbox.open .lightbox-box {
    animation: none !important;
  }
}

/* Final mobile play-button centering after all touch stability overrides. */
@media (max-width: 768px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  #cinematography .video-card .play-btn,
  #cinematography .video-card:hover .play-btn,
  #behind-scene .video-card .play-btn,
  #behind-scene .video-card:hover .play-btn {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
  }
}

/* Final mobile portrait gallery layout: video and photography both 2 x 5. */
@media (max-width: 768px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  #cinematography #video-grid-all {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #photography #photo-grid-all {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Final mobile landscape gallery layout: video and photography both 3 x 4. */
@media (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  #cinematography #video-grid-all,
  #photography #photo-grid-all {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mobile player launch: expand smoothly from the tapped thumbnail. */
@keyframes bmk-mobile-player-launch {
  0% {
    opacity: 0;
    filter: none;
    transform: translate3d(var(--player-launch-x, 0), var(--player-launch-y, 18px), 0)
      scale(0.3) rotate(1.2deg);
  }
  58% {
    opacity: 1;
    filter: none;
    transform: translate3d(0, -4px, 0) scale(1.018) rotate(0);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
  }
}

@keyframes bmk-mobile-player-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px),
       (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  #video-modal.mobile-origin-launch.open {
    animation: bmk-mobile-player-backdrop 0.3s ease-out both !important;
  }

  #video-modal.mobile-origin-launch.open .modal-box {
    filter: none !important;
    transform-origin: center center !important;
    will-change: transform, opacity;
    animation: bmk-mobile-player-launch 0.54s cubic-bezier(.16,.86,.22,1) both !important;
  }
}

/* Final desktop small-copy scale: keep these after all component overrides. */
@media (min-width: 1101px) {
  #contact .contact-form-heading > span {
    font-size: 0.78rem !important;
  }

  #contact .contact-form-heading p,
  #contact .cf-label,
  #contact .cf-input,
  #contact .cf-input::placeholder,
  #contact .cf-result {
    font-size: 1rem !important;
  }

  #contact .cf-submit,
  #contact .cf-submit-text,
  #contact .cf-submit-sending {
    font-size: 0.95rem !important;
  }

  #about .skill-name {
    font-size: 0.9rem !important;
  }

  #about .skill-pct {
    font-size: 0.75rem !important;
  }

  #contact .contact-form-heading p,
  #contact .cf-label {
    font-size: 0.95rem !important;
  }

  #main-footer p,
  #main-footer .footer-copy,
  #main-footer .footer-credit,
  #main-footer .footer-credit p,
  #main-footer .footer-site-links,
  #main-footer .footer-site-links a,
  #main-footer .footer-admin,
  #main-footer #footer-credit-label,
  #main-footer #footer-credit-name,
  #main-footer .footer-credit-tool {
    font-size: 0.78rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #video-modal.mobile-origin-launch.open,
  #video-modal.mobile-origin-launch.open .modal-box {
    animation: none !important;
  }
}

/* Desktop glass-panel alignment: match the Cinematography / Photography frame. */
@media (min-width: 1101px) {
  #cinematography .section-title,
  #photography .section-title,
  #behind-scene .section-title {
    font-size: 2.1rem !important;
  }

  #ai-visuals .section-intro,
  #behind-scene .section-intro {
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
  }

  #cinematography .cat-tab,
  #photography .cat-tab,
  #behind-scene .cat-tab {
    font-size: 0.86rem !important;
  }

  #about .label-tag,
  #contact .label-tag {
    font-size: 0.82rem !important;
  }

  #about .skill-name {
    font-size: 0.9rem !important;
  }

  #about .skill-pct {
    font-size: 0.75rem !important;
  }

  #cinematography .video-card h3,
  #cinematography .card-title,
  #behind-scene .video-card h3,
  #behind-scene .card-title {
    font-size: 0.9rem !important;
  }

  #contact .contact-role {
    font-size: 0.8rem !important;
  }

  #contact .contact-form-heading p,
  #contact .cf-label,
  #main-footer p {
    font-size: 0.78rem !important;
  }

  #showreel .showreel-shell {
    width: min(calc(100% - clamp(36px, 8vw, 112px)), 1660px) !important;
    max-width: 1660px !important;
    padding-inline: clamp(28px, 2.6vw, 44px) !important;
    padding-bottom: clamp(30px, 2.8vw, 46px) !important;
    gap: clamp(24px, 2.4vw, 38px) !important;
  }

  #showreel .showreel-shell .hero-intro {
    padding: clamp(44px, 5vh, 68px) clamp(28px, 4.5vw, 76px) 0 !important;
  }

  #showreel .hero-kicker {
    font-size: 0.7rem !important;
  }

  #showreel .hero-title {
    font-size: clamp(2.3rem, 3.35vw, 4rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.025em !important;
  }

  #showreel .hero-role {
    font-size: clamp(0.72rem, 0.82vw, 0.88rem) !important;
    padding: 10px 18px !important;
  }

  #showreel .hero-summary {
    max-width: 820px !important;
    font-size: clamp(1rem, 1.15vw, 1.18rem) !important;
    line-height: 1.82 !important;
    margin-bottom: 32px !important;
  }

  #showreel .hero-btn {
    min-height: 54px !important;
    padding: 14px 28px !important;
    font-size: 0.7rem !important;
  }

  #showreel .showreel-shell .showreel-player {
    width: min(96%, 1320px) !important;
    max-width: min(96%, 1320px) !important;
    margin-inline: auto !important;
    height: auto !important;
  }

  #about.section-about,
  #contact.section-contact {
    padding-inline: clamp(18px, 4vw, 56px) !important;
  }

  #about .about-inner,
  #contact .contact-inner {
    width: 100% !important;
    max-width: 1660px !important;
  }

  #about .about-inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    gap: 30px !important;
    padding: 18px !important;
  }

  #about .about-bio-block {
    padding: 44px 34px 42px 46px !important;
  }

  #about .about-name {
    font-size: clamp(1.55rem, 1.72vw, 2rem) !important;
    margin-bottom: 24px !important;
  }

  #about .about-bio {
    width: 100% !important;
    max-width: 840px !important;
    padding-right: clamp(8px, 1vw, 18px) !important;
    box-sizing: border-box !important;
  }

  #about .about-bio p {
    font-size: clamp(0.94rem, 0.9vw, 1.04rem) !important;
    line-height: 1.92 !important;
    text-align: left !important;
    text-align-last: left !important;
    text-justify: auto !important;
    word-spacing: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: pretty !important;
  }

  #about .about-right {
    padding: clamp(34px, 2.8vw, 46px) !important;
  }

  #about .skills-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #about .skill-item {
    display: block !important;
    min-height: 76px !important;
    padding: 13px 18px 14px !important;
  }

  #about .skill-header {
    margin-bottom: 10px !important;
    min-width: 0 !important;
    align-items: center !important;
  }

  #about .skill-name {
    font-size: 0.84rem !important;
  }

  #about .skill-icon {
    width: 31px !important;
    height: 31px !important;
    flex-basis: 31px !important;
    font-size: 0.92rem !important;
  }

  #about .skill-pct {
    font-size: 0.68rem !important;
  }

  #about .skill-track {
    width: 100% !important;
    margin: 0 !important;
    height: 5px !important;
  }

  #about .about-inner > .bokah-brand-panel {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    gap: clamp(38px, 3.2vw, 56px) !important;
    padding: clamp(62px, 5vw, 84px) clamp(42px, 3.5vw, 58px) !important;
  }

  #about .bokah-brand-copy {
    width: 100% !important;
    max-width: 860px !important;
    box-sizing: border-box !important;
  }

  #about .bokah-brand-copy h3 {
    font-size: clamp(1.8rem, 2.25vw, 2.55rem) !important;
  }

  #about .bokah-brand-copy p,
  #about .bokah-brand-lede {
    font-size: clamp(0.92rem, 0.88vw, 1.04rem) !important;
    line-height: 1.86 !important;
    text-align: left !important;
    text-align-last: left !important;
    text-justify: auto !important;
    word-spacing: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: pretty !important;
  }

  #about .bokah-logo-card {
    padding: clamp(24px, 2.4vw, 38px) !important;
  }

  #contact .contact-inner {
    grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr) !important;
  }

  #contact .contact-profile,
  #contact .contact-form {
    padding: clamp(58px, 5vw, 84px) !important;
  }

  #contact .contact-photo-wrap {
    width: 150px !important;
    height: 150px !important;
  }

  #contact .contact-name {
    font-size: clamp(2rem, 2.8vw, 3rem) !important;
  }

  #contact .contact-tagline {
    max-width: 42rem !important;
    font-size: clamp(0.96rem, 0.9vw, 1.06rem) !important;
  }

  #contact .contact-form-heading h3 {
    font-size: clamp(1.9rem, 2.55vw, 2.8rem) !important;
  }

  #contact .contact-form-heading p,
  #contact .cf-input {
    font-size: 0.9rem !important;
  }

  #contact .cf-input {
    min-height: 58px !important;
  }

  #contact .cf-textarea {
    min-height: 180px !important;
  }
}

/* Mobile media readiness: cover the complete modal until its final layout is ready. */
.modal-stage-loader {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: grid;
  place-items: center;
  background: #050505;
  transition: opacity 0.2s ease, visibility 0s linear 0.22s;
}

.modal-stage-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(106,176,212,0.07), transparent 42%);
}

.modal-stage-loader::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255,255,255,0.16);
  border-top-color: #6ab0d4;
  border-radius: 50%;
  animation: bmk-media-loader-spin 0.78s linear infinite;
}

@keyframes bmk-media-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes bmk-mobile-photo-simple-in {
  from {
    opacity: 0;
    filter: none;
    transform: translate3d(0, 8px, 0) scale(0.975);
  }
  to {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bmk-mobile-media-ready-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px),
       (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  #video-modal.media-preparing .modal-stage-loader,
  #lightbox.media-preparing .modal-stage-loader {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  #video-modal.media-preparing .modal-box,
  #video-modal.media-preparing .modal-nav,
  #lightbox.media-preparing .lightbox-box,
  #lightbox.media-preparing .modal-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  #video-modal.media-preparing #modal-iframe {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
  }

  #video-modal.media-ready .modal-stage-loader,
  #lightbox.media-ready .modal-stage-loader {
    opacity: 0;
    visibility: hidden;
  }

  #video-modal.media-ready .modal-box,
  #lightbox.media-ready .lightbox-box {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    animation: bmk-mobile-media-ready-in 0.24s ease-out both !important;
  }

  #video-modal.media-ready #modal-iframe {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }

  #video-modal.media-ready .modal-nav,
  #lightbox.media-ready .modal-nav {
    opacity: 1 !important;
    visibility: visible !important;
  }

  #lightbox #lightbox-img {
    transition: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  #lightbox.media-ready #lightbox-img {
    opacity: 1 !important;
  }

  #lightbox.open:not(.media-preparing):not(.media-ready) .lightbox-box {
    filter: none !important;
    animation: bmk-mobile-photo-simple-in 0.22s ease-out both !important;
  }
}

/* Keep mobile photo pinch-zoom separate from gallery swipe and pull-to-refresh. */
@media (max-width: 768px),
       (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  #lightbox.open {
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }

  #lightbox.open .lightbox-box,
  #lightbox.open #lightbox-img {
    overscroll-behavior: contain !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }
}

/* Absolute final desktop typography system.
   Mobile and tablet profiles intentionally retain their existing scale. */
@media (min-width: 1101px) {
  .nav-links a {
    font-size: 0.8125rem !important;
    letter-spacing: 0.13em !important;
  }

  #main-nav .logo-sub {
    font-size: 0.76rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2em !important;
    color: rgba(151,215,245,0.9) !important;
    text-shadow:
      0 0 12px rgba(106,176,212,0.24),
      0 2px 10px rgba(0,0,0,0.72) !important;
  }

  #showreel .hero-kicker {
    font-size: 0.78rem !important;
    letter-spacing: 0.28em !important;
  }

  #showreel .hero-title {
    font-size: clamp(3.25rem, 3.35vw, 4rem) !important;
    line-height: 1 !important;
  }

  #showreel .hero-role {
    font-size: 0.875rem !important;
    letter-spacing: 0.11em !important;
  }

  #showreel .hero-summary {
    font-size: 1.125rem !important;
    line-height: 1.82 !important;
  }

  #showreel .hero-btn {
    font-size: 0.8125rem !important;
    letter-spacing: 0.14em !important;
  }

  #about .label-tag,
  #contact .label-tag {
    font-size: 0.78rem !important;
    letter-spacing: 0.28em !important;
    line-height: 1.65 !important;
  }

  #about .about-name {
    font-size: 1.75rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.065em !important;
    margin-bottom: 22px !important;
  }

  #about .name-ko {
    font-size: 0.58em !important;
    line-height: 1.18 !important;
    letter-spacing: 0.06em !important;
  }

  #about .about-bio p,
  #about .bokah-brand-copy > p:not(.label-tag) {
    font-size: 1.03rem !important;
    line-height: 1.86 !important;
  }

  #about .skill-name {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1em !important;
  }

  #about .skill-icon {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 31px !important;
    width: 31px !important;
    height: 31px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  #about .skill-icon i,
  #about .skill-icon svg {
    display: block !important;
    margin: 0 !important;
  }

  #about .skill-pct {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }

  #about .bokah-brand-copy h3 {
    font-size: 2.375rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.1em !important;
  }

  #about .bokah-brand-lede {
    font-size: 1.0625rem !important;
    line-height: 1.8 !important;
  }

  #about .bokah-logo-card p {
    margin-top: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
  }

  #cinematography .section-title,
  #photography .section-title,
  #behind-scene .section-title {
    font-size: 2.125rem !important;
    line-height: 1 !important;
  }

  #ai-visuals .section-intro,
  #behind-scene .section-intro {
    font-size: 0.97rem !important;
    line-height: 1.7 !important;
    letter-spacing: 0.02em !important;
  }

  #cinematography .cat-tab,
  #photography .cat-tab,
  #behind-scene .cat-tab {
    font-size: 0.875rem !important;
    letter-spacing: 0.1em !important;
  }

  #cinematography .video-card h3,
  #cinematography .card-title,
  #behind-scene .video-card h3,
  #behind-scene .card-title {
    font-size: 0.91rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.035em !important;
  }

  #cinematography .pg-btn,
  #photography .pg-btn,
  #behind-scene .pg-btn {
    font-size: 0.8125rem !important;
  }

  #video-modal #modal-title,
  #lightbox #lightbox-caption {
    font-size: 0.94rem !important;
    line-height: 1.55 !important;
  }

  #video-modal #modal-desc {
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
  }

  #contact .contact-name {
    font-size: clamp(2.25rem, 2.5vw, 2.875rem) !important;
    line-height: 1.08 !important;
  }

  #contact .contact-role {
    font-size: 0.84rem !important;
    line-height: 1.65 !important;
    letter-spacing: 0.1em !important;
  }

  #contact .contact-tagline {
    font-size: 1.0625rem !important;
    line-height: 1.78 !important;
  }

  #contact .contact-form-heading > span {
    font-size: 0.78rem !important;
    letter-spacing: 0.25em !important;
  }

  #contact .contact-form-heading h3 {
    font-size: 2.5rem !important;
    line-height: 1.15 !important;
  }

  #contact .contact-form-heading p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  #contact .cf-label {
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0.16em !important;
  }

  #contact .cf-input,
  #contact .cf-input::placeholder,
  #contact .cf-result {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0.015em !important;
  }

  #contact .cf-submit,
  #contact .cf-submit-text,
  #contact .cf-submit-sending {
    font-size: 0.9rem !important;
    letter-spacing: 0.14em !important;
  }

  #main-footer p,
  #main-footer .footer-copy,
  #main-footer .footer-credit,
  #main-footer .footer-credit p,
  #main-footer .footer-site-links,
  #main-footer .footer-site-links a,
  #main-footer .footer-admin,
  #main-footer #footer-credit-label,
  #main-footer #footer-credit-name,
  #main-footer .footer-credit-tool {
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
  }

  body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  #showreel .hero-title,
  #about .about-name,
  #about .bokah-brand-copy h3,
  #cinematography .section-title,
  #photography .section-title,
  #behind-scene .section-title,
  #contact .contact-name,
  #contact .contact-form-heading h3 {
    text-wrap: balance !important;
  }

  #showreel .hero-summary {
    max-width: 62ch !important;
    text-wrap: balance !important;
    color: rgba(232,232,232,0.76) !important;
  }

  #about .about-bio p,
  #about .bokah-brand-copy > p:not(.label-tag),
  #contact .contact-tagline,
  #contact .contact-form-heading p {
    text-wrap: pretty !important;
  }

  #about .about-bio p {
    max-width: 64ch !important;
    color: rgba(232,232,232,0.72) !important;
  }

  #about .bokah-brand-copy > p:not(.label-tag) {
    max-width: 68ch !important;
    color: rgba(232,232,232,0.7) !important;
  }

  #about .bokah-brand-lede {
    color: rgba(232,232,232,0.86) !important;
  }

  #about .label-tag,
  #contact .label-tag,
  #contact .contact-form-heading > span {
    color: #83c7e8 !important;
    text-shadow: 0 0 18px rgba(106,176,212,0.12) !important;
  }

  #ai-visuals .section-intro,
  #behind-scene .section-intro {
    max-width: 64ch !important;
    color: rgba(232,232,232,0.66) !important;
    text-wrap: pretty !important;
  }

  #cinematography .cat-tab,
  #photography .cat-tab,
  #behind-scene .cat-tab {
    min-height: 42px !important;
    padding: 10px 17px !important;
    border-color: rgba(255,255,255,0.11) !important;
    background: rgba(8,8,8,0.46) !important;
    transition:
      color 0.22s ease,
      border-color 0.22s ease,
      background 0.22s ease,
      transform 0.22s ease !important;
  }

  #cinematography .cat-tab.active,
  #photography .cat-tab.active,
  #behind-scene .cat-tab.active {
    color: #f5fbff !important;
    border-color: rgba(106,176,212,0.5) !important;
    background: linear-gradient(180deg, rgba(106,176,212,0.2), rgba(106,176,212,0.08)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07) !important;
  }

  #cinematography .video-card h3,
  #cinematography .card-title,
  #behind-scene .video-card h3,
  #behind-scene .card-title {
    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.72) !important;
  }

  #about .skill-item {
    border-color: rgba(255,255,255,0.1) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.028), rgba(255,255,255,0.012)) !important;
  }

  #about .skill-track {
    background: rgba(255,255,255,0.09) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.32) !important;
  }

  #contact .contact-tagline {
    max-width: 50ch !important;
    color: rgba(232,232,232,0.72) !important;
  }

  #contact .contact-form-heading p {
    max-width: 54ch !important;
    color: rgba(232,232,232,0.62) !important;
  }

  #contact .cf-field {
    gap: 8px !important;
  }

  #contact .cf-input {
    border-color: rgba(255,255,255,0.13) !important;
    background: rgba(255,255,255,0.032) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
    transition:
      border-color 0.22s ease,
      background 0.22s ease,
      box-shadow 0.22s ease !important;
  }

  #contact .cf-input::placeholder {
    color: rgba(232,232,232,0.42) !important;
  }

  #contact .cf-input:hover {
    border-color: rgba(255,255,255,0.22) !important;
    background: rgba(255,255,255,0.044) !important;
  }

  #contact .cf-input:focus {
    border-color: rgba(106,176,212,0.72) !important;
    background: rgba(106,176,212,0.055) !important;
    box-shadow:
      0 0 0 3px rgba(106,176,212,0.1),
      0 12px 34px rgba(0,0,0,0.2) !important;
  }

  #showreel .hero-btn,
  #contact .cf-submit,
  #about .about-resume-btn {
    min-height: 50px !important;
  }

  #main-footer .footer-inner {
    opacity: 0.86;
  }

  #main-footer .footer-copy,
  #main-footer .footer-credit,
  #main-footer .footer-site-links {
    letter-spacing: 0.08em !important;
  }

  #showreel .showreel-shell,
  #about .about-inner,
  #cinematography .portfolio-frame,
  #photography .portfolio-frame,
  #behind-scene .behind-scene-inner,
  #contact .contact-inner {
    box-shadow:
      0 26px 80px rgba(0,0,0,0.2),
      inset 0 1px 0 rgba(255,255,255,0.025) !important;
  }

  #about .about-left,
  #about .about-right {
    background:
      radial-gradient(circle at 78% 20%, rgba(106,176,212,0.025), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,0.014), transparent 38%) !important;
  }

  #about .about-bio {
    gap: 17px !important;
    margin-bottom: 30px !important;
  }

  #about .about-bio p + p {
    margin-top: 0 !important;
  }

  #about .about-resume-btn {
    padding-inline: 24px !important;
    border-color: rgba(106,176,212,0.38) !important;
    background: rgba(6,12,16,0.44) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  }

  #about .bokah-brand-copy p + p {
    margin-top: 18px !important;
  }

  #about .bokah-brand-copy .bokah-brand-lede {
    margin-bottom: 26px !important;
    padding-bottom: 22px !important;
    border-bottom: 1px solid rgba(255,255,255,0.075) !important;
  }

  #about .bokah-logo-card {
    border-color: rgba(255,255,255,0.11) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.18) !important;
  }

  #cinematography .section-header,
  #photography .section-header {
    gap: clamp(18px, 2vw, 30px) !important;
  }

  #cinematography .section-header::before,
  #cinematography .section-header::after,
  #photography .section-header::before,
  #photography .section-header::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 120px !important;
    width: auto !important;
    max-width: 250px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(106,176,212,0.38)) !important;
  }

  #cinematography .section-header::after,
  #photography .section-header::after {
    background: linear-gradient(90deg, rgba(106,176,212,0.38), transparent) !important;
  }

  #cinematography .section-title-icon,
  #photography .section-title-icon,
  #behind-scene .section-title-icon {
    color: #8ed5f4 !important;
    filter: drop-shadow(0 0 14px rgba(106,176,212,0.22)) !important;
  }

  #behind-scene .section-header {
    display: grid !important;
    grid-template-columns: auto minmax(120px, 1fr) !important;
    grid-template-areas:
      "title line"
      "intro intro" !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 24px !important;
    row-gap: 15px !important;
    text-align: left !important;
  }

  #behind-scene .section-title {
    grid-area: title !important;
  }

  #behind-scene .section-header::before {
    content: none !important;
    display: none !important;
  }

  #behind-scene .section-header::after {
    grid-area: line !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(106,176,212,0.38), transparent) !important;
  }

  #behind-scene .section-intro {
    grid-area: intro !important;
    width: min(100%, 66ch) !important;
    max-width: 66ch !important;
    margin: 0 !important;
    padding-left: 3px !important;
  }

  #cinematography .video-card,
  #photography .photo-card {
    border-color: rgba(255,255,255,0.12) !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.16) !important;
    transition:
      transform 0.28s cubic-bezier(.2,.72,.18,1),
      border-color 0.24s ease,
      box-shadow 0.28s ease !important;
  }

  #cinematography .video-card:hover,
  #photography .photo-card:hover {
    transform: translate3d(0,-4px,0) !important;
    border-color: rgba(106,176,212,0.34) !important;
    box-shadow:
      0 18px 42px rgba(0,0,0,0.28),
      0 0 0 1px rgba(106,176,212,0.06) !important;
  }

  #cinematography .video-card:hover img,
  #photography .photo-card:hover img {
    filter: none !important;
    opacity: 1 !important;
  }

  #cinematography .pg-btn,
  #photography .pg-btn,
  #behind-scene .pg-btn {
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 7px !important;
    border-color: rgba(255,255,255,0.12) !important;
    background: rgba(8,8,8,0.48) !important;
  }

  #cinematography .pg-btn.active,
  #photography .pg-btn.active,
  #behind-scene .pg-btn.active {
    color: #061016 !important;
    border-color: #75bfdf !important;
    background: linear-gradient(180deg, #8bcde8, #63adcd) !important;
    box-shadow: 0 8px 24px rgba(76,156,191,0.22) !important;
  }

  #contact .contact-profile,
  #contact .contact-form {
    position: relative !important;
  }

  #contact .contact-form::before {
    content: "" !important;
    position: absolute !important;
    top: clamp(44px, 4vw, 68px) !important;
    left: 0 !important;
    width: 1px !important;
    height: calc(100% - clamp(88px, 8vw, 136px)) !important;
    background: linear-gradient(180deg, transparent, rgba(106,176,212,0.22), transparent) !important;
  }

  #contact .contact-form-heading {
    margin-bottom: 22px !important;
  }

  #contact .cf-field {
    margin-bottom: 2px !important;
  }

  #contact .cf-submit {
    margin-top: 10px !important;
    border-color: rgba(106,176,212,0.5) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  }
}

/* Desktop contact lockup: match the invitation copy to the visible name width. */
@media (min-width: 1101px) {
  #contact .contact-name {
    font-size: clamp(2rem, 2.2vw, 2.5rem) !important;
  }

  #contact .contact-name .name-ko {
    font-size: 0.48em !important;
  }

  #contact .contact-tagline {
    width: min(100%, var(--contact-name-visual-width, 34rem)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
}

/* Desktop glass surfaces: one shared, lighter transparency level. */
@media (min-width: 1101px) {
  #showreel .showreel-shell {
    background:
      linear-gradient(
        145deg,
        rgba(15,15,15,0.38),
        rgba(5,5,5,0.38) 54%,
        rgba(10,10,10,0.38)
      ) !important;
  }

  #about .about-inner {
    background-color: rgba(6,6,6,0.38) !important;
  }

  #cinematography,
  #ai-visuals,
  #photography,
  #behind-scene {
    --section-panel-opacity: 0.38 !important;
  }

  #contact .contact-inner {
    background-color: rgba(6,6,6,0.38) !important;
  }

  #contact .contact-btn i {
    font-size: 1.28rem !important;
  }
}

/* Admin descriptions must be shown in full, preserving authored line breaks. */
#video-modal #modal-desc.modal-desc--multiline {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: pre-line !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

/* Phone landscape: use the actual visible viewport from JS because Safari can
   expose a stale svh value when the page is opened directly in landscape. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  #showreel.section-showreel {
    min-height: var(--visual-viewport-height, 100dvh) !important;
    height: var(--visual-viewport-height, 100dvh) !important;
  }

  #main-nav .nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* The button is a direct child of the overlay, outside the transformed and
     clipped player box, matching the photo modal's screen-corner placement. */
  #video-modal > .modal-close {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2045 !important;
  }
}

/* Showreel sound cue: a compact, non-interactive prompt between the hero
   actions and Vimeo's native player controls. */
#showreel .showreel-player-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#showreel .showreel-shell {
  gap: clamp(14px, 1.25vw, 20px) !important;
}

#showreel .hero-actions {
  margin-bottom: 0 !important;
}

#showreel .showreel-sound-hint {
  margin: 0 auto !important;
  padding: 0 clamp(13px, 1.1vw, 18px) !important;
  width: auto !important;
  min-height: 32px !important;
  border: 1px solid rgba(106, 176, 212, 0.26) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(106, 176, 212, 0.13), rgba(106, 176, 212, 0.055)) !important;
  box-shadow: inset 0 0 0 1px rgba(106, 176, 212, 0.05), 0 6px 16px rgba(0, 0, 0, 0.16) !important;
  color: rgba(215, 242, 255, 0.9) !important;
  font-family: var(--ff-sans) !important;
  font-size: clamp(0.63rem, 0.64vw, 0.74rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: clamp(0.1em, 0.16vw, 0.16em) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  cursor: default !important;
  transition: none !important;
}

#showreel .showreel-sound-hint.is-player-ready:not(.is-sound-enabled) {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

#showreel .showreel-sound-hint:hover,
#showreel .showreel-sound-hint:focus-visible {
  color: #f4fbff !important;
  border-color: rgba(106, 176, 212, 0.46) !important;
  background: linear-gradient(180deg, rgba(106, 176, 212, 0.2), rgba(106, 176, 212, 0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(106, 176, 212, 0.1), 0 7px 18px rgba(0, 0, 0, 0.2) !important;
  outline: none !important;
}

#showreel .showreel-sound-hint.is-sound-enabled {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#showreel .showreel-sound-hint span {
  display: inline-block;
  margin-left: 0.3em;
  font-size: 0.95em;
  letter-spacing: 0;
  transform: translateY(0.03em);
}

@media (max-width: 700px) {
  #showreel .showreel-shell {
    gap: 14px !important;
  }

  #showreel .hero-actions {
    margin-bottom: 0 !important;
  }

  #showreel .showreel-sound-hint {
    min-height: 28px !important;
    padding-inline: 12px !important;
    font-size: clamp(0.58rem, 2.35vw, 0.67rem) !important;
    letter-spacing: 0.1em !important;
  }
}

/* Keep the phone player fully inside its glass shell. Earlier viewport-wide
   breakout rules shifted the left edge beyond the visible screen. */
@media (max-width: 600px) {
  #showreel .showreel-shell .showreel-player {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  #showreel .showreel-player-stack {
    gap: 6px !important;
  }

  #showreel .showreel-sound-hint {
    min-height: 26px !important;
    padding-inline: 11px !important;
    font-size: clamp(0.54rem, 1.35vw, 0.63rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
  }
}

/* Absolute final phone carousel information stack. */
@media (max-width: 700px) and (orientation: portrait) {
  #video-modal .modal-info,
  #video-modal .modal-info.modal-info--stacked {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title counter"
      "youtube counter"
      "desc desc" !important;
    align-items: start !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    min-height: 0 !important;
    padding: 15px 18px 17px !important;
  }

  #video-modal #modal-title,
  #video-modal .modal-info.modal-info--stacked #modal-title { grid-area: title !important; }
  #video-modal .modal-youtube-stats { grid-area: youtube !important; }
  #video-modal #modal-desc,
  #video-modal .modal-info.modal-info--stacked #modal-desc {
    grid-area: desc !important;
    margin-top: 4px !important;
  }
  #video-modal #video-counter {
    grid-area: counter !important;
    align-self: start !important;
  }
}

/* Remove legacy arrow coordinates from the new preview panels. */
#video-modal > .carousel-preview,
#lightbox > .carousel-preview {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

#lightbox.tablet-photo-layout > .carousel-preview,
#video-modal.tablet-portrait-info > .carousel-preview {
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #lightbox.tablet-photo-layout > .modal-nav--prev,
  #video-modal.tablet-portrait-info > .modal-nav--prev {
    transform: translateY(-18%) scale(.96) !important;
  }

  #lightbox.tablet-photo-layout > .modal-nav--next,
  #video-modal.tablet-portrait-info > .modal-nav--next {
    transform: translateY(18%) scale(.96) !important;
  }
}

/* ================================================================
   FINAL IMMERSIVE COVER-FLOW
   Adjacent media uses the active panel's footprint and waits partially
   off-canvas, making direction and continuity immediately legible.
   ================================================================ */
#video-modal.open,
#lightbox.open {
  display: grid !important;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
  grid-template-areas: "current" !important;
  place-items: center !important;
  padding: clamp(58px, 6vh, 86px) 0 clamp(24px, 3vh, 44px) !important;
  perspective: 1800px;
}

#video-modal > .modal-box,
#lightbox > .lightbox-box {
  grid-area: current !important;
  width: min(72vw, 1360px) !important;
  max-width: min(72vw, 1360px) !important;
  z-index: 5 !important;
}

#video-modal > .carousel-preview,
#lightbox > .carousel-preview,
#lightbox.tablet-photo-layout > .carousel-preview,
#video-modal.tablet-portrait-info > .carousel-preview {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  width: var(--carousel-panel-width, min(72vw, 1360px)) !important;
  max-width: none !important;
  height: var(--carousel-panel-height, min(72svh, 860px)) !important;
  opacity: .3 !important;
  border-radius: clamp(16px, 1.35vw, 24px) !important;
  filter: saturate(.62) brightness(.82) !important;
  transition:
    transform 520ms cubic-bezier(.2, .8, .2, 1),
    opacity 360ms ease,
    filter 420ms ease !important;
}

#video-modal > .modal-nav--prev,
#lightbox > .modal-nav--prev,
#lightbox.tablet-photo-layout > .modal-nav--prev,
#video-modal.tablet-portrait-info > .modal-nav--prev {
  transform: translate3d(calc(-150% - 30px), -50%, 0) scale(1) !important;
}

#video-modal > .modal-nav--next,
#lightbox > .modal-nav--next,
#lightbox.tablet-photo-layout > .modal-nav--next,
#video-modal.tablet-portrait-info > .modal-nav--next {
  transform: translate3d(calc(50% + 30px), -50%, 0) scale(1) !important;
}

#video-modal > .modal-nav--prev:hover,
#video-modal > .modal-nav--prev:focus-visible,
#lightbox > .modal-nav--prev:hover,
#lightbox > .modal-nav--prev:focus-visible {
  transform: translate3d(calc(-147% - 30px), -50%, 0) scale(1) !important;
  opacity: .56 !important;
}

#video-modal > .modal-nav--next:hover,
#video-modal > .modal-nav--next:focus-visible,
#lightbox > .modal-nav--next:hover,
#lightbox > .modal-nav--next:focus-visible {
  transform: translate3d(calc(47% + 30px), -50%, 0) scale(1) !important;
  opacity: .56 !important;
}

#video-modal > .carousel-preview::after,
#lightbox > .carousel-preview::after {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(38px, 3.5vw, 52px);
  aspect-ratio: 1;
  color: rgba(239, 248, 252, .9);
  background: rgba(13, 19, 23, .52);
  border: 1px solid rgba(194, 230, 245, .24);
  border-radius: 50%;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  font-family: Arial, sans-serif;
  font-size: clamp(1.2rem, 1.7vw, 1.65rem);
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 300ms ease, background 300ms ease;
}

#video-modal > .modal-nav--prev::after,
#lightbox > .modal-nav--prev::after {
  content: "‹";
  right: clamp(18px, 2vw, 34px);
}

#video-modal > .modal-nav--next::after,
#lightbox > .modal-nav--next::after {
  content: "›";
  left: clamp(18px, 2vw, 34px);
}

#video-modal > .carousel-preview:hover::after,
#lightbox > .carousel-preview:hover::after {
  background: rgba(24, 36, 43, .72);
  transform: translateY(-50%) scale(1.06);
}

#video-modal.carousel-exit-next > .modal-box,
#lightbox.carousel-exit-next > .lightbox-box {
  transform: translate3d(-36vw, 0, -80px) scale(.95) !important;
}

#video-modal.carousel-exit-prev > .modal-box,
#lightbox.carousel-exit-prev > .lightbox-box {
  transform: translate3d(36vw, 0, -80px) scale(.95) !important;
}

@keyframes carousel-enter-from-right {
  from { opacity: .25; transform: translate3d(36vw, 0, -80px) scale(.95); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes carousel-enter-from-left {
  from { opacity: .25; transform: translate3d(-36vw, 0, -80px) scale(.95); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.open,
  #lightbox.open {
    padding: calc(env(safe-area-inset-top, 0px) + 54px) 0
      calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  #video-modal > .modal-box,
  #lightbox > .lightbox-box {
    width: min(calc(100vw - 10px), 920px) !important;
    max-width: min(calc(100vw - 10px), 920px) !important;
    max-height: 72svh !important;
  }

  #video-modal > .carousel-preview,
  #lightbox > .carousel-preview,
  #lightbox.tablet-photo-layout > .carousel-preview,
  #video-modal.tablet-portrait-info > .carousel-preview {
    top: 50% !important;
    left: 50% !important;
    width: var(--carousel-panel-width, min(calc(100vw - 10px), 920px)) !important;
    max-width: none !important;
    height: var(--carousel-panel-height, min(62svh, 720px)) !important;
    border-radius: clamp(14px, 3vw, 21px) !important;
    opacity: .32 !important;
  }

  #video-modal > .modal-nav--prev,
  #lightbox > .modal-nav--prev,
  #lightbox.tablet-photo-layout > .modal-nav--prev,
  #video-modal.tablet-portrait-info > .modal-nav--prev {
    transform: translate3d(-50%, calc(-150% - 18px), 0) scale(1) !important;
  }

  #video-modal > .modal-nav--next,
  #lightbox > .modal-nav--next,
  #lightbox.tablet-photo-layout > .modal-nav--next,
  #video-modal.tablet-portrait-info > .modal-nav--next {
    transform: translate3d(-50%, calc(50% + 18px), 0) scale(1) !important;
  }

  #video-modal > .carousel-preview::after,
  #lightbox > .carousel-preview::after {
    top: auto;
    right: auto;
    left: 50%;
    width: 38px;
    font-size: 1.2rem;
  }

  #video-modal > .modal-nav--prev::after,
  #lightbox > .modal-nav--prev::after {
    content: "⌃";
    bottom: 16px;
    transform: translateX(-50%);
  }

  #video-modal > .modal-nav--next::after,
  #lightbox > .modal-nav--next::after {
    content: "⌄";
    top: 16px;
    transform: translateX(-50%);
  }

  #video-modal > .modal-nav--next .carousel-preview-copy,
  #lightbox > .modal-nav--next .carousel-preview-copy {
    top: 0 !important;
    bottom: auto !important;
    padding-top: 58px !important;
    background: linear-gradient(0deg, transparent, rgba(0, 0, 0, .5)) !important;
  }

  #video-modal.carousel-exit-next > .modal-box,
  #lightbox.carousel-exit-next > .lightbox-box {
    transform: translate3d(0, -34svh, -70px) scale(.96) !important;
  }

  #video-modal.carousel-exit-prev > .modal-box,
  #lightbox.carousel-exit-prev > .lightbox-box {
    transform: translate3d(0, 34svh, -70px) scale(.96) !important;
  }

  @keyframes carousel-enter-from-bottom {
    from { opacity: .25; transform: translate3d(0, 34svh, -70px) scale(.96); filter: blur(5px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  }

  @keyframes carousel-enter-from-top {
    from { opacity: .25; transform: translate3d(0, -34svh, -70px) scale(.96); filter: blur(5px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  }
}

/* The hint belongs to the top utility rail, beside the close control. */
@media (hover: none) and (pointer: coarse) {
  #video-modal .carousel-gesture-hint,
  #lightbox .carousel-gesture-hint {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 40 !important;
  }
}

.carousel-transition-bridge {
  position: fixed;
  z-index: 9998;
  overflow: hidden;
  background-color: #080b0e;
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(193, 229, 244, .16);
  box-shadow:
    0 36px 110px rgba(0, 0, 0, .66),
    0 0 0 1px rgba(255, 255, 255, .035) inset;
  pointer-events: none;
  will-change: left, top, width, height, opacity, filter, transform;
}

.carousel-transition-bridge::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .09) 48%, transparent 70%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .22));
  background-size: 220% 100%, 100% 100%;
  animation: carousel-bridge-sheen 720ms cubic-bezier(.18, .88, .22, 1) both;
}

@keyframes carousel-bridge-sheen {
  from { background-position: 120% 0, 0 0; opacity: .2; }
  55% { opacity: .72; }
  to { background-position: -70% 0, 0 0; opacity: .18; }
}

/* Gesture capture above cross-origin players. The bottom 24% stays available
   for native YouTube/Vimeo controls while the central image accepts swipes. */
.carousel-swipe-surface {
  position: absolute;
  z-index: 9;
  inset: 0 0 24% 0;
  display: block;
  background: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}

.carousel-swipe-surface:active {
  cursor: grabbing;
}

#lightbox .carousel-swipe-surface--photo {
  inset: 0;
}

@media (any-pointer: coarse) {
  .carousel-swipe-surface {
    pointer-events: auto;
  }
}

/* Connected-track transition: the real adjacent panel travels into the
   active position while the current panel yields in the same direction. */
#video-modal.carousel-exit-next > .modal-nav--next,
#lightbox.carousel-exit-next > .modal-nav--next {
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  opacity: 1 !important;
  filter: blur(0) saturate(1) brightness(1) !important;
  z-index: 7 !important;
}

#video-modal.carousel-exit-prev > .modal-nav--prev,
#lightbox.carousel-exit-prev > .modal-nav--prev {
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  opacity: 1 !important;
  filter: blur(0) saturate(1) brightness(1) !important;
  z-index: 7 !important;
}

#video-modal.carousel-exit-next > .modal-box,
#lightbox.carousel-exit-next > .lightbox-box {
  transform: translate3d(-12vw, 0, 0) scale(.985) !important;
  opacity: .24 !important;
  filter: blur(2.5px) !important;
}

#video-modal.carousel-exit-prev > .modal-box,
#lightbox.carousel-exit-prev > .lightbox-box {
  transform: translate3d(12vw, 0, 0) scale(.985) !important;
  opacity: .24 !important;
  filter: blur(2.5px) !important;
}

#video-modal > .modal-box,
#lightbox > .lightbox-box,
#video-modal > .carousel-preview,
#lightbox > .carousel-preview {
  transition:
    transform 640ms cubic-bezier(.16, .82, .2, 1),
    opacity 480ms cubic-bezier(.2, .72, .2, 1),
    filter 580ms ease !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.carousel-exit-next > .modal-nav--next,
  #lightbox.carousel-exit-next > .modal-nav--next,
  #video-modal.carousel-exit-prev > .modal-nav--prev,
  #lightbox.carousel-exit-prev > .modal-nav--prev {
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
  }

  #video-modal.carousel-exit-next > .modal-box,
  #lightbox.carousel-exit-next > .lightbox-box {
    transform: translate3d(0, -11svh, 0) scale(.985) !important;
  }

  #video-modal.carousel-exit-prev > .modal-box,
  #lightbox.carousel-exit-prev > .lightbox-box {
    transform: translate3d(0, 11svh, 0) scale(.985) !important;
  }
}

/* High-visibility hint in the utility rail immediately above active media. */
@media (hover: none), (pointer: coarse) {
  #video-modal .carousel-gesture-hint,
  #lightbox .carousel-gesture-hint {
    position: fixed !important;
    z-index: 50 !important;
    top: calc(50% - (var(--carousel-panel-height, 60svh) / 2) - 42px) !important;
    bottom: auto !important;
    left: 50% !important;
    color: rgba(246, 251, 253, .96) !important;
    background: rgba(22, 30, 35, .82) !important;
    border-color: rgba(176, 224, 244, .34) !important;
    box-shadow: 0 12px 38px rgba(0, 0, 0, .48), 0 0 22px rgba(105, 202, 242, .08) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    backdrop-filter: blur(22px) saturate(1.35);
  }
}

.carousel-seamless-cover {
  position: fixed;
  z-index: 9997;
  overflow: hidden;
  background-color: #070a0c;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(190, 228, 244, .13);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .58);
  opacity: 1;
  filter: blur(0) saturate(1) brightness(1);
  transform: translateZ(0) scale(1);
  transition:
    opacity 380ms cubic-bezier(.2, .7, .2, 1),
    filter 400ms ease,
    transform 440ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
  will-change: opacity, filter, transform;
}

.carousel-seamless-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 35%),
    radial-gradient(circle at 50% 44%, transparent 55%, rgba(0, 0, 0, .12));
}

.carousel-seamless-cover--reveal {
  opacity: 0;
  filter: blur(1.5px) saturate(1.04) brightness(1.04);
  transform: translateZ(0) scale(1.006);
}

#carousel-player-prewarm-deck {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: .001;
  pointer-events: none;
  contain: strict;
  clip-path: inset(50%);
}

#carousel-player-prewarm-deck iframe {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
}

/* Continuous roll: all three panels follow the finger as one connected strip. */
#video-modal > .modal-box,
#lightbox > .lightbox-box {
  transform: translate3d(var(--carousel-drag-offset, 0px), 0, 0);
}

#video-modal > .modal-nav--prev,
#lightbox > .modal-nav--prev,
#lightbox.tablet-photo-layout > .modal-nav--prev,
#video-modal.tablet-portrait-info > .modal-nav--prev {
  transform: translate3d(calc(-150% - 30px + var(--carousel-drag-offset, 0px)), -50%, 0) scale(1) !important;
}

#video-modal > .modal-nav--next,
#lightbox > .modal-nav--next,
#lightbox.tablet-photo-layout > .modal-nav--next,
#video-modal.tablet-portrait-info > .modal-nav--next {
  transform: translate3d(calc(50% + 30px + var(--carousel-drag-offset, 0px)), -50%, 0) scale(1) !important;
}

#video-modal.carousel-dragging > .modal-box,
#lightbox.carousel-dragging > .lightbox-box,
#video-modal.carousel-dragging > .carousel-preview,
#lightbox.carousel-dragging > .carousel-preview {
  transition: none !important;
  will-change: transform;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal > .modal-box,
  #lightbox > .lightbox-box {
    transform: translate3d(0, var(--carousel-drag-offset, 0px), 0);
  }

  #video-modal > .modal-nav--prev,
  #lightbox > .modal-nav--prev,
  #lightbox.tablet-photo-layout > .modal-nav--prev,
  #video-modal.tablet-portrait-info > .modal-nav--prev {
    transform: translate3d(-50%, calc(-150% - 18px + var(--carousel-drag-offset, 0px)), 0) scale(1) !important;
  }

  #video-modal > .modal-nav--next,
  #lightbox > .modal-nav--next,
  #lightbox.tablet-photo-layout > .modal-nav--next,
  #video-modal.tablet-portrait-info > .modal-nav--next {
    transform: translate3d(-50%, calc(50% + 18px + var(--carousel-drag-offset, 0px)), 0) scale(1) !important;
  }
}

/* ================================================================
   INSTAGRAM-STYLE CONTINUOUS MODAL FEED
   All posts live in one native momentum-scrolling track. JavaScript only
   activates the item nearest the viewport center after scrolling settles.
   ================================================================ */
.modal-feed-track {
  display: none;
}

#video-modal.open.modal-feed-mode,
#lightbox.open.modal-feed-mode {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.modal-feed-mode > .modal-feed-track {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.modal-feed-mode > .modal-feed-track::-webkit-scrollbar {
  display: none;
}

.modal-feed-slide {
  position: relative;
  display: grid;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: clamp(58px, 6vh, 86px) 0 clamp(24px, 3vh, 44px);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  contain: layout paint;
}

.modal-feed-poster,
.modal-feed-slide > .modal-box,
.modal-feed-slide > .lightbox-box {
  grid-area: 1 / 1 !important;
  position: relative !important;
  inset: auto !important;
  width: min(72vw, 1360px) !important;
  max-width: min(72vw, 1360px) !important;
  max-height: calc(100svh - 110px) !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: clamp(14px, 1.25vw, 22px);
  background: #070a0c;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .62);
}

#video-modal .modal-feed-poster {
  aspect-ratio: 16 / 10.7;
}

#lightbox .modal-feed-poster {
  height: min(76svh, 880px);
}

.modal-feed-poster > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) brightness(.7);
}

.modal-feed-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .62)),
    radial-gradient(circle at 50% 42%, transparent 55%, rgba(0, 0, 0, .15));
  pointer-events: none;
}

.modal-feed-poster-label {
  position: absolute;
  z-index: 2;
  right: clamp(18px, 2vw, 30px);
  bottom: clamp(16px, 2vw, 28px);
  left: clamp(18px, 2vw, 30px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(245, 249, 251, .88);
  font-family: var(--ff-sans);
}

.modal-feed-poster-label > span {
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(186, 226, 243, .24);
  border-radius: 50%;
  background: rgba(12, 18, 22, .5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: .6rem;
}

.modal-feed-poster-label > strong {
  overflow: hidden;
  font-size: clamp(.68rem, .82vw, .9rem);
  font-weight: 620;
  letter-spacing: .015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-feed-slide-active > .modal-feed-poster {
  opacity: 0;
  visibility: hidden;
}

.modal-feed-slide > .modal-box,
.modal-feed-slide > .lightbox-box {
  z-index: 2;
}

#video-modal.modal-feed-mode .modal-feed-slide > .modal-box,
#lightbox.modal-feed-mode .modal-feed-slide > .lightbox-box,
#lightbox.tablet-photo-layout.modal-feed-mode .modal-feed-slide > .lightbox-box {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
}

#lightbox.modal-feed-mode .modal-feed-slide > .lightbox-box img {
  max-width: 100% !important;
  max-height: calc(100svh - 150px) !important;
  object-fit: contain !important;
}

.modal-feed-mode > .carousel-preview {
  display: none !important;
}

#video-modal.modal-feed-mode > .carousel-preview,
#lightbox.modal-feed-mode > .carousel-preview {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.modal-feed-mode .carousel-swipe-surface {
  pointer-events: none !important;
}

.modal-feed-mode > .modal-close,
.modal-feed-mode .modal-close {
  z-index: 50 !important;
}

.modal-feed-mode > .carousel-gesture-hint {
  z-index: 49 !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  .modal-feed-mode > .modal-feed-track {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    touch-action: pan-y;
  }

  .modal-feed-slide {
    padding: calc(env(safe-area-inset-top, 0px) + 54px) 0
      calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .modal-feed-poster,
  .modal-feed-slide > .modal-box,
  .modal-feed-slide > .lightbox-box {
    width: min(calc(100vw - 10px), 920px) !important;
    max-width: min(calc(100vw - 10px), 920px) !important;
    max-height: 76svh !important;
    border-radius: clamp(13px, 3vw, 21px);
  }

  #video-modal .modal-feed-poster {
    aspect-ratio: 16 / 13.5;
  }

  #lightbox .modal-feed-poster {
    height: min(70svh, 720px);
  }
}

/* Full neighboring posts: every off-centre feed item carries the same media,
   title, metadata and description structure as the active modal. */
#video-modal .modal-feed-poster--video {
  aspect-ratio: auto;
}

.modal-feed-static-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.modal-feed-static-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) brightness(.74);
}

.modal-feed-static-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 30%, rgba(0, 0, 0, .16)),
    radial-gradient(circle at 50% 48%, transparent 44%, rgba(0, 0, 0, .14));
  pointer-events: none;
}

.modal-feed-static-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(44px, 4.4vw, 66px);
  aspect-ratio: 1;
  place-items: center;
  padding-left: .16em;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  color: rgba(255, 255, 255, .92);
  background: rgba(8, 12, 15, .38);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  font-size: clamp(.72rem, 1vw, 1rem);
  transform: translate(-50%, -50%);
}

#video-modal .modal-feed-static-info {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title counter"
    "youtube counter"
    "desc counter" !important;
  width: 100%;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .018), transparent),
    var(--bg2);
}

#video-modal .modal-feed-static-info h3 {
  grid-area: title;
  margin: 0 0 4px;
}

#video-modal .modal-feed-static-info .modal-feed-static-stats {
  grid-area: youtube;
  margin: 5px 0 8px;
}

#video-modal .modal-feed-static-info p {
  grid-area: desc;
  margin: 0;
  white-space: pre-wrap;
}

#video-modal .modal-feed-static-info .modal-counter {
  position: static;
  grid-area: counter;
  align-self: start;
  margin-left: 18px;
}

#lightbox .modal-feed-poster--photo {
  display: flex;
  height: min(76svh, 880px);
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: #050708;
}

#lightbox .modal-feed-poster--photo > img {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  object-fit: contain;
  filter: saturate(.9) brightness(.78);
  background: #030405;
}

#lightbox .modal-feed-poster--photo::after {
  display: none;
}

.modal-feed-photo-caption {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 16px;
  align-items: center;
  min-height: 62px;
  padding: 13px 18px 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .02), transparent),
    #090c0e;
  color: var(--gray);
  font-family: var(--ff-sans);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.modal-feed-photo-caption > strong {
  overflow: hidden;
  color: var(--white-p);
  font-size: clamp(.7rem, .78vw, .84rem);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-feed-photo-caption > span:not(.modal-counter) {
  overflow: hidden;
  color: rgba(172, 185, 192, .64);
  font-size: clamp(.56rem, .62vw, .68rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-feed-photo-caption > .modal-counter {
  position: static;
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal .modal-feed-poster--video {
    max-height: 76svh !important;
  }

  #video-modal .modal-feed-static-info {
    max-height: min(27svh, 230px);
    padding: 12px 14px 14px;
    overflow: hidden;
  }

  #video-modal .modal-feed-static-info h3 {
    font-size: clamp(.68rem, 3vw, .82rem);
  }

  #video-modal .modal-feed-static-info p {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(.6rem, 2.55vw, .72rem);
    line-height: 1.5;
    white-space: pre-wrap;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }

  #video-modal .modal-feed-static-info .modal-counter {
    margin-left: 10px;
  }

  #lightbox .modal-feed-poster--photo {
    height: min(70svh, 720px);
  }

  .modal-feed-photo-caption {
    min-height: 58px;
    padding: 11px 14px 12px;
  }
}

/* Premium unified vertical feed — desktop and touch devices share the same
   native scroll direction; only the post proportions change by viewport. */
#video-modal.modal-feed-mode,
#lightbox.modal-feed-mode {
  background:
    radial-gradient(circle at 50% 42%, rgba(69, 153, 190, .075), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(35, 74, 92, .08), transparent 32%),
    rgba(1, 3, 4, .975);
}

.modal-feed-mode > .modal-feed-track {
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-snap-type: y mandatory !important;
  touch-action: pan-y !important;
}

.modal-feed-slide {
  isolation: isolate;
  padding: clamp(66px, 7vh, 94px) 0 clamp(28px, 4vh, 54px);
}

.modal-feed-slide::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(82vw, 1480px);
  height: min(82vh, 940px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83, 171, 210, .055), transparent 68%);
  opacity: .8;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.modal-feed-poster,
.modal-feed-slide > .modal-box,
.modal-feed-slide > .lightbox-box {
  border-color: rgba(210, 235, 246, .13);
  background: rgba(5, 8, 10, .96);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .035) inset,
    0 30px 95px rgba(0, 0, 0, .62),
    0 8px 28px rgba(0, 0, 0, .34);
  transition:
    border-color .45s cubic-bezier(.22, 1, .36, 1),
    box-shadow .45s cubic-bezier(.22, 1, .36, 1),
    opacity .45s cubic-bezier(.22, 1, .36, 1);
}

.modal-feed-slide-active > .modal-box,
.modal-feed-slide-active > .lightbox-box {
  border-color: rgba(162, 218, 243, .2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .055) inset,
    0 38px 110px rgba(0, 0, 0, .68),
    0 0 48px rgba(82, 171, 212, .045);
}

.modal-feed-static-media > img,
#lightbox .modal-feed-poster--photo > img {
  filter: saturate(.94) brightness(.84) contrast(1.015);
}

#video-modal .modal-feed-static-info,
#video-modal.modal-feed-mode .modal-info {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .026), transparent 52%),
    rgba(7, 10, 12, .98);
}

#video-modal .modal-feed-static-info h3,
#video-modal.modal-feed-mode .modal-info h3 {
  color: rgba(245, 248, 250, .96);
  font-weight: 680;
  letter-spacing: .12em;
}

#video-modal .modal-feed-static-info p,
#video-modal.modal-feed-mode .modal-info p {
  color: rgba(171, 181, 187, .72);
  line-height: 1.58;
}

.modal-feed-photo-caption,
#lightbox.modal-feed-mode #lightbox-caption {
  border-top: 1px solid rgba(216, 239, 248, .09);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .026), transparent 58%),
    rgba(7, 10, 12, .98);
}

#lightbox.modal-feed-mode #lightbox-caption {
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 16px 20px;
  color: rgba(220, 228, 232, .78);
  line-height: 1.55;
  white-space: pre-line;
}

@media (orientation: portrait) and (max-width: 1200px) {
  .modal-feed-slide {
    padding:
      calc(env(safe-area-inset-top, 0px) + 58px)
      0
      calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  .modal-feed-poster,
  .modal-feed-slide > .modal-box,
  .modal-feed-slide > .lightbox-box {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .035) inset,
      0 20px 58px rgba(0, 0, 0, .56);
  }
}

/* Final editorial stream geometry. Keep this after the premium skin so the
   next post remains visible and the feed reads as one continuous page. */
.modal-feed-mode > .modal-feed-track {
  --feed-top-inset: clamp(56px, 6vh, 70px);
  gap: 0;
  padding: var(--feed-top-inset) 0 clamp(40px, 8vh, 96px);
  scroll-padding-top: var(--feed-top-inset);
  scroll-snap-type: y proximity !important;
}

.modal-feed-slide {
  display: grid;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  place-items: start center;
  padding: 0 0 clamp(18px, 2.4vh, 28px) !important;
  scroll-snap-align: start;
}

.modal-feed-slide::after {
  content: "";
  position: absolute;
  right: clamp(18px, 3vw, 48px);
  bottom: 8px;
  left: clamp(18px, 3vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(164, 215, 237, .11), transparent);
  pointer-events: none;
}

.modal-feed-slide-active > .modal-feed-poster {
  display: none !important;
}

.modal-feed-poster,
.modal-feed-slide > .modal-box,
.modal-feed-slide > .lightbox-box {
  width: min(62vw, 1180px) !important;
  max-width: min(62vw, 1180px) !important;
}

#lightbox.modal-feed-mode .modal-feed-slide > .lightbox-box {
  display: flex !important;
  width: min(62vw, 1180px) !important;
  height: min(76svh, 880px) !important;
  max-height: min(76svh, 880px) !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: #050708;
}

#lightbox.modal-feed-mode .modal-feed-slide > .lightbox-box #lightbox-img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto;
  object-fit: contain !important;
  background: #030405;
}

#lightbox.modal-feed-mode .modal-feed-slide > .lightbox-box #lightbox-caption {
  display: block !important;
  flex: 0 0 auto;
  padding-right: 92px;
  text-align: left;
}

#lightbox.modal-feed-mode #photo-counter {
  z-index: 4;
  top: auto !important;
  right: 18px !important;
  bottom: 16px !important;
  left: auto !important;
  transform: none !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  .modal-feed-mode > .modal-feed-track {
    --feed-top-inset: calc(env(safe-area-inset-top, 0px) + 58px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 42px);
  }

  .modal-feed-slide {
    padding-bottom: clamp(16px, 2.4vh, 24px) !important;
  }

  .modal-feed-poster,
  .modal-feed-slide > .modal-box,
  .modal-feed-slide > .lightbox-box {
    width: min(calc(100vw - 18px), 920px) !important;
    max-width: min(calc(100vw - 18px), 920px) !important;
  }

  #lightbox.modal-feed-mode .modal-feed-slide > .lightbox-box {
    width: min(calc(100vw - 18px), 920px) !important;
    max-width: min(calc(100vw - 18px), 920px) !important;
    height: min(70svh, 720px) !important;
    max-height: min(70svh, 720px) !important;
  }
}

/* Final centered-modal conflict guards for legacy tablet carousel rules. */
#video-modal.modal-centered-mode > #video-prev,
#video-modal.tablet-portrait-info.modal-centered-mode > #video-prev,
#lightbox.modal-centered-mode > #photo-prev,
#lightbox.tablet-photo-layout.modal-centered-mode > #photo-prev {
  position: fixed !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: clamp(8px, 3vw, 42px) !important;
  transform: translateY(-50%) !important;
}

#video-modal.modal-centered-mode > #video-next,
#video-modal.tablet-portrait-info.modal-centered-mode > #video-next,
#lightbox.modal-centered-mode > #photo-next,
#lightbox.tablet-photo-layout.modal-centered-mode > #photo-next {
  position: fixed !important;
  top: 50% !important;
  right: clamp(8px, 3vw, 42px) !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

#lightbox.modal-centered-mode > .lightbox-box,
#lightbox.tablet-photo-layout.modal-centered-mode > .lightbox-box {
  overflow: hidden !important;
}

#video-modal.modal-centered-mode > #modal-close,
#video-modal.tablet-portrait-info.modal-centered-mode > #modal-close,
#lightbox.modal-centered-mode > #lightbox-close,
#lightbox.tablet-photo-layout.modal-centered-mode > #lightbox-close {
  position: fixed !important;
  z-index: 60 !important;
  top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
}

#video-modal.modal-centered-mode > .carousel-gesture-hint,
#lightbox.modal-centered-mode > .carousel-gesture-hint {
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#video-modal.modal-centered-mode .carousel-gesture-glyph,
#lightbox.modal-centered-mode .carousel-gesture-glyph {
  display: none !important;
}

#lightbox.modal-centered-mode #photo-counter {
  padding: 6px 10px !important;
  border: 1px solid rgba(195, 225, 238, .13) !important;
  border-radius: 999px !important;
  background: rgba(12, 18, 22, .72) !important;
  box-shadow: none !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.modal-centered-mode > #video-prev,
  #video-modal.tablet-portrait-info.modal-centered-mode > #video-prev,
  #lightbox.modal-centered-mode > #photo-prev,
  #lightbox.tablet-photo-layout.modal-centered-mode > #photo-prev {
    left: 4px !important;
  }

  #video-modal.modal-centered-mode > #video-next,
  #video-modal.tablet-portrait-info.modal-centered-mode > #video-next,
  #lightbox.modal-centered-mode > #photo-next,
  #lightbox.tablet-photo-layout.modal-centered-mode > #photo-next {
    right: 4px !important;
  }
}

/* Original single-post modal restored from the pre-carousel build.
   YouTube statistics remain; only rounded media framing is added. */
#video-modal.open.modal-original-mode,
#lightbox.open.modal-original-mode {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(58px, 7vh, 82px) clamp(46px, 5vw, 76px)
    clamp(22px, 3vh, 38px) !important;
  overflow: hidden !important;
}

.modal-original-mode > .modal-feed-track,
.modal-original-mode > .carousel-gesture-hint {
  display: none !important;
}

#video-modal.modal-original-mode > .modal-box {
  position: relative !important;
  inset: auto !important;
  width: min(92vw, 1400px) !important;
  max-width: min(92vw, 1400px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: clamp(14px, 1.2vw, 20px) !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

#lightbox.modal-original-mode > .lightbox-box,
#lightbox.tablet-photo-layout.modal-original-mode > .lightbox-box {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  max-width: 95vw !important;
  max-height: 90svh !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

#lightbox.modal-original-mode #lightbox-img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  max-height: calc(100svh - 140px) !important;
  overflow: hidden;
  border: 1px solid rgba(205, 232, 244, .14) !important;
  border-radius: clamp(14px, 1.2vw, 20px) !important;
  clip-path: inset(0 round clamp(14px, 1.2vw, 20px));
  background: #030405;
}

#video-modal.modal-original-mode > .carousel-preview,
#lightbox.modal-original-mode > .carousel-preview,
#lightbox.tablet-photo-layout.modal-original-mode > .carousel-preview,
#video-modal.tablet-portrait-info.modal-original-mode > .carousel-preview {
  position: fixed !important;
  z-index: 20 !important;
  top: 50% !important;
  bottom: auto !important;
  display: grid !important;
  width: 44px !important;
  height: 62px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  border: 1px solid rgba(210, 228, 236, .16) !important;
  border-radius: 6px !important;
  background: rgba(8, 11, 13, .78) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .4) !important;
  filter: none !important;
  place-items: center;
  transform: translateY(-50%) !important;
  transition: background .2s ease, border-color .2s ease !important;
}

#video-modal.modal-original-mode > .modal-nav--prev,
#lightbox.modal-original-mode > .modal-nav--prev,
#lightbox.tablet-photo-layout.modal-original-mode > .modal-nav--prev {
  right: auto !important;
  left: 12px !important;
}

#video-modal.modal-original-mode > .modal-nav--next,
#lightbox.modal-original-mode > .modal-nav--next,
#lightbox.tablet-photo-layout.modal-original-mode > .modal-nav--next {
  right: 12px !important;
  left: auto !important;
}

#video-modal.modal-original-mode > .carousel-preview > *,
#lightbox.modal-original-mode > .carousel-preview > * {
  display: none !important;
}

#video-modal.modal-original-mode > .modal-nav--prev::after,
#lightbox.modal-original-mode > .modal-nav--prev::after {
  content: "‹" !important;
}

#video-modal.modal-original-mode > .modal-nav--next::after,
#lightbox.modal-original-mode > .modal-nav--next::after {
  content: "›" !important;
}

#video-modal.modal-original-mode > .carousel-preview::after,
#lightbox.modal-original-mode > .carousel-preview::after {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  color: rgba(238, 245, 248, .9) !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-family: Arial, sans-serif;
  font-size: 1.9rem !important;
  font-weight: 300;
  line-height: 1;
  transform: none !important;
}

#video-modal.modal-original-mode > #modal-close {
  position: fixed !important;
  z-index: 50 !important;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

@media (max-width: 700px) {
  #video-modal.open.modal-original-mode,
  #lightbox.open.modal-original-mode {
    padding:
      calc(env(safe-area-inset-top, 0px) + 52px)
      8px
      calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  }

  #video-modal.modal-original-mode > .modal-box {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  #lightbox.modal-original-mode #lightbox-img {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 122px) !important;
  }

  #video-modal.modal-original-mode > .modal-nav--prev,
  #lightbox.modal-original-mode > .modal-nav--prev {
    left: 4px !important;
  }

  #video-modal.modal-original-mode > .modal-nav--next,
  #lightbox.modal-original-mode > .modal-nav--next {
    right: 4px !important;
  }
}

/* Final arrow geometry, optical centering, and animation removal. */
#video-modal.modal-centered-mode > .modal-box,
#lightbox.modal-centered-mode > .lightbox-box,
#video-modal.modal-centered-mode[class*="carousel-"] > .modal-box,
#lightbox.modal-centered-mode[class*="carousel-"] > .lightbox-box {
  animation: none !important;
}

#video-modal.modal-centered-mode .carousel-gesture-glyph,
#lightbox.modal-centered-mode .carousel-gesture-glyph {
  display: inline-flex !important;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: rgba(126, 196, 229, .95) !important;
  font-size: .78rem;
  transform-origin: 50% 85%;
  animation: centered-swipe-hand 1.45s cubic-bezier(.45, 0, .55, 1) infinite;
}

#video-modal.modal-centered-mode > .carousel-gesture-hint > span:first-child,
#lightbox.modal-centered-mode > .carousel-gesture-hint > span:first-child {
  color: var(--gold) !important;
}

#video-modal.modal-centered-mode > .carousel-gesture-hint {
  top: max(
    calc(env(safe-area-inset-top, 0px) + 8px),
    calc(var(--modal-media-top, 70px) - 42px)
  ) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

#video-modal.modal-centered-mode > #modal-close,
#video-modal.tablet-portrait-info.modal-centered-mode > #modal-close {
  top: var(
    --video-close-top,
    max(calc(env(safe-area-inset-top, 0px) + 8px), calc(var(--modal-media-top, 70px) - 44px))
  ) !important;
  right: auto !important;
  left: var(--video-close-left, calc(100vw - 48px)) !important;
}

#video-modal.modal-centered-mode > #video-prev,
#video-modal.modal-centered-mode > #video-next,
#video-modal.tablet-portrait-info.modal-centered-mode > #video-prev,
#video-modal.tablet-portrait-info.modal-centered-mode > #video-next,
#lightbox.modal-centered-mode > #photo-prev,
#lightbox.modal-centered-mode > #photo-next,
#lightbox.tablet-photo-layout.modal-centered-mode > #photo-prev,
#lightbox.tablet-photo-layout.modal-centered-mode > #photo-next {
  top: var(--modal-media-center, 50%) !important;
  width: clamp(56px, 4.8vw, 64px) !important;
  height: clamp(56px, 4.8vw, 64px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1;
  overflow: hidden !important;
  border: 1px solid rgba(196, 226, 239, .24) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .09), transparent 40%),
    linear-gradient(145deg, rgba(24, 35, 41, .82), rgba(7, 11, 14, .84)) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(255, 255, 255, .025) inset,
    0 1px 0 rgba(255, 255, 255, .08) inset !important;
  transform: translateY(-50%) !important;
}

#video-modal.modal-centered-mode > .carousel-preview::after,
#lightbox.modal-centered-mode > .carousel-preview::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 2px solid rgba(241, 248, 251, .96) !important;
  border-right: 2px solid rgba(241, 248, 251, .96) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-origin: 50% 50% !important;
}

#video-modal.modal-centered-mode > #video-prev::after,
#lightbox.modal-centered-mode > #photo-prev::after {
  margin: 0 !important;
  transform: translate(-42%, -50%) rotate(-135deg) !important;
}

#video-modal.modal-centered-mode > #video-next::after,
#lightbox.modal-centered-mode > #photo-next::after {
  margin: 0 !important;
  transform: translate(-58%, -50%) rotate(45deg) !important;
}

@media (orientation: portrait) and (max-width: 1200px) {
  #video-modal.modal-centered-mode > #video-prev,
  #video-modal.modal-centered-mode > #video-next,
  #video-modal.tablet-portrait-info.modal-centered-mode > #video-prev,
  #video-modal.tablet-portrait-info.modal-centered-mode > #video-next,
  #lightbox.modal-centered-mode > #photo-prev,
  #lightbox.modal-centered-mode > #photo-next,
  #lightbox.tablet-photo-layout.modal-centered-mode > #photo-prev,
  #lightbox.tablet-photo-layout.modal-centered-mode > #photo-next {
    width: 52px !important;
    height: 52px !important;
  }

  #video-modal.modal-centered-mode > .carousel-preview::after,
  #lightbox.modal-centered-mode > .carousel-preview::after {
    width: 11px !important;
    height: 11px !important;
  }
}
}

/* Pre-carousel modal, with rounded framing as the only visual addition. */
#video-modal > .modal-box,
#video-modal .modal-video-wrap,
#lightbox > .lightbox-box,
#lightbox #lightbox-img {
  border-radius: clamp(12px, 1.15vw, 18px);
}

#video-modal > .modal-box,
#video-modal .modal-video-wrap,
#lightbox > .lightbox-box {
  overflow: hidden;
}

#lightbox #lightbox-img {
  display: block;
  max-width: 100%;
}

/* Photo-modal controls retain the pre-carousel placement. */
#lightbox.open > #photo-prev,
#lightbox.open > #photo-next {
  position: fixed !important;
  top: var(--modal-media-center, 50%) !important;
  bottom: auto !important;
  width: 52px !important;
  height: 72px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

#lightbox.open > #photo-prev {
  right: auto !important;
  left: 12px !important;
}

#lightbox.open > #photo-next {
  right: 12px !important;
  left: auto !important;
}

#lightbox.open > .lightbox-box,
#lightbox.open #lightbox-img {
  max-width: min(calc(100vw - 152px), 1400px) !important;
  max-height: calc(100svh - 96px) !important;
}

@media (max-width: 700px) {
  #lightbox.open > .lightbox-box,
  #lightbox.open #lightbox-img {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 84px) !important;
  }

  #lightbox.open > #photo-prev,
  #lightbox.open > #photo-next {
    width: 42px !important;
    height: 58px !important;
  }

  #lightbox.open > #photo-prev {
    left: 4px !important;
  }

  #lightbox.open > #photo-next {
    right: 4px !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #lightbox.open {
    padding-top: 36px !important;
    padding-bottom: 8px !important;
  }
}

/* Final video geometry: the JS inline coordinates win for close/arrows, while
   this block owns only the player size at each device aspect ratio. */
#video-modal.open > .modal-box {
  width: min(1240px, calc(100vw - 152px), calc(177.777svh - 320px)) !important;
  max-width: none !important;
  max-height: calc(100svh - 76px) !important;
  margin: auto !important;
}

#video-modal.open .modal-video-wrap {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}

@media (orientation: landscape) and (max-height: 620px) {
  #video-modal.open {
    padding:
      calc(env(safe-area-inset-top, 0px) + 52px)
      58px
      calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
  }

  #video-modal.open > .modal-box {
    width: min(calc(100vw - 116px), calc(177.777svh - 103px)) !important;
    max-height: calc(100svh - 56px) !important;
  }

  #video-modal.open .modal-info {
    display: none !important;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #video-modal.open > .modal-box {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100svh - 68px) !important;
  }
}

@media (orientation: portrait) and (min-width: 701px) and (max-width: 1200px) {
  #video-modal.open > .modal-box {
    width: min(calc(100vw - 116px), 944px, calc(177.777svh - 391px)) !important;
    max-height: calc(100svh - 82px) !important;
  }
}

/* Visible-state correction: one arrow glyph only and a lighter backdrop. */
#video-modal.modal-overlay {
  background: rgba(0, 0, 0, .46) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}

#video-modal.open > #video-prev,
#video-modal.open > #video-next {
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  border: 1px solid rgba(210, 228, 236, .24) !important;
  border-radius: 6px !important;
  background: rgba(8, 11, 13, .62) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

#video-modal.open > #video-prev::before,
#video-modal.open > #video-next::before {
  content: none !important;
  display: none !important;
}

#video-modal.open > #video-prev::after,
#video-modal.open > #video-next::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 3px solid rgba(245, 249, 251, .96) !important;
  border-right: 3px solid rgba(245, 249, 251, .96) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform-origin: 50% 50% !important;
}

#video-modal.open > #video-prev::after {
  right: auto !important;
  transform: translate(-38%, -50%) rotate(-135deg) !important;
}

#video-modal.open > #video-next::after {
  right: auto !important;
  transform: translate(-62%, -50%) rotate(45deg) !important;
}

#video-modal.open > #video-prev > *,
#video-modal.open > #video-next > * {
  display: none !important;
}

#video-modal.open.compact-visual-landscape .modal-info {
  display: none !important;
}

/* Photo modal uses the same measured media/control geometry as video modal. */
#lightbox.modal-overlay {
  background: rgba(0, 0, 0, .46) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}

#lightbox.open > #photo-prev,
#lightbox.open > #photo-next {
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  border: 1px solid rgba(210, 228, 236, .24) !important;
  border-radius: 6px !important;
  background: rgba(8, 11, 13, .62) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

#lightbox.open > #photo-prev::before,
#lightbox.open > #photo-next::before {
  content: none !important;
  display: none !important;
}

#lightbox.open > #photo-prev::after,
#lightbox.open > #photo-next::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border: 0 !important;
  border-top: 3px solid rgba(245, 249, 251, .96) !important;
  border-right: 3px solid rgba(245, 249, 251, .96) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-origin: 50% 50% !important;
}

#lightbox.open > #photo-prev::after {
  transform: translate(-38%, -50%) rotate(-135deg) !important;
}

#lightbox.open > #photo-next::after {
  transform: translate(-62%, -50%) rotate(45deg) !important;
}

#lightbox.open > #photo-prev > *,
#lightbox.open > #photo-next > * {
  display: none !important;
}

/* ========================================================================
   VIDEO MODAL — authoritative cross-platform layout (2026-07-29)
   Photo-lightbox rules intentionally remain independent.
   ======================================================================== */
#video-modal.modal-overlay,
#video-modal.open.modal-original-mode,
#video-modal.open.modal-centered-mode {
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  padding:
    calc(env(safe-area-inset-top, 0px) + 54px)
    max(66px, env(safe-area-inset-right, 0px))
    calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, .70) !important;
  -webkit-backdrop-filter: blur(4px) brightness(.82) !important;
  backdrop-filter: blur(4px) brightness(.82) !important;
}

#video-modal.open > .modal-box,
#video-modal.open.modal-original-mode > .modal-box,
#video-modal.open.modal-centered-mode > .modal-box {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  width: min(1364px, calc(100vw - 132px)) !important;
  max-width: none !important;
  max-height: calc(100svh - 76px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  border: 1px solid rgba(155, 194, 211, .18) !important;
  border-radius: clamp(12px, 1.15vw, 18px) !important;
  background: #07090a !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .48) !important;
}

#video-modal.open .modal-video-wrap {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #000 !important;
  touch-action: manipulation !important;
}

#video-modal.open .modal-video-wrap::before,
#video-modal.open .modal-video-wrap::after {
  pointer-events: none !important;
}

#video-modal.open #modal-iframe {
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border: 0 !important;
  background: #000 !important;
}

#video-modal.media-preparing .modal-box,
#video-modal.media-preparing .modal-nav,
#video-modal.media-ready .modal-box,
#video-modal.media-ready .modal-nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#video-modal .modal-stage-loader {
  display: none !important;
}

#video-modal.open .modal-info,
#video-modal.open .modal-info.modal-info--stacked,
#video-modal.open.compact-visual-landscape .modal-info {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title category"
    "youtube category"
    "desc counter" !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 5px 24px !important;
  flex: 0 1 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 92px !important;
  max-height: var(--video-info-max-height, 190px) !important;
  padding: clamp(13px, 1.2vw, 18px) clamp(16px, 1.55vw, 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(12, 14, 15, .99), rgba(5, 7, 8, .99)) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(109, 188, 223, .5) transparent;
}

#video-modal #modal-title,
#video-modal .modal-info.modal-info--stacked #modal-title {
  grid-area: title !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  color: rgba(255, 255, 255, .96) !important;
  font-size: clamp(.78rem, .85vw, .98rem) !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

#video-modal .modal-youtube-stats {
  grid-area: youtube !important;
  display: block !important;
  margin: 0 !important;
  color: #72b8d7 !important;
  font-size: clamp(.65rem, .7vw, .78rem) !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
}

#video-modal .modal-youtube-stats[hidden] {
  display: none !important;
}

#video-modal #modal-desc,
#video-modal #modal-desc.modal-desc--stacked,
#video-modal #modal-desc.modal-desc--multiline,
#video-modal .modal-info.modal-info--stacked #modal-desc {
  grid-area: desc !important;
  display: block !important;
  min-width: 0 !important;
  margin: 1px 0 0 !important;
  overflow: visible !important;
  color: rgba(226, 230, 232, .67) !important;
  font-size: clamp(.69rem, .74vw, .84rem) !important;
  line-height: 1.52 !important;
  letter-spacing: .015em !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}

#video-modal #modal-desc:empty {
  display: none !important;
}

#video-modal .modal-category {
  grid-area: category !important;
  display: block !important;
  align-self: start !important;
  justify-self: end !important;
  margin: 0 !important;
  color: #72b8d7 !important;
  font-size: clamp(.66rem, .72vw, .82rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: .14em !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#video-modal .modal-category[hidden] {
  display: none !important;
}

#video-modal #video-counter {
  grid-area: counter !important;
  position: static !important;
  align-self: end !important;
  justify-self: end !important;
  transform: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

#video-modal #modal-desc a {
  color: #72b8d7 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

#video-modal .video-swipe-guide {
  display: none !important;
}

#video-modal.open > #modal-close {
  z-index: 30 !important;
  width: 44px !important;
  height: 44px !important;
}

#video-modal.open > #video-prev,
#video-modal.open > #video-next {
  z-index: 29 !important;
  display: grid !important;
  width: 52px !important;
  height: 70px !important;
}

#video-modal.open > #video-prev::after,
#video-modal.open > #video-next::after {
  width: 14px !important;
  height: 14px !important;
}

#video-modal.video-modal-entering > .modal-box {
  animation: video-modal-enter .36s cubic-bezier(.2, .84, .25, 1) both !important;
}

@keyframes video-modal-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.975);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  #video-modal.modal-overlay,
  #video-modal.open.modal-original-mode,
  #video-modal.open.modal-centered-mode {
    padding:
      calc(env(safe-area-inset-top, 0px) + 48px)
      max(58px, env(safe-area-inset-right, 0px))
      calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
  }

  #video-modal.open > .modal-box {
    max-height: calc(100svh - 56px) !important;
  }

  #video-modal.open .modal-info,
  #video-modal.open.compact-visual-landscape .modal-info {
    display: grid !important;
    min-height: 76px !important;
    max-height: var(--video-info-max-height, 104px) !important;
    padding: 9px 14px !important;
    gap: 3px 14px !important;
  }

  #video-modal #modal-title {
    font-size: clamp(.64rem, 1.45vh, .78rem) !important;
  }

  #video-modal #modal-desc,
  #video-modal .modal-youtube-stats,
  #video-modal .modal-category {
    font-size: clamp(.56rem, 1.25vh, .7rem) !important;
  }

  #video-modal.open > #video-prev,
  #video-modal.open > #video-next {
    width: 46px !important;
    height: 62px !important;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #video-modal.modal-overlay,
  #video-modal.open.modal-original-mode,
  #video-modal.open.modal-centered-mode {
    padding:
      calc(env(safe-area-inset-top, 0px) + 42px)
      4px
      calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  }

  #video-modal.open > .modal-box {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100svh - 58px) !important;
  }

  #video-modal.open .modal-info {
    min-height: 96px !important;
    max-height: var(--video-info-max-height, 220px) !important;
    padding: 12px 14px !important;
    gap: 4px 12px !important;
  }

  #video-modal #modal-title {
    font-size: .76rem !important;
  }

  #video-modal #modal-desc,
  #video-modal .modal-youtube-stats {
    font-size: .66rem !important;
  }

  #video-modal .modal-category {
    font-size: .62rem !important;
  }

  #video-modal.open > #video-prev,
  #video-modal.open > #video-next {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #video-modal.open > #modal-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  #video-modal .video-swipe-guide {
    display: flex !important;
    flex: 0 0 38px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    height: 38px !important;
    color: rgba(231, 243, 248, .82) !important;
    border-top: 1px solid rgba(124, 181, 207, .18) !important;
    background: rgba(22, 28, 31, .72) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }

  #video-modal .video-swipe-label {
    color: #72b8d7 !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
  }

  #video-modal .video-swipe-track {
    position: relative !important;
    display: block !important;
    width: 66px !important;
    height: 26px !important;
  }

  #video-modal .video-swipe-track::before,
  #video-modal .video-swipe-track::after {
    position: absolute !important;
    top: 50% !important;
    color: rgba(231, 243, 248, .5) !important;
    font-size: 15px !important;
    transform: translateY(-50%) !important;
  }

  #video-modal .video-swipe-track::before {
    left: 0 !important;
    content: "‹" !important;
  }

  #video-modal .video-swipe-track::after {
    right: 0 !important;
    content: "›" !important;
  }

  #video-modal .video-swipe-hand {
    position: absolute !important;
    top: 2px !important;
    left: calc(50% - 8px) !important;
    display: block !important;
    font-size: 17px !important;
    line-height: 1 !important;
    animation: video-swipe-hand 1.65s ease-in-out infinite alternate !important;
  }
}

@keyframes video-swipe-hand {
  from { transform: translateX(-16px) rotate(-8deg); }
  to { transform: translateX(16px) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  #video-modal.video-modal-entering > .modal-box,
  #video-modal .video-swipe-hand {
    animation: none !important;
  }
}

/* Video modal interaction/layout refinement: native player input only. */
#video-modal .video-swipe-guide,
#video-modal .swipe-hint,
#video-modal .carousel-swipe-surface,
#video-modal .carousel-gesture-hint {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#video-modal,
#video-modal .modal-video-wrap,
#video-modal #modal-iframe {
  touch-action: auto !important;
}

#video-modal.open .modal-info,
#video-modal.open .modal-info.modal-info--stacked,
#video-modal.open.compact-visual-landscape .modal-info {
  grid-template-rows: auto auto auto !important;
  min-height: 0 !important;
}

#video-modal .modal-category {
  padding: 5px 10px !important;
  border: 1px solid rgba(114, 184, 215, .58) !important;
  border-radius: 999px !important;
  background: rgba(21, 51, 65, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(114, 184, 215, .04) !important;
}

@media (orientation: portrait) and (max-width: 700px) {
  #video-modal.open > #video-prev,
  #video-modal.open > #video-next {
    display: grid !important;
    visibility: visible !important;
    width: 38px !important;
    height: 52px !important;
    opacity: .58 !important;
    pointer-events: auto !important;
    border-color: rgba(220, 237, 244, .34) !important;
    background: rgba(4, 8, 10, .5) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
  }

  #video-modal.open > #video-prev::after,
  #video-modal.open > #video-next::after {
    width: 11px !important;
    height: 11px !important;
    border-width: 2px !important;
  }
}

/* Final mobile photo information frame and Safari-stable modal controls. */
@media (max-width: 700px) {
  #lightbox.open > .lightbox-box {
    overflow: visible !important;
    background: #080c0e !important;
  }

  #lightbox .photo-modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    background: rgba(8, 12, 14, .98) !important;
    border-radius: 0 0 14px 14px !important;
  }

  #lightbox #photo-modal-title {
    display: block !important;
    margin: 0 !important;
    color: #f2f7f9 !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
  }

  #lightbox #lightbox-caption {
    display: block !important;
    max-height: 3.1em !important;
    margin: 3px 0 0 !important;
    overflow: hidden !important;
    color: rgba(220, 230, 235, .72) !important;
    font-size: .67rem !important;
    line-height: 1.35 !important;
    white-space: pre-line !important;
  }

  #lightbox #photo-counter {
    position: static !important;
    min-width: 58px !important;
    margin: 0 !important;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #video-modal.open > .modal-box,
  #lightbox.open > .lightbox-box { overflow: visible !important; }

  #video-modal.open > .modal-box > .modal-nav,
  #lightbox.open > .lightbox-box > .modal-nav {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50% !important;
    height: 42px !important;
    padding: 0 !important;
    color: rgba(241, 247, 250, .9) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    transform: none !important;
  }
  #video-modal.open > .modal-box > .modal-nav--prev,
  #lightbox.open > .lightbox-box > .modal-nav--prev { left: 0 !important; right: auto !important; }
  #video-modal.open > .modal-box > .modal-nav--next,
  #lightbox.open > .lightbox-box > .modal-nav--next { right: 0 !important; left: auto !important; }
  #video-modal.open > .modal-box > .modal-nav::after,
  #lightbox.open > .lightbox-box > .modal-nav::after { display: none !important; }

  #video-modal.open > .modal-box > .modal-close,
  #lightbox.open > .lightbox-box > .modal-close {
    position: absolute !important;
    z-index: 30 !important;
    top: -48px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (orientation: landscape) and (max-height: 620px) and (max-width: 1000px) {
  #lightbox.open > .lightbox-box { overflow: visible !important; }
  #lightbox.open > .lightbox-box > .modal-close {
    position: absolute !important;
    z-index: 30 !important;
    top: 0 !important;
    right: -52px !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Portrait phone navigation belongs to the existing translucent space below
   the modal frame; it is text on that surface, not another control bar. */
@media (orientation: portrait) and (max-width: 700px) {
  #video-modal.open > #video-prev,
  #video-modal.open > #video-next,
  #lightbox.open > #photo-prev,
  #lightbox.open > #photo-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    color: rgba(241, 247, 250, .9) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-family: inherit !important;
    font-size: .68rem !important;
    font-weight: 650 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
  }

  #video-modal.open > #video-prev::after,
  #video-modal.open > #video-next::after,
  #lightbox.open > #photo-prev::after,
  #lightbox.open > #photo-next::after {
    display: none !important;
  }

  #video-modal.open > #video-prev:disabled,
  #video-modal.open > #video-next:disabled,
  #lightbox.open > #photo-prev:disabled,
  #lightbox.open > #photo-next:disabled { opacity: .32 !important; }
}

/* Photo lightbox follows the video modal's visual language and control rules. */
#lightbox.modal-overlay {
  background: rgba(0, 0, 0, .70) !important;
  -webkit-backdrop-filter: blur(4px) brightness(.82) !important;
  backdrop-filter: blur(4px) brightness(.82) !important;
}

#lightbox.open > #photo-prev,
#lightbox.open > #photo-next {
  z-index: 29 !important;
  display: grid !important;
  width: 52px !important;
  height: 70px !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border: 1px solid rgba(210, 228, 236, .24) !important;
  border-radius: 6px !important;
  background: rgba(8, 11, 13, .62) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

#lightbox.open > #photo-prev::after,
#lightbox.open > #photo-next::after {
  width: 14px !important;
  height: 14px !important;
}

#lightbox.photo-modal-leaving > .lightbox-box {
  animation: video-modal-exit .36s cubic-bezier(.22, .61, .36, 1) both !important;
}

@media (orientation: landscape) and (max-height: 620px) {
  #lightbox.open {
    padding:
      calc(env(safe-area-inset-top, 0px) + 48px)
      max(58px, env(safe-area-inset-right, 0px))
      calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #lightbox.open > #photo-prev,
  #lightbox.open > #photo-next {
    width: 38px !important;
    height: 52px !important;
    border-color: rgba(220, 237, 244, .16) !important;
    background: rgba(4, 8, 10, .20) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #video-modal.modal-overlay,
  #video-modal.open.modal-original-mode,
  #video-modal.open.modal-centered-mode {
    padding:
      calc(env(safe-area-inset-top, 0px) + 40px)
      max(8px, env(safe-area-inset-right, 0px))
      max(4px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px)) !important;
  }

  #video-modal.open > .modal-box,
  #video-modal.open.modal-original-mode > .modal-box,
  #video-modal.open.modal-centered-mode > .modal-box {
    max-height: calc(100svh - 48px) !important;
  }

  #video-modal.open .modal-info,
  #video-modal.open.compact-visual-landscape .modal-info {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title category"
      "youtube counter" !important;
    grid-template-rows: auto auto !important;
    min-height: 62px !important;
    max-height: 64px !important;
    padding: 8px 12px !important;
    gap: 3px 12px !important;
    overflow: hidden !important;
  }

  #video-modal #modal-desc,
  #video-modal #modal-desc.modal-desc--stacked,
  #video-modal #modal-desc.modal-desc--multiline {
    display: none !important;
  }

  #video-modal #modal-title {
    overflow: hidden !important;
    font-size: .64rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  #video-modal .modal-youtube-stats {
    overflow: hidden !important;
    font-size: .56rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  #video-modal .modal-category {
    padding: 3px 7px !important;
    font-size: .54rem !important;
    line-height: 1.15 !important;
  }

  #video-modal #video-counter {
    font-size: .55rem !important;
    line-height: 1 !important;
  }

  #video-modal.open > #video-prev,
  #video-modal.open > #video-next {
    width: 34px !important;
    height: 46px !important;
    opacity: .56 !important;
    border-color: rgba(220, 237, 244, .3) !important;
    background: rgba(4, 8, 10, .48) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .18) !important;
  }

  #video-modal.open > #video-prev::after,
  #video-modal.open > #video-next::after {
    width: 10px !important;
    height: 10px !important;
    border-width: 2px !important;
  }

  #video-modal.open > #modal-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    opacity: .76 !important;
    background: rgba(4, 8, 10, .54) !important;
  }
}

/* One counter design across desktop, tablet, and mobile. */
#video-modal #video-counter,
#video-modal .modal-counter#video-counter {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 54px !important;
  height: 26px !important;
  padding: 0 10px !important;
  color: rgba(242, 247, 249, .9) !important;
  border: 1px solid rgba(210, 228, 236, .24) !important;
  border-radius: 999px !important;
  background: rgba(17, 22, 25, .7) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018) !important;
  font-size: .6rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

@media (max-width: 1000px) {
  #video-modal #video-counter,
  #video-modal .modal-counter#video-counter {
    min-width: 46px !important;
    height: 22px !important;
    padding: 0 7px !important;
    font-size: .5rem !important;
    letter-spacing: .06em !important;
  }
}

/* Keep the compact landscape modal hierarchy balanced: quieter category,
   slightly more legible page counter. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #video-modal .modal-category {
    padding: 3px 6px !important;
    font-size: .52rem !important;
  }

  #video-modal #video-counter,
  #video-modal .modal-counter#video-counter {
    min-width: 48px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-size: .54rem !important;
  }
}

/* Apply the same quiet-category / readable-counter balance on desktop. */
@media (min-width: 1001px) {
  #video-modal .modal-category {
    padding: 4px 9px !important;
    font-size: .78rem !important;
  }

  #video-modal #video-counter,
  #video-modal .modal-counter#video-counter {
    min-width: 58px !important;
    height: 28px !important;
    padding: 0 11px !important;
    font-size: .70rem !important;
  }
}

/* Give the page count the same legibility on iPad landscape. */
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1000px) {
  #video-modal #video-counter,
  #video-modal .modal-counter#video-counter {
    min-width: 52px !important;
    height: 26px !important;
    padding: 0 9px !important;
    font-size: .62rem !important;
  }
}

/* Mobile nav mirrors the native player's short-lived control visibility. */
#video-modal.open > #video-prev,
#video-modal.open > #video-next {
  transition: opacity .18s ease, visibility .18s ease !important;
}

/* The desktop page count needs stronger visual weight than the metadata. */
@media (min-width: 1001px) {
  #video-modal #video-counter,
  #video-modal .modal-counter#video-counter {
    min-width: 66px !important;
    height: 32px !important;
    padding: 0 13px !important;
    font-size: .84rem !important;
  }
}

/* Keep the player surface completely native: no custom cover, guide, or
   gesture layer sits above YouTube. Only the side navigation remains. */
#video-modal.open .modal-video-wrap::before,
#video-modal.open .modal-video-wrap::after,
#video-modal.open .video-swipe-guide,
#video-modal.open .swipe-hint,
#video-modal.open .carousel-swipe-surface,
#video-modal.open .carousel-gesture-hint,
#video-modal.open .modal-stage-loader {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#video-modal.open > #video-prev,
#video-modal.open > #video-next {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: none !important;
}

/* Portrait phones retain the in-frame arrows, but make their button plates
   quiet enough that the video remains dominant. */
@media (orientation: portrait) and (max-width: 700px) {
  #video-modal.open > #video-prev,
  #video-modal.open > #video-next {
    border-color: rgba(220, 237, 244, .16) !important;
    background: rgba(4, 8, 10, .20) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}