/* =============================================================
   Gouri Satish — website stylesheet
   Light, minimal, mobile-first. Green identity, saffron accent.
   ~80% light  ·  ~15% green  ·  ~5% saffron
   ============================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{min-height:100%;font-family:var(--font);font-size:clamp(15px,.9rem + .15vw,16px);
  line-height:1.65;color:var(--ink);background:var(--bg);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--green);text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:none}
h1,h2,h3,h4{line-height:1.18;font-weight:700;color:var(--ink);letter-spacing:-.015em}
:lang(te),.lang-te{font-family:"Noto Sans Telugu","Inter",system-ui,sans-serif}
ul{list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}

/* ---------- Tokens ---------- */
:root{
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --green:#075B45;        /* primary identity            */
  --green-700:#054736;    /* hover / footer deep         */
  --green-050:#EAF3EE;    /* light green fill            */
  --saffron:#E88922;      /* accent only                 */
  --saffron-700:#C4711A;
  --saffron-050:#FFF1DF;  /* light saffron fill          */
  --navy:#132B40;         /* campaign accent             */

  --bg:linear-gradient(40deg, rgba(232, 137, 34, 0.06) 0%, rgba(255, 255, 255, 1) 50%, rgba(7, 91, 69, 0.06) 100%) fixed; /* page ground */
  --surface:#FFFFFF;
  --ink:#17201D;          /* main text                   */
  --muted:#66736D;        /* secondary text              */
  --line:#E2EAE5;         /* hairline border             */

  --shadow-xs:0 1px 2px rgba(23,32,29,.05);
  --shadow-sm:0 2px 10px rgba(23,32,29,.06);
  --shadow-md:0 10px 30px -12px rgba(23,32,29,.16);

  --radius:12px;
  --radius-sm:8px;
  --container:1200px;
  --pad:clamp(1.1rem,5vw,2.5rem);
  --sp-section:clamp(2.75rem,7vw,5.5rem);
}

/* ---------- Layout primitives ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sp-section);position:relative}
.section--white{background:var(--surface)}
.section--tint{background:var(--bg)}
.section--green{background:var(--bg)}
.section--tight{padding-block:clamp(2.25rem,5vw,3.5rem)}

.stack>*+*{margin-top:1rem}
.grid{display:grid;gap:clamp(1.25rem,3.5vw,2rem)}
.section__head{max-width:56ch;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.section__head p{color:var(--muted);margin-top:.6rem}
.center{text-align:center;margin-inline:auto}

/* ---------- Type helpers ---------- */
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green)}

