/* =====================================================================
   MaxiDigital site.css
   1. Fonts and tokens       5. Header and menu      9. Case pages
   2. Base                    6. Footer               10. Forms
   3. Type and helpers        7. Components           11. Prose
   4. Layout                  8. Home interactions    12. Motion (keyframes)
   ===================================================================== */

/* 1. Fonts and tokens ------------------------------------------------ */
@font-face{font-family:'Geist';src:url('../fonts/geist.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../fonts/geist-mono.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#0B0B0C;--ink-2:#3A3A3A;--muted:#6B6B6B;--line:#E6E6E2;--line-2:#EFEFEC;--paper:#FFFFFF;--soft:#F5F5F2;
  --red:#DE3219;
  --web:#2A4DF5;--web-tint:#ECF0FF;--web-ink:#2A4DF5;
  --mkt:#FF8A1F;--mkt-tint:#FFF1E3;--mkt-ink:#A34C00;
  --sw:#0B0B0C;--sw-tint:#F5F5F2;--sw-ink:#0B0B0C;
  --ai:#18C46A;--ai-tint:#E3F9EC;--ai-ink:#0B6B37;
  --des:#F5B700;--des-tint:#FFF5D6;--des-ink:#7A5700;
  --ma:#1554E1;
  --font:'Geist','Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --wrap:1240px;--gutter:24px;
  --r-sm:12px;--r:18px;--r-lg:28px;--r-xl:40px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 12px 30px rgba(11,11,12,.10);
}

/* 2. Base ------------------------------------------------------------ */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--ink)}a:hover{color:var(--muted)}
img,video,svg{max-width:100%}
img{height:auto}
button{font-family:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[hidden]{display:none !important}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:200;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none;transition:top 200ms ease}
.skip:focus{top:16px;color:#fff}
main{display:block}
section[id],[id].anchor{scroll-margin-top:96px}

/* 3. Type and helpers ------------------------------------------------ */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow-dot::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--red);flex-shrink:0}
.h1{margin:0;font-size:clamp(46px,6vw,88px);line-height:.95;font-weight:650;letter-spacing:-.055em}
.h2{margin:0;font-size:clamp(36px,4.6vw,64px);line-height:1;font-weight:650;letter-spacing:-.045em}
.h3{margin:0;font-size:clamp(26px,2.6vw,34px);line-height:1.08;font-weight:650;letter-spacing:-.035em}
.h4{margin:0;font-size:22px;line-height:1.2;font-weight:650;letter-spacing:-.02em}
.dot{color:var(--red)}
.lead{margin:0;font-size:clamp(18px,1.7vw,20px);line-height:1.55;color:var(--ink-2);max-width:620px}
.text{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:640px}
.small{font-size:14px;line-height:1.5;color:var(--muted)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.ink-2{color:var(--ink-2)}
.nowrap{white-space:nowrap}
.belt-line{display:inline;padding-bottom:.06em;background-image:linear-gradient(90deg,var(--web) 0 20%,var(--mkt) 20% 40%,var(--ink) 40% 60%,var(--ai) 60% 80%,var(--des) 80% 100%);background-repeat:no-repeat;background-position:0 100%;background-size:100% .08em}
.arrow{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 250ms var(--ease)}
a:hover>.arrow,button:hover>.arrow{transform:translateX(3px)}
.ext{width:13px;height:13px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 4. Layout ---------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box}
.wrap-narrow{max-width:860px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box}
.section{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.section-sm{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.section-top-0{padding-top:0}
.section-bottom-0{padding-bottom:0}
.bg-soft{background:var(--soft)}
.bg-ink{background:var(--ink);color:#fff}
.stack{display:flex;flex-direction:column;gap:var(--gap,16px)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,12px)}
.split{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
.grid{display:grid;gap:var(--gap,20px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.grid-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(32px,4vw,48px)}
.section-head .lead{margin-top:4px}
.page-hero{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(40px,5vw,72px)}
.page-hero .h1{max-width:980px}
.page-hero .lead{margin-top:4px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.crumbs span[aria-hidden]{opacity:.6}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* 5. Header and menu ------------------------------------------------- */
.hdr-wrap{position:sticky;top:0;z-index:50;padding:14px 16px 0}
.hdr{max-width:calc(var(--wrap) - 2 * var(--gutter) + 32px);margin:0 auto;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;border-radius:28px;border:1px solid rgba(11,11,12,0);background:rgba(255,255,255,0);transition:background 250ms ease,border-color 250ms ease,box-shadow 250ms ease}
.hdr.is-scrolled,.menu-open .hdr{background:rgba(255,255,255,.78);border-color:rgba(11,11,12,.08);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 10px 30px rgba(11,11,12,.06)}
.hdr-logo{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;flex-shrink:0}
.hdr-logo svg{width:150px;height:26px;display:block;overflow:visible}
.nav-links{display:flex;gap:30px;font-size:15px}
.nav-links a{position:relative;color:var(--ink);text-decoration:none;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.hdr-actions{display:flex;align-items:center;gap:8px}
.lang{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line);gap:2px;background:#fff}
.lang a{display:inline-flex;align-items:center;justify-content:center;height:38px;min-width:44px;padding:0 10px;box-sizing:border-box;border-radius:999px;font-family:var(--mono);font-size:12px;text-decoration:none;color:var(--muted);transition:background 200ms ease,color 200ms ease}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="true"]{background:var(--ink);color:#fff}
.lang-sm a{height:32px;min-width:40px}
.hdr-cta{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background 200ms ease}
.hdr-cta:hover{background:var(--red);color:#fff}
.menu-btn{display:none;position:relative;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;padding:0;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.menu-btn .i-close{display:none}
.menu-open .menu-btn .i-open{display:none}
.menu-open .menu-btn .i-close{display:block}
.mnav{position:fixed;inset:0;z-index:40;background:#fff;padding:104px 24px 32px;box-sizing:border-box;overflow-y:auto;display:flex;flex-direction:column;gap:28px}
.mnav-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mnav-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:clamp(34px,9vw,48px);line-height:1.05;font-weight:650;letter-spacing:-.045em;color:var(--ink);text-decoration:none}
.mnav-links a[aria-current="page"]{color:var(--red)}
.mnav-links .mnav-dot{width:12px;height:12px;border-radius:999px;flex-shrink:0}
.mnav-foot{display:flex;flex-direction:column;gap:14px;margin-top:auto}
.mnav-foot a{font-family:var(--mono);font-size:14px;color:var(--ink)}
.menu-open{overflow:hidden}
@media (max-width:980px){.nav-links{gap:22px}}
@media (max-width:820px){.nav-links{display:none !important}.menu-btn{display:inline-flex !important}.hide-sm{display:none !important}.hdr{padding:8px 8px 8px 16px}.hdr-logo svg{width:132px;height:23px}}
@media (max-width:400px){.hdr-cta{padding:0 14px;font-size:14px}.hdr-logo svg{width:116px;height:20px}}
@media (max-width:350px){.hdr{gap:8px;padding-left:12px}.hdr-cta{padding:0 12px;font-size:13px}.hdr-logo svg{width:100px;height:18px}.hdr-actions{gap:6px}}
@media (min-width:821px){.mnav{display:none !important}}

/* 6. Footer ---------------------------------------------------------- */
.ftr{border-top:1px solid var(--line);overflow:hidden}
.ftr-top{display:flex;flex-wrap:wrap;gap:48px 64px;justify-content:space-between}
.ftr-brand{flex:1 1 300px;max-width:380px;display:flex;flex-direction:column;gap:18px}
.ftr-cols{flex:2 1 560px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:40px 24px}
@media (min-width:1100px){.ftr-cols{grid-template-columns:repeat(4,auto);justify-content:space-between;column-gap:24px}.ftr-col .f-link{white-space:nowrap}.ftr-top{column-gap:48px}}
@media (max-width:520px){.ftr-cols{grid-template-columns:1fr 1fr;gap:32px 16px}.ftr-col:first-child,.ftr-col:last-child{grid-column:1/-1}}
.ftr-col{display:flex;flex-direction:column;gap:18px}
.ftr-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.f-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;line-height:1.4;color:var(--ink);text-decoration:none;text-underline-offset:4px}
.f-link:hover{text-decoration:underline;color:var(--ink)}
.f-sw{width:8px;height:8px;flex-shrink:0;border-radius:999px}
.f-word{display:flex;align-items:center;gap:.1em;margin-top:clamp(56px,8vw,104px);padding:.04em 0 .14em;font-size:clamp(48px,13vw,188px);line-height:.8;font-weight:650;letter-spacing:-.06em;color:var(--ink);text-decoration:none;white-space:nowrap}
.f-word:hover{color:var(--ink)}
.f-m{width:.82em;height:.77em;flex-shrink:0;display:block;overflow:visible;transform-origin:50% 50%;transition:transform 900ms cubic-bezier(.7,0,.2,1)}
.f-word:hover .f-m{transform:rotate(180deg)}
.ftr-bar{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;margin-top:28px;border-top:1px solid var(--line);padding:22px 0 28px;font-size:13px;color:var(--muted)}
.ftr-bar .f-link{font-size:13px;color:var(--muted)}
.ftr-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.ftr-clock{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.ftr-clock svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ftr-top-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;box-sizing:border-box;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-size:14px;text-decoration:none}
.ftr-top-btn:hover{border-color:var(--ink);color:var(--ink)}
.belt{display:flex;height:8px}
.belt span{flex:1}
.belt-thin{height:6px}
.c-web{background:var(--web)}.c-mkt{background:var(--mkt)}.c-sw{background:var(--sw)}.c-ai{background:var(--ai)}.c-des{background:var(--des)}.c-red{background:var(--red)}

/* 7. Components ------------------------------------------------------ */
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;box-sizing:border-box;border-radius:999px;border:1px solid transparent;font-family:var(--font);font-size:15px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background 200ms ease,color 200ms ease,border-color 200ms ease,transform 200ms var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-lg{height:54px;padding:0 26px;font-size:16px}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#C42A13;color:#fff}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:var(--red);color:#fff}
.btn-line{background:#fff;border-color:var(--line);color:var(--ink);font-weight:500}.btn-line:hover{border-color:var(--ink);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}.btn-white:hover{background:var(--soft);color:var(--ink)}
.btn-outline-light{border-color:rgba(255,255,255,.6);color:#fff;font-weight:500}.btn-outline-light:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink);text-underline-offset:4px}
.link:hover{color:var(--ink)}

/* Cards */
.card{position:relative;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:16px;min-width:0}
.card-soft{background:var(--soft);border-color:transparent}
.card-ink{background:var(--ink);border-color:var(--ink);color:#fff}
.card-ink .text,.card-ink .lead{color:#D2D2CE}
.card-ink .eyebrow{color:#A3A3A0}
.card-link{text-decoration:none;color:var(--ink);transition:border-color 250ms ease,translate 300ms var(--ease),box-shadow 300ms var(--ease),color 200ms ease}
.card-link:hover{color:var(--ink);border-color:var(--ink);translate:0 -3px;box-shadow:var(--shadow)}
.card-ink.card-link,.card-ink.card-link:hover,.tile-web.card-link,.tile-web.card-link:hover,.tile-sw.card-link,.tile-sw.card-link:hover,.tile-ma.card-link,.tile-ma.card-link:hover{color:#fff}
.card-title{font-size:clamp(24px,2.4vw,32px);line-height:1.1;font-weight:650;letter-spacing:-.035em;margin:0}

/* Discipline tiles (full colour) */
.tile{position:relative;overflow:hidden;box-sizing:border-box;border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:16px;min-width:0}
.tile-web{background:var(--web);color:#fff}
.tile-mkt{background:var(--mkt);color:var(--ink)}
.tile-sw{background:var(--sw);color:#fff}
.tile-ai{background:var(--ai);color:var(--ink)}
.tile-des{background:var(--des);color:var(--ink)}
.tile-ma{background:var(--ma);color:#fff}
.tile .eyebrow{color:currentColor;opacity:.85}
.tile-web .eyebrow,.tile-sw .eyebrow,.tile-ma .eyebrow{opacity:1}
.tile .text{color:currentColor;opacity:.9}

/* Tags and pills */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;box-sizing:border-box;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;line-height:1;white-space:nowrap}
.tag-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0;background:currentColor}
.tag-light{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff}
.num{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}

/* Check list */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{position:relative;padding-left:34px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.checks li a{color:inherit;text-underline-offset:4px}
.checks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:999px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.checks-red li::before{background-color:var(--red)}
.card-ink .checks li,.tile .checks li{color:currentColor}
.card-ink .checks li::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230B0B0C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Numbered steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.step{display:flex;gap:20px;align-items:flex-start;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:13px}
.step-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.step-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.step-title{font-size:22px;line-height:1.2;font-weight:650;letter-spacing:-.02em}
.step-text{font-size:16px;line-height:1.55;color:var(--ink-2)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;border-top:1px solid var(--line);padding-top:24px}
.stat{display:flex;flex-direction:column;gap:8px}
.stat-n{font-size:44px;line-height:1;font-weight:650;letter-spacing:-.04em}
.stat-l{font-size:14px;line-height:1.4;color:var(--muted)}

/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;cursor:pointer;list-style:none;font-size:clamp(18px,1.8vw,21px);font-weight:600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:28px;height:28px;flex-shrink:0;border-radius:999px;border:1px solid var(--line);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%230B0B0C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform 300ms var(--ease),background-color 200ms ease}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--soft)}
.faq .faq-a{padding:0 0 24px;max-width:720px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.faq .faq-a p{margin:0 0 12px}

/* Quote / statement band */
.statement{font-size:clamp(28px,3.6vw,48px);line-height:1.08;font-weight:650;letter-spacing:-.04em;margin:0;max-width:1000px}

/* Browser frame with auto-scrolling full-page screenshot */
.browser{box-sizing:border-box;border-radius:var(--r);padding:18px 18px 0;overflow:hidden;display:flex;aspect-ratio:16/11;background:var(--soft)}
.browser-lg{aspect-ratio:16/10;border-radius:var(--r-lg);padding:clamp(16px,3vw,36px) clamp(16px,3vw,36px) 0}
.browser-lg .browser-win{flex:0 1 760px;margin:0 auto}
.browser-win{flex:1;min-width:0;background:#fff;border-radius:12px 12px 0 0;border:1px solid rgba(11,11,12,.08);border-bottom:none;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.browser-bar{display:flex;align-items:center;gap:5px;padding:8px 12px;border-bottom:1px solid var(--line-2);flex-shrink:0}
.browser-bar i{width:7px;height:7px;border-radius:999px;background:var(--line)}
.browser-bar span{margin-left:8px;font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-lg .browser-bar{padding:11px 16px;gap:7px}
.browser-lg .browser-bar i{width:10px;height:10px}
.browser-lg .browser-bar span{font-size:12px;margin-left:12px}
.browser-view{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--soft)}
.browser-view img.site-scroll{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
.browser:hover .site-scroll{animation-play-state:paused}

/* Phone frame */
.phone{position:relative;box-sizing:border-box;width:min(100%,300px);aspect-ratio:9/19;border-radius:44px;background:var(--ink);padding:12px;box-shadow:0 24px 60px rgba(11,11,12,.18)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#fff}
.phone-screen img.site-scroll{position:absolute;left:0;top:0;width:100%;height:auto;display:block}

/* Media */
.media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--soft)}
.media video,.media img{display:block;width:100%;height:100%;object-fit:cover}
.media-16x9{aspect-ratio:16/9}
.media-4x3{aspect-ratio:4/3}
.media-1x1{aspect-ratio:1/1}
.media-badge{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;box-sizing:border-box;border-radius:999px;background:#fff;font-family:var(--mono);font-size:12px;color:var(--ink)}
.media-badge i{width:7px;height:7px;border-radius:999px;background:var(--red)}

/* Facts list (case meta) */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:20px 24px;margin:0;border-top:1px solid var(--line);padding-top:24px}
.facts div{display:flex;flex-direction:column;gap:6px;min-width:0}
.facts dt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-size:17px;line-height:1.45;color:var(--ink)}
.facts dd a{color:var(--ink);text-underline-offset:4px}
.facts dd .ext{margin-left:6px}
.page-case .grid-3{display:flex;flex-wrap:wrap}
.page-case .grid-3>*{flex:1 1 300px}

/* Site list (80+ archive) */
.sites{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:0 24px}
.sites li{border-bottom:1px solid var(--line)}
.sites a,.sites span.site{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font-size:17px;color:var(--ink);text-decoration:none}
.sites a:hover{color:var(--ink)}
.sites a:hover .ext{transform:translate(2px,-2px)}
.sites .ext{transition:transform 200ms var(--ease);color:var(--muted)}
.sites .site-tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}

/* Next/prev case */
.next-case{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;box-sizing:border-box;padding:clamp(24px,4vw,44px);border-radius:var(--r-lg);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color 250ms ease,background 250ms ease}
.next-case:hover{border-color:var(--ink);color:var(--ink);background:var(--soft)}

/* Closing CTA (shared partial and home) */
.cta-card{position:relative;overflow:hidden;box-sizing:border-box;border-radius:var(--r-xl);background:var(--ink);color:#fff;padding:clamp(32px,6vw,88px);transition:background 450ms ease}
.cta-card.is-on{background:var(--red)}
.cta-mark{position:absolute;right:-40px;bottom:-70px;width:520px;height:490px;transform:rotate(0deg);transition:transform 900ms cubic-bezier(.7,0,.2,1)}
.cta-card.is-on .cta-mark{transform:rotate(180deg) !important}
.cta-switch{position:relative;width:132px;height:72px;flex-shrink:0;border-radius:999px;border:none;padding:0;background:#3A3A3D;cursor:pointer;transition:background 300ms ease}
.cta-card.is-on .cta-switch{background:#fff}
.cta-knob{position:absolute;top:6px;left:6px;width:60px;height:60px;border-radius:999px;background:#fff;transition:left 300ms cubic-bezier(.6,0,.2,1),background 300ms ease}
.cta-card.is-on .cta-knob{left:66px;background:var(--red)}
.cta-switch:focus-visible{outline:3px solid #fff;outline-offset:4px}
.cta-card .dot{transition:color 300ms ease}
.cta-card.is-on .dot{color:#fff}
@media (max-width:480px){.cta-card .row>.btn{flex:1 1 100%}}

/* 8. Home interactions ---------------------------------------------- */
.svc{border:1px solid var(--line);background:#fff;color:var(--ink);transform:none;box-shadow:none}
.svc .svc-ic{background:var(--c)}
.svc .svc-svg{stroke:var(--on)}
.svc:hover{border-color:var(--c)}
.svc.is-active{background:var(--c);color:var(--on);border-color:var(--c);transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,11,12,.14)}
.svc.is-active .svc-ic{background:#fff}
.svc.is-active .svc-svg{stroke:var(--ink)}
.hchip{background:#fff;color:var(--ink);border:1px solid var(--line);transform:scale(1)}
.hchip .hchip-dot{background:var(--c)}
.hchip.is-active{background:var(--c);color:var(--on);border-color:var(--c);transform:scale(1.08)}
.hchip.is-active .hchip-dot{background:var(--on)}
.flt{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;box-sizing:border-box;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--font);font-size:15px;font-weight:500;cursor:pointer;transition:background 200ms ease,color 200ms ease,border-color 200ms ease}
.flt:hover{border-color:var(--ink)}
.flt[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.flt-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0}
.flt[aria-pressed="true"] .flt-dot-ink{background:#fff !important}
[data-tags].is-hidden{display:none !important}
.site-card{transition:translate 300ms var(--ease),box-shadow 300ms var(--ease),border-color 250ms ease}
.site-card:hover{translate:0 -3px;box-shadow:var(--shadow)}

/* 9. Case pages ------------------------------------------------------ */
.case-hero{display:flex;flex-direction:column;gap:22px;padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(32px,4vw,56px)}
.case-hero .h1{max-width:1000px}
.case-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.case-meta-row .btn{height:54px;padding:0 26px;font-size:16px}
@media (max-width:360px){.case-meta-row .btn{padding:0 18px;font-size:15px}}
@media (max-width:380px){.case-hero .h1{font-size:40px}}
.case-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px)}
@media (min-width:960px){.case-body{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.case-aside{display:flex;flex-direction:column;gap:20px}
@media (min-width:960px){.case-aside{position:sticky;top:110px;align-self:start}}
.case-main{display:flex;flex-direction:column;gap:28px}
.case-main h2{margin:0;font-size:clamp(26px,2.6vw,34px);line-height:1.08;font-weight:650;letter-spacing:-.035em}
.case-main p{margin:0;font-size:18px;line-height:1.65;color:var(--ink-2);max-width:680px}
.soon{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;box-sizing:border-box;border-radius:999px;background:var(--des-tint);color:var(--des-ink);font-family:var(--mono);font-size:12px}
.soon i{width:7px;height:7px;border-radius:999px;background:var(--des)}

/* 10. Forms ---------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label,.field legend{font-size:14px;font-weight:600;color:var(--ink);padding:0}
.field .hint{font-size:13px;color:var(--muted)}
.input,.textarea,.select{width:100%;box-sizing:border-box;height:54px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--font);font-size:16px;transition:border-color 200ms ease,box-shadow 200ms ease;-webkit-appearance:none;appearance:none}
.textarea{height:auto;min-height:150px;padding:14px 16px;line-height:1.5;resize:vertical}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(11,11,12,.08)}
.input::placeholder,.textarea::placeholder{color:#9A9A96}
fieldset.field{border:0;margin:0;padding:0}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{position:relative;display:inline-flex}
.pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick>span{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;box-sizing:border-box;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:15px;font-weight:500;transition:background 200ms ease,color 200ms ease,border-color 200ms ease;pointer-events:none}
.pick>span::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--c,var(--ink))}
.pick input:hover+span{border-color:var(--ink)}
.pick input:checked+span{background:var(--c,var(--ink));border-color:var(--c,var(--ink));color:var(--on,#fff)}
.pick input:checked+span::before{background:var(--on,#fff)}
.pick input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
.form-note{font-size:13px;line-height:1.5;color:var(--muted)}
.copy-ok{font-family:var(--mono);font-size:12px;color:var(--ai-ink)}

/* 11. Prose ---------------------------------------------------------- */
.prose{max-width:720px;font-size:17px;line-height:1.7;color:var(--ink-2)}
.prose h2{margin:48px 0 12px;font-size:26px;line-height:1.15;font-weight:650;letter-spacing:-.03em;color:var(--ink)}
.prose h3{margin:28px 0 8px;font-size:19px;line-height:1.3;font-weight:650;color:var(--ink)}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose a{color:var(--ink);text-underline-offset:4px}
.prose strong{color:var(--ink);font-weight:600}
.prose .updated{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}

/* 404 */
.nf{min-height:60vh;display:flex;flex-direction:column;justify-content:center;gap:24px}
.nf-code{font-size:clamp(96px,22vw,280px);line-height:.8;font-weight:650;letter-spacing:-.07em}

/* Utilities */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-0{margin-bottom:0}
.center{text-align:center}
.full{width:100%}
@media (max-width:640px){.btn-lg{height:52px;padding:0 22px}.stat-n{font-size:38px}.step{padding:18px}.step-n{width:38px;height:38px}}

/* Touch screens: 44px tap targets for small text links */
@media (pointer:coarse){
  .ftr-col ul{gap:0}
  .ftr-col .f-link,.ftr-legal .f-link{min-height:44px}
  .lang-sm a{height:44px;min-width:44px}
  .mnav-foot{gap:4px}
  .mnav-foot a{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;margin:-13px 0}
  .link{padding:10px 0;margin:-10px 0;min-height:44px;box-sizing:border-box}
  .cta-contact a{display:inline-flex;align-items:center;min-height:44px}
}

/* Fake code panels fade out on the right instead of cutting tokens */
.code-scroll{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}

/* Line breaks: balanced headings, no orphans in body copy */
h1,h2,h3,.h1,.h2,.h3,.card-title,.statement{text-wrap:balance}
p,.lead,.text,.step-text,.checks li{text-wrap:pretty}

/* AI chat mock: bubbles keep their height, a bit taller on narrow tiles */
.ai-m1,.ai-m2,.ai-m3,.ai-ev{flex-shrink:0}
@media (max-width:560px){
  div:has(>div>.ai-m1){height:368px !important}
}

/* Standalone looping video can be paused by click or keyboard */
video[data-autoplay][tabindex]{cursor:pointer}

/* 12. Motion (from the homepage canvas, keep in sync) --------------- */

@keyframes mdraw{from{stroke-dashoffset:340}to{stroke-dashoffset:0}}
@keyframes mthrow{0%,30%{transform:translateY(0) rotate(0deg)}38%{transform:translateY(-12%) rotate(110deg)}46%,80%{transform:translateY(0) rotate(180deg)}88%{transform:translateY(-12%) rotate(290deg)}96%,100%{transform:translateY(0) rotate(360deg)}}
@keyframes mdot{0%{transform:translateY(-260%);opacity:0}55%{transform:translateY(0);opacity:1}72%{transform:translateY(-30%)}100%{transform:translateY(0);opacity:1}}
@keyframes mland{0%,44%{transform:scale(1)}47%{transform:scale(1.4)}50%,94%{transform:scale(1)}97%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes beltin{from{background-size:0% 0.08em}to{background-size:100% 0.08em}}
@keyframes chip{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes dfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes dshadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.8);opacity:.5}}
@keyframes dspin{to{transform:rotate(360deg)}}
@keyframes ddrift{0%,100%{transform:translate(0,0)}35%{transform:translate(12px,6px)}70%{transform:translate(4px,12px)}}
@keyframes odrop{from{transform:translateY(-160%) scale(.6);opacity:0}to{transform:none;opacity:1}}
.d-poster{transform:rotate(-8deg);transition:transform 600ms cubic-bezier(.2,.8,.2,1)}
.d-phone{transform:rotate(9deg);transition:transform 600ms cubic-bezier(.2,.8,.2,1)}
.d-pill{transform:rotate(-28deg);transition:transform 600ms cubic-bezier(.2,.8,.2,1)}
.d-chip{transform:rotate(5deg);transition:transform 600ms cubic-bezier(.2,.8,.2,1)}
.d-burst,.d-sel{transition:transform 600ms cubic-bezier(.2,.8,.2,1)}
.des:hover .d-poster{transform:translate(-10px,-6px) rotate(-15deg)}
.des:hover .d-phone{transform:translate(10px,-8px) rotate(16deg)}
.des:hover .d-pill{transform:translate(-8px,8px) rotate(-50deg)}
.des:hover .d-chip{transform:translate(-6px,4px) rotate(-6deg)}
.des:hover .d-burst{transform:scale(1.14) rotate(-12deg)}
.des:hover .d-sel{transform:scale(1.08)}
.mo-on .d-float{animation:dfloat 4.5s ease-in-out infinite}
.mo-on .d-shadow{animation:dshadow 4.5s ease-in-out infinite}
.mo-on .d-spin{animation:dspin 16s linear infinite}
.mo-on .d-drift{animation:ddrift 7s ease-in-out infinite}
.mo-on .chip-e{animation:chip 5.8s ease-in-out 1.2s infinite}
@keyframes wbbar{0%,4%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}64%,100%{transform:scaleX(1);opacity:0}}
@keyframes wbh1{0%,6%{transform:scaleX(0)}14%,92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes wbh2{0%,12%{transform:scaleX(0)}20%,92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes wbp{0%,20%{opacity:0;transform:translateY(8px)}27%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes wbbtn{0%,28%{transform:scale(0)}32%{transform:scale(1.12)}35%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
@keyframes wbimg{0%,34%{opacity:0;transform:scale(.9)}44%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes wbcur{0%,40%{left:70%;top:86%;opacity:0;transform:scale(1)}45%{left:70%;top:86%;opacity:1}56%{left:calc(100% - 50px);top:20px;opacity:1;transform:scale(1)}58%{transform:scale(.8)}60%{transform:scale(1)}68%{left:calc(100% - 50px);top:20px;opacity:1}74%,100%{left:calc(100% - 50px);top:20px;opacity:0}}
@keyframes wbpub{0%,57%{background:#0B0B0C;transform:scale(1)}58%{transform:scale(.9)}61%,93%{background:#18C46A;transform:scale(1)}97%,100%{background:#0B0B0C}}
@keyframes wbst1{0%,61%{opacity:1}63%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes wbst2{0%,61%{opacity:0}63%,95%{opacity:1}98%,100%{opacity:0}}
.wb-st1{opacity:0}.wb-cur{opacity:0}
.mo-on .wb-bar{animation:wbbar 9s ease-in-out infinite}
.mo-on .wb-h1{animation:wbh1 9s ease-in-out infinite}
.mo-on .wb-h2{animation:wbh2 9s ease-in-out infinite}
.mo-on .wb-p{animation:wbp 9s ease-out infinite}
.mo-on .wb-btn{animation:wbbtn 9s ease-out infinite}
.mo-on .wb-img{animation:wbimg 9s ease-out infinite}
.mo-on .wb-cur{animation:wbcur 9s ease-in-out infinite}
.mo-on .wb-pub{animation:wbpub 9s ease-in-out infinite}
.mo-on .wb-st1{animation:wbst1 9s linear infinite}
.mo-on .wb-st2{animation:wbst2 9s linear infinite}
.mo-on .wb-spin{animation:dspin .9s linear infinite}
@keyframes mkdraw{0%,6%{clip-path:inset(0 100% 0 0);opacity:1}40%,90%{clip-path:inset(0 0 0 0);opacity:1}96%,100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes mkdot{0%,38%{transform:scale(0)}43%{transform:scale(1.35)}46%,90%{transform:scale(1)}96%,100%{transform:scale(0)}}
.mo-on .mk-draw{animation:mkdraw 8s ease-in-out infinite}
.mo-on .mk-dot{animation:mkdot 8s ease-out infinite}
.mo-on .mk-track{animation:marquee 26s linear infinite}
@keyframes sitescroll{0%,8%{top:0;transform:translateY(0)}92%,100%{top:100%;transform:translateY(-100%)}}
.mo-on .site-scroll{animation:sitescroll 24s ease-in-out infinite alternate}
/* Work cards (home "Geselecteerd werk" and the work page) stay still on the top of the site;
   the screenshot only scrolls while the card is hovered or keyboard-focused, then glides back up. */
.site-card .site-scroll,.pw-card .site-scroll{animation:none !important;top:0 !important;transform:translateY(0);transition:top .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion: no-preference){
  .site-card:hover .site-scroll,.site-card:focus-visible .site-scroll,.pw-card:hover .site-scroll,.pw-card:focus-visible .site-scroll{top:100% !important;transform:translateY(-100%);transition:top 14s cubic-bezier(.35,0,.65,1),transform 14s cubic-bezier(.35,0,.65,1)}
}
@keyframes codescroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes caretblink{0%,49%{opacity:1}50%,100%{opacity:0}}
.mo-on .code-scroll{animation:codescroll 20s linear infinite}
.mo-on .caret{animation:caretblink 1s linear infinite}
@keyframes aim1{0%,5%{max-height:0;margin-top:0;opacity:0;transform:translateY(10px)}9%,92%{max-height:90px;margin-top:8px;opacity:1;transform:none}96%,100%{max-height:0;margin-top:0;opacity:0;transform:none}}
@keyframes aity1{0%,13%{max-height:0;margin-top:0;opacity:0}16%,29%{max-height:44px;margin-top:8px;opacity:1}32%,100%{max-height:0;margin-top:0;opacity:0}}
@keyframes aim2{0%,30%{max-height:0;margin-top:0;opacity:0;transform:translateY(10px)}35%,92%{max-height:110px;margin-top:8px;opacity:1;transform:none}96%,100%{max-height:0;margin-top:0;opacity:0;transform:none}}
@keyframes aim3{0%,47%{max-height:0;margin-top:0;opacity:0;transform:translateY(10px)}51%,92%{max-height:90px;margin-top:8px;opacity:1;transform:none}96%,100%{max-height:0;margin-top:0;opacity:0;transform:none}}
@keyframes aity2{0%,55%{max-height:0;margin-top:0;opacity:0}58%,67%{max-height:44px;margin-top:8px;opacity:1}70%,100%{max-height:0;margin-top:0;opacity:0}}
@keyframes aiev{0%,68%{max-height:0;margin-top:0;opacity:0;transform:scale(.92)}73%,92%{max-height:90px;margin-top:10px;opacity:1;transform:none}96%,100%{max-height:0;margin-top:0;opacity:0;transform:none}}
@keyframes aidot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
.ai-ty{max-height:0;margin-top:0;opacity:0;overflow:hidden}
.mo-on .ai-m1{animation:aim1 10s ease-in-out infinite}
.mo-on .ai-ty1{animation:aity1 10s ease-in-out infinite}
.mo-on .ai-m2{animation:aim2 10s ease-in-out infinite}
.mo-on .ai-m3{animation:aim3 10s ease-in-out infinite}
.mo-on .ai-ty2{animation:aity2 10s ease-in-out infinite}
.mo-on .ai-ev{animation:aiev 10s ease-in-out infinite}
.mo-on .ai-dot{animation:aidot 1s ease-in-out infinite}
@keyframes maring{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.55}}
.mo-on .ma-ring{animation:maring 6s ease-in-out infinite}
.ma-btn{transition:transform 300ms cubic-bezier(.2,.8,.2,1)}
.ma-card:hover .ma-btn{transform:translateX(6px)}
.mo-on .m-draw{stroke-dasharray:340;stroke-dashoffset:340;animation:mdraw 1.3s cubic-bezier(.65,0,.35,1) .25s forwards}
.mo-on .m-throw{animation:mthrow 8s cubic-bezier(.7,0,.2,1) 2.6s infinite}
.mo-on .m-dot{animation:mdot .9s cubic-bezier(.3,.7,.4,1) 1.45s both}
.mo-on .m-land{animation:mland 8s ease-out 2.6s infinite}
.mo-on .belt-in{animation:beltin 1.1s cubic-bezier(.65,0,.35,1) 1.7s both}
.mo-on .chip-a{animation:chip 5s ease-in-out infinite}
.mo-on .chip-b{animation:chip 6s ease-in-out .8s infinite}
.mo-on .chip-c{animation:chip 5.5s ease-in-out 1.6s infinite}
.mo-on .chip-d{animation:chip 6.5s ease-in-out 2.2s infinite}
.mo-on .marquee{animation:marquee 60s linear infinite}
.mo-on .live{animation:blink 2s ease-in-out infinite}
@supports (animation-timeline: view()){.mo-on .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0 entry 160px}.mo-on .over-dot{animation:odrop linear both;animation-timeline:view();animation-range:entry 30% cover 45%}}
@media (prefers-reduced-motion: reduce){.marquee{padding-left:84px}.mk-track{width:auto !important}.mk-track>div{flex-wrap:wrap}.mk-track>[aria-hidden]{display:none !important}div:has(>.mk-track){-webkit-mask-image:none !important;mask-image:none !important}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.mo-on .m-draw,.mo-on .m-throw,.mo-on .m-dot,.mo-on .m-land,.mo-on .belt-in,.mo-on .chip-a,.mo-on .chip-b,.mo-on .chip-c,.mo-on .chip-d,.mo-on .marquee,.mo-on .live,.mo-on .reveal,.mo-on .d-float,.mo-on .d-shadow,.mo-on .d-spin,.mo-on .d-drift,.mo-on .over-dot,.mo-on .chip-e,.mo-on .wb-bar,.mo-on .wb-h1,.mo-on .wb-h2,.mo-on .wb-p,.mo-on .wb-btn,.mo-on .wb-img,.mo-on .wb-cur,.mo-on .wb-pub,.mo-on .wb-st1,.mo-on .wb-st2,.mo-on .wb-spin,.mo-on .mk-draw,.mo-on .mk-dot,.mo-on .mk-track,.mo-on .site-scroll,.mo-on .code-scroll,.mo-on .caret,.mo-on .ai-m1,.mo-on .ai-ty1,.mo-on .ai-m2,.mo-on .ai-m3,.mo-on .ai-ty2,.mo-on .ai-ev,.mo-on .ai-dot,.mo-on .ma-ring{animation:none !important}.mo-on .m-draw{stroke-dashoffset:0 !important}.d-poster,.d-phone,.d-pill,.d-chip,.d-burst,.d-sel,.f-m,.ma-btn,.cta-card,.cta-mark,.cta-knob,.cta-switch,.svc,.hchip,.card-link,.site-card,.next-case,.btn,.arrow,.nav-links a::after,.skip{transition:none !important}.card-link:hover,.site-card:hover{translate:none !important}}

/* Reveal fallback is intentionally absent: without scroll-driven animations content simply shows. */
@media print{.hdr-wrap,.mnav,.cta-card,.ftr .f-word,.belt{display:none !important}body{font-size:12pt}}