/*
Theme Name:  ISPOR Ethiopia Chapter
Theme URI:   https://isporethiopia.org
Author:      EPIC Health Systems
Description: Official website of the ISPOR Ethiopia Chapter — a regional chapter of
             ISPOR, The Professional Society for Health Economics and Outcomes Research.
Version:     1.6.2
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ispor-ethiopia
*/

/* ============================================================
   TABLE OF CONTENTS
   1.  Design tokens (:root)
   2.  Reset & base
   3.  Typography
   4.  Layout utilities (.wrap, .section, .section-head, .eyebrow)
   5.  Buttons (.btn, .btn-primary, .btn-gold, .btn-ghost, .lnk)
   6.  Top bar (.topbar)
   7.  Navigation (header.nav, .drop, .nav-sub, .drop2, .chev-r)
   8.  Hero (.hero, #hrot)
   9.  Stats strip (.stats, .stat, .statnum)
   10. Pillars (.pillars, .pillar)
   11. Capability grid (.cap-grid, .cap)
   12. Featured sections (.feat)
   13. Project grid (.proj-grid, .proj)
   14. Publications grid (.pubs-grid, .pub)
   15. Partner logo marquee (.logos, .marquee, #mtrack)
   16. CTA band (.cta)
   17. Footer (.foot)
   18. Reveal animation (.reveal)
   19. Page-level layouts (team, events, membership, contact, single)
   20. Responsive overrides
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {

  /* ------------------------------------------------------------
     PALETTE — restrained corporate.

     The three official ISPOR blues are unchanged and still drive the
     brand, but they are now used as ACCENTS on a neutral foundation
     rather than as large flooded areas. Saturated blue across whole
     sections read heavy and, as Daniel put it, depressing. Serious
     institutional sites carry their colour in small, deliberate
     places and let generous neutral space do the work.

     The dark tone is now a near-black slate with a blue undertone
     rather than a saturated navy. It photographs as "considered"
     instead of "corporate template", and white text on it is calmer.
     ------------------------------------------------------------ */

  /* Dark grounds — neutral, not saturated */
  --navy:        #101E27;   /* footer, dark bands, top bar        */
  --navy-deep:   #0A151C;   /* hover / pressed dark state         */

  /* ISPOR official brand blues — accents, links, CTAs */
  --blue:        #0372A2;   /* Allports — primary brand blue      */
  --blue-mid:    #1B8DC0;
  --cyan:        #27AAE1;   /* Curious Blue — bright accent / CTA */
  --cyan-bright: #4FBDE8;
  --sky:         #89CAE4;   /* Cornflower — soft secondary accent */
  --sky-soft:    #F2F8FC;   /* barely-there blue tint             */

  /* Heading colour — deep neutral, not brand blue.
     Blue headings everywhere was a large part of the "too much
     colour" problem. Headings are now near-black; blue is reserved
     for links, eyebrows and interactive elements. */
  --heading: #0E1B23;

  /* Neutrals (very slightly cool) */
  --ink:   #1A2830;
  --slate: #55676F;   /* body copy — softer than near-black       */
  --bg:    #FFFFFF;
  --soft:  #F7F9FA;   /* alternating section background           */
  --mist:  #EDF1F3;
  --line:  #E2E8EB;   /* hairline borders                         */

  /* Typography
     ISPOR is all-sans. --serif is kept as a variable name so every
     h1/h2/h3 rule that references var(--serif) keeps working without edits. */
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --serif:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Spacing & radius */
  --r:    6px;
  --r-lg: 14px;
  --gap:  clamp(1.5rem, 3vw, 2.5rem);

  /* Transitions */
  --ease: 0.22s ease;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--display);
  font-size: 17px;              /* 16px read cramped at this measure */
  line-height: 1.7;
  color: var(--slate);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Inter's optical sizing + slightly open tracking at body size */
  font-feature-settings: "cv05" 1, "cv08" 1, "ss03" 1;
  letter-spacing: -0.003em;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--ease);
}
a:hover { color: var(--cyan); }

ul, ol { list-style: none; }

button, input, textarea, select {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

/* Headings.
   Large sizes drop to weight 600 and tighten tracking — heavy 700 at
   display sizes is the single biggest thing that makes a site look
   like a template. Colour is near-black rather than brand blue. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.021em;
  color: var(--heading);
  text-wrap: balance;          /* avoids ugly one-word last lines */
}

h1 { font-size: clamp(2.15rem, 4.2vw, 3.4rem);  letter-spacing: -0.028em; }
h2 { font-size: clamp(1.65rem, 2.9vw, 2.4rem);  letter-spacing: -0.024em; }
h3 { font-size: clamp(1.2rem,  1.8vw, 1.45rem); letter-spacing: -0.016em; line-height: 1.3; }
h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.011em; line-height: 1.4; }
h5 { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.006em; }
h6 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--slate);
}

p { margin-bottom: 1.15rem; }
p:last-child { margin-bottom: 0; }

