/*! AgroPlus+ — site styles (custom.css, shared by about / home) */

@font-face {
  font-family: "FuturaLT-Bold";
  src: url("../fonts/FuturaLT-Bold.eot");
  src: url("../fonts/FuturaLT-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/FuturaLT-Bold.woff2") format("woff2"),
    url("../fonts/FuturaLT-Bold.woff") format("woff"),
    url("../fonts/FuturaLT-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FuturaLT-Book";
  src: url("../fonts/FuturaLT-Book.eot");
  src: url("../fonts/FuturaLT-Book.eot?#iefix") format("embedded-opentype"),
    url("../fonts/FuturaLT-Book.woff2") format("woff2"),
    url("../fonts/FuturaLT-Book.woff") format("woff"),
    url("../fonts/FuturaLT-Book.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HelveticaNeueLTStd-MdCn.";
  src: url("../fonts/HelveticaNeueLTStd-MdCn.eot");
  src: url("../fonts/HelveticaNeueLTStd-MdCn.eot?#iefix") format("embedded-opentype"),
    url("../fonts/HelveticaNeueLTStd-MdCn.woff2") format("woff2"),
    url("../fonts/HelveticaNeueLTStd-MdCn.woff") format("woff"),
    url("../fonts/HelveticaNeueLTStd-MdCn.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}




@font-face {
  font-family: "ChunkFive-Regular";
  src: url("../fonts/ChunkFive-Regular.eot");
  src: url("../fonts/ChunkFive-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/ChunkFive-Regular.woff2") format("woff2"),
    url("../fonts/ChunkFive-Regular.woff") format("woff"),
    url("../fonts/ChunkFive-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #2d9a3a;
  --green-dark: #0d2818;
  --green-forest: #0a1f10;
  --green-accent: #b8c800;
  --lime: #c4d600;
  --header-dark: #0d2818;
  --text: #1a1a1a;
  --text-black: #000000;
  --light: #f0f2ef;
  --section-alt: #f9f9f9;
  --mission-bg: #f0f0f0;
  --values-kicker: #b5d633;
  /* Split sections — match your comps (cool grey, forest heading, lime arrow line) */
  --heading-green: #004020;
  --read-more: #004020;
  --read-more-line: #004020;
  --section-panel-bg: #E1E5E4;
  --white: #fff;
  /* In-flow header vs hero: pull hero up for full-bleed under sticky bar */
  --header-overlap: clamp(4.5rem, 10vw, 6.5rem);
  /* Typography — local @font-face only (Futura, Helvetica Md Cn, Myriad) */
  --font-futura-book: "FuturaLT-Book", system-ui, sans-serif;
  --font-futura-bold: "FuturaLT-Bold", system-ui, sans-serif;
  --font-helvetica-mdcn: "HelveticaNeueLTStd-MdCn.", system-ui, sans-serif;
  --font-myriad: "FuturaLT-Book", system-ui, sans-serif;
  /* Surfaces & on-dark text (footer: one surface — layout3 / agro-layout-c) */
  --footer-bg: #0c1f15;
  --footer-kicker: #c4d600;
  --footer-text: rgba(255, 255, 255, 0.9);
  --footer-muted: rgba(255, 255, 255, 0.52);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #fff;
}

body {
  margin: 0;
  font-family: var(--font-myriad);
  color: var(--text);
  line-height: 1.55;
  background: var(--section-panel-bg);
}

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

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.section {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.textshadow {
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.8);
}

/* ── Header — linear gradient overlay, fixed over hero ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  width: 100%;
  box-sizing: border-box;
  padding: 1.25rem 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
  font-family: var(--font-futura-book);
  transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}

/* Solid background once user scrolls past the hero */
.site-header.site-header--scrolled {
  background: #004020;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  padding: 0.75rem 0;
}

/* ── Inner pages (no hero banner) — solid sticky header like single product ── */
.single-ap_product .site-header,
.ap-inner-page .site-header {
  position: sticky;
  top: 0;
  background: #004020;
}

/* Keep background solid on scroll (no transparency change needed) */
.single-ap_product .site-header.site-header--scrolled,
.ap-inner-page .site-header.site-header--scrolled {
  background: #004020;
}

/* 3-col grid: logo left | nav centred | (future) cta right */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 3rem;
}

/* Logo — column 1 */
.site-header__bar {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 0.5rem;
}

.site-header .logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  flex-shrink: 0;
}

.site-header .logo img,
.site-header .logo__img {
  display: block;
  height: clamp(2rem, 3.4vw, 2.8rem);
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* Nav — column 2, perfectly centred */
.site-header .nav-wrap {
  grid-column: 2;
}

/* Mobile menu toggle (hidden on large screens) */
.site-header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  /* anchor for absolutely-placed icons */
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: #004020;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  /* clip icon rotation inside the circle */
}

.site-header__menu-btn:hover,
.site-header__menu-btn:focus-visible {
  background: #f0f4f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  outline: none;
}

/* Both icons sit centred inside the circle via absolute positioning */
.site-header__icon-bars,
.site-header__icon-close {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bars: visible by default, rotates away on open */
.site-header__icon-bars {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.site-header--nav-open .site-header__icon-bars {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
}

/* X mark: hidden by default, rotates in on open */
.site-header__icon-close {
  opacity: 0;
  font-size: 1.15rem;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.4);
}

.site-header--nav-open .site-header__icon-close {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.nav-primary {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 clamp(1.5rem, 2.5vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.03em;
}

.nav-primary li {
  position: relative;
  /* anchor for the ::before dot */
}

.nav-primary a {
  position: relative;
  color: var(--white);
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: color 0.3s ease;
}

/* ── Effect 13 — three dots ── */
.nav-primary a::before {
  position: absolute;
  top: 100%;
  left: 50%;
  color: transparent;
  content: '•';
  text-shadow: 0 0 transparent;
  font-size: 1.2em;
  line-height: 1.5;
  pointer-events: none;
  transform: translateX(-50%);
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

.nav-primary a:hover::before,
.nav-primary a:focus::before {
  color: #fff;
  text-shadow: 10px 0 #fff, -10px 0 #fff;
}

.nav-primary a:hover,
.nav-primary a:focus {
  color: var(--lime);
  opacity: 1;
  text-decoration: none;
}

/* Active / current page */
.nav-primary .current-menu-item>a,
.nav-primary .current_page_item>a,
.nav-primary .current-menu-ancestor>a,
.nav-primary .current-menu-parent>a {
  color: var(--lime);
  opacity: 1;
}

.nav-primary .current-menu-item>a::before,
.nav-primary .current_page_item>a::before,
.nav-primary .current-menu-ancestor>a::before,
.nav-primary .current-menu-parent>a::before {
  color: #fff;
  text-shadow: 10px 0 #fff, -10px 0 #fff;
}


@media (max-width: 60rem) {

  .site-header {
    padding: 0.9rem 0;
  }

  .site-header>.container {
    padding-left: max(0.9rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.9rem, env(safe-area-inset-right, 0px));
  }

  /* On mobile collapse back to logo + hamburger row */
  .site-header__inner {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Bar stretches full width so the button can be pushed to the far right */
  .site-header__bar {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .site-header__menu-btn {
    display: flex;
    margin-left: auto;
  }

  .nav-wrap {
    display: none;
  }

  .nav-wrap.nav-wrap--open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #004020;
    padding: 1rem 1.25rem 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 199;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    animation: navDropIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  /* Reverse animation triggered by JS before class removal */
  .nav-wrap.nav-wrap--closing {
    animation: navDropOut 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  .nav-wrap.nav-wrap--open .nav-primary {
    flex-direction: column;
    gap: 0;
  }

  .nav-wrap.nav-wrap--open .nav-primary li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .nav-wrap.nav-wrap--open .nav-primary li a {
    display: block;
    padding: 0.85rem 0;
  }

  /* Disable the three-dot effect inside the mobile dropdown */
  .nav-wrap.nav-wrap--open .nav-primary a::before {
    display: none;
  }

  .nav-wrap.nav-wrap--open .nav-primary a:hover,
  .nav-wrap.nav-wrap--open .nav-primary a:focus {
    color: var(--lime);
  }

  .nav-wrap.nav-wrap--open .nav-primary .current-menu-item>a,
  .nav-wrap.nav-wrap--open .nav-primary .current_page_item>a,
  .nav-wrap.nav-wrap--open .nav-primary .current-menu-ancestor>a,
  .nav-wrap.nav-wrap--open .nav-primary .current-menu-parent>a {
    color: var(--lime);
    font-weight: 600;
  }

  @keyframes navDropIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes navDropOut {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-10px);
    }
  }
}


/* Hero — fills full viewport; fixed header floats above it */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  margin-top: 0;
  padding: clamp(7rem, 14vh, 9rem) clamp(1.25rem, 4vw, 2.5rem) 3rem;
  color: var(--white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.32) 50%, rgba(0, 0, 0, 0.12) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
}

.intro__text {
  margin: 0 auto;
  text-align: left;
  font-size: 2rem;
  font-weight: 400;
  color: var(--text-black);
  line-height: 1.5;
  font-family: var(--font-futura-book);
}

.section--split {
  background: var(--section-panel-bg);
}

.section--split {
  overflow: visible;
}

.split {
  display: grid;
  align-items: stretch;
  min-height: clamp(22rem, 40vh, 34rem);
  column-gap: 0;
}

.split--text-left {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2.5fr);
}

.split--media-left {
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 2fr);
  column-gap: 0;
}

/* Our story: same column ratio as text-left (2fr / 2.5fr), overlap via margin + z-index */
.split--overlap.split--text-left {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2.5fr);
}


.split--overlap .split__media {
  z-index: 1;
}

.split--overlap .split__text-panel {
  padding: clamp(2rem, 3.2vw, 2.85rem) clamp(1.75rem, 2.5vw, 2.4rem);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
}

.split__media {
  position: relative;
  min-height: 600px;
  align-self: stretch;
  overflow: hidden;
}

.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.6s ease;
}

@media (hover: hover) and (pointer: fine) {
  .section--split .split__media:hover img {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .split__media img {
    transition: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .section--split .split__media:hover img {
      transform: scale(1);
    }
  }
}

.split__text {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  min-height: 0;
  height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 1.5rem) clamp(1.5rem, 2.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem);
}

/* Grey column: flush to image. Large 9rem column gutter only 75.01rem+ (see @media) */
.split--text-left .split__text {
  padding-right: 0;
}

.split--media-left .split__text {
  padding-left: 0;
}

.split__text-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 100%;
  background: var(--white);
  padding: clamp(1.65rem, 2.2vw, 2.15rem) clamp(1.4rem, 1.8vw, 1.9rem);
  font-family: var(--font-futura-bold);
}

.split__text h2 {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.35rem, 2.3vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--heading-green);
  margin: 0 0 1rem;
  line-height: 1;
}

.split__text p {
  margin: 0 0 0.9rem;
  color: var(--text);
  font-size: 1.375rem;
  line-height: 1.46;
  font-family: var(--font-futura-book);
}

.split__text p:last-of-type {
  margin-bottom: 0;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-futura-bold);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--read-more);
}

.read-more:hover {
  color: var(--read-more);
  text-decoration: none;
}

button.read-more {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

/* About — Our Story: expand text panel, compress image */
#our-story .split--expandable {
  --story-expand-duration: 0.8s;
  --story-expand-ease: cubic-bezier(0.33, 0, 0.2, 1);
}

@media (min-width: 52.01rem) {
  #our-story.section--split .split--expandable.split--overlap.split--text-left {
    grid-template-columns: minmax(0, 2fr) minmax(0, 2.5fr);
    transition: grid-template-columns var(--story-expand-duration) var(--story-expand-ease);
  }

  #our-story.section--split .split--expandable.split--overlap.split--text-left.is-expanded {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }

  #our-story .split--expandable .split__text-panel {
    transition: box-shadow var(--story-expand-duration) var(--story-expand-ease);
  }

  #our-story .split--expandable.is-expanded .split__text-panel {
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
  }

  #our-story .split--expandable .split__media img {
    transition: transform var(--story-expand-duration) var(--story-expand-ease);
  }

  #our-story .split--expandable.is-expanded .split__media img {
    transform: scale(1.03);
  }
}

#our-story .split__content-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--story-expand-duration) var(--story-expand-ease);
}

#our-story .split--expandable.is-expanded .split__content-more {
  grid-template-rows: 1fr;
}

#our-story .split__content-more-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    opacity calc(var(--story-expand-duration) * 0.85) var(--story-expand-ease) 0.08s;
}

#our-story .split--expandable.is-expanded .split__content-more-inner {
  opacity: 1;
}

#our-story .split--expandable:not(.is-expanded) .split__content-more-inner {
  transition-delay: 0s;
}

