:root{--maroon:#690014;--red:#981b2f;--coral:#c51f3a;--gold:#d6a84b;--ink:#28171a;--muted:#735f63;--paper:#fff7f8;--line:#eadcdf;--white:#fff;--soft:#faedef;--navy:#43000c;--shadow:0 18px 42px rgba(80,0,18,.1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font:16px/1.7 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}.shell{width:min(1160px,calc(100% - 40px));margin:auto}.topbar{background:var(--navy);color:#f4dde1;font-size:12px}.topbar .shell{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar-links{display:flex;gap:20px}.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav-wrap{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand img{display:block;width:205px;height:auto}.nav{display:flex;align-items:center;gap:22px;font-size:13px;font-weight:800}.nav a{padding:8px 0}.nav a:hover,.nav a.active{color:var(--coral)}.nav-cta{background:var(--gold);color:var(--navy)!important;padding:10px 15px!important;border-radius:7px}.menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--maroon)}h1,h2,h3{line-height:1.12;letter-spacing:-.035em;margin:0 0 18px;color:var(--maroon)}h1{font-size:clamp(42px,6vw,72px)}h2{font-size:clamp(34px,4vw,52px)}h3{font-size:22px}p{margin:0 0 18px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:var(--coral)}.hero{color:#fff;background:radial-gradient(circle at 82% 25%,#e64a604d 0,transparent 30%),linear-gradient(120deg,#58000f,#8f172b 58%,#b51d37)}.hero-grid{min-height:550px;padding:86px 0;display:grid;grid-template-columns:1.14fr .86fr;align-items:center;gap:80px}.hero h1{color:#fff;max-width:720px}.hero p{color:#f7dfe3;font-size:18px;max-width:650px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px;padding:12px 18px;font-weight:850;font-size:13px;transition:.18s}.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--gold);color:var(--navy)}.btn-outline{border-color:#ffffff66;color:#fff;background:#ffffff0d}.trust{display:flex;flex-wrap:wrap;gap:20px;color:#ffecef;font-size:13px}.hero-card{padding:27px;border:1px solid #ffffff3d;border-radius:18px;background:#ffffff12;box-shadow:0 25px 60px #30000966;backdrop-filter:blur(10px)}.hero-card h2{color:#fff;margin-top:8px;font-size:22px}.step{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid #ffffff24}.step:last-child{border-bottom:0}.step b{display:block;color:var(--gold);font-size:12px}.step strong{display:block}.step small{color:#f1cfd5}.section{padding:92px 0}.section-soft{background:var(--paper)}.lead{font-size:18px;color:var(--muted);max-width:760px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:38px}.section-head>div{max-width:740px}.section-head>p{max-width:400px;color:var(--muted);margin:0}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.card{border:1px solid var(--line);border-radius:13px;padding:25px;background:#fff}.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);transition:.2s}.card .tag{color:var(--coral);font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.card h3{margin-top:11px;font-size:22px}.card p{color:var(--muted);font-size:14px}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.metric{padding:25px 28px;border-right:1px solid var(--line)}.metric:first-child{padding-left:0}.metric:last-child{border-right:0}.metric b{display:block;color:var(--maroon);font-size:18px}.metric span{color:var(--muted);font-size:13px}.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.value{padding:20px;background:var(--paper);border-top:3px solid var(--gold)}.value h3{font-size:17px;margin-top:12px}.value p{font-size:13px;color:var(--muted);margin:0}.quote{background:#f1d9dd;padding:72px 0}.quote blockquote{margin:0;max-width:900px;font:clamp(27px,4vw,45px)/1.25 Georgia,serif;color:var(--maroon)}.quote cite{display:block;margin-top:23px;font-style:normal;font-weight:850;color:var(--maroon)}.programme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}.programme-card{display:flex;flex-direction:column;min-height:285px}.programme-card .provider{font-size:13px;font-weight:850;color:var(--maroon)}.programme-card a{margin-top:auto;color:var(--red);font-size:13px;font-weight:850}.filter-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}.filter{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 14px;font-weight:800;font-size:12px;color:var(--muted);cursor:pointer}.filter.active,.filter:hover{background:var(--maroon);border-color:var(--maroon);color:#fff}.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.partner{min-height:100px;display:flex;align-items:center;justify-content:center;text-align:center;padding:17px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-weight:850;color:var(--red);font-size:14px}.contact{background:var(--maroon);color:#fff}.contact h2{color:#fff}.contact .lead{color:#f3dce0}.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start}.contact-list{display:grid;gap:15px;margin-top:28px}.contact-list a,.contact-list span{display:flex;gap:11px;color:#fcecef}.contact-list b{color:var(--gold);min-width:85px}.form-card{background:#fff;color:var(--ink);padding:30px;border-radius:14px}.form-card h3{font-size:25px}.form-card label{display:block;font-size:12px;font-weight:850;color:var(--maroon);margin:14px 0 5px}.form-card input,.form-card select,.form-card textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:11px 12px;font:inherit;background:#fff}.form-card textarea{min-height:115px;resize:vertical}.form-card .btn{width:100%;border:0;margin-top:16px;cursor:pointer}.page-hero{padding:72px 0 60px;background:var(--paper);border-bottom:1px solid var(--line)}.page-hero p{max-width:700px;color:var(--muted);font-size:18px}.breadcrumbs{font-size:12px;color:var(--muted);margin-bottom:24px}.breadcrumbs a{color:var(--red)}.footer{background:#43000c;color:#f0d9dd;padding:48px 0 18px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr .7fr;gap:45px}.footer-logo{display:inline-block;background:#fff;border-radius:7px;padding:9px 12px}.footer-logo img{display:block;width:205px}.footer p{font-size:13px}.footer h2{color:var(--gold);font-size:14px;letter-spacing:.02em;margin:0 0 14px}.footer-links{display:grid;gap:5px;font-size:13px}.copyright{border-top:1px solid #ffffff22;margin-top:35px;padding-top:16px;color:#c49da5;font-size:11px}@media(max-width:850px){.nav{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:15px 20px;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.menu-toggle{display:block}.hero-grid,.split,.contact-grid{grid-template-columns:1fr;gap:42px}.grid-3{grid-template-columns:1fr 1fr}.partner-grid{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:580px){.shell{width:calc(100% - 28px)}.topbar .shell{justify-content:center}.topbar .topbar-note{display:none}.topbar-links{font-size:11px;gap:11px}.brand img{width:185px}.hero-grid{padding:65px 0}.section{padding:70px 0}.grid-3,.programme-grid,.values{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}.metric,.metric:first-child{padding:17px 0;border-right:0;border-bottom:1px solid var(--line)}.metric:last-child{border-bottom:0}.section-head{display:block}.section-head>p{margin-top:12px}.partner-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}.actions{flex-direction:column;align-items:stretch}.btn{text-align:center}.page-hero{padding:55px 0 45px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* print-friendly for cPanel handoff */
@media print{.topbar,.site-header,.actions,.footer{display:none}.section{padding:25px 0}.hero{color:#000;background:#fff}.hero h1,.hero p{color:#000}}

body{opacity:0;animation:pageIn .25s ease-out forwards}@keyframes pageIn{to{opacity:1}}

/* ============================================================
   KLTVET — interactive site additions
   Everything above this line is the original mockup stylesheet.
   ============================================================ */

/* Accessibility: skip link + visible keyboard focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:99;background:var(--gold);color:var(--navy);padding:10px 16px;border-radius:0 0 8px 0;font-weight:850;font-size:13px}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.nav a[aria-current="page"]{color:var(--coral)}
.nav-cta[aria-current="page"]{color:var(--navy)!important}

/* Programme filter bar */
.filter[aria-pressed="true"]{background:var(--maroon);border-color:var(--maroon);color:#fff}
.filter-count{font-size:13px;color:var(--muted);margin:0 0 22px}
.no-results{display:none;grid-column:1/-1;padding:34px;border:1px dashed var(--line);border-radius:12px;background:var(--paper);text-align:center;color:var(--muted);font-size:14px}
.no-results.show{display:block}

/* Contact page small print */
.form-note{font-size:12px;color:var(--muted);margin:18px 0 0}

/* Contact page extras */
.contact-list a:hover{color:var(--gold)}
.map-frame{margin-top:26px;border:1px solid #ffffff33;border-radius:12px;overflow:hidden;background:#ffffff12}
.map-frame iframe{display:block;width:100%;height:260px;border:0}

/* 404 page */
.error-page{padding:110px 0;text-align:center}
.error-page .code{font-size:64px;font-weight:900;color:var(--gold);letter-spacing:-.04em}
.error-page .actions{justify-content:center}

/* ------------------------------------------------------------
   News cards with photographs
   ------------------------------------------------------------ */
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.news-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.news-image{display:block;width:100%;height:250px;object-fit:cover;object-position:center;background:var(--soft);border-bottom:1px solid var(--line)}
.news-image-poster{object-position:center 22%}
.news-card.logo-missing .news-image{display:none}
.news-body{display:flex;flex-direction:column;flex:1;padding:26px}
.news-body h3{margin-top:11px;font-size:21px}
.news-body p{color:var(--muted);font-size:14px}
.news-card a{margin-top:auto;color:var(--red);font-size:13px;font-weight:850}
@media(max-width:850px){.news-image{height:215px}}
@media(max-width:580px){.news-grid{grid-template-columns:1fr}.news-image{height:200px}.news-body{padding:20px}}

/* ------------------------------------------------------------
   Logo sizing
   The artwork is 580 x 176 px (trimmed, 2x for sharp retina
   rendering). Always pair a width with height:auto, otherwise the
   img width/height attributes stretch it out of proportion.
   ------------------------------------------------------------ */
img{max-width:100%}
.brand img{display:block;width:215px;height:auto;aspect-ratio:580/176}
.footer-logo{padding:10px 14px}
.footer-logo img{display:block;width:205px;height:auto;aspect-ratio:580/176}
@media(max-width:850px){.brand img{width:190px}}
@media(max-width:580px){.brand img{width:168px}.footer-logo img{width:185px}}

/* ------------------------------------------------------------
   Programme cards with course images
   ------------------------------------------------------------ */
.programme-head{display:flex;align-items:flex-start;gap:16px;margin:11px 0 14px}
.programme-thumb{flex:0 0 96px;width:96px;height:96px;object-fit:cover;border-radius:11px;border:1px solid var(--line);background:var(--soft)}
.programme-head h3{margin:0 0 6px;font-size:20px}
.programme-head .provider{margin:0}
.programme-card.logo-missing .programme-thumb{display:none}
@media(max-width:580px){.programme-head{gap:13px}.programme-thumb{flex-basis:74px;width:74px;height:74px}.programme-head h3{font-size:18px}}

/* ------------------------------------------------------------
   Contact page — email card (replaces the old enquiry form)
   ------------------------------------------------------------ */
.enquiry-card .btn{width:100%;margin:4px 0 0;font-size:15px;padding:14px 16px;word-break:break-word}
.enquiry-card h4{color:var(--maroon);font-size:13px;font-weight:900;margin:24px 0 9px}
.enquiry-checklist{margin:0;padding-left:19px;color:var(--muted);font-size:14px}
.enquiry-checklist li{margin-bottom:6px}
.enquiry-programme{margin:14px 0 0;font-size:13px;font-weight:850;color:var(--maroon)}
.enquiry-programme[hidden]{display:none}

/* ------------------------------------------------------------
   Partner logos — final sizing rules
   Both dimensions stay "auto" and are limited only by maxima, so
   the browser always scales each file proportionally. site.js
   varies max-height per logo (never width and height together),
   which makes distortion impossible whatever shape the file is.
   ------------------------------------------------------------ */
.partner{display:grid;grid-template-rows:88px auto;align-content:center;justify-items:center;gap:14px;min-height:194px;padding:24px 16px;text-align:center;line-height:1.35}
.partner-logo{width:auto;height:auto;max-width:100%;max-height:88px;object-fit:contain;align-self:center}
.partner.logo-missing{grid-template-rows:auto}
.partner.logo-missing .partner-logo{display:none}
@media(max-width:850px){.partner{min-height:184px}}
@media(max-width:580px){
  .partner{grid-template-rows:66px auto;min-height:162px;padding:18px 12px;gap:11px;font-size:13px}
  .partner-logo{max-height:66px}
}

/* ------------------------------------------------------------
   Navigation now carries six links, so tighten the spacing on
   mid-size screens before the mobile menu takes over at 850px.
   ------------------------------------------------------------ */
@media(max-width:1120px) and (min-width:981px){
  .nav{gap:15px;font-size:12px}
  .nav-cta{padding:9px 12px!important}
  .brand img{width:172px}
}

/* Seven links no longer fit on a narrow laptop, so the mobile menu now
   takes over at 980px rather than 850px. */
@media(max-width:980px){
  .nav{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:15px 20px;flex-direction:column;align-items:flex-start;gap:4px}
  .nav.open{display:flex}
  .nav a{padding:10px 0;font-size:14px}
  .menu-toggle{display:block}
}

/* ------------------------------------------------------------
   Application process — numbered steps
   ------------------------------------------------------------ */
.hero-card-link{display:inline-block;margin-top:18px;color:var(--gold);font-weight:850;font-size:13px}
.hero-card-link:hover{text-decoration:underline}
.process-list{list-style:none;counter-reset:none;margin:0;padding:0;display:grid;gap:14px;max-width:900px}
.process-step{display:grid;grid-template-columns:74px 1fr;align-items:stretch;border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden;transition:box-shadow .18s}
.process-step:hover{box-shadow:var(--shadow)}
.process-number{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--maroon),var(--coral));color:#fff;font-size:30px;font-weight:900;letter-spacing:-.04em}
.process-body{padding:22px 24px}
.process-body h3{font-size:20px;margin:0 0 10px;letter-spacing:-.02em}
.process-body ul{margin:0;padding-left:19px;color:var(--muted);font-size:14px}
.process-body li{margin-bottom:5px}
.process-body li:last-child{margin-bottom:0}
.process-badge{display:inline-block;vertical-align:middle;margin-left:8px;padding:4px 9px;border-radius:99px;background:var(--soft);color:var(--red);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:580px){
  .process-step{grid-template-columns:54px 1fr}
  .process-number{font-size:23px}
  .process-body{padding:18px}
  .process-body h3{font-size:17px}
  .process-badge{display:block;margin:8px 0 0}
}

/* ------------------------------------------------------------
   Media page — poster, Google Photos albums, YouTube videos
   ------------------------------------------------------------ */
.media-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.media-poster{width:100%;max-width:360px;height:auto;border-radius:14px;box-shadow:var(--shadow);justify-self:end}
.poster-details{display:grid;gap:4px;margin-top:26px;padding:18px 20px;border-left:3px solid var(--gold);background:#fff;border-radius:0 10px 10px 0}
.poster-details b{color:var(--maroon);font-size:15px}
.poster-details span{color:var(--muted);font-size:13px}

.album-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.album-card{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:.18s}
.album-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#e3c9cf}
.album-icon{flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:var(--soft);color:var(--red);font-size:20px}
.album-text b{display:block;color:var(--maroon);font-size:16px}
.album-text small{color:var(--muted);font-size:12px}

.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.video-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;transition:.18s}
.video-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.video-thumb{position:relative;display:block;background:var(--soft)}
.video-thumb img{display:block;width:100%;height:158px;object-fit:cover}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#981b2fe6;color:#fff;font-size:16px;padding-left:3px}
.video-text{padding:17px 19px}
.video-text b{display:block;color:var(--maroon);font-size:15px;line-height:1.3}
.video-text small{color:var(--muted);font-size:12px}

@media(max-width:850px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){
  .media-hero{grid-template-columns:1fr;gap:32px}
  .media-poster{max-width:320px;justify-self:start}
  .album-grid,.video-grid{grid-template-columns:1fr}
  .video-thumb img{height:190px}
}

/* ------------------------------------------------------------
   RPEL page — bilingual blocks
   ------------------------------------------------------------ */
.hero-sub{font-style:italic;color:var(--red);font-size:20px;margin:-8px 0 16px;font-weight:600}
.bahasa{margin-top:26px;padding:22px 24px;border-left:3px solid var(--gold);background:var(--paper);border-radius:0 11px 11px 0}
.bahasa b{display:block;color:var(--maroon);font-size:14px;margin-bottom:9px}
.bahasa p{color:var(--muted);font-size:14px;font-style:italic}
.bahasa p:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   Portrait above the attribution in a quote block
   ------------------------------------------------------------ */
.quote-author{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:30px}
.quote-portrait{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:center top;border:3px solid var(--gold);box-shadow:0 12px 28px rgba(80,0,18,.18)}
.quote-author cite{margin-top:0}
@media(max-width:580px){.quote-portrait{width:92px;height:92px}}

/* ------------------------------------------------------------
   President's message — body text rather than a pull quote
   ------------------------------------------------------------ */
.president-note{max-width:900px}
.president-note h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:26px}
.president-note p{color:var(--maroon);font-size:17px;line-height:1.75}
.president-note .signoff{margin:26px 0 0;font-weight:800}
.president-note .quote-author{margin-top:18px}
.president-note cite{font-style:normal}
.president-note cite span{display:block;font-weight:600;font-size:14px;color:#7a2436}
@media(max-width:580px){.president-note p{font-size:16px}}

/* ------------------------------------------------------------
   Board of Governors portraits
   ------------------------------------------------------------ */
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:700px}
.board-photo{display:block;width:100%;height:auto;aspect-ratio:854/1024;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#fff}
@media(max-width:850px){.board-grid{gap:13px;max-width:600px}}
@media(max-width:580px){.board-grid{grid-template-columns:repeat(2,1fr);gap:12px;max-width:100%}}

/* ------------------------------------------------------------
   Office address in the footer contact column
   ------------------------------------------------------------ */
.footer-grid{grid-template-columns:1.15fr 1fr 1.05fr}
.footer-address{font-style:normal;font-size:13px;line-height:1.6;color:#dcbcc3;margin:10px 0 0}
@media(max-width:850px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.footer-grid{grid-template-columns:1fr}.footer-address br{display:none}}


/* ------------------------------------------------------------
   DKM page — qualification cards and a light contact list
   ------------------------------------------------------------ */
.qual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.qual-card{display:flex;flex-direction:column}
.qual-code{display:inline-block;align-self:flex-start;padding:6px 11px;border-radius:99px;background:var(--soft);color:var(--red);font-size:11px;font-weight:900;letter-spacing:.07em}
.qual-card h3{margin:14px 0 6px;font-size:19px}
.qual-card p{margin:0;font-size:13px;color:var(--muted);font-style:italic}
.contact-list-light a,.contact-list-light span{color:var(--ink)}
.contact-list-light b{color:var(--maroon)}
.contact-list-light a:hover{color:var(--red)}
@media(max-width:850px){.qual-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.qual-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------
   Programme detail pages — accreditation line, requirement cards
   ------------------------------------------------------------ */
.accred{font-size:13px;font-weight:800;color:var(--red);letter-spacing:.04em;margin:0}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;align-items:start}
.req-card{padding:28px 30px}
.req-card h3{font-size:21px;margin-bottom:16px}
.req-card>p{color:var(--muted);font-size:14px}
.req-list{margin:0;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.6}
.req-list li{margin-bottom:11px}
.req-list li:last-child{margin-bottom:0}
.req-list b{color:var(--maroon);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.req-note{margin:16px 0 0;padding-top:15px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);font-style:italic}
@media(max-width:850px){.req-grid{grid-template-columns:1fr}}

/* Objectives list, two columns on wider screens */
.objective-card{padding:30px 34px}
.objectives{columns:2;column-gap:46px;padding-left:22px}
.objectives li{break-inside:avoid}
@media(max-width:850px){.objectives{columns:1}}

/* Key facts list on a programme page */
.facts{display:grid;gap:11px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.facts div{display:flex;gap:14px;font-size:14px;color:var(--muted);line-height:1.45}
.facts b{flex:0 0 132px;color:var(--maroon);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
@media(max-width:580px){.facts div{flex-direction:column;gap:3px}.facts b{flex:none}}

/* Board portraits sit in <figure> elements; reset the default margin */
.board-member{margin:0}


/* ------------------------------------------------------------
   Social media follow buttons (media page)
   ------------------------------------------------------------ */
.social-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}
.social-link{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--line);border-radius:13px;background:#fff;transition:.18s}
.social-link:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#e3c9cf}
.social-icon{flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:#fff}
.social-icon svg{width:22px;height:22px;fill:currentColor}
.social-icon .icon-stroke{fill:none;stroke:currentColor;stroke-width:2}
.social-icon .icon-dot{fill:currentColor;stroke:none}
.social-tiktok{background:#111}
.social-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.social-facebook{background:#1877f2}
.social-youtube{background:#ff0000}
.social-text b{display:block;color:var(--maroon);font-size:15px}
.social-text small{color:var(--muted);font-size:12px}
@media(max-width:580px){.social-row{grid-template-columns:1fr}}

/* Photograph under "Lifelong learners - Progression with purpose" on the homepage */
.feature-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 30%;margin-top:18px;border-radius:12px;box-shadow:var(--shadow);background:var(--soft)}