/* COGNO Core — listing & directory styles. Intentionally light; inherits site fonts/colours. */

/* ── Figtree — self-hosted in the theme (assets/fonts/, OFL licence) so the brand font
   loads with zero external requests and always resolves, offline or not. Variable font:
   one file covers weights 300–900. (Previously nothing loaded Figtree at all — the
   whole site silently fell back to the system font.) ── */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Figtree";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-var-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Figtree";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-var-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Anchor scrolling — jumping to a section's Anchor ID (e.g. #waytogetinvolved)
   glides instead of snapping, and stops clear of the 72px sticky header instead of
   hiding the heading beneath it. Snap is restored when reduced motion is requested. ── */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
.cogno-flex > [id],
.cogno-page [id] { scroll-margin-top: calc(var(--cogno-header-h, 72px) + var(--space-md, 20px)); }

/* =================================================================
   COGNO design system — tokens + base layer for custom-coded pages.
   Elementor is gone, so no !important defensive overrides are needed;
   plain class selectors win. Used by .cogno-page and all cogno-core widgets.
   ================================================================= */
:root {
	/* ═══════════════════════════════════════════════════════════════════════
	   COGNO DESIGN TOKENS
	   Clean, prefix-free names are the source of truth (Elementor is gone, so
	   there is nothing left to collide with). The legacy --cogno-* names are
	   kept as thin ALIASES at the bottom of this block so all existing CSS and
	   templates keep working unchanged; new work uses the clean names.
	   Live reference: /design-system/  ·  edit a value ONCE here → flows everywhere.
	   ═══════════════════════════════════════════════════════════════════════ */

	/* ── Colour · brand — the COGNO UI Style Guideline palette (Figma) ───────
	   Each comment names the Figma swatch; token names are kept stable (used
	   site-wide). Edit a value ONCE here → it flows everywhere. ────────────── */
	--c-periwinkle: #7088ff;  /* Lilac (Primary) — light brand band, heroes, field outlines */
	--c-purple:     #393292;  /* Dark Lilac (Primary) — primary buttons, headings on light */
	--c-coral:      #ff4433;  /* New Orange (Secondary) — CTA fill only (never a border) */
	--c-navy:       #001f53;  /* Midnight — deepest brand tone, headings */
	--c-blue:       #1f58e6;  /* Royal Blue — links / accents */
	--c-sky:        #b9ceff;  /* Sky Blue — hero gradient wash, soft fills */
	--c-clouds:     #eef9ff;  /* Clouds — lightest blue tint (section + hover backgrounds) */
	--c-ink-900:    #1a1818;  /* Ink — near-black text on light */
	--c-apricot:    #ff9479;  /* Apricot — warm accent */
	--c-blush:      #ffebe0;  /* Soft Blush — warm tint background */
	--c-navy-2:     #324a6d;  /* softer navy / body ink (not a Figma swatch) */
	--c-vampire:    var(--c-ink-900);  /* legacy name → Ink (neutral outline pills) */

	/* Brand colour VARIATIONS — auto-derived with color-mix (no eyeballed hex).
	   *-hover = hover/pressed (mixed toward black); *-tint = pale wash for backgrounds. */
	--c-purple-hover: color-mix(in srgb, var(--c-purple) 82%, #000);
	--c-purple-tint:  color-mix(in srgb, var(--c-purple) 10%, #fff);
	--c-blue-hover:   color-mix(in srgb, var(--c-blue)   84%, #000);
	--c-blue-tint:    color-mix(in srgb, var(--c-blue)    9%, #fff);
	--c-coral-hover:  color-mix(in srgb, var(--c-coral)  86%, #000);
	--c-coral-tint:   color-mix(in srgb, var(--c-coral)  12%, #fff);
	--c-navy-tint:    color-mix(in srgb, var(--c-navy)    8%, #fff);

	/* ── Colour · ink & surfaces ─────────────────────────────────────────── */
	--c-ink:         var(--c-navy-2); /* body copy (== Midnight-2; deduped, was #324a6d twice) */
	--c-ink-soft:    #46586f;   /* secondary / muted text */
	--c-bg:          #f7f9fc;   /* page background */
	--c-bg-soft:     var(--c-clouds); /* tinted section background → Clouds (deduped from #eef4ff) */
	--c-tint:        #f4f3f8;   /* Light Grey — tint bands, light heroes, soft cards */
	--c-surface:     #fff;      /* cards / panels / dropdowns */
	--c-line:        #e3e9f1;   /* hairline borders */
	--c-line-strong: #cfd9e6;   /* control borders */
	--c-white:       #fff;
	/* ── Colour · semantic status — ONE group. Trial-status pills, member +
	   contact notices, and .cogno-status--* ALL resolve here (bg + text). ──── */
	--c-success-bg: #e7f5ee;  --c-success-fg: #0c5b3c;  /* open / recruiting / ok */
	--c-warning-bg: #fbf3e2;  --c-warning-fg: #8a5a13;  /* in-development / in-follow-up */
	--c-error-bg:   #fbe9e7;  --c-error-fg:   #8c2222;  /* closed / error */
	--c-neutral-bg: #eef0f2;  --c-neutral-fg: #4b5468;  /* completed / default */
	--c-info-bg:    #eef0fb;  --c-info-fg:    var(--c-purple); /* informational */
	/* Legacy --c-status-* names → semantic group (keeps trial-status CSS working). */
	--c-status-neutral-bg: var(--c-neutral-bg);  --c-status-neutral-fg: var(--c-neutral-fg);
	--c-status-open-bg:    var(--c-success-bg);  --c-status-open-fg:    var(--c-success-fg);
	--c-status-dev-bg:     var(--c-info-bg);     --c-status-dev-fg:     var(--c-info-fg);
	--c-status-hold-bg:    var(--c-warning-bg);  --c-status-hold-fg:    var(--c-warning-fg);
	--c-status-closed-bg:  var(--c-error-bg);    --c-status-closed-fg:  var(--c-error-fg);

	/* ── Typography ──────────────────────────────────────────────────────── */
	--font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	/* Fluid type scale — every size scales smoothly from a 375px viewport (min)
	   to the 1440px desktop frame (max); nothing jumps at a breakpoint. Method:
	   slope = (max-min)/(1440-375); clamp(min, (min - slope*375) + slope*100vw, max). */
	--fs-display:  clamp(2.25rem, 1.46rem + 3.38vw, 4.5rem);    /* 36 → 72px — hero headline */
	--fs-h1:       clamp(2rem, 1.30rem + 3.01vw, 4rem);         /* 32 → 64px — page title */
	--fs-h2:       clamp(1.625rem, 1.32rem + 1.32vw, 2.5rem);   /* 26 → 40px — section headings */
	--fs-h3:       clamp(1.375rem, 1.24rem + 0.56vw, 1.75rem);  /* 22 → 28px — sub headings */
	--fs-h4:       clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem); /* 18 → 22px — card headings */
	--fs-subtitle: clamp(1.0625rem, 0.91rem + 0.66vw, 1.5rem);  /* 17 → 24px — intro / standfirst */
	--fs-body:     clamp(1rem, 0.96rem + 0.19vw, 1.125rem);     /* 16 → 18px — body copy */
	--fs-small:    clamp(0.875rem, 0.85rem + 0.09vw, 0.9375rem);/* 14 → 15px — small / meta / status pills. The general floor: differentiate labels via weight + UPPERCASE + letter-spacing. */
	--fs-caption:  0.8125rem;                                   /* 13px fixed — compact pills only: .cogno-card__tag (date/tag) + .cogno-card__status */
	/* Line-height scale — the ONE source for line-height. tight→relaxed. */
	--lh-none:    1;     /* single-line pills / icon glyphs */
	--lh-tight:   1.1;   /* hero / big display headings */
	--lh-heading: 1.2;   /* h1–h4 headings */
	--lh-snug:    1.3;   /* card titles, labels, tight sub-headings (was 1.25–1.45) */
	--lh-body:    1.5;   /* body copy */
	--lh-relaxed: 1.65;  /* comfortable prose / long body (was 1.55–1.7) */
	/* Font weights — Figtree. Brand rule: headings/body stay 'normal' (400);
	   'medium' (500) = footer/section labels; 'semibold' (600) = buttons/pills only. */
	--weight-normal:   400;
	--weight-medium:   500;
	--weight-semibold: 600;
	/* Letter-spacing — tracking tokens for the two recurring needs. */
	--tracking-tight: -0.02em; /* large display headings */
	--tracking-label:  0.05em; /* uppercase eyebrows / meta labels (was .04–.06em) */
	--text: 1rem;                 /* base body copy size (16px) — alias of --fs-body min */
	--section-title-size: var(--fs-h3);/* content-section heading = h3 (deduped from 1.75rem) */

	/* ── Spacing scale — the ONE source of truth for margins / padding / gaps.
	   Numeric px-valued names are canonical (--space-16 = 16px); T-shirt names
	   are kept as aliases. 2px grid ≤24px, then 4/8px steps. Dense on purpose
	   (mirrors real usage) — can be coarsened later. ─────────────────────────── */
	--space-2:  2px;
	--space-4:  4px;
	--space-6:  6px;
	--space-8:  8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-18: 18px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--space-28: 28px;
	--space-32: 32px;
	--space-36: 36px;
	--space-40: 40px;
	--space-44: 44px;
	--space-48: 48px;
	--space-56: 56px;
	--space-64: 64px;
	--space-72: 72px;
	--space-96: 96px;
	/* T-shirt aliases (existing usage keeps working). */
	--space-2xs: var(--space-4);
	--space-xs:  var(--space-8);
	--space-sm:  var(--space-12);
	--space-md:  var(--space-20);
	--space-lg:  var(--space-32);
	--space-xl:  var(--space-48);

	/* ── Controls ────────────────────────────────────────────────────────── */
	--control-h:     48px;   /* ONE control height — buttons, inputs, selects align on it */
	--control-pad-x: 16px;   /* rectangular text-input side padding */

	/* ── Icon sizes — ONE scale for inline SVG icons (Lucide) site-wide ───── */
	--icon-sm: 16px;   /* small — inline chevrons, link arrows */
	--icon-md: 18px;   /* DEFAULT UI icon — buttons, meta, pagination, backlink */
	--icon-lg: 24px;   /* prominent — Lucide native size, design-system specimens */

	/* ── Radius & borders ────────────────────────────────────────────────── */
	--radius:       12px;
	--radius-inner: 8px;    /* nested elements inside a card — always smaller than --radius */
	--radius-lg:    16px;   /* feature cards / bento / overlap cards / modals (newer Figma sections) */
	--radius-sheet: 40px;   /* rounded-top "sheet" bands (header/footer corners, section tuck-ups) */
	--radius-pill:  999px;
	--border-width: 1.5px;  /* one consistent control border width */

	/* ── Layout & grid ───────────────────────────────────────────────────────
	   The .cogno-container IS the responsive grid: 12 cols desktop, 6 at ≤1024
	   (tablet), 4 at ≤736 (mobile), via --grid-cols (set in the media queries
	   below). Sections place children with grid-column spans (e.g. 1 / 8 + 8 / -1);
	   default is full width (1 / -1). Width mirrors the Resilient reference /
	   1920 Figma frame: ~1680px content on a 1920 screen, capped at 1720px wider. */
	--grid-cols:     12;
	--gutter:        clamp(1rem, 1.25vw, 1.5rem);      /* 16 → 24px column gap */
	--container-max: clamp(70rem, 87.5vw, 107.5rem);   /* 1120 → 1720px content width */
	--container-pad: clamp(1.25rem, 4vw, 3.75rem);     /* 20 → 60px left/right padding */
	--maxw:          1280px;                           /* reading width for non-grid page wrappers */
	--section-y:     clamp(60px, 11vw, 150px);         /* page top/bottom padding */
	--sec-pad-y:     clamp(56px, 6vw, 96px);           /* ONE consistent flex-section vertical padding */
	--card-pad:      16px;                             /* card inner padding (media + body) */

	/* ── Elevation ───────────────────────────────────────────────────────── */
	--surface:          #fff;                          /* legacy name kept below too */
	--shadow:           0 10px 30px rgba(16,36,59,.12);/* dropdown & popup shadow */
	--shadow-card:      0 6px 22px rgba(16,36,59,.10); /* card hover shadow */
	--modal-maxw:       720px;                          /* default modal max-width */
	--modal-maxw-wide:  920px;                          /* wide variant — committee bio */

	/* ── Responsive breakpoints (reference values; @media rules can't read var(),
	   so they use the literal px below — keep them matched):
	     Mobile Portrait ≤ 736 · Tablet Portrait ≤ 1024 · Laptop ≤ 1440 · Widescreen ≥ 2400 */
	--bp-mobile: 736px;
	--bp-tablet: 1024px;
	--bp-laptop: 1440px;
	--bp-wide:   2400px;

	/* ── Motion ──────────────────────────────────────────────────────────────
	   The site's animation vocabulary. Assign these to any transition/animation
	   instead of the browser's weak built-in `ease`. The JS engine (cogno-motion.js)
	   reads the same values, so a curve edited here flows to CSS *and* JS.
	   Decision order for easing: enter/exit → --ease-out · move/morph → --ease-in-out
	   · drawers/expanders → --ease-drawer · hover/colour → keep plain `ease`.
	   Live reference + the data-anim API: /design-system/ (Motion section). */
	--ease-out:    cubic-bezier(.23, 1, .32, 1);      /* strong ease-out — entrances, the default */
	--ease-in-out: cubic-bezier(.77, 0, .175, 1);     /* strong ease-in-out — on-screen movement */
	--ease-drawer: cubic-bezier(.32, .72, 0, 1);      /* iOS-like — accordions, expanders, sheets */
	--dur-fast:    .16s;   /* button press, hover, colour */
	--dur-base:    .25s;   /* dropdowns, chips, small UI */
	--dur-slow:    .45s;   /* accordions, drawers */
	--dur-reveal:  .6s;    /* scroll-reveal entrances */
	--anim-rise:   24px;   /* how far a reveal rises from */
	--anim-stagger:.06s;   /* delay between staggered siblings */

	/* ── Legacy aliases: --cogno-* → clean tokens (do not add new ones) ────── */
	--cogno-navy: var(--c-navy);
	--cogno-navy-2: var(--c-navy-2);
	--cogno-purple: var(--c-purple);
	--cogno-blue: var(--c-blue);
	--cogno-coral: var(--c-coral);
	--cogno-ink: var(--c-ink);
	--cogno-ink-soft: var(--c-ink-soft);
	--cogno-bg: var(--c-bg);
	--cogno-bg-soft: var(--c-bg-soft);
	--cogno-line: var(--c-line);
	--cogno-line-strong: var(--c-line-strong);
	--cogno-surface: var(--c-surface);
	--cogno-border-width: var(--border-width);
	--cogno-radius: var(--radius);
	--cogno-radius-inner: var(--radius-inner);
	--cogno-radius-pill: var(--radius-pill);
	--cogno-font: var(--font);
	--cogno-section-y: var(--section-y);
	--cogno-text: var(--text);
	--cogno-section-title-size: var(--section-title-size);
	--cogno-maxw: var(--maxw);
	--cogno-card-pad: var(--card-pad);
	/* Previously-undefined names that leaned on their var() fallbacks — pinned here so
	   the fallback values are the single source of truth (found in the token audit). */
	--cogno-blue-soft: #7c86ec;      /* periwinkle band (page headers, purple CTA body) */
	--cogno-acc-gap: 24px;           /* images-accordion: panel gap */
	--cogno-acc-h: 460px;            /* images-accordion: expanded height */
	--cogno-acc-collapsed: 220px;    /* images-accordion: collapsed panel min-size */
	--cogno-acc-radius: 24px;        /* images-accordion: panel radius */
	--cogno-space-xs: var(--space-xs);
	--cogno-space-sm: var(--space-sm);
	--cogno-space-md: var(--space-md);
	--cogno-space-lg: var(--space-lg);
	--cogno-space-xl: var(--space-xl);
	--cogno-weight-normal: var(--weight-normal);
	--cogno-weight-medium: var(--weight-medium);
	--cogno-weight-semibold: var(--weight-semibold);
	--cogno-modal-maxw: var(--modal-maxw);
	--cogno-modal-maxw-wide: var(--modal-maxw-wide);
	--cogno-shadow: var(--shadow);
	--cogno-shadow-card: var(--shadow-card);
	--cogno-bp-mobile: var(--bp-mobile);
	--cogno-bp-tablet: var(--bp-tablet);
	--cogno-bp-laptop: var(--bp-laptop);
	--cogno-bp-wide: var(--bp-wide);
	--cogno-fs-display: var(--fs-display);
	--cogno-fs-h1: var(--fs-h1);
	--cogno-fs-h2: var(--fs-h2);
	--cogno-fs-h3: var(--fs-h3);
	--cogno-fs-h4: var(--fs-h4);
	--cogno-fs-subtitle: var(--fs-subtitle);
	--cogno-fs-body: var(--fs-body);
	--cogno-fs-small: var(--fs-small);
	--cogno-lh-tight: var(--lh-tight);
	--cogno-lh-heading: var(--lh-heading);
	--cogno-lh-body: var(--lh-body);
	--cogno-grid-cols: var(--grid-cols);
	--cogno-gutter: var(--gutter);
	--cogno-container-max: var(--container-max);
	--cogno-container-pad: var(--container-pad);
	--cogno-sec-pad-y: var(--sec-pad-y);
}

/* Responsive grid column count — mirrors .cogno-container. Uses the canonical
   COGNO breakpoint px (736 / 1024) so it reflows with the rest of the site. */
@media (max-width: 1024px) { :root { --grid-cols: 6; --gutter: 1.25rem; } }
@media (max-width: 736px)  { :root { --grid-cols: 4; --gutter: 1rem; } }

/* The 12/6/4 responsive grid. Opt in by wrapping section content in
   .cogno-container; children span full width unless given a grid-column. */
.cogno-container {
	box-sizing: border-box;   /* padding sits INSIDE max-width, no edge overflow on wide screens */
	display: grid;
	grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
	column-gap: var(--gutter);
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.cogno-container > :where(*) { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION — scroll-reveal system.  Assign by adding ONE attribute to any element:
     data-anim="reveal"        fade + rise            (sections, headings, blocks)
     data-anim="stagger"       children rise in turn  (card / logo / people grids)
     data-anim="slide-left"    fade + slide from left (split layouts)
     data-anim="slide-right"   fade + slide from right
     data-anim="image"         soft wipe + scale settle (hero-scale media)
   Optional tuning: data-anim-delay="0.1"  data-anim-stagger="0.05"  data-anim-y="16"
   cogno-motion.js reads these, holds the start state, and plays on scroll-in via
   Motion's inView(). The head bootstrap adds `.cogno-anim` before paint so there
   is no flash; if the engine never loads it adds `.cogno-anim-off` to reveal all.
   Full reference + live demos: /design-system/ → Motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.cogno-anim [data-anim]                 { opacity: 0; will-change: transform, opacity; }
.cogno-anim [data-anim="reveal"]        { transform: translateY(var(--anim-rise)); }
.cogno-anim [data-anim="slide-left"]    { transform: translateX(calc(-1 * var(--anim-rise))); }
.cogno-anim [data-anim="slide-right"]   { transform: translateX(var(--anim-rise)); }
.cogno-anim [data-anim="image"]         { clip-path: inset(0 100% 0 0); }
.cogno-anim [data-anim="stagger"]       { opacity: 1; }                       /* container visible … */
.cogno-anim [data-anim="stagger"] > *   { opacity: 0; transform: translateY(var(--anim-rise)); will-change: transform, opacity; }  /* … children rise */

/* Finished state: the engine adds .cogno-anim-done and strips its runtime inline
   styles, so the resting DOM carries CLASSES ONLY (no leftover style="transform…"). */
.cogno-anim [data-anim].cogno-anim-done,
.cogno-anim [data-anim="stagger"] > .cogno-anim-done { opacity: 1; transform: none; clip-path: none; will-change: auto; }

/* Failsafe + no-JS: reveal everything, no movement. */
.cogno-anim-off [data-anim],
.cogno-anim-off [data-anim="stagger"] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* Reduced motion: keep the gentle fade, drop all positional movement. */
@media (prefers-reduced-motion: reduce) {
	.cogno-anim [data-anim],
	.cogno-anim [data-anim="stagger"] > * { transform: none !important; clip-path: none !important; }
}

/* Base body font: everything scoped under .cogno-page/.cogno-header/.cogno-footer sets
   its own, but UI appended to <body> at runtime (the shared .cogno-modal dialog, e.g.
   committee bio pop-ups) inherits from here — without this it fell back to the UA serif. */
body { font-family: var(--font, Figtree, sans-serif); }

/* Form controls size border-box, so `width: 100%` INCLUDES padding + border — without
   this a padded 100%-wide input overflows its card's inner padding (UA default is
   content-box; the theme has no global reset). Scoped to every cogno surface. */
.cogno-page :is(input, select, textarea, button),
.cogno-header :is(input, select, textarea, button),
.cogno-footer :is(input, select, textarea, button),
.cogno-modal :is(input, select, textarea, button) { box-sizing: border-box; }

/* Full custom-page layout, isolated from the Elementor theme. */
.cogno-page {
	font-family: var(--cogno-font);
	color: var(--cogno-ink);
	padding-top: var(--cogno-section-y);
	padding-bottom: var(--cogno-section-y);
}
.cogno-page__inner {
	max-width: var(--cogno-maxw);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 5vw, 40px);
	padding-right: clamp(20px, 5vw, 40px);
}
/* Base heading defaults for custom pages. Written with :where() so they carry
   ZERO specificity — they set the fluid-token sizes for bare headings, but any
   component heading (.cogno-slide__title, .cogno-cta__heading, …) overrides them
   with a single class. The old Elementor-kit-defeating !important is gone now
   that Elementor is removed. Sizes come from the --cogno-fs-* fluid scale. */
:where(.cogno-page) h1, :where(.cogno-page) h2, :where(.cogno-page) h3, :where(.cogno-page) h4 {
	font-family: var(--cogno-font);
	color: var(--cogno-navy);
	line-height: var(--cogno-lh-heading, 1.2);
	margin: 0 0 .5em;
	font-weight: var(--cogno-weight-normal, 400);
}
:where(.cogno-page) h1 { font-size: var(--cogno-fs-h1); }
:where(.cogno-page) h2 { font-size: var(--cogno-fs-h2); }
:where(.cogno-page) h3 { font-size: var(--cogno-fs-h3); }
:where(.cogno-page) h4 { font-size: var(--cogno-fs-h4); }

/* Brand rule: headings never exceed weight 400 (Figtree). */
.cogno-page h4,
.cogno-card__title, .cogno-card__name, .cogno-slide__title,
.cogno-member__welcome, .cogno-member__name, .cogno-member__subhead,
.cogno-login__title, .ds h1, .ds h2, .ds h3 { font-weight: var(--weight-normal) !important; }
.cogno-page p { color: var(--cogno-ink-soft); line-height: var(--lh-relaxed); margin: 0 0 var(--space-16); }
.cogno-page a:not([class]) { color: var(--c-coral); text-decoration: none; }
.cogno-page > .cogno-page__inner > :first-child { margin-top: 0; }

/* Design-system buttons (reusable, isolated). Variants: --primary / --ghost /
   --outline / --cta (+ header sizing in cogno-layout.css). Every variant carries
   the same state model: hover, :active (pressed), :focus-visible, [disabled].
   The .is-hover / .is-pressed / .is-disabled helpers force a state for the
   /design-system/ specimen page (so states are visible without a real cursor).
   NOTE: base is plain `.cogno-btn` (single class) so variant modifiers like
   --ghost can override border-color by source order — the old `.cogno-page`
   prefix (to out-specify the Elementor kit, now removed) made the transparent
   base border win over --ghost's outline, so the ghost read as a plain link. */
.cogno-btn {
	box-sizing: border-box;   /* height = TOTAL height, border included — <a> matches <button> and inputs */
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
	height: var(--control-h); padding: 0 var(--space-28); border-radius: var(--radius-pill);
	font-weight: var(--weight-semibold); font-size: var(--fs-small); line-height: var(--lh-none);
	text-decoration: none; white-space: nowrap; cursor: pointer; border: var(--border-width) solid transparent;
	font-family: var(--font);
	transition: background .16s ease, border-color .16s ease, color .16s ease, transform .1s ease, box-shadow .16s ease;
}
.cogno-btn .cogno-ico { width: var(--icon-md); height: var(--icon-md); }
.cogno-btn:hover, .cogno-btn.is-hover { transform: translateY(-1px); }
.cogno-btn:active, .cogno-btn.is-pressed { transform: translateY(0); }
.cogno-btn:focus-visible { outline: 3px solid var(--c-blue-tint); outline-offset: 2px; }
.cogno-btn[disabled], .cogno-btn.is-disabled { opacity: .45; pointer-events: none; transform: none; box-shadow: none; }

.cogno-btn--primary { background: var(--c-purple); color: var(--c-white); transition: background var(--dur-base) var(--ease-out), transform .1s ease, box-shadow var(--dur-fast) ease; }
.cogno-btn--primary:hover, .cogno-btn--primary.is-hover { background: var(--c-coral); }
.cogno-btn--primary:active, .cogno-btn--primary.is-pressed { background: var(--c-navy); box-shadow: inset 0 2px 5px rgba(0,0,0,.25); }

/* Secondary / outline button — ALWAYS shows a visible border at rest so it
   reads as a button (not a text link); fills with a tint on hover. */
.cogno-btn--ghost { background: transparent; color: var(--c-blue); border-color: var(--c-blue); }
.cogno-btn--ghost:hover, .cogno-btn--ghost.is-hover { border-color: var(--c-blue-hover); background: var(--c-blue-tint); color: var(--c-blue-hover); }
.cogno-btn--ghost:active, .cogno-btn--ghost.is-pressed { background: color-mix(in srgb, var(--c-blue) 16%, var(--c-white)); border-color: var(--c-blue-hover); }

/* Purple outline — the header Sign In / account toggle secondary. */
.cogno-btn--outline { background: transparent; color: var(--c-purple); border-color: var(--c-purple); }
.cogno-btn--outline:hover, .cogno-btn--outline.is-hover { border-color: var(--c-purple-hover); background: var(--c-purple-tint); color: var(--c-purple-hover); }
.cogno-btn--outline:active, .cogno-btn--outline.is-pressed { background: color-mix(in srgb, var(--c-purple) 16%, var(--c-white)); border-color: var(--c-purple-hover); }

/* Coral CTA (e.g. Donate). Solid coral fill — coral is a fill colour, never an outline border. */
.cogno-btn--cta { background: var(--c-coral); color: var(--c-white); border-color: var(--c-coral); }
.cogno-btn--cta:hover, .cogno-btn--cta.is-hover { background: var(--c-coral-hover); border-color: var(--c-coral-hover); box-shadow: 0 6px 16px rgba(255, 68, 51, .32); }
.cogno-btn--cta:active, .cogno-btn--cta.is-pressed { background: color-mix(in srgb, var(--c-coral) 70%, #000); box-shadow: inset 0 2px 5px rgba(0,0,0,.25); }

/* Outline pills used on cards / photo panels — neutral (black on light,
   white on dark) rather than brand-blue like --ghost. From Figma 157:567 / 393:584. */
.cogno-btn--outline-dark { background: transparent; color: var(--c-vampire, var(--c-vampire)); border-color: var(--c-vampire, var(--c-vampire)); }
.cogno-btn--outline-dark:hover, .cogno-btn--outline-dark.is-hover { background: var(--c-purple); border-color: var(--c-purple); color: var(--c-white); }
.cogno-btn--outline-light { background: transparent; color: var(--c-white); border-color: var(--c-white); }
.cogno-btn--outline-light:hover, .cogno-btn--outline-light.is-hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-purple); }
/* Compact pill for cards (42px vs the default 48px). */
.cogno-btn--pill { height: 42px; padding: 0 var(--space-22); font-size: var(--fs-body); font-weight: var(--weight-normal); }

/* Text/arrow link — the low-emphasis action (e.g. "Read more →"). */
.cogno-link-arrow {
	display: inline-flex; align-items: center; gap: var(--space-xs);
	color: var(--c-blue); font-weight: var(--weight-semibold); font-size: var(--fs-small);
	text-decoration: none; transition: gap .16s ease, color .16s ease;
}
.cogno-link-arrow .cogno-ico { width: var(--icon-sm); height: var(--icon-sm); transition: transform .16s ease; }
.cogno-link-arrow:hover, .cogno-link-arrow.is-hover { color: var(--c-blue-hover); gap: var(--space-sm); }
.cogno-link-arrow:hover .cogno-ico, .cogno-link-arrow.is-hover .cogno-ico { transform: translateX(3px); }

/* Back link — the ONE back-navigation component (single trial / education / news /
   opportunity / archive). Arrow-left in a circle on the LEFT + label. Default =
   blue on a light page; --light = white on a dark hero band. */
.cogno-backlink {
	display: inline-flex; align-items: center; gap: var(--space-xs); width: fit-content;
	margin-bottom: var(--space-lg);   /* clear breathing room between the back link and the content below */
	color: var(--c-blue); font-size: var(--fs-small); font-weight: var(--weight-semibold);
	text-decoration: none; font-family: var(--font);
}
.cogno-backlink__ic {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: var(--cogno-iconbtn, 42px); height: var(--cogno-iconbtn, 42px); border-radius: 50%;
	background: var(--c-surface); box-shadow: 0 2px 10px rgba(0, 31, 83, .08);
	transition: transform .16s ease;
}
.cogno-backlink__ic .cogno-ico { width: var(--icon-md); height: var(--icon-md); }
.cogno-backlink:hover .cogno-backlink__label { text-decoration: underline; }
.cogno-backlink:hover .cogno-backlink__ic { transform: translateX(-3px); }
.cogno-backlink:focus-visible { outline: 3px solid var(--c-blue-tint); outline-offset: 2px; }
.cogno-backlink--light { color: var(--c-white); }
.cogno-backlink--light .cogno-backlink__ic { background: rgba(255, 255, 255, .22); box-shadow: none; color: var(--c-white); }
/* Bottom-of-page repeat (trial single). */
.cogno-backlink--bottom { margin: var(--space-44) 0 0; }

/* Icon-only round button — base lives in cogno-layout.css (header); here only
   the solid brand variant + a forced hover helper for the specimen page. */
.cogno-iconbtn.is-hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-tint); }
.cogno-iconbtn--solid { background: var(--c-purple); border-color: var(--c-purple); color: var(--c-white); }
.cogno-iconbtn--solid:hover, .cogno-iconbtn--solid.is-hover { background: var(--c-purple-hover); border-color: var(--c-purple-hover); }

/* Toggle switch (on/off). Markup: <label class="cogno-switch"><input type="checkbox"><span></span></label> */
.cogno-switch { display: inline-flex; align-items: center; cursor: pointer; }
.cogno-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cogno-switch > span {
	position: relative; width: 46px; height: 26px; border-radius: var(--radius-pill);
	background: var(--c-line-strong); transition: background .18s ease;
}
.cogno-switch > span::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
	border-radius: 50%; background: var(--c-white); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease;
}
.cogno-switch input:checked + span { background: var(--c-purple); }
.cogno-switch input:checked + span::after { transform: translateX(20px); }
.cogno-switch input:focus-visible + span { outline: 3px solid var(--c-blue-tint); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM PAGE (/design-system/) — chrome for the specimen page only.
   ═══════════════════════════════════════════════════════════════════════ */
/* Centres at the full 12-col grid width (~1720). The gating layer skips its
   narrow (1280) content wrapper for this page (see Cogno_Gating::wrap_layout),
   so .ds sits straight in the full-width main and centres cleanly. */
.ds {
	box-sizing: border-box;   /* padding inside max-width → content lands on the grid, no overflow */
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin-inline: auto;
	padding-inline: var(--container-pad);
	counter-reset: sgsec;
}
/* The grid demo already sits inside .ds's padded width, so its own
   container padding would double up — zero it here so the 12 cells align to
   the page edges (the real .cogno-container keeps its padding elsewhere). */
.ds .cogno-container { padding-inline: 0; max-width: none; }
.ds__lead { font-size: var(--fs-subtitle); color: var(--c-ink-soft); max-width: 52rem; margin: 0 0 var(--space-8); }
.ds__lead code { background: var(--c-bg-soft); padding: .1em .4em; border-radius: 4px; font-size: .85em; }

/* Numbered section blocks. */
.ds-sec { padding-top: var(--space-xl); margin-top: var(--space-xl); border-top: 1px solid var(--c-line); }
.ds-sec > h2 { counter-increment: sgsec; font-size: var(--fs-h2); color: var(--c-navy); margin: 0 0 .6em; }
.ds-sec > h2::before { content: counter(sgsec, decimal-leading-zero) "  "; color: var(--c-blue); font-variant-numeric: tabular-nums; }
.ds-sub { font-size: var(--fs-h4); color: var(--c-navy); margin: var(--space-lg) 0 var(--space-sm); }
.ds-hint { color: var(--c-ink-soft); max-width: 52rem; margin: 0 0 var(--space-md); }
.ds-hint code, .ds-sec code { background: var(--c-bg-soft); padding: .1em .4em; border-radius: 4px; font-size: .85em; }
.ds__row { display: flex; flex-wrap: wrap; gap: var(--space-14); align-items: center; margin: 0 0 var(--space-md); }
.ds__row--loose { gap: var(--space-md); }
.ds-box { max-width: 640px; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--space-md) var(--space-24); }
.ds-tokens--spaced { margin-top: var(--space-md); }
.ds-input-demo { max-width: 280px; }
/* Dark chip: shows light-on-dark specimens (outline-light button, light back link) inline. */
.ds-darkchip { display: inline-flex; padding: var(--space-sm); background: var(--c-purple); border-radius: var(--radius); }
.ds-pagination-demo { margin-top: 0; justify-content: flex-start; margin-bottom: var(--space-md); }

/* Colour swatches (base + variations). */
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-md); margin: 0 0 var(--space-md); }
.ds-sw__chip { height: 84px; border-radius: var(--radius-inner); border: 1px solid rgba(0,0,0,.08); display: flex; overflow: hidden; }
.ds-sw__chip > span { flex: 1; height: 100%; }
.ds-sw__token { display: block; margin-top: var(--space-xs); font-size: var(--fs-small); color: var(--c-navy); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ds-sw__hex { display: block; font-size: var(--fs-small); color: var(--c-ink-soft); text-transform: uppercase; }
.ds-sw__label { display: block; font-size: var(--fs-small); color: var(--c-ink-soft); margin-top: var(--space-2); }

/* Fluid type scale preview. */
.ds-typescale { display: flex; flex-direction: column; gap: var(--space-18); margin: var(--space-12) 0 var(--space-4); }
.ds-typescale__row { display: flex; align-items: baseline; gap: var(--space-24); flex-wrap: wrap; border-bottom: 1px dashed var(--c-line); padding-bottom: var(--space-16); }
.ds-typescale__meta { flex: 0 0 240px; }
.ds-typescale__meta code { display: block; font-size: var(--fs-small); color: var(--c-blue); }
.ds-typescale__meta span { display: block; font-size: var(--fs-small); color: var(--c-ink-soft); margin-top: var(--space-2); }
.ds-typescale__sample { flex: 1 1 320px; color: var(--c-navy); font-weight: var(--weight-normal); line-height: var(--lh-heading); }

/* Icon set — every glyph in a uniform box so widths/weights read consistent. */
.ds-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-sm); margin: 0 0 var(--space-md); }
.ds-icon { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-16) var(--space-8); border: 1px solid var(--c-line); border-radius: var(--radius-inner); color: var(--c-navy); text-align: center; }
.ds-icon .cogno-ico { width: var(--icon-lg); height: var(--icon-lg); }
.ds-icon code { font-size: var(--fs-small); color: var(--c-ink-soft); word-break: break-word; }

