/* =========================================================================
   AARUNYA — FLAGSHIP LAYER (v10)
   Sits on top of css/reference-system.css.
   Palette, type scale and motion tokens are INHERITED — not redefined.
   The client approved the colours and fonts; this file only adds the
   structures the content needs: the Guinness World Record flagship hero,
   the community fundraising drive, and one clean section per initiative.
   ========================================================================= */

/* =========================================================================
   SHARED SECTION FURNITURE
   One header pattern, reused — so every section is recognisably the same
   family, and no section has to invent its own type treatment.
   ========================================================================= */
.ref .sec-head{max-width:66ch;}
.ref .sec-head .h-xl{font-size:clamp(32px,4.4vw,62px);line-height:1.04;}
.ref .split-text .h-xl{font-size:clamp(30px,3.8vw,54px);line-height:1.05;}
.ref .sec-head.is-centered{margin-left:auto;margin-right:auto;text-align:center;}
.ref .sec-head.is-centered .kicker{justify-content:center;}
.ref .sec-head .h-xl,
.ref .sec-head .h-lg{margin-top:18px;}
.ref .sec-head .lede{margin-top:20px;}
.ref .sec-head.is-centered .lede{margin-left:auto;margin-right:auto;}

/* Tone variants applied to <section> so backgrounds alternate down the page */
.ref .tone-cream{background:var(--s-cream);}
.ref .tone-paper{background:var(--s-paper);}
.ref .tone-blush{background:var(--s-blush-soft);}
.ref .tone-ink{background:var(--s-ink);}
.ref .tone-ink .h-hero,
.ref .tone-ink .h-xl,
.ref .tone-ink .h-lg,
.ref .tone-ink .h-md{color:#fffaf2;}
.ref .tone-ink p,
.ref .tone-ink .lede{color:rgba(253,246,238,.76);}
.ref .tone-ink .kicker{color:var(--s-saffron);}
.ref .tone-ink .kicker::before{background:var(--s-saffron);}
.ref .tone-ink .num{color:var(--s-saffron);}

/* A hairline rule that separates stacked sections without adding weight */
.ref .rule{height:1px;background:var(--s-line);border:0;margin:0;}

/* =========================================================================
   01 — FLAGSHIP HERO
   Karaoke Marathon Bharat / Guinness World Records attempt.
   This is the first thing on the page and it asks for support.
   ========================================================================= */
.flag-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fffaf2;
  background:#2b1a0c; /* warm base, never black, in case media is slow */
  padding:0;
}
.ref section.flag-hero{padding:0;}

/* ---- Media stack -------------------------------------------------------
   A poster image sits permanently underneath TWO video layers. The layers
   crossfade into each other so the loop never exposes a blank/black frame
   at the seam — which is what produced the split-second black flash. */
.flag-hero .hero-media{position:absolute;inset:0;overflow:hidden;}
.flag-hero .hero-media img.hero-still,
.flag-hero .hero-media video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.flag-hero .hero-media img.hero-still{z-index:0;}
.flag-hero .hero-media video{
  z-index:1;
  opacity:0;
  transition:opacity 700ms linear;
}
.flag-hero .hero-media video.is-showing{opacity:1;}

/* Warm sunrise wash + a readability scrim that stops WELL short of black */
/* Readability scrim. The sunrise footage is bright and warm, so white text
   floated on it without a clear edge. Two gradients now do the work: a
   left-anchored panel that darkens the column the text actually occupies, and
   a softer vertical wash. The sunset stays fully visible on the right. */
.flag-hero .hero-tint{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,
      rgba(28,19,12,.86) 0%,
      rgba(28,19,12,.70) 34%,
      rgba(28,19,12,.34) 58%,
      rgba(28,19,12,.10) 78%,
      rgba(28,19,12,0) 100%),
    linear-gradient(180deg,
      rgba(28,19,12,.52) 0%,
      rgba(28,19,12,.22) 30%,
      rgba(28,19,12,.40) 72%,
      rgba(28,19,12,.66) 100%);
}
@media (max-width:900px){
  /* On a phone the text spans the full width, so the side panel becomes a
     straight vertical wash instead. */
  .flag-hero .hero-tint{
    background:linear-gradient(180deg,
      rgba(28,19,12,.72) 0%,
      rgba(28,19,12,.58) 34%,
      rgba(28,19,12,.66) 72%,
      rgba(28,19,12,.80) 100%);
  }
}
.flag-hero .hero-glow{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 110%,rgba(226,136,59,.38) 0%,rgba(226,136,59,0) 62%);
  mix-blend-mode:screen;
}

.flag-hero .hero-inner{
  position:relative;z-index:3;
  width:100%;
  max-width:var(--s-container);
  margin:0 auto;
  padding:clamp(112px,13vh,150px) var(--s-gutter) clamp(44px,6vh,64px);
}

