/* Web fonts (Inter, Josefin Sans, Playfair Display, Cormorant Garamond,
   Manrope) are loaded via a single <link> in partials/html-head.htm so
   they parallelize with the rest of the head. Don't @import here — it
   would block render until the import resolves. */

/* GLOBAL STYLES */
:root {
  /* Layout constants ported from design/Coastal Breeze Banner.html
     lines 15-16. Used by hero padding-top, sticky strip docking, and
     the wave-field convergence math. */
  --nav-h: calc(68px + env(safe-area-inset-top, 0px));
  --strip-h: 60px;
  --sticky-h: 60px;
  --strip-gap: 6px;
  /* Page-bg base + accent — used by .coastal-page-bg radial gradient
     and as the deep-night anchor for the hero content. */
  --bg-a: #050A1A;
  --bg-b: #02060F;
  /* Brand cyan derived from the logo's "Air" wordmark — used for
     accents, eyebrow chips, and active highlights. */
  --brand-cyan: rgb(140, 220, 255);
  --brand-cyan-soft: rgb(190, 230, 255);
  --brand-cyan-deep: rgb(60, 160, 230);
  /* Dark outline shadow stack — keeps cyan text readable on light
     watercolor patches and bright multimedia backgrounds. Ported
     from design/Banner.html lines 22-29. */
  --brand-cyan-outline:
    0 1px 0 rgba(2, 10, 28, 0.95),
    0 -1px 0 rgba(2, 10, 28, 0.95),
    1px 0 0 rgba(2, 10, 28, 0.95),
    -1px 0 0 rgba(2, 10, 28, 0.95),
    0 2px 8px rgba(0, 10, 30, 0.65);

  --primary-color: #0077be;
  --primary-hover: #1a75bc;
  --primary-dark: #0f172a;
  --secondary-color: #40b4e3;
  --accent-color: #f2e6d0;
  --text-color: #334155;
  --heading-color: #0f172a;
  --surface-color: #ffffff;
  --surface-alt: #f8fafc;
  /* Type system — two families only.
     Cormorant Garamond is the editorial voice (display, H2s, pull quotes,
     display numerics). Manrope is the utility voice (body, ledes, all
     small caps, buttons, strips, footer). Inter is intentionally dropped
     to avoid the third-family clash. */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-heading: 'Manrope', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale — single source of truth.
     The home page maps onto this scale; no ad-hoc px sizes per block. */
  --cb-fs-xs:   0.75rem;     /* 12px - micro caps */
  --cb-fs-sm:   0.8125rem;   /* 13px - eyebrow / small caps */
  --cb-fs-base: 1rem;        /* 16px - body */
  --cb-fs-md:   1.0625rem;   /* 17px - lede / sub-title */
  --cb-fs-lg:   1.125rem;    /* 18px - card title (serif) / list-entry title */
  --cb-fs-xl:   1.375rem;    /* 22px - testimonial quote / FAQ question */
  --cb-fs-2xl:  1.75rem;     /* 28px - mid-display (plan-name when serif) */
  --cb-fs-3xl:  3rem;        /* 48px - section H2 / plan amount */

  /* Caps tracking — fixed by font-size so display caps don't crowd
     and small caps stay legible. */
  --cb-track-caps-xs: 0.22em;   /* 12px caps */
  --cb-track-caps-sm: 0.18em;   /* 13-15px caps */
  --cb-track-caps-md: 0.12em;   /* 16-20px caps */
  --cb-track-display: -0.012em;
  --cb-track-h2: -0.008em;
  /* Coastal Breeze brand fonts (additive; opt-in via new home blocks) */
  --font-display-coastal: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body-coastal: 'Manrope', 'Inter', 'Segoe UI', sans-serif;
  /* Coastal Breeze brand palette (additive; opt-in via new home blocks) */
  --brand-paper: #F1ECE0;        /* limewash background */
  --brand-paper-deep: #02060F;   /* deep night for dark hero variant */
  --brand-paper-mid: #050A1A;    /* mid for hero gradients */
  --brand-ink: #2A2823;          /* warm dark text on paper */
  --brand-ink-soft: #6B655A;     /* secondary on paper */
  --brand-emerald: #0E8282;      /* gulf emerald, accent on light */
  --brand-emerald-deep: #08504E;
  --brand-coral: #F5A86E;        /* sunrise warm accent */
  --brand-coral-deep: #C36A3C;
  --luxury-tracking: 0;
  --luxury-gap: clamp(2rem, 5vw, 4rem);

  /* Fluid Typography Foundation (16px base)
     Scaling from 320px to 1440px viewport */
  --fluid-h1: clamp(2.25rem, 6vw, 3.75rem); /* 36px -> 60px */
  --fluid-h2: clamp(1.75rem, 4.5vw, 3rem); /* 28px -> 48px */
  --fluid-h3: clamp(1.5rem, 3.5vw, 2.25rem); /* 24px -> 36px */
  --fluid-h4: clamp(1.25rem, 2.5vw, 1.75rem); /* 20px -> 28px */
  --fluid-lede: clamp(1.125rem, 2vw, 1.5rem); /* 18px -> 24px */
  --fluid-eyebrow: clamp(0.75rem, 1.5vw, 1rem); /* 12px -> 16px */

  /* Fluid Spacing Tokens (Track: Responsive Scaling Beyond the Fold) */
  --fluid-pad-x: clamp(1.125rem, 5vw, 6rem);   /* 18px to 96px */
  --fluid-pad-y: clamp(2.5rem, 8vw, 7rem);     /* 40px to 112px */
  --fluid-gap:   clamp(1.5rem, 4vw, 3.5rem);   /* 24px to 56px */
  --fluid-stack: clamp(1rem, 2.5vw, 2rem);     /* 16px to 32px - for closer elements */

  /* Performance Optimized Glassmorphism Tokens 
     (Track: Background Filter Performance Optimization) */
  --glass-blur-xs: 2px;
  --glass-blur-sm: 6px;
  --glass-blur-md: 12px;
  --glass-blur-lg: 18px; /* Capped for performance; previously up to 24px */
  --glass-saturate: 140%;
}

/* Performance Adaptive Overrides */
@media (max-width: 768px) {
  :root {
    --glass-blur-xs: 0px;
    --glass-blur-sm: 1px;
    --glass-blur-md: 2px;
    --glass-blur-lg: 2px; /* Subtle frosting for luxury feel on mobile */
    --glass-saturate: 105%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --glass-blur-xs: none;
    --glass-blur-sm: none;
    --glass-blur-md: none;
    --glass-blur-lg: none;
    --glass-saturate: 100%;
  }
}

/* ===========================================================
   Dark theme overrides.
   Activated by data-theme="dark" on <html> (set by the no-flash
   init script in partials/html-head.htm before paint).

   Token taxonomy (see docs/journal/architecture/light-dark-theme.md):
     Group A — theme-mode tokens — FLIP here
     Group B — brand identity (primary/secondary/emerald/coral) — CONSTANT
     Group C — atmospheric (paper-deep/paper-mid) — CONSTANT
   =========================================================== */
:root[data-theme="dark"] {
  /* SSOT page background — html, body, and --le-bg all consume this. */
  --cb-page-bg: #02060F;

  /* Mode-aware Coastal Breeze brand surfaces */
  --brand-paper: #1B1812;          /* warm dark limewash analog */
  --brand-ink: #E8E3D8;            /* warm light text */
  --brand-ink-soft: #9A958A;       /* secondary on dark surface */

  /* Generic theme tokens — invert for legibility on dark page */
  --text-color: #c8cdd6;
  --heading-color: #f5f7fb;
  --surface-color: #0f1419;
  --surface-alt: #161c24;
}

/* ===========================================================
   Light theme overrides.
   Activated by data-theme="light" on <html>. Provides a coherent
   warm-white surface palette designed as the brand complement to
   the deep-night dark mode prototype (design/Coastal Breeze
   Banner.html). Card "glass" inverts to white-with-navy-tint;
   text flips to near-black navy + steel; brand cyan/coral hues
   are preserved as accents.
   =========================================================== */
