/* Import Google Fonts for HR Unboxed */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');
/* ============ Base ============ */
:root{
  --header-bg:#4b5563;
  --header-text:#fff;
  --nav-hover:#5e5e5e;

  --brand-accent:#0B3C5D;
  --primary:#0B3C5D;
  --primary-600:#0a3554;
  --secondary:#457B9D;
  --text:#0f172a;
  --muted:#64748b;
  --surface:#ffffff;
  --surface-alt:#ecececff;
  --surface-alt-strong:#0b1220; /* for strong contrast sections */
  --border:#e5e7eb;
  --darknavy:#1d3557;
  --blue: #0B3C5D;         /* matches your --primary brand tone */
--deep-navy: #1d3557;    /* you already use --darknavy: #1d3557 */
--text-light: #475569;   /* use your --muted if you prefer */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5em;
}
.center { text-align:center; }

.container{
  width:min(1120px, 92%);
  margin-inline:auto;
}

/* ============ Header (Option B: nav left, CTA right) ============ */
.site-header{
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:60;
}

/* Flex container */
.header-inner{
  display:flex;               /* ← keep flex here */
  align-items:center;
  gap:10px;                   /* nav link spacing handled below */
  padding:14px 0;
  /* IMPORTANT: do NOT use justify-content: space-between here */
}

/* Main nav links */
.main-nav{
  display:flex;
  align-items:center;
  gap:10px;
  /* Remove margin-right:auto here; not needed for this pattern */
}

/* CTA pinned to the right */
.header-cta{
  margin-left:auto;           /* ← pushes CTA to the far right */
}

/* Optional: tighten header height on small screens */
@media (max-width: 900px){
  .main-nav{ gap:8px; flex-wrap:wrap; }
}


.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-logo{
  height:50px; /* increased logo size */
  width:auto;
}
.brand-name{
  color:var(--header-text);
  font-weight:800;
  font-size:1.6rem; /* larger brand name */
  letter-spacing:.2px;
}

.nav-btn{
  color:var(--header-text);
  text-decoration:none;
  font-weight:700;
  font-size:1.2rem; /* larger brand name */
  padding:8px 14px;
  border:2px solid transparent;
  border-radius:10px;
  transition:all .2s ease;
}
.nav-btn:hover,
.nav-btn:focus-visible{
  outline:none;
  border-color:var(--nav-hover);
  color:#fff;
  background:var(--darknavy);
}

