/* ═══════════════════════════════════════
   ROOT & RESET
═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding-top keeps anchor targets clear of the three fixed header
   tiers. Without it a jump to #prospectus (or any in-page link) parks the
   section heading UNDER the header — measured at 154px of the section and
   43px of its heading hidden. Uses the same var as .page padding so the two
   can never drift apart. */
html{scroll-behavior:smooth;font-size:16px;scrollbar-gutter:stable;scroll-padding-top:var(--total-top)}

/* ═══════════════════════════════════════
   CROSS-PAGE NAVIGATION — keep the header stack fixed in one position
   when navigating between the separate page documents (no reload "jump").
   Progressive enhancement: ignored by browsers without View Transitions.
═══════════════════════════════════════ */
@view-transition{navigation:auto}
/* The three header tiers persist across navigations (same name on every page),
   so they morph in place (identical geometry → no visible movement) while the
   page body cross-fades underneath. */
#topbar{view-transition-name:saus-topbar}
#header{view-transition-name:saus-header}
#navbar{view-transition-name:saus-navbar}
::view-transition-group(saus-topbar),
::view-transition-group(saus-header),
::view-transition-group(saus-navbar){animation-duration:.01ms}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* ── Accessibility: visible keyboard focus, skip link, screen-reader-only ── */
:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px;border-radius:2px}
a.skip-link{position:absolute;left:8px;top:-52px;z-index:2000;background:var(--navy);color:var(--white);
  padding:10px 16px;border:2px solid var(--gold);border-radius:3px;
  font-family:var(--ff-sans);font-size:14px;font-weight:600;text-decoration:none;transition:top .18s ease}
a.skip-link:focus{top:8px}
.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}
:root{
  /* Official Palette */
  --navy:      #0A1628;
  --navy-mid:  #122040;
  --navy-light:#1E3160;
  --green:     #00692F;
  --green-lt:  #00873E;
  --red:       #A8200D;
  --red-lt:    #CC2200;
  --gold:      #C9A227;
  --gold-lt:   #E8C04A;
  --white:     #FFFFFF;
  --cream:     #FBFAF8;
  --stone:     #EEECEA;
  --border:    #D0CEC8;
  --border-dk: #B8B5AE;
  --text:      #1A1918;
  --text-mid:  #4A4845;
  --text-lt:   #7A7874;
  /* Typography */
  --ff-serif:  'EB Garamond',Georgia,'Times New Roman',serif;
  --ff-sans:   'Source Sans 3','Segoe UI',sans-serif;
  --ff-mono:   'Source Code Pro',monospace;
  /* Layout */
  --max:       1200px;
  --topbar-h:  32px;
  --header-h:  76px;
  --nav-h:     46px;
  --total-top: 154px;
  --ease:      cubic-bezier(.4,0,.2,1);
  /* spacing scale */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px;--space-16:64px; --space-24:96px;
  /* section rhythm */
  --section-y:96px;
  --prose-measure:68ch;
}

body{
  font-family:var(--ff-sans);
  background:var(--cream);
  color:var(--text);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;font-family:var(--ff-sans)}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}

h1,h2,h3{font-family:var(--ff-serif);color:var(--navy);line-height:1.1;font-weight:700}
h1{font-size:clamp(34px,4.4vw,52px);line-height:1.05;letter-spacing:.005em}
h2{font-size:clamp(28px,3.2vw,40px)}
h3{font-size:clamp(18px,1.7vw,20px);font-weight:600}
.lead,.sec-header .lead{font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--text-mid,#5A5A5A)}
.hero p,.hero-photo .hero-lead,.sec-header .lead,.page-intro p{max-width:var(--prose-measure)}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--stone)}
::-webkit-scrollbar-thumb{background:var(--navy-light);border-radius:2px}

/* ═══════════════════════════════════════
   TOP UTILITY BAR
═══════════════════════════════════════ */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:1100;
  height:var(--topbar-h);
  background:var(--navy);
  border-bottom:1px solid var(--gold);
  display:flex;align-items:center;
}
.topbar-inner{
  max-width:var(--max);margin:0 auto;
  width:100%;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.topbar-left{
  display:flex;align-items:center;gap:0;
  font-family:var(--ff-sans);font-size:11px;
  color:rgba(255,255,255,.7);letter-spacing:.02em;
}
.topbar-left .sep{
  display:inline-block;width:1px;height:14px;
  background:rgba(255,255,255,.2);margin:0 14px;
}
.topbar-flag{
  display:inline-flex;gap:2px;align-items:center;margin-right:14px;
}
.flag-seg{width:18px;height:12px;border-radius:1px}
/* Correct South African flag (image) in the utility bar */
.topbar-flag img{width:24px;height:16px;object-fit:cover;border-radius:1px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.topbar-right{
  display:flex;align-items:center;gap:20px;
}
.topbar-right a{
  font-size:11px;color:rgba(255,255,255,.65);
  display:flex;align-items:center;gap:6px;
  transition:color .2s;text-decoration:none;
}
.topbar-right a:hover{color:var(--gold)}
.topbar-right a svg{width:12px;height:12px;flex-shrink:0}

/* ═══════════════════════════════════════
   OFFICIAL HEADER
═══════════════════════════════════════ */
#header{
  position:fixed;top:var(--topbar-h);left:0;right:0;z-index:1090;
  height:var(--header-h);
  background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
}
.header-inner{
  max-width:var(--max);margin:0 auto;
  width:100%;padding:0 32px;
  display:flex;align-items:center;gap:24px;
}
.header-seal{
  width:56px;height:56px;flex-shrink:0;
  border-radius:50%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  border:3px solid var(--gold);
}
.header-seal-inner{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
}
.seal-top-stripe{
  position:absolute;top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(to right,var(--navy) 33%,var(--green) 33% 67%,var(--red) 67%);
}
.seal-globe{
  font-size:24px;line-height:1;position:relative;z-index:1;
}
.seal-text{
  font-family:var(--ff-mono);font-size:6px;color:var(--gold);
  letter-spacing:.08em;text-align:center;font-weight:500;
  position:relative;z-index:1;text-transform:uppercase;
}
.seal-stars{
  display:flex;gap:2px;position:relative;z-index:1;
}
.seal-stars span{font-size:5px;color:var(--gold)}

.header-ident{display:flex;flex-direction:column}
.header-ident-main{
  font-family:var(--ff-serif);
  font-size:20px;font-weight:700;
  color:var(--navy);line-height:1.15;
  letter-spacing:.01em;
}
.header-ident-main em{font-style:normal;color:var(--green)}
.header-ident-sub{
  font-family:var(--ff-sans);font-size:12px;
  color:var(--text-mid);letter-spacing:.04em;
  font-weight:400;margin-top:2px;
}
.header-divider{
  width:1px;height:48px;background:var(--border);
  margin:0 8px;flex-shrink:0;
}
.header-established{
  display:flex;flex-direction:column;
  font-family:var(--ff-mono);font-size:10px;
  color:var(--text-lt);letter-spacing:.1em;
  text-transform:uppercase;line-height:1.8;
}
.header-established strong{
  font-family:var(--ff-serif);font-size:20px;
  color:var(--navy);letter-spacing:.02em;font-weight:600;
}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-salogo{display:block;width:48px;height:48px;overflow:hidden;border-radius:2px;flex-shrink:0}
.header-salogo img{width:100%;height:100%;object-fit:cover;display:block}
.header-contact-btn{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:3px;
  background:var(--navy);color:var(--white);
  font-size:13px;font-weight:600;border:none;
  transition:background .2s;
  letter-spacing:.02em;
  text-decoration:none;
}
.header-contact-btn:hover{background:var(--navy-light)}
.hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;padding:6px;
}
.hamburger span{width:22px;height:2px;background:var(--navy);border-radius:1px;transition:.3s}

