/* ============================================================
   KALPATARU GLOBAL — style.css
   Brand colours taken directly from the logo:
     green  #00AB4E      brown  #603913
   Stack: Bootstrap 5 + custom CSS + jQuery. No other libraries.
   Media queries live in assets/mediaquery/responsive.css
   ============================================================ */

/* ------------------------------------------------------------
   0 · BRAND FONT — okemo (177Studio)
   The typeface used in the logo artwork. Files live in
   assets/fonts/.

   LICENCE: the supplied file is the DEMO cut — personal use
   only, no commercial use. A commercial + webfont licence must
   be bought before this site goes live. See okemo-LICENSE.txt.
------------------------------------------------------------ */
/* Declared at weight 400 ONLY, deliberately. okemo ships as a
   single Regular cut — if the range were declared 400–700 the
   browser would reuse the same outlines for every weight and
   all heading hierarchy would flatten out. Declaring 400 alone
   lets the browser synthesise the heavier weights instead. */
@font-face {
  font-family: 'okemo';
  src: url('../fonts/okemo-Regular.woff2') format('woff2'),
       url('../fonts/okemo-Regular.otf')   format('opentype'),
       url('../fonts/okemo-Regular.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ------------------------------------------------------------
   1 · VARIABLES
------------------------------------------------------------ */
:root {
  /* ---- BRAND — client-supplied, authoritative ----
     Green #00AB4E = rgb(0,171,78)
     Brown #603913 = rgb(96,57,19)
     Everything below is derived from these two. Do not
     introduce colours outside this family. */
  --green:        #00AB4E;
  --green-dark:   #00893E;   /* 80% */
  --green-darker: #006B31;   /* 63% */
  --green-light:  #55D98D;   /* lighter tint, for use on dark grounds */
  --green-soft:   #E8F7EF;   /* 8% tint on white */

  --brown:        #603913;
  --brown-dark:   #3F250C;   /* 65% */
  --brown-mid:    #8A5B2B;
  --brown-soft:   #F5EFE7;

  /* Neutrals */
  --cream:   #FBF8F4;
  --sand:    #EFE8DE;
  --white:   #FFFFFF;
  --text:    #2E1E0C;
  --text-mid:#6B5843;
  --text-lit:#9A8878;
  --muted:   #7A6A57;
  --line:    #E3DACE;

  /* ---- Type ----
     The brand artwork uses two faces, and they have different jobs:

     okemo        = the logo wordmark. A decorative display serif.
                    Used for large headings ONLY — at body sizes its
                    outlines smear together and become unreadable.
     Source Sans  = Adobe's open-source counterpart to the Myriad Pro
                    listed in the CDR, by the same designer. Carries
                    all running text, UI and small type. */
  --font-display: 'okemo', 'Source Sans 3', Georgia, serif;
  --font-head:    'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout — the brand lockup is stacked (tree over wordmark,
     ~1.1:1), so the bar is taller than a horizontal logo needs */
  --header-h:   78px;   /* main bar */
  --topbar-h:   0px;    /* utility bar — desktop only, see responsive.css */
  --radius:     10px;
  --radius-lg:  16px;

  /* Offset for anything position:sticky under the fixed header.
     Uses the SCROLLED header height — the utility bar collapses and
     the main bar loses 10px once .is-scrolled is on, and a sticky
     element only ever engages after the page has been scrolled. */
  --sticky-top: calc(var(--header-h) - 10px);
  --bfilter-h:  72px;   /* height of the blog filter bar */

  /* Motion */
  --ease: cubic-bezier(.25, .8, .3, 1);
}


/* ------------------------------------------------------------
   2 · BASE
------------------------------------------------------------ */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip, not hidden — hidden on <html> breaks position: sticky.
     Stops off-screen reveal states from widening the page. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid);
  background: var(--white);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }

/* h1/h2 carry the brand display face; h3 downward stay in the text
   face, where they sit at sizes the display serif cannot hold. */
h1, h2, h3, h4, h5, h6 {
  color: var(--brown);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 16px;
}
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .2px; }
h3, h4, h5, h6 { font-family: var(--font-head); }
/* font-weight stays 400 — okemo ships one weight only, and forcing
   700 makes the browser synthesise bold, which smears/doubles the
   outline on rounded letters at large sizes (visible on .phero__title,
   .arttitle and any plain <h1>). See the same fix on .hero__title. */
h1 { font-size: 48px; line-height: 1.12; }
h2 { font-size: 38px; line-height: 1.18; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--green-dark); }

img { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 16px; padding-left: 20px; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

/* Form controls and Bootstrap components declare their own family.
   Force inheritance so the brand font really does cover every last
   piece of text on the page, including inputs and buttons. */
input, select, textarea, optgroup,
.form-control, .form-select, .btn, .btn-k {
  font-family: inherit;
}

::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

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


/* ------------------------------------------------------------
   3 · HELPERS
------------------------------------------------------------ */
.section       { padding: 18px 0; position: relative; background: var(--cream); }
.section-sm    { padding: 60px 0; }
.bg-cream      { background: var(--cream); }   /* kept as a no-op alias */
.bg-soft-green { background: var(--cream); }
.bg-brown      { background: var(--cream); }
.bg-brown h1, .bg-brown h2, .bg-brown h3, .bg-brown h4 { color: var(--brown); }
.bg-brown p { color: var(--muted); }

.text-green { color: var(--green) !important; }
.text-brown { color: var(--brown) !important; }

/* Section heading block */
.sec-head { margin-bottom: 46px; }
.sec-head.center { text-align: center; margin-inline: auto; max-width: 720px; }

.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}
.sec-label::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--green);
  border-radius: 2px;
}
.sec-head.center .sec-label::after {
  content: '';
  width: 26px; height: 2px;
  background: var(--green);
  border-radius: 2px;
}

.sec-title { margin-bottom: 14px; }
.sec-text  { font-size: 16.5px; color: var(--muted); max-width: 640px; }
.sec-text + .sec-text { margin-top: 14px; }
.sec-head.center .sec-text { margin-inline: auto; }

/* One-off: this section's line is longer than the usual .sec-text
   copy, so it needs more room than the shared 640px cap to fit on
   one line — scoped so every other .sec-text stays untouched. */
.sec-head.center.sec-head--wide { max-width: 900px; }
.sec-text.sec-text--wide { max-width: 820px; }

/* Force this one long heading onto a single line — only once the
   widened .sec-head--wide container actually has room for it, so
   mobile still wraps normally instead of overflowing. */
.sec-title--nowrap { white-space: normal; }

/* Buttons */
.btn-k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 50px;
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn-k svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.btn-k:hover svg { transform: translateX(4px); }

.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); color: #fff; transform: translateY(-2px); }

.btn-brown { background: var(--brown); color: #fff; }
.btn-brown:hover { background: var(--brown-dark); color: #fff; transform: translateY(-2px); }

.btn-outline { border-color: var(--green); color: var(--green); background: transparent; }
.btn-outline:hover { background: var(--green); color: #fff; }

.btn-white-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-white-outline:hover { background: #fff; color: var(--brown); border-color: #fff; }

/* Tertiary hero action — reads as a utility link, not a third CTA */
.btn-brochure {
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.btn-brochure:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.btn-brochure svg { transition: transform .3s var(--ease); }
.btn-brochure:hover svg { transform: translateY(2px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }


/* ------------------------------------------------------------
   4 · SCROLL ANIMATIONS
   One class toggled by IntersectionObserver; the browser does
   the rest with a compositor-friendly transition.
------------------------------------------------------------ */
[data-anim] {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
[data-anim="up"]    { transform: translateY(40px); }
[data-anim="down"]  { transform: translateY(-40px); }
[data-anim="left"]  { transform: translateX(-55px); }
[data-anim="right"] { transform: translateX(55px); }
[data-anim="zoom"]  { transform: scale(.92); }
[data-anim="fade"]  { transform: none; }

[data-anim].in-view {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Never hide content if JavaScript fails */
.no-js [data-anim] { opacity: 1; transform: none; }


/* ------------------------------------------------------------
   5 · HEADER
   Two tiers: a slim utility bar that collapses on scroll, and
   the main bar with logo, navigation and CTA.
------------------------------------------------------------ */
/* Sticky on every page and at every breakpoint. It deliberately
   does not hide on scroll-down — the nav stays reachable at all
   times. Page content clears it via --header-h + --topbar-h. */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

/* ---- Utility bar ---- */
.topbar {
  background: var(--brown-dark);
  color: rgba(255,255,255,.72);
  height: var(--topbar-h);
  overflow: hidden;
  transition: height .4s var(--ease), opacity .35s ease;
}
.header.is-scrolled .topbar { height: 0; opacity: 0; }

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  gap: 20px;
}
.topbar__group { display: flex; align-items: center; gap: 8px; min-width: 0; }

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  transition: color .25s ease;
}
.topbar__item svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; }
a.topbar__item:hover { color: #fff; }
.topbar__item a { color: inherit; transition: color .25s ease; }
.topbar__item a:hover { color: #fff; }
.topbar__pipe { font-style: normal; opacity: .4; }

.topbar__tag {
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--green);
}
.topbar__sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }

.topbar__social { display: flex; gap: 6px; }
.topbar__social a {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.7);
  transition: background .3s ease, color .3s ease, transform .3s var(--ease);
}
.topbar__social a:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.topbar__social svg { width: 12px; height: 12px; }

/* ---- Main bar ---- */
.header__main {
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--line);
  transition: height .35s var(--ease), box-shadow .35s ease;
}
.header.is-scrolled .header__main {
  height: calc(var(--header-h) - 10px);
  box-shadow: 0 6px 28px rgba(96,57,19,.10);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;              /* never let the logo push the burger out */
  max-width: 62%;
}
.logo img {
  height: 58px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  transition: height .35s var(--ease);
}
.header.is-scrolled .logo img { height: 48px; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;            /* the menu button always keeps its space */
}

/* ---- Navigation ---- */
.nav { display: none; align-items: center; gap: 4px; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border-radius: 8px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  color: var(--brown);
  transition: color .28s ease, background .28s ease;
}
/* Pill grows behind the label. z-index: -1 keeps it under the
   text — without it the fill paints over the link. */
.nav__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 8px;
  background: var(--green-soft);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.nav__link:hover { color: var(--green-dark); }
.nav__link:hover::before { opacity: 1; transform: none; }

/* Active page gets a small dot beneath */
.nav__link.active { color: var(--green-dark); }
.nav__link.active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--green);
}

.nav__item { position: relative; }
.nav__caret { width: 9px; height: 9px; transition: transform .3s var(--ease); }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

/* ---- Dropdown ---- */
.dropdown-k {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 286px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(96,57,19,.16);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), transform .3s var(--ease), visibility .3s;
}
/* Little arrow pointing at the trigger */
.dropdown-k::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.nav__item:hover .dropdown-k,
.nav__item:focus-within .dropdown-k {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-k a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 9px;
  font-size: 14.5px;
  color: var(--brown);
  transition: background .22s ease, color .22s ease, padding-left .25s var(--ease);
}
.dropdown-k a i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand);
  flex-shrink: 0;
  transition: background .25s ease, transform .3s var(--ease);
}
.dropdown-k a:hover { background: var(--green-soft); color: var(--green-dark); padding-left: 18px; }
.dropdown-k a:hover i { background: var(--green); transform: scale(1.4); }

/* ---- Animated menu button ---- */
.burger {
  position: relative;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--green) 0%, var(--green-darker) 100%);
  box-shadow: 0 8px 20px rgba(0,171,78,.30);
  display: none;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: border-radius .45s var(--ease), box-shadow .35s ease, transform .35s var(--ease);
}
.burger:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,171,78,.42); }
.burger.is-open { border-radius: 50%; }

/* Sheen that sweeps across when opened */
.burger::after {
  content: '';
  position: absolute;
  top: -30%; left: -70%;
  width: 45%; height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--ease);
}
.burger:hover::after { left: 130%; }

.burger__box {
  position: relative;
  width: 22px; height: 16px;
  display: block;
  transition: transform .5s var(--ease);
}
.burger.is-open .burger__box { transform: rotate(180deg); }

.burger__line {
  position: absolute;
  left: 0;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .45s var(--ease), opacity .25s ease, width .35s var(--ease);
}
.burger__line:nth-child(1) { top: 0;    width: 100%; }
.burger__line:nth-child(2) { top: 7px;  width: 65%; }
.burger__line:nth-child(3) { top: 14px; width: 100%; }
.burger:hover .burger__line:nth-child(2) { width: 100%; }

.burger.is-open .burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open .burger__line:nth-child(2) { opacity: 0; transform: translateX(-14px); }
.burger.is-open .burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------
   6 · MOBILE MENU
------------------------------------------------------------ */
.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  z-index: 999;
  background: #fff;
  padding: 8px 0 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .4s var(--ease), visibility .4s;
  display: none;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }

.mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list > li { border-bottom: 1px solid var(--line); }

/* Row is a flex pair: label on the left, toggle on the right */
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
  text-align: left;
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--brown);
  transition: color .25s ease, padding-left .3s var(--ease);
}
.mobile-menu__link:hover,
.mobile-menu__link.active { color: var(--green-dark); }
.mobile-menu__link.active { padding-left: 4px; }

/* Round +/- toggle — far clearer than a small chevron, and it
   cannot be pushed out of view by a long label */
.mobile-menu__plus {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--green-soft);
  flex-shrink: 0;
  transition: background .3s var(--ease), transform .4s var(--ease);
}
.mobile-menu__plus::before,
.mobile-menu__plus::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--green-dark);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .35s var(--ease), background .3s ease;
}
.mobile-menu__plus::before { width: 11px; height: 2px; }
.mobile-menu__plus::after  { width: 2px;  height: 11px; }

