/*
Theme Name: Mehndi Hub
Theme URI: https://mehndi.shahit.com.au
Description: Modern animated theme for Mehndi Hub - bridal & festival henna artistry in Sydney.
Version: 2.0
Author: Mehndi Hub
Text Domain: mehndi-hub
*/

/* ============================================================
   1. ROOT VARIABLES
============================================================ */
:root{
  --maroon:#5c1a2e;
  --maroon-dark:#3a0f1d;
  --gold:#cf9d5d;
  --gold-light:#f3e3cb;
  --rose:#e23578;
  --rose-light:#ff8fb6;
  --cream:#fdf6ec;
  --cream-2:#fff9f1;
  --ink:#2b1c1f;
  --ink-soft:#7a6469;
  --white:#ffffff;

  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Poppins', 'Segoe UI', sans-serif;

  --container:1240px;
  --radius-sm:8px;
  --radius:18px;
  --radius-lg:32px;

  --ease:cubic-bezier(.22,1,.36,1);
  --speed:.6s;
  --shadow:0 20px 60px -20px rgba(58,15,29,.35);
  --shadow-sm:0 8px 24px -10px rgba(58,15,29,.25);
}

/* ============================================================
   2. RESET & BASE
============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--maroon);
  line-height:1.15;
  margin:0 0 .6em;
  font-weight:700;
}
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
section{ position:relative; }

/* ============================================================
   3. UTILITIES & SCROLL REVEAL
============================================================ */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--rose); font-weight:600; margin-bottom:14px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--rose); display:block; }

.section-head{ max-width:680px; margin:0 auto 60px; text-align:center; }
.section-head h2{ font-size:clamp(2.1rem,4.5vw,3.4rem); }
.section-head p{ color:var(--ink-soft); font-size:1.08rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 36px; border-radius:50px; font-weight:600; font-size:.95rem;
  letter-spacing:.02em; border:2px solid transparent; transition:all var(--speed) var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--rose); color:var(--white); box-shadow:0 14px 30px -10px rgba(226,53,120,.55); }
