:root{
  --black:#050607; --ink:#0B1117; --white:#fff; --soft:#F5F7FA;
  --blue:#0057A8; --blue-dark:#061C36; --red:#D71920;
  --line:rgba(11,17,23,.1); --line-dark:rgba(255,255,255,.14);
  --muted:rgba(11,17,23,.62); --muted-light:rgba(255,255,255,.72); --muted-dim:rgba(255,255,255,.5);
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --radius:4px; --max-width:1320px; --pad:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--pad)}
:root {
      /* ── PALETTE (Graham's spec) ── */
      --black: #050607;
      --ink: #0B1117;
      --white: #FFFFFF;
      --soft: #F5F7FA;
      --blue: #0057A8;
      --blue-dark: #061C36;
      --red: #D71920;
      /* derived */
      --line: rgba(11,17,23,0.1);
      --line-2: rgba(11,17,23,0.18);
      --line-dark: rgba(255,255,255,0.14);
      --line-dark-2: rgba(255,255,255,0.24);
      --muted: rgba(11,17,23,0.6);
      --muted-light: rgba(255,255,255,0.7);
      --muted-dim: rgba(255,255,255,0.5);
      /* type */
      --font: 'Inter', system-ui, -apple-system, sans-serif;
      /* shape — locked at 4px for consistency */
      --radius: 4px;
      --max-width: 1320px;
    }
.btn-red{ background: var(--red); color: var(--white); }
.btn-red:hover{ background: #b3151b; }
.btn-small{ min-height: 40px; padding: 0 20px; font-size: 11px; }
/* ─── NAV WITH MEGA MENU ─── */
    nav.main{
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
      height: 72px;
    }
.nav-inner{
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 32px;
    }
.brand{
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      line-height: 1;
      flex-shrink: 0;
    }
.brand-logo{
      height: 26px;
      width: auto;
      display: block;
    }
.brand-logo.dark-version{ display: block; }
.brand-logo.white-version{ display: none; }
.footer-brand .brand-logo.dark-version,
    .dark .brand-logo.dark-version,
    .black .brand-logo.dark-version{ display: none; }
.footer-brand .brand-logo.white-version,
    .dark .brand-logo.white-version,
    .black .brand-logo.white-version{ display: block; }
.brand sub{
      font-family: var(--font);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
      padding-left: 14px;
      border-left: 1px solid var(--line);
    }
.footer-brand .brand sub{ color: rgba(255,255,255,0.4); border-left-color: rgba(255,255,255,0.18); }
.nav-links{
      display: flex;
      gap: 4px;
      list-style: none;
      margin-left: auto;
      height: 100%;
      align-items: center;
    }
.nav-link-item{
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
    }
.nav-link{
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      text-decoration: none;
      letter-spacing: -0.005em;
      transition: color 0.18s;
      white-space: nowrap;
      padding: 0 18px;
      height: 100%;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      border: none;
      background: none;
      font-family: var(--font);
    }
.nav-link:hover,
    .nav-link-item.open .nav-link{ color: var(--red); }
.nav-link-item.open .nav-link::after{
      content: '';
      position: absolute;
      bottom: -1px;
      left: 18px;
      right: 18px;
      height: 2px;
      background: var(--red);
    }
.nav-right{
      display: flex;
      gap: 14px;
      align-items: center;
      flex-shrink: 0;
    }
.nav-phone{
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      text-decoration: none;
      white-space: nowrap;
    }
.nav-phone:hover{ color: var(--red); }
.hamburger{
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }
.hamburger span{
      display: block;
      width: 22px;
      height: 2px;
      background: var(--ink);
      margin: 4px 0;
    }
/* ─── MEGA MENU PANELS ─── */
    .mega-panel{
      position: fixed;
      top: 72px;
      left: 0;
      right: 0;
      background: var(--white);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 24px 40px -16px rgba(11,17,23,0.12);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity 0.22s, transform 0.22s, visibility 0s linear 0.22s;
      z-index: 99;
      max-height: calc(100vh - 72px);
      overflow-y: auto;
    }
.mega-panel.open{
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity 0.22s, transform 0.22s, visibility 0s;
    }
.mega-inner{
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 48px 32px 56px;
      display: grid;
      gap: 48px;
    }
/* ─── MEGA: MODELS ─── */
    .mega-models .mega-inner{
      grid-template-columns: 1.55fr 1fr;
    }
.mega-models-grid{
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
.mega-size-group h4{
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }
.mega-models-row{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
.mega-model{
      display: flex;
      gap: 12px;
      text-decoration: none;
      color: var(--ink);
      padding: 8px;
      margin: -8px;
      border-radius: var(--radius);
      transition: background 0.15s;
      align-items: center;
    }
.mega-model:hover{ background: var(--soft); }
.mega-model-thumb{
      width: 56px;
      height: 42px;
      flex-shrink: 0;
      border-radius: 3px;
      overflow: hidden;
      background: transparent;
    }
.mega-model-thumb img{
      width: 100%; height: 100%;
      object-fit: contain;
      padding: 2px;
      box-sizing: border-box;
    }
.mega-model-info{
      min-width: 0;
      flex: 1;
    }
.mega-model-name{
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.015em;
      line-height: 1.1;
      margin-bottom: 2px;
    }
/* layout chip beside a model name — the 21 ships as a center console or a
   flats layout on the same hull, same price, so they read as one model in
   two configurations rather than two models. */
.mega-model-layout{font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:6px;vertical-align:1px}

.mega-model-tag{
      font-size: 11px;
      color: var(--muted);
      line-height: 1.3;
      margin-bottom: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
.mega-model-price{
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.04em;
    }
.mega-model-price b{
      color: var(--ink);
      font-weight: 700;
    }
.mega-bottom{
      margin-top: 36px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      display: flex;
      gap: 32px;
    }
.mega-bottom a{
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: color 0.18s;
    }
.mega-bottom a:hover{ color: var(--red); }
/* ─── MEGA: MODELS (series-first, two-tier) ─── */
    .mega-models-2tier .mega-inner{ grid-template-columns: 392px 1fr; gap: 44px; align-items: start; }
    .mega-series-nav{ display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--line); padding-right:36px; }
    .mega-series{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); padding:12px 12px; border-radius:var(--radius); transition:background .15s; }
    .mega-series:hover, .mega-series.active{ background:var(--soft); }
    
    .mega-series-thumb img{ width:100%; height:auto; max-height:100%; object-fit:contain; object-position:left bottom; }
    
    
    
    
    
    
    .mega-series-info{ flex:1; min-width:0; }
    .mega-series-name{ font-size:16px; font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
    .mega-series-sub{ font-size:11px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .mega-series-meta{ text-align:right; flex-shrink:0; }
    .mega-series-price{ font-size:10px; color:var(--muted); letter-spacing:.04em; }
    .mega-series-price b{ color:var(--ink); font-weight:700; }
    .mega-series-count{ font-size:10px; color:var(--muted); margin-top:2px; }
    .mega-series-arrow{ color:var(--muted); font-size:20px; line-height:1; margin-left:2px; opacity:0; transform:translateX(-3px); transition:opacity .15s, transform .15s, color .15s; }
    .mega-series:hover .mega-series-arrow, .mega-series.active .mega-series-arrow{ opacity:1; transform:translateX(0); color:var(--red); }
    .mega-series-detail{ position:relative; min-height:250px; }
    .mega-versions{ display:none; }
    .mega-versions.active{ display:block; animation:megaFade .18s ease; }
    @keyframes megaFade{ from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;} }
    .mega-versions-head{ font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--red); margin-bottom:22px; padding-bottom:12px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; }
    .mega-versions-head span{ color:var(--muted); letter-spacing:.12em; font-size:9px; }
    .mega-versions-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 28px; }
    .mega-models-2tier .mega-model-thumb{ width:216px; height:140px; }  /* bigger sub-menu model images */
    .mega-versions-all{ display:inline-flex; margin-top:26px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); text-decoration:none; gap:8px; transition:color .18s; }
    .mega-versions-all:hover{ color:var(--red); }
    .mega-versions-foot{ margin-top:32px; padding-top:22px; border-top:1px solid var(--line); display:flex; gap:32px; }
    .mega-versions-foot a{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); text-decoration:none; transition:color .18s; }
    .mega-versions-foot a:hover{ color:var(--red); }
    @media (max-width: 900px){
      .mega-models-2tier .mega-inner{ grid-template-columns:1fr; gap:28px; }
      .mega-series-nav{ border-right:none; padding-right:0; border-bottom:1px solid var(--line); padding-bottom:16px; }
      .mega-versions-grid{ grid-template-columns:1fr; }
    }
    /* ─── MEGA: FEATURED PANEL (RIGHT SIDE) ─── */
    .mega-featured{
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      min-height: 320px;
      color: var(--white);
      text-decoration: none;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
.mega-featured img{
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s;
    }
.mega-featured:hover img{ transform: scale(1.04); }
.mega-featured-overlay{position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(5,6,7,.04) 30%,rgba(5,6,7,.42) 62%,rgba(5,6,7,.9));}
.mega-featured-content{
      position: relative;
      padding: 32px;
    }
.mega-featured .eyebrow{
      color: var(--red);
      margin-bottom: 12px;
    }
.mega-featured h3{
      font-size: 28px;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 8px;
      color: var(--white);
    }
.mega-featured p{
      font-size: 13px;
      color: rgba(255,255,255,0.78);
      margin-bottom: 16px;
      max-width: 320px;
      line-height: 1.55;
    }
.mega-featured-link{
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--white);
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.22);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
    }
/* ─── MEGA: DISCOVER / BOATYARD (LIST + FEATURED) ─── */
    .mega-list .mega-inner{
      grid-template-columns: 1fr 1fr;
    }
.mega-list-items{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 32px;
      align-content: start;
    }
.mega-list-item{
      display: block;
      padding: 14px 0;
      text-decoration: none;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      transition: padding-left 0.2s, color 0.2s;
    }
.mega-list-item:hover{
      padding-left: 8px;
      color: var(--red);
    }
.mega-list-name{
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
.mega-list-tag{
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }
.mega-soon{
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      background: var(--soft);
      padding: 3px 7px;
      border-radius: 2px;
      vertical-align: 2px;
    }
/* ─── MEGA BACKDROP ─── */
    .mega-backdrop{
      position: fixed;
      inset: 72px 0 0 0;
      background: rgba(11,17,23,0.4);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.22s, visibility 0s linear 0.22s;
      z-index: 98;
    }
.mega-backdrop.active{
      opacity: 1;
      visibility: visible;
      transition: opacity 0.22s;
    }
@media (max-width: 1140px){
.nav-phone{ display: none; }
.nav-link{ padding: 0 12px; font-size: 12.5px; }
.mega-models .mega-inner{ grid-template-columns: 1fr; }
.mega-featured{ display: none; }
.mega-list .mega-inner{ grid-template-columns: 1fr; }
}
.footer-brand .brand{ color: var(--white); }
.footer-brand .brand sub{ color: rgba(255,255,255,0.4); }
.footer-brand p{
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      line-height: 1.7;
      margin: 20px 0 24px;
      max-width: 340px;
    }
/* ─── MOBILE NAV ─── */
    .mobile-nav{
      position: fixed; inset: 0;
      background: var(--white);
      z-index: 200;
      transform: translateX(100%);
      transition: transform 0.35s ease;
      display: flex;
      flex-direction: column;
      padding: 88px 32px 32px;
      overflow-y: auto;
    }
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav button.close{
      position: absolute; top: 20px; right: 20px;
      background: none; border: none;
      font-size: 28px;
      cursor: pointer;
      color: var(--ink);
    }
.mobile-nav-group{
      margin-bottom: 28px;
    }
.mobile-nav-label{
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--line);
    }
