/* ============================================
   CIRCLE8 — GLOBAL STYLES
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Source+Sans+3:wght@300;400;500;600&family=Caveat:wght@500;600&display=swap');

:root {
  --terracotta: #915a4a;
  --terracotta-light: #a56a5a;
  --terracotta-dark: #7a4a3a;
  --cream: #f5f5f3;
  --cream-dark: #e8e0d5;
  --near-black: #e8e0d5;
  --surface-dark: #4a2d25;
  --dark: #242424;
  --gold: #917e4a;
  --gold-light: #b8a060;
  --text-dark: #2a2118;
  --text-mid: #5a4a3a;
  --text-light: #8a7a6a;
  --white: #ffffff;
  --border: #e2ddd6;
  --border-dark: rgba(255,255,255,0.08);
  --sage: #dddcc8;
  --warm-taupe: #ede3da;
  --mono-cream: #f7f5f2;
  --mono-cream-dark: #efebe4;
  --mono-taupe: #e6ded3;
  --mono-deep: #dcd2c3;
  --gds-green: #8a9e85;
  --gds-green-hover: #7a8e75;
  --gds-green-dark: #5a6b50;
  --gds-sage-dark: #c2ccb2;
  --gds-eyebrow-accent: #e8643a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Source Sans 3', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4 {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* Was clamp(1.15rem,2.4vw,1.75rem) — roughly double the size of
   .testimonial-quote (a flat 0.87rem) used for the same "italic serif
   quote" pattern elsewhere on the site. Brought down closer to that scale
   — part of the 2026-07-22 editorial article template refinement. */
.pull-quote {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  line-height: 1.55;
  color: var(--text-dark);
}

/* ============================================
   LAYOUT
   ============================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.container-narrow { max-width: 780px; margin: 0 auto; padding: 0 2rem; }
section { padding: 5rem 0; }

/* ============================================
   FADE IN
   ============================================ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }
.fade-in:nth-child(4) { transition-delay: 0.3s; }

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 80px;
  background: var(--white);
  display: flex; align-items: center;
  overflow: visible;
  transition: opacity 0.4s ease;
}
.nav.scrolled {
  box-shadow: none;
}
.nav.past-hero {
  opacity: 0;
  pointer-events: none;
}
.nav, .hero-brand {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nav.nav-scrolled-away {
  transform: translateY(-100%);
  pointer-events: none;
}
.hero-brand.nav-scrolled-away {
  transform: translateY(-280px);
  pointer-events: none;
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 2.5rem;
  display: flex; align-items: center; justify-content: flex-end; width: 100%;
}
.nav-logo {
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; gap: 4px; z-index: 1001; margin-right: auto;
}
.nav-logo-text {
  font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 500;
  color: var(--terracotta); letter-spacing: 0.08em; padding-left: 4px;
  display: none;
}
.nav-logo-mark { width: 52px; height: auto; opacity: 0.9; }
.nav-links { align-self: center; display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a {
  font-family: 'Source Sans 3', sans-serif; font-size: 0.75rem;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dark); text-decoration: none; transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--terracotta); }
.nav-links .nav-highlight {
  color: var(--text-dark);
  border: 1px solid var(--terracotta);
  padding: 0.4rem 0.85rem;
}
.nav-links .nav-highlight:hover { background: var(--terracotta); color: var(--white); }

.hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 4px; background: none; border: none;
}
.hamburger span { display: block; width: 24px; height: 1.5px; background: var(--text-dark); transition: all 0.3s ease; }

.mobile-menu {
  display: none; position: fixed; top: 92px; left: auto; right: 1.25rem;
  background: var(--white); border: none; border-radius: 8px; z-index: 999;
  padding: 1.25rem 1.75rem;
  min-width: 220px; max-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dark); text-decoration: none;
  padding: 0.65rem 0; border-bottom: 1px solid var(--border); transition: color 0.2s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--terracotta); }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-block; font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  padding: 0.9rem 1.8rem; cursor: pointer; transition: all 0.25s ease; border: none;
}
.btn-primary { background: var(--terracotta); color: var(--white); }
.btn-primary:hover { background: var(--terracotta-dark); }
.btn-ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.55); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
.btn-ghost-dark { background: transparent; color: var(--terracotta); border: 1px solid var(--terracotta); }
.btn-ghost-dark:hover { background: var(--terracotta); color: var(--white); }
.btn-gold { background: var(--terracotta); color: var(--white); }
.btn-gold:hover { background: var(--terracotta-dark); }
.btn-ghost-green { background: transparent; color: var(--gds-green); border: 1px solid var(--gds-green); }
.btn-ghost-green:hover { background: var(--gds-green); color: var(--white); }

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative; height: 100vh; min-height: 620px;
  display: flex; align-items: stretch; overflow: hidden; margin-top: 0;
}
.hero-bg {
  position: absolute; top: -20%; left: 0; right: 0; bottom: 0;
  height: 140%;
  background-size: cover; background-position: center;
  background-color: #2a3530;
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,22,20,0.55) 0%, rgba(22,22,20,0.2) 50%, rgba(22,22,20,0.02) 100%);
}
.hero-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 0 clamp(2rem, 5vw, 5rem) 100px;
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.hero-cols {
  display: flex; flex-direction: row;
  align-items: flex-start; justify-content: space-between;
  gap: 4rem; width: 100%;
}
.hero-col-left { flex: 0 0 auto; max-width: 420px; text-align: right; }
.hero-col-right { flex: 0 1 42%; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.hero-brand {
  position: fixed; top: 0; left: clamp(2rem, 5vw, 5rem);
  z-index: 1001; text-decoration: none;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero-brand-mark { width: 240px; height: 240px; object-fit: contain; opacity: 0.95; filter: drop-shadow(0 0 3px rgba(255,255,255,0.35)); }
.strategic-eyebrow {
  color: transparent;
}
.strategic-eyebrow .letter {
  display: inline-block;
  color: transparent;
  transition: color 0.08s ease;
}
.hero-brand-text {
  position: absolute; left: calc(100% - 18px); top: 60%;
  font-family: 'Cinzel', serif; font-size: 42px; font-weight: 500;
  color: rgba(255,255,255,0.85); letter-spacing: 0.05em;
  text-transform: lowercase; white-space: nowrap; pointer-events: none;
  transition: opacity 0.3s ease;
}
.hero-eyebrow {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #9a5040;
  margin-bottom: 15px; font-family: 'Source Sans 3', sans-serif;
}
.hero h1 {
  font-family: 'Cinzel', serif;
  font-size: 42px;
  color: var(--white); line-height: 1.2;
  margin-bottom: 1.25rem; letter-spacing: 0.02em;
}
.hero-supporting {
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  color: rgba(255,255,255,0.8); line-height: 1.8;
  margin-bottom: 2.5rem; max-width: 540px;
}
.hero-ctas { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.75rem; justify-content: flex-end; }
.hero-ctas .btn {
  font-size: 0.65rem; padding: 0.6rem 1.2rem; letter-spacing: 0.1em;
}
.hero-founder {
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); font-family: 'Source Sans 3', sans-serif;
}

/* ============================================
   ABOUT
   ============================================ */
.about { background: var(--mono-cream); padding: 12rem 0 8rem; }
.about-grid { display: grid; grid-template-columns: 1.3fr 2.5fr; grid-template-rows: auto auto; column-gap: 5rem; row-gap: 0; max-width: 980px; margin-left: auto; margin-right: 0; padding-right: 4rem; }
.about-image-wrap { grid-column: 1; grid-row: 1 / 3; align-self: end; margin-bottom: 3.5rem; }
.about-content-text { grid-column: 2; grid-row: 1; }
.about-content-meta { grid-column: 2; grid-row: 2; }
.about-image { width: 100%; max-width: 280px; aspect-ratio: 3/4; object-fit: cover; object-position: center 15%; display: block; }
.about-image-caption { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); font-family: 'Source Sans 3', sans-serif; margin-top: 0.85rem; max-width: 280px; text-align: center; }
.about-eyebrow { color: transparent; margin-bottom: 2rem; }
.about-eyebrow .letter { display: inline-block; color: transparent; transition: color 0.08s ease; }
.about-content-text .eyebrow { margin-bottom: 1rem; }
.about-content-text h2 { font-size: clamp(1.2rem, 2.2vw, 1.7rem); margin-bottom: 1.5rem; }
.about-content-text p { font-size: 0.85rem; color: var(--text-mid); margin-bottom: 1.25rem; line-height: 1.85; }
.about-content-text p:last-of-type { margin-bottom: 0; }
.about-stats { display: flex; gap: 2.5rem; margin-top: 0; padding-top: 2rem; border-top: 1px solid var(--border); }
.about-social-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.about-linkedin {
  display: inline-flex; align-items: center; margin-top: 0;
  color: var(--text-light); transition: color 0.2s ease; text-decoration: none;
}
.about-linkedin:hover { color: var(--terracotta); }
.about-linkedin svg { flex-shrink: 0; }
.about-linkedin {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.5rem; text-decoration: none;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-light); transition: color 0.2s ease;
}
.about-linkedin:hover { color: var(--terracotta); }
.about-linkedin svg { flex-shrink: 0; }
.stat-number { font-family: 'Cinzel', serif; font-size: 1.6rem; color: var(--terracotta); display: block; margin-bottom: 0.25rem; }
.stat-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); }

