/* ===========================================================
   NATIONAL SCHOOLS INNOVATION BLUEPRINT
   DESIGN SYSTEM — css/styles.css
   Single shared stylesheet for the entire site.
=========================================================== */

:root{

  /* Brand colours */
  --primary:#911537;
  --primary-dark:#6f0f2a;
  --secondary:#b73457;
  --accent:#be4e6b;
  --accent-light:#eb8795;
  --white:#FFFFFF;
  --text:#222222;
  --text-light:#5b5560;
  --bg:#F8FAFC;
  --bg-tint:#FBF1F3;
  --border:#E7DEE2;

  /* Tints derived from brand colours (no invented hues) */
  --primary-tint:#FBEDF1;
  --accent-tint:#FBE6EA;

  /* Dark mode colours */
  --dark-bg:#171114;
  --dark-surface:#24191d;
  --dark-surface-2:#2d2024;
  --dark-text:#F7F1F3;
  --dark-text-light:#D8C9CE;
  --dark-border:#49353c;
  --dark-primary-tint:#3a2029;
  --dark-accent-tint:#45232d;

  --radius-sm:10px;
  --radius:18px;
  --radius-lg:28px;

  --shadow-sm:0 2px 10px rgba(145,21,55,.06);
  --shadow-md:0 12px 32px rgba(145,21,55,.10);
  --shadow-lg:0 24px 60px rgba(145,21,55,.16);

  --transition:.25s ease;
  --container:1240px;

  --font-head:"Playfair Display", Georgia, serif;
  --font-body:"Poppins", Arial, sans-serif;
}

/* ===========================================================
   RESET
=========================================================== */

*,*::before,*::after{ box-sizing:border-box; }

*{ margin:0; padding:0; }

html{ scroll-behavior:smooth; }

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

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ text-decoration:none; color:inherit; }

ul{ list-style:none; }

button{ font-family:inherit; }

input,textarea,select{ font-family:inherit; }

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

.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--primary);
  color:var(--white);
  padding:14px 22px;
  z-index:2000;
  border-radius:0 0 10px 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

.container{
  width:min(92%, var(--container));
  margin:auto;
}

.container-narrow{
  width:min(92%, 900px);
  margin:auto;
}

main{ display:block; }

section{ padding:100px 0; }

.section-tight{ padding:70px 0; }

.bg-tint{ background:var(--primary-tint); }
.bg-white{ background:var(--white); }

/* ===========================================================
   TYPOGRAPHY
=========================================================== */

h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  color:var(--primary);
  line-height:1.15;
  font-weight:800;
}

h1{ font-size:clamp(2.4rem, 4vw + 1rem, 3.75rem); margin-bottom:24px; }
h2{ font-size:clamp(1.9rem, 2.4vw + 1rem, 2.65rem); margin-bottom:20px; }
h3{ font-size:1.4rem; margin-bottom:14px; font-weight:700; }
h4{ font-size:1.15rem; margin-bottom:10px; font-weight:700; }

p{ color:var(--text-light); margin-bottom:18px; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--secondary);
  background:var(--accent-tint);
  padding:8px 18px;
  border-radius:999px;
  margin-bottom:20px;
}

.lead{ font-size:1.2rem; color:var(--text-light); }

.text-center{ text-align:center; }
.text-white{ color:var(--white); }
.text-white h1,.text-white h2,.text-white h3{ color:var(--white); }
.text-white p{ color:rgba(255,255,255,.88); }

/* ===========================================================
   BUTTONS
=========================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 32px;
  border-radius:999px;
  font-weight:700;
  font-size:.98rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  line-height:1.2;
  white-space:nowrap;
}

.btn-primary{ background:var(--primary); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--primary-dark); transform:translateY(-3px); box-shadow:var(--shadow-md); }

.btn-secondary{ background:var(--white); color:var(--primary); border-color:var(--primary); }
.btn-secondary:hover{ background:var(--primary); color:var(--white); transform:translateY(-3px); }

.btn-outline-white{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.6); }
.btn-outline-white:hover{ background:var(--white); color:var(--primary); }

.btn-ghost{ background:var(--accent-tint); color:var(--primary); }
.btn-ghost:hover{ background:var(--accent-light); color:var(--white); }

.btn-sm{ padding:11px 22px; font-size:.88rem; }
.btn-block{ width:100%; }

.button-group{ display:flex; gap:18px; flex-wrap:wrap; }

/* ===========================================================
   HEADER + NAVIGATION
=========================================================== */

.site-header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  z-index:1000;
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--transition);
}

.site-header.scrolled{ box-shadow:var(--shadow-md); }

.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:86px;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-body);
  font-weight:800;
  font-size:1.05rem;
  color:var(--primary);
  flex-shrink:0;
}

.logo img{ height:42px; width:42px; object-fit:contain; }

.main-nav{ flex:1; display:flex; justify-content:center; }

