/* =====================================================================
   Aré Guḍi — editorial, photography-led stylesheet · LUXURY REVISION
   ---------------------------------------------------------------------
   Rev 2 brief: "too thick · bring out a luxury feel."
   Levers: Cormorant at LIGHT 300 weight, larger + airier; the serif
   carries lead paragraphs too; exact system espresso #3D2817 (not a
   muddy brown); hairline rules instead of 1.5px borders; NO shadows
   (per design system); wider mono tracking; far more negative space.
   Tokens mirror the Aré Guḍi design system (colors_and_type.css).
   Fonts: Georgia carries BOTH display + body across the whole site
   (no Nirmala / TAN-PEARL / Cormorant); Noto Sans Kannada renders the
   Kannada wordmark only; IBM Plex Mono is the data / eyebrow voice.
   ===================================================================== */

/* Type: Georgia carries display + body throughout (per brief); Noto Sans
   Kannada renders the Kannada wordmark; IBM Plex Mono is the data voice. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Kannada:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ------------------------------ tokens ------------------------------ */
:root{
  /* system palette — lightened canvas (rev 3) */
  --ivory:     #faf6ee;          /* NEW dominant canvas — light + airy */
  --peach:     #f2cdac;          /* now the warm accent / alternate band */
  --peach-deep:#eec39e;          /* one half-step for hover only */
  --cream:     #f5efe0;
  --cream-2:   #fbf6e8;
  --brown:     #3d2817;          /* espresso — headings, marks, key UI */
  --brown-deep:#2a1d12;          /* button hover */
  --charcoal:  #1f1a14;          /* body text — never pure black */
  --stone:     #8a7e6e;          /* captions, meta, secondary */
  --forest:    #2a4a3a;          /* status / links, scarce */
  --terracotta:#b85c3e;          /* biochar accent, scarce */
  --border:    #d4c4a8;

  /* derived hairlines — lighter, for luxury restraint */
  --line:      rgba(61,40,23,.14);
  --line-soft: rgba(61,40,23,.09);
  --line-cream:rgba(245,239,224,.22);
  --scrim:     rgba(24,15,8,.40);

  --display:Georgia,'Times New Roman',serif;
  --body:Georgia,'Noto Sans Kannada','Times New Roman',serif;
  --kannada:'Noto Sans Kannada',Georgia,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --maxw:1180px;
  --measure:60ch;
  --pad:clamp(22px,5.5vw,84px);
  --r-btn:4px;
  --r-card:8px;
  --r-tag:2px;
  --sec:clamp(76px,12vw,156px);   /* more air than rev 1 */
}

/* ------------------------------ reset ------------------------------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ivory); color:var(--charcoal);
  font-family:var(--body); font-size:17px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--brown); text-decoration:none; }
::selection{ background:var(--brown); color:var(--peach); }

/* ------------------------------ type -------------------------------- */
/* Light-weight Cormorant is the whole luxury move. */
h1,h2,h3{ font-family:var(--display); font-weight:300; line-height:1.04; color:var(--brown); letter-spacing:0; }
h1{ font-size:clamp(3.1rem,8vw,6.6rem); letter-spacing:-.012em; }
h2{ font-size:clamp(2.2rem,5vw,4rem); letter-spacing:-.008em; }
h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:400; line-height:1.14; }
em,i{ font-style:italic; }
h1 em,h2 em,h3 em{ font-style:italic; color:var(--brown); }
p{ max-width:var(--measure); }
strong{ color:var(--brown); font-weight:600; }
.kn{ font-family:var(--kannada); }

/* serif-led lead — editorial luxury */
.lead{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.45rem,2.5vw,2rem); line-height:1.38; letter-spacing:.002em;
  color:var(--brown); max-width:34ch;
}
.lead strong{ font-weight:500; }
.body-lead{ /* when a sans lead is needed for dense info */
  font-family:var(--body); font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.62;
  color:var(--charcoal); font-weight:400; max-width:54ch;
}

