/* Generated verbatim from html/ecs/good-shepherd.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);
    }

    /* Centre wordmark sits below the hero copy — the logo art is off-white, reading
       cleanly on the green hero. Capped so it stays a supporting mark, not a headline. */
    .hero-logo {
      width: 340px;
      max-width: 100%;
      height: auto;
      margin-top: var(--space-2);
    }

    .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: right top;
    }

    /* 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: right top;
        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);
    }

    /* ---------- Location info (centre template) ---------- */
    /* Reuses the steps band, but each column is a left-aligned info block —
       address, tour, vacancies and contact — instead of a numbered step. */
    .info-section {
      padding-top: var(--section-y);
    }

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

    .info-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
      text-align: left;
    }

    .info-col .icon {
      height: 150px;
      display: flex;
      align-items: center;
      margin-bottom: var(--space-1);
    }

    .info-col .icon img {
      height: 150px;
      width: auto;
    }

    .info-col .title {
      color: var(--bark-light);
    }

    .info-text {
      color: var(--light-green);
      font-size: 18px;
      line-height: 1.4;
    }

    /* The card CTAs are yellow text links; nudge them a touch below the copy */
    .info-col .link-yellow {
      font-size: 18px;
      margin-top: var(--space-1);
    }

    .info-col .link-yellow svg {
      width: 20px;
      height: 20px;
    }

    /* Contact: icon + value rows, muted parenthetical for the family qualifier */
    .contact-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      width: 100%;
    }

    .contact-row {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      color: var(--light-green);
      font-size: 18px;
      line-height: 1.35;
    }

    .contact-row svg {
      width: 22px;
      height: 22px;
      flex: none;
      color: var(--wattle);
      margin-top: 1px;
    }

    .contact-row.email .contact-phone-icon,
    .contact-row.phone .contact-email-icon {
      display: none;
    }

    .contact-row a {
      color: var(--light-green);
      word-break: break-word;
      transition: color 0.2s;
    }

    .contact-row a:hover {
      color: var(--wattle);
    }

    .contact-row .muted {
      color: var(--light-green);
      opacity: .65;
      font-size: 15px;
    }

    @media (max-width: 1080px) {
      .info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-10);
      }
    }

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

    /* ---------- Gallery (Swiper) ---------- */
    /* Full-bleed band: the section spans the viewport while the heading/controls
       stay capped to the container. Slides show the "watch slides visibility"
       demo behaviour — off-screen slides dim until they scroll into view. */
    .gallery {
      background: var(--leaf-green);
      padding: var(--section-y) 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-10);
      align-items: center;
      overflow: clip;
    }

    .gallery .h2 {
      color: #fff;
      text-align: center;
      max-width: 900px;
      padding: 0 var(--page-pad);
    }

    /* The Swiper track itself runs full width */
    .gallery-swiper {
      width: 100%;
      padding: 0 var(--page-pad);
    }

    .gallery-swiper .swiper-slide {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      /* dim slides that aren't (fully) visible, per the watch-visibility demo */
      opacity: .35;
      transition: opacity 0.35s ease;
    }

    .gallery-swiper .swiper-slide-visible {
      opacity: 1;
    }

    .gallery-swiper .swiper-slide img {
      display: block;
      width: 100%;
      height: 420px;
      object-fit: cover;
    }

    /* Recolour Swiper's default arrows + pagination to the brand palette */
    .gallery-swiper {
      --swiper-theme-color: #fff;
      --swiper-navigation-size: 28px;
      --swiper-pagination-bullet-inactive-color: #fff;
      --swiper-pagination-bullet-inactive-opacity: .5;
    }

    /* Pagination sits below the images (not overlaid); active dot is the wattle yellow */
    .gallery-pagination {
      position: static;
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 0;
    }

    .gallery-pagination .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      background: #fff;
      opacity: .5;
      transition: opacity 0.2s, background-color 0.2s;
    }

    .gallery-pagination .swiper-pagination-bullet-active {
      background: var(--wattle);
      opacity: 1;
    }

    @media (max-width: 820px) {
      .gallery-swiper .swiper-slide img {
        height: 300px;
      }
    }

    /* ---------- 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;
        /* the source photo is portrait — crop it to a full-width 3:2 band on mobile */
        aspect-ratio: 3 / 2;
        margin-right: 0;
      }

      .hero-img img {
        /* fill the full-width band (cover), holding the top-right of the frame */
        object-fit: cover;
        object-position: right top;
      }

      .steps-grid {
        grid-template-columns: repeat(2, 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,
      .gallery-swiper .swiper-slide {
        transition: none;
      }
    }