/* ============================================================
   Steve Lippia Events — stylesheet
   ============================================================ */

:root{
  --navy:#061323; --navy2:#0b1c2f; --navy3:#03060b;
  --gold:#d8b15a; --gold2:#efd28b; --white:#f5efe3;
  --soft:rgba(245,239,227,.80); --soft-dim:rgba(245,239,227,.55);
  --gold-line:rgba(216,177,90,.6);
  --max:1280px;
  --display:"Cormorant Garamond",Georgia,serif; --sans:"Inter",Arial,sans-serif;
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--navy3);
  color:var(--white);
  font-family:var(--sans);
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Nav ---------- */
.nav{
  position:relative;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px clamp(22px,4vw,58px);
  background:var(--navy3);
  border-bottom:1px solid rgba(216,177,90,.18);
}
.brand{
  font-family:var(--display);
  font-size:clamp(40px,4.6vw,78px);
  color:var(--gold);
  font-weight:700;
  line-height:.85;
  white-space:nowrap;
}
.navlinks{
  display:flex;
  gap:24px;
  align-items:center;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.13em;
  font-weight:800;
  color:rgba(255,255,255,.78);
}
.navlinks .pill{border:1px solid var(--gold);color:var(--gold);padding:11px 16px}
.navlinks a:hover{color:var(--gold)}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:36px;
  height:36px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--gold);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  min-height:calc(100vh - 96px);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 10%,rgba(216,177,90,.18),transparent 24%),
    linear-gradient(135deg,#03060b 0%,#07111f 55%,#080f18 100%);
  padding:46px clamp(26px,4vw,62px) 40px;
}
.hero-inner{max-width:1520px;margin:0 auto;position:relative;z-index:2}
.hero-copy{max-width:660px;position:relative;z-index:3}
.grammy{
  display:inline-flex;gap:18px;align-items:center;
  border:1.5px solid var(--gold);color:var(--gold);
  padding:14px 28px;margin-bottom:28px;
  font-size:18px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  background:rgba(0,0,0,.18);
}
.grammy:before,.grammy:after{content:"★";font-size:15px}
h1{font-family:var(--display);font-size:clamp(38px,3.9vw,62px);line-height:1.08;margin:0;color:#fff;font-weight:600}
.gold-dot{color:var(--gold)}
.slash{width:255px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(216,177,90,.2));margin:24px 0 26px}
.hero p{font-size:18px;color:rgba(255,255,255,.88)}
.hero-photo{position:absolute;right:-10px;top:14px;width:min(52vw,780px);z-index:1}
.hero-photo:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,6,11,.36) 0%,rgba(3,6,11,.18) 24%,rgba(3,6,11,.02) 52%,transparent 78%);
  z-index:2;pointer-events:none;
}
.hero-photo img{width:100%;height:auto}
.trusted{margin-top:50px;position:relative;z-index:4}

/* ---------- Trusted-by / logos ---------- */
.section-label{
  display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
  color:var(--gold);text-transform:uppercase;letter-spacing:.29em;font-weight:800;
  font-size:17px;margin-bottom:18px;
}
.section-label:before,.section-label:after{content:"";height:1px;background:var(--gold-line)}
.logo-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:18px 30px;align-items:center}
.logo-cell{min-height:76px;display:flex;align-items:center;justify-content:center;text-align:center}
.logo-cell img{max-width:255px;max-height:84px;opacity:.96}
.logo-cell img.logo-exp{max-width:180px;max-height:64px}
.logo-cell img.logo-childrens{max-width:175px;max-height:60px}

/* ---------- Section base / Story ---------- */
.section{padding:clamp(78px,8vw,130px) clamp(28px,6vw,86px);background:linear-gradient(180deg,var(--navy),var(--navy3))}
.inner{max-width:var(--max);margin:0 auto}
.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.32em;font-size:13px;font-weight:800;margin-bottom:22px}
h2{font-family:var(--display);font-size:clamp(42px,5vw,82px);line-height:1.04;margin:0 0 28px;color:#fff;font-weight:600}
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(42px,6vw,84px);align-items:center}
.story p,.section p{font-size:18px;color:var(--soft)}
.statement{margin-top:30px;border-left:2px solid var(--gold);padding-left:24px;font-family:var(--display);font-size:clamp(28px,3vw,44px);line-height:1.08}
.proof-panel{border:1px solid rgba(216,177,90,.35);background:rgba(255,255,255,.045);padding:clamp(34px,4vw,58px)}
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.number{font-family:var(--display);font-size:clamp(38px,7vw,58px);color:#fff;line-height:.95}
.label{font-size:14px;color:var(--soft)}

/* ---------- Experiences ---------- */
.experiences{background:var(--navy)}
.exp-row{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center;margin:54px 0}
.exp-row:nth-child(even) .exp-img{order:2}
.exp-img img{box-shadow:0 34px 80px rgba(0,0,0,.35);width:100%}
.exp-copy h3{font-family:var(--display);font-size:clamp(28px,4.2vw,46px);color:#fff;margin:0 0 12px;line-height:1.08}
.exp-copy small{color:var(--gold);text-transform:uppercase;letter-spacing:.24em;font-weight:800;font-size:13px}

/* ---------- Testimonials ---------- */
.testimonials{background:linear-gradient(180deg,var(--navy3),#07111f)}
.test-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.quote{border-left:2px solid var(--gold);padding-left:22px;margin:0 0 28px}
.quote p{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);line-height:1.18;color:#fff;margin:0 0 10px}
.quote cite{color:var(--gold);font-style:normal;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800}
.portfolio{border:1px solid rgba(216,177,90,.35);background:rgba(255,255,255,.04);padding:40px;text-align:center}
.portfolio h3{font-family:var(--display);font-size:clamp(28px,4vw,42px);margin:0 0 12px;line-height:1.08}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy);font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  padding:15px 24px;margin-top:18px;
}

/* ---------- Contact ---------- */
.contact{position:relative;overflow:hidden;display:flex;align-items:center;background:var(--navy3);padding:clamp(78px,8vw,120px) clamp(28px,6vw,86px)}
.contact:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy3) 0%,rgba(3,6,11,.84) 48%,rgba(3,6,11,.52) 100%);
  z-index:1;
}
.contact-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.48}
.contact .inner{position:relative;z-index:2}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0}
.card{border:1px solid rgba(216,177,90,.35);background:rgba(6,19,35,.72);padding:24px}
.card strong{color:var(--gold);display:block;text-transform:uppercase;letter-spacing:.16em;font-size:12px;margin-bottom:8px}
.calendly-wrap{
  position:relative;z-index:2;margin-top:38px;
  border:1px solid rgba(216,177,90,.35);background:#fff;border-radius:2px;
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);
}