/* mono eyebrow / kicker — finer, wider tracking */
.eyebrow{
  font-family:var(--mono); font-weight:400; font-size:.7rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--stone);
  display:inline-flex; align-items:center; gap:.8rem; margin-bottom:1.6rem;
}
.eyebrow::before{ content:""; width:2rem; height:1px; background:var(--stone); opacity:.55; }
.eyebrow.plain::before{ display:none; }
.section-num{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--terracotta); }
.note{ font-size:.9rem; color:var(--stone); }
.caption{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); }

/* ----------------------------- layout ------------------------------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; }
.wrap.narrow{ max-width:880px; }
section{ padding-block:var(--sec); position:relative; }
.band{ background:var(--cream); }
.rule{ height:1px; background:var(--line); border:0; }
.stack > * + *{ margin-top:1.3rem; }

/* ----------------------------- header ------------------------------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:transparent; transition:background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-head.scrolled{
  background:rgba(242,205,172,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; height:96px; }
.brand{ display:flex; align-items:baseline; gap:.65rem; line-height:1; flex-shrink:0; white-space:nowrap; }

.brand-logo{ height:5.2rem; width:auto; display:inline-block; vertical-align:middle; }
.brand b{ font-family:var(--display); font-weight:400; font-size:1.7rem; color:var(--brown); letter-spacing:.01em; }
.brand .kn{ font-family:var(--kannada); font-size:.9rem; color:var(--stone); }
.nav{ display:flex; gap:2.2rem; align-items:center; }
.nav a{ font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal); position:relative; padding:.3rem 0; transition:opacity .15s ease; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:var(--brown); transition:width .25s ease; }
.nav a:hover{ opacity:.62; }
.nav a[aria-current="page"]{ color:var(--brown); }
.nav a[aria-current="page"]::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:var(--r-btn); padding:7px 13px; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brown); cursor:pointer; }

/* ----------------------------- buttons ------------------------------ */
/* thinner, more letter-spacing, lighter — less "thick" */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-weight:400; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.95rem 1.8rem; border-radius:var(--r-btn);
  border:1px solid var(--brown); cursor:pointer; transition:background .15s ease,color .15s ease,opacity .15s ease;
}
.btn-primary{ background:var(--brown); color:var(--cream); border-color:var(--brown); }
.btn-primary:hover{ background:var(--brown-deep); border-color:var(--brown-deep); }
.btn-ghost{ background:transparent; color:var(--brown); }
.btn-ghost:hover{ background:var(--brown); color:var(--cream); }
.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.link-arrow{ font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brown); display:inline-flex; align-items:center; gap:.55rem; padding-bottom:.3rem; border-bottom:1px solid var(--line); transition:gap .18s ease,border-color .18s ease,opacity .15s ease; }
.link-arrow:hover{ gap:.85rem; opacity:.66; border-color:var(--brown); }

