.fleet-showcase.section { background:#f8faf9; padding-block:88px; border-top:1px solid #dce5e3; }
.fleet-showcase * { letter-spacing:0; }
.fleet-showcase .section-top { display:flex; justify-content:space-between; gap:48px; align-items:end; margin-bottom:36px; }
.fleet-showcase .eyebrow { color:#367467; font-size:11px; margin-bottom:16px; }
.fleet-showcase h2 { font-size:48px; line-height:1.08; margin:0; }
.fleet-showcase h2 span { color:#59736e; }
.fleet-showcase .fleet-intro { max-width:360px; }
.fleet-showcase .fleet-intro p { font-size:15px; line-height:1.7; margin:0; }
.fleet-showcase .fleet-intro .text-link { margin-top:14px; gap:22px; border-bottom:1px solid #a1b5af; }
.fleet-viewer { min-width:0; }
.fleet-mosaic { display:grid; grid-template-columns:minmax(0,2.7fr) minmax(230px,1fr); gap:16px; }
.fleet-stage { position:relative; display:grid; place-items:center; aspect-ratio:16/10; min-width:0; min-height:0; background:#e7eeeb; overflow:hidden; border-radius:8px; }
.fleet-stage .fleet-feature { position:absolute; inset:0; display:block; cursor:zoom-in; }
.fleet-stage img, .fleet-stage video { display:block; width:100%; height:100%; object-fit:contain; }
.fleet-stage video { position:absolute; inset:0; background:#182421; }
.fleet-stage [hidden] { display:none; }
.fleet-zoom { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff; color:#172a25; font-size:24px; box-shadow:0 2px 10px #0001; }
.fleet-discovery { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:16px; min-height:0; }
.fleet-discovery button { padding:0; border:0; border-radius:8px; overflow:hidden; text-align:left; }
.fleet-discovery-photo { display:flex; flex-direction:column; min-height:0; background:#e7eeeb; color:#182b25; }
.fleet-discovery-photo img { width:100%; height:0; flex:1; min-height:0; object-fit:cover; transition:filter .2s; }
.fleet-discovery-photo:hover img { filter:brightness(1.08); }
.fleet-discovery-photo>span { display:block; padding:18px 20px; }
.fleet-discovery small, .fleet-footer-label { display:block; font-size:10px; font-weight:700; line-height:1.5; margin-bottom:6px; }
.fleet-discovery strong { display:block; font-size:19px; line-height:1.3; }
.fleet-discovery strong b { float:right; font-weight:400; margin-left:12px; }
.fleet-discovery-video { display:flex; align-items:center; gap:14px; padding:24px 20px!important; background:#244b40; color:white; transition:background .2s; }
.fleet-discovery-video:hover { background:#316451; }
.fleet-discovery-video small { color:#c2d9ce; }
.fleet-discovery-video strong { font-size:17px; }
.fleet-discovery-video>b { margin-left:auto; font-weight:400; }
.fleet-play { display:grid; place-items:center; flex:0 0 44px; height:44px; padding-left:3px; border-radius:50%; background:#ffa51f; color:#182b25; font-size:17px; }
.fleet-viewer-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0 18px; }
.fleet-viewer-bar>div:first-child { display:flex; align-items:center; gap:20px; min-width:0; }
.fleet-count { flex-shrink:0; font-size:12px; font-variant-numeric:tabular-nums; font-weight:700; color:#59736e; border-right:1px solid #bccdc5; padding-right:20px; }
.fleet-viewer-bar h3 { font-size:18px; line-height:1.4; margin:0; }
.fleet-arrows { display:flex; gap:8px; flex-shrink:0; }
.fleet-arrows button, .fleet-photo-dialog button { width:44px; height:44px; border:1px solid #bbcdc5; border-radius:50%; background:transparent; color:#18392e; font-size:24px; cursor:pointer; transition:background .2s, color .2s; }
.fleet-arrows button:hover { background:#244b40; color:white; border-color:#244b40; }
.fleet-thumbnails { position:relative; display:flex; gap:10px; overflow-x:auto; padding:4px 2px 16px; scrollbar-width:thin; scrollbar-color:#8ca89a #e7eeeb; }
.fleet-thumbnails button { position:relative; flex:0 0 112px; height:82px; padding:3px; background:#e7eeeb; border:2px solid transparent; border-radius:5px; cursor:pointer; transition:border-color .2s,background .2s; }
.fleet-thumbnails button:hover { border-color:#96afa2; }
.fleet-thumbnails button[aria-pressed=true] { border-color:#244b40; background:#244b40; }
.fleet-thumbnails img { width:100%; height:100%; object-fit:contain; border-radius:2px; }
.fleet-thumbnails em { position:absolute; left:5px; bottom:5px; font-size:10px; line-height:18px; min-width:23px; background:#f8faf9; color:#18392e; font-style:normal; font-weight:700; }
.fleet-thumbnails button[aria-pressed=true] em { background:#ffa51f; }
.fleet-thumbnails span { position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:24px; background:#0005; }
.fleet-showcase button:focus-visible, .fleet-feature:focus-visible { outline:3px solid #d77800; outline-offset:3px; }
.fleet-showcase-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid #cbd9d1; margin-top:16px; padding-top:28px; }
.fleet-footer-label { color:#59736e; }
.fleet-showcase-footer h3 { font-size:24px; margin-bottom:8px; }
.fleet-showcase-footer p { margin:0; font-size:13px; }
.fleet-showcase-footer .button { flex-shrink:0; border-radius:6px; background:#ffa51f; color:#16291f; padding:17px 24px; }
.fleet-photo-dialog { padding:52px 12px 12px; border:0; border-radius:8px; background:#f5f8f9; max-width:94vw; max-height:94vh; }
.fleet-photo-dialog::backdrop { background:#09151de6; }
.fleet-photo-dialog img { display:block; width:auto; height:auto; max-width:85vw; max-height:78vh; object-fit:contain; }
.fleet-photo-dialog button { position:absolute; top:4px; right:8px; }
@media(max-width:1000px) {
  .fleet-showcase h2 { font-size:38px; }
  .fleet-mosaic { grid-template-columns:minmax(0,2fr) minmax(200px,1fr); }
  .fleet-stage { aspect-ratio:4/3; }
  .fleet-discovery-photo>span { padding:12px 16px; }
  .fleet-discovery-video { padding:18px 14px!important; gap:10px; }
  .fleet-discovery-video strong { font-size:15px; }
}
@media(max-width:700px) {
  .fleet-showcase.section { padding-block:60px; }
  .fleet-showcase .section-top { flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:24px; }
  .fleet-showcase h2 { font-size:34px; }
  .fleet-showcase .fleet-intro { max-width:100%; }
  .fleet-showcase .fleet-intro p { font-size:14px; }
  .fleet-mosaic { display:block; }
  .fleet-stage { aspect-ratio:4/3; }
  .fleet-discovery { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:126px; margin-top:12px; gap:12px; }
  .fleet-discovery-photo { position:relative; }
  .fleet-discovery-photo img { height:100%; flex:none; }
  .fleet-discovery-photo>span { position:absolute; bottom:0; left:0; right:0; background:#e7eeeb; padding:8px 10px; }
  .fleet-discovery small { font-size:9px; }
  .fleet-discovery-photo small { display:none; }
  .fleet-discovery strong { font-size:14px; }
  .fleet-discovery-video { flex-wrap:wrap; align-content:center; padding:12px!important; gap:8px; }
  .fleet-discovery-video>b { display:none; }
  .fleet-play { flex-basis:32px; height:32px; font-size:13px; }
  .fleet-viewer-bar>div:first-child { display:block; }
  .fleet-count { border:0; padding:0; }
  .fleet-viewer-bar h3 { font-size:15px; margin-top:5px; }
  .fleet-thumbnails button { flex-basis:88px; height:70px; }
  .fleet-showcase-footer { flex-direction:column; align-items:flex-start; gap:20px; }
  .fleet-showcase-footer h3 { font-size:22px; }
  .fleet-showcase-footer .button { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .fleet-showcase button, .fleet-showcase img { transition:none; }
}