/* =========================================================================
   UPGRADE ROUNDS — layered over shared.css. Draft palette + Cormorant/Jost stay.
   ROUND A: header/nav + hero. Tightening execution to revive's discipline
   (spacing rhythm, type refinement, CTA treatment). No redesign, no other sections.
   ========================================================================= */

/* ---- ROUND A: NAV — more air, calmer type, refined CTA pill ---- */
#main-nav { padding: 22px 56px; }
.nav-links { gap: 6px; }
.nav-links > li > a,
.nav-links a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 16px; font-weight: 300; color: color-mix(in srgb, var(--fg) 72%, transparent); transition: color .3s ease; }
.nav-links a:hover { color: var(--white); }
.nav-brand-mark img { height: 40px !important; }
.nav-cta { border: 1px solid rgba(184,151,90,0.55) !important; background: transparent !important; color: var(--gold) !important;
	padding: 11px 26px !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase; border-radius: 0 !important; transition: background .35s ease, color .35s ease; }
.nav-cta:hover { background: var(--gold) !important; color: var(--bg) !important; }
#main-nav.nav-scrolled { backdrop-filter: blur(14px); }

/* ---- ROUND A: HERO — generous rhythm, refined display, calmer stats + CTA ---- */
.hero-content { padding: 150px 60px 90px !important; max-width: 820px; }
.hero-pretitle { font-size: 11px !important; letter-spacing: 0.28em !important; margin-bottom: 34px !important; color: var(--gold) !important; }
.hero-content h1, .hero-content .hero-title { letter-spacing: -0.005em; line-height: 1.0; margin-bottom: 8px; }
.hero-divider { margin: 30px 0 !important; }
.hero-sub, .hero-content > p { font-size: 1.12rem !important; line-height: 1.65 !important; max-width: 42ch; margin-bottom: 40px !important; color: color-mix(in srgb, var(--fg) 82%, transparent) !important; font-weight: 300 !important; }

/* CTA treatment — refined; primary gold, secondary a quiet gold hairline */
.hero-btns { gap: 16px !important; }
.hero-content .btn-primary, .hero-buttons a:nth-child(1), .hero-actions a:nth-child(1) {
	padding: 17px 40px !important; font-size: 11px !important; letter-spacing: 0.2em !important; text-transform: uppercase; font-weight: 400 !important; box-shadow: none !important; border-radius: 0 !important; }
.hero-content .btn-secondary, .hero-buttons a:nth-child(2), .hero-actions a:nth-child(2) {
	padding: 17px 34px !important; font-size: 11px !important; letter-spacing: 0.2em !important; text-transform: uppercase;
	border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent) !important; background: transparent !important; color: color-mix(in srgb, var(--fg) 85%, transparent) !important; }
.hero-content .btn-secondary:hover, .hero-buttons a:nth-child(2):hover { border-color: var(--gold) !important; color: var(--white) !important; }

/* stats — retire the heavy dark cards for a calm hairline row (revive discipline) */
.hero-stats { gap: 0 !important; margin-top: 8px; }
.hero-stat { background: none !important; border: 0 !important; border-left: 1px solid rgba(184,151,90,0.28) !important; box-shadow: none !important; padding: 4px 30px !important; }
.hero-stat:first-child { border-left: 0 !important; padding-left: 0 !important; }
.hero-stat::before { display: none !important; }
.hero-stat:hover { transform: none !important; }
.hero-stat-n { font-family: var(--serif) !important; font-weight: 300 !important; font-style: italic; color: var(--gold) !important; font-size: 2rem !important; }
.hero-stat-l { font-size: 9px !important; letter-spacing: 0.2em !important; color: color-mix(in srgb, var(--fg) 50%, transparent) !important; margin-top: 4px; }

/* ==========================================================================
   ROUND B — inner-page / service-template polish (multiplies across 14 pages)
   Execution tightening only: rhythm, type scale, readability. Palette/fonts locked.
   ========================================================================== */
.section{padding:clamp(4.5rem,11vh,9rem) clamp(1.5rem,5vw,4rem)!important}
.section-inner{max-width:1180px}
.section-eyebrow{font-size:11px!important;letter-spacing:.28em!important;margin-bottom:1.5rem!important}
.section-title{font-weight:300!important;line-height:1.05!important;letter-spacing:-.005em;font-size:clamp(2rem,4.5vw,3.4rem)!important;max-width:22ch}
.section-body{font-family:var(--sans);font-weight:300;line-height:1.75!important;color:color-mix(in srgb, var(--fg) 62%, transparent)!important;max-width:62ch;font-size:1.02rem}
.section-body p{margin-bottom:1.1rem}