.mobile-nav a{
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      text-decoration: none;
      padding: 10px 0;
      display: block;
    }
.mobile-nav a.mobile-nav-top{
      font-size: 28px;
      font-weight: 800;
    }
.mobile-nav a:hover{ color: var(--red); }
.mobile-nav-cta{
      margin-top: auto;
      padding-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
@media (max-width: 1024px){
.nav-links, .nav-right{ display: none; }
.hamburger{ display: block; }
.footer-brand{ grid-column: span 2; }
}
@media (max-width: 600px){
.footer-brand{ grid-column: span 1; }
}
/* ═══════════════════════════════════════════════════════════════
       V5 — MOBILE-FIRST UPGRADES + NEW SECTION STYLES
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Mobile-first base tweaks ─── */
    @media (max-width: 768px){
      h1 { font-size: clamp(28px, 8vw, 42px); }
      h2 { font-size: clamp(22px, 6vw, 30px); }
      .container, .wrap { padding-left: 20px; padding-right: 20px; }
      .btn { min-height: 52px; padding: 0 22px; font-size: 13px; }
      /* Larger tap targets on mobile */
      button, a.btn { min-height: 48px; }
    }


/* ═══ East Cape locked type system (from prototype v5) — normalization layer ═══ */
h1,h2,h3,h4,.h,.fh{font-family:var(--font)!important;font-weight:800!important}
h1{font-size:clamp(48px,6.5vw,92px)!important;line-height:.98!important;letter-spacing:-.04em!important;text-transform:none!important}
h2,.h,.fh{font-size:clamp(36px,4.5vw,64px)!important;line-height:1!important;letter-spacing:-.035em!important;text-transform:none!important}
h3{font-size:clamp(20px,2.2vw,26px)!important;line-height:1.05!important;letter-spacing:-.03em!important;text-transform:none!important}
.faq summary{font-weight:700!important;letter-spacing:-.01em!important}
@media(max-width:1024px){h1{font-size:clamp(40px,8vw,64px)!important}h2,.h,.fh{font-size:clamp(32px,6vw,48px)!important}}
@media(max-width:640px){h1{font-size:clamp(28px,8vw,42px)!important}h2,.h,.fh{font-size:clamp(22px,6vw,30px)!important}}
/* nav is exempt — it defines its own sizes with higher specificity below where needed */
.mega-featured h3{font-size:28px!important}.mega-model-name{font-size:14px!important}

.mega-size-group h4{font-size:11px!important;letter-spacing:.18em!important}
.mega-model-name{font-weight:700}

/* ═══ H-MENU OVERRIDES: series across the top, top-down verticals, true scale ═══ */
.mega-models-2tier .mega-inner{ grid-template-columns:1fr !important; gap:0 !important; }
.mega-series-nav{ flex-direction:row !important; justify-content:space-between; align-items:flex-end; gap:6px !important;
  border-right:none !important; padding-right:0 !important; border-bottom:1px solid var(--line); padding:8px 0 20px !important; margin-bottom:24px; }
.mega-series{ flex:1; flex-direction:column !important; align-items:center !important; text-align:center; gap:12px !important; padding:10px 6px !important; }
.mega-series-arrow{ display:none !important; }
.mega-series-info{ flex:none !important; }
.mega-series-name{ font-size:15px; }
.mega-series-sub{ font-size:11px; }
.mega-series-meta{ display:flex; gap:10px; align-items:baseline; justify-content:center; }
/* vertical top-down boats — bow up, sterns on a shared line, true relative length */
.mega-series-thumb{ position:relative !important; width:auto !important; height:auto !important; display:block !important; margin:0 auto 14px; }
.mega-series-thumb img{ position:absolute; top:50%; left:50%; height:auto !important; max-height:none !important; }
.mega-series[data-series="17"] .mega-series-thumb{ width:56px; height:143px; }
.mega-series[data-series="17"] .mega-series-thumb img{ width:143px !important; transform:translate(-50%,-50%) translateY(-2px) rotate(-90deg); }
.mega-series[data-series="18"] .mega-series-thumb{ width:56px; height:151px; }
.mega-series[data-series="18"] .mega-series-thumb img{ width:151px !important; transform:translate(-50%,-50%) translateY(-5px) rotate(-90deg); }
.mega-series[data-series="19"] .mega-series-thumb{ width:66px; height:164px; }
.mega-series[data-series="19"] .mega-series-thumb img{ width:164px !important; transform:translate(-50%,-50%) translateY(0px) rotate(-90deg); }
.mega-series[data-series="21"] .mega-series-thumb{ width:102px; height:225px; }
.mega-series[data-series="21"] .mega-series-thumb img{ width:225px !important; transform:translate(-50%,-50%) translateY(24px) rotate(-90deg); }
.mega-series[data-series="25"] .mega-series-thumb{ width:87px; height:207px; }
.mega-series[data-series="25"] .mega-series-thumb img{ width:207px !important; transform:translate(-50%,-50%) translateY(-11px) rotate(-90deg); }
/* versions get the full panel width — bigger model pictures */
.mega-versions-grid{ grid-template-columns:repeat(2,1fr) !important; gap:26px 34px !important; }
    @media(max-width:820px){ .mega-versions-grid{ grid-template-columns:1fr !important; } }
.mega-models-2tier .mega-model-thumb{ width:380px !important; height:237px !important; }
@media(max-width:1024px){
  .mega-series-nav{ overflow-x:auto; }
}

/* ═══ FINAL series-thumb sizing — single source of truth, supersedes all above ═══ */
.mega-series .mega-series-thumb{ position:relative !important; display:block !important; flex:none !important; margin:0 auto 14px !important; }
.mega-series .mega-series-thumb img{ position:absolute !important; top:50% !important; left:50% !important; height:auto !important; max-height:none !important; max-width:none !important; object-fit:contain !important; }
.mega-series[data-series="17"] .mega-series-thumb{ width:56px !important; height:143px !important; }
.mega-series[data-series="17"] .mega-series-thumb img{ width:143px !important; transform:translate(-50%,-50%) translateY(-2px) rotate(-90deg) !important; }
.mega-series[data-series="18"] .mega-series-thumb{ width:56px !important; height:151px !important; }
.mega-series[data-series="18"] .mega-series-thumb img{ width:151px !important; transform:translate(-50%,-50%) translateY(-5px) rotate(-90deg) !important; }
.mega-series[data-series="19"] .mega-series-thumb{ width:66px !important; height:164px !important; }
.mega-series[data-series="19"] .mega-series-thumb img{ width:164px !important; transform:translate(-50%,-50%) translateY(0px) rotate(-90deg) !important; }
.mega-series[data-series="21"] .mega-series-thumb{ width:102px !important; height:225px !important; }
.mega-series[data-series="21"] .mega-series-thumb img{ width:225px !important; transform:translate(-50%,-50%) translateY(24px) rotate(-90deg) !important; }
.mega-series[data-series="25"] .mega-series-thumb{ width:87px !important; height:207px !important; }
.mega-series[data-series="25"] .mega-series-thumb img{ width:207px !important; transform:translate(-50%,-50%) translateY(-11px) rotate(-90deg) !important; }

/* EVOx poling-scene drawing: hull spans ~2/3 of the art — scale so hull length matches the 17 EVO V render */
.mega-model-thumb img.evox-fit{ transform:scale(1.55); transform-origin:50% 68%; }

/* stacked profile + transom view (17 EVO V) — X-version transoms drop into the same slot */
.mega-models-2tier .mega-model-thumb.stack{ height:auto !important; display:flex; flex-direction:column; align-items:center; gap:0; overflow:visible; }
.mega-model-thumb.stack img{ position:static; width:100% !important; height:auto !important; }
.mega-model-thumb.stack img.stern{ width:56% !important; margin-top:-28px; }
.mega-model-thumb.stack .stern-cap{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ═══ MOBILE series accordion — biggest to smallest, overhead art, tap to open ═══ */
.m-series{border-bottom:1px solid var(--line)}
.m-series-head{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;padding:13px 0;cursor:pointer;font-family:var(--font);text-align:left}
.m-series-name{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink);flex:1;min-width:96px}
.m-series-name small{display:block;font-size:10.5px;font-weight:600;color:var(--muted);margin-top:2px;letter-spacing:0}
.m-thumb{display:flex;align-items:center;justify-content:center;overflow:visible}
.m-series-head .m-thumb.ms{margin-left:auto}
.m-series-head .m-thumb.ms img{height:auto;display:block}
.m-series-arr{font-size:20px;color:var(--muted);transition:transform .25s;flex-shrink:0;width:16px}
.m-series.open .m-series-arr{transform:rotate(90deg)}
.m-series-body{display:none;padding:0 0 12px}
.m-series.open .m-series-body{display:block;animation:msFade .2s ease}
@keyframes msFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mobile-nav .m-series-body a{display:block;padding:12px 0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.m-series-body .m-thumb{width:100%;height:auto;display:flex;align-items:center;justify-content:center;overflow:hidden}
.m-series-body .m-thumb img{width:92%;height:auto}
.m-series-body .m-thumb.evox{height:120px}
.m-series-body .m-thumb.evox img{transform:scale(1.5);transform-origin:50% 66%}
.m-model-n{display:block;margin-top:6px;text-align:center}
.m-model-n small{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;letter-spacing:0}
.m-series-body a + a{border-top:1px dashed var(--line)}

/* hamburger: plain block layout — no flex-on-button (iOS Safari quirk), fixed box, bars centered by margins */
@media (max-width:1024px){
  .hamburger{ display:block !important; width:44px; height:48px; min-height:48px; padding:0; border:none; background:none; }
  .hamburger span{ display:block; width:22px; height:2px; background:var(--ink); margin:0 auto; }
  .hamburger span:first-child{ margin-top:16px; }
  .hamburger span + span{ margin-top:5px; }
}

/* ═══ mobile-nav overflow fix: the off-screen menu must never create horizontal scroll ═══ */
html{ overflow-x:hidden; }
html, body{ overflow-x:clip; }
/* keep the panel non-interactive & invisible until opened */
.mobile-nav{ visibility:hidden; transition: transform .35s ease, visibility 0s linear .35s; }
.mobile-nav.open{ visibility:visible; transition: transform .35s ease, visibility 0s; }

/* phone nav fit: the logo + EST.2004 + paddings exceeded 390px and pushed the hamburger off-screen */
@media (max-width:1024px){
  .hamburger{ margin-left:auto; }
}
@media (max-width:600px){
  .nav-inner{ padding:0 16px; gap:10px; }
  .brand sub{ display:none; }
  .brand-logo{ height:21px; }
}

/* ─── models mega: nothing expanded until a series is hovered ─── */
.mega-versions-hint{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;min-height:260px;text-align:center;color:rgba(11,17,23,.42);
}
.mega-models-2tier.series-open .mega-versions-hint{display:none}
.mega-versions-hint .mvh-mark{
  font-size:22px;line-height:1;color:var(--red);opacity:.7;
}
.mega-versions-hint p{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE HARDENING — added after the merge audit (2026-07-28)
   The nav collapses to the hamburger at 1024px, but the desktop mega
   panels stayed in the DOM with a fixed 392px column. Kill them below
   the breakpoint; the mobile drawer is the only menu down there.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .mega-panel,
  .mega-backdrop{ display:none !important; }
}

/* wide comparison tables get their own scroll instead of breaking the page */
@media (max-width:900px){
  .compare-table-wrap,
  .compare-wrap,
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .compare-table,
  .wtlf-table,
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
         max-width:100%; white-space:normal; }
}

/* readable floor for micro-labels on phones (8–9.5px is too small to read) */
@media (max-width:640px){
  .mp-spec span,
  .heritage-inner span,
  .mapstats div span,
  .gc-meta .lbl,
  .press-label{ font-size:10.5px !important; letter-spacing:.1em; }
}

/* nothing may push the page sideways */
html,body{ max-width:100%; overflow-x:hidden; }
img,svg,video,table,pre{ max-width:100%; }

/* mega panel is hidden below 1024px, but neutralise its fixed column too so
   nothing can ever measure 392px on a 390px screen */
@media (max-width:1024px){
  .mega-models-2tier .mega-inner{ grid-template-columns:1fr; gap:0; }
}
/* comparison tables: scroll inside their own box rather than stretching the page */
@media (max-width:900px){
  .compare-table{ min-width:0; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .compare-table > tbody,
  .compare-table > thead{ min-width:700px; }
}

/* remaining audit items: give every wide table a scroll box, and lift the
   smallest visible labels to a readable size on phones */
@media (max-width:900px){
  .wtlf-table,
  table[class*="compare"],
  .guide-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0; }
}
@media (max-width:640px){
  .fleet-mini-badge,
  .watch-card-meta,
  .build-step small,
  .spec-mini,
  .card-meta small{ font-size:10.5px !important; }
}
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }

/* ── header utility cluster (sign in / cart) ── */
.nav-signin{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .2s}
.nav-signin:hover{color:var(--ink)}
nav.main.on-dark .nav-signin,nav.main.transparent .nav-signin{color:rgba(255,255,255,.85)}
nav.main.on-dark .nav-signin:hover,nav.main.transparent .nav-signin:hover{color:#fff}
@media(max-width:900px){.nav-signin{display:none}}
.m-util{display:block;padding:14px 0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}

/* header right cluster: phone matches the sign-in treatment, breathing room */
.nav-right{gap:26px}
.nav-phone{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

/* account dropdown */
.nav-account{position:relative}
.nav-account-btn{background:none;border:0;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px}
.nav-caret{font-size:9px;opacity:.7}
.nav-account-menu{position:absolute;right:0;top:calc(100% + 12px);min-width:230px;background:#fff;border:1px solid #e7eaee;border-radius:12px;box-shadow:0 18px 44px -18px rgba(11,17,23,.35);padding:8px;z-index:80}
.nav-account-menu a,.nav-account-menu button{display:block;width:100%;text-align:left;background:none;border:0;font-family:inherit;padding:11px 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:#1c242c;cursor:pointer}
.nav-account-menu a:hover,.nav-account-menu button:hover{background:#f3f5f7}
.nav-account-menu .acct-head{padding:11px 14px 8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a939d;border-bottom:1px solid #eef1f4;margin-bottom:6px}
.nav-account-menu .acct-out{color:#8d2b32}


/* --- package callout under each mega-menu model (Aug 13 review, B-2) --- */
.mega-model-pkg{ font-size:10px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(11,17,23,.45); margin-top:3px; }
.m-model-pkg{ display:block; font-size:10px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(11,17,23,.45); margin-top:2px; }


/* --- Aug 13 review: mobile menu --------------------------------------- */
/* E-1  Discover / Boatyard collapse like the model series */
.m-group{ border-bottom:1px solid rgba(11,17,23,.08) }
.m-group-body{ display:none; padding:0 0 12px }
.m-group.open .m-group-body{ display:block; animation:msFade .2s ease }
.m-group.open .m-series-arr{ transform:rotate(90deg) }
.m-group-body a{ display:block; padding:11px 0; font-size:16px; font-weight:800;
  letter-spacing:-.01em }
.m-group-body a small{ display:block; font-size:12px; font-weight:500;
  letter-spacing:0; color:rgba(11,17,23,.55); margin-top:2px }

/* E-3 / B-2  price + package under each mobile model */
.m-model-price{ display:block; font-size:12px; font-weight:800; letter-spacing:0;
  color:var(--ink,#0B1117); margin-top:2px }
.m-model-price b{ font-weight:800 }

/* E-5  owner portal as the bottom hot button */
.mobile-nav-cta .btn-portal{ background:#061C36; color:#fff; border:0; margin-top:8px }

/* E-8  centre the mobile footer */
@media (max-width:780px){
  .site-footer, .site-footer *{ text-align:center }
  .site-footer .foot-cols, .site-footer .foot-grid{ justify-items:center }
  .site-footer ul{ padding-left:0; list-style:none }
  .site-footer .foot-social{ justify-content:center }
}


/* E-7  mobile model rows: compact left-aligned row, not a stacked full-width card.
   Graham, Aug 13: "fix the scaling on the 17 Evo series". The old rule made every
   model image 92% of the drawer width and centred the caption under it, so one
   series filled several screens. Now: fixed-width thumb left, text left. --- */
@media (max-width:900px){
  .m-series-body a{ display:flex !important; align-items:center; gap:14px;
    padding:11px 0 !important; }
  .m-series-body a .m-thumb{ width:104px !important; flex:0 0 104px; height:46px;
    overflow:hidden; }
  .m-series-body a .m-thumb img{ width:104px !important; height:auto;
    transform:none !important; }
  .m-series-body a .m-thumb.evox{ height:46px !important; }
  .m-series-body a .m-thumb.evox img{ transform:none !important; }
  .m-model-n{ margin-top:0 !important; text-align:left !important; flex:1 1 auto;
    font-size:16px; }
  .m-model-n small{ text-align:left }
  .m-model-price{ text-align:left }
  .m-model-pkg{ text-align:left }
}


/* --- footer: owner portal as a real button under Start Your Build ------- */
.ft-portal{ display:flex; align-items:center; gap:12px; margin-top:12px;
  padding:13px 15px; border:1.5px solid rgba(255,255,255,.22); border-radius:6px;
  background:rgba(255,255,255,.04); color:#fff; text-decoration:none;
  transition:border-color .18s ease, background .18s ease, transform .18s ease }
.ft-portal:hover{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.08);
  transform:translateY(-1px) }
.ft-portal-ico{ flex:0 0 30px; height:30px; display:flex; align-items:center;
  justify-content:center; color:#D71920 }
.ft-portal-ico svg{ width:22px; height:22px }
.ft-portal-txt{ display:block; line-height:1.3 }
.ft-portal-txt b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.01em }
.ft-portal-txt small{ display:block; font-size:11.5px; font-weight:600;
  color:rgba(255,255,255,.62); margin-top:2px; letter-spacing:.01em }
.ft-portal-arr{ margin-left:auto; font-size:17px; color:rgba(255,255,255,.55) }

*,*::before,*::after{ box-sizing: border-box; margin: 0; padding: 0; }
:root{
      /* ── PALETTE (Graham's spec) ── */
      --black: #050607;
      --ink: #0B1117;
      --white: #FFFFFF;
      --soft: #F5F7FA;
      --blue: #0057A8;
      --blue-dark: #061C36;
      --red: #D71920;
      /* derived */
      --line: rgba(11,17,23,0.1);
      --line-2: rgba(11,17,23,0.18);
      --line-dark: rgba(255,255,255,0.14);
      --line-dark-2: rgba(255,255,255,0.24);
      --muted: rgba(11,17,23,0.6);
      --muted-light: rgba(255,255,255,0.7);
      --muted-dim: rgba(255,255,255,0.5);
      /* type */
      --font: 'Inter', system-ui, -apple-system, sans-serif;
      /* shape — locked at 4px for consistency */
      --radius: 4px;
      --max-width: 1320px;
    }
html{ scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body{
      background: var(--white);
      color: var(--ink);
      font-family: var(--font);
      font-weight: 400;
      line-height: 1.6;
      overflow-x: hidden;
    }
a{ color: inherit; }
img{ display: block; max-width: 100%; }
.wrap{
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
    }
.eyebrow{
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 18px;
    }
.eyebrow::before{
      content: ''; width: 28px; height: 2px; background: var(--red);
    }
.eyebrow.light{ color: var(--red); }
.eyebrow.on-light{ color: var(--blue); }
.eyebrow.on-light::before{ background: var(--blue); }
h1,h2,h3,h4{ font-weight: 800; letter-spacing: -0.035em; }
h1{ font-size: clamp(48px, 6.5vw, 92px); line-height: 0.98; letter-spacing: -0.04em; }
h2{ font-size: clamp(36px, 4.5vw, 64px); line-height: 1; letter-spacing: -0.035em; }
h3{ font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -0.03em; }
h4{ font-size: 18px; letter-spacing: -0.02em; }
.lede{
      font-size: 17px;
      font-weight: 400;
      color: var(--muted);
      line-height: 1.65;
      max-width: 560px;
    }
.lede.light{ color: var(--muted-light); }
.btn{
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px;
      padding: 0 28px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: var(--radius);
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
.btn-red{ background: var(--red); color: var(--white); }
.btn-red:hover{ background: #b3151b; }
.btn-white{ background: var(--white); color: var(--ink); }
.btn-white:hover{ background: var(--soft); }
.btn-blue{ background: var(--blue); color: var(--white); }
.btn-blue:hover{ background: #003f7d; }
.btn-dark{ background: var(--ink); color: var(--white); }
.btn-dark:hover{ background: var(--blue); }
.btn-out-light{ border-color: var(--line-dark-2); color: var(--white); }
.btn-out-light:hover{ background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-out-dark{ border-color: var(--line-2); color: var(--ink); }
.btn-out-dark:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-small{ min-height: 40px; padding: 0 20px; font-size: 11px; }
.announce{
      background: var(--black);
      color: var(--white);
      text-align: center;
      padding: 11px 24px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.03em;
      border-bottom: 1px solid var(--line-dark);
    }
.announce .pill{
      display: inline-block;
      background: var(--red);
      color: var(--white);
      padding: 2px 8px;
      border-radius: 2px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.16em;
      margin-right: 10px;
      vertical-align: 1px;
    }
.announce a{
      color: var(--white);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      margin-left: 8px;
      font-weight: 600;
    }
.hero{
      position: relative;
      height: calc(100vh - 72px);
      min-height: 620px;
      max-height: 880px;
      overflow: hidden;
      background: var(--black);
      color: var(--white);
    }
.hero-media{
      position: absolute; inset: 0;
    }
.hero-media video,.hero-media img{
      width: 100%; height: 100%;
      object-fit: cover;
    }
.hero-overlay{
      position: absolute; inset: 0;
      background: linear-gradient(105deg,
        rgba(5,6,7,0.86) 0%,
        rgba(5,6,7,0.5) 40%,
        rgba(5,6,7,0.1) 70%,
        rgba(5,6,7,0) 100%);
    }
.hero-content{
      position: relative;
      z-index: 2;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 760px;
      padding-top: 80px;
    }
.hero h1{
      color: var(--white);
      margin-bottom: 24px;
      max-width: 720px;
    }
.hero-lede{
      font-size: 19px;
      color: rgba(255,255,255,0.82);
      max-width: 540px;
      margin-bottom: 36px;
      font-weight: 400;
    }
.hero-actions{
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 36px;
    }
.hero-meta{
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
    }
.hero-meta-item{
      font-size: 13px;
      color: rgba(255,255,255,0.65);
    }
.hero-meta-item b{
      display: block;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--white);
      margin-bottom: 2px;
    }
.hero-scroll{
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      writing-mode: vertical-rl;
      z-index: 3;
    }
section{ padding: 100px 0; }
section.dark{ background: var(--ink); color: var(--white); }
section.black{ background: var(--black); color: var(--white); }
section.soft{ background: var(--soft); }
section.with-pattern{
      background: var(--ink);
      color: var(--white);
      position: relative;
    }
.section-head{
      margin-bottom: 56px;
      max-width: 760px;
    }
.section-head.with-cta{
      max-width: none;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;
      align-items: end;
    }
.section-head.with-cta > div{ max-width: 720px; }
.section-title-row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 48px; }
.section-title-row .head-block{ flex: 1; max-width: 720px; }
.paths-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
.path-card{
      position: relative;
      aspect-ratio: 3/2;
      overflow: hidden;
      border-radius: var(--radius);
      cursor: pointer;
      text-decoration: none;
      color: var(--white);
      transition: transform 0.4s ease;
    }
.path-card:hover{ transform: translateY(-4px); }
.path-card img{
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
.path-card:hover img{ transform: scale(1.05); }
.path-card .path-overlay{
      position: absolute; inset: 0;
      background: linear-gradient(180deg,
        rgba(5,6,7,0) 30%,
        rgba(5,6,7,0.4) 60%,
        rgba(5,6,7,0.92) 100%);
    }
.path-card .path-content{
      position: absolute;
      inset: 0;
      padding: 36px 40px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
.path-card h3{
      font-size: 36px;
      letter-spacing: -0.025em;
      margin-bottom: 10px;
      color: var(--white);
    }
.path-card p{
      font-size: 14px;
      color: rgba(255,255,255,0.8);
      margin-bottom: 16px;
      line-height: 1.55;
      max-width: 440px;
    }
.path-card .path-link{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--white);
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.22);
      width: fit-content;
    }
.fleet-tabs{
      display: flex;
      gap: 6px;
      background: var(--soft);
      padding: 5px;
      border-radius: 999px;
      width: fit-content;
      margin-bottom: 0;
      border: 1px solid var(--line);
    }
.fleet-tab{
      padding: 11px 22px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      background: none;
      border: none;
      border-radius: 999px;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.2s;
      font-family: var(--font);
    }
.fleet-tab.active{
      background: var(--ink);
      color: var(--white);
    }
.fleet-tab:not(.active):hover{ color: var(--ink); }
.fleet-row{ display: block; margin-bottom: 16px; }
.fleet-row.fleet-row-hidden{ display: none; }
.fleet-hero{
      position: relative;
      aspect-ratio: 21/9;
      overflow: hidden;
      border-radius: var(--radius);
      margin-bottom: 16px;
      cursor: pointer;
    }
.fleet-hero img{
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
.fleet-hero:hover img{ transform: scale(1.03); }
.fleet-hero-overlay{
      position: absolute; inset: 0;
      background: linear-gradient(105deg,
        rgba(5,6,7,0.85) 0%,
        rgba(5,6,7,0.5) 35%,
        rgba(5,6,7,0) 65%);
    }
.fleet-hero-content{
      position: absolute;
      inset: 0;
      padding: 56px 64px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      max-width: 640px;
      color: var(--white);
    }
.fleet-hero-badge{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--red);
      color: var(--white);
      padding: 6px 12px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      align-self: flex-start;
      margin-bottom: 20px;
      border-radius: 2px;
    }
.fleet-hero h3{
      font-size: clamp(54px, 7vw, 92px);
      line-height: 0.92;
      letter-spacing: -0.04em;
      margin-bottom: 12px;
      color: var(--white);
    }
.fleet-hero p{
      font-size: 17px;
      color: rgba(255,255,255,0.85);
      margin-bottom: 24px;
      max-width: 460px;
    }
.fleet-hero-stats{
      display: flex;
      gap: 28px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
.fleet-hero-stat b{
      display: block;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
      margin-bottom: 4px;
      color: var(--white);
    }
.fleet-hero-stat span{
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      font-weight: 600;
    }
.fleet-hero-actions{
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
.fleet-split{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
.fleet-panel{
      position: relative;
      aspect-ratio: 4/3;
      overflow: hidden;
      border-radius: var(--radius);
      cursor: pointer;
      transition: transform 0.4s;
    }
.fleet-panel:hover{ transform: translateY(-3px); }
.fleet-panel img{
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s;
    }
.fleet-panel:hover img{ transform: scale(1.04); }
.fleet-panel-overlay{
      position: absolute; inset: 0;
      background: linear-gradient(180deg,
        rgba(5,6,7,0) 30%,
        rgba(5,6,7,0.3) 55%,
        rgba(5,6,7,0.92) 100%);
    }
.fleet-panel-content{
      position: absolute;
      inset: 0;
      padding: 32px 36px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: var(--white);
    }
.fleet-panel-badge{
      align-self: flex-start;
      background: rgba(255,255,255,0.12);
      backdrop-filter: blur(8px);
      color: var(--white);
      padding: 5px 10px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border-radius: 2px;
      margin-bottom: auto;
    }
.fleet-panel-badge.blue{ background: var(--blue); }
.fleet-panel-badge.red{ background: var(--red); }
.fleet-panel h3{
      font-size: clamp(36px, 4vw, 52px);
      line-height: 0.95;
      letter-spacing: -0.035em;
      margin-bottom: 6px;
      color: var(--white);
    }
.fleet-panel-tag{
      font-size: 13px;
      color: rgba(255,255,255,0.78);
      margin-bottom: 16px;
    }
.fleet-panel-stats{
      display: flex;
      gap: 22px;
      margin-bottom: 18px;
    }
.fleet-panel-stat{
      font-size: 10px;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 600;
    }
.fleet-panel-stat b{
      display: block;
      font-size: 18px;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -0.02em;
      margin-bottom: 2px;
    }
.fleet-panel-link{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--white);
      text-decoration: none;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.2);
      width: fit-content;
    }
.fleet-quad{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
.fleet-mini{
      position: relative;
      aspect-ratio: 4/5;
      overflow: hidden;
      border-radius: var(--radius);
      cursor: pointer;
      transition: transform 0.3s;
    }
.fleet-mini:hover{ transform: translateY(-3px); }
.fleet-mini img{
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s;
    }
.fleet-mini:hover img{ transform: scale(1.04); }
.fleet-mini-overlay{
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(5,6,7,0) 30%, rgba(5,6,7,0.92) 100%);
    }
.fleet-mini-content{
      position: absolute;
      inset: 0;
      padding: 22px 24px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: var(--white);
    }
.fleet-mini-badge{
      align-self: flex-start;
      background: rgba(255,255,255,0.12);
      backdrop-filter: blur(8px);
      color: var(--white);
      padding: 4px 8px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border-radius: 2px;
      margin-bottom: auto;
    }
.fleet-mini h3{
      font-size: 26px;
      letter-spacing: -0.025em;
      line-height: 1;
      margin-bottom: 4px;
      color: var(--white);
    }
.fleet-mini-tag{
      font-size: 12px;
      color: rgba(255,255,255,0.7);
      margin-bottom: 10px;
    }
.fleet-mini-from{
      font-size: 11px;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.08em;
    }
.fleet-mini-from b{
      color: var(--white);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: -0.01em;
    }
.answer-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
.answer-card{
      background: var(--white);
      border: 1px solid var(--line);
      border-left: 4px solid var(--blue);
      border-radius: var(--radius);
      padding: 32px 36px;
      transition: all 0.2s;
    }
.answer-card:hover{
      border-color: var(--ink);
      box-shadow: 0 8px 24px rgba(11,17,23,0.08);
    }
.answer-card h3{
      font-size: 22px;
      letter-spacing: -0.02em;
      margin-bottom: 10px;
      line-height: 1.15;
    }
.answer-card p{
      font-size: 14px;
      color: var(--muted);
      line-height: 1.65;
    }
.answer-card p strong{ color: var(--ink); font-weight: 600; }
.why-layout{
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 24px;
      align-items: stretch;
    }
.why-visual{
      position: relative;
      aspect-ratio: 4/5;
      overflow: hidden;
      border-radius: var(--radius);
      min-height: 560px;
    }
.why-visual img{
      width: 100%; height: 100%;
      object-fit: cover;
    }
.why-visual-overlay{
      position: absolute; inset: 0;
      background: linear-gradient(180deg,
        rgba(5,6,7,0) 30%,
        rgba(5,6,7,0.88) 100%);
    }
.why-visual-content{
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 40px 48px;
      color: var(--white);
    }
.why-visual h3{
      font-size: 38px;
      letter-spacing: -0.035em;
      line-height: 1;
      margin-bottom: 8px;
      color: var(--white);
    }
.why-visual p{
      font-size: 15px;
      color: rgba(255,255,255,0.78);
      max-width: 360px;
    }
.why-points{
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      gap: 16px;
    }
.why-point{
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px 32px;
      transition: all 0.2s;
    }
.why-point:hover{
      border-color: var(--ink);
      transform: translateX(4px);
    }
.why-point-head{
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 10px;
    }
.why-point-num{
      width: 32px; height: 32px;
      background: var(--ink);
      color: var(--white);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px;
      font-weight: 800;
      border-radius: 50%;
      flex-shrink: 0;
    }
.why-point h4{
      font-size: 18px;
      letter-spacing: -0.02em;
    }
.why-point p{
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6;
    }
.watch-layout{
      display: grid;
      grid-template-columns: 1.3fr 0.7fr;
      gap: 16px;
    }
.watch-main{
      position: relative;
      aspect-ratio: 16/10;
      overflow: hidden;
      border-radius: var(--radius);
      cursor: pointer;
      transition: transform 0.3s;
    }
.watch-main:hover{ transform: translateY(-3px); }
.watch-main img{
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s;
    }
.watch-main:hover img{ transform: scale(1.04); }
.watch-main-overlay{
      position: absolute; inset: 0;
      background: linear-gradient(180deg,
        rgba(5,6,7,0) 40%,
        rgba(5,6,7,0.88) 100%);
    }
.watch-play{
      position: absolute;
      top: 32px;
      left: 32px;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--red);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s;
    }
.watch-main:hover .watch-play{ transform: scale(1.1); background: var(--white); color: var(--red); }
.watch-play svg{ width: 24px; height: 24px; fill: currentColor; margin-left: 3px; color: var(--white); }
.watch-main:hover .watch-play svg{ color: var(--red); }
.watch-main-content{
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 36px 40px;
      color: var(--white);
    }
.watch-main-meta{
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 12px;
    }
.watch-main h3{
      font-size: clamp(28px, 3vw, 44px);
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 12px;
      color: var(--white);
    }
.watch-main p{
      font-size: 15px;
      color: rgba(255,255,255,0.75);
      max-width: 480px;
    }
.watch-stack{
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 16px;
    }
.watch-card{
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      cursor: pointer;
      transition: transform 0.3s;
    }
.watch-card:hover{ transform: translateY(-3px); }
.watch-card img{
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s;
    }
.watch-card:hover img{ transform: scale(1.04); }
.watch-card-overlay{
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(5,6,7,0.1) 0%, rgba(5,6,7,0.85) 100%);
    }
.watch-card-content{
      position: absolute;
      inset: 0;
      padding: 22px 26px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: var(--white);
    }
.watch-card-play{
      position: absolute;
      top: 22px;
      right: 22px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
    }
.watch-card-play svg{ width: 14px; height: 14px; fill: white; margin-left: 2px; }
.watch-card-meta{
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      margin-bottom: 8px;
    }
.watch-card h4{
      font-size: 20px;
      letter-spacing: -0.02em;
      line-height: 1.1;
      color: var(--white);
    }
.stories-grid{
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 16px;
    }
.story-large{
      position: relative;
      aspect-ratio: 4/5;
      overflow: hidden;
      border-radius: var(--radius);
      cursor: pointer;
      min-height: 560px;
    }
.story-large img,.story-small img{
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s;
    }
.story-large:hover img,.story-small:hover img{ transform: scale(1.04); }
.story-overlay{
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(5,6,7,0.05) 30%, rgba(5,6,7,0.9) 100%);
    }
.story-content{
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 36px 40px;
      color: var(--white);
    }
.story-small .story-content{ padding: 26px 28px; }
.story-meta{
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      margin-bottom: 12px;
    }
.story-meta .tag{ color: var(--red); margin-right: 8px; }
.story-large h3{
      font-size: clamp(32px, 3.5vw, 48px);
      letter-spacing: -0.035em;
      line-height: 1;
      margin-bottom: 12px;
      color: var(--white);
    }
.story-small h3{
      font-size: 22px;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 8px;
      color: var(--white);
    }
.story-large p{
      font-size: 14px;
      color: rgba(255,255,255,0.78);
      max-width: 440px;
    }
.story-small p{
      font-size: 13px;
      color: rgba(255,255,255,0.72);
    }
.stories-stack{
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 16px;
    }
.story-small{
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      cursor: pointer;
      min-height: 270px;
    }
.compare-layout{
      display: grid;
      grid-template-columns: 1.4fr 0.6fr;
      gap: 16px;
    }
.compare-table-wrap{
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }
.compare-row{
      display: grid;
      grid-template-columns: 1.2fr 1.8fr 0.8fr 1fr;
      gap: 20px;
      padding: 20px 24px;
      border-bottom: 1px solid var(--line);
      align-items: center;
    }
.compare-row:last-child{ border-bottom: none; }
.compare-row.header{
      background: var(--ink);
      color: var(--white);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
.compare-row:hover:not(.header){ background: var(--soft); }
.compare-model{
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-decoration: none;
      color: var(--ink);
    }
.compare-model:hover{ color: var(--red); }
.compare-cell{
      font-size: 14px;
      color: var(--muted);
    }
.compare-cell.size{ font-weight: 600; color: var(--ink); }
.compare-answer{
      background: var(--ink);
      color: var(--white);
      border-radius: var(--radius);
      padding: 36px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
.compare-answer h3{
      font-size: 28px;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 14px;
      color: var(--white);
    }
.compare-answer p{
      font-size: 14px;
      color: rgba(255,255,255,0.7);
      line-height: 1.6;
      margin-bottom: 24px;
    }
.faq-list{
      max-width: 920px;
      margin: 0 auto;
    }
.faq-item{
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 10px;
      transition: border-color 0.2s;
    }
.faq-item.open{ border-color: var(--ink); }
.faq-q{
      width: 100%;
      padding: 24px 28px;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      text-align: left;
      font-family: var(--font);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--ink);
    }
.faq-q:hover{ color: var(--red); }
.faq-item.open .faq-q{ color: var(--red); }
.faq-icon{
      width: 28px; height: 28px;
      border: 1.5px solid currentColor;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
      transition: transform 0.3s;
    }
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-a{
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s;
      padding: 0 28px;
    }
.faq-item.open .faq-a{
      max-height: 400px;
      padding: 0 28px 24px;
    }
.faq-a p{
      font-size: 15px;
      color: var(--muted);
      line-height: 1.7;
    }
.faq-a p strong{ color: var(--ink); }
.faq-a a{ color: var(--red); font-weight: 600; }
.build-layout{
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 56px;
      align-items: start;
    }
.build-copy{
      position: sticky;
      top: 100px;
    }
.build-copy h2{ color: var(--white); margin-bottom: 18px; }
.build-steps{
      margin-top: 32px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
.build-step{
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--line-dark);
      border-radius: var(--radius);
      padding: 14px 16px;
    }
.build-step small{
      display: block;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 4px;
    }
.build-step span{
      font-size: 13px;
      font-weight: 600;
      color: var(--white);
    }
.form-card{
      background: var(--white);
      border-radius: var(--radius);
      padding: 40px;
      color: var(--ink);
    }
.form-head{
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 32px;
    }
.form-head small{
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--blue);
    }
.form-head h3{
      font-size: 28px;
      letter-spacing: -0.03em;
      margin-top: 4px;
    }
.form-step{
      margin-bottom: 24px;
    }
.form-step-label{
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 10px;
    }
.choices{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
.choice{
      background: var(--white);
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      padding: 14px 16px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      transition: all 0.15s;
    }
.choice:hover{ border-color: var(--ink); }
.choice.selected{
      background: var(--red);
      border-color: var(--red);
      color: var(--white);
    }
.form-row{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
.form-field{ margin-bottom: 12px; }
.form-field input,.form-field select,.form-field textarea{
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      font-family: var(--font);
      font-size: 14px;
      background: var(--white);
      color: var(--ink);
      outline: none;
      transition: border-color 0.2s;
      -webkit-appearance: none;
    }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(0,87,168,0.1);
    }
.form-field label{
      display: block;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }
.form-consent{
      font-size: 11px;
      color: var(--muted);
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-top: 16px;
      margin-bottom: 16px;
      line-height: 1.5;
    }
.form-consent input{ margin-top: 3px; accent-color: var(--blue); }
.form-consent a{ color: var(--blue); }
.form-submit{
      width: 100%;
      padding: 16px;
      background: var(--ink);
      color: var(--white);
      border: none;
      border-radius: var(--radius);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
    }
.form-submit:hover{ background: var(--red); }
.service-card{
      position: relative;
      min-height: 460px;
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      color: var(--white);
    }
.service-card img{
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
.service-overlay{
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(5,6,7,0.1) 0%, rgba(5,6,7,0.88) 100%);
    }
.service-content{
      position: relative;
      padding: 48px 56px;
      max-width: 720px;
    }
.service-content h2{ color: var(--white); margin-bottom: 16px; }
.service-content p{
      font-size: 16px;
      color: rgba(255,255,255,0.78);
      margin-bottom: 28px;
      line-height: 1.65;
    }
.service-features{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 32px;
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,0.15);
    }
.service-feature{
      font-size: 13px;
      color: rgba(255,255,255,0.85);
    }
.service-feature b{
      display: block;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 4px;
      color: var(--white);
    }
.partners{
      padding: 48px 0;
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
.partners-label{
      text-align: center;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 28px;
    }
.partners-row{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 48px;
      flex-wrap: wrap;
    }
.partner{
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -0.015em;
      color: var(--muted);
      transition: color 0.2s;
    }
.partner:hover{ color: var(--ink); }
footer{
      background: var(--black);
      color: var(--white);
      padding: 80px 0 40px;
    }
.footer-top{
      display: grid;
      grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 56px;
      border-bottom: 1px solid var(--line-dark);
    }
.footer-brand p{
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      line-height: 1.7;
      margin: 20px 0 24px;
      max-width: 340px;
    }
.footer-social{
      display: flex;
      gap: 10px;
    }
.footer-social a{
      width: 36px; height: 36px;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      font-size: 12px;
      font-weight: 700;
      transition: all 0.2s;
    }
.footer-social a:hover{
      border-color: var(--red);
      color: var(--red);
    }
.footer-col h4{
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 20px;
    }
.footer-col ul{
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }
.footer-col a{
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      transition: color 0.2s;
    }
.footer-col a:hover{ color: var(--white); }
.footer-bottom{
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }
.footer-bottom p,.footer-bottom a{
      font-size: 11px;
      color: rgba(255,255,255,0.3);
      text-decoration: none;
    }
.footer-bottom a:hover{ color: rgba(255,255,255,0.6); }
.footer-legal{
      display: flex;
      gap: 20px;
    }
.sticky-cta{
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      z-index: 90;
      background: var(--white);
      border-top: 1px solid var(--line);
      padding: 12px 16px;
      gap: 10px;
      box-shadow: 0 -8px 24px rgba(11,17,23,0.1);
    }
.sticky-cta a{ flex: 1; min-height: 44px; }
.reveal{
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
.reveal.visible{ opacity: 1; transform: translateY(0); }
@media (max-width: 1100px){
.footer-top{ grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer-brand{ grid-column: span 4; }
.build-layout{ grid-template-columns: 1fr; gap: 32px; }
.build-copy{ position: static; }
}
@media (max-width: 1024px){
section{ padding: 72px 0; }
.wrap{ padding: 0 24px; }
h1{ font-size: clamp(40px, 8vw, 64px); }
h2{ font-size: clamp(32px, 6vw, 48px); }
.hero-content{ padding-left: 24px; padding-right: 24px; padding-top: 60px; }
.hero-overlay{ background: linear-gradient(180deg, rgba(5,6,7,0.5) 0%, rgba(5,6,7,0.9) 70%); }
.paths-grid{ grid-template-columns: 1fr 1fr; }
.path-card{ aspect-ratio: 4/3; }
.path-card h3{ font-size: 26px; }
.path-card p{ font-size: 13px; }
.path-card .path-content{ padding: 24px 26px; }
.fleet-hero{ aspect-ratio: 4/5; }
.fleet-hero-content{ padding: 32px; }
.fleet-split{ grid-template-columns: 1fr; }
.fleet-quad{ grid-template-columns: 1fr 1fr; }
.answer-grid{ grid-template-columns: 1fr; }
.why-layout{ grid-template-columns: 1fr; }
.why-visual{ min-height: 400px; }
.watch-layout{ grid-template-columns: 1fr; }
.watch-stack{ grid-template-columns: 1fr 1fr; grid-template-rows: none; }
.stories-grid{ grid-template-columns: 1fr; }
.story-large{ aspect-ratio: 4/5; min-height: 480px; }
.compare-layout{ grid-template-columns: 1fr; }
.compare-row{ grid-template-columns: 1fr 1.5fr; }
.compare-row .compare-cell:nth-child(3),.compare-row .compare-cell:nth-child(4),.compare-row.header > div:nth-child(3),.compare-row.header > div:nth-child(4){ display: none; }
.service-content{ padding: 36px 28px; }
.service-features{ grid-template-columns: 1fr 1fr; }
.footer-top{ grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-brand{ grid-column: span 2; }
footer{ padding: 56px 0 24px; }
.sticky-cta{ display: flex; }
body{ padding-bottom: 76px; }
.section-head.with-cta{ grid-template-columns: 1fr; }
.section-title-row{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px){
.paths-grid{ grid-template-columns: 1fr; }
.path-card{ aspect-ratio: 4/3; }
.fleet-quad{ grid-template-columns: 1fr; }
.footer-top{ grid-template-columns: 1fr; }
.footer-brand{ grid-column: span 1; }
.hero-actions{ flex-direction: column; }
.hero-actions .btn{ width: 100%; }
.form-card{ padding: 28px 22px; }
.form-row{ grid-template-columns: 1fr; }
.watch-stack{ grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}
@media (max-width: 768px){
h1{ font-size: clamp(28px, 8vw, 42px); }
h2{ font-size: clamp(22px, 6vw, 30px); }
.container,.wrap{ padding-left: 20px; padding-right: 20px; }
.btn{ min-height: 52px; padding: 0 22px; font-size: 13px; }
button,a.btn{ min-height: 48px; }
}
.heritage-strip{
      background: var(--ink);
      color: var(--white);
      padding: 28px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
.heritage-strip-inner{
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      text-align: center;
    }
.heritage-stat{
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
.heritage-stat-num{
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--white);
    }
.heritage-stat-label{
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }
@media (max-width: 768px){
.heritage-strip{ padding: 24px 0; }
.heritage-strip-inner{ grid-template-columns: repeat(2, 1fr); gap: 20px 16px; padding: 0 20px; }
.heritage-stat-num{ font-size: 24px; }
}
.press-strip{
      background: var(--white);
      padding: 36px 0;
      border-bottom: 1px solid var(--line);
    }
.press-inner{
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      align-items: center;
      gap: 48px;
      flex-wrap: wrap;
      justify-content: center;
    }
.press-label{
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      flex-shrink: 0;
    }
.press-pubs{
      display: flex;
      gap: 36px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
.press-pub{
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--ink);
      font-style: italic;
      opacity: 0.7;
      text-decoration: none;
      transition: opacity 0.2s;
    }
.press-pub:hover{ opacity: 1; color: var(--red); }
.press-pub.placeholder{
      opacity: 0.3;
      font-weight: 600;
    }
@media (max-width: 768px){
.press-strip{ padding: 24px 0; }
.press-inner{ padding: 0 20px; gap: 16px; flex-direction: column; }
.press-pubs{ gap: 18px; font-size: 13px; }
.press-pub{ font-size: 13px; }
}
.standards{
      background: var(--soft);
      padding: 88px 0;
    }
.standards-inner{
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
    }
.standards-head{
      max-width: 720px;
      margin: 0 auto 56px;
      text-align: center;
    }
.standards-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
.standard{
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 32px 28px;
      transition: border-color 0.2s, transform 0.2s;
      position: relative;
    }
.standard:hover{
      border-color: var(--ink);
      transform: translateY(-2px);
    }
.standard-num{
      font-family: 'Inter', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: var(--red);
      margin-bottom: 16px;
      display: block;
    }
.standard-title{
      font-size: 19px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 12px;
      color: var(--ink);
    }
.standard-body{
      font-size: 14px;
      color: var(--muted);
      line-height: 1.55;
    }
@media (max-width: 1024px){
.standards-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
.standards{ padding: 56px 0; }
.standards-inner{ padding: 0 20px; }
.standards-head{ margin-bottom: 36px; }
.standards-grid{ grid-template-columns: 1fr; gap: 12px; }
.standard{ padding: 24px 22px; }
.standard-title{ font-size: 17px; }
}
.compare-home{
      background: var(--white);
      padding: 88px 0;
      border-top: 1px solid var(--line);
    }
.compare-home-inner{
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
    }
.compare-home-head{
      max-width: 720px;
      margin: 0 auto 48px;
      text-align: center;
    }
.compare-table-wrap{
      overflow-x: auto;
      border-radius: 6px;
      border: 1px solid var(--line);
    }
.compare-table{
      width: 100%;
      min-width: 700px;
      border-collapse: collapse;
      background: var(--white);
    }
.compare-table thead th{
      background: var(--ink);
      color: var(--white);
      text-align: left;
      padding: 22px 20px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.005em;
    }
.compare-table thead th:first-child{
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }
.compare-table thead th.featured{
      position: relative;
    }
.compare-table thead th.featured::before{
      content: 'NEW';
      position: absolute;
      top: 8px; right: 12px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.16em;
      background: var(--red);
      color: var(--white);
      padding: 3px 6px;
      border-radius: 2px;
    }
.compare-table tbody tr{
      border-bottom: 1px solid var(--line);
    }
.compare-table tbody tr:last-child{ border-bottom: none; }
.compare-table tbody tr:hover{ background: var(--soft); }
.compare-table tbody td{
      padding: 14px 20px;
      font-size: 14px;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
.compare-table tbody td:first-child{
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }
.compare-table tbody td.value-best{
      font-weight: 700;
      color: var(--red);
    }
.compare-home-cta{
      text-align: center;
      margin-top: 36px;
    }
@media (max-width: 768px){
.compare-home{ padding: 56px 0; }
.compare-home-inner{ padding: 0 20px; }
.compare-home-head{ margin-bottom: 32px; }
.compare-table thead th,.compare-table tbody td{ padding: 12px 14px; font-size: 13px; }
}
.testimonials{
      background: var(--ink);
      color: var(--white);
      padding: 88px 0;
    }
.testimonials-inner{
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
    }
.testimonials-head{
      max-width: 720px;
      margin: 0 auto 56px;
      text-align: center;
    }
.testimonials-head h2{ color: var(--white); }
.testimonials-head p{ color: rgba(255,255,255,0.6); margin-top: 12px; font-size: 16px; }
.testimonials-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
.testimonial{
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      padding: 36px 32px;
      position: relative;
    }
.testimonial-mark{
      position: absolute;
      top: 20px;
      left: 28px;
      font-size: 48px;
      line-height: 0.6;
      color: rgba(215,25,32,0.6);
      font-family: Georgia, serif;
      font-weight: 700;
    }
.testimonial-quote{
      font-size: 17px;
      line-height: 1.55;
      color: var(--white);
      margin-top: 20px;
      margin-bottom: 24px;
      font-weight: 400;
      font-style: italic;
    }
.testimonial-attr{
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }
.testimonial-name{
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--white);
    }
.testimonial-meta{
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      font-weight: 500;
    }
.testimonial-handle{
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      font-family: monospace;
      letter-spacing: -0.01em;
    }
.testimonial.placeholder{
      opacity: 0.4;
      border-style: dashed;
    }
.testimonial.placeholder .testimonial-quote::before{
      content: '[ Placeholder — awaiting real owner quote ]';
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: var(--red);
      text-transform: uppercase;
      margin-bottom: 12px;
    }
@media (max-width: 768px){
.testimonials{ padding: 56px 0; }
.testimonials-inner{ padding: 0 20px; }
.testimonials-head{ margin-bottom: 36px; }
.testimonials-grid{ grid-template-columns: 1fr; gap: 14px; }
.testimonial{ padding: 28px 24px; }
.testimonial-quote{ font-size: 15px; }
}
.upgrade{
      background: var(--white);
      padding: 88px 0;
      border-top: 1px solid var(--line);
    }
.upgrade-inner{
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
.upgrade-text h2{
      margin-bottom: 16px;
    }
.upgrade-text p{
      font-size: 17px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 24px;
      max-width: 520px;
    }
.upgrade-hook{
      background: #FFF5F6;
      border-left: 3px solid var(--red);
      padding: 20px 24px;
      margin-bottom: 28px;
      border-radius: 0 4px 4px 0;
    }
.upgrade-hook-label{
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 6px;
    }
.upgrade-hook-text{
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
    }
.upgrade-ctas{
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
.upgrade-listings{
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
.listing-card{
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 18px;
      background: var(--soft);
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid var(--line);
      text-decoration: none;
      color: inherit;
      transition: border-color 0.2s, transform 0.2s;
    }
.listing-card:hover{
      border-color: var(--ink);
      transform: translateY(-2px);
    }
.listing-img{
      aspect-ratio: 4/3;
      background: var(--ink);
      overflow: hidden;
    }
.listing-img img{
      width: 100%; height: 100%;
      object-fit: cover;
    }
.listing-info{
      padding: 16px 18px 16px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
.listing-tag{
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 4px;
    }
.listing-title{
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.015em;
      line-height: 1.2;
      margin-bottom: 6px;
    }
.listing-price{
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
@media (max-width: 1024px){
.upgrade-inner{ grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px){
.upgrade{ padding: 56px 0; }
.upgrade-inner{ padding: 0 20px; gap: 32px; }
.upgrade-text p{ font-size: 15px; }
.listing-card{ grid-template-columns: 110px 1fr; }
}
.visit{
      background: var(--soft);
      padding: 88px 0;
    }
.visit-inner{
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
    }
.visit-head{
      max-width: 720px;
      margin: 0 auto 56px;
      text-align: center;
    }
.visit-paths{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
.visit-path{
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 36px 32px;
      transition: border-color 0.2s, transform 0.2s;
      text-decoration: none;
      color: inherit;
      display: block;
    }
.visit-path:hover{
      border-color: var(--ink);
      transform: translateY(-2px);
    }
.visit-path-num{
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: var(--red);
      margin-bottom: 14px;
      display: block;
    }
.visit-path-title{
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 10px;
      color: var(--ink);
    }
.visit-path-body{
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 18px;
    }
.visit-path-cta{
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--red);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
.visit-reps{
      margin-top: 32px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 24px 32px;
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
.visit-reps-label{
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      flex-shrink: 0;
    }
.visit-reps-list{
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      font-size: 14px;
      color: var(--ink);
    }
.visit-reps-list span{
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
.visit-reps-list span::before{
      content: '·';
      color: var(--red);
      font-weight: 800;
    }
.visit-reps-list span:first-child::before{ display: none; }
@media (max-width: 1024px){
.visit-paths{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
.visit{ padding: 56px 0; }
.visit-inner{ padding: 0 20px; }
.visit-head{ margin-bottom: 36px; }
.visit-path{ padding: 28px 24px; }
.visit-path-title{ font-size: 18px; }
.visit-reps{ padding: 18px 22px; gap: 14px; }
.visit-reps-list{ gap: 12px; font-size: 13px; }
}
.lead-form-stepper{
      display: flex;
      gap: 4px;
      margin-bottom: 28px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }
.lead-step{
      flex: 1;
      height: 3px;
      background: var(--line);
      border-radius: 1px;
      transition: background 0.25s;
    }
.lead-step.completed{ background: var(--ink); }
.lead-step.active{ background: var(--red); }
.lead-step-label{
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }
.lead-step-title{
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 18px;
    }
.lead-step-content{
      min-height: 220px;
    }
.lead-options{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
.lead-option{
      background: var(--white);
      border: 1.5px solid var(--line);
      border-radius: 6px;
      padding: 16px 18px;
      cursor: pointer;
      transition: border-color 0.15s;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.005em;
      color: var(--ink);
      text-align: left;
    }
.lead-option:hover{ border-color: var(--ink); }
.lead-option.selected{
      border-color: var(--ink);
      border-width: 2px;
      padding: 15px 17px;
      box-shadow: inset 0 0 0 1px var(--ink);
    }
.lead-form-actions{
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      gap: 12px;
    }
.lead-form-confirm{
      text-align: center;
      padding: 28px 24px;
      background: var(--soft);
      border-radius: 6px;
      border: 1px solid var(--line);
    }
.lead-form-confirm-icon{
      width: 56px; height: 56px;
      background: var(--ink);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 26px;
      font-weight: 800;
      margin-bottom: 18px;
    }
.lead-form-confirm h3{
      font-size: 22px;
      letter-spacing: -0.02em;
      margin-bottom: 10px;
    }
.lead-form-confirm p{
      font-size: 14px;
      color: var(--muted);
      line-height: 1.55;
      max-width: 380px;
      margin: 0 auto;
    }
@media (max-width: 768px){
.lead-options{ grid-template-columns: 1fr; }
}
.hero-reel{
      position: absolute;
      bottom: 32px;
      left: 32px;
      z-index: 5;
      display: flex;
      flex-direction: column;
      gap: 0;
      pointer-events: none;
    }
.hero-reel-scene{
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--white);
      padding: 6px 0;
      position: absolute;
      opacity: 0;
      transition: opacity 0.6s;
      white-space: nowrap;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
.hero-reel-scene::before{
      content: '';
      display: inline-block;
      width: 24px;
      height: 1px;
      background: var(--red);
      vertical-align: middle;
      margin-right: 10px;
    }
.hero-reel-scene.active{ opacity: 1; }
@media (max-width: 768px){
.hero-reel{ left: 20px; bottom: 80px; }
.hero-reel-scene{ font-size: 9px; letter-spacing: 0.18em; }
}


/* ═══ BUTTONS — locked to the-one.html treatment (bold, uppercase, tracked) ═══ */
/* buttons */
.btn{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:16px 30px;border-radius:var(--radius);transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{box-shadow:0 12px 26px -10px rgba(215,25,32,.55)}
.btn-ghost{border:1px solid rgba(255,255,255,.6);color:#fff;margin-left:10px}
.btn-ink{border:1.5px solid var(--ink);color:var(--ink)}

/* ═══ CANONICAL FOOTER — namespaced (.ft), rendered after page CSS so the
   four legacy footer style generations can never restyle it ═══ */
footer.ft{background:var(--black,#050607);color:#fff;margin:0;padding:0;border:0}
footer.ft *{box-sizing:border-box}
footer.ft a{color:inherit;text-decoration:none}

.ft-in{max-width:var(--max-width);margin:0 auto;padding:clamp(48px,6vw,72px) var(--pad) clamp(34px,4vw,50px);
  display:grid;gap:38px 28px;grid-template-columns:1fr}
@media(min-width:640px){.ft-in{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.ft-in{grid-template-columns:1.15fr .72fr .72fr .82fr 1.6fr}}

/* brand block */
.ft-logo{height:26px;width:auto;display:block}
.ft-tag{margin:16px 0 0;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.62);max-width:34ch}
.ft-social{display:flex;gap:8px;margin-top:20px}
.ft-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.72);
  transition:color .18s,border-color .18s,background .18s}
.ft-social a:hover{color:#fff;border-color:var(--red);background:rgba(215,25,32,.16)}
.ft-social svg{width:17px;height:17px}

/* link columns */
.ft-col h4{margin:0 0 14px;font-size:11px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.ft-h4-gap{margin-top:26px !important}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col li{margin:0;padding:0}
.ft-col li a{display:inline-block;padding:4.5px 0;font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.78);transition:color .15s}
.ft-col li a:hover{color:#fff}
.ft-all{font-weight:700 !important;color:var(--red) !important;margin-top:6px}
.ft-all:hover{color:#ff3b42 !important}
.ft-addr{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.62);padding-top:4.5px}

/* build CTA block */
  text-transform:uppercase;color:var(--red)}
  color:rgba(255,255,255,.55);transition:color .15s}

/* bottom bar */
.ft-bottom{border-top:1px solid rgba(255,255,255,.1)}
.ft-bottom-in{max-width:var(--max-width);margin:0 auto;padding:18px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.42)}
.ft-est{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px}

@media(max-width:640px){
  .ft-in{gap:32px}
  .ft-bottom-in{justify-content:center;text-align:center}
}

/* ═══ site-wide footer contact form (2026-08-13) ═══ */
.ft-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ft-form-grid{display:grid;gap:12px;grid-template-columns:1fr}
.ft-fld{display:block}
.ft-fld>span{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:6px}
.ft-fld input,.ft-fld textarea{width:100%;padding:11px 13px;border:1px solid rgba(255,255,255,.18);
  border-radius:4px;background:rgba(255,255,255,.05);color:#fff;font-family:inherit;font-size:16px;
  line-height:1.45;transition:border-color .16s,background .16s}
.ft-fld textarea{resize:vertical;min-height:52px}
.ft-fld input::placeholder,.ft-fld textarea::placeholder{color:rgba(255,255,255,.32)}
.ft-fld input:focus,.ft-fld textarea:focus{outline:none;border-color:var(--red,#D71920);background:rgba(255,255,255,.08)}
.ft-fld-msg{margin-top:12px}
.ft-consent{display:flex;align-items:flex-start;gap:9px;margin-top:13px;
  font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.52);cursor:pointer}
.ft-consent input{margin-top:2px;flex:0 0 auto;accent-color:var(--red,#D71920)}
.ft-form-btn{margin-top:16px}
.ft-form-msg{margin:14px 0 0;font-size:13.5px;font-weight:600;color:#fff}
.ft-form-msg.err{color:#ff8a8f}
.ft-form.sent .ft-form-grid,.ft-form.sent .ft-fld-msg,
.ft-form.sent .ft-consent,.ft-form.sent .ft-form-btn{display:none}

/* --- footer form column (replaces the old "Your build starts here" CTA) ----
   Graham, Aug 13: the full-width form band under the columns read as a second
   footer. The form now lives in the last column and the two build actions sit
   in a slim band beneath, so the footer is one block. -------------------- */
.ft-formcol h4{margin:0;font-size:clamp(18px,1.9vw,21px);font-weight:800;
  letter-spacing:-.035em;color:#fff}
.ft-formcol p{margin:9px 0 16px;font-size:13px;line-height:1.6;
  color:rgba(255,255,255,.58);max-width:42ch}
.ft-formcol .ft-form-grid{grid-template-columns:1fr 1fr}
.ft-formcol .ft-fld-phone{grid-column:1 / -1}



/* portal button lives under the social icons in the brand column (Graham, Aug 13) */
.ft-brand .ft-portal{margin-top:18px;max-width:340px}
@media(max-width:1019px){.ft-brand .ft-portal{max-width:none}}

/* topic select — same metrics as the other footer fields */
.ft-fld select{width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:14px;
  color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:6px;padding:10px 11px;min-height:42px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ft-fld select:focus{outline:2px solid var(--blue);outline-offset:0}
.ft-fld select option{color:#0B1117;background:#fff}

/* ── SITE VIDEO LIGHTBOX (ecv-) — plays on-site, no new tab ── */
.ecv-open{cursor:pointer}
.ecv{position:fixed;inset:0;z-index:220;background:rgba(5,6,7,.95);display:flex;align-items:center;justify-content:center;padding:24px}
.ecv[hidden]{display:none}
.ecv-box{width:min(1120px,94vw);aspect-ratio:16/9;position:relative;border-radius:10px;overflow:hidden;background:#000}
.ecv-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ecv-x{position:absolute;top:14px;right:20px;background:none;border:0;color:#fff;font-size:38px;line-height:1;cursor:pointer;opacity:.8}
.ecv-x:hover{opacity:1}

/* auto focal points — keeps the boat in frame on cover crops.
   regenerate: python3 focal.py */
img[src="/images/19-vantage-running.webp"]{object-position:43% 56%}
img[src="/images/20240524-untitled-0565-Pano.jpeg"]{object-position:51% 65%}
img[src="/images/20250130-OLA00327.webp"]{object-position:51% 60%}
img[src="/images/20250130-OLA00384.jpg"]{object-position:49% 62%}
img[src="/images/25SuzMia480-uai-2400x1920.webp"]{object-position:55% 59%}
img[src="/images/A1_01617-scaled.webp"]{object-position:52% 62%}
img[src="/images/A1_01682-scaled.webp"]{object-position:51% 69%}
img[src="/images/A1_08835-scaled-uai-1280x1707.webp"]{object-position:53% 43%}
img[src="/images/A1_09960-scaled.webp"]{object-position:49% 66%}
img[src="/images/ACE03897.webp"]{object-position:52% 39%}
img[src="/images/Alex-Heim-21-EVO-2026-First-Splash.00_04_30_15.Still004.webp"]{object-position:50% 43%}
img[src="/images/Alex-Heim-21-EVO-2026-First-Splash.00_10_30_03.Still022-uai-2880x1920.webp"]{object-position:44% 43%}
img[src="/images/DJI_0042.jpg"]{object-position:52% 24%}
img[src="/images/DJI_0045.jpg"]{object-position:52% 59%}
img[src="/images/DJI_0179.webp"]{object-position:45% 35%}
img[src="/images/DJI_0499.webp"]{object-position:54% 65%}
img[src="/images/DJI_0605.jpg"]{object-position:59% 39%}
img[src="/images/DJI_20260219111109_0508_D.webp"]{object-position:47% 37%}
img[src="/images/DSC02864.webp"]{object-position:50% 40%}
img[src="/images/IMG_5537.webp"]{object-position:50% 60%}
img[src="/images/OLA00944.jpg"]{object-position:48% 41%}
img[src="/images/OLA02232-1.jpg"]{object-position:48% 69%}
img[src="/images/OLA03124.webp"]{object-position:47% 69%}
img[src="/images/RX100766.jpg"]{object-position:51% 63%}
img[src="/images/Sasser-Lake-X-21-EVO-Merc-250.00_05_12_14.Still002.webp"]{object-position:46% 61%}
img[src="/images/blackfly-clint.jpg"]{object-position:63% 58%}
img[src="/images/blackfly-poling.jpg"]{object-position:47% 57%}
img[src="/images/builds-mckinley-25open.jpg"]{object-position:58% 51%}
img[src="/images/ditch.webp"]{object-position:50% 42%}
img[src="/images/legacy-drift.jpg"]{object-position:48% 58%}
img[src="/images/legacy-skanu.jpg"]{object-position:45% 41%}
img[src="/images/lite-detail.jpg"]{object-position:58% 49%}
img[src="/images/lite-film-dog.jpg"]{object-position:52% 42%}
img[src="/images/lite-film-overhead.jpg"]{object-position:61% 52%}
img[src="/images/lite-flycast.jpg"]{object-position:49% 60%}
img[src="/images/lite-skinny.jpg"]{object-position:49% 60%}
img[src="/images/lite-turn.jpg"]{object-position:50% 62%}
img[src="/images/madehere-helm.jpg"]{object-position:47% 65%}
img[src="/images/madehere-running.jpg"]{object-position:50% 64%}
img[src="/images/madehere-tanner.jpg"]{object-position:50% 18%}
img[src="/images/og-default.jpg"]{object-position:43% 58%}
img[src="/images/guides/chris-nguyen.jpg"]{object-position:50% 72%}

/* TEXT-SAFE LAYOUT v3 - generated by textsafe.py. Manual control:
   _data/layout-overrides.json (side/x/y/wash/skip per image). */
.hero-slide:has(img[src="/images/19-vantage-running.webp"]) img{object-position:58% 46%}
.hero-slide:has(img[src="/images/19-vantage-running.webp"]) .hero-card{text-align:right}
.hero-slide:has(img[src="/images/19-vantage-running.webp"]) .hero-card-title,.hero-slide:has(img[src="/images/19-vantage-running.webp"]) .hero-card-copy{margin-left:auto}
.hero-slide:has(img[src="/images/19-vantage-running.webp"]) .hero-slide-overlay{background:linear-gradient(270deg,rgba(5,6,7,.78) 0%,rgba(5,6,7,.46) 26%,rgba(5,6,7,.12) 46%,rgba(5,6,7,0) 60%),linear-gradient(90deg,rgba(5,6,7,.55) 0%,rgba(5,6,7,.18) 22%,rgba(5,6,7,0) 40%),linear-gradient(180deg,rgba(5,6,7,.34),rgba(5,6,7,0) 24%,rgba(5,6,7,0) 60%,rgba(5,6,7,.68))}
.hero-slide:has(img[src="/images/19-vantage-running.webp"]) .hero-slide-overlay{filter:brightness(.9)}
.hero-slide:has(img[src="/images/A1_09960-scaled.webp"]) img{object-position:48% 65%}
.hero-slide:has(img[src="/images/A1_09960-scaled.webp"]) .hero-slide-overlay{filter:brightness(.9)}
.hero-slide:has(img[src="/images/OLA00944.jpg"]) img{object-position:30% 24%}
.hero-slide:has(img[src="/images/OLA00944.jpg"]) .hero-slide-overlay{filter:brightness(.9)}
.sk-hero:has(img[src="/images/20250130-OLA00384.jpg"])::after{background:linear-gradient(to top right,rgba(5,6,7,.72) 0%,rgba(5,6,7,.3) 32%,rgba(5,6,7,0) 58%),linear-gradient(180deg,rgba(5,6,7,.36),rgba(5,6,7,.42) 44%,rgba(5,6,7,.94))}
.sk-hero:has(img[src="/images/25SuzMia480-uai-2400x1920.webp"])::after{background:linear-gradient(to top right,rgba(5,6,7,.72) 0%,rgba(5,6,7,.3) 32%,rgba(5,6,7,0) 58%),linear-gradient(180deg,rgba(5,6,7,.36),rgba(5,6,7,.42) 44%,rgba(5,6,7,.94))}
.sk-hero:has(img[src="/images/A1_08835-scaled-uai-1280x1707.webp"])::after{background:linear-gradient(to top right,rgba(5,6,7,.72) 0%,rgba(5,6,7,.3) 32%,rgba(5,6,7,0) 58%),linear-gradient(180deg,rgba(5,6,7,.36),rgba(5,6,7,.42) 44%,rgba(5,6,7,.94))}
.sk-hero:has(img[src="/images/ACE05857.jpg"])::after{background:linear-gradient(to top right,rgba(5,6,7,.72) 0%,rgba(5,6,7,.3) 32%,rgba(5,6,7,0) 58%),linear-gradient(180deg,rgba(5,6,7,.36),rgba(5,6,7,.42) 44%,rgba(5,6,7,.94))}
.sk-hero:has(img[src="/images/DJI_0605.jpg"])::after{background:linear-gradient(to top right,rgba(5,6,7,.72) 0%,rgba(5,6,7,.3) 32%,rgba(5,6,7,0) 58%),linear-gradient(180deg,rgba(5,6,7,.36),rgba(5,6,7,.42) 44%,rgba(5,6,7,.94))}
.sk-hero:has(img[src="/images/OLA02232-1.jpg"])::after{background:linear-gradient(to top right,rgba(5,6,7,.72) 0%,rgba(5,6,7,.3) 32%,rgba(5,6,7,0) 58%),linear-gradient(180deg,rgba(5,6,7,.36),rgba(5,6,7,.42) 44%,rgba(5,6,7,.94))}
.sk-hero:has(img[src="/images/blackfly-poling.jpg"])::after{background:linear-gradient(to top right,rgba(5,6,7,.72) 0%,rgba(5,6,7,.3) 32%,rgba(5,6,7,0) 58%),linear-gradient(180deg,rgba(5,6,7,.36),rgba(5,6,7,.42) 44%,rgba(5,6,7,.94))}
.sk-hero:has(img[src="/images/madehere-running.jpg"])::after{background:linear-gradient(to top right,rgba(5,6,7,.72) 0%,rgba(5,6,7,.3) 32%,rgba(5,6,7,0) 58%),linear-gradient(180deg,rgba(5,6,7,.36),rgba(5,6,7,.42) 44%,rgba(5,6,7,.94))}
.rh-slide img[src="/images/A1_01743-scaled.webp"]{object-position:50% 62%!important}
.rh-hero:has(img[src="/images/A1_01743-scaled.webp"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/A1_01987-scaled.webp"]{object-position:50% 46%!important}
.rh-hero:has(img[src="/images/A1_01987-scaled.webp"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/A1_02517-scaled.jpg"]{object-position:50% 62%!important}
.rh-hero:has(img[src="/images/A1_02517-scaled.jpg"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/A1_09960-scaled.webp"]{object-position:50% 62%!important}
.rh-hero:has(img[src="/images/A1_09960-scaled.webp"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/Alex-Heim-21-EVO-2026-First-Splash.00_10_30_03.Still022-uai-2880x1920.webp"]{object-position:50% 38%!important}
.rh-hero:has(img[src="/images/Alex-Heim-21-EVO-2026-First-Splash.00_10_30_03.Still022-uai-2880x1920.webp"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/DSC02991.jpg"]{object-position:50% 56%!important}
.rh-hero:has(img[src="/images/DSC02991.jpg"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/IMG_5537.webp"]{object-position:50% 62%!important}
.rh-hero:has(img[src="/images/IMG_5537.webp"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/IMG_8046-uai-1404x936.jpg"]{object-position:50% 44%!important}
.rh-hero:has(img[src="/images/IMG_8046-uai-1404x936.jpg"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/ditch.webp"]{object-position:50% 38%!important}
.rh-hero:has(img[src="/images/ditch.webp"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/lite-aerial2.jpg"]{object-position:50% 38%!important}
.rh-hero:has(img[src="/images/lite-aerial2.jpg"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/lite-bow.jpg"]{object-position:50% 44%!important}
.rh-hero:has(img[src="/images/lite-bow.jpg"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/lite-marsh.jpg"]{object-position:50% 38%!important}
.rh-hero:has(img[src="/images/lite-marsh.jpg"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/lite-profile.jpg"]{object-position:50% 38%!important}
.rh-hero:has(img[src="/images/lite-profile.jpg"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/lite-skinny.jpg"]{object-position:50% 62%!important}
.rh-hero:has(img[src="/images/lite-skinny.jpg"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.rh-slide img[src="/images/lite-skyline.jpg"]{object-position:50% 62%!important}
.rh-hero:has(img[src="/images/lite-skyline.jpg"])::after{background:linear-gradient(180deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.12) 32%,rgba(5,6,7,.10) 60%,rgba(5,6,7,.8) 100%)}
.punish:has(img[src="/images/A1_01743-scaled.webp"]) img{object-position:43% 62%}
.punish:has(img[src="/images/A1_01743-scaled.webp"]) .inner{text-align:right}
.punish:has(img[src="/images/A1_01743-scaled.webp"]) .inner h2,.punish:has(img[src="/images/A1_01743-scaled.webp"]) .inner p,.punish:has(img[src="/images/A1_01743-scaled.webp"]) .inner ul{margin-left:auto}
.punish:has(img[src="/images/A1_01743-scaled.webp"])::after{background:linear-gradient(270deg,rgba(5,6,7,.88) 0%,rgba(5,6,7,.52) 55%,rgba(5,6,7,.15))}
section.hero:has(img[src="/images/DJI_0605.jpg"]) img{object-position:30% 42%}
section.hero:has(img[src="/images/DJI_0605.jpg"])::after{background:linear-gradient(to top right,rgba(5,6,7,.80) 0%,rgba(5,6,7,.34) 34%,rgba(5,6,7,0) 60%),linear-gradient(180deg,rgba(5,6,7,.30),rgba(5,6,7,.40) 42%,rgba(5,6,7,.86))}
section.hero:has(img[src="/images/DJI_0605.jpg"]) h1{max-width:11ch;font-size:clamp(40px,4.6vw,66px)}
section.hero:has(img[src="/images/DJI_0605.jpg"]) .inner p{max-width:46ch}
.mega-featured img[src="/images/A1_01743-scaled.webp"]{object-position:43% 55%}
.mega-featured img[src="/images/Alex-Heim-21-EVO-2026-First-Splash.00_10_30_03.Still022-uai-2880x1920.webp"]{object-position:44% 55%}