/* ==========================================================================
   TNEB TPAS — Tamil Nadu Electricity Board Workers & Engineers United Union
   Design system + site styles
   Palette sampled from the union's own brand material (navy #164160,
   gold #FFDE58, emblem red #D71C24).
   ========================================================================== */

:root{
  /* Brand */
  --navy-950:#081D2B;
  --navy-900:#0C2739;
  --navy-800:#10344C;
  --navy:#164160;
  --navy-600:#1E5679;
  --navy-500:#2B6E96;
  --gold:#FFDE58;
  --gold-400:#FFD02E;
  --gold-deep:#C9971A;
  --red:#D71C24;
  --red-soft:#F6E2E2;
  --sky:#C3DFFF;
  --sky-soft:#EAF3FF;

  /* Neutrals */
  --paper:#F7F5EF;
  --paper-2:#EFEDE4;
  --white:#FFFFFF;
  --ink:#12212C;
  --ink-soft:#33475A;
  --slate:#5E7183;
  --line:#DCD8CB;
  --line-cool:#D6E1EA;

  /* Type */
  --display:"Archivo","Archivo Black",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --tamil:"Noto Sans Tamil","Latha",sans-serif;

  /* Space & shape */
  --wrap:1200px;
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --shadow-sm:0 1px 2px rgba(12,39,57,.06), 0 4px 12px rgba(12,39,57,.06);
  --shadow:0 2px 4px rgba(12,39,57,.06), 0 14px 40px rgba(12,39,57,.10);
  --shadow-lg:0 30px 70px rgba(12,39,57,.24);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--display);line-height:1.1;letter-spacing:-.018em;margin:0;font-weight:800}
p{margin:0}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}
/* --------------------------------------------------------------------------
   Tamil typography
   Tamil is written with vowel signs that sit above and below the base letter,
   and its glyphs must stay visually joined. Latin tracking and tight leading
   both break it, so every Tamil element resets them — the !important is
   deliberate: it has to beat the letter-spacing set on eyebrows, labels,
   badges and uppercase micro-type throughout the sheet.
   -------------------------------------------------------------------------- */
:lang(ta),[lang=ta]{font-family:var(--tamil)}
[lang=ta]{line-height:1.75;letter-spacing:normal !important;word-spacing:normal}

/* Headings need far more leading in Tamil or the vowel marks collide/clip */
h1[lang=ta],h2[lang=ta],h3[lang=ta],h4[lang=ta],h5[lang=ta],
[lang=ta] h1,[lang=ta] h2,[lang=ta] h3,[lang=ta] h4,[lang=ta] h5{
  line-height:1.45;letter-spacing:normal !important;padding-block:.06em;
}

/* Uppercasing does nothing in Tamil but the tracking that goes with it hurts */
.eyebrow[lang=ta],.role[lang=ta],.lbl[lang=ta],.news-date[lang=ta],
.hero-meta span[lang=ta],footer.site h5[lang=ta],.conf-facts dt[lang=ta],
.hero-board h3[lang=ta],.badge[lang=ta],.news-kind[lang=ta],.news-size[lang=ta]{
  letter-spacing:normal !important;text-transform:none;
}

:focus-visible{outline:3px solid var(--gold-400);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:var(--gold);
  padding:12px 20px;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Reusable bits ---------- */
.eyebrow{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-deep);flex:none}
.on-dark .eyebrow,.eyebrow.light{color:var(--gold)}
.on-dark .eyebrow::before,.eyebrow.light::before{background:var(--gold)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.01em;
  padding:13px 24px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--gold);color:var(--navy-900);box-shadow:0 6px 18px rgba(201,151,26,.35)}
.btn-primary:hover{background:var(--gold-400);transform:translateY(-2px);box-shadow:0 12px 28px rgba(201,151,26,.45)}
.btn-solid{background:var(--navy);color:var(--white)}
.btn-solid:hover{background:var(--navy-800);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-outline{border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--white);transform:translateY(-2px)}
.btn-outline-light{border-color:rgba(255,255,255,.5);color:var(--white)}
.btn-outline-light:hover{background:var(--white);color:var(--navy);border-color:var(--white);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:.84rem}
/* Login — quieter than the primary CTA it sits beside */
.btn-login{border-color:var(--line);color:var(--navy);background:var(--white)}
.btn-login:hover{border-color:var(--navy);background:var(--navy);color:var(--white);transform:translateY(-2px)}
.btn-login svg{width:15px;height:15px}

