:root{
  /* --- brand -----------------------------------------------------------
     Navy is the foundation, ivory carries the page, saffron is an accent and
     gold is for detail. The proportion matters more than the values: a party
     site that is mostly orange reads as an advertisement. */
  --navy:#10233F;
  --navy-deep:#0A1A30;
  --navy-2:#17304F;        /* raised panel on navy */
  --navy-3:#22456F;
  --saffron:#E87522;       /* the accent — graphics, CTAs, on-navy text */
  --saffron-lite:#F2A05C;  /* accent text on navy */
  --saffron-deep:#A34A07;  /* accent text on ivory — 5.2:1 */
  --gold:#B38A45;          /* premium detail: rules, small marks */
  --gold-lite:#D9B877;
  --green:#0F7A55;
  --green-lite:#4CC49A;

  /* --- surfaces --- */
  --paper:#FBF9F4;         /* soft ivory — the page */
  --paper-2:#F7F3EA;       /* warm ivory — banded sections */
  --paper-3:#EFE9DB;
  --white:#FFFFFF;

  /* --- ink --- */
  --ink:#202733;           /* charcoal */
  --ink-dim:rgba(32,39,51,.74);
  --ink-mute:rgba(32,39,51,.66);
  --rule:rgba(32,39,51,.14);
  --rule-2:rgba(32,39,51,.28);

  /* --- semantic (light is the default) --- */
  --fg:var(--ink);
  --fg-dim:var(--ink-dim);
  --fg-mute:var(--ink-mute);
  --bd:var(--rule);
  --bd-2:var(--rule-2);
  --surface:var(--white);
  --accent:var(--saffron-deep);
  --accent-soft:rgba(232,117,34,.12);

  /* --- type --- */
  --sans:'Inter','Noto Sans Devanagari',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Manrope','Inter','Noto Sans Devanagari',system-ui,sans-serif;
  --serif:'Noto Serif Devanagari',Georgia,'Times New Roman',serif;
  --dev:'Noto Sans Devanagari','Inter',system-ui,sans-serif;
  --dev-serif:'Noto Serif Devanagari','Noto Sans Devanagari',Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- measure --- */
  --maxw:1240px;
  --gut:32px;
  --sec:clamp(72px,8vw,116px);
  --sec-s:clamp(48px,5.5vw,76px);
  --ease:cubic-bezier(.22,1,.36,1);
  --r:3px;
}

.dark{
  background:var(--navy);
  --fg:#EEF3F9;
  --fg-dim:rgba(238,243,249,.76);
  --fg-mute:rgba(238,243,249,.6);
  --bd:rgba(238,243,249,.16);
  --bd-2:rgba(238,243,249,.3);
  --surface:var(--navy-2);
  --accent:var(--saffron-lite);
  --accent-soft:rgba(242,160,92,.16);
  color:var(--fg);
}
/* `.light` predates this system and marked the exception. Light is now the
   rule, so it means "the warm neutral band" and every old usage still reads. */
.light{background:var(--paper-2);color:var(--ink)}
.paper{background:var(--paper);color:var(--ink)}

/* ============ BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--fg);
  font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--saffron);color:#0B1A2E}
svg{display:block}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.tri{height:4px;width:100%;background:linear-gradient(90deg,var(--saffron) 0 33.33%,var(--white) 33.33% 66.66%,var(--green) 66.66% 100%)}
.tri-sm{height:3px;width:56px;background:linear-gradient(90deg,var(--saffron) 0 33.33%,var(--ink) 33.33% 66.66%,var(--green) 66.66% 100%)}
.dark .tri-sm{background:linear-gradient(90deg,var(--saffron) 0 33.33%,#EEF3F9 33.33% 66.66%,var(--green-lite) 66.66% 100%)}

/* ============ TYPE ============
   Sentence case, not the all-caps of the previous design: institutions read as
   institutions, not as posters. Uppercase is reserved for eyebrows and labels.
   Sizes are fluid; the Devanagari overrides at the bottom of this file bring
   them down, because a headline set for Latin is far too large in Devanagari.  */
h1,h2,h3,h4,.disp{
  font-family:var(--display);font-weight:700;color:var(--fg);
  line-height:1.06;letter-spacing:-.021em;text-wrap:balance;
}
h1{font-size:clamp(36px,5.6vw,68px)}
h2{font-size:clamp(29px,4vw,48px)}
h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.012em;line-height:1.2}
h4{font-size:17px;letter-spacing:-.005em}
p{text-wrap:pretty}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--fg-dim)}
.dev{font-family:var(--dev)}

.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}

/* ============ HEADER ============
   A solid ivory bar, always. The previous header floated transparently over the
   hero and needed a whole second set of colours for that state; a fixed ivory
   bar is calmer, reads as institutional rather than cinematic, and removes an
   entire class of contrast bug. */
header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:var(--paper-2);border-bottom:1px solid var(--rule);
  transition:box-shadow .3s var(--ease);
}
header.solid{box-shadow:0 1px 14px rgba(16,35,63,.07)}
.hdr{display:flex;align-items:center;gap:26px;height:92px}
.hdr>.btn,.hdr .lang,.hdr .brand{flex:none}

.brand{display:flex;align-items:center;gap:14px;flex:none}
/* The mark is circular; the box is square so a round logo sits correctly and a
   replacement file needs no CSS change. */
.brand img{width:72px;height:72px;object-fit:contain;flex:none;background:none;border-radius:0;font-size:0;color:transparent}
.brand-t{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.brand-t b{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.015em;color:var(--navy)}
.brand-t .hn{font-family:var(--dev);font-size:15px;font-weight:600;color:var(--navy);margin-top:1px}
.brand-t .tag-line{font-family:var(--dev);font-size:12px;letter-spacing:.02em;color:var(--saffron-deep);margin-top:3px;font-weight:600;text-transform:none}

/* The footer reuses the brand block on navy, where the navy wordmark would be
   invisible. Anything dark inherits the light treatment. */
footer .brand-t b,.dark .brand-t b{color:#fff;font-size:17px}
footer .brand-t .hn,.dark .brand-t .hn{color:#fff}
footer .brand-t .tag-line,.dark .brand-t .tag-line{color:var(--saffron-lite)}
footer .brand img{width:58px;height:58px}

nav{display:flex;gap:2px;margin-left:auto;align-items:center}
nav>.btn{display:none}
nav a{
  font-size:14px;font-weight:500;letter-spacing:0;
  padding:8px 12px;border-radius:var(--r);color:var(--ink-dim);position:relative;
  transition:color .2s;white-space:nowrap;
}
nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--saffron);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
nav a:hover,nav a.on{color:var(--navy)}
nav a.on{font-weight:600}
nav a:hover::after,nav a.on::after{transform:scaleX(1)}

.navgrp{position:relative}
.navgrp>button{
  background:none;border:0;cursor:pointer;font-size:14px;font-weight:500;color:var(--ink-dim);
  padding:8px 12px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r);
}
.navgrp>button:hover,.navgrp[data-open="1"]>button{color:var(--navy)}
.navgrp>button svg{width:11px;height:11px;transition:transform .25s var(--ease)}
.navgrp[data-open="1"]>button svg{transform:rotate(180deg)}
.navmenu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:210px;background:var(--white);
  border:1px solid var(--rule);box-shadow:0 14px 38px rgba(16,35,63,.14);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s var(--ease),visibility .2s;
}
.navgrp[data-open="1"] .navmenu{opacity:1;visibility:visible;transform:none}
.navmenu a{display:block;padding:10px 12px;font-size:14px;color:var(--ink-dim);white-space:nowrap}
.navmenu a::after{display:none}
.navmenu a:hover{background:var(--paper-2);color:var(--navy)}