/* on dark / photo overlays */
.on-dark{ color:rgba(245,239,224,.94); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:#fdfaf3; text-shadow:0 1px 30px rgba(15,9,3,.6), 0 1px 4px rgba(15,9,3,.45); }
.on-dark h1 em,.on-dark h2 em,.on-dark h3 em{ color:var(--peach); }
.on-dark .lead{ color:rgba(253,250,243,.97); text-shadow:0 1px 20px rgba(15,9,3,.65), 0 1px 3px rgba(15,9,3,.4); }
.on-dark .lead strong{ color:#fff; }
.on-dark .eyebrow{ color:rgba(252,243,228,.92); text-shadow:0 1px 12px rgba(15,9,3,.6); }
.on-dark .eyebrow::before{ background:rgba(245,239,224,.8); }
.on-dark .note{ text-shadow:0 1px 12px rgba(15,9,3,.6); }
.on-dark .btn-ghost{ border-color:rgba(245,239,224,.85); color:#fdfaf3; }
.on-dark .btn-ghost:hover{ background:var(--cream); color:var(--brown); border-color:var(--cream); }

/* -------------------------- hero: full-bleed ------------------------ */
.hero-full{ position:relative; min-height:clamp(580px,92vh,940px); display:flex; align-items:flex-end; overflow:hidden; }
.hero-full .bg{ position:absolute; inset:0; z-index:0; }
.hero-full .bg img{ width:100%; height:100%; object-fit:cover; }
/* layered scrim: darken the (left, bottom) text column, keep upper-right airy */
.hero-full::after{ content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right, rgba(15,9,3,.62) 0%, rgba(15,9,3,.34) 40%, rgba(15,9,3,.06) 70%, rgba(15,9,3,0) 100%),
    linear-gradient(to top, rgba(15,9,3,.85) 0%, rgba(15,9,3,.6) 32%, rgba(15,9,3,.34) 60%, rgba(15,9,3,.2) 100%); }
.hero-full .wrap{ position:relative; z-index:2; padding-block:clamp(54px,8vw,104px); width:100%; }
.hero-full h1{ max-width:17ch; }
.hero-full .lead{ max-width:42ch; margin-top:1.8rem; }
/* centred heroes: add an overall + radial darkening so mid-image text reads */
.hero-full.center{ align-items:center; }
.hero-full.center::after{
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(18,11,4,.32) 0%, rgba(18,11,4,.6) 100%),
    linear-gradient(to top, rgba(18,11,4,.55), rgba(18,11,4,.5)); }

/* simple page intro hero (peach, no photo) */
.hero{ padding-top:clamp(96px,14vw,190px); padding-bottom:clamp(24px,5vw,60px); }
.hero h1{ max-width:15ch; }
.hero .lead{ margin-top:1.8rem; max-width:36ch; }
.hero .body-lead{ margin-top:1.8rem; }

/* --------------------------- live-proof strip ----------------------- */
.live{ background:var(--cream); border-block:1px solid var(--border); }
.live .wrap{ padding-block:clamp(1.7rem,3vw,2.6rem); }
.live-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.5rem; }
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--forest); box-shadow:0 0 0 0 rgba(42,74,58,.55); animation:pulse 2.6s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(42,74,58,.45);} 70%{box-shadow:0 0 0 9px rgba(42,74,58,0);} 100%{box-shadow:0 0 0 0 rgba(42,74,58,0);} }
.live-head .label{ font-family:var(--mono); font-weight:400; letter-spacing:.22em; text-transform:uppercase; font-size:.7rem; color:var(--brown); }
.live-head .stamp{ margin-left:auto; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--stone); }
.live-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; }
.live-cell{ background:transparent; padding:clamp(1.3rem,2.2vw,1.9rem) clamp(1.4rem,2.2vw,2rem); border-right:1px solid var(--border); }
.live-cell:last-child{ border-right:0; }
.live-cell .k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); }
.live-cell .v{ font-family:var(--display); font-weight:300; font-size:clamp(1.9rem,3.4vw,2.7rem); color:var(--brown); line-height:1.05; margin-top:.7rem; }
.live-cell .s{ font-size:.88rem; color:var(--charcoal); margin-top:.45rem; }

/* feature variant — live strip as clean panel over hero base (NO shadow) */
.live--feature{ background:transparent; border:0; margin-top:calc(-1 * clamp(44px,7vw,84px)); z-index:5; }
.live--feature .wrap{ padding-block:0; }
.live--feature .panel{ background:var(--cream); border:1px solid var(--border); border-radius:var(--r-card); padding:clamp(1.5rem,2.6vw,2.1rem); }
.live--feature .live-grid{ border:0; }

/* --------------------------- editorial grids ------------------------ */
.cols-2{ display:grid; grid-template-columns:0.86fr 1fr; gap:clamp(36px,7vw,104px); align-items:start; }
.cols-2.even{ grid-template-columns:1fr 1fr; }
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px); }
.cols-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); }

/* card — flat, hairline, no shadow */
.card{ background:var(--peach); border:1px solid var(--border); border-radius:var(--r-card); padding:clamp(24px,3vw,34px); }
.band .card{ background:var(--peach); }
.card.cream{ background:var(--cream); }
.card h3{ margin-bottom:.6rem; }
.card p{ font-size:1rem; color:var(--charcoal); }
.card .ico{ color:var(--forest); font-size:1.5rem; margin-bottom:1.1rem; display:block; }
.card .meta{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line); }