.mobile-menu__link.is-open .mobile-menu__plus {
  background: var(--green);
  transform: rotate(180deg);
}
.mobile-menu__link.is-open .mobile-menu__plus::before { background: #fff; }
.mobile-menu__link.is-open .mobile-menu__plus::after  { transform: translate(-50%, -50%) scaleY(0); }

/* Submenu panel */
.mobile-sub {
  list-style: none;
  margin: 0 0 14px;
  padding: 6px 0;
  display: none;
  background: var(--cream);
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.mobile-sub li { border-bottom: 1px solid rgba(227,218,206,.6); }
.mobile-sub li:last-child { border-bottom: 0; }
.mobile-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 14.5px;
  color: var(--text-mid);
  transition: color .25s ease, background .25s ease, padding-left .28s var(--ease);
}
.mobile-sub a::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sand);
  flex-shrink: 0;
  transition: background .25s ease, transform .3s var(--ease);
}
.mobile-sub a:hover {
  color: var(--green-dark);
  background: rgba(0,171,78,.06);
  padding-left: 22px;
}
.mobile-sub a:hover::before { background: var(--green); transform: scale(1.4); }

.mobile-menu__foot { margin-top: 24px; }
.mobile-menu__foot .btn-k { width: 100%; justify-content: center; }

/* Contact strip under the button */
.mobile-menu__contact {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}
.mobile-menu__contact a,
.mobile-menu__contact span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
}
.mobile-menu__contact svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; }


/* ------------------------------------------------------------
   7 · HERO SLIDER
------------------------------------------------------------ */
.hero {
  position: relative;
  margin-top: calc(var(--topbar-h) + var(--header-h));
  overflow: hidden;
  background: var(--brown-dark);
}

.hero__viewport { position: relative; overflow: hidden; }

.hero__track {
  display: flex;
  transition: transform .85s var(--ease);
  will-change: transform;
}

.hero__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-height: 640px;
  height: calc(100vh - var(--header-h));
  max-height: 820px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: 1; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform 7s linear;
}
.hero__slide.is-active .hero__bg img { transform: scale(1); }

/* Readability wash — keeps text legible on any photograph */
.hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(58% 80% at 6% 104%, rgba(0,171,78,.34) 0%, transparent 62%),
    linear-gradient(90deg, rgba(45,26,8,.86) 0%, rgba(45,26,8,.62) 45%, rgba(45,26,8,.15) 100%),
    linear-gradient(180deg, rgba(45,26,8,.30) 0%, transparent 40%, rgba(45,26,8,.45) 100%);
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: 60px;
}
.hero__inner { max-width: 660px; }

/* Type scales fluidly with the viewport, so every screen size
   between the breakpoints is handled, not just the five we
   wrote rules for. */
.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(0,171,78,.92);
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(.62rem, .95vw, .75rem);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.hero__tag i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: tagPulse 2s ease-in-out infinite;
}
@keyframes tagPulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

.hero__title {
  color: #fff;
  font-size: clamp(1.65rem, 5.4vw, 4.25rem);
  line-height: 1.08;
  font-weight: 400;   /* okemo is single-weight; 700 forced a smeared synthetic bold */
  margin-bottom: clamp(12px, 1.6vw, 20px);
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.hero__title span { color: var(--green); }

.hero__text {
  color: rgba(255,255,255,.88);
  font-size: clamp(.92rem, 1.3vw, 1.08rem);
  line-height: 1.72;
  max-width: 540px;
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Slide content animates in each time its slide becomes active */
.hero__tag, .hero__title, .hero__text, .hero__actions {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.hero__slide.is-active .hero__tag     { opacity: 1; transform: none; transition-delay: .15s; }
.hero__slide.is-active .hero__title   { opacity: 1; transform: none; transition-delay: .28s; }
.hero__slide.is-active .hero__text    { opacity: 1; transform: none; transition-delay: .41s; }
.hero__slide.is-active .hero__actions { opacity: 1; transform: none; transition-delay: .54s; }

/* ---- Decorative layer ----------------------------------
   Holds only the thin rule. The green glow lives inside the
   slide's own gradient (below) so it can never wash over the
   headline sitting above it. */
.hero__deco { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero__deco .container { height: 100%; }

/* Thin rule that runs down the left edge of the content column */
.hero__rule {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.22) 22%, rgba(255,255,255,.22) 78%, transparent);
}
.hero__rule::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 38%;
  width: 5px; height: 78px;
  background: var(--green);
  border-radius: 4px;
  box-shadow: 0 0 22px rgba(0,171,78,.7);
}

/* ---- Vertical slide navigation (desktop) --------------- */
.hero__side {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  padding-right: max(24px, calc((100vw - 1320px) / 2));
  display: none;
}
.hero__snav {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 0;
  text-align: left;
  color: rgba(255,255,255,.55);
  transition: color .35s var(--ease);
}
.hero__snav:hover { color: #fff; }
.hero__snav.is-active { color: #fff; }

.hero__snav-num {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  min-width: 22px;
  transition: color .35s ease;
}
.hero__snav.is-active .hero__snav-num { color: var(--green); }

.hero__snav-label {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.hero__snav:hover .hero__snav-label,
.hero__snav.is-active .hero__snav-label { opacity: 1; transform: none; }

/* The rail doubles as the auto-advance timer */
.hero__snav-bar {
  position: relative;
  display: block;
  width: 46px; height: 2px;
  background: rgba(255,255,255,.28);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  order: -1;
  transition: width .35s var(--ease);
}
.hero__snav.is-active .hero__snav-bar { width: 74px; background: rgba(255,255,255,.2); }
.hero__snav-bar i {
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__snav.is-active .hero__snav-bar i.is-running {
  transition: transform 6s linear;
  transform: scaleX(1);
}

/* ---- Bottom bar ---------------------------------------- */
.hero__bottom {
  position: absolute;
  left: 0; right: 0;
  bottom: 34px;
  z-index: 6;
}
.hero__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Scroll cue */
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  transition: color .3s ease;
}
.hero__scroll:hover { color: var(--green); }
.hero__scroll-icon {
  position: relative;
  width: 26px; height: 40px;
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 14px;
  flex-shrink: 0;
  overflow: hidden;
}
.hero__scroll-icon i {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  background: var(--green);
  border-radius: 3px;
  animation: heroScroll 1.9s var(--ease) infinite;
}
@keyframes heroScroll {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(15px); opacity: 0; }
}

/* Dots (mobile primary control) */
.hero__dots { display: none; gap: 9px; align-items: center; }
.hero__dot {
  position: relative;
  width: 26px; height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.3);
  overflow: hidden;
  padding: 0;
  transition: width .35s var(--ease), background .3s ease;
}
.hero__dot.is-active { width: 52px; background: rgba(255,255,255,.24); }
.hero__dot i {
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__dot.is-active i.is-running { transition: transform 6s linear; transform: scaleX(1); }

/* Counter */
.hero__count {
  margin-left: auto;   /* stay pinned right even as the sole child now
                           that .hero__scroll (its old space-between
                           partner) has been removed — otherwise it
                           collapses to the left, over the CTA buttons */
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  letter-spacing: 1px;
  white-space: nowrap;
}
.hero__count b {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  margin-right: 2px;
}


/* Marquee keyframes — used by the green commodity bar */
@keyframes tickerLeft  { from { transform: translate3d(0,0,0); }    to { transform: translate3d(-50%,0,0); } }
@keyframes tickerRight { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

@media (prefers-reduced-motion: reduce) {
  .combar__track { animation: none !important; }
}


/* ------------------------------------------------------------
   8 · QUICK BAR
   An elevated card that overlaps upward out of the CTA band
   and into the section above it.
------------------------------------------------------------ */
/* Sits at the top of the CTA band, above the heading. The band
   carries equal padding top and bottom so the brown space above
   this card matches the space below the heading. */
.qbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 56px rgba(0,0,0,.22);
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 56px;
}

.qbar__item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;        /* was flex-start — caused the ragged rows */
  gap: 16px;
  min-height: 112px;          /* keeps all four cells the same height */
  padding: 24px 22px;
  background: #fff;
  transition: background .35s var(--ease);
}
.qbar__item + .qbar__item { border-left: 1px solid var(--line); }
.qbar__item:hover { background: var(--cream); }

/* Green rule draws across the top on hover */
.qbar__item::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.qbar__item:hover::before { transform: scaleX(1); }

/* Ghost index number */
/* Sits behind the copy as a watermark — small enough that it
   never competes with the text at any width */
.qbar__num {
  position: absolute;
  right: 12px;
  bottom: 2px;
  z-index: 0;
  font-family: var(--font-head);
  font-size: 46px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: var(--sand);
  opacity: .42;
  pointer-events: none;
  transition: color .35s ease, opacity .35s ease, transform .45s var(--ease);
}
.qbar__item:hover .qbar__num {
  color: var(--green);
  opacity: .2;
  transform: translateY(-3px);
}

.qbar__icon {
  position: relative;
  z-index: 1;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease);
}
.qbar__icon svg { width: 23px; height: 23px; }
.qbar__item:hover .qbar__icon {
  background: var(--green);
  color: #fff;
  transform: translateY(-3px) rotate(-6deg);
}

.qbar__text { position: relative; z-index: 1; min-width: 0; }
.qbar__text b {
  display: block;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--brown);
  line-height: 1.28;
  margin-bottom: 4px;
}
.qbar__text span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}


/* ------------------------------------------------------------
   9 · ABOUT
------------------------------------------------------------ */
.about__media { position: relative; }
.about__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(96,57,19,.16);
}
.about__img img { width: 100%; height: 100%; object-fit: cover; }

.about__inset {
  position: absolute;
  right: -22px;
  bottom: -30px;
  width: 250px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 16px 40px rgba(96,57,19,.18);
}

.about__badge {
  position: absolute;
  left: -22px;
  top: 34px;
  background: var(--green);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: 0 14px 34px rgba(0,171,78,.32);
}
.about__badge b {
  display: block;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}
.about__badge span { font-size: 12.5px; opacity: .92; }

.about__points { list-style: none; margin: 26px 0 30px; padding: 0; }
.about__points li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 13px;
  color: var(--text-mid);
}
.about__points li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green-soft);
  border: 2px solid var(--green);
}
.about__points li::after {
  content: '';
  position: absolute;
  left: 6px; top: 12px;
  width: 5px; height: 8px;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* ------------------------------------------------------------
   9b · INTRO (centred statement under the hero)
------------------------------------------------------------ */
.intro { text-align: center; padding: 78px 0 62px; background: #FAFAFA; }
.intro__label {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.intro__title {
  font-size: clamp(1.55rem, 3.4vw, 2.6rem);
  color: var(--brown);
  margin-bottom: 26px;
}
/* Rule with two dots, as on the live site */
.intro__divider {
  position: relative;
  width: min(370px, 70%);
  height: 1px;
  margin: 0 auto 26px;
  background: var(--line);
}
.intro__divider::before,
.intro__divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  transform: translateY(-50%);
}
.intro__divider::before { left: calc(50% - 11px); }
.intro__divider::after  { left: calc(50% + 4px); }

.intro__text {
  max-width: 780px;
  margin: 0 auto;
  font-size: clamp(.95rem, 1.4vw, 1.06rem);
  line-height: 1.85;
  color: var(--muted);
}


/* ------------------------------------------------------------
   9c · GREEN COMMODITY BAR
------------------------------------------------------------ */
.combar {
  background: var(--green);
  padding: 16px 0;
  overflow: hidden;
}
.combar__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  animation: tickerLeft 34s linear infinite;
  will-change: transform;
}
.combar:hover .combar__track { animation-play-state: paused; }
.combar__item {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding-right: .8em;
  font-family: var(--font-head);
  font-size: clamp(.85rem, 1.5vw, 1.12rem);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
}
.combar__item::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   9d · OUR CORE CAPABILITIES
   Rebuilt: light ground instead of brown, and a connected
   five-step chain instead of the old collage + bullet list.
------------------------------------------------------------ */
.caps {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background: var(--cream);
}
/* Soft green bloom behind the chain */
.caps__glow {
  position: absolute;
  left: 50%; bottom: -22%;
  width: 70%; padding-top: 46%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,171,78,.16) 0%, transparent 68%);
  pointer-events: none;
}
.caps__inner { position: relative; z-index: 2; }

/* The chain */
.caps__chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 64px;
}
/* Rail the markers sit on */
.caps__rail {
  position: absolute;
  left: 8%; right: 8%;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,171,78,.42) 12%, rgba(0,171,78,.42) 88%, transparent);
}

.cap {
  position: relative;
  padding: 76px 18px 30px;
  text-align: center;
  border-radius: 18px;
  transition: background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cap:hover {
  background: #fff;
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(96,57,19,.12);
}

/* Marker on the rail */
.cap__dot {
  position: absolute;
  top: 26px; left: 50%;
  width: 18px; height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--green);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cap:hover .cap__dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(0,171,78,.16);
}

.cap__num {
  position: absolute;
  top: 54px; left: 0; right: 0;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--green-dark);
}

.cap__icon {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--green);
  display: grid;
  place-items: center;
  transition: background .4s var(--ease), color .4s var(--ease),
              transform .45s var(--ease), border-color .4s ease;
}
.cap__icon svg { width: 27px; height: 27px; }
.cap:hover .cap__icon {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: rotate(-8deg) scale(1.06);
}

.cap h3 {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--brown);
  margin: 0;
}

/* ------------------------------------------------------------
   9e · OUR EXPERTISE
------------------------------------------------------------ */
.expertise { position: relative; overflow: hidden; padding: 92px 0; background: var(--cream); }
.expertise__bg { position: absolute; inset: 0; z-index: 0; opacity: .16; }
.expertise__bg img { width: 100%; height: 100%; object-fit: cover; }
.expertise__inner { position: relative; z-index: 2; }
.expertise .intro__divider { margin-bottom: 48px; }