section{padding:clamp(60px,7vw,104px) 0;position:relative}
.sec-head{max-width:660px;margin-bottom:clamp(34px,4vw,56px)}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:14px 0 14px;font-weight:900}
/* Tamil section headings run taller — give them room instead of clipping */
.sec-head h2[lang=ta]{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-top:16px}
.hero h1[lang=ta]{font-size:clamp(1.55rem,3vw,2.3rem)}
.sec-head p{color:var(--slate);font-size:1.06rem}
.on-dark .sec-head h2{color:var(--white)}
.on-dark .sec-head p{color:#A9BCCE}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}

/* ==========================================================================
   Utility bar
   ========================================================================== */
.utility{background:var(--navy-950);color:#9DB3C6;font-size:.82rem;position:relative;z-index:60}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px;flex-wrap:wrap}
.utility a{color:#C3D3E1;transition:color .2s}
.utility a:hover{color:var(--gold)}
.u-left{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.u-left span{display:inline-flex;align-items:center;gap:8px}
.u-left svg{width:14px;height:14px;stroke:var(--gold);flex:none}
.u-right{display:flex;gap:16px;align-items:center}
.affil{display:inline-flex;align-items:center;gap:7px;font-weight:600;letter-spacing:.04em}
/* brand red is too dark on the navy bar — lift it for contrast */
.affil b{color:#F2545B;font-family:var(--display);letter-spacing:.08em}

.lang-toggle{display:inline-flex;border:1px solid #2A4359;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.04)}
.lang-toggle button{all:unset;cursor:pointer;padding:4px 13px;font-size:.78rem;font-weight:600;color:#93A9BD;transition:.2s;line-height:1.5}
.lang-toggle button:hover{color:var(--white)}
.lang-toggle button[aria-pressed=true]{background:var(--gold);color:var(--navy-900);font-weight:800}

/* ==========================================================================
   Header
   ========================================================================== */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(247,245,239,.90);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s,background .3s;
}
header.site.stuck{box-shadow:0 8px 30px rgba(12,39,57,.10);background:rgba(247,245,239,.97)}
.bar{display:flex;align-items:center;gap:10px;min-height:80px}
.bar nav.main{margin-right:6px}

.brand{display:flex;align-items:center;gap:14px;margin-right:auto;min-width:0}
/* Brand lockup mirrors the union's brochure masthead: bolt emblem, wordmark,
   gear emblem. Both emblems are sized the same so the pair reads as a set. */
.brand-marks{display:flex;align-items:center;gap:6px;flex:none}
.brand-marks img{width:38px;height:38px;object-fit:contain}
.brand-txt{min-width:0}
.brand-txt .wordmark{
  font-family:var(--display);font-weight:900;font-size:1.16rem;letter-spacing:-.02em;
  color:var(--navy);display:block;line-height:1.05;
}
.brand-txt .wordmark em{font-style:normal;color:var(--gold-deep)}
.brand-txt .ta{
  font-family:var(--tamil);font-weight:600;font-size:.68rem;color:var(--slate);
  display:block;line-height:1.45;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;
}
.brand-txt .en{font-size:.68rem;color:var(--slate);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;display:block;line-height:1.4}

nav.main{display:flex;gap:2px;align-items:center}
nav.main a{
  font-weight:600;font-size:.9rem;padding:9px 14px;border-radius:999px;color:var(--ink-soft);
  transition:background .2s,color .2s;position:relative;white-space:nowrap;
}
nav.main a:hover{background:var(--paper-2);color:var(--navy)}
nav.main a.active{color:var(--navy);background:var(--paper-2)}
nav.main a.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:2px;width:16px;height:2px;background:var(--gold-deep);border-radius:2px}

/* `all:unset` must come first — it resets every property after it, so putting
   it last would wipe the display:none and show the hamburger on desktop. */
.menu-toggle{all:unset;display:none;cursor:pointer;padding:9px;border-radius:10px;line-height:0}
.menu-toggle:hover{background:var(--paper-2)}
.menu-toggle svg{width:26px;height:26px;stroke:var(--navy);stroke-width:2.2}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:100;background:var(--navy-950);color:var(--white);
  display:flex;flex-direction:column;padding:26px 26px 40px;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  overflow-y:auto;
}
.drawer.open{opacity:1;visibility:visible;transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.drawer-top img{width:40px;height:40px}
.drawer .close{all:unset;cursor:pointer;padding:10px;line-height:0;border-radius:10px}
.drawer .close svg{width:28px;height:28px;stroke:var(--white);stroke-width:2.2}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  font-family:var(--display);font-weight:700;font-size:1.32rem;padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:space-between;
}
.drawer nav a::after{content:"→";color:var(--gold);font-size:1rem;opacity:.7}
.drawer .drawer-cta{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.drawer .drawer-meta{margin-top:26px;font-size:.86rem;color:#93A9BD;line-height:1.9}
.drawer .drawer-meta a{color:var(--gold)}
body.no-scroll{overflow:hidden}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background:
    radial-gradient(90% 70% at 82% 8%, rgba(43,110,150,.55), transparent 62%),
    radial-gradient(70% 60% at 8% 92%, rgba(255,222,88,.10), transparent 60%),
    linear-gradient(165deg,var(--navy) 0%,var(--navy-900) 58%,var(--navy-950) 100%);
  color:var(--white);position:relative;overflow:hidden;padding:0;
  isolation:isolate;
}
/* faint blueprint grid */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.30;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(75% 75% at 40% 30%,#000,transparent);
  -webkit-mask-image:radial-gradient(75% 75% at 40% 30%,#000,transparent);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:2;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 22%,var(--gold) 22%,var(--gold) 100%);
}
.hero .wrap{
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,58px);
  align-items:center;padding-top:clamp(48px,6vw,78px);padding-bottom:clamp(56px,7vw,92px);
  position:relative;
}
.hero-copy{min-width:0}
.hero .eyebrow{color:var(--gold)}
.hero .eyebrow::before{background:var(--gold)}

.hero-title-ta{
  font-family:var(--tamil);font-weight:700;
  font-size:clamp(1.45rem,3.2vw,2.5rem);line-height:1.32;
  margin:18px 0 6px;color:var(--white);letter-spacing:-.01em;
}
.hero-title-ta .hl{
  color:var(--gold);
}
.hero-reg{
  font-family:var(--tamil);font-size:.94rem;color:#A9C4D8;font-weight:600;margin-bottom:20px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.hero-reg .pill{
  font-family:var(--display);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  padding:4px 11px;border-radius:999px;color:var(--white);font-weight:700;
}
.hero h1{
  font-size:clamp(1.75rem,3.5vw,2.7rem);font-weight:900;letter-spacing:-.03em;line-height:1.08;
  margin-bottom:16px;
}
.hero h1 .accent{color:var(--gold)}
.hero p.lead{font-size:1.05rem;color:#BDD1E0;max-width:50ch;margin-bottom:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.hero-meta{
  display:flex;gap:clamp(18px,3vw,38px);margin-top:clamp(30px,4vw,44px);flex-wrap:wrap;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
}
.hero-meta div{border-left:3px solid var(--gold);padding-left:14px}
.hero-meta b{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:900;
  display:block;line-height:1;color:var(--white)}
.hero-meta span{font-size:.74rem;color:#9DB8CD;text-transform:uppercase;letter-spacing:.1em;font-weight:700}

/* Hero visual — conference card + live notice board */
.hero-visual{position:relative;display:flex;flex-direction:column;gap:18px}
.hero-photo{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.14);position:relative;background:var(--navy-800);
  margin:0;
}
/* height:auto is required or the img's height attribute defeats aspect-ratio */
.hero-photo img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center 30%}
/* Conference details sit in a solid strip below the photo rather than on top
   of it — the group photo stays legible and so does the type. */
.hero-photo-cap{
  background:var(--navy-950);padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:3px solid var(--gold);
}
.conf-badge{display:inline-flex;flex-direction:column;gap:1px}
.conf-badge .n{
  font-family:var(--display);font-weight:900;font-size:1.6rem;
  line-height:.95;color:var(--white);letter-spacing:-.03em;
}
.conf-badge .n sup{font-size:.5em;color:var(--gold);top:-.75em}
.conf-badge .n em{font-style:normal;color:var(--gold);display:block;font-size:.42em;
  letter-spacing:.14em;margin-top:4px}
.conf-facts{display:flex;gap:20px;flex-wrap:wrap}
.conf-facts div{display:flex;gap:8px;align-items:flex-start}
.conf-facts svg{width:15px;height:15px;stroke:var(--gold);flex:none;margin-top:3px}
.conf-facts dt{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  font-weight:800;font-family:var(--display)}
.conf-facts dd{margin:0;font-size:.84rem;color:var(--white);font-weight:600;line-height:1.35}

/* small floating stat card, pinned to the photo's top-right */
.hero-float{
  position:absolute;right:14px;top:14px;z-index:4;
  background:var(--gold);color:var(--navy-900);border-radius:var(--r);
  padding:11px 15px;box-shadow:0 10px 30px rgba(8,29,43,.4);
  display:flex;align-items:center;gap:11px;max-width:215px;
}
.hero-float b{font-family:var(--display);font-size:1.32rem;font-weight:900;line-height:1;flex:none}
.hero-float span{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.25}

/* Live notice board under the hero photo */
.hero-board{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:20px 22px;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.hero-board h3{
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:9px;font-weight:800;margin-bottom:4px;
}
.hero-board ul{margin:0}
.hero-board li{
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.10);
}
.hero-board li:last-child{border-bottom:0;padding-bottom:2px}
.hero-board a.row{display:flex;gap:12px;align-items:baseline;transition:color .2s}
.hero-board a.row:hover .tx{color:var(--gold)}
.hero-board .dt{
  flex:none;font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.06em;
  color:var(--gold);background:rgba(255,222,88,.11);padding:3px 8px;border-radius:999px;
  white-space:nowrap;
}
.hero-board .tx{
  font-size:.85rem;color:#CBD9E5;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-board .tx[lang=ta]{font-size:.82rem;line-height:1.65}
.hero-board .all{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:var(--gold);
  font-family:var(--display);font-weight:800;font-size:.8rem;transition:gap .2s;
}
.hero-board .all:hover{gap:11px}
.hero-board .all svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none}
.hero-board .sk-line{background-image:linear-gradient(90deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.14) 40%,rgba(255,255,255,.06) 80%)}

/* ==========================================================================
   News ticker
   ========================================================================== */
.ticker{background:var(--navy-950);color:var(--white);overflow:hidden;position:relative;z-index:5}
.ticker .wrap{display:flex;align-items:stretch;padding:0;gap:0;max-width:none}
.ticker-label{
  flex:none;background:var(--gold);color:var(--navy-900);font-family:var(--display);font-weight:900;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;
  display:flex;align-items:center;gap:9px;position:relative;z-index:2;
}
.ticker-label::after{content:"";position:absolute;right:-11px;top:0;bottom:0;width:12px;
  background:var(--gold);clip-path:polygon(0 0,100% 50%,0 100%)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:0 0 0 0 rgba(215,28,36,.7);animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(215,28,36,.6)}
  70%{box-shadow:0 0 0 9px rgba(215,28,36,0)}
  100%{box-shadow:0 0 0 0 rgba(215,28,36,0)}
}
.ticker-viewport{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;min-width:0}
.ticker-viewport::after{content:"";position:absolute;right:0;top:0;bottom:0;width:70px;
  background:linear-gradient(90deg,transparent,var(--navy-950));pointer-events:none;z-index:2}
.ticker-track{display:flex;flex:none;will-change:transform;animation:marquee 46s linear infinite}
.ticker-track a,.ticker-track span{
  display:inline-flex;align-items:center;gap:9px;padding:12px 0;margin-right:44px;
  font-size:.87rem;color:#CBD9E5;white-space:nowrap;transition:color .2s;
}
.ticker-track a:hover{color:var(--gold)}
.ticker-track .dt{font-family:var(--display);font-weight:800;color:var(--gold);font-size:.74rem;
  letter-spacing:.06em;background:rgba(255,222,88,.10);padding:3px 9px;border-radius:999px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ==========================================================================
   About
   ========================================================================== */
.about{background:var(--white)}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,66px);align-items:start}
.about-copy p{color:var(--ink-soft);margin-bottom:16px;font-size:1.02rem}
.about-copy p.big{font-size:1.16rem;color:var(--ink);font-weight:500}
.about-copy p.big strong{color:var(--navy);font-weight:700}

.pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.pillar{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  transition:transform .22s var(--ease),box-shadow .25s,border-color .25s;
}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--gold)}
.pillar .ic{width:40px;height:40px;border-radius:11px;background:var(--navy);display:grid;
  place-items:center;margin-bottom:13px}
