/* ===================== Fairylight Events v2 — cloned from aleitevents.com's design system ===================== */
:root{
  --white: #ffffff;
  --charcoal: #373435;   /* header bg, aleit --awb-color3 */
  --black: #000000;      /* footer bg, aleit --awb-color8 */
  --lime: #a0ce4e;       /* accent, aleit --awb-color5 */
  --lime-dark: #7fae34;
  --grey-mid: #747474;   /* aleit --awb-color6 */
  --grey-light: #e0dede; /* aleit --awb-color4 */
  --text: #333333;       /* aleit --awb-color7 */
  --whatsapp: #25D366;
  --whatsapp-dark: #1DA851;
  --font: "Jost", -apple-system, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
.wrap{ max-width: 1200px; margin: 0 auto; padding: 0 30px; }
h1,h2,h3{ font-family: var(--font); font-weight: 400; margin: 0 0 .5em; color: var(--text); }
h2{ font-size: clamp(26px, 3.4vw, 36px); letter-spacing: .03em; }
h3{ font-size: 19px; letter-spacing: .04em; }
p{ margin: 0 0 1em; color: var(--grey-mid); }
.center{ text-align:center; }
.center p, .center h2, .center h1{ margin-left:auto; margin-right:auto; }
section{ padding: 90px 0; }
.section-lead{ max-width: 560px; margin: 0 auto 40px; }
.section-eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-size:12.5px; color: var(--lime-dark); font-weight:500; margin-bottom: 18px; }
.small-h2{ font-size: 22px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 36px; }

