/* ============================================================
   Omnia HST brand overrides: maroon (#660000) + gold (#8f8864)
   Loaded AFTER themes.css so it re-skins the default light theme
   to the Omnia palette. Full design pass happens in Phase 2.
   ============================================================ */
:root,
[data-theme="light-professional"] {
    --c-brand:        #660000;
    --c-brand-2:      #8a1f1f;
    --c-accent:       #8f8864;
    --c-accent-hover: #660000;

    --nav-link-hover-bg:   rgba(102, 0, 0, 0.08);
    --nav-link-hover-text: #660000;
    --brand-glow:          drop-shadow(0 4px 14px rgba(102, 0, 0, 0.18));

    --hero-glow:
        radial-gradient(48% 60% at 14% 35%, rgba(255,255,255,0.45), transparent 65%),
        radial-gradient(40% 55% at 88% 70%, rgba(102,0,0,0.10), transparent 70%);
    --hero-eyebrow-text:   #660000;
    --hero-card-ring:      rgba(102, 0, 0, 0.10);
    --hero-card-phone:     #660000;
}

/* Brand headline font: Playfair Display for that premium, non-cookie-cutter feel */
h1, h2, .nav-brand, .hero-headline, .section-head h2 {
    font-family: "Playfair Display", Georgia, serif;
}

/* Dispatch / Customer Portal link in the nav: distinct outline pill */
.nav-portal {
    border: 1.5px solid var(--c-accent);
    color: var(--c-brand) !important;
    border-radius: 999px;
    padding: .35rem .85rem !important;
    font-weight: 700;
}
/* Hover/focus: .nav-links a:hover in site.css is more specific than
   .nav-portal:hover (0,2,1 > 0,2,0) and uses the `background:` shorthand,
   which paints a faint maroon over our gold fill and combined with the white
   text (forced via !important here) leaves the label unreadable. Match the
   specificity by qualifying with .nav-links a.nav-portal so our gold fill
   actually wins. */
.nav-links a.nav-portal:hover,
.nav-links a.nav-portal:focus,
.nav-portal:hover,
.nav-portal:focus {
    background: var(--c-accent) !important;
    color: #fff !important;
    border-color: var(--c-accent);
}

.topbar-phones { display: inline-flex; gap: 1.1rem; flex-wrap: wrap; }

/* ============================================================
   Body prose: first-line indent on paragraphs + a drop cap on the
   opening paragraph of long-form blocks (.prose, blog post bodies,
   the owner bio). UI text, cards, and centered intros are untouched.
   ============================================================ */
.prose p, .post-body p, .owner-body p { text-indent: 2em; }
/* The opening paragraph carries the drop cap, so it starts flush. CTA
   paragraphs (buttons) and the first paragraph never indent. */
.prose > p:first-of-type,
.post-body > p:first-of-type,
.owner-body > p:first-of-type,
.prose p:has(.btn),
.post-body p:has(.btn),
.owner-body p:has(.btn) { text-indent: 0; }
.prose > p:first-of-type::first-letter,
.post-body > p:first-of-type::first-letter,
.owner-body > p:first-of-type::first-letter {
  float: left;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 3.1em;
  line-height: .82;
  margin: .04em .12em -.02em 0;
  color: inherit;   /* match the paragraph's own text color */
}

/* ============================================================
   About - "Meet the Owner": portrait floats right, the story text
   wraps cleanly around it. Stacks (portrait on top, centered) on phones.
   ============================================================ */
.owner-body { font-size: 1.05rem; line-height: 1.75; }
.owner-body p { color: var(--text-muted); margin: 0 0 1.05rem; }
.owner-portrait {
  float: right;
  width: 300px;
  max-width: 40%;
  margin: .2rem 0 1rem 1.8rem;
  border-radius: 16px;
  border: 3px solid var(--c-accent);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
  shape-outside: margin-box;
}
.owner-body::after { content: ""; display: block; clear: both; }
@media (max-width: 600px) {
  .owner-portrait {
    float: none;
    display: block;
    width: 200px;
    max-width: 64%;
    margin: 0 auto 1.4rem;
  }
}

