/*
 * GO USETECH CMS v2.1.7 — review corrections.
 *
 * Loaded last so it can correct spacing, type scale, partner alignment and the
 * dark blue sections without rewriting the existing stylesheets. Each block
 * below maps to a specific point raised in the 21 August website review.
 */

/* -------------------------------------------------------------------------
 * 1. Excessive white space between paragraphs and sections (00:05:15)
 * ---------------------------------------------------------------------- */
.gtc-site .gtc-section { padding-block: clamp(44px, 5vw, 72px); }
.gtc-site .gtc-section + .gtc-section { padding-top: clamp(32px, 3.6vw, 56px); }
.gtc-site .gtc-rich-copy p,
.gtc-site .gtc-section p,
.gtc-site .storyEditorialCopy p { margin-block: 0 0.85em; }
.gtc-site .gtc-rich-copy p:last-child,
.gtc-site .gtc-section p:last-child { margin-bottom: 0; }
.gtc-site .gtc-section-heading { margin-bottom: clamp(20px, 2.4vw, 34px); }
.gtc-site .gtc-section-heading h2 { margin-block: 6px 8px; }
.gtc-site .gtc-section-heading p { margin-top: 6px; max-width: 68ch; }
.gtc-site .introSection,
.gtc-site .valuesSection,
.gtc-site .programsSection,
.gtc-site .approachSection,
.gtc-site .homeUpdatesSection,
.gtc-site .mediaSection,
.gtc-site .testimonialsSection,
.gtc-site .partnersSection { padding-block: clamp(46px, 5vw, 78px); }
.gtc-site .directionSection { padding-block: clamp(28px, 3vw, 46px); }
.gtc-site .aboutGrid { gap: clamp(20px, 2.4vw, 34px); margin-top: clamp(20px, 2.4vw, 32px); }
.gtc-site .aboutDetail + .gtc-site .aboutDetail { margin-top: 18px; }
.gtc-site .gtc-shell > *:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
 * 2. Font size in Our Approach, Our Home and How We Work (00:07:28)
 * ---------------------------------------------------------------------- */
