:root{
  --navy:#11151C; --beige:#DFDFD8; --teal:#22BB9E; --teal-dark:#1a9c84;
  --green:#4C6762;
  --ink:#11151C; --ink-soft:rgba(17,21,28,.78);
  --paper-soft:rgba(255,255,255,.82);
  --serif:'Inknut Antiqua', Georgia, serif;
  --sans:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--beige); color:var(--ink-soft);
  font-family:var(--sans); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; color:var(--ink);
  letter-spacing:.015em; line-height:1.25; margin:0 0 .5em;}
h1{font-size:clamp(34px,5vw,52px);}
h2{font-size:clamp(26px,3.4vw,32px);}
h3{font-size:20px;}
p{margin:0 0 1.1em;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}

/* buttons */
.btn{display:inline-block; background:var(--teal); color:#fff;
  font-family:var(--sans); font-size:15px; letter-spacing:1px; line-height:1;
  padding:17px 34px; border:0; cursor:pointer; transition:background .18s ease;
  text-align:center;}
.btn:hover{background:var(--teal-dark);}
.btn--block{display:block; width:100%;}
.btn--ghost{background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(17,21,28,.5);}
.btn--ghost:hover{background:rgba(17,21,28,.06);}

/* top utility bar */
.utility{background:var(--navy); color:var(--paper-soft); font-size:14px;
  letter-spacing:.4px; text-align:center; padding:9px 16px;}

/* header */
.site-header{background:var(--beige); padding:34px 0 14px; text-align:center;}
.brand{font-family:var(--serif); font-size:clamp(30px,4vw,42px); font-weight:500;
  color:var(--ink); letter-spacing:.02em; display:inline-block;}
.mainnav{margin-top:16px;}
.mainnav ul{list-style:none; margin:0; padding:0; display:flex; gap:34px;
  justify-content:center; flex-wrap:wrap;}
.mainnav a{font-size:15px; letter-spacing:.4px; padding-bottom:3px;
  border-bottom:1px solid transparent;}
.mainnav a:hover,.mainnav a.active{border-bottom-color:var(--ink);}

/* teal tagline bar */
.tagline{background:var(--teal); color:#fff; text-align:center;
  font-family:var(--serif); font-size:clamp(18px,2.4vw,24px); padding:22px 16px;}

/* generic section */
.section{padding:72px 0;}
.section--navy{background:var(--navy); color:var(--paper-soft);}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff;}
.section--tight{padding:48px 0;}
.section__title{text-align:center; margin-bottom:40px;}

/* featured product / product layout */
.product{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.product__media img{width:100%; margin-bottom:16px;}
.thumbs{display:flex; gap:12px;}
.thumbs img{width:90px; height:90px; object-fit:cover; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(17,21,28,.15); transition:box-shadow .15s ease, opacity .15s ease;}
.thumbs img:hover{opacity:.85;}
.thumbs img.active{box-shadow:inset 0 0 0 2px var(--teal);}
.product__title{margin-bottom:.25em;}
.price{font-size:20px; color:var(--ink); margin:6px 0 22px;}
.variant{margin:18px 0;}
.variant .label{font-size:13px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); margin-bottom:8px;}
.chips{display:flex; gap:10px; flex-wrap:wrap;}
.chip{font-size:14px; padding:9px 16px; box-shadow:inset 0 0 0 1px rgba(17,21,28,.35);}
.buybox{margin-top:26px;}
.buybox .note{font-size:13px; letter-spacing:.3px; margin-top:10px; opacity:.75;}
.rte{margin-top:40px;}
.rte hr{border:0; border-top:1px solid rgba(17,21,28,.2); margin:26px 0;}
.rte h3{font-family:var(--serif); margin-top:26px;}
.rte table{border-collapse:collapse; width:100%; font-size:14px; margin:10px 0;}
.rte th,.rte td{border:1px solid rgba(17,21,28,.25); padding:7px 10px; text-align:left;}
.section--navy .rte hr{border-top-color:rgba(255,255,255,.25);}

/* collection grid */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:40px;}
.card{text-align:center;}
.card__media{background:#fff; box-shadow:inset 0 0 0 1px rgba(17,21,28,.08);
  aspect-ratio:1/1; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.card__media img{width:100%; height:100%; object-fit:cover;}
.card__title{font-family:var(--serif); font-size:19px; margin:16px 0 4px;}
.card__price{font-size:16px;}

/* testimonials */
.buzz{display:grid; grid-template-columns:repeat(4,1fr); gap:34px;}
.quote{text-align:center;}
.quote p{font-family:var(--serif); font-size:18px; color:#fff; line-height:1.4;}
.quote cite{display:block; margin-top:14px; font-style:normal; font-size:13px;
  letter-spacing:1px; text-transform:uppercase; color:var(--paper-soft);}
.quote cite em{color:var(--teal); font-style:italic; text-transform:none; letter-spacing:.3px;}

/* sustainability */
.banner-img{width:100%; height:clamp(240px,34vw,460px); object-fit:cover; display:block;}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:44px;}
.trio h3{font-family:var(--serif); color:#fff; letter-spacing:2px; margin-bottom:12px;}

/* faq */
.faq{max-width:820px; margin:0 auto;}
.faq details{border-bottom:1px solid rgba(17,21,28,.2);}
.faq summary{cursor:pointer; list-style:none; padding:20px 0; font-family:var(--serif);
  font-size:19px; color:var(--ink); display:flex; justify-content:space-between; gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; font-family:var(--sans); font-size:24px; line-height:1;}
.faq details[open] summary::after{content:'\2013';}
.faq details[open] summary{padding-bottom:6px;}
.faq .answer{padding:0 0 22px; max-width:720px;}

/* about / prose */
.prose{max-width:760px; margin:0 auto;}
.prose img{margin:0 auto 34px;}
.prose h2{margin-top:1.4em;}

/* contact */
.contact-lead{text-align:center; max-width:640px; margin:0 auto 36px;}
.contact-lead a:not(.btn){color:var(--teal); border-bottom:1px solid var(--teal);}
.map{width:100%; max-height:520px; object-fit:cover;}

/* footer */
.site-footer{background:var(--beige); border-top:1px solid rgba(17,21,28,.15);
  padding:56px 0 30px; text-align:center;}
.newsletter{max-width:460px; margin:0 auto 40px;}
.newsletter h2{font-size:24px;}
.socials{display:flex; gap:22px; justify-content:center; margin:24px 0; font-size:14px;
  letter-spacing:.5px;}
.socials a{border-bottom:1px solid transparent;}
.socials a:hover{border-bottom-color:var(--ink);}
.footer-meta{font-size:13px; opacity:.7; margin-top:22px;}
.footer-meta a{border-bottom:1px solid rgba(17,21,28,.4);}

/* responsive */
@media(max-width:900px){
  .product{grid-template-columns:1fr; gap:34px;}
  .buzz{grid-template-columns:repeat(2,1fr);}
  .trio{grid-template-columns:1fr; gap:30px; text-align:center;}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr;}
  .buzz{grid-template-columns:1fr;}
  .mainnav ul{gap:20px;}
  .section{padding:52px 0;}
}