/* ==========================================================================
   Indo Euro Climate & Energy Council — www.indoeurocec.org
   Static stylesheet. No build step, no preprocessor.

   Contents
     1.  Tokens
     2.  Base
     4.  Site header
     5.  Hero
     6.  Section furniture
     7.  About and statistics
     8.  Operating cycle
     9.  Purpose
     11. Centres
     15. Council members
     16. Contact
     17. Footer
     18. Motion
     19. Responsive
   ========================================================================== */

/* 1. TOKENS --------------------------------------------------------- */
:root {
  --navy-950: #001B54;
  --navy-800: #002674;
  --blue: #002674;
  --green: #017827;
  --orange: #F6851F;
  --gold: #FFCC1D;
  --ink: #141c2e;
  --muted: #4a5468;
  --line: #d9dee7;
  --soft: #f3f6fa;
  --page-width: 1240px;
  --gutter: clamp(24px, 4vw, 58px);
}

/* 2. BASE ----------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #eeeeea;
  color: var(--ink);
  font: 16px/1.68 Arial, "Helvetica Neue", sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
img { max-width: 100%; }
main {
  width: min(100%, var(--page-width));
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(8, 47, 107, .05);
}

/* 3. TOP BAR ------------------------------------------ */
.top-bar {
  height: 30px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy-950);
  color: #fff;
  font-size: 9px;
  letter-spacing: .1em;
}
.top-bar a { opacity: .9; }
.top-bar .top-bar-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.top-bar .top-bar-left span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  white-space: nowrap;
}
.top-bar .top-bar-left a {
  font-size: 11px;
  white-space: nowrap;
}