:root[data-theme="light"] {
  /* SSOT page background — html, body, and --le-bg all consume this. */
  --cb-page-bg: #F4EFE2;

  /* Generic theme tokens — light surface palette */
  --text-color: #14243c;           /* prototype ink rgb(20,36,60) — deep navy on cream (was #2a3a50, too light) */
  --heading-color: #0d1a2e;
  --surface-color: #F4EFE2;        /* warm cream parchment (prototype bg) — was cold sky #f4f7fc → the "parched"/whitewash culprit */
  --surface-alt: #efe8d7;          /* warm cream-alt — was cold #eaf0f8 */

  /* Coastal Breeze brand surfaces in light mode — WARM CREAM paper to match the
     prototype (design/internal-pages_files/looks-editorial.css), NOT cold sky.
     A sky-blue base under reduced-opacity waves read as flat/washed-out. */
  --brand-paper: #F7F4ED;          /* warm paper (was cool sky #f4f7fc) */
  --brand-ink: #0d1a2e;            /* deep navy text */
  --brand-ink-soft: #324058;       /* prototype ink-soft rgb(50,64,88) */

  /* Page-bg base/accent — warm cream gradient anchors so the radial in
     .coastal-page-bg reads as warm parchment, not pale sky. Cold-blue anchors
     were a primary cause of the washed-out light theme. */
  --bg-a: #efe8d8;
  --bg-b: #f7f4ed;

  /* Card surfaces for the post-area sections — translucent CREAM (prototype
     --le-surface rgba(255,252,244,0.65)), NOT pure white. Opaque white boxes
     over the cream wash flattened the page into the "whitewashed" look. */
  --card-bg: rgba(255, 252, 244, 0.65);
  --card-bg-soft: rgba(255, 252, 244, 0.42);
  --card-border: rgba(40, 30, 20, 0.12);          /* warm hairline (prototype) — was navy-tinted */
  --card-border-strong: rgba(40, 30, 20, 0.22);
  --card-backdrop: blur(12px) saturate(130%);

  /* Light-mode text-shadow stack — kept VERY light so it just gives
     a hair of separation against pale wash without darkening the
     bg behind the glyph. */
  --light-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  /* Ensure the page background follows the theme — without this, white
     shows through during paint flips before any block-level background
     applies. Keep light-mode background neutral; dark-mode swaps it. */
  background: var(--surface-color, #ffffff);
  color: var(--text-color);
}

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

body {
  margin: 0;
  overflow-x: hidden;
  isolation: isolate;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-color);
  /* Body background follows the theme so non-home pages (which lack
     the coastal-page-bg) flip cleanly between light and dark instead
     of staying white in dark mode. */
  background: var(--surface-color, #ffffff);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

input,
button,
select,
textarea {
  font-family: var(--font-body);
}

/* Public Bootstrap compatibility layer.
   The public theme no longer loads the full Bootstrap CSS file; these are the
   grid/utility/component primitives still emitted by legacy CMS templates. */
:is(.container, .container-fluid) {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container { max-width: 540px; }
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
}

@media (min-width: 992px) {
  .container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.g-4 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}

.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 768px) {
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .order-md-1 { order: 1 !important; }
  .order-md-2 { order: 2 !important; }
  .d-md-block { display: block !important; }
}

@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
  .p-lg-5 { padding: 3rem !important; }
}

.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.flex-column { flex-direction: column !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.gap-2 { gap: 0.5rem !important; }
.text-center { text-align: center !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-muted { color: var(--block-muted-color, var(--generic-text-muted, #6c757d)) !important; }
.small, small { font-size: 0.875em; }
.lead { font-size: 1.25rem; font-weight: 300; }
.h5 { font-size: 1.25rem; }
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }
.img-fluid { max-width: 100%; height: auto; }
.rounded { border-radius: var(--generic-radius-md, 0.5rem) !important; }
.disabled { pointer-events: none; opacity: 0.65; }

.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--generic-radius-md, 0.5rem);
}

.alert-warning {
  color: #5f4600;
  background: #fff3cd;
  border-color: #ffeeba;
}

.alert-info {
  color: #064b5f;
  background: #d1ecf1;
  border-color: #bee5eb;
}

/* Fluid Component Foundation */
:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: clamp(2.75rem, 5vw, 3.25rem); /* 44px -> 52px */
  padding: 0.75rem 1.25rem;
}


h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading-color);
  font-weight: 700;
  letter-spacing: var(--luxury-tracking);
  line-height: 1.1;
}

