/* ================================================
   GlobalU Brand Overrides (ADR-020) — CORRECTED
   Managed via Umbraco Stylesheets editor.
   Path: /css/globalu/globalu-brand.css

   Purpose: Custom brand-specific CSS that cannot
            be achieved through uSkinned Visual Designer.
            Referenced in Design > GlobalU Learner > CSS tab.

   Selector strategy (ADR-018):
   - Target real usn_cmp_* DOM selectors on block wrappers
   - Inner selectors use uSkinned's actual DOM classes:
       .info (text containers), .item (list items),
       .inner (item wrappers), .heading (heading elements),
       .text (body text), .btn (buttons), .component-introduction
   - 15 of 18 blocks need zero custom classes
   - Only 2 custom classes: gu-cta-dark, gu-pods-testimonial

   IMPORTANT: Previous version used assumed .usn-* class names
   that do not exist in uSkinned 6.2.5 DOM. This version uses
   selectors verified against the live staging DOM (2026-03-25).
   ================================================ */

/* ================================================
   CSS Custom Properties / Design Tokens
   ================================================ */

:root {
  /* Colour tokens */
  --blue:     #0067e6;
  --dk-blue:  #003762;
  --green:    #029447;
  --yellow:   #ffc100;
  --red:      #ff0022;
  --black:    #282828;
  --grey-50:  #f7f8fa;
  --grey-100: #f0f1f3;
  --grey-200: #e0e2e6;
  --grey-400: #a0a4ad;
  --grey-600: #666c7a;
  --white:    #ffffff;
  --border:   #e0e2e6;

  /* Spacing tokens */
  --space-xs:  8px;
  --space-s:   16px;
  --space-m:   24px;
  --space-l:   32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Opacity tokens */
  --opacity-low:  0.25;
  --opacity-mid:  0.50;
  --opacity-high: 0.75;
}

/* ================================================
   === Global: Blue spacer below H2 headings ===
   Applied to all component blocks that display
   section headings. Uses .component-introduction
   for intro headings and .info for inline headings.
   ================================================ */

/* Component intro headings (pods, code, gallery etc.) */
.component .component-introduction h2::after,
/* Text block headings */
.usn_cmp_text .info h2::after,
/* Split component headings */
.usn_cmp_splitcomponent .info h2::after,
/* CTA strip headings */
.usn_cmp_ctastrip .info h2::after {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 3px !important;
  background: var(--blue) !important;
  margin-top: 8px !important;
  border-radius: 0 !important;
}

/* Dark background variant — white spacer */
.c2-bg h2::after,
.gu-cta-dark h2::after {
  background: var(--white) !important;
}

/* ================================================
   === Global: Button styles ===
   uSkinned buttons use .btn.boxed-btn or similar.
   Primary = base-btn-bg, Secondary = outlined
   ================================================ */

/* Primary button — yellow background */
.component .btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  min-height: 44px !important;
  text-transform: none !important;
  padding: 12px 24px !important;
  transition: background 0.2s, transform 0.2s !important;
}

/* ================================================
   === Accordion / Tab (usn_cmp_accordiontab) ===
   uSkinned DOM: .tab-nav, .accordion-item, .icon
   ================================================ */

.usn_cmp_accordiontab .tab-nav .active {
  color: var(--blue) !important;
  border-bottom-color: var(--blue) !important;
}
.usn_cmp_accordiontab .tab-nav a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-transform: none !important;
}
.usn_cmp_accordiontab .accordion-item .icon {
  color: var(--blue) !important;
}

/* ================================================
   === Alert Box (usn_cmp_alertbox) ===
   uSkinned DOM: .inner, .info
   ================================================ */

.usn_cmp_alertbox .inner {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}
.usn_cmp_alertbox .close-alert {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ================================================
   === Anchor Navigation (usn_cmp_anchornavigation) ===
   uSkinned DOM: ul.nav, li.nav-item, a
   ================================================ */

.usn_cmp_anchornavigation ul.nav a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--grey-600) !important;
  text-transform: none !important;
}
.usn_cmp_anchornavigation ul.nav a.active,
.usn_cmp_anchornavigation ul.nav a:hover {
  color: var(--blue) !important;
}
.usn_cmp_anchornavigation ul.nav a.active::after {
  background: var(--blue) !important;
}
.usn_cmp_anchornavigation {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

/* ================================================
   === Banners (usn_cmp_banner) ===
   uSkinned DOM: .item > .inner > .info > h1.heading
   Buttons: a.banner_now_btn or a.btn
   ================================================ */

.usn_cmp_banner .info h1,
.usn_cmp_banner .info h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}
.usn_cmp_banner .btn,
.usn_cmp_banner a[class*="banner_now"] {
  background: var(--yellow) !important;
  color: var(--black) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  min-height: 44px !important;
}

