/* ==========================================================================
   Culvera AI — Shared marketing section patterns
   --------------------------------------------------------------------------
   Reusable visual patterns used across Home, About and Demo: numbered media
   placeholders, the four step pipeline, problem/capability/audience/
   principle grids, callouts, the risk map, the network diagram, prompt
   chips, the app preview mock, and CTA bands. Page specific copy lives in
   each page's own HTML; this file only defines how those patterns look.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Numbered media placeholder                                              */
/* Every photo/illustration still to be supplied uses this frame so they   */
/* are easy to find and replace later, each with a distinct number.        */
/* ---------------------------------------------------------------------- */

.media-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-sand);
  border: 1px solid rgba(20, 46, 70, 0.15);
  text-align: center;
  overflow: hidden;
}

.media-frame__number {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-navy);
  opacity: 0.55;
}

.media-frame__label {
  font-family: var(--font-nav);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-navy);
  opacity: 0.55;
  padding: 1rem;
}

/* ---------------------------------------------------------------------- */
/* Shared section shell (reused alongside .section-inner from             */
/* about-sections.css)                                                    */
/* ---------------------------------------------------------------------- */

.site-section {
  background: var(--color-ivory);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}

.site-section--tight {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

/* Navy band (e.g. "The Information Gap"). Deep Charcoal (#263238) must
   never be used as a section background anywhere on the site — Deep Navy
   is the dark band colour, always paired with light text for contrast. */
.site-section--navy {
  background: var(--color-navy);
}

.site-section--navy .eyebrow {
  color: var(--color-gold-bright);
}

.site-section--navy .site-section__heading,
.site-section--navy .site-section__body {
  color: var(--color-ivory);
}

.site-section--navy .site-section__body {
  opacity: 0.88;
}

.site-section--divider {
  border-top: 1px solid rgba(20, 46, 70, 0.1);
}

.site-section__intro {
  max-width: 66rem;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

.site-section__intro--roomy {
  margin-bottom: clamp(4rem, 8vw, 6rem);
}

.site-section__intro--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.site-section__intro--center .eyebrow {
  text-align: center;
}

.site-section--band-light {
  background: var(--color-ivory);
}

.site-section__cta {
  text-align: center;
  margin-top: 2.5rem;
}

.site-section__followup {
  max-width: 54rem;
  text-align: center;
  margin: 3rem auto 0;
}

.site-section__link--gold {
  color: var(--color-gold-bright);
  border-color: rgba(217, 188, 128, 0.4);
}

.site-section__prose {
  max-width: 54rem;
  margin: 0 auto;
}

.site-section__prose--roomy {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.site-section__prose--tight {
  max-width: 48rem;
  text-align: center;
}

.cta-band__eyebrow {
  color: var(--color-gold-bright);
  text-align: center;
}

.site-section__subheading {
  font-size: 1.5rem;
}

.site-section__heading {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-navy);
  margin: 0 0 1rem;
}

.site-section__body {
  font-family: var(--font-nav);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-navy);
  opacity: 0.82;
  margin: 0 0 1.1rem;
}

.site-section__body:last-child {
  margin-bottom: 0;
}

.site-section__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-nav);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-field-green-deep);
  border-bottom: 1px solid rgba(70, 96, 63, 0.3);
  transition: color 200ms var(--ease-out-cinematic), border-color 200ms var(--ease-out-cinematic);
}

.site-section__link:hover,
.site-section__link:focus-visible {
  color: var(--color-gold);
  border-color: currentColor;
}

/* ---------------------------------------------------------------------- */
/* Hero support copy + data convergence visualization (Home, below hero)   */
/* ---------------------------------------------------------------------- */

.hero-support {
  background: var(--color-ivory);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6rem);
}

.hero-support__inner {
  max-width: 58rem;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.hero-support__body {
  font-family: var(--font-nav);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-navy);
  opacity: 0.85;
  margin: 0 0 1.75rem;
}