/* ---------- Footer ---------- */
.sle-footer,
.sle-footer *{box-sizing:border-box}
.sle-footer{
  width:100%;
  margin-top:auto;
  background:
    radial-gradient(circle at 55% 18%, rgba(216,177,90,.08), transparent 38%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy3) 100%);
  border-top:1px solid rgba(216,177,90,.18);
  padding:64px clamp(24px,4vw,58px) 40px;
  font-family:var(--sans);
  color:var(--white);
}
.sle-footer-inner{max-width:var(--max);margin:0 auto}
.sle-footer-top{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:52px;
  padding-bottom:48px;
}
.sle-brand-name{
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,3.2vw,34px);line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.sle-tagline{
  margin-top:20px;max-width:300px;
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(15px,1.6vw,17px);line-height:1.55;color:var(--gold);
}
.sle-label{color:var(--soft-dim);text-transform:uppercase;letter-spacing:.18em;font-size:12px;line-height:1;margin-bottom:18px}
.sle-manager{color:#fff;font-size:16px;font-weight:700;margin-bottom:10px}
.sle-contact-line{color:var(--white);font-size:16px;line-height:1.6;display:flex;align-items:center;gap:9px;margin:4px 0}
.sle-contact-line a:hover{color:var(--gold)}
.sle-contact-line svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--gold)}
.sle-bottom-bar{border-top:1px solid rgba(216,177,90,.25);padding-top:20px}
.sle-copyright{color:var(--soft-dim);font-size:13px}

/* ---------- FAQ (used on questions.html) ---------- */
.faq-page{padding-top:70px}
details{border-bottom:1px solid rgba(216,177,90,.25);padding:18px 0}
summary{cursor:pointer;font-size:22px;font-weight:bold;color:#fff;list-style:none;position:relative;padding-right:38px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:0;color:var(--gold);font-size:30px}
details[open] summary:after{content:"–"}

/* ============================================================
   Media queries — tablet (≤1000px)
   ============================================================ */
@media(max-width:1000px){
  .nav-toggle{display:flex}
  .navlinks{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--navy3);
    border-bottom:1px solid rgba(216,177,90,.18);
    max-height:0;
    overflow:hidden;
    padding:0 clamp(22px,4vw,58px);
    transition:max-height .3s ease;
    z-index:55;
  }
  .nav-toggle[aria-expanded="true"] ~ .navlinks{
    max-height:420px;
    padding:8px clamp(22px,4vw,58px) 20px;
  }
  .navlinks a,.navlinks .pill{
    width:100%;
    border:0;
    border-bottom:1px solid rgba(216,177,90,.1);
    padding:14px 0;
  }

  .hero-photo{position:relative;right:auto;top:auto;width:100%;margin-top:30px}
  .hero-photo:before{display:none}

  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .logo-cell img{max-width:210px;max-height:72px}

  .story-grid,.exp-row,.test-grid{grid-template-columns:1fr}
  .exp-row:nth-child(even) .exp-img{order:0}

  .contact-cards{grid-template-columns:1fr}

  .sle-footer-top{grid-template-columns:1fr;gap:32px;padding-bottom:32px}
  .sle-tagline{max-width:100%}
}

/* ============================================================
   Media queries — mobile (≤620px)
   ============================================================ */
@media(max-width:620px){
  .logo-grid{grid-template-columns:repeat(2,1fr);gap:18px 22px}
  .logo-cell img{max-width:175px;max-height:62px}

  .grammy{font-size:14px;letter-spacing:.16em}
  .hero{padding-top:40px}
  .brand{font-size:44px}

  .contact{padding-left:22px;padding-right:22px}

  .sle-footer{padding:44px 20px 28px}
}