/* --- Expertise box ---
   Height follows the content with a floor, rather than a forced
   1:1 ratio. A square at 3-across is ~410px tall for ~120px of
   content, which left the cards looking empty. */
.xbox {
  position: relative;
  min-height: 300px;   /* taller now that each card carries a description */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: 28px;
  /* Deep brand-green surface with a glossy highlight in the top-left.
     The old diagonal hatching read as a printing artefact. */
  background:
    radial-gradient(95% 70% at 14% 0%, rgba(255,255,255,.17) 0%, transparent 58%),
    linear-gradient(158deg, #0A7C45 0%, #066039 48%, #0B3A21 100%);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11,58,34,.18);
  transition: background .5s var(--ease), border-color .4s var(--ease),
              box-shadow .45s var(--ease), transform .45s var(--ease);
}

/* Hover lifts the surface a shade brighter */
.xbox:hover {
  background:
    radial-gradient(95% 70% at 14% 0%, rgba(255,255,255,.24) 0%, transparent 58%),
    linear-gradient(158deg, #0E9A55 0%, #077A44 52%, #0D4428 100%);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 26px 54px rgba(6,96,58,.42);
  transform: translateY(-7px);
}

/* Warm glow bleeding up from the bottom corner */
.xbox::before {
  content: '';
  position: absolute;
  right: -14%;
  bottom: -34%;
  width: 74%;
  padding-top: 74%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,171,78,.55) 0%, transparent 68%);
  opacity: .55;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.xbox:hover::before { opacity: 1; transform: scale(1.15); }

/* Light sweeps diagonally across the card on hover */
.xbox::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -70%;
  width: 45%;
  height: 140%;
  z-index: 3;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .85s var(--ease);
}
.xbox:hover::after { left: 135%; }

.xbox__top { position: relative; z-index: 2; }

/* Rounded SQUARE icon tile — deliberately not a circle */
.xbox__icon {
  width: 66px; height: 66px;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .5s var(--ease);
}
.xbox__icon svg { width: 30px; height: 30px; }

/* Icon fills solid white and pulses a soft ring */
.xbox:hover .xbox__icon {
  background: #fff;
  border-color: #fff;
  color: var(--green-dark);
  transform: rotate(-8deg) scale(1.08);
  animation: xboxRing 1.9s ease-out infinite;
}
@keyframes xboxRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 16px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Oversized index number, used as the card's background graphic —
   this is what fills the space instead of dead white. */
.xbox__num {
  position: absolute;
  right: 16px;
  bottom: -22px;
  z-index: 1;
  font-family: var(--font-head);
  font-size: 108px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  opacity: .13;
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.xbox:hover .xbox__num {
  opacity: .26;
  transform: translateY(-8px) scale(1.06);
}

.xbox__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-size: clamp(1.02rem, 1.55vw, 1.24rem);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  max-width: 92%;
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
  transition: transform .45s var(--ease);
}
.xbox:hover .xbox__title { transform: translateX(4px); }

.xbox__title::after {
  content: '';
  display: block;
  width: 30px; height: 3px;
  margin-top: 14px;
  background: rgba(255,255,255,.55);
  border-radius: 3px;
  transition: width .45s var(--ease), background .4s var(--ease);
}
.xbox:hover .xbox__title::after { width: 58px; background: #fff; }

/* Supporting copy added per the client brief */
.xbox__text {
  position: relative;
  z-index: 2;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.8);
}


/* ------------------------------------------------------------
   10 · STATS
------------------------------------------------------------ */
.stat-box { text-align: center; padding: 10px; }
.stat-box b {
  display: block;
  font-family: var(--font-head);
  font-size: 46px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-box span { font-size: 14.5px; color: var(--muted); }
.bg-brown .stat-box b { color: var(--green); }
.bg-brown .stat-box span { color: rgba(255,255,255,.7); }


/* ------------------------------------------------------------
   11 · PRODUCT CARDS
------------------------------------------------------------ */
.pcard {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(96,57,19,.15);
  border-color: var(--green);
}

.pcard__media { position: relative; aspect-ratio: 16/11; overflow: hidden; }
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.07); }

.pcard__num {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: rgba(255,255,255,.94);
  color: var(--green);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 11px;
  border-radius: 6px;
}

.pcard__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.pcard__body h3 { font-size: 20px; margin-bottom: 10px; transition: color .3s ease; }
.pcard:hover .pcard__body h3 { color: var(--green); }
.pcard__body p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }

.pcard__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pcard__list li {
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 30px;
  background: var(--brown-soft);
  color: var(--brown);
}
.pcard__foot { margin-top: auto; }

/* Enquiry card at the end of the products slider */
.pcard--enquiry {
  background: var(--green-soft);
  border-color: var(--green);
  justify-content: center;
  text-align: center;
}
.pcard--enquiry:hover { transform: none; box-shadow: none; }
.pcard--enquiry .pcard__body { justify-content: center; align-items: center; padding: 34px 26px; }
.pcard--enquiry h3 { margin-bottom: 12px; }
.pcard--enquiry p  { margin-bottom: 22px; }


/* ------------------------------------------------------------
   11b · SLIDER (reusable)
   Cards per view is set purely in CSS via --per-view; the JS
   only reads that number and writes one transform. Sizing
   therefore stays correct even before images have loaded.
------------------------------------------------------------ */
.kslider {
  position: relative;
  --per-view: 1;
  --slider-gap: 24px;
}

.kslider__viewport {
  overflow: hidden;
  /* vertical breathing room so the card hover-lift and shadow
     are not clipped by the horizontal overflow mask */
  padding: 10px 0 22px;
}

.kslider__track {
  display: flex;
  gap: var(--slider-gap);
  transition: transform .75s cubic-bezier(.25, .8, .3, 1);
  will-change: transform;
}

.kslider__slide {
  flex: 0 0 calc((100% - (var(--slider-gap) * (var(--per-view) - 1))) / var(--per-view));
  max-width: calc((100% - (var(--slider-gap) * (var(--per-view) - 1))) / var(--per-view));
  display: flex;
}
.kslider__slide > * { width: 100%; }

/* Slides outside the current view fade back slightly.
   Gated on .is-ready so the cards are never dimmed if the
   slider script fails to run. */
.kslider__slide { transition: opacity .55s var(--ease), transform .55s var(--ease); }
.kslider.is-ready .kslider__slide { opacity: .4; transform: scale(.96); }
.kslider.is-ready .kslider__slide.is-visible { opacity: 1; transform: none; }

/* Controls */
.kslider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}

.kslider__arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--brown);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease), opacity .3s ease;
}
.kslider__arrow svg { width: 17px; height: 17px; }
.kslider__arrow:hover:not(:disabled) {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: scale(1.06);
}
.kslider__arrow:disabled { opacity: .32; cursor: default; }

.kslider__dots { display: flex; align-items: center; gap: 8px; }
.kslider__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sand);
  padding: 0;
  transition: background .3s ease, width .35s var(--ease), border-radius .3s ease;
}
.kslider__dot:hover { background: var(--brown-mid); }
.kslider__dot.is-active { background: var(--green); width: 28px; border-radius: 8px; }

/* Counter */
.kslider__count {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  min-width: 62px;
  text-align: center;
}
.kslider__count b { color: var(--green); font-size: 18px; }

/* On a dark background */
.bg-brown .kslider__arrow {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.bg-brown .kslider__dot { background: rgba(255,255,255,.25); }
.bg-brown .kslider__dot.is-active { background: var(--green); }


/* ------------------------------------------------------------
   11c · PRODUCT TILE CAROUSEL
   Each slide is a PAGE. A page is a grid: 2 x 2 on mobile,
   4 across on tablet and desktop. The JS only ever moves one
   page width, so the same markup serves every breakpoint.
------------------------------------------------------------ */
.pslider { position: relative; --page-gap: 14px; }
.pslider__viewport { overflow: hidden; }

.pslider__track {
  display: flex;
  transition: transform .8s cubic-bezier(.25, .8, .3, 1);
  will-change: transform;
}

.pslider__page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobile: 2 across, 2 rows */
  gap: var(--page-gap);
}

/* --- The tile --- */
.ptile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--brown-dark);
  isolation: isolate;
}

.ptile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.ptile:hover img { transform: scale(1.08); }

/* Readability layer — always present, deepens to green on hover */
.ptile__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,11,3,.20) 0%, rgba(20,11,3,.55) 55%, rgba(20,11,3,.86) 100%);
  transition: background .45s var(--ease);
}
.ptile:hover .ptile__veil {
  background:
    linear-gradient(180deg, rgba(0,90,42,.72) 0%, rgba(0,60,28,.90) 100%);
}

/* Hairline frame that draws in on hover */
.ptile::after {
  content: '';
  position: absolute;
  inset: 12px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.ptile:hover::after { opacity: 1; transform: none; }

.ptile__body {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
}

/* Index badge — a small ruled number above the name */
.ptile__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--green);
  margin-bottom: 12px;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.ptile__num::before,
.ptile__num::after {
  content: '';
  width: 14px; height: 1px;
  background: currentColor;
  opacity: .7;
}

/* Product name — the designed element on every screen size */
.ptile__name {
  font-family: var(--font-head);
  font-size: clamp(.92rem, 1.35vw, 1.22rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
  transition: transform .5s var(--ease), letter-spacing .5s var(--ease);
}
.ptile:hover .ptile__name { letter-spacing: 2px; }

/* Rule under the name */
.ptile__name::after {
  content: '';
  display: block;
  width: 30px; height: 2px;
  margin: 12px auto 0;
  background: var(--green);
  border-radius: 2px;
  transition: width .45s var(--ease), background .35s ease;
}
.ptile:hover .ptile__name::after { width: 54px; background: #fff; }

.ptile:hover .ptile__num { opacity: 0; transform: translateY(-8px); }

/* Only the Read More appears on hover. The client asked that the
   commodity list NOT be shown here — the product page carries it. */
.ptile__cta {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .45s var(--ease), opacity .35s var(--ease), margin-top .45s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  padding: 8px 16px;
  border-radius: 40px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.45);
}
.ptile__cta svg { width: 12px; height: 12px; }

/* No hover on touch — show the frame, keep the tile to its title */
@media (hover: none) {
  .ptile__num { display: none; }
  .ptile::after { opacity: 1; transform: none; }
}


/* ------------------------------------------------------------
   11d · TRUST SECTION  (Why global buyers trust us)
------------------------------------------------------------ */
/* Client asked for the brown ground to go — this is now a deep
   forest green built from the brand green, with a faint warm
   undertone so it still sits in the same family. */
.trust {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.trust::before {
  content: '';
  position: absolute;
  left: -8%; top: -20%;
  width: 52%; padding-top: 52%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,171,78,.30) 0%, transparent 68%);
  pointer-events: none;
}
.trust__inner { position: relative; z-index: 2; }

/* This section used to carry .bg-brown, which supplied the light
   heading colour. Renaming it to .trust orphaned that rule and the
   title rendered dark-brown on brown — invisible. */
.trust h1, .trust h2, .trust h3, .trust h4 { color: var(--brown); }
.trust .sec-text { color: var(--muted); }

/* --- Trust card --- */
.tcard {
  position: relative;
  height: 100%;
  padding: 30px 26px;
  border-radius: 18px;
  /* Was a translucent white panel that relied on a dark section
     behind it. With every section on cream it now carries its own
     dark ground — that contrast is what separates the block. */
  background:
    radial-gradient(95% 70% at 14% 0%, rgba(255,255,255,.13) 0%, transparent 58%),
    linear-gradient(158deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(11,58,33,.18);
  overflow: hidden;
  transition: border-color .4s var(--ease),
              transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tcard:hover {
  border-color: rgba(255,255,255,.3);
  transform: translateY(-7px);
  box-shadow: 0 24px 50px rgba(6,96,58,.34);
}

/* Accent rule that draws across the top on hover */
.tcard::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.tcard:hover::before { transform: scaleX(1); }

.tcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.tcard__icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--green) 0%, var(--green-darker) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .5s var(--ease), box-shadow .4s var(--ease);
}
.tcard__icon svg { width: 26px; height: 26px; }
.tcard:hover .tcard__icon {
  transform: rotate(-8deg) scale(1.07);
  box-shadow: 0 12px 26px rgba(0,171,78,.42);
}

.tcard__num {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,.16);
  transition: color .4s var(--ease);
}
.tcard:hover .tcard__num { color: rgba(0,171,78,.6); }

.tcard h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.32;
}
.tcard p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin: 0;
}


/* ------------------------------------------------------------
   11e · STAT BAND
   A distinct green panel rather than four numbers floating on
   the section background.
------------------------------------------------------------ */
.statband {
  position: relative;
  margin-top: 56px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(255,255,255,.16) 0%, transparent 60%),
    linear-gradient(150deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  box-shadow: 0 22px 52px rgba(0,0,0,.28);
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobile: 2 x 2 */
}

.kstat {
  position: relative;
  padding: 30px 16px;
  text-align: center;
}
/* Hairline separators drawn with borders so they never mis-align */
.kstat + .kstat { border-left: 1px solid rgba(255,255,255,.16); }
.kstat:nth-child(3) { border-left: 0; }
.kstat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.16); }

