/* ==========================================================================
   FFID-Chetna — Design System
   Palette drawn from turmeric, indigo dye, terracotta clay & banyan leaf —
   the working colours of the communities the org serves.
   ========================================================================== */

/* Fonts are now loaded via <link rel="preconnect"> + <link rel="stylesheet">
   in the <head> of every page (see shared2.py / FONT_LINKS) instead of an
   @import here — @import adds an extra blocking round-trip before the
   browser even discovers the font stylesheet, which hurts LCP/CWV. */

:root{
  --paper:      #F5EFE0;
  --paper-dim:  #EDE4CE;
  --ink:        #2A2018;
  --ink-soft:   #5C5041;
  --ochre:      #C6871E;
  --ochre-dark: #9C6614;
  --clay:       #8A3F2B;
  --indigo:     #223A5E;
  --leaf:       #3C5940;
  --line:       #D8CBA9;
  --white:      #FFFCF4;

  --display: 'Newsreader', Georgia, serif;
  --body: 'Karla', -apple-system, Helvetica, Arial, sans-serif;

  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(2.4rem,5vw,4rem); font-weight:400;}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);}
h3{font-size:1.35rem;}
p{margin:0 0 1em; max-width:64ch;}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}
.section{padding:88px 0;}
.section--tight{padding:56px 0;}
.section--dim{background:var(--paper-dim);}
.section--ink{background:var(--ink); color:var(--paper);}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--paper);}
.eyebrow{ /* used sparingly, not as generic chrome — only for real category labels */
  display:inline-block; font-family:var(--body); font-weight:600; font-size:.8rem;
  color:var(--clay); letter-spacing:.02em; margin-bottom:.6em;
}
.lede{font-size:1.15rem; color:var(--ink-soft); max-width:56ch;}
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--body); font-weight:600; font-size:.95rem;
  padding:.85em 1.6em; border-radius:2px; border:1.5px solid var(--ink);
  background:var(--ink); color:var(--paper); text-decoration:none;
  cursor:pointer; transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{background:var(--ochre-dark); border-color:var(--ochre-dark); transform:translateY(-2px);}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn--ghost:hover{background:var(--ink); color:var(--paper);}
.btn--ochre{background:var(--ochre); border-color:var(--ochre); color:var(--ink);}
.btn--ochre:hover{background:var(--ochre-dark); border-color:var(--ochre-dark); color:var(--white);}

/* ---- Block-print motif — the one signature flourish, used only at section
       seams, never as generic decoration on every card. ---- */
.motif{
  height:14px; width:100%; background-repeat:repeat-x; background-size:28px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M14 1 L23 7 L14 13 L5 7 Z' fill='none' stroke='%238A3F2B' stroke-width='1.4'/%3E%3C/svg%3E");
  opacity:.85;
}

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(245,239,224,.92);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad); max-width:var(--max); margin:0 auto; gap:24px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);}
.brand__mark{
  width:42px; height:42px; border-radius:50%; background:var(--ochre);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1.15rem; color:var(--ink); flex:none;
  border:2px solid var(--ink);
}
.brand__text{line-height:1.2;}
.brand__text strong{display:block; font-family:var(--display); font-size:1.05rem;}
.brand__text span{display:block; font-size:.72rem; color:var(--ink-soft); font-weight:600;}

nav.mainnav{display:flex; gap:2px;}
nav.mainnav > .nav-item{position:relative;}
nav.mainnav > .nav-item > a{
  display:block; padding:10px 14px; text-decoration:none; font-weight:600;
  font-size:.92rem; color:var(--ink); border-radius:2px;
}
nav.mainnav > .nav-item > a:hover, nav.mainnav > .nav-item.active > a{color:var(--clay);}
.submenu{
  position:absolute; top:100%; left:0; min-width:220px; background:var(--white);
  border:1px solid var(--line); box-shadow:0 12px 24px rgba(42,32,24,.12);
  padding:8px 0; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease; z-index:10;
}
.nav-item:hover .submenu, .nav-item:focus-within .submenu{opacity:1; visibility:visible; transform:translateY(0);}
.submenu a{display:block; padding:9px 18px; text-decoration:none; font-size:.9rem; color:var(--ink-soft);}
.submenu a:hover{color:var(--clay); background:var(--paper-dim);}
.nav-toggle{display:none; background:none; border:1px solid var(--ink); border-radius:2px; padding:8px 10px; cursor:pointer;}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.2s;
}
.nav-toggle span::before{position:absolute; top:-6px;}
.nav-toggle span::after{position:absolute; top:6px;}

