/* ==========================================================================
   Traders Co-operative Credit Union (TCCU) — Shared Stylesheet
   Theme: Navy + Gold, adapted from official flyer / pull-up banner
   ========================================================================== */

:root{
  --navy-950:#0b1338;
  --navy-900:#0f1a45;
  --navy-800:#152356;
  --navy-700:#1c2d6b;
  --navy-600:#26397f;
  --navy-500:#33469a;
  --gold-700:#c8860a;
  --gold-600:#e0980f;
  --gold-500:#f5a623;
  --gold-400:#f8b94a;
  --gold-300:#fbcf7c;
  --white:#ffffff;
  --off-white:#f7f8fc;
  --paper:#fbfaf6;
  --ink:#161a2e;
  --ink-muted:#565b75;
  --line:#e6e8f2;

  --grad-navy: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 45%, var(--navy-600) 100%);
  --grad-navy-radial: radial-gradient(circle at 15% 20%, var(--navy-600) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  --grad-gold: linear-gradient(120deg, var(--gold-700) 0%, var(--gold-500) 55%, var(--gold-300) 100%);
  --grad-gold-btn: linear-gradient(120deg, var(--gold-600) 0%, var(--gold-500) 100%);
  --grad-hero-overlay: linear-gradient(180deg, rgba(11,19,56,.15) 0%, rgba(11,19,56,.85) 100%);

  --shadow-sm: 0 2px 10px rgba(15,26,69,.08);
  --shadow-md: 0 10px 30px rgba(15,26,69,.14);
  --shadow-lg: 0 24px 60px rgba(15,26,69,.22);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 28px;
  --container: 1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:800;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--navy-900);
  letter-spacing:-.01em;
}
p{margin:0 0 1em; color:var(--ink-muted); line-height:1.7}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
ul{margin:0; padding:0; list-style:none}
button{font-family:inherit}

.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.section{padding:88px 0}
.section-sm{padding:56px 0}
@media (max-width:768px){
  .section{padding:56px 0}
  .section-sm{padding:36px 0}
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-700);
  background:linear-gradient(120deg, rgba(245,166,35,.14), rgba(245,166,35,.05));
  border:1px solid rgba(245,166,35,.35);
  padding:7px 16px; border-radius:999px; margin-bottom:18px;
}
.eyebrow.on-dark{ color:var(--gold-300); border-color:rgba(248,185,74,.4); background:rgba(248,185,74,.1) }
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-500)}

.section-head{max-width:680px; margin:0 auto 48px; text-align:center}
.section-head h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.section-head p{font-size:1.05rem}
.section-head.left{margin:0 0 40px; text-align:left}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:.95rem;
  padding:14px 28px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{ background:var(--grad-gold-btn); color:var(--navy-950); box-shadow:0 10px 24px rgba(224,152,15,.35) }
.btn-gold:hover{ box-shadow:0 14px 30px rgba(224,152,15,.45) }
.btn-navy{ background:var(--grad-navy); color:var(--white); box-shadow:0 10px 24px rgba(15,26,69,.28) }
.btn-navy:hover{ box-shadow:0 14px 30px rgba(15,26,69,.4) }
.btn-outline{ border-color:rgba(255,255,255,.5); color:var(--white); background:rgba(255,255,255,.05) }
.btn-outline:hover{ background:rgba(255,255,255,.14) }
.btn-outline-navy{ border-color:var(--navy-700); color:var(--navy-800) }
.btn-outline-navy:hover{ background:var(--navy-900); color:var(--white) }
.btn-sm{ padding:10px 20px; font-size:.85rem }
.btn-block{width:100%}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--navy-950); color:rgba(255,255,255,.85);
  font-size:.82rem;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:9px; padding-bottom:9px; gap:16px; flex-wrap:wrap;
}
.topbar-left{display:flex; gap:22px; flex-wrap:wrap}
.topbar a{color:inherit}
.topbar-item{display:inline-flex; align-items:center; gap:7px}
.topbar-item svg{flex:none}
.topbar-social{display:flex; gap:12px}
.topbar-social a{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); transition:background .2s;
}
.topbar-social a:hover{background:var(--gold-500); color:var(--navy-950)}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex:none; position:relative; overflow:hidden;
}
.brand-mark img{width:100%; height:100%; object-fit:contain; display:block}
.brand-text{line-height:1.2}
.brand-text strong{display:block; font-family:'Poppins',sans-serif; font-weight:800; color:var(--navy-900); font-size:.92rem; line-height:1.22}
.brand-text span{display:block; font-size:.72rem; color:var(--gold-700); font-weight:700; letter-spacing:.04em; margin-top:2px}

