/* ═══════════════════════════════════════════════════════════════════════
   iKon Boats — CHART DATUM
   Photography is the content. The chart is the frame that annotates it.

   Palette sampled from the client logo pack:
     ink   #10161F   iKON made-by-HCB lockup dark
     red   #EE374D   iKON mark red   — SIGNAL ONLY, never display fill
     gold  #D2B350   HCB Yachts register — the quiet second voice

   Hard rule, learned from the live site's broken hero: the display face is
   never set in red. A $79,990 rendered in heavy red italic caps reads
   "$79,YYU". Numerals live in a tabular mono, in chalk.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* depth ramp — the ground reads as water getting deeper */
  --abyss:  #070A0F;
  --deep:   #0A0F16;
  --ink:    #10161F;
  --shelf:  #161F2B;
  --shoal:  #1E2938;

  --contour:  #27374A;
  --contour-2:#33475E;
  --steel:    #8595A6;
  --steel-hi: #A9B7C6;
  --chalk:    #EDF1F5;
  --white:    #FFFFFF;

  --red:  #EE374D;
  --gold: #D2B350;

  --gut:  clamp(1.15rem, 4vw, 4.5rem);
  --maxw: 1440px;
  --bar:  60px;

  --f-disp: "Anybody", "Eurostile", system-ui, sans-serif;
  --f-text: "Archivo", system-ui, -apple-system, sans-serif;
  --f-data: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* chart-datum motion: nothing glides — it steps and settles */
  --step-ease: cubic-bezier(.16, .84, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--bar); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is mandatory alongside max-width:100% — without it the HTML height
   attribute stays applied while the width shrinks, and every image squashes. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ── type ───────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--f-disp);
  font-weight: 700;
  font-stretch: 118%;
  line-height: .96;
  letter-spacing: -.012em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.6vw, 6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-stretch: 108%; }
p  { margin: 0 0 1em; text-wrap: pretty; }

/* the chart's marginal notation — every label on the site is one of these */
.note {
  font-family: var(--f-data);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--steel);
}
.note--red  { color: var(--red); }
.note--gold { color: var(--gold); }

.lede { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--steel-hi); max-width: 56ch; }

/* soundings: every number on this site is a depth figure, in chalk, tabular */
.sounding { display: flex; flex-direction: column; gap: .4rem; }
.sounding b {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--chalk);
  line-height: 1;
}
.sounding span { font-family: var(--f-data); font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); }

/* ── the chart layer ────────────────────────────────────────────────── */

/* station ticks: the ruled edge of a chart sheet */
.ticks { height: 9px; background-repeat: repeat-x; background-size: 34px 9px;
  background-image: linear-gradient(90deg, var(--contour) 0 1px, transparent 1px 100%); opacity: .8; }

/* contour field — real bathymetry, generated, sitting under content */
.contours { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.contours img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }

/* graduated ladder down the left of a section */
.ladder { position: relative; padding-left: 1.6rem; }
.ladder::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 1px; background: var(--contour-2); }
.ladder::after {
  content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 7px;
  background-repeat: repeat-y; background-size: 7px 22px;
  background-image: linear-gradient(180deg, var(--contour-2) 0 1px, transparent 1px 100%);
}

/* an inset: a boxed detail at a different scale, ruled off — the chart's own device */
.inset { position: relative; border: 1px solid var(--contour); background: var(--deep); overflow: hidden; }
.inset > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.inset figcaption {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: .7rem .85rem; border-top: 1px solid var(--contour); background: var(--ink);
}

/* ── shell ──────────────────────────────────────────────────────────── */