h1 { font-size: var(--fluid-h1); }
h2 { font-size: var(--fluid-h2); }
h3 { font-size: var(--fluid-h3); }
h4 { font-size: var(--fluid-h4); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

.lede {
  font-size: var(--fluid-lede);
  line-height: 1.6;
}

.eyebrow {
  font-size: var(--fluid-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.luxury-text-hero {
  font-family: var(--font-display) !important;
  font-size: clamp(2.4rem, 7vw, 4.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

.luxury-text-focal {
  font-family: var(--font-heading) !important;
  font-size: var(--cb-fs-md) !important;   /* 17px — locks to lede scale */
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}

.luxury-spacing-top {
  padding-top: var(--luxury-gap);
}

.luxury-spacing-bottom {
  padding-bottom: var(--luxury-gap);
}

.luxury-spacing-y {
  padding-top: var(--luxury-gap);
  padding-bottom: var(--luxury-gap);
}

.luxury-container-airy {
  padding-left: clamp(1.5rem, 8vw, 4rem);
  padding-right: clamp(1.5rem, 8vw, 4rem);
}

.luxury-btn-striking {
  background: var(--primary-color) !important;
  border: none !important;
  color: white !important;
  min-height: clamp(3rem, 6vw, 3.5rem);
  padding-inline: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 700 !important;
  font-size: var(--fluid-eyebrow, 0.875rem) !important;
  border-radius: 6px !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 119, 190, 0.2);
}

.luxury-btn-striking:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.3);
}

/* REVEAL ON SCROLL */
.reveal-init {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.reveal-init.is-revealed,
.is-revealed .reveal-init {
  opacity: 1;
  transform: translateY(0);
}

.is-revealed .reveal-init {
  transition-delay: 150ms;
}

.is-revealed .reveal-init:nth-child(2) { transition-delay: 250ms; }
.is-revealed .reveal-init:nth-child(3) { transition-delay: 350ms; }
.is-revealed .reveal-init:nth-child(4) { transition-delay: 450ms; }

/* Stagger delays for better flow */
.builder-block:nth-child(even).reveal-init {
  transition-delay: 0.1s;
}

.luxury-text-hero.reveal-init {
  transition-duration: 1.2s;
  transform: translateY(50px);
}

/* Fallback: force-reveal after 6s via animation, so content is never permanently hidden */
@keyframes _reveal-fallback {
  to { opacity: 1; transform: translateY(0); }
}
.reveal-init {
  animation: _reveal-fallback 0.01s 6s forwards;
}

/* Always visible in print / prefers-reduced-motion */
@media print, (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

.hero-block--has-image .hero-block__overlay {
  background-attachment: fixed; /* Fallback for no JS */
}

/* Parallax Background */
.parallax-bg {
  background-attachment: scroll; /* Default, will be overridden by JS */
  background-position: center top; /* Start position */
  background-repeat: no-repeat;
  background-size: cover;
  will-change: background-position;
}
a, button{
  transition: color 0.3s ease;
}

/* Default content-area link color override — Bootstrap's #007bff
   has contrast 3.71 against the pale light-mode body bg (rgb 244 247
   252) which fails WCAG AA (4.5:1). Replace with #0056b3 (the
   `.article-content a` color used in article-content.css) which gives
   ~6.0:1 against the pale bg and ~5.4:1 against pure white. Scoped
   to <main> so navigation, footers, etc. keep their own bespoke
   colors. The dark-mode variant uses brand-cyan for legibility. */
main a:not([class]),
main a.text-body,
main ul.list-unstyled a {
  color: #0056b3;
}
main a:not([class]):hover,
main ul.list-unstyled a:hover {
  color: #003d80;
}
:root[data-theme="dark"] main a:not([class]),
:root[data-theme="dark"] main a.text-body,
:root[data-theme="dark"] main ul.list-unstyled a {
  color: #fff;
}
:root[data-theme="dark"] main a:not([class]):hover,
:root[data-theme="dark"] main ul.list-unstyled a:hover {
  color: rgb(190, 230, 255);
}
#pcm-search {
  display: none !important;
}
#canvas {
  margin: 0 auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.btn {
  border-radius: var(--generic-radius-sm, 6px);
  min-height: clamp(2.75rem, 5vw, 3.25rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  font-size: var(--fluid-eyebrow, 0.875rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.breadcrumb-strip {
  background-color: #40b4e3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.65rem 0;
  margin-bottom: 0;
}

.breadcrumb-strip .container {
  min-height: 0;
}

.breadcrumb-strip .breadcrumb-nav {
  margin: 0;
}

.breadcrumb-strip .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.breadcrumb-strip .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(0, 0, 0, 0.45);
}

.breadcrumb-strip .breadcrumb a {
  color: #000000;
  font-weight: 500;
}

.breadcrumb-strip .breadcrumb a:hover,
.breadcrumb-strip .breadcrumb a:focus {
  color: #000000;
  text-decoration: underline;
  opacity: 0.85;
}

.breadcrumb-strip .breadcrumb-item.active span {
  color: #000000;
  font-weight: 700;
}
.no-posts-message{
  display:none;
}
/* Removed `h1 { color: white }` — it was a sitewide override that
   made the H1 invisible on listing pages (white-on-white). The
   correct heading color comes from the `h1, h2, h3, h4, h5, h6 {
   color: var(--heading-color) }` rule above, which flips correctly
   for dark mode. Hero blocks override locally where needed. */
h1,h2,h3,h4,h5{
  font-weight:bold;
}
h2:focus {
  outline: 5px auto -webkit-focus-ring-color;
}
hr {
  color: #eee !important;
  background-color: #eee !important;
  border-color: #eee !important;
  height: .5px !important;
}
/* Global button rule: previously forced bg/color sitewide with
   !important, which made gallery-lightbox + other component
   buttons read as white-on-cyan (ratio 1.84, failing AA).
   Removed !important and the global color/bg — individual button
   components (Bootstrap btn-*, lightbox, carousel) now control
   their own colors. The base rule below keeps a consistent
   border-radius and padding defaults so unstyled buttons still
   look like buttons. */
button:not([class]) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: white;
}
button:not([class]):hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
button.full-width{
  width:100%;
}
.bold-blue{
  font-weight:bold;
  color:var(--primary-hover);
}
.content-container{
  min-height:400px;
  padding:40px;
}
.site-content-container{
  min-height:600px;
}
.post-list{
  list-style-type:none;
}
.post-list li{
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:5px solid #eee;
  width:calc(100% - 40px);
}
.container{
  min-height:auto;
}
/* MAIN NAV STYLES */
.main-nav{
  margin-bottom:0px !important;
  padding-left:40px !important;
  padding-right: 40px !important;
}
.main-nav.fixed{
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 0 10px rgba(0,0,0,.3);
  z-index: 4;
  padding-top: env(safe-area-inset-top, 0px);
}
.fixed.main-nav nav {
  margin-top: 0px !important;
}
.fixed.main-nav img {
  height: 40px;
}
.main-nav.bg-blue{
  background-color:var(--primary-hover);
}

/* 1200+ */
@media (min-width: 1200px) {
  .row.footer-awards {
    margin-top: -3rem;
    z-index: 1;
  }
}
/* UTIL STYLES */
.no-margin{
  margin:0 !important;
}
img.full-width{
  width:100%;
  margin-top:10px;
}
.link-gray{
  text-transform: uppercase;
  color:#555;
  text-decoration: none;
}
.large-padding-top{
  padding-top:100px;
}
.transition{
  transition: color 0.3s ease;
}
.padding-top{
  padding-top:65px !important;
}
hr{
  color:#999;
  background-color:#999;
  border-color:#999;
  height:1px;
}
.float-left{
  float:left;
}
.float-right{
  float:right;
}
.align-right{
  text-align:right;
}
.align-left{
  text-align:left;
}
.align-center{
  text-align:center;
}
.centered-flex {
  justify-content: center;
}
.large-padding, .large-side-padding {
  padding: 40px 0;
}
.btn-lg{
  border:2px solid var(--primary-color);
  min-height: 3.25rem;
  padding-inline: clamp(1.75rem, 5vw, 3.25rem);
}
.btn-sm{
  min-height: 2.25rem;
  padding-inline: 0.9rem;
  font-size: 0.78rem;
}
.btn-block{
  display: flex;
  width: 100%;
}
.btn-primary{
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.btn-light{
  background: #f8f9fa;
  border-color: #f8f9fa;
  color: #0f172a;
}
.btn-danger{
  background: #b4232a;
  border-color: #b4232a;
  color: #fff;
}
.btn-outline-primary{
  background: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.btn-outline-secondary{
  background: transparent;
  border-color: rgba(100, 116, 139, 0.65);
  color: var(--text-color);
}
.btn-outline-light{
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}
.btn-secondary{
  background:#fff !important;
  color:var(--primary-hover)  !important;
  border-color:var(--primary-hover) !important;
}
.btn-primary:hover {
  background: #fff !important;
  border-color: var(--primary-hover) !important;
  color: var(--primary-hover) !important;
}
.btn-secondary:hover{
  color:#fff !important;
}
.btn-light:hover,
.btn-danger:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover{
  text-decoration: none;
  transform: translateY(-1px);
}

.blue-color{
  color:var(--primary-hover);
}
.purple-color{
  color:#1b3354;
}
.yellow-color{
  color:var(--secondary-color);
}
.green-color{
  color:var(--primary-color);
}
.orange-color{
  color:var(--primary-hover);
}
.red-color{
  color:var(--primary-dark);
}
.light-blue-color{
  color:var(--secondary-color);
}
.dark-blue-color{
  color:#1b3354;
}
/* Previously: `section { padding: 0 80px !important; overflow: hidden }`
   sitewide, then later just `overflow: hidden`. The hidden value
   breaks position: sticky descendants (category-strip blocks need
   sticky to dock under the nav as you scroll). Switching to `clip`
   gives the same visual containment (legacy content doesn't bleed
   outside its box) without forcing the element to become a scroll
   container, so sticky children continue to work. */
section {
  overflow: visible;
}
.max-width-row{
  max-width: 900px;
  margin: auto;
  margin-top:40px;
  margin-bottom:40px;
}
.imgborder {
  border:1px solid #ccc;
}

.seventyper {
  width: 70% !important;
}

.margin-top-20 {
  margin-top:20px !important;
}

/* --------------------------------------------------
   2026-05-13 Accessibility Contrast Reinforcement
--------------------------------------------------- */

.main-nav .nav-link {
  color: #4a5568 !important;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
  color: #1b3354 !important;
}

.navbar-light .navbar-nav .nav-link,
.navbar .nav-link {
  color: #4a5568 !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #1b3354 !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: #f8fafc !important;
}

.main-nav.bg-blue .nav-link {
  color: #f8fafc !important;
}

.main-nav.bg-blue .nav-link:hover,
.main-nav.bg-blue .nav-link:focus {
  color: #dbeafe !important;
}

footer.bg-dark,
footer.bg-dark p,
footer.bg-dark a,
footer.bg-dark span,
footer.bg-dark .text-white {
  color: #f8fafc !important;
}

footer.bg-dark a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Skip-link: hidden until keyboard focus, then appears above the nav so
   keyboard users can jump directly to main content. Pure a11y polish —
   doesn't affect any other styling. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--primary-color, #0077be);
  color: #ffffff;
  padding: 0.65rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.15s ease-in-out;
  z-index: 9999;
  border-bottom-right-radius: 4px;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #ffffff;
  outline-offset: -6px;
}

/* =========================================================================
   Coastal Breeze primary navigation (partials/header.htm).
   Ported from /design/Coastal Breeze Banner.html lines 90-309.
   Uses --brand-* tokens from :root (additive, declared above) and the
   Coastal Breeze fonts (--font-display-coastal / --font-body-coastal).
   Each token falls back to a literal hex so the nav still paints if a
   token was renamed upstream. The nav itself lives outside .builder-blocks
   so it doesn't participate in the per-page palette cascade — that's
   intentional: it's site chrome, not page content.
   ========================================================================= */

.cb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  color: rgb(240, 248, 255);
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif);
  /* Blend into the hero: prototype's top-down fade-to-transparent (Banner.html
     .nav, lines 180-181) — darkens the top edge for nav-text legibility, melts
     to zero alpha (= page bg --bg-b #02060F at 0%) into the hero waves below. */
  background: linear-gradient(180deg, rgba(2, 6, 15, 0.55) 0%, rgba(2, 6, 15, 0) 100%);
  backdrop-filter: blur(var(--glass-blur-xs));
  -webkit-backdrop-filter: blur(var(--glass-blur-xs));
  /* NOTE: `padding` is deliberately NOT transitioned. It only changes at
     breakpoints (10px↔14px), never on scroll; because the nav is align-items:center
     with a fixed-height logo, easing padding eased the nav's OWN height, which
     dragged the vertically-centred action buttons slowly into place on every
     resize ("trucking") and fed a stale --nav-h to the hero grid. Only the
     on-scroll darkening (background + backdrop-filter) is transitioned. */
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
  border-bottom: none;
}

/* While the viewport is actively resizing, suppress ALL nav transitions so layout
   changes snap instantly (no eased "trucking", no backdrop-filter tweening through
   a non-none value that would briefly trap the position:fixed drawer in a
   containing block). Re-enabled ~200ms after resize settles (header.htm), so the
   on-scroll darkening still animates normally. Robust + global, not per-element. */
/* Scope to the BAR elements (logo, links, actions, toggle) + the nav box itself —
   NOT the .cb-nav__panel drawer or .cb-nav__backdrop, whose open/close slide is an
   intentional interaction that must never be interrupted by a resize tick. */
html.cb-resizing .cb-nav,
html.cb-resizing .cb-nav::before,
html.cb-resizing .cb-nav::after,
html.cb-resizing .cb-nav__brand, html.cb-resizing .cb-nav__brand *,
html.cb-resizing .cb-nav__toggle, html.cb-resizing .cb-nav__toggle *,
html.cb-resizing .cb-nav__links, html.cb-resizing .cb-nav__links a,
html.cb-resizing .cb-nav__actions, html.cb-resizing .cb-nav__actions * { transition: none !important; }

.cb-nav.is-scrolled {
  /* Once past the hero, deepen the top stop for legibility over arbitrary
     content but keep it a top-down fade (not an opaque frosted slab): low
     bottom alpha + lighter blur so it still blends. */
  background: linear-gradient(180deg, rgba(2, 6, 15, 0.85) 0%, rgba(2, 6, 15, 0.15) 100%);
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  will-change: transform;
}

/* --- Navigation Style Variants --- */

/* Style B: Always Frosted — maintains the scrolled look even at top */
.cb-nav--style-b:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(2, 6, 15, 0.55) 0%, rgba(2, 6, 15, 0.35) 100%);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  will-change: transform;
}

/* Style C: Solid — high contrast, no transparency/blur */
.cb-nav--style-c {
  background: rgb(2, 6, 15);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.cb-nav--style-c.is-scrolled {
  background: rgb(1, 4, 10);
}
:root[data-theme="light"] .cb-nav--style-b:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(244, 247, 252, 0.75) 0%, rgba(244, 247, 252, 0.52) 100%);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  will-change: transform;
}

  will-change: transform;
}



:root[data-theme="light"] .cb-nav--style-c {
  background: #f4f7fc;
  color: #0d1a2e;
}
:root[data-theme="light"] .cb-nav--style-c.is-scrolled {
  background: #eef2f8;
}

.cb-nav__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}

.cb-nav.is-scrolled .cb-nav__brand {
  transform: scale(0.95);
}

.cb-nav__brand-img {
  height: 84px;
  width: auto;
  transform: translateY(-6px); /* Move up to center in slim bar while allowing bleed */
  /* Soft lift only. Do not add 1px drop-shadow strokes here; the logo text
     assets are intentionally fill-only and should not regain an outline. */
  filter:
    drop-shadow(0 8px 18px rgba(0, 20, 60, 0.38));
}

.cb-theme-logo {
  display: inline-grid;
  align-items: center;
  justify-items: start;
}