.data-convergence {
  max-width: 54rem;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--color-gold);
  border-radius: 12px;
}

/* Mobile only: pull the bordered diagram in from the screen edges. */
@media (max-width: 560px) {
  .data-convergence {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
}

.data-convergence__inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.9rem;
}

.data-convergence__tag {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  transition: border-color var(--hover-duration) var(--ease-out-cinematic), transform var(--hover-duration) var(--ease-out-cinematic);
}

.data-convergence__tag:hover {
  border-color: var(--color-navy);
  transform: translateY(-2px);
}

.data-convergence__lines {
  position: relative;
  width: 1px;
  height: 2.25rem;
  background: linear-gradient(to bottom, rgba(20, 46, 70, 0.05), rgba(20, 46, 70, 0.35));
  overflow: visible;
}

.data-convergence__lines::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-navy);
  transform: translate(-50%, 0);
  opacity: 0;
  animation: data-flow-pulse 2.6s var(--ease-in-out-cinematic) infinite;
}

.data-convergence__lines--out {
  background: linear-gradient(to bottom, rgba(197, 160, 82, 0.4), rgba(197, 160, 82, 0.05));
}

.data-convergence__lines--out::after {
  background: var(--color-gold);
  animation-delay: 1.1s;
}

@keyframes data-flow-pulse {
  0% {
    top: -3px;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    top: calc(100% - 2px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .data-convergence__lines::after {
    animation: none;
    opacity: 0;
  }
}

.data-convergence__core {
  font-family: var(--font-nav);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-ivory);
  background: var(--color-navy);
  border: 1px solid var(--color-gold);
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  animation: data-core-breathe 3.6s var(--ease-in-out-cinematic) infinite;
}

@keyframes data-core-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(197, 160, 82, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(197, 160, 82, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .data-convergence__core {
    animation: none;
  }
}

.data-convergence__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.1rem 1.75rem;
  border: 1px solid var(--color-gold);
  min-width: 12rem;
  transition: transform var(--hover-duration) var(--ease-out-cinematic), box-shadow var(--hover-duration) var(--ease-out-cinematic);
}

.data-convergence:hover .data-convergence__card {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 20px 36px -26px rgba(20, 46, 70, 0.4);
}

.data-convergence__card-label {
  font-family: var(--font-nav);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-gold);
}

.data-convergence__card-title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--color-navy);
}

/* ---------------------------------------------------------------------- */
/* Problem cards (Home, Section 2)                                         */
/* ---------------------------------------------------------------------- */

.problem-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.25rem);
}

.problem-card {
  padding: 1.75rem 1.5rem;
  background: var(--color-ivory);
  border: 1px solid rgba(20, 46, 70, 0.1);
  transition:
    transform var(--hover-duration) var(--ease-out-cinematic),
    border-color var(--hover-duration) var(--ease-out-cinematic),
    box-shadow var(--hover-duration) var(--ease-out-cinematic);
}

.problem-card:hover {
  transform: translateY(var(--hover-lift));
  border-color: rgba(197, 160, 82, 0.45);
  box-shadow: 0 20px 36px -28px rgba(20, 46, 70, 0.35);
}

.problem-card__index {
  display: block;
  font-family: var(--font-nav);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 1rem;
}

.problem-card__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  margin: 0 0 0.65rem;
}

.problem-card__body {
  font-family: var(--font-nav);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-navy);
  opacity: 0.78;
  margin: 0;
}

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

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

/* ---------------------------------------------------------------------- */
/* Capability list (Home, Section 3)                                       */
/* ---------------------------------------------------------------------- */

.capability-list {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: grid;
  gap: 0;
}

.capability {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: 1.75rem clamp(0.75rem, 2vw, 1.25rem);
  margin: 0 calc(-1 * clamp(0.75rem, 2vw, 1.25rem));
  border-top: 1px solid rgba(20, 46, 70, 0.1);
  border-radius: 6px;
  transition:
    background var(--hover-duration) var(--ease-out-cinematic),
    transform var(--hover-duration) var(--ease-out-cinematic);
}

