/* ===================================================================
   assets/marketing.css — shared styling for the public marketing site
   (index.html, about.html, features.html, resources.html, faq.html).

   Extracted because the site grew from one landing page to five, and
   duplicating the navbar/dropdown/card/footer CSS in each file's inline
   <style> block would mean five places to update every time any of them
   changed. Page-specific layout (hero variants, the showcase carousel,
   the why-choose split, the audience grid) stays inline in each page —
   only what's genuinely shared lives here.
   =================================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* The navbar is sticky and 76px tall, so an in-page anchor jump would park
   the target heading underneath it — the section looked "cut in half" on
   arrival. scroll-margin-top reserves the navbar's height (plus breathing
   room) on every element an anchor can target. */
[id]{scroll-margin-top:104px;}
body{
  margin:0;
  font-family:'Outfit',sans-serif;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-0.02em;line-height:1.1;}
p{margin:0;line-height:1.6;}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 24px;}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px;}

/* ---------- Utility buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:56px;padding:0 30px;border-radius:var(--radius-md);
  font-weight:600;font-size:16px;white-space:nowrap;
  transition:all .2s ease;
}
.btn-primary{background:var(--primary-dark);color:var(--on-primary);}
.btn-primary:hover{background:var(--primary-dark);transform:scale(1.05);}
.btn-primary.on-dark:hover{background:#fff;color: var(--primary-ink);}
.btn-primary.on-amber{background:var(--dark-2);color:#fff;}
.btn-primary.on-amber:hover{background:#000;}
.btn-white{background:#fff;color: var(--primary-ink);}
.btn-white:hover{background:var(--muted);transform:scale(1.05);}
.btn-outline{background:transparent;border:4px solid #fff;color:#fff;height:52px;padding:0 26px;}
.btn-outline:hover{background:#fff;color: var(--primary-ink);}
.btn-outline-dark{border:4px solid var(--dark-2);color:var(--dark-2);height:52px;padding:0 26px;}
.btn-outline-dark:hover{background:var(--dark-2);color:#fff;}
.btn-sm{height:44px;padding:0 20px;font-size:14px;border-radius:var(--radius-md);}

/* ---------- Nav ---------- */
.navbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border);}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--fg);}
.brand-mark{width:38px;height:38px;border-radius:var(--radius-md);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-links{display:flex;align-items:center;gap:24px;}
/* Never let a label wrap. Five dropdown triggers plus the language switch
   and the login button is a wide nav, and when it ran out of room the
   longer labels broke onto a second line and the brand ended up touching
   the first item. It now collapses to the hamburger before that happens
   (see the nav breakpoint below) and refuses to wrap either way. */
.nav-links > a,.nav-drop-btn{white-space:nowrap;}
.nav-links > a{font-weight:500;font-size:15px;color:var(--fg);transition:color .2s;position:relative;padding-bottom:2px;}
.nav-links > a:hover{color: var(--primary-ink);}
.nav-links > a.active{color: var(--primary-ink);}
.nav-links > a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;}
.nav-links > a:hover::after,.nav-links > a:focus-visible::after,.nav-links > a.active::after{transform:scaleX(1);}
.nav-right{display:flex;align-items:center;gap:14px;}
.lang-switch{display:flex;background:var(--muted);border-radius:999px;padding:4px;gap:2px;}
.lang-switch button{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.03em;color: var(--fg-muted);transition:all .2s;}
.lang-switch button.active{background:var(--primary-dark);color:var(--on-primary);}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-md);}
.nav-toggle:hover{background:var(--muted);}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:8px 24px 36px;border-top:1px solid var(--border);max-height:70vh;overflow-y:auto;}
.mobile-menu a{padding:12px 4px;font-weight:500;border-bottom:1px solid var(--border);}
.mobile-menu.open{display:flex;}
.mmenu-label{padding:14px 4px 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color: var(--fg-muted);}
.mobile-menu a.mmenu-sub{padding:10px 4px 10px 14px;font-size:14px;color:#4B5563;border-bottom:none;}

/* ---------- Mobile menu accordion groups ----------
   Collapsed by default so the whole menu fits on one phone screen; tapping a
   group header expands just that group. Mirrors the pattern on the hospital
   sites this nav is modelled on, where each top-level item with children is
   a disclosure rather than an always-open list. */
.mgroup{border-bottom:1px solid var(--border);}
.mgroup-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 4px;font-family:inherit;font-size:15.5px;font-weight:500;color:var(--fg);text-align:left;
}
.mgroup-btn svg{width:16px;height:16px;flex-shrink:0;color: var(--fg-muted);transition:transform .2s ease;}
.mgroup.open .mgroup-btn{color: var(--primary-ink);}
.mgroup.open .mgroup-btn svg{transform:rotate(180deg);color: var(--primary-ink);}
.mgroup-items{display:none;flex-direction:column;padding:2px 0 10px;}
.mgroup.open .mgroup-items{display:flex;}
.mgroup-items a{padding:11px 4px 11px 16px;font-size:14px;color:#4B5563;border-bottom:none;}
.mgroup-items a:hover{color: var(--primary-ink);}

/* ---------- "Need help?" quick-find panel ----------
   A white card that overlaps the hero: a category jump list plus a search box
   that filters an in-page index of the site's own pages and sections. There is
   no search backend, so this searches the index shipped with the page rather
   than pretending to query a server. */
.helpbar{position:relative;z-index:20;}
.help-panel{
  background:#fff;border-radius:var(--radius-lg);padding:22px 22px 24px;
  box-shadow:0 18px 44px rgba(17,24,39,.16);
}
.help-panel h3{font-size:19px;margin-bottom:14px;color:var(--fg);}
.help-field{position:relative;margin-bottom:10px;}
.help-select{
  width:100%;appearance:none;-webkit-appearance:none;
  background:var(--primary-dark);color:var(--on-primary);
  border:0;border-radius:var(--radius-md);
  padding:14px 42px 14px 16px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
}
.help-field .sel-arrow{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--on-primary);pointer-events:none;
}
.help-search-wrap{position:relative;}
.help-search{
  width:100%;background:var(--muted);border:2px solid transparent;border-radius:var(--radius-md);
  padding:14px 44px 14px 16px;font-family:inherit;font-size:14.5px;color:var(--fg);
}
.help-search::placeholder{color: var(--fg-muted);}
.help-search:focus{outline:none;border-color:var(--primary);background:#fff;}
.help-search-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color: var(--primary-ink);
}
.help-search-btn:hover{background:var(--muted);}
.help-search-btn svg{width:18px;height:18px;}
.help-results{
  margin-top:10px;border:1px solid var(--border);border-radius:var(--radius-md);
  overflow:hidden;display:none;
}
.help-results.show{display:block;}
.help-results a{
  display:block;padding:11px 14px;font-size:14px;color:var(--fg);
  border-bottom:1px solid var(--border);transition:background-color .15s ease;
}
.help-results a:last-child{border-bottom:none;}
.help-results a:hover{background:var(--muted);color: var(--primary-ink);}
.help-results a small{display:block;font-size:12px;color: var(--fg-muted);margin-top:2px;}
.help-results .help-empty{padding:12px 14px;font-size:13.5px;color: var(--fg-muted);}

