/* ===== Page backdrop ===== */
.fleet-hero, .personalities, .picks{
  position:relative; padding: clamp(34px, 5vw, 64px) 0;
}
.fleet-hero{
  background:
    radial-gradient(1000px 520px at 60% -10%, rgba(73,193,231,.18), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(10,120,150,.14), transparent 60%);
  overflow:hidden;
}
.fleet-hero .water-glow{
  position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(40% 30% at 70% 10%, rgba(122,227,255,.20), rgba(0,0,0,0) 60%),
    radial-gradient(30% 26% at 20% 0%, rgba(40,175,211,.14), rgba(0,0,0,0) 60%);
  animation: shimmer 7s ease-in-out infinite alternate;
}
@keyframes shimmer{ from{ filter:brightness(1) blur(6px)} to{ filter:brightness(1.25) blur(10px)} }

/* ===== Section heads reused from style.css (.sec-head already styled) ===== */

/* ===== SECTION 1: Fleet Compass ===== */
.compass-grid{
  margin-top:12px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
}
.compass-card{
  background: var(--glass); border:1px solid var(--border);
  border-radius:22px; padding:12px; transition: transform .25s ease, background .25s ease;
}
.compass-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.compass-card figure{ margin:0 }
.compass-card h3{ margin:.45rem 0 .25rem }
.compass-card p{ color:var(--ink-dim) }

/* small tilt-in motion (uses classes from home.css animations) */
.tilt{ animation: tiltIn .8s cubic-bezier(.2,.8,.2,1) both }
.delay-1{ animation-delay:.12s } .delay-2{ animation-delay:.24s }

@media (max-width: 992px){
  .compass-grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 576px){
  .compass-grid{ grid-template-columns: 1fr }
}

/* ===== SECTION 2: Hull Personalities (spec ribbons) ===== */
.personalities{
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(20,110,140,.14), transparent 60%);
}
.persona-grid{
  margin-top:12px;
  display:grid; grid-template-columns: repeat(2, 1fr); gap:16px;
}
.persona-card{
  background: var(--glass); border:1px solid var(--border);
  border-radius:22px; padding:12px;
}
.persona-fig{ margin:0 }
.ribbons{ display:grid; gap:6px; margin:.5rem 0 }
.rib{
  display:grid; grid-template-columns: 160px 1fr; align-items:center; gap:10px;
}
.rib span{ color:var(--ink-dim); font-size:.95rem }
.rib i{
  --v:70%; height:8px; width: var(--v); display:block; border-radius:999px;
  background: linear-gradient(90deg, #7ae3ff, #2fb9d9);
  box-shadow: 0 2px 8px rgba(72,193,231,.35) inset;
}
.note{ color:var(--ink-dim) }

@media (max-width: 992px){
  .persona-grid{ grid-template-columns: 1fr }
  .rib{ grid-template-columns: 130px 1fr }
}

/* ===== SECTION 3: Captain’s Picks (horizontal snap) ===== */
.picks{
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.picks-track{
  margin-top:12px;
  display:flex; gap:14px; padding:10px 16px 26px;
  overflow-x:auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  /* align with container gutters */
  --container-max: 1120px; --container-pad: 16px;
  padding-inline:
    clamp(var(--container-pad),
      calc((100vw - var(--container-max))/2 + var(--container-pad)), 10vw);
  scroll-padding-inline:
    clamp(var(--container-pad),
      calc((100vw - var(--container-max))/2 + var(--container-pad)), 10vw);
}
.pick-card{
  min-width: clamp(260px, 70vw, 360px);
  scroll-snap-align: start;
  background: var(--glass); border:1px solid var(--border);
  border-radius:22px; padding:12px; transition: transform .25s ease, background .25s ease;
}
.pick-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.pick-card figure{ margin:0 }
.ticks{ margin:.4rem 0 0; padding-left:1.1rem; color:var(--ink-dim) }
.picks-fade{
  content:""; position:relative; height:18px; margin-top:-18px;
  background: linear-gradient(180deg, rgba(5,25,35,0), rgba(5,25,35,.55));
}

/* make sure no horizontal overflow ever happens */
.compass, .compass-grid, .persona-grid, .picks-track { min-width:0 }
/* ============ SECTION 4: Trim Lab ============ */
.trim{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(73,193,231,.14), transparent 60%),
    radial-gradient(900px 480px at 0% 100%, rgba(10,120,150,.12), transparent 60%);
}
.trim-layout{ display:grid; grid-template-columns: 1fr 1.2fr; gap:16px; align-items:start; }
.trim-dial .dial{ width:100%; max-width:320px; display:block; }
.trim-note{ color:var(--ink-dim) }
.trim-tabs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
.trim-tab{
  border:1px solid var(--border); background:var(--glass); color:var(--ink);
  padding:8px 12px; border-radius:12px; cursor:pointer; transition:background .2s, transform .2s;
}
.trim-tab:hover{ background:var(--glass-2); transform:translateY(-2px) }
.trim-tab.is-active{ box-shadow: 0 6px 16px rgba(72,193,231,.35) inset }

.trim-cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
}
.trim-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.trim-card p{ color:var(--ink-dim) }

