/*
 * ============================================================================
 * THEME: PassiveTask (www.passivetask.com)
 * ============================================================================
 *
 * Reusable component theme matching the PassiveTask brand as shipped on the
 * live marketing site: a confident navy (#1A417E) carrying the structure, with
 * a warm ochre (#FD5927) as the single action/accent color, set in Inter Tight
 * on cool, blue-tinted neutrals. Loaded directly by the frontend and by the
 * backoffice preview.
 *
 * Brand anchors (from the live stylesheet):
 *   --blue       #1A417E  links, headings, structure, theme-color
 *   --blue-deep  #12305C  hover / secondary band
 *   --blue-night #0E2547  footer, showcase, dark sections
 *   --ochre      #FD5927  primary CTA, eyebrows, bullets, badges, emphasis
 *   --ochre-soft #FF7A4F  accent on dark surfaces
 *
 * Note: @import rules are ignored by adoptedStyleSheets in shadow DOM previews,
 * so the preview loads fonts through the --font-url custom property.
 *
 * Palette guidance:
 *   - Action elements (CTAs, eyebrows, bullets) -> ochre (#FD5927)
 *   - Headings / links / structure              -> brand navy (#1A417E)
 *   - Deep structural surfaces                   -> night navy (#0E2547)
 *   - Supporting surfaces                        -> concrete blue neutrals
 *
 * Decorative background pattern rules are preserved at the end of the file.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap");

:root {

  /* ========================================================================
     FONT FAMILIES
     ======================================================================== */
  --font-url:     "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap";
  --font-sans:    "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:   "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* ========================================================================
      COLOR PALETTE
      ======================================================================== */

    /* Core anchors */
    --color-theme-navy:      #1a417e;
    --color-theme-navy-deep: #12305c;
    --color-theme-navy-dark: #0e2547;
    --color-theme-sky:       #3c69b0;
    --color-theme-ochre:     #fd5927;
    --color-theme-ochre-soft:#ff7a4f;
    --color-white:           #ffffff;

    /* Light surfaces (live "concrete" / "misty") */
    --color-bg-stone:    #f4f8fb;
    --color-bg-linen:    #e8eff5;
    --color-bg-cornsilk: #f8fbfd;

    /* Dark surfaces */
    --color-bg-charcoal: #0b1d3a;
    --color-bg-slate:    #12305c;
    --color-bg-earth:    #0e2547;

    /* Brand ramp (navy, brand-600 == #1A417E) */
    --color-brand-50:  #f4f8fb;
    --color-brand-100: #dde8f6;
    --color-brand-200: #c2d3ec;
    --color-brand-300: #94b1da;
    --color-brand-400: #5e85bd;
    --color-brand-500: var(--color-theme-sky);
    --color-brand-600: #1a417e;
    --color-brand-700: #12305c;
    --color-brand-800: #0e2547;
    --color-brand-900: #0b1d3a;

    /* Accent ramp (ochre) */
    --color-accent-50:  #fff1ec;
    --color-accent-100: #ffded2;
    --color-accent-200: #ffb59c;
    --color-accent-300: #ff7a4f;
    --color-accent-400: #fd5927;
    --color-accent-500: #e84d1f;
    --color-accent-600: #d23e10;

    /* Semantic aliases — primary == the ochre action color */
    --color-primary:             var(--color-theme-ochre);
    --color-primary-hover:       #e84d1f;
    --color-primary-active:      #d23e10;
    --color-primary-dark:        #d23e10;
  --color-primary-foreground:  var(--color-white);

  --color-surface:             var(--color-white);
  --color-surface-alt:         var(--color-bg-stone);
  --color-surface-secondary:   #f4f8fb;
  --color-surface-tertiary:    #e8eff5;

  --color-text:                #161a1f;
  --color-text-secondary:      #54606b;
  --color-text-tertiary:       #96a5af;
  --color-text-inverse:        var(--color-white);
  --color-text-muted:          #5b6772;

  --color-heading:             var(--color-theme-navy);
  --color-heading-secondary:   #12305c;

  --color-border:              #d5dfe5;
  --color-border-light:        #e8eff5;
  --color-border-dark:         #aebfcb;

  /* Status colors (greens/reds tuned to sit beside ochre) */
  --color-success:             #1f7a48;
  --color-success-light:       #d8f0e2;
  --color-success-dark:        #166534;
  --color-error:               #d23e10;
  --color-error-light:         #ffded2;
  --color-error-dark:          #9a2c0a;
  --color-warning:             #fd5927;
  --color-warning-light:       #ffe3d6;
  --color-warning-dark:        #d23e10;
  --color-info:                #1a417e;
  --color-info-light:          #dde8f6;
  --color-info-dark:           #12305c;

  /* Grayscale */
  --color-gray-50:   #f6f8fa;
  --color-gray-100:  #eef1f4;
  --color-gray-200:  #e2e7ec;
  --color-gray-300:  #cdd5dd;
  --color-gray-400:  #96a5af;
  --color-gray-500:  #6b7681;
  --color-gray-600:  #4b5563;
  --color-gray-700:  #374151;
  --color-gray-800:  #1f2937;
  --color-gray-900:  #161a1f;
  --color-gray-950:  #0b1d3a;

  /* ‾‾‾ Section bg-variant tokens ‾‾‾ */
  --color-section-muted:        var(--color-bg-stone);
  --color-section-muted-fg:     var(--color-theme-navy);
  --color-section-primary:      var(--color-theme-navy);
  --color-section-primary-fg:   var(--color-white);
  --color-section-secondary:    var(--color-theme-navy-deep);
  --color-section-secondary-fg: var(--color-white);
  --color-section-accent:       var(--color-theme-ochre);
  --color-section-accent-fg:    var(--color-white);
  --color-section-dark:         var(--color-theme-navy-dark);
  --color-section-dark-fg:      var(--color-white);

  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */
  --font-family-sans:    var(--font-sans);
  --font-family-heading: var(--font-heading);
  --font-family-serif:   var(--font-serif);
  --font-family-mono:    ui-monospace, "Cascadia Code", "Fira Code", monospace;

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

  --font-weight-light:     300;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:   1.06;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose:   2;

  --letter-spacing-tighter: -0.035em;
  --letter-spacing-tight:   -0.02em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-widest:  0.2em;

  /* ========================================================================
     SPACING
     ======================================================================== */
  --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-12:   3rem;
  --space-16:   4rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* ========================================================================
     BORDER RADIUS  (live: 9px buttons, ~14-16px cards)
     ======================================================================== */
  --radius-none: 0;
  --radius-sm:   0.4375rem;
  --radius-md:   0.5625rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.125rem;
  --radius-full: 9999px;

  --radius-button: 0.5625rem; /* 9px */
  --radius-card:   1rem;      /* 16px */
  --radius-input:  0.5625rem; /* 9px */
  --radius-badge:  0.375rem;  /* 6px — live badges/pills are softly rounded, not pills */

  /* ========================================================================
     SHADOWS  (navy-tinted, soft & wide — from the live stylesheet)
     ======================================================================== */
  --shadow-xs:   0 1px 2px 0 rgb(14 37 71 / 0.05);
  --shadow-sm:   0 2px 10px rgb(14 37 71 / 0.06);
  --shadow-base: 0 4px 16px -2px rgb(14 37 71 / 0.08);
  --shadow-md:   0 14px 40px -6px rgb(14 37 71 / 0.10);
  --shadow-lg:   0 30px 70px -16px rgb(14 37 71 / 0.16);
  --shadow-xl:   0 36px 80px -18px rgb(14 37 71 / 0.20);
  --shadow-2xl:  0 44px 90px -20px rgb(14 37 71 / 0.26);

  /* ========================================================================
     TRANSITIONS / Z-INDEX / DIMENSIONS
     ======================================================================== */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   350ms;
  --timing-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-dropdown: 10;
  --z-sticky:   20;
  --z-fixed:    30;

  --height-header: 5rem;

  /* ========================================================================
     COMPONENT VARIABLES
     ======================================================================== */

  /* ‾‾‾ Global Header ‾‾‾
   * The header is transparent with white text over the dark full-bleed home
   * hero, and turns into a solid white bar with navy text + a drop shadow on
   * scroll (and on ordinary content pages). The state machine lives in the
   * frontend base.css; these tokens colour it for the PassiveTask brand. */
  --header-padding-block:     0;
  --header-z-index:           var(--z-sticky);
  --header-solid-bg:          var(--color-white);
  --header-solid-fg:          var(--color-theme-navy);
  --header-solid-fg-hover:    var(--color-theme-ochre);
  --header-solid-border:      color-mix(in srgb, var(--color-theme-navy) 12%, transparent);
  --header-solid-shadow:      none;
  --header-scrolled-shadow:   0 10px 30px color-mix(in srgb, var(--color-theme-navy) 16%, transparent);
  --header-overlay-fg:        var(--color-white);
  --header-overlay-fg-hover:  var(--color-white);

  --nav-link-font-size:       var(--font-size-sm);
  --nav-link-font-weight:     var(--font-weight-medium);
  --nav-link-color:           rgba(255, 255, 255, 0.85);
  --nav-link-color-hover:     var(--color-white);
  --nav-link-letter-spacing:  0.01em;
  --nav-link-transition:      color var(--duration-normal) var(--timing-ease);

  /* Header CTA matches the primary action buttons — solid ochre */
  --nav-cta-background:       var(--color-theme-ochre);
  --nav-cta-foreground:       var(--color-white);
  --nav-cta-background-hover: #e84d1f;
  --nav-cta-padding:          var(--space-2-5) var(--space-6);
  --nav-cta-min-width:        9rem;
  --nav-cta-border-radius:    var(--radius-button);
  --nav-cta-font-size:        var(--font-size-sm);
  --nav-cta-font-weight:      var(--font-weight-semibold);

  /* ‾‾‾ Dropdown Flyout ‾‾‾ */
  --dropdown-background:   var(--color-white);
  --dropdown-foreground:   var(--color-theme-navy);
  --dropdown-border:       var(--color-border);
  --dropdown-shadow:       var(--shadow-lg);
  --dropdown-padding:      var(--space-4);
  --dropdown-min-width:    13.75rem;
  --dropdown-offset:       var(--space-2);
  --dropdown-cta-color:    var(--color-primary);

  /* ‾‾‾ Buttons ‾‾‾
   * Primary = the ochre action button (.btn-primary on the live site).
   * Secondary = the navy "ghost" outline (.btn-ghost). */
  --button-border-radius:            var(--radius-button);
  --button-font-size:                var(--font-size-base);
  --button-font-weight:              var(--font-weight-semibold);
  --button-transition:               all var(--duration-normal) var(--timing-ease);
  --button-primary-background:       var(--color-theme-ochre);
  --button-primary-foreground:       var(--color-white);
  --button-primary-background-hover: #e84d1f;
  --button-secondary-background:     transparent;
  --button-secondary-foreground:     var(--color-theme-navy);
  --button-secondary-border:         var(--color-border);

  /* Card system */
  --card-background:     var(--color-surface);
  --card-border:         var(--color-border);
  --card-border-radius:  var(--radius-card);
  --card-shadow:         var(--shadow-sm);
  --card-padding:        28px;
  --card-image-ratio:    3 / 2;
  --card-image-fallback: var(--color-theme-navy);
  --card-hover-lift:     -6px;
  --card-hover-shadow:   var(--shadow-md);

  --card-badge-background:   var(--color-theme-ochre);
  --card-badge-foreground:   var(--color-white);
  --card-badge-inset:        var(--space-4);
  --card-caption-background: rgba(14, 37, 71, 0.86);
  --card-caption-foreground: var(--color-white);
  --card-eyebrow-color:      var(--color-theme-ochre);
  --card-headline-color:     var(--color-theme-navy);
  --card-cta-color:          var(--color-theme-ochre);
  --card-highlight-background: var(--color-theme-navy);
  --card-highlight-foreground: var(--color-white);
  --card-highlight-border:     var(--color-theme-navy);
  --card-highlight-shadow:     var(--shadow-lg);

  /* ‾‾‾ Badges ‾‾‾ (live ".badge-new" — ochre, uppercase, lightly rounded) */
  --badge-background:    var(--color-theme-ochre);
  --badge-foreground:    var(--color-white);
  --badge-border-radius: var(--radius-badge);
  --badge-padding:       var(--space-1) var(--space-2-5);
  --badge-font-size:     var(--font-size-xs);
  --badge-font-weight:   var(--font-weight-bold);

  /* ‾‾‾ Headings ‾‾‾ */
  --heading-h1-size: var(--font-size-6xl);
  --heading-h1-weight: var(--font-weight-extrabold);
  --heading-h1-line-height: var(--line-height-tight);
  --heading-h2-size: var(--font-size-4xl);
  --heading-h2-weight: var(--font-weight-extrabold);
  --heading-h2-line-height: var(--line-height-tight);
  --heading-h3-size: var(--font-size-2xl);
  --heading-h3-weight: var(--font-weight-bold);
  --heading-h3-line-height: var(--line-height-snug);
  --heading-h4-size: var(--font-size-xl);
  --heading-h4-weight: var(--font-weight-semibold);
  --heading-h4-line-height: var(--line-height-snug);
  --body-text-size: var(--font-size-lg);
  --body-text-weight: var(--font-weight-normal);
  --body-text-line-height: var(--line-height-relaxed);
  --caption-text-size: var(--font-size-sm);

  /* ‾‾‾ Editorial Intro Block ‾‾‾
   * Eyebrow = ochre with a short ochre rule; emphasis = ochre (live ".accent").
   * The eyebrow/emphasis TEXT uses the deeper accent-600 (#d23e10, 4.73:1 on
   * white) so small ochre labels clear WCAG-AA on light surfaces — bright ochre
   * (#FD5927 == 3.17:1) fails 4.5:1 for text at this size. The rule bar stays
   * bright ochre: it is a decorative graphic and only needs 3:1. Branded dark
   * bands restore bright ochre below. */
  --editorial-eyebrow-rule-color:  var(--color-theme-ochre);
  --editorial-eyebrow-rule-width:  26px;
  --editorial-eyebrow-rule-height: 2px;
  --editorial-eyebrow-color:       var(--color-accent-600);
  --editorial-em-color:            var(--color-accent-600);
  --editorial-quote-border:        var(--color-theme-ochre);
  --editorial-quote-color:         var(--color-theme-navy);
  --editorial-link-color:          var(--color-theme-navy);

  /* ‾‾‾ Content Header ‾‾‾
   * PassiveTask sets its headlines in mixed case (not the shared uppercase
   * default) and keeps the single Inter Tight typeface across headline,
   * emphasis, and intro — no serif italic pull-quote. */
  --content-header-eyebrow-size:      0.78rem;
  --content-header-headline-font:     var(--font-heading);
  --content-header-headline-transform: none;
  --content-header-emphasis-font:     var(--font-heading);
  --content-header-emphasis-weight:   800;
  --content-header-emphasis-color:    var(--color-theme-ochre);
  --content-header-intro-font:        var(--font-sans);
}

