/* Maggie's Muddy Mutts — editorial, photography-forward */
:root {
  --ink:    #0d0a1a;
  --p900:   #1a0533;
  --p800:   #2e0f52;
  --p700:   #4c1d95;
  --p600:   #6d28d9;
  --p500:   #7c3aed;
  --p400:   #8b5cf6;
  --p300:   #a78bfa;
  --p200:   #ddd6fe;
  --p100:   #ede9fe;
  --p50:    #f5f3ff;
  --amber:  #f59e0b;
  --amber2: #fbbf24;
  --green:  #10b981;
  --pink:   #ec4899;
  --white:  #ffffff;
  --muted:  #6b7280;
  --border: rgba(255,255,255,.1);
  --sh:     0 4px 32px rgba(13,10,26,.25);
  --sh-lg:  0 16px 64px rgba(13,10,26,.4);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:18px }
body {
  font-family:'Nunito',system-ui,sans-serif;
  background:#0d0a1a;
  color:var(--ink);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block }
a  { color:inherit; text-decoration:none }

/* ── Type ── */
h1 { font-size:clamp(2.6rem,6vw,4.8rem); font-weight:900; line-height:1.0; letter-spacing:-.03em }
h2 { font-size:clamp(1.8rem,3.5vw,3rem);  font-weight:900; line-height:1.1; letter-spacing:-.02em }
h3 { font-size:clamp(1.1rem,2vw,1.4rem);  font-weight:800; letter-spacing:-.01em }
h4 { font-size:.9rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em }
p  { color:var(--muted); line-height:1.85 }
.lead { font-size:1.05rem; color:#374151; font-weight:600; line-height:1.8 }
.overline {
  font-size:.65rem; font-weight:900; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber); display:block; margin-bottom:.75rem;
}
.container { max-width:1140px; margin:0 auto; padding:0 1.5rem }

/* ── Topbar ── */
.topbar { background:var(--p900); color:rgba(255,255,255,.55); font-size:.75rem; padding:.45rem 0 }
.topbar .container { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap }
.topbar a { color:#c4b5fd; transition:color .15s } .topbar a:hover { color:#fff }
.topbar-items { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap }
.topbar-item  { display:flex; align-items:center; gap:.4rem }

/* ── Header ── */
.header {
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(109,40,217,.08);
  position:sticky; top:0; z-index:200;
  box-shadow:0 1px 24px rgba(13,10,26,.07);
}
.header .container { display:flex; align-items:center; justify-content:space-between; height:72px; gap:1rem }
.logo { display:flex; align-items:center; gap:.75rem }
.logo-img {
  width:46px; height:46px; border-radius:12px;
  overflow:hidden; flex-shrink:0; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.logo-img img { width:100%; height:100%; object-fit:contain }
.logo-fallback { font-size:1.4rem }
.logo-text { font-weight:900; font-size:.95rem; color:var(--p800); line-height:1.2 }
.logo-sub  { display:block; font-size:.6rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em }
nav { display:flex; align-items:center; gap:.15rem }
.nav-link { padding:.5rem .9rem; border-radius:10px; font-size:.78rem; font-weight:800; color:var(--muted); transition:all .15s }
.nav-link:hover, .nav-link.active { background:var(--p50); color:var(--p600) }
.nav-cta {
  background:var(--p600); color:#fff !important;
  border-radius:10px; padding:.55rem 1.2rem;
  box-shadow:0 2px 12px rgba(109,40,217,.35);
  transition:all .2s;
}
.nav-cta:hover { background:var(--p800) !important; transform:translateY(-1px); box-shadow:0 6px 20px rgba(109,40,217,.45) !important }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:.25rem }
.hamburger svg { width:26px; height:26px; stroke:var(--ink); stroke-width:2; stroke-linecap:round; fill:none }
#mobile-menu { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid #f0f0f0; padding:1rem 1.5rem; box-shadow:0 12px 32px rgba(0,0,0,.1) }
#mobile-menu.open { display:block }
#mobile-menu a { display:block; padding:.8rem 1rem; border-radius:10px; font-weight:800; color:var(--ink); font-size:.95rem }
#mobile-menu a:hover { background:var(--p50); color:var(--p600) }
#mobile-menu .nav-cta { background:var(--p600); color:#fff; text-align:center; margin-top:.5rem }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.9rem; border-radius:12px;
  font-weight:900; font-size:.9rem; cursor:pointer;
  border:none; transition:all .22s; font-family:inherit;
  letter-spacing:.01em; text-decoration:none;
}
.btn-primary { background:linear-gradient(135deg,var(--p500),var(--p800)); color:#fff; box-shadow:0 4px 20px rgba(109,40,217,.4) }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(109,40,217,.55) }
.btn-amber  { background:linear-gradient(135deg,var(--amber2),var(--amber)); color:#1a0533; box-shadow:0 4px 20px rgba(245,158,11,.35) }
.btn-amber:hover  { transform:translateY(-3px); box-shadow:0 12px 36px rgba(245,158,11,.5) }
.btn-outline-white { background:rgba(255,255,255,.1); color:#fff; border:2px solid rgba(255,255,255,.35); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
.btn-outline-white:hover { background:rgba(255,255,255,.2); border-color:#fff; transform:translateY(-1px) }
.btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.4) }
.btn-outline:hover { background:rgba(255,255,255,.08); border-color:#fff; transform:translateY(-1px) }
.btn-ghost-dark { background:rgba(255,255,255,.06); color:#fff; border:1.5px solid rgba(255,255,255,.2) }
.btn-ghost-dark:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5) }
.btn-lg { padding:1.1rem 2.5rem; font-size:1rem; border-radius:14px }

/* ═══════════ HERO ═══════════════════════════════════════════ */
.hero {
  position:relative; height:100vh; height:100svh; min-height:640px;
  display:flex; align-items:center; overflow:hidden;
}
.hero-photo {
  position:absolute; inset:0;
  background:url('img/e1b7016ac455.jpeg') center 20%/cover no-repeat;
}
.hero-photo::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(26,5,51,.95) 0%, rgba(26,5,51,.75) 45%, rgba(26,5,51,.15) 100%);
}
.hero .container { position:relative; z-index:1 }
.hero-inner { max-width:620px }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3);
  color:var(--amber); border-radius:6px;
  padding:.35rem 1rem; font-size:.65rem; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.5rem;
}
.hero h1 { color:#fff; margin-bottom:1.25rem }
.hero h1 em { font-style:normal; color:var(--amber) }
.hero-sub { color:rgba(255,255,255,.75); font-size:1.05rem; line-height:1.85; margin-bottom:2.5rem; max-width:480px }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem }
.hero-trust { display:flex; gap:.6rem; flex-wrap:wrap }
.trust-pill {
  display:flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px; padding:.35rem .85rem;
  font-size:.7rem; font-weight:800; color:rgba(255,255,255,.8); letter-spacing:.02em;
}
.trust-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0 }
.trust-dot.green { background:var(--green) }
.trust-dot.amber { background:var(--amber) }
.trust-dot.pink  { background:var(--pink) }