/* strong was being used as decoration throughout the body copy, which
   made pages look speckled and shouty. It is now only slightly heavier
   than surrounding text and takes no colour shift. */
strong, b {
  font-weight: 550;
  color: inherit;
}
em { font-style: italic; }

blockquote {
  border-left: 3px solid var(--sky);
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  background: var(--sky-soft);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--ink);
  font-size: 1.05rem;
}

/* Body content area (single posts, legal pages) */
.legal h2  { margin: 2rem 0 0.5rem; }
.legal h3  { margin: 1.5rem 0 0.4rem; }
.legal p   { margin-bottom: 1rem; }
.legal ul, .legal ol {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.legal li  { margin-bottom: 0.4rem; }


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

.wrap {
  width: 100%;
  /* 1200px looked stranded on wide monitors — on a 2294px viewport the
     site filled barely half the screen and every paragraph appeared to
     wrap early. Scales up to 1440px on large displays while still
     holding a comfortable reading measure. */
  max-width: min(1440px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

.section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.section.soft {
  background: var(--soft);
}

.section.sky {
  background: var(--sky-soft);
}

.section.dark {
  background: var(--navy);
  color: #fff;
}
.section.dark h2,
.section.dark h3,
.section.dark h4 { color: #fff; }

.section-head {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.section-head h2 {
  margin-bottom: 0.75rem;
}

.section-head p {
  font-size: 1.05rem;
  color: var(--slate);
  line-height: 1.65;
}

.section.dark .section-head p {
  color: var(--sky);
}

.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  /* Was bright cyan at weight 700 on every section — a lot of loud
     little labels. Now a quiet slate; the headline does the work. */
  color: var(--slate);
  margin-bottom: 0.75rem;
}

.section.dark .eyebrow {
  color: var(--sky);
}

/* Two-column grid helper */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
}

/* Three-column grid helper */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}


/* ============================================================
   5. BUTTONS & LINKS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  /* The lift-and-glow hover read consumer, not institutional.
     A flat tone change is quieter and more confident. */
  transform: none;
  box-shadow: none;
}

/* Primary: deep blue bg, white text */
.btn-primary {
  background: var(--blue);
  color: #fff;
}
.btn-primary:hover {
  background: var(--navy);
  color: #fff;
}

/* Gold (renamed accent): cyan bg, dark navy text for legibility */
.btn-gold {
  background: var(--cyan);
  color: var(--navy-deep);
}
.btn-gold:hover {
  background: var(--cyan-bright);
  color: var(--navy-deep);
}

/* Ghost: transparent with blue border */
.btn-ghost {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
}
.btn-ghost:hover {
  background: var(--blue);
  color: #fff;
}

/* Ghost on dark backgrounds */
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* Inline link with arrow */
.lnk {
  font-weight: 550;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--ease), color var(--ease);
}
.lnk::after { content: " →"; }
.lnk:hover {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.section.dark .lnk { color: var(--sky); }
.section.dark .lnk:hover { color: #fff; border-bottom-color: #fff; }


/* ============================================================
   6. TOP BAR (.topbar)
   ============================================================ */

.topbar {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.75);
  font-size: 0.78rem;
  padding: 0.45rem 0;
  position: relative;
  z-index: 200;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.topbar-left a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color var(--ease);
}
.topbar-left a:hover { color: var(--cyan); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-right a {
  color: rgba(255,255,255,0.65);
  transition: color var(--ease);
  display: flex;
  align-items: center;
}
.topbar-right a:hover { color: var(--cyan); }

.topbar-right svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Social icon group inside the top bar.
   Rendered by ispor_render_social() in functions.php. Needs its own flex
   context because .topbar-right a is display:flex — without this the icons
   would stack vertically instead of sitting in a row. Collapses to nothing
   when no social URLs are confirmed (the wrapper is not output at all). */
.topbar-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-join {
  background: var(--cyan);
  color: var(--navy-deep) !important;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  margin-left: 0.5rem;
  transition: background var(--ease) !important;
}
.topbar-join:hover {
  background: var(--cyan-bright) !important;
  color: var(--navy-deep) !important;
}


/* ============================================================
   7. NAVIGATION
   ============================================================ */

header.nav {
  position: sticky;
  top: 0;
  z-index: 190;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(1,58,90,0.07);
  transition: box-shadow var(--ease);
}

header.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo img {
  height: 40px;
  width: auto;
}
.nav-logo-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  max-width: 200px;
}

/* Primary menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
}

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  border-radius: var(--r);
  transition: color var(--ease), background var(--ease);
  white-space: nowrap;
}
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a {
  color: var(--blue);
  background: var(--sky-soft);
}

/* Chevron for parent items */
.chev {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease);
  flex-shrink: 0;
}

.nav-menu > li:hover > a .chev {
  transform: rotate(225deg) translateY(-2px);
}

/* First-level dropdown (.drop) */
.drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(1,58,90,0.12);
  min-width: 220px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  list-style: none;
}