/* ============================================
   STRATEGIC COLLABORATION
   ============================================ */
.strategic { background: var(--mono-cream-dark); padding: 0; }
.strategic-sticky { position: sticky; top: 0; z-index: 5; background: var(--mono-cream-dark); padding: 5rem 0 2.5rem; }
.strategic-header { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: 4rem; align-items: center; margin-left: 150px; }
.strategic-eyebrow { margin-left: -175px; margin-top: 30px; }
.strategic-header h2 { grid-column: 1; font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: var(--text-dark); line-height: 1.15; letter-spacing: 0.01em; }
.strategic-intro-group { grid-column: 2; }
.strategic-intro { font-size: 0.85rem; color: var(--text-mid); line-height: 1.9; }
.strategic-intro + .strategic-intro { margin-top: 1.25rem; }

/* margin-left cancels .container's own fixed 2rem side padding so this row
   sits flush with the container edge. It used to be a vw-scaling clamp
   (clamp(2rem,5vw,5rem)) that assumed .container's padding scaled too —
   .container's padding is a flat 2rem, so above ~640px viewport width the
   clamp outgrew it and pulled the row (and every card's 0-padding-left
   heading) past the true left edge of the page, off-screen. That silently
   clipped real content — no scrollbar, since a negative margin doesn't add
   scrollWidth — from ~641px up to ~1263px viewport width, i.e. most tablet
   and small-laptop windows. Flat -2rem always exactly cancels the padding;
   it drops the "bleeds a little further on very wide screens" effect the
   clamp gave above ~1263px, but that's a minor cosmetic loss against
   guaranteed-broken text on far more common screen widths. */
.strategic-differentiators { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid var(--border); padding-bottom: 6rem; margin-left: -2rem; }
.differentiator { padding: 2.75rem 2rem 3rem 0; border-right: 1px solid var(--border); }
.differentiator:last-child { border-right: none; padding-right: 0; }
.diff-number { display: block; font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.2em; color: var(--terracotta); margin-bottom: 1.5rem; }
.differentiator h3 { font-family: 'Cinzel', serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.05em; color: #bbb3ad; margin-bottom: 1rem; line-height: 1.5; min-height: 2.4em; }
.differentiator p { font-size: 0.82rem; color: #bbb3ad; line-height: 1.85; }

.ecosystem-section { background: var(--mono-deep); padding: 6rem 0 8rem; }
.ecosystem-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 2rem; padding-bottom: 1rem; }
.ecosystem-header .eyebrow { color: var(--text-mid); font-size: 1.08rem; }
.ecosystem-header-intro { font-size: 0.85rem; color: var(--text-mid); line-height: 1.85; }
.ecosystem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6rem; }
.ecosystem-item { padding: 3.5rem 0; position: relative; }
.ecosystem-number { font-family: 'Cinzel', serif; font-size: 3rem; font-weight: 400; color: rgba(122, 63, 48, 0.3); line-height: 1; display: block; margin-bottom: 1.25rem; letter-spacing: -0.02em; }
.ecosystem-item h4 { font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 500; color: var(--text-mid); line-height: 1.45; letter-spacing: 0.03em; margin-bottom: 1rem; }
.ecosystem-item p { font-size: 0.82rem; color: var(--text-light); line-height: 1.85; }

/* ============================================
   ROUND TABLE
   ============================================ */
.round-table-section { background: var(--mono-cream-dark); padding: 4.5rem 0 3rem; position: relative; overflow: hidden; }
.rt-watermark { position: absolute; right: 0%; top: 50%; transform: translateY(-50%); height: 140%; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 35%); mask-image: linear-gradient(to right, transparent 0%, black 35%); }
.rt-watermark-logo { height: 100%; width: auto; opacity: 0.07; display: block; }
.rt-inner { margin-left: 220px; max-width: 640px; }
.rt-eyebrow { color: transparent; margin-left: -245px; margin-bottom: 0.75rem; }
.rt-eyebrow .letter { display: inline-block; color: transparent; transition: color 0.08s ease; }
.round-table-section h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 1rem; color: var(--text-dark); }
.rt-lead { font-size: 0.88rem; color: var(--text-mid); line-height: 1.85; margin-bottom: 2rem; max-width: 480px; }

.rt-formats-strip { display: flex; align-items: center; gap: 0; margin-bottom: 2.5rem; border-top: 1px solid rgba(90,74,58,0.22); border-bottom: 1px solid rgba(90,74,58,0.22); padding: 1.25rem 0; }
.rt-strip-item { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.rt-strip-divider { width: 1px; background: rgba(90,74,58,0.22); align-self: stretch; margin: 0 1.25rem; }
.rt-strip-num { font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.18em; color: var(--terracotta); }
.rt-strip-always { color: var(--gold); }
.rt-strip-label { font-size: 0.76rem; color: var(--text-dark); font-weight: 500; }

.round-table-intro { font-size: 1rem; color: var(--text-mid); max-width: 640px; margin-bottom: 3.5rem; line-height: 1.8; }
.rt-eight { display: inline-block; font-family: 'Cinzel', serif; font-size: 5rem; color: var(--terracotta); opacity: 0.12; line-height: 1; margin-bottom: -1rem; }

.rt-formats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 4rem; grid-auto-rows: 1fr; }
.rt-format {
  background: var(--white); padding: 2.5rem 2rem;
  border-top: 1px solid rgba(90,74,58,0.2);
  position: relative;
  display: flex; flex-direction: column;
}
.rt-format-number {
  font-family: 'Source Sans 3', sans-serif; font-size: 0.62rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--text-light); display: block; margin-bottom: 1.25rem;
}
.rt-format h3 { font-size: 0.82rem; font-family: 'Cinzel', serif; font-weight: 400; letter-spacing: 0.02em; margin-bottom: 1rem; color: var(--text-dark); }
.rt-format p { font-size: 0.76rem; color: var(--text-mid); line-height: 1.9; margin-bottom: 0.85rem; }
.rt-format p.rt-format-detail {
  font-size: 0.6rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  color: #8b3020; border-top: 1px solid var(--border); padding-top: 1rem; margin-top: auto; line-height: 1.8;
}

.rt-rules { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-bottom: 3.5rem; }
.rt-rule { text-align: center; padding: 1.5rem; }
.rt-rule-number { font-family: 'Cinzel', serif; font-size: 1.8rem; color: var(--terracotta); display: block; margin-bottom: 0.5rem; opacity: 0.8; }
.rt-rule-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-light); display: block; margin-bottom: 0.4rem; }
.rt-rule-desc { font-size: 0.78rem; color: var(--text-mid); }

.rt-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.rt-expect-list { display: flex; flex-direction: column; gap: 1rem; }
.rt-philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }

.rt-register {
  background: transparent; padding: 3rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
/* Grid items default to min-width:auto, so a track can't shrink an item
   below its content's natural min-width — here that's the <select>
   options' text (e.g. "Introductions — I need access to a sector or
   contact"). At mobile width, once this grid drops to a single column, the
   form's wrapping div was wider than the available track and just
   overflowed off the right edge of the page instead of shrinking, cutting
   off every input/select/button. min-width:0 is the standard fix — lets
   the item actually shrink to its track's width, wrapping/truncating
   content instead of pushing past it. */
.rt-register > div { min-width: 0; }
.rt-register h3 { font-size: 1.1rem; color: var(--text-dark); margin-bottom: 0.75rem; }
.rt-register p { font-size: 0.82rem; color: var(--text-mid); line-height: 1.7; }
.rt-form { display: flex; flex-direction: column; gap: 1rem; }
.rt-form input, .rt-form select {
  background: rgba(255,255,255,0.6); border: 1px solid rgba(90,74,58,0.2);
  color: var(--text-dark); padding: 0.85rem 1rem; font-family: 'Source Sans 3', sans-serif;
  font-size: 0.88rem; outline: none; transition: border-color 0.2s;
}
.rt-form input::placeholder { color: var(--text-light); }
.rt-form input:focus, .rt-form select:focus { border-color: var(--terracotta); }
.rt-form select { color: var(--text-mid); }
.rt-form select option { background: var(--mono-cream); }

/* ============================================
   GLOBAL DESIGN SERIES TEASER
   ============================================ */
/* Brand Transition */
.brand-transition { background: var(--mono-cream-dark); padding: 4rem 0; overflow: hidden; }
.brand-transition-inner { display: flex; justify-content: flex-start; align-items: center; will-change: transform; }
.brand-transition-mark { width: clamp(700px, 88vw, 1300px); height: auto; opacity: 0.14; filter: sepia(1) saturate(0.8) hue-rotate(-10deg); display: block; margin-left: 5vw; transform: scaleX(-1); }

.section-divider-banner { background: linear-gradient(to bottom, var(--surface-dark) 0%, var(--surface-dark) 85%, var(--sage) 100%); padding: 2.5rem 0; margin-bottom: -1px; }

.gds-teaser { background: var(--sage); padding: 0; position: relative; overflow: hidden; }
.gds-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at center, rgba(74,45,37,0) 35%, rgba(74,45,37,0.16) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.34  0 0 0 0 0.24  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size: cover, 260px 260px;
  mix-blend-mode: multiply;
  opacity: 1;
}
.gds-sticky { background: var(--sage); padding: 6rem 0 3rem; }
.gds-sticky-frame { width: 62%; margin: 0 auto; }
.gds-sticky-content { width: fit-content; max-width: 100%; margin-left: auto; transform: translateY(-80px); }
.gds-view-all-link { display: block; width: fit-content; margin-left: auto; margin-top: 1.5rem; font-family: 'Source Sans 3', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; white-space: nowrap; }
.gds-view-all-link:hover { color: var(--terracotta); border-color: var(--terracotta); }
.gds-eyebrow { color: transparent; margin-bottom: 0; line-height: 2; }
.gds-eyebrow .letter { display: inline-block; color: transparent; transition: color 0.08s ease; }
.gds-teaser h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: var(--text-dark); margin-bottom: 1.25rem; }
.gds-tagline { font-family: 'Lora', serif; font-style: italic; font-size: 0.95rem; color: var(--text-mid); line-height: 1.8; max-width: 480px; margin-left: auto; text-align: left; }
.gds-map-wrap { padding: 3rem 0 6rem; }
.gds-map-container { position: relative; width: 62%; margin: 0 auto; transform: translateY(-114px); }
.gds-map-crop {
  position: relative; width: 100%; aspect-ratio: 1.6 / 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 100%), linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 100%), linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-composite: intersect;
}
.gds-map-crop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at center, rgba(74,45,37,0) 35%, rgba(74,45,37,0.16) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.34  0 0 0 0 0.24  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n3)'/%3E%3C/svg%3E");
  background-size: cover, 260px 260px;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.gds-map-inner { position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); margin: 0; }
.gds-world-map { width: 100%; height: auto; display: block; opacity: 0.7; filter: saturate(1.15) contrast(1.1); }
.gds-map-pins-layer { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 2400 / 1568; transform: translateY(-50%); pointer-events: none; }
.gds-map-pins-layer .gds-pin { pointer-events: auto; }
.gds-pin {
  position: absolute; transform: translateX(-50%);
  padding: 0.5rem 0.75rem; margin: -0.5rem -0.75rem;
}
.gds-pin[data-has-editions="true"] { cursor: pointer; }
.gds-map-caption-below {
  font-family: 'Caveat', cursive; font-size: clamp(0.55rem, 0.9vw, 0.75rem); line-height: 1.1;
  color: #3a2a1a; text-align: center; white-space: nowrap; pointer-events: none; margin: 0;
}

/* Editorial popup cluster */
.gds-pin-cluster {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  opacity: 0; visibility: hidden; transform: scale(0.92);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  z-index: 20; pointer-events: none;
}
.gds-pin-cluster.is-visible {
  opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.gds-pin-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.gds-pin-lines line { stroke: rgba(58,42,26,0.45); stroke-width: 1; }
.gds-pin-item {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  text-decoration: none;
}
.gds-pin-thumb {
  width: clamp(44px, 5vw, 64px); height: clamp(44px, 5vw, 64px); border-radius: 50%;
  overflow: hidden; border: 1.5px solid #c0392b; box-shadow: 0 4px 12px rgba(27,20,16,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gds-pin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gds-pin-item:hover .gds-pin-thumb { transform: scale(1.1); box-shadow: 0 6px 16px rgba(27,20,16,0.45); }
.gds-pin-item-label {
  font-family: 'Caveat', cursive; font-size: 0.68rem; font-weight: 600;
  color: #3a2a1a;
  background: rgba(245,245,243,0.88); padding: 1px 6px; border-radius: 3px;
  white-space: nowrap; transform: rotate(calc(var(--tilt, 0deg) * -1));
}

/* ============================================
   SUBSCRIBE STRIP
   ============================================ */
.subscribe-strip { background: var(--surface-dark); padding: 2.5rem 0; margin-bottom: -1px; }
/* .section-divider-banner (above the GDS section) fades solid surface-dark
   into sage right at its bottom edge — invisible seam, because .gds-teaser
   right below it is also sage; same color meeting same color. This banner
   sits on the OTHER side of the same sage section but its old gradient held
   solid surface-dark all the way to 100% and just stopped — .testimonials
   right below it is mono-cream, not surface-dark, so that stop was a real
   hard color jump, not just an optical Mach-banding illusion, and read as a
   visible line. Mirrors the divider banner's structure now: fade in from
   sage at the top (unchanged), hold solid, then fade OUT into
   --mono-cream at the bottom to match Testimonials the same way the
   divider matches the sage section. Fixed-px fade widths (not %) so both
   edges are the same visual width as the divider banner's ~12px
   (15% of its 80px height) regardless of this banner's own taller,
   content-driven height. */
.subscribe-strip-gds-fade { background: linear-gradient(to bottom, var(--sage) 0%, var(--surface-dark) 12px, var(--surface-dark) calc(100% - 12px), var(--mono-cream) 100%); }
.subscribe-strip .eyebrow { color: var(--terracotta) !important; }
.subscribe-inner { display: flex; align-items: center; gap: 3rem; margin-left: auto; max-width: 700px; }
.subscribe-label { color: rgba(255,255,255,0.45) !important; font-size: 0.65rem; letter-spacing: 0.16em; white-space: nowrap; margin: 0; flex-shrink: 0; }
.page-gds-index .subscribe-inner { margin-left: 0; }
.subscribe-text .eyebrow { color: var(--gold); margin-bottom: 0.75rem; }
.subscribe-text h3 { font-size: clamp(1rem, 2vw, 1.4rem); color: var(--white); margin-bottom: 0.5rem; }
.subscribe-text p { font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.7; }
.subscribe-form { display: flex; gap: 0; flex: 1; }
.subscribe-form input {
  flex: 1; background: rgba(145,90,74,0.25); border: 1px solid rgba(145,90,74,0.4);
  border-right: none; color: rgba(255,255,255,0.75); padding: 0.9rem 1.25rem;
  font-family: 'Source Sans 3', sans-serif; font-size: 0.88rem; outline: none;
}
.subscribe-form input::placeholder { color: rgba(245,245,243,0.35); }
.subscribe-form input:focus { border-color: var(--terracotta); }
.subscribe-form button {
  background: var(--terracotta); color: var(--white); border: none; padding: 0.9rem 1.5rem;
  font-family: 'Source Sans 3', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: background 0.2s;
}
.subscribe-form button:hover { background: var(--terracotta-dark); }
.subscribe-disclaimer { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-top: 0.75rem; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials { background: var(--mono-cream); padding: 6rem 0; scroll-margin-top: 80px; }
.testimonials .eyebrow { text-align: left; margin-bottom: 1rem; margin-left: -1.25rem; }
.testimonials h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); text-align: center; margin-bottom: 0.75rem; margin-left: auto; margin-right: auto; }
.testimonials-subtitle { text-align: center; font-size: 0.95rem; color: var(--text-light); margin-bottom: 4rem; }

.testimonials-carousel { position: relative; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.testimonials-grid { display: flex; gap: 1.5rem; width: max-content; animation: testimonials-marquee 70s linear infinite; }
.testimonials-grid:hover { animation-play-state: paused; }
.testimonial-card { background: var(--mono-cream-dark); padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; flex: 0 0 340px; width: 340px; }
@keyframes testimonials-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-grid { animation: none; }
}
.testimonial-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center; flex-shrink: 0; }
.testimonial-photo-placeholder {
  width: 60px; height: 60px; border-radius: 50%; background: var(--mono-cream-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 1rem; color: var(--terracotta); flex-shrink: 0;
}
.testimonial-quote { font-family: 'Lora', serif; font-style: italic; font-size: 0.87rem; line-height: 1.78; color: var(--text-dark); flex: 1; }
.testimonial-attribution { border-top: 1px solid var(--border); padding-top: 1rem; }
.testimonial-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta); display: block; margin-bottom: 0.2rem; }
.testimonial-company { font-size: 0.8rem; color: var(--text-light); }

