/* ═══════════════════════════════════════════════════════════════════════════
   EVOLVED BRAND — DESIGN SYSTEM STYLESHEET - Ed Dyer - July 2026
   Warwick Design System · id7 Integration Layer
   ───────────────────────────────────────────────────────────────────────────

   TOKEN ARCHITECTURE (three-tier model)
   ┌─ REF   (--w-ref-*)    Raw palette values. Never consumed by components
   │                        directly. Single source of truth for all values.
   ├─ SYS   (--w-sys-*)    Semantic aliases — map intent to ref tokens.
   │                        Components consume these, not ref tokens.
   └─ COMP  (--w-comp-*)   Component-level overrides. Use sparingly.

	Notes:
		Uses kebab case.
		The brand is intentionally square-cornered.
		
		

   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. REFERENCE TOKENS — Raw Palette
   ─────────────────────────────────────────────────────────────────────────── */

:root {

  /* Neutrals ---------------------------------------------------------------- */
  --w-ref-colors-black:       #000000;
  --w-ref-colors-white:       #ffffff;
  --w-ref-colors-near-white:  #fdfcfc;
  --w-ref-colors-ink:         #0b0b0b;
  --w-ref-colors-grey-50:     #fafafa;
  --w-ref-colors-grey-100:    #efefef;
  --w-ref-colors-grey-400:    #999999;
  --w-ref-colors-grey-800:    #262626;
  --w-ref-colors-grey-900:    #212529;

  /* Brand — Lavender (masthead) --------------------------------------------- */
	
  /* --w-ref-colors-lavender-100  (central DS) */
  /* --w-ref-colors-lavender-300  (central DS) */
  /* --w-ref-colors-lavender-500  (central DS) */

  /* Status ------------------------------------------------------------------ */
  --w-ref-colors-red-700:     rgb(157, 34, 53);

  /* ─────────────────────────────────────────────────────────────────────────
     2. SYSTEM TOKENS — Semantic Aliases
     These are the tokens all component rules should consume.
     ───────────────────────────────────────────────────────────────────────── */

  /* Masthead / Navigation --------------------------------------------------- */
  --w-sys-colors-masthead:           var(--w-ref-colors-lavender-500);
  --w-sys-colors-masthead-secondary: var(--w-ref-colors-lavender-300);
  --w-sys-colors-masthead-tertiary:  var(--w-ref-colors-lavender-100);
  --w-sys-colors-masthead-color:     var(--w-ref-colors-ink);

  /* Page surfaces ----------------------------------------------------------- */
  --w-sys-colors-bg:                 var(--w-ref-colors-white);
  --w-sys-colors-bg-alt:             var(--w-ref-colors-grey-100);
  --w-sys-colors-page-contrast:      var(--w-ref-colors-white);

  /* Interactive / Foreground ------------------------------------------------ */
  --w-sys-colors-text:               var(--w-ref-colors-black);
  --w-sys-colors-text-muted:         var(--w-ref-colors-grey-900);
  --w-sys-colors-border:             var(--w-ref-colors-black);
  --w-sys-colors-border-muted:       var(--w-ref-colors-grey-400);

  /* Focus ------------------------------------------------------------------- */
  --w-sys-focus-outline:             #ffbf47;

  /* Status ------------------------------------------------------------------ */
  --w-sys-colors-warning:            var(--w-ref-colors-red-700);

  /* Footer ------------------------------------------------------------------ */
  --w-sys-colors-footer-bg:          var(--w-ref-colors-black);
  --w-sys-colors-footer-text:        var(--w-ref-colors-white);
  --w-sys-colors-footer-link:        var(--w-ref-colors-near-white);


  /* ─────────────────────────────────────────────────────────────────────────
     3. SPACING SCALE — Base-4 grid (1rem = 16px)
     ───────────────────────────────────────────────────────────────────────── */

  --w-space-px:     0.0625rem;  /*   1px — hairline */
  --w-space-0-5:    0.125rem;   /*   2px */
  --w-space-1:      0.25rem;    /*   4px */
  --w-space-2:      0.5rem;     /*   8px */
  --w-space-3:      0.75rem;    /*  12px */
  --w-space-4:      1rem;       /*  16px */
  --w-space-5:      1.25rem;    /*  20px */
  --w-space-6:      1.5rem;     /*  24px */
  --w-space-8:      2rem;       /*  32px */
  --w-space-10:     2.5rem;     /*  40px */
  --w-space-12:     3rem;       /*  48px */
  --w-space-15:     3.75rem;    /*  60px */
  --w-space-16:     4rem;       /*  64px */
  --w-space-20:     5rem;       /*  80px */
  --w-space-24:     6rem;       /*  96px */
  --w-space-25:     6.25rem;    /* 100px */


  /* ─────────────────────────────────────────────────────────────────────────
     4. TYPOGRAPHY SCALE
     ───────────────────────────────────────────────────────────────────────── */

  --w-font-size-xs:   0.75rem;   /* 12px */
  --w-font-size-sm:   0.875rem;  /* 14px */
  --w-font-size-base: 1rem;      /* 16px */
  --w-font-size-lg:   1.25rem;   /* 20px */
  --w-font-size-xl:   1.5rem;    /* 24px */
  --w-font-size-2xl:  1.75rem;   /* 28px */
  --w-font-size-3xl:  2rem;      /* 32px */
  --w-font-size-4xl:  2.5rem;    /* 40px */
  --w-font-size-5xl:  3.5rem;    /* 56px */
  --w-font-size-6xl:  6rem;      /* 96px  — mobile hero h2 */
  --w-font-size-7xl:  7rem;      /* 112px — desktop hero h2 */


  /* ─────────────────────────────────────────────────────────────────────────
     5. BORDER RADIUS
     ───────────────────────────────────────────────────────────────────────── */

  --w-border-radius-none: 0;
  --w-border-radius-full: 50%; /* Circular nav-grid button */


  /* ─────────────────────────────────────────────────────────────────────────
     6. MOTION
     ───────────────────────────────────────────────────────────────────────── */

  --w-transition-base:   0.3s ease;
  --w-transition-bounce: 0.3s cubic-bezier(0.57, 0.19, 0.26, 1.15);


  /* ─────────────────────────────────────────────────────────────────────────
     7. FOCUS RING
     ⚑ Note: WCAG 2.4.7 compliant:
     inner white ring + outer black ring ensures visibility on any bg colour.
     ───────────────────────────────────────────────────────────────────────── */

  --w-focus-ring: 0 0 0 0.125rem var(--w-ref-colors-white),
                  0 0 0 0.25rem  var(--w-ref-colors-black);


  /* ─────────────────────────────────────────────────────────────────────────
     8. COMPONENT TOKENS
     Values that belong to a specific component pattern and are not general
     enough for the spacing or colour scales.
     ───────────────────────────────────────────────────────────────────────── */

  /* Video / hero controls */
  --video-controls-row:  3; /* Set to 1 to move controls to top of overlay */
  --banner-height:       auto;

  /* Button hover shadow */
  --w-comp-btn-hover-shadow: 0 0 0 var(--w-space-1) var(--w-ref-colors-black);

  /* Image container heights */
  --w-comp-img-height:          23rem; /* standard image block */
  --w-comp-img-height-sm:       12rem; /* nav grid thumbnail */
  --w-comp-img-height-banner:   8rem;  /* banner strip */
  --w-comp-img-height-hero:     31rem; /* hero image variant */
  --w-comp-nav-grid-label-min:  7rem;  /* nav grid label bar */

  /* ─────────────────────────────────────────────────────────────────────────
     9. BREAKPOINT REFERENCE (documentation only)
     ⚑ CSS custom properties cannot be used inside @media queries
     natively. Documented here as a reference constant set.
       --w-bp-sm:  48rem      (768px)
       --w-bp-md:  62rem      (992px)
       --w-bp-lg:  75rem      (1200px)
     All media queries in this file use these rem equivalents consistently.
     ───────────────────────────────────────────────────────────────────────── */

}