/* ---- Badge: the record claim, stated plainly ---- */
.flag-hero .btn-pill{box-shadow:0 10px 30px -8px rgba(36,26,18,.72),0 0 0 1px rgba(36,26,18,.14);}
.flag-hero .btn-pill:hover{box-shadow:0 16px 38px -10px rgba(36,26,18,.78),0 0 0 1px rgba(36,26,18,.14);}

.record-badge{
  display:inline-flex;align-items:center;gap:12px;
  padding:9px 9px 9px 18px;border-radius:999px;
  background:rgba(253,246,238,.12);
  border:1px solid rgba(253,246,238,.34);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#fffaf2;
}
.record-badge .rb-dot{
  width:8px;height:8px;border-radius:50%;background:var(--s-saffron);
  box-shadow:0 0 0 0 rgba(242,166,90,.7);
  animation:rbPulse 2.4s var(--s-ease) infinite;
  flex-shrink:0;margin-right:-4px;
}
@keyframes rbPulse{
  0%{box-shadow:0 0 0 0 rgba(242,166,90,.65);}
  70%{box-shadow:0 0 0 12px rgba(242,166,90,0);}
  100%{box-shadow:0 0 0 0 rgba(242,166,90,0);}
}
.record-badge .rb-tag{
  background:var(--s-sunrise);color:var(--s-ink);
  border-radius:999px;padding:6px 14px;letter-spacing:.1em;
}

.flag-hero .hero-event{
  font-family:var(--s-display);font-weight:700;
  font-size:clamp(13px,1.5vw,16px);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--s-blush);
  margin:clamp(20px,3vh,30px) 0 12px;
}
.flag-hero .h-hero{
  color:#fffaf2;
  font-size:clamp(40px,6.4vw,96px);
  max-width:16ch;
}
.flag-hero .h-hero .line{display:block;overflow:hidden;}
/* Fail-safe: the headline is visible by default. It is only hidden for the
   entrance animation once JS has confirmed it is running (html.motion-ready),
   so a script error or blocked file can never leave the H1 blank. */
.flag-hero .h-hero .line span{display:inline-block;transition:transform 1s var(--s-ease);}
html.motion-ready .flag-hero:not(.is-ready) .h-hero .line span{transform:translateY(115%);}
.flag-hero .h-hero em{font-style:italic;color:var(--s-saffron);}

.flag-hero .hero-say{
  margin-top:clamp(18px,2.6vh,26px);
  max-width:52ch;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.62;
  color:rgba(253,246,238,.88);
}

/* ---- The ask, sitting inside the hero ---- */
.hero-ask{
  margin-top:clamp(24px,3.4vh,36px);
  display:flex;align-items:center;gap:clamp(16px,3vw,34px);
  flex-wrap:wrap;
}
.hero-ask .ask-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-ask .ask-note{
  font-size:13.5px;color:rgba(253,246,238,.7);
  max-width:30ch;line-height:1.5;
}

/* ---- Record facts strip across the base of the hero ---- */
.hero-facts{
  margin-top:clamp(28px,4.2vh,52px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2.4vw,32px);
  border-top:1px solid rgba(253,246,238,.24);
  padding-top:26px;
}
.hero-facts .fact strong{
  display:block;
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(26px,3.4vw,46px);
  line-height:1;letter-spacing:-.02em;color:#fffaf2;
}
.hero-facts .fact span{
  display:block;margin-top:8px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(253,246,238,.66);
}

@media (max-width:900px){
  .flag-hero .hero-inner{padding:132px var(--s-gutter) 52px;}
  .hero-facts{grid-template-columns:repeat(2,1fr);gap:22px;}
}
@media (max-width:640px){
  .flag-hero{min-height:auto;}
  .flag-hero .hero-inner{padding:120px 20px 44px;}
  .flag-hero .h-hero{font-size:clamp(36px,10vw,54px);}
  .hero-ask{gap:18px;}
  .hero-ask .ask-actions{width:100%;}
  .hero-ask .ask-actions .btn-pill{flex:1 1 auto;justify-content:center;}
}

/* =========================================================================
   02 — THE COMMUNITY DRIVE  (the fundraising block, directly below the hero)
   ========================================================================= */
.drive{position:relative;}