.main-nav{display:flex; align-items:center; gap:2px}
.main-nav > ul{display:flex; align-items:center; gap:2px}
.main-nav > ul > li{position:relative}
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:5px;
  padding:12px 16px; font-weight:600; font-size:.92rem; color:var(--navy-800);
  border-radius:8px; transition:color .2s, background .2s;
}
.main-nav > ul > li > a:hover, .main-nav > ul > li.active > a{ color:var(--gold-700); background:rgba(245,166,35,.08) }
.main-nav .chev{width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition:transform .2s}
.main-nav li:hover .chev{transform:rotate(225deg); margin-top:2px}

.dropdown{
  position:absolute; top:100%; left:0; min-width:230px;
  background:var(--white); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
  border:1px solid var(--line); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.main-nav li:hover .dropdown{opacity:1; visibility:visible; transform:translateY(4px)}
.dropdown a{display:block; padding:10px 14px; border-radius:8px; font-size:.9rem; color:var(--ink); font-weight:500}
.dropdown a:hover{background:var(--off-white); color:var(--gold-700)}

.nav-cta{display:flex; align-items:center; gap:10px}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px}
.nav-toggle span{width:24px; height:2.5px; background:var(--navy-900); border-radius:2px}

@media (max-width:1080px){
  .main-nav{ position:fixed; inset:0 0 0 auto; width:min(340px,86vw); height:100vh;
    background:var(--white); flex-direction:column; align-items:stretch; padding:90px 20px 30px;
    box-shadow:-16px 0 40px rgba(15,26,69,.2); transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0)}
  .main-nav > ul{flex-direction:column; align-items:stretch; gap:0}
  .main-nav > ul > li > a{padding:14px 10px; border-bottom:1px solid var(--line)}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; display:none; margin-left:10px}
  .main-nav li.open .dropdown{display:block}
  .main-nav li.open .chev{transform:rotate(225deg)}
  .nav-toggle{display:flex}
  .nav-cta .btn:not(.btn-icon-only){display:none}
}
@media (min-width:1081px){ .nav-scrim{display:none !important} }
.nav-scrim{position:fixed; inset:0; background:rgba(11,19,56,.5); z-index:90; opacity:0; visibility:hidden; transition:opacity .3s}
.nav-scrim.show{opacity:1; visibility:visible}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  position:relative; background:var(--grad-navy-radial); color:var(--white);
  padding:70px 0 90px; overflow:hidden;
}
.page-hero .dotgrid{ position:absolute; top:20px; right:6%; width:150px; height:110px; opacity:.5 }
.page-hero .blob{position:absolute; border-radius:50%; filter:blur(2px)}
.page-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:70px;
  background:var(--white);
  border-radius:50% 50% 0 0/48px 48px 0 0;
  transform:scaleX(1.4);
}
.page-hero .container{position:relative; z-index:2}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:.85rem; color:rgba(255,255,255,.65); margin-bottom:18px}
.breadcrumb a:hover{color:var(--gold-400)}
.page-hero h1{color:var(--white); font-size:clamp(2rem,4vw,3rem); max-width:760px}
.page-hero p.lead{color:rgba(255,255,255,.78); max-width:620px; font-size:1.08rem}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative; background:var(--grad-navy-radial); color:var(--white);
  padding:70px 0 130px; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; top:-120px; right:-120px; width:420px; height:420px;
  background:var(--grad-gold); border-radius:50%; opacity:.18; filter:blur(10px);
}
.hero .dotgrid{position:absolute; top:60px; right:8%; width:160px; height:120px; opacity:.55}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; z-index:2}
.hero-copy h1{color:var(--white); font-size:clamp(2.3rem,4.6vw,3.4rem)}
.hero-copy h1 .accent{
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy p.lead{color:rgba(255,255,255,.78); font-size:1.12rem; max-width:540px}
.hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.hero-stats{display:flex; gap:34px; margin-top:44px; flex-wrap:wrap}
.hero-stats div strong{display:block; font-family:'Poppins',sans-serif; font-size:1.6rem; color:var(--gold-400)}
.hero-stats div span{font-size:.82rem; color:rgba(255,255,255,.65)}

.hero-art{position:relative}
.hero-photo{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.16);
  aspect-ratio:4/5; margin-bottom:22px;
}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block}
.hero-photo::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,19,56,0) 32%, rgba(11,19,56,.6) 68%, rgba(11,19,56,.95) 100%);
}
.hero-photo-caption{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 28px}
.hero-photo-caption h3{color:#fff; font-size:1.2rem; margin:14px 0 8px}
.hero-photo-caption p{color:rgba(255,255,255,.78); font-size:.9rem; margin:0}
.hero-photo .badge-founding{
  position:absolute; top:-18px; right:-14px; z-index:2; background:var(--grad-gold); color:var(--navy-950);
  border-radius:50%; width:112px; height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow:0 14px 30px rgba(224,152,15,.5); border:3px solid var(--white);
  font-family:'Poppins',sans-serif; transform:rotate(6deg);
}
.hero-photo .badge-founding b{font-size:1.5rem; line-height:1}
.hero-photo .badge-founding small{font-size:.56rem; font-weight:700; letter-spacing:.04em}
.hero-mini-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px}
.hero-mini{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:18px}
.hero-mini svg{color:var(--gold-400); margin-bottom:10px}
.hero-mini strong{display:block; color:var(--white); font-family:'Poppins',sans-serif; font-size:.95rem; margin-bottom:4px}
.hero-mini span{font-size:.8rem; color:rgba(255,255,255,.65)}

