/* ============================================================
   iFert Design System — styles.css
   Palette:
     Carbon Black  #162018
     Deep Forest   #213E25
     Dark Spruce   #2A522E
     Hunter Green  #4B6650
     Grey Olive    #8B948E
     Alabaster     #E7EBE8
     Lime Yellow   #E0FF4F
   ============================================================ */

:root {
  --carbon:    #162018;
  --forest:    #213E25;
  --spruce:    #2A522E;
  --hunter:    #4B6650;
  --olive:     #8B948E;
  --alabaster: #E7EBE8;
  --lime:      #E0FF4F;
  --white:     #ffffff;
  --font-display: 'Fraunces', serif;
  --font-heading: 'Manrope', sans-serif;
  --font-system:  'Instrument Sans', sans-serif;
  --nav-h:       84px;
  --container:   1160px;
  --pad:         clamp(20px, 5.5vw, 88px);
  --gap-section: clamp(56px, 8vw, 128px);
  --gap-col:     clamp(36px, 5vw, 96px);
}

/* ─── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-system);
  font-weight: 400;
  color: var(--hunter);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ─── LAYOUT ─────────────────────────────────────────── */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.page-body { padding-top: var(--nav-h); }
/* Homepage: hero is full-bleed behind the transparent nav, no padding needed */
.page-body--home { padding-top: 0; }
.section { padding-top: var(--gap-section); padding-bottom: var(--gap-section); }
.section--alabaster { background: var(--alabaster); }

/* ─── TYPOGRAPHY ─────────────────────────────────────── */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 9.5vw, 128px);
  line-height: .93;
  letter-spacing: -.025em;
  color: var(--white);
}
.t-long {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--carbon);
}
.t-short {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(18px, 1.76vw, 22px);
  line-height: 1.25;
  color: var(--carbon);
}
.t-body {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: clamp(16px, 1.24vw, 18px);
  line-height: 1.55;
  max-width: 65ch;   /* keeps the measure readable on wide screens */
  color: var(--hunter);
}
.t-label {
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--spruce);
}
.t-eyebrow {
  display: block;
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--spruce);
  margin-bottom: 12px;
}
.s-rule {
  border: none;
  border-top: 1px solid rgba(22,32,24,.12);
  margin: 20px 0 28px;
}

/* In-copy links.
   .t-link was used in body copy on three service pages but had no rule, so
   with the global `a { color: inherit; text-decoration: none }` these links
   rendered identically to surrounding text — same colour, same weight, no
   underline — and were undiscoverable. Underlined as well as coloured, so
   the affordance does not rely on colour alone. */
.t-link {
  color: var(--spruce);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(42,82,46,.4);
  transition: color .14s ease, text-decoration-color .14s ease;
}
.t-link:hover,
.t-link:focus-visible {
  color: var(--forest);
  text-decoration-color: currentColor;
}

/* ─── BUTTONS ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 100px;
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  min-height: 44px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .14s ease;
  border: none;
}
.btn--dark { background: var(--spruce); color: var(--lime); }
.btn--dark:hover { background: var(--carbon); transform: translateY(-1px); }

/* ─── NAV ────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--white);
  border-bottom: 1px solid rgba(22,32,24,.07);
  z-index: 300;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.nav__logo { flex-shrink: 0; display: block; height: 48px; }
.nav__logo img { height: 100%; width: auto; display: block; }

/* Desktop links */
.nav__links {
  display: flex;
  align-items: center;
  list-style: none;
  height: 100%;
}
.nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 13px;
  height: 100%;
  color: var(--carbon);
  font-family: var(--font-system);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .03em;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease;
  position: relative;
  min-height: 44px;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 13px; right: 13px;
  height: 2px;
  background: var(--lime);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav__item:hover .nav__link::after,
.nav__item[data-open] .nav__link::after { transform: scaleX(1); }
.nav__item:hover .nav__link,
.nav__item[data-open] .nav__link { color: var(--spruce); }
.nav__link--active { color: var(--spruce); }
.nav__link--active::after { transform: scaleX(1); }
.nav__chevron {
  width: 10px; height: 6px;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .5; flex-shrink: 0;
  transition: transform .2s ease;
}
.nav__item:hover .nav__chevron,
.nav__item[data-open] .nav__chevron { transform: rotate(180deg); opacity: .8; }