/* ================================================
   === Breadcrumb (usn_cmp_breadcrumb) ===
   uSkinned DOM: .breadcrumb-item, a
   ================================================ */

.usn_cmp_breadcrumb .breadcrumb-item a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--blue) !important;
}
.usn_cmp_breadcrumb .breadcrumb-item.active {
  color: var(--grey-600) !important;
}

/* ================================================
   === Call to Action (usn_cmp_ctastrip) ===
   uSkinned DOM: .info (text), .link (button area)
   ================================================ */

.usn_cmp_ctastrip .info h2,
.usn_cmp_ctastrip .info h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: var(--dk-blue) !important;
}
/* Dark CTA variant */
.gu-cta-dark .info h2,
.gu-cta-dark .info h3 {
  color: #fff !important;
}
/* Primary button — yellow */
.usn_cmp_ctastrip .btn {
  background: var(--yellow) !important;
  color: var(--black) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  border: none !important;
  min-height: 44px !important;
  text-transform: none !important;
}
.usn_cmp_ctastrip .btn:hover {
  background: #e6ae00 !important;
  transform: translateY(-1px) !important;
}

/* ================================================
   === Data List (usn_cmp_datalist) ===
   uSkinned DOM: .item, .info, .heading, .text
   ================================================ */

.usn_cmp_datalist .item {
  text-align: center !important;
  font-family: 'Montserrat', sans-serif !important;
}
.usn_cmp_datalist .item .heading {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--dk-blue) !important;
}
.usn_cmp_datalist .item .text {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--grey-600) !important;
}
.usn_cmp_datalist .component-main {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: var(--space-m) !important;
}
.usn_cmp_datalist .item:not(:last-child) {
  border-right: 1px solid var(--border) !important;
}

/* ================================================
   === Form (usn_cmp_form) ===
   uSkinned DOM: .form .inner, input, textarea, select
   ================================================ */

.usn_cmp_form input,
.usn_cmp_form textarea,
.usn_cmp_form select {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 12px var(--space-s) !important;
}
.usn_cmp_form input:focus,
.usn_cmp_form textarea:focus {
  border-color: var(--blue) !important;
  outline: 3px solid var(--blue) !important;
  outline-offset: 2px !important;
}
.usn_cmp_form label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--black) !important;
}
.usn_cmp_form .btn[type="submit"],
.usn_cmp_form button[type="submit"] {
  background: var(--yellow) !important;
  color: var(--black) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  min-height: 44px !important;
  padding: 12px 24px !important;
  text-transform: none !important;
}
.usn_cmp_form input::placeholder,
.usn_cmp_form textarea::placeholder {
  color: var(--grey-400) !important;
}

/* ================================================
   === Gallery (usn_cmp_gallery) ===
   uSkinned DOM: .item > .inner > .image > img
   ================================================ */

.usn_cmp_gallery .item {
  border-radius: 10px !important;
  overflow: hidden !important;
}
.usn_cmp_gallery .item img {
  transition: transform 0.3s ease !important;
}
.usn_cmp_gallery .item:hover img {
  transform: scale(1.05) !important;
}

/* ================================================
   === Grid Layout (usn_cmp_gridlayout) ===
   uSkinned DOM: .component-main, .row, [class*="col-"]
   ================================================ */

.usn_cmp_gridlayout .component-main {
  max-width: 1320px !important;
  margin: 0 auto !important;
}
.usn_cmp_gridlayout .component-main [class*="col-"] {
  padding: 0 calc(var(--space-m) / 2) !important;
}
@media (max-width: 960px) {
  .usn_cmp_gridlayout .component-main [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: var(--space-m) !important;
  }
}

/* ================================================
   === Links (usn_cmp_links) ===
   uSkinned DOM: .item > .inner, a
   ================================================ */

