/* ==========================================================================
   ARC Hub for ICT — V2 design system
   Source: Figma "ARC Hub for ICT" › page "V2" (Dev Mode, Sep 2026)
   Figma frames are drawn at 2x (2760px wide) — every value below is ÷2.

   Usage: add the class names below to Divi 5 modules/rows/sections via
   Advanced › CSS ID & Classes. Nothing here changes existing pages until a
   class is applied — safe to load on the live site.
   Deploy: /wp-content/themes/arc-hub-for-ict/css/arc-v2.css (see enqueue
   snippet in functions-snippet.php).
   ========================================================================== */


/* 1. TOKENS ================================================================= */
:root {
  /* Colour */
  --arc2-navy:        #00467F;  /* headings, body text, secondary buttons */
  --arc2-teal:        #00A59E;  /* eyebrows, primary buttons, accent bars */
  --arc2-teal-light:  #DBFFFD;  /* light button on gradient */
  --arc2-tint-blue:   #F6FDFF;  /* hero band, alt pillar card */
  --arc2-tint-teal:   #F4FEFD;  /* pillar / feature card background */
  --arc2-grey-bg:     #F4F4F4;  /* feature card band */
  --arc2-grey-bg-alt: #F8F8F8;  /* "Transforming Ireland's Future" band */
  --arc2-grey-line:   #DADADA;  /* neutral card top bar */
  --arc2-grey-btn:    #6E6E6E;  /* neutral button */
  --arc2-white:       #FFFFFF;
  --arc2-gradient:    linear-gradient(90deg, var(--arc2-navy) 0%, var(--arc2-teal) 100%);

  /* Type — Inter 400/700 throughout */
  --arc2-font:        'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --arc2-fs-hero:     clamp(1.75rem, 1.2rem + 1.6vw, 2rem);      /* 32px  */
  --arc2-fs-h2:       clamp(1.6rem, 1.2rem + 1.2vw, 1.875rem);   /* 30px  */
  --arc2-fs-h3:       clamp(1.25rem, 1.1rem + 0.5vw, 1.5625rem); /* 25px  */
  --arc2-fs-lead:     clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* 20px  */
  --arc2-fs-body:     1.125rem;                                  /* 18px* */
  --arc2-fs-eyebrow:  0.9375rem;                                 /* 15px  */
  --arc2-fs-eyebrow-lg: 1.125rem;                                /* 18px  */
  --arc2-fs-small:    0.6875rem;                                 /* 11px  */
  /* *Figma pillar copy is 19.5px; 18px reads better at real line lengths. */

  /* Shape & spacing */
  --arc2-radius-pill: 15px;   /* all buttons */
  --arc2-radius-card: 2px;
  --arc2-bar-side:    10px;   /* pillar card left bar */
  --arc2-bar-top:     13px;   /* feature card top bar */
  --arc2-btn-h:       40px;
  --arc2-gutter:      clamp(16px, 4vw, 54px);
  --arc2-section-y:   clamp(48px, 6vw, 88px);
}


/* 2. BASE TYPE ==============================================================
   LIVE-SAFE: Inter is scoped to V2 sections only. Add class "arc2" to every
   new Divi section. At launch, switch to site-wide by adding body class
   "arc2-live" (see functions-snippet.php) — no other change needed.      */
.arc2,
.arc2 .et_pb_module,
.arc2 h1, .arc2 h2, .arc2 h3, .arc2 h4, .arc2 h5, .arc2 h6, .arc2 p, .arc2 a,
body.arc2-live,
body.arc2-live h1, body.arc2-live h2, body.arc2-live h3,
body.arc2-live h4, body.arc2-live h5, body.arc2-live h6 {
  font-family: var(--arc2-font);
}

.arc2-eyebrow {
  display: block;
  margin: 0 0 0.5em;
  color: var(--arc2-teal);
  font-size: var(--arc2-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.arc2-eyebrow--lg { font-size: var(--arc2-fs-eyebrow-lg); }

.arc2-h1,
.arc2-h1 h1, .arc2-h1 h2 {
  color: var(--arc2-navy);
  font-size: var(--arc2-fs-hero);
  font-weight: 700;
  line-height: 1.25;
  padding-bottom: 0;
}
.arc2-h2,
.arc2-h2 h2 {
  color: var(--arc2-navy);
  font-size: var(--arc2-fs-h2);
  font-weight: 700;
  line-height: 1.25;
  padding-bottom: 0;
}
.arc2-lead,
.arc2-lead p {
  color: var(--arc2-navy);
  font-size: var(--arc2-fs-lead);
  line-height: 1.5;
}
.arc2-center { text-align: center; }
.arc2-center.arc2-lead { max-width: 870px; margin-inline: auto; }

.arc2-funding-note,
.arc2-funding-note p {
  color: #000;
  font-size: var(--arc2-fs-small);
  line-height: 1.5;
  text-align: center;
}


/* 3. BUTTONS ================================================================
   Apply to Divi Button modules (class on the module) or to plain <a>.
   Variants: --teal (default), --navy, --grey, --light, --outline          */
.arc2-btn .et_pb_button,
a.arc2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--arc2-btn-h);
  padding: 0 28px !important;           /* beats Divi button padding */
  border: 0 !important;
  border-radius: var(--arc2-radius-pill) !important;
  background: var(--arc2-teal) !important;
  color: var(--arc2-white) !important;
  font-family: var(--arc2-font) !important;
  font-size: var(--arc2-fs-lead) !important;
  font-weight: 400;
  line-height: 1.2 !important;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.arc2-btn .et_pb_button::after,
.arc2-btn .et_pb_button::before { display: none !important; } /* Divi arrow icon */
.arc2-btn .et_pb_button:hover,
a.arc2-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.arc2-btn--navy  .et_pb_button, a.arc2-btn--navy  { background: var(--arc2-navy) !important; }
.arc2-btn--grey  .et_pb_button, a.arc2-btn--grey  { background: var(--arc2-grey-btn) !important; }
.arc2-btn--light .et_pb_button, a.arc2-btn--light {
  background: var(--arc2-teal-light) !important;
  color: var(--arc2-navy) !important;
  font-weight: 700;
}
.arc2-btn--outline .et_pb_button, a.arc2-btn--outline {
  background: transparent !important;
  border: 2.5px solid var(--arc2-white) !important;
  color: var(--arc2-white) !important;
  font-weight: 700;
}


/* 4. HEADER ================================================================= */
.arc2-header .et_pb_menu .et-menu > li > a,
.arc2-header .et_pb_menu__menu a {
  color: var(--arc2-navy) !important;
  font-family: var(--arc2-font);
  font-size: var(--arc2-fs-lead);
  font-weight: 400;
}
.arc2-header .et-menu > li.current-menu-item > a,
.arc2-header .et-menu > li > a:hover { color: var(--arc2-teal) !important; }


/* 5. HOME HERO ==============================================================
   Section class: arc2-hero. Left column = text, right column = collage image.
   Decorative hexagon outlines are background SVGs (assets/hex-deco-*).     */
.arc2-hero {
  position: relative;
  background-color: var(--arc2-tint-blue);
  overflow: hidden;
}
.arc2-hero .arc2-lead { max-width: 420px; }
.arc2-hero-collage img { width: 100%; height: auto; display: block; }


/* 6. FEATURE CARDS (View projects / Job openings / Call for applications) ===
   Row class: arc2-feature-row (on the grey band).
   Column class: arc2-feature + one of --teal | --grey | --navy           */
.arc2-feature-row { background: var(--arc2-grey-bg); }
.arc2-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 28px 28px !important;
  border-top: var(--arc2-bar-top) solid var(--arc2-teal);
  background: var(--arc2-tint-teal);
  text-align: center;
}
.arc2-feature--grey { border-top-color: var(--arc2-grey-line); background: var(--arc2-white); }
.arc2-feature--navy { border-top-color: var(--arc2-navy);      background: var(--arc2-tint-blue); }
.arc2-feature img.arc2-icon { width: 48px; height: 48px; margin-bottom: 12px; }
.arc2-feature h3 {
  color: var(--arc2-navy);
  font-size: var(--arc2-fs-h3);
  font-weight: 700;
  padding-bottom: 8px;
}
.arc2-feature p {
  color: var(--arc2-navy);
  font-size: var(--arc2-fs-lead);
  line-height: 1.4;
}
.arc2-feature .et_pb_button_module_wrapper { margin-top: auto; padding-top: 16px; }


/* 7. STATS ROW (€32.21M Funding · 150 Expected projects · 14 Partner orgs) =
   Built live — the Figma version is a flattened image.
   Markup: <div class="arc2-stats"><div class="arc2-stat"><strong>€32.21M</strong><span>Funding</span></div>…</div> */
.arc2-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 56px;
}
.arc2-stat { display: flex; align-items: baseline; gap: 10px; color: var(--arc2-navy); }
.arc2-stat strong { font-size: var(--arc2-fs-h2); font-weight: 700; }
.arc2-stat span { font-size: var(--arc2-fs-body); }


