/* ============================================================
   SEA PRO — Website Refresh
   Design system: clean & bright, Sea Pro blue, condensed sporty type
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800&family=Saira:wght@500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root{
  /* brand */
  --blue:        #0a4ea2;   /* Sea Pro blue */
  --blue-deep:   #08305f;   /* navy ink-blue */
  --blue-bright: #1f86d8;   /* sky accent */
  --ink:         #0c1722;   /* near-black */
  --ink-soft:    #44505d;   /* muted text */
  --paper:       #ffffff;
  --mist:        #f1f5f9;   /* light section bg */
  --mist-2:      #e7eef5;
  --line:        #dde5ed;
  --gold:        #c98a2b;   /* award accent, used sparingly */

  /* fonts */
  --display: 'Saira Condensed', system-ui, sans-serif;
  --head:    'Saira', system-ui, sans-serif;
  --body:    'Barlow', system-ui, sans-serif;

  /* layout */
  --wrap: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 76px;
  --radius: 4px;
  --shadow: 0 18px 50px -24px rgba(8,48,95,.45);
  --shadow-sm: 0 6px 20px -12px rgba(8,48,95,.4);

  --accent: var(--blue); /* tweakable */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---- typography ---- */
.eyebrow{
  font-family:var(--head);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:13px;
  color:var(--accent);
  margin:0 0 14px;
}
.eyebrow.light{ color:var(--blue-bright); }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:.98; margin:0; letter-spacing:.005em; }
h2.section-title{
  font-size:clamp(34px, 5vw, 62px);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.lede{ font-size:clamp(17px,1.4vw,20px); color:var(--ink-soft); max-width:62ch; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }
section{ position:relative; }
.pad{ padding-block:clamp(64px,9vw,120px); }
.pad-sm{ padding-block:clamp(44px,6vw,76px); }

/* ---- buttons ---- */
.btn{
  --bg:var(--accent); --fg:#fff;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--head); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; font-size:14px;
  background:var(--bg); color:var(--fg);
  padding:15px 28px; border:2px solid var(--bg); border-radius:var(--radius);
  transition:transform .18s ease, background .18s ease, border-color .18s, color .18s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); background:var(--blue-deep); border-color:var(--blue-deep); }
.btn .ar{ transition:transform .2s; }
.btn:hover .ar{ transform:translateX(4px); }
.btn.ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn.ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn.outline{ background:transparent; color:var(--accent); border-color:var(--line); }
.btn.outline:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.lg{ padding:18px 34px; font-size:15px; }

.link-arrow{
  font-family:var(--head); font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; font-size:13px; color:var(--accent);
  display:inline-flex; align-items:center; gap:8px;
}
.link-arrow .ar{ transition:transform .2s; }
.link-arrow:hover .ar{ transform:translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.16);
  height:var(--header-h);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
/* Sea Pro script font — used ONLY for the "R" in FLX-R model names (same
   treatment as seapromfg.com). Bundled in the theme: fonts can't be
   hotlinked cross-origin (CORS), unlike images. */
@font-face {
  font-family: 'Sea Pro';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('fonts/Sea-Pro.woff2') format('woff2'),
       url('fonts/Sea-Pro.woff') format('woff'),
       url('fonts/Sea-Pro.ttf') format('truetype');
}
.seapro-r{ font-family:'Sea Pro', sans-serif; font-weight:normal; }
.sp-script{ font-family:'Sea Pro', sans-serif; font-weight:normal; letter-spacing:.02em; }

/* Hello Elementor's parent theme also defines .site-header / .site-footer and
   centers them to an 800px content width. Override with higher specificity so
   our chrome stays sticky and full-bleed regardless of stylesheet load order. */
