/* ZaminAI Field Atlas — design system (2026-11-07).
   Land intelligence. Scientific confidence. Human decisions.
   One stylesheet of tokens + components, prefixed `fa-`. Pages opt in with <body class="fa">; nothing here restyles a
   page that has not opted in. Fonts are self-hosted (SIL OFL, static/fonts/OFL-*.txt) — no third-party font request. */

@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* brand */
  --fa-forest: #123D32;        /* primary brand */
  --fa-ink: #182A31;           /* headings, navigation */
  --fa-leaf: #7CA98D;          /* agricultural accent (decorative / large text only on ivory) */
  --fa-leaf-strong: #3F6E52;   /* leaf for text-size use: 5.6:1 on ivory */
  --fa-ivory: #F7F6F0;         /* page background */
  --fa-white: #FFFFFF;         /* work surfaces */
  --fa-terracotta: #B87555;    /* restrained highlight (decorative) */
  --fa-terracotta-strong: #8E5134; /* terracotta for text: 5.5:1 on white */
  --fa-slate: #63757B;         /* brief palette slate: 4.45:1 on ivory — large text / non-text only */
  --fa-slate-text: #586A70;    /* secondary text: 5.2:1 on ivory, 4.9:1 on mist (WCAG AA) */
  --fa-line: #DCDDD3;
  --fa-line-strong: #C3C6B8;
  --fa-mist: #EEF0E8;
  /* semantic status — always paired with an icon/label, never colour alone */
  --fa-ok: #2F6B45;   --fa-ok-bg: #E6F0E7;
  --fa-warn: #8A5A00; --fa-warn-bg: #FBF0D9;
  --fa-err: #A2352B;  --fa-err-bg: #F8E4E1;
  --fa-info: #2B5C7A; --fa-info-bg: #E3EEF4;
  --fa-model: #6A4E8C; --fa-model-bg: #EFE9F5;   /* modelled / interpolated */
  --fa-demo: #7A5B13;  --fa-demo-bg: #F6EDD4;    /* demo data */
  /* type */
  --fa-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fa-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --fa-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --fa-step--1: clamp(.82rem, .80rem + .1vw, .875rem);
  --fa-step-0: clamp(.98rem, .95rem + .15vw, 1.0625rem);
  --fa-step-1: clamp(1.15rem, 1.08rem + .35vw, 1.35rem);
  --fa-step-2: clamp(1.4rem, 1.25rem + .7vw, 1.85rem);
  --fa-step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.75rem);
  --fa-step-4: clamp(2.3rem, 1.8rem + 2.6vw, 4.1rem);
  /* space & shape */
  --fa-gutter: clamp(16px, 4vw, 40px);
  --fa-max: 1200px;
  --fa-radius: 10px;
  --fa-radius-sm: 6px;
  --fa-shadow: 0 1px 2px rgba(24, 42, 49, .06), 0 8px 28px rgba(24, 42, 49, .08);
  --fa-shadow-lg: 0 24px 60px rgba(18, 61, 50, .18);
  --fa-ease: cubic-bezier(.2, .7, .2, 1);
  --fa-focus: 0 0 0 3px var(--fa-ivory), 0 0 0 5px var(--fa-forest);
  /* surfaces (dark mode remaps these) */
  --fa-bg: var(--fa-ivory);
  --fa-surface: var(--fa-white);
  --fa-text: var(--fa-ink);
  --fa-text-2: var(--fa-slate-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.fa {
    --fa-bg: #0F1A17; --fa-surface: #16241F; --fa-text: #ECEFE7; --fa-text-2: #A9B8B2;
    --fa-line: #2A3B35; --fa-line-strong: #3A4E46; --fa-mist: #1C2C26; --fa-focus: 0 0 0 3px #0F1A17, 0 0 0 5px var(--fa-leaf);
  }
}
:root[data-theme="dark"] body.fa {
  --fa-bg: #0F1A17; --fa-surface: #16241F; --fa-text: #ECEFE7; --fa-text-2: #A9B8B2;
  --fa-line: #2A3B35; --fa-line-strong: #3A4E46; --fa-mist: #1C2C26; --fa-focus: 0 0 0 3px #0F1A17, 0 0 0 5px var(--fa-leaf);
}

