/* ==========================================================================
   GROUNDWORK ACTION — theme stylesheet
   Design tokens (from the Groundwork Action design system: colors_and_type.css)
   + layout/interaction styles (from the website UI kit: kit.css), merged and
   adapted for the WordPress theme. Fonts are enqueued separately in functions.php.
   ========================================================================== */

:root {
  /* ---- Brand colors (sampled from logo + mockup) ---- */
  --gw-teal-900: #102f40;
  --gw-teal-800: #163a4d;
  --gw-teal-700: #1b475e;   /* PRIMARY brand teal */
  --gw-teal-600: #235068;
  --gw-teal-500: #2f6076;

  --gw-cyan: #038b95;
  --gw-cyan-bright: #0aa0ab;

  --gw-mint: #64bfa0;       /* primary CTA */
  --gw-mint-dark: #4ba588;

  --gw-lime: #cedd06;
  --gw-red: #e13e19;
  --gw-red-dark: #c4330f;
  --gw-steel: #6c8995;

  --gw-white:  #ffffff;
  --gw-paper:  #f4f6f7;
  --gw-mist:   #e6ebed;
  --gw-ash:    #c3ccd0;
  --gw-slate:  #5a6b73;
  --gw-ink:    #14333f;

  /* ---- Semantic roles ---- */
  --color-brand:        var(--gw-teal-700);
  --color-brand-accent: var(--gw-cyan);
  --color-cta:          var(--gw-mint);
  --border-on-dark:     rgba(255,255,255,0.18);

  /* The signature 4-color "rainbow rule" (cyan -> mint -> lime -> red) */
  --rainbow: linear-gradient(90deg,
                var(--gw-cyan) 0 25%,
                var(--gw-mint) 25% 50%,
                var(--gw-lime) 50% 75%,
                var(--gw-red)  75% 100%);

  /* Running-bond brick wall (mirrors the logo): light steel mortar over the
     teal section behind it, each course offset half a brick. Tile = 110x88
     (brick 110 wide x 44 tall, 6px mortar); scale per wall via background-size. */
  --brick-wall: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='110'%20height='88'%3E%3Cg%20fill='%236c8995'%3E%3Crect%20width='110'%20height='6'/%3E%3Crect%20y='44'%20width='110'%20height='6'/%3E%3Crect%20width='6'%20height='44'/%3E%3Crect%20x='52'%20y='44'%20width='6'%20height='44'/%3E%3C/g%3E%3C/svg%3E");

  /* ---- Type ---- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Radii / shadow ---- */
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,47,64,0.08);
  --shadow-md: 0 6px 20px rgba(16,47,64,0.12);
  --shadow-lg: 0 18px 48px rgba(16,47,64,0.20);

  --maxw: 1200px;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--gw-ink); background: var(--gw-white); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* Skip link (a11y) */
.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--gw-teal-700);
  padding: 10px 18px; z-index: 200; font-weight: 700; }
.skip-link:focus { left: 8px; top: 8px; }

/* Visually-hidden text for screen readers */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Lucide icon sizing */
[data-lucide] { width: 22px; height: 22px; stroke-width: 2; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border: 2px solid transparent;
  padding: 14px 30px; transition: all .15s ease; text-decoration: none; line-height: 1; white-space: nowrap; }
