/* =========================================================
   HOME PAGE — design polish layer
   Loaded only by index.php. Everything is scoped under .home
   so no other page is affected. Same brand palette as style.css.
   ========================================================= */

.home{
  --sec-pad: clamp(68px, 8vw, 112px);
  --gap-card: clamp(18px, 2.2vw, 28px);
  --ease: cubic-bezier(.22,.8,.3,1);
}

/* ---------- Global polish for this page ---------- */
.home section[id]{ scroll-margin-top:calc(var(--header-h) - 14px); }
.home .section{ padding:var(--sec-pad) 0; }
.home a:focus-visible,
.home button:focus-visible{ outline:3px solid var(--gold-light); outline-offset:3px; border-radius:8px; }

/* Gujarati glyphs carry tall matras: give headings room so nothing gets clipped */
html[data-lang="gu"] .home h1,
html[data-lang="gu"] .home h2,
html[data-lang="gu"] .home h3{ line-height:1.36; }
html[data-lang="gu"] .home .hero-content h1{ line-height:1.3; }

/* Softer, shorter reveal (keeps .in state authoritative) */
.home .reveal{ transform:translateY(24px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.home .reveal.in{ opacity:1; transform:none; }

/* Section headings */
.home .section-head{ max-width:760px; margin-bottom:clamp(34px, 4.5vw, 56px); }
.home .section-head h2{ font-size:clamp(27px, 3.6vw, 42px); letter-spacing:-.01em; margin-bottom:14px; text-wrap:balance; }
.home .section-head p{ max-width:620px; margin:0 auto; line-height:1.75; text-wrap:pretty; }
.home .eyebrow{ font-size:12.5px; margin-bottom:16px; }

/* Buttons: a touch more presence */
.home .btn{ padding:15px 30px; letter-spacing:.01em; }
.home .btn-primary{ background:linear-gradient(135deg, var(--orange-light) -40%, var(--orange) 40%, var(--orange-dark) 140%); }
.home .btn-primary:hover{ background:linear-gradient(135deg, var(--orange) -20%, var(--orange-dark) 120%); }

/* =========================================================
   HERO
   ========================================================= */
.home .hero{ height:100vh; height:100svh; min-height:640px; max-height:1000px; background:var(--ink); }
.home .hero-slide{ padding-top:var(--header-h); }
.home .hero-slide > .container{ width:100%; }          /* fixes hero text drifting away from the page grid */
.home .hero-content{ padding:0; max-width:700px; }

.home .hero-slide .slide-overlay{
  background:
    radial-gradient(900px 520px at 12% 55%, rgba(20,15,10,.62), transparent 70%),
    linear-gradient(100deg, rgba(20,15,10,.9) 0%, rgba(20,15,10,.62) 46%, rgba(226,104,13,.28) 100%),
    linear-gradient(0deg, rgba(20,15,10,.75) 0%, rgba(20,15,10,0) 32%);
}

.home .hero-tag{
  background:rgba(255,255,255,.07); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(230,190,88,.55); padding:9px 20px; font-size:12.5px; margin-bottom:26px;
}
.home .hero-content h1{
  font-size:clamp(34px, 5.4vw, 68px); line-height:1.1; letter-spacing:-.02em; margin-bottom:22px;
  text-shadow:0 4px 28px rgba(0,0,0,.35); text-wrap:balance;
}
.home .hero-content p{ font-size:clamp(16px, 1.5vw, 18.5px); line-height:1.75; max-width:560px; margin-bottom:36px; color:rgba(255,255,255,.88); }
.home .hero-btns{ gap:14px; }
.home .hero-btns .btn{ padding:16px 32px; font-size:15.5px; }

/* Controls: dots bottom-left (on the page grid), arrows bottom-right, away from the floating buttons */
.home .hero-nav{
  left:0; right:0; bottom:44px; justify-content:flex-start;
  max-width:var(--container); margin:0 auto; padding:0 24px;
}
.home .hero-dots button{ width:42px; height:4px; background:rgba(255,255,255,.28); }
.home .hero-dots button:hover{ background:rgba(255,255,255,.5); }
.home .hero-arrows{
  top:auto; bottom:30px; left:auto; transform:none; width:auto; padding:0; gap:12px;
  right:max(84px, calc((100% - var(--container)) / 2 + 24px));
}
.home .hero-arrows button{ width:48px; height:48px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
.home .hero-arrows button:hover{ background:var(--orange); border-color:var(--orange); transform:translateY(-2px); }
.home .hero-scroll{ display:none; }

/* =========================================================
   MARQUEE
   ========================================================= */
.home .marquee-strip{
  background:linear-gradient(180deg, #17120d, var(--ink)); padding:15px 0; position:relative;
  border-top:3px solid var(--gold);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.home .marquee-track{ animation-duration:36s; }
.home .marquee-strip:hover .marquee-track{ animation-play-state:paused; }
.home .marquee-track span{ font-size:14px; padding:0 30px; color:rgba(255,247,233,.9); }
.home .marquee-track span i{ font-size:7px; color:var(--gold-light); }

/* =========================================================
   ABOUT
   ========================================================= */
.home #about{ padding-bottom:calc(var(--sec-pad) + 10px); }
.home .about-grid{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(44px, 7vw, 96px); }
.home .about-media{ isolation:isolate; margin:0 0 28px 28px; }
.home .about-media::before{                                   /* offset gold frame behind the photo */
  content:""; position:absolute; inset:26px -26px -26px 26px; border:2px solid var(--gold-light);
  border-radius:var(--radius-lg); z-index:-1; opacity:.85;
}
.home .about-media .frame{ border-radius:var(--radius-lg); box-shadow:0 24px 60px rgba(28,23,18,.18); aspect-ratio:4/4.5; }
.home .about-media .frame::after{ margin:16px; border-color:rgba(255,255,255,.5); }
.home .about-badge{
  left:-28px; bottom:-28px; padding:20px 26px; border-radius:20px; min-width:156px;
  background:linear-gradient(135deg, var(--orange), var(--orange-dark));
  box-shadow:0 18px 38px rgba(226,104,13,.32); border:3px solid var(--bg);
}
.home .about-badge .num{ font-size:30px; margin-bottom:4px; }
.home .about-badge .lbl{ font-size:12.5px; line-height:1.4; display:block; }
.home .about-ring{ top:-34px; right:-18px; width:92px; height:92px; box-shadow:var(--shadow-sm); }

.home .about-body h2{ font-size:clamp(28px, 3.8vw, 44px); margin-bottom:22px; letter-spacing:-.01em; text-wrap:balance; }
.home .about-body p{ font-size:16.5px; line-height:1.85; margin-bottom:18px; max-width:560px; text-wrap:pretty; }
.home .about-body .reveal.reveal-delay-1{ font-size:18px; color:var(--ink); }
.home .about-body .reveal.reveal-delay-4{ margin-top:30px; }

/* Thread-stitch edge between About and Services (replaces the loose divider) */
.home #services{ position:relative; }
.home #services::before{
  content:""; position:absolute; top:-1px; left:50%; width:min(calc(var(--container) - 48px), calc(100% - 48px)); height:2px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(90deg, var(--gold) 0 14px, transparent 14px 26px);
}

/* =========================================================
   SERVICES
   ========================================================= */
.home .services-grid{ gap:var(--gap-card); }
.home .service-card{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 32px) clamp(26px, 2.8vw, 32px);
  border-radius:20px; border:1px solid rgba(205,157,36,.22);
  background:linear-gradient(180deg, #fff 0%, #FFFCF6 100%);
  box-shadow:0 2px 0 rgba(28,23,18,.02), 0 8px 24px rgba(28,23,18,.04);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
}
.home .service-card:hover{ transform:translateY(-8px); box-shadow:0 22px 48px rgba(28,23,18,.12); border-color:rgba(226,104,13,.35); }
.home .service-icon{
  width:64px; height:64px; border-radius:18px; margin-bottom:24px; font-size:25px; position:relative; z-index:1;
  background:linear-gradient(135deg, #FFF1DC, #FFE0B8); box-shadow:inset 0 0 0 1px rgba(205,157,36,.25);
}
.home .service-card:hover .service-icon{ background:linear-gradient(135deg, var(--orange-light), var(--orange)); box-shadow:0 10px 22px rgba(226,104,13,.3); }
.home .service-card .s-no{ top:20px; right:26px; font-size:44px; line-height:1; color:rgba(205,157,36,.2); letter-spacing:-.02em; }
.home .service-card h3{ font-size:19.5px; margin-bottom:10px; position:relative; z-index:1; }
.home .service-card p{ font-size:15px; line-height:1.75; margin-bottom:22px; position:relative; z-index:1; }
.home .service-card .s-link{
  margin-top:auto; padding-top:18px; width:100%; border-top:1px dashed var(--line);
  justify-content:space-between; font-size:14px;
}
.home .service-card .s-link i{
  width:30px; height:30px; border-radius:50%; background:var(--bg-soft); color:var(--orange-dark);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; transition:background .3s ease, color .3s ease, transform .3s ease;
}
.home .service-card:hover .s-link i{ background:var(--orange); color:#fff; transform:translateX(4px); }

/* =========================================================
   MEMBER-SERVICES PROMO STRIP
   ========================================================= */
.home #find-services-promo{ padding:clamp(44px, 5.5vw, 72px) 0; }
.home .cta-strip{
  position:relative; overflow:hidden; isolation:isolate; gap:28px 40px;
  padding:clamp(32px, 5vw, 56px) clamp(26px, 5vw, 60px); border-radius:var(--radius-lg);
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(226,104,13,.38), transparent 70%),
    radial-gradient(380px 220px at 0% 100%, rgba(205,157,36,.2), transparent 70%),
    linear-gradient(120deg, #1C1712, #33241a);
  box-shadow:0 24px 54px rgba(28,23,18,.22);
}
.home .cta-strip::before{
  content:""; position:absolute; right:-90px; top:-90px; width:300px; height:300px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.12); z-index:-1;
}
.home .cta-strip::after{
  content:""; position:absolute; right:30px; top:-150px; width:300px; height:300px; border-radius:50%;
  border:1.5px solid rgba(230,190,88,.18); z-index:-1;
}
.home .cta-strip .eyebrow{ color:var(--gold-light); }
.home .cta-strip h3{ font-size:clamp(22px, 3vw, 32px); max-width:560px; margin-bottom:2px; text-wrap:balance; }
.home .cta-strip p{ color:rgba(255,255,255,.75); font-size:15.5px; line-height:1.7; max-width:560px; margin-top:10px; }
.home .cta-strip .btn{ flex-shrink:0; }

/* =========================================================
   DONORS (styles moved here from the inline <style> in index.php)
   ========================================================= */
.home .donor-mini-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap-card); margin-top:0; }
.home .donor-mini-card{
  display:flex; align-items:center;
  flex:1 1 320px; max-width:480px; min-width:0; padding:20px 22px; border-radius:18px; gap:16px;
  background:#fff; border:1px solid rgba(205,157,36,.24); box-shadow:0 8px 24px rgba(28,23,18,.05);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.home .donor-mini-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(28,23,18,.11); border-color:rgba(226,104,13,.4); }
.home .donor-mini-avatar{
  width:54px; height:54px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--orange), var(--gold)); color:#fff; font-weight:700; font-size:19px;
  box-shadow:0 8px 18px rgba(226,104,13,.28), inset 0 0 0 3px rgba(255,255,255,.35);
}
.home .donor-mini-body{ min-width:0; flex:1; }
.home .donor-mini-body h4{
  font-size:15.5px; margin:0 0 3px; letter-spacing:.01em; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.home .donor-mini-body .dm-city{ display:block; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }
.home .donor-mini-amount{
  font-weight:800; color:var(--orange-dark); white-space:nowrap; flex-shrink:0;
  font-size:15px; padding:7px 13px; border-radius:50px; background:var(--bg-soft); border:1px solid var(--line);
}
.home #donors .section-head{ margin-bottom:clamp(30px, 4vw, 44px); }
.home #donors .section-head + .donor-mini-grid + div{ margin-top:clamp(32px, 4vw, 44px) !important; }

/* =========================================================
   GALLERY
   ========================================================= */
.home .gallery-grid{
  grid-template-columns:repeat(4, 1fr); grid-auto-rows:clamp(150px, 15vw, 200px); grid-auto-flow:dense; gap:clamp(10px, 1.3vw, 16px);
}
.home .gallery-item{ border-radius:18px; box-shadow:0 8px 24px rgba(28,23,18,.08); background:var(--bg-soft); }
.home .gallery-item::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); pointer-events:none; }
.home .gallery-item img{ transition:transform .9s var(--ease); }
.home .gallery-item:hover img{ transform:scale(1.08); }
.home .gallery-item .g-overlay{ padding:20px; }
.home .gallery-item .g-overlay strong{ font-size:17px; line-height:1.3; }
.home .gallery-more{ text-align:center; margin-top:clamp(30px, 4vw, 44px); }
@media (hover:none){
  .home .gallery-item .g-overlay{ opacity:1; background:linear-gradient(0deg, rgba(20,15,10,.78) 0%, rgba(20,15,10,0) 50%); }
  .home .gallery-item .g-plus{ display:none; }
}

/* =========================================================
   QUOTE BAND
   ========================================================= */
.home .quote-band{
  padding:clamp(72px, 9vw, 120px) 0;
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(230,190,88,.28), transparent 70%),
    linear-gradient(120deg, var(--orange) 0%, var(--orange-dark) 100%);
}
.home .quote-band .container{ position:relative; z-index:2; }
.home .quote-mark{
  width:74px; height:74px; margin:0 auto 26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:28px; color:#fff; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.4);
  backdrop-filter:blur(4px);
}
.home .quote-band blockquote{
  max-width:880px; font-size:clamp(22px, 3.2vw, 36px); line-height:1.5; margin-bottom:28px; text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.18);
}
.home .quote-band cite{ font-size:12.5px; letter-spacing:.14em; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .home .about-grid{ grid-template-columns:1fr; gap:64px; }
  .home .about-media{ max-width:440px; margin:0 auto 30px; }
  .home .about-body p{ max-width:none; }
  .home .hero-arrows{ right:84px; }
  .home .gallery-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:720px){
  .home .hero{ min-height:600px; }
  .home .hero-content h1{ font-size:clamp(30px, 8.6vw, 40px); }
  .home .hero-btns .btn{ flex:1 1 auto; justify-content:center; padding:15px 22px; }
  .home .hero-nav{ bottom:30px; padding:0 18px; }
  .home .hero-dots button{ width:32px; }
  .home .services-grid{ grid-template-columns:1fr; }
  .home .about-media{ margin:0 18px 30px 14px; }
  .home .about-badge{ left:-8px; bottom:-24px; padding:16px 20px; min-width:0; }
  .home .about-media::before{ inset:18px -14px -18px 18px; }
  .home .cta-strip{ flex-direction:column; align-items:flex-start; text-align:left; }
  .home .cta-strip .btn{ width:100%; justify-content:center; }
  .home .donor-mini-card{ flex-basis:100%; max-width:none; }
  .home .gallery-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px; }
  .home .gallery-item.g-wide{ grid-column:span 2; }
}
@media (max-width:480px){
  .home .donor-mini-body h4{ white-space:normal; overflow:visible; text-overflow:clip; }
  .home .section-head{ margin-bottom:32px; }
  .home .quote-mark{ width:62px; height:62px; font-size:23px; }
}
@media (prefers-reduced-motion: reduce){
  .home .marquee-track{ animation:none; }
}