.nav-menu > li:hover > .drop,
.nav-menu > li:focus-within > .drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.drop li a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  transition: color var(--ease), background var(--ease);
  position: relative;
}
.drop li a:hover {
  color: var(--blue);
  background: var(--sky-soft);
}

/* Second-level dropdown — nested flyout (.nav-sub trigger, .drop2) */
.nav-sub {
  position: relative;
}

/* Right-pointing chevron for nested items */
.chev-r {
  position: absolute;
  right: 1rem;
  top: 50%;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transition: color var(--ease);
}

.drop2 {
  position: absolute;
  top: -0.5rem;
  left: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(1,58,90,0.12);
  min-width: 230px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  list-style: none;
}

.nav-sub:hover > .drop2,
.nav-sub:focus-within > .drop2 {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.drop2 li a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--navy);
  transition: color var(--ease), background var(--ease);
}
.drop2 li a:hover {
  color: var(--blue);
  background: var(--sky-soft);
}

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--r);
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}


/* ============================================================
   8. HERO
   ============================================================ */

/* ------------------------------------------------------------
   HERO — light ground.

   Previously a near-black band. Three dark areas (hero, CTA, footer)
   set a sombre tone before a visitor read a word, and the ISPOR
   signature was drawn for light backgrounds. The headline now carries
   the authority through size and near-black weight instead of through
   a dark field. Dark is reserved for the footer, where it reads as a
   deliberate close rather than a mood.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sky-soft) 100%);
  color: var(--slate);
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* Dot motif — a nod to the ISPOR mark. Very low contrast on light. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(3,114,162,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 74rem;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1.1rem;
}

.hero h1 {
  color: var(--heading);
  max-width: 24ch;
  margin-bottom: 1.5rem;
}

/* Rotating word — the one saturated moment in the hero */
#hrot {
  color: var(--blue-mid);
  display: inline-block;
  min-width: 2ch;
}

.hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--slate);
  max-width: 52rem;
  margin-bottom: 2.25rem;
  line-height: 1.65;
}

/* Hero buttons.
   front-page.php uses .btn-gold and .btn-ghost-light, which were built
   for a dark ground — cyan fill and a white border. Both are wrong on
   light, and .btn-ghost-light would be near-invisible. Rescoped here
   rather than editing the template, so the same classes keep working
   on the dark CTA band further down the page. */
.hero .btn-gold {
  background: var(--blue);
  color: #fff;
}
.hero .btn-gold:hover {
  background: var(--navy);
  color: #fff;
}
.hero .btn-ghost-light {
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--line);
}
.hero .btn-ghost-light:hover {
  background: var(--soft);
  color: var(--heading);
  border-color: var(--slate);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* Optional hero image layout */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(1,42,67,0.4);
}
.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   9. STATS STRIP (.stats, .stat, .statnum)
   ============================================================ */

/* Stats strip.
   Was a solid flood of brand blue directly beneath the dark hero —
   two heavy bands stacked. Now a light band: the figures carry the
   colour, the background stays quiet. */
.stats {
  background: var(--bg);
  padding: clamp(2.75rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--line);
}

.stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  text-align: center;
}

.stat {
  color: var(--slate);
  position: relative;
}

/* Hairline separators between figures rather than a coloured block */
.stat + .stat::before {
  content: "";
  position: absolute;
  left: calc(var(--gap) / -2);
  top: 50%;
  transform: translateY(-50%);
  height: 2.75rem;
  width: 1px;
  background: var(--line);
}

.statnum {
  display: block;
  font-size: clamp(2.25rem, 4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--heading);
  margin-bottom: 0.6rem;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

/* Non-numeric stat tile */
.stat-text {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--blue-mid);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}


/* ============================================================
   10. PILLARS (.pillars, .pillar)
   ============================================================ */

.pillars {
  display: grid;
  /* There are five focus areas. auto-fit produced four columns on a
     wide screen, leaving a single orphan card on row two. Capping at
     three gives a deliberate 3 + 2 arrangement instead. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1100px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   Focus-area cards.

   Previously: a heavy 4px coloured top rule, chunky bold headings,
   and a lift-and-shadow hover. That combination reads dated. Now a
   flat hairline card that responds on hover through the icon and a
   thin accent rule, not by jumping off the page.
   ------------------------------------------------------------ */
.pillar {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.6rem 1.5rem 1.5rem;
  overflow: hidden;
  transition: border-color var(--ease), background var(--ease);
}

/* Thin accent rule that draws in from the left on hover */
.pillar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blue-mid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.pillar:hover {
  border-color: var(--sky);
  background: #FCFDFE;
}
.pillar:hover::after { transform: scaleX(1); }

.pillar-icon {
  width: 42px;
  height: 42px;
  background: var(--sky-soft);
  border: 1px solid #DCEBF5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  transition: background var(--ease), border-color var(--ease);
}
.pillar:hover .pillar-icon {
  background: var(--blue-mid);
  border-color: var(--blue-mid);
}
.pillar-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--blue-mid);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--ease);
}
.pillar:hover .pillar-icon svg { stroke: #fff; }

.pillar h3 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.55rem;
  color: var(--heading);
}