@media (max-width:960px){
  nav.mainnav{
    position:fixed; inset:64px 0 0 0; background:var(--paper); flex-direction:column;
    padding:12px var(--pad) 40px; overflow-y:auto; transform:translateX(100%);
    transition:transform .25s ease; gap:0;
  }
  nav.mainnav.open{transform:translateX(0);}
  nav.mainnav > .nav-item > a{padding:14px 4px; border-bottom:1px solid var(--line); font-size:1.05rem;}
  .submenu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; border-left:2px solid var(--ochre); display:none; margin-left:8px;}
  .nav-item.open .submenu{display:block;}
  .nav-toggle{display:block;}
}

/* ---- Hero ---- */
.hero{position:relative; overflow:hidden; background:var(--ink); color:var(--paper);}
.hero__frame{position:relative; min-height:78vh; display:flex; align-items:flex-end;}
.hero__slides{position:absolute; inset:0;}
.hero__slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08); transition:opacity 1.6s ease, transform 8s ease;
}
.hero__slide.active{opacity:1; transform:scale(1);}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,15,10,.86) 0%, rgba(20,15,10,.32) 55%, rgba(20,15,10,.55) 100%);}
.hero__content{position:relative; z-index:2; padding:64px var(--pad) 56px; max-width:var(--max); margin:0 auto; width:100%;}
.hero__content .eyebrow{color:var(--ochre);}
.hero__content h1{color:var(--white); max-width:14ch;}
.hero__content p{color:#EDE4CE; font-size:1.1rem;}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.4em;}
.hero__dots{position:absolute; bottom:24px; right:var(--pad); z-index:3; display:flex; gap:8px;}
.hero__dots button{width:8px; height:8px; border-radius:50%; border:1px solid var(--paper); background:transparent; cursor:pointer; padding:0;}
.hero__dots button.active{background:var(--ochre); border-color:var(--ochre);}

/* ---- Reveal-on-scroll: one orchestrated moment, not scattered per-card ---- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .hero__slide{transition:opacity .3s ease;}
}

/* ---- Stat strip ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.stats__item{background:var(--paper); padding:32px 24px; text-align:left;}
.stats__num{font-family:var(--display); font-size:2.4rem; color:var(--clay); display:block;}
.stats__label{font-size:.85rem; color:var(--ink-soft); font-weight:600;}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;}}

/* ---- Pillars / link-cards (not rounded SaaS cards — bordered panels, no shadow) ---- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.pillar{background:var(--white); padding:36px 30px; text-decoration:none; color:var(--ink); position:relative; transition:background .18s ease;}
.pillar:hover{background:var(--paper-dim);}
.pillar__num{font-family:var(--display); font-size:.95rem; color:var(--ink-soft);}
.pillar h3{margin-top:.5em;}
.pillar p{color:var(--ink-soft); font-size:.95rem;}
@media (max-width:860px){.pillars{grid-template-columns:1fr;}}

/* ---- Photo block (placeholder-aware) ---- */
.photo{
  aspect-ratio:4/3; background:linear-gradient(135deg,var(--ochre) 0%, var(--clay) 100%);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
.photo--wide{aspect-ratio:16/9;}
.photo--tall{aspect-ratio:3/4;}
.photo__label{
  color:rgba(255,252,244,.85); font-size:.78rem; font-weight:600; text-align:center; padding:0 20%;
  border:1px dashed rgba(255,252,244,.6); padding:10px 16px; font-family:var(--body);
}

/* ---- Two column layout ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.split--rev .split__media{order:2;}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:32px;} .split--rev .split__media{order:0;}}

/* ---- List with markers (sequence-only) ---- */
.timeline{border-left:2px solid var(--line); padding-left:28px; margin-left:6px;}
.timeline__item{position:relative; padding-bottom:32px;}
.timeline__item::before{content:''; position:absolute; left:-33px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--ochre); border:2px solid var(--paper); box-shadow:0 0 0 2px var(--ink);}
.timeline__item:last-child{padding-bottom:0;}

/* ---- Simple grid of items (people, partners, docs) ---- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media (max-width:860px){.grid-3{grid-template-columns:1fr 1fr;} .grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr;}}

.person{text-align:left;}
.person .photo{border-radius:50%; aspect-ratio:1/1; margin-bottom:14px;}
.person h4{margin:0; font-family:var(--body); font-weight:700; font-size:1rem;}
.person span{font-size:.85rem; color:var(--ink-soft);}

.doc-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.doc-row:first-child{border-top:1px solid var(--line);}
.doc-row__name{font-weight:600;}
.doc-row__meta{font-size:.82rem; color:var(--ink-soft);}

.partner-logo{
  display:flex; align-items:center; justify-content:center; height:88px;
  border:1px solid var(--line); background:var(--white); font-family:var(--display);
  color:var(--ink-soft); font-size:.95rem; text-align:center; padding:0 12px;
}

/* ---- Testimonial ---- */
.testimonial{max-width:62ch; margin:0 auto; text-align:left;}
.testimonial blockquote{font-family:var(--display); font-size:1.5rem; font-weight:400; margin:0 0 .6em; line-height:1.4;}
.testimonial cite{font-style:normal; font-size:.9rem; color:var(--ink-soft);}

/* ---- Forms ---- */
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:6px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:11px 12px; border:1.5px solid var(--line); background:var(--white);
  font-family:var(--body); font-size:.95rem; border-radius:2px; color:var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:2px solid var(--ochre); outline-offset:1px; border-color:var(--ochre);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}

