/* ═══════════════════════════════════════════════════════════════
   OBX House Layer — T26 design system (HOME-SPEC: Four Seasons Yachts feel)
   Overrides obx-premium.css / obx-premium-inner.css / styles.css everywhere.
   Type: Bodoni Moda (self-hosted) for h1/h2 · Inter body · 1200px grid
   Palette: ink #0B1B2B · white · paper #F7F5F0 · hairline #D9D4C7 · brass #C6A664 (accents only)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --obx-ink:      #0B1B2B;
  --obx-white:    #FFFFFF;
  --obx-paper:    #F7F5F0;
  --obx-hairline: #D9D4C7;
  --obx-brass:    #C6A664;
  --obx-font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --obx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --obx-maxw: 1200px;
  --obx-pad: 24px;
  --obx-section: 120px;
  --obx-ease: cubic-bezier(.22,.61,.36,1);
}
@media (max-width: 960px) { :root { --obx-section: 72px; } }

/* ── Base reset onto the house system (every page) ───────────── */
.obx-premium, .obx-house, body { --ink: var(--obx-ink); --slate: #4C5A68; --line: var(--obx-hairline); }
.obx-premium, .obx-house {
  --abyss: var(--obx-ink);
  --abyss-900: #071420;
  --abyss-700: #12293F;
  --teal: var(--obx-ink);
  --teal-600: #071420;
  --teal-400: #2C4258;
  --brass: var(--obx-brass);
  --brass-300: var(--obx-brass);
  --pearl: var(--obx-paper);
  --mist: #EFEBE2;
  --ink: var(--obx-ink);
  --slate: #4C5A68;
  --white: #FFFFFF;
  --font-display: var(--obx-font-display);
  --font-body: var(--obx-font-body);
  --maxw: var(--obx-maxw);
  background: var(--obx-white);
  color: var(--obx-ink);
  font-family: var(--obx-font-body);
}

/* ── Grid: one centered 1200px container ─────────────────────── */
.obx-premium .wrap, .wrap {
  width: 100%;
  max-width: var(--obx-maxw);
  margin: 0 auto;
  padding: 0 var(--obx-pad);
}
.obx-premium .section { padding: var(--obx-section) 0; }
@media (min-width: 961px) { .obx-premium .wrap, .wrap { padding: 0 48px; } }

/* ── Type: Bodoni Moda on every h1/h2 (spec) ─────────────────── */
h1, h2 {
  font-family: var(--obx-font-display) !important;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.12;
  color: var(--obx-ink);
  overflow-wrap: anywhere;
}
h3, h4 { font-family: var(--obx-font-display); font-weight: 400; letter-spacing: .01em; color: var(--obx-ink); }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }

.obx-premium h1, .obx-premium h2, .obx-premium h3, .obx-premium h4 { color: var(--obx-ink); }
/* dark gradient panels: white headings (trust-band on rentals, membership-pitch on book) */
.obx-premium .trust-band h2, .obx-premium .trust-band h3, .obx-premium .trust-band p { color: var(--obx-white); }
.obx-premium .trust-band p { color: rgba(250,248,243,.82); }
.obx-premium .membership-pitch h3, .obx-premium .membership-pitch p { color: var(--obx-white); }
.obx-premium .membership-pitch p { color: rgba(250,248,243,.82); }
.obx-premium .section--navy h1, .obx-premium .section--navy h2, .obx-premium .section--navy h3, .obx-premium .section--navy h4, .obx-premium .emergency h1, .obx-premium .emergency h2, .obx-premium .emergency h3, .obx-premium .emergency h4, .obx-premium .final-cta h1, .obx-premium .final-cta h2, .obx-premium .final-cta h3, .obx-premium .final-cta h4 { color: var(--obx-white); }
/* Tier cards: light tiers get ink headings, dark (featured) tiers get white headings */
.obx-premium .tier--light h3, .obx-premium .tier--light h2 { color: var(--obx-ink); }
.obx-premium .tier--feat h3, .obx-premium .tier--feat h2 { color: var(--obx-white); }
.obx-premium .tier-card--featured h2, .obx-premium .tier-card--elite h2 { color: var(--obx-white); }

