/*
 * Rounds 5 and 6 (29 Oct 2026), the soil-analysis page. Loaded after design.css (Layout::roundStyles). Markup: SoilReport.php, script: soil.js.
 *   1 the frosted-glass strip on the soil photograph (decoration)            2 the list: tabs (filters), panels, rows with a hairline scale
 *   3 the soil core (soil structure / base saturation)                       4 what you get: the lab person fading into the page
 *   5 the end of the page melts into the footer
 * Plain rules (they beat the layered older ones). Nothing is a coloured dot: the state of a measurement is where its ring sits on the scale and a word.
 * Motion is transform and opacity only, and reduced motion gets the end state at once.
 */

/* ============ 0. the section ============ */
.lr { padding-block: clamp(56px, 7vw, 96px); }
.lr-head { margin-bottom: clamp(32px, 4vw, 48px); }
.lr-sample { background: rgba(255, 255, 255, .74); border: 0; box-shadow: inset 0 0 0 1px rgba(75, 52, 37, .13); }
@supports (backdrop-filter: blur(1px)) { .lr-sample { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }

/* ============ 1. The stage: soil in two hands, what the lab looks at on one line of frosted glass ============ */
/* The strip is not a control and not a white box: it is the photograph itself, blurred and darkened a little behind a hairline, so the light type
   has contrast on any part of the picture. Four icons (their four colours lightened to sit on glass) with the names of the groups, one line. */
.lr-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; justify-items: center; min-height: clamp(420px, 38vw, 520px); padding: clamp(18px, 2.4vw, 32px); margin-bottom: clamp(48px, 6vw, 80px); overflow: hidden; border-radius: 36px; background: var(--peat); }
.lr-scene { position: absolute; inset: 0; z-index: -1; }
.lr-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 36%; }
.lr-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 13, 8, 0) 46%, rgba(20, 13, 8, 0.01) 50.5%, rgba(20, 13, 8, 0.03) 55%, rgba(20, 13, 8, 0.06) 59.5%, rgba(20, 13, 8, 0.09) 64%, rgba(20, 13, 8, 0.14) 68.5%, rgba(20, 13, 8, 0.18) 73%, rgba(20, 13, 8, 0.22) 77.5%, rgba(20, 13, 8, 0.27) 82%, rgba(20, 13, 8, 0.3) 86.5%, rgba(20, 13, 8, 0.33) 91%, rgba(20, 13, 8, 0.35) 95.5%, rgba(20, 13, 8, 0.36) 100%); }
.lab-glass {
  position: relative; display: grid; grid-template-columns: minmax(190px, 250px) minmax(0, 1fr); align-items: center; gap: 12px 8px; width: min(100%, 1100px); padding: 18px 26px 18px 30px; border-radius: 28px; color: #fff;
  background: linear-gradient(155deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .07) 36%, rgba(20, 13, 8, .44) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .45), 0 36px 60px -34px rgba(0, 0, 0, .7);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .lab-glass { -webkit-backdrop-filter: blur(26px) saturate(1.6) brightness(.7); backdrop-filter: blur(26px) saturate(1.6) brightness(.7); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lab-glass { background: rgba(36, 25, 17, .82); } }