/* Button / control state matrix. */
.ds-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); margin: 0 0 var(--space-md); }
.ds-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10); }
.ds-state > small { font-size: var(--fs-small); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-ink-soft); font-weight: var(--weight-semibold); }

/* 12/6/4 grid demo. */
.ds-grid { row-gap: var(--space-10); margin: var(--space-12) 0 var(--space-4); }
.ds-grid__cell {
	background: var(--c-bg-soft);
	border: 1px dashed var(--c-blue);
	border-radius: 6px;
	padding: var(--space-16) 0;
	text-align: center;
	font-size: var(--fs-small);
	font-weight: var(--weight-semibold);
	color: var(--c-blue);
	grid-column: span 1;
}
@media (max-width: 1024px) { .ds-grid__cell:nth-child(n+7) { display: none; } }
@media (max-width: 736px)  { .ds-grid__cell:nth-child(n+5) { display: none; } }
.ds-measure { margin-top: var(--space-10); height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--c-purple-tint), var(--c-purple-tint) 2px, transparent 2px, transparent 10px); border: 1px solid var(--c-line-strong); }

/* Spacing scale. */
.ds-spacing { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 680px; margin: 0 0 var(--space-10); }
.ds-space { display: flex; align-items: center; gap: var(--space-sm); }
.ds-space__bar { height: 18px; background: var(--c-purple); border-radius: 4px; flex: none; }
.ds-space code { color: var(--c-navy); font-size: var(--fs-small); }
.ds-space b { color: var(--c-ink-soft); font-weight: var(--weight-semibold); }

/* Token reference list. */
.ds-tokens { columns: 2; column-gap: var(--space-xl); max-width: 820px; margin: 0; padding: 0; list-style: none; }
.ds-tokens li { break-inside: avoid; margin: 0 0 var(--space-6); font-size: var(--fs-small); color: var(--c-ink-soft); }
.ds-tokens code { background: var(--c-bg-soft); padding: .1em .4em; border-radius: 4px; color: var(--c-navy); }
@media (max-width: 736px) { .ds-tokens { columns: 1; } }

.cogno-grid {
	display: grid;
	gap: var(--space-md) var(--gutter);   /* column gap = the grid gutter → card seams sit on the 12-col tracks */
	grid-template-columns: repeat(3, 1fr);
}
.cogno-cols-1 { grid-template-columns: 1fr; }
.cogno-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cogno-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cogno-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive ladder — aligned to the Elementor site breakpoints
   (Laptop 1440 / Tablet Portrait 1024 / Mobile Portrait 736). Each column choice
   cascades DOWN one step per breakpoint, so picking "4" gives 4 → 3 → 2 → 1:
     cols-4: 4 (desktop) · 3 (≤1440 laptop) · 2 (≤1024 tablet) · 1 (≤736 mobile)
     cols-3: 3            · 3              · 2               · 1
     cols-2: 2            · 2              · 2               · 1 */
@media (max-width: 1440px) {
	.cogno-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
	.cogno-cols-3, .cogno-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 736px) {
	/* One item per row on mobile for every listing (incl. committee/people). */
	.cogno-grid,
	.cogno-grid.cogno-grid--card-committee,
	.cogno-grid.cogno-people { grid-template-columns: 1fr; }
}

.cogno-card {
	display: flex;
	flex-direction: column;
	background: var(--cogno-surface);
	border: 1px solid var(--cogno-line);
	border-radius: var(--cogno-radius);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}
.cogno-card:hover {
	box-shadow: var(--cogno-shadow-card);
	transform: translateY(-2px);
}
/* Uniform 16:9 media box on every card (design system) — news re-asserts the same
   ratio in its own block; committee portraits override to the padded square below. */
.cogno-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden; background: var(--c-clouds); }
/* WP core sets :where(img[class*=wp-image-]){height:auto} (specificity 0,0,1); our
   single class beats it, so the card image fills + covers its media box (no !important). */
.cogno-card__media img,
.cogno-card__img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cogno-card__body { padding: var(--space-16) var(--space-18); }
.cogno-card__title { margin: 0 0 var(--space-6); font-size: var(--fs-body); line-height: var(--lh-snug); }
.cogno-card__title a { text-decoration: none; color: inherit; }
.cogno-card__email { font-size: var(--fs-small); word-break: break-word; }
.cogno-card__excerpt { margin: var(--space-6) 0 0; font-size: var(--fs-small); opacity: .8; }

/* Publication card */
.cogno-card--publication .cogno-card__body { padding: var(--space-20) var(--space-22); display: flex; flex-direction: column; gap: var(--space-8); }
.cogno-card__tag {
	display: inline-block;
	font-size: var(--fs-caption);   /* 13px — compact date/tag pill (the one place smaller than --fs-small) */
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--c-blue);
	background: var(--c-clouds);
	padding: var(--space-2) var(--space-8);
	border-radius: 999px;
	margin-bottom: var(--space-10);
}
/* ── Publication card — REFINED HIERARCHY ─────────────────────────────────────
   Eyebrow (category + trial chip) → readable sentence-case title (focal, 3-line
   clamp) → muted authors (2-line clamp) → journal reference (emphasised meta line)
   → Read more. Body is a flex column (gap rhythm set on __body above). */
.cogno-card--publication .cogno-card__terms { margin: 0; }   /* eyebrow row — sits first */
/* Title = focal point: sentence case (was ALL CAPS), navy, clamp to 3 lines. */
.cogno-card--publication .cogno-card__title {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-h4);
	line-height: var(--lh-snug);
	color: var(--c-navy);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cogno-card--publication .cogno-card__title a { color: var(--c-navy); text-decoration: none; }
.cogno-card--publication .cogno-card__title a:hover { color: var(--c-blue); }
/* Authors: subordinate — muted, tight, clamp to 2 lines (full list is on the article). */
.cogno-card__authors {
	margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--c-ink-soft);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Journal reference: its own emphasised meta line. */
.cogno-card__cite { margin: 0; font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--c-navy); font-weight: var(--weight-medium); }
.cogno-card__cite p { margin: 0; }
/* Read more pinned to the bottom (gap handles the rest of the rhythm). */
.cogno-card--publication .cogno-card__more { margin-top: auto; padding-top: var(--space-6); }
/* Event-card time · location meta (unchanged). */
.cogno-card__meta { margin: var(--space-8) 0 0; font-size: var(--fs-small); font-weight: var(--weight-semibold); opacity: .7; }
/* Card "Read more" = the design-system text/arrow link (.cogno-link-arrow spec):
   text first, icon on the RIGHT, gap+arrow nudge on hover. Only the card-specific
   top margin lives here. */
