/* Section composition and the responsive shell.
   A 12-column model. Copy 5 / product 7; illustration 6 / list 5 with a one-column offset.
   ≤ 960px every composition collapses to one column; ≤ 640px overlap goes and frames focus-crop. */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.section {
  position: relative;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad-bottom);
}

/* A beat inside a chapter: no top pad, a hairline across the container, a shorter pad. */
.section--ruled,
.section--beat {
  padding-top: 0;
}

.section--ruled > .container,
.section--beat > .container {
  border-top: 1px solid var(--hairline);
  padding-top: var(--beat-pad);
}

/* A full-bleed band that closes a chapter. */
.section--band {
  padding-block: clamp(64px, 7vw, 100px);
}

/* The compact trust band. */
.section--band-compact {
  padding-block: clamp(40px, 5vw, 64px);
}

/* Dark institutional ground. Contextual tokens swap here, nothing else changes. */
.section--forest {
  background: var(--forest);
  color: var(--on-dark);
  --ink-secondary: var(--on-dark-2);
  --hairline: var(--rule-on-dark);
  --accent: var(--crop-soft);
  --focus-ring: var(--harvest);
  --button-bg: var(--ivory);
  --button-fg: var(--soil);
}

.section-head {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.section-head > .lede {
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
   Quiet field: artwork first, then the product definition and lifecycle proof.
   --------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  height: 78vh;
  height: 78svh;
  min-height: 0;
  padding: 0;
  background: var(--ivory);
  color: var(--soil);
  --ink-secondary: rgba(23, 32, 24, .84);
  --hairline: var(--rule);
  --accent: #425a38;
  --focus-ring: var(--crop);
  --button-bg: var(--soil);
  --button-fg: var(--ivory);
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ivory);
}

.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-composition {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-content: start;
  height: 100%;
  padding-top: calc(var(--nav-height) + clamp(30px, 6svh, 64px));
}

.hero-message {
  grid-column: 2 / 8;
  display: grid;
  gap: 12px;
  max-width: 720px;
}

.hero-message h1 {
  max-width: 13.5ch;
  font-family: var(--font-sans);
  font-size: clamp(2.75rem, 4.25vw, 4.25rem);
  font-style: normal;
}

.hero-threshold {
  position: relative;
  padding: 48px 0 clamp(64px, 7vw, 96px);
  background: var(--ivory);
  color: var(--soil);
}

.hero-threshold-grid {
  align-items: start;
}

.hero-threshold-copy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: end;
}

.hero-threshold-copy h2 {
  grid-column: 1 / 8;
  max-width: 31ch;
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  line-height: 1.08;
}

.hero-threshold-actions {
  grid-column: 9 / 13;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  max-width: none;
}

.hero-threshold .hero-threshold-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin-top: 0;
  color: var(--soil);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .3em;
  white-space: nowrap;
}

.hero-threshold .hero-threshold-link::before {
  display: none;
}

.hero-threshold .hero-threshold-link::after {
  content: "→";
  flex: none;
}

.hero-threshold .hero-threshold-link:hover {
  color: var(--crop);
  text-decoration-color: currentColor;
}

.hero-threshold .hero-visual {
  grid-column: 3 / 11;
  width: 100%;
  margin-top: clamp(44px, 6vw, 72px);
}

.hero-to-product {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 0;
  left: var(--gutter);
  height: 1px;
  background: rgba(23, 32, 24, .22);
}

/* The hero bridge supplies this chapter boundary; the ruled section supplies its spacing. */
.section--mission > .container {
  border-top: 0;
}

.mission-grid {
  row-gap: var(--grid-gap);
}

.mission-head {
  grid-column: 1 / 7;
  margin-bottom: 0;
}

.mission-copy {
  grid-column: 8 / 13;
  display: grid;
  gap: 20px;
  align-self: end;
}

