/* VINCULA: midnight blue, electric blue, and cyan from the company identity.
   Change these named colors to adjust the whole website. */
:root {
    --navy: #030b20;
    --navy-light: #071638;
    --blue: #096aff;
    --cyan: #00d9f5;
    --ice: #eaf5ff;
    --ink: #102747;
    --muted: #a8b9d8;
    --paper: #f3f7ff;
    --display: 'Manrope', 'Segoe UI', sans-serif;
    --body: 'DM Sans', 'Segoe UI', sans-serif;
    /* Another 20% faster: 1.2 times 1.2; fixed transitions scale once. */
    --motion-speed: 1.44;
    --transition-speed: 1.2;
}

/* Foundations */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0; background: var(--navy); color: var(--ice); font-family: var(--body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--cyan); color: var(--navy); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; outline-offset: 6px; }
button:not(:disabled), summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); }
h2 { font-size: clamp(40px, 4.7vw, 68px); font-weight: 500; line-height: 1.13; letter-spacing: -.055em; }
p { line-height: 1.8; }
svg { display: block; }
main { overflow-x: clip; }
.container { width: min(1360px, calc(100% - 120px)); margin-inline: auto; }
.section-space { padding-block: 125px; }
.section-label { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; color: #8eadd4; }
.section-marker { width: 18px; height: 1px; background: var(--cyan); display: inline-block; }
.arrow-icon { width: 19px; height: 19px; flex-shrink: 0; transition: transform calc(.25s / var(--transition-speed)); }
a:hover > .arrow-icon { transform: translate(3px, -3px); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 54px; padding: 16px 24px; border-radius: 5px; border: 1px solid transparent; font-size: 12px; font-weight: 600; line-height: 1.35; transition: transform calc(.25s / var(--transition-speed)), background calc(.25s / var(--transition-speed)), box-shadow calc(.25s / var(--transition-speed)), border-color calc(.25s / var(--transition-speed)); }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--cyan); color: var(--navy); box-shadow: 0 0 28px #00d9f516; }
.button-primary:hover { background: #7ff0ff; box-shadow: 0 7px 35px #00d9f52b; }
.button-outline { border-color: #567fb756; color: #e8f1ff; background: #0b204925; }
.button-outline:hover { background: #113069; border-color: #62b3ec; }
.button-dark { background: #031331; color: white; box-shadow: 0 8px 22px #001c6550; }
.button-dark:hover { background: #0b284f; box-shadow: 0 12px 32px #001c6566; }
.text-link { display: inline-flex; gap: 22px; align-items: center; font-size: 12px; font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid #5e82b85c; }
.text-link:hover { color: var(--cyan); border-color: var(--cyan); }
.status-dot { height: 5px; width: 5px; border-radius: 50%; background: var(--cyan); display: inline-block; box-shadow: 0 0 0 5px #00d9f511, 0 0 18px #00d9f559; flex-shrink: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 14px 20px; z-index: 100; background: var(--cyan); color: var(--navy); border-radius: 4px; }
.skip-link:focus { top: 12px; }

/* A quiet, transparent navigation becomes solid as the visitor scrolls. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; color: white; transition: background calc(.3s / var(--transition-speed)), box-shadow calc(.3s / var(--transition-speed)); }
.site-header.is-scrolled { background: #030b20f2; box-shadow: 0 1px 0 #669def25; backdrop-filter: blur(16px); }
.header-inner { min-height: 99px; display: flex; align-items: center; gap: 35px; justify-content: space-between; border-bottom: 1px solid #699fed26; }
.is-scrolled .header-inner { border-color: transparent; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { width: 185px; height: auto; }
.desktop-navigation { display: flex; align-items: center; gap: 34px; margin-left: auto; margin-right: 45px; }
.desktop-navigation a { position: relative; color: #aebed7; font-size: 12px; padding-block: 17px; transition: color calc(.2s / var(--transition-speed)); }
.desktop-navigation a::after { content: ''; position: absolute; height: 2px; bottom: 7px; left: 0; right: 0; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform calc(.25s / var(--transition-speed)); }
.desktop-navigation a:hover, .desktop-navigation a.is-active { color: white; }
.desktop-navigation a.is-active::after, .desktop-navigation a:hover::after { transform: scaleX(1); }
.header-contact { min-height: 43px; display: flex; align-items: center; gap: 22px; padding: 11px 17px; border: 1px solid #578bcb70; border-radius: 5px; font-size: 11px; background: #09346c22; transition: border-color calc(.2s / var(--transition-speed)), background calc(.2s / var(--transition-speed)); }
.header-contact:hover { border-color: var(--cyan); background: #0866cc30; }
.header-contact .arrow-icon { color: var(--cyan); width: 15px; height: 15px; }
.mobile-navigation { display: none; }

/* The opening: oversized type and an orbital world of moving connections. */
.hero { position: relative; isolation: isolate; background: radial-gradient(ellipse at 80% 30%, #07307199, transparent 55%), linear-gradient(120deg, #030b20, #041335 70%, #03102b); overflow: clip; }
.hero-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(#5b94ff08 1px, transparent 1px), linear-gradient(90deg, #5b94ff08 1px, transparent 1px); background-size: 88px 88px; mask-image: linear-gradient(90deg, transparent 20%, black); }
.hero-diagonal { position: absolute; top: -30%; height: 150%; width: 160px; transform: rotate(32deg); background: linear-gradient(180deg, #0061e414, #027dff0c, transparent); border-left: 1px solid #388bff14; border-right: 1px solid #388bff0c; pointer-events: none; z-index: -1; }
.hero-diagonal-one { right: 2%; }
.hero-diagonal-two { right: 40%; width: 90px; opacity: .55; }
.hero-main { height: calc(100svh - 76px); min-height: 790px; max-height: 940px; padding-top: 143px; padding-bottom: 58px; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; position: relative; }
.hero-copy { z-index: 2; padding-bottom: 15px; animation: enter-left calc(1s / var(--motion-speed)) cubic-bezier(.2,.7,.2,1) both; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #a6bddc; font-size: 8px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { font-size: clamp(68px, 6.5vw, 100px); font-weight: 500; letter-spacing: -.066em; line-height: 1.05; margin-top: 29px; }
.headline-line { display: block; white-space: nowrap; }
.headline-gradient { word-spacing: .08em; background: linear-gradient(105deg, #5d9dff 1%, #279dff 45%, #00e3f5 92%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 7px; }
.hero-tagline { font-family: var(--display); font-size: 28px; line-height: 1.3; letter-spacing: -.035em; margin-top: 20px; color: #e3eaff; }
.hero-tagline > span { color: var(--cyan); }
.hero-description { margin-top: 21px; color: #9fb3d4; font-size: 14px; max-width: 385px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-top: 31px; }
.hero-origin { display: flex; align-items: center; gap: 10px; color: #9bb0d0; font-size: 7px; letter-spacing: .11em; margin-top: 32px; }
.origin-mark { font-size: 20px; color: var(--cyan); }
.origin-divider { padding-inline: 9px; color: #446189; }
.hero-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; border-top: 1px solid #699fed26; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; color: #b2c6e3; }
.scroll-cue:hover { color: white; }
.scroll-arrow { display: grid; place-items: center; width: 27px; height: 36px; border: 1px solid #547fbe5c; border-radius: 20px; color: var(--cyan); font-size: 17px; }
.hero-bottom-note { font-size: 7px; letter-spacing: .15em; color: #8ba5cb; display: flex; align-items: center; gap: 12px; }
.signal-line { width: 34px; height: 1px; background: linear-gradient(90deg, #0869ff, #00d9f5); }

@keyframes enter-left { from { opacity: 0; transform: translateX(-35px); } to { opacity: 1; transform: translateX(0); } }
@keyframes enter-right { from { opacity: 0; transform: translateX(45px); } to { opacity: 1; transform: translateX(0); } }

/* Continuous horizontal movement: the two equal groups form a seamless loop. */
.connection-strip { background: #06132f; border-block: 1px solid #3562a32e; padding-block: 27px; overflow: hidden; }
.ticker-viewport { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker-right calc(38s / var(--motion-speed)) linear infinite; }
.ticker-group { display: flex; align-items: center; gap: 53px; padding-right: 53px; flex-shrink: 0; }
.ticker-group > span { font-family: var(--display); font-size: 24px; font-weight: 450; letter-spacing: -.035em; color: #a5bbdf; white-space: nowrap; }
.ticker-group > i { font-style: normal; font-size: 21px; color: #078dff; }
@keyframes ticker-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Company purpose: space, clear ideas, and a more editorial rhythm. */
.purpose { background: var(--navy); position: relative; }
.purpose-layout { display: grid; grid-template-columns: .55fr 1.45fr; gap: 65px; }
.purpose-layout > .section-label { align-self: start; padding-top: 16px; }
.purpose h2 { font-size: clamp(45px, 4.9vw, 70px); }
.muted-heading { color: #7393c2; }
.purpose-description { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 35px; }
.purpose-description p { font-size: 13px; color: #9ab0d1; line-height: 1.9; }
.purpose-description .text-link { margin-top: 25px; font-size: 11px; }
.purpose-description .arrow-icon { width: 16px; height: 16px; color: var(--cyan); }
.connection-principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #36568466; margin-top: 70px; }
.connection-principles > div { position: relative; padding: 30px 15px 0 37px; }
.connection-principles > div > span { position: absolute; left: 0; top: 35px; color: #68b8ef; font-size: 8px; }
.connection-principles strong { display: block; font-size: 16px; font-weight: 450; font-family: var(--display); letter-spacing: -.025em; }
.connection-principles p { font-size: 11px; color: #8ea6ca; margin-top: 8px; }

/* Capability cards: small vector worlds, real links, and responsive hover light. */
.focus-section { background: var(--paper); color: var(--ink); position: relative; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 70px; margin-bottom: 48px; }
.focus-section .section-label { color: #49688d; }
.section-heading h2 { margin-top: 24px; font-size: clamp(42px, 4.4vw, 64px); }
.section-heading h2 > span { color: #3972bd; }
.section-intro { max-width: 280px; color: #5d7393; font-size: 13px; line-height: 1.9; padding-bottom: 6px; }
.focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.focus-card { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; background: #fff; padding: 0 28px 25px; border: 1px solid #d6e1f1; border-radius: 12px; transition: transform calc(.35s / var(--transition-speed)), border-color calc(.35s / var(--transition-speed)), box-shadow calc(.35s / var(--transition-speed)); }
.focus-card:hover { transform: translateY(-8px); border-color: #87baee; box-shadow: 0 20px 45px #1d559817; }
.focus-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(380px circle at var(--pointer-x, 50%) var(--pointer-y, 0%), #c3e9ff66, transparent 65%); opacity: 0; transition: opacity calc(.3s / var(--transition-speed)); }
.focus-card:hover::after { opacity: 1; }
.focus-card-visual { margin: 0 -28px 24px; height: 192px; background: radial-gradient(ellipse at 50% 50%, #0b3f7a, #061637 75%); color: #4fc5ff; overflow: hidden; border-bottom: 1px solid #c4d8f6; }
.focus-card-visual svg { width: 100%; height: 100%; }
.focus-card:nth-child(2) .focus-card-visual { color: #64a8ff; }
.focus-card:nth-child(3) .focus-card-visual { color: #23d5ed; }
.diagram-path { stroke-dasharray: 700; animation: diagram-flow calc(14s / var(--motion-speed)) linear infinite; }
.diagram-node { animation: node-pulse calc(4s / var(--motion-speed)) ease-in-out infinite; }
.focus-card:nth-child(2) .diagram-node { animation-delay: calc(-1.5s / var(--motion-speed)); }
.focus-card:nth-child(3) .diagram-node { animation-delay: calc(-2.5s / var(--motion-speed)); }
.focus-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.focus-card-top > span { font-size: 8px; color: #5c7394; font-weight: 500; letter-spacing: .08em; }
.focus-card-top svg { width: 27px; height: 27px; color: #2977ca; }
.focus-card h3 { font-size: 29px; font-weight: 550; letter-spacing: -.045em; line-height: 1.25; max-width: 280px; margin-bottom: 17px; min-height: 73px; }
.focus-card > p { font-size: 12px; color: #5b708d; line-height: 1.9; margin-bottom: 23px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-bottom: 22px; }
.card-tags > span { font-size: 8px; padding: 5px 8px; background: #eef4fc; color: #45658b; border: 1px solid #dce7f6; border-radius: 3px; }
.focus-card-link { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #dce6f3; padding-top: 19px; font-size: 11px; color: #285788; }
.focus-card-link:hover { color: #0058cb; }
.focus-card-link .arrow-icon { width: 16px; height: 16px; }
.focus-note { font-size: 11px; color: #5d7393; text-align: center; margin-top: 33px; }
@keyframes diagram-flow { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
@keyframes node-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* Approach: native accordions work without a connection to the server. */
.approach-section { position: relative; overflow: hidden; background: radial-gradient(ellipse at 0 100%, #07326c44, transparent 60%), #06122c; }
.approach-section::before { content: ''; position: absolute; top: -220px; right: -200px; width: 650px; height: 650px; border: 1px solid #096aff18; border-radius: 50%; box-shadow: 0 0 0 70px #0000, 0 0 0 71px #096aff0b; pointer-events: none; }
.approach-layout { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 115px; }
.approach-layout h2 { font-size: clamp(44px, 4.4vw, 62px); margin-top: 26px; }
.approach-layout h2 > span { color: #4dcdf5; }
.approach-intro { font-size: 13px; color: #9eb4d6; line-height: 1.9; max-width: 350px; margin-top: 27px; }
.approach-signature { display: flex; align-items: center; gap: 13px; margin-top: 33px; padding-top: 27px; border-top: 1px solid #30517e8c; max-width: 320px; font-size: 10px; color: #8daed8; }
.approach-signature::before { content: 'V'; display: inline-block; font-size: 29px; font-family: var(--display); color: var(--cyan); }
.approach-principles { margin-top: 9px; border-top: 1px solid #42638f77; }
.approach-principles details { border-bottom: 1px solid #42638f77; }
.approach-principles summary { display: flex; align-items: center; gap: 18px; padding-block: 29px; list-style: none; }
.approach-principles summary::-webkit-details-marker { display: none; }
.principle-number { font-size: 9px; color: #80a7d6; }
.approach-principles h3 { font-size: 21px; font-weight: 450; letter-spacing: -.035em; }
.details-plus { margin-left: auto; color: var(--cyan); font-size: 22px; font-weight: 300; transition: transform calc(.25s / var(--transition-speed)); }
.approach-principles details[open] .details-plus { transform: rotate(45deg); }
.principle-answer { padding: 0 24px 30px 31px; }
.principle-answer p { font-size: 12px; color: #a3b8d9; line-height: 1.9; }
.principle-answer > span { display: block; margin-top: 18px; font-size: 9px; color: #64cbf2; }

/* The invitation has a broad, electric blue sweep inspired by the brand card. */
.contact-section { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(115deg, #063794, #0751b7 60%, #0755b9); padding-block: 111px; }
.contact-section::after { content: ''; position: absolute; z-index: -1; width: 300px; height: 160%; top: -30%; right: 20%; transform: rotate(32deg); border-inline: 1px solid #72d3ff26; background: #0282ec20; }
.contact-orbits { position: absolute; z-index: -1; width: 800px; height: 800px; top: -470px; left: 15%; border: 1px solid #63bdff26; border-radius: 50%; box-shadow: 0 0 0 65px #0000, 0 0 0 66px #63bdff18, 0 0 0 130px #0000, 0 0 0 131px #63bdff12; }
.contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 100px; align-items: end; }
.contact-layout .section-label { color: #c0ddff; }
.contact-layout h2 { font-size: clamp(60px, 6.7vw, 95px); line-height: 1.03; margin-top: 27px; font-weight: 450; }
.contact-layout h2 > span { color: #71edff; }
.contact-copy > p { font-size: 14px; line-height: 1.9; color: #e0edff; max-width: 355px; margin-bottom: 29px; }
.contact-email { display: block; width: fit-content; margin-top: 25px; padding-bottom: 5px; color: #e9f6ff; border-bottom: 1px solid #b4ddff6b; font-size: 14px; }
.contact-email:hover { color: #a8f6ff; border-color: #a8f6ff; }
.contact-copy small { display: block; max-width: 330px; margin-top: 13px; color: #c7e2ff; font-size: 9px; line-height: 1.8; }
.site-footer { background: #02091a; padding-top: 67px; }
.footer-top { display: grid; grid-template-columns: 1.3fr .6fr 1fr; gap: 80px; padding-bottom: 55px; }
.footer-brand .brand-logo { width: 195px; }
.footer-top > div > p { margin-top: 21px; color: #8ca3c8; font-size: 12px; line-height: 1.9; }
.footer-top .footer-statement { font-size: 10px; color: #7e9ac4; max-width: 250px; margin-top: 13px; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 6px; }
.footer-links > span { color: #7697c6; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 8px; }
.footer-links a { display: flex; align-items: center; gap: 10px; color: #b0c6e6; font-size: 12px; }
.footer-links a:hover { color: var(--cyan); }
.footer-links .arrow-icon { width: 14px; height: 14px; color: #67bce6; }
.footer-top .footer-links > p { margin-top: 2px; font-size: 11px; }
.footer-bottom { min-height: 72px; padding-block: 20px; display: flex; gap: 25px; justify-content: space-between; align-items: center; border-top: 1px solid #41639540; color: #7895be; font-size: 9px; }
.footer-bottom > a { color: #aac5e6; }
.utility-page { min-height: 75vh; padding: 190px 0 105px; background: radial-gradient(ellipse at right, #08275e, var(--navy)); }
.utility-page h1 { font-size: clamp(44px, 7vw, 90px); font-weight: 500; letter-spacing: -.055em; margin-block: 20px; }
.utility-page p { max-width: 540px; color: #a8bddc; font-size: 15px; margin-bottom: 30px; }
#blazor-error-ui { position: fixed; bottom: 0; left: 0; right: 0; display: none; background: #e2f1ff; color: #102747; padding: 16px 25px; z-index: 100; font-size: 13px; }
#blazor-error-ui .reload { margin-left: 12px; text-decoration: underline; }
#blazor-error-ui .dismiss { position: absolute; right: 20px; cursor: pointer; }

/* Directional entrances are enabled only after the observer is ready. */
[data-reveal] { transition: opacity calc(.8s / var(--motion-speed)) ease, transform calc(.8s / var(--motion-speed)) cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--reveal-delay, 0ms) / var(--motion-speed)); }
.motion-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(38px); }
.motion-ready [data-reveal='left']:not(.is-visible) { transform: translateX(-55px); }
.motion-ready [data-reveal='right']:not(.is-visible) { transform: translateX(55px); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
.motion-ready .focus-card.is-visible:hover { transform: translateY(-8px); transition-delay: 0ms; }
body[data-motion='reduced'] *, body[data-motion='reduced'] *::before, body[data-motion='reduced'] *::after { animation: none !important; transition: none !important; }
body[data-motion='reduced'] [data-reveal] { opacity: 1; transform: none; }
body[data-motion='reduced'] .scene-parallax { transform: none; }
html:has(body[data-motion='reduced']) { scroll-behavior: auto; }

/* Laptop and tablet */
@media (min-width: 1700px) {
    .hero h1 { font-size: 106px; }
    .hero-main { min-height: 880px; }
}
@media (max-width: 1200px) {
    .container { width: calc(100% - 80px); }
    .desktop-navigation { gap: 27px; margin-right: 20px; }
    .hero h1 { font-size: 78px; }
    .hero-main { min-height: 760px; }
    .hero-actions .button { padding-inline: 18px; gap: 18px; font-size: 11px; }
    .hero-tagline { font-size: 25px; }
    .hero-description { font-size: 13px; max-width: 355px; }
    .hero-origin { font-size: 6px; }
    .eyebrow { font-size: 7px; letter-spacing: .1em; }
    .purpose-layout { gap: 35px; grid-template-columns: .45fr 1.55fr; }
    .purpose-description { gap: 28px; }
    .focus-grid { gap: 15px; }
    .focus-card { padding-inline: 22px; }
    .focus-card-visual { margin-inline: -22px; height: 175px; }
    .focus-card h3 { font-size: 27px; }
    .card-tags > span { font-size: 7px; padding-inline: 6px; }
    .approach-layout { gap: 65px; }
    .contact-layout { gap: 70px; }
}
@media (max-width: 960px) {
    .section-space { padding-block: 95px; }
    .brand-logo { width: 160px; }
    .desktop-navigation { gap: 20px; margin-right: 12px; }
    .desktop-navigation a { font-size: 11px; }
    .header-inner { gap: 22px; }
    .header-contact { font-size: 10px; gap: 15px; padding-inline: 13px; }
    .hero h1 { font-size: 64px; }
    .hero-tagline { font-size: 23px; }
    .hero-description { max-width: 320px; font-size: 12px; }
    .hero-main { min-height: 740px; height: auto; padding-top: 170px; padding-bottom: 100px; }
    .hero-actions { gap: 10px; }
    .hero-actions .button { font-size: 10px; gap: 13px; padding-inline: 13px; min-height: 49px; }
    .hero-origin { max-width: 260px; font-size: 6px; line-height: 1.9; }
    .hero-bottom-note { font-size: 6px; letter-spacing: .08em; }
    .ticker-group { gap: 37px; padding-right: 37px; }
    .ticker-group > span { font-size: 21px; }
    .purpose-layout { grid-template-columns: 1fr; gap: 27px; }
    .purpose h2 { font-size: 58px; }
    .purpose-description { max-width: 710px; }
    .connection-principles { margin-top: 45px; }
    .connection-principles strong { font-size: 14px; }
    .connection-principles p { font-size: 10px; }
    .section-heading { gap: 40px; align-items: start; }
    .section-heading h2 { font-size: 45px; }
    .section-intro { max-width: 230px; font-size: 12px; padding-top: 40px; }
    .focus-card { padding-inline: 18px; }
    .focus-card-visual { margin-inline: -18px; height: 150px; }
    .focus-card h3 { font-size: 24px; min-height: 90px; }
    .focus-card > p { font-size: 11px; }
    .focus-card-top > span { font-size: 7px; }
    .focus-card-top svg { width: 23px; height: 23px; }
    .focus-card-link { font-size: 10px; }
    .approach-layout { gap: 45px; }
    .approach-layout h2 { font-size: 46px; }
    .approach-principles h3 { font-size: 18px; }
    .approach-principles summary { gap: 13px; }
    .contact-layout { gap: 45px; }
    .contact-layout h2 { font-size: 64px; }
    .contact-copy > p { font-size: 13px; }
    .footer-top { gap: 45px; grid-template-columns: 1.1fr .6fr 1fr; }
    .footer-links a { font-size: 10px; }
    .footer-brand .brand-logo { width: 170px; }
}
@media (max-width: 780px) {
    .desktop-navigation { display: none; }
    .header-contact { margin-left: auto; }
    .mobile-navigation { display: block; }
    .header-inner { min-height: 83px; }
    .mobile-navigation summary { min-height: 44px; display: flex; align-items: center; gap: 9px; padding-left: 8px; font-size: 11px; list-style: none; }
    .mobile-navigation summary::-webkit-details-marker { display: none; }
    .menu-lines { width: 18px; height: 9px; border-block: 1px solid #bee9ff; }
    .mobile-navigation nav { position: absolute; top: 77px; left: 24px; right: 24px; background: #061637f7; backdrop-filter: blur(20px); border: 1px solid #36669c; padding: 15px 24px; border-radius: 7px; box-shadow: 0 20px 40px #0004; display: flex; flex-direction: column; }
    .mobile-navigation nav a { display: flex; justify-content: space-between; align-items: center; padding-block: 17px; font-size: 14px; border-bottom: 1px solid #5478a63b; }
    .mobile-navigation nav a:last-child { border: 0; color: var(--cyan); }
    .hero h1 { font-size: 57px; }
    .eyebrow { max-width: 290px; line-height: 1.9; }
    .hero-main { min-height: 710px; padding-top: 150px; padding-bottom: 80px; }
    .hero-origin { display: none; }
    .hero-actions .button { min-height: 46px; }
    .hero-actions { gap: 13px; }
    .hero-bottom-note { display: none; }
    .purpose h2 { font-size: 53px; }
    .section-intro { max-width: 210px; }
    .focus-card h3 { font-size: 22px; min-height: 85px; }
    .focus-grid { gap: 10px; }
    .card-tags > span { font-size: 6px; }
    .approach-layout { gap: 35px; }
    .approach-layout h2 { font-size: 42px; }
    .approach-principles h3 { font-size: 16px; }
    .contact-layout h2 { font-size: 57px; }
}

/* Phones: keep the headline, action, and orbital artwork close together. */
@media (max-width: 640px) {
    html { scroll-padding-top: 92px; }
    .container { width: calc(100% - 44px); }
    .section-space { padding-block: 72px; }
    .header-inner { min-height: 77px; }
    .brand-logo { width: 154px; }
    .header-contact { display: none; }
    .header-inner { gap: 20px; }
    .hero-main { display: flex; flex-direction: column; align-items: stretch; height: auto; min-height: 0; padding-top: 122px; padding-bottom: 0; }
    .hero-copy { padding-bottom: 0; }
    .eyebrow { font-size: 6.5px; letter-spacing: .09em; max-width: none; gap: 9px; line-height: 1.7; }
    .hero h1 { font-size: clamp(49px, 12.2vw, 72px); line-height: 1.08; margin-top: 23px; letter-spacing: -.065em; }
    .headline-gradient { padding-bottom: 4px; }
    .hero-tagline { font-size: 23px; margin-top: 15px; }
    .hero-description { max-width: 355px; font-size: 12px; line-height: 1.85; margin-top: 17px; }
    .hero-actions { margin-top: 24px; gap: 10px; }
    .hero-actions .button { min-height: 49px; font-size: 10px; padding: 14px 15px; gap: 16px; }
    .hero-actions .arrow-icon { width: 16px; height: 16px; }
    .hero-bottom { min-height: 69px; }
    .scroll-cue { font-size: 9px; gap: 9px; }
    .scroll-arrow { width: 24px; height: 32px; font-size: 15px; }
    .connection-strip { padding-block: 21px; }
    .ticker-group { gap: 30px; padding-right: 30px; }
    .ticker-group > span { font-size: 20px; }
    .ticker-group > i { font-size: 17px; }
    .section-label { font-size: 8px; letter-spacing: .16em; }
    .purpose-layout { gap: 24px; }
    .purpose-layout > .section-label { padding-top: 0; }
    .purpose h2 { font-size: clamp(41px, 10.5vw, 59px); }
    .purpose-description { grid-template-columns: 1fr; gap: 20px; margin-top: 27px; }
    .purpose-description p { font-size: 13px; }
    .purpose-description .text-link { margin-top: 20px; }
    .connection-principles { grid-template-columns: 1fr; margin-top: 40px; }
    .connection-principles > div { padding: 23px 0 23px 33px; border-bottom: 1px solid #36568466; }
    .connection-principles > div > span { top: 28px; }
    .connection-principles strong { font-size: 16px; }
    .connection-principles p { font-size: 11px; margin-top: 6px; }
    .section-heading { flex-direction: column; gap: 22px; margin-bottom: 34px; }
    .section-heading h2 { font-size: 42px; margin-top: 22px; }
    .section-intro { padding-top: 0; font-size: 13px; max-width: 340px; }
    .focus-grid { grid-template-columns: 1fr; gap: 22px; }
    .focus-card { padding: 0 25px 25px; }
    .focus-card-visual { height: 190px; margin: 0 -25px 24px; }
    .focus-card-top { margin-bottom: 15px; }
    .focus-card-top > span { font-size: 8px; }
    .focus-card-top svg { width: 28px; height: 28px; }
    .focus-card h3 { font-size: 30px; min-height: 0; max-width: 270px; margin-bottom: 17px; }
    .focus-card > p { font-size: 12px; }
    .card-tags > span { font-size: 8px; padding-inline: 8px; }
    .focus-card-link { font-size: 11px; }
    .focus-note { font-size: 11px; max-width: 300px; margin: 27px auto 0; line-height: 1.8; }
    .approach-layout { grid-template-columns: 1fr; gap: 42px; }
    .approach-layout h2 { font-size: 48px; margin-top: 23px; }
    .approach-intro { font-size: 13px; margin-top: 24px; }
    .approach-signature { margin-top: 25px; padding-top: 22px; }
    .approach-principles { margin-top: 0; }
    .approach-principles summary { padding-block: 26px; gap: 14px; }
    .approach-principles h3 { font-size: 19px; }
    .principle-answer { padding-left: 29px; padding-right: 10px; }
    .principle-answer p { font-size: 12px; }
    .contact-section { padding-block: 72px; }
    .contact-layout { grid-template-columns: 1fr; gap: 33px; }
    .contact-layout h2 { font-size: clamp(58px, 15vw, 83px); margin-top: 25px; }
    .contact-copy > p { max-width: 390px; font-size: 13px; margin-bottom: 25px; }
    .contact-email { font-size: 14px; margin-top: 24px; }
    .contact-copy small { font-size: 9px; }
    .site-footer { padding-top: 50px; }
    .footer-top { grid-template-columns: .8fr 1.2fr; gap: 36px 20px; padding-bottom: 36px; }
    .footer-top > div:first-child { grid-column: 1 / -1; }
    .footer-brand .brand-logo { width: 185px; }
    .footer-top > div > p { font-size: 11px; margin-top: 17px; }
    .footer-links { gap: 13px; }
    .footer-links a { font-size: 10px; }
    .footer-links > span { font-size: 8px; }
    .footer-links .arrow-icon { width: 12px; height: 12px; }
    .footer-bottom { flex-wrap: wrap; gap: 15px 10px; font-size: 8px; padding-block: 25px; }
    .footer-bottom > span:nth-child(2) { order: 3; width: 100%; }
    .footer-bottom > a { margin-left: auto; }
    .utility-page { padding-top: 145px; }
    .motion-ready [data-reveal='left']:not(.is-visible) { transform: translateX(-22px); }
    .motion-ready [data-reveal='right']:not(.is-visible) { transform: translateX(22px); }
}
@media (max-width: 360px) {
    .container { width: calc(100% - 36px); }
    .hero h1 { font-size: 43px; }
    .hero-tagline { font-size: 21px; }
    .eyebrow { font-size: 5.5px; }
    .hero-actions { gap: 9px; }
    .hero-actions .button { font-size: 9px; padding-inline: 12px; gap: 11px; }
    .hero-actions .arrow-icon { width: 14px; height: 14px; }
    .purpose h2 { font-size: 37px; }
    .section-heading h2 { font-size: 36px; }
    .approach-layout h2 { font-size: 43px; }
    .approach-principles h3 { font-size: 17px; }
    .footer-links a { font-size: 9px; gap: 5px; }
    .footer-links .arrow-icon { width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .motion-ready [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
    .scene-parallax { transform: none; }
    .light-stream { stroke-dashoffset: 0; }
}

/* Reduced motion keeps the opening copy readable, including live changes. */
body[data-motion='reduced'] .hero-copy,
body[data-motion='reduced'] .connection-scene {
    animation: none !important;
    opacity: 1;
    transform: none;
}
.hero[data-offscreen='true'] .connection-art * {
    animation-play-state: paused !important;
}
body[data-page-hidden='true'] *,
body[data-page-hidden='true'] *::before,
body[data-page-hidden='true'] *::after {
    animation-play-state: paused !important;
}

.hero-entrance-complete { animation: none !important; }