/* /site.css — JC Boats & Motors shared tokens + components. v2 2026-10-01
   Loaded AFTER each page's inline <style> as /site.css?v=N — bump N on every edit
   (an edge cache never sees an overwrite-in-place).
   Palette: every value below already exists in the site's CSS (or is a
   color-mix of two that do). Do not add hues here. Typeface: unchanged
   (Playfair Display + DM Sans) — a swap is one token, --jc-font-display. */

/* ───────────── FONTS (v2: self-hosted, same families + weights the pages
   already asked Google for; latin subset, variable wght axis) ─────────────
   New file = new filename (immutable cache). Preloaded in each page <head>. */
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('/fonts/dmsans-latin-v17.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:600 800; font-display:swap;
  src:url('/fonts/playfair-latin-v40.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('/fonts/jetbrainsmono-latin-v24.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ───────────── TOKENS ───────────── */
:root{
  --jc-ink:        #0A0A0A;
  --jc-navy-900:   #0D243D;
  --jc-navy-800:   #132C44;
  --jc-navy-700:   #1A4066;
  --jc-navy-600:   #215380;
  --jc-ocean:      #1B5299;

  --jc-chrome-50:  #F5F5F7;
  --jc-chrome-300: #D4D6DA;
  --jc-chrome-600: #7A7F86;
  --jc-chrome-400: color-mix(in srgb, var(--jc-chrome-300) 70%, var(--jc-chrome-600));

  --jc-signal:     #06B6D4;
  --jc-signal-hi:  #22CADF;
  --jc-signal-deep:#0891B2;
  --jc-ok:         #10B981;

  --jc-paper:      #FFFFFF;
  --jc-paper-2:    #F1F5F9;
  --jc-line:       #E2E8F0;
  --jc-text:       #0F172A;
  --jc-text-2:     #1E293B;
  --jc-muted:      #64748B;

  --jc-on-ink:     #FFFFFF;
  --jc-on-ink-2:   rgba(255,255,255,.82);
  --jc-on-ink-3:   rgba(255,255,255,.66);
  --jc-hairline-ink: rgba(212,214,218,.18);

  --jc-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --jc-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  --jc-fs-xs:   0.8125rem;
  --jc-fs-sm:   0.9375rem;
  --jc-fs-base: 1.0625rem;
  --jc-fs-lg:   1.25rem;
  --jc-fs-xl:   clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --jc-fs-2xl:  clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
  --jc-fs-3xl:  clamp(2.5rem, 1.5rem + 4.4vw, 5rem);
  --jc-lh-tight: 1.06; --jc-lh-snug: 1.25; --jc-lh-body: 1.6;
  --jc-track-display: -0.02em;
  --jc-track-eyebrow: 0.14em;

  --jc-s-1: 4px;  --jc-s-2: 8px;  --jc-s-3: 12px; --jc-s-4: 16px;
  --jc-s-5: 24px; --jc-s-6: 32px; --jc-s-7: 48px; --jc-s-8: 64px;
  --jc-s-9: 96px; --jc-s-10: 128px;
  --jc-section-y: clamp(64px, 6vw + 32px, 120px);
  --jc-gutter:    clamp(20px, 4vw, 40px);
  --jc-max:       1160px;
  --jc-max-read:  720px;

  --jc-r-sm: 6px;
  --jc-r-md: 12px;
  --jc-r-lg: 20px;
  --jc-r-round: 999px;

  --jc-e-1: 0 1px 2px rgba(4,8,18,.18), 0 2px 8px rgba(4,8,18,.10);
  --jc-e-2: 0 2px 6px rgba(4,8,18,.16), 0 12px 32px rgba(4,8,18,.22);
  --jc-e-3: 0 4px 12px rgba(4,8,18,.20), 0 24px 60px rgba(4,8,18,.35);

  --jc-ease: cubic-bezier(.16,.84,.28,1.01);
  --jc-press: 60ms;
  --jc-sticky-h: 76px;
  --jc-nav-h: 84px;
}
@media (max-width:640px){ :root{ --jc-nav-h: 64px; } }

/* ───────────── BASE ─────────────
   Deliberately light: pages keep their own body size/leading. */
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--jc-nav-h) + 16px); -webkit-text-size-adjust:100%; }
body{ -webkit-font-smoothing:antialiased; }
button,input,select,textarea{ font-family:inherit; color:inherit; }   /* D7: no Arial in form controls */
a,button,[role="button"],label,summary,select{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
:focus-visible{ outline:2px solid var(--jc-signal); outline-offset:3px; }
:where(img,video){ max-width:100%; }
:where(img[width][height]){ height:auto; }   /* zero specificity: never beats a page rule */

/* ───────────── GROUNDS ───────────── */
.jc-ground-ink{ background:var(--jc-navy-800); color:var(--jc-on-ink);
  --jc-link:var(--jc-signal-hi); --jc-sub:var(--jc-on-ink-2); }
.jc-ground-paper{ background:var(--jc-paper); color:var(--jc-text);
  --jc-link:var(--jc-ocean); --jc-sub:var(--jc-muted); }
.jc-section{ padding-block:var(--jc-section-y); padding-inline:var(--jc-gutter); }
.jc-container{ max-width:var(--jc-max); margin-inline:auto; }
.jc-read{ max-width:var(--jc-max-read); }

/* ───────────── TYPE ───────────── */
.jc-h1,.jc-h2,.jc-h3{ font-family:var(--jc-font-display); letter-spacing:var(--jc-track-display); word-spacing:.02em; text-wrap:balance; }
.jc-h1{ font-size:var(--jc-fs-3xl); line-height:var(--jc-lh-tight); font-weight:800; }
.jc-h2{ font-size:var(--jc-fs-2xl); line-height:1.1;  font-weight:700; }
.jc-h3{ font-size:var(--jc-fs-xl);  line-height:var(--jc-lh-snug); font-weight:700; }
.jc-lead{ font-size:var(--jc-fs-lg); line-height:1.5; color:var(--jc-sub); max-width:46ch; }
.jc-eyebrow{ display:inline-block; font-size:var(--jc-fs-xs); font-weight:700; letter-spacing:var(--jc-track-eyebrow); text-transform:uppercase; color:var(--jc-chrome-300); margin-bottom:var(--jc-s-4); }
.jc-ground-paper .jc-eyebrow{ color:var(--jc-chrome-600); }
.jc-link{ color:var(--jc-link, var(--jc-ocean)); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  display:inline-flex; align-items:center; min-height:44px; }
.jc-link:hover{ text-decoration-thickness:2px; }

/* ───────────── BUTTON — machined chrome plate ───────────── */
.jc-btn{
  --_bg: linear-gradient(180deg, var(--jc-chrome-50) 0%, var(--jc-chrome-300) 58%, var(--jc-chrome-400) 100%);
  --_fg: var(--jc-ink);
  --_bd: rgba(10,10,10,.28);
  --_hl: inset 0 1px 0 rgba(255,255,255,.9);
  --_edge: inset 0 -2px 0 rgba(10,10,10,.18);
  --_ground: 0 1px 1px rgba(4,8,18,.25), 0 8px 22px rgba(4,8,18,.28);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 24px;
  font:600 var(--jc-fs-base)/1 var(--jc-font-body); letter-spacing:0; text-transform:none;
  color:var(--_fg); background:var(--_bg);
  border:1px solid var(--_bd); border-radius:var(--jc-r-sm);
  box-shadow:var(--_hl), var(--_edge), var(--_ground);
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform var(--jc-press) linear, box-shadow var(--jc-press) linear, filter .2s;
}
.jc-btn .icon,.jc-btn svg{ width:18px; height:18px; flex:none; }
@media (hover:hover){ .jc-btn:hover{ filter:brightness(1.04); } }
.jc-btn:active{
  transform:translateY(1px) scale(.985);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
}
.jc-ground-paper .jc-btn--primary,.jc-btn--primary.jc-btn--on-paper{
  --_bg: linear-gradient(180deg, var(--jc-navy-700) 0%, var(--jc-navy-800) 100%);
  --_fg: var(--jc-chrome-50);
  --_bd: rgba(10,10,10,.6);
  --_hl: inset 0 1px 0 rgba(255,255,255,.16);
  --_edge: inset 0 -2px 0 rgba(0,0,0,.35);
}
.jc-btn--secondary{
  --_bg: rgba(10,10,10,.28);
  --_fg: var(--jc-on-ink);
  --_bd: rgba(212,214,218,.55);
  --_hl: inset 0 1px 0 rgba(255,255,255,.14);
  --_edge: inset 0 -1px 0 rgba(0,0,0,.25);
  --_ground: 0 0 0 rgba(0,0,0,0);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.jc-ground-paper .jc-btn--secondary,.jc-btn--secondary.jc-btn--on-paper{
  --_bg: var(--jc-paper); --_fg: var(--jc-text); --_bd: var(--jc-line);
  --_hl: inset 0 1px 0 #fff; --_edge: inset 0 -1px 0 rgba(10,10,10,.06);
  --_ground: var(--jc-e-1);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.jc-btn--sm{ min-height:44px; padding:0 16px; font-size:var(--jc-fs-sm); }
.jc-btn--block{ display:flex; width:100%; }
.jc-btn[disabled],.jc-btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

/* ───────────── CARD ───────────── */
.jc-card{
  display:block; padding:var(--jc-s-5); border-radius:var(--jc-r-md);
  background:var(--jc-paper); border:1px solid var(--jc-line); box-shadow:var(--jc-e-1);
  color:inherit; text-decoration:none; text-align:left;
  transition:transform var(--jc-press) linear, box-shadow .2s var(--jc-ease), border-color .2s;
}
.jc-ground-ink .jc-card{ background:rgba(255,255,255,.05); border-color:var(--jc-hairline-ink); box-shadow:none; }
.jc-card__title{ font:700 var(--jc-fs-lg)/1.25 var(--jc-font-display); margin:0 0 var(--jc-s-1); }
.jc-card__body{ font-size:var(--jc-fs-sm); color:var(--jc-sub, var(--jc-muted)); margin:0; }
.jc-card__meta{ font-size:var(--jc-fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--jc-chrome-600); }
.jc-ground-ink .jc-card__meta{ color:var(--jc-chrome-300); }
@media (hover:hover){ a.jc-card:hover,button.jc-card:hover{ border-color:var(--jc-chrome-300); box-shadow:var(--jc-e-2); } }
a.jc-card:active,button.jc-card:active{ transform:scale(.988); box-shadow:none; }
.jc-card[aria-pressed="true"],.jc-card.is-selected{ border-color:var(--jc-signal); box-shadow:0 0 0 1px var(--jc-signal) inset; }

/* ───────────── CHIP ───────────── */
.jc-chip{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border-radius:var(--jc-r-sm); border:1px solid var(--jc-line);
  background:var(--jc-paper); color:var(--jc-text); font:600 var(--jc-fs-sm)/1.2 var(--jc-font-body); text-decoration:none;
  transition:transform var(--jc-press) linear, border-color .2s;
}
@media (hover:hover){ a.jc-chip:hover{ border-color:var(--jc-chrome-600); } }
.jc-ground-ink .jc-chip{ background:rgba(255,255,255,.06); border-color:var(--jc-hairline-ink); color:var(--jc-on-ink); }
.jc-chip:active{ transform:translateY(1px); }
.jc-chip[aria-selected="true"],.jc-chip.is-active{ background:var(--jc-chrome-300); color:var(--jc-ink); border-color:transparent; }
.jc-chiprow{ display:flex; gap:var(--jc-s-2); overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.jc-chiprow::-webkit-scrollbar{ display:none; }

/* ───────────── HERO (shared across inner templates) ───────────── */
.jc-hero{ position:relative; isolation:isolate; color:var(--jc-on-ink);
  padding:var(--jc-s-7) var(--jc-gutter) var(--jc-s-8);   /* body already pads for the fixed nav (nav.js) */
  background-color:var(--jc-navy-800); background-size:cover; background-position:center; text-align:center; }
.jc-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,36,61,.60) 0%, rgba(13,36,61,.42) 45%, rgba(19,44,68,.88) 100%); }
.jc-hero__media{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.jc-hero__actions{ display:flex; flex-wrap:wrap; gap:var(--jc-s-3); justify-content:center; margin-top:var(--jc-s-5); }
@media (max-width:640px){ .jc-hero__actions{ flex-direction:column; align-items:stretch; } }

/* ───────────── NAV (#jc-nav) — v2: moved here from nav.js so the bar is
   styled at first paint. Markup is static in each page; nav.js only wires it.
   Body budget for the fixed nav is set by class="jc-nav-pad" on <body>. ───────────── */
#jc-nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:8px 0;background:rgba(10,10,10,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,box-shadow .3s,padding .3s;font-family:"DM Sans",system-ui,sans-serif}
#jc-nav.jc-scrolled{background:#0A0A0A;box-shadow:0 2px 20px rgba(0,0,0,.3);padding:6px 0}
#jc-nav .jc-nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
#jc-nav .jc-nav-logo{display:inline-flex;align-items:center;text-decoration:none;position:relative;min-height:44px}
#jc-nav .jc-nav-logo img{display:block;height:68px;width:auto;filter:brightness(1.22) contrast(1.06) drop-shadow(0 1px 0 rgba(255,255,255,.25)) drop-shadow(0 4px 10px rgba(0,0,0,.6));transition:height .3s}
#jc-nav.jc-scrolled .jc-nav-logo img{height:52px}
@media (max-width:640px){#jc-nav,#jc-nav.jc-scrolled{padding:12px 0}#jc-nav .jc-nav-inner{padding:0 16px}#jc-nav .jc-nav-logo img,#jc-nav.jc-scrolled .jc-nav-logo img{height:40px}}
#jc-nav .jc-nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
#jc-nav .jc-nav-links a:not(.jc-btn){display:inline-flex;align-items:center;gap:10px;min-height:44px;color:rgba(255,255,255,.82);font-size:.9rem;font-weight:500;letter-spacing:.01em;padding:0 4px;transition:color .2s;text-decoration:none}
#jc-nav .jc-nav-links a:not(.jc-btn):hover{color:#fff}
#jc-nav .jc-ico{width:16px;height:16px;color:rgba(212,214,218,.7);display:none}
#jc-nav .jc-hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;background:none;border:none;width:44px;height:44px;padding:0;margin-right:-10px;position:relative;z-index:1002}
#jc-nav .jc-hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .2s;transform-origin:center}
#jc-nav .jc-hamburger.jc-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#jc-nav .jc-hamburger.jc-open span:nth-child(2){opacity:0}
#jc-nav .jc-hamburger.jc-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:768px){
  #jc-nav .jc-nav-links{display:none}
  #jc-nav .jc-nav-links.jc-open{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;background:#0A0A0A;padding:88px 24px 40px;gap:4px;z-index:999;align-items:stretch;height:100vh;height:100dvh;overflow-y:auto}
  #jc-nav .jc-nav-links.jc-open a:not(.jc-btn){font-size:1.05rem;min-height:52px}
  #jc-nav .jc-nav-links.jc-open .jc-ico{display:inline-block}
  #jc-nav .jc-nav-links.jc-open .jc-btn{margin-top:16px;width:100%}
  #jc-nav .jc-hamburger{display:flex}
}
body.jc-nav-pad{padding-top:84px}
@media (max-width:640px){body.jc-nav-pad{padding-top:64px}}

/* ───────────── STICKY CALL / QUOTE BAR (phones; injected by nav.js) ───────────── */
.jc-stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(19,44,68,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--jc-hairline-ink);
  display:grid; grid-template-columns:auto 1fr; gap:10px;
  transform:translateY(110%); transition:transform .35s var(--jc-ease);
}
.jc-stickybar.is-shown{ transform:none; }
html.tray-open .jc-stickybar,html.jc-typing .jc-stickybar{ transform:translateY(110%); }
.jc-stickybar .jc-btn{ min-height:52px; }
@media (min-width:769px){ .jc-stickybar{ display:none; } }
@media (max-width:768px){ html.has-stickybar body{ padding-bottom:calc(var(--jc-sticky-h) + env(safe-area-inset-bottom)); } }

/* ───────────── FOOTER (one footer for every inner page; rendered by nav.js) ───────────── */
footer.jc-footer{ background:linear-gradient(180deg, var(--jc-navy-800) 0%, var(--jc-ink) 100%); color:var(--jc-on-ink-2);
  padding:var(--jc-s-8) var(--jc-gutter) calc(var(--jc-s-6) + env(safe-area-inset-bottom)); text-align:left; font:400 var(--jc-fs-sm)/1.5 var(--jc-font-body); }
.jc-footer__inner{ max-width:var(--jc-max); margin:0 auto; display:grid; gap:var(--jc-s-6) var(--jc-s-5);
  grid-template-columns:minmax(220px,1.4fr) repeat(3, minmax(140px,1fr)); }
.jc-footer__brand b{ display:block; font:700 var(--jc-fs-lg)/1.2 var(--jc-font-display); color:var(--jc-on-ink); margin-bottom:var(--jc-s-2); }
.jc-footer__brand p{ margin:0 0 var(--jc-s-3); color:var(--jc-on-ink-3); }
footer.jc-footer h4{ font:700 var(--jc-fs-xs)/1 var(--jc-font-body); letter-spacing:var(--jc-track-eyebrow); text-transform:uppercase; color:var(--jc-chrome-300); margin:0 0 var(--jc-s-2); }
footer.jc-footer ul{ list-style:none; margin:0; padding:0; }
footer.jc-footer a{ color:var(--jc-on-ink-2); text-decoration:none; display:block; padding:12px 0; line-height:20px; }
footer.jc-footer a:hover{ color:var(--jc-on-ink); text-decoration:underline; text-underline-offset:3px; }
footer.jc-footer .jc-footer__tel{ color:var(--jc-on-ink); font-weight:600; }
.jc-footer__cities{ grid-column:1 / -1; border-top:1px solid var(--jc-hairline-ink); padding-top:var(--jc-s-5); }
.jc-footer__cities ul{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); column-gap:var(--jc-s-4); }
.jc-footer__legal{ grid-column:1 / -1; border-top:1px solid var(--jc-hairline-ink); padding-top:var(--jc-s-4); color:var(--jc-on-ink-3); font-size:var(--jc-fs-xs);
  display:flex; flex-wrap:wrap; gap:var(--jc-s-2) var(--jc-s-5); align-items:center; }
