/* ==========================================================================
   CHINA EVERBRIGHT BANK EUROPE S.A. - OFFICIAL DESIGN SYSTEM
   Bespoke European-Asian Corporate Banking Aesthetic
   ========================================================================== */

:root {
  /* Brand Palette */
  --ceb-blue-dark: #041B4D;
  --ceb-blue-primary: #0A287E;
  --ceb-blue-medium: #17559F;
  --ceb-blue-light: #04A2DE;
  --ceb-blue-subtle: #EEF4FC;
  --ceb-blue-glow: rgba(4, 162, 222, 0.18);

  --ceb-gold-primary: #CF9520;
  --ceb-gold-light: #F5C558;
  --ceb-gold-dark: #A47007;
  --ceb-gold-subtle: #FCF8ED;

  /* Neutrals & Surfaces */
  --color-bg: #FBFCFE;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F4F8FD;
  /* Alternating section band. Referenced by several pages but previously
     undefined, which left those bands with no background at all. */
  --color-surface-alt: #F6FAFE;
  --color-border: #DCE4EF;
  --color-border-light: #ECF2F9;
  
  --color-text-main: #101B2E;
  --color-text-muted: #4E5B70;
  --color-text-light: #8291A8;
  
  --color-dark-surface: #03102E;
  --color-dark-border: #133061;
  --color-dark-text: #E9F1FA;
  --color-dark-muted: #93A9C9;

  /* Feedback & Accents */
  --color-success: #178351;
  --color-success-bg: #E8F7EE;
  --color-info: #1976D2;
  --color-info-bg: #E3F2FD;
  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;
  
  /* Typography */
  --font-display: 'Cinzel', 'Playfair Display', 'Georgia', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Layout & Elevations */
  --max-width: 1280px;
  --container-pad: clamp(1rem, 3.5vw, 2.5rem);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  
  --shadow-sm: 0 2px 8px rgba(6, 26, 72, 0.04);
  --shadow-md: 0 8px 24px rgba(6, 26, 72, 0.07);
  --shadow-lg: 0 16px 40px rgba(6, 26, 72, 0.11);
  --shadow-glow: 0 0 35px rgba(207, 149, 32, 0.22);
  
  --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  color: var(--color-text-main);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  width: 100%;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Anchored sections must clear the sticky header when jumped to */
section[id], div[id^="fx-"] {
  scroll-margin-top: 92px;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section-pad {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.section-pad-sm {
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}

/* Typography Utilities */
.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ceb-gold-primary);
  margin-bottom: 0.65rem;
}

.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--ceb-gold-primary);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.24;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.85rem;
}

.section-desc {
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  color: var(--color-text-muted);
  max-width: 680px;
  line-height: 1.65;
}

/* ==========================================================================
   TOP NOTIFICATION BAR
   ========================================================================== */

.top-bar {
  background: var(--ceb-blue-dark);
  color: #DCEAF8;
  font-size: 0.775rem;
  padding-block: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.top-bar-info {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.top-bar-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ceb-gold-light);
  font-weight: 600;
}

.top-bar-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.lang-selector {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  color: #FFF;
  cursor: pointer;
}

.lang-selector a {
  color: #FFF;
  font-weight: 600;
}

.lang-selector a:hover {
  color: var(--ceb-gold-light);
  text-decoration: underline;
}

/* The current language is text, not a link, so it needs no hover affordance. */
.lang-selector .lang-current {
  color: var(--ceb-gold-light);
  font-weight: 700;
}

/* ==========================================================================
   PRIMARY HEADER & NAVIGATION (FIXED OVERFLOW & BALANCED LAYOUT)
   ========================================================================== */

.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-fast);
  width: 100%;
}

.main-header.scrolled {
  box-shadow: var(--shadow-md);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding-block: 0.4rem;
  gap: clamp(0.75rem, 1.8vw, 2rem);
  width: 100%;
  min-width: 0;
}

/* Official Logo Brand System (Emblem + Side Text) */
.brand-logo-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
  max-width: 372px;
}

/* Centre zone absorbs the remaining space so the nav never pushes the
   Client Portal button outside the container. */
.primary-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.brand-official-logo {
  height: 58px;
  width: auto;
  max-width: 148px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-title-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.brand-title-zh {
  font-family: 'Cinzel', 'Playfair Display', 'PingFang SC', serif, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  letter-spacing: 0.08em;
}

.brand-title-en {
  font-family: 'Cinzel', 'Trajan Pro', 'Montserrat', serif, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-main);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.brand-subtitle-eu {
  font-size: 0.575rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Nav links: compact and nicely spaced.
   Wrapping rather than nowrap is deliberate. The eight labels are set in
   whichever language the visitor picked, and the French and Italian sets run
   roughly a third wider than the English one: with nowrap the list could not
   shrink, so it overflowed its box and ran underneath the Client Portal
   button. Wrapping costs a taller header row in a narrow band of widths, which
   is a far better failure than two controls sharing the same pixels. */
.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: clamp(0.5rem, 1.35vw, 1.4rem);
  flex-wrap: wrap;
  row-gap: 0.15rem;
  min-width: 0;
}

.nav-caret {
  opacity: 0.55;
  transition: transform var(--transition-fast);
}

.has-dropdown:hover .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-item {
  position: relative;
}

.nav-link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-main);
  padding: 0.45rem 0.2rem;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.nav-link:hover, .nav-link.active {
  color: var(--ceb-blue-primary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--ceb-gold-primary);
  border-radius: 2px;
}

/* Dropdown Navigation */
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 268px;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  z-index: 100;
  list-style: none;
}

.dropdown-link {
  display: block;
  padding: 0.55rem 0.85rem;
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--color-text-main);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.dropdown-link:hover {
  background: var(--ceb-blue-subtle);
  color: var(--ceb-blue-primary);
  padding-left: 1.05rem;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.btn-portal-login {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, var(--ceb-blue-primary) 0%, var(--ceb-blue-dark) 100%);
  color: #FFFFFF;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(10, 40, 126, 0.2);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-portal-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(10, 40, 126, 0.35);
  background: var(--ceb-blue-dark);
}

.mobile-toggle {
  display: none;
  font-size: 1.5rem;
  color: var(--ceb-blue-dark);
  padding: 0.35rem;
}

/* Drawer-only furniture. Both are injected by main.js for the mobile drawer
   and stay out of the document entirely on the horizontal nav. */
.nav-portal-item,
.nav-scrim {
  display: none;
}

/* Button System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  text-align: center;
  cursor: pointer;
  /* Labels wrap instead of running past the button edge. A nowrap label in a
     width-constrained button (a full-width button in a card, or a grid column)
     cannot shrink, and because the content is centred it then spills equally
     over BOTH edges — printing itself on top of whatever sits beside the
     button. The French and Italian labels are the long ones, so that is where
     it showed. An auto-width button is unaffected: there is no narrower box to
     wrap into, so it still sets on one line. */
  white-space: normal;
  text-wrap: balance;
}

.btn-primary {
  background: var(--ceb-blue-primary);
  color: #FFFFFF;
  box-shadow: 0 3px 12px rgba(10, 40, 126, 0.25);
}

.btn-primary:hover {
  background: var(--ceb-blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10, 40, 126, 0.35);
}

.btn-gold {
  background: var(--ceb-gold-primary);
  color: #FFFFFF;
  box-shadow: 0 3px 12px rgba(207, 149, 32, 0.25);
}

.btn-gold:hover {
  background: var(--ceb-gold-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(207, 149, 32, 0.35);
}

.btn-outline {
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
  background: #FFFFFF;
}

.btn-outline:hover {
  border-color: var(--ceb-blue-primary);
  color: var(--ceb-blue-primary);
  background: var(--ceb-blue-subtle);
}

.btn-outline-white {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

.btn-outline-white:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
}

.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero-section {
  position: relative;
  background: linear-gradient(135deg, #031029 0%, #082B6D 50%, #020B22 100%);
  color: #FFFFFF;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
  width: 100%;
}

.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: radial-gradient(#F5C558 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  right: -100px;
  top: -100px;
  background: radial-gradient(circle, rgba(207, 149, 32, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(245, 197, 88, 0.3);
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--ceb-gold-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.16;
  margin-bottom: 1.2rem;
  color: #FFFFFF;
}

.hero-title span {
  color: var(--ceb-gold-light);
}

/* Sits between the brand H1 and the descriptive paragraph, so the marketing
   line keeps its prominence without occupying the heading. */
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 600;
  color: var(--ceb-gold-light);
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin-bottom: 1.1rem;
}

.hero-subtitle {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: #D6E5F5;
  line-height: 1.65;
  margin-bottom: 1.25rem;
  max-width: 580px;
}

.hero-subtitle strong {
  color: #FFFFFF;
  font-weight: 700;
}

.hero-lang-note {
  font-size: 0.875rem;
  color: #B9CFE8;
  margin-bottom: 1.75rem;
}

.hero-lang-note a {
  color: var(--ceb-gold-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.hero-accreditations {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.25rem;
  font-size: 0.8125rem;
  color: #B8CADF;
  flex-wrap: wrap;
}

.accred-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Hero Market Card */
.hero-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hero-card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
}

.hero-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.2rem;
}

.hero-card-subtitle {
  font-size: 0.775rem;
  color: #A6BAD6;
}

.rate-ticker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 0.55rem;
  font-size: 0.825rem;
}

.rate-pair {
  font-weight: 700;
  color: var(--ceb-gold-light);
}

.rate-val {
  font-family: var(--font-mono);
  color: #FFF;
}

.rate-change {
  font-size: 0.75rem;
  font-weight: 600;
  color: #81C784;
}

/* ==========================================================================
   METRICS BAR
   ========================================================================== */

.metrics-strip {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: 2.25rem;
  margin-top: -1.5rem;
  position: relative;
  z-index: 10;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.03);
  width: 100%;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.metric-card {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--ceb-blue-primary);
}

.metric-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.metric-num span {
  color: var(--ceb-gold-primary);
}

.metric-label {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 0.15rem;
}

.metric-sub {
  font-size: 0.725rem;
  color: var(--color-text-light);
}

/* ==========================================================================
   CORE SERVICES GRID
   ========================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--ceb-blue-primary), var(--ceb-gold-primary));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(10, 40, 126, 0.25);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--ceb-blue-subtle);
  color: var(--ceb-blue-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.service-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.65rem;
}

.service-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
  flex-grow: 1;
  line-height: 1.6;
}

.service-card-features {
  list-style: none;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-main);
}

.service-card-features li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.service-card-features svg {
  color: var(--ceb-gold-primary);
  flex-shrink: 0;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ceb-blue-primary);
  margin-top: auto;
}

.service-link:hover {
  color: var(--ceb-gold-dark);
}

/* ==========================================================================
   ADVANCED BOND ISSUANCE CALCULATOR & QR VERIFICATION PANEL
   ========================================================================== */

.bond-calculator-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-top: 1.5rem;
}