/* ============================================================================
   COMPONENT STYLING
   ============================================================================ */

/* ‾‾‾ Global Header ‾‾‾
 * Scoped to .global-header so it only restyles the site header. The theme
 * stylesheet is unlayered, so these rules win over Tailwind layered utilities.
 */
/* Background / foreground / border / shadow are state-driven in base.css
   (transparent-over-hero → solid-on-scroll); the theme only sets the chrome. */
.global-header {
  padding-block: var(--header-padding-block);
}

.global-header nav a {
  font-size: var(--nav-link-font-size);
  font-weight: var(--nav-link-font-weight);
  color: var(--nav-link-color);
  text-transform: none;
  letter-spacing: var(--nav-link-letter-spacing);
  transition: var(--nav-link-transition);
}

.global-header nav a:hover {
  color: var(--nav-link-color-hover);
  text-decoration: none;
}

/* Live nav links grow an ochre underline on hover. */
.global-header nav a {
  position: relative;
}
.global-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--color-theme-ochre);
  transition: width var(--duration-normal) var(--timing-ease);
}
.global-header nav a:hover::after { width: 100%; }

/* ‾‾‾ Dropdown Flyout — works on hover (desktop) and tap (touch) ‾‾‾ */
.nav-dropdown,
[data-dropdown-panel] {
  background-color: var(--dropdown-background);
  color: var(--dropdown-foreground);
  border: 1px solid var(--dropdown-border);
  box-shadow: var(--dropdown-shadow);
  padding: var(--dropdown-padding);
  min-width: var(--dropdown-min-width);
  margin-top: var(--dropdown-offset);
  border-radius: var(--radius-lg);
}

