/* ==========================================================================
   Sporos Motion: site theme (live since the 2026-10 motion-refresh)
   A restyle layer loaded after site.css and each page's inline styles. It maps
   the old navy-and-gold Tailwind utilities onto the Sporos Motion tokens
   (daylight grounds, logo-navy type, one gold accent, hairlines, soft shadows).
   Every page links it just before </head>; templates/ carry the same link so
   generated pages pick it up on build.

   "Dark scopes" below are the old navy blocks (header, navy sections, navy CTA
   cards). They turn light here, so their white and cream text turns navy. The
   footer is the one band that stays navy.
   ========================================================================== */

:root {
  /* 2026-10-23 v2, after Samee: "too much baby blue, lean into white and navy".
     Grounds are white with a neutral off-white; navy carries the mid-page bands. */
  --canvas: #f6f7f8;
  --surface: #ffffff;
  --ice: #eef0f3;
  --hairline: #e1e5ea;
  --hairline-strong: #c8ced6;
  --brand: #002252;
  --on-brand: #ffffff;
  --ink: #002252;
  --ink-muted: #4a5d78;
  --gold: #c9a961;
  --gold-ink: #8a6a1f;
  --gold-soft: #f6ebd2;
  --font-sans: "Geist", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;
  --font-serif: "Instrument Serif", Georgia, serif;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --shadow-card: 0 1px 2px rgba(0, 34, 82, 0.06), 0 12px 32px rgba(0, 34, 82, 0.10);
  --shadow-soft: 0 1px 2px rgba(0, 34, 82, 0.05), 0 6px 18px rgba(0, 34, 82, 0.07);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Type ------------------------------------------------------------------ */
html body {
  font-family: var(--font-sans);
  font-weight: 450;
  background: var(--surface);
  color: var(--ink);
  font-feature-settings: "ss01";
}
html body :is(h1, h2, h3, h4, .font-display) {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em;
}
html body h1 { letter-spacing: -0.035em; }
html body :is(h3, h4) { letter-spacing: -0.015em; }
html body.font-body, html body .font-body { font-family: var(--font-sans); }
html body blockquote.italic { font-style: normal; }
.mt-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.08em;
}

/* Eyebrows: Geist Mono, uppercase, tracked, gold-ink. Block eyebrows get the dot. */
html body .uppercase:is([class*="tracking-"], .tracking-wide, .tracking-wider) {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
}
html body :is(div, p).uppercase[class*="tracking-["],
html body .mt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html body :is(div, p).uppercase[class*="tracking-["]::before,
html body .mt-eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
footer .uppercase[class*="tracking-["]::before { display: none; }

/* --- Grounds --------------------------------------------------------------- */
.bg-cream { background-color: var(--canvas) !important; }
.bg-white { background-color: var(--surface); }
.from-cream { --tw-gradient-from: var(--canvas) var(--tw-gradient-from-position); }

/* --- Text colors on light grounds ----------------------------------------- */
.text-navy { color: var(--ink); }
.text-navy\/50, .text-navy\/55, .text-navy\/60, .text-navy\/65,
.text-navy\/70, .text-navy\/75, .text-navy\/80 { color: var(--ink-muted); }
.text-gold-deep, .text-gold-dark { color: var(--gold-ink); }
.text-gold { color: var(--gold-ink); }
svg.text-gold { color: var(--ink); }
.hover\:text-gold:hover, .hover\:text-gold-deep:hover, .group:hover .group-hover\:text-gold-deep { color: var(--gold-ink); }
.hover\:text-navy:hover, .group:hover .group-hover\:text-navy { color: var(--ink); }
.decoration-gold\/40, .decoration-gold-dark\/40, .decoration-gold\/30 { text-decoration-color: rgba(138, 106, 31, 0.4); }

/* --- Hairlines, radius, shadows ------------------------------------------- */
.border-navy\/5, .border-navy\/10, .border-navy\/15 { border-color: var(--hairline); }
.border-gold\/20, .border-gold\/40 { border-color: var(--hairline); }
.hover\:border-gold\/50:hover, .hover\:border-gold:hover { border-color: var(--hairline-strong); }
.rounded-2xl { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-md); }
.bg-white.rounded-2xl, .bg-white.rounded-xl {
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
}
.shadow-xl, .shadow-lg { box-shadow: var(--shadow-card); }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-card); }
.hover-lift:hover { box-shadow: var(--shadow-card); }
.border-4.border-gold\/20 { border-width: 1px; border-color: var(--hairline); box-shadow: var(--shadow-card); }
.bg-gold\/10 { background-color: var(--ice); }
.bg-navy\/5 { background-color: var(--ice); }