.lab-glass-title { margin: 0; font: 600 25px/1.14 var(--font-display), sans-serif; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 16px rgba(0, 0, 0, .3); }
.lab-glass-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.lab-glass-row li { --tint: #cfe8b0; display: grid; justify-items: center; align-content: center; gap: 10px; min-width: 0; padding: 6px 8px; border-left: 1px solid rgba(255, 255, 255, .2); text-align: center; }
.lab-glass-row li[data-season="spring"] { --tint: #bfe58f; }
.lab-glass-row li[data-season="summer"] { --tint: #f3d680; }
.lab-glass-row li[data-season="winter"] { --tint: #a9cff2; }
.lab-glass-row li[data-season="autumn"] { --tint: #f5ad82; }
.lab-g-ico { display: grid; color: var(--tint); }
.lab-g-ico svg { width: 38px; height: 38px; }
.lab-g-name { font: 600 16px/1.2 var(--font-display), sans-serif; letter-spacing: -.01em; color: #fff; }
@media (max-width: 1200px) { .lab-glass { grid-template-columns: minmax(0, 1fr); padding: 20px 22px 14px; } .lab-glass-row li:first-child { border-left: 0; } }
@media (max-width: 1000px) {
  .lr-stage { min-height: 0; padding: clamp(190px, 50vw, 330px) 14px 14px; border-radius: 28px; }
  .lr-scene img { object-position: 36% 20%; }
  .lab-glass { width: 100%; border-radius: 24px; }
}
@media (max-width: 860px) {
  .lab-glass { padding: 18px 14px 12px; }
  .lab-glass-title { padding-inline: 4px; font-size: 23px; }
  .lab-glass-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; }
  .lab-glass-row li { padding: 12px 4px; border-left: 0; }
  .lab-glass-row li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .2); }
  .lab-g-ico svg { width: 34px; height: 34px; }
  .lab-g-name { font-size: 15px; overflow-wrap: break-word; }
  .lr-stage { margin-bottom: 44px; }
}
@media (max-width: 480px) { .lab-glass-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .lab-g-name { font-size: 14px; } .lab-glass-row li { padding-inline: 2px; } }

/* ============ 2. The list: four filters, a quiet row per measurement ============ */
.lab-board { scroll-margin-top: 84px; }
.lab-board-head { margin-bottom: 6px; }
.lab-board-title { margin: 0; font: 700 clamp(26px, 3vw, 34px)/1.15 var(--font-display), sans-serif; letter-spacing: -.02em; color: var(--green-ink); }

/* The filters: an icon and a name each; the chosen one is ink and a soft light wash (no line, no border), and a bubble above it says how many
   measurements the group holds (the same bubble shows when another one is hovered or focused). On a phone the row scrolls and its edges fade. */
.lab-tabbar[hidden] { display: none; }
.lab-tabbar { --fl: 0px; --fr: 0px; position: relative; }
.lab-tabbar.can-left { --fl: 34px; }
.lab-tabbar.can-right { --fr: 34px; }
.lab-tabs {
  position: relative; display: flex; gap: 6px; padding-top: 46px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.lab-tabs::-webkit-scrollbar { display: none; }
.lab-tabcell { position: relative; flex: 0 0 auto; scroll-snap-align: center; }
.lab-tab {
  --tab-ink: var(--season-spring);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; margin: 0; padding: 0 20px; border: 0; border-radius: 16px;
  background: none; color: var(--ink-3); font: 600 16px/1 var(--font-display), sans-serif; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; transition: color .35s var(--ease-soft);
}
.lab-tab::before { content: ""; position: absolute; inset: 3px 0; z-index: -1; border-radius: 16px; background: rgba(255, 255, 255, .7); opacity: 0; transform: scale(.94); transition: opacity .35s var(--ease-soft), transform .4s var(--ease-soft); }
/* the tab row scrolls (overflow clips an outside ring), so the one focus ring of the site sits inside the tab */
@layer fi-pre { .lab-tabbar .lab-tabs .lab-tab:focus-visible { outline-offset: -5px !important; border-radius: 14px; } }
.lab-tab[data-season="summer"] { --tab-ink: var(--season-summer); }
.lab-tab[data-season="winter"] { --tab-ink: var(--season-winter); }
.lab-tab[data-season="autumn"] { --tab-ink: var(--season-autumn); }
.lab-tab-ico { display: grid; color: var(--ink-3); transition: color .35s var(--ease-soft); }
.lab-tab-ico svg { width: 24px; height: 24px; }
.lab-tab[aria-selected="true"] { color: var(--green-ink); }
.lab-tab[aria-selected="true"]::before { opacity: 1; transform: none; }
.lab-tab[aria-selected="true"] .lab-tab-ico { color: var(--tab-ink); }
@media (hover: hover) and (pointer: fine) { .lab-tab:not([aria-selected="true"]):hover { color: var(--green-ink); } }
/* the bubble above a tab: it is its description (aria-describedby), shown for the chosen tab, and for a hovered or focused one */
.lab-tip {
  position: absolute; left: 50%; bottom: calc(100% - 4px); z-index: 2; padding: 7px 11px; border-radius: 9px; background: var(--peat); color: #fff; font: 600 13px/1 var(--font-sans), sans-serif; white-space: nowrap; pointer-events: none;
  box-shadow: 0 10px 18px -10px rgba(43, 30, 21, .6); opacity: 0; visibility: hidden; transform: translate(-50%, 5px);
  transition: opacity .22s ease, transform .3s var(--ease-soft), visibility 0s linear .3s;
}
.lab-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--peat); border-radius: 0 0 2px 0; transform: rotate(45deg); }
.lab-tab[aria-selected="true"] + .lab-tip, .lab-tab:focus-visible + .lab-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) { .lab-tab:hover + .lab-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } }
.lab-swipe { display: none; margin: 8px 0 0; color: var(--ink-3); font-size: 13.5px; }
@media (pointer: coarse) { .lab-tabbar:not([hidden]) .lab-swipe { display: block; } }