.kstat__num {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
/* The plus is a proper accent — half size, raised, never the
   same weight as the digits. That mismatch was the old problem. */
.kstat__num i {
  font-style: normal;
  font-size: .46em;
  line-height: 1;
  margin-left: 3px;
  margin-top: .12em;
  color: rgba(255,255,255,.75);
}

.kstat__label {
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  line-height: 1.4;
}

/* Small rule above each number */
.kstat__rule {
  display: block;
  width: 26px; height: 2px;
  margin: 0 auto 16px;
  background: rgba(255,255,255,.45);
  border-radius: 2px;
}


/* ------------------------------------------------------------
   12 · FEATURE / WHY CARDS
------------------------------------------------------------ */
.fcard {
  height: 100%;
  padding: 32px 26px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .35s ease, transform .35s var(--ease), border-color .35s ease;
}
.fcard:hover {
  background: rgba(0,171,78,.14);
  border-color: var(--green);
  transform: translateY(-5px);
}
.fcard__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--green);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.fcard__icon svg { width: 26px; height: 26px; color: #fff; }
.fcard h3 { color: #fff; font-size: 19px; margin-bottom: 10px; }
.fcard p { color: rgba(255,255,255,.72); font-size: 14.5px; margin: 0; }

/* Light variant */
.fcard-light {
  background: #fff;
  border: 1px solid var(--line);
}
.fcard-light:hover { background: #fff; border-color: var(--green); }
.fcard-light h3 { color: var(--brown); }
.fcard-light p { color: var(--muted); }


/* ------------------------------------------------------------
   12b · OUR JOURNEY — radial hub
   Five milestones branching off a central core, per the
   reference the client supplied.
------------------------------------------------------------ */
.journey { position: relative; overflow: hidden; }

.hub {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 210px 1fr;
  grid-template-rows: repeat(3, auto);
  align-items: center;
  gap: 38px 30px;
  margin-top: 20px;
}

/* Connectors */
.hub__lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* --dash is written per-path by journeyLines() from the measured
   length, so every connector draws in fully regardless of how long
   it is. Stagger delays are set inline by the same function. */
.hub__lines path {
  fill: none;
  stroke: rgba(0,171,78,.38);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: var(--dash, 600);
  stroke-dashoffset: var(--dash, 600);
  transition: stroke-dashoffset 1.6s var(--ease);
}
.hub.in-view .hub__lines path { stroke-dashoffset: 0; }

/* All five milestones live in one track. On desktop the track is
   display:contents so they become direct grid children and can be
   placed radially; on mobile it turns into a swipeable carousel. */
.hub__viewport { display: contents; }
.hub__track { display: contents; }

.hnode { position: relative; z-index: 2; }
.hnode:nth-child(1) { grid-column: 1; grid-row: 1; }
.hnode:nth-child(2) { grid-column: 1; grid-row: 2; }
.hnode:nth-child(3) { grid-column: 1; grid-row: 3; }
.hnode:nth-child(4) { grid-column: 3; grid-row: 1; }
.hnode:nth-child(5) { grid-column: 3; grid-row: 3; }

.hnode:nth-child(1),
.hnode:nth-child(2),
.hnode:nth-child(3) { text-align: right; }

.hnode__step { display: none; }   /* mobile stepper label only */
.hub__nav { display: none; }      /* the radial layout needs no controls */

/* Core */
.hub__core {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: center;
  width: 210px; height: 210px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(85% 70% at 25% 15%, rgba(255,255,255,.16) 0%, transparent 60%),
    linear-gradient(155deg, #0A7C45 0%, #066039 55%, #0B3A21 100%);
  box-shadow: 0 22px 50px rgba(11,58,33,.34);
}
.hub__ring {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(0,171,78,.34);
  animation: hubPulse 3s ease-out infinite;
}
@keyframes hubPulse {
  0%   { transform: scale(.94); opacity: .9; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}
.hub__label {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.12;
  color: #fff;
  text-align: center;
}

/* Milestone */
.hnode {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform .4s var(--ease);
}

.hnode:nth-child(-n+3):hover { transform: translateX(-5px); }
.hnode:nth-child(n+4):hover { transform: translateX(5px); }

.hnode__icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--green);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(96,57,19,.08);
  transition: background .35s var(--ease), color .35s var(--ease),
              transform .4s var(--ease), border-color .35s ease;
}
.hnode__icon svg { width: 25px; height: 25px; }
.hnode:hover .hnode__icon {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: rotate(-8deg) scale(1.06);
}

.hnode__text { min-width: 0; }
.hnode h3 {
  font-size: 17px;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brown);
}
.hnode__sub {
  display: block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 7px;
}
.hnode p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }


/* ------------------------------------------------------------
   12c · HEADLINE ACHIEVEMENT CALLOUT
------------------------------------------------------------ */
.callout {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 66px;
  padding: 36px 40px;
  border-radius: 22px;
  background:
    radial-gradient(85% 75% at 12% 0%, rgba(255,255,255,.10) 0%, transparent 58%),
    linear-gradient(150deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  box-shadow: 0 26px 56px rgba(11,58,33,.30);
}
.callout__glow {
  position: absolute;
  right: -6%; bottom: -60%;
  width: 44%; padding-top: 44%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,171,78,.55) 0%, transparent 68%);
  pointer-events: none;
}
.callout__icon,
.callout__body { position: relative; z-index: 1; }

.callout__icon {
  width: 76px; height: 76px;
  flex-shrink: 0;
  border-radius: 20px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  display: grid;
  place-items: center;
}
.callout__icon svg { width: 34px; height: 34px; }

.callout__label {
  display: block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 10px;
}
.callout__figure {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight: 400;
  line-height: 1.28;
  color: #fff;
  margin-bottom: 10px;
}
.callout__figure b { font-weight: 400; color: var(--green-light); }
.callout__figure em { font-style: normal; opacity: .72; font-size: .82em; }
.callout p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.78); margin: 0; }

/* ------------------------------------------------------------
   12c · SEAMLESS CONNECTIVITY — animated globe
   Pure CSS/SVG. A rotating wireframe sphere with orbiting
   markers, replacing the flat photograph.
------------------------------------------------------------ */
.globe {
  position: relative;
  width: min(430px, 88%);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}

/* Soft bloom behind the sphere */
.globe__halo {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,171,78,.22) 0%, transparent 66%);
  animation: globeBreathe 6s ease-in-out infinite;
}
@keyframes globeBreathe {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.07); opacity: 1; }
}

.globe__sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 30% 25%, rgba(255,255,255,.20) 0%, transparent 60%),
    linear-gradient(155deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  box-shadow:
    0 26px 60px rgba(11,58,33,.34),
    inset -18px -18px 50px rgba(0,0,0,.35);
}

/* Longitude lines — ellipses that scale to fake rotation */
.globe__meridian {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100%;
  margin-left: -50%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);   /* softened — the texture carries the detail now */
  animation: globeSpin 14s linear infinite;
}
.globe__meridian:nth-child(2) { animation-delay: -3.5s; }
.globe__meridian:nth-child(3) { animation-delay: -7s; }
.globe__meridian:nth-child(4) { animation-delay: -10.5s; }
@keyframes globeSpin {
  0%   { transform: scaleX(1);    opacity: .18; }
  25%  { transform: scaleX(.08);  opacity: .55; }
  50%  { transform: scaleX(1);    opacity: .18; }
  75%  { transform: scaleX(.08);  opacity: .55; }
  100% { transform: scaleX(1);    opacity: .18; }
}

/* Latitude lines */
.globe__parallel {
  position: absolute;
  left: -2%; right: -2%;
  height: 1px;
  background: rgba(255,255,255,.16);
}
.globe__parallel:nth-child(5) { top: 27%; }
.globe__parallel:nth-child(6) { top: 50%; background: rgba(255,255,255,.28); }
.globe__parallel:nth-child(7) { top: 73%; }

/* World map wrapped around the sphere. The track holds two copies of
   an equirectangular map side by side and slides one full copy, so the
   rotation loops seamlessly. Sits above the ocean gradient and the
   graticule; the specular highlight stays on top so the sphere still
   reads as curved rather than flat. */
.globe__map {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.globe__map-track {
  display: flex;
  width: 400%;      /* two copies, each 200% of the sphere */
  height: 100%;
  animation: globeMapSpin 70s linear infinite;
}
/* A real satellite Earth texture — it IS the globe surface, so it
   renders at full opacity and unfiltered. Exact 2:1, so object-fit:
   fill maps it without cropping. */
.globe__map-track img {
  width: 50%;
  height: 100%;
  object-fit: fill;
  opacity: 1;
}

/* Curvature shading. The texture covers the sphere's own inset
   shadow, so the highlight and terminator are re-applied on top —
   without them a flat photo reads as a disc, not a sphere. */
.globe__map::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.30) 0%, transparent 44%),
    radial-gradient(circle at 72% 78%, rgba(0,14,8,.52) 0%, transparent 60%);
  box-shadow: inset -14px -14px 42px rgba(0,18,10,.45);
}
@keyframes globeMapSpin {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .globe__map-track { animation: none; }
}

.globe__shine {
  position: absolute;
  z-index: 2;
  top: 8%; left: 12%;
  width: 42%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28) 0%, transparent 70%);
  filter: blur(2px);
}

/* Hub markers */
.globe__pin {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 8px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(11,58,33,.18);
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brown);
  white-space: nowrap;
  animation: pinFloat 5s ease-in-out infinite;
}
.globe__pin i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(0,171,78,.6);
  animation: pinPing 2.4s ease-out infinite;
}
@keyframes pinPing {
  0%   { box-shadow: 0 0 0 0 rgba(0,171,78,.55); }
  70%  { box-shadow: 0 0 0 11px rgba(0,171,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,171,78,0); }
}
@keyframes pinFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.globe__pin--1 { top: 14%; right: -6%;  animation-delay: 0s; }
.globe__pin--2 { top: 42%; left: -10%;  animation-delay: -1.2s; }
.globe__pin--3 { bottom: 22%; right: -2%; animation-delay: -2.4s; }
.globe__pin--4 { bottom: 6%; left: 4%;  animation-delay: -3.6s; }
.globe__pin--5 { top: 6%; left: 10%;  animation-delay: -4.8s; }
.globe__pin--1 i, .globe__pin--3 i { animation-delay: -1.2s; }

/* Orbit rings with a travelling dot */
.globe__orbit {
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  border: 1px dashed rgba(0,171,78,.34);
  animation: orbitSpin 22s linear infinite;
}
.globe__orbit--b {
  inset: -18%;
  border-style: solid;
  border-color: rgba(0,171,78,.16);
  animation-duration: 34s;
  animation-direction: reverse;
}
.globe__orbit b {
  position: absolute;
  top: -5px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(0,171,78,.8);
}
.globe__orbit--b b { background: var(--green-light); width: 8px; height: 8px; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .globe__halo, .globe__meridian, .globe__pin,
  .globe__pin i, .globe__orbit { animation: none !important; }
}

/* ------------------------------------------------------------
   13 · GLOBAL PRESENCE
------------------------------------------------------------ */
.presence__map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.presence__map img { width: 100%; }

/* Location card — dark, to match the stat band and expertise boxes */
.hub-card {
  display: block;
  position: relative;
  height: 100%;
  padding: 22px 20px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(95% 70% at 14% 0%, rgba(255,255,255,.14) 0%, transparent 58%),
    linear-gradient(155deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(11,58,34,.20);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .35s ease;
}
.hub-card:hover {
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 22px 44px rgba(6,96,58,.36);
  transform: translateY(-5px);
}

/* Soft glow bleeding from the corner */
.hub-card::before {
  content: '';
  position: absolute;
  right: -18%; bottom: -34%;
  width: 68%; padding-top: 68%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,171,78,.55) 0%, transparent 68%);
  opacity: .5;
  transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.hub-card:hover::before { opacity: 1; transform: scale(1.15); }

.hub-card > * { position: relative; z-index: 1; }

.hub-card__pin {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  transition: background .4s var(--ease), transform .45s var(--ease);
}
.hub-card__pin svg { width: 20px; height: 20px; color: #fff; }
.hub-card:hover .hub-card__pin { background: #fff; transform: rotate(-8deg) scale(1.06); }
.hub-card:hover .hub-card__pin svg { color: var(--green-dark); }

.hub-card h4 {
  margin-bottom: 6px;
  font-size: 18px;
  color: #fff;
  letter-spacing: .3px;
}
.hub-card p { font-size: 13.5px; color: rgba(255,255,255,.76); margin: 0; line-height: 1.55; }


/* ------------------------------------------------------------
   14 · BLOG CARDS
------------------------------------------------------------ */
.bcard {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bcard:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(96,57,19,.14); }
.bcard__media { aspect-ratio: 16/10; overflow: hidden; }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.bcard:hover .bcard__media img { transform: scale(1.06); }
.bcard__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.bcard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.bcard__cat {
  background: var(--green-soft);
  color: var(--green-dark);
  padding: 4px 10px;
  border-radius: 30px;
  font-weight: 600;
}
.bcard__body h3 { font-size: 18px; line-height: 1.4; margin-bottom: 10px; transition: color .3s ease; }
.bcard:hover .bcard__body h3 { color: var(--green); }
.bcard__body p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.bcard__foot { margin-top: auto; }


/* ------------------------------------------------------------
   15 · CTA BAND
------------------------------------------------------------ */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: 86px 0;
  background: var(--cream);
}

/* The section is cream like every other, so the emphasis moved
   inside: the CTA now sits on its own dark panel. The photograph
   lives inside that panel rather than bleeding full-width. */
.cta-band__inner {
  position: relative;
  z-index: 3;
  border-radius: 26px;
  overflow: hidden;
  padding: clamp(38px, 5vw, 64px) clamp(24px, 4vw, 56px);
  background:
    radial-gradient(90% 80% at 12% 0%, rgba(255,255,255,.14) 0%, transparent 58%),
    linear-gradient(150deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  box-shadow: 0 26px 60px rgba(11,58,33,.26);
}
.cta-band__bg {
  position: absolute; inset: 0; z-index: -1;
  opacity: .16;
}
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }

.cta-band h2 { color: #fff; font-size: 40px; margin-bottom: 14px; }
.cta-band p  { color: rgba(255,255,255,.82); font-size: 17px; margin-bottom: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }


/* ------------------------------------------------------------
   15b · SECTION SEPARATOR
   Every section now shares one background colour, so the seam
   between them has to be drawn rather than implied by a colour
   change. A hairline with a white highlight beneath it reads as a
   debossed fold in paper; the green lozenge sits on top with a
   cream halo so the rule appears to pass behind it.
------------------------------------------------------------ */
.sep {
  position: relative;
  height: 0;
  z-index: 4;
  background: var(--cream);
}
.sep__line {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 3rem));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 14%, var(--line) 86%, transparent);
}
/* The highlight is what sells the fold */
.sep__line::after {
  content: '';
  position: absolute;
  top: 1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 14%, rgba(255,255,255,.95) 86%, transparent);
}
.sep__mark {
  position: absolute;
  top: -5px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: var(--green);
  transform: rotate(45deg);
  box-shadow: 0 0 0 8px var(--cream);
}
/* Flanking ticks, echoing a trade route */
.sep__mark::before,
.sep__mark::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: rgba(0,171,78,.4);
}
.sep__mark::before { left: -22px; }
.sep__mark::after  { right: -22px; }


