/* ===========================================================
   SAGE-M  |  ARC Training Centre for Sustainable and Green
             Economy Manufacturing
   Brand palette:
     --blue     #1E4383  Primary Blue
     --green    #42A548  SAGE-M Green
     --teal     #018B94  Arrow Teal
     --leaf     #A5CE44  Leaf Highlight
     --grey     #B5B4B5  Grey Highlight
     --ink      #231F20  Black text
   Font: Montserrat (Google Fonts)
   =========================================================== */

:root {
    --blue:  #1E4383;
    --blue-dark: #162f5c;
    --green: #42A548;
    --teal:  #018B94;
    --leaf:  #A5CE44;
    --grey:  #B5B4B5;
    --grey-bg: #f5f6f7;
    --ink:   #231F20;
    --white: #ffffff;

    --shadow-sm: 0 1px 3px rgba(35,31,32,.08);
    --shadow-md: 0 6px 20px rgba(35,31,32,.10);
    --radius: 10px;
    --content: 1180px;
}

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

html { scroll-behavior:smooth; }

body {
    margin:0;
    font-family:'Montserrat',system-ui,-apple-system,Arial,sans-serif;
    font-weight:300;
    color:var(--ink);
    background:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4 {
    font-weight:800;
    color:var(--blue);
    line-height:1.2;
    margin:0 0 .6em 0;
}
h1 { font-size:clamp(2rem,4.5vw,3.2rem); }
h2 { font-size:clamp(1.6rem,3vw,2.2rem); }
h3 { font-size:1.2rem; }

p  { margin:0 0 1em 0; }

a  { color:var(--blue); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s; }
a:hover { border-bottom-color:var(--blue); }

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

.container {
    max-width:var(--content);
    margin:0 auto;
    padding:0 1.5rem;
}

.muted { color:#555; }
.tag {
    display:inline-block;
    font-size:.75rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--teal);
    margin-bottom:.5rem;
}

/* ---------------- Header / Nav ---------------- */
header.site {
    position:sticky; top:0; z-index:40;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(6px);
    border-bottom:1px solid #eee;
}
.nav-wrap {
    max-width:var(--content);
    margin:0 auto;
    padding:1.2rem 1.5rem;
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem;
    transition:padding .3s ease;
}
.nav-wrap .logo img {
    height:80px; width:auto;
    transition:height .3s ease;
}
header.site.scrolled .nav-wrap { padding:.5rem 1.5rem; }
header.site.scrolled .nav-wrap .logo img { height:44px; }
nav ul {
    list-style:none; margin:0; padding:0;
    display:flex; gap:1.8rem;
}
nav a {
    font-weight:600; color:var(--ink);
    font-size:.95rem;
    border:none;
}
nav a:hover, nav a.active { color:var(--blue); }
nav a.active { border-bottom:2px solid var(--green); padding-bottom:2px; }

.menu-toggle { display:none; background:none; border:0; cursor:pointer; font-size:1.6rem; color:var(--blue); }

@media (max-width:860px) {
    nav ul { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; padding:1rem 1.5rem; border-bottom:1px solid #eee; gap:.8rem; }
    nav ul.open { display:flex; }
    .menu-toggle { display:block; }
}

/* ---------------- Hero ---------------- */
.hero {
    position:relative;
    padding:5rem 1.5rem 6rem;
    color:#fff;
    background:
        linear-gradient(135deg, rgba(30,67,131,.92) 0%, rgba(1,139,148,.88) 60%, rgba(66,165,72,.82) 100%);
    overflow:hidden;
}
.hero-inner {
    max-width:var(--content); margin:0 auto; position:relative; z-index:1;
}
.hero-text { max-width:580px; }
.hero h1 { color:#fff; }
.hero .lede { font-size:1.2rem; font-weight:300; }
.hero-ctas { margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.hero-image {
    position:absolute;
    top:0; right:0; bottom:0;
    width:52%;
    clip-path:polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index:0;
}
.hero-image img { width:100%; height:100%; object-fit:cover; display:block; opacity:0.42; }
@media (max-width:760px) { .hero-image { display:none; } }

.btn {
    display:inline-block;
    padding:.9rem 1.6rem;
    border-radius:999px;
    font-weight:600;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform .1s, box-shadow .15s, background .15s;
}
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-primary   { background:var(--green); color:#fff; }
.btn-primary:hover { background:#359b3b; }
.btn-outline   { background:transparent; color:#fff; border-color:#fff; }
.btn-outline:hover { background:#fff; color:var(--blue); }
.btn-dark      { background:var(--blue); color:#fff; }
.btn-dark:hover{ background:var(--blue-dark); }

/* ---------------- Stat strip ---------------- */
.stats {
    background:var(--grey-bg);
    padding:2.5rem 1.5rem;
}
.stats-grid {
    max-width:var(--content); margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:1.5rem; text-align:center;
}
.stat .num { font-size:2.2rem; font-weight:800; color:var(--blue); line-height:1; }
.stat .lbl { font-size:.9rem; color:#444; margin-top:.3rem; text-transform:uppercase; letter-spacing:.05em; }

/* ---------------- Sections ---------------- */
section { padding:4.5rem 1.5rem; }
section.alt { background:var(--grey-bg); }
.section-header { text-align:center; max-width:720px; margin:0 auto 3rem; }
.section-header p { color:#555; font-size:1.05rem; }

/* ---------------- Card grid ---------------- */
.grid-3 {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.8rem;
    max-width:var(--content); margin:0 auto;
}
.card {
    background:#fff;
    border-radius:var(--radius);
    padding:1.8rem;
    box-shadow:var(--shadow-sm);
    border-top:4px solid var(--teal);
    transition:transform .15s, box-shadow .15s;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card.theme-green  { border-top-color:var(--green); }
.card.theme-teal   { border-top-color:var(--teal); }
.card.theme-blue   { border-top-color:var(--blue); }
.card h3 { margin-top:0; }
.card ul { padding-left:1.1rem; margin:0; color:#444; font-size:.95rem; }
.card ul li { margin-bottom:.35rem; }

/* ---------------- People (flip cards) ---------------- */
.people-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:1.8rem;
    max-width:var(--content); margin:0 auto;
}

/* Flip card wrapper */
.person {
    perspective:800px;
    min-height:280px;
    cursor:pointer;
}
.person-inner {
    position:relative; width:100%; height:100%; min-height:280px;
    transition:transform .5s cubic-bezier(.4,0,.2,1);
    transform-style:preserve-3d;
}
.person.flipped .person-inner { transform:rotateY(180deg); }

/* shared face styles */
.person-front, .person-back {
    position:absolute; inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    border-radius:var(--radius);
    padding:1.5rem 1rem;
    display:flex; flex-direction:column; align-items:center;
    box-shadow:var(--shadow-sm);
    background:#fff;
    text-align:center;
}
.person-back {
    transform:rotateY(180deg);
    background:var(--blue);
    color:#fff;
    justify-content:flex-start;
    text-align:left;
    overflow:hidden;
}
.person-back .back-name { font-weight:800; font-size:1rem; color:#fff; margin-bottom:.25rem; }
.person-back .back-role { font-size:.8rem; color:var(--leaf); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.8rem; }
.person-back .back-bio  { font-size:.88rem; color:#cfd7e6; line-height:1.55; overflow-y:auto; max-height:160px; }
.person-back .back-close { margin-top:.8rem; font-size:.78rem; color:var(--leaf); font-weight:600; }

/* photo circle */
.person .photo {
    width:130px; height:130px;
    border-radius:50%;
    margin:0 auto .9rem;
    background:var(--grey-bg) center/cover no-repeat;
    border:3px solid var(--leaf);
    flex-shrink:0;
}
.person .photo.placeholder {
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.8rem; color:var(--blue);
}
.person .name  { font-weight:700; color:var(--ink); font-size:.95rem; margin-bottom:.2rem; }
.person .role  { font-size:.8rem; color:var(--teal); text-transform:uppercase; letter-spacing:.04em; }
.person .affil { font-size:.8rem; color:#555; margin-top:.2rem; }
.person .flip-hint { font-size:.73rem; color:#aaa; margin-top:.6rem; }

.people-group { margin-bottom:3rem; }
.people-group h2 { border-bottom:2px solid var(--leaf); padding-bottom:.4rem; margin-bottom:1.5rem; }

/* ---------------- Partners strip (home) ---------------- */
.partners-strip {
    display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; align-items:center;
    max-width:var(--content); margin:0 auto;
}
.partner-chip {
    background:#fff; padding:.8rem 1.2rem; border-radius:8px;
    box-shadow:var(--shadow-sm); font-weight:600; color:var(--blue);
    border:1px solid #eee; display:flex; align-items:center; gap:.7rem;
    transition:transform .15s, box-shadow .15s;
}
.partner-chip:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.partner-chip img { height:32px; width:auto; object-fit:contain; }

/* ---------------- Partner logo grid (partners page) ---------------- */
.logo-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:1.5rem;
    max-width:var(--content); margin:0 auto;
}
.logo-card {
    background:#fff; border:1px solid #eee; border-radius:var(--radius);
    padding:1.5rem 1.2rem;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.8rem; text-align:center;
    box-shadow:var(--shadow-sm);
    transition:transform .15s, box-shadow .15s;
    min-height:120px;
}
.logo-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.logo-card img { max-height:60px; max-width:160px; object-fit:contain; }
.logo-card .partner-name { font-weight:600; color:var(--blue); font-size:.9rem; }
.logo-card .partner-sub  { font-size:.8rem; color:#666; }

/* ---------------- Theme detail ---------------- */
.theme-block {
    display:grid; grid-template-columns:1fr 1fr; gap:3rem;
    align-items:center;
    max-width:var(--content); margin:0 auto 4rem;
}
.theme-block:nth-child(even) .theme-text { order:2; }
.theme-block .theme-visual {
    aspect-ratio:4/3;
    border-radius:var(--radius);
    background:linear-gradient(135deg,var(--teal),var(--green));
    overflow:hidden;
    box-shadow:var(--shadow-md);
    position:relative;
}
.theme-block .theme-visual img {
    width:100%; height:100%; object-fit:cover; display:block;
    opacity:0.5; mix-blend-mode:luminosity;
}
.theme-visual-caption {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    padding:1.5rem;
    color:#fff; font-size:1.05rem; font-weight:600; text-align:center;
    text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
.theme-block:nth-child(2) .theme-visual { background:linear-gradient(135deg,var(--green),var(--leaf)); color:var(--ink); }
.theme-block:nth-child(3) .theme-visual { background:linear-gradient(135deg,var(--blue),var(--teal)); }
@media (max-width:760px) { .theme-block { grid-template-columns:1fr; } .theme-block:nth-child(even) .theme-text { order:0; } }

/* ---------------- CTA banner ---------------- */
.cta {
    background:var(--blue);
    color:#fff;
    text-align:center;
    padding:4rem 1.5rem;
}
.cta h2 { color:#fff; }
.cta .lede { color:#cfd7e6; max-width:600px; margin:0 auto 1.5rem; }

/* ---------------- Footer ---------------- */
footer.site {
    background:var(--ink);
    color:#c8c8c8;
    padding:3rem 1.5rem 1.5rem;
    font-size:.9rem;
}
footer.site .ft {
    max-width:var(--content); margin:0 auto;
    display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem;
}
footer.site h4 { color:#fff; font-size:1rem; margin-bottom:.8rem; }
footer.site a { color:#c8c8c8; border:none; }
footer.site a:hover { color:var(--leaf); }
footer.site ul { list-style:none; padding:0; margin:0; }
footer.site ul li { margin-bottom:.4rem; }
footer.site .bottom {
    max-width:var(--content); margin:2.5rem auto 0; padding-top:1.2rem;
    border-top:1px solid #3a3536;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
    color:#888; font-size:.8rem;
}
@media (max-width:720px) { footer.site .ft { grid-template-columns:1fr; } }

/* ---------------- Content pages ---------------- */
.page-hero {
    padding:3.5rem 1.5rem 2.5rem;
    background:linear-gradient(135deg,var(--blue),var(--teal));
    color:#fff;
    text-align:center;
}
.page-hero h1 { color:#fff; margin-bottom:.3rem; }
.page-hero p  { color:#d4e1ee; max-width:700px; margin:0 auto; }

.prose { max-width:800px; margin:0 auto; }
.prose h2 { margin-top:2.5rem; }
.prose ul { padding-left:1.3rem; }
.prose .callout {
    background:var(--grey-bg);
    border-left:4px solid var(--green);
    padding:1.2rem 1.5rem; border-radius:6px;
    margin:1.5rem 0;
}
.placeholder-note {
    background:#fffbe6;
    border:1px dashed #e6b800;
    padding:.8rem 1rem; border-radius:6px;
    font-size:.9rem; color:#725a00;
    margin:1rem 0;
}

/* ---------------- News list ---------------- */
.news-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.8rem; max-width:var(--content); margin:0 auto; }
.news-item {
    background:#fff; border-radius:var(--radius);
    border:1px solid #eee;
    display:flex; flex-direction:column;
    overflow:hidden;
}
.news-img { width:100%; aspect-ratio:16/9; overflow:hidden; }
.news-img img { width:100%; height:100%; object-fit:cover; display:block; }
.news-body { padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.news-item .date { font-size:.8rem; color:var(--teal); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.news-item h3 { margin:.4rem 0 .6rem; font-size:1.1rem; }
.news-links { display:flex; gap:1rem; flex-wrap:wrap; margin-top:.75rem; }

/* ---------------- Contact form ---------------- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; max-width:var(--content); margin:0 auto; }
@media (max-width:760px) { .contact-grid { grid-template-columns:1fr; } }
form .field { margin-bottom:1rem; }
form label { display:block; font-weight:600; margin-bottom:.3rem; font-size:.9rem; }
form input, form textarea, form select {
    width:100%; padding:.7rem .9rem; border:1px solid #ccc; border-radius:6px;
    font-family:inherit; font-size:1rem; background:#fff;
}
form textarea { min-height:140px; resize:vertical; }
form button { margin-top:.5rem; }