.usn_cmp_links .item a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--blue) !important;
  text-decoration: none !important;
}
.usn_cmp_links .item a:hover {
  color: var(--dk-blue) !important;
  text-decoration: underline !important;
}
.usn_cmp_links .item .text {
  font-size: 14px !important;
  color: var(--grey-600) !important;
  font-weight: 400 !important;
}
.usn_cmp_links .item {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: var(--space-s) !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
.usn_cmp_links .item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
}

/* ================================================
   === Pods (usn_cmp_pods) ===
   uSkinned DOM: .item > .inner > .image + .info
                 .info > .heading + .text
   Default: blue accent strip, white bg, hover lift
   ================================================ */

.usn_cmp_pods .item .inner {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: var(--white) !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
  position: relative !important;
}
.usn_cmp_pods .item .inner:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
}
/* Blue 4px accent strip (default on all pods) */
.usn_cmp_pods .item .inner::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  background: var(--blue) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
}
.usn_cmp_pods .item .info .heading {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: var(--black) !important;
}
.usn_cmp_pods .item .info .text p {
  font-size: 14px !important;
  color: var(--grey-600) !important;
  line-height: 1.5 !important;
}

/* Testimonial variant (requires gu-pods-testimonial class) */
.gu-pods-testimonial .item .inner {
  background: var(--grey-50) !important;
  border: none !important;
  text-align: center !important;
  padding: var(--space-xl) var(--space-m) !important;
}
.gu-pods-testimonial .item .inner::before {
  display: none !important; /* no accent strip on testimonials */
}
.gu-pods-testimonial .item blockquote {
  font-size: 18px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: var(--dk-blue) !important;
  line-height: 1.5 !important;
}

/* ================================================
   === Product Information (usn_cmp_productinfo) ===
   uSkinned DOM: .info > .heading, .price, .text
   ================================================ */

.usn_cmp_productinfo .heading {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: var(--dk-blue) !important;
}
.usn_cmp_productinfo .price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
}
.usn_cmp_productinfo .price-old {
  font-size: 14px !important;
  color: var(--grey-400) !important;
  text-decoration: line-through !important;
}
.usn_cmp_productinfo .snipcart-add-item,
.usn_cmp_productinfo .btn {
  background: var(--yellow) !important;
  color: var(--black) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  min-height: 44px !important;
  text-transform: none !important;
}
.usn_cmp_productinfo .text {
  font-size: 16px !important;
  color: var(--black) !important;
  line-height: 1.5 !important;
}

/* ================================================
   === Split Component (usn_cmp_splitcomponent) ===
   uSkinned DOM: .item > .info > h2.heading + .text
                 .item > .image > img
   ================================================ */

.usn_cmp_splitcomponent .item img {
  border-radius: 10px !important;
  object-fit: cover !important;
}
.usn_cmp_splitcomponent .info h2,
.usn_cmp_splitcomponent .info h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}
.usn_cmp_splitcomponent .component-main {
  align-items: center !important;
}

/* ================================================
   === Subpage Listing (usn_cmp_subpagelisting) ===
   uSkinned DOM: .item > .inner > .image + .info
   ================================================ */

.usn_cmp_subpagelisting .item .inner {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
.usn_cmp_subpagelisting .item .inner:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
}
.usn_cmp_subpagelisting .item img {
  height: 160px !important;
  object-fit: cover !important;
}
.usn_cmp_subpagelisting .item .heading {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.usn_cmp_subpagelisting .item .price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
}
.usn_cmp_subpagelisting .tab-nav a.active {
  color: var(--blue) !important;
  border-bottom-color: var(--blue) !important;
}

/* ================================================
   === Text Block (usn_cmp_text) ===
   uSkinned DOM: .info > h2 + .text > p
   Note: h2 may have class .heading, body is in .text
   ================================================ */

.usn_cmp_text .info h2,
.usn_cmp_text .info h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: var(--dk-blue) !important;
}
.usn_cmp_text .info p {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--black) !important;
}
.usn_cmp_text .info a {
  color: var(--blue) !important;
  text-decoration: underline !important;
}
.usn_cmp_text .info a:hover {
  color: var(--dk-blue) !important;
}
.usn_cmp_text .info ul,
.usn_cmp_text .info ol {
  padding-left: var(--space-m) !important;
  margin-bottom: var(--space-s) !important;
}
.usn_cmp_text .info li {
  margin-bottom: 6px !important;
  line-height: 1.5 !important;
}

/* ================================================
   === Windows (usn_cmp_windows) ===
   uSkinned DOM: .item.item_text-boxed, .image
   ================================================ */