.cb-theme-logo.cb-logo-bg,
.cb-logo-bg {
  --cb-logo-h: 84px;
  --cb-logo-w: 125.67px;
  display: inline-block;
  width: var(--cb-logo-w);
  height: var(--cb-logo-h);
  background-image: var(--cb-logo-dark);
  background-image: var(--cb-logo-dark-display, var(--cb-logo-dark));
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

:root[data-theme="light"] .cb-logo-bg,
.le[data-theme="light"] .cb-logo-bg {
  background-image: var(--cb-logo-light, var(--cb-logo-dark));
  background-image: var(--cb-logo-light-display, var(--cb-logo-dark-display, var(--cb-logo-light, var(--cb-logo-dark))));
}

.cb-theme-logo > img,
.cb-logo-theme {
  grid-area: 1 / 1;
}

.cb-nav__brand-logo.cb-logo-bg {
  --cb-logo-h: 84px;
  --cb-logo-w: 125.67px;
  transform: translateY(-6px);
  filter:
    drop-shadow(0 8px 18px rgba(0, 20, 60, 0.38));
}

.site-footer__logo.cb-logo-bg {
  --cb-logo-h: 52px;
  --cb-logo-w: 77.8px;
  margin-bottom: 1rem;
  opacity: 0.90;
}

.cb-logo-theme--light {
  display: none !important;
}

:root[data-theme="light"] .cb-logo-theme--dark {
  display: none !important;
}

:root[data-theme="light"] .cb-logo-theme--light {
  display: block !important;
}

/* Removed scroll-slimming height overrides to maintain constant brand scale */

.cb-nav__brand-text {
  font-family: var(--font-display-coastal, 'Cormorant Garamond', serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgb(240, 248, 255);
  text-shadow: 0 2px 6px rgba(0, 10, 30, 0.65);
}

.cb-nav__panel {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: flex-end;
}

.cb-nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cb-nav__item { position: relative; }

.cb-nav__link {
  color: rgb(240, 248, 255);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.95;
  transition: opacity .25s, color .25s;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 8, 24, 0.95), 0 0 20px rgba(0, 10, 30, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.cb-nav__caret { transition: transform .25s; }

.cb-nav__item.is-open > .cb-nav__link .cb-nav__caret,
.cb-nav__item:hover > .cb-nav__link .cb-nav__caret { transform: rotate(180deg); }

.cb-nav__link:hover,
.cb-nav__link:focus-visible { color: rgb(190, 230, 255); }

.cb-nav__item.is-open > .cb-nav__link { color: rgb(190, 230, 255); }

.cb-nav__item.is-open > .cb-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 230, 255, 0.8), transparent);
}

/* Flyout panel */
.cb-flyout {
  position: absolute;
  /* Dock a clean gap BELOW the nav band, not the centred link. The link is
     vertically centred in the ~104px nav, so `100% + 22px` left the panel top
     under the bar. (--nav-h/2 - 8px) ≈ the distance from the link bottom to just
     below the nav bottom, tracking the live nav height at any logo size. */
  top: calc(100% + var(--nav-h, 104px) / 2 - 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 480px;
  max-width: 92vw;
  padding: 16px;
  /* Solid enough to read as a CONTAINED panel over the dark hero (was 0.86 ->
     dark-on-dark, edges vanished). */
  background: rgba(8, 18, 36, 0.97);
  border: 1px solid rgba(190, 230, 255, 0.34);
  border-radius: 16px;
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));

  box-shadow: 0 30px 80px -20px rgba(0, 10, 30, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 60;
}

.cb-nav__item.is-open > .cb-flyout,
.cb-nav__item:hover > .cb-flyout,
.cb-nav__item:focus-within > .cb-flyout {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Transparent bridge fills the gap between nav link and flyout panel so
   :hover on the item doesn't drop while the mouse travels between them. */
@media (min-width: 1200px) {
  .cb-nav {
    display: grid;
    /* auto | 1fr | auto: logo and actions take their natural width; the links
       column is the flexible gap between them, so the entries center BETWEEN the
       logo and the phone/action buttons (not in the viewport, which let the wide
       actions overlap the links). */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
  }

  /* Pin every bar item to row 1. The actions sit BEFORE the links in DOM order
     (they live outside the panel now), and the links carry an explicit
     grid-column:2 while actions carry grid-column:3 — without an explicit row,
     CSS auto-placement would wrap the lower-numbered links onto a 2nd row,
     doubling the nav height. grid-row:1 forces a single row regardless of order. */
  .cb-nav__brand,
  .cb-nav__links,
  .cb-nav__actions { grid-row: 1; }

  .cb-nav__brand {
    grid-column: 1;
    justify-self: start;
  }

  /* Expand panel content into the parent grid */
  .cb-nav__panel {
    display: contents;
  }

  .cb-nav__links {
    grid-column: 2;
    justify-self: stretch;
    justify-content: center;
    min-width: 0;
    margin-inline: clamp(24px, 3vw, 48px);
  }

  .cb-nav__actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 28px;
  }

  /* Overflow-driven label collapse (DESKTOP only; the <=1199 drawer already shows
     icons). header.htm adds .is-condensed when the full-label bar would overflow /
     squeeze the links, so labels stay as long as they FIT and collapse to icons
     exactly at the point they'd overflow — not at a fixed viewport guess. */
  .cb-nav.is-condensed .cb-nav__actions { gap: 12px; }
  .cb-nav.is-condensed .cb-nav__duo-label,
  .cb-nav.is-condensed .cb-nav__cta-num,
  .cb-nav.is-condensed .cb-nav__cta-sep,
  .cb-nav.is-condensed .cb-nav__cta-label { display: none; }
  .cb-nav.is-condensed .cb-nav__duo-row,
  .cb-nav.is-condensed .cb-nav__cta {
    width: 44px;          /* 44px = accessible touch/click target */
    min-width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  @media (max-width: 1500px) {
    .cb-nav__actions { gap: 12px; }
    .cb-nav__duo-label,
    .cb-nav__cta-num,
    .cb-nav__cta-sep,
    .cb-nav__cta-label { display: none; }
    .cb-nav__duo-row,
    .cb-nav__cta {
      width: 44px;
      min-width: 44px;
      height: 44px;
      padding: 0;
      justify-content: center;
    }
  }

  .cb-nav__item--has-flyout::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -24px;
    right: -24px;
    /* Bridge must reach the panel, which now docks ~(--nav-h/2) below the link —
       keep them connected so hover doesn't drop while travelling to the flyout. */
    height: calc(var(--nav-h, 104px) / 2);
  }
}

/* Right-anchor the locations flyout so it never clips the viewport edge. */
@media (min-width: 1200px) {
  .cb-flyout--locations {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-6px);
  }
  .cb-nav__item.is-open > .cb-flyout--locations,
  .cb-nav__item:hover > .cb-flyout--locations,
  .cb-nav__item:focus-within > .cb-flyout--locations {
    transform: translateX(0) translateY(0);
  }
  .cb-flyout--locations::before {
    left: auto;
    right: 48px;
    transform: translateX(0) rotate(45deg);
  }
}

/* Tighten gaps at mid-desktop so nav fits without wrapping. */
@media (min-width: 1200px) and (max-width: 1400px) {
  .cb-nav { padding: 14px 28px; }
  .cb-nav__panel { gap: 16px; }
  .cb-nav__links { gap: 20px; }
}

.cb-flyout::before {
  content: '';
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: rgba(8, 18, 36, 0.97);
  border-left: 1px solid rgba(190, 230, 255, 0.34);
  border-top: 1px solid rgba(190, 230, 255, 0.34);
}

.cb-flyout__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* minmax(0,1fr) (not bare 1fr): bare 1fr keeps min-width:auto, so a long entry
     title/description forces the column wider than the panel and column 2 spills
     OUTSIDE the flyout. minmax(0,…) lets the two columns shrink to fit the panel,
     so every entry stays CONTAINED; the description truncates instead of overflowing. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.cb-flyout--locations .cb-flyout__list {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Row separator: border-bottom on every li; strip from the last grid row.
   nth-last-child(2):nth-child(odd) catches col-1 of the final full row
   in a 2-column layout so both cells in that row lose their border. */
.cb-flyout__list li {
  border-bottom: 1px solid rgba(190, 230, 255, 0.09);
}
.cb-flyout__list li:last-child,
.cb-flyout__list li:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

.cb-flyout__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  color: rgb(232, 244, 255);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s, color .2s;
  overflow: hidden;
  min-width: 0;
}

.cb-flyout__list a:hover,
.cb-flyout__list a:focus-visible {
  background: linear-gradient(90deg, transparent 0%, rgba(120, 200, 255, 0.10) 14%, rgba(120, 200, 255, 0.10) 86%, transparent 100%);
  outline: none;
}

.cb-flyout__glyph {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: linear-gradient(140deg, rgba(120, 200, 255, 0.20), rgba(255, 150, 130, 0.12));
  color: rgb(180, 224, 255);
}

.cb-flyout__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.18;
  min-width: 0;
}