.cogno-card .cogno-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-14);
	font-size: var(--fs-small);
	font-weight: var(--weight-semibold);
	color: var(--c-blue);
	text-decoration: none;
	transition: gap .16s ease, color .16s ease;
}
.cogno-card .cogno-card__more:hover { color: var(--c-blue-hover); gap: var(--space-sm); }
.cogno-card .cogno-card__more svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); transition: transform .16s ease; }
.cogno-card .cogno-card__more:hover svg { transform: translateX(3px); }

/* Member dashboard + login
   Buttons are real .cogno-btn variants in the markup (quick-links = ghost pills,
   Update password = primary, Log out = purple outline; class-members.php).
   Elementor is gone, so nothing here needs !important any more. */
/* Width comes from the grid column span on .cogno-sec__container--page (8 of 12 cols). */
.cogno-member { max-width: 100%; }
/* Headings inherit .cogno-page h2/h3 typography tokens — only spacing is set here. */
.cogno-member__name { margin: 0 0 var(--space-md); }
.cogno-member__welcome { margin: 0 0 var(--space-md); }
.cogno-member__subhead { margin: var(--space-lg) 0 var(--space-sm); }
.cogno-member__links { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-lg); }
.cogno-member__grid { display: grid; grid-template-columns: 220px 1fr; gap: 0; margin: 0; border: var(--border-width) solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.cogno-member__grid dt { padding: var(--space-sm) var(--space-md); background: var(--c-bg); font-weight: var(--weight-semibold); color: var(--c-ink); border-bottom: var(--border-width) solid var(--c-line); }
.cogno-member__grid dd { padding: var(--space-sm) var(--space-md); margin: 0; color: var(--c-ink-soft); border-bottom: var(--border-width) solid var(--c-line); }
.cogno-member__grid dt:last-of-type, .cogno-member__grid dd:last-of-type { border-bottom: none; }
.cogno-member__pw { margin-top: var(--space-lg); border: var(--border-width) solid var(--c-line); border-radius: var(--radius); padding: 0 var(--space-md); }
.cogno-member__pw summary { display: flex; align-items: center; gap: var(--space-xs); cursor: pointer; font-weight: var(--weight-semibold); color: var(--c-ink); padding: var(--space-sm) 0; list-style: none; }
.cogno-member__pw summary::-webkit-details-marker { display: none; }        /* replace the default ▶ with Lucide icons */
.cogno-member__pw summary .cogno-ico { width: var(--icon-md); height: var(--icon-md); }
.cogno-member__pw summary .cogno-member__pw-lock { color: var(--c-purple); }
.cogno-member__pw summary .cogno-member__pw-caret { margin-left: auto; color: var(--c-ink-soft); transition: transform var(--dur-fast) var(--ease-out); }
.cogno-member__pw[open] summary .cogno-member__pw-caret { transform: rotate(180deg); }
.cogno-pwform { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-end; padding: var(--space-xs) 0 var(--space-md); }
.cogno-pwform label { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-small); color: var(--c-ink-soft); }
.cogno-member__notice { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-inner); font-size: var(--fs-small); margin: 0 0 var(--space-sm); }
.cogno-member__notice--ok { background: var(--c-success-bg); color: var(--c-success-fg); }
.cogno-member__notice--err { background: var(--c-error-bg); color: var(--c-error-fg); }
.cogno-login__title { margin: 0 0 var(--space-md); }   /* size/colour from .cogno-page h2 tokens */
/* .cogno-member scope beats `.cogno-page p { margin: 0 0 1em }` (which was resetting margin-top to 0). */
.cogno-member .cogno-member__logout { margin-top: var(--space-lg); }
/* "Forgot your password?" stays a plain text link. */
.cogno-login__lost a { color: var(--c-blue); text-decoration: underline; }
.cogno-login__lost a:hover { color: var(--c-navy); }
.cogno-login { max-width: 100%; }   /* width from the 5-col grid span on --page */
.cogno-login form { margin: 0; }
.cogno-login p { margin: 0 0 var(--space-sm); }        /* even rhythm between form rows */
.cogno-login .login-remember { margin-bottom: var(--space-md); }
.cogno-login .login-remember label { display: flex; align-items: center; gap: var(--space-xs); font-weight: var(--weight-normal); margin: 0; }
.cogno-login__lost { margin: var(--space-md) 0 0; }
.cogno-login label { display: block; font-weight: var(--weight-semibold); color: var(--c-ink); margin-bottom: var(--space-6); }
/* Text inputs — one shared control spec for the login form and the password-reset row.
   Class+attribute specificity wins over the generic box-sizing reset; no !important needed. */
.cogno-login input[type="text"],
.cogno-login input[type="password"],
.cogno-login input[type="email"],
.cogno-pwform input {
	width: 100%;
	height: var(--control-h);
	padding: 0 var(--control-pad-x);
	border: var(--border-width) solid var(--c-line-strong);
	border-radius: var(--radius-inner);
	background: var(--c-surface);
	font-family: var(--font);
	font-size: var(--text);
	color: var(--c-ink);
	-webkit-appearance: none; appearance: none;
}
.cogno-login input[type="text"],
.cogno-login input[type="password"],
.cogno-login input[type="email"] { margin-bottom: var(--space-sm); }   /* row rhythm on the stacked login form */
.cogno-pwform input { min-width: 200px; }                              /* keep the flex row from collapsing */
.cogno-login input:focus-visible, .cogno-pwform input:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.cogno-login input[type="submit"].cogno-btn { -webkit-appearance: none; appearance: none; width: auto; }  /* strip native submit chrome */
@media (max-width: 560px){ .cogno-member__grid { grid-template-columns: 1fr; } .cogno-member__grid dt { border-bottom: none; padding-bottom: 0; background: var(--c-surface); } }

/* Single-page field output */
.cogno-field { margin: 0 0 var(--space-12); }
.cogno-field__label { font-weight: var(--weight-semibold); color: var(--c-navy); }
.cogno-field__value { color: var(--c-ink-soft); }
.cogno-field--html .cogno-field__value p { margin: 0 0 var(--space-10); }
.cogno-field__img { max-width: 100%; height: auto; border-radius: 8px; }

/* ====================================================================
   Interactive elements (buttons, inputs, selects, forms)
   ====================================================================
   Historically these needed !important to beat the Elementor kit +
   reset.css. Elementor is deleted, so the defensive !important is gone —
   our single classes (0,1,0) already beat WP core's :where() (0,0,1) and
   bare-element rules. Style them with plain class selectors + tokens. */

/* Search form (header popup) */
.cogno-searchform { position: relative; display: flex; align-items: center; gap: var(--space-10); max-width: 640px; margin: 0 auto; }
.cogno-searchform .cogno-search-icon { position: absolute; left: 18px; color: var(--c-blue); pointer-events: none; }
.cogno-searchform__input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 var(--space-18) 0 var(--space-48); border: var(--border-width) solid var(--cogno-line-strong); border-radius: var(--cogno-radius-pill); font-size: var(--fs-body); background: var(--cogno-surface); color: var(--cogno-ink); font-family: var(--cogno-font); }
.cogno-searchform__btn { flex: none; height: 52px; padding: 0 var(--space-24); border: none; border-radius: 999px; background: var(--c-purple); color: var(--c-white); font-weight: var(--weight-semibold); cursor: pointer; }
.cogno-searchform__btn:hover { background: var(--c-purple-hover); }

/* Post terms (category links) */
.cogno-terms { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs); }
.cogno-term { font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--c-blue); text-decoration: none; background: var(--c-clouds); padding: var(--space-2) var(--space-12); border-radius: 999px; }
.cogno-term:hover { background: var(--c-blue); color: var(--c-white); }

/* ============================================================================
   HOME HERO SLIDER — Figma node 127:1566.
   A full-bleed brand-purple band that fades to light blue at the bottom; left =
   rotating text (display headline + subtitle + white ghost pill button); each slide's
   photo is a background on .cogno-slide::before (right-anchored cutout on desktop, a
   bottom band that fades into the purple on ≤1024); pill pagination dots bottom-left.
   Slides cross-fade — cogno-slider.js toggles .is-active on .cogno-slide and
   .cogno-hero__dot[data-index]. Built on the .cogno-container 12/6/4 grid.
   ============================================================================ */
.cogno-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--c-purple);
	/* Diagonal brand wash: deepest at the bottom-left (behind the text), lightening to a
	   periwinkle glow on the right (behind the photo). A base left→right gradient
	   + a deep navy pool anchored to the bottom-left corner. */
	background-image:
		radial-gradient(120% 125% at 0% 100%, rgba(0, 15, 55, .55) 0%, rgba(0, 15, 55, 0) 58%),
		linear-gradient(100deg, var(--c-purple) 0%, var(--c-purple) 24%, var(--c-periwinkle) 100%);
}
/* The sticky white header sits ON TOP of the hero: pull the hero up by the header
   height so the purple runs to the very top behind the header (no gap). The track's
   top padding already clears the header so the text stays below it. */
.cogno-page.cogno-flex > .cogno-hero:first-child {
	margin-top: calc(-1 * var(--cogno-header-h, 72px));
}
/* Stacked cross-fade via a single grid cell: the track auto-sizes to the tallest
   slide (all slides share grid-area 1/1); min-height gives the airy band. */
.cogno-hero__track {
	display: grid;
	align-content: center;
	min-height: 60vh;   /* airy band (min); grows if a slide's content is taller */
	/* Top padding clears the overlay header (which sits ON TOP of the hero). */
	padding-block: calc(var(--cogno-header-h, 72px) + clamp(28px, 4vw, 72px)) clamp(48px, 6vw, 104px);
	cursor: grab;
}
.cogno-hero.is-dragging, .cogno-hero.is-dragging .cogno-hero__track { cursor: grabbing; user-select: none; }

/* Each slide IS the 12-col container grid; all share one cell so they overlay.
   isolation:isolate gives each slide its own stacking context so its layers order
   predictably regardless of the sibling slides stacked in the same cell:
   backdrop (::after, z-index -1) < front-tile cutout (::before, 0) < text (1). */
.cogno-slide {
	grid-area: 1 / 1;
	align-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease;
	isolation: isolate;
}
.cogno-slide.is-active { opacity: 1; visibility: visible; }

/* ----- Optional per-slide full-bleed backdrop (slide "Background image") -----
   Covers the whole hero band behind this slide, UNDER a left→right purple scrim so
   the left-aligned heading stays legible. Sits behind the front-tile cutout and text.
   Its containing block is .cogno-hero (position:relative), so it's full-bleed.
   Only painted when the slide carries --cogno-bg. */
.cogno-slide[style*="--cogno-bg"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(100deg, var(--c-purple) 0%, var(--c-purple) 22%, color-mix(in srgb, var(--c-purple) 55%, transparent) 48%, transparent 72%),
		var(--cogno-bg);
	background-size: auto, cover;
	background-position: center, center;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* ----- Text (left half) ----- */
.cogno-slide__text {
	position: relative;
	z-index: 1;
	grid-column: 1 / 7;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2vw, 30px);
}
/* Scoped under .cogno-hero (two classes) so the white text beats the design-system
   base rules — which are now :where(.cogno-page) (ZERO specificity) / .cogno-page p,
   both easily out-specified, so no !important needed. */
.cogno-hero .cogno-slide__title {
	margin: 0;
	font-family: var(--cogno-font);
	font-weight: var(--cogno-weight-normal, 400);
	font-size: var(--cogno-fs-display);
	line-height: var(--cogno-lh-tight, 1.1);
	color: var(--c-white);
}
.cogno-hero .cogno-slide__sub {
	margin: 0;
	font-family: var(--cogno-font);
	font-size: var(--cogno-fs-subtitle);
	line-height: var(--cogno-lh-body, 1.5);
	color: var(--c-white);
}
/* The hero button is a design-system white outline pill (.cogno-btn--outline-light);
   only its placement in the slide column lives here. */
.cogno-slide__btn { align-self: flex-start; }

/* ----- Per-slide background photo -----
   Each .cogno-slide carries its image as the data-only custom property --cogno-slide-bg
   (set in section-slider.php). A ::before fills the WHOLE hero (its containing block is
   .cogno-hero, position:relative) and cross-fades with the slide's opacity. A purple
   scrim (top layer) fades left→transparent so the heading always sits on a clean field.
   Every slide photo is a feathered cutout, so it's CONTAINed and anchored right — it
   floats on the band and its soft edges melt into the purple (Figma 127:1566), rather
   than being stretched edge-to-edge. Slide 1 anchors its photo bottom-right (its cupped
   hands sit at the band's base — see below). ≤1024 reverts to a bottom band. */
.cogno-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(90deg, var(--c-purple) 0%, var(--c-purple) 18%, color-mix(in srgb, var(--c-purple) 55%, transparent) 42%, transparent 62%),
		var(--cogno-slide-bg, none);
	/* Two layers: the purple scrim COVERS (anchored left) so the heading always sits on a
	   clean field; the feathered photo is CONTAINed and anchored right so it floats on the
	   band and its soft edges melt into the purple. */
	background-size: cover, contain;
	background-position: left center, right center;
	background-repeat: no-repeat;
	pointer-events: none;
}
/* Slide 1's photo is a transparent cutout (subject bottom-right): show it whole and
   anchor it right so the hands/brain sit on the right and the purple field stays clean.
   Desktop only — ≤1024 reverts to the cover+veil rule above. */
@media (min-width: 1025px) {
	.cogno-hero__track .cogno-slide::before {
		background-size: cover, contain;
		background-position: left center, right bottom;
	}

	.cogno-hero__track .cogno-slide:nth-child(2):before{
		background-size: 50%;
        background-position: left center, right center;
	}

	
}

/* ----- Pill pagination dots, bottom-left — aligned to grid col 1 (same metrics as
   .cogno-container so the first pill lines up with the slide text's left edge).
   box-sizing:border-box is REQUIRED: without it the padding-inline sits OUTSIDE the
   max-width and pushes the row one --container-pad left of col 1. ----- */
.cogno-hero__dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: clamp(28px, 4vw, 60px);
	z-index: 4;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	padding-inline: var(--container-pad);
	display: flex;
	gap: var(--space-4);
}
.cogno-hero__dot {
	width: 17px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 100px;
	background: var(--c-purple);
	opacity: .2;
	cursor: pointer;
	transition: width .3s ease, opacity .3s ease;
}
.cogno-hero__dot.is-active { width: 60px; opacity: 1; }

/* ----- Responsive: ≤1024 stacks text on top with the photo as a bottom band ----- */
@media (max-width: 1024px) {
	/* Mobile stack (Figma): heading/sub/button centred at the TOP, the photo as a
	   full-width band at the BOTTOM whose top edge fades up into the purple. */
	/* minmax(0,1fr) caps the single track column at the viewport width so long
	   headings wrap instead of stretching the column past the screen (else clipped). */
	.cogno-hero__track { align-content: start; min-height: clamp(560px, 92vh, 720px); grid-template-columns: minmax(0, 1fr); }
	.cogno-slide::before {
		inset: auto 0 0 0;      /* bottom band only (overrides the desktop inset:0) */
		height: 54%;
		background-image: var(--cogno-slide-bg-mob, var(--cogno-slide-bg, none));
		background-size: cover;
		background-position: center;
		/* Fade the band's top edge to transparent so it melts into the purple above. */
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
		        mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
	}

	.cogno-slide:nth-child(2)::before{
		height: 40%;
	}

	.cogno-slide { align-content: start; padding-top: var(--container-pad); }
	.cogno-slide__text {
		grid-column: 1 / -1;
		max-width: none;
		align-items: center;
		text-align: center;
	}
	.cogno-slide__btn { align-self: center; }
	.cogno-hero__dots { justify-content: center; }
	/* Backdrop slides: scrim from the TOP (the heading is centred up top here) and drop
	   the front-tile bottom band so the two photos don't stack. */
	.cogno-slide[style*="--cogno-bg"]::after {
		background-image:
			linear-gradient(to bottom, var(--c-purple) 0%, color-mix(in srgb, var(--c-purple) 60%, transparent) 34%, transparent 72%),
			var(--cogno-bg);
		background-position: top center, center;
	}
	.cogno-slide[style*="--cogno-bg"]::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cogno-slide { transition: none; }
}

/* People section (widget-owned heading + padded body — replaces the Chairs/Speakers container) */
.cogno-people-section { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-28); }
.cogno-people-section__head { background: var(--c-periwinkle); padding: var(--space-16) clamp(20px, 4vw, 36px); }
.cogno-people-section__title { color: var(--c-white); margin: 0; font-size: var(--fs-h3); font-weight: var(--weight-normal); }
.cogno-people-section__body { background: var(--c-clouds); padding: clamp(22px, 3vw, 34px) clamp(20px, 4vw, 36px); }

/* People with bio (event single: chairs/speakers) — photo left, details + bio right. */
.cogno-people--bio { display: flex; flex-direction: column; }
.cogno-person-row { display: flex; gap: var(--space-24); align-items: flex-start; }
/* Divider + generous spacing between people so long multi-paragraph bios don't blur together. */
.cogno-person-row + .cogno-person-row { margin-top: var(--space-40); padding-top: var(--space-40); border-top: 1px solid var(--c-line-strong); }
.cogno-person-row__media { flex: 0 0 170px; }
.cogno-person-row__media .cogno-card__img { width: 170px; height: 170px; object-fit: cover; border-radius: var(--cogno-radius-inner); }
.cogno-person-row__name { font-size: var(--fs-h4); font-weight: var(--weight-normal); color: var(--c-periwinkle); margin: 0 0 var(--space-4); }
.cogno-person-row__title { color: var(--c-navy); margin: 0 0 var(--space-12); line-height: var(--lh-snug); }
.cogno-person-row__bio { color: var(--c-ink-soft); line-height: var(--lh-relaxed); }
.cogno-person-row__bio p { margin: 0 0 var(--space-10); }
.cogno-person-row__bio p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .cogno-person-row { flex-direction: column; } .cogno-person-row__media { flex-basis: auto; } }

/* Modal */
.cogno-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.cogno-modal.is-open { display: flex; align-items: center; justify-content: center; }
.cogno-modal__overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-navy) 55%, transparent); backdrop-filter: blur(3px); }
.cogno-modal__dialog {
	position: relative; z-index: 1; max-width: var(--cogno-modal-maxw); width: calc(100% - var(--space-40));
	margin: var(--space-24) auto; max-height: 88vh;
	display: flex; flex-direction: column;
	background: var(--c-white); border-radius: var(--radius-lg);
	padding: clamp(var(--space-28), 4vw, var(--space-48));
	box-shadow: 0 30px 80px color-mix(in srgb, var(--c-navy) 32%, transparent); outline: none;
}
/* Body owns the scroll so the absolute close button stays pinned (min-height:0 lets the flex item shrink). */
.cogno-modal__body { overflow-y: auto; min-height: 0; }
.cogno-modal__dialog--wide { max-width: var(--cogno-modal-maxw-wide); }
/* Entrance — overlay fades in, dialog pops up + settles. CSS keyframes play on the
   display:none→block switch (no JS needed). Reduced-motion: fade only, no movement. */
.cogno-modal.is-open .cogno-modal__overlay { animation: cogno-modal-fade var(--dur-base) var(--ease-out) both; }
.cogno-modal.is-open .cogno-modal__dialog  { animation: cogno-modal-pop var(--dur-reveal) var(--ease-out) both; }
@keyframes cogno-modal-fade { from { opacity: 0; } }
@keyframes cogno-modal-pop { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@media (prefers-reduced-motion: reduce) {
	.cogno-modal.is-open .cogno-modal__dialog { animation-name: cogno-modal-fade; }
}
/* Close button — a centred flex circle; the × spins on hover. */
.cogno-modal__close {
	position: absolute; top: var(--space-16); right: var(--space-16);
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; min-width: 0; flex: none;
	padding: 0;
	border: none; border-radius: 50%;
	background: var(--c-bg-soft); color: var(--c-navy);
	font-family: var(--cogno-font); font-size: var(--fs-h3); font-weight: var(--weight-normal);
	line-height: var(--lh-none); text-align: center;
	cursor: pointer; transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-base) var(--ease-out);
}
.cogno-modal__close:hover { background: var(--c-blue); color: var(--c-white); transform: rotate(90deg); }
.cogno-modal__close:focus-visible { outline: 3px solid var(--c-blue-tint); outline-offset: 2px; }
/* Video trigger + responsive embed inside the modal */
.cogno-video--left { text-align: left; }
.cogno-video--center { text-align: center; }
.cogno-video--right { text-align: right; }
.cogno-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.cogno-video-embed iframe,
.cogno-video-embed video,
.cogno-video-embed object,
.cogno-video-embed embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cogno-profile { display: flex; gap: clamp(var(--space-22), 3vw, var(--space-32)); align-items: flex-start; }
.cogno-profile__media { flex: 0 0 clamp(120px, 15vw, 168px); }
.cogno-profile__media .cogno-card__img {
	width: 100%; aspect-ratio: 1; height: auto; object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 30px color-mix(in srgb, var(--c-navy) 18%, transparent);
}
.cogno-profile__name { font-size: var(--fs-h3); color: var(--c-navy); margin: 0 0 var(--space-4); font-weight: var(--weight-normal); line-height: var(--lh-snug); }
.cogno-profile__role { color: var(--c-blue); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
/* Location as a subtle pill under the role. */
.cogno-profile__loc { display: inline-flex; align-items: center; color: var(--c-ink-soft); font-size: var(--fs-small); margin: 0 0 var(--space-16); }
/* A hairline rule separates the header (name/role/loc) from the bio. */
.cogno-profile__bio { color: var(--c-ink-soft); line-height: var(--lh-relaxed); padding-top: var(--space-16); border-top: 1px solid var(--c-line); }
.cogno-profile__bio p { margin: 0 0 var(--space-10); }
.cogno-profile__bio p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .cogno-profile { flex-direction: column; align-items: center; text-align: center; } .cogno-profile__bio { text-align: left; } }

