/* =========================================================================
   Farmers First Inc. — design system

   Rebuilt 2026-08-01 against the real logo (navy #062539, grey #BBBBBB, white:
   a hen and a pig over cupped hands cradling a barn, "Our Story").

   The previous system was an industrial "parts counter" — amber on black, hard
   2px rules, stamped offset shadows, hazard tape, condensed uppercase. It read
   as tough. The brand isn't tough; it's protective and quietly certain.

   So: navy instead of black, serif instead of condensed caps, sentence case
   instead of shouting, hairlines instead of bars, soft shadows instead of
   stamps, and one restrained warm accent. Confidence without volume.
   ========================================================================= */

/* ---- fonts (latin subset, self-hosted) ---- */
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/lora-500.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/lora-600.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/lora-700.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-700.woff2') format('woff2')}

:root{
  /* straight off the logo */
  --navy:      #062539;
  --navy-2:    #0E3450;
  --navy-3:    #17466A;
  --mist:      #BBBBBB;

  /* paper — warm, soft, never clinical white */
  --paper:     #F8F7F4;
  --paper-2:   #F1EFEA;
  --paper-3:   #E6E3DC;

  /* text — navy-tinted, never pure black */
  --ink:       #17293A;
  --ink-soft:  #4A5D6E;
  --ink-mute:  #74828E;

  /* one warm accent — the yellow off the Feed Caddy badge (#DEC60C), so the
     highlight colour on the site is the colour already on his product. */
  --wheat:     #E3C51A;   /* fills: buttons, bars, rules */
  --wheat-hi:  #FFDC4A;   /* on dark grounds — nav, numbers, links */
  --wheat-dk:  #7A6704;   /* on light paper — dark enough to read as text */

  --line:      rgba(23,41,58,.13);
  --line-soft: rgba(23,41,58,.07);
  --line-inv:  rgba(248,247,244,.16);

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --body:  'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r:    10px;
  --r-sm: 6px;
  --r-lg: 18px;

  --sh-1: 0 1px 2px rgba(6,37,57,.05), 0 2px 8px rgba(6,37,57,.05);
  --sh-2: 0 2px 6px rgba(6,37,57,.06), 0 10px 28px rgba(6,37,57,.08);

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
}

/* ---- reset-ish ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17.5px; line-height:1.68;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4,h5{margin:0; font-family:var(--serif); font-weight:600;
  line-height:1.14; letter-spacing:-.011em; color:var(--navy)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--wheat); outline-offset:3px; border-radius:2px}

/* ---- layout ---- */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.wrap--narrow{max-width:820px}
.sect{padding-block:clamp(56px,8vw,110px)}
.sect--tight{padding-block:clamp(40px,5vw,68px)}
.band{background:var(--navy); color:rgba(248,247,244,.88)}
.band h1,.band h2,.band h3,.band h4{color:#fff}
.band--field{background:var(--navy-2); color:rgba(248,247,244,.88)}
.band--field h2,.band--field h3{color:#fff}
.band--bone2{background:var(--paper-2)}
.hazard{height:1px; background:var(--line); border:0}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--wheat);
  color:var(--navy); padding:10px 16px; border-radius:var(--r-sm)}

/* ---- type scale ---- */
.d1{font-size:clamp(2.5rem,5.6vw,4.3rem); font-weight:600}
.d2{font-size:clamp(1.95rem,3.9vw,3.05rem); font-weight:600}
.d3{font-size:clamp(1.55rem,2.7vw,2.15rem); font-weight:600}
.d4{font-size:clamp(1.22rem,1.9vw,1.5rem); font-weight:600}
.lede{font-size:clamp(1.08rem,1.55vw,1.24rem); line-height:1.62; color:var(--ink-soft)}
.band .lede, .band--field .lede{color:rgba(248,247,244,.76)}
.small{font-size:.95rem}
.muted{color:var(--ink-mute)}
.band .muted{color:rgba(248,247,244,.55)}

/* the eyebrow — letterspaced sans, a quiet label rather than a stencil */
.eyebrow{
  font-family:var(--body); font-size:.76rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--wheat-dk);
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
}
.eyebrow::before{content:""; width:20px; height:1px; background:var(--wheat); flex:none}
.band .eyebrow, .band--field .eyebrow{color:var(--wheat-hi)}
.band .eyebrow::before, .band--field .eyebrow::before{background:var(--wheat-hi)}

/* ---- light panels declare their own colour (see the note in the header) ---- */
.card,.fig,.step,.tier,.region,.spec,.note,.demo-note,.faq,.notice,.form,
.steps,.lines,.lineitem{color:var(--ink)}
.steps,.lines{background:transparent}
.band .note{background:rgba(255,255,255,.05); color:rgba(248,247,244,.86);
  border-color:var(--line-inv)}
.band .note h3{color:#fff}
.tier--lead{color:rgba(248,247,244,.88)}
.tier--lead h3{color:#fff}
.spec thead th{color:#fff}

/* ---- the chip ---- */
.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--body); font-size:.74rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  padding:5px 11px; background:rgba(227,197,26,.14); color:var(--wheat-dk);
  border:1px solid rgba(227,197,26,.3); border-radius:100px; white-space:nowrap;
}
.tag--ghost{background:transparent; color:var(--ink-mute); border-color:var(--line)}
.band .tag--ghost{color:rgba(248,247,244,.7); border-color:var(--line-inv)}
.tag--ink{background:var(--navy); color:#fff; border-color:var(--navy)}
.tag--soft{background:var(--paper-2); color:var(--ink-soft); border-color:transparent}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--body); font-weight:600; font-size:1rem;
  letter-spacing:.005em; text-decoration:none;
  padding:13px 26px; border:1px solid transparent; border-radius:100px;
  background:var(--navy); color:#fff; cursor:pointer;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
  box-shadow:var(--sh-1);
}
.btn:hover{background:var(--navy-3); box-shadow:var(--sh-2); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink); box-shadow:none}
.btn--ghost:hover{background:rgba(23,41,58,.04); border-color:var(--ink-mute);
  box-shadow:none; transform:none}