/* ---- Footer ---- */
.site-footer{background:var(--ink); color:var(--paper-dim); padding:64px 0 28px;}
.site-footer a{text-decoration:none; color:var(--paper-dim);}
.site-footer a:hover{color:var(--ochre);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px;}
.footer-grid h4{color:var(--white); font-family:var(--body); font-size:.85rem; font-weight:700; margin-bottom:1em;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:.6em; font-size:.9rem;}
.footer-bottom{
  border-top:1px solid rgba(245,239,224,.15); padding-top:20px; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem; color:#B7AC93;
}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* ---- Page header (inner pages) ---- */
.page-head{padding:56px 0 40px; border-bottom:1px solid var(--line);}
.breadcrumb{font-size:.8rem; color:var(--ink-soft); margin-bottom:.8em;}
.breadcrumb a{text-decoration:underline;}

/* ---- Skip link ---- */
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:100;}
.skip-link:focus{left:12px; top:12px;}

/* ---- Utility ---- */
.center{text-align:center; margin-left:auto; margin-right:auto;}
.mt-0{margin-top:0;}
.tag{display:inline-block; font-size:.75rem; font-weight:700; color:var(--indigo); border:1px solid var(--indigo); padding:3px 10px; border-radius:2px; margin:0 8px 8px 0;}

/* ==========================================================================
   Extended component library — page-specific modules & animation hooks
   ========================================================================== */

/* ---- Animated counters (Home / Impact) ---- */
.stats__num[data-count]{font-variant-numeric:tabular-nums;}

/* ---- Tilt-hover pillar cards (Home) ---- */
.pillar{will-change:transform;}
.pillar:hover{transform:translateY(-3px);}