/* figure with caption */
.figure{ border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--cream); }
.figure img{ width:100%; height:100%; object-fit:cover; }
.figure figcaption{ padding:.8rem 1.1rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); border-top:1px solid var(--border); }
.figure.bare{ border:1px solid var(--border); }

/* full-bleed photo break */
.photo-break{ position:relative; height:clamp(420px,64vh,720px); overflow:hidden; }
.photo-break img{ width:100%; height:100%; object-fit:cover; }
.photo-break figcaption{ position:absolute; left:0; bottom:0; padding:1.1rem var(--pad); font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(253,250,243,.94);
  background:linear-gradient(to top, rgba(20,12,5,.5), transparent); width:100%; }
.photo-break.tall{ height:clamp(520px,84vh,900px); }

/* photo grid / gallery */
.pgrid{ display:grid; gap:clamp(12px,1.6vw,18px); }
.pgrid.g3{ grid-template-columns:repeat(3,1fr); }
.pgrid .cell{ position:relative; overflow:hidden; border-radius:var(--r-card); border:1px solid var(--border); }
.pgrid .cell img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform .7s ease; }
.pgrid .cell.wide{ grid-column:span 2; }
.pgrid .cell.wide img{ aspect-ratio:16/10; }
.pgrid .cell:hover img{ transform:scale(1.03); }

/* feature list — airy, hairline */
.flist{ list-style:none; }
.flist li{ padding:1.4rem 0; border-bottom:1px solid var(--line); display:flex; gap:1.1rem; }
.flist li:first-child{ padding-top:0; }
.flist li:last-child{ border-bottom:0; }
.flist .ico{ color:var(--forest); font-size:1.2rem; flex:0 0 auto; line-height:1.5; }
.flist strong{ display:block; color:var(--brown); font-weight:600; margin-bottom:.2rem; }
.flist span.t{ color:var(--charcoal); font-size:1rem; }

/* land table — alternating cream/parchment, right-aligned mono nums */
.land{ width:100%; border-collapse:collapse; font-size:1rem; }
.land th,.land td{ text-align:left; padding:1.05rem 1.1rem; border-bottom:1px solid var(--border); vertical-align:top; }
.land thead th{ font-family:var(--mono); font-weight:500; color:var(--brown); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid var(--brown); }
.land tbody tr:nth-child(odd) td{ background:var(--cream); }
.land tbody tr:nth-child(even) td{ background:var(--cream-2); }
.band .land tbody tr:nth-child(odd) td{ background:var(--peach); }
.band .land tbody tr:nth-child(even) td{ background:var(--peach-deep); }
.land td:nth-child(2){ font-family:var(--mono); color:var(--brown); white-space:nowrap; text-align:right; }

/* schematic plot map — proportional, line-art on cream */
.plotmap{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:80px; gap:10px; }
.plot{ border:1px solid var(--border); border-radius:var(--r-tag); background:var(--cream); padding:1rem 1.1rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; transition:background .2s ease,border-color .2s ease; overflow:hidden; }
.band .plot{ background:var(--peach); }
.plot:hover{ border-color:var(--brown); }
.plot .pname{ font-family:var(--body); font-weight:600; font-size:.92rem; color:var(--brown); line-height:1.18; }
.plot .pwhat{ font-size:.82rem; color:var(--charcoal); line-height:1.4; margin-top:.2rem; max-width:30ch; }
.plot .pmeta{ font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); margin-top:.5rem; }
.plot .pac{ font-family:var(--display); font-weight:300; font-size:1.7rem; color:var(--brown); line-height:1; }
.plot .pac .u{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--stone); margin-left:.3rem; }
.plot.green{ border-color:var(--forest); }
.plot.green .pname,.plot.green .pac{ color:var(--forest); }
.plot.water{ border-color:#3f6b8a; }
.plot.water .pname,.plot.water .pac{ color:#3f6b8a; }
.plot.clay{ border-color:var(--terracotta); }
.plot.clay .pname,.plot.clay .pac{ color:var(--terracotta); }
.plotmap-legend{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.4rem; }
.plotmap-legend span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); display:inline-flex; align-items:center; gap:.5rem; }
.plotmap-legend i{ width:14px; height:14px; border-radius:2px; border:1px solid; display:inline-block; }