.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger i{display:block;width:22px;height:2px;background:var(--navy);margin:5px 0;transition:.28s var(--ease)}
.burger.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.005em;
  padding:13px 24px;border:0;cursor:pointer;position:relative;border-radius:var(--r);
  transition:background .25s,color .25s,box-shadow .25s,transform .25s var(--ease);
  max-width:100%;white-space:normal;text-align:center;
}
.btn span{position:relative;z-index:2}
.btn:disabled{opacity:.55;cursor:wait}
/* Deep navy on saffron, not white. White on #E87522 measures 3.0:1 — below the
   4.5:1 a button label needs — while navy on the same saffron measures 5.25:1
   and still reads unmistakably as the saffron call to action. */
.btn-s{background:var(--saffron);color:var(--navy-deep)}
.btn-s:hover{background:#D2650F;transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--bd-2)}
.btn-o:hover{box-shadow:inset 0 0 0 1.5px var(--fg);transform:translateY(-1px)}
.btn-d{background:var(--navy);color:#EEF3F9}
.btn-d:hover{background:var(--navy-3);transform:translateY(-1px)}
.dark .btn-d{background:#EEF3F9;color:var(--navy)}
.dark .btn-d:hover{background:#fff}

/* ============ PAGE SYSTEM ============ */
.page{display:none}
.page.live{display:block}

/* ============ HERO ============
   One field, not two boxes. The statement sits on flat navy on the left; the
   photographic panel is anchored to the right edge of the viewport and faded
   into that navy by .hero-scrim, so the join is a gradient rather than an edge.

   There is no photograph in the panel: the party has not supplied one and a
   hero is not a place to invent one, so .hero-motif shows a line drawing of an
   arch instead. A drawing is honest about being a drawing. Adding a real
   photograph later is one <img> inside .hero-media — see "Adding the hero
   photograph" in README.md; .hero-media>img already sizes and crops it. */
.hero{
  position:relative;overflow:hidden;background:var(--navy);color:#F4F1EA;
  padding:calc(92px + clamp(18px,2.4vw,34px)) 0 clamp(26px,3.2vw,42px);
  min-height:clamp(520px,60vh,600px);display:flex;align-items:center;
  --fg:#F4F1EA;--fg-dim:rgba(244,241,234,.82);--fg-mute:rgba(244,241,234,.58);
  --bd:rgba(244,241,234,.18);--bd-2:rgba(244,241,234,.34);--accent:var(--saffron-lite);
}
/* the flat navy field the text sits on */
.hero-bg{position:absolute;inset:0;z-index:0;background:var(--navy)}
.hero-bg::before{
  content:"";position:absolute;inset:0;opacity:.34;
  background-image:
    repeating-linear-gradient(90deg,rgba(244,241,234,.05) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(0deg,rgba(244,241,234,.04) 0 1px,transparent 1px 96px);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(50% 44% at 4% 96%,rgba(179,138,69,.13),transparent 60%);
}

/* ---- the photographic panel ---- */
.hero-media{position:absolute;inset:0 0 0 42%;z-index:1}
.hero-media>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
}
.hero-motif{
  position:absolute;inset:0;color:rgba(222,186,124,.95);overflow:hidden;
  background-color:var(--navy-deep);
  background-image:linear-gradient(180deg,rgba(16,35,63,.5),var(--navy-deep) 96%);
}
/* The light behind the arch. Without it the drawing reads as a wireframe;
   with it the panel has a horizon and the arch stands in front of something. */
.hero-sun{
  position:absolute;left:50%;bottom:-16%;width:min(96%,660px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(240,150,66,.62) 0%,rgba(232,117,34,.3) 38%,rgba(232,117,34,.08) 60%,transparent 74%);
}
.hero-motif svg{
  position:absolute;left:50%;bottom:0;width:min(84%,520px);transform:translateX(-50%);
}
/* Fades the picture into the flat navy on its left. It has to be dense where
   the sentence sits and nearly clear on the right, or the panel goes muddy. */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--navy) 0%,rgba(16,35,63,.96) 12%,rgba(16,35,63,.66) 32%,rgba(16,35,63,.2) 60%,rgba(10,26,48,.06) 100%),
    linear-gradient(0deg,rgba(10,26,48,.34),transparent 42%);
}

.hero-in{position:relative;z-index:3;width:100%}
.hero-grid{display:grid;grid-template-columns:45fr 55fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero-grid>*{min-width:0}

.hero h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(36px,4.6vw,60px);line-height:1.05;letter-spacing:-.018em;
  margin:14px 0 0;color:#fff;max-width:15ch;
  text-shadow:0 1px 24px rgba(6,16,30,.4);
}
.hero .sub{
  font-family:var(--dev-serif);font-weight:600;
  font-size:clamp(21px,2.3vw,30px);letter-spacing:0;margin-top:12px;
  line-height:1.4;color:var(--saffron-lite);max-width:22ch;
}
.hero .rule{width:64px;height:3px;background:var(--saffron);margin:20px 0 18px}
.hero p.lede{max-width:46ch;color:var(--fg-dim);font-size:clamp(15.5px,1.05vw,17px)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* the quotation card, set over the picture */
.hero-art{position:relative;display:flex;justify-content:flex-end;align-items:flex-end;align-self:stretch;padding-bottom:clamp(6px,2vh,26px)}
.hero-quote{
  background:var(--paper-2);color:var(--navy);
  padding:20px 26px;max-width:300px;box-shadow:0 18px 46px rgba(6,16,30,.42);
  border-left:3px solid var(--saffron);
}
.hero-quote b{display:block;font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.01em}
.hero-quote span{display:block;font-family:var(--dev-serif);font-size:18px;font-weight:600;color:var(--saffron-deep);margin-top:5px}


.rise>*{opacity:0;transform:translateY(16px);animation:rise .75s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.rise>*:nth-child(1){animation-delay:.04s}
.rise>*:nth-child(2){animation-delay:.12s}
.rise>*:nth-child(3){animation-delay:.2s}
.rise>*:nth-child(4){animation-delay:.28s}
.rise>*:nth-child(5){animation-delay:.36s}
.rise>*:nth-child(6){animation-delay:.44s}

/* ============ PILLAR STRIP ============ */
.pstrip{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.pstrip-in{display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch}
.ps{
  padding:30px 20px;text-align:center;border-right:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:inherit;transition:background .25s var(--ease);
}
.ps:last-child{border-right:0}
.ps:hover{background:var(--paper-3)}
.ps svg{width:30px;height:30px;color:var(--gold);stroke-width:1.4}
.ps b{font-family:var(--display);font-size:15.5px;font-weight:700;color:var(--navy);letter-spacing:-.008em}
.ps i{font-family:var(--dev);font-style:normal;font-size:14px;color:var(--saffron-deep);font-weight:600}
.ps em{font-style:normal;font-size:13px;color:var(--fg-mute);line-height:1.45;max-width:24ch}

/* ============ SECTIONS ============ */
section{position:relative}
.pad{padding:var(--sec) 0}
.pad-s{padding:var(--sec-s) 0}
.sec-head{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;margin-bottom:56px}
.sec-head h2{margin-top:16px}
.sec-head p{color:var(--fg-dim);max-width:48ch;font-size:17px}

/* ---- split intro: text + visual ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.split>*{min-width:0}
.split-fig{position:relative;aspect-ratio:4/3;background:var(--paper-3);overflow:hidden}
.split-fig img{width:100%;height:100%;object-fit:cover}
.split-fig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-size:12.5px;
  background:linear-gradient(180deg,transparent,rgba(11,37,69,.82));color:#EEF3F9;
}
.split ul{list-style:none;margin-top:26px;display:grid;gap:14px}
.split ul li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:16px;color:var(--fg-dim)}
.split ul li::before{
  content:"";width:9px;height:9px;margin-top:8px;background:var(--saffron);flex:none;
}

/* ---- crest panel ----
   Stands where the "Who we are" photograph will go. It is not a placeholder
   pretending to be a picture: it is a designed panel in the party's own
   colours and lettering, and it is meant to stay presentable if no photograph
   is ever supplied. Concentric rules, not a chakra — the chakra must never be
   mistaken for the party's mark. */
.crest{
  position:relative;overflow:hidden;aspect-ratio:4/3;
  /* background-color as well as the gradient: the lettering is ivory, and if
     the gradient ever fails to paint it must still land on navy. */
  background-color:var(--navy);
  background-image:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 100%);
  display:grid;place-items:center;isolation:isolate;
}
.crest::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,rgba(244,241,234,.05) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,rgba(244,241,234,.04) 0 1px,transparent 1px 72px);
}
.crest::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--saffron) 0 33.33%,#F4F1EA 33.33% 66.66%,#1C7A3E 66.66%);
}
.crest-motif{
  position:absolute;width:min(96%,460px);aspect-ratio:1;
  color:rgba(179,138,69,.34);z-index:0;
}
.crest-in{position:relative;display:grid;place-items:center;width:100%;height:100%}
.crest-word{position:relative;z-index:1;text-align:center;padding:20px}
.crest-word b{
  display:block;font-family:var(--serif);font-weight:700;color:#F4F1EA;
  font-size:clamp(46px,7vw,74px);line-height:1;letter-spacing:.06em;
}
.crest-word span{
  display:block;font-family:var(--dev-serif);font-weight:600;
  font-size:clamp(15px,1.6vw,19px);color:#F4F1EA;margin-top:14px;
}
.crest-word i{
  display:block;font-family:var(--dev);font-style:normal;font-weight:600;
  font-size:clamp(12px,1.2vw,14px);color:var(--saffron-lite);margin-top:10px;letter-spacing:.02em;
}