.btn-primary:hover{ background:var(--maroon); transform:translateY(-3px); box-shadow:0 18px 36px -12px rgba(58,15,29,.5); }
.btn-ghost{ border-color:rgba(255,255,255,.55); color:var(--white); backdrop-filter:blur(4px); }
.btn-ghost:hover{ background:rgba(255,255,255,.15); border-color:var(--white); transform:translateY(-3px); }
.btn-outline{ border-color:var(--maroon); color:var(--maroon); }
.btn-outline:hover{ background:var(--maroon); color:var(--white); transform:translateY(-3px); }
.btn-dark{ background:var(--maroon); color:var(--white); }
.btn-dark:hover{ background:var(--rose); transform:translateY(-3px); }

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-zoom{ opacity:0; transform:scale(.92); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal-zoom.in{ opacity:1; transform:scale(1); }
.reveal-left{ opacity:0; transform:translateX(-50px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-left.in{ opacity:1; transform:translateX(0); }
.reveal-right{ opacity:0; transform:translateX(50px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-right.in{ opacity:1; transform:translateX(0); }
.stagger > *{ transition-delay:calc(var(--i, 0) * .12s); }

/* ============================================================
   4. HEADER / NAV
============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5%; transition:all var(--speed) var(--ease);
}
.site-header.scrolled{
  padding:12px 5%; background:rgba(253,246,236,.88); backdrop-filter:blur(14px);
  box-shadow:0 4px 30px -10px rgba(58,15,29,.15);
}
.logo{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--white); transition:color var(--speed) var(--ease); }
.site-header.scrolled .logo{ color:var(--maroon); }
.logo-mark{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--rose),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); color:var(--white); font-size:1.3rem; flex-shrink:0;
  box-shadow:0 8px 18px -6px rgba(226,53,120,.6);
}
.main-nav ul{ display:flex; gap:38px; align-items:center; }
.main-nav a{
  color:var(--white); font-weight:500; font-size:.95rem; position:relative; padding:6px 0;
  transition:color var(--speed) var(--ease);
}
.site-header.scrolled .main-nav a{ color:var(--ink); }
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--rose);
  transition:width var(--speed) var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a:hover{ color:var(--rose); }
.header-cta{ display:flex; align-items:center; gap:18px; }
.header-cta .btn{ padding:12px 26px; font-size:.85rem; }
.nav-toggle{
  display:none; width:46px; height:46px; border-radius:50%; border:1px solid currentColor;
  background:transparent; align-items:center; justify-content:center; color:var(--white);
  flex-direction:column; gap:5px;
}
.site-header.scrolled .nav-toggle{ color:var(--maroon); }
.nav-toggle span{ width:18px; height:2px; background:currentColor; display:block; transition:all .3s var(--ease); }

@media (max-width:980px){
  .main-nav{
    position:fixed; inset:0; top:0; background:var(--maroon);
    display:flex; align-items:center; justify-content:center;
    transform:translateY(-100%); transition:transform .5s var(--ease); z-index:999;
  }
  .main-nav.open{ transform:translateY(0); }
  .main-nav ul{ flex-direction:column; gap:30px; text-align:center; }
  .main-nav a{ color:var(--cream); font-size:1.4rem; font-family:var(--font-display); }
  .header-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; position:relative; z-index:1001; }
}

/* ============================================================
   5. HERO (crossfade dynamic background)
============================================================ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; color:var(--white); isolation:isolate;
}
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation:heroFade 18s infinite;
  transform:scale(1.08);
}
.hero-bg img:nth-child(1){ animation-delay:0s; }
.hero-bg img:nth-child(2){ animation-delay:6s; }
.hero-bg img:nth-child(3){ animation-delay:12s; }
@keyframes heroFade{
  0%{ opacity:0; transform:scale(1.08); }
  4%{ opacity:1; transform:scale(1); }
  30%{ opacity:1; transform:scale(1.05); }
  36%{ opacity:0; }
  100%{ opacity:0; }
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(58,15,29,.55) 0%, rgba(58,15,29,.45) 45%, rgba(58,15,29,.85) 100%);
}
.hero-content{ position:relative; z-index:2; max-width:760px; padding:160px 0 120px; }
.hero-content .eyebrow{ color:var(--gold-light); }
.hero-content .eyebrow::before{ background:var(--gold-light); }
.hero h1{
  color:var(--white); font-size:clamp(3rem,8vw,5.6rem); margin-bottom:.4em;
  letter-spacing:-.01em;
}
.hero h1 em{ font-style:italic; color:var(--rose-light); }
.hero p.lead{ font-size:1.2rem; max-width:540px; color:rgba(255,255,255,.85); margin-bottom:2.2em; }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.75); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:46px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--rose-light);
  animation:scrollLine 2.2s infinite var(--ease);
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* Marquee */
.marquee{
  background:var(--maroon); color:var(--gold-light); overflow:hidden; padding:18px 0;
  white-space:nowrap; font-family:var(--font-display); font-size:1.3rem;
}
.marquee-track{ display:flex; width:max-content; animation:marquee 32s linear infinite; }
.marquee-track span{ padding:0 2.2rem; display:flex; align-items:center; gap:1.2rem; }
.marquee-track span::after{ content:'✦'; color:var(--rose); font-size:1rem; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   6. STATS BAND
============================================================ */
.stats{ background:var(--cream-2); padding:80px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:center; }
.stat-num{
  font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--rose);
  font-weight:700; display:flex; align-items:center; justify-content:center; gap:4px;
}
.stat-label{ color:var(--ink-soft); font-size:.92rem; letter-spacing:.05em; text-transform:uppercase; margin-top:6px; }
@media (max-width:840px){ .stats-grid{ grid-template-columns:repeat(2,1fr); gap:50px 30px; } }

/* ============================================================
   7. SERVICES
============================================================ */
.services{ padding:120px 0; background:var(--cream); }
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.service-card{
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4.2;
  box-shadow:var(--shadow-sm); transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.service-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow); }
.service-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.service-card:hover img{ transform:scale(1.12); }
.service-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(58,15,29,.92) 100%);
  z-index:1; transition:opacity var(--speed) var(--ease);
}
.service-card .num{
  position:absolute; top:20px; right:20px; z-index:2; font-family:var(--font-display);
  font-size:1.1rem; color:var(--white); opacity:.7; border:1px solid rgba(255,255,255,.5);
  border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
}
.service-card-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:28px; color:var(--white);
  transform:translateY(10px); transition:transform var(--speed) var(--ease);
}
.service-card:hover .service-card-body{ transform:translateY(0); }
.service-card-body h3{ color:var(--white); font-size:1.4rem; margin-bottom:.3em; }
.service-card-body p{
  font-size:.9rem; color:rgba(255,255,255,.8); max-height:0; opacity:0; overflow:hidden;
  transition:all var(--speed) var(--ease); margin:0;
}
.service-card:hover .service-card-body p{ max-height:120px; opacity:1; margin:.5em 0; }
.service-card-body .tag{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light);
}
@media (max-width:980px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .services-grid{ grid-template-columns:1fr; } .service-card{ aspect-ratio:4/3.4; } }