.pillar .ic svg{width:20px;height:20px;stroke:var(--gold);stroke-width:2;fill:none}
.pillar h4{font-size:1rem;margin-bottom:6px;font-weight:800}
.pillar p{font-size:.88rem;color:var(--slate);line-height:1.55}

/* Affiliation panel */
.affil-panel{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-900) 100%);
  border-radius:var(--r-lg);padding:clamp(26px,3vw,36px);color:var(--white);
  box-shadow:var(--shadow);position:sticky;top:120px;overflow:hidden;
}
.affil-panel::after{
  content:"";position:absolute;right:-70px;bottom:-70px;width:230px;height:230px;
  border:2px solid rgba(255,222,88,.18);border-radius:50%;
}
.affil-panel::before{
  content:"";position:absolute;right:-30px;bottom:-30px;width:150px;height:150px;
  border:2px solid rgba(255,222,88,.12);border-radius:50%;
}
.affil-panel h3{font-size:1.32rem;color:var(--white);margin:12px 0 8px}
.affil-panel > p{color:#A9C4D8;font-size:.94rem;position:relative}
.affil-logos{display:flex;align-items:center;gap:14px;margin:22px 0 0;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.14);position:relative}
.affil-logos img{width:52px;height:52px;object-fit:contain;background:var(--white);
  border-radius:12px;padding:7px}
