/* Dark green + gold premium theme (2026-10-28, user brief: "same premium look
   as the AGRREEN store: one dark green colour family, gold accents, white and
   soft-cream text"). Brand colours fixed: green #323f2f, gold #ffd700; every
   other shade is derived from them.

   Loaded last on every page, after theme-dark.gen.css (generated by
   tools/darkify.py: flips every white card / dark text in the existing
   stylesheets). This file holds the hand-written parts: tokens, page
   background, header, dropdowns, buttons, cards, stat cards, forms.
   Everything is scoped under html:not(.hc) so High contrast mode is untouched. */

:root {
  --dk-darkest: #141b13;
  --dk-dark: #1c2519;
  --dk-mid: #232d21;
  --dk-card: #2b372a;
  --dk-card-hover: #323f2f;
  --dk-border: rgba(255, 215, 0, .18);
  --dk-border-strong: rgba(255, 215, 0, .4);
  --dk-white: #ffffff;
  /* user 2026-10-28: "heading text ffd700 aur baaki white" -> body and secondary text are white too */
  --dk-cream: #ffffff;
  --dk-muted: #ffffff;
  --dk-heading: #ffd700;
  --dk-gold: #ffd700;
  --dk-gold-light: #ffe566;
  --dk-gold-dark: #d4af00;
  --dk-ink: #000000;          /* user: "yellow button mein black" */
  --dk-panel: #263122;
  /* brand-borders.css draws every card ring from these two */
  --bb-ring: linear-gradient(var(--dk-border), var(--dk-border));
  --bb-fill: var(--dk-card);
}
html:not(.hc) { color-scheme: dark; }

/* ---------- page ---------- */
html:not(.hc) body, html:not(.hc) body.lx {
  color: var(--dk-cream);
  background: var(--dk-darkest);
  background: linear-gradient(160deg, var(--dk-darkest) 0%, var(--dk-dark) 45%, var(--dk-mid) 100%) fixed;
}
html:not(.hc) body.lx::before { display: none; }          /* paper grain + pale glows of the light theme */
html:not(.hc) body main, html:not(.hc) body.lx main { background: transparent; }
/* every heading is brand gold (beats the generated per-card title colours) */
html:not(.hc) body :is(h1, h2, h3, h4, h5, h6) { color: var(--dk-heading) !important; }
html:not(.hc) body :is(h1, h2, h3, h4, h5, h6) :not(svg, svg *) { color: inherit !important; }
/* one type scale everywhere (user: "heading size har jagah ek jaisa aur ek size mein text
   size and font same"): every heading Noto Serif 700 by level, all running text Roboto 16px */
html:not(.hc) body main :is(h1, h2, h3, h4, h5, h6) {
  font-family: 'Noto Serif', Georgia, serif !important; font-weight: 700 !important;
  line-height: 1.2 !important; letter-spacing: -0.01em !important;
}
html:not(.hc) body main h1 { font-size: clamp(30px, 3.2vw, 44px) !important; }
html:not(.hc) body main h2 { font-size: clamp(26px, 2.6vw, 36px) !important; }
html:not(.hc) body main h3 { font-size: clamp(18px, 1.5vw, 20px) !important; }
html:not(.hc) body main .flip-card h3 { font-size: clamp(16px, 1.25vw, 17px) !important; line-height: 1.25; }   /* team member names a bit smaller (user 2026-10-29) */
html:not(.hc) body main h4 { font-size: 18px !important; }
html:not(.hc) body main :is(h5, h6) { font-size: 16px !important; }
/* home value heading is a page h1 but must match the section headings exactly
   (user pasted both as class "section-title") */
