/* ===== Consolidated desktop stylesheet ===== */
/* ================================================================
   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;
  --ff-display: 'Noto Sans', 'Noto Sans KR', sans-serif;

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

/* Compact navigation rail: below the full-menu capacity, keep the brand,
   language picker, and menu button in three actual layout columns. Earlier
   compact rules independently centered/absolutely positioned the latter two,
   which allowed them to collide with the slogan at intermediate widths. */
@container bokah-nav (max-width: 1319px) {
  #main-nav .nav-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content max-content !important;
    grid-template-areas: "brand language menu" !important;
    align-items: center !important;
    column-gap: clamp(7px, 1.4vw, 14px) !important;
    min-height: 60px !important;
  }

  #main-nav .nav-logo {
    grid-area: brand !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
  }

  #main-nav .language-switcher {
    grid-area: language !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  #main-nav .nav-toggle {
    grid-area: menu !important;
    position: static !important;
    display: flex !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* At phone widths, the flag icons retain two clearly labelled, accessible
   language choices while freeing enough of the rail for the full brand lockup. */
@media (max-width: 420px) and (orientation: portrait) {
  #main-nav .language-switcher a > span { display: none !important; }
  #main-nav .language-switcher { gap: 3px !important; padding-inline: 5px !important; }
  #main-nav .language-switcher .language-divider { font-size: .55rem !important; }
}

/* Browser-zoom-safe counterpart to the container rule above. This is last on
   purpose: some compact browser layouts resolve the legacy container styles
   after the fixed nav has been promoted to its own layer. */
@media (max-width: 1319px) {
  #main-nav .nav-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content max-content !important;
    grid-template-areas: "brand language menu" !important;
    align-items: center !important;
    column-gap: clamp(7px, 1.4vw, 14px) !important;
    min-height: 60px !important;
  }
  #main-nav .nav-logo { grid-area: brand !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding-right: 0 !important; }
  #main-nav .logo-sub,
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub { display: block !important; visibility: visible !important; }
  #main-nav .language-switcher { grid-area: language !important; position: static !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; overflow: visible !important; }
  #main-nav .nav-toggle { grid-area: menu !important; position: static !important; display: flex !important; margin: 0 !important; transform: none !important; }
}

/* The smallest portrait phones keep the full brand copy on its own header
   row; language and menu controls move beneath it rather than compressing
   the slogan into unreadable fragments. */
@media (max-width: 359px) and (orientation: portrait) {
  #main-nav .nav-inner {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas: "brand brand" "language menu" !important;
    row-gap: 5px !important;
    min-height: 94px !important;
    padding-block: 7px !important;
  }
  #main-nav .nav-logo { width: 100% !important; }
  #main-nav .language-switcher { justify-self: end !important; }
  #main-nav .nav-toggle { justify-self: end !important; }
}

/* Final mobile sound size must remain the last portrait authority. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #showreel .showreel-player-stack .showreel-sound-toggle {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 39px !important;
    min-height: 39px !important;
  }
}

/* Keep desktop wheel movement on a cheaper compositing path.  This state is
   applied for the short burst of native scrolling only, then the editorial
   motion returns as soon as the wheel settles. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.is-wheel-scrolling #main-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  html.is-wheel-scrolling #bokeh-canvas .bokeh {
    animation-play-state: paused !important;
  }

  html.is-wheel-scrolling .video-card,
  html.is-wheel-scrolling .photo-card,
  html.is-wheel-scrolling .about-bio-block,
  html.is-wheel-scrolling .about-right,
  html.is-wheel-scrolling .bokah-brand-panel,
  html.is-wheel-scrolling .contact-profile,
  html.is-wheel-scrolling .contact-form {
    transition: none !important;
  }
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #cinematography .video-card.reveal.visible:hover,
#photography .photo-card.reveal.visible:hover{
    transform: translate3d(0, -7px, 0) scale(1.008) !important;
  }
}

/* ── 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 {
  position: relative;
  isolation: isolate;
}

#cinematography::before,
#photography::before,
#ai-visuals::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 {
  margin-bottom: clamp(28px, 3vw, 42px);
}

#cinematography .section-title,
#photography .section-title,
#ai-visuals .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 {
  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 {
  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 {
  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,
#photography .photo-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,
#photography .photo-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 {
  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,
#photography .photo-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);
  }
}



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;
}

/* The navigation is structural chrome, not async content. Keep it paintable
   before settings/i18n finish so a fast tab restore cannot show the hero alone. */
html:not(.chrome-ready) .hero-intro {
  visibility: hidden !important;
  opacity: 0 !important;
}
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 (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);
}



.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;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #bokeh-canvas .bokeh { mix-blend-mode: screen; }
}

@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: translate3d(0, 0, 0) rotate(0deg) scale(.98);
  }
  11% {
    opacity: calc(var(--bk-op) * .48);
    transform: translate3d(calc(var(--sway-x) * .12), -18px, 0) rotate(calc(var(--rot) * .08)) scale(1.01);
  }
  25% {
    opacity: calc(var(--bk-op) * .82);
    transform: translate3d(calc(var(--sway-x) * .36), -58px, 0) rotate(calc(var(--rot) * .22)) scale(1.045);
  }
  47% {
    opacity: calc(var(--bk-op) * .62);
    transform: translate3d(calc(var(--sway-x2) * -.20), -132px, 0) rotate(calc(var(--rot) * .42)) scale(1.075);
  }
  68% {
    opacity: calc(var(--bk-op) * .92);
    transform: translate3d(calc(var(--sway-x) * .42), -212px, 0) rotate(calc(var(--rot) * .64)) scale(1.055);
  }
  84% {
    opacity: calc(var(--bk-op) * .68);
    transform: translate3d(calc(var(--sway-x2) * .12), -286px, 0) rotate(calc(var(--rot) * .84)) scale(1.01);
  }
  94% {
    opacity: calc(var(--bk-op) * .42);
    transform: translate3d(calc(var(--sway-x2) * .24), -326px, 0) rotate(calc(var(--rot) * 1.02)) scale(.97);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--sway-x2) * .30), -350px, 0) rotate(calc(var(--rot) * 1.12)) scale(.94);
  }
}

@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);
  transition: background var(--t) var(--ease), border-color var(--t);
  /* background/border-bottom/backdrop-filter: see final rule (~line 20220) which is !important and wins the cascade. */
}

.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-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-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 ──────────────────────────────────────── */






/* ── 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{
  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;
}





/* ================================================================
   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);
}





/* 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;
}





/* ================================================================
   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-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
   ================================================================ */























/* ================================================================
   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;
  transform: scale(1.04);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,.76,.18,1);
}

.contact-photo-wrap img.loaded {
  opacity: 1;
  transform: scale(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-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);
  /* The trailing whitespace-only node forms a final line box after the
     footer. Pull it into this surface so the document ends on the footer. */
  margin-bottom: -1lh !important;
  text-align: center;
}

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

/* Brand name */


/* 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-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-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; }



/* ── 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: 0;
}

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

.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 {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  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 .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);
}

.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 strong {
  color: var(--gold);
  font-weight: 800;
}





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

.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 (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{
    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;
  overscroll-behavior: contain;
}

.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 (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);
  }
}



/* ================================================================
   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);
  }
}



/* ================================================================
   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 (hover: none) and (pointer: coarse), (any-pointer: coarse) {
  body,
  .portfolio-section,
  .section-showreel,
  .section-about,
  .section-contact,
  .video-card,
  .photo-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{
    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,
#ai-dual-layout.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,
#ai-dual-layout.reveal.visible{
  opacity: 1;
  transform: translate3d(0,0,0);
}



#ai-visuals .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,
#ai-dual-layout.reveal{
    transform: translate3d(0, 10px, 0);
    transition-duration: .52s, .58s;
  }
}

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

/* Final mobile portrait nav visibility pass. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo { max-width: calc(100vw - 240px) !important; padding-right: 0 !important; }
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub {
    display: block !important;
    visibility: visible !important;
    font-size: .42rem !important;
    letter-spacing: .045em !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  html body #main-nav .language-switcher {
    max-width: none !important;
    overflow: visible !important;
    gap: 2px !important;
  }
  html body #main-nav .language-switcher a {
    flex: 0 0 auto !important;
    padding-inline: 5px !important;
    font-size: .54rem !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;
}















.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); }






/* Hardware-detected low-resolution Samsung tablets can report a desktop-like
   viewport. Keep the duo composition inside the physical screen regardless. */






@media (orientation:portrait) {
  
}

/* Phone portrait: preserve two useful thumbnails per row without horizontal
   overflow. Phone landscape: compact vertical chrome for short viewports. */



/* ================================================================
   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); }

/* ================================================================
   DESKTOP EDITORIAL MOTION
   A more deliberate reveal rhythm for large, pointer-driven screens.
   Kept outside the touch rules so mobile keeps its lighter compositor path.
   ================================================================ */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .reveal {
    transform: translate3d(0, 34px, 0) scale(.985);
    transition:
      opacity .82s ease,
      transform .92s cubic-bezier(.16,.76,.18,1);
  }

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

  .hero-intro.reveal.visible .hero-kicker,
  .hero-intro.reveal.visible .hero-title,
  .hero-intro.reveal.visible .hero-role,
  .hero-intro.reveal.visible .hero-actions,
  .hero-intro.reveal.visible .hero-social-links {
    animation: bmk-desktop-rise .86s cubic-bezier(.16,.76,.18,1) both;
  }

  .hero-intro.reveal.visible .hero-title { animation-delay: .08s; }
  .hero-intro.reveal.visible .hero-role { animation-delay: .18s; }
  .hero-intro.reveal.visible .hero-actions { animation-delay: .28s; }
  .hero-intro.reveal.visible .hero-social-links { animation-delay: .38s; }

  .section-header.reveal.visible .section-title,
  .section-header.reveal.visible + .cat-tabs {
    animation: bmk-desktop-rise .78s cubic-bezier(.16,.76,.18,1) both;
  }

  .section-header.reveal.visible .section-title { animation-delay: .05s; }
  
  
  .section-header.reveal.visible + .cat-tabs { animation-delay: .28s; }

  .about-right.reveal.visible .skill-item {
    animation: bmk-desktop-card-in .78s cubic-bezier(.16,.76,.18,1) both;
  }

  .about-right.reveal.visible .skill-item:nth-child(2) { animation-delay: .08s; }
  .about-right.reveal.visible .skill-item:nth-child(3) { animation-delay: .16s; }
  .about-right.reveal.visible .skill-item:nth-child(4) { animation-delay: .24s; }
  .about-right.reveal.visible .skill-item:nth-child(5) { animation-delay: .32s; }

  .contact-inner.reveal.visible .contact-profile,
  .contact-inner.reveal.visible .contact-form {
    animation: bmk-desktop-card-in .9s cubic-bezier(.16,.76,.18,1) both;
  }

  .contact-inner.reveal.visible .contact-form { animation-delay: .14s; }

  .contact-inner.reveal.visible .contact-links .contact-btn {
    animation: bmk-desktop-card-in .6s cubic-bezier(.16,.76,.18,1) both;
    animation-delay: .12s;
  }

  .contact-inner.reveal.visible .contact-links .contact-btn:nth-child(2) { animation-delay: .16s; }
  .contact-inner.reveal.visible .contact-links .contact-btn:nth-child(3) { animation-delay: .2s; }
  .contact-inner.reveal.visible .contact-links .contact-btn:nth-child(4) { animation-delay: .24s; }
  .contact-inner.reveal.visible .contact-links .contact-btn:nth-child(5) { animation-delay: .28s; }
  .contact-inner.reveal.visible .contact-links .contact-btn:nth-child(6) { animation-delay: .32s; }
  .contact-inner.reveal.visible .contact-links .contact-btn:nth-child(7) { animation-delay: .36s; }
  .contact-inner.reveal.visible .contact-links .contact-btn:nth-child(8) { animation-delay: .4s; }
  .contact-inner.reveal.visible .contact-links .contact-btn:nth-child(9) { animation-delay: .44s; }

  #main-footer.reveal.visible .footer-inner {
    animation: bmk-desktop-rise .9s cubic-bezier(.16,.76,.18,1) .08s both;
  }

  .video-card,
  .photo-card{
    transition:
      transform .62s cubic-bezier(.16,.76,.18,1),
      border-color .42s ease,
      box-shadow .62s cubic-bezier(.16,.76,.18,1);
  }

  .video-card:hover,
  .video-card:focus-within,
  .photo-card:hover,
  .photo-card:focus-within{
    transform: translateY(-7px);
    box-shadow: 0 30px 76px rgba(0,0,0,.36), 0 0 0 1px rgba(106,176,212,.1), 0 0 32px rgba(106,176,212,.06);
  }

  .about-bio-block,
  .about-right,
  .bokah-brand-panel,
  .contact-profile,
  .contact-form {
    transition: border-color .5s ease, box-shadow .65s cubic-bezier(.16,.76,.18,1), transform .65s cubic-bezier(.16,.76,.18,1);
  }

  .about-bio-block:hover,
  .about-right:hover,
  .bokah-brand-panel:hover,
  .contact-profile:hover,
  .contact-form:hover {
    border-color: rgba(106,176,212,.24);
    box-shadow: 0 24px 70px rgba(0,0,0,.24), 0 0 0 1px rgba(106,176,212,.04);
    transform: translateY(-3px);
  }
}

@keyframes bmk-desktop-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bmk-desktop-card-in {
  from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.975); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* 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{
    contain: layout paint;
    transform: translateZ(0);
    box-shadow: 0 10px 26px rgba(0,0,0,.2);
  }

  .video-card-thumb,
  .photo-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{
    transform: translateZ(0) !important;
    filter: none !important;
  }

  .video-card-overlay,
  .photo-card-overlay{
    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);
  }

  
}

/* ================================================================
   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; }
}



/* 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; }
  
  .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;
  }

  

  

  

  .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-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; }

  

  /* 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{ grid-template-columns: 1fr 1fr; gap: 10px; }

  
  
  

  /* 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: 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 (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,
  #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-height: 768px) and (orientation: landscape) {
  #photography .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 (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. */


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

#cinematography::before,
#ai-visuals::before,
#photography::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;
}



/* Final mobile tuning */








/* Final phone carousel information stack is owned by mobile-portrait.css. */


/* Desktop body-copy contract: the brand-story wrapper is legacy markup with
   nested paragraphs, so give the wrapper and its generated paragraphs the
   same body size as the other reading-copy surfaces. */
@media (min-width: 1200px) {
  html body #about #brand-story-body-1,
  html body #about #brand-story-body-1 > p {
    font-size: var(--section-body-size, var(--fs-body, .9rem)) !important;
  }
}

/* Final open-photo-modal authority: the desktop lightbox has a more specific
   readability rule, so keep this requested logo treatment stronger than it. */
#lightbox.open .photo-watermark-lightbox .photo-watermark-logo {
  width: clamp(33px, 3.97vw, 60px) !important;
  opacity: .7 !important;
}


/* Contact panels should not change geometry as they enter the viewport.
   Keep the fade, but remove the stacked reveal/hover transforms that make the
   desktop card appear to jump when the pointer lands over it. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #contact .contact-inner.reveal,
  #contact .contact-inner.reveal.visible,
  #contact .contact-inner.reveal.visible .contact-profile,
  #contact .contact-inner.reveal.visible .contact-form,
  #contact .contact-profile:hover,
  #contact .contact-form:hover {
    transform: none !important;
  }

  #contact .contact-inner.reveal.visible .contact-profile,
  #contact .contact-inner.reveal.visible .contact-form {
    animation: none !important;
  }

  /* Footer should not change geometry as it enters the viewport either —
     same principle as the contact panels above. Keep the fade, remove the
     rise transform so the footer doesn't appear to shift position on load. */
  #main-footer.reveal,
  #main-footer.reveal.visible,
  #main-footer.reveal.visible .footer-inner {
    transform: none !important;
  }

  #main-footer.reveal.visible .footer-inner {
    animation: none !important;
  }
}

/* Photo-modal logo refinement: quieter opacity and approximately 15% smaller
   in every responsive layout, without changing the photo frame or metadata. */
.photo-watermark-lightbox .photo-watermark-logo {
  width: clamp(41px, 4.93vw, 75px) !important;
  opacity: .4 !important;
}

@media (min-width: 1201px) {
  .photo-watermark-lightbox .photo-watermark-logo {
    width: clamp(35px, 4.22vw, 64px) !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);
}

















/* 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;
  }
}





/* 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. */


/* Portrait touch modals: keep controls attached to media, not the browser edge. */

#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; }




/* 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; }



#showreel .hero-title { font-size: var(--section-heading-size, clamp(2.8rem, 8vw, 7rem)) !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 #brand-story-label,
#about .label-tag,
#about .skill-name{ 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 {
  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 {
  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-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 .cat-tab,
#ai-visuals .cat-select,
#ai-visuals .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 .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 .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-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); }

/* Modal-only watermark: transparent text layer aligned to the displayed photo. */
.photo-watermark-lightbox {
  position: absolute;
  display: none;
  z-index: 2;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 14px 13px;
  box-sizing: border-box;
  color: #fff;
  font-family: 'Noto Sans', 'Noto Sans KR', sans-serif;
  font-size: clamp(0.88rem, 1.08vw, 1.08rem);
  font-weight: 400;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-align: right;
  background: none;
  -webkit-text-stroke: .72px rgba(0,0,0,.94);
  paint-order: stroke fill;
  text-shadow:
    0 1px 4px rgba(0,0,0,.78),
    0 0 4px rgba(0,0,0,.55);
  pointer-events: none;
}

.photo-watermark-lightbox .photo-watermark-logo {
  position: absolute;
  top: 14px;
  left: 14px;
  display: block;
  width: clamp(48px, 5.8vw, 88px);
  height: auto;
  opacity: .65;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.72));
  pointer-events: none;
}

.photo-watermark-lightbox .photo-watermark-copy {
  display: block;
}



@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,
  .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{
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, opacity;
  }

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

  .video-card.reveal,
.photo-card.reveal,
#cinematography .video-card.reveal,
#photography .photo-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{
    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;
  }

  
}

@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (max-width: 1366px) {
  .video-card.reveal,
  .photo-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{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Final mobile-portrait media layout: keep close and counter close to the frame. */


/* 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;
  }
}



/* Final portrait pass: align controls to the media itself, not the full overlay. */


/* 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 (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;
  }

  
}

/* Cascade lock: prevents legacy responsive rules from reintroducing gallery
   whitespace on a touch landscape viewport. */
html.is-compact-landscape-gallery #cinematography.portfolio-section,
html.is-compact-landscape-gallery #photography.portfolio-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: max-content max-content max-content max-content !important;
  align-content: start !important;
  justify-content: stretch !important;
  align-items: start !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  /* Compact landscape uses its own higher-specificity layout lock. */
  padding: 72px 28px 44px !important;
}
html.is-compact-landscape-gallery #cinematography > .gallery-title-header,
html.is-compact-landscape-gallery #photography > .gallery-title-header {
  grid-column: 1 !important;
  grid-row: 1 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  align-self: start !important;
}

/* Direct mobile/tablet-landscape gallery layout.
   This class is set from the real visual viewport in main.js.  It deliberately
   makes the section a one-column grid: the header, select and gallery occupy
   consecutive auto-sized rows, so no inherited flex/grid height can create a
   blank band between them. */
html.is-compact-landscape-gallery #cinematography.portfolio-section,
html.is-compact-landscape-gallery #photography.portfolio-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: max-content max-content max-content max-content !important;
  align-content: start !important;
  justify-content: stretch !important;
  align-items: start !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  /* Keep the duplicate compact-layout lock aligned with the title spacing. */
  padding: 72px 28px 44px !important;
}

html.is-compact-landscape-gallery #cinematography > .gallery-title-header,
html.is-compact-landscape-gallery #photography > .gallery-title-header {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  align-self: start !important;
}

html.is-compact-landscape-gallery #cinematography > .cat-tabs,
html.is-compact-landscape-gallery #photography > .cat-tabs {
  display: none !important;
}

html.is-compact-landscape-gallery #cinematography > .cat-select,
html.is-compact-landscape-gallery #photography > .cat-select {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: block !important;
  justify-self: start !important;
  align-self: start !important;
  width: 174px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 0 16px !important;
  padding: 0 30px 0 12px !important;
}

html.is-compact-landscape-gallery #cinematography > .video-grid,
html.is-compact-landscape-gallery #photography > .photo-grid {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: start !important;
}

html.is-compact-landscape-gallery #cinematography > .pagination,
html.is-compact-landscape-gallery #photography > .pagination {
  grid-column: 1 !important;
  grid-row: 4 !important;
  align-self: start !important;
  margin: 14px 0 0 !important;
}

/* Touch browsers may expose a wide CSS viewport in landscape (for example
   high-resolution iPad/Safari). Use the short landscape height as the reliable
   signal so desktop-sized padding cannot create a large empty panel. */
@media (orientation: landscape) and (max-height: 1200px) and (any-pointer: coarse) {
  #cinematography.portfolio-section,
#photography.portfolio-section {
    padding-top: 36px !important;
    padding-bottom: 44px !important;
    min-height: 0 !important;
  }

  #cinematography .section-header,
#photography .section-header {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #cinematography .cat-tabs,
#photography .cat-tabs {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #cinematography .cat-select,
#photography .cat-select {
    display: block !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 0 14px !important;
  }
}

/* Stable landscape baseline: use the desktop section flow and only scale its
   density for short touch viewports. No alternate DOM geometry is introduced. */
@media (orientation: landscape) and (max-height: 1200px) and (any-pointer: coarse) {
  #cinematography.portfolio-section,
#photography.portfolio-section {
    padding: 48px 28px 56px !important;
    min-height: 0 !important;
  }

  #cinematography .section-header,
#photography .section-header {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  #cinematography .cat-tabs,
#photography .cat-tabs {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #cinematography .cat-select,
#photography .cat-select {
    display: block !important;
    width: 174px !important;
    min-height: 38px !important;
    margin: 0 0 16px !important;
  }

  #cinematography .video-grid,
#photography .photo-grid {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
  }
}

/* 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 .pagination {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #cinematography .video-grid,
#photography .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{
    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-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-actions { animation-delay: 0.36s; }

.section-header.reveal.visible .section-title {
  animation: bmk-rise-soft 0.62s 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{
  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,
  .video-card.reveal.visible:hover,
  .photo-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,
  .video-card.reveal.visible:active,
  .photo-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. */


/* Confirmed taps get one short feedback pulse; scroll gestures never add this
   class because browsers suppress click after a drag/scroll gesture. */


/* Mobile video cards use one stable raster layer. The full-card overlay no
   longer paints; only the centered play button remains interactive/visible. */


/* 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-actions {
    animation-duration: 0.52s;
  }

  .section-header.reveal.visible .section-title{
    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,
  .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);
}

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

.section-header::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{
  text-shadow: 0 0 22px rgba(106,176,212,0.12);
}

.video-card,
.photo-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{
  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,
.video-card:focus-visible::before,
.photo-card:focus-visible::before{
  opacity: 0.54;
}



.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,
  .video-card.reveal.visible:hover,
  .photo-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{
  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-actions { gap: 10px; margin-bottom: 0; }
.hero-btn { min-height: 50px; padding: 13px 24px; border-radius: 999px; }

.hero-btn-secondary { color: rgba(255,255,255,0.76); }





.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);
}





/* ================================================================
   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: flex-start;
  text-align: left;
  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: left; }
.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 0 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: left; white-space: nowrap; }

.contact-copy-body {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 28px;
  text-align: left;
  text-align-last: left;
  text-justify: none;
  line-height: 1.9;
  color: rgba(232,232,232,0.68);
}
#contact .contact-copy-body {
  font-size: var(--section-body-size, var(--fs-body, .96rem)) !important;
}
#contact .contact-copy-body > p {
  margin: 0 0 1.05em;
}
#contact .contact-copy-body > p:last-child {
  margin-bottom: 0;
}
#contact .contact-role {
  text-align: left !important;
  text-align-last: left !important;
  font-size: clamp(.74rem, calc(var(--section-body-size, .96rem) * .86), .88rem) !important;
}
.contact-links { justify-content: flex-start; 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; }




/* ================================================================
   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-radius: 0 0 12px 12px;
  background: transparent;
  box-shadow: none;
}
.about-inner > .bokah-brand-panel::before {
  display: none;
}




/* 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;
  }
}



#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;
}

/* Touch tablets in landscape can report a desktop-sized CSS width (1024px+),
   which otherwise activates the desktop-nav rule above and hides the button.
   Keep the hamburger interaction for the actual touch-tablet profile. */
@media (orientation: landscape) and (min-width: 1024px) {
  html.is-touch-tablet #main-nav .nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 200 !important;
  }

  html.is-touch-tablet #main-nav .nav-links {
    display: flex !important;
    position: fixed !important;
    top: var(--nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(5, 5, 5, .95) !important;
  }

  html.is-touch-tablet #main-nav .nav-links.open {
    max-height: min(56svh, 320px) !important;
    padding: 5px 0 9px !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    pointer-events: auto !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 > .modal-nav--prev,
#lightbox > .modal-nav--prev {
  grid-area: previous !important;
}

#video-modal > .modal-nav--next,
#lightbox > .modal-nav--next {
  grid-area: next !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;
  }
}

}

/* 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;
}

/* Desktop photo modal parity: use the same centered frame, outer controls,
   close-button placement, and information-panel treatment as video-modal. */
@media (min-width: 1201px) {
  #lightbox.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;
  }

  #lightbox.open > .lightbox-box {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !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;
    background: #080b0d !important;
    border: 1px solid rgba(203, 230, 241, .14) !important;
    border-radius: 16px !important;
  }

  #lightbox.open > .lightbox-box > #lightbox-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100svh - 320px) !important;
    object-fit: contain !important;
    background: #050607 !important;
  }

  #lightbox.open > .lightbox-box > .photo-modal-info {
    flex: 0 0 auto !important;
    min-height: 116px !important;
    box-sizing: border-box !important;
    padding: 24px 28px 22px !important;
    background: #080b0d !important;
  }

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

  #lightbox.open > #lightbox-close {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    top: max(calc(env(safe-area-inset-top, 0px) + 8px), calc(50% - min(1240px, calc(100vw - 152px), calc(177.777svh - 320px)) / 2 - 66px)) !important;
    right: max(14px, calc((100vw - min(1240px, calc(100vw - 152px), calc(177.777svh - 320px))) / 2)) !important;
    bottom: auto !important;
    left: auto !important;
  }

  #lightbox.open > #photo-prev,
  #lightbox.open > #photo-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 > .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-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;
  }
}

/* Exact compact mobile-landscape counterpart of the video information bar.
   Keep these values in lockstep with #video-modal above. */




/* Phone landscape uses the same deliberate type scale as portrait instead of
   shrinking each photo-metadata element independently. */


/* Final compact landscape parity override: this must remain after every
   legacy lightbox rule. */


/* Final mobile photo metadata layout: a single video-style information row.
   Keep this at EOF so legacy responsive rules cannot restore a second row. */



/* Mobile photo metadata matches the video information bar: one deliberate
   line only.  The counter follows the title, while the category remains
   anchored at the far edge. */





@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;
  }

  }


@media (prefers-reduced-motion: reduce) {
  #video-modal > .modal-box,
  #lightbox > .lightbox-box {
    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);
}











/* 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);
}





/* Phone landscape: prevent tablet rules from stretching the About portrait. */


/* iPad/tablet portrait: align hero media, preserve round portrait, prevent role clipping. */


/* iPad portrait video modal: override phone top anchoring and center in the safe viewport. */


/* iPad portrait photo lightbox: use the same centered safe-area placement. */


/* iPad portrait: prevent viewport minimum-height from creating space below the footer. */


/* Final editorial copy alignment: natural left rag across every platform. */

#about .about-bio,
#about .about-bio p,
#about .bokah-brand-copy,
#about .bokah-brand-copy > p:not(.label-tag),
#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; }
}



#about .about-bio p,
#about .bokah-brand-copy > p:not(.label-tag){
  line-height: 1.82;
  text-wrap: pretty;
}



/* 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; }

/* Contact media scale: preserve the existing layout footprint while enlarging
   the visible profile photo and social controls by 10%. */
#contact .contact-photo-wrap { transform: scale(1.1); transform-origin: center; }
#contact .contact-btn { transform: scale(1.1); transform-origin: center; }

@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){
    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{
    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 (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{
    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{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}



/* 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; }



/* 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. */


/* 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;
}

/* 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;
}



@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{
    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{
    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){
  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;
}



#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; }
}



/* Tablet: slightly tighter measure and spacing. */


/* Phone: distribute tiny amounts across characters instead of opening large word gaps. */

.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{ 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{ 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 profile copy: a calm editorial measure with deliberate vertical rhythm. */






/* 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. */


/* Brand story body uses the exact same responsive type size as the About bio. */
#about .bokah-brand-copy p{
  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(.86rem, 1vw, .96rem);
  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;
  }
}


#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. */


/* Compact screens retain the intentional two-row logo lockup. */


/* 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;
}



#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 .showreel-context-shield {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

#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 .6s ease, visibility 0s linear .6s;
}
#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 (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 .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;
}





@media (hover: none) and (pointer: coarse) {
  #showreel .native-progress {
    height: 44px;
    min-height: 44px;
    margin-block: -20px;
  }
  
  
}





/* 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);
}



/* 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: 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-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-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{ 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 {
  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 {
  padding-inline: 0 !important;
  border-inline: 0 !important;
  line-height: 1 !important;
  gap: 0 !important;
}

#cinematography .section-title-icon,
#photography .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 {
  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-title::after,
#photography .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 {
    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 .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{
    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 .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. */


/* 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 > .modal-nav--prev,
#lightbox > .modal-nav--prev { grid-area: previous !important; }

#video-modal > .modal-nav--next,
#lightbox > .modal-nav--next { grid-area: next !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;
  }
}



/* 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 > .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 > .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;
}

@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 > .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;
  }
}






/* 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;
}



/* 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;
}



/* 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. */


/* 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;
  }
}

/* iPad and Samsung tablets deliberately use the desktop modal system.
   Only the portrait frame width changes to preserve the available height. */
html.is-touch-tablet #video-modal.open,
html.is-touch-tablet #lightbox.open {
  padding: 54px 58px 14px !important;
}
html.is-touch-tablet #video-modal.open > .modal-box,
html.is-touch-tablet #lightbox.open > .lightbox-box {
  width: min(1364px, calc(100vw - 132px)) !important;
  max-width: none !important;
  max-height: calc(100svh - 76px) !important;
}
html.is-touch-tablet #lightbox.open > .lightbox-box > .photo-modal-info {
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 13px 20px !important;
  gap: 12px !important;
}
@media (orientation: portrait) {
  html.is-touch-tablet #video-modal.open > .modal-box,
  html.is-touch-tablet #lightbox.open > .lightbox-box {
    width: min(944px, calc(100vw - 104px), calc((100svh - 150px) * 16 / 9)) !important;
  }
}

/* Responsive safety layer — preserve the existing art direction and only
   prevent clipping, overflow, and navigation/category collisions. */
#cinematography > *,
#photography > *,
#showreel > *,
#about > *,
#contact > * { min-width: 0; }

#video-grid-all,
#photo-grid-all,
#video-pagination,
#photo-pagination,
#cinematography .cat-tabs,
#photography .cat-tabs,
#cinematography .cat-select,
#photography .cat-select { max-width: 100%; }

@media (min-width: 1024px) and (orientation: landscape) {
  /* Desktop and roomy tablet landscape: use the horizontal navigation. */
  #main-nav .nav-toggle { display: none !important; }
  #main-nav .nav-links {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    max-height: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
  }
}



@media (min-width: 1200px) {
  /* Category tabs are reserved for genuinely roomy screens. */
  #cinematography .cat-tabs,
  #photography .cat-tabs { display: flex !important; }
  #cinematography .cat-select,
  #photography .cat-select { display: none !important; }
}



/* Keep the desktop tablet modal system fixed through orientation changes. */
#video-modal.tablet-desktop-modal.open {
  padding: 54px 58px 14px !important;
}
#video-modal.tablet-desktop-modal.open > .modal-box {
  width: min(1364px, calc(100vw - 132px)) !important;
  max-width: none !important;
  max-height: calc(100svh - 76px) !important;
}
@media (orientation: portrait) {
  #video-modal.tablet-desktop-modal.open > .modal-box {
    width: min(944px, calc(100vw - 104px), calc((100svh - 150px) * 16 / 9)) !important;
    max-height: calc(100svh - 104px) !important;
  }
}

/* Restore native page scrolling on touch layouts.  This is deliberately
   limited to non-desktop widths and does not affect modal scroll locking,
   which is controlled by the existing open/close classes in JavaScript. */
@media (max-width: 1199px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    position: relative !important;
    touch-action: pan-y !important;
  }

  #bokeh-canvas { pointer-events: none !important; }
}

/* Portrait tablets center the media frame itself; below-navigation is fixed
   independently and must not bias the flex-centering area downward. */
@media (orientation: portrait) {
  html.is-touch-tablet #video-modal.open,
  html.is-touch-tablet #lightbox.open {
    padding: 44px 58px !important;
  }
}

/* Portrait tablet photos use the full visual width because navigation is below. */
@media (orientation: portrait) {
  html.is-touch-tablet #lightbox.open > .lightbox-box {
    width: min(944px, calc(100vw - 16px), calc((100svh - 136px) * 16 / 9)) !important;
  }
}

/* Photo metadata uses the same title/category/counter grid as video-modal. */
@media (min-width: 1201px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title category" ". counter" !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    min-height: 92px !important;
    max-height: 92px !important;
    padding: clamp(13px, 1.2vw, 18px) clamp(16px, 1.55vw, 24px) !important;
    background: linear-gradient(180deg, rgba(12, 14, 15, .99), rgba(5, 7, 8, .99)) !important;
  }
  #lightbox.open .photo-modal-copy { display: contents !important; }
  #lightbox.open #photo-modal-title { grid-area: title !important; align-self: start !important; }
  #lightbox.open #lightbox-caption { display: none !important; }
  #lightbox.open #photo-modal-category {
    grid-area: category !important;
    justify-self: end !important;
    display: inline-flex !important;
    padding: 4px 9px !important;
    color: #72b8d7 !important;
    border: 1px solid rgba(114, 184, 215, .58) !important;
    border-radius: 999px !important;
    background: rgba(21, 51, 65, .18) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
  }
  #lightbox.open #photo-counter { grid-area: counter !important; align-self: end !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 {
    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 .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{
    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. */


/* 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: 0 !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{
    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-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-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.35 !important;
    padding-bottom: 1px !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;
  }
  html body #main-nav .logo-sub-ko,
  html body #main-nav .logo-sub-en,
  html.chrome-ready body #main-nav .logo-sub-ko,
  html.chrome-ready body #main-nav .logo-sub-en {
    display: inline-block !important;
    line-height: 1.35 !important;
    padding-bottom: 1px !important;
    vertical-align: baseline !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 {
  align-items: flex-start !important;
  text-align: left !important;
}
#cinematography .section-title,
#photography .section-title,
#cinematography .cat-tabs,
#photography .cat-tabs,
#cinematography .cat-select,
#photography .cat-select {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
#cinematography .section-title,
#photography .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. */


/* 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;
}



/* ID-level overrides neutralize older section-specific alignment rules. */
#cinematography .cat-tabs,
#photography .cat-tabs,
#ai-visuals .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 {
  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 {
  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 {
  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 {
  content: none !important;
  display: none !important;
}
#cinematography .section-title,
#photography .section-title {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#cinematography .section-title-mark,
#photography .section-title-mark {
  display: none !important;
}
#cinematography .section-title-icon,
#photography .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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
    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. */




/* 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 {
    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 {
  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 {
  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 {
  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 {
  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 {
  content: none !important;
  display: none !important;
}

#ai-visuals .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 {
  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 {
  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;
}





/* 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{
    contain: layout paint;
    backface-visibility: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,.2);
  }

  .video-card.reveal,
  .photo-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{
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
  }

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

  .video-card-overlay,
  .photo-card-overlay{
    transition-duration: 0.2s !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;
  }
}

/* Absolute final mobile-portrait action row override. */

/* Desktop descriptions fit the information panel; never expose an internal
   scrollbar beside the modal metadata. */
@media (min-width: 1201px) and (hover: hover) {
  #video-modal.open .modal-info,
  #video-modal.open .modal-info.modal-info--stacked {
    max-height: none !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
  }
  #video-modal.open .modal-info::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !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;
  }
}










/* 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. */


/* 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;
}











/* 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{
    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{
    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{
    contain: layout !important;
    backface-visibility: visible !important;
    transform-style: flat;
  }

  .video-card.reveal,
  .photo-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{
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }

  .video-card-thumb,
  .photo-card-img{
    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,
  .video-card.reveal-settled:hover,
  .photo-card.reveal-settled:hover,
  .video-card.reveal-settled:active,
  .photo-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{
    display: none !important;
  }

  

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

  .photo-card-overlay{
    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{
    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. */


/* 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; }
}



/* 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 {
    font-size: 2.1rem !important;
  }

  #ai-visuals .section-intro {
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
  }

  #cinematography .cat-tab,
#photography .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{
    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-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{
    font-size: var(--section-body-size, var(--fs-body, .9rem)) !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-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;
  }

  /* The transparent Vimeo shield must not consume vertical page swipes. */
  #showreel .showreel-context-shield,
  #showreel .showreel-player {
    touch-action: pan-y !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; }
}



/* Keep mobile photo pinch-zoom separate from gallery swipe and pull-to-refresh. */


/* 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.94rem !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;
  }

  html.lang-ko #showreel .hero-role {
    font-size: 0.9375rem !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: var(--section-body-size, var(--fs-body, .9rem)) !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-logo-card p {
    margin-top: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
  }

  #cinematography .section-title,
#photography .section-title {
    font-size: 2.125rem !important;
    line-height: 1 !important;
  }

  #ai-visuals .section-intro {
    font-size: 0.97rem !important;
    line-height: 1.7 !important;
    letter-spacing: 0.02em !important;
  }

  #cinematography .cat-tab,
#photography .cat-tab {
    font-size: 0.875rem !important;
    letter-spacing: 0.1em !important;
  }

  #cinematography .video-card h3{
    font-size: 0.91rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.035em !important;
  }

  #cinematography .pg-btn,
#photography .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-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.70rem !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,
#contact .contact-name,
#contact .contact-form-heading h3 {
    text-wrap: balance !important;
  }

  

  #about .about-bio p,
  #about .bokah-brand-copy > p:not(.label-tag),
  #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 .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 {
    max-width: 64ch !important;
    color: rgba(232,232,232,0.66) !important;
    text-wrap: pretty !important;
  }

  #cinematography .cat-tab,
#photography .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 {
    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{
    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-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,
#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-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 {
    color: #8ed5f4 !important;
    filter: drop-shadow(0 0 14px rgba(106,176,212,0.22)) !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 {
    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 {
    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;
  }

  
}

/* 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 {
    --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. */


/* 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;
}











/* Unified hero action row: three equal, centered rounded-rectangle buttons. */
#showreel .hero-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#showreel .hero-actions .hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 148px !important;
  min-width: 148px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(106, 176, 212, .42) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(106, 176, 212, .96), rgba(73, 139, 174, .92)) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
  color: #071218 !important;
  font-size: .68rem !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

#showreel .hero-actions .hero-btn:hover,
#showreel .hero-actions .hero-btn:focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .28), 0 0 0 3px rgba(106, 176, 212, .16) !important;
  outline: none !important;
}

#showreel .hero-actions .hero-btn-secondary {
  background: rgba(9, 18, 23, .82) !important;
  color: rgba(220, 241, 250, .9) !important;
}



/* Mobile portrait: keep the three primary actions on one centered row. */
@media (max-width: 700px) and (orientation: portrait) {
  #showreel .hero-actions {
    flex-wrap: nowrap !important;
    gap: 7px !important;
    padding: 0 8px !important;
  }

  #showreel .hero-actions .hero-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 7px !important;
    border-radius: 11px !important;
    font-size: clamp(.48rem, 2.25vw, .62rem) !important;
    letter-spacing: .07em !important;
    gap: 5px !important;
  }

  #showreel .hero-actions .hero-btn i {
    flex: 0 0 auto !important;
    font-size: .78rem !important;
  }
}

@media (max-width: 700px) {
  #showreel .showreel-shell {
    gap: 14px !important;
  }

  #showreel .hero-actions {
    margin-bottom: 0 !important;
  }

  
}

/* Keep the phone player fully inside its glass shell. Earlier viewport-wide
   breakout rules shifted the left edge beyond the visible screen. */


@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  #showreel .showreel-player-stack {
    gap: 6px !important;
  }

  
}

/* Absolute final phone carousel information stack. */


@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 > .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: 1 !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: 1 !important;
}

#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);
}

@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 > .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 > .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%);
  }

}

/* The hint belongs to the top utility rail, beside the close control. */


#video-modal > .modal-box,
#lightbox > .lightbox-box {
  transition:
    transform 640ms cubic-bezier(.16, .82, .2, 1),
    opacity 480ms cubic-bezier(.2, .72, .2, 1),
    filter 580ms ease !important;
}


/* High-visibility hint in the utility rail immediately above active media. */

#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;
}

@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;
  }
}


/* 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 (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 (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 {
  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 {
  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.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 {
    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 (prefers-reduced-motion: reduce) {
  #video-modal.video-modal-entering > .modal-box {
    animation: 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;
}



/* Authoritative desktop photo metadata layout. */
@media (min-width: 1201px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title category" ". counter" !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 5px 24px !important;
    width: 100% !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    padding: clamp(13px, 1.2vw, 18px) clamp(16px, 1.55vw, 24px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(12, 14, 15, .99), rgba(5, 7, 8, .99)) !important;
  }

  #lightbox.open .photo-modal-copy { display: contents !important; }
  #lightbox.open #photo-modal-title {
    grid-area: title !important;
    align-self: start !important;
    margin: 0 !important;
  }
  #lightbox.open #lightbox-caption { display: none !important; }
  #lightbox.open #photo-modal-category {
    grid-area: category !important;
    justify-self: end !important;
    align-self: start !important;
  }
  #lightbox.open #photo-counter {
    grid-area: counter !important;
    justify-self: end !important;
    align-self: end !important;
    position: static !important;
    margin: 0 !important;
  }
  #lightbox.open > .lightbox-box > .swipe-hint { display: none !important; }
}


/* Last-in-file override for labeled video navigation plates. */
#video-modal.video-nav-below > #video-prev,
#video-modal.video-nav-below > #video-next {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  width: 140px !important;
  min-width: 140px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  overflow: visible !important;
  color: rgba(237, 247, 250, .94) !important;
  border: 1px solid rgba(210, 228, 236, .34) !important;
  border-radius: 6px !important;
  background: rgba(8, 14, 17, .92) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  font-size: .70rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-transform: uppercase !important;
  transform: none !important;
}


/* Elevated floating treatment shared by the video and photo modals. */
#video-modal.modal-overlay,
#lightbox.modal-overlay {
  background: rgba(0, 0, 0, .76) !important;
  -webkit-backdrop-filter: blur(10px) brightness(.58) saturate(.82) !important;
  backdrop-filter: blur(10px) brightness(.58) saturate(.82) !important;
}

#video-modal.open > .modal-box,
#lightbox.open > .lightbox-box {
  border: 1px solid rgba(213, 233, 241, .22) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .64),
    0 12px 32px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 0 42px rgba(76, 145, 172, .075) !important;
}

#video-modal.open > .modal-box::before,
#lightbox.open > .lightbox-box::before {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, rgba(232, 247, 252, .24), transparent) !important;
}

#video-modal.open > #modal-close,
#lightbox.open > #lightbox-close {
  border-color: rgba(221, 238, 244, .34) !important;
  background: rgba(10, 16, 19, .78) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .44),
    0 0 0 1px rgba(255, 255, 255, .035) inset !important;
}

#video-modal.open > #video-prev,
#video-modal.open > #video-next,
#lightbox.open > #photo-prev,
#lightbox.open > #photo-next {
  border-color: rgba(213, 233, 241, .32) !important;
  background: rgba(8, 14, 17, .76) !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 255, 255, .03) inset !important;
}

#video-modal.open .modal-info,
#lightbox.open .photo-modal-info {
  border-top: 1px solid rgba(216, 235, 242, .10) !important;
  background: linear-gradient(180deg, rgba(13, 17, 19, .99), rgba(5, 7, 8, .99)) !important;
}

/* When the side controls would overlap the player, move them below it as
   labeled rectangular navigation buttons. */
#video-modal.video-nav-below > .modal-box {
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

#video-modal.video-nav-below > #video-prev,
#video-modal.video-nav-below > #video-next {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 140px !important;
  height: 34px !important;
  min-width: 140px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  color: rgba(237, 247, 250, .9) !important;
  border: 1px solid rgba(210, 228, 236, .28) !important;
  border-radius: 6px !important;
  background: rgba(8, 14, 17, .86) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .34) !important;
  font-size: .70rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-transform: uppercase !important;
  transform: none !important;
}

#video-modal.video-nav-below > #video-prev::after,
#video-modal.video-nav-below > #video-next::after { display: none !important; }

/* Keep the desktop photo information panel identical to video-modal.
   The previous photo-only min-height created an unused black block below the
   title/counter row. */
@media (min-width: 1201px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy counter" !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 5px 24px !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    min-height: 92px !important;
    max-height: 190px !important;
    padding: clamp(13px, 1.2vw, 18px) clamp(16px, 1.55vw, 24px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(12, 14, 15, .99), rgba(5, 7, 8, .99)) !important;
  }

  #lightbox.open .photo-modal-copy {
    grid-area: copy !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  #lightbox.open #photo-modal-title {
    display: block !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .96) !important;
    font-size: clamp(.78rem, .85vw, .98rem) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: .08em !important;
    text-align: left !important;
  }

  #lightbox.open #lightbox-caption {
    display: block !important;
    margin: 5px 0 0 !important;
    color: rgba(220, 230, 235, .72) !important;
    font-size: clamp(.68rem, .72vw, .82rem) !important;
    line-height: 1.35 !important;
    white-space: pre-line !important;
  }

  #lightbox.open #photo-counter {
    grid-area: counter !important;
    align-self: center !important;
    margin: 0 !important;
  }

  #lightbox.open > .lightbox-box > .swipe-hint {
    display: none !important;
  }

  /* Match video-modal's title/counter coordinates exactly. */
  #lightbox.open > .lightbox-box > .photo-modal-info {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title ."
      "desc counter" !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: start !important;
  }

  #lightbox.open .photo-modal-copy {
    display: contents !important;
  }

  #lightbox.open #photo-modal-title {
    grid-area: title !important;
    align-self: start !important;
  }

  #lightbox.open #lightbox-caption {
    grid-area: desc !important;
    align-self: start !important;
  }

  #lightbox.open #photo-counter {
    grid-area: counter !important;
    align-self: end !important;
  }
}

/* Final mobile photo information frame and Safari-stable modal controls. */






/* Portrait phone navigation belongs to the existing translucent space below
   the modal frame; it is text on that surface, not another control bar. */


/* 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;
  }
}





/* Final desktop parity: photo and video use the same outer frame geometry. */
@media (min-width: 1201px) {
  #lightbox.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;
  }

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

  #lightbox.open > .lightbox-box > #lightbox-img {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100svh - 320px) !important;
    object-fit: contain !important;
  }

  #lightbox.open > .lightbox-box > .photo-modal-info {
    flex: 0 0 auto !important;
    min-height: 116px !important;
    box-sizing: border-box !important;
    padding: 24px 28px 22px !important;
  }

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

  #lightbox.open > #lightbox-close {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    top: max(calc(env(safe-area-inset-top, 0px) + 8px), calc(50% - min(1240px, calc(100vw - 152px), calc(177.777svh - 320px)) / 2 - 66px)) !important;
    right: max(14px, calc((100vw - min(1240px, calc(100vw - 152px), calc(177.777svh - 320px))) / 2)) !important;
    bottom: auto !important;
    left: auto !important;
  }

  #lightbox.open > #photo-prev,
  #lightbox.open > #photo-next {
    width: 44px !important;
    height: 62px !important;
    min-width: 44px !important;
    min-height: 62px !important;
    padding: 0 !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;
}



/* Keep the compact landscape modal hierarchy balanced: quieter category,
   slightly more legible page counter. */


/* 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. */


/* 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 .modal-stage-loader {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the native YouTube surface above every modal decoration so its
   hover state and controls receive the pointer directly. */
#video-modal.open .modal-video-wrap {
  position: relative !important;
  z-index: 20 !important;
  isolation: isolate !important;
}

#video-modal.open #modal-iframe {
  z-index: 21 !important;
}

/* YouTube can take a few frames to emit onReady. Keep the modal and metadata
   visible, cover only the iframe with the real loader, and never expose a bare
   black rectangle while the provider is still starting. */
#video-modal.media-preparing .modal-box {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  filter: none !important;
}

#video-modal.media-preparing .modal-video-wrap {
  opacity: 1 !important;
}

#video-modal.media-preparing .modal-stage-loader {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 100 !important;
}

#video-modal.media-preparing #modal-iframe {
  opacity: 0 !important;
  visibility: hidden !important;
}

#video-modal.media-ready .modal-stage-loader {
  opacity: 0 !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. */


/* Final desktop photo metadata parity. */
@media (min-width: 1201px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title category" ". counter" !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 5px 24px !important;
    width: 100% !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    padding: clamp(13px, 1.2vw, 18px) clamp(16px, 1.55vw, 24px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(12, 14, 15, .99), rgba(5, 7, 8, .99)) !important;
  }
  #lightbox.open .photo-modal-copy { display: contents !important; }
  #lightbox.open #photo-modal-title { grid-area: title !important; align-self: start !important; margin: 0 !important; }
  #lightbox.open #lightbox-caption { display: none !important; }
  #lightbox.open #photo-modal-category { grid-area: category !important; justify-self: end !important; align-self: start !important; }
  #lightbox.open #photo-counter { grid-area: counter !important; justify-self: end !important; align-self: end !important; position: static !important; margin: 0 !important; }
  #lightbox.open > .lightbox-box > .swipe-hint { display: none !important; }
}

/* Final visible square buttons for the video-nav-below state. */
#video-modal.video-nav-below > #video-prev,
#video-modal.video-nav-below > #video-next {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  width: 140px !important;
  min-width: 140px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  color: rgba(237, 247, 250, .94) !important;
  border: 1px solid rgba(210, 228, 236, .34) !important;
  border-radius: 6px !important;
  background: rgba(8, 14, 17, .92) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  font-size: .70rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-transform: uppercase !important;
  transform: none !important;
}
#video-modal.video-nav-below > #video-prev::before,
#video-modal.video-nav-below > #video-next::before,
#video-modal.video-nav-below > #video-prev::after,
#video-modal.video-nav-below > #video-next::after { display: none !important; content: none !important; }

/* Mobile landscape photo modal: mirror the video modal geometry exactly. */


/* Touch landscape parity: the photo modal uses the video modal's exact
   frame and metadata geometry, including its generous info-panel height. */
@media (orientation: landscape) and (any-pointer: coarse) {
  #lightbox.open > .lightbox-box {
    width: min(calc(100vw - 132px), calc(177.777svh - 320px)) !important;
    max-width: none !important;
    max-height: calc(100svh - 76px) !important;
    overflow: hidden !important;
  }

  #lightbox.open > .lightbox-box > #lightbox-img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }

  #lightbox.open > .lightbox-box > .photo-modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title category" ". counter" !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 3px 12px !important;
    width: 100% !important;
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
    padding: 13px 16px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(12, 14, 15, .99), rgba(5, 7, 8, .99)) !important;
  }

  #lightbox.open .photo-modal-copy { display: contents !important; }
  #lightbox.open #photo-modal-title {
    grid-area: title !important;
    align-self: start !important;
    margin: 0 !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  #lightbox.open #lightbox-caption { display: none !important; }
  #lightbox.open #photo-modal-category {
    grid-area: category !important;
    align-self: start !important;
    justify-self: end !important;
    padding: 4px 9px !important;
    font-size: .78rem !important;
  }
  #lightbox.open #photo-counter {
    grid-area: counter !important;
    align-self: end !important;
    justify-self: end !important;
    position: static !important;
    min-width: 66px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    font-size: .84rem !important;
  }

  #lightbox.open > #lightbox-close {
    position: fixed !important;
    z-index: 90 !important;
  }
  #lightbox.open > #photo-prev,
  #lightbox.open > #photo-next {
    position: fixed !important;
    z-index: 89 !important;
    width: 52px !important;
    height: 70px !important;
    min-width: 52px !important;
    min-height: 70px !important;
  }
}

/* Touch portrait parity: photo modal follows the video modal's portrait
   frame, metadata panel, close control, and bottom navigation buttons. */
@media (orientation: portrait) and (any-pointer: coarse) {
  #lightbox.open {
    padding: 56px 4px 10px !important;
    overflow: hidden !important;
  }
  #lightbox.open > .lightbox-box {
    display: flex !important;
    flex-direction: column !important;
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100svh - 68px) !important;
    overflow: hidden !important;
  }
  #lightbox.open > .lightbox-box > #lightbox-img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }
  #lightbox.open > .lightbox-box > .photo-modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title category" ". counter" !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 5px 12px !important;
    width: 100% !important;
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
    padding: 13px 16px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(12, 14, 15, .99), rgba(5, 7, 8, .99)) !important;
  }
  #lightbox.open .photo-modal-copy { display: contents !important; }
  #lightbox.open #photo-modal-title { grid-area: title !important; align-self: start !important; margin: 0 !important; font-size: .78rem !important; line-height: 1.35 !important; }
  #lightbox.open #lightbox-caption { display: none !important; }
  #lightbox.open #photo-modal-category { grid-area: category !important; align-self: start !important; justify-self: end !important; }
  #lightbox.open #photo-counter { grid-area: counter !important; align-self: end !important; justify-self: end !important; position: static !important; margin: 0 !important; }
  #lightbox.open > #lightbox-close { position: fixed !important; z-index: 90 !important; }
  #lightbox.photo-nav-below > #photo-prev,
  #lightbox.photo-nav-below > #photo-next {
    position: fixed !important;
    z-index: 89 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 140px !important;
    min-width: 140px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    color: rgba(237, 247, 250, .94) !important;
    border: 1px solid rgba(210, 228, 236, .34) !important;
    border-radius: 6px !important;
    background: rgba(8, 14, 17, .92) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .46) !important;
    font-size: .70rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-indent: 0 !important;
    text-transform: uppercase !important;
    transform: none !important;
  }
  #lightbox.photo-nav-below > #photo-prev::before,
  #lightbox.photo-nav-below > #photo-next::before,
  #lightbox.photo-nav-below > #photo-prev::after,
  #lightbox.photo-nav-below > #photo-next::after { display: none !important; content: none !important; }
}

/* ------------------------------------------------------------------------
   PHOTO MODAL — mobile video-modal parity
   Keep this as the last mobile rule: photo content has no description, but
   every visible component uses the video modal's frame, type, pill, counter,
   close control, backdrop, and navigation treatment.
   ------------------------------------------------------------------------ */
#lightbox.modal-overlay {
  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;
}

#lightbox.open > .lightbox-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(213, 233, 241, .22) !important;
  border-radius: clamp(12px, 1.15vw, 18px) !important;
  background: #07090a !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .48) !important;
}

#lightbox.open > .lightbox-box > #lightbox-img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  background: #000 !important;
}

/* Compact language control; it follows the existing navigation breakpoints. */
.language-switcher { display:flex; align-items:center; gap:5px; margin-left:14px; color:rgba(255,255,255,.42); font-size:.68rem; letter-spacing:.08em; }
.language-switcher button { appearance:none; border:0; background:transparent; color:rgba(255,255,255,.62); padding:5px 1px; cursor:pointer; font:inherit; }
.language-switcher button:hover, .language-switcher button:focus-visible { color:#fff; outline:none; }
html.lang-ko .language-switcher button[data-lang="ko"], html:not(.lang-ko) .language-switcher button[data-lang="en"] { color:var(--accent,#6ab0d4); font-weight:800; }


#lightbox.open > .lightbox-box > .photo-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"
    ". counter" !important;
  grid-template-rows: 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: 190px !important;
  padding: clamp(13px, 1.2vw, 18px) clamp(16px, 1.55vw, 24px) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid rgba(216, 235, 242, .10) !important;
  background: linear-gradient(180deg, rgba(13, 17, 19, .99), rgba(5, 7, 8, .99)) !important;
}

#lightbox.open .photo-modal-copy { display: contents !important; }
#lightbox.open #photo-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;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
  white-space: normal !important;
  text-overflow: clip !important;
}
#lightbox.open #lightbox-caption { display: none !important; }
#lightbox.open #photo-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;
  border: 1px solid rgba(114, 184, 215, .58) !important;
  border-radius: 999px !important;
  background: rgba(21, 51, 65, .18) !important;
  padding: 5px 10px !important;
}
#lightbox.open #photo-counter {
  grid-area: counter !important;
  position: static !important;
  display: flex !important;
  align-self: end !important;
  justify-self: end !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  min-width: 0 !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 7px !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, .70) !important;
  font-size: .50rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}

@media (orientation: landscape) and (max-height: 620px) {
  #lightbox.modal-overlay {
    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;
  }
  #lightbox.open > .lightbox-box { max-height: calc(100svh - 56px) !important; }
  #lightbox.open > .lightbox-box > .photo-modal-info {
    min-height: 76px !important;
    max-height: 104px !important;
    padding: 9px 14px !important;
    gap: 3px 14px !important;
  }
  #lightbox.open #photo-modal-title { font-size: clamp(.64rem, 1.45vh, .78rem) !important; }
  #lightbox.open #photo-modal-category { font-size: clamp(.56rem, 1.25vh, .7rem) !important; }
  #lightbox.open > #photo-prev,
  #lightbox.open > #photo-next { width: 46px !important; height: 62px !important; }
}



/* Compact phone-landscape photo modal: literal video-modal counterparts.
   This is intentionally the final rule in the stylesheet. */


/* Final mobile photo metadata layout: a single video-style information row.
   This last override prevents legacy responsive blocks from restoring a second row. */



/* Phone landscape can be wider than 700px, so it needs the same one-row
   structure explicitly rather than inheriting the desktop two-row grid. */


/* The page counter is intentionally the same pill thickness as its category. */



/* Desktop follows the same title → counter → category order as mobile. */
@media (min-width: 701px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    grid-template-columns: fit-content(65%) auto minmax(0, 1fr) auto !important;
    grid-template-areas: "title counter . category" !important;
    grid-template-rows: auto !important;
    align-items: start !important;
  }
  #lightbox.open #photo-modal-title {
    align-self: start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #lightbox.open #photo-counter {
    align-self: start !important;
    justify-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 10px !important;
    font-size: clamp(.66rem, .72vw, .82rem) !important;
    line-height: 1.35 !important;
  }
  #lightbox.open #photo-modal-category {
    align-self: start !important;
    justify-self: end !important;
  }
}

@container bokah-nav (min-width: 1320px) {
  #main-nav .logo-sub {
    font-size: clamp(.56rem, .43rem + .18cqw, .68rem) !important;
    letter-spacing: .105em !important;
  }
  #main-nav .nav-links {
    gap: clamp(44px, 3.4cqw, 72px) !important;
  }
  html.lang-ko #main-nav .nav-links { gap: clamp(38px, 3cqw, 62px) !important; }
}

/* Portrait video frames must clip the embedded player at the exact outer
   radius; navigation controls are siblings, so no visible overflow is needed. */


/* Final landscape photo type scale: match portrait's title and pill rhythm. */


/* One restrained mobile scale in both orientations. */



/* Always show the media affordance on touchscreens and as a quiet center mark
   on desktop.  Hover-only overlays disappear on iPad/tablet because there is
   no hover state to trigger them. */
.video-card-overlay,
.photo-card-overlay {
  z-index: 3 !important;
  opacity: .78 !important;
  pointer-events: none !important;
}

.video-card-overlay {
  background: radial-gradient(circle at center, rgba(0, 0, 0, .18), transparent 38%) !important;
}

.video-card-overlay .play-btn {
  width: 42px !important;
  height: 42px !important;
  color: rgba(255, 255, 255, .88) !important;
  background: rgba(5, 5, 5, .48) !important;
  border-color: rgba(255, 255, 255, .80) !important;
  font-size: .86rem !important;
}

.photo-card-overlay {
  color: rgba(255, 255, 255, .94) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .76) !important;
}

.photo-card-overlay i {
  font-size: 1.45rem !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .72));
}

/* Desktop and iPad landscape share one compact metadata row. */
@media (min-width: 1001px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 13px 20px !important;
    gap: 12px !important;
  }
}

/* Final desktop alignment: title, counter, and category share one centerline. */
@media (min-width: 701px) {
  #lightbox.open > .lightbox-box > .photo-modal-info { align-items: center !important; }
  #lightbox.open #photo-modal-title,
  #lightbox.open #photo-counter,
  #lightbox.open #photo-modal-category { align-self: center !important; }
}

/* Tablet photos retain desktop scale and reserve external lanes for arrows. */
html.is-touch-tablet #lightbox.open {
  padding: 54px 58px 14px !important;
}
html.is-touch-tablet #lightbox.open > .lightbox-box {
  width: min(1000px, calc(100vw - 236px), calc((100svh - 136px) * 16 / 9)) !important;
  max-width: none !important;
  max-height: calc(100svh - 76px) !important;
}
html.is-touch-tablet #lightbox.open > .lightbox-box > .photo-modal-info {
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 13px 20px !important;
}
@media (orientation: portrait) {
  html.is-touch-tablet #lightbox.open > .lightbox-box {
    /* Portrait tablets have enough width for the image itself; reserve only
       a small safe-area gutter instead of the desktop arrow lanes. */
    width: min(1000px, calc(100vw - 24px), calc((100svh - 136px) * 16 / 9)) !important;
    max-width: none !important;
    max-height: calc(100svh - 92px) !important;
  }
}

/* Absolute final mobile-portrait action row override. */
@media (max-width: 700px) and (orientation: portrait) {
  #showreel .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 6px !important;
  }

  #showreel .hero-actions > .hero-btn {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 4px !important;
    border-radius: 10px !important;
    gap: 4px !important;
    font-size: clamp(.44rem, 2.05vw, .58rem) !important;
    letter-spacing: .045em !important;
  }

  #showreel .hero-actions > .hero-btn i {
    margin: 0 !important;
    font-size: .72rem !important;
  }
}

/* iPad/tablet video modal: orientation changes must keep the metadata and
   the two below-frame controls in the same measured layout.  These rules are
   intentionally last so legacy phone/landscape clamps cannot hide the copy. */
html.is-touch-tablet #video-modal.open .modal-info,
html.is-touch-tablet #video-modal.open .modal-info.modal-info--stacked {
  display: grid !important;
  max-height: var(--video-info-max-height, 46vh) !important;
  overflow: visible !important;
}

html.is-touch-tablet #video-modal.open #modal-desc,
html.is-touch-tablet #video-modal.open #modal-desc.modal-desc--stacked,
html.is-touch-tablet #video-modal.open #modal-desc.modal-desc--multiline {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: pre-wrap !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

html.is-touch-tablet #video-modal.video-nav-below > #video-prev,
html.is-touch-tablet #video-modal.video-nav-below > #video-next {
  position: fixed !important;
  z-index: 31 !important;
  transform: none !important;
}

html.is-touch-tablet #video-modal.open > #modal-close {
  position: fixed !important;
  z-index: 32 !important;
  transform: none !important;
}

html.is-touch-tablet #video-modal.video-nav-below > #video-prev,
html.is-touch-tablet #video-modal.video-nav-below > #video-next {
  top: var(--tablet-nav-top) !important;
  width: var(--tablet-nav-width) !important;
  min-width: var(--tablet-nav-width) !important;
}

@media (orientation: portrait) {
  html.is-touch-tablet #video-modal.video-nav-below > #video-prev {
    left: var(--tablet-nav-left) !important;
  }
  html.is-touch-tablet #video-modal.video-nav-below > #video-next {
    left: var(--tablet-nav-right) !important;
  }
}

/* Tablet landscape video modal: leave a little more breathing room around
   the information panel and clip the player to the same rounded frame. */
@media (orientation: landscape) {
  /* Touch-tablet landscape keeps one settled frame from the fit pass.  The
     generic modal enter animation and transform writer expose intermediate
     widths while the iframe is starting, which looks like a blink on iPad and
     Galaxy Tab browsers. */
  html.is-touch-tablet #video-modal.video-modal-entering > .modal-box {
    animation: none !important;
    transform: none !important;
  }

  html.is-touch-tablet #video-modal.open > .modal-box {
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  html.is-touch-tablet #video-modal.open .modal-video-wrap {
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
  }

  html.is-touch-tablet #video-modal.open .modal-video-wrap iframe,
  html.is-touch-tablet #video-modal.open .modal-video-wrap video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
  }

  html.is-touch-tablet #video-modal.open .modal-info {
    box-sizing: border-box !important;
    padding: 14px 22px 32px !important;
    gap: 6px 18px !important;
    min-height: 104px !important;
  }

  html.is-touch-tablet #video-modal.open #modal-desc {
    margin-bottom: 3px !important;
  }

  html.is-touch-tablet #video-modal.open #video-counter {
    margin-bottom: 8px !important;
  }
}

/* Compact visual density for iPad/tablet landscape only.  The desktop keeps
   its theatrical scale; this profile trims the same UI by a small amount so
   the page reads as a composed tablet canvas rather than an oversized desktop. */
@media (orientation: landscape) {
  html.is-touch-tablet.is-compact-landscape-gallery #main-nav .nav-logo { transform: scale(.92); transform-origin: left center; }
  html.is-touch-tablet.is-compact-landscape-gallery #main-nav .nav-links { transform: scale(.92); transform-origin: right center; }
  html.is-touch-tablet.is-compact-landscape-gallery #showreel .hero-kicker { font-size: .78em !important; }
  html.is-touch-tablet.is-compact-landscape-gallery #showreel .hero-title { font-size: clamp(2.35rem, 5.5vw, 3.85rem) !important; }
  html.is-touch-tablet.is-compact-landscape-gallery #showreel .hero-role{ font-size: .9em !important; }
  html.is-touch-tablet.is-compact-landscape-gallery #showreel .hero-actions .hero-btn { font-size: .82em !important; }
  html.is-touch-tablet.is-compact-landscape-gallery .portfolio-section .section-title { font-size: .9em !important; }
  html.is-touch-tablet.is-compact-landscape-gallery .portfolio-section .section-title-icon { transform: scale(.9); }
  html.is-touch-tablet.is-compact-landscape-gallery .portfolio-section .cat-select { transform: scale(.94); transform-origin: left center; }
  html.is-touch-tablet.is-compact-landscape-gallery .pagination .pg-btn { transform: scale(.92); }
}

/* Override the legacy tablet-portrait "counter only" mode. It hid the title
   and description outright and is the reason the lower modal panel appeared
   broken on real iPad Safari. */
@media (orientation: portrait) {
  html.is-touch-tablet #video-modal.tablet-portrait-info > .modal-box {
    width: min(94vw, 900px) !important;
    max-width: 94vw !important;
    height: auto !important;
    overflow: visible !important;
  }
  html.is-touch-tablet #video-modal.tablet-portrait-info .modal-info,
  html.is-touch-tablet #video-modal.tablet-portrait-info .modal-info.modal-info--stacked {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title category"
      "youtube category"
      "desc desc"
      "counter counter" !important;
    grid-template-rows: auto auto auto auto !important;
    align-items: start !important;
    justify-content: normal !important;
    gap: 6px 14px !important;
    min-height: 0 !important;
    padding: 14px 16px 16px !important;
    overflow: visible !important;
    text-align: left !important;
  }
  html.is-touch-tablet #video-modal.tablet-portrait-info #modal-title,
  html.is-touch-tablet #video-modal.tablet-portrait-info #modal-desc,
  html.is-touch-tablet #video-modal.tablet-portrait-info .modal-info.modal-info--stacked #modal-title,
  html.is-touch-tablet #video-modal.tablet-portrait-info .modal-info.modal-info--stacked #modal-desc {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html.is-touch-tablet #video-modal.tablet-portrait-info #modal-title { grid-area: title !important; }
  html.is-touch-tablet #video-modal.tablet-portrait-info .modal-youtube-stats { grid-area: youtube !important; }
  html.is-touch-tablet #video-modal.tablet-portrait-info #modal-desc { grid-area: desc !important; }
  html.is-touch-tablet #video-modal.tablet-portrait-info #modal-category { grid-area: category !important; }
  html.is-touch-tablet #video-modal.tablet-portrait-info #video-counter {
    display: inline-flex !important;
    grid-area: counter !important;
    justify-self: end !important;
    margin: 0 !important;
  }
}













/* Cinematography, Photography and BTS intentionally share one header system. */
#cinematography > .gallery-title-header,
#photography > .gallery-title-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 2vw, 30px) !important;
  text-align: center !important;
}

#cinematography > .gallery-title-header::before,
#photography > .gallery-title-header::before,
#cinematography > .gallery-title-header::after,
#photography > .gallery-title-header::after {
  content: "" !important;
  display: block !important;
  flex: 1 1 120px !important;
  width: auto !important;
  max-width: 250px !important;
  height: 1px !important;
  min-width: 0 !important;
}

#cinematography > .gallery-title-header::before,
#photography > .gallery-title-header::before {
  opacity: .9 !important;
  background: linear-gradient(90deg, transparent, rgba(106,176,212,.38)) !important;
}

#cinematography > .gallery-title-header::after,
#photography > .gallery-title-header::after {
  opacity: 1 !important;
  background: linear-gradient(90deg, rgba(106,176,212,.38), transparent) !important;
}

#cinematography > .gallery-title-header > .section-title,
#photography > .gallery-title-header > .section-title {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  gap: .48em !important;
  text-align: center !important;
}

@media (max-width: 700px) and (orientation: portrait) {
  #showreel .hero-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; padding: 0 6px !important; }
  #showreel .hero-actions > .hero-btn { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; height: 40px !important; min-height: 40px !important; padding: 0 4px !important; border-radius: 10px !important; gap: 4px !important; font-size: clamp(.44rem, 2.05vw, .58rem) !important; letter-spacing: .045em !important; }
  #showreel .hero-actions > .hero-btn i { margin: 0 !important; font-size: .72rem !important; }
}

/* Final mobile-landscape gallery geometry. Keep title, filter and thumbnails
   in one compact vertical rhythm; older tablet rules add duplicate insets and
   oversized header space when the viewport is short and wide. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  #cinematography .cat-tabs,
#photography .cat-tabs {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

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

  #cinematography.portfolio-section,
#photography.portfolio-section {
    /* Give the gallery title breathing room below the preceding section. */
    padding: 72px 24px 44px !important;
    min-height: 0 !important;
  }

  #cinematography .section-header,
#photography .section-header {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  #cinematography .section-title,
#photography .section-title {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  #cinematography .cat-select,
#photography .cat-select {
    display: block !important;
    width: 174px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 0 14px !important;
    padding: 0 30px 0 12px !important;
  }

  #cinematography .video-grid,
#photography .photo-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  #cinematography .video-card {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  #photography .photo-card {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 3 / 2 !important;
  }

  #cinematography .pagination,
#photography .pagination {
    margin: 14px 0 0 !important;
  }
}
/* Final video deep-link button */
.final-video-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .35rem;
  padding: .5rem .85rem;
  border: 1px solid rgba(104, 203, 246, .65);
  border-radius: 999px;
  background: rgba(68, 166, 214, .12);
  color: #8bdcff !important;
  font-weight: 700;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.final-video-link::before { content: '▶'; font-size: .72em; }
.final-video-link:hover,
.final-video-link:focus-visible { background: rgba(68, 166, 214, .24); border-color: #8bdcff; }
#video-modal a.final-video-link,
#video-modal a.final-video-link:hover,
#video-modal a.final-video-link:focus-visible { text-decoration: none !important; border-bottom: 0 !important; }

/* Final-video CTA: the description-link rule above is intentionally strong,
   so this equally strong final selector keeps the action underline-free on
   every platform and gives it a more polished glass-metal finish. */
#video-modal #modal-desc a.final-video-link,
#video-modal #modal-desc a.final-video-link:hover,
#video-modal #modal-desc a.final-video-link:focus-visible,
#video-modal #modal-desc a.final-video-link:active {
  display: inline-flex !important;
  align-items: center !important;
  gap: .55rem !important;
  margin-top: .55rem !important;
  padding: clamp(.58rem, 1.25vw, .72rem) clamp(.9rem, 2.2vw, 1.2rem) !important;
  border: 1px solid rgba(139, 220, 255, .62) !important;
  border-bottom: 1px solid rgba(139, 220, 255, .62) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(139, 220, 255, .18), rgba(57, 106, 128, .12)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 8px 24px rgba(20, 102, 132, .16) !important;
  color: #bcecff !important;
  font-size: clamp(.6rem, 1.15vw, .72rem) !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-underline-offset: 0 !important;
  white-space: nowrap !important;
  transition: background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease !important;
}

#video-modal #modal-desc a.final-video-link::before {
  content: '▶' !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 1.25em !important;
  height: 1.25em !important;
  color: #071116 !important;
  font-size: .62em !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: #8bdcff !important;
  text-decoration: none !important;
}

#video-modal #modal-desc a.final-video-link:hover,
#video-modal #modal-desc a.final-video-link:focus-visible {
  border-color: rgba(186, 237, 255, .96) !important;
  background:
    linear-gradient(135deg, rgba(139, 220, 255, .3), rgba(65, 130, 155, .2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 10px 30px rgba(20, 128, 166, .26) !important;
  color: #effbff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* Touch-tablet gallery and modal fit: keep controls inside the framed
   sections and reserve space for modal metadata in portrait orientation. */




html.is-touch-tablet #video-modal.open > .modal-box { overflow: visible !important; }
html.is-touch-tablet #video-modal.open .modal-info { visibility: visible !important; opacity: 1 !important; }
@media (orientation: landscape) {
  html.is-touch-tablet #cinematography,
  html.is-touch-tablet #photography { padding-top: 86px !important; padding-bottom: 96px !important; overflow: visible !important; }
  html.is-touch-tablet #cinematography .cat-select,
  html.is-touch-tablet #photography .cat-select { margin-bottom: 26px !important; }
  html.is-touch-tablet #video-grid-all,
  html.is-touch-tablet #photo-grid-all { max-width: 100% !important; width: 100% !important; overflow: hidden !important; }
  html.is-touch-tablet #video-pagination,
  html.is-touch-tablet #photo-pagination { margin-top: 34px !important; margin-bottom: 32px !important; padding-bottom: 12px !important; }
}

/* iPad Safari final geometry: the visual frame is a section pseudo-element,
   so gallery content must use the same inset instead of the old mobile-wide
   grid profile. */
@media (orientation: landscape) {
  html.is-touch-tablet.is-compact-landscape-gallery #cinematography.portfolio-section,
  html.is-touch-tablet.is-compact-landscape-gallery #photography.portfolio-section {
    padding: 104px 64px 92px !important;
  }
  html.is-touch-tablet.is-compact-landscape-gallery #cinematography::before,
  html.is-touch-tablet.is-compact-landscape-gallery #photography::before {
    top: 36px !important;
    right: 36px !important;
    bottom: 36px !important;
    left: 36px !important;
  }
  html.is-touch-tablet.is-compact-landscape-gallery #cinematography .cat-select,
  html.is-touch-tablet.is-compact-landscape-gallery #photography .cat-select {
    margin: 0 0 28px !important;
  }
  html.is-touch-tablet.is-compact-landscape-gallery #cinematography .pagination,
  html.is-touch-tablet.is-compact-landscape-gallery #photography .pagination {
    margin: 34px 0 0 !important;
    padding-bottom: 18px !important;
  }
}

@media (orientation: portrait) {
  html.is-touch-tablet #video-modal.open .modal-video-wrap { position: relative !important; z-index: 1 !important; }
  html.is-touch-tablet #video-modal.open .modal-info {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    background: #071012 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title category"
      "youtube category"
      "desc desc"
      "counter counter" !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 6px 14px !important;
    padding: 14px 16px 16px !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html.is-touch-tablet #video-modal.open #modal-title { grid-area: title !important; }
  html.is-touch-tablet #video-modal.open .modal-youtube-stats { grid-area: youtube !important; }
  html.is-touch-tablet #video-modal.open #modal-desc { grid-area: desc !important; margin: 0 !important; }
  html.is-touch-tablet #video-modal.open #modal-category { grid-area: category !important; align-self: start !important; }
  html.is-touch-tablet #video-modal.open #video-counter { grid-area: counter !important; justify-self: end !important; }
}

@media (orientation: landscape) {
  html.is-touch-tablet #video-modal.open > .modal-box {
    width: min(980px, calc(100vw - 160px), calc((100dvh - 100px) * 16 / 9)) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  html.is-touch-tablet #video-modal.open .modal-info,
  html.is-touch-tablet #video-modal.open .modal-info.modal-info--stacked {
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    row-gap: 2px !important;
    min-height: 0 !important;
    padding: 12px 22px 20px !important;
  }
  html.is-touch-tablet #video-modal.open .modal-youtube-stats {
    margin: 0 !important;
    line-height: 1.18 !important;
  }
  html.is-touch-tablet #video-modal.open #modal-desc {
    margin: 0 !important;
  }
  html.is-touch-tablet #video-modal.open .modal-info {
    max-height: min(34dvh, 184px) !important;
    overflow-y: auto !important;
  }
}

/* Final orientation-stable modal typography and geometry.  Safari can retain
   the previous orientation's measured text box for one or more resize passes;
   keep the modal's own text sizing independent from that transient state. */
#video-modal,
#video-modal .modal-info,
#video-modal #modal-title,
#video-modal #modal-desc {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

@media (orientation: portrait) {
  html.is-touch-tablet #video-modal.open #modal-title {
    font-size: .86rem !important;
    line-height: 1.35 !important;
  }

  html.is-touch-tablet #video-modal.open #modal-desc,
  html.is-touch-tablet #video-modal.open #modal-desc.modal-desc--stacked,
  html.is-touch-tablet #video-modal.open #modal-desc.modal-desc--multiline {
    font-size: .72rem !important;
    line-height: 1.5 !important;
    letter-spacing: .015em !important;
  }
}

@media (orientation: landscape) {
  html.is-touch-tablet #video-modal.open .modal-video-wrap {
    /* Reclaim the browser-chrome and safe-area reserve so the player can grow
       vertically without restoring the old oversized horizontal panel. */
    max-height: calc(100dvh - 100px) !important;
  }

  html.is-touch-tablet #video-modal.open .modal-info,
  html.is-touch-tablet #video-modal.open .modal-info.modal-info--stacked {
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    row-gap: 2px !important;
    min-height: 0 !important;
  }

  html.is-touch-tablet #video-modal.open .modal-youtube-stats {
    margin-bottom: 0 !important;
  }

  html.is-touch-tablet #video-modal.open #modal-desc {
    margin-top: 0 !important;
  }

  /* The extra space comes from the real visible viewport, not a stale svh
       snapshot, so the player gets the reclaimed vertical space after rotate. */
  html.is-touch-tablet #video-modal.open #modal-desc {
    font-size: .68rem !important;
    line-height: 1.45 !important;
  }
}

/* Final touch-tablet landscape video frame.  Older low-height landscape
   rules gave the modal/info panel a full-viewport height, which made the
   player wider than its intended 16:9 frame and caused visible reflow while
   an iframe was starting.  Keep the metadata content-sized and let the JS
   fit pass write one explicit 16:9 media height. */
@media (orientation: landscape) {
  html.is-touch-tablet #video-modal.open > .modal-box {
    height: auto !important;
    min-height: 0 !important;
  }

  html.is-touch-tablet #video-modal.open .modal-info,
  html.is-touch-tablet #video-modal.open .modal-info.modal-info--stacked {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  html.is-touch-tablet #video-modal.open .modal-video-wrap {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: var(--responsive-video-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }

  html.is-touch-tablet #video-modal.open .modal-video-wrap iframe,
html.is-touch-tablet #video-modal.open .modal-video-wrap video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* Samsung Galaxy Tab landscape only: slightly reduce the control plates so
   they do not dominate the already compact horizontal frame.  Keep this
   brand-specific and landscape-only; iPad and portrait tablet geometry stay
   unchanged. */
@media (orientation: landscape) and (max-height: 820px) {
  html.is-samsung-tablet #video-modal.open > #modal-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.6rem !important;
  }

  html.is-samsung-tablet #video-modal.open > #video-prev,
  html.is-samsung-tablet #video-modal.open > #video-next {
    width: 44px !important;
    min-width: 44px !important;
    height: 60px !important;
    min-height: 60px !important;
    font-size: 1.95rem !important;
  }

  html.is-samsung-tablet #video-modal.open > #video-prev::after,
  html.is-samsung-tablet #video-modal.open > #video-next::after {
    width: 12px !important;
    height: 12px !important;
  }

  html.is-samsung-tablet #video-modal.open .modal-desc-counter-line {
    grid-area: desc !important;
    display: block !important;
    min-width: 0 !important;
    line-height: inherit !important;
    text-align: left !important;
  }

  html.is-samsung-tablet #video-modal.open .modal-desc-counter-line #modal-desc {
    display: inline !important;
    grid-area: auto !important;
    margin: 1px 0 0 !important;
  }

  html.is-samsung-tablet #video-modal.open .modal-desc-counter-line #video-counter {
    display: inline-flex !important;
    grid-area: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    margin: 0 0 0 10px !important;
    vertical-align: baseline !important;
  }
}

/* Keep the live showreel preview clipped to its rounded frame.  The Vimeo
   iframe paints its own rectangular surface, so rounding only the wrapper is
   not sufficient on Safari/Samsung Browser. */
#showreel .showreel-player {
  border-radius: 12px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  clip-path: inset(0 round 12px) !important;
}

#showreel .showreel-player iframe,
#showreel .showreel-player video {
  border-radius: inherit !important;
}

/* Refined showreel frame: give the hero media a little more presence on
   desktop while keeping the phone layout's carefully bounded width intact. */
@media (min-width: 1101px) {
  #showreel .showreel-shell .showreel-player {
    width: min(110%, 1452px) !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 1px solid rgba(151, 211, 238, .18) !important;
    border-radius: 18px !important;
    clip-path: inset(0 round 18px) !important;
    box-shadow:
      0 24px 64px rgba(0, 0, 0, .38),
      0 0 0 1px rgba(255, 255, 255, .035),
      inset 0 1px rgba(255, 255, 255, .08) !important;
  }
}

/* Desktop video-modal arrows are positioned from the measured media frame in
   main.js.  Older desktop rules added asymmetric horizontal transforms after
   that calculation (-108px on the previous arrow and +56px on the next), so
   the visible outer gaps did not match. */
@media (min-width: 1201px) {
  #video-modal.open:not(.video-nav-below) > #video-prev,
  #video-modal.open:not(.video-nav-below) > #video-next {
    transform: translateY(-50%) !important;
  }
}

/* Final gallery containment fix.  The compact landscape rules intentionally
   changed the grid to full-width, but the section frame still has a capped
   inner canvas.  Re-apply the original gallery canvas width so thumbnails
   cannot escape the framed panel on touch/landscape viewports. */
html.is-compact-landscape-gallery #cinematography > .video-grid,
html.is-compact-landscape-gallery #photography > .photo-grid,
html.is-touch-tablet #cinematography > .video-grid,
html.is-touch-tablet #photography > .photo-grid {
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* The loaded photo ratio, not a hard-coded 16:9 frame, controls the lightbox. */
#lightbox.open > .lightbox-box > #lightbox-img {
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* Keep the player silhouette consistently soft on every device tier. */
#showreel .showreel-player {
  border-radius: 16px !important;
  clip-path: inset(0 round 16px) !important;
}

@media (min-width: 1101px) {
  #showreel .showreel-shell .showreel-player {
    border-radius: 18px !important;
    clip-path: inset(0 round 18px) !important;
  }
}



/* Final desktop alignment: center the enlarged showreel frame against the
   shell itself, regardless of which earlier containing-block rule wins. */
@media (min-width: 1101px) {
  #showreel .showreel-shell .showreel-player {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile lightbox watermark: keep the brand visible but quieter over the
   photograph. Desktop sizing remains unchanged. */


/* Skills graph scale: Korean text gets one full step, English half a step;
   icons and numeric values get one shared step in both languages. */
#about .skill-name {
  font-size: .95rem !important;
}

html.lang-ko #about .skill-name {
  font-size: 1rem !important;
}


#about .skill-pct {
  font-size: .92rem !important;
  line-height: 1.4 !important;
}

/* Desktop footer scale: one step smaller for both Korean and English copy. */
@media (min-width: 1025px) {
  #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 {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  #main-footer .footer-copy {
    margin-bottom: 13px;
  }

  #main-footer .footer-credit {
    gap: 13px;
    margin-bottom: 17px;
  }
}

/* Final footer readability pass: keep the footprint restrained while giving
   the small editorial copy a little more presence. */
#main-footer .footer-copy {
  font-size: 0.98rem !important;
}

#main-footer .footer-credit,
#main-footer .footer-credit p,
#main-footer .footer-site-links,
#main-footer .footer-site-links a,
#main-footer #footer-credit-label,
#main-footer #footer-credit-name {
  font-size: 0.94rem !important;
}

#main-footer .footer-admin {
  font-size: 0.62rem !important;
}



/* Desktop photo modal type refinement: keep the watermark and title bar
   slightly more legible without changing mobile/tablet presentation. */
@media (min-width: 1201px) {
  .photo-watermark-lightbox {
    font-size: clamp(.96rem, 1.16vw, 1.18rem);
  }

  .photo-watermark-lightbox .photo-watermark-logo {
    width: clamp(43px, 5.22vw, 79px);
  }

  #lightbox.open #photo-modal-title {
    font-size: clamp(.84rem, .92vw, 1.06rem) !important;
  }

  #lightbox.open #photo-modal-category {
    font-size: clamp(.72rem, .78vw, .88rem) !important;
  }

  #lightbox.open #photo-counter {
    font-size: .56rem !important;
  }
}

/* Desktop photo modal readability pass: keep the page counter first, then
   title and description, with the category remaining on the right. */
@media (min-width: 1201px) {
  #lightbox.open .photo-watermark-lightbox {
    font-size: clamp(1.04rem, 1.24vw, 1.24rem) !important;
  }
  #lightbox.open .photo-watermark-lightbox .photo-watermark-logo {
    width: clamp(41px, 4.96vw, 75px) !important;
    opacity: .8 !important;
  }
  #lightbox.open > .lightbox-box > .photo-modal-info {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "counter title category" "counter desc category" !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    column-gap: clamp(14px, 1.35vw, 22px) !important;
    row-gap: 4px !important;
    min-height: 112px !important;
    max-height: 210px !important;
    padding: clamp(15px, 1.35vw, 21px) clamp(18px, 1.7vw, 27px) !important;
  }
  #lightbox.open #photo-counter {
    grid-area: counter !important;
    align-self: center !important;
    justify-self: start !important;
    height: 26px !important;
    padding: 0 9px !important;
    font-size: .68rem !important;
    letter-spacing: .04em !important;
  }
  #lightbox.open #photo-modal-title {
    grid-area: title !important;
    align-self: end !important;
    font-size: clamp(.92rem, 1.02vw, 1.14rem) !important;
    line-height: 1.35 !important;
  }
  #lightbox.open #lightbox-caption {
    display: -webkit-box !important;
    grid-area: desc !important;
    align-self: start !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(235, 242, 245, .72) !important;
    font-size: clamp(.72rem, .78vw, .88rem) !important;
    line-height: 1.45 !important;
    letter-spacing: .045em !important;
    text-align: left !important;
    white-space: pre-line !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
  #lightbox.open #photo-modal-category {
    grid-area: category !important;
    align-self: center !important;
    font-size: clamp(.78rem, .84vw, .94rem) !important;
    padding: 6px 12px !important;
  }
}

/* Final desktop motion pass: kept last so it wins over legacy gallery tiers. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .video-card.reveal,
  .photo-card.reveal{
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.975);
    transition:
      opacity .82s ease,
      transform .9s cubic-bezier(.16,.76,.18,1),
      border-color .42s ease,
      box-shadow .62s cubic-bezier(.16,.76,.18,1) !important;
  }

  .video-card.reveal.visible,
.photo-card.reveal.visible,
#cinematography .video-card.reveal.visible,
#photography .photo-card.reveal.visible{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .video-card.reveal.visible:hover,
.video-card.reveal.visible:focus-within,
.photo-card.reveal.visible:hover,
.photo-card.reveal.visible:focus-within,
#cinematography .video-card.reveal.visible:hover,
#photography .photo-card.reveal.visible:hover{
    transform: translate3d(0, -7px, 0) scale(1.008) !important;
  }

  .section-header.reveal,
  .contact-inner.reveal,
  .about-left.reveal,
  .about-right.reveal,
  #main-footer.reveal {
    transition:
      opacity .82s ease,
      transform .92s cubic-bezier(.16,.76,.18,1);
  }
}

/* Desktop precedence over responsive-core card transitions. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #cinematography .video-card.reveal,
#photography .photo-card.reveal{
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.975);
    transition: opacity .82s ease, transform .9s cubic-bezier(.16,.76,.18,1), border-color .42s ease, box-shadow .62s cubic-bezier(.16,.76,.18,1) !important;
  }

  #cinematography .video-card.reveal.visible,
#photography .photo-card.reveal.visible{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}

/* Desktop wheel-performance pass.  These effects are valuable at rest, but
   repeatedly painting dozens of filtered thumbnails, shadows, and backdrop
   layers during a fast wheel gesture can starve the scroll compositor.  Keep
   the editorial treatment intact and suspend only the short active-wheel
   window; the class is removed automatically by main.js after the gesture. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.is-wheel-scrolling .video-card,
  html.is-wheel-scrolling .photo-card,
  html.is-wheel-scrolling .video-card-thumb,
  html.is-wheel-scrolling .photo-card-img,
  html.is-wheel-scrolling .about-photo,
  html.is-wheel-scrolling .language-flag,
  html.is-wheel-scrolling .text-motion-word {
    transition: none !important;
    animation-play-state: paused !important;
    filter: none !important;
  }

  html.is-wheel-scrolling .video-card,
  html.is-wheel-scrolling .photo-card,
  html.is-wheel-scrolling .play-btn,
  html.is-wheel-scrolling .cat-tab,
  html.is-wheel-scrolling .contact-btn {
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Preserve the bokeh blur here as well; only its animation is paused. */
  html.is-wheel-scrolling #bokeh-canvas .bokeh {
    animation-play-state: paused !important;
  }
}

/* ===== Consolidated shared geometry ===== */
/*
 * BOKAH MEDIA — responsive core
 * Desktop visual language remains in this consolidated stylesheet.
 * This file owns the shared fluid geometry and breakpoint contract.
 */
:root {
  --responsive-max: 1440px;
  --responsive-gutter: clamp(16px, 3.5vw, 56px);
  --responsive-section: clamp(64px, 9vw, 132px);
  --responsive-gap: clamp(16px, 2.2vw, 32px);
  --responsive-card-radius: clamp(8px, 1vw, 14px);
  --responsive-nav-height: 68px;
}

html, body { max-width: 100%; min-width: 0 !important; overflow-x: hidden; }
body { min-height: 100dvh; }
body {
  background:
    radial-gradient(circle at 18% 8%, rgba(106,176,212,.055), transparent 28rem),
    radial-gradient(circle at 82% 42%, rgba(106,176,212,.035), transparent 34rem),
    #050505 !important;
}
::selection { color: #071116; background: rgba(158, 220, 239, .82); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.025); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(106,176,212,.58), rgba(106,176,212,.22)); border: 2px solid #050505; border-radius: 999px; }

/* Body copy uses the section variable so desktop and language states share
   one reading size. Labels and card metadata keep their own smaller tiers. */
#about .about-bio p,
#about .bokah-brand-copy > p:not(.label-tag),
#about .bokah-brand-copy > #brand-story-body-1 > p,
#contact .contact-form-heading > p {
  font-size: var(--section-body-size, var(--fs-body, .9rem)) !important;
}

.nav-inner, .showreel-shell, .about-inner, .portfolio-section,
.contact-inner, .footer-inner {
  width: min(calc(100% - (var(--responsive-gutter) * 2)), var(--responsive-max)) !important;
  max-width: var(--responsive-max) !important;
  margin-inline: auto !important;
}

#main-nav { height: var(--responsive-nav-height) !important; min-height: var(--responsive-nav-height) !important; }
.nav-inner { height: 100% !important; padding-inline: 0 !important; }
.section-showreel, .section-about, .portfolio-section, .section-contact {
  padding-block: var(--responsive-section) !important;
}

.section-showreel { min-height: 0 !important; }
.showreel-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(24px, 4vw, 52px) !important;
}
.hero-intro { width: min(100%, 760px) !important; margin-inline: auto !important; }
.showreel-player-stack, .showreel-player { width: 100% !important; min-width: 0 !important; }
.showreel-player { aspect-ratio: 16 / 9 !important; height: auto !important; max-height: none !important; }
.hero-actions { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }

.section-header, .section-title, .cat-tabs { min-width: 0 !important; max-width: 100% !important; }
.section-title { overflow-wrap: anywhere; }
.cat-tabs { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }

#video-grid-all, #photo-grid-all, .video-grid, .photo-grid{
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: var(--responsive-gap) !important;
  width: 100% !important; min-width: 0 !important;
  padding-inline: 0 !important;
}
#cinematography #video-grid-all, #photography #photo-grid-all {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.video-card, .photo-card{ min-width: 0 !important; width: 100% !important; border-radius: var(--responsive-card-radius) !important; }
.video-card img, .photo-card img{ max-width: 100%; }

#about .about-inner, #contact .contact-inner, .about-inner, .contact-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--responsive-gap) !important; min-width: 0 !important;
}
.about-left, .about-right, .bokah-brand-panel, .contact-profile, .contact-form {
  width: 100% !important; min-width: 0 !important; max-width: none !important;
}
.bokah-brand-panel { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: var(--responsive-gap) !important; }
.bokah-logo-evolution { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: var(--responsive-gap) !important; width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; }
.bokah-evolution-arrow { transform: rotate(90deg); justify-self: center; }
.cf-row--2 { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: var(--responsive-gap) !important; }

.modal-overlay { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important; overflow: auto !important; }
.modal-box { width: min(100%, 1100px) !important; max-width: 1100px !important; max-height: calc(100dvh - 24px) !important; overflow: auto !important; min-width: 0 !important; }
.modal-video-wrap { width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; }

@media (min-width: 600px) {
  :root { --responsive-gutter: clamp(20px, 4vw, 48px); }
  #video-grid-all, #photo-grid-all, .video-grid, .photo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #cinematography #video-grid-all, #photography #photo-grid-all { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cf-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 900px) {
  :root { --responsive-gutter: clamp(28px, 4vw, 56px); --responsive-nav-height: 76px; }
  .showreel-shell { gap: clamp(32px, 5vw, 72px) !important; }
  #about .about-inner, #contact .contact-inner, .about-inner, .contact-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start !important; }
  .bokah-brand-panel { grid-column: 1 / -1 !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: center !important; }
  .bokah-logo-evolution { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) !important; align-items: center !important; }
  .bokah-evolution-arrow { transform: none; }
  #video-grid-all, #photo-grid-all, .video-grid, .photo-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #cinematography #video-grid-all, #photography #photo-grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Bug fix: the min-width:900px rule above splits .about-inner into two
   columns, halving .about-left's own width. Legacy max-width:1024px rules
   (elsewhere in this file) then try to further split that already-halved
   .about-left into a fixed 240px photo column + text column, squeezing the
   name/bio text down to near 0px. Scoped strictly to 900-1024px so it never
   touches the untouchable 1200px+ desktop layout or the verified <900px
   layout: restore the same stacked (photo-above-text) block layout already
   used safely at 1025px+ so the text column keeps its full readable width. */


@media (min-width: 1200px) {
  #video-grid-all, #photo-grid-all, .video-grid, .photo-grid{ gap: clamp(20px, 2vw, 34px) !important; }
  #video-grid-all { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #photo-grid-all { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  #cinematography #video-grid-all { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #photography #photo-grid-all { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

@media (orientation: landscape) and (max-height: 600px) {
  :root { --responsive-section: clamp(36px, 7vw, 72px); }
  #main-nav { --responsive-nav-height: 58px; }
  .section-showreel { padding-block-start: clamp(28px, 5vw, 56px) !important; }
  .modal-box { max-height: calc(100dvh - 16px) !important; }
}

/* Keep image geometry stable while text below the image is allowed to grow. */
#cinematography .video-card, #photography .photo-card { min-height: 0 !important; overflow: hidden !important; }

#cinematography .video-card img, #photography .photo-card img {
  aspect-ratio: 16 / 10 !important; height: auto !important; min-height: 0 !important; object-fit: cover !important;
}

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

/* Desktop editorial treatment: use the wider canvas for alignment and
 * hierarchy, without changing the established container or grid geometry. */
@media (min-width: 1101px) {
  html body #cinematography .section-header,
html body #photography .section-header,
html body #ai-visuals .section-header {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  html body #cinematography .section-title,
html body #photography .section-title,
html body #ai-visuals .section-title {
    display: flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .portfolio-section .section-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left !important;
    margin-bottom: clamp(26px, 2.8vw, 38px) !important;
    padding-bottom: 18px;
  }
  .portfolio-section .section-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(154,216,238,.46), rgba(190,220,232,.12) 46%, transparent 100%);
    opacity: .78;
  }
  .portfolio-section .section-title {
    justify-content: flex-start !important;
    padding-inline: 0 !important;
    margin-bottom: 0 !important;
    font-size: clamp(1.28rem, 1.7vw, 1.78rem) !important;
    letter-spacing: .13em !important;
  }
  .portfolio-section .section-title::after { display: none !important; }
  .portfolio-section .cat-select {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    min-width: 186px !important;
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.2) !important;
  }
  #cinematography::before, #photography::before, #ai-visuals::before {
    inset: clamp(18px, 2.4vw, 34px) clamp(10px, 1vw, 18px) !important;
    border-color: rgba(190,220,232,.12) !important;
  }
  #cinematography .video-card,
#photography .photo-card{
    box-shadow: 0 18px 44px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.055) !important;
  }
}

/* One compact category control everywhere. The buttons remain in the DOM so
 * the existing keyboard/data flow stays intact, but only the native select is
 * presented to visitors at every responsive width. */
.portfolio-section .cat-tabs { display: none !important; }
.portfolio-section .cat-select {
  display: block !important;
  width: min(100%, 280px) !important;
  margin-inline: 0 !important;
}
#cinematography #cat-tabs,
#photography #photo-cat-tabs,
#ai-visuals .cat-tabs { display: none !important; }
#cinematography .cat-select,
#photography .cat-select,
#ai-visuals .cat-select {
  display: block !important;
  width: min(100%, 280px) !important;
  margin-inline: 0 !important;
}

/* Portrait phones: keep the requested editorial rhythm of eight rows. */


/* ================================================================
   DESIGN POLISH — same responsive geometry, more deliberate finish
   ================================================================ */
:root {
  --design-ink: #f4f8fa;
  --design-muted: rgba(220, 230, 235, .68);
  --design-faint: rgba(220, 230, 235, .46);
  --design-line: rgba(190, 220, 232, .15);
  --design-line-strong: rgba(106, 176, 212, .58);
  --design-glow: rgba(106, 176, 212, .16);
  --design-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Navigation: quiet glass, clear hierarchy, no additional height. */
#main-nav {
  background: linear-gradient(180deg, rgba(5, 5, 5, .94), rgba(5, 5, 5, .76)) !important;
  border-bottom: 1px solid rgba(190, 220, 232, .12) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}
.logo-name { color: var(--design-ink) !important; text-shadow: 0 0 22px rgba(106,176,212,.12); }
.nav-link { color: var(--design-muted) !important; transition: color .28s var(--design-ease), opacity .28s var(--design-ease) !important; }
.nav-link:hover, .nav-link.active { color: var(--design-ink) !important; }
.nav-link::after { background: linear-gradient(90deg, transparent, var(--design-line-strong), transparent) !important; }

/* Text rhythm: tighter display titles, calmer supporting copy. */
.section-title, .section-title-text, .hero-title{
  color: var(--design-ink) !important;
  text-wrap: balance;
  font-kerning: normal;
}
.section-title { letter-spacing: .095em !important; line-height: 1.16 !important; }
.section-title-mark {
  display: inline-block !important;
  width: 24px !important;
  height: 1px !important;
  margin-right: .18em !important;
  vertical-align: middle !important;
  background: linear-gradient(90deg, transparent, rgba(154,216,238,.8)) !important;
  box-shadow: 0 0 12px rgba(106,176,212,.24);
}
.section-title-icon { filter: drop-shadow(0 0 10px rgba(106,176,212,.26)); }
.section-intro{
  color: var(--design-muted) !important;
  text-wrap: pretty;
  line-height: 1.72 !important;
}


/* Category select: one consistent control language at every breakpoint. */
#cinematography .cat-select,
#photography .cat-select,
#ai-visuals .cat-select {
  color: var(--design-ink) !important;
  background-color: rgba(12, 20, 24, .82) !important;
  border-color: var(--design-line) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 8px 22px rgba(0,0,0,.16) !important;
  transition: border-color .28s var(--design-ease), box-shadow .28s var(--design-ease), background-color .28s var(--design-ease) !important;
}
#cinematography .cat-select:hover,
#photography .cat-select:hover,
#ai-visuals .cat-select:hover,
#cinematography .cat-select:focus,
#photography .cat-select:focus,
#ai-visuals .cat-select:focus {
  border-color: var(--design-line-strong) !important;
  background-color: rgba(16, 30, 36, .9) !important;
  box-shadow: 0 0 0 3px var(--design-glow), inset 0 1px rgba(255,255,255,.1) !important;
}

/* Buttons: consistent pill geometry while preserving their existing footprint. */
.hero-btn, .contact-btn, .about-resume-btn, .pg-btn {
  font-variant-numeric: tabular-nums;
  transition: color .28s var(--design-ease), background .28s var(--design-ease), border-color .28s var(--design-ease), box-shadow .28s var(--design-ease), transform .28s var(--design-ease) !important;
}
.hero-btn, .about-resume-btn {
  letter-spacing: .105em !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.16) !important;
}
#hero-about-btn, #hero-primary-btn, #hero-secondary-btn {
  border-radius: 999px !important;
  letter-spacing: .105em !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
html body a#hero-about-btn.hero-btn,
html body a#hero-primary-btn.hero-btn,
html body a#hero-secondary-btn.hero-btn {
  border-radius: 999px !important;
}
 .about-resume-btn {
  background: linear-gradient(135deg, rgba(106,176,212,.86), rgba(72,132,164,.86)) !important;
  border-color: rgba(170, 224, 242, .5) !important;
  color: #071116 !important;
}
.hero-btn-secondary {
  background: rgba(255,255,255,.035) !important;
  border-color: var(--design-line) !important;
  color: var(--design-ink) !important;
}
.hero-btn:hover, .about-resume-btn:hover, .contact-btn:hover, .pg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,.24), 0 0 0 3px rgba(106,176,212,.08) !important;
}
.hero-btn:focus-visible, .about-resume-btn:focus-visible, .contact-btn:focus-visible, .pg-btn:focus-visible,
.cat-select:focus-visible { outline: 2px solid rgba(154, 216, 238, .82) !important; outline-offset: 3px; }

/* Cards: controlled depth and a single text rhythm; dimensions remain intact. */
#cinematography .video-card,
#photography .photo-card{
  border-color: var(--design-line) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045) !important;
  transition: border-color .38s var(--design-ease), box-shadow .38s var(--design-ease), transform .38s var(--design-ease) !important;
}
#cinematography .video-card:hover, #photography .photo-card:hover{
  border-color: rgba(150, 210, 230, .32) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.3), 0 0 0 1px rgba(106,176,212,.08) !important;
}
.video-card::before, .photo-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 28%, transparent 72%, rgba(106,176,212,.06));
  opacity: .42;
  transition: opacity .42s var(--design-ease);
}
.video-card:hover::before, .photo-card:hover::before{ opacity: .78; }



/* Pagination: quieter than the work, still unmistakably interactive. */
.pg-btn { border-color: var(--design-line) !important; color: var(--design-muted) !important; background: rgba(255,255,255,.025) !important; border-radius: 999px !important; }
.pg-btn.active { color: #071116 !important; background: rgba(150, 215, 235, .88) !important; border-color: rgba(190, 232, 245, .68) !important; }

@media (hover: none), (pointer: coarse) {
  
  .video-card::before, .photo-card::before{ opacity: .62; }
}

@media (max-width: 600px) {
  .section-title { letter-spacing: .07em !important; }
  .section-intro{ line-height: 1.62 !important; }
  .hero-btn, .about-resume-btn { letter-spacing: .08em !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-btn,
.about-resume-btn,
.contact-btn,
.pg-btn,
#cinematography .video-card,
#photography .photo-card{ transition: none !important; transform: none !important; }
}

/* Final skills scale: keep the
   language-specific skill sizing on the canonical responsive path. */
#about .skill-name,
html.lang-ko #about .skill-name { font-size: 1.2rem !important; }
#about .skill-icon { font-size: 1.08rem !important; }
#about .skill-pct { font-size: 1.2rem !important; line-height: 1.4 !important; }

/* ===== Consolidated finish polish ===== */
/*
 * BOKAH MEDIA — finish polish
 * Visual-only layer. It does not redefine layout widths, heights, grid tracks,
 * breakpoints, or aspect ratios. It refines hierarchy, interaction and finish.
 */

:root {
  --finish-ink: #f5f8fa;
  --finish-muted: rgba(223, 232, 236, .66);
  --finish-line: rgba(222, 239, 246, .16);
  --finish-blue: #9edcf0;
  --finish-blue-soft: rgba(158, 220, 240, .14);
  --finish-ease: cubic-bezier(.22, 1, .36, 1);
}

body {
  color: var(--finish-ink);
  background-image:
    radial-gradient(circle at 50% -12%, rgba(158, 220, 240, .08), transparent 34rem),
    radial-gradient(circle at 6% 45%, rgba(106, 176, 212, .035), transparent 28rem),
    linear-gradient(180deg, #050505 0%, #080a0b 46%, #050505 100%);
}

/* First paint contract: the navigation is the stable chrome of the page.
   Content may wait for settings/i18n, but the visitor must never see a blank
   top edge or a hero painted above the menu while those requests settle. */
html:not(.chrome-ready) #main-nav,
html:not(.chrome-ready) #main-nav .nav-inner,
html:not(.chrome-ready) #main-nav .nav-logo,
html:not(.chrome-ready) #main-nav .nav-toggle,
html:not(.chrome-ready) #main-nav .language-switcher {
  visibility: visible !important;
  opacity: 1 !important;
}

html:not(.chrome-ready) #showreel,
html:not(.chrome-ready) #showreel .hero-intro {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* The markup keeps an inline hidden state while async copy is prepared. Once
   the current language/settings pass is ready, the visible state must win so
   a slow or failed optional API cannot leave a finished hero permanently blank. */
html.chrome-ready #showreel .hero-intro {
  visibility: visible !important;
}

/* Hero entrance: make the first-load reveal legible on touch devices too.
   The desktop-only sequence is intentionally not enough here
   because the touch compositor rules keep mobile motion deliberately light. */
#showreel .hero-intro.reveal.visible > .hero-kicker,
#showreel .hero-intro.reveal.visible > .hero-title,
#showreel .hero-intro.reveal.visible > .hero-role {
  animation: bmk-hero-first-paint .78s cubic-bezier(.2,.72,.18,1) both;
}

#showreel .hero-intro.reveal.visible > .hero-title { animation-delay: .14s; }
#showreel .hero-intro.reveal.visible > .hero-role { animation-delay: .29s; }

@keyframes bmk-hero-first-paint {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #showreel .hero-intro.reveal.visible > .hero-kicker,
  #showreel .hero-intro.reveal.visible > .hero-title,
  #showreel .hero-intro.reveal.visible > .hero-role {
    animation: none !important;
  }
}

/* The live markup uses anchors and .language-flag images. Keep this chrome
   independent from the older button-based language rules. */
#main-nav .language-switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 14px !important;
  padding: 3px !important;
  border: 1px solid rgba(158, 220, 240, .28) !important;
  border-radius: 999px !important;
  background: rgba(8, 17, 22, .78) !important;
  white-space: nowrap !important;
}
#main-nav .language-switcher a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: rgba(220, 235, 241, .66) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}
#main-nav .language-switcher a:hover,
#main-nav .language-switcher a:focus-visible {
  color: #f5fbfd !important;
  background: rgba(158, 220, 240, .1) !important;
  outline: none !important;
}
#main-nav .language-switcher .language-flag {
  display: block !important;
  width: 16px !important;
  height: 12px !important;
  max-width: 16px !important;
  object-fit: cover !important;
  flex: 0 0 16px !important;
}
#main-nav .language-switcher .language-divider {
  color: rgba(220, 235, 241, .34) !important;
  font-size: .65rem !important;
}

/* Refined language selector
   The active locale is treated as a quiet inset control rather than only a
   border accent. This makes the choice legible at a glance while keeping the
   navigation calm on both large and small screens. */
#main-nav .language-switcher {
  position: relative !important;
  gap: 2px !important;
  padding: 4px !important;
  border-color: rgba(158, 220, 240, .34) !important;
  background: linear-gradient(180deg, rgba(18, 31, 38, .92), rgba(7, 14, 18, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .22) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
}
#main-nav .language-switcher a {
  position: relative !important;
  min-height: 32px !important;
  padding: 0 11px !important;
  color: rgba(220, 235, 241, .62) !important;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
#main-nav .language-switcher a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0;
  transition: opacity .2s ease;
}
#main-nav .language-switcher a:hover,
#main-nav .language-switcher a:focus-visible {
  transform: translateY(-1px) !important;
  color: #f7fcff !important;
  background: rgba(132, 211, 238, .13) !important;
}
#main-nav .language-switcher a:focus-visible {
  outline: 2px solid rgba(132, 211, 238, .85) !important;
  outline-offset: 2px !important;
}
#main-nav .language-switcher a[data-lang="en"],
#main-nav .language-switcher a[data-lang="ko"] {
  border-color: transparent !important;
}
html:not(.lang-ko) #main-nav .language-switcher a[data-lang="en"],
html.lang-ko #main-nav .language-switcher a[data-lang="ko"] {
  color: #f5fcff !important;
  background: linear-gradient(180deg, rgba(78, 155, 190, .42), rgba(38, 91, 115, .38)) !important;
  box-shadow: inset 0 0 0 1px rgba(164, 231, 251, .54), 0 3px 12px rgba(31, 121, 157, .22) !important;
}
html:not(.lang-ko) #main-nav .language-switcher a[data-lang="en"]::after,
html.lang-ko #main-nav .language-switcher a[data-lang="ko"]::after {
  opacity: 1;
}
#main-nav .language-switcher .language-divider {
  width: 1px !important;
  height: 14px !important;
  margin: 0 1px !important;
  overflow: hidden !important;
  color: transparent !important;
  background: rgba(220, 235, 241, .22) !important;
}

/* Keep the currently selected language on the leading edge. */
#main-nav .language-switcher a[data-lang="en"] { order: 1 !important; }
#main-nav .language-switcher .language-divider { order: 2 !important; }
#main-nav .language-switcher a[data-lang="ko"] { order: 3 !important; }
html.lang-ko #main-nav .language-switcher a[data-lang="ko"] { order: 1 !important; }
html.lang-ko #main-nav .language-switcher .language-divider { order: 2 !important; }
html.lang-ko #main-nav .language-switcher a[data-lang="en"] { order: 3 !important; }

#main-nav .language-switcher .language-flag {
  border-radius: 2px !important;
  filter: saturate(.9) brightness(.96) !important;
}

@media (max-width: 767px) {
  #main-nav .language-switcher {
    gap: 1px !important;
    padding: 3px !important;
  }
  #main-nav .language-switcher a {
    min-height: 29px !important;
    padding-inline: 8px !important;
    font-size: .62rem !important;
  }
  #main-nav .language-switcher .language-flag {
    width: 14px !important;
    height: 11px !important;
    flex-basis: 14px !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  #main-nav .language-switcher a {
    min-height: 27px !important;
    padding-inline: 7px !important;
  }
}

/* The live sound control is .showreel-sound-toggle; older rules targeted
   .showreel-sound-hint and therefore could not style the current markup. */
#showreel .showreel-sound-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: fit-content !important;
  min-width: 132px !important;
  min-height: 46px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  border: 1px solid rgba(132, 211, 238, .48) !important;
  border-radius: 999px !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .14) !important;
  color: #bdeafa !important;
  font: 700 .68rem/1 var(--ff-sans, sans-serif) !important;
  letter-spacing: .16em !important;
  white-space: nowrap !important;
}
#showreel .showreel-sound-toggle:hover,
#showreel .showreel-sound-toggle:focus-visible {
  border-color: rgba(170, 229, 247, .78) !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  outline: none !important;
}
#showreel .showreel-sound-toggle .sound-toggle-icon {
  display: inline-grid !important;
  place-items: center !important;
  font-size: .9rem !important;
  letter-spacing: 0 !important;
}
#showreel .showreel-sound-toggle .sound-toggle-track {
  display: inline-flex !important;
  align-items: center !important;
  width: 31px !important;
  height: 17px !important;
  padding: 2px !important;
  border-radius: 999px !important;
  background: rgba(164, 220, 238, .28) !important;
  box-sizing: border-box !important;
}
#showreel .showreel-sound-toggle .sound-toggle-track span {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: #a9e5f8 !important;
  box-shadow: 0 0 8px rgba(169, 229, 248, .62) !important;
  transition: transform .25s var(--finish-ease) !important;
}
#showreel .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span {
  transform: translateX(14px) !important;
}

.nav-logo { transition: opacity .4s var(--finish-ease), transform .4s var(--finish-ease); }
.nav-logo:hover { opacity: .9; transform: translateX(2px); }
.logo-name {
  /* Keep the wordmark visually proportional to the 48px logo mark. */
  font-size: 1.28rem;
  letter-spacing: .22em;
}
.logo-sub {
  /* The slogan should read as part of the lockup, not as helper text. */
  font-size: .68rem;
  color: var(--finish-blue);
}

.nav-link {
  color: rgba(232, 240, 243, .62);
  font-weight: 800 !important;
  transition: color .35s var(--finish-ease), transform .35s var(--finish-ease);
}

.nav-link::after {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--finish-blue), transparent);
  box-shadow: 0 0 12px rgba(158, 220, 240, .35);
}

.nav-link:hover, .nav-link.active { color: var(--finish-ink); transform: translateY(-1px); }

/* Present the brand identity before the personal profile in the About grid. */
.about-inner > .bokah-brand-panel { order: -1; }

/* Safe-area and low-height tuning only changes the chrome's internal flow;
   it does not alter the established container widths or grid tracks. */
@media (max-width: 767px) {
  #main-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2000 !important;
    background: rgba(5, 7, 8, .97) !important;
    background-image: linear-gradient(180deg, rgba(10, 17, 21, .98), rgba(5, 7, 8, .96)) !important;
    border-bottom: 1px solid rgba(158, 220, 240, .24) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .42) !important;
    -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
    backdrop-filter: blur(20px) saturate(125%) !important;
  }
  #main-nav .nav-inner,
  #main-nav .nav-logo,
  #main-nav .nav-toggle,
  #main-nav .language-switcher {
    visibility: visible !important;
    opacity: 1 !important;
  }
  #main-nav .nav-logo { position: relative; z-index: 2002 !important; }
  #main-nav .nav-toggle { position: relative; z-index: 2003 !important; }
  #main-nav .language-switcher { position: relative; z-index: 2002 !important; }
  #main-nav .nav-inner {
    padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)) !important;
  }
  #main-nav .nav-logo { min-width: 0; }
  #main-nav .logo-name { overflow: hidden; text-overflow: ellipsis; }
  #main-nav .language-switcher { flex: 0 0 auto; }
  .hero-intro { text-wrap: balance; }
}

@media (orientation: landscape) and (max-height: 600px) {
  #main-nav .nav-inner { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)) !important; }
  .section-showreel { scroll-margin-top: var(--responsive-nav-height, 58px); }
  .hero-title { text-wrap: balance; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  #main-nav .nav-inner { padding-inline: clamp(22px, 3.2vw, 40px) !important; }
  .hero-title, .section-title { text-wrap: balance; }
}

@media (min-width: 1200px) {
  #main-nav .nav-inner { padding-inline: clamp(30px, 3.4vw, 56px) !important; }
}

/* Narrow desktop still has the full navigation architecture, but the legacy
   logo lockup plus five links can exceed the available 1280px content box.
   Reduce only typographic density in this band so the logo never leaves the
   viewport; the 1440px+ desktop composition remains untouched. */
@media (min-width: 1101px) and (max-width: 1340px) {
  #main-nav .nav-inner {
    padding-inline: clamp(18px, 2.4vw, 30px) !important;
    gap: 14px !important;
  }

  #main-nav .nav-logo {
    gap: 9px !important;
  }

  #main-nav .logo-img {
    width: 38px !important;
    height: 38px !important;
  }

  #main-nav .logo-name {
    font-size: 1.08rem !important;
    letter-spacing: .15em !important;
  }

  #main-nav .logo-sub {
    display: block !important;
    font-size: .54rem !important;
    letter-spacing: .16em !important;
  }

  #main-nav .nav-links {
    gap: clamp(10px, 1.1vw, 16px) !important;
  }

  #main-nav .nav-link {
    font-size: .74rem !important;
    letter-spacing: .11em !important;
  }

  #main-nav .language-switcher {
    transform: scale(.88) !important;
    transform-origin: right center !important;
  }
}

/* Text hierarchy: restrained display treatment without changing type scale. */
.hero-kicker, .label-tag{ color: var(--finish-blue); }
.hero-kicker { letter-spacing: .38em; }
.hero-title {
  letter-spacing: .085em;
  text-shadow: 0 18px 55px rgba(0, 0, 0, .48);
}
.hero-role { color: rgba(226, 237, 241, .68); }


.section-header { position: relative; }
.section-title { letter-spacing: .12em; text-shadow: 0 14px 38px rgba(0, 0, 0, .42); }
.section-title-icon { color: var(--finish-blue); filter: drop-shadow(0 0 10px rgba(158, 220, 240, .22)); }

/* Desktop gallery titles: keep both guide lines inside the same content box as
   the heading. The older cascade alternated between a static left marker,
   centered title, and a full-width bottom rule, which is why the line drifted
   away from the title on wide screens. */
@media (min-width: 1101px) {
  #main-nav .nav-inner {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), 1660px) !important;
    max-width: 1660px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  /* Desktop frame contract: every visible section uses the same outer glass
     width and alignment as the hero shell. */
  #about .about-inner,
#cinematography.portfolio-section,
#photography.portfolio-section,
#ai-visuals.portfolio-section,
#contact .contact-inner {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), 1660px) !important;
    max-width: 1660px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(222, 239, 246, .16) !important;
    border-radius: 14px !important;
    background: linear-gradient(155deg, rgba(17, 27, 32, .42), rgba(5, 8, 10, .72)) !important;
    box-shadow: 0 26px 90px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .055) !important;
  }
  #about .about-inner,
  #contact .contact-inner { width: 100% !important; }

  #showreel.section-showreel {
    padding-block-start: clamp(42px, 3.4vw, 52px) !important;
  }
  #showreel .showreel-shell { margin-top: 0 !important; }

  #cinematography .section-header,
  #photography .section-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: normal !important;
    gap: clamp(18px, 2.6vw, 42px) !important;
    width: min(100%, 1540px) !important;
    margin-inline: auto !important;
    padding-inline: var(--gallery-content-edge, 0px) !important;
    box-sizing: border-box !important;
  }

  #cinematography .section-header::before,
  #cinematography .section-header::after,
  #photography .section-header::before,
  #photography .section-header::after {
    content: "" !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 1px !important;
    transform: none !important;
    opacity: .82 !important;
    background: linear-gradient(90deg, transparent, rgba(158,220,240,.62)) !important;
  }

  #cinematography .section-header::after,
  #photography .section-header::after {
    background: linear-gradient(90deg, rgba(158,220,240,.62), transparent) !important;
  }

  #cinematography .section-title,
  #photography .section-title {
    grid-column: 2 !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: center !important;
    text-align: center !important;
  }

  /* Match the desktop gallery glass frames to the showreel shell. The
     section containers already share the same responsive max-width; the old
     gallery pseudo-frame was the only one adding an extra 12.8px inset. */
  #cinematography::before,
#photography::before,
#ai-visuals::before {
    inset: 0 !important;
    border-radius: 14px !important;
  }
}

/* Final authority for the category control: keep the dropdown treatment
   intact after the gallery-neutralization rules above. */
#cinematography .cat-select,
#photography .cat-select,
#ai-visuals .cat-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 54px !important;
  padding: 0 54px 0 20px !important;
  border: 1px solid rgba(181,224,240,.23) !important;
  border-radius: 16px !important;
  background-color: rgba(10,15,18,.94) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.065), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='m4.5 6.75 4.5 4.5 4.5-4.5' fill='none' stroke='%23a9dceb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, right 18px center !important;
  background-size: 100% 100%, 18px 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -12px 24px rgba(0,0,0,.18), 0 10px 28px rgba(0,0,0,.24) !important;
  color: rgba(245,251,253,.92) !important;
  cursor: pointer;
  transition: border-color .28s ease, background-color .28s ease, box-shadow .28s ease, transform .28s ease !important;
}



/* The resume control inherited a nearly-black text colour from the generic
   primary-button rule. Keep the established footprint, but restore readable
   icon and label contrast in every reveal state. */
#about-resume-btn,
#about-resume-btn i,
#about-resume-btn span {
  color: #bdeaf7 !important;
}

#about-resume-btn {
  background: linear-gradient(180deg, rgba(106,176,212,.12), rgba(8,16,20,.5)) !important;
  border-color: rgba(158,220,240,.62) !important;
  text-shadow: 0 0 14px rgba(158,220,240,.18);
}

#about-resume-btn:hover,
#about-resume-btn:focus-visible {
  color: #f2fbff !important;
  border-color: rgba(190,235,248,.92) !important;
  background: linear-gradient(180deg, rgba(106,176,212,.26), rgba(8,16,20,.68)) !important;
}

/* Korean copy uses the same geometry as English, with language-aware rhythm
   so longer glyph runs keep the same premium density without overflow. */
#showreel.section-showreel {
  /* Keep the fixed navigation visually first; the hero begins below it on
     every viewport instead of rendering underneath the site chrome. */
  margin-top: var(--responsive-nav-height, var(--nav-h)) !important;
}

@media (min-width: 900px) {
  /* Bring the desktop hero closer to the fixed navigation. */
  #showreel.section-showreel { margin-top: 48px !important; }
}

.logo-sub:empty { visibility: hidden !important; }
html.lang-ko body,
html.lang-ko button,
html.lang-ko input,
html.lang-ko textarea,
html.lang-ko select {
  font-family: var(--ff-ko, "Noto Sans KR", "Noto Sans", sans-serif);
}

html.lang-ko .nav-link,
html.lang-ko .nav-logo,
html.lang-ko .section-title,
html.lang-ko .label-tag,
html.lang-ko .hero-kicker,
html.lang-ko .hero-btn,
html.lang-ko .cat-tab,
html.lang-ko .cat-select {
  letter-spacing: .02em;
}

html.lang-ko .hero-title,
html.lang-ko .section-title-text{
  letter-spacing: -.035em;
  word-break: keep-all;
}


html.lang-ko .about-bio-block,
html.lang-ko .contact-form label,
html.lang-ko .contact-form input,
html.lang-ko .contact-form textarea {
  line-height: 1.82;
  word-break: keep-all;
}

@media (min-width: 768px) {
  
  html.lang-ko .about-bio-block{ max-width: 48em; }
}



/* Category dropdown ------------------------------------------------------
   The native select remains the interaction model, but the control now reads
   as a deliberate filter surface instead of a plain text input. */
#cinematography .cat-select,
#photography .cat-select,
#ai-visuals .cat-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  color-scheme: dark;
  min-height: 54px !important;
  padding: 0 54px 0 20px !important;
  border: 1px solid rgba(181, 224, 240, .23) !important;
  border-radius: 16px !important;
  background-color: rgba(10, 15, 18, .94) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.065), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='m4.5 6.75 4.5 4.5 4.5-4.5' fill='none' stroke='%23a9dceb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, right 18px center !important;
  background-size: 100% 100%, 18px 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -12px 24px rgba(0,0,0,.18),
    0 10px 28px rgba(0,0,0,.24) !important;
  color: rgba(245, 251, 253, .92) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .28s ease, background-color .28s ease,
    box-shadow .28s ease, transform .28s ease !important;
}

#cinematography .cat-select:hover,
#photography .cat-select:hover,
#ai-visuals .cat-select:hover {
  border-color: rgba(169, 220, 237, .58) !important;
  background-color: rgba(14, 25, 30, .98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 12px 30px rgba(0,0,0,.30),
    0 0 0 3px rgba(106,176,212,.07) !important;
  transform: translateY(-1px);
}

#cinematography .cat-select:focus,
#photography .cat-select:focus,
#ai-visuals .cat-select:focus {
  border-color: rgba(169, 220, 237, .82) !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 4px rgba(106,176,212,.12),
    0 14px 34px rgba(0,0,0,.32) !important;
}

#cinematography .cat-select option,
#photography .cat-select option,
#ai-visuals .cat-select option {
  color: #eef8fb;
  background: #10191d;
  font-weight: 600;
}


/* Keep the video/photo filters compact while making their labels easier to read. */
#cinematography .cat-select,
#photography .cat-select {
  width: min(100%, 230px) !important;
  min-width: 0 !important;
  max-width: 230px !important;
  min-height: 54px !important;
  padding: 0 54px 0 20px !important;
  font-size: .9rem !important;
}



/* Buttons: same footprint, richer state language and a restrained light sweep. */
.hero-btn, .cat-tab, .contact-btn, .play-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-btn::before, .cat-tab::before, .contact-btn::before, .play-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.26) 48%, transparent 72%);
  transform: translateX(-125%);
  transition: transform .72s var(--finish-ease);
  pointer-events: none;
}

.hero-btn:hover::before, .cat-tab:hover::before, .contact-btn:hover::before, .play-btn:hover::before { transform: translateX(125%); }

.hero-btn {
  border-color: rgba(222, 239, 246, .18);
  border-radius: 999px;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 28px rgba(0,0,0,.18);
  transition: transform .42s var(--finish-ease), border-color .42s var(--finish-ease), background .42s var(--finish-ease), box-shadow .42s var(--finish-ease), color .42s var(--finish-ease);
}

.hero-btn:hover { transform: translateY(-3px); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 16px 34px rgba(0,0,0,.28), 0 0 22px rgba(158,220,240,.08); }
.hero-btn:active, .cat-tab:active, .contact-btn:active { transform: translateY(0) scale(.97); }


.hero-btn-secondary { background: rgba(255,255,255,.035); border-color: rgba(222,239,246,.2); }

.cat-tab, .cat-select {
  border-color: rgba(222,239,246,.14);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 8px 22px rgba(0,0,0,.14);
}

.cat-tab.active, .cat-select:focus { border-color: rgba(158,220,240,.58); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 0 3px rgba(158,220,240,.08); }

/* Cards: depth comes from light and motion, never from changing their geometry. */
.video-card, .photo-card{
  border-color: rgba(222,239,246,.13);
  box-shadow: 0 16px 42px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.06);
  transition: transform .55s var(--finish-ease), border-color .45s var(--finish-ease), box-shadow .55s var(--finish-ease);
}

.video-card:hover, .photo-card:hover,
.video-card:focus-within, .photo-card:focus-within{
  transform: translateY(-5px);
  border-color: rgba(158,220,240,.44);
  box-shadow: 0 24px 58px rgba(0,0,0,.4), 0 0 0 1px rgba(158,220,240,.07), inset 0 1px rgba(255,255,255,.1);
}

.video-card-thumb, .photo-card-img{ transition: transform .8s var(--finish-ease), filter .6s var(--finish-ease); }
.video-card:hover .video-card-thumb, .photo-card:hover .photo-card-img{ transform: scale(1.045); filter: brightness(.82) saturate(1.06); }
.play-btn { border-color: rgba(239,249,252,.8); box-shadow: 0 12px 28px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.18); }

/* Video thumbnails must show the complete source frame.  The card already
   owns the 16:9 box; contain prevents non-16:9 sources from being cropped,
   and the hover zoom is intentionally disabled for the same reason. */
#cinematography .video-card .video-card-thumb,
.video-card .video-card-thumb {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #090909 !important;
  transform: none !important;
}

#cinematography .video-card:hover .video-card-thumb,
#cinematography .video-card:focus-visible .video-card-thumb,
#cinematography .video-card:focus-within .video-card-thumb,
.video-card:hover .video-card-thumb,
.video-card:focus-visible .video-card-thumb,
.video-card:focus-within .video-card-thumb {
  object-fit: contain !important;
  transform: none !important;
  filter: brightness(1) saturate(1) !important;
}

.contact-inner {
  border-color: rgba(222,239,246,.15);
  box-shadow: 0 26px 90px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.06);
}

/* Accessible focus treatment shared across all interactive controls. */
:where(a, button, select, [tabindex]):focus-visible {
  outline: 2px solid rgba(158,220,240,.82);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo, .nav-link, .hero-btn, .cat-tab, .contact-btn, .video-card, .photo-card,
  .video-card-thumb, .photo-card-img{ transition: none !important; }
  .hero-btn::before, .cat-tab::before, .contact-btn::before, .play-btn::before { display: none; }
}

/* Mobile editorial refresh: a calmer Apple-like hierarchy, stronger touch
   targets, and a single glass frame around each primary content group. */
@media (max-width: 767px) {
  :root {
    --mobile-gutter: 14px;
    --mobile-radius: 18px;
    --mobile-line: rgba(190, 229, 241, .18);
  }

  body { background-color: #050607; }
  #main-nav { height: 62px !important; min-height: 62px !important; }
  #main-nav .nav-inner {
    height: 62px !important;
    min-height: 62px !important;
    gap: 6px !important;
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)) !important;
  }
  #main-nav .nav-logo { order: 1 !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; }
  #main-nav .logo-name { font-size: .78rem !important; letter-spacing: .12em !important; }
  #main-nav .logo-sub { font-size: .43rem !important; letter-spacing: .08em !important; }
  #main-nav .language-switcher {
    order: 2 !important;
    flex: 0 0 auto !important;
    transform: none !important;
    margin: 0 !important;
    gap: 1px !important;
    padding: 2px !important;
  }
  #main-nav .language-switcher a { min-height: 27px !important; padding-inline: 6px !important; gap: 3px !important; font-size: .58rem !important; }
  #main-nav .language-switcher .language-flag { width: 14px !important; height: 11px !important; max-width: 14px !important; flex-basis: 14px !important; }
  #main-nav .nav-toggle { order: 3 !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; border: 1px solid rgba(190,229,241,.22) !important; border-radius: 999px !important; background: rgba(152,213,233,.08) !important; }
  #main-nav .nav-toggle span { width: 18px !important; height: 1.5px !important; }

  #showreel.section-showreel {
    padding: 20px var(--mobile-gutter) 28px !important;
    background: linear-gradient(180deg, #060809 0%, #080c0e 100%) !important;
  }
  #showreel .showreel-shell {
    width: 100% !important;
    padding: 26px 10px 18px !important;
    gap: 20px !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: var(--mobile-radius) !important;
    background: linear-gradient(155deg, rgba(17,27,32,.7), rgba(5,8,10,.9) 56%) !important;
    box-shadow: 0 22px 65px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.07) !important;
  }
  #showreel .hero-intro { padding-top: 0 !important; width: 100% !important; }
  #showreel .hero-kicker { margin-bottom: 12px !important; font-size: .58rem !important; letter-spacing: .25em !important; }
  #showreel .hero-title { margin: 0 !important; font-size: clamp(2.05rem, 10.4vw, 3.3rem) !important; line-height: .98 !important; letter-spacing: -.025em !important; text-wrap: balance; }
  #showreel .hero-role {
    width: fit-content; max-width: 100%; margin: 16px auto 0 !important; padding: 9px 14px !important;
    border: 1px solid rgba(190,229,241,.13); border-radius: 999px; background: rgba(255,255,255,.035);
    font-size: .58rem !important; line-height: 1.35 !important; letter-spacing: .07em !important; text-wrap: balance;
  }
  #showreel .showreel-player-stack { gap: 10px !important; }
  #showreel .showreel-player { border-radius: 14px !important; border-color: rgba(190,229,241,.2) !important; box-shadow: 0 14px 36px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.07) !important; }
  #showreel .showreel-sound-toggle { position: relative !important; inset: auto !important; align-self: center; min-height: 46px !important; padding-inline: 16px !important; border-radius: 999px !important; background: none !important; background-color: transparent !important; background-image: none !important; border-color: rgba(132,211,238,.44) !important; box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.12) !important; }
  #showreel .hero-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 8px !important; width: 100% !important; }
  #showreel .hero-actions > .hero-btn { width: 100% !important; max-width: none !important; min-height: 52px !important; flex: none !important; }
  #showreel .hero-btn { width: 100% !important; min-width: 0 !important; min-height: 52px !important; padding: 10px 5px !important; gap: 6px !important; border-radius: 14px !important; font-size: .61rem !important; letter-spacing: .09em !important; box-shadow: inset 0 1px rgba(255,255,255,.1), 0 10px 24px rgba(0,0,0,.22) !important; }
  #showreel .hero-btn i { font-size: .78rem !important; }
  #showreel .mobile-scroll-hint { margin-top: 0 !important; padding: 7px 2px 0 !important; font-size: .68rem !important; letter-spacing: .12em !important; color: rgba(236,246,249,.78) !important; }
  #showreel .mobile-scroll-hint i { color: var(--finish-blue) !important; animation: bmk-mobile-cue 1.8s ease-in-out infinite !important; }

  #about.section-about, #cinematography.portfolio-section, #photography.portfolio-section, #ai-visuals.portfolio-section, #contact.section-contact {
    padding: 34px var(--mobile-gutter) !important;
  }
  #about .about-inner, #contact .contact-inner, #cinematography .portfolio-section, #photography .portfolio-section {
    border-radius: var(--mobile-radius) !important;
  }
  #about .about-inner, #contact .contact-inner { gap: 28px !important; }
  #about .about-left, #about .about-right, #about .bokah-brand-panel, #contact .contact-profile, #contact .contact-form,
  #cinematography .portfolio-section, #photography .portfolio-section {
    padding: 22px 16px !important; border: 1px solid var(--mobile-line); border-radius: var(--mobile-radius); background: linear-gradient(160deg, rgba(15,23,27,.62), rgba(5,8,10,.72)); box-shadow: 0 18px 45px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.045);
  }
  .section-header { margin-bottom: 20px !important; }
  .section-title { font-size: clamp(1.05rem, 4.6vw, 1.45rem) !important; letter-spacing: .08em !important; }
  .cat-select { min-height: 46px !important; border-radius: 999px !important; }
  .video-card, .photo-card{ border-radius: 13px !important; box-shadow: 0 12px 28px rgba(0,0,0,.28) !important; }
  .video-card:hover, .photo-card:hover{ transform: none !important; }
  .about-resume-btn, .contact-btn { min-height: 52px !important; border-radius: 999px !important; }
}

@keyframes bmk-mobile-cue {
  0%, 100% { transform: translateY(0); opacity: .68; }
  50% { transform: translateY(4px); opacity: 1; }
}




/* Final desktop typography authority. Keep this last so legacy polish blocks
   cannot replace the restored language-specific sizes. */
@media (min-width: 1101px) {
  /* Desktop label scale: keep the section labels and Contact/form labels in
     one visual tier.  This final rule also prevents Contact's older
     component-specific desktop overrides from shrinking it again. */
  #about .label-tag,
  #about #brand-story-label,
  #contact .contact-profile > .label-tag,
  #contact .contact-form-heading > span,
  #contact .cf-label {
    font-size: 1.1rem !important;
  }

  #main-nav .nav-link { font-size: 12.96px !important; font-weight: 800 !important; letter-spacing: .1em !important; }
  html.lang-ko #main-nav .nav-link { font-size: 12.96px !important; }
  html:not(.lang-ko) #main-nav .nav-link { font-size: 14.08px !important; }
  html:not(.lang-ko) #main-nav .logo-sub { font-size: 12px !important; }
  html.lang-ko #showreel .hero-kicker,
  html:not(.lang-ko) #showreel .hero-kicker {
    font-size: 19.04px !important;
    font-weight: 800 !important;
  }
  #showreel .hero-role { font-size: 16.16px !important; font-weight: 650 !important; }
  html.lang-ko #main-nav .language-switcher a[data-lang="en"],
  html:not(.lang-ko) #main-nav .language-switcher a[data-lang="en"] { font-size: 10.88px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
  html.lang-ko #main-nav .language-switcher a[data-lang="ko"],
  html:not(.lang-ko) #main-nav .language-switcher a[data-lang="ko"] { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
  #showreel #mobile-scroll-hint-label { font-size: 17.6px !important; font-weight: 800 !important; }
  html.lang-ko body #showreel .hero-kicker,
  html:not(.lang-ko) body #showreel .hero-kicker {
    font-size: 19.04px !important;
    font-weight: 800 !important;
  }
}

/* Final desktop typography restore from the pre-mobile baseline.
   Keep the full lockup readable without changing any mobile rules. */
@media (min-width: 1101px) {
  #main-nav .nav-link {
    font-size: 12.96px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
  }
  html.lang-ko #main-nav .nav-link {
    font-size: 17.6px !important;
  }

  #showreel .hero-kicker {
    font-size: 16.16px !important;
    font-weight: 800 !important;
  }
  #showreel .hero-role {
    font-size: 15.36px !important;
    font-weight: 650 !important;
  }
  #main-nav .language-switcher a[data-lang="en"] {
    font-size: 10.88px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
  #main-nav .language-switcher a[data-lang="ko"] {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
  #showreel #mobile-scroll-hint-label {
    font-size: 17.6px !important;
    font-weight: 800 !important;
  }
}

/* Korean scroll cue: give the longer Hangul label one readable step more
   size without changing the English cue or the surrounding layout. */
html.lang-ko #showreel #mobile-scroll-hint-label {
  font-size: 1rem !important;
}

/* Korean desktop lockup compensation: Noto Sans KR has a smaller visual
   x-height than the Latin lockup at the same CSS size. Keep English and
   mobile untouched, and enlarge only the Korean labels requested here. */
@media (min-width: 1101px) {
  /* Keep the video counter in the modal's right metadata column. The
     legacy description wrapper otherwise traps it in the lower-left text
     area instead of placing it below the category label. */
  #video-modal.open .modal-desc-counter-line {
    display: contents !important;
  }

  html.lang-ko #main-nav .nav-link { font-size: 1.1em !important; }
  html.lang-ko #showreel .hero-kicker { font-size: 1.01rem !important; }
  html.lang-ko #showreel .hero-role { font-size: .96rem !important; }
  html.lang-ko #main-nav .language-switcher a[data-lang="ko"] { font-size: .75rem !important; }
  html:not(.lang-ko) #main-nav .language-switcher a[data-lang="ko"] { font-size: .75rem !important; }
  html.lang-ko #showreel #mobile-scroll-hint-label { font-size: 1.1rem !important; }

  html:not(.lang-ko) #main-nav .nav-link { font-size: .81rem !important; }
  html:not(.lang-ko) #showreel .hero-kicker { font-size: 1.01rem !important; }
  html:not(.lang-ko) #showreel .hero-role { font-size: .96rem !important; }
  html.lang-ko #main-nav .language-switcher a[data-lang="en"],
  html:not(.lang-ko) #main-nav .language-switcher a[data-lang="en"] { font-size: .75rem !important; }
  html:not(.lang-ko) #showreel #mobile-scroll-hint-label { font-size: 1.1rem !important; }
}

/* Final scroll cue contract. This intentionally comes after the legacy
   desktop polish block above so it cannot recreate the old pill button. */
#showreel .mobile-scroll-hint {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-height: 42px !important;
  margin-inline: auto !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: initial !important;
  line-height: 1 !important;
  text-align: center !important;
}

#showreel #mobile-scroll-hint-label {
  display: block !important;
  width: auto !important;
  color: rgba(242,248,250,.92) !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#showreel .mobile-scroll-hint i {
  position: relative !important;
  display: block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: none !important;
  animation: none !important;
}

#showreel .mobile-scroll-hint i::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 1px;
  left: 3px !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 1.8px solid var(--finish-blue) !important;
  border-bottom: 1.8px solid var(--finish-blue) !important;
  box-shadow: none !important;
  transform: rotate(45deg) !important;
  animation: bmk-chevron-cue 1.8s ease-in-out infinite !important;
}

#showreel .mobile-scroll-hint:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--finish-blue) !important;
  transform: translateY(2px) !important;
}

/* Scroll cue: an editorial text cue rather than a button. The icon font's
   chevron has a baseline that makes it look low, so draw it geometrically. */
#showreel .mobile-scroll-hint {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  margin-inline: auto !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(242,248,250,.92) !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer;
  transition: color .3s var(--finish-ease), transform .3s var(--finish-ease), opacity .3s var(--finish-ease);
}

#showreel #mobile-scroll-hint-label {
  display: block !important;
  width: auto !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap;
}

#showreel .mobile-scroll-hint i {
  position: relative;
  display: block !important;
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: none;
  animation: none !important;
}

#showreel .mobile-scroll-hint i::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-right: 1.8px solid var(--finish-blue);
  border-bottom: 1.8px solid var(--finish-blue);
  transform: rotate(45deg);
  animation: bmk-chevron-cue 1.8s ease-in-out infinite;
}

@keyframes bmk-chevron-cue {
  0%, 100% { top: 3px; opacity: .68; transform: rotate(45deg); }
  50% { top: 8px; opacity: 1; transform: rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  #showreel .mobile-scroll-hint i::before { animation: none !important; }
}

/* The first-screen scroll cue is useful only before the user starts moving.
   Apply this to the shared cue so English and Korean behave identically. */
#showreel .mobile-scroll-hint.is-scroll-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: opacity .45s ease, visibility 0s linear .45s !important;
}

/* English and Korean use the same quiet fade when the first-screen cue exits. */
#showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
  transition: opacity .45s ease, visibility 0s linear 0s !important;
}

/* Give the DIGITAL MEDIA SHOWCASE kicker one shared size step in both
   languages; the Korean language class must not receive a different scale. */
#showreel .hero-kicker {
  font-size: .88rem !important;
}


#showreel .mobile-scroll-hint:hover {
  color: var(--finish-blue) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(2px);
}

/* Final requested hero-kicker scale: one half-step smaller in both
   languages, after all legacy desktop typography overrides. */
#showreel .hero-kicker {
  font-size: .88rem !important;
}
@media (min-width: 1101px) {
  #showreel .hero-kicker,
  html.lang-ko #showreel .hero-kicker,
  html:not(.lang-ko) #showreel .hero-kicker,
  html.lang-ko body #showreel .hero-kicker,
  html:not(.lang-ko) body #showreel .hero-kicker {
    font-size: 18.4px !important;
  }
}


/* Keep the sound control compact without changing its horizontal proportions. */
#showreel .showreel-sound-toggle {
  min-height: 38px !important;
  padding-block: 0 !important;
}

/* Keep the desktop Korean label adjustment desktop-only so mobile inherits the
   shared sound-control typography. */
@media (min-width: 1101px) {
  html.lang-ko #showreel .showreel-sound-toggle .sound-toggle-label {
    font-size: .80rem !important;
  }
}

/* Photography cards follow the source orientation automatically.  The
   grid remains shared, while each card gets a calm editorial frame instead
   of cropping portrait work into the landscape default. */
.photo-card[data-photo-orientation="portrait"] {
  aspect-ratio: 4 / 5 !important;
  align-self: start;
}

.photo-card[data-photo-orientation="square"] {
  aspect-ratio: 1 / 1 !important;
  align-self: start;
}

.photo-card[data-photo-orientation="landscape"] {
  aspect-ratio: 3 / 2 !important;
  align-self: start;
}

#photography .photo-card .photo-card-img,
.photo-card .photo-card-img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

#photography .photo-grid {
  align-items: start !important;
}

/* Shared transparent frame contract. Keep every large glass surface visually
   identical to the hero shell; this final rule removes older per-section
   radius, border, opacity and shadow differences. */
:root {
  --bmk-frame-radius: 14px;
  --bmk-frame-border: rgba(132, 132, 132, .16);
  --bmk-frame-surface: linear-gradient(145deg, rgba(8, 8, 8, .38), rgba(3, 3, 3, .38) 54%, rgba(6, 6, 6, .38));
  --bmk-frame-shadow: 0 34px 110px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .018), inset 1px 0 rgba(0, 0, 0, .16), inset -1px 0 rgba(0, 0, 0, .16);
}

#showreel .showreel-shell,
#about .about-inner,
#contact .contact-inner,
#cinematography::before,
#photography::before,
#ai-visuals::before {
  border: 1px solid var(--bmk-frame-border) !important;
  border-radius: var(--bmk-frame-radius) !important;
  background: var(--bmk-frame-surface) !important;
  box-shadow: var(--bmk-frame-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hero glass frame only: deepen the black overlay without changing the
   matching surfaces used by the About, Contact, or portfolio sections. */
#showreel .showreel-shell {
  background: linear-gradient(145deg, rgba(8, 8, 8, .54), rgba(3, 3, 3, .54) 54%, rgba(6, 6, 6, .54)) !important;
}

@media (min-width: 701px) {
  #showreel .showreel-shell,
  #about .about-inner,
  #contact .contact-inner {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), 1660px) !important;
    max-width: 1660px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  #cinematography::before,
#photography::before,
#ai-visuals::before {
    inset: 0 !important;
    max-width: 1660px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
}

/* Keep the bokeh visible through the About columns, but remove the older
   blue radial/linear tint that was applied only to those two panels. */
#about .about-left,
#about .about-right {
  background: rgba(8, 8, 8, .38) !important;
}

/* Video and Photography frames use the same neutral treatment. Remove the
   older cool-blue section border and heading guide lines while keeping the
   background bokeh visible. */
#cinematography::before,
#photography::before {
  border-color: rgba(132, 132, 132, .16) !important;
  background: rgba(8, 8, 8, .38) !important;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .018) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#cinematography .section-header::before,
#cinematography .section-header::after,
#photography .section-header::before,
#photography .section-header::after {
  background: linear-gradient(90deg, transparent, rgba(150, 150, 150, .26)) !important;
}

#cinematography .section-header::after,
#photography .section-header::after {
  background: linear-gradient(90deg, rgba(150, 150, 150, .26), transparent) !important;
}

/* Remove the remaining blue gallery accents as well: the title icon, guide
   lines, category control and video overlay must stay neutral gray/black. */
#cinematography .section-title-icon,
#photography .section-title-icon {
  color: rgba(224, 224, 224, .92) !important;
  filter: none !important;
}

#cinematography .cat-select,
#photography .cat-select,
#cinematography .cat-tab,
#photography .cat-tab {
  border-color: rgba(150, 150, 150, .22) !important;
  background: rgba(8, 8, 8, .46) !important;
  box-shadow: none !important;
}

#cinematography .cat-tab.active,
#photography .cat-tab.active {
  border-color: rgba(170, 170, 170, .32) !important;
  background: rgba(28, 28, 28, .58) !important;
}

#cinematography .video-card-overlay,
#photography .photo-card-overlay {
  background: rgba(0, 0, 0, .18) !important;
}

/* The live gallery header uses the more specific gallery-title-header
   selectors, so neutralize those exact pseudo-elements too. */
#cinematography > .gallery-title-header::before,
#cinematography > .gallery-title-header::after,
#photography > .gallery-title-header::before,
#photography > .gallery-title-header::after {
  background: linear-gradient(90deg, transparent, rgba(150, 150, 150, .26)) !important;
  box-shadow: none !important;
}

#cinematography > .gallery-title-header::after,
#photography > .gallery-title-header::after {
  background: linear-gradient(90deg, rgba(150, 150, 150, .26), transparent) !important;
}

#cinematography .section-title-mark,
#photography .section-title-mark {
  background: none !important;
  box-shadow: none !important;
}

/* The cool tint was coming from the section element itself, behind the
   neutral pseudo-frame. Remove that full-section gradient so only the bokeh
   and the shared black glass surface remain visible. */
#cinematography.portfolio-section,
#photography.portfolio-section {
  background: transparent !important;
}

/* Desktop hero rhythm: the action row is intentionally absent, so reclaim
   the empty grid rhythm and lift the player and all content below the intro. */
@media (min-width: 1101px) {
  #showreel .showreel-shell {
    row-gap: clamp(20px, 1.8vw, 32px) !important;
  }

  #showreel .showreel-player-stack {
    margin-top: clamp(-34px, -2.2vw, -22px) !important;
  }
}

/* Desktop hero: keep the first screen focused on the reel. The action links
   remain available on touch layouts, where they are useful navigation targets. */
@media (min-width: 1101px) {
  #showreel .hero-actions {
    display: none !important;
  }

  #showreel .mobile-scroll-hint {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin: clamp(20px, 2vw, 30px) auto 0 !important;
    padding: 11px 17px 11px 19px !important;
    border: 1px solid rgba(158, 220, 240, .24);
    border-radius: 999px;
    background: linear-gradient(110deg, rgba(158, 220, 240, .08), rgba(255,255,255,.025));
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 12px 32px rgba(0,0,0,.24), 0 0 22px rgba(158,220,240,.055);
    color: rgba(236,246,249,.78);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    line-height: 1;
    cursor: pointer;
    transition: border-color .35s var(--finish-ease), background .35s var(--finish-ease), transform .35s var(--finish-ease), box-shadow .35s var(--finish-ease);
  }

  #showreel .mobile-scroll-hint:hover {
    border-color: rgba(158,220,240,.52);
    background: linear-gradient(110deg, rgba(158,220,240,.14), rgba(255,255,255,.045));
    box-shadow: inset 0 1px rgba(255,255,255,.14), 0 16px 38px rgba(0,0,0,.3), 0 0 28px rgba(158,220,240,.12);
    transform: translateY(-2px);
  }

  #showreel .mobile-scroll-hint i {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(158,220,240,.42);
    border-radius: 50%;
    color: var(--finish-blue);
    font-size: .62rem;
    animation: bmk-desktop-cue 1.7s cubic-bezier(.22,1,.36,1) infinite;
  }
}

@keyframes bmk-desktop-cue {
  0%, 100% { transform: translateY(-2px); opacity: .62; box-shadow: 0 0 0 0 rgba(158,220,240,0); }
  45% { transform: translateY(3px); opacity: 1; box-shadow: 0 0 0 6px rgba(158,220,240,.06); }
  70% { transform: translateY(1px); opacity: .86; box-shadow: 0 0 0 2px rgba(158,220,240,.02); }
}

@media (prefers-reduced-motion: reduce) {
  #showreel .mobile-scroll-hint i { animation: none !important; }
}

/* Unified reference-label scale: BRAND STORY is one step larger than the
   former label size, and the companion section/contact labels use that same
   final size in both English and Korean.
   Bug fix: this block was missing the min-width:1101px desktop scope that
   every sibling rule for these same selectors uses (see the identical
   selector list a few hundred lines above and below, both wrapped in
   @media (min-width: 1101px)). Left unscoped, the 1rem (16px) !important
   font-size cascaded to every viewport including 320-430px phones, where it
   overflowed the narrow label container (up to 107px of clipped text on the
   "BOKAH MEDIA · BRAND STORY" label). Scoping restores the intended
   desktop-only sizing without changing 1101px+ output (still 1rem there,
   same as before) or the mobile/tablet sizing already defined elsewhere. */
@media (min-width: 1101px) {
  #about .label-tag,
  #contact .label-tag,
  #contact .contact-form-heading > span,
  #contact .cf-label {
    font-size: 1rem !important;
  }

  #about #brand-story-label {
    font-size: 1rem !important;
  }
}

/* Brand Story logo-card labels: make the requested two-step lift visible even
   on narrow cards, where the previous vw-based minimum was too subtle. */
#about .bokah-logo-year {
  font-size: clamp(1rem, 1.18vw, 1.12rem) !important;
}

#about .bokah-logo-year small {
  font-size: clamp(1.1rem, 1.28vw, 1.22rem) !important;
}

#about .bokah-logo-year > span {
  font-size: inherit !important;
}

/* Final desktop typography authority. */
@media (min-width: 1101px) {
  #main-nav .nav-link { font-size: 12.96px !important; font-weight: 800 !important; letter-spacing: .1em !important; }
  html.lang-ko #main-nav .nav-link { font-size: 12.96px !important; }
  html:not(.lang-ko) #main-nav .nav-link { font-size: 14.08px !important; }
  html:not(.lang-ko) #main-nav .logo-sub { font-size: 12px !important; }
  html.lang-ko #showreel .hero-kicker,
  html:not(.lang-ko) #showreel .hero-kicker {
    font-size: 19.04px !important;
    font-weight: 800 !important;
  }
  #showreel .hero-role { font-size: 16.16px !important; font-weight: 650 !important; }
  html.lang-ko #main-nav .language-switcher a[data-lang="en"],
  html:not(.lang-ko) #main-nav .language-switcher a[data-lang="en"] { font-size: 10.88px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
  html.lang-ko #main-nav .language-switcher a[data-lang="ko"],
  html:not(.lang-ko) #main-nav .language-switcher a[data-lang="ko"] { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
  #showreel #mobile-scroll-hint-label { font-size: 17.6px !important; font-weight: 800 !important; }
  html.lang-ko body #showreel .hero-role,
  html:not(.lang-ko) body #showreel .hero-role {
    font-size: 16.16px !important;
    font-weight: 650 !important;
  }
  html.lang-ko body #showreel .showreel-sound-toggle .sound-toggle-label {
    font-size: .96rem !important;
  }
  html:not(.lang-ko) body #showreel .showreel-sound-toggle .sound-toggle-label {
    font-size: .84rem !important;
  }
  html.lang-ko body #main-nav .logo-sub {
    font-size: 1rem !important;
  }
  html.lang-ko body #showreel #mobile-scroll-hint-label {
    font-size: 1.22rem !important;
  }
  html:not(.lang-ko) body #showreel #mobile-scroll-hint-label {
    font-size: 1.14rem !important;
  }
  html:not(.lang-ko) body #showreel .hero-role {
    font-size: 15.64px !important;
  }
  html.lang-ko body #main-nav .nav-link {
    font-size: 14px !important;
  }
  html.lang-ko body #showreel .hero-role {
    font-size: 15.64px !important;
  }
}

/* Absolute final desktop authority for the requested label tier. */
@media (min-width: 1101px) {
  #about .label-tag,
  #about #brand-story-label,
  #contact .contact-profile > .label-tag,
  #contact .contact-form-heading > span,
  #contact .cf-label {
    font-size: 1.1rem !important;
  }
}

/* Last cascade layer: the gallery surface rules above must not flatten the
   dropdown back into a plain border. */
#cinematography .cat-select,
#photography .cat-select,
#ai-visuals .cat-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 48px !important;
  padding: 0 42px 0 16px !important;
  border: 1px solid rgba(181,224,240,.23) !important;
  border-radius: 16px !important;
  background-color: rgba(10,15,18,.94) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.065), transparent 42%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='m4.5 6.75 4.5 4.5 4.5-4.5' fill='none' stroke='%23a9dceb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, right 18px center !important;
  background-size: 100% 100%, 18px 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -12px 24px rgba(0,0,0,.18), 0 10px 28px rgba(0,0,0,.24) !important;
  color: rgba(245,251,253,.92) !important;
  cursor: pointer;
}
#cinematography .cat-select:hover,
#photography .cat-select:hover,
#ai-visuals .cat-select:hover,
#cinematography .cat-select:focus,
#photography .cat-select:focus,
#ai-visuals .cat-select:focus {
  border-color: rgba(169,220,237,.72) !important;
  background-color: rgba(14,25,30,.98) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 4px rgba(106,176,212,.11), 0 14px 34px rgba(0,0,0,.3) !important;
}


/* Requested compact filter sizing: video and photography only. */
#cinematography .cat-select,
#photography .cat-select {
  width: min(100%, 210px) !important;
  min-width: 0 !important;
  max-width: 210px !important;
  min-height: 48px !important;
  padding: 0 42px 0 16px !important;
  font-size: 1rem !important;
}



/* Final contact-form label authority: keep the blue eyebrow and field labels
   half a step smaller after all desktop and language-specific rules. */
#contact .contact-form-heading > span,
#contact .contact-form .cf-label {
  font-size: .9rem !important;
}

html.lang-ko #contact .contact-form-heading > span,
html.lang-ko #contact .contact-form .cf-label {
  font-size: 1.1rem !important;
}

/* Brand logo evolution: English and Korean must share one measured card
   system.  Do not let translated line counts change the card height or type
   scale; only the text wrapping is allowed to differ. */
@media (min-width: 901px) {
  #about .bokah-logo-card,
  #about .bokah-logo-card-featured {
    height: 496px !important;
    min-height: 496px !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
  }

  #about .bokah-logo-year,
  #about .bokah-logo-year > span {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  #about .bokah-logo-year small {
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
  }

  #about .bokah-logo-card > p,
  html.lang-ko #about .bokah-logo-card > p,
  html:not(.lang-ko) #about .bokah-logo-card > p {
    font-size: .8rem !important;
    line-height: 1.68 !important;
  }
}
/* Desktop brand-story cards: one restrained editorial system for both
   languages. The 3-column composition stays intact; only the card ratio,
   internal rhythm, and type hierarchy are refined here. */
@media (min-width: 1101px) {
  #about .bokah-logo-evolution {
    gap: clamp(18px, 1.7vw, 28px) !important;
    transform: none !important;
  }

  #about .bokah-logo-card,
  #about .bokah-logo-card-featured {
    height: 500px !important;
    min-height: 500px !important;
    padding: 24px !important;
    gap: 18px !important;
    border-radius: 14px !important;
    border-color: rgba(255,255,255,0.14) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018) 42%, rgba(5,6,7,0.78)),
      rgba(7,8,9,0.84) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 24px 60px rgba(0,0,0,0.34) !important;
  }

  #about .bokah-logo-card-featured {
    border-color: rgba(106,176,212,0.36) !important;
    box-shadow: inset 0 1px 0 rgba(187,231,246,0.08), inset 0 0 0 1px rgba(106,176,212,0.06), 0 24px 64px rgba(0,0,0,0.38) !important;
  }

  #about .bokah-logo-year {
    gap: 5px !important;
    font-size: 0.98rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.16em !important;
  }

  #about .bokah-logo-year small {
    font-size: 1.18rem !important;
    line-height: 1 !important;
    letter-spacing: 0.07em !important;
  }

  #about .bokah-logo-frame {
    width: min(100%, 218px) !important;
    max-width: 218px !important;
    border-radius: 12px !important;
    border-color: rgba(255,255,255,0.13) !important;
    background: rgba(0,0,0,0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018), 0 12px 28px rgba(0,0,0,0.18) !important;
  }

  #about .bokah-logo-card > p,
  html.lang-ko #about .bokah-logo-card > p,
  html:not(.lang-ko) #about .bokah-logo-card > p {
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 31ch !important;
    color: rgba(214,218,220,0.78) !important;
    font-size: 0.9rem !important;
    line-height: 1.72 !important;
    letter-spacing: 0.01em !important;
  }

  html.lang-ko #about .bokah-logo-card > p {
    font-size: 0.92rem !important;
    line-height: 1.78 !important;
    letter-spacing: -0.015em !important;
    word-break: keep-all !important;
  }

  #about .bokah-evolution-arrow {
    width: 38px !important;
    height: 38px !important;
    border-color: rgba(106,176,212,0.38) !important;
    background: rgba(7,9,11,0.92) !important;
    color: rgba(167,211,232,0.92) !important;
    box-shadow: 0 0 28px rgba(106,176,212,0.14) !important;
  }
}

/* Quiet finish: remove the added decorative treatment while preserving the
   larger copy and compact card height above. */
@media (min-width: 1101px) {
  #about .bokah-logo-card,
  #about .bokah-logo-card-featured {
    border: 1px solid rgba(255,255,255,0.095) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
      rgba(7,7,7,0.76) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.28) !important;
  }

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

  #about .bokah-logo-card::before,
  #about .bokah-logo-card-featured::before {
    display: none !important;
  }

  #about .bokah-logo-frame {
    border-radius: 8px !important;
    border-color: rgba(255,255,255,0.1) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #about .bokah-evolution-arrow {
    width: 38px !important;
    height: 38px !important;
    border-color: rgba(106,176,212,0.28) !important;
    background: rgba(5,5,5,0.78) !important;
    color: var(--gold) !important;
    font-size: 0.96rem !important;
    box-shadow: 0 0 24px rgba(106,176,212,0.14) !important;
  }
}

/* Return the desktop cards to the quieter pre-decoration treatment while
   retaining the improved readable copy and content-fit height. */
@media (min-width: 1101px) {
  #about .bokah-logo-card,
  #about .bokah-logo-card-featured {
    border: 1px solid rgba(255,255,255,0.095) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
      rgba(7,7,7,0.76) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.28) !important;
  }

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

  #about .bokah-logo-card::before,
  #about .bokah-logo-card-featured::before {
    display: none !important;
  }

  #about .bokah-logo-frame {
    border-radius: 8px !important;
    border-color: rgba(255,255,255,0.1) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #about .bokah-evolution-arrow {
    width: 38px !important;
    height: 38px !important;
    border-color: rgba(106,176,212,0.28) !important;
    background: rgba(5,5,5,0.78) !important;
    color: var(--gold) !important;
    font-size: 0.96rem !important;
    box-shadow: 0 0 24px rgba(106,176,212,0.14) !important;
  }
}

/* Desktop logo cards — stronger second visual pass. Keep the established
   left-copy/right-evolution composition, but give the cards a clearer luxury
   surface and make the supporting descriptions read as real editorial copy. */
@media (min-width: 1101px) {
  #about .bokah-logo-card,
  #about .bokah-logo-card-featured {
    height: 540px !important;
    min-height: 540px !important;
    padding: 28px !important;
    gap: 22px !important;
    border: 1px solid rgba(224,239,245,0.22) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(158,220,240,0.10), transparent 35%),
      linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025) 38%, rgba(3,5,7,0.92) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), inset 0 -28px 60px rgba(0,0,0,0.18), 0 28px 72px rgba(0,0,0,0.42) !important;
  }

  #about .bokah-logo-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 28px;
    width: 62px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(158,220,240,0.95), rgba(158,220,240,0));
    box-shadow: 0 0 18px rgba(158,220,240,0.3);
  }

  #about .bokah-logo-card-featured {
    border-color: rgba(158,220,240,0.48) !important;
    background:
      radial-gradient(circle at 82% 0%, rgba(244,190,89,0.13), transparent 40%),
      linear-gradient(160deg, rgba(255,255,255,0.105), rgba(255,255,255,0.025) 38%, rgba(3,5,7,0.92) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(210,242,252,0.14), inset 0 0 0 1px rgba(158,220,240,0.08), inset 0 -28px 60px rgba(0,0,0,0.18), 0 28px 78px rgba(0,0,0,0.46) !important;
  }

  #about .bokah-logo-card-featured::before {
    background: linear-gradient(90deg, rgba(244,190,89,0.96), rgba(158,220,240,0));
    box-shadow: 0 0 18px rgba(244,190,89,0.28);
  }

  #about .bokah-logo-year {
    font-size: 1.06rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.18em !important;
  }

  #about .bokah-logo-year small {
    font-size: 1.32rem !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
  }

  #about .bokah-logo-frame {
    width: min(100%, 232px) !important;
    max-width: 232px !important;
    border-radius: 14px !important;
    border-color: rgba(224,239,245,0.20) !important;
    background: rgba(0,0,0,0.22) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 16px 34px rgba(0,0,0,0.30) !important;
  }

  #about .bokah-logo-card > p,
  html.lang-ko #about .bokah-logo-card > p,
  html:not(.lang-ko) #about .bokah-logo-card > p {
    width: 100% !important;
    max-width: 34ch !important;
    margin-top: 0 !important;
    color: rgba(232,237,239,0.86) !important;
    font-size: 1rem !important;
    line-height: 1.78 !important;
    letter-spacing: 0.005em !important;
  }

  html.lang-ko #about .bokah-logo-card > p {
    font-size: 1.02rem !important;
    line-height: 1.82 !important;
    letter-spacing: -0.02em !important;
    word-break: keep-all !important;
  }

  #about .bokah-evolution-arrow {
    width: 46px !important;
    height: 46px !important;
    border-color: rgba(158,220,240,0.55) !important;
    background: rgba(5,8,10,0.96) !important;
    color: rgba(198,232,244,0.98) !important;
    font-size: 1.08rem !important;
    box-shadow: 0 0 32px rgba(106,176,212,0.22), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
  }
}

/* Final desktop content-fit correction: let the card end shortly after the
   description instead of leaving a large unused lower chamber. */
@media (min-width: 1101px) {
  #about .bokah-logo-card,
  #about .bokah-logo-card-featured {
    height: 420px !important;
    min-height: 420px !important;
    padding-bottom: 22px !important;
  }

  #about .bokah-logo-card > p,
  html:not(.lang-ko) #about .bokah-logo-card > p {
    font-size: 1.1rem !important;
    line-height: 1.68 !important;
  }

  html.lang-ko #about .bokah-logo-card > p {
    font-size: 1.12rem !important;
    line-height: 1.72 !important;
  }
}
/* High-specificity quiet override: this intentionally wins over the earlier
   decorative desktop pass without changing the responsive layout. */
@media (min-width: 1101px) {
  html body #about .bokah-logo-card,
  html body #about .bokah-logo-card-featured {
    border: 1px solid rgba(255,255,255,0.095) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
      rgba(7,7,7,0.76) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.28) !important;
  }

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

  html body #about .bokah-logo-card::before,
  html body #about .bokah-logo-card-featured::before {
    display: none !important;
  }

  html body #about .bokah-logo-frame {
    border-radius: 8px !important;
    border-color: rgba(255,255,255,0.1) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #about .bokah-evolution-arrow {
    width: 38px !important;
    height: 38px !important;
    border-color: rgba(106,176,212,0.28) !important;
    background: rgba(5,5,5,0.78) !important;
    color: var(--gold) !important;
    font-size: 0.96rem !important;
    box-shadow: 0 0 24px rgba(106,176,212,0.14) !important;
  }
}
/* Restore the decorated desktop card treatment after the temporary quiet
   rollback. Keep the larger copy and compact 420px content-fit cards. */
@media (min-width: 1101px) {
  html body #about .bokah-logo-card,
  html body #about .bokah-logo-card-featured {
    height: 420px !important;
    min-height: 420px !important;
    padding: 28px 28px 22px !important;
    gap: 22px !important;
    border: 1px solid rgba(224,239,245,0.22) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(158,220,240,0.10), transparent 35%),
      linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025) 38%, rgba(3,5,7,0.92) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), inset 0 -28px 60px rgba(0,0,0,0.18), 0 28px 72px rgba(0,0,0,0.42) !important;
  }

  html body #about .bokah-logo-card-featured {
    border-color: rgba(158,220,240,0.48) !important;
    background:
      radial-gradient(circle at 82% 0%, rgba(244,190,89,0.13), transparent 40%),
      linear-gradient(160deg, rgba(255,255,255,0.105), rgba(255,255,255,0.025) 38%, rgba(3,5,7,0.92) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(210,242,252,0.14), inset 0 0 0 1px rgba(158,220,240,0.08), inset 0 -28px 60px rgba(0,0,0,0.18), 0 28px 78px rgba(0,0,0,0.46) !important;
  }

  html body #about .bokah-logo-card::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    left: 28px !important;
    width: 62px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(158,220,240,0.95), rgba(158,220,240,0)) !important;
    box-shadow: 0 0 18px rgba(158,220,240,0.3) !important;
  }

  html body #about .bokah-logo-card-featured::before {
    background: linear-gradient(90deg, rgba(244,190,89,0.96), rgba(158,220,240,0)) !important;
    box-shadow: 0 0 18px rgba(244,190,89,0.28) !important;
  }

  html body #about .bokah-logo-frame {
    width: min(100%, 232px) !important;
    max-width: 232px !important;
    border-radius: 14px !important;
    border-color: rgba(224,239,245,0.20) !important;
    background: rgba(0,0,0,0.22) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 16px 34px rgba(0,0,0,0.30) !important;
  }

  html body #about .bokah-evolution-arrow {
    width: 46px !important;
    height: 46px !important;
    border-color: rgba(158,220,240,0.55) !important;
    background: rgba(5,8,10,0.96) !important;
    color: rgba(198,232,244,0.98) !important;
    font-size: 1.08rem !important;
    box-shadow: 0 0 32px rgba(106,176,212,0.22), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
  }

  html body #about .bokah-logo-card > p,
  html body.lang-ko #about .bokah-logo-card > p {
    font-size: 1.1rem !important;
    line-height: 1.68 !important;
  }

  html body.lang-ko #about .bokah-logo-card > p {
    font-size: 1.12rem !important;
    line-height: 1.72 !important;
  }
}
/* Final readable desktop body copy: deliberately larger than the previous
   card scale so the change remains visible in the rendered composition. */
@media (min-width: 1101px) {
  html body #about .bokah-logo-card > p,
  html body.lang-ko #about .bokah-logo-card > p {
    font-size: 1.22rem !important;
    line-height: 1.68 !important;
    font-weight: 450 !important;
  }

  html body.lang-ko #about .bokah-logo-card > p {
    font-size: 1.25rem !important;
    line-height: 1.72 !important;
  }
}
/* Selector specificity guard for the live desktop cascade. */
@media (min-width: 1101px) {
  html:root body #about .bokah-logo-card > p {
    font-size: 1.22rem !important;
    line-height: 1.68 !important;
    font-weight: 450 !important;
  }

  html:root body.lang-ko #about .bokah-logo-card > p {
    font-size: 1.25rem !important;
    line-height: 1.72 !important;
  }
}
@media (min-width: 1101px) {
  html:root.lang-ko body #about .bokah-logo-card > p {
    font-size: 1.25rem !important;
    line-height: 1.72 !important;
  }
}

/* Final desktop logo-card pass: content-fit proportions, unmistakably larger
   editorial copy, and restrained motion that survives the existing reveal
   sequence without changing mobile/tablet behavior. */
@media (min-width: 1101px) {
  html:root body #about .bokah-logo-card,
  html:root body #about .bokah-logo-card-featured {
    height: auto !important;
    min-height: 0 !important;
    padding: 30px 30px 24px !important;
    gap: 22px !important;
    overflow: hidden !important;
    align-self: stretch !important;
  }

  html:root body #about .bokah-logo-card > p {
    width: 100% !important;
    max-width: 34ch !important;
    margin: 0 !important;
    color: rgba(238,242,244,0.92) !important;
    font-size: 12.5px !important;
    line-height: 1.78 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  html:root.lang-ko body #about .bokah-logo-card > p {
    font-size: 13px !important;
    line-height: 1.82 !important;
    letter-spacing: -0.025em !important;
    word-break: keep-all !important;
  }

  html:root body #about .bokah-logo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 24%, rgba(255,255,255,0.075) 48%, transparent 68%);
    transform: translateX(-130%);
    animation: bmk-logo-card-sheen 2.4s cubic-bezier(.2,.72,.18,1) 1.25s both;
  }

  html:root body #about .bokah-logo-frame {
    width: min(100%, 248px) !important;
    max-width: 248px !important;
    border-radius: 14px !important;
    transition: border-color .35s ease, box-shadow .35s ease, transform .45s cubic-bezier(.2,.72,.18,1) !important;
  }

  html:root body #about .bokah-logo-frame img {
    transition: transform .55s cubic-bezier(.2,.72,.18,1), filter .45s ease !important;
  }

  html:root body #about .bokah-logo-card {
    transition: transform .45s cubic-bezier(.2,.72,.18,1), border-color .35s ease, box-shadow .35s ease !important;
  }

  html:root body #about .bokah-logo-card:hover {
    transform: translateY(-7px) !important;
    border-color: rgba(224,239,245,0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 58px rgba(0,0,0,0.38), 0 0 28px rgba(106,176,212,0.08) !important;
  }

  html:root body #about .bokah-logo-card:hover .bokah-logo-frame {
    transform: translateY(-2px) !important;
    border-color: rgba(224,239,245,0.28) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,0.22) !important;
  }

  html:root body #about .bokah-logo-card:hover .bokah-logo-frame img {
    transform: scale(1.045) !important;
    filter: saturate(1.08) brightness(1.04) !important;
  }

  html:root body #about .bokah-evolution-arrow {
    transition: transform .35s cubic-bezier(.2,.72,.18,1), box-shadow .35s ease, border-color .35s ease !important;
    animation: bmk-logo-arrow-breathe 3.8s ease-in-out 1.2s infinite !important;
  }

  html:root body #about .bokah-evolution-arrow:hover {
    transform: scale(1.12) !important;
    border-color: rgba(198,232,244,0.82) !important;
    box-shadow: 0 0 38px rgba(106,176,212,0.32) !important;
  }
}

@keyframes bmk-logo-card-sheen {
  0% { transform: translateX(-130%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

@keyframes bmk-logo-arrow-breathe {
  0%, 100% { box-shadow: 0 0 24px rgba(106,176,212,0.14); }
  50% { box-shadow: 0 0 34px rgba(106,176,212,0.28); }
}

@media (prefers-reduced-motion: reduce) {
  html:root body #about .bokah-logo-card::after,
  html:root body #about .bokah-evolution-arrow {
    animation: none !important;
  }
}

/* The breathing animation above must not leave the reveal-hidden arrow at
   opacity: 0. Once the Brand Story panel is visible, keep the connector
   visible regardless of which animation wins the cascade. */
html:root body #about .bokah-brand-panel.reveal.visible .bokah-evolution-arrow {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Profile lockup: one-step-up display sizing for both language variants. */
#about .about-name,
#contact .contact-name {
  font-size: clamp(1.58rem, calc(var(--section-heading-size, 1.7rem) * 1.12), 2.55rem) !important;
}

#about .name-ko {
  font-size: 0.64em !important;
}

#contact .name-ko {
  font-size: 0.80em !important;
}

/* Desktop-only: raise the Korean Contact name/role two size steps. */
@media (min-width: 1101px) {
  html body #contact .contact-name .name-ko {
    font-size: 0.80em !important;
  }
}

/* Contact title and role: one-step-up sizing in both Korean and English. */
#contact .contact-role {
  font-size: clamp(0.58rem, 0.82vw, 0.94rem) !important;
}



/* Contact form heading rhythm: give the eyebrow, title, and supporting copy
   enough separation to read as three deliberate levels instead of one block. */
#contact .contact-form-heading {
  margin-bottom: 18px !important;
}

#contact .contact-form-heading h3 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  line-height: 1.12 !important;
}

#contact .contact-form-heading > p {
  max-width: 38rem !important;
  margin: 0 !important;
  line-height: 1.82 !important;
  text-wrap: pretty;
}



/* Contact form eyebrow: raise only the requested LET'S CONNECT label. */
#contact-form-eyebrow {
  font-size: 16px !important;
}

/* Hero text lift requested from the reference coordinates. */
#showreel .hero-kicker {
  font-size: 1.3rem !important;
}

#showreel .hero-role {
  font-size: 1.3rem !important;
}

/* Override the later high-specificity desktop hero rules as well. */
html.lang-ko body #showreel .hero-kicker,
html:not(.lang-ko) body #showreel .hero-kicker,
html.lang-ko body #showreel .hero-role,
html:not(.lang-ko) body #showreel .hero-role {
  font-size: 1.3rem !important;
}

html.lang-ko body #showreel .hero-kicker {
  font-size: 1.5rem !important;
}

/* Contact form type lift: keep the field copy readable in both languages,
   then give the primary send action one additional step of emphasis. */
#contact .contact-form-heading > p,
#contact .contact-form .cf-label,
#contact .contact-form .cf-input,
#contact .contact-form .cf-input::placeholder,
#contact .contact-form .cf-result {
  font-size: 1.05rem !important;
}

#contact .contact-form .cf-submit,
#contact .contact-form .cf-submit-text,
#contact .contact-form .cf-submit-sending {
  font-size: 1.1rem !important;
}

html.lang-ko #contact .contact-form-heading > p,
html.lang-ko #contact .contact-form .cf-label,
html.lang-ko #contact .contact-form .cf-input,
html.lang-ko #contact .contact-form .cf-input::placeholder,
html.lang-ko #contact .contact-form .cf-result {
  font-size: 1.15rem !important;
}

html.lang-ko #contact .contact-form .cf-submit,
html.lang-ko #contact .contact-form .cf-submit-text,
html.lang-ko #contact .contact-form .cf-submit-sending {
  font-size: 1.2rem !important;
}

/* Contact split divider: remove the two edge lines created by the profile
   border and form pseudo-element, then place one clean line in the middle of
   the desktop grid gap. */
@media (min-width: 901px) {
  #contact .contact-profile {
    border-right: 0 !important;
  }

  #contact .contact-form::before {
    left: calc(var(--responsive-gap, 32px) * -0.5) !important;
    width: 1px !important;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(158, 220, 240, .28) 12%,
      rgba(158, 220, 240, .28) 88%,
      transparent
    ) !important;
  }
}

/* ===== MERGED SOURCE: css/text-motion.css ===== */
/* Editorial word entrance for the brand title and contact invitation. */
.text-motion .text-motion-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .72em, 0);
  filter: blur(7px);
  transition: opacity .72s cubic-bezier(.22, .61, .36, 1),
    transform .72s cubic-bezier(.22, .61, .36, 1), filter .72s ease;
  transition-delay: calc(var(--text-motion-index, 0) * 42ms);
  will-change: opacity, transform, filter;
}
.text-motion.text-motion-visible .text-motion-word {
  opacity: 1;
  transform: none;
  filter: none;
}

/* The original hero title uses background-clip:text on the h1 itself. Once
   the title is split into animated spans, keeping that parent clip paints a
   second copy of the text behind the spans. Move the gradient ownership to
   each animated word so the title remains a single, crisp lockup. */
#showreel .hero-title.text-motion {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--white-p, #fff);
}
#showreel .hero-title.text-motion .text-motion-word {
  background: linear-gradient(180deg, #fff 12%, #d5d8da 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .text-motion .text-motion-word { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Desktop gallery titles: a restrained editorial reveal that follows the
   existing section-header intersection reveal. Each glyph receives a short
   stagger, so English and Korean share the same motion language. */
@media (min-width: 1025px) {
  #cinematography .section-title-text,
  #photography .section-title-text {
    display: inline-flex !important;
    align-items: baseline;
    position: relative;
    isolation: isolate;
  }

  #cinematography .section-title-text::after,
  #photography .section-title-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.34em;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, rgba(166, 226, 245, .95) 18%, rgba(255,255,255,.78) 52%, transparent 100%);
    box-shadow: 0 0 12px rgba(132, 211, 238, .5);
    opacity: 0;
    transition: transform .9s cubic-bezier(.16,.76,.18,1) .34s, opacity .35s ease .34s;
    pointer-events: none;
  }

  #cinematography .section-title-text.text-motion-visible::after,
  #photography .section-title-text.text-motion-visible::after {
    transform: scaleX(1);
    opacity: .8;
  }

  #cinematography .section-title-text .text-motion-word,
  #photography .section-title-text .text-motion-word {
    transform: translate3d(0, .52em, 0) rotateX(-55deg);
    transform-origin: 50% 100%;
    filter: blur(5px);
    transition-duration: .68s;
    transition-delay: calc(var(--text-motion-index, 0) * 38ms);
  }

  #cinematography .section-title-text.text-motion-visible .text-motion-word,
  #photography .section-title-text.text-motion-visible .text-motion-word {
    transform: none;
    filter: none;
  }

  #cinematography .section-title-icon,
  #photography .section-title-icon {
    transition: color .45s ease, filter .65s ease, transform .65s cubic-bezier(.16,.76,.18,1);
  }

  #cinematography .section-title:has(.section-title-text.text-motion-visible) .section-title-icon,
  #photography .section-title:has(.section-title-text.text-motion-visible) .section-title-icon {
    transform: translateY(-1px) scale(1.06);
    filter: drop-shadow(0 0 15px rgba(158, 220, 240, .48));
  }
}

@media (prefers-reduced-motion: reduce) {
  #cinematography .section-title-text::after,
  #photography .section-title-text::after { transition: none; transform: scaleX(1); opacity: .65; }
}

/* ===== Consolidated desktop showreel tuning ===== */
/* Desktop-only showreel size correction. Mobile layouts are untouched. */
/* Keep the desktop navigation group visually connected to the language
   selector instead of leaving the links centered in the header. */
@media (min-width: 1200px) {
  #main-nav .nav-inner {
    justify-content: flex-start !important;
  }

  #main-nav .nav-links {
    margin-left: auto !important;
    margin-right: clamp(18px, 2.4vw, 38px) !important;
  }

  #main-nav .language-switcher {
    margin-left: 0 !important;
  }
}

@media (min-width: 1200px) {
  #showreel .showreel-shell .showreel-player {
    width: 90% !important;
    max-width: 90% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-inline: auto !important;
  }

  #showreel .mobile-scroll-hint {
    position: static !important;
    top: auto !important;
    margin-top: -12px !important;
    z-index: 3 !important;
  }

  #showreel .showreel-shell {
    row-gap: clamp(8px, .7vw, 12px) !important;
  }

  #showreel .showreel-player-stack {
    position: relative !important;
  }

  #showreel .showreel-player-stack .showreel-sound-toggle {
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 4 !important;
  }

  #showreel .showreel-player-stack .showreel-player {
    margin-top: 60px !important;
  }
}

/* ================================================================
   FLUID TYPE + LAYOUT SCALE
   Keep every responsive range on one continuous scale.  The existing
   component rules remain the visual source of truth; this final layer only
   replaces breakpoint jumps and isolated fixed text sizes with viewport-aware
   values so copy, controls, and their surrounding rhythm grow together.
   ================================================================ */
:root {
  --fluid-body: clamp(.84rem, calc(.76rem + .30vw), 1.04rem);
  --fluid-ui: clamp(.62rem, calc(.54rem + .34vw), .92rem);
  --fluid-label: clamp(.56rem, calc(.48rem + .27vw), .78rem);
  --fluid-card: clamp(.70rem, calc(.61rem + .34vw), .98rem);
  --fluid-section-title: clamp(1.28rem, calc(1.04rem + 1.55vw), 2rem);
  --fluid-heading: clamp(1.52rem, calc(1.10rem + 2.55vw), 3.15rem);
  --fluid-hero: clamp(2.20rem, calc(1.34rem + 5.15vw), 6rem);
  --fluid-control-h: clamp(34px, calc(30px + 1.05vw), 48px);
  --fluid-control-x: clamp(12px, calc(9px + 1.05vw), 24px);
  --fluid-copy-gap: clamp(10px, calc(7px + .72vw), 20px);
}

html,
body { font-size: 100%; }

body,
button,
input,
textarea,
select { font-size: var(--fluid-body); }

/* Navigation and compact UI copy. */
.nav-link,
.language-switcher,
.logo-sub,
.hero-btn,
.about-resume-btn,
.cat-select,
.pg-btn,
.contact-btn,
.cf-label,
.cf-submit,
.footer-admin,
.footer-copy,
.footer-credit,
.mobile-scroll-hint,
.showreel-sound-toggle { font-size: var(--fluid-ui) !important; }

.label-tag,
.hero-kicker,
.hero-role,
.video-placeholder span,
.photo-placeholder span,
.resume-loading { font-size: var(--fluid-label) !important; }

/* Display hierarchy.  `clamp()` keeps intermediate tablet widths from
   inheriting either an oversized desktop title or a cramped mobile title. */
#showreel .hero-title{ font-size: var(--fluid-hero) !important; }

.section-title,
.section-title-text { font-size: var(--fluid-section-title) !important; }

#about .about-name,
#contact .contact-name,
.contact-form-heading h3 { font-size: var(--fluid-heading) !important; }


.section-intro,
#about .about-bio p,
#about .bokah-brand-copy > p:not(.label-tag),
#about .bokah-logo-card > p,
#contact .contact-copy-body,
#contact .contact-form-heading > p,
#contact .cf-input,
#contact .cf-result { font-size: var(--fluid-body) !important; }



#about .skill-name,
#about .skill-pct{ font-size: var(--fluid-card) !important; }

/* Match the layout rhythm to the type scale.  The content remains width-safe
   at every size, including long Korean labels and translated copy. */
.section-showreel,
.section-about,
.portfolio-section,
.section-contact { padding-block: clamp(52px, 8vw, 132px) !important; }

.section-header,
.contact-form-heading { margin-bottom: var(--fluid-copy-gap) !important; }

.hero-actions,
.contact-links,
.cat-tabs,
.cat-select { gap: clamp(7px, 1vw, 14px) !important; }

.hero-btn,
.about-resume-btn,
.cat-select,
.cf-submit { min-height: var(--fluid-control-h) !important; }

.hero-btn,
.about-resume-btn,
.cat-select,
.cf-submit { padding-inline: var(--fluid-control-x) !important; }

.section-title,
.hero-title,
.hero-role,
.about-name,
.contact-name,
.contact-form-heading h3 { text-wrap: balance; overflow-wrap: anywhere; }


.section-intro,
.about-bio,
.bokah-brand-copy,
.bokah-logo-card > p,
.contact-copy-body,
.contact-form-heading > p{ text-wrap: pretty; }

html.lang-ko,
html.lang-ko body { word-break: keep-all; }

html.lang-ko .hero-title,
html.lang-ko .section-title,
html.lang-ko .about-name,
html.lang-ko .contact-name{ letter-spacing: -.025em !important; }





@media (min-width: 1200px) {
  .hero-intro { max-width: min(100%, 900px) !important; }
  
}

/* ================================================================
   FINAL RESPONSIVE AUTHORITY
   The site settings script writes inline profile values on resize.  These
   rules intentionally use a final, narrow desktop selector and !important
   so the rendered site follows the viewport continuously instead of jumping
   back to a fixed profile size.
   ================================================================ */
:root {
  --auto-body: clamp(.78rem, calc(.61rem + .48vw), 1.02rem);
  --auto-ui: clamp(.56rem, calc(.38rem + .43vw), .82rem);
  --auto-label: clamp(.50rem, calc(.35rem + .34vw), .70rem);
  --auto-card: clamp(.64rem, calc(.45rem + .48vw), .92rem);
  --auto-section-title: clamp(1.08rem, calc(.78rem + 1.25vw), 1.86rem);
  --auto-heading: clamp(1.38rem, calc(.88rem + 2.50vw), 3rem);
  --auto-hero: clamp(1.95rem, calc(1rem + 5.8vw), 5.8rem);
  --auto-nav-gap: clamp(6px, calc(2px + .70vw), 20px);
  --auto-nav-pad: clamp(12px, calc(6px + 1.45vw), 44px);
}

/* Text tiers used by all content surfaces.  Keep this list explicit so icon
   sizes and modal controls are not accidentally scaled with reading copy. */
html body #showreel .hero-title{ font-size: var(--auto-hero) !important; }

html body .section-title,
html body .section-title-text { font-size: var(--auto-section-title) !important; }

html body #about .about-name,
html body #contact .contact-name,
html body .contact-form-heading h3 { font-size: var(--auto-heading) !important; }


html body .section-intro,
html body #about .about-bio p,
html body #about .bokah-brand-copy > p:not(.label-tag),
html body #about .bokah-logo-card > p,
html body #contact .contact-copy-body,
html body #contact .contact-form-heading > p,
html body #contact .cf-input,
html body #contact .cf-result { font-size: var(--auto-body) !important; }



html body .nav-link,
html body .language-switcher,
html body .language-switcher a,
html body .logo-sub,
html body .hero-btn,
html body .about-resume-btn,
html body .cat-select,
html body .pg-btn,
html body .cf-label,
html body .cf-submit,
html body .footer-copy,
html body .footer-credit { font-size: var(--auto-ui) !important; }

html body .label-tag,
html body .hero-kicker,
html body .hero-role,
html body .video-placeholder span,
html body .photo-placeholder span { font-size: var(--auto-label) !important; }

html body .hero-title,
html body .section-title,
html body .about-name,
html body .contact-name,
html body .contact-form-heading h3 { text-wrap: balance; overflow-wrap: anywhere; }


html body .section-intro,
html body .about-bio,
html body .bokah-brand-copy,
html body .bokah-logo-card > p,
html body .contact-copy-body,
html body .contact-form-heading > p{ text-wrap: pretty; }

/* Desktop navigation: the logo, link group, and language selector are one
   flex budget.  The link group is allowed to shrink; nothing can push the
   right edge outside the viewport at 1024, 1280, 1440, or ultrawide widths. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  #main-nav .nav-inner {
    width: calc(100% - (var(--auto-nav-pad) * 2)) !important;
    max-width: 1660px !important;
    padding-inline: 0 !important;
    gap: var(--auto-nav-gap) !important;
    overflow: hidden !important;
  }

  #main-nav .nav-logo {
    /* flex-shrink is pinned to 0 (not the previous "0 1 auto") because the
       brand text's own scrollWidth is a fixed ~191px at this band's locked
       font-size (see the 1101px+ "brand lockup" rule below) - it never
       actually needs to shrink. Letting it shrink meant its rendered width
       tracked whatever room nav-links/language-switcher's own clamp()
       gaps left behind at a given viewport width, and that room shrinks
       and grows non-monotonically as those clamp() curves cross each
       other - producing the intermittent ellipsis clipping fixed here.
       max-width stays as the outer cap so the logo still can never crowd
       the link group at any width in this band. */
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 42% !important;
    gap: clamp(6px, .85vw, 14px) !important;
  }

  #main-nav .logo-img {
    width: clamp(30px, calc(24px + 1.35vw), 48px) !important;
    height: clamp(30px, calc(24px + 1.35vw), 48px) !important;
  }

  #main-nav .logo-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(.68rem, calc(.40rem + .62vw), 1.05rem) !important;
    letter-spacing: clamp(.055em, calc(.015em + .20vw), .20em) !important;
  }

  #main-nav .logo-sub {
    max-width: 7.5ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(.38rem, calc(.22rem + .22vw), .68rem) !important;
    letter-spacing: clamp(.04em, calc(.01em + .12vw), .16em) !important;
  }

  #main-nav .nav-links {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: var(--auto-nav-gap) !important;
    margin-inline: 0 !important;
  }

  #main-nav .nav-links .nav-link {
    font-size: clamp(.48rem, calc(.29rem + .34vw), .74rem) !important;
    letter-spacing: clamp(.035em, calc(.005em + .09vw), .14em) !important;
    white-space: nowrap !important;
  }

  #main-nav .language-switcher {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 20% !important;
    gap: clamp(2px, .35vw, 6px) !important;
    margin-left: 0 !important;
  }

  #main-nav .language-switcher a {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-inline: clamp(2px, .4vw, 7px) !important;
  }

  #main-nav .language-switcher .language-flag {
    width: clamp(11px, calc(8px + .32vw), 18px) !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
}



/* Mobile final authority: the old mobile polish layer contains several fixed
   values for the hero and skills panel.  These values track the usable card
   width so copy stays readable without making the graph taller than the
   screen on narrow phones. */


/* ================================================================
   DEVICE-RANGE CALIBRATION
   Continuous values handle the in-between widths; these light calibration
   bands only adjust the composition when the available canvas changes mode.
   Covered ranges: small phones, large phones, tablet portrait, tablet
   landscape, compact desktop, standard desktop, and ultrawide desktop.
   ================================================================ */
:root {
  --device-gutter: clamp(12px, 3.4vw, 56px);
  --device-section-pad: clamp(48px, 8vw, 132px);
  --device-content-gap: clamp(12px, 2.4vw, 34px);
  --device-card-pad: clamp(10px, 1.35vw, 20px);
  --device-heading: clamp(1.18rem, calc(.84rem + 1.55vw), 2.08rem);
  --device-body: clamp(.78rem, calc(.60rem + .52vw), 1.04rem);
  --device-ui: clamp(.54rem, calc(.37rem + .45vw), .86rem);
}

html body .section-showreel,
html body .section-about,
html body .portfolio-section,
html body .section-contact {
  padding-block: var(--device-section-pad) !important;
}

html body .nav-inner,
html body .showreel-shell,
html body .about-inner,
html body .portfolio-section,
html body .contact-inner,
html body .footer-inner {
  width: min(calc(100% - (var(--device-gutter) * 2)), var(--responsive-max, 1440px)) !important;
  min-width: 0 !important;
}

html body .showreel-shell,
html body .about-inner,
html body .contact-inner,
html body .bokah-brand-panel { gap: var(--device-content-gap) !important; }



html body .section-title { font-size: var(--device-heading) !important; }
html body .section-intro,
html body .about-bio p,
html body .contact-copy-body,
html body .contact-form-heading > p { font-size: var(--device-body) !important; }

html body .cat-select,
html body .cf-input,
html body .cf-submit { font-size: var(--device-ui) !important; }

/* Small portrait phones: protect the first viewport and keep three action
   buttons readable without forcing horizontal scroll. */


/* Large portrait phones and small portrait tablets. */


/* Low/high-resolution tablet portrait widths (iPad mini through iPad Pro). */


/* Tablet landscape: preserve the two-column content rhythm but tighten the
   top chrome and hero so 768px-tall canvases do not feel vertically cramped. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  :root {
    --device-gutter: clamp(20px, 4vw, 42px);
    --device-section-pad: clamp(42px, 6vw, 78px);
    --device-content-gap: clamp(16px, 2.2vw, 26px);
  }

  html body #showreel .hero-title { font-size: clamp(2.12rem, 5.2vw, 4.1rem) !important; }
  
  html body #about .skill-item { padding: clamp(12px, 1.6vw, 18px) !important; }
}

/* Compact landscape devices and short laptop viewports. */
@media (min-width: 768px) and (max-height: 820px) and (orientation: landscape) {
  :root { --device-section-pad: clamp(34px, 5vw, 64px); }
  html body #main-nav { --responsive-nav-height: clamp(56px, 7vw, 68px) !important; }
  html body #showreel .hero-title { line-height: .98 !important; }
  html body #showreel .hero-actions { gap: 7px !important; }
}

/* Desktop canvas bands.  Typography remains fluid inside each band; these
   only give the layout enough breathing room at the edges. */
@media (min-width: 1200px) and (max-width: 1599px) {
  :root {
    --device-gutter: clamp(26px, 3.2vw, 48px);
    --device-section-pad: clamp(70px, 7vw, 112px);
  }
  html body #showreel .hero-title { font-size: clamp(3.6rem, 5.2vw, 5.5rem) !important; }
}

@media (min-width: 1600px) {
  :root {
    --device-gutter: clamp(40px, 4vw, 76px);
    --device-section-pad: clamp(92px, 7vw, 144px);
    --device-content-gap: clamp(24px, 2vw, 38px);
  }
  html body #showreel .hero-title { font-size: clamp(4.6rem, 5vw, 7rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .hero-title,
  html body .section-title,
  html body .skill-item { transition: none !important; }
}

/* Final desktop photo-modal metadata order: page count | title/description | category. */
@media (min-width: 1201px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "counter title category"
      "counter desc category" !important;
    align-items: stretch !important;
    column-gap: clamp(16px, 1.5vw, 24px) !important;
    row-gap: 4px !important;
    min-height: 112px !important;
    padding: clamp(15px, 1.35vw, 21px) clamp(18px, 1.7vw, 27px) !important;
  }

  #lightbox.open .photo-modal-copy { display: contents !important; }

  #lightbox.open #photo-counter {
    grid-area: counter !important;
    align-self: center !important;
    justify-self: start !important;
    height: 26px !important;
    padding: 0 9px !important;
    font-size: .68rem !important;
    line-height: 1 !important;
  }

  #lightbox.open #photo-modal-title {
    grid-area: title !important;
    align-self: end !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(.92rem, 1.02vw, 1.14rem) !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #lightbox.open #lightbox-caption {
    grid-area: desc !important;
    align-self: start !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: clamp(.72rem, .78vw, .88rem) !important;
    line-height: 1.45 !important;
    text-align: left !important;
    white-space: pre-line !important;
  }

  #lightbox.open #photo-modal-category {
    grid-area: category !important;
    align-self: center !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .35em !important;
    max-width: none !important;
    padding: 5px 10px !important;
    font-size: clamp(.68rem, .72vw, .82rem) !important;
    line-height: 1.2 !important;
    letter-spacing: .10em !important;
    white-space: nowrap !important;
  }
}

/* Some 1201px+ touch-capable laptops also receive the tablet marker in JS.
   Keep the desktop metadata layout authoritative for those desktop widths. */
@media (min-width: 1201px) {
  html.is-touch-tablet #lightbox.open > .lightbox-box > .photo-modal-info {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "counter title category" "counter desc category" !important;
    align-items: stretch !important;
    gap: 4px clamp(16px, 1.5vw, 24px) !important;
    min-height: 112px !important;
    max-height: 210px !important;
    padding: clamp(15px, 1.35vw, 21px) clamp(18px, 1.7vw, 27px) !important;
  }
  html.is-touch-tablet #lightbox.open #photo-modal-title {
    grid-area: title !important;
    align-self: end !important;
  }
  html.is-touch-tablet #lightbox.open #lightbox-caption {
    display: -webkit-box !important;
    grid-area: desc !important;
    align-self: start !important;
  }
  html.is-touch-tablet #lightbox.open #photo-counter {
    grid-area: counter !important;
    align-self: center !important;
    justify-self: start !important;
  }
  html.is-touch-tablet #lightbox.open #photo-modal-category {
    grid-area: category !important;
    align-self: center !important;
    justify-self: end !important;
  }
}

/* Compact desktop photo metadata: two tight rows.
   Row 1: counter + title. Row 2: description + right-aligned category. */
@media (min-width: 1201px) {
  #lightbox.open > .lightbox-box > .photo-modal-info,
  html.is-touch-tablet #lightbox.open > .lightbox-box > .photo-modal-info {
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "counter title ." "desc desc category" !important;
    align-items: center !important;
    column-gap: clamp(10px, 1vw, 16px) !important;
    row-gap: 2px !important;
    min-height: 76px !important;
    max-height: 110px !important;
    padding: 9px clamp(14px, 1.3vw, 20px) !important;
  }

  #lightbox.open #photo-counter,
  html.is-touch-tablet #lightbox.open #photo-counter {
    grid-area: counter !important;
    align-self: center !important;
    justify-self: start !important;
    height: 24px !important;
    padding: 0 8px !important;
  }

  #lightbox.open #photo-modal-title,
  html.is-touch-tablet #lightbox.open #photo-modal-title {
    grid-area: title !important;
    align-self: center !important;
  }

  #lightbox.open #lightbox-caption,
  html.is-touch-tablet #lightbox.open #lightbox-caption {
    grid-area: desc !important;
    align-self: center !important;
    padding: 0 !important;
    line-height: 1.3 !important;
  }

  #lightbox.open #photo-modal-category,
  html.is-touch-tablet #lightbox.open #photo-modal-category {
    grid-area: category !important;
    align-self: center !important;
    justify-self: end !important;
    padding: 4px 8px !important;
    line-height: 1.15 !important;
  }
}

/* Desktop preservation lock.  The 1200px+ composition is intentionally
   restored to the established desktop values; all automatic calibration
   above is for the non-desktop device ranges only. */
@media (min-width: 1200px) {
  :root {
    --device-gutter: var(--responsive-gutter);
    --device-section-pad: var(--responsive-section);
    --device-content-gap: var(--responsive-gap);
  }

  html body,
  html body button,
  html body input,
  html body textarea,
  html body select { font-size: var(--fs-base, 16px) !important; }

  html body .nav-inner,
  html body .showreel-shell,
  html body .about-inner,
  html body .portfolio-section,
  html body .contact-inner,
  html body .footer-inner {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), 1660px) !important;
    max-width: 1660px !important;
    margin-inline: auto !important;
  }

  html body .portfolio-section,
  html body .footer-inner {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), var(--responsive-max)) !important;
    max-width: var(--responsive-max) !important;
  }

  html body .section-showreel,
  html body .section-about,
  html body .portfolio-section,
  html body .section-contact { padding-block: var(--responsive-section) !important; }

  html body .showreel-shell { gap: clamp(32px, 5vw, 72px) !important; }
  html body .about-inner,
  html body .contact-inner { gap: var(--responsive-gap) !important; }

  html body #showreel .hero-title {
    font-size: var(--section-heading-size, clamp(2.8rem, 8vw, 7rem)) !important;
  }
  
  html body #showreel .hero-role {
    font-size: calc(var(--section-body-size, .88rem) * .74) !important;
  }
  html body #showreel .hero-kicker {
    font-size: calc(var(--section-body-size, .88rem) * .72) !important;
  }
  html body #showreel .hero-btn {
    font-size: calc(var(--section-body-size, .94rem) * .9) !important;
  }

  html body #about .about-name {
    font-size: var(--section-heading-size, 1.7rem) !important;
  }
  html body #about .about-bio p {
    font-size: var(--section-body-size, var(--fs-body, inherit)) !important;
  }
  html body #about .label-tag,
  html body #about .skill-name{
    font-size: calc(var(--section-body-size, .84rem) * .82) !important;
  }
  html body #about .skill-pct { font-size: 1.2rem !important; }
  html body #about .about-resume-btn {
    font-size: calc(var(--section-body-size, .94rem) * .88) !important;
  }

  html body #cinematography .section-title,
html body #photography .section-title,
html body #ai-visuals .section-title {
    font-size: clamp(1.38rem, calc(var(--section-heading-size, var(--fs-heading, 1.6rem)) * 1.08), 2.24rem) !important;
  }

  
  

  html body #contact .contact-name {
    font-size: clamp(1.42rem, calc(var(--section-heading-size, 1.55rem) * .82), 1.68rem) !important;
  }
  html body #contact .contact-copy-body,
  html body #contact .contact-form-heading > p,
  html body #contact .cf-result {
    font-size: var(--section-body-size, var(--fs-body, inherit)) !important;
  }

  html body .nav-inner {
    justify-content: flex-start !important;
    padding-inline: 0 !important;
    gap: 32px !important;
    overflow: visible !important;
  }
  html body #main-nav .nav-logo {
    flex: 0 0 auto !important;
    max-width: none !important;
    gap: 14px !important;
  }
  html body #main-nav .logo-img { width: 48px !important; height: 48px !important; }
  html body #main-nav .logo-name {
    font-size: calc(var(--fs-nav, .78rem) * 1.28) !important;
    letter-spacing: .2em !important;
  }
  html body #main-nav .logo-sub {
    max-width: none !important;
    font-size: calc(var(--fs-nav, .78rem) * .9) !important;
    letter-spacing: .35em !important;
  }
  html body #main-nav .nav-links {
    flex: 0 1 auto !important;
    justify-content: initial !important;
    gap: clamp(16px, 2vw, 30px) !important;
    margin-left: auto !important;
    margin-right: clamp(18px, 2.4vw, 38px) !important;
  }
  html body #main-nav .nav-link {
    flex: 0 0 auto !important;
    font-size: var(--fs-nav, inherit) !important;
    letter-spacing: .16em !important;
  }
  html body #main-nav .language-switcher {
    flex: 0 0 auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    transform: none !important;
  }
}

/* English desktop navigation: keep the longer Latin labels visually grouped
   without changing the Korean desktop spacing or touch layouts. */
@media (min-width: 1200px) {
  html:not(.lang-ko) body #main-nav .nav-links {
    gap: clamp(4px, .55vw, 8px) !important;
  }

  html:not(.lang-ko) body #main-nav .logo-name {
    letter-spacing: .12em !important;
  }

  html:not(.lang-ko) body #main-nav .logo-sub {
    letter-spacing: .14em !important;
  }
}

/* Keep the desktop brand lockup identical across English and Korean. The
   glyphs change with the language, but the typography does not. */
@media (min-width: 1101px) {
  #main-nav .logo-name {
    font-family: var(--ff-noto) !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
  }

  #main-nav .logo-sub {
    font-family: var(--ff-noto) !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    line-height: 1.25 !important;
  }
}

/* Desktop-only About portrait scale: approximately 20% smaller. */
@media (min-width: 1201px) {
  html body #about .about-photo-wrap {
    width: min(54.4%, 208px) !important;
  }
}

/* Desktop hero typography: scale the complete text group proportionally so
   the kicker, title, and role keep their current rhythm while appearing 10%
   smaller.  Keep this desktop-only so tablet and mobile compositions remain
   unchanged. */
@media (min-width: 1201px) {
  html body #showreel .hero-intro {
    transform: scale(.81) !important;
    transform-origin: top center !important;
  }
}

/* Korean desktop skills graph: reduce skill labels and percentages by a half-step only. */
@media (min-width: 1201px) {
  html.lang-ko body #about .skill-name,
  html.lang-ko body #about .skill-pct{
    font-size: 1.1rem !important;
  }
}

/* Final desktop wheel compositor contract.  Keep this at EOF because the
   consolidated stylesheet intentionally contains many later visual tiers. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.is-wheel-scrolling .video-card,
  html.is-wheel-scrolling .photo-card,
  html.is-wheel-scrolling .play-btn,
  html.is-wheel-scrolling .cat-tab,
  html.is-wheel-scrolling .contact-btn {
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: none !important;
  }

  html.is-wheel-scrolling .video-card-thumb,
  html.is-wheel-scrolling .photo-card-img,
  html.is-wheel-scrolling .about-photo,
  html.is-wheel-scrolling .language-flag,
  html.is-wheel-scrolling .text-motion-word {
    filter: none !important;
    animation-play-state: paused !important;
    transition: none !important;
  }

  /* Preserve the bokeh's inline blur while scrolling. Only its motion is
     paused; the soft background treatment must not snap into sharp circles. */
  html.is-wheel-scrolling #bokeh-canvas .bokeh {
    animation-play-state: paused !important;
  }

  /* Section-scoped gallery rules have higher specificity than the generic
     card rule above, so mirror those section scopes here. */
  html.is-wheel-scrolling #cinematography .video-card,
html.is-wheel-scrolling #photography .photo-card{
    box-shadow: none !important;
  }

  html.is-wheel-scrolling body #cinematography .video-card.reveal,
html.is-wheel-scrolling body #photography .photo-card.reveal{
    box-shadow: none !important;
    transition: none !important;
  }
}

/* Final desktop language parity: Korean uses the exact English lockup
   metrics for the wordmark and tagline. */
@media (min-width: 1101px) {
  html.lang-ko body #main-nav .logo-name,
  html:not(.lang-ko) body #main-nav .logo-name {
    font-family: var(--ff-noto) !important;
    font-size: calc(var(--fs-nav, .78rem) * 1.28) !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
  }

  html.lang-ko body #main-nav .logo-sub,
  html:not(.lang-ko) body #main-nav .logo-sub {
    font-family: var(--ff-noto) !important;
    font-size: calc(var(--fs-nav, .78rem) * .9) !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    line-height: 1.25 !important;
  }
}

/* Let desktop wheel input pass through the embedded showreel. Vimeo captures
   wheel events inside its iframe, which can make the page appear to hit a
   hard stop when the pointer is over the hero video. Playback and the
   dedicated SOUND control remain available through the surrounding UI. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #showreel-iframe {
    pointer-events: none !important;
  }
}

/* Final category-select fit: leave enough room for the full bilingual
   placeholder while keeping the control only slightly wider. */
#cinematography .cat-select,
#photography .cat-select {
  width: min(100%, 230px) !important;
  max-width: 230px !important;
  font-size: .9rem !important;
}
#lightbox.open .photo-watermark-lightbox .photo-watermark-logo {
  width: clamp(33px, 3.97vw, 60px) !important;
  opacity: .7 !important;
}


/* Prevent administrator-provided brand artwork from expanding the document
   to its intrinsic pixel width. Normal-sized artwork is unaffected. */
#brand-logo-old-img,
#brand-logo-new-img {
  max-width: 100%;
  height: auto;
}

/* Keep the desktop layout viewport stable while the page changes scroll
   position. Without a reserved gutter Chromium can use the native 16px
   scrollbar during the gated first paint, then switch to the styled 8px
   scrollbar once scrolling begins. That changes the centered Contact frame
   by half the difference (about 4px) and looks like a late rightward jump. */
@media (min-width: 768px) {
  html {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
  }

  /* The section itself must use the same stable body width. A legacy
     8px-reduction rule can otherwise win during the gated first paint and
     disappear after the first scroll, moving the centered Contact frame. */
  #contact.section-contact {
    width: 100vw !important;
    max-width: none !important;
  }
}

/* === MOBILE_ZONE_START === */

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

@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;
  }
}

@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 (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 (max-width:520px) {
  .section-intro { font-size:.66rem;line-height:1.55; }
  
  
  
  
  
}

@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:599px) {
  
  
  
}

@media (orientation:landscape) and (max-width:950px) and (max-height:560px) {
  #ai-visuals { height:auto !important;min-height:0 !important;overflow:visible !important; }
  #ai-visuals .section-header { margin-bottom:8px !important; }
  #ai-visuals .section-intro { margin-top:7px;line-height:1.4; }
  #ai-visuals .cat-tabs { margin-bottom:8px !important; }
  
  
  
  
  
}

@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) {
  .photo-watermark-lightbox .photo-watermark-logo {
    width: 34px !important;
  }
}

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

@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; }
}

@media (max-width: 768px) {
  #ai-visuals .section-header {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  #ai-visuals .section-header::before { height: 1.8em !important; }

  #ai-visuals .section-header::after { min-width: 16px !important; }

  #ai-visuals .section-intro {
    margin-left: clamp(6px, 1.5vw, 12px) !important;
  }
}

@media (max-width: 560px) {
  #ai-visuals .section-header {
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  #ai-visuals .section-header::before {
    align-self: stretch !important;
    height: auto !important;
  }

  #ai-visuals .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 { order: 3 !important; }
}

@media (max-width: 600px) {
  .photo-watermark-lightbox {
    padding: 0 7px 7px !important;
    font-size: .64rem !important;
    letter-spacing: .02em !important;
    -webkit-text-stroke: .38px rgba(0,0,0,.74) !important;
    text-shadow:
      0 1px 2px rgba(0,0,0,.52),
      0 0 2px rgba(0,0,0,.3) !important;
  }

  .photo-watermark-lightbox .photo-watermark-logo {
    top: 8px !important;
    left: 8px !important;
    width: 40px !important;
    opacity: .54 !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.52)) !important;
  }
}

@media (max-width: 768px) {
  
}

@media (max-width: 600px) {
  .photo-watermark-lightbox {
    padding: 0 9px 9px;
    font-size: 0.82rem;
    letter-spacing: 0.045em;
  }

  .photo-watermark-lightbox .photo-watermark-logo {
    top: 10px;
    left: 10px;
    width: 52px;
  }
}

@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 {
    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;
  }
}

@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-links { margin-top: 0; }
}

@media (max-width: 768px) {
  body::after { opacity: 0.018; }
  .section-header::before,
  .contact-inner::before {
    width: min(120px, 42vw);
    opacity: 0.34;
  }
}

@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; }
}

@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; }
}

@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 (max-width: 768px) and (orientation: portrait) {
  .nav-links.open .nav-link {
    font-size: calc(var(--fs-nav, 0.78rem) * 1.1) !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);
  }
}

@media (min-width: 701px) and (max-width: 1180px) {
  #about .about-bio p,
  #about .bokah-brand-copy > p:not(.label-tag){
    text-justify: inter-word;
    word-spacing: -.018em;
    letter-spacing: .004em;
    line-height: 1.82;
  }
}

@media (max-width: 700px) {
  
}

@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 (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; }
}

@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;
  }
}

@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 (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;
  }
}

@media (max-width: 700px) {
  #video-modal .modal-youtube-stats {
    margin-bottom: 0;
  }
}

@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;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape),
       (max-width: 767px) {
  /* Compact widths: one consistent hamburger menu, never crowded links. */
  #main-nav .nav-toggle { display: flex !important; }
}

@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;
  }
}

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

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

@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;
  }
}

@media (max-width: 768px) {
  
}

@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 (max-width: 600px) {
  #showreel .showreel-shell .showreel-player {
    border-radius: 16px !important;
    clip-path: inset(0 round 16px) !important;
  }
}

@media (max-width: 480px) {
  
}

@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 {
    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;
  }
}

@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;
  }
}

@media (max-width: 900px) { .language-switcher { margin:10px auto 0; width:max-content; } }

@media (min-width: 700px) and (max-width: 1180px) and (any-pointer: coarse) {
  #cinematography,
  #photography { padding-top: clamp(42px, 7vw, 76px); padding-bottom: clamp(54px, 8vw, 92px); }
  #cinematography .cat-tabs,
  #photography .cat-tabs { margin: 0 0 22px; max-width: 100%; overflow: visible; }
  #cinematography .cat-select,
  #photography .cat-select { max-width: min(300px, calc(100% - 28px)); margin: 0 0 22px; }
  #video-grid-all,
  #photo-grid-all { width: 100%; max-width: 100%; overflow: hidden; }
  #video-pagination,
  #photo-pagination { margin-top: 28px; margin-bottom: 18px; padding-bottom: 8px; }
}

@media (min-width: 900px) and (max-width: 1024px) {
  .about-left, .section-about .about-left {
    display: block !important;
    grid-template-columns: none !important;
  }
}

@media (max-width: 767px) {
html.lang-ko .hero-title { font-size: clamp(2.25rem, 11vw, 3.35rem); }
  html.lang-ko .section-title-text { font-size: .92em; }
  
  html.lang-ko .about-bio-block{ line-height: 1.78; }
  html.lang-ko .nav-link { letter-spacing: .01em; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  #showreel.section-showreel { margin-top: 58px !important; }
  html.lang-ko .hero-title { letter-spacing: -.045em; }
  
}

@media (max-width: 600px) {
  #contact .contact-role {
    font-size: clamp(0.56rem, 2.3vw, 0.68rem) !important;
  }
}

@media (max-width: 599px) {
  :root {
    --fluid-body: clamp(.82rem, calc(.72rem + .42vw), .92rem);
    --fluid-card: clamp(.65rem, calc(.54rem + .62vw), .80rem);
    --fluid-hero: clamp(2.02rem, calc(1.34rem + 5.7vw), 3.15rem);
  }

  .hero-actions { row-gap: 8px !important; }
  .hero-btn { padding-inline: clamp(10px, 3vw, 16px) !important; }
  .section-title { line-height: 1.2 !important; }
}

@media (min-width: 600px) and (max-width: 1199px) {
  .hero-intro { max-width: min(100%, 760px) !important; }
  
}

@media (max-width: 767px) {
  :root {
    --mobile-auto-body: clamp(.76rem, calc(.62rem + .70vw), .94rem);
    --mobile-auto-ui: clamp(.52rem, calc(.38rem + .62vw), .72rem);
    --mobile-auto-hero: clamp(1.82rem, calc(1.14rem + 5.9vw), 3.15rem);
    --mobile-auto-section: clamp(1.02rem, calc(.78rem + 1.3vw), 1.38rem);
    --mobile-auto-name: clamp(1.28rem, calc(.92rem + 2.8vw), 1.82rem);
  }

  html body,
  html body button,
  html body input,
  html body textarea,
  html body select { font-size: var(--mobile-auto-body); }

  html body #showreel .hero-kicker {
    font-size: var(--mobile-auto-ui) !important;
    margin-bottom: clamp(8px, 2.5vw, 12px) !important;
    letter-spacing: clamp(.12em, 1.2vw, .25em) !important;
  }

  html body #showreel .hero-title {
    font-size: var(--mobile-auto-hero) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
    max-width: 100% !important;
  }

  html body #showreel .hero-role {
    max-width: 100% !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
    padding: clamp(7px, 2vw, 9px) clamp(10px, 3.4vw, 14px) !important;
    font-size: var(--mobile-auto-ui) !important;
    line-height: 1.4 !important;
    letter-spacing: clamp(.025em, .55vw, .07em) !important;
  }

  

  html body #showreel .hero-actions > .hero-btn {
    min-height: clamp(44px, 12vw, 52px) !important;
    padding-inline: clamp(6px, 2.5vw, 14px) !important;
    font-size: var(--mobile-auto-ui) !important;
  }

  html body #about .about-bio-block,
  html body #about .about-right {
    padding: clamp(20px, 5.5vw, 30px) clamp(14px, 5vw, 22px) !important;
  }

  html body #about .about-name,
  html body #contact .contact-name { font-size: var(--mobile-auto-name) !important; }

  html body #about .about-bio,
  html body #about .about-bio p {
    font-size: var(--mobile-auto-body) !important;
    line-height: 1.68 !important;
  }

  html body #about .skills-list {
    grid-template-columns: 1fr !important;
    gap: clamp(7px, 2.2vw, 11px) !important;
  }

  html body #about .skill-item {
    min-height: 0 !important;
    padding: clamp(10px, 3.2vw, 16px) !important;
  }

  html body #about .skill-header {
    margin-bottom: clamp(6px, 2vw, 10px) !important;
    gap: 8px !important;
  }

  html body #about .skill-name {
    min-width: 0 !important;
    gap: clamp(6px, 2vw, 10px) !important;
    font-size: clamp(.58rem, calc(.42rem + .72vw), .76rem) !important;
    line-height: 1.35 !important;
    letter-spacing: clamp(.005em, .35vw, .06em) !important;
    overflow-wrap: anywhere !important;
  }

  html body #about .skill-icon {
    width: clamp(18px, 5.8vw, 26px) !important;
    height: clamp(18px, 5.8vw, 26px) !important;
    flex-basis: clamp(18px, 5.8vw, 26px) !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    font-size: clamp(.66rem, 2.8vw, .86rem) !important;
  }

  html body #about .skill-pct{
    flex: 0 0 auto !important;
    font-size: clamp(.60rem, calc(.44rem + .68vw), .78rem) !important;
    line-height: 1.2 !important;
  }

  html body #about .skill-track {
    height: clamp(3px, .8vw, 5px) !important;
  }

  html.lang-ko body #showreel .hero-title,
  html.lang-ko body #about .about-name,
  html.lang-ko body #contact .contact-name { letter-spacing: -.045em !important; }
}

@media (max-width: 374px) and (orientation: portrait) {
  :root {
    --device-gutter: 10px;
    --device-section-pad: clamp(38px, 12vw, 58px);
    --device-content-gap: 10px;
  }

  html body #showreel .showreel-shell { padding-inline: 8px !important; }
  html body #showreel .hero-title { font-size: clamp(1.72rem, 9.8vw, 2.28rem) !important; }
  html body #showreel .hero-actions { gap: 5px !important; }
  html body #showreel .hero-actions > .hero-btn { padding-inline: 4px !important; letter-spacing: .02em !important; }
  html body #about .about-bio p,
  html body #contact .contact-copy-body { line-height: 1.58 !important; }
}

@media (min-width: 375px) and (max-width: 767px) and (orientation: portrait) {
  :root {
    --device-gutter: clamp(12px, 4vw, 18px);
    --device-section-pad: clamp(48px, 10vw, 72px);
  }

  html body #showreel .hero-title { font-size: clamp(2rem, 9.2vw, 3.18rem) !important; }
  html body #about .about-bio p,
  html body #contact .contact-copy-body { line-height: 1.66 !important; }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  :root {
    --device-gutter: clamp(22px, 5.2vw, 52px);
    --device-section-pad: clamp(58px, 8vw, 92px);
    --device-content-gap: clamp(18px, 3vw, 30px);
    --device-body: clamp(.82rem, calc(.64rem + .42vw), 1rem);
  }

  html body #showreel .hero-intro { max-width: min(100%, 720px) !important; }
  html body #showreel .hero-title { font-size: clamp(2.55rem, 7.2vw, 4.65rem) !important; }
  html body #about .about-bio p,
  html body #contact .contact-copy-body { line-height: 1.78 !important; }
  html body #about .skill-item { padding: clamp(14px, 2.2vw, 22px) !important; }
  html body #about .skill-name { font-size: clamp(.66rem, 1.4vw, .86rem) !important; }
  html body #about .skill-pct { font-size: clamp(.66rem, 1.25vw, .84rem) !important; }
}

@media (max-width: 600px) {
  #lightbox.open .photo-watermark-lightbox .photo-watermark-logo {
    width: 28px !important;
  }
}

/* === MOBILE_PORTRAIT_CSS_MERGED_START === */
/* Merged verbatim from mobile-portrait.css (structural consolidation, step 1: no value changes). */
/* Bokah Media — single mobile portrait design system. Desktop is untouched. */
@media (max-width: 767px) and (orientation: portrait) {
  :root { --mp-gutter: clamp(16px, 4.6vw, 20px); --mp-radius: 14px; --mp-border: rgba(255,255,255,.12); --mp-panel: linear-gradient(180deg,rgba(14,21,24,.94),rgba(7,10,11,.92)); --mp-nav-h: calc(clamp(52px, 14vw, 60px) + env(safe-area-inset-top, 0px)); }
  html.is-standalone-mobile { --mp-nav-h: calc(clamp(52px, 14vw, 60px) + max(env(safe-area-inset-top, 0px), 44px)); }
  /* Initial loading must never animate or anchor the document. Navigation
     handlers request smooth scrolling explicitly after the page is ready. */
  html {
    scroll-behavior: auto !important;
    overflow-anchor: none !important;
    overflow-x: clip !important;
  }
  html body {
    font-size: 15px;
    overflow-anchor: none !important;
    overflow-x: clip !important;
  }
  html body #showreel { overflow-anchor: none !important; }
  html body #showreel,
html body #about,
html body #cinematography,
html body #photography,
html body #ai-visuals,
html body #contact,
html body .portfolio-section.alt-bg {
    background: transparent !important;
    background-image: none !important;
  }
  html body #showreel, html body #about, html body #cinematography, html body #photography, html body #ai-visuals, html body #contact { width:100% !important; max-width:none !important; margin:0 !important; box-sizing:border-box !important; }
  html body #showreel { padding:28px var(--mp-gutter) 46px !important; }
  html body #about, html body #cinematography, html body #photography, html body #ai-visuals, html body #contact { padding:58px var(--mp-gutter) 62px !important; }

  /* Navigation scales continuously from compact 320px phones to 430px phones. */
  html body #main-nav { width:100% !important; height:clamp(52px,14vw,60px) !important; min-height:52px !important; padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right)) !important; box-sizing:border-box !important; }
  html body #main-nav .nav-inner { width:100% !important; height:100% !important; max-width:none !important; min-width:0 !important; min-height:0 !important; gap:clamp(5px,1.6vw,9px) !important; padding-inline:0 !important; }
  html body #main-nav .nav-logo { min-width:0 !important; flex:1 1 auto !important; gap:clamp(6px,1.8vw,10px) !important; overflow:hidden !important; }
  html body #main-nav .logo-img { width:clamp(28px,8.5vw,34px) !important; height:clamp(28px,8.5vw,34px) !important; flex:0 0 auto !important; }
  html body #main-nav .logo-name { max-width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:clamp(.69rem,2.95vw,.82rem) !important; letter-spacing:.012em !important; line-height:1.05 !important; }
  html body #main-nav .logo-sub { display:none !important; }
  html body #main-nav .language-switcher { flex:0 0 auto !important; width:auto !important; min-width:0 !important; padding:3px 5px !important; gap:3px !important; border-radius:999px !important; }
  html body #main-nav .language-switcher a { min-width:0 !important; padding:4px 4px !important; font-size:clamp(.45rem,1.8vw,.54rem) !important; letter-spacing:0 !important; white-space:nowrap !important; }
  html body #main-nav .language-flag { width:clamp(10px,2.8vw,13px) !important; height:clamp(10px,2.8vw,13px) !important; }
  html body #main-nav .nav-toggle { display:flex !important; flex:0 0 auto !important; width:clamp(38px,10vw,42px) !important; height:clamp(38px,10vw,42px) !important; min-height:0 !important; border-radius:50% !important; }
  /* .nav-links is `position: fixed` (see desktop.css), so `top` resolves
     against the viewport, not against #main-nav. The old `top: calc(100% + 8px)`
     therefore placed the open dropdown at ~100% of the *viewport* height (for
     example 675px on a 667px-tall iPhone SE) - entirely off-screen below the
     fold, so the hamburger menu appeared to do nothing when tapped. Anchor to
     the nav's actual rendered height instead so the dropdown opens directly
     under the fixed header on every portrait phone size. */
  html body #main-nav .nav-links { top:calc(var(--mp-nav-h) + 8px) !important; right:var(--mp-gutter) !important; left:auto !important; width:min(82vw,260px) !important; max-height:calc(100dvh - var(--mp-nav-h) - 16px) !important; overflow:auto !important; padding:8px !important; border-radius:14px !important; }
  html body #main-nav .nav-links li, html body #main-nav .nav-link { width:100% !important; }
  html body #main-nav .nav-link { min-height:42px !important; padding:10px 12px !important; border-radius:9px !important; font-size:clamp(.62rem,2.8vw,.72rem) !important; letter-spacing:.12em !important; }

  /* Desktop order translated to a phone: brand story, profile, skills. */
  html body #about .about-inner > .bokah-brand-panel { order:1 !important; }
  html body #about .about-inner > .about-left { order:2 !important; }
  html body #about .about-inner > .about-right { order:3 !important; }

  /* Keep the desktop logo hierarchy visible in the compact header: mark on
     the left, name and slogan stacked in the available text column. */
  html.lang-ko body #main-nav .nav-logo,
  html:not(.lang-ko) body #main-nav .nav-logo {
    display:grid !important;
    grid-template-columns:clamp(28px,8.5vw,34px) minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:clamp(6px,1.8vw,10px) !important;
    row-gap:1px !important;
    align-items:center !important;
  }
  html.lang-ko body #main-nav .logo-img,
  html:not(.lang-ko) body #main-nav .logo-img { grid-row:1 / span 2 !important; grid-column:1 !important; }
  html.lang-ko body #main-nav .logo-name,
  html:not(.lang-ko) body #main-nav .logo-name { grid-row:1 !important; grid-column:2 !important; }
  html.lang-ko body #main-nav .logo-sub,
  html:not(.lang-ko) body #main-nav .logo-sub {
    display:block !important;
    grid-row:2 !important;
    grid-column:2 !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:clamp(.44rem,1.7vw,.54rem) !important;
    line-height:1.05 !important;
    letter-spacing:.04em !important;
    color:rgba(181,224,240,.72) !important;
  }

  /* Neutralize legacy reveal states that could leave a loaded panel invisible. */
  html body .reveal,
  html body .reveal.visible,
  html body .reveal.reveal-observed,
  html body .reveal.reveal-observed.visible,
  html body .bokah-brand-panel.reveal,
  html body .bokah-brand-panel.reveal.visible,
  html body .bokah-brand-panel.reveal .bokah-brand-copy,
  html body .bokah-brand-panel.reveal.visible .bokah-brand-copy,
  html body .bokah-brand-panel.reveal .bokah-logo-card,
  html body .bokah-brand-panel.reveal.visible .bokah-logo-card { opacity:1 !important; visibility:visible !important; transform:none !important; animation:none !important; }

  #about .about-inner { display:flex !important; flex-direction:column !important; gap:18px !important; width:100% !important; max-width:none !important; min-height:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; }
  #about .about-left, #about .about-right, #about .bokah-brand-panel, #contact .contact-inner { width:100% !important; max-width:none !important; min-width:0 !important; min-height:0 !important; box-sizing:border-box !important; border:1px solid var(--mp-border) !important; border-radius:var(--mp-radius) !important; background:var(--mp-panel) !important; box-shadow:0 16px 40px rgba(0,0,0,.2) !important; }
  #about .about-left { display:block !important; padding:20px !important; }
  #about .about-photo-wrap { width:min(48vw,178px) !important; height:min(48vw,178px) !important; margin:0 auto !important; }
  #about .about-bio-block { width:100% !important; padding:22px 0 0 !important; border:0 !important; background:transparent !important; }
  #about .about-name, #contact .contact-name { font-size:clamp(1.15rem,6vw,1.42rem) !important; line-height:1.18 !important; letter-spacing:.07em !important; }
  #about .about-bio p, #about .bokah-brand-copy > p:not(.label-tag), #contact .contact-copy-body { width:100% !important; max-width:none !important; margin:0 0 12px !important; font-size:.82rem !important; line-height:1.76 !important; letter-spacing:.005em !important; text-align:left !important; text-align-last:left !important; word-spacing:normal !important; }
  #about .about-resume-btn, #contact .cf-submit { min-height:46px !important; border-radius:999px !important; }
  #about .about-right { padding:20px !important; }
  #about .skills-list { gap:10px !important; }
  #about .skill-item { width:100% !important; min-height:0 !important; padding:13px 14px !important; box-sizing:border-box !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:10px !important; }
  #about .bokah-brand-panel { display:block !important; padding:22px 18px !important; min-height:0 !important; height:auto !important; align-content:start !important; grid-template-rows:none !important; }
  #about .bokah-brand-copy { width:100% !important; min-height:0 !important; }
  #about #brand-story-body-1 > p { margin:0 0 12px !important; }
  #about .bokah-logo-evolution { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin-top:20px !important; }
  #about .bokah-logo-card { width:100% !important; min-height:0 !important; box-sizing:border-box !important; border-radius:10px !important; padding:13px !important; }

  #contact .contact-inner { display:grid !important; grid-template-columns:1fr !important; padding:0 !important; transform:none !important; }
  #contact .contact-profile, #contact .contact-form { width:100% !important; max-width:none !important; min-height:0 !important; box-sizing:border-box !important; padding:22px 18px 24px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
  #contact .contact-photo-wrap { width:112px !important; height:112px !important; transform:none !important; }
  #contact .contact-btn { width:44px !important; height:44px !important; transform:none !important; }
  #contact .cf-input, #contact input, #contact textarea { width:100% !important; min-height:44px !important; box-sizing:border-box !important; padding:10px 12px !important; border-radius:9px !important; font-size:16px !important; line-height:1.4 !important; }
  #contact .cf-textarea { min-height:122px !important; }
  #contact .cf-submit { width:100% !important; }

  /* Very narrow phones: keep the language control and menu from competing. */
  @media (max-width: 350px) {
    html body #main-nav .language-switcher a { padding-inline:3px !important; }
    html body #main-nav .logo-name { max-width:78px !important; font-size:.62rem !important; }
    #showreel .hero-btn { font-size:.55rem !important; letter-spacing:.02em !important; }
  }

  /* Final visual authority: preserve the desktop component language on a
     portrait phone while changing only width, stacking and readable scale. */
  html.lang-ko body #showreel,
  html:not(.lang-ko) body #showreel {
    background:transparent !important;
    background-image:none !important;
  }

  html body #about .about-left,
  html body #about .about-right,
  html body #about .bokah-brand-panel,
  html body #contact .contact-profile,
  html body #contact .contact-form {
    background:transparent !important;
  }

  html body #about .about-right,
  html body #about .bokah-brand-panel,
  html body #contact .contact-form {
    border-top:1px solid rgba(132,132,132,.16) !important;
  }

  /* The desktop hero media treatment is the reference; only its width is
     fluid on a phone. */
  html.lang-ko body #showreel .showreel-player,
  html:not(.lang-ko) body #showreel .showreel-player {
    border:1px solid rgba(151,211,238,.18) !important;
    border-radius:18px !important;
    box-shadow:0 24px 64px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.035), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  html body .portfolio-section .video-card,
  html body .portfolio-section .photo-card,
  html body .portfolio-section .ai-card {
    border:1px solid rgba(222,239,246,.13) !important;
    border-radius:8px !important;
    box-shadow:0 16px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  html body .portfolio-section .video-card,
  html body .portfolio-section .photo-card { background:rgba(20,20,20,.6) !important; }
  html body .portfolio-section .ai-card { background:linear-gradient(135deg,rgba(106,176,212,.14),rgba(255,255,255,.035)),rgba(12,12,12,.92) !important; }

  html body .portfolio-section .video-card-thumb,
  html body .portfolio-section .photo-card-img,
  html body .portfolio-section .ai-card img {
    display:block !important;
    width:100% !important;
    object-fit:cover !important;
  }
  html body .portfolio-section .video-card-thumb { aspect-ratio:16/9 !important; }
  html body .portfolio-section .photo-card-img { aspect-ratio:3/2 !important; }
  html body .portfolio-section .ai-card img { aspect-ratio:16/11 !important; }

  /* Final phone proportions: one readable card lane, compact category
     control, and the same complete-frame intent without letterboxing video. */
  /* Mobile portrait gallery composition requested by the desktop reference:
     six rows of two video thumbnails and six rows of three photo thumbnails.
     The data count controls the final row; desktop remains untouched. */
  html.lang-ko body #cinematography #video-grid-all,
html:not(.lang-ko) body #cinematography #video-grid-all {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  html.lang-ko body #photography #photo-grid-all,
html:not(.lang-ko) body #photography #photo-grid-all {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  html.lang-ko body #cinematography .video-card .video-card-thumb,
html:not(.lang-ko) body #cinematography .video-card .video-card-thumb {
    width:100% !important;
    height:100% !important;
    aspect-ratio:16/9 !important;
    object-fit:cover !important;
    object-position:center !important;
    background:none !important;
  }

  html.lang-ko body #cinematography .cat-select,
html:not(.lang-ko) body #cinematography .cat-select,
html.lang-ko body #photography .cat-select,
html:not(.lang-ko) body #photography .cat-select,
html.lang-ko body #ai-visuals .cat-select,
html:not(.lang-ko) body #ai-visuals .cat-select {
    width:min(100%,230px) !important;
    height:40px !important;
    min-height:40px !important;
    margin:0 auto 16px 0 !important;
    padding:0 34px 0 12px !important;
    border-radius:12px !important;
    font-size:12.5px !important;
    line-height:12.5px !important;
    background-size:15px 15px !important;
    background-position:calc(100% - 11px) 50% !important;
  }

  html.lang-ko body .portfolio-section .section-title,
  html:not(.lang-ko) body .portfolio-section .section-title {
    font-size:clamp(1.08rem,5.5vw,1.35rem) !important;
    line-height:1.15 !important;
    letter-spacing:.06em !important;
  }
  html.lang-ko body #cinematography .section-title,
html:not(.lang-ko) body #cinematography .section-title,
html.lang-ko body #photography .section-title,
html:not(.lang-ko) body #photography .section-title,
html.lang-ko body #ai-visuals .section-title,
html:not(.lang-ko) body #ai-visuals .section-title {
    font-size:clamp(1.08rem,5.5vw,1.35rem) !important;
    line-height:1.15 !important;
  }
  html.lang-ko body #about .label-tag,
  html:not(.lang-ko) body #about .label-tag,
  html.lang-ko body #contact .label-tag,
  html:not(.lang-ko) body #contact .label-tag {
    font-size:.62rem !important;
    line-height:1.3 !important;
    letter-spacing:.16em !important;
  }

  html.lang-ko body #contact .contact-form .cf-submit,
  html:not(.lang-ko) body #contact .contact-form .cf-submit,
  html.lang-ko body #contact .cf-submit,
  html:not(.lang-ko) body #contact .cf-submit {
    color:#eaf7fb !important;
    -webkit-text-fill-color:#eaf7fb !important;
    font-size:.68rem !important;
    line-height:1.2 !important;
    letter-spacing:.12em !important;
    text-shadow:0 1px 8px rgba(0,0,0,.35) !important;
  }
  html.lang-ko body #contact .cf-submit span,
  html:not(.lang-ko) body #contact .cf-submit span { color:inherit !important; -webkit-text-fill-color:inherit !important; }
}
/* === MOBILE_PORTRAIT_CSS_MERGED_END === */

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

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

@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;
  }
}

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

@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 (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 (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);
  }
}

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

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

@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;
  }
}

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

@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; }
  
  .cf-input { min-height: 50px; }
  .cf-textarea { min-height: 128px; }
}

@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; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    min-height: 62px !important;
    max-height: 64px !important;
    padding: 8px 12px !important;
    gap: 3px 12px !important;
  }
  #lightbox.open #photo-modal-title {
    font-size: .64rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #lightbox.open #photo-modal-category {
    padding: 3px 7px !important;
    font-size: .54rem !important;
    line-height: 1.15 !important;
  }
  #lightbox.open #photo-counter {
    font-size: .55rem !important;
    line-height: 1 !important;
  }
  #lightbox.open > #lightbox-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  #lightbox.open > #photo-prev,
  #lightbox.open > #photo-next {
    width: 40px !important;
    height: 56px !important;
    min-width: 40px !important;
    min-height: 56px !important;
    opacity: 1 !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;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #lightbox.open #photo-modal-title {
    font-size: .76rem !important;
    line-height: 1.35 !important;
  }
  #lightbox.open #photo-modal-category,
  #lightbox.open #photo-counter {
    padding: 5px 10px !important;
    font-size: .62rem !important;
    line-height: 1.35 !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #lightbox.open > .lightbox-box > .photo-modal-info { min-height: 62px !important; max-height: 64px !important; padding: 8px 12px !important; gap: 3px 12px !important; }
  #lightbox.open #photo-modal-title { font-size: .64rem !important; font-weight: 800 !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  #lightbox.open #photo-modal-category { padding: 3px 7px !important; font-size: .52rem !important; line-height: 1.15 !important; }
  #lightbox.open #photo-counter { font-size: .55rem !important; line-height: 1 !important; }
  #lightbox.open > #lightbox-close { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; }
  #lightbox.open > #photo-prev, #lightbox.open > #photo-next { width: 40px !important; height: 56px !important; min-width: 40px !important; min-height: 56px !important; opacity: 1 !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; }
}

@media (max-width: 700px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    grid-template-columns: fit-content(52%) auto minmax(0, 1fr) auto !important;
    grid-template-areas: "title counter . category" !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 11px 14px !important;
    gap: 8px !important;
  }
  #lightbox.open #photo-modal-title {
    align-self: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #lightbox.open #photo-modal-category { align-self: center !important; justify-self: end !important; }
  #lightbox.open #photo-counter { align-self: center !important; justify-self: start !important; }
}

@media (max-width: 700px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    grid-template-columns: fit-content(52%) auto minmax(0, 1fr) auto !important;
    grid-template-areas: "title counter . category" !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 11px 14px !important;
    gap: 8px !important;
  }
  #lightbox.open #photo-modal-title {
    align-self: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #lightbox.open #photo-modal-category {
    align-self: center !important;
    justify-self: end !important;
  }
  #lightbox.open #photo-counter {
    align-self: center !important;
    justify-self: start !important;
  }
}

@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;
  }
}

@media (max-width: 700px) {
  #about .about-bio p,
  #about .bokah-brand-copy > p:not(.label-tag){
    line-height: 1.74;
  }
}

@media (max-width: 700px) {
  #about .about-bio p,
  #about .bokah-brand-copy > p:not(.label-tag){
    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){
    max-width: 38rem;
  }
}

@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; }
}

@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;
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape),
       (max-width: 767px) {
  /* On compact landscape and mobile, the select prevents tab wrapping. */
  #cinematography .cat-tabs,
  #photography .cat-tabs { display: none !important; }
  #cinematography .cat-select,
  #photography .cat-select { display: block !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; }
}

@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: 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 (max-width: 700px) {
  #video-modal.modal-overlay {
    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;
  }
}

@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;
  }
}

@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 {
    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 {
    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: 1 !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;
  }
}

@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;
  }
}

@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;
  }
}

@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;
  }
}

@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;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #lightbox.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 42px)
      4px
      calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  }
  #lightbox.open > .lightbox-box {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100svh - 58px) !important;
  }
  #lightbox.open > .lightbox-box > .photo-modal-info {
    min-height: 96px !important;
    max-height: 220px !important;
    padding: 12px 14px !important;
    gap: 4px 12px !important;
  }
  #lightbox.open #photo-modal-title { font-size: .76rem !important; }
  #lightbox.open #photo-modal-category { font-size: .62rem !important; }
  #lightbox.open > #lightbox-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #lightbox.open > .lightbox-box > .photo-modal-info { min-height: 62px !important; max-height: 64px !important; padding: 8px 12px !important; gap: 3px 12px !important; }
  #lightbox.open #photo-modal-title { font-size: .64rem !important; font-weight: 800 !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  #lightbox.open #photo-modal-category { padding: 3px 7px !important; font-size: .54rem !important; line-height: 1.15 !important; }
  #lightbox.open #photo-counter { font-size: .55rem !important; line-height: 1 !important; }
  #lightbox.open > #lightbox-close { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; }
  #lightbox.open > #photo-prev, #lightbox.open > #photo-next { width: 40px !important; height: 56px !important; min-width: 40px !important; min-height: 56px !important; opacity: 1 !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; }
}

@media (max-width: 700px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    grid-template-columns: fit-content(52%) auto minmax(0, 1fr) auto !important;
    grid-template-areas: "title counter . category" !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 11px 14px !important;
    gap: 8px !important;
  }
  #lightbox.open #photo-modal-title { align-self: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  #lightbox.open #photo-modal-category { align-self: center !important; justify-self: end !important; }
  #lightbox.open #photo-counter { align-self: center !important; justify-self: start !important; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #lightbox.open > .lightbox-box > .photo-modal-info { min-height: 46px !important; max-height: 46px !important; padding: 7px 12px !important; gap: 6px !important; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #lightbox.open > .lightbox-box > .photo-modal-info {
    grid-template-columns: fit-content(52%) auto minmax(0, 1fr) auto !important;
    grid-template-areas: "title counter . category" !important;
    grid-template-rows: auto !important;
    align-items: center !important;
  }
  #lightbox.open #photo-modal-title { align-self: center !important; }
  #lightbox.open #photo-modal-category { align-self: center !important; justify-self: end !important; }
  #lightbox.open #photo-counter { align-self: center !important; justify-self: start !important; }
}

@media (max-width: 700px) {
  #lightbox.open #photo-counter {
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 10px !important;
    font-size: .62rem !important;
    line-height: 1.35 !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #lightbox.open #photo-counter {
    height: auto !important;
    min-height: 0 !important;
    padding: 3px 7px !important;
    font-size: .54rem !important;
    line-height: 1.15 !important;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #video-modal.open > .modal-box {
    overflow: hidden !important;
    isolation: isolate !important;
  }
  #video-modal.open .modal-video-wrap {
    overflow: hidden !important;
    border-radius: inherit !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  #video-modal.open .modal-video-wrap iframe,
  #video-modal.open .modal-video-wrap video {
    display: block !important;
    border-radius: inherit !important;
  }
  #video-modal.open .modal-info {
    overflow: hidden !important;
    border-bottom-left-radius: inherit !important;
    border-bottom-right-radius: inherit !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #lightbox.open #photo-modal-title { font-size: .76rem !important; line-height: 1.35 !important; }
  #lightbox.open #photo-modal-category,
  #lightbox.open #photo-counter { padding: 5px 10px !important; font-size: .62rem !important; line-height: 1.35 !important; }
}

@media (max-width: 700px) {
  #lightbox.open #photo-modal-title { font-size: .72rem !important; line-height: 1.3 !important; }
  #lightbox.open #photo-modal-category,
  #lightbox.open #photo-counter { padding: 4px 9px !important; font-size: .58rem !important; line-height: 1.3 !important; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #lightbox.open #photo-modal-title { font-size: .72rem !important; line-height: 1.3 !important; }
  #lightbox.open #photo-modal-category,
  #lightbox.open #photo-counter { padding: 4px 9px !important; font-size: .58rem !important; line-height: 1.3 !important; }
}

@media (min-width: 700px) and (max-width: 1180px) and (any-pointer: coarse) and (orientation: portrait) {
  #video-modal.open { overflow-y: auto !important; align-items: flex-start !important; padding: 34px 16px 54px !important; }
  #video-modal.open > .modal-box { width: min(94vw, 900px); height: auto !important; max-height: none !important; display: flex; flex-direction: column; overflow: visible !important; }
  #video-modal.open .modal-video-wrap { flex: 0 0 auto; height: min(50dvh, 470px) !important; max-height: none; }
  #video-modal.open .modal-video-wrap iframe,
  #video-modal.open .modal-video-wrap video { height: 100% !important; }
  #video-modal.open .modal-info { position: relative !important; inset: auto !important; display: block !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 auto; height: auto !important; max-height: none !important; overflow: visible !important; }
}

@media (max-width: 600px) {
  #main-footer .footer-copy { font-size: 0.62rem !important; }

  #main-footer .footer-credit,
  #main-footer .footer-credit p,
  #main-footer .footer-site-links,
  #main-footer .footer-site-links a,
  #main-footer #footer-credit-label,
  #main-footer #footer-credit-name {
    font-size: 0.64rem !important;
  }

  #main-footer .footer-admin { font-size: 0.56rem !important; }
}

@media (max-width: 767px) {
  #cinematography .cat-select,
#photography .cat-select,
#ai-visuals .cat-select { min-height: 52px !important; border-radius: 15px !important; padding-left: 18px !important; background-position: 0 0, right 16px center !important; }
}

@media (max-width: 767px) {
  #cinematography .cat-select,
  #photography .cat-select {
    min-height: 48px !important;
    padding: 0 42px 0 16px !important;
    background-position: 0 0, right 13px center !important;
  }
}

@media (max-width: 600px) {
  #contact .contact-form-heading {
    margin-bottom: 14px !important;
  }

  #contact .contact-form-heading h3 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  #contact .contact-form-heading > p {
    line-height: 1.74 !important;
  }
}

@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;
  }
}

@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{
    max-width: none;
    width: 100%;
  }
}

@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);
  }
}

@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);
  }
}

@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 (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; }
}

@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{ grid-template-columns: 1fr 1fr; gap: 8px; }

  .hero-actions { flex-direction: column; }
  .hero-btn { width: 100%; flex-basis: auto; }
  
  /* 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: 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. */
  
  .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;
  }

  

  .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: 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) and (max-width: 768px) and (orientation: portrait) {
  #photography .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

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

@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1180px) {
  #photography .photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !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;
  }

  

  

  

  .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;
  }

  

  

  
}

@media (max-width: 0px) 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;
  }
}

@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);
  }
}

@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 {
    padding-left: clamp(12px, 2.6vw, 20px);
    padding-right: clamp(12px, 2.6vw, 20px);
  }
}

@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 {
    padding-left: clamp(14px, 2.4vw, 26px);
    padding-right: clamp(14px, 2.4vw, 26px);
  }
}

@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;
  }

  #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; }
}

@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;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 480px) and (orientation: portrait) {
  
  #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;
  }
}

@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 (max-width: 768px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 950px) and (max-height: 560px) {
  

  

  

  .video-card,
  .photo-card,
  .video-card.reveal,
  .photo-card.reveal,
  .video-card.reveal.visible,
  .photo-card.reveal.visible,
  .video-card.reveal-settled,
  .photo-card.reveal-settled,
  .video-card:hover,
  .photo-card:hover,
  .video-card:active,
  .photo-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{
    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,
  .video-card:hover .video-card-thumb,
  .photo-card:hover .photo-card-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;
  }
}

@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;
  }

  
}

@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-actions { margin-bottom: 24px; }
  .hero-btn { min-height: 46px; border-radius: 999px; }
  
  .showreel-player { border-radius: 9px; }
}

@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;
  }
}

@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 > .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-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 (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;
  }
}

@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;
  }
}

@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; }
}

@media (hover: none) and (pointer: coarse) and (max-width: 768px) {
  .video-card.reveal,
  .photo-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{
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

@media (orientation: portrait) and (max-width: 599px) {
  .portfolio-section {
    --tablet-grid-edge: clamp(12px, 3vw, 18px);
  }

  .portfolio-section .video-grid,
  .portfolio-section .photo-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 (max-width: 899px) {
  .portfolio-section {
    --tablet-grid-edge: clamp(10px, 2vw, 16px);
  }

  .portfolio-section .video-grid,
  .portfolio-section .photo-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 (max-width: 700px) {
  

  /* 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;
  }
}

@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;
  }
}

@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;
  }
}

@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;
  }
}

@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;
  }
}

@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 .modal-info {
    display: grid !important;
  }
}

@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;
  }
}

@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;
  }
}

@media (orientation: portrait) and (max-width: 599px) {
  #cinematography .section-header,
#photography .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 {
    margin-left: 0 !important;
  }
  #cinematography .section-title,
#photography .section-title {
    gap: .18em !important;
  }
  #cinematography .section-title-icon,
#photography .section-title-icon {
    margin-right: 0 !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;
  }
}

@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;
  }
}

@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;
  }
}

@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;
  }
}

@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;
  }
}

@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;
  }
}

@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: 1 !important; filter: none !important; }
}

@media (orientation: landscape) and (max-width: 1000px) {
  #lightbox.open {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 58px 4px !important;
    overflow: hidden !important;
  }

  #lightbox.open > .lightbox-box {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(calc(100vw - 116px), calc(177.777svh - 103px)) !important;
    max-width: none !important;
    max-height: calc(100svh - 56px) !important;
    margin: auto !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #lightbox.open > .lightbox-box > #lightbox-img {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }

  #lightbox.open > .lightbox-box > .photo-modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title category" ". counter" !important;
    grid-template-rows: auto auto !important;
    gap: 3px 12px !important;
    flex: 0 0 64px !important;
    width: 100% !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(12, 14, 15, .99), rgba(5, 7, 8, .99)) !important;
  }

  #lightbox.open .photo-modal-copy { display: contents !important; }
  #lightbox.open #photo-modal-title {
    grid-area: title !important;
    align-self: start !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: .64rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  #lightbox.open #lightbox-caption { display: none !important; }
  #lightbox.open #photo-modal-category {
    grid-area: category !important;
    align-self: start !important;
    justify-self: end !important;
    padding: 3px 7px !important;
    font-size: .54rem !important;
    line-height: 1.15 !important;
  }
  #lightbox.open #photo-counter {
    grid-area: counter !important;
    align-self: end !important;
    justify-self: end !important;
    position: static !important;
    min-width: 48px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    font-size: .54rem !important;
  }

  #lightbox.open > #photo-prev,
  #lightbox.open > #photo-next {
    display: grid !important;
    width: 34px !important;
    height: 46px !important;
    min-width: 34px !important;
    min-height: 46px !important;
  }
}

@media (orientation: portrait) and (max-width: 768px) {
  #cinematography #video-grid-all { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #photography #photo-grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  #cinematography .cat-select, #photography .cat-select { width: min(100%, 280px) !important; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  #main-nav { height: 58px !important; min-height: 58px !important; }
  #main-nav .nav-inner { height: 58px !important; min-height: 58px !important; }
  #showreel.section-showreel { padding: 18px 20px 22px !important; }
  #showreel .showreel-shell { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr) !important; gap: 16px 20px !important; padding: 20px !important; align-items: center !important; }
  #showreel .hero-intro { grid-column: 1 !important; grid-row: 1 !important; text-align: left !important; }
  #showreel .hero-kicker { text-align: left !important; }
  #showreel .hero-title { font-size: clamp(1.65rem, 5.8vw, 2.8rem) !important; }
  #showreel .hero-role { margin-left: 0 !important; margin-right: 0 !important; font-size: .52rem !important; }
  #showreel .showreel-player-stack { grid-column: 2 !important; grid-row: 1 !important; }
  #showreel .hero-actions { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  #showreel .mobile-scroll-hint { grid-column: 1 / -1 !important; grid-row: 3 !important; text-align: center !important; }
  #about.section-about, #cinematography.portfolio-section, #photography.portfolio-section, #contact.section-contact { padding-block: 28px !important; }
}

@media (max-width: 700px) {
  #showreel .hero-kicker {
    font-size: .80rem !important;
  }
}

@media (max-width: 700px) {
  #showreel .hero-kicker,
  html.lang-ko #showreel .hero-kicker,
  html:not(.lang-ko) #showreel .hero-kicker {
    font-size: .80rem !important;
  }
}

@media (max-width: 1100px) and (min-width: 901px) and (hover: hover) and (pointer: fine) {
  #main-nav .nav-logo { max-width: 31% !important; }
  #main-nav .language-switcher { max-width: 16% !important; }
}
/* === MOBILE_ZONE_END === */

/* ================================================================
   NAVIGATION — SINGLE RESPONSIVE SYSTEM
   This reset deliberately severs the accumulated legacy header overrides.
   Every property used by the visible header is declared below, so viewport
   changes cannot revive an earlier ellipsis, scale, or ordering rule.
   ================================================================ */
#main-nav,
#main-nav *,
#main-nav *::before,
#main-nav *::after { all: revert !important; box-sizing: border-box !important; }

#main-nav {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 2000 !important;
  display: block !important;
  width: 100% !important;
  color: #edf6f9 !important;
  font-family: "Noto Sans", "Noto Sans KR", sans-serif !important;
  background: linear-gradient(180deg, rgba(8, 12, 14, .98), rgba(4, 6, 7, .96)) !important;
  border-bottom: 1px solid rgba(158, 220, 240, .18) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .26) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
}

#main-nav .nav-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: min(calc(100% - clamp(32px, 6vw, 112px)), 1660px) !important;
  min-height: 76px !important;
  margin: 0 auto !important;
  padding: 12px 0 !important;
  gap: clamp(12px, 1.6vw, 28px) !important;
}

#main-nav .nav-logo {
  display: flex !important;
  align-items: center !important;
  gap: clamp(8px, .9vw, 14px) !important;
  color: inherit !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#main-nav .logo-img {
  display: block !important;
  width: clamp(34px, 3vw, 48px) !important;
  height: clamp(34px, 3vw, 48px) !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

#main-nav .logo-name {
  display: block !important;
  color: #f4f8fa !important;
  font-size: clamp(.84rem, .57rem + .55vw, 1.32rem) !important;
  font-weight: 800 !important;
  letter-spacing: clamp(.08em, .06em + .09vw, .18em) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#main-nav .logo-rule {
  display: block !important;
  width: 1px !important;
  height: clamp(24px, 2.1vw, 34px) !important;
  background: rgba(158, 220, 240, .26) !important;
  flex: 0 0 1px !important;
}

#main-nav .logo-sub {
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: #93d2ed !important;
  font-size: clamp(.57rem, .43rem + .28vw, .82rem) !important;
  font-weight: 700 !important;
  letter-spacing: clamp(.06em, .04em + .11vw, .16em) !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

#main-nav .nav-links {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(16px, 1.85vw, 36px) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#main-nav .nav-links li { display: block !important; margin: 0 !important; padding: 0 !important; }

#main-nav .nav-link {
  display: block !important;
  position: relative !important;
  padding: 8px 0 !important;
  color: rgba(235, 244, 247, .73) !important;
  font-size: clamp(.66rem, .49rem + .28vw, .88rem) !important;
  font-weight: 800 !important;
  letter-spacing: clamp(.055em, .035em + .08vw, .14em) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color .22s ease !important;
}

#main-nav .nav-link::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 2px !important;
  left: 0 !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: #93d2ed !important;
  transform: scaleX(0) !important;
  transition: transform .22s ease !important;
}

#main-nav .nav-link:hover,
#main-nav .nav-link:focus-visible,
#main-nav .nav-link.active { color: #fff !important; outline: none !important; }
#main-nav .nav-link:hover::after,
#main-nav .nav-link:focus-visible::after,
#main-nav .nav-link.active::after { transform: scaleX(1) !important; }

/* A scaled two-pixel rule can be rasterized with a missing segment at browser
   zoom levels where its width lands between device pixels.  Reveal the same
   rule by clipping it instead, so the active desktop underline is painted as
   one continuous stroke at every display scale. */
#main-nav .nav-link::after {
  -webkit-clip-path: inset(0 100% 0 0) !important;
  clip-path: inset(0 100% 0 0) !important;
  transform: none !important;
  transition: clip-path .22s ease, -webkit-clip-path .22s ease !important;
}

#main-nav .nav-link:hover::after,
#main-nav .nav-link:focus-visible::after,
#main-nav .nav-link.active::after {
  -webkit-clip-path: inset(0 0 0 0) !important;
  clip-path: inset(0 0 0 0) !important;
}

/* Korean uses a denser glyph rhythm, but follows the exact same one-line and
   breakpoint rules.  Do not use ellipsis or forced word breaks for labels. */
html.lang-ko #main-nav .nav-link {
  letter-spacing: .01em !important;
  font-size: clamp(.70rem, .52rem + .29vw, .90rem) !important;
  word-break: keep-all !important;
}
html.lang-ko #main-nav .logo-sub {
  letter-spacing: .02em !important;
  font-size: clamp(.60rem, .45rem + .30vw, .86rem) !important;
  word-break: keep-all !important;
}
html.lang-ko #main-nav .nav-links {
  gap: clamp(18px, 1.95vw, 38px) !important;
}

#main-nav .language-switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 4px !important;
  border: 1px solid rgba(158, 220, 240, .34) !important;
  border-radius: 999px !important;
  background: rgba(10, 22, 28, .82) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08) !important;
  white-space: nowrap !important;
}

#main-nav .language-switcher a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: rgba(228, 240, 244, .7) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

#main-nav .language-switcher a:hover,
#main-nav .language-switcher a:focus-visible { color: #fff !important; background: rgba(147, 210, 237, .12) !important; outline: none !important; }
#main-nav .language-switcher a[data-lang="en"] { border-color: rgba(147, 210, 237, .55) !important; color: #f4fbfd !important; }
#main-nav .language-divider { color: rgba(228, 240, 244, .36) !important; font-size: .68rem !important; }
#main-nav .language-flag { display: block !important; width: 16px !important; height: 12px !important; object-fit: cover !important; }

#main-nav .nav-toggle {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(255,255,255,.025) !important;
  cursor: pointer !important;
}

#main-nav .nav-toggle span { display: block !important; width: 23px !important; height: 2px !important; border-radius: 99px !important; background: currentColor !important; transition: transform .22s ease, opacity .18s ease !important; }
#main-nav .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
#main-nav .nav-toggle.open span:nth-child(2) { opacity: 0 !important; }
#main-nav .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* Desktop: the complete menu is retained at every usable desktop width.  At
   the wrap point, the brand takes the first row and the menu/language remain
   fully readable below it rather than being compressed or clipped. */
@media (min-width: 1100px), (min-width: 601px) and (hover: hover) and (pointer: fine) {
  #main-nav .nav-logo { flex: 0 0 auto !important; }
  #main-nav .language-switcher { flex: 0 0 auto !important; }
}

@media (min-width: 601px) and (hover: hover) and (pointer: fine) and (max-width: 1220px),
       (min-width: 1100px) and (hover: none) and (orientation: landscape) and (max-width: 1280px) {
  #main-nav .nav-inner { flex-wrap: wrap !important; padding-block: 10px !important; }
  #main-nav .nav-logo { flex-basis: 100% !important; }
  #main-nav .nav-links { justify-content: flex-start !important; }
}

@media (min-width: 601px) and (hover: hover) and (pointer: fine) and (max-width: 760px) {
  #main-nav .nav-links { flex: 0 0 100% !important; }
  #main-nav .language-switcher { margin-right: auto !important; }
}

/* Compact tablets, all portrait tablets, phones, and short landscape screens
   switch together.  Visual order is explicitly brand → language → hamburger. */
@media (max-width: 1099px) and (hover: none),
       (orientation: portrait) and (hover: none),
       (max-width: 1024px) and (orientation: portrait),
       (max-width: 600px),
       (orientation: landscape) and (max-width: 1099px),
       (orientation: landscape) and (hover: none) and (max-width: 1280px),
       (min-width: 1100px) and (max-width: 1799px),
       (hover: hover) and (pointer: fine) and (max-width: 1799px) {
  #main-nav .nav-inner {
    width: 100% !important;
    min-height: 66px !important;
    flex-wrap: nowrap !important;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)) !important;
    gap: clamp(8px, 1.8vw, 14px) !important;
  }

  #main-nav .nav-logo { order: 1 !important; flex: 1 1 auto !important; min-width: 0 !important; }
  #main-nav .language-switcher { order: 3 !important; flex: 0 0 auto !important; margin-left: auto !important; }
  #main-nav .nav-toggle { order: 4 !important; display: flex !important; flex: 0 0 auto !important; }

  #main-nav .nav-links {
    display: flex !important;
    position: fixed !important;
    top: calc(66px + env(safe-area-inset-top, 0px)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    left: auto !important;
    z-index: 2001 !important;
    width: min(88vw, 320px) !important;
    max-height: 0 !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: rgba(7, 13, 16, .98) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.36) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: max-height .28s ease, padding .28s ease, opacity .18s ease !important;
  }

  #main-nav .nav-links.open { max-height: min(70dvh, 430px) !important; padding: 8px 10px !important; border-color: rgba(158,220,240,.22) !important; opacity: 1 !important; pointer-events: auto !important; }
  #main-nav .nav-links li { width: 100% !important; }
  #main-nav .nav-link { padding: 13px 12px !important; text-align: left !important; }
  #main-nav .nav-link::after { right: auto !important; bottom: 7px !important; width: 28px !important; }
}

/* In portrait, the brand has a stable two-line lock-up.  The slogan is allowed
   to wrap inside the brand column instead of disappearing or using ellipsis. */
@media (orientation: portrait) and (max-width: 1024px) {
  #main-nav .nav-logo { display: grid !important; grid-template-columns: clamp(30px, 8vw, 42px) minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 9px !important; row-gap: 2px !important; align-items: center !important; white-space: normal !important; }
  #main-nav .logo-img { grid-area: 1 / 1 / 3 / 2 !important; }
  #main-nav .logo-name { grid-column: 2 !important; grid-row: 1 !important; font-size: clamp(.72rem, 3.15vw, .98rem) !important; letter-spacing: clamp(.03em, .4vw, .1em) !important; white-space: nowrap !important; }
  #main-nav .logo-rule { display: none !important; }
  #main-nav .logo-sub { grid-column: 2 !important; grid-row: 2 !important; font-size: clamp(.48rem, 1.75vw, .62rem) !important; letter-spacing: .035em !important; line-height: 1.25 !important; white-space: normal !important; overflow-wrap: anywhere !important; }
}

/* Only the tightest desktop/tablet compact band stacks the slogan.  Wider
   compact headers keep the complete brand lock-up on one line. */
@media (min-width: 1100px) and (max-width: 1250px) {
  #main-nav .nav-logo { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 10px !important; row-gap: 2px !important; }
  #main-nav .logo-img { grid-area: 1 / 1 / 3 / 2 !important; }
  #main-nav .logo-name { grid-column: 2 !important; grid-row: 1 !important; }
  #main-nav .logo-rule { display: none !important; }
  #main-nav .logo-sub { grid-column: 2 !important; grid-row: 2 !important; white-space: normal !important; }
}

/* Header frame contract: the navigation surface and the hero glass shell use
   the same centered 1660px frame and the same responsive outer gutter. */
@media (min-width: 701px) {
  #main-nav {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), 1660px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
  #main-nav .nav-inner {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  /* A desktop/tablet brand stays one line. Only the <=700px portrait lock-up
     is allowed to place the slogan below the name. */
  #main-nav .nav-logo {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    white-space: nowrap !important;
  }
  #main-nav .logo-img,
  #main-nav .logo-name,
  #main-nav .logo-rule,
  #main-nav .logo-sub { grid-area: auto !important; }
  #main-nav .logo-rule { display: block !important; }
  #main-nav .logo-sub {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  #main-nav .language-switcher { margin-left: auto !important; }
  #main-nav .nav-toggle { margin-left: 0 !important; }
}

@media (max-width: 700px) and (orientation: portrait) {
  #main-nav .nav-logo { display: grid !important; }
  #main-nav .logo-rule { display: none !important; }
  #main-nav .logo-sub { white-space: normal !important; }
}

/* Compact header controls are anchored to the shared frame, not left to the
   remaining flex space. This keeps Korean and English states identical. */
@media (max-width: 1799px) {
  #main-nav .nav-inner { position: relative !important; }
  #main-nav .nav-logo { padding-right: clamp(118px, 15vw, 210px) !important; }
  #main-nav .language-switcher {
    position: absolute !important;
    top: 50% !important;
    right: clamp(52px, 4vw, 70px) !important;
    z-index: 2 !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }
  #main-nav .language-switcher a {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  #main-nav .nav-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    z-index: 3 !important;
    transform: translateY(-50%) !important;
  }
}

/* Medium-width compact composition: center the menu control and keep the
   language control at the frame edge. The brand gets a measured half-column,
   never an arbitrary right padding that can truncate its name. */
@media (min-width: 701px) and (max-width: 1799px) {
  #main-nav .nav-logo {
    max-width: calc(50% - 38px) !important;
    padding-right: 0 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  #main-nav .logo-name {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(.92rem, .70rem + .42vw, 1.18rem) !important;
    letter-spacing: .095em !important;
  }
  #main-nav .logo-sub {
    flex: 0 1 auto !important;
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(.58rem, .45rem + .24vw, .72rem) !important;
  }
  #main-nav .language-switcher {
    right: 0 !important;
  }
  #main-nav .nav-toggle {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  #main-nav .nav-links {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* ================================================================
   FINAL CONTAINER-BASED NAVIGATION CONTRACT
   The hero frame is the source of truth.  The header switches based on its
   own rendered width, so browser zoom, device scale, and window dragging all
   produce the same result in English and Korean.
   ================================================================ */
#main-nav .nav-inner { container: bokah-nav / inline-size !important; }

/* A genuinely wide frame receives the full navigation in one row. */
@container bokah-nav (min-width: 1320px) {
  #main-nav .nav-inner { padding-inline: 0 !important; }
  #main-nav .nav-logo { order: 1 !important; }
  #main-nav .nav-links { order: 2 !important; }
  #main-nav .language-switcher { order: 3 !important; }
  #main-nav .nav-logo {
    max-width: none !important;
    padding-right: 0 !important;
    flex: 0 1 auto !important;
  }
  #main-nav .logo-name,
  #main-nav .logo-sub {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  #main-nav .nav-toggle { display: none !important; }
  #main-nav .language-switcher {
    position: static !important;
    margin-left: 0 !important;
    transform: none !important;
  }
  #main-nav .nav-links {
    position: static !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  #main-nav .nav-links.open { max-height: none !important; }
  #main-nav .nav-links .nav-link {
    padding-block: 9px !important;
    white-space: nowrap !important;
  }
  #main-nav .nav-links { gap: clamp(28px, 2.1cqw, 42px) !important; }
  html.lang-ko #main-nav .nav-links { gap: clamp(24px, 1.85cqw, 38px) !important; }
}

/* Below the full-menu capacity, preserve one header row and use the centered
   menu control. The dropdown itself is centered beneath that control. */
@container bokah-nav (max-width: 1319px) {
  #main-nav .nav-inner { flex-wrap: nowrap !important; }
  #main-nav .nav-logo {
    max-width: calc(50% - 38px) !important;
    padding-right: 0 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  #main-nav .logo-name {
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(.92rem, .70rem + 1.1cqw, 1.18rem) !important;
  }
  #main-nav .logo-sub {
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(.58rem, .45rem + .62cqw, .72rem) !important;
  }
  #main-nav .language-switcher {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: max-content !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }
  #main-nav .language-switcher a {
    min-width: max-content !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  #main-nav .nav-toggle {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  #main-nav .nav-links {
    position: fixed !important;
    top: calc(66px + env(safe-area-inset-top, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    width: min(88cqw, 320px) !important;
    max-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
  }
  #main-nav .nav-links.open {
    max-height: min(70dvh, 430px) !important;
    padding-block: 8px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* A narrow portrait lock-up is the only case where the slogan may move under
   the brand name. */
@container bokah-nav (max-width: 700px) {
  #main-nav .nav-logo {
    max-width: calc(100% - 118px) !important;
    display: grid !important;
    grid-template-columns: clamp(30px, 8vw, 42px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    white-space: normal !important;
  }
  #main-nav .logo-img { grid-area: 1 / 1 / 3 / 2 !important; }
  #main-nav .logo-name { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; }
  #main-nav .logo-rule { display: none !important; }
  #main-nav .logo-sub { grid-column: 2 !important; grid-row: 2 !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; }
}

/* The compact control group always reads language first, hamburger second. */
@media (min-width: 701px) and (max-width: 1799px) {
  #main-nav .language-switcher {
    right: calc(50% - 100px) !important;
  }
  #main-nav .nav-toggle {
    left: calc(50% + 112px) !important;
    right: auto !important;
  }
}

@media (max-width: 700px) {
  #main-nav .language-switcher {
    right: 52px !important;
  }
  #main-nav .nav-toggle {
    left: auto !important;
    right: 0 !important;
  }
}

/* Final menu rhythm: generous editorial spacing on the full desktop menu.
   The labels remain visually distinct without relying on oversized text. */
@media (min-width: 1800px) {
  #main-nav .nav-links {
    gap: clamp(28px, 2.15vw, 46px) !important;
    justify-content: flex-end !important;
  }
  #main-nav .nav-link {
    letter-spacing: .12em !important;
    padding-inline: 2px !important;
  }
  html.lang-ko #main-nav .nav-links { gap: clamp(24px, 1.9vw, 40px) !important; }
  html.lang-ko #main-nav .nav-link { letter-spacing: .015em !important; }
}

@media (orientation: landscape) and (max-width: 1099px) {
  #main-nav .nav-inner { min-height: 58px !important; }
  #main-nav .nav-logo { gap: 8px !important; }
  #main-nav .logo-img { width: 34px !important; height: 34px !important; }
  #main-nav .logo-name { font-size: .78rem !important; }
  #main-nav .logo-rule { height: 24px !important; }
  #main-nav .logo-sub { font-size: .52rem !important; }
  #main-nav .language-switcher a { min-height: 30px !important; padding-inline: 8px !important; font-size: .61rem !important; }
  #main-nav .nav-toggle { width: 40px !important; height: 40px !important; }
  #main-nav .nav-links { top: calc(58px + env(safe-area-inset-top, 0px)) !important; }
}

/* ================================================================
   NAVIGATION — EDITORIAL TYPOGRAPHY PASS
   A restrained hierarchy makes the header feel designed, not merely fitted:
   the brand leads, the slogan supports it, and navigation breathes evenly.
   ================================================================ */
#main-nav .logo-name { font-weight: 800 !important; }
#main-nav .logo-sub { font-weight: 650 !important; letter-spacing: .10em !important; }
#main-nav .nav-link { font-weight: 700 !important; letter-spacing: .095em !important; }
#main-nav .nav-links { align-items: center !important; }
#main-nav .language-switcher { gap: 5px !important; padding: 4px 5px !important; }
#main-nav .language-switcher a { font-weight: 650 !important; letter-spacing: .015em !important; }

/* Full desktop is deliberately calm and spacious.  The menu is never packed
   against the logo or language control, even on an ultrawide display. */
@media (min-width: 1800px) {
  #main-nav .nav-inner {
    width: min(calc(100% - 96px), 1660px) !important;
    min-height: 78px !important;
    padding-block: 13px !important;
    gap: clamp(28px, 2.4vw, 52px) !important;
  }
  #main-nav .nav-logo { gap: 14px !important; }
  #main-nav .logo-img { width: clamp(42px, 2.45vw, 50px) !important; height: clamp(42px, 2.45vw, 50px) !important; }
  #main-nav .logo-name { font-size: clamp(1.08rem, .78rem + .35vw, 1.28rem) !important; letter-spacing: .14em !important; }
  #main-nav .logo-sub { font-size: clamp(.66rem, .50rem + .20vw, .78rem) !important; letter-spacing: .13em !important; }
  #main-nav .nav-links { gap: clamp(21px, 1.65vw, 34px) !important; }
  #main-nav .nav-link { font-size: clamp(.68rem, .54rem + .16vw, .80rem) !important; letter-spacing: .105em !important; padding-block: 9px !important; }
  #main-nav .language-switcher a { min-height: 34px !important; padding-inline: 11px !important; font-size: .69rem !important; }
}

/* Compact desktop keeps a premium horizontal lock-up while the menu is in the
   dropdown.  Its controls share one visual baseline and one rhythm. */
@media (min-width: 1251px) and (max-width: 1799px) {
  #main-nav .nav-inner { min-height: 72px !important; padding-block: 11px !important; gap: clamp(16px, 2vw, 32px) !important; }
  #main-nav .nav-logo { gap: 12px !important; }
  #main-nav .logo-img { width: clamp(38px, 3vw, 46px) !important; height: clamp(38px, 3vw, 46px) !important; }
  #main-nav .logo-name { font-size: clamp(1rem, .78rem + .32vw, 1.20rem) !important; letter-spacing: .12em !important; }
  #main-nav .logo-sub { font-size: clamp(.62rem, .48rem + .22vw, .74rem) !important; letter-spacing: .10em !important; }
  #main-nav .language-switcher a { min-height: 34px !important; padding-inline: 11px !important; font-size: .68rem !important; }
  #main-nav .nav-toggle { width: 44px !important; height: 44px !important; }
}

html.lang-ko #main-nav .nav-link { font-weight: 700 !important; letter-spacing: .01em !important; }
html.lang-ko #main-nav .nav-links { gap: clamp(18px, 1.75vw, 32px) !important; }
html.lang-ko #main-nav .logo-sub { letter-spacing: .025em !important; }

/* Preserve the original Bokah Media brand divider.  Typography refinement
   must not alter this identity detail. */
#main-nav .logo-rule {
  display: block !important;
  width: 1px !important;
  height: 22px !important;
  flex: 0 0 1px !important;
  background: linear-gradient(180deg, transparent, rgba(106,176,212,.42), transparent) !important;
}
@media (orientation: portrait) and (max-width: 1024px),
       (min-width: 1100px) and (max-width: 1250px) {
  #main-nav .logo-rule { display: none !important; }
}

/* FINAL FRAME ALIGNMENT — keep this as the last navigation rule set. */
@media (min-width: 701px) {
  #main-nav .nav-inner { width: 100% !important; max-width: none !important; padding-inline: 0 !important; }
  #main-nav .nav-logo { margin-left: 0 !important; }
  #main-nav .language-switcher { margin-right: 0 !important; }
}

@container bokah-nav (min-width: 1320px) {
  #main-nav .nav-logo { order: 1 !important; }
  #main-nav .nav-links {
    order: 2 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    justify-content: space-between !important;
    gap: clamp(32px, 2.4cqw, 52px) !important;
  }
  #main-nav .language-switcher { order: 3 !important; }
  html.lang-ko #main-nav .nav-links { gap: clamp(28px, 2.1cqw, 46px) !important; }
}
/* end of navigation overrides */
/* end */
/* end of navigation overrides */

/* Restore the original translucent navigation surface. */
#main-nav {
  background: linear-gradient(180deg, rgba(2, 5, 7, .70), rgba(2, 5, 7, .58)) !important;
  background-image: none !important;
  border-bottom-color: rgba(158, 220, 240, .14) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(120%) brightness(.82) !important;
  backdrop-filter: blur(26px) saturate(120%) brightness(.82) !important;
}

@container bokah-nav (min-width: 1320px) {
  #main-nav .nav-links {
    gap: clamp(36px, 2.9cqw, 60px) !important;
    justify-content: space-between !important;
  }
  #main-nav .nav-link {
    letter-spacing: .13em !important;
    padding-inline: 3px !important;
  }
  html.lang-ko #main-nav .nav-links { gap: clamp(32px, 2.5cqw, 52px) !important; }
  html.lang-ko #main-nav .nav-link { letter-spacing: .02em !important; }
}

/* Keep the glass treatment identical while the wheel-scrolling performance
   class is active. */
html.is-wheel-scrolling #main-nav {
  background: linear-gradient(180deg, rgba(2, 5, 7, .70), rgba(2, 5, 7, .58)) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(120%) brightness(.82) !important;
  backdrop-filter: blur(26px) saturate(120%) brightness(.82) !important;
}

/* Full-bleed bar, shared content frame. */
@media (min-width: 701px) {
  #main-nav {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
  #main-nav .nav-inner {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), 1660px) !important;
    max-width: 1660px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
}
/* trailing patch artifact removed */
/*
: 0 !important;
  }
}
*/

/* Portrait phones reserve independent slots for the language picker and the
   menu button. The compact-header rules use absolute positioning; without
   separate right offsets, the two touch targets overlap on narrow screens. */
@media (max-width: 700px) and (orientation: portrait) {
  #main-nav .language-switcher {
    right: 64px !important;
    transform: translateY(-50%) !important;
  }

  #main-nav .nav-toggle {
    top: 50% !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* Final desktop type and menu rhythm pass. Keep the slogan subordinate to the
   brand so the navigation can breathe across the shared hero frame. */
@container bokah-nav (min-width: 1320px) {
  #main-nav .logo-sub {
    font-size: clamp(.48rem, .36rem + .14cqw, .62rem) !important;
    letter-spacing: .09em !important;
    line-height: 1.15 !important;
  }
  #main-nav .nav-links {
    gap: clamp(52px, 4.2cqw, 82px) !important;
    justify-content: space-between !important;
  }
  #main-nav .nav-link {
    letter-spacing: .12em !important;
  }
  html.lang-ko #main-nav .logo-sub {
    font-size: clamp(.50rem, .38rem + .15cqw, .64rem) !important;
    letter-spacing: .015em !important;
  }
  html.lang-ko #main-nav .nav-links { gap: clamp(46px, 3.7cqw, 74px) !important; }
  html.lang-ko #main-nav .nav-link { letter-spacing: .01em !important; }
}

/* Desktop fallback for engines that do not evaluate container queries on a
   fixed navigation layer: use the full hero-aligned width and a visible,
   editorial rhythm between every label. */
@media (min-width: 1320px) {
  #main-nav .nav-links {
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    column-gap: clamp(34px, 3vw, 58px) !important;
  }
  html.lang-ko #main-nav .nav-links {
    column-gap: clamp(30px, 2.7vw, 52px) !important;
  }
}

/* Some desktop browsers report a reduced CSS viewport under OS display
   scaling. If the full menu is visible in that band, preserve the same roomy
   spacing instead of falling back to the cramped legacy gap. */
@media (min-width: 1100px) and (max-width: 1799px) {
  #main-nav .nav-links:not(.open) {
    column-gap: clamp(28px, 2.8vw, 50px) !important;
    row-gap: 0 !important;
    justify-content: flex-start !important;
  }
  #main-nav .logo-sub {
    font-size: clamp(.40rem, .30rem + .12vw, .52rem) !important;
    letter-spacing: .08em !important;
  }
html.lang-ko #main-nav .nav-links:not(.open) { column-gap: clamp(24px, 2.4vw, 44px) !important; }
  html.lang-ko #main-nav .logo-sub {
    font-size: clamp(.42rem, .32rem + .13vw, .54rem) !important;
    letter-spacing: .015em !important;
  }
}

/* Single final desktop authority. Keep the menu grouped beside the language
   selector, with enough space for each label to read as an individual item. */
@media (min-width: 1100px) {
  html:not(.lang-ko) body #main-nav .nav-links,
  html.lang-ko body #main-nav .nav-links {
    flex: 0 1 auto !important;
    margin-left: auto !important;
    gap: 31px !important;
    column-gap: 31px !important;
    justify-content: flex-end !important;
  }
  html:not(.lang-ko) body #main-nav .logo-sub,
  html.lang-ko body #main-nav .logo-sub {
    --desktop-nav-slogan-size: 13.65px;
    font-size: 13.65px !important;
    letter-spacing: .08em !important;
  }
  html.lang-ko body #main-nav .nav-links { gap: 34px !important; column-gap: 34px !important; }
  html.lang-ko body #main-nav .nav-link { font-size: 16px !important; }
   html.lang-ko body #main-nav .logo-sub { --desktop-nav-slogan-size: 14.15px; font-size: 14.15px !important; letter-spacing: .15em !important; }
}

/* Centered premium menu for phones and touch tablets; desktop navigation is untouched. */
@media (max-width: 1099px),
       (hover: none) and (pointer: coarse) and (max-width: 1600px) {
  #main-nav .nav-toggle { width:clamp(42px,5.2vw,50px) !important; height:clamp(42px,5.2vw,50px) !important; padding:0 !important; gap:5px !important; align-items:center !important; justify-content:center !important; border:1px solid rgba(174,224,240,.30) !important; border-radius:50% !important; background:linear-gradient(145deg,rgba(19,32,38,.94),rgba(5,10,13,.94)) !important; box-shadow:0 9px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.11) !important; transition:transform .28s cubic-bezier(.2,.75,.25,1),background .28s ease,border-color .28s ease,box-shadow .28s ease !important; }
  #main-nav .nav-toggle span { width:clamp(16px,2.2vw,20px) !important; height:1.5px !important; border-radius:99px !important; background:linear-gradient(90deg,#d7f3fa,#80c7dc) !important; box-shadow:0 0 8px rgba(116,207,235,.22) !important; }
  #main-nav .nav-toggle.open { background:linear-gradient(145deg,rgba(35,67,78,.96),rgba(7,15,19,.96)) !important; border-color:rgba(157,224,242,.68) !important; box-shadow:0 11px 30px rgba(0,0,0,.38),0 0 0 4px rgba(100,192,218,.07),inset 0 1px 0 rgba(255,255,255,.16) !important; }
  #main-nav .nav-links { position:fixed !important; z-index:2200 !important; top:50% !important; right:auto !important; left:50% !important; width:min(88vw,440px) !important; max-height:0 !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important; overflow:hidden !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; border:1px solid transparent !important; border-radius:clamp(18px,3vw,26px) !important; background:linear-gradient(145deg,rgba(13,25,30,.985),rgba(4,9,12,.985)) !important; box-shadow:0 28px 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(218,246,252,.10) !important; -webkit-backdrop-filter:blur(24px) saturate(130%) !important; backdrop-filter:blur(24px) saturate(130%) !important; transform:translate(-50%,-50%) scale(.96) !important; transform-origin:center !important; transition:opacity .24s ease,transform .32s cubic-bezier(.2,.75,.25,1),visibility .24s step-end !important; }
  #main-nav .nav-links.open { max-height:min(530px,calc(100dvh - 138px)) !important; padding:clamp(10px,1.8vw,16px) !important; overflow-y:auto !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; border-color:rgba(139,211,233,.32) !important; transform:translate(-50%,-50%) scale(1) !important; transition:opacity .24s ease,transform .32s cubic-bezier(.2,.75,.25,1),visibility 0s !important; }
  #main-nav .nav-links li { width:100% !important; }
  #main-nav .nav-links li + li { border-top:1px solid rgba(169,222,236,.09) !important; }
  #main-nav .nav-links .nav-link { display:flex !important; align-items:center !important; width:100% !important; min-height:clamp(48px,7vw,60px) !important; padding:clamp(10px,1.6vw,14px) clamp(15px,3vw,22px) !important; border-radius:clamp(10px,1.6vw,14px) !important; color:rgba(238,249,252,.90) !important; background:transparent !important; font-size:clamp(.73rem,.61rem + .55vw,.96rem) !important; font-weight:750 !important; letter-spacing:clamp(.10em,.08em + .15vw,.16em) !important; line-height:1.15 !important; text-align:left !important; transition:color .2s ease,background .2s ease,padding .2s ease !important; }
  #main-nav .nav-links .nav-link::after { display:none !important; }
  #main-nav .nav-links .nav-link:hover, #main-nav .nav-links .nav-link.active { padding-left:calc(clamp(15px,3vw,22px) + 7px) !important; color:#f5fcff !important; background:linear-gradient(90deg,rgba(102,194,220,.18),rgba(102,194,220,.03)) !important; }
  html.lang-ko #main-nav .nav-links .nav-link { letter-spacing:.025em !important; }
}
@media (max-width:700px) and (orientation:portrait) { #main-nav .nav-links { width:min(calc(100vw - 36px),380px) !important; } #main-nav .nav-links.open { max-height:min(460px,calc(100dvh - 124px)) !important; } }
@media (orientation:landscape) and (max-width:1099px) { #main-nav .nav-links { width:min(62vw,430px) !important; } #main-nav .nav-links.open { max-height:min(360px,calc(100dvh - 88px)) !important; } #main-nav .nav-links .nav-link { min-height:44px !important; } }

/* Closed overlays must not participate in document layout. */
.modal-overlay:not(.open) { display: none !important; }
.modal-overlay.open { display: flex !important; }

/* Desktop gallery heading refinement: a quiet blue accent gives the two
   portfolio disciplines a clearer, more editorial hierarchy without touching
   the compact tablet and phone header system. */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  #cinematography > .gallery-title-header,
  #photography > .gallery-title-header {
    gap: clamp(20px, 2.3vw, 38px) !important;
    margin-bottom: clamp(34px, 2.8vw, 46px) !important;
  }

  #cinematography > .gallery-title-header::before,
  #photography > .gallery-title-header::before {
    height: 1px !important;
    opacity: 1 !important;
    background: linear-gradient(90deg, transparent 0%, rgba(118, 197, 225, .08) 32%, rgba(118, 197, 225, .42) 100%) !important;
  }

  #cinematography > .gallery-title-header::after,
  #photography > .gallery-title-header::after {
    height: 1px !important;
    opacity: 1 !important;
    background: linear-gradient(90deg, rgba(118, 197, 225, .42) 0%, rgba(118, 197, 225, .08) 68%, transparent 100%) !important;
  }

  #cinematography > .gallery-title-header > .section-title,
  #photography > .gallery-title-header > .section-title {
    position: relative !important;
    gap: .48em !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f1f5f6 !important;
    letter-spacing: .13em !important;
    text-shadow: none !important;
  }

  #cinematography .section-title-mark,
  #photography .section-title-mark {
    display: none !important;
  }

  #cinematography .section-title::after,
  #photography .section-title::after {
    display: none !important;
  }

  #cinematography .section-title-text::after,
  #photography .section-title-text::after {
    content: none !important;
    display: none !important;
  }

  #cinematography .section-title-icon,
  #photography .section-title-icon {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #91d5e7 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    font-size: .72em !important;
  }

  #cinematography .section-title-text,
  #photography .section-title-text {
    background: none !important;
    -webkit-text-fill-color: currentcolor !important;
  }
}

/* Desktop bokeh remains alive during wheel scrolling. Other scroll-time
   optimizations still apply, but the background keeps its cinematic motion. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.is-wheel-scrolling #bokeh-canvas .bokeh {
    animation-play-state: running !important;
  }

  /* One immutable desktop glass surface: scrolling must not make the header
     lighter, darker, or more opaque at any point in the gesture. */
  #main-nav,
  #main-nav.scrolled,
  html.is-wheel-scrolling #main-nav {
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(2, 5, 7, .70), rgba(2, 5, 7, .58)) !important;
    background-color: transparent !important;
    border-bottom-color: rgba(158, 220, 240, .14) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .08) !important;
    -webkit-backdrop-filter: blur(26px) saturate(120%) brightness(.82) !important;
    backdrop-filter: blur(26px) saturate(120%) brightness(.82) !important;
  }
}
erlay.open { display: flex !important; }
lay.open { display: flex !important; }

/* One subtitle scale throughout the site. BRAND STORY is the reference;
   Korean uses the same computed size and only its tracking changes. */
:root { --brand-story-subtitle-size: 16px; }

#about .label-tag,
#contact .contact-profile > .label-tag,
#contact .contact-form-heading > span,
#contact .contact-form .cf-label {
  font-size: var(--brand-story-subtitle-size) !important;
}

html.lang-ko body #about #brand-story-label,
html.lang-ko body #about .label-tag,
html.lang-ko body #contact .contact-profile > .label-tag,
html.lang-ko body #contact .contact-form-heading > span,
html.lang-ko body #contact .contact-form .cf-label {
  font-family: "Noto Sans", "Noto Sans KR", sans-serif !important;
  font-size: 16.3px !important;
  font-weight: 700 !important;
  letter-spacing: .28em !important;
  line-height: 1.86 !important;
}

@media (max-width: 700px) {
  :root { --brand-story-subtitle-size: 16px; }
}
eps its cinematic motion. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.is-wheel-scrolling #bokeh-canvas .bokeh {
    animation-play-state: running !important;
  }
}

/* ================================================================
   HERO OPENING REVEAL
   A long-form, film-like opening for the showreel. This is deliberately
   scoped to the first section so the completed gallery and desktop layout
   retain their existing motion and geometry.
   ================================================================ */
@keyframes bmk-hero-slate-in {
  0%   { opacity: 0; transform: translate3d(0, 20px, 0) scale(.985); filter: blur(7px); }
  65%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes bmk-hero-title-reveal {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(-3%, 0, 0); filter: blur(8px); }
  58%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes bmk-hero-line-reveal {
  0%   { opacity: 0; transform: scaleX(0); }
  100% { opacity: .9; transform: scaleX(1); }
}

@keyframes bmk-hero-frame-in {
  0%   { opacity: 0; transform: translate3d(0, 34px, 0) scale(.955); filter: brightness(.52) blur(9px); }
  62%  { opacity: 1; filter: brightness(1.05) blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1) blur(0); }
}

@keyframes bmk-hero-light-pass {
  0%   { opacity: 0; transform: translateX(-145%) skewX(-18deg); }
  18%  { opacity: .58; }
  72%  { opacity: .22; }
  100% { opacity: 0; transform: translateX(170%) skewX(-18deg); }
}

html.chrome-ready #showreel .hero-intro::after {
  content: "";
  display: block;
  width: min(174px, 30vw);
  height: 1px;
  margin: 19px auto 0;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(150, 222, 244, .95), transparent);
  animation: bmk-hero-line-reveal .82s cubic-bezier(.16,.78,.18,1) 1.18s both;
}

html.chrome-ready #showreel .hero-kicker {
  animation: bmk-hero-slate-in .76s cubic-bezier(.16,.78,.18,1) .12s both !important;
}

html.chrome-ready #showreel .hero-title {
  animation: bmk-hero-title-reveal 1.18s cubic-bezier(.16,.78,.18,1) .42s both !important;
  will-change: clip-path, transform, opacity, filter;
}

html.chrome-ready #showreel .hero-role {
  animation: bmk-hero-slate-in .84s cubic-bezier(.16,.78,.18,1) 1.12s both !important;
}

html.chrome-ready #showreel .showreel-player-stack {
  position: relative;
  opacity: 0;
  animation: bmk-hero-frame-in 1.16s cubic-bezier(.16,.78,.18,1) 1.58s forwards;
  will-change: transform, opacity, filter;
}

html.chrome-ready #showreel .showreel-player-stack::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 38px;
  bottom: 0;
  left: 0;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(203, 244, 255, .45), transparent);
  mix-blend-mode: screen;
  animation: bmk-hero-light-pass 1.18s ease-out 2.12s both;
}

html.chrome-ready #showreel .showreel-sound-toggle {
  opacity: 0;
  animation: bmk-hero-slate-in .66s cubic-bezier(.16,.78,.18,1) 2.34s forwards;
}

html.chrome-ready #showreel .hero-actions {
  opacity: 0;
  animation: bmk-hero-slate-in .7s cubic-bezier(.16,.78,.18,1) 2.58s forwards !important;
}

/* Refined hero pass: restrained copy motion plus a calm showreel frame entry. */
@keyframes bmk-hero-refined-copy {
  from { opacity: 0; transform: translate3d(0, 9px, 0); letter-spacing: .13em; }
  to { opacity: 1; transform: translate3d(0, 0, 0); letter-spacing: .07em; }
}

@keyframes bmk-hero-refined-support {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

html.chrome-ready #showreel .hero-intro::after,
html.chrome-ready #showreel .showreel-player-stack::after {
  content: none !important;
  display: none !important;
}

html.chrome-ready #showreel .hero-kicker {
  animation: bmk-hero-refined-support .46s cubic-bezier(.22,.74,.25,1) .04s both !important;
}

html.chrome-ready #showreel .hero-title {
  animation: bmk-hero-refined-copy .86s cubic-bezier(.22,.74,.25,1) .12s both !important;
  filter: none !important;
  clip-path: none !important;
}

html.chrome-ready #showreel .hero-role {
  animation: bmk-hero-refined-support .56s cubic-bezier(.22,.74,.25,1) .34s both !important;
}

html.chrome-ready #showreel .showreel-sound-toggle,
html.chrome-ready #showreel .hero-actions {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

/* The sound control belongs to the reel, not the full page column. Keep it
   in normal flex flow so its visual center always follows the player frame. */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  #showreel .showreel-player-stack .showreel-sound-toggle {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    align-self: center !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  #showreel .showreel-player-stack .showreel-player {
    margin-top: 0 !important;
  }
}

html.chrome-ready #showreel .showreel-player-stack {
  opacity: 0;
  animation: bmk-hero-frame-in 1.02s cubic-bezier(.22,.74,.25,1) .72s forwards !important;
  will-change: transform, opacity, filter;
}

/* ================================================================
   DESKTOP EDITORIAL MOTION
   Deliberate one-pass detail for section entries only. Touch layouts retain
   their existing lightweight reveal path.
   ================================================================ */
@keyframes bmk-section-rule-in {
  from { opacity: 0; transform: scaleX(.2); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes bmk-section-mark-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0) rotate(-16deg); filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); filter: blur(0); }
}

@keyframes bmk-gallery-card-in {
  from { opacity: 0; clip-path: inset(7% 0 0 0); filter: saturate(.72) brightness(.76); }
  to { opacity: 1; clip-path: inset(0 0 0 0); filter: saturate(1) brightness(1); }
}

@keyframes bmk-contact-glow-in {
  from { opacity: 0; transform: translate3d(-14px, 12px, 0) scale(.82); }
  to { opacity: .82; transform: translate3d(0, 0, 0) scale(1); }
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  #cinematography .gallery-title-header.reveal.visible::before,
  #photography .gallery-title-header.reveal.visible::before {
    transform-origin: right center;
    animation: bmk-section-rule-in .9s cubic-bezier(.16,.78,.18,1) .08s both;
  }

  #cinematography .gallery-title-header.reveal.visible::after,
  #photography .gallery-title-header.reveal.visible::after {
    transform-origin: left center;
    animation: bmk-section-rule-in .9s cubic-bezier(.16,.78,.18,1) .08s both;
  }

  #cinematography .gallery-title-header.reveal.visible .section-title-icon,
  #photography .gallery-title-header.reveal.visible .section-title-icon {
    animation: bmk-section-mark-in .64s cubic-bezier(.16,.78,.18,1) .25s both;
  }

  #cinematography .video-card.reveal.visible,
  #photography .photo-card.reveal.visible {
    animation: bmk-gallery-card-in .82s cubic-bezier(.16,.78,.18,1) both;
    will-change: clip-path, filter, opacity;
  }

  #cinematography .video-card.reveal.visible:nth-child(2),
  #photography .photo-card.reveal.visible:nth-child(2) { animation-delay: .06s; }
  #cinematography .video-card.reveal.visible:nth-child(3),
  #photography .photo-card.reveal.visible:nth-child(3) { animation-delay: .12s; }
  #cinematography .video-card.reveal.visible:nth-child(4),
  #photography .photo-card.reveal.visible:nth-child(4) { animation-delay: .18s; }
  #cinematography .video-card.reveal.visible:nth-child(5),
  #photography .photo-card.reveal.visible:nth-child(5) { animation-delay: .24s; }
  #cinematography .video-card.reveal.visible:nth-child(6),
  #photography .photo-card.reveal.visible:nth-child(6) { animation-delay: .30s; }

  #about .about-photo-wrap {
    overflow: hidden;
  }

  #about .about-photo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(190, 237, 249, .22) 50%, transparent 62%);
    transform: translateX(-125%);
  }

  #about .about-left.reveal.visible .about-photo-wrap::after {
    animation: bmk-hero-light-pass 1.25s ease-out .52s both;
  }

  #contact .contact-inner.reveal.visible::before {
    content: "";
    position: absolute;
    width: clamp(150px, 16vw, 280px);
    height: clamp(150px, 16vw, 280px);
    right: 6%;
    bottom: 2%;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(105, 192, 220, .14), transparent 68%);
    filter: blur(4px);
    animation: bmk-contact-glow-in 1.1s cubic-bezier(.16,.78,.18,1) .24s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cinematography .gallery-title-header.reveal.visible::before,
  #cinematography .gallery-title-header.reveal.visible::after,
  #photography .gallery-title-header.reveal.visible::before,
  #photography .gallery-title-header.reveal.visible::after,
  #cinematography .gallery-title-header.reveal.visible .section-title-icon,
  #photography .gallery-title-header.reveal.visible .section-title-icon,
  #cinematography .video-card.reveal.visible,
  #photography .photo-card.reveal.visible,
  #about .about-left.reveal.visible .about-photo-wrap::after,
  #contact .contact-inner.reveal.visible::before {
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready #showreel .hero-kicker,
  html.chrome-ready #showreel .hero-title,
  html.chrome-ready #showreel .hero-role,
  html.chrome-ready #showreel .showreel-player-stack,
  html.chrome-ready #showreel .showreel-sound-toggle,
  html.chrome-ready #showreel .hero-actions {
    opacity: 1 !important;
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
  }

  html.chrome-ready #showreel .hero-intro::after,
  html.chrome-ready #showreel .showreel-player-stack::after {
    animation: none !important;
    opacity: 0 !important;
  }
}
erlay.open { display: flex !important; }
lay.open { display: flex !important; }
e. BRAND STORY is the reference;
   Korean uses the same computed size and only its tracking changes. */
:root { --brand-story-subtitle-size: 1.1rem; }

#about .label-tag,
#contact .contact-profile > .label-tag,
#contact .contact-form-heading > span,
#contact .contact-form .cf-label {
  font-size: var(--brand-story-subtitle-size) !important;
}

@media (max-width: 700px) {
  :root { --brand-story-subtitle-size: .62rem; }
}
eps its cinematic motion. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.is-wheel-scrolling #bokeh-canvas .bokeh {
    animation-play-state: running !important;
  }
}
erlay.open { display: flex !important; }
lay.open { display: flex !important; }
l-scrolling #bokeh-canvas .bokeh {
    animation-play-state: running !important;
  }
}
erlay.open { display: flex !important; }
lay.open { display: flex !important; }
; }

/* Hero reveal final authority: placed after legacy FTP sync fragments. */
html.chrome-ready #showreel .hero-kicker {
  animation: bmk-hero-slate-in .76s cubic-bezier(.16,.78,.18,1) .12s both !important;
}
html.chrome-ready #showreel .hero-title {
  animation: bmk-hero-title-reveal 1.18s cubic-bezier(.16,.78,.18,1) .42s both !important;
}
html.chrome-ready #showreel .hero-role {
  animation: bmk-hero-slate-in .84s cubic-bezier(.16,.78,.18,1) 1.12s both !important;
}
html.chrome-ready #showreel .showreel-player-stack {
  opacity: 0;
  animation: bmk-hero-frame-in 1.16s cubic-bezier(.16,.78,.18,1) 1.58s forwards !important;
}
html.chrome-ready #showreel .showreel-sound-toggle {
  opacity: 0;
  animation: bmk-hero-slate-in .66s cubic-bezier(.16,.78,.18,1) 2.34s forwards !important;
}
html.chrome-ready #showreel .hero-actions {
  opacity: 0;
  animation: bmk-hero-slate-in .7s cubic-bezier(.16,.78,.18,1) 2.58s forwards !important;
}

/* Final refined hero authority: keep the frame reveal, remove all light sweeps. */
@keyframes bmk-hero-copy-group-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

html.chrome-ready #showreel .hero-intro::after,
html.chrome-ready #showreel .showreel-player-stack::after {
  content: none !important;
  display: none !important;
}

html.chrome-ready #showreel .hero-kicker {
  opacity: 1 !important;
  animation: none !important;
}

html.chrome-ready #showreel .hero-title {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  clip-path: none !important;
}

html.chrome-ready #showreel .hero-role {
  opacity: 1 !important;
  animation: none !important;
}

html.chrome-ready #showreel .hero-intro {
  opacity: 0;
  animation: bmk-hero-copy-group-in .78s cubic-bezier(.22,.74,.25,1) .12s forwards !important;
}

html.chrome-ready #showreel .showreel-player-stack {
  opacity: 0;
  animation: bmk-hero-frame-in 1.02s cubic-bezier(.22,.74,.25,1) 1.02s forwards !important;
  will-change: transform, opacity, filter;
}

html.chrome-ready #showreel .showreel-sound-toggle {
  opacity: 0;
  animation: bmk-hero-refined-support .54s cubic-bezier(.22,.74,.25,1) 2.14s forwards !important;
}

html.chrome-ready #showreel .hero-actions {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

/* Final hero sequence: grouped copy, player fade, sound control, then cue. */
@keyframes bmk-hero-player-fade-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); filter: brightness(.78); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
}

@keyframes bmk-hero-scroll-cue-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

html.chrome-ready #showreel .showreel-player-stack {
  opacity: 0;
  animation: bmk-hero-player-fade-in 1.05s cubic-bezier(.22,.74,.25,1) 1.02s forwards !important;
}

html.chrome-ready #showreel .showreel-sound-toggle {
  opacity: 0;
  animation: bmk-hero-refined-support .54s cubic-bezier(.22,.74,.25,1) 2.16s forwards !important;
}

html.chrome-ready #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
  opacity: 0;
  animation: bmk-hero-scroll-cue-in .56s cubic-bezier(.22,.74,.25,1) 2.84s forwards !important;
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready #showreel .showreel-player-stack,
  html.chrome-ready #showreel .showreel-sound-toggle,
  html.chrome-ready #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Final staged hero timing: copy → frame → sound → scroll cue. */
html.chrome-ready #showreel .hero-intro {
  opacity: 0;
  animation: bmk-hero-copy-group-in .78s cubic-bezier(.22,.74,.25,1) .12s forwards !important;
}

html.chrome-ready #showreel .showreel-player-stack {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

html.chrome-ready #showreel .showreel-player-stack .showreel-player {
  opacity: 1 !important;
  animation: bmk-hero-frame-entrance 1.08s cubic-bezier(.16,.78,.18,1) 1.05s both !important;
}

html.chrome-ready #showreel .showreel-player-stack .showreel-sound-toggle {
  opacity: 0;
  animation: bmk-hero-refined-support .54s cubic-bezier(.22,.74,.25,1) 2.32s forwards !important;
}

html.chrome-ready #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
  opacity: 0;
  animation: bmk-hero-scroll-cue-in .56s cubic-bezier(.22,.74,.25,1) 2.98s forwards !important;
}

/* Final sequence correction: use a clip-only frame reveal so transform
   guardrails cannot cancel the animation, then gate the following controls. */
@keyframes bmk-hero-frame-clip-in {
  from { opacity: 1; clip-path: inset(8% 1.4% 0 1.4% round 10px); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 8px); }
}

@keyframes bmk-hero-sound-stage-in {
  from { opacity: 0; visibility: hidden; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); }
}

@keyframes bmk-hero-cue-stage-in {
  from { opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); }
}

html.chrome-ready #showreel .showreel-player-stack .showreel-player {
  opacity: 1 !important;
  animation: bmk-hero-frame-clip-in 1.08s cubic-bezier(.16,.78,.18,1) 1.05s both !important;
  clip-path: inset(8% 1.4% 0 1.4% round 10px);
}

html.chrome-ready #showreel .showreel-player-stack .showreel-sound-toggle {
  opacity: 0;
  visibility: hidden;
  animation: bmk-hero-sound-stage-in .54s cubic-bezier(.22,.74,.25,1) 2.32s both !important;
}

html.chrome-ready #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
  opacity: 0;
  visibility: hidden;
  animation: bmk-hero-cue-stage-in .56s cubic-bezier(.22,.74,.25,1) 2.98s both !important;
}

/* Keep the stack paintable; fade the actual player surface instead. This
   avoids an iframe compositor edge case that can leave its parent transparent. */
html.chrome-ready #showreel .showreel-player-stack {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

html.chrome-ready #showreel .showreel-player {
  opacity: 0;
  animation: bmk-hero-player-fade-in 1.05s cubic-bezier(.22,.74,.25,1) 1.02s forwards !important;
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready #showreel .showreel-player {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Compositor-safe end state for the timed hero sequence. */
html.hero-sequence-complete #showreel .showreel-player,
html.hero-sequence-complete #showreel .showreel-sound-toggle,
html.hero-sequence-complete #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

html.hero-sequence-complete #showreel .showreel-sound-toggle {
  visibility: visible !important;
}

/* Restore the original showreel frame animation; the later player-surface
   fade override is intentionally retired. */
html.chrome-ready #showreel .showreel-player-stack {
  opacity: 0;
  animation: bmk-hero-frame-in 1.16s cubic-bezier(.16,.78,.18,1) 1.58s forwards !important;
  filter: none !important;
  transform: none !important;
}

html.chrome-ready #showreel .showreel-player {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

/* Frame-only entrance: no opacity fade. The reel glides upward, tightens
   into place, and opens with a subtle clip reveal. */
@keyframes bmk-hero-frame-smooth-in {
  0%   { opacity: 1; transform: translate3d(0, 26px, 0) scale(.965); clip-path: inset(5% 1.5% 0 1.5% round 10px); filter: blur(2px) saturate(.86); }
  65%  { opacity: 1; transform: translate3d(0, 2px, 0) scale(.992); clip-path: inset(1% .25% 0 .25% round 8px); filter: blur(0) saturate(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); clip-path: inset(0 0 0 0 round 8px); filter: blur(0) saturate(1); }
}

html.chrome-ready #showreel .showreel-player-stack {
  opacity: 1 !important;
  animation: bmk-hero-frame-smooth-in 1.08s cubic-bezier(.16,.78,.18,1) 1.58s both !important;
  will-change: transform, clip-path, filter;
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready #showreel .showreel-player-stack {
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Correct sequence: animate the frame surface only. The sound control stays
   centered in its stack and enters independently after the frame settles. */
@keyframes bmk-hero-frame-entrance {
  0%   { opacity: 1; transform: translate3d(0, 24px, 0) scale(.968); clip-path: inset(7% 1.2% 0 1.2% round 10px); filter: blur(2px) saturate(.88); }
  68%  { opacity: 1; transform: translate3d(0, 2px, 0) scale(.994); clip-path: inset(1% .2% 0 .2% round 8px); filter: blur(0) saturate(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); clip-path: inset(0 round 8px); filter: none; }
}

html.chrome-ready #showreel .showreel-player-stack {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

html.chrome-ready #showreel .showreel-player-stack .showreel-player {
  opacity: 1 !important;
  animation: bmk-hero-frame-entrance 1.08s cubic-bezier(.16,.78,.18,1) 1.58s both !important;
  will-change: transform, clip-path, filter;
}

html.chrome-ready #showreel .showreel-player-stack .showreel-sound-toggle {
  opacity: 0;
  animation: bmk-hero-refined-support .54s cubic-bezier(.22,.74,.25,1) 2.78s forwards !important;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready #showreel .showreel-player-stack,
  html.chrome-ready #showreel .showreel-player-stack .showreel-player,
  html.chrome-ready #showreel .showreel-player-stack .showreel-sound-toggle {
    opacity: 1 !important;
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
  }
}
one !important;
  }
}

/* Last cascade authority for the staged hero sequence. */
html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-player {
  opacity: 1 !important;
  animation: bmk-hero-media-settle-in .92s cubic-bezier(.16,.78,.18,1) .25s both !important;
  clip-path: inset(8% 1.4% 0 1.4% round 10px);
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-sound-toggle {
  opacity: 0;
  visibility: hidden;
  animation: bmk-hero-sound-stage-in .48s cubic-bezier(.22,.74,.25,1) 1.30s both !important;
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
  opacity: 0;
  visibility: hidden;
  animation: bmk-hero-cue-stage-in .52s cubic-bezier(.22,.74,.25,1) 1.95s both !important;
}

/* The frame wrapper has a legacy !important clip/transform contract. Animate
   the actual Vimeo surface inside it so the entrance is visible in-browser. */
@keyframes bmk-hero-media-settle-in {
  0%   { opacity: 1; transform: translate3d(0, 22px, 0) scale(.965); filter: blur(2px) saturate(.86); }
  68%  { opacity: 1; transform: translate3d(0, 2px, 0) scale(.994); filter: blur(0) saturate(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; }
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-player {
  animation: none !important;
  clip-path: inset(0 round 18px) !important;
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-player iframe,
html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-player video {
  animation: bmk-hero-media-settle-in .92s cubic-bezier(.16,.78,.18,1) .25s both !important;
  will-change: transform, filter;
}

/* Smooth premium pass: keep the video layer crisp and let one long ease carry
   the frame into place instead of stacking abrupt blur/clip transitions. */
@keyframes bmk-hero-media-premium-in {
  0%   { opacity: 1; transform: translate3d(0, 12px, 0) scale(.985); }
  58%  { opacity: 1; transform: translate3d(0, 2px, 0) scale(.997); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-player iframe,
html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-player video {
  animation: bmk-hero-media-premium-in 1.2s cubic-bezier(.16,1,.3,1) .22s both !important;
  filter: none !important;
  will-change: transform;
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-sound-toggle {
  animation: bmk-hero-sound-stage-in .6s cubic-bezier(.16,1,.3,1) 1.56s both !important;
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
  animation: bmk-hero-cue-stage-in .6s cubic-bezier(.16,1,.3,1) 2.28s both !important;
}

/* Visible frame entrance: a clean curtain reveals the frame surface itself. */
@keyframes bmk-hero-frame-surface-reveal {
  0%   { clip-path: inset(0 0 0 0 round 18px); opacity: .98; }
  100% { clip-path: inset(0 100% 0 0 round 18px); opacity: .98; }
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(187, 230, 242, .28);
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(5, 9, 11, .98), rgba(9, 15, 18, .96));
  animation: bmk-hero-frame-surface-reveal 1.35s cubic-bezier(.16,1,.3,1) 0s both !important;
}

html.hero-sequence-complete #showreel .showreel-player::before {
  content: none !important;
  display: none !important;
}

/* Longer cinematic timing so each stage can be read before the next begins. */
html.chrome-ready:not(.hero-sequence-complete) #showreel .hero-intro {
  animation-duration: 1.1s !important;
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player::before {
  animation-duration: 2s !important;
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-player iframe,
html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-player video {
  animation-duration: 1.9s !important;
  animation-delay: 1.3s !important;
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-sound-toggle {
  animation-duration: .9s !important;
  animation-delay: 3.45s !important;
}

html.chrome-ready:not(.hero-sequence-complete) #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
  animation-duration: .8s !important;
  animation-delay: 4.55s !important;
}
}
}

/* Paint hero immediately while async settings settle so the staged entrance
   is visible instead of being hidden behind a black loading pause. */
html:not(.chrome-ready) body #showreel,
html:not(.chrome-ready) body #showreel .hero-intro,
html:not(.chrome-ready) body #showreel .showreel-player-stack {
  visibility: visible !important;
  opacity: 1 !important;
}

/* The frame itself is the reveal subject.  Animate its clipping edge so the
   entrance remains visible even when the embedded Vimeo surface is black. */
@keyframes bmk-frame-reveal-final {
  0% { clip-path: inset(0 100% 0 0 round 18px); opacity: .35; }
  22% { opacity: .72; }
  100% { clip-path: inset(0 0 0 0 round 18px); opacity: 1; }
}
@keyframes bmk-frame-slide-final {
  0% { transform: scaleX(1); transform-origin: left center; opacity: .98; }
  65% { transform: scaleX(.22); opacity: .98; }
  100% { transform: scaleX(0); opacity: .98; }
}
html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-player {
  animation-name: bmk-frame-reveal-final !important;
  animation-duration: 2.8s !important;
  animation-delay: .65s !important;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
  animation-fill-mode: both !important;
  will-change: clip-path, opacity;
}

html.chrome-ready:not(.hero-sequence-complete) body #showreel .showreel-player::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border: 1px solid rgba(187, 230, 242, .34) !important;
  border-radius: inherit !important;
  background: #05090b !important;
  clip-path: inset(0 0 0 0 round 18px);
  transform-origin: left center;
  animation: bmk-frame-slide-final 2.8s cubic-bezier(.16, 1, .3, 1) .65s both !important;
}

/* Revert experimental curtain reveal and restore the original frame motion. */
html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-player {
  animation: bmk-hero-frame-entrance 1.08s cubic-bezier(.16,.78,.18,1) 1.58s both !important;
}
html.chrome-ready:not(.hero-sequence-complete) body #showreel .showreel-player::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}
html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-sound-toggle {
  animation: bmk-hero-refined-support .54s cubic-bezier(.22,.74,.25,1) 2.78s forwards !important;
}
portant;
}
portant;
}

/* Final mobile visibility/layout authority.  This sits after the legacy
   mobile experiments so the real hero and nav cannot be hidden or crowded. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #showreel,
  html body #showreel .hero-intro,
  html body #showreel .showreel-player-stack,
  html body #showreel .showreel-player,
  html body #showreel .showreel-player.is-aspect-pending {
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body #showreel .hero-intro {
    display: block !important;
    padding-top: 24px !important;
    position: relative !important;
    z-index: 4 !important;
    animation: bmk-mobile-hero-reveal .7s cubic-bezier(.22, .7, .22, 1) .08s both !important;
  }

  html body #showreel .hero-kicker,
  html body #showreel .hero-title,
  html body #showreel .hero-role {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  html body #showreel .showreel-player-stack {
    display: block !important;
    position: relative !important;
    z-index: 3 !important;
    animation: bmk-mobile-frame-visible .85s cubic-bezier(.22, .7, .22, 1) .25s both !important;
  }

  html body #showreel .showreel-player {
    min-height: 180px !important;
    background: rgba(3, 7, 9, .82) !important;
    border-color: rgba(170, 222, 242, .32) !important;
    box-shadow: 0 20px 58px rgba(0,0,0,.54), 0 0 0 1px rgba(150,220,242,.12) !important;
  }

  html body #showreel .showreel-player iframe,
  html body #showreel .showreel-player video {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Keep the brand lockup clear of the language pill on narrow phones. */
  html body #main-nav .nav-inner {
    gap: 6px !important;
    padding-inline: 10px !important;
  }

  html body #main-nav .nav-logo {
    min-width: 0 !important;
    max-width: calc(100vw - 136px) !important;
    flex: 1 1 auto !important;
  }

  html body #main-nav .logo-sub {
    display: none !important;
  }

  html body #main-nav .language-switcher {
    flex: 0 0 auto !important;
    max-width: 84px !important;
    overflow: hidden !important;
    gap: 2px !important;
  }

  html body #main-nav .language-switcher a {
    padding: 5px 6px !important;
    font-size: .56rem !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
  }
}

@keyframes bmk-mobile-hero-reveal {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bmk-mobile-frame-visible {
  from { opacity: .35; transform: translate3d(0, 14px, 0) scale(.985); filter: brightness(.72); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
}

/* ================================================================
   DESKTOP HERO — REPLACEMENT MOTION SYSTEM
   This intentionally resets the earlier hero sequence. The new entrance is
   more visible while keeping the timing and surfaces editorial, not flashy.
   ================================================================ */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #showreel .hero-intro::after,
  #showreel .showreel-player-stack::after,
  #showreel .showreel-player::before {
    content: none !important;
    display: none !important;
    animation: none !important;
  }

  html.chrome-ready #showreel .hero-kicker,
  html.chrome-ready #showreel .hero-title,
  html.chrome-ready #showreel .hero-role,
  html.chrome-ready #showreel .showreel-player-stack,
  html.chrome-ready #showreel .showreel-sound-toggle,
  html.chrome-ready #showreel .hero-actions {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
    will-change: auto;
  }

  html.chrome-ready #showreel .hero-kicker {
    opacity: 0 !important;
    animation: bmk-hero-replacement-kicker .8s cubic-bezier(.16, 1, .3, 1) .08s both !important;
    will-change: opacity, transform, letter-spacing, filter;
  }

  html.chrome-ready #showreel .hero-title {
    position: relative;
    opacity: 0 !important;
    color: #fff !important;
    text-shadow: 0 0 0 rgba(180, 231, 250, 0), 0 18px 52px rgba(0, 0, 0, .52);
    animation: bmk-hero-replacement-title 1.35s cubic-bezier(.16, 1, .3, 1) .24s both !important;
    will-change: opacity, transform, clip-path, filter, text-shadow;
  }

  html.chrome-ready #showreel .hero-role {
    opacity: 0 !important;
    animation: bmk-hero-replacement-role .9s cubic-bezier(.16, 1, .3, 1) .72s both !important;
    will-change: opacity, transform, filter;
  }

  html.chrome-ready #showreel .showreel-player-stack {
    position: relative;
    opacity: 0 !important;
    animation: bmk-hero-replacement-frame 1.5s cubic-bezier(.16, 1, .3, 1) 1s both !important;
    will-change: opacity, transform, filter;
  }

  html.chrome-ready #showreel .showreel-player {
    overflow: hidden;
    border-color: rgba(192, 231, 245, .26) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(150, 220, 242, .14), 0 0 42px rgba(92, 178, 215, .12) !important;
    transition: transform .7s cubic-bezier(.16, 1, .3, 1), border-color .5s ease, box-shadow .7s ease !important;
  }

  html.chrome-ready #showreel .showreel-player::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 6 !important;
    inset: 0 !important;
    pointer-events: none !important;
    border: 1px solid rgba(208, 244, 255, .38) !important;
    border-radius: inherit !important;
    background: linear-gradient(108deg, transparent 28%, rgba(220, 248, 255, .34) 47%, transparent 66%) !important;
    background-size: 230% 100% !important;
    mix-blend-mode: screen !important;
    opacity: 0 !important;
    animation: bmk-hero-replacement-sheen 1.6s cubic-bezier(.2, .75, .2, 1) 1.48s both !important;
  }

  html.chrome-ready #showreel .showreel-player iframe,
  html.chrome-ready #showreel .showreel-player video {
    transform: scale(1.07) !important;
    filter: brightness(.8) saturate(.88) !important;
    transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), filter 1s ease !important;
  }

  html.chrome-ready #showreel .showreel-player-stack:hover .showreel-player {
    transform: translateY(-8px) scale(1.012) !important;
    border-color: rgba(207, 242, 252, .7) !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .72), 0 0 0 1px rgba(170, 229, 247, .26), 0 0 56px rgba(92, 178, 215, .22) !important;
  }

  html.chrome-ready #showreel .showreel-player-stack:hover .showreel-player iframe,
  html.chrome-ready #showreel .showreel-player-stack:hover .showreel-player video {
    transform: scale(1.12) !important;
    filter: brightness(1) saturate(1.04) !important;
  }

  html.chrome-ready #showreel .showreel-sound-toggle,
  html.chrome-ready #showreel .hero-actions {
    opacity: 0 !important;
    animation: bmk-hero-replacement-support .7s cubic-bezier(.16, 1, .3, 1) 2.18s both !important;
  }
}

@keyframes bmk-hero-replacement-kicker {
  0% { opacity: 0; transform: translate3d(0, 18px, 0); letter-spacing: .56em; filter: blur(8px); }
  70% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); letter-spacing: .32em; filter: blur(0); }
}

@keyframes bmk-hero-replacement-title {
  0% { opacity: 0; transform: translate3d(0, 34px, 0) scale(.94); clip-path: inset(0 0 100% 0); filter: blur(14px); text-shadow: 0 0 0 rgba(180, 231, 250, 0); }
  55% { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); text-shadow: 0 0 34px rgba(180, 231, 250, .2), 0 18px 52px rgba(0, 0, 0, .52); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); clip-path: inset(0); filter: blur(0); text-shadow: 0 0 18px rgba(180, 231, 250, .1), 0 18px 52px rgba(0, 0, 0, .52); }
}

@keyframes bmk-hero-replacement-role {
  0% { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(8px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes bmk-hero-replacement-frame {
  0% { opacity: 0; transform: translate3d(0, 46px, 0) scale(.9); filter: brightness(.45) blur(10px); }
  52% { opacity: 1; transform: translate3d(0, -5px, 0) scale(1.012); filter: brightness(1.08) blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1) blur(0); }
}

@keyframes bmk-hero-replacement-sheen {
  0% { opacity: 0; background-position: 140% 0; }
  18% { opacity: .95; }
  58% { opacity: .3; }
  100% { opacity: 0; background-position: -40% 0; }
}

@keyframes bmk-hero-replacement-support {
  0% { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready #showreel .hero-kicker,
  html.chrome-ready #showreel .hero-title,
  html.chrome-ready #showreel .hero-role,
  html.chrome-ready #showreel .showreel-player-stack,
  html.chrome-ready #showreel .showreel-player iframe,
  html.chrome-ready #showreel .showreel-player video,
  html.chrome-ready #showreel .showreel-sound-toggle,
  html.chrome-ready #showreel .hero-actions {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  html.chrome-ready #showreel .showreel-player::after {
    content: none !important;
  }
}

/* ================================================================
   MOBILE HERO — QUIET PREMIUM MOTION
   Shorter distances and softer contrast keep the first viewport calm.
   ================================================================ */
@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  #showreel .hero-intro::after,
  #showreel .showreel-player-stack::after,
  #showreel .showreel-player::before {
    content: none !important;
    display: none !important;
    animation: none !important;
  }

  html.chrome-ready #showreel .hero-kicker,
  html.chrome-ready #showreel .hero-title,
  html.chrome-ready #showreel .hero-role,
  html.chrome-ready #showreel .showreel-player-stack,
  html.chrome-ready #showreel .hero-actions {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
  }

  html.chrome-ready #showreel .hero-kicker {
    opacity: 0 !important;
    animation: bmk-mobile-kicker-in .55s cubic-bezier(.22, .7, .22, 1) .08s both !important;
  }

  html.chrome-ready #showreel .hero-title {
    opacity: 0 !important;
    animation: bmk-mobile-title-in .78s cubic-bezier(.22, .7, .22, 1) .18s both !important;
  }

  html.chrome-ready #showreel .hero-role {
    opacity: 0 !important;
    animation: bmk-mobile-copy-in .6s cubic-bezier(.22, .7, .22, 1) .42s both !important;
  }

  html.chrome-ready #showreel .showreel-player-stack {
    opacity: 0 !important;
    animation: bmk-mobile-frame-in .9s cubic-bezier(.22, .7, .22, 1) .58s both !important;
  }

  html.chrome-ready #showreel .showreel-player {
    border-color: rgba(192, 231, 245, .24) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, .48), 0 0 0 1px rgba(150, 220, 242, .08) !important;
  }

  html.chrome-ready #showreel .showreel-player iframe,
  html.chrome-ready #showreel .showreel-player video {
    animation: bmk-mobile-video-focus .9s cubic-bezier(.22, .7, .22, 1) .58s both !important;
  }

  html.chrome-ready #showreel .hero-actions {
    opacity: 0 !important;
    animation: bmk-mobile-copy-in .6s cubic-bezier(.22, .7, .22, 1) .86s both !important;
  }
}

@keyframes bmk-mobile-kicker-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); letter-spacing: .38em; filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); letter-spacing: .24em; filter: blur(0); }
}

@keyframes bmk-mobile-title-in {
  from { opacity: 0; transform: translate3d(0, 13px, 0) scale(.985); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes bmk-mobile-copy-in {
  from { opacity: 0; transform: translate3d(0, 9px, 0); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes bmk-mobile-frame-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.975); filter: brightness(.72); }
  70% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.002); filter: brightness(1.03); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
}

@keyframes bmk-mobile-video-focus {
  from { transform: scale(1.045); filter: brightness(.84) saturate(.9); }
  to { transform: scale(1); filter: brightness(1) saturate(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready #showreel .hero-kicker,
  html.chrome-ready #showreel .hero-title,
  html.chrome-ready #showreel .hero-role,
  html.chrome-ready #showreel .showreel-player-stack,
  html.chrome-ready #showreel .showreel-player iframe,
  html.chrome-ready #showreel .showreel-player video,
  html.chrome-ready #showreel .hero-actions {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ================================================================
   DESKTOP HERO — PREMIUM FINAL PASS
   A quiet editorial entrance for the copy and showreel surface.
   Touch layouts keep their existing, lighter motion system.
   ================================================================ */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #showreel .hero-intro {
    position: relative;
    isolation: isolate;
  }

  #showreel .hero-intro::after {
    content: "";
    display: block;
    width: min(180px, 22vw);
    height: 1px;
    margin: 20px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background: linear-gradient(90deg, transparent, rgba(170, 224, 245, .85), transparent);
    opacity: 0;
    animation: bmk-premium-rule-in .9s cubic-bezier(.16, 1, .3, 1) 1.12s both;
  }

  html.chrome-ready #showreel .hero-kicker,
  html.chrome-ready #showreel .hero-title,
  html.chrome-ready #showreel .hero-role {
    opacity: 0;
    animation-fill-mode: both !important;
    will-change: transform, opacity, filter;
  }

  html.chrome-ready #showreel .hero-kicker {
    animation: bmk-premium-kicker-in .72s cubic-bezier(.16, 1, .3, 1) .08s both !important;
  }

  html.chrome-ready #showreel .hero-title {
    animation: bmk-premium-title-in 1.08s cubic-bezier(.16, 1, .3, 1) .25s both !important;
  }

  html.chrome-ready #showreel .hero-role {
    animation: bmk-premium-copy-in .78s cubic-bezier(.16, 1, .3, 1) .68s both !important;
  }

  html.chrome-ready #showreel .showreel-player-stack {
    position: relative;
    opacity: 0;
    animation: bmk-premium-frame-in 1.18s cubic-bezier(.16, 1, .3, 1) .88s both !important;
    will-change: transform, opacity;
  }

  html.chrome-ready #showreel .showreel-player-stack::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 1px;
    pointer-events: none;
    border: 1px solid rgba(195, 235, 248, .2);
    border-radius: 9px;
    background: linear-gradient(108deg, transparent 35%, rgba(210, 245, 255, .18) 49%, transparent 63%);
    background-size: 220% 100%;
    mix-blend-mode: screen;
    opacity: 0;
    animation: bmk-premium-sheen 1.25s ease-out 1.38s both;
  }

  html.chrome-ready #showreel .showreel-player {
    box-shadow: 0 34px 110px rgba(0, 0, 0, .58), 0 0 0 1px rgba(155, 218, 240, .08);
    transition: transform .9s cubic-bezier(.16, 1, .3, 1), box-shadow .9s ease, border-color .7s ease;
  }

  html.chrome-ready #showreel .showreel-player iframe,
  html.chrome-ready #showreel .showreel-player video {
    transform: scale(1.035);
    transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), filter 1.2s ease;
  }

  #showreel .showreel-player-stack:hover .showreel-player {
    transform: translateY(-5px);
    border-color: rgba(175, 226, 243, .34);
    box-shadow: 0 42px 125px rgba(0, 0, 0, .66), 0 0 0 1px rgba(155, 218, 240, .12);
  }

  #showreel .showreel-player-stack:hover .showreel-player iframe,
  #showreel .showreel-player-stack:hover .showreel-player video {
    transform: scale(1.055);
  }
}

@keyframes bmk-premium-kicker-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); letter-spacing: .48em; filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); letter-spacing: .32em; filter: blur(0); }
}

@keyframes bmk-premium-title-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); clip-path: inset(0 0 100% 0); filter: blur(6px); }
  62% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); clip-path: inset(0); filter: blur(0); }
}

@keyframes bmk-premium-copy-in {
  from { opacity: 0; transform: translate3d(0, 13px, 0); filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes bmk-premium-frame-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.965); filter: brightness(.68) saturate(.82); }
  68% { opacity: 1; transform: translate3d(0, 1px, 0) scale(.998); filter: brightness(1.02) saturate(1); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1) saturate(1); }
}

@keyframes bmk-premium-rule-in {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: .85; transform: scaleX(1); }
}

@keyframes bmk-premium-sheen {
  0% { opacity: 0; background-position: 130% 0; }
  18% { opacity: .85; }
  68% { opacity: .2; }
  100% { opacity: 0; background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready #showreel .hero-kicker,
  html.chrome-ready #showreel .hero-title,
  html.chrome-ready #showreel .hero-role,
  html.chrome-ready #showreel .showreel-player-stack,
  html.chrome-ready #showreel .showreel-player iframe,
  html.chrome-ready #showreel .showreel-player video {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  html.chrome-ready #showreel .hero-intro::after,
  html.chrome-ready #showreel .showreel-player-stack::after {
    animation: none !important;
    opacity: 0 !important;
  }
}
reel-player::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}
html.chrome-ready:not(.hero-sequence-complete) #showreel .showreel-player-stack .showreel-sound-toggle {
  animation: bmk-hero-refined-support .54s cubic-bezier(.22,.74,.25,1) 2.78s forwards !important;
}
portant;
}
portant;
}

/* Absolute last mobile authority: restore visible hero content and reserve a
   clean, non-overlapping header lockup on narrow portrait screens. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #showreel,
  html body #showreel .hero-intro,
  html body #showreel .showreel-player-stack,
  html body #showreel .showreel-player,
  html body #showreel .showreel-player.is-aspect-pending {
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body #showreel .hero-intro {
    display: block !important;
    padding-top: 24px !important;
    animation: bmk-mobile-hero-reveal .7s cubic-bezier(.22,.7,.22,1) .08s both !important;
  }

  html body #showreel .hero-kicker,
  html body #showreel .hero-title,
  html body #showreel .hero-role {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  html body #showreel .showreel-player-stack {
    display: block !important;
    animation: bmk-mobile-frame-visible .85s cubic-bezier(.22,.7,.22,1) .25s both !important;
  }

  html body #showreel .showreel-player {
    min-height: 180px !important;
    background: rgba(3,7,9,.82) !important;
    border-color: rgba(170,222,242,.32) !important;
    box-shadow: 0 20px 58px rgba(0,0,0,.54), 0 0 0 1px rgba(150,220,242,.12) !important;
  }

  html body #main-nav .nav-inner { gap: 6px !important; padding-inline: 10px !important; }
  html body #main-nav .nav-logo { min-width: 0 !important; max-width: calc(100vw - 136px) !important; flex: 1 1 auto !important; }
  html body #main-nav .logo-sub { display: none !important; }
  html body #main-nav .language-switcher { flex: 0 0 auto !important; max-width: 84px !important; overflow: hidden !important; gap: 2px !important; }
  html body #main-nav .language-switcher a { padding: 5px 6px !important; font-size: .56rem !important; letter-spacing: .02em !important; white-space: nowrap !important; }
}

/* ================================================================
   FINAL HERO RENDER AUTHORITY
   Must remain last: older deployment fragments below the main stylesheet
   previously replaced the intended animation names and left the player at 0.
   ================================================================ */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.chrome-ready #showreel .hero-kicker,
  html.chrome-ready #showreel .hero-title,
  html.chrome-ready #showreel .hero-role,
  html.chrome-ready #showreel .showreel-player-stack {
    opacity: 1 !important;
    animation: none !important;
  }

  html.chrome-ready #showreel .hero-kicker { animation: bmk-final-kicker .72s cubic-bezier(.16,1,.3,1) .08s both !important; }
  html.chrome-ready #showreel .hero-title { animation: bmk-final-title 1.1s cubic-bezier(.16,1,.3,1) .2s both !important; }
  html.chrome-ready #showreel .hero-role { animation: bmk-final-copy .72s cubic-bezier(.16,1,.3,1) .62s both !important; }
  html.chrome-ready #showreel .showreel-player-stack { animation: bmk-final-frame 1.15s cubic-bezier(.16,1,.3,1) .82s both !important; }

  html.chrome-ready #showreel .showreel-player::before,
  html.chrome-ready #showreel .showreel-player-stack::after { content: none !important; display: none !important; }

  html.chrome-ready #showreel .showreel-player::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    pointer-events: none !important;
    border: 1px solid rgba(210,244,255,.48) !important;
    border-radius: inherit !important;
    background: linear-gradient(105deg, transparent 30%, rgba(220,248,255,.38) 48%, transparent 66%) !important;
    background-size: 240% 100% !important;
    mix-blend-mode: screen !important;
    opacity: 0 !important;
    animation: bmk-final-sheen 1.4s ease-out 1.42s both !important;
  }

  html.chrome-ready #showreel .showreel-player {
    border-color: rgba(190,232,247,.32) !important;
    box-shadow: 0 35px 110px rgba(0,0,0,.64), 0 0 0 1px rgba(151,220,242,.18), 0 0 46px rgba(90,179,218,.15) !important;
    transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s ease, border-color .5s ease !important;
  }

  html.chrome-ready #showreel .showreel-player-stack:hover .showreel-player {
    transform: translateY(-8px) scale(1.012) !important;
    border-color: rgba(215,246,255,.72) !important;
    box-shadow: 0 44px 130px rgba(0,0,0,.74), 0 0 0 1px rgba(190,239,252,.3), 0 0 64px rgba(90,179,218,.25) !important;
  }
}

@media (max-width: 1024px) {
  html body #showreel,
  html body #showreel .hero-intro,
  html body #showreel .showreel-player-stack,
  html body #showreel .showreel-player,
  html body #showreel .showreel-player.is-aspect-pending {
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body #showreel .hero-intro { animation: bmk-final-mobile-copy .72s cubic-bezier(.22,.7,.22,1) .08s both !important; }
  html body #showreel .hero-kicker,
  html body #showreel .hero-title,
  html body #showreel .hero-role { opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; }
  html body #showreel .showreel-player-stack { animation: bmk-final-mobile-frame .82s cubic-bezier(.22,.7,.22,1) .22s both !important; }
  html body #showreel .showreel-player { min-height: 180px !important; border-color: rgba(180,226,244,.34) !important; box-shadow: 0 20px 58px rgba(0,0,0,.54), 0 0 0 1px rgba(150,220,242,.12) !important; }
  html body #main-nav .logo-sub { display: none !important; }
  html body #main-nav .nav-inner { gap: 6px !important; padding-inline: 10px !important; }
  html body #main-nav .nav-logo { min-width: 0 !important; max-width: calc(100vw - 136px) !important; flex: 1 1 auto !important; }
  html body #main-nav .language-switcher { flex: 0 0 auto !important; max-width: 84px !important; overflow: hidden !important; gap: 2px !important; }
  html body #main-nav .language-switcher a { padding: 5px 6px !important; font-size: .56rem !important; letter-spacing: .02em !important; white-space: nowrap !important; }
}

@keyframes bmk-final-kicker { from { transform: translate3d(0,16px,0); letter-spacing:.5em; filter:blur(6px); } to { transform:none; letter-spacing:.32em; filter:none; } }
@keyframes bmk-final-title { 0% { transform:translate3d(0,30px,0) scale(.95); clip-path:inset(0 0 100% 0); filter:blur(10px); } 58% { clip-path:inset(0); filter:blur(0); } 100% { transform:none; clip-path:inset(0); filter:none; } }
@keyframes bmk-final-copy { from { transform:translate3d(0,14px,0); filter:blur(5px); } to { transform:none; filter:none; } }
@keyframes bmk-final-frame { 0% { transform:translate3d(0,42px,0) scale(.92); filter:brightness(.5) blur(8px); } 58% { transform:translate3d(0,-5px,0) scale(1.01); filter:brightness(1.08) blur(0); } 100% { transform:none; filter:brightness(1) blur(0); } }
@keyframes bmk-final-sheen { 0% { opacity:0; background-position:140% 0; } 18% { opacity:.95; } 65% { opacity:.24; } 100% { opacity:0; background-position:-40% 0; } }
@keyframes bmk-final-mobile-copy { from { transform:translate3d(0,10px,0); } to { transform:none; } }
@keyframes bmk-final-mobile-frame { 0% { transform:translate3d(0,18px,0) scale(.975); filter:brightness(.7); } 70% { transform:translate3d(0,-1px,0) scale(1.002); filter:brightness(1.03); } 100% { transform:none; filter:brightness(1); } }

/* Mobile portrait navigation: keep the brand tagline and expose both
   language choices.  The preceding compact-nav rules were clipping these
   controls to make room for a single active-language pill. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-logo {
    max-width: calc(100vw - 190px) !important;
  }

  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub {
    display: block !important;
    visibility: visible !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #main-nav .language-switcher {
    max-width: none !important;
    overflow: visible !important;
    gap: 2px !important;
  }

  html body #main-nav .language-switcher a {
    flex: 0 0 auto !important;
    padding-inline: 5px !important;
    font-size: .54rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready #showreel .hero-kicker,
  html.chrome-ready #showreel .hero-title,
  html.chrome-ready #showreel .hero-role,
  html.chrome-ready #showreel .hero-intro,
  html.chrome-ready #showreel .showreel-player-stack { opacity:1 !important; animation:none !important; transform:none !important; filter:none !important; clip-path:none !important; }
  html.chrome-ready #showreel .showreel-player::after { content:none !important; }
}

/* FINAL SHOWREEL DISPLAY FIX — text, sound control, aspect ratio, hover. */
#showreel .hero-intro,
#showreel .hero-kicker,
#showreel .hero-title,
#showreel .hero-role,
#showreel .hero-actions,
#showreel .showreel-player-stack,
#showreel .showreel-player,
#showreel .showreel-sound-toggle {
  visibility: visible !important;
  opacity: 1 !important;
}

html.chrome-ready body #showreel .hero-intro {
  animation: bmk-hero-visible-zoom .9s cubic-bezier(.16,1,.3,1) .06s both !important;
}

html.chrome-ready body #showreel .showreel-sound-toggle {
  display: inline-flex !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#showreel .showreel-player {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  transition: none !important;
}

#showreel .showreel-player iframe,
#showreel .showreel-player video {
  transform: none !important;
  filter: none !important;
  object-fit: contain !important;
  transition: none !important;
}

#showreel .showreel-player-stack:hover .showreel-player,
#showreel .showreel-player-stack:focus-within .showreel-player,
#showreel .showreel-player-stack:active .showreel-player {
  transform: none !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.64) !important;
}

@keyframes bmk-hero-visible-zoom {
  from { transform: scale(.94); filter: blur(5px); }
  70% { transform: scale(1.012); filter: blur(0); }
  to { transform: scale(1); filter: none; }
}

/* Mobile final override: the grouped intro must never inherit the legacy
   opacity-zero animation that caused a blank hero after the first paint. */
@media (max-width: 767px) {
  html.chrome-ready body #showreel,
  html.chrome-ready body #showreel .hero-intro,
  html.chrome-ready body #showreel .showreel-player-stack,
  html.chrome-ready body #showreel .showreel-player {
    visibility: visible !important;
    opacity: 1 !important;
  }

  html.chrome-ready body #showreel .hero-intro {
    animation: bmk-final-mobile-copy .72s cubic-bezier(.22,.7,.22,1) .08s both !important;
  }

  html.chrome-ready body #showreel .hero-kicker,
  html.chrome-ready body #showreel .hero-title,
  html.chrome-ready body #showreel .hero-role {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  html.chrome-ready body #main-nav .logo-sub {
    display: none !important;
    visibility: hidden !important;
  }

  html.chrome-ready body #main-nav .nav-logo {
    max-width: calc(100vw - 136px) !important;
  }
}

/* Desktop copy visibility fix: remove the final legacy group fade that could
   leave the already-rendered title hidden while child animations were live. */
@media (min-width: 1025px) {
  html.chrome-ready body #showreel .hero-intro {
    opacity: 1 !important;
    visibility: visible !important;
    animation: bmk-final-desktop-copy .72s cubic-bezier(.16,1,.3,1) .06s both !important;
  }
}

@keyframes bmk-final-desktop-copy {
  from { transform: translate3d(0, 12px, 0); filter: blur(3px); }
  to { transform: none; filter: none; }
}

/* FINAL HERO STATIC MODE — all platforms. */
#showreel .hero-intro,
#showreel .hero-kicker,
#showreel .hero-title,
#showreel .hero-role,
#showreel .hero-actions,
#showreel .hero-social-links,
#showreel .showreel-player-stack,
#showreel .showreel-player,
#showreel .showreel-player iframe,
#showreel .showreel-player video,
#showreel .showreel-sound-toggle {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  will-change: auto !important;
}

#showreel .hero-intro::before,
#showreel .hero-intro::after,
#showreel .showreel-player-stack::before,
#showreel .showreel-player-stack::after,
#showreel .showreel-player::before,
#showreel .showreel-player::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transition: none !important;
}

#showreel .showreel-player {
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.64) !important;
}

/* HERO TEXT ZOOM-IN — replaces static text mode, media remains static. */
html.chrome-ready body #showreel .hero-intro {
  opacity: 0 !important;
  transform-origin: 50% 45% !important;
  animation: bmk-hero-text-zoom .95s cubic-bezier(.16,1,.3,1) .08s both !important;
  will-change: opacity, transform, filter !important;
}

html.chrome-ready body #showreel .hero-kicker,
html.chrome-ready body #showreel .hero-title,
html.chrome-ready body #showreel .hero-role {
  opacity: 0 !important;
  animation: none !important;
}

html.chrome-ready body #showreel .hero-kicker {
  animation: bmk-hero-kicker-zoom .65s cubic-bezier(.16,1,.3,1) .16s both !important;
}

html.chrome-ready body #showreel .hero-title {
  animation: bmk-hero-title-zoom 1.05s cubic-bezier(.16,1,.3,1) .24s both !important;
  will-change: opacity, transform, filter !important;
}

html.chrome-ready body #showreel .hero-role {
  animation: bmk-hero-role-zoom .72s cubic-bezier(.16,1,.3,1) .52s both !important;
}

@keyframes bmk-hero-text-zoom {
  from { opacity: 0; transform: scale(.9); filter: blur(8px); }
  72% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes bmk-hero-kicker-zoom {
  from { opacity: 0; transform: scale(.78); letter-spacing: .48em; filter: blur(5px); }
  to { opacity: 1; transform: scale(1); letter-spacing: inherit; filter: none; }
}

@keyframes bmk-hero-title-zoom {
  from { opacity: 0; transform: scale(.82); filter: blur(10px); }
  64% { opacity: 1; transform: scale(1.025); filter: blur(0); }
  to { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes bmk-hero-role-zoom {
  from { opacity: 0; transform: scale(.88); filter: blur(5px); }
  to { opacity: 1; transform: scale(1); filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready body #showreel .hero-intro,
  html.chrome-ready body #showreel .hero-kicker,
  html.chrome-ready body #showreel .hero-title,
  html.chrome-ready body #showreel .hero-role {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Showreel frame stays completely still on hover. */
#showreel .showreel-player-stack:hover .showreel-player,
#showreel .showreel-player-stack:focus-within .showreel-player,
#showreel .showreel-player-stack:active .showreel-player,
#showreel .showreel-player-stack:hover .showreel-player iframe,
#showreel .showreel-player-stack:hover .showreel-player video,
#showreel .showreel-player-stack:focus-within .showreel-player iframe,
#showreel .showreel-player-stack:focus-within .showreel-player video,
#showreel .showreel-player-stack:active .showreel-player iframe,
#showreel .showreel-player-stack:active .showreel-player video {
  transform: none !important;
  filter: none !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.64) !important;
  transition: none !important;
}

/* Last authority for the requested zoom-in text entrance. */
html.chrome-ready body #showreel .hero-intro {
  opacity: 1 !important;
  visibility: visible !important;
  animation: bmk-visible-text-zoom 1.55s cubic-bezier(.16,1,.3,1) .08s both !important;
  transform-origin: center 42% !important;
}

html.chrome-ready body #showreel .hero-title {
  opacity: 1 !important;
  visibility: visible !important;
  animation: bmk-visible-title-zoom 1.35s cubic-bezier(.16,1,.3,1) .16s both !important;
  transform-origin: center center !important;
}

/* Final mobile portrait nav visibility pass. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo { max-width: calc(100vw - 240px) !important; padding-right: 0 !important; }
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub {
    display: block !important;
    visibility: visible !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body #main-nav .language-switcher {
    max-width: none !important;
    overflow: visible !important;
    gap: 2px !important;
  }
  html body #main-nav .language-switcher a {
    flex: 0 0 auto !important;
    padding-inline: 3px !important;
    font-size: .47rem !important;
  }
  html body #main-nav .language-switcher .language-flag {
    width: 10px !important;
    height: 9px !important;
    flex-basis: 10px !important;
  }
}

/* Mobile portrait refinement: show the complete slogan without ellipsis
   while keeping the language control compact and readable. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo {
    max-width: calc(100vw - 220px) !important;
    overflow: visible !important;
  }
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub {
    font-size: .42rem !important;
    letter-spacing: .045em !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  html body #main-nav .language-switcher a {
    padding-inline: 3px !important;
    font-size: .47rem !important;
  }
  html body #main-nav .language-switcher .language-flag {
    width: 10px !important;
    height: 9px !important;
    flex-basis: 10px !important;
  }
}

/* Desktop hero reveal: final cascade authority. The shell establishes the
   frame first, then the copy, media, and controls settle in quietly. */
@keyframes bmk-desktop-hero-shell-reveal {
  from { opacity: 0; transform: translate3d(0, 12px, 0); clip-path: inset(0 0 2.5% 0 round 14px); }
  to { opacity: 1; transform: none; clip-path: inset(0 round 14px); }
}

@keyframes bmk-desktop-hero-media-reveal {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.992); filter: brightness(.88) saturate(.94); }
  70% { opacity: 1; transform: translate3d(0, 1px, 0) scale(.998); filter: brightness(1) saturate(1); }
  100% { opacity: 1; transform: none; filter: none; }
}

@keyframes bmk-desktop-hero-support-reveal {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.chrome-ready body #showreel .showreel-shell {
    animation: bmk-desktop-hero-shell-reveal .9s cubic-bezier(.22,.74,.25,1) both !important;
    transform-origin: center top;
    will-change: opacity, transform, clip-path;
  }

  html.chrome-ready body #showreel .hero-intro {
    animation: bmk-hero-copy-group-in .78s cubic-bezier(.22,.74,.25,1) .16s both !important;
  }

  html.chrome-ready body #showreel .showreel-player-stack .showreel-player {
    animation: bmk-desktop-hero-media-reveal 1.02s cubic-bezier(.22,.74,.25,1) .38s both !important;
    will-change: opacity, transform, filter;
  }

  html.chrome-ready body #showreel .showreel-sound-toggle {
    animation: bmk-desktop-hero-support-reveal .54s cubic-bezier(.22,.74,.25,1) 1.18s both !important;
    will-change: opacity, transform;
  }

  html.chrome-ready body #showreel .hero-actions,
  html.chrome-ready body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
    animation: bmk-desktop-hero-support-reveal .58s cubic-bezier(.22,.74,.25,1) 1.34s both !important;
    will-change: opacity, transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready body #showreel .showreel-shell,
  html.chrome-ready body #showreel .showreel-player,
  html.chrome-ready body #showreel .showreel-sound-toggle,
  html.chrome-ready body #showreel .hero-actions,
  html.chrome-ready body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* Desktop hero reveal: a restrained editorial sequence that survives the
   legacy final-state rules above. The frame settles first, then the copy and
   controls follow in small, quiet beats. Touch layouts remain unchanged. */
@keyframes bmk-desktop-hero-shell-reveal {
  from { opacity: 0; transform: translate3d(0, 12px, 0); clip-path: inset(0 0 2.5% 0 round 14px); }
  to { opacity: 1; transform: none; clip-path: inset(0 round 14px); }
}

@keyframes bmk-desktop-hero-media-reveal {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.992); filter: brightness(.88) saturate(.94); }
  70% { opacity: 1; transform: translate3d(0, 1px, 0) scale(.998); filter: brightness(1) saturate(1); }
  100% { opacity: 1; transform: none; filter: none; }
}

@keyframes bmk-desktop-hero-support-reveal {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.chrome-ready body #showreel .showreel-shell {
    animation: bmk-desktop-hero-shell-reveal .9s cubic-bezier(.22,.74,.25,1) both !important;
    transform-origin: center top;
    will-change: opacity, transform, clip-path;
  }

  html.chrome-ready body #showreel .hero-intro {
    animation: bmk-hero-copy-group-in .78s cubic-bezier(.22,.74,.25,1) .16s both !important;
  }

  html.chrome-ready body #showreel .showreel-player-stack .showreel-player {
    animation: bmk-desktop-hero-media-reveal 1.02s cubic-bezier(.22,.74,.25,1) .38s both !important;
    will-change: opacity, transform, filter;
  }

  html.chrome-ready body #showreel .showreel-sound-toggle {
    animation: bmk-desktop-hero-support-reveal .54s cubic-bezier(.22,.74,.25,1) 1.18s both !important;
    will-change: opacity, transform;
  }

  html.chrome-ready body #showreel .hero-actions,
  html.chrome-ready body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
    animation: bmk-desktop-hero-support-reveal .58s cubic-bezier(.22,.74,.25,1) 1.34s both !important;
    will-change: opacity, transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.chrome-ready body #showreel .showreel-shell,
  html.chrome-ready body #showreel .showreel-player,
  html.chrome-ready body #showreel .showreel-sound-toggle,
  html.chrome-ready body #showreel .hero-actions,
  html.chrome-ready body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* The scroll cue is static: show it on first paint with no delayed entrance,
   fade, transition, or chevron loop. It may still be hidden intentionally
   after the user starts scrolling via .is-scroll-hidden. */
html.chrome-ready body #showreel .mobile-scroll-hint:not(.is-scroll-hidden),
html.hero-sequence-complete body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

html.chrome-ready body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) i,
html.chrome-ready body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) i::before {
  animation: none !important;
}

html.chrome-ready body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) i {
  transform: none !important;
}

html.chrome-ready body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) i::before {
  transform: rotate(45deg) !important;
}

/* Initial paint guard: do not wait for chrome-ready or the old hero sequence
   gate before showing the static cue. Only the intentional scroll state may
   hide it. */
body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) i,
body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) i::before {
  animation: none !important;
}

body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) i {
  transform: none !important;
}

body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) i::before {
  transform: rotate(45deg) !important;
}

/* Override the older sequence gate as well: a hidden parent makes otherwise
   correctly animated hero copy invisible on the live page. */
html.chrome-ready:not(.hero-sequence-complete) body #showreel .hero-intro {
  opacity: 1 !important;
  visibility: visible !important;
  animation: bmk-visible-text-zoom 1.55s cubic-bezier(.16,1,.3,1) .08s both !important;
  transform-origin: center 42% !important;
}

#showreel .showreel-player,
#showreel .showreel-player iframe,
#showreel .showreel-player video {
  transition: none !important;
}
 transform:none !important; filter:none !important; clip-path:none !important; }
  html.chrome-ready #showreel .showreel-player::after { content:none !important; }
}

/* Last cascade guard for the live hero. */
html.chrome-ready body #showreel .hero-intro,
html.chrome-ready body #showreel .hero-kicker,
html.chrome-ready body #showreel .hero-title,
html.chrome-ready body #showreel .hero-role,
html.chrome-ready body #showreel .hero-actions,
html.chrome-ready body #showreel .hero-social-links,
html.chrome-ready body #showreel .showreel-player-stack,
html.chrome-ready body #showreel .showreel-sound-toggle {
  opacity: 1 !important;
  visibility: visible !important;
}

html.chrome-ready body #showreel .showreel-sound-toggle {
  display: inline-flex !important;
  animation: none !important;
  transform: none !important;
}

html.chrome-ready body #showreel .showreel-player {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: none !important;
}

html.chrome-ready body #showreel .showreel-player,
html.chrome-ready body #showreel .showreel-player iframe,
html.chrome-ready body #showreel .showreel-player video,
html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

html.chrome-ready body #showreel .showreel-player::before,
html.chrome-ready body #showreel .showreel-player::after,
html.chrome-ready body #showreel .showreel-player-stack::before,
html.chrome-ready body #showreel .showreel-player-stack::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Runtime-safe final state: keep the copy visible, use one group zoom only,
   and keep sound/media controls out of the old staged opacity sequence. */
html body #showreel .hero-intro {
  visibility: visible !important;
  opacity: 1 !important;
  animation: bmk-visible-text-zoom 1.55s cubic-bezier(.16,1,.3,1) .08s both !important;
  transform-origin: center 42% !important;
}

html body #showreel .hero-kicker,
html body #showreel .hero-title,
html body #showreel .hero-role,
html body #showreel .hero-actions,
html body #showreel .showreel-sound-toggle {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

html body #showreel .hero-title {
  animation: bmk-visible-title-zoom 1.35s cubic-bezier(.16,1,.3,1) .16s both !important;
  transform-origin: center center !important;
}

html body #showreel .showreel-sound-toggle {
  display: inline-flex !important;
  pointer-events: auto !important;
}

html body #showreel .showreel-player {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: none !important;
}

html body #showreel .showreel-player,
html body #showreel .showreel-player iframe,
html body #showreel .showreel-player video,
html body #showreel .showreel-player-stack:hover .showreel-player,
html body #showreel .showreel-player-stack:focus-within .showreel-player,
html body #showreel .showreel-player-stack:active .showreel-player {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

html body #showreel .showreel-player::before,
html body #showreel .showreel-player::after,
html body #showreel .showreel-player-stack::before,
html body #showreel .showreel-player-stack::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Visible text-only zoom pass. Opacity stays at 1 so the copy can never
   disappear while the scale/blur entrance is playing. */
html.chrome-ready body #showreel .hero-intro {
  opacity: 1 !important;
  visibility: visible !important;
  animation: bmk-visible-text-zoom 1.55s cubic-bezier(.16,1,.3,1) .08s both !important;
  transform-origin: center 42% !important;
}

html.chrome-ready body #showreel .hero-kicker,
html.chrome-ready body #showreel .hero-title,
html.chrome-ready body #showreel .hero-role {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

html.chrome-ready body #showreel .hero-title {
  animation: bmk-visible-title-zoom 1.35s cubic-bezier(.16,1,.3,1) .16s both !important;
  transform-origin: center center !important;
}

@keyframes bmk-visible-text-zoom {
  from { transform: scale(.72); filter: blur(12px); }
  58% { transform: scale(1.025); filter: blur(0); }
  to { transform: scale(1); filter: none; }
}

@keyframes bmk-visible-title-zoom {
  from { transform: scale(.68); filter: blur(14px); letter-spacing: .14em; }
  62% { transform: scale(1.035); filter: blur(0); }
  to { transform: scale(1); filter: none; letter-spacing: inherit; }
}

/* Final runtime correction for the live desktop/mobile page. */
html.chrome-ready body #showreel .hero-intro {
  opacity: 1 !important;
  visibility: visible !important;
  animation: bmk-visible-text-zoom 1.55s cubic-bezier(.16,1,.3,1) .08s both !important;
  transform-origin: center 42% !important;
}

html.chrome-ready body #showreel .hero-kicker,
html.chrome-ready body #showreel .hero-title,
html.chrome-ready body #showreel .hero-role {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

html.chrome-ready body #showreel .showreel-sound-toggle {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}

html.chrome-ready body #showreel .showreel-player {
  aspect-ratio: 3840 / 1772 !important;
  height: auto !important;
  max-height: none !important;
}

html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player {
  transform: none !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.64) !important;
  transition: none !important;
}

/* Absolutely disable hover scaling on the media layer itself. */
html body #showreel .showreel-player-stack:hover .showreel-player,
html body #showreel .showreel-player-stack:focus-within .showreel-player,
html body #showreel .showreel-player-stack:active .showreel-player,
html body #showreel .showreel-player-stack:hover .showreel-player iframe,
html body #showreel .showreel-player-stack:hover .showreel-player video,
html body #showreel .showreel-player-stack:focus-within .showreel-player iframe,
html body #showreel .showreel-player-stack:focus-within .showreel-player video,
html body #showreel .showreel-player-stack:active .showreel-player iframe,
html body #showreel .showreel-player-stack:active .showreel-player video {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Highest-specificity kill switch: the media itself must never scale on
   hover, focus, or touch, including embedded iframe content. */
html.chrome-ready body#showreel .showreel-player-stack:hover .showreel-player,
html.chrome-ready body#showreel .showreel-player-stack:focus-within .showreel-player,
html.chrome-ready body#showreel .showreel-player-stack:active .showreel-player,
html.chrome-ready body#showreel .showreel-player-stack:hover .showreel-player iframe,
html.chrome-ready body#showreel .showreel-player-stack:hover .showreel-player video,
html.chrome-ready body#showreel .showreel-player-stack:focus-within .showreel-player iframe,
html.chrome-ready body#showreel .showreel-player-stack:focus-within .showreel-player video,
html.chrome-ready body#showreel .showreel-player-stack:active .showreel-player iframe,
html.chrome-ready body#showreel .showreel-player-stack:active .showreel-player video {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* The #showreel node is the section, not body. Keep this selector aligned
   with the live DOM so the legacy iframe hover rule cannot win. */
html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player iframe,
html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player video,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player iframe,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player video,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player iframe,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player video {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Hover must be visually identical to the resting frame: no border glow,
   border-color shift, shadow bloom, outline, or pseudo-element reveal. */
html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player {
  border-color: rgba(190,232,247,.32) !important;
  box-shadow: 0 35px 110px rgba(0,0,0,.64), 0 0 0 1px rgba(151,220,242,.18), 0 0 46px rgba(90,179,218,.15) !important;
  outline: none !important;
}

html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player::before,
html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player::after,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player::before,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player::after,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player::before,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player,
  html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player,
  html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player {
    border-color: rgba(180,226,244,.34) !important;
    box-shadow: 0 20px 58px rgba(0,0,0,.54), 0 0 0 1px rgba(150,220,242,.12) !important;
  }
}

  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Hover must be visually identical to the resting frame: no border glow,
   border-color shift, shadow bloom, outline, or pseudo-element reveal. */
html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player {
  border-color: rgba(190,232,247,.32) !important;
  box-shadow: 0 35px 110px rgba(0,0,0,.64), 0 0 0 1px rgba(151,220,242,.18), 0 0 46px rgba(90,179,218,.15) !important;
  outline: none !important;
}

html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player::before,
html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player::after,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player::before,
html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player::after,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player::before,
html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  html.chrome-ready body #showreel .showreel-player-stack:hover .showreel-player,
  html.chrome-ready body #showreel .showreel-player-stack:focus-within .showreel-player,
  html.chrome-ready body #showreel .showreel-player-stack:active .showreel-player {
    border-color: rgba(180,226,244,.34) !important;
    box-shadow: 0 20px 58px rgba(0,0,0,.54), 0 0 0 1px rgba(150,220,242,.12) !important;
  }
}

/* HERO REVEAL RESET — this clean sequence replaces all earlier hero motion. */
#showreel .hero-intro,
#showreel .hero-kicker,
#showreel .hero-title,
#showreel .hero-role,
#showreel .hero-actions,
#showreel .hero-social-links,
#showreel .showreel-player-stack,
#showreel .showreel-player,
#showreel .showreel-player iframe,
#showreel .showreel-player video,
#showreel .showreel-sound-toggle,
#showreel .mobile-scroll-hint {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  will-change: auto !important;
}

#showreel .hero-intro::before,
#showreel .hero-intro::after,
#showreel .showreel-player-stack::before,
#showreel .showreel-player-stack::after,
#showreel .showreel-player::before,
#showreel .showreel-player::after {
  content: none !important;
  animation: none !important;
  transition: none !important;
}

@keyframes bmk-hero-clean-frame-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.99); clip-path: inset(4% 1.2% 0 1.2% round 12px); }
  to { opacity: 1; transform: none; clip-path: inset(0 round 8px); }
}

@keyframes bmk-hero-clean-copy-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes bmk-hero-clean-support-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.chrome-ready body #showreel .hero-intro {
    animation: bmk-hero-clean-copy-in 1.08s cubic-bezier(.22,.74,.25,1) .12s both !important;
    will-change: opacity, transform, filter;
  }

  html.chrome-ready body #showreel .showreel-player-stack .showreel-player {
    animation: bmk-hero-clean-frame-in 1.42s cubic-bezier(.22,.74,.25,1) .40s both !important;
    will-change: opacity, transform, clip-path;
  }

  html.chrome-ready body #showreel .showreel-sound-toggle,
  html.chrome-ready body #showreel .hero-actions,
  html.chrome-ready body #showreel .mobile-scroll-hint:not(.is-scroll-hidden) {
    animation: bmk-hero-clean-support-in .82s cubic-bezier(.22,.74,.25,1) 1.66s both !important;
    will-change: opacity, transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  #showreel .hero-intro,
  #showreel .hero-kicker,
  #showreel .hero-title,
  #showreel .hero-role,
  #showreel .hero-actions,
  #showreel .hero-social-links,
  #showreel .showreel-player-stack,
  #showreel .showreel-player,
  #showreel .showreel-player iframe,
  #showreel .showreel-player video,
  #showreel .showreel-sound-toggle,
  #showreel .mobile-scroll-hint {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* Final mobile portrait nav visibility pass. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo { max-width: calc(100vw - 240px) !important; padding-right: 0 !important; }
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub {
    display: block !important;
    visibility: visible !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body #main-nav .logo-name,
  html.chrome-ready body #main-nav .logo-name { letter-spacing: .12em !important; }
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub { font-size: .56rem !important; letter-spacing: .045em !important; line-height: 1.05 !important; overflow: visible !important; text-overflow: clip !important; }
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo { row-gap: 0 !important; grid-template-columns: clamp(32px, 9.5vw, 38px) minmax(0, 1fr) !important; }
  html body #main-nav .logo-img,
  html.chrome-ready body #main-nav .logo-img { width: clamp(32px, 9.5vw, 38px) !important; height: clamp(32px, 9.5vw, 38px) !important; }
  html body #main-nav .language-switcher { display: inline-flex !important; align-items: center !important; max-width: none !important; overflow: visible !important; gap: 2px !important; padding: 3px 6px !important; border: 1px solid rgba(158, 220, 240, .34) !important; border-radius: 999px !important; background: rgba(10, 22, 28, .82) !important; box-shadow: inset 0 1px rgba(255,255,255,.08) !important; }
  html body #main-nav .language-switcher a { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; min-height: 28px !important; padding: 3px !important; gap: 3px !important; border: 1px solid transparent !important; border-radius: 999px !important; font-size: .50rem !important; line-height: 1 !important; }
  html body #main-nav .language-switcher .language-flag { width: 11px !important; height: 10px !important; flex-basis: 11px !important; }
}

/* Mobile portrait brand lockup: center the two-line copy inside the logo's
   vertical measure with an even top, middle, and bottom rhythm. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo {
    align-items: center !important;
    align-content: center !important;
    row-gap: 3px !important;
  }
  html body #main-nav .logo-name,
  html.chrome-ready body #main-nav .logo-name { line-height: 1 !important; }
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub { line-height: 1 !important; }
}

/* Tighten the mobile brand lockup so the slogan sits directly beneath the
   brand name without changing the desktop spacing. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo { row-gap: 0 !important; }
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub { margin-top: -2px !important; }
}

/* Premium mobile portrait menu: a compact glass panel anchored to the
   hamburger instead of the legacy centered overlay. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-toggle,
  html.chrome-ready body #main-nav .nav-toggle {
    z-index: 2310 !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(177, 226, 244, .42) !important;
    background: linear-gradient(145deg, rgba(20, 41, 49, .96), rgba(4, 11, 15, .96)) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.13), 0 0 0 1px rgba(106,176,212,.08) !important;
  }
  html body #main-nav .nav-toggle span,
  html.chrome-ready body #main-nav .nav-toggle span { width: 19px !important; height: 2px !important; }
  html body #main-nav .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  html body #main-nav .nav-toggle.open span:nth-child(2) { opacity: 0 !important; transform: scaleX(.2) !important; }
  html body #main-nav .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  html body #main-nav .nav-links,
  html.chrome-ready body #main-nav .nav-links {
    top: calc(var(--nav-h) + 10px) !important;
    right: 14px !important;
    left: auto !important;
    width: min(86vw, 340px) !important;
    max-height: calc(100dvh - var(--nav-h) - 28px) !important;
    padding: 12px !important;
    gap: 4px !important;
    border: 1px solid rgba(153, 218, 239, .28) !important;
    border-radius: 22px !important;
    background: linear-gradient(150deg, rgba(14, 30, 37, .98), rgba(3, 9, 13, .985)) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.62), inset 0 1px 0 rgba(225,249,255,.10), 0 0 42px rgba(78,170,207,.10) !important;
    transform: translateY(-10px) scale(.98) !important;
    transform-origin: top right !important;
  }
  html body #main-nav .nav-links.open,
  html.chrome-ready body #main-nav .nav-links.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    padding: 12px !important;
  }
  html body #main-nav .nav-links li { border-top: 1px solid rgba(181, 226, 239, .10) !important; }
  html body #main-nav .nav-links li:first-child { border-top: 0 !important; }
  html body #main-nav .nav-links .nav-link,
  html.chrome-ready body #main-nav .nav-links .nav-link {
    position: relative !important;
    min-height: 49px !important;
    padding: 12px 14px 12px 19px !important;
    border-radius: 12px !important;
    color: rgba(235, 248, 252, .86) !important;
    font-size: .74rem !important;
    font-weight: 760 !important;
    letter-spacing: .13em !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  html body #main-nav .nav-links .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(137, 211, 236, .65) !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 0 9px rgba(111, 205, 236, .45) !important;
  }
  html body #main-nav .nav-links .nav-link::after { display: none !important; }
  html body #main-nav .nav-links .nav-link:hover,
  html body #main-nav .nav-links .nav-link:focus-visible,
  html body #main-nav .nav-links .nav-link.active {
    color: #f4fcff !important;
    background: linear-gradient(90deg, rgba(92, 188, 220, .19), rgba(92, 188, 220, .035)) !important;
    box-shadow: inset 3px 0 0 #79c8e4, inset 0 0 0 1px rgba(137, 211, 236, .11) !important;
    outline: none !important;
  }
}

/* Mobile menu matches the desktop navigation surface and underline system;
   only the horizontal flow is changed to a vertical stack. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-links,
  html.chrome-ready body #main-nav .nav-links {
    top: var(--nav-h) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - var(--nav-h)) !important;
    padding: 8px 20px 14px !important;
    gap: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(158,220,240,.14) !important;
    border-bottom: 1px solid rgba(158,220,240,.14) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg,rgba(2,5,7,.70),rgba(2,5,7,.58)) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.20) !important;
    -webkit-backdrop-filter: blur(26px) saturate(120%) brightness(.82) !important;
    backdrop-filter: blur(26px) saturate(120%) brightness(.82) !important;
    transform: translateY(-8px) !important;
  }
  html body #main-nav .nav-links.open,
  html.chrome-ready body #main-nav .nav-links.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    padding: 8px 20px 14px !important;
  }
  html body #main-nav .nav-links li { width: 100% !important; border-top: 1px solid rgba(255,255,255,.07) !important; }
  html body #main-nav .nav-links li:first-child { border-top: 0 !important; }
  html body #main-nav .nav-links .nav-link,
  html.chrome-ready body #main-nav .nav-links .nav-link {
    display: block !important;
    min-height: 0 !important;
    padding: 13px 0 10px !important;
    border-radius: 0 !important;
    color: var(--gray-lt) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  html body #main-nav .nav-links .nav-link::before { display: none !important; }
  html body #main-nav .nav-links .nav-link::after {
    display: block !important;
    bottom: 4px !important;
    left: 0 !important;
    width: 0 !important;
    height: 1px !important;
    background: var(--gold) !important;
  }
  html body #main-nav .nav-links .nav-link:hover,
  html body #main-nav .nav-links .nav-link:focus-visible,
  html body #main-nav .nav-links .nav-link.active { color: var(--white-p) !important; background: transparent !important; box-shadow: none !important; }
  html body #main-nav .nav-links .nav-link:hover::after,
  html body #main-nav .nav-links .nav-link:focus-visible::after,
  html body #main-nav .nav-links .nav-link.active::after { width: 100% !important; }
}

/* Final mobile menu polish: centered labels, slightly denser glass, and
   short centered underline accents instead of full-width separators. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-links,
  html.chrome-ready body #main-nav .nav-links { background: linear-gradient(180deg, rgba(2,5,7,.84), rgba(2,5,7,.74)) !important; }
  html body #main-nav .nav-links li { border-top: 0 !important; }
  html body #main-nav .nav-links .nav-link,
  html.chrome-ready body #main-nav .nav-links .nav-link { padding: 13px 0 11px !important; text-align: center !important; }
  html body #main-nav .nav-links .nav-link::after { left: 50% !important; width: 0 !important; transform: translateX(-50%) !important; background: var(--gold) !important; }
  html body #main-nav .nav-links .nav-link:hover::after,
  html body #main-nav .nav-links .nav-link:focus-visible::after,
  html body #main-nav .nav-links .nav-link.active::after { width: 68px !important; }
}

/* Mobile portrait final fit: attach the menu directly to the header and
   reduce transparency for clearer contrast over the hero. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-links,
  html.chrome-ready body #main-nav .nav-links { top: calc(var(--nav-h) - 1px) !important; background: linear-gradient(180deg,rgba(2,5,7,.96),rgba(2,5,7,.92)) !important; }
  html body #main-nav .nav-links.open,
  html.chrome-ready body #main-nav .nav-links.open { top: calc(var(--nav-h) - 1px) !important; }
}

/* One final mobile portrait brand geometry: the first paint and settled
   layout use the same fixed logo size and tight text rhythm. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
  }
  html body #main-nav .logo-img,
  html.chrome-ready body #main-nav .logo-img { width: 34px !important; height: 34px !important; }
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub {
    margin-top: -2px !important;
    font-size: .52rem !important;
    line-height: 1 !important;
  }
}

/* Keep the runtime typography refresh from resizing the mobile brand name
   after the first paint. Desktop typography remains unchanged. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .logo-name,
  html.chrome-ready body #main-nav .logo-name {
    font-size: 13.2px !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
  }
}

/* Mobile first-paint lock: keep the slogan at the exact settled size even
   while settings, root typography variables, or web fonts finish loading.
   This portrait-only rule deliberately leaves desktop typography untouched. */
@media (max-width: 767px) and (orientation: portrait) {
  /* The inline mobile lockup is final from the first paint; do not hide it
     while fonts or site settings settle, which creates a second paint. */
  html body #main-nav .nav-logo { overflow: visible !important; }
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub {
    display: block !important;
    visibility: visible !important;
    font-size: 8.32px !important;
    line-height: 1.35 !important;
    letter-spacing: .045em !important;
    margin-top: -2px !important;
    padding-bottom: 1px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* Mobile portrait uses the desktop sound-control geometry for both languages.
   Only its stack positioning is mobile-specific. */
@media (max-width: 767px) and (orientation: portrait) {
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle,
  html body #showreel .showreel-player-stack .showreel-sound-toggle {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-self: center !important;
    place-self: center !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    gap: 9px !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-icon,
  html body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-icon {
    font-size: .9rem !important;
  }
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track,
  html body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track {
    width: 31px !important;
    height: 17px !important;
    padding: 2px !important;
  }
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track span {
    width: 13px !important;
    height: 13px !important;
  }
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span {
    transform: translateX(14px) !important;
  }
}

/* Final mobile portrait language control fit. Keep the desktop pill language
   treatment, but bring the selected option close to the outer rail so the
   blue inset border reads as one compact control. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #main-nav .language-switcher,
  html.chrome-ready body #main-nav .language-switcher {
    padding: 2px 4px !important;
    gap: 2px !important;
  }

  html body #main-nav .language-switcher a,
  html.chrome-ready body #main-nav .language-switcher a {
    box-sizing: border-box !important;
    min-height: 28px !important;
    padding: 2px 3px !important;
    gap: 2px !important;
  }
}

/* Match the desktop control's compact outer width on mobile. The explicit
   border-box prevents mobile padding from making the visible box wider. */
@media (max-width: 767px) and (orientation: portrait) {
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle,
  html body #showreel .showreel-player-stack .showreel-sound-toggle {
    box-sizing: border-box !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }
}

/* Final mobile hero-social authority: five contact icons stay on one row. */
@media (max-width: 1024px) {
  html body #showreel .showreel-shell > #hero-social-links:not([hidden]),
  html.chrome-ready body #showreel .showreel-shell > #hero-social-links:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(5, 34px) !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px 7px !important;
    flex-direction: initial !important;
    width: 100% !important;
  }

  html body #showreel .showreel-shell > #hero-social-links > #hero-mobile-actions,
  html.chrome-ready body #showreel .showreel-shell > #hero-social-links > #hero-mobile-actions {
    display: grid !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* Mobile portrait hero actions: keep all three links in one quiet, balanced
   row that fills the copy column without making the controls too tall. */
@media (max-width: 767px) and (orientation: portrait) {
  html body #showreel .hero-actions,
  html.chrome-ready body #showreel .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html body #showreel .hero-actions .hero-btn,
  html.chrome-ready body #showreel .hero-actions .hero-btn,
  html body #showreel .hero-actions #hero-secondary-btn,
  html.chrome-ready body #showreel .hero-actions #hero-secondary-btn {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 6px 4px !important;
    gap: 5px !important;
    flex: none !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border-color: rgba(157,220,240,.66) !important;
    color: rgba(248,253,255,.98) !important;
    background: linear-gradient(180deg, rgba(35,76,90,.98), rgba(12,34,43,.98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px rgba(0,0,0,.3), 0 0 14px rgba(106,176,212,.12) !important;
    font-size: clamp(.48rem, 2.35vw, .60rem) !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body #showreel .hero-actions .hero-btn i,
  html.chrome-ready body #showreel .hero-actions .hero-btn i {
    flex: 0 0 auto !important;
    font-size: .82em !important;
  }
}

/* Mobile portrait hero social row: reuse the contact icon language beneath
   the three primary actions, with a lighter and tighter footprint. */
#showreel .hero-social-links[hidden] { display: none !important; }

@media (max-width: 767px) and (orientation: portrait) {
  html body #showreel .hero-social-links:not([hidden]),
  html.chrome-ready body #showreel .hero-social-links:not([hidden]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 1px 0 0 !important;
  }

  html body #showreel .hero-social-links .hero-social-btn,
  html.chrome-ready body #showreel .hero-social-links .hero-social-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 50% !important;
    color: rgba(232,232,232,.72) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), rgba(8,8,8,.48) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 22px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }

  html body #showreel .hero-social-links .hero-social-btn i,
  html.chrome-ready body #showreel .hero-social-links .hero-social-btn i {
    font-size: .86rem !important;
    line-height: 1 !important;
  }

  html body #showreel .hero-social-links .hero-social-btn:active,
  html body #showreel .hero-social-links .hero-social-btn:focus-visible {
    border-color: rgba(106,176,212,.72) !important;
    color: var(--gold) !important;
    outline: none !important;
  }
}

/* Desktop hero stays focused on the showreel frame; navigation controls and
   social links belong to the mobile-only lower rail. */
@media (min-width: 1025px) {
  #showreel .hero-actions,
  #showreel .hero-social-links {
    display: none !important;
  }
}

/* Devices below the desktop canvas must always retain the lower hero rail.
   This also covers mobile Safari states that report a wider layout viewport
   while the page is visibly rendered as a phone portrait. */
@media (max-width: 1024px) {
  #showreel .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #showreel .hero-social-links:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Mobile rail fallback: the visible social container owns the buttons so a
   legacy hero-actions rule cannot remove the mobile navigation controls. */
#showreel #hero-mobile-actions { display: none !important; }

@media (max-width: 1024px) {
  #showreel #hero-actions { display: none !important; }
  #showreel .hero-social-links:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(34px, 34px)) !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px 7px !important;
    width: 100% !important;
  }

  #showreel #hero-mobile-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 42px !important;
  }

  #showreel #hero-mobile-actions .hero-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 42px !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 6px 4px !important;
    border: 1px solid rgba(157,220,240,.66) !important;
    border-radius: 999px !important;
    color: rgba(248,253,255,.98) !important;
    background: linear-gradient(180deg, rgba(18,18,18,.98), rgba(0,0,0,.98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px rgba(0,0,0,.3) !important;
    font-size: clamp(.48rem, 2.35vw, .60rem) !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #showreel #hero-mobile-actions .hero-btn i { font-size: .82em !important; }
}

@media (min-width: 1025px) {
  #showreel #hero-mobile-actions { display: none !important; }
}

/* Keep the mobile action rail full-width while the contact icons sit in one
   compact horizontal row beneath it. */
@media (max-width: 1024px) {
  #showreel .hero-social-links:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 34px) !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 7px !important;
    row-gap: 11px !important;
  }

  #showreel #hero-mobile-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* Desktop footer finish: close the trailing document line boxes so the page
   ends on the footer, while keeping the mobile footer geometry untouched. */
@media (min-width: 1025px) {
  html,
  body {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body > #main-footer:last-of-type {
    margin-bottom: -4lh !important;
    background: linear-gradient(180deg, rgba(7, 7, 7, 0.58), rgba(3, 3, 3, 0.78));
    background-color: rgba(5, 5, 5, 0.38);
  }
}

/* Final mobile-portrait hero scale. Keep the desktop hierarchy and sound
   control styling intact; portrait only receives a proportional reduction. */
#showreel .showreel-player-stack { margin-top: 20px !important; }
@media (min-width: 768px) {
  #showreel .hero-kicker { margin-bottom: 28px !important; }
  #showreel .hero-title { margin-bottom: 24px !important; }
}
@media (max-width: 767px) and (orientation: portrait) {
  html.lang-ko body #showreel .hero-kicker,
  html:not(.lang-ko) body #showreel .hero-kicker {
    font-size: clamp(.58rem, 2.4vw, .70rem) !important;
    letter-spacing: .32em !important;
    line-height: 1.2 !important;
    margin-bottom: 18px !important;
  }
  html.lang-ko body #showreel .hero-title,
  html:not(.lang-ko) body #showreel .hero-title {
    font-size: clamp(1.55rem, 8.1vw, 2.55rem) !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;
    display: block !important;
    overflow: visible !important;
    margin-inline: auto !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
  html.lang-ko body #showreel .hero-role,
  html:not(.lang-ko) body #showreel .hero-role {
    font-size: clamp(.50rem, 2.1vw, .62rem) !important;
    line-height: 1.35 !important;
    letter-spacing: .07em !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;
    display: block !important;
    overflow: visible !important;
    margin-inline: auto !important;
    text-align: center !important;
    margin-top: 18px !important;
  }

  html.lang-ko body #showreel .showreel-player-stack .showreel-sound-toggle,
  html:not(.lang-ko) body #showreel .showreel-player-stack .showreel-sound-toggle {
    box-sizing: border-box !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    font-size: .50rem !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
  }
  html.lang-ko body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-icon,
  html:not(.lang-ko) body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-icon { font-size: .74rem !important; }
  html.lang-ko body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track,
  html:not(.lang-ko) body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track {
    width: 26px !important;
    height: 14px !important;
    padding: 2px !important;
  }
  html.lang-ko body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track span,
  html:not(.lang-ko) body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track span {
    width: 10px !important;
    height: 10px !important;
  }
  html body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span { transform: translateX(12px) !important; }
}

/* Maximize the portrait showreel frame inside the shell without changing
   the media ratio or allowing the frame itself to crop. */
@media (max-width: 767px) and (orientation: portrait) {
  html.lang-ko body #showreel .showreel-player-stack .showreel-player,
  html:not(.lang-ko) body #showreel .showreel-player-stack .showreel-player {
    box-sizing: border-box !important;
    width: calc(100% + 20px) !important;
    max-width: none !important;
    margin-inline: -10px !important;
    aspect-ratio: 3840 / 1772 !important;
    height: auto !important;
    overflow: hidden !important;
  }
}
/* Final sound-toggle alignment authority: keep the label at the left edge,
   the switch at the right edge, and let the volume icon sit between them. */
#showreel .showreel-player-stack .showreel-sound-toggle {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: initial !important;
  column-gap: 6px !important;
  padding-right: 4px !important;
}
#showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-label { justify-self: start !important; }
#showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-icon { justify-self: start !important; }
#showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track { justify-self: end !important; }
#showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span {
  transform: translateX(15px) !important;
}
@media (max-width: 767px) and (orientation: portrait) {
  html body #showreel .showreel-player-stack .showreel-sound-toggle,
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle {
    left: auto !important;
    margin-inline: auto !important;
    transform: none !important;
  }
}

/* legacy malformed tail removed */
/* track {
    width: 20px !important;
    height: 11px !important;
  }
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track span {
    width: 7px !important;
    height: 7px !important;
  }
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span {
    transform: translateX(9px) !important;
  }
*/

/* oggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track span {
    width: 7px !important;
    height: 7px !important;
  }
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span {
    transform: translateX(9px) !important;
  }
*/
   max-width: 132px !important;
  }
}

/* Final sound-toggle alignment authority. */
#showreel .showreel-player-stack .showreel-sound-toggle {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: initial !important;
  column-gap: 6px !important;
}
#showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-label { justify-self: start !important; }
#showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-icon { justify-self: start !important; }
#showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track { justify-self: end !important; }
@media (max-width: 767px) and (orientation: portrait) {
  html body #showreel .showreel-player-stack .showreel-sound-toggle,
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle {
    left: auto !important;
    margin-inline: auto !important;
    transform: none !important;
  }
}
/* oggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track span {
    width: 7px !important;
    height: 7px !important;
  }
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span {
    transform: translateX(9px) !important;
  }
*/

/* Match the desktop control's compact outer width on mobile. The explicit
   border-box prevents mobile padding from making the visible box wider. */
@media (max-width: 767px) and (orientation: portrait) {
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle,
  html body #showreel .showreel-player-stack .showreel-sound-toggle {
    box-sizing: border-box !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }
}

/* Final mobile hero-social authority: five contact icons stay on one row. */
@media (max-width: 1024px) {
  html body #showreel .showreel-shell > #hero-social-links:not([hidden]),
  html.chrome-ready body #showreel .showreel-shell > #hero-social-links:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(5, 34px) !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px 7px !important;
    flex-direction: initial !important;
    width: 100% !important;
  }

  html body #showreel .showreel-shell > #hero-social-links > #hero-mobile-actions,
  html.chrome-ready body #showreel .showreel-shell > #hero-social-links > #hero-mobile-actions {
    display: grid !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}
yer-stack .showreel-sound-toggle .sound-toggle-track span {
    width: 7px !important;
    height: 7px !important;
  }
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span {
    transform: translateX(9px) !important;
  }
*/
   max-width: 132px !important;
  }
}
/* oggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle .sound-toggle-track span {
    width: 7px !important;
    height: 7px !important;
  }
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span,
  html body #showreel .showreel-player-stack .showreel-sound-toggle.is-sound-enabled .sound-toggle-track span {
    transform: translateX(9px) !important;
  }
*/

/* Match the desktop control's compact outer width on mobile. The explicit
   border-box prevents mobile padding from making the visible box wider. */
@media (max-width: 767px) and (orientation: portrait) {
  html.chrome-ready body #showreel .showreel-player-stack .showreel-sound-toggle,
  html body #showreel .showreel-player-stack .showreel-sound-toggle {
    box-sizing: border-box !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }
}

}

/* Final compact-header authority. Its grid rail gives each interactive item
   a dedicated column, so no later legacy absolute-position rule can overlap
   the slogan, language selector, or hamburger button. */
@container bokah-nav (max-width: 1319px) {
  #main-nav .nav-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content max-content !important;
    grid-template-areas: "brand language menu" !important;
    align-items: center !important;
    column-gap: clamp(7px, 1.4vw, 14px) !important;
    min-height: 60px !important;
  }
  #main-nav .nav-logo {
    grid-area: brand !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
  }
  #main-nav .language-switcher {
    grid-area: language !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
  #main-nav .nav-toggle {
    grid-area: menu !important;
    position: static !important;
    display: flex !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 420px) and (orientation: portrait) {
  #main-nav .language-switcher a > span { display: none !important; }
  #main-nav .language-switcher { gap: 3px !important; padding-inline: 5px !important; }
  #main-nav .language-switcher .language-divider { font-size: .55rem !important; }
}

@media (max-width: 1319px) {
  #main-nav .nav-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content max-content !important;
    grid-template-areas: "brand language menu" !important;
    align-items: center !important;
    column-gap: clamp(7px, 1.4vw, 14px) !important;
    min-height: 60px !important;
  }
  #main-nav .nav-logo { grid-area: brand !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding-right: 0 !important; }
  #main-nav .logo-sub,
  html body #main-nav .logo-sub,
  html.chrome-ready body #main-nav .logo-sub { display: block !important; visibility: visible !important; }
  #main-nav .language-switcher { grid-area: language !important; position: static !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; overflow: visible !important; }
  #main-nav .nav-toggle { grid-area: menu !important; position: static !important; display: flex !important; margin: 0 !important; transform: none !important; }
}

@media (max-width: 359px) and (orientation: portrait) {
  #main-nav .nav-inner { grid-template-columns: minmax(0, 1fr) max-content !important; grid-template-areas: "brand brand" "language menu" !important; row-gap: 5px !important; min-height: 94px !important; padding-block: 7px !important; }
  #main-nav .nav-logo,
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo { width: 100% !important; max-width: none !important; }
  #main-nav .language-switcher { justify-self: end !important; }
  #main-nav .nav-toggle { justify-self: end !important; }
}

/* Desktop compact range: retain the hamburger menu, but anchor both controls
   to the same right-hand rail. This supersedes the legacy centered-toggle
   rules that split the language pill and menu button across the header. */
@media (min-width: 701px) and (max-width: 1319px) {
  html body #main-nav .nav-inner,
  html.chrome-ready body #main-nav .nav-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content max-content !important;
    grid-template-areas: "brand language menu" !important;
    align-items: center !important;
    column-gap: clamp(10px, 1.25vw, 16px) !important;
    min-height: 64px !important;
  }
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo {
    grid-area: brand !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
  }
  html body #main-nav .language-switcher,
  html.chrome-ready body #main-nav .language-switcher {
    grid-area: language !important;
    position: static !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
  html body #main-nav .language-switcher a,
  html.chrome-ready body #main-nav .language-switcher a {
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html body #main-nav .nav-toggle,
  html.chrome-ready body #main-nav .nav-toggle {
    grid-area: menu !important;
    position: static !important;
    display: flex !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Some desktop browsers keep a content frame below the full-menu threshold
   even when their viewport is wider than 1319px. Preserve the same rail in
   that narrow desktop band instead of centering the hamburger independently. */
@media (min-width: 1320px) and (max-width: 1599px) {
  html body #main-nav .nav-inner,
  html.chrome-ready body #main-nav .nav-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content max-content !important;
    grid-template-areas: "brand language menu" !important;
    align-items: center !important;
    column-gap: clamp(10px, 1.25vw, 16px) !important;
  }
  html body #main-nav .nav-logo,
  html.chrome-ready body #main-nav .nav-logo { grid-area: brand !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding-right: 0 !important; }
  html body #main-nav .language-switcher,
  html.chrome-ready body #main-nav .language-switcher { grid-area: language !important; position: static !important; width: max-content !important; max-width: none !important; margin: 0 !important; overflow: visible !important; transform: none !important; }
  html body #main-nav .language-switcher a,
  html.chrome-ready body #main-nav .language-switcher a { min-width: max-content !important; overflow: visible !important; text-overflow: clip !important; }
  html body #main-nav .nav-toggle,
  html.chrome-ready body #main-nav .nav-toggle { grid-area: menu !important; position: static !important; display: flex !important; margin: 0 !important; transform: none !important; }
}