/* Dropdown */
.nav__dropdown {
  position: absolute;
  top: calc(100% - 1px); left: 0;
  min-width: 250px;
  background: var(--white);
  border: 1px solid rgba(22,32,24,.09);
  border-top: 2px solid var(--lime);
  border-radius: 0 0 8px 8px;
  padding: 6px 0 10px;
  box-shadow: 0 12px 40px rgba(22,32,24,.10), 0 2px 8px rgba(22,32,24,.05);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
}
.nav__item[data-open] .nav__dropdown {
  opacity: 1; visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__dropdown a {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  font-family: var(--font-system);
  font-weight: 400;
  font-size: 13px;
  color: var(--hunter);
  min-height: 44px;
  transition: background .12s ease, color .12s ease, padding-left .12s ease;
}
.nav__dropdown a:hover { background: var(--alabaster); color: var(--spruce); padding-left: 26px; }

/* CTA pill */
.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  background: var(--carbon);
  color: var(--lime);
  border-radius: 100px;
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .03em;
  margin-left: 10px;
  min-height: 44px;
  transition: background .18s ease, transform .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__cta:hover { background: var(--spruce); transform: translateY(-1px); }

/* Hamburger button — hidden on desktop */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--carbon);
  border-radius: 1px;
  transform-origin: center;
  transition: transform .22s ease, opacity .18s ease, width .18s ease;
}
.nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* Mobile drawer */
.nav__drawer {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  bottom: 0;
  background: var(--white);
  overflow-y: auto;
  z-index: 290;
  padding: 8px 0 40px;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.nav__drawer.is-open { transform: translateX(0); }

/* Desktop nav -> hamburger switch.
   The top-level items plus logo and CTA need ~925px; below roughly 1050px
   the bar runs out of room and items collide. Switching to the drawer at
   1024px keeps the desktop nav comfortable at every width it is actually
   shown. The 768px block further down still governs the rest of the mobile
   layout and is unchanged. */
@media (max-width: 1024px) {
  .nav__links     { display: none; }
  .nav__cta       { display: none; }
  .nav__hamburger { display: flex; }
  .nav__drawer    { display: block; }
}

/* Mobile nav items */
.nav__drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad);
  font-family: var(--font-system);
  font-weight: 500;
  font-size: 18px;
  color: var(--carbon);
  border-bottom: 1px solid rgba(22,32,24,.06);
  min-height: 52px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__drawer-link svg {
  width: 10px; height: 6px;
  stroke: var(--olive); stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.nav__drawer-link.is-open svg { transform: rotate(180deg); }
.nav__drawer-link--active { color: var(--spruce); }

/* Mobile sub-menu */
.nav__drawer-sub {
  display: block;
  max-height: 0;
  overflow: hidden;
  background: var(--alabaster);
  border-bottom: 0px solid rgba(22,32,24,.06);
  transition: max-height .28s cubic-bezier(.4,0,.2,1), border-bottom-width .28s ease;
}
.nav__drawer-sub.is-open {
  max-height: 400px;
  border-bottom-width: 1px;
}
.nav__drawer-sub a {
  display: flex;
  align-items: center;
  padding: 12px var(--pad) 12px calc(var(--pad) + 16px);
  font-family: var(--font-system);
  font-weight: 400;
  font-size: 17px;
  color: var(--hunter);
  border-bottom: 1px solid rgba(22,32,24,.05);
  min-height: 48px;
}
.nav__drawer-sub a:last-child { border-bottom: none; }
.nav__drawer-sub a:active { background: rgba(22,32,24,.04); color: var(--spruce); }

/* Mobile CTA in drawer */
.nav__drawer-cta {
  display: flex;
  margin: 24px var(--pad) 0;
}
.nav__drawer-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background: var(--carbon);
  color: var(--lime);
  border-radius: 100px;
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .01em;
  min-height: 52px;
  -webkit-tap-highlight-color: transparent;
}

/* Scroll lock when drawer open */
body.nav-open { overflow: hidden; }

/* ─── HOME: Transparent nav over hero ───────────────── */
.nav--transparent {
  background: transparent;
  border-bottom-color: rgba(255,255,255,.08);
}
.nav--solid {
  background: var(--white);
  border-bottom-color: rgba(22,32,24,.07);
  box-shadow: 0 2px 16px rgba(22,32,24,.05);
}
.nav--solid   .nav__link { color: var(--carbon); }
.nav--transparent .nav__link { color: rgba(255,255,255,.88); }
.nav__item:hover .nav__link,
.nav__item[data-open] .nav__link { color: var(--forest) !important; }
.nav--solid   .nav__cta { background: var(--carbon); color: var(--lime); }
.nav--transparent .nav__cta { background: var(--lime); color: var(--carbon); }
/* Logo src is swapped by JS on index.html (transparent→solid nav).
   No display toggling needed — single <img> element used on homepage. */
/* Hamburger on transparent bg */
.nav--transparent .nav__hamburger span { background: var(--white); }

/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(40px, 5vw, 80px);
}
.page-header__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
  align-items: end;
}

/* ─── MEDIA BAND ─────────────────────────────────────── */
.media-band {
  width: 100%;
  height: clamp(220px, 38vw, 560px);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  z-index: 0;
  background: var(--forest);
}
.media-band video,
.media-band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 50%;
}

/* ─── PLACEHOLDER COLOUR BLOCKS ──────────────────────── */
.ph-block {
  width: 100%; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
}
.ph-block--alabaster { background: var(--alabaster); }
.ph-block--forest    { background: var(--forest); }
.ph-block--spruce    { background: var(--spruce); }
.ph-block--hunter    { background: var(--hunter); }
.ph-block--olive     { background: var(--olive); }
.ph-block__label {
  font-family: var(--font-system);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}

/* ─── CONTENT ROWS ───────────────────────────────────── */
.content-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
  align-items: start;
}
.content-row--center { align-items: center; }
.content-row__image {
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 3/2;
  background: var(--alabaster);
}
.content-row__image img { width: 100%; height: 100%; object-fit: cover; }

/* ─── I-FERT DIFFERENCE: NUMBERED STEPS ──────────────── */
/* Stack of 4 rows (image + copy), reusing .content-row for each row's
   internal 2-col layout — this just adds vertical rhythm between rows
   and the big Fraunces step number. Page-scoped to The i-Fert Difference. */
.diff-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vw, 112px);
}
.diff-step__number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--spruce);
  margin-bottom: 14px;
}

/* ─── I-FERT DIFFERENCE: TESTIMONIAL BREAKOUT ────────── */
/* Distinct from .pullquote (used for the page's closing CTA band) — a
   dark, photo-led treatment for the John Foster case-study quote.
   Page-scoped to The i-Fert Difference. */