.capability:last-child {
  border-bottom: 1px solid rgba(20, 46, 70, 0.1);
}

.capability:hover {
  background: rgba(197, 160, 82, 0.06);
  transform: translateX(6px);
}

.capability__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--color-navy);
  margin: 0;
  transition: color var(--hover-duration) var(--ease-out-cinematic);
}

.capability:hover .capability__title {
  color: var(--color-field-green-deep);
}

.capability__body {
  font-family: var(--font-nav);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-navy);
  opacity: 0.8;
  margin: 0;
  max-width: 38rem;
}

@media (max-width: 700px) {
  .capability {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* ---------------------------------------------------------------------- */
/* Step pipeline (Home "How Culvera Works" + Demo "The Workflow")          */
/* ---------------------------------------------------------------------- */

.step-pipeline {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.25rem);
}

.step {
  position: relative;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-gold);
  transition: transform var(--hover-duration) var(--ease-out-cinematic);
}

.step:hover {
  transform: translateY(var(--hover-lift));
}

.step:hover .step__title {
  color: var(--color-field-green-deep);
}

.step__index {
  display: block;
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-field-green-deep);
  margin-bottom: 0.85rem;
}

.step__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  color: var(--color-navy);
  margin: 0 0 0.65rem;
  transition: color var(--hover-duration) var(--ease-out-cinematic);
}

.step__body {
  font-family: var(--font-nav);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-navy);
  opacity: 0.78;
  margin: 0;
}

@media (max-width: 900px) {
  .step-pipeline {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5rem;
  }
}

@media (max-width: 560px) {
  .step-pipeline {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* Field Green field focus section (Home, Section 5)                       */
/* ---------------------------------------------------------------------- */

.field-focus {
  background: var(--color-field-green);
  color: var(--color-ivory);
}

.field-focus .eyebrow {
  color: var(--color-gold-bright);
}

.field-focus .site-section__heading,
.field-focus .site-section__body {
  color: var(--color-ivory);
}

.field-focus .site-section__body {
  opacity: 0.92;
}

.field-focus__columns {
  max-width: 1320px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.field-focus__column {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(245, 241, 232, 0.35);
  transition: transform var(--hover-duration) var(--ease-out-cinematic), border-color var(--hover-duration) var(--ease-out-cinematic);
}

.field-focus__column:hover {
  transform: translateY(var(--hover-lift));
  border-color: var(--color-gold-bright);
}

.field-focus__column-title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--color-ivory);
  margin: 0 0 0.65rem;
}

.field-focus__column-body {
  font-family: var(--font-nav);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-ivory);
  opacity: 0.88;
  margin: 0;
}

.field-focus__callout {
  max-width: 54rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.5rem clamp(1.5rem, 4vw, 2rem);
  border: 1px solid rgba(245, 241, 232, 0.35);
}

.field-focus__callout-title {
  font-family: var(--font-nav);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-gold-bright);
  margin: 0 0 0.75rem;
}

.field-focus__callout-body {
  font-family: var(--font-nav);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-ivory);
  opacity: 0.92;
  margin: 0;
}

@media (max-width: 800px) {
  .field-focus__columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------------------------------------------------------------------- */
/* Abstract orchard block risk map                                         */
/* ---------------------------------------------------------------------- */

.risk-map {
  max-width: 32rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 2rem);
  background: rgba(245, 241, 232, 0.06);
  border: 1px solid rgba(245, 241, 232, 0.35);
}

.risk-map__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.risk-map__block {
  aspect-ratio: 1;
  border-radius: 2px;
  transition: transform var(--hover-duration) var(--ease-out-cinematic), opacity var(--hover-duration) var(--ease-out-cinematic);
}

