:root {
  --ink: #02070c;
  --navy: #030b14;
  --navy-light: #081c2d;
  --blue: #128bd0;
  --cyan: #57d8ff;
  --violet: #746eff;
  --white: #f4f8ff;
  --muted: #9eb1c5;
  --line: rgba(144, 210, 255, .17);
  --glass: rgba(7, 20, 35, .55);
  --shell: min(1180px, calc(100vw - 64px));
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--white); background: radial-gradient(circle at 75% -5%, rgba(16, 139, 208, .18), transparent 29rem), radial-gradient(circle at 4% 54%, rgba(76, 87, 255, .12), transparent 33rem), var(--ink); font-family: "Plus Jakarta Sans", Inter, Arial, sans-serif; }
body.menu-open, body.is-intro-active { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Simple logo arrival */
.site-header, main, .footer { transition: opacity 600ms var(--ease); }
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #02050a; }
.intro__core { width: min(300px, 58vw); text-align: center; opacity: 0; transform: translateY(12px) scale(.94); animation: intro-logo 720ms var(--ease) 120ms forwards; }
.intro__core img { display: block; width: 100%; mix-blend-mode: screen; filter: drop-shadow(0 0 24px rgba(68, 210, 255, .38)); }
.intro__core p { margin: 13px 0 0; color: rgba(204, 236, 255, .67); font: 600 8px/1 "Space Grotesk", sans-serif; letter-spacing: .28em; text-transform: uppercase; opacity: 0; animation: intro-tagline 420ms ease 720ms forwards; }
.intro__line { display: block; width: 0; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 13px var(--cyan); animation: intro-line 600ms var(--ease) 570ms forwards; }
.intro__skip { display: none; }
.intro.is-exiting { animation: intro-fade 520ms var(--ease) forwards; }
body.is-intro-active .site-header, body.is-intro-active main, body.is-intro-active .footer { opacity: 0; }

@keyframes intro-logo { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes intro-tagline { to { opacity: 1; } }
@keyframes intro-line { to { width: 78%; } }
@keyframes intro-fade { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Ambient depth */
#atmosphere { position: fixed; z-index: -5; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .7; }
.page-orb { position: absolute; z-index: -4; width: min(65vw, 860px); aspect-ratio: 1; border-radius: 50%; filter: blur(86px); pointer-events: none; opacity: .25; animation: orb-drift 15s ease-in-out infinite alternate; }
.page-orb--one { top: 30rem; right: -32vw; background: rgba(4, 158, 255, .74); }.page-orb--two { top: 124rem; left: -36vw; background: rgba(104, 79, 255, .63); animation-delay: -7s; }
.light-beams { position: fixed; z-index: -3; inset: 0; overflow: hidden; pointer-events: none; }
.light-beams i { position: absolute; display: block; width: 31vw; height: 140vh; top: -22vh; border-left: 1px solid rgba(107, 222, 255, .16); background: linear-gradient(90deg, rgba(54, 190, 255, .11), transparent 60%); filter: blur(3px); transform: rotate(24deg); animation: beam-drift 18s ease-in-out infinite alternate; }
.light-beams i:nth-child(1) { left: -9vw; }.light-beams i:nth-child(2) { left: 54vw; opacity: .48; transform: rotate(21deg); animation-delay: -7s; }.light-beams i:nth-child(3) { left: 79vw; opacity: .32; transform: rotate(15deg); animation-delay: -12s; }
.mouse-glow { position: fixed; z-index: 5; left: 0; top: 0; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0); background: radial-gradient(circle, rgba(53, 198, 255, .16), rgba(50, 135, 255, .07) 35%, transparent 70%); filter: blur(10px); transition: opacity .45s ease; }
.mouse-glow.is-visible { opacity: 1; }
@keyframes orb-drift { to { transform: translate3d(-4vw, 10rem, 0) scale(1.13); } }
@keyframes beam-drift { to { translate: 12vw 6vh; rotate: 4deg; } }

/* Header */
.site-header { position: fixed; z-index: 30; top: 0; width: 100%; border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.site-header.is-scrolled { background: rgba(3, 10, 19, .72); backdrop-filter: blur(19px) saturate(1.35); border-color: rgba(130, 207, 255, .13); box-shadow: 0 9px 38px rgba(0, 0, 0, .2); }
.nav { min-height: 86px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; flex: 0 0 auto; width: 210px; align-items: center; }.brand__logo { display: block; width: 100%; mix-blend-mode: screen; filter: drop-shadow(0 0 10px rgba(33, 186, 255, .16)); }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 38px); margin-left: auto; }.nav-links a { position: relative; padding: 10px 1px; color: #cad7e8; font-size: 11px; font-weight: 700; transition: color .2s ease, transform .25s var(--ease); }.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 0; height: 1px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); transform: translateX(-50%); transition: width .3s var(--ease); }.nav-links a:hover, .nav-links a.is-active { color: var(--white); transform: translateY(-2px); }.nav-links a:hover::after, .nav-links a.is-active::after { width: 100%; }
.nav-toggle { display: none; }
.scroll-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; overflow: hidden; }.scroll-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--violet)); box-shadow: 0 0 10px var(--cyan); }

