/* ══════════════════════════════════════════════════════════════════════════
   ht-design.css — Holy Temple COGIC — "Heritage" design (navy & gold)
   ══════════════════════════════════════════════════════════════════════════
   Loaded LAST on every public page (printed by nv_render_header(), so it
   comes after nv-style.css, ht-theme.css and each page's own <style>).
   It re-styles the whole site without touching any content or fonts:

     • navy header with white capitals and a gold "Give" button
     • gold service-countdown strip on top
     • rounded modules and buttons with a very soft shadow
     • centred section headings with a gold diamond ornament
     • warm ivory bands instead of grey
     • navy photo overlays on heroes and banners
     • deep-navy footer with a gold top rule

   Delete the <link> to this file (nv_nav_footer_lib.php, nv_render_header)
   to go back to the previous look.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --hd-navy:   #0F2A5C;
  --hd-deep:   #081B3D;
  --hd-ink:    #0B1730;
  --hd-gold:   #C9A227;
  --hd-gold-l: #E8C766;
  --hd-ivory:  #FAF7F0;
  --hd-ivory2: #F3EEE2;
  --hd-line:   #E4DCC8;

  /* Rounded corners + very soft shadow on every module and button. */
  --hd-r: 16px; --hd-r-sm: 10px; --hd-r-btn: 10px;
  --hd-shadow: 0 2px 6px rgba(8,27,61,.04), 0 12px 32px -14px rgba(8,27,61,.14);
  --hd-shadow-hover: 0 4px 10px rgba(8,27,61,.05), 0 20px 44px -18px rgba(8,27,61,.20);
  --nv-r-sm: 10px; --nv-r: 16px; --nv-r-lg: 20px;
  --nv-paper: var(--hd-ivory);
  --nv-line:  var(--hd-line);
  --nv-ink:   var(--hd-ink);
  --ht-grey:  var(--hd-ivory);
  --ht-lilac: var(--hd-ivory2);
  --ht-gold:  var(--hd-gold);
}