/* ============================================================
   8. ABOUT SPLIT
============================================================ */
.about-split{ padding:120px 0; background:var(--cream-2); overflow:hidden; }
.about-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:80px; align-items:center; }
.about-media{ position:relative; }
.about-media .frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:4/5;
}
.about-media .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.about-media:hover .frame img{ transform:scale(1.06); }
.about-media .badge{
  position:absolute; bottom:-30px; right:-30px; background:var(--rose); color:var(--white);
  border-radius:50%; width:140px; height:140px; display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center; font-family:var(--font-display); box-shadow:var(--shadow);
  animation:spin-slow 18s linear infinite;
}
.about-media .badge span{ font-size:1.8rem; font-weight:700; display:block; animation:none; }
.about-media .badge small{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; }
@keyframes spin-slow{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.about-media .badge span, .about-media .badge small{ animation:counter-spin 18s linear infinite; }
@keyframes counter-spin{ from{ transform:rotate(0); } to{ transform:rotate(-360deg); } }
.about-text h2{ font-size:clamp(2rem,4.5vw,3.2rem); }
.about-text p{ color:var(--ink-soft); font-size:1.05rem; }
.about-points{ margin:30px 0; display:flex; flex-direction:column; gap:16px; }
.about-points li{ display:flex; gap:14px; align-items:flex-start; font-weight:500; }
.about-points .ico{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--gold-light); color:var(--maroon);
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.signature{ font-family:var(--font-display); font-style:italic; font-size:1.8rem; color:var(--rose); margin-top:20px; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:60px; } .about-media .badge{ width:110px; height:110px; right:0; } }

/* ============================================================
   9. GALLERY PREVIEW (masonry)
============================================================ */
.gallery-preview{ padding:120px 0; background:var(--cream); }
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:18px;
}
.gallery-grid .g-item{
  position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer;
}
.gallery-grid .g-item:nth-child(1){ grid-row:span 2; grid-column:span 2; }
.gallery-grid .g-item:nth-child(4){ grid-row:span 2; }
.gallery-grid .g-item:nth-child(6){ grid-column:span 2; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.g-item:hover img{ transform:scale(1.15) rotate(1deg); }
.g-item .overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(58,15,29,.85));
  opacity:0; transition:opacity var(--speed) var(--ease); display:flex; align-items:flex-end; padding:18px;
}
.g-item:hover .overlay{ opacity:1; }
.g-item .overlay span{ color:var(--white); font-weight:600; font-size:.95rem; letter-spacing:.05em; }
.gallery-cta{ text-align:center; margin-top:56px; }
@media (max-width:980px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .gallery-grid .g-item:nth-child(1){ grid-column:span 2; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(43,28,31,.94); z-index:2000; display:none;
  align-items:center; justify-content:center; padding:40px; backdrop-filter:blur(6px);
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:var(--radius-sm); box-shadow:var(--shadow); animation:lightboxIn .4s var(--ease); }
@keyframes lightboxIn{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:scale(1); } }
.lightbox-close{
  position:absolute; top:30px; right:40px; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.1); color:var(--white); border:1px solid rgba(255,255,255,.3);
  font-size:1.4rem; display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
}
.lightbox-close:hover{ background:var(--rose); transform:rotate(90deg); }