.pillar p {
  font-size: 0.885rem;
  color: var(--slate);
  line-height: 1.62;
  margin: 0 0 1rem;
}

/* Card link sits at the base, quiet until hover */
.pillar .lnk {
  font-size: 0.82rem;
  color: var(--blue-mid);
}


/* ============================================================
   11. CAPABILITY GRID (.cap-grid, .cap)
   ============================================================ */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
}

.cap {
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow var(--ease), transform var(--ease);
}

.cap:hover {
  box-shadow: 0 10px 32px rgba(3,114,162,0.11);
  transform: translateY(-2px);
}

.cap-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--sky-soft), var(--mist));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cap-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
}

.cap h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.cap p {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

.cap .lnk {
  font-size: 0.875rem;
  margin-top: auto;
}

/* Capability sub-page hero */
.cap-hero {
  /* Same seam fix as .page-hero — fade rather than a hard cyan rule. */
  background: linear-gradient(180deg, var(--sky-soft) 0%, #FFFFFF 100%);
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.25rem, 4vw, 3.25rem);
}
.cap-hero h1 { color: var(--heading); }
.cap-hero .eyebrow { margin-bottom: 0.4rem; }


/* ============================================================
   12. FEATURED SECTIONS (.feat)
   ============================================================ */

.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.feat.feat-flip { direction: rtl; }
.feat.feat-flip > * { direction: ltr; }

.feat-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(1,58,90,0.12);
  aspect-ratio: 4/3;
}
.feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feat-body { display: flex; flex-direction: column; gap: 1rem; }

.feat-body h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  margin-bottom: 0.25rem;
}

.feat-body p {
  color: var(--slate);
  font-size: 0.975rem;
  line-height: 1.7;
}

.feat-body .btn,
.feat-body .lnk {
  align-self: flex-start;
}


/* ============================================================
   13. PROJECT GRID (.proj-grid, .proj)
   ============================================================ */

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gap);
}

.proj {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ease), transform var(--ease);
}

.proj:hover {
  box-shadow: 0 10px 32px rgba(3,114,162,0.12);
  transform: translateY(-3px);
}

.proj-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--mist);
}
.proj-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.proj:hover .proj-thumb img { transform: scale(1.04); }

.proj-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.proj-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

.proj h3 {
  font-size: 1rem;
  line-height: 1.3;
}

.proj p {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.proj-meta {
  font-size: 0.78rem;
  color: var(--sky);
  margin-top: 0.5rem;
}


/* ============================================================
   14. PUBLICATIONS GRID (.pubs-grid, .pub)
   ============================================================ */

.pubs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.pub {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 1.25rem 1.5rem;
  transition: border-left-color var(--ease), box-shadow var(--ease);
}

.pub:hover {
  border-left-color: var(--cyan);
  box-shadow: 0 4px 16px rgba(3,114,162,0.09);
}

.pub h4 {
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

.pub-meta {
  font-size: 0.8rem;
  color: var(--slate);
  margin-bottom: 0.5rem;
}

.pub .lnk {
  font-size: 0.82rem;
}


/* ============================================================
   15. PARTNER LOGO MARQUEE (.logos, .marquee, #mtrack)
   ============================================================ */

.logos {
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.logos .section-head {
  margin-bottom: 1.5rem;
}
.logos .section-head p {
  font-size: 0.85rem;
  color: var(--slate);
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* fade edges */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--soft), transparent);
}
.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--soft), transparent);
}

#mtrack {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  /* animation applied by JS once partner array is built */
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.mtrack-running {
  animation: marquee-scroll 28s linear infinite;
}
.mtrack-running:hover { animation-play-state: paused; }

/* Partner entries.
   Until real logo artwork exists these are text-only, so they are
   styled as deliberate typographic marks rather than as captions
   waiting for an image that never arrives. */
.partner-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--ease);
  color: var(--slate);
  font-size: 0.9rem;
  font-weight: 550;
  letter-spacing: -0.008em;
}
.partner-logo:hover { color: var(--blue); }
.partner-logo img { opacity: 0.7; }
.partner-logo:hover { opacity: 1; }

.partner-logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(0.3);
  transition: filter var(--ease);
}
.partner-logo:hover img { filter: grayscale(0); }

.partner-logo span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate);
}


/* ============================================================
   16. CTA BAND (.cta)
   ============================================================ */

/* CTA band.
   The navy-to-blue diagonal gradient was the loudest element on the
   site. Replaced with a flat, quiet dark ground. */