/* ═══════════════════════════════════════════════════════════════════════════
   DEFAULT PAGE — Base Layout
   ═══════════════════════════════════════════════════════════════════════════ */

#cookie-banner {
  position: fixed;
}

main#main {
  background-color: var(--w-sys-colors-masthead);
  overflow-x: hidden;
  padding-top: var(--w-space-10);
}

/* ⚑ DS NOTE: overflow-y: clip on <Body><h1><a href="/">������ý</a></h1><script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(bp, s);
})();
</script> can cause scroll-restoration and
   accessibility issues in some browsers. Verified intentional for the search
   flyout; document this clearly if the behaviour is ever revisited. */
body:not(.mce-content-body) {
  overflow-x: hidden;
  overflow-y: clip;
}

/* ⚑ DS NOTE: !important removed. The comment "Removing masthead colour at
   page bottom" does not match what padding does — clarify intent. */
.id7-main-content {
  padding: 0 var(--w-space-5); /* ⚑ was 0px 20px !important */
}


/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT — Spacing Utilities
   ═══════════════════════════════════════════════════════════════════════════ */

.spacing .layout-row.layout-row--nowrap {
  gap: var(--w-space-10);
}

@media (min-width: 48rem) {
  .spacing .layout-col--6 {
    width: calc(50% - var(--w-space-5));
  }

  .spacing .layout-col--8 {
    width: calc(66.66% - var(--w-space-5));
  }

  .spacing .layout-col--4 {
    width: calc(33.33% - var(--w-space-5));
  }
}