.bond-calc-header {
  background: linear-gradient(135deg, var(--ceb-blue-dark) 0%, var(--ceb-blue-primary) 100%);
  color: #FFFFFF;
  padding: 1.5rem 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.bond-calc-body {
  padding: 2rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem;
}

.bond-input-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}

.bond-output-panel {
  background: var(--ceb-blue-subtle);
  border: 1px solid rgba(10, 40, 126, 0.15);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bond-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 0.55rem;
  border-bottom: 1px dashed rgba(10, 40, 126, 0.15);
  font-size: 0.85rem;
}

.bond-stat-row:last-child {
  border-bottom: none;
}

.bond-highlight-stat {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.9rem;
  margin-bottom: 1rem;
  text-align: center;
}

.bond-highlight-val {
  font-family: var(--font-mono);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
}

.bond-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 1rem;
}

.bond-schedule-table th {
  background: var(--ceb-blue-dark);
  color: #FFF;
  padding: 0.55rem 0.7rem;
  text-align: left;
}

.bond-schedule-table td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-mono);
}

.bond-schedule-table tr:nth-child(even) td {
  background: #FAFAFD;
}

/* Bond Verification Panel & Manager */
.bond-panel-manager {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  margin-top: 2rem;
}

.verification-card {
  background: #FAFAFD;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.25rem;
}

.qr-code-box {
  background: #FFFFFF;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 140px;
}

.qr-canvas-wrap {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  color: var(--color-success);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ==========================================================================
   HOMEPAGE: TOOLS, TOMBSTONES, PROCESS, INSIGHTS, FAQ & CTA BAND
   ========================================================================== */

/* --- Tool cards --- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--ceb-blue-light);
}

.tool-card-featured {
  border-color: var(--ceb-gold-primary);
  background: linear-gradient(180deg, var(--ceb-gold-subtle) 0%, var(--color-surface) 45%);
}

.tool-card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ceb-blue-primary) 0%, var(--ceb-blue-dark) 100%);
  color: var(--ceb-gold-light);
  margin-bottom: 1.1rem;
}

.tool-card-tag {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ceb-gold-dark);
  background: #FFFFFF;
  border: 1px solid var(--ceb-gold-primary);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.tool-card-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.6rem;
}

.tool-card-desc {
  font-size: 0.865rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: 1.1rem;
}

.tool-card-points {
  list-style: none;
  margin-bottom: 1.35rem;
  display: grid;
  gap: 0.4rem;
}

.tool-card-points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.81rem;
  color: var(--color-text-main);
}

.tool-card-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ceb-gold-primary);
}

.tool-card-cta {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ceb-blue-primary);
}

.tool-card:hover .tool-card-cta {
  color: var(--ceb-gold-dark);
}

/* --- Transaction tombstones --- */
.tombstone-section {
  background: linear-gradient(140deg, var(--ceb-blue-dark) 0%, #0B3272 55%, var(--ceb-blue-primary) 100%);
  color: #FFFFFF;
}

.tombstone-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.tombstone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.25rem;
}

.tombstone-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(245, 197, 88, 0.28);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tombstone-card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--ceb-gold-light);
}

.tombstone-amount {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ceb-gold-light);
  letter-spacing: -0.01em;
}

.tombstone-role {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A9C0DE;
  margin: 0.5rem 0 0.85rem;
}

.tombstone-title {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.35;
  color: #FFFFFF;
  margin-bottom: 0.6rem;
}

.tombstone-desc {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #C7D6E8;
  margin-bottom: 1.1rem;
}

.tombstone-tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tombstone-tags span {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #E8F1FA;
}

/* --- Onboarding process steps --- */
.process-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  counter-reset: step;
}

.process-step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--ceb-gold-primary);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.4rem;
}

.process-step-num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ceb-blue-subtle);
  line-height: 1;
  margin-bottom: 0.5rem;
  -webkit-text-stroke: 1px var(--ceb-blue-light);
}

.process-step-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.5rem;
}

.process-step-desc {
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* --- Insights --- */
.insights-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 1.25rem;
}

.insight-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

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

.insight-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  color: var(--color-text-light);
}

.insight-tag {
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ceb-blue-primary);
  background: var(--ceb-blue-subtle);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.insight-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.6rem;
}

.insight-desc {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: 1.2rem;
}

.insight-link {
  margin-top: auto;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ceb-blue-primary);
}

.insight-link:hover {
  color: var(--ceb-gold-dark);
}

/* --- FAQ accordion --- */
.faq-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

.faq-list {
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.25rem 1.25rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item[open] {
  border-color: var(--ceb-blue-light);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.05rem;
  font-family: var(--font-body);
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ceb-gold-dark);
  transition: transform var(--transition-fast);
}

.faq-item[open] .faq-question::after {
  content: '\2212';
}

.faq-answer {
  padding-bottom: 1.15rem;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  border-top: 1px dashed var(--color-border);
  padding-top: 0.9rem;
}

.faq-answer a {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--ceb-blue-primary);
  text-decoration: underline;
}

/* --- Closing CTA band --- */
.cta-band {
  background: var(--ceb-blue-dark);
  color: #FFFFFF;
  padding-block: clamp(2.75rem, 5vw, 4rem);
  border-top: 3px solid var(--ceb-gold-primary);
}

.cta-band-inner {
  display: grid;
  /* minmax(0, …) rather than a bare fr: an fr track refuses to shrink below the
     min-content width of what is inside it, so one long button label used to be
     able to push the copy column out from under itself. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: 2.5rem;
  align-items: center;
}

.cta-band-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.cta-band-desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #C7D6E8;
  max-width: 560px;
}

.cta-band-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  min-width: 0;
}

.cta-band-actions .btn {
  width: 100%;
  justify-content: center;
}

.cta-band-contact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: #A9C0DE;
}

.cta-band-contact strong {
  color: var(--ceb-gold-light);
}

/* ==========================================================================
   BANK GUARANTEE CATALOGUE & PRICING CALCULATOR
   ========================================================================== */

.guarantee-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 1.25rem;
}

.guarantee-type-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.guarantee-type-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--ceb-gold-primary);
}

.guarantee-type-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.guarantee-type-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.3rem 0.55rem;
  background: linear-gradient(135deg, var(--ceb-blue-primary) 0%, var(--ceb-blue-dark) 100%);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.guarantee-type-rules {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ceb-gold-dark);
}

.guarantee-type-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.5rem;
}

.guarantee-type-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.guarantee-type-meta {
  margin-top: auto;
  display: grid;
  gap: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--color-border);
}

.guarantee-type-meta > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.guarantee-type-meta dt {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.guarantee-type-meta dd {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-main);
  text-align: right;
}

/* Quick-value preset row (shared by both calculators) */
.preset-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.preset-row-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.preset-btn-group {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.gty-preset-btn.is-selected,
.bond-preset-btn.is-selected {
  background: var(--ceb-blue-primary);
  border-color: var(--ceb-blue-primary);
  color: #FFFFFF;
}

/* Toggle options */
.gty-option-row {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.gty-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1.5;
}

.gty-checkbox input {
  margin-top: 0.15rem;
  accent-color: var(--ceb-blue-primary);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Selected instrument explainer */
.gty-instrument-note {
  margin-top: 1.5rem;
  background: var(--ceb-gold-subtle);
  border: 1px solid rgba(207, 149, 32, 0.35);
  border-left: 3px solid var(--ceb-gold-primary);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
}

.gty-note-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.4rem;
}

.gty-note-text {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.gty-note-meta {
  display: grid;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--color-text-main);
}

.gty-note-meta strong {
  color: var(--ceb-blue-primary);
}

/* Billing schedule footer inside the calculator card */
.gty-schedule-wrap {
  padding: 0 2rem 2rem;
  border-top: 1px solid var(--color-border-light);
  margin-top: -0.5rem;
}

.gty-schedule-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.5rem;
  margin-bottom: 0.25rem;
}

.gty-disclaimer {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--color-text-light);
  background: var(--color-surface-hover);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
}

.gty-disclaimer strong {
  color: var(--color-text-muted);
}

/* ==========================================================================
   CLIENT PORTAL / E-BANKING LOGIN PAGE STYLING
   ========================================================================== */

.login-page-section {
  background: linear-gradient(135deg, #031029 0%, #062560 60%, #020B22 100%);
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  position: relative;
}

.login-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-card-header {
  background: var(--ceb-blue-dark);
  color: #FFFFFF;
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  border-bottom: 2px solid var(--ceb-gold-primary);
}

.login-card-body {
  padding: 2rem;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.auth-tab.active {
  color: var(--ceb-blue-primary);
  border-bottom-color: var(--ceb-blue-primary);
  font-weight: 700;
}

.security-badge-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ceb-blue-subtle);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: 0.75rem;
  color: var(--ceb-blue-dark);
  margin-bottom: 1.25rem;
}

