/* ══════════════════════════════════════════════════════════════════
   COASTAL CALM — NDA Online v2 theme override layer · DEEPER SEA pass
   Sunlight and sea-glass, pushed deeper: airy sky washes under deep-navy
   headings, frosted nav, XL-to-XXL radii, plump pill buttons, and cards
   that truly float on layered 2–3 stop navy shadow stacks. Photos sit on
   offset sea-glass plates with halo rings and gentle hover zooms; bands
   alternate decisively between white and sky washes.
   Loads AFTER v2.css. Every rule scoped to html[data-theme="coastal"].
   Palette: NDA tokens only (navy/deep/maroon/crimson/sky/ink/slate);
   every shadow tinted navy/deep/ink — never black.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- 1. Token re-tuning ---------- */
html[data-theme="coastal"] {
  --r-sm: 16px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  /* deeper sea: layered 2–3 stop navy/deep shadow stacks with real presence */
  --sh-sm: 0 1px 3px rgba(2, 58, 113, 0.08), 0 6px 16px rgba(11, 36, 71, 0.10);
  --sh-md: 0 2px 6px rgba(2, 58, 113, 0.08), 0 12px 28px rgba(11, 36, 71, 0.14);
  --sh-lg: 0 2px 6px rgba(2, 58, 113, 0.08), 0 14px 30px rgba(11, 36, 71, 0.14), 0 34px 64px rgba(11, 36, 71, 0.16);
  --sh-float: 0 4px 10px rgba(2, 58, 113, 0.10), 0 18px 38px rgba(11, 36, 71, 0.16), 0 44px 84px rgba(11, 36, 71, 0.20);
  --sh-photo: 0 0 0 1px rgba(148, 197, 248, 0.55), 0 2px 6px rgba(2, 58, 113, 0.10), 0 16px 34px rgba(11, 36, 71, 0.18), 0 38px 72px rgba(11, 36, 71, 0.20);
  --halo: 0 0 0 10px rgba(148, 197, 248, 0.22);
  --ring: 0 0 0 3px rgba(148, 197, 248, 0.95), 0 0 0 6px rgba(2, 58, 113, 0.6);
  --hairline: #DCE9F4;
  --sky-border: rgba(148, 197, 248, 0.6);
  --sky-glow: 0 2px 8px rgba(2, 58, 113, 0.14), 0 14px 32px rgba(148, 197, 248, 0.65), 0 28px 56px rgba(2, 58, 113, 0.18);
}

html[data-theme="coastal"] body {
  background: var(--white);
  color: var(--ink);
}

html[data-theme="coastal"] ::selection {
  background: var(--sky);
  color: var(--deep);
}

html[data-theme="coastal"] :focus-visible {
  box-shadow: var(--ring) !important;
  border-radius: 10px;
}

html[data-theme="coastal"] ::-webkit-scrollbar-track { background: var(--sky-50); }
html[data-theme="coastal"] ::-webkit-scrollbar-thumb {
  background: rgba(148, 197, 248, 0.8);
  border: 3px solid var(--sky-50);
  border-radius: 999px;
}

/* ---------- 2. Type ---------- */
/* …except inside a hand-built embed. A blanket dark heading colour is right for
   headings on paper and wrong for the ones an embed has deliberately set white
   over its own photography: the S.M.I.L.E. band on /national-convention/donate-now
   sets `.nda-featured-story-content { color:#FEFEFE }` and lets its h3 inherit,
   so a theme rule naming h3 directly beat that inheritance and printed the title
   in near-black over a dark photo. `[data-selfstyled]` is the marker v2.css
   already uses to keep the generic card/typography treatments out of embeds that
   style themselves — the same seal belongs on the theme's type rules. */
html[data-theme="coastal"] h1:not([data-selfstyled] *),
html[data-theme="coastal"] h2:not([data-selfstyled] *),
html[data-theme="coastal"] h3:not([data-selfstyled] *) {
  letter-spacing: -0.02em;
  color: var(--deep);
}
html[data-theme="coastal"] h1 { font-weight: 700; line-height: 1.1; }
html[data-theme="coastal"] h2 { font-weight: 700; }
html[data-theme="coastal"] h3 { font-weight: 600; }

html[data-theme="coastal"] .lead {
  color: var(--slate);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.75;
}

html[data-theme="coastal"] .subheading {
  color: var(--slate);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.75;
  max-width: 62ch;
}

/* Eyebrow → sea-glass pill chip (dash removed without display:none) */
html[data-theme="coastal"] .eyebrow {
  gap: 0;
  background: var(--white);
  border: 1px solid rgba(148, 197, 248, 0.8);
  color: var(--navy);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  box-shadow: 0 1px 3px rgba(2, 58, 113, 0.08), 0 6px 16px rgba(11, 36, 71, 0.10);
  margin-bottom: 18px;
}
html[data-theme="coastal"] .eyebrow::before {
  content: "";
  width: 0;
  height: 0;
  margin: 0;
  background: transparent;
}

html[data-theme="coastal"] .chip {
  background: var(--white);
  border: 1px solid var(--sky-border);
  color: var(--deep);
  border-radius: 999px;
  padding: 9px 18px;
  min-height: 40px;
  box-shadow: 0 1px 3px rgba(2, 58, 113, 0.08), 0 6px 16px rgba(11, 36, 71, 0.10);
}

/* ---------- 3. Buttons — plumper pills, sky-glow lifts ---------- */
html[data-theme="coastal"] .btn {
  min-height: 52px;
  padding: 14px 30px;
  font-size: 16px;
  border-radius: 999px;
  border-width: 1.5px;
}
html[data-theme="coastal"] .btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--sky-glow);
}
html[data-theme="coastal"] .btn:active {
  transform: translateY(0);
  box-shadow: var(--sh-sm);
}
html[data-theme="coastal"] .btn--primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(2, 58, 113, 0.18), 0 12px 26px rgba(2, 58, 113, 0.26);
}
html[data-theme="coastal"] .btn--primary:hover { background: var(--navy-700); }

/* CTA commits fully: solid crimson with a deep resting shadow */
html[data-theme="coastal"] .btn--cta {
  background: var(--crimson);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(11, 36, 71, 0.16), 0 12px 26px rgba(14, 21, 38, 0.24);
}
html[data-theme="coastal"] .btn--cta:hover {
  background: var(--maroon);
  box-shadow: 0 3px 8px rgba(11, 36, 71, 0.18), 0 16px 36px rgba(14, 21, 38, 0.30);
}

/* Ghost → committed sea-glass fill, deep text, legible navy outline */
html[data-theme="coastal"] .btn--ghost {
  background: var(--sky-100);
  /* .55 measures 2.96:1 against the pale slider photography this button sits on
     — just under WCAG 1.4.11's 3:1 for a control boundary */
  border-color: rgba(2, 58, 113, 0.7);
  color: var(--deep);
}
html[data-theme="coastal"] .btn--ghost:hover {
  background: rgba(148, 197, 248, 0.5);
  border-color: var(--navy);
  color: var(--deep);
}