/* ==========================================================================
   ROUND C — trust / social-proof treatment (revive-style: calm, credible)
   ========================================================================== */
.proof-strip{gap:clamp(2rem,6vw,5rem)!important;padding-block:clamp(1rem,3vh,2rem)}
.proof-n{font-size:clamp(2.6rem,5vw,3.6rem)!important}
.proof-l{letter-spacing:.22em!important;color:color-mix(in srgb, var(--fg) 45%, transparent)!important}
.testi-photo-grid,.testi-grid{gap:clamp(1.5rem,3vw,2.5rem)!important}
.testi-photo-card,.testi-card{border:1px solid rgba(184,151,90,.14)!important;background:linear-gradient(180deg,rgba(11,21,36,.15),rgba(11,21,36,.45))!important;padding:clamp(1.75rem,3vw,2.4rem)!important;transition:border-color .4s}
/* hover = border warm + lift/shadow (depth system). The old dark-navy gradient here was a
   hardcoded pre-flip style; on cream service-page testi cards it painted dark-on-dark. */
.testi-photo-card:hover,.testi-card:hover{border-color:rgba(184,151,90,.4)!important}
.testi-stars-row,.testi-stars{color:var(--gold)!important;letter-spacing:.14em!important;font-size:11px!important;margin-bottom:1.2rem!important}
.testi-text,.testi-quote{font-family:var(--serif)!important;font-style:italic!important;font-weight:300!important;line-height:1.7!important;font-size:1.08rem!important;color:color-mix(in srgb, var(--fg) 82%, transparent)!important}
.testi-reviewer-name,.testi-author{font-family:var(--sans)!important;letter-spacing:.16em!important;text-transform:uppercase;font-size:10px!important;color:var(--gold)!important;opacity:.85!important}

/* Screen-reader-only utility. Added for the candidate quiz's live region +
   fieldset legends; intended for reuse by the sitewide accessibility pass. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   LIGHT SECTION VOCABULARY (P1 rhythm: alternate dark / warm-cream)
   Gold stays the accent on both grounds. Tokens live here so every
   template can opt in with .section-light.
   ============================================================ */
/* Button tokens. A gold chip with a dark label reads the same in both themes by
   design, but it still belongs in the token layer — hardcoded hex here was the one
   thing in this file the light theme could not re-point. */
:root{ --btn-bg:#B8975A; --btn-fg:#0D2240; --btn-bg-hover:#C9AC72; }

:root{
  --cream:#F6F2EA;          /* warm paper, not white */
  --cream-alt:#EFE9DE;      /* second light tone for stacking */
  --ink:#0D2240;            /* navy as TEXT on light — same brand hue */
  --ink-soft:rgba(13,34,64,.82);
  --ink-mute:rgba(13,34,64,.70);
  --gold-ink:#7A5F2C;       /* gold darkened for AA on cream: 5.37:1 / 4.96:1 on cream-alt */
}
.section-light{background:var(--cream)!important;color:var(--ink)!important}
.section-light.section-alt{background:var(--cream-alt)!important}
.section-light .section-title,
.section-light h1,.section-light h2,.section-light h3,.section-light h4{color:var(--ink)!important}
.section-light .section-title em,.section-light h2 em,.section-light h3 em{color:var(--gold-ink)!important}
.section-light .section-eyebrow{color:var(--gold-ink)!important}
.section-light p,.section-light li,.section-light .card-body,.section-light .section-body{color:var(--ink-soft)!important}
.section-light .card{background:rgba(255,255,255,.6)!important;border-color:rgba(13,34,64,.12)!important}
.section-light .card:hover{border-color:rgba(138,109,51,.45)!important}
.section-light .card-title{color:var(--ink)!important}
.section-light a{color:var(--gold-ink)}
.section-light .gold-list li::marker{color:var(--gold-ink)}
.section-light .faq-item{border-color:rgba(13,34,64,.12)!important}
.section-light .faq-question{color:var(--ink)!important}
.section-light .faq-answer{color:var(--ink-soft)!important}
.section-light .faq-icon{color:var(--gold-ink)!important}
.section-light .card-icon svg{stroke:var(--gold-ink)!important}
.section-light .btn-ghost span{color:var(--ink)!important}
.section-light .btn-ghost{border-color:rgba(13,34,64,.3)!important}

/* ---- in-house icon set: one family, colour from the ground it sits on ---- */
.lms-icon{width:32px;height:32px;display:block;stroke:var(--gold);color:var(--gold);
  vector-effect:non-scaling-stroke}
.card-icon .lms-icon,.card .lms-icon{margin-bottom:18px}
.section-light .lms-icon{stroke:var(--gold-ink);color:var(--gold-ink)}
.benefit-row{display:grid;grid-template-columns:1fr;gap:26px;margin-top:34px}
@media(min-width:640px){.benefit-row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.benefit-row{grid-template-columns:repeat(4,1fr)}}
.benefit{display:flex;flex-direction:column;gap:10px}
.benefit__title{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--white)}
.section-light .benefit__title{color:var(--ink)}
.benefit__body{font-family:var(--sans);font-size:14.5px;line-height:1.65;color:var(--muted)}
.section-light .benefit__body{color:var(--ink-soft)}

