/* ============================================================
   TRANSITIONS LAB — LIGHT SYSTEM
   Warm cream base + block-colour sections. Sharp black/white
   contrast. No grey. Typography carries hierarchy through
   weight and scale, never through tint.
   Change a token here and it updates everywhere.
   ============================================================ */

:root{
  /* Base — warm paper */
  --paper:#F5EDDD;
  --paper-2:#EFE4CE;
  --white:#FFFFFF;
  --ink:#0A0A0A;

  /* Block colours — used as full-bleed section backgrounds */
  --orange:#EE5B22;
  --coral:#F26C4F;
  --forest:#0F3D2E;
  --butter:#F3D765;
  --cobalt:#1F3F7A;
  --plum:#3C2549;

  /* Official EU flag colours (Reflex Blue + PMS Yellow) */
  --euro-blue:#003399;
  --euro-gold:#FFCC00;

  /* Legacy aliases kept so interior pages keep rendering. */
  --on-light:#0A0A0A;
  --on-light-soft:#0A0A0A;
  --on-dark:#F5EDDD;
  --on-dark-soft:#F5EDDD;
  --off:#F5EDDD;
  --off-line:#0A0A0A;
  --char:#0F3D2E;
  --char-line:#0A0A0A;
  --violet:#1F3F7A;
  --sky:#1F3F7A;
  --magenta:#EE5B22;

  --max:1200px;
  --max-prose:720px;
}

/* ── Base ─────────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:800;line-height:1.02;margin:0;letter-spacing:-.03em;color:inherit;}
a{color:inherit;}
img{max-width:100%;height:auto;display:block;}

/* Section wrappers */
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
.wrap-prose{max-width:var(--max-prose);margin:0 auto;padding:0 32px;}

/* Eyebrow */
.eyebrow{
  font-family:'Hanken Grotesk',sans-serif;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:800;color:var(--orange);margin:0 0 22px;
  display:inline-block;
}

/* Figures / diagrams */
.prose figure,.figure{margin:2.4em auto;max-width:100%;text-align:center;}
.prose figure img,.figure img,.diagram{
  width:100%;height:auto;max-width:100%;display:block;margin:0 auto;
  border:2px solid var(--ink);background:var(--paper);
}
.prose figure figcaption,.figure figcaption{
  font-size:14.5px;line-height:1.5;color:var(--ink);margin-top:.7em;font-weight:500;
}

/* ── Header / nav ─────────────────────────────────────────── */
header.site{
  position:sticky;top:0;z-index:40;
  background:var(--paper);border-bottom:2px solid var(--ink);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;position:relative;}
.brand{display:inline-flex;align-items:center;text-decoration:none;line-height:1;color:var(--ink);}
.brand-logo{height:36px;width:auto;max-width:100%;display:block;object-fit:contain;transition:opacity .2s;}
.brand-logo--footer{height:92px;margin-bottom:14px;}
.brand:hover .brand-logo{opacity:.85;}
@media(max-width:860px){.brand-logo{height:36px;}}
@media(max-width:420px){.brand-logo{height:32px;}}

.nav nav{display:flex;gap:32px;align-items:center;}
.nav nav > a{font-size:15px;text-decoration:none;color:var(--ink);font-weight:600;transition:opacity .15s;}
.nav nav > a:hover{opacity:.6;}
.nav nav > a.current{border-bottom:2px solid var(--ink);padding-bottom:2px;}
.nav-toggle{display:none;background:none;border:0;font-size:24px;color:var(--ink);cursor:pointer;padding:6px;}

/* Nav dropdown groups */
.nav details.nav-group{position:relative;display:inline-flex;align-items:center;}
.nav details.nav-group summary.nav-label{
  font-family:'Hanken Grotesk',sans-serif;font-size:15px;font-weight:600;
  color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;
  gap:.4em;user-select:none;list-style:none;
}
.nav details.nav-group summary.nav-label::-webkit-details-marker{display:none;}
.nav details.nav-group summary.nav-label::marker{content:"";}
.nav details.nav-group summary.nav-label::after{
  content:"";display:inline-block;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;margin-top:2px;
  transition:transform .18s ease;
}
.nav details.nav-group[open] summary.nav-label::after{transform:rotate(180deg);}
.nav details.nav-group.current summary.nav-label{border-bottom:2px solid var(--ink);padding-bottom:2px;}
.nav details.nav-group:not([open]) > .nav-dropdown{display:none;}
.nav details.nav-group[open] > .nav-dropdown{
  position:absolute;top:calc(100% + 20px);left:-18px;
  background:var(--paper);border:2px solid var(--ink);
  padding:8px 0;min-width:250px;display:flex;flex-direction:column;gap:0;
  box-shadow:6px 6px 0 var(--ink);z-index:60;
}
.nav .nav-dropdown a{padding:12px 22px;white-space:nowrap;font-size:15px;color:var(--ink);text-decoration:none;font-weight:500;display:flex;align-items:center;gap:9px;}
.nav .nav-dropdown a:hover,.nav .nav-dropdown a.current{background:var(--butter);font-weight:700;}
/* Small country/programme flag adornment inside a nav dropdown link */
.nav .nav-flag{
  height:12px;width:18px;display:inline-block;flex:none;
  border:1px solid var(--ink);object-fit:cover;
}
/* When the current page is the European Impact Tracking one, tint the
   nav-label of that link (and the Services group header) European blue. */
a[href="/european-impact-tracking"]{color:var(--euro-blue);}
a[href="/european-impact-tracking"].current{color:var(--euro-blue);font-weight:800;}

/* ── Buttons ──────────────────────────────────────────────── */
.btn,.prose a.btn{
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:16px;
  text-decoration:none;display:inline-flex;align-items:center;gap:.6em;
  padding:14px 24px;border-radius:0;border:2px solid var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease,color .15s ease;
  cursor:pointer;background:var(--paper);color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.prose a.btn:hover{background:var(--butter);color:var(--ink);text-decoration:none;}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);}
.btn-solid,.prose a.btn-solid{background:var(--orange);color:var(--ink);}
.btn-ghost,.prose a.btn-ghost{background:transparent;color:var(--ink);}
.btn-ink,.prose a.btn-ink{background:var(--ink);color:var(--paper);text-decoration:none;}
.prose a.btn-ink:hover{background:var(--ink);color:var(--butter);}
/* Buttons on dark blocks */
.on-dark .btn,.section-forest .btn,.section-cobalt .btn,.section-plum .btn,.statement .btn{
  background:var(--butter);color:var(--ink);border-color:var(--ink);
  box-shadow:4px 4px 0 var(--paper);
}
.on-dark .btn:hover,.section-forest .btn:hover,.section-cobalt .btn:hover,.section-plum .btn:hover,.statement .btn:hover{
  box-shadow:6px 6px 0 var(--paper);
}
.on-dark .btn-ghost,.section-forest .btn-ghost,.section-cobalt .btn-ghost,.section-plum .btn-ghost,.statement .btn-ghost{
  background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:4px 4px 0 var(--butter);
}

/* ── Section scaffolds — block colours ────────────────────── */
section{padding:110px 0;position:relative;}
section.section-paper{background:var(--paper);color:var(--ink);}
section.section-white{background:var(--white);color:var(--ink);}
section.section-forest{background:var(--forest);color:var(--paper);}
section.section-coral{background:var(--coral);color:var(--ink);}
section.section-butter{background:var(--butter);color:var(--ink);}
section.section-cobalt{background:var(--cobalt);color:var(--paper);}
section.section-plum{background:var(--plum);color:var(--paper);}
/* Text colours on dark blocks */
section.section-forest h1,section.section-forest h2,section.section-forest h3,section.section-forest h4,
section.section-cobalt h1,section.section-cobalt h2,section.section-cobalt h3,section.section-cobalt h4,
section.section-plum h1,section.section-plum h2,section.section-plum h3,section.section-plum h4{color:var(--paper);}
section.section-forest .eyebrow,section.section-cobalt .eyebrow,section.section-plum .eyebrow{color:var(--butter);}

/* Legacy compatibility for pages that still use .light and .dark */
section.light{background:var(--paper);color:var(--ink);padding:110px 0;}
section.light h1,section.light h2,section.light h3,section.light h4{color:var(--ink);}
section.light .eyebrow{color:var(--orange);}
section.dark{background:var(--forest);color:var(--paper);padding:110px 0;}
section.dark h1,section.dark h2,section.dark h3,section.dark h4{color:var(--paper);}
section.dark .eyebrow{color:var(--butter);}
section.dark.glow{background:var(--forest);}
section.dark.glow::before{content:none;}

/* Section heads */
.section-head{max-width:64ch;margin-bottom:60px;}
.section-head h2{font-size:clamp(30px,4.2vw,56px);letter-spacing:-.03em;line-height:1.05;font-weight:800;}
.section-head p{font-size:20px;margin:20px 0 0;line-height:1.5;max-width:56ch;font-weight:500;}

/* Hairline between adjacent sections */
section + section{border-top:2px solid var(--ink);}

/* ── Hero (home page) ─────────────────────────────────────── */
.hero{
  padding:120px 0 110px;background:var(--paper);color:var(--ink);
  position:relative;overflow:hidden;border-bottom:2px solid var(--ink);
}
.hero .wrap{position:relative;z-index:2;}
.hero .eyebrow{color:var(--orange);}

/* Video background — fits/crops (object-fit:cover), never stretches */
.hero.has-video{color:var(--paper);background:var(--ink);}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  z-index:0;display:block;pointer-events:none;
}
/* Cream veil over the video for text legibility, warm-toned so the
   design still reads as light. Sits between the video and the copy. */
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(245,237,221,.62) 0%,rgba(245,237,221,.82) 55%,rgba(245,237,221,.92) 100%);
}
.hero.has-video .eyebrow{color:var(--orange);}
.hero.has-video h1,.hero.has-video .lede{color:var(--ink);}
.hero.has-video h1 .cursor{background:var(--ink);}
.hero h1{
  font-size:clamp(40px,6.5vw,88px);
  font-weight:800;letter-spacing:-.03em;line-height:1;
  margin:0 0 28px;max-width:18ch;min-height:1.8em;
}
.hero h1 .cursor{
  display:inline-block;width:.08em;height:.9em;
  background:var(--ink);vertical-align:-0.05em;margin-left:.05em;
  animation:blink 1s steps(2,end) infinite;
}
@keyframes blink{50%{opacity:0;}}
.hero .lede{
  font-size:clamp(19px,2.3vw,25px);
  line-height:1.45;max-width:52ch;margin:0 0 40px;
  font-weight:500;min-height:3em;
}
.hero .cta-row{display:flex;gap:14px;margin-top:44px;flex-wrap:wrap;}

/* ── Page hero (interior pages) ───────────────────────────── */
.page-hero{
  padding:104px 0 76px;background:var(--white);color:var(--ink);
  border-bottom:2px solid var(--ink);position:relative;
}
.page-hero .eyebrow{color:var(--orange);}
.page-hero .eyebrow a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
.page-hero .eyebrow a:hover{color:var(--ink);}
.page-hero h1{
  font-size:clamp(40px,6vw,84px);font-weight:800;letter-spacing:-.03em;
  line-height:1;margin:0 0 22px;max-width:20ch;color:var(--ink);
}
.page-hero h1 em{font-style:normal;color:var(--orange);}
.page-hero .lede{
  font-size:clamp(18px,2vw,22px);line-height:1.5;max-width:60ch;
  font-weight:500;color:var(--ink);
}
/* Topic icon in the page-hero: small illustrative PNG above the eyebrow. */
.page-hero .topic-icon{
  height:88px;width:auto;max-width:100%;display:block;
  margin:0 0 24px;
}
@media(max-width:640px){.page-hero .topic-icon{height:68px;margin-bottom:18px;}}

