/* ============================================================================
   SECTIONS — the page composition
   ========================================================================== */

/* ---------------------------------------------------------------------------
   THE MERIDIAN — the site's signature.
   One continuous line, drawn by scroll, that begins as the globe's meridian in
   the hero and threads the whole page, changing hue as it passes each of the
   four product divisions. One company, four material streams, one planet.
   -------------------------------------------------------------------------*/
.meridian {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.meridian svg { width: 100%; height: 100%; }
.meridian__path {
  fill: none;
  stroke: url(#meridian-gradient);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw, 0));
  opacity: .5;
}
.meridian__ghost {
  fill: none;
  stroke: var(--rule-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 767px) { .meridian { opacity: .5; } }

/* ---------------------------------------------------------------------------
   HERO — the photograph is the ground the page stands on.
   A misty tea terrace: the top two thirds is near-white fog, so display type
   sits straight on it. A paper veil lifts it further where the copy runs, and
   a plinth at the foot carries the company details clear of the image.
   -------------------------------------------------------------------------*/
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: calc(var(--header-h) + var(--s-5)) 0;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  /* The footage already moves; the slow scale only stops the edges feeling
     pinned, and it is the still frame's only motion when video is skipped. */
  transform: scale(1.04);
  transform-origin: 50% 58%;
  filter: saturate(1.04) contrast(1.03);
  animation: hero-breathe 40s var(--e-inout) infinite alternate;
  will-change: transform;
}
@keyframes hero-breathe {
  from { transform: scale(1.04); }
  to   { transform: scale(1.11) translate3d(-1%, -0.8%, 0); }
}

/* Three jobs: lift the whole frame toward paper, weight the left where the
   copy runs, and land the foot on solid paper so the plinth has ground. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    /* A tight pool of paper behind the copy column, so the rest of the frame
       carries the photograph at close to full strength. */
    radial-gradient(80% 92% at -4% 48%,
      color-mix(in oklab, var(--paper) 93%, transparent) 0%,
      color-mix(in oklab, var(--paper) 86%, transparent) 40%,
      color-mix(in oklab, var(--paper) 42%, transparent) 70%,
      transparent 90%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--paper) 40%, transparent) 0%,
      transparent 20%,
      transparent 70%,
      color-mix(in oklab, var(--paper) 42%, transparent) 88%,
      var(--paper) 100%);
}

/* A slow shaft of morning sun crossing the terrace. */
.hero__light {
  position: absolute; inset: -30% -40%;
  background: linear-gradient(102deg,
    transparent 40%,
    color-mix(in oklab, #FFF7E4 52%, transparent) 50%,
    transparent 60%);
  mix-blend-mode: soft-light;
  animation: hero-sun 16s var(--e-inout) infinite;
  pointer-events: none;
}
@keyframes hero-sun {
  0%       { transform: translateX(-38%); opacity: 0; }
  25%, 55% { opacity: 1; }
  100%     { transform: translateX(38%); opacity: 0; }
}

/* Narrow viewports crop the frame to a slot, so the left-weighted veil would
   cover the whole picture. Drop it and let the vertical ramp do the work. */
@media (max-width: 767px) {
  .hero__video { object-position: 50% 60%; }
  .hero__veil {
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--paper) 90%, transparent) 0%,
      color-mix(in oklab, var(--paper) 86%, transparent) 44%,
      color-mix(in oklab, var(--paper) 52%, transparent) 70%,
      color-mix(in oklab, var(--paper) 72%, transparent) 88%,
      var(--paper) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { animation: none; }
  .hero__light { animation: none; opacity: .5; transform: none; }
}

/* Auto block margins centre the copy in whatever space is left once the
   plinth has taken the foot — and collapse to zero when content overflows. */
