/* Southern Cross Fertilisers — homepage, Option F ("the divider")
   Loads after hero-e.css. The hero keeps Option E's centred claim but
   carries no foreground: instead the photograph dissolves along its bottom
   edge into the ground of the band beneath, and the low stockpile becomes
   the DIVIDER between the second and third bands — below the second band's
   content, its base fading into the third band's colour.

   Two variants, one stylesheet:
     .home--f-bone   hero → bone; statement band (bone); stockpile fades to
                     green; operations band (green) follows
     .home--f-green  hero → deep green; operations band (green); stockpile
                     fades to bone; statement band (bone) follows

   The bone value is the site's only light ground — never white. */

/* ------------------------------------------------------------- hero */

.home--f .hero-e .scroll-cue { display: none; }
.home--f .hero-e__inner { padding-top: clamp(104px, 15vh, 168px); }

/* The photograph's last quarter eases into the next band's ground. */
.home--f .hero-e::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--g-rgb), 0) 0%,
    rgba(var(--g-rgb), 0.35) 45%,
    rgba(var(--g-rgb), 0.85) 80%,
    rgb(var(--g-rgb)) 100%);
}
.home--f-bone  .hero-e { --g-rgb: 245, 241, 232; }
.home--f-green .hero-e { --g-rgb: 12, 49, 12; }

/* On the bone variant the base scrim lifts off the bottom: the photo is
   going light there, not dark. On the green variant scrim and fade are the
   same family, so Option E's scrim stands. */
.home--f-bone .hero-e .hero-d__scrim--base {
  background: linear-gradient(0deg,
    rgba(8, 33, 8, 0) 0%,
    rgba(8, 33, 8, 0.28) 34%,
    rgba(8, 33, 8, 0.60) 56%,
    rgba(8, 33, 8, 0.48) 72%,
    rgba(8, 33, 8, 0.18) 100%);
}

/* ---------------------------------------------------------- divider */

/* The fora.so mechanic, measured: their hills move at 0.7–1.0x page speed,
   so the content above overtakes them and passes behind. Here the divider
   is pinned to the bottom of the viewport (position: sticky) for the run of
   the SECOND band only — the hero is left alone — and the pile inside it
   drifts upward on a view timeline of the run, so it climbs the page while
   the band's content scrolls up behind it. It releases when the run ends
   and scrolls away with the third band, whose colour its base carries.
   Both parts are compositor-driven: no script, no judder. */
.run {
  position: relative;
  view-timeline-name: --run;
  view-timeline-axis: block;
}

.divider {
  position: sticky;
  bottom: 0;
  z-index: 5;
  width: 100%;
  aspect-ratio: 2464 / 574;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: transparent;   /* the sky above the pile is whatever scrolls behind */
}
.divider--to-green { --to-rgb: 12, 49, 12; }
.divider--to-bone  { --to-rgb: 245, 241, 232; }

.divider__layer {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(100%, 1280px);
  margin-left: calc(max(100%, 1280px) / -2);
  line-height: 0;
  transform: translate3d(0, 0, 0);
}
.divider__layer img { width: 100%; height: auto; display: block; }

/* The base fades into the third band's colour, solid before the image's
   bottom edge, so at release the divider's foot is already that ground. */
.divider__fade {
  position: absolute;
  left: -2%; right: -2%;
  top: 56%;
  height: 60%;
  background: linear-gradient(180deg,
    rgba(var(--to-rgb), 0) 0%,
    rgba(var(--to-rgb), 0.55) 18%,
    rgba(var(--to-rgb), 0.90) 32%,
    rgb(var(--to-rgb)) 40%);
}

/* The climb. As the run travels through the viewport the pile rises from
   40% below its seat (crests just showing at the foot of the screen, no
   solid base yet) to fully seated at the moment of release. */