/* ---- Goal + live progress ---- */
.drive-goal{
  background:var(--s-ink);
  border-radius:28px;
  padding:clamp(30px,4.4vw,54px);
  color:#fffaf2;
  position:relative;overflow:hidden;
}
.drive-goal::before{
  content:'';position:absolute;inset:0;
  background:var(--s-sunrise);opacity:.13;pointer-events:none;
}
.drive-goal > *{position:relative;}
.drive-goal-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.drive-goal-top .dg-label{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-saffron);font-weight:700;
}
.drive-goal-top .dg-title{
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(24px,2.6vw,34px);
  color:#fffaf2;margin-top:10px;letter-spacing:-.015em;
}
.drive-goal-top .dg-amount{
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(38px,5.4vw,72px);line-height:.92;
  letter-spacing:-.03em;
  background:var(--s-sunrise);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.drive-track{
  margin-top:30px;height:8px;border-radius:999px;
  background:rgba(253,246,238,.16);overflow:hidden;
}
.drive-track span{
  display:block;height:100%;width:0;border-radius:999px;
  background:var(--s-sunrise);
  transition:width 1.4s var(--s-ease);
}
.drive-track-meta{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:14px;font-size:13.5px;color:rgba(253,246,238,.7);
}
.drive-track-meta b{color:#fffaf2;font-weight:700;}

/* ---- Where the money goes: two named, costed requirements ---- */
/* Three costed requirements: music rights, hospitality, hardware & sound. */
.drive-alloc{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px;}
.alloc-card{
  background:var(--s-paper);
  border:1px solid var(--s-line);
  border-radius:22px;
  padding:clamp(26px,3vw,38px);
  display:flex;flex-direction:column;gap:12px;
  transition:border-color var(--s-fast) var(--s-ease),transform var(--s-fast) var(--s-ease),box-shadow var(--s-fast) var(--s-ease);
}
.alloc-card:hover{border-color:var(--s-gold);transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(36,26,18,.24);}
.alloc-card .ac-icon{
  width:44px;height:44px;border-radius:14px;
  background:var(--s-blush-soft);
  display:flex;align-items:center;justify-content:center;
}
.alloc-card .ac-icon svg{width:21px;height:21px;stroke:var(--s-gold-deep);fill:none;stroke-width:1.7;}
.alloc-card .ac-amount{
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(26px,2.8vw,36px);letter-spacing:-.02em;color:var(--s-ink);
}
.alloc-card h3{
  font-family:var(--s-display);font-weight:700;font-size:19px;
  color:var(--s-ink);margin:0;
}
.alloc-card p{font-size:14.5px;margin:0;}

/* ---- Contribution tiers ---- */
.tier-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;
}
.tier{
  position:relative;text-align:left;
  background:var(--s-paper);
  border:1px solid var(--s-line);
  border-radius:20px;
  padding:26px 24px;
  cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color var(--s-fast) var(--s-ease),
             transform var(--s-fast) var(--s-ease),
             box-shadow var(--s-fast) var(--s-ease),
             background var(--s-fast) var(--s-ease);
}
.tier:hover{transform:translateY(-4px);border-color:var(--s-gold);box-shadow:0 20px 40px -20px rgba(36,26,18,.22);}
.tier .t-amount{
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;color:var(--s-ink);
}
.tier .t-name{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--s-gold-deep);
}
.tier .t-desc{font-size:14px;line-height:1.55;color:var(--s-ink-soft);margin:0;}
.tier[aria-pressed="true"]{
  background:var(--s-ink);border-color:var(--s-ink);
}
.tier[aria-pressed="true"] .t-amount{color:#fffaf2;}
.tier[aria-pressed="true"] .t-name{color:var(--s-saffron);}
.tier[aria-pressed="true"] .t-desc{color:rgba(253,246,238,.75);}
.tier[aria-pressed="true"]::after{
  content:'✓';position:absolute;top:18px;right:18px;
  width:24px;height:24px;border-radius:50%;
  background:var(--s-sunrise);color:var(--s-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
}

/* ---- Selected-amount summary bar ---- */
.tier-summary{
  margin-top:26px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  background:var(--s-blush-soft);
  border:1px solid var(--s-blush);
  border-radius:20px;
  padding:22px clamp(20px,3vw,32px);
}
.tier-summary .ts-label{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--s-gold-deep);font-weight:700;
}
.tier-summary .ts-value{
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(22px,2.4vw,30px);color:var(--s-ink);margin-top:6px;
  letter-spacing:-.02em;
}
.tier-summary .ts-hint{font-size:13.5px;color:var(--s-ink-soft);margin-top:4px;}

@media (max-width:1050px){
  .drive-alloc{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .drive-alloc{grid-template-columns:1fr;}
  .tier-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .tier-grid{grid-template-columns:1fr;}
}

/* =========================================================================
   PATHWAYS — the four things Aarunya actually does
   ========================================================================= */
.path-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--s-line);
  border:1px solid var(--s-line);border-radius:24px;overflow:hidden;}
.path-item{
  background:var(--s-paper);
  padding:clamp(28px,3.2vw,40px);
  display:flex;flex-direction:column;gap:12px;
  min-height:100%;
  transition:background var(--s-fast) var(--s-ease);
}
.path-item:hover{background:var(--s-blush-soft);}
.path-item .p-num{
  font-family:var(--s-display);font-weight:800;font-size:13px;
  color:var(--s-gold);letter-spacing:.08em;
}
.path-item h3{
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(19px,1.8vw,23px);letter-spacing:-.01em;
  color:var(--s-ink);margin:4px 0 0;
}
.path-item p{font-size:14.5px;margin:0;flex:1;}
.path-item .p-more{
  font-size:13px;font-weight:700;color:var(--s-gold-deep);
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;
}
.path-item:hover .p-more{gap:11px;}
.path-item .p-more{transition:gap var(--s-fast) var(--s-ease);}