.nav-dropdown a,
[data-dropdown-panel] a {
  display: block;
  padding: var(--space-2-5) 0;
  color: var(--dropdown-foreground);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--font-weight-normal);
}

.nav-dropdown a:hover,
[data-dropdown-panel] a:hover { color: var(--color-theme-ochre); text-decoration: none; }

.nav-dropdown__cta,
[data-dropdown-cta] {
  display: block;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--dropdown-border);
  color: var(--dropdown-cta-color);
  text-transform: none;
  font-weight: var(--font-weight-semibold);
}

/* ‾‾‾ Buttons ‾‾‾ */
.btn-primary, button.primary {
  background-color: var(--button-primary-background);
  color: var(--button-primary-foreground);
  border-radius: var(--button-border-radius);
  font-weight: var(--button-font-weight);
  letter-spacing: -0.01em;
  box-shadow: 0 10px 26px rgba(253, 89, 39, 0.32);
  transition: var(--button-transition);
}
.btn-primary:hover, button.primary:hover {
  background-color: var(--button-primary-background-hover);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(253, 89, 39, 0.42);
}
.btn-secondary, button.secondary {
  background-color: var(--button-secondary-background);
  color: var(--button-secondary-foreground);
  border: 1.5px solid var(--button-secondary-border);
  border-radius: var(--button-border-radius);
  font-weight: var(--button-font-weight);
  transition: var(--button-transition);
}
.btn-secondary:hover, button.secondary:hover {
  border-color: var(--color-theme-navy);
  transform: translateY(-3px);
}

