/* =========================================
     BASE TYPOGRAPHY
     ========================================= */

  body {
    background-color: var(--background);
    color: var(--text);
    font-family: "Inter", sans-serif;
    font-size: 18px;
    letter-spacing: 0.2px;
    line-height: 1.6;
  }

  html,
  body {
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    width: 100%;
  }

  p {
    color: var(--light-text);
    margin-bottom: 1em;
  }

  /* Alignment helpers */
  .text-center {
    text-align: center;
  }

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

  .text-right {
    text-align: right;
  }

  /* Article body text */
  .article-body {
    color: #555;
    font-size: 14px;
  }

  /* =========================================
     HEADINGS
     ========================================= */

  h1 {
    font-family: "Merriweather", serif;
    color: #fff;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 24px;
  }

  h2 {
    font-family: "Merriweather", serif;
    color: #0D3E6F;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
  }

  h3 {
    font-family: "Merriweather", serif;
    color: #0D3E6F;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
  }

  h5 {
    color: #0D3E6F;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    text-transform: none;
    letter-spacing: 0.25px;
  }

  /* Section headings / subheadings / text */

  .section-heading {
    font-family: "Merriweather", serif;
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: #0D3E6F;
    margin-bottom: 36px;
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .section-heading::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--accent);
    margin: 12px auto 0;
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity 0.6s ease-out 0.4s, transform 0.6s ease-out 0.4s;
  }

  .section-heading.white-shadow {
    font-family: "Merriweather", serif;
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 36px;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .section-heading.white-shadow::after {
    background-color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity 0.6s ease-out 0.4s, transform 0.6s ease-out 0.4s;
  }

  /* Active animation state */
  .section-heading.animate-in,
  .section-heading.white-shadow.animate-in {
    opacity: 1;
    transform: translateY(0);
  }

  .section-heading.animate-in::after,
  .section-heading.white-shadow.animate-in::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /* Override / tweak white-shadow heading */
  .section-heading.white-shadow {
    font-size: 2.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 34px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  }

  .section-subheading {
    font-size: 2rem;
    font-weight: 500;
    color: var(--primary-dark);
    margin-bottom: 34px;
    text-align: center;
  }

  .section-text {
    max-width: 800px;
    margin: 0 auto 32px;
    font-size: 1.2rem;
    line-height: 2.0;
    color: var(--light-text);
    text-align: center;
  }

  /* Lists inside section text */
  .section-text ul {
    text-align: left;
    display: inline-block;
    padding-left: 0;
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .section-text li {
    list-style: none;
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    text-align: left;
  }

  .section-text li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: bold;
  }

  .section-lead {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.9;
    color: var(--text);
    max-width: 900px;
    margin: 0 auto 2rem;
    text-align: center;
  }

  /* Section-specific body text wrapper */
  .section-news {
    font-family: "Inter", sans-serif;
  }

  /* Eyebrow intro section */
  .eyebrow-text {
    color: var(--light-text);
    line-height: 1.65;
    font-size: clamp(1.5rem, 0.9rem + 0.5vw, 1.25rem);
  }

  .eyebrow.center {
    text-align: center;
  }

  /* =========================================
     LINKS / NAV LINKS
     ========================================= */

  a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.25s ease-in-out, text-decoration 0.2s;
  }

  a:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  .navbar a {
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
  }

  .navbar a:hover {
    color: var(--primary);
  }

  .text-white .nav-link,
  .text-white a.nav-link {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }

  .dropdown-menu li a {
    color: white;
  }

  .dropdown-menu li a:hover {
    color: var(--accent);
  }

  /* Social links */
  .social-link {
    color: var(--primary);
    text-decoration: none;
  }

  .social-link:hover {
    color: var(--accent);
  }

  /* Phone / search / header text */

  .phone-link {
    color: var(--primary);
    font-size: 20px;
  }

  .social-link {
    font-size: 20px;
  }

  .search-button {
    color: white;
    font-weight: 500;
  }

  .search-toggle-button {
    font-size: 20px;
    color: white;
  }

  .search-input {
    font-size: 14px;
  }

  /* Header colour variants */

  .header-container.light-bg .nav-link {
    color: #222;
  }

  .header-container.light-bg .nav-link,
  .header-container.light-bg .phone-link,
  .header-container.light-bg .social-link,
  .header-container.light-bg {
    color: #000;
  }

  .header-container.scrolled .nav-link {
    color: black;
  }

  .header-container.transparent .nav-link {
    color: white;
  }

  /* Sticky header compressed text */

  #sticky-header.sticky .button-primary {
    font-size: 0.8rem;
    line-height: 1;
  }

  #sticky-header.sticky .nav-link {
    font-size: 0.85rem;
    line-height: 1.2;
  }

  /* =========================================
     BUTTONS & CTAs
     ========================================= */

  /* Button-style links */
  .button {
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary);
  }

  .button-primary {
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: white;
  }

  /* Reusable button classes */
  .btn,
  .btn-accent,
  .btn-primary {
    font-size: 16px;
    font-weight: 600;
  }

  /* Custom button */
  .custom-button {
    font-size: 15px;
    line-height: 1;
    color: #ffffff;
    font-weight: 600;
  }

  .custom-button:hover {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
  }

  /* CTA blocks */

  .cta {
    text-align: center;
  }

  /* Article headings/links used in cards/news */
  .article-heading {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .article-link {
    color: #0073e6;
    display: inline-block;
    font-weight: 500;
    margin-top: 10px;
    text-decoration: none;
  }

  /* Company column alignment */
  .company-col {
    text-align: center;
  }

  /* =========================================
     HERO TYPOGRAPHY
     ========================================= */

  .hero {
    text-align: center;
  }

  .hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
  }

  .hero p {
    color: var(--white);
    font-size: 20px;
  }

  /* Slider container */
  .hero-slider {
    font-family: "Inter", sans-serif;
  }

  /* Hero content block */

  .hero-content {
    text-align: center;
    color: #fff;
  }

  .hero-content h1 {
    font-size: 3rem;
    font-family: 'Georgia', serif; /* overridden later by fluid section to Merriweather */
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .hero-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
  }

  .hero-heading {
    font-family: "Merriweather", serif;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 5px;
    font-size: 3rem;
  }

  /* Bar-style hero */
  .hero-bar {
    color: white;
  }

  /* Hero descriptive body text */
  .hero-description {
    font-size: 1.1rem;
    color: #ddd;
    max-width: 100%;
  }

  /* Hero overlay text (for slider) */

  .hero-text {
    text-align: left;
    text-shadow: 0 3px 6px rgba(0,0,0,0.5);
    color: white;
  }

  .hero-text h1 {
    font-size: 3rem;
  }

  .hero-text p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: white !important;
  }

  /* =========================================
     CARDS / VALUES / PROMOS
     ========================================= */

  /* Values / Vision cards */
  .values-bg .section-text,
  .values-bg .value-card h3,
  .values-bg .value-card p,
  .card.value-card {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }

  /* Vision cards base colour */
  .card.vision-card {
    color: var(--primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }

  /* Vision card inner elements – currently force white text */
  .card.vision-card h3,
  .card.vision-card p,
  .card.vision-card a {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }

  /* Card content text */
  .card-content p {
    font-size: 1.5rem;
    line-height: 1.7;
  }

  /* Promo tiles */

  .promo-tile h3,
  .promo-tile-inverse h3 {
    color: white;
    margin: 0 0 6px;
    font-size: 1.4rem;
    font-weight: 600;
  }

  .promo-tile p,
  .promo-tile-inverse p {
    color: white;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
  }

  .promo-tile h3,
  .promo-tile p,
  .promo-tile-inverse h3,
  .promo-tile-inverse p {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }

  /* Promo modal content */
  .promo-modal-content {
    color: white;
  }

  .promo-modal-content h3,
  .promo-modal-content p,
  .promo-modal-content li {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .promo-modal-content .tile-details li {
    margin-bottom: 16px;
    line-height: 1.6;
  }

  /* Tile heading/summary in modals */
  .tile-heading {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 6px;
  }

  .tile-summary {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
  }

  /* =========================================
     IMAGE OVERLAY TEXT
     ========================================= */

  .image-overlay-text {
    color: white;
    text-shadow: none; /* h3/p add their own shadows */
  }

  .image-overlay-text h3 {
    color: white;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    font-size: 1.5rem;
    font-weight: 600;
  }

  .image-overlay-text p {
    color: white;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    font-size: 1rem;
  }

  /* =========================================
     TIMELINE
     ========================================= */

  .timeline-step .icon {
    font-size: 60px;
    color: var(--primary);
  }

  .timeline-step .content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-dark);
  }

  /* =========================================
     FOOTER TYPOGRAPHY
     ========================================= */

  .footer .footer-heading,
  .footer .footer-col p,
  .footer .footer-col strong {
    color: var(--white);
  }

  .footer .footer-col p a {
    color: #0077cc;
  }

  .footer .footer-col p a:hover {
    color: #004d99;
    text-decoration: underline;
  }

  .footer a {
    color: #0077cc;
    text-decoration: none;
  }

  .footer a:hover {
    color: #004d99;
    text-decoration: underline;
  }

  .footer-heading {
    color: #ffffff;
    font-family: "Merriweather", serif;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    text-transform: uppercase;
  }

  .footer-col p {
    align-items: center;
    display: flex;
    gap: 8px;
    line-height: 1.4;
    margin: 4px 0;
  }

  .footer-bottom {
    font-size: clamp(0.85rem, 1vw, 1.1rem);
    margin-top: 24px;
    padding-top: 24px;
    text-align: center;
  }

  .footer-bottom a {
    color: var(--primary);
    font-weight: 500;
    margin-right: 16px;
    text-decoration: none;
  }

  .footer-bottom a:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  /* =========================================
     FLUID TYPOGRAPHY BASE
     ========================================= */

  /* Fluid heading sizes (desktop baseline) */
  h1 {
    font-size: clamp(1.8rem, 2vw + 1.2rem, 3rem);
    line-height: 1.2;
  }

  h2 {
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
    line-height: 1.25;
  }

  h3 {
    font-size: clamp(1.25rem, 1.2vw + 0.9rem, 1.8rem);
    line-height: 1.3;
  }

  /* Unify hero heading fonts */
  .hero-content h1,
  .hero-heading,
  .hero-text h1 {
    font-family: "Merriweather", serif; /* replaces Georgia */
    font-weight: 600;
  }

  /* Default hero sizes */
  .hero-content h1,
  .hero-text h1,
  .hero-heading {
    font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  }

  .hero-content p,
  .hero-text p,
  .hero-description {
    font-size: clamp(1rem, 0.6vw + 0.85rem, 1.125rem);
  }

  /* Section titles */
  .section-heading,
  .section-heading.white-shadow {
    font-size: clamp(1.6rem, 1.8vw + 1rem, 2.25rem);
  }

  .section-subheading {
    font-size: clamp(1.15rem, 1vw + 0.9rem, 1.6rem);
  }

  /* Buttons / utility type */
  .btn,
  .btn-primary,
  .btn-accent,
  .custom-button {
    font-size: clamp(0.95rem, 0.2vw + 0.85rem, 1rem);
  }

  .phone-link,
  .social-link {
    font-size: clamp(1rem, 0.6vw + 0.9rem, 1.125rem);
  }

  /* =========================================
     MEDIA QUERIES
     ========================================= */

  /* Tablet (≤1024px) */
  @media (max-width: 1024px) {
    .hero-heading,
    .hero-content h1,
    .hero-text h1 {
      font-size: clamp(1.6rem, 1.6vw + 1rem, 2.1rem);
    }

    .section-heading,
    .section-heading.white-shadow {
      font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    }

    .eyebrow-heading {
      font-size: 2.25rem;
    }

    .eyebrow-text {
      font-size: 1.1rem;
    }
  }

  /* Small tablets / large phones (≤768px) */
  @media (max-width: 768px) {
    .hero-content h1 {
      font-size: 2rem;
    }

    .hero-content p {
      font-size: 1rem;
    }

    .hero-text h1 {
      font-size: 2rem;
      line-height: 1.3;
    }

    .hero-text p {
      font-size: 1rem;
      line-height: 1.5;
    }

    .hero-heading {
      font-size: 1.8rem;
    }

    .eyebrow-heading {
      font-size: 1.8rem;
      line-height: 1.3;
    }

    .eyebrow-text {
      font-size: 1rem;
      line-height: 1.55;
    }
  }

  /* Phones (≤640px) */
  @media (max-width: 640px) {
    body {
      font-size: 16.5px;
    }

    h1 {
      font-size: clamp(1.6rem, 4vw + 0.8rem, 2rem);
    }

    h2 {
      font-size: clamp(1.35rem, 3.5vw + 0.6rem, 1.75rem);
    }

    .hero-heading,
    .hero-content h1,
    .hero-text h1 {
      font-size: clamp(1.4rem, 3.8vw + 0.6rem, 1.85rem);
    }

    .hero-content p,
    .hero-text p {
      font-size: clamp(0.95rem, 2.5vw + 0.5rem, 1.05rem);
    }

    .footer-bottom {
      font-size: clamp(0.9rem, 1.2vw + 0.7rem, 1rem);
    }
  }

  /* Small phones (≤480px) */
  @media (max-width: 480px) {
    body {
      font-size: 16px;
    }

    .hero-heading,
    .hero-content h1,
    .hero-text h1 {
      font-size: 1.5rem;
    }

    .section-heading,
    .section-heading.white-shadow {
      font-size: 1.4rem;
    }

    .section-subheading {
      font-size: 1.15rem;
    }

    .eyebrow-heading {
      font-size: 1.5rem;
      line-height: 1.3;
    }

    .eyebrow-text {
      font-size: 0.95rem;
      line-height: 1.5;
    }

    /* Card content text on very small screens */
    .card-content p {
      font-size: 1rem;
    }
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .section-heading,
    .section-heading.white-shadow {
      transition: none !important;
    }
  }