/* Nested dark components that land inside a .section-light band.
   These carry their own dark background from shared.css, so without this the
   light-section ink colour renders navy-on-near-black (1.2:1). */
.section-light .team-card,
.section-light .split-content,
.section-light .testi-photo-card,
.section-light .testi-card,
.section-light .step-card,
.section-light .badge-list,
.section-light .service-img-card-overlay{background:rgba(255,255,255,.6)!important;
  border-color:rgba(13,34,64,.12)!important}
.section-light .team-card-name,
.section-light .step-title,
.section-light .testi-reviewer-name{color:var(--ink)!important}
.section-light .team-card-title,
.section-light .testi-reviewer-meta{color:var(--gold-ink)!important}
.section-light .team-card-bio,
.section-light .testi-text,
.section-light .testi-quote,
.section-light .step-body{color:var(--ink-soft)!important}
.section-light .gold-list li{color:var(--ink-soft)!important}
.section-light .pull-quote-text{color:var(--ink)!important}
.section-light .financing-badge{color:var(--ink)!important;border-color:rgba(13,34,64,.2)!important}
/* image overlays sit on photos, not on cream — keep them light-on-dark */
.section-light .service-img-card-overlay{background:linear-gradient(180deg,rgba(4,8,15,0),rgba(4,8,15,.82))!important;
  border:0!important}
.section-light .service-img-card-overlay h3{color:var(--white)!important}

/* ============================================================
   AA remediation. Two separate problems, fixed together:
   (a) components that ship their own DARK background and landed inside a
       .section-light band -> ink text on near-black (measured 1.06–1.21:1)
   (b) pre-existing dark-ground text that never met AA (footer-copy was
       rgba(255,255,255,.15) = 1.43:1 — invisible, and predates the rhythm work)
   ============================================================ */

/* (a) nested dark components inside light bands */
.section-light .faq-item,
.section-light .phase-card,
.section-light .phase,
.section-light .card-num,
.section-light .phase-num-bg{background:rgba(255,255,255,.5)!important}
.section-light .phase-title,
.section-light .faq-question,
.section-light .faq-question span{color:var(--ink)!important}
.section-light .phase-body{color:var(--ink-soft)!important}
.section-light .phase-num,
.section-light .card-num,
.section-light .phase-num-bg{color:rgba(122,95,44,.22)!important}
/* gold -> AA-safe gold on any light ground */
.section-light .card-link,
.section-light .badge,
.section-light .faq-icon,
.section-light .financing-label,
.section-light .press-label,
.section-light .stat-num,
.section-light a:not(.btn-gold):not(.nav-cta){color:var(--gold-ink)!important}
.section-light .faq-answer{color:var(--ink-soft)!important}

/* (b) dark-ground AA floor — these were failing before the rhythm work */
.footer-copy{color:rgba(255,255,255,.62)!important}
.footer-tagline,.footer-brand-sub{color:color-mix(in srgb, var(--fg) 62%, transparent)!important}
.footer-col-title{color:rgba(200,168,104,.95)!important}
.testi-reviewer-meta{color:color-mix(in srgb, var(--fg) 62%, transparent)!important}
.press-label,.financing-label{color:rgba(200,168,104,.95)!important}
.cta-sub{color:color-mix(in srgb, var(--fg) 78%, transparent)!important}
.faq-answer{color:color-mix(in srgb, var(--fg) 72%, transparent)!important}
.card-body,.section-body{color:color-mix(in srgb, var(--fg) 72%, transparent)}