/* ---------------------------------------------------------------------------
   Account story: steps in a 5-column rail, the sticky stage on the right.
   --------------------------------------------------------------------------- */

#product {
  padding-top: var(--section-pad);
}

.story-rail {
  grid-column: 1 / 6;
}

.story-stage {
  grid-column: 6 / 13;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-compact-height) + 20px);
}

/* Each step owns enough scroll for its state to read beside the sticky frame. */
@media (min-width: 961px) {
  .story-step {
    min-height: 34vh;
    align-content: center;
  }

  .story-step:first-child {
    align-content: start;
    padding-top: clamp(8px, 1vw, 16px);
  }

  /* Room after the last step so the sticky frame stays in view while step 4 is centred. */
  .story-rail {
    padding-bottom: 26vh;
  }
}

/* ---------------------------------------------------------------------------
   Agricultural context: season figure left 6, concepts right 5, one-column offset.
   --------------------------------------------------------------------------- */

.season-figure {
  grid-column: 1 / 7;
  align-self: start;
}

.ag-concepts {
  grid-column: 8 / 13;
}

/* ---------------------------------------------------------------------------
   Portfolio: header stack, one wide frame, supporting copy offset under it.
   --------------------------------------------------------------------------- */

.portfolio-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.portfolio-head {
  grid-column: 1 / 7;
  margin-bottom: 0;
}

.portfolio-support {
  grid-column: 8 / 13;
  align-self: end;
  margin-top: 0;
}

.portfolio-grid {
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* ---------------------------------------------------------------------------
   How it works: a compact connector band. Head left, three layers across, the
   gold path under them, support copy left.
   --------------------------------------------------------------------------- */

.section--connector {
  padding-block: clamp(56px, 6.5vw, 96px) clamp(48px, 6vw, 88px);
}

.core-head {
  grid-column: 1 / 9;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.core-layers {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.core-diagram {
  grid-column: 1 / 13;
  min-height: 0;
}

.core-support {
  grid-column: 1 / 8;
  margin-top: clamp(28px, 3.5vw, 44px);
  color: var(--on-dark-2);
}

/* ---------------------------------------------------------------------------
   Living account: head left, the timeline runs down the right.
   --------------------------------------------------------------------------- */

.living-head {
  grid-column: 1 / 6;
  margin-bottom: 0;
  align-self: start;
}

.timeline {
  grid-column: 7 / 13;
}

.timeline-support {
  margin-top: 8px;
  color: var(--ink-2);
  max-width: 34ch;
}

/* ---------------------------------------------------------------------------
   Team workflow: copy left, one note sample right.
   --------------------------------------------------------------------------- */

.team-head {
  grid-column: 1 / 6;
  margin-bottom: 0;
  align-self: center;
}

.notes {
  grid-column: 7 / 13;
  align-self: start;
}

/* ---------------------------------------------------------------------------
   Trust: one panel, headline left, commitments right in a two-by-two rule grid.
   --------------------------------------------------------------------------- */

.trust-panel .trust-title {
  grid-column: 1 / 6;
}

.trust-panel .commitments {
  grid-column: 7 / 13;
}

/* ---------------------------------------------------------------------------
   FAQ: the one word left, the list right at reading width.
   --------------------------------------------------------------------------- */

.faq-title {
  grid-column: 1 / 5;
  align-self: start;
}

.faq-list {
  grid-column: 5 / 13;
  max-width: 760px;
}

/* ---------------------------------------------------------------------------
   Final CTA: imagery reprise, centered copy, the form on soil running into the footer.
   --------------------------------------------------------------------------- */

.final-cta {
  position: relative;
  isolation: isolate;
  color: var(--on-dark);
  --ink-secondary: var(--on-dark-2);
  --hairline: var(--rule-on-dark);
  --accent: var(--crop-soft);
  --focus-ring: var(--harvest);
  --button-bg: var(--ivory);
  --button-fg: var(--soil);
  padding-top: var(--section-pad);
  padding-bottom: 0;
  text-align: center;
}

.cta-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--forest-deep);
}

/* The approved dusk watercolor stays natural beneath one flat soil veil. */
.cta-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.cta-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 32, 24, .72);
}