/* Buttons */
.premium-action, .button { position: relative; isolation: isolate; overflow: hidden; transition: transform .32s var(--ease), box-shadow .32s ease, border-color .32s ease, background .32s ease; }
.premium-action::before, .button::before { content: ""; position: absolute; z-index: -1; width: 18%; aspect-ratio: 1; top: var(--ripple-y, 50%); left: var(--ripple-x, 50%); border-radius: 50%; background: rgba(255, 255, 255, .38); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.premium-action.is-rippling::before, .button.is-rippling::before { animation: ripple .7s ease-out; }
.premium-action:hover, .button:hover { transform: translateY(-3px) scale(1.025); }
.nav-cta, .footer__book { display: inline-flex; align-items: center; gap: 10px; margin-left: 16px; padding: 5px 6px 5px 15px; border: 1px solid rgba(91, 205, 255, .58); border-radius: 999px; color: var(--white); background: linear-gradient(100deg, rgba(14, 68, 109, .82), rgba(12, 21, 53, .82)); box-shadow: 0 0 26px rgba(19, 170, 255, .16), inset 0 1px rgba(255,255,255,.14); font-size: 11px; font-weight: 700; }.nav-cta:hover, .footer__book:hover { border-color: var(--cyan); box-shadow: 0 12px 28px rgba(0, 145, 255, .2), 0 0 25px rgba(46, 203, 255, .23); }.nav-cta b, .footer__book b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); transition: transform .3s var(--ease); }.nav-cta:hover b, .footer__book:hover b { transform: translate(2px, -2px); }
.button { display: inline-flex; min-height: 51px; align-items: center; gap: 14px; padding: 5px 7px 5px 18px; border: 1px solid transparent; border-radius: 999px; color: var(--white); font-size: 12px; font-weight: 700; cursor: pointer; }.button__label { display: inline-flex; align-items: center; gap: 9px; }.button > b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; font-size: 16px; transition: transform .32s var(--ease), background .32s ease; }.button:hover > b { transform: translateX(3px); }.button--primary { background: linear-gradient(105deg, #078dd2, #31b7f3 55%, #6d6df2); box-shadow: 0 12px 29px rgba(0, 164, 238, .27), inset 0 1px rgba(255,255,255,.31); }.button--primary > b { background: rgba(5, 43, 83, .28); }.button--primary:hover { box-shadow: 0 16px 34px rgba(0, 172, 255, .38), 0 0 30px rgba(30, 198, 255, .24); }.button--ghost { border-color: rgba(179, 222, 255, .36); background: rgba(8, 23, 42, .42); box-shadow: inset 0 1px rgba(255,255,255,.06); }.button--ghost > b { color: var(--cyan); }.button--ghost:hover { border-color: rgba(95, 215, 255, .76); background: rgba(13, 87, 134, .28); }.button--large { margin-top: 7px; min-height: 58px; padding-left: 21px; }.button--large > b { width: 40px; height: 40px; }
.play-triangle { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
@keyframes ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: .62; } 100% { transform: translate(-50%, -50%) scale(14); opacity: 0; } }

/* Hero */
.hero { display: grid; min-height: 760px; grid-template-columns: minmax(330px, .84fr) minmax(480px, 1.16fr); align-items: center; gap: clamp(38px, 6vw, 100px); padding-top: 128px; }
.hero__copy { position: relative; z-index: 2; padding-bottom: 8px; }.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #c7d8e9; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px 3px rgba(55, 211, 255, .58); }
h1, h2, h3, p { margin-top: 0; } h1, h2, h3, .hero-rotator { font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; }
.hero-rotator { display: flex; min-height: 2.03em; max-width: 680px; align-items: flex-start; margin-bottom: 22px; font-size: clamp(52px, 5.65vw, 85px); font-weight: 700; letter-spacing: -.077em; line-height: .97; }.hero-rotator__word { display: inline-block; color: var(--white); text-wrap: balance; animation: word-in 500ms var(--ease); }.hero-rotator__word.is-accent { color: transparent; background: linear-gradient(100deg, #50bfff, #5ee4ff 43%, #a28bff); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 30px rgba(46, 199, 255, .16); }
.hero__lede { max-width: 475px; margin-bottom: 30px; color: #aec0d1; font-size: 14px; line-height: 1.82; }.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }.hero__micro { display: flex; align-items: center; gap: 9px; margin-top: 29px; color: #8196ae; font-size: 9px; }.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(66, 211, 255, .66); animation: pulse 2.2s infinite; }
@keyframes word-in { from { opacity: 0; transform: translateY(18px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(66, 211, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(66, 211, 255, 0); } }
.hero-stage { position: relative; width: min(100%, 730px); justify-self: end; }.hero-video { position: relative; z-index: 2; isolation: isolate; }.hero-video__glow { position: absolute; z-index: -1; top: 7%; left: 12%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(37, 189, 255, .34), rgba(91, 92, 255, .16) 38%, transparent 69%); filter: blur(33px); animation: hero-glow 5s ease-in-out infinite alternate; }.hero-video__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid rgba(132, 222, 255, .53); border-radius: clamp(19px, 2vw, 29px); background: #061424; box-shadow: 0 34px 72px rgba(0,0,0,.42), 0 0 0 1px rgba(121,183,255,.11) inset, 0 0 58px rgba(7, 162, 243, .2); transition: transform .6s var(--ease), box-shadow .6s ease; }.hero-video:hover .hero-video__frame { transform: translateY(-7px) scale(1.01); box-shadow: 0 40px 78px rgba(0,0,0,.48), 0 0 70px rgba(13, 184, 255, .31); }.hero-video__frame::before { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 18%, transparent 70%, rgba(119,102,255,.19)); mix-blend-mode: screen; }.hero-video__media { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }.hero-video.is-ready .hero-video__media { opacity: 1; }.hero-video.is-ready .hero-video__fallback { opacity: 0; }.hero-video__fallback { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: radial-gradient(circle at 75% 25%, rgba(45, 201, 255, .74), transparent 13%), radial-gradient(circle at 29% 76%, rgba(111, 87, 255, .52), transparent 31%), linear-gradient(133deg, #071a36, #071224 48%, #030816); transition: opacity .45s ease; }.hero-video__fallback::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 13%, rgba(81,204,255,.08) 13.15% 13.35%, transparent 13.5% 27%), linear-gradient(180deg, transparent 55%, rgba(2,5,16,.78)); }.hero-video__fallback::after { content: ""; position: absolute; width: 62%; aspect-ratio: 1; top: 13%; left: 20%; border: 1px solid rgba(128,222,255,.32); border-radius: 50%; box-shadow: 0 0 75px rgba(35,190,255,.26), inset 0 0 42px rgba(112,91,255,.18); }.hero-video__eyebrow, .hero-video__time, .hero-video__title, .hero-video__status { position: absolute; z-index: 2; font-family: "Space Grotesk", sans-serif; }.hero-video__eyebrow { top: 8%; left: 7%; color: rgba(219,243,255,.76); font-size: clamp(8px, .65vw, 11px); letter-spacing: .12em; text-transform: uppercase; }.hero-video__time { top: 8%; right: 7%; color: var(--cyan); font-size: clamp(8px, .65vw, 11px); letter-spacing: .12em; }.hero-video__title { bottom: 9%; left: 7%; color: #f5f8ff; font-size: clamp(23px, 2.6vw, 43px); font-weight: 600; letter-spacing: -.07em; line-height: .96; text-shadow: 0 5px 25px rgba(0,0,0,.48); }.hero-video__cut { position: absolute; z-index: 1; display: block; border: 1px solid rgba(118,220,255,.35); background: linear-gradient(135deg, rgba(35,202,255,.12), rgba(75,89,255,.05)); box-shadow: 0 0 28px rgba(37,181,255,.16); }.hero-video__cut--one { top: 18%; right: 8%; width: 36%; aspect-ratio: 1.7; transform: rotate(-14deg); }.hero-video__cut--two { top: 36%; left: 31%; width: 28%; aspect-ratio: 1; border-radius: 50%; transform: rotate(19deg); }.hero-video__cut--three { right: 1%; bottom: -10%; width: 39%; aspect-ratio: 1.7; transform: rotate(-26deg); }.hero-video__status { right: 7%; bottom: 9%; color: rgba(194,225,246,.72); font-size: clamp(7px, .58vw, 10px); letter-spacing: .1em; text-transform: uppercase; }.hero-video__status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }.hero-video__play { position: absolute; z-index: 6; top: 50%; left: 50%; display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid rgba(206, 243, 255, .8); border-radius: 50%; color: #fff; background: rgba(3, 19, 43, .6); box-shadow: 0 0 0 9px rgba(69,192,255,.08), 0 0 34px rgba(21,180,255,.5); backdrop-filter: blur(11px); cursor: pointer; transform: translate(-50%, -50%); transition: background .3s ease, box-shadow .3s ease, scale .3s var(--ease); }.hero-video__play:hover { scale: 1.12; background: rgba(12,139,231,.7); box-shadow: 0 0 0 12px rgba(69,192,255,.11), 0 0 48px rgba(21,180,255,.78); }
.floating-frame { position: absolute; z-index: 3; width: clamp(105px, 13vw, 166px); aspect-ratio: 16 / 10; margin: 0; overflow: hidden; border: 1px solid rgba(167, 226, 255, .3); border-radius: 12px; background: linear-gradient(135deg, rgba(89, 208, 255, .2), rgba(20, 29, 77, .42)); box-shadow: 0 18px 38px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.16); backdrop-filter: blur(12px); animation: frame-float 6s ease-in-out infinite alternate; }.floating-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 23%, transparent 74%, rgba(122, 100, 255, .24)); }.floating-frame span { position: absolute; z-index: 2; left: 11px; bottom: 9px; color: #e5f8ff; font: 600 7px/1 "Space Grotesk", sans-serif; letter-spacing: .12em; text-transform: uppercase; }.floating-frame i { position: absolute; top: 13%; left: 19%; width: 60%; aspect-ratio: 1; border: 1px solid rgba(125, 226, 255, .55); border-radius: 50%; box-shadow: 0 0 25px rgba(32, 184, 255, .4); }.floating-frame--one { top: -6%; right: -5%; transform: rotate(8deg); }.floating-frame--two { bottom: -8%; left: -10%; width: clamp(100px, 12vw, 152px); transform: rotate(-9deg); animation-delay: -3s; }.floating-frame--two i { border-radius: 13px; transform: rotate(28deg); }.hero-stage:hover .floating-frame--one { animation-play-state: paused; }
.hero-video__play[hidden], .work-card__play[hidden] { display: none !important; }
@keyframes hero-glow { to { transform: scale(1.13) translate(3%, -4%); opacity: .7; } } @keyframes frame-float { to { translate: 0 -11px; } }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -12px; padding: 27px 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(105deg, rgba(13,29,52,.7), rgba(7,15,33,.44)); box-shadow: 0 20px 52px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(15px); }.stats article { position: relative; display: flex; align-items: center; gap: 14px; padding: 0 clamp(10px, 2vw, 29px); }.stats article:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 44px; background: linear-gradient(transparent, rgba(151,196,255,.26), transparent); transform: translateY(-50%); }.stat-icon { display: grid; flex: 0 0 auto; width: 41px; height: 41px; place-items: center; border: 1px solid rgba(51,214,255,.3); border-radius: 50%; color: var(--cyan); background: radial-gradient(circle at 30% 20%, rgba(34,206,255,.2), rgba(6,20,52,.5)); box-shadow: 0 0 17px rgba(0,174,239,.14); font-size: 19px; animation: icon-pulse 2.8s ease-in-out infinite alternate; }.stats article:nth-child(2) .stat-icon { color: #a68fff; border-color: rgba(166, 139, 255, .37); animation-delay: -1.1s; }.stats strong { display: block; font: 700 29px/1 "Space Grotesk", sans-serif; letter-spacing: -.08em; }.stats strong span { color: var(--cyan); }.stats small { display: block; margin-top: 5px; color: #9cacbf; font-size: 9px; white-space: nowrap; } @keyframes icon-pulse { to { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 24px rgba(0,174,239,.3); } }

/* Shared sections and services */
.services, .works, .contact { padding-top: 150px; }.section-heading { max-width: 660px; }.section-heading--center { margin-inline: auto; text-align: center; }.section-heading--center .eyebrow { justify-content: center; }.section-heading h2 { margin-bottom: 16px; font-size: clamp(38px, 4vw, 59px); letter-spacing: -.075em; line-height: .98; }.section-heading h2 em, .contact h2 em { color: transparent; background: linear-gradient(100deg, #42b7ff, #5de4ff 43%, #9b86ff); -webkit-background-clip: text; background-clip: text; font-style: normal; }.section-heading > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }.section-heading--center { margin-bottom: 45px; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }.service-card { position: relative; min-width: 0; overflow: hidden; aspect-ratio: 16 / 11.3; border: 1px solid rgba(142,202,255,.17); border-radius: 17px; background: var(--glass); box-shadow: 0 14px 36px rgba(0,0,0,.16); cursor: pointer; isolation: isolate; transition: transform .5s var(--ease), border-color .5s ease, box-shadow .5s ease; }.service-card::before { content: ""; position: absolute; z-index: 3; inset: -1px; border-radius: inherit; padding: 1px; opacity: 0; pointer-events: none; background: radial-gradient(180px circle at var(--x,50%) var(--y,50%), rgba(51,214,255,.92), rgba(84,112,255,.38) 34%, transparent 67%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .35s ease; }.service-card:hover { border-color: rgba(68,215,255,.52); box-shadow: 0 25px 50px rgba(0,0,0,.32), 0 0 28px rgba(0,174,239,.14); transform: translateY(-8px); }.service-card:hover::before { opacity: .92; }.service-art { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 68% 35%, var(--art-strong, rgba(33,190,255,.58)), transparent 25%), radial-gradient(circle at 32% 95%, var(--art-soft, rgba(94,70,255,.56)), transparent 53%), linear-gradient(145deg, #0d2049, #070b1d 68%); transition: transform .75s var(--ease); }.service-card:hover .service-art { transform: scale(1.11); }.service-art::before, .service-art::after { content: ""; position: absolute; border: 1px solid rgba(150,229,255,.46); background: linear-gradient(135deg, rgba(104,225,255,.13), rgba(42,62,182,.06)); box-shadow: 0 0 28px rgba(22,185,255,.25); }.service-art::before { top: -10%; right: -7%; width: 45%; aspect-ratio: 1; border-radius: 50%; }.service-art::after { bottom: 5%; left: 11%; width: 36%; aspect-ratio: 1.5; border-radius: 12px; transform: rotate(-16deg); }.service-art i { position: absolute; top: -34%; left: 48%; display: block; width: 2px; height: 150%; opacity: .43; background: linear-gradient(transparent, rgba(51,214,255,.8), transparent); transform: rotate(43deg); }.service-art i:nth-child(2) { left: 73%; transform: rotate(65deg); }.service-art i:nth-child(3) { left: 23%; opacity: .22; transform: rotate(18deg); }.art-label { position: absolute; top: 17px; left: 18px; color: rgba(224,245,255,.72); font: 500 8px "Space Grotesk", sans-serif; letter-spacing: .1em; text-transform: uppercase; }.service-card--wedding { --art-strong: rgba(134,127,255,.54); --art-soft: rgba(0,174,239,.4); }.service-card--youtube { --art-strong: rgba(0,174,239,.7); --art-soft: rgba(49,83,255,.5); }.service-card--reels { --art-strong: rgba(51,214,255,.62); --art-soft: rgba(120,81,255,.46); }.service-card--commercial { --art-strong: rgba(98,125,255,.66); --art-soft: rgba(0,174,239,.3); }.service-card--podcast { --art-strong: rgba(51,214,255,.45); --art-soft: rgba(106,82,255,.58); }.service-card--product { --art-strong: rgba(0,174,239,.46); --art-soft: rgba(67,91,255,.66); }.service-card--event { --art-strong: rgba(115,91,255,.65); --art-soft: rgba(0,174,239,.38); }.service-card__content { position: absolute; z-index: 2; inset: auto 0 0; min-height: 42%; padding: 28px 18px 17px; background: linear-gradient(transparent, rgba(3,6,18,.9) 25%, rgba(3,6,18,.98)); transform: translateY(13px); transition: transform .5s var(--ease); }.service-card:hover .service-card__content { transform: translateY(0); }.service-card__content p { margin-bottom: 5px; color: var(--cyan); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: .35s ease .05s; }.service-card:hover .service-card__content p, .service-card:hover .service-card__content > span { opacity: 1; transform: translateY(0); }.service-card__content h3 { margin: 0; font-size: 20px; letter-spacing: -.055em; }.service-card__content > span { display: block; margin-top: 6px; color: #bdcadc; font-size: 10px; line-height: 1.5; opacity: 0; transition: opacity .35s ease .1s; }.card-play { position: absolute; right: 17px; bottom: 17px; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(51,214,255,.42); border-radius: 50%; color: var(--cyan); background: rgba(9,24,58,.72); font-size: 9px; opacity: 0; transform: scale(.7); transition: .4s var(--ease); }.service-card:hover .card-play { opacity: 1; transform: scale(1); }

/* Latest works */
.works__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 37px; }.works__top .eyebrow { margin-bottom: 12px; }.works__top h2 { margin-bottom: 0; font-size: clamp(38px, 4vw, 58px); }.text-link { padding-bottom: 7px; border-bottom: 1px solid rgba(176,218,255,.35); color: #e4efff; font-size: 11px; font-weight: 700; transition: color .25s ease, border-color .25s ease; }.text-link b { margin-left: 5px; color: var(--cyan); font-size: 15px; }.text-link:hover { border-color: var(--cyan); color: var(--cyan); }
.work-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 25px); }.work-card { position: relative; min-height: clamp(320px, 32vw, 450px); overflow: hidden; border: 1px solid rgba(142,202,255,.22); border-radius: 22px; background: #061121; box-shadow: 0 20px 45px rgba(0,0,0,.2); isolation: isolate; transition: transform .6s var(--ease), border-color .5s ease, box-shadow .6s ease; }.work-card--featured { grid-row: span 2; min-height: 100%; }.work-card--wide { grid-column: span 2; min-height: clamp(320px, 38vw, 470px); }.work-card:hover { z-index: 2; border-color: rgba(96,216,255,.69); box-shadow: 0 30px 70px rgba(0,0,0,.37), 0 0 38px rgba(0,174,239,.17); transform: translateY(-8px); }.work-card__visual, .work-card__visual video, .work-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; }.work-card__visual { overflow: hidden; }.work-card__visual video { z-index: 2; object-fit: cover; opacity: 0; transition: opacity .45s ease, transform 1.4s var(--ease); }.work-card.is-ready .work-card__visual video { opacity: 1; }.work-card:hover .work-card__visual video { transform: scale(1.045); }.work-card__poster { display: grid; z-index: 1; align-content: center; justify-items: center; gap: 18px; padding: 28px; overflow: hidden; color: rgba(230, 247, 255, .7); background: radial-gradient(circle at 51% 38%, var(--work-glow, rgba(51,214,255,.54)), transparent 15%), linear-gradient(140deg, var(--work-a, #1b416e), var(--work-b, #060913) 72%); font: 600 clamp(11px, 1.2vw, 15px) "Space Grotesk", sans-serif; letter-spacing: .12em; text-transform: uppercase; transition: transform 1s var(--ease), opacity .5s ease; }.work-card.is-ready .work-card__poster { opacity: 0; }.work-card:hover .work-card__poster { transform: scale(1.08); }.work-card__poster::before { content: ""; position: absolute; width: 150%; height: 48%; top: 31%; left: -24%; border-block: 1px solid rgba(193,239,255,.34); background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(51,214,255,.13) 17px 18px); transform: rotate(-29deg); }.work-card__poster i { display: block; width: clamp(78px, 10vw, 138px); aspect-ratio: 1; border: 1px solid rgba(213, 248, 255, .45); border-radius: 50%; background: radial-gradient(circle at 31% 26%, #e7fbff, var(--work-core, #37abdf) 25%, #0d2a61 64%, #070a1c); box-shadow: 0 0 37px var(--work-glow, rgba(51,214,255,.4)); transform: translateY(-5px); }.work-card__poster span { position: relative; z-index: 1; text-shadow: 0 3px 15px #02050c; }.work-card__duration { position: absolute; z-index: 5; top: 18px; right: 18px; padding: 5px 7px; border: 1px solid rgba(219,243,255,.22); border-radius: 5px; color: #d8e8f5; background: rgba(3, 8, 21, .6); backdrop-filter: blur(7px); font-size: 8px; font-weight: 700; letter-spacing: .08em; }.work-card__overlay { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; min-height: 48%; padding: clamp(24px, 3vw, 40px); background: linear-gradient(transparent, rgba(2,6,15,.78) 35%, rgba(2,6,15,.96)); transform: translateY(31px); transition: transform .55s var(--ease); }.work-card:hover .work-card__overlay { transform: translateY(0); }.work-card__overlay p { margin-bottom: 8px; color: var(--cyan); font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; opacity: .2; transform: translateY(12px); transition: .4s var(--ease) .05s; }.work-card__overlay h3 { margin: 0; font-size: clamp(27px, 3vw, 46px); letter-spacing: -.07em; line-height: .95; }.work-card__overlay > span { display: block; max-width: 310px; margin-top: 10px; color: #c5d4e1; font-size: 11px; line-height: 1.6; opacity: 0; transform: translateY(12px); transition: .4s var(--ease) .1s; }.work-card__overlay > b { display: inline-flex; align-items: center; gap: 8px; margin-top: 17px; color: #e8f8ff; font-size: 10px; letter-spacing: .05em; opacity: 0; transform: translateY(12px); transition: .4s var(--ease) .15s; }.work-card__overlay > b i { color: var(--cyan); font-size: 15px; font-style: normal; transition: transform .3s var(--ease); }.work-card:hover .work-card__overlay p, .work-card:hover .work-card__overlay > span, .work-card:hover .work-card__overlay > b { opacity: 1; transform: translateY(0); }.work-card:hover .work-card__overlay > b i { transform: translateX(3px); }.work-card--eternal { --work-a: #344451; --work-b: #11131c; --work-glow: rgba(94, 210, 255, .48); --work-core: #8fc0cd; }.work-card--corporate { --work-a: #3c6191; --work-b: #101b31; --work-glow: rgba(75,146,255,.49); --work-core: #7ca8e2; }.work-card--product { --work-a: #2c3444; --work-b: #05070f; --work-glow: rgba(112,137,255,.4); --work-core: #a3aec4; }.work-card--wander { --work-a: #3f7791; --work-b: #142541; --work-glow: rgba(51,214,255,.46); --work-core: #a0cadb; }.work-card--beat { --work-a: #40235b; --work-b: #110b22; --work-glow: rgba(140,93,255,.5); --work-core: #ce91e4; }.work-card--wide .work-card__poster { justify-items: start; padding-left: 11%; }.work-card--wide .work-card__poster i { position: absolute; right: 19%; width: clamp(110px, 15vw, 180px); }

.work-card__play { position: absolute; z-index: 8; top: 50%; left: 50%; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(226, 248, 255, .78); border-radius: 50%; color: #fff; background: rgba(3, 21, 43, .58); box-shadow: 0 0 0 8px rgba(69,192,255,.08), 0 0 31px rgba(21,180,255,.45); backdrop-filter: blur(10px); cursor: pointer; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); transition: opacity .3s ease, transform .3s var(--ease), background .3s ease; }.work-card:hover .work-card__play, .work-card:focus-within .work-card__play { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }.work-card__play:hover { background: rgba(12,139,231,.72); }

/* Contact and footer */
.contact__panel { position: relative; overflow: hidden; padding: clamp(62px, 8vw, 105px) 24px; border: 1px solid rgba(105,207,255,.27); border-radius: 24px; text-align: center; background: radial-gradient(circle at 50% 40%, rgba(12,128,204,.28), transparent 31%), linear-gradient(130deg, rgba(11,31,59,.84), rgba(5,10,27,.86)); box-shadow: 0 26px 65px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.08); }.contact__panel > :not([aria-hidden]) { position: relative; z-index: 2; }.contact .eyebrow { justify-content: center; }.contact h2 { max-width: 630px; margin: 0 auto 17px; font: 700 clamp(43px, 5vw, 75px)/.98 "Space Grotesk", sans-serif; letter-spacing: -.075em; }.contact h2 + p { max-width: 440px; margin: 0 auto 26px; color: #b4c5d5; font-size: 13px; line-height: 1.75; }.contact__starfield { position: absolute; inset: 0; opacity: .68; background-image: radial-gradient(circle at 12% 20%, #a9e9ff 0 1px, transparent 1.6px), radial-gradient(circle at 62% 30%, #b6a4ff 0 1px, transparent 1.4px), radial-gradient(circle at 84% 70%, #a9e9ff 0 1px, transparent 1.6px), radial-gradient(circle at 30% 81%, #a9e9ff 0 1px, transparent 1.5px); background-size: 170px 160px, 210px 190px, 180px 170px, 220px 200px; animation: stars 15s linear infinite; }.contact__line { position: absolute; z-index: 1; width: 140%; height: 1px; left: -20%; background: linear-gradient(90deg, transparent, rgba(80,215,255,.55), transparent); transform: rotate(-13deg); animation: streak 6s ease-in-out infinite; }.contact__line--one { top: 22%; }.contact__line--two { top: 68%; animation-delay: -3s; }.footer { padding-top: 78px; }.footer__top { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 9vw, 150px); padding-bottom: 52px; border-bottom: 1px solid rgba(149,203,255,.13); }.footer__brand .brand { width: 213px; }.footer__brand p { max-width: 325px; margin: 19px 0; color: #8fa3ba; font-size: 11px; line-height: 1.8; }.socials { display: flex; gap: 8px; }.socials a { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(152,205,255,.18); border-radius: 50%; color: #b9cce0; font-size: 9px; transition: .25s ease; }.socials a:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-3px); }.footer__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }.footer__links h3 { margin: 3px 0 16px; color: #dbe8f4; font-size: 11px; letter-spacing: -.02em; }.footer__links a, .footer__links span { display: block; margin: 0 0 10px; color: #879bb3; font-size: 10px; transition: color .2s ease; }.footer__links a:hover { color: var(--cyan); }.footer__links .footer__book { display: inline-flex; margin: 11px 0 0; padding-left: 11px; font-size: 9px; }.footer__book b { width: 21px; height: 21px; }.footer__bottom { display: flex; justify-content: space-between; padding: 20px 0 27px; color: #6f8299; font-size: 9px; }.footer__bottom a { color: #9ab3ce; transition: color .2s ease; }.footer__bottom a:hover { color: var(--cyan); }
@keyframes stars { to { background-position: 101px -87px, -153px 123px, 99px -128px, -141px -105px; } } @keyframes streak { 0% { translate: -30% 0; opacity: 0; } 20%, 70% { opacity: .7; } 100% { translate: 30% 0; opacity: 0; } }

[data-reveal] { opacity: 0; transform: translateY(28px); filter: blur(7px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s ease; }.is-revealed { opacity: 1; transform: translateY(0); filter: blur(0); }
main > section[id], footer[id] { scroll-margin-top: 106px; }

@media (max-width: 1050px) { :root { --shell: calc(100vw - 48px); }.hero { min-height: auto; grid-template-columns: minmax(300px, .88fr) minmax(390px, 1.12fr); padding-top: 120px; gap: 34px; }.service-grid { grid-template-columns: repeat(2, 1fr); }.work-card { min-height: 340px; }.floating-frame--two { left: -3%; }.stats article { padding-inline: 13px; } }
@media (max-width: 860px) { .nav { min-height: 76px; }.brand { width: 184px; }.nav-cta { display: none; }.nav-toggle { position: relative; z-index: 2; display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin-left: auto; border: 1px solid rgba(148,213,255,.3); border-radius: 50%; background: rgba(7,15,36,.76); flex-direction: column; gap: 5px; cursor: pointer; }.nav-toggle span { width: 15px; height: 1px; background: var(--cyan); transition: transform .25s ease; }.nav-toggle.is-open span:first-child { transform: translateY(3px) rotate(45deg); }.nav-toggle.is-open span:last-child { transform: translateY(-3px) rotate(-45deg); }.nav-links { position: fixed; inset: 0; display: flex; height: 100vh; visibility: hidden; align-items: flex-start; justify-content: center; gap: 10px; margin: 0; padding: 92px 10vw; opacity: 0; pointer-events: none; background: rgba(3,6,18,.97); backdrop-filter: blur(20px); flex-direction: column; transition: opacity .25s ease, visibility .25s ease; }.nav-links.is-open { visibility: visible; opacity: 1; pointer-events: auto; }.nav-links a { padding: 7px 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(27px, 6vw, 42px); }.nav-links a:hover, .nav-links a.is-active { background: transparent; transform: translateX(7px); }.hero { display: flex; min-height: auto; padding-top: 122px; flex-direction: column; align-items: stretch; gap: 37px; }.hero__copy { max-width: 670px; }.hero-stage { width: min(100%, 760px); margin: 0 auto 10px; align-self: center; }.floating-frame--one { top: -5%; right: 0; }.floating-frame--two { bottom: -7%; left: 0; }.stats { grid-template-columns: repeat(2, 1fr); gap: 13px 0; }.stats article:nth-child(2)::after { display: none; }.stats article:nth-child(1)::after, .stats article:nth-child(3)::after { height: 36px; }.work-card { min-height: 310px; }.footer__top { grid-template-columns: 1fr; gap: 43px; } }
@media (max-width: 640px) { :root { --shell: calc(100vw - 32px); }.intro__skip { font-size: 9px; }.brand { width: 170px; }.nav { min-height: 70px; }.hero { padding-top: 106px; gap: 28px; }.hero-rotator { min-height: 2.1em; font-size: clamp(48px, 13vw, 64px); }.hero__lede { font-size: 13px; line-height: 1.76; }.hero__micro { margin-top: 25px; }.hero-video__frame { border-radius: 19px; }.hero-video:hover .hero-video__frame { transform: translateY(-4px); }.floating-frame { display: none; }.stats { padding: 13px 8px; }.stats article { gap: 9px; padding: 7px 9px; }.stat-icon { width: 34px; height: 34px; font-size: 16px; }.stats strong { font-size: 23px; }.stats small { white-space: normal; font-size: 8px; }.services, .works, .contact { padding-top: 96px; }.section-heading--center { margin-bottom: 32px; }.section-heading h2 { font-size: 40px; }.section-heading > p:last-child { font-size: 12px; }.service-grid { grid-template-columns: 1fr; }.service-card { aspect-ratio: 16 / 9.5; }.service-card__content { padding-top: 37px; transform: none; }.service-card__content p, .service-card__content > span, .card-play { opacity: 1; transform: none; }.works__top { align-items: flex-start; margin-bottom: 25px; flex-direction: column; }.works__top h2 { font-size: 40px; }.work-showcase { grid-template-columns: 1fr; gap: 13px; }.work-card, .work-card--featured, .work-card--wide { grid-column: auto; grid-row: auto; min-height: 350px; }.work-card__overlay { min-height: 53%; padding: 26px; transform: none; }.work-card__overlay p, .work-card__overlay > span, .work-card__overlay > b { opacity: 1; transform: none; }.work-card__overlay h3 { font-size: 33px; }.work-card--wide .work-card__poster { padding-left: 28px; }.work-card--wide .work-card__poster i { right: 12%; }.contact__panel { padding: 66px 16px; }.contact h2 { font-size: 45px; }.footer { padding-top: 60px; }.footer__links { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }.footer__links > div:last-child { grid-column: span 2; }.footer__bottom { align-items: center; padding-bottom: 22px; flex-direction: column; gap: 10px; }.light-beams { opacity: .55; } }
@media (max-width: 430px) { :root { --shell: calc(100vw - 26px); }.brand { width: 157px; }.hero { padding-top: 98px; }.hero-rotator { font-size: 47px; }.hero__actions { gap: 9px; }.button { padding-left: 14px; }.button > b { width: 31px; height: 31px; }.hero-video__title { font-size: 24px; }.hero-video__status { display: none; }.work-card, .work-card--featured, .work-card--wide { min-height: 315px; }.work-card__overlay { padding: 22px; }.work-card__overlay h3 { font-size: 30px; }.contact h2 { font-size: 40px; }.footer__links { gap: 23px 10px; }.footer__bottom a { display: none; } }
@media (pointer: coarse) { .work-card__play { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }.work-card__play[hidden] { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.intro { display: none; } body.is-intro-active { overflow: auto; } body.is-intro-active .site-header, body.is-intro-active main, body.is-intro-active .footer { opacity: 1; animation: none; }.mouse-glow, .floating-frame { display: none; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; filter: none; } }

/* Requested layout: clean interactions, a wider desktop canvas, and a regular work grid. */
:root { --shell: min(1920px, calc(100vw - 80px)); }
.premium-action::before, .button::before { content: none; }
.premium-action.is-rippling::before, .button.is-rippling::before { animation: none; }

.hero-statement { display: flex; min-height: 3.95em; max-width: 780px; margin-bottom: 22px; flex-direction: column; align-items: flex-start; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-weight: 700; letter-spacing: -.077em; line-height: .91; }
.hero-statement__crafted { display: block; color: var(--white); font-size: clamp(74px, 6.8vw, 108px); }
.hero-statement__every { display: block; margin-top: 6px; color: var(--white); font-size: clamp(54px, 4.8vw, 78px); }
.hero-statement__word { display: inline-block; color: transparent; background: linear-gradient(100deg, #50bfff, #5ee4ff 43%, #a28bff); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 30px rgba(46, 199, 255, .16); }
.hero-statement__word.is-changing { animation: word-in 500ms var(--ease); }
.hero-statement__feels { display: block; min-height: 1.1em; margin-top: 10px; color: #b8c7ff; font-size: clamp(24px, 2.2vw, 36px); letter-spacing: -.055em; opacity: 0; transform: translateY(-9px); transition: opacity 350ms ease, transform 350ms var(--ease); }
.hero-statement__feels.is-visible { opacity: 1; transform: translateY(0); }

.work-showcase { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.2vw, 24px); }
.work-card, .work-card--featured, .work-card--wide { grid-column: auto; grid-row: auto; min-height: 0; aspect-ratio: .88; border-radius: 18px; transition: border-color .25s ease, box-shadow .25s ease; }
.work-card:hover { z-index: auto; border-color: rgba(142,202,255,.34); box-shadow: 0 20px 45px rgba(0,0,0,.2); transform: none; }
.work-card__poster { align-content: center; gap: 0; padding: 20px; transition: none; }
.work-card:hover .work-card__poster { transform: none; }
.work-card__poster i { width: clamp(64px, 5vw, 94px); box-shadow: 0 0 28px var(--work-glow, rgba(51,214,255,.4)); }
.work-card__poster i::after { content: ""; position: absolute; top: 50%; left: 54%; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.3)); transform: translate(-50%, -50%); }
.work-card__poster span { display: none; }
.work-card__duration { top: auto; right: 16px; bottom: calc(24% + 13px); }
.work-card__overlay { min-height: 0; height: 24%; padding: 17px 19px; background: linear-gradient(180deg, rgba(5,12,26,.82), rgba(4,9,21,.98)); transform: none; }
.work-card:hover .work-card__overlay { transform: none; }
.work-card__overlay p { margin-bottom: 5px; color: #93a6c1; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 1; transform: none; transition: none; }
.work-card__overlay h3 { font-size: clamp(17px, 1.35vw, 25px); letter-spacing: -.055em; line-height: 1.05; }
.work-card__overlay > span, .work-card__overlay > b { display: none; }
.work-card:hover .work-card__overlay p, .work-card:hover .work-card__overlay > span, .work-card:hover .work-card__overlay > b { opacity: 1; transform: none; }
.work-card__play { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

@media (max-width: 1120px) { :root { --shell: calc(100vw - 48px); }.work-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }.work-card, .work-card--featured, .work-card--wide { aspect-ratio: .9; min-height: 0; } }
@media (max-width: 640px) { :root { --shell: calc(100vw - 32px); }.hero-statement { min-height: 4.35em; }.hero-statement__crafted { font-size: clamp(62px, 17vw, 82px); }.hero-statement__every { font-size: clamp(46px, 13vw, 62px); }.hero-statement__feels { margin-top: 8px; font-size: 24px; }.work-showcase { grid-template-columns: 1fr; }.work-card, .work-card--featured, .work-card--wide { min-height: 0; aspect-ratio: .9; }.work-card__overlay { height: 24%; }.work-card__overlay h3 { font-size: 24px; } }

html { overflow-x: clip; }
.page-orb { position: fixed; }
.service-card::before { content: none; }

/* A restrained editing-timeline surface adds depth without competing with the work. */
.timeline-depth { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; opacity: .65; background: radial-gradient(ellipse at 69% 73%, rgba(23, 125, 191, .17), transparent 31%), radial-gradient(ellipse at 25% 91%, rgba(92, 69, 192, .13), transparent 36%); }
.site-header { position: fixed; z-index: 30; }
main, .footer { position: relative; z-index: 1; }
.site-header.is-scrolled { animation: header-slide-in 460ms var(--ease) both; }
body:not(.is-intro-active) .site-header { animation: header-slide-in 650ms var(--ease) both; }
@keyframes header-slide-in { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } }

/* A fixed header needs its own space so it never sits on top of hero content. */
main { padding-top: 86px; }
@media (min-width: 1201px) {
  main { padding-top: 72px; }
  .floating-frame--one { top: -2%; }
  .floating-frame--two { bottom: -3%; }
}
@media (max-width: 860px) { main { padding-top: 0; } }

/* With Formats removed, the remaining footer groups share the space evenly. */
.footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .footer__links > div:last-child { grid-column: auto; } }
.timeline-depth::before { content: ""; position: absolute; top: 47%; right: -16%; left: -16%; height: 58%; border: 1px solid rgba(86, 186, 238, .15); border-radius: 18px 18px 0 0; background: repeating-linear-gradient(90deg, rgba(97, 205, 255, .19) 0 1px, transparent 1px 5.5%), repeating-linear-gradient(180deg, rgba(98, 191, 244, .11) 0 1px, transparent 1px 20%), linear-gradient(180deg, rgba(9, 33, 63, .42), rgba(2, 8, 18, .04)); box-shadow: inset 0 22px 80px rgba(36, 155, 230, .07), 0 -24px 70px rgba(12, 109, 181, .09); transform: perspective(1000px) rotateX(61deg) translateY(12%) scaleX(1.24); transform-origin: center bottom; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent); }
.timeline-depth::after { content: ""; position: absolute; top: 63%; left: 12%; width: 1px; height: 42%; background: linear-gradient(transparent, rgba(99, 222, 255, .88) 13%, rgba(115, 111, 255, .63) 75%, transparent); box-shadow: 0 0 24px rgba(59, 201, 255, .72); transform: perspective(1000px) rotateX(61deg) translateY(14%); transform-origin: center bottom; }
.timeline-depth i { position: absolute; z-index: 1; display: block; height: clamp(24px, 3vw, 52px); border: 1px solid rgba(110, 213, 255, .17); border-radius: 7px; background: linear-gradient(105deg, rgba(37, 149, 223, .27), rgba(97, 89, 232, .18)); box-shadow: inset 0 1px rgba(210, 245, 255, .13), 0 0 25px rgba(20, 138, 219, .07); transform: perspective(1000px) rotateX(61deg) translateY(14%); transform-origin: center bottom; }
.timeline-depth i:nth-child(1) { top: 57%; left: 8%; width: 29%; }.timeline-depth i:nth-child(2) { top: 63%; left: 37%; width: 23%; background: linear-gradient(105deg, rgba(87, 91, 232, .3), rgba(25, 168, 231, .18)); }.timeline-depth i:nth-child(3) { top: 69%; left: 16%; width: 36%; background: linear-gradient(105deg, rgba(18, 175, 230, .2), rgba(92, 82, 220, .29)); }.timeline-depth i:nth-child(4) { top: 75%; left: 56%; width: 28%; }

/* Desktop hero keeps the header and opening content together, like the original layout. */
@media (min-width: 1201px) {
  :root { --shell: min(1810px, calc(100vw - 64px)); }
  .nav { min-height: 96px; }
  .brand { width: 290px; }
  .nav-links { gap: clamp(22px, 2.6vw, 52px); }
  .nav-links a { font-size: 14px; }
  .nav-cta { margin-left: 18px; padding: 7px 8px 7px 18px; font-size: 13px; }
  .nav-cta b { width: 31px; height: 31px; }

  .footer { padding-top: 100px; }
  .footer__brand .brand { width: 310px; }
  .footer__brand p { max-width: 440px; margin-block: 24px; font-size: 15px; line-height: 1.8; }
  .socials { gap: 12px; }
  .socials a { width: 38px; height: 38px; font-size: 12px; }
  .footer__links h3 { margin-bottom: 20px; font-size: 16px; }
  .footer__links a, .footer__links span { margin-bottom: 14px; font-size: 14px; }
  .footer__links .footer__book { margin-top: 16px; padding-left: 17px; font-size: 14px; }
  .footer__book b { width: 31px; height: 31px; }
  .footer__bottom { padding-block: 24px 32px; font-size: 12px; }

  .hero { min-height: 680px; grid-template-columns: minmax(560px, .84fr) minmax(760px, 1.16fr); gap: clamp(50px, 4.2vw, 86px); padding-top: 64px; }
  .hero-statement { max-width: 820px; min-height: 3.82em; margin-bottom: 22px; }
  .hero-statement__crafted { font-size: clamp(78px, 6.2vw, 108px); }
  .hero-statement__every { margin-top: 8px; font-size: clamp(64px, 5.25vw, 92px); }
  .hero__lede { max-width: 520px; margin-bottom: 30px; font-size: 15px; }
  .hero__micro { margin-top: 29px; font-size: 10px; }
  .eyebrow { margin-bottom: 18px; font-size: 10px; }
  .hero-stage { width: min(100%, 1100px); }
  /* Keep the stats panel below the hero frame instead of covering it. */
  .stats { margin-top: 42px; padding: 24px 30px; }
  .stats article { justify-content: center; gap: 16px; }
  .stats article > div { display: flex; align-items: baseline; gap: 10px; }
  .stat-icon { width: 45px; height: 45px; font-size: 20px; }
  .stats strong { font-size: 35px; }
  .stats small { margin: 0; font-size: 13px; font-weight: 600; }
}

@media (max-width: 1200px) and (min-width: 861px) {
  .hero { min-height: auto; grid-template-columns: minmax(300px, .88fr) minmax(390px, 1.12fr); padding-top: 120px; gap: 34px; }
  .hero-stage { width: min(100%, 760px); }
}

/* Latest work heading stays centered once its secondary link is removed. */
.works__top { justify-content: center; margin-inline: auto; text-align: center; }
.works__top .eyebrow { justify-content: center; }
@media (max-width: 640px) { .works__top { align-items: center; } }

/* Latest cuts lift slightly and pick up a cinematic glow on hover. */
@media (hover: hover) and (pointer: fine) {
  .work-card { transition: transform .38s var(--ease), border-color .32s ease, box-shadow .38s ease; }
  .work-card::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 38%, rgba(85, 217, 255, .38), transparent 46%); mix-blend-mode: screen; transition: opacity .38s ease; }
  .work-card:hover, .work-card:focus-within { z-index: 4; border-color: rgba(104, 225, 255, .76); box-shadow: 0 25px 52px rgba(0, 0, 0, .38), 0 0 48px rgba(40, 198, 255, .36); transform: translateY(-9px) scale(1.015); }
  .work-card:hover::after, .work-card:focus-within::after { opacity: 1; }
}

/* Keep the two footer groups grouped on the right and give them the same subtle lift. */
@media (min-width: 861px) {
  .footer__links { width: min(100%, 760px); margin-left: auto; }
  .footer__links > div { position: relative; isolation: isolate; min-width: 180px; padding: 12px 16px; border-radius: 14px; text-align: right; justify-self: end; transition: transform .3s var(--ease), filter .3s ease; }
  .footer__links > div::before { content: ""; position: absolute; z-index: -1; inset: -12px; border-radius: inherit; opacity: 0; background: radial-gradient(circle at 70% 35%, rgba(52, 205, 255, .28), transparent 66%); filter: blur(13px); transition: opacity .3s ease; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .footer__links > div:hover { filter: drop-shadow(0 0 13px rgba(57, 204, 255, .28)); transform: translateY(-5px); }
  .footer__links > div:hover::before { opacity: 1; }
}