/* cmsms stylesheet: CTC - Stylesheet modified: Tuesday, October 6, 2026 9:38:10 AM */
/* Chance to Choose full stylesheet — Version 14 — 2026-09-28 */
/* cmsms stylesheet: CTC - Stylesheet modified: Monday, September 28, 2026 5:45:39 PM */
/* ==================================================
   GLOBAL ACCENT COLOURS — EDIT THESE VALUES
   Change --ctc-accent to recolour all formerly orange items.
   Hover and pressed colours follow it automatically, or set them
   independently (for example: var(--bs-primary)).
   ================================================== */
:root {
  --ctc-accent: var(--bs-orange);
  --ctc-accent-hover: color-mix(in srgb, var(--ctc-accent) 80%, var(--bs-white));
  --ctc-accent-active: color-mix(in srgb, var(--ctc-accent) 85%, var(--bs-black));
}

/* ==================================================
   CHANCE TO CHOOSE - COMPLETE SITE STYLESHEET
   Extracted from the current Bootstrap 5.3 site
   plus CMSMS navigation updates. Mobile dropdown colours now match desktop.
   ================================================== */

/* ==================================================
       CUSTOM SITE STYLES
       ================================================== */
    html { scroll-behavior: smooth; }
    


@font-face {
  font-family: 'OpenDyslexic';
  src: url('/assets/fonts/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('/assets/fonts/OpenDyslexic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('/assets/fonts/OpenDyslexic-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('/assets/fonts/OpenDyslexic-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

body {
  background: var(--bs-white);
  font-family: 'Lexend', sans-serif !important;
}



@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/Lexend-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/Lexend-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/Lexend-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/Lexend-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/Lexend-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/Lexend-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/Lexend-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/Lexend-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/Lexend-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}



    .carousel-item img {
      height: 500px;
      object-fit: cover;
    }

    .carousel-caption {
      background: rgba(var(--bs-black-rgb), .55);
      border-radius: .75rem;
      padding: 1rem 1.5rem;
    }

    .section-line {
      width: 60px;
      height: 4px;
      background: var(--ctc-accent);
      border-radius: 4px;
    }

    .journey-timeline {
      position: relative;
      padding-left: 30px;
    }

    .journey-timeline::before {
      content: "";
      position: absolute;
      left: 9px;
      top: 5px;
      bottom: 5px;
      width: 2px;
      background: var(--bs-dark);
    }

    .journey-item {
      position: relative;
      padding-left: 25px;
      padding-bottom: 45px;
    }

    .journey-item:last-child { padding-bottom: 0; }

    .journey-marker {
      position: absolute;
      left: -30px;
      top: 3px;
      width: 20px;
      height: 20px;
      border: 2px solid var(--bs-dark);
      background: var(--bs-white);
      border-radius: 50%;
      z-index: 2;
    }

    .journey-marker::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      top: 4px;
      left: 4px;
      background: var(--ctc-accent);
      border-radius: 50%;
    }

    .journey-title { color: var(--bs-dark); }
    .journey-title-final { color: var(--ctc-accent); }

    .gallery-card {
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .gallery-card:hover { transform: translateY(-5px); }

    .gallery-button {
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      overflow: hidden;
      width: 100%;
    }

    .gallery-image {
      width: 100%;
      height: 240px;
      object-fit: cover;
      transition: transform .3s ease;
    }

    .gallery-card:hover .gallery-image {
      transform: scale(1.04);
    }

  .gallery-modal-image {
  opacity: 1;
  transition: opacity .35s ease;
}

.gallery-modal-image.gallery-fade-out {
  opacity: 0;
}
    


    .footer-section {
      background: var(--bs-dark);
      color: var(--bs-white);
    }

    .footer-section a {
      color: rgba(var(--bs-white-rgb), .72);
      text-decoration: none;
    }

    .footer-section a:hover { color: var(--bs-white); }

    .footer-muted { color: rgba(var(--bs-white-rgb), .72); }

    .footer-border {
      border-color: rgba(var(--bs-white-rgb), .15) !important;
    }

    .heart-icon {
      color: var(--ctc-accent);
      font-size: 2.5rem;
      line-height: 1;
    }

    .btn-ctc {
      background: var(--ctc-accent);
      border-color: var(--ctc-accent);
      color: var(--bs-white);
    }

    .btn-ctc:hover {
      background: var(--ctc-accent-hover);
      border-color: var(--ctc-accent-hover);
      color: var(--bs-white);
    }

    @media (max-width: 767.98px) {
      .carousel-item img { height: 320px; }
      .carousel-caption { padding: .75rem; }
      .journey-item p { font-size: 1rem !important; }
      .gallery-image { height: 230px; }
    }

    /* Navbar visibility fix */
    .navbar-ctc {
      display: flex !important;
      background-color: var(--bs-dark) !important;
      min-height: 64px;
      position: relative;
      z-index: 1030;
    }

    .navbar-ctc .navbar-brand,
    .navbar-ctc .navbar-nav .nav-link {
      color: var(--bs-white) !important;
    }

    .navbar-ctc .navbar-nav .nav-link:hover,
    .navbar-ctc .navbar-nav .nav-link:focus,
    .navbar-ctc .navbar-nav .nav-link.active {
      color: var(--ctc-accent-hover) !important;
    }

    .navbar-ctc .navbar-toggler {
      border-color: rgba(var(--bs-white-rgb), .5);
    }

    .navbar-ctc .navbar-toggler-icon {
      background-image: var(--bs-navbar-toggler-icon-bg);
      filter: none;
    }

    .navbar-ctc {
      --bs-navbar-toggler-icon-bg: linear-gradient(var(--bs-white), var(--bs-white));
    }


    /* Centred logo over the carousel */
    .carousel-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      width: min(42%, 420px);
      height: auto;
      object-fit: contain;
      pointer-events: none;
    }

    @media (max-width: 767.98px) {
      .carousel-logo {
        width: min(60%, 280px);
      }
    }


    .carousel-logo-svg {
      height: auto;
    }

    .carousel-logo-svg svg {
      display: block;
      width: 100%;
      height: auto;
    }


    /* Smaller logo in the top-left of the carousel */
    .carousel-logo {
      top: 20px !important;
      left: 20px !important;
      transform: none !important;
      width: 150px !important;
      max-width: 28% !important;
    }

    @media (max-width: 767.98px) {
      .carousel-logo {
        top: 12px !important;
        left: 12px !important;
        width: 105px !important;
        max-width: 30% !important;
      }
    }


    .carousel-logo-home {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 11;
      display: block;
      width: 185px;
      max-width: 32%;
      text-decoration: none;
    }

    .carousel-logo-home .carousel-logo {
      position: static !important;
      width: 100% !important;
      max-width: none !important;
      transform: none !important;
      pointer-events: auto !important;
    }

    @media (max-width: 767.98px) {
      .carousel-logo-home {
        top: 12px;
        left: 12px;
        width: 105px;
        max-width: 30%;
      }
    }


    /* Custom video thumbnails and centred play buttons */
    .video-player {
      background: var(--bs-black);
      position: relative;
      cursor: pointer;
    }

    .video-thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .video-play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 76px;
      height: 76px;
      border: 0;
      border-radius: 50%;
      background: rgba(var(--bs-black-rgb), .78);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s ease, background-color .2s ease;
      z-index: 2;
    }

    .video-play-button:hover,
    .video-play-button:focus-visible {
      background: var(--ctc-accent-hover);
      transform: translate(-50%, -50%) scale(1.08);
    }

    .video-play-triangle {
      width: 0;
      height: 0;
      border-top: 13px solid transparent;
      border-bottom: 13px solid transparent;
      border-left: 21px solid var(--bs-white);
      margin-left: 5px;
    }

    .video-player iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    @media (max-width: 575.98px) {
      .video-play-button {
        width: 62px;
        height: 62px;
      }
    }


    /* Custom YouTube controls: hides YouTube's own control bar (including Share/Settings) */
    .video-player.is-playing {
      cursor: default;
    }

    .video-player .youtube-frame {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    .video-custom-controls {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .65rem .75rem;
      background: linear-gradient(transparent, rgba(var(--bs-black-rgb), .82));
    }

    .video-control-btn {
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: rgba(var(--bs-white-rgb), .16);
      color: var(--bs-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      line-height: 1;
    }

    .video-control-btn:hover,
    .video-control-btn:focus-visible {
      background: var(--ctc-accent-hover);
    }

    .video-control-spacer {
      flex: 1;
    }


    /* Video control positioning */
    .video-custom-controls {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: block;
      padding: 0;
      background: none;
      pointer-events: none;
    }

    .video-custom-controls .video-control-btn {
      pointer-events: auto;
    }

    .video-pause-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 68px;
      height: 68px;
      font-size: 1.35rem;
      background: rgba(var(--bs-black-rgb), .72);
    }

    .video-pause-btn:hover,
    .video-pause-btn:focus-visible {
      transform: translate(-50%, -50%) scale(1.08);
    }

    .video-fullscreen-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 44px;
      height: 44px;
      background: rgba(var(--bs-black-rgb), .72);
    }

    .video-control-spacer {
      display: none;
    }


    /* Auto-hide video controls */
    .video-custom-controls {
      opacity: 1;
      transition: opacity .3s ease;
    }

    .video-player.controls-hidden .video-custom-controls {
      opacity: 0;
      pointer-events: none;
    }

    .video-player.controls-hidden .video-custom-controls .video-control-btn {
      pointer-events: none;
    }


    /* Back to top button */
    #backToTop {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 1050;
      width: 52px;
      height: 52px;
      border: 0;
      border-radius: 50%;
      background: var(--ctc-accent);
      color: var(--bs-white);
      font-size: 1.65rem;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 .35rem 1rem rgba(var(--bs-black-rgb), .22);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background-color .2s ease;
    }
    #backToTop.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    #backToTop:hover,
    #backToTop:focus-visible {
      background: var(--ctc-accent-hover);
    }
    @media (max-width: 575.98px) {
      #backToTop {
        right: 14px;
        bottom: 14px;
        width: 48px;
        height: 48px;
      }
    }


    /* Bootstrap Headers-style navigation */
    .ctc-header {
      background: var(--bs-dark);
      border-bottom: 1px solid rgba(var(--bs-white-rgb), .15);
    }

    .ctc-header .ctc-header-nav > li > .nav-link {
      color: rgba(var(--bs-white-rgb), .85);
      font-weight: 500;
    }

    .ctc-header .ctc-header-nav > li > .nav-link:hover,
    .ctc-header .ctc-header-nav > li > .nav-link:focus,
    .ctc-header .ctc-header-nav > li > .nav-link.active {
      color: var(--bs-white);
    }

    .ctc-header .dropdown-menu {
      background: var(--bs-dark);
      border-color: rgba(var(--bs-white-rgb), .12);
    }

    .ctc-header .dropdown-item {
      color: var(--bs-white);
    }

    .ctc-header .dropdown-item:hover,
    .ctc-header .dropdown-item:focus {
      color: var(--bs-white);
      background: var(--ctc-accent-hover);
    }

    .ctc-search {
      width: 330px;
      max-width: 100%;
    }

    .ctc-search .form-control {
      background: transparent;
      border-color: var(--bs-secondary);
      color: var(--bs-white);
    }

    .ctc-search .form-control::placeholder {
      color: var(--bs-gray-500);
    }

    .ctc-search .form-control:focus {
      background: var(--bs-white);
      color: var(--bs-dark);
      border-color: var(--ctc-accent);
      box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ctc-accent) 20%, transparent);
    }

    .btn-ctc-search {
      background: var(--ctc-accent);
      border-color: var(--ctc-accent);
      color: var(--bs-white);
      font-weight: 600;
    }

    .btn-ctc-search:hover,
    .btn-ctc-search:focus {
      background: var(--ctc-accent-hover);
      border-color: var(--ctc-accent-hover);
      color: var(--bs-white);
    }

    @media (max-width: 991.98px) {
      .ctc-header-nav {
        width: 100%;
        gap: .15rem;
      }

      .ctc-search {
        width: 100%;
        margin-top: .5rem;
      }
    }


    /* Meet Our Team */
    .team-card {
      border: 0;
      border-radius: 1rem;
      overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .team-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 .75rem 1.5rem rgba(var(--bs-black-rgb), .12) !important;
    }

    .team-photo {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 50%;
      margin: 1.75rem auto 0;
      display: block;
      border: 5px solid var(--bs-white);
      box-shadow: 0 .25rem .75rem rgba(var(--bs-black-rgb), .12);
    }

    .team-role {
      color: var(--ctc-accent);
      font-weight: 600;
    }


    /* Mobile hamburger for the Bootstrap Headers-style navigation */
    .ctc-mobile-toggle {
      border-color: rgba(var(--bs-white-rgb), .5);
      padding: .4rem .55rem;
    }

    .ctc-mobile-toggle:focus {
      box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ctc-accent) 25%, transparent);
    }

    .ctc-mobile-toggle .navbar-toggler-icon {
      filter: invert(1);
    }

    @media (max-width: 991.98px) {
      #ctcHeaderMenu {
        width: 100%;
        padding-top: .85rem;
      }

      .ctc-header-nav {
        flex-direction: column;
        align-items: stretch;
      }

      .ctc-header-nav > li {
        width: 100%;
      }

      .ctc-header-nav > li > .nav-link {
        width: 100%;
        padding: .7rem .75rem !important;
      }

      .ctc-header .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        margin: .15rem 0 .5rem;
      }

      .ctc-search {
        width: 100%;
      }
    }


    /* Explicit white hamburger icon for the custom header */
    .ctc-mobile-toggle .navbar-toggler-icon {
      display: block;
      width: 1.5em;
      height: 1.5em;
      background-image: linear-gradient(var(--bs-white), var(--bs-white)) !important;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      filter: none !important;
    }


    /* Full blog post example */
    .blog-feature {
      max-width: 920px;
      margin: 0 auto;
    }

    .blog-feature-image {
      width: 100%;
      max-height: 520px;
      object-fit: cover;
    }

    .blog-meta {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem 1.25rem;
      color: var(--bs-secondary);
      font-size: .95rem;
    }

    .blog-author-photo {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
    }

    .blog-article-body p {
      font-size: 1.05rem;
      line-height: 1.8;
    }

    .blog-article-body h3 {
      margin-top: 2rem;
      margin-bottom: .75rem;
      font-weight: 700;
    }

    .blog-quote {
      border-left: 4px solid var(--ctc-accent);
      padding-left: 1.25rem;
      margin: 2rem 0;
      font-size: 1.15rem;
      font-style: italic;
      color: var(--bs-gray-700);
    }


    /* Keep blog author/job title and publication date visually aligned */
    .blog-author-row .blog-meta {
      align-self: flex-end;
      padding-bottom: 1px;
      line-height: 1.25;
    }

    .blog-author-row .blog-meta span {
      display: block;
    }


    /* Extra breathing room below the footer Get Involved buttons */
    .footer-section .btn-ctc,
    .footer-section .btn-outline-light {
      margin-bottom: .75rem;
    }

  
    /* ==================================================
       FORM CHECKBOXES & RADIO BUTTONS
       Larger, clearer controls using the Chance to Choose colours
       ================================================== */
    .form-check {
      padding-left: 2rem;
    }

    .form-check-input {
      width: 1.25rem;
      height: 1.25rem;
      margin-left: -2rem;
      margin-top: .15rem;
      border: 2px solid var(--bs-secondary);
      cursor: pointer;
      box-shadow: none;
    }

    .form-check-input[type="checkbox"] {
      border-radius: .3rem;
    }

    .form-check-input[type="radio"] {
      border-radius: 50%;
    }

    .form-check-input:checked {
      background-color: var(--ctc-accent);
      border-color: var(--ctc-accent);
    }

    .form-check-input:focus {
      border-color: var(--ctc-accent);
      box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ctc-accent) 20%, transparent);
    }

    .form-check-label {
      padding-left: .25rem;
      cursor: pointer;
      line-height: 1.5;
    }

    .form-check-input:disabled,
    .form-check-input:disabled + .form-check-label {
      cursor: not-allowed;
      opacity: .65;
    }

  
    /* Orange focus outline for all form fields */
    .form-control:focus,
    .form-select:focus {
      border-color: var(--ctc-accent);
      box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ctc-accent) 20%, transparent);
      outline: 0;
    }

  
    /* ==================================================
       DEMO MEMBERS REGISTER
       Example layout only - this can later be moved to a private page
       ================================================== */
    .member-register-card {
      border: 1px solid var(--bs-border-color);
      border-radius: .85rem;
      overflow: hidden;
      background: var(--bs-white);
      box-shadow: 0 .25rem .8rem rgba(var(--bs-black-rgb), .05);
    }

    .member-register-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: .9rem 1rem;
    }

    .member-register-row + .member-register-row {
      border-top: 1px solid var(--bs-gray-200);
    }

    .member-register-photo {
      width: 52px;
      height: 52px;
      object-fit: cover;
      border-radius: 50%;
      flex: 0 0 52px;
      border: 2px solid var(--ctc-accent);
    }

    .member-register-name {
      font-weight: 700;
      margin-bottom: .1rem;
    }

    .member-register-meta {
      font-size: .9rem;
      color: var(--bs-secondary);
    }

    .member-register-check {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: .55rem;
      white-space: nowrap;
    }

    .member-register-toggle {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid var(--bs-gray-400);
      background: var(--bs-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: .2s ease;
    }

    .member-register-toggle:hover,
    .member-register-toggle:focus {
      border-color: var(--ctc-accent-hover);
      box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ctc-accent-hover) 15%, transparent);
    }

    .member-register-toggle::after {
      content: "";
      width: .65rem;
      height: .65rem;
      border-right: 2px solid var(--bs-gray-800);
      border-bottom: 2px solid var(--bs-gray-800);
      transform: rotate(45deg) translateY(-2px);
      transition: transform .2s ease;
    }

    .member-register-toggle[aria-expanded="true"]::after {
      transform: rotate(225deg) translate(-1px, -1px);
    }

    .member-register-details {
      background: var(--bs-light);
      border-top: 1px solid var(--bs-gray-200);
      padding: 1rem 1.25rem 1.25rem;
    }

    .member-detail-label {
      font-size: .8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .03em;
      color: var(--bs-secondary);
      margin-bottom: .15rem;
    }

    @media (max-width: 575.98px) {
      .member-register-row {
        flex-wrap: wrap;
      }

      .member-register-check {
        width: 100%;
        margin-left: 68px;
        justify-content: space-between;
      }
    }

  
    /* Footer Email Us: keep the button background unchanged on hover */
    .footer-email-btn:hover,
    .footer-email-btn:focus {
      color: var(--ctc-accent-hover) !important;
      background-color: transparent !important;
      border-color: var(--bs-white) !important;
    }

  
    /* ==================================================
       CAROUSEL CONTROLS
       Hide arrows and indicators until the carousel is hovered/focused
       ================================================== */
    #mainCarousel .carousel-control-prev,
    #mainCarousel .carousel-control-next,
    #mainCarousel .carousel-indicators {
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s ease, visibility .25s ease;
    }

    #mainCarousel:hover .carousel-control-prev,
    #mainCarousel:hover .carousel-control-next,
    #mainCarousel:hover .carousel-indicators,
    #mainCarousel:focus-within .carousel-control-prev,
    #mainCarousel:focus-within .carousel-control-next,
    #mainCarousel:focus-within .carousel-indicators {
      opacity: 1;
      visibility: visible;
    }

    /* Keep controls available on touch/mobile devices where hover is unavailable */
    @media (hover: none) {
      #mainCarousel .carousel-control-prev,
      #mainCarousel .carousel-control-next,
      #mainCarousel .carousel-indicators {
        opacity: 1;
        visibility: visible;
      }
    }

  
    /* Fill the final "Today & Beyond" journey marker completely orange */
    .journey-item:last-child .journey-marker {
      background: var(--ctc-accent);
      border-color: var(--ctc-accent);
    }

    .journey-item:last-child .journey-marker::after {
      background: var(--ctc-accent);
    }

  
    /* ==================================================
       OUR JOURNEY SCROLL ANIMATION
       Fade each journey step in as it enters the viewport
       ================================================== */
    .journey-item {
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity .7s ease,
        transform .7s ease;
    }

    .journey-item.journey-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Keep content immediately visible for users who prefer less motion */
    @media (prefers-reduced-motion: reduce) {
      .journey-item {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

  
    /* Font Awesome navigation icons */
    .nav-menu-icon {
      width: 1.25em;
      margin-right: .45rem;
      text-align: center;
      color: var(--ctc-accent);
    }

    .dropdown-item .nav-menu-icon {
      width: 1.35em;
    }

  
    /* Navigation icons turn white when their menu item is hovered or focused */
    .ctc-header .nav-link:hover .nav-menu-icon,
    .ctc-header .nav-link:focus .nav-menu-icon,
    .ctc-header .dropdown-item:hover .nav-menu-icon,
    .ctc-header .dropdown-item:focus .nav-menu-icon {
      color: var(--bs-white);
    }

  
    /* Root navigation links: orange text on hover/focus.
       Dropdown submenu text keeps its existing hover styling. */
    .ctc-header > .container .nav > .nav-item > .nav-link:hover,
    .ctc-header > .container .nav > .nav-item > .nav-link:focus {
      color: var(--ctc-accent-hover) !important;
    }

  
    /* Fix: all top-level/root menu links turn orange on hover/focus */
    .ctc-header .nav > .nav-item > .nav-link:hover,
    .ctc-header .nav > .nav-item > .nav-link:focus {
      color: var(--ctc-accent-hover) !important;
    }

    /* Root menu icons remain white while hovering/focusing */
    .ctc-header .nav > .nav-item > .nav-link:hover .nav-menu-icon,
    .ctc-header .nav > .nav-item > .nav-link:focus .nav-menu-icon {
      color: var(--bs-white) !important;
    }

  
    /* Final root navigation hover fix:
       works for menu items with and without the .nav-item class */
    .ctc-header .ctc-header-nav > li > .nav-link:hover,
    .ctc-header .ctc-header-nav > li > .nav-link:focus {
      color: var(--ctc-accent-hover) !important;
    }

    .ctc-header .ctc-header-nav > li > .nav-link:hover .nav-menu-icon,
    .ctc-header .ctc-header-nav > li > .nav-link:focus .nav-menu-icon {
      color: var(--bs-white) !important;
    }

  
    /* Cookie notice */
    .ctc-cookie-banner {
      position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
      z-index: 1085; max-width: 760px; margin: 0 auto;
      background: var(--bs-white); color: var(--bs-dark); border: 1px solid var(--bs-border-color);
      border-radius: .9rem; box-shadow: 0 .5rem 2rem rgba(var(--bs-black-rgb), .18);
      padding: 1rem 1.15rem;
    }
    .ctc-cookie-banner[hidden] { display: none !important; }
    .ctc-cookie-inner {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    }
    .ctc-cookie-text { margin: 0; line-height: 1.5; }
    .ctc-cookie-link { color: var(--ctc-accent); font-weight: 600; }
    .ctc-cookie-link:hover, .ctc-cookie-link:focus { color: var(--ctc-accent-hover); }
    @media (max-width: 575.98px) {
      .ctc-cookie-inner { align-items: stretch; flex-direction: column; }
      .ctc-cookie-banner .btn { width: 100%; }
    }

  
    /* Prevent accidental horizontal movement/scrolling on mobile */
    html,
    body {
      max-width: 100%;
      overflow-x: hidden;
    }

    img,
    svg,
    video,
    iframe {
      max-width: 100%;
    }

    @media (max-width: 991.98px) {
      body {
        width: 100%;
        position: relative;
      }

      .ctc-cookie-banner {
        left: .75rem;
        right: .75rem;
        width: auto;
        max-width: calc(100% - 1.5rem);
      }
    }

  
    /* Footer legal links */
    .footer-legal-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: .45rem;
      font-size: .9rem;
    }

    .footer-legal-links a {
      color: rgba(var(--bs-white-rgb), .8);
      text-decoration: none;
    }

    .footer-legal-links a:hover,
    .footer-legal-links a:focus {
      color: var(--ctc-accent-hover);
      text-decoration: underline;
    }

    .footer-legal-links span {
      color: rgba(var(--bs-white-rgb), .45);
    }

  
    /* Keep footer legal links on one line without changing the footer layout */
    .footer-legal-links {
      flex-wrap: nowrap !important;
      white-space: nowrap;
    }

    @media (max-width: 420px) {
      .footer-legal-links {
        font-size: .78rem;
        gap: .3rem;
      }
    }

  
    /* Vertically align all three bottom-footer areas on the same baseline */
    .footer-legal-links {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      align-self: center;
      line-height: 1.5;
    }

    .footer-legal-links a,
    .footer-legal-links span {
      line-height: inherit;
    }

  
    /* Clickable contact details in the private Members Register */
    .member-contact-link {
      color: inherit;
      text-decoration: underline;
      text-decoration-color: color-mix(in srgb, var(--ctc-accent) 55%, transparent);
      text-underline-offset: 2px;
    }

    .member-contact-link:hover,
    .member-contact-link:focus {
      color: var(--ctc-accent-hover);
      text-decoration-color: var(--ctc-accent-hover);
    }

  
    /* Previous / next navigation inside gallery image modals */
    .gallery-modal-nav {
      position: absolute;
      top: 50%;
      z-index: 1080;
      width: 3rem;
      height: 3rem;
      transform: translateY(-50%);
      border: 0;
      border-radius: 50%;
      background: rgba(var(--bs-black-rgb), .55);
      color: var(--bs-white);
      font-size: 2rem;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color .2s ease, color .2s ease;
    }

    .gallery-modal-nav:hover,
    .gallery-modal-nav:focus {
      background: var(--ctc-accent-hover);
      color: var(--bs-white);
      outline: none;
    }

    .gallery-modal-prev { left: 1rem; }
    .gallery-modal-next { right: 1rem; }

    @media (max-width: 575.98px) {
      .gallery-modal-nav {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.6rem;
      }
      .gallery-modal-prev { left: .4rem; }
      .gallery-modal-next { right: .4rem; }
    }

  
    /* Mobile gallery arrows: centre vertically over the photograph itself */
    @media (max-width: 575.98px) {
      .gallery-modal-nav {
        top: calc(64px + ((100vw - 2rem) * 0.34));
        transform: translateY(-50%);
      }
    }

/* ==================================================
   EMBEDDED LOGO SVG STYLES
   ================================================== */
.st0 { fill: var(--bs-black); }
      .st1, .st2 { fill: var(--bs-gray-500); }
      .st3 { fill: var(--bs-white); }
      .st2 { stroke: var(--bs-black); stroke-miterlimit: 10; stroke-width: 3.45px; }
      .st4 { fill: var(--bs-gray-800); }


/* ==================================================
   CMSMS NAVIGATION - FINAL OVERRIDES
   Bootstrap 5.3
   Desktop hover + Level 3 + mobile nested layout
   ================================================== */

/* Main header */
.ctc-header {
  background: var(--bs-dark);
  border-bottom: 1px solid rgba(var(--bs-white-rgb), .15);
}

/* Top navigation */
.ctc-header-nav {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ctc-header-nav > li > .nav-link {
  color: rgba(var(--bs-white-rgb), .88);
  font-weight: 500;
  padding: .75rem .9rem;
  text-decoration: none;
  transition: color .2s ease;
}

/* Text changes orange on hover/focus */
.ctc-header-nav > li > .nav-link:hover,
.ctc-header-nav > li > .nav-link:focus {
  color: var(--ctc-accent-hover) !important;
  background: transparent !important;
}

/* Current page */
.ctc-header-nav > li > .nav-link.active {
  color: var(--ctc-accent) !important;
}

/* Dropdown menus */
.ctc-header .dropdown-menu {
  background: var(--bs-dark);
  border: 1px solid rgba(var(--bs-white-rgb), .12);
  border-radius: .55rem;
  padding: .35rem 0;
  min-width: 220px;
  box-shadow: 0 .5rem 1rem rgba(var(--bs-black-rgb), .25);
}

.ctc-header .dropdown-item {
  color: var(--bs-white);
  padding: .65rem 1rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Dropdown text changes orange, background stays unchanged */
.ctc-header .dropdown-item:hover,
.ctc-header .dropdown-item:focus,
.ctc-dropdown-submenu > .submenu-toggle:hover,
.ctc-dropdown-submenu > .submenu-toggle:focus {
  color: var(--ctc-accent-hover) !important;
  background: transparent !important;
}

/* Current dropdown page */
.ctc-header .dropdown-item.active {
  color: var(--ctc-accent) !important;
  background: transparent !important;
}

.ctc-header .dropdown-divider {
  border-top-color: rgba(var(--bs-white-rgb), .15);
}

/* Level 2 / Level 3 */
.ctc-dropdown-submenu {
  position: relative;
}

.ctc-dropdown-submenu > .submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ctc-submenu-arrow {
  margin-left: 1.25rem;
  font-size: 1.3rem;
  line-height: 1;
}

.ctc-dropdown-submenu > .dropdown-menu {
  position: absolute;
  top: -1px;
  left: 100%;
  margin-top: 0;
  margin-left: .1rem;
}




/* Search */
.ctc-search {
  width: 330px;
  max-width: 100%;
}

.ctc-search .form-control {
  background: transparent;
  border-color: var(--bs-secondary);
  color: var(--bs-white);
}

.ctc-search .form-control::placeholder {
  color: var(--bs-gray-500);
}

.ctc-search .form-control:focus {
  background: var(--bs-white);
  color: var(--bs-dark);
  border-color: var(--ctc-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ctc-accent) 20%, transparent);
}

.btn-ctc-search {
  background: var(--ctc-accent);
  border-color: var(--ctc-accent);
  color: var(--bs-white);
  font-weight: 600;
}

.btn-ctc-search:hover,
.btn-ctc-search:focus {
  background: var(--ctc-accent-hover);
  border-color: var(--ctc-accent-hover);
  color: var(--bs-white);
}

/* Hamburger */
.ctc-mobile-toggle {
  border-color: rgba(var(--bs-white-rgb), .5);
  padding: .4rem .55rem;
}

.ctc-mobile-toggle:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ctc-accent) 25%, transparent);
}

