/* ==========================================================================
   AFRINIC Style Sheet
   Version: 1.02 Brand polish (2026-07-10)
   Changes (1.02):
     - Design tokens applied: Burnished Clay #D15E14 + grey scale only (design_tokens.md).
     - Off-palette slate/green/amber/blue values mapped to the token grey ramp / clay.
     - Shadows removed (flat hairline aesthetic); decorative gradients flattened.
     - Headings moved to Helvetica Neue LT Pro 75 Bd (system fallback preserved).
     - Loop logotypes: shared cap-height token --lgh, proportional scaling per mark.
   ------------------------------------------------------------------------
   Changes:
     - Standardize URL structure across all pages for SEO consistency.
     - Identify and remove unused PDF and PNG files from /assets.
     - Refactor site layout from fixed-width to fluid (using clamp/min) + ultra-wide constraints.
     - Remove various old copies of duplicate annual reports.
     - Rework layout on icp-2-review.html page (vertical timeline, cards).
   ========================================================================== */

/* ==========================================================================
   CSS VARIABLES & SYSTEM VARIABLES (Light Theme)
   ========================================================================== */
:root {
  /* HSL Color Definitions for styling flexibility */
  --primary-h: 24;
  --primary-s: 82%;
  --primary-l: 45%;
  --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-hover: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 8%));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 95%);
  
  --secondary-h: 0;
  --secondary-s: 0%;
  --secondary-l: 10%;
  --secondary-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
  
  /* Design tokens — canonical palette (design_tokens.md) */
  --clay: #D15E14;        /* Burnished Clay — sole hue */
  --clay-deep: #A64A10;   /* links & clay text at body sizes (WCAG AA) */
  --clay-tint: #F8EADE;
  --ink: #1A1A1A;
  --g700: #404040; --g500: #6E6E6E; --g300: #B3B3B3; --g150: #D9D9D9; --g50: #F4F4F4;
  /* Aliases used by v3 content components (kept from v3) */
  --white: #FFFFFF;
  --black: #000000;
  --hairline: 1px solid var(--g150);
  --mono: "SF Mono", Consolas, Menlo, monospace;

  /* Fonts — Helvetica Neue LT Pro cut system with system fallbacks */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "HelveticaNeueLT Pro 75 Bd", "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-light: "HelveticaNeueLT Pro 45 Lt", "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label: "HelveticaNeueLT Pro 65 Md", "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-numeral: "HelveticaNeueLT Pro 77 BdCn", "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Loop logotypes — shared cap-height token (same height on a page) */
  --lgh: clamp(24px, 2.2vw, 30px);
  --lgh-title: clamp(24px, 2.6vw, 34px); /* page-title logotype cap height */
  
  /* Box Shadow Definitions */
  /* Flat hairline aesthetic — no shadows (branding_guidelines.md §4) */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  
  /* Base Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Layout constraints */
  /* --container-width removed: .container is now fully fluid */
  --header-height: 80px;

  /* Theme overrides */
  --bg-color: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-glass: rgba(255, 255, 255, 0.9);
  --text-color: #1A1A1A;
  --text-muted: #6E6E6E;
  --border-color: #D9D9D9;
  --card-shadow: var(--shadow-sm);
  
  --utility-bg: #000000;
  --utility-text: #ffffff;
  
  --footer-bg: #F4F4F4;
  --footer-text: #404040;
}

/* ==========================================================================
   GLOBAL RESETS
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Fluid base: 15px on mobile, scales smoothly to 17px on wide screens */
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

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

/* ==========================================================================
   COMMON LAYOUTS & UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  /* TRUE FLUID: no max-width cap — stretches to full viewport width.
     Only the inner grid / reading columns constrain line length. */
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* Constrained-width inner wrapper — use this INSIDE .container for text-heavy
   sections that need a comfortable reading width on ultra-wide monitors */
.container-inner {
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
}

/* Wider variant for full-bleed sections (heroes, banners) */
.container-fluid {
  width: 100%;
  /* No max-width — full viewport. Use for hero/banner sections */
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* Break an element out of its container to span full viewport width */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Auto-fill responsive grid — columns min 280px, fills available space */
.fluid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.flex {
  display: flex;
  gap: 1rem;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.section-padding {
  /* Fluid vertical rhythm: 3rem on mobile → 6rem on desktop */
  padding-block: clamp(3rem, 7vw, 6rem);
}

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

.section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

/* Glassmorphism Card base */
.glass-panel {
  background: var(--bg-surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary {
  background-color: var(--primary-color);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.btn-outline:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 9999px;
  background-color: var(--primary-light);
  color: var(--primary-color);
}

/* Divider */
.divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 3rem 0;
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
/* 1. Utility Top Bar */
.utility-bar {
  background-color: var(--utility-bg);
  color: var(--utility-text);
  padding: 0.5rem 0;
  font-size: 0.8rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.utility-bar a {
  color: #D15E14;
}

.utility-bar a:hover {
  color: #ffffff;
}

.lang-selector {
  display: flex;
  gap: 1rem;
}

.lang-flag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.quick-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box input {
  padding: 0.25rem 1.8rem 0.25rem 0.75rem;
  border-radius: 4px;
  border: 1px solid #404040;
  background: #1A1A1A;
  color: #ffffff;
  font-size: 0.75rem;
}

.search-box button {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
}



/* 2. Main Sticky Header */
.main-header {
  height: var(--header-height);
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-normal);
}

.header-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 52px;
  width: auto;
}

.offcanvas-header img {
  width: auto;
}

/* Desktop Menu Layout */
.nav-menu {
  display: flex;
  gap: 0.4rem;
  height: 100%;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary-color);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}

.nav-item:hover .nav-link {
  color: var(--primary-color);
}

.nav-item:hover .nav-link::after {
  transform: scaleX(1);
}

/* Dropdown Menu styling */
.nav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: clamp(200px, 18vw, 280px);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-lg);
  padding: 0.75rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 10;
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-color);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dropdown-item a:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
  padding-left: 1.5rem;
}

/* Mobile Toggler */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--primary-color);
  cursor: pointer;
}

/* ==========================================================================
   OFF-CANVAS MOBILE MENU
   ========================================================================== */
.offcanvas-drawer {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background-color: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  transition: right var(--transition-normal);
  padding: 2rem 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.offcanvas-drawer.open {
  right: 0;
}

.offcanvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.close-offcanvas {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
}

.mobile-menu-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-nav-item {
  border-bottom: 1px solid var(--border-color);
}

.mobile-nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
}

.mobile-nav-submenu {
  display: none;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}

.mobile-nav-submenu.open {
  display: block;
}

.mobile-nav-submenu li a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.mobile-submenu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary-color);
  font-size: 0.8rem;
  transition: transform var(--transition-fast);
}

.mobile-submenu-toggle.rotate {
  transform: rotate(180deg);
}

/* Off-canvas Overlay */
.offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.offcanvas-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Translation notice banner */
.translation-notice {
  background-color: #F4F4F4;
  border-bottom: 1px solid #D9D9D9;
  color: #1A1A1A;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  text-align: center;
  font-weight: 500;
}


.translation-notice i {
  color: var(--primary-color);
  margin-right: 0.5rem;
}

/* ==========================================================================
   HERO CAROUSEL
   ========================================================================== */
.hero-section {
  position: relative;
  height: clamp(300px, 45vw, 560px);
  overflow: hidden;
  background-color: #1A1A1A;
}

.carousel-inner {
  height: 100%;
  position: relative;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow) ease-in-out, visibility var(--transition-slow) ease-in-out;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.carousel-item.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 100%);
  z-index: 2;
}

.carousel-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  max-width: min(600px, 90%);
  padding: 2rem;
}

.carousel-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeInUp 0.6s ease forwards;
}

.carousel-content p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  animation: fadeInUp 0.8s ease forwards;
}

.carousel-btn {
  animation: fadeInUp 1s ease forwards;
}

/* Indicators */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 0.5rem;
}

.carousel-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), border var(--transition-fast);
}

.carousel-indicator.active {
  background-color: var(--primary-color);
  border-color: #ffffff;
  transform: scale(1.1);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   QUICK LINKS (5 columns)
   ========================================================================== */
.quicklinks-section {
  padding: 3rem 0;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

.quicklinks-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  text-align: center;
}

.quicklink-card {
  padding: 1.5rem 1rem;
  border-radius: 8px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.quicklink-card:hover {
  transform: translateY(-5px);
  background-color: var(--primary-light);
}

.quicklink-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast);
}

.quicklink-card:hover .quicklink-icon-wrap {
  background-color: var(--bg-surface);
  border-color: var(--primary-color);
}

.quicklink-icon-wrap img {
  width: 48px;
  height: 48px;
}

.quicklink-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-color);
}

.quicklink-card:hover h3 {
  color: var(--primary-color);
}

/* ==========================================================================
   MAIN DASHBOARD (8 / 4 Grid Split)
   ========================================================================== */
.dashboard-grid {
  grid-template-columns: 8fr 4fr;
  align-items: start;
  /* Cap dashboard grid to prevent excessively wide columns on ultrawide */
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
}

/* Left: Blog Feed */
.blog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.blog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.blog-img {
  position: relative;
  overflow: hidden;
  height: clamp(130px, 15vw, 200px);
}

.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

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

.blog-meta {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.blog-info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.blog-title:hover {
  color: var(--primary-color);
}

.blog-excerpt {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* justified by the global p rule */
}

.blog-more {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.blog-more:hover {
  color: var(--primary-hover);
}

.blog-footer-btn {
  margin-top: 2rem;
}

/* Right Sidebar: News list */
.news-sidebar {
  padding: 1.5rem;
}

.sidebar-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-color);
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.news-item {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

.news-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.news-item-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

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

.news-item-readmore {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-color);
}

/* ==========================================================================
   OUR WORK SECTION (4 Columns)
   ========================================================================== */
.work-section {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-color);
}

.work-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.work-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.work-img {
  height: clamp(120px, 12vw, 180px);
  overflow: hidden;
}

.work-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

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

.work-info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.work-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.work-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  /* justified by the global p rule */
}

.work-card-btn {
  margin-top: auto;
}

.work-footer-btn {
  margin-top: 3rem;
}

/* ==========================================================================
   SUBPAGES: GENERAL STYLING
   ========================================================================== */
.page-hero {
  background-color: var(--bg-surface);
  color: var(--text-color);
  padding-block: clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.25rem);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.page-hero-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
}

.breadcrumb {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--primary-color);
}

.breadcrumb-separator {
  color: var(--text-muted);
  opacity: 0.5;
}

/* Sidebar Layout Grid */
.sidebar-layout-grid {
  display: grid;
  /* TRUE FLUID: sidebar fixed at 260px; content fills the remaining viewport
     width edge-to-edge, matching the homepage. No centred max-width box. */
  grid-template-columns: 260px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  width: 100%;
}

@media (max-width: 900px) {
  .sidebar-layout-grid {
    grid-template-columns: 1fr;
  }
}

.sidebar-nav {
  /* De-boxed: no card background/border/radius/shadow. Kept as a clean
     side menu with a single hairline divider separating it from content. */
  background-color: transparent;
  border: none;
  border-right: var(--hairline);
  border-radius: 0;
  padding: 0.25rem 1.5rem 1.5rem 0;
  box-shadow: none;
}