/* ═══════════ TICKER ═════════════════════════════════════════ */
.ticker { background:var(--p600); padding:.85rem 0; overflow:hidden }
.ticker-inner { display:flex; gap:0; white-space:nowrap }
.ticker-track {
  display:flex; gap:0;
  animation:ticker 28s linear infinite;
  flex-shrink:0;
}
.ticker-track span {
  font-size:.72rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.9); padding:0 2.5rem; white-space:nowrap;
}
.ticker-track span::after { content:'·'; margin-left:2.5rem; color:rgba(255,255,255,.35) }
@keyframes ticker { from { transform:translateX(0) } to { transform:translateX(-50%) } }

/* ═══════════ SERVICES BENTO ════════════════════════════════ */
.bento-section { padding:5.5rem 0; background:#0d0a1a }
.bento-section .section-intro { max-width:620px; margin:0 auto 3.5rem; text-align:center }
.bento-section .section-intro h2 { color:#fff }
.bento-section .section-intro p { margin-top:.65rem; font-size:1.05rem; color:rgba(255,255,255,.65) }

.bento-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:340px 220px;
  gap:1rem;
}
.bento-card {
  position:relative; border-radius:20px; overflow:hidden;
  cursor:pointer; transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}
.bento-card:hover { transform:scale(1.02); box-shadow:var(--sh-lg) }
.bento-photo {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.bento-card:hover .bento-photo { transform:scale(1.06) }
.bento-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,10,26,.9) 0%, rgba(13,10,26,.4) 45%, rgba(13,10,26,.1) 100%);
}
.bento-label {
  position:absolute; bottom:0; left:0; right:0; padding:1.5rem;
}
.bento-tag {
  display:inline-block; font-size:.6rem; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase; color:var(--amber);
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25);
  border-radius:4px; padding:.2rem .65rem; margin-bottom:.5rem;
}
.bento-label h3 { color:#fff; font-size:1.15rem; margin-bottom:.25rem }
.bento-label p  { color:rgba(255,255,255,.65); font-size:.78rem; line-height:1.6; margin:0 }
.bento-arrow {
  position:absolute; top:1.25rem; right:1.25rem;
  width:36px; height:36px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s, transform .25s;
}
.bento-card:hover .bento-arrow { opacity:1; transform:translate(2px,-2px) }
.bento-arrow svg { width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2.5 }

/* card positions */
.bc1 { grid-column:1; grid-row:1/3 }
.bc2 { grid-column:2; grid-row:1 }
.bc3 { grid-column:3; grid-row:1 }
.bc4 { grid-column:2/4; grid-row:2 }

/* ═══════════ COMMUNITY FEATURE ════════════════════════════ */
.community-feature {
  position:relative; min-height:560px;
  display:grid; grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.cf-photo {
  position:relative;
  background:url('img/1c4d74331c88.jpeg') center/cover no-repeat;
}
.cf-photo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, transparent 60%, rgba(26,5,51,1) 100%);
}
.cf-content {
  background:var(--p900);
  padding:5rem 4rem 5rem 3rem;
  display:flex; flex-direction:column; justify-content:center;
}
.cf-content .overline { color:var(--amber) }
.cf-content h2 { color:#fff; margin-bottom:1rem }
.cf-content p { color:rgba(255,255,255,.65); margin-bottom:1.5rem }

.cf-stats { display:flex; gap:2.5rem; margin:2rem 0 2.5rem }
.cf-stat .num { font-size:2.75rem; font-weight:900; color:var(--amber); line-height:1; display:block }
.cf-stat .lbl { font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:rgba(255,255,255,.45); margin-top:.2rem }

/* ═══════════ PHOTO MOSAIC ══════════════════════════════════ */
.mosaic-section { padding:5.5rem 0; background:#0d0a1a }
.mosaic-section .section-intro h2 { color:#fff }
.mosaic-section .section-intro p  { color:rgba(255,255,255,.65) }
.mosaic-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:220px;
  gap:.75rem;
  margin-top:3rem;
}
.mosaic-item {
  border-radius:16px; overflow:hidden; position:relative;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.mosaic-item:hover { transform:scale(1.03); z-index:1 }
.mosaic-item img { width:100%; height:100%; object-fit:cover; display:block }
.mi-tall { grid-row:span 2 }
.mi-wide { grid-column:span 2 }
.mosaic-caption {
  position:absolute; bottom:0; left:0; right:0; padding:1rem 1.1rem;
  background:linear-gradient(to top, rgba(13,10,26,.8) 0%, transparent 100%);
  opacity:0; transition:opacity .25s;
}
.mosaic-item:hover .mosaic-caption { opacity:1 }
.mosaic-caption span { font-size:.7rem; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:.08em }

/* ═══════════ STATS BAR ════════════════════════════════════ */
.stats-bar { background:var(--ink); padding:3rem 0 }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr) }
.stat-item { text-align:center; padding:1rem; border-right:1px solid rgba(255,255,255,.06) }
.stat-item:last-child { border-right:none }
.stat-num { font-size:clamp(2rem,4vw,3.2rem); font-weight:900; color:#fff; line-height:1; display:block }
.stat-lbl { font-size:.62rem; font-weight:800; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.1em; margin-top:.4rem }

/* ═══════════ TESTIMONIALS ══════════════════════════════════ */
.testimonials-section { background:var(--p50); padding:6rem 0 }
.section-intro { max-width:580px; margin:0 auto 3.5rem; text-align:center }
.section-intro p { margin-top:.65rem }

.tgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.tcard {
  background:#fff; border-radius:20px; padding:2rem;
  border:1.5px solid var(--p200);
  box-shadow:0 2px 16px rgba(109,40,217,.06);
  transition:all .3s; display:flex; flex-direction:column;
}
.tcard:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(109,40,217,.12); border-color:var(--p300) }
.tcard-stars { color:var(--amber); font-size:.9rem; letter-spacing:.1em; margin-bottom:1rem }
.tcard-text  { font-size:.875rem; color:#374151; line-height:1.85; font-style:italic; flex:1; margin-bottom:1.5rem }
.tcard-author { display:flex; align-items:center; gap:.75rem }
.tcard-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--p500),var(--p300));
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#fff; font-size:.8rem; flex-shrink:0;
}
.tcard-name { font-weight:900; font-size:.85rem; color:var(--ink) }
.tcard-loc  { font-size:.72rem; color:var(--muted) }
.tcard-chip {
  display:inline-block; background:var(--p100); color:var(--p600);
  border-radius:4px; padding:.18rem .7rem; font-size:.62rem;
  font-weight:900; margin-top:.35rem; letter-spacing:.05em; text-transform:uppercase;
}