/* Coloured hero variants — set via hero-<colour> class from build.py */
.page-hero.hero-sky{background:#CFE1EE;color:var(--ink);}
.page-hero.hero-sky .eyebrow{color:var(--cobalt);}
.page-hero.hero-coral{background:var(--coral);color:var(--ink);}
.page-hero.hero-coral .eyebrow{color:var(--ink);opacity:.75;}
.page-hero.hero-butter{background:var(--butter);color:var(--ink);}
.page-hero.hero-butter .eyebrow{color:var(--ink);opacity:.75;}
.page-hero.hero-forest{background:var(--forest);color:var(--paper);}
.page-hero.hero-forest h1,.page-hero.hero-forest .lede{color:var(--paper);}
.page-hero.hero-forest .eyebrow{color:var(--butter);}
.page-hero.hero-cobalt{background:var(--cobalt);color:var(--paper);}
.page-hero.hero-cobalt h1,.page-hero.hero-cobalt .lede{color:var(--paper);}
.page-hero.hero-cobalt .eyebrow{color:var(--butter);}
.page-hero.hero-plum{background:var(--plum);color:var(--paper);}
.page-hero.hero-plum h1,.page-hero.hero-plum .lede{color:var(--paper);}
.page-hero.hero-plum .eyebrow{color:var(--butter);}

/* ── Steps (How we work) ──────────────────────────────────── */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:2px solid var(--ink);
}
.step-card{
  padding:44px 34px;color:var(--ink);
  border-right:2px solid var(--ink);
  display:flex;flex-direction:column;gap:16px;min-height:280px;
}
.step-card:last-child{border-right:0;}
.step-card .num{
  font-size:88px;font-weight:800;line-height:1;
  letter-spacing:-.05em;color:var(--ink);
}
.step-card h3{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.step-card p{font-size:16px;line-height:1.5;margin:0;color:var(--ink);font-weight:500;}
.step-card:nth-child(1){background:var(--butter);}
.step-card:nth-child(2){background:var(--coral);}
.step-card:nth-child(3){background:var(--paper);}

/* ── Expertise grid ───────────────────────────────────────── */
.expertise-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:2px solid var(--ink);
}
.exp-card{
  padding:28px 24px;background:var(--paper);color:var(--ink);
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  transition:background .15s ease;min-height:220px;
}
.exp-card:nth-child(4n){border-right:0;}
.exp-card:nth-last-child(-n+4){border-bottom:0;}
.exp-card:hover{background:var(--butter);}
.exp-card .exp-icon{
  height:72px;width:auto;object-fit:contain;
  margin:0;display:block;align-self:flex-start;
  /* Transparent PNGs so they read on any card background. Left-aligned
     with the text below, not centred. Uses the card's own gap for
     spacing so the icon sits close to the number. */
}
@media(max-width:640px){.exp-card .exp-icon{height:64px;}}
.exp-card .exp-num{font-family:'Hanken Grotesk';font-size:12px;letter-spacing:.18em;font-weight:800;text-transform:uppercase;color:var(--orange);}
.exp-card h3{font-size:19px;font-weight:800;line-height:1.15;letter-spacing:-.015em;color:var(--ink);}
.exp-card p{font-size:14.5px;line-height:1.45;margin:0;color:var(--ink);font-weight:500;flex:1;}
.exp-card .arrow{margin-top:auto;font-weight:800;font-size:22px;line-height:1;}

/* ── Insight/case cards ───────────────────────────────────── */
.insight-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:2px solid var(--ink);
}
.insight-card{
  background:var(--paper);color:var(--ink);
  border-right:2px solid var(--ink);
  display:flex;flex-direction:column;text-decoration:none;
  transition:background .15s ease;
}
.insight-card:last-child{border-right:0;}
/* When the row runs to two rows of three (six total), the third card
   ends the first row and needs no right border, and the first three
   need a bottom rule to separate them from the second row. */
.insight-row:has(> .insight-card:nth-child(6)) .insight-card:nth-child(3){border-right:0;}
.insight-row:has(> .insight-card:nth-child(6)) .insight-card:nth-child(-n+3){border-bottom:2px solid var(--ink);}
.insight-card .stripe{
  padding:8px 18px;display:flex;align-items:center;
  border-bottom:2px solid var(--ink);min-height:0;
}
.insight-card:nth-child(1) .stripe{background:var(--coral);color:var(--ink);}
.insight-card:nth-child(2) .stripe{background:var(--cobalt);color:var(--paper);}
.insight-card:nth-child(3) .stripe{background:var(--butter);color:var(--ink);}
.insight-card .kicker{font-size:10.5px;letter-spacing:.18em;font-weight:800;text-transform:uppercase;line-height:1.2;}
/* Photo variant: replaces the coloured stripe with a diagram or photo.
   Kicker becomes a small chip overlaid top-left, matching case-card. */
.insight-card.has-photo .card-photo{
  border-bottom:2px solid var(--ink);background:var(--paper-2);
  display:flex;flex-direction:column;
}
.insight-card.has-photo .card-photo img{
  width:100%;aspect-ratio:3/2;object-fit:contain;display:block;background:var(--paper-2);
}
.insight-card.has-photo .card-photo .kicker{
  order:-1;
  padding:12px 20px;border-bottom:2px solid var(--ink);
  font-family:'Hanken Grotesk',sans-serif;
  font-size:13px;letter-spacing:.20em;text-transform:uppercase;font-weight:800;
  line-height:1.3;text-align:left;
}
.insight-card.has-photo:nth-child(1) .card-photo .kicker{background:var(--coral);color:var(--ink);}
.insight-card.has-photo:nth-child(2) .card-photo .kicker{background:var(--cobalt);color:var(--paper);}
.insight-card.has-photo:nth-child(3) .card-photo .kicker{background:var(--butter);color:var(--ink);}
.insight-card.has-photo:nth-child(4) .card-photo .kicker{background:var(--butter);color:var(--ink);}
.insight-card.has-photo:nth-child(5) .card-photo .kicker{background:var(--forest);color:var(--paper);}
.insight-card.has-photo:nth-child(6) .card-photo .kicker{background:var(--coral);color:var(--ink);}
@media(max-width:640px){
  .insight-card .stripe{padding:7px 16px;}
  .insight-card .stripe .kicker{font-size:10px;letter-spacing:.16em;}
  .insight-card.has-photo .card-photo .kicker{font-size:12px;letter-spacing:.18em;padding:10px 16px;}
}
.insight-card .body{padding:26px 24px 24px;flex:1;display:flex;flex-direction:column;gap:12px;}
.insight-card h3{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--ink);}
.insight-card p{font-size:15px;line-height:1.5;margin:0;color:var(--ink);font-weight:500;flex:1;}
.insight-card .read{font-weight:800;color:var(--ink);margin-top:8px;}
.insight-card:hover{background:var(--butter);}

/* ── Statement block ──────────────────────────────────────── */
.statement{padding:140px 0;background:var(--forest);color:var(--paper);position:relative;overflow:hidden;}
.statement .wrap{position:relative;z-index:2;}
.statement.has-video .statement-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  z-index:0;display:block;pointer-events:none;
}
.statement.has-video .statement-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,42,32,.72) 0%,rgba(20,42,32,.82) 55%,rgba(20,42,32,.90) 100%);
}

/* Generic video-backdrop pattern for any .section-*.has-video block. */
.section-forest.has-video,
.section-cobalt.has-video,
.section-plum.has-video{position:relative;overflow:hidden;}
.section-forest.has-video > .wrap,
.section-cobalt.has-video > .wrap,
.section-plum.has-video > .wrap{position:relative;z-index:2;}
.has-video > .section-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  z-index:0;display:block;pointer-events:none;
}
.has-video > .section-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
}
.section-forest.has-video > .section-veil{
  background:
    linear-gradient(180deg,rgba(20,42,32,.78) 0%,rgba(20,42,32,.84) 55%,rgba(20,42,32,.90) 100%);
}
.statement blockquote{
  font-size:clamp(30px,4.6vw,56px);
  line-height:1.15;font-weight:700;letter-spacing:-.02em;
  max-width:22ch;margin:0;color:var(--paper);
}
.statement blockquote .highlight{
  background:var(--butter);color:var(--ink);
  padding:.02em .18em;
}
.statement cite{
  display:block;margin-top:36px;font-style:normal;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--butter);
}

/* ── Prose (interior article bodies) ──────────────────────── */
.prose{max-width:var(--max-prose);margin:0 auto;color:var(--ink);}
.prose > * + *{margin-top:1.15em;}
.prose h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.02em;margin-top:1.8em;line-height:1.05;color:var(--ink);}
.prose h3{font-size:24px;font-weight:800;letter-spacing:-.015em;margin-top:1.6em;line-height:1.1;color:var(--ink);}
.prose p{font-size:18px;line-height:1.7;color:var(--ink);font-weight:400;}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;transition:background .15s ease;}
.prose a:hover{background:var(--butter);}
.prose ul,.prose ol{padding-left:1.4em;margin:0;}
.prose li{margin:.4em 0;font-size:18px;line-height:1.65;color:var(--ink);}
.prose blockquote{
  border-left:4px solid var(--ink);padding:.3em 0 .3em 1.2em;margin:1.6em 0;
  font-size:22px;font-weight:600;font-style:italic;color:var(--ink);
}
.prose figure{margin:2em 0;}
.prose figcaption{font-size:14.5px;color:var(--ink);margin-top:.7em;font-weight:500;}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--butter);padding:.1em .35em;}
.prose hr{border:0;border-top:2px solid var(--ink);margin:2.4em 0;}
.prose .prose-eyebrow{font-family:'Hanken Grotesk',sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--orange);margin:2.6em 0 -.4em;display:block;}
.prose .prose-eyebrow + h2{margin-top:.4em;}

/* Placeholder marker inside prose or metrics */
.ph{color:var(--orange);}

/* ── Target cards (used on /who-we-serve): coloured header + body ── */
.prose .target-card{
  border:2px solid var(--ink);background:var(--paper);
  margin:2em 0 2.4em;box-shadow:6px 6px 0 var(--ink);
  /* Offset the anchor scroll so the sticky header doesn't cover the top. */
  scroll-margin-top:96px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.prose .target-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);}
.prose .target-card .lede{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:clamp(17px,1.8vw,20px);line-height:1.4;font-weight:600;
  letter-spacing:-.005em;color:var(--ink);margin:0 0 1em;
}
.prose .target-card .lede em{font-style:normal;color:var(--orange);}
.prose .target-card .kicker-line{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);opacity:.55;margin:0 0 8px;
}
.prose .target-card .fit-list{
  list-style:none;padding:0;margin:8px 0 4px;
  display:flex;flex-direction:column;gap:6px;
}
.prose .target-card .fit-list li{
  position:relative;padding-left:22px;font-size:15.5px;line-height:1.45;color:var(--ink);
}
.prose .target-card .fit-list li::before{
  content:"→";position:absolute;left:0;top:0;color:var(--orange);font-weight:800;
}
.prose .target-card .target-head{
  padding:22px 26px;border-bottom:2px solid var(--ink);
  display:flex;flex-direction:column;gap:6px;
}
/* Optional icon on the left of the head (used on the EU consortia card). */
.prose .target-card .target-head:has(.target-icon){
  flex-direction:row;align-items:center;gap:20px;
}
.prose .target-card .target-icon{
  height:64px;width:auto;flex:none;display:block;object-fit:contain;
}
.prose .target-card .target-head-text{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
@media(max-width:640px){
  .prose .target-card .target-icon{height:48px;}
}
.prose .target-card .target-tag{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:var(--ink);
}
.prose .target-card .target-head h3{
  font-size:clamp(22px,2.8vw,30px);font-weight:800;letter-spacing:-.02em;
  line-height:1.05;margin:0;color:var(--ink);
}
.prose .target-card.c-coral .target-head{background:var(--coral);}
.prose .target-card.c-butter .target-head{background:var(--butter);}
.prose .target-card.c-cobalt .target-head{background:var(--cobalt);}
.prose .target-card.c-forest .target-head{background:var(--forest);}
.prose .target-card.c-plum .target-head{background:var(--plum);}
.prose .target-card.c-euro-blue .target-head{background:var(--euro-blue);}
.prose .target-card.c-cobalt .target-head h3,
.prose .target-card.c-cobalt .target-tag,
.prose .target-card.c-forest .target-head h3,
.prose .target-card.c-forest .target-tag,
.prose .target-card.c-plum .target-head h3,
.prose .target-card.c-plum .target-tag,
.prose .target-card.c-euro-blue .target-head h3,
.prose .target-card.c-euro-blue .target-tag{color:var(--paper);}
.prose .target-card .target-body{padding:26px 26px 24px;color:var(--ink);}
.prose .target-card .target-body p{margin:0 0 .9em;}
.prose .target-card .target-body p:last-of-type{margin-bottom:0;}
.prose .target-card .target-body strong{color:var(--ink);}
.prose .target-card .target-ctas{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;
}
.prose .target-card .target-cta{
  display:inline-flex;align-items:center;gap:.5em;
  margin:0;padding:10px 18px;
  border:2px solid var(--ink);background:var(--butter);
  font-weight:800;color:var(--ink);text-decoration:none;font-size:14.5px;
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
  box-shadow:3px 3px 0 var(--ink);
}
.prose .target-card .target-cta:hover{
  transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);
  background:var(--orange);
}
/* Direct-child .target-cta (no wrapper) keeps its own top margin so
   existing single-CTA cards still space correctly. */