.main-nav > ul{ display:flex; align-items:center; gap:8px; }

.main-nav > ul > li > a{
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:600;
  font-size:.97rem;
  padding:10px 14px;
  border-radius:999px;
  color:var(--text);
  transition:background var(--transition), color var(--transition);
  position:relative;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li > a.active{
  background:var(--primary-tint);
  color:var(--primary);
}

.chevron{ font-size:.65rem; transition:transform var(--transition); }

.has-dropdown{ position:relative; }

.dropdown-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
  padding:14px;
  min-width:300px;
  display:grid;
  gap:2px;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.open .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.has-dropdown:hover .chevron,
.has-dropdown:focus-within .chevron{ transform:rotate(180deg); }

.dropdown-menu li a{
  display:block;
  padding:10px 14px;
  border-radius:10px;
  font-size:.93rem;
  font-weight:500;
  color:var(--text);
}

.dropdown-menu li a:hover{ background:var(--primary-tint); color:var(--primary); }

.dropdown-divider{ height:1px; background:var(--border); margin:8px 4px; }

.btn-nav{ flex-shrink:0; }

.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}

@media (max-width:1080px){
  .header-actions{
    display:none;
  }
}

.mobile-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  border:none;
  background:var(--primary-tint);
  border-radius:12px;
  cursor:pointer;
  flex-shrink:0;
}

.mobile-toggle span{
  width:22px;
  height:2px;
  background:var(--primary);
  margin:0 auto;
  border-radius:5px;
  transition:transform var(--transition), opacity var(--transition);
}

.mobile-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobile-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.mobile-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed;
  top:86px;
  left:0;
  width:100%;
  height:calc(100vh - 86px);
  background:var(--white);
  padding:30px 6%;
  overflow:auto;
  transform:translateX(-100%);
  transition:transform .35s ease;
  z-index:999;
  display:none;
}

.mobile-menu.active{ transform:translateX(0); display:block; }

.mobile-menu ul{ display:flex; flex-direction:column; gap:6px; margin-bottom:24px; }

.mobile-menu > ul > li > a,
.mobile-dropdown-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  border:none;
  background:none;
  text-align:left;
  font-size:1.08rem;
  font-weight:600;
  padding:14px 10px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
}

.mobile-dropdown{
  display:none;
  padding:6px 0 10px 16px;
}

.mobile-dropdown.open{ display:block; }

.mobile-dropdown li a{
  display:block;
  padding:11px 10px;
  font-size:.98rem;
  color:var(--text-light);
  font-weight:500;
}

.mobile-dropdown-toggle .chevron{ transition:transform var(--transition); }
.mobile-dropdown-toggle[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

@media (max-width:1080px){
  .main-nav, .btn-nav{ display:none; }
  .mobile-toggle{ display:flex; }
}

/* ===========================================================
   HERO
=========================================================== */

.hero{
  padding:100px 0 110px;
  background:
    radial-gradient(circle at 85% 0%, var(--accent-tint), transparent 55%),
    linear-gradient(180deg, var(--primary-tint), var(--bg) 70%);
  position:relative;
  overflow:hidden;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center;
}

.hero h1{ margin-bottom:22px; }
.hero .lead{ margin-bottom:36px; max-width:52ch; }

.hero-stats{
  display:flex;
  gap:36px;
  margin-top:48px;
  flex-wrap:wrap;
}

.hero-stat strong{
  display:block;
  font-family:var(--font-head);
  font-size:1.9rem;
  color:var(--primary);
}

.hero-stat span{
  font-size:.86rem;
  color:var(--text-light);
  font-weight:600;
}

.hero-media{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
}

.hero-media img{ width:100%; height:100%; object-fit:cover; }

.hero-media-badge{
  position:absolute;
  left:24px;
  bottom:24px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);
  padding:16px 20px;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  max-width:230px;
}

.hero-media-badge strong{ display:block; font-family:var(--font-head); color:var(--primary); font-size:1.3rem; }
.hero-media-badge span{ font-size:.82rem; color:var(--text-light); }

.page-hero{
  padding:80px 0 90px;
  background:linear-gradient(180deg, var(--primary-tint), var(--bg) 75%);
  text-align:center;
}

.page-hero h1{ max-width:820px; margin-left:auto; margin-right:auto; }
.page-hero .lead{ max-width:680px; margin:0 auto 34px; }

.page-hero-split{ text-align:left; }

/* ===========================================================
   SECTION HEADINGS
=========================================================== */

.section-heading{
  max-width:760px;
  margin:0 auto 56px;
  text-align:center;
}

.section-heading.align-left{ margin:0 0 48px; text-align:left; }

/* ===========================================================
   GRIDS
=========================================================== */