.hero__body { position: relative; z-index: 2; margin-block: auto; }
.hero__eyebrow { margin-bottom: var(--s-6); }
.hero__title {
  font-size: var(--t-h1);
  line-height: 0.98;
  letter-spacing: -0.038em;
  font-variation-settings: "SOFT" 24, "WONK" 1, "opsz" 144;
  margin-bottom: var(--s-6);
  max-width: 16ch;
}
.hero__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
  color: var(--sage-700);
}
.hero__lead { margin-bottom: var(--s-6); max-width: 48ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.hero__more { margin-inline-start: var(--s-2); }
.hero__legend { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Short laptop screens: a 6rem headline plus a lead, two buttons, four chips
   and a contact strip cannot all fit 620px of usable height, so the display
   type scales against viewport height rather than width. */
@media (min-width: 900px) and (max-height: 880px) {
  .hero { padding-block-start: calc(var(--header-h) + var(--s-3)); }
  .hero__eyebrow { margin-bottom: var(--s-4); }
  .hero__title {
    font-size: clamp(2.5rem, 1rem + 5.4vh, 4.6rem);
    margin-bottom: var(--s-5);
  }
  .hero__lead { font-size: var(--t-body); margin-bottom: var(--s-5); }
  .hero__actions { margin-bottom: var(--s-5); }
  .hero__plinth { margin-top: var(--s-4); }
  .hero__plinth-inner { padding-block: var(--s-3) var(--s-4); }
}

/* Botanical line art drifting over the field */
.botanicals { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.botanical {
  position: absolute;
  color: var(--sage-600);
  opacity: .3;
  will-change: transform;
}
.botanical svg { width: 100%; height: auto; }
.botanical path { vector-effect: non-scaling-stroke; }
.botanical--ml { right: 5%; top: 15%; width: clamp(90px, 9vw, 150px); opacity: .3; }
@media (max-width: 899px) { .botanical--ml { display: none; } }

/* The plinth: a paper shelf across the foot of the hero. */
.hero__plinth {
  position: relative; z-index: 2;
  margin-top: clamp(1.5rem, 3.4vw, 3rem);
  margin-bottom: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--paper) 82%, transparent), var(--paper));
  border-top: 1px solid var(--rule-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero__plinth-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
  padding-block: var(--s-4) var(--s-5);
}
@media (min-width: 980px) { .hero__plinth-inner { padding-inline-end: 84px; } }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: var(--s-4) clamp(1.25rem, 3vw, 3rem);
  flex: 1 1 min(660px, 100%);
  margin: 0;
}
.hero__fact { display: grid; gap: 5px; }
.hero__fact dt {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
}
.hero__fact dd { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.hero__fact a { transition: color var(--d-base) var(--e-out); }
.hero__fact a:hover { color: var(--sage-700); text-decoration: underline; text-underline-offset: 3px; }

.scroll-cue {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  flex: none;
}
.scroll-cue__rail {
  width: 1.5px; height: 42px;
  background: var(--rule);
  position: relative; overflow: hidden; border-radius: 2px;
}
.scroll-cue__rail::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 40%;
  background: var(--sage-600); border-radius: 2px;
  animation: cue 2.1s var(--e-inout) infinite;
}
@keyframes cue { 0% { transform: translateY(-110%); } 60%,100% { transform: translateY(260%); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue__rail::after { animation: none; } }

/* ---------------------------------------------------------------------------
   VALUE MARQUEE — the seam between hero and story
   -------------------------------------------------------------------------*/
.ticker {
  position: relative;
  padding-block: var(--s-6);
  border-block: 1px solid var(--rule-soft);
  background: var(--paper-warm);
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   SECTION HEADERS — shared editorial header with rail index
   -------------------------------------------------------------------------*/
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
  position: relative; z-index: 2;
}
@media (max-width: 859px) { .sec-head { grid-template-columns: 1fr; align-items: start; } }
.sec-head__eyebrow { margin-bottom: var(--s-5); }
.sec-head__title { font-size: var(--t-h2); }
.sec-head__title em { font-style: italic; color: var(--sage-700); font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 120; }
.sec-head__aside { padding-bottom: 0.4em; }

/* ---------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------*/
.about { position: relative; }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  position: relative; z-index: 2;
}
@media (max-width: 899px) { .about__grid { grid-template-columns: 1fr; } }

.about__statement {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variation-settings: "SOFT" 34, "WONK" 1, "opsz" 110;
  text-wrap: pretty;
}
.about__statement mark {
  background: linear-gradient(180deg, transparent 62%, color-mix(in oklab, var(--ribbon-harvest) 34%, transparent) 62%);
  color: inherit;
  padding-inline: 2px;
}
.about__body { margin-top: var(--s-6); }