.affil-logos div strong{display:block;font-family:var(--display);font-size:.98rem;color:var(--white)}
.affil-logos div span{font-size:.78rem;color:#9DB8CD}

.stat-mini{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;position:relative}
.stat-mini b{font-family:var(--display);font-size:1.7rem;font-weight:900;display:block;
  line-height:1;color:var(--gold)}
.stat-mini span{font-size:.78rem;color:#A9C4D8;line-height:1.4;display:block;margin-top:5px}

/* ==========================================================================
   Impact numbers
   ========================================================================== */
.impact{background:var(--navy);color:var(--white);overflow:hidden}
.impact::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 90% at 50% 0%,#000,transparent);
  -webkit-mask-image:radial-gradient(70% 90% at 50% 0%,#000,transparent);
}
.impact .wrap{position:relative}
.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.impact-card{
  background:var(--sky);color:var(--navy-900);border-radius:var(--r-lg);
  padding:clamp(28px,3.4vw,40px) clamp(22px,2.6vw,32px);text-align:center;
  position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s;
}
.impact-card:nth-child(2){background:#D9EAFF}
.impact-card:nth-child(3){background:#EAF3FF}
.impact-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.impact-card .ic{
  width:46px;height:46px;border-radius:13px;background:var(--navy);display:grid;place-items:center;
  margin:0 auto 18px;
}
.impact-card .ic svg{width:23px;height:23px;stroke:var(--gold);stroke-width:2;fill:none}
.impact-card .lbl{
  font-family:var(--display);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:800;color:var(--navy-600);margin-bottom:10px;
}
.impact-card .num{
  font-family:var(--display);font-size:clamp(2.6rem,6vw,4.1rem);font-weight:900;
  line-height:.92;letter-spacing:-.04em;color:var(--navy-900);
  font-variant-numeric:tabular-nums;
}
.impact-card .sub{font-size:.86rem;color:var(--navy-600);margin-top:12px;font-weight:500}

/* ==========================================================================
   News (API driven)
   ========================================================================== */
.news{background:var(--paper)}
.news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.news-head .sec-head{margin-bottom:0}

.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px;align-items:center}
.chip{
  all:unset;cursor:pointer;font-family:var(--display);font-weight:700;font-size:.82rem;
  padding:8px 17px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink-soft);
  background:var(--white);transition:.2s;line-height:1.5;display:inline-flex;align-items:center;gap:7px;
}
.chip:hover{border-color:var(--navy-600);color:var(--navy)}
.chip[aria-pressed=true]{background:var(--navy);color:var(--white);border-color:var(--navy)}
.chip .ct{font-size:.72rem;opacity:.65;font-variant-numeric:tabular-nums}

/* Uniform card grid: `grid-auto-rows:1fr` makes every row the same height and
   `stretch` makes every card fill its row, so all cards match exactly. Each
   card keeps a fixed-ratio media panel and clamped text so nothing has to
   stretch far to get there. */
.news-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);
  grid-auto-rows:1fr;align-items:stretch;
}
.news-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .24s var(--ease),box-shadow .28s,border-color .24s;
  position:relative;
}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-cool)}
.news-media{
  aspect-ratio:16/9;background:linear-gradient(150deg,var(--navy-800),var(--navy));
  position:relative;overflow:hidden;flex:none;display:grid;place-items:center;
}
/* The photo sits on top of the fallback panel; if it fails to load it is
   removed and the panel below shows through. */