@media (max-width: 48rem) {
  .layout-row.layout-row--nowrap {
    gap: var(--w-space-5);
    display: flex;
    flex-direction: column;
  }
}

.padding {
  padding: var(--w-space-25) 0;
}

.slim-padding {
  padding: var(--w-space-15) 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SURFACES — White & Grey Backgrounds
   ⚑ DS NOTE: The box-shadow + clip-path bleed technique intentionally extends
   a background colour beyond its container boundary to fill the full viewport
   width. This is a deliberate layout pattern, documented here for future
   maintainers. The 100vmax value is large enough to always reach the edge.
   ═══════════════════════════════════════════════════════════════════════════ */

.white-bg {
  background: var(--w-sys-colors-bg);
  box-shadow: 0 0 0 100vmax var(--w-sys-colors-bg);
  clip-path: inset(0 -100vmax);
}

.white-bg + .white-bg {
  padding-top: 0;
}

/* ⚑ DS NOTE: Scoping --w-sys-colors-bg locally is valid CSS custom property
   usage — child components inherit the overridden value automatically. */
.grey-bg {
  background: var(--w-sys-colors-bg-alt);                  /* ⚑ was #EFEFEF */
  box-shadow: 0 0 0 100vmax var(--w-sys-colors-bg);        /* Intentional: blends into white */
  clip-path: inset(0 -100vmax);
  --w-sys-colors-bg: var(--w-sys-colors-bg-alt);           /* Scope override for children */
}


/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

h2 {
  font-size: var(--w-font-size-4xl);
}

[class*="bg"] > h2 {
  margin-bottom: var(--w-space-6);
}

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: var(--w-space-10) 0;
  gap: var(--w-space-3);
}

.text-large {
  font-size: 2em;
  font-weight: 700;
  line-height: normal;
}

.accordion-heading {
  color: var(--w-ref-colors-grey-800);
}

@media (min-width: 48rem) {
  .white-bg .spacing .text-container {
    padding-left: var(--w-space-15);
  }
}

@media (max-width: 48rem) {
  .white-bg [class*="id7-brand"] .text-container {
    padding: var(--w-space-15) var(--w-space-5) 0;
  }
}

#main a {
  text-underline-offset: 25%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ⚑ DS NOTE: !important removed from all button rules except the .white-text
   utility class override, which is a valid use case for !important.
   Specificity conflicts should be resolved at the theme level, not here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   Primary Button
   ───────────────────────────────────────────── */

.btn-primary {
  color: var(--w-sys-colors-bg);
  background-color: var(--w-sys-colors-text);
  font-weight: 600;
  border: 1px solid var(--w-sys-colors-border);
  font-size: var(--w-font-size-base);
  min-height: var(--w-space-10)
  border-radius: var(--w-border-radius-none);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 1.125rem;                              /* ⚑ was 6px 18px — non-scale; kept precise for button geometry */
  box-shadow: none;
  transition: box-shadow var(--w-transition-bounce);
}

/* ⚑ DS NOTE: Utility override class — !important retained intentionally.
   This is the one acceptable use: a single-purpose override class. */
.btn-primary.white-text,
.btn-primary.white-text i {
  color: var(--w-ref-colors-white) !important; /* Intentional utility class override */
}

.btn-primary:hover {
  background-color: var(--w-sys-colors-text);
  box-shadow: var(--w-comp-btn-hover-shadow);
}

.btn-primary i,
.btn-secondary i {
  margin-left: var(--w-space-4);
  font-size: var(--w-font-size-xl);
}

.overlayContent .btn-primary i,
.overlayContent .btn-secondary i {
  margin-left: 0;
}

.overlayContent i {
  font-size: 2.5rem;
}


/* ─────────────────────────────────────────────
   Secondary Button
   ───────────────────────────────────────────── */