.grid{ display:grid; gap:32px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

/* ===========================================================
   CARDS
=========================================================== */

.card{
  background:var(--white);
  padding:36px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:transform var(--transition), box-shadow var(--transition);
}

.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

.feature-card{
  background:var(--white);
  padding:38px 32px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:transform var(--transition), box-shadow var(--transition);
}

.feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

.feature-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:var(--primary-tint);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-size:1.3rem;
  font-weight:800;
  margin-bottom:22px;
}

/* Category / programme cards */

.category-grid,
.programme-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.category-card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  padding:36px;
  display:flex;
  flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition);
  border-top:5px solid var(--accent);
}

.category-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }

.category-card ul{ margin:16px 0 22px; display:grid; gap:8px; }

.category-card ul li{
  font-size:.92rem;
  color:var(--text-light);
  padding-left:20px;
  position:relative;
}

.category-card ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
}

.card-link{
  margin-top:auto;
  font-weight:700;
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.programme-card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition);
}

.programme-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }

.programme-image{
  aspect-ratio:16/11;
  overflow:hidden;
  background:var(--primary-tint);
}

.programme-image img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.programme-card:hover .programme-image img{ transform:scale(1.06); }

.programme-body{
  padding:30px 30px 32px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.programme-body p{ flex:1; }

.programme-footer{ margin-top:24px; }

/* ===========================================================
   STATS
=========================================================== */

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

.stat{
  background:var(--white);
  border:1px solid var(--border);
  padding:34px 24px;
  border-radius:var(--radius);
  text-align:center;
  box-shadow:var(--shadow-sm);
}

.stat strong{
  display:block;
  font-family:var(--font-head);
  font-size:2.5rem;
  color:var(--primary);
  margin-bottom:6px;
}

.stat span{ font-size:.9rem; color:var(--text-light); font-weight:600; }

/* ===========================================================
   TIMELINE / STEPS
=========================================================== */

.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.step-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:34px;
  box-shadow:var(--shadow-sm);
}

.step-number{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--primary);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-weight:800;
  margin-bottom:18px;
}

.timeline{ position:relative; margin-top:20px; }

.timeline::before{
  content:"";
  position:absolute;
  left:23px;
  top:6px;
  bottom:6px;
  width:2px;
  background:var(--border);
}

.timeline-step{ position:relative; padding-left:70px; margin-bottom:38px; }
.timeline-step:last-child{ margin-bottom:0; }

.timeline-number{
  position:absolute;
  left:0;
  top:0;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--primary);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-weight:800;
  box-shadow:var(--shadow-sm);
}

/* ===========================================================
   TABS
=========================================================== */

.tabs{ margin-top:36px; }

.tab-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; }

.tab-button{
  padding:13px 26px;
  border-radius:999px;
  background:var(--white);
  border:2px solid var(--border);
  cursor:pointer;
  font-weight:700;
  font-size:.94rem;
  color:var(--text);
  transition:var(--transition);
}

.tab-button:hover{ border-color:var(--accent); }

.tab-button.active{ background:var(--primary); color:var(--white); border-color:var(--primary); }

.tab-panel{ display:none; animation:fadeUp .4s ease; }
.tab-panel.active{ display:block; }

/* ===========================================================
   ACCORDIONS
=========================================================== */

.accordion-list{ display:grid; gap:14px; margin-top:8px; }

.accordion-item{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 26px;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.02rem;
  color:var(--primary);
}

.accordion-trigger:hover{ background:var(--primary-tint); }

.accordion-trigger .plus{
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--primary-tint);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  transition:transform var(--transition), background var(--transition), color var(--transition);
}

.accordion-item.active .accordion-trigger .plus{
  background:var(--primary);
  color:var(--white);
  transform:rotate(45deg);
}

.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.accordion-panel-inner{ padding:0 26px 24px; }

/* ===========================================================
   IMPLEMENTATION PATHWAY TABS (programme pages)
=========================================================== */

.resource-list{ display:grid; gap:14px; margin-top:28px; }

.resource{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:18px 22px;
  font-weight:600;
  box-shadow:var(--shadow-sm);
}

.resource .resource-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--primary-tint);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:1rem;
}

/* ===========================================================
   CASE STUDY LAYOUT
=========================================================== */

.case-study-layout,
.case-study{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.case-study-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.case-study-gallery img,
.case-study-gallery .gallery-img{
  border-radius:var(--radius);
  aspect-ratio:4/3;
  object-fit:cover;
  box-shadow:var(--shadow-sm);
}

.gallery-img{ overflow:hidden; }
.gallery-img img{ width:100%; height:100%; object-fit:cover; }

.tick-list{ display:grid; gap:12px; margin:22px 0; }

.tick-list li{
  padding-left:30px;
  position:relative;
  color:var(--text-light);
  font-weight:500;
}

.tick-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--accent);
  color:var(--white);
  font-size:.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.quote{
  background:var(--white);
  border-left:5px solid var(--accent);
  border-radius:var(--radius);
  padding:38px 40px;
  box-shadow:var(--shadow-sm);
  font-family:var(--font-head);
  font-style:italic;
  font-size:1.25rem;
  color:var(--primary);
}