/* ---- Tabs component (About / News) ---- */
.tabs__nav{display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:32px;}
.tabs__btn{
  font-family:var(--body); font-weight:600; font-size:.9rem; color:var(--ink-soft);
  background:none; border:none; padding:12px 4px; margin-right:22px; cursor:pointer;
  position:relative; top:1px;
}
.tabs__btn::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; transition:background .2s ease;}
.tabs__btn.active{color:var(--clay);}
.tabs__btn.active::after{background:var(--clay);}
.tabs__btn:hover{color:var(--ink);}
.tabs__panel{display:none;}
.tabs__panel.active{display:block; animation:fadeUp .45s ease both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ---- Accordion (Licenses / Transparency / Contact) ---- */
.accordion{border-top:1px solid var(--line);}
.accordion__item{border-bottom:1px solid var(--line);}
.accordion__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; text-align:left; cursor:pointer; padding:20px 2px;
  font-family:var(--display); font-size:1.15rem; color:var(--ink);
}
.accordion__meta{font-family:var(--body); font-size:.78rem; font-weight:600; color:var(--ink-soft); margin-top:4px;}
.accordion__icon{
  flex:none; width:26px; height:26px; border:1.5px solid var(--ink); border-radius:50%;
  position:relative; transition:transform .3s ease, background .2s ease;
}
.accordion__icon::before, .accordion__icon::after{
  content:''; position:absolute; background:var(--ink); top:50%; left:50%; transform:translate(-50%,-50%);
}
.accordion__icon::before{width:10px; height:1.6px;}
.accordion__icon::after{width:1.6px; height:10px; transition:opacity .25s ease;}
.accordion__item.open .accordion__icon{background:var(--ochre); border-color:var(--ochre);}
.accordion__item.open .accordion__icon::after{opacity:0;}
.accordion__body{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.accordion__body-inner{padding:0 2px 24px;}
.status-badge{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:4px 10px 4px 8px; border-radius:20px;}
.status-badge--active{background:#E4EEE3; color:var(--leaf);}
.status-badge--active .status-dot{background:var(--leaf);}
.status-badge--pending{background:#F6E9D4; color:var(--ochre-dark);}
.status-badge--pending .status-dot{background:var(--ochre);}
.status-dot{width:7px; height:7px; border-radius:50%; display:inline-block; animation:pulseDot 1.8s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1;} 50%{opacity:.35;}}

/* ---- License certificate cards (Licenses) ---- */
.cert-wall{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.cert{background:var(--white); padding:30px 26px; position:relative; overflow:hidden;}
.cert__icon{
  width:44px; height:44px; border:1.5px solid var(--ink); border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:var(--display); font-size:1rem; margin-bottom:16px; transition:transform .3s ease;
}
.cert:hover .cert__icon{transform:rotate(-8deg) scale(1.06);}
.cert h3{font-size:1.1rem; margin-bottom:.3em;}
.cert p{font-size:.88rem; color:var(--ink-soft); margin-bottom:1em;}
@media (max-width:860px){.cert-wall{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.cert-wall{grid-template-columns:1fr;}}

/* ---- Project filter (Projects) ---- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.filter-btn{
  font-family:var(--body); font-weight:600; font-size:.85rem; padding:9px 18px; border-radius:20px;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; transition:.18s ease;
}
.filter-btn.active, .filter-btn:hover{background:var(--ink); color:var(--paper);}
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:860px){.proj-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.proj-grid{grid-template-columns:1fr;}}
.proj-card{opacity:1; transform:scale(1); transition:opacity .35s ease, transform .35s ease;}
.proj-card.hide{display:none;}
.proj-card.filtering{opacity:0; transform:scale(.96);}
.proj-card__stage{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--clay); margin-bottom:.5em;}
.progress{height:6px; background:var(--line); border-radius:4px; overflow:hidden; margin:.6em 0 1em;}
.progress__bar{height:100%; width:0; background:var(--ochre); border-radius:4px; transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
.progress.in .progress__bar{width:var(--pct, 50%);}
.progress__label{font-size:.75rem; color:var(--ink-soft); font-weight:600;}

/* ---- Org chart (About) ---- */
.orgchart{display:flex; flex-direction:column; align-items:center; gap:0; margin-top:36px;}
.orgchart__level{display:flex; justify-content:center; gap:22px; flex-wrap:wrap; position:relative; padding:26px 0;}
.orgchart__node{
  background:var(--white); border:1.5px solid var(--ink); padding:14px 18px; text-align:center; min-width:150px;
  opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;
}
.orgchart__node.in{opacity:1; transform:none;}
.orgchart__node strong{display:block; font-family:var(--display); font-size:.98rem;}
.orgchart__node span{display:block; font-size:.78rem; color:var(--ink-soft); margin-top:2px;}
.orgchart__level::before{content:''; position:absolute; top:0; left:50%; width:1.5px; height:26px; background:var(--line);}
.orgchart__level:first-child::before{display:none;}

/* ---- Operational-area tag map (About) ---- */
.area-dots{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:20px;}
.area-dots__item{border:1px solid var(--line); background:var(--white); padding:14px 16px; position:relative;}
.area-dots__item::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--ochre); display:inline-block; margin-right:8px;}
.area-dots__item strong{font-family:var(--body); font-size:.9rem;}
.area-dots__item span{display:block; font-size:.78rem; color:var(--ink-soft); margin-left:16px;}

/* ---- Story carousel (Impact) ---- */
.hcarousel{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; margin-top:28px; scrollbar-width:thin;}
.hcarousel::-webkit-scrollbar{height:6px;}
.hcarousel::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
.hcarousel__card{flex:0 0 300px; scroll-snap-align:start; background:var(--white); border:1px solid var(--line);}
.hcarousel__card .photo{aspect-ratio:4/3;}
.hcarousel__card-body{padding:18px 20px;}
.hcarousel__nav{display:flex; gap:10px; margin-top:16px;}
.hcarousel__nav button{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--ink); background:var(--white); cursor:pointer;
  font-size:1rem; transition:.18s ease;
}
.hcarousel__nav button:hover{background:var(--ink); color:var(--paper);}

/* ---- Testimonial slider (Impact) ---- */
.tslider{position:relative; min-height:150px;}
.tslide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none;}
.tslide.active{opacity:1; pointer-events:auto; position:relative;}
.tslider__dots{display:flex; gap:8px; justify-content:center; margin-top:24px;}
.tslider__dots button{width:8px; height:8px; border-radius:50%; border:1px solid var(--paper); background:transparent; cursor:pointer; padding:0;}
.tslider__dots button.active{background:var(--ochre); border-color:var(--ochre);}