/* photographic plot tiles — the big plots show their real crop under a scrim */
.plot.photo{ border:0; color:#fdfaf3; }
.plot.photo::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--img); background-size:cover; background-position:center; transform:scale(1.001); transition:transform .9s ease; }
.plot.photo::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(20,12,5,.62) 0%, rgba(20,12,5,.28) 42%, rgba(20,12,5,.12) 100%); }
.plot.photo:hover::before{ transform:scale(1.06); }
.plot.photo > *{ position:relative; z-index:2; }
.plot.photo .pname{ color:#fff; text-shadow:0 1px 14px rgba(15,9,3,.6); }
.plot.photo .pwhat{ color:rgba(253,250,243,.92); text-shadow:0 1px 12px rgba(15,9,3,.7); }
.plot.photo .pac{ color:#fff; text-shadow:0 1px 16px rgba(15,9,3,.7); }
.plot.photo .pac .u{ color:rgba(253,250,243,.82); }
.band .plot.photo{ background:var(--cream); }
.plot.photo:hover{ border:0; }
/* plot cards with photo background + readable scrim (small cards) */
.plot.tint{ position:relative; overflow:hidden; border:0; }
.plot.tint::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--img); background-size:cover; background-position:center; transform:scale(1.001); transition:transform .9s ease; }
.plot.tint::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(20,12,5,.82) 0%, rgba(20,12,5,.45) 40%, rgba(20,12,5,.28) 100%); }
.plot.tint:hover::before{ transform:scale(1.06); }
.plot.tint > *{ position:relative; z-index:2; }
.plot.tint .pname{ color:#fff !important; text-shadow:0 1px 12px rgba(15,9,3,.75); font-size:.78rem; line-height:1.15; padding-right:0 !important; overflow-wrap:break-word; hyphens:none; }
.plot.tint .pmeta{ color:rgba(253,250,243,.9) !important; text-shadow:0 1px 10px rgba(15,9,3,.8); }
.plot.tint .pac{ color:#fff !important; text-shadow:0 1px 14px rgba(15,9,3,.8); }
.plot.tint .pac .u{ color:rgba(253,250,243,.85) !important; }
.plot.tint .ico-plot{ display:none; }

/* land-map section sits on real canopy — atmosphere, not a flat band */
.landmap-section{ position:relative; overflow:hidden; }
.landmap-section::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('../images/banana-grove-saplings.jpg') center/cover no-repeat; opacity:.14; }
.landmap-section::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 90% at 82% -6%, rgba(242,205,172,0) 38%, var(--peach) 100%); opacity:.7; }
.landmap-section > .wrap{ position:relative; z-index:1; }