.util {
  display: flex; align-items: center; gap: 1.25rem;
  height: 30px; background: var(--abyss); border-bottom: 1px solid var(--contour);
  font-family: var(--f-data); font-size: .55rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel);
}
.util__in { display: flex; align-items: center; gap: 1.25rem; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.util b { color: var(--chalk); font-weight: 500; }
.util > .util__in > a:hover { color: var(--chalk); }
.util .sp { margin-left: auto; display: flex; gap: 1.4rem; }
.util .sp a:hover { color: var(--chalk); }
@media (max-width: 900px) { .util .sp { display: none; } }

.head {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--contour);
}
.head__in { display: flex; align-items: center; gap: 2rem; height: var(--bar); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.head__logo { flex: none; display: block; }
.head__logo img { height: 20px; width: auto; }
.nav { display: flex; gap: 1.75rem; }
.nav > a {
  font-family: var(--f-data); font-size: .6rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--steel-hi); padding: .5rem 0; position: relative; white-space: nowrap;
}
.nav > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .18s var(--step-ease); }
.nav > a:hover { color: var(--chalk); }
.nav > a:hover::after { transform: scaleX(1); }
@media (max-width: 940px) { .nav { display: none; } }

.head__cta { margin-left: auto; display: flex; gap: .55rem; align-items: center; }

/* buttons — squared, hairline, red used as an outline signal not a fill */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-data); font-size: .6rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: .72rem 1.1rem; border: 1px solid var(--contour-2); color: var(--chalk); background: transparent;
  transition: border-color .18s var(--step-ease), background-color .18s var(--step-ease), color .18s var(--step-ease);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--steel); background: var(--shelf); }
.btn--go { border-color: var(--red); color: var(--chalk); }
.btn--go::before { content: ""; width: 6px; height: 6px; background: var(--red); flex: none; }
.btn--go:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn--go:hover::before { background: #fff; }
.btn--lg { padding: .95rem 1.5rem; font-size: .64rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.burger { display: none; margin-left: auto; }
@media (max-width: 940px) { .burger { display: inline-flex; } .head__cta .btn--dealer { display: none; } }

/* ── hero ───────────────────────────────────────────────────────────── */

.hero { position: relative; min-height: min(88vh, 820px); display: flex; align-items: flex-end; overflow: hidden; background: var(--abyss); }
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
/* narrow screens crop toward the boat: the product has to stay in frame */
@media (max-width: 860px) {
  .hero__img img { object-position: 50% 38%; }
  .hero { min-height: min(94vh, 780px); }
  .hero__img::after {
    background:
      linear-gradient(180deg, rgba(7,10,15,.55) 0%, rgba(7,10,15,.1) 22%, rgba(7,10,15,.72) 52%, rgba(7,10,15,.97) 100%);
  }
}
/* the chart's own scrim — a depth gradient, not a black wash */
.hero__img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,10,15,.66) 0%, rgba(7,10,15,.18) 30%, rgba(7,10,15,.5) 66%, rgba(7,10,15,.95) 100%),
    linear-gradient(90deg, rgba(7,10,15,.94) 0%, rgba(7,10,15,.72) 26%, rgba(7,10,15,.06) 62%);
}
.hero__in { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero__col { max-width: 46ch; }
.hero h1 { max-width: 11ch; font-size: clamp(2.4rem, 5.2vw, 4.6rem); }
.hero h1 em { font-style: normal; display: block; color: var(--steel-hi); }
.hero .lede { margin-top: 1.35rem; max-width: 42ch; }
.hero .note { max-width: none; white-space: nowrap; }
@media (max-width: 560px) { .hero .note { white-space: normal; } }
.hero__acts { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 2rem; }

/* the readout strip: the hero's soundings, ruled off along the bottom */
.readout {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--contour);
  border-top: 1px solid var(--contour); border-bottom: 1px solid var(--contour);
}
.readout > div { background: color-mix(in srgb, var(--abyss) 82%, transparent); padding: 1.05rem clamp(1.15rem, 4vw, 2rem); backdrop-filter: blur(6px); }

/* ── sections ───────────────────────────────────────────────────────── */