.sidebar-nav h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-color);
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-menu li {
  position: relative;
}

.sidebar-menu a {
  display: block;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color);
  border-radius: 4px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar-menu a:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.sidebar-menu li.active > a {
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: 700;
}

/* Current page inside an open submenu. Colour + weight only: the parent
   item already carries the filled `active` bar, so a second fill would
   read as two current pages. */
.sidebar-menu li.active-sub > a {
  color: var(--primary-color);
  font-weight: 700;
}

/* Sidebar Submenus */
.sidebar-menu ul {
  margin-left: 0.75rem;
  padding-left: 0.5rem;
  border-left: 1px dashed var(--border-color);
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sidebar-menu ul li a {
  font-size: 0.825rem;
  padding: 0.25rem 0.5rem;
}

/* SUBPAGE content wrapper */
.subpage-body {
  padding: 4rem 0;
}

.rich-text {
  /* One uniform body size. The html root already scales fluidly
     (15px -> 17px); a second vw-based clamp here compounded on top of
     it and pushed body text to ~19px. 1rem = exactly the root size,
     keeping body copy uniform with the rest of the UI. */
  font-size: 1rem;
  color: var(--text-color);
  line-height: 1.75;
  /* Reading line length managed by the sidebar-layout-grid max-width above */
}

.rich-text p {
  margin-bottom: 1.5rem;
}

.rich-text strong {
  /* Bold conveys weight only; colour is reserved for actual links.
     A <strong> inside an <a> still inherits the link colour. (2026-08-03) */
  color: inherit;
}

/* SUBPAGE: About us specifics */
.about-quote {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  text-align: center;
  font-weight: 500;
  color: var(--text-color);
  max-width: min(800px, 100%);
  margin: 0 auto 3rem auto;
  line-height: 1.5;
}

.about-map-section {
  grid-template-columns: 5fr 7fr;
  align-items: center;
  margin-top: 4rem;
}

.map-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.map-list li {
  position: relative;
  padding-left: 1.5rem;
}

.map-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-size: 1.5rem;
  line-height: 1;
  top: -2px;
}

.vision-mission-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.vm-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.vm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.vm-card h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.values-section {
  text-align: center;
  margin-bottom: 4rem;
}

.values-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.values-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 1.5rem;
}

.value-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.value-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

/* ACCORDIONS / DETAILS DISCLOSURES */
.policy-section {
  max-width: min(900px, 100%);
  margin: 0 auto;
}

/* Styling native details disclosures */
.disclosure-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.disclosure-card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.disclosure-card[open] {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.disclosure-card summary {
  padding: 1.25rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  list-style: none; /* Hide default arrow */
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

/* Webkit specific summary arrow hide */
.disclosure-card summary::-webkit-details-marker {
  display: none;
}

.disclosure-card summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--primary-color);
  font-family: monospace;
  font-weight: bold;
  transition: transform var(--transition-fast);
}

.disclosure-card[open] summary::after {
  content: '−';
}

.disclosure-content {
  padding: 0 1.5rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border-color);
  padding-top: 1.25rem;
  font-size: 0.95rem;
  animation: slideDown 0.3s ease-out;
}

.disclosure-content ul {
  padding-left: 1.5rem;
  list-style-type: disc;
  margin-top: 0.75rem;
}

.disclosure-content li {
  margin-bottom: 0.5rem;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SUBPAGE: Contact specifics */
.contact-grid {
  grid-template-columns: 5fr 7fr;
}

.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-card {
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
}

.info-card-icon {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.info-card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.info-card-content {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.contact-form-panel {
  padding: 2.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(209, 94, 20, 0.15);
}

/* User inputs validation styles */
.form-control:user-invalid {
  border-color: #A64A10;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-control:user-valid {
  border-color: #404040;
}

/* SUBPAGE: WHOIS lookup specifics */
.whois-panel {
  max-width: 800px;
  margin: 0 auto;
}

.whois-search-wrap {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.whois-search-input {
  flex-grow: 1;
  padding: 0.8rem 1.2rem;
  border-radius: 6px;
  border: 2px solid var(--border-color);
  font-size: 1.1rem;
  background-color: var(--bg-surface);
}

.whois-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.whois-terminal {
  background-color: #000000;
  color: #D9D9D9;
  border: 1px solid #1A1A1A;
  border-radius: 8px;
  padding: 1.5rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  min-height: 350px;
  max-height: 600px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  white-space: pre-wrap;
}

.whois-terminal-header {
  border-bottom: 1px solid #1A1A1A;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  color: #6E6E6E;
  display: flex;
  justify-content: space-between;
}

.whois-terminal-prompt {
  color: #6E6E6E;
}

.whois-terminal-keyword {
  color: #D15E14;
}

.whois-terminal-value {
  color: #ffffff;
}

.whois-examples {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.whois-examples a {
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   FOOTER SECTION (Sleek Light Redesign)
   ========================================================================== */
.main-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  margin-top: auto;
  font-size: 0.9rem;
  border-top: 1px solid #D9D9D9;
}

.footer-bottom-bar {
  padding: 3rem 0;
}

.footer-bottom-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.social-icons {
  display: flex;
  gap: 0.75rem;
}

.social-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #6E6E6E;
  text-decoration: none;
  transition: all var(--transition-fast);
  border: 1px solid #D9D9D9;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.social-icon-link:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  transform: translateY(-2px);
  border-color: var(--primary-color);
}

.footer-clock-box {
  background-color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  border: 1px solid #D9D9D9;
  font-weight: 500;
  font-size: 0.85rem;
  color: #404040;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.footer-clock-box span {
  color: var(--primary-color);
  font-weight: 700;
  margin-left: 0.5rem;
}

.footer-legal-links {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.8rem;
  color: #B3B3B3; /* For the pipe separators */
}

.footer-legal-links a {
  white-space: nowrap;
}

/* Language switcher (EN | FR) */
.lang-switch {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.lang-switch a,
.lang-switch .lang-current {
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  text-decoration: none;
  line-height: 1.6;
}
.lang-switch a {
  color: #6E6E6E;
  border: 1px solid #D9D9D9;
}
.lang-switch a:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.lang-switch .lang-current {
  background-color: var(--primary-color);
  color: #ffffff;
}
.lang-switch .lang-sep {
  display: none;
}

/* Right-to-left article body (e.g. Arabic minutes) */
.rich-text[dir="rtl"] {
  direction: rtl;
  text-align: right;
}
.rich-text[dir="rtl"] ul,
.rich-text[dir="rtl"] ol {
  padding-right: 1.5rem;
  padding-left: 0;
}
.rich-text[dir="rtl"] th,
.rich-text[dir="rtl"] td {
  text-align: right;
}

/* Scroll-to-top button */
#scrollup {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 200;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
}
#scrollup.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#scrollup:hover {
  background-color: #A64A10;
  color: #ffffff;
}
#scrollup i {
  font-size: 1.2rem;
}

.footer-legal-links a {
  color: #6E6E6E;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.footer-legal-links a:hover {
  color: var(--primary-color);
}

.footer-copyright-section {
  padding: 0.5rem 0;
  background-color: #ffffff;
  border-top: 1px solid #D9D9D9;
}

.footer-copyright-section .container {
  display: block;
  position: relative;
  color: #6E6E6E;
  font-size: 0.85rem;
  padding-right: 80px; /* Space for the ISO badge */
  padding-top: 10px;   /* Vertical padding to center text */
  padding-bottom: 10px;
  line-height: 1.5;
}

.footer-copyright-section .container img {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}


/* ==========================================================================
   MEDIA QUERIES (Mobile & Tablet Responsiveness)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Dashboard layout */
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* Sidebar layout */
  .sidebar-layout-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .sidebar-nav {
    display: block;
    width: 100%;
    margin-bottom: 2rem;
    background-color: transparent;
    border: none;
    border-bottom: var(--hairline);
    border-radius: 0;
    padding: 0 0 1.5rem 0;
    box-sizing: border-box;
  }

  /* Navigation */
  .nav-menu {
    display: none;
  }
  
  .mobile-nav-toggle {
    display: block;
  }
  
  /* Hero */
  .hero-section {
    height: 400px;
  }
  
  .carousel-content h2 {
    font-size: 1.8rem;
  }
  
  /* Quicklinks (5 columns to 2/3) */
  .quicklinks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .quicklink-card:nth-child(5) {
    grid-column: span 2;
  }
  
  /* Blogs & News */
  .blog-grid {
    grid-template-columns: 1fr;
  }
  
  .work-grid {
    grid-template-columns: 1fr;
  }
  
  /* About us elements */
  .about-map-section {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .vision-mission-grid {
    grid-template-columns: 1fr;
  }
  
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Contact page */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .contact-form-panel {
    padding: 1.5rem;
  }
  
  /* Footer */
  .footer-menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
  
  .footer-bottom-container {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  
  .footer-clock-box {
    justify-content: center;
  }
  
  .footer-legal-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Quicklinks */
  .quicklinks-grid {
    grid-template-columns: 1fr;
  }
  
  .quicklink-card:nth-child(5) {
    grid-column: span 1;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-menu-grid {
    grid-template-columns: 1fr;
  }
  
  .page-hero-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .whois-search-wrap {
    flex-direction: column;
  }
}

/* Premium Card & Styling Enhancements */
.card-premium {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card-premium:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

/* Premium Tabs Styling */
.premium-tabs-container {
  margin: 3rem 0;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  background: #F4F4F4;
  border-bottom: 1px solid var(--border-color);
  padding: 0 1rem;
}

.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 1rem 1.5rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tab-btn:hover {
  color: var(--primary-color);
}

.tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.tabs-content {
  padding: 2rem;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: tabFadeIn 0.4s ease forwards;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Content List Enhancement */
.premium-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-left: 0;
  list-style: none;
}

.premium-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1.05rem;
}

.premium-list li::before {
  content: "\f00c"; /* FontAwesome Check */
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-size: 0.95rem;
  top: 2px;
}

/* Premium Table Styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
  background-color: var(--bg-surface);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-color);
}

table th, table td {
  padding: 1.1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.5;
}

table tr:last-child td {
  border-bottom: none;
}

table tr:first-child td, table th {
  background-color: #F4F4F4;
  font-weight: 600;
  color: var(--text-dark);
  border-bottom: 2px solid var(--border-color);
}

table tr:hover {
  background-color: rgba(209, 96, 21, 0.02);
  transition: background-color var(--transition-fast) ease;
}

table a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

table a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   Joomla Page Builder (sppb) Modern Overrides
   ========================================================================== */

/* Layout Rows and Grid */
.sppb-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  margin-bottom: 2rem;
}

[class*="sppb-col-"] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .sppb-col-md-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .sppb-col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .sppb-col-md-3  { flex: 0 0 25%; max-width: 25%; }
  .sppb-col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .sppb-col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .sppb-col-md-6  { flex: 0 0 50%; max-width: 50%; }
  .sppb-col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .sppb-col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .sppb-col-md-9  { flex: 0 0 75%; max-width: 75%; }
  .sppb-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .sppb-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .sppb-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 767px) {
  [class*="sppb-col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem;
  }
}

/* Premium Card wrapper for individual Page Builder addon content (except single-column rows) */
.sppb-row:not(:has(.sppb-col-md-12)) .sppb-column-addons > div,
.sppb-addon-text-block,
.sppb-addon-single-image {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.75rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
}

.sppb-row:not(:has(.sppb-col-md-12)) .sppb-column-addons > div:hover,
.sppb-addon-text-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  border-color: rgba(209, 96, 21, 0.15);
}

/* For full width blocks, don't display background/border unless specified */
.sppb-col-md-12 .sppb-addon-text-block {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.sppb-col-md-12 .sppb-addon-text-block:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

/* Addon Title styling */
.sppb-addon-title, .sppb-addon-animated-heading {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--primary-light-border);
  padding-bottom: 0.5rem;
}

/* Content Lists customization */
.sppb-addon-content ul, 
.sppb-addon-text-block ul,
.rich-text ul {
  list-style: none;
  padding-left: 0;
  margin: 1.25rem 0;
}

.sppb-addon-content ul li, 
.sppb-addon-text-block ul li,
.rich-text ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.sppb-addon-content ul li::before, 
.sppb-addon-text-block ul li::before,
.rich-text ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 1.1rem;
}

