/* ============================================================
   GoldEra Advisory — Design Tokens
   Import this file before any UI stylesheet:
     <link rel="stylesheet" href="/colors_and_type.css">

   Two-mode brand: dark (primary) + cream (secondary).
   ============================================================ */

/* ---------- Fonts ---------- */
/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  /* ============ CORE PALETTE ============ */
  /* The four brand colors from the GoldEra Brand Guide. */
  --gold:  #C49A2A;
  --teal:  #1A8C7E;
  --navy:  #172136;
  --cream: #FDFAF4;

  /* ============ COLOR SCALES (OKLCH-tuned) ============
     Use these for tints/shades. 500 = the brand color.
     ============ */

  /* Gold ramp */
  --gold-50:  #FBF4E0;
  --gold-100: #F4E3B0;
  --gold-200: #E9CC7A;
  --gold-300: #DCB452;
  --gold-400: #D0A437;
  --gold-500: #C49A2A;     /* brand */
  --gold-600: #A88121;
  --gold-700: #876818;
  --gold-800: #604910;
  --gold-900: #3D2E08;

  /* Teal ramp */
  --teal-50:  #E1F4F1;
  --teal-100: #B7E2DC;
  --teal-200: #7CC8BF;
  --teal-300: #4BB0A4;
  --teal-400: #2A9C8E;
  --teal-500: #1A8C7E;     /* brand */
  --teal-600: #137468;
  --teal-700: #0E5B52;
  --teal-800: #0A4138;
  --teal-900: #062821;

  /* Navy ramp */
  --navy-50:  #1A2B45;     /* card surface on dark */
  --navy-100: #15243A;
  --navy-200: #131F33;
  --navy-300: #172136;     /* brand surface */
  --navy-400: #0C1727;
  --navy-500: #172136;     /* brand */
  --navy-600: #0A1422;
  --navy-700: #07101B;
  --navy-800: #050B13;
  --navy-900: #02050A;

  /* Cream ramp (warm neutrals) */
  --cream-50:  #FFFDF8;
  --cream-100: #FDFAF4;    /* brand */
  --cream-200: #F6F0E2;
  --cream-300: #E8DEC6;
  --cream-400: #C8BC9D;
  --cream-500: #9C8F71;
  --cream-600: #6E6450;
  --cream-700: #4A4337;
  --cream-800: #2E2921;
  --cream-900: #16140F;

  /* ============ SEMANTIC SURFACES ============ */
  /* Dark mode (the default) */
  --bg:           var(--navy-500);
  --bg-elev:     #15243A;             /* slightly lifted */
  --bg-card:     #16263F;             /* card surface */
  --bg-card-hi:  #1B2D4A;             /* hovered card */
  --bg-muted:    #0A1422;             /* footer / inset wells */

  /* Cream mode swaps */
  --bg-cream:        var(--cream-100);
  --bg-cream-elev:   var(--cream-50);
  --bg-cream-card:   #FFFFFF;

  /* ============ INK / TEXT ============ */
  /* On dark surfaces — all cream-tinted; opacity carries the hierarchy
     so secondary/tertiary copy reads warm against navy, not cool gray. */
  --fg1:        var(--cream-100);                  /* primary text */
  --fg2:        rgba(253, 250, 244, 0.72);         /* secondary, body copy on dark */
  --fg3:        rgba(253, 250, 244, 0.52);         /* tertiary, muted captions */
  --fg-dim:     rgba(253, 250, 244, 0.32);         /* very dim, dividers as text */

  /* On cream surfaces */
  --ink1:       var(--navy-500);      /* primary text */
  --ink2:       #3B4A66;              /* secondary */
  --ink3:       #6B7891;              /* tertiary */

  /* Accents */
  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-600);
  --accent-press:  var(--gold-700);

  --success:    var(--teal-500);
  --warning:    #D99A2A;
  --danger:     #C44A2A;
  --info:       var(--teal-400);

  /* ============ BORDERS ============ */
  --border-on-dark:        rgba(196, 154, 42, 0.15);     /* gold @ 15% */
  --border-on-dark-strong: rgba(196, 154, 42, 0.30);
  --border-on-dark-cool:   rgba(255, 255, 255, 0.06);
  --border-on-cream:       rgba(15, 27, 46, 0.08);
  --border-on-cream-strong:rgba(15, 27, 46, 0.16);

  /* ============ SHADOWS ============ */
  --shadow-card-dark:
    inset 0 1px 0 rgba(196, 154, 42, 0.08),
    0 20px 50px -20px rgba(0, 0, 0, 0.6);

  --shadow-card-dark-hi:
    inset 0 1px 0 rgba(196, 154, 42, 0.18),
    0 28px 60px -20px rgba(0, 0, 0, 0.75);

  --shadow-card-cream:
    0 1px 2px rgba(15, 27, 46, 0.04),
    0 8px 24px -12px rgba(15, 27, 46, 0.12);

  --shadow-card-cream-hi:
    0 2px 4px rgba(15, 27, 46, 0.06),
    0 16px 36px -12px rgba(15, 27, 46, 0.18);

  --shadow-button-gold:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 6px 18px -6px rgba(196, 154, 42, 0.45);

  /* ============ RADII ============ */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:  10px;     /* inputs */
  --radius-lg:  12px;     /* buttons, icon tiles */
  --radius-xl:  16px;     /* cards */
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* ============ SPACING (8px base) ============ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10:128px;

  /* ============ MOTION ============ */
  --ease-out-soft:  cubic-bezier(.2, .7, .2, 1);
  --ease-in-out:    cubic-bezier(.4, 0, .2, 1);
  --dur-fast:    80ms;
  --dur-base:   150ms;
  --dur-medium: 200ms;
  --dur-slow:   600ms;

  /* ============ Z ============ */
  --z-header:   100;
  --z-overlay: 1000;
  --z-toast:   2000;

  /* ============ TYPOGRAPHY ============ */
  --font-display:  'Lora', 'Georgia', 'Times New Roman', serif;
  --font-body:     'Plus Jakarta Sans', 'Calibri', system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  /* Sizes (rem-based, 1rem = 16px) */
  --fs-xs:    0.75rem;    /* 12 — micro labels */
  --fs-sm:    0.875rem;   /* 14 — eyebrows, captions */
  --fs-base:  1rem;       /* 16 — body */
  --fs-lg:    1.125rem;   /* 18 — large body */
  --fs-xl:    1.375rem;   /* 22 — h4 / card titles */
  --fs-2xl:   1.75rem;    /* 28 — h3 */
  --fs-3xl:   2.25rem;    /* 36 — h2 */
  --fs-4xl:   3rem;       /* 48 — h1 */
  --fs-5xl:   3.75rem;    /* 60 — hero display */
  --fs-6xl:   4.5rem;     /* 72 — max display */

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Leading */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;

  /* Tracking */
  --tr-tight:    -0.02em;
  --tr-normal:    0;
  --tr-wide:      0.04em;
  --tr-eyebrow:   0.14em;   /* the canonical eyebrow letter-spacing */
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Apply these as classes (or copy the declarations).
   ============================================================ */

.display, .h-display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw + 1rem, var(--fs-6xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
}

.h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw + 1rem, var(--fs-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw + 0.75rem, var(--fs-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.body, p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg3);
}

.micro {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  letter-spacing: 0.04em;
  color: var(--fg3);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(196, 154, 42, 0.08);
  color: var(--gold-300);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}

/* Italic emphasis in headlines (the signature brand tic) */
.h1 em, .h2 em, .h3 em, .h4 em, .display em {
  font-style: italic;
  font-weight: inherit;
  /* same color — italics carry the emphasis, not color */
}

/* Inline bold inside body copy — keeps tone, just heavier */
p strong, .body strong, .lead strong {
  color: var(--fg1);
  font-weight: var(--fw-semibold);
}