/* Form controls */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-main);
}

.form-input, .form-select {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #FAFAFD;
  font-size: 0.925rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-input:focus, .form-select:focus {
  border-color: var(--ceb-blue-primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px var(--ceb-blue-glow);
}

/* ==========================================================================
   GLOBAL FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-dark-surface);
  color: var(--color-dark-text);
  border-top: 1px solid var(--color-dark-border);
  margin-top: auto;
  padding-top: clamp(3rem, 5vw, 4.5rem);
  width: 100%;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-dark-border);
}

.footer-brand-info {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-logo-img {
  height: 54px;
  width: auto;
  object-fit: contain;
  background: #FFFFFF;
  padding: 6px 9px;
  border-radius: 6px;
}

.footer-desc {
  font-size: 0.8125rem;
  color: var(--color-dark-muted);
  line-height: 1.6;
  max-width: 320px;
}

.footer-col-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.8125rem;
}

.footer-nav a {
  color: var(--color-dark-muted);
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--ceb-gold-light);
  padding-left: 2px;
}

.footer-legal-bar {
  padding-block: 1.75rem;
  font-size: 0.75rem;
  color: var(--color-dark-muted);
  line-height: 1.6;
}

.footer-disclaimer-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Subpage Hero */
.page-hero {
  background: linear-gradient(135deg, #041B4D 0%, #0A3179 100%);
  color: #FFFFFF;
  padding-block: clamp(2.75rem, 4.5vw, 4rem);
  position: relative;
  overflow: hidden;
  width: 100%;
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.65rem;
  color: #FFFFFF;
}

.page-hero-desc {
  font-size: 1rem;
  color: #D6E5F5;
  max-width: 650px;
}

.breadcrumb-bar {
  background: #F3F7FC;
  border-bottom: 1px solid var(--color-border);
  padding-block: 0.65rem;
  font-size: 0.8125rem;
  width: 100%;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  color: var(--color-text-muted);
}

.breadcrumbs a {
  color: var(--ceb-blue-primary);
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-text-light);
}

/* Responsive Rules to prevent any navbar or page overflow */
@media (max-width: 1240px) {
  .brand-title-zh {
    font-size: 0.88rem;
  }
  .brand-title-en {
    font-size: 0.65rem;
  }
  .brand-subtitle-eu {
    display: none;
  }
}

/* Below this width the horizontal nav is replaced by the drawer, so the header
   can never run past the right-hand edge of the page.
   1200px, not 1080px: eight top-level labels, four of them with a caret, plus a
   372px brand lock-up and the Client Portal button, only fit on one line from
   about 1200px up. At 1100px the English menu cleared the edge by a handful of
   pixels — close enough that a different font fallback or a 10% zoom pushed
   "Tools" and "Contact" onto a second row. A drawer at 1100px is ordinary; a
   two-line menu is not. */
@media (max-width: 1200px) {
  /* The drawer is absolutely positioned, so the nav element itself must stop
     claiming horizontal space — every spare pixel of the header row belongs to
     the bank name instead. */
  .primary-nav {
    position: static;
    flex: 0 0 auto;
  }
  .nav-wrap {
    gap: 0.5rem;
    min-height: 68px;
  }
  .brand-logo-link {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    gap: 0.55rem;
  }
  .brand-title-group {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
  }
  .brand-official-logo {
    height: 40px;
    max-width: 96px;
  }

  /* The wordmark carries no wording, so on a phone the legal name is the only
     thing identifying the bank: promote the Latin name to the first and
     largest line and bring back the "EUROPE S.A." qualifier that the wider
     breakpoint hides. */
  .brand-title-en {
    order: 1;
    font-size: clamp(0.72rem, 3vw, 0.95rem);
    font-weight: 800;
    color: var(--ceb-blue-primary);
    letter-spacing: 0.02em;
    white-space: normal;
  }
  .brand-subtitle-eu {
    order: 2;
    display: block;
    font-size: clamp(0.53rem, 2.2vw, 0.66rem);
    font-weight: 700;
    color: var(--ceb-gold-dark);
    letter-spacing: 0.06em;
    white-space: normal;
  }
  .brand-title-zh {
    order: 3;
    font-size: clamp(0.6rem, 2.4vw, 0.78rem);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
  }
  /* Anchored to the header itself, so the drawer always opens directly beneath
     it whether or not the top bar has scrolled away. Sits above the header row
     on its own layer, so nothing in the row can ever paint into it. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #FFFFFF;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.5rem 2rem;
    gap: 0.15rem;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 1002;
  }
  .nav-links.active {
    display: flex;
  }
  .nav-item {
    border-bottom: 1px solid var(--color-border-light);
  }
  .nav-links > .nav-item:last-child {
    border-bottom: none;
  }
  .nav-link {
    padding: 0.85rem 0.25rem;
    font-size: 0.95rem;
    justify-content: space-between;
    width: 100%;
  }
  .nav-caret {
    display: none;
  }
  /* Dropdown children become an indented static list inside the drawer */
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--ceb-gold-primary);
    border-radius: 0;
    min-width: 0;
    margin: 0 0 0.75rem 0.35rem;
    padding: 0 0 0 0.5rem;
    background: transparent;
  }
  .has-dropdown:hover .nav-dropdown,
  .has-dropdown:focus-within .nav-dropdown {
    transform: none;
  }
  .dropdown-link {
    padding: 0.45rem 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
  }
  .mobile-toggle {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    flex: 0 0 auto;
  }

  /* --- Client Portal on a phone -------------------------------------------
     In the header row the portal shrinks to a 42px key icon: it no longer
     competes with the bank name for width and can no longer overlap it. The
     labelled call to action moves onto the drawer layer (.nav-portal-item),
     so the two never share a plane. */
  .header-actions {
    gap: 0.35rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
  }
  .btn-portal-login {
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(10, 40, 126, 0.18);
  }
  .btn-portal-login svg {
    width: 17px;
    height: 17px;
  }
  /* Clipped rather than removed, so the icon-only control keeps its name for
     screen readers. */
  .btn-portal-login span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .btn-portal-login:hover {
    transform: none;
  }

  /* Drawer-only Client Portal call to action, injected by main.js */
  .nav-portal-item {
    display: block;
    border-bottom: none;
    margin-bottom: 0.65rem;
  }
  .nav-portal-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--ceb-blue-primary) 0%, var(--ceb-blue-dark) 100%);
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--ceb-gold-primary);
    box-shadow: 0 4px 14px rgba(10, 40, 126, 0.22);
  }
  .nav-portal-cta:hover,
  .nav-portal-cta:focus-visible {
    background: var(--ceb-blue-dark);
    color: #FFFFFF;
  }

  /* Dimmed page behind the open drawer, so the drawer reads as its own layer */
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(4, 27, 77, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 998;
    border: 0;
    padding: 0;
  }
  .nav-scrim.is-visible {
    opacity: 1;
    visibility: visible;
  }
  body.nav-drawer-open {
    overflow: hidden;
  }
}

@media (max-width: 992px) {
  .hero-grid, .bond-calc-body, .contact-card-grid {
    grid-template-columns: 1fr;
  }
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
  }
  .faq-layout,
  .cta-band-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cta-band-actions {
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .footer-top-grid {
    grid-template-columns: 1fr;
  }
  .bond-input-grid {
    grid-template-columns: 1fr;
  }
  .gty-schedule-wrap {
    padding-inline: 1.25rem;
  }
  .guarantee-type-grid {
    grid-template-columns: 1fr;
  }
  .verification-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .qr-code-box {
    margin-inline: auto;
  }
  .top-bar .container {
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   EVERBRIGHT-INSPIRED MODULES
   Newsroom, Our Business, Investor Relations, Portfolio
   Palette anchored on the Everbright navy (#0A287E) and azure (#04A2DE)
   ========================================================================== */

/* --- Image-backed page hero (used by the new institutional pages) -------- */
.page-hero-media {
  position: relative;
  color: #FFFFFF;
  overflow: hidden;
  width: 100%;
  min-height: clamp(240px, 32vw, 400px);
  display: flex;
  align-items: flex-end;
  background: var(--ceb-blue-dark);
}

.page-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(4, 27, 77, 0.94) 0%, rgba(10, 40, 126, 0.78) 45%, rgba(4, 162, 222, 0.32) 100%);
}

.page-hero-media .container {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 5vw, 4.25rem);
}

.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ceb-gold-light);
  margin-bottom: 0.85rem;
}

.page-hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--ceb-gold-primary);
}

/* --- Newsroom (Everbright "Company News" pattern) ------------------------ */
.news-section {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ceb-blue-subtle) 100%);
  border-block: 1px solid var(--color-border);
}

.news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
}

.news-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}

/* Two lead stories stacked in the left column.
   The column is as tall as the list of headlines beside it, so a single feature
   card had to stretch to fill it: with a photograph that is mostly sky, the
   result was a long empty blue rectangle with the story pinned to the bottom.
   Two cards of equal height fill the same space with two photographs and two
   headlines, and each crop now lands on the subject rather than the sky. */
.news-feature-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(1rem, 1.6vw, 1.35rem);
  min-width: 0;
}

/* Featured story */
.news-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ceb-blue-dark);
  color: #FFFFFF;
  box-shadow: var(--shadow-md);
  min-height: 420px;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.news-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.news-feature-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.news-feature:hover .news-feature-img {
  transform: scale(1.05);
}

.news-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 27, 77, 0.25) 0%, rgba(4, 27, 77, 0.86) 62%, rgba(2, 11, 34, 0.96) 100%);
}

.news-feature-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.news-feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.28;
  font-weight: 700;
  margin: 0.75rem 0 0.7rem;
  color: #FFFFFF;
}

.news-feature-desc {
  font-size: 0.9rem;
  color: #D6E5F5;
  max-width: 46ch;
  margin-bottom: 1.1rem;
}

