/* FieldOptix — "the sentence is the layout" (tasteskill direction), brand palette + type kept.
   Grid: 12 columns between equal outer margins (--m); every section's statement starts on column 1, its proof on 7-12.
   House rules: no gradients, no shadows at rest, no monospace, type >= 13px, body >= 16px, one button shape, one radius. */
:root {
  --paper:#F6F3EA; --paper-2:#ECE7D8; --ink:#0D1F17; --ink-soft:#3D4B43; --forest:#0F2B21; --forest-2:#17392C;
  --on-dark:#F6F3EA; --on-dark-soft:#C9D3C9; --teal:#0E8F73; --lime:#A4D65E; --amber:#F0A83B;
  --m:clamp(20px, 4vw, 56px); --gap:clamp(16px, 2vw, 28px); --r:14px;
  --ease-out:cubic-bezier(.23, 1, .32, 1); --ease-in-out:cubic-bezier(.77, 0, .175, 1); --ease-soft:cubic-bezier(.16, 1, .3, 1);
  --serif:"Fraunces", Georgia, serif; --sans:"IBM Plex Sans", system-ui, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-color:#9fb0a5 transparent; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
img, video { display:block; max-width:100%; height:auto; }
a { color:inherit; }
::selection { background:#d5e9b5; color:var(--ink); }
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }
h1, h2, h3, h4 { margin:0; font-family:var(--serif); font-weight:600; letter-spacing:-.025em; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }

/* one button, one link style */
.btn { display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; border:0; background:var(--forest); color:var(--on-dark);
       font:600 15px/1 var(--sans); text-decoration:none; cursor:pointer; transition:transform 140ms var(--ease-out), background-color 160ms ease; }
.btn:active { transform:scale(.97); }
.btn-lg { padding:16px 28px; font-size:16px; }
.dark .btn, .book .btn { background:var(--lime); color:var(--forest); }
.link { font-weight:600; text-decoration:underline; text-decoration-thickness:.07em; text-underline-offset:.22em; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); transition:text-decoration-color 160ms ease; }
@media (hover:hover) and (pointer:fine) {
  .btn:hover { background:var(--forest-2); } .dark .btn:hover, .book .btn:hover { background:#B5E070; }
  .link:hover { text-decoration-color:currentColor; }
}

/* header: wordmark left, three words right */
.top { position:absolute; inset:0 0 auto; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:22px var(--m); }
.mark img { width:132px; }
.links { display:flex; align-items:center; gap:22px; font-size:15px; }
.link-quiet { text-decoration:none; font-weight:500; } .link-quiet:hover { text-decoration:underline; }
.menu-btn { font:500 15px var(--sans); background:none; border:0; cursor:pointer; color:var(--ink); padding:8px 4px; }
.menu { position:absolute; right:var(--m); top:76px; background:var(--forest); color:var(--on-dark); border-radius:var(--r); padding:10px; min-width:240px;
        display:grid; transform-origin:top right; animation:pop 200ms var(--ease-out); }
.menu[hidden] { display:none; }
.menu a { padding:10px 14px; border-radius:10px; text-decoration:none; font-size:16px; } .menu a:hover { background:rgba(246,243,234,.08); }
@keyframes pop { from { opacity:0; transform:scale(.96) translateY(-4px); } }

/* 1. hero: the sentence, with the field (a harvester from above) where a word would be */
.hero { min-height:100svh; padding:110px var(--m) 40px; display:grid; grid-template-rows:auto 1fr auto; gap:28px; }
.hero-note { font-size:15px; color:var(--ink-soft); }
.hero-line { align-self:center; font-size:clamp(44px, 6.2vw, 108px); line-height:.98; letter-spacing:-.022em; font-weight:600; }
.hero-line > span { display:block; }
.row1 { display:flex !important; align-items:baseline; gap:.22em; }
.strip { flex:1; height:.74em; border-radius:var(--r); overflow:hidden; align-self:center; transform:translateY(.04em); background:var(--forest); min-width:2.2em; }
.strip video { width:100%; height:100%; object-fit:cover; }
.hero-foot { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); align-items:end; }
.hero-lede { grid-column:1 / 7; font-size:clamp(17px, 1.35vw, 21px); color:var(--ink-soft); max-width:52ch; }
.hero-actions { grid-column:1 / 7; display:flex; align-items:center; gap:24px; }
.readout { grid-column:8 / 13; grid-row:1 / 3; align-self:end; margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
           background:var(--forest); color:var(--on-dark); border-radius:var(--r); padding:18px 20px; }