/* ═══════════════════════════════════════
   NAVIGATION BAR
═══════════════════════════════════════ */
#navbar{
  position:fixed;
  top:calc(var(--topbar-h) + var(--header-h));
  left:0;right:0;z-index:1080;
  height:var(--nav-h);
  background:var(--navy-mid);
  border-bottom:2px solid var(--green);
  /* Separate the fixed header stack from the content/hero below:
     a soft drop shadow (reads on light pages) + a 1px light hairline just
     under the green border (reads on dark heroes, where a shadow alone blends). */
  box-shadow:0 1px 0 rgba(255,255,255,.10), 0 6px 16px rgba(10,22,40,.18);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;
  width:100%;padding:0 32px;
  height:100%;display:flex;align-items:center;
}
.nav-links{display:flex;height:100%}
.nav-item{
  height:100%;display:flex;align-items:center;
  padding:0 12px;position:relative;
  font-size:13.5px;font-weight:600;
  color:rgba(255,255,255,.75);
  letter-spacing:.03em;text-transform:uppercase;
  cursor:pointer;border:none;background:none;
  font-family:var(--ff-sans);
  transition:color .2s,background .2s;
  white-space:nowrap;
  text-decoration:none;
}
.nav-item:hover,.mobile-nav-item:hover,.header-contact-btn:hover{text-decoration:none}
.nav-item::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;
  height:2px;background:var(--gold);
  transform:scaleX(0);transition:transform .25s var(--ease);
}
.nav-item:hover{color:var(--white);background:rgba(255,255,255,.05)}
.nav-item:hover::after,.nav-item.active::after{transform:scaleX(1)}
.nav-item.active{color:var(--white)}
.nav-ref{
  margin-left:auto;
  font-family:var(--ff-mono);font-size:11px;
  color:rgba(255,255,255,.3);letter-spacing:.08em;
}
/* Nav fits the 961–1200px band: the REF badge is decorative, and item padding
   tightens before the nav can overflow. Below 960px the navbar is hidden entirely. */
@media(max-width:1200px){
  .nav-ref{display:none}
}
@media(max-width:1060px){
  .nav-item{padding:0 8px;font-size:13px}
}

/* Mobile nav */
.mobile-nav{
  display:none;position:fixed;
  top:calc(var(--topbar-h) + var(--header-h));
  left:0;right:0;z-index:1079;
  background:var(--navy);
  border-bottom:2px solid var(--green);
  flex-direction:column;padding:8px 0;
}
.mobile-nav.open{display:flex}
.mobile-nav-item{
  padding:14px 32px;font-size:14px;font-weight:600;
  color:rgba(255,255,255,.75);text-transform:uppercase;
  letter-spacing:.04em;cursor:pointer;border:none;background:none;
  font-family:var(--ff-sans);text-align:left;
  border-left:3px solid transparent;transition:all .2s;
  text-decoration:none;
}
.mobile-nav-item:hover,.mobile-nav-item.active{
  color:var(--white);background:rgba(255,255,255,.05);
  border-left-color:var(--gold);
}

/* ═══════════════════════════════════════
   PAGE SYSTEM
═══════════════════════════════════════ */
.page{display:none;min-height:100vh;padding-top:var(--total-top);animation:pgIn .35s var(--ease)}
.page.active{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════ */
.breadcrumb-bar{
  background:var(--stone);
  border-bottom:1px solid var(--border);
  padding:9px 0;
}
.breadcrumb-inner{
  max-width:var(--max);margin:0 auto;
  padding:0 32px;
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--text-lt);
  font-family:var(--ff-sans);
}
.breadcrumb-inner span{cursor:pointer;transition:color .2s}
.breadcrumb-inner span:hover{color:var(--green)}
.breadcrumb-inner .sep{color:var(--border-dk);font-size:11px;user-select:none}
.breadcrumb-inner .current{color:var(--text-mid);font-weight:500}

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.section{padding:var(--section-y) 0}
.section-lg{padding:128px 0}
.section-sm{padding:64px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}