.cb-flyout__meta strong {
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-flyout__meta small {
  font-size: 12px;
  font-weight: 400;
  color: rgb(204, 220, 240);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-flyout__foot {
  margin-top: 10px;
  padding: 12px 14px 4px;
  border-top: 1px solid rgba(190, 230, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cb-flyout__all {
  color: rgb(210, 232, 250);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}

.cb-flyout__all:hover,
.cb-flyout__all:focus-visible {
  color: rgb(220, 245, 255);
  background: linear-gradient(90deg, transparent 0%, rgba(120, 200, 255, 0.08) 16%, rgba(120, 200, 255, 0.08) 84%, transparent 100%);
  outline: none;
}

/* CTAs */
.cb-nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cb-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(190, 230, 255, 0.38);
  border-radius: 999px;
  color: rgb(232, 244, 255);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(10, 30, 60, 0.30);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  transition: border-color .25s, background .25s, transform .25s, color .25s;
  white-space: nowrap;
}

.cb-nav__duo-row > svg,
.cb-nav__cta > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.cb-nav__cta-label-short { display: none; }

@media (max-width: 1400px) {
  .cb-nav__cta-label-full { display: none; }
  .cb-nav__cta-label-short { display: inline; }
}


.cb-nav__cta:hover,
.cb-nav__cta:focus-visible {
  border-color: rgba(190, 230, 255, 0.7);
  background: rgba(40, 80, 140, 0.40);
  transform: translateY(-1px);
  outline: none;
}

.cb-nav__cta-num {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgb(248, 252, 255);
  font-variant-numeric: tabular-nums;
}

.cb-nav__cta-sep {
  width: 1px; height: 14px;
  background: rgba(190, 230, 255, 0.32);
}

.cb-nav__cta--contact {
  background: linear-gradient(140deg, rgba(255, 180, 150, 0.22), rgba(120, 200, 255, 0.12));
  border-color: rgba(255, 200, 180, 0.45);
}

.cb-nav__cta--contact:hover,
.cb-nav__cta--contact:focus-visible {
  border-color: rgba(255, 220, 200, 0.75);
  background: linear-gradient(140deg, rgba(255, 180, 150, 0.35), rgba(120, 200, 255, 0.20));
}

.cb-nav__cta--emergency {
  position: relative;
  padding-right: 30px;
  border-color: rgba(255, 118, 86, 0.58);
  color: #ffe8df;
  background:
    linear-gradient(140deg, rgba(155, 24, 20, 0.62), rgba(58, 13, 24, 0.44)),
    rgba(18, 8, 16, 0.48);
  box-shadow:
    0 0 0 1px rgba(255, 218, 150, 0.08) inset,
    0 8px 16px rgba(88, 12, 14, 0.18);
  isolation: isolate;
}

.cb-nav__cta--emergency > * {
  position: relative;
  z-index: 1;
}

.cb-nav__cta--emergency::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 42% 46%, rgba(255, 76, 58, 0.36), rgba(255, 76, 58, 0.17) 48%, rgba(255, 76, 58, 0.08) 74%, transparent 100%),
    linear-gradient(140deg, rgba(255, 118, 86, 0.10), transparent 68%);
  box-shadow:
    0 0 0 1px rgba(255, 138, 108, 0.10) inset,
    0 0 16px rgba(255, 74, 58, 0.12) inset;
  opacity: 0.56;
  pointer-events: none;
  z-index: 0;
  animation:
    cb-emergency-glow-arrive 980ms ease-out 280ms both,
    cb-emergency-soft-glow 2.8s ease-in-out 1.15s infinite;
}

.cb-nav__cta--emergency::after {
  --cb-emergency-badge-scale: 1;
  content: '24/7';
  position: absolute;
  top: -7px;
  right: 7px;
  box-sizing: border-box;
  min-width: 31px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(92, 0, 0, 0.70);
  background: linear-gradient(180deg, #ff4538 0%, #df1717 48%, #9d0303 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 1px 1px rgba(54, 0, 0, 0.92),
    0 0 2px rgba(54, 0, 0, 0.58);
  box-shadow:
    0 0 0 1px rgba(255, 236, 230, 0.28) inset,
    0 3px 10px rgba(80, 8, 8, 0.52);
  transform: scale(var(--cb-emergency-badge-scale));
  transform-origin: top right;
  z-index: 2;
  animation: cb-emergency-badge-pulse 2.8s ease-in-out 1.15s infinite;
}

.cb-nav__cta > .cb-nav__emergency-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  filter:
    drop-shadow(0 0 4px rgba(255, 62, 48, 0.38))
    drop-shadow(0 2px 4px rgba(40, 0, 0, 0.28));
  animation: cb-emergency-icon-attention 920ms cubic-bezier(.22, .9, .24, 1.2) 520ms both;
}

.cb-nav__emergency-icon-field {
  fill: #ff3b30;
}

.cb-nav__emergency-icon-cross {
  fill: #fff7f3;
}

.cb-nav__emergency-icon-shine {
  stroke: rgba(255, 236, 226, 0.78);
  stroke-width: 0.8;
  stroke-linecap: round;
}

.cb-nav__cta--emergency:hover,
.cb-nav__cta--emergency:focus-visible {
  border-color: rgba(255, 166, 118, 0.82);
  color: #fff6ef;
  background:
    linear-gradient(140deg, rgba(198, 42, 28, 0.72), rgba(82, 18, 28, 0.54)),
    rgba(34, 10, 18, 0.56);
  box-shadow:
    0 0 0 1px rgba(255, 218, 150, 0.16) inset,
    0 10px 20px rgba(104, 16, 14, 0.24);
}

@keyframes cb-emergency-glow-arrive {
  0% {
    opacity: 0;
    box-shadow:
      0 0 0 1px rgba(255, 138, 108, 0.04) inset,
      0 0 4px rgba(255, 74, 58, 0.04) inset;
  }
  55% {
    opacity: 0.86;
    box-shadow:
      0 0 0 1px rgba(255, 168, 132, 0.18) inset,
      0 0 24px rgba(255, 74, 58, 0.22) inset;
  }
  100% {
    opacity: 0.56;
    box-shadow:
      0 0 0 1px rgba(255, 138, 108, 0.10) inset,
      0 0 16px rgba(255, 74, 58, 0.12) inset;
  }
}

@keyframes cb-emergency-soft-glow {
  0%, 100% {
    opacity: 0.42;
    box-shadow:
      0 0 0 1px rgba(255, 138, 108, 0.08) inset,
      0 0 12px rgba(255, 74, 58, 0.10) inset;
  }
  45% {
    opacity: 0.82;
    box-shadow:
      0 0 0 1px rgba(255, 168, 132, 0.20) inset,
      0 0 22px rgba(255, 78, 62, 0.26) inset,
      0 0 34px rgba(255, 42, 32, 0.16) inset;
  }
}

@keyframes cb-emergency-badge-pulse {
  0%, 100% {
    transform: translateY(0) scale(var(--cb-emergency-badge-scale));
    box-shadow:
      0 0 0 1px rgba(255, 236, 230, 0.28) inset,
      0 3px 10px rgba(80, 8, 8, 0.52);
  }
  45% {
    transform: translateY(-2px) scale(calc(var(--cb-emergency-badge-scale) * 1.10));
    box-shadow:
      0 0 0 1px rgba(255, 245, 240, 0.48) inset,
      0 6px 20px rgba(132, 10, 10, 0.58),
      0 0 14px rgba(255, 72, 58, 0.34);
  }
}

@keyframes cb-emergency-icon-attention {
  0% { transform: rotate(-8deg) scale(0.98); opacity: 0.88; }
  42% { transform: rotate(6deg) scale(1.20); opacity: 1; }
  70% { transform: rotate(-2deg) scale(1.04); }
  100% { transform: rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cb-nav__cta--emergency,
  .cb-nav__cta--emergency::before,
  .cb-nav__cta--emergency::after,
  .cb-nav__emergency-icon {
    animation: none !important;
  }
}

@media (min-width: 1200px) {
  .cb-nav.is-condensed .cb-nav__cta--emergency::after {
    top: 2px;
    right: -2px;
    --cb-emergency-badge-scale: 0.90;
  }

  @media (max-width: 1500px) {
    .cb-nav__cta--emergency::after {
      top: 2px;
      right: -2px;
      --cb-emergency-badge-scale: 0.90;
    }
  }
}

/* Call + Text as a single horizontal pill with number centered between */
.cb-nav__phone-duo {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px solid rgba(190, 230, 255, 0.38);
  border-radius: 999px;
  background: rgba(10, 30, 60, 0.30);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  overflow: hidden;
}

.cb-nav__duo-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  color: rgb(232, 244, 255);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.cb-nav__duo-row--call {
  border-right: 1px solid rgba(190, 230, 255, 0.18);
}

.cb-nav__duo-row--text {
  font-size: 11px;
  color: rgb(200, 226, 255);
}

.cb-nav__duo-row:hover,
.cb-nav__duo-row:focus-visible {
  background: linear-gradient(90deg, transparent 0%, rgba(40, 80, 140, 0.38) 18%, rgba(40, 80, 140, 0.38) 82%, transparent 100%);
  outline: none;
}

/* Theme toggle (sun/moon) */
.cb-nav__theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(190, 230, 255, 0.28);
  border-radius: 50%;
  background: rgba(10, 30, 60, 0.22);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  color: rgb(190, 226, 255);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .25s, background .25s, color .25s, transform .25s;
}
.cb-nav__theme-toggle:hover,
.cb-nav__theme-toggle:focus-visible {
  border-color: rgba(190, 230, 255, 0.65);
  background: rgba(40, 80, 140, 0.40);
  transform: translateY(-1px);
  outline: none;
}

/* Show sun in dark mode (→ switch to light), moon in light mode (→ switch to dark) */
:root[data-theme="dark"] .cb-nav__theme-icon--moon { display: none; }
:root[data-theme="dark"] .cb-nav__theme-icon--sun  { display: block; }
:root:not([data-theme="dark"]) .cb-nav__theme-icon--sun  { display: none; }
:root:not([data-theme="dark"]) .cb-nav__theme-icon--moon { display: block; }

/* Light mode: darker border/color so it's visible on a light nav */
:root:not([data-theme="dark"]) .cb-nav__theme-toggle {
  border-color: rgba(20, 40, 80, 0.22);
  color: rgb(40, 70, 110);
  background: rgba(220, 235, 255, 0.45);
}
:root:not([data-theme="dark"]) .cb-nav__theme-toggle:hover,
:root:not([data-theme="dark"]) .cb-nav__theme-toggle:focus-visible {
  border-color: rgba(20, 40, 80, 0.45);
  background: rgba(200, 220, 255, 0.65);
}

/* Mobile toggler (hidden on desktop) */
.cb-nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(190, 230, 255, 0.38);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.cb-nav__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: rgb(240, 248, 255);
  border-radius: 2px;
}