.sec { position: relative; padding-block: clamp(4rem, 9vw, 8rem); }
.sec--sunk { background: var(--deep); }
.sec--abyss { background: var(--abyss); }
.sec > .wrap { position: relative; z-index: 1; }

.sechead { display: flex; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sechead__t { flex: 1 1 30ch; }
.sechead h2 { margin-top: .9rem; }
.sechead .lede { margin-top: 1.1rem; }

/* ── lineup ─────────────────────────────────────────────────────────── */

.series { display: grid; gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
@media (min-width: 900px) { .series { grid-template-columns: 1fr 1fr; } }

.serie { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1.35rem; position: relative; overflow: hidden; }
.serie__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.serie__boat { position: relative; }
.serie__boat img { width: 100%; }
.serie__price { display: flex; align-items: baseline; gap: .5rem; }
.serie__price b { font-family: var(--f-data); font-variant-numeric: tabular-nums; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -.03em; }

.trims { display: grid; gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.trim { background: var(--shelf); display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: .8rem .95rem; align-items: center; transition: background-color .18s var(--step-ease); }
.trim:hover { background: var(--shoal); }
.trim__n { font-family: var(--f-disp); font-stretch: 112%; font-weight: 700; font-size: 1rem; letter-spacing: .01em; }
.trim__n small { font-family: var(--f-data); font-size: .55rem; letter-spacing: .16em; color: var(--steel); margin-left: .55rem; font-weight: 400; text-transform: uppercase; }
.trim__p { font-family: var(--f-data); font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--steel-hi); white-space: nowrap; }

/* ── engineering / annotated photograph ─────────────────────────────── */

.systems { display: grid; gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
@media (min-width: 760px)  { .systems { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1160px) { .systems { grid-template-columns: repeat(4, 1fr); } }
.system { background: var(--ink); padding: 1.5rem 1.35rem 1.7rem; display: flex; flex-direction: column; gap: .9rem; }
.system__mark { height: 30px; display: flex; align-items: center; }
.system__mark img { height: 100%; width: auto; object-fit: contain; object-position: left; filter: brightness(0) invert(1); opacity: .92; }
.system h3 { font-size: 1rem; }
.system p { font-size: .86rem; color: var(--steel-hi); margin: 0; }

/* full-bleed annotated plate */
.plate { position: relative; }
.plate img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.plate--tall img { aspect-ratio: 16/10; }
.plate__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,15,.9) 0%, rgba(7,10,15,.15) 60%); }
.plate__cap { position: absolute; left: 0; bottom: 0; padding: clamp(1.25rem, 3vw, 2.5rem); max-width: 44ch; }

/* ── factory strip ──────────────────────────────────────────────────── */

.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 1px; background: var(--contour); border-block: 1px solid var(--contour); overflow-x: auto; scroll-snap-type: x mandatory; }
.strip::-webkit-scrollbar { height: 3px; }
.strip::-webkit-scrollbar-thumb { background: var(--contour-2); }
.strip figure { margin: 0; background: var(--abyss); scroll-snap-align: start; }
.strip img { width: 100%; aspect-ratio: 3/2; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.strip figcaption { padding: .7rem .85rem; }

/* ── team ───────────────────────────────────────────────────────────── */

.crew { display: grid; gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
@media (min-width: 820px) { .crew { grid-template-columns: 1fr 1fr; } }
.mate { position: relative; background: var(--abyss); min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; }
.mate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--step-ease); }
.mate:hover img { transform: scale(1.03); }
.mate__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,10,15,.15) 30%, rgba(7,10,15,.92) 100%); }
.mate__b { position: relative; padding: 1.6rem 1.5rem; width: 100%; }
.mate h3 { margin-bottom: .5rem; }
.mate p { font-size: .85rem; color: var(--steel-hi); margin: 0 0 .9rem; max-width: 40ch; }

/* ── closing route ──────────────────────────────────────────────────── */