/* Each card of the pair is roughly half as tall as the old single feature, so
   the type scales down with it and the standfirst is capped at three lines to
   keep the two cards the same shape whatever the language. */
.news-feature-stack .news-feature {
  min-height: 236px;
}

.news-feature-stack .news-feature-title {
  font-size: clamp(1.05rem, 1.65vw, 1.4rem);
  margin: 0.6rem 0 0.55rem;
}

.news-feature-stack .news-feature-desc {
  font-size: 0.855rem;
  margin-bottom: 0.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-feature-stack .news-feature::after {
  background: linear-gradient(180deg, rgba(4, 27, 77, 0.2) 0%, rgba(4, 27, 77, 0.82) 55%, rgba(2, 11, 34, 0.96) 100%);
}

/* Everbright-style stacked date block */
.news-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--ceb-blue-light);
  color: #FFFFFF;
  line-height: 1.1;
  flex-shrink: 0;
}

.news-date-day {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
}

.news-date-year {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.news-date.on-dark {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
}

.news-cat {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 3px;
  background: var(--ceb-gold-primary);
  color: #241800;
}

.news-cat.cat-policy   { background: var(--ceb-blue-light); color: #012234; }
.news-cat.cat-markets  { background: var(--ceb-gold-primary); color: #241800; }
.news-cat.cat-energy   { background: #1F9D6B; color: #04231A; }
.news-cat.cat-trade    { background: #17559F; color: #FFFFFF; }

/* Secondary story list */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-item {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 1;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.news-item:hover {
  border-color: var(--ceb-blue-light);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}

.news-item-thumb {
  width: 100%;
  height: 100%;
  min-height: 108px;
  object-fit: cover;
}

.news-item-body {
  padding: 0.9rem 1.1rem 0.9rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.news-item-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  color: var(--color-text-light);
  font-family: var(--font-mono);
}

.news-item-title {
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ceb-blue-dark);
}

.news-item:hover .news-item-title {
  color: var(--ceb-blue-primary);
}

.news-item-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Third row: category columns, mirroring Everbright's news triptych */
.news-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--color-border);
}

.news-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--ceb-blue-primary);
}

.news-col-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
}

.news-col-more {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ceb-blue-light);
  white-space: nowrap;
}

.news-col-more:hover { text-decoration: underline; }

.news-col-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  height: 100%;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.news-col-card:hover {
  transform: translateY(-4px);
  border-color: var(--ceb-blue-light);
  box-shadow: var(--shadow-md);
}

.news-col-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ceb-blue-subtle);
}

.news-col-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.news-col-card:hover .news-col-media img { transform: scale(1.06); }

.news-col-media .news-date {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(2, 11, 34, 0.35);
}

.news-col-body { padding: 1.1rem 1.2rem 1.35rem; }

.news-col-card-title {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.42;
  color: var(--ceb-blue-dark);
  margin: 0.7rem 0 0.55rem;
}

.news-col-card-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.news-source {
  margin-top: 0.85rem;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--ceb-blue-light);
  letter-spacing: 0.04em;
}

.news-disclaimer {
  margin-top: 1.75rem;
  font-size: 0.75rem;
  color: var(--color-text-light);
  border-left: 3px solid var(--ceb-blue-light);
  padding-left: 0.9rem;
  max-width: 78ch;
}

/* --- Our Business ------------------------------------------------------- */
.glance-strip {
  background: var(--ceb-blue-dark);
  color: #FFFFFF;
  padding-block: clamp(2rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}

.glance-strip::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -140px;
  top: -220px;
  background: radial-gradient(circle, rgba(4, 162, 222, 0.28) 0%, transparent 70%);
  pointer-events: none;
}

.glance-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.glance-item { text-align: center; }

.glance-num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  color: var(--ceb-gold-light);
  line-height: 1;
}

.glance-num small {
  font-size: 0.42em;
  font-weight: 600;
  color: #D6E5F5;
  display: block;
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}

.glance-label {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: #D6E5F5;
  letter-spacing: 0.03em;
}

.biz-blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.biz-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}

.biz-block:nth-child(even) .biz-block-media { order: 2; }

.biz-block-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--ceb-blue-subtle);
}

.biz-block-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.biz-block:hover .biz-block-media img { transform: scale(1.04); }

.biz-block-media-tag {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(4, 27, 77, 0.86);
  color: var(--ceb-gold-light);
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
  backdrop-filter: blur(4px);
}

.biz-block-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: var(--ceb-blue-dark);
  margin: 0.6rem 0 0.85rem;
}

.biz-stats {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  flex-wrap: wrap;
  margin: 1.15rem 0 1.25rem;
  padding: 1rem 0;
  border-block: 1px solid var(--color-border);
}

.biz-stat-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ceb-blue-primary);
  line-height: 1.1;
}

.biz-stat-num small {
  font-size: 0.58em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.biz-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.biz-bullets {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.biz-bullets li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.biz-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ceb-blue-light);
}

/* "More investment areas" chip grid */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.area-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: all var(--transition-fast);
}

.area-card:hover {
  border-color: var(--ceb-blue-light);
  background: var(--ceb-blue-subtle);
  transform: translateY(-3px);
}

.area-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--ceb-blue-primary), var(--ceb-blue-light));
  color: #FFFFFF;
}

.area-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ceb-blue-dark);
}

/* --- Investor Relations ------------------------------------------------- */
.ir-quote-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.ir-quote-card {
  background: linear-gradient(140deg, var(--ceb-blue-dark) 0%, var(--ceb-blue-primary) 60%, #0B3272 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  overflow: hidden;
}

.ir-quote-card::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -130px;
  bottom: -180px;
  background: radial-gradient(circle, rgba(4, 162, 222, 0.35) 0%, transparent 70%);
}

.ir-ticker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--ceb-gold-light);
  margin-bottom: 0.5rem;
}

.ir-price {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
}

.ir-price sup {
  font-size: 0.36em;
  font-weight: 600;
  margin-left: 0.35rem;
  color: #D6E5F5;
}

.ir-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  background: rgba(31, 157, 107, 0.22);
  color: #7CE0AF;
}

.ir-delta.down {
  background: rgba(214, 69, 69, 0.22);
  color: #FF9E9E;
}

.ir-quote-meta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ir-quote-meta div span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93A9C9;
  margin-bottom: 0.2rem;
}

.ir-quote-meta div strong {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: #FFFFFF;
}

/* Share-price sparkline chart */
.ir-chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
}

.ir-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ir-chart-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
}

.ir-chart-range {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--color-text-light);
}

.ir-chart-svg {
  width: 100%;
  height: auto;
  flex: 1;
}

/* Announcements list */
.ir-ann-list { list-style: none; }

.ir-ann-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 0.35rem;
  border-bottom: 1px dashed var(--color-border);
  transition: background var(--transition-fast);
}

.ir-ann-row:hover { background: var(--ceb-blue-subtle); }

.ir-ann-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ceb-blue-light);
  font-weight: 700;
}

.ir-ann-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ceb-blue-dark);
}

.ir-ann-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.ir-ann-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ceb-blue-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  white-space: nowrap;
}

.ir-ann-row:hover .ir-ann-file {
  border-color: var(--ceb-blue-light);
  background: var(--color-surface);
}

/* Report / results cards */
.ir-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.25rem;
}

.ir-report-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: all var(--transition-normal);
}

.ir-report-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--ceb-blue-light);
}

.ir-report-cover {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--ceb-blue-primary) 0%, var(--ceb-blue-dark) 100%);
  color: #FFFFFF;
  text-align: center;
  padding: 1.25rem;
  position: relative;
}

.ir-report-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: radial-gradient(#F5C558 1px, transparent 1px);
  background-size: 20px 20px;
}

.ir-report-year {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ceb-gold-light);
  position: relative;
}

.ir-report-kind {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D6E5F5;
  margin-top: 0.35rem;
  position: relative;
}

.ir-report-foot {
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ceb-blue-dark);
}

.ir-report-foot span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-light);
}

/* Financial highlights table */
.ir-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.ir-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 640px;
}

.ir-table thead th {
  background: var(--ceb-blue-primary);
  color: #FFFFFF;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  padding: 0.8rem 1rem;
  font-weight: 700;
}

.ir-table thead th:first-child { text-align: left; }

.ir-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
  text-align: right;
  font-family: var(--font-mono);
  color: var(--color-text-main);
}

.ir-table tbody td:first-child {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ceb-blue-dark);
}

.ir-table tbody tr:hover { background: var(--ceb-blue-subtle); }

.ir-table tfoot td {
  padding: 0.7rem 1rem;
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* Governance grid + calendar */
.ir-gov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.ir-gov-card {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--ceb-blue-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.35rem 1.5rem;
  transition: all var(--transition-fast);
}

.ir-gov-card:hover {
  box-shadow: var(--shadow-sm);
  border-left-color: var(--ceb-gold-primary);
}

.ir-gov-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.45rem;
}

.ir-gov-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.ir-cal-list { list-style: none; }

.ir-cal-item {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--color-border-light);
}

.ir-cal-when {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ceb-blue-light);
  min-width: 110px;
  flex-shrink: 0;
}

/* --- Portfolio ---------------------------------------------------------- */
.pf-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

.pf-tab {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.pf-tab:hover {
  border-color: var(--ceb-blue-light);
  color: var(--ceb-blue-primary);
}

.pf-tab.active {
  background: var(--ceb-blue-primary);
  border-color: var(--ceb-blue-primary);
  color: #FFFFFF;
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.pf-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.pf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--ceb-blue-light);
}

.pf-logo-box {
  height: 118px;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border-light);
}

.pf-logo-box img {
  max-height: 66px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: saturate(0.92);
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.pf-card:hover .pf-logo-box img {
  filter: saturate(1.1);
  transform: scale(1.04);
}

.pf-card-body {
  padding: 1.1rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.pf-sector {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ceb-blue-light);
}

.pf-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  line-height: 1.35;
}