/* ---- placeholder figure: honest about being empty ----
   Shown where an initiative has been published without a cover photograph.
   It still says so plainly — the party does not pretend to photographs it does
   not have — but a dashed grey box reads as a broken image, so it is dressed
   as a panel in the same system as everything else. */
.ph-fig{
  position:relative;overflow:hidden;
  display:grid;place-items:center;color:var(--ink-mute);
  background-color:var(--paper-3);
  background-image:
    radial-gradient(72% 60% at 50% 42%,rgba(179,138,69,.13),transparent 70%),
    repeating-linear-gradient(90deg,rgba(32,39,51,.045) 0 1px,transparent 1px 56px);
  aspect-ratio:4/3;text-align:center;padding:24px;border:1px solid var(--rule-2);
}
.ph-fig::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--saffron) 0 33.33%,var(--rule-2) 33.33% 66.66%,#1C7A3E 66.66%);
  opacity:.55;
}
.dark .ph-fig{background-color:var(--navy-2);border-color:var(--bd);color:var(--fg-mute)}
.ph-fig span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
html[lang="hi"] .ph-fig span{text-transform:none;letter-spacing:.03em;font-size:14px}

/* ============ STATS / ACTIVITY DASHBOARD ============
   Values come from the data layer. A figure the party has not supplied renders
   as an em-dash, never as an invented number. */
/* Auto-fits however many tiles the dashboard is given — five today, more when
   the party records more. A fixed column count left a half-empty last row. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.stat{padding:36px 26px;border-right:1px solid var(--bd)}
.stat:last-child{border-right:0}
.stat b{
  display:block;font-family:var(--display);font-size:clamp(34px,4.4vw,54px);font-weight:800;
  color:var(--navy);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.dark .stat b{color:var(--saffron-lite)}
.stat b.pending{color:var(--fg-mute);font-weight:600}
.stat span{display:block;margin-top:10px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-mute);font-weight:600}
.stat i{display:block;font-style:normal;margin-top:6px;font-size:13px;color:var(--fg-mute)}

/* ============ AREAS OF FOCUS ============ */
.focus{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd)}
.fc{
  background:var(--paper);padding:30px 26px 28px;display:flex;flex-direction:column;
  position:relative;transition:background .3s var(--ease);min-height:200px;
}
.fc:hover{background:var(--white)}
/* Editorial rhythm rather than a uniform grid: four of the eight cards take
   double width, which is exactly twelve units across four columns — three full
   rows with no orphan cell. */
.fc:nth-child(1),.fc:nth-child(4),.fc:nth-child(5),.fc:nth-child(8){grid-column:span 2}
.fc .ic{width:26px;height:26px;color:var(--saffron-deep);margin-bottom:20px;stroke-width:1.5}
.fc h2{font-size:19px;letter-spacing:-.008em}
.fc p{font-size:15px;color:var(--fg-dim);margin-top:9px;flex:1}
.fc .more{
  margin-top:18px;font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--saffron-deep);
  display:inline-flex;align-items:center;gap:6px;
}
.fc .more::after{content:"→";transition:transform .25s var(--ease)}
.fc:hover .more::after{transform:translateX(4px)}
.fc::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--saffron);transition:width .45s var(--ease)}
.fc:hover::before{width:100%}

/* ============ WORK / INITIATIVE CARDS ============ */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.wk{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--bd)}
.dark .wk{background:var(--navy-2)}
.wk-img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.wk-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.wk:hover .wk-img img{transform:scale(1.04)}
.wk-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.wk h2{font-size:20px;margin-top:12px}
.wk h2 a{border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.wk h2 a:hover{color:var(--saffron-deep);border-bottom-color:rgba(240,120,24,.5)}
.wk p{font-size:15px;color:var(--fg-dim);margin-top:10px;flex:1}
.wk-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--fg-mute);margin-top:14px}
.wk-meta span{display:inline-flex;align-items:center;gap:5px}

/* ============ INITIATIVES ============ */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.filters button{
  background:transparent;border:1px solid var(--bd-2);border-radius:20px;cursor:pointer;
  padding:8px 15px;font-size:13.5px;font-weight:500;color:var(--fg-dim);
  transition:border-color .2s,background .2s,color .2s;
}
.filters button:hover{border-color:var(--fg);color:var(--fg)}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

.crumbs{margin-bottom:22px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--fg-mute)}
.crumbs li{display:flex;align-items:center;gap:8px;min-width:0}
.crumbs li+li::before{content:"/";color:var(--fg-mute);opacity:.6}
.crumbs a{color:var(--fg-dim);transition:color .2s}
.crumbs a:hover{color:var(--accent)}
/* The current page is the long one; it truncates rather than wrapping the trail
   onto three lines on a phone. */
.crumbs li[aria-current] span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch;display:block}
@media(max-width:640px){ .crumbs li[aria-current] span{max-width:22ch} }
.in-cover{margin:0 0 44px;overflow:hidden;background:var(--paper-3);aspect-ratio:16/9}
.in-cover img{width:100%;height:100%;object-fit:cover}
.in-cover.ph-fig{aspect-ratio:16/9}
.in-where{font-size:13px;color:var(--fg-mute);display:inline-flex;align-items:center;gap:6px}
.in-where::before{content:"";width:4px;height:4px;background:var(--saffron);flex:none}
.in-body{max-width:70ch}
.in-sec{margin-bottom:44px}
.in-sec:last-child{margin-bottom:0}
.in-sec h2{
  font-size:clamp(21px,2.3vw,27px);letter-spacing:-.012em;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--bd);
}
.in-list{list-style:none;display:grid;gap:12px}
.in-list li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:16.5px;color:var(--fg-dim);line-height:1.6}
.in-list li::before{content:"";width:8px;height:8px;margin-top:9px;background:var(--saffron);flex:none}
.in-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.in-gal figure{margin:0;background:var(--paper-3);border:1px solid var(--bd);overflow:hidden}
.in-gal .ph-fig{aspect-ratio:4/3;border:0}
.in-gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.in-gal figcaption{padding:10px 12px;font-size:13px;color:var(--fg-dim);line-height:1.45}
.in-video{position:relative;aspect-ratio:16/9;background:var(--navy);border:1px solid var(--bd)}
.in-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
html[lang="hi"] .in-list li{font-size:17px}
@media(max-width:860px){
  .in-gal{grid-template-columns:1fr 1fr}
  .in-cover{margin-bottom:32px}
  .in-sec{margin-bottom:34px}
}
@media(max-width:640px){
  .in-gal{grid-template-columns:1fr}
  .filters{gap:6px}
  .filters button{padding:7px 13px;font-size:13px}
}

