/* 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(136px + 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);
}

/* ===========================================================
   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"] {
  /* 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"] {
  /* Generic theme tokens — light surface palette */
  --text-color: #2a3a50;
  --heading-color: #0d1a2e;
  --surface-color: #f4f7fc;
  --surface-alt: #eaf0f8;

  /* Coastal Breeze brand surfaces in light mode */
  --brand-paper: #f4f7fc;          /* cool sky-paper */
  --brand-ink: #0d1a2e;            /* deep navy text */
  --brand-ink-soft: #4a6080;       /* steel secondary */

  /* Page-bg base/accent — soften the deep-night gradient anchors so
     the radial in .coastal-page-bg becomes a pale sky tint. */
  --bg-a: #e7eef9;
  --bg-b: #f4f7fc;

  /* Card "glass" surfaces for the post-area sections */
  --card-bg: rgba(255, 255, 255, 0.78);
  --card-bg-soft: rgba(255, 255, 255, 0.62);
  --card-border: rgba(20, 50, 100, 0.13);
  --card-border-strong: rgba(20, 50, 100, 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 {
  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);
}

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;
}

.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;
  padding: 1rem 2.5rem !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  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: .5rem;
}
.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);
}
.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;
}

.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: clip;
}
.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: 26px 56px;
  color: rgb(240, 248, 255);
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif);
  background: linear-gradient(180deg, rgba(2, 6, 15, 0.55) 0%, rgba(2, 6, 15, 0) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

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

.cb-nav__brand-img {
  height: 84px;
  width: auto;
  /* Combined halo: white edges for the dark wordmark, dark edges for the
     light glyph, plus a soft drop for atmospheric lift on any background. */
  filter:
    drop-shadow( 1px 0 0 rgba(255, 255, 255, 0.95))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.95))
    drop-shadow(0  1px 0 rgba(255, 255, 255, 0.95))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.55))
    drop-shadow( 1px 0 0 rgba(4, 14, 36, 0.95))
    drop-shadow(-1px 0 0 rgba(4, 14, 36, 0.95))
    drop-shadow(0  1px 0 rgba(4, 14, 36, 0.95))
    drop-shadow(0 -1px 0 rgba(4, 14, 36, 0.95))
    drop-shadow(0 10px 22px rgba(0, 20, 60, 0.55));
}

.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 1px 3px rgba(0, 10, 30, 0.85), 0 0 8px rgba(0, 10, 30, 0.4);
  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;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 480px;
  max-width: 92vw;
  padding: 16px;
  background: rgba(8, 18, 36, 0.86);
  border: 1px solid rgba(190, 230, 255, 0.22);
  border-radius: 16px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  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: 1101px) {
  .cb-nav__item--has-flyout::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -24px;
    right: -24px;
    height: 26px;
  }
}

/* Right-anchor the locations flyout so it never clips the viewport edge. */
@media (min-width: 1101px) {
  .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: 1101px) and (max-width: 1400px) {
  .cb-nav { padding: 26px 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.86);
  border-left: 1px solid rgba(190, 230, 255, 0.22);
  border-top: 1px solid rgba(190, 230, 255, 0.22);
}

.cb-flyout__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.cb-flyout--locations .cb-flyout__list {
  grid-template-columns: 1fr 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(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .25s, background .25s, transform .25s, color .25s;
  white-space: nowrap;
}

.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));
}

/* 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(8px);
  -webkit-backdrop-filter: blur(8px);
  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(8px);
  -webkit-backdrop-filter: blur(8px);
  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(*)) {
  .site-content:not(:has(.block-wrapper--hero-block:first-child)):not(:has(.block-wrapper--video-hero:first-child)) {
    padding-top: 120px;
  }
  @media (max-width: 1100px) {
    .site-content:not(:has(.block-wrapper--hero-block:first-child)):not(:has(.block-wrapper--video-hero:first-child)) {
      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;
  background: linear-gradient(180deg, rgba(244, 247, 252, 0.85) 0%, rgba(244, 247, 252, 0) 100%);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}

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

/* Logo halo: drop the white edge stack — on light bg it would just
   create a fuzzy white blur. Keep a soft dark drop-shadow for lift. */
:root[data-theme="light"] .cb-nav__brand-img {
  filter:
    drop-shadow( 1px 0 0 rgba(13, 26, 46, 0.55))
    drop-shadow(-1px 0 0 rgba(13, 26, 46, 0.55))
    drop-shadow(0  1px 0 rgba(13, 26, 46, 0.55))
    drop-shadow(0 -1px 0 rgba(13, 26, 46, 0.55))
    drop-shadow(0 8px 18px rgba(13, 26, 46, 0.18));
}

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

: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.92);
  border: 1px solid rgba(20, 50, 100, 0.18);
  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.92);
  border-left: 1px solid rgba(20, 50, 100, 0.18);
  border-top: 1px solid rgba(20, 50, 100, 0.18);
}

: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: #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(20, 50, 100, 0.6);
  background: rgba(255, 255, 255, 0.85);
}

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

:root[data-theme="light"] .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(20, 50, 100, 0.32);
  background: rgba(255, 255, 255, 0.55);
}
:root[data-theme="light"] .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;
}

: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));
}

/* ── 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: 1100px) {
  .cb-nav {
    padding: 14px 20px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .cb-nav__brand-img { height: 48px; }
  .cb-nav__toggle { display: inline-flex; }

  /* Backdrop */
  .cb-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 149;
    background: rgba(0, 6, 20, 0.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    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 */
  .cb-nav__panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 100vw);
    z-index: 150;
    display: flex;
    flex-direction: column;
    background: rgba(4, 10, 26, 0.97);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    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-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;
    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;
    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 — stacked at drawer bottom */
  .cb-nav__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 16px 20px 28px;
    border-top: 1px solid rgba(190, 230, 255, 0.10);
    width: auto;
    flex-shrink: 0;
    justify-content: flex-start;
  }
  .cb-nav__phone-duo {
    flex: none;
    width: 100%;
    border-radius: 14px;
  }
  .cb-nav__duo-row { flex: 1; justify-content: center; padding: 14px 12px; }
  .cb-nav__cta { flex: none; width: 100%; justify-content: center; padding: 14px 20px; }
  .cb-nav__theme-toggle { align-self: center; }
}

/* ── Light theme — drawer overrides ────────────────────────────────── */
@media (max-width: 1100px) {
  :root[data-theme="light"] .cb-nav__panel {
    background: rgba(246, 249, 254, 0.98);
    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;
  }
}

@media (max-width: 480px) {
  .cb-nav { padding: 12px 16px; }
  .cb-nav__brand-img { height: 42px; }
}

/* ── 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, 136px) 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;
}