:root{
  color-scheme: light;
  --evergreen:#2E5A3B;
  --deep-forest:#183425;
  --sky:#2C84B8;
  --earth:#C6934B;
  --sand:#E9DBBF;
  --cream:#F3EEE3;
  --charcoal:#1E1E1E;
  --sage:#3D6B4B;
  --font-heading:"DM Serif Display","Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --max:1080px;
  --shadow:0 12px 24px rgba(24,52,37,.14);
  --fast:180ms ease;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);line-height:1.6;background:var(--cream);color:var(--charcoal);min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

header.hero{
  background:
    linear-gradient(165deg,rgba(24,52,37,.9),rgba(46,90,59,.85)),
    url("hero.jpg") center/cover; /* Place hero.jpg in the assets/ folder */
  color:#fff;
  padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,6vw,4rem);
  text-align:center;position:relative;overflow:hidden
}
header.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,52,37,.55),rgba(24,52,37,.7));z-index:0}
.hero-content{position:relative;z-index:1;max-width:36rem;margin:0 auto;display:flex;flex-direction:column;gap:1.25rem;align-items:center}
.hero-logo{width:clamp(120px,26vw,180px);height:auto;margin:0 auto}
.hero h1{font-family:var(--font-heading);font-size:clamp(2.25rem,6vw,3.25rem);margin:0;letter-spacing:.4px}
.hero .headline-alt{display:block;font-size:clamp(1.05rem,3vw,1.25rem);color:rgba(255,255,255,.86)}
.hero p{margin:0;font-size:clamp(1rem,2.6vw,1.125rem);color:rgba(255,255,255,.92)}

.cta-primary{
  background:var(--earth);color:#fff;border-radius:999px;padding:.95rem 2.5rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-size:1rem;min-width:220px;border:none;cursor:pointer;
  transition:transform var(--fast),box-shadow var(--fast);box-shadow:0 14px 34px rgba(198,147,75,.28)
}
.cta-primary:hover,.cta-primary:focus-visible{transform:translateY(-2px);box-shadow:0 16px 36px rgba(198,147,75,.36)}
.cta-primary svg{width:18px;height:18px}

.badge-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 1rem;font-size:.95rem;color:rgba(255,255,255,.9);margin:0;padding:0;list-style:none}
.badge-list li{display:inline-flex;align-items:center;gap:.45rem;background:rgba(243,238,227,.16);padding:.55rem 1rem;border-radius:999px;backdrop-filter:blur(2px)}

main{flex:1 0 auto}
.section{padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,7vw,4rem)}
.brand-story{margin-top:-2rem}
.card{background:#fff;border-radius:18px;padding:clamp(1.5rem,4vw,2rem);box-shadow:var(--shadow)}
.brand-card{max-width:720px;margin:0 auto}

.section-heading{font-family:var(--font-heading);font-size:clamp(1.85rem,4vw,2.4rem);color:var(--deep-forest);text-align:center;margin:0 0 2rem}
.teaser-grid{display:grid;gap:1rem;margin-top:1.5rem}
.teaser-card{border-radius:18px;padding:1.5rem;background:#fff;box-shadow:var(--shadow);display:grid;gap:1rem;text-align:left;min-height:200px;transition:transform var(--fast),box-shadow var(--fast);position:relative;overflow:hidden}
.teaser-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,52,37,.04),rgba(24,52,37,.12))}
.teaser-card:hover,.teaser-card:focus-visible{transform:translateY(-4px);box-shadow:0 16px 32px rgba(24,52,37,.18)}
.teaser-card h3{font-family:var(--font-heading);margin:0;font-size:1.45rem;color:var(--deep-forest)}
.teaser-card p{margin:0;color:var(--charcoal);font-size:.98rem}
.teaser-icon{width:42px;height:42px;border-radius:12px;background:rgba(44,132,184,.1);display:inline-flex;align-items:center;justify-content:center;color:var(--sky)}

.benefits{display:grid;gap:1.5rem;max-width:800px;margin:0 auto}
.benefit{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:var(--shadow);display:flex;gap:1rem;align-items:flex-start}
.benefit .icon{width:38px;height:38px;border-radius:50%;background:rgba(46,90,59,.12);display:inline-flex;align-items:center;justify-content:center;color:var(--evergreen)}
.benefit h3{margin:0 0 .4rem;font-size:1.2rem;color:var(--deep-forest);font-family:var(--font-heading)}

.social{display:grid;gap:1rem;max-width:880px;margin:0 auto}
.quote{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:var(--shadow);position:relative}
.quote::before{content:"“";position:absolute;top:-.5rem;left:1rem;font-size:4rem;color:rgba(198,147,75,.18)}
.quote .by{margin-top:.75rem;font-weight:600;color:var(--evergreen);font-size:.95rem}
.stars{color:#F5B342;font-size:1rem;letter-spacing:1px}

.faq{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(46,90,59,.22)}
.faq button{background:none;border:none;width:100%;text-align:left;padding:1.25rem 0;font-size:1.05rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;color:var(--deep-forest);cursor:pointer}
.faq button:focus-visible{outline:2px solid var(--sky);outline-offset:4px}
.faq-content{max-height:0;overflow:hidden;transition:max-height 240ms ease;color:var(--charcoal);padding-right:1.5rem}
.faq button[aria-expanded="true"] + .faq-content{padding-bottom:1.25rem}
.faq-icon{transition:transform var(--fast);display:inline-flex}
.faq button[aria-expanded="true"] .faq-icon{transform:rotate(180deg)}

.cta-sticky{position:sticky;bottom:0;background:rgba(24,52,37,.96);backdrop-filter:blur(6px);padding:1.5rem clamp(1.25rem,7vw,4rem);display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;z-index:99}
.cta-sticky h2{margin:0;font-family:var(--font-heading);font-size:1.5rem;color:#fff}

footer{background:var(--deep-forest);color:rgba(243,238,227,.88);padding:2rem clamp(1.25rem,7vw,4rem);text-align:center;font-size:.9rem}
footer a{color:rgba(44,132,184,.88);text-decoration:underline}

@media(min-width:640px){
  .brand-card{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:center}
  .teaser-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .benefits{grid-template-columns:repeat(3,minmax(0,1fr))}
  .social{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}