/* Committee member card */
.cogno-card--committee { text-align: center; }
.cogno-card--clickable { cursor: pointer; }
.cogno-card--clickable:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.cogno-card__media--portrait { aspect-ratio: 1 / 1; background: var(--c-bg-soft); }
/* Image sits inside the card with breathing room and its own rounding */
.cogno-card--committee .cogno-card__media--portrait { padding: var(--cogno-card-pad) var(--cogno-card-pad) 0; background: var(--c-white);}
.cogno-card--committee .cogno-card__media--portrait img { border-radius: var(--cogno-radius-inner); }
.cogno-card--committee .cogno-card__body { padding: calc(var(--cogno-card-pad) - 2px) var(--cogno-card-pad) calc(var(--cogno-card-pad) + 4px); }
.cogno-card__name { font-size: var(--fs-body); margin: 0 0 var(--space-4); color: var(--cogno-navy); }
.cogno-card__role { margin: 0 0 var(--space-6); font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--cogno-blue); line-height: var(--lh-snug); }
.cogno-card__loc-badge {
	display: inline-block;
	font-size: var(--fs-small);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--c-white);
	background: var(--cogno-blue);
	padding: var(--space-2) var(--space-10);
	border-radius: var(--cogno-radius-pill);
	margin-bottom: var(--space-10);
}

/* Newsletter card */
.cogno-card--newsletter .cogno-card__title { font-size: var(--fs-body); margin: 0 0 var(--space-12); }

/* Event + News cards — one shared title treatment (navy, blue on hover) so the two
   listings read as the same component. */
.cogno-card__img--placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--c-bg-soft), var(--c-clouds)); }
.cogno-card--event .cogno-card__title,
.cogno-card--news .cogno-card__title { font-size: var(--fs-body); }
.cogno-card--event .cogno-card__title a,
.cogno-card--news .cogno-card__title a { color: var(--c-navy); text-decoration: none; }
.cogno-card--event .cogno-card__title a:hover,
.cogno-card--news .cogno-card__title a:hover { color: var(--c-blue); }

/* Trial card */
.cogno-card__trialhead {
	display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-10);
	background: var(--c-clouds);
	/* Bleed flush to the card's inner edge: the negative margin cancels the trial card's
	   body padding exactly (top --space-16, sides --space-18) so the band lines up. */
	margin: calc(var(--space-16) * -1) calc(var(--space-18) * -1) var(--space-14);
	padding: var(--space-12) var(--space-18);
	border-radius: var(--cogno-radius) var(--cogno-radius) 0 0;
}
/* Head band adopts the active status tint so band + status pill read as one
   (pill shares the same -bg token, so it blends into the band — coloured text only). */
.cogno-card__trialhead:has(.cogno-status--open)           { background: var(--c-success-bg); }
.cogno-card__trialhead:has(.cogno-status--in-follow-up)   { background: var(--c-warning-bg); }
.cogno-card__trialhead:has(.cogno-status--in-development) { background: var(--c-warning-bg); }
.cogno-card__trialhead:has(.cogno-status--completed)      { background: var(--c-neutral-bg); }
.cogno-card__trialhead:has(.cogno-status--closed)         { background: var(--c-error-bg); }
.cogno-card__tumor { font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--c-navy); line-height: var(--lh-snug); }
.cogno-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-10); }
.cogno-card__status {
	font-size: var(--fs-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase;
	padding: var(--space-2) var(--space-10); border-radius: 999px; color: var(--c-success-fg); background: var(--c-success-bg);
}
.cogno-status--completed { color: var(--c-neutral-fg); background: var(--c-neutral-bg); }
.cogno-status--closed { color: var(--c-error-fg); background: var(--c-error-bg); }
.cogno-status--in-development { color: var(--c-warning-fg); background: var(--c-warning-bg); }
.cogno-status--in-follow-up { color: var(--c-warning-fg); background: var(--c-warning-bg); }
.cogno-card__states { font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--c-ink-soft); }
.cogno-card--trial .cogno-card__title { font-size: var(--fs-body); }
.cogno-card--trial .cogno-card__title a { color: var(--c-navy); text-decoration: none; }
.cogno-card--trial .cogno-card__title a:hover { color: var(--c-blue); }
/* Equal-height trial cards with "Trial Details" pinned to the bottom (news-card pattern). */
.cogno-card--trial { height: 100%; }
.cogno-card--trial .cogno-card__body { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.cogno-card--trial .cogno-card__trialhead { align-self: stretch; }
.cogno-card--trial .cogno-card__more { margin-top: auto; padding-top: var(--space-sm); }

/* Filter / search bar — single row, exactly as wide as the results below it */
.cogno-listing--filtered { width: 100%; }
.cogno-filterbar {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-sm);
	align-items: center;
	width: 100%;
	margin-bottom: var(--space-24);
}
/* Form controls — plain class selectors + tokens (the Elementor kit form-control
   reset that once required !important here is deleted). */
.cogno-filter,
.cogno-mfilter,
.cogno-sortsel {
	flex: 0 1 240px;       /* may shrink, capped width, so it never pushes the bar wider */
	min-width: 0;
	max-width: 100%;
	height: var(--control-h);
	padding: 0 var(--space-40) 0 var(--space-18);
	border: var(--border-width) solid var(--cogno-line-strong);
	border-radius: var(--cogno-radius-pill);
	background-color: var(--cogno-surface);
	font-size: var(--fs-small);
	line-height: 46px;
	color: var(--cogno-ink);
	font-family: var(--cogno-font);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	text-overflow: ellipsis;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231f58e6' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}
.cogno-search-wrap {
	flex: 1 1 auto;        /* takes the remaining width */
	min-width: 0;
	position: relative;
	display: flex;
	align-items: center;
}
.cogno-search-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--c-blue);
	pointer-events: none;
	z-index: 1;
}
.cogno-search {
	width: 100%;
	height: var(--control-h);
	padding: 0 var(--space-20) 0 var(--space-48);   /* left room for the search icon */
	border: var(--border-width) solid var(--cogno-line-strong);
	border-radius: var(--cogno-radius-pill);
	background-color: var(--cogno-bg-soft);
	font-size: var(--fs-small);
	color: var(--cogno-ink);
	font-family: var(--cogno-font);
}
.cogno-filter:focus-visible,
.cogno-mfilter:focus-visible,
.cogno-sortsel:focus-visible,
.cogno-search:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }

/* Custom dropdown (themed option list) — replaces the native <select> popup. */
.cogno-dd { position: relative; flex: 0 1 240px; min-width: 0; }
.cogno-dd__native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
.cogno-dd__btn {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-10);
	width: 100%; height: var(--control-h); padding: 0 var(--space-16) 0 var(--space-18);
	border: var(--border-width) solid var(--cogno-line-strong); border-radius: var(--cogno-radius-pill);
	background: var(--cogno-surface); color: var(--cogno-ink); font-size: var(--fs-small); font-family: var(--cogno-font); cursor: pointer;
	text-align: left;
}
.cogno-dd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cogno-dd__chev { color: var(--cogno-blue); flex: none; transition: transform .18s ease; }
.cogno-dd.is-open .cogno-dd__chev { transform: rotate(180deg); }
.cogno-dd.is-open .cogno-dd__btn { border-color: var(--cogno-blue); }
.cogno-dd__menu {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
	display: none; padding: var(--space-6); max-height: 300px; overflow-y: auto;
	background: var(--cogno-surface); border: 1px solid var(--cogno-line); border-radius: var(--cogno-radius);
	box-shadow: var(--cogno-shadow);
	/* Fade + scale down from the trigger (top), in and out. @starting-style + allow-discrete
	   animate the display:none↔block flip; degrades to instant on older browsers. */
	transform-origin: top center; opacity: 0; transform: translateY(-6px) scale(.98);
	transition: opacity var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out),
	            display var(--dur-base) allow-discrete;
}
.cogno-dd.is-open .cogno-dd__menu { display: block; opacity: 1; transform: none; }
@starting-style {
	.cogno-dd.is-open .cogno-dd__menu { opacity: 0; transform: translateY(-6px) scale(.98); }
}
.cogno-dd__opt {
	display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
	padding: var(--space-10) var(--space-14); border-radius: var(--cogno-radius-inner); font-size: var(--fs-small); color: var(--cogno-ink); font-family: var(--cogno-font);
}
.cogno-dd__opt:hover { background: var(--cogno-bg-soft); color: var(--cogno-ink); }
.cogno-dd__opt.is-selected { background: var(--cogno-blue); color: var(--cogno-surface); }

/* Stack the bar on small screens so nothing is squashed */
@media (max-width: 640px) {
	.cogno-filterbar { flex-wrap: wrap; }
	.cogno-filter { flex: 1 1 100%; }
	.cogno-search-wrap { flex: 1 1 100%; }
}
.cogno-listing__results { transition: opacity .15s ease; }
.cogno-listing__results[aria-busy="true"] { opacity: .5; }

/* Directory bar */
.cogno-directory__bar {
	display: flex;
	align-items: center;
	gap: var(--space-14);
	margin-bottom: var(--space-22);
	flex-wrap: wrap;
}
.cogno-directory__search {
	flex: 1 1 260px;
	min-width: 0;
	height: var(--control-h);
	padding: 0 var(--control-pad-x);
	border: var(--border-width) solid var(--c-line-strong);
	border-radius: var(--radius-inner);
	font-size: var(--fs-body);
	font-family: var(--font);
}
.cogno-directory__search:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.cogno-directory__count { font-size: var(--fs-small); opacity: .75; white-space: nowrap; }
.cogno-directory__results { min-height: 80px; transition: opacity .15s ease; }
.cogno-directory[aria-busy="true"] .cogno-directory__results,
.cogno-directory__results[aria-busy="true"] { opacity: .5; }

.cogno-empty { padding: var(--space-32) 0; text-align: center; opacity: .7; }

/* ── Pagination — the ONE component. Covers both markups:
   1. <nav class="cogno-pagination"> with bare .page-numbers links (listings, archives)
   2. <nav class="cogno-search__pagination"> wrapping paginate_links(type=list)'s
      <ul class="page-numbers"> (search results)
   Same item box, current + hover states everywhere. ── */
.cogno-pagination,
.cogno-search__pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
}
.cogno-pagination { margin-top: var(--space-28); }
.cogno-search__pagination { margin-top: var(--space-lg); }
/* Strip any box from the <ul> itself; only the items inside get button styling. */
.cogno-search__pagination ul.page-numbers { list-style: none; margin: 0; padding: 0; border: 0; background: none; }
.cogno-search__pagination li { margin: 0; }
.cogno-pagination .page-numbers,
.cogno-search__pagination li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-sm);
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--c-ink-soft);
	font-family: var(--cogno-font);
	font-size: var(--fs-small);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.cogno-pagination .page-numbers.current,
.cogno-search__pagination li > .page-numbers.current { background: var(--c-blue-tint); color: var(--c-blue); }
.cogno-pagination a.page-numbers:hover,
.cogno-search__pagination li > a.page-numbers:hover { background: var(--c-blue-tint); color: var(--c-blue); }
.cogno-pagination .page-numbers.dots,
.cogno-search__pagination li > .page-numbers.dots { background: none; cursor: default; color: var(--c-ink-soft); }
/* prev/next Lucide chevrons */
.cogno-pagination .page-numbers .cogno-ico,
.cogno-search__pagination .page-numbers .cogno-ico { width: var(--icon-md); height: var(--icon-md); display: block; }

/* "Load more" = a design-system ghost pill (.cogno-btn--ghost) — see class-listing.php.
   Only the hidden state lives here (base .cogno-btn sets display:inline-flex). */
.cogno-loadmore[hidden] { display: none; }

/* Gated (members-only) state */
.cogno-directory--gated {
	text-align: center;
	padding: var(--space-40) var(--space-24);
	border: 1px dashed var(--c-line-strong);
	border-radius: 12px;
	background: var(--c-bg);
}
.cogno-gate { margin: 0 0 var(--space-16); font-size: var(--fs-body); }
/* Gate login = the design-system primary pill (same metrics/states as .cogno-btn--primary). */
.cogno-gate__login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--control-h);
	padding: 0 var(--space-28);
	border-radius: var(--radius-pill);
	background: var(--c-purple);
	color: var(--c-white);
	text-decoration: none;
	font-weight: var(--weight-semibold);
	font-size: var(--fs-small);
	font-family: var(--font);
	transition: background .16s ease;
}
.cogno-gate__login:hover { background: var(--c-purple-hover); }
/* Field-level gate: shown in place of a members-only Elementor field (video, speakers, content…). */
.cogno-gate--field {
	margin: var(--space-16) 0;
	padding: var(--space-28) var(--space-24);
	background: var(--c-clouds);
	border: 1px dashed var(--c-line-strong);
	border-radius: var(--radius-lg);
	text-align: center;
}
.cogno-gate--field .cogno-gate { margin: 0 0 var(--space-14); color: var(--c-navy); }
.cogno-gate--field .cogno-gate__action { margin: 0; }
.cogno-gate__lock { margin-right: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
	.cogno-card, .cogno-directory__results, .cogno-dd__menu { transition: none; }
	.cogno-dd.is-open .cogno-dd__menu { transform: none; }
}

/* Reusable section heading + body — design-system classes (documented on /design-system/,
   used by single templates and any content section). */
.cogno-section-title { color: var(--c-purple); font-family: var(--font); font-weight: var(--weight-normal); font-size: var(--section-title-size, 1.75rem); line-height: var(--lh-heading); margin: 0 0 var(--space-12); }
/* Container-owned rhythm: one gap token spaces the paragraphs (children carry no margin). */
.cogno-section-body { font-size: var(--text, 1rem); color: var(--c-ink); line-height: var(--lh-relaxed); display: flex; flex-direction: column; gap: var(--space-16); }
.cogno-section-body p { margin: 0; }

/* ---- Trial single ---------------------------------------------------- */
/* Kill the doubled-up vertical padding: .cogno-page already adds --cogno-section-y top/bottom,
   and the wrap added it again. The wrap owns spacing now; neutralise .cogno-page's here. */
main.cogno-trial.cogno-page{padding-top: 0;padding-bottom: 0;}
/* Wrap = the design-system container metrics (12/6/4 grid), so the trial page lines
   up with every section built on .cogno-container. */
/* Trial single — spacing is entirely token-driven; vertical rhythm uses `gap`, not
   per-child margins; icon sizes use the --icon-* scale. The only remaining literals are
   INTENTIONAL and have no token by design: the logo/progress-bar dimensions, the 40px min
   tap-height, 2px optical text nudges, and the fluid top-padding clamp (smaller than
   --sec-pad-y because a backlink sits above). Reading width = the 6-col grid span. */
.cogno-trial__wrap{
	box-sizing:border-box;
	max-width:calc(var(--container-max) + 2 * var(--container-pad));
	margin: 0 auto;
	padding: clamp(28px,4vw,52px) var(--container-pad) calc(var(--space-xl) * 2);
	display:grid;
	grid-template-columns:repeat(var(--grid-cols,12),1fr);
	column-gap: var(--gutter);
	align-content:start;
}
/* Back links + header sit in the CENTRED content band (cols 2–11) so the title lines up
   with the body; the columns row spans full width and re-grids internally (main = cols 2–7,
   side = cols 9–11) onto the same tracks. */
.cogno-trial__wrap > *{grid-column:2 / 12;}
.cogno-trial__cols{grid-column:1 / -1;}

/* ── Header: title + inline status pill, then logo + last-updated ── */
.cogno-trial__head{margin-bottom: var(--space-lg);}
.cogno-trial__titlerow{display:flex;align-items:center;flex-wrap:wrap;gap: var(--space-sm) var(--space-md);}
.cogno-trial__title{color:var(--c-purple);font-family:var(--font);font-size:var(--fs-h2);font-weight:var(--weight-normal);line-height:var(--lh-heading);margin: 0;}
.cogno-trial__status{display:inline-flex;align-items:center;gap:var(--space-2xs);padding: var(--space-xs) var(--space-sm);border-radius:var(--radius-inner);font-size:var(--text);background:var(--c-status-neutral-bg);}
.cogno-trial__status-lbl{color:var(--c-navy);}
.cogno-trial__status-val{color:var(--c-status-neutral-fg);font-weight: var(--weight-medium);}
.cogno-trial__status[data-status="open"]{background:var(--c-status-open-bg);}
.cogno-trial__status[data-status="open"] .cogno-trial__status-val{color:var(--c-status-open-fg);}
.cogno-trial__status[data-status="in-development"]{background:var(--c-status-dev-bg);}
.cogno-trial__status[data-status="in-development"] .cogno-trial__status-val{color:var(--c-status-dev-fg);}
.cogno-trial__status[data-status="in-follow-up"]{background:var(--c-status-hold-bg);}
.cogno-trial__status[data-status="in-follow-up"] .cogno-trial__status-val{color:var(--c-status-hold-fg);}
.cogno-trial__status[data-status="completed"]{background:var(--c-status-neutral-bg);}
.cogno-trial__status[data-status="completed"] .cogno-trial__status-val{color:var(--c-status-neutral-fg);}
.cogno-trial__status[data-status="closed"]{background:var(--c-status-closed-bg);}
.cogno-trial__status[data-status="closed"] .cogno-trial__status-val{color:var(--c-status-closed-fg);}
.cogno-trial__meta{display:flex;align-items:center;gap: var(--space-sm);margin-top: var(--space-sm);}
.cogno-trial__logo{height:30px;width:auto;}   /* image dimension */
.cogno-trial__updated{color:var(--c-navy);opacity:.5;font-size:var(--fs-small);margin: 0;}

/* ── Two columns, CENTRED on the 12-col grid: 10 cols of content in cols 2–11
   (1 empty col each side) — main = cols 2–7 (6), sidebar = cols 9–11 (3); col 8 is
   the gutter between them. ── */
.cogno-trial__cols{display:grid;grid-template-columns:repeat(var(--grid-cols,12),1fr);column-gap: var(--gutter);align-items:start;}
/* Main column fills 6 cols — its reading width comes from the grid span (no bespoke
   max-width). Sections + the pop/intervention grid flow with ONE gap, no per-child margins. */
.cogno-trial__main{grid-column:2 / 8;display:flex;flex-direction:column;gap: var(--space-lg);}
.cogno-trial__side{grid-column:9 / 12;position:sticky;top:calc(var(--cogno-header-h, 72px) + var(--space-md));display:flex;flex-direction:column;gap: var(--space-md);}

/* ── Main content: headings + body ── */
.cogno-trial__section{margin: 0;}
.cogno-trial__h{color:var(--c-purple);font-family:var(--font);font-weight:var(--weight-normal);font-size:var(--fs-h3);line-height: var(--lh-heading);margin: 0 0 var(--space-sm);}
.cogno-trial__h--sub{font-size:var(--fs-h4);margin: var(--space-md) 0 var(--space-xs);}
.cogno-trial__h--elig{text-transform:uppercase;letter-spacing:.01em;margin-bottom:var(--space-2xs);}
.cogno-trial__section--elig .cogno-trial__h--sub:first-of-type{margin-top: var(--space-xs);}
.cogno-trial__body{color:var(--c-ink);font-size:var(--fs-body);line-height:var(--lh-relaxed);}
.cogno-trial__body p{margin: 0 0 var(--space-16);}
.cogno-trial__body p:last-child{margin-bottom: 0;}
.cogno-trial__body a{color:var(--c-blue);}
.cogno-trial__daterow{color:var(--c-purple);font-size:var(--fs-h4);margin: 0 0 var(--space-xs);}
.cogno-trial__daterow-lbl{opacity:1;}
/* Population / intervention / outcomes grid (spacing above/below via .cogno-trial__main gap) */
.cogno-trial__grid{display:grid;grid-template-columns:1fr 1fr;gap: var(--space-xs) var(--space-xl);margin: 0;}
.cogno-trial__grid-cell{min-width:0;}
.cogno-trial__grid-cell:only-child{grid-column:1 / -1;}
.cogno-trial__grid-cell .cogno-trial__h--sub{margin-top: 0;}