.quote cite{
  display:block;
  margin-top:16px;
  font-family:var(--font-body);
  font-style:normal;
  font-weight:700;
  font-size:.85rem;
  color:var(--text-light);
  letter-spacing:.03em;
}

/* ===========================================================
   RECOGNITION / CERTIFICATES
=========================================================== */

.recognition-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}

.recognition-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px 26px;
  text-align:center;
  box-shadow:var(--shadow-sm);
}

.recognition-card .feature-icon{ margin:0 auto 18px; }

.certificate-gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:44px;
}

.certificate-card{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  background:var(--white);
}

.certificate-card img{ aspect-ratio:4/3; object-fit:cover; width:100%; }

.certificate-card figcaption{
  padding:14px 16px;
  font-size:.86rem;
  font-weight:600;
  color:var(--primary);
}

/* ===========================================================
   DOWNLOADS / REPORT CARDS
=========================================================== */

.downloads-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}

.download-card{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:22px;
  align-items:center;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition);
}

.download-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }

.download-thumb{
  border-radius:var(--radius-sm);
  overflow:hidden;
  aspect-ratio:3/4;
  box-shadow:var(--shadow-sm);
}

.download-thumb img{ width:100%; height:100%; object-fit:cover; }

.download-card h3{ margin-bottom:6px; font-size:1.1rem; }

.download-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:var(--primary);
  margin-top:8px;
  font-size:.92rem;
}

/* ===========================================================
   TABLE
=========================================================== */

.table-wrap{ overflow-x:auto; margin-top:36px; }

table{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  min-width:560px;
}

thead{ background:var(--primary); color:var(--white); }

th{ padding:18px 22px; text-align:left; font-size:.92rem; font-weight:700; }

td{ padding:18px 22px; border-bottom:1px solid var(--border); color:var(--text-light); vertical-align:top; }

tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--bg); }

/* ===========================================================
   FORMS
=========================================================== */

form{ margin-top:8px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.form-group{ display:flex; flex-direction:column; gap:8px; }
.form-group.full-width{ grid-column:1 / -1; }

label{ font-weight:700; font-size:.92rem; color:var(--primary); }

input,textarea,select{
  width:100%;
  padding:16px 18px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:1rem;
  background:var(--white);
  color:var(--text);
  transition:border-color var(--transition), box-shadow var(--transition);
}

input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-tint);
}

textarea{ min-height:170px; resize:vertical; }

.form-help{ font-size:.82rem; color:var(--text-light); }

.form-status{
  margin-top:22px;
  padding:16px 20px;
  border-radius:var(--radius-sm);
  background:var(--primary-tint);
  color:var(--primary);
  font-weight:600;
  display:none;
}

.form-status.visible{ display:block; }

.form-help a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.form-help a:hover,
.form-help a:focus {
  color: #911537;
}


/* ===========================================================
   CALLOUT / CTA
=========================================================== */

.callout-box,
.final-cta{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:var(--white);
  text-align:center;
  border-radius:var(--radius-lg);
  padding:70px 50px;
}

.callout-box h2,.final-cta h2{ color:var(--white); }
.callout-box p,.final-cta p{ color:rgba(255,255,255,.9); max-width:640px; margin-left:auto; margin-right:auto; }
.callout-box .button-group,.final-cta .button-group{ justify-content:center; margin-top:30px; }

/* ===========================================================
   FOOTER
=========================================================== */

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5{
  font-family:var(--font-body);
}

.site-footer{
  background:#33101c;
  color:#EFDFE4;
  padding:80px 0 0;
  margin-top:0;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:50px;
}

.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer-brand img{ height:38px; width:38px; }
.footer-brand span{ font-family:var(--font-body); color:var(--white); font-weight:800; font-size:1.05rem; }

.site-footer h4{ color:var(--white); margin-bottom:20px; font-size:1rem; }
.site-footer p{ color:#D9BFC7; }
.site-footer li{ margin-bottom:12px; }
.site-footer a{ color:#EFDFE4; transition:color var(--transition); }
.site-footer a:hover{ color:var(--accent-light); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:26px 0;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:.88rem;
  color:#C9A9B2;
}

/* ===========================================================
   BACK TO TOP
=========================================================== */

.back-top{
  position:fixed;
  right:26px;
  bottom:26px;
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:var(--primary);
  color:var(--white);
  font-size:20px;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--transition), visibility var(--transition), transform var(--transition), background var(--transition);
  box-shadow:var(--shadow-md);
  z-index:900;
}

.back-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-top:hover{ background:var(--secondary); }

/* ===========================================================
   ANIMATIONS
=========================================================== */

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

[data-animate]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}

[data-animate].in-view{ opacity:1; transform:none; }