/* ------------------------------------------------------------
   16 · FOOTER
------------------------------------------------------------ */
/* Client asked for the footer to come off brown — deep forest
   green, matching the trust band so the page closes consistently */
.footer {
  position: relative;
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(0,171,78,.14) 0%, transparent 60%),
    linear-gradient(170deg, #073A24 0%, #042417 60%, #02170E 100%);
  color: rgba(255,255,255,.7);
}
.footer__top { padding: 70px 0 44px; }
.footer__logo {
  background: #fff;
  padding: 16px 22px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 20px;
}
/* Stacked lockup from the supplied brand artwork */
.footer__logo img { height: 96px; width: auto; }
.footer p { font-size: 14.5px; }
.footer h5 {
  color: #fff;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 12px;
}
.footer h5::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 30px; height: 2px;
  background: var(--green);
  border-radius: 2px;
}
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin-bottom: 10px; }
.footer__links a {
  font-size: 14.5px;
  color: rgba(255,255,255,.7);
  transition: color .25s ease, padding-left .25s var(--ease);
}
.footer__links a:hover { color: var(--green); padding-left: 6px; }

.footer__contact { list-style: none; margin: 0; padding: 0; }
.footer__contact li {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14.5px;
}
.footer__contact svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; margin-top: 4px; }
.footer__contact a { color: rgba(255,255,255,.7); }
.footer__contact a:hover { color: var(--green); }

.social { display: flex; gap: 10px; margin-top: 22px; }
.social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background .3s ease, transform .3s var(--ease);
}
.social a:hover { background: var(--green); transform: translateY(-3px); }
.social svg { width: 15px; height: 15px; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0;
  font-size: 13.5px;
}
.footer__bottom a { color: rgba(255,255,255,.7); }
.footer__bottom a:hover { color: var(--green); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }


/* ------------------------------------------------------------
   16b · PAGE LOADER
   Shows until the window load event, then lifts away.
------------------------------------------------------------ */
/* White ground — the logo mark is a green/brown lockup drawn for a
   light background, so it read as a dim smudge on the old dark-green
   fill. Ring track and progress-bar track switch to --line/--sand to
   stay visible; the green accent arcs need no change. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(0,171,78,.06) 0%, transparent 62%),
    var(--cream);
  transition: opacity .6s var(--ease), visibility .6s;
}
.loader.is-done { opacity: 0; visibility: hidden; }

.loader__inner { text-align: center; }
.loader__mark { width: 96px; margin: 0 auto 26px; }
.loader__mark img { width: 100%; height: auto; }

/* Ring that traces around the mark */
.loader__ring {
  position: relative;
  width: 54px; height: 54px;
  margin: 0 auto 18px;
}
.loader__ring span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--green);
  animation: loadSpin .9s linear infinite;
}
.loader__ring span:nth-child(2) {
  inset: 9px;
  border-top-color: transparent;
  border-right-color: var(--green-light);
  animation-duration: 1.4s;
  animation-direction: reverse;
}
@keyframes loadSpin { to { transform: rotate(360deg); } }

.loader__text {
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Thin progress line across the very top */
.loader__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--sand);
  overflow: hidden;
}
.loader__bar i {
  display: block;
  height: 100%;
  width: 34%;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: loadSweep 1.1s ease-in-out infinite;
}
@keyframes loadSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}


/* ------------------------------------------------------------
   16c · CUSTOM CURSOR — disabled per client request; default
   system arrow cursor is used everywhere instead.
------------------------------------------------------------ */
.cursor,
.cursor-dot { display: none !important; }

body.has-cursor { cursor: auto; }
body.has-cursor a,
body.has-cursor button { cursor: pointer; }


/* ============================================================
   19 · ABOUT PAGE
   Everything below is used by about.html. The page hero
   (.phero) and breadcrumb (.crumb) are deliberately generic —
   the product, blog, contact and legal pages reuse them.
============================================================ */

/* ------------------------------------------------------------
   19a · INNER PAGE HERO  (reusable)
------------------------------------------------------------ */
.phero {
  position: relative;
  margin-top: calc(var(--topbar-h) + var(--header-h));
  min-height: 380px;
  padding: 88px 0 96px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--brown-dark);
  isolation: isolate;
}

.phero__bg { position: absolute; inset: 0; z-index: 0; }
.phero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  /* Slow settle on load — no scroll listener involved */
  animation: pheroSettle 9s var(--ease) forwards;
}
@keyframes pheroSettle {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

.phero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(11,58,33,.92) 0%, rgba(11,58,33,.72) 42%, rgba(20,11,3,.55) 100%),
    linear-gradient(180deg, rgba(20,11,3,.45) 0%, transparent 45%, rgba(20,11,3,.55) 100%);
}

/* Green bloom bottom-right, so the block does not read as a flat wash */
.phero__glow {
  position: absolute;
  z-index: 1;
  right: -12%; bottom: -55%;
  width: 62%; padding-top: 62%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,171,78,.34) 0%, transparent 66%);
  pointer-events: none;
}

.phero__inner { position: relative; z-index: 2; }

.phero__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(0,171,78,.92);
  color: #fff;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.phero__tag i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: pinPing 2.4s ease-out infinite;
}

.phero__title {
  color: #fff;
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  line-height: 1.08;
  margin-bottom: 16px;
  text-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.phero__title span { color: var(--green-light); }

.phero__text {
  max-width: 620px;
  color: rgba(255,255,255,.86);
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  line-height: 1.8;
  margin: 0;
}

/* Scroll cue */
.phero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: 20px;
  width: 24px; height: 40px;
  margin-left: -12px;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 14px;
}
.phero__scroll span {
  position: absolute;
  left: 50%; top: 8px;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #fff;
  animation: pheroWheel 1.9s ease-in-out infinite;
}
@keyframes pheroWheel {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  60%      { transform: translateY(13px); opacity: .2; }
}

/* Breadcrumb */
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.62);
}
.crumb a { color: rgba(255,255,255,.82); }
.crumb a:hover { color: var(--green-light); }
.crumb svg { width: 11px; height: 11px; flex-shrink: 0; }
.crumb b { color: #fff; font-weight: 600; }


/* ------------------------------------------------------------
   19b · DIRECTOR'S MESSAGE
------------------------------------------------------------ */
.dmsg-sec { padding-top: 78px; }

.dmsg {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(95% 70% at 14% 0%, rgba(255,255,255,.14) 0%, transparent 58%),
    linear-gradient(158deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  box-shadow: 0 26px 64px rgba(11,58,33,.30);
  display: grid;
  grid-template-columns: 1fr;
}

/* The scalloped ground from the reference, drawn in CSS */
.dmsg__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 100%, transparent 11px, rgba(255,255,255,.055) 12px, transparent 13px);
  background-size: 34px 34px;
}

.dmsg__media {
  position: relative;
  z-index: 2;
  display: flex;
  padding: 26px;
}
.dmsg__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  object-position: top center;
}
/* Soft disc behind the portrait */
.dmsg__disc {
  position: absolute;
  left: 50%; bottom: 0;
  width: 320px; height: 320px;
  margin-left: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 68%);
}

.dmsg__body {
  position: relative;
  z-index: 2;
  padding: 34px 26px 40px;
  color: rgba(255,255,255,.84);
}
.dmsg__body p { font-size: 15.4px; line-height: 1.85; }

/* Light variant of the shared section label, for dark panels */
.sec-label--light { color: var(--green-light); }
.sec-label--light::before,
.sec-label--light::after { background: var(--green-light); }

.dmsg__mark {
  display: block;
  width: 40px; height: 30px;
  color: rgba(255,255,255,.20);
  margin-bottom: 16px;
}

.dmsg__lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.5;
  color: #fff;
  margin-bottom: 20px;
}
.dmsg__lead em { font-style: normal; color: var(--green-light); }

.dmsg__sign { margin-top: 26px; }
.dmsg__rule {
  display: block;
  width: 48px; height: 2px;
  border-radius: 2px;
  background: var(--green-light);
  margin-bottom: 14px;
}
.dmsg__sign b {
  display: block;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.dmsg__sign span {
  display: block;
  font-size: 13.5px;
  color: rgba(255,255,255,.62);
}


/* ------------------------------------------------------------
   19c · OUR STORY
------------------------------------------------------------ */
.story__media { position: relative; }
.story__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(96,57,19,.16);
}
.story__img img { width: 100%; height: 100%; object-fit: cover; }

.story__inset {
  position: absolute;
  left: -20px;
  bottom: -26px;
  width: 210px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 6px solid var(--cream);
  box-shadow: 0 16px 40px rgba(96,57,19,.18);
}

.story__badge {
  position: absolute;
  right: -16px;
  top: 28px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--brown);
  color: #fff;
  box-shadow: 0 14px 34px rgba(96,57,19,.34);
}
.story__badge b {
  display: block;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--green-light);
}
.story__badge span { font-size: 12px; opacity: .88; }

/* --- Milestone rail --- */
.msrail { position: relative; margin-top: 64px; }

.msrail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.msnode {
  position: relative;
  padding: 0 0 26px 34px;
}
.msnode:last-child { padding-bottom: 0; }

/* Vertical spine (mobile default) */
.msnode::before {
  content: '';
  position: absolute;
  left: 8px; top: 16px; bottom: -4px;
  width: 2px;
  background: linear-gradient(180deg, var(--green) 0%, var(--line) 100%);
}
.msnode:last-child::before { display: none; }

.msnode__dot {
  position: absolute;
  left: 0; top: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--green);
}
.msnode__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--green);
  transform: scale(0);
  transition: transform .5s var(--ease) .15s;
}
.msnode.in-view .msnode__dot::after { transform: scale(1); }

.msnode__year {
  display: block;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--green);
  margin-bottom: 7px;
}
.msnode__title {
  display: block;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 5px;
}
.msnode__text {
  display: block;
  font-size: 14.2px;
  line-height: 1.7;
  color: var(--muted);
}

/* The horizontal line only exists at desktop — see responsive.css */
.msrail__line { display: none; }


/* ------------------------------------------------------------
   19d · OUR PURPOSE  (bento: statement + mission + vision)
------------------------------------------------------------ */
.pbento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.pcell {
  position: relative;
  border-radius: 22px;
  padding: 30px 26px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pcell:hover { transform: translateY(-5px); }

/* --- Statement panel --- */
.pcell--lead {
  color: #fff;
  background:
    radial-gradient(95% 70% at 14% 0%, rgba(255,255,255,.14) 0%, transparent 58%),
    linear-gradient(158deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  box-shadow: 0 22px 52px rgba(11,58,33,.28);
  display: flex;
  flex-direction: column;
  /* No space-between: the figure strip is pushed down by its own
     margin-top:auto instead, so a short statement does not leave a
     dead band across the middle of the panel */
  gap: 20px;
}
.pcell__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .45;
  background-image: radial-gradient(circle at 50% 100%, transparent 11px, rgba(255,255,255,.055) 12px, transparent 13px);
  background-size: 34px 34px;
}
.pcell__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--green-light);
}
.pcell__eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  border-radius: 2px;
  background: var(--green-light);
}
/* Specificity note: this must outrank `.pcell p` below, which sets the
   small muted body size for the Mission/Vision cards. Hence .pcell--lead
   in the selector rather than the bare class. */
.pcell--lead .pcell__statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  line-height: 1.34;
  color: #fff;

  /* The panel is as tall as Mission + Vision stacked, so there is
     slack to absorb. Auto margins on a flex ITEM split that slack
     evenly above and below, which centres the sentence.

     Do NOT make this paragraph a flex container to do the same job:
     every text node and <em> inside it would become its own flex
     item laid out in a row, so the sentence breaks into columns and
     the inter-word spaces collapse. */
  margin: auto 0;
}
.pcell__statement em {
  font-style: normal;
  color: var(--green-light);
  position: relative;
}

/* --- Mission / Vision cards --- */
.pcell--mission,
.pcell--vision {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(96,57,19,.07);
}
.pcell--vision { background: var(--green-soft); border-color: #CFEEDE; }

.pcell__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  margin-bottom: 16px;
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,171,78,.30);
  transition: transform .5s var(--ease);
}
.pcell:hover .pcell__icon { transform: rotate(-8deg) scale(1.06); }
.pcell__icon svg { width: 24px; height: 24px; }

.pcell--vision .pcell__icon { background: var(--brown); box-shadow: 0 10px 24px rgba(96,57,19,.28); }