/* gauge needle rotation by state */
.trim .needle{
  transform-origin: 100px 100px;
  transition: transform .5s ease;
}
.trim[data-state="bow-low"]  .needle{ transform: rotate(-28deg); }
.trim[data-state="level"]    .needle{ transform: rotate(0deg); }
.trim[data-state="bow-high"] .needle{ transform: rotate(24deg); }

@media (max-width: 992px){
  .trim-layout{ grid-template-columns: 1fr; }
  .trim-cards{ grid-template-columns: 1fr; }
  .trim-dial .dial{ max-width:280px }
}

/* ============ SECTION 5: Comfort Matrix ============ */
.matrix{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.matrix-top{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:10px;
}
.matrix-grid{
  display:grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap:1px; background: var(--border); border-radius:16px; overflow:hidden;
}
.matrix-grid .cell{
  background: rgba(12,60,80,.35); padding:10px; min-width:0;
}
.matrix-grid .head{
  background: rgba(12,60,80,.55); font-weight:700;
}
.cell.tag{
  position:relative; border-left:1px dashed rgba(127,212,230,.25);
}
.cell.tag::after{
  content:""; position:absolute; inset:auto 10px 10px auto; width:10px; height:10px; border-radius:999px;
  background: linear-gradient(180deg, #7ae3ff, #2fb9d9);
  box-shadow: 0 2px 6px rgba(72,193,231,.35);
}
@media (max-width: 992px){
  .matrix-top{ grid-template-columns: 1fr }
  .matrix-grid{ grid-template-columns: 1fr 1fr; }
  .matrix-grid .head:nth-child(3), .matrix-grid .head:nth-child(4){ display:none }
  /* collapse columns into pairs on mobile for readability */
}

/* ============ SECTION 6: Quiet Power ============ */
.quiet{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(20,110,140,.14), transparent 60%);
}
.quiet-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:start;
}
.quiet-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.quiet-card p{ color:var(--ink-dim) }

.quiet-chart{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.fuel-chart{ width:100%; height:auto; display:block }
.fuel-line{
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  transition: stroke-dashoffset 1.8s ease;
  filter: drop-shadow(0 2px 8px rgba(72,193,231,.35));
}
.quiet.run .fuel-line{ stroke-dashoffset: 0; }
.chart-note{ color:var(--ink-dim); margin-top:6px }

@media (max-width: 992px){
  .quiet-grid{ grid-template-columns: 1fr; }
}
/* ============ SECTION 7: Deck Safety Mini ============ */
.safety{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(60,170,190,.12), transparent 60%),
    radial-gradient(900px 420px at 100% 100%, rgba(20,110,140,.12), transparent 60%);
}
.safety-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px;
}
.s-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  position:relative; overflow:hidden; transition: transform .25s ease, background .25s ease;
}
.s-card::after{
  content:""; position:absolute; inset:auto -20% 0 -20%; height:0;
  background: radial-gradient(70% 70% at 50% 100%, rgba(122,227,255,.25), transparent 70%);
  transform: translateY(10px); opacity:0; transition: opacity .35s, height .35s, transform .35s;
}
.s-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.s-card:hover::after{ height:45%; opacity:1; transform:none }
.s-card figure{ margin:0 }
.s-badges{
  display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:12px 0 0;
}
.s-badges .b{
  font-size:.9rem; color:var(--ink-dim);
  padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--glass);
}

@media (max-width: 992px){
  .safety-grid{ grid-template-columns: 1fr; }
}

/* ============ SECTION 8: Stow Paths ============ */
.stow{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(73,193,231,.14), transparent 60%);
}
.stow-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px;
}
.stow-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.stow-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.stow-card figure{ margin:0 }