.cta-copy {
  display: grid;
  justify-items: center;
  gap: 24px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.cta-copy h2 {
  max-width: 20ch;
}

.cta-copy .lede {
  color: var(--on-dark-2);
}

/* ---------------------------------------------------------------------------
   Collapse. ≤ 960px: one column, stepped scenes. ≤ 640px: narrative stack.
   --------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .hero-threshold-copy {
    row-gap: 8px;
  }

  .hero-threshold-copy h2 {
    grid-column: 1 / 10;
    font-size: 1.625rem;
  }

  .hero-threshold-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (min-width: 961px) and (max-width: 1120px) {
  .hero {
    height: 74vh;
    height: 74svh;
  }

  .hero-backdrop img {
    object-position: 50% 25%;
  }

  .hero-threshold {
    padding-top: 40px;
  }
}

@media (max-width: 960px) {
  .hero-composition {
    grid-template-columns: minmax(0, 1fr);
    padding-top: calc(var(--nav-height) + clamp(30px, 5svh, 52px));
  }

  .hero-message {
    grid-column: 1 / -1;
    max-width: 680px;
  }

  .hero-message h1 {
    max-width: 13.5ch;
    font-size: clamp(2.75rem, 8vw, 4.25rem);
  }

  .hero-threshold .hero-visual {
    grid-column: 1 / -1;
  }

  .hero-threshold-copy h2 {
    grid-column: 1 / 11;
  }

  .mission-head,
  .mission-copy,
  .story-rail,
  .story-stage,
  .season-figure,
  .ag-concepts,
  .portfolio-support,
  .core-layers,
  .core-diagram,
  .core-support,
  .living-head,
  .timeline,
  .timeline-support,
  .team-head,
  .notes,
  .trust-panel .trust-title,
  .trust-panel .commitments,
  .faq-title,
  .faq-list {
    grid-column: 1 / -1;
  }

  .story-stage {
    position: static;
    margin-top: clamp(32px, 5vw, 48px);
  }

  .season-figure {
    margin-bottom: clamp(40px, 6vw, 56px);
  }

  .portfolio-support {
    max-width: var(--measure);
  }

  .core-layers {
    grid-template-columns: minmax(0, 1fr);
  }

  .core-diagram {
    display: none;
  }

  .living-head {
    margin-bottom: clamp(32px, 5vw, 48px);
  }

  .team-head {
    margin-bottom: clamp(32px, 5vw, 48px);
  }

  .trust-panel .commitments {
    margin-top: clamp(32px, 5vw, 48px);
  }

  .faq-title {
    margin-bottom: 32px;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-height: 64px;
  }

  .hero {
    height: 64vh;
    height: 64svh;
    min-height: 340px;
  }

  .hero-composition {
    padding-top: calc(var(--nav-height) + clamp(24px, 4svh, 34px));
  }

  .hero-message {
    gap: 12px;
  }

  .hero-message h1 {
    max-width: 13ch;
    font-size: clamp(2.5rem, 12vw, 3.25rem);
  }

  .hero-backdrop img {
    object-position: 56% 100%;
  }

  .hero-threshold {
    padding: 32px 0 64px;
  }

  .hero-threshold-copy {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .hero-threshold-copy h2,
  .hero-threshold-actions {
    grid-column: 1;
  }

  .hero-threshold-copy h2 {
    font-size: 1.5rem;
  }

  .hero-threshold-actions {
    width: 100%;
    gap: 12px;
    justify-content: flex-start;
  }

  .hero-threshold-actions .button--primary {
    flex: none;
    min-height: 44px;
    padding-inline: 1em;
  }

  .hero-threshold .hero-threshold-link {
    flex: none;
    width: fit-content;
    min-height: 44px;
    font-size: .8125rem;
  }

  .hero-threshold .hero-visual {
    margin-top: 40px;
  }

  .section-head {
    margin-bottom: 40px;
  }

  .core-support {
    margin-top: 32px;
  }

  .cta-copy {
    margin-bottom: 40px;
  }
}

@media (max-width: 360px) {
  .hero {
    height: 60vh;
    height: 60svh;
    min-height: 340px;
  }

  .hero-backdrop img {
    object-position: 46% 100%;
  }

  .hero-composition {
    padding-top: calc(var(--nav-height) + 8px);
  }

  .hero-message {
    gap: 8px;
  }

  .hero-message h1 {
    max-width: none;
    font-size: 2rem;
    line-height: .98;
  }

  .hero-threshold {
    padding-top: 16px;
  }

  .hero-threshold-copy {
    row-gap: 8px;
  }

  .hero-threshold-copy h2 {
    font-size: 1.375rem;
  }

  .hero-threshold-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-height: 500px) and (min-width: 641px) {
  .hero {
    height: 100vh;
    height: 100svh;
    min-height: 375px;
  }

  .hero-backdrop img {
    object-position: 50% 20%;
  }

  .hero-composition {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-top: calc(var(--nav-height) + 16px);
  }

  .hero-message {
    grid-column: 1 / 8;
    gap: 8px;
    max-width: 560px;
  }

  .hero-message h1 {
    max-width: 15ch;
    font-size: clamp(2rem, 9vh, 2.5rem);
    line-height: .98;
  }
}

@media (min-width: 641px) and (max-width: 720px) and (max-height: 500px) {
  .hero-composition {
    padding-top: calc(var(--nav-height) + 8px);
  }

  .hero-message h1 {
    font-size: 1.875rem;
  }
}

@media (max-height: 500px) and (max-width: 640px) {
  .hero {
    height: 100vh;
    height: 100svh;
    min-height: 340px;
  }

  .hero-backdrop img {
    object-position: 50% 20%;
  }

  .hero-composition {
    padding-top: calc(var(--nav-height) + 8px);
  }

  .hero-message {
    gap: 8px;
  }

  .hero-message h1 {
    max-width: none;
    font-size: 2rem;
    line-height: .98;
  }
}

/* ---------------------------------------------------------------------------
   v2: the capability sequence. Head left, lede right; six rows alternate copy
   and vignette across a central hairline spine, one node per capability.
   --------------------------------------------------------------------------- */

.product-head {
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.product-head-copy {
  grid-column: 1 / 7;
  margin-bottom: 0;
}

.product-lede {
  grid-column: 8 / 13;
  max-width: none;
  padding-bottom: 6px;
}

.capability-sequence {
  position: relative;
  list-style: none;
}

/* The spine: one hairline down the centre of the sequence. */
.capability-sequence::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-strong);
}

