:root {
  --color-primary:     #fc341e;
  --color-text-light:  #ffffff;
  --color-text-dark:   #111111;
  --color-bg-light:    #ffffff;
  --color-bg-dark:     #000000;
  --color-muted:       #999999;
  --color-muted-light: #aaaaaa;
  --color-surface-muted: #222222;
  --color-border-light:  #cccccc;
  --color-border-dark:   rgba(255,255,255,0.25);
  --section-pad-v:     60px;
  --section-pad-v-sm:  40px;
  --section-max-width: 1110px;
  --content-max-width: 1110px;
  --mobile-pad-x:      24px;
  --font-family:       'Sofia Pro', sans-serif;
  --button-pad:        16px 32px;
  --button-font-size:  19px;
}

/* === Theme variables === */
.theme-light {
  --text:        var(--color-text-dark);
  --text-muted:  var(--color-muted);
  --bg:          var(--color-bg-light);
  --border:      var(--color-border-light);
}
.theme-dark {
  --text:        var(--color-text-light);
  --text-muted:  var(--color-muted-light);
  --bg:          var(--color-bg-dark);
  --border:      var(--color-border-dark);
}

/* === Apply theme colour ===
 * Setting only the theme container would let HubSpot theme rules like
 * "h1 { color: #1F115A }" win on inheritance, so we explicitly list every
 * content element. span is intentionally NOT in this list: HubSpot buttons
 * render their text as <a><span>...</span></a> and the span needs to
 * inherit colour from the button (.cg-btn / .ap-btn-*), not the theme. */
.theme-light, .theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4, .theme-light h5, .theme-light h6,
.theme-light p, .theme-light li, .theme-light td, .theme-light th, .theme-light strong, .theme-light em, .theme-light blockquote,
.theme-dark, .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6,
.theme-dark p, .theme-dark li, .theme-dark td, .theme-dark th, .theme-dark strong, .theme-dark em, .theme-dark blockquote {
  color: var(--text);
}
/* Body-copy hyperlinks. The chained .dnd-section + theme-class selector
   pushes specificity above HubSpot's theme rules (which match plain
   anchor tags inside their own section/column classes). Also
   enumerated for :visited / :hover / :focus / :active so browser
   defaults don't override on visited or hovered links. */
.dnd-section.theme-light a:not([class*="btn"]),
.dnd-section.theme-dark  a:not([class*="btn"]),
.dnd-section.theme-light a:not([class*="btn"]):visited,
.dnd-section.theme-dark  a:not([class*="btn"]):visited,
.dnd-section.theme-light a:not([class*="btn"]):hover,
.dnd-section.theme-dark  a:not([class*="btn"]):hover,
.dnd-section.theme-light a:not([class*="btn"]):focus,
.dnd-section.theme-dark  a:not([class*="btn"]):focus,
.dnd-section.theme-light a:not([class*="btn"]):active,
.dnd-section.theme-dark  a:not([class*="btn"]):active {
  color: var(--color-primary);
}

/* === Mobile heading sizes === */
@media (max-width: 767px) {
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.125rem; }
}

/* === Container widths ===
 * Add one of these classes to a row's cssClass via
 * rowMeta({ container: 'wide' | 'narrow' }). Targets the .row-fluid
 * descendant (HubSpot's content wrapper). */
.cg-container        > .row-fluid,
.cg-container-narrow > .row-fluid {
  margin-left: auto;
  margin-right: auto;
}
.cg-container        > .row-fluid { max-width: var(--section-max-width); }
.cg-container-narrow > .row-fluid { max-width: var(--content-max-width); }

@media (max-width: 767px) {
  .cg-container > .row-fluid,
  .cg-container-narrow > .row-fluid,
  [class*="-max-width-section-centering"] > .row-fluid {
    padding-left: var(--mobile-pad-x);
    padding-right: var(--mobile-pad-x);
    box-sizing: border-box;
  }
}

/* === Section vertical spacing ===
 * Default theme rows get the configured vertical padding (zero for the
 * _default project; 60px on Climate Group). Sections that should hug
 * their neighbours opt out via .cg-section-flush. */
