/* ============================================================
   Grass Hill Cattle — grasshillcattle.com
   On-brand static stylesheet
   Palette & type from DESIGN.md (design-systems/grasshillcattle)
   ============================================================ */
:root{
  --primary:#2d4a1a;      /* pasture green  */
  --secondary:#5c6b3a;   /* olive/sage     */
  --tertiary:#7a5e3b;    /* wood brown     */
  --neutral:#f5f0e6;     /* cream          */
  --ink:#1a1a14;         /* near-black     */
  --muted:#6b6b5a;       /* warm gray      */
  --border:#d4cbb5;      /* weathered wood */
  --accent:#a8461e;      /* rust           */
  --danger:#8b2a1a;
  --success:#3a6b1a;
  --surface:#faf7f0;
  --sky:#7a9ab5;

  --serif:"Frank Ruhl Libre","Georgia",serif;
  --sans:"Source Sans 3","Helvetica Neue",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:var(--sans);
  font-size:1.125rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--neutral);
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}

.wrap{max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* ---------- labels / headings ---------- */
.label{
  font-family:var(--sans);
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--muted);
}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;letter-spacing:-0.01em;color:var(--ink)}
h2{font-size:2.5rem;margin:0.75rem 0 1rem}
h3{font-size:1.75rem;font-weight:600;margin:0 0 0.75rem}

p{margin:0 0 1rem}
a{color:var(--primary)}

/* ============ buttons ============ */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:1.125rem;
  font-weight:600;
  padding:12px 32px;
  border-radius:2px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-primary{background:var(--primary);color:var(--neutral)}
.btn-primary:hover{background:var(--ink)}
.btn-secondary{background:var(--surface);color:var(--primary);border-color:var(--primary)}
.btn-secondary:hover{background:var(--border)}

/* ============ header / nav ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--neutral);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem}
.brand{font-family:var(--serif);font-size:1.95rem;font-weight:700;color:var(--primary);text-decoration:none;line-height:1;letter-spacing:-0.01em}
.brand small{display:block;font-family:var(--sans);font-size:0.7rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-top:0.25rem}
.nav-links{display:flex;align-items:center;gap:1.5rem;list-style:none}
.nav-links a{color:var(--ink);text-decoration:none;font-size:1.1875rem}
.nav-links a:hover{color:var(--primary)}
.nav-links .cta{padding:8px 18px;background:var(--primary);color:var(--neutral)!important;border-radius:2px;font-weight:600}
.nav-links .cta:hover{background:var(--ink)}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--ink);cursor:pointer}

/* ============ hero ============ */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,26,20,0.15) 0%,rgba(26,26,20,0.55) 70%,rgba(26,26,20,0.75) 100%)}
.hero-content{position:relative;z-index:2;padding:4rem 0 4.5rem;max-width:760px}
.hero .label{color:rgba(245,240,230,0.85)}
.hero h1{font-size:3.5rem;color:#fff;margin:0.75rem 0 1.25rem}
.hero p.lede{font-size:1.375rem;color:rgba(245,240,230,0.95);line-height:1.6}
.hero .actions{margin-top:1.75rem;display:flex;gap:1rem;flex-wrap:wrap}
.hero .btn-primary{background:var(--accent)}
.hero .btn-primary:hover{background:var(--ink)}
.hero .btn-secondary{background:transparent;border-color:var(--neutral);color:#fff}
.hero .btn-secondary:hover{background:rgba(245,240,232,0.15)}

/* ============ sections ============ */
section{padding:5rem 0}
section.alt{background:var(--surface)}
.section-head{max-width:720px;margin-bottom:2.5rem}

.intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.intro-cols img{border-radius:4px;border:1px solid var(--border)}
.tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin:1.25rem 0 0}
.tag{background:var(--secondary);color:var(--neutral);font-size:0.75rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;padding:4px 12px;border-radius:2px}

/* ============ share cards ============ */
.shares{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.share{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:2rem;
  display:flex;flex-direction:column;
}
.share .size{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--primary)}
.price{
  font-size:1.5rem;font-weight:700;color:var(--surface);
  background:var(--tertiary);border-radius:2px;padding:8px 16px;margin:1rem 0;
  display:inline-block;align-self:flex-start;
}
.share ul{list-style:none;margin:0.75rem 0 1.5rem;flex:1}
.share li{padding:0.4rem 0 0.4rem 1.4rem;position:relative;font-size:1rem}
.share li:before{content:"";position:absolute;left:0;top:0.75rem;width:7px;height:7px;background:var(--primary);border-radius:1px}
.share .deposit{font-size:0.95rem;color:var(--muted)}
.share .deposit strong{color:var(--ink)}

.notice{
  margin-top:2rem;padding:16px 20px;background:var(--sky);border-radius:4px;font-size:0.9375rem;color:var(--ink)
}

/* ============ how we raise ============ */
.raise-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.raise-list{list-style:none;margin:0}
.raise-list li{padding:0.6rem 0 0.6rem 0.75rem;margin-bottom:0.6rem;border-left:3px solid var(--secondary);font-size:1.0625rem}
.raise-list li strong{color:var(--primary)}
.health{background:var(--primary);color:var(--neutral);border-radius:4px;padding:2rem;margin-top:2.5rem}
.health h3{color:#fff}
.health p{color:rgba(245,240,232,0.92)}

/* ============ order ============ */
.order-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:3rem;align-items:start}
.form{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2rem}
.form .field{margin-bottom:1.25rem}
.form label{display:block;font-family:var(--sans);font-size:0.75rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem}
.form input,.form select,.form textarea{
  width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:2px;
  background:var(--neutral);color:var(--ink);font-family:var(--sans);font-size:1rem;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--primary)}