.ctc-mobile-toggle .navbar-toggler-icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-image: linear-gradient(var(--bs-white), var(--bs-white)) !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  filter: none !important;
}

/* Accessible focus */
.ctc-header a:focus-visible,
.ctc-header button:focus-visible,
.ctc-search input:focus-visible {
  outline: 3px solid var(--ctc-accent);
  outline-offset: 2px;
}

/* ==================================================
   DESKTOP
   ================================================== */
@media (min-width: 992px) {

  /* Make dropdowns available for hover transitions */
  .ctc-header .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition:
      opacity .15s ease,
      transform .15s ease,
      visibility .15s ease;
  }

  /* Level 1 opens on hover */
  .ctc-header-nav .dropdown:hover > .dropdown-menu,
  .ctc-header-nav .dropdown.show > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Level 2/3 opens on hover */
  .ctc-dropdown-submenu:hover > .dropdown-menu,
  .ctc-dropdown-submenu > .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Line level 3 up exactly with its parent row */
  .ctc-dropdown-submenu > .dropdown-menu {
    top: -1px;
    left: 100%;
    margin-top: 0;
  }
}

/* ==================================================
   MOBILE / TABLET
   Layout styled like the reference menu
   ================================================== */
@media (max-width: 991.98px) {

  #ctcHeaderMenu {
    width: 100%;
    margin-top: .75rem;
    padding: .75rem;
    background: var(--bs-dark);
    border-radius: .65rem;
    box-shadow: 0 .5rem 1rem rgba(var(--bs-black-rgb), .25);
  }

  .ctc-header-nav {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    margin: 0;
    padding: 0;
  }

  .ctc-header-nav > li {
    width: 100%;
  }

  .ctc-header-nav > li > .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .85rem .75rem;
    color: var(--bs-white);
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: .35rem;
    white-space: normal;
  }

  /* Mobile top-level text hover */
  .ctc-header-nav > li > .nav-link:hover,
  .ctc-header-nav > li > .nav-link:focus {
    color: var(--ctc-accent-hover) !important;
    background: transparent !important;
  }

  /* Level 2 white panel */
  .ctc-header .dropdown-menu {
    position: static !important;
    transform: none !important;
    display: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    min-width: 0;
    margin: .3rem 0 .5rem;
    padding: .25rem 0;
    background: var(--bs-dark);
    border: 1px solid rgba(var(--bs-white-rgb), .12);
    border-radius: .55rem;
    box-shadow: 0 .35rem .75rem rgba(var(--bs-black-rgb), .25);
  }

  .ctc-header .dropdown-menu.show {
    display: block;
  }

  .ctc-header .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .7rem 1rem;
    color: var(--bs-white);
    background: var(--bs-dark);
    font-size: 1.05rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(var(--bs-white-rgb), .12);
    white-space: normal;
  }

  .ctc-header .dropdown-menu > li:last-child > .dropdown-item {
    border-bottom: 0;
  }

  /* Mobile dropdown text hover only */
  .ctc-header .dropdown-item:hover,
  .ctc-header .dropdown-item:focus,
  .ctc-dropdown-submenu > .submenu-toggle:hover,
  .ctc-dropdown-submenu > .submenu-toggle:focus {
    color: var(--ctc-accent-hover) !important;
    background: var(--bs-dark) !important;
  }

  /* Level 3 nested white box */
  .ctc-dropdown-submenu {
    position: relative;
  }

  .ctc-dropdown-submenu > .submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .ctc-dropdown-submenu > .dropdown-menu {
    position: static !important;
    width: calc(100% - 2rem);
    margin: .2rem 1rem .5rem;
    padding: .15rem 0;
    background: var(--bs-dark);
    border: 1px solid rgba(var(--bs-white-rgb), .12);
    border-radius: .55rem;
    box-shadow: 0 .25rem .55rem rgba(var(--bs-black-rgb), .2);
  }

  .ctc-dropdown-submenu > .dropdown-menu .dropdown-item {
    padding-left: 1.25rem;
    font-size: 1rem;
  }

  .ctc-submenu-arrow {
    margin-left: 1rem;
    font-size: 1.4rem;
    line-height: 1;
  }

  .ctc-search {
    width: 100%;
    margin-top: .75rem;
  }

  .ctc-mobile-toggle {
    border: 0;
    padding: .45rem;
  }

  .ctc-mobile-toggle:focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ctc-accent) 30%, transparent);
  }

  .ctc-mobile-toggle .navbar-toggler-icon {
    width: 1.6em;
    height: 1.6em;
  }
}

 <!-- ==================================================
       GALLERY CSS
       ================================================== -->


    .gallery-card {
      transition:
        transform .2s ease,
        box-shadow .2s ease;
    }


    .gallery-card:hover {
      transform: translateY(-5px);
    }


    .gallery-button {
      display: block;

      width: 100%;

      padding: 0;

      border: 0;

      background: transparent;

      cursor: pointer;

      overflow: hidden;
    }


    .gallery-image {
      display: block;

      width: 100%;
      height: 240px;

      object-fit: cover;

      transition:
        transform .3s ease;
    }


    .gallery-card:hover .gallery-image {
      transform: scale(1.04);
    }


    .gallery-button:focus-visible {
      outline: 4px solid var(--ctc-accent);
      outline-offset: -4px;
    }



    /*
     * Slideshow image
     */

    .gallery-modal-image {
      display: block;

      width: auto;
      height: auto;

      max-width: 100%;
      max-height: 68vh;

      margin-left: auto;
      margin-right: auto;

      object-fit: contain;
    }



    /*
     * Slideshow title
     */

    .gallery-modal-header {
      position: relative;

      display: flex;

      align-items: center;
      justify-content: center;

      min-height: 70px;

      padding-left: 4rem;
      padding-right: 4rem;
    }


    .gallery-modal-header .modal-title {
      width: 100%;

      margin: 0;

      text-align: center;
    }


    .gallery-modal-header .btn-close {
      position: absolute;

      top: 50%;
      right: 1.25rem;

      transform: translateY(-50%);

      margin: 0;
    }



    /*
     * Previous / Next buttons
     */

    .gallery-modal-nav {
      position: absolute;

      top: 50%;

      z-index: 1080;

      width: 3rem;
      height: 3rem;

      transform: translateY(-50%);

      border: 0;
      border-radius: 50%;

      background: rgba(var(--bs-black-rgb), .65);

      color: var(--bs-white);

      font-size: 2rem;
      line-height: 1;

      display: flex;

      align-items: center;
      justify-content: center;

      cursor: pointer;

      transition:
        background-color .2s ease;
    }


    .gallery-modal-nav:hover,
    .gallery-modal-nav:focus-visible {
      background: var(--ctc-accent-hover);

      color: var(--bs-white);

      outline: none;
    }


    .gallery-modal-prev {
      left: 1rem;
    }


    .gallery-modal-next {
      right: 1rem;
    }



    @media (max-width: 575.98px) {

      .gallery-modal-header {
        min-height: 62px;

        padding-left: 3.5rem;
        padding-right: 3.5rem;
      }


      .gallery-modal-header .modal-title {
        font-size: 1.15rem !important;
      }


      .gallery-modal-nav {
        width: 2.5rem;
        height: 2.5rem;

        font-size: 1.6rem;
      }


      .gallery-modal-prev {
        left: .4rem;
      }


      .gallery-modal-next {
        right: .4rem;
      }

    }