/* ---------- Colour tile grid (image panels with coloured captions) ----------
   The "browse by area" row: a photo per tile with a solid colour band holding
   the label, so the section reads as a set of destinations rather than another
   row of text cards. */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.tile{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;
  min-height:300px;transition:transform .2s ease, box-shadow .2s ease;
}
.tile:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(17,24,39,.16);}
.tile .media{flex:1 1 auto;border-radius:0;aspect-ratio:auto;min-height:150px;}
.tile-body{padding:18px 18px 20px;color:#fff;}
.tile-body h3{font-size:17px;margin-bottom:6px;}
.tile-body p{font-size:13px;color:rgba(255,255,255,.92);}
.tile-body .tile-go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:700;}
.tile-body .tile-go svg{width:14px;height:14px;transition:transform .15s ease;}
.tile:hover .tile-go svg{transform:translateX(3px);}
.tile-blue .tile-body{background:#3B82F6;}
.tile-green .tile-body{background:var(--secondary-deep);}
.tile-amber .tile-body{background:var(--accent);color:var(--on-accent);}
.tile-amber .tile-body p{color:rgba(17,24,39,.9);}
.tile-dark .tile-body{background:var(--dark-2);}

/* ---------- Video facade player ----------
   A poster frame with our own play button. The YouTube iframe is only
   injected on click, with autoplay — so the video starts the moment you
   press play instead of loading a second player you have to click again,
   and the page doesn't pull YouTube's scripts until someone actually
   wants to watch. */
.vplayer{
  position:relative;aspect-ratio:16/9;background:#0B1220;border-radius:var(--radius-lg);
  overflow:hidden;cursor:pointer;display:block;width:100%;border:0;padding:0;
}
.vplayer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease, filter .3s ease;}
.vplayer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,18,32,.15) 0%,rgba(11,18,32,.55) 100%);
  transition:opacity .3s ease;
}
.vplayer:hover img{transform:scale(1.04);}
.vplay-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:72px;height:72px;border-radius:999px;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s ease, background-color .2s ease;
}
.vplayer:hover .vplay-btn{transform:translate(-50%,-50%) scale(1.09);background:#fff;}
.vplay-btn svg{width:26px;height:26px;color:var(--primary-dark);margin-left:4px;}
.vplayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;}
.vplayer.playing::after,.vplayer.playing .vplay-btn{opacity:0;pointer-events:none;}
.vplay-meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;color:#fff;
  transition:opacity .3s ease;
}
.vplayer.playing .vplay-meta{opacity:0;pointer-events:none;}
.vplay-meta b{display:block;font-size:16px;font-weight:700;margin-bottom:3px;}
.vplay-meta span{font-size:12.5px;color:rgba(255,255,255,.85);}
@media (max-width:680px){
  .vplay-btn{width:56px;height:56px;}
  .vplay-btn svg{width:21px;height:21px;}
  .vplay-meta{padding:13px 15px;}
  .vplay-meta b{font-size:14px;}
}

