/* ==========================================================================
   SIUT — Homepage Redesign
   Design system: tokens, type scale, components, sections
   ========================================================================== */
/* Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root{
  /* ---- Color tokens ---- */
  --clr-primary:      #B50000;
  --clr-primary-dark: #8A0000;
  --clr-primary-tint: #FDEAEA;
  --clr-ink:           #16181A;
  --clr-secondary:    #4D4D4D;
  --clr-muted:         #7A7A7A;
  --clr-bg:            #FFFFFF;
  --clr-bg-light:      #F8F9FA;
  --clr-accent:        #E8F4FF;
  --clr-line:           #EBEBEC;
  --clr-dark:            #7A7C80;
  --clr-dark-2:          #4A4D52;

  /* ---- Type ---- */
  /*--font-display: "Playfair Display", serif;*/
  /*--font-body: "Playfair Display", serif;*/


 /* ---- Typography ---- */
  --font-display: "Gotham", "Poppins", sans-serif;
  --font-body: "Poppins", sans-serif;

  /* ---- Shape / motion ---- */
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 2px 10px rgba(16,18,20,.05);
  --shadow-md: 0 12px 32px rgba(16,18,20,.08);
  --shadow-lg: 0 24px 60px rgba(16,18,20,.14);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  font-family: var(--font-body);
  color: var(--clr-secondary);
  background: var(--clr-bg);
  font-size: 16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,.font-display{
  font-family: var(--font-display);
  color: var(--clr-ink);
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
}

p{ margin:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

:focus-visible{
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.container-xl{
  width:100%;
  max-width:1360px;
  margin:0 auto;
  padding-inline: 14px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-body);
  font-size: 1.20rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--clr-primary);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background: var(--clr-primary);
  display:inline-block;
}

.section-title{
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  line-height:1.15;
}

.section-sub{
  color: #000;
  font-size: 1.10rem;
  max-width: 620px;
  line-height:1.75;
}

.section-pad{ padding-block: clamp(64px, 9vw, 50px); }
.section-padd { padding: 30px 0 0 0; margin-bottom: -80px; }

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 15px 30px;
  font-size: .93rem;
  font-weight:600;
  border-radius: 100px;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  overflow:hidden;
  white-space:nowrap;
}
.btn-primary{
  background: var(--clr-primary);
  color:#fff;
  box-shadow: 0 10px 24px rgba(181,0,0,.28);
  text-transform: uppercase;
}
.btn-primary:hover{
  background: var(--clr-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(181,0,0,.36);
  color:#fff;
}
.btn-outline-light{
  border-color: rgba(255,255,255,.55);
  color:#fff;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}
.btn-outline-light:hover{
  background:#fff;
  color: var(--clr-ink);
  transform: translateY(-2px);
}
.btn-outline-dark{
  border-color: rgba(22,24,26,.18);
  color: var(--clr-ink);
}
.btn-outline-dark:hover{
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  transform: translateY(-2px);
}
.btn-sm{ padding: 11px 22px; font-size:.85rem; }

.btn-ripple{ position:relative; }
.ripple{
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,.5);
  transform: scale(0);
  animation: ripple-anim .6s var(--ease);
  pointer-events:none;
}
.btn-outline-dark .ripple, .btn-outline-light .ripple{ background: rgba(181,0,0,.18); }
@keyframes ripple-anim{ to{ transform:scale(3); opacity:0; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  padding-block: 20px;
  transition: all .45s var(--ease);
  background: transparent;
}
/* Dark gradient behind the transparent header so the menu/logo stay
   readable over any hero image — replaces the old per-banner overlay. */
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.3) 70%, rgba(0,0,0,0) 100%);
  opacity:1;
  transition: opacity .45s var(--ease);
  z-index:-1;
  pointer-events:none;
}
.site-header.scrolled::before{ opacity:0; }
.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.site-header.scrolled{
  padding-block: 12px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 rgba(16,18,20,.06), 0 10px 30px rgba(16,18,20,.05);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo-box{
  display:flex; align-items:center;
  background:#fff;
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(16,18,20,.12);
  transition: all .4s var(--ease);
}
.brand-logo{ height:70px; width:auto; display:block; }
@media (max-width:400px){ .brand-logo{ height:50px; } .brand-logo-box{ padding:6px 10px; } }

.main-nav{ display:flex; align-items:center; gap:0; margin: 0 !important; padding:0; list-style:none; }
.main-nav > li{ list-style:none; }
.main-nav > li::marker{ content:none; }
.main-nav > li{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:4px;
  padding: 10px 10px;
  font-size:.95rem;
  font-weight:500;
  color:#fff;
  border-radius: 100px;
  transition: all .35s var(--ease);
  white-space: nowrap;
}
.nav-link i{ font-size:.65rem; transition: transform .3s var(--ease); }
.site-header.scrolled .nav-link{ color: var(--clr-ink); }
.nav-link:hover, .nav-item.open .nav-link{
  background: rgba(181,0,0,.08);
  color: var(--clr-primary);
}
.site-header:not(.scrolled) .nav-link:hover{ background: rgba(255,255,255,.14); color:#fff; }
.nav-item.open .nav-link i{ transform: rotate(180deg); }

.siut-dropdown{
  position:absolute;
  top: calc(100% + 14px);
  left:0;
  transform: translateY(8px);
  min-width: 240px;
  max-width: 300px;
  background:#fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  list-style:none;
  margin:0;
  opacity:0;
  visibility:hidden;
  transition: all .3s var(--ease);
  border: 1px solid var(--clr-line);
  z-index: 20;
}
.nav-item.open .siut-dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
@media (hover:hover) and (pointer:fine){
  .main-nav > li:hover .siut-dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
  .main-nav > li:hover .nav-link{ background: rgba(181,0,0,.08); color: var(--clr-primary); }
  .site-header:not(.scrolled) .main-nav > li:hover .nav-link{ background: rgba(255,255,255,.14); color:#fff; }
  .main-nav > li:hover .nav-link i{ transform: rotate(180deg); }
}
.siut-dropdown li{ list-style:none; position:relative; }
.siut-dropdown > li > a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 11px 14px;
  font-size:.87rem;
  font-weight:500;
  color: var(--clr-secondary);
  border-radius: 0px;
  transition: all .25s var(--ease);
  white-space: normal;
  line-height:1.4;
  border-bottom: 1px solid #00000026;
}
.siut-dropdown > li > a:hover{ background: var(--clr-primary); color: var(--clr-bg-light); padding-left:18px; border-radius: 8px; }
.submenu-caret{ font-size:.62rem; opacity:.55; flex-shrink:0; }

/* Nested flyout submenu (e.g. Medical Services, Support Services) */
.siut-submenu{
  position:absolute;
  top:-10px; left: calc(100% + 10px);
  min-width: 240px;
  background:#fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  list-style:none;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform: translateX(8px);
  transition: all .3s var(--ease);
  border: 1px solid var(--clr-line);
  max-height: min(70vh, 520px);
  overflow-y:auto;
}
.siut-submenu--wide{
  min-width: 400px;
  column-count:2;
  column-gap:4px;
}
.siut-submenu--wide li{ break-inside: avoid; }
.has-submenu > a{ position:relative; }
@media (hover:hover) and (pointer:fine){
  .has-submenu:hover > .siut-submenu{ opacity:1; visibility:visible; transform: translateX(0); }
  .has-submenu:hover > a{ background: var(--clr-bg-light); color: var(--clr-primary); }
}
.has-submenu.open > .siut-submenu{ opacity:1; visibility:visible; transform: translateX(0); }
.siut-submenu li a{
  display:block;
  padding: 9px 12px;
  font-size:.84rem;
  font-weight:500;
  color: var(--clr-secondary);
  border-radius:0px;
  transition: all .25s var(--ease);
  border-bottom: 1px solid #00000026;
}
.siut-submenu li a:hover{ 
    background: var(--clr-primary); 
    color: var(--clr-bg-light); 
    padding-left:16px; 
    border-radius:8px;
}

/* Flip flyout to the left if it's the last item, so it doesn't overflow the viewport */
.siut-dropdown > li.has-submenu:last-child .siut-submenu,
.siut-dropdown > li.has-submenu:nth-last-child(2) .siut-submenu{
  left: calc(100% + 10px);
}

.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.4);
  color:#fff;
  background: transparent;
  transition: all .3s var(--ease);
  flex-shrink:0;
}
.site-header.scrolled .icon-btn{ border-color: rgba(22,24,26,.15); color: var(--clr-ink); }
.icon-btn:hover{ background: var(--clr-primary); border-color: var(--clr-primary); color:#fff; transform: translateY(-2px); }

.burger{
  display:none;
  width:42px; height:42px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);
  background:transparent;
  align-items:center; justify-content:center;
  color:#fff;
  font-size:1.1rem;
}
.site-header.scrolled .burger{ border-color: rgba(22,24,26,.15); color: var(--clr-ink); }