/* ===========================================================
   UTILITIES
=========================================================== */

.mt-2{ margin-top:20px; } .mt-3{ margin-top:32px; } .mt-4{ margin-top:44px; } .mt-6{ margin-top:64px; }
.mb-2{ margin-bottom:20px; } .mb-3{ margin-bottom:32px; } .mb-4{ margin-bottom:44px; } .mb-6{ margin-bottom:64px; }
.divider{ height:1px; background:var(--border); margin:70px 0; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.centre-button{ display:flex; justify-content:center; margin-top:44px; }

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media (max-width:1080px){

  .hero-grid,
  .split,
  .case-study-layout,
  .case-study{
    grid-template-columns:1fr;
    gap:44px;
  }

  .hero-media{ order:-1; aspect-ratio:16/10; }

  .category-grid,
  .programme-grid,
  .grid-3,
  .steps-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .grid-4,
  .stats,
  .recognition-grid,
  .certificate-gallery{
    grid-template-columns:repeat(2,1fr);
  }

  .footer-grid{ grid-template-columns:repeat(2,1fr); }

  .downloads-grid{ grid-template-columns:1fr; }
}

@media (max-width:760px){

  section{ padding:72px 0; }
  .section-tight{ padding:52px 0; }

  .category-grid,
  .programme-grid,
  .grid-2,.grid-3,.grid-4,
  .steps-grid,
  .stats,
  .recognition-grid,
  .certificate-gallery,
  .case-study-gallery,
  .form-grid{
    grid-template-columns:1fr;
  }

  .hero{ padding:70px 0 80px; }
  .hero-stats{ gap:24px; }

  .footer-grid{ grid-template-columns:1fr; gap:36px; }

  .button-group{ flex-direction:column; align-items:stretch; }
  .button-group .btn{ width:100%; }

  table{ min-width:520px; }

  .download-card{ grid-template-columns:90px 1fr; }
}

/* ===========================================================
   DARK MODE
=========================================================== */

html.dark-mode body{
  background:var(--dark-bg);
  color:var(--dark-text);
}

html.dark-mode p{
  color:var(--dark-text-light);
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5{
  color:var(--accent-light);
}

/* Sections and backgrounds */

html.dark-mode .bg-tint{
  background:var(--dark-primary-tint);
}

html.dark-mode .bg-white{
  background:var(--dark-bg);
}

/* Header */

html.dark-mode .site-header{
  background:rgba(23,17,20,.96);
  border-bottom-color:var(--dark-border);
}

html.dark-mode .logo{
  color:var(--accent-light);
}

html.dark-mode .main-nav > ul > li > a{
  color:var(--dark-text);
}

html.dark-mode .main-nav > ul > li > a:hover,
html.dark-mode .main-nav > ul > li > a.active{
  background:var(--dark-primary-tint);
  color:var(--accent-light);
}

/* Dropdowns */

html.dark-mode .dropdown-menu{
  background:var(--dark-surface);
  border-color:var(--dark-border);
}

html.dark-mode .dropdown-menu li a{
  color:var(--dark-text);
}

html.dark-mode .dropdown-menu li a:hover{
  background:var(--dark-primary-tint);
  color:var(--accent-light);
}

html.dark-mode .dropdown-divider{
  background:var(--dark-border);
}

/* Mobile menu */

html.dark-mode .mobile-menu{
  background:var(--dark-bg);
}

html.dark-mode .mobile-menu > ul > li > a,
html.dark-mode .mobile-dropdown-toggle{
  color:var(--dark-text);
  border-bottom-color:var(--dark-border);
}

html.dark-mode .mobile-dropdown li a{
  color:var(--dark-text-light);
}

/* Hero */

html.dark-mode .hero{
  background:
    radial-gradient(circle at 85% 0%, var(--dark-accent-tint), transparent 55%),
    linear-gradient(180deg, var(--dark-primary-tint), var(--dark-bg) 70%);
}

html.dark-mode .page-hero{
  background:linear-gradient(
    180deg,
    var(--dark-primary-tint),
    var(--dark-bg) 75%
  );
}

html.dark-mode .hero-stat strong{
  color:var(--accent-light);
}

html.dark-mode .hero-stat span{
  color:var(--dark-text-light);
}

html.dark-mode .hero-media-badge{
  background:rgba(36,25,29,.95);
}

html.dark-mode .hero-media-badge strong{
  color:var(--accent-light);
}

html.dark-mode .hero-media-badge span{
  color:var(--dark-text-light);
}

/* Cards */

html.dark-mode .card,
html.dark-mode .feature-card,
html.dark-mode .category-card,
html.dark-mode .programme-card,
html.dark-mode .stat,
html.dark-mode .step-card,
html.dark-mode .accordion-item,
html.dark-mode .resource,
html.dark-mode .resource-download,
html.dark-mode .programme-resource-card,
html.dark-mode .recognition-card,
html.dark-mode .certificate-card,
html.dark-mode .download-card,
html.dark-mode .competition-card,
html.dark-mode .eval-form-section{
  background:var(--dark-surface);
  border-color:var(--dark-border);
}

html.dark-mode .category-card ul li,
html.dark-mode .tick-list li,
html.dark-mode .stat span,
html.dark-mode .programme-body p{
  color:var(--dark-text-light);
}

/* Icons and tints */

html.dark-mode .feature-icon,
html.dark-mode .resource .resource-icon,
html.dark-mode .resource-download .resource-icon{
  background:var(--dark-primary-tint);
  color:var(--accent-light);
}

/* Links */

html.dark-mode .card-link,
html.dark-mode .download-link{
  color:var(--accent-light);
}

/* Tabs */

html.dark-mode .tab-button{
  background:var(--dark-surface);
  border-color:var(--dark-border);
  color:var(--dark-text);
}

html.dark-mode .tab-button:hover{
  border-color:var(--accent);
}

html.dark-mode .tab-button.active{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--white);
}

/* Accordions */

html.dark-mode .accordion-trigger{
  color:var(--accent-light);
}

html.dark-mode .accordion-trigger:hover{
  background:var(--dark-primary-tint);
}

html.dark-mode .accordion-trigger .plus{
  background:var(--dark-primary-tint);
  color:var(--accent-light);
}

/* Pathway navigation */

html.dark-mode .pathway-nav-item{
  background:var(--dark-surface);
  border-color:var(--dark-border);
  color:var(--dark-text);
}

html.dark-mode .pathway-nav-item.active{
  background:var(--dark-primary-tint);
  border-color:var(--primary);
}

html.dark-mode .pathway-nav-item p{
  color:var(--dark-text-light);
}

html.dark-mode .pathway-nav-item .pathway-tag{
  color:var(--accent-light);
}

/* Module pills */

html.dark-mode .module-pill{
  background:var(--dark-surface);
  border-color:var(--dark-border);
  color:var(--dark-text);
}

html.dark-mode .module-pill:hover{
  border-color:var(--accent);
}

html.dark-mode .module-pill.active{
  background:var(--secondary);
  border-color:var(--secondary);
  color:var(--white);
}

/* Forms */

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select{
  background:var(--dark-surface-2);
  color:var(--dark-text);
  border-color:var(--dark-border);
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder{
  color:#BBAAB0;
}

html.dark-mode label{
  color:var(--accent-light);
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus{
  border-color:var(--accent-light);
  box-shadow:0 0 0 4px var(--dark-accent-tint);
}

html.dark-mode .form-help{
  color:var(--dark-text-light);
}

html.dark-mode .form-status{
  background:var(--dark-primary-tint);
  color:var(--accent-light);
}

/* Tables */

html.dark-mode table{
  background:var(--dark-surface);
}

html.dark-mode td{
  border-bottom-color:var(--dark-border);
  color:var(--dark-text-light);
}

html.dark-mode tbody tr:hover{
  background:var(--dark-surface-2);
}

/* Resources */

html.dark-mode .slide-embed-wrap,
html.dark-mode .pdf-modal-body{
  background:var(--dark-bg);
  border-color:var(--dark-border);
}

html.dark-mode .pdf-modal{
  background:var(--dark-surface);
}

html.dark-mode .pdf-modal-header,
html.dark-mode .pdf-modal-footer{
  border-color:var(--dark-border);
  background:var(--dark-surface);
}

html.dark-mode .pdf-modal-close{
  background:var(--dark-surface-2);
  border-color:var(--dark-border);
  color:var(--dark-text);
}

/* Quotes */

html.dark-mode .quote{
  background:var(--dark-surface);
  color:var(--accent-light);
}

/* Footer remains dark */
html.dark-mode .site-footer{
  background:#10090c;
}

/* ===========================================================
   DARK MODE TOGGLE
=========================================================== */

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.theme-toggle{
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--primary);
  border-radius:50%;
  background:var(--white);
  color:var(--primary);
  font-family:var(--font-body);
  font-size:1.15rem;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.theme-toggle:hover{
  background:var(--primary);
  color:var(--white);
  transform:translateY(-2px);
}

html.dark-mode .theme-toggle{
  background:var(--dark-surface);
  border-color:var(--accent-light);
  color:var(--accent-light);
}

html.dark-mode .theme-toggle:hover{
  background:var(--accent-light);
  color:#24191d;
}

.theme-toggle-icon{
  font-size:1.15rem;
  line-height:1;
}

@media (max-width:1080px){

  .header-actions{
    gap:10px;
  }

  .theme-toggle{
    width:44px;
    height:44px;
    min-width:44px;
  }

}

/* ===========================================================
   PRINT
=========================================================== */

@media print{
  .site-header,.mobile-menu,.back-top,.hero .btn,.button-group{ display:none !important; }
  body{ background:#fff; }
  section{ padding:20px 0; }
}

/* ===========================================================
   END OF STYLESHEET
=========================================================== */

/* ===========================================================
   NSIB REBUILD ADDITIONS — pathway architecture, module pills,
   resource visibility, evaluation forms, competitions.
   Appended to existing styles.css. Reuses existing variables,
   cards, buttons, tabs and form styles wherever possible.
=========================================================== */

/* ---------- Pathway overview (Lite / Standard / Embedded) ---------- */

.pathway-nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.pathway-nav-item{
  flex:1;
  min-width:220px;
  background:var(--white);
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:22px 24px;
  cursor:pointer;
  text-align:left;
  transition:var(--transition);
}

.pathway-nav-item:hover{ border-color:var(--accent); transform:translateY(-3px); }

.pathway-nav-item.active{
  border-color:var(--primary);
  background:var(--primary-tint);
  box-shadow:var(--shadow-sm);
}

.pathway-nav-item .pathway-tag{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--secondary);
  margin-bottom:6px;
}

.pathway-nav-item h3{ margin-bottom:6px; font-size:1.15rem; }
.pathway-nav-item p{ font-size:.88rem; margin-bottom:0; }

.pathway-panel{ display:none; margin-top:36px; }
.pathway-panel.active{ display:block; animation:fadeUp .4s ease; }

.pathway-eval-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent-tint);
  color:var(--secondary);
  font-size:.82rem;
  font-weight:700;
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:24px;
}

/* ---------- Module pill selector (Standard A–C / Embedded A–F) ---------- */

.module-selector{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:28px 0 30px;
}

.module-pill{
  padding:10px 22px;
  border-radius:999px;
  background:var(--white);
  border:2px solid var(--border);
  cursor:pointer;
  font-weight:700;
  font-size:.9rem;
  color:var(--text);
  transition:var(--transition);
}

.module-pill:hover{ border-color:var(--accent); }

.module-pill.active{
  background:var(--secondary);
  color:var(--white);
  border-color:var(--secondary);
}

.module-panel{ display:none; }
.module-panel.active{ display:block; animation:fadeUp .35s ease; }

.module-panel-heading{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.module-panel-heading h3{ margin-bottom:0; }

.module-panel-heading span{
  font-size:.82rem;
  color:var(--text-light);
  font-weight:600;
}

/* ---------- Embedded presentation (Google Slides) ---------- */

.slide-embed-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  background:var(--bg);
  margin-bottom:20px;
}

.slide-embed-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Shown only when a slide destination is genuinely missing AND an
   author has intentionally rendered a dev-only marker; end users
   never see this because resource.js will not render the wrapper
   at all when a resource is disabled. Kept for local dev only. */
.slide-embed-devnote{
  padding:16px;
  font-size:.85rem;
  color:var(--text-light);
}

/* ---------- Resource list additions (module worksheets, downloads) ---------- */

.resource-download{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:16px 20px;
  box-shadow:var(--shadow-sm);
  margin-bottom:12px;
}

.resource-download .resource-name{
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:600;
}

.resource-download .resource-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  background:var(--primary-tint);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* Container that a resource-visibility script hides entirely when disabled */
[data-resource]{ }
[data-resource][hidden]{ display:none !important; }

.resources-empty-note{
  font-size:.86rem;
  color:var(--text-light);
  font-style:italic;
}

/* ---------- Programme-level resource grid (Pilot Overview, Rubric, Certificate) ---------- */

.programme-resources-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:24px;
}

