/* ===========================================================
   Hindus for America — Design System (Light · Structural Redesign)
   Palette:  --paper   #FBF8F2  (warm ivory background)
             --card    #FFFFFF  (white raised surface)
             --card-2  #F3ECDD  (warm sand surface)
             --saffron #D9663C  (primary accent / action — terracotta)
             --marigold#C99A3E  (highlight / numerals — antique gold)
             --maroon  #5C7A6E  (secondary accent — sage, calm contrast)
             --ink     #2B2620  (text on light)
             --ink-soft#7A7268  (muted text)
   Type:     Display — "Fraunces"  Body — "Inter"
   Structural signature (different from prior versions):
     - Two-tier header: logo row, then a centered tab-style nav row
     - Hero copy centered, chakra art as an oversized faint watermark
     - Pillars shown as a numbered horizontal list, not boxed cards
     - Stats shown as one inline row divided by hairlines
     - Events shown as a connected vertical timeline
     - Contact form & info stacked single column, form on top
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Sora:wght@300;400;500;600;700;800&display=swap');

:root{
  --paper:#F5F8F6;
  --card:#FFFFFF;
  --card-2:#E9F1ED;
  --saffron:#2F6F5E;
  --saffron-bright:#255A4C;
  --marigold:#B8843E;
  --maroon:#A14E3C;
  --ink:#1E2A26;
  --ink-soft:#5C6E67;
  --sand:#1E2A26;
  --sand-dim:#5C6E67;
  --ink-2:#E9F1ED;
  --line: rgba(30,42,38,0.12);
  --display: 'Cormorant Garamond', serif;
  --body: 'Sora', sans-serif;
  --ease: cubic-bezier(.16,.8,.3,1);
  --shadow: 0 18px 44px -22px rgba(30,42,38,.22);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; width:100%; overflow-x:hidden;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  line-height:1.65;
  font-size:.95rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--saffron); color:#fff;}
:focus-visible{outline:2px solid var(--maroon); outline-offset:3px; border-radius:4px;}

.wrap{max-width:1240px; margin:0 auto; padding:0 clamp(20px, 4vw, 56px); width:100%;}

h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.12; margin:0; letter-spacing:-.01em;}
.eyebrow{
  font-family:var(--body); text-transform:uppercase; letter-spacing:.2em;
  font-size:.64rem; color:var(--maroon); font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--saffron); border-radius:2px; display:block;}

/* ---------------- background texture ---------------- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, rgba(217,102,60,.08), transparent 60%),
    radial-gradient(ellipse 800px 560px at 100% 60%, rgba(92,122,110,.06), transparent 60%);
}

/* ---------------- top alert strip ---------------- */
.strip{
  background:var(--ink);
  color:var(--paper);
  font-size:.78rem;
  letter-spacing:.02em;
  text-align:center;
  padding:9px 16px;
  position:relative; z-index:30;
}
.strip strong{color:var(--marigold);}
.strip a{text-decoration:underline; color:var(--paper);}

/* ===================================================================
   HEADER — restructured into two tiers:
   tier 1: brand (left) + donate/menu-toggle (right)
   tier 2: full-width centered tab navigation, separated by a hairline
   =================================================================== */
header{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; flex-wrap:wrap; row-gap:0;
  align-items:center;
  padding:18px clamp(20px,4vw,56px) 16px; max-width:1240px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px; order:1; flex:1 1 auto;}