/* CMSMS Search form only */
form:has(.search-input) {
  margin-left: auto;
  margin-top: 1rem;
  width: 100%;
  max-width: 305px;
  display: flex;
  align-items: stretch;
}

/* Hide only the Search module label */
form:has(.search-input) label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Only the Search module hidden fields */
form:has(.search-input) .hidden {
  display: none;
}

/* Search input */
form:has(.search-input) .search-input {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;

  padding: 0.375rem 0.75rem;

  font-size: 1rem;
  line-height: 1.5;

  color: var(--bs-white);
  background-color: transparent;

  border: 1px solid var(--bs-secondary);
  border-right: 0;

  border-radius: 0.375rem 0 0 0.375rem;

  outline: none;
}

/* Placeholder */
form:has(.search-input) .search-input::placeholder {
  color: var(--bs-gray-500);
  opacity: 1;
}

/* Input focus */
form:has(.search-input) .search-input:focus {
  color: var(--bs-white);
  background-color: transparent;
  border-color: var(--ctc-accent);
  box-shadow: none;
}

/* Search button */
form:has(.search-input) .search-button {
  flex: 0 0 auto;

  padding: 0.375rem 0.9rem;

  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;

  color: var(--bs-white);
  background-color: var(--ctc-accent);
  border: 1px solid var(--ctc-accent);

  border-radius: 0 0.375rem 0.375rem 0;

  cursor: pointer;
  appearance: none;
}

/* Button hover / focus */
form:has(.search-input) .search-button:hover,
form:has(.search-input) .search-button:focus {
  color: var(--bs-white);
  background-color: var(--ctc-accent-hover);
  border-color: var(--ctc-accent-hover);
}

/* Mobile */
@media (max-width: 991.98px) {

  form:has(.search-input) {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  form:has(.search-input) .search-input {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
  }
}

/* Desktop */
@media (min-width: 992px) {

  form:has(.search-input) {
    width: 305px;
    margin-top: 0;
  }
}

.cms-results li {

  list-style: none;

}


/* ==================================================
   EASY READ / FULL DETAILED CONTENT SWITCH
   ================================================== */

.ctc-content-toggle {
  width: 100%;
  padding: 0.75rem 0;
}


/* Full-width background */

.ctc-toggle-bar {
  width: 100%;

  background: var(--bs-tertiary-bg);


}


/* Centres the controls inside the normal site width */

.ctc-toggle-inner {
  min-height: 54px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  flex-wrap: wrap;
}


/* Labels */

.ctc-toggle-label {
  color: var(--bs-gray-600);

  font-size: 1.15rem;

  font-weight: 700;

  line-height: 1.2;

  transition:
    color 0.2s ease;
}


/* Active label */

.ctc-toggle-label.active {
  color: var(--bs-body-color);
}


/* ==================================================
   ORANGE SWITCH
   ================================================== */

.ctc-content-switch {
  position: relative;

  width: 68px;

  height: 38px;

  padding: 0;

  flex-shrink: 0;

  border: 2px solid var(--ctc-accent-active);

  border-radius: 999px;

  background: var(--bs-white);

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}


/* Orange moving circle */

.ctc-switch-knob {
  position: absolute;

  top: 4px;

  left: 5px;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: var(--ctc-accent);

  transition:
    transform 0.25s ease;
}


/* Move switch to the right
   when Full Detailed Content is selected */

.ctc-content-switch[aria-checked="true"]
.ctc-switch-knob {
  transform: translateX(29px);
}


/* Keyboard accessibility */

.ctc-content-switch:focus-visible {
  outline: 3px solid var(--ctc-accent);

  outline-offset: 3px;
}


/* ==================================================
   CONTENT VERSIONS
   ================================================== */

.ctc-content-version[hidden] {
  display: none !important;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 576px) {

  .ctc-content-toggle {
    padding: 0.5rem 0;
  }


  .ctc-toggle-bar {

      padding: 0 0;
  }


  .ctc-toggle-inner {
    min-height: 46px;

    gap: 0.6rem;
  }


  .ctc-toggle-label {
    font-size: 0.95rem;
  }


  .ctc-content-switch {
    width: 56px;

    height: 32px;
  }


  .ctc-switch-knob {
    top: 3px;

    left: 4px;

    width: 22px;

    height: 22px;
  }


  .ctc-content-switch[aria-checked="true"]
  .ctc-switch-knob {
    transform: translateX(24px);
  }

}




 .easy-read-wrapper {
      max-width: 1200px;
    }

    .easy-read-hero {
      background: linear-gradient(135deg, var(--bs-purple), var(--bs-purple));
      color: var(--bs-white);
      border-radius: 1.5rem;
      padding: 2rem;
    }

    .easy-read-hero h1 {
      font-weight: 800;
      font-size: clamp(2.2rem, 6vw, 4.5rem);
      line-height: 1;
    }

    .easy-read-hero p {
      font-weight: 700;
      font-size: clamp(1.2rem, 3vw, 2rem);
      margin-bottom: 0;
    }

    .easy-read-card {
      border: 0;
      border-radius: 1.5rem;
      min-height: 100%;
      padding: 1.5rem;
      box-shadow: 0 0.15rem 0.6rem rgba(var(--bs-black-rgb), 0.08);
    }

    .easy-read-blue { background: var(--bs-primary-bg-subtle); }
    .easy-read-yellow { background: var(--bs-warning-bg-subtle); }
    .easy-read-green { background: var(--bs-success-bg-subtle); }
    .easy-read-pink { background: var(--bs-danger-bg-subtle); }
    .easy-read-purple { background: color-mix(in srgb, var(--bs-purple) 15%, var(--bs-white)); }

    .easy-read-card h2,
    .easy-read-card h3 {
      font-weight: 800;
      margin-bottom: 1rem;
    }

    .easy-read-card p,
    .easy-read-card li {
      font-size: 1.2rem;
      line-height: 1.5;
    }

    .easy-read-card ul {
      margin-bottom: 0;
    }

    .easy-read-icon {
      font-size: 4rem;
      line-height: 1;
      margin-bottom: 1rem;
    }

    .easy-read-icon-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
      margin-bottom: 1rem;
    }

    .easy-read-price-circle {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--bs-warning);
      border: 6px solid var(--bs-warning-text-emphasis);
      font-size: 3.25rem;
      font-weight: 800;
      margin-bottom: 1rem;
    }

    .easy-read-contact {
      background: color-mix(in srgb, var(--bs-purple) 15%, var(--bs-white));
      border-radius: 1.5rem;
      padding: 1.5rem;
    }

    .easy-read-contact p {
      font-size: 1.3rem;
      margin-bottom: 0;
    }

    .easy-read-big-heading {
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 800;
      color: var(--bs-primary);
    }

    .easy-read-feature-list {
      list-style: none;
      padding-left: 0;
    }

    .easy-read-feature-list li {
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
      margin-bottom: 0.8rem;
    }

    .easy-read-feature-list i {
      width: 1.5rem;
      text-align: center;
      margin-top: 0.2rem;
    }

    @media (max-width: 767.98px) {
      .easy-read-hero,
      .easy-read-card,
      .easy-read-contact {
        border-radius: 1rem;
      }

      .easy-read-card p,
      .easy-read-card li,
      .easy-read-contact p {
        font-size: 1.1rem;
      }
    }