.pcell h3 { font-size: 20px; margin-bottom: 10px; }
/* Scoped to the two light cards — the dark statement panel styles its
   own paragraph and must not inherit the muted body colour */
.pcell--mission p,
.pcell--vision p { font-size: 15.4px; line-height: 1.8; color: var(--muted); margin: 0; }

/* A quiet corner accent so the two cards do not read as plain boxes */
.pcell--mission::after,
.pcell--vision::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 130px; height: 130px;
  border-radius: 50%;
  border: 22px solid rgba(0,171,78,.07);
  pointer-events: none;
  transition: transform .6s var(--ease);
}
.pcell--vision::after { border-color: rgba(96,57,19,.07); }
.pcell:hover::after { transform: scale(1.15); }


/* ------------------------------------------------------------
   19e · OUR CORE VALUES
------------------------------------------------------------ */
.values__intro { position: relative; }
.values__mark {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin-top: 24px;
  border-radius: 16px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid #CFEEDE;
}
.values__mark svg { width: 26px; height: 26px; }

.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.vrow {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 60px 20px 20px 60px;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.vrow:hover { transform: translateX(6px); }

.vrow__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .5s var(--ease);
}
.vrow:hover .vrow__icon { transform: rotate(-10deg); }
.vrow__icon svg { width: 24px; height: 24px; }

.vrow__body b {
  display: block;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 3px;
}
.vrow__body span { display: block; font-size: 14.6px; line-height: 1.65; }

.vrow__num {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  opacity: .12;
  pointer-events: none;
}

/* Four fills, stepping from light to dark — as in the client reference */
.vrow--a { background: #fff; border: 1px solid var(--line); }
.vrow--a .vrow__icon { background: var(--green-soft); color: var(--green); }
.vrow--a .vrow__body b { color: var(--brown); }
.vrow--a .vrow__body span { color: var(--muted); }
.vrow--a .vrow__num { color: var(--brown); }

.vrow--b { background: var(--green-soft); border: 1px solid #CFEEDE; }
.vrow--b .vrow__icon { background: var(--green); color: #fff; }
.vrow--b .vrow__body b { color: var(--brown); }
.vrow--b .vrow__body span { color: var(--muted); }
.vrow--b .vrow__num { color: var(--green-darker); }

.vrow--c { background: var(--green); border: 1px solid var(--green); }
.vrow--c .vrow__icon { background: rgba(255,255,255,.20); color: #fff; }
.vrow--c .vrow__body b { color: #fff; }
.vrow--c .vrow__body span { color: rgba(255,255,255,.86); }
.vrow--c .vrow__num { color: #fff; opacity: .2; }

.vrow--d {
  background:
    radial-gradient(90% 70% at 10% 0%, rgba(255,255,255,.12) 0%, transparent 60%),
    linear-gradient(150deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  border: 1px solid transparent;
}
.vrow--d .vrow__icon { background: rgba(255,255,255,.14); color: var(--green-light); }
.vrow--d .vrow__body b { color: #fff; }
.vrow--d .vrow__body span { color: rgba(255,255,255,.8); }
.vrow--d .vrow__num { color: #fff; opacity: .16; }


/* ------------------------------------------------------------
   19f · WHY BUSINESSES PREFER TO PARTNER WITH US
------------------------------------------------------------ */
.whyk__panel {
  position: relative;
  border-radius: 24px;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(96,57,19,.08);
}

.whyk__lead {
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.72;
  color: var(--brown);
  padding-left: 18px;
  border-left: 3px solid var(--green);
  margin-bottom: 26px;
}

.wsteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.wstep {
  position: relative;
  padding: 22px 20px 20px;
  border-radius: 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .45s var(--ease), border-color .35s ease, background .35s ease;
}
.wstep:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  background: #fff;
}
/* Fill that wipes up from the base on hover */
.wstep::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.wstep:hover::after { transform: scaleX(1); }

.wstep__num {
  position: absolute;
  right: 16px; top: 12px;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--brown);
  opacity: .10;
}
.wstep .wstep__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  margin-bottom: 14px;
  background: var(--green-soft);
  color: var(--green);
  transition: background .35s ease, color .35s ease, transform .5s var(--ease);
}
.wstep:hover .wstep__icon { background: var(--green); color: #fff; transform: rotate(-8deg); }
.wstep__icon svg { width: 22px; height: 22px; }

.wstep b {
  display: block;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 5px;
}
.wstep span {
  display: block;
  font-size: 14.2px;
  line-height: 1.68;
  color: var(--muted);
}

.whyk__stats { margin-top: 56px; }


/* ------------------------------------------------------------
   19g · INDUSTRIES WE SERVE
   A masonry-style grid, but every row is the same fixed height —
   only WIDTH varies between tiles (grid-column: span 2 vs the
   default span 1). No slider at any width (the client explicitly
   does not want a carousel here).

   Mechanism: "wide" tiles (.istile--a, --e, --g, --h) carry
   grid-column: span 2; every other tile is left on the default
   span 1 and plain row-major auto-placement. Because every tile
   is exactly ONE row tall, auto-placement can never leave a gap
   here — a span-2 item either fits the columns left in the
   current row or the browser starts a fresh row for it, and a
   fresh row is by definition empty, so it always fits. This is
   why no `grid-row` is ever set: row height staying uniform is
   what makes the tiling guaranteed-gapless, not something that
   needs verifying case by case.

   --a and --h are wide at EVERY breakpoint (set here, in the
   mobile-default base). --e and --g are wide ONLY at tablet and
   desktop, where there is a 4th column to spend — see the two
   `min-width` blocks in responsive.css.
------------------------------------------------------------ */
.isgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 210px;
  gap: 10px;
}

.istile--a,
.istile--h { grid-column: span 2; }

.istile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: var(--brown-dark);
}

.istile__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.istile:hover .istile__img { transform: scale(1.08); }

/* Readability veil, deepens to brand green on hover — same
   construction as .ptile on the homepage portfolio rail. */
.istile__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11,58,33,.12) 0%, rgba(11,58,33,.40) 55%, rgba(11,58,33,.88) 100%);
  transition: background .45s var(--ease);
}
.istile:hover .istile__veil {
  background: linear-gradient(180deg, rgba(0,90,42,.40) 0%, rgba(0,60,28,.72) 55%, rgba(6,96,57,.94) 100%);
}

/* Inner hairline square that draws in on hover — the "square
   inside the square" accent, echoing the client's reference. */
.istile__frame {
  position: absolute;
  inset: 12px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 9px;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.istile:hover .istile__frame { opacity: 1; transform: none; }

.istile__icon {
  position: absolute;
  z-index: 3;
  left: 14px; top: 14px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34);
  color: #fff;
  transition: background .35s ease, border-color .35s ease, transform .5s var(--ease);
}
.istile:hover .istile__icon {
  background: var(--green);
  border-color: var(--green);
  transform: translateY(-3px) rotate(-8deg);
}
.istile__icon svg { width: 19px; height: 19px; }

.istile__name {
  position: absolute;
  z-index: 3;
  left: 14px; right: 14px; bottom: 14px;
  font-family: var(--font-head);
  font-size: clamp(.8rem, 1.2vw, 1rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}

/* Wide tiles carry twice the photo, so their icon and label read
   as undersized next to it — scale both up a step. Fixed px, not
   a percentage, since the base values being boosted are themselves
   fixed px per breakpoint. .istile--e/--g join this list only
   inside the desktop/tablet blocks in responsive.css, where they
   are the ones actually wide. */
.istile--a .istile__icon,
.istile--h .istile__icon { width: 48px; height: 48px; border-radius: 14px; }
.istile--a .istile__icon svg,
.istile--h .istile__icon svg { width: 22px; height: 22px; }
.istile--a .istile__name,
.istile--h .istile__name { font-size: 1.05rem; }

.inds__foot {
  max-width: 640px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 15.6px;
  line-height: 1.8;
  color: var(--muted);
}



/* ------------------------------------------------------------
   19h · MEET THE TEAM
   Built to the client's Kunvarji reference: portrait on a light
   neutral ground, with a solid caption plate inset over the
   lower part of the photograph — name, hairline rule, role, all
   centred. The LinkedIn chip the brief asks for slides in from
   the card's right edge on hover or keyboard focus.
------------------------------------------------------------ */
/* --- Group tabs (the pill switcher above the cards) --- */
.ttabs {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 38px;
  padding: 7px;
  border-radius: 60px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(96,57,19,.08);
}

.ttab {
  position: relative;
  z-index: 1;
  padding: 13px 30px;
  border-radius: 50px;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--brown);
  transition: color .35s var(--ease), background .35s var(--ease);
}
.ttab:hover { color: var(--green-dark); }

.ttab.is-active {
  color: #fff;
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(255,255,255,.12) 0%, transparent 62%),
    linear-gradient(150deg, #0A7C45 0%, #076039 55%, #0B3A21 100%);
  box-shadow: 0 8px 20px rgba(11,58,33,.26);
}
/* --- Panels --- */
.tpanel { display: none; }
.tpanel.is-active { display: block; }
/* [hidden] must still win if a panel is ever left marked hidden */
.tpanel[hidden] { display: none; }

.tmcard {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  /* Light studio ground, as in the reference */
  background: var(--sand);
  border: 1px solid var(--line);
  transition: border-color .35s ease, box-shadow .45s var(--ease), transform .45s var(--ease);
}
.tmcard:hover {
  transform: translateY(-5px);
  border-color: var(--green);
  box-shadow: 0 20px 44px rgba(11,58,33,.20);
}

.tmcard__media { position: absolute; inset: 0; }
.tmcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1s var(--ease);
}
.tmcard:hover .tmcard__media img,
.tmcard:focus-visible .tmcard__media img { transform: scale(1.05); }

/* Kept as a very light foot shading so the plate never sits on a
   busy background — nowhere near the old full-height veil. */
.tmcard__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 62%, rgba(11,58,33,.22) 100%);
}

/* Slide-in LinkedIn chip, right edge */
.tmcard__in {
  position: absolute;
  z-index: 3;
  right: 12px; top: 12px;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #fff;
  color: #0A66C2;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .35s var(--ease), transform .45s var(--ease), background .3s ease, color .3s ease;
}
.tmcard:hover .tmcard__in,
.tmcard:focus-visible .tmcard__in { opacity: 1; transform: none; }
.tmcard__in svg { width: 16px; height: 16px; }
.tmcard:hover .tmcard__in { background: #0A66C2; color: #fff; }

/* The caption plate — inset from the card edges, overlapping the photo */
.tmcard__body {
  position: absolute;
  z-index: 2;
  left: 14px; right: 14px; bottom: 14px;
  padding: 13px 12px 14px;
  text-align: center;
  border-radius: 6px;
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(255,255,255,.10) 0%, transparent 62%),
    linear-gradient(150deg, #0A7C45 0%, #076039 55%, #0B3A21 100%);
  box-shadow: 0 10px 26px rgba(11,58,33,.30);
  transition: background .4s var(--ease);
}
.tmcard__name {
  display: block;
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
/* Hairline rule between name and role, as in the reference */
.tmcard__name::after {
  content: '';
  display: block;
  width: 42px; height: 1px;
  margin: 8px auto;
  background: rgba(255,255,255,.42);
  transition: width .45s var(--ease), background .35s ease;
}
.tmcard:hover .tmcard__name::after { width: 70px; background: var(--green-light); }

.tmcard__role {
  display: block;
  font-size: 12.8px;
  line-height: 1.4;
  letter-spacing: .3px;
  color: rgba(255,255,255,.80);
}

/* No hover on touch — keep the LinkedIn chip permanently visible */
@media (hover: none) {
  .tmcard__in { opacity: 1; transform: none; }
}


/* ============================================================
   20 · BLOG LISTING
============================================================ */

/* ------------------------------------------------------------
   20a · STICKY FILTER BAR
   Sits directly beneath the fixed header and stays there for the
   whole listing. Note `overflow-x: clip` on <html> (not hidden) —
   hidden on an ancestor would silently kill this sticky.
------------------------------------------------------------ */
.bfilter {
  position: sticky;
  top: var(--sticky-top);
  z-index: 500;
  background: rgba(251,248,244,.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(96,57,19,.05);
}

.bfilter__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--bfilter-h);
  padding: 12px 0;
}

/* The pill row scrolls horizontally when the categories outrun the
   available width, rather than wrapping the bar to two rows and
   changing its height while it is stuck. */
.bfilter__scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bfilter__scroll::-webkit-scrollbar { display: none; }

.bfilter__pills {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
}

.bpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 50px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--brown);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease);
}
.bpill span {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 20px;
  background: var(--sand);
  color: var(--muted);
  transition: background .3s ease, color .3s ease;
}
.bpill:hover { border-color: var(--green); color: var(--green-dark); }