@supports (animation-timeline: --run) {
  @media (prefers-reduced-motion: no-preference) {
    .divider__layer {
      animation: divider-climb linear both;
      animation-timeline: --run;
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes divider-climb {
  from { transform: translate3d(0, 40%, 0); }
  to   { transform: translate3d(0, 0%, 0); }
}

/* The second band keeps clearance under its last line so the content has
   settled before the pile releases; the third band starts close under it. */
.home--f .band:has(+ .divider) { padding-bottom: clamp(48px, 6vw, 80px); }
.home--f .run + .band { padding-top: clamp(56px, 7vw, 96px); }

@media (max-width: 640px) {
  .divider { aspect-ratio: 1200 / 389; }
  .divider__layer { width: max(100%, 420px); margin-left: calc(max(100%, 420px) / -2); }
}

/* ------------------------------------------------- the sweep (Jacob's pick)
   Matched to the fora.so recording, 3 Sep 2026: their hero text and card
   stay almost still while the hills sweep UP over them at page speed and
   leave out of the top, the black following underneath. So it is the
   content that is held, not the pile.

   Here, on hero-f-green only: the divider is in normal flow and moves at
   page speed. It carries a view timeline; while it crosses the viewport,
   the second band (Operations) is translated down at nearly the scroll
   rate, so it stays put while the pile climbs over it. The bone band that
   follows the divider in flow then rises over the frozen cards, exactly as
   fora's black does. The pile's base is already bone, so pile and band are
   one rising edge. All compositor-driven. */
.home--sweep .run {
  position: relative;
  z-index: 0;
  timeline-scope: --sweep;      /* lets the band, a sibling, read the divider's timeline */
}
.home--sweep .divider {
  position: relative;
  bottom: auto;
  view-timeline-name: --sweep;
  view-timeline-axis: block;
}
/* No climb inside the divider: the sweep is the movement. */
.home--sweep .divider__layer { animation: none; transform: none; }

/* Room to read. The band freezes the moment the divider enters, so its
   floor decides how high the cards sit when the pile arrives: with this
   clearance the card copy has reached the upper half of the screen first. */
.home--sweep .band:has(+ .divider) { padding-bottom: clamp(150px, 24vh, 270px); }

/* Hero copy sits in the vertical middle of the frame. The masthead is
   about 90px, so the block is nudged down a little to centre on the
   space beneath it rather than on the full viewport. */
.home--sweep .hero-e__inner {
  justify-content: center;
  padding-top: clamp(40px, 6vh, 72px);
  padding-bottom: 0;
}

/* Left-aligned alternative (hero-f-green-left.html). Copy ranges left on
   the page's own gutter; the left scrim Option E dropped comes back so
   the sunrise behind the headline stays legible. */
.home--left .hero-e__inner { align-items: flex-start; text-align: left; }
.home--left .hero-e__copy { max-width: 1040px; }
.home--left .hero-e__standfirst { margin-left: 0; margin-right: 0; max-width: 46ch; }
.home--left .hero-e .hero-d__scrim--left { display: block; }
.home--left .hero-e h1 { text-wrap: wrap; }

/* Everything after the run paints over the held band's overflow. */
.home--sweep .run ~ section,
.home--sweep .run ~ footer { position: relative; z-index: 1; }

@supports (animation-timeline: --sweep) {
  @media (prefers-reduced-motion: no-preference) {
    .home--sweep .run > .band {
      animation: sweep-hold linear both;
      animation-timeline: --sweep;
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
  }
}
/* The divider crosses the viewport over (100svh + its own height) of
   scroll. Translating the band down by 88% of that holds it almost still,
   with the slight drift fora has. Divider height = 100vw x 574/2464. */
@keyframes sweep-hold {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(0.88 * (100svh + 23.3vw)), 0); }
}
@media (max-width: 640px) {
  @keyframes sweep-hold {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, calc(0.88 * (100svh + 32.4vw)), 0); }
  }
}