html[data-theme="coastal"] .btn--light {
  background: var(--white);
  color: var(--navy);
  border-color: var(--sky-border);
  box-shadow: var(--sh-sm);
}
html[data-theme="coastal"] .btn--light:hover {
  background: var(--sky-50);
  color: var(--navy);
}

/* Webflow legacy button inherits the coastal pill */
html[data-theme="coastal"] .w-button {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  border: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(2, 58, 113, 0.18), 0 12px 26px rgba(2, 58, 113, 0.26);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background-color 220ms var(--ease);
}
html[data-theme="coastal"] .w-button:hover {
  background: var(--navy-700);
  transform: translateY(-3px);
  box-shadow: var(--sky-glow);
}

/* ---------- 4. Navigation — frosted glass, pill hovers ---------- */
/* the frost has to live on the pseudo-element: a backdrop-filter on .nav itself
   makes .nav a containing block for its own position:fixed children, which
   collapsed the mobile menu overlay to the height of the header bar */
html[data-theme="coastal"] .nav {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
html[data-theme="coastal"] .nav::before {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
html[data-theme="coastal"] .nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(148, 197, 248, 0.75), transparent);
}
html[data-theme="coastal"] .nav.is-scrolled {
  box-shadow: 0 1px 4px rgba(2, 58, 113, 0.06), 0 10px 30px rgba(11, 36, 71, 0.12);
}
html[data-theme="coastal"] .nav__in { min-height: 72px; gap: 8px; }
html[data-theme="coastal"] .nav__logo img { width: 92px; }

html[data-theme="coastal"] .nav__link {
  border-radius: 999px;
  padding: 11px 15px;
  color: var(--deep);
}
html[data-theme="coastal"] .nav__link:hover {
  background: var(--sky-100);
  color: var(--navy);
}
/* the open section reads as a solid pill; the current section keeps a sea-blue
   underline so "where am I" survives even with no menu open */
html[data-theme="coastal"] .nav__group.is-open > .nav__link,
html[data-theme="coastal"] .nav__link:not(.nav__link--toggle):hover {
  background: var(--navy);
  color: var(--white);
}
html[data-theme="coastal"] .nav__link.is-current {
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--sky);
  border-radius: 999px;
}
html[data-theme="coastal"] .nav__group.is-open > .nav__link.is-current {
  color: var(--white);
  box-shadow: inset 0 -3px 0 var(--sky);
}
html[data-theme="coastal"] .nav__item.is-current {
  background: var(--sky-50);
  box-shadow: inset 3px 0 0 var(--sky);
}

html[data-theme="coastal"] .nav__panel {
  border-radius: 28px;
  border: 1px solid var(--sky-border);
  box-shadow: 0 2px 8px rgba(2, 58, 113, 0.08), 0 26px 60px rgba(11, 36, 71, 0.18), 0 52px 100px rgba(11, 36, 71, 0.14);
  padding: 12px;
  /* opaque, not frosted: at 4% transparency the hero headline still ghosted
     through the menu and made the links hard to read */
  background: var(--white);
}
html[data-theme="coastal"] {
  --nav-rule: var(--hairline);
}
html[data-theme="coastal"] .nav__itemgrid,
html[data-theme="coastal"] .nav__formgrid {
  background: var(--sky-50);
  border: 1px solid var(--sky-border);
  border-radius: 20px;
}
html[data-theme="coastal"] .nav__item {
  border-radius: 14px;
  padding: 12px 14px;
}
html[data-theme="coastal"] .nav__item:hover { background: var(--white); box-shadow: inset 3px 0 0 var(--navy); }
html[data-theme="coastal"] .nav__formlink:hover { background: var(--white); box-shadow: inset 3px 0 0 var(--navy); }
html[data-theme="coastal"] .nav__formgroup h5 { color: var(--navy); }
html[data-theme="coastal"] .nav__item b { color: var(--navy); }
html[data-theme="coastal"] .nav__item span { color: var(--slate); font-size: 13.5px; }

html[data-theme="coastal"] .nav__ctas { gap: 10px; }
html[data-theme="coastal"] .nav__ctas .btn {
  min-height: 44px;
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
}
html[data-theme="coastal"] .nav__search {
  width: 44px;
  height: 44px;
  border: 1px solid var(--sky-border);
}
html[data-theme="coastal"] .nav__burger {
  border-radius: 999px;
  padding: 11px;
}
html[data-theme="coastal"] .nav__burger:hover { background: var(--sky-100); }

/* Campaign ribbon — calm navy sea band instead of maroon heat */
html[data-theme="coastal"] .ribbon {
  background: linear-gradient(90deg, var(--deep), var(--navy));
  padding: 11px 46px;
  font-size: 14px;
}
html[data-theme="coastal"] .ribbon a {
  color: var(--white);
  text-decoration-color: rgba(148, 197, 248, 0.8);
  text-underline-offset: 4px;
}
html[data-theme="coastal"] .ribbon__x {
  padding: 10px 14px;
  border-radius: 999px;
}
html[data-theme="coastal"] .ribbon__x:hover { background: rgba(148, 197, 248, 0.25); }

/* ---------- 5. Heroes — radial sky bloom behind the headline ---------- */
html[data-theme="coastal"] .hero {
  border-bottom-color: transparent;
}
html[data-theme="coastal"] .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(148, 197, 248, 0.7), transparent);
}
html[data-theme="coastal"] .hero--home,
html[data-theme="coastal"] .hero--plain,
html[data-theme="coastal"] .hero--event,
html[data-theme="coastal"] .hero--program,
html[data-theme="coastal"] .hero--editorial {
  background:
    radial-gradient(880px 460px at 14% 16%, rgba(148, 197, 248, 0.45), transparent 65%),
    radial-gradient(1100px 480px at 90% -12%, rgba(148, 197, 248, 0.28), transparent 60%),
    linear-gradient(180deg, var(--sky-100), var(--white));
}
html[data-theme="coastal"] .hero--campaign {
  background:
    radial-gradient(880px 460px at 14% 16%, rgba(148, 197, 248, 0.4), transparent 65%),
    radial-gradient(900px 420px at 88% -10%, rgba(139, 21, 56, 0.08), transparent 60%),
    linear-gradient(180deg, var(--sky-100), var(--white));
}
html[data-theme="coastal"] .hero h1 { color: var(--deep); }
html[data-theme="coastal"] .hero .lead { color: var(--slate); }
html[data-theme="coastal"] .hero__in { padding-block: clamp(72px, 9vw, 136px); }
html[data-theme="coastal"] .hero__actions { gap: 14px; margin-top: 30px; }
html[data-theme="coastal"] .hero__meta { gap: 10px; margin-top: 20px; }

/* Hero media floats on layered offset plates + an ambient sky halo (decoration only) */
html[data-theme="coastal"] .hero__media {
  position: relative;
  isolation: isolate;
}
html[data-theme="coastal"] .hero__media::before {
  content: "";
  position: absolute;
  inset: 24px -20px -20px 24px;
  background: linear-gradient(135deg, rgba(148, 197, 248, 0.9), var(--sky-100));
  border-radius: 36px;
  box-shadow: 0 12px 28px rgba(11, 36, 71, 0.14);
  z-index: -1;
  pointer-events: none;
}
html[data-theme="coastal"] .hero__media::after {
  content: "";
  position: absolute;
  inset: -34px;
  background: radial-gradient(closest-side, rgba(148, 197, 248, 0.5), transparent 72%);
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
}
html[data-theme="coastal"] .hero__media img {
  border-radius: 36px;
  border: 0;
  box-shadow: var(--sh-photo);
}

/* ---------- 6. Home slider ---------- */
html[data-theme="coastal"] .slider {
  background:
    radial-gradient(880px 460px at 12% 14%, rgba(148, 197, 248, 0.42), transparent 65%),
    linear-gradient(180deg, var(--white), var(--sky-100));
  border-bottom-color: transparent;
}
html[data-theme="coastal"] .slider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(90deg, transparent, rgba(148, 197, 248, 0.7), transparent);
}
html[data-theme="coastal"] .slider__grid { align-items: center; }
html[data-theme="coastal"] .slider__title {
  color: var(--deep);
  letter-spacing: -0.02em;
}
html[data-theme="coastal"] .slider__text .lead { color: var(--slate); }

/* Layered offset plates behind the slide photo — pure decoration, photo unmoved:
   sky gradient plate low-right, soft deep-tint echo high-left, halo ring on the print */
html[data-theme="coastal"] .slider__photo {
  position: relative;
  isolation: isolate;
}
html[data-theme="coastal"] .slider__photo::before {
  content: "";
  position: absolute;
  inset: 26px -22px -22px 26px;
  background: linear-gradient(135deg, rgba(148, 197, 248, 0.9), var(--sky-100));
  border-radius: 36px;
  box-shadow: 0 12px 28px rgba(11, 36, 71, 0.14);
  z-index: -1;
  pointer-events: none;
}
html[data-theme="coastal"] .slider__photo::after {
  content: "";
  position: absolute;
  inset: -18px 20px 20px -18px;
  background: rgba(148, 197, 248, 0.35);
  border-radius: 36px;
  z-index: -2;
  pointer-events: none;
}
html[data-theme="coastal"] .slider__photo img {
  border-radius: 36px;
  border: 0;
  box-shadow: var(--sh-photo);
}
html[data-theme="coastal"] .slider__banner img {
  border-radius: 32px;
  border: 0;
  box-shadow: var(--sh-photo);
}

html[data-theme="coastal"] .slider__arrow {
  width: 54px;
  height: 54px;
  background: var(--white);
  /* --sky-border is a hairline tint: 1.20:1 against a pale slide photo */
  border: 1.5px solid var(--navy);
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(2, 58, 113, 0.10), 0 10px 24px rgba(11, 36, 71, 0.16);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease),
              transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
html[data-theme="coastal"] .slider__arrow:hover {
  background: var(--sky-100);
  border-color: var(--sky);
  transform: translateY(-2px);
  box-shadow: var(--sky-glow);
}

/* Dots: 44px hit area via transparent padding, visual pill via content-box */
html[data-theme="coastal"] .slider__dots { gap: 0; }
html[data-theme="coastal"] .slider__dot {
  box-sizing: border-box;
  width: 36px;
  height: 44px;
  padding: 19px 4px;
  background-color: rgba(2, 58, 113, 0.62); /* >=3:1 vs the deeper sky-100 track (WCAG 1.4.11) */
  background-clip: content-box;
  border-radius: 999px;
}
html[data-theme="coastal"] .slider__dot.is-active {
  width: 52px;
  background-color: var(--navy);
}
html[data-theme="coastal"] .slider__count { color: var(--slate); }
html[data-theme="coastal"] .slider__count b { color: var(--navy); }

/* ---------- 7. Sections — airy sky washes, gradient rhythm ---------- */
html[data-theme="coastal"] .section { padding-block: clamp(60px, 7.5vw, 112px); }
html[data-theme="coastal"] .section--tight { padding-block: clamp(36px, 4.5vw, 60px); }

html[data-theme="coastal"] .section--dark {
  background:
    radial-gradient(760px 380px at 86% 4%, rgba(148, 197, 248, 0.38), transparent 60%),
    linear-gradient(180deg, var(--sky-100), var(--sky-50));
  color: var(--ink);
}
html[data-theme="coastal"] .section--dark h2 { color: var(--deep); }
html[data-theme="coastal"] .section--dark .lead { color: var(--slate); }