.pf-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  flex: 1;
}

.pf-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.pf-meta span {
  font-size: 0.66rem;
  font-family: var(--font-mono);
  padding: 0.24rem 0.5rem;
  border-radius: 3px;
  background: var(--ceb-blue-subtle);
  color: var(--ceb-blue-primary);
  border: 1px solid var(--color-border);
}

.pf-logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pf-logo-wall div {
  background: #FFFFFF;
  height: 104px;
  display: grid;
  place-items: center;
  padding: 1rem;
  transition: background var(--transition-fast);
}

.pf-logo-wall div:hover { background: var(--ceb-blue-subtle); }

.pf-logo-wall img {
  max-height: 52px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0.78;
  filter: grayscale(0.5);
  transition: all var(--transition-fast);
}

.pf-logo-wall div:hover img {
  opacity: 1;
  filter: grayscale(0);
}

.pf-empty {
  grid-column: 1 / -1;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.9rem;
}

/* --- Image credits block ------------------------------------------------ */
.credits-note {
  font-size: 0.72rem;
  color: var(--color-text-light);
  line-height: 1.7;
}

.credits-note a { color: var(--ceb-blue-primary); text-decoration: underline; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .news-layout { grid-template-columns: 1fr; }
  /* Nothing is stretching the column any more, so equal rows would only force
     empty space into the shorter card. */
  .news-feature-stack { grid-template-rows: auto auto; }
  .ir-quote-panel { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
  .news-columns { grid-template-columns: 1fr; }
  .biz-block { grid-template-columns: 1fr; }
  .biz-block:nth-child(even) .biz-block-media { order: 0; }
}

@media (max-width: 700px) {
  /* Logo yields width to the legal name rather than the reverse. */
  .brand-official-logo { height: 36px; max-width: 88px; }
  .brand-title-en { font-size: 0.78rem; }
  .brand-subtitle-eu { font-size: 0.55rem; }
  .brand-title-zh { font-size: 0.62rem; }
  .news-item { grid-template-columns: 84px 1fr; }
  .news-item-body { padding: 0.75rem 0.9rem 0.75rem 0; }
  .ir-ann-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .ir-quote-meta { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr; }
}

/* Narrow phones: the two Latin name lines stay legible; the Chinese line is
   allowed to shrink because it is only nine glyphs wide. */
@media (max-width: 420px) {
  .brand-official-logo { height: 32px; max-width: 76px; }
  .brand-logo-link { gap: 0.45rem; }
  .brand-title-en { font-size: 0.735rem; letter-spacing: 0; }
  .brand-subtitle-eu { font-size: 0.5rem; letter-spacing: 0.03em; }
  .brand-title-zh { font-size: 0.58rem; }
  .nav-wrap { gap: 0.35rem; }
  .btn-portal-login, .mobile-toggle { width: 38px; height: 38px; }
  .nav-links { padding-inline: 1.1rem; }
}

/* Smallest phones still in use: trade logo width for name width so the legal
   name breaks over two legible lines rather than three cramped ones. */
@media (max-width: 360px) {
  .brand-official-logo { height: 28px; max-width: 68px; }
  .brand-title-en { font-size: 0.7rem; letter-spacing: 0; }
  .brand-subtitle-eu { font-size: 0.48rem; letter-spacing: 0.02em; }
}

/* The horizontal nav: one treatment for every desktop width, not a band.
   `.container` is capped at 1280px, so from about 1340px up the header stops
   getting any wider — the row has exactly the same space at 1920px as at
   1340px. A compaction that stopped at 1420px therefore handed the widest
   screens the *loosest* spacing in the tightest space, which is where "Tools"
   and "Contact" were dropping onto a second row. There is no upper bound now.

   Calibrated against a screenshot of the failing render (1357 CSS px), where
   the row was short by under ten pixels — hence the wrap. The tightest desktop
   width is now the 1201px breakpoint itself: there the row leaves about 735px
   between the brand lock-up and the button, and the eight English labels with
   their four carets and gaps come to about 600px. Around 135px of slack at the
   worst width, 260px at 1357px, and never less than that in French, Italian or
   Chinese. tools/i18n-selftest.mjs holds all four languages to the matching
   label budget so a future translation cannot quietly eat the margin. */
@media (min-width: 1201px) {
  .nav-links {
    gap: clamp(0.3rem, 0.62vw, 0.8rem);
    /* Right-aligns a wrapped row as well, so if the safety net ever does
       trigger the menu still reads as one block ending at the button. */
    justify-content: flex-end;
  }
  .nav-link {
    font-size: 0.775rem;
    padding-inline: 0.07rem;
  }
  .brand-official-logo {
    height: 46px;
    max-width: 112px;
  }
  .btn-portal-login {
    padding: 0.5rem 0.7rem;
    font-size: 0.73rem;
  }

  /* The brand lock-up and the two header gaps are the row's other consumers.
     Trimming them frees around 40px of real width without touching a single
     menu label — which is the point: the English menu should read the same as
     the French, Italian and Chinese ones, so the slack has to come from
     somewhere other than the labels. */
  .nav-wrap {
    gap: clamp(0.85rem, 1.15vw, 1.25rem);
  }
  .brand-logo-link {
    gap: 0.55rem;
    max-width: 320px;
  }
  .brand-title-zh {
    font-size: 0.85rem;
  }
  .brand-title-en {
    font-size: 0.64rem;
  }
  .brand-subtitle-eu {
    font-size: 0.53rem;
  }

  /* French and Italian labels run about a tenth wider than the English set, so
     they get a little more off the type and the gaps. Scoped to the horizontal
     nav: below 1201px these same classes build the drawer, which sets its own
     spacing. */
  html[data-lang="fr"] .nav-links,
  html[data-lang="it"] .nav-links {
    gap: clamp(0.28rem, 0.55vw, 0.72rem);
  }
  html[data-lang="fr"] .nav-link,
  html[data-lang="it"] .nav-link {
    font-size: 0.755rem;
    padding-inline: 0.05rem;
  }
}

/* ============================================
   SECTOR IMAGE MOSAIC (Our Business)
   ============================================ */

.sector-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.sector-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--ceb-blue-dark);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.sector-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.sector-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sector-tile:hover img { transform: scale(1.07); }

.sector-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 27, 77, 0.05) 0%, rgba(4, 27, 77, 0.8) 68%, rgba(2, 11, 34, 0.95) 100%);
}

.sector-tile-label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 215px;
  padding: 1.1rem 1.15rem;
  color: #FFFFFF;
}

.sector-tile-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
}

.sector-tile-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.32rem;
}

/* ============================================
   HOMEPAGE MODULES THAT PREVIOUSLY HAD NO RULES
   (gateway split, FX widget, regulatory strip)
   ============================================ */

.hero-content { position: relative; z-index: 2; }

/* Strategic gateway */
.gateway-section {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ceb-blue-subtle) 100%);
  border-block: 1px solid var(--color-border);
}

.gateway-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.gateway-badge-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.gateway-item {
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--ceb-blue-light);
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.gateway-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.gateway-item-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.3rem;
}

.gateway-item-text {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.gateway-visual {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.15rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--ceb-blue-primary) 0%, var(--ceb-blue-dark) 62%, #020B22 100%);
  box-shadow: var(--shadow-md);
  color: #FFFFFF;
}

.gateway-visual::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -25%;
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ceb-blue-glow) 0%, transparent 70%);
  pointer-events: none;
}

.gateway-visual-title {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
}

.network-hub-list {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.network-hub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.network-hub-item:hover {
  border-color: var(--ceb-blue-light);
  background: rgba(255, 255, 255, 0.1);
}

.network-hub-item strong {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Indicative FX converter */
.calc-widget {
  padding: clamp(1.35rem, 3vw, 2.15rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--ceb-blue-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: end;
}

.calc-result-box {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--ceb-blue-subtle);
  border: 1px solid var(--color-border);
}

.calc-result-val {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ceb-blue-primary);
  line-height: 1.2;
}

/* Regulatory badge strip */
.regulatory-badge-strip {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--color-dark-surface);
  border-top: 1px solid var(--color-dark-border);
  color: var(--color-dark-text);
}

.regulatory-flex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.regulatory-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.regulatory-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(4, 162, 222, 0.16);
  border: 1px solid rgba(4, 162, 222, 0.35);
  color: var(--ceb-blue-light);
}

.regulatory-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.2rem;
}

.regulatory-desc {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-dark-muted);
}

@media (max-width: 940px) {
  .gateway-split { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .gateway-badge-box { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
}

/* [hidden] must win over component display rules (portfolio sector filter) */
[hidden] { display: none !important; }

.biz-block-content { min-width: 0; }

/* ============================================
   ACCESSIBLE HIDING
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   FINANCIAL HIGHLIGHTS CHART PANEL
   Investor Relations #highlights — inline SVG,
   generated by tools/build_charts.py
   ============================================ */

.chart-panel {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.chart-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}

.chart-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.7rem 1.05rem;
  margin-bottom: -1px;
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.chart-tab:hover { color: var(--ceb-blue-primary); }

.chart-tab.is-active {
  color: var(--ceb-blue-primary);
  border-bottom-color: var(--ceb-gold-primary);
}

.chart-tab:focus-visible {
  outline: 2px solid var(--ceb-blue-light);
  outline-offset: 2px;
  border-radius: 3px 3px 0 0;
}

.chart-tabs-note {
  margin-left: auto;
  padding: 0.7rem 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--color-text-light);
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
}

.chart-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.1rem 1.15rem 0.9rem;
  min-width: 0;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.chart-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: #C6D6EC;
}

.chart-cap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.35rem;
}

.chart-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  line-height: 1.3;
}

.chart-note {
  font-size: 0.72rem;
  color: var(--color-text-light);
}