.wave-bottom{position:absolute; left:0; right:0; bottom:-2px; line-height:0; z-index:1}
.wave-bottom svg{width:100%; height:auto; display:block}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr}
  .hero{padding-bottom:150px}
}

/* ---------- Quick action strip ---------- */
.quick-actions{position:relative; z-index:3; margin-top:-90px}
.quick-actions .grid3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.quick-card{
  background:var(--white); border-radius:var(--radius); padding:30px 26px;
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.quick-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px rgba(15,26,69,.2)}
.quick-card .icon-badge{margin-bottom:16px}
.quick-card h3{font-size:1.15rem; margin-bottom:8px}
.quick-card p{margin-bottom:16px; font-size:.94rem}
.quick-card .link-arrow{font-weight:700; color:var(--gold-700); font-size:.9rem; display:inline-flex; align-items:center; gap:6px}
@media (max-width:860px){ .quick-actions .grid3{grid-template-columns:1fr} .quick-actions{margin-top:-60px} }

/* ---------- Icon badges (Own/Grow/Participate/Build style) ---------- */
.icon-badge{
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--grad-navy); color:var(--gold-400); flex:none;
  box-shadow:0 8px 18px rgba(15,26,69,.25);
}
.icon-badge.lg{width:72px; height:72px}
.icon-badge.gold{background:var(--grad-gold); color:var(--navy-950)}
.icon-badge.outline{background:var(--white); border:2px solid var(--navy-800); color:var(--navy-800); box-shadow:none}

/* ---------- Pillars (Own Grow Participate Build) ---------- */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md)}
.pillar{background:var(--navy-900); color:var(--white); padding:34px 22px; text-align:center; position:relative; border-right:1px solid rgba(255,255,255,.1)}
.pillar:last-child{border-right:none}
.pillar .icon-badge{margin:0 auto 14px}
.pillar h4{color:var(--white); font-size:1.02rem; margin-bottom:4px}
.pillar p{color:rgba(255,255,255,.65); font-size:.85rem; margin:0}
@media (max-width:860px){ .pillars{grid-template-columns:1fr 1fr} .pillar{border-bottom:1px solid rgba(255,255,255,.1)} }
@media (max-width:520px){ .pillars{grid-template-columns:1fr} }