html[data-theme="coastal"] .section--tint {
  background: linear-gradient(180deg, #DCE9F4, var(--sky-100));
}

/* ---------- 8. Cards — floating deeper, photo-forward, XL radii ---------- */
html[data-theme="coastal"] .card {
  border-radius: 28px;
  border: 1px solid var(--sky-border);
  background: var(--white);
  box-shadow: 0 2px 6px rgba(2, 58, 113, 0.07), 0 14px 30px rgba(11, 36, 71, 0.11);
}
html[data-theme="coastal"] a.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-float), var(--halo);
  border-color: var(--sky);
}
/* taller media so the photo dominates the card; gentle zoom on hover */
html[data-theme="coastal"] .card__media { background: var(--sky-100); aspect-ratio: 16/11; }
html[data-theme="coastal"] .card__media img { transition: transform 420ms var(--ease); }
html[data-theme="coastal"] a.card:hover .card__media img { transform: scale(1.03); }
html[data-theme="coastal"] .card__body { padding: 24px; gap: 9px; }
html[data-theme="coastal"] .card__body h3 { color: var(--deep); }
html[data-theme="coastal"] .card__body p { color: var(--slate); font-size: 16px; }
html[data-theme="coastal"] .card__foot {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(148, 197, 248, 0.9);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

html[data-theme="coastal"] .tile {
  border-radius: 28px;
  border: 1px solid var(--sky-border);
  box-shadow: 0 2px 6px rgba(2, 58, 113, 0.07), 0 14px 30px rgba(11, 36, 71, 0.11);
  padding: 28px;
}

/* Campaign pillars */
html[data-theme="coastal"] .pillar {
  border-radius: 28px;
  border: 1px solid var(--sky-border);
  background: var(--white);
  box-shadow: 0 2px 6px rgba(2, 58, 113, 0.07), 0 14px 30px rgba(11, 36, 71, 0.11);
  padding: 28px 24px;
}
html[data-theme="coastal"] .pillar:hover {
  transform: translateY(-6px);
  border-color: var(--sky);
  box-shadow: var(--sky-glow), var(--halo);
}
html[data-theme="coastal"] .pillar::before {
  color: var(--navy);
  background: var(--sky-100);
  border: 1px solid rgba(148, 197, 248, 0.5);
  padding: 5px 14px;
}
html[data-theme="coastal"] .pillar h3 { color: var(--deep); }

/* Stat tiles (base .stat) — 700 deep-navy numbers with rounded sky swash */
html[data-theme="coastal"] .stat {
  border-radius: 28px;
  border: 1px solid var(--sky-border);
  box-shadow: 0 2px 6px rgba(2, 58, 113, 0.07), 0 14px 30px rgba(11, 36, 71, 0.11);
  padding: 30px 16px;
}
html[data-theme="coastal"] .stat b {
  color: var(--deep);
  font-weight: 700;
}
html[data-theme="coastal"] .stat b::after {
  content: "";
  display: block;
  width: 48px;
  height: 6px;
  border-radius: 999px;
  background: var(--sky);
  margin: 10px auto 2px;
}
html[data-theme="coastal"] .stat span { color: var(--slate); }

/* People / officer profiles — portrait floats on an offset sky plate */
/* portraits keep their taller 4/4.6 ratio (the 16/11 card-media rule must not shorten them) */
html[data-theme="coastal"] .person .card__media { background: var(--sky-100); aspect-ratio: 4/4.6; }
html[data-theme="coastal"] .profile__card {
  isolation: isolate;
}
html[data-theme="coastal"] .profile__card::before {
  content: "";
  position: absolute;
  inset: 20px -16px -16px 20px;
  background: linear-gradient(135deg, rgba(148, 197, 248, 0.85), var(--sky-100));
  border-radius: 32px;
  z-index: -1;
  pointer-events: none;
}
html[data-theme="coastal"] .profile__card img {
  border-radius: 32px;
  border: 0;
  box-shadow: var(--sh-photo);
}
html[data-theme="coastal"] .profile__office {
  margin-top: 16px;
  color: var(--slate);
}

/* ---------- 9. Structure: bands, logos, masonry, adslots, backlink ---------- */
html[data-theme="coastal"] .band {
  border-radius: 36px;
  border: 1px solid rgba(148, 197, 248, 0.65);
  border-left: 1px solid rgba(148, 197, 248, 0.65);
  background:
    radial-gradient(700px 320px at 90% 0%, rgba(148, 197, 248, 0.45), transparent 60%),
    linear-gradient(180deg, var(--white), var(--sky-100));
  box-shadow: 0 2px 8px rgba(2, 58, 113, 0.08), 0 20px 44px rgba(11, 36, 71, 0.14), 0 44px 88px rgba(11, 36, 71, 0.12);
}
html[data-theme="coastal"] .band h2 { color: var(--deep); }
html[data-theme="coastal"] .band p { color: var(--slate); }
html[data-theme="coastal"] .band--maroon {
  border-left-color: rgba(148, 197, 248, 0.65);
  background:
    radial-gradient(700px 320px at 90% 0%, rgba(139, 21, 56, 0.08), transparent 60%),
    linear-gradient(180deg, var(--white), var(--sky-100));
}
html[data-theme="coastal"] .band--maroon h2 { color: var(--crimson); }
html[data-theme="coastal"] .band__actions { gap: 14px; }

html[data-theme="coastal"] .logos { gap: 22px 42px; }
html[data-theme="coastal"] .logos img {
  filter: grayscale(1) contrast(0.85);
  opacity: 0.8;
}
html[data-theme="coastal"] .logos img:hover { filter: none; opacity: 1; }

html[data-theme="coastal"] .masonry { column-gap: 20px; }
html[data-theme="coastal"] .masonry img {
  border-radius: 24px;
  border: 0;
  margin-bottom: 20px;
  box-shadow: 0 0 0 1px rgba(148, 197, 248, 0.5), var(--sh-md);
}
html[data-theme="coastal"] .masonry img:hover {
  transform: scale(1.03);
  box-shadow: var(--sh-lg), var(--halo);
}

html[data-theme="coastal"] .adslot { padding: 16px; }
html[data-theme="coastal"] .adslot--framed {
  border-block: 1px solid transparent;
  background: linear-gradient(180deg, var(--white), var(--sky-50));
}
html[data-theme="coastal"] .adslot img,
html[data-theme="coastal"] .adslot iframe { border-radius: 14px; }

html[data-theme="coastal"] .backlink {
  background: var(--sky-100);
  color: var(--navy);
  border-radius: 999px;
  padding: 11px 20px;
  min-height: 44px;
  margin-bottom: 24px;
}
html[data-theme="coastal"] .backlink:hover {
  color: var(--deep);
  background: rgba(148, 197, 248, 0.45);
}

/* ---------- 10. Prose (re-housed originals) ---------- */
html[data-theme="coastal"] .prose img {
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(148, 197, 248, 0.45), var(--sh-md);
}
html[data-theme="coastal"] .prose a:not(:where(.btn, .is-embed-btn, [class*="btn"], [class*="button"], [role="button"])) {
  color: var(--navy);
  text-decoration-color: rgba(148, 197, 248, 0.9);
  text-decoration-thickness: 2px;
}
html[data-theme="coastal"] .prose a:not(:where(.btn, .is-embed-btn, [class*="btn"], [class*="button"], [role="button"])):hover {
  color: var(--navy-700);
  text-decoration-color: currentColor;
}
html[data-theme="coastal"] .prose blockquote {
  border-left: 3px solid var(--sky);
  background: var(--sky-50);
  border-radius: 0 18px 18px 0;
  padding: 0.9em 1.3em 0.9em 1.3em;
  color: var(--slate);
}
html[data-theme="coastal"] .prose hr {
  border: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(148, 197, 248, 0.75), transparent);
  margin: 2.6em 0;
}
html[data-theme="coastal"] .prose td,
html[data-theme="coastal"] .prose th {
  border: 1px solid var(--hairline);
  padding: 12px 14px;
}
html[data-theme="coastal"] .prose th { background: var(--sky-50); color: var(--navy); }
html[data-theme="coastal"] .prose figcaption { color: var(--slate); }
html[data-theme="coastal"] .prose iframe {
  border-radius: 24px;
  box-shadow: var(--sh-lg);
}

html[data-theme="coastal"] .prose [class*="grid_"],
html[data-theme="coastal"] .prose .w-layout-grid { gap: 24px; }
/* Sealed embed namespaces + the one-box-per-card invariant — this list must stay
   identical to the generic card family in v2.css (these sheets load after it and
   repeat the same rule at higher specificity, so an exclusion missing here re-draws
   every nested box the moment a theme is selected). See v2.css for the reasoning. */