.capability-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: center;
  padding: clamp(28px, 3.5vw, 48px) 0;
}

.capability-text {
  grid-column: 1 / 6;
  grid-row: 1;
}

.capability-vignette {
  grid-column: 7 / 13;
  grid-row: 1;
}

.capability-item:nth-child(even) .capability-text {
  grid-column: 8 / 13;
}

.capability-item:nth-child(even) .capability-vignette {
  grid-column: 1 / 6;
}

/* Breathing room between the spine and the vignette on either side. */
.capability-item:nth-child(odd) .capability-vignette {
  padding-left: clamp(8px, 1.5vw, 24px);
}

.capability-item:nth-child(even) .capability-vignette {
  padding-right: clamp(8px, 1.5vw, 24px);
}

/* ---------------------------------------------------------------------------
   v2: why agricultural retail. Head left, lede right, the season figure full width.
   --------------------------------------------------------------------------- */

.ag-grid {
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.ag-head {
  grid-column: 1 / 7;
  margin-bottom: 0;
}

.ag-lede {
  grid-column: 8 / 13;
  max-width: none;
  padding-bottom: 6px;
}

.season-figure--concepts {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
   v2: Agricultural Analysis Explore. Concepts left 4, the season figure right 7.
   --------------------------------------------------------------------------- */

.analysis-grid {
  align-items: start;
  row-gap: clamp(32px, 4vw, 48px);
}

.analysis-copy {
  grid-column: 1 / 5;
}

.analysis-grid .season-figure {
  grid-column: 6 / 13;
}

/* ---------------------------------------------------------------------------
   v2: the Capability Explorer host. Without JavaScript the targeted detail
   renders inline as an ordinary section and Close returns to the sequence.
   With JavaScript the host is a same-page sheet: the homepage stays behind a
   soil scrim, one capability is visible, the chrome stays put while the body
   scrolls. Compact screens get a full-page sheet, not a small modal.
   --------------------------------------------------------------------------- */

.explorer-panel {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.explorer-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(24px, 3vw, 40px);
}

.capability-detail {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: var(--section-pad-bottom);
}

/* The fragment navigation that reveals a target applies :target before it scrolls, so a hidden
   detail can be the scroll target; the smooth scroll takes about 1.5 s at default motion. */
html:not(.has-js) .capability-detail:not(:target) {
  display: none;
}

html:not(.has-js) .explorer:not(:has(.capability-detail:target)) .explorer-chrome {
  display: none;
}

.has-js .explorer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.5vw, 32px);
  background: rgba(23,32,24,.72);
}