/* dotted flow ribbon */
.flow-line{ position:relative; height:18px; margin-top:14px }
.flow-line::before{
  content:""; position:absolute; left:0; right:0; top:8px; height:2px;
  background-image: radial-gradient(#7ae3ff 1px, transparent 1px);
  background-size: 12px 2px; background-repeat: repeat-x;
  opacity:.8; transform: translateX(-12px);
  transition: transform 1.2s ease;
}
.flow-line .dot{
  inline-size:10px; block-size:10px; border-radius:999px; display:inline-block; margin-right:10px;
  background: linear-gradient(180deg, #7ae3ff, #2fb9d9);
  filter: drop-shadow(0 2px 6px rgba(72,193,231,.35));
  opacity:0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease;
}
.stow.run .flow-line::before{ transform: translateX(0) }
.stow.run .flow-line .dot{ opacity:1; transform:none }

@media (max-width: 992px){
  .stow-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 9: Range Windows ============ */
.range{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.range-top{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:10px;
}
.range-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px }
.range-tab{
  border:1px solid var(--border); background:var(--glass); color:var(--ink);
  padding:8px 12px; border-radius:12px; cursor:pointer; transition: background .2s, transform .2s;
}
.range-tab:hover{ background:var(--glass-2); transform:translateY(-2px) }
.range-tab.is-active{ box-shadow: 0 6px 16px rgba(72,193,231,.35) inset }

.range-chart{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.range-svg{ width:100%; height:auto; display:block }
.curve{
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  filter: drop-shadow(0 2px 8px rgba(72,193,231,.35));
  opacity:0; transition: stroke-dashoffset 1.6s ease, opacity .2s ease;
}
.range.run .curve.active{ stroke-dashoffset: 0; opacity:1 }
.range-note{ color:var(--ink-dim); margin-top:6px }

@media (max-width: 992px){
  .range-top{ grid-template-columns: 1fr }
}
/* ============ SECTION 10: Balance & Beam ============ */
.balance{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(20,110,140,.14), transparent 60%),
    radial-gradient(900px 420px at 0% 100%, rgba(73,193,231,.14), transparent 60%);
}
.balance-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:start; margin-top:12px;
}
.bal-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.bal-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.bal-card figure{ margin:0 }
.bars{ display:grid; grid-template-columns: 140px 1fr; align-items:center; gap:10px; margin-top:8px }
.bars span{ color:var(--ink-dim); font-size:.95rem }
.bars .fill{
  display:block; height:8px; border-radius:999px;
  background: linear-gradient(90deg, #7ae3ff, #2fb9d9);
  width: 0;
  box-shadow: 0 2px 8px rgba(72,193,231,.35) inset;
  transition: width 1s ease;
}
/* non-inline "levels" via classes */
.v-85 .fill{ width:85% } .v-92 .fill{ width:92% }

.arc-plot{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.arc-svg{ width:100%; height:auto; display:block }
.arc-line{
  stroke-dasharray: 480; stroke-dashoffset: 480;
  filter: drop-shadow(0 2px 8px rgba(72,193,231,.35));
  transition: stroke-dashoffset 1.6s ease;
}
.balance.run .arc-line{ stroke-dashoffset: 0; }
.arc-note{ color:var(--ink-dim); margin-top:6px }

@media (max-width: 992px){
  .balance-grid{ grid-template-columns: 1fr; }
}

/* ============ SECTION 11: Weather Read ============ */
.weather{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.weather-top{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:10px;
}
.weather-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px }
.w-tab{
  border:1px solid var(--border); background:var(--glass); color:var(--ink);
  padding:8px 12px; border-radius:12px; cursor:pointer; transition: background .2s, transform .2s;
}
.w-tab:hover{ background:var(--glass-2); transform: translateY(-2px) }
.w-tab.is-active{ box-shadow: 0 6px 16px rgba(72,193,231,.35) inset }

.w-gauge{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.w-svg{ width:100%; height:auto; display:block }
.w-needle{ transform-origin: 110px 110px; transition: transform .6s ease }
.weather[data-mode="morning"]  .w-needle{ transform: rotate(-25deg) }
.weather[data-mode="noon"]     .w-needle{ transform: rotate(5deg) }
.weather[data-mode="monsoon"]  .w-needle{ transform: rotate(25deg) }
/* Swell bars height per mode (no inline styles) */
.weather .swell .b1, .weather .swell .b2, .weather .swell .b3{ transform-origin: center; transition: transform .6s ease }
.weather[data-mode="morning"]  .swell .b1{ transform: scaleY(1.00) }
.weather[data-mode="morning"]  .swell .b2{ transform: scaleY(0.50) }
.weather[data-mode="morning"]  .swell .b3{ transform: scaleY(0.35) }
.weather[data-mode="noon"]     .swell .b1{ transform: scaleY(0.85) }
.weather[data-mode="noon"]     .swell .b2{ transform: scaleY(0.75) }
.weather[data-mode="noon"]     .swell .b3{ transform: scaleY(0.55) }
.weather[data-mode="monsoon"]  .swell .b1{ transform: scaleY(0.70) }
.weather[data-mode="monsoon"]  .swell .b2{ transform: scaleY(0.90) }
.weather[data-mode="monsoon"]  .swell .b3{ transform: scaleY(0.85) }
.w-note{ color:var(--ink-dim); margin-top:6px }

@media (max-width: 992px){
  .weather-top{ grid-template-columns: 1fr; }
}

/* ============ SECTION 12: Edge Gear ============ */
.gear{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 0% 100%, rgba(20,110,140,.14), transparent 60%);
}
.gear-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-top:12px;
}
.gear-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.gear-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.gear-card figure{ margin:0 }

@media (max-width: 992px){
  .gear-grid{ grid-template-columns: 1fr }
}
/* ============ SECTION 13: Fuel Windows ============ */
.fuelwin{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.fuelwin-top{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:10px;
}
.fuelwin-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px }
.f-tab{
  border:1px solid var(--border); background:var(--glass); color:var(--ink);
  padding:8px 12px; border-radius:12px; cursor:pointer; transition: background .2s, transform .2s;
}
.f-tab:hover{ background:var(--glass-2); transform: translateY(-2px) }
.f-tab.is-active{ box-shadow: 0 6px 16px rgba(72,193,231,.35) inset }

.fuelwin-chart{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.fuelwin-svg{ width:100%; height:auto; display:block }
.fw-curve{
  stroke-dasharray: 520; stroke-dashoffset: 520; opacity:0;
  filter: drop-shadow(0 2px 8px rgba(72,193,231,.35));
  transition: stroke-dashoffset 1.6s ease, opacity .25s ease;
}
.fuelwin.run .fw-curve.active{ stroke-dashoffset: 0; opacity:1 }
.fuelwin-note{ color:var(--ink-dim); margin-top:6px }

@media (max-width: 992px){
  .fuelwin-top{ grid-template-columns: 1fr }
}

/* ============ SECTION 14: Skipper Profiles v2 ============ */
.crew2{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(73,193,231,.14), transparent 60%);
}
.crew2-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:12px;
}
.crew2-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.crew2-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.crew2-card figure{ margin:0 }
.crew2-card .tags{ display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:.35rem 0 .5rem; list-style:none }
.crew2-card .tags li{
  font-size:.9rem; color:var(--ink-dim); padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--glass);
}
.crew2-card .blurb{ color:var(--ink-dim) }
.mono-only .mono{
  inline-size:48px; block-size:48px; border-radius:999px; display:grid; place-items:center;
  background: radial-gradient(100% 100% at 30% 20%, #77e3ff 0%, #28afd3 45%, #0b4565 100%);
  color:#041c27; font-weight:800; margin-bottom:8px; box-shadow: var(--shadow-soft);
}

@media (max-width: 992px){
  .crew2-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 576px){
  .crew2-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 15: Checklist Tape ============ */
.checklist{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 0% 100%, rgba(20,110,140,.14), transparent 60%);
}
.check-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px;
}
.check-card{
  position:relative; background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.check-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.check-card .tape{
  position:absolute; left:18px; top:-10px; width:86px; height:24px; border-radius:6px;
  background: linear-gradient(180deg, rgba(122,227,255,.6), rgba(40,175,211,.6));
  box-shadow: 0 6px 16px rgba(72,193,231,.35);
  transform: rotate(-6deg);
}
.check-card figure{ margin:.4rem 0 0 }
.ticks{ margin:.5rem 0 0 1.1rem; color:var(--ink-dim) }

@media (max-width: 992px){
  .check-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 16: Rig & Lines ============ */
.rig{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.rig-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:start; margin-top:12px;
}
.rig-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.rope-plot{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.rope-svg{ width:100%; height:auto; display:block }
.rope{
  stroke-dasharray: 520; stroke-dashoffset: 520;
  filter: drop-shadow(0 2px 8px rgba(72,193,231,.35));
  transition: stroke-dashoffset 1.6s ease;
}
.rig.run .rope{ stroke-dashoffset: 0; }
.rope-note{ color:var(--ink-dim); margin-top:6px }

@media (max-width: 992px){
  .rig-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 17: Fleet CTA ============ */
.fleet-cta{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(73,193,231,.14), transparent 60%);
}
.cta-wrap{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:center; margin-top:12px;
}
.cta-copy h2{
  font-family: PlayfairLocal, serif;
  font-size: clamp(28px, 4vw, 40px); margin:.1rem 0 .35rem;
}
.cta-fig{ margin:0; justify-self:end }
.fleet-cta .btn{ --bpad: 12px 16px }

@media (max-width: 992px){
  .cta-wrap{ grid-template-columns: 1fr }
  .cta-fig{ justify-self:start }
}
/* ribbon bar base уже есть:
.rib i{
  --v:70%;
  height:8px; width: var(--v); display:block; border-radius:999px;
  background: linear-gradient(90deg, #7ae3ff, #2fb9d9);
  box-shadow: 0 2px 8px rgba(72,193,231,.35) inset;
}
*/

/* Без инлайнов: утилити-классы для значений */
.w-70{ --v:70% } .w-74{ --v:74% } .w-80{ --v:80% }
.w-82{ --v:82% } .w-86{ --v:86% } .w-88{ --v:88% } .w-90{ --v:90% }