/* ============ WORK SECTION (title beside the cards) ============ */
.worklede{display:grid;grid-template-columns:.82fr 2.18fr;gap:clamp(30px,4vw,56px);align-items:start}
.worklede>*{min-width:0}
.worklede h2{font-family:var(--serif);font-weight:700;letter-spacing:-.018em}
.worklede .hn{font-family:var(--dev-serif);font-weight:600;font-size:clamp(21px,2.3vw,29px);color:var(--saffron-deep);margin-top:4px;line-height:1.35}
.worklede p{color:var(--fg-dim);font-size:16px;margin-top:20px;max-width:34ch}
.worklede .work{grid-template-columns:repeat(3,1fr)}

/* section headings with a Hindi line underneath, as the reference sets them */
.h2pair h2{font-family:var(--serif);font-weight:700;letter-spacing:-.018em}
.h2pair .hn{font-family:var(--dev-serif);font-weight:600;font-size:clamp(19px,2vw,26px);color:var(--saffron-deep);margin-top:2px;line-height:1.35}
.h2pair .rule{width:56px;height:3px;background:var(--saffron);margin-top:16px}

/* ============ THE THREE-COLUMN BAND ============
   Updates, events and Jan Samvad share one row on desktop, which is what stops
   the page reading as a stack of full-width slabs. */
.band{display:grid;grid-template-columns:1fr 1fr .92fr;gap:0;border-top:1px solid var(--bd)}
.band>*{min-width:0;padding:clamp(30px,3vw,44px)}
.band>*+*{border-left:1px solid var(--bd)}
.band h2{font-family:var(--serif);font-size:clamp(24px,2.4vw,31px);font-weight:700;letter-spacing:-.015em}
.band .hn{font-family:var(--dev-serif);font-weight:600;font-size:19px;color:var(--saffron-deep);margin-top:1px}
.band .more{display:inline-block;margin-top:22px;font-size:13.5px;font-weight:600;color:var(--accent)}
.band .more:hover{text-decoration:underline;text-underline-offset:4px}

/* compact update rows */
.ulist{margin-top:22px;display:grid}
.urow{display:grid;grid-template-columns:1fr;gap:4px;padding:15px 0;border-top:1px solid var(--bd)}
.urow:first-child{border-top:0;padding-top:4px}
.urow a{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.35;color:var(--fg);letter-spacing:-.008em}
.urow a:hover{color:var(--accent)}
.urow time{font-size:12.5px;color:var(--fg-mute)}

/* compact event rows */
.elist{margin-top:22px;display:grid;gap:10px}
.erow{
  display:grid;grid-template-columns:56px 1fr 14px;gap:14px;align-items:center;
  padding:13px 14px;background:var(--white);border:1px solid var(--bd);border-radius:var(--r);
  transition:border-color .25s,transform .25s var(--ease);
}
.erow:hover{border-color:var(--saffron);transform:translateX(2px)}
.edate{text-align:center;line-height:1}
.edate b{display:block;font-family:var(--display);font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.03em}
.edate span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-deep);font-weight:700;margin-top:3px}
html[lang="hi"] .edate span{text-transform:none;letter-spacing:.02em;font-size:12px}
/* Both are spans inside a grid cell, so they need to be blocks or the venue
   runs straight on from the title with no space. */
.erow .et{display:block;font-weight:600;font-size:15px;line-height:1.35;color:var(--fg)}
.erow .ew{display:block;font-size:12.5px;color:var(--fg-mute);margin-top:3px}
.erow .ea{color:var(--fg-mute);font-size:15px}

/* the Jan Samvad panel */
.samvad{
  background:var(--navy);color:#F4F1EA;position:relative;overflow:hidden;
  --fg:#F4F1EA;--fg-dim:rgba(244,241,234,.8);--fg-mute:rgba(244,241,234,.58);
  --bd:rgba(244,241,234,.18);--accent:var(--saffron-lite);
}
.samvad::after{
  content:"";position:absolute;right:-70px;bottom:-70px;width:260px;height:260px;border-radius:50%;
  border:1px solid rgba(244,241,234,.12);pointer-events:none;
}
.samvad h2{color:#fff}
.samvad .hn{color:var(--saffron-lite)}
.samvad p{color:var(--fg-dim);font-size:15.5px;margin-top:16px;max-width:34ch}
.samvad .btn{margin-top:24px;position:relative;z-index:1}
.samvad blockquote{
  margin:28px 0 0;font-family:var(--dev-serif);font-weight:600;font-size:17px;
  color:rgba(244,241,234,.66);border-top:1px solid var(--bd);padding-top:18px;
}

/* ============ PARTICIPATION STRIP ============ */
.join{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.join-in{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(30px,3.4vw,48px) 0}
.join-in>*{min-width:0}
.join .mark{width:56px;height:56px;color:var(--saffron);flex:none}
.join h2{font-family:var(--serif);font-size:clamp(22px,2.3vw,30px);font-weight:700;letter-spacing:-.015em}
.join p{color:var(--fg-dim);font-size:15.5px;margin-top:6px;max-width:52ch}
/* A tricolour mark, small and set as a detail rather than a backdrop. */
.tri-brush{display:flex;flex-direction:column;gap:5px;width:62px;flex:none}
.tri-brush i{height:5px;border-radius:3px;display:block}
.tri-brush i:nth-child(1){background:var(--saffron);width:100%}
.tri-brush i:nth-child(2){background:var(--gold);width:78%}
.tri-brush i:nth-child(3){background:var(--green);width:92%}

/* ============ EDITORIAL LIST (approach) ============ */
.appr{border-top:1px solid var(--bd)}
.ap{
  display:grid;grid-template-columns:78px 1fr 1.15fr;gap:32px;align-items:start;
  padding:32px 0;border-bottom:1px solid var(--bd);transition:padding-left .35s var(--ease);
}
.ap:hover{padding-left:12px}
.ap .num{font-family:var(--display);font-size:34px;font-weight:800;color:var(--saffron-deep);line-height:1;letter-spacing:-.03em}
.ap h3{font-size:24px}
.ap .hi{font-family:var(--dev);font-size:16px;color:var(--saffron-deep);font-weight:500;margin-top:5px}
.ap p{color:var(--fg-dim);font-size:16px}

/* ============ PILLARS ============ */
.pillars{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd)}
.pil{background:var(--paper);padding:34px 28px 30px;position:relative;grid-column:span 2;transition:background .35s var(--ease)}
.dark .pil{background:var(--navy)}
.dark .pil:hover{background:var(--navy-2)}
.pil:nth-child(4),.pil:nth-child(5),.pil.wide{grid-column:span 3}
.pil:hover{background:var(--white)}
.pil .n{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--saffron-deep)}
.dark .pil .n{color:var(--saffron-lite)}
.pil h2{font-size:22px;margin:14px 0 5px}
.pil .hi{font-family:var(--dev);font-size:17px;color:var(--saffron-deep);font-weight:500;margin-bottom:10px}
.dark .pil .hi{color:var(--saffron-lite)}
.pil p{font-size:15.5px;color:var(--fg-dim)}
.pil::before{content:"";position:absolute;left:0;top:0;width:0;height:3px;background:var(--saffron);transition:width .45s var(--ease)}
.pil:hover::before{width:100%}