.bpill.is-active {
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(255,255,255,.12) 0%, transparent 62%),
    linear-gradient(150deg, #0A7C45 0%, #076039 55%, #0B3A21 100%);
  box-shadow: 0 8px 18px rgba(11,58,33,.24);
}
.bpill.is-active span { background: rgba(255,255,255,.20); color: #fff; }

.bfilter__tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.bsearch {
  position: relative;
  display: flex;
  align-items: center;
  width: 240px;
}
.bsearch > svg {
  position: absolute;
  left: 14px;
  width: 16px; height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.bsearch input {
  width: 100%;
  padding: 11px 36px 11px 38px;
  border-radius: 50px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  color: var(--text);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.bsearch input::placeholder { color: var(--text-lit); }
.bsearch input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,171,78,.14);
}
/* Kill the browser's own search affordances — we supply our own */
.bsearch input::-webkit-search-decoration,
.bsearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.bsearch__clear {
  position: absolute;
  right: 10px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--muted);
  transition: background .25s ease, color .25s ease;
}
.bsearch__clear:hover { background: var(--green); color: #fff; }
.bsearch__clear svg { width: 11px; height: 11px; }

.bfilter__count {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.bfilter__count b { font-size: 17px; font-weight: 700; color: var(--green); }


/* ------------------------------------------------------------
   20b · ARTICLE GRID
------------------------------------------------------------ */
.blog-main { padding-top: 56px; }

.bgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.bitem { min-width: 0; }
/* Filtering and the load-more limit both hide through this one class */
.bitem.is-hidden { display: none; }

/* Featured article — spans the grid and lays out side by side once
   there is room for it */
.bitem--wide { grid-column: 1 / -1; }

.bcard__media { position: relative; }
.bcard__flag {
  position: absolute;
  left: 14px; top: 14px;
  z-index: 2;
  padding: 6px 13px;
  border-radius: 30px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0,171,78,.32);
}

/* Empty state */
.bempty {
  display: none;
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
.bempty.is-on { display: block; }
.bempty__icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}
.bempty__icon svg { width: 26px; height: 26px; }
.bempty h3 { margin-bottom: 8px; }
.bempty p { color: var(--muted); margin-bottom: 20px; }

/* Load more */
.bmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
}
.bmore.is-done { display: none; }
.bmore__note {
  font-family: var(--font-head);
  font-size: 13px;
  color: var(--muted);
}
.bmore__note b { color: var(--brown); font-weight: 700; }

/* ------------------------------------------------------------
   Pagination — category/tag/search archives (index.php).
   Numbered pills, same visual language as .bpill: a plain pill
   at rest, the brand gradient for the current page.
------------------------------------------------------------ */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
}
.pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: 50px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--brown);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease);
}
a.page-numbers:hover {
  border-color: var(--green);
  color: var(--green-dark);
  transform: translateY(-2px);
}
.pager .page-numbers.current {
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(255,255,255,.12) 0%, transparent 62%),
    linear-gradient(150deg, #0A7C45 0%, #076039 55%, #0B3A21 100%);
  box-shadow: 0 8px 18px rgba(11,58,33,.24);
}
.pager .page-numbers.dots {
  border-color: transparent;
  background: none;
  color: var(--muted);
  min-width: auto;
  padding: 0 4px;
}
.pager .page-numbers.prev,
.pager .page-numbers.next { padding: 0 20px; }
.pager .page-numbers svg { width: 14px; height: 14px; flex-shrink: 0; }


/* ------------------------------------------------------------
   20c · SIDEBAR
   Sticky below the header AND the filter bar, so the two never
   overlap. Desktop only — see responsive.css.
------------------------------------------------------------ */
.bside { display: grid; gap: 22px; grid-auto-rows: max-content; align-items: start; }

.swidget {
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(96,57,19,.06);
}

.swidget__title {
  position: relative;
  font-size: 17px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.swidget__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 42px; height: 2px;
  border-radius: 2px;
  background: var(--green);
}

/* Category list */
.slist { list-style: none; margin: 0; padding: 0; }
.slist li + li { margin-top: 4px; }
.slist button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  color: var(--text-mid);
  transition: background .28s ease, color .28s ease, padding-left .28s var(--ease);
}
.slist button span {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--sand);
  color: var(--muted);
  transition: background .28s ease, color .28s ease;
}
.slist button:hover { background: var(--green-soft); color: var(--green-dark); padding-left: 17px; }
.slist button.is-active {
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 700;
}
.slist button.is-active span { background: var(--green); color: #fff; }

/* Recent posts */
.spostlist { list-style: none; margin: 0; padding: 0; }
.spostlist li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.spost { display: flex; align-items: center; gap: 13px; }
.spost__media {
  flex-shrink: 0;
  width: 74px; height: 62px;
  border-radius: 9px;
  overflow: hidden;
}
.spost__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.spost:hover .spost__media img { transform: scale(1.08); }

.spost__body { min-width: 0; }
.spost__body b {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brown);
  transition: color .28s ease;
}
.spost:hover .spost__body b { color: var(--green); }
.spost__date { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Topic tags */
.stags { display: flex; flex-wrap: wrap; gap: 8px; }
.stags button {
  padding: 8px 14px;
  border-radius: 40px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-head);
  font-size: 12.8px;
  font-weight: 600;
  color: var(--muted);
  transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s var(--ease);
}
.stags button:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: translateY(-2px);
}

/* Sidebar CTA */
.scta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(95% 70% at 14% 0%, rgba(255,255,255,.14) 0%, transparent 58%),
    linear-gradient(158deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  box-shadow: 0 20px 44px rgba(11,58,33,.26);
}
.scta__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .45;
  background-image: radial-gradient(circle at 50% 100%, transparent 11px, rgba(255,255,255,.055) 12px, transparent 13px);
  background-size: 34px 34px;
}
.scta h4 { color: #fff; font-size: 19px; margin-bottom: 10px; }
.scta p { font-size: 14.4px; line-height: 1.75; color: rgba(255,255,255,.82); margin-bottom: 20px; }


/* ============================================================
   21 · BLOG DETAIL (article)
============================================================ */

/* ------------------------------------------------------------
   21a · READING PROGRESS
   Rides the bottom edge of the fixed header. Driven by a
   transform only — see articlePage() in main.js.
------------------------------------------------------------ */
.readbar {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.readbar i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%);
}


/* ------------------------------------------------------------
   21b · ARTICLE HEAD
   Magazine order, per the client's reference: a slim breadcrumb
   strip, then the feature image, then the meta line, then the
   title. No dark hero — the image is the opening statement.
------------------------------------------------------------ */
.artbar {
  margin-top: calc(var(--topbar-h) + var(--header-h));
  padding: 16px 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

/* .crumb is built white-on-dark for the page heroes; this is the
   same component on a light ground */
.crumb--dark { margin-bottom: 0; color: var(--muted); }
.crumb--dark a { color: var(--brown); }
.crumb--dark a:hover { color: var(--green); }
.crumb--dark b { color: var(--green-dark); }

.artlead { margin: 0 0 24px; }
.artlead img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 52px rgba(96,57,19,.14);
}

.artmeta2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 16px;
}

.artmeta2__cat {
  padding: 6px 14px;
  border-radius: 30px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  transition: background .28s ease;
}
.artmeta2__cat:hover { background: var(--green-dark); color: #fff; }

.artmeta2__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.artmeta2__item svg { width: 15px; height: 15px; color: var(--green); }

.arttitle {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 26px;
}


/* ------------------------------------------------------------
   21d · ARTICLE BODY
------------------------------------------------------------ */
.artbody { padding-top: 54px; }

.prose { max-width: 720px; }
.prose > p { font-size: 16.5px; line-height: 1.9; color: var(--text-mid); margin-bottom: 20px; }

.prose__lead {
  font-size: 19px !important;
  line-height: 1.75 !important;
  font-weight: 500;
  color: var(--brown) !important;
  padding-left: 20px;
  border-left: 3px solid var(--green);
  margin-bottom: 30px !important;
}

.prose h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  margin: 40px 0 14px;
  scroll-margin-top: calc(var(--sticky-top) + 24px);
}
.prose h2:first-child { margin-top: 0; }

.prose h3 { font-size: 19px; margin: 28px 0 10px; }

.prose ul, .prose ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-mid);
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 11px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.prose ul li b { color: var(--brown); }

/* Pull quote — quote mark in its own left column, ruled off from
   the text, as in the client's reference */
.pullquote {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: 34px 0;
  padding: 28px 28px;
  border-radius: var(--radius-lg);
  background: var(--green-soft);
  border: 1px solid #CFEEDE;
  border-left: 3px solid var(--green);
}
.pullquote__mark {
  flex-shrink: 0;
  display: block;
  width: 40px;
  padding-right: 22px;
  border-right: 1px solid rgba(0,171,78,.28);
  color: var(--green);
  opacity: .7;
}
.pullquote__mark svg { width: 100%; height: auto; display: block; }
.pullquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.6;
  color: var(--brown);
}

/* Inline figure */
.prose__fig { margin: 30px 0; }
.prose__fig img { width: 100%; border-radius: var(--radius); }
.prose__fig figcaption {
  margin-top: 12px;
  font-size: 13.2px;
  line-height: 1.6;
  color: var(--muted);
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

/* Key takeaways */
.keybox {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 34px 0;
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(95% 70% at 14% 0%, rgba(255,255,255,.13) 0%, transparent 58%),
    linear-gradient(158deg, #0A7C45 0%, #066039 52%, #0B3A21 100%);
  box-shadow: 0 20px 44px rgba(11,58,33,.24);
}
.keybox h3 { color: #fff; font-size: 18px; margin-bottom: 14px; }
.keybox ul { margin: 0; }
.keybox ul li { color: rgba(255,255,255,.86); font-size: 15px; }
.keybox ul li::before { background: var(--green-light); }

/* Tags + share sit on one ruled row, as in the reference */
.artfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.arttags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.arttags > span {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.arttags a {
  padding: 8px 15px;
  border-radius: 40px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-head);
  font-size: 12.8px;
  font-weight: 600;
  color: var(--brown);
  transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s var(--ease);
}
.arttags a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: translateY(-2px);
}

/* Share */
.share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.share__label {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--brown);
}
.share__links { display: flex; align-items: center; gap: 9px; }
.share__links a,
.share__copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 13px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brown);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s var(--ease);
}
.share__links a { width: 40px; padding: 0; justify-content: center; }
.share__links a svg, .share__copy svg { width: 16px; height: 16px; }
.share__links a:hover, .share__copy:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: translateY(-2px);
}
.share__copy.is-copied { background: var(--green); border-color: var(--green); color: #fff; }

/* Author */
.authorbox {
  display: flex;
  gap: 20px;
  margin-top: 34px;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 36px rgba(96,57,19,.07);
}
.authorbox__avatar { flex-shrink: 0; }
.authorbox__avatar img {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--green-soft);
}
.authorbox__role {
  display: block;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 5px;
}
.authorbox h3 { font-size: 19px; margin-bottom: 8px; }
.authorbox p { font-size: 14.6px; line-height: 1.75; color: var(--muted); margin-bottom: 12px; }

/* Signature line, as in the reference */
.authorbox__sign {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--brown);
  opacity: .78;
}

/* Prev / next */
.artnav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 34px;
}
.artnav__item {
  display: block;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .3s ease, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.artnav__item:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(96,57,19,.10);
}
.artnav__dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}
.artnav__dir svg { width: 13px; height: 13px; }
.artnav__item b {
  display: block;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--brown);
}
.artnav__item--next { text-align: right; }
.artnav__item--next .artnav__dir { flex-direction: row; }


/* ------------------------------------------------------------
   21e · IN-COLUMN BLOCKS — related posts and comments
   Both live inside the article column, not full width, so the
   sidebar runs alongside them the whole way down.
------------------------------------------------------------ */
.blockhead {
  position: relative;
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.blockhead::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 54px; height: 2px;
  border-radius: 2px;
  background: var(--green);
}

.relblock { margin-top: 46px; }

.relgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.relcard { display: block; }
.relcard__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 13px;
}
.relcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.relcard:hover .relcard__media img { transform: scale(1.07); }

.relcard__cat {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 7px;
}
.relcard b {
  display: block;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--brown);
  transition: color .28s ease;
}
.relcard:hover b { color: var(--green); }
.relcard__date { display: block; font-size: 12.4px; color: var(--muted); margin-top: 6px; }

/* --- Comments --- */
.comments { margin-top: 50px; }

.commentlist { list-style: none; margin: 0 0 40px; padding: 0; }

.comment {
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.comment:first-child { padding-top: 0; }
/* A reply is indented and marked with a rule down its left edge */
.comment--reply {
  margin-left: 42px;
  padding-left: 20px;
  border-left: 2px solid var(--green-soft);
}

.comment__avatar { flex-shrink: 0; }
.comment__avatar img {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green-soft);
}

.comment__body { min-width: 0; flex: 1; }
.comment__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 7px;
}
.comment__head b {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--brown);
}
.comment__tag {
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.comment__date { font-size: 12.5px; color: var(--muted); }
.comment__body p { font-size: 15px; line-height: 1.8; color: var(--text-mid); margin-bottom: 10px; }

.comment__reply {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brown);
  transition: background .28s ease, color .28s ease, border-color .28s ease;
}
.comment__reply svg { width: 13px; height: 13px; }
.comment__reply:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* --- Reply form --- */
.replyform__note { font-size: 13.8px; color: var(--muted); margin: -12px 0 20px; }

/* Shared field style — the contact page will reuse this */
.kfield {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 14.6px;
  color: var(--text);
  transition: border-color .28s ease, box-shadow .28s ease;
}
.kfield::placeholder { color: var(--text-lit); }
.kfield:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,171,78,.14);
}
textarea.kfield { resize: vertical; min-height: 120px; }


/* ------------------------------------------------------------
   21f · TABLE OF CONTENTS (sidebar)
   Active state is set by an IntersectionObserver, so there is
   no scroll handler measuring headings.
------------------------------------------------------------ */
.toc { display: flex; flex-direction: column; gap: 2px; }

.toc a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-mid);
  transition: background .28s ease, color .28s ease;
}
.toc a i {
  flex-shrink: 0;
  width: 7px; height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--sand);
  transition: background .28s ease, transform .28s var(--ease);
}
.toc a:hover { background: var(--green-soft); color: var(--green-dark); }
.toc a.is-active {
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 700;
}
.toc a.is-active i { background: var(--green); transform: scale(1.3); }

/* The sidebar category list is a <ul> of links on this page and a
   <ul> of buttons on the listing — style both the same */