.prose .target-card .target-body > .target-cta{margin-top:16px;}

/* ── Callout boxes (asides, ethics panels, resource lists) ── */
.prose .callout{
  border:2px solid var(--ink);background:var(--butter);color:var(--ink);
  padding:22px 26px 24px;margin:2em 0;box-shadow:5px 5px 0 var(--ink);
}
.prose .callout.c-cobalt{background:var(--cobalt);color:var(--paper);}
.prose .callout.c-forest{background:var(--forest);color:var(--paper);}
.prose .callout.c-coral{background:var(--coral);color:var(--ink);}
.prose .callout.c-white{background:var(--white);color:var(--ink);}
.prose .callout .kicker{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:var(--orange);margin:0 0 6px;display:block;
}
.prose .callout.c-cobalt .kicker,
.prose .callout.c-forest .kicker{color:var(--butter);}
/* On coral the orange kicker vanishes against the near-orange fill; use ink. */
.prose .callout.c-coral .kicker{color:var(--ink);}
.prose .callout h3{margin:0 0 .5em;font-size:22px;font-weight:800;letter-spacing:-.02em;color:inherit;}
.prose .callout p{margin:0 0 .7em;color:inherit;font-size:16.5px;line-height:1.55;}
.prose .callout p:last-child{margin-bottom:0;}
.prose .format-badge{
  display:inline-block;font-family:'Hanken Grotesk',sans-serif;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  padding:8px 14px 7px;border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);vertical-align:baseline;
  line-height:1;white-space:nowrap;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease;
}
.prose .format-badge.fmt-pdf{background:var(--coral);color:var(--ink);}
.prose .format-badge.fmt-web{background:var(--cobalt);color:var(--paper);}
.prose a:has(> .format-badge){text-decoration:none;background:transparent;}
.prose a:hover > .format-badge{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.prose a:active > .format-badge{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
/* Theory maps compact row on the homepage */
.theory-maps-section{padding:56px 0 72px;}
.theory-maps-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;
}
@media (max-width:960px){.theory-maps-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.theory-maps-row{grid-template-columns:1fr;}}
.theory-map-card{
  display:flex;flex-direction:column;gap:8px;
  background:var(--white);border:2px solid var(--ink);color:var(--ink);
  padding:18px 20px 20px;box-shadow:4px 4px 0 var(--ink);
  text-decoration:none;transition:transform .12s ease,box-shadow .12s ease;
}
.theory-map-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);text-decoration:none;background:var(--butter);}
.theory-map-card:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.theory-map-card .tm-eyebrow{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:var(--coral);
}
.theory-map-card h3{
  margin:0;font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--ink);
}
.theory-map-card p{
  margin:0;font-size:14.5px;line-height:1.45;color:var(--ink);flex-grow:1;
}
.theory-map-card .tm-cta{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:var(--cobalt);margin-top:4px;
}
/* Definition highlight — yellow marker, no bold */
.prose .highlight{background:var(--butter);color:var(--ink);padding:1px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
/* Article aside — flagship-piece callout box, butter tint with coral left rule */
.prose .tl-box{
  background:rgba(243,220,148,0.35);
  border-left:6px solid var(--coral);
  border-top:none;border-right:none;border-bottom:none;
  padding:20px 24px 22px;margin:2em 0;
}
.prose .tl-box p{margin:0 0 .7em;font-size:16px;line-height:1.55;color:var(--ink);}
.prose .tl-box p:last-child{margin-bottom:0;}
.prose .tl-box p strong:first-child{
  font-size:17.5px;letter-spacing:-.005em;display:inline-block;margin-bottom:2px;
}
.prose .tl-box a{color:var(--ink);}
/* Cluster.concept numbering on the theory-map pages */
body[data-page="economics-of-transitions"] .prose,
body[data-page="innovation-dynamics"] .prose,
body[data-page="human-side-of-technology"] .prose{counter-reset:cluster;}
body[data-page="economics-of-transitions"] .prose h2,
body[data-page="innovation-dynamics"] .prose h2,
body[data-page="human-side-of-technology"] .prose h2{counter-increment:cluster;counter-reset:concept;}
body[data-page="economics-of-transitions"] .prose h3::before,
body[data-page="innovation-dynamics"] .prose h3::before,
body[data-page="human-side-of-technology"] .prose h3::before{
  content:counter(cluster) "." counter(concept) "  ";
  counter-increment:concept;color:var(--coral);font-weight:800;margin-right:.35em;
}
.prose .callout ul{margin:.6em 0 0;padding-left:1.2em;}
.prose .callout li{color:inherit;font-size:16px;line-height:1.55;}
.prose .callout a:not(.btn){color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
.prose .callout a.btn-ink{color:var(--paper);}
.prose .callout a.btn-ink:hover{color:var(--butter);}
.prose .callout.c-cobalt a:hover,.prose .callout.c-forest a:hover{background:var(--butter);color:var(--ink);}

/* ── Pill labels (inline chip badges) ── */
.prose .pill,.pill{
  display:inline-block;padding:7px 14px;
  border:2px solid var(--ink);font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);
  margin-right:6px;line-height:1.3;cursor:pointer;
  text-decoration:none;box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
a.pill:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--butter);color:var(--ink);}
a.pill:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);}
a.pill:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}
/* Pill-row: a chip strip that survives paragraph wrapping. */
.prose .pill-row{display:flex;flex-wrap:wrap;gap:12px 12px;margin:1em 0 1.6em;}
.prose .pill-row .pill{margin:0;}

.pill.c-coral{background:var(--coral);}
.pill.c-butter{background:var(--butter);}
.pill.c-cobalt{background:var(--cobalt);color:var(--paper);border-color:var(--ink);}
.pill.c-forest{background:var(--forest);color:var(--paper);}
.pill.c-plum{background:var(--plum);color:var(--paper);}
.pill.c-orange{background:var(--orange);color:var(--ink);}

/* ── Partner logo strip (home page): grayscale-until-hover row of logos. */
.logo-strip{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:56px;
}
.logo-strip a{display:inline-flex;align-items:center;justify-content:center;padding:8px 6px;}
.logo-strip img{
  height:72px;width:auto;max-width:240px;object-fit:contain;
  display:block;opacity:.85;transition:opacity .15s ease;
}
/* MiMaji's mark carries a small stack and clear space that shrinks
   visually next to word-mark logos, so it gets a targeted size boost. */
.logo-strip img[alt*="MiMaji"]{height:104px;max-width:200px;}
.logo-strip a:hover img{opacity:1;}
@media(max-width:640px){
  .logo-strip{gap:32px;}
  .logo-strip img{height:56px;max-width:180px;}
  .logo-strip img[alt*="MiMaji"]{height:80px;max-width:160px;}
}

/* Assumption vs field reality: two-column split rows, used on the R&D
   service page to show design assumptions against what fieldwork
   surfaces. Reads distinctly from the failure-mode UL callouts other
   service pages use. */
.prose .assumption-grid{
  border:2px solid var(--ink);background:var(--paper);
  margin:1.6em 0 2em;box-shadow:6px 6px 0 var(--ink);
}
.prose .assumption-row{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:2px solid var(--ink);
}
.prose .assumption-row:last-child{border-bottom:0;}
.prose .assumption-row > div{padding:20px 24px 22px;}
.prose .assumption-row .ar-assumption{
  background:var(--paper-2);border-right:2px solid var(--ink);
  color:var(--ink);
}
.prose .assumption-row .ar-reality{
  background:var(--paper);color:var(--ink);
}
.prose .assumption-row .ar-tag{
  display:block;font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--ink);opacity:.55;margin:0 0 8px;
}
.prose .assumption-row .ar-assumption .ar-tag{color:var(--ink);opacity:.55;}
.prose .assumption-row .ar-reality .ar-tag{color:var(--orange);opacity:1;}
.prose .assumption-row p{margin:0;font-size:16px;line-height:1.5;font-weight:500;}
.prose .assumption-row .ar-reality p{font-weight:500;}
@media(max-width:720px){
  .prose .assumption-row{grid-template-columns:1fr;}
  .prose .assumption-row .ar-assumption{border-right:0;border-bottom:2px solid var(--ink);}
}

/* Metadata block on case pages: Location / Sector / Programme, one per row. */
.prose .case-meta{
  display:grid;grid-template-columns:1fr;gap:0;
  border:2px solid var(--ink);background:var(--paper);
  margin:1.4em 0 2em;
}
.prose .case-meta > div{
  display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:baseline;
  padding:12px 18px;border-bottom:1px solid var(--ink);
  color:var(--ink);
}
.prose .case-meta > div:last-child{border-bottom:0;}
.prose .case-meta .k{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.20em;text-transform:uppercase;font-weight:800;
  color:var(--ink);opacity:.7;
}
.prose .case-meta .v{font-size:15.5px;line-height:1.45;font-weight:500;color:var(--ink);}
@media(max-width:640px){
  .prose .case-meta > div{grid-template-columns:1fr;gap:4px;padding:12px 16px;}
}

/* "Illustrative composite" badge on a Lab-reading case page. Signals
   to the reader that the case is a sector composite rather than a
   named client engagement, without hiding it in fine print. */
.prose .illustrative-badge{
  display:inline-flex;align-items:center;gap:10px;
  border:2px solid var(--ink);background:var(--butter);color:var(--ink);
  padding:8px 14px;margin:0 0 1.6em;
  font-family:'Hanken Grotesk',sans-serif;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--ink);
}
.prose .illustrative-badge::before{content:"§";color:var(--orange);font-size:15px;}

/* Sector topic icon shown at the top of a case-reading page in place
   of the partner logo real cases carry. Same footprint as the logo
   so the layout stays consistent across the two card types. */
.prose .sector-icon{
  display:block;height:96px;width:auto;max-width:120px;
  margin:0 0 1.4em;object-fit:contain;
}
@media(max-width:640px){.prose .sector-icon{height:72px;}}

/* Single partner logo on a case-study page, inline below the standfirst. */
.prose .partner-logo{
  display:block;height:112px;width:auto;max-width:420px;
  margin:0 0 1.6em;border:0;background:none;object-fit:contain;
}
@media(max-width:640px){.prose .partner-logo{height:96px;max-width:320px;}}

