/* ============================================================================
 * CLIENT THEME — Black Gold  (Theme 12 / V12 — Dark base)
 * ----------------------------------------------------------------------------
 * Standalone copy of Dark V1 with accent swapped to antique gold (#A69471)
 * and body surface deepened from graphite (#2C2B30) to near-pure black
 * (#111013). The deep-black body is the signature of this theme — no other
 * dark variant uses this tone. V1 is UNTOUCHED on disk.
 *
 * Source palette (Indro 2026-04-21):
 *   Gold     #A69471  (primary accent — antique/champagne gold)
 *   Black    #111013  (body surface — deeper than V1-V11 graphite)
 *   Slate    #454747  (shared card-back mid-stop)
 *
 * Contrast: gold #A69471 on white fails (~2.56:1) — CTAs use BLACK text
 * (--global-button-color: #111013). Primary-text on light variants uses a
 * darker gold (#604E20, ~6:1 on white). See contrast pass + WCAG patch.
 * ============================================================================ */

/* PG-19 | SITEWIDE — Temporarily hide the "Shop" + "Schools" nav items.
   Indro asked to hide both "for now" — keep the HTML intact so Kanishk doesn't
   have to edit every page template, just flip this rule off to restore.
   Schools links to pages that aren't ready; Shop links to products.html.

   `.school_nav_tab` is the unique class on the <li> for the Schools dropdown.
   The Shop item doesn't carry a unique class so we match by child href. */
.nav-links .nav-item.school_nav_tab,
.nav-links .nav-item:has(> a[href="products.html"]),
.nav-links .nav-item:has(> a[href$="products.html"]),
ul:has(> li > a[href="products.html"]) > li:has(> a[href="products.html"]) {
  display: none !important;
}
/* Fallback for browsers without :has() — hides the Shop link but may leave
   the <li> shell. Schools fallback covered by the direct class selector above. */
.nav-links a[href="products.html"],
.nav-links a[href$="products.html"] {
  display: none !important;
}