.risk-map__block:hover {
  transform: scale(1.12);
  opacity: 0.85;
}

.risk-map__block--low {
  background: rgba(245, 241, 232, 0.28);
}

.risk-map__block--review {
  background: var(--color-gold);
}

.risk-map__block--test {
  background: var(--color-navy);
}

.risk-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}

.risk-map__legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-nav);
  font-size: 0.78rem;
  color: var(--color-ivory);
  opacity: 0.9;
}

.risk-map__legend-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 1px;
  flex: none;
}

.risk-map__legend-swatch--low {
  background: rgba(245, 241, 232, 0.28);
}

.risk-map__legend-swatch--review {
  background: var(--color-gold);
}

.risk-map__legend-swatch--test {
  background: var(--color-navy);
}

.risk-map__caption {
  text-align: center;
  font-family: var(--font-nav);
  font-size: 0.75rem;
  color: var(--color-ivory);
  opacity: 0.6;
  margin: 1rem 0 0;
}

/* ---------------------------------------------------------------------- */
/* Audience cards (Home, Section 6) / used on light background             */
/* ---------------------------------------------------------------------- */

.audience-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.25rem);
}

.audience-card {
  padding-top: 1.25rem;
  border-top: 2px solid var(--color-turquoise);
  transition: transform var(--hover-duration) var(--ease-out-cinematic);
}

.audience-card:hover {
  transform: translateY(var(--hover-lift));
}

.audience-card__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  margin: 0 0 0.65rem;
  transition: color var(--hover-duration) var(--ease-out-cinematic);
}

.audience-card:hover .audience-card__title {
  color: var(--color-field-green-deep);
}

.audience-card__body {
  font-family: var(--font-nav);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-navy);
  opacity: 0.78;
  margin: 0;
}

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

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

/* ---------------------------------------------------------------------- */
/* Principle cards (About mission x5, women x4, home teaser x3)            */
/* ---------------------------------------------------------------------- */

.principle-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.principle-card {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(20, 46, 70, 0.18);
  transition: transform var(--hover-duration) var(--ease-out-cinematic), border-color var(--hover-duration) var(--ease-out-cinematic);
}

.principle-card:hover {
  transform: translateY(var(--hover-lift));
  border-color: var(--color-gold);
}

.principle-card__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  margin: 0 0 0.6rem;
}

.principle-card__body {
  font-family: var(--font-nav);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-navy);
  opacity: 0.78;
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Network diagram (About, Women in Agriculture)                           */
/* ---------------------------------------------------------------------- */

.network-diagram {
  max-width: 22rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.network-diagram__node {
  width: 100%;
  padding: 0.85rem 1.25rem;
  text-align: center;
  border: 1px solid rgba(20, 46, 70, 0.2);
  font-family: var(--font-nav);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  background: var(--color-ivory);
  transition: transform var(--hover-duration) var(--ease-out-cinematic), border-color var(--hover-duration) var(--ease-out-cinematic);
}

.network-diagram__node:hover {
  transform: scale(1.03);
  border-color: var(--color-gold);
}

.network-diagram__node--final:hover {
  border-color: var(--color-gold-bright);
}

.network-diagram__node--final {
  background: var(--color-navy);
  color: var(--color-ivory);
  border-color: var(--color-navy);
}

.network-diagram__arrow {
  font-family: var(--font-nav);
  color: var(--color-gold);
  font-size: 1rem;
  line-height: 1;
  padding: 0.4rem 0;
}

/* ---------------------------------------------------------------------- */
/* CTA band (used at the end of Home, About, Demo)                         */
/* ---------------------------------------------------------------------- */

.cta-band {
  background: var(--color-navy);
  color: var(--color-ivory);
  text-align: center;
}

.cta-band__inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.cta-band__heading {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-ivory);
  margin: 0 0 1rem;
}

.cta-band__body {
  font-family: var(--font-nav);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-ivory);
  opacity: 0.85;
  margin: 0 0 2rem;
}