.dnd-section.theme-light,
.dnd-section.theme-dark {
  padding-top: var(--section-pad-v);
  padding-bottom: var(--section-pad-v);
}
@media (max-width: 767px) {
  .dnd-section.theme-light,
  .dnd-section.theme-dark {
    padding-top: var(--section-pad-v-sm);
    padding-bottom: var(--section-pad-v-sm);
  }
}
.cg-section-flush {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* === Generic tables in rich-text content ===
 * Source HTML often embeds <table> blocks (e.g. cookie tables inside
 * accordion items). Browsers default tbody/tr/td/th to white, which
 * leaks through when the surrounding row is themed dark. Force every
 * table-flavoured element inside a themed row to be transparent + use
 * the theme's text colour. Component-specific table rules
 * (.cg-mtable, .cg-mr-table) override this with their own styling. */
.theme-light table, .theme-light thead, .theme-light tbody,
.theme-light tr,    .theme-light th,    .theme-light td,
.theme-dark  table, .theme-dark  thead, .theme-dark  tbody,
.theme-dark  tr,    .theme-dark  th,    .theme-dark  td {
  background: transparent !important;
  color: var(--text);
  border-color: var(--border);
}

/* === Button === */
.cg-btn {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-text-light);
  padding: var(--button-pad);
  text-decoration: none;
  font-size: var(--button-font-size);
  line-height: 1;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
}
.cg-btn--block { display: block; width: 100%; box-sizing: border-box; }
.cg-btn--lg    { padding: 16px 48px; }
.cg-btn--sm    { padding: 12px 24px; }
.cg-cta-button-wrap { margin-top: 20px; }
.cg-cta-button-wrap--center { text-align: center; margin-top: 32px; }

/* === Rich-text body spacing === */
.cg-rich-text {
  font-weight: 400;
  line-height: 1.5;
}
.cg-rich-text p,
.cg-rich-text ul,
.cg-rich-text ol {
  margin: 0 0 1em;
  font-weight: 400;
}
.cg-rich-text > :first-child { margin-top: 0; }
.cg-rich-text > :last-child  { margin-bottom: 0; }
.cg-rich-text h2 { margin: 1.6em 0 0.5em; }
.cg-rich-text h3 { margin: 1.4em 0 0.4em; }
.cg-rich-text h4 { margin: 1.2em 0 0.4em; }

/* === Fallback "Review: unmatched section" row ===
 * Pushed by dispatchSection when no mapping claimed a wrapper. Always
 * rendered with a warning palette (amber dashed border + light yellow
 * bg + dark text + blue links) regardless of surrounding theme. */
.cg-fallback-section {
  --text: #1a1a1a;
  --color-primary: #1565c0;
  border: 2px dashed #d4a017;
  background: #fff8d6;
  padding: 24px;
  margin: 16px 0;
}
.cg-fallback-banner {
  color: #5a4400;
  font-weight: 700;
  margin: 0 0 16px;
}
.cg-fallback-banner small {
  display: block;
  font-weight: 400;
  font-size: 0.85em;
  margin-top: 4px;
  opacity: 0.85;
}
.cg-fallback-banner code {
  background: rgba(0, 0, 0, 0.07);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}
.cg-fallback-content { line-height: 1.55; }
.cg-fallback-content > :first-child { margin-top: 0; }
.cg-fallback-content > :last-child  { margin-bottom: 0; }

/* === Strict-mode "Unresolved section" placeholder ===
 * Pushed by dispatchSection when strict mode is on and a wrapper can't
 * be resolved to a hubspot-module template. Red palette so it's clearly
 * distinct from the amber fallback — strict's unresolved row must be
 * replaced before publish, while fallback rows are allowed to ship. */
.cg-unresolved-section {
  --text: #1a1a1a;
  --color-primary: #1565c0;
  border: 2px dashed #c62828;
  background: #ffeaea;
  padding: 24px;
  margin: 16px 0;
}
.cg-unresolved-banner {
  color: #8b1414;
  font-weight: 700;
  margin: 0 0 16px;
}
.cg-unresolved-banner small {
  display: block;
  font-weight: 400;
  font-size: 0.85em;
  margin-top: 4px;
  opacity: 0.85;
}
.cg-unresolved-banner code {
  background: rgba(0, 0, 0, 0.07);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}