/* Header CTA keeps a stable width */
.nav-cta, [data-nav-cta] {
  background-color: var(--nav-cta-background);
  color: var(--nav-cta-foreground);
  padding: var(--nav-cta-padding);
  min-width: var(--nav-cta-min-width);
  border-radius: var(--nav-cta-border-radius);
  font-size: var(--nav-cta-font-size);
  font-weight: var(--nav-cta-font-weight);
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition: var(--button-transition);
}
.nav-cta:hover, [data-nav-cta]:hover {
  background-color: var(--nav-cta-background-hover);
  transform: translateY(-3px);
}

/* Card layout rules
 * Sub-element rules stay scoped under .card to avoid leaking into adjacent
 * layout variants.
 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  overflow: hidden;
  transition: transform var(--duration-slow) var(--timing-ease),
              box-shadow var(--duration-slow) var(--timing-ease),
              border-color var(--duration-slow) var(--timing-ease);
}

.card:hover {
  transform: translateY(var(--card-hover-lift));
  box-shadow: var(--card-hover-shadow);
  border-color: transparent;
}

/* Fixed 3:2 image area with edge-to-edge bleed inside the card. */
.card .card__image,
.card [data-card-image] {
  position: relative;
  aspect-ratio: var(--card-image-ratio);
  background-color: var(--card-image-fallback);
  margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) var(--card-padding);
  overflow: hidden;
}
.card .card__image img,
.card [data-card-image] img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Content wrapper keeps card spacing centralized. */
.card .card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0;
}

