/* Premium surface pass: visual depth and motion without changing layout geometry. */
:root {
 --premium-blue:#88d5f5;
 --premium-blue-soft:#88d5f51c;
 --premium-line:#ffffff19;
 --premium-ease:cubic-bezier(.22,1,.36,1);
}

.glass {
 background:
  radial-gradient(110% 80% at 8% 0%,#ffffff09 0%,transparent 38%),
  radial-gradient(70% 65% at 100% 100%,#88d5f508 0%,transparent 46%),
  linear-gradient(145deg,#101214b3 0%,#050606de 48%,#020303eb 100%);
 border-color:#ffffff1a;
 box-shadow:inset 0 1px 0 #ffffff0a,inset 0 -1px 0 #0009,0 24px 80px #00000038;
}

.hero,.about-section,.work-section,.contact-hub {
 transition:border-color .35s ease,box-shadow .35s ease;
}

.eyebrow {
 color:#86d9fb;
 text-shadow:0 0 24px #72cff32e;
}

.section-heading h2,.contact-form-heading h3 {
 text-wrap:balance;
}

.section-note,.work-count {
 display:inline-flex;
 align-items:center;
 min-height:28px;
 padding:.25rem .65rem;
 border:1px solid #ffffff10;
 border-radius:999px;
 background:#ffffff04;
 color:#9aa5ac;
 font-variant-numeric:tabular-nums;
}

.filters {
 width:fit-content;
 max-width:100%;
 padding:4px;
 gap:4px;
 border:1px solid #ffffff13;
 border-radius:16px;
 background:linear-gradient(180deg,#ffffff06,#0005);
 box-shadow:inset 0 1px 0 #ffffff07,0 12px 36px #0004;
}

.filter {
 position:relative;
 isolation:isolate;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-color:transparent;
 background:transparent;
 color:#929ca3;
 box-shadow:none;
 transition:color .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
}

.filter::before {
 content:"";
 width:4px;
 height:4px;
 margin-right:0;
 border-radius:50%;
 background:currentColor;
 opacity:0;
 transform:scale(.5);
 transition:opacity .22s ease,transform .22s ease,margin-right .22s ease;
}

.filter.active {
 color:#dff5ff;
 border-color:#88d5f538;
 background:linear-gradient(145deg,#88d5f51f,#88d5f508);
 box-shadow:inset 0 1px 0 #ffffff0b,0 8px 24px #0004;
}

.filter.active::before {
 opacity:1;
 transform:scale(1);
 margin-right:.45rem;
 box-shadow:0 0 12px #88d5f5;
}

.project {
 border-color:#ffffff15;
 border-radius:16px;
 background:linear-gradient(155deg,#101214b8,#050606e8 68%);
 box-shadow:inset 0 1px 0 #ffffff08,0 18px 55px #0000002e;
 transform:translateZ(0);
 transition:transform .38s var(--premium-ease),border-color .28s ease,box-shadow .38s ease;
 animation:premium-card-in .52s var(--premium-ease) both;
 animation-delay:var(--card-delay,0ms);
}

.project-visual,.photo-visual {
 border-radius:15px 15px 0 0;
 background:#030404;
}

.project-visual::after,.photo-visual::after {
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 background:linear-gradient(180deg,#ffffff08 0%,transparent 24%,transparent 70%,#00000024 100%);
 opacity:.55;
 transition:opacity .3s ease;
}

.project-caption {
 background:linear-gradient(180deg,#0a0b0c,#050606);
 border-top:1px solid #ffffff0b;
}

.project-caption h3 {
 color:#edf2f5;
 font-weight:610;
}

.project-arrow {
 z-index:2;
 border-color:#ffffff42;
 background:#080a0bb8;
 box-shadow:inset 0 1px 0 #ffffff12,0 10px 28px #0008;
 transition:transform .3s var(--premium-ease),background .25s ease,border-color .25s ease,color .25s ease;
}

.more-button,.button.primary {
 position:relative;
 overflow:hidden;
 border:1px solid #9de1fc46;
 background:linear-gradient(145deg,#91dcf8,#65bfe8);
 color:#06131a;
 box-shadow:inset 0 1px 0 #ffffff80,0 12px 32px #5bc8f01f;
 transition:transform .25s var(--premium-ease),box-shadow .25s ease,filter .25s ease;
}

.more-button {
 background:linear-gradient(145deg,#ffffff0c,#ffffff04);
 color:#dbe8ee;
 box-shadow:inset 0 1px 0 #ffffff0c,0 12px 32px #0004;
}

.form-field input,.form-field textarea {
 border-color:#ffffff18;
 border-radius:12px;
 background:linear-gradient(145deg,#08090ad9,#030404e8);
 box-shadow:inset 0 1px 0 #ffffff05,inset 0 0 0 1px #0008;
 transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-field input:focus,.form-field textarea:focus {
 outline:none;
 border-color:#88d5f570;
 background:#07090ae8;
 box-shadow:inset 0 1px 0 #ffffff08,0 0 0 3px #88d5f512,0 10px 34px #0005;
}

.contact-form-panel,.contact-email-card,.logo-card {
 border-color:#ffffff17;
 background:linear-gradient(145deg,#ffffff07,#030404b5 70%);
 box-shadow:inset 0 1px 0 #ffffff08,0 22px 70px #0004;
}

.page-footer {
 min-height:0;
 padding:2rem 0 max(2rem,env(safe-area-inset-bottom));
 border-top:0;
 text-align:left;
}

.footer-panel {
 width:100%;
 display:grid;
 grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
 align-items:center;
 gap:clamp(1rem,3vw,2.5rem);
 padding:1rem 1.1rem;
 border:1px solid #ffffff17;
 border-radius:18px;
 background:
  radial-gradient(70% 140% at 0% 0%,#ffffff0a,transparent 50%),
  linear-gradient(145deg,#0d0f10d9,#030404ed);
 box-shadow:inset 0 1px 0 #ffffff09,0 20px 65px #0005;
 -webkit-backdrop-filter:blur(20px) saturate(1.05);
 backdrop-filter:blur(20px) saturate(1.05);
}

.footer-brand {
 min-width:0;
 display:inline-flex;
 align-items:center;
 justify-self:start;
 gap:.7rem;
 color:#f1f4f5;
}

.footer-brand img {
 width:36px;
 height:36px;
 flex:none;
 object-fit:contain;
 filter:drop-shadow(0 5px 14px #0009);
}

.footer-brand>span {
 min-width:0;
 display:grid;
 gap:.08rem;
}

.footer-brand strong {
 font-size:clamp(.6875rem,.64rem + .18vw,.8125rem);
 font-weight:760;
 letter-spacing:.13em;
 white-space:nowrap;
}

.footer-brand small {
 color:#78cdec;
 font-size:clamp(.475rem,.44rem + .1vw,.5625rem);
 font-weight:560;
 letter-spacing:.04em;
 white-space:nowrap;
}

.footer-socials {
 display:flex;
 align-items:center;
 justify-content:center;
 gap:.4rem;
 margin:0;
 padding:4px;
 border:1px solid #ffffff12;
 border-radius:999px;
 background:#0006;
 box-shadow:inset 0 1px 0 #ffffff06;
}

.footer-socials a {
 position:relative;
 width:38px;
 height:38px;
 border:1px solid transparent;
 border-radius:50%;
 background:transparent;
 color:#8f9ba2;
 box-shadow:none;
 transition:color .22s ease,border-color .22s ease,background .22s ease,transform .22s var(--premium-ease);
}

.footer-socials svg {
 width:16px;
 height:16px;
 fill:currentColor;
 stroke:none;
}

.footer-socials .social-cutout {
 fill:#050607;
 stroke:none;
}

.footer-meta {
 min-width:0;
 display:flex;
 align-items:center;
 justify-content:flex-end;
 gap:.85rem;
 justify-self:end;
}

.footer-signature {
 justify-items:end;
 gap:.18rem;
 text-align:right;
}

.footer-rights {
 color:#aeb6bb;
 font-size:clamp(.6875rem,.64rem + .15vw,.8125rem);
 font-weight:700;
 letter-spacing:.08em;
 white-space:nowrap;
}

.footer-credit-line {
 color:#6f787e;
 font-size:clamp(.625rem,.6rem + .12vw,.75rem);
 letter-spacing:.07em;
 white-space:nowrap;
}

.footer-admin {
 position:static;
 transform:none;
 flex:none;
 min-height:36px;
 padding:.5rem .7rem;
 border-color:#ffffff15;
 background:#ffffff04;
 box-shadow:inset 0 1px 0 #ffffff06;
 font-size:.5625rem;
}

.footer-admin svg {
 width:13px;
 height:13px;
}

meter::-webkit-meter-optimum-value {
 background:linear-gradient(90deg,#53bce8,#9be4ff);
 box-shadow:0 0 14px #75d2f54a;
}

meter::-moz-meter-bar {
 background:linear-gradient(90deg,#53bce8,#9be4ff);
 box-shadow:0 0 14px #75d2f54a;
}

#media-dialog {
 overflow:auto;
 border-color:#ffffff28;
 border-radius:24px;
 background:
  radial-gradient(75% 50% at 15% 0%,#ffffff0a,transparent 55%),
  linear-gradient(155deg,#111315fa,#050606fc 62%);
 box-shadow:inset 0 1px 0 #ffffff12,0 50px 160px #000e;
 opacity:0;
 transform:translateY(14px) scale(.985);
}

#media-dialog[open] {
 opacity:1;
 transform:none;
 animation:premium-modal-in .34s var(--premium-ease) both;
}

#media-dialog::backdrop {
 background:#000000d6;
 -webkit-backdrop-filter:blur(18px) saturate(.8);
 backdrop-filter:blur(18px) saturate(.8);
 animation:premium-backdrop-in .3s ease both;
}

.dialog-top {
 position:sticky;
 top:0;
 z-index:4;
 background:linear-gradient(180deg,#121416fa,#0b0c0ee8);
 border-bottom-color:#ffffff12;
 -webkit-backdrop-filter:blur(22px);
 backdrop-filter:blur(22px);
}

.dialog-top h2 {
 color:#f1f5f7;
 font-weight:620;
}

.dialog-youtube-stats {
 margin:.38rem 0 0;
 color:#79cbed;
 font-size:clamp(.64rem,.7vw,.76rem);
 line-height:1.35;
 letter-spacing:.075em;
}

.dialog-youtube-stats[hidden] { display:none; }

.close-button,.dialog-actions button {
 display:grid;
 place-items:center;
 width:42px;
 height:42px;
 border-color:#ffffff20;
 border-radius:13px;
 background:linear-gradient(145deg,#ffffff0b,#0007);
 box-shadow:inset 0 1px 0 #ffffff0a,0 10px 28px #0005;
 transition:transform .22s var(--premium-ease),border-color .22s ease,background .22s ease,color .22s ease;
}

.close-button {
 color:#bfc7cc;
}

.close-button svg,.dialog-actions button svg {
 width:18px;
 height:18px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.7;
 stroke-linecap:round;
 stroke-linejoin:round;
}

.dialog-actions {
 gap:.5rem;
}

.dialog-actions button {
 color:#c9d2d7;
}

#dialog-media {
 padding:6px;
 background:linear-gradient(145deg,#151719,#020303 45%);
}

#dialog-media iframe,#dialog-media img {
 border:0;
 border-radius:14px;
 background:#000;
 box-shadow:0 20px 80px #000b;
}

.dialog-toolbar {
 background:#08090ae8;
 border-top-color:#ffffff12;
}

#dialog-position {
 display:inline-flex;
 align-items:center;
 min-height:28px;
 padding:.25rem .65rem;
 border:1px solid #ffffff12;
 border-radius:999px;
 background:#ffffff04;
}

#dialog-description a {
 color:#87dafa;
 text-decoration:none;
 border-bottom:1px solid #87dafa55;
 transition:color .2s ease,border-color .2s ease;
}

@media(hover:hover) {
 .hero:hover,.about-section:hover,.work-section:hover,.contact-hub:hover {
  border-color:#ffffff25;
  box-shadow:inset 0 1px 0 #ffffff0d,inset 0 -1px 0 #0009,0 28px 90px #00000048;
 }
 .filter:hover:not(.active) { color:#d5dde1; background:#ffffff07; }
 .project:hover { transform:translateY(-4px); border-color:#88d5f536; box-shadow:inset 0 1px 0 #ffffff0c,0 28px 80px #0008; }
 .project:hover .project-arrow { transform:translateY(-2px) scale(1.04); border-color:#88d5f573; background:#10232bd9; color:#9fe4ff; }
 .project:hover .project-visual::after,.project:hover .photo-visual::after { opacity:.25; }
 .more-button:hover,.button.primary:hover { transform:translateY(-2px); filter:brightness(1.05); box-shadow:inset 0 1px 0 #ffffff90,0 18px 42px #5bc8f02b; }
 .close-button:hover,.dialog-actions button:hover { transform:translateY(-1px); border-color:#88d5f55c; background:#88d5f510; color:#e5f7ff; }
 #dialog-description a:hover { color:#ccefff; border-bottom-color:#ccefffaa; }
 .footer-brand:hover { color:#fff; }
 .footer-socials a:hover { transform:translateY(-1px); border-color:#88d5f53d; background:#88d5f511; color:#bcecff; }
 .footer-admin:hover { border-color:#88d5f542; background:#88d5f50c; color:#c8efff; }
}

@supports (animation-timeline:view()) {
 .about-section,.work-section,.contact-hub {
  animation:premium-section-reveal linear both;
  animation-timeline:view();
  animation-range:entry 0% entry 18%;
 }
}

@keyframes premium-card-in {
 from { opacity:0; transform:translateY(12px) scale(.99); }
 to { opacity:1; transform:none; }
}

@keyframes premium-modal-in {
 from { opacity:0; transform:translateY(18px) scale(.98); }
 to { opacity:1; transform:none; }
}

@keyframes premium-backdrop-in {
 from { opacity:0; }
 to { opacity:1; }
}

@keyframes premium-section-reveal {
 from { opacity:.5; transform:translateY(24px); }
 to { opacity:1; transform:none; }
}

@media(max-width:760px) {
 .filters {
  width:100%;
  padding:3px;
  border-radius:14px;
 }
 .filter { flex:1 0 auto; }
 #media-dialog { border-radius:18px; }
 #dialog-media { padding:4px; }
 #dialog-media iframe,#dialog-media img { border-radius:11px; }
 .footer-panel {
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
 }
 .footer-socials { grid-column:1/-1; grid-row:2; justify-self:center; }
 .footer-meta { grid-column:2; grid-row:1; }
 .footer-signature { display:none; }
}

@media(max-width:520px) {
 .project { border-radius:14px; }
 .project-visual,.photo-visual { border-radius:13px 13px 0 0; }
 .filters { box-shadow:inset 0 1px 0 #ffffff06; }
 #media-dialog { border-radius:15px; }
 .dialog-actions a { padding:.4rem .45rem; }
 .page-footer { padding:1.35rem 0 max(1.5rem,env(safe-area-inset-bottom)); }
 .footer-panel { padding:.85rem; border-radius:15px; }
 .footer-brand img { width:32px; height:32px; }
 .footer-brand strong { font-size:.6875rem; }
 .footer-socials a { width:36px; height:36px; }
 .footer-admin { min-height:34px; padding:.45rem .6rem; }
}

@media(prefers-reduced-motion:reduce) {
 .project,#media-dialog[open],#media-dialog::backdrop,.about-section,.work-section,.contact-hub { animation:none; }
 .project,.project-arrow,.filter,.more-button,.button.primary,.close-button,.dialog-actions button { transition:none; }
}

/* Floating footer: no outer container, clear standalone controls. */
.page-footer {
 padding:1.35rem .25rem max(1.75rem,env(safe-area-inset-bottom));
}

.footer-panel {
 min-height:62px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:clamp(1rem,3vw,2rem);
 padding:.45rem .2rem;
 border:0;
 border-radius:0;
 background:transparent;
 box-shadow:none;
 -webkit-backdrop-filter:none;
 backdrop-filter:none;
}

.footer-socials {
 grid-column:auto;
 grid-row:auto;
 justify-self:auto;
 gap:.55rem;
 padding:0;
 border:0;
 background:transparent;
 box-shadow:none;
}

.footer-socials a {
 width:42px;
 height:42px;
 border:0;
 background:linear-gradient(145deg,#121517e8,#050607ec);
 color:#b8c4ca;
 box-shadow:inset 0 1px 0 #ffffff0c,0 12px 30px #0008;
}

.footer-socials svg {
 width:18px;
 height:18px;
 fill:currentColor;
}

.footer-socials svg path:not(.social-cutout),
.footer-socials svg rect:not(.social-cutout),
.footer-socials svg circle:not(.social-cutout) {
 fill:currentColor;
 stroke:none;
}

.footer-socials svg .social-cutout {
 fill:#060708;
 stroke:none;
}

.footer-meta {
 grid-column:auto;
 grid-row:auto;
 justify-self:auto;
 padding:.3rem;
 border:0;
 background:transparent;
}

.footer-admin {
 border:0;
 background:linear-gradient(145deg,#111416e8,#050607e8);
 box-shadow:inset 0 1px 0 #ffffff0b,0 12px 30px #0007;
}

@media(hover:hover) {
 .footer-socials a:hover {
  transform:translateY(-3px);
  border:0;
  background:linear-gradient(145deg,#16313bd9,#081014ed);
  color:#a8e6ff;
  box-shadow:inset 0 1px 0 #ffffff14,0 16px 38px #000a,0 0 24px #79d3f51d;
 }
 .footer-admin:hover {
  border:0;
  transform:translateY(-2px);
  background:linear-gradient(145deg,#14262dd9,#080d0fed);
  box-shadow:inset 0 1px 0 #ffffff0e,0 16px 34px #0008;
 }
}

@media(max-width:760px) {
 .footer-panel {
  display:flex;
  flex-direction:column;
  gap:.9rem;
  padding:.4rem 0;
 }
 .footer-socials { order:1; }
 .footer-meta {
  order:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.65rem;
 }
 .footer-signature {
  display:grid;
  justify-items:center;
  text-align:center;
 }
 .footer-rights,.footer-credit-line { white-space:normal; }
}

@media(max-width:520px) {
 .page-footer { padding:1.15rem 0 max(1.5rem,env(safe-area-inset-bottom)); }
 .footer-socials a { width:40px; height:40px; }
 .footer-admin { min-height:34px; }
}

/* Header breakpoint authority: keep all desktop controls on one row, then
   transition the whole navigation to row two before any single item wraps. */
.main-nav .nav-label {
 white-space:nowrap;
}

@media(min-width:921px) {
 .site-header {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:center;
  column-gap:clamp(.75rem,1.5vw,1.5rem);
  row-gap:0;
 }
 .site-header .wordmark {
  width:max-content;
  justify-self:start;
  font-size:1.15rem;
 }
 .site-header .main-nav {
  width:clamp(280px,36vw,440px);
  justify-self:end;
  margin:0;
 }
 .site-header .language-switch {
  justify-self:end;
  margin:0;
 }
}

@media(min-width:761px) and (max-width:920px) {
 .site-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:1rem;
  row-gap:1rem;
 }
 .site-header .wordmark {
  grid-column:1;
  grid-row:1;
  width:max-content;
  font-size:1.15rem;
 }
 .site-header .language-switch {
  grid-column:2;
  grid-row:1;
  margin:0;
 }
 .site-header .main-nav {
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
  margin:0;
  grid-template-columns:repeat(5,minmax(0,74px));
  justify-content:center;
 }
}

/* Keep the two wordmark lines on one shared visual measure. JavaScript refines
   the English slogan after fonts settle; this ratio is the no-script fallback. */
.wordmark-copy {
 display:grid;
 align-items:start;
 width:max-content;
 min-width:0;
}

.wordmark-name,
.wordmark-copy small {
 display:block;
 width:max-content;
 max-width:none;
 white-space:nowrap;
}

.wordmark-name {
 font:inherit;
 letter-spacing:inherit;
}

.wordmark-copy small {
 font-size:.5435em;
 line-height:1.3;
}

/* One responsive type scale for the complete hero title group. */
.hero-copy {
 --hero-title-size:clamp(1.55rem,min(1rem + 4vw,8.2vw),4.5rem);
 --hero-kicker-size:clamp(.5rem,calc(var(--hero-title-size) * .17),.75rem);
 --hero-role-size:clamp(.5625rem,calc(var(--hero-title-size) * .195),.875rem);
 display:grid;
 justify-items:center;
 row-gap:clamp(.65rem,calc(var(--hero-title-size) * .22),1rem);
}

.hero-copy .eyebrow {
 margin:0;
 font-size:var(--hero-kicker-size);
 line-height:1.45;
}

.hero-copy h1 {
 max-width:100%;
 margin:0;
 font-size:var(--hero-title-size);
 line-height:1.08;
 white-space:nowrap;
}

.hero-copy .hero-role {
 max-width:100%;
 margin:0;
 padding-block:clamp(.48rem,calc(var(--hero-title-size) * .12),.62rem);
 padding-inline:clamp(.72rem,calc(var(--hero-title-size) * .23),1.05rem);
 border-radius:100px;
 font-size:var(--hero-role-size);
 line-height:1.35;
 white-space:nowrap;
}

@media(max-width:360px) {
 .site-header {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  column-gap:0;
  row-gap:.6rem;
 }
 .site-header .wordmark {
  grid-column:1;
  grid-row:1;
  width:max-content;
  justify-self:center;
  flex:none;
 }
 .site-header .language-switch {
  grid-column:1;
  grid-row:2;
  justify-self:center;
  margin:0;
 }
 .site-header .main-nav {
  grid-column:1;
  grid-row:3;
  width:100%;
  margin:0;
 }
}

/* Prevent mobile browsers from inflating type independently in landscape. */
html {
 -webkit-text-size-adjust:100%;
 text-size-adjust:100%;
}

.sound-toggle-label {
 flex:0 0 auto;
 white-space:nowrap;
 overflow-wrap:normal;
 word-break:keep-all;
}

@media(max-width:520px) and (orientation:portrait) {
 .showreel-sound {
  flex-wrap:nowrap;
  gap:3px;
  padding-inline:8px;
  letter-spacing:.08em;
 }
 .sound-toggle-label {
  width:auto;
  min-width:0;
 }
}

/* Short-height landscape: keep the fixed navigation useful without consuming
   most of the viewport, and scale reading type from the available height. */
@media(max-height:500px) and (orientation:landscape) {
 :root {
  --gutter:clamp(.75rem,2vw,1.25rem);
  --reading-size:clamp(.75rem,1.55vw,.8125rem);
  --detail-size:clamp(.5625rem,1.2vw,.6875rem);
 }

 .site-header {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:center;
  padding:.42rem clamp(.35rem,1vw,.65rem);
  column-gap:clamp(.45rem,1.2vw,.8rem);
  row-gap:0;
 }
 .site-header .wordmark {
  grid-column:1;
  grid-row:1;
  width:max-content;
  justify-self:start;
  gap:.4rem;
  font-size:clamp(.78rem,1.6vw,.95rem);
 }
 .site-header .wordmark img {
  width:2rem;
  height:2rem;
 }
 .site-header .wordmark small {
  margin-top:.12rem;
 }

 .site-header .main-nav {
  grid-column:2;
  grid-row:1;
  width:min(100%,360px);
  justify-self:end;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2px;
  margin:0;
  padding:0;
  border:0;
 }
 .site-header .main-nav a {
  height:46px;
  min-height:0;
  gap:2px;
  padding:3px 1px;
  border-radius:9px;
 }
 .site-header .main-nav svg {
  width:19px;
  height:19px;
 }
 .site-header .main-nav .nav-label {
  font-size:clamp(.4375rem,1.05vw,.53125rem);
  line-height:1.15;
  letter-spacing:0;
  white-space:nowrap;
 }
 .site-header .main-nav a::after {
  bottom:-2px;
  height:2px;
 }

 .site-header .language-switch {
  grid-column:3;
  grid-row:1;
  justify-self:end;
  margin:0;
  padding:2px;
 }
 .site-header .language-switch button {
  min-width:clamp(3.1rem,7vw,3.8rem);
  min-height:32px;
  gap:.2rem;
  padding:.35rem .4rem;
  font-size:.5625rem;
 }
 .site-header .language-flag {
  width:15px;
  height:10px;
 }

 .hero {
  padding:clamp(.8rem,2vw,1.2rem);
 }
 .hero-copy {
  --hero-title-size:clamp(2rem,4.7vw,2.5rem);
  --hero-kicker-size:clamp(.4375rem,calc(var(--hero-title-size) * .17),.625rem);
  --hero-role-size:clamp(.5rem,calc(var(--hero-title-size) * .19),.6875rem);
  row-gap:clamp(.42rem,1.5vh,.65rem);
  padding-block:.35rem .9rem;
 }
 .hero-copy .hero-role {
  padding-block:.4rem;
  padding-inline:.75rem;
 }

 .reel-shell {
  width:min(78vw,calc(100dvh * 1.55),680px);
  min-height:0;
  margin-inline:auto;
 }

 .filters {
  gap:3px;
  margin-bottom:1rem;
  padding:3px;
 }
 .filter {
  min-height:34px;
  padding:.35rem .65rem;
 }
 .film-grid,
 .photo-grid {
  gap:.8rem;
 }
 .project-caption {
  padding:.72rem .85rem;
 }
 .project-arrow {
  right:.7rem;
  bottom:.7rem;
  width:36px;
  height:36px;
 }
 .gallery-more {
  margin-top:1rem;
 }
 .more-button {
  min-height:38px;
  padding:.5rem 1.2rem;
  font-size:.6875rem;
 }

 .contact-hub-grid {
  gap:1.25rem;
 }
 .contact-intro {
  padding-block:0;
 }
 .contact-intro h2 {
  margin:.5rem 0 .8rem;
 }
 .contact-lede {
  font-size:var(--reading-size);
  line-height:1.65;
 }
 .contact-email-card {
  min-height:60px;
  margin-top:1rem;
  padding:.65rem .8rem;
 }
 .contact-form-panel {
  padding:1rem;
 }
 .contact-form-heading {
  margin-bottom:.8rem;
 }
 #contact-form {
  gap:.65rem;
 }
 .form-field {
  gap:.3rem;
 }
 .form-field input,
 .form-field textarea {
  padding:.6rem .75rem;
  font-size:.8125rem;
  line-height:1.45;
 }
 .form-field textarea {
  min-height:90px;
 }

 #media-dialog {
  max-height:calc(100dvh - 1rem);
 }
 .dialog-top {
  padding:.75rem 1rem;
 }
 .dialog-toolbar {
  padding:.55rem 1rem;
 }
 #dialog-description {
  padding:0 1rem .75rem;
 }

 .about-section,
 .work-section,
 .contact-hub {
  padding:clamp(1rem,2.5vw,1.5rem);
 }
 h2 {
  font-size:clamp(1.3rem,2.8vw,1.75rem);
 }
 .muted {
  font-size:var(--reading-size);
  line-height:1.65;
 }
 .section-heading {
  margin-bottom:1rem;
 }
}

@media(min-width:760px) and (max-height:500px) and (orientation:landscape) {
 .contact-hub-grid {
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
 }
}

/* All primary surfaces share the same 20% dark glass tint. */
.hero.glass,
.about-section.glass,
.work-section.glass,
.contact-hub.glass {
 background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(4,5,6,.20) 46%,rgba(2,3,4,.18));
 border-color:#ffffff1c;
 box-shadow:inset 0 1px 0 #ffffff0a;
 -webkit-backdrop-filter:blur(18px) saturate(1.12);
 backdrop-filter:blur(18px) saturate(1.12);
}

.site-header {
 background:linear-gradient(145deg,rgba(0,0,0,.12),rgba(0,0,0,.15) 46%,rgba(0,0,0,.12));
 border:1px solid #ffffff1c;
 border-radius:var(--radius);
 box-shadow:inset 0 1px 0 #ffffff0a;
 -webkit-backdrop-filter:blur(14px) saturate(1.04) brightness(.55);
 backdrop-filter:blur(14px) saturate(1.04) brightness(.55);
}

.hero.glass:hover,
.about-section.glass:hover,
.work-section.glass:hover,
.contact-hub.glass:hover {
 border-color:#ffffff20;
 box-shadow:inset 0 1px 0 #ffffff0d;
}

.hero.glass:hover { box-shadow:inset 0 1px 0 #ffffff0d; }

.hero .reel-shell {
 background:rgba(4,5,6,.20);
 box-shadow:none;
}

.showreel-video {
 z-index:1;
 opacity:1;
 transition:none;
}

/* Match the original site's scroll-triggered skill graph animation. */
.skill-meter-semantic {
 position:absolute;
 width:1px;
 height:1px;
 overflow:hidden;
 opacity:0;
 pointer-events:none;
}

.skill-progress-track {
 position:relative;
 display:block;
 width:100%;
 height:4px;
 margin-top:.8rem;
 overflow:hidden;
 border-radius:4px;
 background:#ffffff10;
}

.skill-progress-bar {
 position:relative;
 display:block;
 width:0;
 height:100%;
 overflow:hidden;
 border-radius:inherit;
 background:linear-gradient(90deg,#53bce8,#9be4ff);
}

.skill-progress-bar::after {
 content:"";
 position:absolute;
 inset:0;
 transform:translateX(-100%);
 background:linear-gradient(90deg,transparent 0%,#ffffff40 50%,transparent 100%);
}

.skill-progress-bar.is-active::after {
 animation:skill-shimmer 2s ease-in-out 1.2s infinite;
}

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

@media(prefers-reduced-motion:reduce) {
 .skill-progress-bar { transition:none !important; }
 .skill-progress-bar::after { animation:none !important; }
}

/* Keep both logo-era frames on one shared baseline at every responsive size. */
.logo-evolution {
 align-items:stretch;
}

.logo-card {
 display:flex;
 height:100%;
 flex-direction:column;
}

.logo-card .logo-description {
 margin-top:auto;
 padding-top:1.1rem;
}

.evolution-arrow {
 align-self:center;
}

/* Original-site brand reveal: copy, legacy mark, transition, redesigned mark. */
.brand-story.brand-reveal {
 opacity:0;
 transform:translate3d(0,22px,0);
 transition:opacity .74s ease,transform .74s cubic-bezier(.2,.72,.18,1);
}

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

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

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

.brand-story.brand-reveal.is-visible .story-copy { animation-delay:.06s; }
.brand-story.brand-reveal.is-visible .logo-card:first-child { animation-delay:.22s; }
.brand-story.brand-reveal.is-visible .evolution-arrow { animation-delay:.56s; }
.brand-story.brand-reveal.is-visible .logo-card:last-child { animation-delay:.82s; }

@keyframes brand-story-rise {
 from { opacity:0; transform:translate3d(0,18px,0) scale(.985); }
 to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}

@media(prefers-reduced-motion:reduce) {
 .brand-story.brand-reveal,
 .brand-story.brand-reveal .story-copy,
 .brand-story.brand-reveal .logo-card,
 .brand-story.brand-reveal .evolution-arrow {
  opacity:1;
  transform:none;
  transition:none;
 animation:none;
 }
}

/* Richer cinematic bokeh: colored edge light with a protected dark center. */
.bokeh-scene {
 background:
  radial-gradient(48% 42% at -8% 20%,#d8752830 0%,transparent 72%),
  radial-gradient(42% 38% at 108% 28%,#713f9b2b 0%,transparent 72%),
  radial-gradient(46% 42% at 82% 108%,#1f82a52b 0%,transparent 74%),
  radial-gradient(38% 34% at 18% 104%,#b4517130 0%,transparent 72%),
  #000;
}

.bokeh-scene::before {
 content:"";
 position:absolute;
 inset:-12%;
 background:
  radial-gradient(circle at 14% 24%,#ff9a3c24 0%,transparent 22%),
  radial-gradient(circle at 86% 18%,#9b51b624 0%,transparent 24%),
  radial-gradient(circle at 76% 82%,#35bde522 0%,transparent 25%);
 filter:blur(54px) saturate(1.3);
 opacity:.76;
 animation:bokeh-color-wash 18s ease-in-out infinite alternate;
}

.bokeh-scene i {
 opacity:.78;
 filter:blur(9px) saturate(1.5);
 mix-blend-mode:screen;
 box-shadow:0 0 50px #ffffff08,inset 0 0 24px #ffffff0a;
}

.bokeh-scene i:nth-child(1) {
 background:radial-gradient(circle at 42% 40%,#ffd18a9c 0 5%,#e77f365f 24%,#9d3e2138 52%,transparent 74%);
}
.bokeh-scene i:nth-child(2) {
 background:radial-gradient(circle at 46% 42%,#efb0f086 0 5%,#a34fbd58 25%,#552b7e35 54%,transparent 74%);
}
.bokeh-scene i:nth-child(3) {
 background:radial-gradient(circle at 45% 43%,#a6efff85 0 6%,#35b7dc58 26%,#176b9032 54%,transparent 74%);
}
.bokeh-scene i:nth-child(4) {
 background:radial-gradient(circle at 43% 40%,#b8d7ff85 0 5%,#4d85d65b 25%,#313d8b34 55%,transparent 75%);
}
.bokeh-scene i:nth-child(5) {
 background:radial-gradient(circle at 46% 43%,#ffc0d87f 0 5%,#ca577d59 25%,#7c294b36 54%,transparent 74%);
}
.bokeh-scene i:nth-child(6) {
 background:radial-gradient(circle at 43% 41%,#fff0a98c 0 5%,#d9a54555 25%,#79652232 54%,transparent 74%);
}
.bokeh-scene i:nth-child(7) {
 background:radial-gradient(circle,#95e8ff80 0 7%,#3ca2ca45 32%,transparent 72%);
}
.bokeh-scene i:nth-child(8) {
 background:radial-gradient(circle,#e8b2ff72 0 7%,#8747a640 33%,transparent 72%);
}
.bokeh-scene i:nth-child(9) {
 background:radial-gradient(circle,#ffc27d7d 0 7%,#bc693e42 33%,transparent 72%);
}
.bokeh-scene i:nth-child(10) {
 background:radial-gradient(circle,#a5efff70 0 7%,#3b9bbf3d 33%,transparent 72%);
}

@keyframes bokeh-color-wash {
 from { transform:translate3d(-1.5%,-1%,0) scale(.98); opacity:.58; }
 to { transform:translate3d(1.5%,1%,0) scale(1.04); opacity:.84; }
}

@media(max-width:520px) {
 .bokeh-scene i { filter:blur(7px) saturate(1.42); opacity:.72; }
 .bokeh-scene::before { opacity:.64; filter:blur(42px) saturate(1.25); }
}

@media(min-width:761px) {
 .bokeh-scene { opacity:.84; }
}

@media(prefers-reduced-motion:reduce) {
 .bokeh-scene::before { animation:none; }
}

/* Compact category picker: one consistent control instead of wrapping tag rows. */
.filters {
 width:100%;
 max-width:none;
 display:flex;
 flex-wrap:nowrap;
 align-items:center;
 justify-content:space-between;
 gap:1rem;
 margin-bottom:1.65rem;
 padding:.62rem .68rem .62rem 1rem;
 border:1px solid #ffffff14;
 border-radius:16px;
 background:linear-gradient(135deg,#ffffff08,#0506078c 46%,#00000070);
 box-shadow:inset 0 1px 0 #ffffff08;
 overflow:visible;
}

.filter-control-label {
 min-width:0;
 display:inline-flex;
 align-items:center;
 gap:.7rem;
 color:#9ca8af;
 font-size:.625rem;
 font-weight:700;
 letter-spacing:.14em;
 line-height:1.2;
 white-space:nowrap;
}

.filter-control-mark {
 position:relative;
 width:30px;
 height:30px;
 flex:0 0 30px;
 border:1px solid #88d5f526;
 border-radius:9px;
 background:#88d5f50a;
}

.filter-control-mark::before {
 content:"";
 position:absolute;
 left:8px;
 top:14px;
 width:12px;
 height:1px;
 background:#8bdafb;
 box-shadow:0 -4px 0 #8bdafb,0 4px 0 #8bdafb;
 opacity:.88;
}

.filter-select-shell {
 position:relative;
 width:min(100%,360px);
 flex:0 1 360px;
 display:block;
}

.filter-select {
 width:100%;
 min-height:46px;
 margin:0;
 padding:.72rem 3rem .72rem 1rem;
 appearance:none;
 -webkit-appearance:none;
 border:1px solid #ffffff18;
 border-radius:12px;
 background:linear-gradient(145deg,#111518e8,#060708ed);
 color:#e3edf2;
 box-shadow:inset 0 1px 0 #ffffff0a,0 8px 24px #0003;
 font:inherit;
 font-size:.78rem;
 font-weight:600;
 letter-spacing:.015em;
 line-height:1.35;
 color-scheme:dark;
 cursor:pointer;
 transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.filter-select option { background:#101214; color:#e3edf2; }

.filter-select-chevron {
 position:absolute;
 top:50%;
 right:1rem;
 translate:0 -56%;
 color:#82d5f8;
 font-size:1.05rem;
 line-height:1;
 pointer-events:none;
 transition:translate .2s ease;
}

.filter-select:hover { border-color:#88d5f536; background:linear-gradient(145deg,#151a1de8,#080a0bed); }
.filter-select:focus-visible { outline:2px solid #88d5f5b8; outline-offset:2px; border-color:#88d5f570; box-shadow:inset 0 1px 0 #ffffff0a,0 0 0 4px #88d5f510; }
.filter-select:focus-visible + .filter-select-chevron { translate:0 -46%; }

@media(max-width:760px) {
 .filters {
  flex-direction:column;
  align-items:stretch;
  gap:.65rem;
  margin-bottom:1.35rem;
  padding:.72rem;
  border-radius:14px;
 }
 .filter-control-label { padding-inline:.15rem; }
 .filter-select-shell { width:100%; max-width:none; flex-basis:auto; }
 .filter-select { min-height:48px; font-size:.8rem; }
}

@media(max-width:520px) {
 .filters { gap:.55rem; padding:.62rem; border-radius:13px; }
 .filter-control-label { gap:.55rem; font-size:.5625rem; letter-spacing:.12em; }
 .filter-control-mark { width:27px; height:27px; flex-basis:27px; border-radius:8px; }
 .filter-control-mark::before { left:7px; top:13px; }
 .filter-select { min-height:44px; padding:.66rem 2.7rem .66rem .9rem; border-radius:11px; font-size:.75rem; }
 .filter-select-chevron { right:.9rem; }
}

/* Minimal left-aligned picker: remove the full-width category banner. */
.filters {
 width:100%;
 display:flex;
 justify-content:flex-start;
 margin-bottom:1.5rem;
 padding:0;
 border:0;
 border-radius:0;
 background:none;
 box-shadow:none;
 overflow:visible;
}

.filter-select-shell {
 position:relative;
 width:min(100%,340px);
 flex:0 1 340px;
 isolation:isolate;
}

.filter-select-shell::before {
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 border-radius:14px;
 padding:1px;
 background:linear-gradient(125deg,#ffffff28,#88d5f526 35%,#ffffff0e 70%,#7b55a622);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;
 mask-composite:exclude;
 pointer-events:none;
}

.filter-select-glyph {
 position:absolute;
 z-index:2;
 left:.72rem;
 top:50%;
 translate:0 -50%;
 width:29px;
 height:29px;
 border:1px solid #88d5f52b;
 border-radius:9px;
 background:linear-gradient(145deg,#88d5f512,#ffffff04);
 pointer-events:none;
}

.filter-select-glyph::before {
 content:"";
 position:absolute;
 left:8px;
 top:14px;
 width:11px;
 height:1px;
 border-radius:2px;
 background:#91dcfb;
 box-shadow:0 -4px 0 #91dcfb,0 4px 0 #91dcfb;
 opacity:.9;
}

.filter-select {
 min-height:50px;
 padding:.78rem 3rem .78rem 3.35rem;
 border:0;
 border-radius:14px;
 background:
  radial-gradient(80% 140% at 0% 0%,#88d5f50d,transparent 52%),
  linear-gradient(145deg,#121518e8,#060708ed 72%);
 box-shadow:inset 0 1px 0 #ffffff0b,0 14px 38px #00000038;
 color:#e8f0f4;
 font-size:.78rem;
 font-weight:650;
 letter-spacing:.01em;
}

.filter-select:hover {
 background:
  radial-gradient(80% 140% at 0% 0%,#88d5f514,transparent 54%),
  linear-gradient(145deg,#171b1ee8,#080a0bed 72%);
}

.filter-select:focus-visible {
 outline:2px solid #88d5f59c;
 outline-offset:3px;
 box-shadow:inset 0 1px 0 #ffffff0d,0 0 0 5px #88d5f50d,0 16px 42px #0005;
}

.filter-select-chevron {
 right:1.05rem;
 width:20px;
 height:20px;
 display:grid;
 place-items:center;
 border-radius:50%;
 background:#ffffff06;
 color:#87d8fa;
 font-size:.92rem;
 translate:0 -54%;
}

@media(max-width:760px) {
 .filters { display:flex; margin-bottom:1.3rem; padding:0; }
 .filter-select-shell { width:100%; max-width:340px; flex-basis:340px; }
}

@media(max-width:520px) {
 .filters { margin-bottom:1.15rem; padding:0; }
 .filter-select-shell { max-width:none; flex:1 1 100%; }
 .filter-select-shell::before,.filter-select { border-radius:12px; }
 .filter-select { min-height:46px; padding:.7rem 2.8rem .7rem 3.15rem; font-size:.75rem; }
 .filter-select-glyph { left:.62rem; width:27px; height:27px; border-radius:8px; }
 .filter-select-glyph::before { left:7px; top:13px; }
 .filter-select-chevron { right:.82rem; }
}

/* Numbered gallery pagination with compact first/previous/next/last controls. */
.gallery-pagination {
 min-height:44px;
 margin-top:2rem;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:.45rem;
}

.gallery-pagination[hidden] { display:none; }

.page-button {
 position:relative;
 min-width:42px;
 height:42px;
 display:inline-grid;
 place-items:center;
 padding:0 .55rem;
 border:1px solid #ffffff16;
 border-radius:12px;
 background:linear-gradient(145deg,#111416d6,#050607e8);
 box-shadow:inset 0 1px 0 #ffffff09,0 10px 28px #0003;
 color:#9ea9af;
 font:inherit;
 font-size:.78rem;
 font-weight:700;
 line-height:1;
 cursor:pointer;
 transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}

.page-button[aria-current="page"] {
 border-color:#91ddfa78;
 background:linear-gradient(145deg,#a6e4fb,#65bddf);
 box-shadow:inset 0 1px 0 #ffffffa6,0 12px 32px #57bee333;
 color:#061015;
}

.page-button:disabled {
 opacity:.28;
 cursor:default;
 box-shadow:none;
}

.page-button:focus-visible {
 outline:2px solid #8bdafb;
 outline-offset:3px;
}

@media(hover:hover) {
 .page-button:not(:disabled):not([aria-current="page"]):hover {
  color:#dff5ff;
  border-color:#88d5f54a;
  background:linear-gradient(145deg,#172026dc,#080b0de8);
  box-shadow:inset 0 1px 0 #ffffff0b,0 12px 30px #0005;
  transform:translateY(-1px);
 }
}

@media(max-width:520px) {
 .gallery-pagination { margin-top:1.5rem; gap:5px; }
 .page-button { min-width:36px; height:36px; padding:0 .4rem; border-radius:10px; font-size:.72rem; }
}

@media(prefers-reduced-motion:reduce) {
 .page-button { transition:none; }
}
/* Refined category select: quiet glass, precise chevron, minimal accent. */
.filter-select-shell {
 width:min(100%,310px);
 flex:0 1 310px;
}

.filter-select-shell::before { display:none; }

.filter-select-glyph {
 left:1rem;
 width:5px;
 height:5px;
 border:0;
 border-radius:50%;
 background:#83d6f7;
 box-shadow:0 0 10px #83d6f75c;
}

.filter-select-glyph::before { display:none; }

.filter-select {
 min-height:48px;
 padding:.74rem 2.65rem .74rem 1.75rem;
 border:1px solid #ffffff17;
 border-radius:13px;
 background:rgba(7,9,10,.76);
 -webkit-backdrop-filter:blur(18px) saturate(1.08);
 backdrop-filter:blur(18px) saturate(1.08);
 box-shadow:inset 0 1px 0 #ffffff09,0 10px 30px #00000030;
 color:#dbe4e8;
 font-size:.76rem;
 font-weight:560;
 letter-spacing:.005em;
}

.filter-select:hover {
 border-color:#ffffff24;
 background:rgba(10,13,14,.84);
}

.filter-select:focus-visible {
 outline:1px solid #86d9fb;
 outline-offset:3px;
 border-color:#86d9fb66;
 box-shadow:inset 0 1px 0 #ffffff0b,0 0 0 4px #86d9fb0c,0 12px 32px #0004;
}

.filter-select-chevron {
 top:50%;
 right:1.05rem;
 width:7px;
 height:7px;
 display:block;
 border:0;
 border-right:1.5px solid #88cfe9;
 border-bottom:1.5px solid #88cfe9;
 border-radius:0;
 background:none;
 color:transparent;
 font-size:0;
 translate:0 -68%;
 rotate:45deg;
 opacity:.82;
}

.filter-select:focus-visible + .filter-select-chevron {
 translate:0 -58%;
 rotate:45deg;
 opacity:1;
}

@media(max-width:760px) {
 .filter-select-shell { width:min(100%,310px); max-width:310px; flex-basis:310px; }
}

@media(max-width:520px) {
 .filter-select-shell { width:100%; max-width:none; flex:1 1 100%; }
 .filter-select { min-height:46px; padding:.7rem 2.55rem .7rem 1.65rem; border-radius:12px; font-size:.75rem; }
 .filter-select-glyph { left:.92rem; width:5px; height:5px; }
 .filter-select-chevron { right:.95rem; }
}
/* Responsive category picker geometry: prevent the width basis from becoming height in column layout. */
@media(max-width:760px) {
 .filter-select-shell { flex:0 0 auto; height:auto; min-height:48px; }
}

@media(max-width:520px) {
 .filter-select-shell { flex:0 0 auto; min-height:46px; }
}
/* Clear filter affordance: persistent label, funnel glyph, and dedicated chevron control. */
.filter-select-shell {
 width:min(100%,340px);
 flex-basis:340px;
 min-height:58px;
}

.filter-select {
 min-height:58px;
 padding:1.35rem 3.25rem .48rem 3.55rem;
 border-color:#ffffff24;
 border-radius:14px;
 background:linear-gradient(145deg,rgba(16,20,22,.92),rgba(5,7,8,.88));
 box-shadow:inset 0 1px 0 #ffffff0d,0 12px 34px #00000038;
 color:#e3edf1;
 font-size:.78rem;
 font-weight:650;
}

.filter-select:hover {
 border-color:#88d5f552;
 background:linear-gradient(145deg,rgba(19,25,28,.96),rgba(7,9,10,.93));
 box-shadow:inset 0 1px 0 #ffffff12,0 14px 38px #0005;
}

.filter-select-kicker {
 position:absolute;
 z-index:2;
 left:3.55rem;
 top:.63rem;
 color:#83d6f7;
 font-size:.46rem;
 font-weight:750;
 line-height:1;
 letter-spacing:.17em;
 pointer-events:none;
}

.filter-select-glyph {
 left:.75rem;
 width:31px;
 height:31px;
 border:1px solid #88d5f535;
 border-radius:9px;
 background:linear-gradient(145deg,#88d5f516,#ffffff05);
 box-shadow:inset 0 1px 0 #ffffff0b;
}

.filter-select-glyph::before {
 content:"";
 display:block;
 position:absolute;
 left:8px;
 top:8px;
 width:13px;
 height:14px;
 background:#91dcfb;
 clip-path:polygon(0 0,100% 0,62% 44%,62% 100%,38% 80%,38% 44%);
 opacity:.9;
}

.filter-select-chevron {
 top:50%;
 right:.78rem;
 width:30px;
 height:30px;
 display:block;
 border:1px solid #ffffff18;
 border-radius:9px;
 background:#ffffff07;
 translate:0 -50%;
 rotate:0deg;
 opacity:1;
}

.filter-select-chevron::before {
 content:"";
 position:absolute;
 left:10px;
 top:8px;
 width:7px;
 height:7px;
 border-right:1.5px solid #8bdafb;
 border-bottom:1.5px solid #8bdafb;
 rotate:45deg;
}

.filter-select:hover + .filter-select-chevron,
.filter-select:focus-visible + .filter-select-chevron {
 border-color:#88d5f54a;
 background:#88d5f50d;
 translate:0 -50%;
 rotate:0deg;
}

@media(max-width:760px) {
 .filter-select-shell { flex:0 0 auto; min-height:58px; }
}

@media(max-width:520px) {
 .filter-select-shell { width:100%; max-width:none; min-height:56px; }
 .filter-select { min-height:56px; padding:1.3rem 3rem .44rem 3.3rem; font-size:.76rem; }
 .filter-select-kicker { left:3.3rem; top:.6rem; }
 .filter-select-glyph { left:.65rem; width:29px; height:29px; }
 .filter-select-glyph::before { left:7px; top:7px; }
 .filter-select-chevron { right:.68rem; width:28px; height:28px; }
 .filter-select-chevron::before { left:9px; top:7px; }
}
/* Minimal text-led filter control. */
.filter-select-shell {
 width:min(100%,320px);
 flex-basis:320px;
 min-height:50px;
}

.filter-select {
 min-height:50px;
 padding:.7rem 2.7rem .7rem 4.65rem;
 border:1px solid #ffffff20;
 border-radius:13px;
 background:rgba(7,9,10,.78);
 box-shadow:inset 0 1px 0 #ffffff08;
 color:#e0e7ea;
 font-size:.77rem;
 font-weight:620;
}

.filter-select:hover {
 border-color:#88d5f540;
 background:rgba(9,12,13,.84);
 box-shadow:inset 0 1px 0 #ffffff0b;
}

.filter-select-glyph { display:none; }

.filter-select-kicker {
 left:1rem;
 top:50%;
 translate:0 -50%;
 color:#87d8f8;
 font-size:.5rem;
 font-weight:750;
 line-height:1;
 letter-spacing:.13em;
}

.filter-select-kicker::after {
 content:"";
 position:absolute;
 top:50%;
 right:-.72rem;
 width:1px;
 height:16px;
 background:#ffffff18;
 translate:0 -50%;
}

.filter-select-chevron {
 top:50%;
 right:1.05rem;
 width:7px;
 height:7px;
 border:0;
 border-right:1.5px solid #88cfe9;
 border-bottom:1.5px solid #88cfe9;
 border-radius:0;
 background:none;
 translate:0 -68%;
 rotate:45deg;
 opacity:.88;
}

.filter-select-chevron::before { display:none; }

.filter-select:hover + .filter-select-chevron,
.filter-select:focus-visible + .filter-select-chevron {
 border-color:#a8e5ff;
 background:none;
 translate:0 -68%;
 rotate:45deg;
}

@media(max-width:760px) {
 .filter-select-shell { flex:0 0 auto; min-height:50px; }
}

@media(max-width:520px) {
 .filter-select-shell { width:100%; max-width:none; min-height:48px; }
 .filter-select { min-height:48px; padding:.65rem 2.55rem .65rem 4.35rem; font-size:.75rem; }
 .filter-select-kicker { left:.9rem; font-size:.475rem; }
 .filter-select-kicker::after { right:-.62rem; height:14px; }
 .filter-select-chevron { right:.95rem; }
}
/* Fixed five-row gallery density with three desktop columns and two responsive columns. */
.film-grid,
.photo-grid {
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:clamp(.75rem,1.2vw,1rem);
}

@media(max-width:920px) {
 .film-grid,
 .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:520px) {
 .film-grid,
 .photo-grid { gap:.65rem; }
 .project-caption { display:block; padding:.72rem .68rem .78rem; }
 .project-caption h3 {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  margin-top:.28rem;
  font-size:.68rem;
  line-height:1.38;
 }
 .project-caption small { margin-bottom:.2rem; font-size:.46rem; }
 .project-caption>span { font-size:.5rem; }
 .project-arrow { right:.55rem; bottom:.55rem; width:34px; height:34px; font-size:.9rem; }
}

/* App-style navigation: once the icon row no longer fits the desktop header,
   keep branding and language at the top and dock the section menu below. */
@media(max-width:920px) {
 :root { --mobile-nav-dock-height:72px; }

 body.has-mobile-nav-dock {
  padding-bottom:calc(var(--mobile-nav-dock-height) + max(1rem,env(safe-area-inset-bottom)) + 1rem);
 }

 .site-header {
  grid-template-columns:minmax(0,1fr) max-content;
  align-items:center;
  column-gap:clamp(.45rem,2vw,1rem);
  row-gap:0;
  padding:clamp(.62rem,1.8vw,.9rem) clamp(.55rem,1.6vw,.85rem);
 }

 .site-header .wordmark {
  grid-column:1;
  grid-row:1;
  width:max-content;
  max-width:100%;
  min-width:0;
  justify-self:start;
  flex:none;
  font-size:clamp(.8rem,2.2vw,1.05rem);
 }

 .site-header .wordmark img {
  width:clamp(2rem,5.5vw,2.55rem);
  height:clamp(2rem,5.5vw,2.55rem);
 }

 .site-header .language-switch {
  grid-column:2;
  grid-row:1;
  justify-self:end;
  margin:0;
 }

 body > .main-nav {
  position:fixed;
  z-index:90;
  left:max(var(--gutter),env(safe-area-inset-left));
  right:max(var(--gutter),env(safe-area-inset-right));
  bottom:max(.5rem,env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  width:auto;
  max-width:1344px;
  margin-inline:auto;
  padding:6px;
  gap:3px;
  border:1px solid #ffffff22;
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(0,0,0,.12),rgba(0,0,0,.15) 46%,rgba(0,0,0,.12));
  box-shadow:inset 0 1px 0 #ffffff0a;
  -webkit-backdrop-filter:blur(14px) saturate(1.04) brightness(.55);
  backdrop-filter:blur(14px) saturate(1.04) brightness(.55);
 }

 body > .main-nav a {
  height:58px;
  min-height:0;
  gap:4px;
  padding:5px 2px;
  border-radius:12px;
 }

 body > .main-nav svg { width:21px; height:21px; }
 body > .main-nav .nav-label {
  font-size:clamp(.5rem,1.5vw,.625rem);
  line-height:1.15;
  letter-spacing:0;
  white-space:nowrap;
 }
 body > .main-nav a::after { bottom:1px; }
}

@media(max-width:520px) {
 :root { --mobile-nav-dock-height:68px; }
 .site-header .wordmark { gap:.45rem; font-size:clamp(.76rem,3.2vw,.95rem); }
 .site-header .wordmark small { margin-top:.12rem; }
 .site-header .language-switch { padding:2px; }
 .site-header .language-switch button {
  min-width:clamp(3.1rem,16vw,3.8rem);
  min-height:34px;
  padding:.42rem clamp(.2rem,1vw,.35rem);
 }
 body > .main-nav { left:max(var(--gutter),env(safe-area-inset-left)); right:max(var(--gutter),env(safe-area-inset-right)); bottom:max(.45rem,env(safe-area-inset-bottom)); padding:5px; border-radius:var(--radius); }
 body > .main-nav a { height:54px; gap:3px; padding:4px 1px; border-radius:11px; }
 body > .main-nav svg { width:20px; height:20px; }
 body > .main-nav .nav-label { font-size:clamp(.475rem,2.35vw,.5625rem); }
}

@media(max-height:500px) and (orientation:landscape) and (max-width:920px) {
 .site-header {
  grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:center;
  padding:.42rem clamp(.35rem,1vw,.65rem);
  column-gap:clamp(.45rem,1.2vw,.8rem);
  row-gap:0;
 }
 .site-header .wordmark {
  grid-column:1;
  grid-row:1;
  width:max-content;
  justify-self:start;
  gap:.4rem;
  font-size:clamp(.78rem,1.6vw,.95rem);
 }
 .site-header .wordmark img { width:2rem; height:2rem; }
 .site-header .main-nav {
  grid-column:2;
  grid-row:1;
  width:min(100%,360px);
  justify-self:end;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2px;
  margin:0;
  padding:0;
  border:0;
 }
 .site-header .main-nav a { height:46px; min-height:0; gap:2px; padding:3px 1px; border-radius:9px; }
 .site-header .main-nav svg { width:19px; height:19px; }
 .site-header .main-nav .nav-label { font-size:clamp(.4375rem,1.05vw,.53125rem); line-height:1.15; letter-spacing:0; white-space:nowrap; }
 .site-header .main-nav a::after { bottom:-2px; height:2px; }
 .site-header .language-switch { grid-column:3; grid-row:1; justify-self:end; margin:0; padding:2px; }
 .site-header .language-switch button { min-width:clamp(3.1rem,7vw,3.8rem); min-height:32px; gap:.2rem; padding:.35rem .4rem; font-size:.5625rem; }
 .site-header .language-flag { width:15px; height:10px; }
}

/* Mobile landscape modal: use the available width so the complete modal
   remains inside a short viewport instead of continuing below the screen. */
@media(max-height:500px) and (orientation:landscape) and (max-width:920px) {
 #media-dialog {
  width:calc(100vw - 1rem);
  height:calc(100dvh - 1rem);
  max-width:none;
  max-height:calc(100dvh - 1rem);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(230px,.85fr);
  grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:
   "media top"
   "media toolbar"
   "media description";
 }
 .dialog-top {
  grid-area:top;
  position:static;
  padding:.6rem .7rem;
  gap:.55rem;
 }
 .dialog-top .eyebrow { margin-bottom:.2rem; }
 .dialog-top h2 {
  font-size:clamp(.78rem,2.1vw,1rem);
  line-height:1.25;
 }
 .dialog-youtube-stats {
  margin-top:.2rem;
  font-size:clamp(.5rem,1.25vw,.625rem);
  line-height:1.25;
 }
 .close-button,
 .dialog-actions button {
  width:34px;
  height:34px;
  border-radius:10px;
 }
 .close-button svg,
 .dialog-actions button svg {
  width:15px;
  height:15px;
 }
 #dialog-media {
  grid-area:media;
  min-width:0;
  min-height:0;
  height:100%;
  padding:4px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-right:1px solid #ffffff12;
 }
 #dialog-media iframe {
  width:100%;
  height:auto;
  max-height:100%;
  aspect-ratio:16/9;
 }
 #dialog-media img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 1.5rem);
  object-fit:contain;
 }
 .dialog-toolbar {
  grid-area:toolbar;
  padding:.38rem .7rem;
  gap:.45rem;
 }
 #dialog-position {
  min-height:24px;
  padding:.18rem .45rem;
  font-size:.5625rem;
 }
 #dialog-description {
  grid-area:description;
  min-height:0;
  overflow:auto;
  padding:.45rem .7rem .65rem;
  font-size:clamp(.6rem,1.4vw,.7rem);
  line-height:1.5;
  scrollbar-width:thin;
 }
}

/* Restored late visual refinements. */
.showreel-sound {
 background:linear-gradient(145deg,rgba(0,0,0,.12),rgba(0,0,0,.15) 46%,rgba(0,0,0,.12));
 border-color:#ffffff1c;
 box-shadow:inset 0 1px 0 #ffffff0a;
 -webkit-backdrop-filter:blur(14px) saturate(1.04) brightness(.55);
 backdrop-filter:blur(14px) saturate(1.04) brightness(.55);
}
.showreel-sound:hover { background:linear-gradient(145deg,rgba(0,0,0,.14),rgba(0,0,0,.17) 46%,rgba(0,0,0,.14)); }
.showreel-sound.is-sound-enabled { background:linear-gradient(145deg,rgba(8,20,24,.14),rgba(5,10,12,.17) 46%,rgba(3,5,6,.14)); }
.logo-card figcaption>span { font-size:clamp(1.18rem,1.02rem + .28vw,1.4rem); }
.logo-card small { font-size:clamp(.6rem,.54rem + .1vw,.7rem); letter-spacing:.105em; }
.profile-copy .text-link { font-size:clamp(.86rem,.78rem + .16vw,1rem); min-height:48px; margin-top:1rem; letter-spacing:.015em; }
.footer-socials a { position:relative; isolation:isolate; overflow:hidden; transition:transform .42s var(--premium-ease),border-color .42s var(--premium-ease),background .42s var(--premium-ease),box-shadow .42s var(--premium-ease),color .42s var(--premium-ease); }
.footer-socials a::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.26) 48%,transparent 72%); transform:translateX(-125%); transition:transform .72s var(--premium-ease); pointer-events:none; }
.footer-socials a svg { position:relative; z-index:1; }
.footer-socials.is-visible a { animation:footer-social-rise .62s cubic-bezier(.2,.72,.18,1) both; }
.footer-socials.is-visible a:nth-child(1){animation-delay:.02s}.footer-socials.is-visible a:nth-child(2){animation-delay:.09s}.footer-socials.is-visible a:nth-child(3){animation-delay:.16s}.footer-socials.is-visible a:nth-child(4){animation-delay:.23s}.footer-socials.is-visible a:nth-child(5){animation-delay:.30s}
@keyframes footer-social-rise { from{opacity:0;transform:translate3d(0,12px,0) scale(.86)} to{opacity:1;transform:translate3d(0,0,0) scale(1)} }
#media-dialog.is-resume #dialog-media { padding:10px; }
#media-dialog.is-resume .dialog-toolbar,#media-dialog.is-resume #dialog-description { display:none; }
#media-dialog.is-resume #dialog-media iframe { width:100%; height:min(76dvh,900px); min-height:520px; max-height:none; aspect-ratio:auto; background:#070809; }
@media(max-width:600px){.logo-card small{font-size:.56rem;letter-spacing:.075em}#media-dialog.is-resume #dialog-media iframe{height:72dvh;min-height:420px}}
@media(max-height:500px) and (orientation:landscape){#media-dialog.is-resume #dialog-media iframe{height:100%;min-height:0;max-height:100%;aspect-ratio:auto}}
@media(prefers-reduced-motion:reduce){.footer-socials.is-visible a{animation:none}.footer-socials a,.footer-socials a::before{transition:none}}

/* Restore Contact profile presentation after the contact-hub markup update. */
.contact-profile-photo {
 width:clamp(150px,24vw,230px);
 aspect-ratio:1;
 margin:0 auto clamp(1.35rem,2.5vw,2rem);
 border:1px solid #ffffff18;
 border-radius:50%;
 overflow:hidden;
 background:radial-gradient(circle at 50% 78%,#ffffff0b,transparent 68%),#030405;
 box-shadow:inset 0 1px 0 #ffffff0a,0 18px 45px #0007;
}
.contact-profile-photo img {
 display:block;
 width:100%;
 height:100%;
 object-fit:contain;
}
.contact-person-name {
 max-width:none !important;
 margin:.65rem 0 .55rem !important;
 font-size:clamp(1.9rem,3.2vw,3rem) !important;
 line-height:1.08 !important;
 letter-spacing:-.045em !important;
 white-space:normal;
}
.contact-name-ko {
 margin:0 0 .7rem;
 color:#d6dde2;
 font-size:clamp(.95rem,1.35vw,1.15rem);
 line-height:1.4;
 font-weight:600;
}
.contact-role {
 margin:0 0 clamp(1.25rem,2.4vw,2rem);
 color:#9ca6ad;
 font-size:clamp(.68rem,.72rem + .1vw,.82rem);
 line-height:1.55;
 letter-spacing:.08em;
 font-weight:600;
}
.contact-copy-body {
 width:100%;
 max-width:48ch;
}
.contact-copy-body > p { margin:0 0 1.15rem; }
.contact-copy-body > p:last-child { margin-bottom:0; }
@media(max-width:900px) {
 .contact-profile-photo { width:clamp(145px,34vw,200px); margin-inline:0; }
 .contact-person-name { font-size:clamp(1.8rem,7.2vw,2.6rem) !important; }
}
@media(max-width:520px) {
 .contact-profile-photo { width:clamp(132px,42vw,175px); margin-bottom:1.2rem; }
 .contact-person-name { font-size:clamp(1.75rem,8vw,2.35rem) !important; letter-spacing:-.04em !important; }
 .contact-role { font-size:.68rem; letter-spacing:.06em; }
}