/* ---------- Product / service cards ---------- */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media (max-width:980px){ .grid4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid4,.grid3,.grid2{grid-template-columns:1fr} }

.product-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; position:relative; overflow:hidden; transition:transform .25s, box-shadow .25s, border-color .25s;
  height:100%; display:flex; flex-direction:column;
}
.product-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-gold);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.product-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.product-card:hover::before{transform:scaleX(1)}
.product-card h3{font-size:1.2rem; margin-bottom:10px}
.product-card p{font-size:.94rem; margin-bottom:18px; flex:1}
.product-card ul{margin-bottom:18px}
.product-card ul li{display:flex; gap:9px; align-items:flex-start; font-size:.88rem; color:var(--ink-muted); margin-bottom:8px}
.product-card ul li svg{flex:none; margin-top:3px; color:var(--gold-600)}

/* ---------- Why choose us ---------- */
.why-row{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.why-row-stacked{grid-template-columns:1fr; gap:24px; margin-top:26px}
.why-item{display:flex; gap:18px}
.why-item h3{font-size:1.08rem; margin-bottom:6px}
.why-item p{font-size:.93rem; margin:0}
@media (max-width:860px){ .why-row{grid-template-columns:1fr} }
.why-photo{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); min-height:420px}
.why-photo img{width:100%; height:100%; object-fit:cover; display:block; min-height:420px}
@media (max-width:900px){ .why-photo{order:2} .why-photo,.why-photo img{min-height:280px} }

/* ---------- Founding member band ---------- */
.founding-band{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  padding:50px 44px; color:var(--white); display:grid; grid-template-columns:1.3fr 1fr; gap:36px; align-items:center;
  background:
    linear-gradient(120deg, rgba(11,19,56,.93) 0%, rgba(15,26,69,.88) 45%, rgba(38,57,127,.72) 100%),
    url('../assets/photo-market-payment.jpg') center 30%/cover no-repeat;
}
.founding-band::before{
  content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(245,166,35,.35) 1.6px, transparent 1.6px);
  background-size:16px 16px; opacity:.35; mask-image:linear-gradient(120deg, black, transparent 60%);
}
.founding-band::after{
  content:''; position:absolute; right:-60px; bottom:-90px; width:260px; height:260px; border-radius:50%;
  background:var(--grad-gold); opacity:.22; filter:blur(6px);
}
.founding-copy{position:relative; z-index:2}
.founding-copy .eyebrow{margin-bottom:14px}
.founding-copy h2{color:var(--white); font-size:clamp(1.5rem,3vw,2.1rem)}
.founding-copy p{color:rgba(255,255,255,.78)}
.founding-stat{
  position:relative; z-index:2; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius); padding:30px; text-align:center; backdrop-filter:blur(4px);
}
.founding-stat b{display:block; font-family:'Poppins',sans-serif; font-size:2.6rem; color:var(--gold-400); line-height:1}
.founding-stat .cap{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:8px}
.founding-stat .price{margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18)}
.founding-stat .price b{font-size:1.9rem; color:var(--white)}
@media (max-width:860px){ .founding-band{grid-template-columns:1fr; padding:36px 26px} }

/* ---------- Stats strip ---------- */
.stats-strip{background:var(--navy-950); color:var(--white); padding:0}
.stats-strip .grid4{gap:0}
.stat-box{padding:40px 20px; text-align:center; border-right:1px solid rgba(255,255,255,.1)}
.stat-box:last-child{border-right:none}
.stat-box b{display:block; font-family:'Poppins',sans-serif; font-size:2.1rem; color:var(--gold-400)}
.stat-box span{font-size:.82rem; color:rgba(255,255,255,.62)}
@media (max-width:640px){ .stats-strip .grid4{grid-template-columns:1fr 1fr} .stat-box{border-bottom:1px solid rgba(255,255,255,.1)} }