.ctc-menu-label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.ctc-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    flex: 0 0 1.25rem;
    margin-right: 0.5rem;
}

.ctc-menu-icon i,
.ctc-menu-icon svg {
    display: block;
}

.ctc-menu-text {
    text-align: left;
}

@media (max-width: 991.98px) {
    .ctc-header-nav .nav-link,
    .ctc-header-nav .dropdown-item {
        text-align: left;
    }

    .ctc-header-nav .nav-link {
        justify-content: flex-start;
    }

    .ctc-header-nav .nav-link.dropdown-toggle {
        display: flex;
        align-items: center;
    }

    .ctc-header-nav .nav-link.dropdown-toggle::after {
        margin-left: auto;
    }

    .ctc-submenu .dropdown-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .ctc-submenu .submenu-toggle {
        justify-content: space-between;
    }

    .ctc-submenu .submenu-toggle .ctc-menu-label {
        justify-content: flex-start;
    }

    .ctc-submenu .dropdown-item:not(.submenu-toggle) {
        justify-content: flex-start;
    }
}

/* ==================================================
   CHANCE TO CHOOSE
   ACCESSIBILITY / TEXT TO SPEECH
   ================================================== */


/* ==================================================
   EASY READ / FULL DETAILED CONTENT
   ================================================== */

#ctcDetailedContentV2[hidden],
#ctcEasyReadContentV2[hidden] {
    display: none !important;
}


/* ==================================================
   FLOATING ACCESSIBILITY PLAYER
   ================================================== */

.tts-player {
    position: fixed;
    left: 1.25rem;
    right: auto;
    bottom: 1.25rem;

    width: min(390px, calc(100% - 2rem));

    background: var(--bs-white);
    color: var(--bs-dark);

    border: 2px solid var(--bs-gray-800);
    border-radius: 0.75rem;

    box-shadow: 0 0.75rem 2rem rgba(var(--bs-black-rgb), 0.20);

    z-index: 1080;

    overflow: hidden;
}


/* ==================================================
   PLAYER HEADER
   ================================================== */

.tts-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 0.8rem 0.9rem;

    background: var(--bs-gray-800);
    color: var(--bs-white);
}

.tts-player-header strong {
    display: flex;
    align-items: center;

    gap: 0.55rem;

    font-size: 1.15rem;
}


/* ==================================================
   MINIMISE BUTTON
   ================================================== */



/* Accessibility header buttons */

.tts-player-header-actions {
    display: flex;
    align-items: center;

    gap: 0.4rem;

    margin-left: auto;
}

.tts-top-button {
    flex: 0 0 auto;
}

.tts-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    padding: 0;

    border: 2px solid rgba(var(--bs-white-rgb), 0.5) !important;
    border-radius: 0.55rem;

    background: transparent;
    color: var(--bs-white);

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.tts-icon-button:hover {
    background: var(--bs-white);
    color: var(--bs-dark);

    border-color: var(--bs-white);
}

.tts-icon-button:focus-visible {
    outline: 3px solid var(--ctc-accent);
    outline-offset: 2px;
}


/* ==================================================
   SPEECH BUTTON AREA
   ================================================== */

.tts-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 0.35rem;

    padding: 0.6rem;

    background: var(--bs-white);
}


/* ==================================================
   READ ALOUD TITLE
   ================================================== */

.tts-read-aloud-title {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;

    gap: 0.4rem;

    margin-bottom: 0.15rem;

    color: var(--bs-dark);

    font-size: 0.95rem;
    font-weight: 700;
}

.tts-read-aloud-title i {
    font-size: 1rem;
    line-height: 1;
}


/* ==================================================
   SPEECH BUTTONS
   ================================================== */

.tts-button {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 0.35rem;

    width: 100%;

    height: 58px;
    min-height: 58px;
    max-height: 58px;

    padding: 0.3rem;

    border: 2px solid var(--bs-secondary);
    border-radius: 0.5rem;

    background: var(--bs-white);
    color: var(--bs-dark);

    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.tts-button i {
    font-size: 1.05rem;
    line-height: 1;
}

.tts-button span {
    font-size: 0.78rem;
    line-height: 1.1;
}


/* Orange hover */

.tts-button:hover {
    background: var(--ctc-accent-hover);
    color: var(--bs-white);

    border-color: var(--ctc-accent-hover);
}


/* Active speech control */

.tts-button.tts-active {
    background: var(--ctc-accent);
    color: var(--bs-white);

    border-color: var(--ctc-accent);

    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ctc-accent) 20%, transparent);
}

.tts-button:hover i,
.tts-button.tts-active i {
    color: var(--bs-white);
}

.tts-button:focus-visible {
    outline: 3px solid var(--ctc-accent);
    outline-offset: 2px;
}


/* ==================================================
   READING COLOUR SECTION
   ================================================== */

.tts-colour-controls {
    padding: 0.6rem;

    border-top: 1px solid var(--bs-gray-500);

    background: var(--bs-white);
    color: var(--bs-dark);
}

.tts-colour-title {
    display: flex;
    align-items: center;

    gap: 0.4rem;

    margin-bottom: 0.65rem;

    font-size: 1rem;
    font-weight: 700;
}

.tts-colour-title i {
    margin: 0;
}


/* ==================================================
   READING COLOUR BUTTON GRID
   ================================================== */

.tts-colour-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 0.35rem;
}


/* ==================================================
   READING COLOUR BUTTONS
   ================================================== */

.tts-colour-button {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 0.35rem;

    width: 100%;

    height: 58px;
    min-height: 58px;
    max-height: 58px;

    padding: 0.3rem;

    border: 2px solid var(--bs-secondary);
    border-radius: 0.5rem;

    background: var(--bs-white);
    color: var(--bs-dark);

    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


/* Orange hover */

.tts-colour-button:hover {
    background: var(--ctc-accent-hover);
    color: var(--bs-white);

    border-color: var(--ctc-accent-hover);
}


/* Selected colour */

.tts-colour-button.active {
    background: var(--bs-white);
    color: var(--bs-dark);

    border-color: var(--ctc-accent);

    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--ctc-accent) 22%, transparent);
}

.tts-colour-button:focus-visible {
    outline: 3px solid var(--ctc-accent);
    outline-offset: 2px;
}

.tts-colour-button i {
    font-size: 1.05rem;
    line-height: 1;
}

.tts-colour-button:hover i {
    color: var(--bs-white);
}


/* ==================================================
   COLOUR PREVIEW CIRCLES
   ================================================== */

.tts-colour-swatch {
    display: block;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    border: 2px solid var(--bs-gray-700);
    border-radius: 50%;
}


/* Dark */

.tts-colour-dark .tts-colour-swatch {
    background: var(--bs-dark);
}


/* Blue */

.tts-colour-blue .tts-colour-swatch {
    background: var(--bs-primary-bg-subtle);
}


/* Green */

.tts-colour-green .tts-colour-swatch {
    background: var(--bs-success-bg-subtle);
}


/* Keep preview circles clear on orange hover */

.tts-colour-button:hover .tts-colour-swatch {
    border-color: var(--bs-white);
}


/* ==================================================
   ZOOM SECTION
   ================================================== */

.tts-zoom-controls {
    padding: 0.6rem;

    border-top: 1px solid var(--bs-gray-500);

    background: var(--bs-white);
    color: var(--bs-dark);
}

.tts-zoom-title {
    display: flex;
    align-items: center;

    gap: 0.4rem;

    margin-bottom: 0.65rem;

    font-size: 1rem;
    font-weight: 700;
}

.tts-zoom-title i {
    margin: 0;
}


/* ==================================================
   ZOOM BUTTON GRID
   ================================================== */

.tts-zoom-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 0.35rem;
}


/* ==================================================
   ZOOM BUTTONS
   ================================================== */

.tts-zoom-button {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 0.25rem;

    width: 100%;

    height: 58px;
    min-height: 58px;
    max-height: 58px;

    padding: 0.3rem;

    border: 2px solid var(--bs-secondary);
    border-radius: 0.5rem;

    background: var(--bs-white);
    color: var(--bs-dark);

    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.tts-zoom-button:hover {
    background: var(--ctc-accent-hover);
    color: var(--bs-white);

    border-color: var(--ctc-accent-hover);
}

.tts-zoom-button.active {
    background: var(--bs-white);
    color: var(--bs-dark);

    border-color: var(--ctc-accent);

    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--ctc-accent) 22%, transparent);
}

.tts-zoom-button:focus-visible {
    outline: 3px solid var(--ctc-accent);
    outline-offset: 2px;
}

.tts-zoom-button i {
    font-size: 1.05rem;
    line-height: 1;
}

.tts-zoom-button:hover i {
    color: var(--bs-white);
}

.tts-zoom-example {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;

    font-weight: 800;
    line-height: 1;
}

.tts-zoom-example-normal {
    font-size: 0.85rem;
}

.tts-zoom-example-large {
    font-size: 1.05rem;
}

.tts-zoom-example-massive {
    font-size: 1.3rem;
}


/* ==================================================
   PAGE ZOOM LEVELS
   ==================================================

   Uses CSS page zoom so images, cards, controls, spacing
   and text enlarge together, similar to browser Cmd/Ctrl +.
   ================================================== */

html.ctc-zoom-large body {
    zoom: 1.5;
}

html.ctc-zoom-massive body {
    zoom: 2.5;
}


/*
 * Keep the Accessibility panel at its normal/original size.
 *
 * The rest of the page behaves like page zoom, but the floating
 * Accessibility control keeps the same collapsed/open appearance
 * it had before Zoom was added.
 */

html.ctc-zoom-large #ttsPlayer {
    zoom: 0.6666667;
}

html.ctc-zoom-massive #ttsPlayer {
    zoom: 0.4;
}








/* ==================================================
   iPHONE / iPAD TEXT ZOOM
   ==================================================

   iOS Safari can behave inconsistently with CSS zoom.

   On iPhone/iPad we therefore leave the page layout and
   Accessibility panel at their normal physical size and enlarge
   the page TEXT using Safari's text-size-adjust support.

   Large   = 150%
   Massive = 250%

   The Accessibility player is explicitly kept at 100%.
   ================================================== */

@supports (-webkit-touch-callout: none) {

    /* Disable whole-page CSS zoom on iPhone/iPad. */
    html.ctc-zoom-large body,
    html.ctc-zoom-massive body {
        zoom: 1 !important;
    }

    /* Large text */
    html.ctc-zoom-large body {
        -webkit-text-size-adjust: 150% !important;
        text-size-adjust: 150% !important;
    }

    /* Massive text */
    html.ctc-zoom-massive body {
        -webkit-text-size-adjust: 250% !important;
        text-size-adjust: 250% !important;
    }

    /*
     * Keep the floating Accessibility box completely normal size.
     * This overrides the inherited iPhone text enlargement.
     */
    html.ctc-zoom-large #ttsPlayer,
    html.ctc-zoom-large #ttsPlayer *,
    html.ctc-zoom-massive #ttsPlayer,
    html.ctc-zoom-massive #ttsPlayer * {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /*
     * Do not apply inverse CSS zoom to the Accessibility box on iOS,
     * because the page itself is no longer CSS-zoomed.
     */
    html.ctc-zoom-large #ttsPlayer,
    html.ctc-zoom-massive #ttsPlayer {
        zoom: 1 !important;
        transform: none !important;
    }

    /* Keep the reading guide/mask at its normal physical size too. */
    html.ctc-zoom-large #ctcReadingAid,
    html.ctc-zoom-massive #ctcReadingAid {
        zoom: 1 !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}


/* ==================================================
   DARK READING MODE
   ================================================== */

