/* ============================================================
   Reese Farms — website (recommended direction)
   Mobile-first. Zilla Slab + Archivo · paper / ink / forest green.
   ============================================================ */
:root{
  --paper:#F1EBDC; --paper2:#E7DDC6; --panel:#F4EFE2;
  --ink:#211E17; --green:#2C3E2A; --green2:#22301F;
  --wheat:#C7B189; --line:#C9BFA6; --line2:#B7AC8E;
  --muted:#8a8268; --muted2:#6b6453;
  --slab:"Zilla Slab", Georgia, serif;
  --sans:"Archivo", system-ui, sans-serif;
  --wrap:1080px;        /* page max width */
  --read:680px;         /* text column max width */
}
*{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(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:78px; /* room for mobile call bar */
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------------- header ---------------- */
.hdr{
  position:sticky; top:0; z-index:30; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.hdr-in{
  max-width:var(--wrap); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px;
}
.wm{ font-family:var(--slab); font-weight:700; text-transform:uppercase;
     color:var(--green); line-height:.85; letter-spacing:.005em; font-size:21px; }
.hdr .wm{ margin-right:auto; }
.hdr-nav{ display:none; gap:22px; align-items:center; }
.hdr-nav a{ font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--ink); padding:6px 0; border-bottom:2px solid transparent; }
.hdr-nav a:hover{ color:var(--green); }
.hdr-nav a.on{ color:var(--green); border-bottom-color:var(--green); }
.hdr-call{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green); border:1.5px solid var(--green); padding:9px 14px; border-radius:2px;
}
.hdr-call:hover{ background:var(--green); color:var(--paper); }

/* mobile subnav strip */
.subnav{
  display:flex; gap:0; border-bottom:1px solid var(--line); background:var(--panel);
  overflow-x:auto; scrollbar-width:none; max-width:var(--wrap); margin:0 auto;
}
.subnav::-webkit-scrollbar{ display:none; }
.subnav a{
  flex:1; min-width:max-content; text-align:center; white-space:nowrap;
  font-family:var(--slab); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.02em;
  color:var(--muted2); padding:12px 18px; border-right:1px solid var(--line);
}
.subnav a:last-child{ border-right:0; }
.subnav a.on{ color:var(--green); background:var(--paper); }

/* ---------------- layout ---------------- */
.wrap{ max-width:var(--wrap); margin:0 auto; }
.sec{ padding:46px 20px; max-width:calc(var(--read) + 40px); margin:0 auto; }
.sec.wide{ max-width:var(--wrap); }
.rule{ height:1px; background:var(--line); border:0; max-width:var(--wrap); margin:0 auto; }

/* eyebrow */
.kick{ font-weight:600; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; display:flex; align-items:center; gap:12px; }
.kick.green{ color:var(--green); }
.kick.rule-after::after{ content:""; flex:1; height:1px; background:var(--line); }

/* headlines */
.h1{ font-family:var(--slab); font-weight:700; text-transform:uppercase; color:var(--ink);
     font-size:clamp(34px,9vw,58px); line-height:.98; letter-spacing:.004em; margin:0; }
.h1 .g{ color:var(--green); }
.h2{ font-family:var(--slab); font-weight:700; text-transform:uppercase; color:var(--green);
     font-size:clamp(22px,5vw,30px); line-height:1.02; margin:0; }
.lede{ font-size:clamp(17px,2.4vw,20px); line-height:1.55; margin:0; color:var(--ink); text-wrap:pretty; }
.p{ margin:0; text-wrap:pretty; }
.p.mut{ color:var(--muted2); }
.stack>*+*{ margin-top:18px; }
.stack.sm>*+*{ margin-top:11px; }

/* call to action */
.bigcall{ display:inline-flex; align-items:center; gap:12px; }
.bigcall .num{ font-family:var(--slab); font-weight:700; font-size:clamp(28px,6vw,38px); color:var(--green); line-height:1; white-space:nowrap; }
.btnrow{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{ font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
      padding:15px 22px; border-radius:2px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.btn.solid{ background:var(--green); color:var(--paper); }
.btn.solid:hover{ background:var(--green2); }
.btn.ghost{ background:transparent; color:var(--green); border:1.5px solid var(--green); }
.btn.ghost:hover{ background:var(--green); color:var(--paper); }
.btn.grow{ flex:1; min-width:140px; }

/* hero photo (full-bleed band) */
.heroimg{ width:100%; max-width:var(--wrap); margin:0 auto; }
.heroimg img{ width:100%; height:clamp(240px,46vw,520px); object-fit:cover; }
.cap{ font-size:12px; letter-spacing:.04em; color:var(--muted); font-style:italic; margin:8px 20px 0; max-width:var(--wrap); }
.cap.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------------- domain cards ---------------- */
.domains{ display:grid; grid-template-columns:1fr; gap:8px 32px; }
.domain{ display:flex; align-items:center; gap:16px; padding:22px 2px 4px; border-top:1.5px solid var(--line2); background:transparent; }
.domain:hover .dl{ color:var(--green2); }
.domain .dt{ flex:1; }
.domain .dl{ font-family:var(--slab); font-weight:700; text-transform:uppercase; color:var(--green); font-size:22px; line-height:1; margin:0 0 6px; }
.domain .dj{ font-weight:500; font-size:15px; margin:0; }
.domain .dn{ font-size:14px; color:var(--muted2); margin:7px 0 0; }
.domain .arr{ flex-shrink:0; color:var(--green); transition:transform .15s ease; }
.domain:hover .arr{ transform:translateX(4px); }
.domain.future{ background:transparent; }
.domain.future .dl{ color:var(--muted); }
.tag{ display:inline-block; font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line2); padding:3px 7px; border-radius:2px; margin-left:8px; vertical-align:middle; }

/* proof spine */
.proofs{ display:grid; grid-template-columns:1fr; gap:0; }
.proof{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.proof:last-child{ border-bottom:0; }
.proof .pn{ font-family:var(--slab); font-weight:700; font-size:17px; color:var(--green); width:32px; flex-shrink:0; }
.proof .ph{ font-family:var(--slab); font-weight:700; text-transform:uppercase; font-size:18px; margin:0 0 4px; }
.proof .pp{ font-size:14.5px; line-height:1.5; color:var(--muted2); margin:0; }

/* heritage lockup */
.heritage{ text-align:center; padding:58px 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.heritage .wm{ font-size:clamp(30px,6vw,44px); }
.heritage .est{ font-weight:600; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); margin:16px 0 0; }
.heritage .bar{ width:54px; height:2px; background:var(--green); margin:16px auto; }
.heritage .fam{ font-weight:600; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted2); margin:0; }

/* checklist */
.checks{ display:grid; gap:0; }
.check{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.check:last-child{ border-bottom:0; }
.check svg{ color:var(--green); flex-shrink:0; margin-top:2px; }
.check .ct{ font-size:15.5px; line-height:1.45; }
.check .ct b{ font-weight:700; }

/* callout */
.callout{ border:1.5px solid var(--green); padding:22px; background:var(--panel); }
.callout .ch{ font-family:var(--slab); font-weight:700; text-transform:uppercase; font-size:18px; color:var(--green); margin:0 0 8px; }
.callout .cp{ font-size:15px; line-height:1.5; margin:0; }

/* split (horse / cattle) */
.split{ display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line2); background:var(--panel); }
.split .sp{ padding:24px; border-bottom:1px solid var(--line); }
.split .sp:last-child{ border-bottom:0; }
.split .sp.flag{ background:var(--paper2); }
.tagn{ font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.flagstrip{ display:inline-block; font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; background:var(--green); color:var(--paper); padding:5px 10px; border-radius:2px; margin-bottom:10px; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.chip{ font-weight:600; font-size:13.5px; background:var(--paper); border:1px solid var(--line2); border-radius:2px; padding:10px 13px; }
.chip b{ font-family:var(--slab); font-weight:700; color:var(--green); }

/* equipment listings */
.listings{ display:grid; grid-template-columns:1fr; gap:18px; }
.listing{ border:1px solid var(--line2); background:var(--panel); }
.listing .lph{ width:100%; height:200px; background:var(--paper2); border-bottom:1px solid var(--line2);
               display:flex; align-items:center; justify-content:center; }
.listing .lph span{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.listing .lb{ padding:20px 22px; }
.listing .lhd{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.listing .lt{ font-family:var(--slab); font-weight:700; text-transform:uppercase; font-size:21px; margin:0; line-height:1.04; }
.listing .lm{ font-size:13px; color:var(--muted2); margin:6px 0 0; }
.listing .lpr{ font-family:var(--slab); font-weight:700; font-size:23px; color:var(--green); white-space:nowrap; }
.listing .lpv{ font-size:14px; line-height:1.45; margin:14px 0 0; padding-top:14px; border-top:1px solid var(--line); }
.listing .lpv b{ font-weight:700; }
.ltags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.ltag{ font-weight:600; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--green2);
       background:var(--paper); border:1px solid var(--line2); padding:6px 9px; border-radius:2px; display:inline-flex; align-items:center; gap:6px; }

/* footer */
.foot{ background:var(--ink); color:var(--paper); }
.foot-in{ max-width:var(--wrap); margin:0 auto; padding:40px 20px; }
.foot .wm{ color:var(--paper); }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
.foot p{ font-size:14.5px; line-height:1.65; color:rgba(241,235,220,.78); margin:14px 0 0; }
.foot p b{ color:var(--paper); font-weight:700; }
.foot .fcall{ font-family:var(--slab); font-weight:700; font-size:27px; color:var(--paper); margin:18px 0 0; display:inline-block; white-space:nowrap; }
.foot-nav{ display:flex; flex-direction:column; gap:10px; }
.foot-nav a{ font-weight:600; font-size:14.5px; color:rgba(241,235,220,.85); }
.foot-nav a:hover{ color:var(--paper); }
.foot-h{ font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--wheat); margin:0 0 4px; }

/* mobile sticky call bar */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--green); color:var(--paper);
  display:flex; align-items:center; gap:12px; padding:11px 16px;
  box-shadow:0 -8px 24px rgba(33,30,23,.16);
}
.callbar .cbn{ font-family:var(--slab); font-weight:700; font-size:19px; line-height:1; }
.callbar .cbs{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(241,235,220,.72); margin-top:5px; }
.callbar .cba{ margin-left:auto; display:flex; gap:8px; }
.callbar .cbb{ font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; padding:11px 16px; border-radius:2px; border:1.5px solid rgba(241,235,220,.5); color:var(--paper); }
.callbar .cbb.solid{ background:var(--paper); color:var(--green); border-color:var(--paper); }

/* ---------------- desktop ---------------- */
@media (min-width:720px){
  body{ padding-bottom:0; }
  .hdr-nav{ display:flex; }
  .subnav{ display:none; }
  .callbar{ display:none; }
  .sec{ padding:76px 24px; }
  .domains{ grid-template-columns:1fr 1fr 1fr; gap:10px 40px; }
  .domain.future{ grid-column:1 / -1; }
  .split{ grid-template-columns:1fr 1fr; }
  .split .sp{ border-bottom:0; border-right:1px solid var(--line); }
  .split .sp:last-child{ border-right:0; }
  .listings{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
  .hero-flex{ display:flex; align-items:center; gap:48px; }
  .hero-flex .stack{ flex:1; }
}
@media (min-width:980px){
  .sec{ padding:92px 24px; }
}

/* ============================================================
   Production additions (not visual — accessibility & launch hardening)
   ============================================================ */

/* skip link — appears only on keyboard focus, jumps past the nav */
.skip{
  position:absolute; left:8px; top:-48px; z-index:50;
  background:var(--green); color:var(--paper); font-weight:700; font-size:13px;
  letter-spacing:.04em; padding:10px 14px; border-radius:2px;
  transition:top .12s ease;
}
.skip:focus{ top:8px; }

/* visible keyboard focus ring on every interactive element
   (custom-styled links/buttons otherwise show none) */
a:focus-visible, button:focus-visible{
  outline:2.5px solid var(--green); outline-offset:2px; border-radius:2px;
}
.callbar a:focus-visible, .foot a:focus-visible, .bigcall:focus-visible{
  outline-color:var(--wheat);
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}