.btn-secondary {
  border: 1px solid var(--w-sys-colors-border);
  color: var(--w-sys-colors-text);
  background: none;
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: var(--w-sys-colors-text);
  color: var(--w-ref-colors-white);         
}

.pg-dark .btn-secondary {
  border-color: var(--w-ref-colors-white);   
  color: var(--w-ref-colors-white);    
}

.pg-dark .btn-secondary:hover {
  background-color: var(--w-ref-colors-white); 
  color: var(--w-sys-colors-text);
}

.btn-primary i.new-window-link,
.btn-secondary i.new-window-link {
  display: none;
}


/* ─────────────────────────────────────────────
   Tertiary Button
   ───────────────────────────────────────────── */

.btn-tertiary {
  font-weight: 800;
  color: var(--w-sys-colors-text);       
  text-decoration-color: var(--w-sys-colors-text);
}

.btn-tertiary i {
  margin-left: var(--w-space-1);
}

i.new-window-link {
  font-size: 1.4rem;
  color: var(--w-sys-colors-text);
}

.card-container h3 a:hover i,
.btn-tertiary:hover i.fa-arrow-right {
  transform: translateX(var(--w-space-1));
}

.card-container h3 a i,
.btn-tertiary i.fa-arrow-right {
  transition: transform var(--w-transition-base);
}


/* ─────────────────────────────────────────────
   Mobile Button Overrides
   ───────────────────────────────────────────── */

@media (max-width: 47.9375rem) { 
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  .cta-links .btn-primary,
  .cta-links .btn-secondary {
    width: auto;
  }

  .btn-primary i,
  .btn-secondary i {
    margin-left: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS STATES
   ═══════════════════════════════════════════════════════════════════════════ */

a:focus,
.form-control:focus,
.dropdown-menu > .active > a:focus,
.dropdown-toggle:focus,
.open > a:focus,
[role="button"]:focus {
  box-shadow: var(--w-focus-ring);
  outline: none;
}

.id7-navigation button.nav-dropdown-button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: revert;
  box-shadow: var(--w-focus-ring);
}

button:focus-visible,
a:focus-visible {
  box-shadow: var(--w-focus-ring);
}

.module--toggle:focus-visible {
  background-color: var(--w-sys-focus-outline);
}


/* ═══════════════════════════════════════════════════════════════════════════
   MASTHEAD / NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 48rem) {
  nav.navbar {
    background-color: var(--w-sys-colors-masthead);
  }
}

.id7-masthead .id7-header-text.affix.headroom,
.navbar-primary {
  background-color: var(--w-sys-colors-masthead);
}

.navbar-nav .dropdown-menu {
  background-color: var(--w-sys-colors-masthead-secondary);
  box-shadow: none;
}

.navbar-primary {
  box-shadow: inset 0 -1px 0 0 var(--w-ref-colors-black); 
  z-index: 1;
}

.id7-masthead .id7-header-text .id7-parent-site-link,
.navbar-nav > li,
.navbar-nav .dropdown-menu > li > a,
.id7-logo-row nav a {
  color: var(--w-sys-colors-masthead-color); 
}

.navbar-nav > li:focus,
.navbar-nav > li:hover,
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav > .open {
  background-color: transparent; 
}

.dropdown-menu > li > a:focus {
  background-color: var(--w-sys-focus-outline);
}

.navbar-nav > li > a:hover,
.dropdown-menu > li > a:hover,
.id7-site-links a:hover,
.h1 a:hover {
  text-decoration: underline;
  text-underline-offset: 25%;
}

.navbar-nav > li.active::before {
  display: none; /* ⚑ was display: none !important */
}

.id7-masthead .id7-header-text .id7-parent-site-link::after {
  border-bottom: 5px solid transparent;       
  border-left:   7px solid var(--w-sys-colors-masthead-color);
  border-top:    5px solid transparent;
}

.search-button i {
  color: rgba(0, 0, 0, 0.5);
}

.search-button i:hover {
  color: var(--w-ref-colors-black); 
}

.navbar-tertiary {
  display: none;
}

@media (min-width: 48rem) {
  .id7-masthead .id7-header-text .h1,
  .id7-masthead .id7-header-text h1 {
    font-size: var(--w-font-size-lg); 
  }

  html.id7-borderless .id7-masthead .id7-header-text.affix::after,
  html.id7-borderless .id7-masthead .id7-header-text.affix::before {
    background: var(--w-sys-colors-masthead);
  }
}