/* ============================================================
   Mobile header: keep it simple. The utility topbar (hours + the two
   phone numbers) is hidden once the nav collapses to a hamburger (960px) -
   on mobile the header is just logo (left) + hamburger (right). The hours
   move into the hero, on their own line right above the phone buttons,
   and the phone buttons go full-width for easy tapping.
   ============================================================ */
.hero-hours { display: none; }
@media (max-width: 960px) {
    .topbar { display: none !important; }
    .hero-omnia .hero-hours,
    .hero-nwnc .hero-hours {
        display: block;
        width: 100%;
        margin: .3rem 0 .1rem;
        color: #fff;
        font-weight: 600;
        font-size: .95rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    }
    .hero-omnia .cta-row .btn-ghost,
    .hero-nwnc .cta-row .btn-ghost { width: 100%; justify-content: center; }

    /* Hamburger contrast: the nav panel can be light (default pages) or maroon
       (home, set via the editor), so a fixed color can't read on all of them.
       A white glyph on a translucent dark rounded chip darkens whatever is
       behind it, so the icon stays high-contrast on ANY header background. */
    .nav .nav-toggle {
        color: #fff !important;
        background: rgba(18, 6, 6, 0.48) !important;
        border: 1px solid rgba(255, 255, 255, 0.42) !important;
        border-radius: 10px !important;
        padding: .26em .44em !important;
        line-height: 1 !important;
    }
    .nav .nav-toggle:hover,
    .nav .nav-toggle:focus-visible {
        background: rgba(18, 6, 6, 0.66) !important;
    }

    /* Pretty, on-brand mobile dropdown - matches the maroon header + gold accents
       instead of the plain light panel. White links, gold hover/active, indented
       sub-items on a darker inset, a standout gold call button. */
    .nav.is-open .nav-links {
        background: linear-gradient(180deg, #660000 0%, #4a0000 100%) !important;
        border-top: 1px solid rgba(255, 255, 255, .16) !important;
        box-shadow: 0 22px 44px rgba(0, 0, 0, .40) !important;
        padding: .6rem .7rem 1rem !important;
        /* 6px, not .12rem. At .12rem (1.9px) the rows read as one solid slab
           rather than a list - and this file wins over site.css because every
           declaration here carries !important, so the spacing has to be set at
           this end or not at all. */
        gap: 6px !important;
        animation: omniaMenuIn .26s ease both;
    }
    .nav.is-open .nav-links a {
        color: #fff !important;
        padding: .85em 1em !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
    }
    .nav.is-open .nav-links a:hover,
    .nav.is-open .nav-links a:focus,
    .nav.is-open .nav-links a.is-active {
        background: rgba(255, 255, 255, .12) !important;
        color: var(--c-accent) !important;
    }
    .nav.is-open .nav-links .has-sub > a::after { color: var(--c-accent); }
    .nav.is-open .nav-links .sub {
        background: rgba(0, 0, 0, .22) !important;
        border-radius: 10px !important;
        margin: .1rem .15rem .4rem !important;
        padding: .2rem .35rem !important;
        border: none !important;
    }
    .nav.is-open .nav-links .sub a {
        color: rgba(255, 255, 255, .9) !important;
        font-weight: 500 !important;
        font-size: .94rem !important;
        padding: .6em 1em !important;
    }
    .nav.is-open .nav-links .nav-portal {
        border: 1px solid rgba(255, 255, 255, .45) !important;
        text-align: center;
        margin-top: .45rem;
    }
    .nav.is-open .nav-links .nav-cta {
        background: var(--c-accent) !important;
        color: #1a1208 !important;
        text-align: center;
        justify-content: center;
        margin-top: .5rem;
    }
}
@keyframes omniaMenuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Contrast + spacing refinements
   ============================================================ */

/* Interior page heroes set their own maroon gradient inline. The default
   .page-hero::before paints a light overlay on top, washing out the white
   text. Remove it so the maroon shows and text stays high-contrast. */
.page-hero::before { display: none !important; }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: rgba(255,255,255,.82); }

