@font-face { font-family: Inter; src: url("assets/inter_regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: Inter; src: url("assets/inter_medium.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "Space Grotesk"; src: url("assets/space_grotesk_medium.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "Space Grotesk"; src: url("assets/space_grotesk_bold.ttf") format("truetype"); font-weight: 700; }
:root { --lake: #16324A; --ink: #10283D; --mist: #F8F8F6; --horizon: #AFC8DB; --line: #D9D6CF; --muted: #52697A; --pine: #224A42; --white: #fff; --hero-copy-scrim-dark: linear-gradient(90deg,#10283df2 0%,#10283de0 36%,#10283d91 68%,transparent 100%),linear-gradient(0deg,#10283dc2,transparent 68%); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--mist); font: 16px/1.55 Inter, Arial, sans-serif; }
img { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--lake); outline-offset: 3px; }
.skip-link { position: absolute; top: -80px; left: 12px; z-index: 20; padding: 12px 16px; color: white; background: var(--lake); }
.skip-link:focus { top: 12px; }
.container { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
.site-header { position: relative; z-index: 10; background: rgba(248,248,246,.97); }
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; flex: none; align-items: center; min-height: 48px; }
.brand img { display: block; width: 160px; height: auto; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; font-weight: 500; }
.nav-group { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; font: inherit; white-space: nowrap; cursor: pointer; }
.nav-trigger:hover, .nav-group[data-open="true"] > .nav-trigger { background: #EAF0F3; }
.system-link { text-decoration: none; }
.projects-link { text-decoration: none; }
.nav-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .16s ease; }
.nav-group[data-open="true"] .nav-caret { transform: translateY(2px) rotate(225deg); }
.nav-dropdown { position: absolute; top: calc(100% + 8px); left: 0; z-index: 12; display: grid; width: 292px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--mist); box-shadow: 0 16px 34px #10283d1a; }
.js .nav-dropdown { display: none; }
.js .nav-group[data-open="true"] .nav-dropdown { display: grid; }
.nav-dropdown a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 7px; font-size: 12px; line-height: 1.35; text-decoration: none; }
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { background: #EAF0F3; box-shadow: inset 2px 0 var(--lake); }
.header-cta, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; border: 0; border-radius: 7px; color: var(--mist); background: var(--lake); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.button:hover, .header-cta:hover { background: #214760; }
.button.secondary { color: var(--lake); background: transparent; box-shadow: inset 0 0 0 1px #16324A65; }
.menu-toggle { display: none; min-width: 46px; min-height: 46px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--white); cursor: pointer; }
.eyebrow { color: var(--lake); font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, h4 { margin: 0; color: var(--lake); font-family: "Space Grotesk", Arial, sans-serif; font-weight: 500; line-height: 1.12; }
h1 { font-size: clamp(46px, 6.5vw, 78px); letter-spacing: -.035em; }
h2 { font-size: clamp(32px, 4.2vw, 50px); letter-spacing: -.025em; }
h3 { font-size: clamp(23px, 2.5vw, 30px); }
p { margin: 0; }
.home-hero { position: relative; min-height: 680px; display: flex; align-items: end; overflow: hidden; color: white; background: var(--lake); }
.home-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.home-hero::after { position: absolute; inset: 0; content: ""; background: var(--hero-copy-scrim-dark); }
.hero-copy { position: relative; z-index: 1; max-width: 720px; padding: 80px 0 110px; }
.hero-copy .eyebrow { color: #D6E9F3; }
.hero-copy h1 { margin: 14px 0 18px; color: white; }
.hero-copy p { max-width: 590px; color: #F2F6F8; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.hero-actions .button:first-child { color: var(--lake); background: white; }
.hero-actions .button.secondary { color: white; background: #10283d3d; box-shadow: inset 0 0 0 1px #ffffffa0; }
.section { padding: 88px 0; }
.section.soft { background: #E9F0F4; }
.section.dark { color: #EAF0F3; background: var(--ink); }
.section.dark h2, .section.dark h3 { color: white; }
.section-head { display: grid; grid-template-columns: .9fr 1.1fr; align-items: end; gap: 32px; margin-bottom: 32px; }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head p { max-width: 550px; color: var(--muted); }
.section.dark .section-head p { color: #D3E0E7; }
.system-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; }
.system-image { min-height: 390px; overflow: hidden; border-radius: 10px; background: #dbe4e9; }
.system-image img { display: block; width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.system-points { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.system-point { display: flex; min-height: 116px; flex-direction: column; justify-content: end; padding: 15px; border-radius: 8px; background: white; }
.system-point span { margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.system-point b { color: var(--lake); font-size: 13px; }
.image-caption { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.boat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.boat-card { overflow: hidden; border-radius: 10px; background: white; }
.boat-card img { display: block; width: 100%; aspect-ratio: 1.45; object-fit: cover; }
.boat-card div { padding: 18px 20px 20px; }
.boat-card h3 { margin-bottom: 8px; font-size: 23px; }
.boat-card p { color: var(--muted); font-size: 12px; }
.model-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.model-card { overflow: hidden; border-radius: 9px; background: white; }
.model-card img { display: block; width: 100%; aspect-ratio: 1.42; object-fit: cover; }
.model-card div { padding: 16px; }
.model-card span { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.model-card h3 { margin-top: 6px; font-size: 23px; }
.model-card a { display: inline-flex; margin-top: 12px; color: var(--lake); font-size: 11px; font-weight: 500; text-decoration: none; }
.model-card a:hover { text-decoration: underline; text-underline-offset: 4px; }
.model-status { display: inline-flex; margin-top: 12px; color: var(--muted); font-size: 10px; }
.component-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.component-card { overflow: hidden; border-radius: 9px; background: white; }
.component-card > a { display: block; height: 100%; color: inherit; text-decoration: none; }
.component-card > a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.component-card img { display: block; width: 100%; aspect-ratio: 1.42; object-fit: cover; }
.component-card div { padding: 16px; }
.component-card p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.section-cta { margin-top: 28px; }
.story-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.story-card { position: relative; min-height: 310px; display: flex; align-items: end; overflow: hidden; padding: 24px; border-radius: 10px; color: white; background: var(--lake); }
.story-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-card::after { position: absolute; inset: 35% 0 0; content: ""; background: linear-gradient(0deg,#10283dce,transparent); }
.story-card div { position: relative; z-index: 1; }
.story-card h3 { color: white; }
.story-card p { margin-top: 7px; color: #EAF0F3; font-size: 12px; }
.concept-note { margin-top: 16px; color: #6A7D89; font-size: 10px; line-height: 1.5; }
.footer { padding: 44px 0 22px; color: #DCE5EA; background: var(--ink); }
.footer-signup { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,1.05fr); gap: 36px; align-items: center; padding: 28px 0 34px; margin-bottom: 28px; border-bottom: 1px solid #ffffff38; }
.footer-signup-copy .eyebrow { color: #AFC6D3; }
.footer-signup-copy h2 { margin-top: 8px; color: white; font-size: clamp(24px,3vw,34px); }
.footer-signup-copy p { max-width: 440px; margin-top: 8px; color: #DCE5EA; font-size: 13px; line-height: 1.6; }
.footer-signup-email { display: block; margin-bottom: 7px; color: #F4F7F8; font-size: 12px; }
.footer-signup-row { display: flex; gap: 8px; }
.footer-signup-row input { flex: 1; min-width: 0; min-height: 46px; padding: 0 13px; border: 1px solid #ffffff66; border-radius: 4px; color: white; background: #ffffff12; font: inherit; }
.footer-signup-row input::placeholder { color: #C2D0D8; }
.footer-signup-row input:focus-visible, .footer-signup-consent input:focus-visible { outline: 2px solid #AFC6D3; outline-offset: 3px; }
.footer-signup-button { flex: 0 0 auto; min-height: 46px; border-color: white; color: var(--ink); background: white; }
.footer-signup-button:hover { border-color: #DCE5EA; background: #DCE5EA; }
.footer-signup-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; color: #DCE5EA; font-size: 11px; line-height: 1.5; }
.footer-signup-consent input { flex: 0 0 auto; width: 15px; height: 15px; margin: 1px 0 0; accent-color: #AFC6D3; }
.footer-signup-status { margin-top: 9px; color: #BCCBD4; font-size: 10px; line-height: 1.5; }
.newsletter-nudge { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 22px; margin-top: 22px; border-top: 1px solid #D9E0E3; color: #526773; font-size: 12px; }
.newsletter-nudge-link { display: inline-flex; min-height: 34px; gap: 8px; align-items: center; padding: 0 10px; border: 1px solid #C8D2D8; border-radius: 3px; color: var(--ink); font-size: 11px; font-weight: 600; text-decoration: none; transition: border-color .16s ease, background .16s ease; }
.newsletter-nudge-link:hover { border-color: #8EA2AE; background: #F2F5F6; }
.newsletter-nudge-link:focus-visible { outline: 2px solid #557B91; outline-offset: 3px; }
.section.dark .newsletter-nudge { border-color: #ffffff38; color: #DCE5EA; }
.section.dark .newsletter-nudge-link { border-color: #ffffff66; color: white; }
.section.dark .newsletter-nudge-link:hover { border-color: white; color: var(--ink); background: white; }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(4,1fr); gap: 24px; padding-bottom: 30px; }
.footer-logo { width: 136px; height: auto; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 210px; margin-top: 13px; color: #DCE5EA; font-size: 11px; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footer-socials a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid #ffffff55; border-radius: 50%; color: #DCE5EA; text-decoration: none; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.footer-socials svg { width: 15px; height: 15px; fill: currentColor; }
.footer-socials svg rect, .footer-socials svg circle { fill: none; stroke: currentColor; stroke-width: 1.8; }
.footer-socials svg .social-icon-dot { fill: currentColor; stroke: none; }
.footer-socials a:hover, .footer-socials a:focus-visible { border-color: white; color: var(--ink); background: white; }
.footer-socials a:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.footer-group h4 { margin-bottom: 9px; color: white; font: 500 10px/1.3 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.footer-group a { display: flex; width: fit-content; min-height: 36px; align-items: center; color: #DCE5EA; font-size: 11px; text-decoration: none; }
.footer-group a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 15px; border-top: 1px solid #ffffff38; color: #BCCBD4; font-size: 10px; }
.local-nav { position: relative; z-index: 4; display: flex; align-items: center; gap: 12px; min-height: 58px; overflow-x: auto; padding: 0 max(32px, calc((100vw - 1280px)/2)); border-bottom: 1px solid var(--line); background: rgba(248,248,246,.96); white-space: nowrap; scrollbar-width: thin; }
.local-nav strong { flex: none; margin-right: 8px; padding-right: 18px; border-right: 1px solid var(--line); color: var(--lake); font: 500 14px/1.2 "Space Grotesk", sans-serif; }
.local-nav a { display: inline-flex; flex: none; min-height: 56px; align-items: center; padding: 0 8px; color: var(--muted); font-size: 11px; text-decoration: none; }
.local-nav a:hover, .local-nav a[aria-current="location"] { color: var(--lake); box-shadow: inset 0 -2px var(--lake); }
.product-hero { position: relative; min-height: 630px; display: flex; align-items: center; overflow: hidden; color: white; background: var(--ink); }
.product-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.product-hero::before { position: absolute; inset: 0; content: ""; background: var(--hero-copy-scrim-dark); }
.product-hero::after { position: absolute; inset: 0; pointer-events: none; content: ""; background: linear-gradient(0deg,#10283de0 0%,#10283d87 13%,transparent 42%); }
.product-hero-copy { position: relative; z-index: 1; width: min(540px, 48%); padding: 70px 0 138px; }
.product-hero-copy .eyebrow { margin-bottom: 12px; color: #D6E9F3; }
.product-hero-copy h1 { color: white; }
.product-hero-copy h1 { margin-bottom: 15px; }
.product-hero-copy p { max-width: 430px; color: #F2F6F8; font-size: 16px; }
.product-hero-copy .hero-actions { margin-top: 22px; }
.hero-stats { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 19px max(32px, calc((100vw - 1200px)/2)) 21px; color: white; text-shadow: 0 1px 4px #10283d80; }
.hero-stat { padding: 0 24px; border-right: 1px solid #ffffff78; }
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child { border: 0; }
.hero-stat span { display: block; font-size: 10px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.hero-stat strong { display: block; margin-top: 4px; font: 500 clamp(27px,3vw,40px)/1.1 "Space Grotesk",sans-serif; }
.two-column { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 46px; }
.two-column.reverse { grid-template-columns: 1.18fr .82fr; }
.two-column img { display: block; width: 100%; border-radius: 10px; object-fit: cover; }
.two-column .lead { margin-top: 12px; color: var(--muted); }
.two-column .body-copy { margin-top: 14px; color: var(--muted); font-size: 14px; }
.big-stat { margin-top: 22px; color: var(--lake); font: 500 clamp(46px,7vw,78px)/.95 "Space Grotesk",sans-serif; }
.big-stat-label { margin-top: 9px; color: var(--lake); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.model-card-link { display: inline-flex; margin-top: 14px; color: var(--lake); font-size: 12px; font-weight: 500; text-decoration: none; }
.model-card-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.case-study-snapshot { min-height: 320px; display: grid; align-content: center; justify-items: center; padding: 30px; border-radius: 10px; color: var(--lake); background: #E9F0F4; text-align: center; }
.case-study-snapshot strong { font: 500 clamp(68px,10vw,118px)/.95 "Space Grotesk",sans-serif; }
.case-study-snapshot span { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.case-study-snapshot small { max-width: 320px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.system-line { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 9px; align-items: center; margin-top: 30px; }
.system-node { min-height: 108px; display: grid; align-content: center; justify-items: center; padding: 12px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.system-node img { width: 72px; height: 50px; object-fit: contain; }
.system-node b { margin-top: 7px; color: var(--lake); font-size: 10px; }
.system-node span { color: var(--muted); font-size: 9px; }
.spec-list { border-top: 1px solid var(--line); }
.spec-list details { border-bottom: 1px solid var(--line); }
.spec-list summary { display: flex; min-height: 50px; align-items: center; justify-content: space-between; color: var(--lake); font-size: 13px; cursor: pointer; list-style: none; }
.spec-list summary::-webkit-details-marker { display: none; }
.spec-list summary::after { content: "+"; color: #0071B8; font-size: 18px; }
.spec-list details[open] summary::after { content: "−"; }
.spec-list details p { padding: 0 0 16px; color: var(--muted); font-size: 12px; }
.motor-spec-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.motor-spec-card { min-height: 142px; padding: 18px; border-top: 2px solid var(--horizon); background: #EEF2F3; }
.motor-spec-card h3 { margin-bottom: 9px; font-size: 18px; }
.motor-spec-card p { color: var(--muted); font-size: 12px; }
.motor-spec-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-content: start; }
.motor-spec-category { padding: 17px 18px 8px; border-top: 2px solid var(--lake); background: #F2F5F6; }
.motor-spec-category header { display: flex; align-items: baseline; gap: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.motor-spec-category header > span { color: var(--horizon); font-size: 10px; letter-spacing: .1em; }
.motor-spec-category h3 { margin: 0; color: var(--lake); font-size: 16px; }
.motor-spec-category dl { margin: 0; }
.motor-spec-row { display: grid; grid-template-columns: minmax(100px,.7fr) minmax(0,1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.motor-spec-row:last-child { border-bottom: 0; }
.motor-spec-row dt { color: var(--muted); font-size: 11px; line-height: 1.45; }
.motor-spec-row dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.45; }
.spec-review { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 400; letter-spacing: .02em; }
.configuration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 24px; }
.configuration-grid article { min-height: 150px; padding: 22px; background: #EEF2F3; }
.configuration-grid h3 { margin-bottom: 10px; font-size: 22px; }
.configuration-grid p { color: var(--muted); font-size: 13px; }
.resource-band { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; margin-top: 24px; color: white; }
.resource-band a { position: relative; min-height: 116px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 18px 48px 18px 20px; border: 1px solid #ffffff45; border-radius: 8px; color: white; background: #10283d; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .18s ease, transform .18s ease; }
.resource-band a:hover, .resource-band a:focus-visible { color: var(--ink); background: #F8F8F6; transform: translateY(-2px); }
.resource-band a span { color: #C1D2DC; font-size: 11px; font-weight: 400; }
.resource-band a .resource-arrow { position: absolute; right: 20px; top: 50%; color: white; font-size: 19px; transform: translateY(-50%); }
.resource-band a:hover .resource-arrow, .resource-band a:focus-visible .resource-arrow { color: var(--lake); }
.section.dark#resources { color: #EAF0F3; background: var(--ink); }
.section.dark#resources h2, .section.dark#resources h3 { color: #FFFFFF; }
.section.dark#resources .section-head p { color: #DCE5EA; }
.section.dark#resources .section-head .eyebrow { color: #C1D2DC; }
.section.dark#resources .resource-band a { border-color: #FFFFFF5C; color: #FFFFFF; background: #17364E; }
.section.dark#resources .resource-band a span { color: #DCE5EA; }
.section.dark#resources .resource-band a .resource-arrow { color: #FFFFFF; }
.section.dark#resources .resource-band a:hover, .section.dark#resources .resource-band a:focus-visible { border-color: #FFFFFF; color: var(--ink); background: #F8F8F6; }
.section.dark#resources .resource-band a:hover span, .section.dark#resources .resource-band a:focus-visible span { color: #526773; }
.section.dark#resources .resource-band a:hover .resource-arrow, .section.dark#resources .resource-band a:focus-visible .resource-arrow { color: var(--lake); }
.support-newsletter { display: grid; grid-template-columns: minmax(0,.85fr) minmax(340px,1.15fr); gap: 28px; align-items: center; margin-top: 20px; padding: 24px; border: 1px solid #D4DEE3; border-radius: 8px; color: var(--ink); background: #FFFFFF; }
.support-newsletter-copy .eyebrow { color: #426378; }
.support-newsletter-copy h3 { margin: 7px 0; font-size: clamp(20px,2.5vw,27px); }
.support-newsletter-copy p { color: #526773; font-size: 12px; line-height: 1.55; }
.support-signup-email { display: block; margin-bottom: 7px; color: var(--ink); font-size: 12px; }
.support-signup-row { display: flex; gap: 8px; }
.support-signup-row input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #9EAFB8; border-radius: 4px; color: var(--ink); background: white; font: inherit; }
.support-signup-row input::placeholder { color: #687C87; }
.support-signup-row input:focus-visible, .support-signup-consent input:focus-visible { outline: 2px solid #557B91; outline-offset: 3px; }
.support-signup-button { flex: 0 0 auto; min-height: 44px; border-color: var(--ink); color: white; background: var(--ink); }
.support-signup-button:hover { border-color: #294D67; background: #294D67; }
.support-signup-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; color: #405560; font-size: 11px; line-height: 1.5; }
.support-signup-consent input { flex: 0 0 auto; width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--ink); }
.support-signup-status { margin-top: 8px; color: #526773; font-size: 10px; line-height: 1.5; }
.contact-newsletter { margin-top: 26px; padding: 20px; border: 1px solid #D4DEE3; border-radius: 6px; background: #F2F5F6; }
.contact-newsletter .eyebrow { color: #426378; }
.contact-newsletter h3 { margin: 6px 0; color: var(--ink); font-size: 20px; }
.contact-newsletter > p { margin-bottom: 14px; color: #526773; font-size: 12px; line-height: 1.55; }
.contact-signup-email { display: block; margin-bottom: 6px; color: var(--ink); font-size: 12px; }
.contact-signup-row { display: flex; gap: 8px; }
.contact-signup-row input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #9EAFB8; border-radius: 4px; color: var(--ink); background: #FFFFFF; font: inherit; }
.contact-signup-row input:focus-visible, .contact-signup-consent input:focus-visible { outline: 2px solid #557B91; outline-offset: 3px; }
.contact-signup-button { flex: 0 0 auto; min-height: 44px; border-color: var(--ink); color: #FFFFFF; background: var(--ink); }
.contact-signup-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; color: #405560; font-size: 10px; line-height: 1.5; }
.contact-signup-consent input { flex: 0 0 auto; width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--ink); }
.contact-signup-status { margin-top: 7px; color: #526773; font-size: 10px; line-height: 1.5; }
.product-footer-cta { padding: 52px 30px; border-radius: 10px; background: #E9F0F4; text-align: center; }
.product-footer-cta h2 { font-size: clamp(28px,4vw,42px); }
.product-footer-cta p { margin: 10px auto 18px; max-width: 550px; color: var(--muted); font-size: 13px; }
.review-note { margin: 20px 0 36px; padding: 12px 16px; border-left: 3px solid var(--pine); color: var(--muted); background: #EEF2EE; font-size: 10px; }
.battery-hero { min-height: 560px; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 24px; padding: 44px 0 10px; }
.battery-hero-copy { max-width: 460px; }
.battery-hero-copy .eyebrow { margin-bottom: 13px; }
.battery-hero-copy h1 { font-size: clamp(42px,5.5vw,68px); }
.battery-hero-copy p { margin-top: 14px; color: var(--muted); font-size: 18px; }
.battery-hero-copy .hero-actions { margin-top: 21px; }
.battery-hero img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.battery-hero .battery-system-render { max-height: 460px; }
.component-stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 16px 0 25px; color: var(--lake); }
.component-stats .hero-stat { text-align: center; }
.component-stats .hero-stat:first-child { padding-left: 24px; }
.weight-section { background: #F0F4F5; }
.weight-layout { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 34px; }
.weight-layout img { width: 100%; border-radius: 10px; }
.weight-layout .big-stat { margin-top: 24px; }
.battery-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 24px; }
.benefit-card { padding: 20px; border-top: 2px solid var(--horizon); background: white; }
.benefit-card h3 { margin-bottom: 8px; font-size: 20px; }
.benefit-card p { color: var(--muted); font-size: 12px; }
.side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.side-by-side article { padding: 24px; border-radius: 9px; background: white; }
.side-by-side img { display: block; width: 100%; height: 200px; object-fit: contain; }
.side-by-side h3 { margin: 12px 0 8px; font-size: 22px; }
.side-by-side p { color: var(--muted); font-size: 12px; }
.side-by-side .architecture-future { min-height: 248px; display: flex; flex-direction: column; justify-content: center; background: #F4F6F6; }
.architecture-future h3 { max-width: 370px; margin-top: 14px; }
.architecture-future p { max-width: 390px; }
.future-status { margin-top: 22px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.page-hero { position: relative; min-height: 500px; display: flex; align-items: end; overflow: hidden; color: white; background: var(--lake); }
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.page-hero::after { position: absolute; inset: 0; content: ""; background: var(--hero-copy-scrim-dark); }
.page-hero-copy { position: relative; z-index: 1; padding: 100px 0 72px; }
.page-hero-copy .eyebrow { color: #D6E9F3; }
.page-hero-copy h1 { max-width: 850px; margin: 12px 0 14px; color: white; }
.page-hero-copy p { max-width: 610px; color: #F2F6F8; font-size: 17px; }
.page-hero-short { min-height: 390px; }
.page-hero-short .page-hero-copy { padding-block: 72px 54px; }
.article-hero { min-height: 510px; }
.article-hero .page-hero-copy { max-width: 900px; }
.article-hero h1 { font-size: clamp(38px,5.4vw,66px); }
.collection-hero { min-height: 570px; }
.collection-hero .hero-copy { max-width: 760px; }
.content-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.content-card { min-width: 0; overflow: hidden; border-radius: 9px; background: white; }
.content-card > a { display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.content-card > a:hover .text-link { text-decoration: underline; text-underline-offset: 4px; }
.content-card > a > img { display: block; width: 100%; aspect-ratio: 1.48; object-fit: cover; }
.content-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 19px 20px 21px; }
.content-card-copy .eyebrow { margin-bottom: 9px; }
.content-card-copy h3 { margin-bottom: 9px; font-size: clamp(20px,2.1vw,26px); }
.content-card-copy p { color: var(--muted); font-size: 12px; }
.content-card-copy .text-link { margin-top: auto; padding-top: 16px; color: var(--lake); font-size: 11px; font-weight: 500; }
.resource-page-title { margin: 10px 0; font-size: clamp(38px,5vw,58px); }
.resource-page-intro { max-width: 700px; margin-bottom: 28px; color: var(--muted); font-size: 14px; }
.outboard-range-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.outboard-range-card { overflow: hidden; border-radius: 9px; background: white; }
.outboard-range-card > a { display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.outboard-range-card img { width: 100%; height: 210px; padding: 16px; object-fit: contain; background: #EEF2F3; }
.outboard-range-card > a > div { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 20px; }
.outboard-range-card h3 { margin: 8px 0; }
.outboard-range-card p { margin: 8px 0 15px; color: var(--muted); font-size: 12px; }
.range-label { color: var(--muted); font-size: 10px; }
.outboard-range-card .text-link { margin-top: auto; color: var(--lake); font-size: 11px; font-weight: 500; }
.model-card-compact > a { display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.model-card-compact img { aspect-ratio: 1.42; padding: 16px; object-fit: contain; background: #EEF2F3; }
.model-card-compact > div { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.model-card-compact h3 { margin: 6px 0 0; }
.family-action { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--lake); font-size: 11px; font-weight: 600; }
.model-card-compact > a:hover .family-action { text-decoration: underline; text-underline-offset: 4px; }
.model-card-compact:focus-within { box-shadow: 0 0 0 2px var(--lake); }
.model-card-compact.is-current { box-shadow: inset 0 0 0 1px var(--lake); }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.feature-card { min-height: 190px; padding: 22px; border-top: 2px solid var(--horizon); background: white; }
.feature-card h3 { margin: 12px 0 9px; font-size: 23px; }
.feature-card p { color: var(--muted); font-size: 12px; }
.article-layout, .case-study-layout, .event-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 48px; align-items: start; }
.article-body { max-width: 760px; }
.article-body > * + * { margin-top: 18px; }
.article-body h2, .article-body h3, .case-study-layout h2 { margin-top: 34px; font-size: 27px; }
.article-body p, .case-study-layout .body-copy { color: var(--muted); font-size: 14px; }
.article-body .article-lead { color: var(--lake); font: 500 22px/1.45 "Space Grotesk",sans-serif; }
.article-aside, .event-facts { position: sticky; top: 24px; display: grid; gap: 12px; padding: 20px; background: #E9F0F4; }
.article-aside a { color: var(--lake); font-size: 12px; text-decoration: none; }
.article-aside a:hover { text-decoration: underline; }
.case-study-layout { grid-template-columns: minmax(0,1fr) 300px; }
.case-result { display: grid; align-content: center; min-height: 260px; padding: 24px; color: var(--lake); background: #E9F0F4; }
.case-result strong { font: 500 clamp(66px,9vw,104px)/.95 "Space Grotesk",sans-serif; }
.case-result span { margin-top: 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; }
.case-result small { margin-top: 12px; color: var(--muted); font-size: 10px; }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq-layout > div:first-child .section-head { display: block; }
.faq-layout > div:first-child .button { margin-top: 16px; }
.faq-list details { padding: 0 12px; }
.faq-list summary { font-weight: 500; }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 46px; align-items: start; }
.legal-index { position: sticky; top: 24px; display: grid; gap: 11px; padding: 18px; background: #E9F0F4; }
.legal-index a { color: var(--lake); font-size: 11px; text-decoration: none; }
.legal-index a:hover { text-decoration: underline; }
.legal-copy { max-width: 790px; }
.legal-review-banner { display: grid; gap: 5px; margin: 0 0 28px; padding: 16px 18px; border-left: 3px solid var(--lake); color: var(--lake); background: #E9F0F4; }
.legal-review-banner strong { font-size: 13px; }
.legal-review-banner span { color: var(--muted); font-size: 11px; }
.legal-copy section { padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.legal-copy section + section { padding-top: 24px; }
.legal-copy h2 { font-size: 26px; }
.legal-pending { margin-top: 12px; color: var(--muted); font-size: 13px; }
.contact-section { padding-top: 70px; }
.contact-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.82fr); gap: 60px; align-items: start; }
.contact-layout h1 { max-width: 650px; margin: 13px 0 16px; font-size: clamp(42px,5.4vw,66px); }
.contact-layout .body-copy { max-width: 590px; color: var(--muted); font-size: 15px; }
.contact-points { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 30px; }
.contact-points p { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.contact-points strong { color: var(--lake); font-size: 11px; }
.contact-form { display: grid; gap: 13px; padding: 24px; background: #E9F0F4; }
.contact-form label { display: grid; gap: 6px; color: var(--lake); font-size: 11px; font-weight: 500; }
.contact-form label[hidden] { display: none !important; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #AFC0C9; border-radius: 4px; color: var(--ink); background: white; font: inherit; }
.contact-form textarea { resize: vertical; }
.contact-form .concept-note { color: var(--muted); font-size: 10px; }
.contact-form fieldset, .registration-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-form legend, .registration-panel legend { margin-bottom: 11px; color: var(--lake); font-size: 12px; font-weight: 600; }
.contact-form .checkbox-row { display: flex; align-items: center; gap: 9px; }
.contact-form .checkbox-row input, .self-install-option input { width: 18px; min-height: 18px; accent-color: var(--lake); }
.repower-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; padding: 15px; border-left: 2px solid var(--horizon); background: #F5F7F8; }
.repower-fields[hidden] { display: none !important; }
.repower-fields label { grid-template-columns: minmax(0,1fr); }
.repower-fields input, .repower-fields select { grid-column: 1; }
.system-intro { max-width: 560px; margin: 12px 0 32px; color: var(--muted); font-size: 16px; }
.registration-section { min-height: 66vh; padding-top: 68px; }
.registration-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(350px, 1fr); gap: clamp(34px,7vw,90px); align-items: start; }
.registration-layout h1 { max-width: 620px; margin: 13px 0 18px; font-size: clamp(40px,5vw,62px); }
.registration-layout-wide { grid-template-columns: minmax(260px,.65fr) minmax(0,1.35fr); }
.registration-panel { display: grid; gap: 12px; padding: 24px; background: #EEF2F3; }
.registration-panel > label, .registration-field-grid label, .registration-measurement > label { display: grid; gap: 6px; color: var(--lake); font-size: 11px; font-weight: 500; }
.registration-panel input, .registration-panel select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #AFC0C9; border-radius: 4px; color: var(--ink); background: white; font: inherit; }
.registration-panel button:disabled { opacity: .58; cursor: not-allowed; }
.registration-preview-note { display: grid; gap: 4px; padding: 13px 15px; border-left: 3px solid var(--horizon); color: var(--lake); background: #E3EBEF; }
.registration-preview-note strong { font-size: 12px; }
.registration-preview-note span, .field-help { color: var(--muted); font-size: 10px; line-height: 1.5; }
.registration-steps { display: flex; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: registration-step; }
.registration-steps li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.registration-steps li::before { counter-increment: registration-step; content: counter(registration-step); display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.registration-steps li[aria-current="step"] { color: var(--lake); font-weight: 600; }
.registration-steps li[aria-current="step"]::before { color: white; border-color: var(--lake); background: var(--lake); }
.registration-details-form { gap: 22px; }
.registration-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.registration-measurement { display: grid; grid-template-columns: minmax(0,1fr) 90px; gap: 8px; align-items: end; }
.self-install-option { display: flex !important; grid-template-columns: auto 1fr !important; align-items: center; gap: 9px !important; margin-top: 10px; }
.self-install-option input { width: 18px; }
.partner-empty-state { margin: 0; color: var(--muted); font-size: 10px; }
.registration-details-form .concept-note { margin: 0; color: var(--muted); font-size: 10px; }
.contact-wide-image { display: block; width: 100%; max-height: 470px; border-radius: 9px; object-fit: cover; }
.error-hero { min-height: 72vh; display: grid; align-items: center; color: white; background: linear-gradient(110deg,#10283d,#16324a 70%,#244c63); }
.error-copy { padding-block: 80px; }
.error-copy .eyebrow { color: #D6E9F3; }
.error-copy > strong { display: block; margin: 18px 0; color: white; font: 500 clamp(100px,20vw,210px)/.8 "Space Grotesk",sans-serif; }
.error-copy h1 { max-width: 760px; color: white; font-size: clamp(36px,5.4vw,62px); }
.error-copy p { margin-top: 14px; color: #F2F6F8; }
.error-copy .button:first-child { color: var(--lake); background: white; }
.system-node[href] { color: inherit; text-decoration: none; }
.system-node[href]:hover { background: #EEF2F3; }
.mobile-local-label { display: none; }
.portal-link { color: var(--lake); text-decoration: none; white-space: nowrap; }
.portal-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.model-card-compact img { aspect-ratio: 1.42; padding: 0; object-fit: cover; background: none; }
.resource-band a:hover span:not(.resource-arrow), .resource-band a:focus-visible span:not(.resource-arrow) { color: var(--muted); }
.shared-system-module .section-head h2 { max-width: 760px; }
.hero-stat:last-child { border-right: 0; }
@media (max-width: 1060px) {
  .system-line { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .portal-link { min-height: 44px; }
}
@media (max-width: 680px) {
  .system-line { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .resource-band { grid-template-columns: 1fr; }
  .resource-band a { min-height: 88px; }
  .product-hero::before { background: linear-gradient(180deg,#10283df2 0%,#10283ddf 35%,#10283d7d 67%,transparent 100%); }
  .product-hero::after { background: linear-gradient(0deg,#10283ded 0%,#10283d9c 19%,transparent 47%); }
  .hero-stat { border-color: #ffffff78; }
  .hero-stat span { color: white; }
  .hero-stat strong { color: white; }
  .portal-link { width: fit-content; }
}
@media (max-width: 1060px) {
  .container { width: min(100% - 36px, 760px); }
  .motor-spec-groups { grid-template-columns: 1fr; }
  .registration-layout, .registration-layout-wide { grid-template-columns: 1fr; }
  .header-inner { min-height: 76px; flex-wrap: wrap; padding: 12px 0; }
  .brand img { width: 136px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .site-nav { display: flex; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 12px; }
  .js .site-nav { display: none; }
  .js .site-nav[data-open="true"] { display: flex; }
  .menu-toggle { display: none; }
  .js .menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .nav-group { width: 100%; }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 10px 8px; text-align: left; }
  .nav-dropdown { position: static; width: 100%; padding: 0 8px 8px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .site-nav > .header-cta { width: fit-content; margin-top: 8px; }
  .section-head { grid-template-columns: 1fr; gap: 15px; }
  .system-layout, .two-column, .two-column.reverse, .weight-layout { grid-template-columns: 1fr; }
  .system-image, .system-image img { min-height: 300px; }
  .product-hero-copy { width: 60%; }
  .battery-hero { grid-template-columns: 1fr 1fr; }
  .content-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .outboard-range-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-layout, .case-study-layout, .event-detail-layout { grid-template-columns: minmax(0,1fr) 240px; gap: 28px; }
  .contact-layout { gap: 32px; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
  .footer-signup { grid-template-columns: 1fr; gap: 20px; }
  .footer-brand { grid-column: 1/-1; }
}
@media (max-width: 680px) {
  .container { width: calc(100% - 32px); }
  .home-hero { min-height: 610px; }
  .hero-copy { padding: 60px 0 105px; }
  .hero-copy p { font-size: 15px; }
  .section { padding: 60px 0; }
  .boat-grid, .model-grid, .component-grid, .story-strip, .battery-benefits, .side-by-side { grid-template-columns: 1fr; }
  .content-card-grid, .outboard-range-grid, .feature-grid, .article-layout, .case-study-layout, .event-detail-layout, .faq-layout, .legal-layout, .contact-layout { grid-template-columns: 1fr; }
  .page-hero { min-height: 450px; }
  .page-hero-short { min-height: 360px; }
  .page-hero-copy { padding: 76px 0 48px; }
  .page-hero-copy h1 { font-size: clamp(39px,11vw,58px); }
  .page-hero-copy p { font-size: 14px; }
  .article-aside, .event-facts, .legal-index { position: static; }
  .contact-points { grid-template-columns: 1fr; }
  .contact-form { padding: 18px; }
  .repower-fields { grid-template-columns: 1fr; }
  .registration-panel { padding: 18px; }
  .registration-field-grid { grid-template-columns: 1fr; }
  .registration-steps { flex-wrap: wrap; }
  .boat-card img, .model-card img, .component-card img { aspect-ratio: 1.55; }
  .system-points { grid-template-columns: 1fr 1fr; }
  .system-point { min-height: 90px; }
  .footer-grid { gap: 20px 14px; }
  .footer-signup-row { flex-direction: column; }
  .footer-signup-button { width: 100%; }
  .support-newsletter { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .support-signup-row { flex-direction: column; }
  .support-signup-button { width: 100%; }
  .contact-signup-row { flex-direction: column; }
  .contact-signup-button { width: 100%; }
  .footer-brand { grid-column: 1/-1; }
  .footer-bottom { flex-direction: column; }
  .local-nav { min-height: 50px; gap: 8px; padding: 0 16px; }
  .local-nav strong { position: sticky; left: 0; z-index: 1; padding-right: 12px; background: var(--mist); }
  .local-nav a { min-height: 50px; padding: 0 6px; font-size: 10px; }
  .product-hero { min-height: 670px; align-items: start; }
  .product-hero > img { object-position: 62% center; }
  .product-hero::before { background: linear-gradient(180deg,#F8F8F6 0%,#F8F8F6ee 33%,#F8F8F6a8 57%,transparent 82%); }
  .product-hero::after { background: linear-gradient(0deg,#F8F8F6d9 0%,#F8F8F681 19%,transparent 43%); }
  .product-hero-copy { width: 100%; padding: 45px 0 200px; }
  .product-hero-copy p { max-width: 300px; font-size: 14px; }
  .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 14px 16px 17px; }
  .hero-stat { padding: 0 10px; }
  .hero-stat:first-child { padding-left: 0; }
  .hero-stat span { font-size: 8px; }
  .hero-stat strong { font-size: clamp(20px,6vw,30px); }
  .two-column { gap: 24px; }
  .system-line { grid-template-columns: repeat(3,1fr); }
  .resource-band { grid-template-columns: repeat(2,1fr); }
  .battery-hero { grid-template-columns: 1fr; gap: 6px; padding-top: 42px; }
  .battery-hero img { max-height: 270px; }
  .battery-hero .battery-system-render { max-height: 270px; }
  .component-stats { padding-top: 5px; }
  .component-stats .hero-stat { padding: 0 8px; }
  .component-stats .hero-stat:first-child { padding-left: 0; }
  .component-stats .hero-stat strong { font-size: 22px; }
  .component-stats .hero-stat span { font-size: 8px; }
  .motor-spec-grid, .configuration-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (max-width: 1060px) { .system-line { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 680px) {
  .system-line { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .resource-band { grid-template-columns: 1fr; }
  .resource-band a { min-height: 88px; }
  .product-hero::before { background: linear-gradient(180deg,#10283df2 0%,#10283de0 35%,#10283d9c 67%,#10283d38 100%); }
  .product-hero::after { background: linear-gradient(0deg,#10283df2 0%,#10283db8 19%,transparent 47%); }
  .hero-stat { border-color: #ffffff78; }
  .hero-stat span, .hero-stat strong { color: white; }
  .portal-link { width: fit-content; }
}