/* watermark icon turns the small plain plots into designed tiles */
.plot .ico-plot{ position:absolute; top:.6rem; right:.6rem; font-size:1rem; color:var(--stone); opacity:.35; z-index:1; line-height:1; }
.plot.green .ico-plot{ color:var(--forest); opacity:.5; }
.plot.water .ico-plot{ color:#3f6b8a; opacity:.55; }
.plot.clay .ico-plot{ color:var(--terracotta); opacity:.55; }
.plot .pname,.plot .pwhat,.plot .pmeta,.plot .pac{ position:relative; z-index:2; }

/* the schematic's footnote, made into a considered caption */
.landmap-note{ margin-top:1.6rem; display:flex; gap:.85rem; align-items:flex-start; max-width:80ch;
  border-top:1px solid var(--line); padding-top:1.1rem; font-size:.9rem; color:var(--stone); }
.landmap-note i{ color:var(--terracotta); font-size:1.05rem; flex:none; margin-top:.12rem; }
.landmap-note span{ max-width:74ch; }

/* steps */
.steps{ counter-reset:s; list-style:none; }
.steps li{ position:relative; padding:1.5rem 0 1.5rem 4rem; border-bottom:1px solid var(--line); }
.steps li:last-child{ border-bottom:0; }
.steps li::before{ counter-increment:s; content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1.5rem; font-family:var(--mono); font-size:.78rem; color:var(--terracotta); border:1px solid var(--border); border-radius:50%; width:2.4rem; height:2.4rem; display:grid; place-items:center; }
.steps strong{ display:block; color:var(--brown); font-weight:600; }
.steps .t{ font-size:.98rem; color:var(--charcoal); }

/* form */
.field{ margin-bottom:1.5rem; }
.field label{ display:block; font-family:var(--mono); font-weight:400; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.55rem; color:var(--stone); }
.field input,.field textarea{
  width:100%; padding:.9rem 1.1rem; font-family:var(--body); font-size:1rem; color:var(--charcoal);
  background:var(--cream); border:1px solid var(--border); border-radius:var(--r-btn); transition:border-color .15s ease;
}
.field input:focus,.field textarea:focus{ outline:2px solid var(--brown); outline-offset:2px; border-color:var(--brown); }

/* pull quote */
.pull{ font-family:var(--display); font-weight:300; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.12; color:var(--brown); max-width:22ch; letter-spacing:-.008em; }
.pull em{ font-style:italic; color:var(--brown); }

/* ----------------------------- footer ------------------------------- */
.site-foot{ background:var(--cream); color:var(--charcoal); padding-block:clamp(60px,8vw,96px); border-top:1px solid var(--border); }
.site-foot a{ color:var(--charcoal); border-bottom:1px solid transparent; transition:opacity .15s ease; }
.site-foot a:hover{ opacity:.64; }
.site-foot .cols{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:2.6rem; }
.site-foot 
.brand-logo{ height:5.2rem; width:auto; display:inline-block; vertical-align:middle; }
.brand b{ color:var(--brown); }
.site-foot .brand .kn{ color:var(--stone); }
.site-foot p{ color:var(--charcoal); }
.site-foot .eyebrow{ color:var(--stone); margin-bottom:1.2rem; }
.site-foot .fcol{ display:flex; flex-direction:column; gap:.6rem; }
.site-foot small{ display:block; margin-top:3.4rem; padding-top:1.6rem; border-top:1px solid var(--border); color:var(--stone); font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; }

/* ------------------------ reveal / parallax ------------------------- */
.reveal{ transition:opacity .8s ease, transform .8s ease; }
.js .reveal{ opacity:0; transform:translateY(14px); }
.js .reveal.in{ opacity:1; transform:none; }
.js .reveal.d1{ transition-delay:.09s; }
.js .reveal.d2{ transition-delay:.18s; }
.js .reveal.d3{ transition-delay:.27s; }
[data-parallax] img{ will-change:transform; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; } [data-parallax] img{ transform:none !important; } html{ scroll-behavior:auto; } }