.news-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);z-index:1}
.news-card:hover .news-media img{transform:scale(1.05)}
.news-media .fallback{
  display:grid;place-items:center;align-content:center;gap:12px;text-align:center;
  padding:20px 24px;color:var(--gold);height:100%;
}
.news-media .fallback svg{width:38px;height:38px;stroke:var(--gold);stroke-width:1.5;fill:none;opacity:.9}
.news-media .fallback span{
  font-family:var(--display);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:#8FB0C7;font-weight:700;
}
/* Filename on document cards — the panel's real payload */
.news-media .fallback .fname{
  font-family:var(--body);font-size:.76rem;letter-spacing:0;text-transform:none;
  color:#B6CCDC;font-weight:500;line-height:1.5;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-kind{
  position:absolute;top:12px;left:12px;z-index:2;font-family:var(--display);font-weight:800;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:var(--white);color:var(--navy-900);box-shadow:0 2px 8px rgba(8,29,43,.25);
  display:inline-flex;align-items:center;gap:6px;
}
.news-kind svg{width:12px;height:12px;stroke-width:2.2;fill:none;stroke:currentColor}
.news-kind.k-pdf{background:var(--red);color:var(--white)}
.news-kind.k-image{background:var(--gold);color:var(--navy-900)}
.news-kind.k-note{background:var(--navy-600);color:var(--white)}

.news-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.news-date{
  font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);display:flex;align-items:center;gap:8px;
}
.news-date .new{background:var(--red);color:var(--white);padding:2px 8px;border-radius:999px;
  font-size:.6rem;letter-spacing:.1em}
/* Title and body are clamped to a fixed number of lines so cards start out
   near-identical in height; min-height reserves the space even when the text
   is short, which keeps the footers on a common baseline. */
.news-card h3{
  font-size:1.02rem;font-weight:800;line-height:1.35;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(3 * 1.35em);
}
.news-card h3[lang=ta]{font-size:.95rem;line-height:1.6;font-weight:700;min-height:calc(3 * 1.6em)}
.news-card .excerpt{
  font-size:.88rem;color:var(--slate);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.6em);
}
.news-card .excerpt[lang=ta]{font-size:.85rem;line-height:1.75;min-height:calc(2 * 1.75em)}
.news-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:12px;margin-top:auto;border-top:1px solid var(--line)}
.news-link{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:800;
  font-size:.82rem;color:var(--navy);transition:gap .2s,color .2s;
}
.news-link:hover{gap:11px;color:var(--gold-deep)}
.news-link svg{width:15px;height:15px;stroke-width:2.2;fill:none;stroke:currentColor}
.news-size{font-size:.72rem;color:var(--slate);font-variant-numeric:tabular-nums}