/* ============================================================
   10. PROCESS STEPS
============================================================ */
.process{ padding:120px 0; background:var(--maroon); color:var(--white); position:relative; overflow:hidden; }
.process::before{
  content:''; position:absolute; inset:0; opacity:.08;
  background:radial-gradient(circle at 20% 30%, var(--gold) 0, transparent 40%),
              radial-gradient(circle at 80% 70%, var(--rose) 0, transparent 40%);
}
.process .section-head h2, .process .section-head p{ color:var(--white); }
.process .section-head p{ color:rgba(255,255,255,.7); }
.process .eyebrow{ color:var(--gold-light); justify-content:center; }
.process .eyebrow::before{ background:var(--gold-light); }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; position:relative; z-index:1; }
.process-step{ text-align:center; position:relative; }
.process-step .step-num{
  width:78px; height:78px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
  font-family:var(--font-display); font-size:1.6rem; color:var(--gold-light);
  background:rgba(255,255,255,.04); transition:all var(--speed) var(--ease);
}
.process-step:hover .step-num{ background:var(--rose); color:var(--white); border-color:var(--rose); transform:scale(1.08) rotate(8deg); }
.process-step h3{ color:var(--white); font-size:1.25rem; }
.process-step p{ color:rgba(255,255,255,.65); font-size:.92rem; }
.process-grid .process-step:not(:last-child)::after{
  content:''; position:absolute; top:39px; left:100%; width:30px; height:1px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px);
  display:none;
}
@media (min-width:981px){ .process-grid .process-step:not(:last-child)::after{ display:block; } }
@media (max-width:980px){ .process-grid{ grid-template-columns:repeat(2,1fr); gap:50px 30px; } }

/* ============================================================
   11. TESTIMONIALS
============================================================ */
.testimonials{ padding:120px 0; background:var(--cream-2); }
.t-track-wrap{ overflow:hidden; }
.t-track{ display:flex; gap:28px; transition:transform .6s var(--ease); }
.t-card{
  flex:0 0 calc((100% - 56px)/3); background:var(--white); border-radius:var(--radius);
  padding:36px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:18px;
}
.t-stars{ color:var(--gold); font-size:1.1rem; letter-spacing:.2em; }
.t-card p{ color:var(--ink); font-size:1rem; flex-grow:1; }
.t-person{ display:flex; align-items:center; gap:14px; }
.t-avatar{
  width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--rose),var(--gold));
  display:flex; align-items:center; justify-content:center; color:var(--white); font-family:var(--font-display); font-size:1.2rem; font-weight:700;
}
.t-person strong{ display:block; color:var(--maroon); }
.t-person small{ color:var(--ink-soft); }
.t-controls{ display:flex; justify-content:center; gap:14px; margin-top:46px; }
.t-controls button{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--maroon); background:transparent;
  color:var(--maroon); font-size:1.1rem; transition:all var(--speed) var(--ease);
}
.t-controls button:hover{ background:var(--maroon); color:var(--white); }
@media (max-width:980px){ .t-card{ flex:0 0 calc((100% - 28px)/2); } }
@media (max-width:640px){ .t-card{ flex:0 0 100%; } }