.cta-band__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-nav);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.95rem 2.1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background var(--hover-duration) var(--ease-out-cinematic),
    color var(--hover-duration) var(--ease-out-cinematic),
    border-color var(--hover-duration) var(--ease-out-cinematic),
    transform var(--hover-duration) var(--ease-out-cinematic),
    box-shadow var(--hover-duration) var(--ease-out-cinematic);
}

.button:hover,
.button:focus-visible {
  transform: translateY(var(--hover-lift));
}

.button:active {
  transform: translateY(calc(var(--hover-lift) * 0.35));
  transition-duration: var(--press-duration);
}

.button--primary {
  background: var(--color-gold);
  color: var(--color-navy-deep);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-gold-bright);
  box-shadow: 0 14px 28px -16px rgba(197, 160, 82, 0.55);
}

.button--secondary {
  background: transparent;
  color: var(--color-ivory);
  border-color: rgba(245, 241, 232, 0.45);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  border-color: var(--color-ivory);
  background: rgba(245, 241, 232, 0.06);
}

.button--dark {
  background: var(--color-navy);
  color: var(--color-ivory);
}

.button--dark:hover,
.button--dark:focus-visible {
  background: var(--color-field-green-deep);
  box-shadow: 0 14px 28px -18px rgba(20, 46, 70, 0.5);
}

