/* ============================================================
   CATEGORY HUBS — /center-console-boats/, /bay-boats/
   Reuses .lineup-grid / .boat-card / .cta-strip from site.css.
   ============================================================ */

.hub-h2{
  font-size:clamp(32px,4.4vw,56px); text-transform:uppercase; letter-spacing:.01em;
  margin-bottom:16px;
}

/* ---- hero: photo, left scrim, live stats ---- */
.hub-hero{ position:relative; overflow:hidden; color:#fff; background:var(--blue-deep); }
.hub-hero .media{ position:absolute; inset:0; }
.hub-hero .media img{ width:100%; height:100%; object-fit:cover; object-position:60% 50%; }
.hub-hero .scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,20,34,.92) 0%, rgba(7,20,34,.72) 45%, rgba(7,20,34,.2) 100%);
}
.hub-hero .inner{ position:relative; z-index:2; max-width:660px; padding-block:clamp(70px,10vw,140px) clamp(56px,7vw,96px); }
.hub-hero .crumb{
  font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  font-size:11px; color:rgba(255,255,255,.72); margin:0 0 14px;
}
.hub-hero .crumb a{ color:inherit; border-bottom:1px solid rgba(255,255,255,.35); }
.hub-hero .crumb a:hover{ color:#fff; }
.hub-hero h1{ color:#fff; font-size:clamp(46px,7vw,96px); text-transform:uppercase; }
.hub-hero .lede{ color:rgba(255,255,255,.88); margin:18px 0 0; max-width:56ch; }
.hub-stats{ display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:10px 34px; margin:28px 0 0; }
.hub-stats div{ border-left:2px solid var(--blue-bright); padding-left:12px; }
.hub-stats dt{ font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:rgba(255,255,255,.66); }
.hub-stats dd{ margin:2px 0 0; font-family:var(--seapro-display); font-weight:700; font-size:clamp(22px,2.4vw,30px); line-height:1.05; }
.hub-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }

/* ---- in-page navigation ---- */
.hub-toc{ position:sticky; top:var(--header-h); z-index:20; background:#fff; border-bottom:1px solid var(--line); }
.hub-toc .wrap{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-block:10px; }
.hub-toc .wrap::-webkit-scrollbar{ display:none; }
.hub-toc a{
  flex:none; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:12.5px; color:var(--ink-soft); padding:8px 14px; border-radius:30px;
}
.hub-toc a:hover{ color:var(--ink); background:var(--mist); }
.hub-models, .hub-compare, .hub-sizes, .hub-tunnel, .hub-vs, .hub-features, .hub-faq, .hub-intro{ scroll-margin-top:calc(var(--header-h) + 54px); }
.hub-group{ scroll-margin-top:calc(var(--header-h) + 54px); }

/* ---- intro: definition + why Sea Pro ---- */
.hub-two{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(30px,5vw,72px); align-items:start; }
.hub-copy p{ color:var(--ink-soft); font-size:clamp(16.5px,1.25vw,18.5px); margin:0 0 16px; max-width:68ch; }
.hub-copy p:first-of-type{ color:var(--ink); }
.hub-copy a, .hub-after a, .hub-faq .a a, .hub-size a, .hub-features a, .hub-note a, .hub-why a, .hub-vs-table a, .hub-tunnel .lede a, .hub-hero .lede a{
  color:var(--blue); border-bottom:1px solid rgba(10,78,162,.3);
}
.hub-why{ background:var(--mist); border-radius:6px; padding:clamp(24px,3vw,36px); border-top:4px solid var(--blue); }
.hub-why h3{ font-size:28px; text-transform:uppercase; margin-bottom:16px; }
.hub-why ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.hub-why li{ position:relative; padding-left:28px; color:var(--ink-soft); font-size:15.5px; line-height:1.5; }
.hub-why li::before{
  content:""; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat;
}
.hub-why li strong{ color:var(--ink); display:block; font-family:var(--head); font-size:15px; }

/* ---- models ---- */
.hub-models{ background:var(--mist); }
.hub-group + .hub-group{ margin-top:clamp(56px,7vw,90px); }
.hub-models .sec-head .lede{ max-width:52ch; margin:0; }
.hub-grid .boat-card .note{ margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--ink-soft); }

/* ---- spec comparison table ---- */
.hub-compare .lede, .hub-sizes .lede, .hub-vs .lede{ margin:0 0 28px; }
.hub-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:6px; background:#fff; -webkit-overflow-scrolling:touch; }
.hub-table-wrap:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.hub-table{ width:100%; border-collapse:collapse; font-size:15px; min-width:860px; }
.hub-table th, .hub-table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.hub-table thead th{
  font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:11.5px;
  color:var(--ink-soft); background:var(--mist); position:sticky; top:0;
}
.hub-table tbody th[scope="row"]{ font-family:var(--seapro-display); font-size:20px; font-weight:700; text-transform:uppercase; }
.hub-table tbody th[scope="row"] a:hover{ color:var(--blue); }
.hub-table th:first-child, .hub-table td:first-child{ position:sticky; left:0; background:#fff; z-index:1; box-shadow:1px 0 0 var(--line); }
.hub-table thead th:first-child{ background:var(--mist); z-index:2; }
.hub-table tr.grp th{
  font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:11.5px;
  color:var(--blue); background:var(--mist-2); position:static; box-shadow:none;
}
.hub-table tbody tr:not(.grp):hover td, .hub-table tbody tr:not(.grp):hover th{ background:#f7fafc; }
.hub-note{ font-size:13.5px; color:var(--ink-soft); margin:14px 0 0; max-width:90ch; }

/* ---- size guide ---- */
.hub-sizes{ background:linear-gradient(180deg, #fff 0%, var(--mist) 100%); }
.hub-size-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; }
.hub-size{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:26px 26px 22px; display:flex; flex-direction:column; }
.hub-size .range{
  font-family:var(--head); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12px;
  color:var(--blue); margin:0 0 8px;
}
.hub-size h3{ font-size:26px; text-transform:uppercase; margin-bottom:10px; }
.hub-size p{ margin:0 0 12px; color:var(--ink-soft); font-size:15.5px; line-height:1.55; }
.hub-size .best{ list-style:none; padding:0; margin:0 0 14px; display:grid; gap:6px; }
.hub-size .best li{ font-size:14.5px; color:var(--ink); padding-left:18px; position:relative; }
.hub-size .best li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:2px; background:var(--blue-bright); }
.hub-size .models{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-family:var(--head); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
.hub-size .models a{ border:0; color:var(--blue); }

/* ---- tunnel explainer wrapper ---- */
.hub-tunnel .lede{ margin:0 0 14px; }
.hub-tunnel .tx{ margin-top:30px; }

/* ---- type comparison ---- */
.hub-vs-table{ min-width:760px; }
.hub-vs-table td{ white-space:normal; color:var(--ink-soft); font-size:14.5px; line-height:1.45; min-width:180px; vertical-align:top; }
.hub-vs-table tbody th[scope="row"]{ font-family:var(--head); font-size:13px; letter-spacing:.06em; white-space:nowrap; vertical-align:top; }
.hub-vs-table thead th{ white-space:normal; }
.hub-after{ margin:22px 0 0; color:var(--ink-soft); max-width:80ch; }

/* ---- built the Sea Pro way ---- */
.hub-features{ background:var(--blue-deep); color:#fff; }
.hub-features .eyebrow{ color:var(--blue-bright); }
.hub-features .hub-h2{ color:#fff; margin-bottom:34px; }
.hub-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:6px; overflow:hidden; }
.hub-feature-grid article{ background:var(--blue-deep); padding:26px 26px 28px; }
.hub-feature-grid h3{ font-size:22px; text-transform:uppercase; color:#fff; margin-bottom:10px; }
.hub-feature-grid p{ margin:0; color:rgba(255,255,255,.8); font-size:15px; line-height:1.55; }
.hub-features a{ color:#fff; border-bottom-color:rgba(255,255,255,.4); }

/* ---- FAQ ---- */
.hub-faq-wrap{ display:grid; grid-template-columns:minmax(220px,.7fr) 2fr; gap:clamp(30px,5vw,72px); align-items:start; }
.hub-faq-head{ position:sticky; top:calc(var(--header-h) + 70px); }
.hub-faq-head p{ color:var(--ink-soft); }
.hub-faq-list{ border-top:1px solid var(--line); }
.hub-faq details{ border-bottom:1px solid var(--line); }
.hub-faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
}
.hub-faq summary::-webkit-details-marker{ display:none; }
.hub-faq summary h3{ font-family:var(--head); font-weight:700; font-size:clamp(17px,1.4vw,19.5px); line-height:1.3; text-transform:none; letter-spacing:0; }
.hub-faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-7px;
  background:linear-gradient(var(--blue),var(--blue)) center/14px 2px no-repeat, linear-gradient(var(--blue),var(--blue)) center/2px 14px no-repeat;
  transition:transform .2s;
}
.hub-faq details[open] summary::after{ transform:rotate(45deg); }
.hub-faq summary:hover h3{ color:var(--blue); }
.hub-faq .a{ padding:0 0 22px; color:var(--ink-soft); font-size:16px; line-height:1.65; max-width:74ch; }
.hub-faq .a p{ margin:0 0 12px; }
.hub-faq .a p:last-child{ margin-bottom:0; }
.hub-faq .a ul{ margin:0 0 12px; padding-left:20px; }

/* ---- responsive ---- */
@media (max-width:1080px){
  .hub-feature-grid{ grid-template-columns:repeat(2,1fr); }
  .hub-stats{ grid-template-columns:repeat(2,auto); }
}
@media (max-width:860px){
  .hub-two, .hub-faq-wrap{ grid-template-columns:1fr; }
  .hub-faq-head{ position:static; }
  .hub-feature-grid{ grid-template-columns:1fr; }
  .hub-hero .scrim{ background:linear-gradient(180deg, rgba(7,20,34,.55) 0%, rgba(7,20,34,.88) 70%); }
}
@media (max-width:520px){
  .hub-hero .inner{ padding-block:56px 44px; }
  .hub-stats{ gap:12px 20px; }
  .hub-actions .btn{ width:100%; justify-content:center; }
  .hub-table{ font-size:14px; }
  .hub-table th, .hub-table td{ padding:10px 12px; }
}