body.ctc-colour-dark main {
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

body.ctc-colour-dark main section,
body.ctc-colour-dark main .ctc-toggle-bar {
    background-color: var(--bs-dark) !important;
    color: var(--bs-light) !important;
}

body.ctc-colour-dark main .card {
    background-color: var(--bs-gray-900) !important;
    color: var(--bs-light) !important;

    border-color: var(--bs-secondary) !important;
}

body.ctc-colour-dark main h1,
body.ctc-colour-dark main h2,
body.ctc-colour-dark main h3,
body.ctc-colour-dark main h4,
body.ctc-colour-dark main h5,
body.ctc-colour-dark main h6,
body.ctc-colour-dark main p,
body.ctc-colour-dark main li,
body.ctc-colour-dark main label,
body.ctc-colour-dark main blockquote {
    color: var(--bs-light);
}

/* Bootstrap text-muted uses !important, so dark mode must override it explicitly. */
body.ctc-colour-dark main .text-muted,
body.ctc-colour-dark main .text-secondary,
body.ctc-colour-dark main .text-body-secondary {
    color: var(--bs-gray-400) !important;
}

body.ctc-colour-dark main a:not(.btn) {
    color: var(--bs-info-bg-subtle);
}

body.ctc-colour-dark main a:not(.btn):hover,
body.ctc-colour-dark main a:not(.btn):focus {
    color: var(--bs-primary-bg-subtle);
}


/* Dark forms */

body.ctc-colour-dark main .form-control,
body.ctc-colour-dark main .form-select,
body.ctc-colour-dark main textarea {
    background-color: var(--bs-gray-900);
    color: var(--bs-white);

    border-color: var(--bs-secondary);
}

body.ctc-colour-dark main .form-control::placeholder,
body.ctc-colour-dark main textarea::placeholder {
    color: var(--bs-gray-400);
}

body.ctc-colour-dark main .form-check-label {
    color: var(--bs-light);
}


/* Dark tables */

body.ctc-colour-dark main .table {
    --bs-table-bg: var(--bs-gray-900);
    --bs-table-color: var(--bs-light);
    --bs-table-border-color: var(--bs-secondary);
}


/* Dark Easy Read */

body.ctc-colour-dark main .ctc-easy-read-item,
body.ctc-colour-dark main .ctc-easy-read-text {
    color: var(--bs-light);
}


/* ==================================================
   BLUE READING MODE
   ================================================== */

body.ctc-colour-blue main {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-dark);
}

body.ctc-colour-blue main section,
body.ctc-colour-blue main .ctc-toggle-bar {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-dark) !important;
}

body.ctc-colour-blue main .card {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-dark) !important;
}

body.ctc-colour-blue main h1,
body.ctc-colour-blue main h2,
body.ctc-colour-blue main h3,
body.ctc-colour-blue main h4,
body.ctc-colour-blue main h5,
body.ctc-colour-blue main h6,
body.ctc-colour-blue main p,
body.ctc-colour-blue main li,
body.ctc-colour-blue main label,
body.ctc-colour-blue main blockquote {
    color: var(--bs-dark);
}

body.ctc-colour-blue main .text-secondary,
body.ctc-colour-blue main .text-body-secondary {
    color: var(--bs-gray-800) !important;
}


/* ==================================================
   GREEN READING MODE
   ================================================== */

body.ctc-colour-green main {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-dark);
}

body.ctc-colour-green main section,
body.ctc-colour-green main .ctc-toggle-bar {
    background-color: var(--bs-success-bg-subtle) !important;
    color: var(--bs-dark) !important;
}

body.ctc-colour-green main .card {
    background-color: var(--bs-success-bg-subtle) !important;
    color: var(--bs-dark) !important;
}

body.ctc-colour-green main h1,
body.ctc-colour-green main h2,
body.ctc-colour-green main h3,
body.ctc-colour-green main h4,
body.ctc-colour-green main h5,
body.ctc-colour-green main h6,
body.ctc-colour-green main p,
body.ctc-colour-green main li,
body.ctc-colour-green main label,
body.ctc-colour-green main blockquote {
    color: var(--bs-dark);
}

body.ctc-colour-green main .text-secondary,
body.ctc-colour-green main .text-body-secondary {
    color: var(--bs-gray-800) !important;
}


/* Keep tertiary sections subtly distinct from the reading-mode page.
   These selectors also override the general section backgrounds above. */
body.ctc-colour-dark main .bg-body-tertiary {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

body.ctc-colour-blue main .bg-body-tertiary {
    background-color: color-mix(in srgb, var(--bs-primary-bg-subtle) 94%, var(--bs-primary)) !important;
    color: var(--bs-dark) !important;
}

body.ctc-colour-green main .bg-body-tertiary {
    background-color: color-mix(in srgb, var(--bs-success-bg-subtle) 94%, var(--bs-success)) !important;
    color: var(--bs-dark) !important;
}


/* Easy Read / Full Detailed: selected text must contrast with reading mode. */
body.ctc-colour-dark .ctc-toggle-label {
    color: color-mix(in srgb, var(--bs-gray-500) 5%, var(--bs-gray-600));
}

body.ctc-colour-dark .ctc-toggle-label.active {
    color: var(--bs-light);
}

body.ctc-colour-blue .ctc-toggle-label,
body.ctc-colour-green .ctc-toggle-label {
    color: var(--bs-gray-700);
}

body.ctc-colour-blue .ctc-toggle-label.active,
body.ctc-colour-green .ctc-toggle-label.active {
    color: var(--bs-dark);
}

body:is(.ctc-colour-dark, .ctc-colour-blue, .ctc-colour-green) .ctc-toggle-label i {
    color: inherit;
}


/* ==================================================
   LINKS IN READING MODES
   ================================================== */

body.ctc-colour-dark main a,
body.ctc-colour-blue main a,
body.ctc-colour-green main a {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}


/* ==================================================
   TEXT TO SPEECH WORDS
   ================================================== */

.tts-word {
    border-radius: 0.15rem;
}

.tts-word-active {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-black);

    outline: 2px solid var(--bs-success);
    outline-offset: 1px;
}


/* Strong spoken-word highlight in reading modes */

body.ctc-colour-dark .tts-word-active,
body.ctc-colour-blue .tts-word-active,
body.ctc-colour-green .tts-word-active {
    background: var(--bs-warning-bg-subtle) !important;
    color: var(--bs-black) !important;

    outline: 3px solid var(--bs-black);
    outline-offset: 2px;
}


/* ==================================================
   MINIMISED PLAYER
   ================================================== */

/*
 * Collapsed state keeps the normal Accessibility header visible:
 *
 * [ universal-access icon  Accessibility                 + ]
 *
 * Only the Read Aloud, Reading colours and Zoom sections are hidden.
 */

.tts-player.tts-minimised {
    width: auto;
    min-width: 205px;
    height: 50px;

    border-radius: 0.75rem;

    overflow: hidden;
}


/* Keep the Accessibility icon and title visible */

.tts-player.tts-minimised .tts-player-header strong {
    display: flex;
    align-items: center;

    gap: 0.55rem;

    white-space: nowrap;
}


/* Hide the content sections only */

.tts-player.tts-minimised .tts-controls,
.tts-player.tts-minimised .tts-colour-controls,
.tts-player.tts-minimised .tts-zoom-controls {
    display: none !important;
}


/* Keep the header looking like the normal Accessibility header */

.tts-player.tts-minimised .tts-player-header {
    width: 100%;
    height: 50px;

    padding: 0.25rem 0.4rem 0.25rem 0.8rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

    background: var(--bs-gray-800);
    color: var(--bs-white);
}


/* Universal-access icon stays visible */

.tts-player.tts-minimised .tts-player-header strong i {
    display: inline-block !important;

    color: var(--bs-white);

    font-size: 1.15rem;
    line-height: 1;
}


/* Accessibility text stays visible */

.tts-player.tts-minimised .tts-header-text {
    display: inline;
}




/* Back-to-top button is only shown while the panel is open */

.tts-player.tts-minimised .tts-top-button {
    display: none !important;
}




.tts-player.tts-minimised .tts-player-header-actions {
    display: flex;
    align-items: center;

    margin-left: auto;
}


/* Plus button on the right */

.tts-player.tts-minimised .tts-icon-button {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    margin: 0;
    padding: 0;

    border: 2px solid rgba(var(--bs-white-rgb), 0.5);
    border-radius: 0.55rem;

    background: transparent;
    color: var(--bs-white);

    font-size: 1.15rem;
}


/* Plus icon */

.tts-player.tts-minimised .tts-icon-button i {
    display: inline-block !important;

    color: var(--bs-white);

    font-size: 1.15rem;
    line-height: 1;
}


/* Orange hover */

.tts-player.tts-minimised .tts-icon-button:hover {
    background: var(--ctc-accent-hover);
    color: var(--bs-white);

    border-color: var(--ctc-accent-hover);
}

.tts-player.tts-minimised .tts-icon-button:hover i {
    color: var(--bs-white);
}


/* Keyboard focus */

.tts-player.tts-minimised .tts-icon-button:focus-visible {
    outline: 3px solid var(--ctc-accent);
    outline-offset: 2px;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 575.98px) {

    .tts-player {
        left: 0.5rem;
        right: auto;
        bottom: 0.5rem;

        width: calc(100% - 1rem);
    }

    /*
     * Keep all three Accessibility button groups consistent on mobile.
     * Read Aloud, Reading colours and Zoom all become a 2-column grid.
     */
    .tts-controls,
    .tts-colour-buttons,
    .tts-zoom-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    /*
     * Match the Zoom buttons to the same mobile height as the
     * Read Aloud and Reading colour buttons.
     */
    .tts-button,
    .tts-colour-button,
    .tts-zoom-button {
        height: 54px;
        min-height: 54px;
        max-height: 54px;
    }

    .tts-button span,
    .tts-colour-button span,
    .tts-zoom-button span {
        font-size: 0.76rem;
    }

    .tts-player-header {
        padding: 0.65rem 0.75rem;
    }
}


/* ==================================================
   VERY SMALL SCREENS
   ================================================== */

@media (max-width: 360px) {

    .tts-controls,
    .tts-colour-buttons,
    .tts-zoom-buttons {
        gap: 0.35rem;
    }

    .tts-controls,
    .tts-colour-controls,
    .tts-zoom-controls {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}


/* ==================================================
   REDUCED MOTION
   ================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .tts-button,
    .tts-colour-button,
    .tts-zoom-button,
    .tts-icon-button {
        transition: none;
    }
}
/* Page Sections images: supports the CTC and default module templates. */
.ctc-feature-section img.ctc-feature-image,
.pagesections-feature-section img.pagesections-feature-image {
  display: block;
  width: 100%;
  height: 560px;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 767.98px) {
  .ctc-feature-section img.ctc-feature-image,
  .pagesections-feature-section img.pagesections-feature-image {
    height: 360px;
  }
}
@media (max-width: 767.98px) {
  .ctc-feature-section img.ctc-feature-image,
  .pagesections-feature-section img.pagesections-feature-image {
    width: 100%;
    height: 240px;
    min-height: 0;
    max-height: none;
    object-fit: cover;
    object-position: center top;
  }
}

.ctc-easy-read-image {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
}

/* ==================================================
   CHANCE TO CHOOSE
   NEWS DETAIL
   ================================================== */


.ctc-news-detail {
    background: var(--bs-body-bg);
}


/* Main article width */

.ctc-news-article {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* ==================================================
   HEADER
   ================================================== */

.ctc-news-header {
    margin-bottom: 2rem;
}


/* Category pill */

.ctc-news-category {
    display: inline-block;

    padding: .3rem .75rem;

    background: var(--bs-warning);
    color: var(--bs-dark);

    border-radius: 50rem;

    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
}


/* Title */

.ctc-news-title {
    max-width: 1050px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: .65rem;

    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.12;
}


/* Summary */

.ctc-news-summary {
    max-width: 1000px;

    margin-left: auto;
    margin-right: auto;

    color: var(--bs-secondary-color);

    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.55;
}


/* ==================================================
   FEATURE IMAGE
   ================================================== */

.ctc-news-feature-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.ctc-news-feature-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 625px;

    object-fit: cover;

    border-radius: 1rem;
}


/* ==================================================
   AUTHOR / DATE
   ================================================== */

.ctc-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;

    padding-top: .25rem;
}


/* Author */

.ctc-news-author {
    display: flex;
    align-items: center;

    gap: 1rem;

    min-width: 0;
}


/* Round author photograph */

.ctc-news-author-photo {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    overflow: hidden;

    border-radius: 50%;
}

.ctc-news-author-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Author text */

.ctc-news-author-details {
    min-width: 0;
}