/* Final AA pass — remaining measured failures */
.footer-social a,
footer li a,.footer li a{color:color-mix(in srgb, var(--fg) 66%, transparent)!important}
.footer-social a:hover,footer li a:hover{color:var(--gold)!important}
.footer-copy a{color:rgba(200,168,104,.92)!important}
.gold-list li{color:color-mix(in srgb, var(--fg) 72%, transparent)!important}
.section-light .gold-list li{color:var(--ink-soft)!important}
.phase-label{color:rgba(200,168,104,.95)!important}
.section-light .phase-label{color:var(--gold-ink)!important}
.financing-badge{color:color-mix(in srgb, var(--fg) 80%, transparent)!important}
.section-light .financing-badge{color:var(--ink)!important}
/* btn-ghost: the real cause was the LABEL, not the fill — the CTA variant's span
   is color-mix(in srgb, var(--fg) 45%, transparent) (muted grey), which lands at 4.27:1. The hero variant
   is already pure white and passes. Fix the label; leave the ghost fill alone. */
.btn-ghost span{color:color-mix(in srgb, var(--fg) 92%, transparent)!important}
.section-light .btn-ghost span{color:var(--ink)!important}
.section-light .btn-ghost{background:rgba(255,255,255,.5)!important}

/* Newly-light sections after the positional re-rhythm */
.section-light .card-title-script,
.section-light .card-tag,
.section-light .stat-label{color:var(--gold-ink)!important}
.section-light .phase-body{color:rgba(13,34,64,.9)!important}
/* .phase-body on the DARK ground (pre-existing: was --muted .45 = 4.29:1) */
.phase-body{color:color-mix(in srgb, var(--fg) 72%, transparent)!important}

/* ============================================================================
   HEADER — logo crop fix + two-state scroll header (2026-07-15)

   LOGO BUG (measured, not guessed): the wordmark <img> (aspect 5.15:1) was being
   placed inside .nav-brand-mark — a 34x34 CIRCLE built to hold a 14x14 icon. Flex
   centring rendered it 120px wide at x=-23, i.e. its left 23px sat off-screen. It
   was never an overflow clip (overflow was visible) and the SVG viewBox is correct
   (1400x272 = 5.15, matching natural 1866x362). The container was wrong, not the asset.

   HEADER STATE: kept position:fixed deliberately. position:sticky occupies flow space
   and would push the hero down 72px, destroying the transparent-over-hero top state.
   fixed is what makes that look possible. Colours come from tokens, so Round D's light
   theme inherits both states for free.
   ============================================================================ */

/* --- logo: size to the wordmark, not to a circle --- */
.nav-brand-mark{
  width:auto!important;height:34px!important;
  border:0!important;border-radius:0!important;
  overflow:visible;flex:0 0 auto;
  transition:height .2s var(--ease);
}
.nav-brand-mark img{
  height:100%;width:auto;display:block;max-width:none;
}
.nav-brand{gap:0!important}

/* --- two-state header --- */
#main-nav{
  transition:height .2s var(--ease), background-color .2s var(--ease),
             box-shadow .2s var(--ease), border-color .2s var(--ease)!important;
  background:transparent;
  border-bottom:1px solid transparent;
}
/* scrolled: solid ground from the token layer. Under Round D's light theme --navy
   is re-pointed, so this becomes cream-with-ink-text with no rule change here. */
#main-nav.nav-scrolled{
  background:color-mix(in srgb, var(--navy) 96%, transparent)!important;
  border-bottom-color:var(--border)!important;
  box-shadow:0 4px 30px rgba(0,0,0,.28)!important;
  height:60px!important;
}
#main-nav.nav-scrolled .nav-brand-mark{height:28px!important}

@media(max-width:820px){
  /* Mobile: header shrinks the same way; the sticky Book bar lives at the BOTTOM
     (bottom:0), so the two cannot collide — verified at 390. */
  #main-nav.nav-scrolled{height:58px!important}
  .nav-brand-mark{height:30px!important}
  #main-nav.nav-scrolled .nav-brand-mark{height:26px!important}
}
@media(prefers-reduced-motion:reduce){
  #main-nav,.nav-brand-mark{transition:none!important}
}

/* ============================================================================
   ROUND D — SCOPED LIGHT THEME (2026-07-15)

   SCOPED, NOT GLOBAL. The first attempt edited :root, which is global by
   definition — 29 pages changed live and "homepage first, stop for verdict" became
   structurally impossible. This lives entirely under body.theme-light. With no
   ?theme=light param there is NO class, so the default theme is byte-identical.

   TOKENS ONLY. Not one rule here touches layout, spacing, typography, or component
   structure — it re-points colour variables and nothing else.

   --fg defaults to #F0F8FF (the exact colour the theme's hardcoded rgba(240,248,255,..)
   already used), so re-pointing it costs the default nothing.
   ============================================================================ */
