/* ============================================================
   Jeevanam Natural Hygiene Center — Design System v3
   Premium UI with micro-animations
   ============================================================ */

/* ── Custom properties ─────────────────────────────────────── */
:root {
  --canvas:      #FAF8F5;
  --surface:     #FFFFFF;
  --ink:         #1A1518;
  --ink-2:       #3D3240;
  --ink-soft:    #6E6070;
  --ink-muted:   #9B8F97;
  --rose-deep:   #9B1547;
  --rose:        #CC2466;
  --rose-mid:    #D6296E;
  --rose-bright: #E83D84;
  --rose-tint:   #FBE9F2;
  --rose-tint-2: #F6D9E8;
  --hairline:    #EAE1E6;
  --hairline-2:  #F0E8EC;

  --maxw:       1160px;
  --r-sm:       10px;
  --r:          16px;
  --r-lg:       24px;
  --r-xl:       32px;

  --shadow-xs: 0 1px 3px rgba(26,21,24,.06);
  --shadow-sm: 0 2px 8px rgba(26,21,24,.06), 0 1px 2px rgba(26,21,24,.04);
  --shadow-md: 0 8px 24px rgba(155,21,71,.08), 0 2px 6px rgba(26,21,24,.04);
  --shadow-lg: 0 20px 48px rgba(155,21,71,.12), 0 4px 12px rgba(26,21,24,.06);
  --shadow-rose: 0 6px 20px rgba(204,36,102,.28);

  --ease-spring: cubic-bezier(.22,.68,0,1.2);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: .15s;
  --dur-base: .22s;
  --dur-slow: .38s;

  --font-display: "Bricolage Grotesque","Noto Sans Malayalam",system-ui,sans-serif;
  --font-body:    "Inter","Noto Sans Malayalam",system-ui,sans-serif;
  --font-mal:     "Noto Sans Malayalam","Inter",system-ui,sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); background:var(--canvas); color:var(--ink);
  line-height:1.7; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