.ctc-news-author-name {
    color: var(--bs-body-color);

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.ctc-news-author-role {
    margin-top: .1rem;

    color: var(--bs-secondary-color);

    font-size: .95rem;
    line-height: 1.35;
}


/* Date */

.ctc-news-date {
    flex-shrink: 0;

    color: var(--bs-secondary-color);

    font-size: 1rem;
    line-height: 1.4;

    text-align: right;
}


/* Divider */

.ctc-news-divider {
    margin-top: 1.5rem;
    margin-bottom: 1.75rem;

    border-color: var(--bs-border-color);

    opacity: 1;
}


/* ==================================================
   ARTICLE CONTENT
   ================================================== */

.ctc-news-content {
    color: var(--bs-body-color);

    font-size: 1.08rem;
    line-height: 1.8;
}

.ctc-news-content p {
    margin-bottom: 1.5rem;
}

.ctc-news-content h2 {
    margin-top: 2.25rem;
    margin-bottom: .8rem;

    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.25;
}

.ctc-news-content h3 {
    margin-top: 2rem;
    margin-bottom: .75rem;

    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.ctc-news-content img {
    max-width: 100%;
    height: auto;

    border-radius: 1rem;
}


/* ==================================================
   RETURN
   ================================================== */

.ctc-news-return {
    text-align: center;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 767.98px) {

    .ctc-news-header {
        margin-bottom: 1.5rem;
    }

    .ctc-news-feature-image img {
        max-height: none;
    }

    .ctc-news-content {
        font-size: 1rem;
    }

}


@media (max-width: 575.98px) {

    .ctc-news-meta {
        align-items: flex-start;
    }

    .ctc-news-author-photo {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }

    .ctc-news-date {
        font-size: .9rem;
    }

}


/* Article-only styles. The page template still owns the single title and toggle. */
.ctc-nmser-heading,
.ctc-nmser-article{width:100%;max-width:67.5rem;margin-left:auto;margin-right:auto;box-sizing:border-box}
.ctc-nmser-heading{text-align:center;padding:1.5rem 0 1.75rem}
.ctc-nmser-accent{width:4.4rem;height:.28rem;background:var(--ctc-accent);border-radius:1rem;margin:0 auto 1.4rem}
.ctc-nmser-category{display:inline-block;background:var(--bs-warning);color:var(--bs-dark);border-radius:2rem;padding:.18rem .65rem;font-size:.95rem;font-weight:700;line-height:1.4;margin-bottom:1.4rem}
.ctc-nmser-heading #ctcPageTitle{font-size:clamp(2rem,3.1vw,3rem);line-height:1.18;font-weight:800;margin:0 0 1rem}
.ctc-nmser-intro{font-size:clamp(1.1rem,1.5vw,1.375rem);line-height:1.5;color:var(--bs-secondary-color,var(--bs-secondary));margin:0}
.ctc-nmser-hero{margin:0 0 1.8rem}
.ctc-nmser-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1.25rem;box-shadow:0 .15rem .35rem rgba(var(--bs-black-rgb), .1)}
.ctc-nmser-byline{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding:0 0 1.8rem;margin-bottom:1.8rem;border-bottom:1px solid var(--bs-border-color)}
.ctc-nmser-author{display:flex;align-items:center;gap:1.1rem}
.ctc-nmser-avatar{display:block;width:3.25rem;height:3.25rem;border-radius:50%;object-fit:cover;flex:none}
.ctc-nmser-author-name{font-size:1.2rem;line-height:1.4;font-weight:700;margin:0 0 .1rem}
.ctc-nmser-author-role{font-size:1rem;line-height:1.5;color:var(--bs-secondary-color,var(--bs-secondary));margin:0}
.ctc-nmser-date{font-size:1.1rem;line-height:1.5;color:var(--bs-secondary-color,var(--bs-secondary));margin:0;text-align:right}
.ctc-nmser-body{font-size:1.25rem;line-height:1.85;overflow-wrap:break-word}
.ctc-nmser-body p{margin:0 0 1.6rem}
.ctc-nmser-body h2{font-size:2rem;line-height:1.25;font-weight:750;margin:2.5rem 0 1rem}
.ctc-nmser-body h3{font-size:1.6rem;line-height:1.3;font-weight:700;margin:2rem 0 1rem}
.ctc-nmser-body img,.ctc-nmser-body video{max-width:100%;height:auto}
@media(max-width:575.98px){
  .ctc-nmser-heading{padding-top:1.5rem}
  .ctc-nmser-byline{align-items:flex-start;flex-direction:column;gap:1rem}
  .ctc-nmser-date{text-align:left}
  .ctc-nmser-hero img{border-radius:1rem}
  .ctc-nmser-body{font-size:1.1rem;line-height:1.8}
  .ctc-nmser-body h2{font-size:1.7rem}
}
.ctc-easy-read-divider {
  border: 0;
  border-top: 1px solid var(--bs-border-color);
  opacity: 0.1;
  margin: 0 0 3rem;
}

/* Limit the image card on all screen sizes. */
.ctc-easy-read .ctc-easy-read-item > .col-md-4 {
  min-width: 0;
  max-width: 560px;
}

/* Make the actual image shrink with its container. */
.ctc-easy-read .ctc-easy-read-image {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

/* Stacked layout below 1400px. */
@media (max-width: 991.98px) {
  .ctc-easy-read .ctc-easy-read-item {
    margin-left: 0;
    margin-right: 0;
  }

  .ctc-easy-read .ctc-easy-read-item > .col-md-4 {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 560px !important;
    margin-inline: auto !important;
  }

  .ctc-easy-read .ctc-easy-read-item > .col-md-8 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}



/* Gallery styles copied from the supplied original HTML and scoped to GMS. */
.ctc-gms .gallery-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.ctc-gms .gallery-card:hover {
    transform: translateY(-5px);
}

.ctc-gms .gallery-button {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
}

.ctc-gms .gallery-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform .3s ease;
}

.ctc-gms .gallery-card:hover .gallery-image {
    transform: scale(1.04);
}

.ctc-gms-modal .gallery-modal-image {
    max-height: 68vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Previous / next navigation inside gallery image modals */
.ctc-gms-modal .gallery-modal-nav {
    position: absolute;
    top: 50%;
    z-index: 1080;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(var(--bs-black-rgb), .55);
    color: var(--bs-white);
    font-size: 2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.ctc-gms-modal .gallery-modal-nav:hover,
.ctc-gms-modal .gallery-modal-nav:focus {
    background: var(--ctc-accent-hover);
    color: var(--bs-white);
    outline: none;
}

.ctc-gms-modal .gallery-modal-prev {
    left: 1rem;
}

.ctc-gms-modal .gallery-modal-next {
    right: 1rem;
}

@media (max-width: 575.98px) {
    .ctc-gms-modal .gallery-modal-nav {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.6rem;
    }

    .ctc-gms-modal .gallery-modal-prev {
        left: .4rem;
    }

    .ctc-gms-modal .gallery-modal-next {
        right: .4rem;
    }
}

.ctc-gms .gallery-button {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ctc-gms .gallery-image {
    display: block;
    aspect-ratio: auto;
}

.ctc-gms [hidden],
.ctc-gms-modal [hidden] {
    display: none !important;
}

.ctc-gms-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
}

.ctc-gms-filters .active {
    background: var(--ctc-accent);
    border-color: var(--ctc-accent);
    color: var(--bs-dark);
}

.ctc-gms-description,
.ctc-gms-category-description {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ctc-gms-modal .ctc-gms-image-stage {
    display: grid;
    place-items: center;
    min-height: 100px;
}

.ctc-gms-modal .gallery-modal-image {
    grid-area: 1/1;
    display: block;
}

.ctc-gms-modal .gallery-modal-nav:focus-visible,
.ctc-gms .gallery-button:focus-visible {
    outline: 3px solid var(--ctc-accent);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .ctc-gms .gallery-image {
        height: 230px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ctc-gms .gallery-card,
    .ctc-gms .gallery-image {
        transition: none;
    }
}

/* Centre complete rows and the remaining cards in the final row. */
.ctc-gms > .container > .row {
    justify-content: center;
}

/* Both dissolve layers fill one fixed frame; they never enter normal flow. */
.ctc-gms-modal .ctc-gms-image-stage {
    position: relative;
    display: block;
    height: 1px;
    min-height: 0;
    overflow: hidden;
}

.ctc-gms-modal .ctc-gms-image-stage > .gallery-modal-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: var(--bs-dark);
}

/* Compact normal viewer, sized to the current photograph by the script. */
.ctc-gms-modal .modal-header {
    padding: .6rem 1rem;
    min-height: 0;
    flex-shrink: 0;
}

.ctc-gms-modal .modal-body > .p-4 {
    padding: .8rem 1rem !important;
}

.ctc-gms-modal [data-ctc-title] {
    margin-bottom: .5rem !important;
}

.ctc-gms-modal [data-ctc-gallery-name] {
    margin-bottom: .5rem !important;
}

.ctc-gms-modal .ctc-gms-gallery-badge {
    background: var(--bs-warning);
    color: var(--bs-dark);
    font-size: .95rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ctc-gms-modal .ctc-gms-fullscreen {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    padding: .45rem .9rem;
    border: 1px solid var(--ctc-accent);
    border-radius: 999px;
    background: var(--ctc-accent);
    color: var(--bs-dark);
    font: 600 .95rem/1.2 system-ui, sans-serif;
    box-shadow: 0 2px 6px rgba(var(--bs-black-rgb), .2);
    cursor: pointer;
    transition: background-color .15s ease;
}

.ctc-gms-modal .ctc-gms-fullscreen:hover {
    background: var(--ctc-accent-hover);
    border-color: var(--ctc-accent-hover);
}

.ctc-gms-modal .ctc-gms-fullscreen svg {
    display: block;
    flex: none;
}

.ctc-gms-modal .ctc-gms-fullscreen:focus-visible {
    outline: 3px solid var(--bs-white);
    outline-offset: 3px;
}

/* Full screen uses the entire viewport; controls and captions overlay it. */
.ctc-gms-modal.ctc-gms-is-full {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--bs-dark);
}

.ctc-gms-modal.ctc-gms-is-full .modal-dialog {
    width: 100%;
    max-width: none !important;
    height: 100%;
    min-height: 0;
    margin: 0 !important;
    transform: none !important;
}

.ctc-gms-modal.ctc-gms-is-full .modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    border: 0;
}

.ctc-gms-modal.ctc-gms-is-full .modal-body {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 !important;
}

.ctc-gms-modal.ctc-gms-is-full .ctc-gms-image-stage {
    width: 100%;
    height: 100% !important;
    min-height: 0;
}

.ctc-gms-modal.ctc-gms-is-full .modal-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1090;
    border: 0;
    background: linear-gradient(rgba(var(--bs-black-rgb), .6), transparent);
    padding: .75rem 1rem;
}

.ctc-gms-modal.ctc-gms-is-full .modal-body > .p-4 {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    background: linear-gradient(transparent, rgba(var(--bs-black-rgb), .8));
    padding: 1.5rem 4.5rem .75rem !important;
    max-height: 32%;
    overflow: auto;
    text-shadow: 0 1px 3px var(--bs-black);
}

.ctc-gms-modal.ctc-gms-is-full .ctc-gms-gallery-badge {
    text-shadow: none;
}

.ctc-gms-modal.ctc-gms-is-full .gallery-modal-nav {
    z-index: 1091;
}

@media (max-width: 575.98px) {
    .ctc-gms-modal.ctc-gms-is-full .modal-body > .p-4 {
        padding: 1rem 3rem .5rem !important;
    }

    .ctc-gms-modal.ctc-gms-is-full [data-ctc-title] {
        font-size: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ctc-gms-modal .ctc-gms-fullscreen {
        transition: none;
    }
}

/* Override Bootstrap and site dialog limits in fullscreen. */
.ctc-gms-modal.ctc-gms-is-full,
.ctc-gms-modal:fullscreen {
    box-sizing: border-box !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.ctc-gms-modal.ctc-gms-is-full .modal-dialog {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.ctc-gms-modal.ctc-gms-is-full .modal-content {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ctc-gms-modal.ctc-gms-is-full .modal-body {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
}

.ctc-gms-modal.ctc-gms-is-full .ctc-gms-image-stage {
    height: 100% !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ctc-gms-modal.ctc-gms-is-full .gallery-modal-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}


/* CHANCE TO CHOOSE — button repairs and form styling
   Included in this complete stylesheet; no separate patch is required.
   Ideally load Bootstrap BEFORE the custom stylesheet in the page template.
   .ctc-membership-form matches the existing registration form.
   Add .ctc-styled-form to other form wrappers to reuse this design. */

/* Specificity and Bootstrap variables both protect the custom button theme. */
.btn.btn-ctc,
.btn.btn-ctc-search,
.ctc-membership-form .btn.ctc-send-button {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: var(--ctc-accent);
  --bs-btn-border-color: var(--ctc-accent);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--ctc-accent-hover);
  --bs-btn-hover-border-color: var(--ctc-accent-hover);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: var(--ctc-accent-active);
  --bs-btn-active-border-color: var(--ctc-accent-active);
  --bs-btn-disabled-color: var(--bs-dark);
  --bs-btn-disabled-bg: var(--ctc-accent);
  --bs-btn-disabled-border-color: var(--ctc-accent);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ctc-accent) 25%, transparent);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  font-weight: 700;
  min-height: 44px;
  padding: .65rem 1.25rem;
  text-decoration: none;
}
.btn.btn-ctc:hover,
.btn.btn-ctc-search:hover,
.ctc-membership-form .btn.ctc-send-button:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}
.btn.btn-ctc:active,
.btn.btn-ctc-search:active,
.ctc-membership-form .btn.ctc-send-button:active {
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  color: var(--bs-btn-active-color);
}
.btn.btn-ctc:focus-visible,
.btn.btn-ctc-search:focus-visible,
.ctc-membership-form .btn.ctc-send-button:focus-visible {
  outline: 3px solid var(--bs-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--bs-white);
}
/* Override the earlier module rule on the submit button. */
.ctc-membership-form .btn.ctc-send-button:focus:not(:hover):not(:active) {
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}
.footer-section a.btn.btn-ctc { color: var(--bs-dark); }
.footer-section a.btn.btn-outline-light { color: var(--bs-white); }
.footer-section a.btn.btn-outline-light:hover,
.footer-section a.btn.btn-outline-light:focus-visible {
  background-color: var(--bs-white);
  border-color: var(--bs-white);
  color: var(--bs-dark);
}
.footer-section a.btn:focus-visible {
  outline: 3px solid var(--bs-white);
  outline-offset: 4px;
}

/* Form theme is scoped so search and accessibility controls keep their layout. */
:is(.ctc-membership-form, .ctc-styled-form) {
  --ctc-form-surface: var(--bs-body-bg);
  --ctc-form-soft: var(--bs-tertiary-bg);
  --ctc-form-ink: var(--bs-body-color);
  --ctc-form-muted: var(--bs-secondary-color);
  --ctc-form-border: var(--bs-secondary);
  --ctc-form-accent: var(--bs-dark);
  max-width: 960px;
  margin-inline: auto;
  color: var(--ctc-form-ink);
  font-size: 1.0625rem;
  line-height: 1.65;
}
:is(.ctc-membership-form, .ctc-styled-form) section {
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid var(--bs-border-color);
  border-top: 4px solid var(--ctc-form-accent);
  border-radius: 1rem;
  background-color: var(--ctc-form-surface);
  box-shadow: 0 5px 20px rgba(var(--bs-dark-rgb), .05);
}
:is(.ctc-membership-form, .ctc-styled-form) h2 {
  font-weight: 750;
  line-height: 1.25;
}
:is(.ctc-membership-form, .ctc-styled-form) h3 {
  margin-bottom: 1.4rem;
  color: var(--ctc-form-accent);
  font-weight: 700;
  line-height: 1.35;
}
:is(.ctc-membership-form, .ctc-styled-form) .row { --bs-gutter-y: 1.35rem; }
:is(.ctc-membership-form, .ctc-styled-form) .form-label {
  display: block;
  margin-bottom: .5rem;
  color: var(--ctc-form-ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.5;
}
:is(.ctc-membership-form, .ctc-styled-form) :is(.form-control, .form-select) {
  min-height: 50px;
  max-width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--ctc-form-border);
  border-radius: .65rem;
  background-color: var(--ctc-form-surface);
  color: var(--ctc-form-ink);
  font-size: 1rem;
  line-height: 1.5;
}
:is(.ctc-membership-form, .ctc-styled-form) .form-select { padding-right: 2.75rem; }
:is(.ctc-membership-form, .ctc-styled-form) textarea.form-control {
  min-height: 120px;
  resize: vertical;
}
:is(.ctc-membership-form, .ctc-styled-form) .form-control::placeholder {
  color: var(--ctc-form-muted);
  opacity: 1;
}
:is(.ctc-membership-form, .ctc-styled-form) :is(.form-control, .form-select):focus {
  border-color: var(--ctc-form-accent);
  outline: 2px solid var(--ctc-form-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(var(--bs-dark-rgb), .12);
}
:is(.ctc-membership-form, .ctc-styled-form) input[type="file"]::file-selector-button {
  margin: -.75rem 1rem -.75rem -1rem;
  padding: .75rem 1rem;
  background-color: var(--ctc-form-soft);
  color: var(--ctc-form-ink);
  font-weight: 600;
}
:is(.ctc-membership-form, .ctc-styled-form) .form-check {
  min-height: 48px;
  padding: .75rem 1rem .75rem 3.1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .65rem;
  background-color: var(--ctc-form-soft);
}
:is(.ctc-membership-form, .ctc-styled-form) .form-check-input {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: .2rem;
  margin-left: -2.1rem;
  border: 2px solid var(--ctc-form-border);
  cursor: pointer;
}
:is(.ctc-membership-form, .ctc-styled-form) .form-check-input:checked {
  background-color: var(--ctc-form-accent);
  border-color: var(--ctc-form-accent);
}
:is(.ctc-membership-form, .ctc-styled-form) .form-check-input:focus-visible {
  outline: 2px solid var(--ctc-form-accent);
  outline-offset: 3px;
}
:is(.ctc-membership-form, .ctc-styled-form) .form-check-label { cursor: pointer; }
:is(.ctc-membership-form, .ctc-styled-form) legend {
  float: none;
  margin-bottom: 1rem;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.5;
}
:is(.ctc-membership-form, .ctc-styled-form) .invalid-feedback { font-weight: 600; }
:is(.ctc-membership-form, .ctc-styled-form) :is(.form-control, .form-select)[aria-invalid="true"],
:is(.ctc-membership-form, .ctc-styled-form) :is(.form-control, .form-select).is-invalid,
:is(.ctc-membership-form, .ctc-styled-form) .was-validated :is(.form-control, .form-select):invalid {
  border-color: var(--bs-danger);
}
:is(.ctc-membership-form, .ctc-styled-form) :is(.form-control, .form-select):disabled {
  background-color: var(--ctc-form-soft);
  opacity: .7;
  cursor: not-allowed;
}
.ctc-membership-form .btn.ctc-send-button {
  min-height: 52px;
  border-radius: 999px;
  padding: .85rem 1.65rem;
  font-size: 1.0625rem;
}
body.ctc-colour-dark :is(.ctc-membership-form, .ctc-styled-form) {
  --ctc-form-surface: var(--bs-gray-900);
  --ctc-form-soft: var(--bs-gray-800);
  --ctc-form-ink: var(--bs-gray-100);
  --ctc-form-muted: var(--bs-gray-400);
  --ctc-form-border: var(--bs-gray-500);
  --ctc-form-accent: var(--bs-light);
}
body.ctc-colour-dark :is(.ctc-membership-form, .ctc-styled-form) .form-select { color-scheme: dark; }
@media (max-width: 575.98px) {
  .ctc-membership-form .btn.ctc-send-button { width: 100%; }
}

/* Bootstrap-coloured hamburger: CSS backgrounds inherit palette variables. */
.navbar-ctc .navbar-toggler-icon,
.ctc-mobile-toggle .navbar-toggler-icon {
  background-image: linear-gradient(var(--bs-white), var(--bs-white)),
    linear-gradient(var(--bs-white), var(--bs-white)),
    linear-gradient(var(--bs-white), var(--bs-white)) !important;
  background-size: 80% 2px;
  background-position: center 25%, center 50%, center 75%;
  background-repeat: no-repeat;
}


/* ==================================================
   CONTACT FORM
   Match the visual style of the Attendance membership form.
   This targets normal forms inside <main>, while leaving the
   header search form and Attendance membership form alone.
   ================================================== */

main form:not(.ctc-membership-form):not(:has(.search-input)) {
  --ctc-form-surface: var(--bs-body-bg);
  --ctc-form-soft: var(--bs-tertiary-bg);
  --ctc-form-ink: var(--bs-body-color);
  --ctc-form-muted: var(--bs-secondary-color);
  --ctc-form-border: var(--bs-secondary);
  --ctc-form-accent: var(--bs-dark);

  width: 100%;
  max-width: 960px;
  margin: 1.5rem auto 2rem;
  padding: clamp(1.1rem, 3vw, 2rem);

  color: var(--ctc-form-ink);
  background-color: var(--ctc-form-surface);
  border: 1px solid var(--bs-border-color);
  border-top: 4px solid var(--ctc-form-accent);
  border-radius: 1rem;
  box-shadow: 0 5px 20px rgba(var(--bs-dark-rgb), .05);

  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Space each SmartForms field clearly. */
main form:not(.ctc-membership-form):not(:has(.search-input)) > div,
main form:not(.ctc-membership-form):not(:has(.search-input)) > p {
  margin-bottom: 1.25rem;
}

main form:not(.ctc-membership-form):not(:has(.search-input)) label {
  display: block;
  margin-bottom: .5rem;
  color: var(--ctc-form-ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.5;
}

/* Text, email, telephone, date, number and message fields. */
main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  input[type="url"],
  input[type="password"],
  select,
  textarea
) {
  display: block;
  width: 100%;
  min-height: 50px;
  max-width: 100%;
  padding: .75rem 1rem;

  color: var(--ctc-form-ink);
  background-color: var(--ctc-form-surface);
  border: 1px solid var(--ctc-form-border);
  border-radius: .65rem;

  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

main form:not(.ctc-membership-form):not(:has(.search-input)) textarea {
  min-height: 150px;
  resize: vertical;
}

main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  input[type="url"],
  input[type="password"],
  select,
  textarea
):focus {
  border-color: var(--ctc-form-accent);
  outline: 2px solid var(--ctc-form-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(var(--bs-dark-rgb), .12);
}

main form:not(.ctc-membership-form):not(:has(.search-input)) textarea::placeholder,
main form:not(.ctc-membership-form):not(:has(.search-input)) input::placeholder {
  color: var(--ctc-form-muted);
  opacity: 1;
}

/* Submit button — same orange pill treatment as the membership form. */
main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
  button[type="submit"],
  input[type="submit"]
) {
  min-height: 52px;
  padding: .85rem 1.65rem;
  border: 1px solid var(--ctc-accent);
  border-radius: 999px;

  color: var(--bs-dark);
  background-color: var(--ctc-accent);

  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
  button[type="submit"],
  input[type="submit"]
):hover {
  background-color: var(--ctc-accent-hover);
  border-color: var(--ctc-accent-hover);
}

main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
  button[type="submit"],
  input[type="submit"]
):active {
  background-color: var(--ctc-accent-active);
  border-color: var(--ctc-accent-active);
}

/* Reset button — quieter secondary action. */
main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
  button[type="reset"],
  input[type="reset"]
) {
  min-height: 52px;
  margin-left: .5rem;
  padding: .85rem 1.65rem;
  border: 1px solid var(--bs-dark);
  border-radius: 999px;

  color: var(--bs-dark);
  background-color: transparent;

  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}

main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
  button[type="reset"],
  input[type="reset"]
):hover {
  color: var(--bs-white);
  background-color: var(--bs-dark);
}

/* Strong visible keyboard focus on both buttons. */
main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
  button,
  input[type="submit"],
  input[type="reset"]
):focus-visible {
  outline: 3px solid var(--bs-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--bs-white);
}

