/**
 * Global Diaspora Connect (GDC) Page Section Library
 * Renders Mockup Sheet 1 layouts: Home, About GDC, Leadership, Governance & Integrity
 * plus the shared variants reused across the remaining pages.
 */

/* ==========================================================================
   1. PAGE SHELL
   ========================================================================== */

.gdc-pg {
  display: block;
}

.gdc-pg *:last-child {
  margin-bottom: 0;
}

/* Full-bleed page shell — page headers run edge-to-edge like the footer */
#primary.gdc-standard-page,
#primary.gdc-standard-page--hero {
  max-width: 100%;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
}

.gdc-section {
  padding: var(--gdc-section-gap) var(--gdc-container-pad);
}

.gdc-section--white { background-color: var(--gdc-white); }
.gdc-section--surface { background-color: var(--gdc-surface); }
.gdc-section--tight { padding-top: 0; }
.gdc-section--flush-top { padding-top: 0; }

.gdc-wrap {
  max-width: var(--gdc-container-max);
  margin: 0 auto;
}

.gdc-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.gdc-section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gdc-sec-title {
  font-family: var(--gdc-font-heading);
  font-size: var(--gdc-text-h3);
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-navy-900);
  margin: 0;
}

.gdc-sec-kicker {
  display: block;
  font-size: 0.7rem;
  font-weight: var(--gdc-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gdc-gold-600);
  margin-bottom: 0.4rem;
}

.gdc-sec-link {
  font-size: 0.78rem;
  font-weight: var(--gdc-weight-semibold);
  color: var(--gdc-blue-600);
  text-decoration: none;
  white-space: nowrap;
}

.gdc-sec-link:hover { color: var(--gdc-navy-700); }

.gdc-sec-intro {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--gdc-ink-light);
  max-width: 900px;
  margin-bottom: 2rem;
}

.gdc-sec-intro:last-child { margin-bottom: 0; }

/* ==========================================================================
   2. HERO (four mockup variants)
   ========================================================================== */

.gdc-hero {
  position: relative;
  overflow: hidden;
  color: var(--gdc-white);
  background: linear-gradient(115deg, #071A3A 0%, var(--gdc-navy-900) 42%, var(--gdc-navy-700) 100%);
}

.gdc-hero-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}

.gdc-hero-art svg {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
}

.gdc-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--gdc-container-max);
  margin: 0 auto;
  padding: clamp(2.75rem, 6vw, 4.5rem) var(--gdc-container-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem;
  align-items: center;
}

.gdc-hero-copy { min-width: 0; }

.gdc-hero-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: var(--gdc-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gdc-gold-500);
  margin-bottom: 0.75rem;
}

.gdc-hero-title {
  color: var(--gdc-white);
  font-weight: var(--gdc-weight-bold);
  font-size: var(--gdc-text-h1);
  line-height: 1.12;
  margin-bottom: 0.85rem;
}

.gdc-hero-title .gdc-highlight { color: var(--gdc-gold-500); }

.gdc-hero-lead {
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: var(--gdc-weight-semibold);
  color: var(--gdc-white);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.gdc-hero-sub {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #C7D5EA;
  max-width: 640px;
  margin-bottom: 1.75rem;
}

.gdc-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.gdc-hero-tagline {
  font-family: var(--gdc-font-heading);
  text-align: right;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: var(--gdc-weight-semibold);
  letter-spacing: 0.14em;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.85);
  border-right: 3px solid var(--gdc-gold-500);
  padding-right: 1rem;
  align-self: center;
}

.gdc-hero-tagline strong {
  display: block;
  color: var(--gdc-gold-500);
  font-weight: var(--gdc-weight-bold);
}

@media (max-width: 860px) {
  .gdc-hero-inner {
    grid-template-columns: 1fr;
  }

  .gdc-hero-tagline {
    text-align: left;
    border-right: 0;
    border-left: 3px solid var(--gdc-gold-500);
    padding-right: 0;
    padding-left: 1rem;
    font-size: 0.75rem;
    line-height: 1.7;
  }
}