.cta {
  background: var(--navy);
  padding: clamp(4rem, 7vw, 6rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Dot motif background */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(137,202,228,0.1) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.cta .wrap { position: relative; z-index: 1; }

.cta h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 0.75rem;
}

.cta p {
  color: rgba(255,255,255,0.78);
  max-width: 48rem;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  line-height: 1.65;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  align-items: center;
}


/* ============================================================
   17. FOOTER (.foot)
   ============================================================ */

.foot {
  background: var(--navy);
  color: rgba(255,255,255,0.72);
  padding: clamp(3rem, 6vw, 5rem) 0 0;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

/* Brand column */
.foot-brand .nav-logo-text {
  color: #fff;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.5rem;
}
.foot-brand p {
  font-size: 0.82rem;
  line-height: 1.65;
  margin-top: 0.75rem;
  color: rgba(255,255,255,0.62);
  margin-bottom: 1.25rem;
}

.foot-social {
  display: flex;
  gap: 0.6rem;
}
.foot-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ease);
}
.foot-social a:hover { background: var(--cyan); }
.foot-social svg {
  width: 15px;
  height: 15px;
  fill: #fff;
}

/* Link columns */
.foot-col h6 {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sky);
  margin-bottom: 1rem;
}

.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

.foot-col ul li a {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color var(--ease);
}
.foot-col ul li a:hover { color: var(--cyan); }

/* Bottom bar */
.foot-bar {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.42);
}

.foot-bar a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color var(--ease);
}
.foot-bar a:hover { color: var(--sky); }

.foot-bar-affil {
  color: rgba(255,255,255,0.38);
  font-size: 0.74rem;
  font-style: italic;
}


/* ============================================================
   18. REVEAL ANIMATION (.reveal)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-group > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal-group.visible > *:nth-child(1) { transition-delay: 0s;     opacity: 1; transform: none; }
.reveal-group.visible > *:nth-child(2) { transition-delay: 0.1s;   opacity: 1; transform: none; }
.reveal-group.visible > *:nth-child(3) { transition-delay: 0.2s;   opacity: 1; transform: none; }
.reveal-group.visible > *:nth-child(4) { transition-delay: 0.3s;   opacity: 1; transform: none; }
.reveal-group.visible > *:nth-child(5) { transition-delay: 0.4s;   opacity: 1; transform: none; }
.reveal-group.visible > *:nth-child(6) { transition-delay: 0.5s;   opacity: 1; transform: none; }


/* ============================================================
   19. PAGE-LEVEL LAYOUTS
   ============================================================ */

/* ── Page hero (inner pages) ── */
.page-hero {
  /* Was a flat pale tint capped by a hard 3px cyan rule. Two problems:
     the rule was far more saturated than anything near it, and a hard
     edge between a tint and white always reads as an unfinished seam.
     The band now fades from tint to white, so it resolves into the
     page instead of stopping against it. No border needed. */
  background: linear-gradient(180deg, var(--sky-soft) 0%, #FFFFFF 100%);
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.25rem, 4vw, 3.25rem);
}
.page-hero h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.page-hero p {
  color: var(--slate);
  max-width: 54rem;
  font-size: 1.075rem;
  line-height: 1.65;
}

/* ── Breadcrumb ── */
.breadcrumb {
  font-size: 0.8rem;
  color: var(--slate);
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.breadcrumb a { color: var(--blue); }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb span { color: var(--slate); opacity: 0.5; }

/* ── Team / Leadership grid ── */
.team-grid {
  display: grid;
  /* Cards now carry a short biography — 220px columns squeezed prose
     into a ribbon. 320px minimum gives a readable measure. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap);
  align-items: start;
}

.team-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Left-aligned: centred body copy is hard to read once it runs to
     several lines, and centring made every card look like a caption. */
  text-align: left;
  transition: border-color var(--ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.team-card:hover { border-color: var(--slate); }
.team-card:hover {
  box-shadow: 0 8px 28px rgba(3,114,162,0.11);
  transform: translateY(-2px);
}

.team-photo {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mist);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-body {
  padding: 1.25rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Officer location */
.team-loc {
  font-size: 0.78rem;
  color: var(--slate);
  margin-top: 0.25rem;
  opacity: 0.8;
}

/* Short biography */
.team-bio {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--slate);
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

/* Verified profile links (Scholar / ORCID / LinkedIn / ResearchGate) */
.team-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
  list-style: none;
  padding: 0;
}
.team-links a {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
/* ------------------------------------------------------------
   EXECUTIVE COMMITTEE — profile cards

   Replaces the small square photo tiles. Each officer now gets a
   full-width editorial row: portrait left, credentials right. This
   suits substantive biographies, and it lets qualifications,
   editorial appointments and publication records be read at a
   glance rather than buried in a caption.
   ------------------------------------------------------------ */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.board-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease);
  display: flex;
  flex-direction: column;
}
.board-card:hover {
  border-color: var(--sky);
  box-shadow: 0 2px 18px rgba(27,141,192,0.07);
}

.board-photo {
  aspect-ratio: 4 / 3;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.board-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.board-photo-empty {
  width: 100%;
  height: 100%;
  background: var(--soft);
  color: #C3CFD6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-body {
  padding: 1.35rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.board-role {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-mid);
  margin-bottom: 0.45rem;
}

.board-name {
  font-size: 1.12rem;
  letter-spacing: -0.019em;
  color: var(--heading);
  margin-bottom: 0.15rem;
}
.board-creds {
  font-size: 0.76rem;
  color: var(--slate);
  margin-bottom: 0.5rem;
}

.board-field {
  font-size: 0.855rem;
  color: var(--blue-mid);
  font-weight: 550;
  line-height: 1.45;
  margin-bottom: 0.7rem;
}

.board-affil {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
  padding: 0;
  list-style: none;
}
.board-affil li {
  font-size: 0.72rem;
  color: var(--slate);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.24rem 0.5rem;
  line-height: 1.35;
}

.board-bio {
  font-size: 0.885rem;
  line-height: 1.62;
  color: var(--slate);
  margin-bottom: 0.85rem;
}

/* Expanding panel */
.board-more[hidden] { display: none; }
.board-more {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  margin-top: 0.15rem;
}

.board-highlights {
  padding: 0;
  margin: 0 0 0.9rem;
  list-style: none;
}
.board-highlights li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--slate);
  margin-bottom: 0.3rem;
}
.board-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sky);
}