/* Dark reading-colour mode. */
body.ctc-colour-dark main form:not(.ctc-membership-form):not(:has(.search-input)) {
  --ctc-form-surface: var(--bs-gray-900);
  --ctc-form-soft: var(--bs-gray-800);
  --ctc-form-ink: var(--bs-gray-100);
  --ctc-form-muted: var(--bs-gray-400);
  --ctc-form-border: var(--bs-gray-500);
  --ctc-form-accent: var(--bs-light);
}

body.ctc-colour-dark main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
  button[type="reset"],
  input[type="reset"]
) {
  color: var(--bs-light);
  border-color: var(--bs-light);
}

body.ctc-colour-dark main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
  button[type="reset"],
  input[type="reset"]
):hover {
  color: var(--bs-dark);
  background-color: var(--bs-light);
}

@media (max-width: 575.98px) {
  main form:not(.ctc-membership-form):not(:has(.search-input)) {
    margin-top: 1rem;
    padding: 1rem;
  }

  main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
    button[type="submit"],
    input[type="submit"],
    button[type="reset"],
    input[type="reset"]
  ) {
    display: block;
    width: 100%;
    margin-left: 0;
  }

  main form:not(.ctc-membership-form):not(:has(.search-input)) :is(
    button[type="reset"],
    input[type="reset"]
  ) {
    margin-top: .75rem;
  }
}

/* Additional accessibility controls */
.tts-player:not(.tts-minimised) {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.tts-player-header { position: sticky; top: 0; z-index: 2; }
.tts-extra-controls {
    padding: 0.6rem;
    border-top: 1px solid var(--bs-gray-500, #adb5bd);
    background: var(--bs-white, #fff);
    color: var(--bs-dark, #212529);
}
.tts-extra-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.tts-extra-buttons-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tts-extra-controls .tts-zoom-button { white-space: normal; line-height: 1.2; }
.tts-option-note { margin: 0.5rem 0 0; font-size: 0.8rem; line-height: 1.45; }
.tts-player.tts-minimised .tts-extra-controls { display: none !important; }
.tts-extra-controls button:disabled { opacity: 0.55; cursor: not-allowed; }
/* Use the locally hosted OpenDyslexic font only in dyslexia mode. */
html.ctc-dyslexia-friendly body :is(main, header, nav, footer, .footer-section),
html.ctc-dyslexia-friendly body :is(main, header, nav, footer, .footer-section) :not(i):not(svg):not(path):not([class*="fa-"]) {
    font-family: 'OpenDyslexic', Arial, Verdana, sans-serif !important;
    letter-spacing: 0.06em;
    word-spacing: 0.12em;
    line-height: 1.65;
}
/* Keep image layout and image links intact while removing visual pictures. */
html.ctc-hide-pictures body img,
html.ctc-hide-pictures body picture { opacity: 0 !important; }
html.ctc-hide-pictures body :is(main, header, footer, .footer-section),
html.ctc-hide-pictures body :is(main, header, footer, .footer-section) * {
    background-image: none !important;
}
#ctcReadingAid {
    position: fixed; inset: 0; pointer-events: none;
    z-index: 1070; overflow: hidden;
}
#ctcReadingAid[hidden] { display: none !important; }
#ctcReadingAid .ctc-reading-band {
    position: absolute; left: 0; right: 0;
    top: var(--ctc-reading-y, 50vh); transform: translateY(-50%);
}
#ctcReadingAid[data-mode="mask"] .ctc-reading-band {
    height: 120px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.65);
}
/* Reading ruler: black bar, yellow outline and a pointer that follows the mouse. */
#ctcReadingAid[data-mode="guide"] .ctc-reading-band {
    box-sizing: border-box;
    left: 12px; right: 12px;
    height: 24px;
    background: #000;
    border: 6px solid #ffff00;
    border-radius: 12px;
}
#ctcReadingAid[data-mode="guide"] .ctc-reading-band::before,
#ctcReadingAid[data-mode="guide"] .ctc-reading-band::after {
    content: "";
    position: absolute;
    /* Convert viewport X into the bar's inner coordinates and keep the
       triangle inside its rounded ends. */
    left: clamp(34px, calc(var(--ctc-reading-x, 50vw) - 18px), calc(100% - 34px));
    transform: translateX(-50%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    pointer-events: none;
}
#ctcReadingAid[data-mode="guide"] .ctc-reading-band::before {
    top: -34px; width: 68px; height: 36px;
    background: #ffff00;
}
#ctcReadingAid[data-mode="guide"] .ctc-reading-band::after {
    top: -28px; width: 56px; height: 30px;
    background: #000;
}
html.ctc-zoom-large #ctcReadingAid { zoom: 0.6666667; }
html.ctc-zoom-massive #ctcReadingAid { zoom: 0.4; }
@media (max-width: 575.98px) {
    .tts-player:not(.tts-minimised) { max-height: calc(100dvh - 1rem); }
    .tts-extra-buttons-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tts-extra-buttons-three > :last-child { grid-column: 1 / -1; }
}
@media print {
    #ctcReadingAid, #ttsPlayer { display: none !important; }
}

/* ==================================================
   CAROUSEL - READING COLOUR BACKGROUNDS
   ==================================================

   Keep the area behind and around the home carousel
   consistent with the selected accessibility reading colour.

   The extra html selectors are intentional so this also works
   if a saved colour class is applied very early during page load.
   ================================================== */


/* --------------------------------------------------
   DARK
   -------------------------------------------------- */

html.ctc-colour-dark #home,
body.ctc-colour-dark #home,
html.ctc-colour-dark #home > .container,
body.ctc-colour-dark #home > .container,
html.ctc-colour-dark #mainCarousel,
body.ctc-colour-dark #mainCarousel,
html.ctc-colour-dark #mainCarousel .carousel-inner,
body.ctc-colour-dark #mainCarousel .carousel-inner,
html.ctc-colour-dark #mainCarousel .carousel-item,
body.ctc-colour-dark #mainCarousel .carousel-item {
    background-color: var(--bs-dark) !important;
}