:focus-visible { outline:2.5px solid var(--rose); outline-offset:3px; border-radius:5px; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family:var(--font-display); font-weight:600;
  line-height:1.1; letter-spacing:-0.025em; color:var(--ink);
}
.mal { font-family:var(--font-mal); letter-spacing:0; line-height:1.9; }
.eyebrow {
  font-family:var(--font-body); font-weight:700; font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rose);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before {
  content:""; width:24px; height:1.5px; background:var(--rose);
  display:inline-block; flex:none;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  padding:10px 22px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; position:relative; overflow:hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
/* Ripple layer */
.btn::after {
  content:""; position:absolute; inset:0;
  background:rgba(255,255,255,.14);
  opacity:0; border-radius:inherit;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.btn:hover::after { opacity:1; }
.btn:active { transform:scale(.97) !important; }

.btn-primary {
  background:var(--rose); color:#fff;
  box-shadow:0 3px 12px rgba(204,36,102,.20);
}
.btn-primary:hover {
  background:var(--rose-bright);
  transform:translateY(-2px);
  box-shadow:var(--shadow-rose);
}
.btn-ghost {
  background:transparent; color:var(--rose-deep);
  border-color:var(--hairline);
}
.btn-ghost:hover {
  border-color:var(--rose-mid);
  color:var(--rose-mid);
  background:var(--rose-tint);
  transform:translateY(-1px);
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,245,.92);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid rgba(234,225,230,.6);
  transition:box-shadow var(--dur-base) var(--ease-out);
}
.site-header.scrolled { box-shadow:0 4px 24px rgba(26,21,24,.07); }

.nav { display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px; }

.brand { display:flex; align-items:center; gap:10px; flex:none; }
.brand > span:last-child { display:flex; flex-direction:column; line-height:1.18; }
.brand-mark {
  width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(140deg,var(--rose-mid),var(--rose-deep));
  display:grid; place-items:center; color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:18px;
  box-shadow:0 3px 10px rgba(155,21,71,.32);
  transition:transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
}
.brand:hover .brand-mark { transform:scale(1.06); box-shadow:0 5px 16px rgba(155,21,71,.38); }
.brand-name { font-family:var(--font-display); font-weight:600; font-size:15.5px; letter-spacing:-.02em; white-space:nowrap; color:var(--ink); }
.brand-sub  { font-size:10.5px; color:var(--ink-muted); letter-spacing:.04em; white-space:nowrap; margin-top:1px; }

.nav-links { display:flex; align-items:center; gap:22px; list-style:none; }
.nav-links a {
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
  padding:4px 0; position:relative; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
.nav-links a::after {
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background:var(--rose); border-radius:2px;
  transition:right var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color:var(--rose-deep); }
.nav-links a:hover::after { right:0; }
.nav-links a.active { color:var(--rose-deep); font-weight:600; }
.nav-links a.active::after { right:0; }

/* WhatsApp pill — desktop only */
.nav-wa {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-weight:600; font-size:13px;
  padding:7px 15px 7px 12px; border-radius:999px;
  background:var(--rose-mid); color:#fff;
  box-shadow:0 2px 8px rgba(204,36,102,.18);
  transition:background var(--dur-base), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
  white-space:nowrap; flex:none; line-height:1;
}
.nav-wa:hover { background:var(--rose-bright); transform:translateY(-1px); box-shadow:0 4px 14px rgba(204,36,102,.28); }
.nav-wa svg { flex:none; }

/* Hamburger */
.menu-btn {
  display:none; background:none; border:none; cursor:pointer;
  width:38px; height:38px; border-radius:9px; flex:none;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  transition:background var(--dur-fast);
}
.menu-btn:hover { background:var(--rose-tint); }
.menu-btn span {
  display:block; width:19px; height:1.5px; background:var(--ink);
  border-radius:2px;
  transition:transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast), width var(--dur-base);
}

/* ── Slide-in sidebar ───────────────────────────────────────── */
.sidebar-overlay {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(26,21,24,0);
  transition:background var(--dur-slow) var(--ease-out);
}
.sidebar-overlay.open { background:rgba(26,21,24,.4); }

.sidebar {
  position:fixed; top:0; right:0; bottom:0; z-index:201;
  width:268px; max-width:85vw;
  background:var(--surface);
  box-shadow:-20px 0 60px rgba(26,21,24,.12);
  transform:translateX(108%);
  transition:transform var(--dur-slow) var(--ease-spring);
  display:flex; flex-direction:column; overflow-y:auto;
}
.sidebar.open { transform:translateX(0); }

.sidebar-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--hairline); flex:none;
}
.sidebar-close {
  width:32px; height:32px; border-radius:8px; border:none;
  background:var(--canvas); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.sidebar-close:hover { background:var(--rose-tint); color:var(--rose-deep); transform:rotate(90deg); }

.sidebar-links { flex:1; padding:6px 0; }
.sidebar-links a {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; font-size:15px; font-weight:500; color:var(--ink-2);
  border-bottom:1px solid var(--hairline-2);
  transition:background var(--dur-fast), color var(--dur-fast), padding-left var(--dur-base) var(--ease-out);
}
.sidebar-links a:last-child { border-bottom:none; }
.sidebar-links a:hover { background:var(--rose-tint); color:var(--rose-deep); padding-left:26px; }
.sidebar-links a.active { background:var(--rose-tint); color:var(--rose-deep); font-weight:600; }
.sidebar-arr { font-size:13px; opacity:.3; transition:opacity var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.sidebar-links a:hover .sidebar-arr { opacity:.7; transform:translateX(3px); }
.sidebar-links a.active .sidebar-arr { opacity:.7; }

.sidebar-foot { padding:18px 20px; border-top:1px solid var(--hairline); flex:none; }
.sidebar-foot p { font-size:12px; color:var(--ink-muted); line-height:1.6; }
.sidebar-foot a { font-size:13.5px; color:var(--rose); font-weight:600; margin-top:10px; display:block; transition:color var(--dur-fast); }
.sidebar-foot a:hover { color:var(--rose-bright); }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { position:relative; padding:92px 0 80px; overflow:hidden; }
.hero::before {
  content:""; position:absolute; top:-200px; right:-140px;
  width:580px; height:580px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,61,132,.1),transparent 65%);
  pointer-events:none;
}
.hero::after {
  content:""; position:absolute; bottom:-100px; left:-100px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(155,21,71,.06),transparent 65%);
  pointer-events:none;
}
.hero .wrap { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.hero h1 { font-size:clamp(38px,5vw,60px); margin:18px 0 20px; line-height:1.08; }
.hero h1 .accent { color:var(--rose-deep); }
.hero-lead { font-size:18px; color:var(--ink-soft); max-width:36ch; line-height:1.68; }
.hero-actions { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.hero-credit { margin-top:26px; font-size:13.5px; color:var(--ink-muted); }
.hero-credit strong { color:var(--ink-2); font-weight:600; }

.hero-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--hairline); border:1px solid var(--hairline);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-md);
}
.stat {
  background:var(--surface); padding:26px 24px;
  transition:background var(--dur-fast);
}
.stat:hover { background:var(--rose-tint); }
.stat-num {
  font-family:var(--font-display); font-weight:700; font-size:30px;
  color:var(--rose-deep); letter-spacing:-.025em;
  transition:transform var(--dur-base) var(--ease-spring);
}
.stat:hover .stat-num { transform:scale(1.06); }
.stat-label { font-size:12.5px; color:var(--ink-muted); margin-top:4px; }