/* ---------------------------------------------- left page: lighter right
   The left scrim carries the copy; the right half of the frame opens up so
   the plant and sky read. Scrim colour is a variable so the ink-green
   alternative (home--ink) only swaps the value. */
.home--left { --scrim-rgb: 8, 33, 8; }         /* --green-deep, the palette's recessed green */
.home--left.home--ink { --scrim-rgb: 4, 18, 4; } /* one step darker on the same 120° hue */

.home--left .hero-e .hero-d__scrim--left {
  display: block;
  background: linear-gradient(90deg,
    rgba(var(--scrim-rgb), 0.86) 0%,
    rgba(var(--scrim-rgb), 0.62) 26%,
    rgba(var(--scrim-rgb), 0.30) 46%,
    rgba(var(--scrim-rgb), 0) 60%);
}
/* The base scrim drops to a third of its weight: it only needs to hold
   the foot of the frame where the photograph meets the green band. */
.home--left .hero-e .hero-d__scrim--base {
  background: linear-gradient(0deg,
    rgba(var(--scrim-rgb), 0.08) 0%,
    rgba(var(--scrim-rgb), 0.22) 30%,
    rgba(var(--scrim-rgb), 0.24) 52%,
    rgba(var(--scrim-rgb), 0.14) 70%,
    rgba(var(--scrim-rgb), 0.04) 100%);
}
.home--left .hero-e .hero-d__scrim--top {
  background: linear-gradient(180deg,
    rgba(var(--scrim-rgb), 0.70) 0%,
    rgba(var(--scrim-rgb), 0.30) 16%,
    rgba(var(--scrim-rgb), 0) 32%);
}

/* Ink page: the hero dissolves into the same ink green and the second band
   takes it as its ground, so hero, scrim and band are one colour. Text
   pairs only get more contrast on the darker ground. */
