/* ===== Mestiza Chocolate — home page =====
   Rebuilt to match the original: light/minimal, thin halyard-display sans
   (Jost fallback), near-white backgrounds, dark neutral text, airy spacing. */
:root{
  --white:#ffffff;
  --light:#fafafa;        /* off-white section tint */
  --light-2:#f2f0ec;
  --ink:#1a1a1a;          /* near-black text */
  --muted:#6f6f6f;
  --line:#e7e7e7;
  --base:17px;
  --font:'halyard-display','Jost','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-weight:300;
  font-size:var(--base);
  color:var(--ink);
  background:var(--white);
  line-height:1.5;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
.container{width:min(1200px,90%);margin-inline:auto}
h1,h2,h3,h4{font-family:var(--font);font-weight:300;line-height:1.2;letter-spacing:.02em}
a{color:inherit;text-decoration:none}

/* ===== HEADER ===== */
.site-header{background:var(--white)}
.nav{
  display:flex;align-items:center;justify-content:center;
  min-height:110px;padding:1.2rem 0;
}
.brand{display:block;line-height:0}
.brand img{height:104px;width:auto}

/* ===== HERO ===== */
.hero{padding-top:10px}
.hero-img{
  width:min(1620px,96%);            /* line up with the 4-box section edges */
  margin-inline:auto;
  height:70vh;min-height:400px;max-height:720px;
  object-fit:cover;border-radius:18px;display:block;
}
.hero-title{text-align:center;padding:3.4rem 1rem 0}
.hero-title h1{
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2rem);color:var(--ink);
}
.hero-title h1 span{font-weight:600}

/* ===== SECTION HELPERS ===== */
.eyebrow{
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}

/* ===== VALUES + BITE-SIZED (4 columns) ===== */
.values{
  width:min(1620px,96%);            /* matches the hero image width */
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  padding:3.4rem 0 6rem;text-align:center;
}
.value-img{
  width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:1.6rem;
  background:var(--light-2);border-radius:16px;
}
.value-img img{width:100%;height:100%;object-fit:cover}
.value h3{
  font-size:1.15rem;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:.9rem;font-weight:600;
}
.value p{color:#565656;max-width:32ch;margin-inline:auto;font-size:1rem;line-height:1.7}

/* ===== FOOTER ===== */
.site-footer{
  border-top:1px solid var(--line);
  text-align:center;padding:2.6rem 1rem 3rem;background:var(--light);
}
.site-footer p{margin:.25rem 0}
.footer-loc{
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
}
.footer-social a{
  font-size:.82rem;letter-spacing:.12em;color:var(--muted);transition:color .2s;
}
.footer-social a:hover{color:var(--ink)}
.footer-copy{font-size:.72rem;letter-spacing:.1em;color:#9a9a9a;margin-top:.9rem}

/* ===== RESPONSIVE ===== */
@media(max-width:720px){
  .values{grid-template-columns:repeat(2,1fr);gap:2.2rem;padding:4rem 0}
}
@media(max-width:460px){
  .values{grid-template-columns:1fr;gap:2.4rem}
  .value-img{max-width:340px;margin-inline:auto;margin-bottom:1.4rem}
  .brand img{height:68px}
}