/* NXTEAMLAB / cinematic motion system. Shared by the home and pack pages. */
:root {
  --motion-bg: #060708;
  --motion-accent: #5b9dff;
  --motion-accent-rgb: 91,157,255;
  --motion-ink: #f6f5f2;
  --motion-muted: #a3a4a6;
  --motion-line: rgba(255,255,255,.16);
  --motion-silver: linear-gradient(115deg,#f5f7fb 0%,#c4cedd 48%,#e7edfa 76%,#bccce3 100%);
  --motion-ease: cubic-bezier(.16,1,.3,1);
  --motion-gutter: max(clamp(1.25rem,4.2vw,5rem),calc((100vw - 1440px)/2));
}
.motion-site { --apple-blue: var(--motion-accent); --nx-blue: var(--motion-accent); background: var(--motion-bg); color: var(--motion-ink); font-family: 'Inter Tight',Arial,sans-serif; }
.motion-site::before { background: var(--motion-bg); }
.motion-site ::selection { color: var(--motion-bg); background: var(--motion-accent); }
.motion-site :where(a,button):focus-visible { outline: 2px solid var(--motion-accent); outline-offset: 6px; }
.motion-site .grain { opacity: .028; }
.motion-site .scroll-progress { z-index: 101; height: 2px; }
.motion-site .scroll-progress span { background: var(--motion-accent); box-shadow: 0 0 12px rgba(var(--motion-accent-rgb),.4); }
.motion-site .site-header,.motion-site .site-header.is-compact { height: 76px; padding-inline: var(--motion-gutter); background: rgba(6,7,8,.76); border-color: var(--motion-line); transition: height .5s var(--motion-ease),background .4s; }
.motion-site .site-header.is-compact { height: 62px; background: rgba(6,7,8,.94); }
.motion-site .site-logo { color: var(--motion-ink); font-size: 1.3rem; }
.motion-site .site-logo img { filter: grayscale(1) brightness(2); }
.motion-site .desktop-nav { font-size: .85rem; gap: 2.6rem; }
.motion-site .desktop-nav a::after { display: block; position: absolute; bottom: -8px; left: 0; width: 100%; height: 1px; background: var(--motion-accent); content: ''; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--motion-ease); }
.motion-site .desktop-nav a:hover::after,.motion-site .desktop-nav a.is-active::after { transform: scaleX(1); }
.motion-site .header-cta { color: var(--motion-ink); font-size: .8rem; gap: 1.4rem; padding: .65rem 1rem; border: 1px solid #ffffff30; border-radius: 3px; }
.motion-site .header-cta span { color: var(--motion-accent); }
.motion-site .hero { grid-template-columns: .94fr 1.06fr; align-items: center; min-height: min(960px,calc(100svh - 64px)); padding: 8rem var(--motion-gutter) 4rem; gap: 0; background: var(--motion-bg); }
.motion-site .hero-copy { max-width: 660px; z-index: 3; }
.motion-site .hero h1 { font-size: clamp(4.5rem,8.85vw,9.4rem); font-weight: 600; line-height: .91; letter-spacing: -.065em; overflow: visible; }
.motion-site .hero h1 em { color: var(--motion-accent); -webkit-text-fill-color: currentColor; font-family: inherit; font-size: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; padding-right: .1em; filter: none; }
.motion-site .hero-intro { max-width: 410px; margin: 1.8rem 0 2.25rem; font-size: clamp(1rem,1.4vw,1.3rem); line-height: 1.5; color: var(--motion-muted); }
.motion-site .hero-actions { gap: .8rem; flex-wrap: wrap; }
.motion-site .chrome-button,.motion-site .text-link { min-height: 54px; padding: .9rem 1.45rem; border-radius: 3px; font-size: .85rem; font-weight: 500; gap: 1.6rem; min-width: 0; transition: background .25s,box-shadow .35s; }
.motion-site .hero-actions .text-link { order: 0; background: var(--motion-silver); color: #10151d; border: 1px solid #e1e9f5; box-shadow: inset 0 1px 0 #fff,0 2px 18px #b9d2ff0d; }
.motion-site .hero-actions .chrome-button { order: 1; background: #ffffff03; border: 1px solid #ffffff40; color: var(--motion-ink); min-width: 0; box-shadow: inset 0 1px 0 #ffffff0a; }
.motion-site .chrome-button { background: var(--motion-silver); color: #10151d; border: 1px solid #e1e9f5; box-shadow: inset 0 1px 0 #fff,0 2px 18px #b9d2ff0d; }
.motion-site .chrome-button::before { display: none; }
.motion-site .chrome-button:hover,.motion-site .text-link:hover { box-shadow: inset 0 1px 0 #fff,0 6px 30px -12px rgba(var(--motion-accent-rgb),.55); }
.motion-site .hero-actions .chrome-button:hover { background: #ffffff0b; }
.motion-site .hero-visual { position: relative; width: 100%; height: min(53vw,720px); min-height: 0; margin: 0; perspective: 1000px; isolation: isolate; }
.motion-site .image-frame { position: absolute; inset: 7% 5% 7% 2%; width: auto; height: auto; min-height: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: url('assets/site/beatpack-hero.jpg') center / cover no-repeat; -webkit-mask-image: radial-gradient(ellipse at center,#000 33%,#000c 47%,transparent 72%); mask-image: radial-gradient(ellipse at center,#000 33%,#000c 47%,transparent 72%); mix-blend-mode: screen; transform: translate3d(var(--parallax-x,0px),var(--float-y,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
.motion-site .image-frame::before,.motion-site .image-frame::after { display: none; }
.sound-field { display: block; position: absolute; inset: -6%; width: 112%; height: 112%; pointer-events: none; z-index: -1; }
.hero-visual > .sound-field { z-index: -1; opacity: .72; }
.motion-site .hero-aura { display: block; inset: 10% -5% 0 auto; width: 58%; height: 80%; background: radial-gradient(ellipse,rgba(var(--motion-accent-rgb),.063),transparent 65%); filter: none; transform: translate3d(var(--aura-x,0px),var(--aura-y,0px),0); }
.motion-site .ticker { display: flex; height: 64px; border-block: 1px solid var(--motion-line); background: var(--motion-bg); }
.motion-site .ticker::before { display: none; }
.motion-site .ticker-track { gap: 3rem; color: #c6c7c7; font-size: .65rem; letter-spacing: .2em; animation: nx-ticker 32s linear infinite; }
.motion-site .ticker i { color: var(--motion-accent); font-size: 1.05rem; }
@keyframes nx-ticker { to { transform: translateX(-50%); } }
.motion-site :is(.production-flow,.beats.section,.manifesto,.pack.section,.apply,.site-footer) { padding-inline: var(--motion-gutter); }
.motion-site :is(.production-flow,.beats.section,.manifesto,.pack.section) { padding-block: clamp(5rem,8vw,9rem); background: var(--motion-bg); }
.motion-site :is(.production-flow,.manifesto,.pack.section) { border-bottom: 1px solid var(--motion-line); }
.motion-site :where(h2,h3,h4) { text-transform: none; }
.motion-site :is(.flow-heading h2,.section-head h2,.manifesto-copy h2,.pack-copy h2,.apply h2) { font-size: clamp(3.2rem,5.9vw,6.5rem); font-weight: 600; letter-spacing: -.06em; line-height: 1; text-transform: none; }
.motion-site .chrome-text { background: none; color: var(--motion-accent); -webkit-text-fill-color: currentColor; }
.motion-site :is(.section-head,.manifesto-copy,.apply) h2 .chrome-text { font-family: inherit; font-size: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; padding-right: .08em; }
.motion-site .flow-heading { max-width: 1000px; text-align: left; }
.motion-site .flow-heading h2 { text-wrap: pretty; }
.motion-site .flow-heading > p:last-child { max-width: 540px; margin-left: 0; }
.motion-site .quiz-embed-shell { border-radius: 3px; border-color: #ffffff30; box-shadow: 0 24px 80px -45px #91b4ee25; }
.motion-site .benefit-rail { grid-template-columns: repeat(4,minmax(0,1fr)); border-color: var(--motion-line); }
.motion-site .benefit-rail > div { display: flex; min-width: 0; min-height: 172px; flex-direction: column; align-items: center; justify-content: flex-start; padding: 2.5rem 1.5rem 2rem; border: 0; border-right: 1px solid var(--motion-line); text-align: center; }
.motion-site .benefit-rail > div:last-child { border-right: 0; }
.motion-site .benefit-rail > div:hover { transform: none; }
.motion-site .benefit-rail strong { color: var(--motion-ink); font-size: 1.12rem; font-weight: 550; line-height: 1.25; letter-spacing: -.02em; }
.motion-site .benefit-rail p { max-width: 25ch; margin: .75rem auto 0; color: var(--motion-muted); font-size: .9rem; line-height: 1.5; }
.motion-site .section-head > div { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; }
.motion-site .section-head > div > p { max-width: 330px; margin: 0 0 .3rem; font-size: 1rem; }
.motion-site .track-list { gap: 0; border-top: 1px solid var(--motion-line); }
.motion-site .track { position: relative; min-height: 108px; grid-template-columns: 54px minmax(150px,.65fr) minmax(180px,1.35fr) 50px 112px; gap: 1.2rem; border: 0; border-bottom: 1px solid var(--motion-line); border-radius: 0; background: transparent; overflow: hidden; transition: background .4s; }
.motion-site .track:hover,.motion-site .track.is-playing { background: rgba(var(--motion-accent-rgb),.032); }
.motion-site .play-button { width: 46px; height: 46px; background: var(--motion-accent); border-color: var(--motion-accent); transition: background .25s,scale .35s var(--motion-ease); }
.motion-site .play-button:hover { background: #90bdff; scale: 1.08; }
.motion-site .play-icon::before { border-left-color: #080808; }
.motion-site .is-playing .play-button { background: var(--motion-ink); border-color: var(--motion-ink); }
.motion-site .track h3 { font-size: .98rem; letter-spacing: .04em; }
.motion-site .waveform { background: transparent; border-radius: 0; box-shadow: none; height: 50px; padding: .2rem 0; transform: scaleY(calc(1 + var(--audio-energy,0)*.18)); }
.motion-site .waveform.is-audio-waveform::after { background: rgba(var(--motion-accent-rgb),.094); }
.motion-site .track-buy { color: var(--motion-accent); }
.motion-site .manifesto { display: grid; grid-template-columns: 1.2fr .8fr; align-items: start; gap: 2rem 3rem; }
.motion-site .manifesto-copy { grid-column: 1; grid-row: 1; max-width: 850px; }
.motion-site .manifesto-copy > p:last-child { margin-bottom: 1rem; }
.motion-site .manifesto-mark { display: block; position: sticky; top: 120px; grid-column: 2; grid-row: 1 / 3; width: 100%; min-height: 0; height: min(43vw,570px); background: url('assets/site/chrome-sound-sculpture.jpg') center / cover no-repeat; opacity: 1; -webkit-mask-image: radial-gradient(ellipse,#000 25%,transparent 72%); mask-image: radial-gradient(ellipse,#000 25%,transparent 72%); }
.motion-site .manifesto-mark.sculpture-live { background: none; -webkit-mask-image: none; mask-image: none; isolation: isolate; }
.motion-site .manifesto-mark > .sound-field { inset: -8%; width: 116%; height: 116%; z-index: 0; }
.motion-site .service-grid { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; border: 0; gap: 0 2rem; }
.motion-site .service-grid article { position: relative; min-height: 200px; padding: 1.5rem 0; border: 0; border-top: 1px solid var(--motion-line); overflow: hidden; transition: padding .5s var(--motion-ease); }
.motion-site .service-grid article:hover { background: transparent; padding-left: 0; }
.motion-site .service-grid h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.motion-site .service-grid p { font-size: .88rem; }
.motion-site .service-action { color: var(--motion-accent); font-size: .78rem; text-transform: none; }
.motion-site .service-contact { grid-column: 1 / -1; }
.motion-site .pack.section { gap: 2rem; }
.motion-site .pack > .pack-copy { display: block; }
.motion-site .pack-copy { max-width: 900px; text-align: center; margin-inline: auto; }
.motion-site .pack-copy h2 br { display: none; }
.motion-site .pack-copy > p { margin-inline: auto; max-width: 680px; }
.motion-site .pack-copy ul { justify-content: center; }
.motion-site .pack-copy > .chrome-button { margin-top: 1rem; }
.motion-site .pack-selector { border-top: 1px solid var(--motion-line); padding-top: 2rem; }
.motion-site .pack-selector-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin: 2rem 0; }
.motion-site .pack-selector-head h3 { max-width: 600px; font-size: clamp(2rem,3vw,3rem); line-height: 1.05; text-transform: none; }
.motion-site .pack-selector-head > p { max-width: 360px; font-size: .9rem; }
.motion-site .pack-options { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.motion-site .pack-option { position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; min-height: 0; perspective: none; transform: none !important; text-align: center; }
.motion-site .pack-option-image { position: relative; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 5; margin: 0 0 1.35rem; overflow: visible; -webkit-mask-image: radial-gradient(ellipse,#000 40%,transparent 73%); mask-image: radial-gradient(ellipse,#000 40%,transparent 73%); transform: none; filter: brightness(1) saturate(1); transition: filter .35s ease; }
.motion-site .pack-option-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.motion-site .pack-option-image::before { position: absolute; inset: 8% 1% 14%; z-index: 1; content: ''; pointer-events: none; background: radial-gradient(ellipse at 50% 55%,rgba(var(--option-accent),.24),rgba(var(--option-accent),.1) 38%,transparent 72%); mix-blend-mode: screen; filter: blur(16px); opacity: 0; transition: opacity .35s ease; }
.motion-site .pack-option:is(:hover,:focus-visible) .pack-option-image { filter: brightness(1.38) saturate(1.3); }
.motion-site .pack-option:is(:hover,:focus-visible) .pack-option-image::before { opacity: 1; }
.motion-site .pack-option-copy { align-self: start; display: grid; grid-template-rows: auto auto auto; padding-inline: .5rem; }
.motion-site .pack-option-copy::after { margin-top: 1rem; color: var(--motion-accent); transition: color .35s; }
.motion-site .pack-option h4 { min-height: 1.15em; margin: 0 0 .55rem; color: var(--motion-ink); font-size: clamp(1.1rem,1.8vw,1.5rem); line-height: 1.15; transition: color .35s,text-shadow .35s; }
.motion-site .pack-option:is(:hover,:focus-visible) h4 { color: rgb(var(--option-accent)); text-shadow: 0 0 24px rgba(var(--option-accent),.4); }
.motion-site .pack-option:is(:hover,:focus-visible) .pack-option-copy::after { color: rgb(var(--option-accent)); }
.motion-site .pack-option-copy p { margin: 0; line-height: 1.5; }
.motion-site .pack-option-copy::before { content: ''; display: block; width: 28px; height: 1px; margin: 0 auto 1.25rem; background: rgba(var(--option-accent),.6); transition: width .35s var(--motion-ease),box-shadow .35s; }
.motion-site .pack-option:is(:hover,:focus-visible) .pack-option-copy::before { width: 52px; box-shadow: 0 0 14px rgba(var(--option-accent),.5); }
.motion-site .apply { position: relative; isolation: isolate; min-height: 640px; padding-block: 7rem; display: grid; grid-template-columns: 1fr 1fr; align-content: center; justify-items: start; gap: 1.6rem; overflow: hidden; background: var(--motion-bg); text-align: left; }
.motion-site .apply::before { display: none; }
.motion-site .apply h2 { grid-column: 1 / -1; max-width: 900px; text-wrap: initial; font-size: clamp(3.6rem,7vw,7.5rem); }
.motion-site .apply h2 .chrome-text { font-style: normal; }
.motion-site .apply > p:not(.section-label) { grid-column: 1; font-family: inherit; font-size: 1.08rem; }
.motion-site .apply .chrome-button { grid-column: 1; justify-self: start; min-height: 52px; margin: 0; }
.motion-site .apply > .sound-field { inset: -15% -30% -15% auto; width: 100%; height: 130%; opacity: .5; z-index: -1; }
.motion-site .site-footer { gap: 2rem; border-color: var(--motion-line); background: var(--motion-bg); }
.motion-site .site-footer > div { display: flex; flex-direction: row; flex-wrap: wrap; }
/* Viewport-sized rendering buffer; the scene inside uses document coordinates.
   This avoids a page-height canvas while the artwork scrolls with the content. */
.motion-site.has-ambient-field { isolation: isolate; }
.ambient-field { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.has-ambient-field > main,.has-ambient-field > .site-footer { position: relative; z-index: 1; }
.motion-site.has-ambient-field :is(.hero,.ticker,.production-flow,.beats.section,.manifesto,.pack.section,.apply,.site-footer) { background: transparent; }
/* Progressive enhancement: content is readable even when scripts are unavailable. */
.motion-word { display: inline-block; }
.motion-ready .motion-heading .motion-word { font: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; -webkit-text-fill-color: inherit; }
.motion-ready[data-motion='full'] .motion-heading .motion-word { opacity: 0; transform: translate3d(0,1.08em,0) rotate(3deg); transition: opacity .7s ease,transform 1.15s var(--motion-ease); transition-delay: calc(var(--word-index,0)*45ms); }
.motion-ready[data-motion='full'] .motion-heading.words-visible .motion-word { opacity: 1; transform: none; }
.motion-ready[data-motion='full'] :is(.reveal,.pack-reveal):not(.is-visible) { opacity: 0; transform: translateY(32px); filter: none; }
.motion-ready[data-motion='full'] :is(.reveal,.pack-reveal) { transition: opacity .85s ease,transform 1.1s var(--motion-ease); transition-delay: var(--reveal-delay,0ms); }
.motion-ready :is(.reveal,.pack-reveal).is-visible { opacity: 1; transform: none; filter: none; }
/* Controls stay anchored; hover only changes their scale around the centre. */
.motion-site :is(.chrome-button,.text-link,.header-cta,.play-button,.track-buy,.service-action,.menu-toggle),
.motion-pack :is(.pack-button,.header-buy,.preview-button) { transform: none !important; translate: none !important; rotate: none; scale: 1; transform-origin: center; transition: scale .25s var(--motion-ease),background .25s,color .25s,box-shadow .35s; }
@media (hover:hover) and (pointer:fine) {
  .motion-site :is(.chrome-button,.text-link,.header-cta,.play-button,.track-buy,.menu-toggle):hover,
  .motion-pack :is(.pack-button,.header-buy,.preview-button):hover { scale: 1.035; }
  .motion-site .service-action:hover { color: #a5caff; }
}
[data-spotlight] { --light-x: 50%; --light-y: 50%; }
[data-spotlight]::after { display: block; content: ''; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--light-x) var(--light-y),rgba(var(--motion-accent-rgb),.085),transparent 70%); opacity: 0; pointer-events: none; transition: opacity .5s; }
[data-spotlight]:hover::after { opacity: 1; }
.motion-toggle { display: inline-flex; width: fit-content; align-items: center; gap: .6rem; padding: .7rem 0; color: #a3a4a6; border: 0; background: transparent; cursor: pointer; font: 400 .75rem 'DM Mono',monospace; }
.motion-toggle::before { content: ''; width: 6px; height: 6px; background: var(--motion-accent); border-radius: 50%; box-shadow: 0 0 10px rgba(var(--motion-accent-rgb),.33); }
.motion-toggle[aria-pressed='true']::before { background: #777; box-shadow: none; }
/* Pack pages keep their own artwork palette and share the interaction language. */
.motion-pack .product-stage { isolation: isolate; perspective: 1200px; }
.motion-pack .product-stage > .sound-field { z-index: -1; opacity: .65; }
.motion-pack .pack-product-shot { animation: none; transform: translate3d(var(--parallax-x,0px),var(--float-y,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
.motion-pack .inside-grid article { position: relative; overflow: hidden; }
.motion-pack .pack-button { border-radius: 4px; }
.motion-pack .pack-footer { flex-wrap: wrap; }
body[data-motion='paused'] *,body[data-motion='paused'] *::before,body[data-motion='paused'] *::after,body[data-motion='reduced'] *,body[data-motion='reduced'] *::before,body[data-motion='reduced'] *::after { animation-play-state: paused !important; scroll-behavior: auto !important; }
body:not([data-motion='full']) :is(.reveal,.pack-reveal,.motion-word) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
body:not([data-motion='full']) [data-spotlight]::after { display: none; }
@media (max-width:1100px) and (min-width:821px) {
  .motion-site .hero-actions { max-width: 380px; }
  .motion-site .hero h1 { font-size: 8.7vw; }
  .motion-site .track { grid-template-columns: 46px minmax(140px,.8fr) minmax(100px,1fr) 45px 100px; gap: .8rem; }
  .motion-site .manifesto { grid-template-columns: 1.25fr .75fr; gap: 2rem; }
  .motion-site .pack-option h4 { min-height: 2.3em; }
}
@media (max-width:980px) {
  .motion-site .benefit-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .motion-site .benefit-rail > div:nth-child(2n) { border-right: 0; }
  .motion-site .benefit-rail > div:nth-child(-n+2) { border-bottom: 1px solid var(--motion-line); }
}
@media (max-width:820px) {
  .motion-site .site-header,.motion-site .site-header.is-compact { height: 62px; padding-inline: 1.25rem; }
  .motion-site .site-logo { font-size: 1.15rem; }
  .motion-site .desktop-nav { top: 62px; background: #08090af5; gap: .25rem; }
  .motion-site .desktop-nav a::after { display: none; }
  .motion-site .header-cta { font-size: .75rem; padding: .4rem .65rem; gap: .6rem; }
  .motion-site .menu-toggle { margin-left: auto; }
  .motion-site .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 7.5rem; padding-bottom: 1.5rem; }
  .motion-site .hero h1 { font-size: clamp(4.2rem,15.5vw,7.5rem); line-height: .91; }
  .motion-site .hero-intro { max-width: 400px; margin-block: 1.6rem; font-size: 1rem; }
  .motion-site .hero-actions { gap: .65rem; }
  .motion-site .hero-actions .chrome-button,.motion-site .hero-actions .text-link { width: auto; min-height: 48px; padding-inline: 1rem; gap: .65rem; font-size: .78rem; }
  .motion-site .hero-visual { width: 100%; height: min(100vw,570px); margin: .8rem 0 0; }
  .motion-site .image-frame { inset: 3% 0; }
  .motion-site .ticker { height: 52px; }
  .motion-site .ticker-track { font-size: .58rem; gap: 2rem; }
  .motion-site :is(.flow-heading h2,.section-head h2,.manifesto-copy h2,.pack-copy h2) { font-size: clamp(2.55rem,10.4vw,4rem); line-height: 1.03; }
  .motion-site .section-head > div { display: block; }
  .motion-site .section-head > div > p { max-width: 400px; margin-top: 1.3rem; }
  .motion-site .track { min-height: 124px; grid-template-columns: 40px minmax(0,1fr) auto; grid-template-rows: auto 42px; gap: .4rem .75rem; padding: 1rem 0; }
  .motion-site .play-button { width: 38px; height: 38px; }
  .motion-site .track h3 { font-size: .86rem; }
  .motion-site .waveform { grid-column: 2 / 4; width: 100%; height: 40px; }
  .motion-site .track-buy { font-size: .7rem; min-height: 44px; align-self: center; }
  .motion-site .manifesto { grid-template-columns: 1fr; gap: 2rem; }
  .motion-site .manifesto-copy { grid-column: 1; grid-row: 1; }
  .motion-site .manifesto-mark { position: relative; top: auto; grid-column: 1; grid-row: 2; width: 100%; height: min(75vw,430px); margin: -1rem 0; }
  .motion-site .service-grid { grid-column: 1; grid-row: 3; gap: 0 1.5rem; }
  .motion-site .service-grid article { min-height: 220px; padding: 1.25rem 0; }
  .motion-site .service-grid h3 { font-size: 1.02rem; }
  .motion-site .service-grid p { font-size: .82rem; }
  .motion-site .service-action { margin-top: .7rem; min-height: 44px; font-size: .75rem; }
  .motion-site .pack-selector-head { display: block; margin-top: 1rem; }
  .motion-site .pack-selector-head h3 { font-size: 2.1rem; }
  .motion-site .pack-copy h2 br { display: block; }
  .motion-site .pack-options { grid-template-columns: 1fr 1fr; gap: 1.5rem .3rem; }
  .motion-site .pack-option-copy { padding-inline: .2rem; }
  .motion-site .pack-option h4 { min-height: 2.3em; font-size: clamp(1rem,4.5vw,1.35rem); }
  .motion-site .pack-option-copy::after { font-size: .78rem; }
  .motion-site .benefit-rail > div { min-height: 160px; padding: 1.5rem .85rem; }
  .motion-site .benefit-rail strong { display: flex; min-height: 2.5em; align-items: center; justify-content: center; font-size: 1rem; }
  .motion-site .benefit-rail p { max-width: 22ch; margin-top: .6rem; font-size: .82rem; }
  .motion-site .apply { grid-template-columns: 1fr; min-height: 540px; padding-block: 5rem; }
  .motion-site .apply h2 { max-width: 650px; font-size: clamp(3rem,11vw,5rem); grid-column: 1; }
  .motion-site .apply > .sound-field { right: -70%; width: 180%; opacity: .25; }
  .motion-site .site-footer { padding-block: 2.5rem; }
}
@media (max-width:380px) {
  .motion-site .hero-actions { flex-direction: column; align-items: stretch; }
  .motion-site .service-grid { grid-template-columns: 1fr; }
  .motion-site .service-grid article { min-height: 0; }
  .motion-site .header-cta { gap: .4rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Older Safari keeps the same layout when small viewport units are unavailable. */
@supports not (height: 100svh) {
  .motion-site .hero { min-height: min(960px,calc(100vh - 64px)); }
  .motion-pack .pack-hero { min-height: min(100vh,980px); }
  @media (max-width:820px) { .motion-site .hero { min-height: 0; } }
}
/* A solid header remains readable when backdrop blur is unsupported. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .motion-site .site-header,.motion-pack .pack-header { background: rgba(6,7,8,.97); }
}
/* No transform fallback on service links: their size stays fixed. */
@supports not (scale:1) {
  .motion-site :is(.chrome-button,.text-link,.header-cta,.play-button,.track-buy,.menu-toggle):hover,
  .motion-pack :is(.pack-button,.header-buy,.preview-button):hover { box-shadow: 0 0 20px -8px rgba(var(--motion-accent-rgb),.5); }
}