/* ── Article meta line (date · reading time), sits below the standfirst. */
.prose .article-meta{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--ink);opacity:.65;margin:1em 0 6px;
}
.prose .article-meta span{white-space:nowrap;}
.prose .article-byline{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:14px;letter-spacing:.01em;font-weight:500;
  color:var(--ink);opacity:.7;margin:0 0 2em;
}
.prose .article-byline .article-author{font-weight:700;opacity:1;}

/* ── Article list (on /articles): scannable stack of pieces, each with
   a bold title link, a small meta line (date or tag), and a body blurb. */
.prose .article-list{margin:24px 0 32px;}
/* Optional thumbnail on an article-item: side image on desktop, top
   image on mobile. The item without a thumbnail keeps the plain
   stacked look; the item with one gets a two-column split. */
.prose .article-list .article-item.has-thumb{
  display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start;
}
.prose .article-list .article-item.has-thumb .article-thumb{
  display:block;width:100%;height:auto;
  border:2px solid var(--ink);object-fit:cover;
  aspect-ratio:3/2;background:var(--paper-2);
}
.prose .article-list .article-item.has-thumb .article-body{display:block;}
.prose .article-list .article-item.has-thumb .article-thumb-link{display:block;}
.prose .article-list .article-item.has-thumb .article-title{display:inline-block;}
.prose .article-list .article-item.has-thumb:first-child{padding-top:8px;}
@media(max-width:640px){
  .prose .article-list .article-item.has-thumb{grid-template-columns:1fr;gap:12px;}
}
.prose .article-list .article-item{
  border-top:1px solid var(--ink);padding:22px 0 4px;
}
.prose .article-list .article-item:first-child{border-top:0;padding-top:8px;}
.prose .article-list .article-title,
.prose .article-list a.article-title{
  display:block;font-family:'Hanken Grotesk',sans-serif;
  font-size:clamp(19px,2.2vw,24px);font-weight:800;letter-spacing:-.01em;
  line-height:1.22;color:var(--ink);text-decoration:none;
}
.prose .article-list a.article-title:hover{
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;
}
.prose .article-list .article-meta{
  margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);opacity:.62;
}
.prose .article-list .article-item-byline{
  margin-top:3px;font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--ink);opacity:.62;
}
.prose .article-list .article-desc{
  margin:10px 0 0;color:var(--ink);
  font-size:16px;line-height:1.55;
}
.prose .article-list .article-desc a{
  color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* ── What We Do cards (on /what-we-do): top-level question card with a
   coloured head, an "Absorbs" sub-strip on paper below, mirroring the
   Services nav axis + showing the second-level pages inside each. */
.prose .whatwedo-card{
  border:2px solid var(--ink);background:var(--paper);
  margin:2em 0;box-shadow:6px 6px 0 var(--ink);
  display:flex;flex-direction:column;
  /* Stretched-link pattern: any child anchor's ::after covers the
     whole card, so the entire block is clickable, not just the h3. */
  position:relative;
  transition:transform .12s ease,box-shadow .12s ease;
}
.prose .whatwedo-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);}
.prose .whatwedo-card .whatwedo-head a::after{
  content:"";position:absolute;inset:0;z-index:1;
}
/* Keep any secondary anchors (in the sub-strip) clickable above the overlay. */
.prose .whatwedo-card .whatwedo-sub a{position:relative;z-index:2;}
.prose .whatwedo-card .whatwedo-head{
  padding:24px 26px;border-bottom:2px solid var(--ink);color:var(--ink);
}
.prose .whatwedo-card.c-butter .whatwedo-head{background:var(--butter);}
.prose .whatwedo-card.c-coral .whatwedo-head{background:var(--coral);}
.prose .whatwedo-card.c-cobalt .whatwedo-head{background:var(--cobalt);color:var(--paper);}
.prose .whatwedo-card.c-plum .whatwedo-head{background:var(--plum);color:var(--paper);}
.prose .whatwedo-card .whatwedo-head h3{
  font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  margin:0 0 8px;color:inherit;
}
.prose .whatwedo-card .whatwedo-head a{color:inherit;text-decoration:none;}
.prose .whatwedo-card .whatwedo-head a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.prose .whatwedo-card .whatwedo-head p{
  font-size:16px;line-height:1.5;margin:0;color:inherit;font-weight:500;
}
.prose .whatwedo-card .whatwedo-sub{
  padding:20px 26px 22px;background:var(--paper);color:var(--ink);
}
.prose .whatwedo-card .whatwedo-sub .sub-label{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:var(--orange);display:block;margin:0 0 8px;
}
.prose .whatwedo-card .whatwedo-sub ul{margin:0;padding-left:1.2em;}
.prose .whatwedo-card .whatwedo-sub li{font-size:15px;line-height:1.5;margin:.35em 0;color:var(--ink);}
.prose .whatwedo-card .whatwedo-sub a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600;}

/* ── Service grid (on /what-we-do): 2-column bordered coloured cards. */
.prose .service-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  margin:2em 0;
}
.prose .service-grid .service-card{
  display:flex;flex-direction:column;gap:12px;
  padding:26px 24px;text-decoration:none;color:var(--ink);
  border:2px solid var(--ink);background:var(--paper);
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .12s ease;min-height:220px;
}
.prose .service-grid .service-card:hover{transform:translate(-3px,-3px);}
.prose .service-grid .service-card.c-butter{background:var(--butter);}
.prose .service-grid .service-card.c-coral{background:var(--coral);}
.prose .service-grid .service-card.c-cobalt{background:var(--cobalt);color:var(--paper);}
.prose .service-grid .service-card.c-forest{background:var(--forest);color:var(--paper);}
.prose .service-grid .service-card.c-plum{background:var(--plum);color:var(--paper);}
.prose .service-grid .service-card .service-tag{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.20em;text-transform:uppercase;font-weight:800;
  color:var(--ink);
}
.prose .service-grid .service-card.c-cobalt .service-tag,
.prose .service-grid .service-card.c-forest .service-tag,
.prose .service-grid .service-card.c-plum .service-tag{color:var(--butter);}
.prose .service-grid .service-card h3{
  font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  margin:0;color:inherit;
}
.prose .service-grid .service-card p{
  font-size:15.5px;line-height:1.5;margin:0;color:inherit;font-weight:500;flex:1;
}
.prose .service-grid .service-card .service-more{
  margin-top:auto;font-weight:800;color:inherit;
}
@media(max-width:720px){
  .prose .service-grid{grid-template-columns:1fr;}
}

/* ── Case grid (on /case-studies): 2-column bordered coloured cards,
   matching the block-colour scheme used on /expertise. */
.prose .case-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  margin:2em 0;
}
.prose .case-grid .case-card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  border:2px solid var(--ink);background:var(--white);
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .12s ease;
}
.prose .case-grid .case-card:hover{transform:translate(-3px,-3px);}
.prose .case-grid .case-card .stripe{
  padding:20px 24px;border-bottom:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/2;text-align:center;
}
/* Photo variant: replaces the coloured stripe with a real image.
   The tag becomes a small chip overlaid in the top-left of the photo. */
.prose .case-grid .case-card.has-photo .case-photo{
  border-bottom:2px solid var(--ink);background:var(--white);
  display:flex;flex-direction:column;
}
@media(max-width:640px){
  .prose .case-grid .case-card .stripe{padding:18px 20px;}
}
.prose .case-grid .case-card.has-photo .case-photo img{
  width:100%;aspect-ratio:3/2;object-fit:contain;display:block;background:var(--white);
}
.prose .case-grid .case-card.has-photo .case-photo .tag{
  order:-1;
  padding:12px 20px;border-bottom:2px solid var(--ink);
  font-family:'Hanken Grotesk',sans-serif;
  font-size:13px;letter-spacing:.20em;text-transform:uppercase;font-weight:800;
  line-height:1.3;text-align:left;
}
/* Chip colour matches the card's semantic colour class, so the tag on
   a photo reads as the same colour token as its coloured-stripe twin. */
.prose .case-grid .case-card.c-coral.has-photo .case-photo .tag{background:var(--coral);color:var(--ink);}
.prose .case-grid .case-card.c-butter.has-photo .case-photo .tag{background:var(--butter);color:var(--ink);}
.prose .case-grid .case-card.c-cobalt.has-photo .case-photo .tag{background:var(--cobalt);color:var(--paper);}
.prose .case-grid .case-card.c-forest.has-photo .case-photo .tag{background:var(--forest);color:var(--paper);}
.prose .case-grid .case-card.c-plum.has-photo .case-photo .tag{background:var(--plum);color:var(--paper);}
.prose .case-grid .case-card .stripe .tag{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:13px;letter-spacing:.20em;text-transform:uppercase;font-weight:800;
  line-height:1.3;
}
.prose .case-grid .case-card.has-photo .case-photo .tag{
  font-size:13px;letter-spacing:.20em;
}
@media(max-width:640px){
  .prose .case-grid .case-card .stripe{padding:12px 18px;}
  .prose .case-grid .case-card .stripe .tag{font-size:12px;letter-spacing:.18em;}
  .prose .case-grid .case-card.has-photo .case-photo .tag{font-size:12px;letter-spacing:.18em;padding:10px 16px;}
}
.prose .case-grid .case-card.c-coral .stripe{background:var(--coral);color:var(--ink);}
.prose .case-grid .case-card.c-butter .stripe{background:var(--butter);color:var(--ink);}
.prose .case-grid .case-card.c-cobalt .stripe{background:var(--cobalt);color:var(--paper);}
.prose .case-grid .case-card.c-forest .stripe{background:var(--forest);color:var(--paper);}
.prose .case-grid .case-card.c-plum .stripe{background:var(--plum);color:var(--paper);}
.prose .case-grid .case-card .body{
  padding:22px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1;
}
.prose .case-grid .case-card h3{
  font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  margin:0;color:var(--ink);
}
.prose .case-grid .case-card p{
  font-size:15.5px;line-height:1.5;margin:0;color:var(--ink);font-weight:500;flex:1;
}
.prose .case-grid .case-card .read{
  font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
}
.prose .case-grid .case-card p a{color:inherit;}
@media(max-width:720px){
  .prose .case-grid{grid-template-columns:1fr;}
}

/* ── Featured case study card (on /expertise-* pages): coloured stripe
   header, title + blurb below, whole card links to the case. ── */
.prose .case-feature{
  display:block;text-decoration:none;color:var(--ink);
  border:2px solid var(--ink);background:var(--paper);
  margin:1.6em 0 2.4em;box-shadow:6px 6px 0 var(--ink);
  transition:transform .15s ease;
}
.prose .case-feature:hover{transform:translate(-3px,-3px);}
.prose .case-feature .stripe{
  padding:16px 24px;border-bottom:2px solid var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px 20px;
}
.prose .case-feature .kicker{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
}
.prose .case-feature .tag{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.85;
}
.prose .case-feature.c-coral .stripe{background:var(--coral);color:var(--ink);}
.prose .case-feature.c-butter .stripe{background:var(--butter);color:var(--ink);}
.prose .case-feature.c-cobalt .stripe{background:var(--cobalt);color:var(--paper);}
.prose .case-feature.c-forest .stripe{background:var(--forest);color:var(--paper);}
.prose .case-feature .body{padding:22px 24px 24px;color:var(--ink);}
.prose .case-feature h3{
  font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  margin:0 0 8px;color:var(--ink);
}
.prose .case-feature p{font-size:16px;line-height:1.5;margin:0 0 12px;color:var(--ink);font-weight:500;}
.prose .case-feature .read{font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}

/* ── MED triple: three-column icon+heading+body block used on the
   /monitoring-evaluation-dissemination page for the three definitions. ── */