/* ═══════════ FEATURE CTA PHOTO ══════════════════════════════ */
.cta-photo-section {
  position:relative; padding:7rem 0; text-align:center; overflow:hidden;
}
.cta-photo-bg {
  position:absolute; inset:0;
  background:url('img/127619cd601e.jpeg') center 30%/cover no-repeat;
}
.cta-photo-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(26,5,51,.92) 0%, rgba(76,29,149,.85) 100%);
}
.cta-photo-section .container { position:relative; z-index:1 }
.cta-eyebrow {
  display:inline-block;
  background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.3);
  color:var(--amber); border-radius:6px;
  padding:.35rem 1rem; font-size:.65rem; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.25rem;
}
.cta-photo-section h2 { color:#fff; margin-bottom:.85rem }
.cta-photo-section p  { color:rgba(255,255,255,.75); max-width:500px; margin:0 auto 2.5rem; font-size:1.05rem }
.cta-btns { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap }
.cta-tel {
  display:inline-flex; align-items:center; gap:.65rem;
  color:#fff; font-size:1.4rem; font-weight:900; margin-top:2rem;
}
.cta-tel svg { fill:var(--amber) }

/* ═══════════ PAGE HERO ═════════════════════════════════════ */
.page-hero {
  background:linear-gradient(135deg,var(--p900) 0%,var(--p700) 100%);
  color:#fff; padding:5rem 0 4rem; position:relative; overflow:hidden;
}
.page-hero-photo-overlay {
  position:absolute; inset:0; opacity:.18;
  background-size:cover; background-position:center;
  mix-blend-mode:luminosity;
}
.page-hero .container { position:relative; z-index:1 }
.page-hero h1 { color:#fff; font-size:clamp(2rem,5vw,3.5rem); margin-bottom:.75rem }
.page-hero p  { color:rgba(255,255,255,.72); max-width:580px; font-size:1.025rem }
.page-hero nav ol { list-style:none; display:flex; gap:.5rem; font-size:.8rem; color:rgba(255,255,255,.4); margin-bottom:1.25rem }
.page-hero nav a  { color:rgba(255,255,255,.6); transition:color .15s }
.page-hero nav a:hover { color:#fff }

/* ═══════════ SERVICES PAGE ════════════════════════════════ */
.svc-detail-section { padding:5.5rem 0 }
.svc-detail-section.alt-bg { background:#fafafa }
.svc-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
.svc-detail-grid.reverse .svc-detail-photo { order:2 }
.svc-detail-grid.reverse .svc-detail-content { order:1 }
.svc-detail-photo {
  border-radius:24px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:var(--sh-lg);
}
.svc-detail-photo img { width:100%; height:100%; object-fit:cover }
.svc-detail-content .overline { color:var(--p500) }
.svc-detail-content h2 { margin-bottom:.85rem }
.feature-list { display:flex; flex-direction:column; gap:.5rem; margin:1.5rem 0 }
.feature-item {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.6rem 0; border-bottom:1px solid #f0f0f0;
}
.feature-item:last-child { border:none }
.feature-check {
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,var(--p500),var(--p400));
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.feature-check svg { width:10px; height:10px; stroke:#fff; fill:none; stroke-width:3 }
.feature-item div { font-size:.875rem; color:#374151; line-height:1.7 }
.svc-info-box {
  background:var(--p50); border-left:3px solid var(--p500);
  border-radius:0 10px 10px 0; padding:1rem 1.25rem; margin:1.5rem 0;
}
.svc-info-box strong { display:block; color:var(--p700); margin-bottom:.3rem; font-size:.85rem }
.svc-info-box p { font-size:.82rem; margin:0; color:#374151 }
.svc-info-box a { color:var(--p500); font-weight:800 }

/* ═══════════ STEPS ═════════════════════════════════════════ */
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; position:relative; margin-top:3rem }
.steps-grid::before {
  content:''; position:absolute;
  top:2.15rem; left:calc(12.5% + .5rem); right:calc(12.5% + .5rem);
  height:1px; background:linear-gradient(to right,var(--p200),var(--p400),var(--p200)); z-index:0;
}
.step-card {
  background:#fff; border:1.5px solid var(--p200);
  border-radius:18px; padding:2rem 1.5rem; text-align:center;
  position:relative; z-index:1;
  transition:all .3s cubic-bezier(.22,.61,.36,1);
}
.step-card:hover { border-color:var(--p400); transform:translateY(-5px); box-shadow:var(--sh) }
.step-num {
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg,var(--p500),var(--p800));
  color:#fff; font-weight:900; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.25rem; box-shadow:0 4px 16px rgba(109,40,217,.4);
}
.step-card h4 { color:var(--ink); margin-bottom:.5rem; font-size:.9rem }
.step-card p  { font-size:.8rem }

/* ═══════════ COMMUNITY PAGE ════════════════════════════════ */
.community-hero-banner {
  position:relative; min-height:480px;
  display:flex; align-items:flex-end; overflow:hidden;
}
.chb-photo {
  position:absolute; inset:0;
  background:url('img/127619cd601e.jpeg') center 40%/cover no-repeat;
}
.chb-photo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,10,26,.92) 0%, rgba(13,10,26,.5) 50%, rgba(13,10,26,.1) 100%);
}
.chb-content { position:relative; z-index:1; padding:4rem 0; max-width:640px }
.chb-content h1 { color:#fff; font-size:clamp(2rem,5vw,3.2rem) }
.chb-content p  { color:rgba(255,255,255,.7); margin-top:.75rem; font-size:1.025rem }

.community-split { display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:480px }
.cs-photo { position:relative; overflow:hidden }
.cs-photo img { width:100%; height:100%; object-fit:cover }
.cs-content { background:var(--p900); padding:4rem 3.5rem; display:flex; flex-direction:column; justify-content:center }
.cs-content h2 { color:#fff; margin-bottom:1rem }
.cs-content p  { color:rgba(255,255,255,.65); margin-bottom:1.25rem }
.cs-content .overline { color:var(--amber) }

.impact-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; padding:5rem 0 }
.impact-card {
  border-radius:20px; overflow:hidden; position:relative;
  aspect-ratio:4/3; cursor:pointer;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.impact-card:hover { transform:scale(1.02) }
.impact-photo { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s }
.impact-card:hover .impact-photo { transform:scale(1.06) }
.impact-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,10,26,.88) 0%, rgba(13,10,26,.2) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:2rem;
}
.impact-overlay h3 { color:#fff; font-size:1.2rem; margin-bottom:.4rem }
.impact-overlay p  { color:rgba(255,255,255,.65); font-size:.82rem; margin:0; line-height:1.65 }

/* ═══════════ GALLERY ════════════════════════════════════════ */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  auto-rows:200px;
  gap:.75rem;
  margin-top:2.5rem;
}
.gallery-item { border-radius:16px; overflow:hidden; position:relative; transition:transform .3s, box-shadow .3s }
.gallery-item:hover { transform:scale(1.03); box-shadow:var(--sh-lg); z-index:1 }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block }
.gi-span-2 { grid-column:span 2 }
.gi-row-2  { grid-row:span 2 }
.gallery-placeholder {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(135deg,var(--p100),var(--p50));
}
.gallery-ph-label { font-size:.72rem; font-weight:900; color:var(--p500); text-transform:uppercase; letter-spacing:.08em }

/* ═══════════ CONTACT ════════════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:340px 1fr; gap:3rem; align-items:start }
.contact-sidebar { position:sticky; top:88px }
.contact-info-card {
  background:linear-gradient(145deg,var(--p900),var(--p800));
  border-radius:24px; padding:2.25rem;
}
.contact-detail-item { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.35rem }
.contact-detail-icon { font-size:1.1rem; flex-shrink:0; margin-top:.1rem }
.contact-detail-label { font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.4); margin-bottom:.2rem }
.contact-detail-val { font-size:.875rem; font-weight:700; color:#fff; display:block }
a.contact-detail-val:hover { color:var(--amber) }
.sidebar-divider { border:none; border-top:1px solid rgba(255,255,255,.08); margin:1.5rem 0 }
.contact-form-card {
  background:#fff; border:1.5px solid #e5e7eb;
  border-radius:24px; padding:2.75rem; box-shadow:var(--sh);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.form-group { margin-bottom:1.2rem }
.form-group label { display:block; font-size:.65rem; font-weight:900; color:var(--muted); margin-bottom:.45rem; text-transform:uppercase; letter-spacing:.09em }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; border:1.5px solid #e5e7eb; border-radius:10px;
  padding:.8rem 1.05rem; font-size:.9rem; font-family:inherit;
  color:var(--ink); transition:border-color .2s,box-shadow .2s; background:#fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--p500);
  box-shadow:0 0 0 4px rgba(109,40,217,.08);
}
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center }
.req { color:#dc2626 }
.field-error { font-size:.75rem; color:#dc2626; font-weight:700; margin-top:.3rem; display:none }
.form-submit {
  background:linear-gradient(135deg,var(--p500),var(--p800));
  color:#fff; border:none; width:100%; padding:1.05rem;
  border-radius:12px; font-size:.95rem; font-weight:900; cursor:pointer;
  transition:all .25s; display:flex; align-items:center; justify-content:center;
  gap:.65rem; box-shadow:0 6px 20px rgba(109,40,217,.4);
  font-family:inherit; margin-top:.5rem;
}
.form-submit:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(109,40,217,.55) }
.form-submit:disabled { opacity:.6; cursor:not-allowed; transform:none }
.form-success-panel {
  background:var(--p50); border:1.5px solid var(--p200);
  border-radius:24px; padding:3.5rem 2.5rem; text-align:center;
}
.form-success-panel h3 { color:var(--p900); margin-bottom:.5rem }
.form-success-panel p { font-size:.9rem; margin-bottom:1.75rem }

/* Social links */
.social-link-big {
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.65rem 1.25rem; border-radius:10px; font-size:.8rem;
  font-weight:800; transition:all .2s; color:#fff; text-decoration:none;
}
.social-link-big.si-fb { background:#1877f2 } .social-link-big.si-fb:hover { background:#1256c0 }
.social-link-big.si-ig { background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af) } .social-link-big.si-ig:hover { filter:brightness(1.15) }
.social-link-big.si-tt { background:#000 } .social-link-big.si-tt:hover { background:#333 }
.social-link-big svg  { fill:#fff; stroke:none }
.social-link-big:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.2) }
.success-socials { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1rem }

/* ═══════════ FOOTER ════════════════════════════════════════ */
footer { background:var(--p900); color:rgba(255,255,255,.5); padding:5rem 0 2rem }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:3.5rem }
.footer-brand h3 { color:#fff; font-size:1rem; margin-bottom:.75rem; font-weight:900 }
.footer-brand p { font-size:.85rem; line-height:1.85 }
.footer-contact { margin-top:.85rem }
.footer-contact a { color:#c4b5fd; font-weight:700 }
.footer-contact a:hover { color:#fff }
.footer-col h4 { color:rgba(255,255,255,.25); font-size:.6rem; font-weight:900; margin-bottom:1rem; text-transform:uppercase; letter-spacing:.14em }
.footer-col ul  { list-style:none }
.footer-col li  { margin-bottom:.6rem }
.footer-col a   { color:rgba(255,255,255,.5); font-size:.85rem; transition:color .15s }
.footer-col a:hover { color:#fff }
.footer-socials { display:flex; gap:.65rem; margin-top:1.25rem }
.footer-social-icon {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s,opacity .2s; opacity:.65;
}
.footer-social-icon:hover { transform:translateY(-2px); opacity:1 }
.footer-social-icon svg { width:16px; height:16px; fill:#fff }
.si-fb { background:#1877f2 }
.si-ig { background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af) }
.si-tt { background:#111 }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.06); padding-top:2rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem; font-size:.75rem;
}
.footer-bottom p { color:rgba(255,255,255,.25) }
.footer-badge a { color:#c4b5fd } .footer-badge a:hover { color:#fff }

/* ═══════════ SCROLL PILLS (page hero) ══════════════════════ */
.scroll-pills { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.5rem }
.scroll-pill {
  display:flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:6px; padding:.35rem .9rem; font-size:.7rem;
  font-weight:800; color:rgba(255,255,255,.8); cursor:pointer;
  transition:all .2s; text-decoration:none;
}
.scroll-pill:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4) }
.trust-pill-dot, .trust-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0 }
.trust-pill-dot.green, .trust-dot.green { background:var(--green) }
.trust-pill-dot.amber, .trust-dot.amber { background:var(--amber) }
.trust-pill-dot.pink,  .trust-dot.pink  { background:var(--pink) }

/* ═══════════ PAGE LAYOUT CLASSES (responsive) ══════════════ */

/* Two-column content + visual split */
.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center }
.split-photo { border-radius:24px; overflow:hidden }
.split-photo img { width:100%; display:block; object-fit:cover; aspect-ratio:4/3 }

/* Photo trio: tall-left + two stacked right */
.photo-trio { display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.photo-trio .pt-tall { grid-row:span 2; border-radius:20px; overflow:hidden }
.photo-trio .pt-tall img { width:100%; height:100%; min-height:320px; object-fit:cover; display:block }
.photo-trio .pt-half { border-radius:20px; overflow:hidden }
.photo-trio .pt-half img { width:100%; display:block; object-fit:cover; aspect-ratio:4/3 }

/* Photo pair: wide top + two bottom */
.photo-quad { display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.photo-quad .pq-wide { grid-column:span 2; border-radius:20px; overflow:hidden }
.photo-quad .pq-wide img { width:100%; display:block; object-fit:cover; aspect-ratio:16/7 }
.photo-quad .pq-half { border-radius:20px; overflow:hidden }
.photo-quad .pq-half img { width:100%; display:block; object-fit:cover; aspect-ratio:4/3 }

/* Full-bleed side split (community page) */
.bleed-split { display:grid; grid-template-columns:1fr 1fr; min-height:500px }
.bleed-photo { position:relative; overflow:hidden; min-height:340px }
.bleed-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.bleed-photo.fade-right::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,transparent 65%,#0d0a1a 100%) }
.bleed-photo.fade-left::after  { content:''; position:absolute; inset:0; background:linear-gradient(to left, transparent 65%,#0d0a1a 100%) }
.bleed-content { background:#0d0a1a; padding:4rem 3.5rem; display:flex; flex-direction:column; justify-content:center }
.bleed-content h2 { color:#fff; font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:1rem }
.bleed-content p  { color:rgba(255,255,255,.65); line-height:1.8; margin-bottom:1.25rem }
.bleed-content .overline { color:var(--amber) }

/* Community moments grid */
.moments-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem }
.moments-grid .mg-tall { grid-row:span 2; border-radius:20px; overflow:hidden; position:relative }
.moments-grid .mg-tall img { width:100%; height:100%; object-fit:cover; display:block; min-height:360px }
.moments-grid .mg-cell { border-radius:20px; overflow:hidden; position:relative }
.moments-grid .mg-cell img { width:100%; display:block; object-fit:cover; aspect-ratio:4/3 }

/* How it works 4-col */
.how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem }
.how-card { text-align:center; padding:2rem 1.25rem; background:rgba(255,255,255,.04); border-radius:16px; border:1px solid rgba(255,255,255,.08) }
.how-num  { width:48px; height:48px; border-radius:50%; background:var(--p900); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:1.1rem; font-weight:900; color:var(--amber) }
.how-card h3 { color:#fff; font-size:1rem; margin-bottom:.5rem }
.how-card p  { color:rgba(255,255,255,.5); font-size:.85rem; line-height:1.6; margin:0 }

/* Gallery masonry */
.gallery-masonry { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:.6rem }
.gallery-masonry .gm-tall { grid-row:span 2 }
.gallery-masonry .gm-wide { grid-column:span 2 }
.gallery-masonry .gm-item { border-radius:16px; overflow:hidden; position:relative; transition:transform .3s cubic-bezier(.22,.61,.36,1) }
.gallery-masonry .gm-item:hover { transform:scale(1.025); z-index:1 }
.gallery-masonry .gm-item img { width:100%; height:100%; object-fit:cover; display:block }
.gallery-masonry .gm-caption { position:absolute; bottom:0; left:0; right:0; padding:.85rem 1rem; background:linear-gradient(to top,rgba(13,10,26,.8) 0%,transparent 100%); opacity:0; transition:opacity .25s }
.gallery-masonry .gm-item:hover .gm-caption { opacity:1 }
.gallery-masonry .gm-caption span { font-size:.65rem; font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:.09em }

/* Svc feature list */
.svc-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem }
.svc-features li { color:rgba(255,255,255,.7); font-size:.9rem; padding-left:1.3rem; position:relative }
.svc-features li::before { content:''; position:absolute; left:0; top:.55em; width:.45rem; height:.45rem; border-radius:50%; background:var(--amber) }

/* Stat strip */
.stat-strip { display:flex; justify-content:space-between; padding:2.5rem 0; gap:2rem; flex-wrap:wrap }
.stat-strip-item { text-align:center; flex:1; min-width:120px }
.stat-strip-num { font-size:2.2rem; font-weight:900; color:var(--amber); display:block }
.stat-strip-lbl { font-size:.78rem; color:rgba(255,255,255,.5); font-weight:700; text-transform:uppercase; letter-spacing:.06em }

/* Assistance callout split */
.assist-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center }
.assist-photo { border-radius:20px; overflow:hidden }
.assist-photo img { width:100%; display:block; object-fit:cover; aspect-ratio:4/3 }

/* ═══════════ RESPONSIVE ════════════════════════════════════ */
@media(max-width:1024px){
  .bento-grid { grid-template-columns:1fr 1fr; grid-template-rows:280px 280px 200px }
  .bc1 { grid-column:1/3; grid-row:1 }
  .bc2 { grid-column:1; grid-row:2 }
  .bc3 { grid-column:2; grid-row:2 }
  .bc4 { grid-column:1/3; grid-row:3 }
  .community-feature { grid-template-columns:1fr }
  .cf-photo { min-height:380px }
  .cf-photo::after { background:linear-gradient(to bottom, transparent 50%, rgba(26,5,51,1) 100%) }
  .cf-content { padding:3rem 2rem }
  .mosaic-grid { grid-template-columns:repeat(2,1fr) }
  .mi-tall { grid-row:span 1 }
  .mi-wide { grid-column:1 }
  .community-split { grid-template-columns:1fr }
  .cs-photo { min-height:320px }
  .impact-cards { grid-template-columns:1fr 1fr }
  .contact-grid { grid-template-columns:1fr }
  .contact-sidebar { position:static }
  .footer-grid { grid-template-columns:1fr 1fr }
  .footer-brand { grid-column:1/-1 }
  .svc-detail-grid { grid-template-columns:1fr; gap:2.5rem }
  .svc-detail-grid.reverse .svc-detail-photo,
  .svc-detail-grid.reverse .svc-detail-content { order:unset }
  .steps-grid { grid-template-columns:1fr 1fr }
  .steps-grid::before { display:none }
  .gallery-grid { grid-template-columns:repeat(2,1fr) }
  .gi-span-2 { grid-column:1 }
  .gi-row-2  { grid-row:1 }
  /* new layout classes */
  .split-grid { grid-template-columns:1fr; gap:2rem }
  .bleed-split { grid-template-columns:1fr }
  .bleed-photo.fade-right::after { background:linear-gradient(to bottom,transparent 60%,#0d0a1a 100%) }
  .bleed-photo.fade-left::after  { background:linear-gradient(to bottom,transparent 60%,#0d0a1a 100%) }
  .bleed-content { padding:2.5rem 2rem }
  .moments-grid { grid-template-columns:1fr 1fr }
  .moments-grid .mg-tall { grid-row:span 1 }
  .moments-grid .mg-tall img { min-height:0; aspect-ratio:4/3; height:auto }
  .how-grid { grid-template-columns:1fr 1fr }
  .gallery-masonry { grid-template-columns:repeat(2,1fr); grid-auto-rows:180px }
  .gallery-masonry .gm-tall { grid-row:span 2 }
  .gallery-masonry .gm-wide { grid-column:1 }
  .assist-grid { grid-template-columns:1fr; gap:2rem }
}
@media(max-width:768px){
  html { font-size:16px }
  nav  { display:none }
  .hamburger { display:block }
  .header .container { position:relative }
  .hero { height:auto; min-height:100vh; min-height:100svh }
  .hero-inner { max-width:100% }
  .hero-btns,.cta-btns { flex-direction:column; align-items:flex-start }
  .cta-btns { align-items:center }
  .tgrid { grid-template-columns:1fr }
  .stats-grid { grid-template-columns:1fr 1fr }
  .stat-item:nth-child(2) { border-right:none }
  .footer-grid { grid-template-columns:1fr; gap:2rem }
  .impact-cards { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }
  .contact-form-card { padding:1.75rem }
  .gallery-grid { auto-rows:160px }
  .cf-stats { gap:1.5rem }
  /* new layout classes */
  .photo-trio { grid-template-columns:1fr }
  .photo-trio .pt-tall { grid-row:span 1 }
  .photo-trio .pt-tall img { min-height:0; aspect-ratio:4/3; height:auto }
  .photo-quad { grid-template-columns:1fr }
  .photo-quad .pq-wide { grid-column:1 }
  .moments-grid { grid-template-columns:1fr }
  .moments-grid .mg-tall { grid-row:span 1 }
  .how-grid { grid-template-columns:1fr }
  .stat-strip { gap:1rem }
  .gallery-masonry { grid-auto-rows:140px }
  .gallery-masonry .gm-tall { grid-row:span 2 }
  .cta-photo-section { padding:4rem 0 }
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ═══════════ PHONE (≤600px) — single column everything ════ */
@media(max-width:600px){
  /* Bento → single column with aspect-ratio so photos always show */
  .bento-grid {
    grid-template-columns:1fr;
    grid-template-rows:none;
  }
  .bc1,.bc2,.bc3,.bc4 {
    grid-column:1 !important;
    grid-row:auto !important;
    aspect-ratio:4/3;
  }
  .bc4 { aspect-ratio:16/9 }
  /* Mosaic → 2 col, no spans */
  .mosaic-grid { grid-template-columns:1fr 1fr; grid-auto-rows:160px }
  .mi-tall,.mi-wide { grid-row:auto; grid-column:auto }
  /* Community feature — photo gets a proper height */
  .cf-photo { min-height:280px }
  /* Stats bar → 2 col */
  .stats-grid { grid-template-columns:1fr 1fr }
  .stat-item:nth-child(even) { border-right:none }
  /* Testimonials → 1 col */
  .tgrid { grid-template-columns:1fr }
  /* Community cf-stats */
  .cf-stats { flex-direction:column; gap:1rem }
}

/* Book Now nav button */
.header nav .nav-book {
  background: var(--amber);
  color: var(--ink) !important;
  font-weight: 800;
  padding: 0.45rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  transition: background .2s, transform .15s;
}
.header nav .nav-book:hover { background: #e8962a; transform: translateY(-1px); }
#mobile-menu .nav-book {
  background: var(--amber);
  color: var(--ink) !important;
  font-weight: 800;
  border-radius: 8px;
  margin-top: 4px;
  text-align: center;
}