.strip-banner { position: relative; width: 100%; height: clamp(170px, calc(8vw + 100px), 210px); padding: 0; overflow: hidden; background: var(--cream); }
.strip-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.3) contrast(1.1); }
.strip-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(22,22,20,0.55) 0%, rgba(22,22,20,0.2) 50%, rgba(22,22,20,0.02) 100%); }
body.page-rt .strip-banner { height: clamp(120px, calc(8vw + 50px), 160px); }
.strip-banner-tall { width: 100%; height: 540px; padding: 0; overflow: hidden; }
.strip-banner-tall-img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* ============================================
   CONTACT
   ============================================ */
.contact { background: var(--surface-dark); padding: 6rem 0; text-align: center; }
.contact .eyebrow { color: var(--terracotta); margin-bottom: 1.25rem; }
.contact h2 { font-size: clamp(1.3rem, 2.5vw, 2rem); color: var(--white); margin-bottom: 1.25rem; }
.contact > .container > p { font-size: 0.88rem; color: rgba(255,255,255,0.58); max-width: 480px; margin: 0 auto 2.5rem; line-height: 1.85; }
.contact-ctas { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.contact-social { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 2.5rem; }
.contact-social .social-strip-text { color: rgba(255,255,255,0.5); }
.contact-social .social-strip-text strong { color: rgba(255,255,255,0.75); }
.social-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 0;
  border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.75);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.social-icon-btn:hover { border-color: var(--white); color: var(--white); }
.social-icon-btn svg { width: 17px; height: 17px; }

/* ============================================
   SOCIAL / AMPLIFICATION
   ============================================ */
.social-strip { background: var(--mono-cream-dark); padding: 3rem 0; }
.social-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.social-strip-text { font-size: 0.88rem; color: var(--text-mid); }
.social-strip-text strong { color: var(--text-dark); }
.social-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.social-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding: 0.6rem 1.1rem; border: 1px solid #b57253;
  background: #b57253; color: var(--white); transition: all 0.2s;
}
.social-link:hover { background: #a06244; border-color: #a06244; }
.social-link svg { width: 14px; height: 14px; }

/* ============================================
   FOOTER
   ============================================ */
.footer { background: #321a12; padding: 3rem 0; }
.footer-inner { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-logo { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--terracotta); text-decoration: none; display: block; }
.footer-bottom-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: nowrap; }
.footer-tagline-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; }
.footer-tagline { font-size: 0.72rem; color: rgba(255,255,255,0.3); white-space: nowrap; }
.footer-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: nowrap; }
.footer-links a { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.38); text-decoration: none; transition: color 0.2s; white-space: nowrap; }
.footer-links a:hover { color: rgba(255,255,255,0.75); }
.footer-copy { font-size: 0.72rem; color: rgba(255,255,255,0.22); text-align: left; }

/* ============================================
   PAGE HERO (inner pages)
   ============================================ */
.page-hero { position: relative; height: 72vh; min-height: 500px; display: flex; align-items: flex-end; overflow: hidden; margin-top: 170px; }
.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,12,10,0.65) 0%, rgba(15,12,10,0.30) 45%, rgba(15,12,10,0.08) 100%); }
.page-hero-content { position: relative; z-index: 2; padding: 3rem clamp(2rem, 6vw, 5rem); width: 100%; }
.page-hero-back { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.75); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; transition: color 0.2s; }
.page-hero-back:hover { color: var(--white); }
.page-hero-eyebrow { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.75rem; display: block; }
/* Was clamp(2rem,5vw,4rem) — scaled up to 64px, noticeably bigger than the
   homepage's own hero h1 (a fixed 42px) and double the RT Talks page's h1
   (clamp(1.4rem,2.5vw,2rem)). Paulette felt the editorial articles read
   "big and busy" compared to the rest of the site; this was the single
   biggest contributor. Brought down to sit closer to the homepage's own
   scale — 2026-07-22, established as the editorial article template. */
.page-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.75rem); color: var(--white); margin-bottom: 0.75rem; }
.page-hero-subtitle { font-family: 'Lora', serif; font-style: italic; font-size: clamp(0.9rem, 1.8vw, 1.1rem); color: rgba(255,255,255,0.92); max-width: 600px; }

/* ============================================
   METADATA BAR
   ============================================ */
.metadata-bar { background: var(--sage); padding: 1.75rem 0; }
.metadata-bar-inner { display: flex; gap: 4rem; flex-wrap: wrap; }
.metadata-item label { display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.4rem; }
.metadata-item span { font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--text-dark); letter-spacing: 0.05em; }

/* ============================================
   ARTICLE BODY
   ============================================ */
.article-opening { padding: 5rem 0 3rem; text-align: center; }
.article-opening .pull-quote { max-width: 680px; margin: 0 auto 1.5rem; }
.pull-quote-rule { width: 40px; height: 2px; background: var(--terracotta); margin: 0 auto 1rem; }
.attribution { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-light); }

.article-section { padding: 4.5rem 0; }
.article-section.alt { background: var(--cream-dark); }
.article-section.dark { background: var(--surface-dark); }

.article-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.article-layout.image-right .article-text { order: 1; }
.article-layout.image-right .article-image-wrap { order: 2; }

.article-section-number { font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.2em; color: var(--terracotta); display: block; margin-bottom: 0.75rem; }
.article-text h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 1.5rem; color: var(--text-dark); }
.article-section.dark .article-text h2 { color: var(--white); }
/* Was 0.97rem — every other body-copy block on the site (About, Strategic
   Collaboration, Round Table register) sits at 0.82-0.87rem. Brought down
   to match — part of the 2026-07-22 editorial article template
   refinement. */
.article-text p { font-size: 0.85rem; line-height: 1.85; color: var(--text-mid); margin-bottom: 1.25rem; }
.article-section.dark .article-text p { color: rgba(255,255,255,0.62); }

.article-image-wrap img { width: 100%; display: block; }
.article-image-wrap figure + figure { margin-top: 1.5rem; }
figcaption { font-size: 0.76rem; color: var(--text-light); margin-top: 0.6rem; line-height: 1.5; font-style: italic; }
.article-section.dark figcaption { color: rgba(255,255,255,0.38); }

.article-fullwidth-image { margin: 0; }
.article-fullwidth-image img { width: 100%; display: block; }
.article-fullwidth-image figcaption { padding: 0.6rem clamp(2rem, 6vw, 5rem) 0; }

.article-image-trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 2.5rem 0; }
.article-image-trio figure img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.article-image-duo { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin: 2.5rem 0; }
.article-image-duo figure img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; }

.article-pullquote-block { background: var(--sage); padding: 5rem clamp(2rem, 8vw, 7rem); position: relative; }
.article-pullquote-block::before { content: ''; position: absolute; left: clamp(2rem, 4vw, 4rem); top: 50%; transform: translateY(-50%); width: 3px; height: 55%; background: var(--terracotta); }
.article-pullquote-block .pull-quote { color: var(--text-dark); font-size: clamp(1rem, 1.8vw, 1.4rem); padding-left: 2rem; }