/* ============================================================
   LIGHT MODE OVERRIDES — apply via [data-theme="cream"] on a wrapper
   ============================================================ */
[data-theme="cream"] {
  --bg:        var(--bg-cream);
  --bg-elev:   var(--bg-cream-elev);
  --bg-card:   var(--bg-cream-card);
  --bg-card-hi:var(--cream-50);
  --bg-muted:  var(--cream-200);

  --fg1: var(--ink1);
  --fg2: var(--ink2);
  --fg3: var(--ink3);
  --fg-dim: var(--cream-400);
}

/* Reset baselines used across the system */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   GoldEra Advisory — Marketing Site stylesheet
   Consumes design tokens from ../../colors_and_type.css
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--navy);
  color: var(--fg1);
  font-family: var(--font-body);
}
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 720px) {
  .container { padding: 0 24px; }
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-base) var(--ease-out-soft),
              color var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-sm  { padding: 8px 14px;   font-size: 13px; border-radius: 10px; }
.btn-md  { padding: 12px 22px;  font-size: 15px; }
.btn-lg  { padding: 16px 28px;  font-size: 16px; }

.btn-primary {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 18px -6px rgba(196,154,42,0.45);
}
.btn-primary:hover { background: var(--gold-600); }

.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: rgba(196,154,42,0.4);
}
.btn-outline:hover { background: var(--gold); color: var(--navy); }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-ghost:hover { background: rgba(196,154,42,0.08); color: var(--gold); }

.btn-cream {
  background: var(--cream);
  color: var(--navy);
  border-color: var(--cream);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 6px 18px -8px rgba(0,0,0,0.4);
}
.btn-cream:hover { background: #FFFFFF; border-color: #FFFFFF; }

.btn-icon { display: inline-flex; align-items: center; }

/* ---------- Eyebrow / section header ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.section-header { display: flex; flex-direction: column; gap: 18px; margin-bottom: 56px; max-width: 760px; }
.section-header--center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw + 1rem, 3rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
}
.section-title em { color: var(--cream); font-style: italic; }
.section-lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0;
  max-width: 640px;
}

/* ---------- Icon tile ---------- */
.icon-tile {
  width: 64px; height: 64px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 64px;
}
.icon-tile--md { width: 64px; height: 64px; }
.icon-tile--sm { width: 48px; height: 48px; border-radius: 10px; }
.icon-tile--teal { background: #264845; }
.icon-tile--olive { background: #6B5B2E; }
.icon-tile--gold  { background: var(--gold); }
.icon-tile--navy  { background: #1B2D4A; border: 1px solid rgba(196,154,42,.2); }
.icon-tile__glyph { font-size: 32px; line-height: 1; }
.icon-tile--sm .icon-tile__glyph { font-size: 22px; }

/* ---------- Card base ---------- */
.card { border-radius: 16px; }
.card--dark {
  background: #16263F;
  border: 1px solid rgba(196,154,42,0.18);
  box-shadow: inset 0 1px 0 rgba(196,154,42,0.08), 0 20px 50px -20px rgba(0,0,0,0.6);
  transition: transform var(--dur-medium) var(--ease-out-soft),
              border-color var(--dur-medium) var(--ease-out-soft),
              box-shadow var(--dur-medium) var(--ease-out-soft);
}
.card--dark:hover {
  transform: translateY(-1px);
  border-color: rgba(196,154,42,0.30);
  box-shadow: inset 0 1px 0 rgba(196,154,42,0.18), 0 28px 60px -20px rgba(0,0,0,0.75);
}
.card--cream {
  background: var(--cream);
  color: var(--navy);
  border: 1px solid rgba(15,27,46,0.08);
  box-shadow: 0 1px 2px rgba(15,27,46,0.04), 0 8px 24px -12px rgba(15,27,46,0.12);
}

/* ============================================================
   Site Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(15,27,46,0.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(196,154,42,0.10);
}
.site-header--cream {
  background: rgba(253, 250, 244, 0.92);
  border-bottom: 1px solid rgba(15, 27, 46, 0.08);
}
.site-header--cream .site-nav a {
  color: rgba(15, 27, 46, 0.72);
}
.site-header--cream .site-nav a:hover {
  color: var(--gold-700);
}
.site-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 12px 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.site-logo { display: flex; align-items: center; }
.site-logo img { height: 48px; width: auto; display: block; }
.site-nav { display: flex; gap: 28px; }
.site-nav a {
  font-size: 14px; font-weight: 500; color: var(--fg2);
  transition: color var(--dur-base) var(--ease-out-soft);
}
.site-nav a:hover { color: var(--gold); }
@media (max-width: 880px) {
  .site-nav { display: none; }
  .site-header__inner { padding: 12px 24px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: 120px 0 96px;
  overflow: hidden;
}
.hero-glow {
  position: absolute; inset: -50% -10% auto auto;
  width: 700px; height: 700px;
  background: radial-gradient(closest-side, rgba(196,154,42,0.18), rgba(26,140,126,0.10) 40%, transparent 70%);
  pointer-events: none;
}
.hero__inner { position: relative; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--cream);
  margin: 0 0 24px;
  max-width: 980px;
}
.hero-title em { font-style: italic; color: var(--gold); }
.hero-lead {
  font-family: var(--font-body);
  font-size: 20px; line-height: 1.55;
  color: var(--fg2);
  max-width: 720px;
  margin: 0 0 40px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-pills { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 40px; }

/* ---------- Hero grid (logo + headline two-column) ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.45fr;
  gap: 64px;
  align-items: center;
}
.hero-grid__mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero-grid__mark img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  /* No drop-shadow — the logo's navy plate matches the hero bg
     so the rectangular outline must be invisible. */
}
.hero-grid__flourish {
  width: 60%;
  max-width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 154, 42, 0.6), transparent);
}
.hero-grid__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.hero-grid__rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero-grid__text .hero-title {
  font-size: clamp(2.25rem, 3.4vw + 0.5rem, 3.5rem);
  line-height: 1.2;
  margin: 0 0 32px;
  overflow-wrap: break-word;
}
.hero-grid__text .hero-title em {
  /* italic descenders need a hair more room so they don't collide with the lead */
  line-height: 1.25;
  display: inline-block;
}
.hero-grid__text .hero-lead {
  margin: 0;
  font-size: 18px;
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-grid__mark img { max-width: 280px; }
}

/* ============================================================
   Brand Sign-off (cream section above footer)
   ============================================================ */
.signoff {
  background: var(--cream);
  padding: 40px 0 72px;
  border-top: 1px solid rgba(15, 27, 46, 0.06);
}
.signoff__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.signoff__mark {
  width: clamp(220px, 26vw, 320px);
  height: auto;
  display: block;
}
.signoff__ornament {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 360px;
}
.signoff__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 154, 42, 0.4), transparent);
}
.signoff__diamond {
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(196, 154, 42, 0.18);
}
.signoff__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.8vw + 0.8rem, 2.125rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0;
  font-weight: 500;
}
.signoff__tagline em {
  font-style: italic;
  color: var(--gold-700);
}
@media (max-width: 720px) {
  .signoff { padding: 28px 0 48px; }
}

/* Legacy: closing brand signature (small home logo, now retired) */
.hero-signature { display: none; }