body .site-header{ display:block !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; position:sticky; }
body .site-footer{ width:auto !important; max-width:none !important; margin:0 !important; }
.site-header.scrolled{
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom-color:var(--line);
  box-shadow:0 10px 34px rgba(13,32,51,.16);
}
.site-header .bar{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.brand img{ height:34px; width:auto; }
.brand .brand-text{ font-size:34px; line-height:1; text-transform:uppercase; color:var(--ink); letter-spacing:.01em; }
.brand .wordmark{ font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:.02em; color:var(--blue); text-transform:uppercase; }
.brand .wordmark b{ color:var(--ink); }

.nav{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav a.navlink{
  font-family:var(--head); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:14px; color:var(--ink);
  padding:10px 14px; border-radius:var(--radius); position:relative;
  transition:color .15s; white-space:nowrap;
}
.nav a.navlink:hover{ color:var(--accent); }
.nav .has-mega{ position:static; }

.header-cta{ display:flex; align-items:center; gap:10px; margin-left:8px; }
.header-cta .btn{ padding:11px 20px; font-size:13px; }

/* mega menu */
.mega{
  position:absolute; left:0; right:0; top:var(--header-h);
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -28px rgba(8,48,95,.5);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:55;
}
.has-mega:hover .mega, .mega:hover{ opacity:1; visibility:visible; transform:translateY(0); }
.mega .inner{ display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr 1fr 1.4fr; gap:30px; padding:34px var(--gutter) 40px; max-width:var(--wrap); margin:0 auto; }
.mega h5{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--accent); margin:0 0 14px; }
.mega ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.mega ul a{ font-weight:500; font-size:15px; color:var(--ink); transition:color .15s, padding .15s; }
.mega ul a:hover{ color:var(--accent); padding-left:4px; }
.mega .feature{ background:var(--mist); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.mega .feature img{ width:100%; height:120px; object-fit:cover; transition:opacity .13s ease, transform .13s ease; }
.mega .feature img.swapping{ opacity:0; transform:scale(1.03); }
.mega .feature .ft-body{ padding:11px 16px 13px; }
.mega .feature strong{ display:block; font-family:var(--display); font-size:22px; text-transform:uppercase; }

.menu-toggle{ display:none; background:none; border:none; padding:8px; }
.menu-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.2s; }

/* ============================================================
   HERO
   ============================================================ */
/* Header is sticky but in-flow, so a full-viewport hero must subtract it —
   plain 100svh pushes the bottom-aligned CTAs below the fold. */
.hero{ position:relative; min-height:calc(100svh - var(--header-h)); display:flex; align-items:flex-end; overflow:hidden; background:var(--blue-deep); }
.hero .media{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero .media img{ width:100%; height:100%; object-fit:cover; }

/* full-bleed background video */
.hero .video-bg{ position:absolute; inset:0; overflow:hidden; background-size:cover; background-position:center; }
.hero .video-bg iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-width:177.78svh; min-height:100%; border:0; pointer-events:none; }
/* Brightness/saturation are baked into assets/hero-bright.mp4 (ffmpeg
   re-encode of the source at ~1.32x) — no CSS filter on the video. The poster
   is still the remote jpg, so it keeps a matching filter for a seamless fade. */
.hero .video-bg video.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; pointer-events:none; }
.hero .video-bg .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .8s ease; filter:brightness(1.32) contrast(1.02) saturate(1.06); }
.hero .video-bg.playing .poster{ opacity:0; }
/* Legibility scrim: a bottom gradient plus a radial pocket anchored to the
   bottom-left text block. Deliberately stronger than before so the copy stays
   readable over the brightened footage, while the upper frame stays clean. */
.hero .scrim{ position:absolute; inset:0; background:
   radial-gradient(ellipse 85% 80% at 16% 92%, rgba(7,20,34,.50) 0%, rgba(7,20,34,.24) 46%, rgba(7,20,34,0) 72%),
   linear-gradient(0deg, rgba(7,20,34,.74) 0%, rgba(7,20,34,.34) 26%, rgba(7,20,34,0) 56%); }
