/* Green23-led visual density with cinematic editorial cues from Crossing DC.
   Retains the client's navy/orange identity, source content and interaction hooks. */
:root{--premium-ink:#171c27;--premium-panel:#222a39;--premium-paper:#eeeee9}
html{scroll-padding-top:100px}
.container{width:calc(100% - 88px);max-width:1520px}
.section{padding:44px 0}
.section-heading{margin-bottom:24px;gap:26px}
.section-heading .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:9px}
h2{font-size:58px;letter-spacing:-.4px}
.eyebrow{font-size:10px}
.text-link{font-size:10px;letter-spacing:.55px}
.button{font-size:11px;min-height:49px;letter-spacing:.65px}
.utility{height:27px;font-size:8px;letter-spacing:1.2px;background:#11151e}
.utility-inner a{font-size:10px}
.header{height:78px;background:var(--premium-ink);box-shadow:0 2px 15px #0002;color:#fff}
.header::after{display:none}
.header-inner{gap:18px}
.header .brand{width:240px;height:78px}
.header .brand::before{left:-22px;width:296px;height:99px;background:#f3f4f7;clip-path:polygon(0 0,100% 0,82% 100%,0 77%)}
.header .brand:hover::before{background:#fff}
.header .brand::after{left:-22px;width:296px;height:3px;background:var(--orange)}
.header .brand>img{top:23px;left:10px;width:181px;height:auto;filter:none}
.brand-tagline{top:64px;left:58px;font-size:6px;letter-spacing:2px;color:#373461}
.header nav{height:78px;gap:21px;font-size:10px;letter-spacing:.45px;justify-content:center}
.header nav>a,.nav-products>a{height:78px}
.header nav>a::after,.nav-products>a::after{bottom:15px}
.header nav>a:hover,.nav-products>a:hover{color:#ffb35f}
.header-actions{gap:15px;margin-left:8px}
.action-divider{background:#ffffff35}
.header .icon-button:hover{color:#ffb35f}
.header .inquiry-bag>span{background:var(--orange);color:#151b27}
.mega-menu{top:77px;color:var(--ink)}
.hero-reference{height:620px;background:#16202b}
.hero-reference .hero-landscape{background-position:center;filter:saturate(.8)}
.hero-reference .hero-shade{background:linear-gradient(90deg,#111b29e0 0%,#111b29b8 24%,#111b2965 43%,transparent 73%),linear-gradient(0deg,#111824d9 0%,transparent 38%)}
.hero-reference .hero-inner{justify-content:flex-start;padding-bottom:68px}
.hero-reference .hero-copy{width:700px;max-width:57%;margin:0;text-align:left;padding:0}
.hero-reference .hero-copy>.eyebrow{justify-content:flex-start;gap:11px;font-size:9px;letter-spacing:1.9px;margin-bottom:21px}
.hero-reference .hero-copy>.eyebrow>.orange-line:last-child{display:none}
.hero-reference h1{font-size:94px;line-height:.94;letter-spacing:.3px}
.hero-reference h1>span{color:#ffa13d}
.hero-reference .hero-copy>p{font-size:13px;line-height:1.85;max-width:425px;margin:23px 0 0;color:#e4e6e9;text-shadow:none}
.hero-reference .hero-ctas{justify-content:flex-start;gap:25px;margin-top:27px}
.hero-reference .hero-ctas .button{font-size:10px;min-height:49px;padding:0 23px;gap:28px}
.hero-partner-link{font-size:9px;gap:15px;padding:13px 0;border-color:#ffffff80}
.hero-partner-link>.icon{width:17px;height:17px}
.hero-reference .hero-bottom{height:98px}
.hero-reference .slide-control{gap:14px;font-size:11px}
.hero-reference .slide-control button{width:33px;height:33px;font-size:16px}
.hero-reference .slide-track{width:95px}
.hero-reference .scroll-cue{font-size:8px;letter-spacing:1.1px}
.hero-reference .hero-product{width:296px;height:81px;bottom:17px;gap:14px;background:#121b29d9;border-color:#ffffff40;padding-left:13px}
.hero-reference .hero-product>img{width:82px!important;height:66px!important}
.hero-reference .hero-model>.hero-model-eyebrow{font-size:6px;letter-spacing:1px}
.hero-reference .hero-model>#hero-model-name{font-size:29px}
.hero-reference .hero-model>#hero-model-label{font-size:6px;letter-spacing:.3px;max-width:150px}
.hero-reference .vehicle-hotspot{right:10px;bottom:28px;width:25px;height:25px}
.benefits{background:#202837;color:white;border:0}
.benefit-grid{height:79px}
.benefit-grid>div{border-color:#ffffff25;gap:14px}
.benefit-grid>div>svg{color:#ffad52;width:29px;height:29px}
.benefit-grid b{font-size:11px}
.benefit-grid p>span{font-size:10px;color:#bec5d1}
/* A solid family-navigation field replaces the long, sparse white interlude. */
.categories-section{padding:27px 0 25px;background:var(--premium-ink);color:white;border-top:1px solid #ffffff12}
.categories-section .section-heading{margin-bottom:17px;align-items:center}
.categories-section .eyebrow{color:#c0c4ce;font-size:8px;letter-spacing:1.5px;margin-bottom:7px}
.categories-section h2{font-size:35px;letter-spacing:.15px}
.categories-section .section-intro{font-size:10px;line-height:1.7;max-width:390px;color:#b6becb}
.categories-grid{gap:1px;background:#ffffff20;border:1px solid #ffffff20}
.category-card{background:#222b3a;border:0;padding:15px 12px;min-height:91px;text-align:left;display:grid;grid-template-columns:43px 1fr;grid-template-rows:1fr 1fr;column-gap:10px;align-items:center;transition:background .2s}
.category-card svg{grid-column:1;grid-row:1/3;width:42px;height:35px;margin:0;color:#e3e7ed;stroke-width:1.5}
.category-card>span{grid-column:2;grid-row:1;font-size:9px;letter-spacing:0;line-height:1.4;align-self:end;white-space:normal}
.category-card>small{grid-column:2;grid-row:2;font-size:8px;margin-top:3px;color:#bec5d1;line-height:1.4;align-self:start}
.category-card:hover,.category-card.selected{transform:none;background:#f5820b;color:#151b27}
.category-card:hover>small,.category-card.selected>small,.category-card:hover svg,.category-card.selected svg{color:#151b27}
/* Larger product artwork and readable information, with tighter outer spacing. */
.lineup-section{padding:40px 0 30px;background:#edeee9}
.lineup-section h2{font-size:61px}
.lineup-section .section-heading{margin-bottom:18px}
.lineup-section .eyebrow{color:#5e6470}
.lineup-section .text-link{font-size:10px}
.filter-row{margin-bottom:18px;border-color:#cdd0c8}
.product-tabs{gap:6px}
.product-tabs button{font-size:10px;padding:10px 13px 13px;line-height:1.4;color:#59616b}
.product-tabs button.active{background:var(--premium-ink);color:#fff}
.product-tabs button.active::after{height:3px}
.lineup-count{font-size:9px;padding-bottom:10px}
.product-grid{gap:13px}
.product-card{border:1px solid #d6d8d1;background:#fff}
.product-image{height:244px;background:linear-gradient(140deg,#e5e7e2,#f5f5ef);padding:29px 20px 12px}
.product-tag{left:13px;top:12px;font-size:7px;letter-spacing:.6px;padding:6px 7px;background:#ffffffc9}
.product-index{right:13px;top:15px;font-size:8px;color:#555e67}
.product-info{padding:15px 17px 12px}
.product-category{font-size:8px;color:#58616c;letter-spacing:1px}
.product-title-row{margin-top:5px}
.product-title-row h3{font-size:37px}
.circle-button{width:32px;height:32px;border-color:#c3c7c5}
.product-desc{font-size:11px;line-height:1.6;margin-top:5px;min-height:35px}
.product-card-specs{font-size:9px;gap:10px;padding:10px 0;margin-top:10px;border-color:#dedfd9}
.product-inquire{padding-top:10px;font-size:8px;letter-spacing:.6px}
.product-note{font-size:9px;margin-top:16px}
/* Green23's overlapping colored information panel, expressed in 3PLUS orange. */
.electric-feature{background:#151b27}
.electric-inner{display:grid;grid-template-columns:1.02fr 1fr;gap:0;min-height:540px;align-items:center}
.electric-art{height:540px;position:relative}
.electric-art::before{content:'';position:absolute;inset:0 25px 0 -44px;background:linear-gradient(90deg,#151b2755,#151b27c9),url('cruiser-campaign.webp') 84% 50%/auto 100%;opacity:.21}
.electric-outline{font-size:116px;letter-spacing:2px;top:20px;left:0;-webkit-text-stroke-color:#ffffff1d}
.electric-ring{width:320px;height:320px;top:142px;left:72px;border-color:#f5820b69}
.electric-art>img{height:465px;width:385px;left:70px;bottom:28px;transform:rotate(-5deg);filter:drop-shadow(0 20px 12px #0006)}
.electric-stamp{left:8px;bottom:29px}
.electric-stamp>span{font-size:27px}
.electric-stamp small{font-size:8px;letter-spacing:1px}
.electric-copy{background:var(--orange);color:#171c27;padding:29px 31px 25px;transform:translateX(-24px);margin-right:-24px;box-shadow:-15px 16px 35px #0003}
.electric-copy .eyebrow{font-size:9px;letter-spacing:1.1px;color:#242837}
.electric-copy .orange-line{background:#242837}
.electric-copy h2{font-size:59px;line-height:.95;margin-top:13px;letter-spacing:.2px}
.electric-copy h2>em{color:#fff}
.electric-copy>p{font-size:12px;line-height:1.7;color:#2e2e30;max-width:490px;margin-top:13px}
.electric-spec-heading{display:flex;justify-content:space-between;gap:20px;font-size:7px;letter-spacing:1.1px;margin-top:19px;padding:9px 0;border-top:1px solid #24283750;font-weight:800}
.electric-spec-heading>b{font-weight:800;letter-spacing:1px}
.electric-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 17px;border:1px solid #ffffff6e;background:#fff1dd}
.electric-stats>div{padding:11px 12px;border:0;min-height:73px;gap:5px}
.electric-stats>div:nth-child(-n+3){border-bottom:1px solid #e3c4a2}
.electric-stats>div:not(:nth-child(3n)){border-right:1px solid #e3c4a2}
.electric-stats b{font-size:30px;line-height:1;color:#1b2331;white-space:nowrap}
.electric-stats b>span{font-size:13px;color:#51545b}
.electric-stats>div:nth-child(4) b{font-size:24px;padding-top:4px}
.electric-stats small{font-size:7px;letter-spacing:.55px;line-height:1.5;color:#4e4e50}
.electric-copy .button{background:#1c2331;color:#fff;min-height:44px;font-size:9px;gap:28px}
.electric-copy .button:hover{background:#303a4f}
.electric-copy .range-note{color:#3b342b;font-size:8px;line-height:1.6;margin-top:10px;max-width:480px}
/* Full-content factory story: photography touches a substantial dark story panel. */
.about-section{padding:0;background:#222a38}
.about-grid{width:100%;max-width:none;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.about-visual{height:auto;min-height:390px}
.about-visual>img{height:100%;min-height:390px;object-position:center;filter:saturate(.6)}
.about-visual-caption{left:40px;right:35px;bottom:21px;font-size:8px;letter-spacing:1.1px}
.factory-label{left:0;bottom:55px;padding:14px 23px;gap:13px}
.factory-label>span{font-size:25px}
.about-copy{padding:35px 44px 29px;color:#fff;align-self:center;max-width:780px}
.about-copy .eyebrow{font-size:9px;color:#d2d7e0}
.about-copy h2{font-size:57px;line-height:.98;margin-top:12px}
.about-copy>p{font-size:12px;line-height:1.8;color:#ccd1d8;max-width:560px;margin-top:16px}
.about-copy>p+p{margin-top:9px}
.factory-stats{gap:34px;margin:23px 0 13px}
.factory-stats b{font-size:40px}
.factory-stats>div{border-color:#ffffff30;padding-right:28px}
.factory-stats>div>span{font-size:7px;color:#c3c9d4}
.about-copy .text-link{font-size:9px;color:#fff}
.about-copy .text-link>.icon{color:#ffb05a}
.certification-strip{width:100%;max-width:none;margin-top:0;padding:19px 44px;background:#f3f3ed;border-top:0;gap:28px}
.certification-strip>span{font-size:8px;color:#555e69;line-height:1.6}
.certification-strip>strong{color:#555d68;font-size:23px}
.certification-strip .text-link{font-size:8px}
.partner-inner{padding:28px 0;gap:35px}
.partner-section .eyebrow{margin-bottom:8px;font-size:8px}
.partner-section h2{font-size:38px;line-height:1.05}
.partner-section p{font-size:11px;line-height:1.7;margin-bottom:12px}
.partner-section .button{font-size:9px;min-height:43px;gap:25px}
.partner-plus{font-size:270px;right:-12px;top:-45px}
/* Editorial imagery becomes the content surface instead of sitting above empty rows. */
.journal-section{padding:36px 0;background:#e9eae5}
.journal-section h2{font-size:53px}
.journal-grid{gap:14px}
.journal-description{font-size:11px;color:#5a626c}
.journal-card{position:relative;min-height:322px;background:#1b2230;isolation:isolate;overflow:hidden}
.journal-image{height:322px;margin:0;background:#596575}
.journal-image::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#111925f5 0%,#111925c4 27%,transparent 77%);pointer-events:none}
.journal-image-label{display:none}
.journal-adventure{background:linear-gradient(140deg,#7c897b,#a9b2a0)}
.journal-adventure>img{padding:7px 40px 76px;height:100%;filter:drop-shadow(0 10px 9px #0003)}
.journal-image .factory-journal{height:100%;filter:saturate(.45) brightness(.85)}
.journal-parts{background:#252c3a}
.parts-type{font-size:57px;line-height:.95;left:24px;top:23px}
.parts-type em{font-size:49px}
.parts-art{width:260px;height:160px;right:-45px;top:42px;color:#ffffff12}
.journal-card>.eyebrow{position:absolute;bottom:104px;left:23px;font-size:8px;letter-spacing:1px;color:#ffb560;z-index:1}
.journal-card>h3{position:absolute;left:23px;right:22px;bottom:48px;font-size:27px;line-height:1.08;max-width:360px;color:#fff;margin:0;z-index:1}
.journal-link{position:absolute;bottom:15px;left:23px;right:23px;border-color:#ffffff30;color:#fff;font-size:8px;padding-top:11px;z-index:1}
.journal-link>.icon{color:#ffb560}
/* Dense information center: connected content panels rather than a large empty field. */
.support-section{padding:36px 0 32px;background:#1d2533}
.support-grid{grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.downloads-panel{background:#edeee8;padding:27px 29px 22px;border:0}
.faq-panel{background:#f8f8f3;padding:27px 29px 23px}
.support-grid .eyebrow{font-size:8px;letter-spacing:1.35px}
.support-grid h2{font-size:40px;line-height:1.01;margin-top:12px}
.downloads-panel>p{font-size:11px;line-height:1.75;margin-top:13px;max-width:460px}
.catalog-preview{width:315px;height:174px;margin:21px 0 0;box-shadow:8px 8px 0 #d4d7cb;transform:perspective(1000px) rotateY(-7deg) rotateZ(-2deg)}
.catalog-preview>b{font-size:32px;top:53px}
.catalog-preview>img{height:162px;width:150px;right:0}
.catalog-preview>small{bottom:12px}
.download-link{margin-top:21px;padding-top:15px;max-width:none;gap:13px}
.download-link b{font-size:10px}
.download-link small{font-size:9px;color:#5b636b}
.information-consultation{max-width:none;margin-top:19px;padding-top:16px}
.information-consultation .eyebrow{font-size:8px;letter-spacing:.7px}
.information-consultation p{font-size:11px;line-height:1.7;margin-top:8px}
.information-consultation .text-link{font-size:9px;margin-top:3px}
.faq-list{margin-top:17px}
.faq-list summary{font-size:12px;line-height:1.6;padding:15px 27px 15px 0}
.faq-list details>p{font-size:11px;line-height:1.75;padding-bottom:14px;color:#58616b}
.faq-list summary::after{top:11px}
.faq-panel>.text-link{font-size:9px;margin-top:19px}
/* A compact ridge still carries through the earlier approved footer reference. */
.contact-reference{padding-top:53px;background:#171e2b}
.footer-ridge{height:72px;background:#1d2533}
.ridge-front{background:#171e2b}
.contact-reference .contact-inner{padding:35px 0 32px;gap:60px}
.contact-reference h2{font-size:43px}
.contact-reference h3{font-size:29px}
.contact-reference p{font-size:12px;line-height:1.7;margin-top:14px}
.contact-reference .eyebrow{font-size:8px}
.footer-follow,.contact-reference .footer-contact{padding-top:13px}
.footer-follow>p{margin-top:0}
#footer-connect-form{margin-top:18px;max-width:350px}
#footer-connect-form>input{font-size:11px;padding:12px 13px}
.footer-form-note{font-size:9px;line-height:1.5}
.footer-discovery-links{margin-top:18px;gap:10px}
.footer-discovery-links>a,.footer-discovery-links>button{width:37px;height:37px}
.footer-journal-link{font-size:7px;line-height:1.6;margin-top:19px}
.footer-contact-row{gap:12px;margin-bottom:14px}
.footer-contact-row>span{font-size:16px}
.footer-contact-row:first-of-type>span{font-size:28px}
.contact-reference .footer-contact-row>p{font-size:10px;line-height:1.75}
.footer-location{font-size:6px;margin-left:31px;letter-spacing:.8px}
.footer-reference{background:#171e2b}
.footer-reference .footer-main{padding:22px 0;gap:25px}
.footer-reference .footer-brand>img{width:140px;padding:9px 11px}
.footer-reference .footer-brand>span{font-size:6px;line-height:1.8}
.footer-navigation{gap:25px;font-size:8px;letter-spacing:.5px}
.footer-navigation>button{font-size:8px}
.footer-reference .footer-bottom{padding:17px 0 20px;font-size:7px}
.footer-reference .footer-bottom>button,.footer-reference .footer-bottom>a{font-size:7px}
.contact-float{bottom:20px;right:20px;padding:12px 14px;font-size:9px;background:#161e2d;border-color:#ffffff45}
.contact-float>.icon{width:21px;height:21px}
@media(min-width:1650px){.header .brand{width:260px}.header .brand::before,.header .brand::after{width:316px}.header .brand>img{top:23px;left:16px;width:192px}.brand-tagline{left:65px;top:65px}.header nav{font-size:11px;gap:30px}.hero-reference{height:655px}.hero-reference h1{font-size:110px}.hero-reference .hero-copy>p{font-size:14px;max-width:470px}.hero-reference .hero-copy>.eyebrow{font-size:10px}.categories-section h2{font-size:41px}.category-card>span{font-size:10px}.category-card>small{font-size:9px}.category-card{min-height:98px;column-gap:14px}.product-image{height:275px}.lineup-section h2{font-size:68px}.electric-art>img{left:95px;height:485px;width:400px}.electric-copy{padding:30px 36px}.electric-copy h2{font-size:68px}.electric-stats b{font-size:34px}.electric-stats>div:nth-child(4) b{font-size:27px}.about-copy{padding:38px 56px}.about-copy h2{font-size:65px}.about-copy>p{font-size:13px}.journal-image,.journal-card{height:345px}.journal-card>h3{font-size:31px;max-width:400px}.journal-card>.eyebrow{bottom:115px}.journal-card>h3{bottom:51px}.support-grid h2{font-size:46px}}
@media(max-width:1300px){.container{width:calc(100% - 72px)}.header .brand{width:205px}.header .brand::before,.header .brand::after{left:-18px;width:251px}.header .brand>img{left:7px;top:25px;width:158px}.brand-tagline{left:41px;top:62px}.header nav{gap:13px;font-size:9px}.header-actions{gap:10px;margin-left:0}.hero-reference h1{font-size:80px}.hero-reference .hero-copy{max-width:58%}.hero-reference .hero-copy>p{font-size:12px;max-width:390px}.categories-section h2{font-size:30px}.categories-section .section-intro{font-size:9px;max-width:310px}.category-card{grid-template-columns:33px 1fr;padding:14px 9px;gap:7px;min-height:94px}.category-card svg{width:33px;height:30px}.category-card>span{font-size:8px}.category-card>small{font-size:7px}.product-tabs{gap:2px}.product-tabs button{padding-left:9px;padding-right:9px;font-size:9px}.product-image{height:220px;padding-left:14px;padding-right:14px}.product-info{padding:14px 14px 12px}.product-desc{font-size:10px}.product-card-specs{font-size:8px}.electric-art>img{left:36px;width:340px;height:430px}.electric-ring{left:42px;width:285px;height:285px;top:157px}.electric-copy{padding:25px 25px 23px}.electric-copy h2{font-size:52px}.electric-copy>p{font-size:11px}.electric-stats>div{padding:10px 9px}.electric-stats b{font-size:27px}.electric-stats>div:nth-child(4) b{font-size:20px}.electric-stats small{font-size:6px}.about-copy{padding:31px 35px}.about-copy h2{font-size:51px}.about-copy>p{font-size:11px}.factory-stats{gap:23px}.factory-stats>div{padding-right:22px}.partner-section h2{font-size:34px}.journal-card>h3{font-size:24px}.support-grid h2{font-size:36px}.downloads-panel,.faq-panel{padding:25px}.contact-reference .contact-inner{gap:38px}.contact-reference h2{font-size:37px}.contact-reference h3{font-size:26px}.footer-navigation{gap:19px;font-size:7px}.footer-navigation>button{font-size:7px}}
/* Keep the dense navigation and highlighted headline comfortably readable. */
.electric-copy h2>em{color:#242080}
.category-card>span{font-size:10px}
.category-card>small{font-size:9px}
@media(max-width:1300px){.category-card>span{font-size:9px}.category-card>small{font-size:8px}}

/* Align the cruiser and factory stories to the same full-width 50/50 split. */
.electric-inner,
.about-grid{width:100%;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:stretch}
.electric-art{height:auto;min-height:540px}
.electric-art::before{inset:0}
.electric-art>img{left:50%;transform:translateX(-50%) rotate(-5deg)}
.electric-ring{left:50%;transform:translateX(-50%)}
.electric-stamp{left:clamp(32px,3.05vw,56px)}
.electric-copy,
.about-copy{min-width:0;max-width:none;padding:35px clamp(32px,3.05vw,56px);transform:none;margin:0;align-self:stretch}

/* Keep the supplied circular logo proportional in the existing masthead/footer. */
.header .brand>img{width:64px;height:64px;top:7px;left:70px;object-fit:contain;filter:none}
.header .brand-tagline{top:78px;left:66px;font-size:5px;letter-spacing:1.5px}
.footer-reference .footer-brand{flex-direction:row;align-items:center;gap:18px}
.footer-reference .footer-brand>img{width:64px;height:64px;padding:0;background:transparent;object-fit:contain;filter:none;mix-blend-mode:normal;box-sizing:border-box}
.footer-reference .footer-brand>span{max-width:150px;font-size:7px;line-height:1.9}

/* Reference masthead: charcoal triangular flag with a fine gold top edge. */
.header{background:#fff;color:var(--premium-ink)}
.header .brand::before,
.header .brand:hover::before{left:-22px;top:0;width:296px;height:99px;background:#25282d;clip-path:polygon(0 0,100% 0,27% 100%)}
.header .brand::after{left:-22px;top:0;width:296px;height:3px;background:#ffb600}
.header .brand>img{left:35px;top:9px;width:58px;height:58px}
.header .action-divider{background:#20283730}
.header nav>a:hover,.header .nav-products>a:hover,.header .icon-button:hover{color:#b96000}

/* Small reference tagline beneath the circular header mark. */
.header .brand-tagline{top:72px;left:23px;width:82px;text-align:center;color:#e6e3dc;font-size:4px;font-weight:800;line-height:1;letter-spacing:1.6px;white-space:nowrap}