/* the panels: the group on show fades and rises out, the new one's rows come in one after the other (60 ms apart, the first eight) and the scales draw */
.lab-panels { touch-action: pan-y pinch-zoom; }
.lab-panel { padding: 0; }
.lab-panel[hidden] { display: none; }
.lab-panel + .lab-panel { margin-top: 44px; }
.lab-js .lab-panel + .lab-panel { margin-top: 0; }
.lab-panel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 40px; padding: 18px 0 18px; }
.lab-panel-head h3 { margin: 0 0 6px; font: 700 24px/1.2 var(--font-display), sans-serif; letter-spacing: -.015em; color: var(--green-ink); }
.lab-js .lab-panel-head h3 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lab-panel-head p { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.lab-panel-head .lab-tally { max-width: none; color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.lab-js .lab-panel:not(.is-play) :is(.lab-panel-head, .lab-row, .lab-next) { opacity: 0; }
.lab-panel.is-leaving { animation: lab-leave .16s ease-in both; }
.lab-panel.is-play .lab-panel-head { animation: lab-rise .45s var(--ease-soft) both; }
.lab-panel.is-play .lab-row { animation: lab-rise .55s var(--ease-soft) calc(30ms + min(var(--i), 7) * 60ms) both; }
.lab-panel.is-play .lab-next { animation: lab-rise .5s var(--ease-soft) .56s both; }
@keyframes lab-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes lab-leave { to { opacity: 0; transform: translateY(-6px); } }

/* a row: name | scale | result. On a phone the scale takes its own line. */
.lab-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--lr-line); }
.lab-row {
  --st-ink: var(--lr-ok-ink);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(150px, .62fr); gap: 12px 48px; align-items: center; padding: 20px 0; border-top: 1px solid var(--lr-line);
}
.lab-row[data-state="low"] { --st-ink: var(--lr-low-ink); }
.lab-row[data-state="high"] { --st-ink: var(--lr-high-ink); }
.lab-id { min-width: 0; }
.lab-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.lab-name b { font: 700 18px/1.25 var(--font-display), sans-serif; letter-spacing: -.01em; color: var(--green-ink); }
.lab-sym { padding: 4px 7px; border-radius: 6px; background: rgba(75, 52, 37, .08); color: var(--ink-3); font: 600 12.5px/1 var(--font-sans), sans-serif; letter-spacing: .05em; }
.lab-tells { max-width: 46ch; margin: 6px 0 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.45; }

/* the scale: a hairline; the target band is a soft tint with a small tick at each end; the value is a ring (filled where it is out of range) and,
   only then, a thin line in the state's colour runs from the band's edge to it. Zones have the same width on every row (below | target | above). */
.lab-meter { container-type: inline-size; min-width: 0; }
.lab-bar { position: relative; height: 40px; }
.lab-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: rgba(75, 52, 37, .34); }
.lab-band { position: absolute; top: 7px; left: calc(var(--t0) * 1%); width: calc((var(--t1) - var(--t0)) * 1%); height: 9px; border-radius: 3px; background: linear-gradient(180deg, rgba(79, 122, 51, 0.38) 0, rgba(79, 122, 51, 0.38) 8.33%, rgba(79, 122, 51, 0.37) 16.67%, rgba(79, 122, 51, 0.35) 25%, rgba(79, 122, 51, 0.33) 33.33%, rgba(79, 122, 51, 0.31) 41.67%, rgba(79, 122, 51, 0.29) 50%, rgba(79, 122, 51, 0.27) 58.33%, rgba(79, 122, 51, 0.25) 66.67%, rgba(79, 122, 51, 0.23) 75%, rgba(79, 122, 51, 0.21) 83.33%, rgba(79, 122, 51, 0.2) 91.67%, rgba(79, 122, 51, 0.2) 100%); }
.lab-band::before, .lab-band::after { content: ""; position: absolute; top: -3px; bottom: -3px; width: 1.5px; border-radius: 1px; background: var(--lr-band); }
.lab-band::before { left: 0; }
.lab-band::after { right: 0; }
.lab-bar.is-open-start .lab-band::before, .lab-bar.is-open-end .lab-band::after { display: none; }
.lab-dev { position: absolute; top: 10.5px; left: calc(var(--ds) * 1%); width: calc(var(--dw) * 1%); height: 2px; border-radius: 1px; background: var(--st-ink); transform-origin: 0 50%; }
.lab-dev.is-low { transform-origin: 100% 50%; }
.lab-dot { position: absolute; top: 11.5px; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.75px var(--peat); transform: translateX(calc(var(--m) * 1cqw)); }
.lab-row:is([data-state="low"], [data-state="high"]) .lab-dot { background: var(--st-ink); box-shadow: 0 0 0 2px rgba(255, 255, 255, .92); }
.lab-end { position: absolute; top: 25px; left: calc(var(--x) * 1%); transform: translateX(-50%); color: var(--ink-3); font: 500 12.5px/1 var(--font-sans), sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab-end.is-last { transform: translateX(-100%); }
.lab-panel.is-play .lab-band { animation: lab-band-in .6s var(--ease-soft) calc(110ms + min(var(--i), 7) * 60ms) both; }
.lab-panel.is-play .lab-dot { animation: lab-dot-in .55s var(--ease-soft) calc(260ms + min(var(--i), 7) * 60ms) both; }
.lab-panel.is-play .lab-dev { animation: lab-dev-in .6s var(--ease-soft) calc(380ms + min(var(--i), 7) * 60ms) both; }
@keyframes lab-band-in { from { opacity: 0; transform: scaleX(.92); } }
@keyframes lab-dot-in { from { opacity: 0; scale: .3; } }
@keyframes lab-dev-in { from { transform: scaleX(0); } }

.lab-res { display: grid; justify-items: end; min-width: 0; text-align: right; }
.lab-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin: 0; }
.lab-val b { font: 700 36px/1 var(--font-display), sans-serif; letter-spacing: -.02em; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.lab-val small { color: var(--ink-3); font: 500 13px/1 var(--font-sans), sans-serif; }
.lab-stat { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--st-ink); font: 700 14.5px/1.2 var(--font-sans), sans-serif; }
.lab-stat .ph { width: 16px; height: 16px; }