.prose .med-triple{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:2px solid var(--ink);margin:2em 0;
}
.prose .med-triple .med-card{
  padding:26px 24px;background:var(--paper);color:var(--ink);
  border-right:2px solid var(--ink);display:flex;flex-direction:column;gap:12px;
}
.prose .med-triple .med-card:last-child{border-right:0;}
.prose .med-triple .med-card:nth-child(1){background:var(--butter);}
.prose .med-triple .med-card:nth-child(2){background:var(--paper);}
.prose .med-triple .med-card:nth-child(3){background:var(--coral);}
.prose .med-triple .med-card img{
  height:80px;width:auto;object-fit:contain;display:block;margin:0;align-self:flex-start;
}
.prose .med-triple .med-card h3{
  font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  margin:0;color:var(--ink);
}
.prose .med-triple .med-card p{
  font-size:15.5px;line-height:1.5;margin:0;color:var(--ink);font-weight:500;
}
@media(max-width:860px){
  .prose .med-triple{grid-template-columns:1fr;}
  .prose .med-triple .med-card{border-right:0;}
  .prose .med-triple .med-card:not(:last-child){border-bottom:2px solid var(--ink);}
  .prose .med-triple .med-card img{height:64px;}
}

/* ── Interview ladder (on /interview-guide): five rungs, colour deepens
   as the ladder moves up from surface fact to meaning and tension. ── */
.prose .ladder{
  border:2px solid var(--ink);
  margin:2em 0;box-shadow:6px 6px 0 var(--ink);
}
.prose .ladder .ladder-rung{
  padding:22px 26px;border-bottom:2px solid var(--ink);color:var(--ink);
}
.prose .ladder .ladder-rung:last-child{border-bottom:0;}
.prose .ladder .ladder-tag{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:var(--ink);margin:0 0 10px;display:block;
}
.prose .ladder .ladder-q,.prose .ladder .ladder-a{
  margin:4px 0;font-size:16.5px;line-height:1.5;color:inherit;font-weight:500;
}
.prose .ladder .ladder-q strong,.prose .ladder .ladder-a strong{font-weight:800;}
.prose .ladder .ladder-rung.c-paper{background:var(--paper);}
.prose .ladder .ladder-rung.c-butter{background:var(--butter);}
.prose .ladder .ladder-rung.c-coral{background:var(--coral);}
.prose .ladder .ladder-rung.c-cobalt{background:var(--cobalt);color:var(--paper);}
.prose .ladder .ladder-rung.c-cobalt .ladder-tag{color:var(--butter);}
.prose .ladder .ladder-rung.c-forest{background:var(--forest);color:var(--paper);}
.prose .ladder .ladder-rung.c-forest .ladder-tag{color:var(--butter);}

/* ── Checklist (bordered rows, one item per line, black tick square) ── */
.prose ul.checklist{
  list-style:none;padding:0;margin:1.4em 0;
  border:2px solid var(--ink);
}
.prose ul.checklist li{
  margin:0;padding:14px 20px 14px 52px;
  border-bottom:2px solid var(--ink);
  position:relative;font-size:16.5px;line-height:1.5;color:var(--ink);font-weight:500;
}
.prose ul.checklist li:last-child{border-bottom:0;}
.prose ul.checklist li::before{
  content:"";position:absolute;left:18px;top:16px;
  width:18px;height:18px;border:2px solid var(--ink);background:var(--paper);
}

/* ── Expertise list (on /expertise index) ── */
.prose ul.expertise-list{
  list-style:none;padding:0;margin:2em 0;
  border:2px solid var(--ink);
}
.prose ul.expertise-list li{margin:0;padding:0;border-bottom:2px solid var(--ink);}
.prose ul.expertise-list li:last-child{border-bottom:0;}
.prose ul.expertise-list a{
  display:flex;flex-direction:column;gap:14px;
  padding:26px 26px 24px;position:relative;
  color:var(--ink);text-decoration:none;
  transition:background .15s ease;
}
.prose ul.expertise-list a:hover{background:var(--butter);}
.prose ul.expertise-list img{
  height:72px;width:auto;max-width:100px;object-fit:contain;
  display:block;margin:0;
}
.prose ul.expertise-list h3{
  font-size:22px;font-weight:800;letter-spacing:-.02em;
  margin:0 0 4px;color:var(--ink);line-height:1.15;
}
.prose ul.expertise-list p{
  font-size:15.5px;line-height:1.45;margin:0;color:var(--ink);font-weight:500;
  max-width:60ch;
}
.prose ul.expertise-list p.research-areas{
  margin-top:10px;font-size:13.5px;line-height:1.5;opacity:.82;
  font-weight:500;letter-spacing:.005em;
}
.prose ul.expertise-list p.research-areas strong{font-weight:800;}
/* Research areas: highlighted panel at the top of every programme
   page, and a lighter inline emphasis in the stanzas below. Each
   list item is an anchor link to its brief description further
   down the same page. */
.prose .research-areas-panel{
  margin:16px 0 36px;padding:28px 30px 26px;
  background:var(--butter);border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
}
.prose .research-areas-panel .ra-label{
  display:block;font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:800;color:var(--coral);margin:0 0 22px;
}
.prose .research-areas-panel ul{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px 28px;
}
.prose .research-areas-panel li{
  padding:0;margin:0;
  position:relative;padding-left:30px;
  line-height:1.35;
}
.prose .research-areas-panel li::before{
  content:"";position:absolute;left:0;top:9px;
  width:14px;height:14px;background:var(--ink);border-radius:50%;
}
.prose .research-areas-panel a{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:17px;line-height:1.35;font-weight:800;
  color:var(--ink);letter-spacing:-.005em;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color .12s ease;
}
.prose .research-areas-panel a:hover{
  border-bottom-color:var(--ink);
}

/* Legacy strip class kept in case older content still uses it. */
.prose p.research-areas-strip{
  margin:12px 0 28px;padding:14px 18px;
  background:var(--butter);border:2px solid var(--ink);
  font-size:15px;line-height:1.5;font-weight:500;color:var(--ink);
}
.prose p.research-areas-strip strong{font-weight:800;letter-spacing:.02em;}

/* Inline emphasis: when a stanza describes a research area by name,
   the name is bolded and picks up a subtle coral underline so a
   reader can pattern-match to the panel above. Also serves as the
   anchor target that the panel links jump to. */
.prose .ra-name{
  font-weight:800;color:var(--ink);
  border-bottom:2px solid var(--coral);padding-bottom:1px;
  scroll-margin-top:96px;
}
.prose .ra-name:target{
  background:var(--butter);
  padding:2px 6px;margin:0 -6px;
  border-radius:2px;
  transition:background .3s ease;
}

/* Reading cards: replaces italics prose in the related-reading
   section. Small stack of headed groups; each group holds up to
   three cards linking to the underlying articles. */
.prose .reading-group{margin:0 0 34px;}
.prose .reading-group > h3{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:18px;font-weight:800;letter-spacing:-.005em;
  margin:0 0 14px;color:var(--ink);
  padding-bottom:8px;border-bottom:2px solid var(--ink);
}
.prose .reading-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
.prose .reading-cards a{
  display:flex;flex-direction:column;gap:8px;
  padding:18px 20px 18px;background:var(--white);color:var(--ink);
  border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  text-decoration:none;transition:transform .12s ease, box-shadow .12s ease;
}
.prose .reading-cards a:hover{
  transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);
  background:var(--butter);
}
.prose .reading-cards h4{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:16.5px;font-weight:800;letter-spacing:-.01em;
  line-height:1.2;margin:0;color:var(--ink);
}
.prose .reading-cards p{
  font-size:14px;line-height:1.45;font-weight:500;color:var(--ink);
  margin:0;opacity:.85;
}
.prose .reading-cards .read-cue{
  margin-top:auto;font-weight:800;font-size:13px;
  letter-spacing:.02em;color:var(--ink);
}

/* Programme page closing block:
   1) "Where to next" — clean chip row of standardised links.
   2) "Contact us today" — three brief route descriptors on ink,
      with a single Start-a-conversation CTA.
   Replaces the italics prose footer on programme pages. */
.prose .programme-footer{margin:32px 0 8px;}
.prose .programme-footer h3{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:800;color:var(--coral);margin:0 0 14px;
}
.prose .programme-footer .footer-links{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px;
}
.prose .programme-footer .footer-links a{
  display:inline-block;padding:10px 16px;
  background:var(--white);color:var(--ink);border:2px solid var(--ink);
  font-family:'Hanken Grotesk',sans-serif;
  font-size:14px;font-weight:800;letter-spacing:-.005em;
  text-decoration:none;transition:background .12s ease;
}
.prose .programme-footer .footer-links a:hover{background:var(--butter);}

.prose .contact-cta-programme{
  margin:12px 0 8px;padding:36px 34px 32px;
  background:#CFE1EE;color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
}
.prose .contact-cta-programme h3{
  font-size:28px;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 10px;line-height:1.15;
}
.prose .contact-cta-programme .lede{
  font-size:15.5px;line-height:1.55;color:var(--ink);opacity:.82;
  margin:0 0 24px;
}
.prose .contact-cta-programme .contact-options{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;margin:0 0 28px;
}
.prose .contact-cta-programme .contact-options a{
  display:block;padding:16px 18px;
  background:var(--white);color:var(--ink);
  border:2px solid var(--ink);text-decoration:none;
  transition:background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.prose .contact-cta-programme .contact-options a:hover{
  background:var(--butter);transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--ink);
}
.prose .contact-cta-programme .contact-options strong{
  display:block;font-size:15px;font-weight:800;color:var(--ink);
  letter-spacing:-.005em;margin-bottom:4px;
}
.prose .contact-cta-programme .contact-options span{
  display:block;font-size:13px;line-height:1.35;
  color:var(--ink);opacity:.7;
}
.prose .contact-cta-programme .cta-actions{display:flex;flex-wrap:wrap;gap:12px;}
.prose .contact-cta-programme .cta-actions a{
  display:inline-block;padding:12px 22px;
  font-family:'Hanken Grotesk',sans-serif;
  font-size:14px;font-weight:800;letter-spacing:.01em;
  text-decoration:none;border:2px solid var(--ink);
  transition:background .12s ease, color .12s ease;
}
.prose .contact-cta-programme .cta-actions .cta-primary{
  background:var(--ink);color:var(--paper);
}
.prose .contact-cta-programme .cta-actions .cta-primary:hover{
  background:var(--cobalt);color:var(--paper);
}
.prose .contact-cta-programme .cta-actions .cta-secondary{
  background:transparent;color:var(--ink);
}
.prose .contact-cta-programme .cta-actions .cta-secondary:hover{
  background:var(--white);
}

/* Ethics/consent standards box: neutral paper ground, highlighted
   butter title, tighter list spacing. Deliberately understated to
   read as reference material rather than a marketing panel. */
.prose .ethics-box{
  margin:20px 0 24px;padding:20px 22px 18px;
  background:var(--paper);border:2px solid var(--ink);
}
.prose .ethics-box .ethics-title{
  display:inline-block;padding:4px 10px;margin:0 0 14px;
  background:var(--butter);color:var(--ink);
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:800;
}
.prose .ethics-box ul{
  margin:0;padding:0;list-style:none;
}
.prose .ethics-box li{
  margin:0;padding:8px 0 8px 20px;
  font-size:14px;line-height:1.45;color:var(--ink);
  border-bottom:1px solid rgba(10,10,10,0.14);
  position:relative;
}
.prose .ethics-box li:last-child{border-bottom:0;padding-bottom:2px;}
.prose .ethics-box li:first-child{padding-top:2px;}
.prose .ethics-box li::before{
  content:"";position:absolute;left:0;top:16px;
  width:6px;height:6px;background:var(--ink);border-radius:50%;
}
.prose .ethics-box a{color:var(--ink);font-weight:800;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;}