body.theme-light{
  /* grounds: warm cream dominant */
  --bg:#F6F2EA;
  --bg2:#EFE9DE;
  --bg3:#E6DFD2;
  /* text: navy ink is the default reading colour */
  --white:#0D2240;
  --fg:#0D2240;
  --muted:rgba(13,34,64,.74);
  --muted2:rgba(13,34,64,.56);
  /* hairlines */
  --border:rgba(13,34,64,.12);
  --border2:rgba(13,34,64,.24);
  /* gold: AA-safe on cream (5.37:1). --gold-bright stays for fills. */
  --gold:#7A5F2C;
  --gold2:#6A5223;
  --gold-bright:#B8975A;
  --gold-pale:rgba(122,95,44,.07);
  --gold-glow:rgba(122,95,44,.18);
  /* Palette A + Playfair/Inter (flipped live 2026-07-16) */
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', sans-serif;
  --accent:#3F5D7D;
}

/* Navy becomes the ACCENT: hero, nav, footer, CTA and the drama sections keep the
   dark ground by re-pointing the same tokens back. One mechanism, both directions. */
body.theme-light .sp-open,
body.theme-light .post-hero,
body.theme-light #main-nav,
body.theme-light footer,
body.theme-light .footer,
body.theme-light .cta-banner,
body.theme-light .sp-cta,
body.theme-light .sp-programs,
body.theme-light .sp-testi,
body.theme-light .press-strip,
body.theme-light .financing-strip{
  --bg:#1E2A38; --bg2:#24313F; --bg3:#2A3847;
  --white:#FDFCFB; --fg:#F0F8FF;
  --muted:rgba(240,248,255,.74);
  --muted2:rgba(240,248,255,.58);
  --border:rgba(184,151,90,.14);
  --border2:rgba(184,151,90,.26);
  --gold:#C8A868;
  --gold-pale:rgba(184,151,90,.08);
  /* Re-pointing the variables is NOT enough: descendants that set no colour of their own
     (.sp-word, .hero-sub, .sp-open__sub ...) inherit from BODY, which is navy under the
     light theme. Without this the hero wordmark rendered navy-on-near-black. */
  color:var(--white);
}
body.theme-light .sp-open *,
body.theme-light .post-hero *,
body.theme-light footer *,
body.theme-light .footer *,
body.theme-light .cta-banner *,
body.theme-light .sp-cta *,
body.theme-light .sp-programs *,
body.theme-light .sp-testi *{
  /* only for elements with no explicit colour — anything that sets its own colour,
     or uses var(--gold)/var(--muted), still wins normally. */
  border-color:currentColor;
}
body.theme-light{background:var(--bg);color:var(--white)}
/* .section-light was the P1 rhythm's cream band; under the light theme it IS the
   default ground, so neutralise it rather than let two systems fight. */
body.theme-light .section-light{background:var(--bg)!important;color:var(--white)!important}
body.theme-light .section-light.section-alt{background:var(--bg2)!important}

/* ============================================================================
   INNER-PAGE HEROS — Palette A PROPAGATION (2026-07-16).
   The .hero/.video-hero sections were full-viewport DARK (kept in the dark-scoped
   list), so every inner page read as the OLD dark site while the homepage was ivory.
   Restyle to the light system so inner pages are SIBLINGS of the homepage: ~44vh,
   ivory / lightly-imaged ground, dark navy text, gold accents. Full-bleed dark video
   is now the homepage's signature only. One CSS change -> all ~36 .hero + 3 .video-hero
   pages. (Lesson: "flip verified" = visually verified per page, not tokens-changed.)
   ============================================================================ */
body.theme-light .hero,
body.theme-light .video-hero{
  min-height:clamp(320px,44vh,470px)!important; background:var(--bg)!important;
}
/* lightly-imaged: soften the photo + swap the DARK overlay for a CREAM wash, so the
   ground reads ivory and left-aligned dark text stays fully legible. */