/* ==========================================================================
   3. GRIDS
   ========================================================================== */

.gdc-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--gdc-cell, 240px), 1fr));
}

.gdc-grid--2 { --gdc-cell: 300px; }
.gdc-grid--3 { --gdc-cell: 260px; }
.gdc-grid--4 { --gdc-cell: 210px; }
.gdc-grid--5 { --gdc-cell: 175px; }
.gdc-grid--6 { --gdc-cell: 150px; }
.gdc-grid--mini { --gdc-cell: 115px; gap: 0.85rem; }
.gdc-grid--card3 { --gdc-cell: 185px; gap: 1rem; }
.gdc-grid--mini6 { --gdc-cell: 92px; gap: 0.75rem; }

.gdc-cols--mock {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 2rem;
}

@media (max-width: 900px) {
  .gdc-cols--mock {
    grid-template-columns: 1fr;
  }
}

/* Inside the mockup's split rows, keep counts on the mockup grid:
   4 audience tiles, 6 service icons (3 x 2) and 3 cards per row. */
@media (min-width: 901px) {
  .gdc-cols--mock .gdc-grid--mini {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gdc-cols--mock .gdc-grid--mini6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gdc-cols--mock .gdc-grid--card3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.gdc-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: start;
}

.gdc-cols--wide-left {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.gdc-cols--wide-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

@media (max-width: 767px) {
  .gdc-cols--wide-left,
  .gdc-cols--wide-right {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   4. ICON TILES  (Home "Who We Serve" / pathways)
   ========================================================================== */

.gdc-tile {
  background-color: var(--gdc-white);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-lg);
  box-shadow: var(--gdc-shadow-sm);
  padding: 1.4rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
  text-decoration: none;
  transition: transform var(--gdc-transition-normal), box-shadow var(--gdc-transition-normal);
}

.gdc-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--gdc-shadow-hover);
  border-color: var(--gdc-gold-100);
}

.gdc-tile-icon {
  width: 48px;
  height: 48px;
  color: var(--gdc-gold-500);
  display: grid;
  place-items: center;
}

.gdc-tile-icon svg { width: 34px; height: 34px; }

.gdc-tile-title {
  font-family: var(--gdc-font-heading);
  font-size: 0.88rem;
  font-weight: var(--gdc-weight-semibold);
  color: var(--gdc-navy-900);
  margin: 0;
  line-height: 1.35;
}

.gdc-tile-text {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--gdc-muted);
  margin: 0;
}

.gdc-tile .gdc-btn-circle-arrow { margin-top: auto; }

/* ==========================================================================
   5. SERVICE ICON ROW (Home "Our Core Services")
   ========================================================================== */

.gdc-svc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  text-decoration: none;
  padding: 0.5rem 0.25rem;
}

.gdc-svc-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--gdc-radius-md);
  background: var(--gdc-gold-50);
  border: 1px solid var(--gdc-gold-100);
  color: var(--gdc-gold-500);
  display: grid;
  place-items: center;
}

.gdc-svc-icon svg { width: 24px; height: 24px; }

.gdc-svc-label {
  font-size: 0.76rem;
  font-weight: var(--gdc-weight-semibold);
  color: var(--gdc-navy-900);
  line-height: 1.35;
}

.gdc-svc:hover .gdc-svc-label { color: var(--gdc-blue-600); }

/* ==========================================================================
   6. ICON BOXES (About "Who We Are / Our Story / Mission / Vision / Values")
   ========================================================================== */

.gdc-ibox {
  display: flex;
  gap: 1rem;
  background-color: var(--gdc-white);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--gdc-shadow-xs);
  transition: box-shadow var(--gdc-transition-normal), transform var(--gdc-transition-normal);
}