@media (max-width: 560px) {
  .cta-band__actions {
    flex-direction: column;
  }
  .button {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------- */
/* Question list (Demo, "Questions Culvera is designed to help answer")    */
/* A calm, editorial list rather than an interactive widget — deliberately */
/* static, matching the section's own "not dashboards" point.              */
/* ---------------------------------------------------------------------- */

.question-list {
  list-style: none;
  max-width: 54rem;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.question-item {
  position: relative;
  padding: 1.5rem 0 1.5rem 1.25rem;
  border-top: 1px solid rgba(20, 46, 70, 0.14);
  transition: padding-left var(--hover-duration) var(--ease-out-cinematic);
}

.question-item:hover {
  padding-left: 1.75rem;
}

.question-item::before {
  content: "";
  position: absolute;
  top: 1.85rem;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  transition: transform var(--hover-duration) var(--ease-out-cinematic);
}

.question-item:hover::before {
  transform: scale(1.6);
}

/* Bottom rule on the last item in each column */
.question-item:nth-last-child(-n+2) {
  border-bottom: 1px solid rgba(20, 46, 70, 0.14);
}

.question-item__text {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--color-navy);
  margin: 0;
  padding-right: 1.5rem;
}

@media (max-width: 700px) {
  .question-list {
    grid-template-columns: 1fr;
  }
  .question-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .question-item:last-child {
    border-bottom: 1px solid rgba(20, 46, 70, 0.14);
  }
}

/* ---------------------------------------------------------------------- */
/* App preview mock (Demo, "See the decision layer")                       */
/* ---------------------------------------------------------------------- */

.app-preview {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.app-preview__label {
  text-align: center;
  font-family: var(--font-nav);
  font-size: 0.75rem;
  color: var(--color-navy);
  opacity: 0.55;
  margin: 0 0 1rem;
}

.app-preview__row {
  transition: background var(--hover-duration) var(--ease-out-cinematic), padding-left var(--hover-duration) var(--ease-out-cinematic);
}

.app-preview__row:hover {
  background: rgba(197, 160, 82, 0.06);
  padding-left: 0.4rem;
}

/* Map band — full width, sits above the results, not squeezed into a
   sidebar column. */
.demo-map-band {
  height: min(26rem, 55vh);
  min-height: 18rem;
  border: 1px solid rgba(20, 46, 70, 0.15);
  background: var(--color-sand);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.demo-results {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.demo-results__top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.demo-results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(20, 46, 70, 0.1);
}

@media (max-width: 900px) {
  .demo-results__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.demo-results__grid > div {
  transition: transform var(--hover-duration) var(--ease-out-cinematic);
}

.demo-results__grid > div:hover {
  transform: translateY(var(--hover-lift));
}

/* Panel content fades/rises in fresh every time it's replaced — initial
   load, a tab switch, a new map click — instead of hard-cutting. Works
   as a CSS animation (not a transition) so it replays on every fresh
   DOM insertion without any JS timing tricks. */
.demo-fade {
  animation: demo-fade-in var(--reveal-duration) var(--ease-out-cinematic) forwards;
}

@keyframes demo-fade-in {
  from {
    opacity: 0;
    transform: translateY(calc(var(--reveal-distance) * 0.5));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Price sparkline: the line progressively reveals itself left to right
   along its real trajectory (a stroke-dash draw, not a shape morph).
   The start dot is there from the first frame; the end dot fades in
   once the draw reaches it. */
.demo-price polyline {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: demo-draw-line 1890ms var(--ease-out-cinematic) forwards;
  animation-delay: 150ms;
}

@keyframes demo-draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

.demo-price__end-dot {
  opacity: 0;
  animation: demo-fade-in 315ms var(--ease-out-cinematic) forwards;
  animation-delay: 2040ms;
}

@media (prefers-reduced-motion: reduce) {
  .demo-fade {
    animation: none;
  }
  .demo-price polyline {
    animation: none;
    stroke-dashoffset: 0;
  }
  .demo-price__end-dot {
    animation: none;
    opacity: 1;
  }
  .demo-results__grid > div:hover {
    transform: none;
  }
  .demo-timeline::before {
    display: none;
  }
}

.app-preview__group-title {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-field-green-deep);
  margin: 0 0 0.6rem;
}

.app-preview__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-nav);
  font-size: 0.88rem;
  color: var(--color-navy);
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(20, 46, 70, 0.08);
}

.app-preview__row-label {
  opacity: 0.6;
}

.app-preview__recommendation {
  border-top: 2px solid var(--color-gold);
  padding-top: 1.25rem;
}

.app-preview__recommendation-title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 2rem;
  color: var(--color-navy);
  margin: 0 0 0.3rem;
}

.app-preview__recommendation-sub {
  font-family: var(--font-nav);
  font-size: 0.8rem;
  color: var(--color-field-green-deep);
  margin: 0 0 1.1rem;
}

/* ---------------------------------------------------------------------- */
/* Demo results panel — hero stats, price sparkline, fertiliser/irrigation */
/* timeline, harvest risk badges, crop tabs (demo.html — js/demo-map.js)   */
/* ---------------------------------------------------------------------- */

.context-strip {
  display: flex;
  flex-direction: column;
}

.demo-crop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.demo-crop-tab {
  font-family: var(--font-nav);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  background: transparent;
  border: 1px solid rgba(20, 46, 70, 0.25);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: background var(--hover-duration) var(--ease-out-cinematic), color var(--hover-duration) var(--ease-out-cinematic), border-color var(--hover-duration) var(--ease-out-cinematic);
}

.demo-crop-tab:hover {
  border-color: var(--color-gold);
}

.demo-crop-tab.is-active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-ivory);
}

.demo-stat-row {
  display: flex;
  flex-wrap: wrap;
}

.demo-stat {
  flex: 1 1 0;
  min-width: 6.5rem;
  padding-right: 1rem;
}

.demo-stat + .demo-stat {
  border-left: 1px solid rgba(20, 46, 70, 0.1);
  padding-left: 1rem;
}

.demo-stat__label {
  font-family: var(--font-nav);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  opacity: 0.55;
  margin: 0 0 0.4rem;
}

.demo-stat__value {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-navy);
  margin: 0;
}

.demo-price {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.demo-price__values {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 5.5rem;
}

.demo-price__value {
  font-family: var(--font-nav);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-navy);
}

