:root{
  --heading: #1B3457;
  --heading-tint: #24466f;
  --body-text: #000000;
  --tint-b: #f4f7fb;
  --accent-green: #2f7a4d;
  --border-soft: #e2e8f0;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Lato', Arial, sans-serif;
  color:var(--body-text);
  font-size:19px;
  line-height:1.65;
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Playfair Display', Georgia, serif; color:var(--heading); line-height:1.25; font-weight:700;}
h1{font-size:2.3rem;}
h2{font-size:1.85rem; margin-bottom:14px;}
h3{font-size:1.3rem; margin-bottom:8px;}
h4{font-size:1.02rem; color:var(--accent-green); margin-bottom:6px;}
p{margin-bottom:14px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block; height:auto;}
ul{margin:0 0 14px 22px;}
li{margin-bottom:8px;}
.container{max-width:1100px; margin:0 auto; padding:0 20px;}
.section{padding:54px 0;}
.section.tint{background:var(--tint-b);}
.center{text-align:center;}
.eyebrow{display:inline-block; text-transform:uppercase; letter-spacing:1.5px; font-size:0.8rem; font-weight:700; color:var(--accent-green); margin-bottom:10px;}
.btn{display:inline-block; background:var(--heading); color:#fff !important; font-weight:700; padding:15px 32px; border-radius:6px; font-size:1.02rem; text-align:center; border:2px solid var(--heading); transition:all .2s ease; cursor:pointer;}
.btn:hover{background:#fff; color:var(--heading) !important;}
.btn-outline{background:transparent; color:var(--heading) !important;}
.btn-outline:hover{background:var(--heading); color:#fff !important;}

/* HEADER */
header{background:var(--heading); position:sticky; top:0; z-index:999;}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:1100px; margin:0 auto;}
.logo{font-family:'Playfair Display', serif; font-size:1.5rem; font-weight:800; color:#fff;}
.nav-desktop{display:flex; align-items:center; gap:26px;}
.nav-desktop a{color:#fff; font-weight:600; font-size:0.95rem;}
.nav-desktop a:hover{color:#cfe0ff;}
.header-right{display:flex; align-items:center; gap:16px;}
.header-order-btn{background:#fff; color:var(--heading) !important; font-weight:700; padding:11px 20px; border-radius:5px; font-size:0.92rem;}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.hamburger span{display:block; width:26px; height:3px; background:#fff; border-radius:2px;}
.mobile-nav{display:none; flex-direction:column; background:var(--heading-tint); padding:0 20px;}
.mobile-nav.open{display:flex; padding:14px 20px;}
.mobile-nav a{color:#fff; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.15); font-weight:600;}

/* PAGE BANNER */
.page-banner{background:#fff; padding:40px 0 6px; border-bottom:1px solid var(--border-soft);}
.page-banner .crumb{font-size:0.85rem; color:#667; margin-bottom:10px;}
.page-banner .crumb a{color:var(--accent-green); font-weight:700;}
.page-banner h1{max-width:880px;}
.page-banner .sub{font-size:1.1rem; color:#333; max-width:760px; margin-top:8px;}

/* CONTENT ARTICLE */
.article{max-width:820px; margin:0 auto;}
.article h2{margin-top:6px;}
.article ul{margin-left:22px;}

/* CARD GRID (benefits / who-for style) */
.card-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:24px;}
.plain-card{background:#fff; border:1px solid var(--border-soft); border-radius:10px; padding:22px;}
.plain-card h3{font-size:1.05rem;}

/* INGREDIENT CARDS */
.ingredients-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:24px;}
.ing-card{background:#fff; border:1px solid var(--border-soft); border-radius:10px; padding:22px;}
.ing-card .tag{display:inline-block; background:var(--tint-b); color:var(--heading); font-size:0.75rem; font-weight:700; padding:4px 10px; border-radius:20px; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.5px;}

/* TIMELINE */
.timeline{margin-top:26px; display:flex; flex-direction:column; gap:20px;}
.timeline-step{display:flex; gap:20px; background:#fff; border:1px solid var(--border-soft); border-radius:10px; padding:22px;}
.timeline-num{flex:0 0 50px; height:50px; border-radius:50%; background:var(--heading); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:800;}

/* FAQ */
details{background:#fff; border:1px solid var(--border-soft); border-radius:8px; margin-bottom:12px; padding:16px 20px;}
summary{font-weight:700; cursor:pointer; color:var(--heading); font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-size:1.3rem; color:var(--accent-green); font-weight:800; margin-left:14px;}
details[open] summary::after{content:"–";}
details p{margin-top:12px; margin-bottom:0; color:#222;}

/* CTA STRIP */
.cta-strip{background:var(--heading); color:#fff; text-align:center; padding:54px 0;}
.cta-strip h2{color:#fff;}
.cta-strip p{color:#dbe6f5; max-width:640px; margin:0 auto 20px;}
.cta-strip img{max-width:300px; width:100%; margin:16px auto 26px;}
.cta-strip .btn{background:#fff; color:var(--heading) !important; border-color:#fff;}
.cta-strip .btn:hover{background:transparent; color:#fff !important;}

/* CROSS-LINK NAV */
.crosslinks{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:10px;}
.crosslinks a{display:block; background:#fff; border:1px solid var(--border-soft); border-radius:10px; padding:16px; font-weight:700; color:var(--heading) !important; text-align:center; font-size:0.92rem;}
.crosslinks a:hover{border-color:var(--heading);}

/* FOOTER */
footer{background:#12233d; color:#c8d3e3; padding:50px 0 20px; font-size:0.92rem;}
.footer-top{display:grid; grid-template-columns:1.3fr 0.85fr 0.85fr; gap:36px; margin-bottom:34px;}
footer h4{color:#fff; font-size:1rem; margin-bottom:14px;}
footer a{color:#c8d3e3;}
footer a:hover{color:#fff;}
footer ul{margin:0; padding:0;}
footer li{list-style:none; margin-bottom:9px;}
.footer-brand-name{font-family:'Playfair Display',serif; font-size:1.3rem; color:#fff; font-weight:800; margin-bottom:10px;}
.footer-legal{border-top:1px solid rgba(255,255,255,0.12); padding-top:20px; font-size:0.8rem; color:#96a4bc; line-height:1.7;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); margin-top:20px; padding-top:16px; text-align:center; font-size:0.8rem; color:#96a4bc;}

/* LEGAL PAGES */
.legal-body h2{margin-top:30px;}
.legal-body p, .legal-body li{color:#111;}
.legal-updated{font-size:0.85rem; color:#667; margin-bottom:26px;}

@media(max-width:860px){
  h1{font-size:1.75rem;}
  h2{font-size:1.45rem;}
  .nav-desktop{display:none;}
  .hamburger{display:flex;}
  .card-grid, .ingredients-grid, .crosslinks{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
}