/* ============================================================
   National Notaries - design system (2026 refresh)
   Layered on top of Bootstrap. Component classes are namespaced
   with .nn- to avoid collisions. Load this stylesheet LAST.
   ============================================================ */

:root {
  --nn-paper:      #f7f8f3;
  --nn-surface:    #ffffff;
  --nn-surface-2:  #edf2e9;
  --nn-ink:        #16241a;
  --nn-ink-soft:   #46564a;
  --nn-ink-faint:  #6d7b6f;
  --nn-green:      #20551d;
  --nn-green-deep: #143a12;
  --nn-green-tint: #e7f0e3;
  --nn-seal:       #8a2f2a;
  --nn-seal-soft:  #c8524a;
  --nn-gold:       #f3ce97;
  --nn-rule:       #e0e4da;
  --nn-rule-strong:#c9cfc0;
  --nn-amber:      #f5a623;
  /* green-forward bands (hero / coverage / cta / footer) */
  --nn-band-bg:    #17431a;
  --nn-band-bg-2:  #10330f;
  --nn-band-ink:   #f4f8f1;
  --nn-band-soft:  #d6e6d0;
  --nn-band-line:  rgba(255,255,255,.18);
  --nn-shadow-sm:  0 1px 2px rgba(22,36,26,.06), 0 4px 14px -8px rgba(22,36,26,.14);
  --nn-shadow-md:  0 2px 6px rgba(22,36,26,.07), 0 20px 40px -22px rgba(22,36,26,.25);

  /* hand Bootstrap the brand colour */
  --bs-primary: #20551d;
  --bs-primary-rgb: 32, 85, 29;
  --bs-link-color: #20551d;
  --bs-link-color-rgb: 32, 85, 29;
  --bs-link-hover-color: #143a12;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nn-paper:      #10140e;
    --nn-surface:    #171d15;
    --nn-surface-2:  #1e261c;
    --nn-ink:        #e9ede3;
    --nn-ink-soft:   #b3bcaf;
    --nn-ink-faint:  #869080;
    --nn-green:      #6fbf6a;
    --nn-green-deep: #d7e8d3;
    --nn-green-tint: #1b2a19;
    --nn-seal:       #e0947f;
    --nn-seal-soft:  #e0947f;
    --nn-rule:       #2b3327;
    --nn-rule-strong:#3d4736;
    --nn-band-bg:    #0c120b;
    --nn-band-bg-2:  #0a0f09;
    --nn-band-ink:   #e9ede3;
    --nn-band-soft:  #9fae98;
    --nn-band-line:  rgba(255,255,255,.10);
  }
}
:root[data-theme="dark"] {
  --nn-paper:      #10140e;
  --nn-surface:    #171d15;
  --nn-surface-2:  #1e261c;
  --nn-ink:        #e9ede3;
  --nn-ink-soft:   #b3bcaf;
  --nn-ink-faint:  #869080;
  --nn-green:      #6fbf6a;
  --nn-green-deep: #d7e8d3;
  --nn-green-tint: #1b2a19;
  --nn-seal:       #e0947f;
  --nn-seal-soft:  #e0947f;
  --nn-rule:       #2b3327;
  --nn-rule-strong:#3d4736;
  --nn-band-bg:    #0c120b;
  --nn-band-bg-2:  #0a0f09;
  --nn-band-ink:   #e9ede3;
  --nn-band-soft:  #9fae98;
  --nn-band-line:  rgba(255,255,255,.10);
}

/* ---------- base ---------- */
body {
  background: var(--nn-paper);
  color: var(--nn-ink);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
a { color: var(--nn-green); text-underline-offset: 3px; }
a:hover { color: var(--nn-green-deep); }
main { background: var(--nn-paper); }

.nn-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nn-ink-faint); margin: 0;
}
.nn-band--green .nn-eyebrow { color: var(--nn-band-soft); }