.demo-price__caption {
  font-family: var(--font-nav);
  font-size: 0.68rem;
  color: var(--color-navy);
  opacity: 0.5;
}

.demo-price__trend {
  font-family: var(--font-nav);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-field-green-deep);
  margin-top: 0.4rem;
  display: block;
}

.demo-price__trend--falling {
  color: #8a3b2e;
}

.demo-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* A soft highlight travels down the connector line on a slow, gentle
   loop — reads as "irrigation flowing down" rather than a UI effect.
   Aligned to sit directly over the timeline items' border-left. */
.demo-timeline::before {
  content: "";
  position: absolute;
  left: -1px;
  width: 2px;
  height: 3.5rem;
  background: linear-gradient(to bottom, transparent, var(--color-gold), transparent);
  opacity: 0;
  pointer-events: none;
  animation: demo-timeline-flow 4.5s linear infinite;
}

@keyframes demo-timeline-flow {
  0% {
    /* Bar is 3.5rem tall — keep top in [0, 100% - 3.5rem] so it never
       extends past the timeline's own top or bottom edge. */
    top: 0;
    opacity: 0;
  }
  12% {
    opacity: 0.5;
  }
  88% {
    opacity: 0.5;
  }
  100% {
    top: calc(100% - 3.5rem);
    opacity: 0;
  }
}

.demo-timeline__item {
  position: relative;
  padding: 0 0 1rem 1.4rem;
  border-left: 1px solid rgba(20, 46, 70, 0.14);
}

.demo-timeline__item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.demo-timeline__dot {
  position: absolute;
  left: -0.32rem;
  top: 0.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-ivory);
  border: 2px solid var(--color-gold);
}

.demo-timeline__timing {
  font-family: var(--font-nav);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-field-green-deep);
  margin: 0 0 0.2rem;
}

.demo-timeline__npk {
  font-family: var(--font-nav);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 0.2rem;
}

.demo-timeline__method {
  font-family: var(--font-nav);
  font-size: 0.78rem;
  color: var(--color-navy);
  opacity: 0.65;
  line-height: 1.4;
  margin: 0;
}

.demo-harvest__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.demo-harvest__date {
  font-family: var(--font-nav);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-navy);
}

.demo-risk-pills {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.6rem;
}

.demo-pill {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.demo-pill--high {
  color: #8a3b2e;
  background: rgba(138, 59, 46, 0.08);
  border: 1px solid rgba(138, 59, 46, 0.35);
}

.demo-pill--medium {
  color: #8a5a1f;
  background: rgba(197, 160, 82, 0.12);
  border: 1px solid rgba(197, 160, 82, 0.35);
}

.demo-pill--low {
  color: var(--color-field-green-deep);
  background: rgba(89, 120, 90, 0.1);
  border: 1px solid rgba(89, 120, 90, 0.3);
}

.demo-risk-action {
  font-family: var(--font-nav);
  font-size: 0.76rem;
  color: var(--color-navy);
  opacity: 0.6;
  line-height: 1.5;
  margin: 0.25rem 0 0;
}

.demo-notes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(20, 46, 70, 0.08);
}

.demo-note {
  font-family: var(--font-nav);
  font-size: 0.78rem;
  color: var(--color-navy);
  opacity: 0.6;
  line-height: 1.55;
  margin: 0;
}

.demo-note b {
  opacity: 1;
  font-weight: 600;
}

@media (max-width: 500px) {
  .demo-stat {
    min-width: 45%;
    flex: 1 1 45%;
    margin-bottom: 0.75rem;
  }
  .demo-stat:nth-child(odd) {
    border-left: none;
    padding-left: 0;
  }
}

.app-preview__note {
  text-align: center;
  max-width: 48rem;
  margin: 1.5rem auto 0;
  font-family: var(--font-nav);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-navy);
  opacity: 0.6;
}

@media (max-width: 600px) {
  .demo-map-band {
    height: 18rem;
    min-height: 14rem;
  }
}