/* Metric shelf */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
  gap: var(--s-5) var(--s-4);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: var(--s-7);
  border-top: 1px solid var(--rule);
  position: relative; z-index: 2;
}
.metrics .stat + .stat { position: relative; }

/* Portrait card in the about aside */
.about__aside { display: grid; gap: var(--s-5); }
.about__photo {
  border-radius: var(--r-leaf);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  aspect-ratio: 5/6;
  max-height: 560px;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.02); }
.about__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, color-mix(in oklab, var(--sage-300) 46%, transparent), transparent 58%);
  mix-blend-mode: multiply;
}
.about__caption { display: flex; align-items: flex-start; gap: var(--s-3); }
.about__caption svg { width: 16px; height: 16px; color: var(--sage-500); flex: none; margin-top: 3px; }

/* ---------------------------------------------------------------------------
   PRODUCT DIVISIONS — the strata stack.
   Four panels that stick and layer as you scroll, like a soil core sample:
   each material stream is a stratum of the same ground.
   -------------------------------------------------------------------------*/
.divisions { position: relative; }
/* The tail keeps the last stratum pinned for a beat before the whole stack
   releases — without it, Fertilizers pins and leaves in the same scroll. */
.strata {
  position: relative; z-index: 2;
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  padding-bottom: clamp(3rem, 22vh, 14rem);
}

.stratum {
  position: sticky;
  top: calc(var(--header-h) + clamp(0.75rem, 2vw, 1.5rem) + var(--i) * clamp(10px, 1.4vw, 20px));
  border-radius: var(--r-xl);
  background: var(--linen);
  border: 1px solid color-mix(in oklab, var(--ribbon) 20%, var(--rule-soft));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
  transform: scale(calc(1 - var(--cover, 0) * 0.035));
  transform-origin: 50% 0%;
  transition: transform 120ms linear;
}
/* Whitening veil as the next stratum settles over this one */
.stratum::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--paper);
  opacity: calc(var(--cover, 0) * 0.55);
  pointer-events: none;
  z-index: 5;
  transition: opacity 120ms linear;
}
.stratum__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 3.6vw, 3.5rem);
  align-items: center;
  min-height: clamp(380px, 36vw, 510px);
  position: relative;
  background:
    radial-gradient(120% 100% at 0% 0%, var(--wash), transparent 62%),
    linear-gradient(180deg, var(--linen), var(--linen));
}
@media (max-width: 899px) {
  .stratum__inner { grid-template-columns: 1fr; padding: var(--s-6); min-height: 0; }
}

.stratum__lede { position: relative; z-index: 2; }
.stratum__tag {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--ribbon) 68%, var(--ink));
  margin-bottom: var(--s-5);
}
.stratum__tag::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--ribbon);
}
.stratum__name {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: var(--s-4);
  font-variation-settings: "SOFT" 26, "WONK" 1, "opsz" 120;
}
.stratum__desc { font-size: var(--t-small); color: var(--ink-2); max-width: 40ch; margin-bottom: var(--s-6); }

.stratum__glyph {
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
  display: grid; place-items: center;
  border-radius: var(--r-leaf);
  background: color-mix(in oklab, var(--ribbon) 12%, var(--linen));
  border: 1px solid color-mix(in oklab, var(--ribbon) 26%, transparent);
  color: var(--ribbon);
  margin-bottom: var(--s-6);
}
.stratum__glyph svg { width: 60%; height: 60%; }
.stratum__glyph path, .stratum__glyph circle, .stratum__glyph line { vector-effect: non-scaling-stroke; }

.stratum__list { position: relative; z-index: 2; display: grid; gap: var(--s-3); }
.stratum__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--paper) 70%, transparent);
  border: 1px solid var(--rule-soft);
  font-size: var(--t-small);
  color: var(--ink-2);
  transition: transform var(--d-base) var(--e-out), background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.stratum__item:hover {
  transform: translateX(6px);
  background: var(--linen);
  border-color: color-mix(in oklab, var(--ribbon) 34%, transparent);
}
.stratum__item svg { width: 20px; height: 20px; color: var(--ribbon); }

