/* =========================================================
   Premium Brochure Style — RESPONSIVE & SAFE
========================================================= */

:root{
  --bg:#f5f6f7;
  --paper:#ffffff;

  --gold:#c79a3b;
  --teal:#0a6f73;
  --teal-dark:#064e50;
  --muted:#5f6368;
  --ink:#0f172a;

  --radius:14px;
  --container:1100px;
  --shadow:0 16px 45px rgba(0,0,0,0.08);

  --serif:'Merriweather','Georgia',serif;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;

  --accent-gradient:linear-gradient(135deg,var(--teal),var(--teal-dark));
}

/* --------------------
   Reset & Base
-------------------- */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --------------------
   Layout Container
-------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,24px);
}

/* --------------------
   Header / Hero
-------------------- */
.hero-header{
  background:var(--accent-gradient);
  color:#fff;
  border-radius:0 0 20px 20px;
  box-shadow:var(--shadow);
  position:relative;
  z-index: 100;
}

.hero-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:80px;
}

/* Branding */
.brand-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:56px;
  height:56px;
  padding:8px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  flex-shrink:0;
}

.brand-title{
  font-size:clamp(0.95rem,2.5vw,1.05rem);
  font-weight:600;
  line-height:1.2;
}

.brand-sub{
  font-size:0.8rem;
  color:#e5e7eb;
}

/* --------------------
   Navigation (Desktop)
-------------------- */
.main-nav{
  display:flex;
  gap:12px;
  align-items:center;
}

.nav-item{
  color:#f1f5f9;
  text-decoration:none;
  padding:8px 12px;
  border-radius:8px;
  font-weight:500;
  white-space:nowrap;
}

.nav-item:hover,
.nav-item.active{
  background:rgba(255,255,255,0.15);
}

.nav-cta{
  background:var(--gold);
  color:#000;
  padding:8px 16px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
}

/* --------------------
   Mobile Menu Button
-------------------- */
.mobile-menu{
  display:none;
  font-size:28px;
  background:none;
  border:none;
  cursor:pointer;
  color:#fff;
  z-index:1100;
}

/* --------------------
   Hero Banner
-------------------- */
.hero-banner{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:clamp(20px,4vw,32px);
  padding:clamp(32px,6vw,48px) 0;
}

/* --------------------
   Content / Cards
-------------------- */
.content{
  padding:clamp(32px,6vw,48px) 0;
}

.card{
  background:var(--paper);
  border-radius:16px;
  padding:clamp(20px,5vw,32px);
  margin-bottom:32px;
  box-shadow:var(--shadow);
}

.intro-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,4vw,32px);
}

/* --------------------
   Footer
-------------------- */
.site-footer{
  background:#0f172a;
  color:#cbd5e1;
  padding:24px 0;
  text-align:center;
}

/* =========================================================
   TABLET & MOBILE
========================================================= */
@media (max-width: 900px){

  .hero-banner,
  .intro-grid{
    grid-template-columns:1fr;
  }

  /* Show hamburger */
  .mobile-menu{
    display:block;
    position:absolute;
    top:22px;
    right:20px;
  }

  /* Hide desktop nav */
  .main-nav{
    display:none;
    position:absolute;
    top:80px; /* adjust depending on header height */
    right:16px;
    background:#ffffff;
    flex-direction:column;
    width:min(90vw,260px);
    padding:16px;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
    z-index:1000;
    transition: all 0.3s ease;
  }

  /* Show nav when open */
  .main-nav.open{
    display:flex;
  }

  .main-nav a{
    color:var(--ink);
    padding:10px 12px;
    border-radius:8px;
    text-decoration:none;
    font-weight:500;
  }

  .main-nav a:hover{
    background:#f2f2f2;
  }
}

/* =========================================================
   SMALL PHONES (320px–375px)
========================================================= */
@media (max-width: 420px){

  .brand-logo{
    width:48px;
    height:48px;
  }

  .brand-title{
    font-size:0.95rem;
  }

  .hero-inner{
    min-height:72px;
  }
}

/* --------------------
   Print Friendly
-------------------- */
@media print{
  body{background:white;color:black}
  .hero-header{background:none;color:black;box-shadow:none}
  .nav-cta,.mobile-menu{display:none}
}