body.theme-light .hero-bg{background:none!important}
body.theme-light .hero-bg-img{opacity:.42!important}
body.theme-light .hero-bg-img::after{
  background:linear-gradient(100deg,rgba(246,242,234,.97) 0%,rgba(246,242,234,.85) 44%,rgba(246,242,234,.5) 100%)!important;
}
/* the stock videos don't earn a full-bleed dark hero on inner pages -> hide, go cream */
body.theme-light .video-hero video{display:none!important}
body.theme-light .video-hero-overlay{background:var(--bg)!important}
/* ---- ONE HERO-ALIGNMENT STANDARD (2026-07-17) --------------------------------
   Every inner hero: eyebrow + title LEFT-aligned, sitting on the SAME 1180px grid
   column as every section heading below (max-width 1180, centred, matched side
   padding) — so titles line up down each page AND across pages. No per-page
   alignment. Converted cover-image heros (contact/thank-you) are pulled onto the
   same left grid. Blog keeps its own centred convention (not touched here). */
body.theme-light .hero{padding-inline:clamp(1.5rem,5vw,4rem)!important}
body.theme-light .hero-content{
  max-width:1180px!important;margin-inline:auto!important;width:100%!important;text-align:left!important;
  padding:clamp(84px,12vh,104px) 0 clamp(2.5rem,6vh,4rem)!important}
body.theme-light .hero-pretitle,body.theme-light .hero-h1,body.theme-light .hero-sub,body.theme-light .hero-btns{margin-left:0!important;margin-right:auto!important}
/* converted cover heros (e.g. /contact-us) -> same left 1180 grid. Zero the block's
   global padding on the inner container so the title lands on 130px like every .hero. */
body.theme-light .wp-block-cover.page-hero .wp-block-cover__inner-container{
  max-width:1180px!important;margin-inline:auto!important;width:100%!important;
  padding-inline:0!important;text-align:left!important;align-items:flex-start!important}
body.theme-light .wp-block-cover.page-hero h1,
body.theme-light .wp-block-cover.page-hero p,
body.theme-light .wp-block-cover.page-hero .section-eyebrow{text-align:left!important}
/* converted .hero--short CONSTRAINED-GROUP heros (/thank-you, /privacy-policy, /terms):
   WP's is-layout-constrained centres children in a narrow column -> override to the 1180
   grid, left text, so they match the .hero pages. */
body.theme-light .hero.hero--short{padding-inline:clamp(1.5rem,5vw,4rem)!important}
body.theme-light .hero.hero--short > *{
  max-width:1180px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;text-align:left!important}
body.theme-light .hero-content h1,body.theme-light .hero-content .hero-title,
body.theme-light .hero-h1{text-shadow:none!important;color:var(--white)!important}
body.theme-light .hero-h1 em,body.theme-light .hero-pretitle{color:var(--gold)!important}
body.theme-light .hero-sub{color:var(--muted)!important}
body.theme-light .hero-sub strong{color:var(--white)!important}
body.theme-light .hero-stat{background:rgba(255,255,255,.6)!important;border-color:rgba(13,34,64,.14)!important}
body.theme-light .hero-scroll{display:none!important}
/* ghost CTA in the hero on cream */
body.theme-light .hero .btn-ghost,body.theme-light .video-hero .btn-ghost{
  border-color:rgba(13,34,64,.3)!important;background:rgba(255,255,255,.4)!important}