.hero .inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px,7vw,96px); padding-top:120px; }
.hero h1{ color:#fff; font-size:clamp(46px, 8.5vw, 124px); text-transform:uppercase; letter-spacing:.005em; max-width:16ch; text-shadow:0 3px 40px rgba(5,16,28,.75), 0 1px 4px rgba(5,16,28,.6); }
.hero h1 em{ font-style:normal; color:var(--blue-bright); }
.hero p.sub{ color:rgba(255,255,255,.97); font-size:clamp(17px,1.5vw,21px); max-width:48ch; margin:22px 0 32px; font-weight:500; text-shadow:0 2px 20px rgba(5,16,28,.8), 0 1px 3px rgba(5,16,28,.55); }
.hero .actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(22px,2.6vw,34px); }
.hero .eyebrow{ color:#cfe3f5; text-shadow:0 1px 12px rgba(5,16,28,.55); }
.hero .crumb, .hero .scroll-cue{ text-shadow:0 1px 12px rgba(5,16,28,.55); }

.scroll-cue{ position:absolute; left:var(--gutter); bottom:26px; z-index:3; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.8);
  font-family:var(--head); text-transform:uppercase; letter-spacing:.18em; font-size:11px; }
.scroll-cue .dot{ width:26px; height:42px; border:2px solid rgba(255,255,255,.55); border-radius:14px; position:relative; }
.scroll-cue .dot::after{ content:''; position:absolute; left:50%; top:8px; width:4px; height:8px; background:#fff; border-radius:3px; transform:translateX(-50%); animation:scrolldot 1.7s infinite; }
@keyframes scrolldot{ 0%{opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 100%{opacity:0; transform:translate(-50%,14px);} }

/* trust bar */
.trustbar{ background:var(--ink); color:#fff; }
.trustbar .row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 40px; padding-block:20px; }
.trustbar .item{ display:flex; align-items:center; gap:12px; font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.92); }
.trustbar .item .ic{ color:var(--blue-bright); display:inline-flex; align-items:center; }

/* ============================================================
   LINEUP
   ============================================================ */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:40px; }
.sec-head .lede{ margin-top:14px; }

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
.filters button{
  font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:13px;
  background:var(--mist); color:var(--ink-soft); border:1px solid transparent;
  padding:11px 20px; border-radius:40px; transition:.18s;
}
.filters button:hover{ color:var(--ink); }
.filters button.active{ background:var(--accent); color:#fff; }

.lineup-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.boat-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .22s, box-shadow .22s, border-color .22s;
  display:flex; flex-direction:column;
}
.boat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; }
.boat-card .ph{ position:relative; aspect-ratio:3/2; background:
   radial-gradient(120% 120% at 50% 18%, #fff 0%, var(--mist) 78%);
   display:flex; align-items:center; justify-content:center; padding:16px; }
.boat-card .ph img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .3s; }
.boat-card:hover .ph img{ transform:scale(1.04); }
.boat-card .cat-tag{ position:absolute; top:16px; left:16px; font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; color:var(--accent); background:#fff; padding:6px 12px; border-radius:30px; box-shadow:var(--shadow-sm); }
.lineup-grid.filtered .cat-tag{ display:none; }
.boat-card .body{ padding:16px 18px 20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; flex:1; }
.boat-card .body h3{ font-size:27px; text-transform:uppercase; }
.boat-card .body .len{ font-family:var(--head); color:var(--ink-soft); font-weight:600; font-size:14px; letter-spacing:.04em; }
.boat-card .body .trim-tag{ align-self:flex-start; margin-top:2px; font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:9.5px; color:var(--blue); background:var(--mist-2); border-radius:20px; padding:3px 10px; }
.boat-card .body .foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; }
.boat-card .body .price{ font-family:var(--head); font-weight:600; font-size:13.5px; color:var(--ink-soft); }
.boat-card.hide{ display:none; }

/* ============================================================
   BUILD-A-BOAT FEATURE
   ============================================================ */