.id7-search .typeahead.dropdown-menu > li.active > a {
  background: var(--w-sys-colors-masthead-color);
  color: var(--w-ref-colors-white); 
}

@media (max-width: 47.9375rem) { 
  .id7-masthead .id7-logo-row nav ul > li {
    display: none;
  }

  .navbar-tertiary {
    display: block;
    background-color: var(--w-sys-colors-masthead-tertiary);
  }
}

.id7-navigation .navbar-nav > li:last-child + li::before,
.id7-navigation .navbar-nav > li:not(.nav-breadcrumb):not(:last-child)::after {
  border-right: 1px solid var(--w-sys-colors-masthead-color);
}

.id7-navigation .navbar-nav > li.dropdown > a::after {
  border-top: 4px solid var(--w-sys-colors-masthead-color);
}


/* ─────────────────────────────────────────────
   Mobile Masthead
   ───────────────────────────────────────────── */

@media (min-width: 48rem) {
  .navbar-secondary {
    display: none;
  }
}

@media (max-width: 48rem) {
  .navbar-secondary {
    background-color: var(--w-sys-colors-masthead-secondary); 
  }
}

li.nav-breadcrumb.first {
  background-color: var(--w-sys-colors-masthead-secondary);
}

.navbar-secondary .navbar-nav > li:first-child::after {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE CONTAINERS
   ═══════════════════════════════════════════════════════════════════════════ */

.img-container {
  width: 100%;
  height: var(--w-comp-img-height);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.img-container.banner {
  height: var(--w-comp-img-height-banner);
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-grid-item .img-container {
  height: var(--w-comp-img-height-sm); 
}

.nav-grid-item:hover .nav-grid-content,
.nav-grid-link:focus-within .nav-grid-content {
  box-shadow: 0 -0.9375rem 0 0 var(--w-sys-colors-text); 
}

.nav-grid-item .nav-grid-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  margin-bottom: 0;
  min-height: var(--w-comp-nav-grid-label-min); 
  padding: var(--w-space-4);                  
  transition: all var(--w-transition-base);
  box-shadow: 0 0 0 var(--w-ref-colors-black);
  z-index: 1;
  position: relative;
  background-color: var(--w-sys-colors-text);   
  --w-sys-colors-page-contrast: var(--w-ref-colors-white);
}

/* ⚑ DS NOTE: 'text-wrap: auto' is non-standard. Use 'overflow-wrap: anywhere'
   for equivalent behaviour with broad browser support. */
.nav-grid-content h2 {
  margin: 0;
  font-size: var(--w-font-size-2xl); 
  color: var(--w-ref-colors-white); 
  overflow-wrap: anywhere;  
  text-align: left;
}

.nav-grid-content h3 {
  overflow-wrap: anywhere;          
  text-align: left;
  font-size: 1.1em;
  margin: 0;
  color: var(--w-ref-colors-white);  
}

.nav-grid-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  margin-left: var(--w-space-1);            
  border-radius: var(--w-border-radius-full);
  background-color: transparent;
  height: var(--w-space-10);               
  min-width: var(--w-space-10);       
  border: 2px solid var(--w-sys-colors-page-contrast);
  transition: transform var(--w-transition-base);
  color: var(--w-sys-colors-page-contrast);
}

.nav-grid-button i {
  color: var(--w-sys-colors-page-contrast);
  font-size: 1.7em;
}

.nav-grid-button:hover,
.nav-grid-link:focus-within .nav-grid-button {
  transform: scale(1.2);
}

.nav-grid-link {
  padding: 0;
  text-decoration: none;
  min-width: 100%;
}

@media (max-width: 48rem) {
  a.btn.nav-grid-link {
    width: 100%;
  }
}

.layout-row.layout-row--nowrap.no-gutters {
  gap: var(--w-space-5); 
}

@media (min-width: 48rem) {
  .layout-row.layout-row--nowrap.no-gutters .layout-col--6 {
    width: calc(50% - var(--w-space-5));   
  }

  .layout-row.layout-row--nowrap.no-gutters .layout-col--3 {
    width: calc(25% - var(--w-space-5));   
  }
}

@media (min-width: 48rem) and (max-width: 62rem) {
  .layout-col--3 {
    width: 50%;
  }

  .layout-row.layout-row--nowrap {
    gap: var(--w-space-5) 0; 
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HORIZONTAL SCROLLER
   ═══════════════════════════════════════════════════════════════════════════ */

.horizontal-scroller .horizontal-scroller-controls button {
  display: inline-block;
  position: relative;
  height: inherit;
  width: inherit;
  padding: 0;
  transition: transform var(--w-transition-base);
}

.horizontal-scroller-controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--w-space-10); 
  margin: var(--w-space-5); 
}

@media (max-width: 74.9375rem) {
  .horizontal-scroller-controls {
    margin: var(--w-space-5) var(--w-space-4); 
  }
}

.horizontal-scroller-controls i {
  color: var(--w-sys-colors-text); 
  font-size: 4rem;
}

.horizontal-scroller-items-wrapper.padItems {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

.horizontal-scroller-controls button:hover {
  transform: scale(1.3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CTA BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.cta-block h2 {
  font-weight: 900;
  font-size: var(--w-font-size-5xl); 
}

.cta-block .cta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  padding-left: 0; 
}

.cta-block .cta-links li {
  width: 50%;
  list-style: none;
}

.cta-block .cta-links a {
  margin: var(--w-space-1); 
  display: flex;
}

.cta-content {
  padding-top: var(--w-space-10);
}

@media (max-width: 61.9375rem) { 
  .cta-block .cta-links li {
    width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COURSE SEARCH
   ═══════════════════════════════════════════════════════════════════════════ */

form#course-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--w-space-4); 
}

.course-search .input-group {
  display: flex;
  gap: var(--w-space-4);
  flex-wrap: wrap;
  justify-items: stretch;
}

#course-search-form p {
  margin: 0;
}

@media (min-width: 48rem) and (max-width: 62rem) {
  #search-courses {
    width: 100%;
  }
}

.input-icon-wrapper {
  position: relative;
  flex-grow: 2;
  min-width: 48%;
}

.input-icon-wrapper i {
  position: absolute;
  left: var(--w-space-3);             
  top: 50%;
  transform: translateY(-50%);
  color: var(--w-ref-colors-black); 
  pointer-events: none;
  font-size: var(--w-font-size-base);
  z-index: 1;
}

#homepage-course-search::placeholder {
  color: var(--w-ref-colors-grey-900); 
}

#homepage-course-search {
  border: 2px solid var(--w-sys-colors-border);
  background-color: transparent;
  padding-left: 2.25rem; 
}