/* SOCIAL SHARE (in article) */
.article-share { background: var(--warm-taupe); padding: 2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.article-share-inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.article-share-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-light); }
.share-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding: 0.55rem 1rem; border: 1px solid var(--border);
  color: var(--text-dark); transition: all 0.2s; cursor: pointer; background: var(--white);
}
.share-btn:hover { background: var(--text-dark); color: white; border-color: var(--text-dark); }
.share-btn.linkedin:hover { background: #0077B5; border-color: #0077B5; color: white; }
.share-btn.instagram:hover { background: #E1306C; border-color: #E1306C; color: white; }
.share-btn svg { width: 13px; height: 13px; }

/* EDITORIAL ARTICLE — PARCHMENT TEXTURE (2026-07-22)
   Same CSS-only paper-grain technique already used behind the GDS hub's
   editions list (see .gds-editions-wrap::before) — a fractal-noise SVG data
   URI plus a soft radial vignette, layered with mix-blend-mode:multiply so
   it tints whatever's underneath rather than needing its own background
   colour. Applied to three specific spots per Paulette's direction, not
   every section — the point is to break up the repetition between plain
   numbered sections, not to texture the whole article:
     .metadata-bar      — the sage strip right under the hero
     .article-share     — "Share this edition" (appears twice per article)
     .article-reflection — add this class to whichever section is the
                            article's closing reflective beat (currently
                            titled "What I Brought Home" in all four Turkey
                            editorials — the class isn't tied to that exact
                            heading text, so it still applies correctly if a
                            future editorial titles it differently)
   Template rule for future editorials: reuse these three classes as-is
   (metadata-bar and article-share already come for free from the shared
   template; just add class="article-section article-reflection" to
   whichever <div> holds the closing reflective section) and the aesthetic
   matches automatically — no per-article CSS needed. */
.metadata-bar, .article-share, .article-reflection {
  position: relative;
  overflow: hidden;
}
.metadata-bar::before, .article-share::before, .article-reflection::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at center, rgba(74,45,37,0) 35%, rgba(74,45,37,0.16) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.34  0 0 0 0 0.24  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover, 260px 260px;
  mix-blend-mode: multiply;
  z-index: 0;
}
.metadata-bar .container, .article-share .container, .article-reflection .container {
  position: relative;
  z-index: 1;
}

/* TAKE TO TABLE */
.take-to-table { background: var(--sage); padding: 3rem; margin: 0; }
.take-to-table-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.75rem; display: block; }
.take-to-table h4 { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--text-dark); margin-bottom: 0.6rem; }
.take-to-table p { font-family: 'Lora', serif; font-style: italic; font-size: 1.05rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 1.25rem; }
.take-to-table a { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px; transition: color 0.2s; }
.take-to-table a:hover { color: var(--text-dark); border-color: var(--text-mid); }

.article-closing-note { background: var(--cream-dark); padding: 5rem 0; text-align: center; }
.closing-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 2rem; display: block; }
.article-closing-note p { font-family: 'Lora', serif; font-style: italic; font-size: 0.97rem; color: var(--text-mid); max-width: 680px; margin: 0 auto 1.25rem; line-height: 1.85; }
.rule { width: 40px; height: 1px; background: var(--terracotta); margin: 2rem auto; }
.article-closing-name { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--text-dark); display: block; margin-bottom: 0.25rem; }
.article-closing-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-light); }

.article-cta-strip { background: #e8e0d5; padding: 4.5rem 0; text-align: center; }
.article-cta-strip .eyebrow { color: var(--terracotta); margin-bottom: 1rem; }
.article-cta-strip h2 { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--text-dark); margin-bottom: 1rem; }
.article-cta-strip p { font-size: 0.9rem; color: var(--text-mid); max-width: 440px; margin: 0 auto 2rem; line-height: 1.7; }

/* ============================================
   GDS INDEX PAGE
   ============================================ */
.gds-index-hero { position: relative; overflow: hidden; background: var(--sage); margin-top: 80px; text-align: center; height: calc(100vw * 298 / 1638 - 100px); }
.gds-index-hero-bg {
  position: relative; display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,1) 100%);
  filter: url(#gds-hero-motion-blur);
  transform: scaleY(0.9);
  transform-origin: top center;
}
.gds-index-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,22,20,0.275) 0%, rgba(22,22,20,0.1) 50%, rgba(22,22,20,0.01) 100%);
}
.gds-index-hero .container { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; transform: translateX(270px); }
.gds-index-hero .eyebrow { color: var(--terracotta); margin-bottom: 1rem; }
.gds-index-hero h1 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); color: var(--text-dark); margin-bottom: 1.25rem; letter-spacing: 0.02em; }
.gds-index-hero p { font-family: 'Lora', serif; font-style: italic; font-size: 0.9rem; color: var(--text-mid); max-width: 480px; margin: 0 auto; line-height: 1.8; }

/* Solid calm hero (no photo) — the photographed variant didn't suit the page */
.gds-index-hero-solid {
  background: var(--sage);
  height: calc(100vw * 298 / 1638);
  position: relative;
  z-index: 2;
  margin-bottom: -90px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 90px), transparent 100%);
}
/* .gds-index-hero .container's translateX(270px) above was tuned to dodge
   the old photo variant (.gds-index-hero-bg), which isn't in the page
   anymore — this solid variant has no photo to dodge, so that offset just
   pushes the centered heading 270px right of true center for no reason.
   Below ~1740px viewport width that pushes it clean off the right edge of
   the hero, which clips it (.gds-index-hero has overflow:hidden) — a real,
   silently-clipped heading on effectively every laptop and tablet width,
   not just tablet. Scoped to the solid variant specifically so the original
   photo-variant rule stays intact for reference if the photo ever comes
   back. */
.gds-index-hero-solid .container { transform: none; }

/* First-pass test: parchment watermark behind the editions list */
.gds-editions-wrap {
  position: relative;
  z-index: 1;
  background: var(--mono-cream);
  padding: 90px 0 6rem;
  overflow: hidden;
}
.gds-editions-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at center, rgba(74,45,37,0) 35%, rgba(74,45,37,0.16) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.34  0 0 0 0 0.24  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover, 260px 260px;
  mix-blend-mode: multiply;
  opacity: 1;
}

.page-gds-index .gds-countries { background: var(--near-black); padding: 4rem 0; }
.gds-country-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.gds-country-card { position: relative; aspect-ratio: 3/4; overflow: hidden; text-decoration: none; display: block; }
.gds-country-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: brightness(0.75); }
.gds-country-card:hover img { transform: scale(1.04); filter: brightness(0.88); }
.gds-country-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,20,16,0.92) 0%, transparent 60%); }
.gds-country-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; }
.gds-country-editions { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.5rem; display: block; }
.gds-country-card h2 { font-size: 2rem; color: var(--white); margin-bottom: 0.5rem; }
.gds-country-card p { font-family: 'Lora', serif; font-style: italic; font-size: 0.85rem; color: rgba(255,255,255,0.62); }
.view-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: opacity 0.3s ease; background: #b8997e; color: var(--text-dark); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.75rem 1.5rem; border: 1px solid rgba(255,255,255,0.3); white-space: nowrap; }
.gds-country-card:hover .view-btn { opacity: 1; }
.gds-more-coming { text-align: center; padding: 2.5rem 0 1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); }

/* ============================================
   TURKEY EDITIONS PAGE
   ============================================ */
.editions-header { display: flex; justify-content: space-between; align-items: center; padding: 3rem 0 2rem; border-bottom: 1px solid var(--border); margin-bottom: calc(2.5rem + 50px); }
.editions-header span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-light); }
.editions-list { display: flex; flex-direction: column; gap: 4rem; padding-bottom: 5rem; }
.edition-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; text-decoration: none; }
.edition-row.reverse .edition-row-image { order: 2; }
.edition-row.reverse .edition-row-text { order: 1; }
.edition-row-image { position: relative; aspect-ratio: 1/1; overflow: hidden; background: transparent; }
.edition-row-image img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; transform: scale(0.85);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-composite: intersect;
}
.edition-row:hover .edition-row-image img { transform: scale(1); }
.edition-badge { position: absolute; top: 1rem; left: 1rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--terracotta); color: white; padding: 0.3rem 0.6rem; }
.edition-row-location { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.6rem; display: block; }
.edition-row-text h3 { font-size: 1.6rem; color: var(--text-dark); margin-bottom: 1.1rem; }
.edition-row-text blockquote { font-family: 'Lora', serif; font-style: italic; font-size: 1.05rem; line-height: 1.7; color: var(--text-mid); margin: 0; padding-left: 1.25rem; border-left: 2px solid var(--terracotta); }

/* ============================================
   ROUND TABLE PAGE
   ============================================ */
.rt-page-eyebrow { transition: opacity 0.3s ease; }
.rt-page-hero { background: var(--mono-cream-dark); margin-top: 220px; padding: 4rem 0 5rem; position: relative; overflow: visible; }
.rt-page-hero::before { display: none; }
.rt-page-inner { margin-left: 150px; max-width: 640px; }
.rt-page-eyebrow { position: fixed; top: 114px; left: calc(clamp(2rem, 5vw, 5rem) + 76px); transform: translate(-50%, -50%); color: var(--terracotta); font-size: 0.72rem; letter-spacing: 0.18em; font-weight: 600; white-space: nowrap; z-index: 1000; font-family: 'Source Sans 3', sans-serif; text-transform: uppercase; }
body.rt-scrolled .rt-page-eyebrow { opacity: 0 !important; }
body.rt-scrolled .hero-brand { opacity: 0.12 !important; pointer-events: none !important; transition: opacity 0.4s ease !important; }
.rt-page-hero h1 { font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--text-dark); margin-bottom: 1rem; }
.rt-page-hero p { font-family: 'Lora', serif; font-style: italic; font-size: 0.92rem; color: var(--text-mid); max-width: 480px; line-height: 1.85; margin-bottom: 2rem; }

/* ============================================
   EDITORIAL PAGE OVERRIDES
   ============================================ */
