/* ==========================================================================
   MUDA — Meghalaya Urban Development Authority
   Design system
   Palette grounded in the Meghalaya landscape MUDA plans within:
   deep hill-indigo, pine forest, red-soil ochre — worn with standard
   Government of India portal conventions (tricolour rule, emblem,
   accessibility bar) for immediate official legibility.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --indigo-950:#0A1E33;
  --indigo-900:#0B2545;
  --indigo-800:#13345F;
  --indigo-700:#1B4372;
  --pine-700:#145C43;
  --pine-600:#1B7A57;
  --ochre-600:#B75B25;
  --ochre-500:#C96A2E;
  --saffron:#FF9933;
  --green-ind:#128807;

  --paper:#F7F5EF;
  --paper-raised:#FFFFFF;
  --ink:#1B2430;
  --ink-soft:#3E4855;
  --slate:#5B6472;
  --line:#DEDACC;
  --line-soft:#EAE7DC;

  --focus:#C96A2E;

  --font-display:'Source Serif 4', 'Georgia', serif;
  --font-body:'Inter', -apple-system, 'Segoe UI', sans-serif;

  --radius-s:3px;
  --radius-m:6px;
  --shadow-card:0 1px 2px rgba(11,37,69,0.06), 0 6px 20px rgba(11,37,69,0.07);
  --shadow-pop:0 10px 30px rgba(11,37,69,0.16);
  --contour-svg:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Ccircle cx='150' cy='150' r='40'/%3E%3Ccircle cx='150' cy='150' r='75'/%3E%3Ccircle cx='150' cy='150' r='110'/%3E%3Ccircle cx='150' cy='150' r='145'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--indigo-900);
  margin:0 0 .5em;
  line-height:1.18;
  font-weight:600;
}
p{margin:0 0 1em;}
ul,ol{margin:0 0 1em;padding-left:1.3em;}
li{margin-bottom:.4em;}

:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ochre-600); color:#fff;
  padding:.7em 1.2em; z-index:999; font-weight:600;
  border-radius:0 0 var(--radius-m) 0;
}
.skip-link:focus{ left:0; top:0; }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* Tricolour strip */
.tricolor-strip{ display:flex; height:4px; width:100%; }
.tricolor-strip span{ flex:1; }
.tricolor-strip .saffron{ background:var(--saffron); }
.tricolor-strip .white{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.tricolor-strip .green{ background:var(--green-ind); }

/* Utility accessibility bar */
.util-bar{ background:var(--indigo-950); color:#C9D3E0; font-size:12.5px; }
.util-bar .container{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px; padding-top:6px; padding-bottom:6px;
}
.util-bar-left, .util-bar-right{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.util-bar a{ color:#C9D3E0; text-decoration:none; white-space:nowrap; }
.util-bar a:hover{ color:#fff; text-decoration:underline; }
.font-toggle{ display:inline-flex; gap:2px; align-items:center; }
.font-toggle span{ margin-right:4px; }
.font-toggle button{
  background:transparent; border:1px solid #3A4C63; color:#C9D3E0;
  border-radius:3px; width:24px; height:22px; font-size:11px; cursor:pointer; line-height:1;
}
.font-toggle button:hover{ background:#1B3350; color:#fff; }

/* Header */
.site-header{ background:#fff; border-bottom:1px solid var(--line); }
.site-header .container{
  display:flex; align-items:center; gap:18px; padding-top:16px; padding-bottom:16px;
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; flex:1; min-width:0; }
.brand img.logo{ width:62px; height:62px; object-fit:contain; flex-shrink:0; }
.brand-text .eyebrow{
  display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ochre-600); font-weight:700; margin-bottom:2px;
}
.brand-text h1{ font-size:clamp(17px,2.2vw,23px); margin:0; color:var(--indigo-900); letter-spacing:.01em; }
.brand-text .sub{ display:block; font-size:12.5px; color:var(--slate); margin-top:2px; }
.header-search{
  display:flex; align-items:center; border:1px solid var(--line); border-radius:999px;
  padding:6px 6px 6px 16px; background:var(--paper); flex-shrink:0;
}
.header-search input{
  border:none; background:transparent; outline:none; font-family:var(--font-body);
  font-size:14px; width:150px; color:var(--ink);
}
.header-search button{
  border:none; background:var(--indigo-900); color:#fff; width:32px;height:32px;
  border-radius:50%; cursor:pointer; display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
@media (max-width:760px){ .header-search{ display:none; } }

/* Primary nav */
.primary-nav{ background:var(--indigo-900); position:sticky; top:0; z-index:60; box-shadow:0 1px 0 rgba(0,0,0,.08); }
.nav-inner{ display:flex; align-items:stretch; }
.nav-toggle{
  display:none; background:none; border:none; color:#fff; padding:14px 20px;
  font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; align-items:center; gap:10px;
}
.nav-menu{ list-style:none; display:flex; margin:0; padding:0; flex-wrap:wrap; }
.nav-menu > li{ position:relative; }
.nav-menu > li > a{
  display:block; padding:15px 18px; color:#EDEFF3; text-decoration:none; font-size:14.5px;
  font-weight:500; letter-spacing:.01em; border-bottom:3px solid transparent; white-space:nowrap;
}
.nav-menu > li > a .car{ font-size:10px; margin-left:6px; opacity:.75; }
.nav-menu > li > a:hover, .nav-menu > li.active > a, .nav-menu > li:focus-within > a{
  background:var(--indigo-800); border-bottom-color:var(--ochre-500); color:#fff;
}
.nav-menu .sub{
  list-style:none; margin:0; padding:8px; position:absolute; left:0; top:100%;
  background:#fff; min-width:250px; box-shadow:var(--shadow-pop);
  border-radius:0 0 var(--radius-m) var(--radius-m); border-top:3px solid var(--ochre-500);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s; z-index:70;
}
.nav-menu li:hover > .sub, .nav-menu li:focus-within > .sub{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu .sub li a{
  display:block; padding:10px 14px; color:var(--indigo-900); text-decoration:none;
  font-size:14px; border-radius:var(--radius-s); font-weight:500;
}
.nav-menu .sub li a:hover{ background:var(--paper); color:var(--ochre-600); }

@media (max-width:920px){
  .nav-toggle{ display:flex; }
  .nav-inner{ flex-direction:column; }
  .nav-menu{ display:none; flex-direction:column; width:100%; background:var(--indigo-950); }
  .nav-menu.open{ display:flex; }
  .nav-menu > li > a{ border-bottom:1px solid rgba(255,255,255,.08); padding:14px 20px;}
  .nav-menu .sub{
    position:static; opacity:1; visibility:visible; transform:none; display:none;
    box-shadow:none; border-radius:0; background:var(--indigo-900); border-top:none;
  }
  .nav-menu li.open .sub{ display:block; }
  .nav-menu .sub li a{ color:#EDEFF3; padding:10px 30px; }
  .nav-menu .sub li a:hover{ background:var(--indigo-800); color:#fff; }
}

/* Breadcrumb */
.breadcrumb-bar{ background:var(--paper-raised); border-bottom:1px solid var(--line-soft); }
.breadcrumb{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:11px 0; font-size:13px; color:var(--slate); }
.breadcrumb a{ color:var(--pine-700); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:6px; color:var(--line); }

/* Page header (inner pages) */
.page-hero{
  background:linear-gradient(120deg, rgba(10,30,51,.94), rgba(19,52,95,.9)), var(--indigo-900);
  color:#fff; padding:44px 0 40px; position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; background-image:var(--contour-svg);
  background-size:900px; background-repeat:repeat; opacity:.10; pointer-events:none;
}
.page-hero .eyebrow{
  text-transform:uppercase; letter-spacing:.09em; font-size:12.5px; color:var(--saffron);
  font-weight:700; margin-bottom:10px; display:block;
}
.page-hero h1{ color:#fff; font-size:clamp(26px,3.6vw,38px); max-width:800px; margin:0; }
.page-hero .lede{ color:#C9D3E0; max-width:680px; margin-top:12px; font-size:15.5px; }

/* Section shells */
.section{ padding:56px 0; }
.section.tight{ padding:36px 0; }
.section.alt{ background:var(--paper-raised); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.section-head .kicker{ text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:700; color:var(--ochre-600); display:block; margin-bottom:6px; }
.section-head h2{ margin:0; font-size:clamp(21px,2.6vw,28px); }
.section-head .rule{ width:52px; height:3px; background:var(--ochre-500); margin-top:12px; }
.link-more{ color:var(--pine-700); text-decoration:none; font-weight:600; font-size:14px; white-space:nowrap; }
.link-more:hover{ text-decoration:underline; }

/* Article typography (content pages) */
.article{
  background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:var(--radius-m);
  padding:36px clamp(20px,4vw,48px); box-shadow:var(--shadow-card);
}
.article h2{ font-size:21px; margin-top:1.6em; }
.article h2:first-child{ margin-top:0; }
.article h3{ font-size:17px; color:var(--pine-700); margin-top:1.4em; }
.article p{ color:var(--ink-soft); font-size:15.5px; }
.article ul li, .article ol li{ color:var(--ink-soft); font-size:15.5px; }
.article strong{ color:var(--indigo-900); }
.article .note-box{
  background:#FBF3EA; border-left:4px solid var(--ochre-500); padding:14px 18px;
  border-radius:0 var(--radius-s) var(--radius-s) 0; font-size:14.5px; color:var(--ink-soft); margin:1.2em 0;
}
.article .placeholder{
  border:1.5px dashed var(--line); border-radius:var(--radius-m); padding:34px 20px;
  text-align:center; color:var(--slate); background:var(--paper);
}
.article .placeholder .fa{ font-size:26px; color:var(--line); margin-bottom:10px; display:block;}
.article .placeholder strong{ display:block; color:var(--ink-soft); font-size:15px; margin-bottom:4px;}

/* numbered process list */
.step-list{ list-style:none; padding:0; margin:1.2em 0; counter-reset:step; }
.step-list li{ counter-increment:step; position:relative; padding-left:42px; margin-bottom:14px; color:var(--ink-soft); font-size:15.5px; }
.step-list li::before{
  content:counter(step); position:absolute; left:0; top:-1px; width:28px; height:28px;
  background:var(--indigo-900); color:#fff; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:700; font-family:var(--font-body);
}

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
@media (max-width:700px){ .two-col{ grid-template-columns:1fr; } }

/* Cards */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:20px; }
.card{
  background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:var(--radius-m);
  padding:26px 22px; box-shadow:var(--shadow-card);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
  text-decoration:none; display:block;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); border-color:var(--ochre-500); }
.card .icon{
  width:44px; height:44px; border-radius:10px;
  background:linear-gradient(135deg, var(--indigo-900), var(--pine-700)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:16px;
}
.card h3{ font-size:16.5px; margin-bottom:8px; color:var(--indigo-900);}
.card p{ font-size:14px; color:var(--slate); margin-bottom:0;}

/* quick-action strip (home) */
.quick-actions{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
  margin-top:-58px; position:relative; z-index:5; box-shadow:var(--shadow-pop);
}
.quick-actions a{
  background:#fff; text-decoration:none; padding:22px 18px; display:flex; align-items:center;
  gap:14px; color:var(--indigo-900); font-weight:600; font-size:14.5px;
}
.quick-actions a:hover{ background:var(--paper); }
.quick-actions .qi{
  width:38px; height:38px; border-radius:50%; background:#FBF3EA; color:var(--ochre-600);
  display:flex;align-items:center;justify-content:center; flex-shrink:0; font-size:16px;
}
@media (max-width:860px){ .quick-actions{ grid-template-columns:repeat(2,1fr); margin-top:0; } }

/* Hero carousel (home) */
.hero-carousel{ position:relative; overflow:hidden; background:var(--indigo-950); }
.hero-slides{ position:relative; height:min(62vw, 460px); min-height:280px; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.hero-slide.active{ opacity:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero-slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,20,35,.86) 0%, rgba(10,20,35,.35) 45%, rgba(10,20,35,.15) 100%);
}
.hero-caption{ position:absolute; left:0; right:0; bottom:0; padding:0 0 76px; color:#fff; z-index:2; }
.hero-caption .eyebrow{ text-transform:uppercase; letter-spacing:.1em; font-size:12.5px; color:var(--saffron); font-weight:700; margin-bottom:10px; display:block; }
.hero-caption h2{ color:#fff; font-size:clamp(24px,4vw,40px); max-width:640px; margin:0 0 10px; }
.hero-caption p{ color:#DCE3EC; max-width:560px; font-size:15px; margin:0; }
.hero-dots{ position:absolute; right:24px; bottom:20px; display:flex; gap:8px; z-index:3; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; border:1.5px solid #fff; background:rgba(255,255,255,.25); cursor:pointer; padding:0; }
.hero-dots button.active{ background:#fff; }
.hero-arrows button{
  position:absolute; top:40%; transform:translateY(-50%); background:rgba(10,20,35,.4);
  border:1px solid rgba(255,255,255,.4); color:#fff; width:38px; height:38px; border-radius:50%;
  cursor:pointer; z-index:3; display:flex;align-items:center;justify-content:center;
}
.hero-arrows button:hover{ background:rgba(10,20,35,.7); }
.hero-arrows .prev{ left:20px; }
.hero-arrows .next{ right:20px; }
@media (max-width:760px){ .hero-arrows{ display:none; } .hero-caption{ padding-bottom:34px; } }

/* Stat strip */
.stat-strip{ background:var(--indigo-900); color:#fff; padding:34px 0; position:relative; overflow:hidden; }
.stat-strip::before{ content:""; position:absolute; inset:0; background-image:var(--contour-svg); background-size:700px; opacity:.08; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.stat-grid div{ text-align:left; }
.stat-grid .num{ font-family:var(--font-display); font-size:clamp(24px,3.4vw,34px); font-weight:700; color:var(--saffron); display:block; }
.stat-grid .lbl{ font-size:13px; color:#C9D3E0; margin-top:4px; }
@media (max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }

/* Notice / tender lists */
.notice-list{ list-style:none; margin:0; padding:0; }
.notice-list li{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start; margin-bottom:0; }
.notice-list li:last-child{ border-bottom:none; }
.notice-date{ flex-shrink:0; background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-s); width:52px; text-align:center; padding:6px 4px; font-family:var(--font-body); }
.notice-date .d{ display:block; font-weight:800; font-size:16px; color:var(--indigo-900); }
.notice-date .m{ display:block; font-size:10px; text-transform:uppercase; color:var(--slate); letter-spacing:.03em;}
.notice-body a{ color:var(--indigo-900); text-decoration:none; font-weight:600; font-size:14.5px; }
.notice-body a:hover{ color:var(--ochre-600); text-decoration:underline; }
.notice-body .tag{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:999px; margin-left:8px; vertical-align:middle; }
.tag-new{ background:#FDECE0; color:var(--ochre-600); }
.tag-closed{ background:#EAEAEA; color:var(--slate); }
.notice-download{ font-size:13px; color:var(--pine-700); display:inline-flex; align-items:center; gap:6px; margin-top:4px; text-decoration:none; font-weight:600; }
.notice-download:hover{ text-decoration:underline; }

.panel{ background:var(--paper-raised); border:1px solid var(--line-soft); border-radius:var(--radius-m); box-shadow:var(--shadow-card); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line-soft); }
.panel-head h3{ margin:0; font-size:16.5px; display:flex; align-items:center; gap:10px;}
.panel-head h3 i{ color:var(--ochre-600); }
.panel-body{ padding:8px 22px 18px; }

/* Tables */
.table-wrap{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--radius-m); }
table.data-table{ width:100%; border-collapse:collapse; font-size:14.5px; background:#fff; }
table.data-table thead th{ background:var(--indigo-900); color:#fff; text-align:left; padding:12px 16px; font-weight:600; font-size:13px; letter-spacing:.02em; white-space:nowrap; }
table.data-table tbody td{ padding:12px 16px; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); vertical-align:top; }
table.data-table tbody tr:last-child td{ border-bottom:none; }
table.data-table tbody tr:nth-child(even){ background:var(--paper); }
table.data-table td a{ color:var(--pine-700); text-decoration:none; font-weight:600;}
table.data-table td a:hover{ text-decoration:underline; }

/* branch org blocks */
.branch-block{ border:1px solid var(--line-soft); border-left:4px solid var(--pine-700); border-radius:0 var(--radius-m) var(--radius-m) 0; padding:22px 24px; margin-bottom:18px; background:#fff; }
.branch-block h3{ font-size:16.5px; margin-bottom:8px; }
.branch-block p{ font-size:14.5px; color:var(--ink-soft); }
.branch-roster{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.branch-roster span{ background:var(--paper); border:1px solid var(--line-soft); font-size:12.5px; padding:5px 11px; border-radius:999px; color:var(--ink-soft); }
.branch-roster span b{ color:var(--indigo-900); }

/* contact cards */
.contact-branch{ margin-bottom:30px; }
.contact-branch > h3{ font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--ochre-600); border-bottom:2px solid var(--line-soft); padding-bottom:8px; margin-bottom:16px; }
.person-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.person-card{ border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:16px 18px; background:#fff; }
.person-card .name{ font-weight:700; color:var(--indigo-900); font-size:15px; }
.person-card .role{ font-size:12.5px; color:var(--ochre-600); margin:2px 0 8px; font-weight:600;}
.person-card .meta{ font-size:13px; color:var(--slate); display:flex; flex-direction:column; gap:3px;}
.person-card .meta a{ color:var(--pine-700); text-decoration:none; }
.person-card .meta a:hover{ text-decoration:underline; }

/* gallery */
.gallery-group{ margin-bottom:40px; }
.gallery-group h3{ font-size:17px; }
.gallery-group .g-desc{ color:var(--ink-soft); font-size:14.5px; margin-bottom:16px; max-width:820px;}
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px; }
.gallery-grid a{ display:block; border-radius:var(--radius-m); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line-soft); position:relative; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.gallery-grid a:hover img{ transform:scale(1.06); }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:var(--radius-s); font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; border:1px solid transparent; }
.btn-primary{ background:var(--ochre-600); color:#fff; }
.btn-primary:hover{ background:#a04f1f; }
.btn-outline{ border-color:#fff; color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.12); }
.btn-outline-dark{ border-color:var(--indigo-900); color:var(--indigo-900); }
.btn-outline-dark:hover{ background:var(--indigo-900); color:#fff; }

/* about split */
.about-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.about-split img{ border-radius:var(--radius-m); box-shadow:var(--shadow-card); border:1px solid var(--line-soft); }
@media (max-width:820px){ .about-split{ grid-template-columns:1fr; } }

/* back to top */
.back-to-top{
  position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%;
  background:var(--indigo-900); color:#fff; border:none; display:none; align-items:center;
  justify-content:center; cursor:pointer; box-shadow:var(--shadow-pop); z-index:80;
}
.back-to-top.show{ display:flex; }

/* Footer */
.site-footer{ background:var(--indigo-950); color:#B9C3D2; padding-top:52px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.3fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.09); }
.footer-brand{ display:flex; gap:12px; align-items:flex-start; }
.footer-brand img{ width:48px; height:48px; object-fit:contain; }
.footer-brand h4{ color:#fff; font-size:15.5px; margin:0 0 6px; }
.footer-brand p{ font-size:13px; color:#9AA7BA; margin:0; }
.site-footer h5{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 16px; font-family:var(--font-body); }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:#B9C3D2; text-decoration:none; font-size:13.5px; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
.footer-social{ display:flex; gap:10px; margin-top:4px;}
.footer-social a{ width:34px; height:34px; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none;}
.footer-social a:hover{ background:var(--ochre-600); border-color:var(--ochre-600); }
.footer-contact li{ display:flex; gap:10px; font-size:13.5px; color:#B9C3D2; align-items:flex-start;}
.footer-contact i{ color:var(--saffron); width:16px; margin-top:3px; flex-shrink:0;}
.footer-bottom{ padding:18px 0 22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#8C99AC; }
.footer-bottom nav a{ color:#8C99AC; text-decoration:none; margin-left:16px; }
.footer-bottom nav a:hover{ color:#fff; }

@media (max-width:920px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .footer-bottom nav a{ margin-left:0; margin-right:14px; }
}

.visually-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
::selection{ background:var(--ochre-500); color:#fff; }

/* high contrast mode */
body.hc-mode{ --paper:#000; --paper-raised:#0c0c0c; --ink:#fff; --ink-soft:#e9e9e9; --slate:#c8c8c8; --line:#444; --line-soft:#333; }
body.hc-mode .site-header{ background:#000; border-color:#444; }
body.hc-mode .card, body.hc-mode .article, body.hc-mode .panel, body.hc-mode .person-card, body.hc-mode .branch-block, body.hc-mode table.data-table{ background:#0c0c0c; }
body.hc-mode table.data-table tbody tr:nth-child(even){ background:#161616; }
body.hc-mode .article .placeholder{ background:#0c0c0c; }

/* ==========================================================================
   Skeleton loading screen
   ========================================================================== */
html.is-loading{ overflow:hidden; }
html.is-loading body{ overflow:hidden; height:100vh; }
#skeletonLoader{
  position:fixed; inset:0; z-index:9999;
  background:var(--paper);
  display:flex; flex-direction:column;
  opacity:1;
  transition:opacity .45s ease;
}
html:not(.is-loading) #skeletonLoader{
  opacity:0;
  pointer-events:none;
}
.sk-topbar{ height:30px; background:var(--indigo-950); flex-shrink:0; }
.sk-header{
  height:94px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px; padding:0 24px; flex-shrink:0;
}
.sk-nav{ height:48px; background:var(--indigo-900); flex-shrink:0; }
.sk-body{ flex:1; padding:28px 24px; max-width:1180px; margin:0 auto; width:100%; box-sizing:border-box; }
.sk-hero{ height:min(62vw,460px); max-height:460px; border-radius:var(--radius-m); margin-bottom:28px; }
.sk-row{ display:flex; gap:20px; margin-bottom:16px; }
.sk-row > *{ flex:1; }
.sk-block{ height:16px; border-radius:4px; }
.sk-block.w60{ width:60%; }
.sk-block.w40{ width:40%; }
.sk-block.h120{ height:120px; border-radius:var(--radius-m); }
.sk-circle{ width:44px; height:44px; border-radius:50%; flex-shrink:0; }

.sk-hero, .sk-block, .sk-circle, .sk-header img, .skeleton-shimmer{
  background:linear-gradient(90deg, #E9E6DA 25%, #F3F1E8 37%, #E9E6DA 63%);
  background-size:400% 100%;
  animation:sk-shimmer 1.4s ease infinite;
}
@keyframes sk-shimmer{
  0%{ background-position:100% 50%; }
  100%{ background-position:0 50%; }
}
@media (prefers-reduced-motion:reduce){
  .sk-hero, .sk-block, .sk-circle, .skeleton-shimmer{ animation:none; }
}

/* per-image lazy shimmer (gallery/hero) */
img.lazy-img{
  background:linear-gradient(90deg, #E9E6DA 25%, #F3F1E8 37%, #E9E6DA 63%);
  background-size:400% 100%;
  animation:sk-shimmer 1.4s ease infinite;
}
img.lazy-img.loaded{ animation:none; background:none; }

/* ==========================================================================
   Working search dropdown
   ========================================================================== */
.header-search{ position:relative; }
.search-results{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:320px;
  max-height:360px;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-pop);
  z-index:90;
  display:none;
  padding:8px;
}
.search-results.open{ display:block; }
.search-results a{
  display:block;
  padding:10px 12px;
  border-radius:var(--radius-s);
  text-decoration:none;
  color:var(--indigo-900);
}
.search-results a:hover, .search-results a.hover{ background:var(--paper); }
.search-results a .sr-title{ font-weight:600; font-size:14px; display:block; }
.search-results a .sr-snippet{ font-size:12.5px; color:var(--slate); display:block; margin-top:2px; }
.search-results .sr-empty{ padding:14px 12px; font-size:13px; color:var(--slate); }
.search-results mark{ background:#FDECE0; color:var(--ochre-600); border-radius:2px; }

/* ==========================================================================
   Screen reader access bar
   ========================================================================== */
.sr-toolbar{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translate(-50%, 130%);
  background:var(--indigo-950);
  color:#fff;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:8px 10px;
  box-shadow:var(--shadow-pop);
  z-index:200;
  transition:transform .25s ease;
}
.sr-toolbar.open{ transform:translate(-50%, 0); }
.sr-toolbar button{
  background:transparent;
  border:none;
  color:#fff;
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:15px;
}
.sr-toolbar button:hover{ background:rgba(255,255,255,.14); }
.sr-toolbar button.sr-primary{ background:var(--ochre-600); }
.sr-toolbar button.sr-primary:hover{ background:#a04f1f; }
.sr-toolbar .sr-label{ font-size:12.5px; padding:0 8px; white-space:nowrap; border-right:1px solid rgba(255,255,255,.18); margin-right:2px; }
[data-screen-reader].sr-active{ background:var(--indigo-800); color:#fff; }

/* ==========================================================================
   Gallery: filters + masonry + lightbox
   ========================================================================== */
.gallery-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.gallery-filter{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-soft);
  padding:9px 18px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.gallery-filter:hover{ border-color:var(--ochre-500); color:var(--ochre-600); }
.gallery-filter.active{ background:var(--indigo-900); border-color:var(--indigo-900); color:#fff; }
.gallery-filter .count{ opacity:.7; font-weight:500; margin-left:4px;}

.masonry{
  columns:4 220px;
  column-gap:14px;
}
@media (max-width:900px){ .masonry{ columns:3 180px; } }
@media (max-width:600px){ .masonry{ columns:2 140px; } }
.masonry-item{
  break-inside:avoid;
  margin-bottom:14px;
  border-radius:var(--radius-m);
  overflow:hidden;
  position:relative;
  border:1px solid var(--line-soft);
  cursor:zoom-in;
  background:#fff;
  display:block;
}
.masonry-item img{ width:100%; display:block; transition:transform .35s ease; }
.masonry-item:hover img{ transform:scale(1.05); }
.masonry-item .mi-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,20,35,.78) 0%, rgba(10,20,35,0) 55%);
  opacity:0;
  transition:opacity .2s ease;
  display:flex;
  align-items:flex-end;
  padding:12px;
}
.masonry-item:hover .mi-overlay{ opacity:1; }
.masonry-item .mi-cat{
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  display:flex;
  align-items:center;
  gap:6px;
}
.masonry-item .mi-zoom{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(10,20,35,.55);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .2s ease;
  font-size:12px;
}
.masonry-item:hover .mi-zoom{ opacity:1; }
.masonry-item.hidden{ display:none; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background:rgba(6,12,22,.94);
  z-index:300;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.lightbox.open{ display:flex; }
.lightbox-stage{
  position:relative;
  max-width:min(1100px, 92vw);
  max-height:74vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-stage img{
  max-width:100%;
  max-height:74vh;
  object-fit:contain;
  border-radius:var(--radius-s);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0;
  transform:scale(.97);
  transition:opacity .25s ease, transform .25s ease;
}
.lightbox-stage img.show{ opacity:1; transform:scale(1); }
.lightbox-caption{
  color:#DCE3EC;
  text-align:center;
  max-width:700px;
  margin-top:16px;
  font-size:13.5px;
}
.lightbox-counter{
  color:#8C99AC;
  font-size:12.5px;
  margin-top:4px;
  letter-spacing:.04em;
}
.lightbox-close{
  position:absolute; top:18px; right:22px;
  width:42px; height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  font-size:17px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background:rgba(255,255,255,.18); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background:rgba(255,255,255,.18); }
.lightbox-nav.prev{ left:0; }
.lightbox-nav.next{ right:0; }
@media (max-width:700px){
  .lightbox-nav{ width:38px; height:38px; font-size:15px; }
  .lightbox-close{ top:10px; right:10px; }
}
.lightbox-thumbs{
  display:flex;
  gap:8px;
  margin-top:20px;
  max-width:90vw;
  overflow-x:auto;
  padding:4px 2px 8px;
}
.lightbox-thumbs img{
  width:56px; height:44px;
  object-fit:cover;
  border-radius:4px;
  opacity:.45;
  cursor:pointer;
  flex-shrink:0;
  border:2px solid transparent;
  transition:opacity .15s, border-color .15s;
}
.lightbox-thumbs img.active{ opacity:1; border-color:var(--ochre-500); }
.lightbox-thumbs img:hover{ opacity:.85; }

/* footer badges (retained real gov links) */
.footer-badges{ display:flex; gap:14px; align-items:center; margin-top:16px; flex-wrap:wrap;}
.footer-badges a{ background:#fff; border-radius:4px; padding:6px 10px; display:flex; align-items:center; }
.footer-badges img{ height:26px; width:auto; display:block; }

/* ==========================================================================
   Mobile refinements
   ========================================================================== */
@media (max-width:600px){
  .util-bar .container{ font-size:11px; row-gap:4px; }
  .util-bar-left{ gap:10px; }
  .util-bar-right{ gap:10px; }
  .util-bar-left a span, .util-bar a{ white-space:normal; }
  .site-header .container{ gap:10px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; }
  .brand img.logo{ width:46px; height:46px; }
  .brand-text h1{ font-size:15.5px; }
  .brand-text .sub{ display:none; }
  .header-search{ flex:1 1 100%; order:3; margin-top:6px; }
  .header-search input{ width:100%; }
  .hero-caption{ padding-bottom:26px; }
  .hero-caption h2{ font-size:22px; }
  .hero-caption p{ font-size:13.5px; }
  .quick-actions{ grid-template-columns:1fr 1fr; }
  .quick-actions a{ padding:16px 12px; font-size:13px; }
  .about-split{ gap:24px; }
  .stat-grid{ grid-template-columns:1fr 1fr; gap:18px; }
  .stat-grid .num{ font-size:24px; }
  .section{ padding:38px 0; }
  .article{ padding:24px 16px; }
  .two-col{ gap:18px; }
  .page-hero{ padding:32px 0 28px; }
  .footer-grid{ gap:26px; }
  .sr-toolbar{ left:16px; right:16px; transform:translateY(130%); width:auto; }
  .sr-toolbar.open{ transform:translateY(0); }
  .sr-toolbar .sr-label{ display:none; }
  .search-results{ width:100%; left:0; right:0; }
}
@media (max-width:400px){
  .quick-actions{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr; }
}

/* nav search icon-only fallback so search never disappears entirely on tablet */
@media (max-width:760px){
  .header-search{ display:flex; }
  .header-search input{ width:100px; font-size:13px; }
}

/* ==========================================================================
   Additions: skeleton loader, search dropdown, language switcher, install btn
   ========================================================================== */

/* Skeleton loader */
#page-skeleton{
  position:fixed; inset:0; z-index:9999; background:var(--paper);
  overflow:hidden; transition:opacity .35s ease;
}
#page-skeleton.hide{ opacity:0; pointer-events:none; }
body.loading{ overflow:hidden; }
.sk-util{ height:30px; background:var(--indigo-950); }
.sk-header{ height:94px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px; padding:0 24px; }
.sk-nav{ height:48px; background:var(--indigo-900); }
.sk-block{
  background:linear-gradient(90deg, var(--line-soft) 25%, #f4f2e9 37%, var(--line-soft) 63%);
  background-size:400% 100%;
  animation:sk-shimmer 1.4s ease infinite;
  border-radius:6px;
}
@keyframes sk-shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }
.sk-logo{ width:56px; height:56px; border-radius:50%; }
.sk-title{ width:280px; height:16px; }
.sk-title.short{ width:160px; height:12px; }
.sk-hero{ height:min(62vw,460px); min-height:280px; margin:0; border-radius:0; }
.sk-container{ max-width:1180px; margin:24px auto; padding:0 24px; display:flex; flex-direction:column; gap:12px; }
.sk-line{ height:14px; width:100%; }
.sk-line.w60{ width:60%; }
.sk-line.w40{ width:40%; }
.sk-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:10px; }
.sk-card{ height:120px; }
@media (max-width:760px){ .sk-cards{ grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce){
  .sk-block{ animation:none; }
}

/* Search dropdown + accessible state */
.header-search{ position:relative; }
.search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-m);
  box-shadow:var(--shadow-pop); max-height:360px; overflow-y:auto;
  display:none; z-index:90;
}
.search-results.open{ display:block; }
.search-results a{
  display:flex; flex-direction:column; gap:2px; padding:10px 14px;
  text-decoration:none; border-bottom:1px solid var(--line-soft);
}
.search-results a:last-child{ border-bottom:none; }
.search-results a:hover, .search-results a:focus-visible{ background:var(--paper); }
.sr-title{ color:var(--indigo-900); font-weight:600; font-size:13.5px; }
.sr-snippet{ color:var(--slate); font-size:12px; }
.search-empty{ padding:14px; font-size:13px; color:var(--slate); }

/* Screen reader active state */
[data-screenreader-toggle].is-active{ color:#fff; }
[data-screenreader-toggle].is-active i{ color:var(--saffron); }

/* Language switcher */
.lang-switch{ position:relative; }
.lang-switch > button{
  background:transparent; border:1px solid #3A4C63; color:#C9D3E0;
  border-radius:3px; padding:3px 9px; font-size:11.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.lang-switch > button:hover{ background:#1B3350; color:#fff; }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-m);
  box-shadow:var(--shadow-pop); min-width:190px; padding:6px; display:none; z-index:95;
}
.lang-menu.open{ display:block; }
.lang-menu button{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; text-align:left; padding:9px 10px; font-size:13.5px;
  color:var(--ink); border-radius:var(--radius-s); cursor:pointer;
}
.lang-menu button:hover{ background:var(--paper); }
.lang-menu button[aria-pressed="true"]{ color:var(--ochre-600); font-weight:700; }
.lang-menu button .beta-tag{ font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--slate); background:var(--paper); border-radius:999px; padding:1px 6px; margin-left:8px; }

/* Translation pending notice on inner pages */
.translation-notice{
  display:none; background:#FBF3EA; border:1px solid #F0D9C2; color:var(--ink-soft);
  font-size:13.5px; padding:12px 16px; border-radius:var(--radius-s); margin-bottom:22px;
}

/* Install app button */
[data-install-app]{
  background:transparent; border:1px solid #3A4C63; color:#C9D3E0;
  border-radius:3px; padding:3px 10px; font-size:11.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
[data-install-app]:hover{ background:#1B3350; color:#fff; }
[data-install-app][hidden]{ display:none; }

/* ==========================================================================
   Instagram-mobile-inspired additions: stories row, bottom tab bar (frosted
   glass / translucent, like IG's tab bar), tightened square gallery grid.
   ========================================================================== */

/* ---- Stories row (mobile home only) ---- */
.stories-row{
  display:none;
  gap:16px;
  padding:16px 16px 14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:#fff;
  border-bottom:1px solid var(--line-soft);
}
.stories-row::-webkit-scrollbar{ display:none; }
.story-item{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-decoration:none;
  width:66px;
}
.story-ring{
  width:58px; height:58px;
  border-radius:50%;
  padding:2.5px;
  background:linear-gradient(135deg, var(--saffron), var(--ochre-600), var(--pine-700));
  display:flex; align-items:center; justify-content:center;
}
.story-ring span{
  width:100%; height:100%;
  border-radius:50%;
  background:#fff;
  border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--indigo-900);
  font-size:19px;
}
.story-item .story-label{
  font-size:11px;
  color:var(--ink-soft);
  text-align:center;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:66px;
}

/* ---- Bottom tab bar: frosted glass, Instagram-style ---- */
.mobile-tabbar{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:120;
  padding-bottom:env(safe-area-inset-bottom, 0);
  background:rgba(10, 24, 41, 0.72);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid rgba(255,255,255,0.12);
  box-shadow:0 -8px 30px rgba(0,0,0,0.18);
}
.mobile-tabbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-around;
  height:56px;
}
.mobile-tabbar a, .mobile-tabbar button{
  appearance:none;
  background:none;
  border:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:rgba(255,255,255,0.62);
  text-decoration:none;
  font-size:9.5px;
  font-family:var(--font-body);
  flex:1;
  height:100%;
  cursor:pointer;
  letter-spacing:.01em;
}
.mobile-tabbar i{ font-size:18px; }
.mobile-tabbar a.active, .mobile-tabbar button.active{ color:#fff; }
.mobile-tabbar a.active i, .mobile-tabbar button.active i{ color:var(--saffron); }

@media (max-width:760px){
  .mobile-tabbar{ display:block; }
  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0)); }
  .stories-row{ display:flex; }
  .back-to-top{ bottom:calc(66px + env(safe-area-inset-bottom, 0)); }
  /* Instagram-style tight square grid for the gallery on mobile */
  .gallery-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:2px;
  }
  .gallery-grid a{ border-radius:0; border:none; }
  .gallery-group{ margin-bottom:26px; }
}

/* ---- Mobile full-screen search overlay (bottom-tab search icon) ---- */
.mobile-search-overlay{
  position:fixed; inset:0; z-index:150;
  background:var(--paper);
  display:none;
  flex-direction:column;
}
.mobile-search-overlay.open{ display:flex; }
.mso-bar{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  background:#fff;
  border-bottom:1px solid var(--line-soft);
  padding-top:calc(14px + env(safe-area-inset-top, 0));
}
.mso-bar button{
  background:none; border:none; font-size:18px; color:var(--indigo-900); cursor:pointer;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mso-bar input{
  flex:1; border:1px solid var(--line); border-radius:999px; padding:10px 16px;
  font-size:15px; font-family:var(--font-body); outline:none; background:var(--paper);
}
.mso-results{ flex:1; overflow-y:auto; }
.mso-results a{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 18px; text-decoration:none; border-bottom:1px solid var(--line-soft);
}
.mso-results .sr-title{ color:var(--indigo-900); font-weight:700; font-size:15px; }
.mso-results .sr-snippet{ color:var(--slate); font-size:12.5px; }
.mso-empty{ padding:24px 18px; color:var(--slate); font-size:14px; text-align:center; }

/* ---- Frosted / translucent footer treatment ---- */
.site-footer{
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,30,51,0.86), rgba(10,24,41,0.96)),
    var(--indigo-950);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.site-footer::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:var(--contour-svg);
  background-size:640px;
  opacity:.05;
  pointer-events:none;
}
.site-footer .container{ position:relative; z-index:1; }