:root{
  --sage-primary:#7A9B76;
  --sage-dark:#5D7D5A;
  --soft-gold:#D4AF6A;
  --lavender:#B8A7D4;
  --bg:#FDFCF8;
  --white:#fff;
  --text:#1A2E1A;
  --muted:#5A6B5A;
  --maxw:1200px;
  --radius:12px;
  --transition:200ms ease;
  --focus: 3px solid rgba(122,155,118,0.18);
  --header-height:84px;
}
*{box-sizing:border-box}
html{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;scroll-behavior:smooth}
body{background: rgba(255, 215, 0, 0.3);color:var(--text);margin:0;-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw);margin:0 auto;padding:30px 20px;}

/* Skip link */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem 1rem;background:var(--sage-primary);color:white;border-radius:6px;z-index:9999}

/* Header B2 */
.site-header{position:sticky;top:0;z-index:1200;background:white;border-bottom:1px solid rgba(0,0,0,0.05);box-shadow:0 8px 24px rgba(10,12,10,0.06);height:120px;}
.header-inner{display:flex;align-items:center;justify-content:flex-start;gap:1rem;height:var(--header-height);padding:0 1rem}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--text);flex:0 0 auto}
.logo{width:136px;height:100px;border-radius:12px;background:linear-gradient(135deg,var(--sage-primary),var(--lavender));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:1.05rem}
.brand-text{line-height:1}
.brand-name{font-weight:700;font-size:1.02rem}
.brand-tag{font-size:.78rem;color:var(--muted)}

/* Right aligned nav area */
.nav-area{margin-left:auto;display:flex;align-items:center;gap:1rem}
nav ul.main-nav{display:flex;gap:1rem;list-style:none;padding:0;margin:0}
nav ul.main-nav a{display:inline-block;padding:.55rem .75rem;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600;transition:var(--transition);letter-spacing:0.2px}
nav ul.main-nav a:hover, nav ul.main-nav a:focus{color:var(--sage-dark);background:rgba(122,155,118,0.04);outline:none}
nav ul.main-nav a.active{color:var(--sage-dark);background:rgba(122,155,118,0.06)}

/* CTA - WhatsApp only */
.header-cta{display:flex;align-items:center;gap:.6rem}
.cta-whatsapp{background:linear-gradient(90deg,#2ecc71,#27ae60);color:white;padding:.6rem 1rem;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(46,204,113,0.12)}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 480px;align-items:center;gap:2.5rem;padding:6.25rem 0 3.5rem}
.hero .copy h1{font-family:'Playfair Display',serif;font-size:2.6rem;margin:0 0 .8rem;color:var(--sage-dark)}
.hero .copy p{color:var(--muted);font-size:1.05rem;margin-bottom:1.25rem}
.hero .actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero .visual{border-radius:16px;overflow:hidden;box-shadow:0 18px 48px rgba(10,15,10,0.08);min-height:360px;background:center/cover no-repeat}

/* Grid and cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.card{background:var(--white);padding:1.25rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.05);}
.card h3{margin:0 0 .5rem;font-size:1.05rem}

/* Content layout */
.content-grid{display:grid;grid-template-columns:1fr 360px;gap:2.5rem;align-items:start;margin-top:1.5rem}
.aside{background:var(--white);padding:1.25rem;border-radius:12px;border-left:5px solid var(--lavender);box-shadow:0 8px 26px rgba(0,0,0,0.04);position:sticky;top:calc(var(--header-height) + 16px)}

/* Methods */
.methods{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.method{background:var(--white);padding:1.25rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.05);position:relative}
.method::before{content:'';position:absolute;top:0;left:0;width:100%;height:6px;background:linear-gradient(90deg,var(--soft-gold),var(--sage-primary));border-radius:12px 12px 0 0}

/* Quote and footer */
.quote{background:var(--white);padding:1.5rem;border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,0.04);text-align:center;font-family:'Playfair Display',serif;font-size:1.25rem;color:var(--text)}
footer.site-footer{background:var(--sage-primary);color:white;padding:2rem 0;margin-top:3rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* Responsive */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;gap:1.5rem;padding:4rem 0}
  .content-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .methods{grid-template-columns:1fr}
  nav ul.main-nav{gap:.5rem;overflow:auto}
}
@media(max-width:600px){
  .logo{width:48px;height:48px}
  .hero .copy h1{font-size:1.6rem}
  .hero .visual{min-height:220px}
}