/* ── Sidebar: recruitment progress ── */
.cogno-trial__progress{background:var(--c-tint);border-radius:var(--radius-lg);padding: var(--space-md);}
.cogno-trial__progress-nums{display:flex;justify-content:space-between;gap: var(--space-sm);font-size:var(--fs-small);color:var(--c-navy);}
.cogno-trial__progress-nums strong{font-size:var(--fs-body);}
.cogno-trial__progress-bar{margin-top: var(--space-sm);height:4px;border-radius:2px;background:var(--c-line-strong);overflow:hidden;}   /* 4px/2px = bar dimensions */
.cogno-trial__progress-bar span{display:block;height:100%;border-radius:2px;background:var(--c-blue);width:var(--cogno-pct,0);}   /* fill width = data-only custom property from the template */

/* ── Sidebar: bordered card (resources + locations) ── */
.cogno-trial__card{border:var(--border-width) solid var(--c-line-strong);border-radius:var(--radius-lg);padding: var(--space-md);}
.cogno-trial__resources{display:flex;flex-direction:column;gap: var(--space-xs);}
/* box-sizing:border-box is REQUIRED — this is an <a> (not covered by the input/button
   border-box reset), so width:100% + padding would otherwise overflow the card. */
.cogno-trial__btn{box-sizing:border-box;display:flex;align-items:center;gap: var(--space-xs);min-height:40px;padding: var(--space-xs) var(--space-sm);background:var(--c-bg-soft);color:var(--c-blue);text-decoration:none;border:0;border-radius:var(--radius-inner);font-size:var(--fs-body);font-family:var(--font);text-align:left;width:100%;cursor:pointer;transition:background .15s ease;}   /* min-height 40px = tap target */
.cogno-trial__btn:hover{background:color-mix(in srgb, var(--c-blue) 12%, var(--c-white));}
.cogno-trial__btn-ic{display:inline-flex;flex:0 0 auto;color:var(--c-blue);}
.cogno-trial__btn-ic svg{width:var(--icon-md);height:var(--icon-md);}   /* aligned to site-wide default icon size */
.cogno-trial__card-div{border:0;border-top:var(--border-width) solid var(--c-line);margin: var(--space-md) 0;}

/* ── Sidebar: Trial Locations accordion ── */
.cogno-trial__loc-h{color:var(--c-purple);font-weight:var(--weight-semibold);font-size:var(--fs-h4);margin:0 0 var(--space-2xs);}
.cogno-trial__loc{border-top:var(--border-width) solid var(--c-line);}
.cogno-trial__loc:first-of-type{border-top:0;}
.cogno-trial__loc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap: var(--space-xs);padding: var(--space-sm) var(--space-2);cursor:pointer;color:var(--c-purple);font-size:var(--fs-h4);}   /* 2px = optical text nudge */
.cogno-trial__loc summary::-webkit-details-marker{display:none;}
.cogno-trial__loc-chev{display:inline-flex;color:var(--c-blue);}
.cogno-trial__loc-chev svg{width:var(--icon-sm);height:var(--icon-sm);transition:transform .2s ease;}
.cogno-trial__loc[open] > summary{color:var(--c-blue);}
.cogno-trial__loc[open] > summary .cogno-trial__loc-chev svg{transform:rotate(90deg);}
.cogno-trial__loc-body{padding: 0 var(--space-2) var(--space-sm);font-size:var(--fs-small);line-height:var(--lh-relaxed);color:var(--c-navy);}   /* 2px = optical nudge */
.cogno-trial__loc-body p{margin: 0 0 var(--space-6);}


/* Trial publications repeater — gap replaces per-item margin. */
.cogno-trial__pubs{list-style:none;margin: 0;padding: 0;display:flex;flex-direction:column;gap: var(--space-md);}
.cogno-trial__pub{margin: 0;line-height:var(--lh-relaxed);font-size:var(--fs-body);}
.cogno-trial__pub-title{font-weight: var(--weight-semibold);color:var(--c-ink);}
.cogno-trial__pub-authors{color:var(--c-ink-soft);}
.cogno-trial__pub-link{display:inline-block;color:var(--c-blue);word-break:break-word;}

@media(max-width:1024px){
	.cogno-trial__wrap > *,
	.cogno-trial__main,
	.cogno-trial__side{grid-column:1 / -1;}   /* drop the centred inset — full width on ≤6-col grid */
	.cogno-trial__side{position:static;margin-top: var(--space-xs);}
	.cogno-trial__grid{grid-template-columns:1fr;}
}

/* ===========================================================================
   Past ASMs accordion (COGNO Past ASMs widget — cogno-asm CPT)
   Tokens only. Unique component classes on <details>/<summary>/<a>; the Elementor
   kit/reset that once required !important here is deleted, so plain rules win.
   =========================================================================== */
.cogno-asm-list { display: flex; flex-direction: column; gap: var(--space-14); }
.cogno-asm {
	background: var(--cogno-surface);
	border: 1px solid var(--cogno-line);
	border-radius: var(--cogno-radius);
	overflow: hidden;
}
.cogno-asm__summary {
	display: flex; align-items: center; gap: var(--space-sm);
	list-style: none; cursor: pointer;
	padding: var(--space-16) var(--space-20);
	background: var(--cogno-bg-soft);
	color: var(--cogno-blue);
	font-family: var(--cogno-font);
	font-size: var(--fs-body); font-weight: var(--weight-semibold);
	transition: background .15s ease;
}
.cogno-asm__summary::-webkit-details-marker { display: none; }
.cogno-asm__summary:hover { background: var(--c-clouds); }
.cogno-asm__icon { flex: none; color: var(--cogno-blue); }
.cogno-asm__year { flex: 1 1 auto; }
.cogno-asm__chev { flex: none; color: var(--cogno-blue); transition: transform var(--dur-base) var(--ease-drawer); }
.cogno-asm[open] > .cogno-asm__summary .cogno-asm__chev { transform: rotate(180deg); }
/* On open, the body content eases in (fade + small settle). Plays when the <details>
   reveals it — subtle, fast, natural. Reduced-motion: fade only, no movement. */
.cogno-asm[open] > .cogno-asm__body { animation: cogno-asm-open var(--dur-slow) var(--ease-drawer) both; }
@keyframes cogno-asm-open { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
	.cogno-asm[open] > .cogno-asm__body { animation-name: cogno-modal-fade; }
	.cogno-asm__chev { transition: none; }
}
.cogno-asm__body {
	padding: var(--space-22) var(--space-24) var(--space-24);
	color: var(--cogno-ink);
	font-family: var(--cogno-font);
	font-size: var(--cogno-text);
	line-height: var(--lh-relaxed);
}
.cogno-asm__title { margin: 0 0 var(--space-4); font-weight: var(--weight-semibold); color: var(--cogno-navy); }
.cogno-asm__theme { margin: 0 0 var(--space-16); font-style: italic; color: var(--cogno-ink-soft); }
.cogno-asm__meta { margin: 0 0 var(--space-4); color: var(--cogno-ink); }
.cogno-asm__ack { margin: var(--space-16) 0 0; }
.cogno-asm__ack p { margin: 0 0 var(--space-10); }
.cogno-asm__resources { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-md); }
.cogno-asm__res {
	display: inline-flex; align-items: center; gap: var(--space-xs);
	padding: var(--space-8) var(--space-16);
	border: var(--border-width) solid var(--cogno-line-strong);
	border-radius: var(--cogno-radius-pill);
	background: var(--cogno-surface);
	color: var(--cogno-blue);
	font-family: var(--cogno-font);
	font-size: var(--fs-small); font-weight: var(--weight-semibold); line-height: var(--lh-none);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.cogno-asm__res:hover { border-color: var(--cogno-blue); background: var(--cogno-bg-soft); }
.cogno-asm__res svg { flex: none; }
.cogno-asm__res--plain { color: var(--cogno-ink-soft); background: var(--cogno-bg); cursor: default; }
.cogno-asm__res--plain:hover { border-color: var(--cogno-line-strong); background: var(--cogno-bg); }
@media (max-width: 600px) {
	.cogno-asm__summary { padding: var(--space-14) var(--space-16); font-size: var(--fs-body); }
	.cogno-asm__body { padding: var(--space-18) var(--space-16) var(--space-22); }
}

/* ===========================================================================
   Site search — results page (.cogno-search-page) + header instant dropdown.
   Design-system tokens throughout; result <a>/<h2> overrides are scoped under
   .cogno-search-page (2-class specificity), which beats the zero-specificity
   :where(.cogno-page) base rules on its own — no !important (Elementor is gone).
   =========================================================================== */
.cogno-search__head { margin-bottom: var(--space-28); }
.cogno-search__title { margin: 0 0 var(--space-8); }
.cogno-search__count { margin: 0 0 var(--space-18); color: var(--cogno-ink-soft); font-size: var(--cogno-text); }
.cogno-search__count .cogno-search__term { color: var(--cogno-purple); }
.cogno-search__form { max-width: 560px; }

.cogno-search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-14); }
.cogno-search-result { margin: 0; }
.cogno-search-page .cogno-search-result__link {
	display: block;
	padding: var(--space-20) var(--space-22);
	background: var(--cogno-surface);
	border: 1px solid var(--cogno-line);
	border-radius: var(--cogno-radius);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cogno-search-page .cogno-search-result__link:hover { border-color: var(--cogno-line-strong); box-shadow: var(--cogno-shadow-card); }
.cogno-search-result__badge {
	display: inline-block; margin-bottom: var(--space-xs);
	padding: var(--space-2) var(--space-12); border-radius: var(--cogno-radius-pill);
	background: var(--cogno-bg-soft); color: var(--cogno-blue);
	font-size: var(--fs-small); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.cogno-search-page .cogno-search-result__title {
	margin: 0 0 var(--space-6);
	font-size: var(--fs-h4); font-weight: var(--weight-semibold);
	color: var(--cogno-navy); line-height: var(--lh-snug);
}
.cogno-search-page .cogno-search-result__link:hover .cogno-search-result__title { color: var(--cogno-blue); }
.cogno-search-result__excerpt { margin: 0; color: var(--cogno-ink-soft); font-size: var(--fs-small); line-height: var(--lh-relaxed); }

/* (Pagination styles live in the shared "Pagination" block above — one component.) */

.cogno-search-empty { padding: var(--space-28) 0; }
.cogno-search-empty__lead { font-size: var(--fs-body); color: var(--cogno-ink); margin: 0 0 var(--space-8); }
.cogno-search-empty__hint { color: var(--cogno-ink-soft); margin: 0; }
.cogno-search-page .cogno-search-empty a { color: var(--cogno-blue); font-weight: var(--weight-semibold); }

/* Header instant-search dropdown */
.cogno-instant { position: relative; }
.cogno-instant__results {
	position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 60;
	background: var(--cogno-surface); border: 1px solid var(--cogno-line);
	border-radius: var(--cogno-radius); box-shadow: var(--cogno-shadow);
	overflow: hidden;
	/* The search panel band is pointer-events:none (click-through) and only the <form> re-enables
	   it. The dropdown is a sibling of the form, so it must re-enable clicks itself or links/the
	   "See all results" button can't be clicked (only Enter/submit worked). */
	pointer-events: auto;
}
.cogno-instant__list { list-style: none; margin: 0; padding: var(--space-6); max-height: 60vh; overflow-y: auto; }
.cogno-instant__item { margin: 0; }
.cogno-instant__link {
	display: flex; align-items: flex-start; gap: var(--space-sm);
	padding: var(--space-10) var(--space-12); border-radius: var(--cogno-radius-inner);
	text-decoration: none; color: var(--cogno-ink);
	transition: background .12s ease;
}
.cogno-instant__link:hover { background: var(--cogno-bg-soft); }
.cogno-instant__badge {
	flex: none; margin-top: var(--space-2);
	padding: var(--space-2) var(--space-8); border-radius: var(--cogno-radius-pill);
	background: var(--cogno-bg-soft); color: var(--cogno-blue);
	font-size: var(--fs-small); font-weight: var(--weight-semibold); letter-spacing: .03em; text-transform: uppercase;
}
.cogno-instant__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cogno-instant__title { font-weight: var(--weight-semibold); color: var(--cogno-navy); font-size: var(--fs-small); line-height: var(--lh-snug); }
.cogno-instant__excerpt { color: var(--cogno-ink-soft); font-size: var(--fs-small); line-height: var(--lh-snug); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cogno-instant__empty { margin: 0; padding: var(--space-16) var(--space-14); color: var(--cogno-ink-soft); font-size: var(--fs-small); }
.cogno-instant__all {
	display: block; padding: var(--space-12) var(--space-14);
	border-top: 1px solid var(--cogno-line);
	background: var(--cogno-bg); color: var(--cogno-blue);
	font-weight: var(--weight-semibold); font-size: var(--fs-small); text-decoration: none; text-align: center;
}
.cogno-instant__all { display: flex; align-items: center; justify-content: center; gap: var(--space-6); }
.cogno-instant__all:hover { background: var(--cogno-bg-soft); }
.cogno-instant__all .cogno-ico { width: var(--icon-sm); height: var(--icon-sm); }

/* Mobile search (its own dropdown panel next to the burger) — uses the global pill searchform */
.cogno-mobile-search { margin: 0; }
.cogno-mobile-search .cogno-searchform { position: relative; display: flex; align-items: center; gap: var(--space-xs); }
.cogno-mobile-search .cogno-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cogno-ink-soft); pointer-events: none; }
.cogno-mobile-search .cogno-searchform__input { flex: 1 1 auto; }
.cogno-mobile-search .cogno-instant__results { left: 0; right: 0; }

/* ------------------------------------------------------------------ 404 page
   Scoped under .cogno-404 so these out-rank `.cogno-page p` / `.cogno-page h1` (0,1,1) —
   a bare `.cogno-404__code` (0,1,0) would otherwise be overridden. All spacing uses tokens. */
/* 404 = the grid; the centred content spans the middle 6 cols (was 720px). */
.cogno-404 {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin-inline: auto;
	padding-inline: var(--container-pad);
	box-sizing: border-box;
}
.cogno-404 .cogno-404__inner { grid-column: 4 / span 6; max-width: none; margin: 0; padding-inline: 0; text-align: center; }
@media (max-width: 1024px) { .cogno-404 .cogno-404__inner { grid-column: 1 / -1; } }
.cogno-404 .cogno-404__code {
	font-family: var(--cogno-font);
	font-weight: 700;   /* deliberate display numeral — the one sanctioned >600 weight */
	font-size: clamp(5rem, 18vw, 10rem);
	line-height: var(--lh-none);
	margin: 0 0 var(--cogno-space-sm);
	color: var(--cogno-blue);
	letter-spacing: var(--tracking-tight);
}
.cogno-404 .cogno-404__title { margin: 0 0 var(--cogno-space-sm); }
.cogno-404 .cogno-404__text {
	margin: 0 auto var(--cogno-space-lg);
	max-width: 46ch;
	color: var(--cogno-ink-soft, var(--cogno-ink));
	font-size: var(--fs-body);
}
.cogno-404 .cogno-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cogno-space-sm);
	justify-content: center;
	margin: 0 0 var(--cogno-space-xl);
}
.cogno-404 .cogno-404__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cogno-space-xs) var(--cogno-space-md);
	padding-top: var(--cogno-space-lg);
	margin: 0;
	border-top: 1px solid var(--cogno-line);
}
.cogno-404 .cogno-404__links-label {
	width: 100%;
	font-size: var(--fs-small);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--cogno-ink-soft, var(--cogno-ink));
	margin: 0 0 var(--cogno-space-xs);
}
.cogno-404 .cogno-404__links a { color: var(--cogno-blue); text-decoration: none; font-weight: var(--weight-medium); }
.cogno-404 .cogno-404__links a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Legal / long-form content (privacy, terms)
   Authored in post_content as .cogno-page__inner.cogno-legal. Typographic rhythm only —
   width comes from the .cogno-sec__container--page grid column span (no bespoke max-width). */
.cogno-legal .cogno-legal__updated { color: var(--cogno-ink-soft); font-size: var(--fs-small); margin: 0 0 var(--space-lg); }
.cogno-legal h2 { margin: var(--space-xl) 0 var(--space-sm); }
.cogno-legal h3 { margin: var(--space-lg) 0 var(--space-xs); }
.cogno-legal p, .cogno-legal li { color: var(--cogno-ink); line-height: var(--lh-relaxed); }
.cogno-legal ul { padding-left: 1.25em; margin: 0 0 var(--space-md); }
.cogno-legal li { margin-bottom: var(--space-6); }
.cogno-legal a { color: var(--cogno-blue); }
.cogno-legal__intro { font-size: var(--fs-body); }

/* ===========================================================================
   COGNO Images Accordion — horizontal panels (background image + a white title
   badge, description and outline button) that expand on hover or click. Only
   the "is-active" class (toggled by JS for BOTH triggers — see
   cogno-images-accordion.js) drives the expanded look; there is no separate
   CSS :hover rule, so exactly one panel is ever expanded at a time.
   =========================================================================== */
.cogno-accordion {
	display: flex;
	align-items: stretch;
	gap: var(--cogno-acc-gap, 24px);
	width: 100%;
	height: var(--cogno-acc-h, 460px);
}
/* Tall variant used by the flex images_accordion section (was an inline style). */
.cogno-accordion--tall {
	--cogno-acc-h: 680px;
	--cogno-acc-collapsed: 220px;
	--cogno-acc-gap: var(--space-md);
	--cogno-acc-radius: var(--radius-lg);
}
.cogno-accordion__item {
	position: relative;
	flex: 1 1 0;
	min-width: var(--cogno-acc-collapsed, 220px);
	border-radius: var(--cogno-acc-radius, 24px);
	overflow: hidden;
	cursor: pointer;
	background: var(--cogno-purple);
	transition: flex-grow var(--dur-slow) var(--ease-drawer);
	outline: none;
}
.cogno-accordion__item:focus-visible { outline: 2px solid var(--c-white); outline-offset: -4px; }
/* Absolutely-positioned cover image fills the panel (height:100% beats WP core's
   :where(img[class*=wp-image-]){height:auto} on specificity — no !important). */
.cogno-accordion__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Collapsed panels get a flat brand-purple wash so they read as "closed" (Figma 393:584).
   The active panel shows its photo in full colour and only carries a blue gradient at the
   bottom to keep the title chip / description / button legible. */
.cogno-accordion__item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(57, 50, 146, .8);
	transition: background var(--dur-slow) var(--ease-drawer);
	pointer-events: none;
}
.cogno-accordion__item.is-active::after {
	background: linear-gradient(180deg, rgba(31, 88, 230, 0) 42%, rgba(31, 88, 230, .62) 100%);
}

.cogno-accordion__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding: clamp(20px, 3vw, 40px);
	color: var(--c-white);
}
.cogno-accordion__title {
	display: inline-block;
	margin: 0;
	padding: var(--space-16) var(--space-24);
	background: var(--c-white);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(20, 10, 60, .18);
	font-family: var(--font);
	font-weight: var(--weight-semibold);
	font-size: var(--fs-subtitle);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--cogno-purple);
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cogno-accordion__desc {
	margin-top: var(--space-18);
	max-width: 44ch;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: var(--lh-relaxed);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: opacity var(--dur-base) var(--ease-out) .05s, max-height var(--dur-slow) var(--ease-drawer);
}
.cogno-accordion__desc a{
    color:var(--c-white);
    font-weight: var(--weight-medium);
}
.cogno-accordion__desc p { margin: 0 0 var(--space-8); color: var(--c-white); }
/* The panel button is a design-system white outline pill (.cogno-btn--outline-light);
   only the expand/collapse reveal animation lives here. The transition list re-declares
   the base button's colour transitions so they survive this override. */
.cogno-accordion__btn {
	margin-top: var(--space-18);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s ease .05s, transform .3s ease .05s, background .18s ease, border-color .18s ease, color .18s ease;
}

.cogno-accordion__item.is-active { flex-grow: 2; }

.cogno-accordion__item.is-active .cogno-accordion__title { white-space: normal; }
.cogno-accordion__item.is-active .cogno-accordion__desc { max-height: 8em; opacity: 1; }
.cogno-accordion__item.is-active .cogno-accordion__btn { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
	.cogno-accordion { flex-direction: column; height: auto; }
	.cogno-accordion__item { min-width: 0; min-height: var(--cogno-acc-collapsed, 220px); flex-grow: 1; }
	.cogno-accordion__item.is-active { flex-grow: 1.6; }
}

/* ------------------------------------------------------------------ Pill — the ONE badge/label component
   A small uppercase label. Use everywhere instead of re-styling badges per section.
   Variants: (default) pale blue tint · --on-dark (translucent white, over photos/bands). */
.cogno-pill {
	display: inline-flex; align-items: center;
	padding: var(--space-4) var(--space-12);
	border-radius: var(--radius-pill);
	background: var(--c-bg-soft); color: var(--c-blue);
	font-size: var(--fs-small); font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label); text-transform: uppercase;
	line-height: var(--lh-none); text-decoration: none;
}
.cogno-pill--on-dark { background: color-mix(in srgb, var(--c-white) 22%, transparent); color: var(--c-white); }

