/* ===========================================================
   Mulinos Bakery — shared styles
   Palette: warm flour white, crust brown, deep charcoal ink
   Type: Cormorant Garamond (display/serif) + Montserrat (sans)
   =========================================================== */

:root{
  --flour:      #F6EBD4;   /* Warm Cream — brand background */
  --flour-dim:  #EEDFB9;   /* deeper cream for section banding */
  --green:      #3F8F28;   /* Fresh Green — primary brand color */
  --green-dark: #2E6B1C;   /* darker green for hover / dark bands */
  --brown:      #4A2A12;   /* Deep Brown — mill icon, dark accents */
  --gold:       #D99A18;   /* Golden Wheat — secondary accent */
  --ink:        #3A2A1C;   /* body text, warm near-black */
  --ink-soft:   #6B5A46;
  --line:       #DEC98F;
  --max-w:      1180px;
  /* legacy aliases used throughout the file */
  --crust:      var(--green);
  --crust-dark: var(--green-dark);
  --wheat:      var(--gold);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--flour);
  color:var(--ink);
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 0.4em 0;
  line-height:1.15;
}

p{ margin:0 0 1em 0; max-width:62ch; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,239,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; padding-bottom:20px;
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand-icon{ height:46px; width:auto; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text em{
  font-family:'Lobster Two', cursive;
  font-weight:700; font-style:italic;
  font-size:1.5rem; color:var(--green);
}
.brand-text b{
  font-family:'Montserrat', sans-serif;
  font-weight:700; font-size:0.62rem;
  letter-spacing:0.16em; color:var(--gold);
  margin-top:2px;
}
.brand span{ color:var(--ink); }
.nav-links{ display:flex; gap:36px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:0.86rem;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  position:relative;
  padding-bottom:4px;
}
.nav-links a.active,
.nav-links a:hover{ color:var(--crust-dark); }
.nav-links a.active::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--crust);
}
.nav-toggle{ display:none; }

/* ---------- Hero (page header, non-home) ---------- */
.page-hero{
  padding:96px 0 56px;
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{
  font-size:0.78rem; color:var(--wheat); margin-bottom:14px;
}
.page-hero h1{ font-size:clamp(2.4rem, 5vw, 3.6rem); max-width:16ch; }
.page-hero p.lede{ font-size:1.08rem; max-width:56ch; margin-top:18px; }

/* ---------- Home hero ---------- */
.home-hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:flex-end;
  background:#20160e;
  overflow:hidden;
}
.home-hero img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0.62;
}
.home-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,12,6,0.86) 0%, rgba(20,12,6,0.15) 62%);
}
.home-hero-content{
  position:relative; z-index:2;
  padding:0 32px 72px;
  max-width:var(--max-w);
  margin:0 auto;
  width:100%;
}
.home-hero-content .eyebrow{
  color:#E4C079; font-size:0.8rem; letter-spacing:0.06em; margin-bottom:16px;
}
.home-hero-content h1{
  color:#FAF6EF;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  max-width:14ch;
}
.home-hero-content p{
  color:#E9E1D2; max-width:48ch; font-size:1.05rem; margin-top:16px;
}
.hero-actions{ margin-top:32px; display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:14px 30px;
  font-size:0.82rem;
  letter-spacing:0.04em;
  border:1px solid var(--crust);
  color:var(--flour);
  background:var(--crust);
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover{ background:var(--crust-dark); border-color:var(--crust-dark); }
.btn.outline{
  background:transparent;
  color:inherit;
  border-color:currentColor;
}
.home-hero .btn.outline{ color:var(--flour); }
.home-hero .btn.outline:hover{ background:rgba(250,246,239,0.12); }

/* ---------- Marquee ---------- */
.marquee-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  background:var(--flour-dim);
}
.marquee-track{
  display:inline-block;
  padding:16px 0;
  animation:scroll-left 32s linear infinite;
}
.marquee-track span{
  font-family:'Lobster Two', cursive;
  font-style:italic;
  font-weight:700;
  font-size:1.15rem;
  color:var(--green-dark);
  margin:0 36px;
}
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