/* ── SDG contribution block on programme pages ─────────────────
   Each row: a coloured SDG icon tile on the left (SVG image with
   the goal number and pictogram baked in) and a right rectangle
   with a short programme-tailored line. Cards stack cleanly on
   mobile.
*/
.prose .sdg-block{
  margin:0 0 34px;padding:16px 18px 18px;
  background:var(--white);border:2px solid var(--ink);
}
.prose .sdg-block .sdg-label{
  display:block;font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:800;color:var(--coral);margin-bottom:12px;
}
.prose .sdg-row{
  display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0;
}
.prose .sdg-row a{
  display:flex;align-items:stretch;text-decoration:none;color:var(--ink);
  border:2px solid var(--ink);background:var(--white);
  min-height:88px;transition:transform .12s ease;
}
.prose .sdg-row a:hover{transform:translate(-2px,-2px);}
.prose .sdg-row .sdg-num{
  display:flex;align-items:center;justify-content:center;
  width:88px;flex-shrink:0;
  border-right:2px solid var(--ink);
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:900;font-size:38px;color:#fff;letter-spacing:-.03em;
}
.prose .sdg-row .sdg-name{
  padding:12px 18px;display:flex;flex-direction:column;justify-content:center;
  max-width:260px;color:var(--ink);
}
.prose .sdg-row .sdg-goal-title{
  display:block;
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;line-height:1.25;font-weight:700;
  letter-spacing:.02em;color:var(--ink);opacity:.6;
  margin-bottom:4px;
}
.prose .sdg-row .sdg-tailored{
  display:block;
  font-size:14.5px;line-height:1.28;font-weight:800;
  letter-spacing:-.005em;color:var(--ink);
}
@media(max-width:640px){
  .prose .sdg-row .sdg-num{width:76px;font-size:32px;}
  .prose .sdg-row .sdg-name{max-width:210px;padding:10px 14px;}
  .prose .sdg-row .sdg-tailored{font-size:13.5px;}
  .prose .sdg-row .sdg-goal-title{font-size:10.5px;}
}

/* Larger presentation on /sdgs itself. There the right rectangle
   just carries the official goal name at bigger scale — no tailored
   line is needed because the paragraph beneath already describes
   which programmes contribute to it. */
.prose .sdg-index .sdg-row a{min-height:110px;}
.prose .sdg-index .sdg-row .sdg-num{width:110px;font-size:52px;}
.prose .sdg-index .sdg-row .sdg-name{
  padding:16px 22px;font-size:16px;font-weight:800;
  max-width:320px;
}
.prose .sdg-index .sdg-row .sdg-tailored{font-size:16px;}
.prose .sdg-index .sdg-row .sdg-goal-title{display:none;}