.usn_cmp_windows .item {
  border-radius: 10px !important;
  overflow: hidden !important;
}
.usn_cmp_windows .item .image a .play-icon {
  background: var(--blue) !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
}

/* ================================================
   === SPACING & LAYOUT FIXES (2026-03-27) ===
      Audit: block-test-page showed uSkinned defaults
         overriding the design system spacing tokens.
            ================================================ */
            
            /* FIX 1: Section padding — 60px → 48px (--space-xl)
               uSkinned defaults every .component to 60px top/bottom,
                  giving 120px between adjacent sections. --space-xl (48px)
                     per side = 96px total gap — matches design intent. */
                     .component.usn_cmp_text,
                     .component.usn_cmp_pods,
                     .component.usn_cmp_datalist,
                     .component.usn_cmp_links,
                     .component.usn_cmp_gridlayout,
                     .component.usn_cmp_splitcomponent,
                     .component.usn_cmp_gallery,
                     .component.usn_cmp_quote,
                     .component.usn_cmp_ctastrip,
                     .component.usn_cmp_form,
                     .component.usn_cmp_accordiontab,
                     .component.usn_cmp_alertbox,
                     .component.usn_cmp_subpagelisting,
                     .component.usn_cmp_windows {
                           padding-top: var(--space-xl) !important;
                             padding-bottom: var(--space-xl) !important;
                     }
                     
                     /* FIX 2: Pod card inner padding
                        .inner has padding:0 — text is flush against card border.
                           Add --space-m (24px) so content has breathing room. */
                           .usn_cmp_pods .item .inner .info {
                                 padding: var(--space-m) !important;
                           }
                           
                           /* FIX 3: Pod card gutter — 30px → 24px (--space-m)
                              Align uSkinned default to design token. */
                              .usn_cmp_pods .item {
                                    padding-bottom: var(--space-m) !important;
                              }
                              
                              /* FIX 4: Pod heading font-size — 28px → 20px
                                 uSkinned defaults to 28px which has no design system
                                    match. Card headings should be 20px / weight 600. */
                                    .usn_cmp_pods .item .info .heading {
                                          font-size: 20px !important;
                                            line-height: 1.3 !important;
                                    }
                                    
                                    /* FIX 5: Gallery image border-radius consistency
                                       Apply to .image wrapper + img directly so all rows
                                          get rounded corners, not just the first. */
                                          .usn_cmp_gallery .item .image {
                                                border-radius: 10px !important;
                                                  overflow: hidden !important;
                                          }
                                          .usn_cmp_gallery .item img {
                                                border-radius: 10px !important;
                                          }
                                          
                                          /* FIX 6: Reduce gap after anchor nav
                                             Tighten the first content section after the
                                                sticky anchor navigation. */
                                                .usn_cmp_anchornavigation + .component {
                                                      padding-top: var(--space-l) !important;
                                                }