.gdc-ibox:hover {
  box-shadow: var(--gdc-shadow-md);
  transform: translateY(-3px);
}

.gdc-ibox-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: var(--gdc-radius-md);
  background: var(--gdc-gold-50);
  border: 1px solid var(--gdc-gold-100);
  color: var(--gdc-gold-500);
  display: grid;
  place-items: center;
}

.gdc-ibox-icon svg { width: 26px; height: 26px; }

.gdc-ibox-body { min-width: 0; }

.gdc-ibox-title {
  font-family: var(--gdc-font-heading);
  font-size: 1.02rem;
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-navy-900);
  margin: 0 0 0.4rem;
}

.gdc-ibox-text {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--gdc-muted);
  margin: 0;
}

.gdc-ibox-text + .gdc-ibox-text { margin-top: 0.75rem; }

/* ==========================================================================
   7. CHECKLISTS
   ========================================================================== */

.gdc-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.gdc-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gdc-ink);
}

.gdc-check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background-color: var(--gdc-gold-500);
  color: var(--gdc-navy-900);
  display: grid;
  place-items: center;
}

.gdc-check svg { width: 12px; height: 12px; }

.gdc-check--gold { background-color: var(--gdc-gold-500); color: var(--gdc-navy-900); }

.gdc-check--blue,
.gdc-check--green { background-color: var(--gdc-gold-500); color: var(--gdc-navy-900); }

/* Plain bullet list (document copy) */
.gdc-ul {
  margin: 0 0 1.5rem;
  padding-left: 1.15rem;
  color: var(--gdc-ink);
}

.gdc-ul li {
  margin-bottom: 0.55rem;
  line-height: 1.7;
}

.gdc-ul li::marker { color: var(--gdc-gold-500); }

/* ==========================================================================
   8. OPPORTUNITY / INSIGHT CARDS
   ========================================================================== */

.gdc-opp {
  background-color: var(--gdc-white);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-lg);
  overflow: hidden;
  box-shadow: var(--gdc-shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--gdc-transition-normal), box-shadow var(--gdc-transition-normal);
}

.gdc-opp:hover {
  transform: translateY(-4px);
  box-shadow: var(--gdc-shadow-hover);
}

.gdc-opp-media {
  position: relative;
  height: 150px;
  background-color: var(--gdc-surface-2);
  overflow: hidden;
}

.gdc-opp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gdc-opp-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

.gdc-opp-badge .gdc-status-badge {
  white-space: normal;
  max-width: 100%;
}

.gdc-opp-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.gdc-opp-title {
  font-family: var(--gdc-font-heading);
  font-size: 0.95rem;
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-navy-900);
  margin: 0;
  line-height: 1.4;
}

.gdc-opp-meta {
  font-size: 0.72rem;
  color: var(--gdc-muted);
  margin: 0;
}

.gdc-opp-foot {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}

.gdc-opp-foot .gdc-sec-link { font-size: 0.74rem; }

/* ==========================================================================
   9. HIGHLIGHT BAND (About "Why GDC Matters")
   ========================================================================== */

.gdc-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(200px, 300px);
  gap: 1.75rem;
  align-items: center;
  background: linear-gradient(120deg, var(--gdc-navy-900), var(--gdc-navy-700));
  border-radius: var(--gdc-radius-xl);
  padding: 2rem;
  color: var(--gdc-white);
  box-shadow: var(--gdc-shadow-lg);
}

.gdc-band-icon {
  width: 58px;
  height: 58px;
  border-radius: var(--gdc-radius-lg);
  background: rgba(201, 154, 30, 0.16);
  border: 1px solid rgba(201, 154, 30, 0.45);
  color: var(--gdc-gold-500);
  display: grid;
  place-items: center;
}

.gdc-band-icon svg { width: 30px; height: 30px; }

.gdc-band-title {
  font-family: var(--gdc-font-heading);
  font-size: 1.25rem;
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-white);
  margin: 0 0 0.5rem;
}