/* ── Sections ───────────────────────────────────────────────── */
section { padding:88px 0; }
.section-head { max-width:620px; margin-bottom:48px; }
.section-head h2 { font-size:clamp(27px,3.6vw,40px); margin:14px 0 13px; }
.section-head p { color:var(--ink-soft); font-size:17.5px; }
.tint { background:var(--rose-tint); }
.tint-2 { background:linear-gradient(180deg,var(--canvas),var(--rose-tint) 40%,var(--canvas)); }

/* ── Four Foundations ───────────────────────────────────────── */
.pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pillar {
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r); padding:28px 24px; position:relative;
  overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.pillar::before {
  content:""; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--rose-deep),var(--rose-bright));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-out);
}
.pillar:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.pillar:hover::before { transform:scaleX(1); }
.pillar-no {
  font-family:var(--font-display); font-weight:700; font-size:12px;
  color:var(--rose); letter-spacing:.08em;
  display:inline-flex; align-items:center; gap:6px;
}
.pillar-no::after { content:""; width:20px; height:1px; background:var(--rose-tint-2); display:inline-block; }
.pillar h3 { font-size:18.5px; margin:13px 0 9px; }
.pillar p { font-size:13.5px; color:var(--ink-soft); line-height:1.65; }

/* ── Practice cards ─────────────────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card {
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r); overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.card-body { padding:24px 22px 28px; }
.card-icon {
  width:44px; height:44px; border-radius:12px;
  background:var(--rose-tint); color:var(--rose-deep);
  display:grid; place-items:center; margin-bottom:16px;
  transition:background var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.card:hover .card-icon { background:var(--rose-deep); color:#fff; transform:scale(1.08); }
.card h3 { font-size:17px; margin-bottom:8px; }
.card p { font-size:14px; color:var(--ink-soft); }

/* ── Split ──────────────────────────────────────────────────── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split-text h2 { font-size:clamp(25px,3.2vw,36px); margin:14px 0 16px; }
.split-text p { color:var(--ink-soft); margin-bottom:16px; line-height:1.75; }
.panel {
  background:linear-gradient(155deg,var(--rose-tint) 0%,#fff 60%);
  border:1px solid var(--hairline); border-radius:var(--r-xl);
  padding:40px; box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
}
.panel::before {
  content:"\201C"; font-family:var(--font-display); font-size:120px;
  color:var(--rose-tint-2); position:absolute; top:-10px; left:24px;
  line-height:1; pointer-events:none;
}
.panel-quote {
  font-family:var(--font-display); font-size:21px; line-height:1.5;
  color:var(--rose-deep); position:relative; z-index:1;
}
.panel-cite { margin-top:22px; font-size:13.5px; color:var(--ink-muted); }

/* ── Testimonials ───────────────────────────────────────────── */
.tcards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tcard {
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r); padding:28px 26px;
  box-shadow:var(--shadow-xs); display:flex; flex-direction:column;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.tcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.tcard-stars { display:flex; gap:3px; margin-bottom:16px; color:var(--rose); font-size:14px; }
.tcard .quote { color:var(--ink-2); font-size:14.5px; flex:1; line-height:1.74; }
.tcard .author { margin-top:22px; padding-top:16px; border-top:1px solid var(--hairline-2); display:flex; align-items:center; gap:12px; }
.author-av {
  width:36px; height:36px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--rose-tint-2),var(--rose-tint));
  display:grid; place-items:center; font-family:var(--font-display);
  font-weight:700; font-size:14px; color:var(--rose-deep);
}
.author-info strong { display:block; font-size:14.5px; font-family:var(--font-display); }
.author-info span  { font-size:12.5px; color:var(--ink-muted); }

