/* GTM phase 1.1 rev 3 (2026-10-13): responsive motion. transform/opacity only; durations 150-450 ms; nothing loops.
   Everything that moves sits inside prefers-reduced-motion:no-preference; content is fully visible without JS. */
:root{--fx-ease:cubic-bezier(.2,.7,.2,1)}
@keyframes fx-up{from{opacity:0;translate:0 10px}}
@keyframes fx-rise{from{translate:0 10px}}
@keyframes fx-fade{from{opacity:0;translate:0 -4px}}
html.js .fx{opacity:0;translate:0 12px}
html.js .fx.in{opacity:1;translate:0 0}
.calculator .estimate>strong,#per-video{font-variant-numeric:tabular-nums}
.pricing-jumps,.process-jumps{position:relative}
.jump-ind{position:absolute;left:0;top:0;width:100px;height:3px;background:#162222;transform-origin:0 0;opacity:0;pointer-events:none}
.jump-ind.on{opacity:1}
.tier{position:relative;background:var(--bg)}
.tier--full{background:#e4e8f2}
.tier--full::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.calculator input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:28px}
.calculator input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--p,0%),var(--line) var(--p,0%))}
.calculator input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}
.calculator input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent)}
.calculator input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px #16222240;margin-top:-8px}
.calculator input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px #16222240}
.calculator input[type=range]:focus-visible{outline:0}
.calculator input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #162222}
.calculator input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #162222}
main .button::after{content:'\2192';display:inline-block;margin-left:10px}
main .button:focus-visible{outline:3px solid #162222;outline-offset:3px;box-shadow:0 0 0 3px #fff}
@media(min-width:761px){
 .header{position:sticky;top:0;z-index:30}
 .header::before{content:'';position:absolute;z-index:-1;left:-4.9%;right:-4.9%;top:0;bottom:0;background:var(--bg);box-shadow:0 1px 0 var(--line),0 8px 24px #1622221a;opacity:0;pointer-events:none}
 .header.is-stuck::before{opacity:1}
 html{scroll-padding-top:132px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(prefers-reduced-motion:no-preference){
 .hero-copy>*:not(.contact-anchor),.pricing-intro-copy>*:not(.contact-anchor),.process-intro-grid>div:first-child>*:not(.contact-anchor),.modes-intro-grid>div:first-child>*:not(.contact-anchor),.industry-hero>*:not(.contact-anchor){animation:fx-up .45s var(--fx-ease) backwards;animation-delay:calc(var(--i,0)*70ms)}
.hero-copy>:nth-child(1):not(.contact-anchor),.pricing-intro-copy>:nth-child(1):not(.contact-anchor),.process-intro-grid>div:first-child>:nth-child(1):not(.contact-anchor),.modes-intro-grid>div:first-child>:nth-child(1):not(.contact-anchor),.industry-hero>:nth-child(1):not(.contact-anchor){--i:0}
.hero-copy>:nth-child(2):not(.contact-anchor),.pricing-intro-copy>:nth-child(2):not(.contact-anchor),.process-intro-grid>div:first-child>:nth-child(2):not(.contact-anchor),.modes-intro-grid>div:first-child>:nth-child(2):not(.contact-anchor),.industry-hero>:nth-child(2):not(.contact-anchor){--i:1}
.hero-copy>:nth-child(3):not(.contact-anchor),.pricing-intro-copy>:nth-child(3):not(.contact-anchor),.process-intro-grid>div:first-child>:nth-child(3):not(.contact-anchor),.modes-intro-grid>div:first-child>:nth-child(3):not(.contact-anchor),.industry-hero>:nth-child(3):not(.contact-anchor){--i:2}
.hero-copy>:nth-child(4):not(.contact-anchor),.pricing-intro-copy>:nth-child(4):not(.contact-anchor),.process-intro-grid>div:first-child>:nth-child(4):not(.contact-anchor),.modes-intro-grid>div:first-child>:nth-child(4):not(.contact-anchor),.industry-hero>:nth-child(4):not(.contact-anchor){--i:3}
.hero-copy>:nth-child(5):not(.contact-anchor),.pricing-intro-copy>:nth-child(5):not(.contact-anchor),.process-intro-grid>div:first-child>:nth-child(5):not(.contact-anchor),.modes-intro-grid>div:first-child>:nth-child(5):not(.contact-anchor),.industry-hero>:nth-child(5):not(.contact-anchor){--i:4}
.hero-copy>:nth-child(6):not(.contact-anchor),.pricing-intro-copy>:nth-child(6):not(.contact-anchor),.process-intro-grid>div:first-child>:nth-child(6):not(.contact-anchor),.modes-intro-grid>div:first-child>:nth-child(6):not(.contact-anchor),.industry-hero>:nth-child(6):not(.contact-anchor){--i:5}
.hero-copy>:nth-child(7):not(.contact-anchor),.pricing-intro-copy>:nth-child(7):not(.contact-anchor),.process-intro-grid>div:first-child>:nth-child(7):not(.contact-anchor),.modes-intro-grid>div:first-child>:nth-child(7):not(.contact-anchor),.industry-hero>:nth-child(7):not(.contact-anchor){--i:6}
.hero-copy>:nth-child(8):not(.contact-anchor),.pricing-intro-copy>:nth-child(8):not(.contact-anchor),.process-intro-grid>div:first-child>:nth-child(8):not(.contact-anchor),.modes-intro-grid>div:first-child>:nth-child(8):not(.contact-anchor),.industry-hero>:nth-child(8):not(.contact-anchor){--i:7}

 .hero-copy>h1:not(.contact-anchor),.pricing-intro-copy>h1:not(.contact-anchor),.process-intro-grid>div:first-child>h1:not(.contact-anchor),.modes-intro-grid>div:first-child>h1:not(.contact-anchor),.industry-hero>h1:not(.contact-anchor){animation-name:fx-rise;animation-delay:0s}  /* the H1 is the LCP element: it rises but never starts transparent */
 .hero-visual,.pricing-calculator{animation:fx-rise .45s var(--fx-ease) backwards}
 html.js .fx{transition:opacity .45s var(--fx-ease),translate .45s var(--fx-ease);transition-delay:var(--d,0ms)}
 .header::before{transition:opacity .25s var(--fx-ease)}
 .jump-ind{transition:transform .35s var(--fx-ease),opacity .2s}
 main .button{transition:background-color .2s var(--fx-ease),filter .2s,transform .15s var(--fx-ease),box-shadow .2s}
 main .button::after{transition:transform .2s var(--fx-ease)}
 main .button:hover::after{transform:translateX(3px)}
 main .button:active,main .button:active:hover{transform:scale(.98)}
 .contact-link .contact-icon{transition:transform .2s var(--fx-ease)}
 .contact-link:hover .contact-icon,.contact-link:focus-visible .contact-icon{transform:translateY(-3px) scale(1.06)}
 .contact-link:active .contact-icon{transform:scale(.94)}
 .quality-tabs label>span{transition:background-color .2s var(--fx-ease),color .2s var(--fx-ease),border-color .2s var(--fx-ease),transform .15s var(--fx-ease)}
 .quality-tabs label:active>span{transform:scale(.98)}
 .calculator input[type=range]::-webkit-slider-thumb{transition:transform .18s var(--fx-ease),box-shadow .18s}
 .calculator input[type=range]::-moz-range-thumb{transition:transform .18s var(--fx-ease),box-shadow .18s}
 .calculator input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
 .calculator input[type=range]:active::-moz-range-thumb{transform:scale(1.2)}
 .faq summary span{transition:transform .25s var(--fx-ease)}
 .faq details.is-closing summary span{transform:none}
 .faq details[open]:not(.is-closing)>p{animation:fx-fade .3s var(--fx-ease)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .tier{transition:transform .25s var(--fx-ease),box-shadow .25s var(--fx-ease)}
 .tier:hover{transform:translateY(-4px);box-shadow:0 16px 36px #1622221f;z-index:1}
 .tier--full:hover{box-shadow:0 18px 40px #284dde2e}
}