/* ---------- Steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step}
.step{position:relative; background:var(--off-white); border-radius:var(--radius); padding:30px 24px; border:1px solid var(--line)}
.step .num{
  width:40px; height:40px; border-radius:50%; background:var(--grad-gold); color:var(--navy-950); font-family:'Poppins',sans-serif; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.step h4{font-size:1rem; margin-bottom:6px}
.step p{font-size:.88rem; margin:0}
@media (max-width:860px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ---------- Testimonials ---------- */
.testi-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  box-shadow:var(--shadow-sm);
}
.testi-stars{color:var(--gold-500); margin-bottom:12px; letter-spacing:2px}
.testi-card p{font-style:italic; color:var(--ink); font-size:.96rem}
.testi-person{display:flex; align-items:center; gap:12px; margin-top:16px}
.testi-avatar{width:44px; height:44px; border-radius:50%; background:var(--grad-navy); color:var(--gold-300); display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700}
.testi-person strong{display:block; font-size:.9rem; color:var(--navy-900)}
.testi-person span{font-size:.78rem; color:var(--ink-muted)}

/* ---------- News ---------- */
.news-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s}
.news-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.news-thumb{height:170px; background:var(--grad-navy); position:relative; overflow:hidden}
.news-thumb::before{content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(245,166,35,.4) 1.5px, transparent 1.5px); background-size:14px 14px}
.news-thumb .tag{position:absolute; left:16px; bottom:16px; background:var(--grad-gold); color:var(--navy-950); font-size:.72rem; font-weight:700; padding:6px 14px; border-radius:999px}
.news-body{padding:22px}
.news-date{font-size:.78rem; color:var(--gold-700); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px}
.news-body h3{font-size:1.05rem; margin-bottom:10px}
.news-body p{font-size:.9rem}
.news-read{font-weight:700; font-size:.85rem; color:var(--navy-800)}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--grad-gold); border-radius:var(--radius-lg); padding:54px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band::after{content:''; position:absolute; right:-40px; top:-60px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.25)}
.cta-band h2{color:var(--navy-950); font-size:clamp(1.4rem,2.6vw,1.9rem); margin-bottom:6px}
.cta-band p{color:rgba(11,19,56,.75); margin:0}
.cta-band .btn-navy{position:relative; z-index:2}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-950); color:rgba(255,255,255,.68); position:relative; overflow:hidden}
.site-footer::before{content:''; position:absolute; top:0; left:0; right:0; height:5px; background:var(--grad-gold)}
.footer-top{padding:70px 0 40px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px}
.footer-brand .brand-text strong{color:var(--white)}
.footer-brand p{color:rgba(255,255,255,.6); font-size:.9rem; margin-top:14px}
.footer-social{display:flex; gap:10px; margin-top:18px}
.footer-social a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background .2s}
.footer-social a:hover{background:var(--gold-500); color:var(--navy-950)}
.footer-col h4{color:var(--white); font-size:.92rem; letter-spacing:.03em; margin-bottom:18px; font-family:'Poppins',sans-serif}
.footer-col li{margin-bottom:11px}
.footer-col a{font-size:.88rem; transition:color .2s}
.footer-col a:hover{color:var(--gold-400)}
.footer-contact li{display:flex; gap:10px; align-items:flex-start; font-size:.88rem; margin-bottom:14px}
.footer-contact svg{flex:none; color:var(--gold-400); margin-top:2px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding:22px 0; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
.footer-bottom a:hover{color:var(--gold-400)}
@media (max-width:920px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:34px} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} }

/* ---------- Utility patterns ---------- */
.dot-pattern{background-image:radial-gradient(circle, var(--gold-500) 1.6px, transparent 1.6px); background-size:15px 15px}
.badge-pill{display:inline-flex; align-items:center; gap:8px; background:var(--off-white); border:1px solid var(--line); padding:6px 14px; border-radius:999px; font-size:.8rem; font-weight:600; color:var(--navy-800)}
.text-gold{color:var(--gold-600)}
.center{text-align:center}
.mt-0{margin-top:0}
.divider-gold{width:64px; height:4px; background:var(--grad-gold); border-radius:4px; margin-bottom:20px}

