/* --------- Brand tokens (keep your originals; add cb-* aliases) --------- */
:root{
  /* existing brand tokens (already present in your file) */
  --bg-custom-navy:#0d1a2e;
  --bg-custom-dark-blue:#0B1C33;
  --bg-custom-card-blue:#112542;
  --text-custom-gold:#C2A85C;

  /* incident-report style aliases */
  --ink:#F8FAFC;
  --muted:#9AA7B2;
  --ring-gold: rgba(194,168,92,.6);

  /* unified theme aliases */
  --cb-bg: var(--bg-custom-dark-blue, #0B1C33);
  --cb-card: var(--bg-custom-card-blue, #112542);
  --cb-ink: var(--ink, #F8FAFC);
  --cb-muted: var(--muted, #9AA7B2);
  --cb-gold: var(--text-custom-gold, #C2A85C);

  /* Typography tokens */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Playfair Display", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Semantic text styles */
  --text-h1-family: var(--font-serif);
  --text-h1-size: var(--text-5xl);
  --text-h1-weight: var(--font-bold);
  --text-h1-leading: var(--leading-tight);
  --text-h1-tracking: var(--tracking-tight);

  --text-h2-family: var(--font-serif);
  --text-h2-size: var(--text-4xl);
  --text-h2-weight: var(--font-bold);
  --text-h2-leading: var(--leading-tight);
  --text-h2-tracking: var(--tracking-tight);

  --text-h3-family: var(--font-serif);
  --text-h3-size: var(--text-3xl);
  --text-h3-weight: var(--font-semibold);
  --text-h3-leading: var(--leading-snug);
  --text-h3-tracking: var(--tracking-normal);

  --text-h4-family: var(--font-serif);
  --text-h4-size: var(--text-2xl);
  --text-h4-weight: var(--font-semibold);
  --text-h4-leading: var(--leading-snug);
  --text-h4-tracking: var(--tracking-normal);

  --text-h5-family: var(--font-sans);
  --text-h5-size: var(--text-xl);
  --text-h5-weight: var(--font-semibold);
  --text-h5-leading: var(--leading-normal);
  --text-h5-tracking: var(--tracking-normal);

  --text-h6-family: var(--font-sans);
  --text-h6-size: var(--text-lg);
  --text-h6-weight: var(--font-semibold);
  --text-h6-leading: var(--leading-normal);
  --text-h6-tracking: var(--tracking-normal);

  --text-body-lg-family: var(--font-sans);
  --text-body-lg-size: var(--text-lg);
  --text-body-lg-weight: var(--font-normal);
  --text-body-lg-leading: var(--leading-relaxed);
  --text-body-lg-tracking: var(--tracking-normal);

  --text-body-family: var(--font-sans);
  --text-body-size: var(--text-base);
  --text-body-weight: var(--font-normal);
  --text-body-leading: var(--leading-normal);
  --text-body-tracking: var(--tracking-normal);

  --text-body-sm-family: var(--font-sans);
  --text-body-sm-size: var(--text-sm);
  --text-body-sm-weight: var(--font-normal);
  --text-body-sm-leading: var(--leading-normal);
  --text-body-sm-tracking: var(--tracking-normal);

  --text-label-family: var(--font-sans);
  --text-label-size: var(--text-sm);
  --text-label-weight: var(--font-medium);
  --text-label-leading: var(--leading-normal);
  --text-label-tracking: var(--tracking-wide);

  --text-caption-family: var(--font-sans);
  --text-caption-size: var(--text-xs);
  --text-caption-weight: var(--font-normal);
  --text-caption-leading: var(--leading-normal);
  --text-caption-tracking: var(--tracking-normal);

  --text-overline-family: var(--font-sans);
  --text-overline-size: var(--text-xs);
  --text-overline-weight: var(--font-semibold);
  --text-overline-leading: var(--leading-normal);
  --text-overline-tracking: var(--tracking-widest);

  --text-button-family: var(--font-sans);
  --text-button-size: var(--text-sm);
  --text-button-weight: var(--font-medium);
  --text-button-leading: var(--leading-normal);
  --text-button-tracking: var(--tracking-wide);

  --text-button-sm-family: var(--font-sans);
  --text-button-sm-size: var(--text-xs);
  --text-button-sm-weight: var(--font-medium);
  --text-button-sm-leading: var(--leading-normal);
  --text-button-sm-tracking: var(--tracking-wide);

  --text-button-lg-family: var(--font-sans);
  --text-button-lg-size: var(--text-base);
  --text-button-lg-weight: var(--font-medium);
  --text-button-lg-leading: var(--leading-normal);
  --text-button-lg-tracking: var(--tracking-wide);

  --text-code-family: var(--font-mono);
  --text-code-size: var(--text-sm);
  --text-code-weight: var(--font-normal);
  --text-code-leading: var(--leading-relaxed);
  --text-code-tracking: var(--tracking-normal);

  /* Design system colors (HSL) */
  --ds-background: 218 33% 3%;
  --ds-foreground: 0 0% 98%;
  --ds-card: 220 45% 6%;
  --ds-card-foreground: 0 0% 98%;
  --ds-popover: 220 45% 6%;
  --ds-popover-foreground: 0 0% 98%;
  --ds-primary: 45 84% 47%;
  --ds-primary-foreground: 218 33% 3%;
  --ds-gold: 45 84% 47%;
  --ds-gold-bright: 45 100% 51%;
  --ds-secondary: 215 30% 12%;
  --ds-secondary-foreground: 0 0% 95%;
  --ds-muted: 215 25% 15%;
  --ds-muted-foreground: 215 15% 65%;
  --ds-accent: 45 84% 47%;
  --ds-accent-foreground: 218 33% 3%;
  --ds-destructive: 0 84% 60%;
  --ds-destructive-foreground: 0 0% 98%;
  --ds-success: 142 70% 45%;
  --ds-success-foreground: 218 33% 3%;
  --ds-warning: 38 92% 50%;
  --ds-warning-foreground: 218 33% 3%;
  --ds-border: 45 84% 47% / 0.5;
  --ds-input: 215 25% 12%;
  --ds-ring: 45 84% 47%;
  --ds-soft-white: 210 40% 98%;
  --ds-overlay: 0 0% 0%;
  --ds-sidebar: 220 45% 6%;
  --ds-sidebar-foreground: 0 0% 98%;
  --ds-sidebar-primary: 45 84% 47%;
  --ds-sidebar-accent: 215 30% 12%;
  --ds-sidebar-border: 45 84% 47% / 0.5;

  /* Spacing */
  --space-px: 1px;
  --space-0: 0;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;
  --space-44: 11rem;
  --space-48: 12rem;
  --space-52: 13rem;
  --space-56: 14rem;
  --space-60: 15rem;
  --space-64: 16rem;
  --space-72: 18rem;
  --space-80: 20rem;
  --space-96: 24rem;

  /* Radius */
  --radius-none: 0;
  --radius-sm: calc(0.75rem - 4px);
  --radius-md: calc(0.75rem - 2px);
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  --shadow-gold-glow: 0 0 40px hsl(45 84% 47% / 0.15);
  --shadow-gold-button: 0 10px 40px hsl(45 84% 47% / 0.3);
  --shadow-premium-hover: 0 20px 40px hsl(45 84% 47% / 0.1);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Breakpoints */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1400px;

  /* Z-index */
  --z-base: 0;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* Semantic severity/status colors */
  --severity-low: hsl(var(--ds-muted));
  --severity-medium: hsl(var(--ds-warning));
  --severity-high: hsl(25 95% 53%);
  --severity-critical: hsl(var(--ds-destructive));
  --status-pending: hsl(var(--ds-muted-foreground));
  --status-in-progress: hsl(var(--ds-warning));
  --status-resolved: hsl(var(--ds-success));
  --status-escalated: hsl(var(--ds-destructive));
}

/* --------- Base (keeps HERO safe) ---------
   We target general body + scoped content wrappers.
   Your home hero typically uses its own classes; avoid overriding .hero explicitly.
*/
html { color-scheme: dark; }
body{
  background: hsl(var(--ds-background));
  color: hsl(var(--ds-foreground));
  font-family: var(--font-sans);
  line-height: var(--text-body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

hr{
  border-color: hsl(var(--ds-border));
}

input,
textarea,
select{
  background-color: hsl(var(--ds-input));
  border-color: hsl(var(--ds-border));
  color: hsl(var(--ds-foreground));
}

input::placeholder,
textarea::placeholder{
  color: hsl(var(--ds-muted-foreground));
}

input:focus,
textarea:focus,
select:focus{
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ds-ring));
}

button{
  font-family: var(--text-button-family);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  line-height: var(--text-button-leading);
  letter-spacing: var(--text-button-tracking);
}

a{
  color: hsl(var(--ds-primary));
}
a:hover{
  color: hsl(var(--ds-gold-bright));
}

::selection{
  background: hsl(var(--ds-primary) / 0.35);
  color: hsl(var(--ds-primary-foreground));
}

/* Design system surface utilities */
.ds-card{
  background-color: hsl(var(--ds-card));
  color: hsl(var(--ds-card-foreground));
  border: 1px solid hsl(var(--ds-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.ds-popover{
  background-color: hsl(var(--ds-popover));
  color: hsl(var(--ds-popover-foreground));
  border: 1px solid hsl(var(--ds-border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.ds-surface{
  background-color: hsl(var(--ds-secondary));
  color: hsl(var(--ds-secondary-foreground));
  border: 1px solid hsl(var(--ds-border));
  border-radius: var(--radius-md);
}

/* Card component styles (from design system) */
.card{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) !important;
  border-radius: var(--radius-3xl);
  border: 1px solid hsl(var(--ds-primary) / 0.2);
  background-color: hsl(var(--ds-card) / 0.6);
  backdrop-filter: blur(24px);
  color: hsl(var(--ds-card-foreground));
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-slower) var(--ease-default),
              border-color var(--duration-slower) var(--ease-default),
              box-shadow var(--duration-slower) var(--ease-default);
}
.card:hover{
  transform: translateY(-5px);
  border-color: hsl(var(--ds-primary) / 0.6);
  box-shadow: 0 20px 40px hsl(var(--ds-primary) / 0.1);
}
@media (min-width: 768px){
  .card{
    padding: var(--space-6) !important;
  }
}
.card-header{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8);
}
@media (min-width: 768px){
  .card-header{
    padding: var(--space-10);
  }
}
.card-title{
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: hsl(var(--ds-foreground));
}
.card-title .title-white{
  color: hsl(var(--ds-foreground));
}
.card-title .title-gold{
  color: hsl(var(--ds-primary));
  font-style: italic;
}
.card-description{
  color: hsl(var(--ds-muted-foreground));
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.card-content{
  padding: var(--space-8);
  padding-top: 0;
}
@media (min-width: 768px){
  .card-content{
    padding: var(--space-10);
    padding-top: 0;
  }
}
.card-footer{
  display: flex;
  align-items: center;
  padding: var(--space-8);
  padding-top: 0;
}
@media (min-width: 768px){
.card-footer{
  padding: var(--space-10);
  padding-top: 0;
}
}

/* Button system */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-family: var(--text-button-family);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  line-height: var(--text-button-leading);
  letter-spacing: var(--text-button-tracking);
  transition: background-color var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
}
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ds-ring));
}
.btn:disabled{
  opacity: 0.6;
  pointer-events: none;
}

.btn-primary{
  background-color: hsl(var(--ds-primary));
  color: hsl(var(--ds-primary-foreground));
  border-color: hsl(var(--ds-primary) / 0.6);
  box-shadow: var(--shadow-gold-button);
}
.btn-primary:hover{
  background-color: hsl(var(--ds-gold-bright));
  border-color: hsl(var(--ds-gold-bright));
  transform: translateY(-1px);
}

.btn-secondary{
  background-color: transparent;
  color: hsl(var(--ds-primary));
  border-color: hsl(var(--ds-primary) / 0.6);
}
.btn-secondary:hover{
  background-color: hsl(var(--ds-primary) / 0.1);
  border-color: hsl(var(--ds-primary));
}

.btn-ghost{
  background-color: transparent;
  color: hsl(var(--ds-foreground));
  border-color: transparent;
}
.btn-ghost:hover{
  background-color: hsl(var(--ds-muted));
  color: hsl(var(--ds-foreground));
}

@media (min-width: 768px){
  .btn{
    padding: var(--space-3-5) var(--space-6);
  }
}

/* Typography base mapping */
h1{
  font-family: var(--text-h1-family);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-leading);
  letter-spacing: var(--text-h1-tracking);
}
h2{
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
}
h3{
  font-family: var(--text-h3-family);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
}
h4{
  font-family: var(--text-h4-family);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-leading);
  letter-spacing: var(--text-h4-tracking);
}
h5{
  font-family: var(--text-h5-family);
  font-size: var(--text-h5-size);
  font-weight: var(--text-h5-weight);
  line-height: var(--text-h5-leading);
  letter-spacing: var(--text-h5-tracking);
}
h6{
  font-family: var(--text-h6-family);
  font-size: var(--text-h6-size);
  font-weight: var(--text-h6-weight);
  line-height: var(--text-h6-leading);
  letter-spacing: var(--text-h6-tracking);
}
p{
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-leading);
  letter-spacing: var(--text-body-tracking);
}
small{
  font-family: var(--text-body-sm-family);
  font-size: var(--text-body-sm-size);
  font-weight: var(--text-body-sm-weight);
  line-height: var(--text-body-sm-leading);
  letter-spacing: var(--text-body-sm-tracking);
}
label{
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-leading);
  letter-spacing: var(--text-label-tracking);
}
code, pre, kbd, samp{
  font-family: var(--text-code-family);
  font-size: var(--text-code-size);
  font-weight: var(--text-code-weight);
  line-height: var(--text-code-leading);
  letter-spacing: var(--text-code-tracking);
}

/* Typography utility classes */
.text-h1{
  font-family: var(--text-h1-family);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-leading);
  letter-spacing: var(--text-h1-tracking);
}
.text-h2{
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
}
.text-h3{
  font-family: var(--text-h3-family);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
}
.text-h4{
  font-family: var(--text-h4-family);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-leading);
  letter-spacing: var(--text-h4-tracking);
}
.text-h5{
  font-family: var(--text-h5-family);
  font-size: var(--text-h5-size);
  font-weight: var(--text-h5-weight);
  line-height: var(--text-h5-leading);
  letter-spacing: var(--text-h5-tracking);
}
.text-h6{
  font-family: var(--text-h6-family);
  font-size: var(--text-h6-size);
  font-weight: var(--text-h6-weight);
  line-height: var(--text-h6-leading);
  letter-spacing: var(--text-h6-tracking);
}
.text-body-lg{
  font-family: var(--text-body-lg-family);
  font-size: var(--text-body-lg-size);
  font-weight: var(--text-body-lg-weight);
  line-height: var(--text-body-lg-leading);
  letter-spacing: var(--text-body-lg-tracking);
}
.text-body{
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-leading);
  letter-spacing: var(--text-body-tracking);
}
.text-body-sm{
  font-family: var(--text-body-sm-family);
  font-size: var(--text-body-sm-size);
  font-weight: var(--text-body-sm-weight);
  line-height: var(--text-body-sm-leading);
  letter-spacing: var(--text-body-sm-tracking);
}
.text-label{
  font-family: var(--text-label-family);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-leading);
  letter-spacing: var(--text-label-tracking);
}
.text-caption{
  font-family: var(--text-caption-family);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-leading);
  letter-spacing: var(--text-caption-tracking);
}
.text-overline{
  font-family: var(--text-overline-family);
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  line-height: var(--text-overline-leading);
  letter-spacing: var(--text-overline-tracking);
  text-transform: uppercase;
}
.text-button{
  font-family: var(--text-button-family);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  line-height: var(--text-button-leading);
  letter-spacing: var(--text-button-tracking);
}
.text-button-sm{
  font-family: var(--text-button-sm-family);
  font-size: var(--text-button-sm-size);
  font-weight: var(--text-button-sm-weight);
  line-height: var(--text-button-sm-leading);
  letter-spacing: var(--text-button-sm-tracking);
}
.text-button-lg{
  font-family: var(--text-button-lg-family);
  font-size: var(--text-button-lg-size);
  font-weight: var(--text-button-lg-weight);
  line-height: var(--text-button-lg-leading);
  letter-spacing: var(--text-button-lg-tracking);
}
.text-code{
  font-family: var(--text-code-family);
  font-size: var(--text-code-size);
  font-weight: var(--text-code-weight);
  line-height: var(--text-code-leading);
  letter-spacing: var(--text-code-tracking);
}