.page-editorial .page-hero,
.page-gds-index .gds-index-hero { margin-top: 80px; }

/* GDS accent — sage replaces terracotta */
.page-editorial .eyebrow,
.page-gds-index .eyebrow,
.page-editorial .metadata-item label,
.page-editorial .article-section-number,
.page-editorial .take-to-table-label,
.page-editorial .closing-label,
.page-editorial .page-hero-eyebrow,
.page-gds-index .gds-index-hero .eyebrow,
.page-gds-index .gds-country-editions { color: var(--gds-green-dark); }

.page-editorial .pull-quote-rule,
.page-editorial .rule { background: var(--gds-green-dark); }
.page-editorial .article-pullquote-block::before { background: var(--gds-green-dark); }

/* GDS buttons */
.page-editorial .btn-primary,
.page-gds-index .btn-primary { background: var(--gds-green); color: var(--white); }
.page-editorial .btn-primary:hover,
.page-gds-index .btn-primary:hover { background: var(--gds-green-hover); }
.page-editorial .btn-ghost-dark,
.page-gds-index .btn-ghost-dark { border-color: var(--gds-green); }
.page-editorial .btn-ghost-dark:hover,
.page-gds-index .btn-ghost-dark:hover { background: var(--gds-green); color: var(--white); }

/* GDS Round Table nav button */
.page-editorial .nav-links .nav-highlight,
.page-gds-index .nav-links .nav-highlight { border-color: var(--gds-green); }
.page-editorial .nav-links .nav-highlight:hover,
.page-gds-index .nav-links .nav-highlight:hover { background: var(--gds-green); }

/* GDS subscribe button */
.page-editorial .subscribe-form button,
.page-gds-index .subscribe-form button { background: var(--gds-green); }
.page-editorial .subscribe-form button:hover,
.page-gds-index .subscribe-form button:hover { background: var(--gds-green-hover); }

/* GDS edition badge */
.page-editorial .edition-badge,
.page-gds-index .edition-badge { background: var(--gds-green-dark); }

/* GDS view button on country cards */
.page-gds-index .view-btn { background: var(--gds-green); }
.page-editorial .metadata-bar { background: var(--gds-sage-dark); }
.page-editorial .article-share { background: var(--warm-taupe); border-color: rgba(90,107,80,0.2); }
.gds-brand-label {
  position: absolute;
  top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  line-height: 1.7;
  pointer-events: none;
  white-space: nowrap;
}
.page-gds-index .subscribe-strip { background: var(--surface-dark); }
.page-gds-index .subscribe-strip h3,
.page-gds-index .subscribe-strip p { color: var(--white); }
.page-gds-index .subscribe-strip input { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); color: var(--white); }
.page-gds-index .subscribe-strip input::placeholder { color: rgba(255,255,255,0.6); }
.page-gds-index .subscribe-disclaimer { color: rgba(255,255,255,0.6); }
.page-gds-index .subscribe-form button { background: #6b8266; color: var(--white); }
.page-gds-index .subscribe-form button:hover { background: #5c7357; }

/* ============================================
   FLOATING NAV
   ============================================ */
.float-nav-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--terracotta);
  border: none;
  cursor: pointer;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  pointer-events: none;
}
.float-nav-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.float-nav-btn.open { background: var(--text-dark); }
.float-nav-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.float-nav-btn.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.float-nav-btn.open span:nth-child(2) { opacity: 0; }
.float-nav-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

