/* ===== CSS RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ===== CSS VARIABLES - ALL DESIGN TOKENS ===== */
:root{
  /* Colors */
  --color-background:#FFFFFF;
  --color-primary:#000000;
  --color-accent-primary:#BA903A;
  --color-accent-secondary:#D2A956;
  --color-primary-10:rgba(0,0,0,0.1);
  --color-primary-20:rgba(0,0,0,0.2);
  --color-accent-10:rgba(186,144,58,0.1);
  --color-accent-20:rgba(186,144,58,0.2);

  /* From template */
  --gold:#d2a956;
  --dark:#000;
  --white:#fff;
  --gray-light:#f5f5f5;
  --gray-bg:#f0ede8;
  --text-muted:#000000cc;
  --max-width:1280px;
  --btn-radius:100px;
  --font:'Work Sans',sans-serif;
}

/* ===== BASE TYPOGRAPHY ===== */
body{
  font-family:var(--font);
  color:var(--dark);
  line-height:1.6;
  overflow-x:hidden;
  background:var(--white);
}

h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:600}
h1{font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-1.5px}
h2{font-size:clamp(28px,4vw,40px);font-weight:600;line-height:1.25}
h3{font-size:clamp(22px,3vw,28px);font-weight:600}
h4{font-size:20px;font-weight:600}
p{font-size:16px;line-height:1.7;color:var(--text-muted)}

a{text-decoration:none;color:inherit;transition:color .3s}
a:hover{color:var(--gold)}
img{max-width:100%;height:auto}
ul{list-style:none}

/* ===== LAYOUT UTILITIES ===== */
.container{max-width:var(--max-width);margin:0 auto;padding:0 30px}
.section{padding:100px 0}
.section-sm{padding:80px 0}
.accent{color:var(--gold)}

.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}

.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-8{gap:8px}
.gap-12{gap:12px}
.gap-16{gap:16px}
.gap-20{gap:20px}
.gap-24{gap:24px}
.gap-30{gap:30px}
.gap-40{gap:40px}
.gap-60{gap:60px}

.grid{display:grid}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.mx-auto{margin-left:auto;margin-right:auto}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-24{margin-bottom:24px}
.mb-30{margin-bottom:30px}
.mb-40{margin-bottom:40px}
.mb-50{margin-bottom:50px}
.mb-60{margin-bottom:60px}

.max-w-480{max-width:480px}
.max-w-560{max-width:560px}
.max-w-640{max-width:640px}
.max-w-800{max-width:800px}

/* ===== SECTION LABEL ===== */
.sl{display:inline-block;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;opacity:.6;margin-bottom:16px}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:var(--btn-radius);
  font-size:14px;font-weight:500;font-family:var(--font);
  cursor:pointer;transition:all .3s;border:none;text-decoration:none;
}
.btn-p{background:var(--dark);color:var(--white)}
.btn-p:hover{background:var(--gold);color:var(--dark)}
.btn-o{background:transparent;color:var(--dark);border:1.5px solid rgba(0,0,0,.15)}
.btn-o:hover{border-color:var(--gold);color:var(--gold)}
.btn-w{background:var(--white);color:var(--dark)}
.btn-w:hover{background:var(--gold)}
.btn-gold{background:var(--gold);color:var(--white)}
.btn-gold:hover{background:var(--dark)}
.btn .ir{transition:transform .3s}
.btn:hover .ir{transform:translate(2px,-2px)}
.btn-lg{padding:16px 36px;font-size:16px}