.readout .ro-title { grid-column:1 / -1; font-size:13px; color:var(--lime); margin-bottom:10px; }
.readout dt { font-size:13px; color:var(--on-dark-soft); } .readout dd { margin:2px 0 0; font:600 18px var(--sans); font-variant-numeric:tabular-nums; }

.partner-line { padding:56px var(--m) 72px; }
.partner-line p { font-family:var(--serif); font-size:clamp(22px, 2.2vw, 34px); line-height:1.25; letter-spacing:-.015em; max-width:28ch; }
.partner-line img { display:inline-block; height:2.4em; width:auto; vertical-align:middle; margin-left:.15em; }

/* chapters: each a statement on the left with its evidence on the right; the ground changes at the chapter edge */
.chapter { padding:clamp(96px, 12vw, 168px) var(--m); }
.dark { background:var(--forest); color:var(--on-dark); }
.grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); align-items:start; }
.side { grid-column:1 / 3; font-size:15px; font-weight:500; color:var(--teal); padding-top:.7em; }
.dark .side { color:var(--lime); }
.statement { grid-column:3 / 11; font-size:clamp(32px, 3.6vw, 58px); line-height:1.04; }
.body { grid-column:3 / 9; font-size:clamp(17px, 1.25vw, 20px); color:var(--ink-soft); max-width:60ch; }
.dark .body, .dark p { color:var(--on-dark-soft); }
.figures, .proof-figs { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap); margin-top:clamp(56px, 7vw, 96px); }
.proof-figs { grid-template-columns:repeat(4, 1fr); }
.figures b, .proof-figs b { display:block; font:600 clamp(36px, 4.2vw, 68px)/1 var(--serif); letter-spacing:-.03em; color:var(--lime); font-variant-numeric:tabular-nums; }
.proof-figs b { font-size:clamp(28px, 2.6vw, 44px); }
.figures span, .proof-figs span { display:block; margin-top:12px; font-size:16px; color:var(--on-dark-soft); max-width:26ch; }
.bleed { margin:clamp(72px, 9vw, 128px) calc(var(--m) * -1) calc(clamp(96px, 12vw, 168px) * -1); }
.bleed img { width:100%; aspect-ratio:21 / 9; object-fit:cover; }

.problem-evidence { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); margin-top:64px; align-items:start; }
.problem-evidence figure { grid-column:3 / 8; margin:0; } .problem-evidence img { border-radius:var(--r); width:100%; }
.plain-list { list-style:none; margin:0; padding:0; grid-column:9 / 13; display:grid; gap:22px; font-size:18px; }
.plain-list li { padding-left:22px; position:relative; } .plain-list li::before { content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--amber); }

/* 4. what we do: everything hangs from one axis at column 5; evidence sits in the right margin at unequal sizes */
.features { display:grid; gap:clamp(64px, 8vw, 112px); }
.feat-head { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); }
.feat-head .statement { grid-column:3 / 11; } .feat-head .body { grid-column:3 / 9; margin-top:20px; }
.feat { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); align-items:start; }
.feat > div { grid-column:3 / 7; }
.feat h3 { font-size:clamp(26px, 2.5vw, 40px); line-height:1.08; }
.feat p { margin-top:12px; color:var(--ink-soft); max-width:36ch; }
.feat img { grid-column:8 / 13; border-radius:var(--r); justify-self:end; }
.feat .w-lg { width:100%; } .feat .w-md { width:78%; } .feat .w-sq { width:52%; aspect-ratio:1; object-fit:cover; }

/* 6. how it works: each verb holds the centre while its own picture passes behind it */
.how-intro { padding-bottom:clamp(48px, 6vw, 80px); }
.how-intro .grid, .how-intro { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); }
.verb { position:relative; min-height:100svh; background:var(--forest) var(--img) center / cover no-repeat; color:var(--paper); display:grid; }
.verb::before { content:""; position:absolute; inset:0; background:rgba(13,31,23,.45); }
.verb h3 { position:sticky; top:50%; transform:translateY(-50%); align-self:start; margin:0; text-align:center; font-size:clamp(72px, 15vw, 260px); line-height:.9; letter-spacing:-.045em; z-index:1; padding:0 var(--m); }
.verb p { position:absolute; left:var(--m); bottom:var(--m); max-width:34ch; font-size:18px; z-index:1; background:rgba(13,31,23,.72); padding:14px 18px; border-radius:var(--r); color:var(--paper); }