.gdc-band-text {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #C7D5EA;
  margin: 0;
}

.gdc-band-media {
  border-radius: var(--gdc-radius-lg);
  overflow: hidden;
  height: 160px;
}

.gdc-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .gdc-band {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .gdc-band-media { height: 190px; }
}

/* ==========================================================================
   10. PROFILE BLOCK (Leadership)
   ========================================================================== */

.gdc-profile {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  background: var(--gdc-white);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--gdc-shadow-md);
}

.gdc-profile-figure {
  margin: 0;
  text-align: center;
}

.gdc-profile-avatar {
  --gdc-avatar-w: clamp(170px, 100%, 230px);
  width: var(--gdc-avatar-w);
  max-width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--gdc-surface-2);
  border: 5px solid var(--gdc-gold-100);
  display: grid;
  place-items: center;
  padding: 1.1rem;
  color: var(--gdc-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  overflow: hidden;
}

.gdc-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.gdc-profile-avatar .gdc-avatar-ph {
  width: 62%;
  height: auto;
  color: #5A6472;
}

.gdc-profile-figcaption {
  font-size: 0.72rem;
  color: var(--gdc-muted);
  margin-top: 0.7rem;
}

.gdc-profile-name {
  font-family: var(--gdc-font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-navy-900);
  margin: 0 0 0.35rem;
}

.gdc-profile-role {
  font-size: 0.98rem;
  font-weight: var(--gdc-weight-semibold);
  color: var(--gdc-navy-700);
  margin: 0 0 1rem;
}

.gdc-profile-bio {
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--gdc-ink);
  margin-bottom: 1.25rem;
}

.gdc-profile-bio:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .gdc-profile {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   11. GOVERNANCE PILLARS
   ========================================================================== */

.gdc-pillar {
  background: var(--gdc-white);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-lg);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--gdc-shadow-xs);
  transition: transform var(--gdc-transition-normal), box-shadow var(--gdc-transition-normal);
}

.gdc-pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--gdc-shadow-md);
}

.gdc-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--gdc-radius-md);
  background: var(--gdc-gold-50);
  border: 1px solid var(--gdc-gold-100);
  color: var(--gdc-gold-500);
  display: grid;
  place-items: center;
  margin-bottom: 0.9rem;
}

.gdc-pillar-icon svg { width: 24px; height: 24px; }

.gdc-pillar-title {
  font-family: var(--gdc-font-heading);
  font-size: 1rem;
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-navy-900);
  margin: 0 0 0.45rem;
}

.gdc-pillar-text {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--gdc-muted);
  margin: 0;
}

/* ==========================================================================
   12. STATUS DEFINITIONS (Governance)
   ========================================================================== */

.gdc-statusdefs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gdc-statusdef {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  background: var(--gdc-white);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-md);
  padding: 0.7rem 1rem;
}

.gdc-statusdef p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--gdc-muted);
}

@media (max-width: 600px) {
  .gdc-statusdef {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    align-items: start;
  }
}

/* Framework panel */
.gdc-panel {
  background: var(--gdc-white);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--gdc-shadow-sm);
}

.gdc-panel-title {
  font-family: var(--gdc-font-heading);
  font-size: 1.05rem;
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-navy-900);
  margin: 0 0 1rem;
}

.gdc-panel-media {
  margin-top: 1.25rem;
  height: 150px;
  border-radius: var(--gdc-radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, var(--gdc-gold-50), var(--gdc-gold-100));
  display: grid;
  place-items: center;
  color: var(--gdc-gold-600);
}

.gdc-panel-media svg { width: 96px; height: 96px; }

/* ==========================================================================
   13. ECOSYSTEM STRIP & CHIPS
   ========================================================================== */

.gdc-ecosystem {
  background: linear-gradient(120deg, var(--gdc-navy-900) 0%, var(--gdc-navy-700) 100%);
  border-radius: var(--gdc-radius-xl);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  color: var(--gdc-white);
  box-shadow: var(--gdc-shadow-lg);
}