.chart-plot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-plot .cg { stroke: #E9EFF8; stroke-width: 1; }
.chart-plot .ca { stroke: #C3CFE0; stroke-width: 1; }
.chart-plot .cln { fill: none; stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round; }
.chart-plot .cdot { stroke: #FFFFFF; stroke-width: 1.4; }
.chart-plot .cdn { transition: opacity var(--transition-fast); }

.chart-plot text {
  font-family: var(--font-body), system-ui, sans-serif;
  fill: var(--color-text-muted);
}

.chart-plot .cy { font-size: 8.4px; text-anchor: end; fill: #8291A8; font-family: var(--font-mono), monospace; }
.chart-plot .cx { font-size: 8.6px; text-anchor: middle; fill: var(--color-text-muted); font-weight: 600; }
.chart-plot .cu { font-size: 7.6px; fill: #A6B4C8; letter-spacing: 0.06em; text-transform: uppercase; }
.chart-plot .cv { font-size: 8.8px; text-anchor: middle; fill: var(--ceb-blue-dark); font-weight: 700; font-family: var(--font-mono), monospace; }
.chart-plot .cdt { font-size: 20px; text-anchor: middle; fill: var(--ceb-blue-dark); font-weight: 700; font-family: var(--font-display), serif; }
.chart-plot .cds { font-size: 9px; text-anchor: middle; fill: var(--color-text-light); font-family: var(--font-mono), monospace; }
.chart-plot .cll { font-size: 8.6px; fill: var(--color-text-main); }
.chart-plot .clv { font-size: 8.6px; text-anchor: end; fill: var(--ceb-blue-primary); font-weight: 700; font-family: var(--font-mono), monospace; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.35rem;
}

.chart-key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.71rem;
  color: var(--color-text-muted);
}

.chart-key i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-foot {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--color-text-light);
  max-width: 78ch;
}

@media (max-width: 560px) {
  .chart-grid { grid-template-columns: 1fr; }
  .chart-tabs-note { display: none; }
  .chart-tab { padding-inline: 0.7rem; font-size: 0.79rem; }
}

/* ============================================
   DOCUMENT LINK AFFORDANCES
   Report / governance cards now open real PDFs
   ============================================ */

.ir-report-card { color: inherit; text-decoration: none; }

.ir-report-cover { position: relative; }

.ir-report-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.16rem 0.4rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: #FFFFFF;
}

.ir-report-card:hover .ir-report-badge {
  background: var(--ceb-gold-primary);
  border-color: var(--ceb-gold-light);
}

a.ir-gov-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ir-gov-file {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--ceb-blue-medium);
  font-weight: 600;
}

a.ir-gov-card:hover .ir-gov-file { color: var(--ceb-gold-dark); }

/* ==========================================================================
   NEWSROOM & ARTICLE PAGES
   Listing index at /news/ and the long-form desk notes at /news/<slug>.html.
   Reuses the homepage .news-* card vocabulary and adds the reading layout.
   ========================================================================== */

.news-cat.cat-digital  { background: #6B2C91; color: #FFFFFF; }

.news-read {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  text-transform: uppercase;
}

.news-item-more,
.news-feature .news-item-more {
  margin-top: auto;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ceb-blue-light);
}

.news-feature .news-item-more {
  display: block;
  margin-top: 0.9rem;
  color: var(--ceb-gold-light);
}

.news-feature .news-item-meta { color: rgba(255, 255, 255, 0.82); }
.news-feature .news-read { color: rgba(255, 255, 255, 0.72); }

/* --- Listing index ------------------------------------------------------- */
.newsroom-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding-bottom: clamp(1.1rem, 2.4vw, 1.7rem);
  margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem);
  border-bottom: 1px solid var(--color-border);
}

.newsroom-filters-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-right: 0.35rem;
}

.news-filter-chip {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 3px;
  background: var(--ceb-gold-primary);
  color: #241800;
}

.news-filter-chip.cat-policy   { background: var(--ceb-blue-light); color: #012234; }
.news-filter-chip.cat-markets  { background: var(--ceb-gold-primary); color: #241800; }
.news-filter-chip.cat-energy   { background: #1F9D6B; color: #04231A; }
.news-filter-chip.cat-trade    { background: #17559F; color: #FFFFFF; }

.newsroom .news-item { grid-template-columns: 118px 1fr; }

.newsroom-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--color-border);
}

.newsroom-foot-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--ceb-blue-primary);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.newsroom-foot-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ceb-blue-dark);
}

.newsroom-foot-card p {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  flex: 1;
}

.newsroom-foot-card .btn { align-self: flex-start; }

/* --- Article shell ------------------------------------------------------- */
.article-wrap {
  padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  background: var(--color-bg);
}

.article-head {
  max-width: 76ch;
  margin-bottom: clamp(1.25rem, 2.6vw, 1.9rem);
}

.article-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--ceb-blue-dark);
  margin: 0.85rem 0 0.9rem;
}

.article-standfirst {
  font-size: clamp(0.98rem, 1.5vw, 1.12rem);
  line-height: 1.65;
  color: var(--color-text-muted);
  font-weight: 500;
}

.article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  text-transform: uppercase;
}

.article-byline-desk {
  color: var(--ceb-blue-primary);
  font-weight: 700;
}

.article-byline-sep { color: var(--color-border); }

.article-figure {
  margin: 0 0 clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ceb-blue-subtle);
  box-shadow: var(--shadow-md);
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.article-figure figcaption {
  padding: 0.75rem 1.1rem 0.9rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  font-size: 0.76rem;
  color: var(--color-text-light);
  line-height: 1.55;
}

/* --- Reading layout ----------------------------------------------------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.article-body {
  max-width: 72ch;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--color-text-main);
}

.article-body > p { margin-bottom: 1.15rem; }

.article-body > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.1rem;
  line-height: 0.86;
  padding: 0.1rem 0.5rem 0 0;
  color: var(--ceb-blue-primary);
}

.article-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2vw, 1.4rem);
  line-height: 1.32;
  color: var(--ceb-blue-dark);
  margin: 2.1rem 0 0.9rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--ceb-gold-primary);
}

.article-list {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
}

.article-list li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.article-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--ceb-blue-light);
  border-radius: 1px;
}

.article-list li strong { color: var(--ceb-blue-dark); }

.article-quote {
  margin: 1.9rem 0;
  padding: 1.35rem 1.5rem;
  background: linear-gradient(135deg, var(--ceb-blue-dark) 0%, var(--ceb-blue-primary) 100%);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--ceb-gold-primary);
  color: #FFFFFF;
}

.article-quote p {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.5;
  margin-bottom: 0.7rem;
}

.article-quote cite {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ceb-gold-light);
}

.article-clients {
  margin-top: 2.1rem;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--ceb-gold-subtle);
  border: 1px solid #F0E2C0;
  border-left: 4px solid var(--ceb-gold-primary);
  border-radius: var(--radius-md);
}

.article-clients-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.85rem;
}

.article-clients-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: clientitem;
}

.article-clients-list li {
  counter-increment: clientitem;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-main);
}

.article-clients-list li:last-child { margin-bottom: 0; }

.article-clients-list li::before {
  content: counter(clientitem);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ceb-gold-primary);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.article-source {
  margin-top: 1.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ceb-blue-light);
}

/* --- Sidebar ------------------------------------------------------------ */
.article-aside {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: sticky;
  top: 96px;
}

.article-key {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--ceb-blue-light);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.35rem 1.4rem;
}

.article-key-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ceb-blue-primary);
  margin-bottom: 0.9rem;
}

.article-key-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-key-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.7rem;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.article-key-list li:last-child { margin-bottom: 0; }

.article-key-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ceb-gold-primary);
}

.article-cta {
  background: linear-gradient(135deg, var(--ceb-blue-primary) 0%, var(--ceb-blue-dark) 100%);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.35rem 1.45rem;
  color: #FFFFFF;
}

.article-cta-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin-bottom: 0.6rem;
  color: var(--ceb-gold-light);
}

.article-cta-desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 1rem;
}

.article-cta-link {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ceb-gold-light);
}

.article-cta-link:hover { text-decoration: underline; }

.article-related {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.article-related .news-columns {
  margin-top: 1.1rem;
  padding-top: 0;
  border-top: 0;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .newsroom-foot { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .article-aside { grid-template-columns: 1fr; }
  .article-body { font-size: 0.95rem; line-height: 1.72; }
  .article-body > p:first-child::first-letter { font-size: 2.5rem; }
  .article-figure img { aspect-ratio: 4 / 3; }
  .newsroom .news-item,
  .news-item { grid-template-columns: 92px 1fr; }
  .article-related .news-columns { grid-template-columns: 1fr; }
}

.news-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

/* ==========================================================================
   DOCUMENT LIBRARY (/reports/)
   ========================================================================== */

.doclib-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
  margin-bottom: clamp(1.25rem, 2.6vw, 2rem);
}

.doclib-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--ceb-gold-primary);
  border-radius: var(--radius-md);
  padding: 1.05rem 1.15rem 1.15rem;
}

.doclib-stat-value {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  color: var(--ceb-blue-primary);
  line-height: 1.1;
}

.doclib-stat-value span {
  font-size: 0.62em;
  color: var(--color-text-light);
  font-weight: 500;
}

.doclib-stat-label {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  color: var(--color-text-muted);
}

.doclib-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: clamp(1.25rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--color-border);
}

.doclib-jump a {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--ceb-blue-primary);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.doclib-jump a:hover {
  border-color: var(--ceb-blue-light);
  background: var(--ceb-blue-subtle);
}

.doclib-section {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  scroll-margin-top: 100px;
}

.doclib-head { margin-bottom: 1rem; }

.doclib-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--ceb-blue-dark);
}

.doclib-section-desc {
  margin-top: 0.35rem;
  font-size: 0.86rem;
  color: var(--color-text-muted);
  max-width: 80ch;
}

.doclib-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 232px;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 0.6rem;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.doclib-row:hover {
  border-color: var(--ceb-blue-light);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}