.programme-resource-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 22px;
  box-shadow:var(--shadow-sm);
  text-align:center;
}

.programme-resource-card .feature-icon{ margin:0 auto 14px; }
.programme-resource-card h4{ margin-bottom:8px; font-size:1rem; }
.programme-resource-card .btn{ margin-top:10px; }

/* ---------- Unavailable resource state (no invented/broken links) ---------- */

.resource-download[data-resource="false"] a,
.programme-resource-card[data-resource="false"] a{ display:none; }

.resource-download[data-resource="false"]::after,
.programme-resource-card[data-resource="false"]::after{
  content:"Not yet available";
  display:block;
  font-size:.82rem;
  font-style:italic;
  color:var(--text-light);
}

.programme-resource-card[data-resource="false"]::after{ margin-top:10px; }

.slide-embed-wrap[data-resource="false"] iframe{ display:none; }

.slide-embed-wrap[data-resource="false"]::before{
  content:"These slides are not yet available.";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  font-size:.9rem;
  color:var(--text-light);
  font-style:italic;
}

/* ---------- Slide network-filtering fallback note ---------- */

.slide-fallback-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  font-size:.82rem;
  color:var(--text-light);
  margin:-8px 0 20px;
}

.slide-fallback-note a{
  color:var(--primary);
  font-weight:600;
  text-decoration:underline;
}

