/* One studio, from the opening scene to the last page. */
:root { --studio-paper:#f2f1f8; --studio-radius:26px; }

/* Shared navigation. The menu is a real, scrollable panel on short screens. */
.burger { border-radius:50%; background:#fff; border:0; }
.mobile-menu { background:var(--blue); padding:100px var(--gut) 28px; gap:8px; justify-content:flex-start; overflow-y:auto; overscroll-behavior:contain; visibility:hidden; transition:transform .55s var(--ease),visibility .55s; }
.mobile-menu.open { visibility:visible; }
.mobile-menu > a { background:#fff; color:var(--ink); border:0; border-radius:16px; font-size:clamp(1.6rem,6vw,2.6rem); padding:14px 24px; flex:0 0 auto; justify-content:space-between; align-items:center; }
.mobile-menu > a:hover,.mobile-menu > a:active { padding-left:30px; color:var(--blue); }
.mobile-menu > a[aria-current="page"] { background:#dfe2ff; }
.mobile-menu > a:last-of-type { background:#10111b; color:#fff; margin-top:8px; }
.mobile-menu > a:last-of-type i { color:#c9cbdb; }
.mobile-menu .menu-signature { position:static; margin-top:auto; padding-top:25px; color:#fff; flex-shrink:0; }
.mobile-menu .menu-signature .brand-asterisk { color:#fff; }
.menu-is-open .nav { background:var(--blue); color:#fff; border-color:transparent; transform:none; backdrop-filter:none; }
.menu-is-open .brand:hover { color:#fff; }
.menu-is-open .scroll-signal { background:#fff; }
.mobile-menu a:focus-visible { outline:3px solid #42e5ef; outline-offset:2px; }
.foot-grid > * { min-width:0; }
.foot a { overflow-wrap:anywhere; }

.interior-page { background:var(--studio-paper); }
.interior-page .nav { background:rgba(242,241,248,.92); }
.interior-page.menu-is-open .nav { background:var(--blue); }
.interior-page .wrap { min-width:0; }
.interior-page .btn { border-radius:100px; min-height:48px; }
.interior-page .btn--blue { border-color:var(--blue); }
.interior-page .textlink { padding-block:.45rem; }
.interior-page :where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--blue); outline-offset:5px; }

/* Original drawn strokes echo the home and About pages. */
.interior-head { position:relative; isolation:isolate; overflow:clip; border-bottom:0; padding-bottom:clamp(4rem,7vw,7rem); }
.interior-head > .wrap { z-index:1; }
.interior-head .color-ribbon { top:8%; right:-17%; width:min(77vw,1100px); opacity:.52; }
.interior-head .color-ribbon path { stroke:#9ca6ff; stroke-width:34; }
.interior-head .lead { max-width:56ch; }
.interior-head h1 { font-weight:400; letter-spacing:-.065em; }
.interior-mark { position:absolute; right:var(--gut); top:100px; width:38px; height:38px; color:var(--blue); animation:studio-turn 28s linear infinite; z-index:2; }
@keyframes studio-turn { to { transform:rotate(360deg); } }
.interior-page .h-sec { font-weight:400; letter-spacing:-.055em; }
.interior-page .signal-rule { opacity:.45; }

/* Blue chapters and white, gently turning cards. */
.blue-chapter { background:var(--blue); color:#fff; border-radius:32px; margin:0 12px; }
.blue-chapter :where(.section-num,.eyebrow,.lead,.dim,.video-note) { color:#e5e6ff; }
.blue-chapter .eyebrow::before { background:#fff; }
.blue-chapter :where(a,button,summary):focus-visible { outline-color:#42e5ef; }
.capability-chapter .grid { background:transparent; gap:18px; perspective:1600px; }
.video-band + .capability-chapter { margin-top:16px; }
.capability-chapter .card { background:#fff; color:var(--ink); border-radius:var(--studio-radius); padding:clamp(1.8rem,4vw,3.7rem); min-height:310px; }
.capability-chapter .card .num { font-size:.8rem; margin-bottom:3rem; }
.capability-chapter .card::after { content:''; position:absolute; right:2rem; top:2rem; width:32px; height:32px; background:var(--blue); mask:url('/assets/img/brand/asterisk-symbol.svg') center/contain no-repeat; transition:transform .7s var(--ease); }
.capability-chapter .card:hover::after { transform:rotate(90deg); }
.capability-chapter .h-card { font-size:clamp(1.8rem,3.1vw,3rem); font-weight:400; max-width:16ch; margin-bottom:1rem; }
.motion-card.reveal { transform:perspective(1400px) translateY(38px) rotateY(7deg); transform-origin:0 50%; }
.motion-card.reveal.in { transform:none; }
.interior-page .mstack { gap:16px; background:none; border:0; }
.interior-page .mrow-svc { padding:clamp(1.7rem,3vw,3rem); background:#fff; border-radius:var(--studio-radius); grid-template-columns:68px 1.35fr .85fr; }
.interior-page .mrow-svc .mnum { font-size:clamp(3rem,5vw,5rem); }
.interior-page .mrow-svc .mkick,.interior-page .mrow-svc .mlabel { color:#666477; }
.interior-page .spine { padding-left:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.interior-page .spine::before,.interior-page .spine-dot { display:none; }
.interior-page .spine-step { padding:clamp(1.7rem,3.4vw,3rem); border:1px solid #ffffff45; border-radius:var(--studio-radius); }
.interior-page .spine-n { color:#cdd3ff; }
.interior-page .spine-step h4 { font-size:clamp(3rem,5vw,5rem); font-weight:400; margin:1.5rem 0 1rem; }
.interior-page .spine-step p { color:#e5e6ff; }

/* The work keeps its own colors; frames and typography tie it to the studio. */
.interior-page .centry { background:#fff; border:0; border-radius:var(--studio-radius); margin-top:24px; padding:clamp(1.5rem,3vw,3rem); }
.interior-page .centry .cvis { border:0; border-radius:18px; }
.interior-page .centry .metrics b { color:var(--blue); }
.interior-page .centry .metrics span { color:#666477; }
.interior-page .centry h3 { font-weight:400; }
.interior-page :where(.hero-img,.projvid,.gallery a,.card.has-img,.watch-frame) { border-radius:var(--studio-radius); overflow:hidden; }
.interior-page .hero-img { border:0; }
.interior-page .gallery { gap:18px; }
.interior-page .card.has-img { background:#fff; }
.interior-page .reel .poster,.interior-page .reel iframe { border-radius:18px; }
.interior-page .reel .meta { padding-top:1.1rem; }
.interior-page .reel .tile .meta .tag { color:#c6ccff; }
.interior-page .reel .tile .meta p { color:#d9dceb; }
.work-cinema { background:#080b2e; color:#fff; }
.work-cinema .eyebrow,.work-cinema .section-num { color:#c6ccff; }
.work-cinema .dim,.work-cinema .video-card p { color:#d9dceb; }
.work-cinema .video-card .eyebrow { color:#c6ccff; }
.work-cinema .textlink { color:#fff; border-color:#ffffff60; }
.work-cinema .eyebrow::before { background:#c6ccff; }
.work-cinema :where(a,button,[data-yt]):focus-visible { outline-color:#42e5ef; }
.case-story { background:var(--blue); color:#fff; border-radius:32px; margin:2rem 12px; }
.case-story .eyebrow,.case-story .lead,.case-story .dim { color:#e5e6ff; }
.case-story .eyebrow::before { background:#fff; }
.case-story :where(a,button):focus-visible { outline-color:#42e5ef; }

/* Video: a generous opening, proper frames, readable project options. */
.interior-page .video-hero { padding-bottom:3rem; }
.interior-page .video-title { font-size:clamp(3rem,5.9vw,6rem); }
.interior-page .video-feature { border:0; background:#fff; padding:1.2rem; border-radius:var(--studio-radius); box-shadow:0 18px 50px #11112b0a; }
.interior-page .video-poster { border-radius:16px; }
.interior-page .video-play { color:var(--blue); background:#fff; transition:transform .4s var(--ease),background .3s,color .3s; }
.interior-page .video-feature:hover .video-play,.interior-page .video-card:hover .video-play { transform:rotate(-12deg) scale(1.08); background:var(--blue); color:#fff; }
.interior-page .video-caption { flex-wrap:wrap; gap:.35rem 1rem; }
.interior-page .video-kicker { border-top:1px solid #0009f225; margin-top:3rem; color:#484661; }
.interior-page .video-band { border-radius:32px; margin-inline:12px; }
.interior-page .video-band .btn { color:var(--ink); border-color:#fff; }
.interior-page .video-services { gap:18px; perspective:1600px; }
.interior-page .video-service { padding:clamp(1.6rem,3vw,2.6rem); border:0; border-radius:var(--studio-radius); background:#fff; }
.interior-page .video-service h3 { font-weight:400; font-size:clamp(1.8rem,2.6vw,2.6rem); }
.interior-page .video-work .video-card { padding:1rem 1rem 1.5rem; border-radius:var(--studio-radius); background:#fff; color:var(--ink); }
.interior-page .video-work .video-card :where(.eyebrow,h3,p,.textlink) { margin-inline:.5rem; }
.interior-page .video-work .video-card p { color:var(--ink-2); }
.interior-page .video-work .video-card h3 { font-weight:400; }
.interior-page #method { margin:3rem 12px; border-radius:32px; background:var(--blue); color:#fff; }
.interior-page #method :where(.lead,.eyebrow,.video-process p) { color:#e5e6ff; }
.interior-page #method .eyebrow::before { background:#fff; }
.interior-page .video-process article { border-color:#ffffff60; }
.interior-page .video-process h3 { font-weight:400; }
.interior-page .video-price { border:0; border-radius:var(--studio-radius); }
.interior-page .video-price .price { color:var(--blue); }
.interior-page .video-price h3 { font-size:1.6rem; font-weight:400; }
.interior-page :where(.video-faq,.faq) details { background:#fff; border:0; margin-bottom:8px; border-radius:18px; padding:1.4rem 1.6rem; }
.interior-page .faq summary { padding-block:0; }
.interior-page .faq .ans { padding-bottom:0; }
.interior-page .video-faq { max-width:none; }
.interior-page .watch-head { padding-bottom:3.5rem; }
.interior-page .watch-head h1 { font-size:clamp(3rem,7vw,7rem); max-width:18ch; }
.watch-page main > .wrap { padding-top:var(--gut); padding-bottom:2rem; background:var(--blue); border-radius:32px; }
.watch-page main > .wrap .video-note { color:#fff; }
.watch-page main > .wrap a:focus-visible { outline-color:#42e5ef; }
.interior-page .watch-frame { box-shadow:0 20px 60px #0003; }
.interior-page .watch-context { padding:clamp(1.5rem,4vw,4rem); background:#fff; border-radius:var(--studio-radius); }
.interior-page .watch-context .wrap { padding:0; }
.interior-page .video-cta { position:relative; min-height:75svh; }
.interior-page .video-cta .h-sec { font-size:clamp(2.8rem,5.7vw,5.8rem); }
.interior-page .kinetic-cta :where(a,button):focus-visible { outline-color:#42e5ef; }

/* Contact is part of the experience, right through the form. */
.contact-page .interior-head { background:var(--blue); color:#fff; padding-bottom:5rem; }
.contact-page .interior-head :where(.accent,.eyebrow,.lead,.crumb,.crumb span,.interior-mark) { color:#fff; }
.contact-page .interior-head .eyebrow::before { background:#fff; }
.contact-page .interior-head .color-ribbon { opacity:.4; }
.contact-page .interior-head .color-ribbon path { stroke:#7d8bff; }
.contact-panel > .wrap { grid-template-columns:.8fr 1.2fr; align-items:start; }
.contact-panel .form { padding:clamp(1.5rem,3.4vw,3.4rem); background:#fff; border-radius:var(--studio-radius); }
.contact-panel .field :where(input,select,textarea) { background:#f5f5fa; border:1px solid #d6d5e1; border-radius:12px; padding:1rem; font-size:1rem; }
.contact-panel .form textarea { min-height:170px; }
.contact-panel .field label { color:#666477; }
.contact-panel .form .btn { justify-self:start; background:var(--blue); border-color:var(--blue); color:#fff; }
.contact-panel .textlink { overflow-wrap:anywhere; }
.utility-page .interior-head { display:flex; align-items:center; min-height:100svh; }
.interior-page .foot { border-top:0; background:var(--studio-paper); }

@media (hover:hover) and (pointer:fine) {
  .interior-page .card.has-img img { transition:transform .8s var(--ease); }
  .interior-page .card.has-img:hover img { transform:scale(1.035); }
}
@media (min-width:1100px) {
  .contact-panel > .wrap > :first-child { position:sticky; top:120px; }
}
@media (max-width:980px) {
  .interior-page .mrow-svc { grid-template-columns:60px 1fr; }
  .interior-page .mrow-svc .mside { grid-column:2; }
  .contact-panel > .wrap { grid-template-columns:1fr; gap:3rem; }
  .interior-page .video-hero-grid { align-items:start; }
  .interior-page .video-feature { max-width:100%; }
}
@media (max-width:640px) {
  .foot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.25rem; }
  .interior-head { padding-top:8.5rem; padding-bottom:3.5rem; }
  .interior-head h1 { font-size:clamp(2.8rem,11vw,4.6rem); }
  .interior-head .color-ribbon { width:160vw; right:-102%; top:15%; opacity:.5; }
  .interior-mark { top:105px; width:24px; height:24px; }
  .interior-page .watch-head h1 { font-size:clamp(2.6rem,11vw,4.6rem); }
  .blue-chapter,.case-story,.interior-page .video-band,.interior-page #method { margin-inline:8px; border-radius:24px; }
  .capability-chapter .grid { grid-template-columns:1fr; }
  .capability-chapter .card { min-height:290px; }
  .capability-chapter .card .num { margin-bottom:2.2rem; }
  .interior-page .mrow-svc { grid-template-columns:1fr; }
  .interior-page .mrow-svc .mside { grid-column:auto; border-top:1px solid var(--line); padding-top:1rem; }
  .interior-page .spine { grid-template-columns:1fr; }
  .interior-page .centry { display:flex; flex-direction:column; align-items:stretch; padding:1.25rem; }
  .interior-page .centry .cvis { order:-1; }
  .interior-page .centry .metrics { gap:1.2rem; }
  .interior-page .centry .metrics b { font-size:1.6rem; }
  .interior-page .video-work { gap:1.2rem; }
  .interior-page .video-feature { padding:1rem; }
  .interior-page .watch-frame { border-radius:16px; }
  .watch-page main > .wrap { border-radius:24px; }
  .interior-page .video-cta { padding-block:5rem; }
  .contact-panel .form .row { grid-template-columns:1fr; }
  .contact-page .interior-head { padding-bottom:3.5rem; }
}
@media (prefers-reduced-motion:reduce) {
  .interior-mark { animation:none; }
  .motion-card.reveal,.interior-page .reveal { transform:none; opacity:1; }
}
.motion-paused .motion-card.reveal { transform:none; }
.motion-paused .interior-page :where(.card img,.video-poster img,.video-play,.btn) { transform:none !important; }
.motion-paused .interior-page * { scroll-behavior:auto; }
@media print {
  .mobile-menu,.interior-mark,.color-ribbon { display:none; }
  .interior-page .reveal { opacity:1; transform:none; }
}