.diff-testimonial {
  background: var(--forest);
  padding: clamp(48px, 6.5vw, 80px) 0;
}
.diff-testimonial__grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.diff-testimonial__photo {
  aspect-ratio: 3/4;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(22,32,24,.35);
}
.diff-testimonial__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diff-testimonial__mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(42px, 5vw, 68px);
  line-height: .6;
  color: var(--lime);
  margin-bottom: 8px;
}
.diff-testimonial__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--white);
  margin-bottom: 20px;
}
.diff-testimonial__attr {
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 24px;
}
.diff-testimonial__attr span {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(255,255,255,.55);
}
.diff-testimonial__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border-radius: 100px;
  background: var(--lime);
  color: var(--carbon);
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
  min-height: 48px;
  transition: background .18s ease, transform .15s ease;
}
.diff-testimonial__cta:hover { background: var(--white); transform: translateY(-1px); }

@media (max-width: 768px) {
  .diff-testimonial__grid { grid-template-columns: 1fr; text-align: center; }
  .diff-testimonial__photo { max-width: 180px; margin: 0 auto 8px; }
  .diff-testimonial__mark { margin-left: auto; margin-right: auto; }
}

/* ─── BLOCKQUOTE ─────────────────────────────────────── */
.blockquote {
  border-left: 3px solid var(--lime);
  padding-left: 18px;
  margin: 20px 0 8px;
}
.blockquote p {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--carbon);
  font-style: italic;
}
.blockquote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--olive);
  font-style: normal;
}

/* ─── ICON GRID (standalone principle / feature cards) ── */
.icon-grid-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--forest);
  text-align: center;
  margin: 0 auto clamp(40px, 5vw, 64px);
  max-width: 720px;
}
.icon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: clamp(48px, 6vw, 72px);
}
.icon-grid__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.icon-grid__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.icon-grid__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.28;
  color: var(--carbon);
  margin-bottom: 14px;
}
.icon-grid__text {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--hunter);
  max-width: 380px;
}

/* ─── PULLQUOTE ──────────────────────────────────────── */
.pullquote {
  background: var(--alabaster);
  padding: clamp(56px, 8vw, 108px) 0;
  text-align: center;
}
.pullquote__text {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: clamp(17px, 2.2vw, 26px);
  line-height: 1.55;
  color: var(--carbon);
  max-width: 780px;
  margin: 0 auto;
}
.pullquote__cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 28px;
  background: var(--spruce);
  color: var(--lime);
  border-radius: 100px;
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  margin-top: 36px;
  min-height: 44px;
  transition: background .18s ease, transform .15s ease;
}
.pullquote__cta:hover { background: var(--carbon); transform: translateY(-1px); }
.pullquote__attr {
  font-family: var(--font-system);
  font-size: 15px;
  font-weight: 500;
  color: var(--grey-olive, #8B948E);
  letter-spacing: .03em;
  margin-top: 20px;
  margin-bottom: 24px;
}

/* ─── HOMEPAGE HERO ──────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--forest);
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22,32,24,.20) 0%,
    rgba(22,32,24,.08) 35%,
    rgba(22,32,24,.30) 70%,
    rgba(22,32,24,.60) 100%
  );
}
/* Hero content — one centred column: the headline lockup (tagline + two-line
   headline), then the sub-row offset into the right half for the editorial
   asymmetry. Laid out in normal flow (flex, vertically centred) rather than
   pinned to fixed percentages: the two-line headline is roughly twice as tall
   as the old one-word headline, and fixed 50%/65% anchors let the two blocks
   collide on short or landscape viewports. Flow guarantees the gap. */
.hero__content {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + clamp(12px, 2.5vh, 32px)) var(--pad) clamp(40px, 6vh, 88px);
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 0 auto;
  left: 0; right: 0;
}

/* Lockup — keeps tagline and headline locked together as one optical unit */
.hero__lockup {
  width: 100%;
  text-align: center;
}
.hero__tagline {
  font-family: var(--font-system);
  font-weight: 600;
  font-size: clamp(13px, 1.04vw, 15px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  line-height: 1.4;
  margin: 0 0 clamp(16px, 2.2vw, 28px);
  /* the video's opening frames are bright sky — a soft shadow keeps the
     small uppercase type legible before the gradient overlay does much */
  text-shadow: 0 1px 14px rgba(22,32,24,.45);
}
/* Small lime rule under the tagline — ties the hero to the brand accent and
   gives the eye a start point above the headline. */
.hero__tagline::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--lime);
  border-radius: 2px;
  margin: clamp(12px, 1.6vw, 18px) auto 0;
  opacity: .9;
}
/* Headline: two balanced lines.
   Sized against the viewport rather than the container. At the previous
   8.6vw/128px the two-line block was 245px tall — 27% of a 1440x900 laptop
   screen, and with the 84px nav above it that was over a third of the
   window before the supporting copy began. 7.2vw/104px keeps the display
   scale but brings the block to 205px (23%), leaving the tagline, body and
   buttons room to breathe. Mobile and the short-viewport rule below are
   tuned separately and are unaffected. */
.hero__headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 7.2vw, 104px);
  line-height: .97;
  letter-spacing: -.028em;
  color: var(--white);
  margin: 0;
  text-shadow: 0 2px 28px rgba(22,32,24,.30);
}
/* Each sentence is its own line — no reliance on where the browser happens to
   wrap, so the break is identical on every screen. */
.hero__line { display: block; }
.hero__line + .hero__line { margin-top: .04em; }

/* Sub-row: sits in the right half, top-aligned to the midpoint — the same
   editorial offset as before, now driven by margin instead of a 65% anchor. */