.close { position: relative; background: var(--abyss); padding-block: clamp(4rem, 9vw, 7.5rem); overflow: hidden; }
.close__in { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.close h2 { max-width: 18ch; }

/* ── footer ─────────────────────────────────────────────────────────── */

.foot { background: var(--abyss); border-top: 1px solid var(--contour); padding-block: 3rem 2.25rem; }
.foot__cols { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.foot__col h4 { font-family: var(--f-data); font-size: .55rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); margin: 0 0 .9rem; }
.foot__col a { display: block; font-size: .84rem; color: var(--steel-hi); padding: .2rem 0; }
.foot__col a:hover { color: var(--chalk); }
.foot__end { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--contour); }
.foot__end img { height: 26px; opacity: .75; }

/* ── reveal: content is visible by default; motion only enhances ────── */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--step-ease), transform .5s var(--step-ease); }
.rise.in, .no-js .rise { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT THEME
   A chart printed on paper rather than read on a plotter at night. Same
   contour system, same soundings — the ink flips, the red and gold hold.
   ═══════════════════════════════════════════════════════════════════════ */

:root { color-scheme: dark; }

[data-theme="light"] {
  color-scheme: light;
  --abyss:  #F4F1E9;
  --deep:   #FFFFFF;
  --ink:    #FBF9F3;
  --shelf:  #FFFFFF;
  --shoal:  #EFEBDD;

  --contour:   #D8D2C0;
  --contour-2: #B9AF95;
  --steel:     #6B6656;
  --steel-hi:  #3E3B30;
  --chalk:     #14140F;
  --white:     #14140F;

  --red:  #C21F35;
  --gold: #8A6E1E;
}
/* Photographic scrims stay the same dark treatment in both themes — a photo darkened for
   legibility needs light text over it regardless of whether the surrounding chrome is light or
   dark. So instead of re-tuning every scrim per theme, every text container that sits on one
   (.hero__in, .phero__in, .plate__cap, .mate__b, .navbar-demo on dark chips) re-pins the token
   set to its dark-mode values locally, and ordinary token-driven rules (h1, .note, .lede, .btn)
   fall into place with no per-component overrides. */
.hero__in, .phero__in, .plate__cap, .mate__b {
  --chalk: #EDF1F5; --steel: #8595A6; --steel-hi: #A9B7C6; --white: #FFFFFF;
  --contour: #27374A; --contour-2: #33475E; --gold: #D2B350; --red: #EE374D;
  color: var(--chalk);
}
[data-theme="light"] .btn--go:hover { color: #fff; }
[data-theme="light"] .system__mark img,
[data-theme="light"] .foot__end img { filter: none; }
[data-theme="light"] .strip img { filter: grayscale(1) contrast(1.02) brightness(1.04); }

.themebtn {
  flex: none; display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--contour-2); background: var(--shelf); overflow: hidden;
}
.themebtn button {
  font-family: var(--f-data); font-size: .56rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: .42rem .6rem; border: 0; background: transparent; color: var(--steel); cursor: pointer;
}
.themebtn button[aria-pressed="true"] { background: var(--chalk); color: var(--ink); }
.themebtn button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

/* ═══════════════════════════════════════════════════════════════════════
   MEGA MENU
   ═══════════════════════════════════════════════════════════════════════ */

/* the panel's containing block is .nav (the whole button row), not .navitem (one button) and not
   the viewport: centering on a single button clips off-screen for items near the header's edge,
   and centering on the viewport disconnects the panel from the row, so the mouse crosses page
   content between button and panel and fires mouseleave before the panel is ever reached. */
.nav { position: relative; }
.navitem > button {
  font-family: var(--f-data); font-size: .6rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--steel-hi); padding: .5rem 0; position: relative; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.navitem > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .18s var(--step-ease); }
.navitem > button:hover, .navitem.is-open > button { color: var(--chalk); }
.navitem > button:hover::after, .navitem.is-open > button::after { transform: scaleX(1); }
.navitem svg { width: 8px; height: 8px; transition: transform .18s var(--step-ease); flex: none; }
.navitem.is-open svg { transform: rotate(180deg); }