.band .btn, .band--field .btn, .hero .btn, .phdr .btn{background:var(--wheat); color:var(--navy)}
.band .btn:hover, .band--field .btn:hover, .hero .btn:hover, .phdr .btn:hover{background:var(--wheat-hi); color:var(--navy)}
.band .btn--ghost, .band--field .btn--ghost, .hero .btn--ghost, .phdr .btn--ghost{
  background:transparent; border-color:rgba(248,247,244,.35); color:#fff;
}
.band .btn--ghost:hover, .band--field .btn--ghost:hover,
.hero .btn--ghost:hover, .phdr .btn--ghost:hover{background:rgba(255,255,255,.08); border-color:#fff}
.btn--lg{font-size:1.08rem; padding:16px 32px}

/* ---- top strip ---- */
.strip{background:var(--navy); color:rgba(248,247,244,.62); font-size:.78rem;
  letter-spacing:.03em; border-bottom:1px solid rgba(255,255,255,.07)}
.strip__in{display:flex; align-items:center; gap:16px; min-height:38px; flex-wrap:wrap}
.strip a{text-decoration:none; color:var(--wheat-hi); font-weight:600}
.strip__sep{opacity:.28}

/* ---- header ---- */
.hdr{position:sticky; top:0; z-index:60; background:rgba(248,247,244,.94);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
.hdr__bar{display:flex; align-items:center; gap:20px; min-height:78px}
.hdr__brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
/* The logo carries the name on its own now, so it has to be big enough to
   be read as one. clamp stops it swallowing the header on a phone. */
.hdr__logo{height:clamp(64px,10vw,140px); width:auto}
.hdr__mark{font-family:var(--serif); font-weight:600; font-size:1.24rem; line-height:1.05;
  color:var(--navy); letter-spacing:-.015em}
.hdr__mark span{display:block; font-family:var(--body); font-size:.62rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); margin-top:3px}
.hdr__nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.hdr__nav a{
  font-family:var(--body); font-weight:600; font-size:.93rem;
  text-decoration:none; padding:9px 11px; color:var(--ink-soft);
  border-radius:100px; transition:background .16s ease, color .16s ease;
  white-space:nowrap;   /* seven items must not wrap the header to two lines */
}
.hdr__nav a:hover{color:var(--navy); background:rgba(23,41,58,.05)}
.hdr__nav a[aria-current]{color:var(--navy); background:rgba(227,197,26,.14)}
.hdr__cta{margin-left:8px; padding:11px 18px !important; white-space:nowrap; background:var(--navy);
  color:#fff !important; box-shadow:var(--sh-1)}
.hdr__cta:hover{background:var(--navy-3) !important; color:#fff !important}
.hdr__toggle{display:none; margin-left:auto; background:transparent;
  border:1px solid var(--line); color:var(--ink); padding:9px 15px;
  border-radius:100px; font-weight:600; cursor:pointer}

/* ---- hero ---- */
.hero{position:relative; background:var(--navy); color:rgba(248,247,244,.88); overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 78% 18%, rgba(23,70,106,.55), transparent 62%)}
.hero__grid{position:relative; z-index:1; display:grid;
  grid-template-columns:1.04fr .96fr; gap:clamp(30px,4.4vw,64px);
  align-items:center; padding-block:clamp(56px,8vw,104px)}
.hero__kicker{font-family:var(--body); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--wheat-hi); margin:0 0 20px}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.15rem); color:#fff; font-weight:600}
.hero h1 em{font-style:normal; color:var(--wheat-hi)}
.hero__lede{margin-top:22px; max-width:42ch}
.hero__acts{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap}
.hero__media{position:relative}
.hero__media img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 62%;
  border-radius:var(--r-lg); box-shadow:0 24px 60px rgba(0,0,0,.35);
  filter:saturate(.82) contrast(1.02)}
.hero__cap{position:absolute; left:16px; bottom:16px; right:16px;
  background:rgba(6,37,57,.78); backdrop-filter:blur(6px);
  padding:9px 14px; border-radius:100px; font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(248,247,244,.9); text-align:center; margin:0}

/* ---- ticker ---- */
.ticker{background:var(--paper-2); color:var(--ink-soft);
  border-block:1px solid var(--line); overflow:hidden; padding-block:12px}
.ticker__in{display:flex; width:max-content; animation:slide 58s linear infinite}
.ticker span{font-size:.9rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding-inline:22px; white-space:nowrap;
  border-right:1px solid var(--line)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__in{animation:none}}

/* ---- the call band ---- */
.callband{border-block:1px solid var(--line)}
.callband--amber{background:var(--paper-2); color:var(--ink)}
.callband--ink{background:var(--navy); color:rgba(248,247,244,.8); border-color:transparent}
.callband--field{background:var(--navy-2); color:rgba(248,247,244,.8); border-color:transparent}
.callband__in{display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,2.4vw,30px); flex-wrap:wrap; padding-block:clamp(22px,3vw,34px);
  text-align:center}
