/* Generated verbatim from html/ecs/home.html */
:root {
      /* ECS palette */
      --gum-tree-green: #3D5E46;
      --gum-mid-green: #324437;
      --leaf-green: #79A16F;
      --leaf-text: #3E6D30;
      --dark-green: #293203;
      --light-green: #F3FAEA;
      --bark-light: #EEEDE7;
      --bark-brown: #D7D5C9;
      --blob-green: #C9D4AE;
      --wattle: #EDD889;
      --lutheran-blue: #004580;
      --light-light-blue: #F0FAFF;

      --container: 1280px;
      --page-pad: clamp(24px, 5vw, 64px);
      --section-y: clamp(56px, 8vw, 96px);
      --content-measure: 68ch;

      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-10: 40px;
      --space-12: 48px;
      --space-16: 64px;

      --radius: 5px;
      --radius-lg: 8px;
      --shadow-sm: 0 1px 3px rgba(41, 50, 3, .08), 0 1px 2px rgba(41, 50, 3, .06);
      --shadow-md: 0 10px 30px rgba(41, 50, 3, .14);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      color-scheme: light;
    }

    body {
      font-family: 'Sarabun', system-ui, sans-serif;
      color: var(--dark-green);
      background: #fff;
    }

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

    img {
      display: block;
      max-width: 100%;
    }

    .page {
      margin: 0 auto;
      overflow: clip;
    }

    a:focus-visible,
    .btn:focus-visible,
    button:focus-visible,
    .link-yellow:focus-visible,
    .nav-burger-cb:focus-visible+.nav-main .nav-burger,
    .dropdown-toggle:focus-visible {
      outline: none;
      border-radius: var(--radius);
      box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--leaf-green);
    }

    .skip-link {
      position: absolute;
      left: var(--space-4);
      top: -56px;
      z-index: 100;
      background: var(--gum-tree-green);
      color: #fff;
      padding: 12px 20px;
      border-radius: var(--radius);
      font-weight: 700;
    }

    .skip-link:focus {
      top: var(--space-4);
    }

    .container {
      max-width: var(--container);
      margin: 0 auto;
      width: 100%;
    }

    h1,
    h2,
    h3 {
      font-family: 'Livvic', system-ui, sans-serif;
      font-weight: 500;
    }

    .h1 {
      font-family: 'Livvic', system-ui, sans-serif;
      font-weight: 400;
      font-size: clamp(52px, 8vw, 100px);
      line-height: 1;
      letter-spacing: -2px;
      text-wrap: balance;
    }

    .h2 {
      font-family: 'Livvic', system-ui, sans-serif;
      font-weight: 500;
      font-size: clamp(34px, 4.5vw, 55px);
      line-height: 1.2;
      letter-spacing: -0.5px;
      text-wrap: balance;
    }

    .h3 {
      font-family: 'Livvic', system-ui, sans-serif;
      font-weight: 500;
      font-size: clamp(26px, 3vw, 36px);
      line-height: 1.1;
      letter-spacing: -0.72px;
    }

    .body {
      font-size: 20px;
      line-height: 1.3;
      font-weight: 400;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 51px;
      padding: 0 40px;
      border-radius: var(--radius);
      font-family: 'Sarabun', sans-serif;
      font-weight: 700;
      font-size: 18px;
      line-height: 1.5;
      cursor: pointer;
      border: none;
      white-space: nowrap;
      text-align: center;
      transition: filter 0.2s;
    }

    .btn:hover {
      filter: brightness(.95);
    }

    .btn-yellow {
      background: var(--wattle);
      color: var(--gum-tree-green);
      /* Sarabun reserves tall ascender space for Thai marks, so its Latin label
         sits low — extra bottom padding lifts the text 2px to the optical centre
         without moving the button box (siblings stay aligned) */
      padding-bottom: 4px;
    }

    .btn-white {
      background: #fff;
      color: var(--lutheran-blue);
    }

    .btn-outline {
      background: transparent;
      color: var(--wattle);
      box-shadow: inset 0 0 0 2px var(--wattle);
    }

    .link-yellow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--wattle);
      font-family: 'Sarabun', sans-serif;
      font-weight: 600;
      font-size: 20px;
      line-height: 1.3;
      cursor: pointer;
    }

    .link-yellow img,
    .link-yellow svg {
      width: 24px;
      height: 24px;
      flex: none;
    }

    .link-yellow:hover {
      filter: brightness(1.08);
    }

    /* ---------- Header / Nav ---------- */
    header {
      position: sticky;
      top: 0;
      z-index: 90;
    }

    .nav-top {
      background: var(--bark-brown);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(4px, 0.8vw, 12px);
      padding: 6px var(--page-pad);
      flex-wrap: wrap;
    }

    .nav-top .call {
      color: var(--gum-tree-green);
      font-weight: 700;
      font-size: 18px;
      padding: 8px 12px;
    }

    .nav-edu-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 40px;
      padding: 0 16px;
      border-radius: var(--radius);
      background: transparent;
      color: var(--lutheran-blue);
      font-weight: 700;
      font-size: 18px;
      transition: filter 0.2s;
    }

    .nav-edu-btn:hover {
      filter: brightness(.96);
    }

    .nav-edu-btn img {
      width: 22px;
      height: 22px;
      flex: none;
    }

    .nav-main {
      background: var(--bark-light);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
      padding: 12px var(--page-pad) 20px;
      box-shadow: 0 4px 12px rgba(41, 50, 3, .06);
      position: relative;
    }

    .nav-logo {
      flex: none;
      z-index: 51;
    }

    .nav-logo img {
      height: 84px;
      width: auto;
    }

    .nav-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 18px;
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .nav-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 14px;
      border-radius: var(--radius);
      background: #fff;
      color: var(--gum-tree-green);
      font-weight: 700;
      font-size: 16px;
      transition: filter 0.2s, box-shadow 0.2s;
    }

    .nav-pill.waitlist {
      background: var(--wattle);
      color: var(--gum-tree-green);
      /* Match the yellow buttons: nudge the Sarabun label up to optical centre */
      padding-left: 18px;
      padding-right: 18px;
      padding-bottom: 4px;
    }

    .nav-pill:hover {
      filter: brightness(.97);
    }

    .nav-pill img {
      width: 20px;
      height: 20px;
      flex: none;
    }

    /* Find-a-centre search field sits beside the waitlist button */
    .nav-search {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 14px;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid rgba(61, 94, 70, .3);
      transition: border-color 0.2s;
    }

    .nav-search:hover {
      border-color: rgba(61, 94, 70, .5);
    }

    .nav-search input {
      flex: 1;
      width: 150px;
      border: none;
      outline: none;
      background: transparent;
      font-family: 'Sarabun', sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: var(--gum-tree-green);
    }

    .nav-search input::placeholder {
      color: var(--gum-tree-green);
      opacity: .6;
    }

    .nav-search img {
      width: 20px;
      height: 20px;
      flex: none;
      opacity: .8;
    }

    /* Match the form fields' active state: green border + soft glow */
    .nav-search:focus-within {
      border-color: var(--leaf-green);
      box-shadow: 0 0 0 3px rgba(121, 161, 111, .25);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: var(--space-8);
      flex-wrap: nowrap;
    }

    .nav-links a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--gum-tree-green);
      font-weight: 700;
      font-size: 18px;
      padding: 4px 2px;
      border-radius: var(--radius);
      transition: color 0.2s;
    }

    .nav-links a:hover,
    .nav-links a[aria-current="page"] {
      color: var(--leaf-text);
    }

    .nav-links img {
      width: 20px;
      height: 20px;
      flex: none;
    }

    /* Nav dropdowns — open on hover/focus on desktop, tap-to-expand accordions on mobile (CSS-only, no JS) */
    .dropdown {
      position: relative;
      display: flex;
      align-items: center;
    }

    /* Hidden checkbox drives the mobile accordion state; ignored on desktop where hover/focus rules take over */
    .dropdown-toggle-cb {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .dropdown-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--gum-tree-green);
      font-family: 'Sarabun', sans-serif;
      font-weight: 700;
      font-size: 18px;
      padding: 4px 2px;
      border-radius: var(--radius);
      background: none;
      border: none;
      cursor: pointer;
      transition: color 0.2s;
    }

    .dropdown-toggle img {
      width: 20px;
      height: 20px;
      flex: none;
      transition: transform 0.2s ease;
    }

    .dropdown-toggle:hover {
      color: var(--leaf-text);
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 240px;
      background: #fff;
      box-shadow: var(--shadow-md);
      border-radius: var(--radius-lg);
      padding: 12px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.2s ease;
      z-index: 100;
      display: flex;
      flex-direction: column;
    }

    .dropdown-menu a {
      padding: 8px 20px;
      font-size: 16px;
      color: var(--gum-tree-green);
      width: 100%;
    }

    .dropdown-menu a:hover {
      background: var(--light-green);
      color: var(--leaf-text);
    }

    @media (min-width: 1151px) {

      .dropdown:hover .dropdown-menu,
      .dropdown:focus-within .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .dropdown:hover .dropdown-toggle img,
      .dropdown:focus-within .dropdown-toggle img {
        transform: rotate(180deg);
      }
    }

    /* Mobile control cluster (phone + burger) shown once the top bar is hidden */
    .mobile-nav-controls {
      display: none;
      align-items: center;
      gap: 12px;
      z-index: 51;
    }

    .mobile-icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: transparent;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      color: var(--gum-tree-green);
    }

    .mobile-icon-btn:hover {
      background: var(--bark-brown);
    }

    .mobile-icon-btn svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
    }

    /* LEVNT Education link mapped into the drawer for mobile ONLY */
    .mobile-utility-links {
      display: none;
    }

    /* CSS-only burger */
    .nav-burger-cb {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .nav-burger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      width: 48px;
      height: 48px;
      padding: 12px;
      cursor: pointer;
      border-radius: var(--radius);
      border: none;
      background: transparent;
      flex: none;
      z-index: 51;
    }

    .nav-burger span {
      display: block;
      height: 2px;
      width: 100%;
      background: var(--gum-tree-green);
      border-radius: 2px;
      transition: transform 0.3s ease, background-color 0.2s ease;
      transform-origin: center;
    }

    /* ---------- Hero ---------- */
    .hero {
      background: var(--gum-tree-green);
      padding: 0 var(--page-pad);
      overflow: clip;
    }

    .hero-inner {
      max-width: var(--container);
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: var(--space-8);
    }

    .hero-content {
      width: 499px;
      max-width: 100%;
      flex: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
      padding: var(--section-y) 0;
    }

    .hero-content .h1 {
      color: #fff;
    }

    /* "flourish" set in italic Crimson Pro for a soft, script-like accent in wattle */
    .hero-content .h1 .flourish {
      font-family: 'Crimson Pro', Georgia, serif;
      font-style: italic;
      font-weight: 600;
      color: var(--wattle);
    }

    .hero-content .lead {
      color: var(--bark-light);
      font-weight: 500;
      font-size: 24px;
      line-height: 1.3;
      max-width: 488px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-6);
    }

    .hero-img {
      flex: 1;
      align-self: stretch;
      position: relative;
      min-height: 560px;
      margin-right: calc((100% - 100vw) / 2);
    }

    .hero-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center right;
    }

    /* Desktop only: organic clip mask on the hero image. The clipPath uses
       objectBoundingBox units so the shape scales with the image box. Switch
       to cover so the square image fills the clipped silhouette. */
    @media (min-width: 1081px) {
      .hero-img img {
        object-fit: cover;
        object-position: center;
        clip-path: url(#hero-clip);
      }
    }

    /* ---------- Steps ---------- */
    .steps {
      background: var(--gum-tree-green);
      padding: 20px var(--page-pad) 60px;
      display: flex;
      justify-content: center;
    }

    .steps-inner {
      max-width: var(--container);
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      align-items: center;
    }

    .steps .h2 {
      color: var(--bark-light);
      text-align: center;
    }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-12);
      width: 100%;
    }

    .step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-5);
      padding-top: var(--space-8);
      text-align: center;
    }

    .step .icon {
      height: 184px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step .icon img {
      height: 184px;
      width: auto;
    }

    .step .num {
      font-family: 'Sarabun', sans-serif;
      font-weight: 700;
      font-size: 24px;
      color: var(--wattle);
    }

    .step .title {
      color: var(--light-green);
      margin-top: var(--space-2);
    }

    .step .sub {
      color: var(--light-green);
      font-size: 20px;
      line-height: 1.3;
      margin-top: var(--space-3);
    }

    /* ---------- Find a centre ---------- */
    .find {
      background: var(--leaf-green);
      padding: var(--section-y) var(--page-pad);
      display: flex;
      justify-content: center;
    }

    .find-inner {
      max-width: var(--container);
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-10);
      align-items: center;
    }

    .find .h2 {
      color: #fff;
      text-align: center;
      max-width: 900px;
    }

    .find-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(20px, 3vw, 44px);
      width: 100%;
      align-items: stretch;
    }

    .find-panel {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    /* Map stretches to match the height of the panel beside it */
    .find-photo {
      min-height: 320px;
      background: var(--bark-light);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .find-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .search-input {
      background: #fff;
      border: 1px solid var(--gum-tree-green);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: 8px 12px;
      min-height: 55px;
    }

    .search-input:focus-within {
      border-color: var(--gum-tree-green);
      box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--leaf-green);
    }

    .search-input input {
      flex: 1;
      border: none;
      outline: none;
      font-family: 'Sarabun', sans-serif;
      font-size: 16px;
      color: var(--leaf-text);
      background: transparent;
    }

    .search-input input::placeholder {
      color: var(--leaf-text);
      opacity: .85;
    }

    .search-input img {
      width: 24px;
      height: 24px;
      flex: none;
    }

    /* Results scroll internally, showing ~3 centres at a time with a peek of the next
       as a scroll affordance; padding-right keeps cards clear of the scrollbar. */
    .find-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      max-height: 424px;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-right: var(--space-2);
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .6) transparent;
    }

    .find-list::-webkit-scrollbar {
      width: 6px;
    }

    .find-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .6);
      border-radius: 999px;
    }

    /* Each centre is one tappable row — clear name → program → address hierarchy,
       with a chevron and hover/focus affordance so it reads and behaves like a link. */
    .centre {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      background: #fff;
      border-radius: var(--radius);
      padding: 16px 20px;
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .centre:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .centre-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .centre-name {
      font-family: 'Livvic', sans-serif;
      font-weight: 500;
      font-size: 22px;
      line-height: 1.15;
      letter-spacing: -0.3px;
      color: var(--gum-tree-green);
    }

    .centre-name .org {
      font-weight: 400;
      color: var(--leaf-text);
    }

    .centre-type {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--leaf-text);
    }

    .centre-address {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 16px;
      line-height: 1.35;
      color: var(--dark-green);
      opacity: .85;
    }

    .centre-address svg {
      width: 18px;
      height: 18px;
      flex: none;
      margin-top: 1px;
      color: var(--leaf-green);
    }

    .centre-arrow {
      flex: none;
      width: 24px;
      height: 24px;
      color: var(--leaf-green);
      transition: transform 0.2s ease;
    }

    .centre:hover .centre-arrow {
      transform: translateX(4px);
    }

    .find-more {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      margin-top: var(--space-2);
      padding: 4px 2px;
      color: #fff;
      font-weight: 600;
      font-size: 18px;
      border-radius: var(--radius);
    }

    .find-more svg {
      width: 22px;
      height: 22px;
      flex: none;
      transition: transform 0.2s ease;
    }

    .find-more:hover svg {
      transform: translateX(4px);
    }

    /* ---------- Why / Values ---------- */
    .why {
      background: var(--bark-light);
      padding: var(--section-y) var(--page-pad);
      display: flex;
      justify-content: center;
    }

    .why-inner {
      max-width: var(--container);
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
      align-items: center;
    }

    .why .h2 {
      color: var(--leaf-text);
      text-align: center;
      max-width: 770px;
    }

    .why-intro {
      color: var(--leaf-text);
      font-size: 20px;
      line-height: 1.3;
      text-align: center;
      max-width: 711px;
    }

    .values {
      width: 100%;
      max-width: 880px;
      margin: var(--space-4) auto 0;
      display: flex;
      flex-direction: column;
    }

    .wave {
      height: 14px;
      width: 100%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7 Q12 -1 24 7 T48 7' fill='none' stroke='%2379A16F' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: repeat-x;
      background-position: center;
    }

    .value {
      display: flex;
      align-items: center;
      gap: var(--space-8);
      padding: 30px 0;
    }

    .value .icon {
      width: 220px;
      height: 220px;
      flex: none;
    }

    .value .icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .value-text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    /* Value name is the display element; the description drops to readable body
       copy — a real size/weight/typeface step instead of one big thin paragraph. */
    .value-name {
      font-family: 'Livvic', sans-serif;
      font-weight: 500;
      font-size: clamp(30px, 3.4vw, 44px);
      line-height: 1.05;
      letter-spacing: -0.5px;
      color: var(--leaf-text);
    }

    .value-desc {
      font-family: 'Sarabun', sans-serif;
      font-weight: 400;
      font-size: clamp(18px, 1.5vw, 21px);
      line-height: 1.45;
      color: var(--dark-green);
      max-width: 52ch;
    }

    /* ---------- Ecosystem ---------- */
    .eco {
      background: var(--lutheran-blue);
      padding: 0 var(--page-pad);
      overflow: clip;
    }

    /* Inner track is capped to the page container and centred. A simple 50/50 split:
       the text column sits in the right half (aligned to the container edge) while the
       photo fills the left half and bleeds off the viewport edge — mirroring the hero. */
    .eco-inner {
      max-width: var(--container);
      margin: 0 auto;
      display: flex;
      align-items: stretch;
      gap: var(--space-8);
    }

    .eco-photo {
      flex: 1;
      background: #d9d9d9;
      display: flex;
      align-items: center;
      justify-content: center;
      /* bleed the panel out to the left viewport edge */
      margin-left: calc((100% - 100vw) / 2);
    }

    .eco-photo img {
      width: 33%;
      max-width: 198px;
      height: auto;
    }

    .eco-content {
      flex: none;
      width: 50%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--space-5);
      padding: var(--section-y) 0;
    }

    .eco-content .h2 {
      color: #fff;
    }

    .eco-content .sub {
      font-family: 'Livvic', sans-serif;
      font-weight: 400;
      font-size: clamp(24px, 2.6vw, 32px);
      line-height: 1.15;
      letter-spacing: -0.5px;
      color: var(--wattle);
    }

    .eco-content .desc {
      color: #fff;
      font-size: 20px;
      line-height: 1.4;
      opacity: .92;
      max-width: 46ch;
    }

    .eco-content .eco-cta {
      margin-top: var(--space-2);
    }

    /* ---------- Safety ---------- */
    .safety {
      background: var(--gum-tree-green);
      padding: var(--section-y) var(--page-pad);
      display: flex;
      justify-content: center;
    }

    .safety-inner {
      max-width: var(--container);
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      align-items: center;
    }

    .safety .h2 {
      color: var(--bark-light);
      text-align: center;
    }

    .safety-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-12);
      width: 100%;
    }

    .safety-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      padding-top: var(--space-8);
      text-align: center;
    }

    .safety-col .icon {
      width: 220px;
      height: 213px;
    }

    .safety-col .icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .safety-col .title {
      color: var(--bark-light);
      max-width: 289px;
    }

    /* ---------- Testimonials ---------- */
    .testi {
      background: var(--bark-light);
      padding: var(--section-y) var(--page-pad);
      display: flex;
      justify-content: center;
    }

    .testi-inner {
      max-width: var(--container);
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-10);
      align-items: center;
    }

    .testi-row {
      display: flex;
      justify-content: center;
      width: 100%;
      max-width: 820px;
    }

    .quote {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-8);
      padding: 0 var(--space-8);
      text-align: center;
    }

    .quote .text {
      font-family: 'Sarabun', sans-serif;
      font-style: italic;
      font-size: clamp(24px, 2.6vw, 32px);
      line-height: 1.4;
      color: var(--dark-green);
    }

    .quote .name {
      font-weight: 700;
      font-size: 18px;
      color: var(--dark-green);
    }

    .quote .role {
      font-size: 20px;
      line-height: 1.3;
      color: var(--dark-green);
    }

    .testi-controls {
      display: flex;
      align-items: center;
      gap: var(--space-6);
    }

    .slider-arrow {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--gum-tree-green);
      color: var(--gum-tree-green);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: filter 0.2s;
    }

    .slider-arrow:hover {
      filter: brightness(.95);
    }

    .slider-arrow img,
    .slider-arrow svg {
      width: 24px;
      height: 24px;
    }

    .slider-arrow.prev img,
    .slider-arrow.prev svg {
      transform: scaleX(-1);
    }

    .dots {
      display: flex;
      gap: 10px;
    }

    .dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--bark-brown);
    }

    .dots span.active {
      background: var(--gum-tree-green);
    }

    /* ---------- Book a tour / Info pack ---------- */
    .cta-band {
      padding: 60px var(--page-pad);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
    }

    .cta-band.tour {
      background: var(--gum-mid-green);
      gap: var(--space-6);
    }

    .cta-band .tour-icon {
      height: 184px;
      width: auto;
      flex: none;
    }

    .cta-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
      text-align: left;
      max-width: 762px;
    }

    .cta-content .h2 {
      color: var(--bark-light);
    }

    .cta-content .sub {
      color: var(--bark-light);
      font-size: 20px;
      line-height: 1.3;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: var(--space-6);
      margin-top: var(--space-4);
    }

    /* ---------- Footer ---------- */
    .footer {
      background: var(--bark-light);
      padding: 60px var(--page-pad);
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
      align-items: center;
    }

    .footer>* {
      width: 100%;
      max-width: var(--container);
    }

    .footer-logos {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-8);
      flex-wrap: wrap;
    }

    .footer-logos .ec img {
      height: 100px;
      width: auto;
    }

    .footer-logos .others {
      display: flex;
      align-items: center;
      gap: var(--space-8);
      flex-wrap: wrap;
    }

    .footer-logos .others img {
      height: 84px;
      width: auto;
      mix-blend-mode: multiply;
    }

    .footer-main {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-10);
      flex-wrap: wrap;
    }

    .foot-contact {
      width: 227px;
      flex: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
    }

    .foot-contact .head {
      font-weight: 700;
      font-size: 1rem;
      color: var(--dark-green);
      margin-bottom: var(--space-1);
    }

    .foot-contact .lines {
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: var(--dark-green);
      font-size: 1rem;
      line-height: 1.3;
    }

    .foot-social {
      display: flex;
      gap: var(--space-3);
    }

    .foot-social a {
      display: inline-flex;
      padding: 6px;
      border-radius: var(--radius);
    }

    .foot-social a:hover {
      background: var(--bark-brown);
    }

    /* Icons are recoloured to the brand green via CSS mask (the source SVGs
       carry their own fill, which an <img> can't inherit). */
    .foot-social .ic {
      width: 24px;
      height: 24px;
      flex: none;
      background-color: var(--dark-green);
      -webkit-mask: var(--icon) center / contain no-repeat;
      mask: var(--icon) center / contain no-repeat;
    }

    .foot-links {
      display: flex;
      gap: var(--space-8);
      flex-wrap: wrap;
    }

    .foot-links .list {
      display: flex;
      flex-direction: column;
    }

    .foot-links a {
      padding: 8px 0;
      color: var(--dark-green);
      font-weight: 700;
      font-size: 1rem;
    }

    .foot-links a:hover {
      color: var(--leaf-text);
    }

    .foot-ack {
      width: 339px;
      flex: none;
      color: var(--dark-green);
    }

    .foot-ack .head {
      font-weight: 700;
      font-size: 1rem;
    }

    .foot-ack p {
      font-size: 1rem;
      line-height: 1.3;
      font-weight: 400;
      margin-top: var(--space-3);
    }

    .footer-credits {
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
    }

    .footer-credits .divider {
      height: 1px;
      background: var(--dark-green);
      opacity: .25;
    }

    .credits-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-6);
      flex-wrap: wrap;
      color: var(--dark-green);
    }

    .credits-row .copy {
      font-size: 14px;
      line-height: 1.5;
    }

    .credits-links {
      display: flex;
      gap: var(--space-6);
      font-size: 14px;
      flex-wrap: wrap;
    }

    .credits-links a {
      text-decoration: underline;
    }

    .credits-links a:hover {
      color: var(--leaf-text);
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1150px) {
      .nav-top {
        display: none;
      }

      .nav-main {
        flex-wrap: wrap;
        row-gap: 0;
        padding: 8px var(--page-pad);
      }

      .nav-logo img {
        height: 60px;
      }

      .mobile-nav-controls {
        display: flex;
      }

      /* LEVNT Education utility link revealed inside the drawer — full-width band
         (breaks out of the drawer padding) with a blue accent tint that signals
         the sibling education brand, echoing the team page */
      .mobile-utility-links {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: var(--light-light-blue);
        padding: var(--space-4) var(--page-pad);
        margin: calc(-1 * var(--space-4)) calc(-1 * var(--page-pad)) var(--space-4);
        border-top: 1px solid rgba(0, 69, 128, .12);
        border-bottom: 1px solid rgba(0, 69, 128, .12);
      }

      /* mobile drawer — fills the viewport below the header, scrolls internally if the menu is tall */
      .nav-right {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: calc(100vh - 84px);
        height: calc(100dvh - 84px);
        overflow-y: auto;
        background: var(--bark-light);
        align-items: stretch;
        gap: 0;
        padding: var(--space-4) var(--page-pad) var(--space-8);
        box-shadow: 0 12px 24px rgba(41, 50, 3, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
      }

      .nav-burger-cb:checked+.nav-main .nav-right {
        opacity: 1;
        visibility: visible;
        transform: none;
      }

      .nav-burger-cb:checked+.nav-main .nav-burger span:first-child {
        transform: translateY(4px) rotate(45deg);
        background: var(--leaf-text);
      }

      .nav-burger-cb:checked+.nav-main .nav-burger span:last-child {
        transform: translateY(-4px) rotate(-45deg);
        background: var(--leaf-text);
      }

      .nav-cta {
        justify-content: stretch;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
      }

      /* Match the drawer links: full-width, taller tap target and 18px text.
         The button label centres (no icon to balance it against). */
      .nav-pill {
        justify-content: center;
        width: 100%;
        min-height: 51px;
        font-size: 18px;
      }

      .nav-search {
        width: 100%;
        justify-content: space-between;
        min-height: 51px;
      }

      .nav-search input {
        width: auto;
        font-size: 18px;
      }

      /* Break the links out to the full drawer width so the divider lines run
         edge to edge; the page-pad padding moves onto each link to keep the
         text aligned with the rest of the drawer content. */
      .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid rgba(41, 50, 3, .1);
        margin-top: var(--space-4);
        margin-left: calc(-1 * var(--page-pad));
        margin-right: calc(-1 * var(--page-pad));
      }

      .nav-links>a,
      .dropdown-toggle {
        width: 100%;
        padding: 18px var(--page-pad);
        border-bottom: 1px solid rgba(41, 50, 3, .08);
        font-size: 18px;
        font-weight: 700;
        justify-content: space-between;
      }

      /* Hover wash on the drawer rows — a pale green tint (the same one the
         nested submenu uses) alongside the leaf-green text shift from the base
         :hover rules; mirrors home.html's tinted drawer-link hover */
      .nav-links>a:hover,
      .dropdown-toggle:hover {
        background: var(--light-green);
      }

      /* Dropdowns become full-width accordions inside the drawer */
      .dropdown {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
      }

      .dropdown-menu {
        position: static;
        min-width: 0;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        background: var(--light-green);
        padding: 0;
      }

      .dropdown-toggle-cb:checked~.dropdown-menu {
        display: flex;
      }

      .dropdown-toggle-cb:checked~.dropdown-toggle img {
        transform: rotate(180deg);
      }

      .dropdown-menu a {
        padding: 14px var(--page-pad) 14px calc(var(--page-pad) + 20px);
        border-bottom: 1px solid rgba(41, 50, 3, .06);
      }
    }

    @media (max-width: 1080px) {
      .hero-inner {
        flex-wrap: wrap;
        /* even breathing room between the hero copy and the full-width image */
        gap: var(--section-y);
      }

      .hero {
        /* image goes full-bleed on the sides; matching space below before the steps */
        padding: 0 0 var(--section-y);
      }

      .hero-content {
        width: 100%;
        padding-left: var(--page-pad);
        padding-right: var(--page-pad);
        padding-bottom: 0;
      }

      .hero-img {
        width: 100%;
        flex: 0 0 100%;
        min-height: 0;
        /* match the photo's own ratio so it fills the full width with no letterboxing */
        aspect-ratio: 868 / 670;
        margin-right: 0;
      }

      .hero-img img {
        object-position: center bottom;
      }

      .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-10);
      }

      .find-row {
        grid-template-columns: 1fr;
        gap: var(--space-10);
      }

      .eco {
        padding: 0 0 60px;
      }

      .eco-inner {
        flex-direction: column;
      }

      .eco-photo {
        width: 100%;
        max-width: 100%;
        min-height: 320px;
        padding: 60px 0;
        margin-left: 0;
        margin-right: 0;
      }

      .eco-content {
        flex: none;
        width: 100%;
        max-width: 100%;
        padding: 48px var(--page-pad) 60px;
      }
    }

    @media (max-width: 820px) {
      .value {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-5);
      }

      .value-text {
        align-items: center;
      }

      .value-desc {
        max-width: 60ch;
      }

      .safety-grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
      }

      .testi-row {
        grid-template-columns: 1fr;
        gap: var(--space-12);
      }

      .cta-band.tour {
        flex-direction: column;
        text-align: center;
      }

      .cta-content {
        align-items: center;
        text-align: center;
      }

      .cta-actions {
        justify-content: center;
      }
    }

    @media (max-width: 560px) {
      .steps-grid {
        grid-template-columns: 1fr;
      }

      .footer-logos {
        justify-content: center;
      }
    }

    /* On the narrowest phones the logo + controls run out of room and the nav
       wraps to two lines; drop the phone icon so it stays a single row. */
    @media (max-width: 420px) {
      .mobile-nav-controls .mobile-icon-btn {
        display: none;
      }
    }

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

      .nav-right,
      .nav-burger span,
      .centre,
      .centre-arrow,
      .find-more svg {
        transition: none;
      }

      .centre:hover {
        transform: none;
      }

      .centre:hover .centre-arrow,
      .find-more:hover svg {
        transform: none;
      }
    }