.navpanel {
  /* absolute against .nav (see above) — stays directly under the button row so a straight
     vertical mouse move from any button lands on the panel, not on the page behind it.
     left is 50% by default (a reasonable pre-JS position) but JS overwrites it on open with a
     viewport-clamped pixel value, so the transform carries only the open/close slide, never a
     horizontal offset that would double up with JS's own centering+clamping math. */
  position: absolute; top: calc(100% + 1px); left: 50%;
  width: min(760px, 92vw);
  background: var(--ink); border: 1px solid var(--contour); box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s var(--step-ease), transform .16s var(--step-ease), visibility .16s, left 0s;
  z-index: 100;
}
.navitem.is-open .navpanel { opacity: 1; visibility: visible; transform: translateY(0); }
.navpanel__col { padding: 1.4rem 1.5rem; border-left: 1px solid var(--contour); }
.navpanel__col:first-child { border-left: 0; }
.navpanel__col h5 { font-family: var(--f-data); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 .9rem; font-weight: 600; }
.navpanel__col ul { list-style: none; margin: 0; padding: 0; }
.navpanel__col li + li { margin-top: .55rem; }
.navpanel__col a { display: block; font-size: .87rem; font-weight: 500; color: var(--chalk); }
.navpanel__col a:hover { color: var(--red); }
.navpanel__col a small { display: block; font-family: var(--f-data); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-top: .15rem; font-weight: 400; }
@media (max-width: 940px) { .navpanel { position: static; transform: none; width: auto; display: none; box-shadow: none; } .navitem.is-open .navpanel { display: grid; opacity:1; visibility:visible; } }

/* mobile nav sheet */
.navsheet { position: fixed; inset: 0; z-index: 150; background: var(--ink); transform: translateX(100%); transition: transform .28s var(--step-ease); overflow-y: auto; }
.navsheet.is-open { transform: translateX(0); }
.navsheet__top { display: flex; align-items: center; justify-content: space-between; height: var(--bar); padding-inline: var(--gut); border-bottom: 1px solid var(--contour); }
.navsheet .navitem { border-bottom: 1px solid var(--contour); }
.navsheet .navitem > button { width: 100%; justify-content: space-between; padding: 1.1rem var(--gut); font-size: .72rem; }
.navsheet .navpanel { position: static; left: auto; transform: none; width: auto; box-shadow: none; grid-template-columns: 1fr; display: none; }
/* .navitem.is-open .navpanel (3 classes) sets its own translateX(-50%) for the desktop dropdown;
   that rule outranks the plain 2-class reset above, so the open state needs its own explicit
   reset here too, or the panel and everything in it renders shifted off-screen on mobile. */
.navsheet .navitem.is-open .navpanel { display: grid; transform: none; }
.navsheet__acts { padding: 1.5rem var(--gut); display: flex; flex-direction: column; gap: .6rem; }

/* ═══════════════════════════════════════════════════════════════════════
   BREADCRUMB + SUBNAV
   ═══════════════════════════════════════════════════════════════════════ */

.crumb { display: flex; align-items: center; gap: .5rem; font-family: var(--f-data); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); padding-block: .9rem; border-bottom: 1px solid var(--contour); }
.crumb a { color: var(--steel); }
.crumb a:hover { color: var(--chalk); }
.crumb span[aria-hidden] { color: var(--contour-2); }
.crumb b { color: var(--chalk); font-weight: 500; }