/* FIX 7: Testimonial quote pod */
.usn_cmp_pods .item.usn_pod_quote .inner::before {
  display: none !important;
}
.usn_cmp_pods .item.usn_pod_quote .inner {
  background: var(--grey-50) !important;
  border: none !important;
  padding: var(--space-xl) var(--space-m) !important;
}
.usn_cmp_pods .usn_pod_quote .item-quote {
  text-align: center !important;
}
.usn_cmp_pods .usn_pod_quote .quote {
  font-style: italic !important;
  color: var(--dk-blue) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.usn_cmp_pods .usn_pod_quote .meta {
  margin-top: var(--space-s) !important;
  font-size: 14px !important;
  color: var(--grey-600) !important;
}

/* FIX 8: Data list pod — heading above description */
.usn_cmp_pods .usn_pod_datalist .list-title {
  display: flex !important;
  flex-direction: column-reverse !important;
}
.usn_cmp_pods .usn_pod_datalist .heading {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
.usn_cmp_pods .usn_pod_datalist .secondary-heading {
  font-size: 14px !important;
  color: var(--grey-600) !important;
  line-height: 1.5 !important;
  margin-top: var(--space-xs) !important;
}
.usn_cmp_pods .item.usn_pod_datalist .inner {
  padding: var(--space-m) !important;
}

/* FIX 9: Video pod */
.usn_cmp_pods .item.usn_pod_video .inner {
  padding: 0 !important;
}
.usn_cmp_pods .usn_pod_video iframe,
.usn_cmp_pods .usn_pod_video video {
  width: 100% !important;
  border-radius: 10px 10px 0 0 !important;
}

/* FIX 10: Image pod */
.usn_cmp_pods .usn_pod_image .image {
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
}
.usn_cmp_pods .usn_pod_image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* FIX 11: Links pod */
.usn_cmp_pods .usn_pod_links .inner {
  padding: var(--space-m) !important;
}
.usn_cmp_pods .usn_pod_links a {
  color: var(--blue) !important;
  text-decoration: underline !important;
}
.usn_cmp_pods .usn_pod_links a:hover {
  color: var(--dk-blue) !important;
}

/* FIX 12: Social links pod */
.usn_cmp_pods .usn_pod_sociallinks .inner {
  padding: var(--space-m) !important;
  text-align: center !important;
}
.usn_cmp_pods .usn_pod_sociallinks a {
  display: inline-block !important;
  margin: 0 var(--space-xs) !important;
}

/* FIX 13: Product/pricing pod */
.usn_cmp_pods .usn_pod_pricingtable .inner,
.usn_cmp_pods .usn_pod_podproductinfo .inner {
  padding: var(--space-m) !important;
}

/* FIX 14: Subpage listing pod */
.usn_cmp_pods .usn_pod_podsubpagelisting .inner {
  padding: var(--space-m) !important;
}
.usn_cmp_pods .usn_pod_podsubpagelisting .heading {
  font-size: 20px !important;
  font-weight: 600 !important;
}

/* FIX 15: Search with links pod */
.usn_cmp_pods .usn_pod_searchlinks .inner {
  padding: var(--space-m) !important;
}

/* FIX 16: Code pod */
.usn_cmp_pods .usn_pod_code .inner {
  padding: var(--space-m) !important;
  overflow: hidden !important;
}

/* FIX 17: Form pod */
.usn_cmp_pods .usn_pod_form .inner {
  padding: var(--space-m) !important;
}

/* FIX 18: Accordion/Tab pod */
.usn_cmp_pods .usn_pod_accordiontab .heading {
  font-size: 20px !important;
  font-weight: 600 !important;
}
                                                }
                                          }
                                          }
                                    }
                              }
                           }
                     }

/* === NON-POD BLOCK COMPONENT FIXES (2026-03-27) === */

/* FIX 19: Data List component — heading weight correction */
.usn_cmp_datalist .heading {
  font-weight: 600 !important;  /* was 700, design system says 600 for headings */
}

/* FIX 20: Split Component — heading size reduction */
.usn_cmp_splitcomponent .heading {
  font-size: 28px !important;  /* was 40px, too large for in-page section */
  line-height: 1.3 !important;
}
/* ============================================================
   STATS BAR — gu-stats-bar
   Design system: GUDesignSystem.md → Stats bar (line 636)
   Used on: All programme pages (position 2 in 12-block recipe)
   Macro: statsBar.cshtml (8 parameters: stat1-4 Value/Label)
   ADR-024: Mandatory on all courses
   ============================================================ */

/* Full-bleed escape — sits outside page-wrap, flush below hero */
.gu-stats-bar {
    background: var(--dk-blue) !important; /* #003762 */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    box-sizing: border-box;
    /* Flush with hero above — collapse any gap */
    margin-top: -1px;
}

/* Inner grid — constrained to page width */
.gu-stats-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* Individual stat cell */
.gu-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px var(--space-m); /* 28px 24px */
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.gu-stat:last-child {
    border-right: none;
}

/* Stat value — the prominent number/text */
.gu-stat-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Stat label — uppercase descriptor below the value */
.gu-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

/* ---- Responsive: tablet (≤ 960px) → 2×2 grid ---- */
@media (max-width: 960px) {
    .gu-stats-bar-inner {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 24px;
    }
    /* Remove right border on even columns */
    .gu-stat:nth-child(2) {
        border-right: none;
    }
    .gu-stat:nth-child(4) {
        border-right: none;
    }
    /* Add top border on second row */
    .gu-stat:nth-child(3),
    .gu-stat:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }
}

/* ---- Responsive: mobile (≤ 580px) → tighter padding ---- */
@media (max-width: 580px) {
    .gu-stats-bar-inner {
        padding: 0 20px;
    }
}
section.component .intro .heading,
section.component .component-introduction .heading {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--blue, #003762) !important;
}