#our-story .split__content-more-inner p:first-child {
  margin-top: 0.9rem;
}

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

  #our-story .split--expandable.split--overlap.split--text-left,
  #our-story .split__content-more,
  #our-story .split--expandable .split__media img {
    transition: none;
  }
}

/* .read-more__icon is now a CSS arrow span (.craft-explore__arrow); rule kept for any legacy references */
.read-more__icon {
  flex-shrink: 0;
}

/* Large split insets: only at wide viewports; tablets / phones use comfortable symmetric padding */
@media (min-width: 75.01rem) {
  .split--text-left .split__text {
    padding-left: 9rem;
  }

  .split--media-left .split__text {
    padding-right: 9rem;
  }

  #our-story .split__text-panel,
  #our-vision .split__text-panel,
  #hp-our-vision .split__text-panel,
  #quality .split__text-panel,
  #hp-quality .split__text-panel,
  #hp-creation .split__text-panel,
  #process-s1 .split__text-panel,
  #process-s3 .split__text-panel,
  #process-s5 .split__text-panel,
  #nf-s1 .split__text-panel {
    padding-left: 10rem;
  }

  #our-mission .split__text-panel,
  #our-role .split__text-panel,
  #hp-our-role .split__text-panel,
  #process-s2 .split__text-panel,
  #process-s4 .split__text-panel,
  #nf-s2 .split__text-panel {
    padding-right: 10rem;
  }
}

/* Unset huge desktop insets below 75rem: symmetric padding only */
@media (max-width: 75rem) {

  .split--text-left .split__text,
  .split--media-left .split__text {
    padding-left: clamp(1.25rem, 4vw, 2.25rem);
    padding-right: clamp(1.25rem, 4vw, 2.25rem);
  }

  #our-story .split__text-panel,
  #our-vision .split__text-panel,
  #hp-our-vision .split__text-panel,
  #quality .split__text-panel,
  #hp-quality .split__text-panel,
  #hp-creation .split__text-panel,
  #process-s1 .split__text-panel,
  #process-s3 .split__text-panel,
  #our-mission .split__text-panel,
  #our-role .split__text-panel,
  #hp-our-role .split__text-panel,
  #process-s2 .split__text-panel,
  #process-s4 .split__text-panel,
  #process-s5 .split__text-panel,
  #nf-s1 .split__text-panel,
  #nf-s2 .split__text-panel {
    padding-left: clamp(1.25rem, 2.5vw, 1.6rem);
    padding-right: clamp(1.25rem, 2.5vw, 1.6rem);
  }
}

@media (min-width: 52.01rem) {
  .section--split .split {
    align-items: stretch;
    grid-template-rows: minmax(600px, auto);
  }

  .section--split .split__text-panel {
    justify-content: center;
  }
}


@media (max-width: 52rem) {

  .split--text-left,
  .split--media-left,
  .split--overlap.split--text-left {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .section--split .split__media {
    order: -1;
  }

  .section--split .split__text {
    order: 0;
    height: auto;
  }

  .split--overlap .split__text {
    margin-right: 0;
  }

  .section--split .split__text-panel {
    flex: none;
    min-height: 0;
  }

  .section--split .split__text-panel .read-more {
    margin-top: 1.4rem;
    padding-top: 0;
  }

  .split__media {
    min-height: min(16rem, 45vh);
  }

  .split__media img {
    position: static;
    height: auto;
    min-height: min(16rem, 45vh);
  }
}

/* Values */

.values__head {
  text-align: left;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.values__kicker {
  display: block;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-black);
  margin-bottom: 0.35rem;
  font-family: var(--font-futura-book);
}

.values__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  font-family: var(--font-futura-bold);
  text-transform: uppercase;
  color: var(--heading-green);
  margin: 0;
  letter-spacing: 0.04em;
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

@media (max-width: 64rem) {
  .values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 36rem) {
  .values__grid {
    grid-template-columns: 1fr;
  }
}

.value-card {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: visible;
  min-height: 100%;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.value-card__thumb {
  aspect-ratio: 1;
  overflow: hidden;
}

.value-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.6s ease;
}

@media (hover: hover) and (pointer: fine) {
  .value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 32, 20, 0.18);
    z-index: 1;
  }

  .value-card:hover .value-card__thumb img {
    transform: scale(1.04);
  }

  .value-card:hover .value-card__body {
    background: #ffffff;
    color: #0d160c;
  }

  .value-card:hover .value-card__name {
    color: #0d160c;
  }

  .value-card:hover .value-card__body p {
    color: #0d160c;
    opacity: 1;
  }
}

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

  .value-card,
  .value-card__thumb img {
    transition: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .value-card:hover {
      transform: none;
    }

    .value-card:hover .value-card__thumb img {
      transform: scale(1);
    }
  }
}

.value-card__body {
  flex: 1;
  background: var(--heading-green);
  color: var(--white);
  padding: 1.1rem 1rem 1.25rem;
  text-align: left;
  transition: background 0.35s ease, color 0.35s ease;
}

.value-card__name {
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.5rem;
  transition: color 0.35s ease;
}

.value-card__body p {
  margin: 0;
  font-size: clamp(0.8rem, 1vw + 0.2rem, 0.875rem);
  line-height: 1.5;
  opacity: 0.95;
  transition: color 0.35s ease, opacity 0.35s ease;
}

/* Shared brand buttons — ap-* avoids Bootstrap .btn clash */
a.ap-btn,
button.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.8rem;
  padding: 0.55rem 1.5rem;
  font-family: var(--font-futura-bold);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 0.375rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

a.ap-btn:hover,
button.ap-btn:hover,
a.ap-btn:focus-visible,
button.ap-btn:focus-visible {
  text-decoration: none;
}

.ap-btn--lime {
  background: #c4d600;
  color: #0d160c;
}

.ap-btn--lime:hover {
  color: #0d160c;
  filter: brightness(1.05);
}

.ap-btn--dark {
  background: #00331c;
  color: #fff;
}

.ap-btn--dark:hover,
.ap-btn--dark:focus-visible {
  background: #142e22;
  color: #fff;
}

/* Light section: dark bar + lime label (match live preview) */
.ap-btn--social,
a.ap-btn--social {
  background: #0d2818;
  color: #c4d600;
}

.ap-btn--social:hover,
.ap-btn--social:focus-visible,
a.ap-btn--social:hover,
a.ap-btn--social:focus-visible {
  background: #0a1a12;
  color: #d6e86a;
}

/* `a.ap-btn` beats `.ap-btn--outline` (same tag+one class, but .outline alone
   loses); use a.ap-btn--outline so the visible border wins. */
a.ap-btn--outline,
a.ap-btn--ghost-light,
button.ap-btn--outline,
button.ap-btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

a.ap-btn--outline:hover,
a.ap-btn--outline:focus-visible,
a.ap-btn--ghost-light:hover,
a.ap-btn--ghost-light:focus-visible,
button.ap-btn--outline:hover,
button.ap-btn--outline:focus-visible,
button.ap-btn--ghost-light:hover,
button.ap-btn--ghost-light:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: #fff;
}

/* Kitchen — cream, Futura H2, white Futura pill chips, gapless 4×2 grid */
.kitchen {
  color: #0d2818;
}

.kitchen__head {
  text-align: left;
  max-width: 50rem;
  margin: 0 0 clamp(1.1rem, 1.8vw, 1.35rem);
}

.kitchen__title {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.95rem, 3.1vw, 2.7rem);
  font-weight: 400;
  color: #0d2818;
  margin: 0 0 0.65rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.kitchen__lede {
  font-family: var(--font-myriad);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  margin: 0;
  max-width: 60rem;
  color: #0d2818;
  font-weight: 400;
}

/* Pills row — equal grid desktop, horizontal scroll mobile */
.kitchen__pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.65rem, 2.5vw, 1.25rem);
  width: 100%;
  margin: 0 0 clamp(1.5rem, 2.5vw, 1.9rem);
  align-items: stretch;
}

@media (max-width: 64rem) {
  .kitchen__pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .kitchen__pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    gap: 0.75rem;
    scrollbar-width: none;
  }

  .kitchen__pills::-webkit-scrollbar {
    display: none;
  }
}

.kitchen__pills .ap-btn--dark {
  font-family: var(--font-myriad);
  font-size: clamp(0.9rem, 2.1vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: 0.375rem;
  min-height: 3.25rem;
  padding: 0.6rem 0.75rem;
  width: 100%;
  min-width: 0;
  text-align: center;
  justify-content: center;
  color: #fff;
  background: #0d2818;
  border: 2px solid transparent;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-transform: uppercase;
}

@media (max-width: 48rem) {
  .kitchen__pills .ap-btn--dark {
    flex: 0 0 auto;
    min-width: 10.5rem;
    max-width: 78vw;
    scroll-snap-align: start;
  }
}

.kitchen__pills .ap-btn--dark:hover,
.kitchen__pills .ap-btn--dark:focus-visible {
  background: #142e22;
  color: #fff;
  border-color: rgba(198, 210, 204, 0.5);
  box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 2px #142e22;
}

/* Active / selected pill */
.kitchen__pills .ap-btn--dark.is-active {
  background: var(--lime, #c4d600);
  color: #0d2818;
  border-color: var(--lime, #c4d600);
  box-shadow: none;
}

/* Single switching image */
.kitchen__frame {
  margin: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
}

.kitchen__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Tagline bar — Futura bold line + lime phrase */
.band-tagline {
  background: #082816;
  padding: clamp(2.1rem, 4.5vw, 3.25rem) 0;
}

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

.band-tagline__text {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 400;
  font-family: var(--font-futura-bold);
  line-height: 1.22;
  text-transform: uppercase;
}

.band-tagline__text .band-tagline__lime-phrase {
  color: #c5d92d;
}

/* Social — cream field + forest heading (no CTA link) */
.social {
  background: #f9f8f0;
}

.social__head {
  text-align: left;
  font-family: var(--font-futura-bold);
  font-size: clamp(2rem, 1.6vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--heading-green);
  margin: 0 0 clamp(1.35rem, 2.5vw, 1.75rem);
}

.social__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

@media (max-width: 48rem) {
  .social__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 32rem) {
  .social__row {
    grid-template-columns: 1fr 1fr;
  }
}

.social__row figure {
  margin: 0;
  aspect-ratio: 9/16;
  overflow: hidden;
  border-radius: 0.9rem;
}

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

/* CTA block — dark green panel, white Futura H2, label buttons */
.section-cta {
  background: #00331c;
  color: #fff;
  text-align: center;
  padding: clamp(2.75rem, 5.5vw, 3.75rem) 1.25rem;
}

.section-cta__head {
  max-width: 60rem;
  margin: 0 auto 1.75rem;
}

/* Display headline — larger than body sections; override Bootstrap h2 */
h2.section-cta__title,
.section-cta__title {
  font-family: var(--font-futura-bold);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 400;
  margin: 0 0 0.75rem;
  line-height: 1.14;
  color: #fff;
  text-transform: uppercase;
}

.section-cta__lede {
  font-family: var(--font-myriad);
  font-size: clamp(1.02rem, 1.45vw, 1.15rem);
  margin: 0;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.section-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.1rem;
}

.section-cta__actions .ap-btn {
  min-height: 2.85rem;
  padding: 0.6rem 1.65rem;
  border-radius: 0.375rem;
  font-family: var(--font-myriad);
}

/* Site footer — one background color, label + body sizes aligned to layout comp */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-top: clamp(2.4rem, 3.5vw, 2.9rem);
  padding-bottom: 0;
}

.site-footer a {
  color: var(--footer-text);
}

.site-footer a:hover {
  color: #fff;
}

.site-footer__inner {
  display: grid;
  gap: clamp(1.5rem, 2.5vw, 2.75rem);
  padding-bottom: clamp(1.65rem, 2.5vw, 2rem);
  align-items: start;
}

.site-footer__inner--layout-auto {
  grid-template-columns: minmax(16rem, 1.35fr) repeat(calc(var(--footer-grid-cols, 4) - 1), minmax(0, 1fr));
}

.site-footer__inner--layout-equal {
  grid-template-columns: repeat(var(--footer-grid-cols, 4), minmax(0, 1fr));
}

.site-footer__inner--layout-compact {
  grid-template-columns: minmax(0, 1fr) repeat(calc(var(--footer-grid-cols, 4) - 1), minmax(0, 0.92fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 64rem) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 36rem) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

.site-footer__brand p,
.site-footer__profile {
  margin: 0.55rem 0 0;
  max-width: 20rem;
  font-family: var(--font-futura-book);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.site-footer__contact-block {
  margin-top: 0.85rem;
}

.site-footer__contact-block .site-footer__subhead {
  margin: 0 0 0.65rem;
}

.site-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 24rem;
}

.site-footer__contact-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.55rem 0 0;
}

.site-footer__contact-text {
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

a.site-footer__contact-text {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

a.site-footer__contact-text:hover {
  color: #fff;
  text-decoration: underline;
}

/* Shared circular icon buttons (contact + social) */
.site-footer__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.site-footer__icon-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  text-decoration: none;
}

.site-footer__icon-link--static {
  cursor: default;
}

.site-footer__icon-link--static:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
}

.site-footer__icon-link i {
  font-size: 0.95rem;
}

.site-footer__icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__follow .site-footer__subhead {
  margin: 0 0 0.75rem;
}

.site-footer__logo {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

.site-footer__logo img,
.site-footer__logo .logo__img {
  display: block;
  height: clamp(1.75rem, 2.6vw, 3rem);
  width: auto;
  max-width: 100%;
}

.site-footer__subhead {
  font-family: var(--font-helvetica-mdcn);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-kicker);
  margin: 0 0 0.75rem;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-futura-book);
  font-size: 0.875rem;
  line-height: 2.15;
}

.site-footer__list a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}