/* ---------- PDF preview modal (shared, injected once per page) ---------- */

.pdf-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(34,34,34,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:3000;
}

.pdf-modal-overlay[hidden]{ display:none; }

.pdf-modal{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  width:100%;
  max-width:900px;
  height:min(85vh,900px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:fadeUp .25s ease;
}

.pdf-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}

.pdf-modal-header h3{
  font-size:1rem;
  margin:0;
}

.pdf-modal-close{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  width:36px;
  height:36px;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
}

.pdf-modal-close:hover{ border-color:var(--accent); color:var(--primary); }

.pdf-modal-body{ flex:1; position:relative; background:var(--bg); }

.pdf-modal-body iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.pdf-modal-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
  padding:14px 20px;
  border-top:1px solid var(--border);
  background:var(--white);
}

.pdf-modal-footer p{
  font-size:.8rem;
  color:var(--text-light);
  margin:0;
}

@media (max-width:600px){
  .pdf-modal{ height:92vh; }
  .pdf-modal-overlay{ padding:8px; }
}

/* ---------- Evaluation forms (shared + tutor-group) ---------- */

.eval-form-section{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:34px 32px;
  box-shadow:var(--shadow-sm);
  margin-bottom:26px;
}

.eval-form-section h3{
  font-size:1.15rem;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:2px solid var(--primary-tint);
}