.board-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.board-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.73rem;
  font-weight: 550;
  color: var(--blue-mid);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.3rem 0.55rem;
  transition: background var(--ease), border-color var(--ease);
}
.board-links a:hover {
  background: var(--sky-soft);
  border-color: var(--sky);
}

/* Read more / Read less — pinned to the base so cards align */
.board-toggle {
  margin-top: auto;
  padding-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--blue-mid);
  cursor: pointer;
  background: none;
  border: none;
  align-self: flex-start;
  transition: color var(--ease);
}
.board-toggle:hover { color: var(--blue); }

/* Text node swapped by JS between "Read more" and "Read less".
   Given a fixed min-width so the chevron does not shift sideways
   when the label changes length. */
.board-toggle-label {
  min-width: 5.6em;
  text-align: left;
}

.board-toggle-chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}
.board-toggle[aria-expanded="true"] .board-toggle-chev {
  transform: rotate(-135deg) translate(-2px, -2px);
}

@media (max-width: 560px) {
  .board-grid { grid-template-columns: 1fr; }
}

/* Placeholder tile for officers without a headshot */
.team-photo-empty {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  color: #B6C4CB;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-links a:hover {
  background: var(--sky-soft);
  border-color: var(--blue);
  color: var(--blue);
}
.team-body h4 {
  font-size: 0.975rem;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.team-body .role {
  font-size: 0.72rem;
  color: var(--blue);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.team-body .credentials {
  font-size: 0.78rem;
  color: var(--slate);
  margin-top: 0.25rem;
}

/* ── Events layout ── */
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.event-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  transition: box-shadow var(--ease), transform var(--ease);
}
.event-card:hover {
  box-shadow: 0 6px 24px rgba(3,114,162,0.1);
  transform: translateY(-2px);
}

.event-date {
  text-align: center;
  background: var(--sky-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.6rem 0.9rem;
  min-width: 60px;
}
.event-date .day {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.event-date .month {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  margin-top: 0.2rem;
}

.event-body h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  color: var(--navy);
}
.event-body p {
  font-size: 0.875rem;
  color: var(--slate);
  margin: 0 0 0.5rem;
}
.event-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--sky-soft);
  color: var(--blue);
  padding: 0.2rem 0.55rem;
  border-radius: 30px;
  margin-bottom: 0.4rem;
}

/* ── Membership benefits ── */
.benefit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.benefit {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem;
}
.benefit-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--sky-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.benefit-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
}
.benefit h4 { font-size: 0.9rem; margin-bottom: 0.2rem; }
.benefit p  { font-size: 0.82rem; color: var(--slate); margin: 0; }

/* ── Contact form / Contact page ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.contact-info h3 { margin-bottom: 1rem; }

.contact-detail {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.contact-detail svg {
  width: 18px;
  height: 18px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-detail a { color: var(--blue); }
.contact-detail a:hover { color: var(--cyan); }

/* ------------------------------------------------------------
   ENQUIRY FORM

   These rules were previously scoped to .wpcf7-form only. Contact
   Form 7 is not installed yet, so the theme's HTML fallback form
   inherited none of them and rendered as raw browser defaults —
   which is what made "Send an Enquiry" look broken. Every selector
   now also matches form[name="ispor-enquiry"], so the fallback is
   styled identically and the page looks finished either way.
   ------------------------------------------------------------ */
.wpcf7-form p,
form[name="ispor-enquiry"] p { margin-bottom: 1rem; }

.wpcf7-form label,
form[name="ispor-enquiry"] label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.4rem;
  letter-spacing: 0.005em;
}
form[name="ispor-enquiry"] label span[aria-hidden] { color: var(--blue); }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea,
form[name="ispor-enquiry"] input[type="text"],
form[name="ispor-enquiry"] input[type="email"],
form[name="ispor-enquiry"] select,
form[name="ispor-enquiry"] textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder,
form[name="ispor-enquiry"] input::placeholder,
form[name="ispor-enquiry"] textarea::placeholder { color: #9AAAB2; }

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
form[name="ispor-enquiry"] input:focus,
form[name="ispor-enquiry"] select:focus,
form[name="ispor-enquiry"] textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(3,114,162,0.1);
  outline: none;
}