/* Exclude list items with icons/social links */
.sppb-addon-content ul li:has(i)::before,
.sppb-addon-text-block ul li:has(i)::before,
.rich-text ul li:has(i)::before,
.sppb-addon-content ul li:has(.fa)::before,
.sppb-addon-text-block ul li:has(.fa)::before,
.rich-text ul li:has(.fa)::before,
[class*="social"] li::before {
  content: none !important;
}

.sppb-addon-content ul li:has(i),
.sppb-addon-text-block ul li:has(i),
.rich-text ul li:has(i),
.sppb-addon-content ul li:has(.fa),
.sppb-addon-text-block ul li:has(.fa),
.rich-text ul li:has(.fa) {
  padding-left: 0 !important;
}

.no-ticks li::before {
  content: none !important;
}
.no-ticks li {
  padding-left: 0 !important;
}

/* Ordered Lists */
.sppb-addon-content ol, 
.sppb-addon-text-block ol,
.rich-text ol {
  /* The global reset strips list markers; article prose needs its numbers
     back — enrolment steps and eligibility criteria read as sequences. */
  list-style: decimal outside;
  padding-left: 1.5rem;
  margin: 1.25rem 0;
}

.sppb-addon-content ol li, 
.sppb-addon-text-block ol li,
.rich-text ol li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
  color: var(--text-dark);
}

/* Page Builder Buttons formatting */
.sppb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}

.sppb-btn-primary, .sppb-btn-custom, .sppb-btn-success, .sppb-btn-rounded {
  background-color: var(--primary-color);
  color: #ffffff !important;
}

.sppb-btn-primary:hover, .sppb-btn-custom:hover, .sppb-btn-success:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(209, 94, 20, 0.2);
}

.sppb-btn-block {
  display: flex;
  width: 100%;
}

/* Image alignment within page builder modules */
.sppb-img-responsive {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  display: block;
}

/* Legacy Tabs adaptation to Premium Tabs */
.nav-tabs, .rl_tabs > ul {
  display: flex;
  flex-wrap: wrap;
  background: #F4F4F4;
  border-bottom: 1px solid var(--border-color);
  padding: 0 1rem;
  margin: 0;
  list-style: none;
}

.nav-tabs li, .rl_tabs > ul li {
  margin: 0;
}

.nav-tabs li::before, .tabs-nav li::before, .rl_tabs > ul li::before {
  content: none !important;
  padding: 0 !important;
}

.nav-tabs li a, .rl_tabs > ul li a {
  display: inline-block;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 1rem 1.5rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.nav-tabs li a:hover, .rl_tabs > ul li a:hover {
  color: var(--primary-color);
}

.nav-tabs li.active a, .rl_tabs > ul li.active a,
.nav-tabs li a.active, .rl_tabs > ul li a.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.tab-content, .rl_tabs > .tab-content {
  padding: 2rem;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Hide default accordion headers that might be inserted inside the tab content block */
.rl_tabs-title, .nn_tabs-title {
  display: none !important;
}

/* Base accordion styling if used as fallback */
.sppb-addon-accordion {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.sppb-addon-accordion .sppb-panel {
  border-bottom: 1px solid var(--border-color);
}

.sppb-addon-accordion .sppb-panel:last-child {
  border-bottom: none;
}

.sppb-addon-accordion .sppb-panel-heading {
  background: #F4F4F4;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-dark);
  transition: background-color 0.2s ease;
}

.sppb-addon-accordion .sppb-panel-heading:hover {
  background: var(--primary-light);
  color: var(--primary-color);
}

.sppb-addon-accordion .sppb-panel-collapse {
  padding: 1.5rem;
  background: #ffffff;
}

/* Hide language selector and translation notice globally */
.lang-selector, .translation-notice {
  display: none !important;
}

/* Hide social sharing, print friendly button, and last modified timestamps globally */
.helix-social-share, .printfriendly-button-wrapper, dd.modified {
  display: none !important;
}

/* Responsive Table Wrapper */
.responsive-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}

/* Stacked Layout Row Container */
.stacked-layout-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* Remove nested box styling for Vision/Mission and Core Values on About page */
#column-wrap-id-1702273482491, #column-wrap-id-1702273482493,
#column-id-1702273482491, #column-id-1702273482493,
#sppb-addon-wrapper-1702273482492, #sppb-addon-wrapper-1702273482492 *,
#sppb-addon-wrapper-1702273482494, #sppb-addon-wrapper-1702273482494 *,
#column-wrap-id-1701941444648, #column-wrap-id-1701941444651,
#column-wrap-id-1701941444654, #column-wrap-id-1701941444657,
#column-id-1701941444648, #column-id-1701941444651,
#column-id-1701941444654, #column-id-1701941444657,
#sppb-addon-wrapper-1701941444649, #sppb-addon-wrapper-1701941444649 *,
#sppb-addon-wrapper-1701941444652, #sppb-addon-wrapper-1701941444652 *,
#sppb-addon-wrapper-1701941444655, #sppb-addon-wrapper-1701941444655 *,
#sppb-addon-wrapper-1701941444658, #sppb-addon-wrapper-1701941444658 * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* Ensure the text is visible and spaced cleanly */
#sppb-addon-1702273482492 .sppb-addon-content,
#sppb-addon-1702273482494 .sppb-addon-content,
#sppb-addon-1701941444649 .sppb-addon-content,
#sppb-addon-1701941444652 .sppb-addon-content,
#sppb-addon-1701941444655 .sppb-addon-content,
#sppb-addon-1701941444658 .sppb-addon-content {
  padding: 0.5rem 0 !important;
  margin: 0 !important;
}

/* Sidebar Layout Grid Modifier (when sidebar is removed) */
.sidebar-layout-grid.no-sidebar {
  display: block;
}

/* News article layout: article on the left, "More News" list on the right.
   Content leads; the aside is a secondary, fixed-width column that drops below
   the article on narrow screens. */
.sidebar-layout-grid.with-news-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  width: 100%;
}
@media (max-width: 900px) {
  .sidebar-layout-grid.with-news-aside {
    grid-template-columns: 1fr;
  }
}

.news-aside {
  position: sticky;
  top: 1rem;
  align-self: start;
}
.news-aside h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-color);
}
.news-aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-aside li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--g150, #D9D9D9);
}
.news-aside li:last-child {
  border-bottom: none;
}
.news-aside a {
  display: block;
  color: #1A1A1A;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  transition: color 0.2s;
}
.news-aside a:hover {
  color: #A64A10;
}
.news-aside .news-aside-date {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--g500, #6E6E6E);
  font-weight: 400;
}
@media (max-width: 900px) {
  .news-aside { position: static; margin-top: 2rem; }
}






/* ==========================================================================
   PREMIUM HOMEPAGE REDESIGN
   ========================================================================== */
.premium-hero {
    position: relative;
    padding: 8rem 0 12rem 0;
    background: #000000;
    color: #ffffff;
    overflow: hidden;
}

.hero-bg-shapes {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
    z-index: 0;
}

.hero-bg-shapes .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.hero-bg-shapes .shape-1 {
    width: 500px; height: 500px;
    background: var(--primary-color);
    top: -100px; right: -100px;
}

.hero-bg-shapes .shape-2 {
    width: 400px; height: 400px;
    background: #ffffff;
    opacity: 0.1;
    bottom: -150px; left: 10%;
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    text-align: center;
}

.hero-text-block {
    max-width: 800px;
}

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

.hero-title {
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: #ffffff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #B3B3B3;
    margin-bottom: 3rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-hero-primary {
    background: var(--primary-color);
    color: #ffffff;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 2px solid var(--primary-color);
}

.btn-hero-primary:hover {
    background: transparent;
    color: var(--primary-color);
    transform: translateY(-2px);
}

.btn-hero-secondary {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 2px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
}

.btn-hero-secondary:hover {
    background: #ffffff;
    color: #1A1A1A;
    transform: translateY(-2px);
}

.premium-quicklinks {
    margin-top: -6rem;
    position: relative;
    z-index: 10;
}

.quicklinks-grid-new {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.ql-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    transition: all var(--transition-normal);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.ql-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 50px rgba(0,0,0,0.12);
    border-color: var(--primary-color);
}

.ql-icon {
    width: 60px; height: 60px;
    background: #F4F4F4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    margin: 0 auto 1.5rem auto;
    transition: all var(--transition-fast);
}

.ql-card:hover .ql-icon {
    background: var(--primary-color);
    color: #ffffff;
}

.ql-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.ql-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.section-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
}

.section-header-modern h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: #1A1A1A;
}

.view-all-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.1rem;
}

.view-all-link:hover {
    text-decoration: underline;
}

.blog-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.blog-card-new {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border: 1px solid #D9D9D9;
    transition: transform var(--transition-normal);
}

.blog-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.blog-img-new {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.blog-img-new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.blog-card-new:hover .blog-img-new img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 1rem; left: 1rem;
    background: var(--primary-color);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.blog-content-new {
    padding: 2rem;
}

.blog-content-new h3 {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.blog-content-new h3 a {
    color: #1A1A1A;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.blog-content-new h3 a:hover {
    color: var(--primary-color);
}

.blog-content-new p {
    color: var(--text-muted);
    line-height: 1.6;
}

.premium-work {
    background: #F4F4F4;
    border-top: 1px solid #D9D9D9;
}

.work-grid-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.work-card-new {
    background: #ffffff;
    padding: 2.5rem 2rem;
    border-radius: 16px;
    border: 1px solid #D9D9D9;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: all var(--transition-normal);
}

.work-card-new:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0,0,0,0.06);
    border-color: #B3B3B3;
}

.work-icon-new {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.work-card-new h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1A1A1A;
}

.work-card-new p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.work-card-new a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.work-card-new a:hover {
    text-decoration: underline;
}