:root {
  --primary-color:         #A69471;  /* Antique gold (brand accent — Theme 12) */
  --primary-color-hover:   #857651;  /* derived darker gold (~20%)     */
  --primary-text:          #A69471;  /* gold on near-black — passes 7:1 */
  --primary-color-dark:    #454747;  /* Slate (warm-cool transition)   */
  --primary-color-darker:  #111013;  /* Deep black (deepest card stop) */

  --primary-color-alpha-70: rgba(166, 148, 113, 0.7);
  --primary-color-alpha-82: rgba(166, 148, 113, 0.82);  /* gift-section overlay */
  --black-color-alpha-93:   rgba(44, 43, 48, 0.93);

  --black-color: #111013;  /* V12 override — deeper black signature */
  --white-color: #fff;

  --navbar-subtitle-color: #E0D1A6;  /* pale champagne — gold tint */

  --global-button-bg:    var(--primary-color);  /* full gold on CTA — matches reference */
  --global-button-color: var(--white-color);  /* white on gold — brand call, ref design */
  --card-gradient-1: var(--primary-color);
  --card-gradient-2: var(--primary-color-hover);
  --card-gradient-3: var(--primary-color-dark);
  --card-gradient-4: var(--primary-color-darker);

  /* ----------------------------------------------------------------------
   * SEMANTIC TOKENS (2026-04-20 refactor for multi-theme support)
   * ----------------------------------------------------------------------
   * Dark V1 aliases these to existing tokens so values are identical.
   * Light V1 overrides these to flip surfaces/text without breaking
   * the gradient-stop usages of --primary-color-darker or dark-text
   * usages of --black-color.
   *
   * SURFACES (background roles)
   *   --surface-base   the main body surface (dark in dark, white in light)
   *   --surface-card   always-white panels (testimonials, form cards) — literal
   *   --surface-band   always-dark contrast bands (footer, hero dark zones)
   *
   * TEXT (color roles)
   *   --text-on-surface  text on body (white in dark, graphite in light)
   *   --text-on-card     text on white cards (graphite in both)
   *   --text-on-band     text on dark bands (white in both)
   * -------------------------------------------------------------------- */
  --surface-base:    var(--black-color, #2C2B30);   /* maps to body bg */
  --surface-card:    #FFFFFF;                        /* literal white */
  --surface-band:    #1F1F1F;                        /* literal dark */
  --text-on-surface: var(--white-color, #fff);       /* body text */
  --text-on-card:    var(--black-color, #2C2B30);    /* text on white */
  --text-on-band:    #FFFFFF;                        /* text on dark */

  /* TOP SEO BAR right-half — inverts per theme (Indro spec 2026-04-20):
   *   Dark theme: WHITE bg + BLACK text (contrasts against dark body below)
   *   Light theme: GRAPHITE bg + WHITE text (contrasts against white body)
   * Left-half stays coral + white text in both. */
  --topbar-right-bg:   #FFFFFF;
  --topbar-right-text: #2C2B30;

  /* BUTTON HOVER (overlay) — per-theme (Indro spec 2026-04-20):
   *   Dark theme:  graphite bg + white text
   *   Light theme: graphite bg + coral text
   * The hover BG is always graphite, NOT --surface-base (which flips to
   * white in Light V1 — wrong for a contrast overlay).
   * Default (non-hover) button text stays literal #FFFFFF in both themes
   * because the default bg is always coral. */
  --btn-hover-bg:   #111013;   /* theme-matched deep black */
  --btn-hover-text: #FFFFFF;   /* Dark default; Light V1 overrides to coral */
}

/* Body background — Bone (off-white with warm violet undertone) */
body,
.new_layout_v1 {
  background-color: var(--surface-base, #E5E1E8) !important;
}


/* ============================================================================
 * COMPONENT RULES — values flow from :root. Do not hardcode colors here.
 * Rule order and !important declarations preserved from the original file.
 * ============================================================================ */

.bg-primary {
    background: var(--primary-color, #1a65d4);
}

.homepage_slider p:first-of-type {
    color: var(--primary-color, #1a65d4);
}

.text-box .button-group .button--primary {
    background-color: var(--global-button-bg, var(--primary-color, #1a65d4));
}

.button.button--bordered-slider {
    color: var(--global-button-bg, var(--primary-color, #1a65d4));
    box-shadow: inset -2px 0 var(--primary-color, #1a65d4), inset 0 -2px var(--primary-color, #1a65d4), inset 2px 0 var(--primary-color, #1a65d4), inset 0 2px var(--primary-color, #1a65d4);
}

@media (min-width: 1320px) {
    .top-navbar {
        background: linear-gradient(to right, var(--primary-color, #1a65d4) 50%, var(--surface-base, #141414) 50%);
    }
}

.top-navbar .navbar-text .title-sub {
    color: var(--navbar-subtitle-color, #cee5ff);
}

@media (min-width: 0px) {
  .request-form-container .request-form .submit-button {
    background-color: var(--global-button-bg, var(--primary-color, #1a65d4));
  }
}

input[type="submit"] {
  background: var(--primary-color, #1a65d4);
  border: 2px solid var(--primary-color, #1a65d4);
}

.image-container .image-wrapper .overlay {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-color: var(--primary-color-alpha-70, rgba(26, 101, 212, 0.7));
}

* {
  color: inherit;
  margin: 0;
}

.image-container .image-wrapper .overlay .content .learn-more {
  color: var(--primary-color, #1a65d4);
}

@media (min-width: 480px) {
  #testi-block .custom-carousel .carousel-inner .carousel-item .slide-text .quote {
    bottom: -10px;
  }
}
#testi-block .custom-carousel .carousel-inner .carousel-item .slide-text .quote {
  background: var(--primary-color, #1a65d4);
}

.new_layout_v1 .cdbtn.cookie {
  background-color: var(--primary-color, #1a65d4) !important;
}

#about-top h3 {
  /* Phone number "box" — graphite pill for legibility on photo-bg hero */
  display: inline-block !important;
  background: rgba(44, 43, 48, 0.9) !important;
  color: #FFFFFF !important;
  padding: 10px 28px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin: 6px auto 15px !important;
}

.features-list-about h2 {
  color: var(--primary-color, #1a65d4) !important;
}

.web-special h2 {
  font-size: 30px;
  color: var(--primary-color, #1a65d4);
}

.trial-form-about-footer {
  background: var(--primary-color, #1a65d4) !important;
}

.owner-section .owner-image .slideReveal-overlay {
  opacity: 0;
  -webkit-transform-origin: 0;
  transform-origin: 0;
  z-index: 2;
  background-color: var(--primary-color, #1a65d4);
}

#facility .video-block h2 {
  color: var(--primary-color, #1a65d4);
}

#web-offers .left-block {
  background: var(--primary-color, #1a65d4) !important;
}

.custom-step-section .card-title-container .icon {
  background: var(--primary-color, #1a65d4) !important;
}
#program-top h2 p {
  color: var(--primary-color, #1a65d4) !important;
}

.condensed_cat_programs .ages {
  color: var(--primary-color, #1a65d4) !important;
}

.new_headline_section .single_box .desc {
  color: var(--primary-color, #1a65d4);
}

#get-started h2 {
  color: var(--primary-color, #1a65d4);
}

#get-started h3 {
  color: var(--primary-color, #1a65d4);
}

.block-box {
  background: var(--surface-card, #fff) !important;
  border: 2px solid var(--primary-color, #1a65d4) !important;
}

#parents h2 {
  color: var(--primary-color, #1a65d4);
}

#life-skills.ways h2 {
  color: var(--primary-color, #1a65d4);
}

#life-skills.ways .col-sm-4 h3 {
  background: var(--primary-color, #1a65d4);
}
#ata-ad h2, #ata-ad h3, #ata-ad h4 {
  color: var(--primary-color, #1a65d4);
}

.new_layout_v1 #about-trial-form {
  background: var(--primary-color, #1a65d4);
}
.owner-section .owner-text-section .learn-more.learn-more {
  box-shadow: inset -2px 0 var(--primary-color, #1a65d4), inset 0 -2px #000, inset 2px 0 #000, inset 0 2px var(--primary-color, #1a65d4);
}

.video-section .text-content .learn-more.learn-more {
  box-shadow: inset -2px 0 var(--primary-color, #1a65d4), inset 0 -2px #000, inset 2px 0 #000, inset 0 2px var(--primary-color, #1a65d4);
}

@media (min-width: 1320px) {
  .bottom-navbar-container .bottom-navbar ul.bottom-navbar-content-wrapper .nav-links > li > a {
    text-transform: capitalize;
    color: var(--primary-color, #1a65d4);
  }
}

@media (min-width: 1320px) {
  .nav-links .nav-item .programs-nested .arrow span {
    color: var(--primary-color, #1a65d4);
  }
}

a {
  text-decoration: none;
}

.image-container .image-wrapper .mobile-content .fp2-button {
  background-color: initial;
  color: var(--primary-color, #1a65d4);
}
.text-section-1-container .text-section-box p span {
  color: var(--primary-color, #1a65d4);
}


@media (max-width: 800px) {
   .advertisements .image-wrapper:hover::before{background-color: var(--primary-color-alpha-70, rgba(26, 101, 212, 0.7)) !important;}
}


.card .card-back {
  background: linear-gradient(
      135deg,
      var(--card-gradient-1, #1A65D4),
      var(--card-gradient-2, #1355b6) 25%,
      var(--card-gradient-3, #0a3b84) 50%,
      var(--card-gradient-4, #042351) 75%,
      var(--card-gradient-1, #1A65D4)
    )
}

@-webkit-keyframes revealRedStripe {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0;
            transform-origin: 0;
    background-color: var(--primary-color, #1a65d4);
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    opacity: 1;
    -webkit-transform-origin: 0;
            transform-origin: 0;
    background-color: var(--primary-color, #1a65d4);
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes revealRedStripe {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0;
            transform-origin: 0;
    background-color: var(--primary-color, #1a65d4);
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    opacity: 1;
    -webkit-transform-origin: 0;
            transform-origin: 0;
    background-color: var(--primary-color, #1a65d4);
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@media (min-width: 1320px) {
  .bottom-navbar-container .bottom-navbar ul.bottom-navbar-content-wrapper .modern-btn {
    background-color: var(--global-button-bg, var(--primary-color, #1a65d4));
    color: var(--global-button-color, #fff);
    cursor: pointer;
    text-align: center;
    z-index: 1;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    display: inline-block;
    position: relative;
    overflow: hidden;
  }
}

@media (min-width: 0px) {
  .top-navbar {
    background: linear-gradient(to right, var(--primary-color, #1a65d4) 50%, var(--surface-base, #141414) 50%);
  }
}
#homepage .owner-section .owner-text-section .owner-text .owner-header h2 { border-bottom: 2px solid var(--primary-color, #1a65d4)!important;}
.about_trial_bottom_form::before { border-top-color: var(--primary-color, #1a65d4) !important;border-top: 72px solid var(--primary-color, #1a65d4) !important;}

#about-us-page .staff-block ul li h4 {color: var(--primary-color, #1a65d4) !important;}

#testi-block .slideReveal-overlay { background-color: var(--primary-color, #1a65d4)!important;}

@media (min-width:767px) {
  .owner-section {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    max-height: 550px;
    padding: 0;
  }
  .owner-section .owner-image {
    text-align: center;
    flex: 1;
    height: 100%;
    max-height: 550px;
  }
  .owner-section .owner-image img {
    -o-object-fit: cover;
       object-fit: cover;
    padding: 1.5rem;
    top: 22px;
  }
  .owner-section .owner-image #reveal-image {
    top: 22px;
  }
  .owner-section .owner-text-section {
    text-align: start;
    border-radius: 0;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    max-height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
  }
  .owner-section .owner-text-section .owner-text {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 568px;
    height: 465px;
    margin: 0 0 0 92px;
    display: flex;
  }
  .owner-section .owner-text-section .owner-text .owner-header h1,.owner-section .owner-text-section .owner-text .owner-header h2 {
    color: var(--text-on-card, #141414);
    letter-spacing: 0;
    border-bottom: 2px solid var(--primary-color, #1a65d4);
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-size: 40px;
    line-height: 1.05em;
  }
}

@media (min-width: 1320px) {
  .bottom-navbar-container .arrow::after {
    color: var(--primary-color, #1a65d4);
  }
}
@media (min-width: 1320px) {
  .bottom-navbar-container .bottom-navbar ul.bottom-navbar-content-wrapper .nav-links > li > a::after {
    background-color: var(--primary-color, #1a65d4);
  }
}
.card .card-back button::after {
  content: "";
  z-index: -1;
  background: var(--black-color-alpha-93, rgba(20, 20, 20, 0.93));
  width: 100%;
  height: 100%;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-100%);
  transform: translate(-100%);
}
.card .card-back button.featured-button {
  text-transform: capitalize;
  border-radius: 10px 10px 0 0;
}
.card .card-back button {
  color: var(--text-on-card, #141414);
}

/* ============================================================================
 * THEME-LEVEL OVERRIDES for legacy layout CSS (dojocss.css, chatbot.css)
 *   These selectors hardcode #ff0500 (red) in the layout files and don't
 *   participate in the variable system. Wire them into --primary-color so
 *   re-theming works across the whole page.
 * ============================================================================ */

/* Find Location stripe above the map (layout file hardcodes #ff0500) */
#find-location {
  background-color: var(--primary-color, #1a65d4) !important;
}

/* Chatbot widget — legacy chatbot.css hardcodes #ff0500 */
.custom-chatbot #chatbot-toggler,
.custom-chatbot .chat-header,
.custom-chatbot .submit_btn_box {
  background-color: var(--primary-color, #1a65d4) !important;
}

/* About-page mission statement banner — layout CSS hardcodes a coral→magenta
   gradient (#ff655d → #fd3276). Solid primary (no side-gradient) so the bar
   reads as one clean coral block, not a fade to dark-graphite on the right.
   Text forced to white: the H2 headline would otherwise render in primary and
   disappear into the coral. */
#about-mission-statement {
  background: var(--primary-color, #1a65d4) !important;
}
#about-mission-statement h1,
#about-mission-statement h2,
#about-mission-statement h3,
#about-mission-statement h4,
#about-mission-statement p,
#about-mission-statement span,
#about-mission-statement .mission-statement-box,
#about-mission-statement .mission-statement-box * {
  color: var(--text-on-surface, #ffffff) !important;
}

/* About-page peak separator (the layered fan SVG below the mission banner).
   Mission bar is now solid primary, so the TOP fan layer (the sliver adjacent
   to the bar) must also be solid primary — otherwise the gradient's dark-end
   creates a visible seam where the bar meets the fan.
   - path:last-child (the top-most, thinnest mountain sliver, z-order on top)
     → solid primary so it joins the bar cleanly.
   - remaining paths keep the primary→primary-dark gradient to preserve the
     layered fan depth visible below the sliver.
   The <linearGradient id="aboutSeparatorGradient"> must exist as a <defs>
   child of the SVG in about-us.html. */
.about-section-separator svg path {
  fill: url(#aboutSeparatorGradient) !important;
}
.about-section-separator svg path:last-child {
  fill: var(--primary-color, #1a65d4) !important;
}

/* About-page secondary sticky sub-nav (#stick-nav) — layout CSS paints this
   a HARDCODED WHITE background when it sticks on scroll, creating a white
   band below the main graphite navbar that breaks the dark-theme continuity.
   2026-04-21 revision (Indro): paint GOLD (--primary-color) with white link
   text so the sub-nav reads as a branded band instead of another dark stripe.
   Layout paints `.sub-navigation ul li a { color:#1f1f1f }` so we need an
   explicit white override on the links. Hover rule further down paints the
   anchor bg gold+white on hover — with a gold default bar that becomes a
   no-op; we add an underline on hover so the affordance is still visible. */
#stick-nav,
#stick-nav.fixed {
  background: var(--primary-color, #A69471) !important;
  background-color: var(--primary-color, #A69471) !important;
  border-top: 2px solid #000000 !important;
  border-bottom: 2px solid #000000 !important;
}
body#about #stick-nav .sub-navigation ul li a,
body#about #stick-nav .sub-navigation ul li > a {
  color: #ffffff !important;
}
body#about #stick-nav .sub-navigation ul li a:hover,
body#about #stick-nav .sub-navigation ul li > a:hover {
  text-decoration: underline !important;
}

/* About-page #staff "Instructor Position" badges — layout CSS paints these
   a HARDCODED yellow (#FFC82F) label box. Route to primary coral so the
   badges match the brand palette. White text already set by layout. */
#staff .staff-block h4,
#staff .staff-block li h4 {
  background-color: var(--primary-color, #1a65d4) !important;
  color: var(--text-on-surface, #ffffff) !important;
}

/* Read More (.learn-more): see the body-scoped rule ~line 1150 for the
   canonical pattern (white → graphite invert on hover). */

/* Program-page hero peak separators (top + bottom) — inline SVG <linearGradient
   id="gradient1"> hardcoded to red→white (#ff0500 → #fff). CSS can override
   SVG <stop> colors via !important (beats the stop's inline style attr).
   Result: peaks fade from primary on the left to white on the right, same
   visual shape as before. */
.program-section-separator linearGradient stop:first-child {
  stop-color: var(--primary-color, #1a65d4) !important;
}
.program-section-separator linearGradient stop:last-child {
  stop-color: var(--white-color, #fff) !important;
}

/* ============================================================================
 * PHASE 1 OVERRIDES (2026-04-17) — audit-driven sweep of remaining off-theme
 * selectors. See THEMING_AUDIT_2026-04-17.md §5 "Phase 1 High-Impact".
 * Every rule here uses !important because it competes against either
 *   (a) raw #ff0500 declared inside @media blocks in the layout CSS, or
 *   (b) inline style="color:#..." attributes in CMS-authored HTML content
 *       (inline style without !important loses to any CSS !important).
 * ============================================================================ */

/* --- Bordered-slider button insets (layout CSS redeclares raw #ff0500
   inside breakpoint @media rules; add !important to beat all of them) --- */
.button.button--bordered-slider {
  box-shadow:
    inset -2px 0 var(--primary-color, #1a65d4),
    inset  0 -2px var(--primary-color, #1a65d4),
    inset  2px 0 var(--primary-color, #1a65d4),
    inset  0  2px var(--primary-color, #1a65d4) !important;
}

/* --- Section separator gradients (red→white sweeps in layout CSS) --- */
.section-separator-top {
  background: linear-gradient(to right, var(--primary-color, #1a65d4), var(--surface-card, #fff)) !important;
}
.section-separator-bottom {
  background: linear-gradient(to left, var(--primary-color, #1a65d4), var(--surface-card, #fff)) !important;
}

/* --- Contact / top-header icons --- */
.new_layout_v1 .top-header-right .icon_sections .fa-phone,
.contact-address-section .fa-map-marker,
.contact-address-section .fa-clock,
.contact-address-section [class*="fa-map"],
.contact-address-section [class*="fa-clock"] {
  color: var(--primary-color, #1a65d4) !important;
}
.contact-address-section .working-hours li a:hover,
.contact-address-section .working-hours li.active a {
  color: var(--primary-color, #1a65d4) !important;
}

/* --- Find Location select dropdown text --- */
#find-location select {
  color: var(--primary-color, #1a65d4) !important;
}

/* --- Headline-section middle-box side borders --- */
.new_headline_section .single_box.middle_box {
  border-left-color: var(--primary-color, #1a65d4) !important;
  border-right-color: var(--primary-color, #1a65d4) !important;
}

/* --- About-page difference-block body text --- */
#about #difference .block-box p {
  color: var(--primary-text, var(--primary-color, #1a65d4)) !important;
}

/* --- Program-listing card name border --- */
.condensed_cat_programs .program-name {
  border-color: var(--primary-color, #1a65d4) !important;
}

/* --- Chatbot widget — fill remaining gaps left by theme-base's three-
       selector override higher up (logo, avatar, message bubble, focus
       ring, send button, in-body links, error borders). --- */
.custom-chatbot .chatbot-logo {
  fill: var(--primary-color, #1a65d4) !important;
}
.custom-chatbot .chat-body .message .bot-avatar {
  background: var(--primary-color, #1a65d4) !important;
}
.custom-chatbot .chat-body .user-message .message-text {
  background: var(--primary-color, #1a65d4) !important;
  color: var(--text-on-surface, #fff) !important;
}
.custom-chatbot .chat-form:focus-within {
  outline-color: var(--primary-color, #1a65d4) !important;
}
.custom-chatbot .chat-controls #send-message {
  background: var(--primary-color, #1a65d4) !important;
  color: var(--text-on-surface, #fff) !important;
}
.custom-chatbot .chat-body a {
  color: var(--primary-color, #1a65d4) !important;
}
.custom-chatbot #chatbot_user_form .chatbot_username_field.error,
.custom-chatbot #chatbot_user_form .chatbot_location_field.error {
  border-color: var(--primary-color, #1a65d4) !important;
}

/* ============================================================================
 * PROGRAM-PAGE CMS CONTENT NORMALIZATION
 *   The dojoonlinemarketing CMS ships program-page content with inline
 *   color styles baked into <span> tags — raw reds (#FF0000/#FF0500/etc.)
 *   on headline accent words and CTA paragraphs, plus pale tints on
 *   decorative section backgrounds. Kanishk can't practically strip these
 *   from every page, so we match them by attribute selector and remap to
 *   theme tokens. Case-insensitive (i) because inline hex cases vary.
 * ============================================================================ */

/* Red-family inline spans → primary */
[style*="color:#FF0000" i],
[style*="color:#FF0500" i],
[style*="color:#FF0501" i],
[style*="color:#FF0703" i],
[style*="color:#FF0400" i],
[style*="color:#F70000" i],
[style*="color:#C91010" i],
[style*="color: #FF0000" i],
[style*="color: #FF0500" i],
[style*="color: #FF0501" i] {
  color: var(--primary-color, #1a65d4) !important;
}

/* Pale-yellow step number label inside primary-color stripe → white */
[style*="color:#FEFFC9" i],
[style*="color: #FEFFC9" i] {
  color: var(--text-on-surface, #fff) !important;
}

/* Pale mint and lavender section backgrounds baked into CMS content → white */
section[style*="rgb(190, 238, 235)"],
section[style*="rgb(190,238,235)"],
section[style*="#e6e6ed" i],
[style*="background:rgb(190, 238, 235)"],
[style*="background:rgb(190,238,235)"],
[style*="background:#e6e6ed" i],
[style*="background: #e6e6ed" i] {
  background: var(--surface-card, #fff) !important;
}

/* --- Benefits_1 section (revised 2026-04-20 night) -------------------
   Layout CSS + CMS inline styles paint this block in various off-theme
   colors (teal, purple, blue) per program. Adult + krav use rgb(0,0,0)
   which reads as pure black — not in the theme palette.

   Final design (per Indro): paint WHITE + graphite text. Black/graphite
   was jarring against the surrounding light sections and looked like a
   random dark slab. White matches the rest of the page and lets the
   PG-12 coral H2 pop.

   Requires the inline "background:rgb(X,Y,Z) !important" to be stripped
   from the HTML (already done in local test bed; CMS template must
   replicate — see README_FOR_KANISHK.md). */
.benefits_1_section {
  background-color: var(--surface-card, #fff) !important;
  /* PG-16: 2px accent stroke top+bottom frames the section against the
     neighboring panels. Still useful on white to delineate the row. */
  border-top: 2px solid var(--primary-color, #A69471) !important;
  border-bottom: 2px solid var(--primary-color, #A69471) !important;
}
.benefits_1_section h2,
.benefits_1_section h3,
.benefits_1_section p {
  color: var(--text-on-card, #2C2B30) !important;
}

/* --- PG-12 | PAGE-CATEGORY SCOPED (program pages / any page with a
   .benefits_1_section dark stripe) ---------------------------------
   The layout rule `.container.small-container .heading_section h2/h3/h4`
   forces --black-color !important with specificity 0,3,1 and BEATS the
   .benefits_1_section h2 white override (0,1,1) above. Inside the dark
   section that renders as graphite-on-graphite — headline is invisible.
   Fix: recolor headings inside .heading_section ONLY when nested under
   .benefits_1_section, to coral accent. Specificity 0,4,1 + !important
   wins cleanly. Scoped to benefits_1_section so the light-bg heading
   behavior elsewhere is not affected. */
.benefits_1_section .container.small-container .heading_section h2,
.benefits_1_section .container.small-container .heading_section h3,
.benefits_1_section .container.small-container .heading_section h4 {
  color: var(--primary-color, #A69471) !important;
}

/* --- PG-13 (revised PG-13r2 2026-04-20 night) | PAGE-CATEGORY SCOPED (program pages) --
   Structure: each program page has a stack of THREE adjacent-sibling
   `section.cyan-bg.little_row_section` panels (e.g. "Learn Goal-Setting
   Skills" / "Improve Focus and Self-Control" / "A Strong Sense of Respect"
   on little-ninjas — equivalent trios on the other 5 program pages).

   Indro's final design: paint ONLY the MIDDLE panel (2nd of 3) with the
   accent color so it visually separates the top and bottom siblings.
   Top + bottom panels stay white with graphite text. Middle panel uses
   coral bg + white text.

   Original CMS paints all 3 with off-theme dark purple / teal / cyan inline
   styles; those need to be overridden regardless of which palette wins
   the middle slot.

   Strategy uses adjacent-sibling `+` combinator to pick out the middle
   without needing `:nth-of-type` (fragile since total section count
   differs per page). Matches rely on: (1) the 3 siblings being
   consecutive adjacent siblings — confirmed on all 6 program pages
   2026-04-20 evening audit — and (2) the panels having identical
   `section.cyan-bg.little_row_section` class tuple.

   Selector math:
   - `X`                        → 1st + 2nd + 3rd (all three)
   - `X + X`                    → 2nd + 3rd
   - `X + X + X`                → 3rd only
   So applying rules in this specific ORDER yields:
     1st: white (from base `X` rule, overridden only by siblings not
          matching it via +).
     2nd: coral (base X set white, then `X + X` overrides to coral, `X + X + X`
          does not match 2nd so stays coral).
     3rd: white (base X set white, `X + X` overrides to coral, `X + X + X`
          re-overrides back to white).

   Text color mirrors the bg slot (graphite on white, white on coral).
   Every descendant tag (h1-h4, p, li, span, em, strong, a) listed to
   override CMS-inline colored children.

   Sky-bg sibling rule: `#life-skills.ways.sky-bg` is a SEPARATE singleton
   panel elsewhere on program pages — not part of the 3-row stripe. Earlier
   draft grouped them together and forced both coral; now decoupled so the
   sky-bg keeps its own decision. Default here: white + graphite to blend
   with surrounding light content unless a page-specific override is needed. */

/* Base: ALL cyan-bg.little_row_section → WHITE bg + graphite text */
#life-skills.ways.sky-bg,
section.cyan-bg.little_row_section {
  background-color: var(--surface-card, #fff) !important;
}
#life-skills.ways.sky-bg h1,
#life-skills.ways.sky-bg h2,
#life-skills.ways.sky-bg h3,
#life-skills.ways.sky-bg h4,
#life-skills.ways.sky-bg p,
#life-skills.ways.sky-bg li,
#life-skills.ways.sky-bg span,
#life-skills.ways.sky-bg strong,
#life-skills.ways.sky-bg em,
#life-skills.ways.sky-bg a,
section.cyan-bg.little_row_section h1,
section.cyan-bg.little_row_section h2,
section.cyan-bg.little_row_section h3,
section.cyan-bg.little_row_section h4,
section.cyan-bg.little_row_section p,
section.cyan-bg.little_row_section li,
section.cyan-bg.little_row_section span,
section.cyan-bg.little_row_section strong,
section.cyan-bg.little_row_section em,
section.cyan-bg.little_row_section a {
  color: var(--text-on-card, #2C2B30) !important;
}

/* Override: 2nd + 3rd of 3-row stripe → CORAL bg + white text */
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section {
  background-color: var(--primary-color, #A69471) !important;
}
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section h1,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section h2,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section h3,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section h4,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section p,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section li,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section span,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section strong,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section em,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section a {
  color: var(--text-on-surface, #fff) !important;
}

/* Re-override: 3rd only → back to WHITE bg + graphite text */
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section {
  background-color: var(--surface-card, #fff) !important;
}
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section h1,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section h2,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section h3,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section h4,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section p,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section li,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section span,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section strong,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section em,
section.cyan-bg.little_row_section + section.cyan-bg.little_row_section + section.cyan-bg.little_row_section a {
  color: var(--text-on-card, #2C2B30) !important;
}

/* --- "Apex Martial Arts Is Your Partner in Parenting" split block ------
   Inline purple bg on .content-box + turquoise inline text inside it.
   Map the purple box to --primary-color-dark (deepest card-back stop)
   and the turquoise text to white for readable contrast. */
#toggle-block .content-box[style*="rgb(104, 61, 145)"] {
  background: var(--primary-color-dark, #0a3b84) !important;
}

/* PG-17 (revised) | PAGE-CATEGORY SCOPED (program pages) ---------------
   The #toggle-block row has a `cover`-sized background image (parenting.jpg
   family photo, equivalents on other program pages). Original layout locks
   the row at 364px with `background-position: 50% 50%` → center-crops heads
   off the top AND shoes off the bottom.

   First fix attempt: bump min-height to 640px to show full image. Downside:
   purple text column becomes mostly empty whitespace, and the row doesn't
   respond well to viewport resizes — it stays 640 tall even when text is
   short.

   Revised approach:
   - Let the row's height be driven by text content (purple side) with a
     modest min-height floor. Use the layout's natural 364 as the floor.
   - Pin the photo's `background-position` to `center top` so the TOP of
     the image (faces) is always visible regardless of container height.
     When the container is short, the bottom of the photo crops off; when
     it's tall, the whole image shows. Either way faces stay visible.

   Net effect: row resizes cleanly across viewports, heads always visible,
   no forced empty whitespace on the text column. Accepts that on a wide
   row where text is short, the bottom of the photo will be cropped —
   user's explicit preference. */
#toggle-block .full-bg-toggle-a {
  background-position: center top !important;
}
#toggle-block [style*="color:#40E0D0" i],
#toggle-block [style*="color: #40E0D0" i] {
  color: var(--text-on-surface, #fff) !important;
}

/* --- Navy inline spans in secondary program-page h2s → primary. ------
   CMS content uses #000080 for the second-tier benefit headings
   ("Learn Goal-Setting Skills", "Improve Focus", etc.). */
[style*="color:#000080" i],
[style*="color: #000080" i] {
  color: var(--primary-color, #1a65d4) !important;
}

/* --- Turquoise inline spans in program CTAs → primary (readable on
   white sections that appear outside of the purple block above). */
[style*="color:#40E0D0" i]:not(#toggle-block [style*="color:#40E0D0" i]),
[style*="color: #40E0D0" i]:not(#toggle-block [style*="color: #40E0D0" i]) {
  color: var(--primary-color, #1a65d4) !important;
}

/* --- Teal CTA overlays (#get-started.gift) --------------
   Layout CSS uses rgba(51, 149, 161, .8) as a fixed teal overlay over
   background images. Route to the brand's alpha-70 overlay token. */
#get-started.gift .overlay,
#get-started .overlay {
  background: var(--primary-color-alpha-70, rgba(26, 101, 212, 0.7)) !important;
}
/* --- #about-top hero (revised 2026-04-20 night) ---
   The HTML inline paints a `martial-arts-bg2.jpg` bg-image on #about-top
   (previously broken URL — fixed in HTML). Keep that image but fade it
   heavily via a semi-transparent white overlay so the section reads as
   a subtle hero-backdrop, not a loud photo. Matches the light-veiled
   treatment on homepage's `.owner-image` (rgba(230,230,237,0.5) over
   gym photo) so about-us has parity.
   Text colors unchanged (graphite on the fade). */
#about-top .overlay {
  background: rgba(230, 230, 237, 0.7) !important;
}
#about-top {
  background-color: var(--surface-card, #ffffff) !important;
  color: var(--text-on-card, #2C2B30) !important;
}
#about-top h2,
#about-top p,
#about-top span {
  color: var(--text-on-card, #2C2B30) !important;
}
/* Layout main_new.css sets `#about-top p { display: inline-block }` which
   makes the hero paragraphs render side-by-side on wide viewports. Force
   block so they stack. Keeping this in the theme layer avoids modifying
   main_new.css (maintained by the base template dev, not us). */
#about-top p {
  display: block !important;
}
#about-top h3 {
  /* Phone number "box" — graphite pill for legibility on photo-bg hero */
  display: inline-block !important;
  background: rgba(44, 43, 48, 0.9) !important;
  color: #FFFFFF !important;
  padding: 10px 28px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin: 6px auto 15px !important;
}

/* --- Form validation asterisk + feedback icon + cart-badge red ------- */
.required,
.form-control-feedback,
.fa-phone.form-control-feedback,
.site_theme_text {
  color: var(--primary-color, #1a65d4) !important;
}
.cart_count_icon,
.badge.badge-primary {
  background-color: var(--primary-color, #1a65d4) !important;
  border-color: var(--primary-color, #1a65d4) !important;
}

/* --- #difference "What Makes X Different" overlay — every program page
   picks a different inline color for this span (teal on little-ninjas,
   dark blue on birthday-parties, etc.). Route the selector by position
   so any per-page color gets re-themed. */
#difference .overlay {
  background: var(--primary-color-alpha-70, rgba(26, 101, 212, 0.7)) !important;
}

/* --- Residual inline-teal bg fallback (if any future page sets teal
   via [style*="rgba(69, 188, 193"] outside #difference). */
[style*="rgba(69, 188, 193" i],
[style*="rgba(69,188,193" i] {
  background: var(--primary-color-alpha-70, rgba(26, 101, 212, 0.7)) !important;
}
[style*="color:#4eb4c0" i],
[style*="color: #4eb4c0" i] {
  color: var(--primary-color, #1a65d4) !important;
}

/* --- Purple inline spans (#800080 web-purple, #660099 dark-violet)
   used for birthday-party headings. Remap to primary. */
[style*="color:#800080" i],
[style*="color: #800080" i],
[style*="color:#660099" i],
[style*="color: #660099" i] {
  color: var(--primary-color, #1a65d4) !important;
}

/* --- Extended pale-yellow / pale-cream labels → white. Covers #FEFFCA
   (used by #get-started.gift p "Schedule Now!" button text) in addition
   to #FEFFC9 caught earlier. */
#get-started.gift p,
[style*="color:#FEFFCA" i],
[style*="color: #FEFFCA" i] {
  color: var(--text-on-surface, #fff) !important;
}

/* --- Navy accents across layout CSS and inline spans —
   #304076 is used in .stats h3 and .follow-btn bg; #1c396f shows up as
   an inline color on teen-page benefit h2s ("Improve Focus and Self-
   Control"). Map them all to the primary family. */
.stats h3 {
  color: var(--primary-color, #1a65d4) !important;
}
.follow-btn {
  background: var(--primary-color, #1a65d4) !important;
}
[style*="color:#1c396f" i],
[style*="color: #1c396f" i],
[style*="color:#304076" i],
[style*="color: #304076" i] {
  color: var(--primary-color, #1a65d4) !important;
}

/* --- Chatbot bot-message bubble (pale lavender by default) → palette
   neutral. Keeps readable contrast regardless of primary hue. */
.custom-chatbot .chat-body .bot-message .message-text {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-on-card, #141414) !important;
}

/* ============================================================================
 * BONE BODY BG — NEUTRALIZE FLOATING WHITE CONTAINERS
 *   With the body background replaced from white to Bone (#E5E1E8), any
 *   section/container that has an explicit "background: #fff" in layout
 *   CSS ends up as a visible white rectangle floating on top of the Bone
 *   body. Null those out so the Bone shows through consistently.
 *   Specific to this palette — only needed when --white-color-replacement
 *   differs from #fff.
 * ============================================================================ */

.bg-white.mission_statement,
.bg-white.container.mission_statement,
.owner-text-section,
.white_stripe_section,
.white_stripe_2_section,
#ata-ad,
#facility,
#difference .container,
.content-section.white_stripe_section {
  background-color: transparent !important;
}

/* Bootstrap .bg-white utility is used in many places — only nullify it when
   it sits directly inside a body-level section (not when nested on a coloured
   ancestor like a card). Safe broad override: just let Bone show through. */
body > .bg-white,
section > .bg-white {
  background-color: transparent !important;
}

/* --- Bottom-triangle peak separator (drawn via ::after CSS-triangle with
   border-top-color: #fff). Re-color to Bone so it matches the body bg. */
.bottom-triangle::after {
  border-top-color: #E5E1E8 !important;
}

/* ============================================================================
 * DARK-BACKGROUND SECTIONS → FORCE WHITE TEXT
 *   The layout CSS paints several sections in near-black/graphite and relies
 *   on default `color: #fff` at the section level, but child rules (often
 *   `* { color: inherit }` combined with layout-file overrides) cascade to
 *   #000 on paragraphs. Net result on this palette: black text on graphite
 *   = nearly invisible. Force-override text colour for every descendant of
 *   the known dark-bg surfaces.
 * ============================================================================ */

.owner-section,
.owner-section p,
.owner-section span:not([style*="color" i]),
.owner-section div,
.owner-section li,
.owner-section h1,
.owner-section h2,
.owner-section h3,
.owner-section h4,
.owner-section h5 {
  color: var(--text-on-surface, #fff) !important;
}

/* The h2 owner-header uses the primary color on white bgs elsewhere; on the
   graphite trial-offer context keep the underline themed but text white. */
.owner-section .owner-header h2,
.owner-section .owner-header h1 {
  color: var(--text-on-surface, #fff) !important;
}

/* Match specificity of the layout rule `.owner-section .owner-text-section
   .owner-text .owner-header h2 { color: #000 !important }` (0,0,4,1) so the
   trial-offer page heading renders white instead of black-on-graphite. */
.owner-section .owner-text-section .owner-text .owner-header h1,
.owner-section .owner-text-section .owner-text .owner-header h2,
.owner-section .owner-text-section .owner-text .owner-header h3 {
  color: var(--text-on-surface, #fff) !important;
}

/* ============================================================================
 * DARK VARIANT
 *   Flips the palette from light (Bone body) to dark (Graphite body). Coral
 *   stays the accent colour — it pops more against a dark backdrop. All
 *   previously-black body copy becomes white; cards/containers that had
 *   explicit white backgrounds get kept (content inside them stays black)
 *   so they read as bright tiles floating on graphite. Everything else
 *   with transparent bg now shows graphite through.
 * ============================================================================ */

/* Body background flip: Bone → Graphite */
body,
.new_layout_v1 {
  background-color: var(--surface-base, #2C2B30) !important;
  color: #fff;
}

/* Peak separator blend — was Bone, now Graphite */
.bottom-triangle::after {
  border-top-color: #2C2B30 !important;
}

/* Section separators — coral → graphite instead of coral → white */
.section-separator-top {
  background: linear-gradient(to right, var(--primary-color, #A69471), #2C2B30) !important;
}
.section-separator-bottom {
  background: linear-gradient(to left, var(--primary-color, #A69471), #2C2B30) !important;
}

/* Universal text colour flip — default every body-scope element to white.
   Primary-color rules elsewhere still win where appropriate because they
   use higher specificity / !important. */
body p,
body h1, body h2, body h3, body h4, body h5, body h6,
body li,
body .container,
body .row,
body .col-md-12, body .col-sm-12, body .col-md-6, body .col-sm-6,
body .text-block,
body .text-content,
body .mission_statement,
body .text-center {
  color: var(--text-on-surface, #fff);
}

/* Hero headline uses layout rule `.text-secondary { color: var(--secondary-color, #000) }`.
   Fallback is #000 which is unreadable on graphite. Force-white. */
.text-secondary {
  color: var(--text-on-surface, #fff) !important;
}

/* Any ancestor we nullified to transparent (Bone fix) — keep them transparent
   so the Graphite shows through. The earlier `bg-white` nullification block
   still applies, no extra rules needed here. */

/* Bright "card" tiles stay white so content pops. But only explicit card
   containers — not generic .bg-white which was nullified above. */
.card,
.card-front,
.block-box {
  background: var(--surface-card, #fff) !important;
  color: var(--text-on-card, #2C2B30) !important;
}
.card p, .card h1, .card h2, .card h3, .card h4,
.card-front p, .card-front h1, .card-front h2, .card-front h3, .card-front h4,
.block-box p, .block-box h1, .block-box h2, .block-box h3, .block-box h4 {
  color: var(--text-on-card, #2C2B30) !important;
}

/* Form inputs need visible outlines against graphite */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body select,
body textarea {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-on-surface, #fff) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
body input::placeholder,
body textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================================================
 * DARK VARIANT (cont.) — hero bg, nav all graphite, residual black text
 * ============================================================================ */

/* Hero — layout CSS paints linear-gradient(#fff, #fff) + url() over it
   so the hero reads white. Re-paint graphite so the hero blends with body. */
.homepage_slider,
.homepage_slider.background-wrapper,
.homepage-hero,
#homepage .homepage_slider {
  background: var(--surface-base, #2C2B30) !important;
}

/* Navbar — KEEP the 50/50 primary-color | black-color split from theme-base.
   The default rule already does the right thing for this palette:
       linear-gradient(to right, var(--primary-color) 50%, var(--black-color) 50%)
   renders as coral | graphite. No override needed. */

/* Sweep remaining black text — anchors, GDPR label, stray paragraphs that
   weren't caught by the earlier body-scope rule. !important because many
   originate in layout CSS with their own !important flags.
   Excludes .top-navbar descendants because the top-navbar has its own
   color rules (coral left half + graphite band right half, both with white
   text) that must not be overridden by body-level text tokens. */
body a:not(.button):not([class*="btn"]):not(.modern-btn):not(.submit-button):not(.learn-more.learn-more):not(.top-navbar *):not(.modern-btn *):not(.button *):not(.learn-more *),
body .gdpr_checkbox,
body .gdpr_checkbox *,
body .learn-more,
body .terms-links a,
body section p,
body section h1,
body section h2,
body section h3,
body section h4 {
  color: var(--text-on-surface, #fff) !important;
}

/* Preserve intentional coral accents (section headings themed via theme-base
   rules) — the `.features-list-about h2`, `.web-special h2`, `#get-started h2`,
   etc. already use var(--primary-color) !important and will win over the
   blanket white above because of specificity. Same for card/block-box interiors
   (explicitly kept black on white). */

/* ============================================================================
 * DARK VARIANT — kill the lighter-grey frame around hero/nav
 * ============================================================================ */

/* The "bottom-navbar" (logo + menu + CTA button bar) has white bg by default.
   On dark body that reads as a pale-grey band framing the hero. Collapse. */
.bottom-navbar-container,
.bottom-navbar-container.fixed-top,
.bottom-navbar,
.bottom-navbar-content-wrapper {
  background-color: var(--surface-base, #2C2B30) !important;
}

/* Bootstrap-style .bg-gray wrapper — render transparent so body graphite
   shows through instead of a separate light-grey band. */
.bg-gray {
  background-color: transparent !important;
}

/* .container / Bootstrap containers also carry a default bg in some rules —
   neutralize so the hero sits flush against the body, no frame. */
body .homePageSection,
body .homePageSection .container,
body .optin-form-section {
  background-color: transparent !important;
}

/* Main page wrapper — some themes paint it explicitly; force graphite. */
#homepage,
.new_layout_v1 #homepage {
  background-color: var(--surface-base, #2C2B30) !important;
}

/* --- The mysterious "lighter grey box behind the hero" --------------
   .homepage_slider has a ::before pseudo-element with
   `background-image: linear-gradient(rgba(255,255,255,0.4), ...)` — a
   40%-opacity white overlay stretched across the whole hero area. On
   a light body it brightens the hero; on a dark body it appears as a
   light-grey frame around everything. Kill the overlay in the dark
   variant so the hero, photos and Ages card all sit flush on graphite. */
.homepage_slider::before,
.homepage_slider.background-wrapper::before {
  background-image: none !important;
  background: transparent !important;
}

/* --- Featured-program "3 square white boxes" behind the photo cards ----
   Each photo has an outer .card.single_featured_program (square, white)
   and an inner .card-front (rounded 20px, white). The outer square pokes
   out behind the rounded inner — creating the visible "white boxes" on
   the dark body. Make the outer square transparent so graphite shows
   through, and the only visible card is the rounded photo frame. */
.card.single_featured_program,
.card-container .card {
  background: transparent !important;
}


/* ============================================================================
 * MEGA NAV DROPDOWN — match button colour
 *   .dropdown.custom-dropdown is the full-width mega-nav panel. Defaults
 *   to white bg. Retheme to --global-button-bg so it matches whatever
 *   colour drives the CTA buttons in the current palette (primary-color
 *   for most themes; black-color for SerioVerify which overrides it).
 * ============================================================================ */
.dropdown.custom-dropdown,
.dropdown.programs-dropdown.custom-dropdown,
ul.dropdown.custom-dropdown {
  background: var(--global-button-bg, var(--primary-color, #1a65d4)) !important;
}
.dropdown.custom-dropdown a,
.dropdown.custom-dropdown li,
.dropdown.custom-dropdown .nav-item > a,
.dropdown.custom-dropdown .programs-nested {
  color: var(--global-button-color, #fff) !important;
}

/* ============================================================================
 * DARK VARIANT — round 3
 *   - Top-right SEO stripe: switch to white so it contrasts with graphite body
 *   - Program card labels: force dark text (they were inheriting white)
 *   - Opt-in form section: kill its lavender→white bg-image gradient
 * ============================================================================ */

/* Top SEO stripe — superseded by unified block further down (line ~1378).
   Duplicate removed 2026-04-20 during top-bar unification pass. */

/* Program name labels under the photo cards (Little Ninjas / Kids Martial Arts /
   Adult Martial Arts). The .title-box container sits on white bg. In dark
   variant our earlier blanket "card body → black" rule missed these. Force
   dark text explicitly on every nested label. */
.title-box,
.title-box h1, .title-box h2, .title-box h3, .title-box h4, .title-box h5,
.title-box p, .title-box span, .title-box a,
.card-front h1, .card-front h2, .card-front h3, .card-front h4, .card-front h5,
.card-front .title-box,
.card-front .title-box * {
  color: var(--text-on-card, #2C2B30) !important;
}

/* Opt-in form section — .optin-form-section has a background-image gradient
   linear-gradient(#E6E6ED, #fff) baked into layout CSS. My earlier
   `background-color: transparent` didn't kill the image. Null both. */
.bg-gray,
.optin-form-section,
.bg-gray.optin-form-section,
body .optin-form-section,
body .bg-gray.optin-form-section {
  background-color: transparent !important;
  background-image: none !important;
}

/* ============================================================================
 * DARK VARIANT — round 4
 * ============================================================================ */

/* Mega nav dropdown — revert from button-colour to NAV bg (graphite). Per
   new rule: the block behind nav buttons matches the nav background,
   not the CTA button color. */
.dropdown.custom-dropdown,
.dropdown.programs-dropdown.custom-dropdown,
ul.dropdown.custom-dropdown {
  background: var(--surface-base, #2C2B30) !important;
}
.dropdown.custom-dropdown a,
.dropdown.custom-dropdown li,
.dropdown.custom-dropdown .programs-nested,
.dropdown.custom-dropdown input,
.dropdown.custom-dropdown select {
  color: var(--text-on-surface, #fff) !important;
}
.dropdown.custom-dropdown input,
.dropdown.custom-dropdown select {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Learn-more buttons — normalized to the homepage SECONDARY CTA pattern.
   Default: white fill + graphite text + primary border (stroke).
   Hover:   graphite fill + white text + primary border (inverted via CSS).
   Matches the Adult Programs / Read More treatment on the homepage so every
   page uses the same button language. */
body .learn-more,
body .learn-more.visible,
body a.learn-more,
body a.learn-more.visible {
  background: var(--surface-card, #ffffff) !important;
  color: var(--text-on-card, #2C2B30) !important;
  border: 2px solid var(--primary-color, #A69471) !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}
body .learn-more:hover,
body .learn-more:focus,
body .learn-more.visible:hover,
body .learn-more.visible:focus,
body a.learn-more:hover,
body a.learn-more:focus,
body a.learn-more.visible:hover,
body a.learn-more.visible:focus {
  background: var(--btn-hover-bg, #2C2B30) !important;   /* always graphite in both themes */
  color: var(--btn-hover-text, #FFFFFF) !important;      /* white in Dark, coral in Light */
  border-color: var(--primary-color, #A69471) !important;
}

/* Any section that has a linear-gradient with whites / lavenders baked in
   via background-image — nullify. Catches variants we haven't yet listed. */
.bg-gray,
.bg-gray.optin-form-section,
.background-wrapper::before,
.homepage_slider::before,
.bottom-triangle,
.text-section-1-container {
  background-image: none !important;
}

/* "You Belong Here" + any hero-like h1/h2 on light sections — ensure the
   section bg is graphite so the white heading reads. Specifically target
   .text-section-1-container which holds this content. */
.text-section-1-container,
.text-section-1-container .text-section-box {
  background: transparent !important;
}

/* ==========================================================================
 * TOP SEO STRIPE — unified structure, per-theme right-side colours
 * --------------------------------------------------------------------------
 * Design contract (2026-04-20 session w/ Indro):
 *   • Left half: coral + white text (bold "Apex Martial Arts" + subtitle)
 *   • Right half: INVERTS per theme for contrast against body below:
 *       Dark theme → WHITE bg + BLACK text + icons
 *       Light theme → GRAPHITE bg + WHITE text + icons
 *   • Full-width at ALL viewport widths (no desktop/mobile split)
 *   • Typography: 15px Instrument Sans, 700 title, 400 everything else
 *   • Driven by --topbar-right-bg / --topbar-right-text tokens
 * ========================================================================== */
.top-navbar {
  background: linear-gradient(to right, var(--primary-color, #A69471) 50%, var(--topbar-right-bg, #FFFFFF) 50%) !important;
}

/* Right-half text + icons — colour flows from --topbar-right-text token.
   Wildcard + direct icon selectors beat the layout's
   `.top-navbar .top-nav-links a i { color: var(--black-color); }` rule. */
.top-navbar .top-header-right,
.top-navbar .top-header-right *,
.top-navbar .nav-links.top-nav-links,
.top-navbar .nav-links.top-nav-links *,
.top-navbar .top-link,
.top-navbar .top-link *,
.top-navbar .top-link i,
.top-navbar .top-nav-links a i,
.top-navbar .top_cart_icon i,
.top-navbar .top-header-right .fa {
  color: var(--topbar-right-text, #2C2B30) !important;
}

/* Top-bar typography — match Apex live demo (13px Instrument Sans).
   IMPORTANT: scope font-family to TEXT-bearing elements only, never <i>/.fa,
   because Font Awesome glyphs need font-family: FontAwesome to render the
   private-use-area codepoint. A wildcard rule would kill the icons. */
.top-navbar,
.top-navbar .navbar-text,
.top-navbar .navbar-text h1,
.top-navbar .navbar-text h2,
.top-navbar .navbar-text h3,
.top-navbar .navbar-text span,
.top-navbar .navbar-text a,
.top-navbar .navbar-text p,
.top-navbar .top-link,
.top-navbar .top-link span,
.top-navbar .top-link a,
.top-navbar .nav-links.top-nav-links,
.top-navbar .nav-links.top-nav-links a,
.top-navbar .nav-links.top-nav-links span {
  font-family: "Instrument Sans", sans-serif !important;
}
/* Top-bar text sizing (Indro 2026-04-20):
   Deliberately bumped above live demo's 13px — live felt too small to read.
   Title + subtitle + right-half links all 15px; title is the only bold.
   Keep container font-sizes inherited from body (16px) so the bar breathes. */

/* Left-half "Apex Martial Arts" site title = bold 700, WHITE on coral in
   both themes (left half is always coral, not surface). */
.top-navbar .navbar-text .title-h,
.top-navbar .navbar-text .title-h *,
.top-navbar .title-h,
.top-navbar .title-h a {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}
/* Subtitle under the title — sits on coral too, always white. Regular 400. */
.top-navbar .navbar-text .title-sub,
.top-navbar .title-sub {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
}
/* Right-half links — size on LINK TEXT ONLY, not on the container.
   Note: <i> icons excluded to preserve Font Awesome rendering. */
.top-navbar .top-link,
.top-navbar .top-link span,
.top-navbar .nav-links.top-nav-links a,
.top-navbar .nav-links.top-nav-links span {
  font-size: 15px !important;
  font-weight: 400 !important;
}

/* Program name labels under the photo cards (Little Ninjas / Kids / Adult).
   .title-box container is white with white text inheriting. Force dark. */
.title-box,
.title-box *,
.card-front .title-box,
.card-front .title-box *,
.card-front h1, .card-front h2, .card-front h3, .card-front h4 {
  color: var(--text-on-card, #2C2B30) !important;
}

/* Mega nav category "cards" — .arrow.no-desktop wrappers inside dropdown
   have white bg by default (the "Children's Programs / Adult Programs /
   Just 4 Kids" tiles). Match nav bg so they feel like part of the dropdown. */
.arrow.no-desktop,
.dropdown .arrow,
.dropdown .arrow.no-desktop,
.programs-dropdown .arrow,
.programs-dropdown .arrow.no-desktop {
  background: var(--surface-base, #2C2B30) !important;
  color: var(--text-on-surface, #fff) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.arrow.no-desktop *,
.dropdown .arrow * {
  color: var(--text-on-surface, #fff) !important;
}

/* --------------------------------------------------------------------------
 * "Getting Started Is Easy!" 3-step section — tighten vertical spacing.
 * On graphite bg the default 125px top + 77px header-gap + 200px bottom
 * reads as an oppressive empty frame. Pull the icon row closer to the
 * heading, and pull the whole section closer to the coral tilt below.
 * -------------------------------------------------------------------------- */
.getting-started {
  margin-top: 15px !important;
  margin-bottom: 30px !important;
}
.getting-started .getting-started-icon-section {
  margin-top: 24px !important;
}

/* ============================================================================
 * GRAPHITE BG CONTENT RULE — titles coral, paragraphs white
 * ----------------------------------------------------------------------------
 * Universal rule for this dark theme: on any section that renders on the
 * graphite body (FAQ, owner bio, etc.), titles should read as coral and
 * body paragraphs should read as white. Paragraphs are already white via
 * the broad `body section p/h1-h4` rule earlier; this block adds the title
 * → coral override for known graphite-bg sections.
 * ============================================================================ */

/* FAQ section — "Frequently Asked Questions" h2 + each question h3 */
#faq h2,
#faq h3,
#faq .faq-left h2,
#faq .faq-left h3,
#faq .faq-right h2,
#faq .faq-right h3,
.faq_section h2,
.faq_section h3 {
  color: var(--primary-color, #A69471) !important;
}

/* Owner section titles (Master Neville intro) → coral on graphite */
.owner-section .owner-text-section .owner-text .owner-header h1,
.owner-section .owner-text-section .owner-text .owner-header h2,
.owner-section .owner-text-section .owner-text .owner-header h3,
.owner-section h1,
.owner-section h2,
.owner-section h3 {
  color: var(--primary-color, #A69471) !important;
}

/* Welcome-text / custom-swipe-box sections (e.g. "Hi, my name is Master Neville") */
.welcome_text h1,
.welcome_text h2,
.welcome_text h3,
.custom-swipe-box h1,
.custom-swipe-box h2,
.custom-swipe-box h3 {
  color: var(--primary-color, #A69471) !important;
}

/* #ata-ad, #parents, #life-skills.ways — all sit on graphite in dark variant */
#ata-ad h1, #ata-ad h2, #ata-ad h3, #ata-ad h4,
#parents h1, #parents h2, #parents h3, #parents h4,
#life-skills.ways h1, #life-skills.ways h2, #life-skills.ways h3 {
  color: var(--primary-color, #A69471) !important;
}

/* Stats h3 and other numeric-label headings (Teen page) */
.stats h3,
.block-box h1,
.block-box h2,
.block-box h3 {
  color: var(--primary-color, #A69471) !important;
}

/* ============================================================================
 * LIGHT-CARD FIXES — white-on-white offenders
 * ----------------------------------------------------------------------------
 * These live on white cards/strips where the blanket `body section h2→white`
 * rule creates invisible text. Force dark so they read.
 * ============================================================================ */

/* Testimonial person names sit on white card bg, were rendering white */
.testimonial-desc h4.f-name,
.testimonial-desc .f-name,
.slide-text .f-name {
  color: var(--text-on-card, #2C2B30) !important;
}

/* Small-container heading "This is a limited time offer!" on white bg */
.container.small-container .heading_section h4,
.container.small-container .heading_section h3,
.container.small-container .heading_section h2 {
  color: var(--text-on-card, #2C2B30) !important;
}

/* Chatbot bot-message text sits on white bubble, needs dark */
.user_information_box .message.bot-message .message-text p,
.user_information_box .message.bot-message .message-text,
#chatbot-messages .bot-message .message-text p,
#chatbot-messages .bot-message .message-text {
  color: var(--text-on-card, #2C2B30) !important;
}

/* ============================================================================
 * PROGRAM-PAGE FORM SECTION — convert lavender bg to graphite, re-role text
 * ----------------------------------------------------------------------------
 * Layout rule `.program-header-content-form { background-color: #e6e6ed }`
 * paints the "Access Our Class Schedule" form lavender, which clashes with
 * the dark theme. Repaint graphite, make the title coral, keep labels/text
 * white, GDPR consent readable.
 * ============================================================================ */
.program-header-content-form {
  background-color: var(--surface-base, #2C2B30) !important;
}
.program-header-content-form .request-form-header-container h2,
.program-header-content-form .request-form-header-container h3,
.program-header-content-form h2,
.program-header-content-form h3 {
  color: var(--primary-color, #A69471) !important;
}
.program-header-content-form label,
.program-header-content-form p,
.program-header-content-form .gdpr_checkbox,
.program-header-content-form .gdpr_checkbox *,
.program-header-content-form .email_optin_gdpr_compliant_checkbox,
.program-header-content-form .email_optin_gdpr_compliant_checkbox * {
  color: var(--text-on-surface, #fff) !important;
}
/* Keep the links inside consent visually distinct but still readable */
.program-header-content-form .gdpr_checkbox a,
.program-header-content-form .terms-links a {
  color: var(--primary-color, #A69471) !important;
  text-decoration: underline;
}

/* ============================================================================
 * STATIC DETAIL PAGES — privacy/terms/products title bar
 * ----------------------------------------------------------------------------
 * Layout hardcodes `.about-alt-bg` / `.static_detail_page` bg to a legacy
 * red (#F01313). Theme it to the primary palette color. Covers products,
 * privacy-policy, terms-and-conditions page headers.
 * ============================================================================ */
body .trial-form.about-trial-form.about-alt-bg,
body div.about-alt-bg.static_detail_page,
body .static_detail_page.about-alt-bg {
  background-color: var(--primary-color, #A69471) !important;
}

/* ============================================================================
 * PROGRAM HERO (#program-main) — darken overlay so white hero text reads
 * ----------------------------------------------------------------------------
 * Problem: every program page renders #program-main with a CDN-hosted
 * bg-image (`stripe.jpg`) that is LIGHT/near-white. The span.overlay child
 * is transparent in this theme, so the right-column white <span> headline
 * ("A Martial Arts Blueprint for Healthy Child Development") ends up
 * white-on-white above the form. Dim the overlay with a graphite tint so
 * the white text pops without removing the image entirely.
 *
 * Specificity battle: layout's `#program-main.program-header .overlay`
 * (dojocss.css) sets `background-color: initial !important` at (0,1,3,0)
 * = 130. Our selector must reach (0,1,3,0)+ with !important to win — use
 * `body #program-main.program-trial-form.program-header > span.overlay`
 * at (0,1,4,2) = 142.
 *
 * DOM: #program-main > span.overlay (absolute, inset:0). Scope pinned to
 * #program-main so other `.overlay` spans (e.g. #get-started coral overlay)
 * are not affected. Token-driven so palette clones cascade.
 * ============================================================================ */
/* The .overlay span carries INLINE `background: rgba(0,0,0,0) !important`
   which beats any CSS selector !important (inline specificity dominates).
   Paint the dim via a ::before pseudo on #program-main itself — pseudos are
   immune to the child's inline style. Keep the bg-image (stripe.jpg) on
   #program-main untouched; the pseudo sits between the image and the text. */
body #program-main.program-trial-form {
  position: relative;
  isolation: isolate;
}
/* Use ::after (DOM-ordered LAST, after every child including .overlay span)
   so it paints above the child span.overlay that carries inline
   !important bg-color we can't beat with CSS. Content still sits higher via
   explicit z-index. */
body #program-main.program-trial-form::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--surface-base, #2C2B30);
  opacity: 0.82;
  z-index: 2;
  pointer-events: none;
}
/* Push the content columns above the dim ::after pseudo. */
body #program-main.program-trial-form > .left-column,
body #program-main.program-trial-form > .right-column,
body #program-main.program-trial-form > .container,
body #program-main.program-trial-form > .program-header-content-form {
  position: relative;
  z-index: 3;
}

/* PG-20 | PAGE-SCOPED to summer-camp (body#summer) -----------------------
   The live dojoonlinemarketing.com summer-camp page has a distinctive
   YELLOW sun-rays hero bg-image (1520539607summer-camps-bg.png). Our
   build loads that image but PG-1's graphite dim at opacity 0.82 hides
   it. For summer-camp specifically, lift the dim so the yellow sun-rays
   show through (matches live reference).
   Text inside the hero was white (readable on graphite dim); on yellow
   white loses contrast, so flip the hero headline + subhead to graphite
   on summer-camp. CTAs keep their color. */
body#summer #program-main.program-trial-form::after {
  opacity: 0 !important;
}

/* PG-25 | PAGE-SCOPED to birthday-parties — split blue/teal hero dim.
   Default PG-1 paints solid graphite over the hero bg-image. Indro
   wants birthday-parties specifically to read as a party-themed
   blue/teal split: dark blue on top, lighter teal on bottom.
   Replace the dim color with a linear gradient — same opacity keeps
   text contrast, hue shifts to blue→teal. */
body#birthday-parties #program-main.program-trial-form::after {
  background: linear-gradient(
    to bottom,
    #3478d5 0%,
    #3478d5 55%,
    #67c7db 55%,
    #67c7db 100%
  ) !important;
  /* opacity 1 — earlier 0.85 let the hero bg-image bleed through,
     creating a third muddy tone. Fully opaque keeps the two-color split clean. */
  opacity: 1 !important;
}

/* PG-26 — REVERTED per Indro 2026-04-20 night. Blue-everywhere looked off;
   keep graphite surfaces as default. Only PG-25 (hero blue/teal split) stays. */
body#summer #program-main.program-trial-form h1,
body#summer #program-main.program-trial-form h2,
body#summer #program-main.program-trial-form h3,
body#summer #program-main.program-trial-form .text-block h1,
body#summer #program-main.program-trial-form .text-block h2,
body#summer #program-main.program-trial-form .text-block h3,
body#summer #program-main.program-trial-form .text-block p,
body#summer #program-main.program-trial-form .text-block span {
  color: var(--text-on-card, #2C2B30) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* PG-21 | PAGE-SCOPED to summer-camp — #toggle-block heading → YELLOW.
   Indro's ask: match the yellow sun-rays hero aesthetic with a yellow
   "Summertime Is Fun Time..." H2 on the coral toggle-block background.
   Ties the hero yellow theme down to this callout. */
body#summer #toggle-block h1,
body#summer #toggle-block h2,
body#summer #toggle-block h3,
body#summer #toggle-block .content-box h1,
body#summer #toggle-block .content-box h2,
body#summer #toggle-block .content-box h3 {
  color: #ffd400 !important;
}

/* PG-22 | PAGE-SCOPED to summer-camp — hide the empty middle H3 pill
   in the "Go From This... / [empty] / ... To This!" row. The middle
   column holds an empty <h3> that the theme paints as a coral pill;
   Indro wants it gone so the row reads as a pair of pills with the
   arrow/separator not needed. :empty matches cleanly (innerHTML len = 0).
   Scoped to body#summer + benefits_2_section so no other empty h3s
   get hit. */
body#summer .benefits_2_section .row.custom-row .col-sm-4 h3:empty {
  display: none !important;
}

/* PG-23 | PAGE-SCOPED to summer-camp — align + enlarge the Weekly
   Themes floating image. The image lives in `section.cyan-bg.little_row_section`
   (the middle panel — the coral one per PG-13r2), inside
   `.col-md-4.img-over.col-md-push-8`. Layout CSS gives it margin-top:-45px
   which pokes it above the row's top edge. Indro wants it lined up with
   the row AND a bit larger. Reset the negative margin and scale up ~18%.
   transform-origin: center right keeps the photo anchored to the right
   edge of the column as it grows. */
body#summer section.cyan-bg.little_row_section .col-md-4.img-over img {
  margin-top: 0 !important;
  transform: scale(1.18);
  transform-origin: center right;
}

/* PG-24 | PAGE-SCOPED to about-us (body#about) ---------------------------
   The `.owner-section` on about-us has a left `.owner-image` column
   (809w × 588h) holding `school-owners.png` (natural 502×588 portrait).
   Default CSS stretches the image to 632×588 (horizontally warped) AND
   leaves the remaining container width showing a broken-URL gradient
   tint — net effect is the photo "floating" with gray showing around it.

   Fix: use object-fit:cover + object-position:center top so the photo
   fills the column cleanly (top-aligned so faces stay visible, bottom
   crops if needed). No more floating gray around the photo.

   Also kill the inline gradient-over-broken-url background on the
   container so the fallback is the parent's solid bg, not a gray
   gradient over a 404. */
/* PG-24 REVISED: About-us `.owner-image` now matches homepage treatment
   exactly — the HTML inline sets the container bg to a light gradient
   (rgba(230,230,237,0.5)) over the gym/dojo photo `martial-arts-bg311.jpg`,
   and the owner photo sits at NATURAL size on top. No cover-stretching.
   Revert: don't touch the img with object-fit. Let the layout's default
   sizing stand so the photo reads like the homepage master photo. */

/* PG-24-B (2026-04-21): About-us Master Fong photo — responsive sizing.
   Problem: base `.owner-section .owner-image #reveal-image` rule sets
   `object-fit:cover; max-width:80%; height:auto`. The @media min-width:767
   override adds `padding:1.5rem; top:22px` and the container caps at
   `max-height:550px`. Prior patch used inline `transform:scale(1.33)` to
   enlarge the portrait, but transform:scale doesn't flow with the layout —
   the scaled image stays the same rendered size when the viewport shrinks,
   causing clipping/overflow on narrow screens. Indro flagged "too large +
   not resizing" on 2026-04-21.

   Fix: scope to body#about only (doesn't touch homepage's approved
   treatment). Drop object-fit:cover (portrait was getting clipped to show
   legs/feet at some widths). Use `object-fit:contain` so the full portrait
   fits inside the container box regardless of viewport, with width/height
   both responsive (100% of container, capped at container max-height:550px).
   Anchor to top so face reads first if any vertical room is left over.
   Zero out the top:22px offset from the base media-query rule. */
body#about .owner-section .owner-image #reveal-image,
body#about .owner-section .owner-image img.reveal-image {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 550px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -o-object-position: center top !important;
     object-position: center top !important;
  top: 0 !important;
  padding: 1.5rem !important;
  transform: none !important;
}

/* ============================================================================
 * PROGRAM CTA ROW (#get-started.call_to_action_section) — H3 labels
 * ----------------------------------------------------------------------------
 * Problem: the call-to-action section paints a coral overlay
 * (rgba(primary, 0.7)) over the section; the three step-label H3s
 * (REDEEM / Schedule / Begin) inherit `color: var(--primary-color)` from
 * a global heading rule → coral-on-coral, invisible. Flip to graphite
 * (Indro chose graphite over white, 2026-04-17) so they anchor the row
 * with maximum contrast on the coral band.
 *
 * DOM chain: #get-started.call_to_action_section .col-sm-4 > h3.visible.
 * Scope pinned to this specific section so the h3-coral default is
 * preserved everywhere else.
 * ============================================================================ */
body #get-started.call_to_action_section h2,
body #get-started.call_to_action_section h2 span,
body #get-started.call_to_action_section h3,
body #get-started.call_to_action_section h3 span,
body section#get-started.call_to_action_section .col-sm-4 h3,
body section#get-started.call_to_action_section .col-sm-4 h3 span,
body section#get-started.call_to_action_section h3.visible,
body section#get-started.call_to_action_section h3.visible span {
  color: var(--text-on-card, #2C2B30) !important;
}

/* About-us Three Commitments — equal-height cards.
   The three .block-box cards under #difference have different text lengths,
   so they render at unequal heights on the grid row. Indro wants visual
   parity (same box size, same apparent line count across all three).
   Fix: flex the col-sm-12 wrapper so its children (heading + 3 col-sm-4)
   can stretch uniformly; keep the heading full-width on its own row via
   flex: 0 0 100%; make each col-sm-4 a column flex container and force
   its inner .block-box to fill the column height. Result: the shortest
   paragraph's card stretches up to match the tallest.
   Scope: body#about #difference only — doesn't touch difference-block
   layouts on any other page. */
body#about #difference .col-sm-12 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}
body#about #difference .col-sm-12 > .text-center:first-child {
  flex: 0 0 100% !important;
  width: 100% !important;
}
body#about #difference .col-sm-12 > .col-sm-4,
body#about #difference .col-sm-12 > .col-md-4 {
  display: flex !important;
  flex-direction: column !important;
}
body#about #difference .col-sm-12 .block-box {
  flex: 1 1 auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* About-us "What Makes Confidence Dojo Different?" — equal-height cards, gold
   body text, unified card bg.
   The .features-list-about template block was originally 3 H3-only panels
   with gradient-tinted backgrounds (.block-a / .block-b / .block-c). Indro
   filled them with the April-10 mockup's 3-card content (KUKKIWON / Curriculum
   / Community). Now he wants them visually even and the body <p> gold.
   Scope: body#about .features-list-about only. */
body#about .features-list-about > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}
body#about .features-list-about > .row > .col-sm-4,
body#about .features-list-about > .row > .col-md-4 {
  display: flex !important;
  flex-direction: column !important;
}
body#about .features-list-about .block-a,
body#about .features-list-about .block-b,
body#about .features-list-about .block-c {
  flex: 1 1 auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 28px 24px !important;
  text-align: center !important;
}
body#about .features-list-about .block-a h3,
body#about .features-list-about .block-b h3,
body#about .features-list-about .block-c h3 {
  margin-bottom: 14px !important;
}
body#about .features-list-about .block-a p,
body#about .features-list-about .block-b p,
body#about .features-list-about .block-c p {
  color: var(--primary-color, #A69471) !important;
  margin: 0 !important;
}

/* About-us #staff instructor cards — align names, titles, and body paragraphs
   across all 4 cards regardless of text length (Chief Master Grant Tabuchi
   wraps to 2 lines; Master Fong / Miss Eliza fit on 1; Black Belt Support
   Team wraps to 2). Without min-heights the h4 and p lines start at different
   vertical positions in each card.
   Fix: give h3 and h4 min-heights sized for 2-line text so the single-line
   cards pad out to match.
   Scope: body#about #staff.staff-block only. */
body#about #staff .staff-block ul li h3 {
  font-size: 1.15rem !important;
  white-space: nowrap !important;
  min-height: 1.4em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body#about #staff .staff-block ul li h4 {
  font-size: 0.75rem !important;
  white-space: nowrap !important;
  min-height: 1.6em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
}

/* ============================================================================
 * #difference (headling_section) — headline on coral-tinted photo
 * ----------------------------------------------------------------------------
 * The section has a bg-image + span.overlay painted rgba(primary, 0.7).
 * Keep the ORIGINAL coral overlay (don't darken to graphite — Indro: sections
 * that were white/coral should stay that way). Fix only contrast:
 *   - h2 headline: white (was coral-on-coral invisible)
 *   - .block-box cards: keep WHITE (original), force inside text graphite
 *     so it reads (the universal `body p→white` theme rule was painting
 *     card body text white-on-white).
 * ============================================================================ */
body #difference.difference-block.headling_section h2,
body section#difference.difference-block h2,
body section#difference.headling_section h2.visible {
  color: var(--text-on-surface, #fff) !important;
}
body #difference.difference-block .block-box p,
body #difference.difference-block .block-box strong,
body #difference.headling_section .block-box p,
body #difference.headling_section .block-box strong {
  color: var(--text-on-card, #2C2B30) !important;
}

/* ============================================================================
 * .benefits_2_section ("3 Ways Our Kids Martial Arts Classes...")
 * ----------------------------------------------------------------------------
 * Layout paints this .sky-bg WHITE. Keep it white (per Indro: "sections
 * that were white should stay white"). Fix only the inside contrast:
 *   - h3 pill labels: white text on coral pill (was coral-on-coral invisible)
 *   - paragraph body: graphite text on white section (was white-on-white)
 *
 * Section bg stays white via the existing theme rule at line ~100 and the
 * layout default. We only repaint text colors + h3 pill contrast here.
 * ============================================================================ */
body #life-skills.ways.benefits_2_section h3,
body #life-skills.ways.benefits_2_section .col-sm-4 h3,
body section#life-skills.ways.benefits_2_section h3.visible {
  color: var(--text-on-surface, #fff) !important;
}
body #life-skills.ways.benefits_2_section p,
body #life-skills.ways.benefits_2_section strong,
body section#life-skills.ways.benefits_2_section p.visible {
  color: var(--text-on-card, #2C2B30) !important;
}

/* ============================================================================
 * .gift.benefits_3_section — bottom CTA row (Trial Offer / Special Intro /
 *                            100% Money Back)
 * ----------------------------------------------------------------------------
 * Indro's call 2026-04-17: paint this section WHITE, split text coral +
 * graphite. The CMS also gives it id="get-started" (collides with the
 * call-to-action section above), so scope by CLASS not ID to avoid hitting
 * the wrong section. Layout renders:
 *   - headline h2 "Give your child the gift..." → graphite (keep)
 *   - subheadline h4 "This is a limited time offer..." → graphite (keep)
 *   - three column h2 labels "Trial Offer / Special Intro / 100% Money
 *     Back" → coral-on-coral (unreadable). With a white bg + no overlay
 *     coral tint, these render coral-on-white (readable).
 *
 * Neutralize the coral-overlay span so the white panel wins. Then set the
 * three item labels coral + any paragraphs graphite.
 * ============================================================================ */
body section.gift.benefits_3_section,
body .gift.benefits_3_section {
  background-color: var(--surface-card, #fff) !important;
  background-image: none !important;
  position: relative;
}
/* The section HTML has an inline `background-image: url(...) !important`
   attribute that CSS cannot beat. Cover it with a ::before white pseudo
   so the section reads as a clean white panel. Content above via z-index. */
body section.gift.benefits_3_section::before,
body .gift.benefits_3_section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--surface-card, #fff);
  z-index: 0;
  pointer-events: none;
}
body section.gift.benefits_3_section > *,
body .gift.benefits_3_section > * {
  position: relative;
  z-index: 1;
}
/* Layout rule `#get-started.gift .overlay { background: var(--primary-color-alpha-70) !imp }`
   wins over low-spec overrides. Bump to (0,2,4,1)+ by doubling on ID or
   repeating classes. Also kill the opacity just in case. */
body #get-started.gift.benefits_3_section > span.overlay,
body section#get-started.gift.benefits_3_section > span.overlay.overlay,
body section.gift.benefits_3_section#get-started > .overlay.overlay {
  background-color: transparent !important;
  background: transparent !important;
  opacity: 1 !important;
}
body section.gift.benefits_3_section h2,
body .gift.benefits_3_section h2,
body section.gift.benefits_3_section h4,
body .gift.benefits_3_section h4 {
  color: var(--text-on-card, #2C2B30) !important;
}
/* Three item labels (h2 inside .col-sm-4) → coral */
body section.gift.benefits_3_section .col-sm-4 h2,
body section.gift.benefits_3_section .col-sm-4 h2.visible,
body .gift.benefits_3_section .col-sm-4 h2 {
  color: var(--primary-color, #A69471) !important;
}
body section.gift.benefits_3_section p,
body .gift.benefits_3_section p {
  color: var(--text-on-card, #2C2B30) !important;
}

/* ============================================================================
 * FINAL SWEEP — remaining graphite-on-graphite and black-on-graphite offenders
 * ============================================================================ */

/* Top-nav LEFT half (over coral) — always white.
   Right half colour is handled by the --topbar-right-text rule elsewhere. */
.top-navbar .navbar-text,
.top-navbar .navbar-text a,
.top-navbar .navbar-text span,
.top-navbar .navbar-text .title-sub {
  color: #FFFFFF !important;
}

/* Hero H2 "A Martial Arts Blueprint for Healthy Child Development" — falls
   back to #000 from `.text-secondary { color: var(--secondary-color, #000) }`.
   On dark theme, force white. */
.homepage_slider .text-secondary,
.homepage_slider h2,
.homepage_slider h2 span,
.homepage_slider .text-box h2,
.homepage_slider .text-box h2 span,
#slider-text .text-secondary,
#slider-text h2 {
  color: var(--text-on-surface, #fff) !important;
}

/* FAQ accordion labels (mobile/collapsible variant) — near-black text on
   graphite on mobile toggles. Force coral to match the title rule. */
#faq label,
.faq_section label,
.faq-left label,
.faq-right label {
  color: var(--primary-color, #A69471) !important;
}

/* Footer "Terms of service" / "Privacy Policy" links — white on Bone footer bg.
   Force dark so they read. */
.footer-links a,
.footer-column a,
footer a,
body footer a {
  color: var(--text-on-card, #2C2B30) !important;
}

/* Top-navbar right-half Login + Locations: colour flows from the per-theme
   --topbar-right-text token (black in Dark V1, white in Light V1). This
   high-specificity rule beats the blanket layout colour rules. */
body .top-navbar .top-header-right .nav-links .top-link,
body .top-navbar .top-header-right .nav-links .top-link span,
body .top-navbar .top-header-right .nav-links .top-link i,
body .top-navbar .top-header-right .nav-links a,
body .top-navbar .top-header-right .nav-links a span,
body .top-navbar .top-header-right .nav-links a i,
body .top-navbar .top-header-right span,
body .top-navbar .top-header-right a,
body .top-navbar .top-header-right i,
body .top-navbar .top-header-right .fa {
  color: var(--topbar-right-text, #2C2B30) !important;
}

/* Hero H2 text that CMS hardcoded with inline style="color:#000000" —
   attribute selector beats inline !important rule chain. Scoped narrowly
   to hero sections so it doesn't accidentally flip text-on-white elsewhere. */
.homepage_slider [style*="color:#000000" i],
.homepage_slider [style*="color:#000" i],
.program-header-content-text [style*="color:#000000" i],
.program-header-content-text [style*="color:#000" i],
#slider-text [style*="color:#000" i] {
  color: var(--text-on-surface, #fff) !important;
}

/* ============================================================================
 * RESTORED — three rules that previously existed in this file but were lost
 * to API errors in earlier sessions. Re-applied per Indro's report.
 * ============================================================================ */

/* (1) CARD TITLE H3 — "Little Ninjas / Kids Martial Arts / Adult Martial Arts"
   The featured-program photo cards have a white .card-title-container strip
   below the photo. The dark variant's universal `body h3 → white` rule turned
   these labels white-on-white. Force black so they read on the white strip.
   Actual DOM chain: .lg-container > .card-title-container > .card-title > a > h3
   (no .card ancestor — that's a separate flip-card structure). */
body .card-title-container .card-title h3,
body .card-title-container .card-title a h3,
body .card-title-container h3,
body .lg-container .card-title h3,
body .card-title h3,
body .card-title a h3 {
  color: var(--text-on-card, #2C2B30) !important;
}

/* (2) MISSION STATEMENT — restore white panel + matching flap + edge-to-edge
   bleed to absorb the gap between the coral stripe above and the panel.
   Uses the --flap-color and --panel-bleed-* variable system. */
body .homePageSection .container.mission_statement.bg-white,
body .container.mission_statement.bg-white,
.mission_statement.bg-white {
  background-color: var(--surface-card, #fff) !important;
  --flap-color: #fff;
  --panel-bleed-color: #fff;
  --panel-bleed-top-extend: 40px;
  position: relative;
  z-index: 1;
}

/* Edge-to-edge bleed pseudo-element — paints behind the contained panel so
   the colour reaches the viewport edges, absorbing the inter-section gap. */
.mission_statement.bg-white::before {
  content: "";
  display: block !important;
  position: absolute;
  top: calc(0px - var(--panel-bleed-top-extend, 0px));
  bottom: calc(0px - var(--panel-bleed-bottom-extend, 0px));
  left: -50vw;
  right: -50vw;
  background: var(--panel-bleed-color, transparent);
  z-index: -1;
}

/* Flap (downward triangle) override — generic --flap-color system. Each
   section can set its own --flap-color locally; default stays graphite.
   Kept for compatibility; visible shape is now block (9) below. */
.bottom-triangle::after,
.mission_statement.bg-white + .bottom-triangle::after,
.mission_statement.bg-white .bottom-triangle::after {
  border-top-color: var(--flap-color, #2C2B30) !important;
}

/* (9) FUNNEL FLAP — replaces the V-cut triangle with a curved funnel:
   straight top edge, sides bow outward, sharp point at bottom-center.
   Layout's `.bottom-triangle::after` ships with `transform: matrix(...)`
   that shifts the pseudo by ~-477px; reset to none so our centering wins.
   Width 950 × Height 60. 30px padding-bottom on .bottom-triangle adds
   breathing room between the section text and the funnel start. */
body .bottom-triangle { position: relative !important; overflow: visible !important; padding-bottom: 30px !important; }
body .bottom-triangle::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: calc(50% - 475px) !important;
  right: auto !important;
  top: 100% !important;
  bottom: auto !important;
  margin: 0 !important;
  width: 950px !important;
  height: 60px !important;
  border: 0 none !important;
  background: var(--flap-color, #2C2B30) !important;
  transform: none !important;
  -webkit-transform: none !important;
  clip-path: path('M 0 0 L 950 0 Q 700 0, 475 60 Q 250 0, 0 0 Z') !important;
  -webkit-clip-path: path('M 0 0 L 950 0 Q 700 0, 475 60 Q 250 0, 0 0 Z') !important;
  z-index: 5 !important;
}

/* (3) TILT-BG — "You Belong Here" coral panel below the 3-step section.
   Replace the layout's transform: skewY(-3deg) with a clip-path that only
   slants the TOP edge (so the bottom flows flat into the next section).
   Use coral as bg + force paragraph text white. */
.large_video .tilt-bg,
.bg-gray.tilt-bg,
.large_video.tilt-bg,
.large_video .bg-gray.tilt-bg {
  background: var(--primary-color, #A69471) !important;
  transform: none !important;
  -webkit-transform: none !important;
  clip-path: polygon(0 calc(100vw * 0.0524), 100% 0, 100% 100%, 0 100%) !important;
  -webkit-clip-path: polygon(0 calc(100vw * 0.0524), 100% 0, 100% 100%, 0 100%) !important;
}
/* Inner .container had a counter-skew — neutralize it too */
.large_video .tilt-bg .container,
.large_video.tilt-bg .container {
  transform: none !important;
  -webkit-transform: none !important;
}
/* Paragraph text white on coral. Higher specificity to beat
   #homepage .large_video .text-content .content-box p (0,1,4,1).
   NOTE: #homepage is the BODY id (not a descendant), so `body #homepage X`
   requires a descendant element to also have id=homepage and never matches.
   Use `#homepage` directly — it matches body and the descendant chain wins. */
#homepage .large_video .tilt-bg p,
#homepage .large_video .tilt-bg .text-content p,
#homepage .large_video .tilt-bg .text-content .content-box p,
body .large_video .tilt-bg p,
body .large_video.tilt-bg p {
  color: var(--text-on-surface, #fff) !important;
}

/* ============================================================================
 * MORE RESTORED RULES — additional load-bearing fixes that were also lost.
 * ============================================================================ */

/* (4) MISSION text — heading + paragraph need to be GRAPHITE on white panel.
   The universal `body p, body h1...h6, body .mission_statement → white` rule
   above paints them white on the white panel. Override at higher specificity. */
body .mission_statement.bg-white h1,
body .mission_statement.bg-white h2,
body .mission_statement.bg-white h3,
body .mission_statement.bg-white h4,
body .mission_statement.bg-white p,
body .mission_statement.bg-white li,
body .container.mission_statement.bg-white h1,
body .container.mission_statement.bg-white h2,
body .container.mission_statement.bg-white p,
body .container.mission_statement.bg-white li {
  color: var(--text-on-card, #2C2B30) !important;
}

/* (5) MEGA-NAV CATEGORY NAMES — "Children's Programs / Adult Programs / Just 4
   Kids" should match the brand accent (CTA button color). The `<span>Ages X-Y</span>`
   subtitle stays white so it reads on the dark dropdown bg.
   Specificity battle: an earlier white-text rule uses `.programs-dropdown
   .arrow.no-desktop` (0,0,3,0). To beat it, this needs 3+ class selectors. */
body .programs-dropdown .arrow.no-desktop,
body .dropdown .arrow.no-desktop,
body .programs-nested.dropdown-toggle .arrow,
body .programs-dropdown li .arrow,
body .programs-dropdown a.programs-nested .arrow,
body .dropdown.programs-dropdown .arrow {
  color: var(--global-button-bg, var(--primary-color, #A69471)) !important;
}
/* Subtitle span (Ages X-Y) — ALWAYS white, regardless of theme.
   The dropdown bg is always dark (intentional mega-menu style in both
   Dark + Light themes), so the subtitle must stay white to read. Previously
   used var(--text-on-surface) which flipped to graphite on Light V1 —
   producing dark-on-dark, invisible subtitles. */
body .programs-dropdown .arrow.no-desktop span,
body .dropdown .arrow.no-desktop span,
body .programs-dropdown .arrow.no-desktop .ages,
body .dropdown.programs-dropdown .arrow span {
  color: #FFFFFF !important;
}

/* (6) HERO BORDERED CTA — "Adult Programs" / "Find Out How" / any
   `.button--bordered-slider` button. On graphite body in this dark variant,
   render as a thin WHITE bordered button with white text — clean against
   the dark background. Box-shadow nullified (the layout's default applies
   a coral inset that doubles up with the border to look 4px thick). */
body .button.button--bordered-slider,
body a.button.button--bordered-slider,
body .text-box .button-group .button--bordered-slider,
body .text-box .button--bordered-slider {
  color: var(--text-on-surface, #fff) !important;
  border: 2px solid var(--white-color, #fff) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ============================================================================
 * BUTTON + DROPDOWN CONTRAST FIXES — coral-bg surfaces need dark text
 * ----------------------------------------------------------------------------
 * (a) Find Location stripe (#find-location) is coral. The "Choose State"
 *     <select> was rendering pale coral on coral. Force dark.
 * (b) Ad-tile "Learn More" overlay is coral. Text was coral too → invisible.
 * (c) "Start today!" CTA on the coral You Belong Here panel — render as a
 *     visible bordered button with white text.
 * (d) "Request More Information" form submit on graphite — coral fill, white text.
 * ============================================================================ */

/* (a) Choose State dropdown on coral bg */
body #find-location select,
body #find-location .form-control,
body #find-location select.form-control,
body #find-location option {
  color: var(--text-on-card, #2C2B30) !important;
  background-color: var(--surface-card, #fff) !important;
}

/* (b) Ad-tile "Learn More" — coral bg overlay needs WHITE text */
body .image-container .image-wrapper .overlay .content .learn-more,
body .advertisements .image-wrapper .overlay .learn-more,
body .image-container.advertisements .image-wrapper .overlay .content .learn-more {
  color: #FFFFFF !important;   /* always white — photo bg is dark in both variants */
  background-color: transparent !important;
  border: 2px solid #FFFFFF !important;
  padding: 8px 18px;
}

/* (c) "Start today!" CTA on the coral .tilt-bg panel.
   Default: graphite fill + white text + white border (reads as a solid
   button on the coral bg).
   Hover/focus: invert — white fill + graphite text + graphite border. */
body .large_video .tilt-bg .learn-more,
body .large_video .tilt-bg a.learn-more,
body .large_video .tilt-bg .text-content .learn-more,
body .large_video.tilt-bg .learn-more,
body .large_video .tilt-bg .button,
body .large_video .tilt-bg a.button {
  color: var(--text-on-surface, #fff) !important;
  background-color: var(--surface-base, #2C2B30) !important;
  border: 2px solid var(--white-color, #fff) !important;
  box-shadow: none !important;
  padding: 10px 22px;
  display: inline-block;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body .large_video .tilt-bg .learn-more:hover,
body .large_video .tilt-bg .learn-more:focus,
body .large_video .tilt-bg a.learn-more:hover,
body .large_video .tilt-bg a.learn-more:focus,
body .large_video .tilt-bg .text-content .learn-more:hover,
body .large_video .tilt-bg .text-content .learn-more:focus,
body .large_video.tilt-bg .learn-more:hover,
body .large_video.tilt-bg .learn-more:focus,
body .large_video .tilt-bg .button:hover,
body .large_video .tilt-bg .button:focus,
body .large_video .tilt-bg a.button:hover,
body .large_video .tilt-bg a.button:focus {
  /* The slide-in ::after overlay from main_new.css is fixed to `#000000` and
     cannot be easily overridden per-button. So the hover END-STATE is always
     "dark overlay + text on top." Keep text WHITE on hover (readable against
     the black overlay) instead of flipping to --text-on-card which produces
     graphite-on-black. */
  color: var(--btn-hover-text, #FFFFFF) !important;
  background-color: var(--surface-card, #fff) !important;
  border-color: var(--black-color, #2C2B30) !important;
}

/* (d) CTA SYSTEM — "stroke invert on hover" pattern (canonical: Request More Info).
   PRIMARY variant (.button--primary, every form submit):
     Default = primary fill + primary border + white text.
     Hover  = graphite fill + primary border stays + white text.
   SECONDARY variant (.button--bordered-slider, e.g. hero "Adult Programs"):
     Default = WHITE fill + primary border + BLACK text.
     Hover  = graphite fill + primary border + white text.
   Both variants converge on the SAME hover end-state (graphite + primary stroke + white). */

/* --- PRIMARY default ---
   Border is transparent so the coral-on-coral edge isn't visible at rest.
   The coral border only becomes visible on hover (against the graphite invert).
   Border slot is reserved (2px transparent) so the layout doesn't shift on hover. */
body .request-form .submit-button,
body form .submit-button,
body .request-form-container .submit-button,
body input[type="submit"].submit-button,
body button.submit-button,
body input.contactCustomFormSubmit1,
body section[class*="map"] input[type="submit"],
body .map-main input[type="submit"],
body .text-box .button-group .button.button--primary,
body .button-group a.button.button--primary,
body a.button.button--primary,
body .modern-btn,
body div.modern-btn {
  background-color: var(--primary-color, #A69471) !important;
  color: #FFFFFF !important;   /* always white — sits on coral (default) + graphite (hover) */
  border: 2px solid transparent !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
/* Inner anchor of .modern-btn must inherit the bg behavior (it's the focusable
   element that receives :hover). Pin its bg transparent so only the parent paints. */
body .modern-btn a,
body div.modern-btn a {
  background-color: transparent !important;
  color: #FFFFFF !important;   /* always white, per parent rule */
}

/* --- SECONDARY default (white pill with black text) --- */
body .text-box .button-group .button.button--bordered-slider,
body .button-group a.button.button--bordered-slider,
body a.button.button--bordered-slider {
  background-color: var(--surface-card, #fff) !important;
  color: var(--text-on-card, #2C2B30) !important;
  border: 2px solid var(--primary-color, #A69471) !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* --- Shared hover end-state: graphite fill + primary border stays + white text --- */
body .request-form .submit-button:hover,
body .request-form .submit-button:focus,
body form .submit-button:hover,
body form .submit-button:focus,
body button.submit-button:hover,
body button.submit-button:focus,
body input.contactCustomFormSubmit1:hover,
body input.contactCustomFormSubmit1:focus,
body section[class*="map"] input[type="submit"]:hover,
body section[class*="map"] input[type="submit"]:focus,
body .map-main input[type="submit"]:hover,
body .map-main input[type="submit"]:focus,
body .text-box .button-group .button.button--primary:hover,
body .text-box .button-group .button.button--primary:focus,
body .text-box .button-group .button.button--bordered-slider:hover,
body .text-box .button-group .button.button--bordered-slider:focus,
body .button-group a.button.button--primary:hover,
body .button-group a.button.button--primary:focus,
body .button-group a.button.button--bordered-slider:hover,
body .button-group a.button.button--bordered-slider:focus,
body a.button.button--primary:hover,
body a.button.button--primary:focus,
body a.button.button--bordered-slider:hover,
body a.button.button--bordered-slider:focus,
body .modern-btn:hover,
body .modern-btn:focus-within,
body div.modern-btn:hover,
body div.modern-btn:focus-within {
  background-color: var(--btn-hover-bg, #2C2B30) !important;   /* always graphite */
  color: var(--btn-hover-text, #FFFFFF) !important;             /* white in Dark, coral in Light */
  border-color: var(--primary-color, #A69471) !important;
}
/* Inner anchor stays text-only; parent .modern-btn handles bg/border on hover */
body .modern-btn:hover a,
body .modern-btn:focus-within a,
body div.modern-btn:hover a,
body div.modern-btn:focus-within a {
  color: var(--btn-hover-text, #FFFFFF) !important;
  background-color: transparent !important;
}

/* (e) "Anyone can begin martial arts" closing line — bold + 2x size for emphasis.
   Lives in a <span> inside .text-section-box > p (NOT inside .tilt-bg as the
   section markup might suggest). Coral color already applied by another rule. */
body .text-section-box p span,
body .text-section-1-container .text-section-box p span,
body div.bottom-triangle .text-section-box p span,
body .bottom-triangle.center-content .text-section-box p span {
  font-weight: 700 !important;
  font-size: 2em !important;
  line-height: 1.2 !important;
  display: inline-block;
  margin-top: 0.4em;
}

/* (f) MEGA-NAV PROGRAM SUB-LIST — individual program-page links (Little
   Ninjas / Teen Martial Arts / Adult Martial Arts / Krav Maga / Just 4
   Kids / Birthday Parties / Summer Camp) live in inner ul.dropdown nested
   inside the main .programs-dropdown. Per Indro: these should match the
   top-right SEO bar scheme — WHITE bg with GRAPHITE text.
   IMPORTANT: paint the UL only, NOT each LI — painting each li turned
   them into floating white pills with gaps between them. */
body .programs-dropdown > li > ul.dropdown,
body ul.programs-dropdown > li > ul.dropdown,
body .programs-dropdown ul.dropdown {
  background-color: var(--surface-card, #fff) !important;
}
/* Reset individual program-link LI bg so they sit on the parent ul's white panel */
body .programs-dropdown > li > ul.dropdown > li,
body ul.programs-dropdown > li > ul.dropdown > li,
body .programs-dropdown ul.dropdown > li {
  background-color: transparent !important;
}

/* MEGA-NAV TWO-ROW PANEL — load-bearing pattern for every dark theme.
   Row 1 (category headers .arrow.no-desktop): GRAPHITE bg, full width.
     - Category name (h2) — primary/CORAL text per block (5).
     - "Ages X-Y" subtitle (span) — WHITE on graphite.
   Row 2 (program-link sub-lists .programs-nested-dropdown): WHITE bg, full
   width edge-to-edge across the dropdown panel — NOT just per column.
     - Link text — GRAPHITE.

   How: linear-gradient on the outer UL (graphite 0→55px, white 55px→100%)
   gives the continuous two-row strip. Columns + headers + sub-lists are
   transparent so the gradient shows. Stop at 55px = the .arrow.no-desktop
   header height. If header line wraps in a future theme, raise the stop. */
/* Stop at 70px = where the sub-list actually starts (column.subTop measured).
   Stopping at the header's intrinsic height (55px) leaves a 15px white sliver
   visible between the header bottom and the sub-list top — Indro flagged this
   as a visible "extra line of white". Aligning stop with subTop hides it. */
body ul.dropdown.programs-dropdown.custom-dropdown {
  background: linear-gradient(
    to bottom,
    var(--black-color, #2C2B30) 0px,
    var(--black-color, #2C2B30) 70px,
    var(--white-color, #fff) 70px,
    var(--white-color, #fff) 100%
  ) !important;
}
/* Top-level column LIs transparent; tighten margins so columns butt cleanly */
body ul.programs-dropdown.custom-dropdown > li.nav-item,
body ul.programs-dropdown.custom-dropdown > li,
body .nav-item.custom_program_dropdown > .programs-dropdown > li {
  background-color: transparent !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
/* Category header transparent (graphite shows through from gradient).
   No border — even at 12% white, the line was visible against graphite. */
body ul.programs-dropdown.custom-dropdown > li > .arrow.no-desktop,
body ul.programs-dropdown.custom-dropdown > li > .programs-nested .arrow.no-desktop {
  background-color: transparent !important;
  border: 0 none !important;
}
/* Sub-list transparent + bottom padding so program links breathe below */
body ul.programs-dropdown.custom-dropdown > li > ul.dropdown {
  background-color: transparent !important;
  margin-top: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 24px !important;
}
/* "Ages X-Y" subtitle on graphite dropdown row → ALWAYS WHITE.
   Dropdown bg is dark in both themes (mega-menu style), so subtitle must
   stay white regardless of theme. Previous --text-on-surface flipped to
   graphite on Light V1, producing invisible dark-on-dark text. */
body ul.programs-dropdown.custom-dropdown > li .arrow.no-desktop span,
body ul.programs-dropdown.custom-dropdown > li .arrow.no-desktop .ages,
body ul.programs-dropdown.custom-dropdown .programs-nested .arrow.no-desktop span {
  color: #FFFFFF !important;
  opacity: 0.7;
}
/* Link text: graphite (on white second-tier of gradient). We have to beat
   the site-wide anchor-sweep `body a:not(...)(...)…` at 0,10,2 which otherwise
   paints white (--text-on-surface). 8 :not() pseudos here = 0,8 classes →
   combined spec 0,11,4+ beats 0,10,2. Earlier this rule only had 4 :not()s
   and lost to the sweep → nested dropdown text rendered WHITE on WHITE
   tier = invisible (Indro flagged 2026-04-21). */
body .programs-dropdown.custom-dropdown li ul.dropdown a:not(.btn):not(.button):not(.foo):not(.bar):not(.e):not(.f):not(.g):not(.h),
body ul.programs-dropdown.custom-dropdown li ul.dropdown a:not(.btn):not(.button):not(.foo):not(.bar):not(.e):not(.f):not(.g):not(.h),
body .nav-links .programs-dropdown.custom-dropdown ul.dropdown a:not(.btn):not(.button):not(.foo):not(.bar):not(.e):not(.f):not(.g):not(.h),
body .programs-dropdown.dropdown.custom-dropdown li ul.dropdown a:not(.btn):not(.button):not(.foo):not(.bar):not(.e):not(.f):not(.g):not(.h) {
  color: var(--text-on-card, #2C2B30) !important;
  background-color: transparent !important;
}

/* (h) FORM HEADING — "Access Our Class Schedule & Exclusive Web Offer"
   sized up to match the emphasized "Anyone can begin martial arts" line.
   Covers the program-page variant AND the homepage optin form variant. */
body .program-header-content-form .request-form-header-container h2,
body .program-header-content-form .request-form-header-container h3,
body .program-header-content-form h2,
body .program-header-content-form h3,
body .optin-form-section .request-form-header-container h2,
body .optin-form-section .request-form-header-container h3,
body .request-form-container .request-form-header-container h2,
body .request-form-container .request-form-header-container h3,
body .request-form-header-container h2,
body .request-form-header-container h3 {
  font-size: 2em !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5em;
}

/* Keep the closing optin form's "[Program] Exclusive Web Offer" headline on
   one line at desktop widths on both themes. `.program_trial_bottom_form` is
   the bottom CTA variant (vs. the top hero form). Mobile falls back to normal
   wrapping via the media query. */
body #about-trial-form.program_trial_bottom_form .request-form-header-container h2 {
  white-space: nowrap !important;
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {
  body #about-trial-form.program_trial_bottom_form .request-form-header-container h2 {
    white-space: normal !important;
    font-size: 1.5em !important;
  }
}

/* (i) CONTACT FORM PANEL — let the map div flow naturally so it gives the
   section its full height; iframes (if used) absolute-fill. The form sits
   absolutely centered over the map. NO padding/margin on the section or
   form — those create visible graphite bands above/below the map. */
body section.map-main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
}
/* Iframe-based maps absolute-fill (this branch only — div-based maps flow) */
body section.map-main iframe,
body section.map-main .map-iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0;
}
/* Form panel — keep the layout's absolute centering; just z-stack above map.
   No vertical margin (would create visible bands on an absolute element). */
body section.map-main .outer-form,
body section.map-main form.contact-form,
body .map-main form.contact-form {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  z-index: 2;
}

/* (j) NAV LOGO SWAP — REMOVED 2026-04-24.
   Previously used CSS `content: url('../confidence-dojo-logo.png')` to swap
   the rendered image. Broke in production because the relative path resolves
   above the domain root on the live server (the CSS is served from /). Result:
   Prat's CMS-uploaded logo would appear on save, then CSS would override it
   with the non-existent URL on refresh → broken-image icon.
   Fix: let the CMS `<img src>` render natively. Logo is managed via CMS admin. */

/* (k) CARD-BACK CONTENT — flip-card back side renders on the coral→graphite
   gradient (always dark context regardless of body theme). Title + copy
   stay WHITE in both themes; "Learn How It Works" pill uses dark text on
   white default, white text on graphite hover. */
body .card .card-back .title-box,
body .card .card-back .title-box h3,
body .card .card-back h3,
body .card-back .title-box,
body .card-back .title-box h3 {
  color: #FFFFFF !important;   /* always white — card-back gradient is dark in both themes */
}
/* Spec bump: layout's `body a:not(...)*5` rule for white anchor links is
   (0,0,5,2). Add four :not() pseudos so this rule reaches (0,0,7,3) > (0,0,5,2)
   and the white pill button's inner anchor reads dark on its white bg.
   Avoid :not(:link):not(:visited) — every <a href> matches :link, excluding itself. */
body .card .card-back .featured-button a:not(.button):not(.modern-btn):not(.submit-button):not(.learn-more),
body .card .card-back button.featured-button a:not(.button):not(.modern-btn):not(.submit-button):not(.learn-more),
body .card-back .featured-button a:not(.button):not(.modern-btn):not(.submit-button):not(.learn-more),
body .card-back button.featured-button a:not(.button):not(.modern-btn):not(.submit-button):not(.learn-more) {
  color: var(--text-on-card, #2C2B30) !important;
}

/* Card-back "Learn How It Works" button HOVER text color.
   The button has a layout `::after` slide-in (line ~383) that paints the bg
   `var(--black-color-alpha-93)` graphite on hover. Default text + anchor are
   both `var(--black-color)` (graphite at rest reads on the white pill). On
   hover, bg goes graphite → text stays graphite → graphite-on-graphite
   invisible. Flip text + anchor to WHITE on hover so the label reads on
   the slid-in graphite bg. Anchor selector mirrors the resting-state spec
   (4 `:not()` chains) plus `:hover` for the +1 needed to win. */
body .card .card-back button.featured-button:hover,
body .card-back button.featured-button:hover {
  color: #FFFFFF !important;   /* always white on graphite slide-in — both themes */
}
body .card .card-back .featured-button:hover a:not(.button):not(.modern-btn):not(.submit-button):not(.learn-more),
body .card .card-back button.featured-button:hover a:not(.button):not(.modern-btn):not(.submit-button):not(.learn-more),
body .card-back .featured-button:hover a:not(.button):not(.modern-btn):not(.submit-button):not(.learn-more),
body .card-back button.featured-button:hover a:not(.button):not(.modern-btn):not(.submit-button):not(.learn-more) {
  color: #FFFFFF !important;   /* always white on graphite slide-in — both themes */
}

/* (g) CONTACT FORM ON MAP — fields were transparent so the map showed
   through, killing the contrast on placeholders + labels. Force opaque
   graphite bg with white text + bordered coral focus ring. */
body .contact-form input[type="text"],
body .contact-form input[type="email"],
body .contact-form input[type="tel"],
body .contact-form select,
body .contact-form textarea,
body .contact-form-payment input:not([type="submit"]),
body .contact-form-payment select,
body .contact-form-payment textarea,
body .form-section input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body .form-section select,
body .form-section textarea,
body section[class*="map"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body section[class*="map"] select,
body section[class*="map"] textarea,
body .contact_us_form input:not([type="submit"]),
body .contact_us_form select,
body .contact_us_form textarea,
body .map-main input:not([type="submit"]),
body .map-main select,
body .map-main textarea {
  background-color: var(--surface-base, #2C2B30) !important;
  background: var(--surface-base, #2C2B30) !important;
  color: var(--text-on-surface, #fff) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
}
/* Note: submit-button styling now lives in block (d) below as part of the
   "stroke invert on hover" universal CTA pattern. The (g) field-paint rule
   above is scoped with :not([type="submit"]) so it doesn't fight (d). */
body .contact-form input::placeholder,
body .contact-form textarea::placeholder,
body .contact-form select option,
body .contact_us_form input::placeholder,
body .contact_us_form textarea::placeholder,
body .map-main input::placeholder,
body .map-main textarea::placeholder,
body .form-section input::placeholder,
body .form-section textarea::placeholder {
  color: var(--text-on-surface, #fff) !important;
  opacity: 0.85 !important;
}
/* Floating-label variant — labels overlaid on the field */
body .contact-form label,
body .contact_us_form label,
body .form-section label,
body .map-main label,
body .contact-form-payment label {
  color: var(--text-on-surface, #fff) !important;
  background-color: transparent !important;
}

/* (8) GRADIENT STROKE RING — soft 1px outline that respects border-radius.
   CSS borders can't take gradients; `border-image` ignores `border-radius`.
   Trick: a `::before` pseudo with the gradient as bg + a CSS mask that
   subtracts the inner area, leaving only a 1px ring.

   MOUNT POINT — load-bearing, two iterations.
   Iteration 1: mounted on the OUTER `.card.single_featured_program` so it
   "persisted across hover flip." But the OUTER card is STATIC — only
   `.card-inner` rotates via the layout's `.card:hover .card-inner {
   transform: rotateY(180deg) }`. So the ring sat in parent space while
   the card flipped through it (image rotated, ring stayed put). Indro
   flagged: "the 3 images on the hero rotate but the stroke we made
   around them stays fixed."

   Iteration 2: mount the `::before` on BOTH `.card-front` AND `.card-back`
   so each face carries its own ring and rotates with the flip. CRITICAL:
   do NOT add `position: relative` to the faces. The layout has:
     - `.card-front` { position: absolute; inset: 0 }   (out of flow, fills inner)
     - `.card-back`  { position: relative; inset: 0 }   (in flow, fills inner via height)
   Both already have positioning contexts for the `::before` to anchor to.
   Overriding `position: relative` on `.card-front` flips it from absolute
   to relative, removes it from out-of-flow, and the front + back stack
   vertically inside the inner — back content overflows below the slot.
   So just add the `::before` — no position override on the faces.

   `border-radius: 20px` matches the layout's face radius. Both faces have
   `backface-visibility: hidden`, so the off-side ring is hidden alongside
   its face — clean swap mid-flip, no double-stroke.

   Per-palette tuning: coral → white reads on both surfaces here:
     - Front face: white bg behind the photo, coral end pops upper-left,
       white end visible against the dark photo at bottom-right.
     - Back face: coral→graphite gradient bg, coral end blends slightly
       into the back's coral start, but white end at bottom-right pops
       cleanly against the graphite end.
   If a future palette has a near-coral back stop where the coral end
   disappears entirely, swap the back's ring to white → primary so the
   visible end inverts. */
body .card.single_featured_program .card-front::before,
body .card.single_featured_program .card-back::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary-color, #A69471), var(--surface-card, #fff));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
}

/* (9) STICKY NAVBAR Z-STACK — beat the contact-form-on-map overlap.
   Problem: scroll to bottom, the contact form on the map section visually
   overlays the sticky navbar. Form fields render in front of the logo +
   menu items.

   Why: layout has `.bottom-navbar-container.fixed-top { position: fixed;
   z-index: 1000 }` BUT its parent `.container` is `position: relative;
   z-index: 2` — that creates a stacking context. The fixed navbar is
   contained within it. Effective stack of navbar in body's main context = 2.
   Meanwhile the map form's `.outer-form` has `transform: matrix(...)` +
   `position: absolute; z-index: 2` — ALSO promoted to stacking context at
   z:2 in body's main context. Tie. Form is later in DOM, so form wins.

   Fix: target the navbar's `.container` parent (which lives inside
   `.homepage_slider` — unique to the navbar location) and bump it to
   z:9999 so it wins over the form's z:2. Also bump the navbar itself
   for safety. Use the homepage_slider scope (not bare `.container`)
   so the other 6 `.container` elements on the page aren't affected.
   Also include `.bottom-navbar-container.fixed-top` itself with z:9999. */
body .homepage_slider > .container,
body .background-wrapper > .container {
  z-index: 9999 !important;
  position: relative;
}
body .bottom-navbar-container.fixed-top {
  z-index: 9999 !important;
}

/* (10) CARD-TITLE HOVER OVERLAY — coral fill on hover, PER-PILL (revised PG-15).
   The 3 photo cards sit above a shared `.card-title-container` that houses
   3 `.card-title` siblings (one per program). Previous revision triggered
   on `.lg-container:hover` which fires on hover of ANY descendant — the
   whole strip flashed coral, not just the hovered pill. Also: the "Ages X-Y"
   subtitle sits as `<p class="text-primary">` which was left out of the text
   flip so on coral bg it read coral-on-coral = invisible.

   Revised: trigger on `.card-title:hover` directly — the individual pill is
   the hit target and the highlight scope. Only that one pill's bg flips
   coral + all its text (h3 + p.text-primary + ages + span) flips white.
   The other two pills stay in their default graphite-on-white state.

   Specificity: `.card-title:hover` path at (0,0,4,2) beats block (1)'s
   (0,0,3,2) via the added `:hover` pseudo-class.

   Per-palette tuning: coral fill comes from `var(--primary-color)`. White
   text reads on any dark or saturated primary. If a palette has a pale
   primary where white text fails, override hover text to
   `var(--black-color)` per-palette.

   Out-of-scope note: original dojoonlinemarketing.com renders the strip as
   one wide white pill with vertical separators between 3 labels (via
   `.card-title-container { width: 100%; display: flex }` at min-width: 510).
   We preserve that structure — only the hover trigger scope changes. */
body .card-title-container .card-title h3,
body .card-title-container .card-title a h3 {
  transition: color 0.25s ease;
}
body .card-title-container .card-title:hover h3,
body .card-title-container .card-title:hover a h3 {
  /* Hardcoded red (not --primary-color) — user wants hover red to stay
     constant across every palette clone, not track the theme accent. */
  color: #ff0500 !important;
}

/* (11) GET-STARTED 3-STEP ICONS — 25% smaller + row breathing room.

   Problem: Indro — "can we make these icons 25 smaller."
   Layout default is a 145×145 SVG inside `.getting-started-icon.center-content`.

   DOM chain (verified):
     .lg-container.getting_started
       > .getting-started
       > .getting-started-icon-section
       > .row
       > .col-12-xs.col-4-sm
       > .getting-started-icon.center-content
       > svg.custom-svg
   (SVG has no width/height attrs — only `viewBox="0 0 428 428"`. Size is
   pure CSS.)

   How the layout sizes the SVG (in layout_assests_new_layout_v1_css_development_new_layout.css):
     .getting-started .getting-started-icon-section .getting-started-icon .custom-svg {
       max-width: 145px;   (at min-width: 765px)
     }
   Combined with the base `.custom-svg { width: 100%; height: auto }`, the
   SVG fills its flex column (~577px wide) but caps at 145px. Height tracks
   width via the 1:1 viewBox aspect ratio.

   Solution: override max-width to 109 (= 145 × 0.75). Height follows via
   the SVG's intrinsic aspect ratio — no explicit height needed. Because
   width stays `100%` (layout base rule), the SVG renders at min(100%, 109px)
   = 109px in any column wider than 109px.

   Earlier failed attempt (parking-lot note): `transform: scale(0.75)` on
   the SVG collapsed the flex wrapper to 3×519. Transform doesn't shrink
   the layout box, and the flex interaction was unstable. Direct max-width
   sizing avoids that entirely.

   Specificity: layout rule is 4 classes (0,0,4,0) = 40. Override selector
   `body .lg-container.getting_started … .custom-svg` is (0,0,5,1) = 51 → wins.
   `!important` present anyway as belt-and-suspenders against any future
   layout-rule addition.

   Plus: 50px vertical padding on the OUTER `.getting-started` wrapper so
   breathing room spans above the "Getting Started Is Easy!" heading AND
   below the icons. Indro iterated: started at 75px, then dropped to 50px
   for symmetry with the visual gap below the icon row. Also clarified the
   top padding had to apply ABOVE the heading, not just above the icon
   row — hence padding on `.getting-started` (outer) not
   `.getting-started-icon-section` (inner, header's sibling).

   DOM layering:
     .lg-container.getting_started
       > .getting-started                ← padding goes HERE (above heading + below icons)
           > .getting-started-header     (the heading)
           > .getting-started-icon-section  (the 3-icon row, has margin-top: 24px from ~line 1234)

   First-attempt scope (.getting-started-icon-section) was too narrow —
   only added breathing room below the heading / above the icons. The
   padding needs to be on the outer `.getting-started` so it wraps the
   whole 2-child stack.

   Margin-top/bottom on `.getting-started` (~line 1230) stays as external
   spacing between this section and its neighbors; padding is additive
   inside, doesn't conflict.

   Per-palette tuning: 109 is palette-agnostic. If a future palette wants
   a different icon size, change the max-width here. The 50px padding is
   also palette-agnostic — any palette inherits the same breathing room. */
body .lg-container.getting_started .getting-started-icon-section .getting-started-icon .custom-svg {
  max-width: 109px !important;
}
body .lg-container.getting_started .getting-started,
body .getting-started {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* (12) VIDEO EMBED — 50px breathing room above the iframe.

   Problem: Indro — "above the video below in the next row, let's make
   that have 50px above the video embed." The "next row" is the coral
   tilt-bg panel immediately after the get-started section.

   DOM chain (verified):
     .bg-gray.container.large_video (outer — coral tilt via block (3))
       > .bg-gray.tilt-bg (the slanted coral panel, clip-path'd by block (3))
       > .container.video-section
           > .video-content
               > .video-inner        ← iframe lives here, it's the first child
               > .text-content       ("You Belong Here" + body copy, BELOW video)

   Solution: margin-top: 50px on `.video-inner` (per Indro's direct spec:
   "video: margin-top: 50px"). Pushes the iframe container 50px down from
   the top of `.video-content`. Adds to the existing ~75px gap between
   the top of the coral panel and the top of `.video-content` (which is
   the slant clearance). Net: iframe sits with a bigger top buffer under
   the slanted coral edge.

   Specificity: scope strictly to the HOMEPAGE tilt-bg video section via
   `.large_video .video-inner` — a bare `body .video-inner` would ALSO
   hit the about-us facility iframe wrapper (also `.video-inner`) and
   push that iframe 50px down, which Indro flagged ("i want to make sure
   it doesn't get styled by CSS" on the facility video). `.large_video`
   anchor keeps the rule to the homepage hero-video-tilt only. */
body .large_video .video-content .video-inner,
body .large_video .video-inner {
  margin-top: 50px !important;
}

/* (13) "YOU BELONG HERE" HEADLINE — graphite on coral.

   Problem: Indro — "'You belong here' headline under the video: graphite."
   Currently painted WHITE by the universal `body h1-h6` white-on-dark rule.
   On the coral tilt-bg panel, white h2 reads but Indro wants graphite for
   stronger contrast against the coral.

   DOM chain (verified):
     .bg-gray.container.large_video
       > .bg-gray.tilt-bg
       > .container.video-section > .video-content > .text-content
           > .content-box > h2                            ← this element

   Solution: target h2 inside the tilt-bg with enough specificity to beat
   the universal white-h2 rule (typically `body h2 { color: white !important }`
   at (0,0,1,1) = 11). `body #homepage .large_video .tilt-bg .text-content
   .content-box h2` is (0,1,3,3) — wins easily.

   Parallels block (3)'s paragraph-white rule on the same surface — same
   DOM, opposite color treatment for a different element type.

   Per-palette tuning: graphite reads on coral, pale primaries, and most
   saturated primaries. If a palette has a near-graphite primary, flip
   this h2 back to white per-palette. */
body #homepage .large_video .tilt-bg h2,
body #homepage .large_video .tilt-bg .text-content h2,
body #homepage .large_video .tilt-bg .text-content .content-box h2,
body .large_video .tilt-bg h2,
body .large_video.tilt-bg h2 {
  color: var(--text-on-card, #2C2B30) !important;
}

/* (14) "START TODAY!" STRONG — larger callout inline.

   Problem: Indro — "start today! Larger." The closing line of the body
   copy under the video is "...martial arts is unlike any other sport...
   Start today!" where "Start today!" is a `<strong>` at the end. Default
   inherits the paragraph's 17px. Indro wants it visually larger for
   emphasis as an inline CTA.

   DOM chain (verified):
     .large_video .tilt-bg .text-content .content-box
       > p
         > strong                                      ← "Start today!"

   Solution: 1.5em font-size on the strong. Kept inline (display stays
   inline), so it flows in the paragraph but pops larger. 1.5em = ~25.5px
   at the current 17px base — noticeable but not disruptive to line-height.

   Contrast with block (e): block (e)'s "Anyone can begin martial arts"
   is a STANDALONE span callout (bold + 2em + line-height 1.2), a
   block-level-ish treatment. This (14) is an INLINE strong inside running
   paragraph text — lighter bump, no block reflow. Different use case.

   Specificity: `body .large_video ... p strong` at (0,0,2,3) = 23 beats
   any base `strong { font-size: inherit }` easily. */
body #homepage .large_video .tilt-bg .text-content .content-box p strong,
body .large_video .tilt-bg .text-content p strong,
body .large_video.tilt-bg p strong {
  font-size: 1.5em !important;
}

/* (15) AD-TILE OVERLAY — graphite instead of coral.

   Problem: Indro — "can i see these overlays in graphite instead of color."
   The 3 ad-tile cards (Children's Classes / Adult Classes / Workshops &
   Special Events) have a coral overlay that fades in on hover (middle tile)
   or on page load (outer tiles at the cut-reveal state). Layout default:
   `.image-container.advertisements .image-wrapper .overlay` has
   `background-color: rgba(245, 143, 124, 0.7)` — hardcoded coral.

   Solution: override overlay bg to graphite at 70% alpha. Use `color-mix`
   so it reads from `var(--black-color)` with a fallback rgba for browsers
   that don't support color-mix (wide support since 2023, safe here).

   Specificity: layout rule is `.image-container.advertisements
   .image-wrapper .overlay` at (0,0,3,0) = 30. Override uses
   `body .image-container.advertisements .image-wrapper .overlay` at
   (0,0,3,1) = 31 — just beats. `!important` for safety.

   Per-palette tuning: graphite at 70% alpha reads across palettes since
   it's the neutral tone, unrelated to the primary. Any palette inherits
   this cleanly. If a future palette wants back the accent-overlay look,
   swap the rgba/color-mix stop to var(--primary-color). */
body .image-container.advertisements .image-wrapper .overlay,
body .advertisements .image-wrapper .overlay,
body .image-container.advertisements .overlay {
  background-color: color-mix(in srgb, var(--surface-base, #2C2B30) 70%, transparent) !important;
}

/* (16) CONTACT FORM PANEL — 30px breathing room added inside the dark panel.

   Problem: Indro — contact form on the map needs more vertical breathing
   room. Simple solution (margin-top on first field / margin-bottom on
   Send Message) BROKE LAST TIME because the panel's bg ends at the
   content edge; margin creates space OUTSIDE the bg so the map bleeds
   through as a gray/map-showing band at top or bottom.

   Fix pattern (load-bearing for any future padding add on panels with
   their own bg): the space has to come from INSIDE the panel —
   padding on the element whose bg IS the panel. Padding expands the
   content box; the bg fills the whole expanded box. Never use margin on
   the first/last child.

   DOM chain (verified):
     section.map-main
       > .outer-form (transparent wrapper, absolute-positioned)
         > form.contact-form.content_contact_form   ← THIS is the dark
             panel (bg: rgba(0,0,0,0.7), 400w × 670h, padding: 40px on
             all sides by layout default)

   Solution: extend the form's padding from 40px all sides to 70/40/70/40
   (add 30 to top + bottom, keep left/right intact). MUST write as
   shorthand `padding: t r b l` rather than `padding-top: 70px` /
   `padding-bottom: 70px` in isolation, because any future shorthand
   rule with higher specificity would stomp our isolated props.
   Shorthand here locks all 4 sides explicitly.

   Current layout padding: 40px shorthand (all sides). New: 70 40 70 40.

   Specificity: layout rule `.contact-form { padding: 40px }` is (0,0,1,0)
   = 10. Our `body section.map-main form.contact-form` at (0,0,2,2) = 22
   wins cleanly. `!important` included for safety.

   Sibling rule (block (i), ~line 2094): `body .map-main form.contact-form
   { margin-top: 0; margin-bottom: 0; z-index: 2 }` stays as-is — margin
   must remain 0 (any margin on this absolute-positioned form would create
   the gray/map-bleed band this fix specifically avoids).

   Bg alpha tuning (co-requisite for the padding to read): layout default
   is `rgba(0, 0, 0, 0.7)` — at 70% alpha over the Google Maps green/tan
   palette, the panel is nearly invisible, so the padding breathing room
   reads as "just more map" not as "space inside a panel." Full opaque
   is worse — reads as a harsh rectangular block covering the map.
   Middle ground: graphite at 90% alpha. The panel is clearly a dark
   surface (so padding reads as breathing room INSIDE it), but the map
   still faintly shows through, preserving the layered-overlay feel.

   CRITICAL LAYOUT GOTCHA (load-bearing for any padding expansion on this
   form): `section.map-main` has `overflow: hidden` and a height set by
   the map div's intrinsic ~590px. The form is absolute-positioned inside
   (via `.outer-form`) with a transform that centers it vertically. At
   default padding (40px), form rendered h = 670, overflows map-main
   by ~80 total (40 top + 40 bot clipped — which is why the ORIGINAL
   layout had fields flush to the visible panel's edges: all the
   padding was clipped off anyway).

   After our padding bump to 70/40/70/40, form rendered h = 730,
   overflowing by 140 — the ENTIRE 70px padding top and 70px padding
   bottom would be clipped by `overflow: hidden`, leaving zero visible
   breathing room. First field and Send Message button sit flush against
   the top and bottom edges of the visible panel, same as before the
   padding was ever added.

   Fix (three coordinated overrides):

   (a) Form padding: `30px 40px 30px 40px`. Indro specified 30px of
       VISIBLE breathing room above first field and below Send Message.
       Keep left/right at 40 (the layout baseline). Because the form
       originally had 40px top/bot padding that was ENTIRELY clipped by
       map-main's overflow:hidden (see gotcha below), the layout's
       default "40" was contributing 0 visible space — now with map-main
       resized we go to 30/30 and that IS the visible breathing room.

   (b) Grow `section.map-main` from ~592px to 650px so the form (590
       content-height + 60 padding = 650) fits entirely inside. No more
       top/bottom clipping — padding region is visible as breathing room
       above first field and below Send Message button.

   (c) Force `#location-map` (the map div inside map-main) to
       `height: 100%; min-height: 650px` so it fills the resized map-main.
       Without this the map stays at its intrinsic ~590h and leaves
       a 60px dead-space band beside/below the form panel (reads as a
       graphite void next to the map).

   Earlier attempts:
   - Opaque form bg → harsh solid block covering the map. "absolutely not."
   - `overflow: visible` on map-main → form panel extended down into
     the footer, covering the "Main" column heading. Rejected.
   - Grow map-main without stretching map → dead-space band beside form.
   - Use 70/40/70/40 padding (added 30 to existing 40 baseline) →
     TOO MUCH space. Indro corrected: total visible breathing should
     be 30px, not 40+30=70.

   Bg alpha tuning (co-requisite): layout default is `rgba(0, 0, 0, 0.7)`.
   At 70% over Google Maps, the panel is nearly invisible so the padding
   breathing room doesn't register as "space inside a panel". Full opaque
   reads as a harsh block. Graphite at 90% alpha via color-mix is the
   balance — clear dark surface, map still faintly shows through.

   Per-palette tuning: padding 30/40/30/40 palette-agnostic. Map-main
   height 650 is tied to form rendered height (form.height 590 +
   padding 60). If padding values change, update map-main height to
   match. Bg uses `var(--black-color)` at 90% via color-mix so any
   palette's neutral inherits. */
body section.map-main form.contact-form,
body .map-main form.contact-form,
body form.contact-form.content_contact_form {
  padding: 30px 40px 30px 40px !important;
  background-color: color-mix(in srgb, var(--surface-base, #2C2B30) 90%, transparent) !important;
}
body section.map-main {
  height: 650px !important;
  min-height: 650px !important;
}
body section.map-main > #location-map,
body section.map-main > div:not(.outer-form) {
  height: 100% !important;
  min-height: 650px !important;
}
/* Google Maps' actual tile container is `#map_div5` (child of
   `#location-map`). Its inline style sets `position: relative; overflow:
   hidden` but no explicit height — it naturally sizes to the tile grid
   rendered at init time (590h). Forcing it to 650h via CSS + triggering
   a resize (JS hook in index.html) makes the tile grid re-render to
   fill the 650h container.

   This targets `#map_div5` specifically — NOT `#location-map > div`
   broadly, because Google injects multiple inner divs below that
   level and forcing them all to 100% breaks the tile layout. */
body section.map-main > #location-map > #map_div5 {
  height: 100% !important;
  min-height: 650px !important;
}

/* (17) ABOUT-US HERO PHONE NUMBER — accent color.

   Problem: Indro — "i want to change the number in the hero to Accent
   color." The about-us page hero has phone number + address under the
   main h1 headline. Phone reads as graphite (33px h3) on white panel.
   Indro wants it coral (the palette's primary accent) so it pops.

   DOM chain (verified):
     body#about
       > section#about-top.section.custom-swipe-box
         > .container > .row > .col-md-12.col-sm-12.text-center
             > h3  ← phone number "555-123-4567"

   Scoping: target `body#about #about-top h3` so only the about-us page
   hero phone changes. Other pages might have unrelated h3s that should
   stay their default color.

   Specificity: (0,2,1,2) = 212 + `!important` for safety against any
   universal h3 rule elsewhere in the theme.

   Per-palette tuning: `var(--primary-color)` means every palette's
   accent drives the phone color. Inherits unchanged across palettes. */
body#about #about-top h3 {
  color: var(--primary-color, #A69471) !important;
}

/* (18) ABOUT-US SUB-NAV — accent rollover overlay on hover.

   Problem: Indro — "Add accent-color rollover overlay on hover (same
   pattern as block 10 homepage card-title coral hover)." The 6-link
   strip under the hero (Welcome / Our Facility / Our School /
   Instructors / Testimonials / Directions) sits on a graphite band
   with white link text at rest — no hover state visually, links just
   look static.

   DOM chain (verified):
     body#about
       > .sub-navigation.hidden-xs > .row > .container > ul > li > a
   Each `a` is 110w × 50h, inline-block, padding 14px. Li has 0 padding
   so painting the `a` bg fills the entire hit area cleanly.

   Solution: on `a:hover` / `:focus`, paint the anchor's bg coral (accent)
   with white text. 0.25s transition for smoothness. Matches block (10)'s
   pattern (card-title coral reveal on hover).

   Scoping to `body#about` so only about-us sub-nav is affected. Specificity
   (1,0,3,2) = 132 + `:hover` should beat any layout default link rule.

   Per-palette tuning: `var(--primary-color)` inherits each palette's
   accent — dark palettes swap the accent, every palette's sub-nav hover
   uses its own brand tone. White text reads on any dark or saturated
   primary; if a palette has a pale primary where white fails, override
   hover text to graphite per-palette. */
body#about .sub-navigation ul li a,
body#about .sub-navigation ul li > a {
  transition: background-color 0.25s ease, color 0.25s ease !important;
}
body#about .sub-navigation ul li a:hover,
body#about .sub-navigation ul li a:focus,
body#about .sub-navigation ul li > a:hover,
body#about .sub-navigation ul li > a:focus {
  background-color: var(--primary-color, #A69471) !important;
  color: var(--text-on-surface, #fff) !important;
}

/* (19) ABOUT-US OWNER-HEADER h2 — white on graphite.

   Problem: Indro sent two zoomed screenshots flagging "Hi, I'm Master
   Neville." and "We Share & Teach The Same Values You Teach At Home."
   — both h2 headings that render CORAL on the graphite body-bg. Indro
   wants both in WHITE for stronger readability on graphite.

   DOM (both headings):
     body#about
       > .owner-section > .owner-text-section > .owner-text
           > .owner-header > h2.visible
   The two h2s live in distinct containers ("#about-us" and
   ".share-section.about-page-blocks.custom-owner-section") but share
   the `.owner-section > .owner-header > h2` chain.

   Solution: target both via the shared selector `body#about .owner-section
   .owner-header h2`. Specificity (1,0,3,1) + `!important` beats whatever
   is currently painting them coral.

   Per-palette tuning: white reads on any graphite / dark-neutral body.
   If a future palette has a pale body bg, flip back to graphite per-
   palette. */
body#about .owner-section .owner-header h2,
body#about .owner-text-section .owner-header h2,
body#about .owner-text .owner-header h2 {
  color: var(--text-on-surface, #fff) !important;
}

/* (20) ABOUT-US .owner-section background — lift from black to dark grey.

   Problem: Indro flagged the three stacked .owner-section panels as
   reading "black" against the graphite body. Computed bg was #1B1B1B
   (rgb 27/27/27) — significantly darker than the body's graphite
   #2C2B30 (rgb 44/43/48). That near-black reads as a hole on the
   page rather than a layered panel.

   Solution: set .owner-section bg to #3A3942 — a warm dark grey ~14
   brightness units LIGHTER than graphite body. Panels now read as
   a lifted layer above the body, not a black void.

   Per-palette tuning: for palettes with a lighter body bg (e.g. white-
   body themes), this block should flip direction — panel bg should be
   DARKER than body, not lighter. Rule is "one step of separation from
   body", direction depends on whether body is dark or light. */
body#about .owner-section {
  background-color: #3A3942 !important;
}

/* (21) ABOUT-US "What Makes Us Different" overlay — lift from black.

   Problem: Indro flagged the "What Makes Apex Different From Other
   Karate & Taekwondo Schools?" section as reading pure black. Computed
   showed span#about-ata.overlay at rgb(0,0,0) opacity 1 covering the
   full 420h section. The parent section#difference.difference-block
   has a bg-image URL but the URL is empty (/upload/about_the_ata/ with
   no filename), so the overlay IS the visible panel.

   Solution: flip the overlay bg to #3A3942 — same warm dark grey used
   in block (20) for .owner-section. Keeps both "black panel" problems
   on the About page visually consistent.

   Per-palette tuning: same rule as block (20) — one step of separation
   from body, direction depends on whether body is dark or light. For
   dark bodies, panel lifts lighter; for light bodies, panel darkens. */
#about #difference #about-ata,
body#about #difference .overlay {
  background: #3A3942 !important;
}

/* (22) ABOUT-US .web-special section h2s — accent color.

   Problem: two h2s live inside section.web-special on the About page:
     h2:nth-of-type(1) = "What Is Taekwondo?"
     h2:nth-of-type(2) = "Fun, Excitement & Preparation: / Students &
                          Parents Love Martial Arts Tournaments!"
   Both render white on the graphite body bg. Indro wants both in
   accent (coral) for emphasis. The heading h2 before them ("Our Promise
   at Apex Martial Arts:") stays its existing color — only the .web-
   special section's h2s flip.

   Per-palette tuning: uses --primary-color so every palette's accent
   drives the color without per-palette rework. */
body#about section.web-special h2 {
  color: var(--primary-color, #A69471) !important;
}

/* (23) ABOUT-US "Our classes fill up quickly!" h2 — graphite on coral.

   Problem: section#register has a coral bg. The h2 "Our classes fill
   up quickly!" renders WHITE on coral, which reads thin. Indro wants
   graphite on coral for a stronger, grounded contrast.

   Per-palette tuning: hardcoded graphite here (not a var) because the
   coral section bg is the trial-form's bg (tied to --primary-color).
   For palettes where the trial-form bg is dark, this rule should flip
   back to white — overwrite in the dark-variant theme files. */
body#about section#register h2 {
  color: #2C2B30 !important;
}

/* (24) ABOUT-US "CHOOSE PROGRAM OF INTEREST" h3 — graphite on coral.

   Problem: section#register has a coral bg. The h3.head-one "CHOOSE
   PROGRAM OF INTEREST :" renders white, thin on coral. Indro wants
   graphite for a stronger, grounded contrast (same treatment as the
   h2 above it in block (23)). */
body#about section#register h3.head-one,
body#about section#register .head-one {
  color: #2C2B30 !important;
}

/* (25) ABOUT-US trial_offer_button (Children / Adults) — mirror the
   homepage .button--primary / .button--bordered-slider pair exactly.

   Problem: the two program-select buttons in section#register render
   white-on-white (invisible text). They use class .trial_offer_button
   with an inner <label class="control"> that carries the visible text.
   Indro wants them to match the homepage Children Programs / Adult
   Programs button pair:
     - Button 1 ("Children"): coral fill, white text, 10px radius
     - Button 2 ("Adults"):   white fill, graphite text, coral border,
                              10px radius
     - Both on hover: graphite fill + white text + coral border
       (end-state from block (d) .button--primary / --bordered-slider)

   Structure: .select-program > .check-select.trialButton:nth-of-type(1)
   = Children; :nth-of-type(2) = Adults. The two .check-select wrappers
   each contain one a.trial_offer_button.

   Also flips the inner label font-family OFF TradeGothicW01-BoldCn20
   (a condensed bold used only on these buttons) ONTO Instrument Sans
   to match the site-wide body font.

   Per-palette tuning: uses --primary-color / hardcoded graphite. For
   dark-variant palettes where #register bg flips off coral, revisit
   the Button 2 border and text colors. */

/* Default structure: radius + transition + font on both buttons */
body#about section#register .trial_offer_button {
  border-radius: 10px !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
body#about section#register .trial_offer_button .control-group,
body#about section#register .trial_offer_button label.control {
  background-color: transparent !important;
  font-family: "Instrument Sans", sans-serif !important;
  transition: color 0.2s ease !important;
}

/* Button 1 ("Children") — graphite fill, white text. Uses graphite
   (NOT coral) because the #register section bg is coral — a coral
   button would vanish into the bg. This is the per-palette adaptation
   of .button--primary for coral-on-coral sections: default rest state
   = the block (d) HOVER end-state (graphite + white). */
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button {
  background-color: var(--surface-base, #2C2B30) !important;
  color: #fff !important;
  border: 2px solid transparent !important;
}
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button .control-group,
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button label.control {
  color: #fff !important;
}

/* Button 2 ("Adults") — bordered-slider: white fill, graphite text, coral border */
body#about section#register .select-program .check-select.trialButton:nth-of-type(2) .trial_offer_button {
  background-color: #fff !important;
  color: #2C2B30 !important;
  border: 2px solid var(--primary-color, #A69471) !important;
}
body#about section#register .select-program .check-select.trialButton:nth-of-type(2) .trial_offer_button .control-group,
body#about section#register .select-program .check-select.trialButton:nth-of-type(2) .trial_offer_button label.control {
  color: #2C2B30 !important;
}

/* Shared hover end-state: graphite fill + white text + coral border.
   Specificity note: each selector must match the depth of the per-button
   default rules above (5 classes including :nth-of-type) — otherwise the
   default :nth-of-type rule outranks the hover rule and no flip shows. */
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:hover,
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:focus,
body#about section#register .select-program .check-select.trialButton:nth-of-type(2) .trial_offer_button:hover,
body#about section#register .select-program .check-select.trialButton:nth-of-type(2) .trial_offer_button:focus {
  background-color: var(--surface-base, #2C2B30) !important;
  color: #fff !important;
  border-color: var(--primary-color, #A69471) !important;
}
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:hover .control-group,
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:hover label.control,
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:focus .control-group,
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:focus label.control,
body#about section#register .select-program .check-select.trialButton:nth-of-type(2) .trial_offer_button:hover .control-group,
body#about section#register .select-program .check-select.trialButton:nth-of-type(2) .trial_offer_button:hover label.control,
body#about section#register .select-program .check-select.trialButton:nth-of-type(2) .trial_offer_button:focus .control-group,
body#about section#register .select-program .check-select.trialButton:nth-of-type(2) .trial_offer_button:focus label.control {
  color: #fff !important;
}

/* Children hover override: white fill + graphite text + coral border.
   Visually swaps Children into the Adults-at-rest treatment (clean
   pair-swap animation). Chosen over a coral hover because coral hover
   on a coral #register bg reads as "button vanishes into bg" — white
   hover gives a sharp, grounded flip. */
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:hover,
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:focus {
  background-color: #fff !important;
  color: #2C2B30 !important;
  border-color: var(--primary-color, #A69471) !important;
}
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:hover .control-group,
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:hover label.control,
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:focus .control-group,
body#about section#register .select-program .check-select.trialButton:nth-of-type(1) .trial_offer_button:focus label.control {
  color: #2C2B30 !important;
}

/* (26) ABOUT-US #stick-nav z-index — keep sub-nav above bottom form.

   Problem: the bottom contact form's wrapper (.outer-form) has
   z-index: 2 in the base template. The About-page sub-nav (#stick-nav,
   the sticky strip with Welcome / Our Facility / Our School / ...)
   also has z-index: 2. Same z + later DOM order = form paints OVER
   the sub-nav when scrolled. Indro's screenshot shows the form panel
   bleeding across "Welcome / Our Facility / Our School" at the top.

   Solution: raise #stick-nav to z-index 100 — well above the form
   (z 2) but still below the main fixed-top navbar (z 9999). Sub-nav
   stays stuck at top and page content scrolls behind it.

   Per-palette tuning: none — z-index is positional, not chromatic. */
body#about #stick-nav,
body#about header#stick-nav {
  z-index: 100 !important;
}

/* Navbar CTA "Try a Class for FREE!" — match Children Programs exactly.
   Clean coral fill, no visible ring at rest. CTA system from block (d)
   already paints it primary + transparent border + hover-invert.
   No ::before ring (Indro: should be identical to .button--primary). */

/* (PG-7) PROGRAM-PAGE #new_headline BAND → WHITE.

   PAGE-CATEGORY SCOPED — affects all program pages (#new_headline only
   exists on /programs/* templates: little-ninjas, teen-martial-arts,
   adult-martial-arts, krav-maga, birthday-parties, summer-camp, plus
   children-martial-arts/adult-programs/just-4-kids hubs).
   Homepage NOT affected.

   Problem: between the two coral diagonal separators (top-svg + bottom-svg
   inside #new_headline), the band reads as graphite-on-graphite — body bg
   shows through because #new_headline has no own paint. The Redeem /
   Schedule / Begin titles inside it are invisible (graphite text on
   graphite body bg).

   Once Change F (block PG-8) extends the hero image down past the first
   coral diagonal, the kid's lower body lands in this band — graphite
   creates a black void; white reads as a stage-like platform that pairs
   with the coral diagonals above and below. Live reference (production
   summer-camp page) uses light theme so this band is white by virtue of
   body bg; for our dark theme we paint it explicitly.

   The two SVG separators inside #new_headline still paint their coral
   gradient triangles — only the section bg behind them flips. The SVG's
   transparent corners now show white instead of body graphite.

   DOM:
     #new_headline.new_headline_section
       > .container
         > .program-section-separator.top-svg > svg (coral triangle)
         > .row.heading_section
             > .col-sm-4.single_box × 3 (Redeem / Schedule / Begin)
                 > h3.title + p.desc
         > .program-section-separator.bottom-svg > svg (coral triangle) */
body #new_headline,
body section#new_headline,
body section#new_headline.new_headline_section {
  background-color: transparent !important;
  position: relative;
  /* PG-14: bumped from z-index:1 to z-index:2 so the bot-svg separator paints
     ABOVE the opening-paragraph img in the next section. PG-11 lifts that img
     with margin-top:-40px + z-index:1; at z:1 equal to this section, the later
     DOM sibling (img) was winning the tie and painting over the coral wedge. */
  z-index: 2;
}
/* (PG-9) PROGRAM-PAGE #new_headline WHITE PAINTED VIA ::before, ONLY BETWEEN
   THE TWO CORAL TRIANGLE SEPARATORS — NOT EDGE-TO-EDGE.

   PAGE-CATEGORY SCOPED — same scope as (PG-7).

   Problem with original (PG-7) edge-to-edge white: the section bg painted white
   across the FULL height of #new_headline, including behind the top-svg and
   bot-svg separator bboxes. Each separator SVG is a coral triangle with
   transparent corners; with white behind, the corners read as solid white
   chunks framing the coral wedge. Net effect = wedges sit on a flat white slab,
   killing the "diagonal cuts across the photo" effect from the live reference.

   Even worse: the white slab covers the kid image (PG-8) where the image
   extends past the top diagonal — kid is clipped at a square edge at the top
   of #new_headline (y=750) instead of emerging from behind the coral wedge.

   Solution: section bg → transparent (above), and paint the white via a
   ::before pseudo whose top:40 / bottom:40 inset clears the SVG bboxes
   (each separator SVG renders at 40px height). White only paints between
   the two separators. Above the top-svg's bbox: transparent — kid image
   (program-main beneath, in body stacking) shows through where coral isn't,
   coral paints where it is. Below the bot-svg's bbox: transparent — next
   section paints in.

   Stacking note: ::before z-index:-1 keeps it BEHIND .heading_section (titles +
   descs) but still WITHIN #new_headline's stacking context (z:1 in body). So
   the white still paints above program-main (z:auto in body, even with
   isolation:isolate from PG-1 — program-main is not z-promoted, just isolated).
   Result: kid's silhouette is visible up to the top of the white pseudo (doc
   y=790) — i.e., kid emerges through the coral diagonal area (y=750-790) and
   is then covered by the white "stage" below. Same metaphor PG-8 originally
   targeted, now actually rendering. */
body section#new_headline.new_headline_section::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 0;
  right: 0;
  background-color: var(--surface-card, #fff);
  z-index: -1;
}
/* Redeem / Schedule / Begin titles + descriptions → graphite-on-white */
body #new_headline .heading_section .single_box .title,
body #new_headline .heading_section .single_box h3.title,
body #new_headline .heading_section .single_box .desc,
body #new_headline .heading_section .single_box p.desc {
  color: var(--text-on-card, #2C2B30) !important;
}

/* (PG-18) PROGRAM-PAGE #new_headline MOBILE OVERRIDE (viewport ≤ 767px).

   PAGE-CATEGORY SCOPED — same scope as PG-7/PG-9.

   Problem: `layout_assests_new_layout_v1_css_development_new_layout.css`
   paints a mobile-only look for `#new_headline` at `max-width: 767px` that
   was never themed:
     - `.new_headline_section::before { background: #ffb1ad }` (pale pink)
     - `.new_headline_section::after { background: #ffb7cf }` (lighter pink)
     - `.new_headline_section .heading_section { background: linear-gradient(
         to right, #fd5d5e, #fb3572); }` (red-to-magenta)
     - `.single_box .title { color: #fff }` + `.desc { color: #fff }`
     - `.single_box.middle_box { border-top/bottom: 2px solid #fc8489 }`
   These are CMS-hardcoded raspberry colors that clash with every theme
   palette. On mobile the row reads as a pink slab, not the desktop's
   coral-wedge + white-stage composition.

   Fix: at `max-width: 767px`, override all of the above with theme tokens.
   Desktop PG-9 already uses `::before` as the white stage — extend that
   down to mobile via the same token. ::after is a mobile-only secondary
   diagonal — paint it with primary-color so it reads as a coral accent
   rather than a pink band. `.heading_section` bg → transparent (desktop
   parity — heading sits directly on the PG-9 white pseudo). Titles + desc
   → graphite (readable on white). Middle-box divider border → primary so
   it reads as a coral separator rather than pink. */
@media only screen and (max-width: 767px) {
  body .new_headline_section::before,
  body #new_headline.new_headline_section::before {
    background: var(--surface-card, #fff) !important;
  }
  body .new_headline_section::after,
  body #new_headline.new_headline_section::after {
    background: var(--primary-color, #A69471) !important;
  }
  body .new_headline_section .heading_section,
  body #new_headline .heading_section {
    background: transparent !important;
  }
  body .new_headline_section .single_box .title,
  body .new_headline_section .single_box h3.title,
  body .new_headline_section .single_box .desc,
  body .new_headline_section .single_box p.desc,
  body #new_headline .single_box .title,
  body #new_headline .single_box .desc {
    color: var(--text-on-card, #2C2B30) !important;
  }
  body .new_headline_section .single_box.middle_box,
  body #new_headline .single_box.middle_box {
    border-top-color: var(--primary-color, #A69471) !important;
    border-bottom-color: var(--primary-color, #A69471) !important;
  }
}

/* (PG-8) PROGRAM-PAGE HERO IMAGE — extend down past the coral diagonal.

   PAGE-CATEGORY SCOPED — affects only `.program-header` hero sections
   (actual program pages: little-ninjas, teen-martial-arts, adult-martial-arts,
   krav-maga, birthday-parties, summer-camp). Category hubs lack `.program-header`
   on `#program-main`, so they're untouched. Homepage NOT affected.

   Problem: layout sizes the hero image at `height: 100%` of `.left-column`
   (parent = 500px) capped at `max-height: 550px !important`, with inline
   `style="top:110px"` on the <img>. Net result: image 500h positioned 110px
   from hero top → bottom edge sits ~100px ABOVE the coral diagonal
   separator (top-svg in #new_headline). The kid floats with dead space below
   the feet, then a hard graphite-to-coral transition.

   Live reference (production summer-camp, light theme) uses larger image
   sized to fill the hero with feet just above the diagonal. Indro wants the
   dark variant to go further: image's lower ~17–20% crosses the diagonal,
   "feet behind the coral band" effect — figure emerges from behind the band.

   Solution: bump `.left-column` height 500 → 700 so the image's
   `height: 100%` resolves to 700; bump `max-height` / `max-width` from
   550 → 700; nudge `top` from inline 110 → 130 for slightly more breathing
   room at the head. Hero overall height stays at 750 (right-column with
   form is still the tallest flex child); only the left-column grows
   downward. Image bottom lands ~120px past the diagonal.

   Specificity: inline `style="top:110px"` on the <img> = (1,0,0,0). CSS rule
   with `!important` promotes to author-important cascade layer, which beats
   inline non-important regardless of selector spec.

   Per-palette tuning: none. The values are pixel-positional and apply to
   any palette using this hero structure. The "image extends past diagonal"
   visual relies on the diagonal being at z-index above the image's lower
   portion, which holds in any palette since the SVG is opaque coral. */
body #program-main.program-trial-form.program-header .left-column,
body section#program-main.program-trial-form.program-header .left-column {
  height: 700px !important;
}
body #program-main.program-trial-form.program-header .left-column img,
body section#program-main.program-trial-form.program-header .left-column img {
  top: 130px !important;
  max-height: 700px !important;
  max-width: 700px !important;
  height: 100% !important;
}

/* (PG-10) PROGRAM-PAGE OPENING-PARAGRAPH IMAGE — bg matches .owner-section.

   PAGE-SCOPED to PROGRAM PAGES ONLY via `body.program` ancestor selector.
   Homepage (body#homepage) and About-us (body#about) ALSO have .owner-section
   .owner-image in the DOM but those serve a different role and must not get
   this treatment.

   Naming note: layout uses the class .owner-image which is a misnomer ported
   from an older template. On program pages this is the "opening-paragraph
   image" — the photo that sits beside the parent-letter / opening copy
   (Mom & Dad on little-ninjas, "We know how busy life can be" on adult, etc.).
   On homepage / about-us .owner-image plays a different role and keeps its
   layout defaults.

   Problem: layout's `dojocss.css` paints `.owner-section { background: rgb(27,27,27) }`.
   The right-column (opening-paragraph text) inherits that dark bg. The left-
   column `.owner-image` houses the photo BUT carries an inline
   `style="background:rgb(255,255,255) !important"` on the element itself
   (only on some pages — others have transparent inline). When the photo's
   natural rect doesn't fill .owner-image's column box, white slivers show
   on the photo's edges — reads as a white-bordered photo glued onto a dark
   panel rather than a seamless edge-to-edge composition.

   Indro's rule: photo container bg ALWAYS matches the right-column bg so the
   seam is invisible across all program pages. Alternative — zoom the photo
   to fill — would over-crop the framing.

   Specificity: inline `style="X !important"` is unbeatable by selectors at
   any spec (cf. SKILL.md / block 8 gotcha). Escape hatch is a pseudo-element
   on the same parent. The ::before paints over the inline white, in-flow
   children (img, slideReveal-overlay span) paint above the ::before via
   normal stacking (positioned ::before with z:0 + static children paint in
   document order; .slideReveal-overlay's existing z:2 still wins; img gets
   z:1 in PG-11). On pages where inline bg is already transparent, the ::before
   is a harmless no-op visually (both layers are dark).

   Color value: hardcoded rgb(27,27,27) to match what layout paints on
   .owner-section. If a future theme overrides .owner-section's bg, this
   rule needs updating too. Documented as a coupled pair. */
body.program .owner-section .owner-image::before,
body.program section.owner-section .owner-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(27, 27, 27);
  z-index: 0;
  pointer-events: none;
}
/* (PG-11) PROGRAM-PAGE OPENING-PARAGRAPH IMAGE — enlarge, anchor right,
   extend up behind the bot-svg separator so the photo visually continues
   from the hero kid photo above the fold (right-edge alignment).

   PAGE-SCOPED to PROGRAM PAGES ONLY via `body.program` ancestor selector
   (same scope as PG-10). Does NOT affect homepage or About-us .owner-image.

   Goals:
   - Photo right edge aligns with the hero kid photo's right edge above the fold,
     so scrolling from hero into the opening-paragraph section gives a continuous
     vertical right edge.
   - Photo is slightly larger (fills container height edge-to-edge instead of
     sitting inside its layout padding).
   - Photo extends UP behind the new_headline bot-svg separator (margin-top
     negative) so the coral diagonal cuts across the photo's top, mirroring the
     hero kid emerging from behind the top-svg.

   Implementation:
   - margin-left: auto + display: block → shifts photo to the right edge of
     .owner-image container (img is the only static child so margin-left:auto
     pushes it).
   - height: 100% with width auto → photo fills container height; aspect ratio
     keeps it proportional (natural ratio ~1.5:1).
   - max-width: 100% → removes the layout's 80% cap so the photo can fill more.
   - padding: 0 + top: 0 → strips the layout's 1.5rem padding + 45px top offset
     that were creating the dark inset around the photo.
   - margin-top: -40px → pulls photo up 40px so its top edge overlaps the
     bot-svg of #new_headline (new_headline's bot-svg occupies the bottom 40px
     of that section; .owner-section already has margin-top: -39px from layout
     to start beneath new_headline). Photo now extends behind the coral wedge.

   Also lifts the photo above the PG-10 ::before pseudo (z-index: 1) since
   static positioning would put it below the positioned pseudo. */
body.program .owner-section .owner-image > img,
body.program section.owner-section .owner-image > img {
  position: relative !important;
  z-index: 1;
  display: block !important;
  /* PG-11 revised 2026-04-20 night:
     - width:100% → image scales responsively with viewport (was width:auto,
       tied to container height → didn't resize on browser shrink).
     - height: calc(100% + 40px) → fills container AND compensates the
       margin-top:-40 that extends the photo up behind the coral wedge.
     - object-fit: cover → crops excess rather than stretching aspect.
     - object-position: center top → when cropping happens, keep the TOP
       of the photo visible (subjects' heads/faces). Bottom crops off as
       viewport narrows — explicit user preference (same rule as the
       toggle-block family photo). */
  width: 100% !important;
  height: calc(100% + 40px) !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: -40px 0 0 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  top: 0 !important;
}


/* ============================================================================
 * SEMANTIC REFACTOR COMPLETION (2026-04-20)
 * Rules that override layout dark-surface paints to use semantic tokens so
 * both dark and light themes cascade correctly.
 * ============================================================================ */

/* Owner-section bg (layout paints #1B1B1B) — route to --surface-base so it
   follows the theme's body surface choice. */
body .owner-section,
body#homepage .owner-section,
body#about .owner-section,
body.program .owner-section,
body.program section.owner-section {
  background-color: var(--surface-base, #2C2B30) !important;
}

/* Footer stays DARK as contrast band in both themes — force text to
   --text-on-band so it reads white regardless of --text-on-surface flip. */
.double-footer,
.double-footer h1,
.double-footer h2,
.double-footer h3,
.double-footer h4,
.double-footer h5,
.double-footer h6,
.double-footer p,
.double-footer li,
.double-footer a,
.double-footer span,
.double-footer div,
.double-footer .footer-title,
.double-footer .footer-links,
.double-footer .dropdown,
.double-footer .dropdown li,
.double-footer .dropdown li a {
  color: var(--text-on-band, #FFFFFF) !important;
}

/* Homepage slider hero — layout CSS sometimes paints dark; route to semantic */
body .homepage_slider,
body .homepage_slider.background-wrapper,
body #slider-text {
  background-color: var(--surface-base, #2C2B30) !important;
}

/* ============================================================================
 * BOTTOM FOOTER HORIZONTAL ALIGNMENT (Indro flagged 2026-04-21)
 * ----------------------------------------------------------------------------
 * At ≥1320px the `.double-footer .bottom-footer` flips to
 * `flex-direction: row; justify-content: space-between`. The 3 children —
 * `.copyright`, `.footer-links`, `.footer-social-icons` — each carry
 * `margin-bottom: 12px` from the mobile/column layout. In row layout,
 * flex `align-items: center` centers the MARGIN BOX, so the mismatched
 * bottom margins shift the content centers by a few pixels → Privacy /
 * Terms sit ~7px higher than the social icon row.
 *
 * Fix: zero out bottom margins on the three children inside the row layout
 * so align-items:center lines them up to the same visual baseline. Shared
 * between both themes since the bug lives in the base dojocss layout.
 * ========================================================================== */
@media (min-width: 1320px) {
  body .double-footer .bottom-footer > .footer-social-icons,
  body .double-footer .bottom-footer > .footer-links,
  body .double-footer .bottom-footer > .copyright {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ============================================================================
 * COOKIE DISCLAIMER BAR — condensed type + coral accent link + compact button
 * ----------------------------------------------------------------------------
 * Kanishk's `.cdbar` top-of-page GDPR bar ships at 15px/23px which wraps the
 * two-sentence notice to 3+ lines and dominates the viewport on load. The
 * Close pill is also tall (33px) for a compact notice bar. Indro's spec:
 * "small and condensed just big enough to be read, CLICK HERE in accent color,
 *  Accept pill less tall."
 *
 * Applied in the base (Dark V1) so both themes inherit identically.
 *
 * Link-color cascade: the site-wide anchor-sweep at line 1178 paints every
 * <a> with `var(--text-on-surface) !important` at spec 0,10,2. On Light V1
 * that's graphite (invisible on the black bar); on Dark V1 white (readable
 * but off-brand). Our rule uses 12 :not() pseudos → spec 0,13,3 beats 0,10,2
 * so coral wins on both themes.
 * ========================================================================== */
body .cdbar.dark.top .cdbar-text {
  font-size: 12px !important;
  line-height: 16px !important;
  padding-top: 8px !important;
  letter-spacing: 0.01em !important;
}
body .cdbar.dark.top .cdbar-text * {
  font-size: 12px !important;
  line-height: 16px !important;
}
body .cdbar.dark.top .cdbar-text a:not(.a):not(.b):not(.c):not(.d):not(.e):not(.f):not(.g):not(.h):not(.i):not(.j):not(.k):not(.l),
body .cdbar.dark.top .cdbar-text a:not(.a):not(.b):not(.c):not(.d):not(.e):not(.f):not(.g):not(.h):not(.i):not(.j):not(.k):not(.l):hover,
body .cdbar.dark.top .cdbar-text a:not(.a):not(.b):not(.c):not(.d):not(.e):not(.f):not(.g):not(.h):not(.i):not(.j):not(.k):not(.l):focus,
body .cdbar.dark.top .cdbar-text a:not(.a):not(.b):not(.c):not(.d):not(.e):not(.f):not(.g):not(.h):not(.i):not(.j):not(.k):not(.l):visited {
  color: var(--primary-color, #A69471) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}
body .cdbar.dark.top .cdbar-buttons {
  padding-bottom: 8px !important;
  padding-top: 2px !important;
}
/* Compact Close/Accept pill — was 33px tall (padding 5/10 + 16px font + 22.8
   line-height). Drop to ~22px with tighter padding + smaller font. */
body .cdbar.dark.top .cdbar-buttons .cdbtn,
body .cdbar.dark.top .cdbar-buttons .cdbtn.cookie,
body .cdbar.dark.top .cdbar-buttons .cdbar-cookie-accept,
body .cdbar.dark.top #cookieAcceptBtn {
  padding: 3px 16px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 999px;
}


/* ============================================================================
 * TEMP — HIDE COOKIE DISCLAIMER BAR UNTIL READY TO PUBLISH
 * ----------------------------------------------------------------------------
 * Indro 2026-04-21: "it is very annoying for it to pop up every time". Hidden
 * via display:none on both the bar and its wrapper ID. Delete this block when
 * we're ready to re-enable the cookie bar for launch.
 * ========================================================================== */
body #jQueryCookieDisclaimer,
body .cdbar,
body .cdbar.dark,
body .cdbar.dark.top {
  display: none !important;
}


/* ============================================================================
 * HOMEPAGE VIDEO HERO — graphite overlay on dark theme (matches jkdbroward
 * overlay opacity 0.84, swapped to graphite so dark hero shows video through)
 * ----------------------------------------------------------------------------
 * The CMS renders an inline style="background-color:rgba(255,255,255,0.84)"
 * on .homepage_slider .overlay — 84% white wash that works on light hero
 * themes but would bury the video on graphite-bodied dark themes. This rule
 * wins (CSS !important beats inline non-!important) and applies a 84%
 * graphite wash so video brightness is tamed identically but the theme
 * reads dark.
 * ========================================================================== */
body .homepage_slider .overlay,
body .homepage_slider.background-wrapper .overlay {
  background-color: rgba(44, 43, 48, 0.84) !important;
  background-image: none !important;
}

/* ============================================================================
 * WCAG AA CONTRAST PATCH — 2026-04-21
 * ----------------------------------------------------------------------------
 * Driven by Chrome a11y crawler report. Two token levers:
 *   --primary-text         = accent color chosen to pass 4.5:1 on current bg
 *                            (dark variant on dark body, darker variant on
 *                             white/colored body — overridden in Light vN)
 *   --global-button-color  = text color ON primary-bg buttons (graphite on
 *                            light-accent themes, white on dark-accent)
 *   --global-button-bg     = primary button bg — darkened for V1 and V3 so
 *                            white text passes WCAG without flipping to
 *                            graphite (brand preservation)
 *
 * One selector sweep covers: hero CTAs, hero subtitle, program-card subtitles,
 * mission-statement accent, "You Belong Here" body/strong, submit button,
 * Find Location heading, nav modern-btn.
 * ========================================================================== */

/* Button text color — forces --global-button-color everywhere it matters */
body .button.button--primary,
body .button.button--primary *,
body .bg-primary.submit-button,
body .bg-primary.submit-button.contactFormSubmit,
body .submit-button.contactFormSubmit,
body .modern-btn,
body .modern-btn a,
body div.modern-btn,
body div.modern-btn a,
body .bg-primary .heading h2 {
  color: var(--global-button-color, #FFFFFF) !important;
}

/* Button background — respects --global-button-bg (darkened on V1/V3) */
body .button.button--primary,
body .bg-primary.submit-button,
body .bg-primary.submit-button.contactFormSubmit {
  background-color: var(--global-button-bg, var(--primary-color, currentColor)) !important;
}

/* Accent-colored TEXT on body/white — uses readable primary-text variant */
body .homepage_slider .text-secondary,
body .homepage_slider .text-secondary *,
body .homepage_slider > .container p,
body .mission_statement span,
body .card-title-container .card-title a p.text-primary,
body .card-title-container .card-title p.text-primary,
body p.text-primary {
  color: var(--primary-text, var(--primary-color, currentColor)) !important;
}

/* "You Belong Here" / tilt-bg section — white text fails on light accents.
   Mirror button contrast logic: use --global-button-color (graphite on light
   accents, white on dark accents). */
body .bg-gray.tilt-bg .video-content .text-content .content-box p,
body .bg-gray.tilt-bg .video-content .text-content .content-box p *,
body .bg-gray.tilt-bg .video-content .text-content .content-box p strong,
body .large_video.tilt-bg .video-content p,
body .large_video.tilt-bg .video-content p strong {
  color: var(--global-button-color, #FFFFFF) !important;
}

/* Hover state restores white (graphite overlay slides in — white-on-graphite) */
body .modern-btn:hover,
body div.modern-btn:hover,
body .modern-btn:hover a,
body div.modern-btn:hover a {
  color: #FFFFFF !important;
}

/* Primary-bg section text — graphite */
body .bg-primary,
body .bg-primary h1, body .bg-primary h2, body .bg-primary h3,
body .bg-primary h4, body .bg-primary h5, body .bg-primary h6,
body .bg-primary p, body .bg-primary li, body .bg-primary span,
body .bg-primary strong, body .bg-primary em, body .bg-primary small,
body .bg-primary label,

body #find-location,
body #find-location h1, body #find-location h2, body #find-location h3,
body #find-location h4, body #find-location p, body #find-location span,
body #find-location a,

body #about-mission-statement,
body #about-mission-statement h1, body #about-mission-statement h2,
body #about-mission-statement h3, body #about-mission-statement h4,
body #about-mission-statement p, body #about-mission-statement span,
body #about-mission-statement strong, body #about-mission-statement li,

body #web-offers .left-block,
body #web-offers .left-block h1, body #web-offers .left-block h2,
body #web-offers .left-block h3, body #web-offers .left-block h4,
body #web-offers .left-block p, body #web-offers .left-block span,
body #web-offers .left-block strong, body #web-offers .left-block li,
body #web-offers .left-block small, body #web-offers .left-block label,

body div.about-alt-bg.static_detail_page,
body div.about-alt-bg.static_detail_page h1,
body div.about-alt-bg.static_detail_page h2,
body div.about-alt-bg.static_detail_page h3,
body div.about-alt-bg.static_detail_page h4,
body div.about-alt-bg.static_detail_page p,
body div.about-alt-bg.static_detail_page span,
body div.about-alt-bg.static_detail_page strong,
body div.about-alt-bg.static_detail_page li,

body .trial-form-about-footer,
body .trial-form-about-footer h1, body .trial-form-about-footer h2,
body .trial-form-about-footer h3, body .trial-form-about-footer h4,
body .trial-form-about-footer p, body .trial-form-about-footer span,
body .trial-form-about-footer strong, body .trial-form-about-footer li,
body .trial-form-about-footer label,

body .large_video.tilt-bg,
body .large_video.tilt-bg h1, body .large_video.tilt-bg h2,
body .large_video.tilt-bg h3, body .large_video.tilt-bg h4,
body .large_video.tilt-bg p, body .large_video.tilt-bg span,
body .large_video .bg-gray.tilt-bg,
body .large_video .bg-gray.tilt-bg h1, body .large_video .bg-gray.tilt-bg h2,
body .large_video .bg-gray.tilt-bg h3, body .large_video .bg-gray.tilt-bg h4,
body .large_video .bg-gray.tilt-bg p, body .large_video .bg-gray.tilt-bg span,

body #life-skills.ways .col-sm-4 h3,
body #life-skills.ways .col-sm-4 h3 *,

body .badge.badge-primary,
body .badge.badge-primary *,

body .follow-btn,
body .follow-btn *,

body .custom-step-section .card-title-container .icon,
body .custom-step-section .card-title-container .icon *,

body #staff .staff-block h4,
body #staff .staff-block li h4,
body #staff .staff-block h4 *,
body #staff .staff-block li h4 * {
  color: #111013 !important;
}

/* ============================================================================
 * THEME 12 — BLACKGOLD PRIMARY-BG CONTRAST PASS  (text = WHITE)
 * ----------------------------------------------------------------------------
 * Universal rule for this theme: wherever --primary-color paints a background,
 * foreground TEXT is white. Accent is dark enough that white text passes WCAG.
 *
 * Scoped to headings + paragraph-level text (h1–h6, p, li, span, strong, em,
 * small, label). Nested form inputs, white cards, and always-graphite buttons
 * are intentionally NOT wildcarded so they keep their own text colors.
 * ============================================================================ */
body .bg-primary,
body .bg-primary h1, body .bg-primary h2, body .bg-primary h3,
body .bg-primary h4, body .bg-primary h5, body .bg-primary h6,
body .bg-primary p, body .bg-primary li, body .bg-primary span,
body .bg-primary strong, body .bg-primary em, body .bg-primary small,
body .bg-primary label,

body #find-location,
body #find-location h1, body #find-location h2, body #find-location h3,
body #find-location h4, body #find-location p, body #find-location span,
body #find-location a,

body #about-mission-statement,
body #about-mission-statement h1, body #about-mission-statement h2,
body #about-mission-statement h3, body #about-mission-statement h4,
body #about-mission-statement p, body #about-mission-statement span,
body #about-mission-statement strong, body #about-mission-statement li,

body #web-offers .left-block,
body #web-offers .left-block h1, body #web-offers .left-block h2,
body #web-offers .left-block h3, body #web-offers .left-block h4,
body #web-offers .left-block p, body #web-offers .left-block span,
body #web-offers .left-block strong, body #web-offers .left-block li,
body #web-offers .left-block small, body #web-offers .left-block label,

body div.about-alt-bg.static_detail_page,
body div.about-alt-bg.static_detail_page h1,
body div.about-alt-bg.static_detail_page h2,
body div.about-alt-bg.static_detail_page h3,
body div.about-alt-bg.static_detail_page h4,
body div.about-alt-bg.static_detail_page p,
body div.about-alt-bg.static_detail_page span,
body div.about-alt-bg.static_detail_page strong,
body div.about-alt-bg.static_detail_page li,

body .trial-form-about-footer,
body .trial-form-about-footer h1, body .trial-form-about-footer h2,
body .trial-form-about-footer h3, body .trial-form-about-footer h4,
body .trial-form-about-footer p, body .trial-form-about-footer span,
body .trial-form-about-footer strong, body .trial-form-about-footer li,
body .trial-form-about-footer label,

body .large_video.tilt-bg,
body .large_video.tilt-bg h1, body .large_video.tilt-bg h2,
body .large_video.tilt-bg h3, body .large_video.tilt-bg h4,
body .large_video.tilt-bg p, body .large_video.tilt-bg span,
body .large_video .bg-gray.tilt-bg,
body .large_video .bg-gray.tilt-bg h1, body .large_video .bg-gray.tilt-bg h2,
body .large_video .bg-gray.tilt-bg h3, body .large_video .bg-gray.tilt-bg h4,
body .large_video .bg-gray.tilt-bg p, body .large_video .bg-gray.tilt-bg span,

body #life-skills.ways .col-sm-4 h3,
body #life-skills.ways .col-sm-4 h3 *,

body .badge.badge-primary,
body .badge.badge-primary *,

body .follow-btn,
body .follow-btn *,

body .custom-step-section .card-title-container .icon,
body .custom-step-section .card-title-container .icon *,

body #staff .staff-block h4,
body #staff .staff-block li h4,
body #staff .staff-block h4 *,
body #staff .staff-block li h4 * {
  color: #FFFFFF !important;
}

/* ============================================================================
 * (TO-BTN) TRIAL-OFFER #web-offers card CTA buttons — rest + hover states.
 * ----------------------------------------------------------------------------
 * Problem: the two "VIEW PROGRAMS" buttons inside #web-offers use the base
 * .btn-animate.white-btn class. The base renders them white-fill, and the
 * label's default color is inherited. On the left card (.left-block, which
 * we paint gold via the rule at line 222), the contrast-pass rule earlier
 * in this file is meant to force child text to graphite, but it misses the
 * .btn-animate .label.control path — so the label stays whatever the base
 * template set (white), producing white-on-white. On hover the base also
 * flips bg to white, so the adults button gets the same invisibility issue.
 *
 * Solution: scope to body#trial-offer-page and set an explicit rest + hover
 * treatment for both cards. Rest = graphite fill, white text, gold border
 * (readable on both gold and graphite container backgrounds). Hover = gold
 * fill, white text, graphite border (inverts cleanly, signals affordance).
 *
 * Per-palette tuning: swap --primary-color and --surface-base for client
 * palette swaps. Hardcoded fallbacks kept for BlackGold v12.
 * ============================================================================ */
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate.white-btn {
  background-color: #111013 !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 10px !important;
  text-transform: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate label.control,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate label.control * {
  text-transform: none !important;
}
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate .control-group,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate label.control,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate .control-group *,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate label.control * {
  color: #FFFFFF !important;
  background-color: transparent !important;
}
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate:hover,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate:focus,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate.white-btn:hover,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate.white-btn:focus {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  box-shadow: none !important;
}
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate:hover .control-group,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate:hover label.control,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate:focus .control-group,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate:focus label.control,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate:hover .control-group *,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate:hover label.control *,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate:focus .control-group *,
body#trial-offer-page #web-offers .check-select.trialButton .btn-animate:focus label.control * {
  color: #111013 !important;
  background-color: transparent !important;
}

/* ============================================================================
 * (TO-HERO) TRIAL-OFFER top-section hero — white background, gold H2, black H3.
 * ----------------------------------------------------------------------------
 * Problem: base template paints .top-section near-black via an .overlay span.
 * For Confidence Dojo, Indro wants the hero to read as a clean white band
 * with the H2 in brand gold and the subhead in plain black — resets the
 * page's visual tone from "aggressive promo" to "calm invitation."
 * Inline <span style="color:#…"> in the H2/H3 markup needs !important to beat.
 * ============================================================================ */
body#trial-offer-page section.top-section {
  background: #FFFFFF !important;
}
body#trial-offer-page section.top-section .overlay,
body#trial-offer-page section.top-section > .overlay {
  background: transparent !important;
  display: none !important;
}
body#trial-offer-page section.top-section h2,
body#trial-offer-page section.top-section h2 span,
body#trial-offer-page section.top-section .top-block h2,
body#trial-offer-page section.top-section .top-block h2 span {
  color: var(--primary-color, #A69471) !important;
}
body#trial-offer-page section.top-section h3,
body#trial-offer-page section.top-section h3 span,
body#trial-offer-page section.top-section .top-block h3,
body#trial-offer-page section.top-section .top-block h3 span {
  color: #111013 !important;
}

/* ============================================================================
 * (TO-PHOTO) TRIAL-OFFER owner photo — right-justified, 2× zoom, top anchored.
 * ----------------------------------------------------------------------------
 * Problem: need Grant's portrait zoomed 2× inside the existing owner-image
 * column WITHOUT growing the row height. Prior attempt added width/height
 * 100% + cleared padding, which enlarged the image's layout size before the
 * transform ran — net effect was a taller row, not just a zoomed photo.
 *
 * Solution (minimal): don't touch the image's layout size. Keep the base
 * template's padding/top-offset intact. Only two changes:
 *   1. overflow: hidden on the container so the scaled image clips cleanly.
 *   2. transform: scale(2) + transform-origin: top right on the image so
 *      the content scales outward from the top-right anchor. object-position
 *      top right ensures the right-justified crop when transform is ignored
 *      (older browsers, print).
 *
 * Row height stays the same because transform doesn't participate in layout.
 * Responsive: scoped to ≥ 767px so mobile stacks with the base default.
 * ============================================================================ */
@media (min-width: 767px) {
  body#trial-offer-page .owner-section .owner-image {
    overflow: hidden !important;
  }
  body#trial-offer-page .owner-section .owner-image img,
  body#trial-offer-page .owner-section .owner-image #reveal-image {
    transform: scale(2);
    transform-origin: top right;
    object-position: top right !important;
  }
}

/* ============================================================================
 * (TO-PULLQUOTE) TRIAL-OFFER Grant pullquote inline <em> → bold + gold.
 * ----------------------------------------------------------------------------
 * The docx TO6 pullquote ("Martial arts is the vehicle…") is appended to
 * Slot 2 Para 2 as an <em> tag (see HTML edit log). Style it as a visual
 * pullquote: weight bold, color gold. Italic from <em> preserved — if Indro
 * wants upright, flip font-style.
 * ============================================================================ */
body#trial-offer-page .owner-section .owner-text-section .owner-text p em,
body#trial-offer-page .owner-section .owner-text p em {
  font-weight: 700 !important;
  color: var(--primary-color, #A69471) !important;
  font-style: normal !important;
}

/* ============================================================================
 * (TO-CARDS-FONT) TRIAL-OFFER #web-offers card text → Instrument Sans.
 * ----------------------------------------------------------------------------
 * Base template uses a condensed display font (TradeGothicW01-BoldCn20
 * or similar) for the .specialoffer_block card labels. That font doesn't
 * appear anywhere else in the Weblogik theme. Force Instrument Sans to
 * match the site-wide body typography.
 * ============================================================================ */
body#trial-offer-page #web-offers .flex-box h2,
body#trial-offer-page #web-offers .flex-box h3,
body#trial-offer-page #web-offers .flex-box p,
body#trial-offer-page #web-offers .flex-box label,
body#trial-offer-page #web-offers .label-option h3,
body#trial-offer-page #web-offers .check-select.trialButton label.control,
body#trial-offer-page #web-offers .specialoffer_block h2,
body#trial-offer-page #web-offers .specialoffer_block h3,
body#trial-offer-page #web-offers .specialoffer_block p {
  font-family: "Instrument Sans", sans-serif !important;
}

/* (TO-BTN-LEFT-BORDER) removed 2026-04-22 — buttons now use a uniform white
   border at rest that's visible on both card backgrounds, so no per-card
   border override is needed. Both buttons render identically. */

/* ============================================================================
 * (TO-LABEL) TRIAL-OFFER #web-offers section title band — grey + white stroke.
 * ----------------------------------------------------------------------------
 * The .label-option band holds the "Find The Right Program." H3 that sits
 * directly above the two program cards. Base template paints it black. Indro
 * wants a medium grey with a white stroke — signals a divider/label strip,
 * softer than pure black, reads as a navigational cue rather than an
 * interruption. White stroke gives a subtle frame against the grey.
 * ============================================================================ */
body#trial-offer-page #web-offers .label-option {
  background: #6A6A6D !important;
  border: none !important;
  border-top: 1px solid #FFFFFF !important;
  border-bottom: 1px solid #FFFFFF !important;
}
body#trial-offer-page #web-offers .label-option h3,
body#trial-offer-page #web-offers .label-option h3 * {
  color: #FFFFFF !important;
}

/* ============================================================================
 * HERO H2 + SUBHEAD sizing (applies to program pages that adopt the new
 * hero-subhead pattern — currently tiny-tigers.html). Brings overall text
 * down from the 55px default and collapses the gap between the white H2
 * and the gold subheading so they read as a single headline unit.
 * Prat note: in CMS admin, if you can't apply the .hero-subhead class, set
 * the subheading H2 inline style to:
 *   font-size:34px; line-height:38px; margin:0; padding:0; text-transform:none;
 * ============================================================================ */
.program-header .program-header-content-text h2,
.program-header .program-header-content-text h2 p {
  font-size: 52px !important;
  line-height: 56px !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.program-header .program-header-content-text .subheading {
  margin: 8px 0 0 0 !important;
}
.program-header .program-header-content-text .subheading h2.hero-subhead,
.program-header .program-header-content-text .subheading h2.hero-subhead p {
  font-size: 36px !important;
  line-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

/* Chooser-page heroes (children-martial-arts, teen-adult-programs) use a
   different selector chain. Match the program-page H2 size for consistency. */
body.program-category-condensed .program-desc h2,
body.program-category-condensed .program-desc h2 span,
body.program-category-condensed .program-desc h2 p {
  font-size: 52px !important;
  line-height: 56px !important;
}

/* ============================================================================
 * STATS SECTION — lighten from near-black to mid-gray so the dark ring
 * graphics still have enough contrast while the band itself feels less heavy
 * against the hero and mission strip. Applies to every program page's
 * `#parents.statistics_section`.
 * ============================================================================ */
#parents.statistics_section,
.statistics_section {
  background-color: #ffffff !important;
}
#parents.statistics_section .overlay,
.statistics_section .overlay {
  background: rgba(0, 0, 0, 0) !important;
}
/* Since the band is now white, flip the previously-white copy to gold so
   it reads properly against the new background. */
#parents.statistics_section,
#parents.statistics_section *,
.statistics_section,
.statistics_section * {
  color: #A69471 !important;
}

/* ============================================================================
 * CHILDREN-MARTIAL-ARTS middle card — Karate for Kids on gold background,
 * black title, white body copy. Scoped to #Karate-for-Kids so it only
 * styles this one card on this one page.
 * ============================================================================ */
#Karate-for-Kids,
#Karate-for-Kids > .container,
#Karate-for-Kids .container.share-section,
#Karate-for-Kids .about-page-blocks,
#Karate-for-Kids .owner-section,
#Karate-for-Kids .owner-text-section,
#Karate-for-Kids .owner-text,
#Karate-for-Kids .owner-header,
#Karate-for-Kids .owner-subheader {
  background-color: #A69471 !important;
}
#Karate-for-Kids .owner-header h2,
#Karate-for-Kids .owner-header h3,
#Karate-for-Kids .owner-header h2 *,
#Karate-for-Kids .owner-header h3 * {
  color: #000000 !important;
}
#Karate-for-Kids .owner-header h1,
#Karate-for-Kids .owner-header h2 {
  border-bottom-color: #000000 !important;
}

/* ============================================================================
 * JUST-4-KIDS program cards — alternating white / sky-blue rows,
 * matching the hero's sky-blue accent. Card 1 (Birthday Parties) is white
 * with black copy; Card 2 (Summer Camp) is sky blue with white copy.
 * ============================================================================ */
#Birthday-Parties,
#Birthday-Parties > .container,
#Birthday-Parties .container.share-section,
#Birthday-Parties .about-page-blocks,
#Birthday-Parties .owner-section,
#Birthday-Parties .owner-text-section,
#Birthday-Parties .owner-text,
#Birthday-Parties .owner-header,
#Birthday-Parties .owner-subheader {
  background-color: #ffffff !important;
}
#Birthday-Parties .owner-header h2,
#Birthday-Parties .owner-header h3,
#Birthday-Parties .owner-header h2 *,
#Birthday-Parties .owner-header h3 *,
#Birthday-Parties .owner-subheader,
#Birthday-Parties .owner-subheader p,
#Birthday-Parties .owner-subheader p *,
#Birthday-Parties .owner-subheader div {
  color: #2C2B30 !important;
}
#Birthday-Parties .owner-header h1,
#Birthday-Parties .owner-header h2 {
  border-bottom-color: #00BFFF !important;
}

#Summer-Camp,
#Summer-Camp > .container,
#Summer-Camp .container.share-section,
#Summer-Camp .about-page-blocks,
#Summer-Camp .owner-section,
#Summer-Camp .owner-text-section,
#Summer-Camp .owner-text,
#Summer-Camp .owner-header,
#Summer-Camp .owner-subheader {
  background-color: #00BFFF !important;
}
#Summer-Camp .owner-header h2,
#Summer-Camp .owner-header h3,
#Summer-Camp .owner-header h2 *,
#Summer-Camp .owner-header h3 *,
#Summer-Camp .owner-subheader,
#Summer-Camp .owner-subheader p,
#Summer-Camp .owner-subheader p *,
#Summer-Camp .owner-subheader div {
  color: #ffffff !important;
}
#Summer-Camp .owner-header h1,
#Summer-Camp .owner-header h2 {
  border-bottom-color: #ffffff !important;
}

/* Leadership Training card (just-4-kids) — white, matches Birthday Parties
   for the alternating white → blue → white rhythm across the three cards. */
#Leadership-Training,
#Leadership-Training > .container,
#Leadership-Training .container.share-section,
#Leadership-Training .about-page-blocks,
#Leadership-Training .owner-section,
#Leadership-Training .owner-text-section,
#Leadership-Training .owner-text,
#Leadership-Training .owner-header,
#Leadership-Training .owner-subheader {
  background-color: #ffffff !important;
}
#Leadership-Training .owner-header h2,
#Leadership-Training .owner-header h3,
#Leadership-Training .owner-header h2 *,
#Leadership-Training .owner-header h3 *,
#Leadership-Training .owner-subheader,
#Leadership-Training .owner-subheader p,
#Leadership-Training .owner-subheader p *,
#Leadership-Training .owner-subheader div {
  color: #2C2B30 !important;
}
#Leadership-Training .owner-header h1,
#Leadership-Training .owner-header h2 {
  border-bottom-color: #00BFFF !important;
}

#Karate-for-Kids .owner-subheader,
#Karate-for-Kids .owner-subheader p,
#Karate-for-Kids .owner-subheader p *,
#Karate-for-Kids .owner-subheader div {
  color: #ffffff !important;
}

/* ============================================================================
 * (BBO-HOME) BLACKBELTONLINE.COM homepage hero — kill graphite wash, show video
 * ----------------------------------------------------------------------------
 * Confirmed via Indro's DevTools on the live site:
 * - Hero element is `.homepage_slider.background-wrapper`
 * - Inside: `.video-background` (Vimeo iframe holder) + `.overlay` span
 * - Earlier theme rule at ~line 1204 paints `.homepage_slider` graphite
 * - Earlier theme rule at ~line 3990 paints `.overlay` with 84% graphite wash
 * - Combined with inline `rgba(0,0,0,0.7)` on the overlay = solid black rectangle
 *
 * Fix (per Prat): set all homepage-hero bg variables to transparent so the
 * Vimeo iframe renders through. Specificity body#homepage wins over earlier
 * `body .homepage_slider` selectors.
 *
 * Scope: body#homepage only. Does NOT affect program pages.
 * ============================================================================ */
body#homepage .homepage_slider,
body#homepage .homepage_slider.background-wrapper,
body#homepage.new_layout_v1 .homepage_slider,
body#homepage .homepage-hero {
  background: #fff0 !important;
  background-color: #fff0 !important;
  background-image: none !important;
}

body#homepage .homepage_slider .overlay,
body#homepage .homepage_slider.background-wrapper .overlay,
body#homepage.new_layout_v1 .homepage_slider .overlay {
  background: rgba(0, 0, 0, 0.65) !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
  background-image: none !important;
}

/* Keep the Vimeo iframe + video-background wrapper visible */
body#homepage .homepage_slider .video-background,
body#homepage .homepage_slider iframe,
body#homepage .homepage_slider [src*="player.vimeo"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Program card lazyload images — ensure intersection observer fires */
body#homepage img.lazyload,
body#homepage .card-container img.lazyload,
body#homepage .featured-programs img.lazyload {
  opacity: 1 !important;
  visibility: visible !important;
  display: block;
}
.features-list-about p {
  line-height: 28px; !important;
  color: #AE9F81; !important;
  font-size: 16px; !important;
  font-weight: 400 !important;
}