html[data-theme="coastal"] .prose [class*="card"]:not([class*="cards"], [class*="whs2"], .ndahome *, #nda-awards *, [data-selfstyled] *, [class*="card"]:not([class*="cards"]) *, [class*="flex-block"] *) {
  border-radius: 26px;
  border: 1px solid var(--sky-border);
  box-shadow: 0 2px 6px rgba(2, 58, 113, 0.07), 0 14px 30px rgba(11, 36, 71, 0.11);
  padding: 24px;
  background: var(--white);
}
html[data-theme="coastal"] .prose [class*="card"]:not([class*="whs2"], .ndahome *, #nda-awards *, [data-selfstyled] *) img {
  border-radius: 18px;
  box-shadow: none;
}
html[data-theme="coastal"] .prose [class*="card"]:not([class*="whs2"], .ndahome *, #nda-awards *, [data-selfstyled] *) h3,
html[data-theme="coastal"] .prose [class*="card"]:not([class*="whs2"], .ndahome *, #nda-awards *, [data-selfstyled] *) h4 { color: var(--deep); }
html[data-theme="coastal"] .prose a[class*="card"]:not([class*="whs2"], .ndahome *, #nda-awards *):hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg), var(--halo);
  border-color: var(--sky);
}
html[data-theme="coastal"] .prose [class*="flex_"] { gap: 24px; }
html[data-theme="coastal"] .prose [class*="grid_"] > img,
html[data-theme="coastal"] .prose .w-layout-grid > img,
html[data-theme="coastal"] .prose [class*="grid_"] a > img,
html[data-theme="coastal"] .prose .w-layout-grid a > img {
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(148, 197, 248, 0.45), 0 6px 16px rgba(11, 36, 71, 0.10);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
html[data-theme="coastal"] .prose [class*="grid_"] a:hover > img,
html[data-theme="coastal"] .prose .w-layout-grid a:hover > img {
  transform: scale(1.02);
  box-shadow: var(--sh-md), var(--halo);
}
html[data-theme="coastal"] .prose .w-layout-grid[class*="grid_1-col"] { gap: 16px; }

/* ---------- 11. Embedded widget: 2026 Convention (#nda-ex) ---------- */
html[data-theme="coastal"] #nda-ex .ex-hero {
  background:
    linear-gradient(135deg, rgba(8, 44, 86, 0.94), rgba(2, 58, 113, 0.88)),
    url('/assets/cdn.prod.website-files.com/680151156811595646a38cbd/68efdb3b72d0ac625d40909e_Fri-033.jpg') center/cover no-repeat;
}
html[data-theme="coastal"] #nda-ex .ex-badge {
  background: rgba(148, 197, 248, 0.22);
  border: 1.5px solid rgba(148, 197, 248, 0.55);
  border-radius: 999px;
}
html[data-theme="coastal"] #nda-ex .ex-stat {
  background: rgba(148, 197, 248, 0.14);
  border: 1px solid rgba(148, 197, 248, 0.35);
  border-radius: 20px;
}
html[data-theme="coastal"] #nda-ex .ex-stat:hover {
  transform: translateY(-4px);
  background: rgba(148, 197, 248, 0.24);
}
html[data-theme="coastal"] #nda-ex .ex-btn {
  border-radius: 999px;
  min-height: 52px;
  padding: 14px 32px;
}
html[data-theme="coastal"] #nda-ex .ex-btn-p {
  background: var(--navy);
  border-color: rgba(148, 197, 248, 0.5);
  box-shadow: 0 12px 32px rgba(2, 20, 40, 0.4);
}
html[data-theme="coastal"] #nda-ex .ex-btn-p:hover {
  background: var(--navy-700);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(2, 20, 40, 0.5);
}
html[data-theme="coastal"] #nda-ex .ex-btn-s { border-radius: 999px; }
html[data-theme="coastal"] #nda-ex .ex-box {
  border-radius: 36px;
  border: 1px solid rgba(148, 197, 248, 0.35);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(2, 20, 40, 0.3), 0 26px 64px rgba(2, 20, 40, 0.45), 0 52px 110px rgba(2, 20, 40, 0.35);
}
html[data-theme="coastal"] #nda-ex .ex-box-icon {
  background: linear-gradient(135deg, var(--navy), var(--deep));
  border: 1.5px solid rgba(148, 197, 248, 0.4);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(2, 20, 40, 0.4);
}
html[data-theme="coastal"] #nda-ex .ex-list li::before {
  background: var(--navy);
  box-shadow: 0 4px 10px rgba(2, 20, 40, 0.35);
}
html[data-theme="coastal"] #nda-ex .ex-callout {
  background: rgba(148, 197, 248, 0.14);
  border-left: 4px solid var(--sky);
  border-radius: 18px;
}
/* widget's #94C5F8 link dips below 4.5:1 on the navy overlay corner; lift to sky-100 */
html[data-theme="coastal"] #nda-ex .ex-callout a { color: var(--sky-100); }
html[data-theme="coastal"] #nda-ex .ex-video-wrap {
  border-radius: 28px;
  border: 1px solid rgba(148, 197, 248, 0.35);
}

/* ---------- 12. Embedded widget: highlight cards (#nda-cards) ---------- */
html[data-theme="coastal"] #nda-cards {
  background: linear-gradient(180deg, var(--sky-50), var(--white));
}
html[data-theme="coastal"] #nda-cards .nc-card {
  border-radius: 28px;
  border: 1px solid var(--sky-border);
  box-shadow: 0 2px 6px rgba(2, 58, 113, 0.07), 0 14px 30px rgba(11, 36, 71, 0.11);
}
html[data-theme="coastal"] #nda-cards .nc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-float), var(--halo);
}
html[data-theme="coastal"] #nda-cards .nc-title { color: var(--deep); }
html[data-theme="coastal"] #nda-cards .nc-desc { color: var(--slate); }
html[data-theme="coastal"] #nda-cards .nc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: 15px;
}
html[data-theme="coastal"] #nda-cards .nc-btn:hover {
  background: var(--navy-700);
  transform: translateY(-2px);
  box-shadow: var(--sky-glow);
}