.cg-unresolved-content { line-height: 1.55; }
.cg-unresolved-content > :first-child { margin-top: 0; }
.cg-unresolved-content > :last-child  { margin-bottom: 0; }

/* === Divider === */
.cg-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
}

/* === Prelude === */
.cg-heading-row > h1,
.cg-heading-row > h2,
.cg-heading-row > h3,
.cg-heading-row > h4 { margin: 0; text-align: left; }

/* Big-hero composed section — matches the 60/24 saved-section spacing. */
.dnd-section.cg-big-hero { padding: 60px 24px !important; }

/* === Big-hero image (standard-image-module) === */
.cg-big-hero .ap-standard-content-image-section {
  min-height: 0 !important;
  margin: 0 !important;
}
.cg-big-hero .ap-standard-content-image-section .ap-standard-content-image-wrapper {
  position: static;
  width: auto;
  height: auto;
  max-width: 450px;
  display: block;
}

/* === Big-hero left column (heading + share) === */
.cg-big-hero [id^="hs_cos_wrapper_heading_"],
.cg-big-hero [id^="hs_cos_wrapper_share_"] {
  max-width: 370px;
}
.cg-big-hero .ap-standard-content-main-heading h1 {
  font-size: 32px;
  line-height: 1.2;
}
.cg-big-hero .ap-standard-content-sub-heading h6 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 8px 0 0;
}

/* === Text + image two-column === */
.cg-text-image {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cg-ti-img, .cg-ti-txt { flex: 0 0 45%; max-width: 45%; }
.cg-ti-img img { width: 100%; height: auto; display: block; }
.cg-ti-txt h3 { margin: 0 0 16px; }
@media (max-width: 767px) {
  .cg-text-image { flex-direction: column; }
  .cg-ti-img, .cg-ti-txt { flex: 0 0 auto; max-width: 100%; width: 100%; }
}

/* === News cards grid === */
.cg-nc-section h2 { margin: 0 0 40px; }
.cg-nc-grid { display: flex; flex-wrap: wrap; gap: 40px; }
.cg-nc-card {
  display: block;
  text-decoration: none;
  flex: 0 0 calc(33.333% - 28px);
  min-width: 0;
}
.cg-nc-card img { width: 100%; height: auto; display: block; }
.cg-nc-card .cg-nc-meta { font-size: 0.875rem; margin: 12px 0 8px; }
.cg-nc-card h4 { margin: 0; font-weight: 700; line-height: 1.4; }
.cg-nc-card-placeholder {
  width: 100%;
  padding-top: 68%;
  background: var(--color-surface-muted);
}
@media (max-width: 767px) {
  .cg-nc-grid { flex-direction: column; gap: 32px; }
  .cg-nc-card { flex: 0 0 100%; }
}

/* === Quote === */
.cg-quote {
  position: relative;
  overflow: hidden;
  padding: 80px 0 100px;
}
.cg-quote-body {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin: 0 auto;
  text-align: left;
  padding: 0 var(--mobile-pad-x);
}
.cg-quote-body .cg-quote-text {
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-family);
  margin: 0;
}
/* Block-content variant (heading + list, etc.) — give headings the
 * pull-quote prominence and keep list bullets sensible. */
.cg-quote-body div.cg-quote-text h2,
.cg-quote-body div.cg-quote-text h3,
.cg-quote-body div.cg-quote-text h4 {
  font-size: 1.1em;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.3;
}
.cg-quote-body div.cg-quote-text ul,
.cg-quote-body div.cg-quote-text ol {
  padding-left: 1.25em;
  margin: 0;
}
.cg-quote-body div.cg-quote-text li { margin: 0 0 4px; }
.cg-quote-body p.cg-quote-attr {
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.5;
  margin-top: 40px;
}
.cg-quote-sun {
  position: absolute;
  width: 550px;
  display: block;
}
.cg-quote-sun--top    { top: -260px;    left: -260px; }
.cg-quote-sun--bottom { bottom: -260px; right: -260px; }
@media (max-width: 767px) {
  .cg-quote { padding: 40px 0; }
  .cg-quote-sun {
    position: static;
    width: 60%;
    max-width: 300px;
    margin: 0 auto;
    top: auto; bottom: auto; left: auto; right: auto;
  }
}