/* 8. PILLAR CARDS (Research Areas) ==========================================
   Column/module class: arc2-pillar + --teal | --navy (left bar colour).
   Add --alt for the blue tint variant. Icon: <img class="arc2-icon">     */
.arc2-pillar {
  position: relative;
  padding: 36px 36px 32px 48px !important;
  border-radius: var(--arc2-radius-card);
  background: var(--arc2-tint-teal);
}
.arc2-pillar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--arc2-bar-side);
  border-radius: var(--arc2-radius-card) 0 0 var(--arc2-radius-card);
  background: var(--arc2-teal);
}
.arc2-pillar--navy::before { background: var(--arc2-navy); }
.arc2-pillar--alt { background: var(--arc2-tint-blue); }
.arc2-pillar-head { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.arc2-pillar-head img.arc2-icon { flex: 0 0 42px; width: 42px; height: 42px; }
.arc2-pillar h3 {
  color: var(--arc2-navy);
  font-size: var(--arc2-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  padding: 0;
}
.arc2-pillar p {
  color: var(--arc2-navy);
  font-size: var(--arc2-fs-body);
  line-height: 1.5;
  margin-bottom: 20px;
}


/* 9. SPLIT FEATURE ("Transforming Ireland's Future") ======================= */
.arc2-split { background: var(--arc2-grey-bg-alt); }
.arc2-split img { width: 100%; height: auto; border-radius: var(--arc2-radius-card); }


/* 10. NEWS & EVENTS (existing Elfsight LinkedIn widget, restyled) ==========
   Wrap the existing code module in a section with class arc2-news.       */
.arc2-news { background: var(--arc2-white); }
.arc2-news .eapps-widget,
.arc2-news [class*="elfsight-app"] { max-width: 1280px; margin-inline: auto; }


/* 11. COLLABORATION CTA BAND (global, every page) ========================== */
.arc2-cta {
  background: var(--arc2-gradient) !important;
  color: var(--arc2-white);
  text-align: center;
}
.arc2-cta h2 {
  color: var(--arc2-white) !important;
  font-size: var(--arc2-fs-hero);
  font-weight: 700;
  padding-bottom: 12px;
}
.arc2-cta p {
  max-width: 1070px;
  margin-inline: auto;
  color: var(--arc2-white);
  font-size: var(--arc2-fs-lead);
  line-height: 1.5;
}
.arc2-btn-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; margin-top: 28px; }
.arc2-btn-pair .et_pb_button_module_wrapper { margin: 0 !important; }


/* 12. HEXAGON AVATAR (researchers, board, profile) =========================
   <span class="arc2-hex"><img …></span>  or  <span class="arc2-hex arc2-hex--initials">CA</span> */
.arc2-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  aspect-ratio: 1 / 1.1547;               /* true regular hexagon */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--arc2-grey-line);
  overflow: hidden;
  flex: 0 0 auto;
}
.arc2-hex img { width: 100%; height: 100%; object-fit: cover; }
.arc2-hex--initials { color: var(--arc2-white); font-size: 0.8rem; font-weight: 700; }
.arc2-hex--lg { width: 110px; }


/* 13. TAG / PILLAR CHIP (dot + label, colour per pillar) ==================== */
.arc2-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--arc2-tag, var(--arc2-teal));
}
.arc2-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}


/* 14. RESPONSIVE ============================================================ */
@media (max-width: 980px) {
  .arc2-hero .arc2-lead { max-width: none; }
  .arc2-pillar { padding: 28px 24px 24px 36px !important; }
  .arc2-feature { margin-bottom: 20px !important; }
}
@media (max-width: 600px) {
  .arc2-btn .et_pb_button, a.arc2-btn { width: 100%; }
  .arc2-stats { gap: 12px 28px; }
}


/* 15. PAGE LAYOUT HELPERS (Divi 5 sections/rows built for V2) ============== */
.arc2.et_pb_section { padding: var(--arc2-section-y) 0; }
.arc2 .et_pb_row {
  width: calc(100% - 2 * var(--arc2-gutter));
  max-width: 1280px;
  padding: 0;
}
.arc2 .et_pb_row + .et_pb_row { margin-top: 32px; }
.arc2 .et_pb_text_inner > *:last-child { margin-bottom: 0; }
.arc2 p { padding-bottom: 0; }

/* equal-height cards in a row: add class arc2-eqh to the row */
.arc2-eqh { align-items: stretch; }
.arc2-eqh > .et_pb_column { display: flex; flex-direction: column; }
.arc2-eqh .et_pb_text,
.arc2-eqh .et_pb_text_inner { flex: 1 1 auto; height: 100%; }
.arc2-eqh .arc2-feature,
.arc2-eqh .arc2-pillar { height: 100%; display: flex; flex-direction: column; }
.arc2-feature .arc2-btn,
.arc2-pillar .arc2-btn { margin-top: auto; align-self: center; }
.arc2-pillar .arc2-btn { align-self: flex-start; }

/* hero */
.arc2-hero.et_pb_section { padding-top: 48px; padding-bottom: 32px; }
.arc2-hero .et_pb_row.arc2-slide { align-items: center; }
.arc2-hero .arc2-h1 { margin-bottom: 20px; }
.arc2-hero .arc2-lead { margin-bottom: 28px; }
.arc2-funders { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; margin-bottom: 12px; }
.arc2-funders img { height: 46px; width: auto; }

/* section intro block (eyebrow + h2 + lead, centred) */
.arc2-intro { text-align: center; margin-bottom: 8px; }
.arc2-intro .arc2-lead { max-width: 870px; margin: 12px auto 24px; }

/* split feature */
.arc2-split .et_pb_row { align-items: center; }
.arc2-split .arc2-h1 { margin: 4px 0 16px; }
.arc2-split .arc2-lead { margin-bottom: 28px; }

/* feature band spacing */
.arc2-feature-row.et_pb_section { padding: 24px 0; }
@media (max-width: 980px) {
  .arc2 .et_pb_row { flex-wrap: wrap; }
  .arc2 .et_pb_row > .et_pb_column { width: 100% !important; margin-right: 0 !important; margin-bottom: 20px; }
}


/* 16. PREVIEW FIXES (25 Sep 2026) ========================================== */
/* button wrapper (keeps Divi's auto-paragraphs off the button) */
.arc2-actions { display: flex; }
.arc2-feature .arc2-actions { margin-top: auto; padding-top: 20px; justify-content: center; }
.arc2-pillar  .arc2-actions { margin-top: auto; padding-top: 4px; }
.arc2-intro .arc2-actions,
.arc2-cta .arc2-actions { justify-content: center; }
.arc2-feature .arc2-btn, .arc2-pillar .arc2-btn { margin-top: 0; }

/* feature card rhythm */
.arc2-feature h3 { margin-top: 4px; }
.arc2-feature p { margin-bottom: 0; max-width: 340px; }

/* centred bands — Divi text modules default to left alignment */
.arc2-cta .et_pb_text_inner,
.arc2-cta h2,
.arc2-cta p,
.arc2-intro,
.arc2-intro h2,
.arc2-intro p { text-align: center !important; }


/* 17. GLOBAL HEADER + FOOTER (V2 look) =====================================
   Scoped to body.arc2-preview (private V2 drafts) and body.arc2-live (launch).
   The live site is untouched until ARC2_LIVE is switched on.              */
:is(body.arc2-preview, body.arc2-live) #main-header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
:is(body.arc2-preview, body.arc2-live) #main-header,
:is(body.arc2-preview, body.arc2-live) .et-l--footer {
  font-family: var(--arc2-font);
}
:is(body.arc2-preview, body.arc2-live) #top-menu > li > a {
  color: var(--arc2-navy) !important;
  font-family: var(--arc2-font) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}
:is(body.arc2-preview, body.arc2-live) #top-menu > li.current-menu-item:not(.apply-now) > a,
:is(body.arc2-preview, body.arc2-live) #top-menu > li:not(.apply-now) > a:hover {
  color: var(--arc2-teal) !important;
  opacity: 1;
}
:is(body.arc2-preview, body.arc2-live) #top-menu > li.apply-now > a {
  display: inline-flex !important;
  align-items: center;
  min-height: var(--arc2-btn-h);
  padding: 0 28px !important;
  border-radius: var(--arc2-radius-pill) !important;
  background: var(--arc2-teal) !important;
  color: var(--arc2-white) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
:is(body.arc2-preview, body.arc2-live) #top-menu > li.apply-now > a::before,
:is(body.arc2-preview, body.arc2-live) #top-menu > li.apply-now > a::after { display: none !important; }
:is(body.arc2-preview, body.arc2-live) #top-menu > li.apply-now > a:hover { filter: brightness(1.08); }

/* Old footer CTA card — replaced by the V2 gradient band on each page.
   At launch this is removed from footer layout 97 properly.            */
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_0_tb_footer { display: none !important; }


/* 18. PROJECTS PAGE =========================================================
   Section classes: arc2 arc2-page-intro | arc2 arc2-projects
   Facets wrapper (code module): <div class="arc2-facets">…</div>          */