/* ===================== buttons ===================== */
.btn[hidden]{ display:none; }
.btn{
  display:inline-block; padding: 13px 30px; font-size: 13.5px; font-weight:500;
  text-transform: uppercase; letter-spacing: .12em; border: 1.5px solid var(--text);
  color: var(--text); background: transparent; transition: all .2s ease;
}
.btn:hover{ background: var(--text); color:#fff; }
.btn-ghost-light{ border-color: rgba(255,255,255,.8); color:#fff; }
.btn-ghost-light:hover{ background:#fff; color: var(--charcoal); }
.btn-dark{ border-color: var(--charcoal); background: var(--charcoal); color:#fff; }
.btn-dark:hover{ background:#fff; color: var(--charcoal); }
.btn-whatsapp{ background: var(--whatsapp); border-color: var(--whatsapp); color:#fff; }
.btn-whatsapp:hover{ background: var(--whatsapp-dark); border-color: var(--whatsapp-dark); }
.btn-sm{ padding: 9px 20px; font-size: 12px; }

/* ===================== header ===================== */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: var(--charcoal);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 22px 0; }
.logo{
  font-family: var(--font); font-size: 22px; letter-spacing: .12em; color:#fff; font-weight:500;
  display:flex; align-items:baseline; gap: 6px;
}
.logo .slash{ color: var(--lime); font-weight:300; transform: skewX(-14deg) scaleY(1.4); display:inline-block; }
.logo small{ font-size: 13px; letter-spacing: .18em; color: #d8d6d6; font-weight:400; }
.site-nav{ display:flex; gap: 34px; }
.site-nav a{ font-size: 13px; text-transform:uppercase; letter-spacing:.1em; color:#e6e4e4; }
.site-nav a:hover{ color: var(--lime); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding: 6px; width:44px; height:44px; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:24px; height:2px; background:#fff; position:relative; transition: all .2s;
}
.nav-toggle span::before{ position:absolute; top:-8px; }
.nav-toggle span::after{ position:absolute; top:8px; }
@media (max-width: 820px){
  .site-nav{
    position:absolute; top:100%; left:0; right:0; background: var(--charcoal);
    flex-direction:column; gap:0; max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .site-nav.is-open{ max-height: 300px; }
  .site-nav a{ padding: 16px 30px; border-top: 1px solid rgba(255,255,255,.08); }
  .nav-toggle{ display:flex; }
}

/* ===================== hero ===================== */
.hero{ position: relative; height: 62vh; min-height: 420px; overflow:hidden; background: var(--charcoal); }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.6s ease;
}
.hero-slide.is-active{ opacity:1; }

/* ===================== quote intro ===================== */
.intro{ padding: 100px 0; }
.intro-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:center; }
.intro-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }
.intro-copy h1{
  font-size: clamp(24px, 3vw, 32px); line-height:1.4; letter-spacing:.01em; text-align:center;
  font-style: italic; margin-bottom: 28px;
}
.intro-copy p{ text-align:center; max-width: 480px; margin-left:auto; margin-right:auto; }
@media (max-width: 860px){ .intro-grid{ grid-template-columns: 1fr; } }

/* ===================== services grid ===================== */
.services{ background: #fafafa; }
.service-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
.service-card{ position:relative; aspect-ratio: 3/4; overflow:hidden; }
.service-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.service-card:hover img{ transform: scale(1.07); }
.service-overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.65) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center;
  padding: 26px 18px;
}
.service-overlay h3{ color:#fff; margin-bottom: 18px; text-transform:uppercase; font-size:15px; letter-spacing:.08em; }
@media (max-width: 900px){ .service-grid{ grid-template-columns: repeat(2,1fr); } }

/* ===================== why us ===================== */
.why{ padding: 100px 0; }
.why-copy{ max-width: 620px; margin: 0 auto 34px; }

/* ===================== trust band ===================== */
.trust{ background: var(--charcoal); color:#fff; padding: 70px 0; }
.trust h2{ color:#fff; }
.trust-row{ display:flex; justify-content:center; gap: 60px; flex-wrap:wrap; margin-top: 10px; }
.trust-item{ text-align:center; }
.trust-item strong{ display:block; font-size: 30px; color: var(--lime); font-weight:500; margin-bottom: 6px; }
.trust-item span{ font-size: 12.5px; text-transform:uppercase; letter-spacing:.1em; color:#cfcccc; }

/* ===================== signature work — large curated grid ===================== */
.latest{ background: #f7f5f2; }
.sig-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; margin: 50px 0 20px; }
.sig-item{ margin:0; }
.sig-item img{ width:100%; aspect-ratio: 4/3; object-fit:cover; }
.sig-item figcaption{ padding-top: 18px; text-align:center; }
.sig-loc{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color: var(--lime-dark); font-weight:500; margin-bottom: 6px; }
.sig-title{ display:block; font-size: 18px; margin-bottom: 14px; }
.sig-link{
  display:inline-block; font-size: 12px; text-transform:uppercase; letter-spacing:.1em;
  border-bottom: 1px solid var(--text); padding-bottom: 2px; font-weight:500;
}
.sig-link:hover{ border-color: var(--lime-dark); color: var(--lime-dark); }
@media (max-width: 900px){ .sig-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .sig-grid{ grid-template-columns: 1fr; } }

.full-gallery-anchor{ position:relative; top:-90px; }
.full-gallery-title{ margin-top: 70px; font-size: 22px; letter-spacing:.06em; text-transform:uppercase; }

/* ===================== filter pills + full gallery ===================== */
.filter-pills{ display:flex; flex-wrap:wrap; gap: 10px; justify-content:center; margin: 30px 0 40px; }
.pill{
  font-family: var(--font); font-weight:500; font-size: 13px; cursor:pointer; text-transform:uppercase; letter-spacing:.06em;
  padding: 10px 20px; border-radius: 0; border: 1.5px solid var(--grey-light);
  background: #fff; color: var(--grey-mid); transition: all .15s ease;
}
.pill:hover{ border-color: var(--lime-dark); color: var(--lime-dark); }
.pill.is-active{ background: var(--charcoal); border-color: var(--charcoal); color:#fff; }
.setup-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.setup-item{ margin:0; position:relative; overflow:hidden; aspect-ratio: 1/1; }
.setup-item img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.setup-item:hover img{ transform: scale(1.06); }
.setup-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: 10px 12px 9px;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  color:#fff; font-size:12.5px; font-weight:500;
}
.setup-item[hidden]{ display:none; }
@media (max-width: 900px){ .setup-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px){ .setup-grid{ grid-template-columns: repeat(2,1fr); } }

/* ===================== CTA band ===================== */
.cta-band{ background: #fafafa; padding: 90px 0; }
.cta-band p{ max-width: 420px; margin: 0 auto 30px; }
.cta-actions{ display:flex; gap: 16px; justify-content:center; flex-wrap:wrap; }
.icon-wa{ width:18px; height:18px; vertical-align:-3px; margin-right: 8px; }

/* ===================== footer ===================== */
.site-footer{ background: var(--black); color: #cfcccc; padding-top: 60px; }
.footer-inner{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; padding-bottom: 40px; }
.footer-label{ text-transform:uppercase; letter-spacing:.12em; font-size:12px; color: var(--lime); font-weight:500; margin-bottom: 10px; }
.footer-col a{ color: #cfcccc; }
.footer-col a:hover{ color: var(--lime); }
.footer-col-center{ text-align:center; }
.footer-col-right{ display:flex; flex-direction:column; align-items:flex-end; gap:16px; }
.footer-social{ display:flex; gap: 14px; }
.footer-social a{
  width:44px; height:44px; border:1px solid rgba(255,255,255,.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#cfcccc;
}
.footer-social a svg{ width:18px; height:18px; }
.footer-social a:hover{ border-color: var(--lime); color: var(--lime); }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding: 18px 24px; text-align:center; font-size: 12.5px; }
.footer-bottom a{ color: var(--lime); }
@media (max-width: 780px){
  .footer-inner{ grid-template-columns: 1fr; text-align:center; }
  .footer-col-right{ align-items:center; }
  .footer-col-center{ text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-slide{ transition:none; }
  .service-card img, .setup-item img{ transition:none; }
}