@media (max-width: 992px) {
    .hero-title { font-size: 3.5rem; }
    .quicklinks-grid-new, .work-grid-modern { grid-template-columns: repeat(2, 1fr); }
    .blog-grid-modern { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .premium-quicklinks { margin-top: 2rem; }
    .quicklinks-grid-new, .work-grid-modern { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; }
}



/* ==========================================================================
   HOMEPAGE CARD GRID CATEGORIES
   ========================================================================== */
.premium-categories {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  background: #F4F4F4;
}

/* Loop-glyph page titles */
.page-title-loop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.logotype-title { width: auto; max-width: 100%; display: block; }
.logotype-title :is(path, line, circle, rect, polyline) {
  fill: none; stroke: var(--ink);
  stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;
}
.page-title-text {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g500);
  line-height: 1.4;
}

/* Section title */
.services-header {
  text-align: center;
  margin-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
.services-kicker {
  display: block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.75rem;
}
.services-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.services-sub {
  font-family: var(--font-light);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--g500);
  max-width: 60ch;
  margin-inline: auto;
}

.category-section {
  margin-bottom: clamp(4.5rem, 9vw, 7rem);
}
.category-section:last-child {
  margin-bottom: 0;
}

.cat-header-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.75rem;
}

.cat-header {
  font-family: var(--font-display);
  color: #D15E14;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  text-align: center;
}

.cat-sub {
  font-family: var(--font-light);
  color: #6E6E6E;
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
}

.cards-grid {
  /* Max 3 marks per row; the 4th cascades to the next row.
     Container capped at 3 x 380px card + 2 gaps so a 4th column never fits. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
  justify-content: center;
  gap: 2.5rem 2rem;
  max-width: calc(3 * 380px + 2 * 2rem);
  margin-inline: auto;
}

/* Service cards: no box — transparent ground, no border, no shadow,
   no hover effect. Marks bottom-align on a shared cap baseline so every
   logotype and its descriptor line up across the row. */
.cat-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.5rem 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  max-width: 380px;
  flex: 1 1 280px;
  box-shadow: none;
  margin: 0 auto;
}

/* Loop logotypes — one shared cap height (--lgh); each mark scales
   proportionally: height = --lgh x viewBoxHeight / 22.43 (logotype_typeface.md) */
.cat-card img,
.cat-card svg.logotype {
  width: auto;
  height: var(--lgh);
  max-width: 100%;
  margin-top: calc(var(--lgh) * 0.573); /* bottom-align in the shared 1.573 slot */
  margin-bottom: 0.6rem;
  object-fit: contain;
  object-position: center bottom;
}
.cat-card svg.logotype :is(path,line,circle,rect,polyline){fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}
.cat-card svg.logotype .acc{stroke:var(--ink)} /* logotypes are one colour on the services grid */
.cat-card :is(img,svg)[src*="agmm.svg"], .cat-card svg.logotype[data-src*="agmm.svg"],
.cat-card :is(img,svg)[src*="ppm.svg"],  .cat-card svg.logotype[data-src*="ppm.svg"] {
  height: calc(var(--lgh) * 1.573);
  margin-top: 0;
}
.cat-card :is(img,svg)[src*="domain.svg"], .cat-card svg.logotype[data-src*="domain.svg"] {
  height: calc(var(--lgh) * 1.573);
  margin-top: 0;
}
.cat-card :is(img,svg)[src*="nmrp.svg"], .cat-card svg.logotype[data-src*="nmrp.svg"] {
  height: calc(var(--lgh) * 1.073);
  margin-top: calc(var(--lgh) * 0.5);
}
.cat-card :is(img,svg)[src*="webinar.svg"], .cat-card svg.logotype[data-src*="webinar.svg"] {
  height: calc(var(--lgh) * 1.073);
  margin-top: calc(var(--lgh) * 0.5);
}
.cat-card :is(img,svg)[src*="ip_academy.svg"], .cat-card svg.logotype[data-src*="ip_academy.svg"] {
  height: calc(var(--lgh) * 1.573);
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cat-card svg.logotype * { transition: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

.cat-desc {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #404040;
  margin-bottom: 0.35rem;
  font-weight: 700;
  line-height: 1.4;
  min-height: 2.6em;
}

.cat-btn {
  background: transparent;
  color: var(--g700);
  border: 1px solid var(--g300);
  font-size: 0.75rem;
  padding: 0.5rem 1.2rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
  margin-top: 0.25rem;
}

.cat-btn:hover {
  background: transparent;
  border-color: var(--clay);
  color: var(--clay-deep);
  text-decoration: none;
}

/* The crest and webinar map need a bit more height because they aren't wide logotypes */
.cat-item img[src*="ip_academy.svg"],
.cat-item img[src*="certi_6.svg"],
.cat-item img[src*="webinar.svg"] {
  height: 60px; 
}

.cat-desc {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #404040;
  margin-bottom: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.cat-btn {
  background: transparent;
  color: var(--g700);
  border: 1px solid var(--g300);
  font-size: 0.75rem;
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}

.cat-btn:hover {
  background: transparent;
  border-color: var(--clay);
  color: var(--clay-deep);
  text-decoration: none;
}

@media (max-width: 1200px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 3rem;
  }
  .cat-col:nth-child(3) { border-right: none; }
  .cat-col:nth-child(5) { border-right: none; }
}

@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: 1fr;
  }
  .cat-col { border-right: none; margin-bottom: 2rem; border-bottom: 1px solid #B3B3B3; padding-bottom: 2rem; }
  .cat-col:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
}

/* ==========================================================================
   PDWG CO-CHAIRS TABS STYLING
   ========================================================================== */
.co-chairs-profiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
  .co-chairs-profiles {
    grid-template-columns: 1fr;
  }
}

.co-chair-card {
  background: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}

.co-chair-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.co-chair-card img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1.5rem auto;
  border: 4px solid var(--primary-color, #D15E14);
}

.co-chair-card h3 {
  margin: 0.5rem 0;
  color: #1A1A1A;
  font-size: 1.25rem;
  font-weight: 700;
}

.co-chair-country {
  color: #6E6E6E;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.co-chair-term {
  color: #D15E14;
  font-size: 0.9rem;
  margin: 0;
  font-weight: 500;
}

.co-chairs-description {
  background: #F4F4F4;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.co-chairs-description h3 {
  color: #1A1A1A;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.co-chairs-description h4 {
  color: #1A1A1A;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.co-chairs-description p {
  color: #404040;
  line-height: 1.6;
  font-size: 0.95rem;
}

.roles-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0 0;
}

.roles-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  color: #404040;
  line-height: 1.6;
  font-size: 0.95rem;
}

.roles-list li i {
  position: absolute;
  left: 0;
  top: 0.25rem;
  color: #404040; /* Green checkmark */
  font-size: 1rem;
}

/* ==========================================================================
   BILLING TIMELINE STYLE
   ========================================================================== */
.sppb-addon-timeline {
  padding: 2rem 0;
}

.sppb-addon-timeline-text-wrap {
  text-align: center;
  margin-bottom: 3rem;
}

.sppb-addon-timeline-text-wrap h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-dark, #1A1A1A);
  position: relative;
  display: inline-block;
  padding-bottom: 0.75rem;
}

.sppb-addon-timeline-text-wrap h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--primary-color, #D15E14);
  border-radius: 2px;
}

.sppb-addon-timeline-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0;
}

/* Vertical center line */
.sppb-addon-timeline-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: #D9D9D9;
  transform: translateX(-50%);
  border-radius: 2px;
}

.timeline-movement {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  width: 100%;
}

/* Badge (circle on the center line) */
.timeline-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border: 4px solid var(--primary-color, #D15E14);
  border-radius: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px #F4F4F4;
}

/* Timeline items/panels */
.timeline-item {
  width: 45%;
}

.timeline-panel {
  position: relative;
  background: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  text-align: left;
}