.arc2-page-intro { background: #F3FCFF; }
.arc2-page-intro .arc2-h1 { margin-bottom: 16px; }
.arc2-page-intro .arc2-lead { max-width: 1220px; margin-bottom: 32px; }
.arc2-page-intro h3.arc2-h3 {
  color: var(--arc2-navy);
  font-size: var(--arc2-fs-h3);
  font-weight: 700;
  padding-bottom: 16px;
}

.arc2-facets {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 16px 28px;
  align-items: start;
}
.arc2-facets .wpgb-facet { margin: 0 !important; }
.arc2-facets .wpgb-facet-title:not(.wpgb-sr-only),
.arc2-facets h4.wpgb-facet-title { display: none !important; }
.arc2-facets fieldset { margin: 0; padding: 0; border: 0; }

/* search */
.arc2-facets .wpgb-search-facet label { position: relative; display: block; margin: 0; }
.arc2-facets .wpgb-search-facet input.wpgb-input {
  height: 66px;
  width: 100%;
  padding: 0 96px 0 32px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: #DCEAEE !important;
  color: var(--arc2-navy) !important;
  font: italic 400 20px/1 var(--arc2-font) !important;
  box-shadow: none !important;
}
.arc2-facets .wpgb-search-facet input.wpgb-input::placeholder { color: var(--arc2-navy); opacity: 1; }
.arc2-facets .wpgb-search-facet svg {
  position: absolute;
  inset: 0 0 0 auto !important;
  width: 76px !important;
  height: 66px !important;
  padding: 19px;
  box-sizing: border-box;
  border-radius: 0 5px 5px 0;
  background: var(--arc2-navy);
  fill: none;
  stroke: #fff;
  color: #fff;
  transform: none !important;
}
.arc2-facets .wpgb-search-facet .wpgb-clear-button { right: 86px !important; }

/* selects (WPGB combobox) */
.arc2-facets .wpgb-select-facet .wpgb-select {
  min-height: 66px;
  padding: 0 0 0 32px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: #DCEAEE !important;
  box-shadow: none !important;
  overflow: hidden;
}
.arc2-facets .wpgb-select-placeholder,
.arc2-facets .wpgb-select-placeholder input {
  color: var(--arc2-navy) !important;
  font: italic 400 20px/1.2 var(--arc2-font) !important;
}
.arc2-facets .wpgb-select-controls {
  align-self: stretch;
  width: 76px;
  justify-content: center;
  background: var(--arc2-navy);
}
.arc2-facets .wpgb-select-separator { display: none !important; }
.arc2-facets .wpgb-select-controls svg,
.arc2-facets .wpgb-select-toggle svg { width: 28px; height: 28px; color: #fff !important; fill: #fff !important; stroke: #fff; }

/* project cards (WP Grid Builder card 26) — scoped, live grid unaffected */
.arc2-projects .wpgb-viewport {
  background: linear-gradient(#F4F4F4, #F4F4F4) center top / 4px 100% no-repeat;
}
.arc2-projects .wpgb-card { border-bottom: 3px solid #F4F4F4; }
.arc2-projects .wpgb-card-inner,
.arc2-projects .wpgb-card-content,
.arc2-projects .wpgb-card-body,
.arc2-projects .wpgb-card-footer {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.arc2-projects .wpgb-card-media { border-top: 18px solid var(--arc2-teal); border-radius: 0 !important; }
.arc2-projects .wpgb-card-media svg[data-ratio] { padding-top: 46% !important; }
.arc2-projects .wpgb-card-content { padding: 24px 0 28px !important; }
.arc2-projects h3.wpgb-block-3,
.arc2-projects h3.wpgb-block-3 a {
  margin: 0 0 8px !important;
  color: var(--arc2-navy) !important;
  font: 800 25px/1.25 var(--arc2-font) !important;
}
.arc2-projects .wpgb-block-6,
.arc2-projects .wpgb-block-6 p {
  color: #282828 !important;
  font: 400 19px/25px var(--arc2-font) !important;
  margin-bottom: 14px !important;
}
.arc2-projects .wpgb-block-10 {
  color: #595959 !important;
  font: 700 20px/30px var(--arc2-font) !important;
}
.arc2-projects .wpgb-block-8 { display: flex; gap: 6px; align-items: baseline; }
.arc2-projects .wpgb-block-16 p {
  color: #000 !important;
  font: 400 20px/30px var(--arc2-font) !important;
  margin: 0 !important;
}
.arc2-projects a.lead-researcher-link {
  color: var(--arc2-teal) !important;
  font: 700 20px/30px var(--arc2-font) !important;
  position: relative;
  z-index: 2;
}
.arc2-projects .wpgb-card-footer { padding: 12px 0 0 !important; }
.arc2-projects .wpgb-block-term {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--arc2-tag, var(--arc2-teal)) !important;
  font: 400 17px/1.3 var(--arc2-font) !important;
}
.arc2-projects .wpgb-block-term::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
}
/* pillar colours: all five from the Figma "Theme colours" frame (107:100, 30 Sep 2026) */
.wpgb-block-term[data-id="35"], .arc2-tag--sustainability  { --arc2-tag: #289144; }
.wpgb-block-term[data-id="39"], .arc2-tag--education       { --arc2-tag: #558BB6; }
.wpgb-block-term[data-id="38"], .arc2-tag--healthcare      { --arc2-tag: #981C3D; }
.wpgb-block-term[data-id="37"], .arc2-tag--infrastructure  { --arc2-tag: #8955B6; }
.wpgb-block-term[data-id="36"], .arc2-tag--data-security   { --arc2-tag: #AB6F4A; }

@media (max-width: 980px) {
  .arc2-facets { grid-template-columns: 1fr; }
  .arc2-projects .wpgb-viewport { background: none; }
}


/* 19. PROJECTS FIXES (25 Sep 2026) ========================================= */
.arc2-facets .wpgb-search-facet input.wpgb-input { height: 66px !important; min-height: 66px !important; box-sizing: border-box !important; }
.arc2-projects .wpgb-card .wpgb-card-media { border-top: 18px solid var(--arc2-teal) !important; }
.arc2-projects .wpgb-block-term::before { display: inline-block !important; flex: 0 0 9px; }
:is(body.arc2-preview, body.arc2-live) #top-menu > li.apply-now {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-left: 12px;
}
:is(body.arc2-preview, body.arc2-live) #top-menu > li.apply-now::before,
:is(body.arc2-preview, body.arc2-live) #top-menu > li.apply-now::after { display: none !important; }


/* 20. PAGE-INTRO SPACING (Figma: ~48px above title, below filters, above grid) */
.arc2-page-intro.et_pb_section { padding-top: 48px !important; padding-bottom: 48px !important; }
.arc2-projects.et_pb_section   { padding-top: 48px !important; }
.arc2-page-intro .et_pb_module:last-child,
.arc2-page-intro .et_pb_row:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }


/* 21. RESEARCHERS PAGE (Figma 65:1485) =====================================
   Grid "People V2 (draft)" (WPGB grid 13, card 27, block arc2_researcher_card) */
.arc2-people .wpgb-viewport {
  background:
    linear-gradient(#F5F5F5, #F5F5F5) 33.4% 0 / 4px 100% no-repeat,
    linear-gradient(#F5F5F5, #F5F5F5) 66.6% 0 / 4px 100% no-repeat;
}
.arc2-people .wpgb-card { border-bottom: 3px solid #F5F5F5; }
.arc2-people .wpgb-card-inner,
.arc2-people .wpgb-card-content,
.arc2-people .wpgb-card-body { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }

.arc2-rcard { padding: 28px 28px 30px 6px; font-family: var(--arc2-font); }
.arc2-rcard__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.arc2-rcard .arc2-hex { width: 68px; background: #C9CFD3; }
.arc2-rcard .arc2-hex--photo { background: var(--arc2-teal); padding: 1px; }
.arc2-rcard .arc2-hex--photo img { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.arc2-rcard .arc2-hex--initials { color: #fff; font: 300 25px/1 var(--arc2-font); letter-spacing: .02em; }
.arc2-rcard__name { margin: 0; padding: 0 !important; font: 800 25px/1.2 var(--arc2-font) !important; }
.arc2-rcard__name a { color: var(--arc2-navy) !important; text-decoration: none; }
.arc2-rcard__name a:hover { color: var(--arc2-teal) !important; }
.arc2-rcard__role { margin-top: 4px; color: #282828; font: 400 19px/25px var(--arc2-font); }
.arc2-rcard__uni { color: #797979; font: 600 20px/30px var(--arc2-font); }
.arc2-rcard__projects { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; }
.arc2-rcard .arc2-tag { font: 700 20px/1.3 var(--arc2-font); text-decoration: none; }
.arc2-rcard .arc2-tag::before { width: 9px; height: 9px; }

/* theme colours (slug-based, used by researcher tags) */
.arc2-theme--sustainability-environmental-management { --arc2-tag: #289144; }
.arc2-theme--digital-education-online-communication  { --arc2-tag: #558BB6; }
.arc2-theme--healthcare-medical-applications         { --arc2-tag: #981C3D; }
.arc2-theme--digital-infrastructure                  { --arc2-tag: #8955B6; }
.arc2-theme--data-security-privacy-governance        { --arc2-tag: #AB6F4A; }
/* align project-card term colours with the Figma researcher colours */
.wpgb-block-term[data-id="38"] { --arc2-tag: #981C3D; }
.wpgb-block-term[data-id="37"] { --arc2-tag: #8955B6; }

/* "Showing 9 of 105" (WPGB result count facet 6) */
.arc2-result-count { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.arc2-result-count::before {
  content: ""; width: 16px; aspect-ratio: 1 / 1.1547; background: var(--arc2-teal);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.arc2-result-count .wpgb-facet,
.arc2-result-count .wpgb-result-count { margin: 0 !important; color: #C0C0C0 !important; font: 400 19px/25px var(--arc2-font) !important; }

/* open dropdown list (WPGB appends it to <body>) */
:is(body.arc2-preview, body.arc2-live) .wpgb-select-dropdown {
  border: 0 !important; border-radius: 0 0 5px 5px !important;
  background: #EAFAFF !important; box-shadow: 0 8px 20px rgba(0, 70, 127, .12) !important;
  font-family: var(--arc2-font) !important;
}
:is(body.arc2-preview, body.arc2-live) .wpgb-select-dropdown li { color: var(--arc2-navy) !important; font-size: 18px !important; }

@media (max-width: 1024px) {
  .arc2-people .wpgb-viewport { background: linear-gradient(#F5F5F5, #F5F5F5) 50% 0 / 4px 100% no-repeat; }
}
@media (max-width: 640px) {
  .arc2-people .wpgb-viewport { background: none; }
}


/* 22. RESEARCHER CARD — beat WPGB card defaults ============================ */
.arc2-people .wpgb-card { border-bottom: 3px solid #F5F5F5 !important; }
.arc2-people .arc2-rcard .arc2-hex--initials { color: #fff !important; font: 300 25px/1 var(--arc2-font) !important; }
.arc2-people .arc2-rcard__role { color: #282828 !important; font: 400 19px/25px var(--arc2-font) !important; }
.arc2-people .arc2-rcard__uni  { color: #797979 !important; font: 600 20px/30px var(--arc2-font) !important; }
.arc2-people .arc2-rcard .arc2-tag {
  color: var(--arc2-tag, var(--arc2-teal)) !important;
  font: 700 20px/1.3 var(--arc2-font) !important;
}
.arc2-people .arc2-rcard .arc2-tag:hover { text-decoration: underline !important; }
.arc2-people .arc2-rcard { padding: 40px 24px 44px 0 !important; }


/* 23. HOME HERO — wider, closer to Figma 65:15 ============================
   Figma: text column ~42% on the left, collage ~58% bleeding off the right
   edge; heading wraps "Our next call for applications / begins on November 1st". */
.arc2-hero.et_pb_section { padding: clamp(32px, 4vw, 64px) 0 16px !important; }
.arc2-hero .et_pb_row.arc2-slide {
  width: 100% !important;
  max-width: none !important;
  padding-left: clamp(20px, 5vw, 96px) !important;
  padding-right: 0 !important;
  align-items: center;
}
.arc2-hero .et_pb_row.arc2-slide > .et_pb_column:first-child { flex: 0 0 42% !important; max-width: 42% !important; width: 42% !important; }
.arc2-hero .et_pb_row.arc2-slide > .et_pb_column:last-child  { flex: 0 0 58% !important; max-width: 58% !important; width: 58% !important; margin-right: 0 !important; }
.arc2-hero .arc2-eyebrow--lg { font-size: clamp(1rem, 0.8rem + 0.45vw, 1.35rem) !important; margin-bottom: 0.6em; }
.arc2-hero .arc2-h1 {
  max-width: 15em;
  font-size: clamp(2rem, 1.1rem + 2vw, 3.25rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em;
  margin-bottom: 0.55em !important;
}
.arc2-hero .arc2-lead {
  max-width: 24em !important;
  font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.5rem) !important;
  line-height: 1.45 !important;
}
.arc2-hero .arc2-btn { min-height: 52px; padding: 0 34px !important; font-size: clamp(1.125rem, 1rem + 0.3vw, 1.35rem) !important; }
.arc2-hero-collage { overflow: visible !important; }
.arc2-hero-collage img { width: 118% !important; max-width: none !important; margin-right: -18%; }
.arc2-hero .et_pb_row.arc2-hero-funders { margin-top: 8px !important; }
.arc2-funders img { height: clamp(40px, 3.2vw, 56px); }

@media (max-width: 980px) {
  .arc2-hero .et_pb_row.arc2-slide { padding-right: clamp(20px, 5vw, 96px) !important; }
  .arc2-hero .et_pb_row.arc2-slide > .et_pb_column { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
  .arc2-hero-collage img { width: 100% !important; margin-right: 0; }
}


/* 24. RESEARCHERS GRID — real rows instead of masonry =====================
   Overrides WPGB's absolute masonry positions with a CSS grid so every row
   aligns, dividers run continuously and each cell has consistent padding. */
.arc2-people .wpgb-viewport { height: auto !important; background: none !important; }
.arc2-people .wpgb-masonry {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: auto !important;
}
.arc2-people .wpgb-masonry > .wpgb-card {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 32px 32px 36px !important;
  border-bottom: 3px solid #F5F5F5 !important;
  border-right: 4px solid #F5F5F5 !important;
  opacity: 1 !important;
}
.arc2-people .wpgb-masonry > .wpgb-card:nth-child(3n)   { border-right: 0 !important; padding-right: 0 !important; }
.arc2-people .wpgb-masonry > .wpgb-card:nth-child(3n+1) { padding-left: 0 !important; }
.arc2-people .arc2-rcard { padding: 0 !important; }
.arc2-people .arc2-rcard__head { align-items: flex-start; }
.arc2-people .arc2-rcard__id { padding-top: 6px; min-width: 0; }
.arc2-people .arc2-rcard__uni { margin-top: 2px; }

@media (max-width: 1024px) {
  .arc2-people .wpgb-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc2-people .wpgb-masonry > .wpgb-card:nth-child(n) { border-right: 4px solid #F5F5F5 !important; padding: 28px 24px 32px !important; }
  .arc2-people .wpgb-masonry > .wpgb-card:nth-child(2n)   { border-right: 0 !important; padding-right: 0 !important; }
  .arc2-people .wpgb-masonry > .wpgb-card:nth-child(2n+1) { padding-left: 0 !important; }
}
@media (max-width: 640px) {
  .arc2-people .wpgb-masonry { grid-template-columns: 1fr; }
  .arc2-people .wpgb-masonry > .wpgb-card:nth-child(n) { border-right: 0 !important; padding: 24px 0 28px !important; }
}
/* 23b. hero row fixes: no wrap on desktop, no Divi column gutter, 2-line heading */
@media (min-width: 981px) {
  .arc2-hero .et_pb_row.arc2-slide { box-sizing: border-box !important; flex-wrap: nowrap !important; gap: 0 !important; }
  .arc2-hero .et_pb_row.arc2-slide > .et_pb_column { margin-right: 0 !important; box-sizing: border-box !important; }
  .arc2-hero .et_pb_row.arc2-slide > .et_pb_column:first-child { padding-right: 32px !important; }
}
.arc2-hero .arc2-h1 { max-width: none !important; font-size: clamp(2rem, 0.9rem + 1.75vw, 2.75rem) !important; }
/* 24b. long project names: keep the dot on the first line */
.arc2-people .arc2-rcard .arc2-tag { align-items: flex-start !important; }
.arc2-people .arc2-rcard .arc2-tag::before { margin-top: 0.45em; }
/* 23c. hero lead: avoid a one-word last line */
.arc2-hero .arc2-lead { max-width: 27em !important; text-wrap: pretty; }


/* 25. ABOUT PAGE (Figma 65:2273 + 65:1847) ================================ */
/* tab bar */
.arc2-tabsbar.et_pb_section { background: #E6F3F7; padding: 0 !important; }
.arc2-tabs {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;
  max-width: 1280px; margin: 0 auto; padding: 0;
}
.arc2-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 30px 0 26px; border-bottom: 4px solid transparent;
  color: var(--arc2-navy); font: 400 20px/1.2 var(--arc2-font);
  transition: color .15s ease, border-color .15s ease;
}
.arc2-tab:hover { color: var(--arc2-teal); }
.arc2-tab.is-active { color: var(--arc2-teal); border-bottom-color: var(--arc2-teal); font-weight: 700; }
.arc2-tabs-js .arc2-panel:not(.is-active) { display: none !important; }

/* mission hero (navy) */
.arc2-mission-hero.et_pb_section {
  background:
    url(../img/v2/hex-deco-navy-left.svg) -60px -10px / 220px auto no-repeat,
    url(../img/v2/hex-deco-navy-mid.svg) 44% 110% / 230px auto no-repeat,
    var(--arc2-navy) !important;
  padding: 36px 0 !important;
  overflow: hidden;
}
.arc2-mission-hero .et_pb_row { align-items: center; }
.arc2-pill-title {
  display: inline-block; margin-bottom: 22px; padding: 12px 22px;
  border-radius: var(--arc2-radius-pill); background: var(--arc2-teal);
  color: #fff; font: 700 30px/1.2 var(--arc2-font);
}
.arc2-mission-quote { max-width: 30em; color: #fff; font: 500 22px/33px var(--arc2-font); }
.arc2-mission-hero img { width: 100%; height: auto; display: block; }

/* values (Excellence / Collaboration / Impact) */
.arc2-values.et_pb_section { background: #EDF2F4 !important; padding: 32px 0 !important; }
.arc2-values .arc2-feature { position: relative; border-top: 0 !important; padding-top: 48px !important; }
.arc2-values .arc2-feature::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 14px;
  border-radius: 15px; background: var(--arc2-teal);
}
.arc2-values .arc2-feature--grey { background: #FBFBFB; }
.arc2-values .arc2-feature--grey::before { background: #D9D9D9; }
.arc2-values .arc2-feature--navy::before { background: var(--arc2-navy); }
.arc2-values .arc2-feature img.arc2-icon { width: 52px; height: 52px; }

/* big quote + stats panel */
.arc2-quote-stats .et_pb_row { align-items: center; }
.arc2-big-quote { max-width: 19em; color: var(--arc2-navy); font: 700 clamp(1.5rem, 1rem + 1.2vw, 1.875rem)/1.35 var(--arc2-font); }
.arc2-stats-panel {
  display: grid; gap: 22px; padding: 40px 48px;
  border-radius: 22px; background: #DBEBF8;
}
.arc2-stats-panel .arc2-stat { gap: 18px; }
.arc2-stats-panel .arc2-stat strong { min-width: 4.6em; color: var(--arc2-navy); font: 900 40px/1 var(--arc2-font); }
.arc2-stats-panel .arc2-stat span { color: #595959; font: 400 25px/1.2 var(--arc2-font); }

/* research network */
.arc2-network.et_pb_section { background: #FBFBFB !important; }
.arc2-network .et_pb_row { align-items: center; }
.arc2-network-media { padding: 22px; background: #F5F9FB; }
.arc2-network-media img { width: 100%; height: auto; display: block; }
.arc2-network .arc2-h2 { margin: 4px 0 16px; }
.arc2-network p { color: var(--arc2-navy); font-size: 20px; line-height: 1.45; margin-bottom: 1em; }

/* board / team panels (reuse researcher grid rules via .arc2-people) */
.arc2-board .arc2-board-intro { margin-bottom: 24px; }
.arc2-board .arc2-board-intro .arc2-h1 { margin-bottom: 14px; }
.arc2-board .arc2-board-intro .arc2-lead { max-width: 1220px; }
.arc2-pcard__group { margin-top: 4px; color: var(--arc2-teal) !important; font: 400 19px/25px var(--arc2-font) !important; }
.arc2-pcard__org { margin-top: 2px; color: #666 !important; font: 400 19px/25px var(--arc2-font) !important; }

@media (max-width: 980px) {
  .arc2-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 20px; }
  .arc2-tab { white-space: nowrap; padding: 20px 0 16px; font-size: 17px; }
  .arc2-stats-panel { padding: 28px; }
  .arc2-stats-panel .arc2-stat strong { font-size: 32px; }
  .arc2-stats-panel .arc2-stat span { font-size: 20px; }
}


/* 26. RESEARCHER PROFILE (Figma 65:2203; template single-arc_researchers-v2.php) */
.arc2-wrap { width: calc(100% - 2 * var(--arc2-gutter)); max-width: 1280px; margin: 0 auto; }
.arc2-profile-top { background: #F6FDFF; padding: 64px 0 56px; }
.arc2-profile-head { display: flex; align-items: center; gap: 40px; margin-bottom: 40px; }
.arc2-hex--xl { width: 176px; }
.arc2-hex--xl.arc2-hex--photo { padding: 2px; background: var(--arc2-teal); }
.arc2-hex--xl.arc2-hex--photo img { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.arc2-hex--xl.arc2-hex--initials { background: #C9CFD3; color: #fff; font: 300 56px/1 var(--arc2-font); }
.arc2-profile-name { margin: 0 0 8px; padding: 0; color: var(--arc2-navy); font: 800 clamp(2rem, 1.2rem + 1.6vw, 2.5rem)/1.15 var(--arc2-font); }
.arc2-profile-group { margin: 0 0 6px; padding: 0; color: var(--arc2-teal); font: 400 clamp(1.4rem, 1rem + 0.8vw, 2rem)/1.25 var(--arc2-font); }
.arc2-profile-org { margin: 0; padding: 0; color: #666; font: 700 clamp(1.1rem, 0.95rem + 0.5vw, 1.5625rem)/1.3 var(--arc2-font); }
.arc2-profile-bio { max-width: 1080px; }
.arc2-profile-bio p { padding: 0; margin: 0 0 1.1em; color: #6E6E6E; font: 400 clamp(1.1rem, 0.95rem + 0.45vw, 1.5625rem)/1.6 var(--arc2-font); }
.arc2-profile-bio a { color: var(--arc2-teal); }
.arc2-profile-updated { font-size: 1.05rem !important; }
.arc2-profile-label { margin: 8px 0 8px; padding: 0; color: #797979; font: 700 clamp(1.1rem, 0.95rem + 0.45vw, 1.5625rem)/1.4 var(--arc2-font); }
.arc2-profile-themes ul { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.arc2-profile-themes .arc2-tag { font: 500 clamp(1.1rem, 0.95rem + 0.45vw, 1.5625rem)/1.3 var(--arc2-font); text-decoration: none; }
.arc2-profile-themes .arc2-tag::before { width: 14px; height: 14px; }

.arc2-profile-programmes { padding: 56px 0 72px; }
.arc2-profile-h2 { margin: 0 0 32px; padding: 0; color: var(--arc2-navy); font: 800 clamp(1.8rem, 1.2rem + 1.2vw, 2.5rem)/1.2 var(--arc2-font); }
.arc2-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.arc2-pcard-proj { display: flex; flex-direction: column; border: 1px solid #D9D9D9; background: #fff; }
.arc2-pcard-proj__media { display: block; border-top: 12px solid var(--arc2-teal); aspect-ratio: 16 / 7.3; overflow: hidden; }
.arc2-pcard-proj__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arc2-pcard-proj__body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 24px; }
.arc2-pcard-proj h3 { margin: 0 0 8px; padding: 0; font: 800 25px/1.2 var(--arc2-font); }
.arc2-pcard-proj h3 a { color: var(--arc2-navy); text-decoration: none; }
.arc2-pcard-proj__excerpt { margin: 0 0 14px; padding: 0; color: #282828; font: 400 19px/25px var(--arc2-font); }
.arc2-pcard-proj__uni { margin: auto 0 0; padding: 0; color: #595959; font: 700 20px/30px var(--arc2-font); }
.arc2-pcard-proj__lead { margin: 0 0 10px; padding: 0; color: #000; font: 400 20px/30px var(--arc2-font); }
.arc2-pcard-proj__lead a { color: var(--arc2-teal); font-weight: 700; text-decoration: none; }
.arc2-pcard-proj .arc2-tag { font: 400 17px/1.3 var(--arc2-font); }

.arc2-cta--plain { padding: var(--arc2-section-y) 0; }

@media (max-width: 980px) {
  .arc2-profile-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .arc2-hex--xl { width: 128px; }
  .arc2-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .arc2-pgrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   27. Home hero – hexagon collage sizing (Figma 65:17)
   Source image cropped to its visible hex cluster (728x504), so no transparent
   padding inflates the hero. Figma @1380: cluster ≈ 706x480, right gutter ≈ 43px,
   hexes span the full hero band height.
   ========================================================================== */
.arc2-hero.et_pb_section { padding: clamp(16px, 2vw, 32px) 0 16px !important; }
.arc2-hero .et_pb_row.arc2-slide { padding-right: clamp(20px, 3vw, 48px) !important; align-items: center !important; }
.arc2-hero .et_pb_row.arc2-slide > .et_pb_column:last-child { display: flex !important; justify-content: flex-end; }
.arc2-hero-collage { width: 100% !important; max-width: 820px !important; margin: 0 0 0 auto !important; }
.arc2-hero-collage .et_pb_image_wrap { width: 100%; display: block; }
.arc2-hero-collage img { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
@media (max-width: 980px) {
  .arc2-hero-collage { max-width: 560px !important; margin: 24px auto 0 !important; }
}

/* ==========================================================================
   28. Global footer on V2 pages (Theme Builder layout 97) – Figma 65:15 footer
   Figma footer = page CTA band + one logos row (ARC logo left, funders 2x2).
   Old section 0 (CTA card) already hidden in section 12. Here:
   s1 row5 logos restyled · s1 row7 description hidden, funding statement kept
   as a small centred note (hidden on pages that already show .arc2-funding-note)
   · s2 contact/thematic/links hidden · s3 copyright bar slimmed · s4 mission box hidden.
   Scoped to V2 preview/live only; the live footer is untouched.
   ========================================================================== */
:is(body.arc2-preview, body.arc2-live) .et-l--footer,
:is(body.arc2-preview, body.arc2-live) .et-l--footer :is(p, a, span, li, h1, h2, h3, h4) { font-family: var(--arc2-font) !important; }

:is(body.arc2-preview, body.arc2-live) .et-l--footer :is(.et_pb_section_2_tb_footer, .et_pb_section_4_tb_footer) { display: none !important; }

/* logos row */
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_1_tb_footer.et_pb_section {
  border-top: 0 !important; padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 40px) !important; background: #fff !important;
}
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_row_5_tb_footer {
  width: min(1100px, calc(100% - 40px)) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important;
  align-items: center !important; gap: clamp(24px, 4vw, 64px) !important;
}
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_column_11_tb_footer { flex: 0 0 28% !important; max-width: 28% !important; margin: 0 !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_column_12_tb_footer { flex: 1 1 auto !important; max-width: none !important; margin: 0 !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_row_6_tb_footer { gap: clamp(24px, 4vw, 64px) !important; padding: 0 !important; margin: 0 !important; width: 100% !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_row_6_tb_footer > .et_pb_column { flex: 1 1 0 !important; max-width: none !important; margin: 0 !important; gap: 28px; justify-content: center; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_1_tb_footer .et_pb_image { margin: 0 !important; text-align: center !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_image_0_tb_footer img { width: 150px !important; height: auto !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer :is(.et_pb_image_1_tb_footer, .et_pb_image_2_tb_footer, .et_pb_image_3_tb_footer, .et_pb_image_4_tb_footer) img {
  width: auto !important; max-width: 220px !important; max-height: 80px !important; height: auto !important;
}

/* funding statement: small centred note; description column hidden */
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_row_7_tb_footer {
  width: min(900px, calc(100% - 40px)) !important; max-width: none !important; margin: clamp(28px, 3vw, 40px) auto 0 !important; padding: 0 !important;
}
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_column_15_tb_footer { display: none !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_column_16_tb_footer { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_text_1_tb_footer,
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_text_1_tb_footer p {
  text-align: center !important; font-size: 12px !important; line-height: 1.5 !important; color: #6E6E6E !important; padding-bottom: 6px !important; margin: 0 !important;
}
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_text_1_tb_footer br { display: none; }
:is(body.arc2-preview, body.arc2-live):has(.arc2-funding-note) .et-l--footer .et_pb_row_7_tb_footer { display: none !important; }

/* copyright / legal bar */
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_3_tb_footer.et_pb_section {
  border-top: 1px solid #DADADA !important; padding: 16px 20px !important; background: #fff !important;
}
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_3_tb_footer .et_pb_row { width: min(1100px, 100%) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_3_tb_footer :is(p, span, a, li) { font-size: 13px !important; line-height: 1.5 !important; color: #6E6E6E !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_3_tb_footer .et_pb_row { justify-content: space-between !important; gap: 16px 32px !important; flex-wrap: wrap !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_3_tb_footer .et_pb_row > .et_pb_column { flex: 0 1 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_3_tb_footer .et_pb_row > .et_pb_column:not(:last-child) * { white-space: nowrap; }
:is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_3_tb_footer a:hover { color: var(--arc2-navy) !important; }

@media (max-width: 767px) {
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_row_5_tb_footer { flex-direction: column !important; flex-wrap: nowrap !important; gap: 28px !important; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer :is(.et_pb_column_11_tb_footer, .et_pb_column_12_tb_footer) { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_row_6_tb_footer { flex-direction: row !important; flex-wrap: nowrap !important; gap: 20px !important; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_row_6_tb_footer > .et_pb_column { flex: 1 1 50% !important; width: auto !important; height: auto !important; gap: 20px; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer :is(.et_pb_image_1_tb_footer, .et_pb_image_2_tb_footer, .et_pb_image_3_tb_footer, .et_pb_image_4_tb_footer) img { max-width: 100% !important; max-height: 60px !important; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_image_0_tb_footer img { width: 120px !important; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_section_3_tb_footer .et_pb_row { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 8px; }
}

/* ==========================================================================
   29. People cards (researchers + board) – large hexagon down the left,
   all text stacked in one column beside it (Mark, 25 Sep).
   The hex is taken out of flow and centred vertically; the text column
   starts after it, so name / role / university / project line up on one edge.
   ========================================================================== */
.arc2-people .arc2-rcard {
  --hexw: 116px;
  position: relative;
  display: flex !important; flex-direction: column; justify-content: center;
  min-height: calc(var(--hexw) * 1.1547);
  padding-left: calc(var(--hexw) + 24px) !important;
}
.arc2-people .arc2-rcard__head { display: block !important; margin: 0 !important; }
.arc2-people .arc2-rcard .arc2-hex {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: var(--hexw) !important; margin: 0 !important;
}
.arc2-people .arc2-rcard .arc2-hex--photo { padding: 2px; }
.arc2-people .arc2-rcard .arc2-hex--initials { font: 300 38px/1 var(--arc2-font) !important; }
.arc2-people .arc2-rcard__id { padding-top: 0 !important; }
.arc2-people .arc2-rcard__uni { margin-top: 8px !important; }
.arc2-people .arc2-rcard__projects { margin-top: 6px !important; }
@media (max-width: 1024px) { .arc2-people .arc2-rcard { --hexw: 100px; padding-left: calc(var(--hexw) + 20px) !important; } }
@media (max-width: 640px)  { .arc2-people .arc2-rcard { --hexw: 88px;  padding-left: calc(var(--hexw) + 18px) !important; }
                             .arc2-people .arc2-rcard .arc2-hex--initials { font-size: 30px !important; } }


/* ==========================================================================
   30. Auto carousels (js/arc-v2.js) – added 29 Sep 2026
   Wrapper: .arc2-autoslide  ·  slides: .arc2-slide  ·  JS wraps slides in
   .arc2-slides (one grid cell, so the tallest slide sets the height) and
   toggles .is-active. No visible controls. Before JS runs (and in the Divi
   builder) only the first slide shows, so there's no flash of stacked slides.
   ========================================================================== */
.arc2-autoslide:not(.arc2-autoslide--ready) .arc2-slide ~ .arc2-slide { display: none !important; }
body.et-fb .arc2-autoslide .arc2-slide ~ .arc2-slide { display: flex !important; } /* builder: show all for editing */
.arc2-slides { display: grid; grid-template-columns: minmax(0, 1fr); }
.arc2-slides > .arc2-slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translateX(24px);
  transition: opacity .8s ease, transform .8s ease, visibility 0s linear .8s;
}
.arc2-slides > .arc2-slide.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .8s ease, transform .8s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .arc2-slides > .arc2-slide, .arc2-slides > .arc2-slide.is-active { transition: none; transform: none; }
}
/* hero: rows moved into .arc2-slides keep Divi row sizing */
.arc2-hero .arc2-slides { width: 100%; }
.arc2-hero .arc2-slides > .et_pb_row { margin-left: 0 !important; margin-right: 0 !important; }

/* Project spotlight ([arc2_project_spotlight]) – replaces the single image split */
.arc2-spotlight-section.et_pb_section { padding: clamp(48px, 6vw, 88px) 0 !important; }
.arc2-spotlight-section .et_pb_row { width: min(1180px, calc(100% - 40px)) !important; max-width: none !important; }
.arc2-spotlight { font-family: var(--arc2-font); }
.arc2-spotlight__slide {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
}
.arc2-spotlight__title { margin: 6px 0 14px !important; padding: 0 !important; font: 700 clamp(1.75rem, 1.2rem + 1.2vw, 2.5rem)/1.2 var(--arc2-font) !important; }
.arc2-spotlight__title a { color: var(--arc2-navy) !important; text-decoration: none; }
.arc2-spotlight__title a:hover { color: var(--arc2-teal) !important; }
.arc2-spotlight__tag { margin: 0 0 16px; }
.arc2-spotlight .arc2-tag { font: 600 16px/1.3 var(--arc2-font) !important; text-decoration: none; color: var(--arc2-tag, var(--arc2-teal)) !important; }
.arc2-spotlight__excerpt { margin: 0 0 16px !important; padding: 0 !important; color: #282828; font: 400 19px/1.55 var(--arc2-font) !important; }
.arc2-spotlight__meta { margin: 0 0 28px !important; padding: 0 !important; color: #595959; font: 700 19px/1.5 var(--arc2-font) !important; }
.arc2-spotlight__meta a { color: var(--arc2-teal) !important; text-decoration: none; }
.arc2-spotlight__sep { margin: 0 .5em; color: #C0C0C0; }
.arc2-spotlight .arc2-btn-pair { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: flex-start !important; }
.arc2-spotlight__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--arc2-radius-card, 4px); background: #E6EEF2; }
.arc2-spotlight__media img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; }
@media (max-width: 980px) {
  .arc2-spotlight__slide { grid-template-columns: 1fr; }
  .arc2-spotlight__media { order: -1; }
}

/* ==========================================================================
   31. Projects grid card – one body size (29 Sep 2026, Menalie)
   Heading (project name) 25px · description, university, "Lead researcher"
   label and name all 19px/28px · theme tag 16px. Weights/colours unchanged.
   ========================================================================== */
.arc2-projects h3.wpgb-block-3, .arc2-projects h3.wpgb-block-3 a { font-size: 25px !important; line-height: 1.25 !important; }
.arc2-projects .wpgb-block-6, .arc2-projects .wpgb-block-6 p,
.arc2-projects .wpgb-block-10,
.arc2-projects .wpgb-block-16, .arc2-projects .wpgb-block-16 p,
.arc2-projects a.lead-researcher-link { font-size: 19px !important; line-height: 28px !important; }
.arc2-projects .wpgb-block-term { font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; }
/* 31b. team line = same body size; names styled like the lead; tag dot spacing */
.arc2-projects .wpgb-card h3.wpgb-block-3 { font-size: 25px !important; line-height: 1.25 !important; }
.arc2-projects .wpgb-block-18, .arc2-projects .project-team-members,
.arc2-projects .team-label, .arc2-projects .team-member-link { font-size: 19px !important; line-height: 28px !important; font-family: var(--arc2-font) !important; }
.arc2-projects .team-label { color: #000 !important; font-weight: 400 !important; margin-right: 4px; }
.arc2-projects .team-member-link { color: var(--arc2-teal) !important; font-weight: 700 !important; position: relative; z-index: 2; }
.arc2-projects .wpgb-block-term { display: inline-flex !important; align-items: center !important; gap: 8px !important; }

/* ==========================================================================
   32. Hero fits the first screen so the funding statement shows on load
   (29 Sep 2026). Collage height is capped by the viewport; the funders row
   sits tight under the slides. Mobile: columns forced full width (the 42/58
   desktop split was leaking into mobile), smaller type, collage capped.
   ========================================================================== */
.arc2-hero.et_pb_section { padding: clamp(12px, 1.6vw, 24px) 0 12px !important; }
.arc2-hero .et_pb_row.arc2-slide { padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.arc2-hero .et_pb_row.arc2-hero-funders { margin-top: 10px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.arc2-hero .arc2-funders img { height: clamp(34px, 2.6vw, 44px) !important; width: auto !important; }
.arc2-hero .arc2-funding-note p { font-size: 11px !important; line-height: 1.4 !important; margin: 0 0 2px !important; padding: 0 !important; }
.arc2-hero .arc2-funders { margin-bottom: 8px !important; }

@media (min-width: 981px) {
  .arc2-hero-collage img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: clamp(300px, calc(100svh - 280px), 568px) !important; margin-left: auto !important; }
  body.admin-bar .arc2-hero-collage img { max-height: clamp(300px, calc(100svh - 312px), 568px) !important; }
  .arc2-hero-collage .et_pb_image_wrap { display: flex !important; justify-content: flex-end; }
}

@media (max-width: 980px) {
  .arc2-hero .et_pb_row.arc2-slide { flex-direction: column !important; flex-wrap: nowrap !important; gap: 16px !important; }
  .arc2-hero .et_pb_row.arc2-slide > .et_pb_column:first-child,
  .arc2-hero .et_pb_row.arc2-slide > .et_pb_column:last-child {
    flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-right: 0 !important;
  }
  .arc2-hero .et_pb_row.arc2-slide > .et_pb_column:last-child { justify-content: center !important; }
  .arc2-hero .arc2-eyebrow--lg { font-size: 14px !important; margin-bottom: 4px !important; }
  .arc2-hero .arc2-h1 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem) !important; margin-bottom: 10px !important; }
  .arc2-hero .arc2-lead { font-size: 17px !important; line-height: 1.45 !important; margin-bottom: 16px !important; max-width: none !important; }
  .arc2-hero .arc2-btn { min-height: 46px !important; font-size: 17px !important; }
  .arc2-hero-collage { margin: 0 auto !important; max-width: 100% !important; }
  .arc2-hero-collage .et_pb_image_wrap { display: flex !important; justify-content: center; }
  .arc2-hero-collage img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: clamp(80px, calc(100svh - 580px), 32svh) !important; }
  .arc2-hero .arc2-funders img { height: auto !important; width: 100% !important; max-width: 520px; }
  .arc2-hero .arc2-funding-note p { font-size: 10.5px !important; }
}

/* Project spotlight: tighter spacing, top-aligned, bounded text height (29 Sep) */
.arc2-spotlight-section.et_pb_section { padding: clamp(32px, 4vw, 56px) 0 !important; }
.arc2-spotlight__slide { align-items: start !important; }
.arc2-spotlight .arc2-eyebrow { margin: 0 !important; }
.arc2-spotlight__title { margin: 2px 0 6px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arc2-spotlight__tag { margin: 0 0 10px !important; }
.arc2-spotlight__excerpt { margin: 0 0 10px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.arc2-spotlight__meta { margin: 0 0 16px !important; }
.arc2-spotlight .arc2-slides > .arc2-slide { transition-duration: .6s, .6s, 0s; }
.arc2-spotlight .arc2-slides > .arc2-slide:not(.is-active) { transition-delay: 0s, 0s, .6s; }
/* 32b. Divi flex-section gap was adding ~60px between slides and funders */
.arc2-hero.et_pb_section { gap: 0 !important; row-gap: 0 !important; }
.arc2-hero .arc2-hero-funders > .et_pb_column { margin-bottom: 0 !important; }

/* 29b. People cards: hexagon and text always top-aligned (29 Sep) */
.arc2-people .arc2-rcard { justify-content: flex-start !important; }
.arc2-people .arc2-rcard .arc2-hex { top: 0 !important; transform: none !important; }
/* 29c. Hexagon photo is clickable: the name link is stretched over the hex area
   (one link per card, so screen readers and keyboard users get a single stop). */
.arc2-people .arc2-rcard__head, .arc2-people .arc2-rcard__id, .arc2-people .arc2-rcard__name { position: static !important; }
.arc2-people .arc2-rcard__name a::after {
  content: ""; position: absolute; left: 0; top: 0; z-index: 3;
  width: var(--hexw); height: calc(var(--hexw) * 1.1547);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.arc2-people .arc2-rcard .arc2-hex { transition: filter .2s ease; }
.arc2-people .arc2-rcard:has(.arc2-rcard__name a:hover) .arc2-hex { filter: brightness(1.08) saturate(1.05); }
.arc2-people .arc2-rcard:has(.arc2-rcard__name a:hover) .arc2-rcard__name a { color: var(--arc2-teal) !important; }

/* ==========================================================================
   33. SINGLE PROJECT (template single-arc_projects-v2.php, 29 Sep 2026)
   No Figma frame – built from the profile page + project card styles.
   ========================================================================== */
.arc2-project-top { background: #F6FDFF; padding: 32px 0 56px; }
.arc2-project-back { margin: 0 0 20px; padding: 0; font: 600 16px/1.4 var(--arc2-font); }
.arc2-project-back a { color: var(--arc2-teal); text-decoration: none; }
.arc2-project-back a:hover { text-decoration: underline; }
.arc2-project-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.arc2-project-title { margin: 4px 0 12px; padding: 0; color: var(--arc2-navy); font: 800 clamp(2rem, 1.2rem + 1.6vw, 2.75rem)/1.15 var(--arc2-font); }
.arc2-project-themes { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 16px; padding: 0; list-style: none; }
.arc2-project-themes .arc2-tag { font: 600 17px/1.3 var(--arc2-font); text-decoration: none; }
.arc2-project-lead { margin: 0 0 24px; padding: 0; color: var(--arc2-navy); font: 400 clamp(1.125rem, 1rem + 0.35vw, 1.35rem)/1.5 var(--arc2-font); }
.arc2-project-facts { margin: 0; display: grid; gap: 10px; }
.arc2-project-facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid #DADADA; }
.arc2-project-facts dt { color: #797979; font: 700 16px/1.5 var(--arc2-font); }
.arc2-project-facts dd { margin: 0; color: #282828; font: 400 18px/1.5 var(--arc2-font); }
.arc2-project-facts dd a { color: var(--arc2-teal); font-weight: 700; text-decoration: none; }
.arc2-project-media { border-top: 18px solid var(--arc2-teal); aspect-ratio: 3 / 2; overflow: hidden; background: #E6EEF2; }
.arc2-project-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.arc2-project-body { padding: 56px 0 24px; }
.arc2-project-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.arc2-project-cols > :only-child { grid-column: 1 / -1; max-width: 900px; }
.arc2-project-content p, .arc2-project-content li { color: #282828; font: 400 19px/1.65 var(--arc2-font); }
.arc2-project-content p { margin: 0 0 1em; padding: 0; }
.arc2-project-content h2, .arc2-project-content h3 { color: var(--arc2-navy); font-family: var(--arc2-font); font-weight: 800; }
.arc2-project-content a { color: var(--arc2-teal); }
.arc2-project-impact { background: #F4FEFD; border-left: 10px solid var(--arc2-teal); padding: 24px 28px; }
.arc2-project-impact h2 { margin: 0 0 10px; padding: 0; color: var(--arc2-navy); font: 800 25px/1.25 var(--arc2-font); }
.arc2-project-impact p { margin: 0 0 .8em; padding: 0; color: #282828; font: 400 18px/1.6 var(--arc2-font); }

.arc2-project-team { padding: 40px 0 16px; }
.arc2-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arc2-team-grid > .arc2-team-cell { padding: 28px 28px 32px; border-bottom: 3px solid #F5F5F5; border-right: 4px solid #F5F5F5; }
.arc2-team-grid > .arc2-team-cell:nth-child(3n) { border-right: 0; }
.arc2-team-grid .arc2-rcard__name { margin: 0; padding: 0; font: 800 22px/1.25 var(--arc2-font); }
.arc2-team-grid .arc2-rcard__name a { color: var(--arc2-navy); text-decoration: none; }
.arc2-project-related { padding-top: 40px; }

@media (max-width: 980px) {
  .arc2-project-head, .arc2-project-cols { grid-template-columns: 1fr; }
  .arc2-project-media { order: -1; }
  .arc2-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc2-team-grid > .arc2-team-cell:nth-child(n) { border-right: 4px solid #F5F5F5; }
  .arc2-team-grid > .arc2-team-cell:nth-child(2n) { border-right: 0; }
}
@media (max-width: 640px) {
  .arc2-team-grid { grid-template-columns: 1fr; }
  .arc2-team-grid > .arc2-team-cell:nth-child(n) { border-right: 0; padding: 22px 0; }
  .arc2-project-facts > div { grid-template-columns: 1fr; gap: 0; }
}


/* ==========================================================================
   34. Figma update 30 Sep 2026
   a) People-card hexagon matches Figma: Researchers 65:1485 ~135px,
      Advisory Board 115:217 ~121px (both drawn at 2x). Board tabs on About are
      sections with .arc2-people.arc2-board, so they get the smaller size.
   b) Facet icons are the real Lucide icons (lucide.dev, ISC licence):
      "search" and "chevron-down", white on the navy block. WPGB's own
      SVG shapes are hidden and the Lucide icon is drawn as a background.
   ========================================================================== */
.arc2-people .arc2-rcard { --hexw: 136px; padding-left: calc(var(--hexw) + 20px) !important; }
.arc2-people.arc2-board .arc2-rcard { --hexw: 121px; }
.arc2-people .arc2-rcard .arc2-hex--initials { font-size: 42px !important; }
@media (max-width: 1024px) {
  .arc2-people .arc2-rcard,
  .arc2-people.arc2-board .arc2-rcard { --hexw: 108px; padding-left: calc(var(--hexw) + 18px) !important; }
  .arc2-people .arc2-rcard .arc2-hex--initials { font-size: 34px !important; }
}
@media (max-width: 640px) {
  .arc2-people .arc2-rcard,
  .arc2-people.arc2-board .arc2-rcard { --hexw: 96px; padding-left: calc(var(--hexw) + 16px) !important; }
  .arc2-people .arc2-rcard .arc2-hex--initials { font-size: 30px !important; }
}

.arc2-facets .wpgb-search-facet svg {
  background: var(--arc2-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center / 40px 40px no-repeat !important;
}
.arc2-facets .wpgb-search-facet svg > * { display: none !important; }
.arc2-facets .wpgb-search-facet svg.wpgb-input-icon { margin: 0 !important; } /* WPGB adds 0 8px 0 10px, leaving a sliver right of the navy block */
.arc2-facets .wpgb-select-controls svg,
.arc2-facets .wpgb-select-toggle svg {
  width: 40px !important; height: 40px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 40px 40px no-repeat !important;
}
.arc2-facets .wpgb-select-controls svg > *,
.arc2-facets .wpgb-select-toggle svg > * { display: none !important; }


/* ==========================================================================
   35. Mobile – profile page + shared mobile chrome (Figma 107:114, drawn at
   3x for a ~400px phone; values below are ÷3). Added 30 Sep 2026.
   Figma type sizes were measured from the mockup (the Figma API was
   rate-limited), so they are rounded to the nearest sensible px.
   ========================================================================== */
@media (max-width: 767px) {
  /* header: bigger logo, navy menu button (Lucide "menu" icon, white) */
  :is(body.arc2-preview, body.arc2-live) #logo { width: 180px !important; max-width: 60vw !important; height: auto !important; max-height: none !important; }
  :is(body.arc2-preview, body.arc2-live) #et_mobile_nav_menu .mobile_nav { padding: 0 !important; background: none !important; }
  :is(body.arc2-preview, body.arc2-live) #et_mobile_nav_menu .select_page { display: none !important; }
  :is(body.arc2-preview, body.arc2-live) #et_mobile_nav_menu .mobile_menu_bar {
    display: block !important; width: 58px !important; height: 52px !important; padding: 0 !important;
    border-radius: 6px; background: var(--arc2-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E") center / 28px 28px no-repeat !important;
  }
  :is(body.arc2-preview, body.arc2-live) #et_mobile_nav_menu .mobile_menu_bar::before { content: none !important; display: none !important; }
  :is(body.arc2-preview, body.arc2-live) #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") !important;
  }

  /* profile: centred identity, then the photo */
  .arc2-profile .arc2-wrap { width: calc(100% - 44px); }
  .arc2-profile-top { padding: 28px 0 40px; }
  .arc2-profile-head { flex-direction: column; align-items: center; gap: 18px; margin-bottom: 28px; text-align: center; }
  .arc2-profile-head .arc2-hex--xl { order: 2; width: 132px; }
  .arc2-profile-id { order: 1; }
  .arc2-profile-name { margin: 0 0 12px; font-size: 26px; line-height: 32px; }
  .arc2-profile-group { margin: 0 0 10px; font-size: 21px; line-height: 1.2; }
  .arc2-profile-org { font-size: 17px; line-height: 1.4; }
  .arc2-profile-bio,
  .arc2-profile-themes { padding-inline: 14px; }
  .arc2-profile-bio p { font-size: 16.5px; line-height: 1.62; }
  .arc2-profile-updated { font-size: 16.5px !important; }
  .arc2-profile-label { margin: 4px 0 12px; font-size: 16.5px; }
  .arc2-profile-themes .arc2-tag { font-size: 17px; }
  .arc2-profile-themes .arc2-tag::before { width: 12px; height: 12px; }

  /* Research Programmes: single column, bar on the card, image inset */
  .arc2-profile-programmes { padding: 28px 0 48px; }
  .arc2-profile-h2 { margin: 0 0 36px; font-size: 26px; line-height: 1.2; }
  .arc2-pgrid { grid-template-columns: 1fr; gap: 24px; }
  .arc2-pcard-proj { border-top: 9px solid var(--arc2-teal); padding: 16px 16px 0; }
  .arc2-pcard-proj__media { border-top: 0; aspect-ratio: 306 / 140; }
  .arc2-pcard-proj__body { padding: 16px 0 20px; }
  .arc2-pcard-proj h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.25; }
  .arc2-pcard-proj__excerpt { margin: 0 0 16px; font-size: 14px; line-height: 1.3; }
  .arc2-pcard-proj__uni { font-size: 14px; line-height: 1.5; }
  .arc2-pcard-proj__lead { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
  .arc2-pcard-proj .arc2-tag { font-size: 13px; }

  /* CTA band (all V2 pages): smaller type, stacked full-width buttons.
     Figma draws the buttons ~26px high; kept at 44px for touch. */
  .arc2-cta h2 { font-size: 24px !important; line-height: 1.25 !important; }
  .arc2-cta p { font-size: 15px !important; line-height: 1.45 !important; }
  .arc2-cta .arc2-btn-pair { flex-direction: column; align-items: stretch; gap: 14px; width: min(100%, 290px); margin: 28px auto 0; }
  .arc2-cta .arc2-btn-pair .arc2-actions { width: 100%; }
  .arc2-cta .arc2-btn-pair a.arc2-btn,
  .arc2-cta .arc2-btn-pair .arc2-btn .et_pb_button { width: 100%; min-height: 44px; height: auto; font-size: 16px !important; justify-content: center; }

  /* footer logos: one row – ARC logo | funders 2x2 (Figma mobile) */
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_row_5_tb_footer { flex-direction: row !important; align-items: center !important; gap: 16px !important; width: calc(100% - 32px) !important; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_column_11_tb_footer { flex: 0 0 26% !important; width: 26% !important; max-width: 26% !important; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_column_12_tb_footer { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_image_0_tb_footer img { width: 100% !important; max-width: 96px !important; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_row_6_tb_footer { gap: 12px !important; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer .et_pb_row_6_tb_footer > .et_pb_column { gap: 14px; }
  :is(body.arc2-preview, body.arc2-live) .et-l--footer :is(.et_pb_image_1_tb_footer, .et_pb_image_2_tb_footer, .et_pb_image_3_tb_footer, .et_pb_image_4_tb_footer) img { max-height: 40px !important; }
}