/* 4. SITE HEADER ---------------------------------------------------- */
.site-header {
  min-height: 76px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid var(--line);
}
.site-logo {
  flex: 0 0 auto;
  cursor: pointer;
}
.site-logo img {
  display: block;
  width: 132px;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-header nav a {
  cursor: pointer;
  padding: 28px 0 26px;
  border-bottom: 2px solid transparent;
  color: #24344e;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.site-header nav a:hover, .site-header nav a:focus-visible {
  color: var(--navy-800);
  border-color: var(--orange);
}
.site-header nav a, .contact-links a {
  transition: color .18s ease, border-color .18s ease;
}

/* 5. HERO ----------------------------------------------------------- */
.hero {
  min-height: 360px;
  padding: 52px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 210px;
  align-items: center;
  gap: 42px;
  position: relative;
  color: #fff;
  background: linear-gradient(110deg, var(--navy-950), var(--navy-800) 65%, #104b91);
}
.hero::after {
  content: "";
  height: 4px;
  position: absolute;
  inset: auto 0 0;
  background: linear-gradient(90deg, var(--orange) 0 28%, var(--gold) 28% 52%, #fff 52% 74%, var(--green) 74%);
}
.hero h1 {
  max-width: 720px;
  margin: 15px 0;
  font-size: clamp(31px, 3.6vw, 43px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.hero-lead {
  max-width: 700px;
  margin: 0 0 6px;
  color: #dbe6f5;
  font-size: 16.5px;
  line-height: 1.68;
}
.mandate-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .35);
}
.mandate-card strong {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--gold);
}
.mandate-card p {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: 14.5px;
}

/* 6. SECTION FURNITURE ---------------------------------------------- */
.section {
  padding: 52px var(--gutter);
  scroll-margin-top: 20px;
}
.section h2 {
  margin: 0 0 18px;
  color: var(--navy-950);
  font-size: clamp(25px, 2.7vw, 34px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.section-header {
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: 155px 1fr;
  gap: 34px;
}
.section-header > div { max-width: 900px; }
.section-header p:last-child, .columns p, .contact > div > p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
.eyebrow, .section-label {
  margin: 0;
  color: var(--orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
}
.eyebrow { color: #fff; }

/* 7. ABOUT AND STATISTICS ------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: 155px 1fr;
  gap: 34px;
  background: linear-gradient(120deg, #fff 0 68%, #f2f8ff 100%);
}
.about-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.about-brand img {
  width: 128px;
  padding: 8px;
  border: 1px solid #dce5ef;
  background: #fff;
}
.intro {
  margin: 0 0 24px;
  color: #21304a;
  font-size: 19px;
  line-height: 1.55;
}
.columns {
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  border-top: 1px solid var(--line);
}
.council-stats {
  padding: 35px var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  border-block: 1px solid var(--line);
}
.council-stats article {
  padding-top: 19px;
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--orange);
}
.council-stats article:nth-child(2) { border-color: var(--green); }
.council-stats article:nth-child(3) { border-color: var(--gold); }
.council-stats strong {
  color: var(--navy-800);
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -.025em;
}
.council-stats span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 16px;
}

/* 8. OPERATING CYCLE ------------------------------------------------ */
.operating-cycle {
  padding: 0 var(--gutter);
  border-block: 1px solid var(--line);
  border-top: 3px solid var(--navy-800);
  background: var(--soft);
}
.operating-cycle ol {
  margin: 0 auto;
  padding: 28px 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
}
.operating-cycle li {
  min-height: 66px;
  padding: 2px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid #d7deea;
}
.operating-cycle li:first-child { padding-left: 0; }
.operating-cycle li:last-child {
  padding-right: 0;
  border: 0;
}
.operating-cycle li > span {
  color: var(--orange);
  font-size: 11px;
  font-weight: 800;
}
.operating-cycle strong {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy-800);
  font-size: 19px;
  font-weight: 700;
}
.operating-cycle svg {
  width: 20px;
  color: var(--blue);
  stroke-width: 1.8;
}
.operating-cycle li:nth-child(3) strong, .operating-cycle li:nth-child(3) svg {
  color: var(--green);
}

/* 9. PURPOSE -------------------------------------------------------- */
.purpose {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 48px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}
.purpose h2 {
  margin-top: 16px;
  font-size: 27px;
}
.purpose-list article {
  padding: 19px 0;
  display: grid;
  grid-template-columns: 42px 135px 1fr;
  border-top: 1px solid #cbd3df;
}
.purpose-list b {
  color: var(--orange);
  font-size: 12px;
}
.purpose-list h3 {
  margin: 0;
  color: var(--navy-800);
  font-size: 18px;
}
.purpose-list p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

/* 11. CENTRES ------------------------------------------------------- */
.centre {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy-800);
  background: #fff;
  transition: box-shadow .22s ease;
}
.centre:nth-child(2) { border-left-color: var(--green); }
.centre:nth-child(3) { border-left-color: var(--orange); }
.centre:nth-child(4) { border-left-color: var(--gold); }
.centre:nth-child(5) { border-left-color: var(--green); }
.centre:nth-child(6) { border-left-color: var(--orange); }
.centre:hover { box-shadow: 0 3px 14px rgba(0, 38, 116, .09); }
.centre-head {
  width: 100%;
  padding: 22px 26px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.centre-num {
  min-width: 24px;
  padding-top: 4px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
}

/* One symbol per Centre, tinted to that Centre's rule colour. */
.centre-icon {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: -2px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
}
.centre-icon svg { width: 17px; height: 17px; }
.centre:nth-child(1) .centre-icon { color: var(--navy-800); border-color: #c3cfe6; background: #eff3fb; }
.centre:nth-child(2) .centre-icon { color: var(--green); border-color: #bcdcc6; background: #eef7f1; }
.centre:nth-child(3) .centre-icon { color: var(--orange); border-color: #f4d3b2; background: #fdf4ec; }
.centre:nth-child(4) .centre-icon { color: #a37800; border-color: #ecd894; background: #fdf8e6; }
.centre:nth-child(5) .centre-icon { color: var(--green); border-color: #bcdcc6; background: #eef7f1; }
.centre:nth-child(6) .centre-icon { color: var(--orange); border-color: #f4d3b2; background: #fdf4ec; }
.centre-title { flex: 1; }
.centre-title h3 {
  margin: 0 0 9px;
  color: var(--navy-800);
  font-size: 19px;
  line-height: 1.3;
}
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cat {
  padding: 4px 10px;
  border: 1px solid #dbe3f1;
  border-radius: 2px;
  background: #eff3fb;
  color: var(--navy-800);
  font-size: 11.5px;
  font-weight: 700;
}
.centre-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}
.centre-count {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  white-space: nowrap;
}
.chev {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy-800);
  font-size: 11px;
  transition: transform .3s ease, background .2s ease;
}
.centre.open .chev {
  transform: rotate(180deg);
  background: #eff3fb;
}
.centre-body {
  display: none;
  padding: 0 26px 26px 70px;
}
.centre.open .centre-body { display: block; }
.activity {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.activity h4 {
  margin: 0 0 7px;
  color: var(--navy-800);
  font-size: 15.5px;
  font-weight: 700;
}
.activity h4 i {
  margin-right: 10px;
  color: var(--orange);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.activity p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.72;
}

/* 15. COUNCIL MEMBERS ----------------------------------------------- */
.council {
  border-top: 4px solid var(--orange);
  background: linear-gradient(115deg, #f4f7fc, #f6fbf7);
}
.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.member-grid article {
  min-height: 280px;
  padding: 14px 14px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy-800);
  background: #fff;
  transition: transform .22s ease, box-shadow .22s ease;
}
.member-grid article:nth-child(4n+2) { border-top-color: var(--green); }
.member-grid article:nth-child(4n+3) { border-top-color: var(--orange); }
.member-grid article:nth-child(4n+4) { border-top-color: var(--gold); }
.member-photo {
  aspect-ratio: 1 / 1;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid #d8e1ec;
  background: #e9eef6;
}
.member-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.member-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.04);
  transition: filter .35s ease, transform .5s ease;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.member-number {
  width: 34px;
  height: 34px;
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--navy-800);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(6, 31, 70, .12);
}
.member-grid small {
  color: var(--orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.member-grid h3 {
  margin: 9px 0 5px;
  color: var(--navy-950);
  font-size: 16px;
  line-height: 1.35;
}
.member-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.member-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 27, 84, .13);
}
.member-grid article:hover .member-photo img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.03);
}

/* 16. CONTACT ------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: start;
  gap: 46px;
}
.contact .section-label { margin-bottom: 20px; }
.contact-links {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-links a {
  color: var(--navy-800);
  font-size: 15px;
  font-weight: 700;
  border-bottom: 2px solid var(--orange);
  align-self: flex-start;
}
.office-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.office-grid address {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 5px solid var(--orange);
  background: var(--soft);
  font-style: normal;
}
.office-grid strong {
  margin-bottom: 6px;
  color: var(--navy-800);
  font-size: 16px;
}
.office-grid span {
  color: var(--muted);
  font-size: 14.5px;
}

/* 17. FOOTER -------------------------------------------------------- */
footer {
  padding: 28px var(--gutter);
  display: grid;
  grid-template-columns: 155px 1fr auto;
  align-items: center;
  gap: 34px;
  background: #071b3b;
  color: #cdd8e7;
}
footer img {
  width: 122px;
  display: block;
  background: #fff;
}
footer p { font-size: 14.5px; }
footer nav {
  display: flex;
  gap: 20px;
  font-size: 13px;
  font-weight: 700;
}
footer nav a { cursor: pointer; }
footer nav a:hover { color: #fff; }
footer small {
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid #29405e;
  color: #8fa0b6;
  font-size: 10px;
}

/* 18. MOTION -------------------------------------------------------- */
.reveal.shown {
  opacity: 1;
  transform: none;
}

/* 19. REMAINING ----------------------------------------------------- */
/* Top bar */
.top-bar {
  height: auto;
  min-height: 46px;
  padding-block: 7px;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
/* ============ CENTRES ============ */ .centres {
  border-top: 1px solid var(--line);
  background: var(--soft);
}

/* ============ MOTION ============ */ .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

/* 19. RESPONSIVE -------------------------------------------------- */
/* Consolidated, largest breakpoint first. */

/* Nav and bar begin to tighten */
@media (max-width: 1250px) {
  .top-bar .top-bar-left span { font-size: 11px; }
}

@media (max-width: 1150px) {
  .site-header nav { gap: 14px; }
  .site-header nav a {
    font-size: 11px;
    letter-spacing: .025em;
  }
}

/* Council name yields space on narrower screens */
@media (max-width: 1100px) {
  .top-bar .top-bar-left span { display: none; }
}

@media (max-width: 980px) {
  .site-header nav { gap: 11px; }
  .site-header nav a {
    font-size: 10px;
    letter-spacing: .015em;
  }
}

/* Tablet: single-column grids, scrolling nav */
@media (max-width: 900px) {
  .site-header {
    padding-block: 14px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .site-header nav {
    width: 100%;
    padding-bottom: 2px;
    overflow-x: auto;
  }
  .site-header nav a { padding: 8px 0; }
  .hero, .section-header, .about, .purpose, .contact {
    grid-template-columns: 1fr;
  }
  .hero { min-height: auto; }
  .mandate-card { display: none; }
  .section-header, .about { gap: 24px; }
  .about-brand { gap: 16px; }
  .member-grid { grid-template-columns: 1fr 1fr; }
  .centre-body { padding-left: 26px; }
  footer { grid-template-columns: 1fr; }
  footer small { grid-column: auto; }
}

/* Phone */
@media (max-width: 600px) {
  body { background: #fff; }
  .top-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 10px;
  }
  .top-bar .top-bar-left { display: none; }
  .site-logo img { width: 124px; }
  .hero { padding-block: 42px; }
  .hero h1 { font-size: 29px; }
  .section { padding-block: 42px; }
  .columns, .office-grid {
    grid-template-columns: 1fr;
  }
  .council-stats {
    padding-block: 30px;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .council-stats article { padding-top: 14px; }
  .operating-cycle ol {
    grid-template-columns: 1fr 1fr;
    padding: 24px 0;
  }
  .operating-cycle li, .operating-cycle li:first-child, .operating-cycle li:last-child {
    min-height: auto;
    padding: 14px 12px;
    border-right: 0;
    border-bottom: 1px solid #d7deea;
  }
  .purpose-list article { grid-template-columns: 38px 1fr; }
  .purpose-list p {
    grid-column: 2;
    margin-top: 6px;
  }
  .member-grid { grid-template-columns: 1fr; }
  footer nav { flex-wrap: wrap; }
}

/* Motion is opt-out for anyone who has asked the system for less of it. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}