/* ── Eyebrows / labels: Inter 12-13px uppercase 0.18em ───────── */
.eyebrow {
  font-family: var(--obx-font-body) !important;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--obx-ink);
}
.obx-premium .section--navy .eyebrow, .obx-premium .hero .eyebrow,
.obx-premium .page-hero .eyebrow { color: rgba(255,255,255,.78); }
.eyebrow-rule { background: var(--obx-brass); }

/* ── Buttons: solid ink / outline / underlined text link ─────── */
.btn {
  font-family: var(--obx-font-body) !important;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 2px !important;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--obx-ease), color .2s, border-color .2s;
}
.btn-primary, .btn-brass, .btn-ghost {
  background: var(--obx-ink) !important; color: #fff !important;
  border-color: var(--obx-ink) !important;
}
.btn-primary:hover, .btn-brass:hover, .btn-ghost:hover { background: #071420 !important; border-color: #071420 !important; }
.btn-outline {
  background: transparent !important; color: var(--obx-ink) !important;
  border: 1px solid var(--obx-ink) !important;
}
.btn-outline:hover { background: rgba(11,27,43,.06) !important; }
.btn-light {
  background: #fff !important; color: var(--obx-ink) !important; border-color: #fff !important;
}
.btn-light:hover { background: rgba(255,255,255,.88) !important; }
/* White outline over dark media (hero, page-hero, navy sections) */
.obx-premium .hero .btn-ghost, .obx-premium .hero .btn-light,
.obx-premium .page-hero .btn-ghost, .obx-premium .page-hero .btn-light,
.obx-premium .section--navy .btn-ghost, .obx-premium .section--navy .btn-light,
.obx-premium .emergency .btn-ghost, .obx-premium .emergency .btn-light {
  background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.85) !important;
}
.obx-premium .hero .btn-ghost:hover, .obx-premium .page-hero .btn-ghost:hover,
.obx-premium .section--navy .btn-ghost:hover, .obx-premium .emergency .btn-ghost:hover {
  background: rgba(255,255,255,.1) !important; border-color: #fff !important;
}
/* Text link with underline (CALL NOW style) */
.btn-text, .text-link {
  background: none !important; border: 0 !important; padding: 6px 0;
  color: var(--obx-ink) !important; text-decoration: underline !important;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
  font-size: 13px !important; letter-spacing: .18em; font-weight: 500;
}
.section--navy .btn-text, .obx-premium .section--navy .btn-text,
.obx-premium .hero .btn-text { color: #fff !important; }

/* ── Hero: dark gradient top/bottom only (spec) ──────────────── */
.obx-premium .hero-media::after {
  background: linear-gradient(to bottom, rgba(7,20,32,.55) 0%, transparent 30%, transparent 68%, rgba(7,20,32,.62) 100%) !important;
}
.obx-premium .hero-overlay { background: none !important; }
.obx-premium .page-hero--img::after {
  background: linear-gradient(to bottom, rgba(7,20,32,.55) 0%, transparent 32%, transparent 66%, rgba(7,20,32,.6) 100%) !important;
}

/* ── Cards: square, hairline, paper ──────────────────────────── */
.obx-premium .card, .obx-premium .tier, .obx-premium .c-card,
.obx-premium .quote-card, .obx-premium .r-card, .obx-premium .feat .f {
  border-radius: 2px !important;
  border: 1px solid var(--obx-hairline);
  box-shadow: none !important;
  background: #fff;
}
.obx-premium .tier--feat, .obx-premium .c-card--navy, .obx-premium .section--navy {
  background: var(--obx-ink);
}
.obx-premium .card .ic, .obx-premium .svc-ic, .obx-premium .feat .f .ic, .obx-premium .c-card .ic {
  background: none !important; border: 1px solid var(--obx-hairline); border-radius: 2px;
}
.obx-premium .card .ic svg, .obx-premium .svc-ic svg, .obx-premium .feat .f .ic svg, .obx-premium .c-card .ic svg {
  color: var(--obx-ink);
}
.obx-premium .card .more, .obx-premium .r-cta .r-tel { color: var(--obx-ink) !important; }
.obx-premium .card .more:hover { color: #8A6A2F !important; }

/* Brass accent that still reads on light grounds (spec brass #C6A664 is 2.3:1 on white) */
.obx-premium .step .n { color: #8A6A2F !important; }
.obx-premium .r-stars, .obx-premium .stars, .obx-premium .r-big { color: #8A6A2F !important; }
.r-stars, .stars { color: #8A6A2F !important; }

/* Footer book button must read on the ink footer (was white-on-white after palette change) */
.btn-footer-book, .obx-premium .btn-footer-book {
  background: #fff !important; color: var(--obx-ink) !important; border-color: #fff !important;
  border-radius: 2px !important; font-size: 13px !important; letter-spacing: .18em !important;
  text-transform: uppercase !important; font-weight: 500 !important; padding: 14px 26px !important;
}
.btn-footer-book:hover, .obx-premium .btn-footer-book:hover { background: #fff !important; color: var(--obx-ink) !important; transform: none !important; box-shadow: none !important; }

/* Portal / outline button over ink must keep white text (was ink-on-ink) */
.obx-premium .tier--feat .btn-outline, .obx-premium .section--navy .btn-outline, .obx-premium .emergency .btn-outline {
  color: #fff !important; border-color: rgba(255,255,255,.85) !important; background: transparent !important;
}
.obx-premium .tier-card--featured .btn-outline, .obx-premium .tier-card--elite .btn-outline {
  color: #fff !important; border-color: rgba(255,255,255,.85) !important; background: transparent !important;
}

/* Long unbreakable page titles cause horizontal scroll — let them wrap */
.page-hero h1, .page-hero h2 { overflow-wrap: anywhere; }

/* Keep tier grids flush (no 8px overflow / horizontal scroll) */
.tiers-2, .tiers-3, .tier-card { min-width: 0; }
.tier-card--featured, .tier-card--elite { min-width: 0; }

/* About: lead copy on the navy band needs light text (was slate-on-navy) */
.obx-premium .section--navy .lead, .obx-premium .section--navy p.lead { color: rgba(255,255,255,.82) !important; }

/* ── Chips: square, hairline ─────────────────────────────────── */
.obx-premium .chip, .shop-filters .chip, .track-chips .chip {
  border-radius: 2px !important;
  font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--obx-font-body) !important;
}

/* ── Header: compact ink on white (the big hero-logo header is T28) ─ */
.site-header {
  background: #fff !important; border-bottom: 1px solid var(--obx-hairline);
}
.site-header .brand__name strong { font-family: var(--obx-font-display); font-weight: 400; letter-spacing: .08em; }
.header-phone, .portal-link { font-size: 13px !important; letter-spacing: .14em; text-transform: uppercase; }

/* ── Footer: ink ground, hairline columns, uppercase labels ───── */
.site-footer { background: var(--obx-ink) !important; color: #fff !important; }
.site-footer h4 {
  font-family: var(--obx-font-body) !important; font-size: 12px !important; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55) !important;
  margin-bottom: 18px;
}
.site-footer a { color: rgba(255,255,255,.82) !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer .btn, .site-footer .btn-footer-book, .site-footer a.btn { color: var(--obx-ink) !important; }

/* ── Reviews brass → hairline brass accents only ──────────────── */
.obx-premium .r-card, .obx-premium .r-card { border-left: 2px solid var(--obx-brass); }

/* The "Dark Mode" toggle is a pill button that breaks the square luxury system — remove it */
.theme-toggle, .header-cta .theme-toggle { display: none !important; }
.obx-premium .r-stars, .obx-premium .stars { color: #8A6A2F !important; }
.obx-premium .r-big { color: var(--obx-ink) !important; }

/* ── Misc polish ─────────────────────────────────────────────── */
.obx-premium .step .n { color: var(--obx-brass); font-family: var(--obx-font-display); }
.obx-premium .trust-mfr, .obx-premium .r-attr, .obx-premium .r-note { color: #4C5A68; }
a { color: var(--obx-ink); }
.obx-premium a:not(.btn):not(.more), .obx-premium .r-cta a:not(.btn) { text-decoration-color: rgba(11,27,43,.4); }
::selection { background: rgba(198,166,100,.28); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}