:root {
  color-scheme: light;
  --navy: #06162e;
  --navy-soft: #0b2042;
  --blue: #3275f5;
  --ink: #102342;
  --paper: #f5f7fb;
  --white: #fff;
  --muted: #64748b;
  --radius-small: 0.65rem;
  --radius-medium: 1.3rem;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid #8db5ff; outline-offset: 4px; border-radius: 3px; }
::selection { color: var(--white); background: var(--blue); }
.skip-link { position: fixed; z-index: 100; top: -4rem; left: 1rem; padding: .7rem 1rem; background: white; color: var(--navy); }
.skip-link:focus { top: 1rem; }

.site-header { position: absolute; z-index: 20; inset: 0 0 auto; min-height: 6rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.15rem clamp(1.25rem, 4vw, 4.25rem); color: white; background: linear-gradient(180deg, rgba(4,15,34,.94), rgba(4,15,34,.56) 72%, transparent); }
.brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; white-space: nowrap; }
.brand-name { font-size: 1.7rem; font-weight: 800; letter-spacing: -.075em; }
.brand-name span { color: #edf3ff; }
.brand-subtitle { margin-top: .3rem; font-size: .45rem; letter-spacing: .38em; font-weight: 700; }
.brand-logo { display: block; width: 9.25rem; aspect-ratio: 22 / 13; overflow: hidden; border-radius: .55rem; background: #051a37; }
.brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.3vw, 2.5rem); font-size: .88rem; font-weight: 600; }
.site-nav a { text-decoration: none; }
.site-nav a:not(.nav-contact):hover { color: #a8c9ff; }
.software-menu { position: relative; }
.software-menu summary { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.8rem; padding: .4rem .5rem; border-radius: var(--radius-small); cursor: pointer; list-style: none; }
.software-menu summary::-webkit-details-marker { display: none; }
.software-menu summary:hover, .software-menu[open] summary { color: #a8c9ff; }
.software-menu summary:focus-visible { outline: 3px solid #8db5ff; outline-offset: 2px; }
.menu-chevron { width: .48rem; height: .48rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.14rem) rotate(45deg); transition: transform .2s ease; }
.software-menu[open] .menu-chevron { transform: translateY(.12rem) rotate(225deg); }
.software-menu-panel { position: absolute; top: calc(100% + .65rem); right: -.6rem; width: min(21rem, calc(100vw - 2.5rem)); padding: .55rem; background: white; color: var(--ink); border: 1px solid #dbe5f4; border-radius: var(--radius-medium); box-shadow: 0 1.25rem 3.5rem rgba(3,13,31,.26); }
.menu-kicker { margin: .75rem .8rem .4rem; color: #526b8d; font-size: .65rem; font-weight: 800; letter-spacing: .14em; }
.product-link { display: grid; grid-template-columns: 2.3rem 1fr auto; align-items: center; gap: .7rem; min-height: 3.75rem; padding: .55rem .75rem; border-radius: var(--radius-small); color: var(--ink); }
.product-link:hover, .product-link:focus-visible { background: #eef4ff; color: #154fc0 !important; }
.product-link img { width: 2rem; height: 2rem; object-fit: contain; border-radius: .35rem; }
.product-link > span:last-child { color: #5278b2; font-size: 1.15rem; }
.nav-contact { display: inline-flex; align-items: center; gap: 1.2rem; padding: .85rem 1.1rem; background: var(--blue); border-radius: var(--radius-small); box-shadow: 0 .3rem 1.1rem rgba(0,0,0,.14); }
.nav-contact:hover, .button:hover { background: #1f63df; }

.story { height: 425svh; min-height: 180rem; background: var(--navy); }
.story-sticky { position: sticky; top: 0; height: 100svh; min-height: 38rem; overflow: hidden; color: white; isolation: isolate; }
.story-images, .story-frame, .story-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-images { z-index: -2; }
.story-frame { object-fit: cover; object-position: center; opacity: 0; will-change: opacity; }
.story-frame:first-child { opacity: 1; }
.story-shade { z-index: -1; background: linear-gradient(90deg, rgba(4,16,38,.85), rgba(4,16,38,.44) 43%, rgba(4,16,38,.03) 79%), linear-gradient(0deg, rgba(4,13,29,.76), transparent 27%); }
.story-intro { position: absolute; top: 24%; left: clamp(1.25rem, 6vw, 6.5rem); max-width: 47rem; transition: opacity .25s ease, transform .25s ease; }
.story-intro.is-hidden { opacity: 0; transform: translateY(-1rem); pointer-events: none; }
.eyebrow, .section-label, .caption-number, .scroll-cue { font-size: .7rem; letter-spacing: .16em; font-weight: 750; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.7rem; }
.eyebrow-line { width: 1.6rem; height: 2px; background: var(--blue); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 1.35rem; font-size: clamp(3rem, 6.4vw, 7rem); line-height: .98; letter-spacing: -.075em; font-weight: 800; text-wrap: balance; }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.story-lead { max-width: 33rem; margin-bottom: 2rem; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; color: #e4edff; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 3rem; min-height: 3.3rem; padding: .75rem 1.15rem; border-radius: var(--radius-small); text-decoration: none; font-weight: 700; }
.button-light { color: white; background: var(--blue); }
.story-caption { position: absolute; left: clamp(1.25rem, 6vw, 6.5rem); bottom: clamp(3.6rem, 9vh, 7rem); display: flex; align-items: flex-start; gap: 1.5rem; max-width: 38rem; opacity: 0; transform: translateY(1rem); transition: opacity .25s ease, transform .25s ease; }
.story-caption.is-visible { opacity: 1; transform: translateY(0); }
.story-caption p { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.7rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.12; text-wrap: balance; }
.caption-number { padding-top: .45rem; white-space: nowrap; color: #9ec0ff; }
.scroll-cue { position: absolute; right: clamp(1.25rem, 4vw, 4.25rem); bottom: 3.5rem; display: flex; align-items: center; gap: .8rem; writing-mode: vertical-rl; }
.scroll-cue i { display: block; height: 3rem; width: 1px; background: rgba(255,255,255,.7); }
.story-progress { position: absolute; inset: auto 0 0; height: 3px; background: rgba(255,255,255,.18); }
.story-progress span { display: block; height: 100%; width: 0; background: var(--blue); }

.section-shell { padding-inline: clamp(1.25rem, 6vw, 6.5rem); }
.section-label { display: flex; align-items: center; gap: 1.3rem; color: var(--blue); white-space: nowrap; }
.label-rule { display: block; width: 2.5rem; height: 1px; background: currentColor; opacity: .65; }
h2 { font-size: clamp(2.6rem, 5.5vw, 6rem); line-height: 1.02; letter-spacing: -.065em; font-weight: 800; text-wrap: balance; }
.project { padding-block: clamp(5rem, 12vw, 11rem); }
.project-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 7vw, 8rem); align-items: start; margin-top: 3.5rem; }
.project-grid h2 { margin-bottom: 0; }
.project-copy { max-width: 36rem; padding-top: .5rem; }
.project-copy p { line-height: 1.65; color: #4a5d78; }
.project-copy .large-copy { font-size: clamp(1.15rem, 1.7vw, 1.55rem); color: var(--ink); line-height: 1.5; }
.text-link { display: inline-flex; align-items: center; gap: 1.5rem; margin-top: .6rem; padding-bottom: .4rem; color: #1c60d9; border-bottom: 1px solid currentColor; font-weight: 750; text-decoration: none; }
.text-link:hover { color: var(--navy); }
.roles { padding-block: clamp(5rem, 10vw, 9rem); background: var(--paper); }
.roles-heading { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-top: 3.5rem; }
.roles-heading h2 { margin-bottom: 0; }
.roles-heading p { max-width: 20rem; margin-bottom: .4rem; line-height: 1.6; color: #4a5d78; }
.role-list { margin-top: clamp(3rem, 6vw, 6rem); border-top: 1px solid #cbd5e3; }
.role-item { display: grid; grid-template-columns: 5rem minmax(13rem, .9fr) 1fr; align-items: center; gap: 1rem; padding: 1.7rem 0; border-bottom: 1px solid #cbd5e3; }
.role-number { color: var(--blue); font-size: .77rem; font-weight: 700; }
.role-item h3 { margin-bottom: 0; font-size: clamp(1.25rem, 2.1vw, 2rem); letter-spacing: -.04em; }
.role-item p { max-width: 26rem; margin-bottom: 0; line-height: 1.55; color: #50627c; }
.proposal { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; min-height: 43rem; padding-block: clamp(5rem, 10vw, 9rem); overflow: hidden; background: var(--navy); color: white; }
.proposal-mark { align-self: center; font-size: clamp(10rem, 28vw, 30rem); font-weight: 800; line-height: .7; letter-spacing: -.15em; color: #0d2956; user-select: none; }
.proposal-mark span { color: #174fb0; }
.proposal-content { position: relative; align-self: center; max-width: 45rem; }
.proposal-content h2 { margin: 2.5rem 0; }
.proposal-content p { max-width: 36rem; font-size: clamp(1.05rem, 1.55vw, 1.35rem); line-height: 1.6; color: #d5e1f5; }
.proposal .text-link { color: #9ec0ff; }
.proposal .text-link:hover { color: white; }
.contact { padding-block: clamp(5rem, 11vw, 10rem); }
.contact-grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: start; gap: clamp(2rem, 6vw, 7rem); margin-top: 3.5rem; }
.contact-grid h2 { margin-bottom: 2rem; }
.contact-grid p { max-width: 35rem; color: #4a5d78; line-height: 1.65; }
.contact-grid .privacy-note { margin-top: 1.5rem; font-size: .86rem; color: #5d6f88; }
.partner-form { min-width: 0; padding: clamp(1.3rem, 3vw, 2.4rem); border: 1px solid #dce5f2; border-radius: var(--radius-medium); background: var(--paper); box-shadow: 0 .8rem 2.5rem rgba(8,28,61,.06); }
.form-progress { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .45rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.form-progress li { min-width: 0; padding-top: .55rem; border-top: 3px solid #cbd6e7; color: #60718b; font-size: .7rem; font-weight: 800; }
.form-progress li span { display: block; margin-top: .15rem; overflow-wrap: anywhere; font-size: .75rem; font-weight: 650; }
.form-progress li.is-current { border-color: var(--blue); color: #1454c8; }
.form-progress li.is-done { border-color: #6a9bfa; color: var(--ink); }
.form-step { min-width: 0; min-height: 16rem; margin: 0; padding: 0; border: 0; }
.form-step[hidden] { display: none; }
.form-step legend { margin-bottom: .55rem; padding: 0; font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -.045em; }
.form-step > p { margin-bottom: 1.4rem; font-size: .92rem; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
.choice-grid label { position: relative; min-width: 0; cursor: pointer; }
.choice-grid input { position: absolute; top: .9rem; left: .9rem; margin: 0; accent-color: var(--blue); }
.choice-grid span { display: flex; align-items: center; min-height: 4rem; padding: .8rem .7rem .8rem 2.4rem; border: 1px solid #c8d6e9; border-radius: var(--radius-small); background: white; font-weight: 700; line-height: 1.25; }
.choice-grid input:checked + span { border-color: var(--blue); background: #eaf2ff; }
.choice-grid input:focus-visible + span { outline: 3px solid #8db5ff; outline-offset: 2px; }
.form-label { display: block; margin: 1rem 0 .45rem; font-size: .82rem; font-weight: 750; }
.form-label .optional { margin-left: .35rem; color: #60718b; font-weight: 500; }
.partner-form textarea, .partner-form input:not([type=radio]):not([type=checkbox]) { width: 100%; min-height: 3rem; padding: .8rem .95rem; border: 1px solid #bbcbe1; border-radius: var(--radius-small); outline: none; background: white; color: var(--ink); font: inherit; }
.partner-form textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.partner-form textarea:focus, .partner-form input:not([type=radio]):not([type=checkbox]):focus { border-color: var(--blue); box-shadow: 0 0 0 3px #d8e6ff; }
.partner-form [aria-invalid=true] { border-color: #bc3445 !important; }
.form-review { margin: 0 0 1.4rem; }
.form-review div { display: grid; grid-template-columns: 6.5rem minmax(0,1fr); gap: .7rem; padding: .7rem 0; border-bottom: 1px solid #d6e0ee; }
.form-review dt { color: #596e8a; font-size: .8rem; font-weight: 700; }
.form-review dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: .86rem; line-height: 1.45; }
.form-security { display: flex; align-items: center; gap: .7rem; padding: .85rem; border-radius: var(--radius-small); background: #e9f2ff; color: #173c82; }
.form-security > span { display: grid; place-items: center; flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; background: #cce1ff; font-weight: 800; }
.form-security strong { font-size: .84rem; }
.form-security p { margin: .1rem 0 0; color: #335382; font-size: .78rem; line-height: 1.4; }
.turnstile-slot { margin-top: .9rem; }
.consent-label { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; font-size: .82rem; line-height: 1.45; }
.consent-label input { flex: 0 0 auto; margin-top: .15rem; accent-color: var(--blue); }
.form-release-note { margin: .85rem 0 0 !important; padding: .7rem .85rem; border-left: 3px solid #7a91b1; background: white; color: #425b7c !important; font-size: .77rem !important; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: 1.4rem; }
.form-actions button { min-height: 2.9rem; padding: .65rem 1rem; border-radius: var(--radius-small); font: inherit; font-size: .85rem; font-weight: 750; cursor: pointer; }
.form-actions button[hidden] { display: none; }
.form-back { border: 1px solid #c3d1e5; background: white; color: var(--ink); }
.form-next, .form-submit { margin-left: auto; border: 1px solid var(--blue); background: var(--blue); color: white; }
.form-next:hover, .form-submit:not(:disabled):hover { background: #1f63df; }
.form-submit:disabled { cursor: not-allowed; opacity: .55; }
.form-status { margin: .7rem 0 0 !important; min-height: 1rem; color: #a32335 !important; font-size: .8rem !important; }
.site-footer { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: 3rem clamp(1.25rem, 6vw, 6.5rem); color: #d7e6ff; background: var(--navy); }
.site-footer p { margin: 0; font-size: .8rem; line-height: 1.6; }
.site-footer > a:last-child { font-size: .85rem; text-underline-offset: .25rem; }
.site-footer .brand-logo { filter: none; }
.footer-links { display: flex; gap: 1.2rem; font-size: .85rem; }
.footer-links a { text-underline-offset: .25rem; }

@media (max-width: 900px) {
  .site-nav a:not(.nav-contact) { display: none; }
  .site-nav .product-link { display: grid !important; }
  .story-intro { top: auto; bottom: 17%; max-width: 36rem; }
  h1 { font-size: clamp(3rem, 8vw, 5.2rem); }
  .story-caption { right: 3rem; bottom: 4.5rem; }
  .project-grid, .contact-grid { grid-template-columns: 1fr; }
  .roles-heading { align-items: start; flex-direction: column; gap: 1.5rem; }
  .role-item { grid-template-columns: 3rem 1fr; }
  .role-item p { grid-column: 2; }
  .proposal { grid-template-columns: 1fr; }
  .proposal-mark { position: absolute; right: 6vw; bottom: 7rem; opacity: .45; }
  .proposal-content { z-index: 1; }
}

@media (max-width: 600px) {
  .site-header { display: grid; grid-template-columns: 1fr; justify-content: stretch; gap: .5rem; min-height: 7rem; padding: .8rem 1.25rem; }
  .site-nav { justify-content: space-between; }
  .brand-name { font-size: 1.45rem; }
  .site-nav .nav-contact { display: inline-flex; min-height: 2.5rem; padding: .55rem .75rem; gap: .5rem; font-size: .78rem; }
  .software-menu-panel { left: 0; right: auto; }
  .story { height: 355svh; min-height: 105rem; }
  .story-sticky { min-height: 33rem; }
  .story-images { bottom: auto; height: 67%; }
  .story-frame:first-child { object-position: 78% center; }
  .story-frame:nth-child(2) { object-position: 25% center; }
  .story-frame:nth-child(n+3) { object-position: 56% center; }
  .story-shade { background: linear-gradient(0deg, #06162e 4%, rgba(3,13,31,.96) 30%, rgba(3,13,31,.24) 75%, rgba(3,13,31,.3)); }
  .story-intro { left: 1.25rem; right: 1.25rem; top: 44%; bottom: auto; }
  .eyebrow { margin-bottom: 1rem; }
  h1 { font-size: clamp(2.35rem, 9.8vw, 3.9rem); }
  .story-lead { font-size: .98rem; }
  .button { min-height: 3rem; }
  .story-caption { left: 1.25rem; right: 1.5rem; bottom: 3rem; gap: .9rem; }
  .story-caption p { font-size: clamp(1.45rem, 6vw, 2.3rem); }
  .scroll-cue { right: 1.25rem; bottom: 1.4rem; display: flex; gap: .6rem; writing-mode: horizontal-tb; font-size: .55rem; }
  .scroll-cue i { width: 1.4rem; height: 1px; }
  .project-grid, .roles-heading, .contact-grid { margin-top: 2rem; }
  .role-item { grid-template-columns: 2.25rem 1fr; padding: 1.4rem 0; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-grid span { min-height: 3.3rem; }
  .form-step { min-height: 12rem; }
  .form-review div { grid-template-columns: 1fr; gap: .15rem; }
  .proposal { min-height: 38rem; }
  .proposal-mark { right: .8rem; bottom: 4rem; font-size: 15rem; }
  .site-footer { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story { height: 100svh; min-height: 36rem; }
  .story-sticky { position: relative; }
  .story-frame { display: none; }
  .story-frame:first-child { display: block; opacity: 1 !important; }
  .story-intro { opacity: 1 !important; transform: none !important; }
  .story-caption, .scroll-cue, .story-progress { display: none; }
}