.rx-body { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); margin-top:64px; align-items:center; }
.rx-body .plain-list { grid-column:3 / 7; }
.rx-card { grid-column:8 / 13; margin:0; background:#fff; border-radius:var(--r); padding:24px; display:grid; grid-template-columns:160px 1fr; gap:20px; align-items:center; }
.rx-card figcaption { grid-column:1 / -1; font-weight:600; font-size:16px; }
.rx-card svg { width:160px; }
.legend { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:15px; font-variant-numeric:tabular-nums; }
.legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:10px; vertical-align:-1px; }
.fine { font-size:14px; color:var(--ink-soft); }
.rx-card .fine { grid-column:1 / -1; }
.closing { margin-top:clamp(72px, 9vw, 120px); font-family:var(--serif); font-size:clamp(24px, 2.4vw, 38px); line-height:1.2; letter-spacing:-.015em; max-width:30ch; margin-left:calc((100% + var(--gap)) / 6); }

/* 7. crops: statement left, the table pushed right, one portrait anchoring the left */
.crops { background:var(--paper-2); }
.crop-table { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); margin-top:72px; align-items:end; }
.crop-table figure { grid-column:1 / 5; margin:0; } .crop-table figure img { border-radius:var(--r); aspect-ratio:4 / 5; object-fit:cover; width:100%; }
.crop-table > div { grid-column:7 / 13; display:grid; grid-template-columns:1fr 1fr; gap:48px 32px; }
.crop-table > div > .body { grid-column:1 / -1; }
.region h3 { font-size:clamp(24px, 2vw, 32px); }
.region h3 span { display:block; font:500 15px var(--sans); color:var(--teal); letter-spacing:0; margin-bottom:6px; }
.region ul { list-style:none; margin:16px 0 12px; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px 20px; font-size:17px; }

/* 8. partner: the portrait as a drop capital */
.dropcap { margin:56px 0 0 calc((100% + var(--gap)) / 6); font-family:var(--serif); font-size:clamp(22px, 2.3vw, 36px); line-height:1.3; letter-spacing:-.012em; max-width:40ch; color:var(--on-dark-soft) !important; }
.dropcap img { float:left; width:3.9em; height:3.9em; object-fit:cover; margin:.2em .55em 0 0; border-radius:var(--r); }
.dropcap b { color:var(--on-dark); font-weight:600; }
.partner-logos { margin:56px 0 0 calc((100% + var(--gap)) / 6); width:170px; filter:brightness(0) invert(1); opacity:.9; }

/* 9. in the field: prints dropped on the headline */
.field { position:relative; min-height:100svh; background:var(--paper-2); overflow:hidden; display:grid; place-items:center; padding:var(--m); }
.field-h { font-size:clamp(84px, 15vw, 250px); line-height:.86; letter-spacing:-.05em; text-align:center; color:var(--forest); max-width:6ch; }
.print { position:absolute; margin:0; background:#fff; padding:8px; border-radius:6px; transition:transform 220ms var(--ease-out); z-index:1; }
.print img { border-radius:2px; object-fit:cover; }
.p1 { width:19vw; left:7%; top:16%; transform:rotate(-8deg); } .p1 img { aspect-ratio:3 / 4; }
.p2 { width:18vw; right:8%; top:24%; transform:rotate(6deg); } .p2 img { aspect-ratio:3 / 4; }
.p3 { width:15vw; left:38%; bottom:-7%; transform:rotate(-3deg); } .p3 img { aspect-ratio:4 / 3; }
@media (hover:hover) and (pointer:fine) { .print:hover { transform:rotate(0) scale(1.02); z-index:3; } }
.field-note { position:absolute; left:var(--m); bottom:var(--m); font-size:17px; max-width:40ch; z-index:2; color:var(--ink); }

/* 10. FAQ: large questions, answers beside, all open */
.qa { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); padding-bottom:clamp(48px, 6vw, 80px); }
.qa .q { grid-column:1 / 7; font-size:clamp(24px, 2.4vw, 38px); line-height:1.1; font-weight:500; }
.qa .q.soft { color:var(--teal); }
.qa .a { grid-column:8 / 13; font-size:17px; color:var(--ink-soft); max-width:44ch; padding-top:.3em; }