/* ═══════════════════════════════════════
   OFFICIAL HERO
═══════════════════════════════════════ */
.official-hero{
  background:var(--navy);
  color:var(--white);
  padding:88px 40px;
  position:relative;overflow:hidden;
}
.official-hero::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:4px;
  background:linear-gradient(to right,var(--navy) 20%,var(--green) 20% 40%,var(--gold) 40% 60%,var(--red) 60% 80%,var(--navy) 80%);
}
.hero-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.hero-ref{
  font-family:var(--ff-mono);font-size:11px;
  color:rgba(255,255,255,.4);letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.hero-ref::before{
  content:'';display:block;width:32px;height:1px;background:var(--gold);
}
.hero-title{
  font-family:var(--ff-serif);
  font-size:clamp(36px,5.5vw,68px);
  font-weight:700;line-height:1.1;
  color:var(--white);margin-bottom:20px;
  max-width:760px;
}
.hero-title em{font-style:italic;color:var(--gold)}
.hero-lead{
  font-size:clamp(15px,2vw,18px);
  color:rgba(255,255,255,.7);
  max-width:560px;line-height:1.75;
  margin-bottom:36px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ═══ HERO BG IMAGE (home page) ═══ */
.hero-bg{
  background-image:
    linear-gradient(to right, rgba(10,22,40,.92) 45%, rgba(10,22,40,.55) 100%),
    url('/home/homeIMG.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ═══════════════════════════════════════
   ANNOUNCEMENT BANNER
═══════════════════════════════════════ */
.announcement{
  background:var(--navy-light);
  color:var(--white);
  padding:14px 32px;
  display:flex;align-items:center;gap:16px;
  border-bottom:2px solid var(--gold);
}
.announcement-badge{
  flex-shrink:0;background:var(--red);
  padding:3px 10px;border-radius:2px;
  font-family:var(--ff-mono);font-size:10px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;
}
.announcement p{font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.4}
.announcement p strong{color:var(--white)}
.announcement-close{
  margin-left:auto;background:none;border:none;
  color:rgba(255,255,255,.4);font-size:18px;
  cursor:pointer;padding:4px 8px;flex-shrink:0;
  transition:color .2s;
}
.announcement-close:hover{color:var(--white)}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:6px;
  font:600 14px/1 var(--ff-sans);cursor:pointer;border:0;
  transition:transform .15s,background .2s,box-shadow .2s;text-decoration:none;
}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--navy-light);box-shadow:0 4px 16px rgba(10,22,40,.25)}
.btn-green{background:var(--green);color:var(--white)}
.btn-green:hover{background:var(--green-lt);box-shadow:0 4px 16px rgba(0,105,47,.3)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-lt)}
.btn-outline{background:transparent;border:1.5px solid var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--stone)}
.btn-outline-white{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-outline-white:hover{border-color:var(--white);background:rgba(255,255,255,.07)}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-lg{padding:15px 28px;font-size:15px}

/* ═══════════════════════════════════════
   OFFICIAL SECTION HEADER
═══════════════════════════════════════ */
.sec-header{margin-bottom:56px}
.sec-header .ref{
  font-family:var(--ff-mono);font-size:11px;
  color:var(--text-lt);letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.sec-header .ref::before{
  content:'';display:block;width:24px;height:2px;background:var(--green);
}
/* .kicker — gold eyebrow label used above section h2 */
.sec-header .kicker,.kicker{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--ff-sans);letter-spacing:.12em;text-transform:uppercase;color:#8A6D14}
.kicker::before{content:'';width:24px;height:2px;background:var(--gold)}
/* Whitespace refresh: cap long-form measure so text never spans the full wrap */
.sec-header p,.resolution-body p,.timeline-body,.info-card p,.panel-body p{max-width:var(--prose-measure)}
.sec-header h2{
  font-family:var(--ff-serif);
  font-size:clamp(28px,4vw,42px);
  font-weight:700;line-height:1.2;
  color:var(--navy);
  margin-top:var(--space-3);
}
.sec-header h2 em{font-style:italic;color:var(--green)}
.sec-header .lead{
  margin-top:14px;
}

/* ═══════════════════════════════════════
   OFFICIAL PANEL / CARD
═══════════════════════════════════════ */
.panel{
  background:#fff;
  border:1px solid var(--stone);
  border-radius:12px;
  box-shadow:none;
  padding:40px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
  overflow:hidden;
}
.panel:has(.panel-header){padding:0}
.panel-header{
  padding:20px 28px;
  background:var(--navy);
  color:var(--white);
  display:flex;align-items:center;gap:14px;
}
.panel-header h3{
  font-family:var(--ff-serif);
  font-size:18px;font-weight:600;
  color:var(--white);
}
.panel-header .panel-icon{
  width:36px;height:36px;
  background:rgba(255,255,255,.1);
  border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.panel-body{padding:40px}

/* ═══════════════════════════════════════
   STAT ROW
═══════════════════════════════════════ */
.stat-strip{
  background:var(--white);
  border-top:3px solid var(--navy);
  border-bottom:1px solid var(--border);
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat-cell{
  padding:44px 28px;
  border-right:1px solid var(--border);
  position:relative;
}
.stat-cell:last-child{border-right:none}
.stat-num,.stat b,.stat .num{
  display:block;font-family:var(--ff-serif);
  font-size:clamp(28px,3vw,36px);
  font-weight:700;line-height:1;
  color:var(--navy);
  margin-bottom:6px;
}
.stat-label,.stat span,.stat .label{
  font:600 10px/1 var(--ff-sans);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mid,#5A5A5A);
}
.stat-cell::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:3px;
  background:var(--green);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.stat-cell:hover::before{transform:scaleX(1)}

/* ═══════════════════════════════════════
   OFFICIAL BLOCK QUOTE
═══════════════════════════════════════ */
.official-quote{
  margin:40px 0;
  padding:32px 36px;
  background:var(--navy);
  border-left:5px solid var(--gold);
  border-radius:0 2px 2px 0;
  position:relative;
}
/* When a pull-quote is the last element in a section, drop its bottom
   margin so it doesn't stack on the section's own 72px bottom padding
   (was creating an oversized gap before the next section). */
.official-quote:last-child{margin-bottom:0}
.official-quote::before{
  content:'\201C';
  position:absolute;top:-16px;left:28px;
  font-family:var(--ff-serif);font-size:80px;
  color:rgba(255,255,255,.08);line-height:1;
}
.official-quote p{
  font-family:var(--ff-serif);
  font-size:20px;font-style:italic;
  color:rgba(255,255,255,.9);
  line-height:1.6;
  position:relative;z-index:1;
  margin:0;
}
.official-quote cite{
  display:block;margin-top:14px;
  font-family:var(--ff-mono);font-size:11px;
  color:var(--gold);letter-spacing:.1em;
  text-transform:uppercase;font-style:normal;
}

/* ═══════════════════════════════════════
   OFFICIAL TABLE
═══════════════════════════════════════ */
.official-table{
  width:100%;border-collapse:collapse;
  font-size:14.5px;
}
.official-table thead tr{
  background:var(--navy);
}
.official-table th{
  padding:14px 18px;
  font-family:var(--ff-sans);font-size:11px;
  font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
  text-align:left;
}
.official-table td{
  padding:15px 18px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  vertical-align:top;
}
.official-table tbody tr:hover td{background:var(--stone)}
.official-table td:first-child{font-weight:600;color:var(--navy)}
.official-table tfoot td{
  background:var(--stone);
  font-size:12px;color:var(--text-lt);
  padding:10px 18px;
  font-style:italic;
}

/* ═══════════════════════════════════════
   CONTENT CARD (info tile)
═══════════════════════════════════════ */
.info-card{
  background:#fff;
  border:1px solid var(--stone);
  border-radius:12px;
  box-shadow:none;
  padding:40px;
  position:relative;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.info-card-icon{
  width:44px;height:44px;
  border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  margin-bottom:16px;
}
.info-card-icon.green{background:rgba(0,105,47,.08)}
.info-card-icon.navy{background:rgba(10,22,40,.06)}
.info-card-icon.red{background:rgba(168,32,13,.08)}
.info-card-icon.gold{background:rgba(201,162,39,.1)}
.info-card h3{
  font-family:var(--ff-serif);
  font-size:18px;font-weight:600;
  color:var(--navy);margin-bottom:8px;
  line-height:normal;
}
.info-card p{font-size:15px;color:var(--text-mid);line-height:1.7}

/* ═══════════════════════════════════════
   POLICY / RESOLUTION CARD
═══════════════════════════════════════ */
.resolution{
  border:1px solid var(--border);
  background:var(--white);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:24px;
  transition:box-shadow .2s;
}
.resolution:hover{box-shadow:0 4px 16px rgba(10,22,40,.07)}
.resolution-head{
  padding:20px 24px;
  display:flex;align-items:flex-start;gap:16px;
  border-bottom:1px solid var(--border);
}
.res-num{
  font-family:var(--ff-mono);font-size:11px;
  color:var(--white);
  background:var(--navy);
  padding:4px 10px;border-radius:2px;
  letter-spacing:.08em;flex-shrink:0;margin-top:2px;
}
.res-num.green{background:var(--green)}
.res-num.red{background:var(--red)}
.res-num.gold{background:var(--gold);color:var(--navy)}
.resolution-title{
  font-family:var(--ff-serif);
  font-size:18px;font-weight:600;color:var(--navy);
  margin-bottom:4px;
}
.resolution-meta{
  font-size:12px;color:var(--text-lt);
  display:flex;gap:16px;flex-wrap:wrap;
}
.resolution-body{padding:20px 24px}
.resolution-body p{font-size:14.5px;color:var(--text-mid);line-height:1.7}
.resolution-footer{
  padding:14px 24px;
  background:var(--stone);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.progress-track{
  flex:1;height:5px;
  background:var(--border);border-radius:1px;
  overflow:hidden;min-width:80px;
}
.progress-fill{height:100%;background:var(--green);border-radius:1px}
.progress-fill.red{background:var(--red)}
.progress-fill.gold{background:var(--gold)}
.progress-label{
  font-family:var(--ff-mono);font-size:11px;
  color:var(--text-lt);letter-spacing:.06em;
  white-space:nowrap;
}

/* ═══════════════════════════════════════
   LEADER
═══════════════════════════════════════ */
.leader-feature{
  background:var(--white);border:1px solid var(--border);
  border-radius:2px;padding:36px;
  display:flex;gap:32px;align-items:flex-start;
  border-top:4px solid var(--navy);
}
.leader-avatar-lg{
  width:100px;height:100px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-serif);font-size:32px;font-weight:700;
  color:var(--white);flex-shrink:0;
  border:3px solid var(--gold);
  overflow:hidden;
}
.leader-avatar-lg img,.leader-avatar-sm img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
}
.leader-avatar-sm{overflow:hidden;}
.leader-card-sm{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:2px;
  padding:22px;text-align:center;
  border-top:3px solid var(--navy);
  transition:box-shadow .2s;
}
.leader-card-sm:hover{box-shadow:0 4px 16px rgba(10,22,40,.08)}
.leader-avatar-sm{
  width:64px;height:64px;border-radius:50%;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-serif);font-size:18px;font-weight:700;
  color:var(--white);
  border:2px solid var(--border);
}
.leader-name{font-weight:700;font-size:15px;color:var(--navy);margin-bottom:3px}
.leader-role{font-size:12.5px;color:var(--green);font-weight:600;margin-bottom:3px}
.leader-uni{font-family:var(--ff-mono);font-size:10px;color:var(--text-lt);letter-spacing:.06em;text-transform:uppercase}

/* ═══════════════════════════════════════
   NEWS
═══════════════════════════════════════ */
.news-item{
  display:flex;gap:24px;
  padding:24px 0;
  border-bottom:1px solid var(--border);
  align-items:flex-start;
}
.news-item:last-child{border-bottom:none}
.news-date-col{
  flex-shrink:0;width:64px;text-align:center;
}
.news-day{
  font-family:var(--ff-serif);font-size:32px;font-weight:700;
  color:var(--navy);line-height:1;
}
.news-month{
  font-family:var(--ff-mono);font-size:10px;
  color:var(--text-lt);letter-spacing:.1em;text-transform:uppercase;
}
.news-type{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;
  border-radius:2px;display:inline-block;margin-bottom:8px;font-weight:500;
}
.news-type.statement{background:rgba(0,105,47,.1);color:var(--green)}
.news-type.urgent{background:rgba(168,32,13,.1);color:var(--red)}
.news-type.policy{background:rgba(10,22,40,.08);color:var(--navy)}
.news-type.congress{background:rgba(201,162,39,.15);color:#7a5a00}
.news-title{
  font-family:var(--ff-serif);font-size:18px;font-weight:600;
  color:var(--navy);margin-bottom:6px;line-height:1.35;cursor:pointer;
}
.news-title:hover{color:var(--green)}
.news-excerpt{font-size:13.5px;color:var(--text-mid);line-height:1.65}
.news-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;font-size:13px;font-weight:600;
  color:var(--green);cursor:pointer;
}

/* ═══════════════════════════════════════
   EVENT
═══════════════════════════════════════ */
.event-row{
  background:var(--white);border:1px solid var(--border);
  border-radius:2px;padding:24px;
  display:flex;gap:24px;align-items:flex-start;
  margin-bottom:12px;
  border-left:4px solid var(--navy);
  transition:box-shadow .2s;
}
.event-row:hover{box-shadow:0 4px 16px rgba(10,22,40,.07)}
.event-row.green{border-left-color:var(--green)}
.event-row.red{border-left-color:var(--red)}
.event-row.gold{border-left-color:var(--gold)}
.event-cal{
  flex-shrink:0;width:60px;
  text-align:center;
  background:var(--navy);
  border-radius:2px;padding:8px 6px;color:var(--white);
}
.event-cal-month{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.event-cal-day{font-family:var(--ff-serif);font-size:28px;font-weight:700;line-height:1.1}
.event-body-title{
  font-family:var(--ff-serif);font-size:18px;font-weight:600;
  color:var(--navy);margin-bottom:6px;
}
.event-meta{
  display:flex;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-lt);margin-bottom:8px;
}
.event-desc{font-size:14px;color:var(--text-mid);line-height:1.65}

/* ═══════════════════════════════════════
   TIMELINE
═══════════════════════════════════════ */
.timeline{position:relative;padding-left:36px}
.timeline::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;
  width:2px;background:var(--border);
}
.timeline-item{position:relative;margin-bottom:36px}
.timeline-dot{
  position:absolute;left:-41px;top:5px;
  width:12px;height:12px;border-radius:50%;
  background:var(--green);
  border:3px solid var(--white);
  box-shadow:0 0 0 2px var(--green);
}
.timeline-year{
  font-family:var(--ff-mono);font-size:11px;
  color:var(--green);letter-spacing:.1em;margin-bottom:6px;
  text-transform:uppercase;
}
.timeline-title{
  font-family:var(--ff-serif);font-size:17px;
  font-weight:600;color:var(--navy);margin-bottom:6px;
}
.timeline-body{font-size:14px;color:var(--text-mid);line-height:1.65}

/* ═══════════════════════════════════════
   FORM
═══════════════════════════════════════ */
.form-group{margin-bottom:20px}
.form-label{
  display:block;font-size:13px;font-weight:600;
  color:var(--navy);margin-bottom:6px;
  letter-spacing:.02em;
}
.form-label .req{color:var(--red);margin-left:2px}
.form-control{
  width:100%;padding:11px 14px;
  border:1.5px solid var(--border-dk);
  border-radius:2px;font-size:14.5px;
  font-family:var(--ff-sans);color:var(--text);
  background:var(--white);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.form-control:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(10,22,40,.08);
}
.form-control::placeholder{color:var(--text-lt)}
textarea.form-control{resize:vertical;min-height:110px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-note{
  font-size:12px;color:var(--text-lt);
  margin-top:6px;line-height:1.5;
}
.checkbox-group{display:flex;gap:10px;align-items:flex-start;margin-bottom:24px}
.checkbox-group input{accent-color:var(--green);flex-shrink:0;margin-top:3px;width:15px;height:15px}
.checkbox-group label{font-size:13px;color:var(--text-mid);line-height:1.55}

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
.contact-row{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px;background:var(--white);
  border:1px solid var(--border);border-radius:2px;
  margin-bottom:10px;
}
.contact-icon{
  width:40px;height:40px;border-radius:2px;
  background:rgba(10,22,40,.06);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.contact-label{font-size:12px;color:var(--text-lt);margin-bottom:2px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.contact-value{font-size:15px;color:var(--navy);font-weight:500}
.contact-value a{color:var(--green);text-decoration:none}

/* ═══════════════════════════════════════
   OFFICIAL SIDEBAR
═══════════════════════════════════════ */
.sidebar-panel{
  background:var(--white);border:1px solid var(--border);
  border-radius:2px;padding:24px;margin-bottom:20px;
  border-top:3px solid var(--green);
}
.sidebar-title{
  font-family:var(--ff-serif);font-size:16px;font-weight:600;
  color:var(--navy);margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.sidebar-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--stone);
  font-size:14px;color:var(--text);cursor:pointer;
  transition:color .2s;text-decoration:none;
}
.sidebar-link:last-child{border-bottom:none}
.sidebar-link:hover,.sidebar-link.active{color:var(--green)}
.sidebar-link.active{font-weight:600}
.sidebar-link::before{content:'›';color:var(--green);font-size:16px;flex-shrink:0}

/* ═══════════════════════════════════════
   LAYOUT WITH SIDEBAR
═══════════════════════════════════════ */
.with-sidebar{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.sidebar{position:sticky;top:calc(var(--total-top) + 20px)}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
#footer{
  background:var(--navy);
  color:var(--white);
  margin-top:0;
}
.footer-gov-bar{
  background:var(--navy-mid);
  padding:18px 32px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-gov-bar-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;gap:24px;
  flex-wrap:wrap;
}
.footer-gov-bar-inner p{
  font-size:12px;color:rgba(255,255,255,.45);
  font-family:var(--ff-mono);margin:0;letter-spacing:.04em;
}
.footer-main{padding:64px 32px 40px}
.footer-main-inner{max-width:var(--max);margin:0 auto}
.footer-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-brand-name{
  font-family:var(--ff-serif);font-size:20px;font-weight:700;
  color:var(--white);margin-bottom:4px;
}
.footer-brand-sub{
  font-family:var(--ff-mono);font-size:10px;
  color:rgba(255,255,255,.6);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:16px;
}
.footer-brand-desc{
  font-size:13.5px;color:rgba(255,255,255,.6);
  line-height:1.7;max-width:240px;margin-bottom:24px;
}
.footer-social{display:flex;gap:10px}
.footer-social a{
  width:36px;height:36px;border-radius:2px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;text-decoration:none;
  transition:background .2s;cursor:pointer;
}
.footer-social a:hover{background:rgba(255,255,255,.12)}
.footer-col-title{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:18px;padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-col button,.footer-col a{
  display:block;width:100%;text-align:left;
  font-size:13.5px;color:rgba(255,255,255,.72);
  background:none;border:none;padding:5px 0;
  cursor:pointer;font-family:var(--ff-sans);
  text-decoration:none;transition:color .2s;
  line-height:1.5;
}
.footer-col button:hover,.footer-col a:hover{color:var(--white)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
}
.footer-bottom p{
  font-size:12px;color:rgba(255,255,255,.62);
  font-family:var(--ff-mono);letter-spacing:.04em;margin:0;
}
.footer-stripe{
  height:4px;
  background:linear-gradient(to right,var(--navy) 15%,var(--green) 15% 38%,var(--gold) 38% 62%,var(--red) 62% 85%,var(--navy) 85%);
}

/* ═══ BADGE / TAG ═══ */
.badge{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:2px;
  font-family:var(--ff-mono);font-size:10.5px;
  font-weight:500;letter-spacing:.06em;text-transform:uppercase;
}
.badge-green{background:rgba(0,105,47,.1);color:var(--green)}
.badge-navy{background:rgba(10,22,40,.08);color:var(--navy)}
.badge-red{background:rgba(168,32,13,.1);color:var(--red)}
.badge-gold{background:rgba(201,162,39,.15);color:#7a5a00}
.badge-gray{background:var(--stone);color:var(--text-lt)}

/* ═══ TOAST & COOKIE ═══ */
#toast{
  position:fixed;bottom:32px;right:32px;
  background:var(--navy);color:var(--white);
  padding:14px 22px;border-radius:2px;
  font-size:14px;font-weight:500;
  border-left:4px solid var(--green);
  transform:translateY(80px);opacity:0;
  transition:all .4s var(--ease);z-index:9999;
  max-width:340px;line-height:1.4;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}
#toast.show{transform:translateY(0);opacity:1}
#cookie{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--navy-mid);color:var(--white);
  padding:18px 32px;
  display:flex;align-items:center;gap:24px;
  z-index:8000;border-top:3px solid var(--gold);
  transform:translateY(100%);transition:transform .5s var(--ease);
  flex-wrap:wrap;
}
#cookie.show{transform:translateY(0)}
#cookie p{font-size:13px;color:rgba(255,255,255,.7);flex:1;min-width:200px;margin:0}
#cookie p a{color:var(--gold)}
.cookie-btns{display:flex;gap:10px}
.c-accept{
  background:var(--green);color:var(--white);border:none;
  padding:9px 20px;border-radius:2px;font-size:13px;
  font-weight:600;cursor:pointer;font-family:var(--ff-sans);
}
.c-decline{
  background:transparent;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.2);
  padding:9px 20px;border-radius:2px;font-size:13px;
  cursor:pointer;font-family:var(--ff-sans);
}

/* ═══════════════════════════════════════
   PILLAR GRID (home mandate section)
═══════════════════════════════════════ */
.pillar-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-4);
  margin-bottom:48px;
}
.pillar{
  padding:var(--space-6);
  position:relative;
  background:#fff;
  border:1px solid var(--stone);
  border-radius:12px;
  box-shadow:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.pillar-icon{
  width:48px;height:48px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.pillar-icon.p-green{background:rgba(0,105,47,.08);color:var(--green)}
.pillar-icon.p-navy{background:rgba(10,22,40,.06);color:var(--navy)}
.pillar-icon.p-red{background:rgba(168,32,13,.08);color:var(--red)}
.pillar-icon.p-gold{background:rgba(201,162,39,.12);color:var(--gold)}
.pillar-icon svg{width:22px;height:22px}
.pillar h3{font-family:var(--ff-serif);font-size:18px;font-weight:600;color:var(--navy);margin-bottom:10px;line-height:normal}
.pillar p{font-size:13.5px;color:var(--text-mid);line-height:1.7;margin:0}

/* ═══════════════════════════════════════
   UNIVERSITY LOGOS MARQUEE
═══════════════════════════════════════ */
.logos-strip{
  background:var(--stone);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:28px 0;
  overflow:hidden;
}
.logos-strip-label{
  text-align:center;
  font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-lt);margin-bottom:18px;
}
.logos-track-wrap{overflow:hidden;position:relative}
.logos-track-wrap::before,.logos-track-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;
}
.logos-track-wrap::before{left:0;background:linear-gradient(to right,var(--stone),transparent)}
.logos-track-wrap::after{right:0;background:linear-gradient(to left,var(--stone),transparent)}
.logos-track{
  display:flex;align-items:center;gap:44px;
  animation:scroll-logos 45s linear infinite;
  width:max-content;padding:0 22px;
}
.logos-track:hover{animation-play-state:paused}
.logos-track img{
  height:42px;width:auto;max-width:120px;
  opacity:.85;filter:grayscale(70%);
  transition:opacity .25s,filter .25s;
  flex-shrink:0;object-fit:contain;display:block;
}
.logos-track img:hover{opacity:1;filter:none}
/* Reduced-motion: don't freeze the marquee mid-scroll (which hides most logos) —
   stop animating and let the logos wrap into a centred, fully-visible row. */
@media(prefers-reduced-motion:reduce){
  .logos-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%;gap:20px 34px}
}
@keyframes scroll-logos{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ═══════════════════════════════════════
   SVG ICON SIZING (all icon containers)
═══════════════════════════════════════ */
.info-card-icon svg{width:22px;height:22px}
.panel-icon svg{width:20px;height:20px;flex-shrink:0}
.contact-icon svg{width:20px;height:20px;flex-shrink:0}
.footer-social svg{width:16px;height:16px;flex-shrink:0}
.event-meta-icon{display:inline-flex;align-items:center;gap:5px}
.event-meta-icon svg{width:13px;height:13px;flex-shrink:0;opacity:.7}

/* ═══════════════════════════════════════
   EVENTS CTA BAND
═══════════════════════════════════════ */
.cta-band{
  background:var(--navy-mid);
  padding:72px 32px;
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;right:-80px;top:-80px;
  width:360px;height:360px;border-radius:50%;
  background:rgba(255,255,255,.03);
}
.cta-band-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
  position:relative;z-index:1;
}
.cta-band-text .cta-ref{
  font-family:var(--ff-mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;
}
.cta-band-text h2{
  font-family:var(--ff-serif);
  font-size:clamp(26px,3.5vw,38px);
  font-weight:700;color:var(--white);
  margin-bottom:10px;line-height:1.2;
}
.cta-band-text h2 em{font-style:italic;color:var(--gold)}
.cta-band-text p{color:rgba(255,255,255,.6);max-width:480px;font-size:15px;line-height:1.7;margin:0}

/* ═══ RESPONSIVE ═══ */
@media(max-width:960px){
  /* The nav has collapsed to the hamburger, so the navy nav bar is empty —
     hide it and move the green accent onto the header to reclaim ~52px of a
     phone's screen. !important on --total-top beats leftover per-page recalcs. */
  #navbar{display:none!important}
  #header{border-bottom:3px solid var(--green)}
  :root{--total-top:calc(var(--topbar-h) + var(--header-h))!important}
  .with-sidebar{grid-template-columns:1fr}
  .sidebar{position:static}
  .footer-cols{grid-template-columns:1fr 1fr;gap:32px}
  /* !important so they beat the per-page inline base rules that load after saus.css
     (e.g. each page's own .hamburger{display:none}) — keeps the mobile menu working everywhere. */
  .nav-links{display:none!important}
  .hamburger{display:flex!important}
  .nav-ref{display:none!important}
  /* Tablet band (641–960px): the hamburger is on but every desktop header
     extra was still rendered — content measured 90px inside the fixed 76px
     #header at 768px (name wrapped to two lines, "9TH CONGRESS" clipped under
     the nav rule) and the topbar labels wrapped past its 32px. Hide the same
     extras the phone rule below hides, one breakpoint earlier. The SA flag and
     Contact button fit once the subtitle and established block are gone. */
  .header-established,.header-divider,.header-ident-sub{display:none!important}
  .topbar-left > span{display:none!important}
  .topbar-left > span:nth-child(2){display:inline!important}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-cell:nth-child(2){border-right:none}
  .stat-cell:nth-child(3){border-right:1px solid var(--border)}
  .stat-cell:nth-child(1),.stat-cell:nth-child(2){border-bottom:1px solid var(--border)}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .pillar-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:641px) and (max-width:960px){
  /* Tablet only: keep the org name and Contact button on one line. Not
     applied below 641px — the standalone pages' larger name font would push
     the header 22px past a 320px viewport. */
  .header-ident-main,.header-contact-btn{white-space:nowrap}
}
@media(max-width:640px){
  .pillar-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  :root{--header-h:72px;--total-top:calc(var(--topbar-h) + 72px)!important}
  .wrap{padding:0 20px}
  /* !important so these win over the per-page inline header rules that load
     after saus.css in the <head> — guarantees an identical mobile header everywhere. */
  .header-established,.header-divider{display:none!important}
  .header-salogo{display:none!important}
  /* Declutter: drop the long descriptive subtitle on mobile, keep the name prominent */
  .header-ident-sub{display:none!important}
  .header-ident-main{font-size:18px!important;line-height:1.2!important}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .footer-cols{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .official-hero{padding:48px 20px}
  .section{padding:56px 0}
  .section-lg{padding:72px 0}
  .section-sm{padding:40px 0}
  .sec-header{margin-bottom:40px}
  .leader-feature{flex-direction:column;gap:20px}
  .news-item{flex-direction:column;gap:10px}
  /* Topbar: strip utility labels (they overflow the 38px bar), keep the
     flag (if present) + tap-to-call phone. Hide the long email. */
  .topbar-inner{padding:0 16px}
  .topbar-left > span:not(.topbar-flag){display:none!important}
  .topbar-right{gap:0}
  .topbar-right a[href^="mailto:"]{display:none!important}
  /* Header: drop the Contact button (reachable via the menu) so the org
     name has room; give the seal + name breathing space. */
  .header-inner{gap:16px!important;padding:0 16px!important}
  .header-contact-btn{display:none!important}
  /* In-page notice (#ann): on phones the badge, text and close button sat in
     one row, squeezing the message into a narrow column. Stack them. */
  .announcement{flex-wrap:wrap;padding:12px 44px 12px 16px;gap:8px 12px;position:relative}
  .announcement p{flex:1 1 100%;font-size:13px}
  .announcement-close{position:absolute;top:10px;right:12px}
}
@media(max-width:480px){
  /* Keep the seal large enough to read clearly on a phone */
  .header-seal{width:56px!important;height:56px!important}
  /* Let the name wrap to two lines ("Union of Students" stays together via
     the em's nowrap). With the base nowrap the header ran 21–42px past a
     320px viewport on every page. */
  .header-ident-main{font-size:16.5px!important;white-space:normal!important;line-height:1.15!important}
}
@media(max-width:400px){
  /* Narrow phones (320–400px): grid children default to min-width:auto, so
     a single wide child (the matcher's subject rows, the leadership sidebar,
     an unwrapped section ref) forced the whole column past the viewport —
     measured 21–42px of horizontal scroll on about/, apply/ and leadership/.
     Let grid items shrink and wrap instead. */
  .with-sidebar > *,.sidebar,.matcher-grid > *,.matcher-form-wrap{min-width:0!important;max-width:100%!important}
  .sec-header .ref{white-space:normal!important}
  .stats-grid{grid-template-columns:1fr!important}
}

/* ═══════════════════════════════════════
   VISUAL REFRESH — airy soft card hover-lift + restrained motion
═══════════════════════════════════════ */
/* Card hover-lift (transition is already set in each base rule above). */
.panel:hover,.info-card:hover,.pillar:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(10,22,40,.08)}
/* Primary buttons: extra shadow on gold. Lift handled by .btn:hover above. */
.btn-gold:hover{box-shadow:0 6px 18px rgba(201,162,39,.28)}
/* Respect prefers-reduced-motion: neutralise transforms/animations entirely. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .panel,.info-card,.pillar{transition:none}
  .panel:hover,.info-card:hover,.pillar:hover{transform:none}
  .btn:hover{transform:none}
}

/* ═══════════════════════════════════════
   REFINED PHOTO HERO (home page)
═══════════════════════════════════════ */
.hero-photo{position:relative;display:flex;align-items:center;min-height:clamp(360px,52vh,560px);
  background-position:center;background-size:cover;padding:var(--space-16) 0}
.hero-photo::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,22,40,.92) 0%,rgba(10,22,40,.72) 45%,rgba(10,22,40,.25) 100%)}
.hero-photo .wrap,.hero-photo .hero-inner{position:relative;width:100%;text-align:left;padding-left:32px;padding-right:32px}
.hero-photo h1{color:#fff;margin:var(--space-3) 0 var(--space-4);max-width:18ch}
.hero-photo .hero-lead{color:rgba(255,255,255,.85);max-width:52ch;margin-bottom:var(--space-6);font-size:clamp(15px,1.5vw,18px)}
.hero-photo .kicker{color:var(--gold-lt)}
@media (max-width:640px){
  .hero-photo::before{background:linear-gradient(180deg,rgba(10,22,40,.85),rgba(10,22,40,.92))}
  .hero-photo h1{max-width:100%}
  .hero-photo .wrap,.hero-photo .hero-inner{padding-left:20px;padding-right:20px}
}

/* ═══════════════════════════════════════
   MOBILE CONSISTENCY  —  universal safeguards (phones)
   Guarantees every page behaves the same on a phone: any multi-column or
   sidebar grid (whether set via a class OR an inline style attribute) stacks
   to a single column, and no media element forces horizontal scrolling.
   Scoped to ≤640px so desktop/tablet layouts are untouched.
═══════════════════════════════════════ */
@media(max-width:640px){
  .info-card,.panel{padding:28px}
  .panel-body{padding:28px}
  /* Stack inline-styled card grids (e.g. home page 3-up rows) */
  [style*="grid-template-columns:repeat("],
  [style*="grid-template-columns: repeat("],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="1.6fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* Stack sidebar / content-aside layouts */
  [style*="1fr 300px"],
  [style*="1fr 320px"],
  [style*="220px 1fr"],
  [style*="240px 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* Media must never overflow the viewport */
  img,video,iframe{max-width:100%}
  /* A touch-comfortable navigation */
  .mobile-nav-item{min-height:48px;display:flex;align-items:center}
}

/* Small phones: tighten the very large hero headline so it never clips */
@media(max-width:400px){
  .hero-photo h1,.official-hero .hero-title{font-size:clamp(26px,8.5vw,34px);line-height:1.12}
  .wrap{padding:0 16px}
}

/* Wide tables scroll horizontally inside their own box instead of stretching
   the whole page on small screens (keeps column alignment intact). */
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Hero CTAs stack full-width on small phones (easier, bigger tap targets) */
@media(max-width:480px){
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero-actions .btn{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════
   CMS announcement bar (assets/cms.js)
═══════════════════════════════════════ */
.cms-announce{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:var(--navy);color:#fff;border-top:3px solid var(--gold);box-shadow:0 -6px 20px rgba(10,22,40,.28);animation:cmsAnnounceIn .4s var(--ease)}
.cms-announce-warning,.cms-announce-urgent{background:var(--red);border-top-color:var(--gold-lt)}
.cms-announce-success{background:var(--green)}
.cms-announce-inner{max-width:var(--max);margin:0 auto;padding:12px 48px 12px 20px;display:flex;align-items:center;gap:14px;font-size:14px;position:relative}
.cms-announce-msg{flex:1}
.cms-announce-cta{color:var(--gold-lt);font-weight:700;white-space:nowrap;text-decoration:none}
.cms-announce-cta:hover{text-decoration:underline}
.cms-announce-x{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.8;padding:0 6px}
.cms-announce-x:hover{opacity:1}
@keyframes cmsAnnounceIn{from{transform:translateY(100%)}to{transform:none}}
@media(max-width:640px){.cms-announce-inner{flex-wrap:wrap;padding:10px 38px 10px 16px;font-size:13px;gap:8px}}