.hero__sub {
  width: 50%;
  margin: clamp(36px, 6vh, 84px) 0 0 auto;
  padding-left: clamp(16px, 2vw, 32px);
}
.hero__left {}
.hero__eyebrow {
  font-family: var(--font-system);
  font-weight: 500;
  font-size: 15px;
  color: rgba(255,255,255,.55);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hero__body {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: clamp(16px, 1.34vw, 19px);
  line-height: 1.5;
  color: rgba(255,255,255,.78);
  margin-bottom: clamp(24px, 3vw, 36px);
}
/* CTAs sit directly below body copy, left-aligned */
.hero__right {
  display: block;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border-radius: 100px;
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
  min-height: 48px;
  transition: background .18s ease, color .18s ease, transform .15s ease;
}
.hero__cta--primary { background: var(--lime); color: var(--carbon); }
.hero__cta--primary:hover { background: var(--white); transform: translateY(-1px); }
.hero__cta--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.4);
}
.hero__cta--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.1); }

/* ─── FEATURES BAND ──────────────────────────────────── */
.features-band {
  background: linear-gradient(
    to bottom,
    var(--forest) 0%,
    var(--forest) 35%,
    var(--spruce) 100%
  );
  padding: clamp(48px, 7vw, 88px) 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 64px);
}
.feature__icon {
  width: auto;
  height: auto;
  max-width: 48px;
  max-height: 48px;
  margin-bottom: 20px;
  display: block;
  object-fit: contain;
}
.feature__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  color: var(--white);
  margin-bottom: 14px;
  line-height: 1.2;
}
.feature__divider { border: none; border-top: 1px solid rgba(255,255,255,.15); margin: 18px 0 20px; }
.feature__body {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,.6);
}
.feature__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  padding: 9px 20px;
  background: transparent;
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  font-family: var(--font-system);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.feature__cta:hover { border-color: rgba(255,255,255,.8); color: #fff; }

/* ─── BREAKOUT SECTION ICON ─────────────────────────── */
.breakout-icon {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 28px;
  object-fit: contain;
}

/* ─── CURVE DIVIDER ──────────────────────────────────── */
/* Full-bleed section-transition curves (viewBox 1440 wide, preserveAspectRatio
   none). At mobile widths the same fixed pixel height gets stretched over a
   much narrower box, so the curve reads as far steeper ("egg-like") than on
   desktop — these modifiers hold the desktop height and scale it down on
   small screens so the curve stays gentle everywhere. */
.curve-divider {
  display: block;
  width: 100%;
  margin-bottom: -1px;
}
.curve-divider--tall { height: 72px; }
.curve-divider--short { height: 56px; }

@media (max-width: 768px) {
  .curve-divider--tall { height: 32px; }
  .curve-divider--short { height: 24px; }
}

/* ─── TEAM PAGE ──────────────────────────────────────── */
.team-section { background: var(--alabaster); padding: clamp(64px, 9vw, 120px) 0; }
.team-member {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  padding: clamp(48px, 6vw, 80px) 0;
  border-bottom: 1px solid rgba(22,32,24,.10);
}
.team-member:first-child { padding-top: 0; }
.team-member:last-child { border-bottom: none; padding-bottom: 0; }
.team-member__photo {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 3px;
  overflow: hidden;
  background: var(--hunter);
}
.team-member__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.team-member__name {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--carbon);
  margin-bottom: 6px;
}
.team-member__role {
  display: block;
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--spruce);
  margin-bottom: 24px;
}
.team-member__bio p {
  font-family: var(--font-system);
  font-size: clamp(16px, 1.24vw, 18px);
  line-height: 1.55;
  color: var(--hunter);
  margin-bottom: 14px;
}
.team-member__bio p:last-child { margin-bottom: 0; }
.team-member__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 10px 22px;
  border-radius: 100px;
  background: var(--spruce);
  color: var(--lime);
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  min-height: 44px;
  transition: background .18s ease, transform .14s ease;
}
.team-member__cta:hover { background: var(--carbon); transform: translateY(-1px); }
.team-member__cta svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Case study grid ─────────────────────────────────────────────────── */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.case-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.case-card__image {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--hunter);
}
.case-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.case-card:hover .case-card__image img { transform: scale(1.03); }
.case-card__body {
  padding: clamp(20px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.case-card__name { margin-bottom: 12px; }
.case-card__excerpt {
  flex: 1;
  margin-bottom: 24px;
  color: var(--carbon);
  opacity: .8;
}
.case-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 10px 22px;
  border-radius: 100px;
  background: var(--carbon);
  color: var(--lime);
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .18s ease, transform .14s ease;
}
.case-card__cta:hover { background: var(--spruce); transform: translateY(-1px); }

/* ─── CONTACT PAGE ───────────────────────────────────── */
.contact-hero { background: var(--lime); padding: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 64px); }
.contact-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-col); align-items: center; }
.contact-hero__label {
  display: block;
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--spruce);
  margin-bottom: 18px;
}
.contact-hero__heading {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--carbon);
  margin-bottom: 24px;
}
.contact-hero__intro {
  font-family: var(--font-system);
  font-size: clamp(17px, 1.34vw, 19px);
  line-height: 1.5;
  color: var(--spruce);
}
.contact-details { background: var(--carbon); border-radius: 6px; padding: clamp(28px, 4vw, 52px); }
.contact-details__heading {
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 28px;
}
.contact-detail { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.contact-detail:last-child { border-bottom: none; padding-bottom: 0; }
.contact-detail__icon {
  width: 36px; height: 36px;
  background: rgba(224,255,79,.10);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-detail__icon svg { width: 16px; height: 16px; stroke: var(--lime); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-detail__label { display: block; font-family: var(--font-system); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 4px; }
.contact-detail__value { font-family: var(--font-system); font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.85); }
.contact-detail__value a { color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.15); padding-bottom: 1px; transition: color .14s, border-color .14s; }
.contact-detail__value a:hover { color: var(--lime); border-color: var(--lime); }

/* Form section */
.form-section { padding: clamp(64px, 10vw, 136px) 0; }
.form-section__inner { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--gap-col); align-items: start; }
.form-section__left { position: sticky; top: calc(var(--nav-h) + 32px); }
.form-section__label { display: block; font-family: var(--font-system); font-weight: 600; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--spruce); margin-bottom: 16px; }
.form-section__heading { font-family: var(--font-heading); font-weight: 300; font-size: clamp(24px, 3vw, 38px); line-height: 1.12; letter-spacing: -.015em; color: var(--carbon); margin-bottom: 20px; }
.form-section__body { font-family: var(--font-system); font-size: 17px; line-height: 1.55; color: var(--hunter); margin-bottom: 36px; }
.form-section__divider { border: none; border-top: 1px solid rgba(22,32,24,.10); margin-bottom: 32px; }
.response-note { display: flex; align-items: flex-start; gap: 12px; }
.response-note__icon { width: 32px; height: 32px; background: var(--alabaster); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.response-note__icon svg { width: 14px; height: 14px; stroke: var(--spruce); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.response-note__text { font-size: 15px; line-height: 1.5; color: var(--olive); }
.response-note__text strong { font-weight: 600; color: var(--hunter); }
.enquiry-form { width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row--full { grid-template-columns: 1fr; }
.field { position: relative; display: flex; flex-direction: column; }
.field__label { position: absolute; top: 18px; left: 20px; font-family: var(--font-system); font-weight: 500; font-size: 16px; color: var(--olive); pointer-events: none; transform-origin: left top; transition: transform .18s ease, color .18s ease, font-size .18s ease, top .18s ease; z-index: 1; }
.field__input, .field__textarea, .field__select { width: 100%; padding: 26px 20px 10px; border: 1.5px solid rgba(22,32,24,.14); border-radius: 4px; background: var(--white); font-family: var(--font-system); font-weight: 400; font-size: 18px; color: var(--carbon); line-height: 1.4; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; appearance: none; -webkit-appearance: none; min-height: 56px; }
.field__textarea { resize: vertical; min-height: 160px; }
.field__input:focus, .field__textarea:focus, .field__select:focus { border-color: var(--spruce); box-shadow: 0 0 0 3px rgba(42,82,46,.10); background: #fafbfa; }
.field__input:focus + .field__label, .field__input:not(:placeholder-shown) + .field__label,
.field__textarea:focus + .field__label, .field__textarea:not(:placeholder-shown) + .field__label,
.field__select:focus + .field__label, .field--filled .field__label { top: 9px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--spruce); }
.field--error .field__input, .field--error .field__textarea, .field--error .field__select { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.08); }
.field__error-msg { font-size: 13px; color: #c0392b; margin-top: 6px; display: none; padding-left: 4px; font-weight: 500; }
.field--error .field__error-msg { display: block; }
.field__select-wrap { position: relative; }
.field__select-wrap::after { content: ''; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 10px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234B6650' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; }
.field__select { padding-right: 44px; cursor: pointer; }
.check-group { margin-bottom: 16px; }
.check-group__label { display: block; font-family: var(--font-system); font-weight: 600; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--olive); margin-bottom: 14px; }
.check-group__items { display: flex; flex-wrap: wrap; gap: 10px; }
.check-item { position: relative; }
.check-item input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.check-item__label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid rgba(22,32,24,.14); border-radius: 100px; font-family: var(--font-system); font-weight: 500; font-size: 15px; color: var(--hunter); cursor: pointer; user-select: none; min-height: 44px; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.check-item__label::before { content: ''; width: 14px; height: 14px; border: 1.5px solid rgba(22,32,24,.20); border-radius: 3px; flex-shrink: 0; background: transparent; transition: background .15s ease, border-color .15s ease; }
.check-item input:checked + .check-item__label { border-color: var(--spruce); background: rgba(42,82,46,.06); color: var(--spruce); }
.check-item input:checked + .check-item__label::before { background: var(--spruce); border-color: var(--spruce); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23E0FF4F' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px; }
.check-item input:focus-visible + .check-item__label { outline: 2px solid var(--spruce); outline-offset: 2px; }
.form-submit { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(22,32,24,.08); flex-wrap: wrap; gap: 16px; }
.form-submit__note { font-size: 15px; color: var(--olive); line-height: 1.5; }
.submit-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: var(--carbon); color: var(--lime); border: none; border-radius: 100px; font-family: var(--font-system); font-weight: 600; font-size: 16px; letter-spacing: .01em; cursor: pointer; min-height: 52px; transition: background .18s ease, transform .15s ease, box-shadow .18s ease; }
.submit-btn:hover { background: var(--spruce); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(22,32,24,.18); }
.submit-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.submit-btn:hover svg { transform: translateX(3px); }
.form-success { display: none; text-align: center; padding: clamp(48px, 6vw, 72px) 0; }
.form-success__icon { width: 64px; height: 64px; background: rgba(42,82,46,.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.form-success__icon svg { width: 28px; height: 28px; stroke: var(--spruce); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.form-success__heading { font-family: var(--font-heading); font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); color: var(--carbon); margin-bottom: 12px; }
.form-success__body { font-size: 17px; color: var(--hunter); line-height: 1.5; max-width: 400px; margin: 0 auto; }

/* ─── FOOTER ─────────────────────────────────────────── */
/* ── FOOTER ─────────────────────────────────────────────────
   Top band:     Deep Forest  #213E25  — editorial, dark
   Sitemap band: Carbon Black #162018  — grounding step-down
   Base strip:   Carbon Black #162018  — consistent ground
───────────────────────────────────────────────────────────── */
.footer { background: var(--forest); padding: clamp(40px, 5.5vw, 72px) 0 0; overflow: hidden; }
.footer__top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

/* Lime accent rule above each column heading */
.footer__col-inner { border-top: 2px solid var(--lime); padding-top: 20px; }

.footer__heading {
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 15px;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: .01em;
}
.footer__body {
  font-family: var(--font-system);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,.58);
}
/* .footer__body has no bottom margin, so consecutive paragraphs would butt
   together. Each column holds one today; this keeps it safe if that changes. */
.footer__body + .footer__body { margin-top: 1.1em; }
.footer__body a {
  color: rgba(255,255,255,.58);
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: 1px;
  transition: border-color .14s ease, color .14s ease;
}
.footer__body a:hover { border-color: var(--lime); color: var(--white); }

/* Sitemap — Carbon Black band for visual step-down */
.footer__sitemap-wrap {
  background: var(--carbon);
  /* No negative margin — sitemap-wrap is a direct child of .footer, outside .wrap.
     Use the same max-width/auto-margin pattern as .wrap for perfect alignment. */
  padding: clamp(36px, 4vw, 52px) 0;
}
.footer__sitemap {
  display: grid;
  /* 4 columns, mirroring the nav's top-level groups */
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 40px);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.footer__sitemap-heading {
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lime);
  opacity: .65;
  margin-bottom: 12px;
}
/* Lines WITHIN an item hug; separate items breathe. Previously gap (6px) was
   smaller than the wrapped line box (~26px), so a two-line item like
   "The i-Fert Difference" read as two separate links. */
.footer__sitemap ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer__sitemap ul a {
  font-family: var(--font-system);
  font-size: 15px;
  color: rgba(255,255,255,.45);
  transition: color .14s ease;
  display: block;
  line-height: 1.25;
  padding: 5px 0;
}
.footer__sitemap ul a:hover { color: rgba(255,255,255,.9); }

/* Base strip — hairline above, then copyright row aligned to container */
.footer__base {
  background: var(--carbon);
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 0;
  padding: 0;
}
.footer__base-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-system);
  font-size: 12px;
  color: rgba(255,255,255,.22);
  letter-spacing: .03em;
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--pad);
}

/* ─── RESPONSIVE ─────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  .form-section__inner { grid-template-columns: 1fr; }
  .form-section__left { position: static; }

  /* Hero — at tablet widths a half-width sub-row squeezes the body copy into a
     narrow ribbon, so give it more room while keeping the right-hand offset. */
  .hero__sub {
    width: 62%;
    margin-top: clamp(32px, 5vh, 56px);
  }
}

/* Portrait tablets — a full-height hero on a tall, narrow screen leaves the
   centred lockup marooned in the middle. Extra bottom padding lifts the whole
   group towards the optical third, which reads far better on iPad-shaped
   screens without affecting laptops. */
@media (min-width: 769px) and (max-aspect-ratio: 3/4) {
  .hero__content { padding-bottom: 20vh; }
}

/* Landscape phones / very short windows — the hero still fills the screen, but
   there isn't room for the full-size headline plus the sub-row, so tighten the
   whole lockup rather than letting anything crop. */
@media (min-width: 769px) and (max-height: 640px) {
  .hero__headline { font-size: clamp(34px, 5.4vw, 68px); }
  .hero__tagline { margin-bottom: 12px; }
  .hero__tagline::after { margin-top: 10px; }
  .hero__sub { margin-top: 28px; }
  .hero__body { margin-bottom: 20px; }
}