h1,.h1{font-size:clamp(2.5rem,4vw + 2rem,5.5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.04em}
h2,.h2{font-size:clamp(1.8rem,2.5vw + 1rem,3.5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
h3,.h3{font-size:clamp(1.2rem,1vw + 1rem,1.8rem);font-weight:800;text-transform:uppercase}
.lede{font-size:clamp(1rem,.97rem + .35vw,1.18rem);color:var(--muted);max-width:60ch}
.measure{max-width:64ch}
.muted{color:var(--muted)}
.prose p+p{margin-top:.9rem}
.prose p{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:999px;
  font-size:.9rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1;white-space:nowrap;border:1.5px solid transparent;
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:linear-gradient(135deg, var(--saffron), var(--saffron-700));color:#fff;box-shadow:0 10px 20px -8px rgba(232,137,34,0.6)}
.btn--primary:hover{background:linear-gradient(135deg, var(--saffron-700), var(--saffron));color:#fff;box-shadow:0 15px 25px -8px rgba(232,137,34,0.8)}
.btn--outline{border-color:var(--green);color:var(--green);background:var(--surface)}
.btn--outline:hover{background:var(--green);color:#fff}
.btn--ondark{background:#fff;color:var(--green-700)}
.btn--ondark:hover{background:var(--green-050);color:var(--green-700)}
.btn--block{width:100%;justify-content:center}

.arrow-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;color:var(--green)}
.arrow-link svg{width:1em;height:1em;transition:transform .18s}
.arrow-link:hover svg{transform:translateX(3px)}

/* ---------- Skip link ---------- */
.skip{position:absolute;left:1rem;top:-3rem;background:var(--green);color:#fff;padding:.55rem 1rem;
  border-radius:8px;z-index:200;transition:top .2s}
.skip:focus{top:.75rem;color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--surface);
  border-bottom:1px solid var(--line);transition:box-shadow .25s}
.site-header.is-stuck{box-shadow:var(--shadow-sm)}
.site-header__bar{display:flex;align-items:center;gap:1.25rem;min-height:70px;max-width:1460px}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);flex:none}
.brand__mark{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.82rem;letter-spacing:.02em;flex:none}
.brand__name{display:block;font-weight:800;font-size:.95rem;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.brand__sub{display:block;font-size:.52rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-top:.22rem;white-space:nowrap}

.nav{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.nav__links{display:flex;align-items:center;flex-wrap:nowrap;gap:.9rem}
.nav__links a{font-size:.78rem;font-weight:500;color:var(--ink);white-space:nowrap;
  padding-block:.35rem;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav__links a:hover{color:var(--green)}
.nav__links a[aria-current="page"]{color:var(--green);border-color:var(--saffron)}
.nav__links a.nav__lang{color:var(--green);font-weight:700;border:1px solid var(--line);
  border-radius:999px;padding:.3rem .75rem;margin-left:.15rem}
.nav__links a.nav__lang:hover{border-color:var(--green);background:var(--green-050)}
.nav>.btn{padding:.58rem 1rem;font-size:.78rem}

.nav__toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);align-items:center;justify-content:center;flex:none}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:"";display:block;
  width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s,opacity .18s}
.nav__toggle span::before{transform:translateY(-6px)}
.nav__toggle span::after{transform:translateY(4px)}
body.nav-open .nav__toggle span{background:transparent}
body.nav-open .nav__toggle span::before{transform:rotate(45deg)}
body.nav-open .nav__toggle span::after{transform:rotate(-45deg) translateY(-2px)}

@media (max-width:1420px){
  .nav__toggle{display:inline-flex}
  .site-header .brand{flex:1 1 auto;min-width:0}
  .site-header .brand__text{min-width:0}
  .site-header .brand__name,.site-header .brand__sub{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .nav{position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .28s ease,visibility 0s linear .28s}
  body.nav-open .nav{max-height:calc(100vh - 70px);overflow-y:auto;visibility:visible;
    transition:max-height .28s ease}
  .nav__links{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0}
  .nav__links a{font-size:1rem;padding:1rem var(--pad);border-bottom:1px solid var(--line);border-left:2px solid transparent}
  .nav__links a[aria-current="page"]{border-bottom-color:var(--line);border-left-color:var(--saffron);background:var(--green-050)}
  .nav__links a.nav__lang{border-radius:0;margin-left:0;padding:1rem var(--pad)}
  .nav>.btn{margin:1rem var(--pad) 1.25rem;padding:.95rem 1rem;font-size:.9rem;justify-content:center}
}

/* ---------- Tricolour rule ---------- */
.rule-tricolour{height:3px;display:flex}
.rule-tricolour i{flex:1}
.rule-tricolour i:nth-child(1){background:var(--saffron)}
.rule-tricolour i:nth-child(2){background:#fff}
.rule-tricolour i:nth-child(3){background:var(--green)}

/* ---------- Hero ---------- */
.hero{background:var(--bg);border-bottom:1px solid var(--line);overflow:hidden;position:relative}
/* blurred backdrop photo */
.hero__bgphoto{position:absolute;inset:-8px;z-index:0;pointer-events:none;
  background:url("../img/bg-image.webp") center 30% / cover no-repeat;
  filter:blur(1px);opacity:.72;transform:scale(1.02)}
/* white scrim keeps the text side clean, photo stays visible on the right */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,var(--bg) 29%,rgba(248,250,247,.66) 55%,rgba(248,250,247,.22) 84%)}

@media (max-width:899px){
  .hero__bgphoto{opacity:.4}
  .hero::after{background:linear-gradient(180deg,rgba(248,250,247,.62),rgba(248,250,247,.34))}
}
/* desktop keeps the original softer backdrop photo; the sharp flags image is mobile-only */
@media (min-width:900px){
  .hero__bgphoto{inset:-28px;background:url("../img/bg.avif") left top / cover no-repeat;
    filter:blur(5px);opacity:.56;transform:scale(1.06)}
  .hero::after{background:linear-gradient(100deg,rgba(248,250,247,.12) 16%,rgba(248,250,247,.62) 45%,var(--bg) 71%)}
}
.hero__inner{position:relative;z-index:1;display:grid;gap:1.35rem;
  padding:clamp(2rem,5.5vw,3.75rem) 0 0}
.hero__tags{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.hero-tag{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:.42rem .72rem;border-radius:999px;color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.hero-tag--fill{background:var(--saffron);border-color:var(--saffron);color:#fff}
.hero h1{margin:0}
.hero__name-1{background:linear-gradient(135deg, var(--navy), var(--green));-webkit-background-clip:text;color:transparent;display:inline;text-shadow:0 4px 14px rgba(7,91,69,0.15)}
.hero__name-2{background:linear-gradient(135deg, var(--saffron), var(--saffron-700));-webkit-background-clip:text;color:transparent;display:inline;text-shadow:0 4px 14px rgba(232,137,34,0.15)}
.hero__kicker{margin:0}
.hero__intro{color:var(--muted);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;
  padding-bottom:clamp(2.5rem,6vw,4rem)}

/* portrait — sharp, prominent, sits low and bleeds toward the fold */
.hero__portrait{position:relative;align-self:end;justify-self:center;max-width:460px;width:100%;margin-top:1rem}

/* Hero photo slideshow: stays on the RIGHT side of the original hero layout */
.hero__photo-slider{grid-area:portrait;position:relative;width:100%;max-width:560px;height:clamp(430px,43vw,610px);align-self:stretch;justify-self:center;overflow:hidden;border-radius:0 0 0 0;background:#e9eee9;box-shadow:-18px 0 40px rgba(7,91,69,.08)}
.hero__slides,.hero__slide{position:absolute;inset:0;width:100%;height:100%}
.hero__slide{margin:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s ease}
.hero__slide.is-active{opacity:1;visibility:visible}
.hero__slide img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.hero__photo-slider::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(248,250,247,.32) 0%,transparent 18%,transparent 100%),linear-gradient(180deg,rgba(0,0,0,.02),transparent 65%,rgba(0,0,0,.2))}
.hero__slider-btn{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--green);font-size:1.25rem;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.16);transition:transform .2s ease,background .2s ease}
.hero__slider-btn:hover{transform:translateY(-50%) scale(1.06);background:#fff}
.hero__slider-btn--prev{left:16px}
.hero__slider-btn--next{right:16px}
.hero__slider-dots{position:absolute;z-index:6;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:7px;align-items:center}
.hero__slider-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.7);cursor:pointer;transition:width .2s ease,background .2s ease}
.hero__slider-dots button.is-active{width:24px;border-radius:999px;background:#fff}

/* Static, background-less portrait: desktop only (mobile keeps the photo slider) */
.hero__cutout{display:none}
.hero__cutout img{width:100%;height:auto;max-height:600px;object-fit:contain;display:block}

@media (max-width:899px){
  .hero__inner{text-align:center;gap:1.15rem;justify-items:center}
  .hero__tags{justify-content:center;order:1}
  .hero h1{font-size:clamp(1.9rem,1.1rem + 5.2vw,2.75rem);order:2;white-space:nowrap}
  .hero__name-1,.hero__name-2{display:inline}
  .hero__kicker{margin-top:.15rem;order:4}
  .hero__intro{margin-inline:auto;order:5}
  .hero__portrait{max-width:320px;margin-top:1.75rem}
  .hero__photo-slider{grid-area:auto;order:3;min-height:clamp(300px,78vw,520px);height:clamp(300px,78vw,520px);max-width:720px;margin-top:.5rem;margin-bottom:.5rem}
  .hero__slide img{object-position:center top}
  .hero__cta{order:6;flex-direction:column;width:100%;max-width:360px;margin-inline:auto;
    gap:.85rem;padding-bottom:clamp(2.25rem,8vw,3rem)}
  .hero__cta .btn{width:100%;justify-content:center;padding-block:.95rem}
}
@media (min-width:900px){
  .hero__inner{grid-template-columns:.94fr 1.06fr;column-gap:clamp(2rem,5vw,4rem);row-gap:1.1rem;
    grid-template-areas:"portrait tags" "portrait title" "portrait kicker" "portrait intro" "portrait cta";
    align-content:center}
  .hero__tags{grid-area:tags}
  .hero h1{grid-area:title;font-size:clamp(2rem,1.7vw + 1.3rem,3.6rem);white-space:nowrap}
  .hero__kicker{grid-area:kicker}
  .hero__intro{grid-area:intro}
  .hero__cta{grid-area:cta}
  .hero__portrait{grid-area:portrait;align-self:stretch;display:flex;align-items:flex-end;max-width:500px;margin-top:0}
  .hero__photo-slider{display:none}
  .hero__cutout{grid-area:portrait;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;max-width:480px;width:100%;margin-top:0}
}

/* ---------- Moving highlight banners ---------- */
.motion-banners{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;margin-top:clamp(1.5rem, 4vw, 2.5rem);border-bottom:1px solid var(--line);background:linear-gradient(90deg, var(--saffron) 0%, #fff 50%, var(--green) 100%)}
.motion-banner{min-height:170px;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;position:relative;overflow:hidden}
.motion-banner::before,.motion-banner::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;border:1px solid currentColor;opacity:.18;animation:bannerPulse 5s ease-in-out infinite}
.motion-banner::after{width:260px;height:260px;animation-delay:1s}
.motion-banner>div{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.2rem;animation:bannerLift 4s ease-in-out infinite}
.motion-banner__number{font-size:clamp(2.4rem,4vw,4rem);font-weight:900;line-height:1;letter-spacing:-.04em}
.motion-banner__label{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.motion-banner--saffron{background:transparent;color:#fff}
.motion-banner--green{background:transparent;color:var(--green)}
.motion-banner--cream{background:transparent;color:#fff}
@keyframes bannerPulse{50%{transform:scale(1.15);opacity:.28}}
@keyframes bannerLift{50%{transform:translateY(-5px)}}

/* ---------- Campaign photo carousel ---------- */
.campaign-gallery{background:var(--bg);overflow:hidden}
.campaign-gallery .gallery-section__head{margin-bottom:1.25rem}
.campaign-gallery__carousel{position:relative;max-width:1080px;margin-inline:auto;padding:0 3.5rem}
.campaign-gallery__viewport{overflow:hidden;border:8px solid #fff;border-radius:var(--radius);box-shadow:0 18px 40px rgba(7,91,69,.16);background:#fff}
.campaign-gallery__track{display:flex;transition:transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform}
.campaign-gallery__slide{position:relative;flex:0 0 100%;aspect-ratio:16/9;margin:0;overflow:hidden;background:var(--green)}
.campaign-gallery__slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(5,71,54,.34));pointer-events:none}
.campaign-gallery__slide img{width:100%;height:100%;object-fit:cover;display:block;animation:campaignZoom 7s ease-in-out infinite alternate}
@keyframes campaignZoom{to{transform:scale(1.045)}}
.campaign-gallery__btn{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--green);font-size:1.35rem;box-shadow:0 8px 22px rgba(7,91,69,.2);transition:transform .2s,background .2s}
.campaign-gallery__btn:hover{transform:translateY(-50%) scale(1.08);background:var(--saffron);color:#fff}
.campaign-gallery__btn--prev{left:.35rem}.campaign-gallery__btn--next{right:.35rem}
.campaign-gallery__dots{display:flex;justify-content:center;gap:.45rem;margin-top:1rem}
.campaign-gallery__dots button{width:8px;height:8px;padding:0;border-radius:50%;background:rgba(7,91,69,.32);transition:width .2s,background .2s}
.campaign-gallery__dots button.is-active{width:28px;border-radius:999px;background:var(--saffron)}
@media (max-width:640px){
  .campaign-gallery__carousel{padding:0}
  .campaign-gallery__viewport{border-width:5px}
  .campaign-gallery__slide{aspect-ratio:4/3}
  .campaign-gallery__btn{width:40px;height:40px;font-size:1rem}
  .campaign-gallery__btn--prev{left:.7rem}.campaign-gallery__btn--next{right:.7rem}
}

@media (max-width:760px){
  .campaign-photo-showcase{min-height:clamp(420px,72vh,620px);height:clamp(420px,72vh,620px)}
  .campaign-photo-slide img{object-fit:contain}
  .campaign-photo-showcase__btn{width:42px;height:42px;font-size:1rem}
  .campaign-photo-slide figcaption{left:1.1rem;right:1.1rem;bottom:2.6rem}
  .campaign-photo-slide figcaption strong{font-size:1.45rem}
  .motion-banners{grid-template-columns:1fr;background:linear-gradient(180deg, var(--saffron) 0%, #fff 50%, var(--green) 100%)}
  .motion-banner{min-height:125px}
}
@media (prefers-reduced-motion:reduce){
  .campaign-photo-slide{transition:none}
  .campaign-gallery__track,.campaign-gallery__slide img{transition:none;animation:none}
  .campaign-photo-showcase__progress::after,.motion-banner::before,.motion-banner::after,.motion-banner>div{animation:none}
}

/* ---------- Stats ---------- */
.stats{background:var(--bg)}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
@media (max-width:600px){.stats__grid{grid-template-columns:1fr;text-align:left}}
.stat{background:var(--bg);display:flex;align-items:center;gap:.9rem;padding:1.15rem clamp(.5rem,3vw,1.5rem)}
@media (min-width:601px){.stat{justify-content:center}}
.stat__ico{width:34px;height:34px;color:var(--green);flex:none}
.stat__ico svg{width:100%;height:100%}
.stat b{display:block;font-size:clamp(1.35rem,1rem + 1.6vw,1.9rem);font-weight:800;color:var(--ink);line-height:1}
.stat span{display:block;font-size:.82rem;color:var(--muted);margin-top:.2rem}

/* ---------- Split (text + media) ---------- */
.split{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (min-width:860px){
  .split{grid-template-columns:1fr 1fr}
  .split--reverse .split__media{order:-1}
}
.split__media img,.media{border-radius:var(--radius)}

/* ---------- About bio (premium editorial) ---------- */
.about-bio{
  --ab-ink:#10212B;
  --ab-green:#006B57;
  --ab-saffron:#E88918;
  --ab-bg:#FFFDF8;
  --ab-muted:#53636A;
  --ab-line:#EDE6D6;
  position:relative;
  background:var(--ab-bg);
  padding-top:clamp(2.5rem,5vw,4.25rem);
  padding-bottom:clamp(1.5rem,3vw,2.25rem);
  overflow:hidden;
  isolation:isolate;
}
.about-bio__ring{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.about-bio__ring--1{width:420px;height:420px;right:clamp(-140px,-4vw,-60px);top:-90px;
  border:1px solid rgba(232,137,24,.16)}
.about-bio__ring--2{width:300px;height:300px;right:clamp(20px,6vw,90px);top:120px;
  border:1px solid rgba(0,107,87,.14)}

.about-bio__inner{
  position:relative;z-index:1;
  display:grid;
  row-gap:.9rem;
  grid-template-columns:1fr;
}
.about-bio__eyebrow{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.85rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ab-green);
}
.about-bio__eyebrow::before{
  content:"";width:28px;height:2px;background:var(--ab-saffron);border-radius:2px;
}
.about-bio__heading{
  font-size:clamp(2.1rem,1.6vw + 1.7rem,3.5rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--ab-ink);
  max-width:20ch;
  margin:0;
}
.about-bio__text{margin-top:.35rem;max-width:56ch}
.about-bio__text p{font-size:clamp(1rem,.3vw + .95rem,1.125rem);line-height:1.7;color:var(--ab-muted)}
.about-bio__text p+p{margin-top:.85rem}
.about-bio__cta{
  justify-self:start;
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.95rem;color:var(--ab-green);
  padding-bottom:.15rem;border-bottom:2px solid transparent;
  transition:border-color .2s ease,color .2s ease,gap .2s ease;
}
.about-bio__cta svg{width:1em;height:1em;transition:transform .2s ease}
.about-bio__cta:hover{color:var(--ab-saffron);border-color:var(--ab-saffron)}
.about-bio__cta:hover svg{transform:translateX(4px)}

.about-bio__media{position:relative;z-index:1;margin-top:1.75rem}
.about-bio__photo-wrap{position:relative;width:100%;max-width:460px;margin-inline:auto}
.about-bio__photo{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;
  border-radius:22px;border:1px solid rgba(16,33,43,.08);
  box-shadow:0 24px 48px -20px rgba(16,33,43,.32),0 4px 14px rgba(16,33,43,.08);
}
.about-bio__accent{
  position:absolute;left:-8%;bottom:-9%;width:36%;aspect-ratio:1/1;object-fit:cover;
  border-radius:16px;border:4px solid var(--ab-bg);
  box-shadow:0 14px 30px -10px rgba(16,33,43,.35);
  transform:rotate(-4deg);
}

.about-bio__stats{
  grid-column:1/-1;
  margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--ab-line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem 1.25rem;
}
.about-bio__stats li{position:relative;display:flex;flex-direction:column;gap:.2rem}
.about-bio__stats li+li{padding-left:1.25rem;border-left:1px solid var(--ab-line)}
.about-bio__stats strong{font-size:clamp(.95rem,.35vw + .8rem,1.15rem);font-weight:800;color:var(--ab-ink);line-height:1.15}
.about-bio__stats span{font-size:.72rem;color:var(--ab-muted);line-height:1.35}

.about-bio__seam{
  display:block;position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(220px,60%);height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--ab-saffron),var(--ab-line) 50%,var(--ab-green));
}

@media (min-width:640px){
  .about-bio__stats{grid-template-columns:repeat(3,auto);justify-content:start;gap:1.5rem 2.5rem}
}

/* Tablet: two columns, smaller media + tighter gap */
@media (min-width:720px){
  .about-bio__inner{
    grid-template-columns:1.15fr .85fr;
    column-gap:clamp(1.75rem,4vw,2.5rem);
    row-gap:0;
    grid-template-areas:
      "eyebrow media"
      "heading media"
      "text media"
      "cta media"
      "stats stats";
    align-items:start;
  }
  .about-bio__eyebrow{grid-area:eyebrow}
  .about-bio__heading{grid-area:heading;margin-top:.6rem}
  .about-bio__text{grid-area:text;margin-top:1rem}
  .about-bio__cta{grid-area:cta;margin-top:1.4rem}
  .about-bio__media{grid-area:media;margin-top:0}
  .about-bio__photo-wrap{max-width:340px}
  .about-bio__photo{aspect-ratio:4/5}
  .about-bio__stats{grid-area:stats;grid-column:auto;margin-top:2.25rem}
}

/* Desktop: full-size portrait + wider gap */
@media (min-width:1024px){
  .about-bio__inner{column-gap:clamp(3rem,5vw,4.5rem)}
  .about-bio__photo-wrap{max-width:520px}
  .about-bio__photo{aspect-ratio:auto;height:clamp(500px,32vw,560px)}
}

/* ---------- Media placeholder ---------- */
.media{position:relative;overflow:hidden;background:var(--green-050);border:1px solid var(--line);
  display:grid;place-items:center;text-align:center;padding:1.5rem;color:var(--muted);aspect-ratio:4/3}
.media[data-ratio="wide"]{aspect-ratio:16/9}
.media[data-ratio="portrait"]{aspect-ratio:4/5}
.media[data-ratio="square"]{aspect-ratio:1/1}
.media__label{position:relative;font-size:.78rem;line-height:1.5;max-width:26ch}
.media__label strong{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin-bottom:.35rem}

/* ---------- Education & Public Service (compact + auto carousel) ---------- */
.edu-service{padding-top:clamp(1.5rem,3vw,2.25rem);padding-bottom:clamp(1.5rem,3vw,2.25rem);position:relative}
.edu-service::after{content:"";display:block;position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(220px,60%);height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--saffron),rgba(255,255,255,.5) 50%,var(--green))}
.edu-service .split{margin-bottom:clamp(1.5rem,3.5vw,2.25rem)}
.edu-service h2{font-size:clamp(1.4rem,1.6vw + .9rem,2rem);letter-spacing:-.015em}
@media (min-width:900px){
  .edu-service h2{font-size:clamp(.85rem,1.3vw + .3rem,1.3rem);white-space:nowrap;letter-spacing:-.01em}
}
.edu-carousel{position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:3/2;box-shadow:var(--shadow-md);background:#e9eee9}
.edu-carousel .hero__slide img{transform:scale(1);transition:transform 6.5s ease}
.edu-carousel .hero__slide.is-active img{transform:scale(1.08)}

/* ---------- Education & Public Service chain (compact, replaces big cards) ---------- */
.eps-chain{display:flex;gap:0;list-style:none}
.eps-chain__item{position:relative;flex:1;text-align:center;padding:0 .75rem}
.eps-chain__item::after{content:"";position:absolute;top:15px;left:50%;width:100%;height:2px;
  background:var(--line);z-index:0}
.eps-chain__item:last-child::after{display:none}
.eps-chain__ico{position:relative;z-index:1;display:grid;place-items:center;
  width:30px;height:30px;margin:0 auto .55rem;border-radius:50%;
  background:var(--green);color:#fff;box-shadow:0 4px 10px -2px rgba(7,91,69,.4)}
.eps-chain__ico svg{width:15px;height:15px}
.eps-chain__item h3{font-size:.85rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:.3rem;color:var(--ink)}
.eps-chain__item p{font-size:.78rem;line-height:1.45;color:var(--muted);
  max-width:22ch;margin-inline:auto}

@media (max-width:640px){
  .eps-chain{gap:0}
  .eps-chain__item{padding:0 .35rem}
  .eps-chain__item::after{top:12px}
  .eps-chain__ico{width:24px;height:24px;margin-bottom:.4rem}
  .eps-chain__ico svg{width:12px;height:12px}
  .eps-chain__item h3{font-size:.7rem;letter-spacing:.01em;margin-bottom:.2rem}
  .eps-chain__item p{font-size:.66rem;line-height:1.35;max-width:none}
}

/* ---------- Feature cards (Education / Opportunity / Representation) ---------- */
.feature-cards{display:grid;gap:clamp(1rem,3vw,1.5rem);grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.feature-cards{grid-template-columns:1fr}}
.feature-card{background:rgba(255, 255, 255, 0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:0 6px 16px rgba(7,91,69,0.06);transition:box-shadow .25s ease,transform .25s ease;position:relative;overflow:hidden}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px -6px rgba(7,91,69,0.15)}
.feature-card .ico{width:40px;height:40px;border-radius:10px;background:var(--green-050);color:var(--green);
  display:grid;place-items:center;margin-bottom:.9rem}
.feature-card .ico svg{width:22px;height:22px}
.feature-card h3{margin-bottom:.35rem}
.feature-card p{color:var(--muted);font-size:.92rem}

/* ---------- Commitments carousel (Vision page — smaller cards, horizontal scroll) ---------- */
.commitments-carousel{display:flex;gap:1rem;overflow-x:auto;padding:.4rem .25rem .5rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.commitments-carousel::-webkit-scrollbar{display:none;height:0}
.commitments-carousel .feature-card{flex:0 0 auto;width:250px;padding:1.15rem}
.commitments-carousel .feature-card .ico{width:34px;height:34px;margin-bottom:.7rem}
.commitments-carousel .feature-card .ico svg{width:18px;height:18px}
.commitments-carousel .feature-card h3{font-size:.96rem;line-height:1.3}
.commitments-carousel .feature-card p{font-size:.82rem;line-height:1.5}
@media (max-width:520px){.commitments-carousel .feature-card{width:220px}}

/* ---------- Initiatives (4 minimal cards) ---------- */
.initiatives{display:grid;gap:clamp(.9rem,2.5vw,1.25rem);grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){.initiatives{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.initiatives{grid-template-columns:1fr}}
.initiative{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.35rem 1.35rem;box-shadow:var(--shadow-xs);position:relative;overflow:hidden;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.initiative::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--saffron),var(--green));transform:scaleX(0);
  transform-origin:left;transition:transform .35s ease}
.initiative:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
.initiative:hover::before{transform:scaleX(1)}
.initiative .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--green-050);color:var(--green);margin-bottom:.9rem;transition:background-color .2s,color .2s}
.initiative:hover .ico{background:var(--green);color:#fff}
.initiative .ico svg{width:20px;height:20px}
.initiative h3{font-size:1.02rem;margin-bottom:.3rem;letter-spacing:-.01em}
.initiative h3 b{color:var(--saffron-700);font-weight:800;margin-right:.15em}
.initiative p{font-size:.85rem;color:var(--muted)}
.tagline-dots{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.8rem;color:var(--muted);
  font-weight:600;letter-spacing:.02em;margin-top:.4rem}
.tagline-dots span{display:inline-flex;align-items:center;gap:.5rem}
.tagline-dots span+span::before{content:"\2022";color:var(--saffron);margin-right:.5rem}

/* ---------- Key Initiatives (premium editorial) ---------- */
.ki-section{
  --ki-ink:#10212B; --ki-green:#006B57; --ki-saffron:#E88918;
  --ki-bg:#FFFDF8; --ki-muted:#53636A; --ki-line:#EDE6D6;
  position:relative; background:var(--ki-bg);
  padding-top:clamp(1.5rem,3vw,2.25rem);
  padding-bottom:clamp(1.5rem,3vw,2.25rem);
  overflow:hidden; isolation:isolate;
}
.ki-decor{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.ki-decor--1{width:380px;height:380px;right:-130px;top:-90px;border:1px solid rgba(232,137,24,.14)}
.ki-decor--2{width:260px;height:260px;right:60px;bottom:-70px;border:1px solid rgba(0,107,87,.12)}

.ki-head{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-end;gap:1.5rem;margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
.ki-eyebrow{position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.85rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ki-green)}
.ki-eyebrow::after{content:"";width:28px;height:2px;background:var(--ki-saffron);border-radius:2px}
.ki-heading{font-size:clamp(1.75rem,1.8vw + 1.2rem,2.75rem);font-weight:800;line-height:1.15;
  letter-spacing:-.02em;color:var(--ki-ink);margin:.5rem 0 0;max-width:26ch}
.ki-sub{margin-top:.6rem;font-size:clamp(1rem,.3vw + .95rem,1.125rem);line-height:1.6;
  color:var(--ki-muted);max-width:52ch}
.ki-nav{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.15rem}
.ki-nav span{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:600;color:var(--ki-ink)}
.ki-nav svg{width:18px;height:18px;color:var(--ki-green);flex-shrink:0}
.ki-viewall{flex-shrink:0;color:var(--ki-green)}

.ki-featured{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);
  background:#fff;border:1px solid var(--ki-line);border-radius:20px;
  box-shadow:0 20px 44px -22px rgba(16,33,43,.18);overflow:hidden;
  margin-top:clamp(1.5rem,3vw,2rem)}
.ki-featured__media{position:relative;overflow:hidden;aspect-ratio:16/10;min-width:0}
.ki-featured__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ki-featured:hover .ki-featured__media img{transform:scale(1.03)}
.ki-featured__body{position:relative;min-width:0;padding:clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column}
.ki-featured__ico,.ki-featured__cta{align-self:flex-start}
.ki-featured__body h3,.ki-featured__body p{min-width:0;overflow-wrap:break-word}
.ki-featured__num{position:absolute;top:-.4rem;right:1.25rem;font-size:clamp(4rem,8vw,7rem);
  font-weight:900;color:var(--ki-ink);opacity:.06;line-height:1;pointer-events:none;z-index:0}
.ki-featured__ico{position:relative;z-index:1;width:40px;height:40px;border-radius:12px;
  background:rgba(0,107,87,.08);color:var(--ki-green);display:grid;place-items:center;margin-bottom:1rem}
.ki-featured__ico svg{width:22px;height:22px}
.ki-featured__body h3{position:relative;z-index:1;font-size:clamp(1.35rem,1vw + 1.1rem,1.6rem);
  font-weight:800;color:var(--ki-ink);margin-bottom:.6rem}
.ki-featured__body p{position:relative;z-index:1;font-size:1rem;line-height:1.65;color:var(--ki-muted);max-width:44ch}
.ki-featured__cta{position:relative;z-index:1;margin-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--ki-saffron);color:#fff;font-weight:700;font-size:.92rem;
  padding:.75rem 1.3rem;border-radius:999px;transition:background .2s ease,transform .2s ease}
.ki-featured__cta svg{width:1.1em;height:1.1em;transition:transform .2s ease}
.ki-featured__cta:hover{background:#c4711a;transform:translateY(-2px)}
.ki-featured__cta:hover svg{transform:translateX(3px)}

@media (min-width:860px){
  .ki-featured{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch}
  .ki-featured__media{aspect-ratio:auto}
  .ki-featured__body{justify-content:center}
}

.ki-grid{position:relative;z-index:1;display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:minmax(0,1fr);margin-top:clamp(1.15rem,2.5vw,1.5rem)}
@media (min-width:640px){.ki-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.ki-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.ki-card{position:relative;min-width:0;overflow:hidden;background:#fff;border:1px solid var(--ki-line);
  border-radius:16px;padding:1.5rem 1.5rem 1.65rem;border-top:3px solid transparent;
  transition:transform .3s ease,box-shadow .3s ease}
.ki-card:nth-child(odd){border-top-color:var(--ki-saffron)}
.ki-card:nth-child(even){border-top-color:var(--ki-green)}
.ki-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px -16px rgba(16,33,43,.22)}
.ki-card__num{position:absolute;top:.25rem;right:.9rem;font-size:3.25rem;font-weight:900;color:var(--ki-ink);opacity:.06;line-height:1}
.ki-card__ico{position:relative;z-index:1;width:38px;height:38px;border-radius:10px;
  background:rgba(0,107,87,.08);color:var(--ki-green);display:grid;place-items:center;margin-bottom:.9rem}
.ki-card__ico svg{width:20px;height:20px}
.ki-card h3{position:relative;z-index:1;font-size:1.05rem;font-weight:800;color:var(--ki-ink);margin-bottom:.45rem}
.ki-card p{position:relative;z-index:1;font-size:.88rem;line-height:1.55;color:var(--ki-muted)}
.ki-card__arrow{position:relative;z-index:1;display:inline-flex;margin-top:.9rem;color:var(--ki-green);transition:transform .2s ease}
.ki-card__arrow svg{width:18px;height:18px}
.ki-card:hover .ki-card__arrow{transform:translateX(4px)}

.ki-seam{display:block;position:relative;z-index:1;margin:clamp(1.25rem,2.5vw,1.75rem) auto 0;
  width:min(220px,60%);height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--ki-saffron),var(--ki-line) 50%,var(--ki-green))}

/* ---------- Vision points ---------- */
.vision-points{display:grid;gap:.85rem;margin:1.25rem 0 1.75rem}
.vision-points li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
.vision-points svg{width:20px;height:20px;color:var(--green);flex:none;margin-top:.15rem}
.icon-badge{width:44px;height:44px;border-radius:12px;background:var(--saffron-050);color:var(--saffron-700);
  display:grid;place-items:center;margin-bottom:1rem}
.icon-badge svg{width:24px;height:24px}

/* ---------- News ---------- */
.news-grid{display:grid;gap:clamp(1rem,3vw,1.5rem);grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.news-grid{grid-template-columns:1fr}}
.news-card{background:rgba(255, 255, 255, 0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}
.news-card:hover{box-shadow:0 22px 38px -14px rgba(7,91,69,.32);transform:translateY(-9px) scale(1.02)}
.news-card .media{border:0;border-radius:0;aspect-ratio:16/10}
.news-card__body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.news-card__meta{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-700)}
.news-card h3{font-size:1.02rem}
.news-card p{font-size:.88rem;color:var(--muted);flex:1}


/* ---------- Gallery video carousel ---------- */
.video-gallery-section{overflow:hidden}
.video-carousel{max-width:1200px;margin:0 auto}
.video-carousel__featured{max-width:900px;margin:0 auto 1.5rem}
.video-carousel__featured .video-slide{flex:0 0 100%;width:100%}
.video-carousel__viewport{overflow-x:auto;overflow-y:hidden;padding:0 .1rem .75rem;scrollbar-color:var(--saffron) transparent;scroll-behavior:smooth}
.video-carousel__track{display:flex;align-items:flex-start;gap:1.25rem;width:max-content;transition:transform .6s ease;will-change:transform}
.video-slide{flex:0 0 clamp(260px,31vw,360px);min-width:0;padding:0}
.video-carousel--stacked .video-carousel__track{transform:none!important;transition:none;will-change:auto}
.video-carousel--stacked .video-carousel__viewport{scroll-snap-type:x proximity}
.video-carousel--stacked .video-carousel__track .video-slide{scroll-snap-align:start}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card{display:flex;flex-direction:column;height:100%;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s}
.video-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.video-card__media{position:relative;display:block;aspect-ratio:16/10;background:#dce8e2;overflow:hidden}
.video-card__media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
.video-card:hover .video-card__media img{transform:scale(1.04)}
.video-card__play{position:absolute;left:50%;top:50%;width:42px;height:30px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:9px;background:#f00;color:#fff;font-size:.8rem;line-height:1;padding-left:2px;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.video-card__body{display:flex;flex-direction:column;gap:.35rem;flex:1;padding:.85rem 1rem 1rem}
.video-card__source{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-700)}
.video-card__body strong{font-size:.95rem;line-height:1.25}
.video-carousel__btn{position:absolute;z-index:2;top:50%;margin-top:-21px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--green);font-size:1.2rem;line-height:1;box-shadow:0 8px 22px rgba(7,91,69,.2);transition:transform .2s,background .2s}
.video-carousel__btn:hover{transform:scale(1.08);background:var(--saffron);color:#fff}
.video-carousel__btn--prev{left:0}
.video-carousel__btn--next{right:0}
.video-carousel__dots{bottom:0;position:absolute}
.video-carousel__dots button{background:rgba(255,255,255,.5)}
.video-carousel__dots button.is-active{background:var(--saffron);width:24px}
.video-slide--external{display:flex;align-items:flex-start;background:var(--green)}
.video-external-card{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;color:#fff}
.video-external-card .eyebrow{color:#dbe8e1}
.video-external-card h3{color:#fff;margin-top:.8rem}
.video-external-card p{color:#dbe8e1;max-width:55ch;margin:.75rem auto 1.5rem}

/* ---------- Gallery (CSS Grid mosaic) ---------- */
.gallery-grid{display:grid;gap:.75rem;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(96px,18vw,172px);grid-auto-flow:dense}
@media (max-width:820px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}

.gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:var(--radius);border:1px solid var(--line)}
.gallery-grid .media{aspect-ratio:auto;width:100%;height:100%}

/* mosaic sizing — mix of square, wide and tall tiles, auto-packed with no gaps */
.gallery-grid .g-wide,.gallery-grid img.media--wide{grid-column:span 2}
.gallery-grid .g-tall{grid-row:span 2}
.gallery-grid .g-big{grid-column:span 2;grid-row:span 2}
@media (max-width:520px){.gallery-grid .g-big{grid-row:span 1}}

/* ---------- Gallery page: editorial layout ---------- */
/* shared photo wrapper — clips the subtle hover zoom, sets a consistent radius */
.gphoto{display:block;position:relative;overflow:hidden;border-radius:var(--radius);background:var(--green-050)}
.gphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.gphoto:hover img{transform:scale(1.02)}

/* hero */
.gallery-hero{display:grid;gap:1.75rem;align-items:center;padding-top:0;
  padding-bottom:clamp(2rem,5vw,3.5rem)}
@media (min-width:960px){.gallery-hero{grid-template-columns:.9fr 1.1fr;gap:3rem}}
.gallery-hero__sub{font-weight:700;color:var(--green);margin-top:.6rem;font-size:1.05rem}
.gallery-hero__media{aspect-ratio:16/10}
.gallery-filters{display:flex;gap:1.5rem;margin-top:1.75rem;overflow-x:auto;padding-bottom:.3rem;
  font-size:.85rem;font-weight:700}
.gallery-filters a{white-space:nowrap;color:var(--muted);padding-bottom:.35rem;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.gallery-filters a.is-active,.gallery-filters a:hover{color:var(--ink);border-color:var(--saffron)}

/* public-life banner */
.gallery-banner{position:relative;overflow:hidden}
.gallery-banner img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.gallery-banner__caption{position:absolute;right:0;bottom:0;top:0;width:min(42%,440px);
  background:linear-gradient(100deg,transparent,rgba(5,50,38,.55) 20%,var(--green) 58%);
  display:flex;flex-direction:column;justify-content:center;padding:2rem clamp(1.5rem,4vw,3rem)}
.gallery-banner__caption .eyebrow{color:#cfe4da}
.gallery-banner__caption p{color:#fff;font-size:clamp(1.25rem,1rem + 1.2vw,1.6rem);
  font-weight:800;line-height:1.28;margin-top:.65rem}
@media (max-width:680px){
  .gallery-banner img{aspect-ratio:4/5}
  .gallery-banner__caption{position:static;width:auto;background:var(--green);padding:1.75rem var(--pad)}
}

/* section headers used across the editorial sections */
.gallery-section__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:1.75rem;flex-wrap:wrap}
.gallery-section__head h2{margin-bottom:.35rem}
.gallery-section__head p{color:var(--muted);max-width:52ch}

/* two-column (education & people) and three-column (community) */
.gallery-2col,.gallery-3col{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:640px){.gallery-2col{grid-template-columns:1fr 1fr}.gallery-3col{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.gallery-3col{grid-template-columns:repeat(3,1fr)}}
.gallery-3col .gphoto{aspect-ratio:4/3}
.gallery-2col figcaption,.gallery-3col figcaption{margin-top:.8rem}
.gallery-2col figcaption strong,.gallery-3col figcaption strong{display:block;font-size:.98rem;margin-bottom:.2rem}
.gallery-2col figcaption span,.gallery-3col figcaption span{font-size:.85rem;color:var(--muted)}

/* education & people — smaller, card-framed photos rather than full-bleed giants */
.gallery-2col{max-width:920px;margin-inline:auto}
.gallery-2col figure{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:.65rem;box-shadow:var(--shadow-xs);transition:box-shadow .2s}
.gallery-2col figure:hover{box-shadow:var(--shadow-md)}
.gallery-2col .gphoto{aspect-ratio:16/10;border-radius:calc(var(--radius) - .35rem)}
.gallery-2col figcaption{padding:0 .2rem}

/* in public life — modest, card-framed trio, same scale as education & people */
.gallery-editorial{display:grid;gap:20px;grid-template-columns:1fr;max-width:1000px;margin-inline:auto}
@media (min-width:640px){.gallery-editorial{grid-template-columns:repeat(3,1fr)}}
.gallery-editorial .gphoto{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:.55rem;box-shadow:var(--shadow-xs);transition:box-shadow .2s;
  aspect-ratio:4/3;height:auto}
.gallery-editorial .gphoto:hover{box-shadow:var(--shadow-md)}
.gallery-editorial .gphoto img{border-radius:calc(var(--radius) - .35rem)}

/* mobile: tighten rhythm and relax ratios that get too letterboxed on a narrow screen */
@media (max-width:640px){
  .gallery-hero{gap:1.5rem}
  .gallery-hero__media{aspect-ratio:4/3}
  .gallery-section__head{gap:.5rem 1.5rem;margin-bottom:1.35rem}
  .gallery-section__head .arrow-link{margin-top:.15rem}
  .gallery-2col,.gallery-3col,.gallery-editorial{gap:14px}
  .gallery-closing{margin-top:clamp(2rem,7vw,3.5rem)}
}

/* closing band */
.gallery-closing{position:relative;overflow:hidden;margin-top:var(--sp-section)}
.gallery-closing img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.gallery-closing__overlay{position:absolute;inset:0;
  background:linear-gradient(100deg,var(--green) 0%,rgba(5,50,38,.82) 32%,rgba(5,50,38,.2) 68%,transparent 88%)}
.gallery-closing__content{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:.9rem;max-width:600px}
.gallery-closing__content h2{color:#fff}
.gallery-closing__content p{color:#dbe8e1}
.gallery-closing__content .btn{margin-top:.4rem;align-self:flex-start}
@media (max-width:680px){
  .gallery-closing img{aspect-ratio:3/4}
  .gallery-closing__overlay{background:linear-gradient(0deg,var(--green) 15%,rgba(5,50,38,.55) 55%,transparent 85%)}
  .gallery-closing__content{max-width:none;justify-content:flex-end;padding-bottom:2.5rem}
}

/* ---------- CTA band (voter enrolment) ---------- */
.cta-band{background:var(--bg);border-block:1px solid var(--line);position:relative;overflow:hidden}
.cta-band__glow{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:340px;height:340px;
  max-width:60%;border-radius:50%;background:radial-gradient(closest-side,rgba(232,137,34,.14),transparent 72%);
  pointer-events:none;z-index:0}
.cta-band__inner{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
  padding-block:clamp(2.5rem,6vw,4rem);position:relative;z-index:1}
.cta-band__content{display:flex;align-items:center;gap:1.15rem;flex:1 1 320px}
.cta-band__content .icon-badge{margin-bottom:0;flex:none}
.cta-band h2{max-width:20ch;margin:0}
.cta-band p{color:var(--muted);margin-top:.4rem;max-width:44ch}
.icon-badge--lg{width:56px;height:56px;border-radius:14px}
.icon-badge--lg svg{width:27px;height:27px}

/* ---------- Definition list / timeline / note (interior pages) ---------- */
.deflist{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media (max-width:860px){.deflist{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.deflist{grid-template-columns:1fr}}
.deflist>div{background:var(--surface);padding:1.1rem 1.25rem;transition:background-color .18s}
.deflist>div:hover{background:var(--green-050)}
.deflist dt{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:.35rem}
.deflist dd{font-size:.95rem;font-weight:600;color:var(--ink)}

.timeline{border-top:1px solid var(--line)}
.timeline__row{display:grid;grid-template-columns:96px 1fr;gap:1.25rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
@media (max-width:560px){.timeline__row{grid-template-columns:1fr;gap:.3rem}}
.timeline__year{font-weight:800;color:var(--saffron-700);font-size:.9rem}
.timeline__row h4{font-size:1rem;margin-bottom:.2rem}
.timeline__row p{font-size:.88rem;color:var(--muted)}

.quote{border-left:3px solid var(--saffron);padding-left:1.15rem}
.quote p{font-size:clamp(1.05rem,.95rem + .8vw,1.35rem);font-weight:600;color:var(--ink);line-height:1.5}
.quote cite{display:block;margin-top:.7rem;font-style:normal;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- Vision page closing quote (editorial, centred) ---------- */
.vision-closing .container{max-width:56ch;text-align:center;display:flex;flex-direction:column;
  align-items:center}
.vision-closing__mark{font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.5rem,2.5rem + 4vw,5.5rem);
  line-height:1;color:var(--saffron);opacity:.55;margin-bottom:clamp(-1.5rem,-1vw,-.75rem)}
.vision-closing blockquote{border:0;padding:0}
.vision-closing blockquote p{font-size:clamp(1.3rem,1.05rem + 1.2vw,1.85rem);font-weight:700;
  color:var(--ink);line-height:1.42}
.vision-closing blockquote cite{display:block;margin-top:1.1rem;font-style:normal;font-size:.76rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700)}
.vision-closing__rule{display:block;width:2.25rem;height:2px;background:var(--saffron);margin:1.85rem 0}

.note{border-left:3px solid var(--saffron);background:var(--saffron-050);border-radius:0 8px 8px 0;
  padding:.9rem 1.15rem;font-size:.9rem;color:var(--ink);max-width:72ch}

.pill{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);background:var(--green-050);padding:.3rem .6rem;border-radius:999px;margin-bottom:.7rem}

/* ---------- Contact page ---------- */
.contact-card{display:flex;gap:1rem;align-items:flex-start}
.contact-card .ico{width:42px;height:42px;border-radius:10px;background:var(--green-050);color:var(--green);
  display:grid;place-items:center;flex:none}
.contact-card .ico svg{width:20px;height:20px}
.contact-card h3{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem}
.contact-card p{font-size:1rem;color:var(--ink);margin:0;line-height:1.5}
.contact-card a{color:var(--ink);font-weight:600}
.contact-card a:hover{color:var(--green)}
.map-frame{width:100%;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-xs);background:var(--green-050)}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
@media (min-width:860px){.map-frame{aspect-ratio:auto;height:100%;min-height:420px}}

/* office section: contact details + map — map lands close to ~45% width, stacks on mobile */
.office-grid{display:grid;gap:2rem}
@media (min-width:900px){.office-grid{grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:stretch}}

/* ---------- Real photograph frame (thin border, subtle shadow) ---------- */
.photo-frame{display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);object-fit:cover}
.photo-frame[data-ratio="wide"]{aspect-ratio:16/10}
.photo-frame[data-ratio="portrait"]{aspect-ratio:4/5}
.photo-frame[data-ratio="square"]{aspect-ratio:1/1}
.photo-frame[data-ratio="3-2"]{aspect-ratio:3/2}

/* real photo inside a news card (card itself supplies the frame) */
.news-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.news-card:hover img{transform:scale(1.08)}

/* ---------- Page intro (interior) ---------- */
.page-intro{background:var(--bg);border-bottom:1px solid var(--line)}
.page-intro .container{padding-block:clamp(2.25rem,6vw,3.75rem)}

/* photo-backdrop variant (About page) */
.page-intro--photo{position:relative;overflow:hidden}
.page-intro--photo__bg{position:absolute;inset:-24px;z-index:0;pointer-events:none;
  background:url("../img/about-image.webp") center 28% / cover no-repeat;
  filter:blur(2px) saturate(1);opacity:.62;transform:scale(1.05)}
.page-intro--photo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,var(--green-050) 26%,rgba(234,243,238,.42) 52%,rgba(234,243,238,.08) 100%)}
.page-intro--photo .container{position:relative;z-index:1}
@media (max-width:700px){
  .page-intro--photo__bg{opacity:.5}
  .page-intro--photo::after{background:linear-gradient(180deg,rgba(234,243,238,.5),rgba(234,243,238,.15) 75%)}
}
/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:.35rem}
.field label,.field>span{font-size:.8rem;font-weight:600;color:var(--ink)}
.input{width:100%;padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);font:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-050)}
textarea.input{min-height:130px;resize:vertical}
.radio-row{display:flex;flex-wrap:wrap;gap:.75rem 1.15rem;margin-top:.25rem}
.radio-row label{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:500}
.form-2col{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media (max-width:520px){.form-2col{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#aab3ac}
.site-footer a{color:#d8ddd9;transition:color .15s}
.site-footer a:hover{color:#fff}
.site-footer__grid{display:grid;gap:2rem 2rem;grid-template-columns:1.15fr repeat(3,.6fr) 1.4fr;
  padding-block:clamp(2.25rem,4.5vw,3.25rem)}
.site-footer__grid > *{min-width:0}
@media (max-width:1200px){.site-footer__grid{grid-template-columns:1.15fr repeat(3,1fr)}
  .footer-follow{grid-column:1/-1}}
@media (max-width:860px){.site-footer__grid{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .footer-follow{grid-column:1/-1}}
@media (max-width:520px){.site-footer__grid{grid-template-columns:1fr;gap:1.75rem}
  .footer-col--compact-hide{display:none}}

.site-footer .brand__mark{width:44px;height:44px;font-size:.95rem}
.site-footer .brand__name{color:#fff;font-size:1.2rem;text-transform:uppercase;letter-spacing:.03em}
.site-footer .brand__sub{color:#8d968f;font-size:.66rem;letter-spacing:.14em;white-space:normal}
.site-footer__brand p{font-size:.86rem;line-height:1.75;margin-top:1.1rem;max-width:38ch;color:#98a19b}

.site-footer h4{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  margin-bottom:.9rem}
.site-footer ul{display:grid;gap:.6rem;font-size:.89rem}

/* social links — plain text abbreviations */
.socials{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1rem}

/* footer variant, tighter tracking, on the dark background */
.site-footer .socials{gap:.6rem;margin-top:1.35rem}

.social-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);color:#d8ddd9;flex:none;transition:background .18s,color .18s,transform .18s}
.social-ico svg{width:17px;height:17px}
.social-ico:hover{background:var(--saffron);color:#fff;transform:translateY(-2px)}

.footer-follow p{font-size:.86rem;line-height:1.6;color:#98a19b;margin-bottom:.85rem}
.footer-fb-embed{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:#fff;width:300px;height:230px;max-width:100%;line-height:0}
.footer-fb-embed iframe{width:100%!important;height:100%!important;display:block}
.footer-follow__cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:.75rem;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--saffron)}
.footer-follow__cta svg{width:14px;height:14px}

.footer-contact a{overflow-wrap:anywhere}

/* clear divider between stacked sections once the grid collapses to one column */
@media (max-width:520px){
  .site-footer__grid > *{border-top:1px solid rgba(255,255,255,.14);padding-top:2rem}
  .site-footer__grid > *:first-child{border-top:0;padding-top:0}
}

.site-footer__bottom{border-top:1px solid rgba(255,255,255,.14);font-size:.78rem;color:#8d968f}
.site-footer__bottom .container{padding-block:1.1rem}

/* ---------- Checklist (icon + text rows, e.g. eligibility / documents) ---------- */
.check-list{display:grid;gap:.6rem;list-style:none}
.check-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;color:var(--ink)}
.check-list svg{flex:none;width:18px;height:18px;margin-top:.1rem;color:var(--green)}

/* ---------- Enrolment steps (connected numbered flow) ---------- */
.enrol-steps{display:flex;align-items:flex-start;gap:.25rem;flex-wrap:wrap}
.enrol-step{flex:1 1 180px;min-width:160px;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 .75rem}
.enrol-step__num{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--green);color:#fff;font-weight:800;font-size:1.15rem;margin-bottom:1rem;flex:none;
  box-shadow:0 8px 18px -8px rgba(7,91,69,.5)}
.enrol-step h4{font-size:1rem;margin-bottom:.35rem}
.enrol-step p{font-size:.85rem;color:var(--muted);margin:0}
.enrol-step__arrow{flex:none;align-self:center;color:var(--saffron);opacity:.7;margin-top:26px}
.enrol-step__arrow svg{width:22px;height:22px;display:block}
@media (max-width:820px){
  .enrol-steps{flex-direction:column;gap:0}
  .enrol-step{flex-direction:row;align-items:flex-start;text-align:left;padding:1.1rem 0;gap:1.1rem;
    border-top:1px solid var(--line)}
  .enrol-step:first-child{border-top:0}
  .enrol-step__num{margin-bottom:0}
  .enrol-step__arrow{display:none}
}

/* ---------- Generic grid + panel (interior pages) ---------- */
.grid--2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* fixed 3-up grid — for card sets whose count doesn't divide evenly into an
   auto-fit row (avoids a lone stray card on its own half-empty row) */
.grid--fixed3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.grid--fixed3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.grid--fixed3{grid-template-columns:1fr}}

.panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.25rem);display:grid;gap:1.25rem;align-items:center}
@media (min-width:760px){.panel--split{grid-template-columns:1.6fr auto}}
.panel--saffron{background:var(--saffron-050)}
.panel h2,.panel h3{margin-bottom:.35rem}
.panel p{color:var(--muted)}
.panel__actions{display:flex;flex-wrap:wrap;gap:.6rem}

.fignote{font-size:.84rem;color:var(--muted);margin-top:.6rem}
.fignote strong{color:var(--ink)}

/* ---------- Bio hero (About page) ---------- */
.bio-hero{background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.bio-hero__inner{position:relative;z-index:1;display:grid;gap:1.5rem;
  padding:clamp(2.25rem,6vw,3.75rem) 0 clamp(2.5rem,6vw,3.5rem)}
.bio-hero h1{margin:.7rem 0 1.1rem;font-size:clamp(1.9rem,1.3rem + 2.8vw,3rem);line-height:1.1}
.bio-hero__intro{color:var(--muted);max-width:54ch}
.bio-hero__cta{margin-top:1.5rem}
.bio-hero__portrait{max-width:340px;width:100%;margin:.5rem auto 0}
@media (min-width:860px){
  .bio-hero__inner{grid-template-columns:1.15fr .85fr;column-gap:clamp(2rem,5vw,3.5rem);align-items:end}
  .bio-hero__portrait{max-width:100%;margin:0}
}

/* ---------- Education timeline (vertical) ---------- */
.edu-timeline{position:relative;display:grid;gap:1.75rem;padding-left:1.85rem;margin:0;list-style:none}
.edu-timeline::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1.5px;background:var(--line)}
.edu-timeline__item{position:relative}
.edu-timeline__item::before{content:"";position:absolute;left:-1.85rem;top:.3rem;width:10px;height:10px;
  border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-050)}
.edu-timeline__item h4{font-size:1rem;margin-bottom:.25rem}
.edu-timeline__item p{font-size:.88rem;color:var(--muted);margin:0}

/* ---------- Horizontal timeline (scrolls on narrow screens) ---------- */
.h-timeline-wrap{position:relative}
.h-timeline{display:flex;overflow-x:auto;gap:0;padding:2.1rem 1.5rem 1.25rem .25rem;margin:0 -.25rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);
          mask-image:linear-gradient(to right,#000 88%,transparent 100%)}
.h-timeline::-webkit-scrollbar{height:5px}
.h-timeline::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.h-timeline__item{position:relative;flex:0 0 auto;width:192px;padding:0 1rem;scroll-snap-align:start}
.h-timeline__item::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;
  background:linear-gradient(90deg,rgba(7,91,69,.05),rgba(7,91,69,.22) 15%,rgba(7,91,69,.22) 85%,rgba(7,91,69,.05))}
.h-timeline__item:first-child::before{left:50%}
.h-timeline__item:last-child::before{right:50%}
.h-timeline__dot{position:relative;z-index:1;width:13px;height:13px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--green-050);
  margin:0 auto 1rem;display:block}
.h-timeline__year{font-size:.76rem;font-weight:800;letter-spacing:.05em;color:var(--saffron-700);
  text-align:center;margin-bottom:.3rem}
.h-timeline__item h4{font-size:.94rem;text-align:center;margin-bottom:.25rem}
.h-timeline__item p{font-size:.79rem;color:var(--muted);text-align:center;margin:0}
.h-timeline-hint{font-size:.76rem;color:var(--muted);text-align:right;margin-top:-.5rem}
.h-timeline-hint svg{width:14px;height:14px;vertical-align:-2px}

/* mobile: horizontal scroll-snap doesn't work well on narrow phones (items get
   cropped mid-scroll, easy to miss content) — switch to a proper vertical
   timeline instead, dot + connecting rail on the left, text stacked to the right */
@media (max-width:700px){
  .h-timeline-hint{display:none}
  .h-timeline{display:block;overflow-x:visible;padding:.25rem 0 0;margin:0;
    -webkit-mask-image:none;mask-image:none}
  .h-timeline__item{position:relative;width:auto;display:grid;
    grid-template-columns:24px 1fr;column-gap:1rem;padding:0 0 1.75rem;scroll-snap-align:none}
  .h-timeline__item::before{content:"";position:absolute;left:11px;right:auto;top:24px;
    bottom:-2px;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(7,91,69,.28),rgba(7,91,69,.1))}
  .h-timeline__item:first-child::before{left:11px}
  .h-timeline__item:last-child::before{display:none}
  .h-timeline__dot{grid-column:1;grid-row:1/4;align-self:start;margin:.3rem 0 0}
  .h-timeline__year{grid-column:2;text-align:left}
  .h-timeline__item h4{grid-column:2;text-align:left}
  .h-timeline__item p{grid-column:2;text-align:left}
}

/* ---------- Vertical numbered step flow (paired with an image in a split) ---------- */
.mini-steps{display:flex;flex-direction:column;gap:1.35rem;position:relative}
.mini-steps::before{content:"";position:absolute;left:17px;top:6px;bottom:6px;width:2px;background:var(--line)}
.mini-step{display:flex;gap:1rem;position:relative}
.mini-step__num{position:relative;z-index:1;flex:none;width:36px;height:36px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.mini-step__label{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--saffron-700);margin-bottom:.15rem}
.mini-step h4{font-size:.95rem;margin-bottom:.2rem}
.mini-step p{font-size:.85rem;color:var(--muted);margin:0}

/* ---------- Large editorial year numeral ---------- */
.year-feature__num{font-size:clamp(4.5rem,3rem + 9vw,8.5rem);font-weight:800;line-height:.82;
  color:#a9d3c0;letter-spacing:-.02em;margin-bottom:.4rem}
.year-feature__label{margin-bottom:1rem}

/* ---------- What drives the journey (4-col, no cards) ---------- */
.drives-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem 1.5rem}
@media (max-width:820px){.drives-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.drives-grid{grid-template-columns:1fr}}
.drive-item{border-top:2px solid var(--green-050);padding-top:1rem}
.drive-item .ico{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
  background:var(--green-050);color:var(--green);margin-bottom:.7rem}
.drive-item .ico svg{width:19px;height:19px}
.drive-item h4{font-size:1rem;margin-bottom:.3rem}
.drive-item p{font-size:.86rem;color:var(--muted);margin:0}

/* ---------- Final CTA band with faded photo ---------- */
.cta-photo{position:relative;overflow:hidden;background:var(--green-050)}
.cta-photo__bg{position:absolute;inset:-20px;z-index:0;pointer-events:none;
  background:url("../img/bg.avif") center 30% / cover no-repeat;filter:blur(4px);opacity:.24}
.cta-photo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(234,243,238,.7),rgba(234,243,238,.94))}
.cta-photo__accent{position:absolute;right:-6%;bottom:-10%;width:44%;max-width:320px;z-index:0;
  opacity:.5;pointer-events:none}
.cta-photo__inner{position:relative;z-index:1;text-align:center;max-width:620px;margin-inline:auto}
.cta-photo h2{margin:.8rem 0 1.5rem}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-visible{opacity:1;transform:none}
/* real photos inside a reveal block ease in a beat after the text, with a gentle scale */
.reveal .photo-frame,.reveal .news-card img{
  opacity:0;transform:scale(.97);transition:opacity .6s ease .12s,transform .6s ease .12s}
.reveal.is-visible .photo-frame,.reveal.is-visible .news-card img{opacity:1;transform:none}

/* text blocks slide in from the left; pairs with .reveal (fade-up) on the media beside it */
.reveal-left{opacity:0;transform:translateX(-38px);transition:opacity .6s ease,transform .6s ease}
.reveal-left.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .reveal .photo-frame,.reveal .news-card img{opacity:1;transform:none;transition:none}
  .reveal-left{opacity:1;transform:none;transition:none}
}

/* ---------- Campaign Marquee Ticker ---------- */
.campaign-marquee {
  background: linear-gradient(90deg, var(--saffron) 0%, #fff 50%, var(--green) 100%);
  color: var(--navy);
  padding: .5rem 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.campaign-marquee--green {
  background: linear-gradient(90deg, var(--saffron) 0%, #fff 50%, var(--green) 100%);
  color: var(--navy);
}
.campaign-marquee__inner {
  display: flex;
  white-space: nowrap;
  animation: marquee-scroll 25s linear infinite;
}
.campaign-marquee__inner:hover {
  animation-play-state: paused;
}
.campaign-marquee span {
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.campaign-marquee span::after {
  content: '•';
  color: var(--saffron-700);
  font-size: 1.15rem;
  line-height: 1;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.brand__logo { width: 50px; height: auto; object-fit: contain; }
.site-footer .brand__logo { width: 60px; height: auto; }