/* ============================================================
   12. PRICING
============================================================ */
.pricing{ padding:120px 0; background:var(--cream); }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; align-items:stretch; }
.price-card{
  background:var(--white); border-radius:var(--radius); padding:44px 36px; text-align:center;
  border:1px solid rgba(92,26,46,.08); transition:all var(--speed) var(--ease); display:flex; flex-direction:column;
}
.price-card:hover{ transform:translateY(-12px); box-shadow:var(--shadow); border-color:transparent; }
.price-card.featured{ background:var(--maroon); color:var(--white); transform:scale(1.04); box-shadow:var(--shadow); position:relative; }
.price-card.featured h3, .price-card.featured .price{ color:var(--white); }
.price-card.featured .desc, .price-card.featured li{ color:rgba(255,255,255,.75); }
.price-card .ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--rose); color:var(--white);
  padding:6px 22px; border-radius:50px; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
}
.price-card h3{ font-size:1.4rem; margin-bottom:.2em; }
.price-card .desc{ color:var(--ink-soft); font-size:.9rem; min-height:40px; }
.price-card .price{ font-family:var(--font-display); font-size:3rem; color:var(--rose); margin:.4em 0; }
.price-card .price span{ font-size:1rem; font-family:var(--font-body); color:var(--ink-soft); }
.price-card.featured .price span{ color:rgba(255,255,255,.6); }
.price-card ul{ flex-grow:1; margin:24px 0; display:flex; flex-direction:column; gap:12px; text-align:left; }
.price-card li{ display:flex; gap:10px; font-size:.92rem; color:var(--ink-soft); }
.price-card li::before{ content:'✓'; color:var(--rose); font-weight:700; }
@media (max-width:980px){ .pricing-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } .price-card.featured{ transform:none; order:-1; } }

/* ============================================================
   13. CTA BANNER
============================================================ */
.cta-banner{
  margin:0 auto 0; max-width:var(--container); border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--maroon),var(--maroon-dark)); color:var(--white);
  padding:90px 60px; text-align:center; position:relative; overflow:hidden; isolation:isolate;
}
.cta-banner::before{
  content:''; position:absolute; inset:-2px; z-index:-1; opacity:.5;
  background:radial-gradient(circle at 15% 20%, rgba(226,53,120,.5), transparent 35%),
             radial-gradient(circle at 85% 80%, rgba(207,157,93,.45), transparent 35%);
  animation:ctaGlow 12s ease-in-out infinite alternate;
}
@keyframes ctaGlow{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(4%,4%) scale(1.15); } }
.cta-banner h2{ color:var(--white); font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:.3em; }
.cta-banner p{ color:rgba(255,255,255,.75); font-size:1.1rem; max-width:560px; margin:0 auto 2em; }
.cta-actions{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }

/* ============================================================
   14. PAGE HERO (inner pages)
============================================================ */
.page-hero{
  position:relative; min-height:62vh; display:flex; align-items:center; color:var(--white);
  overflow:hidden; isolation:isolate;
}
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.05); }
.page-hero::after{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(58,15,29,.65), rgba(58,15,29,.88)); z-index:0;
}
.page-hero-content{ position:relative; z-index:1; padding:180px 0 90px; max-width:760px; }
.page-hero h1{ color:var(--white); font-size:clamp(2.6rem,6vw,4.6rem); }
.page-hero p{ color:rgba(255,255,255,.85); font-size:1.1rem; max-width:540px; }
.breadcrumb{ display:flex; gap:10px; align-items:center; color:rgba(255,255,255,.6); font-size:.85rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--gold-light); }

/* ============================================================
   15. INNER PAGE COMPONENTS
============================================================ */
.content-block{ padding:100px 0; }
.content-block.alt{ background:var(--cream-2); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
.split img{ border-radius:var(--radius); box-shadow:var(--shadow-sm); width:100%; aspect-ratio:5/4; object-fit:cover; transition:transform 1s var(--ease); }
.split:hover img{ transform:scale(1.03); }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:40px; } .split.reverse{ direction:ltr; } }

