:root {
    --paper:#f6f5f0;
    --ink:#252722;
    --muted:#686b62;
    --line:#dddfd5;
    --orange:#c44b20;
    --ease-out:cubic-bezier(.16,1,.3,1);
    --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
::selection {
    background:var(--orange);
    color:#fff;
}
* {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}
a {
    color:inherit;
    text-decoration:none;
}
button,a {
    -webkit-tap-highlight-color:transparent;
}
a:focus-visible {
    outline:3px solid var(--orange);
    outline-offset:6px;
}
h1,h2,h3,p {
    margin:0;
}
h1,h2,h3 {
    text-wrap:balance;
}
p {
    text-wrap:pretty;
}
/* Small uppercase labels share one mono voice. */
.eyebrow,.visual-tag,.visual-index,.product-category,.intro-strip>div,.art-label,.art-bottom,.approach-number,.hero-note {
    font-family:var(--mono);
    letter-spacing:.08em;
}
a, .circle-arrow {
    transition:background .2s,color .2s,transform .25s;
}
.container {
    max-width:1280px;
    width:calc(100% - 112px);
    margin-inline:auto;
}
.site-header {
    position:sticky;
    top:0;
    z-index:20;
    border-bottom:1px solid transparent;
    background:color-mix(in srgb,var(--paper) 78%,transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
    backdrop-filter:saturate(1.4) blur(14px);
    transition:border-color .3s,box-shadow .3s;
}
.site-header.is-scrolled .navigation {
    height:76px;
}
.site-header.is-scrolled {
    border-bottom-color:var(--line);
    box-shadow:0 8px 24px -18px #25272233;
}
.navigation {
    height:100px;
    transition:height .4s var(--ease-out);
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.brand {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:23px;
    letter-spacing:-1px;
    font-weight:700;
}
.brand-icon {
    width:38px;
    height:38px;
    overflow:hidden;
    position:relative;
    border-radius:50%;
    background:white;
}
.brand-icon img {
    position:absolute;
    width:65px;
    height:65px;
    max-width:none;
    left:-13px;
    top:-13px;
}
.brand-dot {
    font-size:11px;
    align-self:flex-start;
    margin-top:8px;
    margin-left:-3px;
}
.nav-links {
    display:flex;
    gap:36px;
    font-size:14px;
}
.nav-links a:hover,.email-link:hover {
    color:var(--orange);
}
.nav-contact {
    font-size:14px;
    border:1px solid #bcbfb4;
    border-radius:50px;
    padding:13px 20px;
    display:flex;
    gap:24px;
}
.nav-contact:hover {
    background:var(--ink);
    color:white;
}
.hero {
    padding-block:76px 64px;
    display:grid;
    grid-template-columns:1.13fr 1fr;
    align-items:center;
    gap:48px;
}
.eyebrow {
    font-size:11px;
    font-weight:500;
    line-height:1.6;
}
.hero .eyebrow {
    display:flex;
    gap:9px;
    align-items:center;
    margin-bottom:28px;
}
.status-dot {
    width:6px;
    height:6px;
    background:var(--orange);
    border-radius:50%;
}
h1 {
    font-size:clamp(46px,5.1vw,76px);
    font-weight:500;
    line-height:1.02;
    letter-spacing:-.055em;
}
h1 .accent {
    color:var(--orange);
}
.hero-description {
    max-width:405px;
    font-size:16px;
    line-height:1.7;
    color:var(--muted);
    margin:26px 0 29px;
}
.button {
    display:inline-flex;
    gap:36px;
    align-items:center;
    justify-content:space-between;
    font-size:14px;
    font-weight:500;
    border-radius:999px;
    padding:17px 20px 17px 26px;
}
.button span {
    font-size:19px;
    line-height:1;
}
.button-dark {
    background:var(--ink);
    color:#fff;
}
.button:hover {
    background:var(--orange);
    transform:translateY(-2px);
    box-shadow:0 12px 24px -12px #c44b2099;
}
.hero-note {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    letter-spacing:.02em;
    color:var(--muted);
    margin-top:30px;
}
.small-line {
    width:26px;
    height:1px;
    background:#999d91;
}
.hero-art {
    isolation:isolate;
    height:490px;
    position:relative;
    overflow:hidden;
    border-radius:8px;
    background:#242b27;
    color:#e4e7dc;
    --orbit-w:400px;
}
.art-grid {
    position:absolute;
    inset:-48px;
    background-image:linear-gradient(#c7d5b709 1px,transparent 1px),linear-gradient(90deg,#c7d5b709 1px,transparent 1px);
    background-size:48px 48px;
}
.planet {
    position:absolute;
    width:260px;
    height:260px;
    left:50%;
    top:47%;
    z-index:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle at 33% 25%,#ffce87 0%,#f89542 24%,#ea6325 47%,#9d3718 70%,#482a20 94%);
    box-shadow:-18px 14px 50px #ff88351a,inset -16px -10px 30px #291c2050;
}
.art-orbit {
    position:absolute;
    z-index:2;
    left:50%;
    top:47%;
    width:var(--orbit-w);
    height:165px;
    border:1px solid #d7d7b875;
    border-radius:50%;
    transform:translate(-50%,-50%) rotate(-35deg);
}
.orbit-two {
    transform:translate(-50%,-50%) rotate(52deg);
    width:350px;
    height:350px;
    border-color:#aebaa126;
    z-index:0;
}
.satellite-track {
    position:absolute;
    z-index:3;
    left:50%;
    top:47%;
    width:var(--orbit-w);
    height:165px;
    transform:translate(-50%,-50%) rotate(-35deg);
}
.sat-x,.sat-y {
    position:absolute;
    inset:0;
}
/* Resting point on the front of the ring; motion moves it around the full ellipse. */
.sat-x {
    transform:translateX(-42%);
}
.sat-y {
    transform:translateY(27%);
}
.satellite {
    position:absolute;
    left:50%;
    top:50%;
    margin:-9.5px;
    transform:rotate(35deg);
    width:19px;
    height:19px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 25%,#f2f0dd,#b3b4a0 60%,#6b7265);
    box-shadow:0 0 20px #e7edba19;
}
.art-label {
    position:absolute;
    top:27px;
    left:27px;
    font-size:10px;
    color:#c2c8bc;
}
.art-cross {
    position:absolute;
    color:#85917e;
    font-weight:300;
    font-size:22px;
}
.cross-one {
    right:27px;
    top:20px;
}
.cross-two {
    left:27px;
    bottom:114px;
}
.art-bottom {
    position:absolute;
    bottom:26px;
    left:27px;
    right:27px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    font-size:10px;
    line-height:1.6;
}
.art-asterisk {
    font-size:50px;
    line-height:1;
    color:#d7dabc;
}
.intro-strip {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-block:1px solid var(--line);
    padding-block:25px;
    color:var(--muted);
    gap:24px;
}
.intro-strip>span {
    font-size:12px;
}
.intro-strip>div {
    display:flex;
    align-items:center;
    gap:26px;
    font-size:10px;
    font-weight:500;
}
.strip-star {
    color:var(--orange);
    font-size:20px;
}
.products-section {
    padding-block:96px;
}
.section-heading {
    display:flex;
    justify-content:space-between;
    gap:32px;
    align-items:flex-end;
    margin-bottom:38px;
}
.section-heading .eyebrow {
    color:var(--muted);
    margin-bottom:20px;
}
h2 {
    font-size:48px;
    letter-spacing:-.045em;
    line-height:1.12;
    font-weight:500;
}
.section-heading>p {
    max-width:315px;
    font-size:14px;
    line-height:1.7;
    color:var(--muted);
    padding-bottom:4px;
}
.product-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
}
.product-card {
    display:block;
    min-width:0;
}
.product-visual {
    height:320px;
    border-radius:7px;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    transition:filter .3s,box-shadow .5s var(--ease-out);
}
.product-card:hover .product-visual {
    filter:brightness(1.04);
    box-shadow:0 24px 48px -28px #25272255;
}
.visual-tag,.visual-index {
    position:absolute;
    left:23px;
    font-size:10px;
    z-index:5;
}
.visual-tag {
    top:22px;
}
.visual-index {
    bottom:22px;
}
.video-visual {
    background:#dcded4;
    color:#414939;
    background-image:radial-gradient(ellipse at 65% 65%,#b3bca6,transparent 70%);
}
.film-frame {
    position:absolute;
    left:50%;
    top:50%;
    width:245px;
    height:190px;
    border:5px solid #f2f1e8;
    border-radius:9px;
    box-shadow:0 15px 25px #27372120;
}
.frame-back {
    transform:translate(-38%,-44%) rotate(11deg);
    background:#8c9782;
}
.frame-front {
    transform:translate(-58%,-52%) rotate(-8deg);
    overflow:hidden;
    background:linear-gradient(#b6c5b3,#f5d9a6);
}
.film-sun {
    position:absolute;
    left:52%;
    top:25px;
    width:61px;
    height:61px;
    background:#fff2c5;
    border-radius:50%;
    box-shadow:0 0 40px #fff0c577;
}
.film-land {
    position:absolute;
    width:310px;
    height:150px;
    border-radius:50%;
    bottom:-77px;
    left:-85px;
    transform:rotate(19deg);
    background:#566b58;
}
.land-two {
    left:65px;
    bottom:-68px;
    background:#354d43;
    transform:rotate(-25deg);
}
.play-icon {
    position:absolute;
    left:50%;
    top:46%;
    transform:translate(-50%,-50%);
    background:#f9f7ed33;
    backdrop-filter:blur(6px);
    border:1px solid #fff9;
    border-radius:50%;
    color:white;
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    padding-left:3px;
    font-size:12px;
}
.film-caption {
    position:absolute;
    color:#fff;
    bottom:15px;
    left:15px;
    font-size:11px;
}
.banana-visual {
    background:#e8e6b6;
    color:#595c26;
}
.creative-shape {
    position:absolute;
    border-radius:100px;
    width:85px;
    height:210px;
    left:50%;
    top:50%;
    transform-origin:center;
    background:#adba3e;
    box-shadow:inset -8px -8px 20px #78862c44,4px 10px 20px #7c813b19;
}
.shape-one {
    transform:translate(-120%,-46%) rotate(-38deg);
    background:#c4cd61;
}
.shape-two {
    transform:translate(-45%,-49%) rotate(-3deg);
}
.shape-three {
    transform:translate(30%,-45%) rotate(32deg);
    background:#7e923a;
}
.creative-spark {
    position:absolute;
    left:65%;
    top:21%;
    font-size:70px;
    color:#fdfcdc;
    line-height:1;
    transform:rotate(15deg);
}
.product-info {
    padding:23px 0 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.product-category {
    font-size:10px;
    color:var(--muted);
    margin-bottom:9px;
}
.product-info h3 {
    font-size:26px;
    letter-spacing:-.03em;
    font-weight:500;
    margin-bottom:8px;
}
.product-info p:last-child {
    font-size:13px;
    color:var(--muted);
    line-height:1.6;
}
.circle-arrow {
    flex-shrink:0;
    width:43px;
    height:43px;
    border:1px solid #c6c9be;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:22px;
}
.product-card:hover .circle-arrow {
    background:var(--ink);
    color:white;
}
.about-section {
    background:#eeeee6;
    border-block:1px solid var(--line);
    padding-block:82px;
}
.approach-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin-top:58px;
}
.approach-grid article {
    position:relative;
    padding-top:22px;
}
.approach-grid article::before {
    content:'';
    position:absolute;
    inset:0 0 auto;
    height:1px;
    background:#ced1c3;
    transform-origin:left;
}
.approach-number {
    color:var(--orange);
    font-size:12px;
}
.approach-grid h3 {
    font-size:20px;
    letter-spacing:-.5px;
    font-weight:500;
    margin:28px 0 13px;
}
.approach-grid p {
    font-size:14px;
    line-height:1.75;
    color:var(--muted);
    max-width:315px;
}
.contact-section {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:32px;
    padding-block:95px;
}
.contact-section .eyebrow {
    color:var(--muted);
    margin-bottom:25px;
}
.contact-section h2 {
    font-size:clamp(56px,6.4vw,84px);
    letter-spacing:-.055em;
    line-height:1.04;
}
.contact-section h2 .accent {
    color:var(--orange);
}
.contact-copy {
    width:315px;
}
.contact-copy p {
    font-size:16px;
    line-height:1.7;
    color:var(--muted);
    margin-bottom:25px;
}
.email-link {
    display:block;
    font-size:12px;
    margin-top:20px;
}
footer {
    border-top:1px solid var(--line);
}
.footer-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:32px 0;
}
.footer-top .brand {
    font-size:20px;
}
.footer-top p,.back-top {
    font-size:11px;
    color:var(--muted);
}
.footer-bottom {
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:22px 0 28px;
    font-size:10px;
    color:var(--muted);
}
.skip-link {
    position:fixed;
    top:-70px;
    left:16px;
    padding:15px;
    background:var(--ink);
    color:white;
    z-index:10;
}
.skip-link:focus {
    top:12px;
}
@media(min-width:1500px) {
    .hero {
        gap:80px;
    }
    .hero-art {
        height:530px;
    }
}
@media(max-width:1050px) {
    .container {
        width:calc(100% - 64px);
    }
    .hero {
        gap:28px;
        padding-block:55px;
    }
    h1 {
        font-size:56px;
    }
    .hero-art {
        height:450px;
    }
    .planet {
        width:220px;
        height:220px;
    }
    .hero-art {
        --orbit-w:330px;
    }
    .orbit-two {
        width:300px;
        height:300px;
    }
    .intro-strip>div {
        gap:14px;
        font-size:9px;
    }
    .intro-strip>span {
        font-size:11px;
    }
    h2 {
        font-size:39px;
    }
    .approach-grid {
        gap:25px;
    }
    .section-heading>p {
        max-width:260px;
    }
}
@media(max-width:760px) {
    .container {
        width:calc(100% - 40px);
    }
    .site-header {
        position:static;
        border-bottom-color:var(--line);
        box-shadow:none;
    }
    .site-header.is-scrolled .navigation {
        height:auto;
    }
    .navigation {
        min-height:80px;
        height:auto;
        flex-wrap:wrap;
        padding-top:18px;
    }
    .brand {
        font-size:20px;
    }
    .nav-links {
        display:flex;
        order:3;
        width:100%;
        justify-content:center;
        gap:32px;
        padding:18px 0;
        font-size:12px;
    }
    .nav-contact {
        padding:11px 15px;
        gap:16px;
        font-size:12px;
    }
    .hero {
        grid-template-columns:1fr;
        padding-block:42px 32px;
        gap:35px;
    }
    .hero .eyebrow {
        font-size:10px;
        margin-bottom:23px;
    }
    h1 {
        font-size:clamp(44px,11vw,64px);
    }
    .hero-description {
        font-size:15px;
        max-width:430px;
        margin:22px 0;
    }
    .hero-note {
        margin-top:21px;
    }
    .hero-art {
        height:360px;
    }
    .planet {
        width:220px;
        height:220px;
    }
    .hero-art {
        --orbit-w:340px;
    }
    .orbit-two {
        width:290px;
        height:290px;
    }
    .intro-strip {
        align-items:flex-start;
        flex-direction:column;
        gap:16px;
        padding:22px 0;
    }
    .intro-strip>div {
        width:100%;
        justify-content:space-between;
        gap:8px;
        font-size:9px;
        letter-spacing:0;
    }
    .section-heading {
        flex-direction:column;
        align-items:flex-start;
        gap:22px;
        margin-bottom:30px;
    }
    h2 {
        font-size:37px;
    }
    .section-heading>p {
        max-width:400px;
        font-size:14px;
    }
    .products-section {
        padding-block:57px;
    }
    .product-grid {
        grid-template-columns:1fr;
        gap:36px;
    }
    .product-visual {
        height:310px;
    }
    .product-info {
        padding-top:18px;
    }
    .about-section {
        padding-block:52px;
    }
    .approach-grid {
        grid-template-columns:1fr;
        gap:28px;
        margin-top:35px;
    }
    .approach-grid h3 {
        margin:16px 0 10px;
    }
    .approach-grid p {
        max-width:100%;
    }
    .contact-section {
        flex-direction:column;
        align-items:flex-start;
        padding-block:58px;
        gap:32px;
    }
    .contact-section .eyebrow {
        font-size:10px;
    }
    .contact-section h2 {
        font-size:clamp(48px,14vw,64px);
    }
    .contact-copy {
        width:auto;
    }
    .footer-top {
        flex-wrap:wrap;
        gap:18px;
        padding:25px 0;
    }
    .footer-top p {
        order:3;
        width:100%;
    }
    .footer-bottom {
        font-size:9px;
        gap:12px;
    }
    .art-label {
        font-size:9px;
    }
}
/* Motion. Everything below is gated on .motion-enabled (set before first paint,
   removed by the pause toggle or reduced-motion), so content is always visible without it. */
.motion-toggle {
    border:0;
    border-bottom:1px solid var(--line);
    padding:4px 0;
    margin-left:8px;
    color:var(--muted);
    background:none;
    font:inherit;
    cursor:pointer;
}
.motion-toggle:focus-visible {
    outline:2px solid var(--orange);
    outline-offset:4px;
}
.hero-note {
    flex-wrap:wrap;
}
.line {
    display:block;
    overflow:hidden;
    padding-bottom:.1em;
    margin-bottom:-.1em;
}
.line>span {
    display:block;
}
.arrow {
    display:inline-grid;
    overflow:hidden;
}
.arrow>span, .circle-arrow>span {
    display:block;
    text-shadow:-1.2em 1.2em 0 currentColor;
}
.circle-arrow {
    overflow:hidden;
}
.nav-links a {
    position:relative;
}
.nav-links a::after {
    content:'';
    position:absolute;
    inset:auto 0 -6px;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .5s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after {
    transform:scaleX(1);
    transform-origin:left;
}

/* Entrances: JS adds .is-in (with a staggered --delay) as each group scrolls into view. */
.motion-enabled [data-reveal]:not(.is-in) {
    opacity:0;
}
.motion-enabled [data-lines]:not(.is-in) .line>span {
    transform:translateY(110%);
}
.motion-enabled [data-reveal].is-in {
    animation:rise 1s var(--ease-out) var(--delay,0ms) backwards;
}
.motion-enabled [data-lines].is-in .line>span {
    animation:line-up 1.15s var(--ease-out) calc(var(--delay,0ms) + var(--i,0) * 110ms) backwards;
}
.motion-enabled [data-reveal="card"].is-in {
    animation-name:rise-plain;
    animation-duration:1.2s;
}
.motion-enabled [data-reveal="card"].is-in .product-visual {
    animation:wipe-up 1.3s var(--ease-out) var(--delay,0ms) backwards;
}
.motion-enabled [data-reveal="card"].is-in .product-visual>* {
    animation:settle 1.8s var(--ease-out) var(--delay,0ms) backwards;
}
.motion-enabled .approach-grid article.is-in::before {
    animation:draw-line 1.4s var(--ease-out) var(--delay,0ms) backwards;
}
.motion-enabled [data-reveal="art"].is-in {
    animation:wipe-up 1.4s var(--ease-out) var(--delay,0ms) backwards;
}
.motion-enabled .hero-art.is-in .planet {
    animation:planet-in 1.8s var(--ease-out) calc(var(--delay,0ms) + 250ms) backwards, planet-float 9s ease-in-out infinite;
}
.motion-enabled .hero-art.is-in .art-orbit {
    animation:orbit-in 1.8s var(--ease-out) calc(var(--delay,0ms) + 400ms) backwards;
}
.motion-enabled .hero-art.is-in .satellite-track {
    animation:orbit-in 1.8s var(--ease-out) calc(var(--delay,0ms) + 400ms) backwards, satellite-depth 18s steps(1) infinite;
}
.motion-enabled .hero-art.is-in :is(.art-label,.art-cross,.art-bottom) {
    animation:fade 1.2s ease calc(var(--delay,0ms) + 700ms) backwards;
}
@keyframes rise {
    from { opacity:0; transform:translateY(22px); filter:blur(6px); }
}
@keyframes rise-plain {
    from { opacity:0; transform:translateY(40px); }
}
@keyframes line-up {
    from { transform:translateY(110%); }
}
@keyframes wipe-up {
    from { clip-path:inset(100% 0 0 0 round 8px); }
    to { clip-path:inset(0 0 0 0 round 8px); }
}
@keyframes settle {
    from { scale:1.12; }
}
@keyframes draw-line {
    from { transform:scaleX(0); }
}
@keyframes planet-in {
    from { opacity:0; scale:.82; }
}
@keyframes orbit-in {
    from { opacity:0; scale:.9; }
}
@keyframes fade {
    from { opacity:0; }
}

/* Ambient hero: the satellite travels the ring (passing behind the planet on the far side),
   layers drift with the pointer (--mx/--my from JS), and everything pauses off-screen. */
/* All four satellite animations start on the same frame (.is-in) so depth stays in phase with the orbit. */
.motion-enabled .hero-art.is-in .sat-x {
    animation:sat-x 9s cubic-bezier(.37,0,.63,1) infinite alternate;
}
.motion-enabled .hero-art.is-in .sat-y {
    animation:sat-y 9s cubic-bezier(.37,0,.63,1) -4.5s infinite alternate;
}
.motion-enabled .hero-art.is-in .satellite {
    animation:sat-scale 9s cubic-bezier(.37,0,.63,1) -4.5s infinite alternate;
}
.motion-enabled .planet {
    animation:planet-float 9s ease-in-out infinite;
}
.motion-enabled .art-grid {
    animation:grid-pan 40s linear infinite;
    translate:calc(var(--mx,0) * -6px) calc(var(--my,0) * -6px);
}
.motion-enabled .art-asterisk {
    animation:asterisk-turn 40s linear infinite;
}
.motion-enabled .planet {
    translate:calc(var(--mx,0) * 14px) calc(var(--my,0) * 12px);
}
.motion-enabled .orbit-two {
    translate:calc(var(--mx,0) * 8px) calc(var(--my,0) * 7px);
}
.motion-enabled .orbit-one, .motion-enabled .satellite-track {
    translate:calc(var(--mx,0) * 24px) calc(var(--my,0) * 18px);
}
.planet::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(circle at calc(30% + var(--mx,0) * 12%) calc(24% + var(--my,0) * 12%),#fff3 0,transparent 42%);
}
.motion-enabled .status-dot {
    position:relative;
}
.motion-enabled .status-dot::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:var(--orange);
    animation:pulse 2.4s var(--ease-out) infinite;
}
.hero-art:not(.in-view) *, .page-hidden .hero-art * {
    animation-play-state:paused;
}
@keyframes sat-x {
    from { transform:translateX(-50%); }
    to { transform:translateX(50%); }
}
@keyframes sat-y {
    from { transform:translateY(-50%); }
    to { transform:translateY(50%); }
}
@keyframes sat-scale {
    from { transform:rotate(35deg) scale(.68); opacity:.7; }
    to { transform:rotate(35deg) scale(1.15); }
}
/* Front half of the orbit for the first 9s, behind the planet for the next 9s. */
@keyframes satellite-depth {
    0% { z-index:3; }
    50% { z-index:0; }
}
@keyframes planet-float {
    0%, 100% { transform:translate(-50%,-50%); }
    50% { transform:translate(-50%,calc(-50% - 9px)); }
}
@keyframes grid-pan {
    to { transform:translate(48px,48px); }
}
@keyframes asterisk-turn {
    to { transform:rotate(360deg); }
}
@keyframes pulse {
    from { transform:scale(1); opacity:.55; }
    70%, to { transform:scale(3.4); opacity:0; }
}

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
    .film-frame, .creative-shape, .creative-spark, .play-icon, .arrow>span, .circle-arrow>span {
        transition:transform .65s var(--ease-out);
    }
    .motion-enabled .video-card:hover .frame-front {
        transform:translate(-58%,-56%) rotate(-4deg);
    }
    .motion-enabled .video-card:hover .frame-back {
        transform:translate(-33%,-43%) rotate(15deg);
    }
    .motion-enabled .video-card:hover .play-icon {
        transform:translate(-50%,-50%) scale(1.14);
    }
    .motion-enabled .banana-card:hover .shape-one {
        transform:translate(-135%,-46%) rotate(-45deg);
    }
    .motion-enabled .banana-card:hover .shape-three {
        transform:translate(45%,-45%) rotate(39deg);
    }
    .motion-enabled .banana-card:hover .creative-spark {
        transform:rotate(75deg);
    }
    .motion-enabled :is(.button,.nav-contact):hover .arrow>span, .motion-enabled .product-card:hover .circle-arrow>span {
        transform:translate(1.2em,-1.2em);
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*::before,*::after {
        transition:none!important;
        animation:none!important;
    }
}