/* ---------- Approach block (under challenge list) ---------- */
.approach-block {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(196, 154, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.approach-block__text {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.8vw + 0.85rem, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--cream);
  margin: 0;
  font-weight: 500;
}
.approach-block__text em {
  font-style: italic;
  color: var(--gold);
}

/* Full-width variant: spans both columns below the grid */
.approach-block--full {
  margin-top: 56px;
  padding-top: 36px;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.approach-block--full .approach-block__text {
  font-size: clamp(1.25rem, 1vw + 0.85rem, 1.5rem);
  line-height: 1.4;
  max-width: 560px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
@media (max-width: 880px) {
  .approach-block--full { margin-top: 40px; padding-top: 28px; }
}

/* ---------- Challenge bullet list ---------- */
.challenge-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.challenge-list__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
  position: relative;
}
.challenge-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(196, 154, 42, 0.15);
}
.challenge-list__q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 0.8vw + 0.85rem, 1.375rem);
  line-height: 1.3;
  color: var(--fg2);
  font-weight: 400;
}
.challenge-list__a {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1vw + 0.85rem, 1.5rem);
  line-height: 1.3;
  color: var(--cream);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------- Value-vow with-image variant ---------- */
.value-vow__grid--with-image {
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.value-vow__media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.value-vow__media-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(196, 154, 42, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(196, 154, 42, 0.12),
    0 28px 60px -24px rgba(0, 0, 0, 0.7);
  background: #0A1422;
  flex: 1;
  min-height: 360px;
}
.value-vow__media-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.value-vow__media-frame--empty {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 14px,
      rgba(196, 154, 42, 0.04) 14px,
      rgba(196, 154, 42, 0.04) 15px
    ),
    #0A1422;
  border-style: dashed;
  border-color: rgba(196, 154, 42, 0.30);
  box-shadow: inset 0 1px 0 rgba(196, 154, 42, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.value-vow__media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(196, 154, 42, 0.55);
}
.value-vow__media-placeholder svg {
  width: 36px;
  height: 36px;
}
.value-vow__media-placeholder span {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.value-vow__media-caption {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--fg3);
  font-style: italic;
  text-align: right;
  padding-right: 4px;
}
@media (max-width: 880px) {
  .value-vow__grid--with-image { grid-template-columns: 1fr; gap: 36px; }
  .value-vow__media-caption { text-align: left; }
}

/* ---------- Elevated value proposition ("vow") ---------- */
.value-vow {
  margin-top: 88px;
  padding-bottom: 32px;
  max-width: 1080px;
}
/* ---------- Why GoldEra CTA strip ---------- */
.why-goldera__cta {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(196, 154, 42, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.why-goldera__cta-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1vw + 0.85rem, 1.5rem);
  line-height: 1.4;
  color: var(--cream);
  margin: 0;
  font-weight: 500;
  max-width: 640px;
}
.why-goldera__cta-text em {
  font-style: italic;
  color: var(--gold);
}
@media (max-width: 880px) {
  .why-goldera__cta { margin-top: 28px; padding-top: 28px; }
}
.persona-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.persona-list__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  align-items: start;
  padding: 4px 0 4px 22px;
  border-left: 1px solid rgba(196, 154, 42, 0.30);
  transition: border-color var(--dur-medium) var(--ease-out-soft);
}
.persona-list__item:hover {
  border-left-color: var(--gold);
}
.persona-list__icon {
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.persona-list__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.persona-list__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--cream);
  line-height: 1.25;
}
.persona-list__desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg2);
}

/* ---------- Section-divider ornament ----------
   Floats the gold diamond + rules ON TOP of each section's top edge so
   it visually stitches the dividing line between sections. Requires
   `position: relative` on the host section (set below). Sections may
   also need a little extra top padding so the section-header doesn't
   crowd the ornament.
   ---------------------------------------------- */
.value-vow__ornament--section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  max-width: 480px;
  z-index: 2;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Anchor for the absolutely-positioned ornament */
.why-goldera,
.what-we-do,
.team,
.process,
.contact,
.signoff {
  position: relative;
}

.value-vow__ornament {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.value-vow__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 154, 42, 0.35), transparent);
}
.value-vow__diamond {
  width: 10px;
  height: 10px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px rgba(196, 154, 42, 0.15);
}
.value-vow__eyebrow {
  text-align: center;
  font-size: 14px;
  margin-bottom: 56px;
}
.value-vow__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.value-vow__col { display: flex; flex-direction: column; gap: 16px; }
.value-vow__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  position: relative;
  padding-left: 28px;
}
.value-vow__label::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 1px;
  background: var(--gold);
}
.value-vow__statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1vw + 0.85rem, 1.625rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--cream);
  margin: 0;
  font-weight: 500;
}
.value-vow__statement em {
  font-style: italic;
  color: var(--gold);
}
@media (max-width: 880px) {
  .value-vow { margin-top: 56px; }
  .value-vow__grid { grid-template-columns: 1fr; gap: 36px; }
  .value-vow__eyebrow { margin-bottom: 36px; }
}

/* ---------- Hero mark (centered logo above headline) ---------- */
.hero-mark {
  display: none; /* legacy: replaced by .hero-grid__mark */
}

/* Deprecated: legacy hero-manifesto block, retained for any old refs */
.hero-manifesto { display: none; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--fg3);
}
.hero-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(196,154,42,.12); }
.hero-pill__dot--teal { background: var(--teal); box-shadow: 0 0 0 4px rgba(26,140,126,.18); }

/* ============================================================
   Value Prop
   ============================================================ */
