/* ====== Brand Colors (from your design) ====== */
:root{
  --cream:#F9F9E7;      /* background */
  --brown:#6B3E37;      /* buttons, footer base */
  --teal:#3E5D58;       /* panels, accents */
  --beige:#D2B48C;      /* press/partner blocks */
  --ink:#111;           /* text */
  --muted:#666;
  --white:#fff;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Inter', Arial, sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
}
img{max-width:100%;display:block}

/* Utility */
.container{width:min(1100px, 92%); margin-inline:auto}
.center{text-align:center}
.section{padding:56px 0}
.btn{
  display:inline-block; padding:.75rem 1.25rem; border-radius:999px;
  background:var(--brown); color:var(--white); text-decoration:none; border:none; cursor:pointer;
  transition:transform .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-2px); opacity:.95}
.btn--ghost{background:transparent; color:var(--brown); border:1.5px solid var(--brown)}
.btn--teal{background:var(--teal)}
.eyebrow{letter-spacing:.22em; font-size:.72rem; color:var(--muted);}

/* Top strip (thin cream) */
.top-strip{height:18px; background:var(--cream)}

/* Header */
.header{position:sticky; top:0; z-index:50; background:var(--white); border-bottom:1px solid #eaeaea}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{font-weight:800; letter-spacing:.15em; text-decoration:none; color:var(--ink)}
.logo span{margin-left:.25ch}
.nav__toggle{display:none; font-size:1.2rem; background:none; border:none; cursor:pointer}
.nav__list{display:flex; gap:22px; list-style:none; padding:0; margin:0}
.nav__list a{text-decoration:none; color:var(--ink)}
.nav__list a.active, .nav__list a:hover{color:var(--brown)}
.actions{display:flex; gap:10px}
.icon-btn{background:#f3f3f3; border:none; padding:.5rem .6rem; border-radius:10px; cursor:pointer}
.icon-btn:hover{background:#e9e9e9}

/* Hero */
.hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center}
.hero__text h1{font-size: clamp(28px, 4vw, 46px); margin:10px 0 8px}
.hero__text .sub{max-width:520px; color:#333}
.hero__stack{position:relative; min-height:420px}
.hero__img{position:absolute; width:68%; border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.15); object-fit:cover; height:78%}
.hero__img--left{left:0; top:10%}
.hero__img--right{right:0; bottom:0}

/* Who we are */
.who{position:relative; isolation:isolate}
.who__bg{position:absolute; inset:0; background:url('assets/images/pattern-bg.png') center/cover no-repeat; opacity:.08; z-index:-1}
.who__grid{display:grid; grid-template-columns: .9fr 1.1fr; gap:32px; align-items:center}
.who__img-wrap{background:var(--white); padding:14px; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.08)}
.who__img-wrap img{border-radius:16px}
.who__card{background:rgba(255,255,255,.9); border:1px solid #eee; border-radius:14px; padding:28px; box-shadow:0 8px 24px rgba(0,0,0,.08)}
.who__card h2{margin:0 0 10px}

/* Featured strip */
.featured__grid{
  display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:18px; align-items:end;
  background:url('assets/images/doodle-bg.png') center/contain repeat; padding:26px; border-radius:14px;
  border:1px solid #eee;
}
.featured__item{overflow:hidden; border-radius:12px}
.featured__item img{transition:transform .5s ease}
.featured__item:hover img{transform:scale(1.05)}
.featured__item--main{position:relative}
.price-tag{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  background:rgba(255,255,255,.92); border:1px solid #ddd; padding:8px 12px; border-radius:999px;
  font-size:.92rem;
}
.price-tag s{color:#888; margin-right:.5rem}

/* Why Choose */
.benefits{position:relative}
.benefits__media{position:absolute; inset:0; z-index:-1; opacity:.35}
.benefits__media img{width:100%; height:100%; object-fit:cover}
.benefits__card{
  margin-inline:auto; max-width:800px; background:var(--teal); color:#ecf2f1;
  padding:28px; border-radius:14px; box-shadow:0 14px 36px rgba(0,0,0,.18);
  text-align:center;
}
.benefits__card .btn{margin-top:8px}

/* Logos row */
.logos__grid{display:grid; grid-template-columns: repeat(5, 1fr); gap:18px; margin-top:18px}
.logo-card{background:var(--beige); display:grid; place-items:center; padding:28px; border-radius:10px}
.logo-card img{max-height:36px; opacity:.85}

/* Footer */
.footer{background:var(--brown); color:#f4e9e8; padding:40px 0 20px; margin-top:34px}
.press-row{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-bottom:26px;
}
.press-card{background:var(--beige); color:#111; padding:28px; border-radius:10px; font-weight:600}
.press-card--center{display:grid; place-items:center; font-size:28px}
.links-row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; padding:20px; background:#5b302a; border-radius:12px
}
.footer h4{margin:0 0 8px}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.footer a{color:#f4e9e8; text-decoration:none}
.footer a:hover{text-decoration:underline}
.newsletter input{
  width:100%; padding:.7rem .9rem; border-radius:10px; border:1.5px solid #c7c7c7; margin:.5rem 0 0.6rem; background:#fff; color:#111;
}
.copy{text-align:center; margin-top:16px; opacity:.85;}

/* Cart drawer */
.cart{position:fixed; right:-380px; top:0; width:320px; height:100dvh; background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.18); transition:right .35s ease; z-index:60; display:flex; flex-direction:column}
.cart.open{right:0}
.cart__header{display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid #eee}
.cart__items{padding:16px; flex:1; overflow:auto}
.cart__footer{padding:16px; border-top:1px solid #eee}
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:55}
.overlay.show{opacity:1; pointer-events:auto}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
.reveal.active{opacity:1; transform:none}
.delay-1{transition-delay:.15s}
.delay-2{transition-delay:.3s}
.delay-3{transition-delay:.45s}
.delay-4{transition-delay:.6s}

/* Responsive */
@media (max-width: 900px){
  .nav__toggle{display:block}
  .nav__list{position:absolute; right:5%; top:64px; background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; display:none; flex-direction:column}
  .nav__list.show{display:flex}
  .hero__grid{grid-template-columns:1fr; gap:18px}
  .hero__stack{min-height:360px}
  .hero__img{position:absolute; width:60%}
  .who__grid{grid-template-columns:1fr; gap:18px}
  .featured__grid{grid-template-columns:1fr; }
  .logos__grid{grid-template-columns: repeat(2, 1fr)}
  .press-row{grid-template-columns:1fr}
  .links-row{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .links-row{grid-template-columns:1fr}
  .hero__img{width:72%}
}