/* ---------- Sidebar layout (help/faq pages) ---------- */
.layout-side{display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start}
.side-nav{background:var(--off-white); border:1px solid var(--line); border-radius:var(--radius); padding:10px; position:sticky; top:100px}
.side-nav a{display:block; padding:12px 16px; border-radius:10px; font-weight:600; font-size:.92rem; color:var(--navy-800); margin-bottom:2px}
.side-nav a:hover{background:var(--white)}
.side-nav a.active{background:var(--grad-navy); color:var(--white)}
@media (max-width:860px){ .layout-side{grid-template-columns:1fr} .side-nav{position:static} }

/* ---------- FAQ accordion ---------- */
.faq-item{border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:14px; overflow:hidden; background:var(--white)}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:19px 22px; cursor:pointer; font-weight:600; color:var(--navy-900); font-family:'Poppins',sans-serif; font-size:.98rem}
.faq-q .plus{width:26px; height:26px; border-radius:50%; background:var(--off-white); flex:none; position:relative; transition:transform .25s, background .25s}
.faq-q .plus::before,.faq-q .plus::after{content:''; position:absolute; background:var(--navy-800); left:50%; top:50%; transform:translate(-50%,-50%)}
.faq-q .plus::before{width:11px; height:2px}
.faq-q .plus::after{width:2px; height:11px; transition:opacity .2s}
.faq-item.open .plus{background:var(--grad-gold); transform:rotate(180deg)}
.faq-item.open .plus::after{opacity:0}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq-a-in{padding:0 22px 20px; color:var(--ink-muted); font-size:.92rem; line-height:1.7}
.faq-item.open .faq-a{max-height:400px}

/* ---------- Forms ---------- */
.form-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow-md)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field label{font-size:.85rem; font-weight:600; color:var(--navy-800)}
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); border-radius:10px; padding:13px 15px; font-family:inherit; font-size:.92rem;
  color:var(--ink); background:var(--off-white); transition:border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold-500); background:var(--white)}
@media (max-width:640px){ .form-row{grid-template-columns:1fr} }

/* ---------- Info cards for contact page ---------- */
.contact-info-card{
  display:flex; gap:16px; padding:24px; border-radius:var(--radius); background:var(--white); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); margin-bottom:18px;
}
.contact-info-card h4{font-size:.98rem; margin-bottom:4px}
.contact-info-card p{font-size:.88rem; margin:0}
.map-box{border-radius:var(--radius); overflow:hidden; height:280px; background:var(--grad-navy-radial); position:relative}
.map-box .dot-pattern{position:absolute; inset:0; opacity:.4}
.map-box .pin{position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); color:var(--gold-400); text-align:center}

/* ---------- Misc page blocks ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
.visual-panel{
  background:var(--grad-navy); border-radius:var(--radius-lg); padding:44px; color:var(--white); position:relative; overflow:hidden;
  min-height:340px; display:flex; flex-direction:column; justify-content:center;
}
.visual-panel::before{content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(245,166,35,.3) 1.5px, transparent 1.5px); background-size:16px 16px; opacity:.4}
.visual-panel > *{position:relative; z-index:2}
.check-list li{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:.94rem; color:var(--ink-muted)}
.check-list li svg{flex:none; margin-top:2px; color:var(--white); background:var(--grad-gold); border-radius:50%; padding:4px}
.check-list.on-dark li{color:rgba(255,255,255,.82)}

.value-card{background:var(--off-white); border-radius:var(--radius); padding:28px; border-top:4px solid transparent; border-image:var(--grad-gold) 1}
.people-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-align:center; box-shadow:var(--shadow-sm)}
.people-photo{height:180px; background:var(--grad-navy-radial); display:flex; align-items:center; justify-content:center}
.people-photo .initials{width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.12); border:2px solid var(--gold-400); color:var(--gold-300); font-family:'Poppins',sans-serif; font-weight:700; font-size:1.4rem; display:flex; align-items:center; justify-content:center}
.people-body{padding:20px}
.people-body h4{font-size:1rem; margin-bottom:2px}
.people-body span{font-size:.82rem; color:var(--gold-700); font-weight:600}

.back-to-top{
  position:fixed; right:24px; bottom:24px; width:48px; height:48px; border-radius:50%;
  background:var(--grad-navy); color:var(--gold-400); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s; z-index:80; cursor:pointer; border:none;
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0)}

[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
[data-reveal].in{opacity:1; transform:translateY(0)}