/* skeleton loading */
.skel{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.skel .sk-media{aspect-ratio:16/9;background:var(--paper-2)}
.skel .sk-body{padding:20px;display:flex;flex-direction:column;gap:11px}
.sk-line{height:11px;border-radius:6px;background:var(--paper-2)}
.sk-line.w40{width:40%}.sk-line.w90{width:90%}.sk-line.w70{width:70%}.sk-line.w55{width:55%}
.skel .sk-media,.sk-line{
  background-image:linear-gradient(90deg,var(--paper-2) 0%,#F8F7F2 40%,var(--paper-2) 80%);
  background-size:300% 100%;animation:shimmer 1.4s infinite linear;
}
@keyframes shimmer{from{background-position:150% 0}to{background-position:-150% 0}}

/* empty / error states */
.state-box{
  grid-column:1/-1;background:var(--white);border:1px dashed var(--line);border-radius:var(--r);
  padding:44px 26px;text-align:center;
}
.state-box .ic{width:52px;height:52px;border-radius:14px;background:var(--paper-2);display:grid;
  place-items:center;margin:0 auto 16px}
.state-box .ic svg{width:26px;height:26px;stroke:var(--slate);stroke-width:1.8;fill:none}
.state-box h3{font-size:1.1rem;margin-bottom:8px}
.state-box p{color:var(--slate);font-size:.92rem;max-width:44ch;margin:0 auto 18px}

/* ==========================================================================
   Patrons
   ========================================================================== */
.patrons{background:var(--white)}
.patron-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,30px);align-items:start}
.patron{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);position:relative;overflow:hidden;
  transition:transform .26s var(--ease),box-shadow .3s;
}
.patron:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.patron::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--gold),var(--red));
}
.patron-photo{
  width:104px;height:104px;flex:none;border-radius:50%;overflow:hidden;
  border:3px solid var(--white);box-shadow:0 6px 22px rgba(12,39,57,.20);position:relative;
}
.patron-photo img{width:100%;height:100%;object-fit:cover}
.patron h3{font-size:1.14rem;margin-bottom:3px}
.patron .role{
  font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px;
}
.patron blockquote{
  margin:0;font-family:var(--tamil);font-size:.9rem;line-height:1.95;color:var(--ink-soft);
  position:relative;padding-left:18px;border-left:2px solid var(--line);
}
.patron blockquote::before{
  content:"\201C";position:absolute;left:-2px;top:-14px;font-family:Georgia,serif;
  font-size:2.6rem;color:var(--gold);line-height:1;
}

/* ==========================================================================
   Office bearers
   ========================================================================== */
.bearers{background:var(--paper)}
/* featured three */
.bearer-lead{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px);margin-bottom:clamp(20px,2.6vw,30px)}
.bearer-hero{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.4vw,20px);align-items:center;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-900) 100%);color:var(--white);
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);position:relative;overflow:hidden;
}
.bearer-hero::after{
  content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;
  border:2px solid rgba(255,222,88,.16);border-radius:50%;
}
.bearer-hero .ph{
  width:clamp(84px,7vw,112px);aspect-ratio:1;flex:none;border-radius:var(--r);overflow:hidden;
  border:2px solid rgba(255,222,88,.55);box-shadow:var(--shadow);
}
.bearer-hero .ph img{width:100%;height:100%;object-fit:cover}
/* Three across: let the name/role column shrink instead of pushing a card out. */
.bearer-hero > div:last-child{min-width:0}
.bearer-hero h3{font-size:clamp(1.05rem,1.15vw,1.28rem);color:var(--white);margin-bottom:4px}
.bearer-hero .role{
  font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.bearer-hero .role-ta{font-family:var(--tamil);font-size:.86rem;color:#A9C4D8;margin-top:6px}

.bearer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.bearer{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;display:flex;align-items:center;gap:16px;
  transition:transform .22s var(--ease),box-shadow .26s,border-color .22s;
}
.bearer:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--gold)}
.bearer .ph{
  width:66px;height:66px;flex:none;border-radius:50%;overflow:hidden;
  border:2px solid var(--paper-2);position:relative;background:var(--paper-2);
}
.bearer .ph img{width:100%;height:100%;object-fit:cover}
.bearer .ph::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(12,39,57,.08)}
.bearer-info{min-width:0}
.bearer h4{font-size:.98rem;margin-bottom:3px;font-weight:800}
.bearer .role{
  font-size:.76rem;color:var(--navy-600);font-weight:600;line-height:1.4;
}
.bearer .role-ta{font-family:var(--tamil);font-size:.74rem;color:var(--slate);margin-top:2px;line-height:1.5}

/* ==========================================================================
   Timeline
   ========================================================================== */
.journey{background:var(--white);overflow:hidden}
.tl{position:relative;padding-left:0}
.tl::before{
  content:"";position:absolute;left:26px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--gold) 0%,var(--line) 100%);
}
.tl-item{
  position:relative;padding:0 0 clamp(26px,3vw,38px) 74px;
}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:0;top:-4px;width:54px;height:54px;border-radius:50%;
  background:var(--white);border:2px solid var(--line);display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:.82rem;color:var(--navy);
  letter-spacing:-.02em;z-index:2;transition:.3s var(--ease);
}
.tl-item:hover .tl-dot{border-color:var(--gold);transform:scale(1.06)}
.tl-item.is-latest .tl-dot{background:var(--gold);border-color:var(--gold);color:var(--navy-900);
  box-shadow:0 0 0 6px rgba(255,222,88,.22)}
.tl-item h4{font-size:1.1rem;margin-bottom:5px}
.tl-item p{font-size:.92rem;color:var(--slate);max-width:52ch}
.tl-item .ta{font-family:var(--tamil);font-size:.86rem;color:var(--navy-600);margin-top:4px}