/* ============ LEADERS ============ */
.leads{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.lead{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--bd)}
.dark .lead{background:var(--navy-2)}
.lead .ph{aspect-ratio:4/3;background:var(--paper-3);display:grid;place-items:center;position:relative}
.dark .lead .ph{background:var(--navy-3)}
.lead .ph em{font-size:12px;letter-spacing:.15em;color:var(--fg-mute);font-style:normal;text-transform:uppercase}
html[lang="hi"] .lead .ph em{text-transform:none;letter-spacing:.03em;font-size:14px}
.lead .body{padding:26px 26px 30px}
.tag{
  display:inline-block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  padding:6px 11px;background:var(--accent-soft);color:var(--accent);margin-bottom:14px;border-radius:var(--r);
}
.lead h2{font-size:26px}
.lead .hi{font-family:var(--dev);color:var(--fg-dim);font-size:16px;margin:11px 0;font-weight:400}
.lead p{color:var(--fg-dim);font-size:15.5px}

/* ============ INVOLVE CARDS ============ */
.inv{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd)}
.iv{background:var(--paper);padding:32px 26px;transition:background .3s var(--ease)}
.dark .iv{background:var(--navy)}
.iv:hover{background:var(--white)}
.dark .iv:hover{background:var(--navy-2)}
.iv .ic{width:28px;height:28px;margin-bottom:18px;color:var(--saffron-deep);stroke-width:1.5}
.dark .iv .ic{color:var(--saffron-lite)}
.iv h3{font-size:19px}
.iv p{font-size:15px;color:var(--fg-dim);margin-top:8px}

/* ============ FORMS ============ */
.formwrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px);align-items:start}
.field{margin-bottom:20px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--fg)}
.field .req{color:var(--saffron-deep);margin-left:3px}
.dark .field .req{color:var(--saffron-lite)}
.field .hint{font-size:13px;color:var(--fg-mute);margin-top:-3px;margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 14px;background:var(--white);border:1.5px solid var(--bd-2);
  border-radius:var(--r);transition:border-color .2s,box-shadow .2s;font-size:16px;color:var(--ink);
}
.dark .field input,.dark .field textarea,.dark .field select{
  background:rgba(255,255,255,.05);border-color:var(--bd);color:#EEF3F9;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.dark .field input::placeholder,.dark .field textarea::placeholder{color:rgba(238,243,249,.45)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--saffron);box-shadow:0 0 0 3px rgba(240,120,24,.16);
}
.field.bad input,.field.bad textarea,.field.bad select{border-color:#C2381F}
.field .err{display:none;font-size:13.5px;color:#C2381F;margin-top:6px}
.dark .field .err{color:#FF9E8A}
.field.bad .err{display:block}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ============ DONATE ============ */
.amts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0}
.amt{
  padding:18px 12px;text-align:center;font-family:var(--display);font-size:22px;font-weight:700;
  border:1.5px solid var(--bd-2);cursor:pointer;transition:.25s var(--ease);background:transparent;
  border-radius:var(--r);color:var(--fg);letter-spacing:-.02em;
}
.amt:hover{border-color:var(--fg)}
.amt.sel{background:var(--saffron);color:#20130A;border-color:var(--saffron)}
.note{font-size:13.5px;color:var(--fg-dim);border-left:3px solid var(--green);padding-left:14px;margin-top:20px}
.dark .note{border-left-color:var(--green-lite)}

/* ============ GALLERY ============ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gi{
  aspect-ratio:1;background:var(--paper-3);display:grid;place-items:center;
  position:relative;overflow:hidden;transition:.35s var(--ease);border:1px solid var(--bd);
}
.dark .gi{background:var(--navy-2)}
.gi:nth-child(1),.gi:nth-child(8){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gi em{font-size:11.5px;letter-spacing:.15em;color:var(--fg-mute);font-style:normal;position:relative;text-transform:uppercase}
html[lang="hi"] .gi em{text-transform:none;letter-spacing:.03em;font-size:13px}

/* ============ MEDIA GALLERY ============
   A column-count masonry rather than a grid: photographs from the field arrive
   in whatever shape the phone took them, and forcing every one into the same
   box crops the subject out of half of them. Columns keep the aspect ratio and
   still tile without gaps. */
.mgrid{column-count:3;column-gap:14px}
.mfig{
  break-inside:avoid;margin:0 0 14px;position:relative;display:block;width:100%;
  background:var(--paper-3);border:1px solid var(--bd);cursor:zoom-in;padding:0;
  text-align:left;overflow:hidden;
}
.dark .mfig{background:var(--navy-2)}
.mfig img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.mfig:hover img{transform:scale(1.03)}
.mfig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(11,37,69,.9));
  color:#fff;font-size:13.5px;line-height:1.45;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease);
}
.mfig:hover figcaption,.mfig:focus-visible figcaption{opacity:1;transform:none}
.mfig .mcat{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--saffron-lite);margin-bottom:4px}
html[lang="hi"] .mfig .mcat{text-transform:none;letter-spacing:.03em;font-size:13px}
/* A caption that only appears on hover is invisible on a touch screen. */
@media(hover:none){
  .mfig figcaption{position:static;opacity:1;transform:none;background:none;color:var(--fg);padding:10px 12px 12px}
  .mfig .mcat{color:var(--accent)}
}
@media(max-width:900px){ .mgrid{column-count:2} }
@media(max-width:560px){ .mgrid{column-count:1} }

/* ============ LIGHTBOX ============
   One dialog, shared by the gallery page and an initiative's own gallery. */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%}