#study-level {
  width: auto;
  border: 2px solid var(--w-sys-colors-border); 
  background-color: transparent;
  flex-grow: 1;
}

#search-courses i {
  margin-left: 0.5em;
}

@media (max-width: 47.9375rem) { 
  .input-icon-wrapper {
    width: 100%;
    margin-right: 0;
    position: relative;
  }
}

#warning-message {
  padding: var(--w-space-4);             
  background-color: var(--w-sys-colors-warning); 
  display: none;
  color: var(--w-ref-colors-white);  
  font-size: 1.8rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.header h2 {
  font-size: var(--w-font-size-7xl);    
  font-weight: 700;
  line-height: 1;                      
  padding-top: 1.875rem;              
  margin-bottom: 1.875rem;          
}

.header .header-content h2 {
  padding-top: 0;
}

.hero-video-text p {
  max-width: 40.625rem; 
}

@media (max-width: 47.9375rem) {
  .header h2 {
    font-size: var(--w-font-size-6xl); 
  }
}

.header-text-full-width {
  padding-bottom: var(--w-space-15); 
}

@media (min-width: 48rem) {
  .header.crest-right {
    display: flex;
    gap: var(--w-space-10); 
  }

  .header-content {
    align-self: center;
  }

  .header.crest-right::before {
    order: 1;
  }
}

@media (max-width: 48rem) {
  .header-content {
    padding-bottom: var(--w-space-10); 
  }
}

.hero-video-align {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  padding-right: var(--w-space-16); 
}

@media (max-width: 47.9375rem) { 
  .hero-video-align {
    padding-right: var(--w-space-6); 
  }
}

nav.id7-site-links {
  display: flex;        
  margin-left: auto;   
}


/* ─────────────────────────────────────────────
   Hero — Image Variant
   ───────────────────────────────────────────── */

.hero-image-container .img-content {
  min-height: var(--w-comp-img-height-hero); 
  width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 48rem) {
  .hero-image {
    padding: 0;
    margin: 0 calc(-1 * var(--w-space-5));
  }

  .hero-image-layout h2 {
    padding-top: 0;
  }
}


/* ─────────────────────────────────────────────
   Hero — Video Variant
   ───────────────────────────────────────────── */