/* Shared badge treatment for all card variants. */
.card .card__badge,
.card [data-card-badge] {
  position: absolute;
  top: var(--card-badge-inset);
  left: var(--card-badge-inset);
  z-index: 1;
  background-color: var(--card-badge-background);
  color: var(--card-badge-foreground);
  padding: var(--badge-padding);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--badge-border-radius);
}

/* Optional image caption overlay. */
.card .card__caption,
.card [data-card-caption] {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background-color: var(--card-caption-background);
  color: var(--card-caption-foreground);
  font-size: var(--caption-text-size);
  font-style: italic;
  padding: var(--space-2) var(--space-3);
}

/* Typography stack: eyebrow -> headline -> body -> CTA */
.card .card__eyebrow,
.card [data-card-eyebrow] {
  color: var(--card-eyebrow-color);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.13em;
}

.card .card__headline,
.card [data-card-headline] {
  color: var(--card-headline-color);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: -0.01em;
}

.card .card__body,
.card [data-card-body] {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Optional callout block for any card type. */
.card .card__pair-with,
.card [data-card-pairwith] {
  background-color: var(--color-bg-stone);
  padding: var(--space-4);
  margin-top: var(--space-4);
  border-radius: var(--radius-md);
}
.card .card__pair-with-label,
.card [data-card-pairwith] .label {
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

/* CTA pinned to card bottom */
.card .card__cta,
.card [data-card-cta] {
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--card-cta-color);
  text-transform: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.card.highlighted {
  background-color: var(--card-highlight-background);
  color: var(--card-highlight-foreground);
  border-color: var(--card-highlight-border);
  box-shadow: var(--card-highlight-shadow);
}
.card.highlighted .card__headline { color: var(--card-highlight-foreground); }
.card.highlighted .card__eyebrow,
.card.highlighted [data-card-eyebrow] { color: var(--color-theme-ochre-soft); }

/* ‾‾‾ Headings ‾‾‾ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); letter-spacing: var(--letter-spacing-tight); }

h1 { font-size: var(--heading-h1-size); font-weight: var(--heading-h1-weight); line-height: var(--heading-h1-line-height); color: inherit; }
h2 { font-size: var(--heading-h2-size); font-weight: var(--heading-h2-weight); line-height: var(--heading-h2-line-height); color: inherit; }
h3 { font-size: var(--heading-h3-size); font-weight: var(--heading-h3-weight); line-height: var(--heading-h3-line-height); color: inherit; }
h4, h5, h6 { font-size: var(--heading-h4-size); font-weight: var(--heading-h4-weight); line-height: var(--heading-h4-line-height); color: inherit; }

/* Inline emphasis in headings — PassiveTask shows emphasis as an ochre color
 * shift (the live ".accent" treatment), keeping the single typeface. */
h1 em, h2 em, h3 em, h4 em, .headline em {
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: inherit;
  color: var(--editorial-em-color);
}

/* ‾‾‾ Body ‾‾‾ */
body {
  font-family: var(--font-family-sans);
  font-size: var(--body-text-size);
  font-weight: var(--body-text-weight);
  line-height: var(--body-text-line-height);
  color: var(--color-text);
  background-color: var(--color-surface);
}
p { color: inherit; }

/* List markers carry the ochre accent (live bullets/markers are ochre). */
.rich-text ul, .editorial ul, [data-rich-text] ul { list-style: none; padding-left: 0; }
.rich-text ul li, .editorial ul li, [data-rich-text] ul li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}
.rich-text ul li::before, .editorial ul li::before, [data-rich-text] ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-theme-ochre);
}
.rich-text ol, .editorial ol, [data-rich-text] ol { padding-left: var(--space-6); }
.rich-text ol li::marker, .editorial ol li::marker, [data-rich-text] ol li::marker {
  color: var(--color-theme-ochre);
  font-weight: var(--font-weight-bold);
}