.brand .mark{width:38px; height:38px; flex:none;}
.brand .word{font-family:var(--display); font-size:1.14rem; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
.brand .word span{color:var(--maroon); display:block; font-family:var(--body); font-weight:600; font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; margin-top:2px;}

/* donate + toggle group is the 3rd flex child in markup — pin top right */
.nav > div[style]{order:2;}

/* tab nav becomes its own full-width row underneath */
.navlinks{
  order:3; flex:1 0 100%;
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.navlinks a{
  font-size:.8rem; font-weight:600; color:var(--sand-dim);
  position:relative; padding:10px 20px;
  transition:color .25s var(--ease);
}
.navlinks a::after{
  content:""; position:absolute; left:20px; right:20px; bottom:0; height:2px;
  background:var(--saffron); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.navlinks a:hover{color:var(--ink);}
.navlinks a:hover::after, .navlinks a.active::after{transform:scaleX(1);}
.navlinks a.active{color:var(--saffron);}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 24px; border-radius:999px;
  font-weight:600; font-size:.8rem; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn-primary{
  background:var(--saffron);
  color:#fff; box-shadow:0 10px 22px -10px rgba(217,102,60,.5);
}
.btn-primary:hover{transform:translateY(-2px); background:var(--saffron-bright); box-shadow:0 14px 26px -10px rgba(217,102,60,.55);}
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent;}
.btn-ghost:hover{border-color:var(--maroon); color:var(--maroon); background:rgba(92,122,110,.06);}

.menu-toggle{display:none; background:none; border:none; color:var(--ink); font-size:1.5rem; cursor:pointer;}

@media (max-width:880px){
  .nav{padding:14px 20px 0;}
  .navlinks{
    position:fixed; inset:0; flex-direction:column; justify-content:flex-start;
    padding:130px 24px 30px; gap:4px; background:var(--paper);
    transform:translateX(100%); transition:transform .4s var(--ease); z-index:39;
    overflow-y:auto; margin-top:0;
  }
  .navlinks.open{transform:translateX(0);}
  .navlinks a{font-size:1.1rem; color:var(--ink); width:100%; text-align:left; padding:14px 6px;}
  .menu-toggle{display:block; color:var(--ink);}
  .btn-primary.nav-cta{display:none;}
}

/* ===================================================================
   HERO — copy centered, chakra art becomes a huge faint watermark
   sitting BEHIND the text instead of sitting beside it
   =================================================================== */
.hero{
  position:relative; z-index:1;
  padding:80px 0 64px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  overflow:hidden;
}
.hero h1{font-size:clamp(2rem,4.8vw,3.7rem); color:var(--ink); max-width:920px;}
.hero h1 em{font-style:italic; color:var(--saffron);}
.hero p.lede{margin:22px auto 30px; max-width:560px; color:var(--sand-dim); font-size:.97rem;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

.hero-art{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(120vw, 1100px); max-width:none; aspect-ratio:1/1;
  opacity:.16; z-index:-1; pointer-events:none; margin:0;
}

.chakra{width:100%; height:100%; overflow:visible;}
.chakra .ring{fill:none; stroke:var(--marigold); stroke-opacity:.7;}
.chakra .spoke{stroke:var(--saffron); stroke-width:2; stroke-linecap:round;}
.chakra .hub{fill:var(--saffron);}
.chakra-spin{animation:spin 60s linear infinite;}
.chakra-spin-slow{animation:spin 110s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg);}}

.pulse-dot{animation:pulse 2.4s ease-in-out infinite; fill:var(--marigold) !important;}
@keyframes pulse{0%,100%{opacity:.35; r:3;}50%{opacity:1; r:5;}}

@media (max-width:880px){
  .hero{padding-top:48px;}
  .hero-art{width:140vw;}
}

/* ---------------- reveal on scroll ---------------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-d1{transition-delay:.08s;} .reveal-d2{transition-delay:.16s;} .reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;} .reveal-d5{transition-delay:.40s;} .reveal-d6{transition-delay:.48s;}

/* ---------------- section shells ---------------- */
section{position:relative; z-index:1; padding:80px 0;}
.section-head{max-width:640px; margin:0 auto 50px; text-align:center;}
.section-head h2{font-size:clamp(1.6rem,2.8vw,2.15rem); color:var(--ink);}
.section-head p{color:var(--sand-dim); margin-top:14px; font-size:.93rem;}
.divider{height:1px; background:var(--line); border:0; margin:0;}

/* ===================================================================
   PILLARS — restructured from a 3-col card grid into a numbered
   horizontal list (newspaper-index style), divided by hairlines
   =================================================================== */
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  max-width:1180px; margin:0 auto;
}
.pillar{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:26px 22px; border:1px solid var(--line); border-radius:14px; background:var(--card);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s, background .3s;
}
.pillar:hover{transform:translateY(-4px); border-color:var(--saffron); background:var(--card-2); box-shadow:var(--shadow);}
.pillar .num{
  font-family:var(--display); font-size:.86rem; color:var(--marigold); letter-spacing:.1em; font-weight:600;
}
.pillar h3{font-size:1.08rem; color:var(--ink); margin:10px 0 8px;}
.pillar p{color:var(--sand-dim); font-size:.85rem; margin:0 0 14px; flex:1;}
.pillar .more{
  font-size:.8rem; font-weight:600; color:var(--saffron); display:inline-flex; gap:6px; align-items:center;
}
.pillar .more svg{width:13px; height:13px; transition:transform .3s var(--ease);}
.pillar:hover .more svg{transform:translateX(4px);}