@media (max-width: 1300px){
  .main-nav{ display:none; }
  .header-actions .btn-sm.d-nav{ display:none; }
  .burger{ display:flex; }
}

/* Mobile offcanvas */
.mobile-panel{
  position:fixed; inset:0; z-index:1200;
  visibility:hidden;
}
.mobile-panel.open{ visibility:visible; }
.mobile-panel .backdrop{
  position:absolute; inset:0;
  background: rgba(16,18,20,.55);
  opacity:0; transition: opacity .4s var(--ease);
}
.mobile-panel.open .backdrop{ opacity:1; }
.mobile-panel .panel{
  position:absolute; top:0; right:0; bottom:0;
  width: min(380px, 88vw);
  background:#fff;
  padding: 26px 26px 40px;
  overflow-y:auto;
  transform: translateX(100%);
  transition: transform .5s var(--ease);
  display:flex; flex-direction:column;
}
.mobile-panel.open .panel{ transform: translateX(0); }
.mobile-panel .panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 28px; }
.mobile-logo{ height:32px; width:auto; }
.mobile-panel .close-btn{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--clr-line); background:none; display:flex; align-items:center; justify-content:center; }
.mobile-panel .mlink{
  display:flex; justify-content:space-between; align-items:center;
  padding: 15px 4px;
  border-bottom: 1px solid var(--clr-line);
  font-weight:600;
  color: var(--clr-ink);
  font-size:1rem;
}
.mobile-panel .msub{ display:none; padding-left:14px; }
.mobile-panel .msub.open{ display:block; }
.mobile-panel .msub a{ display:block; padding:10px 4px; font-size:.88rem; color: var(--clr-muted); }
.mobile-panel .mlink-nested{
  padding: 12px 4px;
  border-bottom: 1px solid var(--clr-line);
  font-weight:600;
  font-size:.88rem;
  color: var(--clr-ink);
}
.mobile-panel .mlink-nested i{ font-size:.8rem; }
.mobile-panel .msub-nested{ display:none; padding-left:14px; }
.mobile-panel .msub-nested.open{ display:block; }
.mobile-panel .msub-nested a{ display:block; padding:9px 4px; font-size:.83rem; color: var(--clr-muted); }
.mobile-panel .mfoot{ margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:12px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background: var(--clr-dark);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img, .hero-media video{
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 30%, rgba(10,10,10,.75) 100%),
    linear-gradient(90deg, rgba(10,10,10,.65) 0%, rgba(10,10,10,.15) 55%);
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding-block: 160px 64px;
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 16px 8px 8px;
  border-radius:100px;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  color:#fff;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:26px;
}
.hero-kicker .dot{
  width:22px; height:22px; border-radius:50%;
  background: var(--clr-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem;
}
.hero h1{
  color:#fff;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.03;
  max-width: 15ch;
  text-wrap: balance;
}
.hero h1 em{
  font-style:normal;
  color: #fff;
  background: linear-gradient(180deg, transparent 64%, rgba(181,0,0,.55) 64%);
  padding: 0 2px;
}
.hero-desc{
  color: rgba(255,255,255,.82);
  font-size: 1.08rem;
  max-width: 46ch;
  margin-top: 26px;
  line-height:1.8;
}
.hero-cta{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }

.scroll-indicator{
  position:absolute; bottom: 28px; left:50%; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color: rgba(255,255,255,.75);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.scroll-indicator .mouse{
  width:24px; height:38px;
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:14px;
  position:relative;
}
.scroll-indicator .mouse::before{
  content:"";
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px;
  background:#fff;
  animation: scrolldrop 1.8s infinite;
}
@keyframes scrolldrop{
  0%{ opacity:1; top:6px; }
  70%{ opacity:0; top:20px; }
  100%{ opacity:0; top:6px; }
}

/* ==========================================================================
   VITAL LINE (signature motif)
   ========================================================================== */
.vital-divider{
  width:100%;
  height: 64px;
  overflow:hidden;
  line-height:0;
}
.vital-divider svg path{
  fill:none;
  stroke: var(--clr-primary);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.55;
}

/* ==========================================================================
   IMPACT / STATS — matches SIUT UK reference layout
   ========================================================================== */
.impact-v2{ background: #fff; }
.impact-head-v2{ max-width:640px; margin-bottom:52px; }
.impact-title-v2{
  font-family: var(--font-serif);
  font-weight:800;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--clr-ink);
  margin-bottom:18px;
}
.impact-sub-v2{
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--clr-ink);
  margin-bottom:14px;
}
.impact-sub-v2 b{ font-weight:800; }
.impact-year-v2{
  font-family: var(--font-serif);
  font-weight:800;
  font-size:1.05rem;
  color: var(--clr-ink);
}

.impact-grid-v2{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.impact-card-v2{
  position:relative;
  overflow:hidden;
  background:#fff;
  border: 1.5px solid var(--clr-line);
  border-radius: 14px;
  padding: 30px 28px;
  min-height: 176px;
  display:flex; flex-direction:column; justify-content:center;
  transition: all .35s var(--ease);
}
.impact-card-v2:hover{ 
  transform: translateY(-5px); 
  box-shadow: var(--shadow-md); 
  border-color:transparent; 
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
  color: #fff;
}
.impact-card-v2:hover .impact-card-label {
  color: white;
}
.impact-card-v2:hover .impact-card-num {
  color: white;
}
.impact-card-label{
  font-style:italic;
  font-weight:500;
  font-size:.98rem;
  color: var(--clr-primary);
  margin-bottom:14px;
  position:relative; z-index:1;
}
.impact-card-num{
  font-weight:800;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  color: var(--clr-ink);
  position:relative; z-index:1;
}
.impact-card-icon{
  position:absolute;
  right: -15px; bottom: 0px;
  width: 120px; height:120px;
  object-fit:contain;
  /* opacity:.22;
  filter: grayscale(1); */
  pointer-events:none;
  z-index:0;
}
.impact-card-featured{
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
  border-color: transparent;
  color:#fff;
}
.impact-card-featured .impact-card-label{ color: rgba(255,255,255,.88); }
.impact-card-featured .impact-card-num{ color:#fff; }
.impact-card-featured .impact-card-icon{ opacity:.9; filter: brightness(0) invert(1); width:110px; height:110px; }
.impact-card-cell{
  position: relative;
  min-width: 0;
}
.impact-card-cell .impact-card-v2{ height: 100%; }
.impact-card-note{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  font-size: .82rem;
  font-style: italic;
  color: var(--clr-muted);
  line-height: 1.4;
}

@media (max-width: 992px){
  .impact-grid-v2{ grid-template-columns: repeat(2,1fr); }
  .impact-card-v2{
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    padding: 18px 12px 16px;
    min-height: 0;
  }
  .impact-card-icon{
    position: static;
    right: auto;
    bottom: auto;
    width: 58px;
    height: 58px;
    order: -1;
    margin: 0 auto 10px;
  }
  .impact-card-label{ margin-bottom: 6px; font-size: .85rem; }
  .impact-card-num{ font-size: 1.35rem; }
  .impact-card-note{ text-align: center; }
}
@media (max-width: 600px){
  .impact-grid-v2{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .impact-head-v2{ text-align:left !important; }
  .impact-card-v2{ padding: 16px 10px 14px; }
  .impact-card-icon{ width: 52px; height: 52px; margin-bottom: 8px; }
  .impact-card-label{ font-size: .78rem; }
  .impact-card-num{ font-size: 1.15rem; }
}

/* ==========================================================================
   MISSION
   ========================================================================== */
.mission-media{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 4/6;
  box-shadow: var(--shadow-lg);
}
.mission-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.mission-media:hover img{ transform: scale(1.06); }
.mission-float{
  position:absolute; bottom:24px; left:24px; right:24px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display:flex; align-items:center; gap:14px;
  box-shadow: var(--shadow-md);
}
.mission-float .pulse{
  width:44px; height:44px; border-radius:50%;
  background: var(--clr-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
}
.mission-float b{ font-family:var(--font-display); color:var(--clr-ink); display:block; font-size:1.05rem; }
.mission-float span{ font-size:.78rem; color:var(--clr-muted); }

.mission-cards{ display:flex; flex-direction:column; gap:16px; margin-top:32px; }
.mcard{
  display:flex; gap:18px;
  padding: 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-line);
  transition: all .35s var(--ease);
}
.mcard:hover{ background: var(--clr-bg-light); border-color:transparent; transform: translateX(6px); }
.mcard .micon{
  width:50px; height:50px; border-radius:12px; flex-shrink:0;
  background: var(--clr-accent); color:#0d5b99;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}
.mcard:nth-child(2) .micon{ background:var(--clr-primary-tint); color:var(--clr-primary); }
.mcard:nth-child(3) .micon{ background:#FFF3D9; color:#a87400; }
.mcard h4{ font-size:1.05rem; margin-bottom:4px; }
.mcard p{ font-size:.9rem; color:var(--clr-muted); line-height:1.65; }

/* ==========================================================================
   KEY FACTS / 50-YEAR TIMELINE
   ========================================================================== */
.timeline-wrap{ position:relative; background: var(--clr-dark); color:#fff; overflow:hidden; }
.timeline-wrap .section-sub{ color: rgba(255,255,255,.6); }
.timeline-wrap .eyebrow{ color:#ff6b6b; }
.timeline-wrap .eyebrow::before{ background:#ff6b6b; }
.timeline-wrap h2{ color:#fff; }

.timeline-track{
  display:flex;
  gap: 0;
  margin-top: 60px;
  padding-bottom: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.timeline-track::-webkit-scrollbar{ display:none; }
.tl-item{
  scroll-snap-align:start;
  flex: 0 0 260px;
  padding: 0 26px 0 0;
  position:relative;
}
.tl-item::before{
  content:"";
  position:absolute; top:11px; left:0; right:26px;
  height:2px;
  background: rgba(255,255,255,.14);
}
.tl-item:last-child::before{ display:none; }
.tl-dot{
  width:24px; height:24px; border-radius:50%;
  background: var(--clr-dark);
  border: 2px solid var(--clr-primary);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:26px;
  position:relative; z-index:1;
}
.tl-dot::after{ content:""; width:8px; height:8px; border-radius:50%; background: var(--clr-primary); }
.tl-year{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:#fff; }
.tl-text{ font-size:.87rem; color: rgba(255,255,255,.62); margin-top:8px; line-height:1.6; }

.tl-nav{ display:flex; gap:10px; margin-top:12px; }
.tl-nav button{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2);
  background: var(--clr-primary); 
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: all .3s var(--ease);
}
.tl-nav button:hover{ background: var(--clr-primary); border-color: var(--clr-primary); }

/* ==========================================================================
   JOURNEY / MILESTONES SLIDER
   ========================================================================== */
.journey-slider{
  position:relative;
  overflow:hidden;
  aspect-ratio: 15/10;
}
.journey-slides{
  position:relative;
  display:flex;
  width:100%; height:100%;
  transition: transform .6s var(--ease);
}
.journey-slide{
  position:relative;
  flex: 0 0 100%;
  width:100%; height:100%;
}
.journey-slide img{ width:100%; height:100%; object-fit:contain; }
.journey-dots{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:2;
}
.journey-dot{
  width:10px; height:10px; border-radius:50%;
  background: rgb(0 0 0 / 45%);
  border: 1.5px solid rgba(255,255,255,.7);
  padding:0;
  transition: all .3s var(--ease);
}
.journey-dot.active{ background: var(--clr-primary); border-color: var(--clr-primary); width:26px; border-radius:6px; }
@media (max-width: 768px){
  .journey-slider{ aspect-ratio: 4/5; }
}

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.founder{ position:relative; background: #f8f9fa;}
.founder-portrait{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 3/3;
  box-shadow: var(--shadow-lg);
  background:#000;
}
.founder-portrait img, .founder-portrait video{ width:100%; height:100%; object-fit:cover; }
.founder-portrait::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, transparent 40%);
  pointer-events:none;
}
.founder-play{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  z-index:2;
}
.founder-portrait.playing .founder-play{ opacity:0; visibility:hidden; }
.founder-portrait.playing::after{ opacity:0; }
.founder-quote-mark{
  font-family: var(--font-display);
  font-size: 6rem;
  line-height:.6;
  color: var(--clr-primary-tint);
  margin-bottom:8px;
}
.founder blockquote{
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight:600;
  color: var(--clr-ink);
  line-height:1.5;
  letter-spacing:-.01em;
}
.founder-sig{ display:flex; align-items:center; gap:16px; margin-top:34px; }
.founder-sig .sig-name{ font-family:var(--font-display); font-weight:800; color:var(--clr-ink); }
.founder-sig .sig-role{ font-size:.82rem; color: var(--clr-muted); }
.founder-sig .sig-line{ width:56px; height:2px; background: var(--clr-primary); }

/* ==========================================================================
   PRESENCE / MAP
   ========================================================================== */
.presence{ background: var(--clr-bg-light); overflow:visible; }
.presence-map{
  position:relative;
  padding: 26px;
  max-width: 740px;
  margin-inline:auto;
  overflow:visible;
}
.presence-map-img{ position:relative; width:100%; aspect-ratio: 728 / 614; overflow:visible; }
.presence-map-img > img{ width:100%; height:100%; object-fit:contain; display:block; }
.map-pin{
  position:absolute;
  width:26px; height:26px;
  transform: translate(-50%,-50%);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.map-pin::before{
  content:"";
  position:absolute; inset:5px;
  border-radius:50%;
  border: 2px solid transparent;
  transition: all .3s var(--ease);
}
.map-pin::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background: rgba(181,0,0,.28);
  opacity:0;
  transform:scale(.5);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.map-pin:hover::after, .map-pin:focus::after{ opacity:1; transform:scale(1); animation: pin-pulse 1.6s infinite; }
@keyframes pin-pulse{ 0%{ transform:scale(.7); opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } }
.map-pin:hover::before, .map-pin:focus::before{ border-color:#fff; box-shadow: 0 0 0 2.5px var(--clr-primary); }
.map-pin:hover, .map-pin:focus{ z-index:8; }
.map-pin--main{ width:32px; height:32px; z-index:3; }
.map-tooltip{
  position:absolute;
  bottom: calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(6px);
  background:#fff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 12px 15px;
  width: 190px;
  opacity:0; visibility:hidden;
  transition: all .3s var(--ease);
  z-index:6;
  pointer-events:none;
}
.map-pin:hover .map-tooltip,
.map-pin:focus .map-tooltip,
.map-pin.is-open .map-tooltip{
  opacity:1; visibility:visible; transform: translateX(-50%) translateY(0);
}
.map-tooltip b{ font-family: var(--font-display); font-size:.88rem; color: var(--clr-ink); display:block; margin-bottom:6px; }
.map-tooltip span{ font-size:.74rem; color: var(--clr-muted); line-height:1.45; }
.map-tooltip--karachi{
  width: min(460px, calc(100vw - 40px));
  max-width: 460px;
  padding: 14px 16px;
  left: 8px;
  right: auto;
  background:#fff;
  transform: translateX(0) translateY(6px);
}
.map-pin--main:hover .map-tooltip--karachi,
.map-pin--main:focus .map-tooltip--karachi,
.map-pin--main.is-open .map-tooltip--karachi{
  opacity:1;
  visibility:visible;
  transform: translateX(0) translateY(0);
}
.map-tooltip-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  column-gap: 14px;
  row-gap: 5px;
}
.map-tooltip-grid li{
  position:relative;
  padding-left: 12px;
  font-size:.7rem;
  line-height:1.35;
  color: var(--clr-muted);
  word-break: break-word;
}
.map-tooltip-grid li::before{
  content:"";
  position:absolute;
  left:0; top:.42em;
  width:5px; height:5px;
  background: var(--clr-primary);
  flex-shrink:0;
}
@media (max-width:576px){
  .presence-map{ padding:14px; }
  .map-pin{ width:22px; height:22px; }
  .map-pin--main{ width:28px; height:28px; }
  .map-tooltip{ width: 160px; padding: 10px 12px; }
  .map-tooltip--karachi{
    width: min(300px, calc(100vw - 24px));
    max-width: min(300px, calc(100vw - 24px));
    padding: 10px 11px;
    left: 0;
  }
  .map-tooltip-grid{
    column-gap: 8px;
    row-gap: 3px;
  }
  .map-tooltip-grid li{
    font-size:.58rem;
    padding-left: 9px;
    line-height:1.3;
  }
  .map-tooltip-grid li::before{
    width:4px; height:4px;
  }
}

/* ==========================================================================
   PATIENT STORIES — static row + arrows
   ========================================================================== */
.stories{ background: #fff; color:#000; overflow:hidden; }
.stories h2{ color:#000; }
.stories .section-sub{ color: #000; }

.stories-row{ overflow:hidden; margin-top:36px; position:relative; }
.stories-row::before, .stories-row::after{
  content:""; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none;
}
.stories-row::before{ left:0; background: linear-gradient(90deg, var(--clr-bg-light), transparent); }
.stories-row::after{ right:0; background: linear-gradient(270deg, var(--clr-bg-light), transparent); }
.stories-track{
  display:flex;
  align-items:flex-start;
  gap: 22px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type: x mandatory;
  padding: 4px 24px 40px;
  scrollbar-width:none;
}
.stories-track::-webkit-scrollbar{ display:none; }
.stories-track .story-card{ scroll-snap-align:start; }

.story-card {
  position: relative;
  width: 320px;
  height: 300px;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(16,18,20,.07);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.story-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16,18,20,.12);
}
.story-thumb{
  position:relative;
  width: calc(100% - 20px);
  height: auto;
  margin: 12px 10px 0;
  flex-shrink: 0;
  overflow:hidden;
  background: transparent;
  /* Soft paint-brush mask — organic torn/brush edges, not pointed zigzag */
  /* -webkit-mask-image: url("../images/story-brush-mask.png");
  mask-image: url("../images/story-brush-mask.png"); */
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.story-thumb img{
  width:100%; height:auto;
  object-fit:cover;
  transition: transform .6s var(--ease);
}
.story-card:hover .story-thumb img{ transform: scale(1.05); }
.story-play{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  background: var(--clr-primary);
  border: none;
  box-shadow:
    0 0 0 10px rgba(181,0,0,.18),
    0 0 0 20px rgba(181,0,0,.08),
    0 12px 24px rgba(181,0,0,.38);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.15rem; z-index:2;
  transition: all .35s var(--ease);
  padding-left: 3px;
}
.story-card:hover .story-play{
  transform: translate(-50%,-50%) scale(1.08);
  box-shadow:
    0 0 0 12px rgba(181,0,0,.22),
    0 0 0 24px rgba(181,0,0,.1),
    0 14px 28px rgba(181,0,0,.42);
}
.story-meta{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 10px 16px 16px;
  background: transparent;
}
.story-meta b{
  font-family: var(--font-display);
  font-size:.95rem;
  font-weight:700;
  line-height:1.35;
  color: var(--clr-ink);
  display:block;
}
@media (max-width: 767px){
  .story-card{
    width: min(320px, 82vw);
    height: 350px;
  }
  .story-thumb{ height: 250px; }
}

/* Video modal */
.video-modal{
  position:fixed; inset:0; z-index:1300;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  visibility:hidden; opacity:0;
  transition: opacity .35s var(--ease), visibility .35s;
}
.video-modal.open{ visibility:visible; opacity:1; }
.video-modal .vm-backdrop{ position:absolute; inset:0; background: rgba(10,10,10,.88); }
.video-modal .vm-box{
  position:relative; z-index:2;
  width:min(880px,92vw);
  aspect-ratio:16/9;
  background:#000;
  border-radius: var(--radius-md);
  overflow:hidden;
  transform: scale(.92); transition: transform .4s var(--ease);
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.7); text-align:center; padding:0;
}
.video-modal.open .vm-box{ transform:scale(1); }
.video-modal .vm-box iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.video-modal .vm-fallback{
  position:relative; z-index:1;
  padding: 28px 24px;
  max-width: 420px;
}
.video-modal .vm-close{
  position:absolute; top:2px; right:2px; z-index:3;
  width:42px; height:42px; border-radius:50%;
  background:#fff; color:var(--clr-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   NEWS & MEDIA
   ========================================================================== */
.news-media{ background: var(--clr-bg-light); }

.nm-head-right{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.nm-anniversary-logo{
  height:64px; width:auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.nm-tabs{
  display:inline-flex;
  gap:6px;
  background:#fff;
  padding:6px;
  border-radius:100px;
  border:1px solid var(--clr-line);
  box-shadow: var(--shadow-sm);
}
.nm-tab{
  display:flex; align-items:center; gap:8px;
  padding:11px 24px;
  border-radius:100px;
  border:none;
  background:transparent;
  color: var(--clr-secondary);
  font-family: var(--font-body);
  font-weight:600;
  font-size:.88rem;
  cursor:pointer;
  transition: all .3s var(--ease);
}
.nm-tab i{ font-size:1rem; }
.nm-tab:hover{ color: var(--clr-primary); }
.nm-tab.active{
  background: var(--clr-primary);
  color:#fff;
  box-shadow: 0 8px 18px rgba(181,0,0,.28);
}

.nm-panel{ display:none; margin-top:36px; }
.nm-panel.active{ display:block; animation: nmFadeIn .5s var(--ease); }
.nm-view-all{
  display:flex;
  justify-content:flex-start;
  margin-top:22px;
}
.nm-view-all .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
@keyframes nmFadeIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.nm-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:28px;
}
@media (max-width: 992px){ .nm-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .nm-grid{ grid-template-columns: 1fr; } }

/* News cards */
.news-card{
  background:#fff;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--clr-line);
  transition: all .35s var(--ease);
}
.news-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: transparent; }
.news-card-img{ 
  position:relative;
  display:block;
}
.news-card-img img{ width:100%; height:100%; object-fit:contain; transition: transform .6s var(--ease); }
.news-card:hover .news-card-img img{ transform: scale(1.08); }
.news-card-date{
  position:absolute; top:16px; right:16px;
  display:flex; align-items:center; gap:6px;
  background: rgba(22,24,26,.6);
  backdrop-filter: blur(6px);
  color:#fff;
  font-size:.72rem; font-weight:600;
  padding:6px 12px;
  border-radius:100px;
}
.news-card-tag{
  position:absolute; left:16px; bottom:-14px;
  background: var(--clr-primary);
  color:#fff;
  font-size:.7rem; font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:8px;
  box-shadow: 0 8px 16px rgba(181,0,0,.3);
}
.news-card-body{ padding: 26px 22px 20px; }
.news-card-body h3{
  font-family: var(--font-display);
  font-size:1rem;
  line-height:1.4;
  color: var(--clr-ink);
  margin-bottom:14px;
  font-weight: 300;
}
.news-card-body p{
  font-size:.88rem;
  color: var(--clr-muted);
  line-height:1.7;
  margin-bottom:16px;
}
.fifty-logo {
  box-shadow: var(--shadow-lg);
  background: var(--clr-bg-light);
  padding: 30px;
  border-radius: var(--radius-lg);
}
.news-card-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; font-weight:700;
  color: var(--clr-primary);
  transition: gap .3s var(--ease);
}
.news-card-link:hover{ gap:12px; color: var(--clr-primary-dark); }

/* Media cards */
.nm-grid-media{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 992px){ .nm-grid-media{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .nm-grid-media{ grid-template-columns: 1fr; } }

.media-card{
  position:relative;
  aspect-ratio: 4/4.6;
  border-radius: var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
}
.media-card img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.media-card:hover img{ transform: scale(1.08); }
.media-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.1) 55%, transparent 75%);
}
.media-play{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  background: rgba(255,255,255,.16);
  border: 1.5px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.2rem; z-index:2;
  transition: all .35s var(--ease);
}
.media-card:hover .media-play{ background: var(--clr-primary); border-color: var(--clr-primary); transform: translate(-50%,-50%) scale(1.1); }
.media-meta{ position:absolute; bottom:20px; left:20px; right:20px; z-index:2; }
.media-source{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600;
  color: rgba(255,255,255,.75);
  text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:6px;
}
.media-meta b{ font-family: var(--font-display); font-size:1.05rem; display:block; color:#fff; }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter{
  position:relative;
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(40px,6vw,50px);
  overflow:hidden;
  margin-inline:auto;
  z-index: 1;
}
.newsletter::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.14), transparent 55%);
}
.newsletter h2{ color:#fff; }
.newsletter p{ color: rgba(255,255,255,.85); }
.nl-form{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top: 28px;
  position:relative; z-index:2;
}
.nl-form input{
  flex:1; min-width:180px;
  padding: 15px 20px;
  border-radius:100px;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size:.92rem;
}
.nl-form input::placeholder{ color: rgba(255,255,255,.65); }
.nl-form input:focus{ outline:none; border-color:#fff; background: rgba(255,255,255,.16); }
.nl-form button{
  padding: 15px 30px;
  border-radius:100px;
  background:#fff; color: var(--clr-primary);
  font-weight:700; font-size:.9rem;
  border:none;
  display:flex; align-items:center; gap:8px;
  transition: all .3s var(--ease);
}
.nl-form button:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.nl-note{ font-size:.76rem; color: rgba(255,255,255,.6); margin-top:14px; display:block; position:relative; z-index:2; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  position:relative;
  background:
  linear-gradient(135deg, rgba(10, 10, 10, .90) 0%, rgb(22 24 26 / 76%) 100%),
    url(../images/footer-img.jpg) center / cover no-repeat;
  color: rgba(255,255,255,.68);
     
}
.footer-top{ padding-block: 150px 50px; }
.footer-logo{ height:80px; width:auto; }
.footer-brand p{ color: rgba(255,255,255,.55); font-size:.9rem; margin-top:18px; max-width:320px; line-height:1.8; }
.footer-social{ display:flex; gap:10px; margin-top:24px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  transition: all .3s var(--ease);
}
.footer-social a:hover{ background: var(--clr-primary); border-color: var(--clr-primary); transform: translateY(-3px); }

.footer-col h5{ color:#fff; font-family:var(--font-display); font-size:.95rem; margin-bottom:22px; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px; }
.footer-col a{ font-size:.87rem; color: rgba(255,255,255,.6); transition: all .3s var(--ease); display:inline-flex; align-items:center; gap:8px; }
.footer-col a:hover{ color:#fff; padding-left:4px; }
.footer-col .fi{ color: white; }

.footer-contact li{ display:flex; align-items:flex-start; gap:12px; font-size:.87rem; color: rgba(255,255,255,.65); line-height:1.6; }
.footer-contact i{ color: white; margin-top:3px; }

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block:24px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:.8rem;
  color: rgba(255,255,255,.5);
}
.footer-bottom a{ color: rgba(255,255,255,.7); }

.back-to-top{
  position:fixed; right:26px; bottom:26px; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background: var(--clr-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .35s var(--ease);
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--clr-primary-dark); transform: translateY(-4px); }

/* ==========================================================================
   MISC
   ========================================================================== */
::selection{ background: var(--clr-primary); color:#fff; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:2000;
  background:#fff; color:var(--clr-primary); padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

@media (max-width: 767px){
  .hero-content{ padding-top:130px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .founder .row{ flex-direction:column-reverse; }
  .impact-head{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   PAGE LOADER — medical ECG pulse
   ========================================================================== */
.page-loader{
  position:fixed; inset:0; z-index:3000;
  background: var(--clr-dark);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.page-loader.loaded{ opacity:0; visibility:hidden; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; gap:26px; width:min(320px, 70vw); }
.loader-logo{ height:auto; width:auto; animation: loader-fade 1.8s ease-in-out infinite; }
@keyframes loader-fade{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.loader-ecg{ width:100%; height:44px; overflow:visible; }
.loader-ecg path{
  fill:none;
  stroke: var(--clr-primary);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: ecg-draw 1.6s linear infinite;
  filter: drop-shadow(0 0 6px rgba(181,0,0,.6));
}
@keyframes ecg-draw{
  0%{ stroke-dashoffset: 620; }
  55%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: -620; }
}

/* ==========================================================================
   FLOATING DONATE BUTTON
   ========================================================================== */
.donate-float{
  position:fixed;
  right: -1px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  z-index: 950;
  display:flex; align-items:center; gap:10px;
  background: var(--clr-primary);
  color:#fff;
  padding: 14px 22px;
  border-radius: 100px 0 0 100px;
  font-weight:700;
  font-size:.92rem;
  box-shadow: 0 10px 26px rgba(181,0,0,.4);
  transition: all .35s var(--ease);
}
.donate-float i{ font-size:1rem; }
.donate-float:hover{ padding-right:30px; background: var(--clr-primary-dark); color:#fff; box-shadow: 0 14px 32px rgba(181,0,0,.5); }
@media (max-width:767px){
  .donate-float{ padding:12px 16px; font-size:.82rem; }
  .donate-float span{ display:none; }
  .donate-float i{ font-size:1.15rem; }
}
.mission-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:14px;
}

.mission-list li{
    position:relative;
    padding:16px 18px 16px 55px;
    background:#fff;
    border-left:4px solid #B50000;
    border-radius:12px;
    font-size:16px;
    line-height:1.7;
    color:#555;
    transition:.3s ease;
    box-shadow:0 5px 18px rgba(0,0,0,.04);
}

.mission-list li::before{
    content:"✓";
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    border-radius:50%;
    background:#B50000;
    color:#fff;
    font-size:15px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mission-list li:hover{
    transform:translateX(6px);
    border-color:#B50000;
    box-shadow:0 12px 30px rgba(181,0,0,.12);
}

@media (max-width:768px){
    .mission-list li{
        font-size:15px;
        padding:14px 15px 14px 50px;
    }

    .mission-list li::before{
        width:24px;
        height:24px;
        left:14px;
        font-size:13px;
    }
}
/* ==========================================================================
   INNER PAGES — shared components (hero banner, breadcrumbs, dept grid,
   hub intro, contact page, team page)
   ========================================================================== */

.bg-light-section{ background: var(--clr-bg-light); }

/* ---------------- Page hero banner ---------------- */
.page-hero{
  position:relative;
  min-height: clamp(300px, 56vw, 720px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.page-hero-media{
  position:absolute; inset:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  transform: scale(1.02);
  z-index:0;
}
.page-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at left center,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.6) 25%,
      rgba(0, 0, 0, 0.3) 45%,
      rgba(0, 0, 0, 0) 70%);
  z-index: 1;
  pointer-events: none;
}
/* No dark overlay on the banner itself — includes/header.php carries its own
   gradient (see .site-header::before below) so the menu stays readable over
   any hero image. A soft text-shadow keeps the title/breadcrumbs legible
   without tinting the photo. */
.page-hero-content{ position:relative; z-index:2; padding-bottom: clamp(32px, 5vw, 56px); padding-top:140px; }
.page-hero-content h1{
  color:#fff;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top:14px;
  text-shadow: 0 2px 20px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45);
}
.page-hero-sub{
  color: rgba(255,255,255,.9);
  font-size:1.02rem;
  max-width:620px;
  margin-top:14px;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.breadcrumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:.85rem; font-weight:600;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.breadcrumbs a{ color: rgba(255,255,255,.75); transition: color .25s var(--ease); }
.breadcrumbs a:hover{ color:#fff; }
.breadcrumbs .bc-sep{ color: rgba(255,255,255,.5); font-size:.7rem; }
.breadcrumbs .bc-current{ color: var(--clr-primary-tint); }

/* ---------------- Hub intro + highlights ---------------- */
.hub-intro{ text-align:left; }
.hub-intro .section-sub{ max-width:100%; }
.hub-highlights{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:14px 28px;
  margin-top:34px;
}
.hub-highlights--left{ justify-content:flex-start; }
.hub-highlight-item{
  display:flex; align-items:center; gap:10px;
  font-size:.9rem; font-weight:600; color: var(--clr-ink);
  background:#fff;
  border:1px solid var(--clr-line);
  padding:12px 20px;
  border-radius:100px;
  box-shadow: var(--shadow-sm);
}
.hub-highlight-item i{ color: var(--clr-primary); font-size:1.05rem; }

/* ---------------- Department / service card grid ---------------- */
.dept-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:26px;
}
@media (max-width: 992px){ .dept-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .dept-grid{ grid-template-columns: 1fr; } }

.dept-card{
  position:relative;
  display:block;
  aspect-ratio: 4/3.4;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.dept-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.dept-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s var(--ease);
}
.dept-card:hover img{ transform: scale(1.08); }
.dept-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(8,9,10,.88) 0%, rgba(8,9,10,.35) 55%, rgba(8,9,10,.05) 100%);
  transition: background .35s var(--ease);
}
.dept-card-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px;
}
.dept-card-title{
  font-family: var(--font-display);
  font-size:1.50rem;
  font-weight:600;
  color:#fff;
  margin:0;
}
.dept-card-desc{
  max-height:0;
  opacity:0;
  overflow:hidden;
  color: rgba(255,255,255,.82);
  font-size:.85rem;
  line-height:1.6;
  margin-top:0;
  transition: all .4s var(--ease);
}
.dept-card:hover .dept-card-desc{ max-height:90px; opacity:1; margin-top:10px; }
.dept-card-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px;
  opacity:0;
  transform: translateY(8px);
  transition: all .4s var(--ease);
  font-size:.8rem; font-weight:700;
  color:#fff;
  background: var(--clr-primary);
  padding:9px 18px;
  border-radius:100px;
}
.dept-card:hover .dept-card-link{ opacity:1; transform:translateY(0); }

/* Media & News listing — professional CMS card grid */
.media-news-page .media-news-intro{
  max-width:42rem;
  margin:0 0 1.5rem;
  color:var(--clr-muted);
  font-size:1rem;
  line-height:1.7;
}
.media-news-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}
.mn-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.mn-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
  border-color:transparent;
}
.mn-card-media{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--clr-bg-light);
}
.mn-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.mn-card:hover .mn-card-media img{ transform:scale(1.05); }
.mn-card-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1 1 auto;
  padding:18px 18px 20px;
}
.mn-card-title{
  margin:0;
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:700;
  line-height:1.4;
  color:var(--clr-ink);
}
.mn-card-title a{
  color:inherit;
  text-decoration:none;
}
.mn-card-title a:hover{ color:var(--clr-primary); }
.mn-card-btn{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  background:var(--clr-primary-tint);
  color:var(--clr-primary);
  font-size:.84rem;
  font-weight:700;
  text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease), gap .2s var(--ease);
}
.mn-card:hover .mn-card-btn{
  background:var(--clr-primary);
  color:#fff;
  gap:11px;
}
@media (max-width: 991px){
  .media-news-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
}
@media (max-width: 575px){
  .media-news-grid{ grid-template-columns:1fr; gap:14px; }
}

/* ---------------- Contact page ---------------- */
.contact-card{
  text-align:center;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding:36px 26px;
  height:100%;
  transition: all .35s var(--ease);
}
.contact-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-6px); }
.contact-card-icon{
  width:64px; height:64px;
  margin:0 auto 18px;
  border-radius:50%;
  background: var(--clr-primary-tint);
  color: var(--clr-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
}
.contact-card h3{ font-family: var(--font-display); font-size:1.1rem; margin-bottom:10px; }
.contact-card p{ font-size:.9rem; color: var(--clr-muted); line-height:1.7; }

.contact-form .form-label{ font-size:.85rem; font-weight:700; color: var(--clr-ink); margin-bottom:6px; }
.contact-form .form-control,
.contact-form .form-select{
  border:1.5px solid var(--clr-line);
  border-radius: var(--radius-sm);
  padding:12px 16px;
  font-size:.92rem;
  background:#fff;
}
.contact-form .form-control:focus,
.contact-form .form-select:focus{
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px var(--clr-primary-tint);
}
.contact-form-note{
  margin-top:16px;
  font-size:.88rem;
  font-weight:600;
  color: var(--clr-primary-dark);
  display:none;
}
.contact-form-note.show{ display:block; }
.contact-form-note--error{ color:#9b1c1c; }
.contact-form-note--ok{ color: var(--clr-primary-dark); }
.nl-note--error{ color:#fecaca !important; font-weight:600; }
.nl-note--ok{ color:#bbf7d0 !important; font-weight:600; }

.public-form-wrap{ position:relative; }
.form-feedback{
  display:none;
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:10px;
  font-size:.92rem;
  font-weight:600;
  line-height:1.4;
}
.form-feedback[data-state="ok"],
.form-feedback[data-state="error"]{ display:block; }
.form-feedback[data-state="ok"]{
  background:#e8f6ec;
  color:#146c2e;
  border:1px solid #b7e0c2;
}
.form-feedback[data-state="error"]{
  background:#fdeaea;
  color:#9b1c1c;
  border:1px solid #f0b4b4;
}
.form-feedback--nl[data-state="ok"]{
  background:rgba(20,108,46,.18);
  color:#d8f5e1;
  border-color:rgba(216,245,225,.35);
}
.form-feedback--nl[data-state="error"]{
  background:rgba(155,28,28,.28);
  color:#fecaca;
  border-color:rgba(254,202,202,.35);
}
.nl-form button[disabled]{ opacity:.65; cursor:wait; }
.contact-form button[disabled]{ opacity:.65; cursor:wait; }

.contact-map{
  width:100%; height:100%;
  min-height:340px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-md);
}
.contact-map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* ---------------- Team page ---------------- */
.team-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:26px;
}
@media (max-width: 992px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .team-grid{ grid-template-columns: 1fr; } }

.team-card{
  text-align:center;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding:28px 20px;
  transition: all .35s var(--ease);
}
.team-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-6px); }
.team-card-photo{
  width:96px; height:96px;
  margin:0 auto 18px;
  border-radius:50%;
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.team-card-photo img{ width:100%; height:100%; object-fit:cover; }
.team-card-initials{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
}
.team-card-initials span{ color:#fff; font-family: var(--font-display); font-size:1.4rem; font-weight:800; }
.team-card-name{ font-family: var(--font-display); font-size:1.05rem; margin-bottom:4px; }
.team-card-role{ font-size:.85rem; color: var(--clr-muted); }

/* ==========================================================================
   CONTENT / REPORT / DOCUMENT PAGES
   Added for About Us, Reports, Careers, Publications, Education & Training
   ========================================================================== */
.content-prose{ max-width:95%; }
.content-prose p{ margin-bottom:1.15em; font-size:1.02rem; }
.content-prose h2{ font-size:1.5rem; margin:1.6em 0 .6em; }
.content-prose h3{ font-size:1.2rem; margin:1.4em 0 .5em; color:var(--clr-ink); }
.content-prose ul{ margin-bottom:1.15em; padding-left:1.2em; }
.content-prose li{ margin-bottom:.5em; }
.content-prose blockquote{
  border-left:3px solid var(--clr-primary);
  padding:.2em 0 .2em 1.2em;
  margin:1.6em 0;
  font-family: var(--font-display);
  font-style:italic;
  color:var(--clr-ink);
  font-size:1.1rem;
}

.doc-list{ display:flex; flex-direction:column; gap:14px; }
.doc-item{
  display:flex; align-items:center; gap:18px;
  background:#fff; border:1px solid var(--clr-line); border-radius:var(--radius-md);
  padding:20px 22px; box-shadow:var(--shadow-sm); transition:all .3s var(--ease);
}
.doc-item:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.doc-item-icon{
  flex:0 0 auto; width:48px; height:48px; border-radius:12px;
  background:var(--clr-primary-tint); color:var(--clr-primary);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.doc-item-body{ flex:1 1 auto; min-width:0; }
.doc-item-title{ font-family:var(--font-display); font-weight:700; color:var(--clr-ink); font-size:1.02rem; margin-bottom:2px; }
.doc-item-meta{ font-size:.85rem; color:var(--clr-muted); }
.doc-item-action{ flex:0 0 auto; }

/* Newsletter archive — compact CMS cards */
.nl-archive{ margin-top:.15rem; }
.nl-year-block{ margin-top:1.75rem; }
.nl-year-block:first-of-type{ margin-top:0; }
.nl-year-title{
  margin:0 0 .85rem;
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:800;
  color:var(--clr-ink);
  letter-spacing:-.02em;
  padding-left:12px;
  border-left:3px solid var(--clr-primary);
  line-height:1.2;
}
.nl-card-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
.nl-card{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:0;
  padding:12px 12px 12px 10px;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:12px;
  box-shadow:none;
  text-decoration:none;
  color:inherit;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.nl-card:hover{
  border-color:color-mix(in srgb, var(--clr-primary) 35%, var(--clr-line));
  box-shadow:var(--shadow-sm);
  transform:translateY(-2px);
}
.nl-card:focus-visible{
  outline:2px solid var(--clr-primary);
  outline-offset:2px;
}
.nl-card-icon{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:10px;
  background:var(--clr-primary-tint);
  color:var(--clr-primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
}
.nl-card-text{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nl-card-title{
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:700;
  color:var(--clr-ink);
  line-height:1.25;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nl-card-action{
  font-size:.75rem;
  font-weight:600;
  color:var(--clr-primary);
  line-height:1.2;
}
.nl-card-go{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--clr-bg-light);
  color:var(--clr-muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nl-card:hover .nl-card-go{
  background:var(--clr-primary);
  color:#fff;
}
@media (max-width: 991px){
  .nl-card-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
}
@media (max-width: 575px){
  .nl-card-grid{ grid-template-columns:1fr; }
  .nl-year-title{ font-size:1.1rem; margin-bottom:.7rem; }
}

.info-card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.info-card{
  background:#fff; border:1px solid var(--clr-line); border-radius:var(--radius-md);
  padding:26px; box-shadow:var(--shadow-sm); transition:all .3s var(--ease);
}
.info-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.info-card i{ font-size:1.5rem; color:var(--clr-primary); margin-bottom:12px; display:block; }
.info-card h3{ font-family:var(--font-display); font-size:1.05rem; margin-bottom:6px; color:var(--clr-ink); }
.info-card p{ font-size:.92rem; color:var(--clr-muted); margin:0; }

/* Digital Library — 4 cards per row */
.dl-card-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
  margin-top:22px;
}
.dl-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:100%;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--radius-md);
  padding:22px 20px 20px;
  box-shadow:var(--shadow-sm);
  transition:all .3s var(--ease);
}
.dl-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--clr-primary) 28%, var(--clr-line));
}
.dl-card-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--clr-primary-tint);
  color:var(--clr-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  margin-bottom:14px;
}
.dl-card-title{
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:700;
  color:var(--clr-ink);
  line-height:1.35;
  margin:0 0 6px;
}
.dl-card-meta{
  font-size:.86rem;
  color:var(--clr-muted);
  margin:0 0 16px;
  line-height:1.4;
}
.dl-card-btn{
  margin-top:auto;
  width:auto;
}
@media (max-width: 991px){
  .dl-card-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px){
  .dl-card-grid{ grid-template-columns:1fr; }
}

.careers-media{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
}
.careers-media img{ width:100%; display:block; }

/* Uniform-size photo box for the alternating "location" sections
   (Our Hospitals / Our Satellite Centres) — any source image, whatever
   its original width/height, is cropped to fill this fixed box so every
   entry lines up the same regardless of the photo supplied. */
.loc-media{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.loc-media img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center; transition: transform .8s var(--ease);
}
.placeholder-note{
  background:var(--clr-accent); border-left:3px solid var(--clr-primary);
  padding:14px 18px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.85rem; color:var(--clr-dark-2); margin-bottom:2em;
}
.section-title.h3 {
  font-size: 2rem !important;
}

.directors-grid-single{
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

/* ==========================================================================
   MOBILE / TABLET RESPONSIVE
   ========================================================================== */
@media (max-width: 991px){
  .container-xl{ padding-inline: 16px; }
  .section-pad{ padding-block: 48px; }
  .section-padd{ padding: 20px 0 0 0; margin-bottom: 0; }
  .site-header{ padding-block: 12px; }
  .header-inner{ gap: 12px; }

  /* Inner-page hero: full overlay so title + breadcrumbs stay readable */
  .page-hero{
    min-height: 280px;
  }
  .page-hero-media::before{
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.58) 42%,
      rgba(0, 0, 0, 0.82) 100%);
  }
  .page-hero-content{
    padding-top: 108px;
    padding-bottom: 28px;
  }
  .page-hero-content h1{
    font-size: 1.7rem;
    line-height: 1.28;
    margin-top: 10px;
  }
  .page-hero-sub{ font-size: .95rem; }
  .breadcrumbs{ font-size: .78rem; gap: 6px; }

  .hero{ min-height: 100svh; }
  .hero-content{ padding-block: 130px 48px; }
  .hero h1{ font-size: clamp(2rem, 8vw, 2.8rem); max-width: 18ch; }
  .hero-desc{ font-size: .98rem; margin-top: 18px; }

  .impact-card-v2{ min-height: 0; }
  .mission-media{ aspect-ratio: 4/5; margin-bottom: 24px; }
  .mission-float{ left: 14px; right: 14px; bottom: 14px; padding: 14px 16px; }
  .founder-portrait{ aspect-ratio: 3/3.4; margin-bottom: 24px; }
  .founder-quote-mark{ font-size: 4rem; }
  .journey-slider{ aspect-ratio: 16/11; }

  .presence-map{ padding: 8px 0 20px; }
  .presence .col-lg-4 .mb-5{ margin-bottom: 1.5rem !important; }
  .map-tooltip--karachi{
    width: min(280px, calc(100vw - 32px));
    max-width: min(280px, calc(100vw - 32px));
    left: 50%;
    transform: translateX(-50%) translateY(6px);
  }
  .map-pin--main:hover .map-tooltip--karachi,
  .map-pin--main:focus .map-tooltip--karachi,
  .map-pin--main.is-open .map-tooltip--karachi{
    transform: translateX(-50%) translateY(0);
  }

  .stories-track{ padding: 4px 16px 32px; gap: 16px; }
  .nm-tabs{ flex-wrap: wrap; justify-content: center; }
  .nm-tab{ padding: 9px 16px; font-size: .82rem; }
  .nm-panel{ margin-top: 22px; }
  .fifty-logo{ padding: 18px; margin-top: 24px; }
  .newsletter{ padding: 28px 20px; border-radius: 16px; }
  .nl-form{ flex-direction: column; }
  .nl-form input, .nl-form button{ width: 100%; min-width: 0; }
  .footer-top{ padding-block: 56px 32px; }
  .footer-logo{ height: 58px; }
  .footer-bottom{ justify-content: center; text-align: center; }
  .footer-links-row{ margin-top: 8px; }
  .footer-links-row .footer-col h5{ font-size: .88rem; margin-bottom: 14px; }
  .footer-links-row .footer-col a{ font-size: .8rem; align-items: flex-start; }
  .footer-links-row .footer-col ul{ gap: 10px; }
  .footer-links-row .footer-col .fi{ margin-top: 3px; flex-shrink: 0; }
  .contact-map, .contact-map iframe{ min-height: 260px; }
  .section-title.h3{ font-size: 1.45rem !important; }
  .content-prose{ max-width: 100%; }
  .content-prose p{ font-size: .98rem; }
  .loc-media{ margin-bottom: 20px; }
  .donate-float{ top: auto; bottom: 88px; transform: none; }
  .back-to-top{ right: 16px; bottom: 16px; width: 42px; height: 42px; }

  /* Touch: always show department card details */
  .dept-card-desc{ max-height: 90px; opacity: 1; margin-top: 8px; }
  .dept-card-link{ opacity: 1; transform: none; }
}

@media (max-width: 767px){
  .hero-content{ padding-top: 118px; padding-bottom: 40px; }
  .hero-cta{ flex-direction: column; align-items: stretch; }
  .hero-cta .btn{ width: 100%; }
  .founder .row{ flex-direction: column-reverse; }
  .impact-head{ flex-direction: column; align-items: flex-start; }
  .page-hero{ min-height: 240px; }
  .page-hero-content{ padding-top: 100px; padding-bottom: 24px; }
  .page-hero-content h1{ font-size: 1.45rem; }
  .eyebrow{ font-size: .95rem; letter-spacing: .1em; }
  .section-title{ font-size: 1.65rem; }
  .section-sub{ font-size: 1rem; }
  .tl-nav{ margin-top: 8px; margin-inline: auto; justify-content: center; width: 100%; }
  .nm-head-right{ width: 100%; align-items: center; margin-inline: auto; }
  .journey .d-flex.justify-content-between,
  .stories .d-flex.justify-content-between,
  .news-media .d-flex.justify-content-between{
    justify-content: center !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .stories .tl-nav{ margin-inline: auto; }
  .impact-card-icon{ width: 52px; height: 52px; }
  .hub-highlight-item{ width: 100%; justify-content: flex-start; }
  .team-card{ padding: 22px 16px; }
  iframe, video, table{ max-width: 100%; }
  table{ display: block; overflow-x: auto; }
}

@media (max-width: 480px){
  .brand-logo{ height: 44px; }
  .page-hero-content h1{ font-size: 1.32rem; }
  .map-tooltip{ width: 160px; padding: 10px 12px; }
  .story-card{
    width: min(320px, 86vw);
    height: 330px;
  }
  .story-thumb{ height: 220px; }
}
.news-card-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background: #f3f4f6;
  color: #b50000;
  font-size: 2.5rem;
}
.tender-card .news-card-img {
  background: #f7f7f8;
}
.tender-card .news-card-img img {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top center;
  display: block;
}
.tender-card:hover .news-card-img img {
  transform: none;
}
.careers-media img { width: 100%; height: auto; display: block; }