:root{--clr-primary:#C9A227;--clr-accent:#D81B74;--clr-deep:#0B3D2E;--clr-ink:#111;--radius:14px;--maxw:1200px}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--clr-ink)}
.container{width:min(100% - 2rem,var(--maxw));margin-inline:auto}
a{color:var(--clr-deep);text-decoration:none}a:hover{text-decoration:underline}
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:var(--radius);background:var(--clr-accent);color:#fff;font-weight:700}
.btn--gold{background:var(--clr-primary);color:#111}
header.site-header{position:sticky;top:0;background:#fff;border-bottom:2px solid var(--clr-primary);z-index:10}
.nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 0}
.nav img.logo{height:60px;width:auto} /* smaller header logo */
.hero{background:linear-gradient(135deg, #fce1ef, #f89ac7 35%, #ff7f50 72%, #fff4e0)}
.hero .wrap{display:grid;grid-template-columns:1.3fr .9fr;gap:2rem;padding:2.5rem 0}
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:1.1rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.section{padding:2rem 0}.section--tint{background:#FFF8EF}
.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid #eee;padding:.8rem;text-align:left}
.footer{background:#0c0c0c;color:#ccc;padding:2rem 0;text-align:center}
.footer a{color:var(--clr-primary)}.footer-logo{height:56px;width:auto;margin-bottom:1rem}
.social-row a{margin:0 .4rem;display:inline-block;font-size:1.2rem;color:var(--clr-primary)}
.social-row a:hover{color:var(--clr-accent)}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.nav img.logo{height:52px}}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif}


img{max-width:100%;height:auto}
h1{font-size:clamp(1.6rem,4vw,2.4rem)}
h2{font-size:clamp(1.2rem,3.2vw,1.8rem)}
h3{font-size:clamp(1rem,2.5vw,1.3rem)}
/* Make CTAs stack and fill width on small screens */
@media (max-width: 640px){
  .nav{padding:.4rem 0}
  .nav img.logo{height:44px}
  .nav ul{gap:.5rem}
  .hero .wrap{padding:1.2rem 0}
  .card{padding:.9rem}
  .btn{width:100%; text-align:center}
  ul{padding-left:1.1rem}
}
/* Table scroll wrapper to prevent overflow on mobile */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.table{min-width:640px}