.subnav { position: sticky; top: var(--bar); z-index: 60; background: color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--contour); }
.subnav__in { display: flex; align-items: center; gap: 1.75rem; height: 48px; overflow-x: auto; }
.subnav a { font-family: var(--f-data); font-size: .58rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); white-space: nowrap; padding: .3rem 0; border-bottom: 2px solid transparent; }
.subnav a:hover, .subnav a.is-on { color: var(--chalk); border-color: var(--red); }
.subnav__switch { margin-left: auto; display: flex; gap: 1px; background: var(--contour); border: 1px solid var(--contour); flex: none; }
.subnav__switch a { padding: .4rem .7rem; background: var(--ink); border: 0; }
.subnav__switch a.is-on { background: var(--red); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   PAGE HERO (shorter than home, for interior pages)
   ═══════════════════════════════════════════════════════════════════════ */

.phero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--abyss); }
.phero--tall { min-height: 62vh; }
.phero__img { position: absolute; inset: 0; }
.phero__img img { width: 100%; height: 100%; object-fit: cover; }
.phero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,10,15,.5) 0%, rgba(7,10,15,.25) 40%, rgba(7,10,15,.9) 100%); }
.phero__in { position: relative; z-index: 2; width: 100%; padding-block: clamp(2rem, 5vw, 3.5rem); }

/* ═══════════════════════════════════════════════════════════════════════
   SOUNDINGS ROW (reusable readout, not just hero)
   ═══════════════════════════════════════════════════════════════════════ */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.stats > div { background: var(--ink); padding: 1rem 1.2rem; }

/* ═══════════════════════════════════════════════════════════════════════
   BADGES — standard vs optional, the Scout-style tag
   ═══════════════════════════════════════════════════════════════════════ */

.badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-data); font-size: .54rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .55rem; border: 1px solid; }
.badge--std { color: var(--steel-hi); border-color: var(--contour-2); }
.badge--std::before { content: ""; width: 5px; height: 5px; background: var(--steel-hi); }
.badge--opt { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.badge--opt::before { content: ""; width: 5px; height: 5px; background: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════════
   FEATURE CARDS
   ═══════════════════════════════════════════════════════════════════════ */

.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.feat { background: var(--ink); padding: 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.feat__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.feat h4 { font-family: var(--f-text); font-weight: 600; font-size: .96rem; margin: 0; }
.feat p { font-size: .83rem; color: var(--steel-hi); margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   SPEC TABLE
   ═══════════════════════════════════════════════════════════════════════ */

.spectable { border: 1px solid var(--contour); background: var(--ink); overflow-x: auto; }
.spectable table { width: 100%; border-collapse: collapse; min-width: 460px; }
.spectable th, .spectable td { padding: .8rem 1.1rem; text-align: left; border-bottom: 1px solid var(--contour); font-size: .85rem; }
.spectable thead th { font-family: var(--f-data); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); background: var(--shelf); font-weight: 600; }
.spectable tbody tr:last-child td { border-bottom: 0; }
.spectable td.num { font-family: var(--f-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.spectable tr:hover td { background: var(--shelf); }

/* ═══════════════════════════════════════════════════════════════════════
   COMPARE TABLE (the lineup — replaces the PNG chart)
   ═══════════════════════════════════════════════════════════════════════ */

.cmp-wrap { border: 1px solid var(--contour); overflow-x: auto; background: var(--ink); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 980px; }
table.cmp th, table.cmp td { padding: .85rem 1.05rem; text-align: left; border-bottom: 1px solid var(--contour); font-size: .84rem; vertical-align: middle; }
table.cmp thead th { position: sticky; top: 0; background: var(--shelf); font-family: var(--f-data); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); font-weight: 600; z-index: 2; }
table.cmp thead th:first-child { position: sticky; left: 0; z-index: 3; }
table.cmp td:first-child, table.cmp th:first-child { position: sticky; left: 0; background: var(--ink); z-index: 1; border-right: 1px solid var(--contour); }
table.cmp thead th:first-child { background: var(--shelf); }
table.cmp .ser { font-family: var(--f-data); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); display: block; }
table.cmp .mdl { font-family: var(--f-disp); font-weight: 700; font-stretch: 112%; font-size: 1rem; letter-spacing: .01em; }
table.cmp .num { font-family: var(--f-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.cmp tbody tr:hover td { background: var(--shelf); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp-filter { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cmp-filter button { font-family: var(--f-data); font-size: .58rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: .5rem .85rem; border: 1px solid var(--contour-2); background: transparent; color: var(--steel-hi); cursor: pointer; }
.cmp-filter button.is-on { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }

/* ═══════════════════════════════════════════════════════════════════════
   COLOR / UPHOLSTERY SWATCHES
   ═══════════════════════════════════════════════════════════════════════ */

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.swatch { background: var(--ink); padding: 1rem .85rem; text-align: center; }
.swatch__chip { width: 100%; aspect-ratio: 1; border: 1px solid var(--contour-2); margin-bottom: .6rem; }
.swatch span { font-family: var(--f-data); font-size: .56rem; letter-spacing: .06em; color: var(--steel-hi); display: block; line-height: 1.35; }

/* ═══════════════════════════════════════════════════════════════════════
   PRICING TIER / CTA ROW (used on model pages)
   ═══════════════════════════════════════════════════════════════════════ */

.priceblock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.75rem; padding: 1.5rem clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--contour); background: var(--shelf); }
.priceblock .p { display: flex; flex-direction: column; gap: .3rem; }
.priceblock .p b { font-family: var(--f-data); font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -.03em; color: var(--chalk); }
.priceblock .p span { font-family: var(--f-data); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }

.ctarow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.ctarow a { background: var(--ink); padding: 1rem .5rem; text-align: center; font-family: var(--f-data); font-size: .6rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk); transition: background-color .18s var(--step-ease), color .18s var(--step-ease); }
.ctarow a:hover { background: var(--red); color: #fff; }
.ctarow a.is-pri { background: var(--red); color: #fff; }
.ctarow a.is-pri:hover { background: var(--red-dim, var(--red)); filter: brightness(1.1); }

/* ═══════════════════════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════════════════════ */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.gallery figure { margin: 0; background: var(--abyss); overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s var(--step-ease); }
.gallery figure:hover img { transform: scale(1.05); }

/* ═══════════════════════════════════════════════════════════════════════
   CARDS — used for build hub, ownership hub, brand roster
   ═══════════════════════════════════════════════════════════════════════ */

.cards { display: grid; gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.card { background: var(--ink); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .85rem; }
.card__ic { width: 34px; height: 34px; border: 1px solid var(--contour-2); display: flex; align-items: center; justify-content: center; font-family: var(--f-data); font-size: .68rem; color: var(--red); }
.card h4 { font-size: 1.02rem; }
.card p { font-size: .86rem; color: var(--steel-hi); margin: 0; flex: 1; }
.card a.btn { align-self: flex-start; }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.roster > div { background: var(--ink); padding: 1.1rem 1.2rem; }
.roster h5 { font-family: var(--f-disp); font-size: .98rem; font-stretch: 110%; margin: 0 0 .3rem; }
.roster p { margin: 0; font-size: .78rem; color: var(--steel); }

/* ═══════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════ */

.form { display: grid; gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.form--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form--2 { grid-template-columns: 1fr; } }
.field { background: var(--ink); padding: 1rem 1.1rem; }
.field label { display: block; font-family: var(--f-data); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: .5rem; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--contour-2); color: var(--chalk);
  font-family: var(--f-text); font-size: .92rem; padding: .35rem 0; outline: 0;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); }
.field--full { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT TILES
   ═══════════════════════════════════════════════════════════════════════ */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.tile { background: var(--ink); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.tile h4 { font-size: .98rem; }
.tile a { font-size: .9rem; color: var(--chalk); }
.tile a:hover { color: var(--red); }
.tile p { margin: 0; font-size: .85rem; color: var(--steel-hi); }

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATE (dealer locator, honestly incomplete data)
   ═══════════════════════════════════════════════════════════════════════ */

.emptystate { border: 1px dashed var(--contour-2); background: var(--shelf); padding: 2.5rem 1.75rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.emptystate .note { max-width: 44ch; }

/* ═══════════════════════════════════════════════════════════════════════
   ACCORDION (used for FAQ / warranty terms / owner's manual list)
   ═══════════════════════════════════════════════════════════════════════ */

details.acc { border-bottom: 1px solid var(--contour); }
details.acc summary { padding: 1.1rem 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .95rem; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; font-family: var(--f-data); color: var(--steel); flex: none; font-size: 1.1rem; transition: transform .18s var(--step-ease); }
details.acc[open] summary::after { transform: rotate(45deg); }
details.acc .accbody { padding: 0 0 1.2rem; font-size: .87rem; color: var(--steel-hi); max-width: 68ch; }

/* utility */
.mt0{margin-top:0}.mb0{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════════════════
   CONFIGURATOR EMBED
   The real KBMax widget, on iKon's own page — matches the exact embed call
   ikonboats.com itself uses (script, params, configuratorId). It renders
   correctly once the parent domain is on KBMax's allowlist for this
   account; on an unregistered domain the iframe loads but stays blank,
   which is a domain-permission gate, not a code fault. The frame carries
   its own honest fallback so nobody stares at a silent blank box.
   ═══════════════════════════════════════════════════════════════════════ */

.kbmax-wrap { position: relative; border: 1px solid var(--contour); background: var(--deep); min-height: 640px; }
.kbmax-wrap .kbmax-viewer { min-height: 640px; }
.kbmax-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; text-align: center; padding: 2rem; background: var(--deep);
  transition: opacity .3s var(--step-ease), visibility .3s;
}
.kbmax-wrap.is-loaded .kbmax-fallback { opacity: 0; visibility: hidden; pointer-events: none; }
.kbmax-fallback .spinner {
  width: 22px; height: 22px; border: 2px solid var(--contour-2); border-top-color: var(--red); border-radius: 50%;
  animation: kbmax-spin .8s linear infinite;
}
@keyframes kbmax-spin { to { transform: rotate(360deg); } }
.kbmax-fallback p { max-width: 46ch; margin: 0; }

.builder-toggle-row { display: none; margin-top: 1px; }
.builder-toggle-row.is-open { display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   DEALER DIRECTORY — real data, 60 locations, client-side search + sort
   ═══════════════════════════════════════════════════════════════════════ */

.dlr-controls { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; }
.dlr-controls input[type="text"] {
  flex: 1 1 260px; background: var(--ink); border: 1px solid var(--contour-2); color: var(--chalk);
  font-family: var(--f-text); font-size: .92rem; padding: .8rem 1rem; outline: 0;
}
.dlr-controls input[type="text"]:focus { border-color: var(--red); }
.dlr-controls select {
  background: var(--ink); border: 1px solid var(--contour-2); color: var(--chalk);
  font-family: var(--f-data); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 .9rem; height: 44px;
}
.dlr-count { font-family: var(--f-data); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 1rem; }
.dlr-count b { color: var(--chalk); font-weight: 500; }

.dlr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--contour); border: 1px solid var(--contour); }
.dlr-card { background: var(--ink); padding: 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; }
.dlr-card__hd { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.dlr-card h4 { font-size: .98rem; margin: 0; }
.dlr-dist { font-family: var(--f-data); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; flex: none; }
.dlr-card address { font-style: normal; font-size: .84rem; color: var(--steel-hi); line-height: 1.5; margin: 0; }
.dlr-card__acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.dlr-card__acts a { font-family: var(--f-data); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk); border: 1px solid var(--contour-2); padding: .45rem .7rem; }
.dlr-card__acts a:hover { border-color: var(--red); color: var(--red); }
.dlr-empty { grid-column: 1 / -1; padding: 2.5rem 1.5rem; text-align: center; }
.dlr-empty p { color: var(--steel-hi); margin: 0; }