.gtc-site .aboutDetails .aboutDetail span { font-size: 0.78rem; letter-spacing: .14em; }
.gtc-site .aboutDetails .aboutDetail h3 { font-size: clamp(1.18rem, 1.6vw, 1.45rem); line-height: 1.25; }
.gtc-site .aboutDetails .aboutDetail p { font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.62; color: #4c5a72; }
.gtc-site .approachSection .approachCopy h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.gtc-site .approachSection .approachCopy p { font-size: clamp(1.03rem, 1.2vw, 1.15rem); line-height: 1.66; }
.gtc-site .approachSection .stepsList h3 { font-size: clamp(1.1rem, 1.35vw, 1.28rem); }
.gtc-site .approachSection .stepsList p { font-size: clamp(0.99rem, 1.1vw, 1.06rem); line-height: 1.6; }
.gtc-site .gtc-process-line article span { font-size: 1.05rem; }
.gtc-site .gtc-process-line article p { font-size: 1rem; line-height: 1.58; }

/* -------------------------------------------------------------------------
 * 3. Dark blue sections not rendering as intended (00:10:51)
 * ---------------------------------------------------------------------- */
.gtc-site .approachSection,
.gtc-site .donateSection,
.gtc-site .gtc-final-action {
  /* A lighter, less flat navy with a subtle gradient so text and buttons read
     clearly instead of disappearing into a solid block. */
  background: linear-gradient(150deg, #141c47 0%, #222d6b 55%, #1b2557 100%) !important;
  color: #f3f6fb;
}
.gtc-site .approachSection h2,
.gtc-site .donateSection h2,
.gtc-site .gtc-final-action h2 { color: #ffffff; }
.gtc-site .approachSection p,
.gtc-site .donateSection p,
.gtc-site .gtc-final-action p { color: rgba(240, 245, 252, .84); }
.gtc-site .approachSection .eyebrow.light span,
.gtc-site .donateSection .eyebrow.light span { background: #f79828; }
.gtc-site .approachSection .ropeTrack { background: rgba(255, 255, 255, .18); }
.gtc-site .approachSection .ropeKnot { background: #f79828; box-shadow: 0 0 0 4px rgba(247, 152, 40, .22); }
.gtc-site .donateSection .donationPanel { background: #ffffff; color: #26324a; }

/* -------------------------------------------------------------------------
 * 4. Trusted Partners logos not aligned or legible (00:09:52)
 * ---------------------------------------------------------------------- */
.gtc-site .partnerTrack { align-items: center; }
.gtc-site .partnerSet { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.gtc-site .partnerCard {
  display: flex; align-items: center; justify-content: center;
  width: clamp(150px, 15vw, 200px); height: 104px;
  padding: 16px 20px; background: #ffffff;
  border: 1px solid #e6ecf3; border-radius: 12px;
  flex: 0 0 auto; transition: box-shadow .2s ease, transform .2s ease;
}
.gtc-site .partnerCard:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23, 31, 78, .1); }
.gtc-site .partnerLogo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.gtc-site .partnerLogo img {
  /* Uniform optical size regardless of whether a logo is wide or square, so
     the three marquee rows line up and stay readable. */
  max-width: 100%; max-height: 62px; width: auto; height: auto;
  object-fit: contain; filter: none; opacity: 1; mix-blend-mode: normal;
}
.gtc-site .partnerMarquee { padding-block: 10px; }
.gtc-site .partnerRows { display: grid; gap: 14px; }

/* -------------------------------------------------------------------------
 * 5. Success-story video slider
 * ---------------------------------------------------------------------- */
.gtcStorySlider { margin-top: clamp(20px, 2.4vw, 32px); }
.gtcStoryViewport { overflow: hidden; border-radius: 16px; }
.gtcStoryTrack { display: flex; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.gtcStorySlide { flex: 0 0 100%; padding-inline: 4px; }
.gtcStorySlide .videoFrame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0e1430; }
.gtcStorySlide .videoFrame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gtcStorySlide span { display: block; margin-top: 16px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #f79828; }
.gtcStorySlide h3 { margin: 7px 0 0; font-size: clamp(1.15rem, 1.7vw, 1.5rem); color: inherit; }
.gtcStorySlide p { margin: 8px 0 0; font-size: 1rem; line-height: 1.6; opacity: .86; }
.gtcStorySliderPlaylist .videoFrame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0e1430; }
.gtcStorySliderPlaylist .videoFrame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gtcStorySliderNote { margin-top: 12px; font-size: .9rem; opacity: .72; text-align: center; }
.gtcStoryNav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.gtcStoryNav button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #f79828; color: #171f4e; font-size: .95rem; cursor: pointer; transition: transform .18s ease; }
.gtcStoryNav button:hover { transform: translateY(-2px); }
.gtcStoryNav button:disabled { opacity: .4; cursor: default; transform: none; }
.gtcStoryDots { display: inline-flex; gap: 7px; }
.gtcStoryDots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity .2s ease, width .2s ease; }
.gtcStoryDots i.is-active { opacity: 1; width: 22px; border-radius: 999px; }

/* -------------------------------------------------------------------------
 * 6. Tabbed News and Events archives
 * ---------------------------------------------------------------------- */
.gtcTabList { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; border-bottom: 1px solid #e2e9f1; padding-bottom: 12px; }
.gtcTabList button {
  border: 1px solid #dce5ee; background: #fff; color: #5c6a80;
  border-radius: 999px; padding: 10px 16px; font: inherit; font-size: .86rem;
  font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gtcTabList button b { background: #eef3f8; color: #47566d; border-radius: 999px; padding: 2px 8px; font-size: .74rem; }
.gtcTabList button:hover { border-color: #b9cadd; color: #22304a; }
.gtcTabList button.is-active { background: #171f4e; border-color: #171f4e; color: #fff; }
.gtcTabList button.is-active b { background: rgba(255, 255, 255, .18); color: #fff; }
.gtcTabPanel { display: none; }
.gtcTabPanel.is-active { display: block; animation: gtcFadeIn .25s ease; }
.gtcTabIntro { margin: 0 0 18px; color: #6b788e; font-size: .98rem; }
@keyframes gtcFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------------------
 * 7. Recommended / related sidebar
 * ---------------------------------------------------------------------- */
.gtcArchiveWithSide { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 3vw, 44px); align-items: start; }
.gtcRelatedSidebar { position: sticky; top: 96px; background: #f7f9fc; border: 1px solid #e3eaf2; border-radius: 14px; padding: 20px; }
.gtcRelatedSidebar h2 { margin: 0 0 14px; font-size: 1.02rem; color: #171f4e; letter-spacing: .01em; }
.gtcRelatedSidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gtcRelatedSidebar a { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.gtcRelatedSidebar img,
.gtcRelatedSidebar .gtcRelatedPlaceholder {
  width: 64px; height: 64px; flex: none; border-radius: 10px;
  object-fit: cover; background: #e7edf4; display: grid; place-items: center; color: #94a2b6;
}
.gtcRelatedSidebar strong { display: block; font-size: .92rem; line-height: 1.35; color: #22304a; }
.gtcRelatedSidebar small { display: block; margin-top: 4px; font-size: .76rem; color: #7b8798; }
.gtcRelatedSidebar a:hover strong { color: #2a8fc0; }
.gtcRelatedAll { display: inline-block; margin-top: 16px; font-size: .82rem; font-weight: 800; color: #2a8fc0; text-decoration: none; }

/* -------------------------------------------------------------------------
 * 8. Donation page — online giving vs bank deposit (00:12:36, 00:14:00)
 * ---------------------------------------------------------------------- */
.gtc-site .gtc-give-section { padding-block: clamp(40px, 4.4vw, 66px); }
.gtcGiveChoice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); }
.gtcGiveCard { border: 1px solid #dde5ee; border-radius: 16px; padding: clamp(22px, 2.4vw, 32px); background: #fff; display: flex; flex-direction: column; }
.gtcGiveCard.gtcGiveOnline { border-color: #f79828; box-shadow: 0 16px 40px rgba(247, 152, 40, .12); }
.gtcGiveTag { display: inline-block; font-size: .7rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #2a8fc0; }
.gtcGiveCard h3 { margin: 10px 0 8px; font-size: clamp(1.3rem, 1.9vw, 1.62rem); color: #171f4e; }
.gtcGiveCard > p { margin: 0 0 16px; color: #5f6d84; font-size: 1rem; line-height: 1.58; }
.gtcGiveCard ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.gtcGiveCard ul li { position: relative; padding-left: 26px; font-size: .96rem; color: #4d5b72; }
.gtcGiveCard ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #12795c; font-weight: 900; }
.gtcGiveButton { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #f79828; color: #171f4e; font-weight: 900; padding: 14px 20px; border-radius: 10px; text-decoration: none; transition: transform .18s ease, filter .18s ease; }
.gtcGiveButton:hover { transform: translateY(-2px); filter: brightness(1.04); }
.gtcGiveButtonAlt { background: #171f4e; color: #fff; }
.gtcBankList { display: grid; gap: 14px; margin-bottom: 20px; }
.gtcBankRow { border: 1px solid #e5ebf2; border-radius: 12px; padding: 16px 18px; background: #f8fafc; }
.gtcBankLabel { display: inline-block; margin-bottom: 10px; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #2a8fc0; }
/* Aligned label/value pairs, replacing the previously ragged bank block. */
.gtcBankRow dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: .92rem; }
.gtcBankRow dt { color: #77839a; font-weight: 700; }
.gtcBankRow dd { margin: 0; color: #22304a; font-weight: 700; word-break: break-word; }
.gtcBankRow dd code { background: #eef3f8; border-radius: 6px; padding: 2px 7px; font-size: .95em; letter-spacing: .06em; }
.gtcBankPending { color: #8a5610; background: #fff7ea; border: 1px solid #f0dfbc; border-radius: 10px; padding: 12px 14px; font-size: .9rem; }

/* -------------------------------------------------------------------------
 * 9. Policy library
 * ---------------------------------------------------------------------- */
.gtcPolicyLibrary { display: grid; gap: clamp(26px, 3vw, 40px); }
.gtcPolicyGroup h3 { margin: 0 0 16px; font-size: 1.08rem; color: #171f4e; padding-bottom: 10px; border-bottom: 1px solid #e4ebf2; }
.gtcPolicyGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gtcPolicyCard { display: flex; flex-direction: column; gap: 0; border: 1px solid #e0e7ee; border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.gtcPolicyCard:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(23, 31, 78, .09); }
.gtcPolicyPreview { width: 100%; height: 360px; background: #f3f6fa; border-bottom: 1px solid #e2e8ef; overflow: hidden; }
.gtcPolicyPreview iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.gtcPolicyPreviewEmpty { height: 100%; display: grid; place-items: center; color: #8792a4; gap: 8px; font-size: .9rem; }
.gtcPolicyBody { padding: 18px; }
.gtcPolicyIcon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: #fdf0e0; color: #cf6f12; font-size: 1.15rem; margin-bottom: 10px; }
.gtcPolicyCard h4 { margin: 0 0 6px; font-size: 1.02rem; color: #171f4e; line-height: 1.3; }
.gtcPolicyCard p { margin: 0 0 10px; font-size: .9rem; color: #66738a; line-height: 1.5; }
.gtcPolicyMeta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: .76rem; color: #8a94a6; }
.gtcPolicyMeta span { background: #f2f6fa; border-radius: 999px; padding: 3px 10px; }
.gtcPolicyDownload { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 800; color: #2a8fc0; text-decoration: none; }
.gtcPolicyActions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.gtcPolicyDownload.secondary { color:#171f4e; }
.gtcPolicyDownload:hover { text-decoration: underline; }
@media (max-width: 760px) { .gtcPolicyGrid { grid-template-columns: 1fr; } .gtcPolicyPreview { height: 300px; } }
.gtcPolicyPending { font-size: .82rem; color: #8a5610; }

/* -------------------------------------------------------------------------
 * 10. Testimonials shown inline as slides
 * ---------------------------------------------------------------------- */
.gtc-site .testimonialLaunchInner { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.gtc-site .testimonialLaunchActions { display: flex; justify-content: center; }
.gtc-site .testimonialMiniCard img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.gtc-site .testimonialMiniCard blockquote { font-size: 1rem; line-height: 1.62; }

/* -------------------------------------------------------------------------
 * 11. Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .gtcArchiveWithSide { grid-template-columns: 1fr; }
  .gtcRelatedSidebar { position: static; }
}
@media (max-width: 780px) {
  .gtcGiveChoice { grid-template-columns: 1fr; }
  .gtcBankRow dl { grid-template-columns: 1fr; gap: 2px; }
  .gtcBankRow dt { margin-top: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
  .gtc-site .partnerCard { width: 138px; height: 88px; padding: 12px 14px; }
  .gtc-site .partnerLogo img { max-height: 50px; }
  .gtcTabList { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 14px; }
  .gtcTabList button { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .gtcStoryTrack { transition: none; }
  .gtcTabPanel.is-active { animation: none; }
}

/* =========================================================================
 * 12. Responsive navigation hardening (v2.1.7c)
 *
 * static-ui.css carried the entire mobile navigation inside media queries
 * written in Level 4 range syntax — @media (width<=1100px). Browsers older
 * than Chrome 104, Safari 16.4 or Firefox 102 discard that block completely,
 * so the hamburger appeared but the panel behind it had no layout at all.
 * Those queries are now standard syntax, and the rules below restate the
 * critical parts so the menu cannot silently break again.
 * ====================================================================== */

@media (max-width: 1100px) {
  .gtc-site .globalHeader .megaNav,
  .gtc-site .globalHeader .navActions { display: none !important; }

  .gtc-site .globalMobileMenu { display: block !important; position: relative; margin-left: auto; }

  .gtc-site .globalMobileMenu > summary {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; gap: 5px; flex-direction: column;
    cursor: pointer; list-style: none;
    border: 1px solid rgba(23, 31, 78, .25); border-radius: 12px; background: #fff;
  }
  .gtc-site .globalMobileMenu > summary::-webkit-details-marker { display: none; }
  .gtc-site .globalMobileMenu > summary::marker { content: ""; }
  .gtc-site .globalMobileMenu > summary span {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: #171f4e;
    transition: transform .2s ease, opacity .2s ease;
  }
  .gtc-site .globalMobileMenu[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .gtc-site .globalMobileMenu[open] > summary span:nth-child(2) { opacity: 0; }
  .gtc-site .globalMobileMenu[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The panel is anchored to the viewport rather than the button, so a long
     menu can scroll instead of running off the bottom of the screen. */
  .gtc-site .globalMobileMenu > .mobileNavPanel {
    position: fixed; left: 0; right: 0; top: var(--gtc-nav-bottom, 72px);
    max-height: calc(100vh - var(--gtc-nav-bottom, 72px));
    max-height: calc(100dvh - var(--gtc-nav-bottom, 72px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 18px 28px; margin: 0;
    background: #fff; border-top: 1px solid #e3e9f0;
    box-shadow: 0 22px 50px rgba(23, 31, 78, .18);
    z-index: 999;
  }
  .gtc-site .mobileNavPanel > a,
  .gtc-site .mobileNavPanel > details > summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 6px; font-size: 1rem; font-weight: 700; color: #1d2747;
    text-decoration: none; border-bottom: 1px solid #eef2f7; cursor: pointer;
    list-style: none; min-height: 48px;
  }
  .gtc-site .mobileNavPanel > details > summary::-webkit-details-marker { display: none; }
  .gtc-site .mobileNavPanel > details[open] > summary { color: #2a8fc0; }
  .gtc-site .mobileNavPanel > details[open] > summary i { transform: rotate(180deg); }
  .gtc-site .mobileNavPanel > details > summary i { transition: transform .2s ease; font-size: .8em; }
  .gtc-site .mobileNavPanel > details > div { display: flex; flex-direction: column; padding: 4px 0 10px 14px; }
  .gtc-site .mobileNavPanel > details > div a {
    padding: 12px 6px; font-size: .94rem; color: #55637b; text-decoration: none;
    border-bottom: 1px solid #f3f6f9; min-height: 44px; display: flex; align-items: center;
  }
  .gtc-site .mobileNavPanel > details > div a:active { color: #2a8fc0; }
  .gtc-site .mobileNavPanel .mobileElearning,
  .gtc-site .mobileNavPanel .mobileDonate {
    justify-content: center; margin-top: 12px; border: 0; border-radius: 10px;
    padding: 15px; font-weight: 900; color: #171f4e; background: #f79828;
  }
  .gtc-site .mobileNavPanel .mobileElearning { background: #171f4e; color: #fff; margin-top: 16px; }

  /* Stop the page behind the open menu from scrolling. */
  body.gtc-nav-open { overflow: hidden; }
}

@media (min-width: 1101px) {
  .gtc-site .globalMobileMenu { display: none !important; }
}

/* Touch devices cannot hover, so the desktop mega panel is opened by tap.
   The script toggles .is-open; this keeps it usable if hover is unavailable. */
@media (hover: none) and (min-width: 1101px) {
  .gtc-site .megaItem:hover > .megaPanel { opacity: 0; visibility: hidden; pointer-events: none; }
  .gtc-site .megaItem.is-open > .megaPanel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
}

/* =========================================================================
 * 13. General page hardening
 *
 * Guards against the layout faults that show up across many pages at once:
 * horizontal scrolling, oversized media, tables wider than the screen and
 * fixed multi-column grids that never collapse.
 * ====================================================================== */

/* Contain horizontal overflow WITHOUT breaking position:sticky. `overflow-x:
 * hidden` on html or body makes them the scroll container and stops sticky
 * sidebars working, so `clip` is used instead. Browsers that do not support
 * clip simply ignore the declaration, which is harmless. */
html { overflow-x: clip; }
html, body.gtc-site { max-width: 100%; }
.gtc-site img,
.gtc-site video,
.gtc-site iframe,
.gtc-site svg { max-width: 100%; }
.gtc-site img { height: auto; }
.gtc-site pre,
.gtc-site code { white-space: pre-wrap; word-break: break-word; }
/* Long unbroken strings — emails, URLs, account numbers — must not force the
   page wider than the viewport. */
.gtc-site p,
.gtc-site li,
.gtc-site h1,
.gtc-site h2,
.gtc-site h3,
.gtc-site dd,
.gtc-site td { overflow-wrap: break-word; word-wrap: break-word; }
.gtc-site table { max-width: 100%; }
.gtc-site .gtc-shell,
.gtc-site .wideShell,
.gtc-site .pageShell { max-width: 100%; }

@media (max-width: 900px) {
  /* Any grid still locked to three or more fixed columns collapses to two. */
  .gtc-site .gtc-values-grid,
  .gtc-site .gtc-four-cards,
  .gtc-site .gtc-impact-grid,
  .gtc-site .gtc-contact-grid,
  .gtc-site .gtc-objective-list,
  .gtc-site .gtc-donation-table,
  .gtc-site .teamGrid,
  .gtc-site .sponsorProfilesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gtc-site .gtc-split,
  .gtc-site .gtc-two-column-list,
  .gtc-site .eventSingleLayout,
  .gtc-site .storyEditorialLayout { grid-template-columns: 1fr !important; }
  /* Tables scroll horizontally inside their own box rather than the page. */
  .gtc-site .gtc-section table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 620px) {
  .gtc-site .gtc-values-grid,
  .gtc-site .gtc-four-cards,
  .gtc-site .gtc-impact-grid,
  .gtc-site .gtc-contact-grid,
  .gtc-site .gtc-objective-list,
  .gtc-site .gtc-donation-table,
  .gtc-site .teamGrid,
  .gtc-site .sponsorProfilesGrid,
  .gtc-site .eventsGrid,
  .gtc-site .storiesGrid,
  .gtc-site .wpNewsGrid { grid-template-columns: 1fr !important; }
  .gtc-site .gtc-section { padding-block: 34px; }
  .gtc-site h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.18; }
  .gtc-site h2 { font-size: clamp(1.4rem, 5.6vw, 1.85rem); line-height: 1.22; }
  /* Tap targets stay usable on small screens. */
  .gtc-site a.gtc-primary-button,
  .gtc-site button,
  .gtc-site .primaryButton { min-height: 46px; }
  .gtc-site .globalFooterGrid { grid-template-columns: 1fr !important; gap: 26px; }
}

/* =========================================================================
 * 14. Voices of Change — spotlight redesign
 *
 * Replaces the small three-across quote cards. One learner at a time gets a
 * large portrait and a quote set at a readable size, with the remaining faces
 * in a rail underneath so visitors can see who else is featured.
 * ====================================================================== */

.gtc-site .testimonialLaunchSection { background: #f5f8fb; }
.gtc-site .testimonialLaunchCopy { max-width: 62ch; }

.voicesSpotlight { margin-top: clamp(22px, 3vw, 38px); }

.voicesStage { position: relative; }
.voicesPanel {
  display: none;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: center;
  background: #fff;
  border: 1px solid #e3eaf2;
  border-radius: 20px;
  padding: clamp(22px, 2.8vw, 40px);
  box-shadow: 0 20px 48px rgba(23, 31, 78, .07);
}
.voicesPanel.is-active { display: grid; animation: voicesIn .38s cubic-bezier(.4, 0, .2, 1); }
@keyframes voicesIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.voicesPortrait { position: relative; }
.voicesPortrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 18px; display: block; background: #e8eef5;
}
.voicesAvatar {
  display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5;
  border-radius: 18px; background: #e8eef5; color: #9aa8bc; font-size: 3rem;
}
/* The quote mark sits on the portrait edge so it reads as one composed unit
   rather than a floating decoration. */
.voicesBadge {
  position: absolute; right: -14px; bottom: 22px;
  width: 54px; height: 54px; display: grid; place-items: center;
  background: #f79828; color: #171f4e; border-radius: 50%;
  font-size: 1.15rem; box-shadow: 0 10px 24px rgba(247, 152, 40, .35);
}

.voicesCopy blockquote {
  margin: 0; border: 0; padding: 0;
  font-family: Outfit, Manrope, sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.62rem);
  line-height: 1.5; color: #1d2747; font-weight: 500;
  letter-spacing: -.01em;
}
.voicesCopy blockquote::before { content: "\201C"; }
.voicesCopy blockquote::after { content: "\201D"; }
.voicesCopy footer { margin-top: clamp(18px, 2.2vw, 28px); padding-top: 18px; border-top: 2px solid #f0f4f8; }
.voicesCopy footer strong { display: block; font-size: 1.05rem; color: #171f4e; font-weight: 800; }
.voicesCopy footer span { display: block; margin-top: 3px; font-size: .9rem; color: #6b788e; }
.voicesCopy footer em {
  display: inline-block; margin-top: 9px; font-style: normal;
  background: #eaf4fa; color: #1d6c94; border-radius: 999px;
  padding: 4px 12px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

.voicesRail { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(18px, 2.2vw, 28px); }
.voicesArrow {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #d5dfea; background: #fff; color: #171f4e;
  cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease;
}
.voicesArrow:hover { background: #171f4e; color: #fff; transform: translateY(-2px); }
.voicesArrow:disabled { opacity: .35; cursor: default; transform: none; background: #fff; color: #171f4e; }

.voicesFaces { display: flex; gap: 10px; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.voicesFaces::-webkit-scrollbar { display: none; }
.voicesFace {
  flex: none; width: 54px; height: 54px; padding: 0; cursor: pointer;
  border-radius: 50%; overflow: hidden; background: #e8eef5; color: #9aa8bc;
  border: 2px solid transparent; opacity: .55;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}
.voicesFace img { width: 100%; height: 100%; object-fit: cover; display: block; }
.voicesFace:hover { opacity: .85; transform: translateY(-2px); }
.voicesFace.is-active { opacity: 1; border-color: #f79828; transform: translateY(-3px); }

@media (max-width: 820px) {
  .voicesPanel.is-active { grid-template-columns: 1fr; gap: 22px; }
  .voicesPortrait { max-width: 260px; margin-inline: auto; }
  .voicesPortrait img, .voicesAvatar { aspect-ratio: 1 / 1; }
  .voicesBadge { right: 6px; bottom: 6px; width: 46px; height: 46px; }
  .voicesCopy { text-align: center; }
  .voicesCopy footer { border-top: 0; padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .voicesPanel.is-active { animation: none; }
}

/* =========================================================================
 * 15. Voices of Change — v3 refinements
 *
 * The spotlight is given a stronger editorial frame: a tinted stage so the
 * white card lifts off the section, a counter so visitors know how many
 * stories there are, and a progress bar tying the rail to the panel.
 * ====================================================================== */

.gtc-site .testimonialLaunchSection {
  background:
    radial-gradient(1100px 420px at 15% 0%, rgba(42, 143, 192, .10), transparent 60%),
    radial-gradient(900px 380px at 92% 100%, rgba(247, 152, 40, .12), transparent 62%),
    #f4f7fb;
}
.gtc-site .testimonialLaunchCopy .eyebrow.dark span { background: #f79828; }
.gtc-site .testimonialLaunchCopy h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); letter-spacing: -.02em; }

.voicesPanel {
  /* A hairline accent along the top edge instead of a heavy border. */
  position: relative; overflow: hidden;
  border-radius: 22px;
}
.voicesPanel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, #f79828 0%, #2a8fc0 55%, #171f4e 100%);
}
.voicesPortrait img, .voicesAvatar { border-radius: 16px; }
.voicesPortrait::after {
  /* Soft gradient foot so the portrait sits on the card rather than floating. */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  border-radius: 0 0 16px 16px; pointer-events: none;
  background: linear-gradient(to top, rgba(23, 31, 78, .28), transparent);
}
.voicesCopy blockquote { text-wrap: balance; }
.voicesCopy blockquote::before,
.voicesCopy blockquote::after { color: #f79828; font-weight: 700; }

.voicesCopy footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.voicesCopy footer strong { flex: 0 0 100%; }
.voicesCopy footer span { margin-top: 0; }

/* Counter and progress, so the rail communicates how far through you are. */
.voicesRail { position: relative; padding-bottom: 22px; }
.voicesProgress {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(240px, 60%); height: 3px; border-radius: 3px; background: #dde5ee; overflow: hidden;
}
.voicesProgress i { display: block; height: 100%; background: #f79828; border-radius: 3px; transition: width .35s ease; }
.voicesCount {
  position: absolute; right: 0; bottom: -4px;
  font-size: .78rem; font-weight: 800; color: #7b8798; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .voicesCopy footer { justify-content: center; }
  .voicesCount { position: static; display: block; margin-top: 10px; text-align: center; }
  .voicesProgress { position: static; transform: none; margin: 12px auto 0; }
  .voicesRail { padding-bottom: 0; flex-wrap: wrap; }
}

/* =========================================================================
 * 16. Top bar — redesign (v3.1)
 *
 * The old bar was a flat strip of undifferentiated links that wrapped badly
 * and vanished entirely below 900px, taking the phone number and email with
 * it. This version gives it a deliberate structure, keeps the contact details
 * reachable on every screen size, and meets tap-target sizes on mobile.
 * ====================================================================== */

.gtc-site .globalTopbar {
  background: linear-gradient(100deg, #131a44 0%, #1d2760 48%, #16204f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  position: relative;
  font-family: Manrope, "Segoe UI", sans-serif;
}
/* A thin accent rule ties the bar to the brand without shouting. */
.gtc-site .globalTopbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #f79828 0%, #f79828 22%, rgba(42, 143, 192, .55) 55%, transparent 100%);
}
.gtc-site .globalTopbarInner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 44px; padding-block: 6px;
}
.gtc-site .topbarLeft,
.gtc-site .topbarRight { display: flex; align-items: center; gap: 12px; min-width: 0; }

.gtc-site .topbarItem {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255, 255, 255, .78); text-decoration: none;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; transition: color .18s ease;
}
.gtc-site .topbarItem:hover { color: #fff; }
.gtc-site .topbarIcon {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 7px; background: rgba(255, 255, 255, .09);
  color: #f79828; font-size: .68rem;
  transition: background .18s ease, color .18s ease;
}
.gtc-site .topbarItem:hover .topbarIcon { background: #f79828; color: #171f4e; }
.gtc-site .topbarDivider { width: 1px; height: 16px; background: rgba(255, 255, 255, .14); flex: none; }

.gtc-site .topbarChip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14);
  color: #fff; text-decoration: none; font-size: .76rem; font-weight: 800;
  letter-spacing: .04em; white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.gtc-site .topbarChip:hover { background: #f79828; color: #171f4e; border-color: transparent; transform: translateY(-1px); }
.gtc-site .topbarChip i { font-size: .72rem; }

.gtc-site .globalTopbar .globalSocial .gtc-socials { display: flex; align-items: center; gap: 6px; }
.gtc-site .globalTopbar .gtc-socials a {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8); font-size: .74rem; text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.gtc-site .globalTopbar .gtc-socials a:hover { background: #f79828; color: #171f4e; transform: translateY(-2px); }

/* Tablet — drop the location, keep email and phone. */
@media (max-width: 1100px) {
  .gtc-site .topbarPlace,
  .gtc-site .topbarPlace + .topbarDivider { display: none; }
  .gtc-site .globalTopbarInner { gap: 12px; }
}

/* Phone — the bar stays visible instead of being hidden. Contact details are
   the single most useful thing on a small screen, so they are kept as compact
   icon buttons with the labels dropped only where space genuinely runs out. */
@media (max-width: 900px) {
  .gtc-site .globalTopbar { display: block !important; }
  .gtc-site .globalTopbarInner { min-height: 42px; justify-content: space-between; gap: 8px; }
  .gtc-site .topbarChip span { display: none; }
  .gtc-site .topbarChip { padding: 8px 11px; }
  .gtc-site .topbarItem,
  .gtc-site .topbarChip,
  .gtc-site .globalTopbar .gtc-socials a { min-height: 32px; }
}
@media (max-width: 640px) {
  .gtc-site .topbarEmail .topbarText { display: none; }
  .gtc-site .topbarLeft { gap: 8px; }
  .gtc-site .topbarPhone .topbarText { font-size: .78rem; }
  /* Only the first four handles fit; the footer carries the full set. */
  .gtc-site .globalTopbar .gtc-socials a:nth-child(n+5) { display: none; }
}
@media (max-width: 420px) {
  .gtc-site .globalTopbar .gtc-socials a:nth-child(n+3) { display: none; }
  .gtc-site .topbarDivider { display: none; }
}

/* =========================================================================
 * 17. Top bar visibility fix (v3.1.1)
 *
 * The redesigned bar rendered in the HTML but was invisible. Three earlier
 * rules were responsible, and the first two applied at every screen width:
 *
 *   v2-redesign.css:39  .gtc-site .globalTopbar { background: transparent
 *                       !important; color: rgba(255,255,255,.9) }
 *       Written for the transparent overlay header on the homepage. On any
 *       page with a light background that is near-white text on white — the
 *       bar was present, occupying space, and completely unreadable.
 *
 *   v2-redesign.css:44  max-height: 38px (with overflow:hidden below 700px)
 *       The redesigned bar is around 56px tall, so it was clipped.
 *
 *   display:none !important at max-width 991.98px (v2-redesign.css:248),
 *   900px (static-ui.css:7715) and 767.98px (static-ui.css:8004)
 *       Three overlapping rules hid it on every screen under 992px. The
 *       previous fix only covered 900px and below, so the 900–992px band
 *       stayed hidden.
 *
 * The scroll-collapse behaviour is deliberately preserved: the .is-scrolled
 * rule has higher specificity, so the bar still tucks away on scroll.
 * ====================================================================== */

.gtc-site .globalTopbar,
.gtc-site .globalHeader.isOverlay .globalTopbar {
  display: block !important;
  background: linear-gradient(100deg, #131a44 0%, #1d2760 48%, #16204f 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  color: rgba(255, 255, 255, .85) !important;
  max-height: 72px !important;
  overflow: hidden;
}
/* Collapse on scroll must still win — higher specificity than the rule above. */
.gtc-site .globalHeader.is-scrolled .globalTopbar,
.gtc-site .globalHeader.isOverlay.is-scrolled .globalTopbar {
  max-height: 0 !important; opacity: 0; transform: translateY(-10px); border-bottom: 0 !important;
}

/* Restated at each breakpoint that previously hid the bar, so no band is
   missed between the old 900px, 767.98px and 991.98px rules. */
@media (max-width: 991.98px) {
  .gtc-site .globalTopbar { display: block !important; max-height: 66px !important; }
}
@media (max-width: 900px) {
  .gtc-site .globalTopbar { display: block !important; max-height: 60px !important; }
}
@media (max-width: 767.98px) {
  .gtc-site .globalTopbar { display: block !important; max-height: 58px !important; }
}
@media (max-width: 700px) {
  .gtc-site .globalTopbar { max-height: 58px !important; }
}
@media (max-width: 640px) {
  .gtc-site .globalTopbar {
    background: linear-gradient(100deg, #131a44 0%, #1d2760 100%) !important;
    max-height: 54px !important;
  }
}

/* The contact text and handles must stay legible against the solid bar,
   overriding the transparent-overlay colours from v2-redesign.css. */
.gtc-site .globalTopbar .topbarItem,
.gtc-site .globalTopbar .topbarText { color: rgba(255, 255, 255, .82) !important; }
.gtc-site .globalTopbar .topbarItem:hover,
.gtc-site .globalTopbar .topbarItem:hover .topbarText { color: #fff !important; }
.gtc-site .globalTopbar .topbarIcon { color: #f79828 !important; }
.gtc-site .globalTopbar .topbarItem:hover .topbarIcon { color: #171f4e !important; }
.gtc-site .globalTopbar .topbarChip { color: #fff !important; }
.gtc-site .globalTopbar .topbarChip:hover { color: #171f4e !important; }
.gtc-site .globalTopbar .gtc-socials a { color: rgba(255, 255, 255, .8) !important; }
.gtc-site .globalTopbar .gtc-socials a:hover { color: #171f4e !important; }

/* =========================================================================
 * 18. Mega menu — transparent glass redesign (v3.3)
 *
 * v2-redesign.css:66 forced the old panel to a solid white sheet with
 * !important on background, border and radius, so every declaration here has
 * to match that weight. The auto-selected preview images are gone from the
 * markup entirely: they were matched from the Media Library rather than chosen
 * for the link, which is what made the menu look artificial.
 * ====================================================================== */

.gtc-site .megaPanel.megaGlass {
  /* Dark translucent glass, so the panel reads over both the transparent
     overlay header on the homepage and solid backgrounds elsewhere. */
  background: linear-gradient(155deg, rgba(19, 26, 68, .82) 0%, rgba(26, 35, 88, .78) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-top: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 16px !important;
  box-shadow: 0 28px 70px rgba(4, 9, 42, .42) !important;
  color: #fff !important;
  padding: 20px !important;
  width: max-content !important;
  min-width: 280px;
  /* Never wider than the viewport, whatever the link count. */
  max-width: min(760px, calc(100vw - 40px)) !important;
}

.gtc-site .megaGlassHead { padding: 0 6px 14px; border-bottom: 1px solid rgba(255, 255, 255, .13); margin-bottom: 12px; }
.gtc-site .megaGlassHead span {
  display: block; font-size: .66rem; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase; color: #f79828 !important;
}
.gtc-site .megaGlassHead p { margin: 6px 0 0; font-size: .84rem; color: rgba(255, 255, 255, .68) !important; max-width: 52ch; }

.gtc-site .megaGlassLinks { display: grid; gap: 4px; }
.gtc-site .megaPanel.megaGlass[data-columns="2"] .megaGlassLinks { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
.gtc-site .megaPanel.megaGlass[data-columns="3"] .megaGlassLinks { grid-template-columns: repeat(3, minmax(200px, 1fr)); }

.gtc-site .megaGlassLinks a {
  position: relative; display: block; padding: 11px 34px 11px 13px;
  border-radius: 10px; text-decoration: none;
  background: transparent !important; border: 0 !important;
  transition: background .16s ease, transform .16s ease;
}
.gtc-site .megaGlassLinks a b {
  display: block; font-size: .93rem; font-weight: 700; letter-spacing: -.005em;
  color: #fff !important;
}
.gtc-site .megaGlassLinks a span {
  display: block; margin-top: 2px; font-size: .78rem; line-height: 1.4;
  color: rgba(255, 255, 255, .58) !important;
}
/* The arrow is drawn rather than imported, so it needs no icon font and cannot
   flash as a missing glyph while Font Awesome loads. */
.gtc-site .megaGlassLinks a i {
  position: absolute; right: 13px; top: 50%; width: 7px; height: 7px;
  margin-top: -5px; border-right: 2px solid #f79828; border-top: 2px solid #f79828;
  transform: rotate(45deg); opacity: 0;
  transition: opacity .16s ease, right .16s ease;
}
.gtc-site .megaGlassLinks a:hover,
.gtc-site .megaGlassLinks a:focus-visible {
  background: rgba(255, 255, 255, .10) !important; transform: none !important;
}
.gtc-site .megaGlassLinks a:hover i,
.gtc-site .megaGlassLinks a:focus-visible i { opacity: 1; right: 10px; }
.gtc-site .megaGlassLinks a:hover span { color: rgba(255, 255, 255, .74) !important; }

/* Responsive: collapse the columns before the panel can reach a screen edge. */
@media (max-width: 1280px) {
  .gtc-site .megaPanel.megaGlass[data-columns="3"] .megaGlassLinks { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}
@media (max-width: 1180px) {
  .gtc-site .megaPanel.megaGlass { max-width: calc(100vw - 32px) !important; padding: 16px !important; }
  .gtc-site .megaPanel.megaGlass[data-columns="2"] .megaGlassLinks,
  .gtc-site .megaPanel.megaGlass[data-columns="3"] .megaGlassLinks { grid-template-columns: 1fr; }
  .gtc-site .megaGlassLinks a span { display: none; }
  .gtc-site .megaGlassLinks a { padding-block: 13px; }
}

/* Fallback for browsers without backdrop-filter, where a translucent panel
   would leave the text sitting on whatever is behind it. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gtc-site .megaPanel.megaGlass {
    background: linear-gradient(155deg, #131a44 0%, #1a2358 100%) !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .gtc-site .megaPanel.megaGlass { background: #141c47 !important; }
}

/* =========================================================================
 * 19. Inner page hero — compact 300px band (v3.4)
 *
 * The inner hero was 540px on desktop and grew to 620px on tablet, so on most
 * screens a visitor landing on an inner page saw a title and nothing else
 * before scrolling. It is now a 300px band.
 *
 * Height had to be reclaimed rather than simply reduced. The header is an
 * overlay on inner pages (gtc_render_site_header(true)), so roughly 128px of
 * the band is reserved to clear the fixed top bar and nav. That leaves about
 * 170px of usable space, which is not enough for the old two-column layout
 * with its framed photograph and floating stamp. The photograph therefore
 * becomes the background of the band itself, and the decorative panel is
 * dropped rather than shrunk to the point of looking like a mistake.
 *
 * Earlier heights were set with !important across six rules in two files, so
 * these declarations have to match that weight.
 * ====================================================================== */

.gtc-site .gtc-inner-hero.innerHeroV2 {
  position: relative !important;
  min-height: 300px !important;
  height: 300px !important;
  max-height: 300px !important;
  padding: 128px 0 26px !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden;
  /* The page's own featured image, set on <body> by full-site.php. */
  background-image:
    linear-gradient(94deg, rgba(19, 26, 68, .93) 0%, rgba(19, 26, 68, .78) 45%, rgba(26, 35, 88, .58) 100%),
    var(--gtc-page-hero-image, none) !important;
  background-size: cover !important;
  background-position: center 38% !important;
  background-repeat: no-repeat !important;
  background-color: #131a44 !important;
  color: #fff;
}
/* Pages with no featured image still need a deliberate background rather than
   a flat block, so the gradient carries the band on its own. */
.gtc-site .gtc-inner-hero.innerHeroV2::before {
  content: "" !important;
  position: absolute !important;
  width: 340px !important; height: 340px !important;
  border: 62px solid rgba(255, 255, 255, .05) !important;
  border-radius: 50% !important;
  top: -180px !important; right: -90px !important;
}
.gtc-site .innerHeroV2Pattern { opacity: .35; }

.gtc-site .innerHeroV2Grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  align-items: end !important;
  width: 100%;
}
/* The framed photograph and stamp have no room in a 300px band and the image
   now carries the background instead. */
.gtc-site .innerHeroV2Visual { display: none !important; }

.gtc-site .innerHeroV2Copy { max-width: 760px; }
.gtc-site .innerHeroV2Copy nav {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px !important; font-size: .78rem; color: rgba(255, 255, 255, .62);
}
.gtc-site .innerHeroV2Copy nav a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.gtc-site .innerHeroV2Copy nav a:hover { color: #f79828; }
.gtc-site .innerHeroV2Copy nav i { font-size: .58rem; opacity: .5; }

.gtc-site .innerHeroV2Kicker {
  display: inline-flex !important; align-items: center; gap: 8px;
  margin-bottom: 9px !important; padding: 4px 11px;
  border-radius: 999px; background: rgba(247, 152, 40, .16);
  border: 1px solid rgba(247, 152, 40, .32);
  font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: #f79828;
}
.gtc-site .innerHeroV2Kicker i { font-size: .7rem; }

.gtc-site .innerHeroV2 h1 {
  margin: 0 !important;
  font-size: clamp(1.85rem, 3.6vw, 2.9rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
  max-width: 20ch;
}
/* One line only. A 300px band cannot absorb a three-line summary, and a
   clipped paragraph reads worse than none. */
.gtc-site .innerHeroV2Copy > p {
  margin: 8px 0 0 !important;
  font-size: .92rem !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, .74) !important;
  max-width: 62ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The old rules also fixed heights on the pre-V2 hero class. */
.gtc-site .gtc-inner-hero.innerHero {
  height: 300px !important; min-height: 300px !important;
}

@media (max-width: 1100px) {
  .gtc-site .gtc-inner-hero.innerHeroV2,
  .gtc-site .gtc-inner-hero.innerHero {
    height: 280px !important; min-height: 280px !important; max-height: 280px !important;
    padding: 118px 0 24px !important;
  }
}
@media (max-width: 780px) {
  .gtc-site .gtc-inner-hero.innerHeroV2,
  .gtc-site .gtc-inner-hero.innerHero {
    height: 250px !important; min-height: 250px !important; max-height: 250px !important;
    padding: 104px 0 22px !important;
  }
  .gtc-site .innerHeroV2 h1 { font-size: clamp(1.6rem, 6.4vw, 2.1rem) !important; max-width: none; }
  .gtc-site .innerHeroV2Copy > p { -webkit-line-clamp: 2; font-size: .86rem !important; }
}
@media (max-width: 520px) {
  .gtc-site .gtc-inner-hero.innerHeroV2,
  .gtc-site .gtc-inner-hero.innerHero {
    height: 228px !important; min-height: 228px !important; max-height: 228px !important;
    padding: 96px 0 18px !important;
  }
  .gtc-site .innerHeroV2Copy > p { display: none !important; }
  .gtc-site .innerHeroV2Copy nav { margin-bottom: 8px !important; font-size: .72rem; }
}

/* The page content sat under a much taller hero, so the leading gap is closed. */
.gtc-site.innerSite .gtc-page-content > .gtc-section:first-child { padding-top: clamp(34px, 3.6vw, 54px); }

/* -------------------------------------------------------------------------
 * Event, job and story heroes brought to the same 300px band.
 *
 * These three share one rule at static-ui.css:7668 (min-height 520px, and
 * 460px on tablet). Leaving them tall would mean an event page and an About
 * page had visibly different headers, so they follow the same band. They keep
 * their own meta rows, which carry date, venue and author, so the padding is
 * slightly deeper than the standard inner hero.
 * ---------------------------------------------------------------------- */
.gtc-site .eventSingleHero,
.gtc-site .jobSingleHero,
.gtc-site .storyEditorialHero {
  min-height: 300px !important;
  height: auto !important;
  max-height: 340px !important;
  padding: 126px 0 26px !important;
  display: flex; align-items: flex-end;
}
.gtc-site .eventSingleHeroContent,
.gtc-site .jobHeroContent,
.gtc-site .storyEditorialHeroInner { width: 100%; }
.gtc-site .eventSingleHero h1,
.gtc-site .jobSingleHero h1,
.gtc-site .storyEditorialHero h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.7rem) !important;
  line-height: 1.08 !important; margin: 0 !important; letter-spacing: -.03em;
}
.gtc-site .storyEditorialHeroInner > p {
  margin: 8px 0 0 !important; font-size: .92rem !important; line-height: 1.5 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gtc-site .eventHeroFacts,
.gtc-site .jobHeroMeta,
.gtc-site .storyHeroMeta { margin-top: 12px !important; }

@media (max-width: 1100px) {
  .gtc-site .eventSingleHero,
  .gtc-site .jobSingleHero,
  .gtc-site .storyEditorialHero { min-height: 280px !important; padding: 116px 0 24px !important; }
}
@media (max-width: 780px) {
  .gtc-site .eventSingleHero,
  .gtc-site .jobSingleHero,
  .gtc-site .storyEditorialHero { min-height: 250px !important; padding: 102px 0 22px !important; max-height: none !important; }
}
@media (max-width: 520px) {
  .gtc-site .eventSingleHero,
  .gtc-site .jobSingleHero,
  .gtc-site .storyEditorialHero { min-height: 228px !important; padding: 94px 0 18px !important; }
  .gtc-site .storyEditorialHeroInner > p { display: none !important; }
}

/* -------------------------------------------------------------------------
 * Mega menu spacing correction (v3.4.1)
 *
 * The glass panel packed its links too tightly: 4px between rows, 11px of
 * vertical padding and two lines of text per link meant adjacent titles and
 * descriptions ran into each other, especially in the two and three column
 * layouts where columns had no gutter to speak of.
 * ---------------------------------------------------------------------- */
.gtc-site .megaPanel.megaGlass { padding: 22px !important; min-width: 320px; }
.gtc-site .megaGlassLinks { gap: 8px 22px !important; }
.gtc-site .megaPanel.megaGlass[data-columns="2"] .megaGlassLinks { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
.gtc-site .megaPanel.megaGlass[data-columns="3"] .megaGlassLinks { grid-template-columns: repeat(3, minmax(230px, 1fr)); }
.gtc-site .megaGlassLinks a { padding: 13px 40px 13px 15px !important; }
.gtc-site .megaGlassLinks a b { line-height: 1.35 !important; margin-bottom: 3px; }
.gtc-site .megaGlassLinks a span { line-height: 1.45 !important; }
/* A faint rule between columns so the eye can tell them apart. */
.gtc-site .megaPanel.megaGlass[data-columns="2"] .megaGlassLinks,
.gtc-site .megaPanel.megaGlass[data-columns="3"] .megaGlassLinks { column-rule: 1px solid rgba(255, 255, 255, .08); }
.gtc-site .megaGlassHead { padding-bottom: 16px; margin-bottom: 16px; }
@media (max-width: 1180px) {
  .gtc-site .megaGlassLinks { gap: 4px !important; }
  .gtc-site .megaGlassLinks a { padding: 14px 34px 14px 13px !important; }
}

/* =========================================================================
 * 20. Unified heading colours (v3.6)
 *
 * Headings were coloured from six different sources across four stylesheets,
 * which is why some sections looked wrong:
 *
 *   var(--ink)          10 rules   set from Website Settings, admin-editable
 *   #fff / #fff!important 15 rules  fixed white, for dark sections
 *   #171f4e              7 rules   hard-coded navy
 *   var(--gtc-v2-navy)   2 rules   hard-coded navy, different token
 *   var(--orange), var(--gtc-orange), var(--forest)
 *   var(--gut-navy)      declared once, at static-ui.css:7760, inside a media
 *                        query — so outside that breakpoint it resolved to
 *                        nothing and those headings fell back to body text
 *                        colour. That is the visible fault.
 *
 * Everything now resolves through one token. Changing the Ink colour in
 * Website Settings moves every heading on the site together, instead of
 * moving only the ten that happened to use --ink.
 * ---------------------------------------------------------------------- */

.gtc-site {
  /* One source of truth. --ink comes from Website Settings; the literal is
     only a fallback for the rare view that renders without the inline vars. */
  --gtc-heading: var(--ink, #171f4e);
  --gtc-heading-invert: #ffffff;
  --gtc-heading-accent: var(--orange, #f79828);

  /* Legacy tokens repointed at the same value so old rules stay consistent
     rather than being overridden one selector at a time. --gut-navy is
     defined here at root scope, which is what fixes the sections that lost
     their heading colour entirely outside the one media query. */
  --gut-navy: var(--gtc-heading);
  --gtc-v2-navy: var(--gtc-heading);
}

.gtc-site h1,
.gtc-site h2,
.gtc-site h3,
.gtc-site h4,
.gtc-site h5,
.gtc-site h6 {
  font-family: Outfit, Manrope, Arial, sans-serif;
  color: var(--gtc-heading);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.gtc-site h1 { letter-spacing: -.03em; }
.gtc-site h4,
.gtc-site h5,
.gtc-site h6 { letter-spacing: -.01em; }

/* Emphasis inside a heading is the accent colour, everywhere. */
.gtc-site h1 em, .gtc-site h2 em, .gtc-site h3 em,
.gtc-site h1 i:not([class]), .gtc-site h2 i:not([class]) {
  color: var(--gtc-heading-accent);
  font-style: normal;
}

/* Headings sitting on a dark background invert. Listing the dark sections in
   one place means a new dark section needs one selector added here, rather
   than a colour override written next to every heading inside it. */
.gtc-site .approachSection h1, .gtc-site .approachSection h2, .gtc-site .approachSection h3, .gtc-site .approachSection h4,
.gtc-site .donateSection h1, .gtc-site .donateSection h2, .gtc-site .donateSection h3, .gtc-site .donateSection h4,
.gtc-site .mediaSection h1, .gtc-site .mediaSection h2, .gtc-site .mediaSection h3, .gtc-site .mediaSection h4,
.gtc-site .gtc-final-action h1, .gtc-site .gtc-final-action h2, .gtc-site .gtc-final-action h3,
.gtc-site .gtc-inner-hero h1, .gtc-site .gtc-inner-hero h2,
.gtc-site .gtc-static-hero h1, .gtc-site .gtc-static-hero h2,
.gtc-site .eventSingleHero h1, .gtc-site .jobSingleHero h1, .gtc-site .storyEditorialHero h1,
.gtc-site .globalFooter h1, .gtc-site .globalFooter h2, .gtc-site .globalFooter h3, .gtc-site .globalFooter h4,
.gtc-site .programCard h3, .gtc-site .programCard h4,
.gtc-site .homeEventsColumn h3, .gtc-site .homeEventRow h4, .gtc-site .homeEventRow h4 a,
.gtc-site .programmeV2Videos h2, .gtc-site .programmeV2Cta h2,
.gtc-site .gtc-how-band h2, .gtc-site .gtc-home-media h2, .gtc-site .gtc-home-donate h2,
.gtc-site .gtc-programmes-carousel h3,
.gtc-site .megaGlassHead span, .gtc-site .megaGlassLinks a b,
.gtc-site .testimonialModalHeading h2 {
  color: var(--gtc-heading-invert);
}

/* The footer keeps its orange column headings — that is deliberate, not drift. */
.gtc-site .globalFooterColumn > span,
.gtc-site .gtc-footer h3 { color: var(--gtc-heading-accent); }

/* A heading that is also a link inherits, so link colour cannot fight it. */
.gtc-site h1 a, .gtc-site h2 a, .gtc-site h3 a,
.gtc-site h4 a, .gtc-site h5 a { color: inherit; text-decoration: none; }
.gtc-site h1 a:hover, .gtc-site h2 a:hover, .gtc-site h3 a:hover,
.gtc-site h4 a:hover, .gtc-site h5 a:hover { color: var(--gtc-heading-accent); }

/* =========================================================================
 * 21. Donation page repairs (v4.5)
 *
 * Faults visible on /donate-to-go-usetech-uganda/:
 *   - "Online, bank transfer or in-kind support." rendered navy on the navy
 *     section, so the heading was invisible.
 *   - The two bank accounts were forced side by side inside a col-lg-5, giving
 *     each about 150px. "Pride Microfinance Limited (MDI)" wrapped one word per
 *     line and the account numbers overflowed the card and ran off the page.
 *   - The left card stretched to match, leaving a large empty navy block.
 * ====================================================================== */

/* --- heading legibility on the dark section --- */
.gtc-site .donateWays { background: linear-gradient(150deg, #141c47 0%, #1d2760 60%, #16204f 100%); }
.gtc-site .donateWaysCard h2,
.gtc-site .donateWaysCard h3 { color: #ffffff !important; }
.gtc-site .donateWaysCard > span { color: #f79828 !important; }
.gtc-site .donateWaysCard li { color: rgba(255, 255, 255, .84); }
.gtc-site .donateWaysCard li i { color: #f79828; }

/* --- the two cards no longer stretch to a shared height --- */
.gtc-site .donateWaysCard {
  height: auto;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: clamp(22px, 2.6vw, 34px);
}
.gtc-site .donateWaysCard ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.gtc-site .donateWaysCard li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.5; }

/* --- bank details: one account per row inside the narrow column --- */
.gtc-site .donateBankCard { background: #fff; border-radius: 16px; padding: clamp(20px, 2.4vw, 30px); overflow: hidden; }
.gtc-site .donateBankCard > span { display: block; color: #cf6f12; font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
/* Single column. Two 150px columns is what broke the bank names and numbers. */
.gtc-site .gtc-bank-grid { display: grid; grid-template-columns: 1fr !important; gap: 14px; }
.gtc-site .gtc-bank-grid article {
  background: #f6f9fc; border: 1px solid #e2e9f1; border-radius: 12px;
  padding: 16px 18px; min-width: 0; color: #22304a;
}
.gtc-site .gtc-bank-grid article > span {
  display: block; color: #2a8fc0; font-size: .64rem; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
}
.gtc-site .gtc-bank-grid article h3 {
  margin: 6px 0 2px; font-size: 1.05rem; line-height: 1.3; color: #171f4e;
  /* Stops a long bank name breaking to one word per line. */
  overflow-wrap: break-word; hyphens: none;
}
.gtc-site .gtc-bank-grid article > p { margin: 0 0 12px; font-size: .84rem; color: #66738a; }

/* Label above value, so a 14 digit account number has the full card width. */
.gtc-site .gtc-bank-grid dl { display: grid; gap: 9px; margin: 0; }
.gtc-site .gtc-bank-grid dl > div { display: grid; gap: 2px; border-top: 1px solid #e7edf4; padding-top: 8px; }
.gtc-site .gtc-bank-grid dt {
  margin: 0; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: #7b8798; font-weight: 800;
}
.gtc-site .gtc-bank-grid dd {
  margin: 0; font-size: .95rem; font-weight: 800; color: #171f4e;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  overflow-wrap: anywhere; word-break: break-word;
}
.gtc-site .gtc-bank-note {
  margin-top: 16px; border-left: 3px solid #f79828; background: #fff8ee;
  border-radius: 0 10px 10px 0; padding: 14px 16px;
}
.gtc-site .gtc-bank-note strong { display: block; color: #171f4e; font-size: .95rem; margin-bottom: 4px; }
.gtc-site .gtc-bank-note p { margin: 0; font-size: .85rem; line-height: 1.55; color: #5f6d84; overflow-wrap: anywhere; }

/* On a wide screen there is room for the two accounts side by side again. */
@media (min-width: 1400px) {
  .gtc-site .gtc-bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 991.98px) {
  .gtc-site .donateWays .col-lg-5,
  .gtc-site .donateWays .col-lg-7 { margin-bottom: 16px; }
}

/* -------------------------------------------------------------------------
 * Inner hero: content must never slide under the fixed header.
 *
 * The hero was pinned to exactly 300px with the content bottom-aligned. On
 * pages where the breadcrumb, kicker, two-line title and summary together
 * exceed the space left below the header, the block was pushed upward and the
 * breadcrumb ended up behind the logo, as on the donation page. It now holds
 * 300px as a minimum and grows only when the content genuinely needs it.
 * ---------------------------------------------------------------------- */
.gtc-site .gtc-inner-hero.innerHeroV2,
.gtc-site .gtc-inner-hero.innerHero {
  height: auto !important;
  min-height: 300px !important;
  max-height: none !important;
}
@media (max-width: 1100px) {
  .gtc-site .gtc-inner-hero.innerHeroV2,
  .gtc-site .gtc-inner-hero.innerHero { height: auto !important; min-height: 280px !important; max-height: none !important; }
}
@media (max-width: 780px) {
  .gtc-site .gtc-inner-hero.innerHeroV2,
  .gtc-site .gtc-inner-hero.innerHero { height: auto !important; min-height: 250px !important; }
}
@media (max-width: 520px) {
  .gtc-site .gtc-inner-hero.innerHeroV2,
  .gtc-site .gtc-inner-hero.innerHero { height: auto !important; min-height: 228px !important; }
}

/* =========================================================================
 * 22. Donation page — image-free rebuild and button system (v4.6)
 * ====================================================================== */

/* --- shared button system --------------------------------------------- */
.gtc-site .gtcBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 10px; border: 2px solid transparent;
  font-family: Manrope, "Segoe UI", sans-serif;
  font-size: .95rem; font-weight: 800; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; line-height: 1;
  /* 48px keeps the tap target comfortable on a phone. */
  min-height: 50px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.gtc-site .gtcBtn i { font-size: .85em; transition: transform .18s ease; }
.gtc-site .gtcBtn:hover i { transform: translateX(3px); }
.gtc-site .gtcBtn:focus-visible { outline: 3px solid rgba(42, 143, 192, .5); outline-offset: 3px; }
.gtc-site .gtcBtnBlock { width: 100%; margin-top: auto; }

.gtc-site .gtcBtnPrimary { background: #f79828; color: #171f4e; box-shadow: 0 10px 24px rgba(247, 152, 40, .3); }
.gtc-site .gtcBtnPrimary:hover { background: #ffa63f; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(247, 152, 40, .38); color: #171f4e; }
.gtc-site .gtcBtnDark { background: #171f4e; color: #fff; }
.gtc-site .gtcBtnDark:hover { background: #222d6b; transform: translateY(-2px); color: #fff; }
.gtc-site .gtcBtnGhost { background: transparent; color: #171f4e; border-color: #c8d3e2; }
.gtc-site .gtcBtnGhost:hover { border-color: #171f4e; background: #171f4e; color: #fff; transform: translateY(-2px); }

/* --- intro ------------------------------------------------------------- */
.gtc-site .donateVisualIntro { padding-block: clamp(40px, 5vw, 72px); }
.gtc-site .donateIntroWrap { max-width: 760px; }
.gtc-site .donateIntroWrap h2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.06; margin: 10px 0 14px; }
.gtc-site .donateIntroWrap .lead { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; color: #55637b; max-width: 62ch; }
.gtc-site .donateIntroActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Trust markers, as on the reference page: they answer "is this safe" before
   the visitor has to ask. */
.gtc-site .donateTrustRow { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; padding: 0; }
.gtc-site .donateTrustRow li { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: #6b7890; }
.gtc-site .donateTrustRow i { color: #12795c; }

/* --- how to give ------------------------------------------------------- */
.gtc-site .donateWays { padding-block: clamp(44px, 5vw, 76px); }
.gtc-site .donateWaysHead { max-width: 620px; margin-bottom: clamp(22px, 2.6vw, 34px); }
.gtc-site .donateWaysHead span { display: block; color: #f79828; font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.gtc-site .donateWaysHead h2 { margin-top: 8px; color: #fff !important; }
.gtc-site .donateWaysGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); align-items: stretch; }
.gtc-site .donateWayCard {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border-radius: 16px; padding: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 18px 44px rgba(10, 18, 56, .16);
}
.gtc-site .donateWayOnline { border-top: 4px solid #f79828; }
.gtc-site .donateWayBank { border-top: 4px solid #2a8fc0; }
.gtc-site .donateWayKind { border-top: 4px solid #12795c; }
.gtc-site .donateWayTag { display: inline-block; font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #2a8fc0; }
.gtc-site .donateWayCard h3 { margin: 9px 0 8px; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: #171f4e !important; }
.gtc-site .donateWayCard > p { margin: 0 0 16px; font-size: .95rem; line-height: 1.55; color: #5f6d84; }
.gtc-site .donateWayCard ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.gtc-site .donateWayCard li { display: flex; gap: 9px; align-items: flex-start; font-size: .92rem; color: #4d5b72; }
.gtc-site .donateWayCard li i { color: #12795c; margin-top: 3px; font-size: .8em; }
.gtc-site .donateWayBank .gtc-bank-grid { margin-bottom: 14px; }
.gtc-site .donateWayBank .gtc-bank-note { margin-bottom: 20px; }

@media (max-width: 1100px) {
  .gtc-site .donateWaysGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gtc-site .donateWayKind { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .gtc-site .donateWaysGrid { grid-template-columns: 1fr; }
  .gtc-site .donateWayKind { grid-column: auto; }
  .gtc-site .donateIntroActions .gtcBtn { width: 100%; }
}

/* v4.9.5 — polished online-only policy/document gallery */
.gtcPolicyIntroBar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 24px; margin-bottom:26px; border:1px solid #e1e8f0; border-radius:18px; background:linear-gradient(135deg,#f7faff,#fff); box-shadow:0 12px 32px rgba(23,31,78,.06); }
.gtcPolicyIntroBar > div:first-child > span { display:block; margin-bottom:5px; color:#2a8fc0; font-size:.7rem; font-weight:900; letter-spacing:.13em; }
.gtcPolicyIntroBar h3 { margin:0 0 5px; color:#171f4e; font-size:1.35rem; }
.gtcPolicyIntroBar p { margin:0; color:#6b768a; font-size:.9rem; }
.gtcPolicyIntroBadge { min-width:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:12px 16px; border-radius:14px; background:#eef8f5; color:#167051; text-align:center; }
.gtcPolicyIntroBadge i { font-size:1.15rem; }
.gtcPolicyIntroBadge strong { font-size:.82rem; }
.gtcPolicyIntroBadge small { font-size:.7rem; opacity:.8; }
.gtcPolicyGroupHead { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.gtcPolicyGroupHead h3 { margin:0; border:0; padding:0; }
.gtcPolicyGroupHead > span { color:#8a94a6; font-size:.76rem; font-weight:800; background:#f2f6fa; border-radius:999px; padding:5px 10px; }
.gtcPolicyCard { box-shadow:0 8px 24px rgba(23,31,78,.05); }
.gtcPolicyPreview { position:relative; height:390px; }
.gtcPolicyPreviewLabel { position:absolute; top:12px; right:12px; z-index:2; padding:6px 10px; border-radius:999px; background:rgba(23,31,78,.88); color:#fff; font-size:.7rem; font-weight:900; letter-spacing:.03em; }
.gtcPolicyTitleRow { display:flex; align-items:flex-start; gap:11px; }
.gtcPolicyTitleRow .gtcPolicyIcon { flex:0 0 44px; margin:0; }
.gtcPolicyType { display:block; color:#8a94a6; font-size:.72rem; font-weight:700; margin-top:2px; }
.gtcPolicyViews { color:#2a8fc0 !important; }
.gtcPolicyActions { margin-top:5px; }
.gtcPolicyDownload { padding:9px 13px; border-radius:9px; background:#171f4e; color:#fff !important; text-decoration:none !important; }
.gtcPolicyDownload:hover { background:#2a8fc0; text-decoration:none !important; }
@media (max-width:760px) { .gtcPolicyIntroBar { flex-direction:column; align-items:flex-start; } .gtcPolicyIntroBadge { width:100%; } .gtcPolicyPreview { height:300px; } .gtcPolicyGroupHead { align-items:flex-start; flex-direction:column; gap:8px; } }