/* ---- Partner marquee (Partners) ---- */
.marquee{overflow:hidden; position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0;}
.marquee__track{display:flex; gap:56px; width:max-content; animation:scrollLeft 32s linear infinite;}
.marquee--rev .marquee__track{animation-name:scrollRight; animation-duration:28s;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__logo{font-family:var(--display); font-size:1.1rem; color:var(--ink-soft); white-space:nowrap; opacity:.75;}
@keyframes scrollLeft{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes scrollRight{from{transform:translateX(-50%);} to{transform:translateX(0);}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;}}

/* ---- Partner tier tabs reuse .tabs; spotlight card ---- */
.spotlight{display:flex; gap:24px; align-items:center; background:var(--white); border:1px solid var(--line); padding:26px; margin-top:32px;}
.spotlight .photo{width:120px; flex:none; aspect-ratio:1/1;}

/* ---- Donation tiers (Support) ---- */
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:22px 0;}
.tier-btn{
  border:1.5px solid var(--line); background:var(--white); padding:18px 10px; text-align:center; cursor:pointer;
  transition:.18s ease; font-family:var(--body);
}
.tier-btn strong{display:block; font-family:var(--display); font-size:1.3rem; color:var(--ink);}
.tier-btn span{font-size:.74rem; color:var(--ink-soft);}
.tier-btn:hover{border-color:var(--ochre);}
.tier-btn.active{border-color:var(--ochre); background:#FBF1DD; box-shadow:inset 0 0 0 1.5px var(--ochre);}
@media (max-width:560px){.tiers{grid-template-columns:1fr 1fr;}}

/* ---- Fundraising progress (Support) ---- */
.goal{margin-top:26px;}
.goal__bar{height:12px; background:var(--line); border-radius:8px; overflow:hidden;}
.goal__fill{height:100%; width:0; background:linear-gradient(90deg,var(--ochre),var(--clay)); border-radius:8px; transition:width 1.4s cubic-bezier(.2,.8,.2,1);}
.goal.in .goal__fill{width:var(--pct,0%);}
.goal__row{display:flex; justify-content:space-between; font-size:.85rem; color:var(--ink-soft); margin-top:8px;}

/* ---- Volunteer steps (Support) ---- */
.steps{counter-reset:step; margin-top:28px;}
.step{display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:none;}
.step__num{
  counter-increment:step; flex:none; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--display);
}
.step__num::before{content:counter(step);}