.cb-nav__toggle-bar + .cb-nav__toggle-bar { margin-top: 5px; }

/* The fixed nav overlays page content. Hero blocks (and the video-hero,
   headline-block) intentionally bleed under it for the hero-meets-banner
   look in the design. For pages that DON'T open with a full-bleed hero,
   give the main content a top offset matching the nav height so content
   isn't hidden underneath. We use :has() to scope the offset to pages
   without a hero opening block — browsers without :has support fall back
   to the default (no offset), which mirrors current behavior.
   Hero block heights vary; ~120px clears the nav at default zoom. */
.site-content { padding-top: 0; }

@supports selector(:has(*)) {
  /* Also exclude any page that opens with a full-bleed interior cover (.le-cover —
     used by category parallax heroes AND article covers) so its 100vh fold isn't
     pushed below the viewport by a top offset. */
  .site-content:not(:has(.block-wrapper--hero-block:first-child)):not(:has(.block-wrapper--video-hero:first-child)):not(:has(.le-cover)) {
    padding-top: 120px;
  }
  @media (max-width: 1199px) {
    .site-content:not(:has(.block-wrapper--hero-block:first-child)):not(:has(.block-wrapper--video-hero:first-child)):not(:has(.le-cover)) {
      padding-top: 90px;
    }
  }
}

/* Override Bootstrap navbar defaults that might bleed through */
nav.cb-nav { box-shadow: none; }

/* ===========================================================
   Coastal Breeze nav — LIGHT MODE OVERRIDES
   The defaults above hardcode near-white text + deep-night
   surfaces designed for the dark prototype. In light mode the
   page background is pale, so we flip nav text to deep navy
   and surfaces to translucent white with a navy border.
   =========================================================== */
:root[data-theme="light"] .cb-nav {
  color: #0d1a2e;
  /* Prototype warm-linen fade (Banner.html light nav, line 1396) — blends into
     the cream page-bg waves instead of the prior cool-gray transparent. */
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.65) 0%, rgba(255, 250, 238, 0) 100%);
  backdrop-filter: var(--glass-blur-xs);
  -webkit-backdrop-filter: var(--glass-blur-xs);
  border-bottom: none;
}
:root[data-theme="light"] .cb-nav--style-b:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(244, 247, 252, 0.75) 0%, rgba(244, 247, 252, 0.52) 100%);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  will-change: transform;
}

  will-change: transform;
}




:root[data-theme="light"] .cb-nav__brand-text {
  color: rgb(240, 248, 255);
  text-shadow: 0 2px 6px rgba(0, 10, 30, 0.65);
}

:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__brand-text {
  color: #0d1a2e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Logo lift: keep it soft so the fill-only logo text does not regain an outline. */
:root[data-theme="light"] .cb-nav__brand-img {
  filter:
    drop-shadow(0 8px 18px rgba(13, 26, 46, 0.18));
}

:root[data-theme="light"] .cb-nav__brand-logo.cb-logo-bg {
  filter:
    drop-shadow(0 8px 18px rgba(13, 26, 46, 0.18));
}

:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__brand-img {
  filter:
    drop-shadow(0 8px 18px rgba(13, 26, 46, 0.18));
}

:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__brand-logo.cb-logo-bg {
  filter:
    drop-shadow(0 8px 18px rgba(13, 26, 46, 0.18));
}

:root[data-theme="light"] .cb-nav__link {
  color: rgb(240, 248, 255);
  text-shadow: 0 2px 8px rgba(0, 8, 24, 0.95), 0 0 20px rgba(0, 10, 30, 0.45);
}

:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__link {
  color: #0d1a2e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.4);
}

:root[data-theme="light"] .cb-nav__link:hover,
:root[data-theme="light"] .cb-nav__link:focus-visible,
:root[data-theme="light"] .cb-nav__item.is-open > .cb-nav__link {
  color: #1a4575;
}

:root[data-theme="light"] .cb-nav__item.is-open > .cb-nav__link::after {
  background: linear-gradient(90deg, transparent, rgba(26, 69, 117, 0.55), transparent);
}

/* Flyout panel — white card with navy text */
:root[data-theme="light"] .cb-flyout {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(20, 50, 100, 0.22);
  box-shadow: 0 30px 80px -20px rgba(15, 30, 60, 0.25);
}

:root[data-theme="light"] .cb-flyout::before {
  background: rgba(255, 255, 255, 0.98);
  border-left: 1px solid rgba(20, 50, 100, 0.22);
  border-top: 1px solid rgba(20, 50, 100, 0.22);
}

:root[data-theme="light"] .cb-flyout__list a {
  color: #0d1a2e;
}

:root[data-theme="light"] .cb-flyout__list a:hover,
:root[data-theme="light"] .cb-flyout__list a:focus-visible {
  background: linear-gradient(90deg, transparent 0%, rgba(120, 200, 255, 0.18) 14%, rgba(120, 200, 255, 0.18) 86%, transparent 100%);
}

:root[data-theme="light"] .cb-flyout__glyph {
  background: linear-gradient(140deg, rgba(60, 160, 230, 0.18), rgba(255, 150, 130, 0.12));
  color: #1a4575;
}

:root[data-theme="light"] .cb-flyout__meta small {
  color: #4a6080;
}

:root[data-theme="light"] .cb-flyout__foot {
  border-top: 1px solid rgba(20, 50, 100, 0.15);
}

:root[data-theme="light"] .cb-flyout__all {
  color: #1a4575;
}

:root[data-theme="light"] .cb-flyout__all:hover,
:root[data-theme="light"] .cb-flyout__all:focus-visible {
  color: #0d1a2e;
  background: linear-gradient(90deg, transparent 0%, rgba(120, 200, 255, 0.12) 16%, rgba(120, 200, 255, 0.12) 84%, transparent 100%);
}

/* CTAs in light mode — navy text, navy border, white-ish glass */
:root[data-theme="light"] .cb-nav__cta {
  color: rgb(240, 248, 255);
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__cta {
  color: #0d1a2e;
  border-color: rgba(20, 50, 100, 0.32);
  background: rgba(255, 255, 255, 0.55);
}

:root[data-theme="light"] .cb-nav__cta:hover,
:root[data-theme="light"] .cb-nav__cta:focus-visible {
  border-color: rgba(255, 255, 255, 0.7);
}

:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__cta:hover,
:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__cta:focus-visible {
  border-color: rgba(20, 50, 100, 0.6);
  background: rgba(255, 255, 255, 0.85);
}

:root[data-theme="light"] .cb-nav__cta-num {
  color: rgb(248, 252, 255);
}

:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__cta-num {
  color: #0d1a2e;
}

/* (non-scrolled light cta-sep is set navy in the light-nav legibility block below) */
:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__cta-sep {
  background: rgba(20, 50, 100, 0.28);
}

/* Duo pill light theme */
:root[data-theme="light"] .cb-nav__phone-duo {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__phone-duo {
  border-color: rgba(20, 50, 100, 0.32);
  background: rgba(255, 255, 255, 0.55);
}

:root[data-theme="light"] .cb-nav__duo-row {
  color: rgb(240, 248, 255);
}

:root[data-theme="light"] .cb-nav.is-scrolled .cb-nav__duo-row {
  color: #0d1a2e;
}
:root[data-theme="light"] .cb-nav__duo-row--call {
  border-bottom-color: rgba(20, 50, 100, 0.16);
}
:root[data-theme="light"] .cb-nav__duo-row:hover,
:root[data-theme="light"] .cb-nav__duo-row:focus-visible {
  background: linear-gradient(90deg, transparent 0%, rgba(230, 240, 255, 0.55) 18%, rgba(230, 240, 255, 0.55) 82%, transparent 100%);
}

/* Contact CTA — warm coral tint instead of cyan */
:root[data-theme="light"] .cb-nav__cta--contact {
  background: linear-gradient(140deg, rgba(245, 168, 110, 0.35), rgba(120, 200, 255, 0.18));
  border-color: rgba(195, 106, 60, 0.45);
  color: #0d1a2e;
}

/* LIGHT-THEME NAV LEGIBILITY OVER THE LIGHT HERO ───────────────────────────
   The light hero is cream, but the nav text shipped WHITE + dark text-shadow (a
   treatment that only reads over DARK imagery), so the links / Call / Text were
   near-invisible at scroll 0. The hero was deliberately lightened earlier, which
   exposed this. Light theme = light backgrounds everywhere, so the nav text should
   be navy from the start — mirroring the already-navy is-scrolled state for a
   consistent, legible bar at the top AND when scrolled. */
:root[data-theme="light"] .cb-nav__link {
  color: #0d1a2e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
:root[data-theme="light"] .cb-nav__brand-text {
  color: #0d1a2e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root[data-theme="light"] .cb-nav__cta,
:root[data-theme="light"] .cb-nav__cta-num,
:root[data-theme="light"] .cb-nav__duo-row { color: #0d1a2e; }
:root[data-theme="light"] .cb-nav__cta-sep { background: rgba(20, 50, 100, 0.28); }
:root[data-theme="light"] .cb-nav__phone-duo,
:root[data-theme="light"] .cb-nav__cta:not(.cb-nav__cta--contact):not(.cb-nav__cta--emergency) {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(20, 50, 100, 0.26);
}

:root[data-theme="light"] .cb-nav__cta--contact:hover,
:root[data-theme="light"] .cb-nav__cta--contact:focus-visible {
  border-color: rgba(195, 106, 60, 0.7);
  background: linear-gradient(140deg, rgba(245, 168, 110, 0.55), rgba(120, 200, 255, 0.30));
}

:root[data-theme="light"] .cb-nav__cta.cb-nav__cta--emergency {
  color: #4d120a;
  border-color: rgba(166, 42, 24, 0.38);
  background:
    linear-gradient(140deg, rgba(255, 210, 186, 0.88), rgba(255, 232, 206, 0.72)),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.48) inset,
    0 10px 24px rgba(143, 53, 24, 0.16);
}

:root[data-theme="light"] .cb-nav__cta.cb-nav__cta--emergency:hover,
:root[data-theme="light"] .cb-nav__cta.cb-nav__cta--emergency:focus-visible {
  color: #3c0d06;
  border-color: rgba(166, 42, 24, 0.58);
  background:
    linear-gradient(140deg, rgba(255, 190, 158, 0.96), rgba(255, 222, 184, 0.86)),
    rgba(255, 255, 255, 0.78);
}

/* ── Mobile toggler — hamburger → X animation ──────────────────────── */
.cb-nav__toggle-bar {
  transition: transform 0.28s ease, opacity 0.2s ease;
  transform-origin: center;
}
.cb-nav.is-open .cb-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cb-nav.is-open .cb-nav__toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.cb-nav.is-open .cb-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer head — hidden on desktop */
.cb-nav__drawer-head { display: none; }

/* Backdrop — hidden on desktop */
.cb-nav__backdrop { display: none; }

/* ── Mobile / Tablet — full-height slide-in drawer ─────────────────── */
@media (max-width: 1199px) {
  .cb-nav {
    padding: 14px 20px;
    /* 3-zone grid: logo (left) | actions (centred in viewport) | hamburger
       (right). 1fr side columns are equal, so the auto centre column — the
       action icons — is centred in the viewport regardless of logo/burger
       widths. The fixed-position panel & backdrop drop out of the grid. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    /* IMPORTANT: backdrop-filter creates a containing block for fixed-position
       descendants. The drawer panel (.cb-nav__panel) is position:fixed and
       must escape this 66px-tall bar to fill the viewport — keeping a
       backdrop-filter here would trap it. Drop the blur on mobile; the
       gradient alone provides adequate atmospheric depth at this scale.
       !important + the is-scrolled override below guarantee it stays none so the
       drawer is ALWAYS positioned to the viewport (never jumps). */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Scrolling on mobile must not re-introduce the blur (it would re-create the
     containing block and re-trap the drawer). */
  .cb-nav.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .cb-nav__brand  { grid-column: 1; justify-self: start; }
  .cb-nav__actions { grid-column: 2; justify-self: center; }
  .cb-nav__toggle { grid-column: 3; justify-self: end; }
  .cb-nav__brand-img { height: 48px; transform: translateY(-4px); }
  .cb-nav__brand-logo.cb-logo-bg { --cb-logo-h: 48px; --cb-logo-w: 71.81px; transform: translateY(-4px); }
  /* Logo height reduction on scroll removed */
  .cb-nav__toggle {
    display: inline-flex;
    flex-direction: column;   /* stack the 3 bars into a hamburger (was a row -> clobbered) */
    /* Min 44px touch target */
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  /* Hide brand image once drawer is open — the drawer has its own header */
  .cb-nav.is-open .cb-nav__brand { visibility: hidden; }

  /* Backdrop */
  .cb-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 149;
    background: rgba(0, 6, 20, 0.68);
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
    will-change: transform;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
  }
  .cb-nav.is-open .cb-nav__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer panel — always in DOM, hidden by transform.
     Background derives from --cb-page-bg so the drawer matches whichever
     theme the page is in. The 0.97 alpha keeps a faint scrim of the page
     behind it; the box-shadow lifts it visually. */
  .cb-nav__panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 100vw);
    height: 100vh;
    height: 100dvh;
    z-index: 150;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--cb-page-bg) 96%, transparent);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
    border-left: 1px solid rgba(190, 230, 255, 0.12);
    box-shadow: -16px 0 48px rgba(0, 6, 20, 0.55);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0.32s;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    flex: none;
  }
  .cb-nav.is-open .cb-nav__panel {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s;
  }

  /* Drawer header row */
  .cb-nav__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(190, 230, 255, 0.10);
    flex-shrink: 0;
  }
  .cb-nav__drawer-logo {
    height: 44px;
    width: auto;
    opacity: 0.9;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
  }
  .cb-nav__drawer-logo.cb-logo-bg {
    --cb-logo-h: 44px;
    --cb-logo-w: 65.82px;
    width: var(--cb-logo-w);
  }
  .cb-nav__drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    background: rgba(190, 230, 255, 0.07);
    border: 1px solid rgba(190, 230, 255, 0.18);
    border-radius: 50%;
    color: rgb(190, 230, 255);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }
  .cb-nav__drawer-close:hover { background: rgba(190, 230, 255, 0.18); }

  /* Nav links list */
  .cb-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px 0;
    flex: 1;
  }
  .cb-nav__item { border-bottom: 1px solid rgba(190, 230, 255, 0.07); }
  .cb-nav__item:last-child { border-bottom: none; }
  .cb-nav__link {
    padding: 16px 20px;
    min-height: 48px;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    letter-spacing: 0.16em;
  }

  /* Accordion flyout inside drawer */
  .cb-flyout {
    position: static;
    transform: none !important;
    width: 100%;
    max-width: none;
    max-height: 0;
    overflow: hidden;
    background: rgba(190, 230, 255, 0.035);
    border: none;
    border-top: 1px solid rgba(190, 230, 255, 0.07);
    box-shadow: none;
    padding: 0;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    transition: max-height 0.32s ease;
    z-index: auto;
    border-radius: 0;
  }
  .cb-nav__item.is-open > .cb-flyout { max-height: 640px; }
  .cb-flyout::before { display: none; }
  .cb-flyout__list {
    grid-template-columns: 1fr;
    padding: 4px 0;
  }
  .cb-flyout__list li:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid rgba(190, 230, 255, 0.07);
  }
  .cb-flyout__list a {
    padding: 12px 20px 12px 32px;
    min-height: 44px;
    font-size: 14px;
    border-radius: 0;
  }
  .cb-flyout__foot {
    padding: 10px 20px 14px 32px;
    border-top: none;
    background: none;
  }
  .cb-flyout__all { font-size: 12px; letter-spacing: 0.14em; }

  /* Actions — compact ICON ROW on the bar (no longer stacked in the drawer).
     Labels, the phone number and the separator collapse so Call · Text ·
     Schedule · theme stay on one centred line beside the hamburger at every
     width. aria-labels in the markup keep each control accessible. */
  .cb-nav__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-top: none;
    width: auto;
    flex-shrink: 0;
    justify-content: center;
  }
  /* Call|Text stay a 2-icon pill (the --call border becomes the divider) */
  .cb-nav__phone-duo {
    flex: none;
    width: auto;
    border-radius: 999px;
  }
  .cb-nav__duo-row {
    flex: none;
    justify-content: center;
    padding: 0;
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  .cb-nav__cta {
    flex: none;
    justify-content: center;
    padding: 0;
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 999px;
  }
  .cb-nav__cta > svg {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  .cb-nav__cta--emergency::after {
    top: 2px;
    right: 2px;
    --cb-emergency-badge-scale: 0.92;
  }
  .cb-nav__duo-label,
  .cb-nav__cta-num,
  .cb-nav__cta-sep,
  .cb-nav__cta-label { display: none; }
  .cb-nav__theme-toggle { align-self: center; width: 44px; height: 44px; }

  /* Smallest phones: 44px is the a11y target but four 44px icons + logo + burger
     can't fit ≤360px, so step down to 36px ONLY there (still fits to 320px with no
     nav overflow; 36px remains WCAG 2.5.8 AA-compliant). Normal phones (≥361px) keep
     the full 44px AAA/HIG targets above — the prior ≤400px breakpoint shrank 361–400px
     unnecessarily (those widths fit 44px), so it was tightened to ≤360px. */
  @media (max-width: 360px) {
    .cb-nav__actions { gap: 6px; }
    .cb-nav__duo-row,
    .cb-nav__cta,
    .cb-nav__theme-toggle { width: 36px; min-width: 36px; height: 36px; }
    .cb-nav__cta--emergency::after {
      --cb-emergency-badge-scale: 0.82;
      right: -1px;
    }
  }
}

/* ── Light theme — drawer overrides ────────────────────────────────── */
@media (max-width: 1199px) {
  :root[data-theme="light"] .cb-nav__panel {
    background: color-mix(in srgb, var(--cb-page-bg) 97%, white);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
    will-change: transform;
    border-left-color: rgba(20, 50, 100, 0.12);
  }
  :root[data-theme="light"] .cb-nav__drawer-head {
    border-bottom-color: rgba(20, 50, 100, 0.10);
  }
  :root[data-theme="light"] .cb-nav__drawer-close {
    background: rgba(20, 50, 100, 0.06);
    border-color: rgba(20, 50, 100, 0.18);
    color: #0d1a2e;
  }
  :root[data-theme="light"] .cb-nav__item {
    border-bottom-color: rgba(20, 50, 100, 0.08);
  }
  :root[data-theme="light"] .cb-flyout {
    background: rgba(20, 50, 100, 0.04);
    border-top-color: rgba(20, 50, 100, 0.08);
  }
  :root[data-theme="light"] .cb-nav__actions {
    border-top-color: rgba(20, 50, 100, 0.10);
  }
  :root[data-theme="light"] .cb-nav__toggle {
    border-color: rgba(20, 50, 100, 0.32);
  }
  :root[data-theme="light"] .cb-nav__toggle-bar {
    background: #0d1a2e;
  }

  /* Light theme: the action ICONS now live on the bar over the cream hero, so
     they must be navy on a light chip — the white used over the dark-theme hero
     is invisible here. Independent of scroll state (light page = light bg). */
  :root[data-theme="light"] .cb-nav__duo-row,
  :root[data-theme="light"] .cb-nav__cta,
  :root[data-theme="light"] .cb-nav__cta-num,
  :root[data-theme="light"] .cb-nav__theme-toggle { color: #0d1a2e; }
  :root[data-theme="light"] .cb-nav__phone-duo,
  :root[data-theme="light"] .cb-nav__cta:not(.cb-nav__cta--contact):not(.cb-nav__cta--emergency),
  :root[data-theme="light"] .cb-nav__theme-toggle {
    background: rgba(255, 255, 255, 0.66);
    border-color: rgba(20, 50, 100, 0.28);
  }
  /* Drawer link text legible on the light (cream) drawer */
  :root[data-theme="light"] .cb-nav__link { color: #0d1a2e; }
}

@media (max-width: 480px) {
  .cb-nav {
    padding: 12px 16px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .cb-nav__actions {
    gap: 4px;
    max-width: 100%;
  }
  .cb-nav__brand-img { height: 42px; }
  .cb-nav__brand-logo.cb-logo-bg { --cb-logo-h: 42px; --cb-logo-w: 62.84px; }
}

@media (max-width: 380px) {
  .cb-nav__actions { gap: 2px; }
}

/* ── Breadcrumb trail — inner builder/article pages ─────────────────────── */
.breadcrumb-trail {
    padding: 12px 56px;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: rgba(190, 220, 255, 0.55);
    font-family: var(--font-body-coastal, var(--font-body));
    position: relative;
    z-index: 2;
}
.breadcrumb-trail__list {
    list-style: none;
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.breadcrumb-trail__item + .breadcrumb-trail__item::before {
    content: '›';
    padding: 0 8px;
    opacity: 0.4;
}
.breadcrumb-trail__item a {
    color: inherit;
    text-decoration: none;
}
.breadcrumb-trail__item a:hover { color: rgb(190, 226, 255); }
.breadcrumb-trail__item[aria-current="page"] { color: rgba(190, 220, 255, 0.85); }

/* Light theme — swap muted cyan for muted navy */
:root[data-theme="light"] .breadcrumb-trail {
    color: rgba(13, 26, 46, 0.50);
}
:root[data-theme="light"] .breadcrumb-trail__item a:hover {
    color: var(--primary-color);
}
:root[data-theme="light"] .breadcrumb-trail__item[aria-current="page"] {
    color: rgba(13, 26, 46, 0.80);
}

@media (max-width: 768px) {
  .breadcrumb-trail { padding: 10px 20px; }
}

/* =========================================================================
   Custom 404 — dark coastal brand
   Centered content over the coastal-page-bg wave field.
   The 404 numeral uses Cormorant Garamond (--font-display) in brand-cyan.
   ========================================================================= */

.cb-404 {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--nav-h, 68px) clamp(1.5rem, 6vw, 4rem) clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.cb-404__inner {
  max-width: 560px;
  width: 100%;
}

/* Large "404" display numeral — Cormorant Garamond, brand cyan */
.cb-404__eyebrow {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(6rem, 22vw, 14rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-cyan, rgb(140, 220, 255));
  text-shadow: var(--brand-cyan-outline,
    0 1px 0 rgba(2, 10, 28, 0.95),
    0 -1px 0 rgba(2, 10, 28, 0.95),
    1px 0 0 rgba(2, 10, 28, 0.95),
    -1px 0 0 rgba(2, 10, 28, 0.95),
    0 2px 8px rgba(0, 10, 30, 0.65));
  margin: 0 0 0.15em;
  font-feature-settings: "onum" 1, "lnum" 1;
}

/* "This page drifted out to sea." */
.cb-404__heading {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--brand-ink, #E8E3D8);
  letter-spacing: -0.01em;
  margin: 0 0 0.75em;
}

/* Subtext */
.cb-404__sub {
  font-family: var(--font-body-coastal, 'Manrope', sans-serif);
  font-size: var(--cb-fs-md, 1.0625rem);
  color: rgba(190, 220, 255, 0.65);
  line-height: 1.6;
  margin: 0 0 2.25rem;
}

/* CTA link row */
.cb-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
}

.cb-404__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-body-coastal, 'Manrope', sans-serif);
  font-size: var(--cb-fs-sm, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7em 1.6em;
  border-radius: 50px;
  border: 1.5px solid rgba(140, 220, 255, 0.35);
  color: var(--brand-cyan-soft, rgb(190, 230, 255));
  background: rgba(140, 220, 255, 0.06);
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.cb-404__link:hover,
.cb-404__link:focus-visible {
  color: var(--brand-paper-deep, #02060F);
  background: var(--brand-cyan, rgb(140, 220, 255));
  border-color: var(--brand-cyan, rgb(140, 220, 255));
}

/* Primary "Back Home" link — filled */
.cb-404__link--primary {
  background: var(--brand-cyan, rgb(140, 220, 255));
  color: var(--brand-paper-deep, #02060F);
  border-color: var(--brand-cyan, rgb(140, 220, 255));
  font-weight: 700;
}

.cb-404__link--primary:hover,
.cb-404__link--primary:focus-visible {
  background: var(--brand-cyan-soft, rgb(190, 230, 255));
  border-color: var(--brand-cyan-soft, rgb(190, 230, 255));
  color: var(--brand-paper-deep, #02060F);
}

.cb-404__link-icon {
  flex-shrink: 0;
  display: block;
}

/* Light theme — flip surfaces for legibility on bright bg */
:root[data-theme="light"] .cb-404__heading {
  color: var(--brand-ink, #2A2823);
}
:root[data-theme="light"] .cb-404__sub {
  color: var(--brand-ink-soft, #6B655A);
}
:root[data-theme="light"] .cb-404__link {
  border-color: rgba(60, 160, 230, 0.35);
  color: var(--brand-cyan-deep, rgb(60, 160, 230));
  background: rgba(60, 160, 230, 0.06);
}
:root[data-theme="light"] .cb-404__link:hover,
:root[data-theme="light"] .cb-404__link:focus-visible {
  color: #fff;
  background: var(--brand-cyan-deep, rgb(60, 160, 230));
  border-color: var(--brand-cyan-deep, rgb(60, 160, 230));
}
:root[data-theme="light"] .cb-404__link--primary {
  background: var(--brand-cyan-deep, rgb(60, 160, 230));
  color: #fff;
  border-color: var(--brand-cyan-deep, rgb(60, 160, 230));
}
:root[data-theme="light"] .cb-404__link--primary:hover,
:root[data-theme="light"] .cb-404__link--primary:focus-visible {
  background: var(--primary-color, #0077be);
  border-color: var(--primary-color, #0077be);
  color: #fff;
}

@media (max-width: 480px) {
  .cb-404__links { flex-direction: column; align-items: center; }
  .cb-404__link { width: 100%; max-width: 280px; justify-content: center; }
}

/* ── Case Studies Strip ─────────────────────────────────────────────── */
.cs-strip {
  margin: 3rem 0 1rem;
  padding: 2rem 0 0;
  border-top: 1px solid var(--cb-border, rgba(255,255,255,.1));
}
.cs-strip__header { margin-bottom: 1.25rem; }
.cs-strip__heading {
  font-family: var(--font-display, 'Josefin Sans', sans-serif);
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cb-accent, #4fc3f7);
  margin: 0;
  justify-self: anchor-center;
}
.cs-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  justify-self: anchor-center;
}
.cs-strip__card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--cb-border, rgba(255,255,255,.1));
  border-radius: 6px;
  background: var(--cb-surface, rgba(255,255,255,.04));
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, background .18s;
}
.cs-strip__card:hover,
.cs-strip__card:focus-visible {
  border-color: var(--cb-accent, #4fc3f7);
  background:
    linear-gradient(135deg, transparent 0%, var(--cb-surface-hover, rgba(79,195,247,.06)) 18%, var(--cb-surface-hover, rgba(79,195,247,.06)) 82%, transparent 100%),
    var(--cb-surface, rgba(255,255,255,.04));
  outline: none;
}
.cs-strip__label {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cb-accent, #4fc3f7);
  opacity: .8;
}
.cs-strip__title {
  font-family: var(--font-display, 'Josefin Sans', sans-serif);
  font-size: .95rem;
  font-weight: 600;
  color: var(--cb-heading, #e8f4fd);
  line-height: 1.35;
}
.cs-strip__excerpt {
  font-size: .8rem;
  color: var(--cb-muted, rgba(232,244,253,.6));
  line-height: 1.5;
  flex: 1;
}
.cs-strip__cta {
  font-size: .75rem;
  color: var(--cb-accent, #4fc3f7);
  margin-top: .25rem;
}