/* Oversized watermark glyph bleeding off the panel edge */
.stratum__watermark {
  position: absolute;
  right: -4%; bottom: -18%;
  width: clamp(180px, 26%, 340px);
  color: var(--ribbon);
  opacity: .08;
  pointer-events: none;
  z-index: 1;
}
.stratum__watermark svg { width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   DISTRIBUTION
   -------------------------------------------------------------------------*/
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  position: relative; z-index: 2;
}
.channel { display: grid; gap: var(--s-5); align-content: start; }
.channel__head { display: flex; align-items: center; gap: var(--s-4); }
.channel__num {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .14em; color: var(--ink-4);
}
.channel__partners { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

.partner-wall {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: var(--s-7);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative; z-index: 2;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   SUSTAINABILITY — full-bleed statement panel
   -------------------------------------------------------------------------*/
.sustain {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(168deg, var(--sage-100), var(--mist) 44%, var(--oat-soft));
}
.sustain__media {
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
}
.sustain__media img {
  width: 100%; height: 118%;
  object-fit: cover;
  opacity: .34;
  filter: saturate(.55) brightness(1.14);
  will-change: transform;
}
.sustain__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 90% at 26% 20%, color-mix(in oklab, var(--paper) 78%, transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in oklab, var(--paper) 62%, transparent), transparent 42%, color-mix(in oklab, var(--paper) 74%, transparent));
}
.sustain__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  position: relative; z-index: 2;
}
@media (max-width: 899px) { .sustain__grid { grid-template-columns: 1fr; } }
.sustain__quote {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 130;
}
.sustain__quote-mark {
  display: block;
  width: 48px; height: 48px;
  color: var(--sage-400);
  margin-bottom: var(--s-5);
}
.pledges { display: grid; gap: var(--s-4); }
.pledge {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4);
  align-items: center;
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.pledge:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }
.pledge__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--sage-300) 44%, transparent);
  color: var(--sage-700);
}
.pledge__icon svg { width: 22px; height: 22px; }
.pledge__text { font-size: var(--t-small); color: var(--ink-2); }

/* ---------------------------------------------------------------------------
   VALUES
   -------------------------------------------------------------------------*/
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
  position: relative; z-index: 2;
}
.value { display: grid; align-content: start; }
.value__rule { height: 2px; background: var(--ribbon, var(--sage-500)); border-radius: 2px; width: 46px; margin-bottom: var(--s-5); transition: width var(--d-slow) var(--e-out); }
.value:hover .value__rule { width: 84px; }

/* ---------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------*/
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  position: relative; z-index: 2;
}
@media (max-width: 899px) { .contact__grid { grid-template-columns: 1fr; } }

.contact__details { display: grid; gap: var(--s-4); }
.detail {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--rule-soft);
  background: var(--linen);
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.detail:hover { transform: translateY(-2px); border-color: var(--rule); box-shadow: var(--shadow-sm); }
.detail__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--mist); color: var(--sage-700);
}
.detail__icon svg { width: 21px; height: 21px; }
.detail__label { display: block; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.detail__value { display: block; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.detail__copy { opacity: 0; transition: opacity var(--d-base) var(--e-out); }
.detail:hover .detail__copy, .detail__copy:focus-visible { opacity: 1; }

.contact__panel {
  padding: clamp(1.5rem, 3.4vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--linen);
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.contact__panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 100% 0%, color-mix(in oklab, var(--sage-300) 26%, transparent), transparent 62%);
  pointer-events: none;
}
.contact__panel > * { position: relative; }

/* ---------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------*/
.footer {
  position: relative;
  background: linear-gradient(180deg, var(--mist), var(--sage-100));
  padding-block: var(--section-y) var(--s-7);
  overflow: hidden;
  isolation: isolate;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.7fr));
  gap: clamp(2rem, 4vw, 4rem);
  position: relative; z-index: 2;
}
@media (max-width: 899px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 539px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__title { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--s-5); }
.footer__list { display: grid; gap: var(--s-3); }
.footer__link { font-size: var(--t-small); color: var(--ink-2); transition: color var(--d-base) var(--e-out), padding-left var(--d-base) var(--e-out); display: inline-block; }
.footer__link:hover { color: var(--sage-700); padding-left: 6px; }