.value-prop { padding: 80px 0; border-top: 1px solid rgba(196,154,42,0.08); }
.value-prop__grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start;
  margin-top: 24px;
}
.value-prop__lead {
  font-family: var(--font-body);
  font-size: 22px; line-height: 1.55;
  color: var(--cream);
  margin: 0;
}
.value-prop__lead strong { color: var(--gold); font-weight: 600; }
.value-prop__body {
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.7;
  color: var(--fg2);
  margin: 0;
}
@media (max-width: 880px) {
  .value-prop__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Why GoldEra (combined who-we-serve + differentiators)
   ============================================================ */
.why-goldera { padding: 96px 0; }
/* Three-column layout: serve | center image | apart */
.why-goldera__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.why-goldera__col--serve  { order: 3; }
.why-goldera__col--center { order: 2; }
.why-goldera__col--apart  { order: 1; }

/* Center image frame with gold border */
.why-goldera__figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(196, 154, 42, 0.30),
    0 28px 60px -24px rgba(0, 0, 0, 0.7);
  background: #0A1422;
  aspect-ratio: 4 / 5;
}
.why-goldera__figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 980px) {
  .why-goldera__grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .why-goldera__col--center { max-width: 480px; margin: 0 auto; }
}
.why-goldera__col { display: flex; flex-direction: column; gap: 28px; }
.why-goldera__sub {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.why-goldera__sub-rule {
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--gold);
}
@media (max-width: 880px) {
  .why-goldera__grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   Differentiators (open layout: gold left-border, no card chrome)
   ============================================================ */
.differentiators { padding: 80px 0; }
.differentiators .eyebrow { margin-bottom: 32px; }
.differentiators__list { display: grid; gap: 24px; }
.diff-card {
  display: grid; grid-template-columns: 40px 1fr; gap: 18px;
  align-items: start;
  /* override the .card--dark base */
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(196, 154, 42, 0.30) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 4px 22px;
  transition: border-color var(--dur-medium) var(--ease-out-soft),
              transform var(--dur-medium) var(--ease-out-soft);
}
.diff-card:hover {
  transform: none !important;
  border-left-color: var(--gold) !important;
  box-shadow: none !important;
}
.diff-card .icon-tile {
  background: transparent !important;
  border: none !important;
  width: 40px; height: 40px;
  flex: 0 0 40px;
}
.diff-card .icon-tile__glyph { font-size: 28px; }
.diff-card__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  color: var(--cream);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.diff-card__text {
  font-family: var(--font-body);
  font-size: 14.5px; line-height: 1.6;
  color: var(--fg2);
  margin: 0;
}

/* ============================================================
   Who We Serve list (now used inside Why GoldEra)
   ============================================================ */
.who-we-serve { padding: 96px 0; }
.who-we-serve__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.who-we-serve__intro .section-title { margin: 18px 0 18px; }
.serve-list { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.serve-list__item {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  align-items: start;
  font-size: 16px; line-height: 1.5; color: var(--fg2);
}
.serve-list__check {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(196,154,42,0.12);
  color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  border: 1px solid rgba(196,154,42,0.35);
}
@media (max-width: 880px) {
  .who-we-serve__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   What We Do (merged services + solutions)
   ============================================================ */
.what-we-do { padding: 96px 0; }
.what-we-do__grid {
  display: block;
}
.what-we-do__intro {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.what-we-do__intro .section-title {
  font-size: clamp(1.75rem, 2vw + 0.75rem, 2.5rem);
  margin: 0;
}
.what-we-do__intro .section-lead {
  margin: 0;
  font-size: 16px;
}
.what-we-do__index {
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(196, 154, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.what-we-do__index li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--fg2);
  font-style: italic;
  line-height: 1.45;
}
.what-we-do__index-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  min-width: 18px;
  letter-spacing: 0.02em;
}
@media (max-width: 980px) {
  .what-we-do__grid { grid-template-columns: 1fr; gap: 48px; }
  .what-we-do__intro { position: static; }
}

.solution-card--retainer {
  background: linear-gradient(180deg, #16263F, #142036);
  border-color: rgba(196, 154, 42, 0.28);
}
.solution-card--retainer .solution-card__num { color: var(--gold-300); }

/* ---------- Retainer footer bridge ---------- */
.retainer-bridge {
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(196, 154, 42, 0.28);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 28px;
  width: min(100%, calc(50% - 9px));
  text-align: left;
}
@media (max-width: 720px) {
  .retainer-bridge { width: 100%; }
}
.retainer-bridge__mark {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: clamp(3.75rem, 5vw + 1rem, 5.5rem);
  line-height: 0.9;
  color: var(--gold);
  letter-spacing: -0.04em;
  -webkit-text-stroke: 1px var(--gold);
}
.retainer-bridge__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.retainer-bridge__tag {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold);
}
.retainer-bridge__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.2vw + 0.85rem, 1.75rem);
  line-height: 1.18;
  margin: 0;
  color: var(--fg);
  font-weight: 600;
}
.retainer-bridge__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--fg2);
}
.retainer-bridge__text {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg2);
  max-width: 640px;
}
.retainer-bridge__action {
  justify-self: end;
}
.retainer-bridge__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 154, 42, 0.45);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
  white-space: nowrap;
}
.retainer-bridge__cta:hover {
  color: var(--gold-300, var(--gold));
  border-color: var(--gold);
  gap: 14px;
}
@media (max-width: 880px) {
  .retainer-bridge {
    grid-template-columns: auto 1fr;
    gap: 18px 22px;
    margin-top: 32px;
    padding-top: 24px;
  }
  .retainer-bridge__action {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@media (max-width: 520px) {
  .retainer-bridge {
    grid-template-columns: 1fr;
  }
  .retainer-bridge__mark { font-size: 3rem; }
}

/* Solutions section is now folded in; drop its own padding */
.solutions { padding: 0; }
.solutions__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
  gap: 18px;
}
.solution-card--featured {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, calc(50% - 9px));
}
@media (max-width: 720px) {
  .solutions__list {
    grid-template-columns: 1fr;
  }
  .solution-card--featured {
    width: 100%;
  }
}

/* Services legacy: hide if any old grids slip through */
.services { padding: 0; }
.services__grid { display: none; }
.solution-card {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  background: var(--cream);
  border: 1px solid rgba(15, 27, 46, 0.10);
  border-radius: 14px;
  padding: 18px 22px;
  min-height: 132px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 14px 28px -8px rgba(0, 0, 0, 0.55),
    0 28px 56px -16px rgba(0, 0, 0, 0.65);
  transition: transform var(--dur-medium) var(--ease-out-soft),
              border-color var(--dur-medium) var(--ease-out-soft),
              box-shadow var(--dur-medium) var(--ease-out-soft);
  align-items: start;
}
.solution-card:hover {
  transform: translateY(-2px);
  border-color: rgba(196, 154, 42, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 22px 40px -10px rgba(0, 0, 0, 0.6),
    0 40px 72px -16px rgba(0, 0, 0, 0.7);
}
.solution-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 38px;
  line-height: 0.95;
  color: var(--gold);
  position: relative;
  padding-right: 16px;
}
.solution-card__num::after {
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(196,154,42,0.45);
}
.solution-card__tag { display: none; }
.solution-card__title {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.2;
}
.solution-card__text {
  font-family: var(--font-body);
  font-size: 14.5px; line-height: 1.55;
  color: rgba(15, 27, 46, 0.65);
  margin: 0;
  max-width: 820px;
}
.solution-card__title .accent-gold,
.step__title .accent-gold {
  color: var(--gold);
  font-weight: 700;
}

/* ============================================================
   Team
   ============================================================ */
.team { padding: 96px 0; background: #FDFAF4; color: var(--navy); }
.team .eyebrow { color: var(--gold-700); }
.team .section-title { color: var(--navy); }
.team .section-title em { color: var(--gold-700); }
.team .section-lead { color: rgba(15,27,46,0.65); max-width: 60ch; }
.team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 16px; align-items: stretch; }
.team-card {
  background: var(--navy);
  border: 1px solid rgba(196,154,42,0.45);
  border-radius: 20px;
  padding: 32px;
  box-shadow: inset 0 1px 0 rgba(196,154,42,0.1), 0 24px 60px -20px rgba(15,27,46,0.35);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.team-card__top {
  display: flex;
  gap: 24px;
  align-items: center;
}
.team-card__body-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.team-card__beyond {
  margin-top: auto;
}
.team-card__avatar {
  flex: 0 0 140px;
  width: 140px; height: 140px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 48px;
  letter-spacing: -0.02em;
}
@media (max-width: 880px) {
  .team-card__top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .team-card__avatar { flex-basis: auto; width: 96px; height: 96px; border-radius: 18px; font-size: 34px; }
}
.team-card__avatar--navy { background: var(--navy); color: var(--gold); }
.team-card__avatar--gold { background: var(--gold); color: var(--navy); }
.team-card--reverse .team-card__top {
  justify-content: flex-end;
}
@media (max-width: 880px) {
  .team-card--reverse .team-card__top { justify-content: flex-start; }
}
.team-card__avatar--photo {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.team-card__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card__head { display: flex; flex-direction: column; gap: 4px; }
.team-card__name {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  color: var(--cream);
  margin: 0;
  letter-spacing: -0.015em;
}
.team-card__role {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
}
.team-card__focus {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--cream);
  opacity: 0.78;
}
.team-card__body {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.65;
  color: rgba(246,243,232,0.78);
  margin: 0;
}
.team-card__beyond {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(196, 154, 42, 0.3);
}
.team-card__beyond-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.team-card__beyond-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--cream);
}
@media (max-width: 880px) {
  .team__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Process
   ============================================================ */
.process { padding: 96px 0 56px; }
.process__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  counter-reset: step;
}

/* ------------------------------------------------------------
   Zig-zag timeline variant
   Cards alternate left/right along a central gold spine.
   ------------------------------------------------------------ */
.process__timeline {
  position: relative;
  max-width: 1040px;
  margin: 180px auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Central vertical spine — fades in/out at top & bottom.
   `bottom: 200px` crops it so it ends right around marker 04 instead
   of continuing down through the last card to the "next step" capper. */
.process__timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 200px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(196, 154, 42, 0) 0%,
    rgba(196, 154, 42, 0.55) 8%,
    rgba(196, 154, 42, 0.55) 88%,
    rgba(196, 154, 42, 0) 100%
  );
  transform: translateX(-0.5px);
}