body.ht{ background: #fff; color: var(--hd-ink); }
::selection{ background: var(--hd-gold); color: var(--hd-deep); }

/* ─── Headline voice: condensed capitals, a little wider ─────────────── */
body.ht h1, body.ht h2, body.ht h3{ text-transform: uppercase; letter-spacing: .02em; }
body.ht .ht-shead:not(.gh-wcard) h2, body.ht .gy-story__head h2, body.ht .sv-intro h2{ color: var(--hd-navy); }

/* ═══ TOP STRIP — gold ═════════════════════════════════════════════════ */
.nv-topbar{ background: var(--hd-gold) !important; color: var(--hd-deep) !important; border-bottom: 0 !important; }
.nv-topbar a, .nv-topbar a:hover{ color: var(--hd-deep) !important; }
.nv-topbar .ht-svc__tag{ color: var(--hd-deep); opacity: 1; }
.nv-topbar .ht-svc__u{ background: var(--hd-deep); border-radius: 6px; }
.nv-topbar .ht-svc__u b, .nv-topbar .ht-svc__u i{ color: var(--hd-gold-l); }
.nv-topbar svg{ color: var(--hd-deep); }
.nv-topbar .ht-svc__name, .nv-topbar .ht-svc__when, .nv-topbar .ht-svc__next, .nv-topbar .ht-svc__now, .nv-topbar span{ color: var(--hd-deep) !important; }
.nv-topbar .ht-svc__u b, .nv-topbar .ht-svc__u i{ color: var(--hd-gold-l) !important; }

/* ═══ HEADER — navy ════════════════════════════════════════════════════ */
.nv-header{
  background: var(--hd-navy) !important; border-bottom: 3px solid var(--hd-gold) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nv-header.is-stuck{ box-shadow: 0 10px 30px -12px rgba(8,27,61,.55); }
@media (min-width: 901px){
  .nv-header .nv-nav__link{
    color: rgba(255,255,255,.86) !important; background: transparent !important;
    text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; font-weight: 600;
  }
  .nv-header .nv-nav__link:hover{ color: var(--hd-gold-l) !important; }
  .nv-header .nv-nav__link[aria-current="page"]{ color: #fff !important; }
  .nv-header .nv-nav__link[aria-current="page"]::after{ height: 2px; bottom: -2px; background: var(--hd-gold); }
  .nv-header .nv-caret{ border-top-color: currentColor; }
}
.nv-header .nv-nav__link--cta{
  background: var(--hd-gold) !important; color: var(--hd-deep) !important;
  border-radius: var(--hd-r-btn) !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.35);
}
.nv-header .nv-nav__link--cta:hover{ background: var(--hd-gold-l) !important; color: var(--hd-deep) !important; }
/* Burger button on the navy bar. */
.nv-header .nv-nav-toggle{ background: transparent; border-color: rgba(255,255,255,.35); color: #fff; border-radius: var(--hd-r-sm); }
.nv-header .nv-nav-toggle span{ background: #fff; }

/* Drop-down menus: square white panel, gold top edge, capitals. */
@media (min-width: 901px){
  .nv-header .nv-dropdown{ border-radius: var(--hd-r-sm) !important; border: 0 !important; border-top: 3px solid var(--hd-gold) !important; box-shadow: var(--hd-shadow-hover) !important; padding: 6px !important; overflow: hidden; }
  .nv-header .nv-dropdown a{ color: var(--hd-ink) !important; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; font-weight: 600; border-radius: 8px !important; }
  .nv-header .nv-dropdown a:hover{ background: var(--hd-ivory) !important; color: var(--hd-navy) !important; }
}

/* ═══ BUTTONS — square, capitals ══════════════════════════════════════ */
body.ht .nv-btn{
  border-radius: var(--hd-r-btn) !important; text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; font-weight: 700;
  padding: 16px 28px; box-shadow: 0 6px 16px -10px rgba(8,27,61,.35) !important;
}
body.ht .nv-btn--orange, body.ht .gh-wcard__btn, body.ht .gh-feat__cta .nv-btn{
  background: var(--hd-navy) !important; color: #fff !important; border: 1px solid var(--hd-navy) !important;
}
body.ht .nv-btn--orange:hover, body.ht .gh-wcard__btn:hover{ background: var(--hd-gold) !important; color: var(--hd-deep) !important; border-color: var(--hd-gold) !important; }
body.ht .nv-btn--light{ background: var(--hd-gold) !important; color: var(--hd-deep) !important; border: 1px solid var(--hd-gold) !important; }
body.ht .nv-btn--light:hover{ background: #fff !important; color: var(--hd-deep) !important; border-color: #fff !important; }
body.ht .nv-btn--ghost{ background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.55) !important; }
body.ht .nv-btn--ghost:hover{ background: rgba(255,255,255,.1) !important; border-color: #fff !important; }
body.ht .nv-btn--line{ border: 1px solid var(--hd-navy) !important; color: var(--hd-navy) !important; background: transparent !important; }
body.ht .nv-btn--line:hover{ background: var(--hd-navy) !important; color: #fff !important; }
.nv-totop{ border-radius: var(--hd-r-sm) !important; background: var(--hd-gold) !important; color: var(--hd-deep) !important; }

/* Text links: navy capitals with a gold underline. */
body.ht .ht-tlink{
  color: var(--hd-navy) !important; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700;
  border-bottom: 2px solid var(--hd-gold) !important; padding-bottom: 4px;
}
body.ht .ht-tlink:hover{ color: var(--hd-gold) !important; }

/* ═══ HOME HERO — navy veil + fine gold frame ════════════════════════ */
body.ht .nv-hero.ht-hero:not(.ht-hero--sm) .nv-hero__scrim{
  background:
    rgba(8,27,61,.75) !important;   /* even navy overlay at 75% across the whole photo */
}
body.ht .ht-hero .nv-hero__eyebrow{ color: var(--hd-gold-l) !important; letter-spacing: .32em; }
body.ht .nv-hero.ht-hero:not(.ht-hero--sm) h1{ letter-spacing: .03em; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
body.ht .nv-hero.ht-hero:not(.ht-hero--sm) h1::after{
  content: "\25C6"; display: block; margin: 18px auto 0; font-size: 16px; line-height: 1; color: var(--hd-gold);
  background: linear-gradient(var(--hd-gold), var(--hd-gold)) left center / calc(50% - 20px) 1px no-repeat,
              linear-gradient(var(--hd-gold), var(--hd-gold)) right center / calc(50% - 20px) 1px no-repeat;
  width: 220px; text-shadow: none;
}
/* Service facts become a framed gold-ruled strip. */
body.ht .nv-hero__aside dl{ background: rgba(8,27,61,.55); padding-bottom: var(--nv-s-5); }
body.ht .nv-hero__aside dt{ color: var(--hd-gold-l); text-transform: uppercase; letter-spacing: .06em; }
body.ht .nv-hero__aside dd{ text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: rgba(255,255,255,.8); }


/* ═══ INSIDE HEROES — centred, navy, framed ══════════════════════════ */
body.ht .nv-hero.ht-hero.ht-hero--sm .nv-hero__scrim{
  background: linear-gradient(to bottom, rgba(8,27,61,.55), rgba(8,27,61,.70)) !important;   /* lighter navy veil */
}
/* Less space above the page title on every inside-page hero. */
body.ht .nv-hero.ht-hero.ht-hero--sm .nv-hero__inner{ padding-block: clamp(48px, 5vw, 72px) clamp(36px, 3.5vw, 52px) !important; }
body.ht .ht-hero--sm::before{ display: none; }
body.ht .nv-hero.ht-hero.ht-hero--sm::after{
  content: ""; position: absolute; left: 50%; bottom: calc(var(--ht-crumb-h) + 18px); transform: translateX(-50%);
  width: 0; height: 0; pointer-events: none;
}
body.ht .ht-hero__split{ grid-template-columns: 1fr !important; text-align: center !important; justify-items: center; gap: 18px !important; }
body.ht .ht-hero--sm .ht-hero__title{ text-align: center; }
body.ht .ht-hero--sm h1{ text-align: center !important; letter-spacing: .06em !important; }
body.ht .ht-hero--sm h1::after{
  content: "\25C6"; display: block; margin: 16px auto 0; font-size: 13px; line-height: 1; color: var(--hd-gold);
  width: 180px; text-shadow: none;
  background: linear-gradient(var(--hd-gold), var(--hd-gold)) left center / calc(50% - 16px) 1px no-repeat,
              linear-gradient(var(--hd-gold), var(--hd-gold)) right center / calc(50% - 16px) 1px no-repeat;
}
body.ht .ht-hero__lead{ text-align: center; margin-inline: auto !important; color: rgba(255,255,255,.88) !important; max-width: 60ch; }
body.ht .ht-hero--sm .nv-hero__eyebrow{ justify-content: center !important; }
/* Breadcrumbs strip on the hero: navy glass with gold separator. */
body.ht .ht-hero--sm + .nv-crumbs{ background: rgba(8,27,61,.75) !important; border-top: 1px solid rgba(255,255,255,.12) !important; }
body.ht .ht-hero--sm + .nv-crumbs .nv-wrap{ display: flex; justify-content: center; }
body.ht .nv-crumbs [aria-current]{ color: var(--hd-navy) !important; }
body.ht .ht-hero--sm + .nv-crumbs [aria-current]{ color: var(--hd-gold-l) !important; }
.nv-crumbs{ background: var(--hd-ivory); }
.nv-crumbs ol{ text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }

/* ═══ SECTIONS — ivory bands, no numbering ════════════════════════════ */
body.ht .ht-sec{ background: #fff; }
body.ht .ht-sec--grey{
  background-color: var(--hd-ivory);
  background-image: radial-gradient(rgba(201,162,39,.16) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
body.ht .ht-sec + .ht-sec{ border-top: 0; }
body.ht .ht-sec__mark::before, body.ht .ht-sec__mark::after{ display: none !important; }
body.ht .ht-card__n{ display: none; }

/* Section heads: one centred column with a gold diamond rule. */
body.ht .ht-shead:not(.gh-wcard){
  grid-template-columns: 1fr !important; justify-items: center; text-align: center;
  max-width: 820px; margin-inline: auto; gap: 14px !important;
  border-bottom: 0 !important; padding-bottom: 0 !important;
}
body.ht .ht-shead:not(.gh-wcard)::after{
  content: "\25C6"; position: static; display: block; width: 200px; height: auto; margin: 6px auto 0;
  font-size: 12px; line-height: 1; color: var(--hd-gold); text-align: center;
  background: linear-gradient(var(--hd-gold), var(--hd-gold)) left center / calc(50% - 14px) 1px no-repeat,
              linear-gradient(var(--hd-gold), var(--hd-gold)) right center / calc(50% - 14px) 1px no-repeat;
  grid-row: 2;
}
body.ht .ht-shead:not(.gh-wcard) .ht-shead__title{ grid-row: 1; }
body.ht .ht-shead:not(.gh-wcard) .ht-shead__body{ grid-row: 3; border-left: 0 !important; padding: 0 !important; }
body.ht .ht-shead:not(.gh-wcard) .ht-shead__body p{ margin-inline: auto; }
body.ht .ht-shead__eyebrow{ color: var(--hd-gold) !important; letter-spacing: .3em !important; }
body.ht .ht-shead:not(.gh-wcard) h2{ font-size: clamp(2.2rem, 3.6vw, 3.1rem); }
/* Featured-event head (home) follows suit. */
body.ht .gh-feat-head__in{ flex-direction: column; align-items: center; text-align: center; }
body.ht .gh-feat-head__body{ justify-content: center; text-align: center; }

/* ═══ CARDS — square frames with a gold cap ══════════════════════════ */
body.ht .ht-card,
body.ht .sv-campus, body.ht .sv-tip, body.ht .sv-next, body.ht .gv-opt, body.ht .gv-intro, body.ht .gs-card,
body.ht .gmp-pillar, body.ht .gmp-tile, body.ht .gmp-focus__row, body.ht .gmp-cta, body.ht .gm-item,
body.ht .gev-card, body.ht .gevc-card, body.ht .fp-form, body.ht .fp-help, body.ht .gst-times, body.ht .gst-watch,
body.ht .gh-feat, body.ht .gl-frame, body.ht .gy-photo__img, body.ht .gh-events__empty, body.ht .ht-lift-card,
body.ht .gmp-acc__item, body.ht .gev-empty, body.ht .fp-empty, body.ht .gv-meta, body.ht .gh-wcard__quote{
  border-radius: var(--hd-r) !important; overflow: hidden;
}
body.ht .ht-card{
  border: 1px solid var(--hd-line) !important; border-top: 4px solid var(--hd-gold) !important;
  box-shadow: var(--hd-shadow) !important; background: #fff;
}
body.ht .ht-card:hover{ transform: translateY(-2px) !important; box-shadow: var(--hd-shadow-hover) !important; border-top-color: var(--hd-navy) !important; }
body.ht .ht-sec--grey .ht-card{ border-color: var(--hd-line) !important; border-top-color: var(--hd-gold) !important; }
/* Purpose cards: centred, icon in a gold-ringed navy disc. */
body.ht .ht-cards:not(.ht-cards--2) > .ht-card:not(.ht-pcard){ text-align: center; align-items: center; }
body.ht .ht-icon{
  width: 58px; height: 58px; border-radius: 50% !important; background: var(--hd-navy) !important;
  color: var(--hd-gold-l) !important; border: 0 !important; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--hd-gold);
}
body.ht .ht-icon svg{ width: 24px; height: 24px; }
/* Photo cards: image framed, tag as a gold plate. */
body.ht .ht-pcard{ border-top-width: 0 !important; }
body.ht .ht-pcard__img{ border-bottom: 4px solid var(--hd-gold); }
body.ht .ht-pcard__body{ border-top: 0 !important; }
body.ht .ht-pcard__tag{
  align-self: flex-start; background: var(--hd-navy); color: var(--hd-gold-l) !important;
  padding: 7px 12px; letter-spacing: .2em !important;
}
body.ht .ht-pcard__body h3 a{ color: var(--hd-ink); }

/* Steps: gold numbers in navy circles, centred. */
body.ht .ht-step{ grid-template-columns: 1fr !important; justify-items: center; text-align: center; align-items: start !important; align-content: start; }
body.ht .ht-step h3, body.ht .ht-step p{ margin-top: 0; }
body.ht .ht-step__n{
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--hd-navy); color: var(--hd-gold-l) !important; font-size: 1.1rem; margin-bottom: 6px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--hd-gold);
}
body.ht .ht-step p{ grid-column: 1 !important; }

/* ═══ WELCOME CARD (home) ═════════════════════════════════════════════ */
body.ht .gh-welcome .ht-shead.gh-wcard{
  border-radius: var(--hd-r) !important; box-shadow: var(--hd-shadow) !important; border: 1px solid var(--hd-line); overflow: hidden;
}
body.ht .gh-wcard__side{ background: var(--hd-navy) !important; }
body.ht .gh-wcard__shade{ background: linear-gradient(to top, rgba(8,27,61,.96) 0%, rgba(8,27,61,.75) 45%, rgba(15,42,92,.45) 100%) !important; }
body.ht .gh-wcard__accent{ width: 100%; left: 0; height: 4px; background: var(--hd-gold); border-radius: 0; }
/* Left panel of the welcome card: all text white. */
body.ht .gh-welcome .gh-wcard__side h2, body.ht .gh-wcard__side h2{ color: #fff !important; }
body.ht .gh-wcard__side .gh-wcard__tag{ color: rgba(255,255,255,.85) !important; }
body.ht .gh-wcard__side .ht-shead__eyebrow{ color: var(--hd-gold-l) !important; }
body.ht .gh-wcard__quote{ background: var(--hd-ivory) !important; border-left: 4px solid var(--hd-gold) !important; }
body.ht .gh-wcard__quote p, body.ht .gh-wcard__quote svg{ color: var(--hd-navy) !important; fill: var(--hd-gold) !important; }

/* Featured event slider. */
body.ht .gh-feat{ border: 1px solid var(--hd-line) !important; border-left: 6px solid var(--hd-gold) !important; }
body.ht .gh-feat__img{ background: var(--hd-navy) !important; color: var(--hd-gold-l) !important; }
body.ht .gh-feat__dot{ border-radius: 99px !important; background: rgba(15,42,92,.25); }
body.ht .gh-feat__dot.is-on{ background: var(--hd-gold) !important; }

/* Times lists. */
body.ht .gh-times span:last-child{ color: var(--hd-navy); }

/* ═══ PHOTO BANNERS — navy veil, gold rules ══════════════════════════ */
body.ht .ht-banner::before{ background: linear-gradient(180deg, rgba(8,27,61,.86), rgba(15,42,92,.80)) !important; }
body.ht .ht-banner{ border-top: 4px solid var(--hd-gold); border-bottom: 4px solid var(--hd-gold); }
body.ht .ht-banner h2{ color: #fff; }
body.ht .ht-banner__eyebrow{ color: var(--hd-gold-l) !important; letter-spacing: .32em !important; }
body.ht .ht-banner__facts dt{ color: var(--hd-gold-l); }

/* ═══ MILESTONES ══════════════════════════════════════════════════════ */
body.ht .ht-mile h3{ color: var(--hd-navy); }
body.ht .ht-mile::before{ background: var(--hd-gold) !important; border-radius: 0 !important; transform: rotate(45deg); }
body.ht .ht-mile + .ht-mile{ border-left-color: var(--hd-line) !important; }

/* ═══ PAGE-SPECIFIC POLISH ════════════════════════════════════════════ */
/* Giving options & service campuses: gold cap like the cards. */
body.ht .gv-opt, body.ht .sv-campus, body.ht .gs-card, body.ht .fp-form, body.ht .gst-times{
  border-top: 4px solid var(--hd-gold) !important; box-shadow: var(--hd-shadow) !important;
}
body.ht .gv-meta{ background: var(--hd-ivory) !important; color: var(--hd-navy) !important; }
body.ht .sv-next, body.ht .gst-watch{ background: var(--hd-navy) !important; }
/* Ministry template tiles & pillars. */
body.ht .gmp-tile{ background: var(--hd-navy) !important; border-bottom: 4px solid var(--hd-gold); }
body.ht .gmp-pillar__ico{ border-radius: 50% !important; background: var(--hd-navy) !important; color: var(--hd-gold-l) !important; }
body.ht .gmp-cta{ background: var(--hd-navy) !important; border-left: 6px solid var(--hd-gold); }
/* Staff photos, history photo. */

/* ═══ FOOTER — deep navy with a gold rule ═════════════════════════════ */
.nv-footer{ background: var(--hd-deep) !important; border-top: 5px solid var(--hd-gold); position: relative; }
.nv-footer h4{ color: var(--hd-gold-l) !important; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; }
.nv-footer h4::after{ content: ""; display: block; width: 28px; height: 2px; margin-top: 10px; background: var(--hd-gold); }
.nv-footer a{ color: rgba(255,255,255,.78); }
.nv-footer a:hover{ color: var(--hd-gold-l) !important; }
.nv-footer__social a{ border-radius: var(--hd-r-sm) !important; color: var(--hd-gold-l) !important; }

/* Inputs and small panels: square too. */
body.ht input[type="search"], body.ht input[type="text"], body.ht .gs-search input, body.ht .gs-office__list li,
body.ht select, body.ht textarea{ border-radius: var(--hd-r-sm) !important; }
body.ht .gs-office__list li{ border-top: 3px solid var(--hd-gold); box-shadow: var(--hd-shadow); overflow: hidden; }
body.ht input[type="search"]{ border-radius: 99px !important; }

/* ═══ MOBILE ══════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  body.ht .ht-hero .nv-hero__eyebrow{ letter-spacing: .18em; }
}

/* ═══ ROUNDED MODULES — everything else that sits in a box ════════════ */
body.ht .hg-item, body.ht .hg-filter, body.ht .gev-detail__media, body.ht .nv-evd__media, body.ht .gmp-video__frame,
body.ht .gmp-lesson, body.ht .gmp-quote, body.ht .gy-photo__img, body.ht .gl-frame, body.ht .gh-feat, body.ht .sv-campus__pic,
body.ht .gst-em-modal, body.ht .gev-em-modal{
  border-radius: var(--hd-r) !important; overflow: hidden;
}
body.ht .hg-item, body.ht .gy-photo__img, body.ht .gl-frame, body.ht .gh-feat, body.ht .gmp-tile, body.ht .gmp-pillar,
body.ht .gmp-focus__row, body.ht .gmp-cta, body.ht .gm-item, body.ht .gev-card, body.ht .gevc-card, body.ht .sv-tip, body.ht .sv-next,
body.ht .gv-intro, body.ht .fp-help, body.ht .gst-watch, body.ht .ht-lift-card, body.ht .gmp-acc__item{
  box-shadow: var(--hd-shadow) !important;
}
body.ht .hg-filter{ border-radius: 99px !important; }
body.ht .ht-pcard__tag{ border-radius: 6px; }
body.ht .gh-wcard__quote{ border-radius: var(--hd-r-sm) !important; }

/* ═══ TOP STRIP — live-stream message (desktop) + stays on screen ═════
   Desktop: the gold strip shows "Stay connected with our weekly live
   stream by clicking [here]" with the social links, and stays pinned at
   the top together with the navy menu bar while the page scrolls.
   Phones keep the service countdown and scroll as before. */
.ht-tb-msg{ display: none; }
@media (min-width: 901px){
  .nv-topbar .nv-tb-meta--svc, .nv-topbar .nv-tb-meta:not(.ht-tb-msg){ display: none !important; }
  .nv-topbar .ht-tb-msg{ display: flex; align-items: center; gap: 12px; font: 600 13px/1 var(--nv-body); letter-spacing: .02em; color: var(--hd-deep); }
  .nv-topbar .ht-tb-msg span{ color: var(--hd-deep) !important; }
  .nv-topbar a.ht-tb-btn{
    display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 8px;
    background: var(--hd-deep); color: #fff !important; font: 700 11.5px/1 var(--nv-body); letter-spacing: .14em; text-transform: uppercase;
    box-shadow: 0 4px 10px -6px rgba(0,0,0,.45); transition: background .2s, color .2s;
  }
  .nv-topbar a.ht-tb-btn:hover{ background: #fff; color: var(--hd-deep) !important; }
  /* Pin the strip and the menu bar together. */
  .nv-topbar{ position: sticky; top: 0; z-index: 901; }
  .nv-topbar .nv-wrap{ height: 40px; min-height: 40px; }
  .nv-topbar ~ .nv-header{ top: 40px !important; }
  html{ scroll-padding-top: 140px; }
}

/* ═══ INSIDE-PAGE HEROES — angled navy gradient, left-aligned title ════
   Dark navy rises at an angle from the bottom-left corner and fades to
   fully transparent, so the rest of the photo shows clearly. The title
   and short description sit on the left, with no gold rule under the
   title. (The breadcrumb strip is unchanged.) */
body.ht .nv-hero.ht-hero.ht-hero--sm .nv-hero__scrim{
  /* From the bottom-left corner: strongest in the corner, spreading across
     most of the banner and fading to clear toward the top-right corner. */
  background: radial-gradient(ellipse 120% 220% at 0% 100%, rgba(8,27,61,.90) 0%, rgba(8,27,61,.70) 40%, rgba(8,27,61,.30) 70%, rgba(8,27,61,0) 100%) !important;
}
body.ht .ht-hero--sm .ht-hero__split{ justify-items: start !important; text-align: left !important; gap: 8px !important; }
body.ht .ht-hero--sm .ht-hero__lead{ padding-top: 0 !important; }
body.ht .ht-hero--sm .ht-hero__title,
body.ht .ht-hero--sm h1{ text-align: left !important; }
body.ht .ht-hero--sm h1::after{ content: none !important; display: none !important; }
body.ht .ht-hero--sm .ht-hero__lead{ text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }
body.ht .ht-hero--sm .nv-hero__eyebrow{ justify-content: flex-start !important; }
body.ht .ht-hero--sm h1, body.ht .ht-hero--sm .ht-hero__lead{ text-shadow: 0 2px 18px rgba(8,27,61,.55); }

/* ═══ OVERLAP HEROES — no breadcrumb bar ══════════════════════════════
   Pages whose content cards overlap the hero (Give, Service Times,
   Events and the form pages) show no breadcrumb strip at all; every
   other inside page keeps its breadcrumb bar as before. */
body.ht .ht-hero--sm.ht-hero--overlap + .nv-crumbs{ display: none !important; }
body.ht .nv-hero.ht-hero.ht-hero--sm.ht-hero--overlap{ padding-bottom: var(--ht-ov) !important; }