/* ---------- Sections ---------- */
section{ padding:88px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:48px; border-bottom:1px solid var(--line); padding-bottom:24px;
}
.section-head .eyebrow{ font-size:0.78rem; color:var(--wheat); margin-bottom:10px; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); }
.section-head .num{ font-family:'Cormorant Garamond', serif; font-size:0.95rem; color:var(--ink-soft); white-space:nowrap; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split img{ }
.split .col p{ max-width:52ch; }

/* ---------- Product grid ---------- */
.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--line);
  border:1px solid var(--line);
}
.product-card{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ink);
}
.product-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.5s ease, opacity 0.3s ease;
}
.product-card:hover img{ transform:scale(1.05); opacity:0.55; }
.product-info{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px;
  color:#fff;
  transform:translateY(14px);
  opacity:0; transition:opacity 0.3s ease, transform 0.3s ease;
}
.product-card:hover .product-info{ opacity:1; transform:translateY(0); }
.product-info h3{ color:#fff; font-size:1.4rem; margin-bottom:4px; }
.product-info p{ color:#E9E1D2; font-size:0.86rem; margin:0; }
.product-card .tag{
  position:absolute; top:16px; left:16px;
  font-size:0.72rem; letter-spacing:0.05em;
  color:#fff; opacity:0.85;
}

/* Full product listing (products page) */
.product-list{ display:flex; flex-direction:column; }
.product-row{
  display:grid; grid-template-columns:120px 1fr auto;
  gap:28px; align-items:center;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.product-row img{ width:120px; height:120px; object-fit:cover; }
.product-row h3{ font-size:1.5rem; margin-bottom:6px; }
.product-row .meta{ font-size:0.8rem; color:var(--wheat); letter-spacing:0.04em; white-space:nowrap; }

/* ---------- Testimonials ---------- */
.testimonial{
  border-left:2px solid var(--crust);
  padding-left:28px;
}
.testimonial p{ font-family:'Montserrat', sans-serif; font-weight:500; font-style:italic; font-size:1.25rem; color:var(--ink); max-width:60ch; }
.testimonial .who{ font-family:'Montserrat', sans-serif; font-style:normal; font-size:0.82rem; color:var(--ink-soft); margin-top:14px; }
.testimonial-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }

.client-strip{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.client-name{
  flex:1 1 220px;
  padding:32px 28px;
  font-family:'Montserrat', sans-serif;
  font-weight:600; font-size:1.05rem;
  color:var(--ink);
  border-right:1px solid var(--line);
}
.client-name:last-child{ border-right:none; }
.client-more{ font-weight:500; font-style:italic; color:var(--ink-soft); }


/* ---------- Values / process (about) ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.value-item .index{ font-family:'Cormorant Garamond', serif; font-size:1rem; color:var(--wheat); margin-bottom:10px; }
.value-item h3{ font-size:1.4rem; margin-bottom:8px; }
.value-item p{ font-size:0.94rem; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.info-line{ padding:18px 0; border-bottom:1px solid var(--line); }
.info-line .label{ font-size:0.76rem; letter-spacing:0.05em; color:var(--wheat); margin-bottom:6px; }
.info-line .value{ font-size:1.05rem; }

form{ display:flex; flex-direction:column; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:0.78rem; letter-spacing:0.03em; color:var(--ink-soft); }
.field input, .field textarea{
  border:none; border-bottom:1px solid var(--line);
  background:transparent; font-family:'Montserrat',sans-serif;
  font-size:1rem; color:var(--ink); padding:10px 2px;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--crust);
}
.field textarea{ resize:vertical; min-height:110px; }
form .btn{ align-self:flex-start; border:none; cursor:pointer; margin-top:6px; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--crust-dark); color:var(--flour);
  padding:80px 0; text-align:left;
}
.cta-band h2{ color:var(--flour); max-width:18ch; }
.cta-band p{ color:#E9DFCB; }
.cta-band .btn{ background:var(--flour); color:var(--crust-dark); border-color:var(--flour); }
.cta-band .btn:hover{ background:#fff; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding:56px 0 40px; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; }
.footer-grid h4{ font-size:1.3rem; margin-bottom:10px; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col .label{ font-size:0.76rem; color:var(--wheat); letter-spacing:0.05em; margin-bottom:6px; }
.footer-col a, .footer-col span{ font-size:0.9rem; color:var(--ink-soft); }
.footer-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; font-size:0.78rem; color:var(--ink-soft);
  flex-wrap:wrap; gap:12px;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--flour);
    flex-direction:column; padding:32px; gap:24px;
    transform:translateY(-110%); transition:transform 0.25s ease;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-toggle{
    display:block; background:none; border:none; font-size:1.4rem; color:var(--ink); cursor:pointer;
  }
  .split, .testimonial-grid, .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .value-grid{ grid-template-columns:1fr; }
  .product-row{ grid-template-columns:80px 1fr; }
  .product-row img{ width:80px; height:80px; }
  .product-row .meta{ grid-column:2; }
}