.process__timeline .step--zig {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  /* `dense` lets the card (explicitly placed in col 1 or col 3) sit
     in the same row as the marker (col 2). Without this, odd rows
     bump the col-1 card down to row 2 because the auto-placement
     cursor has already moved past col 1. */
  grid-auto-flow: dense;
  align-items: start;
  gap: 0;
  /* Neutralize the base .step card styling — the <li> is just a layout
     container here; the actual card is .step__card inside it. */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.process__timeline .step--zig:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.process__timeline .step--zig + .step--zig {
  /* Overlap rows: each subsequent card slides up to fill the empty
     space left by the previous (opposite-side) card. Cards still
     don't visually collide because they're on alternating sides. */
  margin-top: -88px;
}

/* Numbered medallion sits on the spine */
.step--zig .step__marker {
  grid-column: 2;
  justify-self: center;
  /* Pin to a fixed offset from the top of the row so marker-to-marker
     spacing is predictable regardless of card height. Offset chosen so
     the marker's vertical center aligns with the card title's vertical
     center: card padding-top (22) + title height/2 (~13) = ~35 → marker
     center at row_top + 35 → margin-top + radius(30) = 35 → margin-top: 5.
     A few extra px of breathing room land it at the title baseline. */
  align-self: start;
  margin-top: 8px;
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: grid;
  place-items: center;
  /* The navy "halo" lets the spine appear to pass behind the medallion
     by matching the section's dark background. */
  box-shadow:
    0 0 0 6px var(--navy-500),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 14px rgba(196, 154, 42, 0.35),
    0 14px 28px -8px rgba(0, 0, 0, 0.45);
}
.step--zig .step__marker-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* The card — narrower, biased toward the spine side */
.step--zig .step__card {
  background: var(--cream);
  border: 1px solid rgba(15, 27, 46, 0.10);
  border-radius: 16px;
  padding: 22px 24px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 14px 28px -10px rgba(0, 0, 0, 0.35),
    0 28px 56px -20px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-medium) var(--ease-out-soft),
              border-color var(--dur-medium) var(--ease-out-soft),
              box-shadow var(--dur-medium) var(--ease-out-soft);
  position: relative;
}
.step--zig .step__card:hover {
  transform: translateY(-2px);
  border-color: rgba(196, 154, 42, 0.55);
}

/* Odd rows: card on the LEFT, hugging the spine */
.step--zig:nth-child(odd) .step__card {
  grid-column: 1;
  justify-self: end;
  margin-right: 28px;
}
/* Even rows: card on the RIGHT, hugging the spine */
.step--zig:nth-child(even) .step__card {
  grid-column: 3;
  justify-self: start;
  margin-left: 28px;
}

/* Subtle "connector arm" from card edge into the spine, on the inside edge.
   Aligned vertically with the marker center (marker margin-top 8 + radius 30 = 38).
   Width 34 = 28 (card-to-column margin) + 6 (column padding around marker)
   so the arm visually touches the medallion's outer edge. */
.step--zig .step__card::after {
  content: "";
  position: absolute;
  top: 37px;
  width: 34px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}
.step--zig:nth-child(odd) .step__card::after  { right: -34px; }
.step--zig:nth-child(even) .step__card::after { left: -34px; }

/* Card type */
.step--zig .step__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.step--zig .step__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(196, 154, 42, 0.12);
  color: var(--gold-700);
  display: grid;
  place-items: center;
}
.step--zig .step__icon svg {
  width: 18px;
  height: 18px;
}
.step--zig .step__cta {
  flex-shrink: 0;
}
/* When the price block carries an inline CTA, lay it out as a 2-col
   grid so the button sits to the right of the price content rather
   than below it — saves vertical space inside the card. */
.step__price.step__price--has-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: end;
}
.step__price.step__price--has-cta > .step__price-label { grid-column: 1 / -1; grid-row: 1; }
/* No explicit grid-row on price-row / cta — auto-placement puts them
   in row 2 when the label is present, and falls back to row 1 when
   it's omitted (e.g. the "Free" step), so the price content stays
   vertically centered without an empty row above it. */
.step__price.step__price--has-cta > .step__price-row   { grid-column: 1; align-self: center; }
.step__price.step__price--has-cta > .step__cta {
  grid-column: 2;
  align-self: center;
}
.step--zig .step__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.01em;
}
.step--zig .step__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(15, 27, 46, 0.7);
  margin: 0;
}
.step__body-accent {
  font-weight: 700;
  color: var(--gold-700);
  letter-spacing: 0.04em;
  /* Extra breathing room around the accented phrase */
  margin: 0 0.3em;
}

/* Pricing footer inside the card */
.step__price {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 27, 46, 0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.step__price-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15, 27, 46, 0.5);
}
.step__price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.step__price-amount {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.05;
  color: var(--gold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.step__price-cadence {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: rgba(15, 27, 46, 0.55);
  margin-left: 1px;
}
.step__price--free .step__price-amount {
  color: var(--teal);
}
.step__price-detail {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(15, 27, 46, 0.65);
  flex: 1 1 auto;
  min-width: 0;
}

.process__pricing-note {
  max-width: 680px;
  margin: 24px auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(253, 250, 244, 0.52);
  font-style: italic;
}

/* ------------------------------------------------------------
   Resolution row — two-column layout below the timeline.
   Left: Brand & Web Design "branch" card (lower-left, mirroring
   step 03 which sits on the left side of the spine).
   Right: "Your next step" capper text (lower-right, mirroring
   step 04 on the right side of the spine).
   This puts both blocks side-by-side instead of stacking them,
   reclaiming significant vertical height.
   ------------------------------------------------------------ */
.process__resolution {
  max-width: 1040px;
  /* Negative margin pulls the branch card up so it overlaps the
     bottom of the timeline. The card sits below the Build & Launch
     step (row 3, left) with its bottom edge just below Grow Together
     (row 4, right) — using the L-shaped empty space the zig-zag
     leaves below step 03. */
  margin: -80px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
  justify-items: center;
}

/* ------------------------------------------------------------
   Branch card — Brand & Web Design as a special-case offering.
   Sits in the lower-left, beneath step 03. Teal accent (instead
   of the timeline's gold) signals "different track".
   ------------------------------------------------------------ */
.process__branch {
  position: relative;
  padding: 22px 24px 22px 64px;
  max-width: 640px;
  /* Mirror the capper's offset on the opposite side — branch card
     centers under "Build & Launch" (step 03) which sits in the LEFT
     column of the timeline grid (its center = container_center - 274px). */
  transform: translateX(-274px);
  background: var(--cream);
  border: 1px solid rgba(15, 27, 46, 0.10);
  border-radius: 16px;
  /* Teal accent strip on the left — the visual cue for "alternate path". */
  border-left: 4px solid var(--teal);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 14px 28px -10px rgba(0, 0, 0, 0.35),
    0 28px 56px -20px rgba(0, 0, 0, 0.4);
}
/* Branch glyph — small teal "fork" icon, in lieu of a number medallion */
.process__branch-marker {
  position: absolute;
  top: 22px;
  left: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(26, 140, 126, 0.12);
  color: var(--teal);
  display: grid;
  place-items: center;
}
.process__branch-marker svg { width: 18px; height: 18px; }
.process__branch-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--teal);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.process__branch-body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(15, 27, 46, 0.7);
  margin: 0 0 14px;
}
.process__branch-body em {
  font-style: italic;
  color: var(--navy);
  font-weight: 600;
}
.process__branch-modes {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 27, 46, 0.12);
}
.process__branch-mode {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.process__branch-mode-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15, 27, 46, 0.5);
}
.process__branch-mode-value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--teal);
  letter-spacing: -0.01em;
}
.process__branch-mode-detail {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(15, 27, 46, 0.65);
}
.process__branch-mode-divider {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: rgba(15, 27, 46, 0.4);
}