.gdc-ecosystem-title {
  font-family: var(--gdc-font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-white);
  margin: 0 0 0.5rem;
}

.gdc-ecosystem-text {
  color: #C7D5EA;
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}

.gdc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.gdc-chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #E7EFFA;
  border-radius: var(--gdc-radius-pill);
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: var(--gdc-weight-medium);
}

/* ==========================================================================
   14. NOTE / DISCLAIMER / TRUST BOXES
   ========================================================================== */

.gdc-note {
  background: var(--gdc-surface);
  border-left: 4px solid var(--gdc-gold-500);
  border-radius: var(--gdc-radius-md);
  padding: 1.35rem 1.5rem;
}

.gdc-note--blue {
  background: var(--gdc-blue-50);
  border-left-color: var(--gdc-blue-600);
}

.gdc-note--amber {
  background: var(--gdc-amber-100);
  border-left-color: var(--gdc-amber-500);
}

.gdc-note-title {
  font-family: var(--gdc-font-heading);
  font-size: 0.98rem;
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-navy-700);
  margin: 0 0 0.5rem;
}

.gdc-note p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--gdc-ink-light);
  margin: 0 0 0.75rem;
}

.gdc-note p:last-child { margin-bottom: 0; }

.gdc-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  background: var(--gdc-gold-50);
  border: 1px solid var(--gdc-gold-100);
  border-radius: var(--gdc-radius-lg);
  padding: 1.35rem 1.5rem;
}

.gdc-trust-strip p {
  margin: 0;
  flex: 1 1 320px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--gdc-ink-light);
}

.gdc-trust-strip strong { color: var(--gdc-navy-900); }

.gdc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ==========================================================================
   15. CTA BAND
   ========================================================================== */

.gdc-cta-band {
  background: linear-gradient(120deg, var(--gdc-navy-900), var(--gdc-navy-700));
  border-radius: var(--gdc-radius-xl);
  padding: clamp(2.25rem, 5vw, 3.25rem);
  text-align: center;
  color: var(--gdc-white);
  box-shadow: var(--gdc-shadow-lg);
}

.gdc-cta-title {
  font-family: var(--gdc-font-heading);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-white);
  margin: 0 0 0.75rem;
}

.gdc-cta-text {
  color: #C7D5EA;
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 1.75rem;
}

.gdc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ==========================================================================
   16. PROSE (document copy blocks)
   ========================================================================== */

.gdc-prose {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gdc-ink);
}

.gdc-prose p { margin-bottom: 1.15rem; }

.gdc-prose h2 {
  font-size: var(--gdc-text-h3);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.gdc-prose h3 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.gdc-subhead {
  font-family: var(--gdc-font-heading);
  font-size: 1.08rem;
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-navy-900);
  margin: 2rem 0 0.75rem;
}

.gdc-subhead:first-child { margin-top: 0; }

/* Contact / definition rows */
.gdc-rows {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.gdc-row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--gdc-white);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-md);
  padding: 1rem 1.15rem;
}

.gdc-row-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: var(--gdc-radius-md);
  background: var(--gdc-gold-50);
  color: var(--gdc-gold-500);
  display: grid;
  place-items: center;
}

.gdc-row-icon svg { width: 20px; height: 20px; }

.gdc-row strong {
  display: block;
  font-size: 0.92rem;
  color: var(--gdc-navy-900);
  margin-bottom: 0.15rem;
}

.gdc-row span,
.gdc-row p {
  font-size: 0.87rem;
  color: var(--gdc-muted);
  line-height: 1.6;
  margin: 0;
}

/* Site map link columns */
.gdc-link-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.5rem;
}

.gdc-link-col h3 {
  font-size: 0.95rem;
  color: var(--gdc-navy-900);
  margin: 0 0 0.75rem;
}

