/* CodeAd brand film: a 20 second, resolution-independent canvas sequence. */
.codead-logo { display: block; width: 155px; height: 32px; overflow: visible; }
.brand-footer .codead-logo { width: 165px; padding: 0; background: transparent; filter: brightness(0) invert(1); }
.site-header .nav-cta { background: #beff00; }
.hero.codead-hero {
  display: block; height: auto; min-height: 0;
  padding: 135px max(32px, calc((100vw - 1480px) / 2)) 44px;
  background: #f7f7f2;
}
.codead-hero .hero-copy { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px 50px; align-items: end; margin-bottom: 42px; }
.codead-hero .eyebrow { grid-column: 1 / -1; margin: 0 0 3px; font-size: 11px; letter-spacing: .15em; }
.codead-hero .hero-title { font-size: clamp(42px, 4.2vw, 66px); line-height: 1.16; letter-spacing: -.065em; }
.codead-hero .hero-title span { padding: 0; }
.codead-hero .hero-title span::before { background: #beff00; bottom: 0; height: .2em; }
.codead-hero .hero-bottom { margin: 0; gap: 20px; align-items: flex-start; }
.codead-hero .hero-bottom p { font-size: 15px; line-height: 1.8; }
.codead-hero .button { min-height: 48px; font-size: 13px; background: #10191e; color: #fff; }
.codead-hero .button-icon { background: #beff00; color: #10191e; width: 30px; height: 30px; }
.motion-player { position: relative; width: 100%; background: #eff0e9; overflow: hidden; }
.motion-player canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.motion-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.motion-player:not(.is-ready) video { display: none; }
.motion-player video[hidden] { display: none; }
.motion-poster { width: 100%; display: block; aspect-ratio: 16 / 9; background: #eff0e9; padding: 13%; }
.motion-player.is-ready .motion-poster { display: none; }
.motion-player:not(.is-ready) canvas { display: none; }
.film-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; font: 10px/1.5 Consolas, monospace; letter-spacing: .08em; color: #4c5558; }
.film-controls p { margin: 0; }
.film-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 104px; min-height: 44px; border: 1px solid #bbc0b9; padding: 8px 13px; background: transparent; color: #10191e; cursor: pointer; font: 12px/1.4 inherit; letter-spacing: 0; }
.film-controls button:hover { background: #beff00; border-color: #10191e; }
.film-controls button:disabled { cursor: wait; opacity: .6; }
.film-controls button:focus-visible, .motion-range:focus-visible { outline: 3px solid #10191e; outline-offset: 4px; }
.film-controls .motion-toggle::before { content: 'Ⅱ'; font: 700 14px Arial; }
.film-controls .motion-toggle[aria-pressed="true"]::before { content: '▶'; font-size: 10px; }
.motion-preview { margin: 0; padding: 36px; background: #e9ebe5; font-family: Arial, 'Malgun Gothic', sans-serif; color: #10191e; }
.preview-wrap { max-width: 1280px; margin: auto; }
.preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.preview-heading h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.04em; }
.preview-heading p { margin: 0; color: #55605e; font-size: 13px; }
.preview-heading a { color: inherit; font-size: 13px; }
.preview-links { display:flex; flex-wrap:wrap; gap:12px 22px; }
.preview-actions { display: flex; gap: 10px; }
.motion-range { width: 100%; margin: 22px 0 0; accent-color: #10191e; cursor: pointer; }
.preview-note { color: #55605e; font-size: 12px; line-height: 1.8; }
@media (min-width: 1800px) { .codead-hero .hero-copy { margin-bottom: 48px; } }
@media (max-width: 900px) {
  .hero.codead-hero { padding: 118px 24px 30px; }
  .codead-hero .hero-copy { gap: 18px 24px; }
  .codead-hero .hero-title { font-size: 40px; }
  .codead-hero .hero-bottom p { font-size: 13px; }
}
@media (max-width: 600px) {
  .hero.codead-hero { padding: 105px 18px 26px; }
  .codead-hero .hero-copy { display: block; margin-bottom: 30px; }
  .codead-hero .eyebrow { margin-bottom: 20px; font-size: 10px; }
  .codead-hero .hero-title { font-size: clamp(35px, 9.7vw, 52px); }
  .codead-hero .hero-bottom { margin-top: 22px; gap: 18px; }
  .codead-hero .hero-bottom p { font-size: 13px; }
  .motion-player canvas { aspect-ratio: 16 / 9; }
  .film-controls { gap: 8px; font-size: 8px; letter-spacing: 0; }
  .film-controls button { min-width: 91px; font-size: 11px; }
  .codead-logo { width: 138px; height: 28px; }
  .motion-preview { padding: 22px 16px; }
  .preview-heading { align-items: flex-start; }
  .preview-heading h1 { font-size: 18px; }
  .preview-heading p { font-size: 11px; }
  .preview-actions { gap: 5px; }
}

/* Full-screen brand film hero. */
.hero.codead-hero { position: relative; display: block; width: 100%; height: 100svh; min-height: 0; padding: 78px 0 0; background: #1d211f; box-sizing: border-box; }
.codead-hero .motion-player { width: 100%; height: 100%; background: #1d211f; }
.codead-hero .motion-player video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.codead-hero .motion-poster { height: 100%; box-sizing: border-box; }
.codead-hero .film-controls { position: absolute; right: 24px; bottom: 20px; z-index: 2; padding: 0; }
.codead-hero .film-controls button { color: #fff; background: rgba(17,25,23,.72); border-color: rgba(255,255,255,.4); }
.codead-hero .film-controls button:hover { color: #10191e; background: #beff00; }
.codead-hero .film-controls button:focus-visible { outline-color: #beff00; }
@media (max-width: 600px) {
  .hero.codead-hero { padding-top: 66px; }
  .codead-hero .motion-player video { object-fit: contain; }
  .codead-hero .film-controls { right: 16px; bottom: 16px; }
}
.site-header:not(.is-scrolled) { background: #f7f7f2; }

@media (max-aspect-ratio: 16/9) {
  .codead-hero .motion-player video { object-fit: contain; }
}
/* Icon-only playback control and native section scroll snapping. */
.codead-hero .film-controls .motion-toggle { min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; font: 700 16px/1 Arial, sans-serif; }
.codead-hero .film-controls .motion-toggle::before { content: none; }
html:has(.codead-hero) { scroll-snap-type: y proximity; scroll-padding-top: 78px; }
main > section, .brand-footer { scroll-snap-align: start; scroll-snap-stop: normal; }
@media (max-width: 600px) { html:has(.codead-hero) { scroll-padding-top: 66px; } }
@media (prefers-reduced-motion: reduce) { html:has(.codead-hero) { scroll-snap-type: none; scroll-behavior: auto; } }

/* Portfolio has its own full-viewport scroll stage and must align at zero. */
main > .folio { scroll-margin-top: -78px; }
@media (max-width: 600px) { main > .folio { scroll-margin-top: -66px; } }
main > .folio-scroll { scroll-snap-align: start; scroll-margin-top: -78px; }
@media (max-width: 600px) { main > .folio-scroll { scroll-margin-top: -66px; } }
.film-controls .motion-toggle:has(svg)::before { content: none; } .motion-toggle svg { display: block; flex-shrink: 0; }
.film-controls .motion-toggle[aria-pressed]:has(svg)::before { content: none; }

/* Film extends behind the fixed navigation; contrast follows the hero boundary. */
.hero.codead-hero { padding-top: 0; }
.site-header.is-over-hero { background: transparent; border-bottom-color: transparent; backdrop-filter: none; color: #fff; }
.site-header.is-over-hero::before { content: ''; position: absolute; inset: 0 0 -32px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(7,13,15,.66),rgba(7,13,15,.28) 65%,transparent); }
.site-header.is-over-hero .codead-logo { filter: brightness(0) invert(1); }
.site-header.is-over-hero .primary-nav > a:not(.nav-cta) { text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.site-header.is-over-hero .menu-toggle { color: #fff; }
.site-header.is-over-hero .nav-cta { color: #10191e; text-shadow: none; }
@media (max-width:760px) {
 .site-header.is-over-hero .primary-nav { background: rgba(13,22,19,.93); color: #fff; }
}

.codead-hero .motion-player video[data-codead-film] { position: relative; z-index: 1; }
.codead-hero .motion-player video.motion-ambience { display: none; }
@media (max-aspect-ratio:16/9) {
 .codead-hero .motion-player.is-ready video.motion-ambience { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.55); transform: scale(1.08); }
}



/* Portrait reel has its own composition; fill the viewport without letterboxing. */
.codead-hero .motion-player.is-mobile-film [data-codead-film]{object-fit:cover;object-position:50% 50%;}
.codead-hero .motion-player.is-mobile-film .motion-ambience{display:none!important;}