.callband__line{margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.08rem,1.8vw,1.4rem); font-style:italic}
.callband--ink .callband__line, .callband--field .callband__line{color:rgba(255,255,255,.9)}
.callband__num{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.35rem); line-height:1; white-space:nowrap;
  color:var(--navy);
}
.callband--ink .callband__num, .callband--field .callband__num{color:var(--wheat-hi)}
.callband__num:hover{text-decoration:underline; text-underline-offset:7px;
  text-decoration-thickness:1.5px}
.callband__ico{font-size:.62em; opacity:.6}
.callband__who{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6}

/* ---- USA dealer call-out ---- */
.dealerband{background:var(--navy-2); color:rgba(248,247,244,.85)}
.dealerband__in{padding-block:clamp(44px,6vw,78px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px}
.dealerband__h{color:#fff; max-width:22ch}
.dealerband__p{max-width:56ch; color:rgba(248,247,244,.76); margin:0}

/* ---- business line list ---- */
.lines{display:grid; gap:14px}
.lineitem{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,2.4vw,30px);
  align-items:baseline; padding:clamp(22px,2.8vw,30px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; box-shadow:var(--sh-1);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease}
.lineitem:hover{box-shadow:var(--sh-2); transform:translateY(-2px);
  border-color:rgba(227,197,26,.4)}
.lineitem__no{font-family:var(--serif); font-weight:600; font-size:1.35rem; line-height:1;
  color:var(--wheat); min-width:2ch}
.lineitem__k{font-family:var(--body); font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-mute);
  display:block; margin-bottom:7px}
.lineitem h3{font-size:clamp(1.2rem,2vw,1.55rem); margin-bottom:8px}
.lineitem p{font-size:1rem; color:var(--ink-soft); margin:0; max-width:62ch}
.lineitem__reach{font-size:.78rem; letter-spacing:.06em; color:var(--ink-mute);
  white-space:nowrap; text-align:right}
@media (max-width:760px){
  .lineitem{grid-template-columns:auto 1fr}
  .lineitem__reach{grid-column:2; text-align:left; margin-top:10px}
}

/* ---- the belief ---- */
.belief{max-width:60ch; margin-inline:auto; text-align:center}
.belief p{font-family:var(--serif); font-weight:500;
  font-size:clamp(1.25rem,2.5vw,1.85rem); line-height:1.42; margin-bottom:.8em;
  color:#fff}
.belief__close{font-family:var(--body) !important; font-weight:400 !important;
  font-size:1.05rem !important; line-height:1.68 !important;
  color:rgba(248,247,244,.66) !important; margin-top:1.6em !important}
.belief .eyebrow{justify-content:center}

/* ---- stats ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{padding:clamp(20px,2.4vw,28px); background:rgba(255,255,255,.05);
  border:1px solid var(--line-inv); border-radius:var(--r)}
.stat__n{font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.8vw,2.9rem);
  line-height:1; color:var(--wheat-hi)}
.stat__n sup{font-size:.42em; vertical-align:super; margin-left:2px}
.stat__l{margin:12px 0 0; font-size:.95rem; line-height:1.5; color:rgba(248,247,244,.68)}

/* ---- cards ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:16px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column; text-decoration:none; box-shadow:var(--sh-1);
  transition:box-shadow .2s ease, transform .2s ease; overflow:hidden}
.card:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.card__top{padding:16px 20px 0; display:flex; justify-content:space-between;
  gap:10px; align-items:flex-start}
.card__sku{font-size:.76rem; letter-spacing:.07em; color:var(--ink-mute); font-weight:600}
.card__body{padding:10px 20px 20px}
.card h3{font-size:1.22rem; margin-bottom:8px}
.card__desc{font-size:.97rem; color:var(--ink-soft); margin:0}
.card__foot{margin-top:auto; padding:13px 20px; border-top:1px solid var(--line);
  background:var(--paper); font-size:.8rem; letter-spacing:.03em;
  color:var(--ink-mute); display:flex; justify-content:space-between; gap:10px;
  align-items:center}

/* ---- spec table ---- */
.spec{width:100%; border-collapse:separate; border-spacing:0; font-size:1rem;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.spec caption{text-align:left; font-size:.78rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-mute); padding-bottom:12px; font-weight:600}
.spec th,.spec td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-soft)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec thead th{background:var(--navy); font-family:var(--serif); font-weight:600;
  font-size:1.02rem; border-bottom:0}
.spec tbody th{background:var(--paper); font-weight:600; width:36%; color:var(--ink)}
.spec td{color:var(--ink-soft)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---- steps ---- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.step{padding:clamp(22px,2.6vw,30px); background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-1)}
.step__n{font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1;
  color:var(--wheat)}
.step h3{font-size:1.16rem; margin:12px 0 8px}
.step p{font-size:.97rem; color:var(--ink-soft); margin:0}
.band .step, .band--field .step{background:rgba(255,255,255,.05);
  border-color:var(--line-inv); box-shadow:none; color:rgba(248,247,244,.85)}
.band .step h3, .band--field .step h3{color:#fff}
.band .step p, .band--field .step p{color:rgba(248,247,244,.7)}
.band .step__n, .band--field .step__n{color:var(--wheat-hi)}

/* ---- tiers ---- */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.tier{border:1px solid var(--line); border-radius:var(--r); background:#fff;
  display:flex; flex-direction:column; box-shadow:var(--sh-1); overflow:hidden}
.tier--lead{background:var(--navy); border-color:var(--navy)}
.tier__hd{padding:18px 22px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:10px}
.tier--lead .tier__hd{border-color:var(--line-inv)}
.tier__hd h3{font-size:1.32rem}
.tier__bd{padding:18px 22px; flex:1}
.tier__thresh{font-size:.85rem; color:var(--ink-mute); margin-bottom:14px}
.tier--lead .tier__thresh{color:var(--wheat-hi)}
.tier ul{list-style:none; margin:0; padding:0}
.tier li{padding:8px 0 8px 22px; position:relative; font-size:.97rem;
  border-bottom:1px solid var(--line-soft); color:var(--ink-soft)}
.tier--lead li{border-color:var(--line-inv); color:rgba(248,247,244,.82)}
.tier li:last-child{border-bottom:0}
.tier li::before{content:""; position:absolute; left:0; top:15px; width:10px; height:1.5px;
  background:var(--wheat)}
.tier li.is-off{color:var(--ink-mute); opacity:.65}
.tier li.is-off::before{background:var(--line)}

/* ---- regions ---- */
.regions{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.region{border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:24px; text-decoration:none; display:block; box-shadow:var(--sh-1);
  transition:box-shadow .2s ease, transform .2s ease}
.region:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.region__ab{font-family:var(--serif); font-weight:600; font-size:1.9rem; line-height:1;
  color:var(--wheat)}
.region h3{font-size:1.16rem; margin:10px 0 6px}
.region p{font-size:.93rem; color:var(--ink-soft); margin:0}

/* ---- figures ---- */
.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.fig{margin:0; border-radius:var(--r); background:#fff; border:1px solid var(--line);
  overflow:hidden; box-shadow:var(--sh-1)}
.fig img{width:100%; aspect-ratio:4/3; object-fit:cover}
.fig figcaption{padding:14px 16px; font-size:.93rem; line-height:1.5;
  color:var(--ink-soft); background:#fff}

/* ---- note / callout ---- */
.note{border:1px solid var(--line); border-left:3px solid var(--wheat);
  border-radius:var(--r); background:#fff; padding:22px 24px; box-shadow:var(--sh-1)}
.note h3{font-size:1.18rem; margin-bottom:8px}

/* the demo-data disclosure — informative, not a warning label */
.demo-note{background:rgba(227,197,26,.09); border:1px solid rgba(227,197,26,.28);
  border-radius:var(--r); padding:16px 20px; font-size:.93rem; color:var(--ink-soft);
  line-height:1.6}
.demo-note b{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  display:block; margin-bottom:5px; color:var(--wheat-dk)}

/* ---- forms ---- */
.form{display:grid; gap:18px; grid-template-columns:1fr 1fr}
.field{display:flex; flex-direction:column; gap:7px}
.field--wide{grid-column:1/-1}
.field label{font-size:.83rem; font-weight:600; letter-spacing:.02em; color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; padding:13px 15px; background:#fff;
  border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm); width:100%;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;
  border-color:var(--wheat); box-shadow:0 0 0 3px rgba(227,197,26,.15)}
.hp{position:absolute; left:-9999px}
.form__note{grid-column:1/-1; font-size:.88rem; color:var(--ink-mute)}
.notice{border:1px solid var(--line); border-left:3px solid; border-radius:var(--r);
  padding:16px 20px; margin-bottom:24px; background:#fff}
.notice--ok{border-left-color:#3E7D52; background:#F0F6F1}
.notice--err{border-left-color:#A8443A; background:#FBF0EE}

/* ---- footer ---- */
.ftr{background:var(--navy); color:rgba(248,247,244,.66); font-size:.97rem}
.ftr__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
  padding-block:clamp(48px,6vw,72px)}
.ftr h4{font-family:var(--serif); font-weight:600; font-size:1.06rem; color:#fff;
  margin-bottom:16px}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{padding:5px 0}
.ftr a{text-decoration:none; color:rgba(248,247,244,.66)}
.ftr a:hover{color:var(--wheat-hi)}
.ftr__logo{height:96px; width:auto; margin-bottom:18px}
.ftr__legal{border-top:1px solid var(--line-inv); padding-block:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.8rem; color:rgba(248,247,244,.4)}

/* ---- interior page header ---- */
.phdr{background:var(--navy); color:rgba(248,247,244,.85);
  padding-block:clamp(48px,6vw,86px); position:relative; overflow:hidden}
.phdr::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 90% at 85% 10%, rgba(23,70,106,.5), transparent 60%)}
.phdr > *{position:relative; z-index:1}
.phdr h1{font-size:clamp(2.1rem,4.4vw,3.5rem); color:#fff; max-width:20ch; font-weight:600}
.phdr .lede{margin-top:20px; max-width:60ch}
.crumbs{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(248,247,244,.45); margin-bottom:18px; font-weight:600}
.crumbs a{text-decoration:none; color:var(--wheat-hi)}

/* ---- prose ---- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:1.8em 0 .5em}
.prose h3{font-size:1.28rem; margin:1.6em 0 .4em}
.prose ul,.prose ol{padding-left:1.3em; margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--wheat-dk); text-underline-offset:3px}
.prose blockquote{margin:1.5em 0; padding-left:22px; border-left:2px solid var(--wheat);
  font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--ink-soft)}
.prose table{width:100%; border-collapse:collapse}
.prose td,.prose th{border:1px solid var(--line); padding:10px 13px}

/* ---- faq ---- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--navy);
  display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--body); font-weight:400;
  font-size:1.4rem; color:var(--wheat); flex:none; transition:transform .2s ease}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--navy-3)}
.faq__a{padding:0 0 22px; max-width:72ch; color:var(--ink-soft)}

/* ---- misc ---- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.6vw,56px);
  align-items:start}
.grid-2--media{align-items:center}
.stack-lg > * + *{margin-top:clamp(18px,2.2vw,28px)}
.rule{height:1px; background:var(--line); border:0; margin:0}
.center{text-align:center}
.mt-lg{margin-top:clamp(28px,3.4vw,44px)}

/* ---- responsive ---- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{order:-1}
  .stats{grid-template-columns:1fr 1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:1120px){
  .hdr__nav a{font-size:.88rem; padding:9px 9px}
}
@media (max-width:860px){
  .hdr__toggle{display:block}
  .hdr__nav{position:fixed; inset:116px 0 auto 0; background:var(--paper);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 0 20px;
    border-bottom:1px solid var(--line); display:none;
    max-height:calc(100dvh - 116px); overflow-y:auto; box-shadow:var(--sh-2)}
  .hdr__nav.is-open{display:flex}
  .hdr__nav a{padding:15px var(--gut); font-size:1.06rem; border-radius:0;
    border-bottom:1px solid var(--line-soft)}
  .hdr__cta{margin:16px var(--gut) 0; justify-content:center; border-radius:100px}
  .steps{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .stats{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  .hdr__logo{height:58px}
}



/* ---- back-office extras: phone capture + flow diagram ---- */
.ui--phone{max-width:320px;margin-inline:auto;border-radius:26px;border:9px solid #20242C;
  box-shadow:0 22px 50px rgba(6,37,57,.28)}
.ui--phone .ui__bar{border-radius:0}
.shot{background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--r-sm);
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:var(--ink-mute);font-size:.76rem;text-align:center;padding:12px}
.shot b{font-family:var(--serif);font-size:1.5rem;color:var(--navy);font-weight:600}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.flow div{padding:18px 16px;border-right:1px solid var(--line);position:relative}
.flow div:last-child{border-right:0}
.flow b{display:block;font-family:var(--serif);font-size:1rem;color:var(--navy);
  font-weight:600;margin-bottom:5px}
.flow span{font-size:.83rem;color:var(--ink-soft);line-height:1.45;display:block}
.flow i{font-style:normal;display:block;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wheat-dk);font-weight:600;margin-bottom:7px}
@media(max-width:760px){.flow div{border-right:0;border-bottom:1px solid var(--line)}
  .flow div:last-child{border-bottom:0}}
.sel{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--paper);margin-bottom:8px}
.sel i{font-style:normal;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:600;min-width:78px}
.sel b{font-weight:600;color:var(--navy)}
.sel .caret{margin-left:auto;color:var(--ink-mute)}


/* ---- hero results overlay ---------------------------------------------
   Profit rising, expenses falling, drawn over the hero footage. Deliberately
   NOT baked into the video: generators render text and charts as garbage, and
   a real overlay stays crisp at every screen size and can be edited later.
   -------------------------------------------------------------------- */
.results{
  position:absolute; left:18px; top:18px; z-index:3;
  background:rgba(6,37,57,.72); backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.14); border-radius:14px;
  padding:16px 18px; min-width:236px;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.results__t{
  font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(248,247,244,.55); margin:0 0 12px;
}
.rbar{display:grid; grid-template-columns:66px 1fr auto; gap:10px; align-items:center;
  margin-bottom:10px}
.rbar:last-of-type{margin-bottom:0}
.rbar__l{font-size:.76rem; font-weight:600; color:rgba(248,247,244,.82)}
.rbar__t{height:7px; border-radius:100px; background:rgba(255,255,255,.13); overflow:hidden}
.rbar__f{display:block; height:100%; border-radius:100px; width:0}
.rbar__f--up{background:linear-gradient(90deg,#4E9E6A,#7FD69B);
  animation:grow-up 2.6s cubic-bezier(.22,.9,.3,1) .5s forwards}
.rbar__f--down{background:linear-gradient(90deg,#C8871F,#E8A93C);
  width:88%; animation:shrink-down 2.6s cubic-bezier(.22,.9,.3,1) .5s forwards}
.rbar__v{font-family:var(--serif); font-weight:600; font-size:.92rem; min-width:34px;
  text-align:right}
.rbar__v--up{color:#7FD69B}
.rbar__v--down{color:#E8A93C}
.rbar__v span::after{content:attr(data-to)}
.results__why{margin:13px 0 0; padding-top:11px; border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--serif); font-style:italic; font-size:.84rem;
  color:rgba(248,247,244,.8)}
@keyframes grow-up{from{width:26%} to{width:92%}}
@keyframes shrink-down{from{width:88%} to{width:34%}}
@media (prefers-reduced-motion:reduce){
  .rbar__f--up{animation:none; width:92%}
  .rbar__f--down{animation:none; width:34%}
}
@media (max-width:1000px){
  .results{position:static; margin-top:16px; min-width:0}
}

/* ---- print ---- */
@media print{
  .hdr,.strip,.ticker,.ftr,.btn,.callband,.dealerband{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .band,.band--field,.phdr,.hero{background:#fff !important; color:#000 !important}
  .hero h1,.phdr h1,.band h2{color:#000 !important}
}

/* =========================================================================
   GLASS MODE — active only when assets/video/hero.mp4 exists (.has-bgvideo)

   The farm footage runs fixed behind the entire site and every panel becomes
   frosted glass floating over it. This inverts the light paper build: the page
   goes dark, text goes light, and nothing is opaque except where legibility
   demands it.

   Ordering matters — this block is last in the file so it wins without
   !important on anything but the handful of inline-styled headings.
   ========================================================================= */

/* ---- the footage + its scrim ---- */
.has-bgvideo .bgvideo{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.has-bgvideo .bgvideo video{
  width:100%; height:100%; object-fit:cover;
  opacity:1; filter:saturate(.86) contrast(1.02);
}
.has-bgvideo .bgvideo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(23,70,106,.35), transparent 60%),
    linear-gradient(180deg, rgba(4,26,41,.74) 0%, rgba(4,26,41,.82) 45%, rgba(4,26,41,.9) 100%);
}

/* ---- page + sections go transparent ---- */
.has-bgvideo{background:transparent}
.has-bgvideo body,
body.has-bgvideo{background:transparent; color:rgba(234,240,246,.84)}
.has-bgvideo .sect,
.has-bgvideo .sect--tight,
.has-bgvideo .band,
.has-bgvideo .band--field,
.has-bgvideo .band--bone2,
.has-bgvideo .hero,
.has-bgvideo .phdr{background:transparent}
.has-bgvideo .hero::after,
.has-bgvideo .phdr::after{background:none}
.has-bgvideo .band--bone2{background:rgba(255,255,255,.035)}
.has-bgvideo .band--field{background:rgba(9,40,62,.34)}

/* ---- type ---- */
.has-bgvideo h1,.has-bgvideo h2,.has-bgvideo h3,.has-bgvideo h4,.has-bgvideo h5{color:#fff}
.has-bgvideo p,.has-bgvideo li,.has-bgvideo td,.has-bgvideo span{color:inherit}
.has-bgvideo .lede{color:rgba(234,240,246,.78)}
.has-bgvideo .muted,.has-bgvideo .small.muted{color:rgba(234,240,246,.56)}
.has-bgvideo .eyebrow{color:var(--wheat-hi)}
.has-bgvideo .eyebrow::before{background:var(--wheat-hi)}
.has-bgvideo .hero h1,.has-bgvideo .phdr h1{
  text-shadow:0 2px 26px rgba(4,26,41,.8), 0 0 3px rgba(4,26,41,.5);
}
.has-bgvideo .hero__lede,.has-bgvideo .phdr .lede{text-shadow:0 1px 14px rgba(4,26,41,.7)}
.has-bgvideo [style*="color:var(--bone)"],
.has-bgvideo [style*="color:#fff"]{color:#fff !important}

/* ---- THE GLASS ---- */
.has-bgvideo .lineitem,
.has-bgvideo .card,
.has-bgvideo .step,
.has-bgvideo .tier,
.has-bgvideo .region,
.has-bgvideo .fig,
.has-bgvideo .note,
.has-bgvideo .stat,
.has-bgvideo .stage,
.has-bgvideo .ui,
.has-bgvideo .spec,
.has-bgvideo .ba,
.has-bgvideo .flow,
.has-bgvideo .five,
.has-bgvideo .notice{
  background:rgba(10,34,54,.44);
  backdrop-filter:blur(20px) saturate(155%);
  -webkit-backdrop-filter:blur(20px) saturate(155%);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 2px 6px rgba(0,0,0,.14), 0 16px 44px rgba(0,0,0,.26);
  color:rgba(234,240,246,.84);
}
.has-bgvideo .lineitem:hover,
.has-bgvideo .card:hover,
.has-bgvideo .region:hover{
  background:rgba(14,44,68,.56);
  border-color:rgba(255,220,74,.5);
  box-shadow:0 4px 10px rgba(0,0,0,.18), 0 22px 56px rgba(0,0,0,.34);
}
.has-bgvideo .lineitem p,.has-bgvideo .card__desc,.has-bgvideo .step p,
.has-bgvideo .region p,.has-bgvideo .stage p,.has-bgvideo .tier li,
.has-bgvideo .fig figcaption,.has-bgvideo .note p{color:rgba(234,240,246,.74)}
.has-bgvideo .lineitem__k,.has-bgvideo .lineitem__reach,.has-bgvideo .card__sku,
.has-bgvideo .tier__thresh,.has-bgvideo .card__foot{color:rgba(234,240,246,.58)}
.has-bgvideo .lineitem__no,.has-bgvideo .step__n,.has-bgvideo .region__ab,
.has-bgvideo .stat__n,.has-bgvideo .stage b{color:var(--wheat-hi); -webkit-text-stroke:0}
.has-bgvideo .stat__l{color:rgba(234,240,246,.72)}
.has-bgvideo .card__foot{background:rgba(255,255,255,.05); border-top-color:rgba(255,255,255,.12)}
.has-bgvideo .fig figcaption{background:rgba(255,255,255,.05)}
.has-bgvideo .tier--lead{background:rgba(20,58,88,.58); border-color:rgba(255,220,74,.45)}
.has-bgvideo .tier__hd{border-bottom-color:rgba(255,255,255,.13)}
.has-bgvideo .tier li{border-bottom-color:rgba(255,255,255,.09)}
.has-bgvideo .note{border-left:3px solid var(--wheat-hi)}

/* tables */
.has-bgvideo .spec th,.has-bgvideo .spec td,
.has-bgvideo .ba th,.has-bgvideo .ba td{border-bottom-color:rgba(255,255,255,.1)}
.has-bgvideo .spec thead th,.has-bgvideo .ba thead th{background:rgba(4,26,41,.6); color:#fff}
.has-bgvideo .spec tbody th,.has-bgvideo .ba tbody th{background:rgba(255,255,255,.05);
  color:rgba(234,240,246,.86)}
.has-bgvideo .spec td,.has-bgvideo .ba td{background:transparent; color:rgba(234,240,246,.8)}
.has-bgvideo .ba td{color:#fff}

/* app mock-ups on the back-office page */
.has-bgvideo .ui__bar{background:rgba(4,26,41,.62); border-bottom:1px solid rgba(255,255,255,.1)}
.has-bgvideo .row,.has-bgvideo .kpi,.has-bgvideo .sel,.has-bgvideo .bin,
.has-bgvideo .terr,.has-bgvideo .shot{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.13);
  color:rgba(234,240,246,.86);
}
.has-bgvideo .row b,.has-bgvideo .sel b,.has-bgvideo .kpi u,
.has-bgvideo .bin b,.has-bgvideo .terr b,.has-bgvideo .shot b{color:#fff}
.has-bgvideo .row span,.has-bgvideo .kpi i,.has-bgvideo .sel i,
.has-bgvideo .terr span,.has-bgvideo .ui__hd,.has-bgvideo .ui__note{color:rgba(234,240,246,.6)}
.has-bgvideo .ui__note{border-top-color:rgba(255,255,255,.12)}
.has-bgvideo .bar__t{background:rgba(255,255,255,.13)}
.has-bgvideo .flow div{border-right-color:rgba(255,255,255,.12)}
.has-bgvideo .flow b{color:#fff}
.has-bgvideo .flow span{color:rgba(234,240,246,.72)}
.has-bgvideo .five div{background:rgba(255,255,255,.05)}

/* header, strip, ticker, footer, call bands */
.has-bgvideo .hdr{background:rgba(4,26,41,.55);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.13)}
.has-bgvideo .hdr__mark{color:#fff}
.has-bgvideo .hdr__mark span{color:rgba(234,240,246,.55)}
.has-bgvideo .hdr__nav a{color:rgba(234,240,246,.8)}
.has-bgvideo .hdr__nav a:hover{color:#fff; background:rgba(255,255,255,.1)}
.has-bgvideo .hdr__nav a[aria-current]{color:#fff; background:rgba(255,220,74,.24)}
.has-bgvideo .hdr__cta{background:var(--wheat) !important; color:var(--navy) !important}
.has-bgvideo .hdr__cta:hover{background:var(--wheat-hi) !important; color:var(--navy) !important}
.has-bgvideo .hdr__logo{filter:none}
.has-bgvideo .hdr__toggle{color:#fff; border-color:rgba(255,255,255,.28)}
.has-bgvideo .strip{background:rgba(4,26,41,.6); border-bottom-color:rgba(255,255,255,.1);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.has-bgvideo .ticker{background:rgba(255,255,255,.07); border-block-color:rgba(255,255,255,.13);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:rgba(234,240,246,.82)}
.has-bgvideo .ticker span{border-right-color:rgba(255,255,255,.13)}
.has-bgvideo .ftr{background:rgba(4,26,41,.62);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-top:1px solid rgba(255,255,255,.12)}
.has-bgvideo .callband--amber{background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-block-color:rgba(255,255,255,.13); color:rgba(234,240,246,.86)}
.has-bgvideo .callband--amber .callband__line{color:#fff}
.has-bgvideo .callband--amber .callband__num{color:var(--wheat-hi)}
.has-bgvideo .callband--ink,.has-bgvideo .callband--field{background:rgba(4,26,41,.5);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
.has-bgvideo .dealerband{background:rgba(9,40,62,.44);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-block:1px solid rgba(255,255,255,.13)}

/* buttons, tags, faq, forms */
.has-bgvideo .btn{background:var(--wheat); color:var(--navy); border-color:transparent}
.has-bgvideo .btn:hover{background:var(--wheat-hi); color:var(--navy)}
.has-bgvideo .btn--ghost{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3);
  color:#fff; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.has-bgvideo .btn--ghost:hover{background:rgba(255,255,255,.16); border-color:#fff}
.has-bgvideo .tag{background:rgba(255,220,74,.2); color:var(--wheat-hi);
  border-color:rgba(255,220,74,.4)}
.has-bgvideo .tag--ghost{background:rgba(255,255,255,.06); color:rgba(234,240,246,.78);
  border-color:rgba(255,255,255,.2)}
.has-bgvideo .tag--soft{background:rgba(255,255,255,.08); color:rgba(234,240,246,.78)}
.has-bgvideo .tag--ink{background:rgba(4,26,41,.7); color:#fff; border-color:rgba(255,255,255,.2)}
.has-bgvideo .faq{border-top-color:rgba(255,255,255,.15)}
.has-bgvideo .faq details{border-bottom-color:rgba(255,255,255,.15)}
.has-bgvideo .faq summary{color:#fff}
.has-bgvideo .faq summary:hover{color:var(--wheat-hi)}
.has-bgvideo .faq__a{color:rgba(234,240,246,.76)}
.has-bgvideo .field label{color:rgba(234,240,246,.7)}
.has-bgvideo .field input,.has-bgvideo .field select,.has-bgvideo .field textarea{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.has-bgvideo .field input::placeholder,.has-bgvideo .field textarea::placeholder{
  color:rgba(234,240,246,.45)
}
.has-bgvideo .form__note{color:rgba(234,240,246,.6)}
.has-bgvideo .crumbs{color:rgba(234,240,246,.55)}
.has-bgvideo .prose a{color:var(--wheat-hi)}
.has-bgvideo .prose blockquote{color:rgba(234,240,246,.8)}
.has-bgvideo .belief__close{color:rgba(234,240,246,.66) !important}
.has-bgvideo .hero__cap{background:rgba(4,26,41,.72)}
.has-bgvideo .hero__media img{border:1px solid rgba(255,255,255,.18)}
.has-bgvideo .rule,.has-bgvideo .hazard{background:rgba(255,255,255,.13)}

/* ---- mobile: no fixed video (iOS jank + battery). Poster + navy instead. ---- */
@media (max-width:860px){
  .has-bgvideo .bgvideo video{display:none}
  .has-bgvideo .bgvideo{
    background:var(--navy) url('../img/hero-poster.jpg') center/cover no-repeat;
  }
  .has-bgvideo .bgvideo::after{background:linear-gradient(180deg,
    rgba(4,26,41,.86) 0%, rgba(4,26,41,.92) 100%)}
  /* backdrop-filter is expensive on phones — flatten to solid glass */
  .has-bgvideo .lineitem,.has-bgvideo .card,.has-bgvideo .step,.has-bgvideo .tier,
  .has-bgvideo .region,.has-bgvideo .fig,.has-bgvideo .note,.has-bgvideo .stat,
  .has-bgvideo .stage,.has-bgvideo .ui,.has-bgvideo .spec,.has-bgvideo .ba,
  .has-bgvideo .flow,.has-bgvideo .five{
    backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(10,34,54,.72);
  }
}
@media (prefers-reduced-motion:reduce){
  .has-bgvideo .bgvideo video{display:none}
  .has-bgvideo .bgvideo{background:var(--navy) url('../img/hero-poster.jpg') center/cover no-repeat}
}

/* sign-in link — the app is a real destination, so the site points at it */
.hdr__signin{
  font-family:var(--body); font-weight:600; font-size:.93rem; text-decoration:none;
  padding:9px 14px; margin-left:6px; border-radius:100px; white-space:nowrap;
  color:var(--ink-soft); border:1px solid var(--line);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.hdr__signin:hover{color:var(--navy); border-color:var(--ink-mute); background:rgba(23,41,58,.04)}
.has-bgvideo .hdr__signin{color:rgba(234,240,246,.85); border-color:rgba(255,255,255,.28)}
.has-bgvideo .hdr__signin:hover{color:#fff; background:rgba(255,255,255,.12); border-color:#fff}
@media (max-width:860px){
  .hdr__signin{margin:14px var(--gut) 0; text-align:center; display:block}
}

/* live/coming split on the back office page */
.stateline{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.stateline__dot{width:9px;height:9px;border-radius:50%;flex:none}
.stateline--live .stateline__dot{background:#4FD07E;box-shadow:0 0 0 4px rgba(79,208,126,.18)}
.stateline--soon .stateline__dot{background:var(--wheat)}
.stateline b{font-family:var(--body);font-size:.76rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase}
.stateline--live b{color:#2F7D4E}
.has-bgvideo .stateline--live b{color:#7FE3A3}
.stateline--soon b{color:var(--wheat-dk)}
.has-bgvideo .stateline--soon b{color:var(--wheat-hi)}
.soon{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.soon div{border:1px dashed var(--line);border-radius:var(--r);padding:18px 20px}
.has-bgvideo .soon div{border-color:rgba(255,255,255,.22)}
.soon b{display:block;font-family:var(--serif);font-weight:600;font-size:1.05rem;
  color:var(--navy);margin-bottom:5px}
.has-bgvideo .soon b{color:#fff}
.soon span{font-size:.92rem;color:var(--ink-soft)}
.has-bgvideo .soon span{color:rgba(234,240,246,.7)}

/* ---- grower quotes ------------------------------------------------------
   A short quote with a real name does more than a paragraph of description.
   Sized to be read at a glance, because that is the whole point of it. */
.quote{margin:0; padding:34px 0}
.quote__words{margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.35rem); line-height:1.22; letter-spacing:-.01em;
  color:var(--navy); text-wrap:balance}
.has-bgvideo .quote__words{color:#fff}
.quote__by{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-top:18px}
.quote__name{font-family:var(--body); font-weight:700; font-size:.98rem; color:var(--navy)}
.has-bgvideo .quote__name{color:#fff}
.quote__op,.quote__place{font-family:var(--body); font-size:.9rem; color:var(--ink-soft)}
.has-bgvideo .quote__op,.has-bgvideo .quote__place{color:rgba(234,240,246,.7)}
.quote__place::before{content:"\00b7"; margin-right:10px; color:var(--ink-mute)}

/* ---- inline video -------------------------------------------------------
   Same frame as a figure, because next to a photo it should read as the same
   kind of thing — something to look at, not a widget. */
/* Under the stats the video spans the content column, which at 1400px would be
   a 16:9 slab taller than the screen. Cap it so it reads as a clip to watch,
   not a billboard to scroll past. */
.vid-slot{max-width:860px}
.fig--video{margin:0}
.ff-video{display:block; width:100%; height:auto; border-radius:var(--r);
  background:#0b1620; aspect-ratio:16/9; object-fit:cover}