/* ================================
   Greenfield Hydroponics — Site Styles
   Design system: industrial schematic / grow-systems blueprint
   ================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@600;800&family=Archivo:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #14201C;
  --ink-soft:   #24332C;
  --paper:      #F6F5F0;
  --paper-dim:  #EDEBE3;
  --growth:     #3F7D4C;
  --growth-dk:  #2C5936;
  --amber:      #D98A3D;
  --steel:      #79877F;
  --blueprint:  #2B4C5C;
  --line:       #C9CBC0;
  --radius: 2px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Archivo Expanded', sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{ font-size:clamp(2.1rem, 4.5vw, 3.6rem); }
h2{ font-size:clamp(1.5rem, 3vw, 2.2rem); }
h3{ font-size:1.15rem; }

p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }

.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.72rem;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--growth-dk);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:.9em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--growth);
  display:inline-block;
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,245,240,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:.6em;
  font-family:'Archivo Expanded', sans-serif;
  font-weight:800; font-size:1.02rem;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.brand-mark{
  width:30px; height:30px;
  border:1.5px solid var(--growth-dk);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.brand-mark::before{
  content:"";
  width:9px; height:9px;
  background:var(--growth);
  border-radius:1px;
  transform:rotate(45deg);
}
.brand small{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-weight:400; font-size:.6rem;
  letter-spacing:.1em;
  color:var(--steel);
  text-transform:uppercase;
  margin-top:1px;
}

nav.primary{ display:flex; }
nav.primary ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:2px;
}
nav.primary > ul > li{ position:relative; }
nav.primary > ul > li > a{
  display:block;
  padding:10px 14px;
  font-size:.86rem; font-weight:600;
  color:var(--ink-soft);
  border-radius:var(--radius);
  transition:color .15s, background .15s;
  white-space:nowrap;
}
nav.primary > ul > li > a:hover,
nav.primary > ul > li.active > a{
  color:var(--growth-dk);
  background:var(--paper-dim);
}
.dropdown{
  list-style:none; margin:0; padding:8px;
  position:absolute; top:100%; left:0;
  min-width:230px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 12px 24px rgba(20,32,28,.1);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s, transform .15s, visibility .15s;
}
nav.primary > ul > li:hover .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown li a{
  display:block; padding:9px 12px;
  font-size:.83rem; color:var(--ink-soft);
  border-radius:var(--radius);
}
.dropdown li a:hover{ background:var(--paper-dim); color:var(--growth-dk); }

.nav-toggle{ display:none; }

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:11px 20px;
  font-size:.82rem; font-weight:600;
  font-family:'Archivo', sans-serif;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{ background:var(--growth-dk); color:var(--paper); }
.btn-primary:hover{ background:var(--growth); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---------- Spec card: signature element ---------- */
.spec-card{
  position:relative;
  border:1px solid var(--line);
  background:var(--paper);
  padding:22px 20px;
}
.spec-card::before,.spec-card::after,
.spec-card .corner-tl,.spec-card .corner-br{
  content:""; position:absolute; width:12px; height:12px;
  border-color:var(--growth-dk); border-style:solid;
}
.spec-card::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
.spec-card::after{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.spec-card h3{ margin-bottom:.4em; }
.spec-card p{ font-size:.92rem; margin-bottom:.7em; }
.spec-card .mono{ color:var(--growth-dk); }

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 56px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(var(--paper) 0, var(--paper) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(43,76,92,.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(43,76,92,.06) 40px);
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
}
.hero h1{ margin-bottom:.4em; }
.hero .lede{ font-size:1.05rem; max-width:46ch; }
.hero-ctas{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.hero-figure{
  border:1px solid var(--line);
  background:var(--ink);
  aspect-ratio:4/5;
  position:relative;
  overflow:hidden;
}
.hero-figure img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.92; }
.hero-figure .tag{
  position:absolute; left:14px; bottom:14px;
  background:rgba(20,32,28,.82); color:var(--paper);
  padding:8px 12px;
  font-family:'IBM Plex Mono', monospace; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase;
}

/* ---------- Sections ---------- */
section{ padding:64px 0; }
section.tight{ padding:44px 0; }
.alt{ background:var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.dark{ background:var(--ink); color:var(--paper); }
.dark h2, .dark h3{ color:var(--paper); }
.dark p{ color:#C7D0CB; }
.dark .eyebrow{ color:var(--amber); }
.dark .eyebrow::before{ background:var(--amber); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

.section-head{ max-width:640px; margin-bottom:36px; }

.stat{
  border-top:2px solid var(--growth);
  padding-top:10px;
}
.stat .num{
  font-family:'Archivo Expanded', sans-serif; font-weight:800;
  font-size:2.1rem; color:var(--ink);
  display:block;
}
.stat .lbl{ font-family:'IBM Plex Mono', monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--steel); }

.figure{ border:1px solid var(--line); overflow:hidden; background:var(--paper-dim); }
.figure img{ width:100%; display:block; }
.figure figcaption{
  font-family:'IBM Plex Mono', monospace; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--steel); padding:9px 12px;
  border-top:1px solid var(--line);
}

.cta-band{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  border:1px solid var(--line);
  padding:32px;
  background:var(--paper);
}

/* ---------- Footer ---------- */
footer{
  background:var(--ink); color:#C7D0CB;
  padding:52px 0 26px;
}
footer h4{
  font-family:'IBM Plex Mono', monospace;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber); margin:0 0 14px;
}
footer .grid-4{ align-items:start; }
footer a{ color:#C7D0CB; font-size:.86rem; }
footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
footer ul a:hover{ color:var(--paper); }
.foot-bottom{
  margin-top:40px; padding-top:20px; border-top:1px solid #2D3A34;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.05em;
  color:#87968F;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-3, .grid-4{ grid-template-columns:1fr 1fr; }
  nav.primary{
    position:fixed; inset:64px 0 0 0; background:var(--paper);
    padding:20px; display:none; overflow-y:auto;
  }
  nav.primary.open{ display:block; }
  nav.primary ul{ flex-direction:column; }
  nav.primary > ul > li > a{ padding:14px 8px; font-size:1rem; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; border:none; padding-left:12px; }
  nav.primary > ul > li.open .dropdown{ display:block; }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border:1px solid var(--ink); background:none; cursor:pointer;
  }
}
@media (max-width: 640px){
  .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
}
:focus-visible{ outline:2px solid var(--growth); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }