*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;background:#080f20;color:#f5f8ff;font-family:Arial,sans-serif}button,a{font:inherit;color:inherit}button{cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #71d5ff;outline-offset:4px}header{position:sticky;top:0;background:#eef3fff2;backdrop-filter:blur(14px);color:#092748;z-index:5}.nav,main,footer{max-width:1360px;margin:auto;padding-inline:5vw}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;direction:ltr}.logo{width:175px;height:40px;background:url(assets/cover-18.jpeg) 57% 52.8% / 231px auto no-repeat;mix-blend-mode:multiply}nav{display:flex;gap:25px;direction:rtl;font-weight:bold}.hero{display:grid;grid-template-columns:.9fr 1.15fr;align-items:center;gap:6%;padding:clamp(40px,6vw,90px) 0;background:radial-gradient(ellipse at 80% 50%,#102856 0%,transparent 60%)}small{font-size:.82rem;color:#9ab9f7;letter-spacing:.08em}.intro h1{font-size:clamp(4rem,8.2vw,8.1rem);letter-spacing:-.065em;line-height:.92;margin:24px 0}.intro em{color:#77abff;font-style:normal}.intro p,#studio p{font-size:clamp(1.05rem,1.6vw,1.35rem);color:#d3deef;line-height:1.6}.cta,.load{display:inline-flex;gap:30px;align-items:center;background:#2361d5;border:0;border-radius:100px;padding:13px 25px;color:white}.feature{position:relative;isolation:isolate;overflow:hidden;border:1px solid #38517c;padding:0;border-radius:19px;background:#102252;aspect-ratio:1.26;width:100%;text-align:right}.feature:after,.card:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#040919e8);pointer-events:none}.feature img,.card img,.card video{width:100%;height:100%;object-fit:cover;display:block}.play,.caption,.feature i,.card strong,.card small{position:absolute;z-index:1}.play{left:24px;bottom:28px;border:1px solid #fff9;border-radius:50%;padding:17px 19px;backdrop-filter:blur(6px)}.caption{bottom:27px;right:26px}.caption strong,.caption small{display:block}.caption strong{font-size:2rem}.feature i{left:18px;top:18px;background:#08152dd9;padding:6px 10px;border-radius:5px;font:12px monospace}#work,#studio{border-top:1px solid #26344e;padding:48px 0}h2{font-size:clamp(2.5rem,5vw,5rem);margin:8px 0 22px;letter-spacing:-.055em}h2 span{color:#609dff}#filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}#filters button,.load{border:1px solid #37465f;padding:9px 18px;border-radius:22px;background:transparent}#filters [aria-pressed=true]{background:#e4edff;color:#102248}#grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.card{position:relative;overflow:hidden;border-radius:12px;background:#14233c;border:0;padding:0;aspect-ratio:1.26;text-align:right}.card strong{right:16px;bottom:16px;font-size:1.3rem}.card small{top:12px;right:12px;background:#091325d9;color:white;padding:5px 10px;border-radius:20px}.card img{transition:transform .4s}.card:hover img{transform:scale(1.035)}.load{display:block;margin:24px auto 0}.load[hidden]{display:none}#studio p{max-width:620px}footer{border-top:1px solid #26344e;padding-block:24px;color:#9bb3d5;font-weight:bold}dialog{background:#101a2b;color:white;border:1px solid #425578;border-radius:16px;width:min(900px,96vw);padding:12px;text-align:center}dialog::backdrop{background:#040915ed}dialog img,dialog video{display:block;width:100%;height:65vh;object-fit:contain}#close{display:block;margin-bottom:8px;border:0;border-radius:50%;background:#273651;width:38px;height:38px;font-size:26px}.appeared{animation:enter .55s ease both}@keyframes enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media(max-width:740px){.nav{height:60px}.hero{grid-template-columns:1fr;gap:25px}.feature{aspect-ratio:1.64}#grid{grid-template-columns:repeat(2,1fr);gap:10px}.card strong{font-size:1rem;right:10px;bottom:10px}.logo{width:145px;background-size:190px auto}#work,#studio{padding:32px 0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
#services {padding:clamp(40px,6vw,82px) 0;border-top:1px solid #26344e}
.service-list a {display:grid;grid-template-columns:3rem 1fr 1fr auto;gap:1rem;align-items:center;padding:22px 12px;border-top:1px solid #33445d;transition:background .2s}
.service-list a:hover,.service-list a:focus-visible {background:#112441}
.service-list b {font:14px monospace;color:#96baff}
.service-list strong {font-size:clamp(1.2rem,2vw,2rem)}
.service-list span {color:#bed0e6}
.service-list i,.viewer-nav button {border:1px solid #405979;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-style:normal}
.viewer-nav {display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:8px}
.viewer-nav button {color:white;background:#192f4b}
@media(max-width:620px){.service-list a{grid-template-columns:2rem 1fr auto;gap:6px}.service-list span{grid-column:2;grid-row:2}.service-list i{grid-column:3;grid-row:1/3}.nav{gap:8px}.nav nav{gap:12px}.logo{flex-shrink:0;width:125px;background-size:165px auto}}
#contact {border-top:1px solid #33445d;padding:clamp(40px,6vw,80px) 0}
#contact p {line-height:1.6;color:#cddbf0}
.contact-actions,.social-links {display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.contact-actions {margin:25px 0}
.contact-mail {display:grid;gap:4px}
.contact-mail bdi {font-size:.9rem;color:#a8c8ff}
.social-links {padding-top:16px;font-size:.95rem}
.social-links a:hover,.contact-mail:hover {text-decoration:underline}
@media(max-width:550px){header .nav{flex-wrap:wrap;justify-content:center;height:auto;padding-block:7px;gap:4px 20px}header nav{flex-wrap:wrap;justify-content:center}.contact-actions{align-items:flex-start;flex-direction:column}}

/* The studio blue is sampled from the supplied wordmark. */
:root { --brand: #064da7; --ink: #161c25; --rule: #d6e1ee; }
body { background: #eaece9; color: var(--brand); }
header { background: rgba(233,237,237,.96); color: var(--brand); border-bottom: 1px solid var(--rule); }
.hero { background: radial-gradient(ellipse at 75% 38%, #dbe3e8 0%, transparent 64%); }
.intro h1 { font-size: clamp(3.2rem,6.5vw,6.7rem); line-height: 1.02; }
.intro em { color: var(--ink); }
small, h2 span, .service-list b, .contact-mail bdi { color: var(--brand); }
.intro p, #studio p, #contact p, .service-list span { color: #303d4d; }
#work, #studio, #contact, #services, footer, .service-list a { border-color: var(--rule); }
.service-list a { grid-template-columns: 3rem minmax(12rem,.8fr) 1.5fr auto; }
.service-list span { line-height: 1.6; }
.service-list a:hover, .service-list a:focus-visible { background: #f1f6fc; }
.cta, #filters [aria-pressed=true] { background: var(--brand); color: white; }
#filters button, .load { border-color: #adc3dd; }
.card, .feature, .caption small { color: white; }
footer { color: var(--brand); }
@media (max-width: 620px) { .service-list a { grid-template-columns: 2rem 1fr auto; } }

#work {
  background: #dce4eb;
  padding-inline: clamp(16px, 3vw, 42px);
  border: 1px solid #ccd6df;
  border-radius: 22px;
  margin-bottom: clamp(24px, 4vw, 56px);
}
#contact {
  background: #dae2e7;
  padding-inline: clamp(18px, 3vw, 42px);
  border-radius: 22px;
  margin-bottom: 32px;
}
.brief {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:760px;margin:28px 0}
.brief label {display:grid;gap:6px;font-weight:bold}
.brief input,.brief select,.brief textarea {box-sizing:border-box;width:100%;border:1px solid #849bb2;border-radius:9px;padding:12px;background:#f5f7f7;color:#182c43;font:inherit}
.brief textarea {resize:vertical}
.brief label:has(textarea) {grid-column:1/-1}
.brief button {justify-self:start}
body {isolation:isolate}
.ambient {position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 380px 300px at var(--x,70%) var(--y,28%),#8baed573,transparent 100%)}
@media(prefers-reduced-motion:no-preference){.reveal-wait:not(.appeared):not(:focus-within){opacity:0}}
@media(max-width:650px){.brief{grid-template-columns:1fr}}
#theme-toggle {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 6;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #8493a4;
  border-radius: 24px;
  background: #111820;
  color: #fff;
}
.night { color-scheme: dark; --ink: #f1f5fa; --brand: #9dc5ff; --rule: #39424d; }
.night body { background: #090b0e; color: var(--ink); }
.night header { background: #101317f5; }
.night .logo { mix-blend-mode: normal; background-color: #f0f3f5; border-radius: 5px; }
.night .hero { background: radial-gradient(ellipse at 75% 38%, #172332, transparent 65%); }
.night .intro em { color: var(--brand); }
.night .ambient { opacity: .15; }
.night #work, .night #contact { background: #14181e; border-color: var(--rule); }
.night .intro p, .night #studio p, .night #contact p, .night .service-list span { color: #c9d1dc; }
.night .service-list a:hover, .night .service-list a:focus-visible { background: #202933; }
.night .brief :is(input, select, textarea) { background: #10151b; color: var(--ink); }
.night .cta, .night #filters [aria-pressed=true], .night #theme-toggle { background: #a9ccff; color: #101722; }
.load { color: var(--brand); }
.hero, .night .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #080b10;
  padding-inline: clamp(18px, 3vw, 46px);
  color: #fff;
}
.hero-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: -2;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to left, rgba(5,10,18,.72), rgba(5,10,18,.22) 65%);
}
.hero .intro small, .hero .intro em { color: #b4d4ff; }
.hero .intro p, .night .hero .intro p { color: #eef3fa; }
#theme-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
}
:root:not(.night) .hero { background: #eaece9; color: #122940; }
:root:not(.night) .hero-motion {
  filter: grayscale(1) invert(1);
  mix-blend-mode: multiply;
  opacity: .55;
}
:root:not(.night) .hero::before {
  background: linear-gradient(to left, #eaece9de, #eaece920 70%);
}
:root:not(.night) .hero .intro :is(small, em) { color: var(--brand); }
:root:not(.night) .hero .intro p { color: #293846; }
.feature-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.feature {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  background: #0c111a;
}
.feature .feature-preview {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: contain;
  background: #080a10;
}
.feature::after { display: none; }
.feature .caption {
  position: static;
  padding: 20px 24px;
  padding-left: 88px;
  width: 100%;
  background: #111b2a;
}
.feature .caption small { color: #aabbd3; margin-bottom: 5px; }
.feature .caption strong { font-size: clamp(1.4rem, 2.3vw, 2rem); }
.feature .play { bottom: 22px; padding: 12px 15px; }
.feature i { display: none; }
@media(max-width:740px) {
  .feature .feature-preview { max-height: 380px; }
}
.feature {
  width: min(100%, 410px);
  min-height: 0;
  aspect-ratio: 4 / 5;
  justify-self: center;
}
.feature .feature-preview {
  flex: 1;
  min-height: 0;
  height: 0;
  max-height: none;
  object-fit: contain;
}
.feature .caption { flex-shrink: 0; }
@media(max-width:740px) {
  .feature { width: min(100%, 360px); aspect-ratio: 4 / 5; }
  .feature .feature-preview { max-height: none; }
}
.feature {
  width: min(100%, 340px);
  aspect-ratio: auto;
}
.feature-viewport {
  width: 100%;
  aspect-ratio: 9 / 14.2;
  overflow: hidden;
  position: relative;
}
.feature .feature-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112.68%;
  max-height: none;
  object-fit: fill;
}
.feature .caption { padding: 16px 20px 16px 76px; }
.feature .caption strong { font-size: 1.65rem; }
@media(max-width:740px) {
  .feature { width: min(100%, 320px); aspect-ratio: auto; }
}
.viewer-nav button[hidden] { display: none; }
.night .logo {
  background-color: transparent;
  filter: grayscale(1) invert(1) brightness(1.4);
  mix-blend-mode: screen;
  border-radius: 0;
}
.theme-sun { display: none; }
.night .theme-sun { display: block; }
.night .theme-moon { display: none; }