/* ══════════════════════════════════════════
   SHARED DESIGN SYSTEM — Shree Amuthajothi
   All inner pages import this file
══════════════════════════════════════════ */
:root {
  --beige:      #F5F1E8;
  --beige-d:    #EDE8DC;
  --beige-dd:   #DDD7C8;
  --white:      #FFFFFF;
  --charcoal:   #1F2937;
  --charcoal2:  #283140;
  --green:      #2F6B3F;
  --green-h:    #3A8050;
  --gold:       #D4A017;
  --gold-h:     #E6B420;
  --text-mid:   #4B5563;
  --text-muted: #9CA3AF;
  --border:     rgba(31,41,55,.10);
  --border-g:   rgba(47,107,63,.18);
  --sh-sm:      0 2px 16px rgba(31,41,55,.06);
  --sh-md:      0 8px 48px rgba(31,41,55,.10);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', sans-serif;
  background:var(--beige);
  color:var(--charcoal);
  overflow-x:hidden;
}
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--green); border-radius:2px; }

/* ── HEADER ── */
header {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:76px; padding:0 56px;
  display:flex; align-items:center; justify-content:space-between;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s, border-color .4s, box-shadow .4s;
}
header.solid {
  background:rgba(245,241,232,.97);
  backdrop-filter:blur(18px);
  border-bottom-color:var(--border);
  box-shadow:var(--sh-sm);
}
header.inv {
  background:rgba(31,41,55,.97);
  backdrop-filter:blur(18px);
  border-bottom-color:rgba(255,255,255,.06);
  box-shadow:none;
}
.logo { display:flex; align-items:center; gap:14px; text-decoration:none; }
.logo-img { width:56px; height:56px; object-fit:contain; flex-shrink:0; display:block; }
.logo-words { display:flex; flex-direction:column; line-height:1.2; }
.logo-name {
  font-family:'Cormorant', serif;
  font-size:18px; font-weight:600; letter-spacing:.02em;
  color:var(--charcoal); transition:color .3s;
}
.logo-sub { font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--green); }
header.inv .logo-name { color:#fff; }
header.inv .logo-sub  { color:var(--gold); }

.nav { display:flex; align-items:center; gap:38px; }

/* ── DROPDOWN ── */
.dropdown { position:relative; display:flex; align-items:center; }
.dropdown-toggle {
  background:none; border:none; cursor:pointer; padding:0 0.25rem;
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-mid); display:inline-flex; align-items:center; transition:color .2s;
  font-family:'Inter', sans-serif;
}
.dropdown-toggle:hover { color:var(--green); }
.dropdown-menu {
  display:none; position:absolute; top:calc(100% + 12px); left:0;
  background:#fff; min-width:180px; padding:4px 0;
  border-radius:3px; box-shadow:0 4px 20px rgba(31,41,55,.12);
  z-index:1000; border:1px solid var(--border);
}
.dropdown-menu li { list-style:none; }
.dropdown-menu a {
  display:block; padding:11px 18px; font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-mid); transition:color .2s, background .2s;
}
.dropdown-menu a:hover { background:var(--beige); color:var(--green); }
.dropdown-menu li:not(:last-child) { border-bottom:1px solid var(--border); }
.dropdown:hover .dropdown-menu,
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu { display:block; }
header.inv .dropdown-toggle { color:rgba(255,255,255,.6); }
header.inv .dropdown-toggle:hover { color:#fff; }
header.inv .dropdown-menu { background:var(--charcoal2); border-color:rgba(255,255,255,.08); }
header.inv .dropdown-menu a { color:rgba(255,255,255,.6); }
header.inv .dropdown-menu a:hover { background:rgba(255,255,255,.06); color:#fff; }

.nav a {
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-mid); position:relative; transition:color .2s;
}
.nav a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:100%;
  height:1.5px; background:var(--gold); transition:right .25s;
}
.nav a:hover { color:var(--green); }
.nav a:hover::after { right:0; }
.nav a.active { color:var(--green); }
.nav a.active::after { right:0; }
header.inv .nav a { color:rgba(255,255,255,.6); }
header.inv .nav a:hover { color:#fff; }

.nav-cta {
  background:var(--green); color:#fff !important;
  padding:10px 24px; border-radius:2px;
  font-size:12px !important; font-weight:600 !important; letter-spacing:.09em !important;
  transition:background .2s !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background:var(--green-h) !important; }
header.inv .nav-cta { background:var(--gold); color:var(--charcoal) !important; }
header.inv .nav-cta:hover { background:var(--gold-h) !important; }

.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:11px; min-height:44px; min-width:44px; justify-content:center; align-items:center; }
.burger span { display:block; width:22px; height:1.5px; background:var(--charcoal); border-radius:1px; transition:all .3s; }
header.inv .burger span { background:#fff; }

.mob-nav {
  display:none; position:fixed; inset:0; z-index:850;
  background:var(--charcoal2);
  flex-direction:column; align-items:center; justify-content:center;
}
.mob-nav.open { display:flex; }
.mob-nav a {
  font-family:'Cormorant', serif;
  font-size:clamp(34px,6vw,56px); font-weight:300; letter-spacing:.03em;
  color:rgba(255,255,255,.65);
  padding:12px 0; width:72%; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color .2s;
}
.mob-nav a:hover { color:#fff; }
.mob-cta-link {
  margin-top:20px !important;
  background:var(--green) !important; color:#fff !important;
  border-radius:2px; border:none !important; font-size:18px !important;
}
.mob-x {
  position:absolute; top:24px; right:28px;
  background:none; border:none; font-size:26px;
  color:rgba(255,255,255,.35); cursor:pointer; transition:color .2s;
}
.mob-x:hover { color:#fff; }

/* ── MOBILE GALLERY DROPDOWN ── */
.mob-dropdown-toggle {
  background:none; border:none; cursor:pointer;
  font-family:'Cormorant', serif;
  font-size:clamp(34px,6vw,56px); font-weight:300; letter-spacing:.03em;
  color:rgba(255,255,255,.65);
  padding:12px 0; width:72%; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color .2s;
}
.mob-dropdown-toggle:hover { color:#fff; }
.mob-gallery {
  display:flex; flex-direction:column; align-items:center; width:100%;
}
.mob-gallery a {
  font-family:'Cormorant', serif;
  font-size:clamp(28px,5vw,48px); font-weight:300; letter-spacing:.02em;
  color:rgba(255,255,255,.55);
  padding:10px 0; width:72%; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color .2s;
}
.mob-gallery a:hover { color:#fff; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding-top:76px;
  background:var(--charcoal);
  position:relative; overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.18;
}
.page-hero-bar {
  position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--green); z-index:2;
}
.page-hero-body {
  position:relative; z-index:3;
  max-width:1400px; margin:0 auto; padding:72px 56px 80px;
  animation:fadeUp .8s ease both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

.breadcrumb {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin-bottom:24px;
}
.breadcrumb a { color:rgba(255,255,255,.35); transition:color .2s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb span { color:rgba(255,255,255,.18); }
.breadcrumb .cur-page { color:var(--gold); }

.page-hero h1 {
  font-family:'Cormorant', serif;
  font-size:clamp(44px,6vw,88px); font-weight:300; line-height:1.05; color:#fff;
  max-width:640px; margin-bottom:16px;
}
.page-hero h1 em { font-style:italic; color:var(--gold); }
.page-hero-sub {
  font-size:15px; font-weight:300; color:rgba(255,255,255,.5);
  max-width:480px; line-height:1.8;
}

/* ── SHARED LAYOUT ── */
section { padding:96px 0; }
.wrap { max-width:1400px; margin:0 auto; padding:0 56px; }

.eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font-size:10px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--green); margin-bottom:16px;
}
.eyebrow::before { content:''; width:20px; height:2px; background:var(--gold); }

h2.sec {
  font-family:'Cormorant', serif;
  font-size:clamp(34px,4vw,56px); font-weight:300; line-height:1.1; color:var(--charcoal);
}
h2.sec em { font-style:italic; color:var(--green); }
h2.sec.wh { color:#fff; }
h2.sec.wh em { color:var(--gold); }

/* ── BUTTONS ── */
.btn-green {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--green); color:#fff;
  padding:14px 30px; border-radius:2px;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:background .2s;
}
.btn-green:hover { background:var(--green-h); }
.arr { display:inline-block; transition:transform .2s; }
.btn-green:hover .arr { transform:translateX(4px); }

.btn-outline-d {
  display:inline-flex; align-items:center; gap:10px;
  border:1.5px solid var(--border-g); color:var(--green);
  padding:14px 30px; border-radius:2px;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:all .2s;
}
.btn-outline-d:hover { background:var(--green); color:#fff; border-color:var(--green); }

/* White buttons — only in green/dark sections */
.btn-wh {
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:var(--green);
  padding:14px 36px; border-radius:2px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:all .2s;
}
.btn-wh:hover { background:var(--charcoal); color:#fff; }
.btn-wh-out {
  display:inline-flex; align-items:center; gap:10px;
  border:1.5px solid rgba(255,255,255,.4); color:#fff;
  padding:14px 36px; border-radius:2px;
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  transition:all .2s;
}
.btn-wh-out:hover { border-color:#fff; background:rgba(255,255,255,.07); }

/* ── CTA BAND ── */
.cta-band {
  background:var(--green); padding:80px 0;
  position:relative; overflow:hidden;
}
.cta-band::after {
  content:''; position:absolute;
  top:-50%; left:-20%; width:55%; height:200%;
  background:rgba(255,255,255,.04); transform:rotate(14deg);
}
.cta-inner { position:relative; text-align:center; }
.cta-inner h2 {
  font-family:'Cormorant', serif;
  font-size:clamp(32px,4.5vw,60px); font-weight:300;
  color:#fff; line-height:1.05; margin-bottom:14px;
}
.cta-inner h2 em { font-style:italic; color:var(--gold); }
.cta-inner p { font-size:16px; font-weight:300; color:rgba(255,255,255,.6); margin-bottom:36px; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ── FOOTER ── */
footer { background:var(--charcoal2); }
.foot-top {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:48px; padding:60px 0 44px;
}
.f-brand-name { color:#fff !important; font-size:18px; }
.f-brand-sub  { color:var(--gold) !important; }
.f-blurb { font-size:13px; color:rgba(255,255,255,.32); line-height:1.8; margin-top:16px; max-width:236px; }
.f-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.f-pill {
  font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08); border-radius:1px; color:rgba(255,255,255,.27);
}
.foot-cta {
  margin-top:24px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green); color:#fff;
  padding:11px 22px; border-radius:2px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:background .2s;
}
.foot-cta:hover { background:var(--green-h); }
.f-col h5 {
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.85); margin-bottom:20px;
}
.f-links { display:flex; flex-direction:column; gap:11px; }
.f-links a { font-size:13px; color:rgba(255,255,255,.33); transition:color .2s; }
.f-links a:hover { color:var(--gold); }
.foot-bot {
  border-top:1px solid rgba(255,255,255,.06); padding:22px 0;
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:rgba(255,255,255,.22);
}
.foot-bot a { color:rgba(255,255,255,.22); transition:color .2s; }
.foot-bot a:hover { color:rgba(255,255,255,.6); }

/* ── WHATSAPP FAB ── */
.wa-fab {
  position:fixed; bottom:28px; right:28px; z-index:800;
  background:#25D366; color:#fff;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(37,211,102,.4);
  transition:all .2s;
  animation:fabIn .5s ease 1.5s both;
}
.wa-fab:hover { background:#1ebe5a; transform:translateY(-3px); }
.wa-fab svg { width:28px; height:28px; fill:#fff; }
.wa-fab::before {
  content:'Chat on WhatsApp';
  position:absolute; right:68px;
  background:var(--charcoal); color:#fff;
  font-family:'Inter', sans-serif; font-size:11px; font-weight:600;
  padding:7px 14px; border-radius:2px; white-space:nowrap;
  opacity:0; transform:translateX(8px); transition:all .25s; pointer-events:none;
}
.wa-fab:hover::before { opacity:1; transform:none; }
@keyframes fabIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ── REVEAL ── */
.rv { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }
.rv.vis { opacity:1; transform:none; }
.rv.d1{transition-delay:.1s} .rv.d2{transition-delay:.2s}
.rv.d3{transition-delay:.3s} .rv.d4{transition-delay:.4s}

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .foot-top { grid-template-columns:1fr 1fr; gap:32px; }
}

@media(max-width:900px) {
  .nav { display:none; }
  .burger { display:flex; }
  header { padding:0 24px; height:68px; }
  .wrap { padding:0 24px; }
  .page-hero-body { padding:52px 24px 60px; }
  section { padding:64px 0; }
  .cta-band { padding:56px 0; }
  .logo-img { width:46px; height:46px; }
  .cta-btns { flex-direction:column; align-items:center; gap:12px; }
  .btn-wh, .btn-wh-out { width:100%; max-width:320px; justify-content:center; }
  .foot-top { grid-template-columns:1fr 1fr; gap:32px; }
}

@media(max-width:600px) {
  header { height:60px; padding:0 18px; }
  .wrap { padding:0 18px; }
  .page-hero-body { padding:36px 18px 48px; }
  .page-hero h1 { font-size:clamp(32px,8vw,52px); }
  .page-hero-sub { font-size:13px; }
  section { padding:52px 0; }
  .logo-img { width:40px; height:40px; }
  .logo-name { font-size:15px; }
  .logo-sub { display:none; }
  .cta-band { padding:44px 0; }
  .cta-inner h2 { font-size:clamp(26px,7vw,36px); }
  .cta-inner p { font-size:14px; margin-bottom:24px; }
  .foot-top { grid-template-columns:1fr; gap:28px; }
  .f-blurb { max-width:100%; }
  .foot-bot { flex-direction:column; gap:10px; text-align:center; }
  .wa-fab { bottom:16px; right:16px; width:50px; height:50px; }
  .wa-fab::before { display:none; }
  .wa-fab svg { width:24px; height:24px; }
  h2.sec { font-size:clamp(28px,7vw,40px); }
}

@media(max-width:400px) {
  header { padding:0 14px; }
  .wrap { padding:0 14px; }
  .logo-name { font-size:13px; }
}