/* Home value heading (user 2026-10-29): the 18ch cap wrapped it onto 5 lines; wider + balanced */
html:not(.hc) body main h1.lx-value__title {
  max-width: 920px; width: 100%; font-size: clamp(26px, 2.6vw, 36px) !important; line-height: 1.2; /* = Our Impact heading (h2), user 10-29 */
  text-align: left; text-wrap: balance; word-break: normal; overflow-wrap: normal; hyphens: none;
}
html:not(.hc) body .lx-value__head { grid-column: 1 / -1; text-align: left; }
html:not(.hc) body .lx-value__head .lx-value__rule { margin-bottom: 0; }
html:not(.hc) body .lx-value__grid { row-gap: 32px; }
@media (max-width: 640px) { html:not(.hc) body main h1.lx-value__title { max-width: 100%; } }
html:not(.hc) body main :is(p, li) {
  font-family: 'Roboto', 'Segoe UI', sans-serif !important; font-size: 16px !important;
  line-height: 1.7 !important; font-weight: 400;
}
html:not(.hc) body main :is(p, li) :is(strong, b) { font-weight: 700; }
html:not(.hc) body :focus-visible { outline: 2px solid var(--dk-gold); outline-offset: 3px; }
html:not(.hc) body :is(h1, h2, h3) em, html:not(.hc) body .lx-title em, html:not(.hc) body em.highlight {
  color: var(--dk-gold); box-shadow: none; background: none;
  text-decoration: none; /* user 2026-10-29: no underline on the gold last word of headings */
}
html:not(.hc) body ::selection { background: rgba(255, 215, 0, .35); color: var(--dk-white); }