.site-footer__list a:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.88;
}

.site-footer__list li {
  margin-bottom: 0.4rem;
}

.site-footer__nav {
  min-width: 0;
}

.site-footer__nav-block {
  border: 0;
  background: transparent;
  color: inherit;
}

.site-footer__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.site-footer__summary::-webkit-details-marker {
  display: none;
}

.site-footer__summary .site-footer__subhead {
  margin: 0;
}

.site-footer__summary-chevron {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--footer-kicker);
  opacity: 0.9;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__nav-block[open] .site-footer__summary-chevron {
  transform: rotate(180deg);
}

@supports (interpolate-size: allow-keywords) {
  .site-footer {
    interpolate-size: allow-keywords;
  }
}

/* Smooth open/close for footer nav (Chromium, Safari 17.2+, Firefox 132+) */
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .site-footer__nav-block::details-content {
    overflow: clip;
    block-size: 0;
    transition: content-visibility 0.32s allow-discrete,
      block-size 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .site-footer__nav-block[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__summary-chevron {
    transition: none;
  }
}

@media (max-width: 48rem) {
  .site-footer__summary {
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-footer__nav .site-footer__list {
    margin-top: 0.35rem;
    padding-bottom: 0.25rem;
  }
}

@media (min-width: 48.01rem) {
  .site-footer__summary {
    display: block;
    padding: 0;
    border: 0;
    pointer-events: none;
    cursor: default;
  }

  .site-footer__summary .site-footer__subhead {
    margin: 0 0 0.55rem;
  }

  .site-footer__summary-chevron {
    display: none;
  }

  .site-footer__nav-block::details-content {
    block-size: auto;
    transition: none;
  }
}

.site-footer__bar {
  background: var(--footer-bg);
  color: var(--footer-muted);
  font-family: var(--font-futura-book);
  font-size: 0.75rem;
}

.site-footer__bar .container {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem 1rem;
  padding-top: 1rem;
  padding-bottom: 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   Responsive: mobile, tablets & notched devices
   Load after main rules; overrides only where needed.
   ============================================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 48rem) {
  .intro__text {
    font-size: clamp(1.2rem, 4.2vw, 2rem);
  }

  .band-tagline__text {
    font-size: clamp(1.4rem, 4.8vw, 2.6rem);
  }

  h2.section-cta__title,
  .section-cta__title {
    font-size: clamp(1.6rem, 5.2vw, 3.25rem);
  }
}

@media (max-width: 40rem) {
  .section {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .read-more {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 36rem) {
  .container {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  .hero {
    min-height: min(88svh, 36rem);
    padding: calc(4.25rem + var(--header-overlap, 5.5rem)) 1rem 2.25rem;
    margin-top: calc(-1 * var(--header-overlap, 5.5rem));
  }

  .section-cta {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .section-cta__actions {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  .section-cta__actions .ap-btn {
    width: 100%;
    max-width: 20rem;
    min-height: 2.9rem;
  }

  .site-footer__bar .container {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

}

@media (max-width: 30rem) {
  .kitchen__title {
    font-size: clamp(1.4rem, 5vw, 1.9rem);
  }
}

/* ── Our story: "Supporting everyday nourishment." ──────── */
.section--story {
  background: var(--section-panel-bg);
  overflow: visible;
}

.story-split {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 2fr);
  align-items: stretch;
  min-height: clamp(22rem, 40vh, 34rem);
  column-gap: 0;
}

.story-split__media {
  position: relative;
  min-height: 600px;
  align-self: stretch;
  overflow: hidden;
}

.story-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.6s ease;
}

@media (hover: hover) and (pointer: fine) {
  .story-split__media:hover img {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-split__media img {
    transition: none;
  }
}

.story-split__text {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  min-height: 0;
  height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 1.5rem) clamp(1.5rem, 2.5vw, 2.75rem) 0;
  background: var(--section-panel-bg);
}

.story-split__panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 100%;
  background: var(--white);
  padding: clamp(1.65rem, 2.2vw, 2.15rem) clamp(1.4rem, 1.8vw, 1.9rem);
  font-family: var(--font-futura-bold);
}

.story-split__panel h2 {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.35rem, 2.3vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--heading-green);
  margin: 0 0 1rem;
  line-height: 1.1;
}

.story-split__panel p {
  margin: 0 0 0.9rem;
  color: var(--text);
  font-size: 1.375rem;
  line-height: 1.46;
  font-family: var(--font-futura-book);
}

.story-split__panel p:last-of-type {
  margin-bottom: 0;
}

@media (min-width: 75.01rem) {
  .story-split__text {
    padding-right: 9rem;
  }

  .story-split__panel {
    padding-right: 10rem;
  }
}

@media (min-width: 52.01rem) {
  .story-split {
    align-items: stretch;
    grid-template-rows: minmax(600px, auto);
  }

  .story-split__panel {
    justify-content: center;
  }
}

@media (max-width: 75rem) {
  .story-split__text {
    padding-left: clamp(1.25rem, 4vw, 2.25rem);
    padding-right: clamp(1.25rem, 4vw, 2.25rem);
  }

  .story-split__panel {
    padding-left: clamp(1.25rem, 2.5vw, 1.6rem);
    padding-right: clamp(1.25rem, 2.5vw, 1.6rem);
  }
}

@media (max-width: 52rem) {
  .story-split {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .story-split__media {
    order: -1;
    min-height: min(16rem, 45vh);
  }

  .story-split__media img {
    position: static;
    height: auto;
    min-height: min(16rem, 45vh);
  }

  .story-split__text {
    order: 0;
    height: auto;
    padding: clamp(1.5rem, 2.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 1.5rem);
  }

  .story-split__panel {
    flex: none;
    min-height: 0;
  }
}

/* ── Mission owl carousel ────────────────────────────────── */
.mission-owl {
  overflow: hidden;
}

.mission-owl__inner {
  display: flex;
  align-items: stretch;
  min-height: 460px;
}

.mission-owl__text-col {
  flex: 0 0 28%;
  background: var(--section-panel-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3.5vw, 3.5rem);
}

.mission-owl__heading {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  color: var(--heading-green);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.mission-owl__lede {
  font-family: var(--font-myriad);
  font-size: clamp(0.85rem, 1.3vw, 0.95rem);
  color: var(--heading-green);
  line-height: 1.65;
  margin: 0;
  opacity: 0.85;
}

.mission-owl__carousel-col {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mission-owl__owl {
  height: 100%;
}

.mission-owl__item {
  height: 660px;
}

.mission-owl__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 62rem) {
  .mission-owl__text-col {
    flex: 0 0 34%;
  }
}

@media (max-width: 48rem) {
  .mission-owl__inner {
    flex-direction: column;
    min-height: auto;
  }

  .mission-owl__text-col {
    flex: none;
    padding: 2.5rem 1.5rem;
  }

  .mission-owl__item {
    height: 300px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Craft Showcase — "Flour Crafted for Every Creation"
   ══════════════════════════════════════════════════════════════ */
.craft-showcase {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.craft-showcase__head {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  z-index: 2;
}

.craft-showcase__title {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  color: var(--heading-green);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.12;
  margin: 0 0 0.75rem;
}

.craft-showcase__lede {
  font-family: var(--font-futura-book);
  font-size: clamp(0.875rem, 1.3vw, 1.375rem);
  color: var(--text);
  max-width: 60rem;
  line-height: 1.46;
  margin: 0;
}

.craft-showcase__body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 2;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.craft-nav {
  flex-shrink: 0;
  width: clamp(2.5rem, 6vw, 3rem);
  height: clamp(2.5rem, 6vw, 3rem);
  border-radius: 50%;
  background: var(--heading-green);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  z-index: 10;
  transition: background 0.2s ease;
}

.craft-nav:hover {
  background: #002e18;
}

.craft-showcase__owl {
  flex: 1;
  min-width: 0;
}

.craft-showcase__slide {
  display: flex !important;
  align-items: stretch;
  min-height: clamp(18rem, 45vw, 26.25rem);
}

.craft-showcase__slide-img {
  flex: 0 0 58%;
  overflow: hidden;
  z-index: 1;
}

.craft-showcase__slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.6s ease;
}

.craft-showcase__slide:hover .craft-showcase__slide-img img {
  transform: scale(1.04);
}

.craft-showcase__slide-card {
  flex: 0 0 42%;
  background: #fff;
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.06);
}

.craft-showcase__slide-kicker {
  font-family: var(--font-myriad);
  font-size: 0.75rem;
  color: var(--heading-green);
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  display: block;
}

.craft-showcase__slide-title {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
  color: var(--heading-green);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
  line-height: 1;
}

.craft-showcase__slide-desc {
  font-family: var(--font-futura-book);
  font-size: 1.375rem;
  color: var(--text);
  line-height: 1.46;
  margin: 0 0 1.25rem;
}

.craft-explore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-futura-bold);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heading-green);
  font-weight: 600;
  text-decoration: none;
}

.craft-explore:hover {
  color: var(--heading-green);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Wheat decoration — bg.jpg on white, mix-blend-mode:multiply makes white invisible */
.craft-showcase__wheat {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(500px, 100vw, 100%);
  pointer-events: none;
  mix-blend-mode: multiply;
  background-size: auto 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-image: url('/agroplus/images/bg.jpg');
}


@media (max-width: 48rem) {
  .craft-showcase__slide {
    flex-direction: column;
    min-height: auto;
  }

  .craft-showcase__slide-img {
    flex: none;
    height: 220px;
  }

  .craft-showcase__slide-card {
    flex: none;
    margin-left: 0;
    box-shadow: none;
  }

  .craft-showcase__wheat {
    display: none;
  }
}

/* hp-our-role shares the cream + wheat treatment from craft-showcase */
#hp-our-role {
  position: relative;
  overflow: hidden;
  background: #f5ede4;
}

/* ensure the brands split block paints above the wheat overlay */
.craft-showcase .split {
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   Crafted Brands — "Brands built for every kind of creation."
   Dedicated classes, mirrors story-split grid layout exactly
   ══════════════════════════════════════════════════════════════ */
.crafted-brands {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 2fr);
  align-items: stretch;
  min-height: clamp(22rem, 40vh, 34rem);
  column-gap: 0;
  position: relative;
  z-index: 2;
}

.crafted-brands__media {
  position: relative;
  min-height: 600px;
  align-self: stretch;
  overflow: hidden;
}

/* Brands carousel — fills the media column exactly like the single image did */
.crafted-brands__media .brands-owl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.crafted-brands__media .brands-owl .owl-stage-outer {
  height: 100%;
  overflow: hidden;
}

.crafted-brands__media .brands-owl .owl-stage,
.crafted-brands__media .brands-owl .owl-item {
  height: 100%;
}

.crafted-brands__media .brands-owl__slide {
  height: 100%;
}

.crafted-brands__media .brands-owl__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.crafted-brands__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.crafted-brands__text {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  min-height: 0;
  height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 1.5rem) clamp(1.5rem, 2.5vw, 2.75rem) 0;
  padding-right: clamp(1.25rem, 8vw, 9rem);
}

.crafted-brands__panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 100%;
  background: var(--white);
  padding: clamp(1.65rem, 2.2vw, 2.15rem) clamp(1.4rem, 1.8vw, 1.9rem);
  padding-right: clamp(1.25rem, 9vw, 10rem);
  font-family: var(--font-futura-bold);
}

.crafted-brands__panel h2 {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.35rem, 2.3vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--heading-green);
  margin: 0 0 1rem;
  line-height: 1.1;
}

.crafted-brands__panel p {
  margin: 0 0 0.9rem;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.375rem);
  line-height: 1.46;
  font-family: var(--font-futura-book);
}