/* ‾‾‾ Content Header / Hero ‾‾‾
 * Matches the live PassiveTask hero: solid ochre emphasis set upright in the
 * brand sans (not the shared serif italic), a plain intro paragraph rather than
 * a bordered pull-quote, and ochre square bullets flowing beneath it.
 * Selectors carry the extra .editorial-intro-inner class the ContentHeader
 * always emits, so they win over the shared base.css rules regardless of load
 * order. */
.editorial-intro-inner.content-header .content-header-headline em {
  font-style: normal;
  font-size: 0.92em;
}

/* Intro reads as brand sans body copy — drop the serif italic pull-quote rule. */
.editorial-intro-inner.content-header .pull-lead {
  font-style: normal;
  border: 0;
  padding-inline: 0;
}

/* Ochre square bullets in the content-header intro, laid out inline like the comp. */
.content-header .pull-lead ul {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
.content-header .pull-lead ul li {
  position: relative;
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}
.content-header .pull-lead ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-theme-ochre);
}
.content-header .pull-lead ul li p { display: inline; margin: 0; }

/* The page-header hero carries a display-scale headline, bigger than the shared
 * section-header default, to match the comp. */
.hero .content-header .content-header-headline {
  line-height: 0.98;
}

/* ‾‾‾ Editorial Intro Block ‾‾‾ */
.eyebrow-rule, [data-eyebrow-rule] {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--editorial-eyebrow-color);
}
.eyebrow-rule::before, [data-eyebrow-rule]::before {
  content: "";
  flex: 0 0 var(--editorial-eyebrow-rule-width);
  width: var(--editorial-eyebrow-rule-width);
  height: var(--editorial-eyebrow-rule-height);
  background-color: var(--editorial-eyebrow-rule-color);
}

/* Reusable block quote style. */
blockquote, .blockquote {
  border-left: 3px solid var(--editorial-quote-border);
  padding-left: var(--space-5);
  margin-left: 0;
  font-family: var(--font-family-sans);
  font-style: italic;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  color: var(--editorial-quote-color);
}