/* ---------------------- land map (farm) composition ----------------- */
.landmap-grid{ display:grid; grid-template-columns:0.82fr 1fr; gap:clamp(22px,3.4vw,52px); align-items:start; }
.landmap-figure{ position:relative; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; min-height:clamp(360px,42vw,500px); background:var(--cream); }
.landmap-figure img{ width:100%; height:100%; object-fit:cover; }
.landmap-figure figcaption{ position:absolute; left:0; bottom:0; width:100%; padding:1rem 1.1rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(253,250,243,.94); background:linear-gradient(to top, rgba(20,12,5,.62), rgba(20,12,5,0)); }
.landmap-figure .fig-tag{ position:absolute; top:14px; left:14px; display:inline-flex; align-items:baseline; gap:.45rem; background:var(--cream); border:1px solid var(--border); border-radius:var(--r-tag); padding:.5rem .72rem; }
.landmap-figure .fig-tag b{ font-family:var(--display); font-weight:300; font-size:1.5rem; color:var(--brown); line-height:1; }
.landmap-figure .fig-tag span{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.landmap-panel{ display:flex; flex-direction:column; }
.landmap-panel .panel-head{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.landmap-panel .panel-head b{ color:var(--brown); font-weight:600; }
@media (max-width:900px){ .landmap-grid{ grid-template-columns:1fr; } .landmap-figure{ min-height:300px; } }

/* ---------------------- live readings grid (tech) ------------------- */
.readings{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; }
.readings .live-cell{ border-bottom:1px solid var(--border); }
.readings .live-cell:nth-child(3n){ border-right:0; }
.readings .live-cell:nth-last-child(-n+3){ border-bottom:0; }
@media (max-width:760px){ .readings{ grid-template-columns:1fr 1fr; } .readings .live-cell:nth-child(3n){ border-right:1px solid var(--border); } .readings .live-cell:nth-child(2n){ border-right:0; } .readings .live-cell:nth-last-child(-n+3){ border-bottom:1px solid var(--border); } .readings .live-cell:nth-last-child(-n+2){ border-bottom:0; } }
@media (max-width:460px){ .readings{ grid-template-columns:1fr; } .readings .live-cell{ border-right:0 !important; border-bottom:1px solid var(--border) !important; } .readings .live-cell:last-child{ border-bottom:0 !important; } }

/* ---------------------- trail camera module ------------------------- */
.trailcam{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(20px,3vw,44px); align-items:stretch; }
.tc-frame{ position:relative; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--cream); aspect-ratio:16/10; }
.tc-img{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .4s ease; }
.tc-frame.has-img .tc-img{ opacity:1; }
.tc-frame.has-img .tc-empty{ display:none; }
.tc-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; text-align:center; padding:2rem; }
.tc-empty .ph{ font-size:2.3rem; color:var(--stone); }
.tc-empty .l1{ font-family:var(--display); font-weight:300; font-size:1.6rem; color:var(--brown); }
.tc-empty .l2{ font-size:.9rem; color:var(--stone); max-width:30ch; }
.tc-badge{ position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:.45rem; background:var(--cream); border:1px solid var(--border); border-radius:var(--r-tag); padding:.35rem .6rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brown); }
.tc-badge .live-dot{ width:6px; height:6px; }
.tc-meta{ display:flex; flex-direction:column; justify-content:center; }
.tc-cap{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--line); }
.tc-note{ font-size:.95rem; color:var(--charcoal); }
@media (max-width:760px){ .trailcam{ grid-template-columns:1fr; } }

/* ----------------------------- responsive --------------------------- */
@media (max-width:900px){
  .cols-2,.cols-2.even{ grid-template-columns:1fr; }
  .cols-3{ grid-template-columns:1fr; }
  .cols-4{ grid-template-columns:1fr 1fr; }
  .pgrid.g3{ grid-template-columns:1fr 1fr; }
  .pgrid .cell.wide{ grid-column:span 2; }
  .live-grid{ grid-template-columns:1fr; }
  .live-cell{ border-right:0; border-bottom:1px solid var(--border); }
  .live-cell:last-child{ border-bottom:0; }
  .site-foot .cols{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:820px){
  .nav{ position:fixed; inset:96px 0 auto 0; flex-direction:column; gap:0; background:var(--peach); border-bottom:1px solid var(--border); max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .nav.open{ max-height:70vh; }
  .nav a{ padding:1.1rem var(--pad); width:100%; border-bottom:1px solid var(--line); }
  .nav a::after{ display:none; }
  .nav-toggle{ display:inline-block; }
  .site-head{ background:rgba(242,205,172,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .cols-4,.pgrid.g3{ grid-template-columns:1fr; }
  .pgrid .cell.wide{ grid-column:span 1; }
  .plotmap{ grid-template-columns:repeat(6,1fr); }
  .plot.tint .pname{ font-size:.72rem; }
  .plot .pname{ font-size:.82rem; }
}