.crafted-brands__panel p:last-of-type {
  margin-bottom: 0;
}

@media (min-width: 52.01rem) {
  .crafted-brands {
    align-items: stretch;
    grid-template-rows: minmax(600px, auto);
  }

  .crafted-brands__panel {
    justify-content: center;
  }
}

@media (max-width: 75rem) {
  .crafted-brands__text {
    padding-left: clamp(1.25rem, 4vw, 2.25rem);
    padding-right: clamp(1.25rem, 4vw, 2.25rem);
  }

  .crafted-brands__panel {
    padding-left: clamp(1.25rem, 2.5vw, 1.6rem);
    padding-right: clamp(1.25rem, 2.5vw, 1.6rem);
  }
}

@media (max-width: 52rem) {
  .crafted-brands {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .crafted-brands__media {
    order: -1;
    min-height: min(16rem, 45vh);
  }

  .crafted-brands__media img {
    position: static;
    height: auto;
    min-height: min(16rem, 45vh);
  }

  .crafted-brands__text {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }
}

/* ══════════════════════════════════════════════════════════════
   Product Range Carousel
   ══════════════════════════════════════════════════════════════ */
.product-range {
  background: var(--section-panel-bg);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.product-range__header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.product-range__title {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--heading-green);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.product-range__lede {
  font-family: var(--font-myriad);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  color: #5a6e5a;
  margin: 0 0 1rem;
  line-height: 1.55;
}

.product-range__footer {
  text-align: center;
  margin-top: 2rem;
}

.product-range__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.product-range__nav {
  flex-shrink: 0;
  width: clamp(2.5rem, 6vw, 3rem);
  height: clamp(2.5rem, 6vw, 3rem);
  border-radius: 50%;
  background: var(--heading-green);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding: 0;
  z-index: 10;
  transition: background 0.2s ease;
}

.product-range__nav:hover {
  background: #002e18;
}

.product-range__owl {
  flex: 1;
  min-width: 0;
}

.product-range__card {
  background: #fff;
  padding: 2rem 1.5rem 1.5rem;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 400px;
  margin: 0 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* JS/category filter — smooth staggered animation */
.product-range__card {
  transition:
    opacity .35s cubic-bezier(.4, 0, .2, 1),
    transform .35s cubic-bezier(.4, 0, .2, 1),
    box-shadow .25s ease;
  will-change: opacity, transform;
}

/* Filtered-out: fade + drop down slightly */
.product-range__card.is-filtered-out {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  pointer-events: none;
}

/* Entering: starts here (JS removes the class to play forward) */
.product-range__card.is-entering {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
}

.product-range__card[hidden] {
  display: none !important;
}

.product-range__card:hover {
  text-decoration: none;
  color: inherit;
}

.product-range__card-weight {
  font-family: var(--font-futura-book);
  font-size: 0.82rem;
  color: var(--heading-green);
  margin: 0.55rem 0 0;
  line-height: 1.4;
}

.product-range__card-img {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.product-range__card-img img {
  width: auto;
  max-width: 100%;
  height: 260px;
  object-fit: contain;
  display: block;
  transform: scale(1);
  transition: transform 0.5s ease;
}

.product-range__card:hover .product-range__card-img img {
  transform: scale(1.05);
}

.product-range__card .craft-explore {
  align-self: flex-start;
  margin-top: 0.4rem;
}

.product-range__card-name {
  font-family: var(--font-futura-bold);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--heading-green);
  text-align: left;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.3;
  /* Reserve exactly 2 lines so all cards stay the same height */
  min-height: calc(2 * 1.3em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-range__card-name strong {
  font-family: var(--font-futura-book);
  font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════
   Agro Certified (Theme Options)
   ══════════════════════════════════════════════════════════════ */
.agro-certified {
  background: var(--section-panel-bg);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.agro-certified__header {
  text-align: left;
  margin-bottom: 1.75rem;
}

.agro-certified__title {
  margin-bottom: 1rem;
  text-align: left;
}

.agro-certified__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.agro-certified__grid--count-1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 18rem;
  margin-inline: auto;
}

.agro-certified__grid--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agro-certified__grid--count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agro-certified__grid--count-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agro-certified__card.product-range__card {
  min-height: 175px;
  border-radius: 10px;
  cursor: default;
  border: 1px solid #004020;
  background: #fff;
  padding: 1rem;
  margin: 0;
}

.agro-certified__card .product-range__card-img,
.agro-certified__card-img {
  margin-bottom: 0;
}

.agro-certified__card-img img {
  height: 175px;
}

.agro-certified__slider {
  width: 100%;
}

.agro-certified__owl {
  width: 100%;
}

.agro-certified__slide .agro-certified__card {
  margin: 0 6px;
}

.agro-certified__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ≤5 certs: grid on desktop/tablet, carousel on mobile */
@media (min-width: 48.01rem) {
  .agro-certified__slider--mobile {
    display: none;
  }
}

@media (max-width: 48rem) {
  .agro-certified__grid--desktop {
    display: none;
  }
}

@media (max-width: 62rem) {
  .agro-certified__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agro-certified__grid--count-1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 18rem;
  }

  .agro-certified__grid--count-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {

  .agro-certified__grid,
  .agro-certified__grid--count-2,
  .agro-certified__grid--count-3 {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   Consistency Section
   ══════════════════════════════════════════════════════════════ */
.consistency-section {
  position: relative;
  overflow: hidden;
}

.consistency-section .container {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.consistency-section__head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.consistency-section__title {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  color: var(--heading-green);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.12;
  margin: 0 0 0.75rem;
}

.consistency-section__lede {
  font-family: var(--font-futura-book);
  font-size: clamp(0.875rem, 1.3vw, 1.375rem);
  color: var(--text);
  line-height: 1.46;
  margin: 0;
  max-width: 60rem;
}

.consistency-section__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.consistency-card__img {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.consistency-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.55s ease;
}

.consistency-card__label {
  background: var(--heading-green);
  padding: 0.9rem 1.1rem 1.1rem;
  transition: background 0.35s ease;
}

.consistency-card__title {
  font-family: var(--font-futura-bold);
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 0.35rem;
  transition: color 0.35s ease;
}

.consistency-card__desc {
  font-family: var(--font-futura-book);
  font-size: clamp(0.875rem, 2vw, 1rem) !important;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0;
  transition: color 0.35s ease;
}

.consistency-card {
  overflow: hidden;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

@media (hover: hover) and (pointer: fine) {
  .consistency-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 32, 20, 0.18);
    z-index: 1;
  }

  .consistency-card:hover .consistency-card__img img {
    transform: scale(1.04);
  }

  .consistency-card:hover .consistency-card__label {
    background: #fff;
  }

  .consistency-card:hover .consistency-card__title {
    color: var(--heading-green);
  }

  .consistency-card:hover .consistency-card__desc {
    color: var(--text);
    opacity: 1;
  }
}

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

  .consistency-card,
  .consistency-card .consistency-card__img img {
    transition: none;
  }
}

/* Sourcing split — mirrors crafted-brands grid layout */
.consistency-sourcing {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 2fr);
  align-items: stretch;
  min-height: clamp(22rem, 40vh, 34rem);
  column-gap: 0;
  position: relative;
}

.consistency-sourcing__img {
  position: relative;
  min-height: 600px;
  align-self: stretch;
  overflow: hidden;
}

.consistency-sourcing__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.6s ease;
}

@media (hover: hover) and (pointer: fine) {
  .consistency-sourcing:hover .consistency-sourcing__img img {
    transform: scale(1.04);
  }
}

/* Outer gray wrapper — mirrors crafted-brands__text */
.consistency-sourcing__text {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  min-height: 0;
  height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 1.5rem) clamp(1.5rem, 2.5vw, 2.75rem) 0;
  padding-right: clamp(1.25rem, 8vw, 9rem);
}

/* Inner white panel — mirrors crafted-brands__panel */
.consistency-sourcing__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 100%;
  background: var(--white);
  padding: clamp(1.65rem, 2.2vw, 2.15rem) clamp(1.4rem, 1.8vw, 1.9rem);
  padding-right: clamp(1.25rem, 9vw, 10rem);
  font-family: var(--font-futura-bold);
}

.consistency-sourcing__title {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.35rem, 2.3vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--heading-green);
  margin: 0 0 1rem;
  line-height: 1.1;
}

.consistency-sourcing__desc {
  margin: 0 0 0.9rem;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.375rem);
  line-height: 1.46;
  font-family: var(--font-futura-book);
}

.consistency-sourcing__desc:last-of-type {
  margin-bottom: 1.4rem;
}

/* Long-arrow variant — used in consistency-sourcing "Learn More" link */
.craft-explore--long-arrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
}

.craft-explore__arrow {
  display: inline-block;
  position: relative;
  width: 3.25rem;
  height: 1.5px;
  background: var(--lime);
  flex-shrink: 0;
}

.craft-explore__arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid var(--lime);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
}

/* Button variant — smaller, inherits text colour so it shows on the lime background */
.craft-explore__arrow--btn {
  width: 1.5rem;
  background: currentColor;
}

.craft-explore__arrow--btn::after {
  border-left-color: currentColor;
}

@media (min-width: 52.01rem) {
  .consistency-sourcing {
    align-items: stretch;
    grid-template-rows: minmax(600px, auto);
  }
}

@media (max-width: 75rem) {
  .consistency-sourcing__text {
    padding-left: clamp(1.25rem, 4vw, 2.25rem);
    padding-right: clamp(1.25rem, 4vw, 2.25rem);
  }

  .consistency-sourcing__card {
    padding-left: clamp(1.25rem, 2.5vw, 1.6rem);
    padding-right: clamp(1.25rem, 2.5vw, 1.6rem);
  }
}

@media (max-width: 52rem) {
  .consistency-sourcing {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .consistency-sourcing__img {
    order: -1;
    min-height: min(16rem, 45vh);
  }

  .consistency-sourcing__img img {
    position: static;
    height: auto;
    min-height: min(16rem, 45vh);
  }

  .consistency-sourcing__text {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }
}

@media (max-width: 64rem) {
  .consistency-section__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 36rem) {
  .consistency-section__cards {
    grid-template-columns: 1fr;
  }
}

/* ── Vision owl carousel (replaces split__media in #hp-our-vision) ── */
#hp-our-vision {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.vision-owl-col {
  overflow: visible;
  align-self: stretch;
  position: relative;
  min-width: 0;
  /* prevent grid blowout */
}

.vision-owl__item {
  height: 660px;
}

.vision-owl__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.6s ease;
}

.vision-owl__item--video {
  background: #000;
  overflow: hidden;
}

.vision-owl__video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.vision-owl__video-wrap iframe,
.vision-owl__video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.vision-owl__video-wrap video {
  object-fit: cover;
  object-position: center;
  background: #000;
}

@media (hover: hover) and (pointer: fine) {
  .vision-owl__item:hover img {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vision-owl__item img {
    transition: none;
  }

  .vision-owl__item:hover img {
    transform: scale(1);
  }
}

/* ── Vision Owl — nav arrows ───────────────────────────────── */
.vision-owl__nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  position: absolute;
  bottom: -3.5rem;
  left: 0;
}

.vision-nav {
  flex-shrink: 0;
  width: clamp(2.5rem, 6vw, 3rem);
  height: clamp(2.5rem, 6vw, 3rem);
  border-radius: 50%;
  background: var(--heading-green);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  z-index: 10;
  transition: background 0.2s ease;
}

.vision-nav:hover {
  background: #002e18;
}

@media (max-width: 52rem) {

  /* Show carousel above text panel on mobile */
  .vision-owl-col {
    order: -1;
    width: 100%;
  }

  /* Taller portrait-friendly height for YouTube Shorts & images */
  .vision-owl__item {
    height: min(calc(100vw * 1.2), 500px);
  }

  /* Pull nav arrows out of absolute flow so they sit flush below the carousel */
  .vision-owl__nav {
    position: static;
    justify-content: center;
    margin-top: 1rem;
    bottom: auto;
    left: auto;
    padding-bottom: 0.25rem;
  }

  /* Reduce section bottom padding since nav arrows are no longer outside */
  #hp-our-vision {
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* ── Stats band ───────────────────────────────────────────── */
.stats-band {
  background: var(--section-panel-bg);
  padding-bottom: 1.5rem !important;
}

.stats-band__head {
  margin-bottom: 0;
}

.stats-band__title {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.35rem, 2.8vw, 3rem);
  color: var(--heading-green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
  line-height: 1.15;
}

.stats-band__lede {
  font-family: var(--font-myriad);
  font-size: clamp(0.875rem, 1.4vw, 1.5rem);
  margin: 0;
}

.stats-band__rule {
  border: none;
  border-top: 1px solid var(--heading-green);
  margin: 0 0 2.5rem;
  opacity: 0.25;
}

.stats-band__row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3.5rem;
  align-items: flex-start;
}