.lab-next { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 20px; padding: 0 20px; border-radius: 99px; color: var(--green-ink); font: 600 15px/1 var(--font-sans), sans-serif; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(75, 52, 37, .4); transition: background-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft); }
.lab-next .ph { width: 18px; height: 18px; transition: transform .35s var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .lab-next:hover { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--green-ink); }
  .lab-next:hover .ph { transform: translateX(3px); }
  .lab-row { transition: background-color .3s var(--ease-soft); }
  .lab-row:hover { background: rgba(255, 255, 255, .42); }
}
/* what the values are and how to read the scale: two quiet sentences under the list */
.lab-notes { display: grid; gap: 6px; max-width: 760px; margin: 26px 0 0; }
.lab-notes p { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
@media (max-width: 1100px) and (min-width: 861px) { .lab-row { gap: 12px 32px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(130px, .6fr); } }
@media (max-width: 860px) {
  .lab-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id res" "meter meter"; gap: 14px 16px; align-items: start; padding: 18px 0 18px; }
  .lab-id { grid-area: id; }
  .lab-res { grid-area: res; }
  .lab-meter { grid-area: meter; }
  .lab-val b { font-size: 30px; }
  .lab-tab { padding: 0 16px; }
  .lab-panel-head { padding-top: 14px; }
}

/* ============ 3. The soil core: the places where the soil holds on to nutrients, as one core sample on a ruler ============ */
.lab-core {
  --focus: var(--focus-on-dark);
  position: relative; margin-top: clamp(56px, 7vw, 96px); padding: clamp(24px, 4vw, 52px); overflow: hidden; border-radius: 34px; color: var(--sand-soft);
  background: linear-gradient(180deg, rgba(34, 24, 17, 0.94) 0, rgba(34, 24, 17, 0.94) 8.33%, rgba(34, 24, 17, 0.94) 16.67%, rgba(34, 24, 17, 0.93) 25%, rgba(34, 24, 17, 0.92) 33.33%, rgba(34, 24, 17, 0.92) 41.67%, rgba(34, 24, 17, 0.91) 50%, rgba(34, 24, 17, 0.9) 58.33%, rgba(34, 24, 17, 0.9) 66.67%, rgba(34, 24, 17, 0.89) 75%, rgba(34, 24, 17, 0.88) 83.33%, rgba(34, 24, 17, 0.88) 91.67%, rgba(34, 24, 17, 0.88) 100%), url("../img/photo/soil-roots.webp") center / cover;
  box-shadow: 0 44px 70px -48px rgba(43, 30, 21, .75);
}
.lab-core-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; margin-bottom: clamp(26px, 4vw, 44px); }
.lab-core-head h3 { margin: 0 0 8px; font: 600 clamp(26px, 3vw, 34px)/1.12 var(--font-display), sans-serif; letter-spacing: -.02em; color: #fff; }
.lab-core-head p { max-width: 56ch; margin: 0; color: rgba(244, 234, 210, .9); font-size: 16px; line-height: 1.55; }
.lab-core-big { display: grid; justify-items: end; gap: 6px; margin: 0; text-align: right; }
.lab-core-big b { font: 700 clamp(56px, 8vw, 96px)/.9 var(--font-display), sans-serif; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.lab-core-big span { color: var(--sand); font: 600 13px/1.2 var(--font-sans), sans-serif; letter-spacing: .09em; text-transform: uppercase; }

.lab-core-stage { position: relative; container-type: inline-size; padding-top: 60px; }
.lab-flag { position: absolute; top: 0; left: 0; width: 0; height: 60px; transform: translateX(calc(var(--c) * 1cqw)); transition: transform .6s var(--ease-soft); pointer-events: none; }
.lab-flag::after { content: ""; position: absolute; left: -.5px; bottom: 4px; width: 1px; height: 16px; background: rgba(244, 234, 210, .75); }
.lab-flag-l { position: absolute; left: 0; bottom: 20px; display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 11px; border-radius: 9px; background: var(--sand-soft); color: var(--peat); font: 700 14px/1 var(--font-sans), sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .65); }
.lab-flag-l span { color: var(--topsoil); font-weight: 600; }
.lab-flag.is-end .lab-flag-l { transform: translateX(calc(-100% + 14px)); }

.lab-strip { display: flex; gap: 3px; height: clamp(52px, 6.5vw, 72px); }
.lab-seg {
  --ion: #9bb56b;
  position: relative; flex: var(--p) 1 0px; min-width: 6px; border-radius: 6px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .26) 100%), var(--ion);
  transition: scale .5s var(--ease-soft), opacity .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.lab-seg::after { content: ""; position: absolute; inset: -8px -4px; }
