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

/* Keep the menu's own state independent from the async content gate. */
html:not(.nav-ready) #main-nav #nav-links {
  visibility: hidden !important;
  pointer-events: none;
}

html:not(.language-ready) #main-nav #nav-links .nav-link {
  visibility: hidden !important;
}

/* Navigation: quiet, layered and slightly brighter at the active edge. */
#main-nav {
  background: linear-gradient(180deg, rgba(5, 7, 8, .88), rgba(5, 5, 5, .72));
  border-bottom-color: rgba(222, 239, 246, .12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

#main-nav.scrolled {
  background: rgba(5, 7, 8, .84);
  border-bottom-color: rgba(158, 220, 240, .18);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .28);
}

.nav-logo { transition: opacity .4s var(--finish-ease), transform .4s var(--finish-ease); }
.nav-logo:hover { opacity: .9; transform: translateX(2px); }
.logo-name { letter-spacing: .22em; }
.logo-sub { color: var(--finish-blue); }

.nav-link {
  color: rgba(232, 240, 243, .62);
  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); }

/* 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: .9rem !important;
    letter-spacing: .14em !important;
  }

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

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

  #main-nav .nav-link {
    font-size: .67rem !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, .section-hint { 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); }
.hero-summary { color: rgba(226, 237, 241, .72); }

.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,
  #behind-scene.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(48px, 4vw, 64px) !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,
  #behind-scene::before {
    inset: 0 !important;
    border-radius: 14px !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;
}

.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,
html.lang-ko .about-title,
html.lang-ko .contact-title,
html.lang-ko .form-title {
  letter-spacing: -.035em;
  word-break: keep-all;
}

html.lang-ko .hero-summary,
html.lang-ko .about-bio-block,
html.lang-ko .about-story,
html.lang-ko .contact-tagline,
html.lang-ko .contact-intro,
html.lang-ko .form-intro,
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 .hero-summary { max-width: 34em; }
  html.lang-ko .about-bio-block,
  html.lang-ko .about-story,
  html.lang-ko .contact-tagline { max-width: 48em; }
}

@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 .hero-summary,
  html.lang-ko .about-bio-block,
  html.lang-ko .about-story,
  html.lang-ko .contact-tagline { 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; }
  html.lang-ko .hero-summary { line-height: 1.65; }
}

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

.hero-btn::before, .cat-tab::before, .contact-btn::before, .ai-card-play::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,
.ai-card-play: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-primary { background: linear-gradient(135deg, #b3e7f5, #79bdd9); border-color: #b3e7f5; }
.hero-btn-primary:hover { background: linear-gradient(135deg, #c2edf8, #8bcbe4); color: #030607; }
.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, .ai-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, .ai-card:hover,
.video-card:focus-within, .photo-card:focus-within, .ai-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, .ai-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, .ai-card:hover 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); }

.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, .ai-card,
  .video-card-thumb, .photo-card-img, .ai-card img { transition: none !important; }
  .hero-btn::before, .cat-tab::before, .contact-btn::before, .ai-card-play::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: 68px !important; min-height: 68px !important; }
  #main-nav .nav-inner { height: 68px !important; min-height: 68px !important; }
  #main-nav .nav-logo { max-width: 57vw !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 { transform: scale(.9); transform-origin: right center; }
  #main-nav .nav-toggle { 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: rgba(24,54,66,.78) !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, #behind-scene.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, .ai-card { border-radius: 13px !important; box-shadow: 0 12px 28px rgba(0,0,0,.28) !important; }
  .video-card:hover, .photo-card:hover, .ai-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; }
}

@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 (prefers-reduced-motion: reduce) {
  #showreel .mobile-scroll-hint i { animation: none !important; }
}