/* ── DEWW feature numbers ───────────────────────────────────── */
.deww-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.deww-card {
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r); padding:28px 22px; text-align:center;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.deww-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.deww-card .big {
  font-family:var(--font-display); font-size:36px; font-weight:700;
  color:var(--rose-deep); letter-spacing:-.03em;
  transition:transform var(--dur-base) var(--ease-spring);
}
.deww-card:hover .big { transform:scale(1.08); }
.deww-card h3 { font-size:15.5px; margin:8px 0 6px; }
.deww-card p  { font-size:13.5px; color:var(--ink-soft); }

/* ── Page banner ────────────────────────────────────────────── */
.page-banner {
  background:linear-gradient(160deg,var(--rose-tint) 0%,var(--canvas) 70%);
  border-bottom:1px solid var(--hairline); padding:60px 0 52px;
  position:relative; overflow:hidden;
}
.page-banner::after {
  content:""; position:absolute; right:-80px; top:-80px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,61,132,.1),transparent 65%);
  pointer-events:none;
}
.page-banner .wrap { position:relative; z-index:1; }
.crumb { font-size:13px; color:var(--ink-muted); margin-bottom:13px; display:flex; align-items:center; gap:6px; }
.crumb a:hover { color:var(--rose); }
.crumb-sep { opacity:.4; }
.page-banner h1 { font-size:clamp(30px,4.6vw,50px); }
.page-banner .lead { font-size:17px; color:var(--ink-soft); max-width:56ch; margin-top:14px; line-height:1.7; }

/* ── Prose ──────────────────────────────────────────────────── */
.prose { max-width:720px; }
.prose p { margin-bottom:22px; color:var(--ink-2); line-height:1.8; }
.prose h2 { font-size:26px; margin:8px 0 20px; }
.em { color:var(--rose-deep); font-weight:600; }

/* ── Condition cards ────────────────────────────────────────── */
.cond-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cond-card {
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r); padding:26px 22px;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
  position:relative; overflow:hidden;
}
.cond-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--rose-deep),var(--rose-bright));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-out);
}
.cond-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.cond-card:hover::before { transform:scaleX(1); }
.cond-card h3 { font-size:17px; margin-bottom:8px; }
.cond-card p  { font-size:13.5px; color:var(--ink-soft); }

/* ================================================================
   GALLERY — Premium masonry-inspired editorial grid
   ================================================================ */

.gallery-filter {
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:44px;
}
.filter-btn {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-body); font-weight:500; font-size:13px;
  padding:7px 17px; border-radius:999px;
  border:1.5px solid var(--hairline); background:var(--surface);
  color:var(--ink-soft); cursor:pointer;
  transition:
    border-color var(--dur-base),
    color var(--dur-base),
    background var(--dur-base),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base);
}
.filter-btn:hover {
  border-color:var(--rose-mid); color:var(--rose-deep);
  background:var(--rose-tint); transform:translateY(-1px);
}
.filter-btn.active {
  border-color:var(--rose); color:#fff;
  background:var(--rose); box-shadow:0 3px 12px rgba(204,36,102,.22);
}
.filter-btn.active:hover { background:var(--rose-bright); }
.filter-count {
  font-size:11px; background:rgba(255,255,255,.25); color:inherit;
  border-radius:999px; padding:1px 7px; font-weight:700;
}
.filter-btn:not(.active) .filter-count {
  background:var(--hairline); color:var(--ink-muted);
}

/* Section label above each category group */
.gallery-section-head {
  display:flex; align-items:center; gap:16px; margin:52px 0 20px;
}
.gallery-section-head:first-child { margin-top:0; }
.gallery-section-head h3 {
  font-family:var(--font-display); font-weight:700; font-size:12px;
  color:var(--rose-deep); letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; flex:none;
}
.gallery-section-head::after { content:""; flex:1; height:1px; background:var(--hairline); }

/* The actual grid — 3-col with controlled wide/tall spans */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:220px;
  gap:6px;
}

/* Item base */
.gallery-item {
  position:relative; overflow:hidden;
  background:var(--hairline-2); cursor:zoom-in;
  border-radius:var(--r-sm);
  transition:box-shadow var(--dur-base);
}
.gallery-item:hover { box-shadow:var(--shadow-lg); z-index:2; }
.gallery-item.wide { grid-column:span 2; }
.gallery-item.tall { grid-row:span 2; }