.form .calc{background:var(--neutral);border:1px solid var(--border);border-radius:2px;padding:0.75rem 1rem;margin-bottom:1.25rem;font-size:0.95rem}
.form .calc strong{color:var(--primary)}
.order-aside .card{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:1.5rem;margin-bottom:1rem}
.order-aside h3{font-size:1.25rem}
.order-aside p{font-size:0.95rem}
.order-aside .dl{font-size:0.95rem}
.order-aside .dl div{display:flex;justify-content:space-between;padding:0.4rem 0;border-bottom:1px solid var(--border)}
.order-aside .dl div:last-child{border-bottom:none}

/* ============ contact ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2rem}
.contact-card h3{margin-bottom:1rem}
.contact-card .row{margin-bottom:1rem}
.contact-card .row .label{display:block;margin-bottom:0.2rem}
.contact-card a{color:var(--primary);text-decoration:none}
.contact-card a:hover{text-decoration:underline}
.contact-card img{border-radius:4px;margin-top:1rem}

/* ============ footer ============ */
.site-footer{background:var(--ink);color:var(--neutral);padding:3rem 0}
.site-footer .wrap{display:grid;grid-template-columns:2fr 1fr;gap:2rem}
.site-footer .brand{font-family:var(--serif);font-size:1.5rem;color:var(--neutral)}
.site-footer p{color:rgba(245,240,232,0.7);font-size:0.9375rem}
.site-footer .foot-nav{list-style:none}
.site-footer .foot-nav a{color:var(--neutral);text-decoration:none;font-size:1.0625rem;line-height:2}
.site-footer .foot-nav a:hover{color:var(--border)}
.foot-bottom{border-top:1px solid rgba(245,240,232,0.15);margin-top:2rem;padding-top:1.25rem;font-size:0.85rem;color:rgba(245,240,232,0.55)}

/* ============ responsive ============ */
@media (max-width:920px){
  .intro-cols,.raise-grid,.order-grid,.contact-grid,.site-footer .wrap{grid-template-columns:1fr}
  .shares{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-links{
    display:none;flex-direction:column;gap:0.5rem;width:100%;
    background:var(--neutral);border:1px solid var(--border);border-radius:4px;
    padding:1rem;position:absolute;top:100%;left:0;right:0;margin-top:-1px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:0.5rem 0}
  h1{font-size:2.5rem!important}
  h2{font-size:2rem!important}
}