.footer__socials { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }
.social {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  background: color-mix(in oklab, var(--paper) 60%, transparent);
  transition: transform var(--d-base) var(--e-spring), background var(--d-base) var(--e-out), color var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.social:hover { transform: translateY(-3px); background: var(--ink); color: var(--paper); border-color: var(--ink); }
.social svg { width: 18px; height: 18px; }

/* The wordmark laid into the base of the page like a watermark in paper */
.footer__wordmark {
  margin-top: clamp(3rem, 7vw, 6rem);
  position: relative; z-index: 2;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--sage-600) 52%, transparent);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11.6vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 144;
  -webkit-user-select: none; user-select: none;
}

.footer__base {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  position: relative; z-index: 2;
}

.about__figure { margin: 0; display: grid; gap: var(--s-5); }

.contact__follow {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule-soft);
}
.contact__follow .footer__socials { margin-top: var(--s-4); }


/* ---------------------------------------------------------------------------
   STOREFRONT — gptrade.shop, our own channel. Given a banner of its own
   because it is the one route where a customer buys from us directly.
   -------------------------------------------------------------------------*/
.storefront {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: var(--s-5);
  border-radius: var(--r-xl);
  background:
    linear-gradient(104deg, var(--wash-leaf) 0%, var(--oat-soft) 58%, var(--wash-clay) 100%);
  border: 1px solid color-mix(in oklab, var(--ribbon-leaf) 26%, transparent);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
  transition: transform var(--d-slow) var(--e-out), box-shadow var(--d-slow) var(--e-out);
}
.storefront:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
@media (max-width: 819px) {
  /* Stacked, the icon should sit with the first line of the label, not float
     in the middle of the paragraph. */
  .storefront { grid-template-columns: 56px minmax(0, 1fr); align-items: start; }
  .storefront__icon { margin-top: 2px; }
  .storefront__cta { grid-column: 1 / -1; justify-content: flex-start; }
}

.storefront__glow {
  position: absolute; inset: -40% -10% auto auto;
  width: 46%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--ribbon-leaf) 26%, transparent), transparent 68%);
  filter: blur(40px);
  z-index: -1;
  animation: store-pulse 7s var(--e-inout) infinite alternate;
}
@keyframes store-pulse { to { transform: scale(1.22) translate(-6%, 8%); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .storefront__glow { animation: none; } }

.storefront__icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: var(--r-leaf);
  background: var(--linen);
  border: 1px solid color-mix(in oklab, var(--ribbon-clay) 22%, transparent);
  color: var(--ribbon-clay);
  box-shadow: var(--shadow-sm);
  transition: transform var(--d-slow) var(--e-spring);
}
.storefront:hover .storefront__icon { transform: rotate(-7deg) scale(1.07); }
.storefront__icon svg { width: 30px; height: 30px; }
@media (max-width: 819px) { .storefront__icon { width: 56px; height: 56px; } }

.storefront__body { display: grid; gap: var(--s-3); }
.storefront__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "SOFT" 26, "WONK" 1, "opsz" 110;
}
.storefront__desc { font-size: var(--t-small); color: var(--ink-2); max-width: 58ch; }
.storefront__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.storefront__cta { display: flex; justify-content: flex-end; }
.storefront:hover .btn { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Fertilizers carries two calls to action: buy one bag, or price a container. */
.stratum__actions { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }

.detail--shop { border-color: color-mix(in oklab, var(--ribbon-clay) 26%, transparent); background: var(--wash-clay); }
.detail--shop .detail__icon { background: color-mix(in oklab, var(--ribbon-clay) 14%, transparent); color: var(--ribbon-clay); }

.footer__link--shop { display: inline-flex; align-items: center; gap: 5px; color: var(--ribbon-clay); font-weight: 600; }
.footer__inline { color: var(--sage-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* The tertiary action takes its own line on purpose rather than wrapping into
   an orphan beside the two buttons. */
.hero__more { flex-basis: 100%; margin-top: var(--s-1); }