.stats-band__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stats-band__value {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--heading-green);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.stats-band__label {
  font-family: var(--font-myriad);
  font-size: clamp(0.75rem, 1.1vw, 1.5rem);
  line-height: 1.3;
}

@media (max-width: 48rem) {
  .stats-band__row {
    gap: 1.5rem 2.5rem;
  }
}

@media (max-width: 30rem) {
  .stats-band__row {
    gap: 1.25rem 2rem;
  }

  .stats-band__value {
    font-size: 1.15rem;
  }
}

/* ── Scroll-to-top button ─────────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 1.75rem;
  z-index: 300;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: #004020;
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  pointer-events: none;
}

.scroll-top:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top:hover,
.scroll-top:focus-visible {
  background: #002e12;
  outline: none;
}

/* SVG ring — sits outside the button circle */
.scroll-top__ring {
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  overflow: visible;
  pointer-events: none;
}

/* Background track ring */
.scroll-top__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2.5;
}

/* Lime progress ring — fills clockwise from 12 o'clock */
.scroll-top__progress {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* circumference of r=21: 2π×21 ≈ 131.95 */
  stroke-dasharray: 131.95;
  stroke-dashoffset: 131.95;
  /* starts empty */
  transform: rotate(-90deg);
  transform-origin: 24px 24px;
  /* SVG centre */
  transition: stroke-dashoffset 0.1s linear;
}

@media (max-width: 36rem) {
  .scroll-top {
    bottom: 1.25rem;
    right: 1rem;
    width: 2.65rem;
    height: 2.65rem;
    font-size: 0.9rem;
  }
}

/* ── Default page template (page.php) ─────────────────────────── */
.ap-page__section {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.ap-page__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-futura-bold);
  font-size: clamp(1.35rem, 2.3vw, 3rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  color: var(--heading-green);
}

.ap-page__content {
  color: var(--text);
  font-family: var(--font-futura-book);
  font-size: clamp(1.1rem, 1.3vw + 0.4rem, 1.375rem);
  line-height: 1.46;
}

.ap-page__content> :first-child {
  margin-top: 0;
}

.ap-page__content p {
  margin: 0 0 0.9rem;
}

.ap-page__content h2,
.ap-page__content h3,
.ap-page__content h4 {
  font-family: var(--font-futura-bold);
  color: var(--heading-green);
  line-height: 1.15;
  margin: 1.5rem 0 0.75rem;
}

.ap-page__content ul,
.ap-page__content ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.ap-page__content a {
  color: var(--read-more);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ap-page__content a:hover {
  color: var(--heading-green);
}

.ap-page__article .post-thumbnail {
  margin: 0 0 1.5rem;
}

.ap-page__article .post-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Single job (WP Job Openings) ─────────────────────────────── */
.job-single-main {
  background: var(--section-panel-bg);
  overflow-x: clip;
}

.job-single {
  padding-top: clamp(2.75rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.job-single__head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.job-single__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-futura-bold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--read-more);
}

.job-single__back:hover {
  color: var(--heading-green);
  text-decoration: none;
}

.job-single__back-arrow {
  transform: rotate(180deg);
}

.job-single__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-futura-bold);
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--heading-green);
}

.job-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.job-single__expiry {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid #d1d9e0;
  font-family: var(--font-futura-book);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #64748b;
}

.job-single__meta .awsm-job-expiration-label {
  font-family: var(--font-futura-bold);
  font-weight: 700;
  color: var(--heading-green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.job-single__specs .awsm-job-specifications-container {
  margin: 0;
  padding: 0;
  border: none;
}

.job-single__specs .awsm-job-specifications-row,
.job-single__specs .awsm-job-specification-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0;
}

.job-single__title-rule {
  border: none;
  border-top: 2px solid var(--heading-green);
  margin: 0;
}

.job-single-main .awsm-job-single-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin: 0;
}

.job-single-main .awsm-job-single-wrap::after {
  display: none;
}

.job-single-main .awsm-job-single-wrap .awsm-job-content,
.job-single-main .awsm-job-single-wrap .awsm-job-form {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
}

.job-single-main .awsm-job-single-wrap .awsm-job-content {
  background: var(--white);
  border-radius: 1.25rem;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

/* Meta moved to page header — hide duplicates inside the content card */
.job-single-main .awsm-job-content .awsm-job-head,
.job-single-main .awsm-job-content .awsm-job-specifications-container {
  display: none;
}

.job-single-main .awsm-job-entry-content {
  color: var(--text);
  font-family: var(--font-futura-book);
  font-size: clamp(1rem, 1.1vw + 0.35rem, 1.125rem);
  line-height: 1.6;
}

.job-single-main .awsm-job-entry-content> :first-child {
  margin-top: 0;
}

.job-single-main .awsm-job-entry-content h2,
.job-single-main .awsm-job-entry-content h3,
.job-single-main .awsm-job-entry-content h4 {
  margin: 1.75rem 0 0.75rem;
  font-family: var(--font-futura-bold);
  font-size: clamp(0.95rem, 1.2vw + 0.3rem, 1.2rem);
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--heading-green);
}

.job-single-main .awsm-job-entry-content p {
  margin: 0 0 1rem;
}

.job-single-main .awsm-job-entry-content ul,
.job-single-main .awsm-job-entry-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
}

.job-single-main .awsm-job-entry-content li {
  margin-bottom: 0.35rem;
}

.job-single-main .awsm-job-specification-item,
.job-single__specs .awsm-job-specification-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  font-family: var(--font-futura-book);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--heading-green);
}

.job-single__specs .awsm-job-specification-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.job-single-main .awsm-job-specification-label strong,
.job-single__specs .awsm-job-specification-label strong {
  font-weight: inherit;
}

.job-single-main .awsm-job-form {
  position: sticky;
  top: calc(5.5rem + 1rem);
}

.job-single-main .awsm-job-form-inner {
  --contact-field-border: #d1d9e0;
  --contact-field-focus: var(--heading-green, #004020);
  border: none;
  border-radius: 1.25rem;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--white);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  font-family: var(--font-futura-book);
}

.job-single-main .awsm-job-form-inner h2 {
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
  font-family: var(--font-futura-bold);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--heading-green);
}

.job-single-main .awsm-job-form-group {
  margin-bottom: 1.125rem;
}

.job-single-main .awsm-job-form-group:last-child {
  margin-bottom: 0;
}

.job-single-main .awsm-job-form-group label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-futura-bold);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--heading-green);
}