.timeline-panel .title {
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  color: var(--text-dark, #1A1A1A);
  font-size: 1.1rem;
}

.timeline-panel .details p {
  margin: 0;
  color: #404040;
  line-height: 1.5;
}

.timeline-panel .details ul {
  padding-left: 1.25rem;
  margin-top: 0.5rem;
}

.timeline-panel .details ul li {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

/* Align panels left and right */
.timeline-movement.even .timeline-item:not(.mobile-hidden):not(.mobile-block) {
  text-align: right;
}

.timeline-date {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color, #D15E14);
  margin: 0;
  padding: 0.5rem 1rem;
}

/* Hide helper date nodes to preserve grid columns */
.mobile-block {
  display: none !important;
}

/* Desktop alignment */
@media (min-width: 769px) {
  .timeline-movement.even {
    flex-direction: row-reverse;
  }
  
  .timeline-date {
    text-align: right !important;
  }
}

/* Mobile responsive timeline (single column) */
@media (max-width: 768px) {
  .sppb-addon-timeline-wrapper::before {
    left: 20px;
  }
  
  .timeline-badge {
    left: 20px;
    transform: translate(-50%, -50%);
  }
  
  .timeline-movement {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 45px;
    margin-bottom: 2rem;
  }
  
  .timeline-item {
    width: 100%;
  }
  
  .mobile-block {
    display: block !important;
  }
  
  .mobile-hidden {
    display: none !important;
  }
  
  .timeline-date {
    text-align: left !important;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
  }
}

/* ==========================================================================
   FLUID LAYOUT — ULTRA-WIDE GUARD & RESPONSIVE OVERRIDES
   Generated as part of the fluid refactor
   ========================================================================== */

/* Prevent hero text from being hard to read on ultrawide */
@media (min-width: 1800px) {
  .carousel-content {
    max-width: min(700px, 40%);
  }
  .carousel-content h2 {
    font-size: 3rem;
  }
  .blog-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  .work-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* Tablet: stack the about-map section */
@media (max-width: 900px) {
  .about-map-section {
    grid-template-columns: 1fr;
  }
  .vision-mission-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile: single column everything */
@media (max-width: 600px) {
  .hero-section {
    height: clamp(260px, 60vw, 360px);
  }
  .carousel-content h2 {
    font-size: 1.4rem;
  }
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   PROSE ALIGNMENT
   Left-align (ragged right) flowing prose. Justified text without
   hyphenation stretches the spaces between words to fill each line, which
   produces large, uneven inter-word gaps ("rivers") and hurts readability —
   especially in narrower columns. Left alignment keeps even word spacing.
   ========================================================================== */
p,
.rich-text p,
.subpage-content p,
.disclosure-content p,
.tab-pane p,
.tabs-content p,
.about-quote,
blockquote,
.blog-excerpt,
.work-card-desc,
dd {
  text-align: left;
  hyphens: none;
  overflow-wrap: break-word;
}

/* --- NEVER JUSTIFY: list items, table cells, headings, UI elements --- */
li,
ul li,
ol li,
.rich-text ul li,
.rich-text ol li,
.premium-list li,
.map-list li,
.mobile-nav-submenu li,
.sidebar-menu li,
.news-list li,
th,
td,
h1, h2, h3, h4, h5, h6,
label,
button,
.btn,
.nav-link,
.tab-btn,
.breadcrumb,
.blog-title,
.news-item-title,
.work-card-title,
.page-title,
figcaption,
caption {
  text-align: unset;   /* Reset to browser/parent default (left) */
  hyphens: none;
}

/* --- SPECIAL CASES: centred elements must stay centred --- */
.text-center,
.section-title,
.vm-card,
.values-section,
.about-quote,
.quicklink-card,
.footer-bottom-container,
.sppb-text-center {
  text-align: center;
  text-align-last: center;   /* Overrides the justify rule above */
  hyphens: none;
}

/* ==========================================================================
   ICP-2 REVIEW SPECIAL LAYOUT
   ========================================================================== */
.icp2-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

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

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

.icp2-card--active {
  border-color: var(--primary-color);
  background: var(--bg-surface);
}

.icp2-card-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  position: relative;
}

.icp2-card-badge {
  display: inline-block;
  background-color: var(--border-color);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.icp2-card-badge--active {
  background-color: var(--primary-color);
  color: #ffffff;
}

.icp2-card-period {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.icp2-card-body ul {
  list-style: none;
  padding-left: 0 !important;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.icp2-card-body ul li {
  padding-left: 0 !important;
}

.icp2-card-body ul li::before {
  display: none !important;
}

.icp2-card-body ul li a {
  color: var(--primary-color);
  font-weight: 500;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.icp2-card-body ul li a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* Timeline Layout */
.icp2-timeline {
  list-style: none;
  padding-left: 0 !important;
  margin: 2.5rem 0;
  position: relative;
}

.icp2-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background-color: var(--border-color);
}

.icp2-step {
  position: relative;
  padding-left: 55px !important;
  margin-bottom: 2rem;
}

.icp2-step::before {
  display: none !important; /* Remove global list styles */
}

.icp2-step-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--bg-surface);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-muted);
  z-index: 1;
  transition: all var(--transition-fast);
}

.icp2-step--done .icp2-step-marker {
  background-color: #404040;
  border-color: #404040;
  color: #ffffff;
}

.icp2-step--active .icp2-step-marker {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(209, 94, 20, 0.15);
}

.icp2-step-content {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.icp2-step-date {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.icp2-step--active .icp2-step-date {
  color: var(--primary-color);
}

.icp2-badge-inline {
  display: inline-block;
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.icp2-steps-box {
  background-color: var(--primary-light);
  padding: 1.5rem;
  border-radius: 8px;
  margin: 1.5rem 0;
}

.icp2-video-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  margin: 2rem 0;
}

.icp2-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ==========================================================================
   V3 CONTENT ADDITIONS — grafted onto the v2 design base (2026 restore)
   Kept from v3 because they support v3-only content & accessibility and do
   NOT alter the v2 typographic/loop-title design.
   ========================================================================== */

/* Other Initiatives grid (used by internet-governance & related pages) */
.other-initiatives-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 25px;
  margin-bottom: 25px;
}
.other-initiatives-grid .initiative-card {
  border: 1px solid var(--g150);
  padding: 15px;
  background-color: var(--g50);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.other-initiatives-grid .initiative-card:hover {
  border-color: var(--clay);
  background-color: var(--white);
}
.other-initiatives-grid .initiative-card img {
  max-height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.other-initiatives-grid .initiative-card a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
@media (max-width: 576px) {
  .other-initiatives-grid { grid-template-columns: 1fr; gap: 15px; }
}

/* Skip-to-main-content link (present in every v3 page) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 99999;
  padding: 0.9rem 2rem;
  background-color: var(--primary-color);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none !important;
  transition: top 0.15s ease;
  white-space: nowrap;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid #ffffff;
  outline-offset: -4px;
}

/* Keyboard focus-visible rings (accessibility) */
:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
.nav-link:focus-visible,
.dropdown-item a:focus-visible,
.mobile-nav-link:focus-visible,
.mobile-nav-submenu li a:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
  background-color: var(--primary-light);
  color: var(--primary-color) !important;
}
.btn:focus-visible,
.cat-btn:focus-visible,
.blog-more:focus-visible,
.view-all-link:focus-visible,
.mobile-nav-toggle:focus-visible,
.close-offcanvas:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}
.form-control:focus-visible,
.whois-search-input:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 0;
}
.disclosure-card summary:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: -2px;
  background-color: var(--primary-light);
}
.sidebar-menu a:focus-visible,
.footer-legal-links a:focus-visible,
.social-icon-link:focus-visible,
.quick-links a:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

/* ============================================================
   P4 — Utility & component classes (uniformity pass)
   Replaces repeated inline styles on the compiled
   policy / minutes / news pages. All values tokenised, flat.
   ============================================================ */

/* --- Data / detail tables (activates the Bootstrap-remnant
       class names already present in the markup) --- */
.table{width:100%;border-collapse:collapse;margin-bottom:24px;
       border:1px solid var(--g150);}
.table td,.table th{padding:10px;border:1px solid var(--g150);
       vertical-align:top;text-align:left;}
.table .dt-head{background:var(--clay-tint);
       border-bottom:1px solid var(--g150);font-weight:700;}
.table .dt-title{text-align:center;font-weight:700;color:var(--clay-deep);
       padding:12px;font-size:1.1rem;}

/* column-width + weight helpers (preserve original proportions) */
.w25{width:25%;}.w35{width:35%;}.w65{width:65%;}.w75{width:75%;}
.fw600{font-weight:600;}.fw700{font-weight:700;}

/* --- Source / provenance note under compiled articles --- */
.source-note{margin-top:2.5rem;padding-top:2rem;
       border-top:1px solid var(--g150);font-size:1.1rem;color:var(--g700);}

/* --- Status / label tag (activates .label remnant) --- */
.label{display:inline-block;padding:3px 6px;font-size:.85rem;font-weight:600;
       color:var(--white);background:var(--g500);border-radius:2px;
       line-height:1.4;}
.label-default{background:var(--g500);}

/* --- Misc helpers --- */
.text-clay{color:var(--clay-deep);}
.col-flex{flex:1;min-width:250px;}

/* --- Download list (PDF resources) --- */
.download-list{list-style:none;margin:1.5rem 0 0;padding:0;border-top:var(--hairline);}
.download-list li{border-bottom:var(--hairline);}
.download-list a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1rem 0.25rem;text-decoration:none;color:var(--ink);
  transition:background-color var(--transition-fast);}
.download-list a:hover{background:var(--clay-tint);}
.download-list .dl-title{font-weight:600;}
.download-list .dl-title::before{content:"\2193\00a0";color:var(--clay-deep);font-weight:700;}
.download-list .dl-meta{font-size:.85rem;color:var(--g500);white-space:nowrap;}
@media(max-width:480px){.download-list a{flex-direction:column;gap:.25rem;}}

/* --- Reading-measure safeguard: keep prose lines legible on ultra-wide
       screens while the layout stays fully fluid (caps text, not the page).
       Tables, headings, media and grids still span the full width. --- */
.subpage-content.rich-text > p,
.subpage-content.rich-text > ul,
.subpage-content.rich-text > ol,
.subpage-content.rich-text > blockquote{
  max-width:75ch;
}

/* --- Table header fix: shade only the real <thead>, never the first
       <tbody> row (the legacy `table tr:first-child td` rule shaded it). --- */
.table thead th{background-color:var(--g50);font-weight:600;border-bottom:2px solid var(--g150);}
.table tbody tr:first-child td{background-color:transparent;font-weight:inherit;color:inherit;border-bottom:1px solid var(--g150);}

/* --- SP Page Builder responsive video embed (was undefined -> broke
       the ICP-2 review page's YouTube iframe: no dimensions). --- */
.sppb-addon-video{margin-bottom:1.5rem;}
.sppb-video-block{margin:1rem 0 1.5rem;}
.sppb-embed-responsive{position:relative;display:block;width:100%;height:0;
  padding:0;overflow:hidden;max-width:960px;}
.sppb-embed-responsive-16by9{padding-bottom:56.25%;}
.sppb-embed-responsive-4by3{padding-bottom:75%;}
.sppb-embed-responsive .sppb-embed-responsive-item,
.sppb-embed-responsive iframe,
.sppb-embed-responsive embed,
.sppb-embed-responsive object{position:absolute;top:0;left:0;
  width:100%;height:100%;border:0;}

/* ============================================================
   ICP-2 review page: make the review timeline readable.
   The alternating left/right timeline was trapped in a 50%
   column (panels ~22% wide). Scoped to .icp2-page only:
   (1) stack the text+timeline row so the timeline is full width;
   (2) render the timeline as a single-column vertical sequence
       at all widths (the same clean form used on mobile),
       preserving chronological order.
   ============================================================ */
.icp2-page .sppb-col-md-6{flex:0 0 100%;max-width:100%;}

/* vertical rail + badges to the left edge */
.icp2-page .sppb-addon-timeline-wrapper::before{left:20px;}
.icp2-page .timeline-badge{left:20px;transform:translate(-50%,-50%);}

/* each entry: date heading above its panel, full width, left-aligned */
.icp2-page .timeline-movement,
.icp2-page .timeline-movement.even{flex-direction:column !important;align-items:flex-start;padding-left:48px;margin-bottom:2rem;}
.icp2-page .timeline-item{width:100% !important;text-align:left !important;}
.icp2-page .timeline-movement.even .timeline-item{text-align:left !important;}
.icp2-page .timeline-date{text-align:left !important;font-size:1.15rem;padding:0 0 0.25rem 0;margin-bottom:0.25rem;}

/* show the stacked date node, hide the side-by-side duplicate */
.icp2-page .mobile-block{display:block !important;}
.icp2-page .mobile-hidden{display:none !important;}

/* panels flat + full width to match the site aesthetic */
.icp2-page .timeline-panel{width:100%;box-shadow:none;border-radius:0;border:1px solid var(--g150);}

/* --- Reusable readable timeline: renders any SP Page Builder timeline as a
       single-column vertical sequence (rail left, date heading above panel),
       readable at any column width. Add class "timeline-vertical" to the page
       content wrapper. --- */
.timeline-vertical .sppb-addon-timeline-wrapper::before{left:20px;}
.timeline-vertical .timeline-badge{left:20px;transform:translate(-50%,-50%);}
.timeline-vertical .timeline-movement,
.timeline-vertical .timeline-movement.even{flex-direction:column !important;align-items:flex-start;padding-left:48px;margin-bottom:2rem;}
.timeline-vertical .timeline-item{width:100% !important;text-align:left !important;}
.timeline-vertical .timeline-movement.even .timeline-item{text-align:left !important;}
.timeline-vertical .timeline-date{text-align:left !important;font-size:1.15rem;padding:0 0 0.25rem 0;margin-bottom:0.25rem;}
.timeline-vertical .mobile-block{display:block !important;}
.timeline-vertical .mobile-hidden{display:none !important;}
.timeline-vertical .timeline-panel{width:100%;box-shadow:none;border-radius:0;border:1px solid var(--g150);}

/* ============================================================
   SP Page Builder: structural classes that were never defined
   (sections had no spacing, icons/counters/headers unstyled).
   ============================================================ */
.sppb-section{padding:1.5rem 0;position:relative;}
.sppb-row-container{width:100%;}
.sppb-row-overlay{position:absolute;inset:0;pointer-events:none;}
.sppb-row.sppb-no-gutter{margin-left:0;margin-right:0;}
.sppb-row.sppb-no-gutter > [class*="sppb-col-"]{padding-left:0;padding-right:0;}
.sppb-align-items-center{align-items:center;}
.sppb-text-left{text-align:left;}
.sppb-column{width:100%;}
.sppb-addon-wrapper{margin-bottom:1.25rem;}
.sppb-addon-wrapper:last-child{margin-bottom:0;}

/* headers / section titles */
.sppb-addon-header .sppb-addon-title{font-family:var(--font-display);
  font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;color:var(--ink);
  margin:0 0 .5rem;line-height:1.3;}
.sppb-section-title,.sppb-title-heading{font-family:var(--font-display);
  font-weight:700;color:var(--ink);}
.sppb-title-subheading{color:var(--g500);}

/* icon addon */
.sppb-icon{margin-bottom:.75rem;}
.sppb-icon .sppb-icon-inner{display:inline-flex;align-items:center;
  justify-content:center;width:64px;height:64px;border:1px solid var(--g150);
  color:var(--clay);font-size:1.75rem;background:var(--white);}
.sppb-icon.sppb-text-center .sppb-icon-inner{margin:0 auto;}
.sppb-icon-hover-effect-zoom-in .sppb-icon-inner{transition:transform var(--transition-fast);}
.sppb-icon-hover-effect-zoom-in:hover .sppb-icon-inner{transform:scale(1.08);}

/* animated number ("figure") counters */
.sppb-addon-animated-number{padding:.5rem 0;}
.sppb-animated-number{font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--clay);
  line-height:1.1;}
.sppb-animated-number-title{font-size:.95rem;font-weight:600;
  color:var(--g700);margin-top:.25rem;text-transform:uppercase;
  letter-spacing:.04em;}

/* ============================================================
   Call for Hosting page — icon cards.
   Previously each addon-wrapper became its own card, so the icon
   and its text split into two boxes (and .sppb-addon-text-block
   carded again inside -> nested borders).
   Fix: the COLUMN is the single card (icon + title + text),
   centred, equal height per row. Scoped with :has(.sppb-icon)
   so timelines / counters / text sections are untouched.
   ============================================================ */

/* equal heights: let columns stretch to the tallest in the row */
.hosting-page .sppb-row:has(.sppb-icon){align-items:stretch;}
.hosting-page .sppb-row:has(.sppb-icon) > [class*="sppb-col-"]{display:flex;}
.hosting-page .sppb-row:has(.sppb-icon) .sppb-column{display:flex;width:100%;}

/* the column becomes the one card */
.hosting-page .sppb-row .sppb-column-addons:has(.sppb-icon){
  display:flex;flex-direction:column;align-items:center;
  width:100%;height:100%;
  background:var(--white);border:1px solid var(--g150);border-radius:0;
  box-shadow:none;padding:1.75rem;box-sizing:border-box;text-align:center;}

/* kill the per-addon card and the nested text-block card */
.hosting-page .sppb-row .sppb-column-addons:has(.sppb-icon) > div{
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
  height:auto;width:100%;margin:0 0 .75rem;}
.hosting-page .sppb-row .sppb-column-addons:has(.sppb-icon) > div:last-child{margin-bottom:0;}
.hosting-page .sppb-row .sppb-column-addons:has(.sppb-icon) .sppb-addon-text-block{
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
  height:auto;margin:0;}

/* centre everything inside the card (beats inline text-align) */
.hosting-page .sppb-column-addons:has(.sppb-icon) .sppb-icon{margin:0 0 .75rem;text-align:center;}
.hosting-page .sppb-column-addons:has(.sppb-icon) .sppb-icon-inner{margin:0 auto;}
.hosting-page .sppb-column-addons:has(.sppb-icon) .sppb-addon-title{
  text-align:center;border-bottom:0;padding-bottom:0;margin:0 0 .5rem;font-size:1.2rem;}
.hosting-page .sppb-column-addons:has(.sppb-icon) .sppb-addon-content,
.hosting-page .sppb-column-addons:has(.sppb-icon) .sppb-addon-content div,
.hosting-page .sppb-column-addons:has(.sppb-icon) .sppb-addon-content p{
  text-align:center !important;}

/* --- One uniform body-copy size. These content components had drifted
       off the base (1.05rem / 0.95rem / 0.9rem); pull them to 1rem so all
       running text matches. Headings, nav, tags and display figures keep
       their own scale. --- */
.rich-text p,
.rich-text li,
.sppb-addon-content,
.sppb-addon-content p,
.sppb-addon-content div,
.premium-list li,
.roles-list li,
.co-chairs-description p,
.timeline-panel .details p,
.timeline-panel .details ul li{font-size:1rem;}

/* ==========================================================================
   Link & heading colour  (release 1.04)
   --------------------------------------------------------------------------
   Titles and subtitles: Burnished Clay  #D15E14
   Content hyperlinks:   Amber           #F9AC34

   Scoped to editorial content (.rich-text / .subpage-content / article body)
   and to the utility link groups. Navigation, buttons, cards and the header
   deliberately keep their own treatment — recolouring those turns the whole
   chrome amber.

   ACCESSIBILITY NOTE: #F9AC34 on white measures 1.91:1, below the WCAG 2.1 AA
   minimum of 4.5:1 for body text. The underline added below is what keeps
   these links perceivable; do not remove it. See docs/VERSIONING.md history
   and the note in CHANGELOG 1.04.
   ========================================================================== */
:root {
  --title: #D15E14;   /* headings */
  --link:  #BE5713;   /* content hyperlinks */
  --link-hover: #99460F;
}

/* --- Titles ---------------------------------------------------------------
   Clay is scoped to page-level titles (h1) and the named title components.
   Subheadings (h2-h6) stay near-black: on prose pages such as about.html a
   run of clay subheadings competes with the body text instead of organising
   it. Structure there comes from weight and spacing, not hue. --- */
.subpage-content h1,
.rich-text h1,
.page-title, .section-title,
.blog-title, .news-item-title {
  color: var(--title);
}

/* Keep the page-title logotype ink-coloured; only the text takes clay. */
.page-title .logotype path,
.page-title .logotype circle {
  stroke: var(--ink);
}

/* --- Content hyperlinks --------------------------------------------------
   Applies to editorial links only. Anchors styled as buttons (any *btn*
   class, .custom-button, .view-all-link) are excluded so they keep their own
   component colours — otherwise this rule's higher specificity forced button
   text to the link colour, which on hover matched the button's own hover
   background and made the label vanish. --- */
.rich-text a:not([class*="btn"]):not(.custom-button):not(.view-all-link):not(.nav-link):not(.tab-btn):not(.pdp-node):not(.idp-card):not(.gov-card),
.subpage-content a:not([class*="btn"]):not(.custom-button):not(.view-all-link):not(.nav-link):not(.tab-btn):not(.pdp-node):not(.idp-card):not(.gov-card),
[itemprop="articleBody"] a:not([class*="btn"]):not(.custom-button):not(.view-all-link):not(.nav-link):not(.tab-btn):not(.pdp-node):not(.idp-card):not(.gov-card),
.download-list a .dl-title,
.minutes-timeline a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rich-text a:not([class*="btn"]):not(.custom-button):not(.view-all-link):not(.nav-link):not(.tab-btn):not(.pdp-node):not(.idp-card):not(.gov-card):hover,
.subpage-content a:not([class*="btn"]):not(.custom-button):not(.view-all-link):not(.nav-link):not(.tab-btn):not(.pdp-node):not(.idp-card):not(.gov-card):hover,
[itemprop="articleBody"] a:not([class*="btn"]):not(.custom-button):not(.view-all-link):not(.nav-link):not(.tab-btn):not(.pdp-node):not(.idp-card):not(.gov-card):hover,
.download-list a:hover .dl-title,
.minutes-timeline a:hover {
  color: var(--link-hover);
}

/* Headings that are themselves links inherit the heading colour, not the
   link colour — an amber underlined heading reads as body text. */
.rich-text h1 a, .rich-text h2 a, .rich-text h3 a,
.subpage-content h1 a, .subpage-content h2 a, .subpage-content h3 a {
  color: inherit;
  text-decoration: none;
}

/* Sidebar navigation is chrome, not content — exclude it. */
.sidebar-nav a,
.sidebar-menu a {
  text-decoration: none;
}

/* ==========================================================================
   Governance landing-page cards  (release 1.04)
   Flat hairline treatment, no shadows or radii, per the 1.02 design tokens.
   ========================================================================== */
.gov-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Same treatment as the index.html cards — rounded, soft shadow, hover lift. */
.gov-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.gov-card:hover,
.gov-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.gov-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--title);
}