/* Inline rich-text link treatment. */
.rich-text a, .editorial a, [data-rich-text] a {
  color: var(--editorial-link-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rich-text a:hover, .editorial a:hover, [data-rich-text] a:hover {
  color: var(--color-theme-ochre);
}
.rich-text strong, .editorial strong, [data-rich-text] strong {
  font-weight: var(--font-weight-bold);
}

/* ‾‾‾ Badges ‾‾‾ */
.badge, [data-badge] {
  background-color: var(--badge-background);
  color: var(--badge-foreground);
  border-radius: var(--badge-border-radius);
  padding: var(--badge-padding);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-block;
}

/* ============================================================================
   SECTION BACKGROUND / FOREGROUND VARIANTS
   ============================================================================
   Background system (PassiveTask palette):
     Group          Light (navy text)   Dark (white text)
     Neutral        concrete            night-navy
     Warm           linen               earth (night)
     Brand-adjacent cornsilk            slate (deep navy)
     Core           white               navy
   ============================================================================ */

/* section[data-fg="light"] { color: var(--color-white); }
section[data-fg="light"] *:not(button):not(.btn-primary):not(.btn-secondary):not(.nav-cta) { color: var(--color-white); } */
section[data-fg="light"] button *, section[data-fg="light"] .btn-primary *, section[data-fg="light"] .btn-secondary * { color: inherit; }

section[data-fg="medium"] { color: rgba(0, 0, 0, 0.5); }
section[data-fg="medium"] *:not(button):not(.btn-primary):not(.btn-secondary):not(.nav-cta) { color: rgba(0, 0, 0, 0.5); }

section[data-fg="dark"] { color: var(--color-theme-navy); }
section[data-fg="dark"] *:not(button):not(.btn-primary):not(.btn-secondary):not(.nav-cta) { color: var(--color-theme-navy); }
section[data-fg="dark"] button *, section[data-fg="dark"] .btn-primary *, section[data-fg="dark"] .btn-secondary * { color: inherit; }

/* Section background variants */
section[data-bg="white"]    { background: var(--color-white);            color: var(--color-theme-navy); }
section[data-bg="stone"]    { background: var(--color-bg-stone);         color: var(--color-theme-navy); }
section[data-bg="linen"]    { background: var(--color-bg-linen);         color: var(--color-theme-navy); }
section[data-bg="cornsilk"] { background: var(--color-bg-cornsilk);      color: var(--color-theme-navy); }
section[data-bg="navy"]     { background: var(--color-theme-navy-dark);  color: var(--color-white); }
section[data-bg="charcoal"] { background: var(--color-bg-charcoal);      color: var(--color-white); }
section[data-bg="slate"]    { background: var(--color-bg-slate);         color: var(--color-white); }
section[data-bg="earth"]    { background: var(--color-bg-earth);         color: var(--color-white); }

/* Legacy aliases kept for existing content. */
section[data-bg="default"] { background: var(--color-white);            color: var(--color-theme-navy); }
section[data-bg="tint"]    { background: var(--color-bg-cornsilk);      color: var(--color-theme-navy); }
section[data-bg="light"]   { background: var(--color-bg-stone);         color: var(--color-theme-navy); }
section[data-bg="muted"]   { background: var(--color-bg-stone);         color: var(--color-theme-navy); }
section[data-bg="brand"]   { background: var(--color-theme-navy);       color: var(--color-white); }
section[data-bg="black"]   { background: #07142b;                       color: var(--color-white); }

/* ‾‾‾ Primary band == the live HERO look ‾‾‾
 * Solid brand navy carrying two radial glows: a soft white highlight top-right
 * and a warm ochre wash bottom-left, exactly as the live hero. */
section[data-bg="primary"] {
  background: var(--color-theme-navy);
  color: var(--color-white);
}
section[data-bg="secondary"] {
  background: var(--color-theme-navy-deep);
  color: var(--color-white);
}
section[data-bg="accent"] {
  background: var(--color-theme-ochre);
  color: var(--color-white);
}
section[data-bg="dark"] {
  background: var(--color-theme-navy-dark);
  color: var(--color-white);
}

section[data-bg="navy"]      .text-muted-foreground,
section[data-bg="charcoal"]  .text-muted-foreground,
section[data-bg="slate"]     .text-muted-foreground,
section[data-bg="earth"]     .text-muted-foreground,
section[data-bg="dark"]      .text-muted-foreground,
section[data-bg="primary"]   .text-muted-foreground,
section[data-bg="secondary"] .text-muted-foreground,
section[data-bg="brand"]     .text-muted-foreground,
section[data-bg="black"]     .text-muted-foreground { color: rgba(213, 223, 229, 0.85); }

section[data-bg="accent"]    .text-muted-foreground { color: rgba(255, 255, 255, 0.85); }

/* On branded dark bands the eyebrow/emphasis sits on navy, not a light panel, so
   restore the brighter ochre (the darker accent-600 used for light surfaces would
   be too dim against navy). */
section[data-bg="navy"],
section[data-bg="charcoal"],
section[data-bg="slate"],
section[data-bg="earth"],
section[data-bg="dark"],
section[data-bg="primary"],
section[data-bg="secondary"],
section[data-bg="brand"],
section[data-bg="black"] {
  --editorial-eyebrow-color: var(--color-theme-ochre);
  --editorial-em-color:      var(--color-theme-ochre);
}

/* CTA contrast guardrails
 * Links switch to navy on light surfaces and white on dark surfaces.
 */
section[data-bg="stone"]    a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="linen"]    a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="cornsilk"] a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="tint"]     a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="light"]    a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="muted"]    a:not(.btn-primary):not(.btn-secondary):not(.nav-cta) {
  color: var(--color-theme-navy);
  text-decoration: underline;
}
section[data-bg="navy"]      a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="charcoal"]  a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="slate"]     a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="earth"]     a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="dark"]      a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="primary"]   a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="secondary"] a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="accent"]    a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="brand"]     a:not(.btn-primary):not(.btn-secondary):not(.nav-cta),
section[data-bg="black"]     a:not(.btn-primary):not(.btn-secondary):not(.nav-cta) {
  color: var(--color-white);
  text-decoration: underline;
}

/* Padding scales */
section[data-pad="none"]     { padding-block: 0; }
section[data-pad="compact"]  { padding-block: clamp(2.5rem, 4vw, 4rem); }
section[data-pad="normal"]   { padding-block: clamp(4.5rem, 7vw, 8rem); }
section[data-pad="spacious"] { padding-block: clamp(6rem, 11vw, 10rem); }

/* ============================================================================
   DECORATIVE BACKGROUND PATTERNS
   ============================================================================
   The .bgPattern* classes are explicit opt-in decorations. The hero/CTA glow
   used by the live site is reproduced as a radial-gradient overlay on the
   branded section variants (primary / secondary / dark / accent), so those
   bands read like the live hero rather than a flat fill.
   ============================================================================ */