/* ---------- base ---------- */
body.fa { margin: 0; background: var(--fa-bg); color: var(--fa-text); font-family: var(--fa-sans); font-size: var(--fa-step-0);
  line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
:where(body.fa) *, :where(body.fa) *::before, :where(body.fa) *::after { box-sizing: border-box; }
:where(body.fa) :is(h1, h2, h3) { font-family: var(--fa-serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; color: var(--fa-text); margin: 0 0 .5em; text-wrap: balance; }
:where(body.fa) h1 { font-size: var(--fa-step-4); letter-spacing: -.02em; }
:where(body.fa) h2 { font-size: var(--fa-step-3); }
:where(body.fa) h3 { font-size: var(--fa-step-1); font-family: var(--fa-sans); font-weight: 650; letter-spacing: 0; line-height: 1.3; }
:where(body.fa) p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
:where(body.fa) a { color: var(--fa-forest); text-underline-offset: .18em; }
:where(body.fa) :focus-visible { outline: none; box-shadow: var(--fa-focus); border-radius: var(--fa-radius-sm); }
:where(body.fa) img { max-width: 100%; height: auto; }
:where(body.fa) :is(.fa-num, table, .fa-meta) { font-variant-numeric: tabular-nums lining-nums; }
:where(body.fa) .fa-meta { font-family: var(--fa-mono); font-size: .78rem; letter-spacing: .02em; color: var(--fa-text-2); }
:where(body.fa) .fa-eyebrow { font: 600 .78rem/1.2 var(--fa-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fa-leaf-strong); margin: 0 0 14px; }
:where(body.fa) .fa-wrap { width: 100%; max-width: var(--fa-max); margin: 0 auto; padding: 0 var(--fa-gutter); }
/* parked above the viewport (not far left/right: that would scroll sideways in right-to-left layouts) */
:where(body.fa) .fa-skip { position: absolute; inset-inline-start: 8px; top: -120px; z-index: 1000; background: var(--fa-forest); color: #fff; padding: 10px 14px; border-radius: var(--fa-radius-sm); }
:where(body.fa) .fa-skip:focus { top: 8px; }
/* the closed drawer waits just outside the inline edge; clip (not hidden: no scroll container, sticky header keeps working) */
html:has(> body.fa), body.fa { overflow-x: clip; }
[dir="rtl"] :where(body.fa) :is(h1, h2) { font-family: var(--fa-sans); letter-spacing: 0; }   /* serif is Latin-only */
@media (prefers-reduced-motion: reduce) { body.fa *, body.fa *::before, body.fa *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
body.fa.fa-scroll-lock { overflow: hidden; }

/* ---------- buttons ---------- */
.fa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border-radius: var(--fa-radius-sm); border: 1px solid transparent; font: 600 .95rem/1.2 var(--fa-sans); text-decoration: none;
  cursor: pointer; transition: background .18s var(--fa-ease), border-color .18s var(--fa-ease), color .18s var(--fa-ease), transform .18s var(--fa-ease); white-space: nowrap; }
.fa-btn:active { transform: translateY(1px); }
.fa-btn--primary { background: var(--fa-forest); color: #fff; } .fa-btn--primary:hover { background: #0C2E25; }
.fa-btn--secondary { background: var(--fa-surface); color: var(--fa-forest); border-color: var(--fa-line-strong); } .fa-btn--secondary:hover { border-color: var(--fa-forest); }
.fa-btn--quiet { background: transparent; color: var(--fa-text); } .fa-btn--quiet:hover { background: var(--fa-mist); }
.fa-btn--on-dark { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.fa-btn--on-dark:hover { background: rgba(255, 255, 255, .2); }
.fa-btn--light { background: var(--fa-ivory); color: var(--fa-forest); } .fa-btn--light:hover { background: #fff; }

/* ---------- header + mobile drawer ---------- */
.fa-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--fa-bg) 92%, transparent); backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--fa-line); }
.fa-header__in { display: flex; align-items: center; gap: 22px; min-height: 66px; }
.fa-brand { display: inline-flex; align-items: center; gap: 10px; font: 650 1.12rem/1 var(--fa-sans); color: var(--fa-text); text-decoration: none; letter-spacing: -.01em; }
.fa-brand img { width: 30px; height: 30px; }
.fa-brand > span { display: inline-flex; }
.fa-brand b { color: var(--fa-leaf-strong); font-weight: 650; }
.fa-nav { display: flex; gap: 4px; flex: 1; }
.fa-nav a { white-space: nowrap; padding: 8px 12px; border-radius: var(--fa-radius-sm); color: var(--fa-text); text-decoration: none; font-weight: 550; font-size: .94rem; }
.fa-nav a:hover { background: var(--fa-mist); }
.fa-nav a[aria-current="page"] { color: var(--fa-forest); box-shadow: inset 0 -2px 0 var(--fa-forest); border-radius: 0; }
.fa-header__actions { display: flex; align-items: center; gap: 10px; }
.fa-select { min-height: 40px; padding: 6px 30px 6px 10px; border: 1px solid var(--fa-line-strong); border-radius: var(--fa-radius-sm); background: var(--fa-surface)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2363757B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--fa-text); font: 500 .9rem var(--fa-sans); appearance: none; }
.fa-menu-btn { display: none; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border-radius: var(--fa-radius-sm);
  border: 1px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-text); font: 600 .92rem var(--fa-sans); cursor: pointer; }