/* ---------- 13. Embedded widget: What We Do (#nda-wwd) ---------- */
html[data-theme="coastal"] #nda-wwd {
  --nda-border: rgba(148, 197, 248, 0.45);
  --nda-text: #3B475A;
  --nda-text-muted: #3B475A;
  background: linear-gradient(180deg, var(--white), var(--sky-50));
}
html[data-theme="coastal"] #nda-wwd .nda-wwd__eyebrow { color: var(--crimson); }
html[data-theme="coastal"] #nda-wwd .nda-wwd__heading { color: var(--deep); font-weight: 700; }
html[data-theme="coastal"] #nda-wwd .nda-wwd__subheading { color: var(--slate); font-size: 1.05rem; }
html[data-theme="coastal"] #nda-wwd .nda-wwd__card {
  border-radius: 28px;
  border: 1px solid var(--sky-border);
  box-shadow: 0 2px 6px rgba(2, 58, 113, 0.07), 0 14px 30px rgba(11, 36, 71, 0.11);
  background: var(--white);
}
html[data-theme="coastal"] #nda-wwd .nda-wwd__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-float), var(--halo);
  border-color: var(--sky);
}
html[data-theme="coastal"] #nda-wwd .nda-wwd__card::after {
  background: linear-gradient(90deg, var(--navy), var(--sky));
  border-radius: 999px;
}
html[data-theme="coastal"] #nda-wwd .nda-wwd__icon {
  background: var(--sky-100);
  color: var(--navy);
  border-radius: 20px;
  width: 60px;
  height: 60px;
  box-shadow: 0 6px 16px rgba(11, 36, 71, 0.12);
}
html[data-theme="coastal"] #nda-wwd .nda-wwd__card:hover .nda-wwd__icon {
  background: var(--navy);
  color: var(--white);
}
html[data-theme="coastal"] #nda-wwd .nda-wwd__category { color: var(--crimson); }
html[data-theme="coastal"] #nda-wwd .nda-wwd__title { color: var(--navy); }
html[data-theme="coastal"] #nda-wwd .nda-wwd__description { color: var(--slate); font-size: 1rem; }
html[data-theme="coastal"] #nda-wwd .nda-wwd__button {
  border-radius: 999px;
  min-height: 48px;
  padding: 12px 26px;
  background: var(--navy);
  border-color: var(--navy);
  font-size: 0.95rem;
}
html[data-theme="coastal"] #nda-wwd .nda-wwd__button:hover {
  background: var(--navy-700);
  border-color: var(--navy-700);
  transform: translateY(-2px);
  box-shadow: var(--sky-glow);
}

/* ---------- 14. Career Center widget — one calm navy sea band ---------- */
html[data-theme="coastal"] .nda-career-widget {
  min-height: 0;
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(148, 197, 248, 0.16), transparent 60%),
    linear-gradient(180deg, var(--deep), var(--navy));
  border-radius: 36px;
  width: min(1400px, 100% - 32px);
  margin-inline: auto;
  border: 1px solid rgba(148, 197, 248, 0.25);
  box-shadow: 0 4px 12px rgba(2, 20, 40, 0.18), 0 24px 56px rgba(2, 20, 40, 0.28), 0 52px 104px rgba(11, 36, 71, 0.22);
}
html[data-theme="coastal"] .widget-header {
  background: rgba(148, 197, 248, 0.08);
  padding: 48px 24px;
}
html[data-theme="coastal"] .widget-title {
  text-shadow: none;
  font-weight: 700;
  letter-spacing: -0.02em;
}
html[data-theme="coastal"] .widget-subtitle { opacity: 0.92; }

html[data-theme="coastal"] .search-container {
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(2, 20, 40, 0.28);
  padding: 8px;
}
html[data-theme="coastal"] .search-input { color: var(--ink); font-size: 1.05rem; }
html[data-theme="coastal"] .search-input::placeholder { color: var(--slate); }
html[data-theme="coastal"] .search-btn {
  background: var(--navy);
  border-radius: 999px;
  min-height: 52px;
  padding: 14px 30px;
}
html[data-theme="coastal"] .search-btn:hover {
  background: var(--navy-700);
  transform: translateY(-2px);
  box-shadow: var(--sky-glow);
}

html[data-theme="coastal"] .stats-container {
  background: rgba(148, 197, 248, 0.1);
  border: 1px solid rgba(148, 197, 248, 0.22);
  border-radius: 24px;
}
html[data-theme="coastal"] .stat-item { text-align: center; }
html[data-theme="coastal"] .stat-number {
  color: var(--white);
  font-weight: 700;
}
html[data-theme="coastal"] .stat-number::after {
  content: "";
  display: block;
  width: 44px;
  height: 6px;
  border-radius: 999px;
  background: var(--sky);
  margin: 10px auto 0;
}
html[data-theme="coastal"] .stat-label { opacity: 0.9; }

html[data-theme="coastal"] .feature-card {
  background: rgba(148, 197, 248, 0.1);
  border: 1px solid rgba(148, 197, 248, 0.28);
  border-radius: 24px;
  padding: 30px 26px;
}
html[data-theme="coastal"] .feature-card:hover {
  transform: translateY(-6px);
  background: rgba(148, 197, 248, 0.18);
  box-shadow: 0 4px 10px rgba(2, 20, 40, 0.25), 0 20px 44px rgba(2, 20, 40, 0.38);
}
html[data-theme="coastal"] .feature-icon { opacity: 0.95; }
html[data-theme="coastal"] .feature-title { color: var(--white); }
html[data-theme="coastal"] .feature-description { opacity: 0.9; }

html[data-theme="coastal"] .cta-btn {
  border-radius: 999px;
  min-height: 52px;
  border-color: rgba(255, 255, 255, 0.9);
  padding: 14px 34px;
}
html[data-theme="coastal"] .cta-btn:hover {
  background: var(--white);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(2, 20, 40, 0.35);
}
html[data-theme="coastal"] .cta-btn.primary {
  background: var(--white);
  color: var(--navy);
}
html[data-theme="coastal"] .cta-btn.primary:hover {
  background: var(--sky-100);
  color: var(--navy);
}
html[data-theme="coastal"] .job-apply-btn {
  background: var(--white);
  color: var(--navy);
  border-radius: 999px;
  min-height: 44px;
}