/* === CTA banner === */
/* Padding + min-height keeps the absolutely-positioned circles inside
   .cg-cta so they don't bleed into adjacent sections, and gives two
   stacked CTAs ~120px of breathing room between them. Mobile drops both
   because .cg-cta-circles is hidden and .cg-cta-content sets its own. */
.cg-cta {
  position: relative;
  padding: 60px 0;
  min-height: 21.25rem;
}
.cg-cta-circles {
  position: absolute;
  left: 0; top: 50%;
  z-index: 0;
  transform: translateY(-50%) scaleX(-1);
  height: 21.25rem;
  pointer-events: none;
}
.cg-cta-content {
  position: relative;
  z-index: 1;
  max-width: var(--section-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.cg-cta-inner {
  flex: 0 0 370px;
  max-width: 370px;
  padding-top: 40px;
}
.cg-cta-inner h3 { margin: 0 0 16px; }
/* Mirror modifier — circles on the right, content aligned left. Applied
   per-section via the review-step "Flip" toggle. */
.cg-cta--mirror .cg-cta-circles {
  left: auto;
  right: 0;
  transform: translateY(-50%);
}
.cg-cta--mirror .cg-cta-content {
  justify-content: flex-start;
}
@media (max-width: 767px) {
  .cg-cta { padding: 0; min-height: 0; }
  .cg-cta-circles { display: none; }
  .cg-cta-content {
    justify-content: flex-start;
    padding: 40px var(--mobile-pad-x);
  }
  .cg-cta-inner {
    flex: 0 0 100%;
    max-width: 100%;
    padding-top: 0;
  }
}

/* === Accordion === */
.cg-accord-left { padding-right: 32px; }
.cg-accord-heading {
  font-size: 1.6em;
  line-height: 1.3;
  margin: 0 0 24px;
}
.cg-accord-subtitle { line-height: 1.6; }
/* Theme-aware backgrounds. HubSpot injects per-widget id-targeted CSS
 * (e.g. #hs_cos_wrapper_widget_NN { background: ... }) that wins over
 * a class-only rule on specificity, so we have to use !important here
 * to keep accordion bodies from going white inside a dark-themed row.
 * Same pattern as the .cg-big-hero overrides further up. */
.cg-accord-item,
.cg-accord-summary,
.cg-accord-body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
.cg-accord-item { padding: 0; }
.cg-accord-summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-top: 1px dashed var(--border);
}
.cg-accord-summary::-webkit-details-marker { display: none; }
.cg-accord-title { flex: 1; }
.cg-accord-chevron {
  width: 14px;
  height: 10px;
  flex-shrink: 0;
  margin-left: 16px;
  fill: currentColor;
}
.cg-accord-body {
  padding: 0 0 24px;
  line-height: 1.7;
}
.cg-accord-end { border-top: 1px dashed var(--border); }

/* === Mini-card grid (text-image subsections) === */
.cg-mini-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.cg-mini-card { flex: 0 0 calc(50% - 8px); }
.cg-mini-card-icon  { width: 40px; height: 40px; margin-bottom: 12px; }
.cg-mini-card-title    { font-size: 0.9em; font-weight: 600; line-height: 1.5; margin: 0 0 4px; }
.cg-mini-card-subtitle { font-size: 0.9em; line-height: 1.5; margin: 0 0 12px; }
@media (max-width: 767px) {
  .cg-mini-card { flex: 0 0 100%; }
}

/* === Text-image body wrapper === */
.cg-ti-body { line-height: 1.6; }

/* === File meta (PDF download) === */
.cg-file-meta { font-size: 14px; }

/* === Inline image caption (light context) === */
.cg-inline-image-light .cg-caption { font-size: 0.9em; margin: 8px 0 0; }

/* === Initiative nav bar === */
.cg-init-nav {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 40px;
  height: 60px;
  box-sizing: border-box;
}
.cg-init-nav-logo {
  display: flex;
  align-items: center;
  margin-right: 40px;
  flex-shrink: 0;
}
.cg-init-nav-logo img { height: 28px; width: auto; display: block; }
.cg-init-nav-text {
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: 0.05em;
}
.cg-init-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}
.cg-init-nav-links a {
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 500;
  white-space: nowrap;
  margin-right: 40px;
}