/* Mobile — main breakpoint */
@media (max-width: 768px) {
  :root { --nav-h: 76px; }

  /* Body copy — bumped up for mobile readability (target audience 40s–50s).
     .t-body's desktop clamp() bottoms out quite small on narrow viewports;
     these fixed sizes replace that on mobile across every section that
     uses them, including the footer columns (About i-Fert, Our Philosophy,
     Get in Touch). */
  .t-body,
  .feature__body,
  .contact-detail__value,
  .podcast-card__desc,
  .team-member__bio p,
  .contact-hero__intro,
  .form-section__body,
  .blockquote p,
  .form-success__body {
    font-size: 18px;
    line-height: 1.55;
  }
  .pullquote__text { font-size: 20px; }
  .icon-grid__text { font-size: 18px; }

  /* Page-header intro paragraph (the subheading beside every page's h1) sets
     its own inline font-size — clamp(15px,1.2vw,17px) — which beats the
     .t-body rule above and bottoms out at 15px on mobile, a touch smaller
     than the rest of the body copy. Same site-wide pattern on every page
     that uses .page-header, so this one override fixes all of them. */
  .page-header__grid .t-body {
    font-size: 18px !important;
  }

  /* Footer — light text on the dark forest background reads more heavily
     than the same size dark-on-white text elsewhere, so it needs to sit a
     touch below the 16px used for body copy on white sections rather than
     matching it. Heading and body are the same size here (not the "heading
     bigger than body" pattern used elsewhere) since that's how the footer
     is meant to read — a plain label, not a distinct heading style. */
  .footer__heading,
  .footer__body {
    font-size: 17px;
  }
  .footer__body { line-height: 1.55; }

  /* Content-row sub-headings (e.g. "Informed by Science", "Grounded in
     Experience") pair with .t-body underneath. Their desktop clamp()
     bottoms out at the same 16px .t-body now uses on mobile, so the
     "heading" stopped reading as bigger than its own paragraph — bumped
     so there's a clear step up again. */
  .t-short {
    font-size: 20px;
  }

  /* Widow prevention — balances line-breaks on headings and paragraphs so
     a lone word doesn't get stranded on its own line. One rule, applies
     site-wide, no per-section fixes needed. Supported in current Safari/
     iOS, Chrome and Firefox; on anything older it's a no-op and text just
     wraps as it does today — never worse, just not balanced there yet. */
  h1, h2, h3, h4, h5, h6, p {
    text-wrap: balance;
  }

  /* Nav */
  .nav__links { display: none; }
  .nav__cta   { display: none; }
  .nav__hamburger { display: flex; }

  /* Drawer visible */
  .nav__drawer { display: block; }

  /* Page header stacks */
  .page-header__grid { grid-template-columns: 1fr; }

  /* Content rows stack — extra gap so a CTA above an image (or vice versa)
     gets clear breathing room instead of feeling packed in */
  .content-row { grid-template-columns: 1fr; gap: 64px; }

  /* Icon grid — single column, generous rhythm between cards, centred */
  .icon-grid { grid-template-columns: 1fr; row-gap: 48px; text-align: center; }
  .icon-grid__icon,
  .icon-grid__text { margin-left: auto; margin-right: auto; }

  /* Features band — single col; generous gap gives each feature its own
     sectioned feel instead of reading as one packed block. Extra bottom
     padding on the band itself so the last card's "Read More" button
     isn't crowded by the section that follows. */
  .features-band { padding-bottom: clamp(72px, 10vw, 100px); }
  .features-grid { grid-template-columns: 1fr; gap: 72px; }
  /* Centre all feature card content on mobile */
  .feature__icon { display: block; margin-left: auto; margin-right: auto; }
  .feature__title { text-align: center; }
  .feature__body { text-align: center; }
  .feature__divider { margin-left: auto; margin-right: auto; max-width: 48px; }
  /* inline-flex + text-align:center on parent centres the button to content width */
  .feature__cta { display: inline-flex; }
  /* Wrap the whole feature card in a centred block context */
  .features-grid .feature { text-align: center; }

  /* Team page — stacked */
  .team-member { grid-template-columns: 1fr; gap: 28px; }
  .team-member__photo { max-width: 200px; aspect-ratio: 1/1; }

  /* Contact */
  .contact-hero__inner { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; }
  .footer__sitemap { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; padding: 0 var(--pad); }
  .footer__base-inner { flex-direction: column; gap: 4px; text-align: center; }
  /* Sitemap alignment fix: replace the negative-margin/padding trick with
     a straightforward full-width block that aligns with page content */
  .footer__sitemap-wrap {
    padding-left: 0;
    padding-right: 0;
  }
  /* Hero mobile — one centred stack: tagline → headline → paragraph → buttons.
     - .hero itself still grows to fit its content (height:auto + min-height)
       so nothing is ever cropped on a short device or at large text sizes.
     - .hero__content is centred rather than pinned at 34vh: the headline is
       now two full sentences instead of two short words, so a fixed top
       offset pushed the buttons off small screens.
     - Headline sizing is a clamp, not a raw 15vw. "Know your soil." is 15
       characters — at 15vw it would run 1.5× past the edge of a 390px phone.
       The clamp keeps both lines on one line each, from 320px up to tablet. */
  .hero {
    height: auto;
    min-height: 100svh;
  }
  .hero__content {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding: calc(var(--nav-h) + 24px) var(--pad) 52px;
    text-align: center;
  }
  .hero__lockup { width: 100%; }
  .hero__tagline {
    font-size: 12px;
    letter-spacing: .14em;
    color: rgba(255,255,255,.72);
    margin: 0 0 14px;
  }
  .hero__tagline::after {
    width: 32px;
    margin-top: 12px;
  }
  /* Headline-to-paragraph gap is deliberately larger than the tagline gap
     above it, so the paragraph reads as a distinct beat under the headline
     rather than an equally-spaced third line. */
  .hero__headline {
    font-size: clamp(29px, 10.4vw, 64px);
    line-height: 1.06;
    letter-spacing: -.015em;
    margin: 0 0 26px;
    text-align: center;
  }
  .hero__line + .hero__line { margin-top: .06em; }
  .hero__sub {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero__left { display: block; width: 100%; }
  .hero__right { display: block; width: 100%; }
  .hero__body {
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255,255,255,.8);
    max-width: 34ch;
    margin: 0 auto 30px;
  }
  .hero__ctas {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .hero__cta { width: auto; min-width: 220px; justify-content: center; }
}

/* Small phones — one more step down so both headline lines stay unbroken and
   the stack still clears a 640px-tall screen without the hero growing. */
@media (max-width: 380px) {
  .hero__headline { font-size: 9.9vw; }
  .hero__tagline { font-size: 11px; letter-spacing: .12em; }
  .hero__body { font-size: 17px; margin-bottom: 26px; }
  .hero__cta { min-width: 200px; }
}

/* Small phones */
@media (max-width: 400px) {
  .footer__sitemap { grid-template-columns: 1fr; }
  .check-group__items { flex-direction: column; }
  .check-item__label { width: 100%; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero__video { display: none; }
}

/* ── Select arrow (contact form) ── */
.field__select-wrap { position: relative; }
.field__select-wrap::after {
  content: '';
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234B6650' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════
   HEX ANIMATION SYSTEM v4
   Frame traces first, then molecular hex motif draws on.
   No mirroring — same geometry, different CSS anchor per corner.
   ═══════════════════════════════════════════════════════════ */

/* ── Wrap: overflow visible so frame + motif bleed outside ── */
.content-row__image.hex-image-wrap {
  position: relative;
  overflow: visible;
  background: transparent;
  isolation: isolate;
}

.content-row__image.hex-image-wrap .image-crop {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
  background: var(--alabaster);
  box-shadow: 0 18px 48px rgba(22, 32, 24, .14);
}

.content-row__image.hex-image-wrap .image-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Hex motif container ─────────────────────────────────────
   Same size and shape for all variants.
   CSS anchors it to the correct corner.                       */
.hex-network {
  position: absolute;
  z-index: 1;
  width: clamp(420px, 82%, 820px);
  aspect-ratio: 480 / 400;
  pointer-events: none;
}

.hex-network svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Corners — motif always grows away from the image edge */
.hex-curl-right-top    .hex-network { right: -22%; top: -24%; }
.hex-curl-right-bottom .hex-network { right: -22%; bottom: -22%; }
.hex-curl-left-top     .hex-network { left: -22%;  top: -24%; }
.hex-curl-left-bottom  .hex-network { left: -22%;  bottom: -22%; }

/* ── Path base state (invisible, ready to draw) ──────────── */
.hx-path {
  fill: none;
  /* stroke set inline per-element */
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    stroke-dashoffset 1.1s cubic-bezier(.22, .7, .22, 1) calc(var(--i) * 44ms),
    opacity           .4s  ease                           calc(var(--i) * 44ms);
}

/* ── Dot base state ──────────────────────────────────────── */
.hx-dot {
  /* fill and stroke set inline */
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity   .35s ease                                 calc((var(--i) * 40ms) + 200ms),
    transform .42s cubic-bezier(.22, .7, .22, 1.5)     calc((var(--i) * 40ms) + 200ms);
}

/* ── Triggered states ────────────────────────────────────── */

/* Frame draws first — single continuous stroke ~0.85s */
.hex-image-wrap.is-visible .hex-frame__path {
  stroke-dashoffset: 0;
  opacity: 1;
  transition:
    stroke-dashoffset .85s cubic-bezier(.6, 0, .35, 1) .06s,
    opacity           .18s ease                         .06s;
}

/* Motif draws after frame (MOTIF_DELAY=16, 16×44ms=704ms head-start) */
.hex-image-wrap.is-visible .hx-path {
  stroke-dashoffset: 0;
  opacity: 1;
}

.hex-image-wrap.is-visible .hx-dot {
  opacity: 1;
  transform: scale(1);
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hex-frame__path,
  .hx-path,
  .hx-dot {
    transition: none;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hex-network { width: clamp(160px, 55%, 280px); }

  .hex-curl-right-top .hex-network,
  .hex-curl-right-bottom .hex-network { right: -16%; }

  .hex-curl-left-top .hex-network,
  .hex-curl-left-bottom .hex-network  { left: -16%; }
}

/* ── Podcast Page ─────────────────────────────────────────────────────────── */
.podcast-grid {
  display: grid;
  gap: 48px;
  max-width: 820px;
  margin: 0 auto;
}

.podcast-divider {
  border: none;
  border-top: 1px solid var(--alabaster, #E7EBE8);
  margin: 0;
}

.podcast-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: start;
}

.podcast-card__art {
  aspect-ratio: 1;
  background: var(--spruce);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.podcast-card__art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,.35);
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.podcast-card__art-placeholder svg {
  width: 36px;
  height: 36px;
  opacity: .4;
}

.podcast-card__label {
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--spruce);
  margin-bottom: 10px;
  display: block;
}

.podcast-card--coming-soon .podcast-card__label {
  color: var(--grey-olive, #8B948E);
}

.podcast-card__ep {
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-olive, #8B948E);
  margin-bottom: 8px;
  display: block;
}

.podcast-card__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.3;
  color: var(--carbon);
  margin-bottom: 14px;
}

.podcast-card__desc {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--carbon);
  opacity: .75;
  margin-bottom: 22px;
}

.podcast-card__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.podcast-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 100px;
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .18s ease, transform .15s ease;
  min-height: 40px;
}

.podcast-card__cta--watch {
  background: var(--carbon);
  color: var(--lime-yellow, #E0FF4F);
}

.podcast-card__cta--watch:hover {
  background: var(--spruce);
  transform: translateY(-1px);
}

.podcast-card__cta--spotify {
  background: transparent;
  color: var(--carbon);
  border: 1.5px solid var(--carbon);
}

.podcast-card__cta--spotify:hover {
  background: var(--carbon);
  color: var(--lime-yellow, #E0FF4F);
  transform: translateY(-1px);
}

.podcast-card__coming-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 100px;
  background: var(--alabaster, #E7EBE8);
  color: var(--grey-olive, #8B948E);
  font-family: var(--font-system);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.podcast-card--coming-soon .podcast-card__art {
  background: var(--alabaster, #E7EBE8);
  opacity: .6;
}

@media (max-width: 640px) {
  .podcast-card {
    grid-template-columns: 1fr;
  }
  .podcast-card__art {
    max-width: 180px;
  }
}