/* ---------- WHO standards page ---------- */
.zchart-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 30px 24px;max-width:900px;margin:0 auto;
}
.zchart-card h3{font-size:17px;margin-bottom:4px;}
.zchart-card .sub{font-size:13px;color: var(--fg-muted);margin-bottom:20px;}
.zlegend{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border);}
.zlegend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#4B5563;}
.zlegend i{width:13px;height:13px;border-radius:3px;display:inline-block;flex-shrink:0;}

.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.ind-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;transition:transform .2s ease, box-shadow .2s ease;}
.ind-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(17,24,39,.08);}
.ind-abbr{font-size:12px;font-weight:800;letter-spacing:.08em;color: var(--primary-ink);margin-bottom:9px;}
.ind-card h3{font-size:15.5px;margin-bottom:8px;line-height:1.35;}
.ind-card p{font-size:13.5px;color:#4B5563;line-height:1.6;}

/* Status table — a real table, because this is reference data people
   scan by row, not a set of marketing cards. */
.ztable-wrap{max-width:900px;margin:0 auto;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;}
table.ztable{width:100%;border-collapse:collapse;min-width:620px;}
table.ztable th,table.ztable td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--border);}
table.ztable thead th{background:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4B5563;}
table.ztable tbody tr:last-child td{border-bottom:none;}
table.ztable td{font-size:14px;color:#374151;vertical-align:top;}
table.ztable td.zrange{font-weight:700;color:var(--fg);white-space:nowrap;}
.zpill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap;}
.zpill i{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.zpill.high{background:#FEE2E2;color:#991B1B;}
.zpill.high i{background:#DC2626;}
.zpill.med{background:#FEF3C7;color:#92400E;}
.zpill.med i{background:#D97706;}
.zpill.low{background:#D1FAE5;color:#065F46;}
.zpill.low i{background:#059669;}
.ztab-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px;}
@media (max-width:960px){ .ind-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:680px){
  .ind-grid{grid-template-columns:1fr;}
  .zchart-card{padding:20px 18px 18px;}
}

/* ---------- Article cards (public health-tips hub) ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px;}
.chip{
  background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:9px 18px;font-family:inherit;font-size:13.5px;font-weight:600;color:#4B5563;
  transition:all .18s ease;
}
.chip:hover{border-color:var(--primary);color: var(--primary-ink);}
.chip.active{background:var(--primary-dark);border-color:var(--primary-dark);color:var(--on-primary);}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.article-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.article-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(17,24,39,.1);}
.article-card .media{border-radius:0;aspect-ratio:16/10;}
.article-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.article-cat{
  align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;margin-bottom:12px;background:#DBEAFE;color:#1D4ED8;
}
.article-cat.cat-nutrition{background:#D1FAE5;color:#047857;}
.article-cat.cat-growth{background:#DBEAFE;color:#1D4ED8;}
.article-cat.cat-care{background:#FEF3C7;color:#92400E;}
.article-card h3{font-size:17px;margin-bottom:9px;line-height:1.35;}
.article-card p{font-size:13.5px;color:#4B5563;line-height:1.6;margin-bottom:14px;}
.article-meta{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color: var(--fg-muted);}
.article-meta svg{width:14px;height:14px;}
.notice{
  display:flex;gap:13px;align-items:flex-start;max-width:820px;margin:44px auto 0;
  background:var(--muted);border-radius:var(--radius-lg);padding:20px 22px;
}
.notice svg{width:20px;height:20px;flex-shrink:0;margin-top:1px;color: var(--fg-muted);}
.notice p{font-size:13.5px;color:#4B5563;line-height:1.65;}
.notice b{color:var(--fg);}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start;}
.contact-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 26px;}
.contact-row{display:flex;gap:15px;align-items:flex-start;}
.contact-row + .contact-row{margin-top:22px;padding-top:22px;border-top:1px solid var(--border);}
.contact-ic{
  width:44px;height:44px;border-radius:12px;background:#DBEAFE;color: var(--primary-ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-ic svg{width:21px;height:21px;}
.contact-row b{display:block;font-size:14.5px;margin-bottom:4px;color:var(--fg);}
.contact-row span,.contact-row a{display:block;font-size:14px;color:#4B5563;line-height:1.55;}
.contact-row a:hover{color: var(--primary-ink);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:13.5px;font-weight:600;color:var(--fg);}
.field input,.field select,.field textarea{
  width:100%;background:var(--muted);border:2px solid transparent;border-radius:var(--radius-md);
  padding:13px 15px;font-family:inherit;font-size:14.5px;color:var(--fg);
}
.field textarea{min-height:132px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);background:#fff;}
.form-result{display:none;margin-top:14px;padding:13px 16px;border-radius:var(--radius-md);font-size:14px;line-height:1.55;}
.form-result.show{display:block;}
.form-result.ok{background:#D1FAE5;color:#065F46;}
.form-result.err{background:#FEE2E2;color:#991B1B;}
@media (max-width:960px){
  .article-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:680px){
  .article-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
}

/* ---------- Split feature row (image beside text, alternating) ----------
   Used on the Features page so each capability is introduced by a picture
   rather than an icon in a box. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split + .split{margin-top:88px;}
.split .media{aspect-ratio:4/3;border-radius:var(--radius-lg);}
.split--rev .split-media{order:2;}
.split-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color: var(--primary-ink);margin-bottom:12px;
}
.split-text h2{font-size:30px;margin-bottom:14px;}
.split-text > p{font-size:16px;color:#4B5563;margin-bottom:18px;}
.split-list{display:flex;flex-direction:column;gap:10px;}
.split-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#374151;}
.split-list li svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color: var(--secondary-ink);}
.split-badge{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  background:var(--muted);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;color:var(--fg);
}
.split-badge svg{width:15px;height:15px;color: var(--primary-ink);}

/* ---------- Nav dropdowns (desktop) ---------- */
.nav-item{position:relative;display:flex;align-items:center;}
/* The trigger is a real link, not a button: "About Us" should take you to
   the About page in one click, instead of forcing you to pick one of its
   sub-items (which lands you on a section and skips the page intro). The
   dropdown is opened by hover or keyboard focus, never by the click. */
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-weight:500;font-size:15px;color:var(--fg);font-family:inherit;
  padding-bottom:2px;position:relative;transition:color .2s;
}
.nav-drop-btn svg{width:13px;height:13px;transition:transform .2s ease;flex-shrink:0;}
.nav-drop-btn::after{
  content:"";position:absolute;left:0;right:14px;bottom:-2px;height:2px;background:var(--primary);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.nav-item:hover .nav-drop-btn,.nav-item:focus-within .nav-drop-btn,.nav-drop-btn.active{color: var(--primary-ink);}
.nav-item:hover .nav-drop-btn::after,.nav-item:focus-within .nav-drop-btn::after,.nav-drop-btn.active::after{transform:scaleX(1);}
.nav-item:hover .nav-drop-btn svg,.nav-item:focus-within .nav-drop-btn svg{transform:rotate(180deg);}
.dropdown-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:0 14px 34px rgba(17,24,39,.12);padding:10px;min-width:260px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease;
  z-index:60;
}
/* :focus-within covers keyboard users, who get no hover state. */
.nav-item:hover .dropdown-menu,.nav-item:focus-within .dropdown-menu{
  opacity:1;visibility:visible;pointer-events:auto;
}
.dropdown-menu a{
  display:block;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--fg);
  transition:background-color .15s ease,color .15s ease;white-space:nowrap;
}
.dropdown-menu a:hover{background:var(--muted);color: var(--primary-ink);}
.dropdown-menu a small{display:block;font-size:12px;font-weight:400;color: var(--fg-muted);margin-top:1px;white-space:normal;}

/* ---------- Quick action bar (Pantai-style colour row) ---------- */
.quick-actions{background:#fff;border-bottom:1px solid var(--border);}
.quick-actions .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.qa-item{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:20px 14px;font-weight:700;font-size:14.5px;color:#fff;
  transition:filter .2s ease;text-align:center;
}
.qa-item:hover{filter:brightness(1.08);}
.qa-item svg{width:20px;height:20px;flex-shrink:0;}
.qa-blue{background:#3B82F6;}
.qa-amber{background:var(--accent);color:var(--on-accent);}
.qa-green{background:var(--secondary);color:var(--on-secondary);}
.qa-dark{background:var(--dark-2);}
@media (max-width:900px){ .quick-actions .wrap{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .quick-actions .wrap{grid-template-columns:1fr;} }

/* ---------- Generic page hero (about / features / resources / faq) ---------- */
.page-hero{position:relative;background:var(--primary-dark);color:var(--on-primary);overflow:hidden;padding:76px 0 84px;text-align:center;}
.page-hero .decor{position:absolute;border-radius:50%;background:#fff;opacity:.07;}
.page-hero .decor.d1{width:380px;height:380px;top:-160px;right:-100px;}
.page-hero .decor.d2{width:220px;height:220px;bottom:-100px;left:-70px;}
.page-hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.16);color:#fff;font-weight:600;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:22px;
}
.page-hero h1{font-size:38px;margin-bottom:18px;}
.page-hero p.lead{font-size:17px;color:rgba(255,255,255,.92);margin:0 auto 0;max-width:620px;}
.page-hero-stat{
  display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.12);
  border-radius:var(--radius-lg);padding:14px 22px;text-align:left;max-width:560px;margin-top:28px;
}
.page-hero-stat b{font-size:18px;font-weight:800;display:block;}
.page-hero-stat span{font-size:13px;color:rgba(255,255,255,.85);}

/* ---------- Section shells ---------- */
section{padding:88px 0;}
.section-head{max-width:640px;margin:0 auto 52px;text-align:center;}
.section-head .eyebrow-line{color: var(--primary-ink);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;display:block;}
.section-head h2{font-size:34px;margin-bottom:14px;}
.section-head p{font-size:16px;color:#4B5563;}
.on-dark .section-head p{color:#D1D5DB;}
.on-dark .section-head .eyebrow-line{color:#93C5FD;}
.alt-bg{background:var(--muted);}

/* ---------- Icon circle ---------- */
.icon-circle{width:56px;height:56px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s;}
.icon-circle svg{width:26px;height:26px;}
.group:hover .icon-circle{transform:scale(1.1);}

/* ---------- Feature cards (tinted, used on the homepage teaser + Features page) ---------- */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.feature-card{background:var(--muted);border-radius:var(--radius-lg);padding:32px;transition:all .2s;cursor:default;}
.feature-card:hover{transform:scale(1.02);}
.feature-card.tint-blue{background:#EFF6FF;}
.feature-card.tint-blue:hover{background:#DBEAFE;}
.feature-card.tint-blue .icon-circle{color: var(--primary-ink);}
.feature-card.tint-green{background:#ECFDF5;}
.feature-card.tint-green:hover{background:#D1FAE5;}
.feature-card.tint-green .icon-circle{color: var(--secondary-ink);}
.feature-card.tint-amber{background:#FFFBEB;}
.feature-card.tint-amber:hover{background:#FEF3C7;}
.feature-card.tint-amber .icon-circle{color: var(--accent-ink);}
.feature-card h3{font-size:18px;margin:18px 0 8px;}
.feature-card p{font-size:14px;color:#4B5563;}

/* ---------- Plain white info cards (About's problem/objective cards) ---------- */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.info-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;transition:all .2s;}
.info-card:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,.06);}
.info-card .icon-circle{background:#EFF6FF;color: var(--primary-ink);margin-bottom:18px;}
.info-card h3{font-size:17px;margin-bottom:8px;}
.info-card p{font-size:14px;color:#4B5563;}
.info-card ul{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.info-card li{font-size:13.5px;color:#4B5563;padding-left:16px;position:relative;}
.info-card li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:2px;background: var(--primary);}

/* ---------- Team grid (About page) ---------- */
.team-meta{text-align:center;font-size:13.5px;color: var(--fg-muted);max-width:560px;margin:24px auto 0;}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px;}
.team-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;text-align:center;transition:all .2s;}
.team-card:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,.06);}
.team-avatar{width:64px;height:64px;border-radius:50%;background:var(--primary-dark);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin:0 auto 14px;overflow:hidden;}
.team-avatar img{width:100%;height:100%;object-fit:cover;}
.team-card h3{font-size:15.5px;margin-bottom:4px;}
.team-card .role{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color: var(--primary-ink);margin-bottom:4px;}
.team-card .matric{font-size:13px;color: var(--fg-muted);}
.supervisor-card{max-width:360px;margin:0 auto;}
.supervisor-card .team-avatar{background:var(--secondary-deep);}
.supervisor-card .role{color: var(--secondary-ink);}

/* ---------- Method / explainer text blocks ---------- */
.method-block{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:18px;}
.method-block p{font-size:15.5px;color:#374151;}
.method-block b{color:var(--fg);}

/* ---------- Awareness videos (Resources page) ---------- */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.video-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .2s;}
.video-card:hover{transform:scale(1.01);box-shadow:0 8px 24px rgba(0,0,0,.06);}
.video-embed{position:relative;aspect-ratio:16/9;background:#000;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-card-body{padding:20px 22px 24px;}
.video-card-body h3{font-size:16px;margin-bottom:8px;}
.video-card-body p{font-size:13.5px;color:#4B5563;margin-bottom:10px;}
.video-source{font-size:12px;font-weight:700;letter-spacing:.02em;color: var(--fg-muted);}
@media (max-width:680px){ .video-grid{grid-template-columns:1fr;} }

/* ---------- FAQ accordion (homepage teaser + full FAQ page) ---------- */
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:2px solid var(--dark-2);}
.faq-item:first-child{border-top:2px solid var(--dark-2);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 4px;background:none;text-align:left;font-size:17px;font-weight:600;color:var(--fg);}
.faq-icon{width:32px;height:32px;border-radius:50%;background:var(--muted);color:var(--fg);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;}
.faq-icon svg{width:16px;height:16px;}
.faq-item.open .faq-icon{background:var(--primary-dark);color:var(--on-primary);transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:320px;}
.faq-a p{padding:0 4px 24px;font-size:15px;color:#4B5563;max-width:640px;}

/* ---------- CTA (amber) ---------- */
.cta{background:var(--accent);color:var(--on-accent);position:relative;overflow:hidden;text-align:center;}
.cta .decor{position:absolute;border-radius:50%;background:#fff;opacity:.1;}
.cta .decor.c1{width:280px;height:280px;top:-120px;left:-80px;}
.cta .decor.c2{width:180px;height:180px;bottom:-90px;right:6%;}
.cta-inner{position:relative;z-index:1;max-width:640px;margin:0 auto;}
.cta h2{font-size:32px;color:var(--on-accent);margin-bottom:14px;}
.cta p{color:rgba(17,24,39,.95);font-size:16px;margin-bottom:30px;}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- Footer ---------- */
footer{background:var(--dark-2);color:#D1D5DB;padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer-brand .brand{color:#fff;margin-bottom:14px;}
.footer-brand p{font-size:14px;color:var(--fg-muted-on-dark);max-width:280px;}
.footer-col h4{font-size:14px;color:#fff;font-weight:700;margin-bottom:16px;letter-spacing:.02em;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:14px;color:var(--fg-muted-on-dark);transition:color .2s;}
.footer-col a:hover{color:#fff;}
.footer-col li{font-size:14px;color:var(--fg-muted-on-dark);display:flex;gap:8px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--fg-muted-on-dark);}
.footer-legal{display:flex;gap:18px;}
.footer-legal a{color:var(--fg-muted-on-dark);transition:color .2s;}
.footer-legal a:hover{color:#fff;}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.features-grid .reveal:nth-child(2),.cards-grid .reveal:nth-child(2),.team-grid .reveal:nth-child(2),.video-grid .reveal:nth-child(2){transition-delay:.08s;}
.features-grid .reveal:nth-child(3),.cards-grid .reveal:nth-child(3),.team-grid .reveal:nth-child(3){transition-delay:.16s;}
.features-grid .reveal:nth-child(4){transition-delay:.06s;}
.features-grid .reveal:nth-child(5){transition-delay:.12s;}
.features-grid .reveal:nth-child(6){transition-delay:.18s;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* ---------- Shared responsive base ---------- */
/* ---------- Nav breakpoint ----------
   Its own query, deliberately wider than the 960px used for the content
   grids below: measured at 1000px the nav needed 961px for brand + links
   + actions inside a 985px bar, so it collapses at 1100px where there is
   still comfortable room, rather than waiting for the layout to break. */
@media (max-width:1100px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-right .btn{display:none;}
}

@media (max-width:960px){
  .page-hero h1{font-size:30px;}
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .cards-grid{grid-template-columns:1fr 1fr;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .tile-grid{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr;gap:28px;}
  .split + .split{margin-top:56px;}
  /* Picture first on narrow screens — it's the fastest way to read the row,
     and it keeps the order consistent whether or not the row is reversed. */
  .split--rev .split-media{order:0;}
  .split-text h2{font-size:25px;}
}
@media (max-width:680px){
  .wrap{padding:0 16px;}
  .nav-right{gap:8px;}
  .lang-switch button{padding:9px 12px;font-size:12.5px;min-height:36px;}
  .brand{font-size:19px;gap:8px;}
  .brand-mark{width:34px;height:34px;}
  .page-hero{padding:52px 0 60px;}
  .page-hero h1{font-size:26px;}
  section{padding:56px 0;}
  .section-head h2{font-size:24px;}
  .features-grid{grid-template-columns:1fr;}
  .cards-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
  .faq-q{font-size:15px;padding:20px 2px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .tile-grid{grid-template-columns:1fr;}
  .tile{min-height:0;}
  .tile .media{aspect-ratio:16/9;min-height:0;}
  .help-panel{padding:18px 18px 20px;}
  .help-panel h3{font-size:17px;}
  .split-text h2{font-size:22px;}
}