.hero-video-align .overlayContainer {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero-video-align .overlayContent {
  height: 100%;
  width: 100%;
  z-index: 1;
  position: absolute;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto auto auto;
  padding: var(--w-space-5);  
  gap: var(--w-space-3);     
}

@media screen and (min-width: 48rem) {
  .hero-video-align .overlayContent {
    gap: var(--w-space-5); 
  }
}

.hero-video-align .containerBackground {
  width: 100%;
  position: absolute;
}

.hero-video-align .overlayContainer img,
.hero-video-align .overlayContainer video {
  width: 100%;
  margin-bottom: -7px; /* Intentional: removes sub-pixel rendering gap on video element */
}

.hero-video-align .overlayContainer .btn {
  padding: var(--w-space-4); 
}

.hero-video-align .overlayContainer .btn i {
  margin-right: 0;
  width: 1em;
}

.hero-video-align a[data-purpose="transcript-download"] {
  grid-row: var(--video-controls-row);
  grid-column: -3;
}

#vidbutton { /* Play / Pause */
  grid-row: var(--video-controls-row);
  grid-column: 1;
  justify-content: start;
  justify-self: start;
  width: auto;
  margin: 0 var(--w-space-4) 0 0; 
  font-size: 2rem;
}

#vidbutton i {
  margin-right: var(--w-space-4); 
}

#captionsbutton { /* CC */
  grid-row: var(--video-controls-row);
  grid-column: -2;
}

#audiobutton { /* Mute / unmute */
  grid-row: var(--video-controls-row);
  grid-column: -1;
}

@media (min-width: 48rem) {
  .hero-video-align .overlayContainer .btn {
    padding: 0.875rem 1.125rem;
  }

  #vidbutton {
    min-width: 7.4em;
  }
}


/* ─────────────────────────────────────────────
   Video Warning Widget
   ───────────────────────────────────────────── */

.vid-warning.hover {
  box-shadow: none;
  transition: box-shadow var(--w-transition-bounce);
}

.vid-warning.hover:hover {
  background-color: var(--w-sys-colors-text); 
  box-shadow: var(--w-comp-btn-hover-shadow);
}

.vid-warning {
  display: flex;
  align-items: center;
  background-color: var(--w-sys-colors-text); 
  overflow: hidden;
  justify-self: start;
}

.warning-icon {
  font-size: 1.8em;
  padding: var(--w-space-0-5) var(--w-space-3);
  color: var(--w-ref-colors-white);             
  cursor: pointer;
}

.warning-info {
  font-size: var(--w-font-size-sm); 
  margin: var(--w-space-1) 0;       
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width var(--w-transition-base);
}

.warning-group {
  margin-left: var(--w-space-4);
}

.vid-warning.active .warning-info {
  max-width: 31.25rem;
  min-width: 9.375rem; 
}

.vid-warning label {
  font-weight: normal;
  color: var(--w-ref-colors-white);  
  font-size: var(--w-font-size-xs);  
  margin-bottom: 0;
}

.vid-warning p {
  margin: 0 var(--w-space-4) 0 0; 
  color: var(--w-ref-colors-white);  
}

@media (max-width: 47.9375rem) { 
  .warning-info {
    font-size: var(--w-font-size-xs);
    margin: var(--w-space-0-5) 0;   
  }

  .warning-icon {
    font-size: 1.6em;
    padding: var(--w-space-0-5) var(--w-space-4); 
  }

  #vidbutton {
    font-size: 0; /* Intentional: hides label text on mobile */
  }

  #vidbutton i {
    margin-right: 0;
    font-size: 2rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ACCORDION
   ⚑ DS NOTE: The original had two identical ~10-property rule blocks —
   one for .tabs-accordion and one inside @media (max-width: 768px) — that
   were byte-for-byte duplicates. Consolidated into a single shared rule.
   Only properties that genuinely differ at mobile are in the @media block.
   ═══════════════════════════════════════════════════════════════════════════ */

button.tabs-component--accordion-button.btn.btn-default.btn-lg:focus {
  background-color: var(--w-sys-colors-bg);
  box-shadow: none;
}

button.tabs-component--accordion-button.btn.btn-default.btn-lg:focus-visible {
  box-shadow: var(--w-focus-ring);
  background-color: var(--w-sys-focus-outline);
}

/* Consolidated rule (was duplicated for .tabs-accordion and @media max-width: 768px) */
.tabs-accordion button.tabs-component--accordion-button.btn.btn-default.btn-lg,
button.tabs-component--accordion-button.btn.btn-default.btn-lg {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 0.9375rem 0;                              
  border: none;
  border-top: 1px solid var(--w-sys-colors-border);  
  margin: 0 0 -0.125rem;                             
  background: transparent;
}