.build-feature{ background:linear-gradient(150deg, var(--blue-deep), #061f3c 60%, #0a2d55); color:#fff; overflow:hidden; }
.build-feature .grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.build-feature h2{ color:#fff; font-size:clamp(38px,5vw,72px); text-transform:uppercase; }
.build-feature .lede{ color:rgba(255,255,255,.82); }
.build-feature .points{ list-style:none; padding:0; margin:26px 0 34px; display:grid; gap:14px; }
.build-feature .points li{ display:flex; gap:12px; align-items:flex-start; font-weight:500; color:rgba(255,255,255,.9); }
.build-feature .points li .ic{ color:var(--blue-bright); margin-top:3px; display:inline-flex; }
.build-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:26px; backdrop-filter:blur(6px); }
.build-card .cfg-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.build-card .cfg-row:last-of-type{ border-bottom:none; }
.build-card .cfg-row .k{ font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:rgba(255,255,255,.6); }
.build-card .cfg-row .v{ font-family:var(--display); font-size:22px; text-transform:uppercase; }
.build-card .swatches{ display:flex; gap:8px; }
.build-card .sw{ width:24px; height:24px; border-radius:50%; border:2px solid rgba(255,255,255,.5); }
.build-card .total{ display:flex; align-items:baseline; justify-content:space-between; margin-top:18px; padding-top:18px; border-top:2px solid rgba(255,255,255,.2); }
.build-card .total .amt{ font-family:var(--display); font-size:40px; color:#fff; }

/* ============================================================
   CRAFTSMANSHIP
   ============================================================ */
.craft-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.craft-card{ border-radius:var(--radius); overflow:hidden; background:var(--paper); border:1px solid var(--line); }
.craft-card .img{ aspect-ratio:4/3; overflow:hidden; }
.craft-card .img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.craft-card:hover .img img{ transform:scale(1.05); }
.craft-card .body{ padding:24px 26px 30px; }
.craft-card .body h3{ font-size:26px; text-transform:uppercase; margin-bottom:10px; }
.craft-card .body p{ margin:0; color:var(--ink-soft); font-size:15.5px; }

/* split / award */
.split{ display:grid; grid-template-columns:1fr 1fr; }
.split .media{ min-height:420px; background:var(--mist); }
.split .media img{ width:100%; height:100%; object-fit:cover; }
.split .copy{ display:flex; align-items:center; }
.split .copy .inner{ padding:clamp(40px,6vw,96px); max-width:620px; }
/* Badge stacked over its caption; the .split scoping outranks Elementor's
   generic `.elementor img { height:auto }` so the size actually holds. */
.award-badge{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:24px; }
.split .award-badge img, .award-badge img{ height:96px; width:auto; }
.award-badge .txt{ font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; font-size:13px; color:var(--gold); font-weight:700; line-height:1.5; }

/* power band */
.power{ background:var(--mist); }
.power-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; }
.engine-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-align:center; transition:.2s; }
.engine-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.engine-card img{ height:150px; object-fit:contain; margin:0 auto 18px; }
.engine-card h4{ font-family:var(--display); font-size:24px; text-transform:uppercase; }
.engine-card .specs{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:6px; }
.engine-card .specs li{ display:flex; justify-content:space-between; font-size:14px; color:var(--ink-soft); border-bottom:1px dashed var(--line); padding-bottom:6px; }
.engine-card .specs li b{ color:var(--ink); font-family:var(--head); font-weight:600; }

/* sandbar statement */
.statement{ position:relative; overflow:hidden; background:var(--ink); color:#fff; text-align:center; }
.statement .media{ position:absolute; inset:0; }
.statement .media img{ width:100%; height:100%; object-fit:cover; }
.statement .scrim{ position:absolute; inset:0; background:radial-gradient(ellipse 72% 62% at 50% 50%, rgba(7,20,34,.72) 0%, rgba(7,20,34,.5) 42%, rgba(7,20,34,.2) 74%, rgba(7,20,34,.04) 100%); }
.statement .inner{ position:relative; z-index:2; max-width:1080px; margin:0 auto; padding-inline:var(--gutter); padding-block:clamp(90px,12vw,170px); }
.statement .kick{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.34em; font-size:clamp(12px,1.1vw,15px); color:var(--blue-bright); margin:0 0 22px; }
.statement h2{ font-family:var(--display); font-weight:800; text-transform:uppercase; color:#fff; line-height:.92; letter-spacing:.01em; font-size:clamp(46px,9vw,128px); margin:0; text-wrap:balance; }
.statement h2 em{ font-style:normal; color:#5a93e6; }
/* "The Official Sandbar Boat" lockup — live text recreation of the TOSBB
   brand mark: Cookie script over condensed caps, Sea Pro tag bottom-right.
   Lives in the homepage hero (over the video). */
.tosbb{ display:inline-block; text-align:left; }
.tosbb .script{ display:block; font-family:'Cookie', cursive; font-weight:400; text-transform:none; letter-spacing:0; font-size:.55em; line-height:.8; margin:0 0 .03em .05em; }
.tosbb .big{ display:block; line-height:.95; }
.tosbb-mark{ display:block; text-align:right; font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.06em; transform:skewX(-10deg); font-size:clamp(14px,1.7vw,24px); color:#fff; margin-top:clamp(4px,.5vw,8px); padding-right:.2em; text-shadow:0 1px 12px rgba(5,16,28,.55); }
.statement .say{ max-width:60ch; margin:30px auto 0; color:rgba(255,255,255,.82); font-size:clamp(17px,1.5vw,21px); }
.statement .marks, .hero .marks{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 18px; margin-top:44px; }
.statement .marks span, .hero .marks span{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:16px; color:#fff; display:flex; align-items:center; gap:10px; padding:10px 20px; background:rgba(13,32,51,.42); border:1px solid rgba(255,255,255,.28); border-radius:999px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.statement .marks span::before{ content:""; width:8px; height:8px; background:var(--blue-bright); border-radius:50%; box-shadow:0 0 10px 1px var(--blue-bright); }

/* catalog / dealer CTA strips */
.cta-strip{ position:relative; overflow:hidden; color:#fff; }
.cta-strip .media{ position:absolute; inset:0; }
.cta-strip .media img{ width:100%; height:100%; object-fit:cover; }
.cta-strip .scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,20,34,.9) 0%, rgba(7,20,34,.55) 55%, rgba(7,20,34,.25) 100%); }
.cta-strip .inner{ position:relative; z-index:2; max-width:600px; padding-block:clamp(70px,9vw,120px); }
.cta-strip h2{ color:#fff; font-size:clamp(34px,4.5vw,60px); text-transform:uppercase; }
.cta-strip p{ color:rgba(255,255,255,.85); margin:18px 0 30px; }

/* news */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
.news-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:.2s; }
.news-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.news-card .img{ aspect-ratio:16/10; overflow:hidden; background:var(--mist); }
.news-card .img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.news-card:hover .img img{ transform:scale(1.05); }
.news-card .body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.news-card .tag{ font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--accent); font-weight:700; }
.news-card h3{ font-family:var(--head); font-weight:700; font-size:21px; line-height:1.18; letter-spacing:0; }
.news-card .read{ margin-top:auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.7); }
.site-footer .top{ display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:30px; padding-block:64px 48px; }
.site-footer .brand-col .wordmark{ font-family:var(--display); font-weight:800; font-size:32px; color:#fff; text-transform:uppercase; letter-spacing:.02em; }
.site-footer .footer-logo{ height:42px; width:auto; filter:brightness(0) invert(1); }
.site-footer .brand-col p{ font-size:14.5px; max-width:34ch; margin:14px 0 22px; }
.site-footer h6{ font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:#fff; margin:0 0 16px; font-weight:700; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.site-footer ul a{ font-size:14.5px; color:rgba(255,255,255,.66); transition:color .15s; }
.site-footer ul a:hover{ color:#fff; }
.site-footer .socials{ display:flex; gap:12px; }
.site-footer .socials a{ width:40px; height:40px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition:.18s; }
.site-footer .socials a:hover{ background:var(--accent); border-color:var(--accent); }
.site-footer .bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:22px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; font-size:13px; }
.site-footer .nmma{ height:46px; background:#fff; padding:9px 14px; border-radius:10px; box-sizing:content-box; box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06); }

/* ============================================================
   REVEAL ANIM
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .lineup-grid{ grid-template-columns:repeat(3,1fr); }
  .mega .inner{ grid-template-columns:repeat(3,1fr); }
  .mega .feature{ display:none; }
  .site-footer .top{ grid-template-columns:1fr 1fr 1fr; }
  .site-footer .brand-col{ grid-column:1/-1; }
}
@media (max-width:860px){
  .nav, .header-cta .find{ display:none; }
  .menu-toggle{ display:block; }
  .build-feature .grid, .split{ grid-template-columns:1fr; }
  .split .media{ min-height:300px; }
  .craft-grid, .power-grid, .news-grid{ grid-template-columns:1fr; }
  .lineup-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  /* Logo + Build CTA + hamburger can't share 375px — the CTA lives in the
     hero and the drawer, so the header keeps just brand + hamburger. */
  .header-cta .btn{ display:none; }
  .brand img{ height:28px; }
  .brand .brand-text{ font-size:27px; }
  /* Compact the hero so eyebrow + headline + sub + BOTH stacked CTAs fit
     inside 100svh — the section clips overflow, so anything taller gets
     visually cut (second button used to lose its bottom edge). */
  .hero .inner{ padding-top:96px; padding-bottom:28px; }
  .hero h1{ font-size:clamp(36px,10.5vw,46px); }
  .hero p.sub{ font-size:16px; margin:14px 0 20px; }
  .hero .actions{ gap:10px; }
  .hero .actions .btn.lg{ padding:14px 26px; font-size:14px; }
  .scroll-cue{ display:none; }
  .lineup-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .boat-card .body h3{ font-size:23px; }
  .site-footer .top{ grid-template-columns:1fr 1fr; }
}

/* mobile drawer */
.mobile-drawer{ position:fixed; inset:0; z-index:200; background:rgba(7,20,34,.5); opacity:0; visibility:hidden; transition:.25s; overflow:hidden; }
.mobile-drawer.open{ opacity:1; visibility:visible; }
.mobile-drawer .panel{ position:absolute; right:0; top:0; bottom:0; width:min(360px,85vw); background:#fff; padding:24px; transform:translateX(100%); transition:transform .28s; overflow-y:auto; }
.mobile-drawer.open .panel{ transform:none; }
.mobile-drawer a{ display:block; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:17px; padding:14px 6px; border-bottom:1px solid var(--line); }
/* Boats accordion in the drawer */
.drawer-boats-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; border-bottom:1px solid var(--line); font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:17px; padding:14px 6px; color:var(--ink); cursor:pointer; }
.drawer-boats-toggle svg{ transition:transform .2s; }
.drawer-boats-toggle.open svg{ transform:rotate(180deg); }
.drawer-boats{ display:none; border-bottom:1px solid var(--line); padding:4px 6px 12px; }
.drawer-boats.open{ display:block; }
.drawer-boats .grp{ display:block; font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--ink-soft); margin:14px 0 2px; }
.drawer-boats a{ font-size:15px; font-weight:500; text-transform:none; letter-spacing:.02em; padding:8px 0 8px 12px; border-bottom:none; }
.drawer-boats a.all{ margin-top:10px; color:var(--accent); font-weight:700; padding-left:0; }
.mobile-drawer .close{ background:none; border:none; font-size:28px; float:right; margin-bottom:8px; }

/* ---------------------------------------------------------------------------
   Elementor Kit button defence
   ---------------------------------------------------------------------------
   Elementor's Global Styles kit emits a blanket rule:

     .elementor-kit-N button, … { background-color: var(--e-global-color-primary); }

   That is specificity (0,1,1) — identical to our own `.filters button`,
   `.seg button` and `.ev-tabs button` — and the kit stylesheet loads AFTER the
   theme's, so on a tie it wins and paints our unstyled/inactive buttons in the
   kit's primary colour. Our `color` rules still applied, so on seapromfg.com
   the inactive chips rendered dark-on-dark and became unreadable. The `.active`
   variants were unaffected because (0,2,1) already outranks the kit.

   The site's own kit had no button background set, so this never reproduced
   locally. Re-asserting each background at (0,1,2) — one extra element in the
   selector — clears the kit without resorting to !important, and stays below
   the `.active` rules at (0,2,1) so selected states still win.
--------------------------------------------------------------------------- */
body .filters button{ background:var(--mist); }
body .seg button,
body .ev-tabs button{ background:transparent; }
body button.menu-toggle,
body button.drawer-boats-toggle{ background:none; }