/* Global header/footer (injected) */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #1f2937;
}
.site-header .site-header-inner{
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.site-brand{
  font-size: 1.25rem;
  font-weight: 800;
  transition: transform 0.2s ease;
}
.site-brand:hover{ transform: scale(1.05); }
.site-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.site-nav a{
  color: #d1d5db;
  font-weight: 500;
  transition: color 0.2s ease;
}
.site-nav a:hover{ color: var(--cb-gold); }
.site-nav .cta{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 768px){
  .site-header .site-header-inner{
    flex-direction: row;
    justify-content: space-between;
  }
}

.site-footer{
  background: #0a0a0a;
  border-top: 1px solid rgba(194,168,92,0.1);
  padding: 2.5rem 0;
}
.site-footer .footer-inner{
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.site-footer .footer-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #1f2937;
}
@media (min-width: 768px){
  .site-footer .footer-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.site-footer .footer-title{
  color: var(--cb-gold);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 1rem;
}
.site-footer .footer-links a{
  color: #9ca3af;
  transition: color 0.2s ease;
}
.site-footer .footer-links a:hover{ color: var(--cb-gold); }
.site-footer .footer-bottom{
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}
@media (min-width: 768px){
  .site-footer .footer-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

/* Content wrappers — HERO left alone (do NOT match .hero) */
:where(.entry-content, .post-content, .prose, .content-area, .centered-headings){
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Headings inside content only */
:where(.entry-content, .post-content, .prose, .content-area, .centered-headings) h1,
:where(.entry-content, .post-content, .prose, .content-area, .centered-headings) h2,
:where(.entry-content, .post-content, .prose, .content-area, .centered-headings) h3{
  color: var(--cb-ink);
  letter-spacing: .2px;
}

/* Links (accessible, brand-consistent) */
:where(.entry-content, .post-content, .prose, .content-area, .centered-headings, .cb-article) a{
  color: var(--cb-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
:where(.entry-content, .post-content, .prose, .content-area, .centered-headings, .cb-article) a:hover{
  text-decoration-thickness: 2px;
}

/* Buttons (utility classes) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.625rem 1rem;
  border-radius:.75rem; border:1px solid transparent;
  font-weight:600; text-decoration:none; cursor:pointer;
  outline: none;
}
.btn:focus-visible{ box-shadow: 0 0 0 3px var(--ring-gold); }

/* Primary & secondary variants */
.btn-primary{ background: var(--cb-gold); color:#0b1220; border-color: var(--cb-gold); }
.btn-primary:hover{ filter: brightness(1.05); }

.btn-secondary{ background: transparent; color: var(--cb-ink); border-color: rgba(255,255,255,.16); }
.btn-secondary:hover{ background: rgba(255,255,255,.06); }

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) padding-box,
              radial-gradient(120rem 120rem at 10% 10%, rgba(255,255,255,.12), transparent 40%) border-box;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1rem;
}

/* Inputs */
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"],
select, textarea{
  width:100%;
  color: var(--cb-ink);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  border-radius:.75rem;
  padding:.625rem .875rem;
}
.input:focus,
input:focus, select:focus, textarea:focus{
  outline:none; box-shadow: 0 0 0 3px var(--ring-gold);
  border-color: var(--cb-gold);
}

/* Muted text */
.muted{ color: var(--cb-muted); }

/* Utility layout */
.container{ max-width: 72rem; margin-inline:auto; padding-inline:1rem; }

/* Keep home hero unaffected:
   - Do not alter .hero class here
   - Any decorative or “orb” backgrounds you keep below remain as-is
*/


/* --------- Brand tokens --------- */
:root{
  --bg-custom-navy:#0d1a2e;
  --bg-custom-navy-rgb:13,26,46;

  --bg-custom-dark-blue:#0B1C33;
  --bg-custom-dark-blue-rgb:11,28,51;

  --bg-custom-card-blue:#112542;
  --bg-custom-card-blue-rgb:17,37,66;

  --text-custom-gold:#C2A85C;
  --text-custom-gold-rgb:194,168,92;

  --bg-custom-gold:#C2A85C;
  --hover-bg-custom-gold-light:#d0b975;

  /* utilities */
  --ring-gold: rgba(194,168,92,.35);
}

/* Global box model & smooth scroll */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color:#0d1a2e;                    /* fallback */
  background-color:var(--bg-custom-navy);
  color:#fff;
}

/* --------- Utilities (with fallbacks so validator is happy) --------- */
.bg-custom-navy{ background-color:#0d1a2e; background-color:var(--bg-custom-navy); }
.bg-custom-dark-blue{ background-color:#0B1C33; background-color:var(--bg-custom-dark-blue); }
.bg-custom-card-blue{ background-color:#112542; background-color:var(--bg-custom-card-blue); }
.text-custom-gold{ color:#C2A85C; color:var(--text-custom-gold); }
.bg-custom-gold{ background-color:#C2A85C; background-color:var(--bg-custom-gold); }
/* Tailwind-style variant needs escaping; keep as utility */
.hover\:bg-custom-gold-light:hover{
  background-color:#d0b975; background-color:var(--hover-bg-custom-gold-light);
}
/* This was flagged in your screenshot. Add fallback first, then var() */
.border-custom-gold{
  border-color:#C2A85C;
  border-color:var(--text-custom-gold, #C2A85C); /* use text token as border by design */
}

/* --------- Backgrounds --------- */
.how-it-works-bg{
  background:
    linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%, rgba(255,255,255,.05)),
    linear-gradient(45deg, rgba(255,255,255,.05) 25%, #0B1C33 25%, #081524 75%, rgba(255,255,255,.05) 75%, rgba(255,255,255,.05)); /* fallbacks */
  background:
    linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%, rgba(255,255,255,.05)),
    linear-gradient(45deg, rgba(255,255,255,.05) 25%, var(--bg-custom-dark-blue) 25%, #081524 75%, rgba(255,255,255,.05) 75%, rgba(255,255,255,.05));
  background-size:20px 20px;
  background-color:#0B1C33;                     /* fallback */
  background-color:var(--bg-custom-dark-blue);
}

/* --------- Animations --------- */
@keyframes fade-in-up{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in-down{ from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in{ from{opacity:0} to{opacity:1} }
@keyframes slide-up{ from{opacity:0;transform:translateY(50px)} to{opacity:1;transform:translateY(0)} }

.animate-fade-in-up{ animation:fade-in-up .6s ease-out forwards; }
.animate-fade-in-down{ animation:fade-in-down .6s ease-out forwards; }
.animate-fade-in{ animation:fade-in .6s ease-out forwards; }
.delay-100{ animation-delay:.1s }
.delay-200{ animation-delay:.2s }
.delay-300{ animation-delay:.3s }
.delay-400{ animation-delay:.4s }
.delay-500{ animation-delay:.5s }

/* --------- Custom scrollbar --------- */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{
  background:#0d1a2e; background:var(--bg-custom-navy);
}
::-webkit-scrollbar-thumb{
  background:#112542; background:var(--bg-custom-card-blue);
  border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{ background:#193152; }

/* --------- Recommended Resources (enhanced) --------- */
.recommended-resources-bg{
  background: linear-gradient(135deg,#0d1a2e 0%,#0B1C33 25%,#091629 50%,#0B1C33 75%,#0d1a2e 100%); /* fallback */
  background: linear-gradient(135deg, var(--bg-custom-navy) 0%, var(--bg-custom-dark-blue) 25%, #091629 50%, var(--bg-custom-dark-blue) 75%, var(--bg-custom-navy) 100%);
  position:relative;
  overflow:hidden;
}

/* Decorative orbs – never block clicks; sit behind content */
.floating-orb{
  position:absolute;
  border-radius:50%;
  opacity:.1;
  animation:orbit 15s linear infinite;
  pointer-events:none;
  z-index:-1;
}

.recommended-resources-bg::before{
  content:'';
  position:absolute; inset:0;
  /* fallbacks for old validators */
  background:
    radial-gradient(circle at 20% 50%, rgba(194,168,92,.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(11,28,51,.10) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(17,37,66,.10) 0%, transparent 50%);
  /* variable-driven */
  background:
    radial-gradient(circle at 20% 50%, rgba(var(--text-custom-gold-rgb), .10) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--bg-custom-dark-blue-rgb), .10) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(var(--bg-custom-card-blue-rgb), .10) 0%, transparent 50%);
  animation: float 20s ease-in-out infinite;
}

@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0) }
  33%{ transform:translateY(-20px) rotate(1deg) }
  66%{ transform:translateY(-10px) rotate(-1deg) }
}

@keyframes orbit{
  0%{ transform:translateY(0) translateX(0) rotate(0) }
  25%{ transform:translateY(-20px) translateX(20px) rotate(90deg) }
  50%{ transform:translateY(0) translateX(40px) rotate(180deg) }
  75%{ transform:translateY(20px) translateX(20px) rotate(270deg) }
  100%{ transform:translateY(0) translateX(0) rotate(360deg) }
}

/* --------- Cards --------- */
.glass-card{
  position:relative;                       /* ensures z-index works */
  z-index:0;
  background: rgba(17,37,66,.80);          /* fallback */
  background: rgba(var(--bg-custom-card-blue-rgb), .80);
  backdrop-filter: blur(10px);
  border:1px solid rgba(194,168,92,.20);   /* fallback */
  border:1px solid rgba(var(--text-custom-gold-rgb), .20);
  transition: all .4s cubic-bezier(.4,0,.2,1);
}
.glass-card:hover{
  z-index:2;                               /* raise above neighbors */
  background: rgba(17,37,66,.90);          /* fallback */
  background: rgba(var(--bg-custom-card-blue-rgb), .90);
  border-color: rgba(194,168,92,.40);      /* fallback */
  border-color: rgba(var(--text-custom-gold-rgb), .40);
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0,0,0,.30),
    0 0 20px rgba(194,168,92,.20);         /* soft gold glow */
}

/* Book imagery */
.book-cover{
  width:100%;
  height:280px;
  object-fit:contain;
  border-radius:12px;
  transition: all .4s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.glass-card:hover .book-cover{
  transform:scale(1.05);
  box-shadow:0 15px 40px rgba(0,0,0,.6);
}

/* Title glow */
.title-glow{
  text-shadow:0 0 20px rgba(194,168,92,.5); /* fallback */
  text-shadow:0 0 20px rgba(var(--text-custom-gold-rgb), .5);
  animation:glow 3s ease-in-out infinite alternate;
}
@keyframes glow{
  from{ text-shadow:0 0 20px rgba(194,168,92,.5) }
  to{ text-shadow:0 0 30px rgba(194,168,92,.8), 0 0 40px rgba(194,168,92,.3) }
}

/* Gradient text styles */
.book-title-gradient{
  transition: all .3s ease;
  background: linear-gradient(45deg,#ffffff,#e5e7eb);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.glass-card:hover .book-title-gradient{
  background: linear-gradient(45deg,#C2A85C,#d0b975); /* fallback */
  background: linear-gradient(45deg,var(--text-custom-gold), var(--hover-bg-custom-gold-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transform:translateY(-2px);
}

.section-subtitle-gradient{
  background: linear-gradient(45deg,#C2A85C,#a1a1aa); /* fallback */
  background: linear-gradient(45deg, var(--text-custom-gold), #a1a1aa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Layout helpers */
.grid-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:2rem;
  max-width:1400px;
  margin:0 auto;
}
@media (min-width:640px){ .book-cover{ height:300px } }
@media (min-width:1024px){
  .book-cover{ height:320px }
  .grid-container{ gap:2.5rem }
}

/* Scroll reveal */
.scroll-reveal{
  opacity:0; transform:translateY(30px);
  transition: all .6s ease;
}
.scroll-reveal.revealed{ opacity:1; transform:translateY(0) }
.stagger-delay-1{ transition-delay:.1s }
.stagger-delay-2{ transition-delay:.2s }
.stagger-delay-3{ transition-delay:.3s }
.stagger-delay-4{ transition-delay:.4s }
.stagger-delay-5{ transition-delay:.5s }
.stagger-delay-6{ transition-delay:.6s }
.stagger-delay-7{ transition-delay:.7s }
.stagger-delay-8{ transition-delay:.8s }
.stagger-delay-9{ transition-delay:.9s }
/* === Headings: center H1/H2, unify H1–H3 styling (scoped; hero unaffected) ===
   Scope targets common WP content wrappers and our page wrapper.
   It will NOT touch typical hero areas (e.g., .entry-header, .hero, header).
*/

/* CENTER H1/H2 (content area only) */
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h1,
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h2 {
  text-align: center;
}

/* TYPOGRAPHY (content area only) */
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h1,
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h2,
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h3 {
  font-family: var(--cb-font-heading, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0.6em 0 0.35em;
}

/* RESPONSIVE SIZES */
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h1 { 
  font-size: clamp(1.9rem, 2vw + 1rem, 2.6rem); 
}
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h2 { 
  font-size: clamp(1.35rem, 1.2vw + 0.9rem, 1.8rem); 
}
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h3 { 
  font-size: clamp(1.15rem, 0.8vw + 0.85rem, 1.35rem); 
}

/* COLOR TOKENS (use your brand gold) */
:root {
  /* fallback if token missing */
  --cb-white: #FFFFFF;
}

/* H1 — fallback color for older browsers */
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h1 {
  color: var(--text-custom-gold, #C2A85C);
}

/* H1 — gold → white gradient (modern browsers) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  :where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h1 {
    background-image: linear-gradient(180deg, var(--text-custom-gold, #C2A85C) 0%, var(--cb-white, #FFFFFF) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* H2/H3 — unified gold style */
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h2,
:where(.entry-content, .post-content, .prose, .cb-article, .content-area, .centered-headings) h3 {
  color: var(--text-custom-gold, #C2A85C);
}

/* Optional: tighten the top spacing of the main page H1 inside content */
:where(.content-area, .cb-article) .page-header h1 { margin-top: 0.25em; }