.gov-card-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--g700);
  flex: 1;
}

.gov-card-more {
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clay-deep);
}

/* The card is the link — don't underline or recolour it as body copy. */
.rich-text a.gov-card,
.subpage-content a.gov-card {
  color: inherit;
  text-decoration: none;
}

/* Board minutes awaiting a PDF — rendered as plain text rather than a dead
   link. bin/sync-minutes-links.sh restores the hyperlink once the file lands. */
.minutes-pending {
  color: var(--g500);
  cursor: default;
}
.minutes-pending::after {
  content: " (not yet available)";
  font-size: 0.85em;
  color: var(--g300);
}

/* --------------------------------------------------------------------------
   Board meetings & resolutions tables
   The site's default rich-text list marker is a green tick, which reads as
   "done / approved" — wrong next to a resolution reference, and outright
   contradictory next to a minute marked "not yet available". Suppress it and
   let the table structure do the work.
   -------------------------------------------------------------------------- */
.rich-text table ul,
.rich-text table ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rich-text table ul li,
.rich-text table ol li {
  position: static;
  padding-left: 0;
  margin: 0 0 0.35rem 0;
}

.rich-text table ul li:last-child,
.rich-text table ol li:last-child {
  margin-bottom: 0;
}

.rich-text table ul li::before,
.rich-text table ol li::before {
  content: none;
}

/* Keep the month column aligned with the top of its lists. */
.rich-text table td {
  vertical-align: top;
}

/* ==========================================================================
   Cookie consent banner
   Flat hairline treatment per the 1.02 tokens. Reject and Accept are
   deliberately identical in weight and size — under GDPR, refusing must be
   no harder than consenting.
   ========================================================================== */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9999;
  background: var(--white);
  border-top: 2px solid var(--clay);
}

.cookie-banner-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}

.cookie-banner-copy { flex: 1 1 420px; }

.cookie-banner-copy h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
  color: var(--title);
}
.cookie-banner-copy h2:focus { outline: none; }

.cookie-banner-copy p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--g700);
  text-align: left;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* Equal prominence — same size, same weight, same visual hierarchy. */