.float-nav-overlay {
  position: fixed;
  bottom: 5.5rem;
  right: 2rem;
  background: var(--text-dark);
  border-radius: 8px;
  padding: 1.25rem 1.75rem;
  z-index: 1999;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  min-width: 220px;
  max-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.float-nav-overlay.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.float-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.float-nav-menu a {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s;
}
.float-nav-menu a:hover { color: var(--terracotta); }
.float-nav-menu a:first-child { color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.85rem; }
.float-nav-sub { font-size: 0.62rem !important; letter-spacing: 0.12em !important; color: rgba(255,255,255,0.45) !important; padding-left: 0.75rem; margin-top: -0.4rem !important; }
/* Same sub-link class is reused inside .mobile-menu, which has a white/light
   background (not the float-nav-overlay's dark one) — the near-white text
   above is invisible there, so give it a dark equivalent in that context. */
.mobile-menu .float-nav-sub { color: rgba(42,33,24,0.45) !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
/* Switch to the hamburger earlier than the general mobile breakpoint below —
   the fixed logo mark (240px) and the text nav links start overlapping
   somewhere around 769px–1190px, well before the 768px mobile breakpoint
   kicks in, so this is a separate, wider tier just for the nav. Raised from
   1190px to 1370px (2026-07-22) to also cover iPad Pro 13-inch landscape
   (1366px logical width) — Paulette tested iPad Pro 11-inch (834px
   portrait, already inside the old 1190px ceiling) against 13-inch
   (1366px landscape, outside it) in Safari's Responsive Design Mode and
   wanted the two to behave identically. Note this is a viewport-width
   breakpoint, not a device check — it can't distinguish an iPad in
   landscape from an ordinary laptop browser window resized to the same
   width, so any real laptop window in the new 1191–1370px band now also
   gets this tablet treatment (hamburger nav, static logo, solid eyebrows),
   not just iPads. */
@media (max-width: 1370px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* About section: .about-image-wrap is bottom-aligned (align-self:end) in
     its grid row on desktop, so the photo doesn't start until well below
     where the text column starts — the "About" eyebrow above the whole grid
     ends up reading as sitting above the TEXT (which starts right after it)
     rather than above the photo. Top-align the photo instead so it starts
     at the same row-start as the text, directly under the eyebrow. */
  .about-image-wrap { align-self: start; }
  /* .about-grid also has its own desktop-only max-width:980px with
     margin-left:auto/margin-right:0 — a right-aligned block, not full width.
     Reset to full-width/flush-left so it always shares the same left edge
     as .about-eyebrow (a separate, full-width .container sibling). */
  .about-grid { max-width: 100%; margin-left: 0; margin-right: 0; padding-right: 0; }

  /* Strategic Collaboration differentiator cards: the desktop bleed
     (negative margin, sized to clear the fixed logo's gutter) was never
     reset anywhere in this tablet band — every card's content started
     off-screen to the left, real clipped text (e.g. "01" rendering as "1"),
     not just a tight fit. Drop the bleed, and go to 2 columns instead of 4:
     at these widths each card is only ~180-270px wide, too narrow for these
     paragraph-length descriptions (same readability call already made for
     .rt-rules below). */
  .strategic-differentiators { grid-template-columns: repeat(2,1fr); margin-left: 0; }
  .differentiator { padding: 2.25rem 1.5rem 2.25rem 0; }
  .differentiator:nth-child(even) { border-right: none; padding-left: 1.5rem; padding-right: 0; }
  .differentiator:nth-child(-n+2) { border-bottom: 1px solid var(--border); padding-bottom: 2.25rem; }
  .differentiator:nth-child(n+3) { padding-top: 2.25rem; }

  /* GDS teaser "Circle8 Editorial" eyebrow: base CSS starts it transparent
     and JS only colors individual letters while they scroll through a small
     circle centered on the fixed logo — a deliberate "letters light up as
     you scroll past" effect on desktop, not a static label. At this width
     the eyebrow's horizontal position doesn't track the same relationship
     to the logo the desktop layout assumes, so letters rarely/never cross
     that circle — it reads as permanently blank instead of ever revealing.
     Force it solid so it's just readable text, no scroll-triggered reveal.
     !important needed to beat the JS's inline `span.style.color`. */
  .gds-eyebrow, .gds-eyebrow .letter { color: var(--terracotta) !important; }

  /* .gds-sticky-content's desktop translateY(-80px) (a parallax offset)
     pulls "What is / Global Design Series" up 80px — enough to land it
     visually ABOVE the "Circle8 Editorial" eyebrow above despite the
     eyebrow coming first in the HTML, once the eyebrow is made visible
     here. Reset it so the two sit in their actual document order. */
  .gds-sticky-content { transform: none; }
  /* This only fixed the vertical order — .gds-sticky-frame is still the
     desktop 62%-wide, margin:auto-centered column, and .gds-sticky-content
     inside it is still right-aligned (margin-left:auto). Same
     full-width/flush-left reset already used on mobile. Also:
     .gds-sticky-frame is a direct child of .gds-sticky (a full-bleed
     section, not wrapped in .container), so width:100% alone makes it
     flush to the raw section edge — .container (holding "Circle8
     Editorial" and every other eyebrow/heading on the page) has its own
     max-width:1200px and re-centers itself once the viewport passes that
     point, so above 1200px this frame and .container drift out of sync:
     confirmed visually at 1300px — "Global Design Series" sat noticeably
     left of "Circle8 Editorial" above it and "Strategic Collaboration" in
     the section above that. max-width/margin:auto here replicate
     .container's own centering so they always share the same left edge,
     for any width in this tablet band, not just the ones below 1200px. */
  .gds-sticky-frame { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
  .gds-sticky-content { width: 100%; max-width: 100%; margin-left: 0; }
  /* .gds-tagline and .gds-view-all-link both carry their own
     margin-left:auto (base desktop rule — right-aligns them within the
     original narrow, right-aligned .gds-sticky-content column). Widening
     that column to 100% just above means margin-left:auto now pushes both
     elements all the way to the new, much wider right edge instead —
     confirmed live at 1366px: h2 at x=32 (flush left, correct) but
     .gds-tagline at x=854 (margin-left:822px) and .gds-view-all-link at
     x=1202 (margin-left:1170px), stranded far right of the heading they're
     supposed to sit directly under. Reset both to margin-left:0 so they
     stack under the heading in one readable column, like every other
     eyebrow/heading pair fixed in this file today. */
  .gds-tagline, .gds-view-all-link { margin-left: 0; }

  /* Logo + eyebrow treatment, extended from the ≤768px mobile pattern below
     up to this tablet tier (Paulette's call after review: the fixed logo
     was overlapping/crowding tablet-width content exactly like it used to
     on phones, and every eyebrow whose color depends on letters scrolling
     past the fixed logo's position was landing misaligned or permanently
     invisible at this width — same root cause as the GDS eyebrow fix
     above, just sitewide). Same static-logo, solid-eyebrow rules as the
     mobile block, just active starting one tier earlier. */
  .hero-brand { position: static; margin-top: 80px; padding: 1.25rem 0 0 1.25rem; }
  .page-home .hero-brand { margin-top: 0; padding-top: 0.25rem; }
  .hero-brand-mark { width: 110px; height: 110px; }
  .page-home .hero-brand-mark { width: 160px; height: 160px; }
  .hero-brand-text { position: static; font-size: 22px; margin-top: 0.4rem; }
  .page-home .hero-brand-text { font-size: 30px; margin-top: 0.5rem; }

  .about-eyebrow, .about-eyebrow .letter,
  .rt-eyebrow, .rt-eyebrow .letter,
  .strategic-eyebrow, .strategic-eyebrow .letter,
  .testimonials-eyebrow .letter {
    color: var(--terracotta) !important;
  }
  .rt-eyebrow { margin-left: 0; }
  .testimonials .eyebrow { margin-left: 0; }

  /* Strategic Collaboration: stack eyebrow -> heading -> intro in one column,
     same as mobile — the eyebrow's -175px sidebar offset only made sense as
     part of the fixed-logo reveal effect; with the logo static now, keeping
     that offset just pokes the label out to the left of the heading for no
     reason. */
  .strategic-header { grid-template-columns: 1fr; margin-left: 0; gap: 1rem; }
  .strategic-eyebrow { grid-column: 1; margin-left: 0; margin-top: 0; }
  .strategic-header h2 { grid-column: 1; }
  .strategic-intro-group { grid-column: 1; }

  /* Homepage Round Table teaser: 220px margin-left existed only to clear the
     fixed logo's gutter — no longer needed with a static logo. */
  .rt-inner { margin-left: 0; max-width: 100%; }

  /* Standalone Round Table Talks page hero: its eyebrow is independently
     fixed-positioned at desktop pixel coordinates keyed to the logo's fixed
     spot — bring it into normal flow under the (now static) logo, same as
     mobile, and drop the top margin that existed to clear the old fixed
     header. Also reset the base rule's transform:translate(-50%,-50%) —
     transform isn't restricted to positioned elements, so it kept applying
     even after position:static, shifting the element by half of its own
     (now in-flow, auto) width/height. */
  .rt-page-eyebrow { position: static; transform: none; margin: 0.5rem 0 0 1.25rem; }
  .rt-page-hero { margin-top: 0; }
  .rt-page-inner { margin-left: 0; max-width: 100%; }

  /* GDS hub page keeps its own bespoke logo treatment (fixed/overlaid on the
     hero banner with a fade-to-watermark on scroll, not the sitewide
     static-in-flow pattern) — extending its existing mobile exception up to
     this tier rather than switching it to the generic static rule above,
     since that exception was built specifically to avoid a dead cream gap
     above the green hero and still addresses "logo overlapping content"
     via the opacity fade once scrolled. */
  .page-gds-index .hero-brand { position: fixed; top: 80px; margin-top: 0; padding: 0; }
  .page-gds-index .gds-brand-label { display: none; }
  .page-gds-index .gds-index-hero { margin-top: 80px; padding-top: 9rem; padding-bottom: 7rem; }
}
@media (max-width: 1024px) {
  .ecosystem-grid { grid-template-columns: repeat(2,1fr); }
  /* Single column all the way from 1024px down — the rule descriptions are
     too long to read comfortably in 2 columns, and the old repeat(2,1fr)
     here left a gap between this breakpoint and the 768px one below where
     the text ran off the right edge. */
  .rt-rules { grid-template-columns: 1fr; }
  .about-grid { gap: 3rem; }

  /* Footer: same nowrap-row overflow bug as below 768px, just showing up in
     this wider 768-1024px band instead since that fix only applied below
     768px */
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-bottom-row { flex-direction: column; flex-wrap: wrap; gap: 1rem; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  .footer-tagline, .footer-copy { white-space: normal; }
  .footer-copy { text-align: center; margin-left: 0; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .about-grid, .strategic-differentiators, .rt-register, .social-strip-inner { grid-template-columns: 1fr; }
  .about-image-wrap, .about-content-text, .about-content-meta { grid-column: 1; grid-row: auto; }
  .gds-cards, .gds-country-cards { grid-template-columns: 1fr; }
  .testimonial-card { flex: 0 0 280px; width: 280px; }
  .article-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .article-image-trio, .article-image-duo { grid-template-columns: 1fr; }
  .edition-row, .edition-row.reverse { grid-template-columns: 1fr; gap: 1.5rem; }
  .edition-row.reverse .edition-row-image { order: 1; }
  .edition-row.reverse .edition-row-text { order: 2; }
  .ecosystem-grid { grid-template-columns: 1fr; }
  .rt-formats { grid-template-columns: 1fr; }
  .metadata-bar-inner { gap: 2rem; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-bottom-row { flex-direction: column; flex-wrap: wrap; gap: 1rem; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  .footer-tagline, .footer-copy { white-space: normal; }
  .footer-copy { text-align: center; margin-left: 0; }
  .article-pullquote-block::before { display: none; }
  .article-pullquote-block .pull-quote { padding-left: 0; }
  .hero-content { padding: 0 1.5rem; }
  /* Subscribe strip: .subscribe-inner is a flex row (the old grid-template-
     columns override above did nothing on a flex container), so text and
     form were sitting side by side, squeezing the text column into
     3-word-wide wrapping. Stack text above form, and shrink the input/button
     so the whole block reads as one compact unit instead of two oversized
     boxes. */
  .subscribe-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .subscribe-form { flex-direction: column; width: 100%; }
  .subscribe-form input { border-right: 1px solid rgba(255,255,255,0.12); padding: 0.5rem 0.85rem; font-size: 0.72rem; }
  .subscribe-form button { padding: 0.5rem 1rem; font-size: 0.6rem; }
  .subscribe-inner .subscribe-form { max-width: 280px; }
  .rt-register { padding: 2rem; }
  .article-share-inner { gap: 1rem; }

  /* Logo: pinned in normal flow at the top instead of floating/fixed over
     content. margin-top clears the fixed nav bar (80px tall) — without it,
     the logo starts at the very top of the page underneath the nav and its
     top portion is hidden behind the nav's opaque background. */
  .hero-brand { position: static; margin-top: 80px; padding: 1.25rem 0 0 1.25rem; }
  /* Homepage only: sit closer to the nav bar above it */
  /* The homepage's logo lives inside <section class="hero">, which already
     carries an 80px top padding from the generic `section` rule — the
     margin-top:80px above was stacking on top of that (only here, since
     other pages' logo isn't nested in a section), pushing it twice as far
     from the nav as intended. Cancel it out and control the gap directly. */
  .page-home .hero-brand { margin-top: 0; padding-top: 0.25rem; }
  .hero-brand-mark { width: 110px; height: 110px; }
  /* Homepage only: logo mark and wordmark a bit larger/more proportioned */
  .page-home .hero-brand-mark { width: 160px; height: 160px; }

  /* No sticky sections on mobile — everything scrolls with the page */
  .strategic-sticky { position: static; }

  /* Eyebrows: always visible while scrolling instead of only revealing near
     the (now non-fixed) logo circle, and reset the desktop sidebar-label
     negative margins so they sit in normal flow instead of running off the
     left edge of the screen */
  .about-eyebrow, .about-eyebrow .letter,
  .rt-eyebrow, .rt-eyebrow .letter,
  .strategic-eyebrow, .strategic-eyebrow .letter,
  .testimonials-eyebrow .letter {
    color: var(--terracotta) !important;
  }
  .rt-eyebrow { margin-left: 0; }
  .testimonials .eyebrow { margin-left: 0; }

  /* Homepage Round Table teaser: same desktop-only left margin bug as the
     standalone Round Table Talks page's .rt-page-inner — 220px margin with
     no mobile reset was pushing the whole teaser (heading, rules, button)
     off the right edge and forcing horizontal overflow on the page. */
  .rt-inner { margin-left: 0; max-width: 100%; }

  /* Same teaser, the "Introductions / Acquisitions / Live Projects / Always"
     strip: desktop lays these out as a 4-item flex row with vertical
     dividers between them, which has no mobile equivalent and was cramming
     all four into one row, wrapping and clipping the last item's text.
     Stack them instead, with horizontal dividers between rows. */
  .rt-formats-strip { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .rt-strip-divider { display: none; }
  .rt-strip-item { width: 100%; padding-bottom: 1rem; border-bottom: 1px solid rgba(90,74,58,0.22); }
  .rt-strip-item:last-child { border-bottom: none; padding-bottom: 0; }

  /* Homepage "What is Global Design Series" section: the "Circle8 Editorial"
     eyebrow used to be hidden here (display:none) because the desktop
     .gds-sticky-frame — a narrow 62%-wide, right-aligned column holding
     "What is"/the heading — sat oddly close to/overlapping the eyebrow's
     own separate full-width block once brought into normal flow. That
     narrow frame was a desktop-only layout choice (positioning text beside
     the world map) with no reason to persist once this section stacks to a
     single column on mobile. Reset the frame to full-width with the same
     2rem side padding the eyebrow's own .container already has, so both
     sit in identical left-aligned flow — the eyebrow lands directly above
     "What is" with no overlap, consistent with every other mobile eyebrow
     (About, Strategic Collaboration, Round Table, Testimonials all show
     solid and un-hidden on mobile). */
  .gds-sticky-frame { width: 100%; padding: 0 2rem; }
  .gds-sticky-content { width: 100%; max-width: 100%; margin-left: 0; }
  /* Same fix as the tablet block above: .gds-tagline/.gds-view-all-link
     each carry their own margin-left:auto (meant to right-align them in
     the original narrow desktop column), which pushes them off to the
     right of this now-full-width column instead, stranded away from the
     heading above them. */
  .gds-tagline, .gds-view-all-link { margin-left: 0; }
  .gds-eyebrow { display: block; margin-bottom: 1rem; }
  .gds-eyebrow, .gds-eyebrow .letter { color: var(--terracotta) !important; }

  /* Strategic Collaboration: stack eyebrow -> heading -> intro in one column
     instead of the desktop side-label + 2-column layout */
  .strategic-header { grid-template-columns: 1fr; margin-left: 0; gap: 1rem; }
  .strategic-eyebrow { grid-column: 1; margin-left: 0; margin-top: 0; }
  .strategic-header h2 { grid-column: 1; }
  .strategic-intro-group { grid-column: 1; }

  /* Strategic Collaboration differentiator cards: the desktop bleed (negative
     margin) and the vertical right-hand divider between side-by-side columns
     both stop making sense once this stacks to one column — was causing the
     text to read as cut off against that stray line */
  .strategic-differentiators { margin-left: 0; }
  .differentiator { border-right: none; border-bottom: 1px solid var(--border); padding: 2rem 0; }
  .differentiator:last-child { border-bottom: none; }

  /* Homepage logo wordmark ("circle8"): was absolutely positioned assuming
     the old large fixed logo, which floated it away from the now-smaller
     pinned mark. Bring it into normal flow right under the mark instead. */
  .hero-brand-text { position: static; font-size: 22px; margin-top: 0.4rem; }
  .page-home .hero-brand-text { font-size: 30px; margin-top: 0.5rem; }

  /* Homepage hero background: "center" crops this wide desktop photo
     differently on a tall narrow screen — first pass at framing the artwork
     rather than the floor/desk; flag for a visual check. */
  .hero-bg { background-position: 20% 20%; }

  /* Round Table "Three Ways to the Table" cards: two-column grid was too
     narrow for this much text per cell and cut off content on the right;
     match the one-column stacking used everywhere else at this breakpoint */
  .rt-rules { grid-template-columns: 1fr; }

  /* Round Table pages "Why Circle8 / What You Can Expect" section: the
     desktop 2-column layout (prose | stacked cards) squeezed both columns
     down to ~half width with no mobile override at all. Text goes full
     width on top; the 4 expect-cards become a 2x2 grid instead of either
     the desktop side column or a single-column stack. */
  .rt-why-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .rt-expect-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Round Table pages "The Approach" philosophy section: same bug — 2-column
     grid (prose | dark quote box) had no mobile override, squeezing the
     quote box into a narrow overflowing side column. Stack text on top. */
  .rt-philosophy-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Standalone Round Table Talks page: the eyebrow above the hero is
     independently fixed-positioned at desktop-tuned pixel coordinates, which
     no longer line up now that the logo above it is pinned/static instead of
     fixed — bring it into normal flow directly under the logo, and drop the
     large top margin that existed to clear the old fixed header. Also reset
     transform — it isn't restricted to positioned elements and kept applying
     after position:static, shifting the element by half its own in-flow
     width/height. On round-table.html (no page-specific override, unlike
     what-is-the-round-table-talks.html) this rendered "Circle8 Talks" ~400px
     off-screen at mobile width too — a real pre-existing bug, not something
     introduced by the tablet work, just never caught since that page wasn't
     covered in the original mobile audit. */
  .rt-page-eyebrow { position: static; transform: none; margin: 0.5rem 0 0 1.25rem; }
  .rt-page-hero { margin-top: 0; }

  /* Standalone Round Table Talks page: the desktop 150px left margin (room
     for the fixed logo) has no mobile equivalent to clear, pushing the
     heading/body text hard right and leaving an empty left column where the
     faint logo watermark is the only thing visible. */
  .rt-page-inner { margin-left: 0; max-width: 100%; }

  /* GDS hub page: "Circle8 Editorial" label was centered inside the (now
     much smaller) logo circle, illegible at that size. Bring it into normal
     flow right under the logo instead, so it reads as a label sitting above
     the "Global Design Series" heading rather than crammed inside the mark. */
  .gds-brand-label { position: static; display: block; transform: none; margin-top: 0.4rem; text-align: left; }

  /* GDS world map: a little larger on mobile so the pins/photos are easier
     to make out */
  .gds-map-container { width: 88%; transform: none; }

  /* "What is Global Design Series" text block: the desktop -80px translateY
     (part of the sticky/parallax reveal effect) has no mobile equivalent to
     compensate for, pulling the text up too close to the divider above it. */
  .gds-sticky-content { transform: none; }

  /* Testimonials: the eyebrow is left-aligned but the heading was centered,
     so they didn't line up — align the heading to match */
  .testimonials h2 { text-align: left; margin-left: 0; margin-right: 0; }

  /* GDS hub hero: the heading/subtitle were shifted 270px right (a desktop
     offset to clear space next to the letterboxed banner) and the band's
     height formula is 100vw-based and goes to ~0 on a narrow screen — on
     mobile this pushed the text almost entirely off-screen, invisibly
     clipped by the section's own overflow:hidden. Let it size to its content
     and sit in normal flow instead. */
  .gds-index-hero { height: auto; min-height: 200px; padding: 2rem 0; }
  .gds-index-hero .container { position: static; transform: none; text-align: left; padding: 0 1.25rem; }

  /* GDS hub page, mobile only: put the logo back to fixed/overlaid (like
     desktop) instead of static/in normal flow, so it sits directly on the
     green hero instead of stacking a separate cream block above it. Drop
     the "Circle8 Editorial" label (redundant once the logo overlays the
     hero) and give the hero enough top padding to clear the overlaid logo
     before the heading starts. */
  .page-gds-index .hero-brand { position: fixed; top: 80px; margin-top: 0; padding: 0; }
  .page-gds-index .gds-brand-label { display: none; }
  .page-gds-index .gds-index-hero { margin-top: 80px; padding-top: 9rem; padding-bottom: 7rem; }

}
@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .rt-rules { grid-template-columns: 1fr; }
  .about-stats { flex-direction: column; gap: 1.5rem; }
}