/* ------------------------------------------------------------------ Chips (publication terms / related trial) */
.cogno-card__terms { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-10) 0 var(--space-2); }
.cogno-chip {
	display: inline-flex; align-items: center;
	padding: var(--space-2) var(--space-12);
	border-radius: var(--cogno-radius-pill, 999px);
	background: var(--cogno-bg-soft, var(--c-bg-soft));
	color: var(--c-ink-soft);
	font-size: var(--fs-small); line-height: var(--lh-body);
	text-decoration: none;
}
.cogno-chip--trial {
	background: var(--c-blue);
	color: var(--c-white);
	transition: background .15s ease;
}
a.cogno-chip--trial:hover,
a.cogno-chip--trial:focus-visible { background: var(--c-purple); }

/* ------------------------------------------------------------------ Event CTA (Register Now / Watch Video / Program) */
.cogno-eventcta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-6) 0; }
.cogno-eventcta__watch { display: contents; }
.cogno-eventcta__btn { cursor: pointer; }
.cogno-eventcta__play { margin-right: var(--space-xs); font-size: .8em; }

/* ------------------------------------------------------------------ Opportunity single */
/* Opportunity single = the grid; the reading wrap spans the middle 6 cols (was 880px). */
.cogno-opp {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin-inline: auto;
	padding-inline: var(--container-pad);
	box-sizing: border-box;
}
.cogno-opp__wrap { grid-column: 4 / span 6; min-width: 0; padding-block: clamp(28px, 5vw, 56px); }
@media (max-width: 1024px) { .cogno-opp__wrap { grid-column: 1 / -1; } }
.cogno-opp__head { margin-bottom: var(--space-18); }
.cogno-opp__title { margin: var(--space-10) 0 var(--space-8); }
.cogno-opp__meta { color: var(--c-ink-soft); font-size: var(--fs-small); margin: 0 0 var(--space-4); }
.cogno-opp__closed {
	margin: var(--space-6) 0 var(--space-18); padding: var(--space-12) var(--space-18);
	border: 1px solid var(--cogno-line-strong); border-left: 4px solid var(--cogno-coral, var(--c-coral));
	border-radius: var(--cogno-radius, 8px);
	background: var(--cogno-bg-soft, var(--c-bg-soft)); font-size: var(--fs-small);
}
.cogno-opp__body { margin: var(--space-6) 0 var(--space-24); }
.cogno-opp__body h2, .cogno-opp__body h3 { margin-top: 1.4em; }
.cogno-opp__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-10); }
/* Hero band → content tucks under it on the rounded white sheet (same treatment as the
   /opportunities/ listing, so the single reads as the live "Opportunities" page). */
.cogno-sec--pageheader-band + .cogno-opp__sheet,
.cogno-sec--pageheader-light + .cogno-opp__sheet {
	background: var(--cogno-surface, var(--c-white));
	border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
	margin-top: -40px;
	position: relative;
	z-index: 1;
}
/* The sheet already owns the top offset — drop the reading wrap's extra top padding. */
.cogno-opp__sheet .cogno-opp__wrap { padding-top: clamp(20px, 3vw, 32px); }

/* ------------------------------------------------------------------ Flex pages (ACF page_sections) */
/* Sections own all vertical rhythm — the .cogno-page.cogno-flex selector (2 classes)
   out-specifies the .cogno-page frame padding, so it zeroes it without !important. */
.cogno-page.cogno-flex { padding-top: 0; padding-bottom: 0; --cogno-hero-overlap: 144px; }
.cogno-sec { padding-block: var(--sec-pad-y); padding-inline: 0; }   /* one consistent vertical rhythm */
/* Section container = the SAME metrics as .cogno-container (grid width + padding), so
   every band section's content lands on the identical edges as the 12/6/4 grid sections. */
.cogno-sec__container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin: 0 auto;
	padding: 0 var(--container-pad);
}
.cogno-sec__container--narrow { max-width: 880px; }   /* reading column (rich text) — deliberate */
/* Fallback page/blog + member templates (page.php, index.php): full 12/6/4 grid container
   (edges line up with the site grid — NO narrow reading column). Content is placed on
   defined column spans: 8 of 12 by default (readable), 5 for the login form. Collapses to
   full width once the grid drops to 6/4 cols. Top padding + bottom clearance for the rounded
   footer that rides up. */
.cogno-sec__container--page {
	padding-top: var(--space-44);
	padding-bottom: var(--space-96);
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	align-content: start;
}
.cogno-sec__container--page > * { grid-column: 3 / span 8; min-width: 0; }   /* centred 8 of 12 (readable) */
.cogno-sec__container--page > .cogno-login { grid-column: 4 / span 6; }      /* login form: centred 6 cols */
/* Login page: title + form share ONE narrow 4-col span, centred on the grid, so they line up and stay compact. */
.cogno-sec__container--page:has(> .cogno-login) > *,
.cogno-sec__container--page:has(> .cogno-login) > .cogno-login { grid-column: 5 / span 4; }
@media (max-width: 1024px) {
	.cogno-sec__container--page > *,
	.cogno-sec__container--page > .cogno-login,
	.cogno-sec__container--page:has(> .cogno-login) > *,
	.cogno-sec__container--page:has(> .cogno-login) > .cogno-login { grid-column: 1 / -1; }
}
/* Long-form pages (privacy, terms) are authored in post_content with their OWN
   .cogno-page / .cogno-page__inner wrappers nested inside this container — strip the
   duplicated shell so the content sits cleanly in the grid column (no phantom double
   section-padding, no nested max-width/side-inset fighting the column). */
.cogno-sec__container--page .cogno-page { padding: 0; }
.cogno-sec__container--page .cogno-page__inner { max-width: none; padding-left: 0; padding-right: 0; }

/* Content listings + Past-ASM archive sit on the middle 10 of 12 cols (cols 2–11),
   centred — a touch narrower than the full band so the card grid reads better. On the
   12/6/4 grid via column spans (no bespoke max-widths); full width once the grid drops
   to 6/4 cols (≤1024). */
.cogno-sec--listing > .cogno-sec__container,
.cogno-sec--asm > .cogno-sec__container {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	align-content: start;
}
.cogno-sec--listing > .cogno-sec__container > *,
.cogno-sec--asm > .cogno-sec__container > * { grid-column: 2 / span 10; min-width: 0; }
@media (max-width: 1024px) {
	.cogno-sec--listing > .cogno-sec__container > *,
	.cogno-sec--asm > .cogno-sec__container > * { grid-column: 1 / -1; }
}

/* Hero band — brand background image/colour, centered white heading + intro.
   The scoped class selectors out-specify the zero-specificity :where(.cogno-page)
   base heading/p rules on their own — no !important needed (Elementor is gone). */
.cogno-sec--hero {
	background-color: var(--c-periwinkle);
	background-image: url("../img/background-pattern-left.svg"), url("../img/background-pattern-right.svg");
	background-position: left top, right top;
	background-size: auto 140%, auto 140%;
	background-repeat: no-repeat, no-repeat;
	padding: var(--space-64) 0 var(--space-48);
	overflow: hidden;
	text-align: center;
}
.cogno-sec--hero-overlap { padding-bottom: calc(var(--space-48) + var(--cogno-hero-overlap)); }
/* Content sits on the 12/6/4 grid via centred column spans (no bespoke max-widths):
   title = middle 10 cols, intro = middle 6 (a comfortable reading measure). Collapses
   to full width once the grid drops to 6/4 cols. */
.cogno-sec--hero .cogno-sec__container {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	justify-items: center;
}
.cogno-sec--hero .cogno-sec__title {
	grid-column: 2 / span 10;
	margin: 0 0 var(--space-16);
	color: var(--c-white);
	font-family: var(--cogno-font);
	font-weight: var(--weight-normal);
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
}
.cogno-sec--hero .cogno-sec__intro { grid-column: 4 / span 6; color: var(--c-white); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.cogno-sec--hero .cogno-sec__intro p { color: var(--c-white); margin: 0 0 var(--space-8); }
@media (max-width: 1024px) {
	.cogno-sec--hero .cogno-sec__title,
	.cogno-sec--hero .cogno-sec__intro { grid-column: 1 / -1; }
}

/* The section straight after an overlapping hero rides up over the band edge. */
.cogno-sec--hero-overlap + .cogno-sec { margin-top: calc(-1 * var(--cogno-hero-overlap)); padding-top: 0; }

/* Committee / listing sections. */
.cogno-sec__heading { margin: 0 0 var(--space-10); font-weight: var(--weight-normal); }
.cogno-sec__lead { margin: 0 0 var(--space-22); color: var(--c-ink-soft); }
/* Committee content sits on the grid via column spans (no bespoke max-widths):
   heading + people grid = middle 10 cols, the lead paragraph = middle 6 (reading
   measure). Collapses to full width at ≤1024. */
.cogno-sec--committee > .cogno-sec__container {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	align-content: start;
}
.cogno-sec--committee > .cogno-sec__container > * { grid-column: 2 / span 10; min-width: 0; }
.cogno-sec--committee .cogno-sec__lead { grid-column: 4 / span 6; }
@media (max-width: 1024px) {
	.cogno-sec--committee > .cogno-sec__container > *,
	.cogno-sec--committee .cogno-sec__lead { grid-column: 1 / -1; }
	.cogno-flex .cogno-sec:last-child.cogno-sec--listing-opportunities, 
	.cogno-flex .cogno-sec:last-child.cogno-sec--committe, 
	.cogno-flex .cogno-sec:last-child.cogno-sec--listing.cogno-sec--listing-post,
	.cogno-flex .cogno-sec:last-child.cogno-sec--listing-trials-research-list,
	.cogno-flex .cogno-sec:last-child.cogno-sec--asm,
	.cogno-flex .cogno-sec:last-child.cogno-sec--listing-education,
	.cogno-flex .cogno-sec:last-child.cogno-sec--promo
	{
		padding-bottom: var(--space-96);
	}
}

@media (max-width: 736px) {
	/* Mobile: gentle overlap so the 2-up card grid tucks its top edge into the band,
	   but the band's bottom padding stays sized to (base + overlap) — as on desktop —
	   so the cards overlap empty band space and NEVER cover the hero title. (A 90px
	   pull against a 40px bottom padding was hiding the title behind the cards.) */
	.cogno-page.cogno-flex { --cogno-hero-overlap: var(--space-40); }
	.cogno-sec--hero { padding: var(--space-44) 0 var(--space-40); }
	.cogno-sec--hero-overlap { padding-bottom: calc(var(--space-40) + var(--cogno-hero-overlap)); }

}

/* ------------------------------------------------------------------ Flex: page header banner */
.cogno-sec--pageheader { padding: 0; overflow: hidden; }
/* On the 12/6/4 grid: text = cols 1–5, artwork = cols 6–12 (was a 5fr/7fr split). */
.cogno-pageheader__grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
	column-gap: var(--gutter);
	row-gap: var(--space-md);
	align-items: center;
	min-height: max(70vh, 460px);   /* TALL default (70vh, 460px floor) — the LEFT heroes: light+artwork (Publications, Thankyou) inherit it; About/Trials re-assert it below. The simple centred bands drop to 30vh. */
	padding-top: var(--space-24);
	padding-bottom: var(--sec-pad-y);
}
.cogno-pageheader__text { grid-column: 1 / 6; }
.cogno-pageheader__media { grid-column: 6 / -1; }
.cogno-pageheader__title {
	margin: 0 0 var(--space-12);
	font-family: var(--cogno-font);
	font-weight: var(--weight-normal);
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
}
.cogno-pageheader__intro { font-size: var(--fs-body); line-height: var(--lh-relaxed); }   /* width from the page-header text column */
.cogno-pageheader__media { position: relative; display: flex; justify-content: center; align-items: center; min-height: 320px; }
.cogno-pageheader__art { max-width: 100%; max-height: 480px; width: auto; height: auto; }
.cogno-pageheader__badge { position: absolute; animation: cogno-badge-float 3s ease-in-out infinite; will-change: transform; }
.cogno-pageheader__badge img { width: clamp(5rem, 4.287rem + 3.0421vw, 7.9375rem); height: auto; }   /* fluid, up to 162px (10.125rem) */
.cogno-pageheader__badge--tl { top: 4%; left: -2%; }
.cogno-pageheader__badge--tr { top: 6%; right: 20%; }
.cogno-pageheader__badge--bl { bottom: 0%; left: 20%; animation-delay: -1.5s; }
.cogno-pageheader__badge--br { bottom: 6%; right: -2%; }
/* Infinite gentle up/down drift for the floating badges — subtle travel by default.
   Override --cogno-badge-float-dist on a badge/page to change the amplitude; inherits
   into the <img> on the hero pages that animate the image instead of the span. */
@keyframes cogno-badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--cogno-badge-float-dist, -60px)); } }
@media (prefers-reduced-motion: reduce) { .cogno-pageheader__badge { animation: none; } }

/* Band style: full-bleed image/colour, white text, rounded white sheet on the next section. */
.cogno-sec--pageheader-band {
	background-color: var(--cogno-blue-soft, var(--cogno-blue-soft));
	background-image: var(--cogno-bg, none);   /* URL supplied by the template as data (--cogno-bg) */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.cogno-sec--pageheader-band .cogno-pageheader__title { color: var(--c-white); }
.cogno-sec--pageheader-band .cogno-pageheader__intro,
.cogno-sec--pageheader-band .cogno-pageheader__intro p { color: var(--c-white); }
.cogno-sec--pageheader-band + .cogno-sec {
	background: var(--cogno-surface, var(--c-white));
	border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
	margin-top: -40px;
	position: relative;
}

/* Light style: navy heading on the page background. */
/* Light style = the brand lilac tint band (never pure white — design system).
   Same tuck-up as the colour band; the next section gets the white sheet. */
.cogno-sec--pageheader-light { background: var(--c-tint); }
.cogno-sec--pageheader-light .cogno-pageheader__title { color: var(--cogno-navy); }
.cogno-sec--pageheader-light .cogno-pageheader__intro { color: var(--cogno-ink-soft); }
.cogno-sec--pageheader-light + .cogno-sec {
	background: var(--cogno-surface, var(--c-white));
	border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
	margin-top: -40px;
	position: relative;
}

/* Plain LIGHT heading (no band, no artwork): text spans the full grid, centered — e.g. Newsletters. */
/* Light plain header = the tint-band twin of HERO TYPE A: compact 30vh, heading + intro
   CENTRED, tint background + navy text (rules below), no photo/overlay. (Publications.) */
.cogno-sec--pageheader-light.cogno-sec--pageheader-plain .cogno-pageheader__grid { min-height: max(30vh, 340px); padding-top: var(--space-40); padding-bottom: var(--space-40); text-align: center; }
.cogno-sec--pageheader-light.cogno-sec--pageheader-plain .cogno-pageheader__text { grid-column: 1 / -1; }
/* Plain (no artwork): centre the copy on the grid via spans — heading area = 8 cols,
   intro = 4 (tighter reading measure). Full width once the grid drops to 6/4 cols. */
.cogno-sec--pageheader-plain .cogno-pageheader__text {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	justify-items: center;
}
.cogno-sec--pageheader-plain .cogno-pageheader__text > * { grid-column: 3 / span 8; }
.cogno-sec--pageheader-plain .cogno-pageheader__intro { grid-column: 5 / span 4; }
@media (max-width: 1024px) {
	.cogno-sec--pageheader-plain .cogno-pageheader__text > *,
	.cogno-sec--pageheader-plain .cogno-pageheader__intro { grid-column: 1 / -1; }
}
/* ───────────────────────────────────────────────────────────────────────────
   HERO TYPE A — SIMPLE CENTRED BAND (raw-photo banners): News, Past-ASM,
   Opportunities, Education, Newsletters. Compact 30vh band, heading + intro
   CENTRED on the grid, dark gradient overlay for legibility.
   (About/Trials are excluded further down — HERO TYPE B.)
   ─────────────────────────────────────────────────────────────────────────── */
.cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__grid {
	position: relative;
	z-index: 1;
	text-align: center;
	min-height: max(30vh, 340px);   /* 30vh compact banner with a 340px floor */
}
.cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__text { grid-column: 1 / -1; }
/* Brand wash over the photo so the white heading/intro stays legible (News, Past-ASM,
   Education, Opportunities — the raw-photo bands). NOT the composition heroes below. */
.cogno-sec--pageheader-band.cogno-sec--pageheader-plain { position: relative; }
.cogno-sec--pageheader-band.cogno-sec--pageheader-plain::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(57, 50, 146, .66) 0%, rgba(41, 60, 150, .5) 45%, rgba(31, 88, 230, .34) 100%);
	pointer-events: none;
}
/* ───────────────────────────────────────────────────────────────────────────
   HERO TYPE B — TALL LEFT COMPOSITION HERO (About us #1589, Trials #2527 ONLY).
   The background image carries its own artwork on the RIGHT, so there is no
   .cogno-pageheader__media; heading + intro sit LEFT (cols 1–5) to clear it,
   the band is TALL (70vh) and has NO overlay. Scoped by page-id so the Type A
   bands above are never affected. (Publications gets its tall/left look from the
   light+artwork base rule, not from here.)
   ─────────────────────────────────────────────────────────────────────────── */
body.page-id-1589 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__grid,
body.page-id-2527 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__grid {
	text-align: left;
	min-height: max(70vh, 460px);   /* re-assert TALL over the 30vh Type A default */
}
body.page-id-1589 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__text,
body.page-id-2527 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__text {
	display: block;
	grid-column: 1 / 6;
}
/* Pin BOTH the title and intro to column 1 (left), overriding the centred plain-band
   child spans (> * = 3/span 8, intro = 5/span 4) so the heading lines up with the intro. */
body.page-id-1589 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__text > *,
body.page-id-2527 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__text > *,
body.page-id-1589 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__intro,
body.page-id-2527 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__intro {
	grid-column: 1 / -1;
	justify-self: start;
	text-align: left;
	margin-left: 0;
}
/* No wash on the composition heroes — the artwork is designed with its own contrast. */
body.page-id-1589 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain::before,
body.page-id-2527 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain::before { display: none; }
@media (max-width: 1024px) {
	body.page-id-1589 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__text,
	body.page-id-2527 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__text { grid-column: 1 / span 9; }
}
@media (max-width: 736px) {
	body.page-id-1589 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__text,
	body.page-id-2527 .cogno-sec--pageheader-band.cogno-sec--pageheader-plain .cogno-pageheader__text { grid-column: 1 / -1; }
}

/* ───────────────────────────────────────────────────────────────────────────
   COMPOSITION HERO (#1589 About us + #2527 Trials & Research) — the flat
   composition webp was split into a standalone artwork (head + portrait, badges
   painted out) + two real floating badges, so the badges drift like the
   Publications hero. The band matches the artwork's periwinkle exactly (#7088ff)
   so its feathered edges vanish into the band. The media box is locked to the
   artwork's aspect and the art fills it, so the badges (positioned as % of the
   box) land exactly on their painted-out spots. Each badge bobs INWARD (toward
   the portrait) — the trailing reveal only ever exposes the periwinkle band,
   never the painted-out photo notch underneath. Trials reuses these rules 1:1
   because trials-hero.png is a matched pair with about-hero.png (same 1318×1398
   composition + two corner badges), so the % positions below land identically. */
body.page-id-1589 .cogno-sec--pageheader-band,
body.page-id-2527 .cogno-sec--pageheader-band { background-color: #7088ff; background-image: none; position: relative; }
/* Faint molecule dot-pattern (bg-pattern-scaled.png, supplied by the template via --cogno-bg)
   as a FULL-WIDTH wash across the whole band — behind the heading/intro AND the head/portrait,
   exactly like the Figma design. The translucent head lets the dots read faintly through it. */
body.page-id-1589 .cogno-sec--pageheader-band::before,
body.page-id-2527 .cogno-sec--pageheader-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--cogno-bg, none);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	opacity: .65;
	pointer-events: none;
	z-index: 0;
}
body.page-id-1589 .cogno-pageheader__grid,
body.page-id-2527 .cogno-pageheader__grid { position: relative; z-index: 1; padding-bottom: 0; }   /* text + head sit above the dot pattern; drop the bottom pad so the bottom-aligned portrait tucks right into the white sheet below */
/* Match the Publications artwork scale exactly: the media box shrink-wraps the art, the art
   is capped at the SAME 480px height Publications uses (base rule), and the badges stay
   positioned as a % of that box so they keep tracking the portrait notches at any size. */
body.page-id-1589 .cogno-pageheader__media,
body.page-id-2527 .cogno-pageheader__media { display: block; width: fit-content; margin-inline: auto; min-height: 0; align-self: end; padding-bottom: 40px; }
body.page-id-1589 .cogno-pageheader__art,
body.page-id-2527 .cogno-pageheader__art { display: block; width: auto; height: auto; max-width: 100%; max-height: 480px; object-fit: contain; }
/* Centre each badge span on its artwork point (static transform); the bob runs on the
   <img> inside so it doesn't fight the centring transform. Motion + size match the
   Publications hero: cogno-badge-float (bob up), one phase-offset, clamp-sized (base img rule). */