.doclib-icon {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--ceb-blue-subtle);
  border: 1px solid #CBDDF4;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ceb-blue-primary);
}

.doclib-row:hover .doclib-icon {
  background: var(--ceb-blue-primary);
  border-color: var(--ceb-blue-primary);
  color: #FFFFFF;
}

.doclib-main { display: block; }

.doclib-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ceb-blue-dark);
  line-height: 1.4;
}

.doclib-desc {
  display: block;
  margin-top: 0.28rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.doclib-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  text-align: right;
}

.doclib-badge {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 3px;
  background: var(--ceb-gold-subtle);
  border: 1px solid #EBDCB8;
  color: var(--ceb-gold-dark);
}

.doclib-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--color-text-light);
  line-height: 1.5;
}

.doclib-notice {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding: 1.35rem 1.5rem 1.45rem;
  background: var(--ceb-blue-subtle);
  border: 1px solid #CBDDF4;
  border-left: 4px solid var(--ceb-blue-primary);
  border-radius: var(--radius-md);
}

.doclib-notice-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ceb-blue-primary);
  margin-bottom: 0.7rem;
}

.doclib-notice p {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 92ch;
}

.doclib-notice p + p { margin-top: 0.75rem; }

.doclib-notice a {
  color: var(--ceb-blue-medium);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .doclib-stats { grid-template-columns: repeat(2, 1fr); }
  .doclib-row { grid-template-columns: 44px minmax(0, 1fr); }
  .doclib-side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--color-border);
  }
  .doclib-icon { height: 38px; }
}

/* ==========================================================================
   LEGAL NOTICE PAGE (/privacy-legal.html)
   ========================================================================== */

.legal-page .container { max-width: 1060px; }

.legal-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--color-border);
}

.legal-intro-lede {
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.72;
  color: var(--color-text-muted);
  font-weight: 500;
  border-left: 3px solid var(--ceb-gold-primary);
  padding-left: 1rem;
}

.legal-toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--ceb-blue-primary);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem 1.25rem;
}

.legal-toc-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ceb-blue-primary);
  margin-bottom: 0.75rem;
}

.legal-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.legal-toc-list li { margin-bottom: 0.34rem; }

.legal-toc-list a {
  display: flex;
  gap: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.legal-toc-list a:hover { color: var(--ceb-blue-primary); }

.legal-toc-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ceb-gold-dark);
  min-width: 1.3rem;
  flex-shrink: 0;
}

.legal-block {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--color-border-light);
  scroll-margin-top: 100px;
}

.legal-block:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.legal-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.3vw, 1.55rem);
  line-height: 1.3;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.95rem;
}

.legal-h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ceb-blue-primary);
  margin: 1.5rem 0 0.65rem;
}

.legal-p {
  font-size: 0.9rem;
  line-height: 1.78;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  max-width: 92ch;
}

.legal-p strong { color: var(--ceb-blue-dark); }

.legal-p a,
.legal-list a {
  color: var(--ceb-blue-medium);
  font-weight: 600;
  text-decoration: underline;
}

.legal-list {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  max-width: 92ch;
}

.legal-list li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--color-text-muted);
}

.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 6px;
  height: 6px;
  background: var(--ceb-blue-light);
  border-radius: 1px;
}

.legal-list li strong { color: var(--ceb-blue-dark); }

.legal-note {
  margin: 1.15rem 0 1.25rem;
  padding: 1.1rem 1.25rem 1.15rem;
  background: var(--ceb-gold-subtle);
  border: 1px solid #F0E2C0;
  border-left: 4px solid var(--ceb-gold-primary);
  border-radius: var(--radius-md);
  max-width: 92ch;
}

.legal-note-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ceb-gold-dark);
  margin-bottom: 0.5rem;
}

.legal-note p {
  font-size: 0.86rem;
  line-height: 1.72;
  color: var(--color-text-main);
}

.legal-block .ir-table-wrap { margin: 0.35rem 0 1.25rem; }

@media (max-width: 900px) {
  .legal-intro { grid-template-columns: 1fr; }
  .legal-toc-list { columns: 2; column-gap: 1.25rem; }
  .legal-toc-list li { break-inside: avoid; }
}

@media (max-width: 600px) {
  .legal-toc-list { columns: 1; }
}

.footer-disclaimer-box a {
  color: var(--ceb-gold-light);
  font-weight: 600;
  text-decoration: underline;
}

.doclib .container { max-width: 1140px; }

/* ==========================================================================
   LANGUAGE SWITCHER
   Translates the page in place (/i18n.js). The buttons are real buttons so
   they are keyboard reachable; aria-pressed carries the active state.
   ========================================================================== */

.lang-switch {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.lang-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: transparent;
  color: #DCEAF8;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }

.lang-btn.is-active {
  background: var(--ceb-gold-primary);
  color: #21160A;
}

.lang-btn:focus-visible {
  outline: 2px solid var(--ceb-gold-light);
  outline-offset: 2px;
}

/* Marks strings that have no translation for the active language, so a partial
   dictionary degrades to readable English rather than to an empty element. */
html[data-lang-pending] .lang-switch { opacity: 0.6; }

/* ==========================================================================
   HERO PHOTOGRAPHIC LAYER
   Group corporate imagery sits under the existing gradient, dark enough that
   the white hero type keeps its contrast ratio.
   ========================================================================== */

.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/group-ridges.jpg');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.3;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(3, 16, 41, 0.94) 0%, rgba(8, 43, 109, 0.62) 55%, rgba(2, 11, 34, 0.85) 100%);
}

/* ==========================================================================
   FULL-WIDTH PHOTOGRAPHIC DIVIDER
   ========================================================================== */

.panorama-band {
  height: clamp(120px, 16vw, 220px);
  background-image: url('/assets/img/group-panorama.jpg');
  background-size: cover;
  background-position: center 60%;
  border-block: 1px solid var(--color-border);
  position: relative;
}

.panorama-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 27, 77, 0.35) 0%, transparent 35%, transparent 65%, rgba(4, 27, 77, 0.35) 100%),
    radial-gradient(120% 90% at 50% 120%, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
}

/* ==========================================================================
   ABOUT BAND — corporate profile, advantages, group structure
   ========================================================================== */

.about-band {
  position: relative;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(4, 162, 222, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--ceb-blue-subtle) 100%);
  border-block: 1px solid var(--color-border);
  overflow: hidden;
}

.about-split {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: start;
}

.about-para {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-top: 1rem;
  max-width: 680px;
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 1.85rem;
}

.about-fact {
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--ceb-gold-primary);
  border-radius: var(--radius-sm);
}

.about-fact dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 0.2rem;
}

.about-fact dd {
  font-family: var(--font-mono);
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.85rem;
}

/* Portrait image with the group motto set on a glass plate over its foot. */
.about-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.about-figure img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.about-figure-quote {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 1.5rem 1.35rem;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 16, 41, 0.82) 55%);
  color: #FFFFFF;
}

.about-quote-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 0.6;
  color: var(--ceb-gold-light);
}

.about-figure-quote blockquote {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.4rem;
}

.about-figure-quote cite {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B9CEE8;
}

/* --- Our Advantages ------------------------------------------------------ */

.advantages-block { margin-top: clamp(2.5rem, 5vw, 4rem); }

.advantages-head { margin-bottom: 1.75rem; }

.advantages-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ceb-blue-dark);
}

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

.advantage-tile {
  position: relative;
  padding: 1.6rem 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.advantage-tile::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(90deg, var(--ceb-gold-primary), var(--ceb-blue-light));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.advantage-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.advantage-tile:hover::before { opacity: 1; }

.advantage-icon {
  width: auto;
  height: 38px;
  max-width: 52px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.advantage-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.45rem;
}

.advantage-desc {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* --- Group structure ----------------------------------------------------- */

.group-structure { margin-top: clamp(2.5rem, 5vw, 4rem); }

.group-structure-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: end;
  margin-bottom: 1.75rem;
}

.group-structure-lead {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.15rem;
}

.group-card {
  padding: 1.5rem 1.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* The ultimate parent is the anchor of the chart, so it carries the dark fill. */
.group-card.is-parent {
  background: linear-gradient(150deg, var(--ceb-blue-dark) 0%, #082B6D 100%);
  border-color: var(--ceb-blue-dark);
  color: #E9F1FA;
}

.group-card-role {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ceb-gold-primary);
}

.group-card.is-parent .group-card-role { color: var(--ceb-gold-light); }

.group-card-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ceb-blue-dark);
}

.group-card.is-parent .group-card-name { color: #FFFFFF; }

.group-card-desc {
  font-size: 0.83rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.group-card.is-parent .group-card-desc { color: #C7D6E8; }

.group-card-tickers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

.group-card-tickers span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--ceb-blue-subtle);
  color: var(--ceb-blue-primary);
  border: 1px solid var(--color-border);
}

.group-note {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--ceb-blue-light);
  background: rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.group-note a {
  color: var(--ceb-blue-primary);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 980px) {
  .about-split { grid-template-columns: 1fr; }
  .about-figure { max-width: 520px; }
  .group-structure-head { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 600px) {
  .about-figure img { min-height: 260px; }
  .lang-btn { padding: 0.28rem 0.45rem; font-size: 0.66rem; }
}

/* ==========================================================================
   GROUP FACT BAND (about-us)
   ========================================================================== */

.group-factband {
  background: var(--ceb-blue-dark);
  color: #E9F1FA;
  border-block: 1px solid var(--ceb-blue-dark);
}

.group-factband-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.group-fact { padding-left: 1rem; border-left: 3px solid var(--ceb-gold-primary); }

.group-fact-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 800;
  line-height: 1.1;
  color: #FFFFFF;
}

.group-fact-num span { color: var(--ceb-gold-light); }

.group-fact-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: #DCEAF8;
  margin-top: 0.3rem;
}

