/* Base styles */
:root{
  /* Updated for a brighter, friendlier look */
  --bg: #f8f5f0;   /* Light, warm off-white */
  --panel: #ffffff; /* White for main panels */
  --text: #333333;  /* Darker text for readability on light background */
  --muted: #6b6b6b;  /* Muted grey for secondary text */
  --brand:#c49b63; /* coffee gold */
  --card: #ffffff;  /* White card background */
  --stroke: #e0e0e0; /* Light border color */
  --shadow: 0 4px 12px rgba(0,0,0,.1); /* Lighter shadow */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Layout helpers */
.container{width:min(1100px, 92vw); margin-inline:auto}
.section{padding:64px 0}
.section.alt{background:rgba(0,0,0,.02); border-block:1px solid var(--stroke)}
.section-header{margin-bottom:28px}
.section-header h2{margin:0 0 6px;font-size:clamp(1.4rem, 1.2rem + 1vw, 2rem)}
.section-header p{color:var(--muted); margin:0}

.two-col{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px}
@media (max-width: 900px){ .two-col{grid-template-columns:1fr} }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--stroke);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 4vw;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.2px}
.brand .logo{height:36px; width:auto}
.brand.sm .logo{height:28px; width:auto}
.brand span{font-size:1.05rem}
.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:5px 0}
.site-nav{display:flex; gap:22px}
.site-nav a{color:var(--muted); text-decoration:none; padding:10px 6px; border-radius:10px}
.site-nav a:hover, .site-nav a.active{color:var(--text); background:rgba(0,0,0,.05)}

@media (max-width: 840px){
  .nav-toggle{display:block}
  .site-nav{position:fixed; inset:60px 10px auto 10px; background:var(--panel);
    border:1px solid var(--stroke); border-radius:16px; padding:14px; display:none; flex-direction:column;
  }
  .site-nav.open{display:flex}
}

/* Hero */
.hero{
  min-height:68svh;
  display:grid; place-items:center;
  background:
    radial-gradient( 90rem 90rem at -20% -10%, rgba(196,155,99,.1), transparent 40%),
    radial-gradient( 70rem 70rem at 120% 120%, rgba(196,155,99,.05), transparent 40%);
  border-bottom:1px solid var(--stroke);
}
.hero-inner{width:min(950px, 92vw); text-align:center; padding:44px 0}
.hero h1{font-size:clamp(2rem, 1.2rem + 3vw, 3.2rem); line-height:1.15; margin:0 0 12px}
.hero p{margin:0 0 22px; color:var(--muted)}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:999px; text-decoration:none; border:1px solid var(--stroke); color:var(--text); font-weight:600; box-shadow:var(--shadow)}
.btn.primary{background:var(--brand); color:var(--text); border-color:transparent}
.btn.ghost{background:transparent}

/* Cards / grid */
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
@media (max-width: 980px){ .cards{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .cards{grid-template-columns: 1fr} }

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); border-color:#d0d0d0; box-shadow:var(--shadow) }
.card img{ width:100%; height:200px; object-fit:cover; background:#f0f0f0 }
.card .card-body{ padding:14px 14px 18px }
.card h3{ margin:0 0 8px; font-size:1.1rem }
.card p{ margin:0; color:var(--muted) }

/* Cakes */
.cakes-grid .card img{ height:240px }
.meta{ display:grid; grid-template-columns: 70px 1fr; gap:6px 12px; margin-top:10px; font-size:.95rem }
.meta dt{ color:var(--muted) }
.meta dd{ margin:0 }

.filters{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap }
.filters input[type="search"], .filters select{
  background:var(--panel); color:var(--text); border:1px solid var(--stroke);
  padding:10px 12px; border-radius:12px; min-width:260px;
}

/* Contact */
.contact-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px }
@media (max-width: 980px){ .contact-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 540px){ .contact-grid{grid-template-columns: 1fr} }
.contact-card{ background:var(--card); border:1px solid var(--stroke); border-radius:16px; padding:16px }
.contact-card h3{ margin-top:0 }

.media-box{ background:var(--card); border:1px solid var(--stroke); border-radius:16px; overflow:hidden }
.media-box img{ display:block; width:100%; height:100%; object-fit:cover }

/* Footer */
.site-footer{ border-top:1px solid var(--stroke); padding:22px 0; background:var(--panel) }
.footer-grid{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px }
.footer-nav{ display:flex; gap:14px }
.footer-nav a{ color:var(--muted); text-decoration:none }
.footer-nav a:hover, .footer-nav a.active{ color:var(--text) }

/* Utilities */
.note{ margin-top:20px; color:var(--muted) }
.checks{ list-style:none; padding-left:0; margin:12px 0 0 }
.checks li{ position:relative; padding-left:24px; margin:8px 0 }
.checks li::before{ content:"✓"; position:absolute; left:0; color:var(--brand) }


/* Reviews Carousel */
.reviews{ position:relative; display:grid; grid-template-columns: 48px 1fr 48px; gap:10px; align-items:center }
@media (max-width:720px){ .reviews{ grid-template-columns: 1fr } .reviews-nav{ display:none } }
.reviews-viewport{ overflow:hidden; border:1px solid var(--stroke); border-radius:16px; background:var(--card); outline:none }
.reviews-track{ display:flex; transition: transform .4s ease; will-change: transform }
.review{ min-width:100%; padding:22px; display:grid; gap:12px }
.review .quote{ font-size:1.05rem }
.review .who{ display:flex; align-items:center; gap:10px; color:var(--muted) }
.review .who img{ width:44px; height:44px; object-fit:cover; border-radius:10px; border:1px solid var(--stroke) }
.stars{ letter-spacing:2px; color:var(--brand); font-size:1.1rem }
.reviews-nav{ background:transparent; color:var(--text); border:1px solid var(--stroke); width:44px; height:44px; border-radius:12px; cursor:pointer }
.reviews-nav:hover{ background:rgba(0,0,0,.05) }
.reviews-dots{ display:flex; justify-content:center; gap:8px; margin-top:12px }
.reviews-dots button{ width:9px; height:9px; border-radius:999px; border:0; background:#a3a3a3; cursor:pointer }
.reviews-dots button[aria-selected="true"]{ background:var(--brand) }


/* Ensure bitmap logo scales well */
.brand .logo, .brand.sm .logo{ display:block }