/* ---------- buttons ---------- */
.nn-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Public Sans", sans-serif; font-weight: 600; font-size: .98rem;
  padding: .8rem 1.5rem; border-radius: 8px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nn-btn:focus-visible { outline: 3px solid var(--nn-amber); outline-offset: 2px; }
.nn-btn--primary { background: var(--nn-green); color: #fff; box-shadow: var(--nn-shadow-sm); }
:root[data-theme="dark"] .nn-btn--primary { color: #0f140e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nn-btn--primary { color: #0f140e; } }
.nn-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--nn-shadow-md); color: #fff; }
:root[data-theme="dark"] .nn-btn--primary:hover { color: #0f140e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nn-btn--primary:hover { color: #0f140e; } }
.nn-btn--ghost { background: transparent; color: var(--nn-green); border-color: var(--nn-rule-strong); }
.nn-btn--ghost:hover { background: var(--nn-green-tint); color: var(--nn-green); }
/* buttons that sit on a green band */
.nn-on-band .nn-btn--primary { background: #fff; color: var(--nn-green-deep); }
.nn-on-band .nn-btn--primary:hover { color: var(--nn-green-deep); }
:root[data-theme="dark"] .nn-on-band .nn-btn--primary,
:root[data-theme="dark"] .nn-on-band .nn-btn--primary:hover { background: var(--nn-green); color: #0f140e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nn-on-band .nn-btn--primary,
  :root:not([data-theme="light"]) .nn-on-band .nn-btn--primary:hover { background: var(--nn-green); color: #0f140e; }
}
.nn-on-band .nn-btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.nn-on-band .nn-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- top bar + header ---------- */
.nn-topbar {
  background: var(--nn-band-bg-2); color: var(--nn-band-soft);
  font-size: .82rem; text-align: center; padding: .5rem 0;
}
.nn-topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.nn-topbar a:hover { text-decoration: underline; color: #fff; }

.nn-header {
  background: var(--nn-surface); border-bottom: 1px solid var(--nn-rule);
  position: sticky; top: 0; z-index: 1030;
}
.nn-header-inner { display: flex; align-items: center; gap: 24px; padding: 12px 0; }
.nn-brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.nn-brand-logo { height: 58px; width: auto; display: block; }
.nn-brand-logo--invert { filter: brightness(0) invert(1); opacity: .95; height: 52px; }
@media (max-width: 640px) { .nn-brand-logo { height: 46px; } }
.nn-header-spacer { flex: 1; }

.nn-theme-toggle {
  flex: none; display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 8px;
  border: 1.5px solid var(--nn-rule-strong); background: transparent;
  color: var(--nn-ink-soft); cursor: pointer;
}
.nn-theme-toggle:hover { color: var(--nn-green); border-color: var(--nn-green); }
.nn-theme-toggle:focus-visible { outline: 3px solid var(--nn-amber); outline-offset: 2px; }
.nn-theme-toggle svg { display: block; }

.nn-nav { display: flex; gap: 4px; align-items: center; }
.nn-nav a {
  text-decoration: none; color: var(--nn-ink-soft); font-weight: 500; font-size: .95rem;
  padding: .5rem .8rem; border-radius: 6px; white-space: nowrap;
}
.nn-nav a:hover { color: var(--nn-green); background: var(--nn-green-tint); }
.nn-nav a.nn-active { color: var(--nn-green); font-weight: 600; }

/* nav dropdown */
.nn-nav-dd { position: relative; }
.nn-nav-dd > a::after { content: " \25be"; color: var(--nn-ink-faint); }
.nn-nav-ddmenu {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  background: var(--nn-surface); border: 1px solid var(--nn-rule); border-radius: 8px;
  box-shadow: var(--nn-shadow-md); padding: 6px; display: none; z-index: 1040;
}
.nn-nav-dd:hover .nn-nav-ddmenu,
.nn-nav-dd:focus-within .nn-nav-ddmenu { display: block; }
.nn-nav-ddmenu a { display: block; padding: .5rem .7rem; border-radius: 6px; font-size: .92rem; }

.nn-menu-toggle { display: none; }
@media (max-width: 960px) {
  .nn-header-inner { flex-wrap: wrap; gap: 12px; }
  .nn-nav { display: none; width: 100%; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--nn-rule); }
  .nn-nav.nn-open { display: flex; }
  .nn-nav-dd > a::after { display: none; }
  .nn-nav-ddmenu { position: static; display: block; border: none; box-shadow: none; padding: 0 0 0 14px; min-width: 0; background: transparent; }
  .nn-nav-ddmenu a { color: var(--nn-ink-faint); }
  .nn-menu-toggle {
    display: inline-flex; margin-left: auto; background: transparent;
    border: 1.5px solid var(--nn-rule-strong); border-radius: 7px; padding: .45rem .7rem;
    color: var(--nn-ink); font-weight: 600; cursor: pointer; gap: .4rem; align-items: center;
  }
}

/* ---------- hero ---------- */
.nn-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--nn-band-bg); color: var(--nn-band-ink);
  border-bottom: 4px solid var(--nn-seal);
}
/* ghosted photo behind the green */
.nn-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('/images/write_banner_large.jpg') center/cover no-repeat;
  opacity: .10; filter: grayscale(.35) contrast(1.05);
  mix-blend-mode: luminosity;
}
.nn-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 76px 0 84px; }
.nn-hero h1 { color: var(--nn-band-ink); font-size: clamp(2.4rem, 5.2vw, 3.8rem); margin: 8px 0 0; }
.nn-hero h1 em { font-style: italic; color: var(--nn-gold); }
:root[data-theme="dark"] .nn-hero h1 em { color: var(--nn-green); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nn-hero h1 em { color: var(--nn-green); } }
.nn-hero .nn-sub { font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: var(--nn-band-soft); margin-top: 20px; max-width: 40ch; }
.nn-hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.nn-trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 36px; padding-top: 26px;
  border-top: 1px solid var(--nn-band-line); font-size: .86rem; color: var(--nn-band-soft);
}
.nn-trust b { color: #fff; font-weight: 600; }
:root[data-theme="dark"] .nn-trust b { color: var(--nn-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nn-trust b { color: var(--nn-ink); } }
.nn-trust > span { display: inline-flex; align-items: center; gap: 6px; }
.nn-trust .nn-ico { color: var(--nn-gold); flex: none; }
:root[data-theme="dark"] .nn-trust .nn-ico { color: var(--nn-green); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nn-trust .nn-ico { color: var(--nn-green); } }

/* hero quick-start card - a low-friction lead capture that hands off to the full form */
.nn-quickstart {
  background: var(--nn-surface);
  border: 1px solid var(--nn-rule);
  border-radius: 12px;
  padding: 26px 24px;
  box-shadow: var(--nn-shadow-md);
  color: var(--nn-ink);
  max-width: 400px;
  margin-left: auto;
}
.nn-quickstart .nn-eyebrow { color: var(--nn-ink-faint); }
.nn-quickstart h3 { color: var(--nn-ink); font-size: 1.25rem; margin: 6px 0 14px; }
.nn-quickstart input[type="text"] {
  width: 100%; padding: .7rem .85rem; font: inherit; font-size: .95rem;
  border: 1.5px solid var(--nn-rule-strong); border-radius: 8px;
  background: var(--nn-paper); color: var(--nn-ink);
}
.nn-quickstart input[type="text"]::placeholder { color: var(--nn-ink-faint); }
.nn-quickstart input[type="text"]:focus {
  outline: none; border-color: var(--nn-green); box-shadow: 0 0 0 3px var(--nn-green-tint);
}
.nn-quickstart .nn-qs-help { font-size: .8rem; color: var(--nn-ink-faint); margin: 6px 0 14px; }
.nn-quickstart .nn-btn--primary { width: 100%; background: var(--nn-green); color: #fff; }
.nn-quickstart .nn-btn--primary:hover { background: var(--nn-green); color: #fff; }
:root[data-theme="dark"] .nn-quickstart .nn-btn--primary,
:root[data-theme="dark"] .nn-quickstart .nn-btn--primary:hover { color: #0f140e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nn-quickstart .nn-btn--primary,
  :root:not([data-theme="light"]) .nn-quickstart .nn-btn--primary:hover { color: #0f140e; }
}
.nn-quickstart .nn-qs-foot { font-size: .78rem; color: var(--nn-ink-faint); margin-top: 12px; text-align: center; }

/* offset the sticky header when jumping to the enquiry form (card button + hero CTA) */
#enquiryForm { scroll-margin-top: 90px; }

@media (max-width: 860px) {
  .nn-hero-grid { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 56px; }
  .nn-hero .nn-sub { max-width: none; }
  .nn-quickstart { max-width: none; margin-left: 0; }
}

/* ---------- section shells ---------- */
.nn-band { padding: 74px 0; }
.nn-band--tint { background: var(--nn-surface-2); }
.nn-band--green { background: var(--nn-band-bg); color: var(--nn-band-ink); }
.nn-band--green h2, .nn-band--green h3 { color: var(--nn-band-ink); }
.nn-band--green p { color: var(--nn-band-soft); }
.nn-band-head { max-width: 60ch; margin-bottom: 40px; }
.nn-band-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.35rem); margin: 12px 0 0; position: relative; padding-top: 16px; }
.nn-band-head h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; background: var(--nn-seal); }
.nn-band--green .nn-band-head h2::before { background: var(--nn-seal-soft); }
.nn-band-head p { color: var(--nn-ink-soft); margin-top: 12px; }
.nn-band--green .nn-band-head p { color: var(--nn-band-soft); }

/* ---------- steps ---------- */
.nn-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.nn-step .nn-n {
  font-family: "Newsreader", serif; font-size: 1.3rem; font-weight: 600;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nn-green); color: #fff; margin-bottom: 16px;
}
:root[data-theme="dark"] .nn-step .nn-n { color: #0f140e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nn-step .nn-n { color: #0f140e; } }
.nn-step h3 { font-size: 1.22rem; margin-bottom: 6px; }
.nn-step p { color: var(--nn-ink-soft); font-size: .96rem; margin: 0; }
@media (max-width: 760px) { .nn-steps { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- services grid ---------- */
.nn-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.nn-svc {
  background: var(--nn-surface); border: 1px solid var(--nn-rule); border-radius: 10px; padding: 20px;
  text-decoration: none; color: var(--nn-ink); display: flex; flex-direction: column; gap: 6px;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.nn-svc:hover { border-color: var(--nn-green); transform: translateY(-2px); box-shadow: var(--nn-shadow-sm); color: var(--nn-ink); }
.nn-svc .nn-s-name { font-weight: 600; font-size: 1.02rem; }
.nn-svc .nn-s-desc { font-size: .86rem; color: var(--nn-ink-faint); }
.nn-svc .nn-s-arrow { margin-top: auto; color: var(--nn-green); font-weight: 600; font-size: .85rem; }
@media (max-width: 900px) { .nn-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .nn-svc-grid { grid-template-columns: 1fr; } }

/* ---------- locations columns ---------- */
.nn-loc-cols { columns: 4; column-gap: 28px; }
.nn-loc-cols a {
  display: block; padding: 7px 0; text-decoration: none; color: var(--nn-band-soft);
  border-bottom: 1px solid var(--nn-band-line); font-size: .93rem; break-inside: avoid;
}
.nn-loc-cols a:hover { color: #fff; }
:root[data-theme="dark"] .nn-loc-cols a:hover { color: var(--nn-green); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nn-loc-cols a:hover { color: var(--nn-green); } }
@media (max-width: 900px) { .nn-loc-cols { columns: 2; } }
@media (max-width: 520px) { .nn-loc-cols { columns: 1; } }

/* ---------- guides ---------- */
.nn-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nn-guide {
  background: var(--nn-surface); border: 1px solid var(--nn-rule); border-radius: 10px; padding: 24px;
  text-decoration: none; color: var(--nn-ink); display: flex; flex-direction: column;
  transition: border-color .12s ease, transform .12s ease;
}
.nn-guide:hover { border-color: var(--nn-green); transform: translateY(-2px); color: var(--nn-ink); }
.nn-guide .nn-g-cat {
  font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nn-seal); margin-bottom: 10px;
}
.nn-guide h3 { font-size: 1.16rem; }
.nn-guide p { font-size: .9rem; color: var(--nn-ink-soft); margin-top: 8px; }
.nn-guide .nn-g-more { margin-top: 16px; color: var(--nn-green); font-weight: 600; font-size: .85rem; }
@media (max-width: 860px) { .nn-guide-grid { grid-template-columns: 1fr; } }

/* ---------- guide article body (rendered Markdown) ---------- */
.nn-guide-body { color: var(--nn-ink); line-height: 1.7; font-size: 1.02rem; }
.nn-guide-body > :first-child { margin-top: 0; }
.nn-guide-body h2 {
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  color: var(--nn-ink);
  margin: 2.6rem 0 .7rem;
  padding-top: .3rem;
}
.nn-guide-body h3 {
  font-size: 1.2rem;
  color: var(--nn-ink);
  margin: 2rem 0 .5rem;
}
.nn-guide-body p { margin: 0 0 1.15rem; }
.nn-guide-body ul, .nn-guide-body ol { margin: 0 0 1.3rem; padding-left: 1.4rem; }
.nn-guide-body li { margin-bottom: .45rem; }
.nn-guide-body li::marker { color: var(--nn-green); }
.nn-guide-body a { color: var(--nn-green); text-underline-offset: 2px; }
.nn-guide-body strong { font-weight: 600; }
.nn-guide-body hr { border: none; border-top: 1px solid var(--nn-rule); margin: 2rem 0; }

.nn-guide-body table {
  width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .95rem;
  display: block; overflow-x: auto;
}
.nn-guide-body th, .nn-guide-body td {
  text-align: left; padding: .7rem .9rem; vertical-align: top;
  border-bottom: 1px solid var(--nn-rule);
}
.nn-guide-body th {
  font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--nn-ink-faint); border-bottom: 2px solid var(--nn-rule-strong);
}
.nn-guide-body td:first-child { font-weight: 600; min-width: 9rem; }

.nn-guide-body blockquote {
  margin: 1.5rem 0; padding: .4rem 0 .4rem 1.1rem;
  border-left: 3px solid var(--nn-seal); color: var(--nn-ink-soft);
}
.nn-guide-body code {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .88em;
  background: var(--nn-surface-2); padding: .1em .35em; border-radius: 4px;
}

/* ---------- reviews ---------- */
.nn-reviews-top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.nn-reviews-top .nn-big { font-family: "Newsreader", serif; font-size: 3rem; font-weight: 600; color: var(--nn-green); line-height: 1; }

/* ---------- CTA band ---------- */
.nn-cta { background: var(--nn-band-bg); color: var(--nn-band-ink); border-top: 4px solid var(--nn-seal); }
.nn-cta .nn-cta-inner { padding: 62px 0; text-align: center; }
.nn-cta h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.5rem); }
:root[data-theme="dark"] .nn-cta h2 { color: var(--nn-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nn-cta h2 { color: var(--nn-ink); } }
.nn-cta p { margin: 14px auto 26px; max-width: 48ch; color: var(--nn-band-soft); }
.nn-cta .nn-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
.nn-footer { background: var(--nn-band-bg-2); color: var(--nn-band-soft); font-size: .9rem; }
.nn-footer-inner { padding: 48px 0 28px; }
.nn-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.nn-footer h4 { color: #fff; font-family: "Public Sans", sans-serif; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
:root[data-theme="dark"] .nn-footer h4 { color: var(--nn-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nn-footer h4 { color: var(--nn-ink); } }
.nn-footer a { color: var(--nn-band-soft); text-decoration: none; display: block; padding: 4px 0; }
.nn-footer a:hover { color: #fff; }
.nn-footer .nn-foot-blurb { max-width: 32ch; font-size: .85rem; }
.nn-foot-legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--nn-band-line); font-size: .78rem; opacity: .8; }
@media (max-width: 820px) { .nn-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .nn-foot-grid { grid-template-columns: 1fr; } }

/* ---------- restyle the legacy image-overlay heroes on inner pages ---------- */
/* keep the theme's banner photo, but ghost it behind the green */
.imagebg.cover-blocks {
  background: var(--nn-band-bg) !important; border-color: var(--nn-seal) !important;
  position: relative; isolation: isolate;
}
.imagebg.cover-blocks .background-image-holder {
  display: block !important; z-index: 0 !important;
  opacity: .12 !important; filter: grayscale(.35) contrast(1.04) !important;
  mix-blend-mode: luminosity !important;
}
.imagebg.cover-blocks .background-image-holder img { display: none !important; }
.imagebg.cover-blocks .container { position: relative; z-index: 1; }
.imagebg.cover-blocks .boxed {
  background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.imagebg.cover-blocks .boxed,
.imagebg.cover-blocks h1, .imagebg.cover-blocks h2, .imagebg.cover-blocks h3,
.imagebg.cover-blocks p, .imagebg.cover-blocks li { color: var(--nn-band-ink) !important; }
.imagebg.cover-blocks a { color: var(--nn-gold) !important; }

/* Bootstrap's .bg-light / .bg-body-tertiary panels don't follow the site theme
   (this site never sets data-bs-theme, so they stay a light grey), so their
   contents must stay dark even when the rest of the page is dark.
   Literal colours - these surfaces are always light. */
.bg-light, .bg-body-tertiary,
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6,
.bg-light p, .bg-light li, .bg-light dt, .bg-light dd, .bg-light label, .bg-light .text-body-emphasis,
.bg-body-tertiary h1, .bg-body-tertiary h2, .bg-body-tertiary h3, .bg-body-tertiary h4,
.bg-body-tertiary h5, .bg-body-tertiary h6, .bg-body-tertiary p, .bg-body-tertiary li,
.bg-body-tertiary label, .bg-body-tertiary .text-body-emphasis {
  color: #16241a !important;
}
.bg-light .text-body-secondary, .bg-light small, .bg-light .muted, .bg-light sub, .bg-light sup,
.bg-body-tertiary .text-body-secondary, .bg-body-tertiary small, .bg-body-tertiary .muted {
  color: #4a5a4e !important;
}
.bg-body-tertiary .form-control, .bg-body-tertiary .form-select, .bg-body-tertiary .form-check-label { color: #16241a; }
.bg-light a:not(.btn), .bg-body-tertiary a:not(.btn) { color: #143a12; }

/* Bootstrap dropdown menus keep their own white panel, so their contents
   must not inherit the on-green text colours. (Literal colours - the panel
   is white regardless of the site theme.) */
.imagebg.cover-blocks .dropdown-menu,
.imagebg.cover-blocks .dropdown-menu li { color: #16241a !important; }
.imagebg.cover-blocks .dropdown-menu a,
.imagebg.cover-blocks .dropdown-item { color: #16241a !important; }
.imagebg.cover-blocks .dropdown-item:hover,
.imagebg.cover-blocks .dropdown-item:focus { color: #143a12 !important; background-color: #e7f0e3 !important; }

@media (prefers-reduced-motion: reduce) {
  .nn-btn, .nn-svc, .nn-guide { transition: none !important; }
}