/* Keep the composition readable across viewport widths and short screens. */
#hero-heading > img {width:var(--glyph-width);height:var(--glyph-height);margin:var(--glyph-top) auto 0}
@media(min-width:1024px){
 .swarm,.technology {--v:max(calc(100svh / 1080),var(--u))}
 .hero {--hero-type-unit:min(var(--u),calc(100svh / 1080 * 1.15));--glyph-width:calc(900.488 * var(--hero-type-unit));--glyph-height:calc(230.34 * var(--hero-type-unit));--glyph-top:calc(18.64 * var(--hero-type-unit))}
 .site-header {min-height:72px}
 .brand {width:max(88px,calc(105 * var(--u)));gap:max(5px,calc(5.97 * var(--u)))}
 .brand-mark {width:max(36px,calc(42.55 * var(--u)));height:max(34px,calc(40 * var(--u)))}
 .brand-word {width:max(47px,calc(56.48 * var(--u)));height:max(18px,calc(20.39 * var(--u)))}
 .main-nav,.button {font-size:max(13px,calc(16 * var(--u)));line-height:1.25}
 .main-nav a,.main-nav .nav-item {padding:max(8px,calc(8 * var(--u))) max(10px,calc(14 * var(--u)))}
 .button-icon {width:max(32px,calc(36 * var(--u)));height:max(32px,calc(36 * var(--u)))}
 .button-icon img {width:max(7px,calc(8 * var(--u)));height:max(12px,calc(14 * var(--u)))}
 .eyebrow {font-size:max(14px,calc(16 * var(--u)));line-height:1.25}
 .technology-intro>p {font-size:max(16px,calc(20 * var(--u)))}
 .technology-copy h3 {font-size:max(28px,calc(48 * var(--u)));white-space:normal}
 .description {width:min(100%,max(260px,calc(361 * var(--u))));font-size:max(14px,calc(16 * var(--u)));line-height:1.4}
 .technology-caption {font-size:max(16px,calc(20 * var(--u)))}
 .solution-card-frame {--card-unit:max(.875px,min(var(--scene-x),var(--scene-y)))}
 .contact {height:auto;min-height:calc(835 * var(--v));padding:calc(363 * var(--v)) calc(80 * var(--u)) calc(80 * var(--v))}
 .contact-panel {position:relative;left:auto;top:auto;width:100%;height:auto;min-height:calc(392 * var(--v));padding:clamp(28px,calc(40 * var(--u)),72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,calc(40 * var(--u)),72px)}
 .contact-heading,.contact-form {position:relative;left:auto;top:auto;width:auto;min-width:0}
 .contact h2 {font-size:clamp(28px,calc(48 * var(--u)),86px);line-height:1.1}
 .contact-form {margin-top:calc(28 * var(--v))}
 .form-fields input,.form-fields textarea,.custom-select-ready .country-trigger {font-size:max(16px,calc(16 * var(--u)));min-height:42px}
 .form-fields textarea {min-height:92px}
 .form-status {position:static;margin-top:12px;max-width:none;font-size:max(13px,calc(14 * var(--u)))}
 .form-status:empty {display:none}
 .footer {min-height:560px}
 .footer-nav {font-size:max(15px,calc(18 * var(--u)));line-height:1.25;gap:max(16px,calc(20 * var(--u)))}
 .footer-contact {width:max(210px,calc(266 * var(--u)))}
 .footer-contact dt,.footer-social,.footer-legal {font-size:max(12px,calc(14 * var(--u)));line-height:1.4}
 .footer-contact dd,.footer-contact>div:last-child dd {font-size:max(14px,calc(16 * var(--u)));line-height:1.4;overflow-wrap:anywhere}
 .footer-contact dt {margin-bottom:max(8px,calc(12 * var(--u)))}
 .footer-wordmark {top:auto;bottom:-1px}
}
/* The section clips a viewport-fixed image; no scroll-driven image transforms. */
.contact {clip-path:inset(0);isolation:isolate}
.contact-background {position:fixed;inset:0;width:100%;height:100lvh;max-width:none;object-fit:cover;transform:none;z-index:-1;pointer-events:none}
@media(max-width:1023px){
 .swarm {height:max(260px,calc(120px + 85.05 * var(--u)))}
 .form-fields textarea {font-size:16px}
}
/* Keep every scene reachable on landscape phones, with scrollable copy if needed. */
@media(max-height:540px){
 .solution-card-frame {left:18px;bottom:14px;top:auto;width:360px;max-width:calc(100% - 36px);height:calc(100svh - 28px);transform:none;--u:1px;--v:1px}
 .solution-card-frame .solution-card,.solution-glass {left:8px;top:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
 .solution-accordion {height:calc(100% - 44px)}
 .solution-item {flex:0 0 30px}
 .solution-item.is-active {flex:1 1 0;display:flex;flex-direction:column}
 .solution-item h2 {flex-shrink:0}
 .solution-toggle {height:30px;font-size:14px;padding:0 18px}
 .solution-item.is-active .solution-toggle {height:48px;font-size:23px}
 .solution-item.is-active #solution-inspection {font-size:20px}
 .solution-body {min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .solution-body-inner {padding:0 18px 12px}
 .solution-body p {font-size:13px;line-height:1.4}
 .explore-link {height:44px;font-size:14px;padding:0 18px}
}

/* Mobile navigation; keep the original scroll scene, with responsive media sizing. */
.nav-toggle {display:none}
@media(max-width:1023px){
 .site-header {height:72px;padding:0 16px;align-items:center;gap:12px}
 .site-header .brand {margin-right:auto;flex-shrink:0}
 .site-header .contact-button {margin-left:auto;flex-shrink:0}
 .nav-toggle {display:grid;align-content:center;gap:6px;width:44px;height:44px;flex-shrink:0;padding:10px;border:0;border-radius:3px;background:#ffffff12;color:#fff}
 .nav-toggle span {display:block;width:24px;height:2px;background:currentColor;transition:transform 220ms ease}
 .menu-open .nav-toggle span:first-child {transform:translateY(4px) rotate(45deg)}
 .menu-open .nav-toggle span:last-child {transform:translateY(-4px) rotate(-45deg)}
 .site-header.on-light .nav-toggle {background:#efefef;color:var(--green)}
 .site-header .main-nav {top:64px;left:16px;right:16px;transform:translateY(-8px);display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:4px;background:#07352ff5;font-size:16px;line-height:1.25;max-height:calc(100svh - 80px);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 220ms ease,transform 220ms ease,visibility 220ms}
 .site-header .main-nav a,.site-header .main-nav .nav-item {padding:12px 14px;min-height:44px}
 .site-header.menu-open .main-nav {opacity:1;visibility:visible;transform:none;pointer-events:auto}
 .site-header.menu-open {transform:none;opacity:1}
 /* Keep the original sticky, reversible scene and its single video. */
 .hero-scroll {--glyph-width:min(82vw,105svh);--glyph-height:calc(var(--glyph-width) * 230.34 / 900.488);--glyph-top:0px;--media-left:0%;--media-width:100%;--media-top:calc(136px + var(--glyph-height));--media-height:calc(100svh - var(--media-top));--screen-width:46.197917vw;--screen-height:calc(var(--screen-width) * 9 / 16)}
 .hero-scroll .hero-heading {top:104px}
 .hero-scroll .hero-art {border-radius:0}
 .hero-scroll .hero-art::after {--frame-size:max(2px,calc(4 * var(--u)))}
 .hero-scroll .showroom-layer .showroom-background {mask-image:none}
 .hero-scroll .hero-slogan {left:20px;top:auto;bottom:82px;font-size:clamp(28px,6vw,44px);line-height:1.15}
 .hero-scroll .hero-scroll-cue {right:20px;top:auto;bottom:28px;font-size:12px}
 .nav-toggle:focus:not(:focus-visible) {outline:none}

}
@media(prefers-reduced-motion:reduce){.nav-toggle span,.site-header .main-nav {transition:none}}

/* The social strip is 594 × 40: never set its width and height independently. */
.footer-social img {height:auto;object-fit:contain}
@media(max-width:1023px){.footer-social {width:min(297px,calc(100% - 44px))}}

/* Preserve the source proportions in every technology card. */
.technology-image {height:auto;aspect-ratio:640 / 420;align-self:start;min-width:0}
.technology-image img {display:block;object-fit:cover}
.technology-image.image-brain img,.technology-image.image-delta img {height:auto;object-fit:cover}

/* Tablets above 800px use the same alternating image/copy columns as desktop. */
@media(min-width:801px) and (max-width:1023px){
 .technology {--u:calc(100vw / 1920);padding:64px 5% 72px}
 .technology-rows {width:88%;margin:72px auto 0;gap:100px}
 .technology-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
 .technology-copy {min-width:0}
 .technology-copy h3 {font-size:clamp(24px,2.85vw,29px)}
 .technology-copy .description {font-size:14px;line-height:1.45}
 .technology-caption {max-width:none}
}

/* All technology headings use the same solid white text. */
.technology-copy h3,.technology-copy h3 span {color:#fff}

/* Supplied SVG lockup, with white lettering on dark sections. */
.brand-logo {display:block;width:100%;height:auto;object-fit:contain;flex-shrink:0}
.site-header.on-light .brand-logo {content:url('https://spin-assets.onew.design/assets/spin-logo.svg')}

/* Replacement cards are already composed at 1280 × 840; show their full crop. */
.technology-image img,.technology-image.image-brain img,.technology-image.image-delta img {
 position:static;inset:auto;width:100%;height:100%;object-fit:cover;transform:none;
}
/* The supplied arm artwork includes a bottom black band; crop it outside the card. */
.technology-image.image-orchestration img {height:113%;object-position:center top}

.solution-body strong {font-weight:500}
.technology-caption h2 {font-size:clamp(28px,2.5vw,48px);line-height:1.15;font-weight:400}
.technology-caption>p {max-width:780px;width:84%;margin:20px auto 0;font-weight:400;color:#ffffffb3}
@media(min-width:1024px){
 .technology {height:calc(3090 * var(--v))}
 .technology-ribbon {height:calc(2930 * var(--v))}
 .technology-copy .description {width:100%;max-width:440px;line-height:1.5}
}
@media(max-width:1023px){.technology-caption {max-width:none}.technology-caption>p {width:100%}}

.technology-summary h3 {font-size:clamp(22px,1.6vw,31px);line-height:1.25;margin-top:0}
.technology-summary .description {margin-top:14px;font-weight:400}
.technology-summary .description + h3 {margin-top:28px}
@media(max-width:1023px){.technology-summary h3 {font-size:26px}}

.technology h2,.technology h3 {text-transform:none}

.technology-summary em {font-style:italic}
@media(min-width:1024px){.technology-row.reverse .technology-summary {padding-right:calc(40 * var(--u))}}

/* Keep native text scrolling only as a fallback on constrained viewports. */
.solution-item {display:flex;flex-direction:column}
.solution-item h2 {flex-shrink:0}
.solution-body {min-height:0;overflow-y:auto;scrollbar-width:thin}
#hero-heading,#swarm-heading {text-transform:none}
/* Fixed-size corner strokes retain their proportions at every card height. */
.card-decoration {border:1px solid #ffffff38;border-radius:10px}
.card-decoration i {position:absolute;width:24px;height:24px;border:2px solid #fff;border-radius:0;pointer-events:none}
.card-decoration i:nth-child(1) {left:-1px;top:-1px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.card-decoration i:nth-child(2) {right:-1px;top:-1px;border-left:0;border-bottom:0;border-top-right-radius:10px}
.card-decoration i:nth-child(3) {left:-1px;bottom:-1px;border-right:0;border-top:0;border-bottom-left-radius:10px}
.card-decoration i:nth-child(4) {right:-1px;bottom:-1px;border-left:0;border-top:0;border-bottom-right-radius:10px}

/* Original partner artwork: optical sizes are specified per brand. */
.partners-logos img {filter:grayscale(1);opacity:.72;mix-blend-mode:multiply;transition:filter 240ms ease,opacity 240ms ease}
.partners-logos>div:hover img,.partners-logos>div:focus-visible img {filter:none;opacity:1}
.partners-logos>div:focus-visible {outline:2px solid #0f6453;outline-offset:-5px}
@media(max-width:1023px){
 .footer-nav {right:22px;flex-direction:row;flex-wrap:wrap;gap:16px 24px}
 .footer-contact {top:110px;left:22px;width:calc(100% - 44px);max-width:400px}
 .footer-social {top:354px}
 .footer-legal {top:435px}
}
@media(prefers-reduced-motion:reduce){.partners-logos img{transition:none}}

/* Blend the whole cell with its light so white-backed artwork has no white tile. */
.partners-logos>div {isolation:auto;mix-blend-mode:multiply}
.partners-logos>div.reveal-pending {opacity:0;translate:none}
.footer-nav {gap:12px}
.footer-nav-label {font-size:max(12px,calc(14 * var(--u)));line-height:1.4;font-weight:500;color:#fff6}
.footer-nav-links {display:flex;flex-direction:column;gap:clamp(12px,1vw,20px)}
.footer-contact>div:last-child dd {white-space:nowrap;overflow-wrap:normal}
@media(min-width:1024px){
 .footer-contact {left:max(210px,calc(312 * var(--u)));width:max(360px,calc(470 * var(--u)))}
}
@media(max-width:1023px){
 .footer-nav {flex-direction:column;gap:12px}
 .footer-nav-label {font-size:12px;line-height:18px}
 .footer-nav-links {flex-direction:row;flex-wrap:wrap;gap:16px 24px}
 .footer-contact {top:124px}
 .footer-contact>div:last-child dd {font-size:clamp(12px,3.6vw,14px)}
}
@media(prefers-reduced-motion:reduce){.partners-logos>div.reveal-pending {opacity:1}}

/* Both footer columns share the same label, detail and row spacing. */
@media(min-width:1024px){
 .footer {--footer-label-size:max(12px,calc(14 * var(--u)));--footer-detail-size:max(14px,calc(16 * var(--u)));--footer-label-gap:max(8px,calc(12 * var(--u)));--footer-row-gap:max(20px,calc(24 * var(--u)))}
 .footer-contact {gap:var(--footer-row-gap)}
 .footer-contact dt,.footer-legal {font-size:var(--footer-label-size);line-height:1.4}
 .footer-contact dt {margin-bottom:var(--footer-label-gap)}
 .footer-contact dd,.footer-contact>div:last-child dd {font-size:var(--footer-detail-size);line-height:1.4}
 .footer-legal {top:calc(80 * var(--v) + var(--footer-label-size) * 1.4 + var(--footer-label-gap) + var(--footer-detail-size) * 1.4 + var(--footer-row-gap))}
 .footer-legal>span {display:block}
 .footer-legal p {margin-top:var(--footer-label-gap);font-size:var(--footer-detail-size);line-height:1.4;white-space:nowrap}
}

/* One entrance keeps navigation, contact details and legal copy aligned throughout. */
.footer-info {position:absolute;inset:0}

/* v45 header alignment, supplied logo lockups and restored contact form. */
@media(min-width:1024px){
 .site-header .main-nav{left:auto;right:calc(80 * var(--u));transform:none;gap:calc(12 * var(--u))}
}
.site-header.on-light .brand-logo{content:url('https://spin-assets.onew.design/assets/spin-logo-color-v48.svg')}
.technology-intro h2,.technology-copy h3,.technology-caption h2,.partners h2,.contact h2{font-weight:400}
.solution-toggle{font-weight:500}
.technology-intro>p,.technology-copy .description,.technology-summary .description,.solution-body p,.solution-body strong,.contact-form{font-weight:400}
.technology-summary{min-width:0}
.technology-summary h3{max-width:100%}
@media(min-width:1024px){
 .technology-row.reverse .technology-summary{padding-right:calc(54 * var(--u))}
}
/* Keep the final copy inside the clear left lane as the ribbon curves toward the image. */
@media(min-width:1024px) and (max-width:1600px){
 .technology-row.reverse .technology-summary{width:min(100%,max(calc(24vw - 12px),calc(180vw - 2352px)));padding-right:0}
}
@media(min-width:1024px) and (max-width:1100px) and (max-height:660px){
 .technology{height:calc(3090 * var(--v) + 48px)}
 .technology-caption{top:calc(2800 * var(--v) + 48px)}
}
@media(max-width:1023px){
 .site-header .brand{margin-right:auto}
 .site-header .main-nav{right:16px}
}

/* Match the Figma cookie card; a saved choice keeps it hidden on later visits. */
.cookie-card{
 position:fixed;right:24px;bottom:24px;z-index:120;width:535px;max-width:calc(100vw - 32px);
 min-height:236px;padding:26px 24px 24px;border:1px solid #ffffff14;border-radius:8px;
 color:#fff;background:#ffffff29;box-shadow:0 18px 50px #0003;
 backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
}
.cookie-card[hidden]{display:none}
.cookie-intro[hidden],.cookie-preferences[hidden]{display:none}
.cookie-card h2{font-size:20px;line-height:28px;font-weight:400}
.cookie-card p{max-width:487px;margin-top:8px;font-size:16px;line-height:24px;font-weight:500;color:#fffc}
.cookie-card.on-light{color:#111;background:#f8f8f8f2;border-color:#1112}
.cookie-card.on-light p{color:#222}
.cookie-card.on-light .cookie-actions button:first-child{border:1px solid #1113}
.cookie-actions{display:flex;gap:20px;margin-top:18px}
.cookie-actions button{min-height:44px;padding:12px 24px;border:0;border-radius:2px;font-size:16px;line-height:20px;font-weight:500}
.cookie-actions button:first-child{color:#000;background:#fff}
.cookie-actions button:last-child{color:#fff;background:#000}
.cookie-actions button{cursor:pointer;transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease,transform 180ms ease}
.cookie-actions button:first-child:hover{color:#fff;background:#0b6353;box-shadow:0 5px 14px #0003}
.cookie-actions button:last-child:hover{color:#111;background:#fff;box-shadow:0 5px 14px #0003}
.cookie-actions button:active{transform:translateY(2px);box-shadow:none}
.cookie-actions button:focus-visible{outline:2px solid #45cc9b;outline-offset:3px}
.cookie-card.on-light .cookie-actions button:last-child:hover{color:#fff;background:#0b6353}
.cookie-card.is-closing{animation:cookie-out 260ms ease forwards}
@keyframes cookie-out{to{opacity:0;translate:0 14px}}
@media(max-width:600px){
 .cookie-card{right:16px;bottom:16px;padding:22px 20px 20px}
 .cookie-card p{font-size:14px;line-height:21px}
 .cookie-actions{gap:10px;flex-direction:column}
 .cookie-actions button{width:100%}
}
@media(prefers-reduced-motion:reduce){.cookie-card.is-closing{animation:none}.cookie-actions button{transition:none}}