/* ============================================================
   Jaguuza Eco Farms — styles.css
   Palette: loam, leaf, sprout, sun gold, husk
   Mobile-first, low-bandwidth. No images, no icon fonts.
   ============================================================ */

:root{
  --ink:      #0E1F16;
  --forest:   #16412B;
  --field:    #2C6B43;
  --sprout:   #93C55A;
  --sun:      #F0B429;
  --husk:     #E7EBD8;
  --paper:    #FBFCF5;
  --wa:       #25D366;
  --line:     rgba(14,31,22,.14);
  --line-dk:  rgba(231,235,216,.18);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Public Sans", system-ui, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --max: 1180px;
  --r: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:5rem; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--sun); color:var(--ink); padding:.75rem 1rem; font-weight:700;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--sun);
  outline-offset:3px;
}

/* ─────────────── Type scale ─────────────── */

.h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.8rem, 1.2rem + 2.6vw, 3.1rem);
  line-height:1.03;
  letter-spacing:-.025em;
  margin:.2em 0 .5rem;
  text-wrap:balance;
}

.h3{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
  line-height:1.15;
  letter-spacing:-.022em;
  margin:.3rem 0 0;
  text-wrap:balance;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sprout);
  margin:0;
}
.eyebrow--dark{ color:var(--field); }

/* ─────────────── Nav ─────────────── */

.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(14,31,22,.94);
  backdrop-filter:blur(10px);
  color:var(--husk);
  border-bottom:1px solid var(--line-dk);
}

.nav__inner{
  max-width:var(--max); margin:0 auto;
  padding:.85rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:inherit;
}
.brand__mark{
  width:18px; height:18px; flex:none;
  background:var(--sun);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.brand__text{
  font-family:var(--display);
  font-weight:800; font-size:1.06rem; letter-spacing:-.02em; line-height:1;
}
.brand__sub{
  display:block;
  font-family:var(--mono); font-weight:400;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sprout); margin-top:.25rem;
}