.jc-footer__legal a{ display:inline-block !important; }
@media (max-width:860px){
  .jc-footer__inner{ grid-template-columns:1fr 1fr; }
  .jc-footer__brand{ grid-column:1 / -1; }
  .jc-footer__cities ul{ grid-template-columns:1fr 1fr; }
}

/* ───────────── PRESS LAYER ───────────── */
[data-press]{ transition:transform var(--jc-press) linear; }
[data-press]:active{ transform:scale(.972); }
[data-press="text"]:active{ transform:translateY(1px); }
[data-press="card"]:active{ transform:scale(.988); }

/* ───────────── REVEAL — content is ALWAYS visible; motion is a bonus ───────────── */
@keyframes jc-rise{ from{ transform:translateY(14px); opacity:.001; } to{ transform:none; opacity:1; } }
html.jc-reveal-on [data-reveal].is-entering{ animation:jc-rise .7s var(--jc-ease) both; }

/* ───────────── TAP TARGETS (shared legacy chrome) ───────────── */
.breadcrumb a{ display:inline-block; padding:12px 0; }
.content li > a:only-child{ display:inline-block; padding-block:11px; }   /* link-list rows ≥44px; inline links in prose are exempt */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; }
  [data-press]:active,.jc-btn:active,.jc-card:active{ transform:none; }
}