/* Placeholder — layered gradient that reads as premium photography stand-in */
.gallery-ph {
  position:absolute; inset:0; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
/* Unique gradient per item via nth-child */
.gallery-item:nth-child(8n+1) .gallery-ph { background:linear-gradient(150deg,#F2DDE8 0%,#EDD0E0 100%); }
.gallery-item:nth-child(8n+2) .gallery-ph { background:linear-gradient(150deg,#EDE0E8 0%,#E4D6E1 100%); }
.gallery-item:nth-child(8n+3) .gallery-ph { background:linear-gradient(150deg,#F5E4EE 0%,#EED9E8 100%); }
.gallery-item:nth-child(8n+4) .gallery-ph { background:linear-gradient(150deg,#E8D8E5 0%,#DFCEDD 100%); }
.gallery-item:nth-child(8n+5) .gallery-ph { background:linear-gradient(150deg,#EFD9E7 0%,#E8D0DF 100%); }
.gallery-item:nth-child(8n+6) .gallery-ph { background:linear-gradient(150deg,#F0E0EB 0%,#E9D6E4 100%); }
.gallery-item:nth-child(8n+7) .gallery-ph { background:linear-gradient(150deg,#EBD8E6 0%,#E2CFDE 100%); }
.gallery-item:nth-child(8n+8) .gallery-ph { background:linear-gradient(150deg,#F3DCE9 0%,#ECD3E2 100%); }

/* Inner placeholder content */
.ph-inner {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform var(--dur-slow) var(--ease-out);
}
.gallery-item:hover .ph-inner { transform:scale(1.06); }
.ph-icon { color:rgba(155,21,71,.2); }
.ph-label {
  font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(155,21,71,.3);
}

/* Gradient overlay — bottom-anchored, reveals on hover */
.g-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(100,8,44,.82) 0%,
    rgba(155,21,71,.45) 45%,
    transparent 75%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px;
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.gallery-item:hover .g-overlay { opacity:1; }
.g-title {
  font-family:var(--font-display); font-weight:600; font-size:15px;
  color:#fff; line-height:1.3;
  transform:translateY(6px);
  transition:transform var(--dur-base) var(--ease-out);
}
.g-cat {
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-top:4px;
  transform:translateY(6px);
  transition:transform var(--dur-base) var(--ease-out) .04s;
}
.gallery-item:hover .g-title,
.gallery-item:hover .g-cat { transform:translateY(0); }

/* Zoom icon on hover */
.g-zoom {
  position:absolute; top:12px; right:12px; width:30px; height:30px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:0;
  transform:scale(.7);
  transition:opacity var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.gallery-item:hover .g-zoom { opacity:1; transform:scale(1); }

/* ── Contact ─────────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.info-row { display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--hairline-2); }
.info-row:last-child { border-bottom:none; }
.info-ic {
  width:40px; height:40px; border-radius:11px; flex:none;
  background:var(--rose-tint); color:var(--rose-deep);
  display:grid; place-items:center;
  transition:background var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.info-row:hover .info-ic { background:var(--rose-deep); color:#fff; transform:scale(1.08); }
.info-row h4 { font-size:14px; margin-bottom:3px; color:var(--ink); }
.info-row p, .info-row a { font-size:14.5px; color:var(--ink-soft); }
.info-row a:hover { color:var(--rose); }
.map-frame {
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); min-height:380px;
}
.map-frame iframe { width:100%; height:100%; min-height:380px; border:0; display:block; }

/* ── CTA band ───────────────────────────────────────────────── */
.cta-band {
  background:linear-gradient(135deg,var(--rose-deep) 0%,var(--rose-mid) 60%,var(--rose-bright) 100%);
  color:#fff; border-radius:var(--r-xl); padding:60px;
  text-align:center; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.cta-band::before {
  content:""; position:absolute; top:-40%; right:-10%;
  width:400px; height:400px; border-radius:50%;
  background:rgba(255,255,255,.07); pointer-events:none;
}
.cta-band::after {
  content:""; position:absolute; bottom:-30%; left:-5%;
  width:280px; height:280px; border-radius:50%;
  background:rgba(255,255,255,.05); pointer-events:none;
}
.cta-band h2 { color:#fff; font-size:clamp(24px,3.2vw,36px); margin-bottom:13px; }
.cta-band p  { color:rgba(255,255,255,.88); max-width:48ch; margin:0 auto 28px; font-size:16.5px; }
.cta-band .btn {
  background:#fff; color:var(--rose-deep);
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  font-size:14.5px; padding:12px 26px;
}
.cta-band .btn:hover { background:#fff; transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.22); }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { background:#141013; color:#ccc0c5; padding:64px 0 28px; }
.foot-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:44px; }
.foot-brand p { font-size:13.5px; color:#a096a0; margin-top:14px; max-width:30ch; line-height:1.7; }
.foot-brand .brand-name { color:#fff; }
.foot-brand .brand-sub { color:#6a6068; }
.foot-col h5 {
  font-family:var(--font-display); font-size:12px; font-weight:700;
  color:#fff; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px;
}
.foot-col a, .foot-col p {
  display:block; font-size:13px; color:#a096a0; padding:4px 0;
  transition:color var(--dur-fast), transform var(--dur-fast);
  line-height:1.6;
}
.foot-col a:hover { color:var(--rose-bright); transform:translateX(3px); }
.socials { display:flex; gap:8px; margin-top:18px; }
.socials a {
  width:34px; height:34px; border-radius:9px;
  background:rgba(255,255,255,.07); display:grid; place-items:center;
  color:#ccc0c5; transition:background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.socials a:hover { background:var(--rose-mid); color:#fff; transform:translateY(-2px); }
.foot-bottom {
  margin-top:44px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12px; color:#6a6068;
}

/* ── Scroll reveal ──────────────────────────────────────────── */
.js-loaded .reveal {
  opacity:0; transform:translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.js-loaded .reveal.in { opacity:1; transform:none; }
/* Stagger children inside reveal groups */
.js-loaded .pillars .pillar:nth-child(1),
.js-loaded .cards .card:nth-child(1),
.js-loaded .tcards .tcard:nth-child(1),
.js-loaded .cond-cards .cond-card:nth-child(1),
.js-loaded .deww-cards .deww-card:nth-child(1) { transition-delay:.00s; }
.js-loaded .pillars .pillar:nth-child(2),
.js-loaded .cards .card:nth-child(2),
.js-loaded .tcards .tcard:nth-child(2),
.js-loaded .cond-cards .cond-card:nth-child(2),
.js-loaded .deww-cards .deww-card:nth-child(2) { transition-delay:.08s; }
.js-loaded .pillars .pillar:nth-child(3),
.js-loaded .cards .card:nth-child(3),
.js-loaded .tcards .tcard:nth-child(3),
.js-loaded .cond-cards .cond-card:nth-child(3),
.js-loaded .deww-cards .deww-card:nth-child(3) { transition-delay:.16s; }
.js-loaded .pillars .pillar:nth-child(4),
.js-loaded .cards .card:nth-child(4),
.js-loaded .tcards .tcard:nth-child(4),
.js-loaded .cond-cards .cond-card:nth-child(4),
.js-loaded .deww-cards .deww-card:nth-child(4) { transition-delay:.24s; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width:1080px) {
  .nav-links { display:none; }
  .nav-wa    { display:none; }
  .menu-btn  { display:inline-flex; }
}
@media (max-width:900px) {
  .hero-grid, .split, .contact-grid { grid-template-columns:1fr; gap:36px; }
  .pillars { grid-template-columns:1fr 1fr; }
  .cards, .cond-cards, .deww-cards { grid-template-columns:1fr 1fr; }
  .tcards { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .gallery-item.wide { grid-column:span 2; }
  .gallery-item.tall { grid-row:span 2; }
  .foot-grid { grid-template-columns:1fr; gap:0; }
  .foot-col  { display:none; }
}
@media (max-width:560px) {
  body { font-size:16px; }
  section { padding:56px 0; }
  .wrap { padding:0 20px; }
  .pillars, .cards, .cond-cards, .deww-cards { grid-template-columns:1fr; }
  .tcards { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; gap:4px; }
  .gallery-item.tall { grid-row:auto; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .cta-band, .panel { padding:32px 22px; }
  .brand-sub { display:none; }
  .foot-grid { display:block; }
  .foot-col  { display:none; }
  .foot-bottom { flex-direction:column; gap:6px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation:none !important; transition:none !important;
    scroll-behavior:auto !important;
  }
  .js-loaded .reveal { opacity:1; transform:none; }
}