.gdc-link-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gdc-link-col li { margin-bottom: 0.5rem; }

.gdc-link-col a {
  font-size: 0.88rem;
  color: var(--gdc-blue-600);
  text-decoration: none;
}

.gdc-link-col a:hover { color: var(--gdc-gold-600); }

/* ==========================================================================
   18. SELECTABLE CHIPS (Enquiry Selector / Ecosystem / Delivery Formats)
   ========================================================================== */

button.gdc-chip {
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color var(--gdc-transition-normal), border-color var(--gdc-transition-normal), color var(--gdc-transition-normal), transform var(--gdc-transition-normal);
}

button.gdc-chip:hover {
  border-color: var(--gdc-gold-500);
  color: var(--gdc-white);
  transform: translateY(-1px);
}

button.gdc-chip:focus-visible {
  outline: 2px solid var(--gdc-gold-500);
  outline-offset: 2px;
}

button.gdc-chip.is-selected,
button.gdc-chip[aria-pressed='true'] {
  background: var(--gdc-gold-500);
  border-color: var(--gdc-gold-500);
  color: var(--gdc-navy-900);
  font-weight: var(--gdc-weight-semibold);
  box-shadow: var(--gdc-shadow-sm);
}

.gdc-chips-hint {
  display: block;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.75rem;
}

/* ==========================================================================
   19. FORMS (handover Section 3C)
   ========================================================================== */

.gdc-form-card {
  background: var(--gdc-white);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--gdc-shadow-md);
  max-width: 940px;
}

.gdc-form-card[hidden] { display: none; }

.gdc-form-title {
  font-family: var(--gdc-font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-navy-900);
  margin: 0 0 0.5rem;
}

.gdc-form-intro {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gdc-muted);
  margin: 0 0 1.75rem;
}

.gdc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
}

.gdc-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.gdc-field--full { grid-column: 1 / -1; }

.gdc-field[hidden] { display: none; }

.gdc-field > label,
.gdc-field-label {
  font-size: 0.82rem;
  font-weight: var(--gdc-weight-semibold);
  color: var(--gdc-navy-700);
}

.gdc-field > label span.req { color: var(--gdc-gold-600); }

.gdc-field input[type='text'],
.gdc-field input[type='email'],
.gdc-field input[type='tel'],
.gdc-field input[type='url'],
.gdc-field input[type='number'],
.gdc-field select,
.gdc-field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  color: var(--gdc-ink);
  background: var(--gdc-white);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-md);
  padding: 0.65rem 0.8rem;
  transition: border-color var(--gdc-transition-normal), box-shadow var(--gdc-transition-normal);
}

.gdc-field textarea { min-height: 110px; resize: vertical; }

.gdc-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F3A66' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2rem;
}

.gdc-field input:focus,
.gdc-field select:focus,
.gdc-field textarea:focus {
  outline: none;
  border-color: var(--gdc-gold-500);
  box-shadow: 0 0 0 3px rgba(201, 154, 30, 0.18);
}

.gdc-field-hint {
  font-size: 0.75rem;
  color: var(--gdc-muted);
  line-height: 1.5;
  margin: 0;
}

.gdc-field.has-error input,
.gdc-field.has-error select,
.gdc-field.has-error textarea {
  border-color: #C62828;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}

.gdc-field-error {
  font-size: 0.75rem;
  font-weight: var(--gdc-weight-semibold);
  color: #C62828;
}

/* Checkbox / radio option groups */
.gdc-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gdc-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: var(--gdc-ink);
  background: var(--gdc-surface);
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-pill);
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: background-color var(--gdc-transition-normal), border-color var(--gdc-transition-normal);
}

.gdc-options label:hover { border-color: var(--gdc-gold-500); }

.gdc-options input { accent-color: var(--gdc-gold-500); margin: 0; }

.gdc-options input:checked + span { font-weight: var(--gdc-weight-semibold); color: var(--gdc-navy-900); }