button.tabs-component--accordion-button.btn.btn-default.btn-lg.expanded {
  border-bottom: none;
}

.tabs-component--accordion-button h3,
.tabs-component--accordion-button h4,
.tabs-component--accordion-button h5 {
  margin: 0;
}

.tabs-component--accordion-button i {
  color: var(--w-sys-colors-bg);
  background: var(--w-sys-colors-text); 
  padding: var(--w-space-4);         
  margin: 0;
}

.tabs-component .panel.panel-default {
  border: none;
  margin-top: var(--w-space-1); 
}

.tabs-component .panel-body {
  padding: 0.9375rem 0 var(--w-space-10); 
}

.tabs-component--panels .tabs-component--panels.tab-content {
  box-shadow: 0 1px 0 0 var(--w-sys-colors-text); 
}

.panel {
  background-color: var(--w-sys-colors-bg);
}

.panel.panel-default {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.05);
}


/* ─────────────────────────────────────────────
   Nested Accordion (Mobile only)
   ───────────────────────────────────────────── */

@media (max-width: 48rem) {
  .tabs-component--panels .tabs-accordion button.tabs-component--accordion-button.btn.btn-default.btn-lg {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--w-space-4);                            
    padding: var(--w-space-4) 0;            
    border-top: 1px solid var(--w-sys-colors-border-muted); 
  }

  .tabs-component--panels .tabs-accordion .tabs-component--panels.tab-content {
    border-bottom: 0;
    margin-left: 1.875rem;                              
    box-shadow: 0 1px 0 0 var(--w-sys-colors-border-muted); 
  }

  .tabs-component .tabs-component .tabs-component--accordion-button i {
    color: var(--w-sys-colors-bg);
    background: var(--w-sys-colors-text); 
  }

  .tabs-component--panels .tabs-component--panels.tab-content {
    box-shadow: none;
  }

  .tabs-component--panels.tab-content {
    box-shadow: 0 1px 0 0 var(--w-sys-colors-text); 
  }
}


/* ─────────────────────────────────────────────
   Tabs Style
   ───────────────────────────────────────────── */

@media (min-width: 48rem) {
  .tabs-component > .tabs-component--tablist {
    justify-content: center;
    padding: var(--w-space-4) 0 1.875rem; 
  }
}

.tabs-component > .tabs-component--tablist > button {
  background-color: var(--w-sys-colors-bg);
  border: 1px solid var(--w-sys-colors-border);
  border-radius: var(--w-border-radius-none); 
}

.tabs-component > .tabs-component--tablist > button:hover,
.tabs-component > .tabs-component--tablist > button.active {
  background-color: var(--w-sys-colors-text);
  color: var(--w-sys-colors-bg);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TEXT & IMAGE LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 48rem) {
  .layout-row:has(.layout-col:first-child .img-container):has(.text-container) {
    flex-direction: column-reverse;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TIKTOK EMBED
   ═══════════════════════════════════════════════════════════════════════════ */

.tiktok blockquote {
  padding: 0;   
  border: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LINK LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.link-list {
  display: flex;
  flex-direction: column;
  gap: var(--w-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.link-list li {
  margin: 0;
  padding: 0;
}

.link-list a.btn-tertiary {
  width: fit-content;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.id7-page-footer .id7-app-footer {
  background: var(--w-sys-colors-footer-bg);
  box-shadow: 0 0 0 100vmax var(--w-sys-colors-footer-bg);
  clip-path: inset(0 -100vmax);
}

.id7-page-footer.id7-footer-coloured .id7-site-footer {
  background: var(--w-sys-colors-footer-bg);
  color: var(--w-sys-colors-footer-text);           
  box-shadow: 0 0 0 100vmax var(--w-sys-colors-footer-bg);
  clip-path: inset(0 -50vmax -2px);
}

.id7-page-footer.id7-footer-coloured .id7-site-footer a,
.id7-page-footer.id7-footer-coloured .id7-site-footer a:link,
.id7-page-footer.id7-footer-coloured .id7-site-footer a:visited,
.id7-page-footer.id7-footer-coloured .id7-site-footer h3 {
  color: var(--w-sys-colors-footer-link); 
}

.social-media-icons i.fa-square {
  color: var(--w-ref-colors-white);
}

.fa-inverse {
  color: var(--w-ref-colors-black);
}