.bgPatternBase,
.bgPattern1,
.bgPattern2,
.bgPattern3,
.bgPattern4,
.bgPatternA1,
.bgPatternA2,
.bgPatternA3,
.bgPatternA4,
.bgPatternB1,
.bgPatternB2,
.bgPatternB3,
.bgPatternB4,
.bgPatternC1,
.bgPatternC2,
.bgPatternC3,
.bgPatternC4,
.bgPatternD1,
.bgPatternD2,
.bgPatternD3,
.bgPatternD4,
section[data-bg="dark"],
section[data-bg="navy"],
section[data-bg="primary"],
section[data-bg="secondary"],
section[data-bg="accent"] {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.bgPatternBase::before,
.bgPattern1::before,
.bgPattern2::before,
.bgPattern3::before,
.bgPattern4::before,
.bgPatternA1::before,
.bgPatternA2::before,
.bgPatternA3::before,
.bgPatternA4::before,
.bgPatternB1::before,
.bgPatternB2::before,
.bgPatternB3::before,
.bgPatternB4::before,
.bgPatternC1::before,
.bgPatternC2::before,
.bgPatternC3::before,
.bgPatternC4::before,
.bgPatternD1::before,
.bgPatternD2::before,
.bgPatternD3::before,
.bgPatternD4::before,
section[data-bg="dark"]::before,
section[data-bg="navy"]::before,
section[data-bg="primary"]::before,
section[data-bg="secondary"]::before,
section[data-bg="accent"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* ‾‾‾ Hero glow: the live radial-gradient wash on branded navy bands ‾‾‾ */
section[data-bg="primary"]::before,
section[data-bg="secondary"]::before,
section[data-bg="navy"]::before,
section[data-bg="dark"]::before {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(820px 520px at 8% 108%, rgba(253, 89, 39, 0.16), transparent 62%);
  opacity: 1;
}

/* Accent band keeps a subtler white-only glow over the ochre fill. */
section[data-bg="accent"]::before {
  background:
    radial-gradient(900px 520px at 82% -10%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(700px 480px at 4% 110%, rgba(14, 37, 71, 0.14), transparent 62%);
  opacity: 1;
}

.bgPattern1,
.bgPatternA1,
.bgPatternB1,
.bgPatternC1,
.bgPatternD1 {
  background-color: var(--color-theme-sky);
}

.bgPattern2,
.bgPatternA2,
.bgPatternB2,
.bgPatternC2,
.bgPatternD2 {
  background-color: var(--color-theme-navy-dark);
}

.bgPattern3,
.bgPatternA3,
.bgPatternB3,
.bgPatternC3,
.bgPatternD3 {
  background-color: var(--color-brand-300);
}

.bgPattern4,
.bgPatternA4,
.bgPatternB4,
.bgPatternC4,
.bgPatternD4 {
  background-color: var(--color-brand-100);
}

.bgPatternA1::before,
.bgPatternA2::before,
.bgPattern1::before,
.bgPattern2::before {
  background: url("./patterns/patternA.svg") 0 0 repeat;
  background-size: 22px 30px;
  opacity: 0.6;
}

.bgPatternA3::before,
.bgPatternA4::before,
.bgPattern3::before,
.bgPattern4::before {
  background: url("./patterns/patternA.svg") 0 0 repeat;
  background-size: 22px 30px;
  opacity: 1;
}

.bgPatternB1::before,
.bgPatternB2::before {
  background: url("./patterns/patternB.svg") 0 0 repeat;
  background-size: 155px auto;
  opacity: 0.6;
}

.bgPatternB3::before,
.bgPatternB4::before {
  background: url("./patterns/patternB.svg") 0 0 repeat;
  background-size: 155px 155px;
  opacity: 0.8;
}

.bgPatternC1::before,
.bgPatternC2::before {
  background: url("./patterns/patternC.svg") 0 0 repeat;
  background-size: 120px auto;
  opacity: 0.2;
}

.bgPatternC3::before,
.bgPatternC4::before {
  background: url("./patterns/patternC.svg") 0 0 repeat;
  background-size: 120px auto;
  opacity: 0.4;
}

.bgPatternD1::before,
.bgPatternD2::before {
  background: url("./patterns/patternD.svg") -220px 0 repeat;
  background-size: 1900px 3710px;
  opacity: 0.03;
}

.bgPatternD3::before,
.bgPatternD4::before {
  background: url("./patterns/patternD.svg") 0 0 repeat;
  background-size: 100% auto;
  opacity: 0.4;
}