/* ---------- 15. Welcome modal ---------- */
html[data-theme="coastal"] .nda-modal-overlay { background-color: rgba(2, 20, 40, 0.72); }
html[data-theme="coastal"] .nda-modal-content {
  border: 1px solid var(--sky-border);
  border-radius: 32px;
  background-color: var(--white);
  box-shadow: 0 4px 14px rgba(2, 20, 40, 0.20), 0 30px 80px rgba(2, 20, 40, 0.38), 0 60px 140px rgba(2, 20, 40, 0.28);
}
html[data-theme="coastal"] .nda-modal-title { color: var(--navy); }
html[data-theme="coastal"] .nda-modal-description { color: var(--slate); }
html[data-theme="coastal"] .nda-modal-button {
  background-color: var(--navy);
  border-radius: 999px;
  min-height: 48px;
  padding: 12px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[data-theme="coastal"] .nda-modal-button:hover {
  opacity: 1;
  background-color: var(--navy-700);
  box-shadow: var(--sky-glow);
}
html[data-theme="coastal"] .nda-modal-button.secondary { background-color: var(--crimson); }
html[data-theme="coastal"] .nda-modal-button.secondary:hover { background-color: var(--maroon); }
html[data-theme="coastal"] .nda-modal-right { background: var(--deep); }
html[data-theme="coastal"] .nda-modal-close {
  color: var(--navy);
  border-radius: 999px;
  width: 2.75rem;
  height: 2.75rem;
}
html[data-theme="coastal"] .nda-modal-close:hover { background-color: var(--sky-100); }

/* ---------- 16. Lightbox ---------- */
html[data-theme="coastal"] .lightbox { background: rgba(2, 20, 40, 0.9); }
html[data-theme="coastal"] .lightbox img {
  border-radius: 28px;
  box-shadow: 0 0 0 1px rgba(148, 197, 248, 0.35), 0 30px 80px rgba(2, 20, 40, 0.6), 0 60px 140px rgba(2, 20, 40, 0.45);
}

/* ---------- 17. Footer — deep navy softened by a sky shoreline ---------- */
html[data-theme="coastal"] .footer {
  background:
    radial-gradient(900px 420px at 88% 0%, rgba(148, 197, 248, 0.14), transparent 60%),
    linear-gradient(180deg, var(--deep), var(--deep-2));
  border-top: 4px solid var(--sky);
  color: rgba(255, 255, 255, 0.94);
}
html[data-theme="coastal"] .footer__in {
  padding-block: clamp(52px, 6.5vw, 84px);
  gap: 36px;
}
html[data-theme="coastal"] .footer h4 {
  color: var(--sky);
  letter-spacing: 0.12em;
}
html[data-theme="coastal"] .footer a {
  color: rgba(255, 255, 255, 0.92);
  padding: 9px 0;
  border-radius: 8px;
}
html[data-theme="coastal"] .footer a:hover { color: var(--sky); }
html[data-theme="coastal"] .footer__brand img { width: 110px; margin-bottom: 16px; }
html[data-theme="coastal"] .footer__tag { color: rgba(255, 255, 255, 0.88); }
html[data-theme="coastal"] .footer__bar {
  border-top: 1px solid rgba(148, 197, 248, 0.25);
  color: rgba(255, 255, 255, 0.85);
  padding-block: 20px;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — deliberately designed, not shrunk
   ══════════════════════════════════════════════════════════════════ */

/* laptop widths: coastal's roomier pills would collide before the drawer takes
   over, and its own selectors outrank the base tightening block */
@media (min-width: 1280px) and (max-width: 1439px) {
  html[data-theme="coastal"] .nav__link { padding: 10px 8px; font-size: 15.5px; }
  html[data-theme="coastal"] .nav__in { gap: 4px; }
  html[data-theme="coastal"] .nav__ctas { gap: 6px; }
  html[data-theme="coastal"] .nav__ctas .btn { padding: 0 13px; font-size: 14.5px; }
  html[data-theme="coastal"] .nav__search { width: 40px; height: 40px; }
  html[data-theme="coastal"] .nav__logo img { width: 84px; }
}

/* ---------- 18. Nav mobile pass (matches base 1279px drawer breakpoint) ---------- */
@media (max-width: 1279px) {
  html[data-theme="coastal"] .nav__links {
    background: linear-gradient(180deg, var(--white), var(--sky-50));
    padding: 20px 20px 48px;
    gap: 6px;
  }
  html[data-theme="coastal"] .nav__links.is-open { display: flex; }
  html[data-theme="coastal"] .nav__link {
    min-height: 52px;
    display: flex;
    align-items: center;
    font-size: 17px;
    padding: 13px 18px;
    border-radius: 18px;
    width: 100%;
  }
  html[data-theme="coastal"] .nav__link:hover { background: var(--sky-100); }
  html[data-theme="coastal"] .nav__panel {
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0 0 10px 14px;
  }
  html[data-theme="coastal"] .nav__item {
    min-height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(148, 197, 248, 0.3);
    margin-bottom: 6px;
  }
  html[data-theme="coastal"] .nav__ctas .btn {
    min-height: 48px;
    height: 48px;
    font-size: 15px;
  }
  html[data-theme="coastal"] .nav__search { width: 48px; height: 48px; }
  html[data-theme="coastal"] .nav__link .nav__caret { margin-left: auto; }
  html[data-theme="coastal"] .nav__group.is-open > .nav__link {
    background: var(--sky-100);
    color: var(--navy);
  }
  html[data-theme="coastal"] .nav__logo img { width: 84px; }
}

/* ---------- 19. Tablet & below (≤900px) ---------- */
@media (max-width: 900px) {
  html[data-theme="coastal"] .section { padding-block: clamp(48px, 8vw, 72px); }
  html[data-theme="coastal"] .section--tight { padding-block: clamp(30px, 5vw, 44px); }

  html[data-theme="coastal"] .hero__in { padding-block: clamp(56px, 10vw, 88px); }
  html[data-theme="coastal"] .hero__actions { gap: 12px; margin-top: 24px; }
  html[data-theme="coastal"] .hero__media::before { inset: 18px -14px -14px 18px; border-radius: 32px; }
  html[data-theme="coastal"] .hero__media::after { inset: -24px; }
  html[data-theme="coastal"] .hero__media img { border-radius: 32px; }

  html[data-theme="coastal"] .slider__photo::before { inset: 18px -14px -14px 18px; border-radius: 32px; }
  html[data-theme="coastal"] .slider__photo::after { inset: -12px 14px 14px -12px; border-radius: 32px; }
  html[data-theme="coastal"] .slider__photo img { border-radius: 32px; }
  html[data-theme="coastal"] .slider__title { font-size: clamp(28px, 5.4vw, 40px); }
  html[data-theme="coastal"] .slider__arrow { width: 48px; height: 48px; }

  html[data-theme="coastal"] .card__body { padding: 22px; }
  html[data-theme="coastal"] .tile { padding: 24px; }
  html[data-theme="coastal"] .pillar { padding: 24px 20px; }
  html[data-theme="coastal"] .stat { padding: 26px 14px; }

  html[data-theme="coastal"] .band {
    border-radius: 32px;
    padding: clamp(28px, 6vw, 44px);
    gap: 22px;
  }
  html[data-theme="coastal"] .profile__card::before { inset: 16px -12px -12px 16px; border-radius: 28px; }
  html[data-theme="coastal"] .profile__card img { border-radius: 28px; }

  html[data-theme="coastal"] .footer__in { gap: 30px; }
  html[data-theme="coastal"] .nda-career-widget { border-radius: 32px; width: min(1400px, 100% - 24px); }
  html[data-theme="coastal"] .widget-header { padding: 40px 20px; }
  html[data-theme="coastal"] .stats-container { border-radius: 20px; }
  html[data-theme="coastal"] .feature-card { padding: 26px 22px; }
}

/* ---------- 20. Phones (≤600px) — cozy, thumb-friendly ---------- */
@media (max-width: 600px) {
  html[data-theme="coastal"] body { font-size: 16.5px; }

  html[data-theme="coastal"] h1 { font-size: clamp(30px, 8.5vw, 38px); }
  html[data-theme="coastal"] h2 { font-size: clamp(24px, 6.6vw, 30px); }
  html[data-theme="coastal"] h3 { font-size: 20px; }
  html[data-theme="coastal"] .lead { font-size: 17.5px; }
  html[data-theme="coastal"] .subheading { font-size: 16.5px; }
  html[data-theme="coastal"] .eyebrow { font-size: 12px; padding: 7px 15px; margin-bottom: 14px; }

  /* full-width, plump touch pills */
  html[data-theme="coastal"] .btn {
    min-height: 52px;
    font-size: 15.5px;
    padding: 13px 26px;
  }
  html[data-theme="coastal"] .hero__actions { flex-direction: column; align-items: stretch; }
  html[data-theme="coastal"] .hero__actions .btn { width: 100%; }
  html[data-theme="coastal"] .band__actions { flex-direction: column; align-items: stretch; }
  html[data-theme="coastal"] .band__actions .btn { width: 100%; }
  html[data-theme="coastal"] .w-button { width: 100%; }

  html[data-theme="coastal"] .hero__in { padding-block: 48px 56px; }
  html[data-theme="coastal"] .hero__media::before { inset: 14px -10px -10px 14px; border-radius: 28px; }
  html[data-theme="coastal"] .hero__media::after { inset: -16px; }
  html[data-theme="coastal"] .hero__media img { border-radius: 28px; }
  html[data-theme="coastal"] .chip { font-size: 13.5px; padding: 8px 15px; }

  html[data-theme="coastal"] .slider__grid { padding-block: 32px 96px; }
  html[data-theme="coastal"] .slider__photo::before { inset: 14px -10px -10px 14px; border-radius: 28px; }
  html[data-theme="coastal"] .slider__photo::after { inset: -10px 12px 12px -10px; border-radius: 28px; }
  html[data-theme="coastal"] .slider__photo img { border-radius: 28px; }
  html[data-theme="coastal"] .slider__title { font-size: clamp(25px, 7vw, 30px); }
  html[data-theme="coastal"] .slider__arrow { width: 46px; height: 46px; font-size: 16px; }
  html[data-theme="coastal"] .slider__count { font-size: 14px; }

  /* cozy 20px card padding, still extra-rounded */
  html[data-theme="coastal"] .card__body { padding: 20px; }
  html[data-theme="coastal"] .card__body h3 { font-size: 18px; }
  html[data-theme="coastal"] .tile { padding: 20px; }
  html[data-theme="coastal"] .pillar { padding: 22px 20px; }
  html[data-theme="coastal"] .stat { padding: 24px 14px; }
  html[data-theme="coastal"] .prose [class*="card"]:not([class*="cards"], [class*="whs2"], .ndahome *, #nda-awards *, [data-selfstyled] *, [class*="card"]:not([class*="cards"]) *, [class*="flex-block"] *) { padding: 20px; }

  html[data-theme="coastal"] .band { border-radius: 28px; padding: 26px 20px; }
  html[data-theme="coastal"] .band h2 { font-size: 24px; }
  html[data-theme="coastal"] .profile__card::before { inset: 14px -10px -10px 14px; border-radius: 26px; }
  html[data-theme="coastal"] .profile__card img { border-radius: 26px; }

  html[data-theme="coastal"] .backlink { width: 100%; justify-content: center; }

  html[data-theme="coastal"] .ribbon { padding: 12px 50px; font-size: 13.5px; }

  html[data-theme="coastal"] .masonry { column-gap: 14px; }
  html[data-theme="coastal"] .masonry img { border-radius: 20px; margin-bottom: 14px; }

  html[data-theme="coastal"] .prose img { border-radius: 20px; }
  html[data-theme="coastal"] .prose blockquote { border-radius: 0 14px 14px 0; }

  /* embedded widgets, phone rhythm */
  html[data-theme="coastal"] #nda-ex .ex-box { border-radius: 30px; padding: 30px 24px; }
  html[data-theme="coastal"] #nda-ex .ex-stat { border-radius: 18px; }
  html[data-theme="coastal"] #nda-cards .nc-body { padding: 20px 20px 24px; }
  html[data-theme="coastal"] #nda-wwd .nda-wwd__card { border-radius: 24px; padding: 24px 20px; }
  html[data-theme="coastal"] #nda-wwd .nda-wwd__icon { width: 52px; height: 52px; border-radius: 16px; }
  html[data-theme="coastal"] .nda-career-widget { border-radius: 28px; width: min(1400px, 100% - 16px); }
  html[data-theme="coastal"] .widget-header { padding: 34px 18px; }
  html[data-theme="coastal"] .search-container { border-radius: 26px; }
  html[data-theme="coastal"] .search-btn { border-radius: 18px; min-height: 52px; }
  html[data-theme="coastal"] .stats-container { border-radius: 18px; }
  html[data-theme="coastal"] .feature-card { padding: 24px 20px; border-radius: 22px; }
  html[data-theme="coastal"] .cta-btn { width: 100%; }
  html[data-theme="coastal"] .nda-modal-content { border-radius: 26px; }
  html[data-theme="coastal"] .nda-modal-button { width: 100%; }

  html[data-theme="coastal"] .footer__in { gap: 26px; padding-block: 44px; }
  html[data-theme="coastal"] .footer a { padding: 11px 0; font-size: 16px; }
  html[data-theme="coastal"] .footer__bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding-block: 22px;
  }
}

/* contrast-sweep corrections (2026-07-25) */
html[data-theme="coastal"] .prose a.w-button, html[data-theme="coastal"] a.w-button { background-color: #023A71; color: #FFFFFF; }
html[data-theme="coastal"] .prose a.w-button:hover, html[data-theme="coastal"] a.w-button:hover { background-color: #06427C; color: #FFFFFF; }

/* career-widget anchoring corrections (2026-07-25) — coastal renders the career
   widget as a dark navy band, but v2.css's light-card legibility guards (!important
   ink/slate/navy) and the theme's global deep heading color repaint its text
   dark-on-dark (measured 1.0–1.8:1). Re-anchor readable white; must stay LAST in
   the cascade with these specificities so they keep winning. */
html[data-theme="coastal"] .nda-career-widget h1,
html[data-theme="coastal"] .nda-career-widget h2,
html[data-theme="coastal"] .nda-career-widget h3 { color: #FFFFFF; }
html[data-theme="coastal"] .nda-career-widget .feature-description,
html[data-theme="coastal"] .nda-career-widget .job-title,
html[data-theme="coastal"] .nda-career-widget .job-description,
html[data-theme="coastal"] .nda-career-widget .featured-job-details { color: rgba(255, 255, 255, 0.92) !important; }
html[data-theme="coastal"] .nda-career-widget .job-employer { color: rgba(255, 255, 255, 0.9) !important; }
html[data-theme="coastal"] .nda-career-widget .job-location { color: rgba(255, 255, 255, 0.85) !important; }
html[data-theme="coastal"] .nda-career-widget a[href*="careerwebsite"] { color: #FFFFFF !important; }
html[data-theme="coastal"] .nda-career-widget .cta-btn[href*="careerwebsite"]:hover { color: #023A71 !important; }
html[data-theme="coastal"] .nda-career-widget .cta-btn.primary { color: #023A71 !important; }

/* dark embedded-widget heading anchors (2026-07-25 contrast sweep) — the theme's
   global deep heading rule must not repaint headings sitting on dark widget panels */
html[data-theme="coastal"] #nda-ex .ex-sub,
html[data-theme="coastal"] #nda-ex .ex-box h3 { color: #FEFEFE; }
html[data-theme="coastal"] .follow-section h2 { color: #FFFFFF; }