.home--ink .hero-e { --g-rgb: 4, 18, 4; }
.home--ink .run > .band--green { background: #041204; }

/* ============================================ THE PICK, and the switch
   Jacob's choice, 3 Sep 2026: hero-f-green-left-deep.html — left-aligned
   copy, ink scrim on the hero, lighter right-hand scrims, and the footer
   green as the ground the hero dissolves into and the Operations band
   beneath. The alternatives stay live as body-class switches:

     home--left                      standard band green  #0C310C  (hero-f-green-left.html)
     home--left home--ink            ink                  #041204  (hero-f-green-left-ink.html)
     home--left home--ink home--deep footer green         #082108  (hero-f-green-left-deep.html)  <- pick

   Change the classes on <body> to switch; nothing else moves. */

/* Third variant: ink scrim on the hero, the FOOTER green (#082108,
   --green-deep) as the second band's ground — one step deeper than the
   standard band, still unmistakably green. */
.home--ink.home--deep .hero-e { --g-rgb: 8, 33, 8; }
.home--ink.home--deep .run > .band--green { background: var(--green-deep); }

/* ------------------------------------------------------------ vector map
   Replaces the raster artwork on the pick page. Real geometry (Natural
   Earth 1:50m state boundaries, public domain), so it is sharp at any
   size, and every colour comes from the palette. The band ground is the
   same value the raster carried. The animation runs once when the map
   scrolls into view: Queensland lights, the route draws west to east,
   the pins land in order and their labels rise. Without JS nothing is
   hidden; with reduced motion nothing moves. */
.locations__map--svg .map { width: 100%; height: auto; display: block; overflow: visible; }

.map__rest {
  fill: rgba(245, 241, 232, 0.11);
  stroke: rgba(245, 241, 232, 0.14);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.map__qld { fill: url(#map-qld); stroke: rgba(245, 241, 232, 0.28); stroke-width: 1.4; stroke-linejoin: round; }
.map__qld-glow { fill: #3E8A3E; opacity: 0.55; }

.map__route {
  fill: none;
  stroke: rgba(245, 241, 232, 0.85);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.map__halo { fill: var(--bone); opacity: 0.55; }
.map__dot  { fill: var(--bone); stroke: var(--green); stroke-width: 3; }
.map__pin, .map__label { transform-box: fill-box; transform-origin: center; }

.map__label rect { fill: #0C310C; stroke: rgba(143, 203, 143, 0.55); stroke-width: 1.4; }
.map__label text { text-anchor: middle; font-family: var(--font-display); }
.map__title { font-size: 22px; font-weight: 500; fill: var(--bone); }
.map__sub   { font-size: 15px; fill: #A9CDA9; }

/* ---- hidden until in view (JS present, motion allowed) */
@media (prefers-reduced-motion: no-preference) {
  .has-js .locations__map--svg:not(.is-in) .map__qld-glow,
  .has-js .locations__map--svg:not(.is-in) .map__qld  { opacity: 0; }
  .has-js .locations__map--svg:not(.is-in) .map__route { stroke-dashoffset: 1; }
  .has-js .locations__map--svg:not(.is-in) .map__pin   { opacity: 0; transform: scale(0.2); }
  .has-js .locations__map--svg:not(.is-in) .map__label { opacity: 0; transform: translateY(10px); }

  .locations__map--svg.is-in .map__qld      { animation: map-fade 900ms ease-out both; }
  .locations__map--svg.is-in .map__qld-glow { animation: map-fade 900ms ease-out both; animation-delay: 120ms; }
  .locations__map--svg.is-in .map__route    { animation: map-draw 1100ms cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 700ms; }
  .locations__map--svg.is-in .map__pin      { animation: map-pop 520ms cubic-bezier(0.22, 1.2, 0.36, 1) both; }
  .locations__map--svg.is-in .map__label    { animation: map-rise 520ms ease-out both; }
  .locations__map--svg.is-in .map__pin--1   { animation-delay: 750ms; }
  .locations__map--svg.is-in .map__pin--2   { animation-delay: 1250ms; }
  .locations__map--svg.is-in .map__pin--3   { animation-delay: 1800ms; }
  .locations__map--svg.is-in .map__label--1 { animation-delay: 950ms; }
  .locations__map--svg.is-in .map__label--2 { animation-delay: 1450ms; }
  .locations__map--svg.is-in .map__label--3 { animation-delay: 2000ms; }
}
@keyframes map-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes map-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes map-pop  { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes map-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* The glow's resting opacity, restated so the keyframe's "to" lands on it. */
.locations__map--svg.is-in .map__qld-glow { opacity: 0.55; animation-name: map-fade-glow; }
@keyframes map-fade-glow { from { opacity: 0; } to { opacity: 0.55; } }

@media (max-width: 640px) {
  /* Labels are unreadable at phone scale; the legend below carries them. */
  .locations__map--svg .map__label { display: none; }
}

/* -------------------------------------------------------------- pill nav
   The hero keeps the full-width transparent masthead. From 40px of scroll
   the same element condenses into a floating pill (after amplemarket.com):
   lockup swaps to the mark, links tighten, fully rounded ends, a shadow to
   lift it off the page. One class on <body>, everything else transitions. */
.home--pillnav .masthead-d__mark { display: none; width: 40px; height: 40px; }

.home--pillnav .masthead-d {
  transition: background-color 260ms ease, border-color 260ms ease,
              width 360ms cubic-bezier(0.22, 0.61, 0.36, 1), margin 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
              padding 360ms cubic-bezier(0.22, 0.61, 0.36, 1), border-radius 360ms ease, box-shadow 360ms ease;
}
.home--pillnav.is-compact .masthead-d {
  width: min(calc(100% - 32px), 1120px);
  margin: 12px auto 0;
  padding: 8px 10px 8px 12px;
  gap: clamp(14px, 1.6vw, 28px);
  border-radius: 999px;
  border: 1px solid rgba(245, 241, 232, 0.14);
  background: rgba(8, 33, 8, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(245, 241, 232, 0.06) inset;
}
.home--pillnav.is-compact .masthead-d__logo { min-height: 40px; padding-left: 6px; }
.home--pillnav.is-compact .masthead-d__lockup { display: none; }
.home--pillnav.is-compact .masthead-d__mark { display: block; }

.home--pillnav.is-compact .primary-nav { margin-left: clamp(8px, 1.2vw, 20px); }
.home--pillnav.is-compact .primary-nav a { min-height: 40px; font-size: 14.5px; }
.home--pillnav.is-compact .primary-nav__main { gap: clamp(12px, 1.6vw, 24px); }
.home--pillnav.is-compact .search-pill {
  min-height: 40px;
  padding: 0 18px;
  background: var(--bone);
  border-color: var(--bone);
  color: var(--green);
}
.home--pillnav.is-compact .search-pill:hover { background: var(--bone-muted); border-color: var(--bone-muted); color: var(--green); }

@media (prefers-reduced-motion: reduce) { .home--pillnav .masthead-d { transition: none; } }

@media (max-width: 1239px) {
  /* The collapsed menu drops out of the pill as its own rounded panel. */
  .home--pillnav.is-compact .has-js .primary-nav,
  .home--pillnav.is-compact.has-js .primary-nav {
    top: calc(100% + 8px);
    border: 1px solid rgba(245, 241, 232, 0.14);
    border-radius: 22px;
    padding: 8px 18px 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  }
  .home--pillnav.is-compact .nav-toggle { min-height: 40px; }
  .home--pillnav.is-compact .search-pill { background: none; border: 0; color: var(--bone); }
}

/* ---------------------------------------------------- map band on bone
   The map band takes the bone ground so the page does not jump from bone
   to deep green and back. It follows the bone statement band, so a full
   width hairline and extra top room mark the change of subject. The map
   itself is retuned for the light ground: the continent as a green tint,
   Queensland still lit, green route and pins, green pills. */
.home--map-bone .band--map {
  background: var(--bone);
  color: var(--green);
  border-top: 1px solid var(--rule-bone);
  padding-top: clamp(80px, 10vw, 150px);
}
.home--map-bone .band--map h2 { color: var(--green); }
.home--map-bone .band--map .lead-dark { color: var(--green); }
.home--map-bone .band--map .locations__head p:not(.lead-dark) { color: var(--ink-muted); }
.home--map-bone .band--map .tint { color: var(--green-light); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .home--map-bone .band--map .tint {
    background-image: linear-gradient(96deg, var(--green-light) 0%, var(--brand) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

.home--map-bone .map__rest {
  fill: rgba(12, 49, 12, 0.10);
  stroke: rgba(12, 49, 12, 0.22);
}
.home--map-bone .map__qld { stroke: rgba(12, 49, 12, 0.35); }
.home--map-bone .map__qld-glow { fill: #7FBF7F; }
.home--map-bone .locations__map--svg.is-in .map__qld-glow,
.home--map-bone .map__qld-glow { opacity: 0.45; }
@keyframes map-fade-glow-bone { from { opacity: 0; } to { opacity: 0.45; } }
.home--map-bone .locations__map--svg.is-in .map__qld-glow { animation-name: map-fade-glow-bone; }

.home--map-bone .map__route { stroke: rgba(12, 49, 12, 0.75); }
.home--map-bone .map__halo { fill: var(--brand); opacity: 0.45; }
.home--map-bone .map__dot  { fill: var(--green); stroke: var(--bone); }
.home--map-bone .map__label rect { fill: var(--green); stroke: rgba(12, 49, 12, 0.25); }
.home--map-bone .map__title { fill: var(--bone); }
.home--map-bone .map__sub   { fill: #A9CDA9; }

.home--map-bone .locations__legend li { border-color: var(--rule-bone); color: var(--ink-muted); }
.home--map-bone .locations__legend li:last-child { border-color: var(--rule-bone); }
.home--map-bone .locations__legend span { color: var(--green); }