.nav__menu{ display:flex; align-items:center; gap:1.15rem; }
.nav__menu a{
  text-decoration:none; font-size:.855rem; font-weight:500;
  color:var(--husk); padding:.25rem 0;
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
.nav__menu a:hover{ border-bottom-color:var(--sun); }
.nav__menu a.is-current{ border-bottom-color:var(--sprout); }

.nav__cta{
  background:var(--sun); color:var(--ink) !important;
  padding:.55rem 1rem !important; border-radius:var(--r);
  font-weight:700 !important;
}
.nav__cta:hover,
.nav__cta.is-current{ background:#ffc84d; border-bottom-color:transparent !important; }

.nav__toggle{
  display:none; background:none; border:1px solid var(--line-dk);
  width:44px; height:40px; border-radius:var(--r); cursor:pointer;
  align-items:center; justify-content:center;
}
.nav__bars, .nav__bars::before, .nav__bars::after{
  display:block; width:20px; height:2px; background:var(--husk);
  transition:transform .25s ease, opacity .25s ease;
}
.nav__bars::before,.nav__bars::after{ content:""; position:absolute; }
.nav__bars::before{ transform:translateY(-6px); }
.nav__bars::after{ transform:translateY(6px); }
.nav__toggle[aria-expanded="true"] .nav__bars{ background:transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before{ transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after{ transform:rotate(-45deg); }

@media (max-width:1040px){
  .nav__toggle{ display:flex; position:relative; }
  .nav__menu{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--line-dk);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav__menu.is-open{ max-height:36rem; }
  .nav__menu a{
    padding:.95rem var(--pad); border-bottom:1px solid var(--line-dk);
    font-size:.95rem;
  }
  .nav__cta{
    margin:1rem var(--pad); text-align:center; border-bottom:0 !important;
  }
}

/* ─────────────── Hero ─────────────── */

.hero{
  position:relative;
  background:var(--forest);
  color:var(--husk);
  overflow:hidden;
  padding:clamp(3.5rem,9vw,7rem) var(--pad) clamp(3.5rem,8vw,6rem);
}

.hero__inner{ max-width:var(--max); margin:0 auto; position:relative; z-index:2; }

.hero__title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.3rem, 1.1rem + 6vw, 5.2rem);
  line-height:.98;
  letter-spacing:-.038em;
  margin:1.1rem 0 1.4rem;
  max-width:15ch;
}
.hero__title em{
  font-style:normal; color:var(--sun);
}

.hero__lede{
  max-width:54ch; font-size:1.1rem;
  color:rgba(231,235,216,.85);
  margin:0 0 2rem;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:3.25rem; }

.hero__facts{
  display:grid; gap:1.25rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:0; padding-top:1.75rem;
  border-top:1px solid var(--line-dk);
  max-width:760px;
}
.hero__facts dt{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--sprout); margin-bottom:.35rem;
}
.hero__facts dd{
  margin:0; font-family:var(--display);
  font-size:2.4rem; font-weight:800; line-height:1; letter-spacing:-.03em;
}

/* decorative plot grid */
.hero__plots{
  position:absolute; inset:0; z-index:1;
  display:grid; grid-template-columns:repeat(14,1fr); grid-auto-rows:1fr;
  opacity:.5; pointer-events:none;
}
.plot{ border-right:1px solid rgba(147,197,90,.09); }
.plot.is-lit{ background:rgba(147,197,90,.07); }

/* ─────────────── Buttons ─────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  text-decoration:none; cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:.95rem;
  padding:.85rem 1.5rem; border-radius:var(--r); border:1px solid transparent;
  transition:background .2s ease, color .2s ease, transform .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--sun{ background:var(--sun); color:var(--ink); }
.btn--sun:hover{ background:#ffc84d; }
.btn--ghost{ border-color:rgba(231,235,216,.4); color:var(--husk); }
.btn--ghost:hover{ background:rgba(231,235,216,.1); }
.btn--full{ width:100%; }

.btn--wa{ background:var(--wa); color:#06301A; margin-top:1.75rem; }
.btn--wa:hover{ background:#3ce07a; }
.btn--wa svg{ width:18px; height:18px; flex:none; fill:currentColor; }

/* ─────────────── Grid rule helper ───────────────
   Cells carry their own right/bottom rules so an incomplete
   final row never leaves a stranded block of gap colour. */
.ruled{
  display:grid; gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.ruled > *{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.ruled--dk{ border-top-color:var(--line-dk); border-left-color:var(--line-dk); }
.ruled--dk > *{ border-right-color:var(--line-dk); border-bottom-color:var(--line-dk); }

/* ─────────────── Strategic chain strip ─────────────── */

.chain{
  background:var(--sun);
  padding:1.5rem var(--pad);
}
.chain__list{
  max-width:var(--max); margin:0 auto; padding:0;
  list-style:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.4rem;
  font-family:var(--display); font-weight:600;
  font-size:clamp(.95rem,.85rem + .5vw,1.2rem);
  letter-spacing:-.015em; color:var(--ink);
}
.chain__list li{ display:flex; align-items:center; gap:1.4rem; }
.chain__list li::after{
  content:"→"; font-weight:400; opacity:.55;
}
.chain__list .chain__end{ text-decoration:underline; text-underline-offset:.28em; }
.chain__list .chain__end::after{ content:""; }

/* ─────────────── Sections ─────────────── */

.section{
  padding:clamp(3.5rem,7vw,6rem) var(--pad);
}
.section--dark{ background:var(--ink); color:var(--husk); }
.section--husk{ background:var(--husk); }

.section__head{ max-width:var(--max); margin:0 auto 2.75rem; }
.section__lede{ max-width:58ch; margin:.5rem 0 0; opacity:.85; }

/* ─────────────── Image placeholders (§20) ─────────────── */

.ph{
  margin:0;
  display:flex; align-items:flex-end;
  min-height:190px;
  border:1px dashed var(--field);
  background:
    repeating-linear-gradient(135deg,
      rgba(44,107,67,.055) 0 10px,
      transparent 10px 20px);
  border-radius:var(--r);
  padding:.85rem;
}
.ph--tall{ min-height:340px; }
.ph--map{ min-height:220px; margin-top:2.25rem; border-color:var(--sprout); }

.ph__label{
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--field);
}
.ph__label span{
  display:block; margin-top:.3rem;
  letter-spacing:.06em; text-transform:none; opacity:.75;
}
.section--dark .ph{ border-color:var(--sprout);
  background:repeating-linear-gradient(135deg,
    rgba(147,197,90,.07) 0 10px, transparent 10px 20px); }
.section--dark .ph__label{ color:var(--sprout); }

/* ─────────────── Tags ─────────────── */

.tag{
  display:inline-block;
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:var(--r);
  margin:0 .5rem .35rem 0;
}
.tag--now{ background:var(--field); color:var(--husk); }
.tag--future{ background:transparent; color:var(--field); border:1px dashed var(--field); }
.section--dark .tag--future{ color:var(--sprout); border-color:var(--sprout); }

/* ─────────────── Tick lists ─────────────── */

.ticks{ list-style:none; margin:1rem 0 0; padding:0; }
.ticks li{
  position:relative; padding-left:1.35rem; margin-bottom:.5rem;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; background:var(--sun);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.ticks--future li::before{
  background:transparent; border:1px solid var(--field);
}
.ticks--two{
  columns:2; column-gap:2rem; margin-top:0;
}
@media (max-width:600px){ .ticks--two{ columns:1; } }

/* ─────────────── About ─────────────── */

.about{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:1.35fr .65fr;
  align-items:start;
}
.about__body p{ max-width:60ch; margin:0 0 1.1rem; }

.vm{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:2.25rem;
}
.vm__card{
  border-top:3px solid var(--field);
  padding-top:1.15rem;
}
.vm__label{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--field);
  margin:0 0 .55rem;
}
.vm__text{
  font-family:var(--display); font-weight:600;
  font-size:1.1rem; line-height:1.4; letter-spacing:-.015em; margin:0;
}

@media (max-width:900px){ .about{ grid-template-columns:1fr; } }

/* ─────────────── Farm ─────────────── */

.farm{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.farm__block{ display:flex; flex-direction:column; }
.farm__block h3{
  font-family:var(--display); font-weight:800;
  font-size:1.35rem; letter-spacing:-.02em; margin:1.1rem 0 .4rem;
}
.farm__block p{ margin:0 0 .8rem; }
.farm__future{
  margin-top:auto !important; padding-top:.9rem;
  border-top:1px solid var(--line);
  font-size:.92rem; opacity:.85;
}
.farm__future .tag{ display:block; width:max-content; }

/* ─────────────── Filters ─────────────── */

.filters{
  max-width:var(--max); margin:0 auto 1.5rem;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.filter{
  appearance:none; cursor:pointer;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.6rem 1rem;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.filter:hover{ border-color:var(--field); }
.filter[aria-pressed="true"]{
  background:var(--field); color:var(--husk); border-color:var(--field);
}

/* ─────────────── Products ─────────────── */

.products{
  list-style:none; margin:0 auto; padding:0;
  max-width:var(--max);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.product{
  background:var(--paper);
  padding:1.35rem 1.3rem 1.5rem;
  display:flex; flex-direction:column;
  transition:background .2s ease;
}
.product > .tag{ align-self:flex-start; }
.product:hover{ background:var(--husk); }
.product[hidden]{ display:none; }
.product--future{ background:#F5F7EC; }

.product__name{
  font-family:var(--display); font-weight:800;
  font-size:1.25rem; letter-spacing:-.02em; margin:.4rem 0 .4rem;
}
.product__note{ margin:0 0 1.1rem; font-size:.92rem; opacity:.8; flex:1; }
.product__meta{
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--field);
  margin:0 0 .9rem; opacity:.7;
}
.product__link{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500;
  color:var(--field); text-decoration:none;
  border-bottom:1px solid var(--sun); padding-bottom:.15rem;
  align-self:flex-start;
}
.product__link:hover{ color:var(--ink); }

/* ─────────────── Themes (sustainability) ─────────────── */

.themes{
  list-style:none; margin:0 auto; padding:0;
  max-width:var(--max);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.themes li{
  background:var(--ink);
  padding:1.4rem 1.3rem;
  font-family:var(--display); font-weight:600;
  font-size:1.05rem; letter-spacing:-.015em; line-height:1.25;
}

/* ─────────────── Split (current vs future) ─────────────── */

.split{
  max-width:var(--max); margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.split__col{ background:var(--paper); padding:1.75rem 1.6rem 2rem; }
.split__col--future{ background:var(--husk); }
.split__title{
  font-family:var(--display); font-weight:800;
  font-size:1.5rem; letter-spacing:-.025em; margin:.5rem 0 0;
}

.benefits{
  max-width:var(--max); margin:2.5rem auto 0;
  border-top:1px solid var(--line); padding-top:1.75rem;
}
.benefits__label{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--field);
  margin:0 0 1rem;
}
.benefits__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.benefits__list li{
  border:1px solid var(--line); border-radius:var(--r);
  padding:.5rem .85rem; font-size:.88rem;
}

/* ─────────────── Value chain ─────────────── */

.vchain{
  list-style:none; margin:0 auto 3rem; padding:0;
  max-width:var(--max);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.vchain li{
  background:var(--paper);
  padding:1.15rem 1.15rem 1.3rem;
  font-family:var(--display); font-weight:800;
  font-size:1.08rem; letter-spacing:-.02em;
}
.vchain__n{
  display:block;
  font-family:var(--mono); font-weight:400;
  font-size:.66rem; letter-spacing:.16em;
  color:var(--field); margin-bottom:.5rem;
}

/* ─────────────── Value addition tabs ─────────────── */

.va{ max-width:var(--max); margin:0 auto; }

.va__tabs{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem;
}
.va__tab{
  appearance:none; cursor:pointer;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.65rem 1.1rem;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.va__tab:hover{ border-color:var(--field); }
.va__tab[aria-selected="true"]{
  background:var(--field); color:var(--husk); border-color:var(--field);
}

.va__panel{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.va__cell{ background:var(--paper); padding:1.6rem 1.5rem 1.85rem; }
.va__cell--future{ background:#F5F7EC; }
.va__state{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--field);
  margin:0 0 .75rem;
}
.va__text{
  font-family:var(--display); font-weight:600;
  font-size:1.15rem; line-height:1.35; letter-spacing:-.018em; margin:0;
}

/* ─────────────── Guides (Learn) ─────────────── */

.guides{
  list-style:none; margin:0 auto; padding:0;
  max-width:var(--max);
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}
.guide{
  background:var(--ink);
  padding:1.4rem 1.3rem 1.55rem;
}
.guide__kind{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sprout);
}
.guide__title{
  font-family:var(--display); font-weight:600;
  font-size:1.12rem; letter-spacing:-.02em; line-height:1.25;
  margin:.55rem 0 .6rem;
}
.guide__soon{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  opacity:.55; margin:0;
}

.phases{
  max-width:var(--max); margin:2.5rem auto 0;
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.phase{
  border-top:1px solid var(--line-dk); padding-top:1.15rem;
}
.phase__n{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sun);
  margin:0 0 .5rem;
}
.phase p{ margin:0; font-size:.94rem; opacity:.8; }

/* ─────────────── Services ─────────────── */

.services{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:2rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
}
.service h3{
  font-family:var(--display); font-weight:800;
  font-size:1.25rem; letter-spacing:-.02em; margin:0 0 .5rem;
  padding-left:1.2rem; position:relative;
}
.service h3::before{
  content:""; position:absolute; left:0; top:.5em;
  width:9px; height:9px; background:var(--sun);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.service p{ margin:0; padding-left:1.2rem; opacity:.85; }
.service--future h3::before{ background:transparent; border:1px solid var(--field); }

/* ─────────────── Pathway ─────────────── */

/* 6 steps — 300px min lands on 3 columns wide, 2 narrow, 1 on phones,
   so the grid always fills evenly. */
.pathway{
  list-style:none; margin:0 auto 3.5rem; padding:0;
  max-width:var(--max);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.step{
  background:var(--paper);
  padding:1.5rem 1.4rem 1.75rem;
}
.step--last{ background:var(--forest); color:var(--husk); }
.step__n{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.18em; color:var(--field); margin:0 0 .75rem;
}
.step--last .step__n{ color:var(--sun); }
.step h3{
  font-family:var(--display); font-weight:800;
  font-size:1.2rem; letter-spacing:-.022em; margin:0 0 .45rem;
}
.step p:last-child{ margin:0; font-size:.92rem; opacity:.8; }

.regional{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:.85fr 1.15fr;
  align-items:start;
  border-top:1px solid var(--line); padding-top:2.5rem;
}
@media (max-width:820px){ .regional{ grid-template-columns:1fr; } }

/* ─────────────── News placeholder ─────────────── */

.news-empty{
  max-width:var(--max); margin:0 auto;
  border:1px dashed var(--field); border-radius:var(--r);
  padding:clamp(1.5rem,4vw,2.5rem);
  background:repeating-linear-gradient(135deg,
    rgba(44,107,67,.045) 0 10px, transparent 10px 20px);
}
.news-empty__label{
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--field);
  margin:0 0 .7rem;
}
.news-empty p:last-child{ margin:0; max-width:60ch; }

/* ─────────────── Contact ─────────────── */

.contact{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1fr 1fr;
  align-items:start;
}
@media (max-width:880px){ .contact{ grid-template-columns:1fr; } }

.contact__copy p{ max-width:52ch; }

.details{
  display:grid; gap:1.35rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin:2.25rem 0 0; padding-top:1.75rem;
  border-top:1px solid var(--line-dk);
}
.details dt{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--sprout); margin-bottom:.45rem;
}
.details dd{ margin:0; font-size:.98rem; }
.details a{ color:var(--husk); text-decoration:none; border-bottom:1px solid var(--sun); }

/* ─────────────── Form ─────────────── */

.form{
  background:var(--husk); color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.25rem);
}
.field{ margin-bottom:1.15rem; }
.field label{
  display:block; margin-bottom:.4rem;
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
}
.optional{
  font-family:var(--mono); font-weight:400;
  font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.55;
}
.field input,
.field select,
.field textarea{
  width:100%; font:inherit; font-size:.95rem;
  padding:.75rem .85rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--ink);
}
.field textarea{ resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--field); }

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{ border-color:#B03A2E; background:#FDF3F2; }

.error{
  margin:.4rem 0 0; min-height:1rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.05em; color:#B03A2E;
}

/* honeypot — hidden from humans, visible to naive bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__status{
  margin:1rem 0 0; font-size:.9rem; font-weight:600;
  color:var(--field); min-height:1.4rem;
}
.form__alt{
  margin:.75rem 0 0; font-family:var(--mono);
  font-size:.64rem; letter-spacing:.08em; opacity:.6;
}

/* ─────────────── Footer ─────────────── */

.footer{
  background:var(--ink); color:var(--husk);
  padding:clamp(2.5rem,5vw,4rem) var(--pad) 6rem;
}
.footer__inner{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:1.75rem;
  grid-template-columns:1.2fr 1fr;
  align-items:start;
}
.footer p{ margin:0 0 .3rem; font-size:.9rem; opacity:.75; }
.footer__brand{
  font-family:var(--display); font-weight:800;
  font-size:1.2rem; opacity:1 !important; margin-bottom:.6rem !important;
}
.footer__tag{
  margin-top:1rem !important; max-width:36ch;
  font-family:var(--display); font-weight:600;
  font-size:1rem !important; letter-spacing:-.015em;
  color:var(--sprout); opacity:1 !important;
}
.footer__links{
  display:grid; gap:.55rem;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}
.footer__links a{
  text-decoration:none; font-size:.9rem; opacity:.75;
  justify-self:start; border-bottom:1px solid transparent;
}
.footer__links a:hover{ opacity:1; border-bottom-color:var(--sun); }
.footer__note{
  grid-column:1/-1; padding-top:1.5rem;
  border-top:1px solid var(--line-dk);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
}
@media (max-width:640px){ .footer__inner{ grid-template-columns:1fr; } }

/* ─────────────── Floating WhatsApp ─────────────── */

.wa-float{
  position:fixed; right:1rem; bottom:1rem; z-index:60;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--wa); color:#06301A;
  text-decoration:none; font-weight:700; font-size:.9rem;
  padding:.8rem 1.15rem; border-radius:999px;
  box-shadow:0 6px 20px rgba(14,31,22,.28);
  transition:transform .16s ease, background .2s ease;
}
.wa-float:hover{ background:#3ce07a; transform:translateY(-2px); }
.wa-float__icon{
  width:20px; height:20px; flex:none; fill:currentColor;
}
@media (max-width:520px){
  .wa-float__text{ display:none; }
  .wa-float{ padding:.95rem; }
}

/* ─────────────── Reveal on scroll ─────────────── */

[data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}

@media print{
  .nav, .wa-float, .hero__plots, .filters, .skip{ display:none !important; }
  body{ background:#fff; }
}