body.page-id-1589 .cogno-pageheader__badge,
body.page-id-2527 .cogno-pageheader__badge { animation: none; transform: translate(-50%, -50%); }
body.page-id-1589 .cogno-pageheader__badge img,
body.page-id-2527 .cogno-pageheader__badge img { animation: cogno-badge-float 3s ease-in-out infinite; will-change: transform; }
body.page-id-1589 .cogno-pageheader__badge--tl,
body.page-id-2527 .cogno-pageheader__badge--tl { top: 26.2%; left: 27.75%; right: auto; bottom: auto; }
body.page-id-1589 .cogno-pageheader__badge--br,
body.page-id-2527 .cogno-pageheader__badge--br { top: 70.2%; left: 77.3%; right: auto; bottom: auto; }
body.page-id-1589 .cogno-pageheader__badge--br img,
body.page-id-2527 .cogno-pageheader__badge--br img { animation-delay: -1.5s; }   /* offset phase, like Publications' --bl */
@media (prefers-reduced-motion: reduce) {
	body.page-id-1589 .cogno-pageheader__badge img,
	body.page-id-2527 .cogno-pageheader__badge img { animation: none; }
}
/* Mobile: text + portrait stack full-width (base 1024 rule), so the portrait is centred (not
   bottom-pinned) and the dot pattern washes the whole band again (contain leaves a tall band bare). */
@media (max-width: 1024px) {
	body.page-id-1589 .cogno-sec--pageheader-band::before,
	body.page-id-2527 .cogno-sec--pageheader-band::before { background-position: center; background-size: cover; }
	body.page-id-1589 .cogno-pageheader__media,
	body.page-id-2527 .cogno-pageheader__media { align-self: auto; margin-top: var(--space-md); }
	body.page-id-1589 .cogno-pageheader__art,
	body.page-id-2527 .cogno-pageheader__art { max-height: 400px; }
}
@media (max-width: 736px) {
	body.page-id-1589 .cogno-pageheader__art,
	body.page-id-2527 .cogno-pageheader__art { max-height: 320px; }
}

/* First-section hero tuck-up: a page_header BAND (or the committee hero band) as the
   first flex section bleeds UP behind the sticky, contained header pill — the colour/
   image band runs to the very top corners around it, exactly like the homepage slider
   hero (.cogno-hero). The content then pads down so the heading clears the header.
   Light page-headers (no band) are intentionally excluded. */
.cogno-page.cogno-flex > .cogno-sec--pageheader-band:first-child,
.cogno-page.cogno-flex > .cogno-sec--pageheader-light:first-child,
.cogno-page.cogno-flex > .cogno-sec--hero:first-child,
.cogno-page.cogno-flex > .cogno-sec--contact:first-child {
	margin-top: calc(-1 * var(--cogno-header-h, 72px));
}
.cogno-page.cogno-flex > .cogno-sec--pageheader-band:first-child .cogno-pageheader__grid,
.cogno-page.cogno-flex > .cogno-sec--pageheader-light:first-child .cogno-pageheader__grid {
	padding-top: calc(var(--cogno-header-h, 72px) + clamp(20px, 3vw, 44px));
}
.cogno-page.cogno-flex > .cogno-sec--hero:first-child {
	padding-top: calc(var(--cogno-header-h, 72px) + clamp(24px, 3vw, 44px));
}
.cogno-page.cogno-flex > .cogno-sec--contact:first-child {
	padding-top: calc(var(--cogno-header-h, 72px) + clamp(28px, 4vw, 72px));
}

/* Listing heading (e.g. "Clinical Trials" above the filter bar). */
.cogno-sec__heading--center { text-align: center; margin: var(--space-6) 0 var(--space-24); }

/* ------------------------------------------------------------------ Flex: CTA band */
.cogno-sec--cta { padding: 0; }
.cogno-cta__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.cogno-cta--img-right .cogno-cta__media { order: 2; }
.cogno-cta--img-right .cogno-cta__body { order: 1; }
.cogno-cta__media { min-height: 320px; }
.cogno-cta__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cogno-cta__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 72px); }
.cogno-cta--light { background: var(--cogno-bg-soft, var(--c-bg-soft)); }
.cogno-cta--purple .cogno-cta__body { background: var(--cogno-blue-soft, var(--cogno-blue-soft)); }
.cogno-cta--purple .cogno-cta__heading,
.cogno-cta--purple .cogno-cta__text,
.cogno-cta--purple .cogno-cta__text p { color: var(--c-white); }
.cogno-cta__heading { margin: 0 0 var(--space-12); font-weight: var(--weight-normal); font-size: var(--fs-h2); }
.cogno-cta__text { color: var(--c-ink); }   /* width from the cta body column, not a bespoke cap */
.cogno-cta__btn { align-self: flex-start; margin-top: var(--space-16); }
.cogno-cta__form { margin-top: var(--space-18); }   /* width from the CTA body column */
.cogno-cta__form input[type="text"],
.cogno-cta__form input[type="email"] {
	width: 100%; height: var(--control-h); margin-bottom: var(--space-sm); padding: 0 var(--space-18);
	border: var(--border-width) solid rgba(255,255,255,.6); border-radius: var(--radius-inner);
	background: var(--c-white);
}
.cogno-cta__form input[type="submit"], .cogno-cta__form button { cursor: pointer; }

/* Subscribe (purple form band): white heading + styled submit button. The mc4wp
   form supplies its own <h3>, so the section heading is cleared to avoid a duplicate. */
/* Extra bottom padding so the button clears the footer that rides up (--cogno-footer-pull). */
.cogno-cta--purple .cogno-cta__body {
	padding-block: clamp(40px, 5vw, 72px) clamp(96px, 10vw, 128px);
}
.cogno-cta--purple .cogno-cta__form :is(h1, h2, h3),
.cogno-cta--purple .cogno-cta__form label,
.cogno-cta--purple .cogno-cta__form p { color: var(--c-white); }
.cogno-cta--purple .cogno-cta__form :is(h1, h2, h3) {
	margin: 0 0 var(--space-20);
	font-weight: var(--weight-normal);
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
}
.cogno-cta--purple .cogno-cta__form p { margin: 0 0 var(--space-sm); }
/* Outline fields on the purple band: transparent with a white border + white text (Figma). */
.cogno-cta--purple .cogno-cta__form input[type="text"],
.cogno-cta--purple .cogno-cta__form input[type="email"] {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .8);
	color: var(--c-white);
}
.cogno-cta--purple .cogno-cta__form input[type="text"]::placeholder,
.cogno-cta--purple .cogno-cta__form input[type="email"]::placeholder { color: rgba(255, 255, 255, .85); }
.cogno-cta--purple .cogno-cta__form input:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
/* Outline submit pill to match. */
.cogno-cta__form input[type="submit"],
.cogno-cta__form button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; height: var(--control-h); margin: var(--space-xs) 0 0; padding: 0 var(--space-32);
	background: transparent; color: var(--c-white);
	border: 1.5px solid var(--c-white); border-radius: var(--radius-pill);
	font-family: var(--font); font-weight: var(--weight-semibold); font-size: var(--fs-small);
	cursor: pointer; transition: background .16s ease, color .16s ease, transform .1s ease;
}
.cogno-cta__form input[type="submit"]:hover,
.cogno-cta__form button[type="submit"]:hover { background: var(--c-white); color: var(--c-purple); transform: translateY(-1px); }

@media (max-width: 1024px) {
	/* The grid drops to 6 cols via --grid-cols; text + artwork stack full-width. */
	.cogno-pageheader__grid { min-height: 0; padding-top: var(--space-44); padding-bottom: var(--space-44); }
	.cogno-pageheader__text,
	.cogno-pageheader__media { grid-column: 1 / -1; }
	.cogno-pageheader__media { min-height: 0; margin-top: var(--space-xs); }
	.cogno-cta__grid { grid-template-columns: 1fr; }
	.cogno-cta__media { min-height: 220px; }
	/* Stacked full-width: drop the grid-half alignment, use symmetric container padding. */
	.cogno-cta--purple .cogno-cta__body { padding-inline: var(--container-pad); }
}

/* Last flex section keeps clear of the rounded footer that rides up over content. */
.cogno-flex .cogno-sec:last-child { padding-bottom: calc(var(--space-96) * 1.5); }
/* …except a full-bleed colour band (CTA / contact): it should run flush into the footer
   so the footer's rounded corners reveal the band behind them (no white gap). */
.cogno-flex .cogno-sec--cta:last-child,
.cogno-flex .cogno-sec--contact:last-child { padding-bottom: 0; }


/* ── Promo section (contained feature: image one side, eyebrow / title / text /
   button the other) — Figma. On the 12/6/4 grid. ── */
.cogno-sec--promo { padding-block: var(--sec-pad-y); }
.cogno-promo { align-items: center; row-gap: var(--cogno-space-xl, 48px); }
/* Symmetric split: image ALWAYS spans 6 cols, body 5 cols, 1 col of air between —
   mirrored exactly when the image sits right (img-left: 1–6 | 8–12; img-right: 1–5 | 7–12). */
.cogno-promo__media { grid-column: 1 / 7; }
.cogno-promo__body {
	grid-column: 8 / -1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.cogno-promo--img-right .cogno-promo__media { grid-column: 7 / -1; order: 2; }
.cogno-promo--img-right .cogno-promo__body  { grid-column: 1 / 6; order: 1; }
.cogno-promo__media { min-height: clamp(220px, 24vw, 340px); }
.cogno-promo__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--cogno-radius, 12px);
	box-shadow: var(--cogno-shadow-card, 0 6px 22px rgba(16, 36, 59, .10));
}
/* Scoped with the block class so it beats the .cogno-page p base colour. */
.cogno-promo .cogno-promo__eyebrow {
	margin: 0 0 var(--space-14);
	font-size: var(--cogno-fs-small);
	font-weight: var(--cogno-weight-semibold, 600);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cogno-blue);
}
.cogno-promo__heading {
	margin: 0 0 var(--space-18);
	font-size: var(--cogno-fs-h2);
	color: var(--cogno-navy);
	line-height: var(--cogno-lh-heading, 1.2);
}
.cogno-promo__heading--accent { color: var(--c-periwinkle); }   /* periwinkle (e.g. donation promo) */
/* Width comes from the promo grid column; rhythm from container gap (children margin:0). */
.cogno-promo .cogno-promo__text { color: var(--cogno-ink-soft); display: flex; flex-direction: column; gap: var(--space-16); }
.cogno-promo__text p { margin: 0; }
.cogno-promo__btn { margin-top: var(--space-24); }
.cogno-promo__btn.cogno-btn--cta svg { margin-right: var(--space-2); }

/* First flex section after the hero rises over the purple on a rounded-top
   white sheet (the intentional top-left/right radius). */
.cogno-flex > .cogno-hero + .cogno-sec {
	position: relative;
	z-index: 2;
	background: var(--cogno-surface, var(--c-white));
	border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
	margin-top: calc(-1 * clamp(20px, 3vw, 44px));
}

@media (max-width: 1024px) {
	.cogno-promo__media,
	.cogno-promo__body,
	.cogno-promo--img-right .cogno-promo__media,
	.cogno-promo--img-right .cogno-promo__body { grid-column: 1 / -1; order: initial; }
}

/* ── CTA "card" layout: a white card overlapping a full-bleed image, optionally on a
   tinted lilac band with the molecule graphic (Member Benefits, Figma). ── */
.cogno-sec--cta.cogno-cta--card { padding-block: var(--sec-pad-y); overflow-x: clip; }
.cogno-cta--card-tint {
	background-color: var(--c-tint);
	background-image: var(--cogno-bg, url("../img/background-pattern.svg"));   /* --cogno-bg = optional custom graphic from the editor */
	background-repeat: no-repeat;
	background-position: left -80px top 24%;
	background-size: min(34%, 460px) auto;
}
/* On the 12-col container grid: the card spans 6 cols from col 2 (2 → 8) and the image
   runs col 6 → the end, so they overlap in cols 6–7 (the card sits on top). */
.cogno-cta--card .cogno-cta__grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
	column-gap: var(--gutter);
	align-items: center;
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin-inline: auto;
	padding-inline: var(--container-pad);
	box-sizing: border-box;
}
/* Default = image right, card left (Member Benefits). */
/* The card insets itself with vertical margin (--cta-img-overhang), so the image —
   which stretches to the full row — stands taller than the card top and bottom. */
.cogno-cta--card { --cta-img-overhang: clamp(28px, 4vw, 64px); }
.cogno-cta--card .cogno-cta__media {
	grid-column: 6 / -1;
	grid-row: 1;
	align-self: stretch;
	min-height: clamp(360px, 40vw, 620px);
	margin-right: calc(50% - 50vw);   /* bleed the right edge out to the viewport */
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);     /* round only the left side; right is flush */
	overflow: hidden;
}
.cogno-cta--card .cogno-cta__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cogno-cta--card .cogno-cta__body {
	grid-column: 2 / 8;
	grid-row: 1;
	z-index: 2;
	align-self: center;
	margin-block: var(--cta-img-overhang);
	background: var(--c-white);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 60px rgba(20, 16, 60, .14);
	padding: clamp(28px, 3vw, 52px);
	justify-content: flex-start;
}
/* Mirror: image left (1 → 8), card right (6 → 12). The image bleeds out to the
   viewport's LEFT edge (no container padding) — the mirror of the img-right bleed. */
.cogno-cta--card.cogno-cta--img-left .cogno-cta__media {
	grid-column: 1 / 8;
	margin-right: 0;
	margin-left: calc(50% - 50vw);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;   /* round only the right side; left is flush */
}
.cogno-cta--card.cogno-cta--img-left .cogno-cta__body { grid-column: 6 / 12; }
.cogno-cta--card .cogno-cta__heading { color: var(--c-purple); margin-bottom: var(--space-16); }
.cogno-cta--card .cogno-cta__text { max-width: none; color: var(--c-ink); }
.cogno-cta--card .cogno-cta__text p { color: var(--c-ink); }
/* A list-free card (a lead statement, e.g. About Us "Mission") reads as a standfirst —
   larger than body copy. Cards with a bullet list (Member Benefits) keep body size. */
.cogno-cta--card .cogno-cta__text:not(:has(li)) p {
	font-size: var(--fs-subtitle);
	line-height: var(--lh-body);
}
/* Bullet list inside the card (hollow-circle markers). */
.cogno-cta--card .cogno-cta__text ul { list-style: none; margin: 0; padding: 0; }
.cogno-cta--card .cogno-cta__text ul ul { margin-top: var(--space-6); }
.cogno-cta--card .cogno-cta__text li {
	position: relative;
	padding-left: var(--space-22);
	margin: 0 0 var(--space-8);
	line-height: var(--lh-body);
	color: var(--c-ink);
}
.cogno-cta--card .cogno-cta__text li::before {
	content: "";
	position: absolute;
	left: 2px; top: .5em;
	width: 7px; height: 7px;
	border: 1.5px solid var(--c-blue);
	border-radius: 50%;
}
.cogno-cta--card .cogno-cta__text > ul > li[style] { padding-left: 0; }   /* the empty wrapper li */
.cogno-cta--card .cogno-cta__text > ul > li[style]::before { display: none; }
.cogno-cta--card .cogno-cta__btn { margin-top: var(--space-24); }

@media (max-width: 1024px) {
	.cogno-cta--card .cogno-cta__grid { grid-template-columns: 1fr; }
	.cogno-cta--card .cogno-cta__media,
	.cogno-cta--card.cogno-cta--img-left .cogno-cta__media { grid-column: 1; grid-row: 1; border-radius: var(--radius-lg); }
	.cogno-cta--card .cogno-cta__body,
	.cogno-cta--card.cogno-cta--img-left .cogno-cta__body {
		grid-column: 1; grid-row: 2;
		margin: -40px 14px 0;
		justify-self: stretch;
	}
}

/* ── News / posts listing: equal-height cards, uniform 16:9 media, read-more pinned. ── */
.cogno-sec--listing-post .cogno-sec__heading { text-align: left; margin: 0 0 clamp(20px, 2.4vw, 32px); }
.cogno-card--news { height: 100%; }
.cogno-card--news .cogno-card__media { aspect-ratio: 16 / 9; }
.cogno-card--news .cogno-card__media img,
.cogno-card--news .cogno-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cogno-card--news .cogno-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; padding: var(--space-18) var(--space-20) var(--space-20); }
.cogno-card--news .cogno-card__tag { align-self: flex-start; }
.cogno-card--news .cogno-card__title { margin: var(--space-8) 0 var(--space-8); }
.cogno-card--news .cogno-card__excerpt { opacity: .85; }
.cogno-card--news .cogno-card__more { margin-top: auto; padding-top: var(--space-14); }

/* ------------------------------------------------------------------ Education single (native) */
/* Single-post hero band (education, news): tucks up behind the sticky header pill like
   every other hero, and keeps a compact ~30vh presence (it's the top of a single —
   smaller than the page heroes). Content vertically centred in the band. */
.cogno-edu__hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 30vh;
	background-color: var(--c-purple);
	background-image: var(--cogno-bg, none);   /* URL supplied by the template as data (--cogno-bg) */
	background-size: cover;
	background-position: center;
	margin-top: calc(-1 * var(--cogno-header-h, 72px));
	padding: calc(var(--cogno-header-h, 72px) + var(--space-28)) 0 var(--space-64);
}
/* Hero content stacks: back link → pill → title → date (pill sits UNDER the back
   button). Container-owned rhythm via gap; children carry no vertical margin. */
.cogno-edu__hero-inner { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-12); }
.cogno-edu__hero-inner > * { margin-block: 0; }
/* Back link stays anchored top-left; everything else (pill, title, date) is centred. */
.cogno-edu__hero-inner .cogno-backlink { align-self: flex-start; text-align: left; }
.cogno-edu__hero::before { content: ""; position: absolute; inset: 0; background: rgba(57, 50, 146, .55); }
.cogno-edu__hero-inner { position: relative; box-sizing: border-box; max-width: calc(var(--container-max) + 2 * var(--container-pad)); margin: 0 auto; padding: 0 var(--container-pad); }
.cogno-page .cogno-edu__title { max-width: 720px; margin: 0 0 var(--space-10); color: var(--c-white); font-weight: var(--weight-normal); font-size: var(--fs-h2); line-height: var(--lh-snug); }
.cogno-page .cogno-edu__date { color: var(--c-white); font-size: var(--fs-small); margin: 0; }

.cogno-edu__sheet { position: relative; background: var(--cogno-surface, var(--c-white)); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; margin-top: -28px; padding: clamp(28px, 4vw, 56px) var(--container-pad) var(--space-96); display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; }
/* Reading body spans the middle 6 cols (was 660px); people + related run full width. */
.cogno-edu__main { grid-column: 4 / span 6; min-width: 0; }
@media (max-width: 1024px) { .cogno-edu__main { grid-column: 1 / -1; } }
.cogno-edu__banner-img { width: 100%; height: auto; border-radius: var(--cogno-radius, 8px); display: block; }

.cogno-edu__meta { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10) var(--space-24); margin: var(--space-22) 0 var(--space-6); padding: 0; }
.cogno-edu__meta li { display: flex; align-items: center; gap: var(--space-10); font-size: var(--fs-small); color: var(--cogno-ink); }
.cogno-edu__meta .cogno-ico { width: var(--icon-md); height: var(--icon-md); color: var(--cogno-blue); flex: none; }
.cogno-edu__meta a { color: var(--cogno-blue); }
.cogno-edu__audience { display: flex; align-items: center; gap: var(--space-10); margin: var(--space-10) 0 var(--space-4); font-size: var(--fs-small); }
.cogno-edu__audience .cogno-ico { width: var(--icon-md); height: var(--icon-md); color: var(--cogno-blue); flex: none; }

.cogno-edu__content { margin: var(--space-18) 0; }
.cogno-edu__content h2, .cogno-edu__content h3 { margin-top: 1.2em; }
/* News article content images: fluid radius, tops out at --radius-lg (1rem = 16px).
   Content renders in .cogno-rich__body (flex wysiwyg) or .cogno-edu__content (legacy).
   !important beats the block editor's inline border-radius on has-custom-border images. */
.cogno-news .cogno-rich__body img,
.cogno-news .cogno-edu__content img { border-radius: clamp(0.75rem, 2vw, 1rem) !important; }
.cogno-edu__sponsor { display: flex; align-items: center; gap: var(--space-18); margin: var(--space-24) 0 var(--space-6); }
.cogno-edu__sponsor-label { font-size: var(--fs-small); color: var(--cogno-ink-soft); }
.cogno-edu__sponsor-logo { max-height: 56px; width: auto; }

/* People centred on the middle 8 cols, related on the middle 10 — never full-bleed. */
.cogno-edu__people { grid-column: 3 / span 8; min-width: 0; margin: var(--space-32) 0 0; display: flex; flex-direction: column; gap: var(--space-24); }
.cogno-edu__related { grid-column: 2 / span 10; min-width: 0; margin: var(--space-44) 0 0; }
.cogno-edu__related-h { text-align: center; font-weight: var(--weight-normal); margin: 0 0 var(--space-24); }
@media (max-width: 1024px) {
	.cogno-edu__people, .cogno-edu__related { grid-column: 1 / -1; }
}