.btn--outline-light { background: transparent; color: #fff; border-color: #fff; border-radius: 999px; }
.btn--outline-light:hover { background: #fff; color: var(--gw-teal-700); }
.btn--outline-dark { background: transparent; color: var(--gw-teal-700); border-color: var(--gw-teal-700); border-radius: 999px; }
.btn--outline-dark:hover { background: var(--gw-teal-700); color: #fff; }
.btn--mint { background: var(--gw-mint); color: var(--gw-teal-900); border-radius: 999px; }
.btn--mint:hover { background: var(--gw-mint-dark); }
.btn--mint-sq { background: var(--gw-mint); color: var(--gw-teal-900); border-radius: 3px; }
.btn--mint-sq:hover { background: var(--gw-mint-dark); }
.btn--sm { padding: 10px 20px; font-size: 12px; }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--gw-teal-700); }
.admin-bar .hdr { top: 32px; }
.hdr__bar { display: flex; align-items: center; gap: 28px; height: 88px; }
.hdr__logo { display: flex; align-items: center; }
.hdr__logo img { height: 60px; width: auto; }
.hdr__nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.hdr__link { color: #fff; text-decoration: none; font-weight: 600; font-size: 13.5px; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 6px 0; position: relative; white-space: nowrap; }
.hdr__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--gw-mint); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.hdr__link:hover::after, .hdr__link--active::after, .hdr__link.current-menu-item::after { transform: scaleX(1); }
.hdr__burger { display: none; margin-left: auto; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.hdr__burger [data-lucide] { width: 30px; height: 30px; }

.mobile-menu { display: none; background: var(--gw-teal-800); border-top: 1px solid var(--border-on-dark); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; color: #fff; text-decoration: none; padding: 16px 32px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; border-bottom: 1px solid var(--border-on-dark); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; background: var(--gw-teal-700); color: #fff; overflow: hidden; }
.hero__inner { position: relative; z-index: 2; padding: 96px 0 110px; max-width: 640px; }
.hero h1 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(48px, 7vw, 104px); line-height: 0.92; letter-spacing: 0.01em; margin: 0; }
.hero__rule { height: 8px; width: 320px; max-width: 80%; background: var(--rainbow); margin: 28px 0; border-radius: 2px; }
.hero__lede { font-size: 22px; line-height: 1.45; max-width: 30ch; margin: 0 0 36px; color: #eaf1f3; }
.hero__wall { position: absolute; right: 0; top: 0; bottom: 0; width: 52%; z-index: 1; opacity: .85;
  background: var(--brick-wall); background-size: 110px 88px;
  -webkit-mask: linear-gradient(115deg, transparent 0 24%, #000 56%);
          mask: linear-gradient(115deg, transparent 0 24%, #000 56%); }

/* Gridlines off (GWA_GRIDLINES === false): hide the graph-paper "wall" overlays.
   Underlying panels keep their solid teal background. */
.gwa-no-gridlines .hero__wall,
.gwa-no-gridlines .wcard__thumb .wall,
.gwa-no-gridlines .scrolly__wall { display: none; }

/* Per-section brick-wall toggles (homepage editor checkboxes). */
.gwa-no-bricks-hero .hero__wall { display: none; }
.gwa-no-bricks-work .wcard__thumb .wall { display: none; }
.gwa-no-bricks-stats .scrolly__wall { display: none; }

/* ==========================================================================
   Campaign band
   ========================================================================== */
.campaign { position: relative; background: var(--gw-teal-900); color: #fff; overflow: hidden; }
.campaign__photo { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,47,64,.55), rgba(16,47,64,.92)),
    repeating-linear-gradient(98deg, #2a4a5c 0 60px, #244254 60px 120px, #1d3a4a 120px 180px);
  filter: grayscale(.5); }
.campaign__photo--image { background-size: cover, cover; background-position: center; }
.campaign__inner { position: relative; z-index: 2; padding: 120px 0; }
.campaign h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(44px, 6.5vw, 92px); line-height: 0.95; margin: 0 0 20px; max-width: 16ch; }
.campaign p { font-size: 20px; line-height: 1.5; max-width: 48ch; margin: 0 0 32px; color: #dce6ea; }

/* ==========================================================================
   Section shell
   ========================================================================== */
.section { padding: 88px 0; }
.section--paper { background: var(--gw-paper); }
.section--mint { background: var(--gw-mint); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section__head h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(32px, 4vw, 56px); line-height: 1; margin: 0; color: var(--gw-ink); }
.eyebrow { font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gw-cyan); margin: 0 0 12px; }
.eyebrow--mint { color: var(--gw-mint); }

/* ==========================================================================
   Work grid
   ========================================================================== */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.wcard { background: #fff; box-shadow: var(--shadow-md); display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.wcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.wcard__thumb { height: 168px; position: relative; overflow: hidden; background: var(--gw-teal-700); }
.wcard__thumb .wall { position: absolute; inset: 0; opacity: .5;
  background: var(--brick-wall); background-size: 55px 46px; }
.wcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wcard__chip { position: absolute; left: 14px; top: 14px; z-index: 2; }
.wcard__body { padding: 20px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.wcard h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 23px;
  line-height: 1.04; margin: 0 0 10px; color: var(--gw-ink); }
.wcard__meta { font-size: 12.5px; color: var(--gw-slate); margin-bottom: 16px; }
.wcard__more { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gw-teal-700); border-bottom: 2px solid var(--gw-mint); padding-bottom: 3px; align-self: flex-start; }

.chip { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; display: inline-block; }
.chip--teal { background: var(--gw-teal-700); color: #fff; }
.chip--cyan { background: var(--gw-cyan); color: #fff; }
.chip--red { background: var(--gw-red); color: #fff; }
.chip--ghost { background: var(--gw-paper); color: var(--gw-slate); border: 1px solid var(--gw-mist); }

/* ==========================================================================
   Sticky scrolly stat
   ========================================================================== */
.scrolly { background: var(--gw-teal-800); color: #fff; position: relative; }
.scrolly__anchor { position: absolute; top: 0; left: 0; }
.scrolly__track { position: relative; }
.scrolly__panel { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.scrolly__wall { position: absolute; inset: 0; opacity: .14;
  background: var(--brick-wall); background-size: 97px 78px; }
.scrolly__inner { position: relative; text-align: center; max-width: 1000px; padding: 0 32px; }
.scrolly__eyebrow { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 14px;
  color: var(--gw-mint); margin: 0 0 22px; }
.scrolly__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(72px, 15vw, 220px);
  line-height: .85; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scrolly__num .unit { color: var(--gw-mint); }
.scrolly__say { font-size: clamp(20px, 2.6vw, 34px); line-height: 1.25; margin: 22px auto 0; max-width: 24ch;
  font-family: var(--font-display); text-transform: uppercase; font-weight: 600; }
.scrolly__src { font-size: 13px; color: #9fc1cb; margin-top: 20px; letter-spacing: .04em; }
.scrolly__stage { transition: opacity .4s ease, transform .4s ease; }
.scrolly__stage.is-swapping { opacity: 0; transform: translateY(12px); }
.scrolly__dots { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); display: flex;
  flex-direction: column; gap: 12px; }
.scrolly__dots i { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.28); display: block; transition: all .3s; }
.scrolly__dots i.on { background: var(--gw-mint); transform: scale(1.35); }

/* ==========================================================================
   Newsroom
   ========================================================================== */
.news { display: flex; flex-direction: column; }
.nrow { display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: center;
  padding: 24px 20px; margin: 0 -20px; border-top: 1px solid var(--gw-mist); text-decoration: none; color: inherit; transition: background .15s; }
.nrow:last-child { border-bottom: 1px solid var(--gw-mist); }
.nrow:hover { background: #fff; }
.nrow__date { font-size: 13px; color: var(--gw-slate); }
.nrow__title { font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--gw-ink); }
.nrow__icon { display: flex; align-items: center; gap: 16px; }
.nrow__src { font-size: 13px; color: var(--gw-cyan); font-weight: 700; letter-spacing: 0.04em; }
.nrow [data-lucide] { color: var(--gw-teal-700); }

/* Newsroom on the mint background: shift text/borders to dark teal for contrast,
   matching the newsletter section's treatment on the same color. */
.section--mint .eyebrow { color: #fff; }
.section--mint .nrow { border-top-color: rgba(16, 47, 64, 0.18); }
.section--mint .nrow:last-child { border-bottom-color: rgba(16, 47, 64, 0.18); }
.section--mint .nrow__date { color: #fff; }
.section--mint .nrow:hover .nrow__date { color: var(--gw-teal-800); }
.section--mint .nrow__src { color: var(--gw-teal-900); }

/* ==========================================================================
   Newsletter CTA
   ========================================================================== */
.nl { background: var(--gw-mint); }
.nl__inner { padding: 72px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.nl h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: clamp(34px, 4.5vw, 60px);
  line-height: 0.96; margin: 0; color: var(--gw-teal-900); }
.nl p { font-size: 18px; line-height: 1.5; color: var(--gw-teal-900); margin: 16px 0 0; max-width: 40ch; }
.nl__form { display: flex; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-md); }
.nl__form input { flex: 1; border: 0; padding: 20px 20px; font-family: inherit; font-size: 16px; color: var(--gw-ink); outline: none; }
.nl__ok { background: var(--gw-teal-700); color: #fff; padding: 28px; border-radius: 4px; font-size: 18px; display: flex; align-items: center; gap: 14px; }
.nl__ok [data-lucide] { color: var(--gw-mint); width: 28px; height: 28px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr { background: var(--gw-teal-900); color: #fff; }
.ftr__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: 72px 0 48px; }
.ftr__explore { grid-column: 3; }
.ftr__logo img { height: 120px; width: auto; }
.ftr__tag { color: #aebfc7; font-size: 15px; line-height: 1.5; max-width: 32ch; margin: 20px 0 0; }
.ftr h4 { font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gw-mint); margin: 0 0 18px; }
.ftr__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ftr__links a { color: #d7e2e6; text-decoration: none; font-size: 15px; }
.ftr__links a:hover { color: #fff; }
.ftr__social { display: flex; gap: 14px; margin-top: 22px; }
.ftr__social a { width: 40px; height: 40px; border: 1px solid var(--border-on-dark); border-radius: 999px;
  display: grid; place-items: center; color: #fff; transition: all .15s; }
.ftr__social a:hover { background: #fff; color: var(--gw-teal-900); }
.ftr__bottom { border-top: 1px solid var(--border-on-dark); padding: 24px 0; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: 13px; color: #9fb2bb; }
.ftr__bottom a { color: #9fb2bb; }

/* ==========================================================================
   Action modal
   ========================================================================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(16,47,64,.7); z-index: 100;
  display: grid; place-items: center; padding: 24px; animation: gw-fade .2s ease; }
@keyframes gw-fade { from { opacity: 0; } }
.modal { background: #fff; width: 100%; max-width: 520px; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-lg);
  animation: gw-rise .25s cubic-bezier(.2,.6,.2,1); }
@keyframes gw-rise { from { transform: translateY(16px); opacity: 0; } }
.modal__head { background: var(--gw-teal-700); color: #fff; padding: 28px 32px; position: relative; }
.modal__head .eyebrow { color: var(--gw-mint); }
.modal__head h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 32px; line-height: 1; margin: 8px 0 0; }
.modal__close { position: absolute; top: 18px; right: 18px; background: none; border: 0; color: #fff; cursor: pointer; opacity: .8; }
.modal__close:hover { opacity: 1; }
.modal__body { padding: 28px 32px 32px; }
.modal__intro { margin-top: 0; color: var(--gw-slate); font-size: 15px; line-height: 1.5; }
.modal__notice { border-radius: 4px; margin: 0 0 18px; padding: 12px 14px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.modal__notice--error { background: rgba(225, 62, 25, .08); border: 1px solid var(--gw-red); color: var(--gw-ink); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gw-slate); margin-bottom: 7px; }
.field input,
.field select,
.field textarea { width: 100%; border: 1px solid var(--gw-ash); border-radius: 4px; padding: 13px 14px; font-family: inherit; font-size: 15px; color: var(--gw-ink); background: #fff; }
.field textarea { min-height: 190px; line-height: 1.5; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--gw-cyan); box-shadow: 0 0 0 3px rgba(3,139,149,.15); }
.modal__submit { width: 100%; justify-content: center; margin-top: 6px; }
.modal__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modal__success { text-align: center; padding: 16px 0; }
.modal__success [data-lucide] { width: 56px; height: 56px; color: var(--gw-mint); margin: 0 auto 16px; }
.modal__success h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 30px; margin: 0 0 10px; color: var(--gw-ink); }
.modal__success p { color: var(--gw-slate); font-size: 16px; line-height: 1.5; margin: 0; }

/* ==========================================================================
   Generic interior pages / posts (page.php, index.php fallback)
   ========================================================================== */
.page:not(body) { padding: 72px 0 96px; }
.page__header { margin-bottom: 32px; }
.page__title { font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(34px, 5vw, 64px); line-height: 1; margin: 0 0 16px; color: var(--gw-ink); }
.page__rule { height: 6px; width: 220px; max-width: 100%; background: var(--rainbow); border: 0; margin: 0 0 8px; }
.entry { max-width: 740px; font-size: 18px; line-height: 1.6; }
.entry h2, .entry h3 { font-family: var(--font-display); text-transform: uppercase; color: var(--gw-ink); }
.entry h2 { font-size: 28px; line-height: 1.1; margin: 44px 0 14px; }
.entry h3 { font-size: 20px; line-height: 1.2; margin: 30px 0 10px; color: var(--gw-slate); }
.entry > :first-child { margin-top: 0; }
.entry p { margin: 0 0 20px; }
.entry ul, .entry ol { margin: 0 0 20px; padding-left: 24px; }
.entry li { margin-bottom: 10px; }
.entry a { color: var(--gw-cyan); }
.entry img { height: auto; margin: 24px 0; }

/* Newsroom single (press releases / statements) */
.newsroom-single__body { max-width: 760px; }
.newsroom-single__body hr { border: 0; border-top: 1px solid var(--gw-mist); margin: 40px 0; }
.newsroom-single__dek { font-size: 21px; line-height: 1.45; color: var(--gw-slate); margin-bottom: 28px; }
.newsroom-single__body li.is-sub { margin-left: 26px; list-style-type: circle; }
.newsroom-single__end { text-align: center; color: var(--gw-slate); margin-top: 40px; }
.contact-form { max-width: 820px; margin-top: 34px; }
.contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.contact-form .field { margin-bottom: 0; }
.field--full,
.contact-form__actions { grid-column: 1 / -1; }
.contact-form__actions { display: flex; align-items: center; gap: 16px; }
.contact-form__notice { border-radius: 4px; margin: 0 0 22px; padding: 14px 16px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.contact-form__notice--success { background: rgba(128, 198, 172, .22); border: 1px solid var(--gw-mint); color: var(--gw-teal-900); }
.contact-form__notice--error { background: rgba(225, 62, 25, .08); border: 1px solid var(--gw-red); color: var(--gw-ink); }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Research detail page (single-gwa_research.php)
   ========================================================================== */
.research-hero { background: var(--gw-teal-700); color: #fff; padding: 84px 0 72px; }
.research-hero__title { font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(46px, 7.2vw, 104px); line-height: 0.94; letter-spacing: 0.01em; margin: 0; max-width: 18ch; }
/* Longer headlines step down in size and widen the measure so they don't eat
   the whole viewport. Bucketed server-side by gwa_hero_title_length_class(). */
.research-hero__title.is-long { font-size: clamp(40px, 5.4vw, 74px); max-width: 24ch; }
.research-hero__title.is-xlong { font-size: clamp(32px, 4vw, 54px); line-height: 1; max-width: 30ch; }
.research-hero__rule { height: 8px; width: 320px; max-width: 80%; background: var(--rainbow); border: 0; margin: 26px 0; border-radius: 2px; }
.research-hero__date { font-size: 14px; letter-spacing: 0.04em; color: #bcd0d8; }
.research-hero__lede { font-size: 20px; line-height: 1.5; max-width: 56ch; margin: 0; color: #eaf1f3; }

/* Our Work archive: card grid wraps to multiple rows */
.our-work .work { margin-top: 8px; }

/* Two-column reading layout: sticky metadata sidebar + report body */
.research__main { padding: 64px 0 88px; }
.research__layout { display: grid; grid-template-columns: 264px 1fr; gap: 56px; align-items: start; }
.research__body { max-width: 760px; color: var(--gw-ink); }

.research__aside { position: sticky; top: 112px; display: flex; flex-direction: column; }
.admin-bar .research__aside { top: 144px; }
.research-aside__block { border-top: 1px solid var(--gw-mist); padding: 18px 0 20px; }
.research-aside__label { font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gw-slate); margin: 0 0 10px; }
.research-aside__text { font-size: 15px; line-height: 1.5; color: var(--gw-ink); margin: 0; }
.research-aside__text--byline { font-size: 14px; color: var(--gw-slate); }
.research-aside__dl { display: flex; align-items: flex-start; gap: 12px; text-decoration: none; color: var(--gw-ink); }
.research-aside__dl + .research-aside__dl { margin-top: 18px; }
.research-aside__dl [data-lucide] { width: 22px; height: 22px; color: var(--gw-cyan); flex: none; margin-top: 1px; }
.research-aside__dl-text { display: flex; flex-direction: column; gap: 3px; }
.research-aside__dl-name { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--gw-teal-700);
  border-bottom: 2px solid var(--gw-mint); padding-bottom: 2px; align-self: flex-start; }
.research-aside__dl-meta { font-size: 12.5px; color: var(--gw-slate); letter-spacing: 0.02em; }
.research-aside__dl:hover .research-aside__dl-name { color: var(--gw-cyan); }
.research__body > h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.05; color: var(--gw-teal-700); margin: 48px 0 14px; }
.research__body > h2:first-child { margin-top: 0; }
.research__body h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 600;
  font-size: 20px; color: var(--gw-ink); margin: 32px 0 10px; }
.research__body p { margin: 0 0 18px; }
.research__body ul { margin: 0 0 20px; padding-left: 22px; }
.research__body li { margin-bottom: 10px; line-height: 1.55; }
.research__body a { color: var(--gw-cyan); }

/* "Strategic implication" callout */
.research-callout { background: #fff; border-left: 6px solid var(--gw-mint); box-shadow: var(--shadow-sm);
  padding: 20px 24px; margin: 24px 0 28px; font-size: 17px; line-height: 1.55; }
.research-callout strong { display: block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 14px; color: var(--gw-cyan); margin-bottom: 6px; }

/* The two tested-message frames, side by side */
.research-msgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0 30px; }
.research-msg { padding: 22px 24px; border-top: 8px solid var(--gw-steel); background: var(--gw-paper); }
.research-msg--populist { border-top-color: var(--gw-red); }
.research-msg h4 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 18px;
  letter-spacing: 0.04em; margin: 0 0 12px; color: var(--gw-ink); }
.research-msg p { font-size: 16px; }
.research-msg ul { margin-bottom: 0; }
.research-msg li { font-size: 15.5px; }

/* Footnotes / methodology fine print */
.research-footnotes { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--gw-mist);
  font-size: 14px; line-height: 1.5; color: var(--gw-slate); }
.research-footnotes li { margin-bottom: 8px; }

.research__back { max-width: 760px; margin: 44px 0 0; }
.research__back a { display: inline-flex; align-items: center; gap: 8px; color: var(--gw-teal-700);
  font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.research__back a:hover { color: var(--gw-cyan); }
.research__back [data-lucide] { width: 18px; height: 18px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 920px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: block; }
  .work { grid-template-columns: 1fr; }
  .research-msgs { grid-template-columns: 1fr; }
  .research__layout { grid-template-columns: 1fr; gap: 8px; }
  .research__aside { position: static; top: auto; margin-bottom: 24px; }
  .nl__inner { grid-template-columns: 1fr; gap: 28px; }
  .ftr__top { grid-template-columns: 1fr; gap: 36px; }
  .ftr__explore { grid-column: auto; }
  .hero__wall { opacity: .35; }
  .nrow { grid-template-columns: 1fr; gap: 6px; }
  .nrow__icon { display: none; }
}

@media screen and (max-width: 782px) {
  .admin-bar .hdr { top: 46px; }
}

@media (max-width: 640px) {
  .contact-form__grid { grid-template-columns: 1fr; }
  .scrolly__inner { padding: 0 28px; }
  .scrolly__dots { right: 18px; gap: 10px; }
  .scrolly__dots i { width: 8px; height: 8px; }
  .scrolly__num { font-size: clamp(64px, 22vw, 112px); }
  .scrolly__say { font-size: clamp(20px, 7vw, 30px); max-width: 13ch; }
  .scrolly__src { max-width: 28ch; margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .wcard, .hdr__link::after { transition: none !important; }
  .scrolly__panel { position: relative; height: auto; min-height: 72vh; padding: 64px 0; }
}

/* ==========================================================================
   Research charts  (gwc-* = "groundwork chart")
   --------------------------------------------------------------------------
   A brand-native replacement for the pollster's navy/gold chart images, so
   survey figures render as live HTML: crisp at any zoom, responsive, and
   readable by a screen reader (every value is real text in the DOM).

   Diverging two-pole system, validated for colour-vision deficiency and
   contrast against a white surface:
     A-pole — the structural / populist answer .. #1b475e teal-700, #41748a light step
     B-pole — the market / status-quo answer ... #c4330f red-dark, #f0906f light step
     neutral — neither / not sure ............... #c3ccd0 ash
   Worst adjacent pair: dE 15.4 under both deutan/protan CVD and normal vision.
   #f0906f sits under 3:1 against white, so EVERY segment carries a direct
   label; that is the required relief, not an optional nicety. Label colour is
   set by fill weight, not by hue: white on the strong fills (5.5:1 and 10:1),
   ink on the soft/neutral fills (5.7:1 and 8.2:1) — all clear of AA.

   Bar geometry is driven by an inline `--v` (0-100) on each mark, so the
   markup stays declarative and the post content holds no magic pixel values.
   ========================================================================== */
:root {
  --gwc-a-strong: #1b475e;
  --gwc-a-soft:   #41748a;
  --gwc-b-soft:   #f0906f;
  --gwc-b-strong: #c4330f;
  --gwc-neutral:  #c3ccd0;
}

/* ---- Figure shell ---- */
.research-figure { margin: 36px 0 40px; padding: 24px 26px 18px; background: #fff;
  border: 1px solid var(--gw-mist); box-shadow: var(--shadow-sm); }
.research-figure__q { font-family: var(--font-display); text-transform: uppercase; font-weight: 600;
  font-size: 17px; line-height: 1.18; letter-spacing: 0.02em; color: var(--gw-teal-700); margin: 0; }
.research-figure__rule { height: 5px; width: 108px; background: var(--rainbow); border: 0; margin: 11px 0 18px; }
.research-figure__src { font-size: 12.5px; line-height: 1.45; color: var(--gw-slate); margin: 16px 0 0;
  border-top: 1px solid var(--gw-mist); padding-top: 10px; }

/* Figures whose chart is an image cut from the source PDF rather than live
   markup. The crops carry their own titles, so these usually omit __q; the
   question lives in the alt text instead. */
.research-figure--img { padding: 20px 22px 16px; }
.research-figure--img .research-figure__rule { margin: 0 0 16px; }
.research-figure__img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }

/* ---- Legend: identity is never colour alone — swatch + wording ---- */
.gwc-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 18px; }
.gwc-key { display: flex; align-items: flex-start; gap: 9px; flex: 1 1 260px; max-width: 340px;
  font-size: 13px; line-height: 1.35; color: var(--gw-ink); }
.gwc-key b { display: block; font-weight: 700; }
.gwc-sw { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* ---- Shared marks ---- */
.gwc-teal        { background: var(--gwc-a-strong); }
.gwc-teal-soft   { background: var(--gwc-a-soft); }
.gwc-warm        { background: var(--gwc-b-strong); }
.gwc-warm-soft   { background: var(--gwc-b-soft); }
.gwc-neutral     { background: var(--gwc-neutral); }

/* ==========================================================================
   Diverging paired bars (statement A grows left, statement B grows right)
   ========================================================================== */
.gwc-div__head, .gwc-div__row { display: grid; grid-template-columns: minmax(84px, 150px) 1fr 48px;
  gap: 12px; align-items: center; }
.gwc-div__head { padding-bottom: 6px; }
.gwc-div__nethead { font-family: var(--font-display); text-transform: uppercase; font-size: 11px;
  letter-spacing: 0.06em; font-weight: 600; color: #fff; background: var(--gw-teal-700);
  padding: 4px 6px; text-align: center; grid-column: 3; }
.gwc-div__row { padding: 3px 0; }
.gwc-div__row + .gwc-div__row { border-top: 1px solid var(--gw-paper); }
.gwc-div__row:hover { background: var(--gw-paper); }
.gwc-div__lbl { font-size: 13.5px; line-height: 1.2; text-align: right; color: var(--gw-ink); }
.gwc-div__track { display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center; }
.gwc-div__half { display: flex; align-items: center; gap: 7px; height: 18px; }
.gwc-div__half--a { justify-content: flex-end; }
.gwc-div__bar { height: 100%; width: calc(var(--v) * 1%); }
.gwc-div__half--a .gwc-div__bar { border-radius: 3px 0 0 3px; }
.gwc-div__half--b .gwc-div__bar { border-radius: 0 3px 3px 0; }
.gwc-div__spine { height: 18px; background: var(--gw-ash); }
.gwc-div__val { font-size: 12.5px; font-weight: 700; color: var(--gw-ink);
  font-variant-numeric: tabular-nums; }
.gwc-div__net { font-size: 12.5px; font-weight: 700; text-align: center; color: var(--gw-slate);
  font-variant-numeric: tabular-nums; }

/* ==========================================================================
   100%-stacked rows — 2px surface gap keeps the two fills from fusing
   ========================================================================== */
.gwc-stack__row { display: grid; grid-template-columns: minmax(90px, 155px) 1fr; gap: 12px;
  align-items: center; padding: 3px 0; }
.gwc-stack__row:hover { background: var(--gw-paper); }
.gwc-stack__lbl { font-size: 13.5px; line-height: 1.2; text-align: right; color: var(--gw-ink); }
.gwc-stack__track { display: flex; gap: 2px; height: 24px; }
.gwc-seg { width: calc(var(--v) * 1%); display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.gwc-seg:first-child { border-radius: 3px 0 0 3px; }
.gwc-seg:last-child { border-radius: 0 3px 3px 0; }
.gwc-seg.gwc-warm-soft, .gwc-seg.gwc-neutral { color: var(--gw-ink); }

/* ==========================================================================
   Stacked columns (intensity split) + subgroup table
   ========================================================================== */
.gwc-cols { display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 6vw, 56px);
  padding: 6px 0 0; }
.gwc-col { width: 86px; display: flex; flex-direction: column; justify-content: flex-end; }
.gwc-col__total { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1;
  text-align: center; color: var(--gw-ink); margin-bottom: 7px; }
.gwc-col__stack { display: flex; flex-direction: column; gap: 2px; }
/* 3.2px per point, floor 16px — the floor equals the smallest value plotted (5%),
   so no segment is ever inflated above its true height. */
.gwc-col__seg { height: calc(var(--v) * 3.2px); min-height: 16px; display: flex; align-items: center;
  justify-content: center; font-size: 12.5px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; }
.gwc-col__seg.gwc-warm-soft, .gwc-col__seg.gwc-neutral { color: var(--gw-ink); }
.gwc-col__cap { font-family: var(--font-display); text-transform: uppercase; font-weight: 600;
  font-size: 12px; letter-spacing: 0.06em; text-align: center; color: var(--gw-slate); margin-top: 9px; }

.gwc-table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 14px; }
.gwc-table th { font-family: var(--font-display); text-transform: uppercase; font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.07em; color: #fff; padding: 7px 10px; text-align: right;
  vertical-align: bottom; }
.gwc-table th.gwc-th--a { background: var(--gwc-a-strong); }
.gwc-table th.gwc-th--b { background: var(--gwc-b-strong); }
.gwc-table th.gwc-th--n { background: var(--gw-slate); }
.gwc-table th:first-child { background: transparent; color: var(--gw-slate); text-align: left; }
.gwc-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--gw-mist);
  font-variant-numeric: tabular-nums; }
.gwc-table td:first-child { text-align: left; }
.gwc-table tbody tr:hover { background: var(--gw-paper); }

/* ==========================================================================
   Nested bars — "strongly favour" sits inside "total favour"
   ========================================================================== */
.gwc-nest__head, .gwc-nest__row { display: grid; grid-template-columns: 1fr 210px 38px 38px;
  gap: 14px; align-items: center; }
.gwc-nest__head { padding-bottom: 8px; }
.gwc-nest__head > div:nth-child(n+3) { font-family: var(--font-display); text-transform: uppercase;
  font-weight: 600; font-size: 11px; letter-spacing: 0.05em; color: var(--gw-slate); text-align: center;
  line-height: 1.1; }
.gwc-nest__row { padding: 8px 0; border-top: 1px solid var(--gw-mist); }
.gwc-nest__row:hover { background: var(--gw-paper); }
.gwc-nest__lbl { font-size: 14.5px; line-height: 1.3; color: var(--gw-ink); }
.gwc-nest__track { position: relative; height: 26px; background: var(--gw-paper); }
.gwc-nest__total { position: absolute; top: 0; left: 0; bottom: 0; width: calc(var(--v) * 1%);
  background: var(--gwc-a-soft); border-radius: 0 3px 3px 0; }
/* 2px surface ring so the nested mark reads as a mark, not a colour change */
.gwc-nest__strong { position: absolute; top: 0; left: 0; bottom: 0; width: calc(var(--v) * 1%);
  background: var(--gwc-a-strong); border-right: 2px solid #fff; border-radius: 0 2px 2px 0; }
.gwc-nest__n { font-size: 14px; font-weight: 700; text-align: center; color: var(--gw-ink);
  font-variant-numeric: tabular-nums; }
.gwc-nest__n--soft { color: var(--gw-slate); }

/* ==========================================================================
   "Five keys" — the memo's DON'T / DO recommendation pairs
   ========================================================================== */
.research-key { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start;
  margin: 34px 0 24px; }
.research-key__num { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 0.9;
  color: #fff; background: var(--gw-teal-700); width: 54px; height: 54px; display: flex;
  align-items: center; justify-content: center; }
.research-key__pair { display: flex; flex-direction: column; gap: 2px; }
.research-key__dont, .research-key__do { padding: 13px 16px; font-size: 16.5px; line-height: 1.4;
  background: var(--gw-paper); border-left: 6px solid var(--gw-steel); }
.research-key__dont { border-left-color: var(--gw-red); }
.research-key__do { border-left-color: var(--gw-mint); }
.research-key__dont b, .research-key__do b { font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 13px; display: block; margin-bottom: 3px; }
.research-key__dont b { color: var(--gw-red-dark); }
.research-key__do b { color: var(--gw-cyan); }

/* ---- Chart responsive behaviour ---- */
@media (max-width: 700px) {
  .research-figure { padding: 20px 16px 14px; }
  .gwc-legend { gap: 12px; }
  .gwc-key { flex: 1 1 100%; max-width: none; }
  .gwc-div__nethead { font-size: 10px; letter-spacing: 0.03em; }
  .gwc-div__head, .gwc-div__row { grid-template-columns: 1fr 54px; grid-template-areas: "lbl net" "trk trk"; gap: 2px 10px; padding: 7px 0; }
  .gwc-div__lbl { grid-area: lbl; text-align: left; font-weight: 700; }
  .gwc-div__track { grid-area: trk; }
  .gwc-div__net { grid-area: net; }
  .gwc-div__nethead { grid-column: 2; }
  .gwc-stack__row { grid-template-columns: 1fr; gap: 3px; padding: 7px 0; }
  .gwc-stack__lbl { text-align: left; font-weight: 700; }
  .gwc-nest__head, .gwc-nest__row { grid-template-columns: 1fr 40px 40px; grid-template-areas: "lbl tot str" "trk trk trk"; gap: 6px 10px; }
  /* The head carries a spacer cell per desktop column; drop one so its two
     labels land over the number columns rather than one cell to the left. */
  .gwc-nest__head { grid-template-areas: none; }
  .gwc-nest__head > div:first-child { display: none; }
  .gwc-nest__lbl { grid-area: lbl; }
  .gwc-nest__track { grid-area: trk; }
  .gwc-col { width: 68px; }
  .gwc-table { font-size: 13px; }
  .gwc-table th, .gwc-table td { padding: 6px 7px; }
}

/* ==========================================================================
   Figure lightbox — tap a research figure to lift it above the page
   --------------------------------------------------------------------------
   The chart crops come out of a print PDF at ~800-1250px wide, so on a phone
   they render at roughly a third of native size. Tapping one opens it
   fit-to-screen over a teal scrim; pinch, tap or the +/- controls zoom in and
   a drag pans. Sits at z-index 150: above the action modal (100) and the
   sticky header (50), below the skip link (200).
   ========================================================================== */
.research__body img.is-zoomable { cursor: zoom-in; }

.gwlb { position: fixed; inset: 0; z-index: 150; background: rgba(16, 47, 64, 0.94); }
.gwlb--anim { animation: gwlb-fade 0.16s ease-out; }
@keyframes gwlb-fade { from { opacity: 0; } to { opacity: 1; } }

/* touch-action:none hands every touch to the pointer handlers, so pinch and
   drag drive the transform instead of scrolling the page behind the scrim. */
.gwlb__stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.gwlb__img { position: absolute; top: 0; left: 0; transform-origin: 0 0; max-width: none;
  background: #fff; box-shadow: var(--shadow-lg); cursor: zoom-in;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.gwlb.is-zoomed .gwlb__img { cursor: grab; }

.gwlb__bar { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 2; }
/* Solid teal, not a translucent white: once the figure is zoomed its white
   background sits directly under these controls, and a light-on-light button
   would disappear exactly when it is most needed. */
.gwlb__btn { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 24px; line-height: 1; font-weight: 700; color: #fff;
  background: var(--gw-teal-800); border: 1px solid rgba(255, 255, 255, 0.32); cursor: pointer;
  padding: 0; box-shadow: var(--shadow-md); }
.gwlb__btn:hover { background: var(--gw-cyan); border-color: var(--gw-cyan); }
.gwlb__btn:focus-visible { outline: 3px solid var(--gw-mint); outline-offset: 2px; }
.gwlb__btn--close { background: var(--gw-teal-900); }

.gwlb__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 12px 20px 14px; background: rgba(16, 47, 64, 0.78); text-align: center; }
.gwlb__cap { margin: 0; font-size: 12.5px; line-height: 1.45; color: #cfdde3; }
.gwlb__hint { margin: 6px 0 0; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.09em; font-size: 10.5px; color: #8fb0bd; }
.gwlb.is-zoomed .gwlb__hint { visibility: hidden; }

@media (max-width: 700px) {
  .gwlb__bar { top: 10px; right: 10px; }
  .gwlb__foot { padding: 10px 14px 12px; }
  .gwlb__cap { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .gwlb--anim { animation: none; }
}