.cookie-btn {
  font-family: var(--font-label);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.7rem 1.5rem;
  min-width: 11rem;
  border: 1px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.cookie-btn:hover,
.cookie-btn:focus-visible {
  background: var(--ink);
  color: var(--white);
}

.cookie-prefs-link { cursor: pointer; }

@media (max-width: 640px) {
  .cookie-banner-inner { padding: 1.15rem 1rem; }
  .cookie-banner-actions { width: 100%; }
  .cookie-btn { flex: 1 1 auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Table header fix
   `table tr:first-child td` (line ~1860) exists so that tables written without
   a <thead> still get a header-looking first row. On a table that DOES have a
   <thead>, though, the first row of <tbody> is also :first-child — so it was
   picking up the grey header fill and bold weight, making two rows look like
   headers (e.g. Seat 1 on board.html).

   Reset it only where a <thead> is present, so headless tables keep the
   pseudo-header behaviour. Uses `thead + tbody`, which needs no :has() and
   works in every browser.
   -------------------------------------------------------------------------- */
table thead + tbody tr:first-child td {
  background-color: transparent;
  font-weight: 400;
  color: inherit;
  border-bottom: 1px solid var(--border-color);
}

/* Keep hover feedback working on that row. */
table thead + tbody tr:first-child:hover td {
  background-color: rgba(209, 96, 21, 0.02);
}

/* ==========================================================================
   Homepage "Latest News" — 3-column cards matching the blog section
   The .news-item blocks are authored as horizontal rows on news.html and are
   injected here verbatim (fallback + the JS refresh), so they carry inline
   display:flex / fixed-width thumbnail styles. Scoped !important overrides
   reshape them into vertical cards that mirror .blog-card-new, but shorter
   (smaller image, tighter padding). Scoped to #home-latest-news so news.html
   itself is untouched.
   ========================================================================== */
#home-latest-news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* card shell — same treatment as .blog-card-new */
#home-latest-news .news-item {
  display: block !important;
  padding: 0 !important;
  border-bottom: none !important;
  background: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-normal);
}

#home-latest-news .news-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* image band — full 4:3 graphic; the news posters carry their title in the
   artwork, so no fixed height (a 160px cover-crop was slicing the titles) */
#home-latest-news .news-item > div:first-child {
  flex: none !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

#home-latest-news .news-item > div:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border: none !important;
  transition: transform var(--transition-slow);
}

#home-latest-news .news-item:hover > div:first-child img {
  transform: scale(1.05);
}

/* content — tighter than the blog card's 2rem to keep the card short */
#home-latest-news .col-flex {
  min-width: 0;
  padding: 1.25rem 1.5rem 1.5rem;
}

#home-latest-news .col-flex h3 {
  font-size: 1.1rem !important;
  line-height: 1.35 !important;
  margin: 0 0 6px 0 !important;
  /* reserve up to 3 lines so the date + blurb line up across all cards
     regardless of how long each title is */
  min-height: calc(1.1rem * 1.35 * 3);
}

/* clamp the blurb so all three cards stay the same, compact height */
#home-latest-news .col-flex p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* stack on smaller screens */
@media (max-width: 900px) {
  #home-latest-news { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  #home-latest-news { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Webinar Series page — replaces the legacy Joomla page-builder layout
   ========================================================================== */
.webinar-intro {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0 2.5rem;
}
.webinar-intro-icon {
  flex: 0 0 130px;
  width: 130px;
  height: auto;
  object-fit: contain;
}
.webinar-intro-text { flex: 1 1 320px; min-width: 0; }
.webinar-eyebrow {
  font-family: var(--font-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clay);
  font-size: 0.85rem;
}
.webinar-intro-text h2 { margin: 0.2rem 0 0.75rem; color: var(--title); }
.webinar-intro-text p { margin: 0; color: var(--g700); line-height: 1.65; }

.webinar-section-title {
  text-align: center;
  color: var(--title);
  margin: 2.75rem 0 1.75rem;
}

/* Benefits — four cards with a banner image */
.webinar-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.webinar-benefit {
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.webinar-benefit:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.webinar-benefit-img { height: 140px; overflow: hidden; background: var(--g50); }
.webinar-benefit-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.webinar-benefit-body { padding: 1.15rem 1.25rem 1.4rem; }
.webinar-benefit-body h3 { font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--title); }
.webinar-benefit-body p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--g700); }

/* Calendar — horizontal cards, clay-accented, with a watch button */
.webinar-list { display: flex; flex-direction: column; gap: 1rem; }
.webinar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.webinar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.webinar-card-main { flex: 1 1 340px; min-width: 0; }
.webinar-badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-deep);
  background: var(--clay-tint);
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.55rem;
}
.webinar-card-main h3 { font-size: 1.1rem; line-height: 1.35; margin: 0.2rem 0 0.6rem; color: var(--ink); }
.webinar-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--g500); font-size: 0.9rem; }
.webinar-meta i { color: var(--clay); margin-right: 0.35rem; }
.webinar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: #ffffff;
  padding: 0.65rem 1.2rem;
  font-family: var(--font-label);
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.webinar-btn:hover, .webinar-btn:focus-visible { background: var(--clay); color: #ffffff; }
.webinar-soon { color: var(--g500); font-size: 0.85rem; font-style: italic; white-space: nowrap; }

@media (max-width: 900px) { .webinar-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .webinar-benefits { grid-template-columns: 1fr; } }

/* ==========================================================================
   About page — uniform card treatment matching the news / webinar / governance
   sections (16px radius, soft shadow, clay accents, hover lift).
   ========================================================================== */
.about-lead {
  font-family: var(--font-light);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

/* Intro text alongside the brand mark on wide screens; the figure is
   decorative and drops out below 900px so it never pushes prose down. */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 75ch) minmax(220px, 1fr);
  gap: 2rem 3rem;
  align-items: center;
  margin: 0 0 1rem;
}
.about-intro-figure {
  margin: 0;
  justify-self: center;
}
.about-intro-figure img {
  display: block;
  width: min(300px, 100%);
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-intro-figure { display: none; }
}

/* Regional Internet Registries + shared card look */
.about-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 1.25rem 0 2.5rem;
}
.about-card {
  background: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  padding: 1.25rem 1.25rem 1.4rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.about-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.about-card h3 { font-size: 1.1rem; margin: 0 0 0.35rem; color: var(--title); }
.about-card p  { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--g700); }

/* Vision & Mission — clay-accented highlight cards */
.about-vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1rem 0 2.5rem;
}
.about-vm {
  background: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  padding: 1.5rem 1.6rem;
}
.about-vm-label {
  display: block;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  color: var(--clay);
  margin-bottom: 0.5rem;
}
.about-vm p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink); }

/* Core Values — compact cards */
.about-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1rem 0 2.5rem;
}
.about-value {
  background: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  padding: 1.4rem 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--title);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.about-value:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Closing call to action */
.about-cta {
  background: var(--clay-tint);
  border: 1px solid var(--clay);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  margin-top: 2.5rem;
  text-align: center;
}
.about-cta p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--clay-deep);
  font-weight: 600;
}

@media (max-width: 900px) {
  .about-grid, .about-values { grid-template-columns: repeat(2, 1fr); }
  .about-vm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .about-grid, .about-values { grid-template-columns: 1fr; }
}

/* Hover effects migrated from inline on* handlers (CSP-safe) 2026-08-03 */
.hov-color:hover{color:#A64A10 !important}
.hov-underline:hover{text-decoration:underline !important}

/* hover colour variants migrated from inline handlers (CSP-safe) 2026-08-03 */
.hovc-d15e14:hover{color:#D15E14 !important}
.hovc-f47920:hover{color:#f47920 !important}

/* Proposal metadata table: visible cell borders (2026-08-03) */
.proposal-meta td, .proposal-meta th { border: 1px solid #b0b0b0 !important; }

/* ============================================================
   Release 1.09 — Mobile: move section side-menu BELOW content.
   On <=900px the 2-column grid stacks; by default the <aside>
   sidebar comes first in the DOM and pushes the article down,
   making the page feel very long. Flip the order so content is
   read first and the menu sits at the foot with a hairline rule.
   ============================================================ */
@media (max-width: 900px) {
  .sidebar-layout-grid { display: flex; flex-direction: column; }
  .sidebar-layout-grid > .sidebar-nav {
    order: 2;
    width: 100%;
    margin: 2.5rem 0 0 0;
    padding: 1.5rem 0 0 0;
    border: none;
    border-top: var(--hairline);
    box-sizing: border-box;
  }
}

/* ============================================================
   Release 1.09 — Mobile width safety-net (Option A).
   Caps any legacy fixed-width element / iframe in the article
   body to the screen on <=900px so nothing pushes the page
   sideways. Tables keep their existing scroll treatment; only
   their overflow is contained. Survives future pasted content.
   ============================================================ */
@media (max-width: 900px) {
  .subpage-content [style*="width"],
  .subpage-content [width],
  .subpage-content iframe { max-width: 100% !important; }
  .subpage-content pre { overflow-x: auto; }
}


/* ===========================================================================
   Policy Development Process chart (policy.html - Principles tab).
   Palette and type are mapped onto the site tokens so the section
   inherits the same orange, greys and body font as every other page.
   =========================================================================== */
.pdp2{--o:var(--primary-color);--o2:var(--primary-hover);--tint:var(--primary-light);--ink:var(--text-color);--g7:#404040;--g5:var(--text-muted);--g3:#B3B3B3;--g15:var(--border-color);--g5b:#F4F4F4;--w:var(--bg-surface);font-family:var(--font-sans);color:var(--ink);background:var(--w);line-height:1.6;-webkit-font-smoothing:antialiased;}
  .pdp2 *,.pdp2 *::before,.pdp2 *::after{box-sizing:border-box;}
  .pdp2-wrap{max-width:1120px;margin:0 auto;padding:clamp(18px,3vw,36px) clamp(4px,2vw,24px);}
  .pdp2 .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
        overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .pdp2-kicker{font-weight:700;letter-spacing:.14em;text-transform:uppercase;
        font-size:clamp(11px,1.4vw,12px);color:var(--o2);margin:0 0 8px;}
  .pdp2 h2#pdp-heading{font-weight:700;line-height:1.08;letter-spacing:-.01em;
        font-size:clamp(24px,4vw,40px);margin:0 0 12px;color:#000;}
  .pdp2-lead{font-weight:300;font-size:clamp(15px,1.9vw,19px);color:var(--g7);max-width:70ch;margin:0 0 22px;}
  .pdp2-hint{font-size:13px;color:var(--g5);margin:0 0 20px;display:flex;align-items:center;gap:8px;}
  .pdp2-hint::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--o);
        display:inline-block;flex:0 0 auto;}
  /* ---- chart ---- */
  .pdp2-figure{margin:0 0 34px;border:1px solid var(--g15);background:#fcfcfc;padding:clamp(10px,2.4vw,24px);}
  .pdp-chart{position:relative;width:100%;max-width:600px;margin:0 auto;aspect-ratio:620/1240;
        container-type:inline-size;}
  .pdp-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .pdp-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;
        justify-content:center;text-align:center;padding:2px 6px;border-radius:7px;
        background:linear-gradient(#fbfbfb,#e4e4e4);border:1px solid #b4b4b4;color:#222;
        text-decoration:none;overflow:hidden;transition:box-shadow .15s,border-color .15s,transform .15s;
        font-size:clamp(7px,1.7cqw,11px);line-height:1.16;cursor:pointer;}
  .pdp-node .nt{position:relative;z-index:2;}
  .pdp-node:hover,.pdp-node:focus-visible{border-color:var(--o);box-shadow:0 0 0 2px rgba(204,85,0,.28);
        outline:none;transform:translate(-50%,-50%) translateY(-1px);}
  .pdp-node.strong{font-weight:700;}
  .pdp-node.diamond{background:none;border:none;border-radius:0;overflow:visible;}
  .pdp-node.diamond::before{content:"";position:absolute;inset:0;background:#000;
        clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
  .pdp-node.diamond::after{content:"";position:absolute;inset:1.5px;
        background:linear-gradient(#000,#8a8a8a);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
  .pdp-node.diamond .nt{color:#fff;font-weight:700;}
  .pdp-node.diamond:hover,.pdp-node.diamond:focus-visible{box-shadow:none;transform:translate(-50%,-50%) scale(1.04);}
  .pdp-node.diamond:hover::before,.pdp-node.diamond:focus-visible::before{background:var(--o);}
  /* ---- assessment ---- */
  .pdp2 h3.pdp2-h3{font-weight:700;font-size:clamp(19px,2.6vw,26px);color:#000;margin:6px 0 6px;
        padding-top:18px;border-top:2px solid #000;}
  .pdp2-sub{color:var(--g7);font-weight:300;max-width:68ch;margin:0 0 26px;}
  .pdp2-phase{border:1px solid var(--g15);background:var(--w);
        margin:0 0 16px;padding:clamp(16px,2.5vw,24px);}
  .pdp2-phase-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin:0 0 6px;}
  .pdp2-pnum{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--o2);}
  .pdp2-phase h4{font-weight:700;font-size:clamp(16px,2.2vw,20px);color:#000;margin:0;flex:1 1 auto;}
  .pdp2-time{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g7);
        background:var(--g5b);border:1px solid var(--g15);padding:4px 10px;border-radius:2px;white-space:nowrap;}
  .pdp2-phase>p{color:var(--g7);max-width:70ch;margin:6px 0 14px;}
  .pdp2-steps{list-style:none;margin:0;padding:0;}
  .pdp2-steps>li{position:relative;padding:12px 0 12px 46px;border-top:1px solid var(--g15);
        scroll-margin-top:120px;transition:background .4s;}
  .pdp2-steps>li:first-child{border-top:none;}
  .pdp2-steps .sn{position:absolute;left:0;top:12px;width:30px;height:30px;border-radius:50%;
        background:#000;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;}
  .pdp2-steps .sn.dec{background:var(--o);}
  .pdp2-steps .verb{display:block;font-weight:700;color:var(--ink);margin:2px 0 3px;}
  .pdp2-steps .asmt{display:block;color:var(--g7);font-size:15px;}
  .pdp2-steps>li:target{background:var(--tint);box-shadow:inset 3px 0 0 var(--o);}
  .pdp2-note{margin-top:8px;font-size:14px;color:var(--g5);border-top:1px solid var(--g15);padding-top:16px;}
  .pdp2-note a{color:var(--o2);}
  @media(max-width:560px){.pdp2-steps>li{padding-left:40px;}.pdp2-steps .sn{width:26px;height:26px;font-size:12px;}}

/* Grid items default to min-width:auto, so a wide, non-shrinkable child
   (a chart, a long code line, a wide table) blows the whole column out and
   the page scrolls sideways. Pin the tracks and let such content scroll
   inside its own box instead. */
.sidebar-layout-grid > * {
  min-width: 0;
}

.pdp2-figure {
  overflow-x: auto;
}

/* ==========================================================================
   INTERNET DEVELOPMENT PROGRAMS
   Index cards, detail-page hero, and call-to-action rows.

   Built on the same vocabulary as .gov-card (hairline, 16px radius, clay
   "read more" label) so the section reads as part of the site rather than a
   bolt-on. Media boxes reserve their aspect ratio up front: the programme
   artwork is served from an external host, and a slow or failed load must
   leave a calm tinted panel, never a collapsed row.
   ========================================================================== */

.idp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 2rem 1.75rem;
  margin: 2.25rem 0 2.75rem;
}

.idp-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--g150);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal),
              transform var(--transition-normal);
}

.subpage-content a.idp-card,
.rich-text a.idp-card {
  color: inherit;
  text-decoration: none;
}

.idp-card:hover {
  border-color: var(--clay);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.08);
}

.idp-card:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* Reserved media box — the artwork is a 635x505 composite. */
.idp-card-media {
  aspect-ratio: 635 / 505;
  background-color: var(--g50);
  border-bottom: 1px solid var(--g150);
  overflow: hidden;
}

.idp-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.idp-card:hover .idp-card-media img {
  transform: scale(1.03);
}

.idp-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem 1.35rem 1.25rem;
  flex: 1;
}

.idp-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
}

.idp-card-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--g700);
  text-align: left;
  flex: 1;
}