.has-js .explorer[hidden] {
  display: none;
}

.has-js .explorer-panel {
  width: min(100%, var(--container));
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--ivory);
  color: var(--soil);
  border: 1px solid var(--rule);
  border-radius: var(--radius-frame);
  box-shadow: var(--frame-shadow);
  overflow: hidden;
}

.has-js .explorer-chrome {
  padding: 12px clamp(20px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
  background: var(--ivory);
}

.has-js .explorer-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: clamp(20px, 3vw, 40px);
  scroll-padding-top: 16px;
}

.has-js .capability-detail {
  padding-top: clamp(28px, 3.5vw, 48px);
  padding-bottom: clamp(36px, 4.5vw, 64px);
}

.has-js .capability-detail[hidden] {
  display: none;
}

/* Inside the sheet the sticky stage measures from the panel body, not the fixed nav. */
.has-js .explorer .story-stage {
  top: 16px;
}

/* Page scroll is locked while the sheet is open; the scrollbar gap is reserved so nothing shifts. */
html.explorer-open {
  overflow: hidden;
}

html.explorer-open body {
  padding-right: var(--scrollbar-gap, 0px);
}

@media (max-width: 960px) {
  .has-js .explorer {
    padding: 0;
  }

  .has-js .explorer-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .has-js .explorer .story-stage {
    position: static;
  }
}

.detail-head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.detail-orientation {
  max-width: 54ch;
}

.detail-foot {
  margin-top: clamp(36px, 4.5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 960px) {
  .product-head-copy,
  .product-lede,
  .capability-text,
  .capability-vignette,
  .capability-item:nth-child(even) .capability-text,
  .capability-item:nth-child(even) .capability-vignette,
  .ag-head,
  .ag-lede,
  .analysis-copy,
  .analysis-grid .season-figure,
  .portfolio-head {
    grid-column: 1 / -1;
  }

  .product-lede,
  .ag-lede {
    margin-top: 24px;
    padding-bottom: 0;
  }

  .capability-sequence::before {
    left: 0;
  }

  .capability-card {
    row-gap: 24px;
    padding-left: 28px;
  }

  .capability-text {
    grid-row: 1;
  }

  .capability-vignette,
  .capability-item:nth-child(even) .capability-vignette {
    grid-row: 2;
  }

  .portfolio-support {
    margin-top: 24px;
  }
}