.lb::backdrop{background:rgba(6,20,38,.94)}
.lb-in{
  position:fixed;inset:0;display:grid;grid-template-rows:1fr auto;
  align-items:center;justify-items:center;padding:56px 68px 24px;
}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb figcaption{color:#EEF3F9;text-align:center;max-width:70ch;padding:16px 0 4px;font-size:15px;line-height:1.5}
.lb figcaption b{display:block;font-weight:600;color:#fff;margin-bottom:4px}
.lb figcaption a{color:var(--saffron-lite);text-decoration:underline;text-underline-offset:3px}
.lb-count{display:block;margin-top:8px;font-size:12.5px;color:rgba(238,243,249,.6)}
.lb button{
  position:absolute;background:rgba(238,243,249,.1);border:1px solid rgba(238,243,249,.24);
  color:#EEF3F9;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;transition:background .2s,border-color .2s;
}
.lb button:hover{background:rgba(238,243,249,.2);border-color:rgba(238,243,249,.5)}
.lb button svg{width:18px;height:18px}
.lb-x{top:16px;right:16px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}
@media(max-width:640px){
  .lb-in{padding:56px 12px 20px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
  .lb button{width:40px;height:40px}
  .lb figcaption{font-size:14px}
}

/* ============ CONTACT LIST ============ */
.cinfo{display:grid;gap:0}
.ci{padding:20px 0;border-bottom:1px solid var(--bd)}
.ci b{display:block;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:7px}
.ci p,.ci a{font-size:17px;color:var(--fg)}
.ci a:hover{color:var(--accent)}
html[lang="hi"] .ci b{text-transform:none;letter-spacing:.03em;font-size:14px}

/* ============ QUOTE BAND ============ */
.quote{background:var(--navy);color:#EEF3F9;padding:var(--sec-s) 0;text-align:center}
.quote p{font-family:var(--dev-serif);font-weight:600;font-size:clamp(28px,4.6vw,54px);line-height:1.2;max-width:20ch;margin:0 auto;color:#fff}
.quote small{display:block;margin-top:20px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--saffron-lite)}
html[lang="hi"] .quote small{text-transform:none;letter-spacing:.03em;font-size:15px}

/* ============ FOOTER ============ */
footer{background:var(--navy);color:#EEF3F9;padding:0 0 30px;
  --fg:#EEF3F9;--fg-dim:rgba(238,243,249,.72);--fg-mute:rgba(238,243,249,.54);--bd:rgba(238,243,249,.16);}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:44px;padding:64px 0 44px}
/* The footer column headings are h2, not h4: they follow the page's own h2s and
   a jump to h4 skips a level for anyone navigating by headings. The sizes below
   are the ones they have always rendered at — the level changed, not the
   design. */
.fgrid h2{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-lite);margin-bottom:16px;font-weight:700}
html[lang="hi"] .fgrid h2{text-transform:none;letter-spacing:.03em;font-size:14px}
.fgrid a{display:block;padding:5px 0;color:var(--fg-dim);font-size:15px;transition:color .2s}
.fgrid a:hover{color:#fff}
.fbrand p{color:var(--fg-dim);font-size:15px;margin-top:14px;max-width:36ch}
.socials{display:flex;gap:9px;margin-top:20px}
.socials a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--bd);transition:.25s var(--ease);padding:0;border-radius:var(--r)}
.socials a:hover{background:var(--saffron);border-color:var(--saffron);color:#20130A}
.socials svg{width:15px;height:15px}
.fbot{display:flex;justify-content:space-between;gap:20px;padding-top:24px;border-top:1px solid var(--bd);font-size:13px;color:var(--fg-mute);flex-wrap:wrap}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============ UPDATES FEED ============ */
.news-note{color:var(--fg-dim);font-size:16px;padding:24px 0;border-top:1px solid var(--bd)}
.post{padding:28px 0;border-top:1px solid var(--bd);transition:padding-left .35s var(--ease)}
.post:last-child{border-bottom:1px solid var(--bd)}
.post:hover{padding-left:12px}
.post-meta{display:flex;align-items:center;gap:13px;margin-bottom:11px;flex-wrap:wrap}
.post-cat{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  padding:5px 10px;background:var(--accent-soft);color:var(--accent);border-radius:var(--r);
}
.post-meta time{font-size:12.5px;color:var(--fg-mute);letter-spacing:.02em}
.post h3{font-size:clamp(21px,2.6vw,29px);max-width:28ch}
.post p{margin-top:11px;color:var(--fg-dim);font-size:16.5px;max-width:70ch}
html[lang="hi"] .post-cat{text-transform:none;letter-spacing:.03em;font-size:13px}
.post h3 a{color:inherit;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.post h3 a:hover,.post h3 a:focus-visible{color:var(--saffron-deep);border-bottom-color:rgba(240,120,24,.5)}
.dark .post h3 a:hover{color:var(--saffron-lite)}
.post-more{display:inline-block;margin-top:13px;font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--accent)}
.post-more:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:560px){ .post{padding:22px 0} .post:hover{padding-left:0} }

/* ============ ONE UPDATE ============ */
.post-back{margin-bottom:24px}
.post-back a{font-size:13px;font-weight:600;color:var(--fg-mute);transition:color .25s}
.post-back a:hover{color:var(--accent)}
.post-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.post-head time{font-size:12.5px;color:var(--fg-mute)}
.post-lede{margin-top:24px;max-width:62ch;font-size:20px;line-height:1.6;color:var(--fg)}
.post-body{display:block;max-width:68ch;font-size:17.5px;line-height:1.78;color:var(--fg-dim)}
.post-body p{margin:0 0 22px}
.post-body p:last-child{margin-bottom:0}
.post-body strong{color:var(--fg)}
html[lang="hi"] .post-lede,html[lang="hi"] .post-body{line-height:1.85}
.post-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px;padding-top:30px;border-top:1px solid var(--bd)}

/* ============ JAN SAMVAD ============ */
.sb{display:flex;gap:36px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sb>*{min-width:0}
.track{margin-top:28px;padding-top:24px;border-top:1px solid var(--bd)}
.track h3{font-size:19px;margin-bottom:14px}
#tk_out{margin-top:14px}
.tk-msg,.tk-bad{font-size:14.5px;line-height:1.5}
.tk-msg{color:var(--fg-dim)}
.tk-bad{color:#C2381F}
.dark .tk-bad{color:#FF9E8A}
.tk-card{border:1px solid var(--bd);background:var(--surface);padding:18px}
.tk-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.tk-ref{font-family:var(--mono);font-size:12.5px;color:var(--fg-mute)}
.tk-pill{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:20px;white-space:nowrap}
.tk-ok{background:rgba(15,122,85,.14);color:#0B6044}
.tk-work{background:rgba(27,74,122,.14);color:#1B4A7A}
.tk-pill.tk-wait{background:rgba(180,83,10,.14);color:#8F4208}
.dark .tk-ok{background:rgba(76,196,154,.16);color:#6FD9B4}
.dark .tk-work{background:rgba(120,170,230,.16);color:#9CC4EE}
.dark .tk-pill.tk-wait{background:rgba(255,162,77,.16);color:#FFB877}
.tk-meta{font-size:14px;color:var(--fg-dim);line-height:1.55}
.tk-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--bd);font-size:15px;color:var(--fg)}
html[lang="hi"] .tk-pill{text-transform:none;letter-spacing:.03em;font-size:13px}

/* ---- Jan Samvad: three ways in ---- */
.jroutes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd)}
.jr{background:var(--paper);padding:30px 26px;display:flex;flex-direction:column;transition:background .3s var(--ease)}
.dark .jr{background:var(--navy)}
.jr:hover{background:var(--white)}
.dark .jr:hover{background:var(--navy-2)}
.jr .ic{width:28px;height:28px;color:var(--saffron-deep);margin-bottom:18px;stroke-width:1.5}
.dark .jr .ic{color:var(--saffron-lite)}
.jr h3{font-size:20px}
.jr p{font-size:15px;color:var(--fg-dim);margin-top:9px;flex:1}
.jr .btn{margin-top:20px;align-self:flex-start}

/* ---- Jan Samvad: category chips ---- */
.jcats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.jc{
  display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--bd);
  background:var(--surface);font-size:15px;font-weight:500;transition:.25s var(--ease);
  border-radius:var(--r);cursor:pointer;text-align:left;width:100%;
}
.jc:hover{border-color:var(--saffron);background:var(--white)}
.dark .jc:hover{background:var(--navy-3)}
.jc svg{width:22px;height:22px;color:var(--saffron-deep);flex:none;stroke-width:1.5}
.dark .jc svg{color:var(--saffron-lite)}

/* ---- status stepper ---- */
.steps{display:flex;gap:0;margin:22px 0 4px;flex-wrap:wrap}
.st{flex:1;min-width:92px;position:relative;padding-top:22px;font-size:12.5px;color:var(--fg-mute);text-align:center}
.st::before{content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--bd)}
.st::after{content:"";position:absolute;top:1px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--bd)}
.st.done{color:var(--fg)}
.st.done::before,.st.done::after{background:var(--green)}
.st.now{color:var(--fg);font-weight:700}
.st.now::after{background:var(--saffron);box-shadow:0 0 0 4px rgba(240,120,24,.2)}
.st:first-child::before{left:50%}
.st:last-child::before{right:50%}

/* ============ EVENTS ============ */
.ev{display:grid;grid-template-columns:88px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--bd);transition:padding-left .35s var(--ease)}
.ev:last-child{border-bottom:1px solid var(--bd)}
.ev:hover{padding-left:12px}
.ev>*{min-width:0}
.ev-date{text-align:center;border-right:1px solid var(--bd);padding-right:18px}
.ev-date b{display:block;font-family:var(--display);font-size:36px;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em}
.dark .ev-date b{color:var(--saffron-lite)}
.ev-date span{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:4px;font-weight:600;color:var(--fg-dim)}
.ev-date i{display:block;font-style:normal;font-size:12px;color:var(--fg-mute);margin-top:2px}
.ev-meta{display:flex;align-items:center;gap:13px;margin-bottom:9px;flex-wrap:wrap}
.ev-meta time{font-size:12.5px;color:var(--fg-mute)}
.ev h2{font-size:clamp(20px,2.4vw,27px);max-width:28ch}
.ev-where{margin-top:8px;font-size:14.5px;color:var(--accent);font-weight:600}
.ev p{margin-top:10px;color:var(--fg-dim);font-size:16px;max-width:66ch}
#pastwrap .ev-date b{color:var(--fg-mute)}
#pastwrap .ev{opacity:.76}
html[lang="hi"] .ev-date span{text-transform:none;letter-spacing:.03em;font-size:14px}

/* ============ SKELETON / EMPTY / ERROR ============ */
.sk{border-top:1px solid var(--bd);padding:28px 0}
.sk i{display:block;background:var(--bd);height:12px;border-radius:2px;animation:pulse 1.4s ease-in-out infinite}
.sk i+i{margin-top:10px}
.sk i:nth-child(1){width:22%;height:10px}
.sk i:nth-child(2){width:64%;height:22px;margin-top:14px}
.sk i:nth-child(3){width:88%}
.sk i:nth-child(4){width:52%}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:.9}}
.empty,.errbox{
  border:1px dashed var(--bd-2);padding:34px 28px;text-align:center;color:var(--fg-dim);font-size:16px;
  overflow:visible;white-space:normal;overflow-wrap:anywhere;max-width:100%;
}
.errbox{border-style:solid;border-color:rgba(194,56,31,.4)}
.empty h2,.errbox h2{font-size:19px;color:var(--fg);margin-bottom:8px;max-width:100%;overflow-wrap:anywhere;text-wrap:pretty}
.empty p,.errbox p{max-width:36ch;margin:0 auto;overflow-wrap:anywhere;white-space:normal}
.errbox .btn{margin-top:16px}
.band .empty{margin-top:16px;padding:18px 16px;text-align:left}
.band .empty p{margin:0;max-width:none}
.band .news-note{border-top:0;padding:14px 0 0;overflow-wrap:anywhere;white-space:normal}

/* ============ WHATSAPP ============ */
.wa{
  position:fixed;right:18px;bottom:18px;z-index:250;display:inline-flex;align-items:center;gap:10px;
  background:var(--green);color:#F3FFF9;padding:13px 18px;border-radius:40px;
  font-weight:600;font-size:15px;
  box-shadow:0 8px 24px rgba(11,37,69,.24);transition:transform .25s var(--ease),background .25s;
}
.wa:hover{transform:translateY(-2px);background:#0C6849}
.wa svg{width:20px;height:20px;flex:none}
@media print{ .wa{display:none} }

/* ============ 404 ============ */
.nf{min-height:74svh;display:flex;align-items:center;padding:160px 0 var(--sec-s)}
.nf h1{max-width:16ch}
.nf p{margin-top:18px;max-width:44ch;color:var(--fg-dim);font-size:18px}
.nf .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* ============ ACCESSIBILITY ============ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:400;background:var(--saffron);color:#20130A;
  padding:12px 20px;font-weight:700;border-radius:var(--r);
}
.skip:focus{left:8px;top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--saffron);outline-offset:3px;border-radius:var(--r);
}
.dark a:focus-visible,.hero a:focus-visible,footer a:focus-visible{outline-color:var(--saffron-lite)}
[hidden]{display:none!important}