.journey-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(34px,5vw,64px);align-items:start}
.poster{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);
  position:relative;background:var(--paper-2);
}
.poster img{width:100%;height:auto}
.poster figcaption{
  padding:14px 18px;font-size:.82rem;color:var(--slate);background:var(--white);
  border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;
}
.poster figcaption svg{width:15px;height:15px;stroke:var(--gold-deep);stroke-width:2;fill:none;flex:none}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{background:var(--paper-2)}
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4vw,56px)}
.contact-info .item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.contact-info .item:first-child{padding-top:0}
.contact-info .item:last-child{border-bottom:0}
.contact-info .ic{
  width:46px;height:46px;flex:none;border-radius:13px;background:var(--navy);display:grid;place-items:center;
}
.contact-info .ic svg{width:21px;height:21px;stroke:var(--gold);stroke-width:2;fill:none}
.contact-info h4{font-size:.98rem;margin-bottom:4px}
.contact-info p{color:var(--slate);font-size:.94rem;line-height:1.6}
.contact-info a{color:var(--navy);font-weight:600;border-bottom:1px solid transparent;transition:.2s}
.contact-info a:hover{border-bottom-color:var(--gold-deep);color:var(--gold-deep)}

form.enq{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);
}
form.enq .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.enq .field{margin-bottom:16px}
form.enq label{display:block;font-weight:700;font-size:.8rem;margin-bottom:7px;color:var(--ink-soft);
  letter-spacing:.02em}
form.enq label .req{color:var(--red)}
form.enq input,form.enq textarea,form.enq select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:.94rem;background:var(--paper);color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
form.enq input::placeholder,form.enq textarea::placeholder{color:#93A2AF}
form.enq input:focus,form.enq textarea:focus,form.enq select:focus{
  outline:none;border-color:var(--gold-deep);background:var(--white);
  box-shadow:0 0 0 4px rgba(255,222,88,.22);
}
form.enq textarea{resize:vertical;min-height:110px}
form.enq .note{font-size:.8rem;color:var(--slate);margin-top:14px;line-height:1.55}
.form-msg{
  margin-top:16px;padding:13px 16px;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;
  display:none;align-items:center;gap:10px;
}
.form-msg.show{display:flex}
.form-msg.ok{background:#E7F4EC;color:#1B6B3C;border:1px solid #BFE0CC}
.form-msg.err{background:var(--red-soft);color:#A31A20;border:1px solid #E9C4C4}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site{background:var(--navy-950);color:#93A9BD;padding:clamp(46px,5vw,66px) 0 26px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(26px,3vw,42px);
  margin-bottom:36px}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-brand img{width:42px;height:42px;object-fit:contain}
.foot-brand .ta{font-family:var(--tamil);font-weight:700;font-size:.94rem;color:var(--white);line-height:1.3}
.foot-brand .en{font-size:.68rem;color:#7D95AB;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
footer.site .desc{font-size:.9rem;line-height:1.75;max-width:36ch}
footer.site h5{
  color:var(--white);font-family:var(--display);font-weight:800;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;
}
footer.site ul li{margin-bottom:10px}
footer.site ul a{font-size:.9rem;transition:color .2s,padding-left .2s;display:inline-block}
footer.site ul a:hover{color:var(--gold);padding-left:4px}
footer.site .addr{font-size:.9rem;line-height:1.8;font-style:normal}
footer.site .addr a{color:var(--gold)}
.foot-bottom{
  border-top:1px solid #1C3346;padding-top:22px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:.8rem;align-items:center;
}
.foot-bottom .marks{display:flex;gap:10px;align-items:center}
.foot-bottom .marks img{width:24px;height:24px;object-fit:contain;opacity:.75}

/* ==========================================================================
   Modal (news detail)
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:rgba(8,29,43,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s;
}
.modal.open{opacity:1;visibility:visible}
.modal-card{
  background:var(--white);border-radius:var(--r-lg);max-width:760px;width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);position:relative;
  transform:translateY(14px) scale(.99);transition:transform .3s var(--ease);
}
.modal.open .modal-card{transform:none}
.modal-card .m-top{
  position:sticky;top:0;background:var(--white);padding:22px 26px 16px;
  border-bottom:1px solid var(--line);z-index:2;
}
/* `all:unset` first, or it resets the absolute positioning set before it */
.modal-card .m-close{
  all:unset;position:absolute;top:16px;right:18px;cursor:pointer;width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;background:var(--paper-2);transition:.2s;
  z-index:3;
}
.modal-card .m-close:hover{background:var(--red);}
.modal-card .m-close:hover svg{stroke:var(--white)}
.modal-card .m-close svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2.4;fill:none}
.modal-card h2{font-size:1.24rem;line-height:1.35;padding-right:44px;margin-bottom:8px}
.modal-card h2[lang=ta]{font-size:1.1rem;line-height:1.6}
.modal-card .m-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:.78rem;
  color:var(--slate);font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.modal-card .m-body{padding:22px 26px 26px}
.modal-card .m-body .content{font-size:.98rem;line-height:1.85;color:var(--ink-soft);white-space:pre-line}
.modal-card .m-body .content[lang=ta]{line-height:2}
.modal-card .m-attach{
  margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);display:flex;align-items:center;gap:15px;flex-wrap:wrap;
}
.modal-card .m-attach .fi{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:var(--red);flex:none}
.modal-card .m-attach .fi svg{width:21px;height:21px;stroke:var(--white);stroke-width:2;fill:none}
.modal-card .m-attach .fi.img{background:var(--gold)}
.modal-card .m-attach .fi.img svg{stroke:var(--navy-900)}
.modal-card .m-attach .fmeta{flex:1;min-width:170px}
.modal-card .m-attach .fmeta strong{display:block;font-size:.9rem;word-break:break-word;line-height:1.4}
.modal-card .m-attach .fmeta span{font-size:.78rem;color:var(--slate)}
.modal-card .m-figure{margin:0 0 20px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.modal-card .m-figure img{width:100%}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}
.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}
.reveal.d4{transition-delay:.28s}