/* --------------------------------------------------
   BLUE
   -------------------------------------------------- */

html.ctc-colour-blue #home,
body.ctc-colour-blue #home,
html.ctc-colour-blue #home > .container,
body.ctc-colour-blue #home > .container,
html.ctc-colour-blue #mainCarousel,
body.ctc-colour-blue #mainCarousel,
html.ctc-colour-blue #mainCarousel .carousel-inner,
body.ctc-colour-blue #mainCarousel .carousel-inner,
html.ctc-colour-blue #mainCarousel .carousel-item,
body.ctc-colour-blue #mainCarousel .carousel-item {
    background-color: var(--bs-primary-bg-subtle) !important;
}


/* --------------------------------------------------
   GREEN
   -------------------------------------------------- */

html.ctc-colour-green #home,
body.ctc-colour-green #home,
html.ctc-colour-green #home > .container,
body.ctc-colour-green #home > .container,
html.ctc-colour-green #mainCarousel,
body.ctc-colour-green #mainCarousel,
html.ctc-colour-green #mainCarousel .carousel-inner,
body.ctc-colour-green #mainCarousel .carousel-inner,
html.ctc-colour-green #mainCarousel .carousel-item,
body.ctc-colour-green #mainCarousel .carousel-item {
    background-color: var(--bs-success-bg-subtle) !important;
}


/* ==================================================
   iPHONE / iPAD - KEEP CONTENT PICTURES INSIDE SCREEN
   ==================================================

   Accessibility text enlargement must not make photographs
   overflow the iPhone viewport.

   Large content pictures use the available width and preserve
   their natural aspect ratio. Small fixed-size pictures such as
   avatars/profile photos keep their existing design.
   ================================================== */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 767.98px) {

        /*
         * Safety net for every normal image inside <main>.
         * This prevents horizontal overflow without changing
         * deliberately fixed-height avatar/profile pictures.
         */
        main img {
            max-width: 100% !important;
            box-sizing: border-box;
        }

        main picture,
        main figure,
        main .row,
        main [class*="col-"] {
            min-width: 0;
            max-width: 100%;
        }

        /*
         * Home carousel:
         * show the complete photograph rather than cropping it.
         */
        #mainCarousel,
        #mainCarousel .carousel-inner,
        #mainCarousel .carousel-item {
            width: 100% !important;
            max-width: 100% !important;
            overflow: hidden;
        }

        #mainCarousel .carousel-item img {
            display: block;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: none !important;
            object-fit: contain !important;
            object-position: center !important;
        }

        /*
         * Page Sections / feature pictures:
         * natural height on iPhone so the full picture is visible.
         */
        .ctc-feature-section img.ctc-feature-image,
        .pagesections-feature-section img.pagesections-feature-image {
            display: block;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            object-fit: contain !important;
            object-position: center !important;
        }

        /*
         * Easy Read pictures.
         */
        .ctc-easy-read .ctc-easy-read-image,
        .ctc-easy-read-image {
            display: block;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            object-fit: contain !important;
            object-position: center !important;
        }

        .ctc-easy-read .ctc-easy-read-item > .col-md-4 {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }

        /*
         * Gallery thumbnail/card pictures.
         * Keep them within the card and viewport.
         */
        .ctc-gms .gallery-button,
        .ctc-gms .gallery-card {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow: hidden;
        }

        .ctc-gms .gallery-image {
            display: block;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: none !important;
            object-fit: contain !important;
        }

        /*
         * Gallery slideshow/modal image.
         */
        .ctc-gms-modal .gallery-modal-image {
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 75dvh !important;
            object-fit: contain !important;
        }

        /*
         * News/blog hero pictures and normal article media.
         */
        .blog-feature-image,
        .ctc-nmser-hero img,
        .ctc-nmser-body img,
        article img:not(.blog-author-photo):not(.ctc-nmser-avatar) {
            display: block;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: none !important;
            object-fit: contain !important;
        }

        /*
         * Prevent Bootstrap rows/containers from creating a tiny amount
         * of horizontal overflow when text is enlarged to 250%.
         */
        main,
        main section,
        main .container,
        main .container-fluid {
            max-width: 100%;
            overflow-wrap: anywhere;
        }
    }
}


/* ==================================================
   iPHONE / iPAD - KEEP ACCESSIBILITY BOX SMALL
   ==================================================

   The page may use 150% / 250% text enlargement, but the floating
   Accessibility controls must remain at their normal mobile size.

   Safari text autosizing is disabled inside #ttsPlayer and the
   collapsed panel uses fixed pixel dimensions on iPhone.
   ================================================== */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 767.98px) {

        #ttsPlayer,
        #ttsPlayer * {
            -webkit-text-size-adjust: none !important;
            text-size-adjust: none !important;
        }

        #ttsPlayer {
            zoom: 1 !important;
            transform: none !important;

            left: 8px !important;
            right: auto !important;
            bottom: 8px !important;

            font-size: 16px !important;
            line-height: 1.2 !important;

            max-width: calc(100vw - 16px) !important;
        }

        /*
         * Collapsed Accessibility bar:
         * keep it small even when the page text is Massive.
         */
        #ttsPlayer.tts-minimised {
            width: auto !important;
            min-width: 205px !important;
            max-width: calc(100vw - 16px) !important;

            height: 50px !important;
            min-height: 50px !important;
            max-height: 50px !important;

            border-radius: 12px !important;
        }

        #ttsPlayer.tts-minimised .tts-player-header {
            width: 100% !important;
            height: 50px !important;
            min-height: 50px !important;

            padding: 4px 6px 4px 12px !important;
            gap: 12px !important;
        }

        #ttsPlayer.tts-minimised .tts-player-header strong {
            gap: 8px !important;

            font-size: 16px !important;
            line-height: 1 !important;

            white-space: nowrap !important;
        }

        #ttsPlayer.tts-minimised .tts-player-header strong i,
        #ttsPlayer.tts-minimised .tts-header-text {
            font-size: 16px !important;
            line-height: 1 !important;
        }

        #ttsPlayer.tts-minimised .tts-icon-button {
            width: 42px !important;
            height: 42px !important;

            min-width: 42px !important;
            min-height: 42px !important;

            flex: 0 0 42px !important;

            margin: 0 !important;
            padding: 0 !important;

            font-size: 18px !important;
        }

        #ttsPlayer.tts-minimised .tts-icon-button i {
            font-size: 18px !important;
            line-height: 1 !important;
        }

        /*
         * Open panel:
         * still responsive, but its type and controls stay normal-sized.
         */
        #ttsPlayer:not(.tts-minimised) {
            width: calc(100vw - 16px) !important;
            max-width: 390px !important;

            max-height: calc(100dvh - 16px) !important;

            font-size: 16px !important;
        }

        #ttsPlayer:not(.tts-minimised) .tts-player-header strong {
            font-size: 18px !important;
        }

        #ttsPlayer:not(.tts-minimised) .tts-button,
        #ttsPlayer:not(.tts-minimised) .tts-colour-button,
        #ttsPlayer:not(.tts-minimised) .tts-zoom-button {
            font-size: 14px !important;
        }

        #ttsPlayer:not(.tts-minimised) .tts-button span,
        #ttsPlayer:not(.tts-minimised) .tts-colour-button span,
        #ttsPlayer:not(.tts-minimised) .tts-zoom-button span {
            font-size: 12px !important;
        }

        #ttsPlayer:not(.tts-minimised) .tts-option-note {
            font-size: 13px !important;
        }
    }
}


/* ==================================================
   MOBILE - COLLAPSED ACCESSIBILITY ICON ONLY
   ==================================================

   Desktop remains:
   [ universal-access icon | Accessibility | + ]

   Mobile collapsed state shows ONLY the EXISTING
   universal-access icon. The icon itself is not changed.

   The existing #ttsMinimise button remains as an invisible
   50px tap target over the icon, so accessibility semantics
   and the existing JavaScript continue to work.
   ================================================== */

@media (max-width: 767.98px) {

    #ttsPlayer.tts-minimised {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        overflow: hidden !important;
        border-radius: 12px !important;
    }

    #ttsPlayer.tts-minimised .tts-player-header {
        position: relative !important;

        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        padding: 0 !important;
        gap: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /*
     * Keep the existing universal-access icon exactly as it is.
     */
    #ttsPlayer.tts-minimised .tts-player-header strong {
        width: 50px !important;
        height: 50px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        pointer-events: none !important;
    }

    #ttsPlayer.tts-minimised .tts-player-header strong i {
        display: inline-block !important;
        margin: 0 !important;
    }

    /*
     * Hide the word "Accessibility" only while collapsed on mobile.
     */
    #ttsPlayer.tts-minimised .tts-header-text {
        display: none !important;
    }

    /*
     * Keep the real existing + button active, but make it invisible
     * and stretch it across the 50px icon control.
     */
    #ttsPlayer.tts-minimised #ttsMinimise {
        position: absolute !important;
        inset: 0 !important;

        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;

        z-index: 5 !important;
    }

    /*
     * Hide the + graphic only.
     * The universal-access icon remains unchanged and visible.
     */
    #ttsPlayer.tts-minimised #ttsMinimise i {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    #ttsPlayer.tts-minimised #ttsMinimise:hover,
    #ttsPlayer.tts-minimised #ttsMinimise:active {
        background: transparent !important;
        border-color: transparent !important;
    }

    /*
     * Visible keyboard focus around the complete icon control.
     */
    #ttsPlayer.tts-minimised #ttsMinimise:focus-visible {
        outline: 3px solid var(--ctc-accent) !important;
        outline-offset: -3px !important;
        border-radius: 10px !important;
    }

    /*
     * When opened, restore the normal Accessibility header and button.
     */
    #ttsPlayer:not(.tts-minimised) #ttsMinimise {
        position: static !important;
        inset: auto !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        opacity: 1 !important;
    }

    #ttsPlayer:not(.tts-minimised) #ttsMinimise i {
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* ==================================================
   COLLAPSED ACCESSIBILITY - REMOVE EXTRA OUTER OUTLINE
   ==================================================

   The normal .tts-player border creates a second rounded line around
   the collapsed Accessibility bar. Remove that border only while the
   player is minimised. The + button keeps its own visible border.
   ================================================== */

#ttsPlayer.tts-minimised {
    border: 0 !important;
    outline: 0 !important;
}

/* Keep only a soft shadow around the collapsed control. */
#ttsPlayer.tts-minimised {
    box-shadow: 0 0.35rem 0.9rem rgba(var(--bs-black-rgb), 0.18) !important;
}


/* Chance to Choose accessibility — Version 14 — 2026-09-28
 * Collapsed bar only: remove the permanent button border and pale edge.
 */
#ttsPlayer.tts-minimised {
    background: var(--bs-gray-800);
}
#ttsPlayer.tts-minimised #ttsMinimise {
    border: 0 !important;
    box-shadow: none !important;
}
#ttsPlayer.tts-minimised #ttsMinimise:focus:not(:focus-visible) {
    outline: none;
}
#ttsPlayer.tts-minimised #ttsMinimise:focus-visible {
    outline: 3px solid var(--ctc-accent) !important;
    outline-offset: -3px !important;
}




  .gms-hero .gms-hero-picture-column {
    position: relative !important;
  }

  .gms-hero .gms-hero-logo {
    position: static !important;
    margin: 0 !important;
    padding: 0;
    height: 0;
    overflow: visible;
    font-size: 0;
    line-height: 0;
    font-weight: 400;
  }

  .gms-hero .gms-hero-picture-column .carousel-logo-home {
    z-index: 4;
  }

  .gms-hero .gms-hero-picture-column .carousel-indicators,
  .gms-hero .gms-hero-picture-column .carousel-control-prev,
  .gms-hero .gms-hero-picture-column .carousel-control-next {
    z-index: 3;
  }

  .gms-hero .gms-hero-copy-column {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .gms-hero .gms-hero-copy {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .gms-hero .gms-hero-copy > :first-child {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  /* CTC - Gallery Hero: Bootstrap layout with scoped CTC colour fallbacks. */
.gms-hero{--gms-hero-height: clamp(360px,32vw,450px);--gms-hero-orange:var(--ctc-orange,#f0784c);--gms-hero-surface:var(--bs-tertiary-bg,#f8f9fa);color:var(--bs-body-color,#212529)}


.gms-hero .gms-hero-frame{height:var(--gms-hero-height);overflow:hidden;background:var(--gms-hero-surface)}
.gms-hero .gms-hero-copy-column,.gms-hero .gms-hero-picture-column{height:100%;min-width:0;min-height:0;overflow:hidden}
.gms-hero .gms-hero-copy{height:100%;max-height:100%;min-height:0;overflow:hidden;overflow-wrap:anywhere;box-sizing:border-box}
.gms-hero .gms-hero-copy h1,.gms-hero .gms-hero-copy h2{font-size:clamp(1.8rem,3.5vw,3.5rem);line-height:1.12;font-weight:700;margin-bottom:1.25rem}
.gms-hero .gms-hero-copy p{font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6}
.gms-hero .gms-hero-copy img,.gms-hero .gms-hero-copy video,.gms-hero .gms-hero-copy iframe{max-width:100%}
.gms-hero .gms-hero-picture{height:100%;width:100%;object-fit:cover}
.gms-hero .btn-ctc{background:var(--gms-hero-orange);border-color:var(--gms-hero-orange);color:#111}
.gms-hero .btn-ctc:hover{filter:brightness(.95);color:#111}
.gms-hero .btn-ctc:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.gms-hero .gms-hero-controls .btn{min-width:44px;min-height:44px}
@media(max-width:991.98px){
 .gms-hero .gms-hero-frame{height:auto}
 .gms-hero .gms-hero-copy-column{height:340px}
 .gms-hero .gms-hero-picture-column{height:clamp(240px,58vw,420px)}
}
@media(prefers-reduced-motion:reduce){.gms-hero .carousel-item{transition:none}}
.gms-hero .carousel-logo-svg > .gms-hero-logo-image {
  display: block;
  width: 100%;
  height: auto;
}