.fa-menu-btn__bars { width: 18px; height: 12px; position: relative; }
.fa-menu-btn__bars::before, .fa-menu-btn__bars::after, .fa-menu-btn__bars span { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; }
.fa-menu-btn__bars::before { top: 0; } .fa-menu-btn__bars span { top: 5px; } .fa-menu-btn__bars::after { bottom: 0; }
.fa-drawer { position: fixed; inset: 0 0 0 auto; z-index: 90; width: min(86vw, 360px); background: var(--fa-surface); box-shadow: var(--fa-shadow-lg);
  transform: translateX(100%); visibility: hidden; transition: transform .26s var(--fa-ease), visibility 0s linear .26s;
  display: flex; flex-direction: column; padding: max(16px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
[dir="rtl"] .fa-drawer { inset: 0 auto 0 0; transform: translateX(-100%); }
.fa-drawer.is-open { transform: none; visibility: visible; transition: transform .26s var(--fa-ease); }
.fa-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fa-drawer__close { min-width: 44px; min-height: 44px; border: 0; border-radius: var(--fa-radius-sm); background: var(--fa-mist); color: var(--fa-text); font-size: 1.3rem; cursor: pointer; }
.fa-drawer nav { display: flex; flex-direction: column; gap: 2px; }
.fa-drawer nav a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--fa-radius-sm); color: var(--fa-text); text-decoration: none; font-weight: 550; font-size: 1.02rem; }
.fa-drawer nav a:hover, .fa-drawer nav a:focus-visible { background: var(--fa-mist); }
.fa-drawer__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--fa-line); display: grid; gap: 10px; }
.fa-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(15, 26, 23, .48); opacity: 0; visibility: hidden; transition: opacity .22s var(--fa-ease), visibility 0s linear .22s; }
.fa-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .22s var(--fa-ease); }
@media (max-width: 1100px) {
  .fa-nav, .fa-header__actions .fa-hide-mobile { display: none; }
  .fa-menu-btn { display: inline-flex; }
  .fa-header__actions { margin-inline-start: auto; }
}