/* Back to top */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:40;width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:var(--gold);border:none;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,visibility .3s,transform .3s var(--ease),background .2s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold);color:var(--navy-900)}
.to-top svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none}

/* ==========================================================================
   News archive page specifics
   ========================================================================== */
.page-head{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-900) 100%);color:var(--white);
  padding:clamp(44px,5vw,72px) 0;position:relative;overflow:hidden;
}
.page-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--red) 0 22%,var(--gold) 22% 100%);
}
.page-head h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:900;margin:14px 0 12px}
.page-head p{color:#A9C4D8;max-width:56ch;font-size:1.04rem}
.crumbs{display:flex;gap:9px;align-items:center;font-size:.82rem;color:#8FB0C7;margin-bottom:6px}
.crumbs a:hover{color:var(--gold)}
.crumbs svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none}

.search-bar{position:relative;flex:1;min-width:230px;max-width:340px}
.search-bar input{
  width:100%;padding:9px 14px 9px 38px;border:1.5px solid var(--line);border-radius:999px;
  font:inherit;font-size:.88rem;background:var(--white);transition:.2s;
}
.search-bar input:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 4px rgba(255,222,88,.2)}
.search-bar svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  stroke:var(--slate);stroke-width:2;fill:none;pointer-events:none}
.result-count{font-size:.84rem;color:var(--slate);font-weight:600;margin-left:auto}

.load-more-wrap{display:flex;justify-content:center;margin-top:clamp(28px,3vw,42px)}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Between these widths the nav + three CTAs squeeze the brand; drop the Tamil
   subtitle rather than show it truncated. */
@media (max-width:1180px){
  .brand-txt .ta{display:none}
}
@media (max-width:1080px){
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:30px}
  .foot-grid > div:last-child{grid-column:1/-1}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .bearer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  nav.main,.header-cta{display:none}
  .menu-toggle{display:block}
  /* Stacked: the union's name and headline read first, photo and board after. */
  .hero .wrap{grid-template-columns:1fr;padding-bottom:clamp(64px,9vw,96px)}
  .about-grid,.contact-grid,.journey-grid{grid-template-columns:1fr}
  .patron-grid{grid-template-columns:1fr}
  .bearer-lead{grid-template-columns:1fr}
  .impact-grid{grid-template-columns:1fr;gap:14px}
  .impact-card{display:grid;grid-template-columns:auto 1fr;text-align:left;align-items:center;
    gap:20px;padding:24px}
  .impact-card .ic{margin:0}
  .impact-card .num{font-size:clamp(2.2rem,7vw,3rem)}
  .impact-card .lbl{margin-bottom:4px}
  .impact-card .sub{margin-top:4px}
  .impact-card > div{min-width:0}
}
@media (max-width:680px){
  .u-left{display:none}
  .utility .wrap{justify-content:center}
  .news-grid,.bearer-grid,.pillars,.stat-mini{grid-template-columns:1fr}
  form.enq .row{grid-template-columns:1fr;gap:0}
  /* Keep the sticky header compact on phones — drop the trailing emblem. */
  .brand-txt .ta{display:none}
  .brand-marks-end{display:none}
  .hero-meta{gap:16px}
  .hero-meta div{flex:1 1 44%}
  .patron{grid-template-columns:1fr;gap:16px}
  .patron-photo{width:86px;height:86px}
  .bearer-hero{grid-template-columns:1fr;text-align:left}
  .foot-grid{grid-template-columns:1fr}
  .foot-grid > div:last-child{grid-column:auto}
  .tl-item{padding-left:64px}
  .tl::before{left:22px}
  .tl-dot{width:46px;height:46px;font-size:.76rem}
  .news-head{flex-direction:column;align-items:flex-start}
  .result-count{margin-left:0}
  .modal-card .m-top,.modal-card .m-body{padding-inline:18px}
}
@media (max-width:420px){
  .hero-float{position:static;margin-top:16px;max-width:none}
}

/* ---------- Print ---------- */
@media print{
  .utility,header.site,.ticker,.drawer,.to-top,form.enq,.hero-float{display:none!important}
  body{background:#fff}
  section{padding:20px 0;break-inside:avoid}
  .hero{background:#fff;color:#000}
  .reveal{opacity:1;transform:none}
}

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

html{scroll-behavior:smooth;scroll-padding-top:120px}