:root{
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-serif: 'Merriweather', 'Georgia', serif;
  --base-size: 16px;
  /* Theme-unique variables (not defined in main.css) */
  --brand-accent:#b9935a;
  --brand-muted:#c9bfa8;
  --space-sm:0.5rem;
  --space:1rem;
  --space-lg:2rem;
  --brand-gold: #c59b48;
  --primary-color: #b9935a;
}

*{box-sizing:border-box}
html{font-family:var(--font-sans);font-size:var(--base-size)}
.hero-banner{background-size:cover;background-position:center;border-radius:12px;overflow:hidden}
/* body styles inherited from main.css */
.container{max-width:min(95vw, var(--container));width:100%;margin:0 auto;padding:0 1.25rem}

/* Utility helpers */
.flex{display:flex;gap:var(--space)}
.center{display:flex;align-items:center;justify-content:center}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Header & Nav: inherited from main.css */

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:3.5rem 0;align-items:center}
.hero .kicker{display:inline-block;padding:.35rem .8rem;background:var(--brand-accent);color:#fff;border-radius:999px;font-weight:700}
.hero h1{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.6rem,4.5vw,2.6rem);line-height:1.08;margin:.25rem 0;letter-spacing:0}
.hero p{color:var(--muted);margin-bottom:1rem;font-size:clamp(0.95rem,2.4vw,1.05rem)}

/* Cards */
.card{background:var(--surface);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(2,38,58,0.04);box-shadow:0 8px 20px rgba(2,24,42,0.04)}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.card-body{padding:1rem}
.card-title{font-weight:600;margin-bottom:.4rem;font-size:1.05rem}
.card-sub{color:var(--muted);font-size:.95rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:10px;border:0;font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--brand-accent),#d19b5a);color:#fff;box-shadow:0 12px 30px rgba(185,147,90,0.12)}
.btn-ghost{background:transparent;border:1px solid rgba(2,38,58,0.06);color:var(--brand-ink)}

/* Responsive helpers */
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:1.25rem}.nav-links{display:none}.brand-center-title{display:flex}}

/* Global heading scale: inherited from main.css */

/* Reduce heavy display weights on small screens */
@media (max-width:420px){h1{font-size:clamp(1.25rem,7vw,1.8rem)}h2{font-size:clamp(1rem,5vw,1.35rem)}}

/* Mobile tuning: reduce hero dominance and image heights so more content shows above the fold */
@media (max-width:420px){
  .hero{padding:1rem 0;gap:1rem;min-height:48vh}
  .hero h1{font-size:1.15rem;line-height:1.12;margin:.2rem 0}
  .hero p{font-size:0.9rem}
  .hero .kicker{padding:.25rem .6rem;font-size:.85rem}
  .card img{height:160px;object-position:center}
  .card-body{padding:.9rem}
  .btn{padding:.6rem .85rem;font-size:.95rem}
}

/* Enhanced mobile reductions and header hide behavior */
@media (max-width:420px){
  html{font-size:15px}
  body{line-height:1.65}
  .hero{min-height:40vh;padding:0.75rem 0}
  .hero h1{font-size:1rem;line-height:1.08;margin:.15rem 0;font-weight:700}
  /* clamp hero heading to 2 lines to avoid overflow */
  .hero h1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero p{font-size:.85rem;color:var(--muted)}
  .card img{height:140px}
  .card-body{padding:.75rem}
  .btn{padding:.5rem .75rem;font-size:.95rem}
}

/* Header hide on scroll */
header{transition:transform .28s ease,opacity .28s ease}
.header-hidden{transform:translateY(-100%);opacity:0}

/* Keep compatibility */
.img-responsive,img{width:100%;height:auto;display:block}

/* Small tweaks for forms and buttons to avoid overflow */
button, .btn{white-space:normal;overflow-wrap:break-word;word-break:break-word}
button > span, .btn > span{display:inline-block;word-break:break-word}

/* Footer base inherits from main.css */
.site-footer {
  margin-top: 2rem;
}

/* Make sure inputs inherit font and sizing */
input,textarea,select{font:inherit}

/* Global mobile gutters: keep a consistent side margin across all pages */
@media (max-width:768px){
  main .container{padding-left:0.75rem!important;padding-right:0.75rem!important}
}
@media (max-width:420px){
  main .container{padding-left:0.5rem!important;padding-right:0.5rem!important}
}

/* End theme */