/* Official SDG brand colours on the numbered tile. */
.sdg-01 .sdg-num{background:#E5243B;}
.sdg-02 .sdg-num{background:#DDA63A;}
.sdg-03 .sdg-num{background:#4C9F38;}
.sdg-04 .sdg-num{background:#C5192D;}
.sdg-05 .sdg-num{background:#FF3A21;}
.sdg-06 .sdg-num{background:#26BDE2;}
.sdg-07 .sdg-num{background:#FCC30B;color:#1a1a1a;}
.sdg-08 .sdg-num{background:#A21942;}
.sdg-09 .sdg-num{background:#FD6925;}
.sdg-10 .sdg-num{background:#DD1367;}
.sdg-11 .sdg-num{background:#FD9D24;}
.sdg-12 .sdg-num{background:#BF8B2E;}
.sdg-13 .sdg-num{background:#3F7E44;}
.sdg-14 .sdg-num{background:#0A97D9;}
.sdg-15 .sdg-num{background:#56C02B;}
.sdg-16 .sdg-num{background:#00689D;}
.sdg-17 .sdg-num{background:#19486A;}
.prose ul.expertise-list .arrow{
  position:absolute;top:24px;right:26px;
  font-size:26px;font-weight:800;color:var(--ink);line-height:1;
}
@media(max-width:640px){
  .prose ul.expertise-list a{padding:22px 22px 20px;gap:12px;}
  .prose ul.expertise-list img{height:60px;}
  .prose ul.expertise-list h3{font-size:19px;}
  .prose ul.expertise-list p{font-size:14.5px;}
  .prose ul.expertise-list .arrow{top:22px;right:22px;font-size:22px;}
}

/* ── Contact form (on /contact) ── */
.contact-form{
  border:2px solid var(--ink);background:var(--paper);
  padding:32px 30px 30px;margin:2em 0;
  box-shadow:6px 6px 0 var(--ink);
  display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;
}
.contact-form .full{grid-column:1 / -1;}
.contact-form label{
  display:block;font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.20em;text-transform:uppercase;font-weight:800;
  color:var(--ink);margin:0 0 6px;
}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;padding:12px 14px;border:2px solid var(--ink);
  background:var(--white);color:var(--ink);
  font-family:'Hanken Grotesk',sans-serif;font-size:16px;font-weight:500;
  border-radius:0;
}
.contact-form textarea{min-height:140px;resize:vertical;line-height:1.5;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:3px solid var(--orange);outline-offset:-1px;
}
.contact-form .contact-submit{
  grid-column:1 / -1;justify-self:start;
  padding:14px 26px;background:var(--ink);color:var(--paper);
  border:2px solid var(--ink);cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:16px;
  letter-spacing:.02em;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease;
}
.contact-form .contact-submit:hover{
  transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);
}
.contact-form .contact-submit:active{
  transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);
}
.contact-form .form-note{
  grid-column:1 / -1;font-size:14px;color:var(--ink);opacity:.75;
  font-weight:500;line-height:1.4;
}
@media(max-width:640px){
  .contact-form{grid-template-columns:1fr;padding:24px 22px;}
}

/* ── What we do (home): three-service card row + radar visual ── */
.what-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:2px solid var(--ink);
}
.what-grid .what-card{
  padding:28px 26px;background:var(--paper);color:var(--ink);
  border-right:2px solid var(--ink);text-decoration:none;
  display:flex;flex-direction:column;gap:10px;min-height:220px;
  position:relative;transition:transform .12s ease;
}
.what-grid .what-card:last-child{border-right:0;}
.what-grid .what-card:hover{transform:translate(-2px,-2px);}
.what-grid .what-card.c-butter{background:var(--butter);color:var(--ink);}
.what-grid .what-card.c-coral{background:var(--coral);color:var(--ink);}
.what-grid .what-card.c-cobalt{background:var(--cobalt);color:var(--paper);}
.what-grid .what-card.c-cobalt h3,
.what-grid .what-card.c-cobalt p,
.what-grid .what-card.c-cobalt .what-more{color:var(--paper);}
.what-grid .what-card .what-tag{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--ink);
}
.what-grid .what-card.c-cobalt .what-tag{color:var(--butter);}
.what-grid .what-card h3{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink);}
.what-grid .what-card p{font-size:15.5px;line-height:1.5;margin:0;color:var(--ink);font-weight:500;flex:1;}
.what-grid .what-card .what-more{margin-top:auto;font-weight:800;color:var(--ink);}
.what-grid .what-card .what-flag{
  height:44px;width:44px;display:block;object-fit:contain;
  margin:0 0 4px;align-self:flex-start;
}
@media(max-width:860px){
  .what-grid{grid-template-columns:1fr;}
  .what-grid .what-card{border-right:0;}
  .what-grid .what-card:not(:last-child){border-bottom:2px solid var(--ink);}
}

/* ── Network expertise strip (home page, forest block): the eight
   expertise pill-links, followed by an auto-scrolling partner-logo bar. */
.net-expertise-label,.net-logos-label{
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--butter);margin:36px 0 14px;
}
.net-expertise-row{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;
}
.net-expertise-row a{
  display:inline-block;padding:10px 16px;
  border:2px solid var(--paper);color:var(--paper);
  font-size:14px;font-weight:600;line-height:1;letter-spacing:.01em;
  text-decoration:none;background:transparent;
  transition:background .12s ease,color .12s ease;
}
.net-expertise-row a:hover{background:var(--butter);color:var(--ink);border-color:var(--butter);}

.net-logo-bar{
  margin-top:14px;background:var(--paper);
  border:2px solid var(--paper);
  overflow:hidden;position:relative;
}
.net-logo-bar::before,.net-logo-bar::after{
  content:"";position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none;
}
.net-logo-bar::before{left:0;background:linear-gradient(to right,var(--paper),transparent);}
.net-logo-bar::after{right:0;background:linear-gradient(to left,var(--paper),transparent);}
.net-logo-track{
  display:flex;align-items:center;gap:64px;
  width:max-content;padding:22px 32px;
  animation:netLogoScroll 28s linear infinite;
}
.net-logo-bar:hover .net-logo-track{animation-play-state:paused;}
.net-logo-track img{
  height:56px;width:auto;max-width:180px;display:block;object-fit:contain;
  opacity:.9;filter:none;
}
@keyframes netLogoScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media(prefers-reduced-motion:reduce){
  .net-logo-track{animation:none;justify-content:center;flex-wrap:wrap;gap:32px;}
  .net-logo-bar::before,.net-logo-bar::after{display:none;}
}
@media(max-width:640px){
  .net-logo-track{gap:44px;padding:18px 24px;}
  .net-logo-track img{height:44px;max-width:140px;}
  .net-expertise-label,.net-logos-label{margin-top:28px;}
}

/* ── Network grid (home page): three cards on the forest block. ── */
.network-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:2px solid var(--paper);
}
.network-grid .network-card{
  padding:32px 28px;background:transparent;color:var(--paper);
  border-right:2px solid var(--paper);
  display:flex;flex-direction:column;gap:12px;
}
.network-grid .network-card:last-child{border-right:0;}
.network-grid .network-card .net-num{
  font-size:56px;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:var(--butter);
}
.network-grid .network-card h3{
  font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  color:var(--paper);
}
.network-grid .network-card p{
  font-size:15.5px;line-height:1.55;margin:0;color:var(--paper);font-weight:500;
}
.network-grid .network-card a{color:var(--butter);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
.network-grid .network-card a:hover{background:var(--butter);color:var(--ink);}
@media(max-width:860px){
  .network-grid{grid-template-columns:1fr;}
  .network-grid .network-card{border-right:0;}
  .network-grid .network-card:not(:last-child){border-bottom:2px solid var(--paper);}
}

/* Article-nav footer: two cards at the bottom of every article that
   route the reader back to /articles and /case-studies, so they never
   dead-end at the closing italic paragraph. */
.prose .article-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin:2.4em 0 1.4em;
}
.prose .article-nav .article-nav-card{
  display:flex;flex-direction:column;gap:6px;
  padding:20px 22px 22px;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  text-decoration:none;box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
}
.prose .article-nav .article-nav-card:hover{
  transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);
  background:var(--butter);
}
.prose .article-nav .anc-label{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--ink);opacity:.6;
}
.prose .article-nav .anc-title{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:22px;font-weight:800;letter-spacing:-.015em;line-height:1.15;
  color:var(--ink);
}
.prose .article-nav .anc-cta{
  margin-top:6px;font-weight:800;font-size:14px;color:var(--ink);
}
@media(max-width:640px){
  .prose .article-nav{grid-template-columns:1fr;gap:12px;}
  .prose .article-nav .article-nav-card{padding:16px 18px 18px;}
  .prose .article-nav .anc-title{font-size:19px;}
}

/* Method-pointer block on service pages: a small labelled band that
   points readers to the underlying method pages as proper buttons,
   replacing the italic "Read the method in full: X or Y" line. */
.prose .method-pointer{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:14px 18px;margin:1.4em 0 2em;
  border:2px solid var(--ink);background:var(--paper-2);
  box-shadow:4px 4px 0 var(--ink);
}
.prose .method-pointer .mp-label{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--ink);opacity:.65;margin-right:2px;
}
.prose .method-pointer a.mp-btn{
  display:inline-flex;align-items:center;gap:.4em;
  padding:9px 16px;border:2px solid var(--ink);background:var(--paper);
  font-weight:800;color:var(--ink);text-decoration:none;font-size:14px;
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
  box-shadow:3px 3px 0 var(--ink);
}
.prose .method-pointer a.mp-btn:hover{
  transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);
  background:var(--butter);
}
@media(max-width:640px){
  .prose .method-pointer{flex-direction:column;align-items:stretch;padding:14px 16px;}
  .prose .method-pointer .mp-label{margin:0 0 4px;}
  .prose .method-pointer a.mp-btn{justify-content:center;}
}

/* ── Free-resources grid (home page): downloadable frameworks and
   method pages, each as a paper card with a small tag, title, blurb,
   and a Download / Read / Open CTA line. */
.resource-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:2px solid var(--ink);
}
.resource-card{
  display:flex;flex-direction:column;gap:10px;
  padding:24px 22px 22px;background:var(--white);color:var(--ink);
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  text-decoration:none;transition:background .12s ease,transform .12s ease;
}
.resource-card:nth-child(3n){border-right:0;}
.resource-card:nth-last-child(-n+3){border-bottom:0;}
.resource-card:hover{background:var(--butter);}
.resource-card .resource-tag{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;font-weight:800;
  color:var(--orange);
}
.resource-card h3{
  font-size:19px;font-weight:800;line-height:1.15;letter-spacing:-.015em;
  color:var(--ink);margin:0;
}
.resource-card p{
  font-size:14.5px;line-height:1.5;margin:0;color:var(--ink);font-weight:500;flex:1;
}
.resource-card .resource-cta{
  margin-top:8px;font-weight:800;font-size:14px;color:var(--ink);
  letter-spacing:.01em;
}
@media(max-width:860px){
  .resource-grid{grid-template-columns:1fr;}
  .resource-card{border-right:0;}
  .resource-card:not(:last-child){border-bottom:2px solid var(--ink);}
  .resource-card:last-child{border-bottom:0;}
}

/* ── Serve grid (home page): 5 target-type cards in coloured blocks ── */
.serve-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border:2px solid var(--ink);
}
.serve-grid a{
  padding:18px 18px 20px;background:var(--paper);color:var(--ink);
  border-right:2px solid var(--ink);text-decoration:none;
  display:flex;flex-direction:column;gap:8px;min-height:150px;
  transition:transform .12s ease,background .15s ease;
}
.serve-grid a:last-child{border-right:0;}
/* Warm palette. Companies and Funders carry a coral / butter accent
   to lift them out of the neutral row; European consortia keeps its
   euro-blue anchor; NGOs and Research stay quiet cream so the row
   has a rhythm rather than five equally loud blocks. */
.serve-grid a:nth-child(1){background:var(--coral);color:var(--ink);}
.serve-grid a:nth-child(2){background:var(--butter);color:var(--ink);}
.serve-grid a:nth-child(3){background:var(--euro-blue);color:var(--paper);}
.serve-grid a:nth-child(4){background:var(--white);color:var(--ink);}
.serve-grid a:nth-child(5){background:var(--white);color:var(--ink);}
.serve-grid a:nth-child(1):hover{background:#e58c74;}
.serve-grid a:nth-child(2):hover{background:#eecd6a;}
.serve-grid a:nth-child(4):hover,.serve-grid a:nth-child(5):hover{background:var(--paper);}
.serve-grid a .serve-tag{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  display:inline-flex;align-items:center;gap:8px;
}
.serve-grid .serve-flag{
  height:16px;width:22px;display:inline-block;flex:none;
  border:1.5px solid var(--paper);object-fit:cover;
  margin-left:10px;vertical-align:-2px;
}
.serve-grid a h3{
  font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.15;color:inherit;
}
.serve-grid a p{font-size:13.5px;line-height:1.45;margin:0;color:inherit;font-weight:500;flex:1;}
.serve-grid a .arrow{margin-top:auto;font-weight:800;font-size:18px;}
.serve-grid a:hover{transform:translate(-2px,-2px);}
@media(max-width:860px){
  .serve-grid{grid-template-columns:1fr;}
  .serve-grid a{border-right:0;}
  .serve-grid a:not(:last-child){border-bottom:2px solid var(--ink);}
}

/* European-blue skin for the European Impact Tracking page.
   Body carries data-page="european-impact-tracking" (set by build.py). */
body[data-page="european-impact-tracking"] .page-hero{background:var(--paper);}
body[data-page="european-impact-tracking"] .page-hero .eyebrow{color:var(--euro-blue);}
body[data-page="european-impact-tracking"] .page-hero h1{color:var(--euro-blue);}
body[data-page="european-impact-tracking"] .prose h2{color:var(--euro-blue);}
body[data-page="european-impact-tracking"] .prose .prose-eyebrow{color:var(--euro-blue);}
body[data-page="european-impact-tracking"] .prose a{color:var(--euro-blue);}
body[data-page="european-impact-tracking"] .prose a:hover{background:var(--euro-gold);color:var(--euro-blue);}
body[data-page="european-impact-tracking"] header.site{border-bottom:2px solid var(--euro-blue);}
body[data-page="european-impact-tracking"] .nav nav > a,
body[data-page="european-impact-tracking"] .nav details.nav-group summary.nav-label{color:var(--euro-blue);}
body[data-page="european-impact-tracking"] .brand{color:var(--euro-blue);}

/* EU flag hero card - a full blue block on the European reporting page */
.eu-flag-card{
  border:3px solid var(--ink);background:var(--euro-blue);color:var(--white);
  padding:0;margin:2em 0 2.4em;box-shadow:6px 6px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.eu-flag-card .eu-flag-link,
.prose .eu-flag-card a.eu-flag-link{
  display:flex;align-items:stretch;gap:0;
  text-decoration:none;color:inherit;
}
.eu-flag-card img{
  width:220px;height:auto;flex:none;display:block;
  border-right:3px solid var(--ink);object-fit:cover;background:var(--euro-blue);
}
.eu-flag-card .txt{
  padding:22px 26px;display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.eu-flag-card .txt strong{color:var(--euro-gold);font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.eu-flag-card .txt span{color:var(--white);font-size:15px;font-weight:500;line-height:1.45;}
.eu-flag-card .eu-flag-cta{
  color:var(--euro-gold);font-style:normal;font-weight:700;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;margin-top:8px;
}
.eu-flag-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink);}
.eu-flag-card:hover .eu-flag-cta{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
@media(max-width:640px){
  .eu-flag-card .eu-flag-link,
  .prose .eu-flag-card a.eu-flag-link{flex-direction:column;}
  .eu-flag-card{box-shadow:4px 4px 0 var(--ink);}
  .eu-flag-card img{width:100%;height:120px;border-right:0;border-bottom:3px solid var(--ink);}
}

/* Numbered stage blocks (used on /how-it-works). Big orange numeral,
   eyebrow, headline, body, and a hairline "related links" row. */
.prose .stage{
  border-top:2px solid var(--ink);
  padding:56px 0 32px;
  margin:0;
}
.prose .stage:first-of-type{border-top:2px solid var(--ink);padding-top:56px;}
.prose .stage-num{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:clamp(80px,12vw,132px);
  font-weight:800;line-height:.9;letter-spacing:-.05em;
  color:var(--orange);margin:0 0 18px;
}
.prose .stage-eyebrow{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:var(--ink);margin:0 0 10px;display:block;
}
.prose .stage h2{
  font-size:clamp(30px,4vw,44px);
  font-weight:800;letter-spacing:-.025em;line-height:1.05;
  margin:0 0 20px;color:var(--ink);
}
.prose .stage p{margin:0 0 1em;color:var(--ink);}
.prose .stage p:last-of-type{margin-bottom:0;}
.prose .stage .links{
  margin-top:24px;padding-top:16px;border-top:2px solid var(--ink);
  font-size:14.5px;font-weight:600;color:var(--ink);
  display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;
}
.prose .stage .links .label{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.20em;text-transform:uppercase;font-weight:800;
  color:var(--orange);margin-right:4px;
}
.prose .stage .links a{
  color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
}
.prose .stage .links a:hover{background:var(--butter);}

/* Simple table */
/* Tables scroll horizontally inside their wrap on narrow viewports; the
   page body itself never scrolls sideways. A soft right-edge fade hints
   at more content when the table overflows. */
.table-wrap{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:1.6em 0;position:relative;
  background:
    linear-gradient(90deg,var(--paper),var(--paper)) left center/12px 100% no-repeat,
    linear-gradient(90deg,rgba(10,10,10,.14),transparent) right center/22px 100% no-repeat;
}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;border:2px solid var(--ink);min-width:560px;}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:2px solid var(--ink);vertical-align:top;}
.tbl tr:last-child td{border-bottom:0;}
.tbl th{font-family:'Hanken Grotesk';text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--ink);font-weight:800;background:var(--butter);border-right:2px solid var(--ink);}
.tbl th:last-child{border-right:0;}
.tbl td{border-right:2px solid var(--ink);}
.tbl td:last-child{border-right:0;}
@media(max-width:640px){
  .tbl{font-size:14px;min-width:520px;}
  .tbl th,.tbl td{padding:10px 12px;}
}

/* ── Legacy grids used on interior pages ──────────────────── */
.approach,.grid-cards{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--ink);}
.grid-cards.cols-3{grid-template-columns:repeat(3,1fr);}
.approach .cell,.gcard{
  position:relative;padding:32px 28px;background:var(--paper);color:var(--ink);
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  text-decoration:none;display:block;transition:background .15s ease;
}
.approach .cell:nth-child(2n),.grid-cards.cols-3 .gcard:nth-child(3n){border-right:0;}
.grid-cards .gcard:nth-child(2n){border-right:0;}
.grid-cards.cols-3 .gcard:nth-child(2n){border-right:2px solid var(--ink);}
.grid-cards.cols-3 .gcard:nth-child(3n){border-right:0;}
.approach .cell:hover,.gcard:hover{background:var(--butter);}
.approach .cell .step,.gcard .step{
  font-family:'Hanken Grotesk',sans-serif;font-weight:800;
  font-size:12px;letter-spacing:.20em;text-transform:uppercase;color:var(--orange);margin-bottom:14px;
}
.approach .cell h3,.gcard h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px;color:var(--ink);}
.approach .cell p,.gcard p{color:var(--ink);margin:0;font-size:15.5px;line-height:1.5;font-weight:500;}

/* Dimension cards (used in About) */
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink);}
.dim{
  position:relative;padding:28px 26px 32px;
  background:var(--paper);color:var(--ink);
  border-right:2px solid var(--ink);
}
.dim:last-child{border-right:0;}
.dim:nth-child(1){background:var(--butter);}
.dim:nth-child(2){background:var(--coral);}
.dim:nth-child(3){background:var(--cobalt);color:var(--paper);}
.dim:nth-child(3) h3,.dim:nth-child(3) p{color:var(--paper);}
.dim .tag{font-family:'Hanken Grotesk';font-size:12px;letter-spacing:.20em;text-transform:uppercase;color:var(--ink);font-weight:800;}
.dim:nth-child(3) .tag{color:var(--butter);}
.dim h3{font-size:24px;font-weight:800;margin:8px 0 12px;color:var(--ink);}
.dim p{font-size:15.5px;margin:0;color:var(--ink);font-weight:500;line-height:1.5;}

/* Who-we-serve cards */
.serve{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink);}
.serve .card{
  padding:36px 30px;background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;min-height:260px;
  border-right:2px solid var(--ink);
}
.serve .card:last-child{border-right:0;}
.serve .card h3{font-size:22px;font-weight:800;margin-bottom:12px;color:var(--ink);}
.serve .card p{color:var(--ink);font-size:15.5px;flex:1;margin:0 0 20px;font-weight:500;line-height:1.5;}
.serve .card a{font-family:'Hanken Grotesk';font-weight:800;font-size:14.5px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;color:var(--ink);align-self:flex-start;}