.lab-seg:first-child { border-radius: 16px 6px 6px 16px; }
.lab-seg:last-child { border-radius: 6px 16px 16px 6px; }
.lab-seg.is-calcium, .lab-ion.is-calcium { --ion: #9bb56b; }
.lab-seg.is-magnesium, .lab-ion.is-magnesium { --ion: #d3d78e; }
.lab-seg.is-potassium, .lab-ion.is-potassium { --ion: #e2b762; }
.lab-seg.is-sodium, .lab-ion.is-sodium { --ion: #c09266; }
.lab-seg.is-hydrogen, .lab-ion.is-hydrogen { --ion: #d8745a; }
.lab-seg.is-other, .lab-ion.is-other { --ion: #d9cfb6; }
/* at rest every ion shows its own colour and the chosen one stands taller; once the visitor has touched the legend or the strip the others step back */
.lab-core.is-touched .lab-seg { opacity: .5; }
.lab-core[data-active] .lab-seg.is-on { opacity: 1; scale: 1 1.16; z-index: 1; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .7); }

.lab-ruler { position: relative; height: 32px; margin-top: 8px; }
.lab-ruler i { position: absolute; top: 0; left: calc(var(--x) * 1%); width: 1px; height: 6px; background: rgba(244, 234, 210, .4); }
.lab-ruler i.is-major { height: 11px; background: rgba(244, 234, 210, .72); }
.lab-ruler span { position: absolute; top: 15px; left: 0; color: rgba(244, 234, 210, .82); font: 500 12.5px/1 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.lab-ruler i:first-child span { transform: none; }
.lab-ruler i:last-child span { transform: translateX(-100%); }

.lab-core-note { margin: 30px 0 0; color: rgba(244, 234, 210, .84); font-size: 13.5px; line-height: 1.5; }
.lab-core-pick { margin: 22px 0 8px; color: var(--sand); font-size: 14.5px; line-height: 1.4; }
.lab-core-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 56px; align-items: start; }
.lab-ions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.lab-ions li:nth-child(-n + 2) .lab-ion { border-top: 0; }
.lab-ion {
  --ion: #9bb56b;
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 58px; margin: 0; padding: 10px 6px 10px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .15);
  background: transparent; color: rgba(244, 234, 210, .9); font: inherit; text-align: left; cursor: pointer; transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.lab-ion:disabled { cursor: default; }
.lab-ion-rule { display: block; width: 4px; height: 28px; border-radius: 2px; background: var(--ion); opacity: .7; transition: opacity .3s var(--ease-soft); }
.lab-ion-name { font-size: 15px; line-height: 1.3; }
.lab-ion b { color: #fff; font: 700 18px/1 var(--font-display), sans-serif; font-variant-numeric: tabular-nums; }
.lab-ion.is-on { background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 8.33%, rgba(255, 255, 255, 0.09) 16.67%, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.07) 33.33%, rgba(255, 255, 255, 0.06) 41.67%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.04) 58.33%, rgba(255, 255, 255, 0.03) 66.67%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.01) 83.33%, rgba(255, 255, 255, 0) 91.67%, rgba(255, 255, 255, 0) 100%); color: #fff; }
.lab-ion.is-on .lab-ion-rule { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .lab-ion:not(:disabled):hover { background: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 8.33%, rgba(255, 255, 255, 0.06) 16.67%, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.05) 33.33%, rgba(255, 255, 255, 0.04) 41.67%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.03) 58.33%, rgba(255, 255, 255, 0.02) 66.67%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.01) 83.33%, rgba(255, 255, 255, 0) 91.67%, rgba(255, 255, 255, 0) 100%); color: #fff; } }

.lab-read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 26px; align-items: start; min-height: 150px; padding-left: 28px; }
.lab-read-share { display: grid; gap: 4px; margin: 0; }
.lab-read-n { font: 700 clamp(44px, 5vw, 60px)/1 var(--font-display), sans-serif; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.lab-read-share span { color: var(--sand); font-size: 13.5px; }
.lab-read-name { margin: 6px 0 8px; font: 600 20px/1.2 var(--font-display), sans-serif; letter-spacing: -.01em; color: #fff; }
.lab-read-does { margin: 0; color: rgba(244, 234, 210, .94); font-size: 16px; line-height: 1.55; }
.lab-read.is-swap .lab-read-n, .lab-read.is-swap .lab-read-text { animation: lab-swap .38s var(--ease-soft) both; }
@keyframes lab-swap { from { opacity: 0; transform: translateY(6px); } }

/* the strip draws in from the left, one ion after the other, when the panel scrolls into view (soil.js adds .is-in) */
.lab-core.lab-anim:not(.is-in) .lab-seg { transform: scaleX(0); }
.lab-core.lab-anim:not(.is-in) .lab-flag, .lab-core.lab-anim:not(.is-in) .lab-ruler { opacity: 0; }
.lab-core.is-in .lab-seg { transform-origin: 0 50%; animation: lab-draw calc(max(var(--p) * 11ms, 200ms)) cubic-bezier(.3, .6, .4, 1) calc(var(--s) * 11ms) both; }
.lab-core.is-in .lab-flag, .lab-core.is-in .lab-ruler { animation: lab-fade .6s ease 1s both; }
@keyframes lab-draw { from { transform: scaleX(0); } }
@keyframes lab-fade { from { opacity: 0; } }

@media (max-width: 860px) {
  .lab-core { border-radius: 28px; }
  .lab-core-head { grid-template-columns: minmax(0, 1fr); }
  .lab-core-big { justify-items: start; text-align: left; }
  .lab-core-body { grid-template-columns: minmax(0, 1fr); }
  .lab-read { order: -1; min-height: 0; padding: 4px 0 0; }
  .lab-flag-l { font-size: 13px; padding: 6px 9px; }
}
@media (max-width: 560px) {
  .lab-ions { grid-template-columns: minmax(0, 1fr); }
  .lab-ions li:nth-child(2) .lab-ion { border-top: 1px solid rgba(255, 255, 255, .15); }
  .lab-read { grid-template-columns: minmax(0, 1fr); }
}

/* ============ 4. What you get: the lab person, whole, fading into the page; three points beside it ============ */
.lab-with { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 0 clamp(24px, 4vw, 64px); align-items: center; min-height: clamp(380px, 38vw, 520px); margin-top: clamp(56px, 7vw, 104px); }
.lab-with-copy { position: relative; z-index: 1; grid-column: 1; grid-row: 1; max-width: 560px; }
.lab-with-pic { grid-column: 2; grid-row: 1; align-self: stretch; margin: 0 -32px 0 0; pointer-events: none; }
.lab-with-pic img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 40%;
  /* the edges that meet the page (left, top, bottom) fade out; the right edge runs off the screen */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.04) 3.75%, rgba(0, 0, 0, 0.16) 7.5%, rgba(0, 0, 0, 0.32) 11.25%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.68) 18.75%, rgba(0, 0, 0, 0.84) 22.5%, rgba(0, 0, 0, 0.96) 26.25%, #000 30%), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.07) 4%, rgba(0, 0, 0, 0.26) 8%, rgba(0, 0, 0, 0.5) 12%, rgba(0, 0, 0, 0.74) 16%, rgba(0, 0, 0, 0.93) 20%, #000 24%, #000 74%, rgba(0, 0, 0, 0.94) 77.71%, rgba(0, 0, 0, 0.8) 81.43%, rgba(0, 0, 0, 0.61) 85.14%, rgba(0, 0, 0, 0.39) 88.86%, rgba(0, 0, 0, 0.2) 92.57%, rgba(0, 0, 0, 0.06) 96.29%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.04) 3.75%, rgba(0, 0, 0, 0.16) 7.5%, rgba(0, 0, 0, 0.32) 11.25%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.68) 18.75%, rgba(0, 0, 0, 0.84) 22.5%, rgba(0, 0, 0, 0.96) 26.25%, #000 30%), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.07) 4%, rgba(0, 0, 0, 0.26) 8%, rgba(0, 0, 0, 0.5) 12%, rgba(0, 0, 0, 0.74) 16%, rgba(0, 0, 0, 0.93) 20%, #000 24%, #000 74%, rgba(0, 0, 0, 0.94) 77.71%, rgba(0, 0, 0, 0.8) 81.43%, rgba(0, 0, 0, 0.61) 85.14%, rgba(0, 0, 0, 0.39) 88.86%, rgba(0, 0, 0, 0.2) 92.57%, rgba(0, 0, 0, 0.06) 96.29%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mix-blend-mode: multiply;
}
@media (min-width: 1500px) {
  /* a screen wider than the page: the picture does not reach the edge of the screen, so its right edge fades too */
  .lab-with-pic img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.04) 3.75%, rgba(0, 0, 0, 0.16) 7.5%, rgba(0, 0, 0, 0.32) 11.25%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.68) 18.75%, rgba(0, 0, 0, 0.84) 22.5%, rgba(0, 0, 0, 0.96) 26.25%, #000 30%, #000 86%, rgba(0, 0, 0, 0.93) 88.33%, rgba(0, 0, 0, 0.74) 90.67%, rgba(0, 0, 0, 0.5) 93%, rgba(0, 0, 0, 0.26) 95.33%, rgba(0, 0, 0, 0.07) 97.67%, transparent 100%), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.07) 4%, rgba(0, 0, 0, 0.26) 8%, rgba(0, 0, 0, 0.5) 12%, rgba(0, 0, 0, 0.74) 16%, rgba(0, 0, 0, 0.93) 20%, #000 24%, #000 74%, rgba(0, 0, 0, 0.94) 77.71%, rgba(0, 0, 0, 0.8) 81.43%, rgba(0, 0, 0, 0.61) 85.14%, rgba(0, 0, 0, 0.39) 88.86%, rgba(0, 0, 0, 0.2) 92.57%, rgba(0, 0, 0, 0.06) 96.29%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.04) 3.75%, rgba(0, 0, 0, 0.16) 7.5%, rgba(0, 0, 0, 0.32) 11.25%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.68) 18.75%, rgba(0, 0, 0, 0.84) 22.5%, rgba(0, 0, 0, 0.96) 26.25%, #000 30%, #000 86%, rgba(0, 0, 0, 0.93) 88.33%, rgba(0, 0, 0, 0.74) 90.67%, rgba(0, 0, 0, 0.5) 93%, rgba(0, 0, 0, 0.26) 95.33%, rgba(0, 0, 0, 0.07) 97.67%, transparent 100%), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.07) 4%, rgba(0, 0, 0, 0.26) 8%, rgba(0, 0, 0, 0.5) 12%, rgba(0, 0, 0, 0.74) 16%, rgba(0, 0, 0, 0.93) 20%, #000 24%, #000 74%, rgba(0, 0, 0, 0.94) 77.71%, rgba(0, 0, 0, 0.8) 81.43%, rgba(0, 0, 0, 0.61) 85.14%, rgba(0, 0, 0, 0.39) 88.86%, rgba(0, 0, 0, 0.2) 92.57%, rgba(0, 0, 0, 0.06) 96.29%, transparent 100%);
  }
}
.lab-with h3 { margin: 0 0 24px; font: 700 clamp(28px, 3.2vw, 40px)/1.1 var(--font-display), sans-serif; letter-spacing: -.025em; color: var(--green-ink); }
.lab-with-list { margin: 0; padding: 0; list-style: none; }
.lab-with-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 20px; align-items: center; padding: 20px 0; border-top: 1px solid var(--lr-line); }
.lab-with-list li:last-child { border-bottom: 1px solid var(--lr-line); }
.lab-w-ico { display: grid; color: var(--green-ink); }
.lab-w-ico svg { width: 52px; height: 52px; stroke-width: .8; }
.lab-with-list h4 { margin: 0 0 3px; font: 700 20px/1.25 var(--font-display), sans-serif; letter-spacing: -.01em; color: var(--green-ink); }
.lab-with-list p { margin: 0; color: var(--ink-3); font-size: 15.5px; line-height: 1.45; }
@media (max-width: 860px) {
  .lab-with { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
  .lab-with-pic { grid-column: 1; grid-row: 1; height: clamp(240px, 66vw, 380px); margin: 0 -16px; }
  .lab-with-copy { grid-column: 1; grid-row: 2; max-width: none; margin-top: -34px; }
}

/* ============ 5. The end of the page melts into the footer ============ */
/* The FAQ was a flat block with a hairline above and below it. Its background now fades in at the top and out at the bottom (a mask on the
   blend, not on the content), so there is no edge before the footer card. */
.soil-section.alt.pg-soil-faq { position: relative; isolation: isolate; border-block: 0; background: none; padding-bottom: clamp(96px, 12vw, 160px); }
.soil-section.alt.pg-soil-faq::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain), var(--mesh-sect-b); background-color: #f7f6ec;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.03) 14px, rgba(0, 0, 0, 0.1) 28px, rgba(0, 0, 0, 0.22) 42px, rgba(0, 0, 0, 0.35) 56px, rgba(0, 0, 0, 0.5) 70px, rgba(0, 0, 0, 0.65) 84px, rgba(0, 0, 0, 0.78) 98px, rgba(0, 0, 0, 0.9) 112px, rgba(0, 0, 0, 0.97) 126px, #000 140px, #000 calc(100% - 280px), rgba(0, 0, 0, 0.97) calc(100% - 252px), rgba(0, 0, 0, 0.9) calc(100% - 224px), rgba(0, 0, 0, 0.78) calc(100% - 196px), rgba(0, 0, 0, 0.65) calc(100% - 168px), rgba(0, 0, 0, 0.5) calc(100% - 140px), rgba(0, 0, 0, 0.35) calc(100% - 112px), rgba(0, 0, 0, 0.22) calc(100% - 84px), rgba(0, 0, 0, 0.1) calc(100% - 56px), rgba(0, 0, 0, 0.03) calc(100% - 28px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.03) 14px, rgba(0, 0, 0, 0.1) 28px, rgba(0, 0, 0, 0.22) 42px, rgba(0, 0, 0, 0.35) 56px, rgba(0, 0, 0, 0.5) 70px, rgba(0, 0, 0, 0.65) 84px, rgba(0, 0, 0, 0.78) 98px, rgba(0, 0, 0, 0.9) 112px, rgba(0, 0, 0, 0.97) 126px, #000 140px, #000 calc(100% - 280px), rgba(0, 0, 0, 0.97) calc(100% - 252px), rgba(0, 0, 0, 0.9) calc(100% - 224px), rgba(0, 0, 0, 0.78) calc(100% - 196px), rgba(0, 0, 0, 0.65) calc(100% - 168px), rgba(0, 0, 0, 0.5) calc(100% - 140px), rgba(0, 0, 0, 0.35) calc(100% - 112px), rgba(0, 0, 0, 0.22) calc(100% - 84px), rgba(0, 0, 0, 0.1) calc(100% - 56px), rgba(0, 0, 0, 0.03) calc(100% - 28px), transparent 100%);
}