/* ============ LANGUAGE TOGGLE ============ */
.lang{
  display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--rule);
  cursor:pointer;padding:7px 11px;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-dim);flex:none;border-radius:var(--r);transition:border-color .2s;
}
.lang:hover{border-color:var(--rule-2)}
.lang .l-sep{opacity:.35}
html[lang="en"] .lang .l-en,html[lang="hi"] .lang .l-hi{color:var(--saffron-deep)}
.nav-lang{display:none}

/* ============ DEVANAGARI ============
   A headline sized for Latin is far too large in Devanagari, and the script
   needs more leading, not less. Everything below exists so Hindi reads as
   typography rather than as a translation dropped into a Latin layout. */
html[lang="hi"] body{font-family:var(--dev)}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3,html[lang="hi"] h4,html[lang="hi"] .disp{
  font-family:var(--dev);letter-spacing:0;line-height:1.34;font-weight:600;
}
html[lang="hi"] h1{font-size:clamp(28px,4.3vw,52px)}
html[lang="hi"] h2{font-size:clamp(24px,3.2vw,38px)}
html[lang="hi"] h3{font-size:clamp(18px,1.9vw,22px);line-height:1.42}
html[lang="hi"] .hero h1{font-family:var(--dev-serif);font-size:clamp(30px,4.6vw,58px);line-height:1.26}
html[lang="hi"] .hero .sub{font-size:clamp(16px,1.7vw,20px);line-height:1.5}
html[lang="hi"] .lede,html[lang="hi"] p{line-height:1.8}
html[lang="hi"] .eyebrow,html[lang="hi"] .tag,html[lang="hi"] nav a,
html[lang="hi"] .stat span,html[lang="hi"] .field label{text-transform:none;letter-spacing:.03em}
html[lang="hi"] .eyebrow{font-size:14px}
html[lang="hi"] .stat span{font-size:14px}
html[lang="hi"] .btn{letter-spacing:0;font-family:var(--dev)}
html[lang="hi"] .tick-in span{text-transform:none;letter-spacing:.04em;font-size:14px}
html[lang="hi"] .fc .more{letter-spacing:0;font-size:14px}
html[lang="hi"] .post-more,html[lang="hi"] .post-back a{font-size:15px;letter-spacing:0}
html[lang="hi"] .wa{font-family:var(--dev)}
html[lang="hi"] .st{font-size:14px}
/* In Hindi the heading is already Hindi, so the Hindi sub-label beneath it just
   repeats it. The candidate quotes are real sentences, so they stay. */
html[lang="hi"] .ap .hi,html[lang="hi"] .pil .hi{display:none}
html[lang="hi"] .pil h2{margin-bottom:10px}
html[lang="hi"] .ap h3{margin-bottom:0}

/* Never let a long word or Devanagari cluster break the layout */
h1,h2,h3,h4,p,a,li,label,.hi,.brand-t span{overflow-wrap:break-word;word-break:normal}

/* ============ RESPONSIVE ============ */
/* The brand block now carries three lines — party name, Hindi name, tagline —
   so it is much wider than the old wordmark and the row stops fitting far
   higher up than it used to. Two tiers of tightening before the drawer. */