/* Service detail rows */
.service-detail{ display:grid; grid-template-columns:1fr 1.1fr; gap:70px; align-items:center; padding:80px 0; border-bottom:1px solid rgba(92,26,46,.08); }
.service-detail:last-child{ border-bottom:none; }
.service-detail:nth-child(even){ direction:rtl; }
.service-detail:nth-child(even) > *{ direction:ltr; }
.service-detail .media{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3.2; box-shadow:var(--shadow-sm); }
.service-detail .media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.service-detail:hover .media img{ transform:scale(1.08); }
.service-detail .price-tag{
  position:absolute; bottom:18px; left:18px; background:var(--white); padding:10px 22px; border-radius:50px;
  font-family:var(--font-display); color:var(--maroon); font-weight:700; box-shadow:var(--shadow-sm);
}
.service-detail ul{ margin:20px 0; display:flex; flex-direction:column; gap:10px; }
.service-detail li{ display:flex; gap:10px; color:var(--ink-soft); }
.service-detail li::before{ content:'✦'; color:var(--rose); }
@media (max-width:900px){ .service-detail{ grid-template-columns:1fr; gap:36px; } .service-detail:nth-child(even){ direction:ltr; } }

/* Value cards */
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.value-card{ background:var(--white); border-radius:var(--radius); padding:38px 28px; text-align:center; box-shadow:var(--shadow-sm); transition:transform var(--speed) var(--ease); }
.value-card:hover{ transform:translateY(-8px); }
.value-card .ico{ width:60px; height:60px; border-radius:50%; background:var(--gold-light); color:var(--maroon); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:1.6rem; }
.value-card h3{ font-size:1.1rem; }
.value-card p{ color:var(--ink-soft); font-size:.9rem; margin:0; }
@media (max-width:980px){ .value-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }

/* Timeline */
.timeline{ max-width:720px; margin:0 auto; position:relative; padding-left:42px; }
.timeline::before{ content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--gold-light); }
.timeline-item{ position:relative; padding-bottom:48px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:''; position:absolute; left:-42px; top:4px; width:20px; height:20px; border-radius:50%; background:var(--rose); border:4px solid var(--cream); box-shadow:0 0 0 2px var(--gold-light); }
.timeline-item .year{ font-family:var(--font-display); color:var(--rose); font-size:1.3rem; font-weight:700; }
.timeline-item h3{ margin:.2em 0; }
.timeline-item p{ color:var(--ink-soft); margin:0; }

/* Gallery full page */
.gallery-filters{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:54px; }
.gallery-filters button{
  padding:10px 26px; border-radius:50px; border:1px solid rgba(92,26,46,.2); background:transparent;
  color:var(--ink-soft); font-weight:500; font-size:.9rem; transition:all var(--speed) var(--ease);
}
.gallery-filters button.active, .gallery-filters button:hover{ background:var(--maroon); color:var(--white); border-color:var(--maroon); }
.full-gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.full-gallery-grid .g-item{ aspect-ratio:1/1.1; }
.full-gallery-grid .g-item.hide{ display:none; }
@media (max-width:980px){ .full-gallery-grid{ grid-template-columns:repeat(2,1fr); } }