/* The buy box between the report and the FAQ had the same hard edges (a flat green block on the page's blend): on this page, where it follows the report, its
   background fades at top and bottom as well. */
.lr + .fp-sec { position: relative; isolation: isolate; background: none; }
.lr + .fp-sec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain), var(--mesh-sect-a); background-color: #e9efe4;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.03) 11px, rgba(0, 0, 0, 0.1) 22px, rgba(0, 0, 0, 0.22) 33px, rgba(0, 0, 0, 0.35) 44px, rgba(0, 0, 0, 0.5) 55px, rgba(0, 0, 0, 0.65) 66px, rgba(0, 0, 0, 0.78) 77px, rgba(0, 0, 0, 0.9) 88px, rgba(0, 0, 0, 0.97) 99px, #000 110px, #000 calc(100% - 110px), rgba(0, 0, 0, 0.97) calc(100% - 99px), rgba(0, 0, 0, 0.9) calc(100% - 88px), rgba(0, 0, 0, 0.78) calc(100% - 77px), rgba(0, 0, 0, 0.65) calc(100% - 66px), rgba(0, 0, 0, 0.5) calc(100% - 55px), rgba(0, 0, 0, 0.35) calc(100% - 44px), rgba(0, 0, 0, 0.22) calc(100% - 33px), rgba(0, 0, 0, 0.1) calc(100% - 22px), rgba(0, 0, 0, 0.03) calc(100% - 11px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.03) 11px, rgba(0, 0, 0, 0.1) 22px, rgba(0, 0, 0, 0.22) 33px, rgba(0, 0, 0, 0.35) 44px, rgba(0, 0, 0, 0.5) 55px, rgba(0, 0, 0, 0.65) 66px, rgba(0, 0, 0, 0.78) 77px, rgba(0, 0, 0, 0.9) 88px, rgba(0, 0, 0, 0.97) 99px, #000 110px, #000 calc(100% - 110px), rgba(0, 0, 0, 0.97) calc(100% - 99px), rgba(0, 0, 0, 0.9) calc(100% - 88px), rgba(0, 0, 0, 0.78) calc(100% - 77px), rgba(0, 0, 0, 0.65) calc(100% - 66px), rgba(0, 0, 0, 0.5) calc(100% - 55px), rgba(0, 0, 0, 0.35) calc(100% - 44px), rgba(0, 0, 0, 0.22) calc(100% - 33px), rgba(0, 0, 0, 0.1) calc(100% - 22px), rgba(0, 0, 0, 0.03) calc(100% - 11px), transparent 100%);
}

/* ============ Reduced motion: the end state at once ============ */
@media (prefers-reduced-motion: reduce) {
  .lab-panel.is-leaving, .lab-panel.is-play :is(.lab-panel-head, .lab-row, .lab-next, .lab-band, .lab-dot, .lab-dev), .lab-core.is-in .lab-seg, .lab-core.is-in .lab-flag, .lab-core.is-in .lab-ruler, .lab-read.is-swap .lab-read-n, .lab-read.is-swap .lab-read-text { animation: none !important; }
  .lab-js .lab-panel:not(.is-play) :is(.lab-panel-head, .lab-row, .lab-next) { opacity: 1 !important; }
  .lab-flag, .lab-seg, .lab-tab, .lab-tab::before, .lab-tab-ico, .lab-tip, .lab-next .ph { transition: none !important; }
}