/* Proof strip (kept for backward compat, converted to light) */
.proof{background:var(--butter);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.proof .stat{padding:28px 22px;border-right:2px solid var(--ink);}
.proof .stat:last-child{border-right:0;}
.proof .num{font-family:'Hanken Grotesk';font-size:48px;line-height:1;color:var(--ink);font-weight:800;letter-spacing:-.02em;}
.proof .lbl{font-size:13.5px;color:var(--ink);margin-top:9px;font-weight:600;}

/* Stance (legacy — used on home in previous design) */
.stance{background:var(--forest);color:var(--paper);padding:110px 0;}
.stance .wrap{max-width:900px;text-align:center;padding:0 32px;}
.stance blockquote{
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:clamp(28px,4vw,48px);line-height:1.18;margin:0;letter-spacing:-.02em;color:var(--paper);
}

/* Insights (legacy — used on some pages) */
.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink);}
.insight{
  display:flex;flex-direction:column;background:var(--paper);
  border-right:2px solid var(--ink);text-decoration:none;color:var(--ink);
  transition:background .15s ease;
}
.insight:last-child{border-right:0;}
.insight:hover{background:var(--butter);}
.insight .thumb{
  aspect-ratio:16/10;width:100%;position:relative;overflow:hidden;
  background:var(--coral);border-bottom:2px solid var(--ink);
}
.insight:nth-child(2) .thumb{background:var(--cobalt);}
.insight:nth-child(3) .thumb{background:var(--butter);}
.insight .thumb .kicker{position:absolute;left:16px;top:16px;display:flex;gap:8px;flex-wrap:wrap;}
.insight .thumb .kicker span{font-family:'Hanken Grotesk';font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink);background:var(--paper);padding:5px 10px;border:2px solid var(--ink);}
.insight:nth-child(2) .thumb .kicker span{color:var(--paper);background:var(--ink);border-color:var(--paper);}
.insight .body{padding:24px;display:flex;flex-direction:column;flex:1;gap:10px;}
.insight h3{font-size:21px;line-height:1.2;font-weight:800;color:var(--ink);letter-spacing:-.015em;}
.insight p{color:var(--ink);font-size:15px;margin:0;flex:1;font-weight:500;line-height:1.5;}
.insight .more{font-family:'Hanken Grotesk';font-weight:800;font-size:14px;color:var(--ink);}

/* Contact panel (light styling) */
.talk .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.talk h2{font-size:clamp(34px,4.4vw,52px);color:inherit;letter-spacing:-.02em;line-height:1.05;}
.talk p{font-size:18px;margin:18px 0 0;color:inherit;}
.talk .panel{background:var(--paper);border:2px solid var(--ink);padding:34px;color:var(--ink);}
.talk .panel label{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--ink);margin:0 0 7px;}
.talk .panel input,.talk .panel textarea{width:100%;padding:12px 14px;border:2px solid var(--ink);background:var(--white);font-family:'Hanken Grotesk';font-size:15px;margin-bottom:18px;color:var(--ink);}
.talk .panel input::placeholder,.talk .panel textarea::placeholder{color:var(--ink);opacity:.55;}
.talk .panel input:focus,.talk .panel textarea:focus{outline:3px solid var(--orange);outline-offset:-1px;}

/* Globe section — keep but restyle for light theme */
.globe-sec{
  position:relative;width:100%;max-width:100%;
  min-height:min(75vh,640px);background:var(--forest);color:var(--paper);
  display:flex;align-items:center;overflow:hidden;
  border-bottom:2px solid var(--ink);border-top:2px solid var(--ink);
}
#globe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block;opacity:.55;}
.globe-sec .wrap{position:relative;z-index:2;width:100%;padding-top:80px;padding-bottom:80px;}
.globe-sec .copy{max-width:26ch;}
.globe-sec .eyebrow{color:var(--butter);}
.globe-sec h2{font-family:'Hanken Grotesk';font-weight:800;font-size:clamp(34px,5.5vw,72px);line-height:1;letter-spacing:-.025em;color:var(--paper);}
.globe-sec h2 .b{font-weight:800;display:block;color:var(--butter);}
.globe-sec p{color:var(--paper);font-size:18px;margin-top:22px;max-width:44ch;font-weight:500;}
@media(max-width:860px){
  .globe-sec{min-height:min(60vh,480px);}
  .globe-sec .wrap{padding-top:52px;padding-bottom:52px;}
  .globe-sec h2{font-size:clamp(30px,7vw,44px);}
}

/* ── Footer ───────────────────────────────────────────────── */
footer.site{background:var(--ink);color:var(--paper);padding:78px 0 34px;border-top:2px solid var(--ink);}
footer.site .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;}
footer.site .brand{color:var(--paper);}
footer.site .brand-logo{filter:brightness(0) invert(1);}
footer.site h4{color:var(--butter);font-family:'Hanken Grotesk';font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin-bottom:16px;}
footer.site a{color:var(--paper);text-decoration:none;font-size:15px;display:block;margin-bottom:10px;font-weight:500;transition:opacity .2s;}
footer.site a:hover{opacity:.75;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
footer.site .brand:hover{opacity:1;text-decoration:none;}
footer.site .mission{font-size:15px;line-height:1.6;color:var(--paper);max-width:36ch;margin:12px 0 0;font-weight:500;}
footer.site .legal{grid-column:1/-1;border-top:2px solid var(--paper);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;font-size:13px;color:var(--paper);flex-wrap:wrap;gap:10px;font-weight:500;}

/* ── Scroll reveal (subtle) ───────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:860px){
  section{padding:70px 0;}
  .hero{padding:60px 0 72px;}
  .hero h1{font-size:clamp(44px,11vw,72px);min-height:2.4em;}
  .hero .lede{font-size:18px;min-height:4em;}
  .page-hero{padding:64px 0 56px;}
  .section-head{margin-bottom:38px;}
  .section-head h2{font-size:clamp(26px,5.5vw,40px);}
  .section-head p{font-size:17px;}
  .statement{padding:80px 0;}

  .steps,.expertise-grid,.insight-row,.approach,.grid-cards,.grid-cards.cols-3,.dims,.serve,.insights,.proof .wrap{
    grid-template-columns:1fr;
  }
  .step-card,.exp-card,.insight-card,.approach .cell,.gcard,.dim,.serve .card,.insight,.proof .stat{
    border-right:0!important;
  }
  .step-card:not(:last-child),.exp-card:not(:last-child),.insight-card:not(:last-child),
  .approach .cell:not(:last-child),.gcard:not(:last-child),.dim:not(:last-child),
  .serve .card:not(:last-child),.insight:not(:last-child),.proof .stat:not(:last-child){
    border-bottom:2px solid var(--ink)!important;
  }
  .step-card{min-height:0;}
  .insight-card .stripe{height:100px;}
  .talk .wrap{grid-template-columns:1fr;gap:34px;}
  footer.site .wrap{grid-template-columns:1fr 1fr;}

  /* Mobile burger nav */
  .nav nav{display:none;}
  .nav nav.open{
    display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;
    background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
    padding:8px 32px 20px;gap:0;align-items:stretch;
    max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .nav-toggle{display:block;}
  .nav nav.open > a,.nav nav.open > details.nav-group{
    width:100%;border-top:2px solid var(--ink);
  }
  .nav nav.open > a:first-child,.nav nav.open > details.nav-group:first-child{border-top:0;}
  .nav nav.open > a{padding:18px 4px;font-size:17px;font-weight:700;color:var(--ink);}
  .nav nav.open > .btn{margin-top:16px;justify-content:center;border-top:0;box-shadow:4px 4px 0 var(--ink);}
  .nav details.nav-group{display:block;}
  .nav details.nav-group summary.nav-label{
    display:flex;width:100%;padding:18px 4px;justify-content:space-between;align-items:center;
    font-size:17px;font-weight:700;color:var(--ink);line-height:1.2;
  }
  .nav details.nav-group summary.nav-label::after{
    border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;
  }
  .nav details.nav-group:not([open]) > .nav-dropdown{display:none!important;}
  .nav details.nav-group[open] > .nav-dropdown{
    position:static;display:flex;flex-direction:column;background:transparent;
    border:0;box-shadow:none;padding:0 0 12px 12px;min-width:0;
  }
  .nav .nav-dropdown a{padding:12px 4px;font-size:15.5px;background:transparent!important;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
  .reveal{opacity:1;transform:none;}
  .hero h1 .cursor{display:none;}
}

/* ── Articles filter (on /articles) — chip rows above the list, and
   small chip labels inside each article item. ── */
.prose .article-filter{
  border:2px solid var(--ink);background:var(--paper);
  padding:16px 18px 12px;margin:24px 0 20px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:5px 5px 0 var(--ink);
}
.prose .article-filter .filter-group{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
}
.prose .article-filter .filter-label{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--ink);opacity:.6;margin-right:8px;min-width:80px;
}
.prose .article-filter .filter-chip{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  padding:5px 12px;border:1.5px solid var(--ink);background:var(--paper);
  color:var(--ink);cursor:pointer;border-radius:2px;
  transition:background .12s ease,color .12s ease;
}
.prose .article-filter .filter-chip:hover{background:var(--paper-2);}
.prose .article-filter .filter-chip.is-active{background:var(--ink);color:var(--paper);}
.prose .article-filter .filter-chip.is-all.is-active{background:var(--butter);color:var(--ink);}
.prose .article-filter .filter-empty{
  margin:8px 0 0;font-size:14px;color:var(--ink);opacity:.72;
}
.prose .article-filter .filter-reset{
  border:1.5px solid var(--ink);background:var(--paper);padding:3px 10px;
  font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:700;
  cursor:pointer;margin-left:6px;
}
.prose .article-filter .filter-reset:hover{background:var(--butter);}
@media(max-width:640px){
  .prose .article-filter{padding:12px 14px 10px;}
  .prose .article-filter .filter-label{min-width:100%;margin-bottom:2px;}
}

/* Small chip labels inside each .article-item card body. */
.prose .article-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;
}
.prose .article-chip{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border:1.5px solid var(--ink);border-radius:2px;
  line-height:1.4;color:var(--ink);background:var(--paper-2);
}
.prose .article-chip.chip-geo{background:var(--paper);}
.prose .article-chip.chip-cat-transitions      {background:#F0E4CC;}
.prose .article-chip.chip-cat-energy           {background:#F5D9C6;}
.prose .article-chip.chip-cat-e-mobility       {background:#DCE9E1;}
.prose .article-chip.chip-cat-industrial-policy{background:#E4E4D8;}
.prose .article-chip.chip-cat-agriculture      {background:#E5EDD8;}
.prose .article-chip.chip-cat-finance          {background:#EEE1D2;}
.prose .article-chip.chip-cat-measurement      {background:#DBE4EF;}
.prose .article-chip.chip-cat-ai-digital       {background:#E1DAE6;}
.prose .article-chip.chip-cat-europe           {background:#E4E9F1;}
.prose .article-chip.chip-cat-method           {background:#EFE4CE;}

/* Hidden by the filter script. */
.prose .article-list .article-item[data-hidden="true"]{display:none !important;}

/* Same butter-on-hover treatment as the home resource cards. Applied to
   the article list on /articles and to the target-card blocks on
   /who-we-serve so hoverable content signals its clickability the same
   way across the site. Article-item gets side padding baked in so the
   hover band reads as a tinted rectangle, not an edge-to-edge wash. */
.prose .article-list .article-item{
  padding-left:14px;padding-right:14px;margin-left:-14px;margin-right:-14px;
  transition:background .15s ease;border-radius:2px;
}
.prose .article-list .article-item:hover{background:var(--butter);}
.prose .target-card{
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
}
.prose .target-card:hover{background:var(--butter);}
/* The butter-headed card keeps a paper-2 wash so its body still shifts
   against the header on hover. */
.prose .target-card.c-butter:hover{background:var(--paper-2);}

/* Utility: hide on narrow viewports. Used for the second-row insight
   cards on the home page so mobile keeps the shorter three-card view. */
@media(max-width:860px){
  .desktop-only{display:none !important;}
}