.gdc-options label:has(input:checked) {
  background: var(--gdc-gold-50);
  border-color: var(--gdc-gold-500);
}

/* Consent (clear consent, Section 3C) */
.gdc-consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  background: var(--gdc-gold-50);
  border: 1px solid var(--gdc-gold-100);
  border-radius: var(--gdc-radius-md);
  padding: 0.9rem 1rem;
}

.gdc-consent input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gdc-gold-600);
  flex: 0 0 auto;
}

.gdc-consent label {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gdc-ink);
}

.gdc-consent a { color: var(--gdc-blue-600); }

.gdc-consent.has-error { border-color: #C62828; background: #FDECEC; }

/* Honeypot — positioned off-screen (never displayed to people). */
.gdc-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  height: 0;
  width: 0;
  overflow: hidden;
}

.gdc-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.gdc-form-status {
  font-size: 0.85rem;
  color: var(--gdc-navy-700);
}

.gdc-form-status.is-error { color: #C62828; font-weight: var(--gdc-weight-semibold); }

.gdc-form-actions button[disabled] { opacity: 0.65; cursor: wait; }

/* Confirmation panel */
.gdc-form-success {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--gdc-gold-50);
  border: 1px solid var(--gdc-gold-100);
  border-left: 4px solid var(--gdc-gold-500);
  border-radius: var(--gdc-radius-lg);
  padding: 1.5rem 1.75rem;
  max-width: 940px;
}

.gdc-form-success svg {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--gdc-gold-600);
  background: var(--gdc-white);
  border: 2px solid var(--gdc-gold-500);
  border-radius: 50%;
  padding: 0.3rem;
}

.gdc-form-success h3 {
  font-family: var(--gdc-font-heading);
  font-size: 1.1rem;
  color: var(--gdc-navy-900);
  margin: 0 0 0.4rem;
}

.gdc-form-success p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--gdc-ink);
  margin: 0 0 0.4rem;
}

.gdc-form-success-ref { font-size: 0.85rem; color: var(--gdc-muted); }

.gdc-form-success-ref strong { color: var(--gdc-navy-900); letter-spacing: 0.04em; }

@media (max-width: 767px) {
  .gdc-form-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   20. MAP (Google Maps embed — Contact page)
   ========================================================================== */

.gdc-map {
  max-width: 960px;
}

.gdc-map-title {
  font-family: var(--gdc-font-heading);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: var(--gdc-weight-bold);
  color: var(--gdc-navy-900);
  margin: 0 0 1rem;
}

.gdc-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  border: 1px solid var(--gdc-line);
  border-radius: var(--gdc-radius-xl);
  overflow: hidden;
  background: var(--gdc-surface);
  box-shadow: var(--gdc-shadow-md);
}

.gdc-map-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.gdc-map-caption {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gdc-muted);
  margin: 0.85rem 0 0;
}

.gdc-map-caption a {
  color: var(--gdc-blue-600);
  font-weight: var(--gdc-weight-semibold);
  white-space: nowrap;
}

.gdc-map-caption a:hover { color: var(--gdc-gold-600); }

@media (max-width: 767px) {
  .gdc-map-frame { aspect-ratio: 4 / 3; max-height: none; }
}

/* ============================================================
   Membership pages (GDC Membership — Phase 6)
   Account portal, checkout picker and checkout form.
   ============================================================ */

.gdc-checkout-wrap,
.gdc-account-wrap {
  min-height: 55vh;
}

.gdc-checkout-heading {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  margin: 0 0 1.35rem;
  color: var(--gdc-navy-900);
}

.gdc-checkout {
  max-width: 860px;
}

.gdc-checkout__title {
  margin-top: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

.gdc-checkout-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2.5rem;
  padding: 0.85rem 1.1rem;
  margin: 1rem 0 1.5rem;
  background: var(--gdc-surface);
  border-radius: var(--gdc-radius-md);
}