/* ===== HEADER ===== */
.hdr{position:sticky;top:0;z-index:1000;background:var(--white);border-bottom:1px solid rgba(0,0,0,.06);transition:transform .3s;box-shadow:none}
.hdr.scrolled{box-shadow:none}
.hdr-in{display:flex;align-items:center;justify-content:space-between;padding:6px 30px;max-width:var(--max-width);margin:0 auto}
.hdr-logo img{height:40px}
.hdr-nav{display:flex;align-items:center;gap:0}
.ni{position:relative}
.nl{display:flex;align-items:center;gap:4px;padding:8px 14px;font-size:14px;font-weight:500;color:var(--dark);transition:color .3s;border-radius:8px}
.nl:hover{color:var(--gold)}
.nl.active{color:var(--dark);font-weight:600}
.nl .lucide{width:12px;height:12px;transition:transform .3s}
.ni:hover .nl .lucide,.ni.open .nl .lucide{transform:rotate(180deg)}
.nd{position:absolute;top:calc(100% + 8px);left:-20px;min-width:320px;background:#F7F7F5;border-radius:20px;box-shadow:0 10px 25px rgba(0,0,0,.1);padding:0;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:100;overflow:hidden}
.ni:hover .nd{opacity:1;visibility:visible;transform:translateY(0)}
.nd a{display:block;padding:16px 24px;font-size:15px;font-weight:500;color:var(--dark);transition:background-color .2s;text-decoration:none}
.nd a:hover{background-color:#e6e6e6}
.nd a.nd-active{background:var(--gold);display:flex;align-items:center;justify-content:space-between}
.nd a.nd-active:hover{background:var(--gold)}
.nd .df{margin:0;padding:0;border:0}
.nd .df a{font-weight:500;color:var(--dark);background:var(--gold);display:flex;align-items:center;justify-content:space-between;border-radius:0}
.nd .df a:hover{background:#c89b3e}
.nd .ic{background:#000;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nd .ic svg{width:10px;height:10px;stroke:var(--gold);stroke-width:2.5;fill:none}
.ha{display:flex;align-items:center;gap:8px}
.hib{width:40px;height:40px;border-radius:50%;background:var(--dark);color:var(--white);display:none;align-items:center;justify-content:center;cursor:pointer;transition:background .3s;border:none}
.hib:hover{background:var(--gold)}
.hib .lucide{width:18px;height:18px}

/* Mobile overlay & menu - slides down from under header */
.mm-o{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.mm-o.active{opacity:1;visibility:visible}
.mm{position:fixed;top:0;left:0;right:0;background:var(--white);z-index:999;padding:20px 30px 24px;overflow-y:auto;max-height:80vh;border-radius:0 0 1px 1px;box-shadow:0 8px 30px rgba(0,0,0,.1);transform:translateY(-110%);transition:transform .4s cubic-bezier(.4,0,.2,1);will-change:transform}
.mm.active{transform:translateY(var(--hdr-h,54px))}
.mm-c{display:none}
.mm-l a{display:block;padding:14px 0;font-size:17px;font-weight:500;border-bottom:1px solid rgba(0,0,0,.06);color:var(--dark)}
.mm-l a:hover{color:var(--gold)}
.mm-l a.mm-active{color:var(--gold);font-weight:600}

/* ===== HERO ===== */
.hero{padding:100px 0 60px;text-align:center}
.hero h1{max-width:800px;margin:0 auto 30px}
.hero p{font-size:18px;max-width:600px;margin:0 auto 30px;color:var(--text-muted)}
.hero-btns{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}

/* Hero with background */
.hero-bg{
  padding:120px 0 80px;text-align:center;position:relative;
  background:linear-gradient(135deg,rgba(0,0,0,.7),rgba(0,0,0,.5)),var(--gray-bg);
  background-size:cover;background-position:center;color:var(--white);
}
.hero-bg h1{color:var(--white);max-width:800px;margin:0 auto 20px}
.hero-bg p{color:rgba(255,255,255,.8);font-size:18px;max-width:600px;margin:0 auto 30px}
.hero-bg .sl{color:rgba(255,255,255,.5)}
.hero-bg .btn-o{color:var(--white);border-color:rgba(255,255,255,.3)}
.hero-bg .btn-o:hover{border-color:var(--gold);color:var(--gold)}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero{padding:80px 0 60px;text-align:center;border-bottom:1px solid rgba(0,0,0,.05)}
.page-hero .sl{margin-bottom:12px}
.page-hero h1{font-size:clamp(32px,5vw,56px);max-width:800px;margin:0 auto 16px}
.page-hero p{max-width:600px;margin:0 auto}

/* ===== DARK SECTION (Trust/About) ===== */
.dark-section{background:linear-gradient(135deg,var(--dark),#1a1a1a);padding:100px 0;color:var(--white)}
.dark-section .sl{color:rgba(255,255,255,.5)}
.dark-section h2{color:var(--white)}
.dark-section p{color:rgba(255,255,255,.75)}

/* ===== GRAY SECTION ===== */
.gray-section{background:var(--gray-bg);padding:100px 0}
.light-section{background:var(--gray-light);padding:100px 0}

/* ===== FOOTER ===== */
.ftr{background:var(--dark);color:var(--white);padding:80px 0 0}
.ftr-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px}
.ftr-brand .ftr-logo img{height:50px;margin-bottom:20px}
.ftr-brand h3{font-size:clamp(22px,3vw,28px);font-weight:600;line-height:1.35;margin-bottom:16px;color:var(--white)}
.ftr-brand p{font-size:14px;opacity:.6;margin-bottom:24px}
.soc{display:flex;gap:10px;margin-bottom:24px}
.soc-i{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .3s}
.soc-i:hover{background:var(--gold)}
.soc-i .lucide{width:18px;height:18px}
.ftr-ct{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;opacity:.4;margin-bottom:20px}
.ftr-links a{display:block;padding:6px 0;font-size:14px;opacity:.7;transition:opacity .3s}
.ftr-links a:hover{opacity:1;color:var(--gold)}
.ftr-ci{margin-bottom:20px}
.ftr-ci small{display:block;font-size:12px;opacity:.4;margin-bottom:4px}
.ftr-ci a,.ftr-ci span{font-size:14px;opacity:.7}
.ftr-bot{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;text-align:center}
.ftr-bot a,.ftr-bot p{font-size:13px;opacity:.4;color:var(--white)}

/* ===== SCROLL TO TOP ===== */
.stt{position:fixed;bottom:30px;right:30px;width:44px;height:44px;border-radius:50%;background:var(--dark);color:var(--white);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:500;transition:background .3s;border:none}
.stt.visible{display:flex}
.stt:hover{background:var(--gold)}
.stt .lucide{width:18px;height:18px}

/* ===== ANIMATE ON SCROLL ===== */
.aos{opacity:0;transform:translateY(30px);transition:all .6s ease}
.aos.v{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hdr-nav{display:none}
  .hib{display:flex}
  .grid-2,.grid-4{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .ftr-top{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr !important}
}
@media(max-width:767px){
  .hero{padding:60px 0 40px}
  .hero h1{font-size:36px}
  .section{padding:60px 0}
  .section-sm{padding:50px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-auto{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr}
  .container{padding:0 20px}
  .event-grid-row{grid-template-columns:1fr !important}
}

/* ===== TWO COL LAYOUT ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

/* ===== IMAGE UTILITIES ===== */
.img-placeholder{background:linear-gradient(135deg,#ddd8ce,#c8c0b2);border-radius:20px;min-height:300px}
.img-placeholder-tall{min-height:400px}
.img-cover{width:100%;height:100%;object-fit:cover;border-radius:20px}
.img-card{width:100%;height:220px;object-fit:cover;border-radius:16px;margin-bottom:16px}
.img-hero{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:0}
.img-round{border-radius:50%;object-fit:cover}

/* ===== INFO CARD ===== */
.info-card{display:flex;gap:16px;align-items:flex-start;background:var(--white);padding:24px;border-radius:16px;border:1px solid rgba(0,0,0,.06)}
.icon-wrap{width:48px;height:48px;border-radius:12px;background:var(--color-accent-10);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold)}
.icon-wrap .lucide{width:22px;height:22px}

/* ===== BADGE ===== */
.badge{display:inline-block;padding:4px 12px;border-radius:100px;font-size:12px;font-weight:500;background:var(--color-accent-10);color:var(--color-accent-primary)}