/* ------------------------------------------------------------
   Process capper — closes the timeline with a clear next step.
   Sits centered below the spine so the gold line appears to
   flow into it.
   ------------------------------------------------------------ */
/* Resolution-row capper — left-aligned in the right column,
   sitting opposite the branch card so the bottom of the section
   reads as a 2-column resolution mirroring the timeline's
   alternation (step 03 left → branch left; step 04 right → capper right).
   When placed at the section top (instead of in process__resolution),
   it sits as an absolutely-positioned card in the upper-right corner
   of the .container. */
.process__capper {
  position: absolute;
  top: 250px;
  /* Centered horizontally over the "Custom Strategy" card (step 02).
     Card 02 sits in the right column of the timeline grid (right of
     the spine), max-width 420, with a 28px left margin from the spine.
     Its horizontal center = container_center + 274px at the design
     width — so anchor at left: 50% and shift right by 274px. */
  left: 50%;
  right: auto;
  transform: translateX(calc(-50% + 274px));
  z-index: 2;
  width: clamp(240px, 22vw, 300px);
  padding: 20px 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* Subtle card styling to delineate it from the navy section bg
     and the centered section header. A stronger gold border helps
     the card stand out against the surrounding navy. */
  background: rgba(196, 154, 42, 0.06);
  border: 2px solid var(--gold);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(196, 154, 42, 0.14),
    0 16px 32px -14px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.25);
}
/* Capper anchors to the .process section (which already has
   position: relative via the section-list rule above). */
.process__capper-orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* Gold orb for max contrast on the dark navy section background. */
  background: var(--gold);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  box-shadow:
    0 0 0 6px var(--navy-500),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 18px rgba(196, 154, 42, 0.4),
    0 16px 36px -10px rgba(0, 0, 0, 0.5);
}
.process__capper-glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  /* Optical centering for the arrow glyph */
  transform: translateX(1px);
}
.process__capper-eyebrow {
  margin: 0;
  color: var(--gold);
}
.process__capper-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--cream-100);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.process__capper-title em {
  font-style: italic;
  color: var(--gold);
}
.process__capper-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(253, 250, 244, 0.72);
  margin: 4px 0 0;
}
.process__capper-cta {
  margin-top: 18px;
}
.step {
  background: var(--cream);
  border: 1px solid rgba(15, 27, 46, 0.10);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 14px 28px -8px rgba(0, 0, 0, 0.55),
    0 28px 56px -16px rgba(0, 0, 0, 0.65);
  transition: transform var(--dur-medium) var(--ease-out-soft),
              border-color var(--dur-medium) var(--ease-out-soft),
              box-shadow var(--dur-medium) var(--ease-out-soft);
}
.step:hover {
  transform: translateY(-2px);
  border-color: rgba(196, 154, 42, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 22px 40px -10px rgba(0, 0, 0, 0.6),
    0 40px 72px -16px rgba(0, 0, 0, 0.7);
}
.step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.step__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.01em;
}
.step__body {
  font-family: var(--font-body);
  font-size: 14.5px; line-height: 1.6;
  color: rgba(15, 27, 46, 0.65);
  margin: 0;
}
@media (max-width: 880px) {
  .process__list { grid-template-columns: 1fr 1fr; }

  /* Collapse the zig-zag to a left-aligned single column.
     Spine moves to the left, all cards sit to the right of it. */
  .process__timeline { margin-top: 32px; gap: 22px; }
  .process__timeline .step--zig + .step--zig { margin-top: 0; }
  .process__timeline::before { left: 30px; }

  /* Branch card stacks its two modes on mobile */
  .process__branch { padding: 24px 24px 24px 64px; }
  .process__branch-modes {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .process__branch-mode-divider {
    justify-self: start;
    padding: 0;
  }
  /* Resolution row collapses to single column */
  .process__resolution { grid-template-columns: 1fr; gap: 24px; }
  .process__timeline .step--zig {
    grid-template-columns: 60px 1fr;
    align-items: start;
  }
  .step--zig .step__marker { grid-column: 1; justify-self: center; }
  .step--zig:nth-child(odd) .step__card,
  .step--zig:nth-child(even) .step__card {
    grid-column: 2;
    justify-self: stretch;
    margin: 0 0 0 18px;
    max-width: none;
  }
  .step--zig:nth-child(odd) .step__card::after,
  .step--zig:nth-child(even) .step__card::after {
    left: -18px;
    right: auto;
    top: 30px;
    width: 18px;
  }
}

/* ============================================================
   Contact
   ============================================================ */
.contact { padding: 80px 0 64px; }
.contact__grid { display: grid; grid-template-columns: 1.05fr 1.6fr; gap: 56px; align-items: stretch; }
/* Section header spans both columns above the 2-col content grid.
   Override the base 760px max-width so the headline fits on one line. */
.contact__header { grid-column: 1 / -1; margin-bottom: 32px; max-width: none; }
.contact__header .section-title { white-space: nowrap; }
/* Intro column lays out as a flex column so spacing between the
   CTA and the methods list is explicit and predictable. The inner
   `intro-stack` shrinks to fit the CTA row (so the logo above can be
   horizontally centered over the two gold buttons), and is itself
   left-aligned within the column. */
.contact__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Bottom-align the intro-stack so the location box's bottom edge
     baselines with the bottom of the photos column (also bottom-
     aligned below). */
  justify-content: flex-end;
}
.contact__intro-stack {
  display: inline-flex;
  flex-direction: column;
  /* `stretch` so the methods box below the CTA row matches the width
     of the two gold buttons. Logo overrides with `align-self: center`
     so it stays centered above the buttons. */
  align-items: stretch;
  gap: 16px;
}
.contact__intro-stack > .contact__mark { align-self: center; }
.contact__intro .contact__methods { margin-top: 8px; }
/* Photo mosaic now lives directly in the grid right column and
   stretches to fill the column height (set by the taller intro
   column on the left). No aspect-ratio cap so the photos fill the
   available vertical space. */
.contact__photos {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  /* Top row auto-sizes to the mural's natural aspect ratio (640:241),
     so the image fills both columns uncropped. Bottom rows are equal
     `1fr` heights derived from the remaining vertical space. */
  grid-template-rows: auto repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 95%;
  /* No aspect-ratio — collage height is the natural sum of top-row
     (driven by mural aspect) plus the rainbow-hero photo on the left,
     whose 2-row span matches the welcome-arch + bridge column to the right. */
  min-height: 0;
  justify-self: end;
  align-self: end;
}
.contact__photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cream-200);
  /* `min-height: 0` (and `min-width: 0`) lets the figure shrink below
     its intrinsic image dimensions, so the parent grid's aspect-ratio
     and `1fr` rows resolve correctly instead of being inflated by the
     natural height of the source photos (640px each). */
  min-height: 0;
  min-width: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 14px 28px -10px rgba(0, 0, 0, 0.25);
}
.contact__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out-soft);
}
.contact__photo:hover img { transform: scale(1.04); }
.contact__photo--hero {
  grid-column: 1;
  grid-row: 2 / 4;
  /* Anchor the bottom-row heights: hero has a natural 480×640 portrait
     aspect, so its display height = column-1-width × 4/3. That height
     gets divided equally between rows 2 and 3 (1fr 1fr), giving the
     welcome-arch and bridge tiles on the right a definite height. */
  aspect-ratio: 480 / 640;
}
.contact__photo--top {
  grid-column: 1 / -1;
  grid-row: 1;
  /* Top tile takes the mural's natural aspect ratio so the image
     fills the tile uncropped at full collage width. */
  aspect-ratio: 640 / 241;
}
.contact__photo--top img {
  object-fit: cover;
}
/* Brand mark sits at the top of the contact intro stack, centered
   horizontally above the two gold CTA buttons. Sized so the logo's
   sun rays align horizontally with the top of the photo collage in
   the right column. */
.contact__mark {
  width: clamp(220px, 22vw, 320px);
  height: auto;
  display: block;
  margin: 0;
}
.contact__cta { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.contact__cta-row {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  /* No wrap — the email pill is sized to fit beside the button so
     the two CTAs stay on one row even in the narrow intro column. */
  flex-wrap: nowrap;
}
.contact__email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1px solid rgba(15, 27, 46, 0.10);
  border-radius: 12px;
  text-decoration: none;
  color: var(--gold-700);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--dur-medium) var(--ease-out-soft),
              transform var(--dur-medium) var(--ease-out-soft);
  box-shadow:
    inset 0 1px 0 rgba(196, 154, 42, 0.06),
    0 6px 16px -10px rgba(15, 27, 46, 0.18);
}
.contact__email:hover {
  border-color: rgba(196, 154, 42, 0.55);
  transform: translateY(-1px);
}
.contact__email__glyph { font-size: 16px; line-height: 1; }
.contact__email__addr  { color: var(--gold-700); }
.contact__email:hover .contact__email__addr { color: var(--gold-800); }
.contact__cta-note {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(15, 27, 46, 0.55);
  padding-left: 2px;
}
.contact__methods { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.contact__methods li {
  display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start;
  padding: 18px 20px;
  background: #16263F;
  border: 1px solid rgba(196,154,42,0.15);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(196,154,42,0.06), 0 12px 30px -16px rgba(0,0,0,0.6);
}
.contact__method-glyph { font-size: 22px; line-height: 1.2; }
.contact__method-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--cream); margin-bottom: 2px; }
.contact__method-body  { font-family: var(--font-body); font-size: 14px; color: var(--fg2); line-height: 1.5; }
.contact__method-body a { color: var(--gold); }
.contact__method-body a:hover { text-decoration: underline; }

/* Third "method" item is a CTA, not an info row — bypass the icon-grid
   layout and let the gold button sit centered with a small caption.
   Higher specificity overrides the cream-section li styling below. */
.contact__methods li.contact__methods-cta-row,
.section--cream .contact__methods li.contact__methods-cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 8px 0 0;
}
.contact__methods-cta-note {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg2);
  padding-left: 2px;
}
.section--cream .contact__methods-cta-note { color: rgba(15, 27, 46, 0.55); }
@media (max-width: 880px) {
  .contact__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: #0A1422;
  border-top: 1px solid rgba(196,154,42,0.10);
  padding: 64px 0 32px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px;
  margin-bottom: 40px;
}
.site-footer__brand img { height: 56px; width: auto; display: block; margin-bottom: 16px; }
.site-footer__brand p { font-size: 13.5px; line-height: 1.6; color: var(--fg3); margin: 0; max-width: 320px; }
.site-footer__brand p .footer-accent {
  color: var(--gold);
  font-weight: 700;
}
.site-footer__heading {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.site-footer ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer a { font-size: 14px; color: var(--fg2); }
.site-footer a:hover { color: var(--gold); }
.site-footer a.btn-cream,
.site-footer a.btn-cream:hover { color: var(--navy); }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--fg3);
}
@media (max-width: 880px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Booking Modal
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(5, 11, 19, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn 200ms var(--ease-out-soft);
}
.modal {
  position: relative;
  background: #16263F;
  border: 1px solid rgba(196,154,42,0.30);
  border-radius: 20px;
  padding: 32px;
  max-width: 480px; width: 100%;
  box-shadow: inset 0 1px 0 rgba(196,154,42,0.20), 0 40px 80px -20px rgba(0,0,0,0.8);
  animation: rise 280ms var(--ease-out-soft);
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--cream);
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: rgba(196,154,42,0.1); color: var(--gold); border-color: rgba(196,154,42,0.3); }
.modal-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--cream);
  margin: 14px 0 10px;
  letter-spacing: -0.015em;
}
.modal-title em { color: var(--gold); font-style: italic; }
.modal-lead {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0 0 22px;
}
.modal-times {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 24px;
}
.time-slot {
  background: #0A1422;
  color: var(--cream);
  border: 1px solid rgba(196,154,42,0.18);
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  transition: all 150ms var(--ease-out-soft);
}
.time-slot:hover { background: rgba(196,154,42,0.1); border-color: var(--gold); color: var(--gold); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-foot {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12.5px;
  color: var(--fg3);
  text-align: center;
}
.modal-foot a { color: var(--gold); }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }

/* ============================================================
   Cream Section Override
   Applied to .why-goldera and .contact for alternating bg.
   Flips text colors, card surfaces, dividers and ornaments to
   work on a cream background.
   ============================================================ */
.section--cream {
  background: var(--cream);
  color: var(--navy);
}

/* Section header */
.section--cream .eyebrow { color: var(--gold-700); }
.section--cream .section-title { color: var(--navy); }
.section--cream .section-title em { color: var(--gold-700); }
.section--cream .section-lead { color: rgba(15, 27, 46, 0.65); }

/* Decorative ornament */
.section--cream .value-vow__rule {
  background: linear-gradient(90deg, transparent, rgba(15, 27, 46, 0.18), transparent);
}
.section--cream .value-vow__diamond {
  background: var(--gold-700);
  box-shadow: 0 0 0 4px rgba(196, 154, 42, 0.18);
}
.section--cream .value-vow__label { color: var(--gold-700); }
.section--cream .value-vow__label::before { background: var(--gold-700); }

/* Why GoldEra — sub-labels */
.section--cream .why-goldera__sub { color: var(--gold-700); }
.section--cream .why-goldera__sub-rule { background: var(--gold-700); }

/* Differentiator cards on cream */
.section--cream .diff-card {
  border-left-color: rgba(15, 27, 46, 0.20) !important;
}
.section--cream .diff-card:hover {
  border-left-color: var(--gold-700) !important;
}
.section--cream .diff-card__title { color: var(--navy); }
.section--cream .diff-card__text { color: rgba(15, 27, 46, 0.65); }

/* Persona list on cream */
.section--cream .persona-list__item {
  border-left-color: rgba(15, 27, 46, 0.20);
}
.section--cream .persona-list__item:hover {
  border-left-color: var(--gold-700);
}
.section--cream .persona-list__name { color: var(--navy); }
.section--cream .persona-list__desc { color: rgba(15, 27, 46, 0.65); }

/* Centered image frame on cream */
.section--cream .why-goldera__figure {
  border-color: rgba(196, 154, 42, 0.55);
  background: var(--cream-200);
  box-shadow:
    inset 0 1px 0 rgba(196, 154, 42, 0.18),
    0 28px 60px -24px rgba(15, 27, 46, 0.25);
}

/* Why GoldEra CTA strip */
.section--cream .why-goldera__cta {
  border-top-color: rgba(15, 27, 46, 0.12);
}
.section--cream .why-goldera__cta-text { color: var(--navy); }
.section--cream .why-goldera__cta-text em { color: var(--gold-700); }

/* Contact method cards on cream — deliberately reverses the section's
   palette: navy card with a gold accent stripe on the left, cream
   type, and a soft gold disk behind the icon glyph. Picks up the
   brand's full palette and contrasts both the surrounding cream
   section and the cream-on-teal Brand & Web Design branch card. */
.section--cream .contact__methods li {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(196, 154, 42, 0.08), transparent 60%),
    var(--cream);
  border: 1.5px solid var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 30px -18px rgba(15, 27, 46, 0.18),
    0 2px 4px rgba(15, 27, 46, 0.06);
}
.section--cream .contact__methods .contact__method-glyph {
  width: 44px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(196, 154, 42, 0.16);
  font-size: 18px;
}
.section--cream .contact__methods .contact__method-glyph--map {
  /* White card behind the Colorado flag, sized to suit the flag's
     3:2 aspect ratio. Slightly larger than the default glyph wrapper
     so the small stripes + C remain legible. */
  width: 60px;
  height: 42px;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(15, 27, 46, 0.12);
}
.section--cream .contact__methods .contact__method-glyph--map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section--cream .contact__method-title { color: var(--navy); }
.section--cream .contact__method-body { color: rgba(15, 27, 46, 0.65); }
.section--cream .contact__method-body a { color: var(--gold-700); }
.section--cream .contact__method-body a:hover { color: var(--gold-800); }

