body {
      font-family: 'Inter', sans-serif;
      background: #f8f9fa;
      color: #2b2b2b;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #1b1b1b;
      font-weight: 600;
    }

    p,
    li {
      color: #2d2d2d;
      font-size: 1.05rem;
    }

    /* MAIN CONTENT LINK STYLE — OPTION B */
    .main-content a {
      color: #1b1b1b !important;
      font-weight: 600;
      text-decoration: none;
    }

    .main-content a:hover {
      color: #008C95 !important;
      text-decoration: underline;
    }

    /* Sidebar */
    .sidebar {
      width: 250px;
      position: fixed;
      top: 0;
      bottom: 0;
      overflow-y: auto;
      background: #fafafa;
      border-right: 1px solid #ddd;
      padding: 1.2rem;
      z-index: 30;
    }

    .menu-label {
      color: #444;
      font-weight: 600;
    }

    /* Fix: Sidebar & index links too grey */
    .sidebar a,
    #mobileIndex a,
    .menu-list a {
      color: #1b1b1b !important;
      font-weight: 600 !important;
    }

    .sidebar a:hover,
    #mobileIndex a:hover,
    .menu-list a:hover {
      color: #008C95 !important;
    }

    .sidebar-search {
      margin-bottom: 1rem;
    }

    /* Content shift when sidebar is present */
    .main-content {
      margin-left: 250px;
      padding: 1.5rem;
    }

    /* Hide sidebar on mobile */
    @media screen and (max-width: 1023px) {
      .sidebar {
        display: none;
      }

      .main-content {
        margin-left: 0;
      }
    }

    /* Hide navbar completely */
    .navbar.is-hidden-desktop {
      display: none !important;
    }

    .video-frame {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .video-frame iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .message-header {
      cursor: pointer;
    }

    /* Fix hero subtitle being grey */
    .hero .subtitle {
      color: white !important;
      opacity: 1 !important;
    }

    .section .title,
    .section h2.title,
    .section h3.title,
    .section h2,
    .section h3 {
      color: #008C95 !important;
      /* strong dark heading colour */
    }

    /* Teal FAQ message headers */
    .message.is-info>.message-header {
      background: #008C95 !important;
      /* Metre2 teal */
      border: none !important;
      font-weight: 600;
      color: white !important;
    }

    /* Optional: darker teal on hover */
    .message.is-info>.message-header:hover {
      background: #007B84 !important;
      color: white !important;
    }

    .message.is-info>.message-header,
    .message.is-info>.message-header p,
    .message.is-info>.message-header span,
    .message.is-info>.message-header .icon i {
      color: white !important;
    }

    /* Make search input text white */
    input#sidebarSearch,
    input#mobileSearch {
      color: white !important;
    }

    /* Make placeholder text white too */
    input#sidebarSearch::placeholder,
    input#mobileSearch::placeholder {
      color: rgba(255, 255, 255, 0.8) !important;
    }

    .section {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }

    .sidebar {
      font-size: 0.9rem;
      /* about 10% smaller */
    }

    .sidebar .menu-list a {
      font-size: 0.9rem !important;
    }

    .sidebar .menu-label {
      font-size: 0.85rem !important;
    }

    .sidebar .menu-list a {
      padding-left: 0.6rem !important;
      /* subtle indent */
      display: block;
      /* keeps clickable area full width */
    }

    .sidebar .menu-label {
      padding-left: 0.3rem;
      /* small indent for labels too */
    }

    p,
    li {
      font-size: 0.9rem;
    }