*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; color-scheme: dark; -webkit-font-smoothing: antialiased; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg-page-dark); color: var(--text-primary-on-dark); font: 400 16px/1.5 var(--font-main); }
body.menu-open, body.dialog-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.container { width: min(100% - 48px, var(--max-content-width)); margin-inline: auto; }

.site-header { position: fixed; z-index: 30; inset: 0 0 auto; padding: 18px 0; transition: .3s ease; }
.site-header.scrolled { padding-block: 11px; border-bottom: 1px solid var(--border-card); background: rgba(27,8,38,.9); backdrop-filter: blur(18px); }
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand-logo { font: 900 18px/1 var(--font-display); letter-spacing: .015em; text-transform: lowercase; white-space: nowrap; }
.brand-logo span { color: var(--slate-400); font: 500 11px/1 var(--font-utility); letter-spacing: .08em; text-transform: uppercase; }
.nav-menu { display: flex; align-items: center; gap: 32px; }
.nav-menu a { position: relative; color: var(--cloud-200); font-size: 14px; }
.nav-menu a::after { position: absolute; inset: auto 0 -7px; height: 1px; background: var(--gradient-brand-decorative); content: ""; transform: scaleX(0); transform-origin: left; transition: .25s ease; }
.nav-menu a:hover::after { transform: scaleX(1); }
.btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-button); font-size: 13px; font-weight: 500; letter-spacing: .01em; transition: .28s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gradient-action-primary); color: #fff; box-shadow: 0 8px 28px rgba(122,30,179,.28); }
.btn-primary:hover { background: var(--gradient-action-hover); box-shadow: 0 10px 34px rgba(197,63,0,.28); }
.btn-secondary { border-color: var(--border-interactive); background: rgba(255,255,255,.05); color: var(--paper-50); backdrop-filter: blur(8px); }
.btn-secondary:hover { border-color: var(--violet-500); background: rgba(169,50,255,.15); }
.nav-cta { min-height: 42px; padding: 8px 16px; }
.menu-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; border-radius: 2px; background: #fff; transition: .25s ease; }
.menu-toggle.open span:first-child { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:last-child { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: fixed; z-index: 25; inset: 0; display: grid; place-content: center; gap: 22px; padding: 90px 24px 40px; background: rgba(27,8,38,.98); opacity: 0; pointer-events: none; text-align: center; transform: translateY(-10px); transition: .25s ease; }
.mobile-menu a:not(.btn) { font: 600 28px/1.2 var(--font-heading); }
.mobile-menu.open { opacity: 1; pointer-events: auto; transform: none; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--cloud-200); font: 500 11px/1.2 var(--font-utility); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 14px rgba(255,141,40,.7); }
.eyebrow b { color: var(--slate-500); font-weight: 400; }
.eyebrow-dark { color: #57575a; }

.hero { position: relative; display: flex; min-height: max(760px, 100svh); align-items: center; overflow: hidden; padding: 112px 0 68px; isolation: isolate; }
.hero-background { position: absolute; z-index: -3; inset: 0; background: url("../assets/images/hero/hero-bg.webp") center/cover no-repeat; opacity: .42; mix-blend-mode: lighten; transform: scale(1.04); animation: drift 20s ease-in-out infinite alternate; }
.hero::before { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 72% 38%, rgba(169,50,255,.2), transparent 34%), linear-gradient(90deg, rgba(27,8,38,.98) 0%, rgba(27,8,38,.8) 48%, rgba(27,8,38,.42) 100%); content: ""; }
.hero::after { position: absolute; z-index: -1; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, var(--bg-page-dark)); content: ""; }
.hero-lights { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,.82fr); align-items: center; gap: 48px; }
.hero-copy { display: grid; justify-items: start; gap: 22px; padding-top: 28px; }
.hero h1 { font: 900 clamp(72px,8.2vw,118px)/.78 var(--font-display); letter-spacing: -.075em; text-transform: lowercase; text-shadow: 0 12px 40px rgba(0,0,0,.3); }
.hero-lead { max-width: 620px; color: var(--cloud-200); font: 500 clamp(19px,1.65vw,24px)/1.5 var(--font-heading); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 5px; }
.hero-visual { position: relative; align-self: end; justify-self: center; width: min(100%, 490px); }
.hero-visual::before { position: absolute; z-index: 0; inset: 9% -6% 4% 11%; border: 1px solid rgba(169,50,255,.42); border-radius: 50% 50% 16px 16px; content: ""; transform: rotate(4deg); }
.hero-visual img { position: relative; z-index: 1; width: 100%; max-height: 650px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 24px 44px rgba(0,0,0,.38)); -webkit-mask-image: linear-gradient(#000 82%, transparent 100%); mask-image: linear-gradient(#000 82%, transparent 100%); }
.frame-number { position: absolute; z-index: 2; top: 16%; right: -12px; color: var(--slate-400); font: 500 10px/1 var(--font-utility); letter-spacing: .12em; transform: rotate(90deg); }
.director-tag { position: absolute; z-index: 2; bottom: 13%; left: -28px; display: flex; align-items: center; gap: 11px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(31,23,35,.76); box-shadow: 0 14px 30px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
.director-tag > span:last-child { display: grid; gap: 2px; }
.director-tag strong { font: 600 13px/1.2 var(--font-heading); }
.director-tag small { color: var(--slate-400); font-size: 10px; }
.tag-icon { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 50%; background: var(--gradient-action-primary); }
.scroll-note { position: absolute; bottom: 28px; left: 50%; color: var(--slate-400); font: 500 9px/1 var(--font-utility); letter-spacing: .13em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-note span { display: block; margin-top: 8px; color: var(--orange-500); font-size: 14px; text-align: center; animation: bounce 1.6s ease-in-out infinite; }

.work-section { padding: 108px 0 112px; background: var(--paper-50); color: var(--charcoal-900); }
.section-intro { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 60px; margin-bottom: 52px; }
.section-intro > div { display: grid; gap: 18px; }
.section-intro h2, .approach-heading h2, .contact-inner h2 { font: 700 clamp(42px,5vw,66px)/.98 var(--font-heading); letter-spacing: -.055em; }
.section-intro > p { max-width: 520px; color: #66656a; font-size: 18px; line-height: 1.65; }
.featured-project { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(300px,.68fr); overflow: hidden; border-radius: 24px; background: #211c23; color: #fff; box-shadow: 0 24px 70px rgba(27,8,38,.18); }
.project-image, .work-card button { position: relative; overflow: hidden; padding: 0; border: 0; background: #171218; cursor: pointer; }
.project-image { min-height: 520px; }
.project-image::after, .work-card button::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(16,8,19,.72)); content: ""; }
.project-image img, .work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .65s ease; }
.project-image:hover img, .work-card button:hover img { transform: scale(1.035); filter: saturate(1.08); }
.play-disc { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(27,8,38,.28); backdrop-filter: blur(10px); transform: translate(-50%,-50%); transition: .3s ease; }
.project-image:hover .play-disc { background: var(--violet-action-700); transform: translate(-50%,-50%) scale(1.08); }
.project-copy { display: grid; align-content: center; justify-items: start; gap: 14px; padding: 48px; }
.project-index, .project-meta { color: var(--slate-400); font: 500 10px/1.4 var(--font-utility); letter-spacing: .12em; text-transform: uppercase; }
.project-copy h3 { font: 700 clamp(42px,4vw,62px)/1 var(--font-heading); letter-spacing: -.05em; }
.project-copy > p:nth-of-type(3) { color: var(--cloud-200); line-height: 1.65; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 0 5px; border: 0; border-bottom: 1px solid var(--orange-500); background: transparent; color: #fff; cursor: pointer; font-size: 13px; }
.work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 22px; }
.work-card { min-height: 390px; overflow: hidden; border-radius: 21px; background: #171218; }
.work-card.wide { grid-column: 1 / -1; min-height: 470px; }
.work-card button { width: 100%; height: 100%; }
.card-overlay { position: absolute; z-index: 2; inset: auto 28px 26px; display: grid; justify-items: start; gap: 5px; color: #fff; text-align: left; }
.card-overlay small { color: var(--cloud-200); font: 500 9px/1 var(--font-utility); letter-spacing: .12em; text-transform: uppercase; }
.card-overlay strong { font: 700 34px/1 var(--font-heading); letter-spacing: -.04em; }
.card-overlay em { color: var(--slate-400); font-style: normal; font-size: 13px; }

.approach-section { position: relative; overflow: hidden; padding: 114px 0; background: #211b22; }
.approach-section::before { position: absolute; inset: -20% auto auto -8%; width: 440px; height: 440px; border-radius: 50%; background: rgba(169,50,255,.14); filter: blur(80px); content: ""; }
.approach-grid { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.approach-heading { display: grid; align-content: start; gap: 22px; }
.approach-steps { display: grid; }
.approach-steps article { display: grid; grid-template-columns: 54px 1fr; gap: 26px; padding: 30px 0; border-top: 1px solid rgba(255,255,255,.12); }
.approach-steps article:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.approach-steps article > span { color: var(--orange-500); font: 500 11px/1.5 var(--font-utility); }
.approach-steps div { display: grid; gap: 8px; }
.approach-steps h3 { font: 600 25px/1.2 var(--font-heading); }
.approach-steps p { max-width: 590px; color: var(--slate-400); line-height: 1.65; }

.about-section { padding: 30px 0; background: var(--bg-page-dark); }
.about-panel { display: grid; grid-template-columns: minmax(300px,430px) minmax(0,1fr); align-items: start; gap: 74px; padding: 52px; border: 1px solid transparent; border-radius: 26px; background: linear-gradient(var(--paper-50),var(--paper-50)) padding-box, var(--gradient-brand-decorative) border-box; color: var(--charcoal-900); }
.about-image { position: relative; align-self: start; height: 525px; margin-top: 0; }
.about-image img { width: 100%; height: 100%; border-radius: 21px; object-fit: cover; object-position: center 20%; }
.about-image span { position: absolute; right: -23px; bottom: 38px; padding: 9px 14px; border-radius: 99px; background: var(--gradient-action-primary); color: #fff; font: 500 10px/1 var(--font-utility); letter-spacing: .09em; text-transform: uppercase; transform: rotate(-4deg); }
.about-copy { display: grid; justify-items: start; gap: 19px; max-width: 650px; }
.about-copy { display: contents; }
.about-copy-lead { display: grid; justify-items: start; align-content: start; gap: 19px; grid-column: 2; }
.about-copy-lower { display: grid; gap: 19px; grid-column: 1 / -1; }
.pill { padding: 7px 14px; border: 1px solid transparent; border-radius: 99px; background: linear-gradient(#fff,#fff) padding-box, var(--gradient-brand-decorative) border-box; font: 500 10px/1 var(--font-utility); letter-spacing: .09em; }
.about-copy h2 { font: 700 clamp(39px,4.2vw,58px)/1.02 var(--font-heading); letter-spacing: -.055em; }
.about-copy p:not(.pill) { color: #55545a; font-size: 17px; line-height: 1.65; }
.about-signoff { display: flex; width: 100%; align-items: end; justify-content: space-between; gap: 20px; margin-top: 12px; padding-top: 20px; border-top: 1px solid rgba(42,42,42,.12); }
.about-signoff span { font: 400 25px/1 var(--font-story); }
.about-signoff small { color: var(--slate-500); font: 500 10px/1 var(--font-utility); letter-spacing: .1em; text-transform: uppercase; }

.contact-section { position: relative; overflow: hidden; padding: 126px 0; background: var(--bg-page-dark); text-align: center; }
.contact-orb { position: absolute; top: 50%; left: 50%; width: 520px; height: 520px; border: 1px solid rgba(169,50,255,.18); border-radius: 50%; box-shadow: 0 0 120px rgba(169,50,255,.1), inset 0 0 100px rgba(255,90,19,.05); transform: translate(-50%,-50%); }
.contact-orb::before, .contact-orb::after { position: absolute; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; content: ""; }
.contact-orb::before { inset: 70px; }
.contact-orb::after { inset: 145px; }
.contact-inner { position: relative; display: grid; justify-items: center; gap: 22px; }
.contact-inner > p:not(.eyebrow) { color: var(--slate-400); font-size: 18px; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
footer { padding: 24px 0; border-top: 1px solid var(--border-card); background: var(--bg-footer); color: var(--slate-400); font-size: 12px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-inner .brand-logo { color: #fff; font-size: 15px; }
.footer-inner .brand-logo span { font-size: 9px; }

.project-dialog { width: min(960px,calc(100% - 36px)); max-height: calc(90svh); overflow: auto; padding: 36px 36px 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: #231230; color: #fff; box-shadow: 0 25px 60px rgba(0,0,0,.85); }
.project-dialog::backdrop { background: rgba(15,5,20,.78); backdrop-filter: blur(8px); }
.dialog-content-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: start; gap: 36px; }
.dialog-col-left { display: flex; min-height: 100%; flex-direction: column; gap: 20px; }
.dialog-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-card); background: #000; }
.dialog-player::after { position: absolute; z-index: 2; inset: 0; background: linear-gradient(135deg, rgba(27,8,38,.12), rgba(27,8,38,.5)); content: ""; pointer-events: none; }
.dialog-player img { width: 100%; height: 100%; object-fit: cover; }
.dialog-player iframe { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.dialog-play-mark { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--plum-950); box-shadow: 0 4px 20px rgba(0,0,0,.4); transform: translate(-50%,-50%); }
.dialog-synopsis { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.dialog-label { color: var(--slate-400); font: 600 11px/1.2 var(--font-utility); letter-spacing: .08em; text-transform: uppercase; }
.dialog-synopsis p { margin: 0; color: var(--cloud-200); font-size: 14.5px; line-height: 1.6; white-space: pre-line; }
.dialog-col-right { display: flex; min-height: 100%; flex-direction: column; }
.dialog-info-header { display: grid; gap: 8px; padding-right: 36px; }
.dialog-info-header > p:first-child { color: var(--orange-500); font: 500 10px/1.4 var(--font-utility); letter-spacing: .1em; text-transform: uppercase; }
.dialog-info-header h2 { font: 700 34px/1.15 var(--font-heading); letter-spacing: -.045em; }
.dialog-role { color: var(--slate-400); font: 400 13.5px/1.4 var(--font-utility); }
.dialog-role span { color: var(--cloud-200); font-weight: 500; }
.dialog-specs { display: grid; gap: 12px; margin: 18px 0 24px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.dialog-spec { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; }
.dialog-spec-label { color: var(--slate-400); font: 500 11px/1.3 var(--font-utility); letter-spacing: .06em; text-transform: uppercase; }
.dialog-spec-value { color: var(--cloud-200); font-size: 14px; line-height: 1.4; }
.dialog-actions { margin-top: auto; padding-top: 8px; }
.dialog-actions .btn { width: 100%; }
.dialog-close { position: absolute; z-index: 2; top: 20px; right: 20px; display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; background: rgba(255,255,255,.08); color: var(--cloud-200); cursor: pointer; transition: .25s ease; }
.dialog-close:hover { background: rgba(255,255,255,.2); color: #fff; transform: rotate(90deg); }

@keyframes drift { from { transform: scale(1.04) translate3d(-.4%,-.3%,0); } to { transform: scale(1.09) translate3d(.4%,.3%,0); } }
@keyframes bounce { 50% { transform: translateY(5px); } }

@media (max-width: 980px) {
  .nav-menu, .nav-cta { display: none; }
  .menu-toggle { display: flex; }
  .hero { padding-top: 132px; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { justify-items: center; }
  .hero h1 { font-size: clamp(64px,14vw,100px); }
  .hero-visual { width: min(78vw,430px); margin-top: -22px; }
  .director-tag { left: 0; }
  .scroll-note { display: none; }
  .section-intro, .approach-grid { grid-template-columns: 1fr; gap: 34px; }
  .featured-project { grid-template-columns: 1fr; }
  .project-image { min-height: 430px; }
  .project-copy { padding: 34px; }
  .about-panel { grid-template-columns: minmax(250px,.72fr) 1fr; gap: 38px; padding: 32px; }
}

@media (max-width: 680px) {
  .container { width: min(100% - 34px,var(--max-content-width)); }
  .site-header { padding: 12px 0; }
  .brand-logo { font-size: 16px; }
  .hero { min-height: auto; padding: 116px 0 70px; }
  .hero-grid { gap: 26px; }
  .hero-copy { gap: 17px; }
  .hero h1 { font-size: clamp(56px,20vw,82px); }
  .hero-lead { font-size: 18px; }
  .hero-actions { justify-content: center; }
  .hero-actions .btn { padding-inline: 15px; }
  .hero-visual { width: min(92vw,390px); }
  .director-tag { bottom: 7%; padding: 10px 12px; }
  .work-section, .approach-section { padding: 76px 0; }
  .section-intro { margin-bottom: 34px; }
  .section-intro h2, .approach-heading h2, .contact-inner h2 { font-size: clamp(36px,11vw,50px); }
  .section-intro > p { font-size: 16px; }
  .project-image { min-height: 300px; }
  .project-copy { padding: 26px 22px 30px; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card, .work-card.wide { grid-column: auto; min-height: 320px; }
  .card-overlay { inset: auto 20px 20px; }
  .approach-steps article { grid-template-columns: 38px 1fr; gap: 12px; }
  .about-section { padding: 18px 0; }
  .about-panel { grid-template-columns: 1fr; gap: 28px; padding: 18px; border-radius: 20px; }
  .about-image { height: min(108vw,430px); }
  .about-image span { right: 10px; }
  .about-copy { display: grid; padding: 0 3px 10px; gap: 19px; }
  .about-copy-lead, .about-copy-lower { grid-column: auto; }
  .about-copy-lower { gap: 19px; }
  .about-copy h2 { font-size: clamp(36px,10.5vw,48px); }
  .about-copy p:not(.pill) { font-size: 16px; }
  .contact-section { padding: 100px 0; }
  .contact-orb { width: 360px; height: 360px; }
  .footer-inner { flex-wrap: wrap; justify-content: center; }
  .project-dialog { max-height: 94svh; padding: 28px 20px 24px; }
  .dialog-content-grid { grid-template-columns: 1fr; gap: 22px; }
  .dialog-synopsis { grid-column: auto; }
  .dialog-info-header { padding-right: 0; }
}

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