.wpcf7-form textarea,
form[name="ispor-enquiry"] textarea { min-height: 150px; resize: vertical; }

/* Native selects need the arrow drawn back in once we set a background */
.wpcf7-form select,
form[name="ispor-enquiry"] select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2355676F' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}

.wpcf7-form input[type="submit"],
form[name="ispor-enquiry"] input[type="submit"] {
  background: var(--blue);
  color: #fff;
  padding: 0.85rem 2rem;
  border-radius: 4px;
  font-weight: 550;
  font-size: 0.95rem;
  cursor: pointer;
  width: auto;
  transition: background var(--ease);
}
.wpcf7-form input[type="submit"]:hover,
form[name="ispor-enquiry"] input[type="submit"]:not(:disabled):hover {
  background: var(--navy);
}
/* The fallback submit is disabled on purpose — it has no handler. */
form[name="ispor-enquiry"] input[type="submit"]:disabled {
  background: var(--mist);
  color: var(--slate);
  cursor: not-allowed;
}

/* ------------------------------------------------------------
   MEMBERSHIP APPLICATION FORM
   Shares the enquiry-form field styling; adds two-up rows,
   a checkbox group and a consent line.
   ------------------------------------------------------------ */
.apply-wrap {
  max-width: 52rem;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

form[name="ispor-membership"] p { margin-bottom: 1.15rem; }

form[name="ispor-membership"] label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.4rem;
}
form[name="ispor-membership"] label span[aria-hidden] { color: var(--blue-mid); }

form[name="ispor-membership"] input[type="text"],
form[name="ispor-membership"] input[type="email"],
form[name="ispor-membership"] input[type="tel"],
form[name="ispor-membership"] select,
form[name="ispor-membership"] textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color var(--ease), box-shadow var(--ease);
}
form[name="ispor-membership"] input::placeholder,
form[name="ispor-membership"] textarea::placeholder { color: #9AAAB2; }

form[name="ispor-membership"] input:focus,
form[name="ispor-membership"] select:focus,
form[name="ispor-membership"] textarea:focus {
  border-color: var(--blue-mid);
  box-shadow: 0 0 0 3px rgba(27,141,192,0.12);
  outline: none;
}

form[name="ispor-membership"] textarea { min-height: 130px; resize: vertical; }

form[name="ispor-membership"] select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2355676F' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}

/* Two fields side by side, collapsing on narrow screens */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 1.25rem;
}

.form-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
}
.form-fieldset legend {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--heading);
  padding: 0 0.4rem;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.55rem 1.25rem;
}
.checkbox-grid label,
.form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--slate);
  line-height: 1.5;
  margin-bottom: 0;
  cursor: pointer;
}
.checkbox-grid input[type="checkbox"],
.form-consent input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--blue-mid);
  cursor: pointer;
}

.form-consent {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}

form[name="ispor-membership"] input[type="submit"] {
  background: var(--blue-mid);
  color: #fff;
  padding: 0.85rem 2rem;
  border-radius: 4px;
  font-weight: 550;
  font-size: 0.95rem;
  cursor: pointer;
  width: auto;
  transition: background var(--ease);
}
form[name="ispor-membership"] input[type="submit"]:not(:disabled):hover {
  background: var(--blue);
}
form[name="ispor-membership"] input[type="submit"]:disabled {
  background: var(--mist);
  color: var(--slate);
  cursor: not-allowed;
}

.form-note {
  font-size: 0.83rem;
  color: var(--slate);
  background: var(--sky-soft);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  line-height: 1.55;
}

/* ── About: ISPOR primer ── */
.about-ispor {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.about-ispor h3 { margin-bottom: 0.6rem; }
.about-ispor p  { font-size: 0.925rem; }
.about-ispor-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.9rem;
}
.about-ispor-links .lnk { font-size: 0.85rem; }

/* ── Single post layout ── */
.post-header {
  background: linear-gradient(180deg, var(--sky-soft) 0%, #FFFFFF 100%);
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  margin-bottom: 2.5rem;
}
.post-header h1 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 800px;
}
.post-meta {
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 0.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.post-meta .cat-tag {
  background: var(--blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 30px;
}

/* Post content wrap */
.post-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  align-items: start;
}

/* Post sidebar */
.post-sidebar .sidebar-widget {
  background: var(--soft);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.post-sidebar h5 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.75rem;
}

/* Filter chips (events / resources) */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.chip {
  padding: 0.35rem 0.9rem;
  border-radius: 30px;
  border: 1.5px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
  background: #fff;
}
.chip:hover, .chip.active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--sky-soft);
}
.chip.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}