/* ---------- sections ---------- */
.fa-section { padding: clamp(56px, 8vw, 104px) 0; }
.fa-section--white { background: var(--fa-surface); border-block: 1px solid var(--fa-line); }
.fa-section--forest { background: var(--fa-forest); color: #EAF1EC; }
.fa-section--forest h2, .fa-section--forest h3 { color: #fff; }
.fa-section--forest p { color: #CFE0D5; }
.fa-section__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.fa-section__head p { color: var(--fa-text-2); font-size: var(--fa-step-1); line-height: 1.5; }
.fa-section--forest .fa-section__head p { color: #CFE0D5; }
.fa-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.fa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .fa-grid--3, .fa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fa-grid--2, .fa-grid--3, .fa-grid--4 { grid-template-columns: 1fr; } }

/* ---------- panels, steps, status ---------- */
.fa-panel { background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: var(--fa-radius); padding: clamp(18px, 2.4vw, 26px); }
.fa-panel h3 { margin-bottom: .4em; }
.fa-panel p { color: var(--fa-text-2); margin-bottom: .6em; }
.fa-panel--flush { padding: 0; overflow: hidden; }
.fa-step { position: relative; padding-top: 22px; border-top: 2px solid var(--fa-forest); }
.fa-step__num { font: 600 .82rem var(--fa-mono); color: var(--fa-leaf-strong); letter-spacing: .08em; }
.fa-step h3 { margin-top: 6px; }
.fa-step p { color: var(--fa-text-2); }
.fa-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font: 650 .74rem/1.4 var(--fa-sans); letter-spacing: .04em; text-transform: uppercase; }
.fa-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fa-status--ok { color: var(--fa-ok); background: var(--fa-ok-bg); }
.fa-status--warn { color: var(--fa-warn); background: var(--fa-warn-bg); }
.fa-status--err { color: var(--fa-err); background: var(--fa-err-bg); }
.fa-status--info { color: var(--fa-info); background: var(--fa-info-bg); }
.fa-status--model { color: var(--fa-model); background: var(--fa-model-bg); }
.fa-status--demo { color: var(--fa-demo); background: var(--fa-demo-bg); }
.fa-status--planned { color: var(--fa-slate-text); background: var(--fa-mist); }
.fa-list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fa-list-check li { position: relative; padding-inline-start: 28px; }
.fa-list-check li::before { content: ""; position: absolute; inset-inline-start: 0; top: .42em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--fa-ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%232F6B45' stroke-width='1.8'/%3E%3C/svg%3E") center no-repeat; }

/* ---------- contour motif ---------- */
.fa-contours { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%237CA98D' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M-20 380c80-40 140-10 210-50s90-120 170-130 120 40 140 20'/%3E%3Cpath d='M-20 410c90-40 150-5 225-48s100-125 175-132 110 46 120 30'/%3E%3Cpath d='M-20 440c95-36 160 0 240-46s110-130 180-136 100 52 100 40'/%3E%3Cpath d='M-20 120c70 30 120-20 190 10s110 80 180 60 100-60 150-40'/%3E%3Cpath d='M-20 90c80 28 130-25 200 6s120 86 190 62 90-66 130-46'/%3E%3Cpath d='M-20 60c90 24 140-30 210 2s130 92 200 64 80-72 110-54'/%3E%3C/g%3E%3C/svg%3E"); background-size: 480px; }

/* ---------- hero atlas (real satellite imagery, live Esri World Imagery tiles, attributed) ---------- */
.fa-hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: #1E2B22; }
.fa-hero__imagery { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.fa-hero__tiles { --t: 358px; position: absolute; display: grid; grid-template-columns: repeat(var(--cols, 6), var(--t)); top: 50%; left: 50%;
  transform: translate(-50%, -50%); direction: ltr; filter: saturate(.92) contrast(1.04); }   /* geographic order in every language; whole-pixel tiles: no seams from fractional scaling */
.fa-hero__tiles img { width: var(--t); height: var(--t); display: block; }
.fa-hero__shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 30, 24, .88) 0%, rgba(10, 30, 24, .70) 38%, rgba(10, 30, 24, .18) 72%, rgba(10, 30, 24, .30) 100%),
              linear-gradient(0deg, rgba(10, 30, 24, .55), rgba(10, 30, 24, 0) 40%); }
[dir="rtl"] .fa-hero__shade { transform: scaleX(-1); }
.fa-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: end; padding-block: clamp(72px, 12vw, 148px) clamp(64px, 7vw, 88px); }
.fa-hero h1 { color: #fff; max-width: 14ch; margin-bottom: 20px; }
.fa-hero__lede { font-size: var(--fa-step-1); line-height: 1.5; color: #E2ECE5; max-width: 52ch; margin-bottom: 30px; }
.fa-hero .fa-eyebrow { color: #B9D6C2; }
.fa-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fa-hero__links { margin-top: 22px; font-size: .92rem; color: #CFE0D5; }
.fa-hero__links a { color: #fff; }
.fa-hero__credit { position: absolute; right: 12px; bottom: 8px; font: 500 .7rem var(--fa-sans); color: rgba(255, 255, 255, .78); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
[dir="rtl"] .fa-hero__credit { right: auto; left: 12px; }
.fa-hero__card { justify-self: end; width: min(100%, 420px); background: rgba(247, 246, 240, .96); color: var(--fa-ink); border-radius: var(--fa-radius);
  box-shadow: var(--fa-shadow-lg); padding: 20px 22px; backdrop-filter: blur(8px); }
.fa-hero__card h2 { font: 650 1.02rem/1.3 var(--fa-sans); color: var(--fa-ink); margin: 0 0 4px; }
.fa-hero__card .fa-meta { color: #4F6268; }
@media (max-width: 960px) { .fa-hero__in { grid-template-columns: 1fr; align-items: start; } .fa-hero__card { justify-self: start; }
  .fa-hero__shade { background: linear-gradient(180deg, rgba(10, 30, 24, .80) 0%, rgba(10, 30, 24, .62) 55%, rgba(10, 30, 24, .82) 100%); } }

/* ---------- footer ---------- */
.fa-footer { background: var(--fa-ink); color: #C9D3D0; padding: 56px 0 32px; font-size: .92rem; }
.fa-footer a { color: #E9EFEC; text-decoration: none; } .fa-footer a:hover { text-decoration: underline; }
.fa-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.fa-footer h4 { font: 650 .78rem var(--fa-sans); letter-spacing: .12em; text-transform: uppercase; color: #8FA79D; margin: 0 0 12px; }
.fa-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fa-footer__base { margin-top: 40px; padding-top: 20px; border-top: 1px solid #2D4148; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; color: #9FB0AA; }
.fa-footer .fa-brand { color: #fff; } .fa-footer .fa-brand > span { display: inline-flex; }
.fa-footer .fa-brand b { color: var(--fa-leaf); }
@media (max-width: 760px) { .fa-footer__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- forms ---------- */
.fa-field { display: grid; gap: 6px; }
.fa-field label { font-weight: 600; font-size: .9rem; }
.fa-input, .fa-textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--fa-line-strong); border-radius: var(--fa-radius-sm); background: var(--fa-surface); color: var(--fa-text); font: inherit; }
.fa-input:focus, .fa-textarea:focus, .fa-select:focus { outline: none; border-color: var(--fa-forest); box-shadow: var(--fa-focus); }
.fa-help { font-size: .84rem; color: var(--fa-text-2); }

/* ---------- utilities ---------- */
.fa-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fa-muted { color: var(--fa-text-2); }
.fa-center { text-align: center; }
.fa-stack > * + * { margin-top: var(--fa-stack, 14px); }