/* ---------- accessibility bar + header ---------- */
html:not(.hc) body .a11y-bar { background: var(--dk-darkest); border-bottom: 1px solid rgba(255, 215, 0, .12); }
html:not(.hc) body .site-header {
  background: #323f2f;
  border-bottom: 1px solid rgba(255, 215, 0, .35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
html:not(.hc) body .site-header .nav-link { color: var(--dk-white); }
html:not(.hc) body .site-nav__list > .nav-item > .nav-link:hover,
html:not(.hc) body .site-nav__list > .nav-item:focus-within > .nav-link { color: var(--dk-gold-light); }
html:not(.hc) body .site-nav__list > .nav-item.is-active > .nav-link,
html:not(.hc) body .site-nav__list > .nav-item > .nav-link[aria-current] { color: var(--dk-gold); box-shadow: inset 0 -2px 0 var(--dk-gold); }
/* Donate = last menu item */
html:not(.hc) body .site-nav__list > .nav-item:last-child > .nav-link,
html:not(.hc) body .site-nav__list > .nav-item:last-child > .nav-link:hover {
  background: linear-gradient(135deg, var(--dk-gold-light), var(--dk-gold) 55%, var(--dk-gold-dark));
  color: var(--dk-ink); box-shadow: 0 6px 20px rgba(255, 215, 0, .22); translate: none;
}
html:not(.hc) body .site-nav__list > .nav-item:last-child > .nav-link:hover { filter: brightness(1.07); }

/* header wordmark (user's pasted brand block): Cinzel 700 + Montserrat 300; sizes stay per breakpoint (gov.css) */
html:not(.hc) body .site-header__name { display: inline-flex; flex-direction: column; align-items: stretch; }   /* width = title width */
html:not(.hc) body .site-header__name strong { font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
/* FOUNDATION spans the title exactly: F under U, N under E, equal gaps (each letter is an <i>) */
html:not(.hc) body .site-header__name .site-header__sub {
  display: flex; justify-content: space-between; width: 100%; margin-top: 4px;
  font-family: 'Montserrat', 'Segoe UI', sans-serif; font-weight: 300; letter-spacing: 0;
}
html:not(.hc) body .site-header__name .site-header__sub i { font-style: normal; }

/* ---------- dropdown menus (desktop) ---------- */
@media (min-width: 1200px) {
  html:not(.hc) body .nav-sub {
    z-index: 1000; padding: 6px; min-width: 220px;
    background: var(--dk-panel); backdrop-filter: none; opacity: 1;
    border: 1px solid rgba(255, 215, 0, .28); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  }
  html:not(.hc) body .nav-sub .nav-link { color: var(--dk-cream); background: transparent; border-radius: 10px; box-shadow: none; }
  html:not(.hc) body .nav-sub > .nav-item + .nav-item { border-top: 1px solid rgba(255, 215, 0, .14); }
  html:not(.hc) body .nav-sub .nav-link:hover, html:not(.hc) body .nav-sub .nav-link:focus-visible,
  html:not(.hc) body .nav-sub .nav-item.is-active > .nav-link {
    background: var(--dk-card-hover); color: var(--dk-gold-light); outline: none;
  }
}
/* mobile slide-out menu: same opaque dark panel */
@media (max-width: 1199px) {
  html:not(.hc) body .site-nav__panel { background: var(--dk-dark); }
  html:not(.hc) body .site-nav__panel .nav-link { color: var(--dk-cream); }
  html:not(.hc) body .site-nav__panel .nav-sub { background: var(--dk-panel); }
  html:not(.hc) body .site-nav__panel .nav-item { border-color: rgba(255, 215, 0, .14); }
  html:not(.hc) body .site-nav__panel .site-nav__list > .nav-item:last-child > .nav-link { color: var(--dk-ink) !important; }
}
html:not(.hc) body select option { background: var(--dk-panel); color: var(--dk-cream); }
html:not(.hc) body select option:checked { background: #323f2f; color: var(--dk-gold-light); }

/* ---------- big section cards ---------- */
html:not(.hc) body .lx-sec > .lx-wrap:not(.lx-wrap--bare), html:not(.hc) body .lx-panel {
  background: linear-gradient(180deg, var(--dk-card) 0%, var(--dk-dark) 100%) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
/* the thick gold/green left stripe becomes a thin gold line */
html:not(.hc) body .lx-sec > .lx-wrap::before, html:not(.hc) body .lx-panel::before { width: 3px; background: var(--dk-gold); }

/* brand-borders.css gives a few cards their own off-white fill: use the dark card fill */
html:not(.hc) body :is(.lx-inner .pathways__col, .lx-inner .program__card, .lx-story-page .rw-info-card, .lx-cloud:not(.lx-cloud--mini)) { --bb-fill: var(--dk-card); }

/* ---------- small cards: one shade lighter than the page, gold-tinted 1px border ---------- */
html:not(.hc) body :is(.lx-card, .lx-area, .lx-story, .lx-post, .lx-sdg__tile, .lx-quote, .lx-read__card, .lx-inner .sec-card) {
  border-width: 1px !important; border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
/* hover = border/colour change only: no lift, no scale */
html:not(.hc) body :is(.lx-card, .lx-area, .lx-story, .lx-post, .lx-sdg__tile, .lx-tile, .lx-scard, .lx-kpi, .lx-focus):hover {
  --bb-ring: linear-gradient(var(--dk-border-strong), var(--dk-border-strong));
  --bb-fill: var(--dk-card-hover);
  transform: none !important; translate: none !important; scale: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---------- chips / eyebrows ---------- */
html:not(.hc) body :is(.lx-eyebrow, .lx-chip, .chip, .eyebrow) {
  color: var(--dk-gold-light); background: transparent; border: 1px solid var(--dk-border);
}

/* every gold/yellow-filled button, tag, badge and number disc: black text (user: "yellow
   button mein black"); white on dark green everywhere else */
html:not(.hc) body :is(.lx-scard__tag, .lx-bcard__cat, .lx-hub__badge, .lx-form__submit, .ulf-apply-btn, .ulf-email-btn,
  .sahyog-tag, .sahyog-btn, .sahyog-obj-index, .unnati-tag, .unnati-btn, .utkarsh-tag, .utkarsh-btn, .utkarsh-obj-num,
  .pm-day-tab.active, .rw-story-qmark, .lx-hub__play, .subscribe-form button, .a11y-bar__group button[aria-pressed="true"], .a11y-bar__group button.is-active),
html:not(.hc) body :is(.sahyog-btn, .unnati-btn, .utkarsh-btn, .ulf-apply-btn, .ulf-email-btn, .lx-btn--primary) :is(svg, i, span) { color: #000 !important; }
html:not(.hc) body :is(.lx-btn--primary, .btn-primary)::after, html:not(.hc) body :is(.lx-btn--primary, .btn-primary)::before { color: #000; }
html:not(.hc) body :is(.ulf-cta-desc, .ulf-social-btn) { color: var(--dk-white); }
html:not(.hc) body .lx-hub__tg { color: var(--dk-gold); }

/* ---------- buttons ---------- */
html:not(.hc) body :is(.lx-btn, .btn-primary, .lx-form__submit) {
  background: linear-gradient(135deg, var(--dk-gold-light), var(--dk-gold) 55%, var(--dk-gold-dark));
  color: var(--dk-ink); border: 0; box-shadow: 0 6px 20px rgba(255, 215, 0, .22);
}
html:not(.hc) body :is(.lx-btn--primary, .btn-primary, .lx-form__submit) * { color: var(--dk-ink); }   /* arrow icons on the gold button */
html:not(.hc) body :is(.lx-btn, .btn-primary, .lx-form__submit):hover { filter: brightness(1.07); transform: none; translate: none; }
/* gold buttons stay gold with black text on hover / keyboard focus: page CSS (e.g. home-lx
   .lx-btn--primary:hover dark green) used to win and hide the black text (user 2026-10-29) */
/* Impact Stories slider arrows turn gold on hover: arrow black, like every gold button */
html:not(.hc) body .lx-stories__arrow:is(:hover, :focus-visible) { color: var(--dk-ink) !important; }
html:not(.hc) body :is(.lx-btn:not(.lx-btn--ghost):not(.lx-btn--line), .btn-primary, .lx-form__submit):is(:hover, :focus-visible, :active) {
  background: linear-gradient(135deg, var(--dk-gold-light), var(--dk-gold) 55%, var(--dk-gold-dark)); color: var(--dk-ink);
  box-shadow: 0 8px 24px rgba(255, 215, 0, .3);
}
html:not(.hc) body :is(.lx-btn--ghost, .lx-btn--line, .btn-secondary) {
  background: transparent; color: var(--dk-white); border: 1px solid var(--dk-border); box-shadow: none;
}
html:not(.hc) body :is(.lx-btn--ghost, .lx-btn--line, .btn-secondary):hover { border-color: rgba(255, 215, 0, .55); }

/* ---------- home: value section, floating stat cards, photo glow ---------- */
html:not(.hc) body .lx-cloud:not(.lx-cloud--mini) {
  --bb-fill: var(--dk-card);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}
html:not(.hc) body .lx-cloud:not(.lx-cloud--mini) strong { color: var(--dk-gold); }
html:not(.hc) body .lx-cloud:not(.lx-cloud--mini) span:not(.lx-cloud__dot) { color: var(--dk-cream); }
html:not(.hc) body .lx-cloud__dot { background: var(--dk-darkest); box-shadow: inset 0 0 0 10px var(--dk-darkest), inset 0 0 0 17px var(--dk-gold); }
html:not(.hc) body .lx-cloud--mini { background: var(--dk-darkest); border: 1px solid var(--dk-border); }
html:not(.hc) body .lx-cloud--mini strong { color: var(--dk-gold); }
html:not(.hc) body .lx-cloud--mini span:not(.lx-cloud__dot) { color: var(--dk-cream); }
html:not(.hc) body .lx-value__glow { background: radial-gradient(circle at 50% 55%, rgba(255, 215, 0, .18), transparent 66%); }
html:not(.hc) body .lx-value__halo { border-color: rgba(255, 215, 0, .25); }
html:not(.hc) body .lx-value__ground { background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); }
html:not(.hc) body .lx-value__facts dt { color: var(--dk-gold); }
/* Key Areas outlined numerals (were a green outline on a green badge) */
html:not(.hc) body .lx-area__num { -webkit-text-stroke-color: var(--dk-gold); background: var(--dk-darkest); }

/* ---------- partner logo scroll: original light colours (user: "logo scroll card ko pehle
   aisa hi colour rakhna"); the logos use mix-blend-mode: multiply and need a light ground ---------- */
html:not(.hc) body .lx-partners {
  /* user 2026-10-28: section behind the logo cards = brand green, cards stay white */
  background: #323f2f; border-top: 1px solid var(--dk-border);
}
html:not(.hc) body .lx-logo {
  --bb-fill: #fff;
  --bb-ring: linear-gradient(135deg, #ffd700 0%, #ffd700 18%, #8a8f3a 52%, #323f2f 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);   /* deeper shadow on the dark band */
}
html:not(.hc) body .lx-logo:hover {
  --bb-ring: linear-gradient(315deg, #ffd700 0%, #ffd700 22%, #8a8f3a 55%, #323f2f 100%);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, .18), 0 24px 40px -24px rgba(20, 30, 20, .5);
}

/* ---------- equal-height card rows ---------- */
html:not(.hc) body :is(.lx-areas, .lx-posts, .lx-kpis, .lx-focus__grid, .lx-blogs__grid, .lx-inner .program__grid, .lx-inner .project-grid) { align-items: stretch; }
html:not(.hc) body :is(.lx-area, .lx-post, .lx-kpi, .lx-card) { height: 100%; display: flex; flex-direction: column; }
html:not(.hc) body :is(.lx-area, .lx-post, .lx-card) > :last-child:is(a, .lx-btn, .lx-more) { margin-top: auto; }

/* ---------- photos ---------- */
html:not(.hc) body main img.photo, html:not(.hc) body .lx-voice__pic img { border: 1px solid var(--dk-border); }

/* ---------- forms: static, labels above, 46px inputs, gold focus ---------- */
html:not(.hc) body :is(form, .lx-form, .lx-apply, .lx-apply *, .lx-form *) {
  transform: none !important; animation: none !important; transition: none !important; perspective: none !important;
  translate: none !important; rotate: none !important; scale: none !important;
}
html:not(.hc) body .lx-form {
  background: linear-gradient(180deg, var(--dk-card), var(--dk-dark)); border: 1px solid var(--dk-border); border-radius: 20px;
  padding: 28px;
}
@media (max-width: 600px) { html:not(.hc) body .lx-form { padding: 18px; } }
html:not(.hc) body .lx-field label, html:not(.hc) body .lx-form label { display: block; color: var(--dk-cream); }
html:not(.hc) body :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea) {
  min-height: 46px; background: var(--dk-card); color: var(--dk-white);
  border: 1px solid var(--dk-border); border-radius: 12px;
}
html:not(.hc) body textarea { min-height: 110px; }
html:not(.hc) body :is(input, textarea)::placeholder { color: var(--dk-muted); opacity: 1; }
html:not(.hc) body :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea):is(:focus, :focus-visible) {
  outline: none; border-color: var(--dk-gold); box-shadow: none;
}

/* ---------- footer: same dark family ---------- */
html:not(.hc) body .site-footer { background: var(--dk-darkest); border-top: 1px solid rgba(255, 215, 0, .25); }

/* ---------- consistency pass (user: "check any gap mis match and unprofessional") ---------- */
/* two fonts only: Noto Serif for headings, Roboto for everything else (was also Manrope,
   -apple-system and Roboto Slab on ~1,250 labels, numbers and buttons) */
html:not(.hc) body :is(main, .site-footer, .site-nav, .a11y-bar) *:not(:is(h1, h2, h3, h4, h5, h6)):not(:is(h1, h2, h3, h4, h5, h6) *):not(svg):not(svg *) {
  font-family: 'Roboto', 'Segoe UI', sans-serif !important;
}
html:not(.hc) body .site-footer :is(h2, h3, h4) { font-family: 'Noto Serif', Georgia, serif !important; font-weight: 700; }

/* one action-button style: pill, Roboto 15px bold, same padding */
html:not(.hc) body :is(.lx-btn, .btn-gold, .ulf-apply-btn, .ulf-email-btn, .sahyog-btn, .unnati-btn, .utkarsh-btn,
  .project-card__btn, .lx-scard__more, .story-card__more, .lx-form__submit, .ulf-social-btn) {
  border-radius: 999px !important; font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: .01em !important; text-transform: none !important; line-height: 1.2 !important;
  padding: 11px 22px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
/* buttons without a gold fill: gold-tinted outline on dark */
html:not(.hc) body :is(.lx-btn--ghost, .project-card__btn, .lx-scard__more, .story-card__more, .ulf-social-btn, .btn-gold:not([style*=background])) {
  background: transparent !important; color: var(--dk-white) !important; border: 1px solid var(--dk-border-strong) !important; box-shadow: none !important;
}
html:not(.hc) body :is(.lx-btn--ghost, .project-card__btn, .lx-scard__more, .story-card__more, .ulf-social-btn, .btn-gold):hover {
  border-color: var(--dk-gold) !important; color: var(--dk-gold-light) !important;
}
/* filters and tabs: same font and pill shape */
html:not(.hc) body :is(.lx-blogs__chips button, .lx-chips button, .tabs__nav button, .pm-day-tab, [role="tab"]:not(.lx-sectors__tab)) {
  border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .01em !important;
}

/* ---------- section head (user's pasted .section-head, both blocks applied in order):
   title left, wider intro right, title vertically centred, thin rule below ---------- */
html:not(.hc) body .lx-head {
  display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 0 40px;
  max-width: none; padding-bottom: 20px; margin: 0 0 28px; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
html:not(.hc) body .lx-head > .lx-eyebrow { grid-column: 1; grid-row: 1; margin: 0 0 12px; align-self: end; }
html:not(.hc) body .lx-head > .lx-title { grid-column: 1; margin: 0 0 12px; }
html:not(.hc) body .lx-head > .lx-intro { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; max-width: none; }
html:not(.hc) body .lx-head > .lx-intro, html:not(.hc) body .lx-head > .lx-intro p { font-size: 16px !important; line-height: 1.7 !important; }
html:not(.hc) body .lx-head:not(:has(.lx-intro)) { grid-template-columns: 1fr; }
/* no eyebrow: the title alone spans both rows so it sits in the vertical middle of the intro */
html:not(.hc) body .lx-head:not(:has(.lx-eyebrow)) > .lx-title { grid-row: 1 / span 2; align-self: center; margin: 0; }
@media (max-width: 900px) {
  html:not(.hc) body .lx-head { grid-template-columns: 1fr; gap: 12px; }
  html:not(.hc) body .lx-head > :is(.lx-eyebrow, .lx-title, .lx-intro) { grid-column: 1; grid-row: auto; margin: 0; }
}

/* ---------- focus-area cards (user's pasted .focus-card): no fixed height, content left,
   72px ring right and vertically centred ---------- */
html:not(.hc) body .lx-fcard {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px;
  padding: 20px 24px; min-height: 0; height: auto;
}
html:not(.hc) body .lx-fcard__top { display: contents; }
html:not(.hc) body .lx-fcard { grid-template-columns: minmax(0, 1fr) auto; }
/* equal boxes, 2 per row: each card is wide enough for text + ring side by side */
html:not(.hc) body .lx-focus__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
html:not(.hc) body .lx-focus__cards > .lx-fcard--feat { grid-column: auto; }
@media (max-width: 760px) { html:not(.hc) body .lx-focus__cards { grid-template-columns: 1fr; } }
html:not(.hc) body .lx-fcard > :not(.lx-fcard__top), html:not(.hc) body .lx-fcard__ic { grid-column: 1; }
html:not(.hc) body .lx-fcard__ic { justify-self: start; }
html:not(.hc) body .lx-fcard .lx-fcard__ring, html:not(.hc) body .lx-fcard--feat .lx-fcard__ring {
  --s: 72px; width: 72px; height: 72px; grid-column: 2; grid-row: 1 / span 7; align-self: center;
}
html:not(.hc) body .lx-fcard--feat .lx-fcard__ring b { font-size: 15px; }
/* ring track visible on the dark card (it had become the card colour, so a 0.6% share looked broken) */
html:not(.hc) body .lx-fcard__ring:not(.is-pend) { background: conic-gradient(var(--dk-gold) calc(var(--pa) * 1%), rgba(255, 255, 255, .14) 0); }
html:not(.hc) body .lx-focus .lx-fcard .lx-fcard__h.lx-fcard__h {
  min-height: 0; margin: 8px 0 4px; font-family: 'Noto Serif', Georgia, serif !important; font-size: 18px; font-weight: 700; color: var(--dk-heading);
}
html:not(.hc) body .lx-fcard__n, html:not(.hc) body .lx-fcard--feat .lx-fcard__n { font-size: 40px; line-height: 1; margin: 0; }
html:not(.hc) body .lx-fcard__d { margin: 8px 0; }
html:not(.hc) body .lx-fcard:hover, html:not(.hc) body .lx-fcard:focus-visible { translate: none; }

/* ---------- tagline (user: "highlight our tag line"), About Us page ---------- */
html:not(.hc) body main p.about__quote.about__quote.about__quote {
  position: relative; display: block; max-width: 860px; margin: 18px auto 30px !important; padding: 34px 40px 28px;
  font-family: 'Noto Serif', Georgia, serif !important; font-style: italic; font-weight: 700 !important;
  font-size: clamp(20px, 2.1vw, 27px) !important; line-height: 1.5 !important; letter-spacing: .005em;
  color: var(--dk-gold) !important; text-align: center !important;
  background: radial-gradient(120% 140% at 50% 0%, rgba(255, 215, 0, .12), rgba(255, 215, 0, .03) 60%, transparent);
  border-top: 1px solid rgba(255, 215, 0, .45); border-bottom: 1px solid rgba(255, 215, 0, .45); border-radius: 18px;
  text-shadow: 0 2px 18px rgba(255, 215, 0, .18);
}
html:not(.hc) body main p.about__quote::before {
  content: '\2726'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  font: normal 700 13px/1 'Roboto', sans-serif; color: var(--dk-ink); background: var(--dk-gold);
  box-shadow: 0 0 0 4px var(--dk-dark);
}
@media (max-width: 600px) { html:not(.hc) body main p.about__quote { padding: 28px 20px 22px; } }

/* scheme enrolments block keeps the sizes from the user's pasted .ulf-analytics CSS */
html:not(.hc) body main .ulf-analytics h3.an-title { font-size: 1.5rem !important; margin: 0 0 6px; }
html:not(.hc) body main .ulf-analytics p.an-sub { font-size: .95rem !important; color: #d9dccf; margin: 0 0 20px !important; }
html:not(.hc) body main .ulf-analytics li.an-row { font-size: 16px !important; line-height: 1.4 !important; }

@media (prefers-reduced-motion: reduce) {
  html:not(.hc) body * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Home value card: same 52px side padding as every other section card, so its
   heading lines up with the rest (user 2026-10-29: "alignment bhi sahi karo") */
@media (min-width: 1025px) { html:not(.hc) body .lx-value > .lx-wrap { padding-inline: 52px; } }

/* ---------- admin editor colour choices (website colours only) ---------- */
html:not(.hc) .tc-gold { color: var(--dk-gold) !important; }
html:not(.hc) .tc-white { color: var(--dk-white) !important; }
html:not(.hc) .hl-gold { padding: 0 .2em; border-radius: 3px; background: var(--dk-gold); color: var(--dk-ink) !important; }
html:not(.hc) .hl-green { padding: 0 .2em; border-radius: 3px; background: #323f2f; color: var(--dk-white) !important; box-shadow: 0 0 0 1px var(--dk-border-strong); }
html:not(.hc) .rt-table th, html:not(.hc) .rt-table td { border-color: var(--dk-border-strong); }
html:not(.hc) .rt-table th { background: var(--dk-card); color: var(--dk-heading); }


/* ---------- admin Font menu (user 2026-10-30): the site's own 4 fonts only ----------
   tripled class: beats the "two fonts only" rule and the heading rule above (both !important) */
html:not(.hc) body :is(.ff-serif.ff-serif.ff-serif, .ff-serif.ff-serif.ff-serif *) { font-family: 'Noto Serif', Georgia, serif !important; }
html:not(.hc) body :is(.ff-sans.ff-sans.ff-sans, .ff-sans.ff-sans.ff-sans *) { font-family: 'Roboto', 'Segoe UI', sans-serif !important; }
html:not(.hc) body :is(.ff-montserrat.ff-montserrat.ff-montserrat, .ff-montserrat.ff-montserrat.ff-montserrat *) { font-family: 'Montserrat', 'Segoe UI', sans-serif !important; }
html:not(.hc) body :is(.ff-cinzel.ff-cinzel.ff-cinzel, .ff-cinzel.ff-cinzel.ff-cinzel *) { font-family: 'Cinzel', Georgia, serif !important; }

/* Home, Activities at a Glance: yellow button tabs, 2 per row (user 2026-11-06).
   Specificity (0,3,1) beats the generated dark/home-lx.css rules. */
html:not(.hc) .lx-sectors__tabs { border: 0; }
html:not(.hc) .lx-sectors__tabs > .lx-sectors__tab { background: var(--dk-gold); color: var(--dk-ink); border: 2px solid var(--dk-gold); }
html:not(.hc) .lx-sectors__tabs > .lx-sectors__tab:hover { background: var(--dk-gold); color: var(--dk-ink); }
html:not(.hc) .lx-sectors__tabs > .lx-sectors__tab[aria-selected="true"] { background: var(--dk-card-hover); color: var(--dk-gold); border-color: var(--dk-gold); }

/* 2026-11-09: careers "no open positions" line was dark ink on the dark card (unreadable) */
html:not(.hc) .ulf-vacancies .ulf-vacancy-empty { color: #ece8d6; border-color: rgba(255, 215, 0, .45); background: rgba(0, 0, 0, .12); }