/* ============ Hero ============ */
.hero{position:relative; overflow:hidden}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:contrast(.95) brightness(.98);
  z-index:-1;
}
.hero .hero-inner{
  min-height:520px;
  display:grid; grid-template-columns: 1fr 1.2fr; gap:28px;
  align-items:center;
  padding:56px 0;
}
.hero-left{display:flex; align-items:center; justify-content:flex-start}
.hero-logo{
  width:min(420px, 32vw); /* large placeholder roughly equal to combined title+subtitle+buttons */
  height:auto; opacity:.9;
}
.hero-right .hero-title {
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  margin: 0 0 16px 0;
  color: var(--darknavy);
    background: linear-gradient(90deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-accent {
  font-weight: 700;
  color: var(--secondary);
}

.hero-right .hero-subtitle{
  font-size:clamp(1.05rem, 1.4vw, 1.175rem);
  color:#172036; margin:0 0 18px 0;
}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap}
/* Bigger hero CTA */
.hero-ctas .btn {
  font-size: 1.4rem;   /* ~18px */
  padding: 14px 28px;    /* more breathing room */
  border-radius: 12px;   /* slightly larger pill */
}


.hero.hero--tint {
  position: relative;
  background:
    radial-gradient(800px 600px at 20% 30%, rgba(69,123,157,.15) 0%, transparent 70%),
    linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
}

.hero.hero--tint .hero-inner { color:#0b1220; }
.hero.hero--tint .hero-title { color:#0b1220; }


/* Soft vignette / readability boost */
.hero.hero--mesh::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(1200px 600px at 50% 120%, rgba(0,0,0,.45), transparent 60%);
}

/* Keep your existing inner layout; just make text white for contrast */
.hero.hero--mesh .hero-inner { color: #fff; }
.hero.hero--mesh .hero-title { color:#fff; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero.hero--mesh .hero-subtitle { color: color-mix(in oklab, #fff 80%, transparent); }

/* Optional: make logo pop on dark background */
.hero.hero--mesh .hero-logo { filter: drop-shadow(0 8px 30px rgba(0,0,0,.35)); }

/* Mobile tweak (keeps your existing breakpoint) */
@media (max-width: 900px){
  .hero.hero--mesh .hero-inner { text-align:center; }
}


/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:10px;
  font-weight:700; letter-spacing:.2px;
  border:2px solid transparent; text-decoration:none;
  transition:all .2s ease;
}
.btn.primary{ background:var(--primary); color:#fff; }
.btn.primary:hover{ background:#f5f5f5; color:var(--brand-accent); border-color:var(--brand-accent); }
.btn.secondary{ background:var(--secondary); color:#fff; }
.btn.secondary:hover{ background:var(--darknavy); }
.btn.outline{ background:transparent; color:var(--primary); border-color:var(--primary); }
.btn.outline:hover{ background:var(--primary); color:#fff; }
.btn.text{
  color:var(--deep-navy);
  text-decoration:none;
  font-weight:700;
  padding:8px 14px;
  border:2px solid transparent;
  border-radius:999px;
  transition:all .2s ease;	
  background:transparent; 
  }
.btn.text:hover{
	outline:none;
	text-decoration:underline;
	color:var(--darknavy);
	background:transparent;
}

/* ============ Sections ============ */
.section{ padding:64px 0; }
/* Anchor offset for sticky header */
#about,
#membership,
#inside,
#insights,
#numbers {
  scroll-margin-top: 72px; /* adjust to match header height */
}
.section-title{
  margin:0 0 22px 0;
  font-size:clamp(1.6rem, 3.5vw, 3rem);
  text-align:center;
  letter-spacing:.2px;
}
.section-subtitle{
  font-size:clamp(1.05rem, 1.4vw, 1.175rem);
  margin-top: -12px;   /* reduce gap above */
  margin-bottom: 16px; /* keep some space below if needed */
  text-align: center;
  letter-spacing: .2px;
  font-style: italic;
  font-weight: 400;
}

/* About / Features (restored feel; modest size bump) */
.features{
  display:grid; gap:22px;
  grid-template-columns: repeat(3, 1fr);
}
.feature{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px; padding:20px;
  text-align:center;
}
.feature-icon{
  width:80px; height:80px; /* modest increase, not 2x */
  margin:0 auto 12px auto;
  display:grid; place-items:center;
  border-radius:16px;
  background:var(--surface-alt);
  border:1px solid var(--border);
  font-size:36px;
}

.checklist {
  list-style-type: "✓ ";   /* Unicode checkmark with trailing space */
  padding-left: 2.5em;     /* makes room for the checkmark */
  text-align: left;        /* <-- force left alignment */
  margin: 0;
}
.checklist li {
  margin-bottom: .5em;     /* spacing between items */
}
.checklist li::marker {
  content: "✓   ";  /* add extra spaces after checkmark */
  color: var(--blue);
  font-weight: bold;
}

/* Numbers (strong contrast background + white text; cards stay white) */
.numbers{ background:var(--surface-alt-strong); color:#fff; }
.numbers .section-title.light{ color:#fff; }
.stats-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(4, 1fr);
}
.stat{
  padding:18px; background:#fff; border:1px solid var(--border);
  border-radius:14px; text-align:center; color:var(--text);
}
.stat-value{
  font-weight:900;
  font-size: clamp(2.2rem, 4.6vw, 3rem);
  line-height:1.05;
}
.stat-label{
  color:var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}

/* Membership (placeholder restore) */
.membership .membership-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Involved */
.cta-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}
.card-link{text-decoration:none; color:inherit}
.card{
  background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:20px; height:100%;
  display:flex; flex-direction:column; gap:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(10,20,40,.08); }
.card-subtitle {
  display: block;
  text-align: center;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-light);
  margin: -.25rem 0 .75rem; /* tighter spacing */
}
.card-title {
  font-weight: 700;        /* bold but not overly heavy */
  font-size: 1.6rem;      /* ~20px, scaleable */
  text-align: center;
  color: var(--deep-navy); /* ties into your palette */
  margin: 0 0 -.5rem 0;    /* no top margin, small gap to subtitle*/
}
/* Highlights & Teasers - 1 row of 3 */
.three-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}
.teaser{
  background:#fff; border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; gap:12px;
}
.teaser img{ width:100%; height:180px; object-fit:cover; }
.teaser h3{ margin:0 16px; }
.teaser p{ margin:0 16px 12px 16px; }
.teaser .btn{ margin:0 16px 16px 16px; align-self:flex-start; }

/* Responsive 16:9 embed placeholders */
.embed-16x9{ position:relative; width:100%; padding-top:56.25%; background:#000; }
.embed-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; }
.embed-16x9 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* fill the box without distortion */
}

/* Insights */
.insights{ background:var(--surface-alt); }
.insights-flex{
  display:grid; gap:28px;
  grid-template-columns: 1.1fr 1fr;
  align-items:start;
}
.insights-copy p{ margin-top:0; max-width:60ch }
.muted{ color:var(--muted); margin:0 0 8px 0; font-weight:700; letter-spacing:.3px; text-transform:uppercase; font-size:.85rem;}
.quote{
  font-style:italic; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; margin:0 0 12px 0;
}
.quote cite{ display:block; color:var(--muted); margin-top:8px; font-style:normal; }

/* Footer - consistent feel, not a header clone */
.site-footer{
  background:#4b5563; /* related to header bg, slightly darker for separation */
  border-top:1px solid var(--border);
  color:#111;
}
.footer-grid{
  display:grid; gap:22px; padding:28px 0;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items:start;
}
.footer-logo{ height:64px; width:auto; display:block; margin-bottom:8px; }
.footer-tag{ margin:0; color:#fff; }
.footer-col h4{ margin:0 0 10px 0; font-size:1rem; color:#fff; }
.foot-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.foot-links a{ color:#fff; text-decoration:none; }
.foot-links a:hover{ text-decoration:underline; }
.footer-bottom{ border-top:1px solid var(--border); padding:12px 0; color:#fff; }

/* ============ Responsive ============ */
@media (max-width: 900px){
  .hero .hero-inner{ grid-template-columns: 1fr; text-align:center }
  .hero-left{ justify-content:center }
  .hero-logo{ width:min(460px, 70vw) }
  .features{ grid-template-columns: 1fr 1fr }
  .stats-grid{ grid-template-columns: 1fr 1fr }
  .cta-grid{ grid-template-columns: 1fr }
  .three-grid{ grid-template-columns: 1fr }
  .insights-flex{ grid-template-columns: 1fr }
  .footer-grid{ grid-template-columns: 1fr; }
}