.job-single-main .awsm-job-inline-group {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.job-single-main .awsm-job-inline-group input[type="checkbox"] {
  width: auto;
  min-height: auto;
  margin: 0.2rem 0 0;
  flex-shrink: 0;
  accent-color: var(--heading-green);
}

.job-single-main .awsm-job-inline-group label {
  display: inline;
  margin: 0;
  font-weight: 400;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.45;
}

.job-single-main .awsm-job-form-control {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.875rem;
  border: 1px solid var(--contact-field-border);
  border-radius: 0.5rem;
  background: var(--white);
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.job-single-main textarea.awsm-job-form-control {
  min-height: 7.5rem;
  resize: vertical;
}

.job-single-main .awsm-job-form-control:focus {
  border-color: var(--contact-field-focus);
  box-shadow: 0 0 0 1px var(--contact-field-focus);
  outline: none;
}

.job-single-main .awsm-job-form-control.awsm-job-form-error,
.job-single-main .awsm-job-form-control.awsm-job-form-error:focus {
  border-color: #db4c4c;
  box-shadow: 0 0 0 1px #db4c4c;
}

.job-single-main .awsm-job-form-error {
  color: #db4c4c;
}

.job-single-main .awsm-job-form-group small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: #64748b;
}

.job-single-main .awsm-application-submit-btn,
.job-single-main .awsm-job-submit {
  min-width: 10.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.75rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--heading-green, #004020);
  color: var(--white);
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.job-single-main .awsm-application-submit-btn:hover,
.job-single-main .awsm-job-submit:hover {
  background: #002e12;
}

.job-single-main .awsm-success-message,
.job-single-main .awsm-error-message {
  margin-bottom: 1rem;
  padding: 0.875rem 1.125rem;
  border-radius: 0.5rem;
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
}

.job-single-main .awsm-success-message {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.job-single-main .awsm-error-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.job-single-main .awsm-expired-message {
  grid-column: 1 / -1;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 1.25rem;
  background: var(--white);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  font-family: var(--font-futura-book);
}

@media (max-width: 68rem) {
  .job-single-main .awsm-job-single-wrap {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .job-single-main .awsm-job-form {
    position: static;
  }
}

/* ═══════════════════════════════════════════════════════════════
   WordPress-theme-only additions
   ═══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────────
   Hero — Revolution Slider responsive visibility
   Desktop shortcode shown ≥ 768 px, Mobile shortcode shown < 768 px.
   When only a desktop shortcode is set (no mobile), it shows on all screens.
───────────────────────────────────────────────────────────────────────────── */
.hero--slider {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #000;
  min-height: 0;
  /* cancel .hero's min-height: 100vh */
  display: block;
  /* cancel .hero's display: flex / align-items: center */
}

.hero__slider {
  width: 100%;
  display: block;
  line-height: 0;
}

/* Mobile slider always hidden unless a mobile shortcode is set */
.hero__slider--mobile {
  display: none;
}

/* Only swap desktop→mobile when the section has hero--has-mobile-slider class.
   This class is added by PHP only when a mobile shortcode is actually entered.
   Without it, the desktop slider shows on ALL screen sizes (RevSlider handles
   its own responsive breakpoints internally). */
@media (max-width: 767.98px) {
  .hero--has-mobile-slider .hero__slider--desktop {
    display: none;
  }

  .hero--has-mobile-slider .hero__slider--mobile {
    display: block;
  }
}

/* ── Revolution Slider 7 — custom bottom-centre navigation ───────────── */
.hero__rev-nav {
  position: absolute;
  bottom: clamp(1.25rem, 3vh, 2.25rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  pointer-events: auto;
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hero__rev-nav--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero__rev-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #fff;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.hero__rev-btn:hover,
.hero__rev-btn:focus-visible {
  opacity: 1;
  outline: none;
}

/* Arrow shaft — shared */
.hero__rev-arrow {
  display: block;
  position: relative;
  width: clamp(2.25rem, 4vw, 3rem);
  height: 2px;
  background: #004020;
}

/* Left-pointing arrowhead on prev (rotates around its own centre) */
.hero__rev-btn--prev .hero__rev-arrow::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #004020;
  border-left: 2px solid #004020;
  transform: translateY(-50%) rotate(-45deg);
}

/* Right-pointing arrowhead on next */
.hero__rev-btn--next .hero__rev-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #004020;
  border-right: 2px solid #004020;
  transform: translateY(-50%) rotate(45deg);
}

.hero__rev-counter {
  font-family: 'FuturaLT-Book', 'Futura', sans-serif;
  font-size: clamp(0.875rem, 1.4vw, 1rem);
  letter-spacing: 0.08em;
  color: #004020;
  white-space: nowrap;
  min-width: 5rem;
  text-align: center;
  line-height: 1;
}

/* ── Scroll-to-top button ─────────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 1.75rem;
  z-index: 300;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: #004020;
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  pointer-events: none;
}

.scroll-top:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top:hover,
.scroll-top:focus-visible {
  background: #002e12;
  outline: none;
}

.scroll-top__ring {
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  overflow: visible;
  pointer-events: none;
}

.scroll-top__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2.5;
}

.scroll-top__progress {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 131.95;
  stroke-dashoffset: 131.95;
  transform: rotate(-90deg);
  transform-origin: 24px 24px;
  transition: stroke-dashoffset 0.1s linear;
}

@media (max-width: 36rem) {
  .scroll-top {
    bottom: 1.25rem;
    right: 1rem;
    width: 2.65rem;
    height: 2.65rem;
    font-size: 0.9rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCTS PAGE & SINGLE PRODUCT — fluid design system
   All sizing uses clamp() / vw / % — zero hard pixel breakpoints.
   ═══════════════════════════════════════════════════════════════ */

/* ── ChunkFive font face ─────────────────────────────────────── */
@font-face {
  font-family: "ChunkFive-Regular";
  src: url("../fonts/ChunkFive-Regular.woff2") format("woff2"),
    url("../fonts/ChunkFive-Regular.woff") format("woff"),
    url("../fonts/ChunkFive-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Products Hero ───────────────────────────────────────────── */
.products-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* When slider is active, height is controlled by Revolution Slider */
.products-hero--slider,
/* Double-class specificity (0-2-0) beats .about-hero (0-1-0) regardless of order */
.about-hero.about-hero--slider {
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  align-items: unset;
}

/* Force Revolution Slider wrapper flush to the top — no gap */
.about-hero.about-hero--slider .hero__slider,
.about-hero.about-hero--slider .hero__slider>div,
.about-hero.about-hero--slider .rev_slider_wrapper,
.about-hero.about-hero--slider .rev_slider_wrapper>div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.products-hero__bg {
  position: absolute;
  inset: 0;
}

.products-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.products-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .38) 60%,
      rgba(0, 0, 0, .12) 100%);
}

.products-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(1.5rem, 4vh, 3rem);
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.products-hero__kicker {
  font-family: "ChunkFive-Regular", Georgia, serif;
  font-size: clamp(3.5rem, 8vw + .5rem, 7rem);
  color: var(--lime, #c4d600);
  line-height: 1;
  margin: 0 0 .08em;
  letter-spacing: -.01em;
  text-transform: uppercase;
  animation: heroFadeUp .9s cubic-bezier(.22, 1, .36, 1) .2s both;
}

.products-hero__title {
  font-family: "ChunkFive-Regular", Georgia, serif;
  font-size: clamp(2rem, 5vw + .5rem, 4.5rem);
  color: #fff;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .02em;
  max-width: 16ch;
  animation: heroFadeUp 1s cubic-bezier(.22, 1, .36, 1) .55s both;
}

/* ── About page hero ─────────────────────────────────────────── */
.about-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.about-hero__bg {
  position: absolute;
  inset: 0;
}

.about-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.about-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(0, 0, 0, .68) 0%,
      rgba(0, 0, 0, .35) 60%,
      rgba(0, 0, 0, .10) 100%);
}

.about-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(1.5rem, 4vh, 3rem);
}

.about-hero__kicker {
  font-family: var(--font-futura-bold);
  font-size: clamp(0.6rem, 1.1vw, 0.8rem);
  color: rgba(255, 255, 255);
  text-transform: uppercase;
  letter-spacing: .22em;
  margin: 0 0 clamp(.6rem, 1.5vw, 1rem);
  animation: heroFadeUp .8s cubic-bezier(.22, 1, .36, 1) .15s both;
}

.about-hero__title {
  font-family: "ChunkFive-Regular";
  font-size: clamp(2rem, 5vw + .5rem, 4.5rem);
  color: #fff;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 14ch;
  animation: heroFadeUp 1s cubic-bezier(.22, 1, .36, 1) .4s both;
}

.about-hero__title-line {
  display: block;
  white-space: nowrap;
}

.about-hero__title-highlight {
  color: var(--lime, #c4d600);
}

/* ── Product listing section ─────────────────────────────────── */
.product-listing {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
}

.product-listing__title {
  font-family: "FuturaLT-Bold", "Futura", sans-serif;
  font-size: clamp(1.25rem, 2.5vw + .25rem, 2.25rem);
  color: var(--heading-green, #004020);
  margin: 0 0 clamp(.4rem, 1vw, .7rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.product-listing__rule {
  border: none;
  border-top: 2px solid var(--heading-green, #004020);
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

/* ── Product category pill filter (listing) ───────────────────── */
.brand-pills-row {
  display: flex;
  align-items: center;
  gap: clamp(.4rem, 1vw, .75rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .25rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.brand-pills-row.is-dragging {
  cursor: grabbing;
}

.brand-pills-row.is-dragging .brand-pill {
  pointer-events: none;
  cursor: grabbing;
}

.brand-pills-row::-webkit-scrollbar {
  display: none;
}

.brand-pills-label {
  font-family: var(--font-futura-bold);
  font-size: clamp(.7rem, 1vw + .1rem, .85rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--heading-green, #004020);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: .25rem;
}

.brand-pill {
  font-family: var(--font-futura-book);
  font-size: clamp(.7rem, 1vw + .1rem, .85rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .5em clamp(.9em, 2vw, 1.4em);
  border-radius: 2em;
  border: 1.5px solid #bbb;
  background: transparent;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .18s, border-color .18s, color .18s;
}

.brand-pill:hover {
  border-color: var(--heading-green, #004020);
  color: var(--heading-green, #004020);
}

.brand-pill.is-active {
  background: var(--heading-green, #004020);
  border-color: var(--heading-green, #004020);
  color: #fff;
}

/* "All" pill — slightly distinct so it reads as a reset action */
.brand-pill--all {
  border-color: var(--heading-green, #004020);
  color: var(--heading-green, #004020);
}

.brand-pill--all.is-active {
  background: var(--heading-green, #004020);
  border-color: var(--heading-green, #004020);
  color: #fff;
}

.brand-pill--rich {
  white-space: normal;
  max-width: 14rem;
  line-height: 1.3;
  text-align: center;
  padding-top: 0.65em;
  padding-bottom: 0.65em;
}

.brand-pill__name {
  display: block;
}

.brand-pill__excerpt {
  display: block;
  margin-top: 0.35em;
  font-family: inherit;
  font-size: 0.72em;
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-transform: none;
  font-weight: 400;
  opacity: 0.92;
}

.brand-pill.is-active .brand-pill__excerpt {
  opacity: 0.95;
}

/* ── Product grid — fluid auto-fill, zero breakpoints ───────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.75rem, 2vw, 1.25rem);
}

@media (max-width: 991px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .625rem;
  }
}

.product-grid .product-range__card {
  width: 100%;
}

/* ── Use-case category sections ─────────────────────────────── */
.use-category__banner {
  position: relative;
  width: 100%;
  min-height: clamp(28vh, 15vw + 18vh, 48vh);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.use-category__banner-bg {
  position: absolute;
  inset: 0;
}

.use-category__banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* Slider inside banner — each slide must fill the full background */
.use-category__banner-owl,
.use-category__banner-owl .owl-stage-outer,
.use-category__banner-owl .owl-stage,
.use-category__banner-owl .owl-item,
.use-category__banner-slide {
  height: 100%;
}

.use-category__banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* Dots positioned at bottom of banner */
.use-category__banner--slider .owl-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.use-category__banner--slider .owl-dot span {
  background: rgba(255, 255, 255, 0.5) !important;
}

.use-category__banner--slider .owl-dot.active span {
  background: #fff !important;
}

.use-category__banner-overlay {
  position: absolute;
  inset: 0;
}

.use-category__banner-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(1.75rem, 4vw, 3rem);
}

.use-category__kicker {
  font-family: "HelveticaNeueLTStd-MdCn", "Arial Narrow", sans-serif;
  font-size: clamp(.65rem, .8vw + .2rem, .8rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lime, #c4d600);
  display: block;
  margin-bottom: .4em;
}

.use-category__title {
  font-family: "FuturaLT-Bold", "Futura", sans-serif;
  font-size: clamp(1.5rem, 3.5vw + .5rem, 3.25rem);
  color: #fff;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 .3em;
}

.use-category__tagline {
  font-family: var(--font-futura-book);
  font-size: clamp(1rem, 1.2vw + .4rem, 1.25rem);
  color: rgba(255, 255, 255, .78);
  margin: 0;
  line-height: 1.5;
}

.use-category__products {
  background: #f5f5f3;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── Single product hero ─────────────────────────────────────── */
.sp-hero {
  position: relative;
  width: 100%;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.sp-hero__bg {
  position: absolute;
  inset: 0;
}

.sp-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.sp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 20, 8, .90) 0%,
      rgba(0, 20, 8, .50) 55%,
      rgba(0, 20, 8, .10) 100%);
}

.sp-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(2rem, 6vh, 4rem);
}

.sp-hero__brand {
  font-family: "FuturaLT-Book", "Futura", sans-serif;
  font-size: clamp(.8rem, 1.2vw, 1rem);
  color: var(--lime, #c4d600);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .3em;
}

.sp-hero__name {
  font-family: "FuturaLT-Bold", "Futura", sans-serif;
  font-size: clamp(2.25rem, 6vw, 5rem);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  margin: 0 0 clamp(1rem, 3vh, 2rem);
}

.sp-hero__cta {
  margin-top: .5rem;
}

/* ── Single product details ──────────────────────────────────── */
.sp-details {
  padding: clamp(3rem, 7vw, 6rem) 0;
  background: #f5f5f3;
}

.sp-details__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Prevent grid children from overflowing their column */
.sp-details__visual,
.sp-details__info {
  min-width: 0;
  width: 100%;
}

.sp-details__visual {
  overflow: hidden;
}

@media (max-width: 767px) {
  .sp-details__split {
    grid-template-columns: 1fr;
  }
}


.sp-details__img-wrap {
  background: #fff;
  border-radius: 4px;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-details__img-wrap img {
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  display: block;
}

/* ── Product image carousel (scoped to .sp-details__visual only) ── */
.sp-details__visual .sp-details__img-wrap--carousel {
  padding: 0;
  background: #fff;
  border-radius: 4px;
  width: 100%;
  position: relative;
}

/* Clip the hidden slides — never override .owl-stage or .owl-item widths,
   Owl must calculate those itself for the translate to work correctly */
.sp-details__visual .owl-stage-outer {
  overflow: hidden;
}

.sp-details__visual .sp-carousel__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  height: clamp(280px, 38vw, 500px);
  box-sizing: border-box;
}

.sp-details__visual .sp-carousel__slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ── Thumbnail strip ── */
.sp-thumbs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.sp-thumb {
  width: clamp(54px, 7vw, 76px);
  height: clamp(54px, 7vw, 76px);
  border: 2px solid #e0e0dc;
  border-radius: 4px;
  overflow: hidden;
  padding: 4px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sp-thumb:hover {
  border-color: var(--heading-green);
}

.sp-thumb.is-active {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime);
}

.sp-details__brand {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--heading-green, #004020);
  text-transform: uppercase;
  margin: 0;
}

.sp-details__name {
  font-family: var(--font-futura-book);
  font-size: clamp(2rem, 1vw, 2rem);
  color: var(--heading-green, #004020);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.05;
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
}

.sp-details__desc {
  font-family: var(--font-futura-book);
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  color: #000;
  line-height: 1.65;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sp-details__desc p {
  margin: 0 0 .75em;
}

.sp-details__weights {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sp-details__weights-label {
  font-family: var(--font-futura-book);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #000000;
  display: block;
  margin-bottom: .5em;
}

.sp-details__weight-tags {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.sp-weight-tag {
  font-family: var(--font-futura-book);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35em 1em;
  border-radius: 2em;
  border: 1.5px solid var(--heading-green, #004020);
  color: var(--heading-green, #004020);
  background: transparent;
  display: inline-block;
  cursor: pointer;
  transition: background .18s, color .18s;
}

.sp-weight-tag:hover {
  background: var(--heading-green, #004020);
  color: #fff;
}

.sp-weight-tag.is-active {
  background: var(--heading-green, #004020);
  color: #fff;
}

.sp-details__uses {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sp-details__uses-label {
  font-family: var(--font-futura-book);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #000000;
  display: block;
  margin-bottom: .5em;
}

.sp-details__use-tags {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.sp-use-tag {
  font-family: var(--font-futura-book);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35em 1em;
  border-radius: 2em;
  border: 1.5px solid var(--heading-green, #004020);
  color: var(--heading-green, #004020);
  display: inline-block;
  cursor: default;
  transition: background .18s, color .18s;
}

.sp-use-tag:hover {
  background: var(--heading-green, #004020);
  color: #fff;
}

.sp-details__actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* ── Key features ────────────────────────────────────────────── */
.sp-features {
  border-top: 2px solid #e8e8e4;
  padding-top: clamp(2rem, 4vw, 3rem);
}

.sp-features__title {
  font-family: "FuturaLT-Bold", "Futura", sans-serif;
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--heading-green, #004020);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
}

.sp-features__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: clamp(.6rem, 1.5vw, 1rem);
}

.sp-features__item {
  font-family: var(--font-futura-book);
  font-size: clamp(.88rem, 1.3vw, 1rem);
  color: #333;
  display: flex;
  gap: .75em;
  align-items: flex-start;
  line-height: 1.5;
}

.sp-features__icon {
  color: var(--lime, #c4d600);
  flex-shrink: 0;
  margin-top: .1em;
}

/* ── Related products ────────────────────────────────────────── */
.sp-related {
  background: #f5f5f3;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.sp-related__title {
  font-family: "FuturaLT-Bold", "Futura", sans-serif;
  font-size: clamp(1.25rem, 2.5vw + .25rem, 2rem);
  color: var(--heading-green, #004020);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 clamp(.4rem, 1vw, .7rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Our Process — Gallery Section (image grid + GLightbox)
   ═══════════════════════════════════════════════════════════════════════════ */
.process-gallery {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: #fff;
  border-top: 1px solid rgba(0, 64, 32, 0.08);
  border-bottom: 1px solid rgba(0, 64, 32, 0.08);
}

/* ── Section header ── */
.process-gallery__head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.process-gallery__title {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  color: var(--heading-green);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0 0 0.75rem;
}

.process-gallery__body,
.process-gallery__body p {
  font-family: var(--font-futura-book);
  font-size: clamp(1rem, 1.8vw, 1.375rem);
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

.process-gallery__body p+p {
  margin-top: 0.75rem;
}

/* ── Grid layout ── */
.process-gallery__grid {
  display: grid;
  gap: 10px;
}

.process-gallery__grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.process-gallery__grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.process-gallery__grid--cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.process-gallery__grid--cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* ── Each item ── */
.process-gallery__item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  background: var(--light);
  text-decoration: none;
  cursor: zoom-in;
  outline: none;
}

.process-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.process-gallery__item:hover img,
.process-gallery__item:focus-visible img {
  transform: scale(1.07);
}

/* ── Dark gradient overlay (slides in on hover) ── */
.process-gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 40, 20, 0.72) 0%,
      rgba(0, 40, 20, 0.18) 45%,
      transparent 75%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  padding: 0.9rem 1rem;
}

.process-gallery__item:hover .process-gallery__overlay,
.process-gallery__item:focus-visible .process-gallery__overlay {
  opacity: 1;
}

/* ── Caption inside overlay ── */
.process-gallery__caption {
  font-family: var(--font-futura-book);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.35;
  letter-spacing: 0.03em;
  transform: translateY(6px);
  transition: transform 0.4s ease;
  display: block;
}

.process-gallery__item:hover .process-gallery__caption,
.process-gallery__item:focus-visible .process-gallery__caption {
  transform: translateY(0);
}

/* ── Zoom icon — lime pill in bottom-right ── */
.process-gallery__zoom {
  position: absolute;
  bottom: 0.7rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--lime);
  color: var(--heading-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  z-index: 3;
  opacity: 0;
  transform: scale(0.55) translateY(4px);
  transition: opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.process-gallery__item:hover .process-gallery__zoom,
.process-gallery__item:focus-visible .process-gallery__zoom {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Focus ring for keyboard navigation ── */
.process-gallery__item:focus-visible {
  box-shadow: 0 0 0 3px var(--lime);
}

/* ── Hidden / reveal states (Load More) ── */
.process-gallery__item.pg-hidden {
  display: none !important;
}

@keyframes pgReveal {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.process-gallery__item.pg-reveal {
  animation: pgReveal 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── Load More footer ── */
.process-gallery__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  transition: opacity 0.4s ease;
}

.process-gallery__footer--done {
  pointer-events: none;
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.process-gallery__loadmore {
  padding: 0.7rem 2.8rem;
  min-height: 3rem;
  min-width: 12rem;
  font-family: var(--font-futura-bold);
  transition: background 0.28s ease, color 0.28s ease, transform 0.2s ease;
}

.process-gallery__loadmore:hover,
.process-gallery__loadmore:focus-visible {
  background: var(--heading-green);
  color: var(--lime);
  transform: translateY(-2px);
}

/* ── Responsive breakpoints ── */
@media (max-width: 991px) {

  .process-gallery__grid--cols-5,
  .process-gallery__grid--cols-6 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .process-gallery__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .process-gallery__count {
    padding-bottom: 0;
  }

  .process-gallery__grid--cols-4,
  .process-gallery__grid--cols-5,
  .process-gallery__grid--cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-gallery__grid {
    gap: 7px;
  }
}

@media (max-width: 479px) {
  .process-gallery__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   404 — Page Not Found
   ═══════════════════════════════════════════════════════════════════════════ */
.e404 {
  position: relative;
  min-height: calc(100vh - 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--heading-green, #004020);
  overflow: hidden;
  text-align: center;
}

/* subtle radial vignette */
.e404__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(196, 214, 0, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse at 20% 80%, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
  pointer-events: none;
}

.e404__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(3rem, 8vh, 6rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  max-width: 44rem;
}

/* large decorative number */
.e404__code {
  font-family: "FuturaLT-Bold", "Futura", sans-serif;
  font-size: clamp(7rem, 22vw, 14rem);
  line-height: 1;
  color: var(--lime, #c4d600);
  margin: 0 0 0.1em;
  letter-spacing: -0.03em;
  opacity: 0.92;
}

.e404__title {
  font-family: "FuturaLT-Bold", "Futura", sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0 0 1rem;
}

.e404__desc {
  font-family: var(--font-futura-book, "FuturaLT-Book", sans-serif);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  margin: 0 auto 2.5rem;
  max-width: 36rem;
}

.e404__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* also apply to error-404 body class (WordPress default) */
.error-404 .e404__code {
  opacity: 1;
}

/* ==========================================================================
   NOURISHING FORWARD — Intro sub-heading
   ========================================================================== */

.nf-intro__sub {
  font-family: var(--font-futura-book);
  font-size: clamp(0.95rem, 1vw + 0.3rem, 1.125rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 0.75rem;
}

.nf-split__sub {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-futura-book);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.75rem;
}


#nf-s1 .split__text-panel p,
#nf-s2 .split__text-panel p {
  font-size: clamp(1.1rem, 1.3vw + 0.4rem, 1.375rem);
}

.nf-intro {
  background: var(--section-panel-bg);
}

.nf-intro__inner h2 {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.35rem, 2.3vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--heading-green);
  margin: 0 0 1rem;
  line-height: 1;
}

.nf-intro__inner p {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.1rem, 1.3vw + 0.4rem, 1.375rem);
  line-height: 1.46;
  font-family: var(--font-futura-book);
}

/* ==========================================================================
   NOURISHING FORWARD — Cards Grid
   ========================================================================== */

.nf-cards {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  background: #fff;
  border-top: 1px solid rgba(0, 64, 32, 0.08);
}

/* ── Section header ── */
.nf-cards__header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.nf-cards__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-futura-book);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.5rem;
}

.nf-cards__kicker::before {
  content: '';
  display: inline-block;
  width: 1.75rem;
  height: 2px;
  background: var(--lime);
  flex-shrink: 0;
}

.nf-cards__section-title {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  color: var(--heading-green);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0;
}

.nf-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-left: clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 4vw, 4rem);
}

/* ── Individual card ──────────────────────────────────────────────── */

.nf-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s ease;
}

.nf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13);
}

.nf-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}

.nf-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.nf-card:hover .nf-card__media img {
  transform: scale(1.05);
}

.nf-card__body {
  flex: 1;
  padding: clamp(1.25rem, 2vw, 2rem) clamp(1.25rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Sub-heading ─────────────────────────────────────────────────── */

.nf-card__sub {
  font-family: var(--font-futura-book);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* ── Main heading ────────────────────────────────────────────────── */

.nf-card__heading {
  font-family: var(--font-futura-bold);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Paragraph ───────────────────────────────────────────────────── */

.nf-card__text {
  font-family: var(--font-futura-book);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  margin: 0;
}

/* ── Dark card ───────────────────────────────────────────────────── */

.nf-card--dark .nf-card__body {
  background: var(--heading-green);
}

.nf-card--dark .nf-card__sub {
  color: rgba(255, 255, 255, 1);
}

.nf-card--dark .nf-card__heading {
  color: var(--lime);
}

.nf-card--dark .nf-card__text {
  color: rgba(255, 255, 255, 1);
}

/* ── Light card ──────────────────────────────────────────────────── */

.nf-card--light .nf-card__body {
  background: #fff;
}

.nf-card--light .nf-card__sub {
  color: rgba(0, 0, 0, 1);
}

.nf-card--light .nf-card__heading {
  color: var(--heading-green);
}

.nf-card--light .nf-card__text {
  color: #444;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .nf-cards__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ── Ultra-wide (2560 px and above) ─────────────────────────── */
@media (min-width: 160rem) {
  .split--text-left .split__text {
    padding-left: 28rem;
  }

  .story-split__text,
  .crafted-brands__text,
  .consistency-sourcing__text {
    padding-right: 28rem;
  }
}

/* ── Contact Page ─────────────────────────────────────────────────── */

.contact-page-main {
  background: var(--section-panel-bg);
  overflow-x: clip;
}

.contact-page__container {
  width: 100%;
  min-width: 0;
}

.contact-page {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.contact-page__page-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.contact-page__title {
  margin: 0 0 clamp(0.4rem, 1vw, 0.7rem);
  text-align: center;
  font-family: "FuturaLT-Bold", "Futura", var(--font-futura-bold), sans-serif;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: var(--heading-green, #004020);
  text-transform: uppercase;
}

.contact-page__title-rule {
  border: none;
  border-top: 2px solid var(--heading-green, #004020);
  margin: 0;
}

.contact-page__notice {
  max-width: 42rem;
  margin: 0 auto 1.5rem;
  padding: 0.875rem 1.125rem;
  border-radius: 8px;
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.contact-page__notice--is-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.contact-page__notice--is-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.contact-page__layout {
  --contact-info-overlap: clamp(2rem, 3vw, 2.5rem);
  display: grid;
  gap: 0;
  align-items: start;
}

/* Sidebar left (default): info card | form */
.contact-page__layout--sidebar-left {
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
}

/* Sidebar right: form | info card */
.contact-page__layout--sidebar-right {
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
}

.contact-page__layout--sidebar-left .contact-page__form-card,
.contact-page__layout--sidebar-left .contact-page__info-card {
  order: unset;
}

.contact-page__layout--sidebar-left .contact-page__form-card {
  --form-card-pad-left: clamp(1.25rem, 5vw, 60px);
  --form-card-pad-right: var(--form-card-pad-x);
  padding-left: var(--form-card-pad-left);
  padding-right: var(--form-card-pad-x);
}

.contact-page__layout--sidebar-right .contact-page__form-card {
  order: 1;
  --form-card-pad-left: var(--form-card-pad-x);
  --form-card-pad-right: clamp(1.25rem, 5vw, 60px);
  padding-left: var(--form-card-pad-left);
  padding-right: var(--form-card-pad-right);
}

.contact-page__layout--sidebar-right .contact-page__info-card {
  order: 2;
}

.contact-page__layout--form-only {
  grid-template-columns: 1fr;
}

.contact-page__form-card {
  --form-card-pad-top: clamp(1.75rem, 3vw, 2.5rem);
  --form-card-pad-bottom: clamp(1.75rem, 3vw, 2.5rem);
  --form-card-pad-x: clamp(1.25rem, 4vw, 2.5rem);
  --form-card-pad-left: clamp(1.25rem, 5vw, 60px);
  --form-card-pad-right: var(--form-card-pad-x);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: var(--form-card-pad-top) var(--form-card-pad-x) var(--form-card-pad-bottom);
  padding-left: var(--form-card-pad-left);
  border-radius: 1.25rem;
  background: var(--white);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  font-family: var(--font-futura-book);
}

.contact-page__form-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-futura-book);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--heading-green);
}

.contact-page__form-intro {
  margin: 0 0 1.75rem;
  max-width: 36rem;
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #64748b;
}

/* ── Contact form area (any plugin shortcode) ── */
.contact-page__form-body {
  --contact-field-border: #d1d9e0;
  --contact-field-focus: var(--heading-green, #004020);
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
}

.contact-page__form-body form {
  margin: 0;
}

.contact-page__form-body p,
.contact-page__form-body .wpforms-field,
.contact-page__form-body .gfield,
.contact-page__form-body .frm_form_field,
.contact-page__form-body .nf-field-container {
  margin: 0 0 1.125rem;
}

.contact-page__form-body label,
.contact-page__form-body .wpforms-field-label,
.contact-page__form-body .gfield_label,
.contact-page__form-body .frm_primary_label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-futura-book);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--heading-green, #004020);
}

/* CF7: label wraps field + line break */
.contact-page__form-body .wpcf7-form label {
  margin-bottom: 0;
}

.contact-page__form-body .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.45rem;
}

.contact-page__form-body input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.contact-page__form-body textarea,
.contact-page__form-body select,
.contact-page__form-body .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance),
.contact-page__form-body .wpforms-field-medium,
.contact-page__form-body .wpforms-field-large {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.875rem;
  border: 1px solid var(--contact-field-border);
  border-radius: 0.5rem;
  background: var(--white);
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-page__form-body textarea,
.contact-page__form-body .wpcf7-textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.contact-page__form-body input::placeholder,
.contact-page__form-body textarea::placeholder {
  color: #94a3b8;
}

.contact-page__form-body input:not([type="submit"]):not([type="button"]):focus,
.contact-page__form-body textarea:focus,
.contact-page__form-body select:focus,
.contact-page__form-body .wpcf7-form-control:focus {
  border-color: var(--contact-field-focus);
  box-shadow: 0 0 0 1px var(--contact-field-focus);
  outline: none;
}

.contact-page__form-body input[type="checkbox"],
.contact-page__form-body input[type="radio"],
.contact-page__form-body .wpcf7-list-item input {
  width: auto;
  min-height: auto;
  margin: 0 0.5rem 0 0;
  accent-color: var(--contact-field-focus);
}

.contact-page__form-body .wpcf7-list-item,
.contact-page__form-body .wpforms-field-checkbox ul li,
.contact-page__form-body .wpforms-field-radio ul li {
  margin: 0.35rem 0;
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.contact-page__form-body input[type="file"],
.contact-page__form-body .wpcf7-form-control.wpcf7-file {
  padding: 0.5rem 0;
  border: none;
  background: transparent;
}

.contact-page__form-body .contact-page__form-grid,
.contact-page__form-body .apform.contact-page__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem 1.25rem;
}

.contact-page__form-body .contact-page__field--full,
.contact-page__form-body .apform__field--full {
  grid-column: 1 / -1;
}

.contact-page__form-body .contact-page__actions,
.contact-page__form-body .wpforms-submit-container,
.contact-page__form-body .gform_footer,
.contact-page__form-body .frm_submit,
.contact-page__form-body .nf-field-container:has([type="submit"]),
.contact-page__form-body p:has(.wpcf7-submit),
.contact-page__form-body p:has(input[type="submit"]) {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.contact-page__form-body input[type="submit"],
.contact-page__form-body button[type="submit"],
.contact-page__form-body .wpcf7-submit,
.contact-page__form-body .wpforms-submit,
.contact-page__form-body .gform_button,
.contact-page__form-body .frm_button_submit,
.contact-page__form-body .nf-element[type="button"],
.contact-page__form-body .contact-page__submit {
  min-width: 10.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.75rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--heading-green, #004020);
  color: var(--white);
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.contact-page__form-body input[type="submit"]:hover,
.contact-page__form-body button[type="submit"]:hover,
.contact-page__form-body .wpcf7-submit:hover,
.contact-page__form-body .wpforms-submit:hover,
.contact-page__form-body .gform_button:hover,
.contact-page__form-body .contact-page__submit:hover {
  background: #005a2e;
}

.contact-page__form-body .wpcf7-spinner {
  margin-left: 0.75rem;
  vertical-align: middle;
}

.contact-page__form-body .wpcf7-response-output,
.contact-page__form-body .wpforms-error-container,
.contact-page__form-body .gform_confirmation_message,
.contact-page__form-body .frm_message,
.contact-page__form-body .nf-response-msg {
  margin: 1rem 0 0;
  padding: 0.875rem 1.125rem;
  border-radius: 0.5rem;
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
}

.contact-page__form-body .wpcf7-list-item-label,
.contact-page__form-body input[type="file"],
.contact-page__form-body input[type="file"]::file-selector-button,
.contact-page__form-body .wpcf7-form-control.wpcf7-file {
  font-family: var(--font-futura-book);
}

.contact-page__form-body .wpcf7-response-output {
  border-width: 1px;
}

.contact-page__form-body .wpcf7-not-valid-tip,
.contact-page__form-body .wpforms-error,
.contact-page__form-body .gfield_validation_message {
  margin-top: 0.35rem;
  font-family: var(--font-futura-book);
  font-size: 0.8125rem;
  color: #dc2626;
}

.contact-page__form-body .wpcf7 form.invalid .wpcf7-response-output,
.contact-page__form-body .wpcf7 form.failed .wpcf7-response-output {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.contact-page__form-body .wpcf7 form.sent .wpcf7-response-output {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

/* Reset plugin chrome inside card */
.contact-page__form-body .wpforms-container {
  margin: 0;
  max-width: none;
}

.contact-page__form-body .gform_wrapper {
  margin: 0;
}

.contact-page__form-body .gform_wrapper .gform_heading {
  display: none;
}

.contact-page__form-body fieldset.hidden-fields-container {
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-page__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem 1.25rem;
}

.apform__required {
  color: #dc2626;
}

.contact-page__field--full {
  grid-column: 1 / -1;
}

.contact-page__label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-futura-book);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--heading-green);
}

.contact-page__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.875rem;
  border: 1px solid #d1d9e0;
  border-radius: 0.5rem;
  background: var(--white);
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-page__input::placeholder {
  color: #94a3b8;
}

.contact-page__input:focus {
  border-color: var(--heading-green);
  box-shadow: 0 0 0 1px var(--heading-green);
  outline: none;
}

.contact-page__phone-wrap {
  display: flex;
  gap: 0.5rem;
}

.contact-page__input--code {
  flex: 0 0 5.5rem;
  min-width: 5.5rem;
  padding-right: 0.35rem;
}

.contact-page__input--phone {
  flex: 1;
  min-width: 0;
}

.contact-page__textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.contact-page__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.5rem;
}

.contact-page__submit {
  min-width: 10.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.75rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--heading-green);
  color: var(--white);
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.contact-page__submit:hover,
.contact-page__submit:focus {
  background: #005a2e;
}

.contact-page__info-card {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: 1.25rem;
  background: linear-gradient(165deg, #004020 0%, #0c1f15 100%);
  color: var(--white);
  box-shadow: 0 12px 40px rgba(0, 32, 16, 0.28);
}

/* Green card overlaps white form: widen card + negative margin (works left & right) */
.contact-page__layout--sidebar-left .contact-page__info-card,
.contact-page__layout--sidebar-right .contact-page__info-card {
  align-self: center;
}

.contact-page__layout--sidebar-left .contact-page__info-card {
  width: calc(100% + var(--contact-info-overlap));
  max-width: none;
  margin-right: calc(-1 * var(--contact-info-overlap));
  margin-left: 0;
}

.contact-page__layout--sidebar-right .contact-page__info-card {
  width: calc(100% + var(--contact-info-overlap));
  max-width: none;
  margin-left: calc(-1 * var(--contact-info-overlap));
  margin-right: 0;
}

.contact-page__info-greeting {
  margin: 0 0 1.25rem;
  font-family: var(--font-futura-bold);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}

.contact-page__info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-page__info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.08);
}

.contact-page__info-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  color: var(--white);
}

.contact-page__info-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.contact-page__info-label {
  font-family: var(--font-futura-bold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.contact-page__info-value {
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--white);
  text-decoration: none;
  word-break: break-word;
}

.contact-page__info-value:hover {
  color: var(--lime);
  text-decoration: none;
}

.contact-page__info-value--address {
  line-height: 1.5;
}

.contact-page__social {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-page__social-title {
  margin: 0 0 0.85rem;
  font-family: var(--font-futura-bold);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.contact-page__social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-page__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.contact-page__social-link:hover {
  background: var(--lime);
  color: var(--heading-green);
  text-decoration: none;
}

/* ── Career page: reference layout (green card centered on top of full-width form) ── */
.contact-page--career {
  overflow: visible;
}

.contact-page--career .career-page__stack {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
}

.contact-page--career .career-page__form-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Reference: green card centered, top half above white panel, bottom half overlaps edge */
.contact-page--career .career-page__stack--overlap {
  --career-stack-pad-top: clamp(2rem, 5vw, 4.5rem);
  --career-info-overlap: clamp(4rem, 10vw, 7rem);
  --career-info-width: 95%;
  --career-form-pad-top: clamp(6rem, 18vw, 8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-top: var(--career-stack-pad-top);
}

.contact-page--career .career-page__stack--overlap .career-page__info-card,
.contact-page--career .career-page__stack--overlap .career-page__form-card {
  grid-column: 1;
  grid-row: 1;
}

.contact-page--career .career-page__stack--overlap .career-page__info-card {
  position: relative;
  z-index: 2;
  justify-self: center;
  align-self: start;
  box-sizing: border-box;
  width: var(--career-info-width);
  max-width: 100%;
  margin-top: calc(-1 * var(--career-stack-pad-top));
  margin-right: auto;
  margin-bottom: calc(-1 * var(--career-info-overlap));
  margin-left: auto;
}

.contact-page--career .career-page__stack--overlap .career-page__form-card {
  align-self: stretch;
  margin-top: 0;
  padding-top: var(--career-form-pad-top);
  padding-right: var(--form-card-pad-x);
  padding-bottom: var(--form-card-pad-bottom);
  padding-left: var(--form-card-pad-left);
}

.contact-page--career .career-page__info-subheading {
  margin: 0;
  text-align: left;
}

.contact-page--career .career-page__info-subheading p {
  margin: 0 0 0.65rem;
  font-family: var(--font-futura-book);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.contact-page--career .career-page__info-subheading p:last-child {
  margin-bottom: 0;
}

/* ── Contact + Career: responsive (tablet → mobile) ── */
@media (max-width: 64rem) {
  .contact-page--career .career-page__stack--overlap {
    --career-form-pad-top: clamp(7rem, 28vw, 8rem);
    --career-info-overlap: clamp(3.5rem, 10vw, 5.5rem);
  }
}

@media (max-width: 56rem) {
  .contact-page__form-card {
    --form-card-pad-left: clamp(1.25rem, 4vw, 2.5rem);
    --form-card-pad-x: clamp(1.25rem, 4vw, 2.5rem);
  }
}

@media (max-width: 48rem) {

  /* Contact only: stack on small screens (keep side overlap on tablet/desktop) */
  .contact-page:not(.contact-page--career) .contact-page__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .contact-page:not(.contact-page--career) .contact-page__layout--sidebar-left .contact-page__info-card,
  .contact-page:not(.contact-page--career) .contact-page__layout--sidebar-right .contact-page__info-card {
    align-self: stretch;
    width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    max-width: 100%;
  }

  .contact-page:not(.contact-page--career) .contact-page__layout--sidebar-right .contact-page__form-card,
  .contact-page:not(.contact-page--career) .contact-page__layout--sidebar-right .contact-page__info-card {
    order: unset;
  }

  .contact-page {
    padding-top: clamp(1.5rem, 5vw, 2.5rem);
    padding-bottom: clamp(2rem, 5vw, 3rem);
  }

  .contact-page__form-intro {
    max-width: none;
  }

  .contact-page__info-greeting {
    font-size: clamp(1.35rem, 5vw, 2rem);
    line-height: 1.35;
  }

  .contact-page__info-value,
  .contact-page__info-value--address {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .contact-page__social-list {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .contact-page__form-card {
    --form-card-pad-top: clamp(1.5rem, 4vw, 2rem);
    --form-card-pad-bottom: clamp(1.5rem, 4vw, 2rem);
    --form-card-pad-x: clamp(1.25rem, 5vw, 1.75rem);
    --form-card-pad-left: var(--form-card-pad-x);
  }

  /* Mobile: stack cards — no grid overlap (avoids green card covering form fields) */
  .contact-page--career .career-page__stack--overlap {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
  }

  .contact-page--career .career-page__stack--overlap .career-page__info-card,
  .contact-page--career .career-page__stack--overlap .career-page__form-card {
    grid-column: unset;
    grid-row: unset;
  }

  .contact-page--career .career-page__stack--overlap .career-page__info-card {
    order: 1;
    z-index: auto;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem;
  }

  .contact-page--career .career-page__stack--overlap .career-page__form-card {
    order: 2;
    padding-top: var(--form-card-pad-top);
  }
}

@media (max-width: 36rem) {

  .contact-page__form-grid,
  .contact-page__form-body .contact-page__form-grid,
  .contact-page__form-body .apform.contact-page__form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-page__form-card {
    --form-card-pad-top: 1.25rem;
    --form-card-pad-bottom: 1.25rem;
    --form-card-pad-x: 1rem;
    --form-card-pad-left: 1rem;
  }

  .contact-page__form-body input[type="file"],
  .contact-page__form-body .wpcf7-form-control.wpcf7-file {
    font-size: 0.8125rem;
  }

  .contact-page__actions,
  .contact-page__form-body .contact-page__actions,
  .contact-page__form-body p:has(.wpcf7-submit),
  .contact-page__form-body .gform_footer,
  .contact-page__form-body .wpforms-submit-container {
    justify-content: stretch;
  }

  .contact-page__submit,
  .contact-page__form-body input[type="submit"],
  .contact-page__form-body button[type="submit"],
  .contact-page__form-body .wpcf7-submit,
  .contact-page__form-body .wpforms-submit,
  .contact-page__form-body .gform_button {
    width: 100%;
    min-width: 0;
  }

  .contact-page--career .career-page__info-card {
    padding: clamp(1.25rem, 4vw, 1.5rem);
  }
}

.validateStar {
  color: #ff0000;
}