/* Pricing FAQ accordion */
.faq{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid rgba(92,26,46,.12); }
.faq-q{
  display:flex; justify-content:space-between; align-items:center; padding:24px 0; cursor:pointer;
  font-family:var(--font-display); font-size:1.15rem; color:var(--maroon);
}
.faq-q .plus{ font-size:1.4rem; transition:transform .4s var(--ease); }
.faq-item.open .faq-q .plus{ transform:rotate(135deg); color:var(--rose); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); color:var(--ink-soft); }
.faq-item.open .faq-a{ max-height:200px; padding-bottom:24px; }

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:60px; }
.contact-info-card{ background:var(--white); border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:26px; }
.contact-info-card .item{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-card .ico{
  width:48px; height:48px; border-radius:50%; background:var(--gold-light); color:var(--maroon);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0;
}
.contact-info-card h4{ margin:0 0 .2em; color:var(--maroon); }
.contact-info-card p{ margin:0; color:var(--ink-soft); }
.social-row{ display:flex; gap:12px; margin-top:6px; }
.social-row a{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(92,26,46,.2); display:flex;
  align-items:center; justify-content:center; transition:all var(--speed) var(--ease); color:var(--maroon);
}
.social-row a:hover{ background:var(--rose); color:var(--white); border-color:var(--rose); transform:translateY(-4px); }

.contact-form{ background:var(--white); border-radius:var(--radius); padding:44px; box-shadow:var(--shadow-sm); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group{ margin-bottom:22px; }
.form-group label{ display:block; font-weight:600; margin-bottom:8px; font-size:.9rem; color:var(--maroon); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:14px 18px; border:1px solid rgba(92,26,46,.18); border-radius:var(--radius-sm);
  font-family:inherit; font-size:.95rem; background:var(--cream-2); transition:all var(--speed) var(--ease);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--rose); box-shadow:0 0 0 4px rgba(226,53,120,.12); background:var(--white);
}
.form-note{ font-size:.85rem; color:var(--ink-soft); margin-top:14px; }
.form-success{ background:#e6f6ec; color:#1e6b3a; padding:16px 22px; border-radius:var(--radius-sm); margin-bottom:24px; font-weight:500; }
.map-wrap{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); margin-top:60px; }
.map-wrap iframe{ width:100%; height:380px; border:0; display:block; filter:saturate(.4) contrast(1.05); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* ============================================================
   16. FOOTER
============================================================ */
.site-footer{ background:var(--maroon-dark); color:rgba(255,255,255,.7); padding:90px 0 0; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:70px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand .logo{ color:var(--white); margin-bottom:18px; }
.footer-brand p{ font-size:.92rem; max-width:300px; }
.site-footer h4{ color:var(--white); font-size:1rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:22px; }
.footer-links li{ margin-bottom:12px; }
.footer-links a{ transition:color .3s var(--ease); font-size:.94rem; }
.footer-links a:hover{ color:var(--rose-light); }
.footer-newsletter form{ display:flex; gap:0; margin-top:18px; border:1px solid rgba(255,255,255,.18); border-radius:50px; overflow:hidden; }
.footer-newsletter input{ flex-grow:1; background:transparent; border:0; padding:14px 20px; color:var(--white); font-family:inherit; }
.footer-newsletter input::placeholder{ color:rgba(255,255,255,.4); }
.footer-newsletter input:focus{ outline:none; }
.footer-newsletter button{ background:var(--rose); border:0; color:var(--white); padding:0 26px; font-weight:600; transition:background .3s var(--ease); }
.footer-newsletter button:hover{ background:var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:30px 0; font-size:.85rem; flex-wrap:wrap; gap:14px; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex;
  align-items:center; justify-content:center; transition:all .3s var(--ease); color:var(--white);
}
.footer-social a:hover{ background:var(--rose); border-color:var(--rose); transform:translateY(-3px); }
@media (max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr; gap:40px; } }
@media (max-width:600px){ .footer-top{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; text-align:center; } }

/* ============================================================
   17. FALLBACK PAGE TEMPLATE
============================================================ */
.basic-page{ padding:180px 0 100px; max-width:820px; margin:0 auto; }
.basic-page h1{ font-size:clamp(2.4rem,5vw,3.6rem); }
.basic-page .page-entry-content img{ border-radius:var(--radius); margin:20px 0; }

/* ============================================================
   18. MISC ANIMATIONS
============================================================ */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.float{ animation:floaty 6s ease-in-out infinite; }