/* ============================================================
   20. RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 1024px) {
  .foot-grid      { grid-template-columns: 1fr 1fr; }
  .hero-split     { grid-template-columns: 1fr; }
  .contact-grid   { grid-template-columns: 1fr; }
  .post-wrap      { grid-template-columns: 1fr; }
  .cap-grid       { grid-template-columns: repeat(2, 1fr); }
  .pillars        { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   MOBILE  (<= 768px)
   Full pass: touch targets, type scale, nav drawer, grids.
   ============================================================ */
@media (max-width: 768px) {

  /* Nothing should ever scroll sideways on a phone. */
  html, body { overflow-x: hidden; }

  /* Long emails and URLs must not force the page wide. */
  a, p, li, td { overflow-wrap: anywhere; }

  /* Tighter vertical rhythm — desktop padding wastes a phone screen. */
  .section     { padding: 2.75rem 0; }
  .hero        { padding: 2.5rem 0 2.25rem; }
  .section-head{ margin-bottom: 2rem; text-align: left; }
  .wrap        { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* Type: h1 clamp bottoms out too large next to a 1.25rem gutter. */
  h1 { font-size: 1.95rem; letter-spacing: -0.026em; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.15rem; }
  body { font-size: 16px; }
  .hero-sub { font-size: 1rem; }

  /* ---- Navigation drawer ---- */
  .nav-menu   { display: none; }
  .nav-toggle { display: flex; width: 44px; height: 44px;
                align-items: center; justify-content: center; }

  header.nav .wrap { position: relative; }

  .nav-menu.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 32px rgba(14,27,35,0.1);
    padding: 0.5rem 0;
    z-index: 188;
    gap: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }

  /* 48px rows — comfortable thumb targets */
  .nav-menu.open > li > a {
    padding: 0.9rem 1.25rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    min-height: 48px;
  }
  .nav-menu.open > li + li > a { border-top: 1px solid var(--line); }

  /* Chevron rotates to signal the submenu is open */
  .nav-menu.open .chev { transition: transform var(--ease); }
  .nav-menu.open li.open > a .chev { transform: rotate(180deg); }

  .drop, .drop2 {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: var(--soft);
    padding: 0;
    display: none;
    min-width: 0;
    width: auto;
  }
  .nav-menu.open li.open > .drop,
  .nav-menu.open li.open > .drop2 { display: block; }

  .drop li a, .drop2 li a {
    padding: 0.8rem 1.25rem 0.8rem 2.25rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 0.94rem;
  }
  /* The right-facing chevron means nothing once nesting is flattened */
  .chev-r { display: none; }

  /* ---- Top bar: keep the email, drop the rest ---- */
  .topbar { padding: 0.5rem 0; }
  .topbar .wrap { justify-content: center; }
  .topbar-left { gap: 0.75rem; font-size: 0.78rem; }
  .topbar-right { display: none; }

  /* ---- Stats ---- */
  .stats { padding: 2rem 0; }
  .stats .wrap { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  /* The hairline dividers assume a single row — wrong in a 2x2 grid. */
  .stat + .stat::before { display: none; }
  .statnum  { font-size: 1.9rem; }
  .stat-text{ font-size: 0.95rem; }

  /* ---- Cards and grids ---- */
  .pillars, .cap-grid, .proj-grid, .pubs-grid,
  .two-col, .three-col { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }

  .feat, .feat.feat-flip { grid-template-columns: 1fr; direction: ltr; }
  .feat-img { aspect-ratio: 16/9; }

  /* ---- Buttons: full width, comfortable height ---- */
  .btn { min-height: 48px; padding: 0.85rem 1.4rem; }
  .hero-actions, .cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    width: 100%;
  }
  .hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }

  /* ---- Events ---- */
  .event-card { grid-template-columns: 1fr; }
  .event-date { display: none; }
  .filter-chips { gap: 0.5rem; }
  .chip { min-height: 40px; font-size: 0.85rem; }

  /* ---- Partners ---- */
  .logos { padding: 2rem 0; }
  .partner-logo { font-size: 0.85rem; }

  /* ---- Forms: 16px prevents iOS zooming on focus ---- */
  input, textarea, select { font-size: 16px; min-height: 48px; }
  textarea { min-height: 120px; }

  /* ---- CTA / footer ---- */
  .cta { padding: 3rem 0; }
  .foot { padding-top: 2.5rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .foot-bar  { flex-direction: column; text-align: center; }
  .foot-bar .wrap { flex-direction: column; gap: 0.5rem !important; text-align: center; }
}


/* ============================================================
   SMALL PHONES  (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
  .wrap { padding-left: 1.1rem; padding-right: 1.1rem; }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.35rem; }

  .section { padding: 2.25rem 0; }

  /* One stat per row below 480 — two columns crushes the labels. */
  .stats .wrap { grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }
  .stat + .stat { border-top: 1px solid var(--line); padding-top: 1.5rem; }
  .statnum { font-size: 1.75rem; }

  .team-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Keep the chapter email reachable rather than hiding the bar. */
  .topbar { display: block; }
  .topbar-left a:not(:first-child) { display: none; }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; }
}