/* 11. book */
.book { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--gap); align-items:start; }
.book-text { grid-column:1 / 6; display:flex; flex-direction:column; gap:22px; position:sticky; top:40px; }
.book-text .statement { font-size:clamp(36px, 4.4vw, 72px); }
.direct a { color:var(--lime); }
.form { grid-column:7 / 13; background:var(--paper); color:var(--ink); border-radius:var(--r); padding:clamp(24px, 3vw, 40px); }
.form p, .dark .form p { color:var(--ink-soft); }
.form-kicker { font-size:15px; color:var(--teal) !important; font-weight:500; }
.form h3 { font-size:clamp(26px, 2.4vw, 36px); margin:4px 0 22px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fields label { display:grid; gap:6px; font-size:14px; font-weight:500; }
.fields label:last-child { grid-column:1 / -1; }
.fields input { font:400 16px var(--sans); padding:13px 14px; border:1px solid #CFC8B4; border-radius:10px; background:#fff; color:var(--ink); caret-color:var(--teal); }
.fields input:focus { outline:2px solid var(--teal); outline-offset:0; border-color:transparent; }
.consent { font-size:14px; margin:18px 0; }
.form .btn { width:100%; justify-content:center; background:var(--forest); color:var(--on-dark); }
.status { margin-top:12px; font-weight:500; }
.hp { position:absolute; left:-9999px; }

.motto { padding:clamp(80px, 10vw, 140px) var(--m); }
.motto p { font:600 clamp(44px, 8.6vw, 150px)/.92 var(--serif); letter-spacing:-.045em; color:var(--forest); }
.motto span { display:block; } .motto span:nth-child(2) { padding-left:.8em; } .motto span:nth-child(3) { padding-left:1.6em; color:var(--teal); }

/* 12. footer: the email is the headline, on a lime field */
.foot { background:var(--lime); color:var(--forest); padding:40px var(--m) 32px; min-height:90svh; display:grid; grid-template-rows:auto 1fr auto auto auto; gap:24px; }
.foot-top { display:flex; align-items:flex-start; gap:32px; font-size:15px; } .foot-top p { max-width:40ch; } .foot-top .link { margin-left:auto; white-space:nowrap; }
.foot-top img { width:110px; }
.foot-mail { align-self:end; font:600 clamp(36px, 7.4vw, 128px)/.95 var(--serif); letter-spacing:-.045em; text-decoration:none; word-break:normal; }
.foot-mail:hover { text-decoration:underline; text-decoration-thickness:.04em; text-underline-offset:.08em; }
.foot-cols { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--gap); margin-top:24px; font-size:15px; }
.foot-cols h4 { font:600 15px var(--sans); letter-spacing:0; margin-bottom:8px; }
.foot-cols a { display:block; text-decoration:none; padding:3px 0; } .foot-cols a:hover { text-decoration:underline; }
.foot-cols img { width:110px; }
.legal { font-size:13px; line-height:1.55; max-width:110ch; color:#22402F; }

/* motion: one loud moment (the shutter on the field strip) + quiet entrances; nothing hidden without JS */
@media (prefers-reduced-motion:no-preference) {
  .js .shutter { clip-path:inset(0 100% 0 0 round var(--r)); transition:clip-path 1100ms var(--ease-in-out) 250ms; }
  .js .shutter video { transform:scale(1.12); transition:transform 1500ms var(--ease-soft) 250ms; }
  .js .shutter.is-in { clip-path:inset(0 0 0 0 round var(--r)); } .js .shutter.is-in video { transform:none; }
  .js .reveal { opacity:0; transform:translateY(18px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .js .reveal.is-in { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .btn:active { transform:none; } .menu { animation:none; } }

/* phones */
@media (max-width:820px) {
  .links .link-quiet { display:none; }
  .hero { padding-top:96px; }
  .hero-line { font-size:clamp(40px, 12.4vw, 64px); }
  .row1 { flex-wrap:wrap; } .strip { flex-basis:100%; height:auto; aspect-ratio:2 / 1; order:2; margin:.12em 0; }
  .hero-foot, .grid, .feat-head, .feat, .problem-evidence, .rx-body, .crop-table, .qa, .book, .how-intro { grid-template-columns:1fr; }
  .hero-foot > *, .grid > *, .feat-head > *, .feat > *, .problem-evidence > *, .rx-body > *, .crop-table > *, .qa > *, .book > *, .how-intro > * { grid-column:1 / -1 !important; }
  .readout { grid-row:auto; }
  .side { padding-top:0; }
  .figures, .proof-figs { grid-template-columns:1fr 1fr; }
  .feat img { justify-self:start; } .feat .w-md { width:100%; } .feat .w-sq { width:70%; }
  .rx-card { grid-template-columns:1fr; } .rx-card svg { width:140px; }
  .closing, .dropcap, .partner-logos { margin-left:0; }
  .region ul { grid-template-columns:1fr 1fr; } .crop-table > div { grid-template-columns:1fr; }
  .p1 { width:46vw; left:4%; top:14%; } .p2 { width:42vw; right:4%; top:46%; } .p3 { display:none; }
  .book-text { position:static; }
  .fields { grid-template-columns:1fr; }
  .foot-top { flex-wrap:wrap; } .foot-cols { grid-template-columns:1fr 1fr; }
  .foot-mail { font-size:clamp(28px, 10vw, 56px); } .foot > * { min-width:0; }
  .verb p { right:var(--m); } .verb h3 { font-size:clamp(56px, 17vw, 96px); }
}

/* ===== inner pages (Scientific Evidence, Results, Team): Read mode - one calm column, the evidence beside it ===== */
.page-hero { padding:120px var(--m) clamp(64px, 8vw, 112px); display:grid; gap:28px; }
.page-title { font-size:clamp(40px, 5.4vw, 92px); line-height:1; letter-spacing:-.03em; max-width:16ch; }
.page-strip { display:block; height:clamp(120px, 16vw, 240px); border-radius:var(--r); }
.page-strip video, .page-strip img { width:100%; height:100%; object-fit:cover; }
.page-hero .hero-foot { align-items:start; }
.page-hero .hero-lede { grid-column:1 / 8; }
.page-hero .figures { grid-column:1 / -1; margin-top:24px; }
.page-hero .figures b { color:var(--teal); } .page-hero .figures span { color:var(--ink-soft); }
.read.alt { background:var(--paper-2); }
.read .prose { display:grid; gap:22px; margin:40px 0 0 calc((100% + var(--gap)) / 6); max-width:min(66ch, 100%); font-size:18px; color:var(--ink-soft); }
.prose p a, .refs a { color:var(--teal); text-underline-offset:.18em; }
.prose strong { color:var(--ink); font-weight:600; }
.prose figure { margin:12px 0; } .prose figure img { border-radius:var(--r); width:100%; }
.prose figcaption, .prose .fine { font-size:15px; color:var(--ink-soft); margin-top:10px; }
.prose .figures { grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); margin-top:24px; }
.prose .figures b { color:var(--teal); font-size:clamp(28px, 2.6vw, 40px); }
.prose .figures span { color:var(--ink-soft); font-size:15px; }
.figures small { display:block; margin-top:8px; font-size:13px; color:var(--teal); }
.prose .plain-list { font-size:18px; }
.chips { list-style:none; margin:4px 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.chips li { background:var(--forest); color:var(--on-dark); border-radius:999px; padding:8px 16px; font-size:15px; }
.refs { margin:0; padding-left:1.4em; display:grid; gap:14px; font-size:15px; line-height:1.55; }
.cta { text-align:left; display:grid; gap:24px; } .cta > * { grid-column:1 / -1; } .cta .statement { max-width:22ch; } .cta p { font-size:19px; max-width:50ch; }
/* comparison slider: the same two maps, one revealed over the other */
.compare { margin:12px 0; }
.cmp-frame { position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:1 / 1; max-width:620px; touch-action:pan-y; }
.cmp-frame img { width:100%; height:100%; object-fit:cover; }
.cmp-clip { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-line { position:absolute; top:0; bottom:0; left:var(--pos); width:3px; margin-left:-1.5px; background:var(--paper); }
.cmp-tag { position:absolute; top:14px; background:rgba(13,31,23,.78); color:var(--paper); font-size:13px; padding:6px 10px; border-radius:8px; }
.cmp-tag.l { left:14px; } .cmp-tag.r { right:14px; }
.cmp-range { display:flex; align-items:center; gap:14px; max-width:620px; margin-top:14px; font-size:15px; color:var(--ink); }
.cmp-range input { flex:1; accent-color:var(--teal); }
@media (max-width:820px) {
  .page-hero { padding-top:96px; } .page-hero .hero-lede { grid-column:1 / -1; }
  .read .prose { margin-left:0; font-size:17px; }
}
.read .prose > * { grid-column:1 / -1; }
.prose .pics { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:end; }
.prose .pics figure { margin:0; }

/* wide screens: content stays in a 1480px band, the grounds still run edge to edge */
.grid, .feat-head, .feat, .problem-evidence, .rx-body, .crop-table, .qa, .figures, .proof-figs, .hero-foot, .seen-grid { max-width:1480px; margin-left:auto; margin-right:auto; }
@media (min-width:821px) { .closing, .dropcap, .partner-logos, .read .prose { margin-left:calc(max(0px, (100% - 1480px) / 2) + (min(100%, 1480px) + var(--gap)) / 6) !important; } }
.feat .pair { grid-column:8 / 13; display:grid; grid-template-columns:1fr 1fr; gap:12px; } .feat .pair img { width:100%; border-radius:var(--r); aspect-ratio:1; object-fit:cover; }
/* seen from the air */
.seen { background:var(--paper-2); }
.seen-grid { margin-top:clamp(48px, 6vw, 80px); columns:3 300px; column-gap:var(--gap); }
.seen-card { break-inside:avoid; margin:0 0 var(--gap); background:#fff; border-radius:var(--r); overflow:hidden; }
.seen-card img { width:100%; }
.seen-card figcaption { padding:14px 16px 16px; font-size:15px; color:var(--ink-soft); }
.seen-card b { display:block; font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.01em; margin-bottom:4px; }
.foot-cols img { width:auto; height:56px; }
.partner-line img { height:1.9em; }

.feat .pair img { grid-column:auto; justify-self:stretch; }
.prose .pics img { aspect-ratio:1; object-fit:cover; }
@media (max-width:820px) { .seen-card img { aspect-ratio:4 / 3; object-fit:cover; } }
.read .prose { grid-template-columns:minmax(0, 1fr); }
@media (max-width:820px) { .figures > *, .proof-figs > * { min-width:0; } .figures b, .proof-figs b, .prose .figures b { font-size:clamp(24px, 7.4vw, 32px); overflow-wrap:anywhere; } }
@media (max-width:820px) { .prose .figures, .page-hero .figures { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important; } .read .prose, .read .prose > * { min-width:0; max-width:100%; } }

/* ---- 2026-10-31: shorter homepage ---- */
/* Fraunces' '&' is a decorative curl that reads as '@': headings show it in the plain font */
.amp { font-family:var(--sans); font-weight:500; font-style:normal; letter-spacing:0; }
/* the analysis partner, under the agronomy partner line */
.partner-line .powered { margin-top:18px; font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft, #3D4B43); max-width:none; }
.partner-line .powered img { height:28px; margin-left:10px; }
/* How it works: four steps side by side instead of four full screens */
.how { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--gap, 20px); padding:0 var(--m) clamp(56px, 7vw, 96px); }
.how > .how-intro { grid-column:1 / -1; padding-left:0; padding-right:0; }
.how .verb { min-height:clamp(300px, 34vw, 440px); border-radius:var(--r); overflow:hidden; align-content:end; }
.how .verb h3 { position:relative; top:auto; transform:none; align-self:end; text-align:left; font-size:clamp(34px, 3.4vw, 54px); padding:0 22px 10px; }
.how .verb p { position:relative; left:auto; right:auto; bottom:auto; margin:0 14px 14px; max-width:none; font-size:15px; }
@media (max-width:900px) { .how { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .how { grid-template-columns:1fr; } .how .verb { min-height:240px; } }