body.theme-light .hero .btn-ghost span,body.theme-light .video-hero .btn-ghost span{color:#0D2240!important}

/* NAV over the now-LIGHT inner heros: pre-scroll, the transparent nav's white logo/links
   vanish on cream. Give INNER pages (not .home) a dark nav treatment until scrolled; the
   scrolled state is still solid slate + white text. Homepage keeps its white-on-video nav. */
body.theme-light:not(.home) #main-nav:not(.nav-scrolled) .nav-brand-mark img{filter:brightness(0)}
body.theme-light:not(.home) #main-nav:not(.nav-scrolled) .nav-brand-name{color:#0D2240}
body.theme-light:not(.home) #main-nav:not(.nav-scrolled) .nav-brand-sub{color:#7A5F2C}
body.theme-light:not(.home) #main-nav:not(.nav-scrolled) .nav-links a{color:rgba(13,34,64,.82)}
body.theme-light:not(.home) #main-nav:not(.nav-scrolled) .nav-links a:hover{color:#0D2240}
body.theme-light:not(.home) #main-nav:not(.nav-scrolled) .nav-cta{border-color:rgba(13,34,64,.4)!important;color:#0D2240!important;background:transparent!important}
body.theme-light:not(.home) #main-nav:not(.nav-scrolled) .nav-cta:hover{background:#7A5F2C!important;color:#F6F2EA!important;border-color:#7A5F2C!important}
body.theme-light:not(.home) #main-nav:not(.nav-scrolled) .nav-hamburger span{background:#0D2240}

/* ============================================================================
   HEADER OFFSET — WP ADMIN BAR (2026-07-15)

   BUG (measured logged-in): #wpadminbar occupies y=0..32 and #main-nav is
   position:fixed;top:0 — so the nav slid UNDER it and the logo (y=16, h=34) was
   clipped by the bar. Anonymous visitors never saw this; the client lives in it.

   --header-height is a token so the 72->60px scroll shrink and any future change stay
   in sync with anything that needs to clear the header.

   NOT DONE, deliberately: no padding-top was added to page/section starts. Audited all
   15 page templates x 390/1440 anonymously — content top ranged 151-331px against a nav
   bottom of 72px. Every page was already clear; .hero-content's 120px padding does it.
   Adding an offset would have pushed every hero down to fix a bug that does not exist.
   ============================================================================ */
:root{ --header-height:72px; --admin-bar-height:0px; }

#main-nav{ top: var(--admin-bar-height); }
#main-nav.nav-scrolled{ --header-height:60px; }

/* WP renders the bar at 32px on desktop and 46px at <=782px. */
body.admin-bar{ --admin-bar-height:32px; }
@media screen and (max-width:782px){
  body.admin-bar{ --admin-bar-height:46px; }
}
/* At <=600px WP switches #wpadminbar to position:absolute, so it scrolls away —
   a fixed offset would leave a permanent gap once the user scrolls. */
@media screen and (max-width:600px){
  body.admin-bar{ --admin-bar-height:0px; }
  body.admin-bar #main-nav{ top:0; }
}
body.admin-bar .mobile-nav{ top: var(--admin-bar-height); }

/* ============================================================================
   SERVICE SLIDER CARDS — real imagery (2026-07-15)
   Re-landed from stash@{0}, DECOUPLED from the palette work it was tangled with.
   Built on the CURRENT default theme; every colour comes from a token, so the
   light theme inherits it with no rule change.
   .sp-svc was min-height:60vh with NO image slot — giant empty panels.
   ============================================================================ */
.sp-svc{justify-content:flex-start!important;padding:0!important;overflow:hidden;
  background:var(--bg2);border:1px solid var(--border)}
.sp-svc__media{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--bg3)}
.sp-svc__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease-silk)}
.sp-svc:hover .sp-svc__media img{transform:scale(1.04)}
.sp-svc__body{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  padding:24px 24px 28px}
.sp-svc__idx{margin-bottom:0!important}
.sp-svc h3{color:var(--white)}
.sp-svc p{color:var(--muted)!important;margin:0 0 1rem!important}

/* One button component — the slider CTA was a bare "EXPLORE ->" text link. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  min-height:44px;padding:0 22px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);
  transition:background .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:var(--btn-bg-hover);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn--sm{min-height:38px;padding:0 16px;font-size:11px}
@media(prefers-reduced-motion:reduce){
  .sp-svc__media img,.btn{transition:none}
  .sp-svc:hover .sp-svc__media img{transform:none}
  .btn:hover{transform:none}
}

/* Form fields on a cream (.section-light) ground — the dark-theme .form-input/.form-label
   (navy bg, light label) are invisible on cream. Give them a light-ground treatment.
   Belongs to the light vocabulary; the light palette (item 3) needs it too. */
.section-light .form-label{ color:var(--ink-soft)!important; }
.section-light .form-input,
.section-light .form-select,
.section-light .form-textarea{
  background:rgba(255,255,255,.7)!important; color:var(--ink)!important;
  border:1px solid rgba(13,34,64,.2)!important; }
.section-light .form-input::placeholder,
.section-light .form-textarea::placeholder{ color:var(--ink-mute)!important; }
.section-light .form-input:focus,
.section-light .form-select:focus,
.section-light .form-textarea:focus{ border-color:var(--gold-ink)!important; outline:none; }

/* ============================================================================
   FLIP AA FIXES — Palette A default (2026-07-16). Close the contrast failures
   the light+slate flip introduced. Iterated against the composited scanner.
   ============================================================================ */
/* Dark sections that DON'T self-set a background got the cream body ground while their
   text went white -> white-on-cream. Give them the slate ground (their --bg is slate). */
