/* model-page specifics */
  /* Match site.css: subtract the in-flow sticky header so the bottom-aligned
     CTA stays above the fold. */
  .model-hero{ min-height:calc(100svh - var(--header-h)); }
  .model-hero h1{ font-size:clamp(54px,9vw,140px); }
  .model-hero .crumb{ color:rgba(255,255,255,.75); font-family:var(--head); text-transform:uppercase; letter-spacing:.16em; font-size:12px; margin-bottom:18px; }
  .model-hero .crumb a{ color:#fff; }

  .statbar{ background:var(--ink); color:#fff; }
  .statbar .row{ display:grid; grid-template-columns:repeat(4,1fr); }
  .statbar .stat{ padding:30px 24px; border-left:1px solid rgba(255,255,255,.12); text-align:center; }
  .statbar .stat:first-child{ border-left:none; }
  .statbar .stat .v{ font-family:var(--seapro-display); font-size:clamp(30px,3.4vw,46px); line-height:1; color:#fff; }
  .statbar .stat .v small{ font-size:.5em; }
  .statbar .stat .k{ font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; color:var(--blue-bright); margin-top:8px; }

  .specs-split{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
  .specs-split .profile{ background:radial-gradient(120% 120% at 50% 30%,#fff,var(--mist) 80%); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
  .specs-split .profile img{ width:100%; object-fit:contain; mix-blend-mode:multiply; }
  /* Base vs R — Seakeeper Ride section (R models only, below Power) */
  .r-equation{ display:flex; align-items:stretch; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:40px; }
  .re-item{ flex:1; min-width:180px; max-width:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:34px 24px; border:1px solid var(--line); border-radius:10px; background:var(--mist); }
  .re-item .re-num{ font-family:var(--seapro-display); font-size:clamp(38px,5vw,60px); line-height:.9; }
  .re-item .re-lbl{ font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--ink-soft); }
  .re-item.re-r{ background:var(--blue-deep); border-color:var(--blue-deep); }
  .re-item.re-r .re-num{ color:#fff; }
  .re-item.re-r .re-lbl{ color:var(--blue-bright); }
  .re-item.re-ride{ background:#fff; }
  .re-item.re-ride img{ width:100%; max-width:210px; height:auto; }
  .re-op{ display:flex; align-items:center; font-family:var(--seapro-display); font-size:40px; color:var(--accent); }

  .ride-card{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(28px,5vw,56px); align-items:center; margin-top:30px; padding:clamp(30px,4vw,48px); border:1px solid var(--line); border-radius:12px; background:#fff; }
  .ride-card h3{ font-family:var(--seapro-display); font-size:clamp(24px,2.6vw,34px); text-transform:uppercase; margin:0 0 14px; }
  .ride-card p{ margin:0; color:var(--ink-soft); font-size:clamp(16px,1.4vw,18.5px); max-width:60ch; }
  .ride-stat{ text-align:center; padding:30px 20px; background:var(--mist); border-radius:10px; }
  .ride-stat b{ display:block; font-family:var(--seapro-display); font-size:clamp(56px,8vw,96px); line-height:.9; color:var(--accent); }
  .ride-stat span{ display:block; margin-top:10px; font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; font-size:12.5px; color:var(--ink-soft); }

  @media (max-width:760px){
    .ride-card{ grid-template-columns:1fr; }
    .re-op{ font-size:30px; }
  }

  .spec-list{ list-style:none; padding:0; margin:24px 0 0; }
  .spec-list li{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:15.5px; }
  .spec-list li span:first-child{ color:var(--ink-soft); }
  .spec-list li b{ font-family:var(--head); font-weight:600; }
  .height-note{ display:flex; gap:24px; margin-top:22px; flex-wrap:wrap; }
  .height-note div{ background:var(--mist); border-radius:var(--radius); padding:14px 18px; }
  .height-note .v{ font-family:var(--seapro-display); font-size:24px; }
  .height-note .k{ font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--ink-soft); }

  /* offshore series comparison */
  .series{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .scard{ border:1px solid var(--line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; background:#fff; transition:transform .2s, box-shadow .2s, border-color .2s; }
  .scard:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
  .scard.active{ border-color:var(--accent); box-shadow:var(--shadow); }
  .scard .ph{ aspect-ratio:16/10; background:radial-gradient(120% 120% at 50% 18%,#fff,var(--mist) 82%); position:relative; overflow:hidden; }
  /* Absolute + cover so every card fills edge-to-edge with the photo centered
     — the old flex + 100%/100% contain sizing mis-centered in Safari. */
  .scard .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
  .scard .tag{ position:absolute; top:12px; left:12px; z-index:1; font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:10px; padding:5px 11px; border-radius:30px; background:#fff; color:var(--ink-soft); box-shadow:var(--shadow-sm); }
  .scard.active .tag{ background:var(--accent); color:#fff; }
  .scard .sbody{ padding:20px 22px 24px; border-top:1px solid var(--line); display:flex; flex-direction:column; flex:1; }
  .scard .sbody h3{ font-family:var(--seapro-display); font-size:30px; text-transform:uppercase; }
  .scard .srow{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-soft); }
  .scard .srow b{ color:var(--ink); font-family:var(--head); font-weight:600; }
  .scard .sfoot{ margin-top:auto; padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .scard .price small{ display:block; font-family:var(--head); font-size:10.5px; color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase; margin-bottom:2px; }
  .scard .price b{ font-family:var(--seapro-display); font-size:22px; }
  .scard .sfoot .link-arrow{ font-size:12px; }

  .full-specs{ margin-top:44px; }
  .full-specs .fs-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
  .full-specs h4{ font-family:var(--seapro-display); font-size:26px; text-transform:uppercase; }
  .fs-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0 1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
  .fs-grid .fi{ background:#fff; padding:18px 20px; }
  /* The grid's grey background shows through any unfilled cells in the final
     row — stretch the last cell over the remainder so no gap is left. The
     nth-child terms encode "position within a 5-column row". */
  .fs-grid .fi:last-child:nth-child(5n+1){ grid-column:span 5; }
  .fs-grid .fi:last-child:nth-child(5n+2){ grid-column:span 4; }
  .fs-grid .fi:last-child:nth-child(5n+3){ grid-column:span 3; }
  .fs-grid .fi:last-child:nth-child(5n+4){ grid-column:span 2; }
  .fs-grid .fi .k{ font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; color:var(--ink-soft); }
  .fs-grid .fi .v{ font-family:var(--seapro-display); font-size:24px; line-height:1; margin-top:7px; }

  .feat-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
  .feat-cols h4{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:15px; color:var(--accent); margin:0 0 14px; padding-bottom:12px; border-bottom:2px solid var(--line); }
  .feat-cols ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
  .feat-cols li{ font-size:14.5px; color:var(--ink-soft); padding-left:18px; position:relative; }
  .feat-cols li::before{ content:'›'; position:absolute; left:0; color:var(--accent); font-weight:700; }

  .opt-block{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
  .opt-block h4{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:13px; margin:0 0 18px; }
  .sw-row{ display:flex; flex-wrap:wrap; gap:14px; }
  .sw-chip{ text-align:center; width:74px; }
  .sw-chip .dot{ width:64px; height:64px; border-radius:50%; border:1px solid var(--line); box-shadow:var(--shadow-sm); margin:0 auto 8px; }
  .sw-chip .lbl{ font-size:11.5px; color:var(--ink-soft); font-family:var(--head); text-transform:uppercase; letter-spacing:.05em; }

  .gallery{ columns:3; column-gap:16px; }
  .gallery a{ display:block; margin-bottom:16px; border-radius:var(--radius); overflow:hidden; break-inside:avoid; }
  .gallery img{ width:100%; transition:transform .4s; }
  .gallery a:hover img{ transform:scale(1.04); }

  .pricing{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .price-card{ border:1px solid var(--line); border-radius:8px; padding:34px; }
  .price-card.feature{ background:var(--blue-deep); color:#fff; border-color:var(--blue-deep); }
  .price-card .tier{ font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--accent); }
  .price-card.feature .tier{ color:var(--blue-bright); }
  .price-card .amt{ font-family:var(--seapro-display); font-size:clamp(44px,5vw,64px); line-height:1; margin:10px 0 18px; }
  .price-card ul{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; }
  .price-card li{ font-size:15px; padding-left:22px; position:relative; }
  .price-card li::before{ content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700; }
  .price-card.feature li::before{ color:var(--blue-bright); }

  @media (max-width:980px){
    .statbar .row{ grid-template-columns:1fr 1fr; }
    .statbar .stat:nth-child(3){ border-left:none; }
    .feat-cols{ grid-template-columns:1fr 1fr; }
    .specs-split, .opt-block, .pricing{ grid-template-columns:1fr; }
    .series{ grid-template-columns:1fr 1fr; }
    .fs-grid{ grid-template-columns:1fr 1fr; }
    /* Re-derive the last-cell stretch for the 2-column layout (the extra
       :nth-child(n) matches the desktop rules' specificity). */
    .fs-grid .fi:last-child:nth-child(n){ grid-column:auto; }
    .fs-grid .fi:last-child:nth-child(2n+1){ grid-column:span 2; }
    .gallery{ columns:2; }
  }
  @media (max-width:560px){
    .feat-cols{ grid-template-columns:1fr; }
    .gallery{ columns:1; }
    .statbar .row{ grid-template-columns:1fr 1fr; }
    .series{ grid-template-columns:1fr; }
  }

  /* ---- Sport vs DLX: comparison table + trim toggle ---- */
  /* The segmented control. Repeated above each feature list; all copies stay
     in sync because one click updates every [data-set-trim] on the page. */
  .seg{ display:inline-flex; background:var(--mist); border-radius:40px; padding:4px; }
  .seg button{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:13px; border:none; background:transparent; color:var(--ink-soft); padding:9px 26px; border-radius:40px; cursor:pointer; transition:.18s; }
  .seg button.active{ background:var(--blue-deep); color:#fff; box-shadow:var(--shadow-sm); }

  /* Standard-features trims are stacked in one grid cell so the wrapper is
     always as tall as the tallest trim — toggling swaps which panel is visible
     without changing height, so nothing below the toggle jumps. */
  .trim-panels{ display:grid; }
  .trim-panels > .trim-panel{ grid-area:1 / 1; }
  .trim-panel{ visibility:hidden; }
  .trim-panel.is-active{ visibility:visible; }
  .trim-name{ color:var(--blue); display:inline-block; }
  /* Swap the trim name without changing width: all names share one grid cell,
     so the element is always as wide as the longest — the heading never reflows
     (a longer name would otherwise wrap the flex .sec-head and jump the page). */
  .trim-name-stack{ display:inline-grid; text-align:left; vertical-align:baseline; }
  .trim-name-stack > span{ grid-area:1 / 1; visibility:hidden; }
  .trim-name-stack > span.is-active{ visibility:visible; }

  /* Optional list: a single list, no swap. A row already standard on the trim
     you're viewing dims (it's included, not an add-on); its chip stays lit. */
  #optional li.is-dimmed{ opacity:.42; }
  #optional li.is-dimmed .trim-chip{ opacity:1; }
  .trim-chip{ display:inline-block; font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:9.5px; background:var(--mist-2); color:var(--blue); border-radius:20px; padding:2px 9px; margin-left:6px; vertical-align:1px; white-space:nowrap; }
  .viewing-note{ font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--ink-soft); margin:0 0 14px; }
  .viewing-note b{ color:var(--blue); }

  .trim-compare{ margin-top:44px; }
  .tc-grid{ display:grid; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
  .tc-head{ padding:30px 28px 26px; display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:.18s; }
  .tc-head .trim{ font-family:var(--seapro-display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,3.2vw,44px); line-height:1; }
  .tc-head .for{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; color:var(--accent); }
  .tc-head .blurb{ font-size:14.5px; color:var(--ink-soft); margin:4px 0 0; }
  /* The top trim reads as the step up, in the deep-blue column. */
  .tc-head.tc-top{ background:var(--blue-deep); color:#fff; }
  .tc-head.tc-top .for{ color:var(--blue-bright); }
  .tc-head.tc-top .blurb{ color:rgba(255,255,255,.78); }
  .tc-head.is-active{ box-shadow:inset 0 4px 0 var(--blue); }
  .tc-head.tc-top.is-active{ box-shadow:inset 0 4px 0 var(--blue-bright); }

  .tc-corner{ padding:30px 24px; display:flex; align-items:flex-end; background:var(--mist); }
  .tc-corner span{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--ink-soft); }
  .tc-grid > div{ border-top:1px solid var(--line); }
  .tc-grid > .tc-corner, .tc-grid > .tc-head{ border-top:none; }
  .tc-k{ padding:17px 24px; font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--ink-soft); background:var(--mist); display:flex; align-items:center; }
  .tc-v{ padding:17px 28px; font-size:15px; display:flex; align-items:center; gap:10px; }
  .tc-v.tc-top{ background:var(--mist-2); font-weight:600; box-shadow:inset 3px 0 0 var(--blue); }
  .tc-foot{ padding:22px 28px 26px; display:flex; flex-direction:column; align-items:stretch; gap:14px; }
  .tc-foot.tc-top{ background:var(--mist-2); box-shadow:inset 3px 0 0 var(--blue); }
  .tc-foot .btn{ width:100%; justify-content:center; padding:14px 20px; }
  .tc-price{ display:flex; align-items:baseline; gap:8px; }
  .tc-price small{ font-family:var(--head); text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; color:var(--ink-soft); }
  .tc-price b{ font-family:var(--seapro-display); font-size:24px; }

  @media (max-width:760px){
    /* Stack to one row of trim columns; the row label spans them. minmax(0,1fr)
       (not 1fr) so a long unbreakable option name can't push the track wider
       than the phone — .tc-grid clips its overflow, so that silently hides copy. */
    .tc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .tc-v, .tc-head .blurb{ overflow-wrap:anywhere; }
    .tc-corner{ display:none; }
    .tc-k{ grid-column:1/-1; padding:12px 20px 10px; }
    .tc-v{ padding:14px 20px 16px; align-items:flex-start; font-size:14px; }
    .tc-head{ padding:24px 20px; }
    .tc-foot{ padding:18px 20px 22px; }
  }