/* === Milestones carousel === */
.cg-ms > h2         { margin: 0 0 48px; font-size: 2rem; }
.cg-ms-nav-outer    { overflow-x: auto; padding: 20px 0 24px; }
.cg-ms-nav-inner    { display: flex; align-items: center; min-width: max-content; width: 100%; }
.cg-ms-line {
  flex: 1;
  height: 0;
  border-top: 2px dashed var(--color-primary);
  min-width: 16px;
}
.cg-ms-sq {
  width: 18px; height: 18px; min-width: 18px;
  background: transparent;
  border: 2px solid var(--color-primary);
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1;
}
.cg-ms-sq.is-active {
  width: 64px; height: 64px; min-width: 64px;
  background: var(--color-bg-light);
  color: var(--color-primary);
  font-size: 0.85em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-ms-slides       { margin-top: 32px; }
.cg-ms-slide        { display: none; gap: 40px; align-items: flex-start; }
.cg-ms-slide.is-active { display: flex; }
.cg-ms-text         { flex: 1; min-width: 0; }
.cg-ms-hdr          { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 8px; }
.cg-ms-hdr h3       { margin: 0; font-size: 1.5rem; flex: 1; }
.cg-ms-body         { line-height: 1.7; }
.cg-ms-link         { color: var(--color-primary); }
.cg-ms-prev,
.cg-ms-next {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.8em;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  flex-shrink: 0;
}
.cg-ms-img          { flex: 0 0 38%; max-width: 38%; }
.cg-ms-img img      { width: 100%; height: auto; display: block; border: 1px solid var(--border); }
@media (max-width: 767px) {
  .cg-ms-nav-outer  { overflow: visible; padding: 20px 0; }
  .cg-ms-nav-inner  { min-width: unset; width: 100%; position: relative; justify-content: center; }
  .cg-ms-nav-inner::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    border-top: 2px solid var(--color-primary);
    z-index: 0;
  }
  .cg-ms-sq         { display: none; }
  .cg-ms-sq.is-active { display: flex; position: relative; z-index: 1; }
  .cg-ms-line       { display: none; }
  .cg-ms-slide      { flex-direction: column; gap: 24px; }
  .cg-ms-hdr        { align-items: center; }
  .cg-ms-hdr h3     { text-align: center; padding: 0 8px; }
  .cg-ms-prev       { order: -1; }
  .cg-ms-next       { order:  2; }
  .cg-ms-img        { flex: 0 0 100%; max-width: 100%; }
  .cg-ms-btn        { display: block; text-align: center; width: 100%; box-sizing: border-box; }
}

/* === News-article hero === */
.cg-news-hero-title { font-size: 2em; margin: 0 0 16px; line-height: 1.2; }
.cg-news-meta       { margin-top: 24px; }
.cg-news-header-cta { margin-top: 24px; }

/* === Team member hero === */
.cg-tm-role         { font-size: 1.1em; margin: 0; }

/* === Legal hero subtitle === */
.cg-legal-subtitle  { margin: 8px 0 0; }

/* === Under2 region profile hero === */
.cg-region-country { font-size: 1.1em; margin: 0 0 8px; }
.cg-region-joined  { margin: 0 0 12px; opacity: 0.85; }
.cg-region-stats   { margin: 0 0 16px; font-size: 0.9em; }
.cg-region-cta     { margin-top: 8px; }
.cg-region-list    { padding-left: 20px; }
.cg-region-list a  { color: var(--color-primary); }

/* === Tags row (s-article-tags) === */
.cg-tags {
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  padding: 24px 0;
}
.cg-tags-label { font-size: 0.85em; margin: 0 0 8px; }
.cg-tag {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  padding: 8px 20px;
  margin: 0 8px 8px 0;
  text-decoration: none;
  font-size: 0.85em;
  font-weight: 500;
  text-transform: uppercase;
}