.slist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-mid);
  transition: background .28s ease, color .28s ease, padding-left .28s var(--ease);
}
.slist a span {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--sand);
  color: var(--muted);
  transition: background .28s ease, color .28s ease;
}
.slist a:hover { background: var(--green-soft); color: var(--green-dark); padding-left: 17px; }
.slist a:hover span { background: var(--green); color: #fff; }

/* .stags holds filter buttons on the listing and plain links on the
   article — both get the same chip */
.stags a {
  padding: 8px 14px;
  border-radius: 40px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-head);
  font-size: 12.8px;
  font-weight: 600;
  color: var(--muted);
  transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s var(--ease);
}
.stags a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: translateY(-2px);
}

/* Non-interactive .stags pill — illustrative examples (end-use lists)
   rather than clickable filters, so no hover/link affordance. */
.stags span {
  padding: 8px 14px;
  border-radius: 40px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-head);
  font-size: 12.8px;
  font-weight: 600;
  color: var(--muted);
}


/* ------------------------------------------------------------
   21g · EXTRA SIDEBAR WIDGETS (article rail)
------------------------------------------------------------ */

/* --- Search --- */
.swidget--search { padding: 16px; }
.ssearch { position: relative; display: flex; align-items: center; }
.ssearch input {
  width: 100%;
  padding: 13px 52px 13px 16px;
  border-radius: 50px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-size: 14px;
  color: var(--text);
  transition: border-color .28s ease, box-shadow .28s ease;
}
.ssearch input::placeholder { color: var(--text-lit); }
.ssearch input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,171,78,.14);
}
.ssearch input::-webkit-search-decoration,
.ssearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ssearch button {
  position: absolute;
  right: 5px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  transition: background .28s ease, transform .28s var(--ease);
}
.ssearch button:hover { background: var(--green-dark); transform: scale(1.05); }
.ssearch button svg { width: 17px; height: 17px; }

/* --- About the desk --- */
.swidget--about { text-align: center; }
.sabout__avatar {
  display: inline-block;
  width: 104px; height: 104px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 14px;
  border: 3px solid var(--green-soft);
  box-shadow: 0 10px 26px rgba(11,58,33,.14);
}
.sabout__avatar img { width: 100%; height: 100%; object-fit: cover; }
.swidget--about h4 { font-size: 18px; margin-bottom: 4px; }
.sabout__role {
  display: block;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.swidget--about p { font-size: 14px; line-height: 1.75; color: var(--muted); margin-bottom: 16px; }

.sabout__social { display: flex; justify-content: center; gap: 9px; }
.sabout__social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--brown);
  transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s var(--ease);
}
.sabout__social a svg { width: 15px; height: 15px; }
.sabout__social a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: translateY(-3px);
}

/* --- Promo banner --- */
.spromo {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.spromo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.spromo:hover img { transform: scale(1.06); }
.spromo__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11,58,33,.20) 0%, rgba(11,58,33,.60) 52%, rgba(11,58,33,.92) 100%);
}
.spromo__body {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 24px 22px;
  text-align: center;
}
.spromo__tag {
  display: block;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 9px;
}
.spromo__body b {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 14px;
}
.spromo__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 40px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  transition: background .3s ease, border-color .3s ease;
}
.spromo__cta svg { width: 13px; height: 13px; }
.spromo:hover .spromo__cta { background: var(--green); border-color: var(--green); }

/* --- Popular posts --- */
.poplist { list-style: none; margin: 0; padding: 0; }
.poplist li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.poplist a { display: flex; align-items: center; gap: 12px; }

.pop__num {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--sand);
  transition: color .28s ease;
}
.poplist a:hover .pop__num { color: var(--green); }

.pop__media {
  flex-shrink: 0;
  width: 66px; height: 58px;
  border-radius: 9px;
  overflow: hidden;
}
.pop__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.poplist a:hover .pop__media img { transform: scale(1.08); }

.pop__body { min-width: 0; }
.pop__body b {
  display: block;
  font-family: var(--font-head);
  font-size: 13.8px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brown);
  transition: color .28s ease;
}
.poplist a:hover .pop__body b { color: var(--green); }
.pop__date { display: block; font-size: 11.8px; color: var(--muted); margin-top: 4px; }

/* --- Follow row --- */
.ssocial { display: grid; grid-template-columns: 1fr; gap: 9px; }
.ssocial a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brown);
  transition: background .28s ease, color .28s ease, border-color .28s ease, padding-left .28s var(--ease);
}
.ssocial a svg { width: 15px; height: 15px; color: var(--green); transition: color .28s ease; }
.ssocial a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  padding-left: 19px;
}
.ssocial a:hover svg { color: #fff; }

/* --- Photo grid --- */
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sgrid a {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.sgrid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sgrid a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11,58,33,.55);
  opacity: 0;
  transition: opacity .3s ease;
}
.sgrid a:hover img { transform: scale(1.12); }
.sgrid a:hover::after { opacity: 1; }


/* ============================================================
   22 · CONTACT PAGE
   Built to the client's reference: enquiry form on the left,
   dark newsletter card on the right, three info cards below
   (the first one filled), then a full-width map.
============================================================ */

/* ------------------------------------------------------------
   22a · ENQUIRY FORM
------------------------------------------------------------ */
.cform {
  height: 100%;
  padding: 34px 32px 36px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(96,57,19,.07);
}
.cform .sec-head { margin-bottom: 26px; }

/* Filled field, as in the reference — the bordered .kfield used
   elsewhere would read as a different form language here */
.kfield--soft {
  background: var(--brown-soft);
  border-color: transparent;
  border-radius: 12px;
  padding: 15px 18px;
}
.kfield--soft:focus {
  background: #fff;
  border-color: var(--green);
}
.kfield--soft::placeholder { color: #A79680; }

/* Inline validation */
.kfield.is-invalid { border-color: #C0492F; background: #FDF3F1; }
.kfield.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192,73,47,.14); }

.kerror {
  display: none;
  margin: 7px 2px 0;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  color: #C0492F;
}
.kerror.is-on { display: block; }

.cform__status {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--green-soft);
  border: 1px solid #CFEEDE;
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--green-darker);
}


/* ------------------------------------------------------------
   22b-2 · NEWSLETTER SIGNUP FORM
   Shared [data-newsletter] form used in the footer (dark) and on
   the contact page (light, inside a .cform card — reuses .kfield
   there so only layout, not color, is defined here for that case).
------------------------------------------------------------ */
.nsltr {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.nsltr .btn-k { flex-shrink: 0; }

/* Dark input for the footer instance only */
.nsltr__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  font-family: inherit;
  font-size: 14.6px;
  color: #fff;
  transition: background .3s ease, border-color .3s ease;
}
.nsltr__input::placeholder { color: rgba(255,255,255,.45); }
.nsltr__input:focus { background: rgba(255,255,255,.1); border-color: var(--green); outline: none; }
.nsltr__input.is-invalid { border-color: #ff9b8a; }

/* Contact-page instance: form is still .nsltr for flex layout,
   but the input is styled by .kfield.kfield--soft instead. */
.nsltr--light .kfield { flex: 1 1 220px; min-width: 0; }

.nsltr__status {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 500;
}
.nsltr__status.is-success { color: #7ee2a8; }
.nsltr__status.is-error { color: #ff9b8a; }
.nsltr--light ~ .nsltr__status.is-success { color: var(--green-darker); }
.nsltr--light ~ .nsltr__status.is-error { color: #C0492F; }


/* ------------------------------------------------------------
   22c · CONTACT CARDS
------------------------------------------------------------ */
.cgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.ccard {
  padding: 30px 26px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 36px rgba(96,57,19,.06);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease;
}
.ccard:hover {
  transform: translateY(-5px);
  border-color: var(--green);
  box-shadow: 0 22px 48px rgba(96,57,19,.12);
}
/* The reference tints the first card — it is the primary contact */
.ccard--fill { background: var(--green-soft); border-color: #CFEEDE; }

.ccard__icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 18px;
  margin-bottom: 18px;
  background: #fff;
  color: var(--green);
  border: 1px solid var(--line);
  transition: background .32s ease, color .32s ease, transform .45s var(--ease);
}
.ccard--fill .ccard__icon { background: #fff; border-color: #CFEEDE; }
.ccard:hover .ccard__icon {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: rotate(-8deg);
}
.ccard__icon svg { width: 27px; height: 27px; }

.ccard__value {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--brown);
  margin-bottom: 10px;
  word-break: break-word;
}
.ccard__value a { color: inherit; }
.ccard__value a:hover { color: var(--green); }

.ccard p { font-size: 14.2px; line-height: 1.75; color: var(--muted); margin: 0; }

/* Office tabs — .ccard is clickable (role="button") to switch the map below */
.ccard--office { cursor: pointer; }


/* ------------------------------------------------------------
   22d · MAP
------------------------------------------------------------ */
.cmap {
  margin-top: 26px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(96,57,19,.10);
  background: var(--sand);
  line-height: 0;          /* kills the inline-frame descender gap */
}
.cmap iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}


/* ============================================================
   23 · LEGAL PAGES  (privacy policy, and any future terms page)
   The title area is the shared .phero — same as About and
   Contact — so only the body needs its own rules here.
   Deliberately plain: full-width running text, no cards, no
   icons, no reveal animations.
============================================================ */

/* Full width on purpose — the client asked for plain full-width
   paragraphs, so there is no reading-measure cap here as there is
   on .prose */
.legal p {
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-mid);
  margin-bottom: 18px;
}
.legal h2 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  margin: 38px 0 12px;
}
.legal h2:first-of-type { margin-top: 30px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }


/* ------------------------------------------------------------
   17 · BACK TO TOP
------------------------------------------------------------ */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 900;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,171,78,.36);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s var(--ease), visibility .3s, background .3s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--green-dark); }
.to-top svg { width: 16px; height: 16px; }


/* ------------------------------------------------------------
   18 · PRODUCT PAGES
   Product detail page components: commodity cards, strength boxes
------------------------------------------------------------ */

.prod-media { position: relative; }
.prod-media img { width: 100%; height: auto; display: block; }

.prod-content h3 { font-size: 24px; color: var(--brown); margin-bottom: 18px; }
.prod-content p { font-size: 16px; line-height: 1.85; color: var(--text-mid); }

/* Commodity card */
.comm-card {
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.comm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(96,57,19,.15);
  border-color: var(--green);
}

/* Commodity card — photo variant (sub-product rows) */
.comm-card--photo {
  padding: 0;
  overflow: hidden;
}
.comm-card--photo .comm-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}
.comm-card--photo .comm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.comm-card--photo:hover .comm-card__media img {
  transform: scale(1.07);
}
.comm-card--photo .comm-card__body {
  padding: 18px 18px 20px;
}
.comm-card--photo h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--brown);
  line-height: 1.35;
}

/* Row layout for sub-product image cards: horizontal scroll on mobile, grid on larger screens */
.comm-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.comm-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: #fff;
  margin-bottom: 18px;
  flex-shrink: 0;
  transition: transform .3s ease, box-shadow .3s ease;
}
.comm-card:hover .comm-card__icon {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0,171,78,.15);
}
.comm-card__icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--green);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.comm-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 8px;
  margin-top: 0;
  line-height: 1.3;
  transition: color .3s ease;
}
.comm-card:hover h3 {
  color: var(--green);
}
.comm-card p {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* Strength/Feature box */
.strength-box {
  padding: 30px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.strength-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(96,57,19,.15);
  border-color: var(--green);
}

/* Decorative number background */
.strength-box::before {
  content: '';
  position: absolute;
  right: -12px;
  top: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,171,78,.08) 0%, transparent 68%);
  pointer-events: none;
}

.strength-box__num {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}

.strength-box__title {
  position: relative;
  z-index: 1;
  font-size: 19px;
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 12px;
  line-height: 1.35;
}

.strength-box__text {
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.65;
  margin: 0;
}

/* Feature card — icon-forward variant, richer than the plain
   numbered strength-box for pages with distinct feature callouts. */
.feature-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  height: 100%;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(96,57,19,.15);
  border-color: var(--green);
}
.feature-card__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover .feature-card__icon {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0,171,78,.15);
}
.feature-card__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--green);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-card__body h3 {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--brown);
  margin: 0 0 6px;
  line-height: 1.35;
}
.feature-card__body p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* Tag group — now a full icon-header card instead of a bare label,
   so the Applications section carries the same visual weight as the
   photo/feature cards around it. */
.tag-group {
  height: 100%;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.tag-group:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(96,57,19,.12);
  border-color: var(--green);
}
.tag-group__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tag-group:hover .tag-group__icon {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0,171,78,.15);
}
.tag-group__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--green);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tag-group__title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 16px;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.tag-pill:hover {
  border-color: var(--green);
  color: var(--green-dark);
  background: var(--green-soft);
}

/* CTA Band overrides */
.cta-band {
  text-align: center;
  padding: 72px 0;
}
.cta-band h2 {
  color: #fff;
}
.cta-band .btn-k {
  min-width: 160px;
}


/* Footer */
.footer {
  background: var(--brown-dark);
  color: rgba(255,255,255,.7);
  padding-top: 60px;
  padding-bottom: 20px;
}
.footer h5 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
  margin-top: 0;
}
.footer p {
  margin-bottom: 12px;
}
.footer a {
  color: var(--green);
  text-decoration: none;
  transition: color .25s ease;
}
.footer a:hover {
  color: var(--green-light);
}
.footer__top {
  padding: 60px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer__newsletter {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer__bottom {
  padding: 24px 0;
  text-align: center;
}


/* ------------------------------------------------------------
   18 · REDUCED MOTION
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; }
  .hero__tag, .hero__title, .hero__text, .hero__actions { opacity: 1 !important; transform: none !important; }
}