.demo-panel__state {
  font-family: var(--font-nav);
  font-size: 0.88rem;
  color: var(--color-navy);
  line-height: 1.6;
}

.demo-panel__state--empty p:last-child {
  opacity: 0.65;
}

.demo-panel__state--loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0.75;
}

.demo-panel__spinner {
  width: 1rem;
  height: 1rem;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(20, 46, 70, 0.15);
  border-top-color: var(--color-gold);
  animation: demo-spin 0.8s linear infinite;
}

@keyframes demo-spin {
  to {
    transform: rotate(360deg);
  }
}

.demo-panel__state--error {
  color: #8a3b2e;
}

@media (prefers-reduced-motion: reduce) {
  .demo-panel__spinner {
    animation: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Disclaimer note (Demo, near bottom)                                     */
/* ---------------------------------------------------------------------- */

.disclaimer-note {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  font-family: var(--font-nav);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-navy);
  opacity: 0.55;
}

/* ---------------------------------------------------------------------- */
/* Editorial photography — real photos (as opposed to .media-frame         */
/* placeholders). No border, no radius, no caption chrome: the photo is    */
/* the accent. Two shapes cover every photo currently in use.              */
/* ---------------------------------------------------------------------- */

.editorial-photo {
  margin: clamp(2.5rem, 5vw, 4rem) auto;
}

.editorial-photo--wide {
  max-width: 1320px;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.editorial-photo--wide img {
  width: 100%;
  height: auto;
  display: block;
}

.editorial-photo--portrait {
  max-width: 26rem;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.editorial-photo--portrait img {
  width: 100%;
  height: auto;
  display: block;
}

/* Photo left, text right — e.g. Our Story */
.photo-text-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: stretch;
}

/* The image always fills exactly the height of the text column next to
   it (grid stretches both columns to the tallest one, i.e. the text) —
   cropping via object-fit rather than leaving mismatched heights. Each
   photo sets its own object-position inline where centring would cut off
   its subject. */
.photo-text-grid__media {
  margin: 0;
  height: 100%;
  min-height: 22rem;
  overflow: hidden;
}

.photo-text-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-text-grid__body {
  display: grid;
  gap: 1.4rem;
  align-content: center;
}

/* Landscape photos: no cropping at all. The column widths are set with
   fixed fr tracks (not "auto" or flex-basis-from-content), so the image's
   box is always sized by its column, never by its own natural pixel
   dimensions — that's what keeps this stable. Inside that fixed-width
   column, width:100% + height:auto scales the photo proportionally, so it
   keeps its real aspect ratio with zero cropping and zero distortion. The
   image column is made wide enough that, given this copy's length, the
   natural photo height lands close to the text block's height without
   ever forcing an exact pixel match. */
.photo-text-grid--gentle-crop {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  align-items: center;
}

.photo-text-grid--gentle-crop .photo-text-grid__media {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.photo-text-grid--gentle-crop .photo-text-grid__media img {
  width: 100%;
  height: auto;
  object-fit: unset;
}

.photo-text-grid--gentle-crop .photo-text-grid__body {
  align-content: center;
}

.photo-text-grid--reverse.photo-text-grid--gentle-crop {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

@media (max-width: 800px) {
  .photo-text-grid__media {
    height: auto;
    min-height: 0;
  }

  .photo-text-grid__media img {
    height: auto;
  }
}

.photo-text-grid__body .site-section__body {
  margin: 0;
}

.photo-text-grid--reverse {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.photo-text-grid__body--right {
  text-align: right;
}

@media (max-width: 800px) {
  .photo-text-grid,
  .photo-text-grid--reverse,
  .photo-text-grid--gentle-crop,
  .photo-text-grid--reverse.photo-text-grid--gentle-crop {
    grid-template-columns: 1fr;
  }

  .photo-text-grid__body--right {
    text-align: left;
  }
}