.eval-question{ margin-bottom:24px; }
.eval-question:last-child{ margin-bottom:0; }

.eval-question > label,
.eval-question > .eval-question-label{
  display:block;
  font-weight:700;
  font-size:.92rem;
  color:var(--primary);
  margin-bottom:10px;
}

.eval-scale{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.eval-scale label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  font-size:.86rem;
  color:var(--text);
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:999px;
  padding:9px 16px;
  cursor:pointer;
  transition:var(--transition);
}

.eval-scale input{ width:auto; padding:0; accent-color:var(--primary); }

.eval-scale label:has(input:checked){
  background:var(--primary);
  border-color:var(--primary);
  color:var(--white);
}

.eval-radio-group,
.eval-checkbox-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.eval-radio-group label,
.eval-checkbox-group label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  font-size:.9rem;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:11px 16px;
  cursor:pointer;
  transition:var(--transition);
}

.eval-radio-group input,
.eval-checkbox-group input{ width:auto; padding:0; accent-color:var(--primary); }

.eval-radio-group label:has(input:checked),
.eval-checkbox-group label:has(input:checked){
  background:var(--primary-tint);
  border-color:var(--primary);
  color:var(--primary);
}

.eval-delivery-toggle{
  display:flex;
  gap:14px;
  margin-bottom:30px;
  flex-wrap:wrap;
}

.eval-delivery-toggle label{
  flex:1;
  min-width:220px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--bg);
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  padding:16px 18px;
  cursor:pointer;
  transition:var(--transition);
}

.eval-delivery-toggle label:has(input:checked){
  background:var(--primary-tint);
  border-color:var(--primary);
}

.eval-delivery-toggle input{ accent-color:var(--primary); }
.eval-delivery-toggle strong{ font-size:.95rem; color:var(--primary); }
.eval-delivery-toggle span{ font-size:.78rem; color:var(--text-light); }

/* ---------- Competitions page ---------- */

.competition-group-heading{
  margin:56px 0 28px;
}

.competition-group-heading:first-of-type{ margin-top:0; }

.competition-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}

.competition-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px 28px;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.competition-card h3{ font-size:1.2rem; margin-bottom:4px; }

.competition-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:4px;
}

.competition-meta span{
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.03em;
  background:var(--accent-tint);
  color:var(--secondary);
  padding:5px 12px;
  border-radius:999px;
}

.competition-qa{ display:grid; gap:10px; margin-top:4px; }

.competition-qa dt{
  font-size:.78rem;
  font-weight:700;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.competition-qa dd{
  font-size:.92rem;
  color:var(--text-light);
  margin:2px 0 0;
}

.competition-resources{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.competition-usage{
  margin-top:auto;
  padding-top:16px;
}

.competition-usage-toggle{
  font-size:.84rem;
  font-weight:700;
  color:var(--primary);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.competition-usage-form{
  display:none;
  margin-top:14px;
  gap:12px;
  flex-direction:column;
}

.competition-usage-form.open{ display:flex; }

.competition-usage-form label{
  font-size:.8rem;
  font-weight:700;
  color:var(--primary);
}

.competition-usage-form input,
.competition-usage-form select{
  padding:10px 12px;
  font-size:.9rem;
}

/* ---------- Responsive ---------- */

@media (max-width:1080px){
  .programme-resources-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  .pathway-nav{ flex-direction:column; }
  .programme-resources-grid{ grid-template-columns:1fr; }
  .eval-form-section{ padding:26px 20px; }
  .eval-delivery-toggle{ flex-direction:column; }
}