/* Tighter vertical rhythm: panels sit closer together. */
main > section { padding-top: 1.9rem !important; padding-bottom: 1.9rem !important; }
main > section.trust-strip { padding-top: .7rem !important; padding-bottom: .7rem !important; }
.hero-omnia, .page-hero { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.jp-panel { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }

/* ============================================================
   Mobile: tighter, more symmetrical
   ============================================================ */
@media (max-width: 780px) {
  /* Two-column inline layouts (hero, service/city body, contact) stack cleanly */
  main .container[style*="grid"], .contact-grid { grid-template-columns: 1fr !important; }
  .hero-omnia > .container,
  .hero-nwnc > .container { text-align: center; }
  .hero-omnia .cta-row, .hero-omnia .lead,
  .hero-nwnc .cta-row, .hero-nwnc .lead { margin-left: auto; margin-right: auto; }
  .hero-nwnc .cta-row { justify-content: center; }
}
@media (max-width: 600px) {
  /* App-style mobile rhythm: tighter sections, smaller heads, no airy gaps */
  main > section { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
  .hero-omnia, .hero-nwnc, .page-hero { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }

  /* Hero panel: kill the GIANT headline + slim the card padding */
  .hero-omnia .container,
  .hero-nwnc .container { gap: 1rem !important; }
  .hero-card  { padding: 1rem 1rem !important; border-radius: 14px !important; }
  .hero-logo  img { max-width: 170px !important; }
  /* Inline font-size on h1.hero-headline beats class-only rules, so target the
     inline-style version with attribute selector + !important. */
  .hero-headline, h1.hero-headline,
  h1.hero-headline[style] { font-size: clamp(1.55rem, 7vw, 2.2rem) !important; line-height: 1.08 !important; }
  .hero-omnia .lead, .hero-nwnc .lead { font-size: 1rem !important; }
  .hero-omnia .cta-row .btn,
  .hero-nwnc .cta-row .btn { padding: .55em .9em; font-size: .9rem; }

  /* Section heads everywhere shrink down; no more billboard headlines */
  main > section h2,
  main > section h2[style] { font-size: clamp(1.25rem, 5vw, 1.7rem) !important; line-height: 1.18 !important; margin-bottom: .55rem !important; }
  main > section h3 { font-size: 1.05rem !important; }
  main > section .lead,
  main > section .lead[style] { font-size: .98rem !important; }

  /* Trust strip: tight horizontal scroll instead of a tall stack */
  .trust-strip { padding: .55rem 0 !important; }
  .trust-strip .ts-pill { font-size: .8rem; padding: .25em .6em; }

  /* Symmetrical 2-up footer, centered, space-saving.
     minmax(0,1fr) rather than 1fr: a bare 1fr track cannot shrink below its
     min-content, so long link labels forced the two tracks to 217px + 180px
     inside a 337px container and the right-hand column was cut off. The 0
     floor lets the tracks actually fit the container.
     No !important on the columns any more either - it was overriding the
     single-column rule that site.css applies below 560px, so phones never
     got the stacked layout that rule exists to provide. */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 1rem !important;
    margin-bottom: 1.4rem !important;
    text-align: center;
  }
  .footer-grid > div:first-child { grid-column: 1 / -1; }

  /* MOBILE FOOTER ALIGNMENT.
     Two problems were making this look ragged on a phone:

     1. text-align:center (set above, and right for the brand block) was also
        centring the link lists. At ~160px per column every label centres on its
        own width, so no two left edges line up and the lists read as scattered.
        Link columns are left-aligned; the brand block stays centred.

     2. There are THREE link blocks in a two-column grid, so the last one sat
        alone in the left cell with a dead cell beside it - the lopsided gap under
        "Company". The selector below spans the final block across both columns
        ONLY when it would otherwise be orphaned: :last-child:nth-child(even)
        means an even number of children overall, i.e. an odd number of link
        blocks once the full-width brand block is discounted. Add or remove a
        footer column in Admin and this keeps working with no edit here. */
  .footer-grid > div:not(:first-child) { text-align: left; }
  .footer-grid > div:last-child:nth-child(even) { grid-column: 1 / -1; }

  /* An orphan block spanning the full width would otherwise stack 9 links in a
     single tall row; two text columns keep it compact and still left-aligned. */
  .footer-grid > div:last-child:nth-child(even) {
    column-count: 2;
    column-gap: 1.1rem;
  }
  .footer-grid > div:last-child:nth-child(even) > .footer-col-title {
    column-span: all;
    -webkit-column-span: all;
  }
  .site-footer .nav-brand { display: inline-block; }
  .footer-grid a { padding: .2em 0; }
  .footer-bottom { text-align: center; gap: .4rem; }
}

/* ============================================================
   Inverted "INTRO band": burgundy background, white copy.
   Used as a visual break between the hero and the service grid so
   the page reads as alternating bands instead of one long scroll.
   ============================================================ */
.intro-band {
  background: linear-gradient(135deg, var(--c-brand) 0%, #4a0000 100%);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.intro-band h2,
.intro-band p,
.intro-band .lead { color: #fff !important; }
.intro-band .eyebrow { color: var(--c-accent) !important; }

/* ============================================================
   Sticky mobile call bar: both buttons in burgundy, equal width,
   side-by-side, tighter padding so it doesn't dominate the screen.
   The "Most jobs in 24-48 hrs" meta line is hidden under 600px
   because there isn't room for it once the buttons sit at usable
   tap-target widths.
   ============================================================ */
@media (max-width: 600px) {
  .mobile-call-bar {
    padding: .45rem .55rem !important;
    gap: .5rem !important;
  }
  .mobile-call-bar .cb-meta { display: none !important; }
  .mobile-call-bar a.cb-call,
  .mobile-call-bar a.cb-quote {
    flex: 1 1 0 !important;
    background: var(--c-brand) !important;
    color: #fff !important;
    border: 1px solid var(--c-brand) !important;
    padding: .58rem .7rem !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    text-align: center;
  }
  /* Footer/body bottom-pad shrinks now that the bar is shorter. */
  body { padding-bottom: 3.4rem !important; }
}
/* Below ~410px (small phones) the phone number doesn't comfortably fit in the
   button alongside the label; drop the digits, the tel: link still dials. */
@media (max-width: 410px) {
  .mobile-call-bar a.cb-call .cb-call-num { display: none; }
}

/* ============================================================
   Page transitions - the new page fades in. Runs for EVERYONE, including
   reduced-motion (browsers skip cross-document View Transitions under
   reduce-motion, and the site's policy is motion-on with the a11y widget
   as the opt-out). There is NO fade-OUT, so the old page is never blanked
   to white; <html> is given the page background so the fade-in backdrop is
   the page color, not a white flash.
   ============================================================ */
html { background: var(--c-bg); }
/* `backwards`, NOT `both`. The forwards half kept this animation permanently
   in its after-phase, which promoted the entire document to its own compositor
   texture - measured at 19MB on the live page - for a fade lasting .4s. With
   backwards the from-state still applies before it starts and the end state is
   the body's normal opacity: 1, so it looks identical and the layer is released
   the moment the fade finishes. */
body { animation: omnia-fade-in .4s ease backwards; }
@keyframes omnia-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   Hero slideshow + cinematic intro (Parkway-style)
   --------------------------------------------------------------
   Intro storyboard:
     0.0s  hero photo arrives crisp + full color (no overlay)
     0.8s  maroon veil + vignette fade in, photo settles into a
           slightly softened backdrop (Ken Burns starts)
     1.0s  glass card slides in from the left
     1.2s  logo block slides in from the right
     2.2s  one slow sheen sweeps across (atmospheric)
   --------------------------------------------------------------
   Admin-controlled variables (overridden via inline style on the
   .hero-omnia section, see index.php):
     --hero-veil-color:    burgundy/whatever the brand says
     --hero-veil-opacity: 0..1; how dark the overlay sits
   ============================================================ */
.hero-omnia, .hero-nwnc {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Defaults: index.php overrides these per-page from hero.json */
  --hero-veil-color: rgba(102, 0, 0, 1);
  --hero-veil-opacity: .80;
  /* OPAQUE DARK BASE.
     Every layer that gives this hero its dark look - the photo (.hero-x__bg),
     the veil and the vignette - starts at opacity 0 and fades in over 1.2s to
     2.4s. The section itself was transparent, so until those layers painted the
     body's near-white (#f7f9f6) showed straight through. Any moment the hero was
     uncovered before they finished - the intro curtain lifting, a slow image, a
     reflow - read as a white flash.
     Basing the section on its own veil colour means the fade now runs from the
     brand colour up to the full treatment, and white is never in the sequence.
     index.php's per-page --hero-veil-color override applies here automatically. */
  background-color: var(--hero-veil-color, #0a0f1a);
}
.hero-x__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  transform-origin: center center;
  will-change: opacity, transform;
  /* Settled backdrop look, applied to EVERY slide so they all match (no filter
     pop between images). */
  filter: saturate(1.12) contrast(1.18) brightness(.96) blur(1.5px);
  /* Slow continuous zoom, but PAUSED while a slide is hidden so it never snaps
     back to scale 1 mid-crossfade (that snap was the visible "jump"). */
  animation: omnia-kenburns 30s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero-x__bg.is-active {
  opacity: 1;
  animation-play-state: running;   /* just crossfade + keep zooming - no intro replay */
}
/* FIRST slide only: the cinematic crisp -> settle intro, then it keeps zooming.
   The slideshow JS adds .is-intro to slide #1 once and removes it after, so
   later slides simply crossfade + zoom smoothly. */
.hero-x__bg.is-intro {
  animation:
    omnia-hero-intro-photo 2200ms ease-out both,
    omnia-kenburns 30s ease-in-out 2200ms infinite alternate;
  animation-play-state: running;
}
@keyframes omnia-hero-intro-photo {
  0%   { transform: scale(1.02); filter: saturate(1)    contrast(1)   brightness(1) blur(0px); }
  30%  {                          filter: saturate(1)    contrast(1)   brightness(1) blur(0px); }
  100% { transform: scale(1.06); filter: saturate(1.12) contrast(1.18) brightness(.96) blur(1.5px); }
}
@keyframes omnia-kenburns { from { transform: scale(1.06); } to { transform: scale(1.14); } }

/* Burgundy veil: admin-tunable color + opacity. Solid fill (not a gradient)
   so the picker + slider control its appearance directly. Animation fades it
   in after the photo has been seen clear for ~0.8s. */
.hero-omnia .hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: var(--hero-veil-color, rgba(102, 0, 0, 1));
  opacity: 0;
  animation: omnia-hero-veil-in 1600ms ease-out 800ms both;
}
@keyframes omnia-hero-veil-in { from { opacity: 0; } to { opacity: var(--hero-veil-opacity, .80); } }

/* Cinematic vignette: center stays clear, edges fade to near-black so the
   scene reads with strong contrast. Sits on top of the veil but below content.
   Matches the Parkway hero feel. */
.hero-omnia .hero-vignette {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%,
      transparent 0%,
      transparent 48%,
      rgba(0, 0, 0, 0.42) 70%,
      rgba(0, 0, 0, 0.82) 88%,
      rgba(0, 0, 0, 0.98) 100%);
  opacity: 0;
  animation: omnia-hero-vignette-in 1600ms ease-out 800ms both;
}
@keyframes omnia-hero-vignette-in { from { opacity: 0; } to { opacity: 1; } }

.hero-omnia > .container { position: relative; z-index: 3; }

/* Diagonal light sheen: fires once shortly after the intro completes, then
   repeats on slide change (see omnia-fx.js). */
.hero-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hero-sheen::before {
  content: ""; position: absolute; top: -30%; left: -60%; width: 40%; height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.hero-sheen.go::before { animation: omnia-sheen 1.15s ease; }
@keyframes omnia-sheen { 0% { left: -60%; opacity: 0; } 12% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

/* Hero content: card slides in from the left, logo from the right.
   Delays line up with the veil so all three arrive together as the photo
   settles into its backdrop. */
.hero-card { animation: omnia-in-left  900ms ease 1000ms both; }
.hero-logo { animation: omnia-in-right 900ms ease 1200ms both; }
@keyframes omnia-in-left  { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes omnia-in-right { from { opacity: 0; transform: translateX(32px);  } to { opacity: 1; transform: none; } }

/* NOTE: animations intentionally run for EVERY visitor (no prefers-reduced-motion
   minimizing) - this is the owner's call, matching the sister sites. Anyone who
   needs calmer motion uses the accessibility widget's "pause animations" toggle
   (bottom corner). The matchMedia neutralizer in header.php backs this up so a
   device setting can't silently strip the load + scroll animations. */

/* ============================================================
   Scroll reveal - items fade/slide in cleanly as they enter view
   (gated by .omnia-anim so content is never hidden if JS is off)
   ============================================================ */
html.omnia-anim [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
html.omnia-anim [data-reveal="left"]  { transform: translateX(-36px); }
html.omnia-anim [data-reveal="right"] { transform: translateX(36px); }
html.omnia-anim [data-reveal="zoom"]  { transform: scale(.93); }
html.omnia-anim [data-reveal="fade"]  { transform: none; }
html.omnia-anim [data-reveal].rv-in   { opacity: 1; transform: none; }
/* The entrance is over - hand the hint back. will-change is a promise about
   what is ABOUT to change, and holding it after the transition keeps every
   revealed element on its own composited layer for the life of the page. It
   also makes each one a backdrop root, which is what stopped the glass chat
   panel from seeing anything behind it on a phone. */
html.omnia-anim [data-reveal].rv-in   { will-change: auto; }

/* Scroll-reveal also runs for everyone (see note above). */

/* ============================================================
   Accessibility widget button (AccessibleWeb) - keep it clear of the
   mobile sticky call bar (sits just above it on phones) and in the
   normal bottom corner on desktop.
   ============================================================ */
.acc-toggle-btn { z-index: 1200 !important; }
@media (max-width: 700px) {
  .acc-toggle-btn { bottom: 4.6rem !important; }
}

/* ============================================================
   Brand image cards (editable background image + readable name)
   ============================================================ */
.brand-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 158px;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 18px rgba(20,28,22,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.brand-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(102,0,0,.24); }
.brand-card__name {
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  padding: 1rem 1.1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.95);
}

/* ============================================================
   Gold accent: always full-saturation on dark / photo backgrounds
   --c-accent is intentionally muted (#8f8864) for light-theme UI
   elements on the near-white (#f7f9f6) body background. Inside
   dark-background contexts the bright gold (#c9a24a) is required
   for legibility and brand richness. Setting --c-accent on the
   section element propagates via CSS inheritance to every child
   that uses var(--c-accent), covering eyebrows, headline lines,
   status badges, and schedule labels without touching buttons,
   borders, or light-section gold elements.
   ============================================================ */
.hero-nwnc, .hero-omnia,
.ab-hero, .rdsn-hero, .tm-hero, .adv-hero, .cm-hero, .ll-hero,
.sch-fb-hero, .bc-hero, .bcd-hero, .page-hero,
.intro-band,
.ll-sched-section,
.nav.is-open {
    --c-accent: #c9a24a;
}

/* Photo-background hero (index.php): the gold eyebrow + the second
   headline line (hero-line2) get a depth shadow so they stay crisp
   even against any brighter patch of the photo before the veil
   fully fades in. Other heroes use solid dark gradients and don't
   need this — the gradient itself provides sufficient contrast. */
.hero-nwnc .eyebrow,
.hero-nwnc .hero-line2 {
    text-shadow: 0 1px 10px rgba(0,0,0,.70), 0 0 28px rgba(0,0,0,.45);
}

/* ============================================================
   Drop shadow on light-colored text (readability over photos/colors)
   ============================================================ */
/* Inline white / near-white text (covers most hero/section copy) */
[style*="color:#fff"], [style*="color: #fff"], [style*="color:#FFF"], [style*="color: #FFF"],
[style*="color:#ffffff"], [style*="color:rgba(255"], [style*="color: rgba(255"] {
  text-shadow: 0 1px 2px rgba(0,0,0,.35);   /* subtle - aids contrast, not heavy */
}
/* THE WRAPPER SHADOW IS GONE ON PURPOSE. DO NOT PUT IT BACK.

   It was:
     .hero-omnia, .intro-band, .jp-panel, .brand-hero,
     section[style*="#660000"], ... { text-shadow: 0 1px 2px rgba(0,0,0,.3); }
   with the comment "the shadow inherits to their white text".

   It does inherit - to EVERYTHING inside, not only the white text. Those dark
   maroon sections contain white cards, and the cards contain near-black body
   copy and dark red headings. All of it inherited a black halo, which on dark
   text is not contrast, it is a smudge: the services cards and the contact
   form's field labels came out looking blurred and dirty.

   CSS cannot say "only if this element's own colour is light" - which is the
   whole reason assets/js/text-legibility.js exists. It measures each element's
   computed colour and tags light text with .om-lit / .om-lit-strong /
   .om-lit-soft, and dark text that has inherited a shadow from somewhere with
   .om-unlit, which clears it. Leave the decision there; it is the only place
   that can actually see the colour. */