@media (max-width:1080px){ .pillars{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .pillars{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .pillars{grid-template-columns:1fr;} }

/* ---------------- mission / vision ---------------- */
.mv{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); background:var(--card); max-width:980px; margin:0 auto;}
.mv-card{padding:48px 44px; position:relative;}
.mv-card:first-child{border-right:1px solid var(--line);}
.mv-card::before{
  content:"\201C"; font-family:var(--display); font-size:5rem; color:var(--card-2); position:absolute; top:6px; left:24px; z-index:0; line-height:1;
}
.mv-card .eyebrow, .mv-card h3, .mv-card p{position:relative; z-index:1; text-align:left; justify-content:flex-start;}
.mv-card .eyebrow{margin-bottom:14px;}
.mv-card p{color:var(--sand-dim); font-size:.93rem;}
@media (max-width:760px){.mv{grid-template-columns:1fr;} .mv-card:first-child{border-right:none; border-bottom:1px solid var(--line);}}

/* ===================================================================
   STATS — restructured from a 4-box grid into one inline row of
   numbers separated by thin vertical hairlines
   =================================================================== */
.stats{
  display:flex; justify-content:center; flex-wrap:wrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:10px 0;
}
.stat{
  padding:22px 44px; text-align:center; position:relative;
}
.stat:not(:last-child)::after{
  content:""; position:absolute; right:0; top:18px; bottom:18px; width:1px; background:var(--line);
}
.stat .n{font-family:var(--display); font-size:2rem; color:var(--saffron); font-weight:700;}
.stat .l{color:var(--sand-dim); font-size:.72rem; margin-top:6px; letter-spacing:.04em; text-transform:uppercase;}
@media (max-width:760px){.stat{padding:18px 24px;} .stat:nth-child(2n)::after{display:none;}}

/* ===================================================================
   CTA band — diagonal-cut banner instead of a rounded soft card
   =================================================================== */
.cta-band{
  padding:58px 56px; position:relative; overflow:hidden;
  background:var(--ink); color:var(--paper);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band::before{
  content:""; position:absolute; left:-60px; bottom:-60px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(217,102,60,.35),transparent 70%); filter:blur(4px);
}
.cta-band h2{font-size:clamp(1.3rem,2.4vw,1.9rem); max-width:480px; position:relative; z-index:1; color:var(--paper);}
.cta-band .actions{position:relative; z-index:1; display:flex; gap:14px; flex-wrap:wrap;}
.cta-band .btn-ghost{border-color:rgba(251,248,242,.3); color:var(--paper);}
.cta-band .btn-ghost:hover{border-color:var(--marigold); color:var(--marigold); background:rgba(251,248,242,.06);}

/* ---------------- footer ---------------- */
footer{position:relative; z-index:1; border-top:3px solid var(--saffron); padding:56px 0 28px; margin-top:36px; background:var(--card-2);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
.foot-grid h4{font-family:var(--display); font-size:1rem; color:var(--ink); margin:0 0 18px;}
.foot-grid p, .foot-grid a{color:var(--sand-dim); font-size:.9rem;}
.foot-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
.foot-grid ul a{transition:color .25s;}
.foot-grid ul a:hover{color:var(--saffron);}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:42px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--sand-dim); font-size:.82rem;
}
.social{display:flex; gap:12px;}
.social a{
  width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:var(--card);
  display:flex; align-items:center; justify-content:center; transition:.3s var(--ease);
}
.social a:hover{border-color:var(--saffron); color:var(--saffron); transform:translateY(-3px);}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:540px){.foot-grid{grid-template-columns:1fr;}}

/* ---------------- page hero (inner pages) ---------------- */
.page-hero{
  padding:64px 0 50px; position:relative; z-index:1; text-align:center;
}
.page-hero .crumb{justify-content:center;}
.page-hero h1{font-size:clamp(1.8rem,3.3vw,2.6rem); max-width:760px; margin:0 auto;}
.page-hero p{color:var(--sand-dim); max-width:600px; margin:16px auto 0; font-size:.93rem;}
.crumb{font-size:.82rem; color:var(--sand-dim); margin-bottom:16px; display:flex; gap:8px; align-items:center;}
.crumb a:hover{color:var(--maroon);}

/* ---------------- about page extras: order swapped for variety ---------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.split > div:first-child{order:2;}
.split-art{order:1; position:relative;}
.list-check{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.list-check li{display:flex; gap:14px; align-items:flex-start; color:var(--sand-dim); font-size:.97rem;}
.list-check svg{flex:none; margin-top:2px; width:20px; height:20px; color:#fff; background:var(--maroon); border-radius:50%; padding:3px;}
@media (max-width:880px){.split{grid-template-columns:1fr; gap:34px;} .split > div:first-child{order:1;} .split-art{order:2;}}

/* ===================================================================
   EVENTS — restructured from boxed cards into a connected timeline
   =================================================================== */