/* ---- Resource library filter (Resources) ---- */
.lib-search{
  width:100%; max-width:420px; padding:12px 16px; border:1.5px solid var(--line); background:var(--white);
  font-family:var(--body); font-size:.92rem; margin-bottom:22px; border-radius:2px;
}
.lib-search:focus{outline:2px solid var(--ochre); border-color:var(--ochre);}
.doc-row.hide{display:none;}

/* ---- Lightbox (Resources) ---- */
.lightbox-trigger{cursor:zoom-in; border:none; background:none; padding:0; width:100%; display:block; text-align:left;}
.lightbox{
  position:fixed; inset:0; background:rgba(20,15,10,.92); z-index:200; display:none;
  align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{display:flex;}
.lightbox__frame{max-width:900px; width:100%; background:var(--paper); position:relative;}
.lightbox__body{aspect-ratio:16/9;}
.lightbox__caption{padding:16px 20px; font-size:.9rem; color:var(--ink-soft);}
.lightbox__close{
  position:absolute; top:-46px; right:0; background:none; border:1.5px solid var(--paper); color:var(--paper);
  width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1.1rem;
}
.video-card{position:relative; cursor:pointer;}
.video-card__play{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; background:rgba(245,239,224,.92);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--ink); transition:transform .2s ease;
}
.video-card:hover .video-card__play{transform:scale(1.1);}

/* ---- Financial bars & donut (Transparency) ---- */
.fin-bars{margin-top:8px;}
.fin-row{margin-bottom:20px;}
.fin-row__label{display:flex; justify-content:space-between; font-size:.88rem; font-weight:600; margin-bottom:6px;}
.fin-row .progress{height:10px;}
.donut-wrap{display:flex; align-items:center; gap:32px; flex-wrap:wrap; margin-top:20px;}
.donut{
  width:180px; height:180px; border-radius:50%;
  background:conic-gradient(var(--ochre) 0deg 0deg, var(--line) 0deg 360deg);
  transition:background 1.4s ease; position:relative; flex:none;
}
.donut::after{content:''; position:absolute; inset:20px; background:var(--paper); border-radius:50%;}
.donut-legend{list-style:none; margin:0; padding:0;}
.donut-legend li{display:flex; align-items:center; gap:10px; font-size:.9rem; margin-bottom:10px;}
.donut-legend i{width:12px; height:12px; display:inline-block; border-radius:2px;}

/* ---- News ticker / timeline (News) ---- */
.news-timeline{border-left:2px solid var(--line); margin-left:8px; padding-left:30px;}
.news-item{position:relative; padding-bottom:34px;}
.news-item::before{content:''; position:absolute; left:-38px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--indigo); border:2px solid var(--paper); box-shadow:0 0 0 2px var(--ink);}
.news-item__date{font-size:.78rem; font-weight:700; color:var(--indigo); text-transform:uppercase; letter-spacing:.03em;}

/* ---- Countdown (News) ---- */
.countdown{display:flex; gap:16px; margin-top:18px;}
.countdown__unit{text-align:center; background:var(--ink); color:var(--paper); padding:14px 16px; min-width:70px;}
.countdown__unit strong{display:block; font-family:var(--display); font-size:1.7rem;}
.countdown__unit span{font-size:.68rem; color:var(--ochre); text-transform:uppercase; letter-spacing:.05em;}

/* ---- Office hours badge (Contact) ---- */
.office-status{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; margin-top:4px;}

/* ---- Copy-to-clipboard (Contact) ---- */
.copyable{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border-bottom:1px dashed var(--ink-soft); background:none; border-top:none; border-left:none; border-right:none; padding:0; font:inherit; color:inherit;}
.copyable__tip{font-size:.72rem; color:var(--leaf); opacity:0; transition:opacity .2s ease;}
.copyable.copied .copyable__tip{opacity:1;}