/* === Hero text wrapper (used in landing-page assembler) === */
.cg-hero-text { 
  max-width: 370px;
  padding: 60px 0;
}
.cg-hero-text h1 { font-size: 32px; line-height: 1.2; }
.cg-hero-tagline {
  font-size: 0.85em;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: 0.05em;
}
.cg-hero-subtitle {
  font-size: 1rem;
  letter-spacing: 0.1px;
}
.cg-hero-subtitle a { font-size: 19px; }
@media (max-width: 767px) {
  .cg-hero-text { max-width: 100%; }
}

/* === Inline image with caption === */
.cg-inline-image-wrap { text-align: center; }
.cg-inline-image {
  display: inline-block;
  text-align: left;
  border-bottom: 1px solid var(--text);
  padding-bottom: 30px;
  max-width: 100%;
}
.cg-inline-image img { max-width: 100%; height: auto; display: block; }
.cg-inline-image .cg-caption {
  font-size: 0.85em;
  margin: 8px 0 0;
  color: var(--text-muted);
}

/* === Expandable project list (s-list-wrapper, project-cards variant) === */
.cg-list-section > h3     { margin: 0 0 40px; font-size: 2.5rem; }
.cg-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: 40px;
  padding-top: 10px;
  margin-bottom: 0;
}
.cg-list-row--no-image    { justify-content: flex-end; }
.cg-list-col1             { flex: 0 0 270px; max-width: 270px; }
.cg-list-col1 img         { width: 100%; height: auto; display: block; }
.cg-list-col1 h2          { font-size: 3rem; font-weight: 700; margin: 0; line-height: 1; }
@media (min-width: 567px) {
  .cg-list-col1 h2 { font-size: 115px; }
}
.cg-list-col23 {
  flex: 0 0 730px;
  max-width: 730px;
  margin-left: 50px;
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cg-list-row--no-image .cg-list-col23 {
  flex: 0 0 370px;
  max-width: 370px;
  margin-left: 0;
  display: block;
}
.cg-list-col2             { flex: 0 0 50%; max-width: 50%; }
.cg-list-col3             { flex: 0 0 50%; max-width: 50%; }
.cg-list-btn:hover        { opacity: 0.75; }
@media (max-width: 767px) {
  .cg-list-row     { flex-direction: column; }
  .cg-list-col1    { flex: 0 0 100%; max-width: 100%; margin-bottom: 16px; }
  .cg-list-col23   { flex: 0 0 100%; max-width: 100%; margin-left: 0; flex-direction: column; }
  .cg-list-col2,
  .cg-list-col3   { flex: 0 0 100%; padding-right: 0; }
}

/* === Members table (s-members-wrapper) === */
.cg-mtable-section > h2     { margin: 0 0 32px; }
.cg-mtable {
  width: 100%;
  border-collapse: collapse;
}
.cg-mtable th, .cg-mtable td {
  background: var(--bg) !important;
  color:      var(--text) !important;
  border:     none !important;
}
.cg-mtable th {
  text-align: left;
  padding: 12px 8px;
  font-weight: 700;
  border-bottom: 1px dashed var(--border) !important;
}
.cg-mtable th:nth-child(1) { width: 25%; }
.cg-mtable th:nth-child(2) { width: 40%; }
.cg-mtable th:nth-child(3) { width: 28%; }
.cg-mtable th:nth-child(4) { width: 7%; text-align: center; }
.cg-mtable-row { cursor: pointer; }
.cg-mtable-row td {
  padding: 16px 8px;
  vertical-align: top;
  border-bottom: 1px dashed var(--border) !important;
}
.cg-mtable-row td:nth-child(1) { font-weight: 600; }
.cg-mtable-row td:nth-child(2) { font-size: 0.9em; line-height: 1.5; }
.cg-mtable-row td:nth-child(4) { text-align: center; font-size: 1.4em; }
.cg-mtable-row-open td { border-bottom: none !important; }
.cg-mtable-detail td {
  padding: 16px 8px;
  vertical-align: top;
  border: none !important;
  border-bottom: 1px dashed var(--border) !important;
}
.cg-mtable-detail td:nth-child(2) { font-size: 0.9em; line-height: 1.6; }
.cg-mtable-detail img             { max-width: 160px; max-height: 100px; display: block; }
.cg-mtable-detail p               { margin: 0 0 12px; }
.cg-mtable-detail p:last-child    { margin-bottom: 0; }
.cg-mtable-detail a               { color: var(--color-primary) !important; text-decoration: underline; }
.cg-mtable-website-link           { color: var(--text) !important; text-decoration: none; }
.cg-mtable-pager {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.cg-mtable-info     { font-size: 0.9em; }
.cg-mtable-controls { font-size: 0.95em; }
.cg-mtable-controls span {
  cursor: pointer;
  padding: 4px 8px;
  margin: 0 2px;
  opacity: 0.6;
}
.cg-mtable-controls span.is-active {
  opacity: 1;
  font-weight: 700;
  text-decoration: underline;
}
.cg-mtable-controls span.is-ellipsis {
  cursor: default;
  opacity: 0.5;
  padding: 4px 4px;
}

/* === RE100 members table === */
.cg-mr-heading          { margin: 0 0 24px; }

.cg-mr-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 0.95em;
  color: #6b6b6b;
}
.cg-mr-reset {
  color: #6b6b6b;
  text-decoration: none;
  cursor: pointer;
}
.cg-mr-reset:hover { color: var(--text); }

.cg-mr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
}
.cg-mr-filter,
.cg-mr-search {
  appearance: none;
  -webkit-appearance: none;
  background: #efefef;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 44px 12px 20px;
  font: inherit;
  font-size: 0.95em;
  color: #6b6b6b;
  min-width: 160px;
  height: 44px;
  box-sizing: border-box;
  cursor: pointer;
}
.cg-mr-search {
  cursor: text;
  padding-right: 20px;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
}
.cg-mr-search::placeholder { color: #6b6b6b; }
.cg-mr-filter {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.cg-mr-filter:focus,
.cg-mr-search:focus {
  outline: none;
  border-color: #6b6b6b;
}

.cg-mr-table-wrap       { overflow-x: auto; }
.cg-mr-table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: 0.95em;
}
.cg-mr-table th,
.cg-mr-table td {
  padding: 16px 8px;
  text-align: left;
  vertical-align: middle;
  border: 0;
  border-bottom: 1px dashed #000;
  background: transparent;
}
.cg-mr-table th {
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  color: #6b6b6b;
  text-transform: none;
}
.cg-mr-table th.cg-mr-num,
.cg-mr-table td.cg-mr-num { text-align: center; }

.cg-mr-table .cg-mr-empty td {
  padding: 24px 8px;
  text-align: center;
  color: #6b6b6b;
  border-bottom: 0;
}

.cg-mr-table th:nth-child(1) { width: 24%; }
.cg-mr-table th:nth-child(2) { width: 14%; }
.cg-mr-table th:nth-child(3) { width: 9%;  }
.cg-mr-table th:nth-child(4) { width: 9%;  }
.cg-mr-table th:nth-child(5) { width: 10%; }
.cg-mr-table th:nth-child(6) { width: 18%; }
.cg-mr-table th:nth-child(7) { width: 16%; }

.cg-mr-name-cell a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.cg-mr-logo {
  width: 60px;
  height: auto;
  max-height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.cg-mr-name { font-weight: 600; }

.cg-mr-ambition {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #70cb5f;
}

.cg-mr-pager {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.cg-mr-controls { font-size: 0.95em; }
.cg-mr-controls span {
  cursor: pointer;
  padding: 4px 8px;
  margin: 0 2px;
  opacity: 0.6;
}
.cg-mr-controls span.is-active {
  opacity: 1;
  font-weight: 700;
  text-decoration: underline;
}
.cg-mr-controls span.is-ellipsis {
  cursor: default;
  opacity: 0.5;
  padding: 4px 4px;
}

@media (max-width: 767px) {
  .cg-mr-status-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cg-mr-filters { gap: 8px; }
  .cg-mr-filter,
  .cg-mr-search { min-width: 0; flex: 1 1 calc(50% - 4px); }
  .cg-mr-table { min-width: 720px; }
}

/* === Sponsor / partner list === */
.cg-sponsor-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}
.cg-sponsor-header { flex: 0 0 280px; }
.cg-sponsor-header h2 {
  font-size: 1.75em;
  font-weight: 700;
  margin: 0 0 16px;
}
.cg-sponsor-header p {
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0 0 8px;
}
.cg-sponsor-list { flex: 1; min-width: 300px; }
.cg-sponsor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}
.cg-sponsor-item { text-align: center; }
.cg-sponsor-item img {
  max-height: 100px;
  max-width: 100%;
  width: auto;
  display: block;
  margin: 0 auto;
}
.cg-sponsor-item p {
  font-size: 0.8em;
  margin: 8px 0 0;
}

/* === Related case-studies carousel === */
.cg-cs-header  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.cg-cs-header h2 { margin: 0; max-width: 300px; font-size: 1.8em; }
.cg-cs-join {
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05em;
}
.cg-cs-track {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  overflow: hidden;
}
.cg-cs-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
  background: var(--cs-card-bg, #1a1a1a);
  padding: 40px;
  box-sizing: border-box;
}
.theme-light .cg-cs-slide { --cs-card-bg: #f5f5f5; }
.cg-cs-slide--active { position: relative; opacity: 1; transform: translateX(0); }
.cg-cs-slide h4 { margin: 0 0 20px; font-size: 1.3em; }
.cg-cs-slide p  { font-size: 1em; line-height: 1.6; opacity: 0.85; margin: 0 0 24px; }
.cg-cs-slide a  { display: block; padding: 16px 32px; text-decoration: none; font-weight: 600; font-size: 1em; text-align: center; }
.cg-cs-controls { display: flex; justify-content: center; gap: 32px; margin-top: 32px; }
.cg-cs-arrow    { cursor: pointer; user-select: none; opacity: 0.7; }
.cg-cs-arrow:hover { opacity: 1; }

/* === Wide video === */
.cg-video-wide h2       { margin: 0 0 12px; }
.cg-video-wide p        { margin: 0 0 32px; }

/* === Logos grid === */
.cg-logos-section       { text-align: center; }
.cg-logos-section h2    { margin: 0 0 40px; text-align: center; }
.cg-logos-grid          { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: center; }
.cg-logos-grid img      { max-width: 152px; width: 100%; height: auto; display: block; }

/* === Embedded video === */
.cg-video { border-bottom: 1px solid var(--text); }
.cg-video-title { font-size: 1.15em; font-weight: 700; margin: 0 0 16px; line-height: 1.4; }
.cg-video-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.cg-video-frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.cg-video-caption {
  font-size: 0.85em;
  margin: 0;
  padding: 30px 0;
  text-align: left;
}

/* === Share bar === */
.cg-share-bar { margin-top: 24px; }
.cg-share-bar .cg-share-label {
  font-size: 1.05em;
  font-weight: 600;
  margin-right: 12px;
}
.cg-share-bar a {
  display: inline-block;
  margin-right: 14px;
  vertical-align: middle;
  text-decoration: none;
}

/* === Contact cards ===
   Each contact renders as a horizontal row: a small portrait on the
   left, name + role + email stacked on the right. Matches the
   member-list-item layout the source uses. */
.cg-contact-section { max-width: var(--section-max-width); margin: 0 auto; }
.cg-contact-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Theme follows the section's .theme-light / .theme-dark wrapper via
   the shared --text variable. Each line uses the same colour so the
   labels and values match across Name / Title / Email / description.
   Each row carries a dotted top divider — the same look the source
   site uses to separate consecutive contact entries. */
.cg-contact-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px dotted var(--border);
  color: var(--text);
}
.cg-contact-photo { width: 140px; }
.cg-contact-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.cg-contact-meta  { display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.cg-contact-name,
.cg-contact-role,
.cg-contact-email,
.cg-contact-desc  { color: var(--text); }
.cg-contact-name  { font-size: 1.1em; }
.cg-contact-label { font-weight: 600; margin-right: 4px; color: var(--text); }
.cg-contact-email a { text-decoration: underline; word-break: break-word; }
.cg-contact-desc { margin-top: 6px; }
.cg-contact-desc p { margin: 0 0 6px; color: var(--text); }
.cg-contact-desc p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .cg-contact-row { grid-template-columns: 90px 1fr; gap: 16px; }
  .cg-contact-photo { width: 90px; }
}