@media (max-width: 736px) {
	.cogno-edu__meta { grid-template-columns: 1fr; }
	.cogno-edu__sheet { border-radius: 24px 24px 0 0; }
}
.cogno-page.cogno-edu { padding-top: 0; padding-bottom: 0; }

/* News single/archive tweaks (reuses the .cogno-edu band/sheet pattern). */
.cogno-news__excerpt { font-size: var(--fs-body); color: var(--cogno-ink-soft); margin-bottom: var(--space-18); }
.cogno-news .cogno-edu__content { margin-top: var(--space-22); }
.cogno-news .cogno-card__terms { margin-top: var(--space-18); }

/* ==================================================================
   Section background switch + intro header (Figma 157:567 / 393:584)
   Any flex section can render on plain white or a soft lilac band with
   the brand molecule graphic — the editor `background` control.
   ================================================================== */
/* The molecule graphic is a background on the section itself — the border-radius
   clips it automatically, so we avoid `overflow:hidden` (which would break the
   sticky intro heading). */
.cogno-sec--bg-tint {
	position: relative;
	background-color: var(--c-tint);           /* brand lilac tint */
	background-image: var(--cogno-bg, url("../img/background-pattern.svg"));   /* --cogno-bg = optional custom graphic from the editor */
	background-repeat: no-repeat;
	background-position: right -20px top 40px;
	background-size: min(46%, 640px) auto;
	border-radius: 60px 60px 0 0;        /* rounded band start */
}
.cogno-sec--bg-tint .cogno-sec__container { position: relative; z-index: 1; }
@media (max-width: 1024px) {
	.cogno-sec--bg-tint { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background-size: 62% auto; }
}
@media (max-width: 736px) {
	.cogno-sec--bg-tint { background-size: 80% auto; background-position: right -10px top 24px; }
}

/* ==================================================================
   Rich text — two-column flow + tinted (molecule bottom-left) variant
   (About Us intro: "The Cooperative Trials Group for Neuro-Oncology…").
   ================================================================== */
.cogno-sec--rich-text { padding-block: var(--sec-pad-y); }
.cogno-rich__body--2col {
	column-count: 2;
	column-gap: clamp(36px, 5vw, 96px);
}
.cogno-rich__body--2col > :first-child { margin-top: 0; }
.cogno-rich__body--2col p {
	margin: 0 0 var(--space-22);
	break-inside: avoid;
	font-size: var(--fs-body);
	line-height: var(--lh-relaxed);
	color: var(--c-ink);
}
/* Tinted rich-text: soft lilac + molecule anchored bottom-left. The compound
   selector re-asserts over the "band + next section" white-sheet rule (same
   specificity, later in source) so the graphic survives + the rounded top stays. */
.cogno-sec--pageheader-band + .cogno-sec--rich-tint,
.cogno-sec--rich-tint {
	position: relative;
	background-color: var(--c-tint);
	background-image: var(--cogno-bg, url("../img/background-pattern.svg"));   /* --cogno-bg = optional custom graphic from the editor */
	background-repeat: no-repeat;
	background-position: left -60px center;              /* live site: molecule hugs the left edge, vertically centred */
	background-size: auto min(100%, 680px);              /* full-height left strip (live Group-7497 is 565×1088) */
}
.cogno-sec--rich-tint .cogno-sec__container { position: relative; z-index: 1; }
@media (max-width: 736px) {
	.cogno-rich__body--2col { column-count: 1; }
	.cogno-sec--rich-tint { background-size: 62% auto; background-position: left -30px center; }
}

/* ==================================================================
   Our Aims — bento (Figma 1917:378). 4 fixed slots on a 655/317/317 grid:
     a = icon card (wide, tint)      b = solid purple
     d = photo-left (periwinkle, bottom-wide)   c = photo-top (tint, tall right)
   ================================================================== */
.cogno-bento {
	display: grid;
	grid-template-columns: minmax(0, 2.066fr) minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"a b c"
		"d d c";
	gap: clamp(14px, 1.3vw, 20px);
	align-items: stretch;
}
.cogno-bento__item {
	display: flex;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 280px;
}
.cogno-bento__item--a { grid-area: a; }
.cogno-bento__item--b { grid-area: b; }
.cogno-bento__item--c { grid-area: c; }
.cogno-bento__item--d { grid-area: d; }
.cogno-bento__media { position: relative; }
.cogno-bento__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.cogno-bento .cogno-bento__title {
	margin: 0 0 var(--space-14);
	font-family: var(--font, var(--cogno-font));
	font-weight: var(--weight-semibold);
	font-size: var(--fs-subtitle);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--c-purple);
}
.cogno-bento .cogno-bento__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-relaxed);
	color: var(--c-ink);
}
/* a — icon card: icon left, text right, on tint. */
.cogno-bento__item--icon {
	background: var(--c-tint);
	flex-direction: row;
	align-items: flex-start;
	gap: clamp(16px, 1.6vw, 28px);
	padding: clamp(26px, 2.6vw, 44px);
}
.cogno-bento__item--icon .cogno-bento__media { flex: none; }
.cogno-bento__icon { width: clamp(76px, 6.5vw, 120px); height: auto; display: block; }
.cogno-bento__item--icon .cogno-bento__body { align-self: center; }
/* b — solid purple card: centred stack, white text. */
.cogno-bento__item--solid {
	background: var(--c-purple);
	flex-direction: column;
	justify-content: center;
	padding: clamp(26px, 2.6vw, 40px);
}
.cogno-bento__item--solid .cogno-bento__title,
.cogno-bento__item--solid .cogno-bento__text { color: var(--c-white); }
/* c — photo-top card: image on top, text below, on tint (tall right column). */
.cogno-bento__item--photo-top {
	background: var(--c-tint);
	flex-direction: column;
}
.cogno-bento__item--photo-top .cogno-bento__media { height: clamp(160px, 15vw, 220px); flex: none; }
.cogno-bento__item--photo-top .cogno-bento__body { padding: clamp(22px, 2vw, 32px); }
/* d — photo-left card: image left, text right, on periwinkle. */
.cogno-bento__item--photo-left {
	background: var(--c-periwinkle);
	flex-direction: row;
	align-items: stretch;
}
.cogno-bento__item--photo-left .cogno-bento__media { flex: 0 0 42%; }
.cogno-bento__item--photo-left .cogno-bento__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(26px, 3vw, 48px);
}
.cogno-bento__item--photo-left .cogno-bento__title,
.cogno-bento__item--photo-left .cogno-bento__text { color: var(--c-white); }

@media (max-width: 1024px) {
	.cogno-bento {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"a a"
			"b c"
			"d d";
	}
}
@media (max-width: 736px) {
	.cogno-bento {
		grid-template-columns: 1fr;
		grid-template-areas: "a" "b" "c" "d";
	}
	.cogno-bento__item--icon,
	.cogno-bento__item--photo-left { flex-direction: column; }
	.cogno-bento__item--photo-left .cogno-bento__media { flex: none; height: 200px; }
}

/* Two-column section intro: eyebrow + heading | body paragraph. */
.cogno-sec__intro-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
	column-gap: var(--gutter);
	row-gap: var(--space-md);
	align-items: start;
	margin-bottom: clamp(36px, 4vw, 60px);
}
.cogno-sec__intro-head { grid-column: 1 / 6; }
.cogno-sec__intro-body { grid-column: 7 / -1; }
/* Heading pins to the left while the (taller) right column scrolls past. Scoped so the
   stacked variant (accordion heading) is unaffected. */
.cogno-sec__intro-grid:not(.cogno-sec__intro-grid--stack) .cogno-sec__intro-head {
	position: sticky;
	top: calc(var(--cogno-header-h, 72px) + 24px);
	align-self: start;
}
.cogno-sec__intro-grid--stack { display: block; margin-bottom: clamp(24px, 3vw, 44px); }
.cogno-sec__intro-grid--stack .cogno-sec__intro-body { margin-top: var(--space-sm); }

.cogno-sec .cogno-sec__eyebrow {
	margin: 0 0 var(--space-4);
	font-family: var(--font);
	font-weight: var(--weight-normal);
	font-size: var(--fs-h2);   /* 32 → 45px */
	line-height: var(--lh-tight);
	color: var(--c-periwinkle);                                     /* light periwinkle (Figma) */
}
.cogno-sec .cogno-sec__intro-heading {
	margin: 0;
	font-family: var(--font);
	font-weight: var(--weight-normal);
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	color: var(--c-purple);
}
.cogno-sec .cogno-sec__intro-body {
	color: var(--c-ink-900);
	font-size: var(--fs-body);
	line-height: var(--lh-relaxed);
}
.cogno-sec .cogno-sec__intro-body p { margin: 0 0 var(--space-16); color: var(--c-ink-900); }
.cogno-sec__intro-body p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
	.cogno-sec__intro-head { grid-column: 1 / -1; }
	.cogno-sec__intro-body { grid-column: 1 / -1; }
	/* Stacked: don't pin the heading over the copy. */
	.cogno-sec__intro-grid:not(.cogno-sec__intro-grid--stack) .cogno-sec__intro-head { position: static; }
}

/* The "Welcome" (feature cards) intro keeps its two columns down to tablet portrait,
   stacking only on mobile (≤736). Scoped to featurecards so the shared intro grid on
   other sections keeps the standard ≤1024 stack. The desktop spans (1/6, 7/-1) assume
   12 columns, which don't exist once the grid drops to 6 cols — so re-map to a 50/50
   split on the 6-col tablet grid. Specificity (0,2,0) beats the global stack (0,1,0). */
@media (min-width: 737px) and (max-width: 1024px) {
	.cogno-sec--featurecards .cogno-sec__intro-head { grid-column: 1 / 4; }
	.cogno-sec--featurecards .cogno-sec__intro-body { grid-column: 4 / -1; }
}

@media (max-width: 736px) {
	.cogno-sec__intro-grid { margin-bottom: 0; }
}

/* Right column of the Welcome intro: the lead paragraph, then extended copy
   ("What we do" / "Why it's important") stacked below it. This column is a free
   content area — add more blocks without changing the layout; the heading stays
   pinned left. */
.cogno-sec__intro-lead { margin-bottom: clamp(20px, 2.4vw, 32px); }
.cogno-sec__intro-extra > :first-child { margin-top: 0; }
.cogno-sec .cogno-sec__intro-extra h3 {
	margin: clamp(20px, 2vw, 28px) 0 var(--space-10);
	font-family: var(--font);
	font-weight: var(--weight-semibold);
	font-size: var(--fs-h4);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--c-periwinkle);   /* periwinkle sub-labels (WHAT WE DO / WHY IT'S IMPORTANT) — live parity */
}
.cogno-sec .cogno-sec__intro-extra p { margin: 0 0 var(--space-16); color: var(--c-ink-900); line-height: var(--lh-relaxed); }
.cogno-sec__intro-extra p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Flex: feature cards / logos / contact */
.cogno-featurecards .cogno-card--feature-card { display: flex; flex-direction: column; }
.cogno-featurecards__media img { width: 100%; height: auto; }

/* Photo feature cards — light (purple title over a corner photo) + cover
   (full-bleed photo with a blue gradient). Figma 157:567. */
.cogno-fcard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(340px, 30vw, 420px);
	padding: clamp(24px, 2vw, 32px);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 8px 8px 15px rgba(0, 0, 0, .1);
	isolation: isolate;
}
.cogno-fcard--light { background: var(--c-white); }
.cogno-fcard--light .cogno-fcard__media {
	position: absolute;
	top: -6%;
	right: -6%;
	width: 76%;
	aspect-ratio: 1 / 1;
	z-index: -1;
}
.cogno-fcard__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 46% 54% 46% 54% / 54% 46% 54% 46%;   /* soft organic blob */
}
.cogno-fcard__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.cogno-fcard__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(31, 88, 230, .12) 0%, rgba(31, 88, 230, .18) 40%, rgba(31, 88, 230, .85) 100%);
}
.cogno-fcard__date {
	margin: 0 0 var(--space-8);
	font-family: var(--font);
	font-weight: var(--weight-semibold);
	font-size: var(--fs-body);
	color: var(--c-purple);
}
.cogno-fcard__date--light { color: var(--c-white); }
.cogno-fcard .cogno-fcard__title {
	margin: 0;
	font-family: var(--font);
	font-weight: var(--weight-semibold);
	font-size: var(--fs-h4);   /* 20 → 24px */
	line-height: var(--lh-heading);
	text-transform: uppercase;
	color: var(--c-purple);
}
.cogno-fcard .cogno-fcard__title--light { color: var(--c-white); }
.cogno-fcard__btn { align-self: flex-start; margin-top: clamp(16px, 1.6vw, 24px); }

@media (max-width: 736px) {
	/* Taller cards + a smaller corner blob so the bottom-aligned title clears the photo. */
	.cogno-fcard { min-height: 420px; }
	.cogno-fcard--light .cogno-fcard__media { width: 60%; top: -4%; right: -4%; }
}

.cogno-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 44px); }
.cogno-logos__img { width: auto; object-fit: contain; }
.cogno-logos--lg .cogno-logos__img { max-height: 96px; }
.cogno-logos--md .cogno-logos__img { max-height: 68px; }
.cogno-logos--sm .cogno-logos__img { max-height: 48px; }

/* ── Award winners ────────────────────────────────────────────────────────────
   Grid of award recipients: photo + name + italic award title + an optional
   "Sponsored by" logo row. Plain stacked items (no card chrome). Text-colour
   rules are scoped under .cogno-sec--awards so they out-specify the
   :where(.cogno-page) / .cogno-page p base rules. */
.cogno-sec--awards .cogno-awards { row-gap: clamp(var(--space-40), 4vw, var(--space-64)); }
.cogno-sec--awards .cogno-award { display: flex; flex-direction: column; }
.cogno-sec--awards .cogno-award__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius-inner);
	background: var(--c-clouds);
	margin-bottom: var(--space-16);
}
.cogno-sec--awards .cogno-award__img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cogno-sec--awards .cogno-award__name {
	margin: 0 0 var(--space-10);
	font-size: var(--fs-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-snug);
	color: var(--c-navy);
}
.cogno-sec--awards .cogno-award__title {
	margin: 0;
	font-style: italic;
	line-height: var(--lh-snug);
	color: var(--c-periwinkle);
}
.cogno-sec--awards .cogno-award__sponsors { margin-top: var(--space-20); }
.cogno-sec--awards .cogno-award__sponsored { margin: 0 0 var(--space-12); color: var(--c-navy); }
.cogno-sec--awards .cogno-award__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-20); }
.cogno-sec--awards .cogno-award__logo { display: block; width: auto; height: auto; max-height: 40px; max-width: 120px; object-fit: contain; }

.cogno-sec--contact {
	position: relative;
	background-color: var(--c-periwinkle);               /* periwinkle (Figma) */
	background-image: var(--cogno-bg, none);   /* URL supplied by the template as data (--cogno-bg) */
	background-size: cover; background-position: center;
	padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 7vw, 104px);
}
/* Periwinkle wash over the city/map image so it reads as a faint texture (Figma),
   not a saturated photo. */
.cogno-sec--contact::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(112, 136, 255, .58);
	pointer-events: none;
}
.cogno-sec--contact > .cogno-sec__container { position: relative; z-index: 1; }
/* On the 12/6/4 grid: info = cols 1–5, form card = cols 7–12 (col 6 breathes — was a 5fr/6fr split). */
.cogno-contact__grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
	column-gap: var(--gutter);
	row-gap: var(--space-lg);
	align-items: start;
}
.cogno-contact__info { grid-column: 1 / 6; }
.cogno-contact__formcard { grid-column: 7 / -1; }
/* White text on the purple contact band. The .cogno-page prefix (two classes = 0,2,0)
   out-specifies the zero-specificity :where(.cogno-page) headings + .cogno-page p base
   rules on its own — no !important needed (Elementor, which forced them, is gone). */
.cogno-page .cogno-contact__title { color: var(--c-white); font-weight: var(--weight-normal); font-size: var(--fs-display); line-height: var(--lh-tight); margin: 0 0 clamp(28px, 3vw, 44px); }
.cogno-page .cogno-contact__addr-label { color: var(--c-white); font-size: var(--fs-h3); margin: var(--space-22) 0 var(--space-8); font-weight: var(--weight-semibold); }
.cogno-page .cogno-contact__addr-text { color: var(--c-white); font-size: var(--fs-body); line-height: var(--lh-relaxed); margin: 0; }
/* Form card — bigger radius + softer shadow (Figma). */
.cogno-contact__formcard { background: var(--cogno-surface, var(--c-white)); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 44px); box-shadow: 0 20px 50px rgba(0, 0, 0, .1); }
.cogno-page .cogno-contactform__heading { color: var(--c-purple); font-weight: var(--weight-normal); font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0 0 var(--space-22); }
.cogno-contactform__field { display: block; margin-bottom: var(--space-14); }
.cogno-contactform__field input,
.cogno-contactform__field textarea {
	width: 100%; padding: var(--space-sm) var(--control-pad-x);
	border: var(--border-width) solid var(--c-periwinkle); border-radius: var(--radius-inner);
	background: transparent;
	color: var(--c-ink);
	font-family: var(--cogno-font); font-size: var(--text);
}
.cogno-contactform__field textarea { min-height: 110px; resize: vertical; }
.cogno-contactform__field input::placeholder,
.cogno-contactform__field textarea::placeholder { color: var(--c-ink-soft); opacity: 1; }
.cogno-contactform__field input:focus-visible,
.cogno-contactform__field textarea:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 1px; border-color: var(--c-purple); }
/* Send — a compact purple pill (not full-width). */
.cogno-contactform__submit { border: 0; width: auto; align-self: flex-start; margin-top: var(--space-xs); padding-inline: var(--space-40); }

/* Contact Form 7 — reuse the native .cogno-contactform look (fields inherit
   .cogno-contactform__field styling; here we only fix CF7's own wrappers/states). */
.cogno-contactform--cf7 .wpcf7-form-control-wrap { display: block; }
.cogno-contactform--cf7 .cogno-contactform__field { margin: 0 0 var(--space-14); }
.cogno-contactform--cf7 .cogno-contactform__actions { margin: var(--space-xs) 0 0; display: flex; align-items: center; gap: var(--space-16); }
.cogno-contactform--cf7 .wpcf7-spinner { margin: 0; }
.cogno-page .cogno-contactform--cf7 .wpcf7-not-valid { border-color: var(--c-error-fg); }
.cogno-contactform--cf7 .wpcf7-not-valid-tip { display: block; margin-top: var(--space-2xs, 4px); color: var(--c-error-fg); font-size: var(--fs-small); }
.cogno-page .cogno-contactform--cf7 .wpcf7-form .wpcf7-response-output {
	margin: var(--space-16) 0 0; padding: var(--space-10) var(--space-16);
	border: 0; border-radius: var(--cogno-radius, 8px); font-size: var(--fs-small);
	background: var(--c-clouds); color: var(--c-ink);
}
.cogno-page .cogno-contactform--cf7 .wpcf7-form.sent .wpcf7-response-output { background: var(--c-success-bg); color: var(--c-success-fg); }
.cogno-page .cogno-contactform--cf7 .wpcf7-form.failed .wpcf7-response-output,
.cogno-page .cogno-contactform--cf7 .wpcf7-form.aborted .wpcf7-response-output,
.cogno-page .cogno-contactform--cf7 .wpcf7-form.spam .wpcf7-response-output,
.cogno-page .cogno-contactform--cf7 .wpcf7-form.invalid .wpcf7-response-output,
.cogno-page .cogno-contactform--cf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.cogno-page .cogno-contactform--cf7 .wpcf7-form.payment-required .wpcf7-response-output { background: var(--c-error-bg); color: var(--c-error-fg); }
/* The section after the contact band rises over the periwinkle on a rounded-top white
   sheet (Figma) — matching the page_header band → next-section transition. No z-index:
   DOM order paints it over the band, and the footer (z-index 1) must stay on top so its
   rounded corners ride up over this sheet when it's the last section. */
.cogno-sec--contact + .cogno-sec {
	position: relative;
	background: var(--cogno-surface, var(--c-white));
	border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
	margin-top: calc(-1 * clamp(20px, 3vw, 44px));
	padding-top: clamp(40px, 5vw, 80px);
}
.cogno-contactform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cogno-contactform__notice { padding: var(--space-10) var(--space-16); border-radius: var(--cogno-radius, 8px); font-size: var(--fs-small); }
.cogno-contactform__notice--ok { background: var(--c-success-bg); color: var(--c-success-fg); }
.cogno-contactform__notice--err { background: var(--c-error-bg); color: var(--c-error-fg); }

@media (max-width: 1024px) {
	/* 6-col grid via --grid-cols; info + form stack full-width. */
	.cogno-contact__info,
	.cogno-contact__formcard { grid-column: 1 / -1; }
}