@media (max-width:1024px){.path-row{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.path-row{grid-template-columns:1fr;}}

/* =========================================================================
   AARUNYA FRIENDS — the campaign posters, each shown exactly once
   ========================================================================= */
.poster-rail{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px);
}
@media (max-width:900px){.poster-rail{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.poster-rail{grid-template-columns:repeat(2,1fr);}}
.poster{
  position:relative;
  border-radius:16px;overflow:hidden;
  border:1px solid var(--s-line);
  background:var(--s-paper);
  aspect-ratio:1/1.14;
  transition:transform var(--s-fast) var(--s-ease),box-shadow var(--s-fast) var(--s-ease);
}
.poster:hover{transform:translateY(-5px);box-shadow:0 22px 44px -20px rgba(36,26,18,.28);}
/* These are finished poster artworks with their own layout and logo, so they
   are fitted whole rather than cropped — the source set varies from 1:0.98 to
   1:1.18 and `cover` was slicing the branded footer off the taller ones. */
.poster img{width:100%;height:100%;object-fit:contain;padding:6px;background:var(--s-paper);}
.poster img{transition:transform var(--s-med) var(--s-ease);}
.poster:hover img{transform:scale(1.04);}

/* The "what a friend does" list — plain, scannable, no card chrome */
.friend-acts{
  margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--s-line);
  border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line);
}
.friend-acts li{
  list-style:none;background:var(--s-cream);
  padding:22px 20px;
  font-family:var(--s-display);font-weight:700;font-size:15.5px;
  color:var(--s-ink);line-height:1.35;
  display:flex;align-items:flex-start;gap:10px;
  transition:background var(--s-fast) var(--s-ease);
}
.friend-acts li:hover{background:var(--s-blush-soft);}
.friend-acts li::before{
  content:'';flex-shrink:0;margin-top:7px;
  width:7px;height:7px;border-radius:50%;background:var(--s-saffron);
}
@media (max-width:900px){.friend-acts{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.friend-acts{grid-template-columns:1fr;}}

/* A pledge, set as a quiet quotation rather than another card */
.pledge{
  border-left:3px solid var(--s-gold);
  padding:6px 0 6px 26px;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.7;font-style:italic;
  color:var(--s-ink-soft);
  max-width:60ch;
}
.pledge cite{
  display:block;margin-top:16px;font-style:normal;
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--s-gold-deep);font-weight:700;
}

/* =========================================================================
   AARUNYA LIVING — given the space the client says it deserves
   ========================================================================= */
.living-plan{
  position:relative;border-radius:24px;overflow:hidden;
  border:1px solid var(--s-line);background:var(--s-paper);
}
.living-plan img{width:100%;height:auto;display:block;}
.living-plan figcaption{
  padding:16px 22px;font-size:13px;color:var(--s-muted);
  border-top:1px solid var(--s-line);background:var(--s-paper);
}