.event-list{display:flex; flex-direction:column; gap:0; position:relative; max-width:880px; margin:0 auto;}
.event-list::before{
  content:""; position:absolute; left:54px; top:8px; bottom:8px; width:1px; background:var(--line);
}
.event-card{
  display:grid; grid-template-columns:110px 1fr auto; gap:26px; align-items:center;
  padding:26px 6px; position:relative; background:transparent;
  transition:padding-left .3s var(--ease);
}
.event-card:hover{padding-left:14px;}
.event-date{
  text-align:center; font-family:var(--display); position:relative;
}
.event-date::after{
  content:""; position:absolute; right:-19px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%; background:var(--card); border:2px solid var(--saffron); z-index:1;
}
.event-date .d{font-size:1.9rem; color:var(--saffron); font-weight:700; line-height:1;}
.event-date .m{font-size:.74rem; letter-spacing:.12em; color:var(--maroon); text-transform:uppercase; margin-top:6px;}
.event-card h3{font-size:1.05rem; color:var(--ink); margin-bottom:6px;}
.event-card .meta{font-size:.8rem; color:var(--sand-dim); display:flex; flex-direction:column; gap:6px;}
.tag{
  display:inline-block; padding:4px 12px; border-radius:999px; font-size:.7rem; font-weight:700;
  background:rgba(92,122,110,.12); color:var(--maroon); margin-bottom:10px; letter-spacing:.04em;
}
@media (max-width:700px){
  .event-list::before{left:30px;}
  .event-card{grid-template-columns:60px 1fr; text-align:left;}
  .event-date .d{font-size:1.3rem;}
  .event-date::after{right:-25px;}
  .event-card .btn{grid-column:2; justify-self:start; margin-top:10px;}
}

/* ===================================================================
   CONTACT — restructured: single stacked column, form first, then
   info shown as an inline strip of detail chips below
   =================================================================== */
.contact-grid{display:grid; grid-template-columns:1fr; gap:0; max-width:760px; margin:0 auto;}
.contact-form{order:-1; background:var(--card); padding:46px 44px; border:1px solid var(--line); border-bottom:none;}
.contact-form .eyebrow, .contact-form h3{text-align:left; justify-content:flex-start;}
.contact-info{
  background:var(--card-2); padding:30px 44px; border:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:22px 38px;
}
.contact-info > .eyebrow, .contact-info > h3, .contact-info > p:first-of-type{display:none;}
.info-row{display:flex; gap:14px; padding:0; border-bottom:none; flex:1 1 200px; min-width:200px;}
.info-row .ic{
  width:38px; height:38px; border-radius:10px; background:rgba(217,102,60,.1); color:var(--saffron);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.info-row .lab{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--maroon); margin-bottom:3px;}
.info-row .val{color:var(--ink); font-size:.92rem;}

.field{margin-bottom:18px;}
.field label{display:block; font-size:.82rem; color:var(--sand-dim); margin-bottom:8px; letter-spacing:.01em;}
.field input, .field textarea{
  width:100%; background:var(--card-2); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; color:var(--ink); font-family:var(--body); font-size:.95rem;
  transition:border-color .3s, box-shadow .3s;
}
.field input::placeholder, .field textarea::placeholder{color:#a89e8e;}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--saffron); box-shadow:0 0 0 3px rgba(217,102,60,.15);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;} .contact-form, .contact-info{padding:30px 22px;}}

.map-strip{
  margin-top:0; height:260px; background:var(--card); border-radius:0; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--sand-dim); font-size:.9rem;
}

/* utility */
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ===========================================================
   Mobile-perfection pass
   =========================================================== */
@media (max-width:1080px){
  .split{gap:46px;}
}

@media (max-width:760px){
  section{padding:54px 0;}
  .section-head{margin-bottom:30px;}
  .hero{padding:42px 0 36px;}
  .hero-actions{width:100%;}
  .hero-actions .btn{flex:1 1 auto; justify-content:center;}
  .page-hero{padding:50px 0 30px;}
  .cta-band{padding:34px 24px; flex-direction:column; align-items:flex-start; text-align:left; clip-path:none;}
  .cta-band .actions{width:100%;}
  .cta-band .actions .btn{flex:1 1 auto; justify-content:center;}
  .mv-card{padding:30px 24px;}
  .event-card{padding:20px 4px; gap:14px;}
  .foot-grid{gap:30px 22px;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
  .brand .word{font-size:1.02rem;}
  .strip{font-size:.72rem; padding:8px 14px;}
}

@media (max-width:480px){
  .brand .word span{display:none;}
  .brand .mark{width:34px; height:34px;}
  h1{word-break:break-word;}
  .eyebrow{font-size:.64rem;}
  .hero h1{font-size:2rem;}
  .page-hero h1{font-size:1.8rem;}
  .section-head h2{font-size:1.5rem;}
  .pillar h3{font-size:1.06rem;}
  .btn{padding:11px 18px; font-size:.82rem;}
  .stat .n{font-size:1.5rem;}
  .stat{padding:16px 18px;}
}

/* ensure no horizontal scroll from any wide inline svg/art */
.hero-art, .split-art{max-width:none;}
svg{max-width:100%; height:auto;}
table{max-width:100%;}