/* --- Buttons: navy pills, white text, one small gold detail --------------- */
a.bg-gold, button.bg-gold, a.bg-navy, button.bg-navy, a.btn-gold {
  background: var(--brand) !important;
  color: var(--on-brand) !important;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 34, 82, 0.12), 0 8px 20px rgba(0, 34, 82, 0.14) !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color 0.3s var(--ease-enter), transform 0.3s var(--ease-enter), box-shadow 0.3s var(--ease-enter);
}
a.bg-gold:hover, a.bg-navy:hover, a.btn-gold:hover { background: #0a3170 !important; transform: translateY(-1px); }
.btn-gold::after {
  content: "";
  position: static;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  transition: transform 0.3s var(--ease-enter);
}
.btn-gold:hover::after { left: auto; transform: translateX(3px); }
.btn-gold:has(svg)::after { display: none; }
a.btn-gold.block, a.btn-gold.w-full { display: flex; align-items: center; justify-content: center; gap: 10px; }
a.border-2 {
  border-width: 1px !important;
  border-color: var(--hairline) !important;
  background: var(--surface);
  color: var(--ink) !important;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
a.border-2:hover { border-color: var(--hairline-strong) !important; }
/* Small solid shapes (step numbers, badges) stay navy. */
div.bg-gold { background: var(--brand); box-shadow: none !important; }
div.bg-gold[class*="h-[2px]"], div.bg-gold.h-px, div.bg-gold.h-0\.5 { background: var(--gold); }
div.bg-gold .text-navy, div.bg-gold.text-navy { color: var(--on-brand); }
div.bg-navy.rounded-full .text-white { color: var(--on-brand); }

/* --- Dark scopes turn to daylight ------------------------------------------ */
header.site-header,
header:is(.bg-navy, .bg-navy-dark) {
  background: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
}
header.site-header.scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: var(--hairline);
  box-shadow: 0 6px 24px rgba(0, 34, 82, 0.06) !important;
}

section.bg-navy, section.bg-navy-dark {
  background: var(--surface) !important;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
div#page-cta.bg-navy,
div.bg-navy[class*="p-8"], div.bg-navy[class*="p-10"] {
  background: var(--surface) !important;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
}

:is(header.site-header, header:is(.bg-navy, .bg-navy-dark), section.bg-navy, section.bg-navy-dark, div#page-cta.bg-navy, div.bg-navy[class*="p-8"], div.bg-navy[class*="p-10"]) :is(.text-white, .text-cream) { color: var(--ink); }
:is(header.site-header, header:is(.bg-navy, .bg-navy-dark), section.bg-navy, section.bg-navy-dark, div#page-cta.bg-navy, div.bg-navy[class*="p-8"], div.bg-navy[class*="p-10"]) :is(.text-cream\/50, .text-cream\/55, .text-cream\/60, .text-cream\/65, .text-cream\/70, .text-cream\/75, .text-cream\/80, .text-cream\/85, .text-white\/60, .text-white\/70, .text-white\/80) { color: var(--ink-muted); }
:is(header.site-header, header:is(.bg-navy, .bg-navy-dark), section.bg-navy, section.bg-navy-dark, div#page-cta.bg-navy, div.bg-navy[class*="p-8"], div.bg-navy[class*="p-10"]) :is(.text-gold, .text-gold\/70, .text-gold\/80, .text-gold\/90, .text-gold-light) { color: var(--gold-ink); }
:is(header.site-header, header:is(.bg-navy, .bg-navy-dark), section.bg-navy, section.bg-navy-dark, div#page-cta.bg-navy) svg:is(.text-gold, .text-cream, .text-white) { color: var(--ink); }
:is(header.site-header, header:is(.bg-navy, .bg-navy-dark), section.bg-navy, section.bg-navy-dark, div#page-cta.bg-navy) :is(.hover\:text-gold, .hover\:text-cream, .hover\:text-white):hover { color: var(--ink); }
:is(header.site-header, header:is(.bg-navy, .bg-navy-dark), section.bg-navy, section.bg-navy-dark, div#page-cta.bg-navy) :is(.border-cream\/10, .border-cream\/15, .border-cream\/20, .border-cream\/25, .border-white\/10, .border-white\/20) { border-color: var(--hairline); }
:is(header.site-header, header:is(.bg-navy, .bg-navy-dark), section.bg-navy, section.bg-navy-dark) :is(.bg-cream\/5, .bg-white\/5, .bg-white\/\[0\.04\], .bg-navy-light\/40, .bg-navy-light) {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
}
:is(section.bg-navy, section.bg-navy-dark) .bg-gold\/15 { background: var(--surface); border: 1px solid var(--hairline); }
:is(section.bg-navy, section.bg-navy-dark) .decoration-gold\/30 { text-decoration-color: rgba(138, 106, 31, 0.35); }
/* Old glows, dot patterns and photo scrims on navy sections are retired. */
:is(section.bg-navy, section.bg-navy-dark) > .absolute:is([class*="radial-gradient"], [class*="bg-[url"], [class*="from-navy"], [class*="bg-navy\/"]) { display: none; }
header .border-cream\/25 { border-radius: 999px; }
header #menuToggle { color: var(--ink); }

/* --- Footer: the one navy band -------------------------------------------- */
footer.bg-navy-dark, footer.bg-navy {
  background: var(--brand) !important;
  border-top: 1px solid var(--brand);
}
footer :is(.text-cream\/50, .text-cream\/55, .text-cream\/60, .text-cream\/65, .text-cream\/70) { color: rgba(255, 255, 255, 0.76); }
footer :is(.text-cream\/80, .text-cream) { color: #ffffff; }
footer :is(.border-cream\/10) { border-color: rgba(255, 255, 255, 0.14); }
footer .bg-cream\/5 { background: rgba(255, 255, 255, 0.08); }
footer :is(.text-gold, .text-gold\/90) { color: var(--gold); }
footer :is(.hover\:text-gold):hover { color: var(--gold); }
footer :is(.hover\:text-cream\/70):hover { color: #ffffff; }
/* Disclosures at readable body size and contrast. */
footer p.text-xs { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.8); }
footer div.text-xs { font-size: 13px; }

/* --- Mobile sticky bar ----------------------------------------------------- */
#mobileBar {
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 24px rgba(0, 34, 82, 0.08) !important;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
#mobileBar > .flex { gap: 8px; }
/* Keep the last disclosure line clear of the sticky bar. */
@media (max-width: 1023px) { body:has(#mobileBar) footer { padding-bottom: 104px; } }
#mobileBar a { border-radius: 999px; color: var(--ink); border: 1px solid var(--hairline); padding-top: 11px; padding-bottom: 11px; }
#mobileBar a:last-child { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

/* --- Hero ------------------------------------------------------------------ */
section.hero { background: var(--surface) !important; isolation: isolate; }
section.hero::after {
  /* The bowl of the logo: one large ice ellipse with a hairline ring. */
  content: "";
  position: absolute;
  left: 50%;
  width: min(150%, 1500px);
  aspect-ratio: 2.4 / 1;
  /* Only the crown of the arc shows, below the CTA row. */
  bottom: calc(min(150vw, 1500px) / -2.4 + 72px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 0 1px var(--hairline), 0 0 0 28px rgba(238, 240, 243, 0.5);
  z-index: -1;
  pointer-events: none;
}
.hero .hero-aurora { display: none; }
.hero .hero-grid {
  background-image: linear-gradient(rgba(0, 34, 82, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 34, 82, 0.045) 1px, transparent 1px) !important;
}
.hero .hero-accent { display: none; }
html body .hero .hero-pill {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  padding: 9px 16px;
}
@media (max-width: 480px) {
  html body .hero .hero-pill { font-size: 10px; letter-spacing: 0.1em; padding: 8px 14px; }
}
html body .hero .hero-pill-dot { background: var(--gold); width: 7px; height: 7px; }
html body .hero h1 { color: var(--ink); }
html body .hero .hero-line { overflow: visible; }
.hero a.text-gold { color: var(--gold-ink); }

/* --- Quote panel (homepage approach) -------------------------------------- */
.reticle { display: none; }

/* --- Motion: rise 24px and un-blur on an expo curve, no bounce ------------ */
html.sporos-js .reveal,
html.sporos-js:not([data-motion="none"]) .reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity 0.45s var(--ease-enter), transform 0.6s var(--ease-enter), filter 0.45s var(--ease-enter);
}
html.sporos-js .reveal.visible,
html.sporos-js:not([data-motion="none"]) .reveal.visible { opacity: 1; transform: none; filter: none; }
html body .reveal-delay-1 { transition-delay: 0.08s; }
html body .reveal-delay-2 { transition-delay: 0.16s; }
html body .reveal-delay-3 { transition-delay: 0.24s; }
@keyframes mt-enter { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
html.sporos-js .hero .hero-line > span { animation: mt-enter 0.7s var(--ease-enter) both; }
html.sporos-js .hero .hero-line:nth-child(2) > span { animation-delay: 0.08s; }
html.sporos-js .hero .hero-line:nth-child(3) > span { animation-delay: 0.16s; }
html.sporos-js .hero .hero-pill { animation: mt-enter 0.6s var(--ease-enter) both; }
html.sporos-js .hero .hero-fade { animation: mt-enter 0.7s var(--ease-enter) 0.32s both; }
.sporos-scroll-progress { background: var(--gold) !important; height: 2px; }
@media (prefers-reduced-motion: reduce) {
  html.sporos-js .reveal { transform: none; filter: none; transition: opacity 0.4s ease; }
  html.sporos-js .hero :is(.hero-line > span, .hero-pill, .hero-fade) { animation: none; }
}

/* Dropdown menus */
header .bg-white.rounded-lg { border-radius: var(--radius-md); border-color: var(--hairline); box-shadow: var(--shadow-card); }
.hover\:bg-cream:hover { background-color: var(--canvas); }

/* Navy icon discs keep white marks; navy link cards keep card corners. */
div.bg-navy.rounded-full :is(svg, .text-gold, .text-cream) { color: var(--on-brand); }
a.bg-navy:is(.rounded-2xl, .rounded-xl) { border-radius: var(--radius-lg); }
a.bg-navy :is(.bg-gold\/10, .bg-gold\/15, .bg-gold\/20) { background: rgba(255, 255, 255, 0.12); }
a.bg-navy :is(.text-gold, .text-gold-deep, .text-gold-dark) { color: var(--gold); }

/* --- Homepage hero with the father-and-son photo -------------------------
   Copy on the left, the two of them standing in the logo's bowl on the right.
   On phones the photo follows the buttons. */
.hero:has(.mt-hero-photo)::after { display: none; }
.mt-hero-grid { display: grid; gap: 8px; padding-top: 116px; }
.mt-hero-copy { padding-bottom: 8px; }
.mt-hero-photo { position: relative; margin: 0 auto; width: 100%; max-width: 360px; align-self: end; }
.mt-hero-photo img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.mt-hero-bowl {
  position: absolute; left: 50%; bottom: -34%; width: 128%; aspect-ratio: 2 / 1;
  transform: translateX(-50%); border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 0 1px var(--hairline), 0 0 0 26px rgba(238, 240, 243, 0.55), 0 0 0 27px var(--hairline);
}
.mt-hero-tag {
  position: absolute; z-index: 2; left: 50%; bottom: 14px; translate: -50% 0;
  display: flex; flex-direction: column; gap: 2px; white-space: nowrap;
  padding: 10px 16px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 6px rgba(0, 20, 48, 0.08), 0 16px 36px rgba(0, 20, 48, 0.14);
  text-align: left;
}
.mt-hero-tag-name { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.mt-hero-tag-sub { font-size: 13px; color: var(--ink-muted); }
@media (min-width: 1024px) {
  .mt-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 40px; align-items: end; padding-top: 128px; }
  .mt-hero-copy { text-align: left; padding-bottom: 88px; }
  .mt-hero-copy .mx-auto { margin-left: 0; margin-right: 0; }
  .mt-hero-copy .justify-center { justify-content: flex-start; }
  .mt-hero-photo { max-width: 540px; margin-right: 0; }
  .mt-hero-bowl { bottom: -30%; }
  /* The name card sits below their hands, centered on the two of them, as on phones. */
  .mt-hero-tag { left: 50%; bottom: 5%; translate: -50% 0; }
}
/* Wide screens: the photo grows (bleeding slightly into the right gutter, where the
   cutout is transparent) so their heads line up with the headline's second line
   instead of leaving the top-right quarter of the hero empty. */
@media (min-width: 1280px) {
  .mt-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Grows into the empty space beside the copy and slightly into the right gutter
     (the cutout's own transparent margin), so their heads meet the headline's first line. */
  .mt-hero-photo { max-width: none; width: calc(100% + 152px); margin-left: -112px; margin-right: -40px; }
}
/* With a wider gutter the photo can lean right instead, away from the copy. */
@media (min-width: 1440px) {
  .mt-hero-photo { margin-left: -64px; margin-right: -88px; }
}
html.sporos-js .mt-hero-photo img { animation: mt-enter 0.9s var(--ease-enter) 0.2s both; }
html.sporos-js .mt-hero-tag { animation: mt-enter 0.7s var(--ease-enter) 0.6s both; }
@media (prefers-reduced-motion: reduce) { html.sporos-js :is(.mt-hero-photo img, .mt-hero-tag) { animation: none; } }

/* --- Quote card: sized to its content, with one serif mark --------------- */
#approach .aspect-\[4\/3\] { aspect-ratio: auto; padding: 56px 56px 52px; overflow: hidden; }
#approach .aspect-\[4\/3\]::before {
  content: "\201C"; position: absolute; top: 10px; right: 36px;
  font-family: var(--font-serif); font-style: italic; font-size: 180px; line-height: 1;
  color: var(--ice); pointer-events: none;
}
#approach blockquote { position: relative; font-size: 2rem; line-height: 1.22; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); }

/* --- Navy bands (v2) -------------------------------------------------------
   Mid-page sections that were navy on the live site stay navy: white type,
   white pills, gold eyebrows. Hero sections (the first section, pt-28, min-h)
   still turn white. Selectors are long so they outrank the dark-scope rules. */
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) { background: var(--brand) !important; border-bottom: 0; }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) :is(.text-white, .text-cream, h2, h3) { color: #ffffff; }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) :is(.text-cream\/50, .text-cream\/55, .text-cream\/60, .text-cream\/65, .text-cream\/70, .text-cream\/75, .text-cream\/80, .text-cream\/85, .text-white\/60, .text-white\/70, .text-white\/80) { color: rgba(255, 255, 255, 0.76); }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) :is(.text-gold, .text-gold\/70, .text-gold\/80, .text-gold\/90, .text-gold-light, .text-gold-deep) { color: var(--gold); }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) .uppercase[class*="tracking-"] { color: var(--gold); }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) svg:is(.text-gold, .text-cream, .text-white) { color: var(--gold); }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) :is(.border-cream\/10, .border-cream\/15, .border-cream\/20, .border-cream\/25, .border-white\/10, .border-white\/20, .border-gold\/20) { border-color: rgba(255, 255, 255, 0.14); }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) :is(.bg-cream\/5, .bg-white\/5, .bg-white\/\[0\.04\], .bg-navy-light) { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: none; }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) .bg-gold\/15 { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) :is(a.bg-gold, a.btn-gold, a.bg-navy) { background: #ffffff !important; color: var(--ink) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important; }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) :is(a.bg-gold, a.btn-gold, a.bg-navy):hover { background: #f1f3f6 !important; }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) a.border-2 { background: transparent; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: none; }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) :is(.hover\:text-gold, .hover\:text-white, .hover\:text-cream):hover { color: #ffffff; }
html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) .decoration-gold\/30, html body:not(#mt-none) section.bg-navy:not(:first-of-type):not(.hero):not([class*="pt-28"]):not([class*="min-h-"]) .decoration-gold\/40 { text-decoration-color: rgba(201, 169, 97, 0.6); }
/* The homepage quote stays a white card on the navy band. */
html body:not(#mt-none) section#approach .bg-navy-light\/40 { background: var(--surface); border: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); }
html body:not(#mt-none) section#approach .bg-navy-light\/40 :is(blockquote, .text-cream) { color: var(--ink); }
html body:not(#mt-none) section#approach .bg-navy-light\/40 .uppercase[class*="tracking-"] { color: var(--gold-ink); }
/* A navy CTA band can sit right above the navy footer; a faint rule separates them. */
footer.bg-navy-dark, footer.bg-navy { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* Step-number circles on light sections were the old beige tint: solid navy with
   white numerals, like the homepage steps. The navy-band rules above outrank these. */
.rounded-full.bg-gold\/15 { background: var(--brand); }
.rounded-full.bg-gold\/15 :is(.text-gold, .text-gold-deep, .text-navy, span) { color: #ffffff; }