/* ---- Form validation states ---- */
.form-field.invalid input, .form-field.invalid textarea, .form-field.invalid select{border-color:var(--clay);}
.form-field__error{font-size:.78rem; color:var(--clay); margin-top:4px; display:none;}
.form-field.invalid .form-field__error{display:block;}
@keyframes shake{10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);}}
.shake{animation:shake .5s;}
.form-success{
  display:none; align-items:center; gap:10px; background:#E4EEE3; color:var(--leaf); padding:14px 16px; margin-top:14px;
  font-size:.9rem; font-weight:600;
}
.form-success.show{display:flex; animation:fadeUp .4s ease both;}
.form-success__check{width:20px; height:20px; border-radius:50%; background:var(--leaf); position:relative; flex:none;}
.form-success__check::after{content:''; position:absolute; left:6px; top:3px; width:5px; height:9px; border:solid var(--white); border-width:0 2px 2px 0; transform:rotate(45deg);}

/* ---- Office / location accordion detail rows ---- */
.office-card{border:1px solid var(--line); padding:22px 24px; background:var(--white);}

/* ==========================================================================
   Site-restructure additions — per-section sub-navigation, prev/next,
   breadcrumb nav wrapper, SEO-friendly link styling
   ========================================================================== */

/* ---- Sticky-ish pill sub-nav shown at the top of every sub-page in a
       section (About, Licenses, Projects, Impact, Support, Resources,
       Transparency, News) — plain crawlable <a> links, not JS tabs, since
       each one is now a real URL. ---- */
.pillnav{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:74px; z-index:40;}
.pillnav__row{display:flex; gap:8px; flex-wrap:wrap; padding:12px var(--pad); overflow-x:auto;}
.pillnav__item{
  flex:none; font-family:var(--body); font-weight:600; font-size:.84rem; color:var(--ink-soft);
  padding:8px 14px; border-radius:20px; border:1.5px solid var(--line); text-decoration:none;
  white-space:nowrap; transition:.18s ease;
}
.pillnav__item:hover{border-color:var(--ink); color:var(--ink);}
.pillnav__item.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
@media (max-width:640px){.pillnav{top:0;}}

/* ---- Prev / next footer navigation between sibling sub-pages ---- */
.prevnext{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:28px;}
.prevnext__link{text-decoration:none; color:var(--ink); max-width:280px;}
.prevnext__link span{display:block; font-size:.76rem; font-weight:700; color:var(--clay); text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px;}
.prevnext__link strong{display:block; font-family:var(--display); font-size:1.1rem; font-weight:500;}
.prevnext__link--next{text-align:right; margin-left:auto;}
.prevnext__link:hover strong{color:var(--ochre-dark);}

/* ---- Breadcrumb as a proper <nav>, unstyled beyond what .breadcrumb had ---- */
.breadcrumb-nav{margin-bottom:.8em;}
.breadcrumb-nav ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; font-size:.8rem; color:var(--ink-soft);}
.breadcrumb-nav li:not(:last-child)::after{content:'/'; margin-left:6px; color:var(--line);}
.breadcrumb-nav a{text-decoration:underline;}
.breadcrumb-nav li[aria-current] {color:var(--ink); font-weight:600;}