.idp-card-more {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-top: 0.35rem;
}

.idp-card-more .fa {
  transition: transform var(--transition-fast);
}

.idp-card:hover .idp-card-more .fa {
  transform: translateX(3px);
}

/* Compact variant — the "Other initiatives" rail on programme detail pages,
   where the cards are wayfinding rather than the page's main content. */
.idp-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 1rem;
  margin: 1.25rem 0 0;
}

.idp-grid--compact .idp-card-body {
  padding: 1.05rem 1.1rem;
  gap: 0.45rem;
}

.idp-grid--compact .idp-card-title {
  font-size: 0.95rem;
}

/* -- Detail page hero ---------------------------------------------------- */

.idp-hero {
  margin: 0 0 1.75rem;
  border: 1px solid var(--g150);
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--g50);
  aspect-ratio: 635 / 505;
  max-width: 420px;
}

.idp-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 700px) {
  .idp-hero {
    float: right;
    max-width: 340px;
    margin: 0 0 1.5rem 2rem;
    shape-margin: 2rem;
  }
}

/* -- Call-to-action row -------------------------------------------------- */

.idp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 1.75rem 0 2.25rem;
  clear: both;
}

.subpage-content .idp-actions .btn,
.rich-text .idp-actions .btn {
  text-decoration: none;
  font-family: var(--font-label);
  font-size: 0.9rem;
  padding: 0.75rem 1.6rem;
}

.subpage-content .idp-actions .btn-primary,
.rich-text .idp-actions .btn-primary {
  color: var(--white);
}

.subpage-content .idp-actions .btn-outline,
.rich-text .idp-actions .btn-outline {
  border-width: 1px;
  color: var(--clay-deep);
}

.subpage-content .idp-actions .btn-outline:hover,
.rich-text .idp-actions .btn-outline:hover {
  color: var(--white);
}

.idp-actions .btn:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* -- Deadline / status callout ------------------------------------------- */

.idp-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  padding: 0.95rem 1.25rem;
  margin: 0 0 2rem;
  background-color: var(--clay-tint);
  border: 1px solid var(--g150);
  border-radius: 12px;
}

.idp-callout-label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-deep);
}

.idp-callout-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .idp-card,
  .idp-card-media img,
  .idp-card-more .fa {
    transition: none;
  }
  .idp-card:hover {
    transform: none;
  }
  .idp-card:hover .idp-card-media img {
    transform: none;
  }
}

.idp-diagram {
  margin: 2rem auto 0.5rem;
  max-width: 480px;
  aspect-ratio: 578 / 500;
  background-color: var(--g50);
  border-radius: 12px;
  overflow: hidden;
}

.idp-diagram img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Centred primary call to action inside article body copy. */
.page-cta {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0;
}

.subpage-content .page-cta .btn,
.rich-text .page-cta .btn {
  text-decoration: none;
  font-family: var(--font-label);
  font-size: 0.95rem;
  padding: 0.85rem 2rem;
  color: var(--white);
  text-align: center;
}

.page-cta .btn:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* -- Two-column prose block (fellowship programme detail) ----------------- */

.idp-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 0 3rem;
}

.idp-columns > * {
  min-width: 0;
}

/* Headings inside programme prose: weight and air carry the hierarchy. */
.idp-prose h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 2.5rem 0 0.85rem;
}

.idp-prose > h2:first-child,
.idp-columns > div > h2:first-child {
  margin-top: 0;
}

.idp-lede {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.idp-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.75rem;
}

/* Non-interactive control: the action exists but is not currently available. */
.btn.is-disabled,
.subpage-content .btn.is-disabled,
.rich-text .btn.is-disabled {
  background-color: var(--g150);
  color: var(--g700);
  cursor: not-allowed;
  pointer-events: none;
}

.idp-banner {
  margin: 2.5rem 0 0;
  padding: 2rem 1.5rem;
  background-color: var(--ink);
  color: var(--white);
  border-radius: 12px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.idp-banner p {
  margin: 0;
  color: inherit;
  text-align: center;
}

/* ==========================================================================
   DBWG Resources & Tools — card layout matching the shared card look
   ========================================================================== */
.dbwg-res-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
}
.dbwg-res-card {
  background: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  padding: 1.5rem 1.6rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.dbwg-res-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.subpage-content .dbwg-res-card h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
  color: var(--title);
}
.dbwg-res-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dbwg-res-links li {
  border-bottom: 1px solid var(--g150);
}
.dbwg-res-links li:last-child { border-bottom: none; }
.dbwg-res-links a {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.95rem;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .dbwg-res-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DBWG at-a-glance stat tiles
   ========================================================================== */
.dbwg-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
}
.dbwg-stat {
  background: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  padding: 1.1rem 1rem;
  text-align: center;
}
.dbwg-stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary-color);
}
.dbwg-stat-label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g500);
}
@media (max-width: 760px) {
  .dbwg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Contact form FAQ suggestions (populated by page-contact.js from faq-index.js) */
#faq-suggest .faq-suggest-title { margin: 0 0 0.5rem; font-weight: 600; color: var(--g700); }
#faq-suggest ul { margin: 0; padding-left: 1.1rem; }
#faq-suggest ul li { margin: 0.25rem 0; padding-left: 0; }
#faq-suggest ul li::before { content: none; }
#faq-suggest a { color: var(--link, #BE5713); }

/* Site search (search.html) */
.search-result { padding: 1.1rem 0; border-bottom: 1px solid var(--g150); }
.search-result-title { margin: 0 0 0.2rem; font-size: 1.05rem; }
.search-result-url { margin: 0 0 0.35rem; font-size: 0.8rem; color: var(--g500); }
.search-result-snippet { margin: 0; font-size: 0.92rem; color: var(--g700); }
.search-result mark { background: var(--clay-tint); color: inherit; padding: 0 0.1em; }

/* Utility-bar site search box (all pages) */
.utility-search { display: inline-flex; margin-right: 1rem; }
.utility-search input {
  background: transparent; border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px; color: var(--utility-text); font-size: 0.78rem;
  padding: 0.25rem 0.6rem; width: 11rem;
}
.utility-search input::placeholder { color: rgba(255,255,255,0.55); }
.utility-search input:focus { outline: 2px solid var(--clay); border-color: var(--clay); }
@media (max-width: 600px) { .utility-search input { width: 7.5rem; } }

/* -- Floated inline image (text wraps on wide screens) ------------------- */
.img-float-right {
  display: block;
  max-width: 60%;
  height: auto;
  margin: 0 auto 1.5rem;
}
@media (min-width: 700px) {
  .img-float-right {
    float: right;
    max-width: 40%;
    margin: 0 0 1rem 1.5rem;
  }
}

/* -- Inline guide screenshots (converted from PDF guides) ---------------- */
.guide-screenshot {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}