/* ==========================================================================
       CSS VARIABLES & PALETTE
       ========================================================================== */
    :root {
      --color-cream: #EDEEDF;
      --color-green: #065F46;
      --color-green-dark: #044332;
      --color-green-light: #0d7a5b;
      --color-gold: #D5A84B;
      --color-lime: #D3EF67;
      --color-lime-dark: #B9E04B;
      --color-dark: #121815;
      --color-muted: #4b5563;
      --color-muted-light: #6b7280;
      --color-footer-bg: #071811;
      --color-white: #ffffff;

      /* Derived tones (header redesign): same hues, shifted lightness */
      --color-forest: #03382b;             /* deeper than green-dark: shadows, band bottom edge */
      --color-cream-light: #f6f7ee;        /* lifted cream: highlight on the brand row */
      --color-lime-soft: #eef7cc;          /* pale lime: icon tiles at rest */

      --font-heading: 'Fredoka', cursive, sans-serif;
      --font-body: 'Inter', sans-serif;

      --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Reset & Base */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: var(--font-body);
      color: var(--color-dark);
      background-color: var(--color-white);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    img, video {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    button {
      cursor: pointer;
      border: none;
      background: none;
      font-family: inherit;
    }

    /* 85% width requirement for all sections below hero */
    .container {
      width: 85%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0;
    }

    /* Typography Utilities */
    .font-fredoka {
      font-family: var(--font-heading);
    }

    .font-inter {
      font-family: var(--font-body);
    }

    .section-tag {
      display: inline-block;
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--color-green);
      letter-spacing: 0.02em;
      margin-bottom: 0.6rem;
    }

    .section-title {
      font-family: var(--font-heading);
      font-size: 2.85rem;
      font-weight: 700;
      color: var(--color-green);
      line-height: 1.15;
      letter-spacing: -0.01em;
    }

    @media (max-width: 768px) {
      .section-title {
        font-size: 2.1rem;
      }
      .container {
        width: 92%;
      }
    }

    /* ==========================================================================
       BUTTONS & HOVER EFFECTS
       ========================================================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 9999px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.95rem;
      transition: var(--transition-smooth);
      position: relative;
      cursor: pointer;
    }

    .btn-green {
      background-color: var(--color-green);
      color: var(--color-white);
      border: 1.5px solid var(--color-green);
    }

    .btn-green:hover {
      background-color: var(--color-green-dark);
      border-color: var(--color-green-dark);
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 12px 24px -6px rgba(6, 95, 70, 0.45);
    }

    .btn-green:active {
      transform: translateY(0) scale(0.99);
    }

    .btn-outline {
      background-color: rgba(237, 238, 223, 0.85);
      color: #1f2937;
      border: 1.5px solid #a8aa96;
      backdrop-filter: blur(4px);
    }

    .btn-outline:hover {
      background-color: var(--color-green);
      border-color: var(--color-green);
      color: var(--color-white);
      transform: translateY(-2px);
      box-shadow: 0 10px 20px -5px rgba(6, 95, 70, 0.25);
    }

    .btn-outline-green {
      background-color: transparent;
      color: var(--color-green);
      border: 1.5px solid var(--color-green);
    }

    .btn-outline-green:hover {
      background-color: var(--color-green);
      color: var(--color-white);
      transform: translateY(-2px);
      box-shadow: 0 10px 20px -5px rgba(6, 95, 70, 0.3);
    }

    .btn-lime {
      background-color: var(--color-lime);
      color: #000000;
      font-weight: 700;
      border: 1.5px solid var(--color-lime);
    }

    .btn-lime:hover {
      background-color: var(--color-lime-dark);
      border-color: var(--color-lime-dark);
      transform: translateY(-2px) scale(1.04);
      box-shadow: 0 12px 24px -4px rgba(211, 239, 103, 0.6);
    }

    .btn-dark {
      background-color: #0e1713;
      color: var(--color-white);
      border: 1.5px solid #0e1713;
    }

    .btn-dark:hover {
      background-color: var(--color-green-dark);
      border-color: var(--color-green-dark);
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
    }

    .arrow-icon {
      font-size: 1.1rem;
      transition: transform 0.25s ease;
      display: inline-block;
    }

    .btn:hover .arrow-icon {
      transform: translate(3px, -3px);
    }

    .link-underlined {
      font-family: var(--font-heading);
      font-weight: 600;
      color: var(--color-green);
      text-decoration: underline;
      text-underline-offset: 4px;
      transition: color 0.2s ease, opacity 0.2s ease;
      font-size: 1rem;
    }

    .link-underlined:hover {
      color: var(--color-green-dark);
      opacity: 0.85;
    }

    /* ==========================================================================
       TOP LOGO BAR & OPEN HOURS BADGE
       ========================================================================== */
    /* Row 1: faint line-drawn leaves on the right, soft lifted-cream light from the
       top-right, fading into the page cream (plain cream on the left so the logo's
       own cream background blends in) */
    .top-header {
      background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 72' fill='none' stroke='%23065F46' stroke-width='1.2' stroke-linecap='round' opacity='.13'><g transform='translate(20 58) rotate(-28) scale(0.8)'><path d='M0 0C14-12 46-12 62 0C46 12 14 12 0 0Z'/><path d='M0 0H60M18 0l8-6M18 0l8 6M34 0l8-6M34 0l8 6'/></g><g transform='translate(90 20) rotate(18) scale(0.6)'><path d='M0 0C14-12 46-12 62 0C46 12 14 12 0 0Z'/><path d='M0 0H60M18 0l8-6M18 0l8 6M34 0l8-6M34 0l8 6'/></g><g transform='translate(150 66) rotate(-50) scale(0.9)'><path d='M0 0C14-12 46-12 62 0C46 12 14 12 0 0Z'/><path d='M0 0H60M18 0l8-6M18 0l8 6M34 0l8-6M34 0l8 6'/></g><g transform='translate(230 14) rotate(8) scale(0.7)'><path d='M0 0C14-12 46-12 62 0C46 12 14 12 0 0Z'/><path d='M0 0H60M18 0l8-6M18 0l8 6M34 0l8-6M34 0l8 6'/></g><g transform='translate(300 60) rotate(-20) scale(0.75)'><path d='M0 0C14-12 46-12 62 0C46 12 14 12 0 0Z'/><path d='M0 0H60M18 0l8-6M18 0l8 6M34 0l8-6M34 0l8 6'/></g><g transform='translate(370 26) rotate(30) scale(0.6)'><path d='M0 0C14-12 46-12 62 0C46 12 14 12 0 0Z'/><path d='M0 0H60M18 0l8-6M18 0l8 6M34 0l8-6M34 0l8 6'/></g><g transform='translate(430 64) rotate(-40) scale(0.85)'><path d='M0 0C14-12 46-12 62 0C46 12 14 12 0 0Z'/><path d='M0 0H60M18 0l8-6M18 0l8 6M34 0l8-6M34 0l8 6'/></g><g transform='translate(470 12) rotate(12) scale(0.55)'><path d='M0 0C14-12 46-12 62 0C46 12 14 12 0 0Z'/><path d='M0 0H60M18 0l8-6M18 0l8 6M34 0l8-6M34 0l8 6'/></g></svg>") right center / auto 100% no-repeat,
        radial-gradient(90% 160% at 100% 0%, var(--color-cream-light), rgba(246, 247, 238, 0) 65%),
        var(--color-cream);
      position: relative;
      z-index: 100;
    }

    /* Drawer open: drop below the dark-green scrim (98) like the rest of the page */
    .site-header.menu-open .top-header { z-index: auto; }

    .top-header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }

    .top-logos-img {
      height: 46px;
      width: auto;
      object-fit: contain;
    }

    /* Brand row on every page, fixed height so the sticky header can tuck it away */
    .site-header .top-header-inner {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      height: var(--brand-h);
      gap: var(--g4);
    }

    .top-logos-wrapper { display: block; flex: none; border-radius: var(--g2); }
    .site-header .top-logos-img { height: 40px; }   /* cropped lockup, shown at ~1:1 */
    .top-logos-wrapper:focus-visible { outline: 2px solid var(--color-green); outline-offset: 4px; }

    /* Utility capsule: status, socials and the app link as one white floating unit */
    .brand-tools {
      display: flex;
      align-items: center;
      gap: var(--g3);
      padding: var(--g1) var(--g1) var(--g1) var(--g4);
      border-radius: 9999px;
      background-color: var(--color-white);
      box-shadow:
        inset 0 0 0 1px rgba(6, 95, 70, 0.08),
        0 1px 2px rgba(6, 95, 70, 0.06),
        0 var(--g3) var(--g5) calc(var(--g4) * -1) rgba(6, 95, 70, 0.45);
    }

    .brand-tools__sep {
      width: 1px;
      height: var(--g4);
      background-color: rgba(6, 95, 70, 0.12);
    }

    /* Live status: dot · state · next opening/closing time */
    .brand-status {
      display: inline-flex;
      align-items: center;
      gap: var(--g2);
      white-space: nowrap;
    }

    .brand-status__dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background-color: var(--color-green);
      animation: pulseGreen 2s infinite;
    }

    .brand-status.is-closed .brand-status__dot {
      background-color: var(--color-gold);
      box-shadow: 0 0 0 4px rgba(213, 168, 75, 0.18);
      animation: none;
    }

    .brand-status__main {
      font-family: var(--font-heading);
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--color-green-dark);
    }

    .brand-status__sub {
      padding-left: var(--g2);
      border-left: 1px solid rgba(6, 95, 70, 0.18);
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--color-muted);
    }

    /* Social links: plain icons; a pale lime disc appears on hover */
    .social-links {
      display: flex;
      align-items: center;
      gap: var(--g1);
      list-style: none;
    }

    .social-link {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: var(--color-green-dark);
      transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    }

    .social-link svg { width: 15px; height: 15px; fill: currentColor; }
    .social-link svg.is-stroke { fill: none; stroke: currentColor; stroke-width: 1.9; }
    .social-link svg .is-fill { fill: currentColor; stroke: none; }

    .social-link:hover,
    .social-link:focus-visible {
      background-color: var(--color-lime-soft);
      color: var(--color-green);
      transform: translateY(-2px);
    }

    .social-link:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }

    /* App button: green store-style pill closing the capsule */
    .app-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--g2);
      padding: 4px var(--g4) 4px 4px;
      border-radius: 9999px;
      border: 1.5px solid var(--color-green);
      background-color: var(--color-green);
      color: var(--color-white);
      transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    }

    .app-btn__icon {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: var(--color-lime);
      color: var(--color-green-dark);
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .app-btn__icon svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .app-btn__text {
      display: flex;
      flex-direction: column;
      font-family: var(--font-heading);
      font-size: 0.9rem;
      font-weight: 600;
      line-height: 1.1;
      white-space: nowrap;
    }

    .app-btn__text small {
      font-family: var(--font-body);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-lime);
      transition: color 0.3s ease;
    }

    .app-btn:hover,
    .app-btn:focus-visible {
      background-color: var(--color-green-dark);
      border-color: var(--color-green-dark);
      color: var(--color-white);
      transform: translateY(-2px);
      box-shadow: 0 var(--g3) var(--g4) calc(var(--g3) * -1) rgba(6, 95, 70, 0.6);
    }

    .app-btn:hover .app-btn__icon,
    .app-btn:focus-visible .app-btn__icon { background-color: var(--color-white); }
    .app-btn:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }

    /* --------------------------------------------------------------------------
       Opening-hours pill (segmented badge). Spacing follows the golden ratio /
       Fibonacci scale: 5 · 8 · 13 · 21 · 34 px. Colours and type are the site's own.
       -------------------------------------------------------------------------- */
    .top-header,
    .navbar {
      --g1: 5px;
      --g2: 8px;
      --g3: 13px;
      --g4: 21px;
      --g5: 34px;
      --g6: 55px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      height: var(--g5);
      padding: 0 var(--g3) 0 calc(var(--g5) - var(--g4) - var(--g1));
      border-radius: 9999px;
      background-color: rgba(211, 239, 103, 0.45);
      border: 1px solid rgba(6, 95, 70, 0.18);
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--color-green);
      white-space: nowrap;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 var(--g2) var(--g4) calc(var(--g3) * -1) rgba(6, 95, 70, 0.25);
    }

    /* Inner chip: 21px tall inside the 34px pill (34 ÷ φ ≈ 21) */
    .status-pill__state {
      display: inline-flex;
      align-items: center;
      gap: var(--g2);
      height: var(--g4);
      padding: 0 var(--g3) 0 var(--g2);
      border-radius: 9999px;
      background-color: var(--color-white);
      box-shadow: 0 1px 2px rgba(6, 95, 70, 0.12);
    }

    .status-pill__seg {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: var(--g1);
      padding-left: var(--g3);
      margin-left: var(--g3);
    }

    .status-pill__seg::before {            /* hairline divider, 13px tall */
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 1px;
      height: var(--g3);
      transform: translateY(-50%);
      background-color: rgba(6, 95, 70, 0.22);
    }

    .status-pill__seg--muted {
      color: var(--color-muted);
      font-weight: 500;
    }

    .status-pill__icon {
      width: var(--g3);
      height: var(--g3);
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
    }

    /* Closed: gold dot, no pulse */
    .status-pill.is-closed .status-dot {
      background-color: var(--color-gold);
      animation: none;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      background-color: var(--color-green);
      border-radius: 50%;
      display: inline-block;
      animation: pulseGreen 2s infinite;
    }

    @keyframes pulseGreen {
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 95, 70, 0.6); }
      70% { transform: scale(1.15); box-shadow: 0 0 0 7px rgba(6, 95, 70, 0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 95, 70, 0); }
    }

    /* ==========================================================================
       MAIN NAVIGATION BAR
       ========================================================================== */
    /* Row 2: deep green band. Green → green-dark top to bottom, a hairline of light
       on the top edge, and a soft forest shadow so it floats above the page */
    .navbar {
      background: linear-gradient(180deg, var(--color-green) 0%, var(--color-green-dark) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 var(--g3) var(--g5) calc(var(--g4) * -1) rgba(3, 56, 43, 0.7);
      padding: 14px 0;
      position: sticky;
      top: 0;
      z-index: 99;
      transition: box-shadow 0.3s ease;
    }

    /* Faint lime dot texture, strongest at the right end behind Book Tickets */
    .site-header .navbar::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(rgba(211, 239, 103, 0.14) 1px, transparent 1.4px);
      background-size: var(--g3) var(--g3);
      -webkit-mask-image: linear-gradient(90deg, transparent 55%, #000);
              mask-image: linear-gradient(90deg, transparent 55%, #000);
    }

    .site-header .navbar-inner { position: relative; }

    /* Header wrapper: sticky as one block, hidden while scrolling down */
    .site-header {
      --brand-h: 72px;                     /* row 1 height */
      position: sticky;
      top: calc(var(--brand-h) * -1);      /* row 1 scrolls away, the green band stays pinned */
      z-index: 1000;
      isolation: isolate;                  /* page effects never paint over the header or its dropdowns */
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .site-header.is-hidden { transform: translateY(-100%); }

    /* Breadcrumb strip under the menu bar: same colour, very narrow */
    .crumbs {
      position: relative;
      background: linear-gradient(180deg, rgba(6, 95, 70, 0.06), rgba(6, 95, 70, 0.02)), var(--color-cream);
      border-top: 1px solid rgba(6, 95, 70, 0.12);
      box-shadow: inset 0 3px 6px -4px rgba(6, 95, 70, 0.25), 0 8px 18px -10px rgba(6, 95, 70, 0.35);
    }


    .crumbs__list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      height: 38px;
      list-style: none;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--color-dark);
    }

    .crumbs__list li { display: inline-flex; align-items: center; gap: 10px; }

    .crumbs__list li + li::before {
      content: '›';
      font-size: 1.1rem;
      line-height: 1;
      color: var(--color-green);
    }

    .crumbs__list a { color: var(--color-dark); transition: color 0.2s ease; }
    .crumbs__home { display: inline-flex; align-items: center; }
    .crumbs__list .crumbs__home { color: var(--color-green); }
    .crumbs__list .crumbs__home:hover { color: var(--color-green-dark); }
    .crumbs__home svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }
    .crumbs__list a:hover { color: var(--color-green); }
    .crumbs__list a[aria-current="page"] { color: var(--color-green); font-weight: 700; }
    .crumbs__list a:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; border-radius: 3px; }

    .site-header .navbar { position: relative; }

    /* Compact menu bar: 8px above and below, smaller button (≈50px tall) */
    .site-header .navbar { padding: var(--g2) 0; }
    .site-header .nav-action .btn { padding: var(--g2) var(--g4); font-size: 0.9rem; }

    /* Six long menu labels + three actions need ~1350px: the header rows run
       wider than .container (34px gutters, 1600px cap) */
    .site-header .container {
      width: calc(100% - 2 * var(--g5, 34px));
      max-width: 1600px;
    }

    /* Laptops: tighter pills and type so everything still fits on one line */
    @media (max-width: 1440px) {
      .navbar .nav-link { padding: var(--g2); font-size: 0.88rem; }
      .navbar .nav-link.active::after { left: var(--g2); right: var(--g2); }   /* line follows the tighter padding */
      .navbar .nav-chevron { width: 10px; height: 10px; }
    }

    /* Solid once scrolled too: no page content or effect shows through the bar */
    .navbar.scrolled {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 var(--g3) var(--g5) calc(var(--g3) * -1) rgba(3, 56, 43, 0.85);
    }

    .navbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-menu {
      position: relative;
      display: flex;
      align-items: center;
      gap: 2px;
      list-style: none;
    }

    .nav-item {
      position: relative;
    }

    .nav-link {
      position: relative;
      z-index: 1;                          /* above the sliding indicator */
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 0.92rem;
      color: var(--color-cream);           /* on the green band */
      padding: var(--g2) var(--g3);
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      gap: var(--g1);
      transition: color 0.2s ease;
      cursor: pointer;
    }

    .nav-link:hover,
    .has-mega.is-open .nav-link {
      color: var(--color-white);
    }

    .nav-link.active {
      color: var(--color-lime);
      font-weight: 600;
    }

    .navbar .nav-chevron { opacity: 0.7; }

    /* Active menu: a lime line under the label (no pill at rest) */
    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: var(--g3);
      right: var(--g3);
      height: 2.5px;
      border-radius: 2px;
      background-color: var(--color-lime);
      box-shadow: 0 0 var(--g2) rgba(211, 239, 103, 0.55);
      transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }


    /* Sliding hover pill (navigation-menu "indicator" pattern): one element that
       glides between items instead of each item lighting up on its own. main.js
       sets --ind-x / --ind-w and toggles .is-visible. */
    .nav-indicator {
      position: absolute;
      top: 50%;
      left: 0;
      width: var(--ind-w, 0px);
      height: var(--g5);
      border-radius: 9999px;
      background-color: rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transform: translate(var(--ind-x, 0px), -50%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    }

    .nav-indicator.is-visible { opacity: 1; }
    .nav-indicator.is-snapping { transition: opacity 0.2s ease; }   /* first appearance: no slide in from the left edge */

    /* --------------------------------------------------------------------------
       Mega menu (navigation-menu pattern). Panels split 1.618 : 1 between the
       link groups and a featured card (377px : 233px, consecutive Fibonacci).
       -------------------------------------------------------------------------- */
    .nav-trigger {
      background: none;
      border: none;
      font-family: var(--font-heading);
    }

    .navbar .nav-link,
    .navbar .btn { white-space: nowrap; }

    .navbar .nav-link:focus-visible,
    .navbar .btn:focus-visible,
    .mobile-toggle:focus-visible,
    .mega a:focus-visible,
    .mega-feature:focus-visible {
      outline: 2px solid var(--color-green);
      outline-offset: 2px;
    }

    /* On the green band the ring is lime */
    .navbar .nav-link:focus-visible,
    .navbar .nav-action .btn:focus-visible,
    .mobile-toggle:focus-visible { outline-color: var(--color-lime); }

    .mega a:focus-visible,
    .mega-feature:focus-visible { border-radius: var(--g2); }

    .nav-chevron {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.25s ease;
    }

    .has-mega.is-open .nav-chevron { transform: rotate(180deg); }

    .mega {
      position: absolute;
      top: calc(100% + var(--mega-drop, 8px) + var(--g3));   /* down to the bar's bottom edge (main.js), then a 13px gap */
      left: calc(var(--g4) * -1);
      margin-left: var(--mega-shift, 0px);   /* set by main.js so the panel stays on screen */
      z-index: 100;
      display: grid;
      grid-template-columns: max-content;         /* links take only the room they need */
      grid-auto-flow: column;
      grid-auto-columns: 233px;                   /* the Book Tickets card, when a panel has one */
      gap: var(--g4);
      padding: var(--g4);
      border-radius: var(--g4);
      /* Pale lime: a solid wash from almost-white lime into --color-lime-soft */
      background: linear-gradient(160deg, #f4fadc 0%, var(--color-lime-soft) 100%);
      border: 1px solid rgba(6, 95, 70, 0.12);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 var(--g4) var(--g6) calc(var(--g4) * -1) rgba(6, 95, 70, 0.3),
        0 15px 35px rgba(0, 0, 0, 0.08);
      opacity: 0;
      visibility: hidden;
      transform: translateY(var(--g2)) scale(0.98);
      transform-origin: top left;
      transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
    }

    .mega::before {                        /* hover bridge from the menu down to the panel */
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: calc(var(--mega-drop, 8px) + var(--g3));
    }

    .mega--end { left: auto; right: calc(var(--g4) * -1); transform-origin: top right; }

    /* Caret pointing at the open menu (added by main.js; --caret-x set in fit()) */
    /* Connector: a lime triangle that spans the 13px gap, its tip touching the bar.
       Overlaps the panel by 1px so the panel's top border doesn't show under it. */
    .mega-caret {
      position: absolute;
      bottom: calc(100% - 1px);
      left: var(--caret-x, 50%);
      width: var(--g4);
      height: calc(var(--g3) + 2px);         /* the gap, the 1px overlap, and 1px into the bar so the tip meets it */
      background-color: #f4fadc;             /* matches the top of the panel's lime wash */
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .has-mega.is-open .mega {
      opacity: 1;
      visibility: visible;
      transform: none;
    }

    /* Links settle in one after another as a panel opens (--i set by main.js) */
    .mega-group li {
      opacity: 0;
      transform: translateY(var(--g1));
      transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .has-mega.is-open .mega-group li {
      opacity: 1;
      transform: none;
      transition-delay: calc(var(--i, 0) * 25ms + 40ms);
    }

    .mega-groups {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(200px, max-content);   /* as wide as the content, never narrower than 200px */
      gap: var(--g4);
      align-content: start;
    }

    .mega-heading {
      display: flex;
      align-items: center;
      gap: var(--g2);
      padding: 0 var(--g2) var(--g2);      /* heading icon lines up with the link icons */
      margin-bottom: var(--g1);
      border-bottom: 1px solid rgba(6, 95, 70, 0.14);
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-green);
    }

    /* Lime icon tile before each group heading (21px, 8px radius) */
    .mega-heading__icon {
      display: grid;
      place-items: center;
      flex: none;
      width: var(--g4);
      height: var(--g4);
      border-radius: var(--g2);
      background-color: var(--color-lime);
      box-shadow: 0 var(--g1) var(--g3) calc(var(--g1) * -1) rgba(6, 95, 70, 0.35);
    }

    .mega-heading__icon svg {
      width: var(--g3);
      height: var(--g3);
      fill: none;
      stroke: var(--color-green-dark);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mega-group ul { list-style: none; }

    .mega-group a {
      position: relative;
      display: block;
      padding: var(--g2) var(--g4) var(--g2) var(--g3);
      border-radius: var(--g3);
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--color-dark);
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .mega-group a::after {                 /* arrow slides in on hover */
      content: '→';
      position: absolute;
      right: var(--g3);
      top: 50%;
      opacity: 0;
      transform: translate(calc(var(--g1) * -1), -50%);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .mega-group a:hover,
    .mega-group a:focus-visible {
      background-color: rgba(255, 255, 255, 0.75);
      color: var(--color-green);
      box-shadow: 0 1px 2px rgba(6, 95, 70, 0.08);
    }

    .mega-group a:hover::after,
    .mega-group a:focus-visible::after {
      opacity: 1;
      transform: translate(0, -50%);
    }

    /* Every link: icon tile + title */

    .mega-group a {
      display: grid;
      grid-template-columns: 28px auto;
      column-gap: var(--g3);
      align-items: center;
      padding: var(--g1) calc(var(--g4) + var(--g1)) var(--g1) var(--g1);   /* right side: room for the hover arrow */
    }

    .mega-link__icon {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: var(--g2);
      color: var(--color-green-dark);
      background-color: var(--color-white);  /* white tiles read clearly on the lime panel */
      box-shadow: inset 0 0 0 1px rgba(6, 95, 70, 0.08);
      transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mega-link__icon svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mega-group a:hover .mega-link__icon,
    .mega-group a:focus-visible .mega-link__icon {
      background-color: var(--color-green);
      color: var(--color-lime);
      transform: scale(1.06);
    }

    .mega-link__title { line-height: 1.3; }


    .mega-feature {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: var(--g1);
      min-height: 233px;
      padding: var(--g4);
      border: none;
      border-radius: var(--g3);
      background-color: var(--color-green);
      color: var(--color-white);
      text-align: left;
      cursor: pointer;
      transition: var(--transition-smooth);
    }

    .mega-feature::before {                /* soft lime glow, top-right */
      content: '';
      position: absolute;
      top: calc(var(--g6) * -1);
      right: calc(var(--g6) * -1);
      width: 144px;
      height: 144px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(211, 239, 103, 0.45), rgba(211, 239, 103, 0) 70%);
      transition: transform 0.4s ease;
    }

    .mega-feature:hover {
      background-color: var(--color-green-dark);
      transform: translateY(-2px);
      box-shadow: 0 12px 24px -6px rgba(6, 95, 70, 0.45);
    }

    .mega-feature:hover::before { transform: scale(1.3); }

    /* Fine dot texture, fading out from the top-right corner */
    .mega-feature::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(rgba(211, 239, 103, 0.22) 1px, transparent 1.4px);
      background-size: var(--g3) var(--g3);
      -webkit-mask-image: radial-gradient(circle at 100% 0%, #000, transparent 72%);
              mask-image: radial-gradient(circle at 100% 0%, #000, transparent 72%);
    }

    .mega-feature > span:not(.mega-feature__badge):not(.mega-feature__art) {
      position: relative;
      z-index: 1;
    }

    /* Frosted icon badge, top-left (34px, 13px radius) */
    .mega-feature__badge {
      position: absolute;
      top: var(--g4);
      left: var(--g4);
      z-index: 1;
      display: grid;
      place-items: center;
      width: var(--g5);
      height: var(--g5);
      border-radius: var(--g3);
      background-color: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(4px);
    }

    /* Large faint line-art of the same icon, top-right (89px) */
    .mega-feature__art {
      position: absolute;
      top: var(--g4);
      right: calc(var(--g3) * -1);
      width: 89px;
      height: 89px;
      transform: rotate(-8deg);
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mega-feature__badge svg,
    .mega-feature__art svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mega-feature__badge svg {
      width: 18px;
      height: 18px;
      stroke: var(--color-lime);
      stroke-width: 1.8;
    }

    .mega-feature__art svg {
      stroke: rgba(211, 239, 103, 0.28);
      stroke-width: 0.9;
    }

    .mega-feature:hover .mega-feature__art { transform: rotate(0deg) scale(1.06); }

    .mega-feature__cta span {
      display: inline-block;
      transition: transform 0.3s ease;
    }

    .mega-feature:hover .mega-feature__cta span { transform: translateX(var(--g1)); }

    .mega-feature__kicker {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-lime);
    }

    .mega-feature__title {
      font-family: var(--font-heading);
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.15;
    }

    .mega-feature__text {
      font-family: var(--font-body);
      font-size: 0.85rem;
      line-height: 1.5;
      opacity: 0.85;
    }

    .mega-feature__cta {
      margin-top: var(--g2);
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--color-lime);
    }

    /* Right end of the band: Book Tickets (and, below 1024px, the live status) */
    .nav-action {
      display: flex;
      align-items: center;
      gap: var(--g3);
    }

    /* Book Tickets: the one lime element on the band, so the eye lands on it first.
       A soft lime glow at rest; on hover it lifts and a sheen sweeps across. */
    .site-header .nav-action .nav-book {
      position: relative;
      overflow: hidden;
      gap: var(--g2);
      padding: var(--g2) var(--g4) var(--g2) var(--g3);
      border-radius: 9999px;
      background-color: var(--color-lime);
      color: var(--color-green-dark);
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 700;
      box-shadow:
        0 0 0 1px rgba(211, 239, 103, 0.35),
        0 var(--g2) var(--g4) calc(var(--g3) * -1) rgba(211, 239, 103, 0.55);
      transition: background-color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    }

    .nav-book svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav-book::after {                     /* sheen */
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 40%;
      background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.65), transparent);
      transform: translateX(-150%) skewX(-12deg);
      pointer-events: none;
    }

    .site-header .nav-action .nav-book:hover,
    .site-header .nav-action .nav-book:focus-visible {
      background-color: var(--color-lime-dark);
      transform: translateY(-2px);
      box-shadow:
        0 0 0 1px rgba(211, 239, 103, 0.5),
        0 var(--g3) var(--g5) calc(var(--g3) * -1) rgba(211, 239, 103, 0.7);
    }

    .nav-book:hover::after { transform: translateX(300%) skewX(-12deg); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .nav-book:hover svg { transform: rotate(-12deg); }

    /* Live status on the green band (below 1024px only, the brand row has it above) */
    .status-pill--bar {
      display: none;
      height: 30px;
      background-color: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.14);
      color: var(--color-cream);
      box-shadow: none;
    }

    .status-pill--bar .status-pill__state {
      background-color: rgba(255, 255, 255, 0.12);
      color: var(--color-white);
      box-shadow: none;
    }

    .status-pill--bar .status-pill__seg { font-weight: 500; color: rgba(237, 238, 223, 0.75); }
    .status-pill--bar .status-pill__seg::before { background-color: rgba(255, 255, 255, 0.2); }
    .status-pill--bar .status-dot { background-color: var(--color-lime); animation-name: pulseLime; }
    .status-pill--bar.is-closed .status-dot { background-color: var(--color-gold); animation: none; }

    @keyframes pulseLime {
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(211, 239, 103, 0.6); }
      70% { transform: scale(1.15); box-shadow: 0 0 0 7px rgba(211, 239, 103, 0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(211, 239, 103, 0); }
    }

    /* Main-menu icons: drawer only (the desktop bar has no room for them) */
    .nav-icon { display: none; }

    .nav-icon svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Dark-green scrim between the open drawer and the page (below the bar: 98 < 99) */
    .nav-scrim {
      position: fixed;
      inset: 0;
      z-index: 98;
      background-color: rgba(4, 67, 50, 0.55);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s;
    }

    .site-header.menu-open .nav-scrim {
      opacity: 1;
      visibility: visible;
    }

    /* Page behind the open drawer doesn't scroll */
    html.nav-locked,
    html.nav-locked body { overflow: hidden; }

    /* Drawer-only copies of the secondary actions, as two tiles */
    .nav-drawer-actions { display: none; }

    .drawer-cta {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: var(--g3);
      padding: var(--g3) var(--g4) var(--g3) var(--g3);
      border-radius: var(--g4);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    }

    .drawer-cta:hover,
    .drawer-cta:focus-visible { transform: translateY(-2px); }

    .drawer-cta:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }

    /* App: green tile, lime accents, the dot texture from the feature cards */
    .drawer-cta--app {
      background-color: var(--color-green);
      color: var(--color-white);
      box-shadow: 0 var(--g4) var(--g5) calc(var(--g4) * -1) rgba(6, 95, 70, 0.55);
    }

    .drawer-cta--app::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(rgba(211, 239, 103, 0.25) 1px, transparent 1.4px);
      background-size: var(--g3) var(--g3);
      -webkit-mask-image: radial-gradient(circle at 100% 0%, #000, transparent 70%);
              mask-image: radial-gradient(circle at 100% 0%, #000, transparent 70%);
    }

    .drawer-cta__icon {
      display: grid;
      place-items: center;
      flex: none;
      width: 44px;
      height: 44px;
      border-radius: var(--g3);
    }

    .drawer-cta--app .drawer-cta__icon {
      background-color: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: var(--color-lime);
    }

    /* Socials in the drawer: one cream strip with a label */
    .drawer-social {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--g2) var(--g2) var(--g2) var(--g4);
      border-radius: var(--g4);
      background-color: var(--color-cream);
    }

    .drawer-social__label {
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-green);
    }

    .drawer-social .social-link { width: 38px; height: 38px; }

    .drawer-cta__icon svg {
      width: var(--g4);
      height: var(--g4);
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .drawer-cta__text {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .drawer-cta__kicker {
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.85;
    }

    .drawer-cta--app .drawer-cta__kicker { color: var(--color-lime); opacity: 1; }

    .drawer-cta__title {
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.2;
    }

    .drawer-cta__arrow {
      margin-left: auto;
      font-size: 1.1rem;
      font-weight: 600;
      transition: transform 0.3s ease;
    }

    .drawer-cta:hover .drawer-cta__arrow { transform: translateX(var(--g1)); }

    /* Desktop: open on hover as well as click/keyboard */
    @media (min-width: 1025px) and (hover: hover) {
      /* While another menu is hovered, any other panel vanishes at once (no fade
         overlapping the panel that is opening) */
      .nav-menu:hover .has-mega:not(:hover) .mega {
        opacity: 0;
        visibility: hidden;
        transition: none;
      }
      .has-mega:hover .mega {
        opacity: 1;
        visibility: visible;
        transform: none;
      }
      .has-mega:hover .mega-group li {
        opacity: 1;
        transform: none;
        transition-delay: calc(var(--i, 0) * 25ms + 40ms);
      }
      .has-mega:hover .nav-chevron { transform: rotate(180deg); }
    }

    /* Tablet & phone: a drawer with accordion panels */
    @media (max-width: 1024px) {
      .navbar-inner { position: relative; }
      .nav-menu { display: none; }
      .mobile-toggle { display: block; order: 3; margin-left: var(--g3); }
      .navbar.is-open .nav-menu {
        position: absolute;
        top: calc(100% + 14px);
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--g1);
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        padding: var(--g4);
        border-radius: var(--g4);
        background: var(--color-white);
        box-shadow: 0 var(--g4) var(--g6) calc(var(--g4) * -1) rgba(6, 95, 70, 0.28), 0 15px 35px rgba(0, 0, 0, 0.1);
      }
      .navbar.is-open .nav-menu { overscroll-behavior: contain; }   /* drawer scrolls; the page never does */
      .navbar.is-open .nav-link {
        width: 100%;
        justify-content: flex-start;
        gap: var(--g3);
        padding: var(--g2);
        border-radius: var(--g3);
        transition: background-color 0.2s ease, color 0.2s ease;
      }
      .navbar.is-open .nav-link { color: var(--color-dark); }          /* white drawer, not the band */
      .navbar.is-open .nav-link.active { color: var(--color-green); }
      .navbar.is-open .nav-link:hover,
      .navbar.is-open .has-mega.is-open .nav-link { background-color: rgba(6, 95, 70, 0.06); color: var(--color-green); }

      /* Band: live status on the left, Book Tickets + menu button on the right */
      .nav-action { flex: 1; justify-content: space-between; }
      .status-pill--bar { display: inline-flex; }
      .brand-tools > .brand-status,
      .brand-tools > .brand-status + .brand-tools__sep { display: none; }
      .brand-tools { padding-left: var(--g1); }
      .navbar.is-open .nav-chevron { margin-left: auto; }
      .navbar.is-open .nav-link.active::after { display: none; }

      /* Main-menu icons: 34px tiles, filled green on the current section */
      .navbar.is-open .nav-icon {
        display: grid;
        place-items: center;
        flex: none;
        width: var(--g5);
        height: var(--g5);
        border-radius: var(--g3);
        color: var(--color-green);
        background-color: rgba(6, 95, 70, 0.08);
        transition: background-color 0.2s ease, color 0.2s ease;
      }
      .navbar.is-open .nav-link.active .nav-icon {
        background-color: var(--color-green);
        color: var(--color-lime);
        box-shadow: 0 var(--g2) var(--g4) calc(var(--g3) * -1) rgba(6, 95, 70, 0.55);
      }
      .navbar.is-open .has-mega.is-open .nav-link:not(.active) .nav-icon { background-color: var(--color-lime); color: var(--color-green-dark); }

      /* Panels in the drawer: links only, indented under their menu, no feature cards */
      .navbar.is-open .mega-feature { display: none; }
      .navbar.is-open .mega-group a { display: block; padding: var(--g2) var(--g4) var(--g2) var(--g3); }
      .navbar.is-open .mega-link__icon { display: none; }
      .navbar.is-open .has-mega.is-open .mega { padding: var(--g2) 0 var(--g3) calc(var(--g5) + var(--g3)); }
      .nav-indicator { display: none; }
      .navbar.is-open .mega-group li { opacity: 1; transform: none; }
      .mega-caret { display: none; }
      .navbar.is-open .mega {
        position: static;
        margin-left: 0;
        display: none;
        grid-template-columns: 1fr;
        padding: 0 0 var(--g3);
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
      }
      .navbar.is-open .has-mega.is-open .mega { display: grid; }
      .navbar.is-open .mega-groups { grid-auto-flow: row; grid-auto-columns: auto; }
      .navbar.is-open .mega::before { display: none; }
    }

    @media (max-width: 768px) {
      .site-header { --brand-h: 60px; }
      .site-header .top-logos-img { height: 30px; }
      .brand-tools { display: none; }        /* app + socials move into the drawer */
      .status-pill--bar { padding: 0 4px; }
      .status-pill--bar .status-pill__seg { display: none; }   /* phones: just "Open now" */
      .site-header .nav-action .nav-book { padding: var(--g2) var(--g3); }
      .navbar.is-open .nav-drawer-actions {
        display: grid;
        gap: var(--g3);
        margin-top: var(--g3);
        padding-top: var(--g4);
        border-top: 1px solid rgba(6, 95, 70, 0.1);
      }
    }

    /* Menu button: three bars that fold into an ✕ while the drawer is open */
    .mobile-toggle {
      display: none;
      position: relative;
      width: var(--g5);
      height: var(--g5);
      border-radius: 50%;
      color: var(--color-cream);
      background-color: rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
      cursor: pointer;
    }

    /* Shown with the drawer (must come after the base rule above) */
    @media (max-width: 1024px) {
      .mobile-toggle { display: block; flex: none; }
    }

    .mobile-toggle__bars,
    .mobile-toggle__bars::before,
    .mobile-toggle__bars::after {
      position: absolute;
      left: 50%;
      width: 16px;
      height: 2px;
      margin-left: -8px;
      border-radius: 2px;
      background-color: currentColor;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
    }

    .mobile-toggle__bars { top: 50%; margin-top: -1px; }
    .mobile-toggle__bars::before,
    .mobile-toggle__bars::after { content: ''; top: 0; }
    .mobile-toggle__bars::before { transform: translateY(-5px); }
    .mobile-toggle__bars::after { transform: translateY(5px); }

    .mobile-toggle[aria-expanded="true"] .mobile-toggle__bars { background-color: transparent; }
    .mobile-toggle[aria-expanded="true"] .mobile-toggle__bars::before { transform: rotate(45deg); }
    .mobile-toggle[aria-expanded="true"] .mobile-toggle__bars::after { transform: rotate(-45deg); }

    @media (prefers-reduced-motion: reduce) {
      .nav-indicator,
      .mega,
      .mega-group li,
      .nav-book,
      .nav-book::after,
      .social-link,
      .app-btn,
      .nav-scrim,
      .drawer-cta,
      .mobile-toggle__bars,
      .mobile-toggle__bars::before,
      .mobile-toggle__bars::after { transition: none; }
      .brand-status__dot,
      .status-pill--bar .status-dot { animation: none; }
    }

    /* ==========================================================================
       HEADER V3 – cream page, white floating surfaces, green for action.
       Row 2 is a white capsule (menus + Book Tickets); hover is a solid green
       segment that slides between items, iOS segmented-control style.
       ========================================================================== */
    .site-header { --brand-h: 64px; }
    .brand-tools { background: none; box-shadow: none; padding: 0; }

    .navbar,
    .navbar.scrolled { background: var(--color-cream); box-shadow: none; padding: 0 0 var(--g3); }
    .site-header .navbar::before { display: none; }

    .site-header .navbar-inner {
      padding: var(--g1);
      border-radius: 9999px;
      background-color: var(--color-white);
      box-shadow:
        inset 0 0 0 1px rgba(6, 95, 70, 0.08),
        0 1px 2px rgba(6, 95, 70, 0.06),
        0 var(--g3) var(--g5) calc(var(--g4) * -1) rgba(6, 95, 70, 0.4);
    }

    .nav-link { color: var(--color-dark); transition: color 0.25s ease; }
    .nav-link:hover,
    .has-mega.is-open .nav-link { color: var(--color-white); }
    .nav-link.active { color: var(--color-green); }
    .nav-link.active:hover,
    .has-mega.is-open .nav-link.active { color: var(--color-lime); }
    .nav-link.active::after { background-color: var(--color-green); box-shadow: none; bottom: 3px; }
    .nav-link.active:hover::after,
    .has-mega.is-open .nav-link.active::after { opacity: 0; }

    .nav-indicator {
      height: 36px;
      background-color: var(--color-green);
      box-shadow: 0 var(--g1) var(--g3) calc(var(--g1) * -1) rgba(6, 95, 70, 0.6);
    }

    .site-header .nav-action .nav-book {
      background-color: var(--color-green);
      color: var(--color-white);
      box-shadow: 0 var(--g2) var(--g4) calc(var(--g3) * -1) rgba(6, 95, 70, 0.7);
    }
    .site-header .nav-action .nav-book svg { color: var(--color-lime); }
    .site-header .nav-action .nav-book:hover,
    .site-header .nav-action .nav-book:focus-visible { background-color: var(--color-green-dark); }

    .navbar .nav-link:focus-visible,
    .navbar .nav-action .btn:focus-visible,
    .mobile-toggle:focus-visible { outline-color: var(--color-green); }

    .status-pill--bar { background-color: var(--color-lime-soft); border-color: rgba(6, 95, 70, 0.12); color: var(--color-green-dark); }
    .status-pill--bar .status-pill__state { background-color: var(--color-white); color: var(--color-green-dark); }
    .status-pill--bar .status-pill__seg { color: var(--color-muted); }
    .status-pill--bar .status-dot { background-color: var(--color-green); animation-name: pulseGreen; }

    .mobile-toggle { color: var(--color-green); background-color: rgba(6, 95, 70, 0.07); box-shadow: none; }

    /* Dropdowns: white cards, lime-soft icon tiles */
    .mega { background: var(--color-white); border-color: rgba(6, 95, 70, 0.1); }
    .mega-caret { background-color: var(--color-white); }
    .mega-link__icon { background-color: var(--color-lime-soft); }

    /* ==========================================================================
       HEADER V5 – in the site's own language: cream like the hero, dark-green
       Fredoka, the site's green / outline pill buttons, lime as the accent.
       Row 1: logo · status · socials · app (outline) · Book Tickets (green).
       Row 2: menus centred under a hairline. Both rows stay pinned together.
       ========================================================================== */
    .site-header {
      --brand-h: 68px;
      --line: rgba(6, 95, 70, 0.12);
      top: 0;
      background: var(--color-cream);
      box-shadow: 0 var(--g3, 13px) var(--g5, 34px) -21px rgba(6, 95, 70, 0.35);
    }
    .top-header { background: none; }

    .brand-tools { gap: var(--g3); }
    .brand-tools__sep { background-color: var(--line); }
    .social-link { color: var(--color-green-dark); }
    .social-link:hover,
    .social-link:focus-visible { background-color: var(--color-lime); color: var(--color-green-dark); }

    /* App: the site's outline pill */
    .app-btn,
    .app-btn:hover,
    .app-btn:focus-visible { background-color: transparent; border: 1.5px solid var(--color-green); color: var(--color-green); box-shadow: none; }
    .app-btn:hover,
    .app-btn:focus-visible { background-color: var(--color-green); color: var(--color-white); }
    .app-btn__icon { background-color: var(--color-lime); color: var(--color-green-dark); }
    .app-btn:hover .app-btn__icon { background-color: var(--color-lime); }
    .app-btn__text small { color: var(--color-green-light); }
    .app-btn:hover .app-btn__text small { color: var(--color-lime); }

    /* Book Tickets: the site's solid green pill with ↗ */
    .brand-book {
      gap: var(--g2);
      padding: 11px var(--g4);
      border-radius: 9999px;
      background-color: var(--color-green);
      color: var(--color-white);
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 600;
      box-shadow: 0 var(--g2) var(--g4) -13px rgba(6, 95, 70, 0.9);
      transition: background-color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .brand-book svg { display: none; }
    .brand-book::after { content: '↗'; font-weight: 600; transition: transform 0.3s ease; }
    .brand-book:hover,
    .brand-book:focus-visible { background-color: var(--color-green-dark); transform: translateY(-2px); }
    .brand-book:hover::after { transform: translate(2px, -2px); }
    .brand-book:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }

    /* Row 2 */
    .navbar,
    .navbar.scrolled { background: none; box-shadow: none; padding: 0; }
    .site-header .navbar-inner {
      justify-content: center;
      min-height: 50px;
      padding: 0;
      border-radius: 0;
      background: none;
      box-shadow: inset 0 1px 0 var(--line);
    }
    .nav-link { color: var(--color-green-dark); }
    .nav-link:hover,
    .has-mega.is-open .nav-link,
    .nav-link.active:hover,
    .has-mega.is-open .nav-link.active { color: var(--color-green-dark); }
    .nav-link.active { color: var(--color-green); font-weight: 600; }
    .nav-link.active::after { background-color: var(--color-green); height: 2.5px; bottom: 2px; }
    .nav-link.active:hover::after,
    .has-mega.is-open .nav-link.active::after { opacity: 1; }
    .nav-indicator { height: var(--g5); background-color: var(--color-lime); box-shadow: none; }
    .navbar .nav-link:focus-visible,
    .mobile-toggle:focus-visible { outline-color: var(--color-green); }

    @media (min-width: 1025px) { .nav-action { display: none; } }   /* Book Tickets lives in row 1 */
    @media (max-width: 1024px) {
      .brand-book { display: none; }
      .site-header .navbar-inner { justify-content: space-between; padding: var(--g2) 0; }
      .site-header .nav-action .nav-book { background-color: var(--color-green); color: var(--color-white); box-shadow: none; }
      .site-header .nav-action .nav-book svg { color: var(--color-lime); }
      .status-pill--bar { background-color: rgba(211, 239, 103, 0.45); border-color: var(--line); color: var(--color-green); }
      .status-pill--bar .status-pill__state { background-color: var(--color-white); color: var(--color-green-dark); }
      .status-pill--bar .status-pill__seg { color: var(--color-green); }
      .status-pill--bar .status-dot { background-color: var(--color-green); }
      .status-pill--bar.is-closed .status-dot { background-color: var(--color-gold); }
      .mobile-toggle { color: var(--color-green); background-color: rgba(6, 95, 70, 0.08); }
    }

    /* Breadcrumb: a fine lightest-cream line on top instead of the inset shadow */
    .site-header .crumbs {
      border-top: 1px solid var(--color-cream-light);
      box-shadow: 0 8px 18px -10px rgba(6, 95, 70, 0.35);
    }

    /* Inner pages: no row 1, so the menu row carries Book Tickets on the right,
       and the drawer always lists the app link and socials */
    .site-header--inner .navbar-inner { justify-content: space-between; box-shadow: none; padding: var(--g2) 0; }
    .site-header--inner .nav-action { display: flex; }
    .site-header--inner .site-header .nav-action .nav-book,
    .site-header--inner .nav-action .nav-book { background-color: var(--color-green); color: var(--color-white); box-shadow: 0 var(--g2) var(--g4) -13px rgba(6, 95, 70, 0.9); }
    .site-header--inner .nav-action .nav-book svg { color: var(--color-lime); }
    .site-header--inner .nav-action .nav-book:hover { background-color: var(--color-green-dark); }
    @media (min-width: 1025px) { .site-header--inner .status-pill--bar { display: none; } }
    .nav-mark { display: block; flex: none; margin-right: var(--g3); border-radius: var(--g2); }
    .nav-mark img { height: 40px; width: auto; }
    .nav-mark:focus-visible { outline: 2px solid var(--color-green); outline-offset: 3px; }
    .site-header--inner .nav-menu { margin-right: auto; }
    @media (max-width: 1024px) { .site-header--inner .nav-action { justify-content: flex-end; } }
    @media (max-width: 768px) { .site-header--inner .status-pill--bar { display: none; } }   /* the emblem takes its place */
    @media (max-width: 1024px) {
      .site-header--inner .navbar.is-open .nav-drawer-actions {
        display: grid;
        gap: var(--g3);
        margin-top: var(--g3);
        padding-top: var(--g4);
        border-top: 1px solid rgba(6, 95, 70, 0.1);
      }
    }

    /* Dropdowns: white rounded cards like the site's cards, lime icon tiles */
    .mega {
      background: var(--color-white);
      border-color: rgba(6, 95, 70, 0.08);
      box-shadow: 0 var(--g4) var(--g6) -21px rgba(6, 95, 70, 0.45);
    }
    .mega-caret { background-color: var(--color-white); }
    .mega-heading { color: var(--color-green); border-bottom-color: var(--line); }
    .mega-heading__icon { background-color: var(--color-lime); }
    .mega-heading__icon svg { stroke: var(--color-green-dark); }
    .mega-group a { color: var(--color-dark); }
    .mega-group a:hover,
    .mega-group a:focus-visible { background-color: var(--color-cream); color: var(--color-green); box-shadow: none; }
    .mega-link__icon { background-color: rgba(211, 239, 103, 0.35); color: var(--color-green-dark); box-shadow: none; }
    .mega-group a:hover .mega-link__icon,
    .mega-group a:focus-visible .mega-link__icon { background-color: var(--color-green); color: var(--color-lime); }

    /* ==========================================================================
       HEADER V7 – GRAPHITE · CREAM · DARK GREEN
       Row 1 (homepage): a narrow graphite strip – live status, socials, app.
       Row 2: a cream bar (#EDEEDF) – logo, menus, Book Tickets. Darker cream hover pills.
       Tiger orange is the single accent: green's complement, so it pops
       against the green site without competing with it.
       ========================================================================== */
    .site-header {
      --graphite: #15191b;
      --bar: var(--color-cream);           /* main bar: the site's cream #EDEEDF */
      --sand: #dfe1cb;                     /* hover pill, tiles: a step darker than the bar */
      --sand-soft: var(--color-cream-light);   /* dropdowns and breadcrumb: a step lighter */
      --sand-tile: var(--color-white);     /* icon tiles inside the dropdowns */
      --tiger: var(--color-green-dark);    /* the accent: dark green (no lime in the header) */
      --tiger-deep: var(--color-green);
      --ink: #1e2521;
      --hair: rgba(30, 37, 33, 0.08);
      --brand-h: 36px;
      top: 0;
      margin: 0;
      border-radius: 0;
      background: var(--bar);
      box-shadow: 0 1px 0 var(--hair), 0 var(--g3, 13px) var(--g5, 34px) -21px rgba(30, 37, 33, 0.4);
    }

    /* Row 1: narrow graphite strip */
    .top-header { background: var(--graphite); }
    .site-header .top-header-inner { justify-content: space-between; gap: var(--g4); }
    .brand-tools { gap: var(--g3); padding: 0; background: none; box-shadow: none; }
    .brand-tools__sep { height: var(--g3); background-color: rgba(255, 255, 255, 0.14); }
    .brand-status__main { font-size: 0.82rem; color: var(--color-white); }
    .brand-status__sub { font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); border-left-color: rgba(255, 255, 255, 0.16); }
    .brand-status__dot { width: 7px; height: 7px; background-color: var(--color-lime); animation-name: pulseLime; }
    .social-link { width: 26px; height: 26px; color: rgba(255, 255, 255, 0.72); }
    .social-link svg { width: 13px; height: 13px; }
    .social-link:hover,
    .social-link:focus-visible { background-color: rgba(255, 255, 255, 0.08); color: var(--tiger); transform: none; }
    .social-link:focus-visible { outline-color: var(--tiger); }
    /* App: a quiet inline link in the strip */
    .app-btn,
    .app-btn:hover,
    .app-btn:focus-visible { padding: 0; gap: var(--g1); border: none; background: none; box-shadow: none; transform: none; color: var(--color-white); }
    .app-btn__icon,
    .app-btn:hover .app-btn__icon { width: 20px; height: 20px; background: none; color: var(--tiger); }
    .app-btn__icon svg { width: 14px; height: 14px; }
    .app-btn__text { flex-direction: row; gap: 4px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; }
    .app-btn__text small,
    .app-btn:hover .app-btn__text small { font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.6); }
    .app-btn:hover .app-btn__text,
    .app-btn:focus-visible .app-btn__text { color: var(--tiger); }
    .app-btn:focus-visible { outline: 2px solid var(--tiger); outline-offset: 3px; }

    /* Row 2: cream main bar */
    .navbar,
    .navbar.scrolled { background: none; box-shadow: none; padding: 0; }
    .site-header .navbar-inner,
    .site-header--inner .navbar-inner {
      justify-content: space-between;
      min-height: 64px;
      padding: var(--g2) 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
    }
    .nav-mark { padding: 0; margin-right: var(--g4); background: none; box-shadow: none; }
    .nav-mark img { height: 40px; width: auto; }
    .site-header--inner .nav-menu,
    .nav-menu { margin-right: auto; }

    .nav-link,
    .nav-link:hover,
    .has-mega.is-open .nav-link { color: var(--ink); opacity: 1; transform: none; }
    .nav-link.active,
    .nav-link.active:hover,
    .has-mega.is-open .nav-link.active { color: var(--color-green); }
    .nav-link.active::after {
      display: block;
      left: 50%;
      right: auto;
      bottom: 1px;
      width: var(--g4);
      height: 3px;
      border-radius: 3px;
      background-color: var(--tiger-deep);
      box-shadow: none;
      opacity: 1;
      transform: translateX(-50%);
    }
    .nav-indicator { height: var(--g5); background-color: var(--sand); box-shadow: none; }
    .navbar .nav-link:focus-visible,
    .mobile-toggle:focus-visible { outline-color: var(--tiger); }

    /* Book Tickets: the one tiger-orange element */
    .nav-action { display: flex; }
    .status-pill--bar { display: none; }
    .site-header .nav-action .nav-book,
    .site-header--inner .nav-action .nav-book {
      background-color: var(--tiger);
      color: var(--color-green-dark);
      font-weight: 700;
      box-shadow: 0 var(--g2) var(--g4) -11px rgba(140, 170, 40, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }
    .site-header .nav-action .nav-book svg,
    .site-header--inner .nav-action .nav-book svg { color: var(--color-green-dark); }
    .site-header .nav-action .nav-book:hover,
    .site-header .nav-action .nav-book:focus-visible,
    .site-header--inner .nav-action .nav-book:hover { background-color: var(--tiger-deep); }
    .site-header .nav-action .nav-book:focus-visible { outline-color: var(--tiger); }

    /* Breadcrumb (inner pages): a light cream strip under the bar */
    .site-header .crumbs {
      background: var(--sand-soft);
      border-top: 1px solid var(--hair);
      box-shadow: none;
    }
    .site-header .crumbs__list,
    .site-header .crumbs__list a { color: var(--color-muted); }
    .site-header .crumbs__list li + li::before { color: var(--color-green-light); }
    .site-header .crumbs__list .crumbs__home { color: var(--color-green); }
    .site-header .crumbs__list a:hover { color: var(--color-green); }
    .site-header .crumbs__list a[aria-current="page"] { color: var(--color-green); }

    @media (max-width: 1024px) {
      .site-header--inner .status-pill--bar { display: inline-flex; }
      .site-header .status-pill--bar { background-color: var(--sand); border-color: var(--hair); color: var(--ink); }
      .site-header .status-pill--bar .status-pill__state { background-color: var(--color-white); color: var(--ink); }
      .site-header .status-pill--bar .status-dot { background-color: var(--color-green); animation-name: pulseGreen; }
      .mobile-toggle { color: var(--ink); background-color: var(--sand); }
      .nav-action { flex: 1; justify-content: flex-end; gap: var(--g3); }
      .site-header--inner .nav-action { justify-content: space-between; }
    }
    @media (max-width: 768px) {
      .site-header { --brand-h: 32px; }
      .top-header .brand-tools { display: flex; }   /* socials stay in the strip on phones */
      .brand-status__sub,
      .brand-tools__sep,
      .top-header .app-btn { display: none; }
      .site-header--inner .status-pill--bar { display: none; }
      .site-header--inner .nav-action { justify-content: flex-end; }
    }

    /* Dropdowns: frosted glass in the bar's cream – translucent, the page blurred behind */
    .mega {
      background: rgba(237, 238, 223, 0.72);
      backdrop-filter: blur(var(--g4)) saturate(1.3);
      -webkit-backdrop-filter: blur(var(--g4)) saturate(1.3);
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: 0 var(--g4) var(--g6) -21px rgba(30, 37, 33, 0.45);
    }
    .mega-caret {
      background-color: rgba(237, 238, 223, 0.72);
      backdrop-filter: blur(var(--g4)) saturate(1.3);
      -webkit-backdrop-filter: blur(var(--g4)) saturate(1.3);
    }
    .mega-heading { color: var(--color-green); border-bottom-color: var(--hair); }
    .mega-heading__icon { background-color: var(--tiger); }
    .mega-heading__icon svg { stroke: var(--color-green-dark); }
    .mega-group a { color: var(--ink); }
    .mega-group a:hover,
    .mega-group a:focus-visible { background-color: rgba(255, 255, 255, 0.55); color: var(--color-green); box-shadow: none; }
    .mega-link__icon { background-color: var(--sand-tile); color: var(--color-green); box-shadow: inset 0 0 0 1px rgba(6, 95, 70, 0.1); }
    .mega-group a:hover .mega-link__icon,
    .mega-group a:focus-visible .mega-link__icon { background-color: var(--tiger); color: var(--color-green-dark); }
    /* Book Tickets card: deep forest green with terracotta accents */
    .mega-feature {
      --terra: #b4532a;
      --terra-light: #e8875c;              /* readable terracotta on the dark green */
      background:
        radial-gradient(90% 70% at 100% 0%, rgba(180, 83, 42, .38), rgba(180, 83, 42, 0) 65%),
        linear-gradient(160deg, var(--color-green) 0%, var(--color-green-dark) 55%, var(--color-forest) 100%);
      color: var(--color-white);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 var(--g3) var(--g5) -21px rgba(3, 56, 43, .9);
    }
    .mega-feature:hover {
      background:
        radial-gradient(100% 80% at 100% 0%, rgba(180, 83, 42, .5), rgba(180, 83, 42, 0) 65%),
        linear-gradient(160deg, var(--color-green) 0%, var(--color-green-dark) 55%, var(--color-forest) 100%);
      box-shadow: inset 0 0 0 1px rgba(232, 135, 92, .35), 0 var(--g4) var(--g5) -18px rgba(3, 56, 43, 1);
    }
    .mega-feature::before { background: radial-gradient(circle, rgba(232, 135, 92, .35), rgba(232, 135, 92, 0) 70%); }
    .mega-feature::after { background-image: radial-gradient(rgba(232, 135, 92, .22) 1px, transparent 1.4px); }
    .mega-feature__badge { background-color: rgba(180, 83, 42, .22); border-color: rgba(232, 135, 92, .45); }
    .mega-feature__badge svg { stroke: var(--terra-light); }
    .mega-feature__art svg { stroke: rgba(232, 135, 92, .4); }
    .mega-feature__kicker { color: var(--terra-light); }
    .mega-feature__title { color: var(--color-white); }
    .mega-feature__text { color: rgba(237, 238, 223, .82); opacity: 1; }
    .mega-feature__cta {
      align-self: flex-start;
      margin-top: var(--g3);
      padding: var(--g2) var(--g4);
      border-radius: 9999px;
      background-color: var(--terra);
      color: var(--color-white);
      box-shadow: 0 var(--g2) var(--g4) -11px rgba(180, 83, 42, .9);
      transition: background-color .25s ease;
    }
    .mega-feature:hover .mega-feature__cta { background-color: #9c4521; }
    /* Text always starts below the corner badge, however long the title */
    .mega-feature { padding-top: calc(var(--g4) + var(--g5) + var(--g3)); }

    /* Compact card (Conservation): badge in the flow, no minimum height */
    .mega-feature--compact {
      justify-content: flex-start;
      min-height: 0;
      padding: var(--g4);
      align-self: start;
    }
    .mega-feature--compact .mega-feature__badge { position: relative; top: auto; left: auto; margin-bottom: var(--g2); }
    .mega-feature--compact .mega-feature__cta { margin-top: var(--g2); }
    #mega-animals .mega-feature__badge { display: none; }              /* shorter Conservation card */
    #mega-animals { grid-auto-columns: 300px; }                        /* text wraps to two lines */
    /* Plan Your Visit: same compact Book Tickets card */
    #mega-visit { grid-auto-columns: 300px; }
    #mega-visit .mega-feature { justify-content: flex-start; align-self: start; min-height: 0; padding: var(--g4); }
    #mega-visit .mega-feature__badge { display: none; }
    #mega-visit .mega-feature__cta { margin-top: var(--g2); }

    /* Photo card (Zoo School): illustration standing on the card's bottom-right,
       copy kept to the left 60%. The cap line-art steps aside when a photo is present. */
    .mega-feature--photo { min-height: 0; padding-top: var(--g4); padding-bottom: var(--g4); }
    .mega-feature--photo:has(.mega-feature__photo) .mega-feature__badge { display: none; }   /* the picture is the visual */
    .mega:has(.mega-feature--photo) { grid-auto-columns: 340px; }   /* wider card: room for copy + illustration */
    .mega-feature__photo {
      position: absolute;
      right: -6px;
      bottom: 0;
      z-index: 1;
      height: 94%;
      width: auto;
      max-width: 52%;
      object-fit: contain;
      object-position: right bottom;
      filter: drop-shadow(0 var(--g2) var(--g3) rgba(3, 56, 43, 0.6));
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }
    .mega-feature--photo:hover .mega-feature__photo { transform: translateY(-4px) scale(1.03); }
    .mega-feature--photo:has(.mega-feature__photo) .mega-feature__art { display: none; }
    .mega-feature--photo:has(.mega-feature__photo) > span:not(.mega-feature__badge):not(.mega-feature__art) { max-width: 60%; }

    /* Drawer (white sheet) */
    .navbar.is-open .mega { background: none; }
    .navbar.is-open .mega-group a { color: var(--ink); }
    .drawer-social .social-link { color: var(--ink); }
    .navbar.is-open .nav-link.active .nav-icon { background-color: var(--color-green); color: var(--color-white); }

    /* No lime anywhere in the header: dark green carries the accent; on the
       graphite strip and the green drawer tile, cream does */
    .site-header .nav-action .nav-book,
    .site-header--inner .nav-action .nav-book {
      color: var(--color-white);
      box-shadow: 0 var(--g2) var(--g4) -11px rgba(4, 67, 50, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .site-header .nav-action .nav-book svg,
    .site-header--inner .nav-action .nav-book svg { color: var(--color-white); }
    /* Hover / focus: terracotta highlight */
    .site-header .nav-action .nav-book:hover,
    .site-header .nav-action .nav-book:focus-visible,
    .site-header--inner .nav-action .nav-book:hover,
    .site-header--inner .nav-action .nav-book:focus-visible {
      background-color: #b4532a;
      box-shadow: 0 var(--g2) var(--g4) -9px rgba(180, 83, 42, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    .site-header .nav-action .nav-book:focus-visible { outline-color: #b4532a; }
    /* Switch colour instantly: fading dark green into terracotta passes through a
       muddy dark brown that reads as a black overlay */
    .site-header .nav-action .nav-book { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
    .site-header .nav-book::after { background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); }
    .site-header .mega-heading__icon { background-color: #b4532a; box-shadow: 0 var(--g1) var(--g3) calc(var(--g1) * -1) rgba(180, 83, 42, 0.5); }   /* terracotta */
    .site-header .mega-heading__icon svg { stroke: var(--color-white); }
    /* Link icons: solid dark-green tiles with white glyphs; terracotta on hover */
    .site-header .mega-link__icon {
      background-color: var(--color-green-dark);
      color: var(--color-white);
      box-shadow: 0 var(--g1) var(--g3) calc(var(--g1) * -1) rgba(4, 67, 50, 0.45);
    }
    .site-header .mega-link__icon svg { stroke-width: 2; }
    .site-header .mega-group a:hover .mega-link__icon,
    .site-header .mega-group a:focus-visible .mega-link__icon {
      background-color: #b4532a;
      color: var(--color-white);
      box-shadow: 0 var(--g1) var(--g3) calc(var(--g1) * -1) rgba(180, 83, 42, 0.55);
    }
    .site-header .mega-group a:hover,
    .site-header .mega-group a:focus-visible { background-color: rgba(4, 67, 50, 0.07); }
    .site-header .brand-status__dot { background-color: var(--color-green-light); animation-name: pulseGreen; }
    .site-header .brand-status.is-closed .brand-status__dot { background-color: var(--color-gold); }
    .site-header .social-link:hover,
    .site-header .social-link:focus-visible { color: var(--color-cream); background-color: rgba(255, 255, 255, 0.1); }
    .site-header .social-link:focus-visible,
    .site-header .app-btn:focus-visible { outline-color: var(--color-cream); }
    .site-header .app-btn__icon,
    .site-header .app-btn:hover .app-btn__icon { color: var(--color-cream); }
    .site-header .app-btn:hover .app-btn__text,
    .site-header .app-btn:focus-visible .app-btn__text { color: var(--color-white); }
    .site-header .drawer-social .social-link:hover { color: var(--color-green-dark); background-color: var(--sand); }
    /* Drawer */
    .site-header .drawer-cta--app .drawer-cta__kicker,
    .site-header .drawer-cta--app .drawer-cta__icon { color: var(--color-cream); }
    .site-header .drawer-cta--app::after { background-image: radial-gradient(rgba(237, 238, 223, 0.18) 1px, transparent 1.4px); }
    .navbar.is-open .nav-link.active .nav-icon { background-color: var(--color-green-dark); color: var(--color-white); }
    .navbar.is-open .has-mega.is-open .nav-link:not(.active) .nav-icon { background-color: var(--sand); color: var(--color-green-dark); }
    .site-header .status-pill--bar .status-dot { background-color: var(--color-green); animation-name: pulseGreen; }
    .site-header .navbar::before { display: none; background-image: none; }   /* old lime dot texture */

    /* Dark dropdowns: deep forest glass, cream links, terracotta accents.
       The green feature cards stay brighter than the panel so they still lead. */
    .site-header .mega {
      background: rgba(12, 45, 34, 0.94);
      backdrop-filter: blur(var(--g4)) saturate(1.2);
      -webkit-backdrop-filter: blur(var(--g4)) saturate(1.2);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 var(--g4) var(--g6) -21px rgba(3, 20, 14, 0.9);
    }
    .site-header .mega-caret { background-color: rgba(12, 45, 34, 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .site-header .mega-heading { color: #e8875c; border-bottom-color: rgba(255, 255, 255, 0.1); }
    .site-header .mega-group a { color: var(--color-cream); }
    .site-header .mega-group a:hover,
    .site-header .mega-group a:focus-visible { background-color: rgba(255, 255, 255, 0.07); color: var(--color-white); }
    .site-header .mega-group a:focus-visible { outline-color: #e8875c; }
    .site-header .mega-link__icon {
      background-color: rgba(255, 255, 255, 0.08);
      color: var(--color-cream);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    /* Feature cards: warm sand on the dark panel, dark green type, terracotta accents */
    .site-header .mega-feature,
    .site-header .mega-feature:hover {
      background:
        radial-gradient(90% 70% at 100% 0%, rgba(232, 135, 92, 0.25), rgba(232, 135, 92, 0) 60%),
        linear-gradient(160deg, #efe2cc 0%, #dcc7a6 100%);
      color: #0a3d2d;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 var(--g3) var(--g5) -21px rgba(0, 0, 0, 0.8);
    }
    .site-header .mega-feature:hover {
      background:
        radial-gradient(100% 80% at 100% 0%, rgba(232, 135, 92, 0.36), rgba(232, 135, 92, 0) 60%),
        linear-gradient(160deg, #f2e6d2 0%, #e0ccac 100%);
    }
    .site-header .mega-feature::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%); }
    .site-header .mega-feature::after { background-image: radial-gradient(rgba(90, 60, 30, 0.12) 1px, transparent 1.4px); }
    .site-header .mega-feature__kicker { color: #b4532a; }
    .site-header .mega-feature__title { color: #0a3d2d; }
    .site-header .mega-feature__text { color: rgba(10, 61, 45, 0.78); }
    .site-header .mega-feature__art svg { stroke: rgba(180, 83, 42, 0.38); }
    .site-header .mega-feature__badge { background-color: rgba(180, 83, 42, 0.14); border-color: rgba(180, 83, 42, 0.35); }
    .site-header .mega-feature__badge svg { stroke: #b4532a; }
    .site-header .mega-feature__photo { filter: drop-shadow(0 var(--g2) var(--g3) rgba(90, 60, 30, 0.35)); }
    /* Drawer keeps its light sheet */
    .navbar.is-open .mega { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .navbar.is-open .mega-heading { color: var(--color-green); border-bottom-color: rgba(6, 95, 70, 0.12); }
    .navbar.is-open .mega-group a { color: var(--ink); }
    .navbar.is-open .mega-group a:hover { background-color: rgba(6, 95, 70, 0.06); color: var(--color-green); }

    /* Row 1 strip in the dropdowns' deep forest green */
    .site-header .top-header { background: #0c2d22; }
    .site-header .brand-tools__sep { background-color: rgba(255, 255, 255, 0.2); }
    .site-header .brand-status__main { color: var(--color-white); }
    .site-header .brand-status__sub { color: rgba(237, 238, 223, 0.72); border-left-color: rgba(255, 255, 255, 0.2); }
    .site-header .brand-status__dot { background-color: var(--color-white); animation: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
    .site-header .brand-status.is-closed .brand-status__dot { background-color: #e8875c; box-shadow: 0 0 0 3px rgba(232, 135, 92, 0.28); }   /* terracotta when closed */
    .site-header .top-header .social-link { color: rgba(255, 255, 255, 0.88); }
    .site-header .top-header .social-link:hover,
    .site-header .top-header .social-link:focus-visible { color: var(--color-white); background-color: #b4532a; }   /* terracotta on hover */
    .site-header .top-header .app-btn__icon,
    .site-header .top-header .app-btn:hover .app-btn__icon { color: #e8875c; }
    .site-header .top-header .app-btn__text small { color: rgba(237, 238, 223, 0.72); }
    .site-header .top-header .app-btn:hover .app-btn__text,
    .site-header .top-header .app-btn:focus-visible .app-btn__text { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; }

    /* Download app: plain link on the dark strip (no pill) */
    .site-header .top-header .app-btn,
    .site-header .top-header .app-btn:hover,
    .site-header .top-header .app-btn:focus-visible { padding: 0; background: none; box-shadow: none; }
    .site-header .top-header .app-btn__icon,
    .site-header .top-header .app-btn:hover .app-btn__icon { width: 20px; height: 20px; background: none; color: var(--color-cream); }
    .site-header .top-header .app-btn__text small { color: rgba(237, 238, 223, 0.72); }
    .site-header .top-header .app-btn:hover .app-btn__text,
    .site-header .top-header .app-btn:focus-visible .app-btn__text { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; }

    /* Active-menu underline: always centred under the label (an older laptop
       rule set left/right offsets that pushed it off-centre) */
    .site-header .navbar .nav-link.active::after { left: 50%; right: auto; transform: translateX(-50%); }

    /* Menu links centred between the logo and Book Tickets */
    .site-header .nav-menu,
    .site-header--inner .nav-menu { margin-left: auto; margin-right: auto; }

    /* Small laptops (1025–1280px): full menu bar, tightened to fit */
    @media (min-width: 1025px) and (max-width: 1280px) {
      .site-header .navbar .nav-link { padding: 6px 5px; font-size: 0.8rem; gap: 3px; }
      .site-header .navbar .nav-chevron { width: 8px; height: 8px; }
      .site-header .nav-mark { margin-right: var(--g3); }
      .site-header .nav-mark img { height: 34px; }
      .site-header .nav-action .nav-book,
      .site-header--inner .nav-action .nav-book { padding: var(--g2) var(--g3); font-size: 0.8rem; }
      .site-header .container { width: calc(100% - 2 * var(--g4, 21px)); }
    }

    /* Breadcrumb: a quiet secondary path under the menu. Smaller and lighter than
       the menu, home in a small tinted circle, current page in dark green. */
    .site-header .crumbs {
      background: var(--color-cream-light);
      border-top: 1px solid rgba(4, 67, 50, 0.08);
      box-shadow: none;
    }
    .site-header .crumbs__list {
      height: 36px;
      gap: 6px;
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.01em;
    }
    .site-header .crumbs__list li { gap: 6px; }
    .site-header .crumbs__list li + li::before {
      content: '›';
      font-size: 0.95rem;
      font-weight: 400;
      color: #b4532a;
      opacity: 0.8;
    }
    .site-header .crumbs__list,
    .site-header .crumbs__list a,
    .site-header .crumbs__list span { color: var(--color-muted); }
    .site-header .crumbs__list a:hover { color: var(--color-green-dark); }
    .site-header .crumbs__list .crumbs__home {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(4, 67, 50, 0.08);
      color: var(--color-green-dark);
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .site-header .crumbs__list .crumbs__home:hover { background: var(--color-green-dark); color: var(--color-white); }
    .site-header .crumbs__home svg { width: 12px; height: 12px; }
    .site-header .crumbs__list a[aria-current="page"] {
      padding: 0;
      background: none;
      color: var(--color-green-dark);
      font-weight: 600;
    }

    /* Current page's link in the dropdown: tinted row, terracotta tile, bold text (no dot) */
    .site-header .mega-group a.is-current {
      background-color: rgba(255, 255, 255, 0.1);
      color: var(--color-white);
      font-weight: 600;
    }
    .site-header .mega-group a.is-current .mega-link__icon {
      background-color: #b4532a;
      color: var(--color-white);
      box-shadow: 0 var(--g1) var(--g3) calc(var(--g1) * -1) rgba(180, 83, 42, 0.6);
    }
    /* Drawer (light sheet) */
    .navbar.is-open .mega-group a.is-current { background-color: rgba(6, 95, 70, 0.08); color: var(--color-green-dark); }

    /* ==========================================================================
       COMING SOON – shared "page is being prepared" layout (coming_soon.html)
       ========================================================================== */
    .cs {
      --g2: 8px; --g3: 13px; --g4: 21px; --g5: 34px; --g6: 55px; --g7: 89px;
      display: grid;
      place-items: center;
      min-height: 72vh;
      padding: var(--g7) 0;
      background:
        radial-gradient(50% 60% at 50% 40%, rgba(246, 247, 238, 0.95), rgba(246, 247, 238, 0) 70%),
        var(--color-cream);
      text-align: center;
    }
    .cs-inner { max-width: 640px; }
    .cs-mark {
      display: inline-grid;
      place-items: center;
      width: 72px;
      height: 72px;
      margin-bottom: var(--g4);
      border-radius: 50%;
      background: var(--color-green-dark);
      box-shadow: 0 0 0 10px rgba(4, 67, 50, 0.08), 0 var(--g3) var(--g5) -13px rgba(4, 67, 50, 0.7);
      animation: csFloat 3.2s ease-in-out infinite;
    }
    .cs-mark svg { width: 34px; height: 34px; fill: none; stroke: var(--color-cream); stroke-width: 1.6; stroke-linecap: round; }
    .cs-kicker {
      margin-bottom: var(--g2);
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #b4532a;
    }
    .cs-title {
      margin-bottom: var(--g4);
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1.05;
      color: var(--color-green-dark);
    }
    .cs-status {
      display: inline-flex;
      align-items: center;
      gap: var(--g2);
      margin-bottom: var(--g4);
      padding: var(--g2) var(--g4);
      border-radius: 9999px;
      background: rgba(4, 67, 50, 0.07);
      box-shadow: inset 0 0 0 1px rgba(4, 67, 50, 0.12);
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--color-green-dark);
    }
    .cs-status__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #b4532a;
      animation: csPulse 1.8s ease-in-out infinite;
    }
    /* On hold: terracotta badge, steady (not pulsing) dot */
    .cs-status--hold { background: rgba(180, 83, 42, 0.1); box-shadow: inset 0 0 0 1px rgba(180, 83, 42, 0.28); color: #8c3a18; }
    .cs-status--hold .cs-status__dot { animation: none; }
    .cs-text {
      margin: 0 auto var(--g5);
      max-width: 34em;
      font-family: var(--font-body);
      font-size: 1.05rem;
      line-height: 1.6;
      color: var(--color-muted);
    }
    .cs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g3); }
    @keyframes csFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    @keyframes csPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
    @media (prefers-reduced-motion: reduce) { .cs-mark, .cs-status__dot { animation: none; } }

    /* ==========================================================================
       SECTION 1: HERO (FULL SCREEN FOR ALL DEVICES WITH HERO VIDEO & GRADIENT)
       ========================================================================== */
    .hero-section {
      position: relative;
      width: 100%;
      height: calc(100vh - 110px);
      min-height: 600px;
      overflow: hidden;
      display: flex;
      align-items: center;
      background-color: var(--color-cream);
    }

    /* Background Video */
    .hero-video-bg {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center right;
      z-index: 1;
    }

    /* Gradient overlay from user's Gradient (1).png on left side */
    .hero-gradient-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('../images/Gradient (1).png') no-repeat left center;
      background-size: cover;
      z-index: 2;
      pointer-events: none;
    }

    /* Additional soft cream gradient layer for text contrast */
    .hero-gradient-overlay::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 58%;
      height: 100%;
      background: linear-gradient(90deg, rgba(237, 238, 223, 0.96) 0%, rgba(237, 238, 223, 0.85) 55%, rgba(237, 238, 223, 0) 100%);
    }

    .hero-container {
      position: relative;
      z-index: 3;
      width: 85%;
      max-width: 1400px;
      margin: 0 auto;
    }

    .hero-content {
      max-width: 560px;
    }

    .hero-subtitle {
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--color-muted);
      margin-bottom: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    .hero-title {
      font-family: var(--font-heading);
      font-size: clamp(3rem, 5.2vw, 4.8rem);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: #111827;
      margin-bottom: 22px;
    }

    .hero-title .text-green {
      color: var(--color-green);
    }

    .hero-desc {
      font-family: var(--font-body);
      font-size: 1.08rem;
      color: #374151;
      line-height: 1.65;
      max-width: 480px;
      margin-bottom: 34px;
    }

    .hero-btns {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    /* ==========================================================================
       SECTION 2: ABOUT SECTION (A LIVING LANDSCAPE FOR WILDLIFE)
       Tiger animation on scroll: glides in from right to left on top of arch image!
       ========================================================================== */
    .about-section {
      background-color: var(--color-cream);
      padding: 95px 0 100px 0;
      position: relative;
    }

    .about-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 60px;
    }

    .about-content {
      max-width: 540px;
    }

    .about-title {
      font-family: var(--font-heading);
      font-size: 2.85rem;
      font-weight: 700;
      color: var(--color-green);
      line-height: 1.15;
      margin-bottom: 20px;
    }

    .about-desc {
      font-family: var(--font-body);
      font-size: 1.02rem;
      color: var(--color-muted);
      line-height: 1.7;
      margin-bottom: 34px;
    }

    .stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 38px;
      padding-top: 10px;
    }

    .stat-number {
      font-family: var(--font-heading);
      font-size: 3.2rem;
      font-weight: 700;
      color: var(--color-gold);
      line-height: 1;
      margin-bottom: 6px;
    }

    .stat-label {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--color-muted-light);
      font-weight: 500;
    }

    .about-visual {
      display: flex;
      justify-content: flex-end;
    }

    /* Forest Arch with Right-to-Left Tiger Scroll & Hover Animation */
    .arch-card-wrapper {
      position: relative;
      width: 100%;
      max-width: 500px;
      border-radius: 180px 24px 24px 180px;
      overflow: hidden;
      box-shadow: 0 25px 50px -10px rgba(6, 95, 70, 0.22);
      cursor: pointer;
      background-color: transparent;
    }

    .arch-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Bengal Tiger resting on branch: starts shifted to the right, animates to left! */
    .arch-tiger-hover-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 25%;
      opacity: 0;
      transform: translateX(100px) scale(0.96);
      transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
      pointer-events: none;
      z-index: 2;
    }

    /* Scroll In-View Animation & Hover */
    .arch-card-wrapper.animate-tiger .arch-tiger-hover-img,
    .arch-card-wrapper:hover .arch-tiger-hover-img {
      opacity: 1;
      transform: translateX(0px) scale(1);
    }

    .arch-card-wrapper:hover .arch-bg-img {
      transform: scale(1.04);
      filter: brightness(0.92);
    }

    .arch-badge-hint {
      position: absolute;
      bottom: 24px;
      right: 24px;
      background-color: rgba(255, 255, 255, 0.92);
      color: var(--color-green);
      font-family: var(--font-heading);
      font-size: 0.85rem;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 9999px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 3;
      transition: var(--transition-smooth);
    }

    .arch-card-wrapper:hover .arch-badge-hint {
      background-color: var(--color-lime);
      color: #000;
      transform: translateY(-4px);
    }

    /* ==========================================================================
       SECTION 3: MEET THE WILD (INFINITE RIGHTWARD MARQUEE SCROLL - NO ZEBRA)
       ========================================================================== */
    .animals-section {
      background-color: var(--color-white);
      padding: 95px 0 105px 0;
      overflow: hidden;
    }

    .section-header-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 40px;
      flex-wrap: wrap;
      gap: 20px;
    }

    /* Infinite Marquee Strip Scrolling to the Right */
    .marquee-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 20px 0 30px 0;
      mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    }

    .marquee-track {
      display: flex;
      gap: 40px;
      width: max-content;
      animation: scrollRightMarquee 38s linear infinite;
    }

    .marquee-container:hover .marquee-track {
      animation-play-state: paused;
    }

    /* Scroll rightward continuously */
    @keyframes scrollRightMarquee {
      0% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(0%);
      }
    }

    .animal-marquee-card {
      flex: 0 0 250px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .animal-marquee-card:hover {
      transform: translateY(-12px) scale(1.08);
    }

    .animal-marquee-img-wrap {
      width: 240px;
      height: 290px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .animal-marquee-img-wrap img {
      max-height: 100%;
      max-width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.08));
      transition: filter 0.3s ease;
    }

    .animal-marquee-card:hover img {
      filter: drop-shadow(0 20px 32px rgba(6, 95, 70, 0.25));
    }

    .animal-marquee-name {
      font-family: var(--font-heading);
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--color-green);
      margin-top: 14px;
      transition: color 0.2s ease;
    }

    .animal-marquee-card:hover .animal-marquee-name {
      color: var(--color-green-dark);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    /* ==========================================================================
       SECTION 4: 4 EASY STEPS TO BUY A TICKET! (ZOO 4)
       ========================================================================== */
    .ticket-section {
      background-color: var(--color-cream);
      padding: 90px 0 100px 0;
    }

    .ticket-header-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      align-items: center;
      gap: 40px;
      margin-bottom: 30px;
    }

    .ticket-title {
      font-family: var(--font-heading);
      font-size: 2.85rem;
      font-weight: 700;
      color: var(--color-green);
      line-height: 1.15;
      margin-bottom: 12px;
    }

    .ticket-subtitle {
      font-family: var(--font-body);
      font-size: 1.05rem;
      color: var(--color-muted);
    }

    .opening-hours-card {
      background-color: transparent;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
    }

    .hours-info-box {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 18px;
    }

    .hours-text h4 {
      font-family: var(--font-heading);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--color-green);
      margin-bottom: 4px;
    }

    .hours-text p {
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--color-muted);
    }

    .calendar-icon-svg {
      width: 44px;
      height: 44px;
      stroke: #a0a68d;
      opacity: 0.85;
    }

    .steps-path-container {
      position: relative;
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }

    .steps-path-img {
      width: 100%;
      max-width: 1200px;
      height: auto;
      object-fit: contain;
      transition: transform 0.4s ease;
    }

    .steps-path-container:hover .steps-path-img {
      transform: scale(1.01);
    }

    /* ==========================================================================
       SECTION 5: WILDLIFE LIVE STREAM (ZOO 5)
       Text on left has zoo5-material1.png directly as background!
       ========================================================================== */
    .livestream-section {
      background-color: var(--color-white);
      padding: 95px 0;
      position: relative;
      overflow: hidden;
    }

    .livestream-inner {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      align-items: center;
      gap: 60px;
      position: relative;
      z-index: 2;
    }

    /* Left Side Content with zoo5-material1.png as background */
    .livestream-content-box {
      position: relative;
      padding: 40px 30px 40px 0;
      border-radius: 20px;
    }

    /* Savannah silhouette directly behind the left text block */
    .livestream-text-silhouette-bg {
      position: absolute;
      bottom: -15px;
      left: -20px;
      width: 105%;
      height: 180px;
      background: url('../images/zoo5-material1.png') no-repeat left bottom;
      background-size: contain;
      opacity: 0.5;
      pointer-events: none;
      z-index: 1;
    }

    .livestream-text-inner {
      position: relative;
      z-index: 2;
    }

    .livestream-title {
      font-family: var(--font-heading);
      font-size: 2.85rem;
      font-weight: 700;
      color: var(--color-green);
      line-height: 1.15;
      margin-bottom: 16px;
    }

    .livestream-desc {
      font-family: var(--font-body);
      font-size: 1.05rem;
      color: var(--color-muted);
      line-height: 1.6;
      margin-bottom: 34px;
      max-width: 460px;
    }

    .live-pill-cta {
      display: inline-flex;
      align-items: center;
      background-color: var(--color-white);
      border-radius: 9999px;
      padding: 4px 6px 4px 4px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      gap: 12px;
      cursor: pointer;
      transition: var(--transition-smooth);
      border: 1px solid rgba(6, 95, 70, 0.12);
    }

    .live-pill-cta:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 14px 30px rgba(6, 95, 70, 0.2);
    }

    .live-play-circle {
      width: 46px;
      height: 46px;
      background-color: var(--color-green);
      color: var(--color-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      padding-left: 3px;
      transition: background-color 0.3s ease;
    }

    .live-pill-cta:hover .live-play-circle {
      background-color: var(--color-green-dark);
    }

    .live-tag-box {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-right: 14px;
    }

    .live-lime-badge {
      background-color: var(--color-lime);
      color: #000;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.9rem;
      padding: 2px 10px;
      border-radius: 9999px;
      letter-spacing: 0.04em;
    }

    .live-sub-text {
      font-size: 0.72rem;
      color: #111;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-top: 2px;
    }

    .video-player-wrapper {
      position: relative;
      width: 100%;
      max-width: 580px;
      aspect-ratio: 16 / 10;
      border-radius: 200px 30px 30px 200px;
      overflow: hidden;
      background-color: #0c1a13;
      box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.35);
      border: 3px solid rgba(255, 255, 255, 0.1);
    }

    .livestream-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .video-overlay-controls {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px 24px;
      background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.65) 100%);
      transition: opacity 0.3s ease;
      z-index: 5;
    }

    .video-top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .video-control-btn {
      width: 36px;
      height: 36px;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      transition: var(--transition-smooth);
    }

    .video-control-btn:hover {
      background: rgba(6, 95, 70, 0.8);
      transform: scale(1.08);
    }

    .video-vol-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 9999px;
      padding: 6px 14px;
    }

    .vol-slider {
      width: 60px;
      height: 4px;
      accent-color: var(--color-lime);
      cursor: pointer;
    }

    .video-center-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
    }

    .video-center-btn {
      width: 44px;
      height: 44px;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      transition: var(--transition-bounce);
    }

    .video-center-btn.main-play {
      width: 62px;
      height: 62px;
      font-size: 1.5rem;
      background: rgba(255, 255, 255, 0.25);
      border: 2px solid rgba(255, 255, 255, 0.85);
      padding-left: 4px;
    }

    .video-center-btn:hover {
      transform: scale(1.15);
      background: rgba(6, 95, 70, 0.9);
      border-color: var(--color-lime);
    }

    .video-bottom-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      padding: 8px 16px;
      border-radius: 9999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .video-time {
      font-family: var(--font-body);
      font-size: 0.78rem;
      color: #e5e7eb;
      font-weight: 500;
    }

    .video-progress-bar {
      flex: 1;
      height: 4px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      position: relative;
      cursor: pointer;
    }

    .video-progress-fill {
      width: 65%;
      height: 100%;
      background: var(--color-white);
      border-radius: 2px;
      position: relative;
    }

    .video-progress-fill::after {
      content: '';
      position: absolute;
      right: -4px;
      top: -3px;
      width: 10px;
      height: 10px;
      background: var(--color-lime);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--color-lime);
    }

    /* ==========================================================================
       SECTION 6: MAKE A DIFFERENCE FOR WILDLIFE (ZOO 6 - ADOPTION)
       ========================================================================== */
    .adoption-section {
      background-color: var(--color-cream);
      padding: 95px 0 105px 0;
    }

    .adoption-header {
      margin-bottom: 44px;
    }

    .adoption-desc {
      font-family: var(--font-body);
      font-size: 1.02rem;
      color: var(--color-muted);
      max-width: 760px;
      line-height: 1.65;
      margin-top: 12px;
    }

    .adoption-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-bottom: 45px;
    }

    .adoption-card {
      background-color: transparent;
      transition: var(--transition-smooth);
    }

    .adoption-card-img-wrap {
      width: 100%;
      aspect-ratio: 1.5 / 1;
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
      position: relative;
    }

    .adoption-card-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .adoption-card:hover .adoption-card-img-wrap img {
      transform: scale(1.06);
    }

    .adoption-animal-name {
      font-family: var(--font-heading);
      font-size: 1.35rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 6px;
    }

    .adoption-animal-desc {
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--color-muted);
      line-height: 1.5;
      margin-bottom: 18px;
    }

    .adoption-footer-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      padding-top: 10px;
    }

    .adoption-legal-note {
      font-family: var(--font-body);
      font-size: 0.88rem;
      color: var(--color-muted);
    }

    /* ==========================================================================
       SECTION 7: WHAT'S HAPPENING AT THE ZOO (ZOO 7 - NEWS & EVENTS)
       ========================================================================== */
    .news-section {
      background-color: var(--color-white);
      padding: 95px 0 105px 0;
    }

    .news-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 36px;
      align-items: stretch;
      margin-top: 36px;
    }

    .featured-event-card {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      min-height: 360px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 32px;
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
      cursor: pointer;
    }

    .featured-event-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
      z-index: 1;
    }

    .featured-event-card:hover .featured-event-bg {
      transform: scale(1.05);
    }

    .featured-event-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
      z-index: 2;
    }

    .featured-event-content {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
    }

    .featured-event-tag {
      font-family: var(--font-heading);
      font-size: 0.9rem;
      color: var(--color-lime);
      font-weight: 600;
      margin-bottom: 6px;
    }

    .featured-event-title {
      font-family: var(--font-heading);
      font-size: 1.65rem;
      font-weight: 700;
      color: var(--color-white);
      margin-bottom: 4px;
      line-height: 1.2;
    }

    .featured-event-date {
      font-family: var(--font-body);
      font-size: 0.88rem;
      color: #e5e7eb;
    }

    .btn-glass-details {
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.35);
      color: var(--color-white);
      padding: 8px 22px;
      border-radius: 9999px;
      font-size: 0.9rem;
      font-weight: 600;
      transition: var(--transition-smooth);
      white-space: nowrap;
    }

    .btn-glass-details:hover {
      background: var(--color-green);
      border-color: var(--color-green);
      transform: translateY(-2px);
    }

    .events-list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
    }

    .event-item-card {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 16px;
      border-radius: 18px;
      background-color: transparent;
      border: 1px solid transparent;
      transition: var(--transition-smooth);
      cursor: pointer;
    }

    .event-item-card:hover {
      background-color: #fbfbf7;
      border-color: rgba(6, 95, 70, 0.12);
      transform: translateX(4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }

    .event-thumb-img {
      width: 78px;
      height: 78px;
      border-radius: 16px;
      object-fit: cover;
      flex-shrink: 0;
    }

    .event-date-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 48px;
    }

    .event-date-month {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--color-muted-light);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .event-date-day {
      font-family: var(--font-heading);
      font-size: 1.75rem;
      font-weight: 700;
      color: #111827;
      line-height: 1;
    }

    .event-item-details {
      flex: 1;
    }

    .event-item-cat {
      font-family: var(--font-heading);
      font-size: 0.85rem;
      color: var(--color-green);
      font-weight: 600;
      margin-bottom: 2px;
    }

    .event-item-title {
      font-family: var(--font-heading);
      font-size: 1.2rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 4px;
    }

    .event-item-date {
      font-family: var(--font-body);
      font-size: 0.85rem;
      color: var(--color-muted-light);
    }

    .event-arrow-circle {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: var(--color-green);
      transition: var(--transition-smooth);
      flex-shrink: 0;
    }

    .event-item-card:hover .event-arrow-circle {
      background-color: var(--color-green);
      color: var(--color-white);
      border-color: var(--color-green);
      transform: translate(2px, -2px);
    }

    .events-bottom-row {
      display: flex;
      justify-content: flex-end;
      margin-top: 14px;
    }

    /* ==========================================================================
       SECTION 8: MOBILE APPLICATION (ZOO 8)
       ========================================================================== */
    .mobile-app-section {
      background-color: var(--color-cream);
      padding: 95px 0 105px 0;
      position: relative;
    }

    .mobile-app-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 50px;
    }

    .mobile-app-content {
      max-width: 480px;
    }

    .mobile-app-desc {
      font-family: var(--font-body);
      font-size: 1.05rem;
      color: var(--color-muted);
      line-height: 1.6;
      margin-bottom: 30px;
    }

    .mobile-app-subtext {
      font-family: var(--font-body);
      font-size: 0.88rem;
      color: var(--color-muted-light);
      margin-top: 24px;
      line-height: 1.5;
    }

    .mobile-app-mockup {
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1000px;
    }

    .mockup-img {
      max-width: 440px;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.15));
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-app-mockup:hover .mockup-img {
      transform: translateY(-8px) scale(1.03) rotateY(-4deg);
    }

    /* ==========================================================================
       SECTION 9: THROUGH THE LENS (ZOO 9) - CARDS SPLIT EFFECTS!
       ========================================================================== */
    .gallery-section {
      background-color: var(--color-white);
      padding: 95px 0 115px 0;
      overflow: hidden;
    }

    /* ==========================================================================
       SECTION 9: THROUGH THE LENS (5-CARD COLLECTOR FAN DECK)
       Reference: Polaroid / Collector cards fan deck with 3s auto-swap,
       "👆 Click a card to bring it forward" pill, and no-binging hover.
       ========================================================================== */
    .gallery-card-deck-wrapper {
      position: relative;
      width: 100%;
      max-width: 1100px;
      margin: 40px auto 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      user-select: none;
    }

    .gallery-cards-deck {
      position: relative;
      width: 100%;
      max-width: 960px;
      height: 490px;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1200px;
      margin-bottom: 24px;
    }

    /* Outer Card Anchor: Handles 3D positioning without jitter */
    .deck-card {
      position: absolute;
      width: 285px;
      height: 400px;
      cursor: pointer;
      transform-origin: center bottom;
      will-change: transform, opacity, filter;
      transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                  opacity 0.45s ease,
                  filter 0.45s ease;
      -webkit-tap-highlight-color: transparent;
    }

    /* Inner Card: Polaroid / Collector Frame from Reference Image */
    .deck-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      background: #D9F2E3; /* Soft mint pastel matching reference image */
      border-radius: 22px;
      padding: 12px 12px 14px 12px;
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
      border: 1.5px solid rgba(6, 95, 70, 0.16);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
                  box-shadow 0.35s ease;
    }

    /* Lite Zoom on Hover: ZERO BINGING / JITTER GUARANTEE */
    .deck-card:hover .deck-card-inner {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 24px 50px rgba(0, 0, 0, 0.24);
    }

    /* Top-Left Category Badge (from reference image) */
    .collector-badge {
      position: absolute;
      top: 22px;
      left: 22px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #065F46;
      font-family: var(--font-heading);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 4px 12px;
      border-radius: 9999px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
      z-index: 3;
    }

    /* Image Box */
    .collector-img-box {
      width: 100%;
      flex: 1;
      min-height: 285px;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      background: #0f1c16;
    }

    .collector-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .deck-card:hover .collector-img {
      transform: scale(1.04);
    }

    /* Bottom Label from Reference Image: Name & Scientific Name */
    .collector-meta {
      padding: 10px 4px 2px 4px;
      text-align: left;
    }

    .collector-name {
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 700;
      color: #0b261b;
      line-height: 1.25;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .collector-sci {
      font-family: var(--font-body);
      font-size: 0.82rem;
      font-weight: 500;
      color: #2e5946;
      font-style: italic;
    }

    /* 5-Card Fan Spread Positions (Exact values for collector deck) */
    .deck-card.pos-0 {
      /* Far Left */
      transform: translate3d(-270px, 16px, 0) rotate(-14deg) scale(0.85);
      z-index: 1;
      opacity: 0.82;
      filter: brightness(0.9);
    }

    .deck-card.pos-1 {
      /* Mid Left */
      transform: translate3d(-135px, 8px, 0) rotate(-7deg) scale(0.93);
      z-index: 3;
      opacity: 0.94;
      filter: brightness(0.96);
    }

    .deck-card.pos-2 {
      /* Center Prominent (Brought forward) */
      transform: translate3d(0, 0, 0) rotate(0deg) scale(1.06);
      z-index: 8;
      opacity: 1;
      filter: brightness(1);
    }

    .deck-card.pos-2 .deck-card-inner {
      border: 2.5px solid var(--color-lime);
      box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
    }

    .deck-card.pos-3 {
      /* Mid Right */
      transform: translate3d(135px, 8px, 0) rotate(7deg) scale(0.93);
      z-index: 3;
      opacity: 0.94;
      filter: brightness(0.96);
    }

    .deck-card.pos-4 {
      /* Far Right */
      transform: translate3d(270px, 16px, 0) rotate(14deg) scale(0.85);
      z-index: 1;
      opacity: 0.82;
      filter: brightness(0.9);
    }

    /* Action Pill from Reference Image 1 */
    .deck-action-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-top: 6px;
    }

    .bring-forward-btn {
      background-color: #F5C518; /* Yellow/Gold pill matching reference image */
      color: #121815;
      font-family: var(--font-heading);
      font-size: 0.96rem;
      font-weight: 700;
      padding: 10px 26px;
      border-radius: 9999px;
      border: none;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(245, 197, 24, 0.38);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }

    .bring-forward-btn:hover {
      background-color: #E6B50E;
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 10px 24px rgba(245, 197, 24, 0.48);
    }

    .bring-forward-btn:active {
      transform: translateY(0) scale(0.98);
    }

    .bring-forward-btn .hand-icon {
      font-size: 1.15rem;
    }

    .deck-nav-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #ffffff;
      border: 1.5px solid rgba(6, 95, 70, 0.15);
      color: #065F46;
      font-size: 1.25rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: all 0.25s ease;
      line-height: 1;
    }

    .deck-nav-btn:hover {
      background: var(--color-green);
      color: #ffffff;
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(6, 95, 70, 0.25);
    }

    /* ==========================================================================
       SECTION 10: CALL TO ACTION HOURS BANNER (HANGING FOOTER ASSET)
       Exact match to reference screenshot:
       - Top cream background with giant lime AAZP letters
       - Bottom solid lime background with bold Inter typography and black pill button
       ========================================================================== */
    .cta-banner-section {
      background-color: var(--color-cream);
      padding: 0;
      position: relative;
      overflow: hidden;
    }

    .cta-banner-container {
      position: relative;
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
      line-height: 0;
    }

    .cta-bg-asset {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }

    /* Content Overlay on Lime Green area matching screenshot */
    .cta-content-overlay {
      position: absolute;
      left: 5%;
      top: 48%;
      width: 62%;
      max-width: 900px;
      line-height: 1.3;
      z-index: 5;
    }

    .cta-banner-title {
      font-family: var(--font-body);
      font-size: clamp(2.4rem, 5.2vw, 5.2rem);
      font-weight: 900;
      color: #111815;
      line-height: 1.05;
      letter-spacing: -0.035em;
      margin-bottom: clamp(14px, 1.8vw, 24px);
    }

    .cta-banner-desc {
      font-family: var(--font-body);
      font-size: clamp(0.95rem, 1.35vw, 1.18rem);
      font-weight: 500;
      color: #1a221e;
      line-height: 1.55;
      margin-bottom: clamp(20px, 2.5vw, 36px);
      max-width: 600px;
    }

    .btn-book-cta {
      background-color: #111815;
      color: #ffffff;
      padding: clamp(12px, 1.3vw, 16px) clamp(28px, 2.5vw, 38px);
      font-family: var(--font-body);
      font-size: clamp(0.92rem, 1.1vw, 1.05rem);
      font-weight: 600;
      border-radius: 9999px;
      border: none;
      cursor: pointer;
      transition: var(--transition-smooth);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .btn-book-cta:hover {
      background-color: var(--color-green-dark);
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }

    /* ==========================================================================
       SECTION 11: FOOTER (MATCHING Footer.png & footer-Vector.png EXACTLY)
       ========================================================================== */
    .site-footer {
      background-color: #07150e;
      color: #a1ada5;
      padding: 55px 0 30px 0;
      font-family: var(--font-body);
      position: relative;
      overflow: hidden;
      z-index: 10;
    }

    .footer-giraffe-vector {
      position: absolute;
      right: 2%;
      top: 12px;
      width: 155px;
      height: auto;
      opacity: 0.18;
      pointer-events: none;
      z-index: 1;
    }

    .footer-main-container {
      position: relative;
      z-index: 2;
    }

    .footer-layout-grid {
      display: grid;
      grid-template-columns: 420px 1fr;
      gap: 28px;
      margin-bottom: 35px;
      align-items: start;
    }

    /* Left Map Card */
    .footer-map-card {
      background: #0f1c15;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
    }

    .footer-map-frame {
      position: relative;
      height: 250px;
      width: 100%;
      background: #111d17;
    }

    .footer-map-iframe {
      width: 100%;
      height: 100%;
      border: none;
      filter: brightness(0.92) contrast(1.05);
    }

    .footer-map-tooltip {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: #16241c;
      color: #ffffff;
      padding: 7px 14px;
      border-radius: 8px;
      font-size: 0.78rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
      white-space: nowrap;
      border: 1px solid rgba(211, 239, 103, 0.35);
      pointer-events: none;
    }

    .footer-map-tooltip i {
      color: #10b981;
    }

    .footer-map-bar {
      padding: 14px 18px;
      background: #0c1812;
      display: flex;
      align-items: center;
      gap: 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .footer-map-pin-circle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #d3ef67;
      color: #044332;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      flex-shrink: 0;
    }

    .footer-map-meta {
      flex: 1;
      overflow: hidden;
    }

    .footer-map-name {
      font-size: 0.88rem;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .footer-map-coords {
      font-size: 0.75rem;
      color: #829288;
    }

    .footer-btn-directions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 8px;
      background: #1a2a20;
      color: #d3ef67;
      border: 1px solid rgba(211, 239, 103, 0.25);
      font-size: 0.82rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .footer-btn-directions:hover {
      background: #d3ef67;
      color: #064e3b;
    }

    /* Right Column Cards */
    .footer-right-content {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .footer-top-cards-row {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 18px;
    }

    .footer-bottom-cards-row {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 18px;
    }

    .footer-panel-card {
      background: #0f1c15;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 22px 24px;
      display: flex;
      flex-direction: column;
    }

    .footer-panel-logo {
      height: 38px;
      width: auto;
      object-fit: contain;
      margin-bottom: 12px;
    }

    .footer-about-text {
      font-size: 0.84rem;
      color: #94a39b;
      line-height: 1.6;
      margin: 0;
    }

    .footer-panel-heading {
      font-family: var(--font-body);
      font-size: 0.82rem;
      font-weight: 700;
      color: #c8e858;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .footer-heading-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: rgba(200, 232, 88, 0.12);
      color: #c8e858;
      font-size: 0.78rem;
    }

    .footer-bullet-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .footer-bullet-list li a {
      font-size: 0.85rem;
      color: #94a39b;
      text-decoration: none;
      transition: color 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .footer-bullet-list li a::before {
      content: "•";
      color: #607368;
      font-size: 0.95rem;
    }

    .footer-bullet-list li a:hover {
      color: #ffffff;
    }

    .footer-contact-details {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 0.85rem;
      color: #94a39b;
    }

    .footer-contact-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .footer-contact-item i {
      color: #607368;
      font-size: 0.85rem;
    }

    .footer-social-cluster {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }

    .footer-social-circle {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #17261e;
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    .footer-social-circle:hover {
      background: #c8e858;
      color: #044332;
      transform: translateY(-2px);
    }

    /* Legal Bottom Row */
    .footer-legal-bottom {
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 0.82rem;
      color: #64748b;
    }

    .footer-legal-copy {
      margin: 0;
    }

    .footer-legal-links {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .footer-legal-links a {
      color: #64748b;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-legal-links a:hover {
      color: #ffffff;
    }

    .footer-legal-dot {
      margin: 0 4px;
      color: #475569;
    }

    @media (max-width: 1024px) {
      .footer-layout-grid {
        grid-template-columns: 1fr;
      }
      .footer-top-cards-row {
        grid-template-columns: 1fr 1fr;
      }
      .footer-bottom-cards-row {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .footer-top-cards-row {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
       INTERACTIVE MODALS
       ========================================================================== */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      padding: 20px;
    }

    .modal-backdrop.active {
      opacity: 1;
      visibility: visible;
    }

    .modal-box {
      background: var(--color-white);
      border-radius: 24px;
      padding: 36px;
      max-width: 540px;
      width: 100%;
      position: relative;
      transform: translateY(20px) scale(0.96);
      transition: var(--transition-bounce);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(6, 95, 70, 0.1);
    }

    .modal-backdrop.active .modal-box {
      transform: translateY(0) scale(1);
    }

    .modal-close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #f3f4f6;
      color: #4b5563;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      transition: var(--transition-smooth);
    }

    .modal-close-btn:hover {
      background: var(--color-green);
      color: var(--color-white);
    }

    .modal-title {
      font-family: var(--font-heading);
      font-size: 1.85rem;
      font-weight: 700;
      color: var(--color-green);
      margin-bottom: 8px;
    }

    .modal-subtitle {
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--color-muted);
      margin-bottom: 24px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-group label {
      display: block;
      font-size: 0.88rem;
      font-weight: 600;
      color: #374151;
      margin-bottom: 6px;
    }

    .form-control {
      width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1.5px solid #d1d5db;
      font-family: var(--font-body);
      font-size: 0.95rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--color-green);
      box-shadow: 0 0 0 4px rgba(6, 95, 70, 0.15);
    }

    /* ==========================================================================
       RESPONSIVE BREAKPOINTS
       ========================================================================== */
    @media (max-width: 1024px) {
      .hero-title {
        font-size: 3.5rem;
      }
      .adoption-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-cols-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 768px) {
      .nav-menu {
        display: none;
      }
      .mobile-toggle {
        display: block;
      }
      .hero-inner, .about-inner, .ticket-header-grid, .livestream-inner, .mobile-app-inner, .news-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      .hero-title {
        font-size: 2.75rem;
      }
      .about-visual {
        justify-content: center;
      }
      .arch-card-wrapper {
        border-radius: 80px 80px 30px 30px;
        height: 380px;
      }
      .video-player-wrapper {
        border-radius: 30px;
      }
      .cta-content-overlay {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        background-color: var(--color-lime-dark);
        padding: 40px 24px;
      }
      .cta-banner-title {
        font-size: 2.6rem;
      }
      .adoption-cards-grid {
        grid-template-columns: 1fr;
      }
      .footer-cols-grid {
        grid-template-columns: 1fr 1fr;
      }
      .gallery-cards-deck {
        height: 390px;
      }
      .deck-card {
        width: 220px;
        height: 320px;
      }
      .collector-img-box {
        min-height: 215px;
      }
      .collector-name {
        font-size: 0.92rem;
      }
      .collector-sci {
        font-size: 0.74rem;
      }
      .deck-card.pos-0 { transform: translate3d(-140px, 10px, 0) rotate(-10deg) scale(0.82); }
      .deck-card.pos-1 { transform: translate3d(-70px, 5px, 0) rotate(-5deg) scale(0.9); }
      .deck-card.pos-2 { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.04); }
      .deck-card.pos-3 { transform: translate3d(70px, 5px, 0) rotate(5deg) scale(0.9); }
      .deck-card.pos-4 { transform: translate3d(140px, 10px, 0) rotate(10deg) scale(0.82); }
    }

/* ==========================================================================
   Header: Zoo Map shortcut – a round dark-green icon beside Book Tickets,
   same height as the button; terracotta on hover like Book Tickets
   ========================================================================== */
.site-header .nav-map {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgb(4, 67, 50);
  color: var(--color-white);
  box-shadow: 0 8px 21px -11px rgba(4, 67, 50, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.site-header .nav-map svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.site-header .nav-map:hover,
.site-header .nav-map:focus-visible,
.site-header .nav-map.is-current {
  background-color: #b4532a;
  box-shadow: 0 8px 21px -9px rgba(180, 83, 42, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.site-header .nav-map:hover { transform: translateY(-1px); }
.site-header .nav-map:focus-visible { outline: 2px solid #b4532a; outline-offset: 2px; }
.site-header .nav-action .status-pill--bar + .nav-map,
.site-header .nav-action .nav-map + .nav-book { margin-left: 0; }
/* Small laptops: make room for the map icon */
@media (min-width: 1025px) and (max-width: 1280px) {
  .site-header .nav-action { gap: var(--g2, 8px); }
  .site-header .navbar .nav-link { padding: 6px 4px; }
  .site-header .nav-map { width: 32px; height: 32px; }
  .site-header .nav-action .nav-book svg { display: none; }
}
@media (min-width: 1281px) and (max-width: 1400px) {
  .site-header .navbar .nav-link { padding: 6px 6px; font-size: 0.84rem; gap: 3px; }
  .site-header .nav-mark { margin-right: var(--g3, 13px); }
  .site-header .nav-action { gap: var(--g2, 8px); }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  .site-header .navbar .nav-link { padding: 6px 3px; font-size: 0.76rem; }
  .site-header .nav-mark { margin-right: var(--g2, 8px); }
  .site-header .container { width: calc(100% - 32px); }
}