.spec-band{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,40px);
}
.spec strong{
  display:block;font-family:var(--s-display);font-weight:800;
  font-size:clamp(30px,3.8vw,52px);line-height:1;letter-spacing:-.025em;
  background:var(--s-sunrise-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.spec span{
  display:block;margin-top:10px;font-size:13.5px;line-height:1.5;
  color:var(--s-ink-soft);
}
.tone-ink .spec strong{
  background:linear-gradient(100deg,#f6ddc9 0%,#f2a65a 55%,#e2883b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tone-ink .spec span{color:rgba(253,246,238,.7);}
.tone-ink .grad-text{
  background:linear-gradient(100deg,#f6ddc9 0%,#f2a65a 55%,#e2883b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (max-width:820px){.spec-band{grid-template-columns:1fr 1fr;}}

.feature-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.feature{border-top:1px solid var(--s-line);padding-top:18px;}
.tone-ink .feature{border-top-color:rgba(253,246,238,.2);}
.feature h4{
  font-family:var(--s-display);font-weight:700;font-size:16px;
  letter-spacing:.02em;margin:0 0 8px;color:var(--s-ink);
}
.tone-ink .feature h4{color:#fffaf2;}
.feature p{font-size:14px;margin:0;}
@media (max-width:900px){.feature-list{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.feature-list{grid-template-columns:1fr;}}

/* Home types — a simple numbered ledger, not another card grid */
.ledger{border-top:1px solid var(--s-line);}
.ledger-row{
  display:grid;grid-template-columns:64px 1.1fr 2fr;
  gap:clamp(16px,3vw,40px);align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--s-line);
  transition:padding-left var(--s-fast) var(--s-ease);
}
.ledger-row:hover{padding-left:10px;}
.ledger-row .l-num{
  font-family:var(--s-display);font-weight:800;font-size:14px;color:var(--s-gold);
}
.ledger-row h4{
  font-family:var(--s-display);font-weight:800;
  font-size:clamp(18px,1.9vw,24px);letter-spacing:-.01em;
  color:var(--s-ink);margin:0;
}
.ledger-row p{margin:0;font-size:15px;}
@media (max-width:700px){
  .ledger-row{grid-template-columns:1fr;gap:8px;padding:22px 0;}
}
/* Inside a narrow split column the three-track ledger has no room, so the
   description drops beneath the title instead of being squeezed beside it. */
.split-text .ledger-row{grid-template-columns:40px 1fr;gap:6px 16px;padding:20px 0;}
.split-text .ledger-row p{grid-column:2;}

/* =========================================================================
   IMPACT — the closing numbers. Placed last, as asked.
   ========================================================================= */
.impact-band{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgba(253,246,238,.18);
  border:1px solid rgba(253,246,238,.18);
  border-radius:24px;overflow:hidden;
}
.impact-cell{
  background:var(--s-ink);
  padding:clamp(28px,3.4vw,42px);
}
.impact-cell strong{
  display:block;font-family:var(--s-display);font-weight:800;
  font-size:clamp(34px,4.6vw,64px);line-height:.95;letter-spacing:-.03em;
  color:#fffaf2;
}
.impact-cell span{
  display:block;margin-top:12px;font-size:13.5px;line-height:1.5;
  color:rgba(253,246,238,.68);
}
.impact-cell em{
  display:block;font-style:normal;margin-top:6px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--s-saffron);font-weight:700;
}
@media (max-width:900px){.impact-band{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.impact-band{grid-template-columns:1fr;}}

/* =========================================================================
   WAYS IN — the four doors into the NGO
   ========================================================================= */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.door{
  background:var(--s-paper);border:1px solid var(--s-line);
  border-radius:20px;padding:30px 26px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform var(--s-fast) var(--s-ease),border-color var(--s-fast) var(--s-ease),box-shadow var(--s-fast) var(--s-ease);
}
.door:hover{transform:translateY(-6px);border-color:var(--s-gold);box-shadow:0 24px 46px -22px rgba(36,26,18,.24);}
.door .d-icon{
  width:40px;height:40px;border-radius:12px;background:var(--s-blush-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
.door .d-icon svg{width:19px;height:19px;stroke:var(--s-gold-deep);fill:none;stroke-width:1.7;}
.door h3{font-family:var(--s-display);font-weight:800;font-size:18px;color:var(--s-ink);margin:0;letter-spacing:-.01em;}
.door p{font-size:14.5px;margin:0;flex:1;}
.door .d-go{font-size:13px;font-weight:700;color:var(--s-gold-deep);display:inline-flex;gap:7px;align-items:center;transition:gap var(--s-fast) var(--s-ease);}
.door:hover .d-go{gap:11px;}
@media (max-width:1024px){.doors{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.doors{grid-template-columns:1fr;}}

/* =========================================================================
   PARTNER LOGOS / AUDIENCE STRIP — plain text row, deliberately light
   ========================================================================= */
.audience{
  display:flex;flex-wrap:wrap;gap:12px;
}
.audience span{
  border:1px solid var(--s-line);border-radius:999px;
  padding:10px 20px;font-size:13.5px;font-weight:600;color:var(--s-ink-soft);
  background:var(--s-paper);
}
.tone-ink .audience span{border-color:rgba(253,246,238,.24);background:transparent;color:rgba(253,246,238,.8);}

/* =========================================================================
   FOUNDER NOTE
   ========================================================================= */
.founder{
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);align-items:center;
}
.founder-photo{border-radius:24px;overflow:hidden;aspect-ratio:3/4;}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:top;}
@media (max-width:820px){.founder{grid-template-columns:1fr;}
  .founder-photo{max-width:320px;}}

/* =========================================================================
   STICKY SUPPORT BAR — keeps the flagship ask reachable down the page
   ========================================================================= */
.support-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:nowrap;
  padding:12px clamp(16px,4vw,40px);
  background:rgba(36,26,18,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(253,246,238,.16);
  transform:translateY(110%);
  transition:transform var(--s-med) var(--s-ease);
}
.support-bar.is-up{transform:translateY(0);}
.support-bar .sb-copy{min-width:0;}
.support-bar .sb-label{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-saffron);font-weight:700;
}
.support-bar .sb-title{
  font-family:var(--s-display);font-weight:700;font-size:14.5px;
  color:#fffaf2;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.support-bar .btn-pill{flex-shrink:0;padding:11px 20px;font-size:13px;}
@media (max-width:640px){
  .support-bar{padding:10px 14px;}
  .support-bar .sb-title{font-size:13px;}
  .support-bar .btn-pill{padding:10px 16px;font-size:12px;}
  .support-bar .btn-pill .arrow-dot{width:20px;height:20px;font-size:11px;}
}
@media (prefers-reduced-motion:reduce){
  .support-bar{transition:none;}
}

/* =========================================================================
   REDUCED MOTION — honour the user's system preference throughout
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .ref *,.ref *::before,.ref *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .flag-hero .h-hero .line span{transform:none;}
  .flag-hero .hero-media video{opacity:1;}
}

/* ---- Custom amount field inside the contribution summary ---- */
.tier-summary .ts-custom{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tier-summary .ts-custom label{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--s-gold-deep);font-weight:700;
}
.tier-summary .ts-custom input{
  font-family:var(--s-display);font-weight:700;font-size:17px;color:var(--s-ink);
  border:1px solid var(--s-gold);border-radius:12px;
  padding:11px 15px;width:180px;max-width:100%;
  background:var(--s-paper);
}
.tier-summary .ts-custom input:focus{outline:2px solid var(--s-gold);outline-offset:1px;}


/* =========================================================================
   HEADER FIT — the nav and the action cluster were colliding just under
   1440px, which pushed "Impact" behind the Get Involved button.
   ========================================================================= */
.ref-header .ref-nav{gap:clamp(18px,2.2vw,34px);}
@media (max-width:1360px){
  .ref-header-actions .btn-ghost{display:none;}
}

/* The QR placeholder does not need to be the tallest thing on the screen
   while it is still a placeholder. */
.ref #give .qr-box{min-height:230px;max-height:340px;}

/* =========================================================================
   MOBILE CORRECTIONS
   ========================================================================= */

/* <figure> carries a default `margin: 1em 40px`. That 80px of horizontal
   margin was shrinking the master plan and the campaign posters on phones. */
.ref .poster,
.ref .living-plan{margin:0;}

/* reference-system.css hides every .btn-ghost below 640px. That was meant for
   the header only — it was also removing the secondary call to action from
   the hero and from three content sections on mobile. */
@media (max-width:640px){
  .ref main .btn-ghost,
  .ref section .btn-ghost,
  .ref .hero-ask .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;
  }
  .ref-header-actions .btn-ghost{display:none!important;}
}

/* The hero facts need to hold four values in a 390px column without the
   longest word colliding with its neighbour. */
@media (max-width:640px){
  .hero-facts{gap:18px 16px;padding-top:20px;}
  .hero-facts .fact strong{font-size:clamp(21px,6.4vw,28px);}
  .hero-facts .fact span{font-size:10.5px;letter-spacing:.1em;}
  .record-badge{
    padding:8px 8px 8px 14px;gap:9px;font-size:11px;letter-spacing:.09em;
  }
  .record-badge .rb-tag{padding:5px 11px;}
}

/* The conceptual plan is a detailed drawing; on a phone it is a thumbnail,
   so make it openable at full size. */
.living-plan a{display:block;}
.living-plan .plan-open{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--s-gold-deep);
  margin-top:8px;
}

/* =========================================================================
   TYPOGRAPHIC HERO / CTA
   Several inner pages used the Aarunya Friends campaign contact-sheets — a
   grid of ten or twelve small posters — stretched full-bleed behind a
   headline. At that scale the posters are unreadable and the headline sits
   on top of competing text, which is what made those pages look unfinished.
   Those sections now use the brand's own sunrise palette instead, and the
   campaign posters are shown once, at a legible size, on the homepage.
   ========================================================================= */
.ref-hero.is-plain,
.cta-final.is-plain{background:var(--s-ink);}
.ref-hero.is-plain::before,
.cta-final.is-plain::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(100% 86% at 8% 4%,rgba(242,166,90,.62) 0%,rgba(242,166,90,0) 62%),
    radial-gradient(92% 92% at 96% 100%,rgba(226,136,59,.58) 0%,rgba(226,136,59,0) 66%),
    linear-gradient(158deg,#5c3a1c 0%,#432a15 46%,#33200f 100%);
}
.ref-hero.is-plain .hero-overlay,
.cta-final.is-plain .cta-overlay{
  background:linear-gradient(180deg,rgba(22,15,8,.06),rgba(22,15,8,.30));
}
/* Without a photograph these panels do not need a full viewport of height. */
.ref-hero.is-plain{min-height:min(64svh,560px);}
/* A soft ruled texture keeps the panel from reading as a flat colour block. */
.ref-hero.is-plain::after,
.cta-final.is-plain::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,rgba(253,246,238,.05) 0 1px,transparent 1px 78px);
}
.ref-hero.is-plain .hero-content,
.cta-final.is-plain .cta-content{position:relative;z-index:2;}


/* =========================================================================
   HEADER LEGIBILITY OVER DARK HEROES
   The nav is ink-coloured for the cream pages, which left it almost invisible
   while the header floats over a dark hero. Pages that open with a hero carry
   `on-dark-hero`, and the nav flips back to ink as soon as the header docks.
   ========================================================================= */
body.on-dark-hero .ref-header:not(.is-scrolled) .brand-word,
body.on-dark-hero .ref-header:not(.is-scrolled) .ref-nav a{color:#fdf6ee;}
body.on-dark-hero .ref-header:not(.is-scrolled) .ref-nav a:hover{color:#fff;}
body.on-dark-hero .ref-header:not(.is-scrolled) .ref-nav a::after{background:var(--s-blush);}
body.on-dark-hero .ref-header:not(.is-scrolled) .admin-btn{
  color:rgba(253,246,238,.8);border-color:rgba(253,246,238,.34);
}
body.on-dark-hero .ref-header:not(.is-scrolled) .admin-btn:hover{
  color:#fff;border-color:rgba(253,246,238,.7);
}
body.on-dark-hero .ref-header:not(.is-scrolled) .btn-ghost{
  color:#fffaf2;border-color:rgba(253,246,238,.5);
  background:rgba(253,246,238,.1);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
body.on-dark-hero .ref-header:not(.is-scrolled) .btn-ghost:hover{
  background:rgba(253,246,238,.22);border-color:#fffaf2;color:#fffaf2;
}

/* On a laptop-height viewport the headline pushed the record facts below the
   fold; the whole ask should be visible without scrolling. */
@media (min-width:641px) and (max-height:940px){
  .flag-hero .h-hero{font-size:clamp(38px,4.9vw,68px);}
  .flag-hero .hero-say{font-size:16px;margin-top:16px;max-width:60ch;}
  .flag-hero .hero-inner{padding-top:clamp(100px,11vh,124px);padding-bottom:36px;}
  .flag-hero .hero-event{margin:16px 0 10px;}
  .hero-ask{margin-top:22px;}
  .hero-facts{margin-top:24px;padding-top:18px;}
  .hero-facts .fact strong{font-size:clamp(22px,2.4vw,32px);}
}

/* The centred scroll cue overlapped the record-facts row. The facts and the
   two calls to action already carry the hero, so the cue is dropped. */
.flag-hero .scroll-cue{display:none;}

/* =========================================================================
   LOGO ASPECT RATIO — safety net
   The brand mark is sized by a single axis in several stylesheets. If an
   intrinsic width/height attribute is ever added to the <img>, the unset axis
   would come from the attribute and stretch the logo. Pinning the free axis
   to `auto` keeps the mark in proportion wherever it appears.
   ========================================================================= */
.ref-header .brand img,
.ref-footer .foot-brand img{width:auto;}
.inner-logo,
.footer-logo,
.stories-header .logo-wrap img{height:auto;}

/* The footer sits on near-black ink, where the logo's dark-green wordmark
   disappears. Rendered as a light mark it stays readable — the same treatment
   the record-drive footer already uses, so both footers now agree. */
.ref-footer .foot-brand img{
  height:52px;width:auto;
  filter:brightness(0) invert(1);
  opacity:.92;
}

/* ---- Founder identity block ---- */
.founder-role{
  margin-top:16px;font-family:var(--s-display);font-weight:700;
  font-size:16px;color:var(--s-ink);line-height:1.5;
}
.founder-role span{
  display:block;font-family:var(--s-body);font-weight:500;
  font-size:13.5px;letter-spacing:.04em;color:var(--s-gold-deep);margin-top:3px;
}
.founder-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:28px;padding-top:22px;border-top:1px solid var(--s-line);
}
.founder-facts strong{
  display:block;font-family:var(--s-display);font-weight:800;
  font-size:clamp(24px,2.6vw,34px);line-height:1;letter-spacing:-.02em;
  background:var(--s-sunrise-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.founder-facts span{
  display:block;margin-top:7px;font-size:12.5px;line-height:1.4;color:var(--s-ink-soft);
}
@media (max-width:520px){
  .founder-facts{grid-template-columns:1fr 1fr;gap:16px;}
}


/* =========================================================================
   HERO BILLING — the flagship line, the record claim and the event name are
   the headline now, at display size and at full contrast against the sunrise.
   ========================================================================= */
.flag-hero .hero-flagship{
  display:block;
  font-family:var(--s-body);
  font-weight:700;
  font-size:clamp(12px,1.45vw,16px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#ffe9cf;
  margin:0 0 clamp(14px,2.2vh,22px);
  text-shadow:0 2px 14px rgba(28,19,12,.85);
}
.flag-hero .hero-flagship strong{color:#fff;font-weight:800;}
.flag-hero .hero-flagship::before{
  content:'';display:inline-block;vertical-align:middle;
  width:34px;height:2px;background:var(--s-saffron);
  margin-right:14px;margin-bottom:3px;
}

.flag-hero .hero-title{
  margin:0;
  font-family:var(--s-display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.97;
}
.flag-hero .hero-title .line{display:block;overflow:hidden;}
.flag-hero .hero-title .line > span{display:inline-block;transition:transform 1s var(--s-ease);}
html.motion-ready .flag-hero:not(.is-ready) .hero-title .line > span{transform:translateY(115%);}

/* Both title lines share one saffron so the billing reads as a single block.
   It is a light tint rather than the mid gold, which sank into the sunset's
   own orange — this keeps the lines well clear of the background. */
.flag-hero .hero-record-line{
  color:#ffc46b;
  font-size:clamp(28px,4.4vw,64px);
  text-shadow:0 3px 26px rgba(28,19,12,.9),0 1px 3px rgba(28,19,12,.7);
}
/* The event name — a light saffron that stays distinct from the background's
   own orange, rather than the mid gold which sank into it. */
.flag-hero .hero-event-line{
  color:#ffc46b;
  font-size:clamp(32px,5.6vw,84px);
  text-shadow:0 3px 26px rgba(28,19,12,.92),0 1px 3px rgba(28,19,12,.75);
}

.flag-hero .hero-scale{
  margin:clamp(16px,2.4vh,24px) 0 0;
  font-family:var(--s-display);
  font-weight:700;
  font-size:clamp(15px,1.9vw,24px);
  letter-spacing:.01em;
  color:#fff;
  text-shadow:0 2px 16px rgba(28,19,12,.85);
}
.flag-hero .hero-scale span{color:#ffc46b;padding:0 8px;}

/* Supporting copy and the facts row lift with the same shadow so the whole
   block reads as one panel rather than text scattered over a photo. */
.flag-hero .hero-say{color:#fff;text-shadow:0 2px 16px rgba(28,19,12,.8);}
.flag-hero .ask-note{color:#ffeeda;text-shadow:0 2px 14px rgba(28,19,12,.8);}
.flag-hero .ask-note strong{color:#fff;}
.hero-facts .fact strong{text-shadow:0 2px 18px rgba(28,19,12,.85);}
.hero-facts .fact span{color:rgba(255,255,255,.82);text-shadow:0 1px 10px rgba(28,19,12,.8);}
.hero-facts{border-top-color:rgba(255,255,255,.34);}

@media (max-width:640px){
  .flag-hero .hero-flagship{
    font-size:11px;letter-spacing:.16em;line-height:1.5;
  }
  .flag-hero .hero-flagship::before{width:22px;margin-right:10px;}
  .flag-hero .hero-record-line{font-size:clamp(22px,6.6vw,30px);}
  .flag-hero .hero-event-line{font-size:clamp(26px,8.4vw,38px);}
  .flag-hero .hero-scale{font-size:14.5px;}
  .flag-hero .hero-scale span{padding:0 5px;}
}

/* =========================================================================
   FESTIVAL SECTION — the event explainer the hero's second button opens
   ========================================================================= */
.ref .festival-line{
  margin:14px 0 0;
  font-family:var(--s-display);
  font-weight:800;
  font-size:clamp(20px,2.8vw,38px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:#ffc46b;
}

.event-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.event-fact{
  display:flex;align-items:flex-start;gap:14px;
  padding-top:20px;
  border-top:1px solid rgba(253,246,238,.22);
}
.event-fact .ef-icon{
  flex:0 0 40px;width:40px;height:40px;border-radius:12px;
  background:rgba(242,166,90,.16);
  border:1px solid rgba(242,166,90,.34);
  display:flex;align-items:center;justify-content:center;
}
.event-fact .ef-icon svg{width:19px;height:19px;stroke:#f2a65a;fill:none;stroke-width:1.7;}
.event-fact strong{
  display:block;font-family:var(--s-display);font-weight:700;
  font-size:16.5px;line-height:1.25;color:#fffaf2;
}
.event-fact span{
  display:block;margin-top:5px;font-size:13.5px;line-height:1.5;
  color:rgba(253,246,238,.68);
}
@media (max-width:860px){.event-facts{grid-template-columns:1fr;gap:16px;}}

/* The Tricity counter reuses the drive panel, but its figure is a count of
   people rather than a rupee total, so it needs a slightly smaller setting. */
#festival .dg-amount{font-size:clamp(26px,3.6vw,46px);white-space:nowrap;}
@media (max-width:640px){
  #festival .drive-goal-top{flex-direction:column;align-items:flex-start;gap:14px;}
  #festival .dg-amount{font-size:clamp(24px,7.6vw,34px);}
}

/* =========================================================================
   BUTTON TEXT COLOUR — specificity fix
   reference-system.css declares `.ref a{color:inherit}` (0,1,1), which
   outranks `.btn-pill{color:var(--s-ink)}` (0,1,0). On cream sections the
   inherited colour happens to be ink, so the bug stayed hidden. Inside any
   section that sets light text — the hero, the closing CTA — the pill
   inherited cream onto its pale gradient and fell to 1.97:1 contrast.
   Naming the element lifts specificity above the inherit rule.
   ========================================================================= */
.ref a.btn-pill,
.ref a.btn-pill:hover,
.ref a.btn-pill:visited{color:var(--s-ink);}
.ref a.btn-pill .arrow-dot{color:var(--s-cream);}

/* Supporting hero text, lifted for maximum legibility over the sunrise. */
.flag-hero .hero-say{color:#fff;}
.flag-hero .ask-note{color:#fff5e8;}
.hero-facts .fact span{color:rgba(255,255,255,.92);}