.group-fact-sub {
  font-size: 0.74rem;
  color: var(--color-dark-muted);
  margin-top: 0.15rem;
}

/* ==========================================================================
   CORPORATE PHILOSOPHY CARDS (about-us)
   ========================================================================== */

.philosophy-section {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-alt) 100%);
}

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.philosophy-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.philosophy-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.philosophy-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }

.philosophy-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.philosophy-card:hover .philosophy-media img { transform: scale(1.05); }

/* Only the motto card carries an overlaid caption. */
.philosophy-motto {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2rem 1.1rem 0.9rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 16, 41, 0.78) 60%);
}

.philosophy-body { padding: 1.5rem 1.4rem 1.7rem; }

.philosophy-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.5rem;
}

.philosophy-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ==========================================================================
   HERITAGE TIMELINE (about-us)
   ========================================================================== */

.heritage-section {
  background:
    linear-gradient(180deg, rgba(3, 16, 41, 0.92) 0%, rgba(4, 27, 77, 0.95) 100%),
    url('/assets/img/group-ridges.jpg') center/cover no-repeat;
  color: #E9F1FA;
}

.heritage-timeline {
  list-style: none;
  display: grid;
  gap: 1.15rem;
  position: relative;
}

.heritage-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: 1.35rem 1.4rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(245, 197, 88, 0.45);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.heritage-item:hover { background: rgba(255, 255, 255, 0.09); }

/* The two Luxembourg entries are the point of the timeline, so they lead. */
.heritage-item.is-highlight {
  border-left-color: var(--ceb-gold-primary);
  background: rgba(245, 197, 88, 0.09);
}

.heritage-year {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ceb-gold-light);
}

/* Second grid cell: resets the browser's heading/paragraph margins so the
   spacing below comes from the rules in this block alone. */
.heritage-body {
  margin: 0;
}

.heritage-body > :last-child {
  margin-bottom: 0;
}

.heritage-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
}

.heritage-desc {
  font-size: 0.875rem;
  color: #C7D6E8;
  line-height: 1.7;
}

.heritage-scope {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A9C0DE;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.heritage-item.is-highlight .heritage-scope {
  color: #21160A;
  background: var(--ceb-gold-light);
  border-color: transparent;
}

@media (max-width: 640px) {
  .heritage-item { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ==========================================================================
   CHINESE TYPOGRAPHY
   Cinzel and Plus Jakarta Sans carry no CJK glyphs, so the Chinese version
   swaps in a system CJK stack. The Latin faces stay first in the list: brand
   names, tickers and SWIFT codes remain unchanged in every language and should
   keep rendering in the display face.
   ========================================================================== */
html[data-lang="zh"] {
  --font-display: 'Cinzel', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC',
    'SimSun', serif;
  --font-body: 'Plus Jakarta Sans', 'Noto Sans SC', 'Source Han Sans SC',
    'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
}

/* Tracking tuned for capitalised Latin looks loose set in Han characters. */
html[data-lang="zh"] .hero-title,
html[data-lang="zh"] .section-title,
html[data-lang="zh"] .section-label,
html[data-lang="zh"] .about-band .section-desc,
html[data-lang="zh"] .advantage-name,
html[data-lang="zh"] .group-card-name {
  letter-spacing: 0.01em;
}

html[data-lang="zh"] .section-label,
html[data-lang="zh"] .advantages-title,
html[data-lang="zh"] .group-card-role {
  text-transform: none;
}

/* Han text has no ascender/descender rhythm to lean on; a little more leading
   keeps the long paragraphs in the About and FAQ blocks readable. */
html[data-lang="zh"] .about-para,
html[data-lang="zh"] .section-desc,
html[data-lang="zh"] .faq-answer,
html[data-lang="zh"] .advantage-desc,
html[data-lang="zh"] .group-card-desc {
  line-height: 1.9;
}

/* ==========================================================================
   BOARD & MANAGEMENT (about-us #governance)
   ========================================================================== */

/* The ridge photograph from the group's own imagery, laid in at low contrast so
   the chapter reads as a distinct part of the page without competing with the
   diagram sitting on top of it. */
/* No overflow clipping here on purpose: an ancestor with overflow other than
   visible turns into the scroll container for position: sticky, which would
   silently kill the sticky control-functions panel below. The ::before layer is
   inset on all four sides, so there is nothing to clip anyway. */
.governance-section {
  position: relative;
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
}

.governance-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 320px;
  background: url('/assets/img/group-ridges.jpg') center 30% / cover no-repeat;
  opacity: 0.09;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
}

.governance-section > .container {
  position: relative;
  z-index: 1;
}

.gov-head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* The chart's own heading sits closer to the diagram than the later blocks do,
   because the diagram is the first thing under the chapter intro. */
.gov-chart-head { margin-bottom: 1.4rem; }

/* --- Organisational chart ------------------------------------------------
   Two columns: the chain of responsibility on the left, the control functions
   that deliberately sit outside it on the right. */
.gov-chart {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

.gov-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gov-node {
  position: relative;
  padding: 1.3rem 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* The connector between two steps. Drawn on the node below rather than between
   them, so the last node never trails a line into empty space. */
.gov-node + .gov-node::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-1.5rem - 1px);
  width: 2px;
  height: 1.5rem;
  background: linear-gradient(to bottom, var(--ceb-gold-primary), var(--ceb-blue-light));
  transform: translateX(-50%);
}

.gov-node.is-shareholder {
  background: linear-gradient(150deg, var(--ceb-blue-dark) 0%, #082B6D 100%);
  border-color: var(--ceb-blue-dark);
}

.gov-node.is-board {
  border-color: var(--ceb-gold-primary);
  border-left-width: 4px;
}

.gov-node.is-committees {
  margin-left: clamp(1rem, 5vw, 3rem);
  background: var(--ceb-gold-subtle);
  border-color: #E8D6AC;
  border-style: dashed;
}

.gov-node.is-management {
  border-color: var(--ceb-blue-medium);
  border-left-width: 4px;
}

/* Terminal node: no accent, because nothing reports to it. */
.gov-node.is-lines {
  background: var(--color-surface-hover);
}

.gov-node-tier {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ceb-gold-dark);
  margin-bottom: 0.4rem;
}

.gov-node.is-shareholder .gov-node-tier { color: var(--ceb-gold-light); }

.gov-node-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.45rem;
}

.gov-node.is-shareholder .gov-node-name { color: #FFFFFF; }

.gov-node-desc {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

.gov-node.is-shareholder .gov-node-desc { color: #C7D6E8; }

/* --- Independent control functions -------------------------------------- */
.gov-controls {
  padding: 1.5rem 1.4rem;
  background: var(--ceb-blue-dark);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--ceb-gold-primary);
  position: sticky;
  top: 96px;
}

.gov-controls .gov-node-tier { color: var(--ceb-gold-light); }

.gov-controls-lead {
  font-size: 0.84rem;
  line-height: 1.65;
  color: #C7D6E8;
  margin-bottom: 1.1rem;
}

.gov-controls-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.gov-controls-list li {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #A9BFDC;
  padding-left: 0.85rem;
  border-left: 2px solid var(--ceb-blue-light);
}

.gov-controls-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.15rem;
}

/* --- Repeating block furniture ------------------------------------------ */
.gov-block { margin-top: clamp(2.5rem, 5vw, 4rem); }

.gov-block-head {
  max-width: 760px;
  margin-bottom: 1.6rem;
}

.gov-block-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.5rem;
}

.gov-block-lead {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Board composition -------------------------------------------------- */
.gov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.15rem;
}

.gov-card {
  padding: 1.45rem 1.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-bottom: 3px solid var(--ceb-blue-subtle);
  transition: border-bottom-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gov-card:hover {
  border-bottom-color: var(--ceb-gold-primary);
  box-shadow: var(--shadow-md);
}

.gov-card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--ceb-blue-subtle);
  color: var(--ceb-blue-primary);
  margin-bottom: 0.7rem;
}

.gov-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.45rem;
  line-height: 1.3;
}

.gov-card-desc {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Committees --------------------------------------------------------- */
.gov-committees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.15rem;
}

.gov-committee {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.35rem 1.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--ceb-gold-primary);
  border-radius: var(--radius-md);
}

.gov-committee-name {
  font-family: var(--font-display);
  font-size: 0.99rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.gov-committee-desc {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 0.9rem;
}

.gov-committee-meta {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border-light);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ceb-blue-primary);
}

/* --- Authorised Management portfolios ----------------------------------- */
.gov-portfolios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0.75rem 1.5rem;
}

.gov-portfolios li {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  padding: 0.85rem 0 0.85rem 1rem;
  border-left: 2px solid var(--ceb-blue-subtle);
  border-bottom: 1px solid var(--color-border-light);
}

.gov-portfolios strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ceb-blue-dark);
  margin-bottom: 0.15rem;
}

/* --- Footnotes and onward links ----------------------------------------- */
.gov-footnotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.15rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.gov-note {
  padding: 1.15rem 1.25rem;
  border-left: 3px solid var(--ceb-blue-light);
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

.gov-note strong {
  color: var(--ceb-blue-dark);
  font-weight: 700;
}

.gov-note a {
  color: var(--ceb-blue-primary);
  font-weight: 600;
  text-decoration: underline;
}

.gov-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2rem;
}

.gov-link-plain {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ceb-blue-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gov-link-plain:hover { color: var(--ceb-gold-dark); }

@media (max-width: 900px) {
  /* One column: the control functions move below the chain they sit outside of,
     and the sticky behaviour is dropped because there is nothing to scroll
     against any more. */
  .gov-chart { grid-template-columns: 1fr; }
  .gov-controls { position: static; }
  .gov-node.is-committees { margin-left: 1rem; }
}

@media (max-width: 560px) {
  .gov-node { padding: 1.1rem 1.15rem; }
  .gov-node + .gov-node::before { left: 1.5rem; }
  .gov-node.is-committees { margin-left: 0; }
}