body.theme-light .sp-testi,
body.theme-light .cta-banner,
body.theme-light .sp-cta{ background:var(--bg)!important; }
/* converted-page cover hero is dark -> force light text + bright gold */
body.theme-light .wp-block-cover.page-hero,
body.theme-light .wp-block-cover.page-hero .wp-block-heading,
body.theme-light .wp-block-cover.page-hero h1,
body.theme-light .wp-block-cover.page-hero p{ color:#FDFCFB!important; }
body.theme-light .wp-block-cover.page-hero .section-eyebrow{ color:#C8A868!important; }
/* homepage testimonials sit on slate -> light text (was navy-on-cream / white-on-cream) */
body.theme-light .sp-testi .testi-text,
body.theme-light .sp-testi blockquote,
body.theme-light [data-testi] .sp-eyebrow,
body.theme-light [data-testi] blockquote{ color:rgba(255,255,255,.9)!important; }
body.theme-light .sp-testi figcaption,
body.theme-light .sp-testi .testi-reviewer-meta{ color:rgba(255,255,255,.72)!important; }
/* borderline light-ground text -> darken to clear AA 4.5 */
.section-body{ color:rgba(13,34,64,.86)!important; }
body.theme-light .sp-stats span,
body.theme-light .stat-label{ color:rgba(13,34,64,.7)!important; }
body.theme-light .phase-label{ color:var(--gold-ink,#7A5F2C)!important; }
/* the giant ghost programs numeral is DECORATIVE (256px watermark) — mark exempt */
.sp-prog__num{ opacity:1; }

/* service-page testimonial cards sit on CREAM -> dark meta (the light rule is scoped to
   the homepage's slate .sp-testi only). And nudge the homepage story lede over AA. */
body.theme-light .testi-photo-card .testi-reviewer-meta,
body.theme-light .testi-card .testi-reviewer-meta{ color:var(--gold-ink,#7A5F2C)!important; }
body.theme-light .sp-lede{ color:rgba(13,34,64,.9)!important; }

/* ============================================================================
   DEPTH SYSTEM (2026-07-16) — ONE warm-tinted elevation scale, applied sitewide.
   Warm brown tint (rgba(60,44,26,...)), NOT gray-black, so shadows stay elegant on
   ivory. Three steps + a deeper neutral for cards on dark grounds. Interactive cards
   lift on hover. Tokens so it's one system, not per-section improvisation.
   ============================================================================ */
:root{
  --elev-1: 0 1px 3px rgba(60,44,26,.05), 0 3px 8px rgba(60,44,26,.05);
  --elev-2: 0 6px 16px rgba(60,44,26,.08), 0 14px 34px rgba(60,44,26,.07);
  --elev-3: 0 16px 40px rgba(60,44,26,.12), 0 28px 64px rgba(60,44,26,.09);
  --elev-dark: 0 12px 32px rgba(0,0,0,.30), 0 26px 60px rgba(0,0,0,.22);
  --ease-lift: cubic-bezier(0.22,1,0.36,1);
}
/* cards + paneled content on light grounds */
.card,.team-card,.step-card,.testi-photo-card,.service-img-card,.post-card{
  box-shadow:var(--elev-1)!important;
  transition:box-shadow .45s var(--ease-lift), transform .45s var(--ease-lift), border-color .4s!important;
}
/* media / image tiles: soft lift shadow */
.split-media,.sp-story__media,.sp-svc__media{ box-shadow:var(--elev-2)!important; }
/* service slider cards */
.sp-svc{ box-shadow:var(--elev-2)!important;
  transition:box-shadow .45s var(--ease-lift), transform .45s var(--ease-lift), border-color .4s!important; }
/* program cards sit on slate -> deeper neutral shadow */
.sp-prog{ box-shadow:var(--elev-dark)!important; }
/* interactive card hover lift (one motion everywhere) — lift + shadow ONLY, never a
   background/overlay change, so text stays readable in both states on any ground. */
.card:hover,.team-card:hover,.step-card:hover,.testi-photo-card:hover,.testi-card:hover,
.service-img-card:hover,.post-card:hover,.sp-svc:hover{
  box-shadow:var(--elev-3)!important; transform:translateY(-4px)!important;
}
/* buttons: subtle depth, lift on hover (transform lifts already exist on .btn/.sp-btn) */
.btn,.btn-gold,.sp-btn,.sp-open__btn{ box-shadow:var(--elev-1); }
.btn:hover,.btn-gold:hover,.sp-btn:hover,.sp-open__btn:hover{ box-shadow:var(--elev-2); }
@media(prefers-reduced-motion:reduce){
  .card,.team-card,.step-card,.testi-photo-card,.testi-card,.service-img-card,.post-card,.sp-svc{transition:none!important}
  .card:hover,.team-card:hover,.step-card:hover,.testi-photo-card:hover,.testi-card:hover,
  .service-img-card:hover,.post-card:hover,.sp-svc:hover{transform:none!important}
}