.gdc-checkout-summary p { margin: 0; }

.gdc-checkout-summary__label { color: var(--gdc-muted); }

.gdc-checkout-levels {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.gdc-checkout-level {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.6rem;
}

.gdc-checkout-level__name {
  margin: 0;
  font-size: 1.35rem;
}

.gdc-checkout-level__price { margin: 0; }
.gdc-checkout-level__price strong { color: var(--gdc-navy-900); }

.gdc-checkout-level__desc {
  margin: 0 0 0.75rem;
  color: var(--gdc-muted);
  flex: 1 0 auto;
}

.gdc-checkout-level .gdc-btn { width: 100%; }

.gdc-discount-field { margin-top: 1.25rem; }

.gdc-discount-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.gdc-discount-row input { flex: 1; }

.gdc-discount-row .gdc-btn { white-space: nowrap; }

.gdc-field__hint.is-success { color: var(--gdc-green-700, #067647); font-weight: 500; }
.gdc-field__hint.is-error   { color: var(--gdc-red-700, #b42318); font-weight: 500; }

.gdc-gateways {
  border: 0;
  padding: 0;
  margin: 1.5rem 0;
}

.gdc-gateways legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-weight: var(--gdc-weight-semibold);
}

.gdc-gateway-option {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.2rem;
  cursor: pointer;
}

.gdc-gateway-option input { width: auto; }

.gdc-field--checkbox { margin-top: 1rem; }
.gdc-field--checkbox label { display: flex; gap: 0.55rem; align-items: flex-start; cursor: pointer; }
.gdc-field--checkbox input { width: auto; margin-top: 0.2rem; }
.gdc-field--checkbox a { color: var(--gdc-blue-700, #175cd3); font-weight: 600; }

.gdc-checkout-error { display: none; }

.gdc-checkout-error.is-visible {
  display: block;
  margin: 1.1rem 0;
  padding: 0.8rem 1rem;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: var(--gdc-radius-md);
  color: #b42318;
  font-weight: 500;
}

.gdc-checkout-submit { margin-top: 0.6rem; min-width: 230px; }

.gdc-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  margin-bottom: 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--gdc-radius-md);
}

.gdc-notice--success { background: #ecfdf3; border-color: #abefc6; color: #05603a; }
.gdc-notice--info    { background: #eff8ff; border-color: #b2ddff; color: #175cd3; }

.gdc-notice a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.gdc-checkout-already {
  max-width: 760px;
  padding: 2.25rem;
}

.gdc-checkout-already h1 { margin-top: 0; }
.gdc-checkout-already .gdc-btn { margin-top: 0.75rem; }

.gdc-checkout-empty {
  padding: 1.5rem;
  background: var(--gdc-surface);
  border-radius: var(--gdc-radius-md);
}

.gdc-account-login-notice {
  max-width: 560px;
  margin: 0 auto;
  padding: 2.5rem;
  text-align: center;
  background: var(--gdc-surface);
  border-radius: var(--gdc-radius-xl);
}

.gdc-account-login-notice h2 { margin-top: 0; }

@media (max-width: 767px) {
  .gdc-checkout-levels { grid-template-columns: 1fr; }
  .gdc-discount-row { flex-direction: column; align-items: stretch; }
  .gdc-checkout-submit { width: 100%; }
}

/* Apply-discount button (form-safe variant — .gdc-btn-outline is white-on-hero). */
.gdc-apply-btn {
  background-color: var(--gdc-white, #fff);
  color: var(--gdc-navy-800, #0b2545);
  border-color: var(--gdc-navy-300, #b9c6d8);
}

.gdc-apply-btn:hover,
.gdc-apply-btn:focus {
  background-color: var(--gdc-surface);
  border-color: var(--gdc-navy-600, #274C77);
}

.gdc-apply-btn:disabled { opacity: 0.6; cursor: wait; }