/* Approved direction A, with the family explorer from C. Styles stay inside .home-page. */
.home-page {
    --home-ink: #edf5fc;
    --home-muted: #b6c8d9;
    --home-paper: #071c2e;
    --home-line: #ffffff20;
    --home-blue: #29b7ec;
    background: var(--home-paper);
    color: var(--home-ink);
    padding-top: var(--site-header-height);
    font-family: 'Barlow', sans-serif;
}
.home-page * { box-sizing: border-box; }
.home-page [hidden] { display: none !important; }
.home-page :is(h1,h2,h3,p,figure) { margin: 0; }
.home-page :is(h1,h2,h3) { font-family: 'Montserrat',sans-serif; font-weight: 650; letter-spacing: -.045em; line-height: 1.16; }
.home-page h2 { font-size: clamp(32px,3.2vw,47px); }
.home-page p { line-height: 1.7; }
.home-page a { color: inherit; text-decoration: none; }
.home-page section[id] { scroll-margin-top: 98px; }
.home-page :is(a,button,summary):focus-visible { outline: 3px solid #62c9f4 !important; outline-offset: 5px !important; }
.home-shell { width: min(1240px,calc(100% - 96px)); margin-inline: auto; }
.home-page .home-gradient {
    color: #34afe7;
    background: linear-gradient(115deg,#60caf0 0%,#14a7e2 45%,#1876d9 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-page .home-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .15em; line-height: 1.6; color: #e0c490; margin-bottom: 25px; }
.home-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.home-page .home-button {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
    min-height: 50px; padding: 14px 25px; border: 1px solid transparent; border-radius: 999px;
    font-size: 14px; font-weight: 600; line-height: 1.5; transition: transform .2s,background .2s,box-shadow .2s;
}
.home-page .home-button:hover { transform: translateY(-2px); box-shadow: 0 6px 24px #0002; }
.home-page .home-button--white { background: #f8fbff; color: #112943; }
.home-page .home-button--white:hover { background: #def2ff; }
.home-page .home-button--outline { border-color: #d5e5f0b0; background: #061c3120; color: #f2f7fb; }
.home-page .home-button--outline:hover { background: #ffffff12; }
.home-page .home-button--blue { color: white; background: linear-gradient(115deg,#086cca,#05396b); }
.home-page .home-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; padding-block: 8px; font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: #7aabca80; text-underline-offset: 9px; }
.home-link span { transition: transform .2s; }
.home-link:hover span { transform: translate(3px,-3px); }
.home-section { padding-block: 90px; }
/* Film owns the first screen; copy occupies only its left side. */
.home-hero { position: relative; isolation: isolate; overflow: hidden; background: #092b45; }
.home-hero__poster,.home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -3; }
.home-hero__video { opacity: 0; transition: opacity .7s; }
.home-hero__video.has-frame { opacity: 1; }
.home-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#05172680,transparent 82%),linear-gradient(0deg,#03182cbb,transparent 62%); }
.home-hero__inner { min-height: 720px; min-height: clamp(640px,calc(100svh - 80px),830px); position: relative; display: flex; align-items: center; padding-block: 115px 125px; }
.home-hero__copy { width: min(620px,58%); }
.home-hero h1 { font-size: clamp(48px,5.4vw,78px); font-weight: 750; line-height: 1.04; letter-spacing: -.055em; color: #fff; }
.home-hero .home-hero__description { font-size: 18px; max-width: 510px; margin-top: 24px; color: #f0f4f7; text-shadow: 0 1px 10px #0008; }
.home-hero .home-gradient { background-image: linear-gradient(105deg,#5dcaf0,#229ee6 70%,#1883d9); }
.home-hero__controls { position: absolute; left: 0; bottom: 35px; display: flex; align-items: center; gap: 13px; }
.home-motion-control,.home-hero__quiet { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #c2d9e366; border-radius: 50%; color: white; background: #051d3055; }
.home-motion-control { cursor: pointer; transition: background .2s; }
.home-motion-control:hover { background: #ffffff20; }
.home-motion-control svg,.home-hero__quiet svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.home-play-icon { fill: currentColor !important; stroke: none !important; }
.home-motion-control .home-pause-icon { display: none; }
.home-motion-control[aria-pressed="true"] .home-play-icon { display: none; }
.home-motion-control[aria-pressed="true"] .home-pause-icon { display: block; }
.home-media-status { max-width: 240px; font-size: 12px; color: #e2edf5; }
.home-propeller { position: absolute; right: 0; bottom: 22px; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; }
.home-propeller img { width: 76px; height: 76px; animation: home-propeller-turn 14s linear infinite; animation-play-state: paused; filter: drop-shadow(0 3px 7px #0005); }
.home-hero.is-moving .home-propeller img { animation-play-state: running; }
@keyframes home-propeller-turn { to { transform: rotate(360deg); } }
/* A quiet evidence strip; not a wall of recreated certification seals. */
.home-class { background: #05192b; border-bottom: 1px solid #ffffff12; }
.home-class__inner { display: flex; align-items: center; gap: 35px; min-height: 115px; padding-block: 23px; }
.home-class h2 { font: 500 22px 'Barlow Condensed',sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.home-class small { color: #90a7bb; font-size: 11px; display: block; margin-top: 5px; }
.home-class ul { display: flex; justify-content: space-around; gap: 25px; flex: 1; padding: 0; margin: 0; list-style: none; font: 400 23px 'Barlow Condensed',sans-serif; color: #d9e7f1; }
.home-class li { white-space: nowrap; }
.home-class .home-link { font-size: 12px; gap: 12px; white-space: nowrap; }
/* Live catalogue families: center-stage image, quiet vertical selector, no model facts embedded in artwork. */
.home-families { background: radial-gradient(ellipse at 55% 40%,#0b334c 0%,#071d30 45%,#061928 90%); }
.home-families__grid { display: grid; grid-template-columns: .95fr 1.35fr .65fr; align-items: center; gap: 30px; }
.home-families__intro>p:not(.home-eyebrow) { font-size: 17px; color: var(--home-muted); margin-top: 24px; margin-bottom: 26px; }
.home-families__intro>.home-link { display: flex; width: fit-content; margin-top: 14px; }
.home-family-stage { min-width: 0; }
.home-family-panel>img { width: 100%; aspect-ratio: 1; object-fit: contain; mask-image: radial-gradient(ellipse at center,#000 46%,#000b 58%,transparent 73%); }
.home-family-caption { margin-top: -14px; text-align: center; padding-inline: 20px; }
.home-family-caption h3 { font-size: 23px; letter-spacing: -.02em; }
.home-family-caption p { color: var(--home-muted); font-size: 14px; margin-top: 8px; }
.home-family-caption .home-link { font-size: 13px; }
.home-family-picker { display: flex; flex-direction: column; gap: 9px; }
.home-family-button { width: 100%; display: flex; align-items: center; gap: 13px; padding: 8px; border-radius: 17px; border: 1px solid transparent; background: transparent; color: #dce9f3; cursor: pointer; text-align: left; font: 500 14px 'Barlow',sans-serif; transition: background .2s,border-color .2s; }
.home-family-button img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.home-family-button:hover { background: #ffffff08; }
.home-family-button[aria-pressed="true"] { background: #157cba18; border-color: #27b6ed99; color: #fff; }
.home-family-fallback { display: block; padding: 14px; border-radius: 15px; background: #ffffff09; }
.home-equipment { display: grid; grid-template-columns: .95fr 1fr 1fr .7fr; gap: 22px; align-items: center; margin-top: 55px; }
.home-equipment>p { font-size: 21px; font-weight: 500; }
.home-equipment>p>span { font-size: 14px; color: var(--home-muted); font-weight: 400; }
.home-equipment>a:not(.home-equipment__anodes) { border-radius: 20px; overflow: hidden; position: relative; height: 145px; }
.home-equipment img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.home-equipment>a:hover img { transform: scale(1.04); }
.home-equipment>a>span { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 500; }
.home-equipment>a:not(.home-equipment__anodes)>span { position: absolute; inset: auto 0 0; padding: 30px 17px 15px; background: linear-gradient(transparent,#041422ed); }
.home-equipment__anodes { text-decoration: underline !important; text-decoration-color: #6a98b6 !important; text-underline-offset: 8px; padding: 14px; }
/* The light, approachable selection section from A. */
.home-selection { background: linear-gradient(125deg,#edf6ff,#e1effb); color: #102f4e; padding-block: 75px; }
.home-selection__head { display: grid; grid-template-columns: 1.5fr 1fr; gap: 70px; align-items: center; margin-bottom: 38px; }
.home-selection .home-eyebrow { color: #315173; margin-bottom: 20px; }
.home-selection h2 { font-size: clamp(31px,3vw,44px); }
.home-selection .home-gradient { background-image: linear-gradient(100deg,#197eb9,#056bab); }
.home-selection__calculator p { font-size: 16px; color: #526c83; margin-bottom: 18px; max-width: 340px; }
.home-vessels { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.home-vessel { position: relative; padding: 25px 28px 57px; border-radius: 25px; background: #ffffffd9; box-shadow: 0 4px 24px #284a7010; transition: transform .25s,box-shadow .25s; }
.home-vessel:hover { transform: translateY(-5px); box-shadow: 0 12px 30px #284a7020; }
.home-vessel__drawing { display: block; width: 165px; height: 104px; color: #214b71; margin-bottom: 20px; }
.home-vessel__drawing svg { width: 100%; height: 100%; }
.home-vessel h3 { font: 600 24px 'Barlow',sans-serif; letter-spacing: -.025em; }
.home-vessel p { font-size: 15px; line-height: 1.65; color: #52677e; margin-top: 10px; }
.home-vessel__arrow { position: absolute; bottom: 20px; right: 22px; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #e5f1ff; }
.home-selection .home-selection__note { color: #546e83; font-size: 12px; margin-top: 24px; }
/* Authentic catalogue photography, not generated company/factory evidence. */
.home-craft { background: #071d30; }
.home-craft__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
.home-craft figure { position: relative; border-radius: 26px; overflow: hidden; }
.home-craft figure img { width: 100%; height: 390px; object-fit: cover; }
.home-craft figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 24px 22px; background: linear-gradient(transparent,#03182cdd); font-size: 10px; letter-spacing: .1em; }
.home-craft__grid>div>p:not(.home-eyebrow) { margin-top: 25px; color: var(--home-muted); font-size: 17px; }
.home-craft .home-link { font-size: 13px; }
.home-service { background: #0b273e; padding-block: 48px; }
.home-service__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.home-service .home-eyebrow { margin-bottom: 12px; }
.home-service h2 { font-size: 32px; margin-bottom: 10px; }
.home-service p:not(.home-eyebrow) { font-size: 16px; color: var(--home-muted); }
.home-faq { background: #f5f9fd; color: #163450; }
.home-faq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; }
.home-faq .home-eyebrow { color: #426683; }
.home-faq h2 { margin-bottom: 20px; }
.home-faq h2 span { color: #197db2; }
.home-faq details { border-bottom: 1px solid #c8dae7; }
.home-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 25px; list-style: none; cursor: pointer; padding: 23px 0; font-size: 18px; font-weight: 500; }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after { content: '+'; color: #277bab; font-size: 26px; }
.home-faq details[open] summary::after { content: '−'; }
.home-faq details p { font-size: 16px; color: #4d667a; padding: 0 25px 24px 0; }
/* Existing contact and advisor handlers stay intact. */
.home-page .home-contact { background: #071d30; color: #edf5fc; padding-block: 80px; }
.home-contact>.container { width: min(1240px,calc(100% - 96px)); max-width: none; padding: 0; }
.home-page .home-contact h2 { color: #65bde8 !important; font-size: 33px; }
.home-page .home-contact h2 span { color: inherit !important; }
.home-page .home-contact .home-contact-panel { opacity: 1 !important; transform: none !important; }
.home-page .home-contact :is(input,textarea) { border-radius: 12px !important; background: #122d43 !important; color: #fff !important; border: 1px solid #54718a !important; padding: 14px; }
.home-page .home-contact :is(input,textarea)::placeholder { color: #aac0d1 !important; }
.home-page .home-contact .field-label { display: block; margin-bottom: 7px; color: #dce5e9 !important; font-size: 13px; }
.home-page .home-contact .btn-primary { border-radius: 999px !important; background: #eaf6ff !important; color: #112d46 !important; box-shadow: none !important; }
.home-page .home-contact .contact-propeller-inline { border-radius: 14px; background: #ffffff06 !important; }
.home-page .home-contact .contact-propeller-inline p { color: #cbd7de !important; }
.home-page .home-contact .contact-propeller-inline strong { color: #eaf0f3 !important; }
.home-page .home-contact .contact-propeller-inline a { color: #81d4f9 !important; }
.home-page .home-contact .home-contact-panel.flex { background: #0b2940 !important; border-radius: 24px; border-color: #344f62; box-shadow: none; }
.home-page .home-contact .home-contact-panel.flex p { color: #cbd7de !important; }
.home-page .home-contact .home-contact-panel.flex a { border-radius: 999px; background: transparent; border: 1px solid #8bb5d3; color: #b0e6ff; }
.home-page .home-contact .advisor-note { color: #b6c8d9; font-size: 14px; margin-bottom: 24px; }
@media (max-width: 1100px) {
    .home-shell,.home-contact>.container { width: calc(100% - 64px); }
    .home-class__inner { flex-wrap: wrap; gap: 20px; }
    .home-class ul { gap: 22px; }
    .home-class .home-link { margin-left: auto; }
    .home-families__grid { grid-template-columns: 1fr 1.2fr; gap: 22px; }
    .home-family-picker { grid-column: 1/-1; display: grid; grid-template-columns: repeat(4,1fr); }
    .home-family-button img { width: 42px; height: 42px; }
    .home-equipment { grid-template-columns: .8fr 1fr 1fr; }
    .home-equipment__anodes { grid-column: 2/-1; justify-self: end; }
    .home-craft__grid { gap: 35px; }
    .home-vessel { padding-inline: 22px; }
}
@media (max-width: 767px) {
    .home-shell,.home-contact>.container { width: calc(100% - 40px); }
    .home-section { padding-block: 60px; }
    .home-hero__inner { min-height: 660px; min-height: min(790px,calc(100svh - 80px)); padding-block: 100px 110px; }
    .home-hero__copy { width: 100%; max-width: 550px; }
    .home-hero h1 { font-size: clamp(43px,8.8vw,66px); }
    .home-hero .home-eyebrow { font-size: 10px; }
    .home-hero .home-hero__description { max-width: 360px; font-size: 16px; margin-top: 20px; }
    .home-hero__poster,.home-hero__video { object-position: 58% center; }
    .home-hero::after { background: linear-gradient(90deg,#05172690,#05172620),linear-gradient(0deg,#03182cb0,transparent 75%); }
    .home-hero .home-actions { gap: 11px; }
    .home-hero .home-button { font-size: 13px; min-height: 46px; padding: 12px 19px; gap: 15px; }
    .home-hero__controls { bottom: 23px; gap: 9px; }
    .home-media-status { max-width: 145px; font-size: 10px; }
    .home-propeller { width: 70px; height: 70px; bottom: 15px; }
    .home-propeller img { width: 61px; height: 61px; }
    .home-class__inner { padding-block: 25px; gap: 19px; }
    .home-class h2 { font-size: 21px; }
    .home-class ul { order: 3; width: 100%; flex: auto; flex-wrap: wrap; justify-content: flex-start; gap: 12px 24px; font-size: 21px; }
    .home-class .home-link { font-size: 11px; }
    .home-class small { font-size: 10px; }
    .home-families__grid { grid-template-columns: 1fr; gap: 25px; }
    .home-families__intro>p:not(.home-eyebrow) { font-size: 16px; margin-block: 18px 22px; }
    .home-families__intro>.home-link { margin-top: 10px; font-size: 12px; }
    .home-family-stage { max-width: 480px; margin-inline: auto; }
    .home-family-caption { padding-inline: 10px; }
    .home-family-picker { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .home-family-button { font-size: 13px; padding: 7px; gap: 9px; border-radius: 14px; }
    .home-equipment { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 35px; }
    .home-equipment>p { grid-column: 1/-1; font-size: 22px; }
    .home-equipment>a:not(.home-equipment__anodes) { height: 140px; border-radius: 16px; }
    .home-equipment>a>span { font-size: 12px; }
    .home-equipment__anodes { grid-column: 1/-1; }
    .home-selection { padding-block: 55px; }
    .home-selection__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 26px; }
    .home-vessels { grid-template-columns: 1fr; gap: 15px; }
    .home-vessel { display: grid; grid-template-columns: 90px 1fr; column-gap: 19px; padding: 22px 24px 40px; border-radius: 21px; }
    .home-vessel__drawing { width: 90px; height: 85px; grid-row: 1/3; margin: 0; }
    .home-vessel h3 { font-size: 22px; }
    .home-vessel p { font-size: 14px; }
    .home-vessel__arrow { bottom: 12px; right: 17px; width: 30px; height: 30px; }
    .home-craft__grid { grid-template-columns: 1fr; gap: 30px; }
    .home-craft figure { border-radius: 21px; }
    .home-craft figure img { height: 290px; }
    .home-craft__grid>div>p:not(.home-eyebrow) { font-size: 16px; }
    .home-service__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
    .home-faq__grid { grid-template-columns: 1fr; gap: 25px; }
    .home-faq summary { font-size: 17px; }
    .home-page .home-contact { padding-block: 60px; }
    .home-page .home-contact h2 { font-size: 29px; }
}
@media (max-height: 650px) and (max-width: 767px) {
    .home-hero__inner { min-height: 615px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page *, .home-page *::before,.home-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