/* Tiny extras to make the static page work without React */
    .modal-backdrop[hidden] { display: none; }

/* ============================================================
   MIGRATION RESPONSIVE FIXES - 2026-05-21 (rev 2)
   ============================================================ */
/* Contact headline: allow wrapping (reference used white-space:nowrap). */
.contact__header .section-title { white-space: normal; }

/* The Process capper is decorative text only -> never let it intercept
   clicks on the timeline cards / CTAs beneath it (e.g. "Book a call"). */
.process__capper { pointer-events: none; }

/* Process timeline — the zig-zag overlaps transparent <li> layout
   containers (margin-top:-88px) and decorative connector pseudo-
   elements. None of those may intercept clicks meant for a step CTA:
   only the real cards + markers receive pointer events, and the CTA
   sits in its own stacking context above sibling card content. */
.process__timeline .step--zig { pointer-events: none; }
.process__timeline .step__card,
.process__timeline .step__marker { pointer-events: auto; }
.process__timeline .step__card::before,
.process__timeline .step__card::after { pointer-events: none; }
.process__timeline .step__cta { position: relative; z-index: 3; }

/* The reference floats the Process capper (+274px) and the Brand & Web
   Design branch (-274px) with transforms tuned to a ~1200px container;
   below that they overlap / overflow. Keep the floating composition at
   desktop (>=1200px); collapse to clean normal flow below. */
@media (max-width: 1200px) {
  .process__capper {
    position: static;
    transform: none;
    width: auto;
    max-width: 560px;
    margin: 8px auto 36px;
    align-items: center;
    text-align: center;
  }
  .process__resolution { margin-top: 32px; }
  .process__branch { transform: none; }
}

/* Contact two-column grid stacks through the tablet band. */
@media (max-width: 1100px) {
  .contact__grid { grid-template-columns: 1fr; }
}

/* Contact on phones: stack the two CTA buttons (the reference forced them
   side-by-side with flex-wrap:nowrap) and collapse the photo collage to a
   single column so nothing overflows the screen width. */
@media (max-width: 600px) {
  .contact__cta-row { flex-direction: column; align-items: stretch; }
  .contact__photos {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
  }
  .contact__photo--top,
  .contact__photo--hero { grid-column: 1; grid-row: auto; }
  .contact__photo { aspect-ratio: 3 / 2; }
  .contact__photo--top  { aspect-ratio: 640 / 241; }
  .contact__photo--hero { aspect-ratio: 480 / 640; }
}

/* ---- Mobile hamburger navigation (<= 880px, where the inline nav hides) ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(15, 27, 46, 0.18);
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .site-logo { margin-right: auto; }
  .site-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid rgba(15, 27, 46, 0.10);
    box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.4);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .site-nav a {
    padding: 15px 24px;
    font-size: 15px;
    border-top: 1px solid rgba(15, 27, 46, 0.07);
  }
  .site-header.nav-open .site-nav { max-height: 80vh; }
  .site-header.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}


/* ============================================================
   In Practice (real examples) — cream section, dark cards
   Added 2026-06-05 (post-Squarespace, Netlify build)
   ============================================================ */
.in-practice { padding: 96px 0; }
.in-practice__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.example-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
}
.example-card__tag {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold);
}
.example-card__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
}
.example-card__title em { font-style: italic; color: var(--gold); }
.example-card__text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0;
}
.example-card__result {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(196,154,42,0.18);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg1);
}
.example-card__result strong { color: var(--gold-200); font-weight: 700; }
.in-practice__cta {
  margin-top: 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.in-practice__cta-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.4vw + 0.85rem, 1.6rem);
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}
.in-practice__cta-text em { font-style: italic; color: var(--gold-700); }
@media (max-width: 920px) {
  .in-practice__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Blog — index + post pages (loaded via ../styles.css)
   Added 2026-06-05
   ============================================================ */
.blog-main { padding-top: 96px; }   /* clear sticky header */

/* --- Blog index --- */
.blog-hero { padding: 72px 0 24px; text-align: center; }
.blog-hero .section-title { color: var(--cream); }
.blog-hero .section-lead { margin: 18px auto 0; max-width: 640px; }
.blog-list {
  padding: 32px 0 96px;
  display: grid;
  gap: 22px;
  max-width: 820px;
  margin: 0 auto;
}
.post-card {
  display: block;
  padding: 30px 32px;
  border-radius: 16px;
}
.post-card__meta {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
}
.post-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.6vw + 0.9rem, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0 0 12px;
}
.post-card__excerpt {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0 0 16px;
}
.post-card__more {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
}
.post-card:hover .post-card__more { color: var(--gold-300); }

/* --- Blog post --- */
.post { padding: 64px 0 88px; }
.post__inner { max-width: 720px; margin: 0 auto; }
.post__breadcrumb {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg3);
  margin-bottom: 28px;
}
.post__breadcrumb a { color: var(--gold); }
.post__meta {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 16px;
}
.post__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw + 1rem, 2.85rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0 0 18px;
}
.post__title em { font-style: italic; color: var(--gold); }
.post__standfirst {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg2);
  margin: 0 0 8px;
}
.post__divider {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 36px 0;
}
.post__divider span:first-child,
.post__divider span:last-child {
  height: 1px; width: 64px; background: rgba(196,154,42,0.4);
}
.post__divider span:nth-child(2) {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--gold);
}
.post__body { font-family: var(--font-body); color: var(--fg1); }
.post__body p {
  font-size: 17px;
  line-height: 1.72;
  color: var(--fg2);
  margin: 0 0 22px;
}
.post__body h2 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 44px 0 16px;
}
.post__body h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--cream);
  margin: 32px 0 12px;
}
.post__body strong { color: var(--fg1); font-weight: 700; }
.post__body em { font-style: italic; }
.post__body a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.post__body a:hover { color: var(--gold-300); }
.post__body ul { margin: 0 0 22px; padding-left: 0; list-style: none; }
.post__body ul li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg2);
  margin-bottom: 12px;
}
.post__body ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--gold);
}
.post__body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--cream);
}
.post__cta {
  margin: 48px auto 0;
  max-width: 720px;
  text-align: center;
  padding: 36px 32px;
}
.post__cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.4vw + 0.9rem, 1.7rem);
  line-height: 1.25;
  color: var(--cream);
  margin: 0 0 18px;
}
.post__cta-title em { font-style: italic; color: var(--gold); }
@media (max-width: 720px) {
  .post__cta, .post-card { padding-left: 22px; padding-right: 22px; }
}

/* --- In Practice: insights cross-link --- */
.in-practice__insights-link {
  text-align: center;
  margin: 36px 0 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: rgba(15, 27, 46, 0.65);
}
.in-practice__insights-link a {
  color: var(--gold-700);
  font-weight: 700;
  text-decoration: none;
}
.in-practice__insights-link a:hover { color: var(--navy); }

/* --- Latest insights strip (homepage) --- */
.insights-strip { padding: 96px 0; }
.insights-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
.insights-strip__grid--multi {
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
}
.insights-strip__all {
  text-align: center;
  margin: 28px 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
}
.insights-strip__all a { color: var(--gold-700); text-decoration: none; }
.insights-strip__all a:hover { color: var(--navy); }
@media (max-width: 900px) {
  .insights-strip__grid--multi { grid-template-columns: 1fr; max-width: 760px; }
}