@media(max-width:1500px) and (min-width:1121px){
  .hdr{gap:16px}
  nav a{font-size:13px;padding:8px 9px}
  .navgrp>button{font-size:13px;padding:8px 9px}
  .brand-t b{font-size:17px}
  .brand-t .hn{font-size:13.5px}
  .brand-t .tag-line{font-size:11px}
  .brand img{width:56px;height:56px}
}
@media(max-width:1340px) and (min-width:1121px){
  .hdr{gap:10px}
  nav a{font-size:12.5px;padding:8px 6px}
  .navgrp>button{font-size:12.5px;padding:8px 6px}
  .hdr-cta{padding:11px 16px;font-size:13.5px;margin-left:6px!important}
  .lang{padding:6px 8px;font-size:12.5px}
  .brand-t b{font-size:15.5px}
  .brand-t .hn{font-size:12.5px}
  .brand-t .tag-line{font-size:10.5px}
  .brand img{width:50px;height:50px}
}
@media(max-width:1180px){
  .focus{grid-template-columns:repeat(3,1fr)}
  .fc:nth-child(1),.fc:nth-child(4),.fc:nth-child(5),.fc:nth-child(8){grid-column:span 1}
  .fc:nth-child(1){grid-column:span 3}
}
@media(max-width:1120px){
  /* The destinations plus a language toggle and a button stop fitting here.
     Hand over to the drawer rather than letting the row clip itself. */
  nav{
    position:fixed;inset:92px 0 auto;background:var(--paper-2);
    flex-direction:column;align-items:stretch;padding:20px var(--gut) 32px;gap:0;
    transform:translateY(-120%);transition:transform .42s var(--ease);
    border-bottom:1px solid var(--rule);box-shadow:0 18px 40px rgba(11,37,69,.1);
    max-height:calc(100svh - 92px);overflow-y:auto;
  }
  nav.open{transform:none}
  nav a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--rule);white-space:normal}
  nav a::after{display:none}
  nav>.btn{display:flex;margin-top:18px;justify-content:center;border-bottom:0}
  .navgrp{width:100%}
  .navgrp>button{padding:14px 0;font-size:16px;width:100%;justify-content:space-between;border-bottom:1px solid var(--rule)}
  .navmenu{
    position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    padding:0 0 0 14px;background:transparent;min-width:0;display:none;
  }
  .navgrp[data-open="1"] .navmenu{display:block}
  .navmenu a{padding:12px 0;border-bottom:1px solid var(--rule)}
  .burger{display:block}
  .hdr .btn.hdr-cta{display:none}
  .lang{display:none}
  .nav-lang{display:inline-flex;align-self:flex-start;margin-top:16px;font-size:15px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pil,.pil:nth-child(4),.pil:nth-child(5),.pil.wide{grid-column:span 1}
  .inv{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  .stat{border-bottom:1px solid var(--bd)}
  .work{grid-template-columns:repeat(2,1fr)}
  .jcats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1120px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  /* One column: the picture stops being a right-hand panel and becomes the
     backdrop for the whole section, with the scrim turned vertical so the
     statement still sits on a dark enough field. */
  .hero-media{inset:0}
  .hero-media>img{object-position:60% 40%}
  .hero-scrim{
    background:
      linear-gradient(180deg,rgba(10,26,48,.88) 0%,rgba(16,35,63,.7) 44%,rgba(10,26,48,.88) 100%),
      linear-gradient(90deg,rgba(16,35,63,.8) 0%,rgba(16,35,63,.4) 58%,rgba(10,26,48,.2) 100%);
  }
  .hero-motif svg{width:min(78%,480px);left:50%}
  .hero-sun{left:50%;width:min(74%,460px)}
  /* One column: the quotation card would sit under the statement repeating
     राष्ट्रहित सर्वोपरि, which is already the line beneath the headline. That
     is ~110px of the first screen spent on duplication, so it goes. */
  .hero-art{display:none}
  .hero h1{max-width:20ch}
  .band{grid-template-columns:1fr 1fr}
  .band>*:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--bd)}
  .worklede{grid-template-columns:1fr;gap:28px}
  .worklede .work{grid-template-columns:repeat(2,1fr)}
  /* Five pillars will not sit in one row here; two rows read better than five
     squeezed columns. */
  .pstrip-in{grid-template-columns:repeat(3,1fr)}
  .ps:nth-child(3){border-right:0}
  .ps:nth-child(-n+3){border-bottom:1px solid var(--rule)}
}
@media(max-width:860px){
  .sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}
  .split{grid-template-columns:1fr;gap:34px}
  .leads,.formwrap{grid-template-columns:1fr}
  .focus{grid-template-columns:repeat(2,1fr)}
  .fc:nth-child(1),.fc:nth-child(4),.fc:nth-child(5),.fc:nth-child(8){grid-column:span 1}
  .fc:nth-child(1){grid-column:span 2}
  .ap{grid-template-columns:52px 1fr;gap:18px}
  .ap .col3{grid-column:2}
  .gal{grid-template-columns:1fr 1fr}
  .amts{grid-template-columns:1fr 1fr}
  .jroutes{grid-template-columns:1fr}
  .hero{min-height:0;padding:110px 0 40px}
}
@media(max-width:860px){
  .join-in{grid-template-columns:1fr;gap:22px;text-align:left}
  .join .mark{width:44px;height:44px}
  .band{grid-template-columns:1fr}
  .band>*+*{border-left:0;border-top:1px solid var(--bd)}
  .band>*:nth-child(3){border-top:1px solid var(--bd)}
  .worklede .work{grid-template-columns:1fr}
  .samvad p{max-width:none}
  .hero-cta .btn{flex:1 1 160px}
}
@media(max-width:640px){
  :root{--gut:18px}
  .pillars,.inv,.work,.focus,.jcats{grid-template-columns:1fr}
  /* The pillar strip scrolls sideways rather than becoming five tall blocks —
     it stays one glanceable row, which is the point of it. */
  .pstrip-in{
    grid-template-columns:repeat(5,minmax(146px,1fr));
    overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .ps{scroll-snap-align:start;border-bottom:0!important;border-right:1px solid var(--rule)!important;padding:24px 14px}
  .ps:last-child{border-right:0!important}
  .hdr{height:74px;gap:10px;min-width:0}
  .brand{gap:10px;min-width:0;flex:1}
  nav{inset:74px 0 auto;max-height:calc(100svh - 74px)}
  .brand img{width:46px;height:46px}
  .brand-t b{font-size:15px;line-height:1.2;overflow-wrap:anywhere}
  .brand-t .hn{font-size:12.5px}
  .brand-t .tag-line{font-size:11px}
  .hero{padding:calc(74px + 22px) 0 32px;min-height:0}
  .hero h1{font-size:clamp(28px,9vw,40px);max-width:14ch}
  .hero .sub{font-size:clamp(18px,5.4vw,24px);max-width:none}
  .hero p.lede{font-size:16px}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%;flex:1 1 100%}
  .band>*{padding:22px 0}
  .band>*+*{padding-top:22px}
  .band h2{font-size:26px}
  .band .hn{font-size:17px}
  .band .more{margin-top:16px;padding:8px 0;font-size:14.5px}
  .empty,.errbox{padding:18px 16px;font-size:15px;text-align:left}
  .empty h2,.errbox h2{font-size:17px}
  .erow{grid-template-columns:48px 1fr 12px;gap:11px;padding:11px 12px}
  .fc:nth-child(1),.fc:nth-child(4),.fc:nth-child(5),.fc:nth-child(8){grid-column:span 1}
  .stats{grid-template-columns:1fr 1fr}
  .stat{border-right:1px solid var(--bd);padding:20px 16px}
  .stat:nth-child(2n){border-right:0}
  .stat:last-child{border-bottom:0;grid-column:1/-1}
  .f2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;padding:48px 0 34px}
  body{font-size:16px}
  .ap{grid-template-columns:40px 1fr;gap:14px;padding:24px 0}
  .ap .num{font-size:26px}
  .ap h3{font-size:21px}
  .pil,.iv,.fc,.jr{padding:26px 20px}
  .amts{grid-template-columns:1fr 1fr;gap:10px}
  .amt{font-size:19px;padding:15px 8px}
  .gal{gap:9px}
  .gi:nth-child(1),.gi:nth-child(8){grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .ev{grid-template-columns:58px 1fr;gap:14px;padding:22px 0}
  .ev:hover{padding-left:0}
  .ev-date{padding-right:12px}
  .ev-date b{font-size:26px}
  .ev-date span{font-size:11.5px}
  .post-lede{font-size:18px;margin-top:20px}
  .post-body{font-size:16.5px}
  .post-foot{margin-top:34px;padding-top:24px}
  .post-foot .btn{width:100%}
  .wa{right:14px;bottom:14px;padding:12px;gap:0}
  .wa span{display:none}
  .wa svg{width:24px;height:24px}
  .fbot{font-size:12px}
  .steps{gap:6px}
  .st{min-width:0;flex:1 1 40%}
  .samvad{padding:26px 20px}
  .band .samvad{padding:26px 20px}
  .samvad .btn{width:100%}
  .samvad blockquote{font-size:16px;margin-top:22px}
  .sb{flex-direction:column;align-items:stretch;gap:18px}
  .sb .btn{width:100%}
  .join-in{padding:28px 0}
  .pad{padding:56px 0}
  .pad-s{padding:40px 0}
}

/* The ticker animates forever. On a cheap Android that keeps the
   compositor awake in a background tab for no benefit at all. */
html.paused .tick-in{animation-play-state:paused}

/* At the narrowest widths the three-line brand plus the burger stops fitting.
   The tagline is the line that can go: it is repeated in the hero and again in
   the footer, so nothing is lost by dropping it from a 320px header. */
@media(max-width:400px){
  .hdr{gap:10px}
  .brand img{width:44px;height:44px}
  .brand-t b{font-size:14.5px;line-height:1.2}
  .brand-t .hn{font-size:12px}
  .brand-t .tag-line{display:none}
}
@media(max-width:340px){
  .brand-t .hn{display:none}
  .brand-t b{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}