/* ---- Section intro (used at top of every new sub-page for a full lede + image) ---- */
.section-intro{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
@media (max-width:860px){.section-intro{grid-template-columns:1fr;}}

/* ==========================================================================
   Blog post — two-column layout (article + sticky sidebar), table of
   contents, and post-body typography for admin-authored HTML content.
   ========================================================================== */
.blog-layout{
  display:grid;
  grid-template-columns:minmax(0,780px) minmax(260px, 320px);
  gap:48px;
  align-items:start;
  justify-content:start;
}
@media (max-width:960px){
  .blog-layout{grid-template-columns:1fr;}
}
.blog-main{min-width:0;}

/* Post body — headings, images, lists, blockquotes coming from the Quill
   editor / pasted HTML all get sane, on-brand defaults here. Width comes
   from the 780px grid column itself (not an inner cap), so the text fills
   its column with no dead space before the sidebar. */
.post-body{font-size:1.05rem; line-height:1.75;}
.post-body h2{margin-top:1.6em; scroll-margin-top:24px;}
.post-body h3{margin-top:1.3em; scroll-margin-top:24px;}
.post-body p{max-width:none;}
.post-body img{border-radius:2px; margin:1.2em 0;}
.post-body a{color:var(--clay); text-decoration-color:var(--line);}
.post-body ul,.post-body ol{padding-left:1.3em; margin:0 0 1em;}
.post-body li{margin-bottom:.4em;}
.post-body blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 1.2em; border-left:4px solid var(--ochre);
  color:var(--ink-soft); font-style:italic; font-family:var(--display); font-size:1.15rem;
}
.post-body table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.92rem;}
.post-body th,.post-body td{border:1px solid var(--line); padding:8px 12px; text-align:left;}
.post-body th{background:var(--paper-dim); font-weight:700;}
.post-body figure{margin:1.4em 0;}
.post-body figcaption{font-size:.85rem; color:var(--ink-soft); text-align:center; margin-top:.5em;}
.post-body hr{border:none; border-top:1px solid var(--line); margin:2em 0;}

/* The one, sole table of contents — a card sitting between the featured
   image and the article text, since the sticky sidebar copy was removed. */
.toc--inline{
  margin-bottom:36px; background:var(--white); border:1px solid var(--line);
  border-radius:2px; padding:26px 30px;
}
.toc--inline .toc__title{font-size:.8rem; margin-bottom:14px;}
.toc--inline .toc__list{font-size:.95rem;}
.toc--inline .toc__item{margin-bottom:9px;}

/* Sidebar */
.blog-sidebar{display:flex; flex-direction:column; gap:24px; position:sticky; top:24px;}
@media (max-width:960px){
  .blog-sidebar{position:static;}
}
.widget{background:var(--white); border:1px solid var(--line); border-radius:2px; padding:20px; font-size:.85rem;}
.widget__title{
  font-family:var(--body); font-weight:700; font-size:.72rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--clay); margin:0 0 12px;
}

.toc__list{list-style:none; margin:0; padding:0; font-size:.82rem;}
.toc__list .toc__list{padding-left:1em; margin-top:5px; border-left:1px solid var(--line);}
.toc__item{margin-bottom:6px;}
.toc__item > a{
  display:block; text-decoration:none; color:var(--ink-soft); line-height:1.4;
  border-left:2px solid transparent; padding-left:10px; margin-left:-11px; transition:color .15s ease, border-color .15s ease;
}
.toc__item > a:hover{color:var(--ink); border-color:var(--ochre);}
.toc__title{font-family:var(--body); font-weight:700; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; color:var(--clay); margin:0 0 10px;}

.widget__list{list-style:none; margin:0; padding:0;}
.widget-post{display:flex; gap:10px; align-items:flex-start; margin-bottom:14px;}
.widget-post:last-child{margin-bottom:0;}
.widget-post__thumb{
  flex:none; width:52px; height:52px; border-radius:2px; background-size:cover; background-position:center;
  background-color:var(--paper-dim); background-image:linear-gradient(135deg,var(--ochre) 0%, var(--clay) 100%);
  display:block;
}
.widget-post__title{
  display:block; font-family:var(--display); font-size:.9rem; line-height:1.3; color:var(--ink);
  text-decoration:none; margin-bottom:3px;
}
.widget-post__title:hover{color:var(--ochre-dark);}
.widget-post__date{font-size:.72rem; color:var(--ink-soft);}

.widget__plainlist{list-style:none; margin:0; padding:0; font-size:.85rem;}
.widget__plainlist li{border-bottom:1px solid var(--line); padding:8px 0;}
.widget__plainlist li:last-child{border-bottom:none;}
.widget__plainlist a{text-decoration:none; color:var(--ink-soft);}
.widget__plainlist a:hover{color:var(--ochre-dark);}

.tag--link{cursor:pointer; font-size:.7rem;}
.tag--link:hover{background:var(--indigo); color:var(--white);}