/*
 * ============================================================================
 * 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");

/* Moderniz — the display face used by the title block's eyebrow and headline.
   Not a Google font, so it is self-hosted rather than imported. Unlike @import,
   @font-face IS honoured inside the backoffice preview's adopted stylesheet,
   and the absolute /css/... path resolves in both contexts.

   Drop Moderniz.woff2 into src/Umbraco.Custom/wwwroot/css/assets/fonts/. Until
   it is present the stack falls back to Inter Tight, so the title block stays
   readable — it just loses the display voice. */
@font-face {
  font-family: "Moderniz";
  src: url("/css/assets/fonts/Moderniz.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
     BLOCK BACKGROUND STYLES — PassiveTask hero fields
     --------------------------------------------------------------------------
     This site does not use the flat-colour token path. Its six styles are
     tessellated / plated fields, so the :is(section, header)[data-bg="bgstyle-NN"] rules are
     overridden further down — the escape hatch documented in _backgrounds.css.
     Each override declares its own --bg-tone, which is what every adaptive
     surface reads.

     The --bg-NN tokens below stay as the flat fallback: what paints if the
     tessellation asset fails to load, and what the backoffice picker swatches
     approximate.
     ========================================================================== */
  --bg-01: var(--pt-blue-50);        --bg-01-fg: var(--text-strong);
  --bg-02: var(--pt-warm-white);     --bg-02-fg: var(--text-strong);
  --bg-03: var(--pt-elegant-blue);   --bg-03-fg: var(--pt-white);
  --bg-04: var(--pt-black-charcoal); --bg-04-fg: var(--pt-white);
  --bg-05: var(--pt-black-charcoal); --bg-05-fg: var(--pt-white);

  --bg-05-pattern: none;
  --bg-05-pattern-size: auto;

  --fg-dark:  var(--text-strong);
  --fg-light: var(--pt-white);

  /* ==========================================================================
     PASSIVETASK BRAND PALETTE (--pt-*)
     --------------------------------------------------------------------------
     Values read from the rendered "Hero background patterns" design canvas.
     ========================================================================== */
  --pt-white:          #ffffff;
  --pt-elegant-blue:   #1a417e;
  --pt-blue-700:       #1a417e;   /* tessellation blue on light fields */
  --pt-blue-200:       #c3d4ee;   /* seam-stack middle band pattern */
  --pt-blue-100:       #dde6f1;   /* chevron-ladder tessellation */
  --pt-blue-50:        #eef3f9;   /* 01 blueprint-seam ground */
  --pt-blue-edge:      #dde6f1;   /* 01 hairline field edge */
  --pt-warm-white:     #fefbf9;   /* 02 warm-report ground */
  --pt-warm-edge:      #efe6e0;   /* 02 hairline field edge */
  --pt-concrete:       #f4f8fb;
  --pt-misty-ice:      #d5dfe5;
  --pt-mist-100:       #b8c4cc;   /* eyebrow on the blue fields */
  --pt-cadet-gray:     #96a5af;
  --pt-black-charcoal: #161a1f;
  --pt-plate-deep:     #081936;   /* plate-shift fill */
  --pt-flesh-ochre:    #fd5927;
  --pt-ochre-deep:     #e64b1e;   /* subheadline on the light fields */
  --text-strong:       #161a1f;
  --pt-text-body:      #3b434d;

  /* Type. Moderniz is the display face (eyebrow + headline); Inter Tight
     carries the subheadline and body. Scoped to the title block rather than
     swapped in as --font-heading, so ordinary in-content headings are
     untouched. */
  --pt-font-display: "Moderniz", "Inter Tight", system-ui, sans-serif;
  --pt-font-sans:    "Inter Tight", system-ui, sans-serif;

  /* Tessellation + brandmark. Absolute /css/... paths so they resolve both on
     the live site (proxied by the Next /css/[...path] route) and inside the
     backoffice preview, where the theme is adopted into a shadow DOM and a
     relative URL would resolve against the backoffice document.
     If an asset is missing the mask yields nothing and the style falls back to
     its flat --bg-NN field. */
  --pt-pattern-url:   url("/css/assets/pattern-small.svg");
  --pt-pattern-size:  240px 240px;
  --pt-brandmark-url: url("/css/assets/brandmark-inverted.png");


  /* ========================================================================
     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);

  /* Light-nav style (Settings > "Use Light Nav Style"): the solid/scrolled bar
   * becomes the brand's very-dark navy with white links + light logo; over a
   * bleeding page-header hero it goes transparent. See the light-nav rules in
   * the frontend base.css. */
  --header-dark-bg:           var(--color-theme-navy-dark);
  --header-dark-border:       color-mix(in srgb, var(--color-white) 12%, transparent);

  --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 ‾‾‾
   The unified button (.btn--primary / .btn--secondary / .btn--link, from
   components/ui/Button.tsx) plus the legacy .btn-primary / .btn-secondary
   aliases. Primary is the ochre plate. Secondary's fill/border are painted per
   background ground through the --cta-secondary-* variables (see the per-ground
   block below), so the rule here only adds the shared radius / weight / hover
   flourish and must NOT hard-set the secondary background or it would clobber
   the per-ground ghost/frosted treatment. */
.btn--primary, .btn-primary, button.primary {
  /* Partial-transparent orange fill (was the solid ochre plate). Border matches
     the fill so no solid-ochre ring shows through from base.css. */
  background-color: rgba(253, 89, 39, 0.85);
  border-color: rgba(253, 89, 39, 0.85);
  color: var(--button-primary-foreground);
  border-radius: var(--button-border-radius);
  font-weight: var(--button-font-weight);
  letter-spacing: -0.01em;
  /* Reduced glow — a soft, close shadow rather than the wide orange halo. */
  box-shadow: 0 2px 8px rgba(253, 89, 39, 0.14);
  transition: var(--button-transition);
}
.btn--primary:hover, .btn-primary:hover, button.primary:hover {
  /* Distinctly darker orange on hover so it reads clearly against the
     partial-transparent base fill. */
  background-color: #c8400f;
  border-color: #c8400f;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(253, 89, 39, 0.2);
}
/* Legacy flat secondary (kept for any remaining .btn-secondary markup). */
.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);
}
/* Unified secondary: shared flourish only; paint comes from base + per-ground vars. */
.btn--secondary {
  border-radius: var(--button-border-radius);
  font-weight: var(--button-font-weight);
  transition: var(--button-transition);
}
.btn--secondary:hover { 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
   ============================================================================ */

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


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

/* Section background variants */

/* Legacy aliases kept for existing content. */

/* ‾‾‾ 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. */

/* ----------------------------------------------------------------------------
   Tone-adaptive content rules.

   These replace the old per-variant selector lists. Every value derives from
   the section's own `color`, so a style that changes tone — or a new style
   added later — is handled with no edit here. That matters on this site in
   particular: styles 03 and 04 read dark even though they sit in the base
   theme's light half, and the old lists had them grouped with the light
   backgrounds (navy links on a navy field).
   ------------------------------------------------------------------------- */

/* Muted supporting text: the section's own colour, softened. */
:is(section, header)[data-bg] .text-muted-foreground { color: var(--on-bg-muted); }

/* Links: inherit the band's foreground rather than being pinned navy/white.
   The CTA band's own buttons (.cta-btn--primary solid + .cta-btn--secondary
   ghost) are buttons, not editorial links — they carry their own per-ground
   colours, so they are excluded here. */
:is(section, header)[data-bg] a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.nav-cta) {
  color: currentColor;
  text-decoration: underline;
}

/* The ochre eyebrow/emphasis reads correctly on every PassiveTask field, light
   or dark, so it no longer needs a per-tone override. */
:is(section, header)[data-bg] {
  --editorial-eyebrow-color: var(--color-theme-ochre);
  --editorial-em-color:      var(--color-theme-ochre);
}

/* Padding scales */
:is(section, header)[data-pad="none"]     { padding-block: 0; }
:is(section, header)[data-pad="compact"]  { padding-block: clamp(2.5rem, 4vw, 4rem); }
:is(section, header)[data-pad="normal"]   { padding-block: clamp(3rem, 5vw, 5.5rem); }
:is(section, header)[data-pad="spacious"] { padding-block: clamp(4rem, 7vw, 8rem); }

/* ============================================================================
   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 {
  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 {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

.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;
}

/* ============================================================================
   PASSIVETASK HERO FIELDS — the six background grounds
   ----------------------------------------------------------------------------
   Ported from the PassiveTask "Hero Backgrounds" design spec onto the shared
   background system, so every block in the library can carry these grounds, not
   just heroes.

   The spec numbers the grounds 00–05:
       00 · Clean white       → the "None" option (bgstyle-00, painted nothing;
                                 the page's white IS the clean-white ground)
       01 · Blueprint seam    → blue-50 ground, navy blueprint bounded by a 115°
                                 ochre seam (light)
       02 · Warm report       → warm off-white, 3px ochre top rule (light)
       03 · Elegant blue      → flat brand navy (dark)
       04 · Charcoal blueprint→ charcoal, faint white tessellation (dark)
       05 · Charcoal seam     → charcoal, white blueprint bounded by an ochre
                                 seam (dark)

   Surfaces available per section, painted in this order:
       ::before -> .section-layer--1 -> --2 -> --3 -> ::after -> content
   The layers are rendered by Section for every block and stay invisible unless
   a style below paints them. Here ::before carries the tessellation and ::after
   the ochre seam / top rule.

   TONE: 01 and 02 are light, 03–05 are dark. That matches the design's split, so
   every ground declares its own --bg-tone and all CSS-level adaptation follows
   the design rather than the style number.
   ============================================================================ */

/* bgstyle-00 is the transparent "None" style and paints nothing, so it is
   excluded — it needs no stacking context at all.

   `:not(.sticky)` matters: this selector is (0,3,1) and would otherwise beat
   Tailwind's `.sticky` (0,1,0) and pin AnchorNavBlock, which renders its
   Section as `position: sticky`. A sticky element already establishes a
   containing block for the decoration layers, so it needs nothing from us. */
:is(section, header)[data-bg^="bgstyle-"]:not([data-bg="bgstyle-00"]):not(.sticky) {
  position: relative;
}
:is(section, header)[data-bg^="bgstyle-"]:not([data-bg="bgstyle-00"]) {
  /* Required so the z-index:-1 decoration layers paint above the section's own
     background instead of disappearing behind it. */
  isolation: isolate;
}

/* No ground bleeds outside its section box — every layer stays within `inset: 0`
   — so overflow:hidden is deliberately NOT applied here. Blanket clipping would
   turn every section into a scroll container and break the sticky table header
   in TableBlock. (Heroes clip via their own `overflow-hidden` class regardless.) */
:is(section, header)[data-bg^="bgstyle-"]:not([data-bg="bgstyle-00"])::before,
:is(section, header)[data-bg^="bgstyle-"]:not([data-bg="bgstyle-00"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Full-field tessellation — only 04 fills the whole field (96px grid per spec). */
:is(section, header)[data-bg="bgstyle-04"]::before {
  -webkit-mask-image: var(--pt-pattern-url);
  mask-image: var(--pt-pattern-url);
  -webkit-mask-size: 96px 96px;
  mask-size: 96px 96px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-position: 0 0;
}

/* Tessellation clipped to the RIGHT of the 115deg seam (01 + 05, left copy). */
:is(section, header)[data-bg="bgstyle-01"]::before,
:is(section, header)[data-bg="bgstyle-05"]::before {
  -webkit-mask-image: var(--pt-pattern-url), linear-gradient(115deg, transparent 55%, #000 55%);
  mask-image: var(--pt-pattern-url), linear-gradient(115deg, transparent 55%, #000 55%);
  -webkit-mask-size: 96px 96px, 100% 100%;
  mask-size: 96px 96px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Single ochre seam at 55%. */
:is(section, header)[data-bg="bgstyle-01"]::after {
  background: linear-gradient(115deg, transparent calc(55% - 1px), rgba(253, 89, 39, .85) 55%, transparent calc(55% + 2px));
}

/* 01 · Blueprint seam — blue-50 ground, navy blueprint bounded to the right of a
   115deg ochre seam (light). */
:is(section, header)[data-bg="bgstyle-01"] {
  background-color: var(--pt-blue-50);
  color: var(--text-strong);
  border: 1px solid var(--pt-blue-edge);
  --bg-tone: light;
}
:is(section, header)[data-bg="bgstyle-01"]::before {
  background-color: var(--pt-elegant-blue);
  opacity: .06;
}

/* 02 · Warm report — warm off-white ground, 3px ochre rule pinned to the top
   edge (light). The rule rides the ::after layer as a 3px band, so the shared
   layer's inset:0 needs no override. */
:is(section, header)[data-bg="bgstyle-02"] {
  background-color: var(--pt-warm-white);
  color: var(--text-strong);
  border: 1px solid var(--pt-warm-edge);
  --bg-tone: light;
}
:is(section, header)[data-bg="bgstyle-02"]::after {
  background: linear-gradient(180deg, var(--pt-flesh-ochre) 0, var(--pt-flesh-ochre) 3px, transparent 3px);
}

/* 03 · Elegant blue — flat brand navy (dark). */
:is(section, header)[data-bg="bgstyle-03"] {
  background-color: var(--pt-elegant-blue);
  color: var(--pt-white);
  border: 1px solid rgba(255, 255, 255, .08);
  --bg-tone: dark;
}

/* 04 · Charcoal blueprint — charcoal ground, faint white tessellation filling the
   whole field (dark). */
:is(section, header)[data-bg="bgstyle-04"] {
  background-color: var(--pt-black-charcoal);
  color: var(--pt-white);
  border: 1px solid rgba(255, 255, 255, .08);
  --bg-tone: dark;
}
:is(section, header)[data-bg="bgstyle-04"]::before {
  background-color: var(--pt-white);
  opacity: .05;
}

/* 05 · Charcoal seam — charcoal ground, white blueprint bounded to the right of a
   115deg ochre seam (dark). */
:is(section, header)[data-bg="bgstyle-05"] {
  background-color: var(--pt-black-charcoal);
  color: var(--pt-white);
  border: 1px solid rgba(255, 255, 255, .08);
  --bg-tone: dark;
}
:is(section, header)[data-bg="bgstyle-05"]::before {
  background-color: var(--pt-white);
  opacity: .06;
}
:is(section, header)[data-bg="bgstyle-05"]::after {
  background: linear-gradient(115deg, transparent calc(55% - 1px), rgba(253, 89, 39, .85) 55%, transparent calc(55% + 2px));
}

/* ============================================================================
   ALIGNMENT — the seam follows the copy so the headline lands on clear ground
   ----------------------------------------------------------------------------
   The spec renders every ground three ways:

     Left   (A) copy left,  seam at 55%, blueprint on the right.
     Center (B) copy centred, seam slides right to 72% so it clears the copy.
     Right  (C) copy right,  blueprint narrows to a strip on the far left — seam
                at 24% on the blue field (01), 38% on the charcoal field (05).

   Only 01 and 05 carry a seam, so only they need geometry here. Every other
   ground just re-places the copy, which the shared data-align + `.hero-body`
   margins already handle — no field change. (This is why the previous universal
   scaleX(-1) mirror is gone: the spec gives C its own explicit seam positions
   rather than a mirror of the left layout, and a transform would create a
   containing block that traps position:fixed descendants.)
   ============================================================================ */

/* 01 — B: seam + tessellation clip slide to 72% */
:is(section, header)[data-bg="bgstyle-01"][data-align="center"]::before {
  -webkit-mask-image: var(--pt-pattern-url), linear-gradient(115deg, transparent 72%, #000 72%);
  mask-image: var(--pt-pattern-url), linear-gradient(115deg, transparent 72%, #000 72%);
}
:is(section, header)[data-bg="bgstyle-01"][data-align="center"]::after {
  background: linear-gradient(115deg, transparent calc(72% - 1px), rgba(253, 89, 39, .85) 72%, transparent calc(72% + 2px));
}
/* 01 — C: blueprint strip on the far left, seam at 24% */
:is(section, header)[data-bg="bgstyle-01"][data-align="right"]::before {
  -webkit-mask-image: var(--pt-pattern-url), linear-gradient(115deg, #000 24%, transparent 24%);
  mask-image: var(--pt-pattern-url), linear-gradient(115deg, #000 24%, transparent 24%);
}
:is(section, header)[data-bg="bgstyle-01"][data-align="right"]::after {
  background: linear-gradient(115deg, transparent calc(24% - 1px), rgba(253, 89, 39, .85) 24%, transparent calc(24% + 2px));
}

/* 05 — B: seam + tessellation clip slide to 72% */
:is(section, header)[data-bg="bgstyle-05"][data-align="center"]::before {
  -webkit-mask-image: var(--pt-pattern-url), linear-gradient(115deg, transparent 72%, #000 72%);
  mask-image: var(--pt-pattern-url), linear-gradient(115deg, transparent 72%, #000 72%);
}
:is(section, header)[data-bg="bgstyle-05"][data-align="center"]::after {
  background: linear-gradient(115deg, transparent calc(72% - 1px), rgba(253, 89, 39, .85) 72%, transparent calc(72% + 2px));
}
/* 05 — C: blueprint strip on the far left, seam at 38% */
:is(section, header)[data-bg="bgstyle-05"][data-align="right"]::before {
  -webkit-mask-image: var(--pt-pattern-url), linear-gradient(115deg, #000 38%, transparent 38%);
  mask-image: var(--pt-pattern-url), linear-gradient(115deg, #000 38%, transparent 38%);
}
:is(section, header)[data-bg="bgstyle-05"][data-align="right"]::after {
  background: linear-gradient(115deg, transparent calc(38% - 1px), rgba(253, 89, 39, .85) 38%, transparent calc(38% + 2px));
}

/* ============================================================================
   UNIVERSAL TITLE BLOCK — eyebrow / headline / subheadline / intro
   ----------------------------------------------------------------------------
   ContentHeader is the one header every block renders, so setting it here gives
   the whole library the PassiveTask voice rather than just the heroes.

   Structure note: ContentHeader emits the subheadline as an <em> inside the
   headline element. The design stacks the two lines, so the <em> is promoted to
   display:block here — that is a presentation change only, and keeps the
   heading a single element for assistive tech and for the document outline.
   ============================================================================ */

/* Eyebrow — Moderniz, 12px, wide tracking, uppercase. The design has no leading
   rule, so the shared eyebrow bar is suppressed, and Moderniz is a display face
   that only ships one weight, so the shared 800 is dropped back to normal. */
.content-header .section-eyebrow {
  font-family: var(--pt-font-display);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Consume the token here rather than leaning on base.css's declaration, so
     the per-field colours hold wherever this sheet is loaded — including the
     backoffice preview, where the cascade is assembled differently. */
  color: var(--content-header-eyebrow-color, currentColor);
}
.content-header .section-eyebrow::before { content: none; }

/* Headline — Moderniz, uppercase, tight leading. Fluid between the 33px and
   39px the design uses across the nine fields. */
.content-header .content-header-headline {
  font-family: var(--pt-font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.4375rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* Subheadline — Inter Tight 800, its own line, never uppercase or italic. */
.content-header .content-header-headline em {
  display: block;
  margin-top: .625rem;
  font-family: var(--pt-font-sans);
  font-size: clamp(1.625rem, 2.9vw, 2.1875rem);
  font-weight: 800;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  color: var(--content-header-emphasis-color, var(--pt-flesh-ochre));
}

/* Intro — Inter Tight, 17px. The shared pull-lead rule adds an accent bar and
   serif italic; the design uses neither. */
.content-header .pull-lead {
  padding: 0;
  border: 0;
  font-family: var(--pt-font-sans);
  font-size: 1.0625rem;
  font-style: normal;
  line-height: 1.45;
  color: var(--content-header-intro-color, inherit);
}

/* --- Per-field title colours ------------------------------------------------
   The design tunes eyebrow / subheadline / intro colour per background so each
   field keeps its contrast. Set as ContentHeader's own tokens, so any block
   using that header picks them up.
   ------------------------------------------------------------------------- */
:is(section, header)[data-bg="bgstyle-01"],
:is(section, header)[data-bg="bgstyle-02"] {
  --content-header-eyebrow-color: var(--pt-elegant-blue);
  --content-header-emphasis-color: var(--pt-ochre-deep);
  --content-header-intro-color: var(--pt-text-body);
}
:is(section, header)[data-bg="bgstyle-03"],
:is(section, header)[data-bg="bgstyle-04"],
:is(section, header)[data-bg="bgstyle-05"] {
  --content-header-eyebrow-color: var(--pt-mist-100);
  --content-header-emphasis-color: var(--pt-flesh-ochre);
  --content-header-intro-color: var(--pt-misty-ice);
}

/* --- Bridge to the hero component's colour variables ------------------------
   HeroBlock renders the eyebrow / subheadline / headline / intro colours as
   inline `color: var(--hero-*-color, <fallback>)`. Inline colour beats a
   stylesheet, so without this bridge the component's brand-neutral fallbacks
   (primary ochre / the fg token) would override the per-field colours set just
   above. Re-publishing the same per-field values as `--hero-*` lets the design's
   exact colours win on every field — flat OR image-backed — with no !important.
   Headline tracks the field's own text colour (currentColor). Scoped to the
   five painted fields so bgstyle-00 keeps the component defaults.
   ------------------------------------------------------------------------- */
:is(section, header)[data-bg="bgstyle-01"], :is(section, header)[data-bg="bgstyle-02"], :is(section, header)[data-bg="bgstyle-03"],
:is(section, header)[data-bg="bgstyle-04"], :is(section, header)[data-bg="bgstyle-05"] {
  --hero-eyebrow-color: var(--content-header-eyebrow-color);
  --hero-emphasis-color: var(--content-header-emphasis-color);
  --hero-intro-color: var(--content-header-intro-color);
  --hero-headline-color: currentColor;
}

/* ============================================================================
   IMAGE-BACKED HERO ("D") — the photo is masked into each field's own geometry
   ----------------------------------------------------------------------------
   HeroBlock renders, on an image hero, a `.hero-media` photo layer (fed by
   --hero-bg-image), three empty `.hero-media-fx` paint surfaces above it, and a
   `.hero-media-overlay` carrying the shared/brand-neutral ADA overlay. On the
   PassiveTask fields we hide that generic overlay and rebuild each field's exact
   "D" treatment on the fx layers. Per the spec, D is a FULL-BLEED brand photo
   (no masking) under a tone-matched left-to-right gradient wash that fades from
   the copy side, so the foreground keeps contrast while the image stays legible
   on the far side. 02 adds its 3px ochre top rule and 01 / 05 add their ochre
   seam ABOVE the photo. The flat ::before/::after grounds sit behind the photo
   (z-index:-1) and are covered. Centre (B) slides the seam right; right (C)
   flips the wash and moves the seam to the copy side.
   ============================================================================ */

/* Media layers — positioned here too so the backoffice preview (which adopts
   this theme) never depends on a Tailwind utility being emitted for the bundle. */
:is(section, header) .hero-media,
:is(section, header) .hero-media-fx,
:is(section, header) .hero-media-overlay { position: absolute; inset: 0; pointer-events: none; }
:is(section, header) .hero-media-overlay > * { position: absolute; inset: 0; }
:is(section, header) .hero-media { background: var(--hero-bg-image) center / cover no-repeat; background-position: var(--hero-bg-pos, center center); }

/* PassiveTask owns the treatment: drop the generic overlay and the generic
   white scrim box the component would put behind the copy — but keep the copy
   held to the field's own measure (below) so the headline clears the seam. */
:is(section, header)[data-bg^="bgstyle-"][data-has-image] .hero-media-overlay { display: none; }
:is(section, header)[data-bg^="bgstyle-"][data-has-image] .hero-body {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  max-width: var(--hero-measure, none) !important;
}

/* The flat ::after (top decoration) always moves ABOVE the photo, so drop it and
   repaint on the fx layers per field. */
:is(section, header)[data-bg^="bgstyle-"][data-has-image]::after { content: none; }

/* ============================================================================
   COPY MEASURE — per-field max-width so the headline never crosses the seam
   ----------------------------------------------------------------------------
   The design gives every field its own copy width. `--hero-measure` publishes it
   per field; `.hero-body` (the block HeroBlock wraps the eyebrow/headline/intro/
   CTAs in) consumes it for flat AND image heroes. Centre re-centres the measure;
   right (mirrored) pushes it to the clear side.
   ============================================================================ */
/* 01 / 05 carry a 55% seam, so the copy is held tighter to clear it; the
   seamless grounds (02 warm, 03 blue, 04 charcoal) get a more generous measure. */
:is(section, header)[data-bg="bgstyle-01"] { --hero-measure: 560px; }
:is(section, header)[data-bg="bgstyle-02"] { --hero-measure: 720px; }
:is(section, header)[data-bg="bgstyle-03"] { --hero-measure: 640px; }
:is(section, header)[data-bg="bgstyle-04"] { --hero-measure: 760px; }
:is(section, header)[data-bg="bgstyle-05"] { --hero-measure: 560px; }

:is(section, header)[data-bg^="bgstyle-"] .hero-body { max-width: var(--hero-measure, none); }
:is(section, header)[data-bg^="bgstyle-"][data-align="center"] .hero-body { margin-inline: auto; }
:is(section, header)[data-bg^="bgstyle-"][data-align="right"] .hero-body { margin-left: auto; margin-right: 0; }
/* On image heroes the measure/margins must beat the component's inline scrim box. */
:is(section, header)[data-bg^="bgstyle-"][data-has-image][data-align="center"] .hero-body { margin-inline: auto !important; }
:is(section, header)[data-bg^="bgstyle-"][data-has-image][data-align="right"] .hero-body { margin-left: auto !important; margin-right: 0 !important; }
:is(section, header)[data-bg^="bgstyle-"][data-has-image][data-align="left"] .hero-body { margin-inline: 0 !important; }

/* 01 — full photo under a concrete wash (light), ochre seam at 55% */
:is(section, header)[data-bg="bgstyle-01"][data-has-image] .hero-media-fx--1 {
  background: linear-gradient(90deg, rgba(244, 248, 251, .97) 0%, rgba(244, 248, 251, .92) 44%, rgba(244, 248, 251, .55) 78%, rgba(244, 248, 251, .20) 100%);
}
:is(section, header)[data-bg="bgstyle-01"][data-has-image] .hero-media-fx--2 {
  background: linear-gradient(115deg, transparent calc(55% - 1px), rgba(253, 89, 39, .85) 55%, transparent calc(55% + 2px));
}
:is(section, header)[data-bg="bgstyle-01"][data-align="center"][data-has-image] .hero-media-fx--2 {
  background: linear-gradient(115deg, transparent calc(72% - 1px), rgba(253, 89, 39, .85) 72%, transparent calc(72% + 2px));
}
:is(section, header)[data-bg="bgstyle-01"][data-align="right"][data-has-image] .hero-media-fx--1 {
  background: linear-gradient(270deg, rgba(244, 248, 251, .97) 0%, rgba(244, 248, 251, .92) 44%, rgba(244, 248, 251, .55) 78%, rgba(244, 248, 251, .20) 100%);
}
:is(section, header)[data-bg="bgstyle-01"][data-align="right"][data-has-image] .hero-media-fx--2 {
  background: linear-gradient(115deg, transparent calc(24% - 1px), rgba(253, 89, 39, .85) 24%, transparent calc(24% + 2px));
}

/* 02 — full photo under a warm wash (light), 3px ochre top rule */
:is(section, header)[data-bg="bgstyle-02"][data-has-image] .hero-media-fx--1 {
  background: linear-gradient(90deg, rgba(255, 241, 233, .95) 0%, rgba(255, 241, 233, .90) 44%, rgba(255, 241, 233, .34) 78%, rgba(255, 241, 233, .06) 100%);
}
:is(section, header)[data-bg="bgstyle-02"][data-align="right"][data-has-image] .hero-media-fx--1 {
  background: linear-gradient(270deg, rgba(255, 241, 233, .95) 0%, rgba(255, 241, 233, .90) 44%, rgba(255, 241, 233, .34) 78%, rgba(255, 241, 233, .06) 100%);
}
:is(section, header)[data-bg="bgstyle-02"][data-has-image] .hero-media-fx--2 {
  background: linear-gradient(180deg, var(--pt-flesh-ochre) 0, var(--pt-flesh-ochre) 3px, transparent 3px);
}

/* 03 — full photo under a navy wash (dark) */
:is(section, header)[data-bg="bgstyle-03"][data-has-image] .hero-media-fx--1 {
  background: linear-gradient(90deg, rgba(26, 65, 126, .92) 0%, rgba(26, 65, 126, .86) 44%, rgba(26, 65, 126, .32) 78%, rgba(26, 65, 126, .06) 100%);
}
:is(section, header)[data-bg="bgstyle-03"][data-align="right"][data-has-image] .hero-media-fx--1 {
  background: linear-gradient(270deg, rgba(26, 65, 126, .92) 0%, rgba(26, 65, 126, .86) 44%, rgba(26, 65, 126, .32) 78%, rgba(26, 65, 126, .06) 100%);
}

/* 04 — full photo under a charcoal wash (dark) */
:is(section, header)[data-bg="bgstyle-04"][data-has-image] .hero-media-fx--1 {
  background: linear-gradient(90deg, rgba(22, 26, 31, .92) 0%, rgba(22, 26, 31, .86) 44%, rgba(22, 26, 31, .32) 78%, rgba(22, 26, 31, .06) 100%);
}
:is(section, header)[data-bg="bgstyle-04"][data-align="right"][data-has-image] .hero-media-fx--1 {
  background: linear-gradient(270deg, rgba(22, 26, 31, .92) 0%, rgba(22, 26, 31, .86) 44%, rgba(22, 26, 31, .32) 78%, rgba(22, 26, 31, .06) 100%);
}

/* 05 — full photo under a charcoal wash (dark), ochre seam at 51% */
:is(section, header)[data-bg="bgstyle-05"][data-has-image] .hero-media-fx--1 {
  background: linear-gradient(90deg, rgba(22, 26, 31, .92) 0%, rgba(22, 26, 31, .86) 44%, rgba(22, 26, 31, .32) 78%, rgba(22, 26, 31, .06) 100%);
}
:is(section, header)[data-bg="bgstyle-05"][data-has-image] .hero-media-fx--2 {
  background: linear-gradient(115deg, transparent calc(51% - 1px), rgba(253, 89, 39, .85) 51%, transparent calc(51% + 2px));
}
:is(section, header)[data-bg="bgstyle-05"][data-align="center"][data-has-image] .hero-media-fx--2 {
  background: linear-gradient(115deg, transparent calc(72% - 1px), rgba(253, 89, 39, .85) 72%, transparent calc(72% + 2px));
}
:is(section, header)[data-bg="bgstyle-05"][data-align="right"][data-has-image] .hero-media-fx--1 {
  background: linear-gradient(270deg, rgba(22, 26, 31, .92) 0%, rgba(22, 26, 31, .86) 44%, rgba(22, 26, 31, .32) 78%, rgba(22, 26, 31, .06) 100%);
}
:is(section, header)[data-bg="bgstyle-05"][data-align="right"][data-has-image] .hero-media-fx--2 {
  background: linear-gradient(115deg, transparent calc(38% - 1px), rgba(253, 89, 39, .85) 38%, transparent calc(38% + 2px));
}

/* ============================================================================
   FEATURE BLOCK — "Features · Section Layouts"
   ----------------------------------------------------------------------------
   Six grounds (data-bg="bgstyle-00…05") from the PassiveTask "Features — Section
   Layouts" spec, each in the four shared layout variants driven by data-align:
   A left · B centre · C right · D left over a full-bleed image.

   Grounds → field × item archetype (bgstyle-NN = spec ground NN):
     00 · None (transparent) · Checklist   (light)
     01 · Warm off-white      · Numbered    (light)
     02 · Blue-50             · Cards        (light, navy icon tiles)
     03 · Brand Blue          · Icon rows    (dark, ochre tiles, no card)
     04 · Elegant Blue + pattern · Cards     (dark, ochre tiles, blue-800 cards)
     05 · Slate               · Numbered    (dark)

   Everything here is scoped to `.block-feature-block`, so it OVERRIDES the
   shared hero field paint for this block only — the escape hatch documented in
   _backgrounds.css. Two orthogonal dimensions:

     · the FIELD  — background + tone + the --feature-* colour vars the
                    brand-neutral component reads (set per bgstyle);
     · the ITEMS  — presentation archetype (checklist / numbered / cards /
                    icon rows), applied by grouping the styles that share it.

   Type sizes stay on the existing responsive clamp scale (they already peak at
   the spec's fixed sizes); the spec's grounds, colours, archetypes, layout and
   image treatments are what change.

   Local tokens (values from the design canvas) — kept here so the block is
   self-contained and a missing global token can't blank the field.
   ============================================================================ */
:root {
  --pt-neutral-900: #1b2027;   /* 05 slate field */
  --pt-neutral-800: #22272e;   /* reserved dark surface */
  --pt-neutral-700: #3a424c;   /* reserved pattern ink */
  --pt-neutral-300: #c7ced6;   /* intro/body on dark fields */
  --pt-blue-500:    #3c69b0;   /* 04 blueprint pattern ink */
  --pt-blue-800:    #12305c;   /* 03 brand-blue field · 04 card fill */
  --pt-warm-white:  #fefbf9;   /* 01 warm field */
  --feature-check:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.3 14.3l-4-4 1.4-1.4 2.6 2.6 5.7-5.7 1.4 1.4z'/%3E%3C/svg%3E");
}

/* ── Field-decoration reset ──────────────────────────────────────────────────
   Kill the shared hero-field pseudo/layer paint that would otherwise show
   through on the feature block; each style re-enables only what it needs. */
.block-feature-block[data-bg]::before,
.block-feature-block[data-bg]::after {
  content: none;
  background: none;
  -webkit-mask: none;
  mask: none;
}
.block-feature-block[data-bg] .section-layer {
  background: none;
  -webkit-mask: none;
  mask: none;
  clip-path: none;
  opacity: 1;
}

/* ── Layout scaffold (shared) ────────────────────────────────────────────── */
.block-feature-block { text-align: left; }
.block-feature-block .feature-block { width: 100%; }

.block-feature-block .feature-block--split {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.block-feature-block .feature-block-body { min-width: 0; text-align: left; }
.block-feature-block .feature-block-items { min-width: 0; }

/* C · right — content column moves to the right, items to the left. */
.block-feature-block[data-align="right"] .feature-block--split {
  grid-template-columns: 1fr 0.86fr;
}
.block-feature-block[data-align="right"] .feature-block-body { order: 2; }
.block-feature-block[data-align="right"] .feature-block-items { order: 1; }

/* B · centre — content stacked on top, items grid below. */
.block-feature-block[data-align="center"] .feature-block--center .feature-block-body {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.block-feature-block[data-align="center"] .feature-intro { max-width: 520px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .block-feature-block .feature-block--split {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  .block-feature-block[data-align="right"] .feature-block-body { order: 1; }
  .block-feature-block[data-align="right"] .feature-block-items { order: 2; }
}

/* ── Content column typography ───────────────────────────────────────────── */
.block-feature-block .feature-eyebrow {
  font-family: var(--pt-font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.16em;
  margin: 0 0 12px;
  color: var(--feature-eyebrow-color, var(--pt-elegant-blue));
}
.block-feature-block .feature-heading {
  font-family: var(--pt-font-display);
  text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--feature-heading-color, var(--pt-black-charcoal));
}
.block-feature-block .feature-subhead {
  font-family: var(--pt-font-sans);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 29px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 8px;
  color: var(--feature-subhead-color, var(--pt-flesh-ochre));
}
.block-feature-block .feature-intro {
  font-size: 15px;
  line-height: 1.6;
  margin: 20px 0 28px;
  max-width: 440px;
  color: var(--feature-intro-color, var(--pt-text-body));
}
.block-feature-block .feature-intro :where(p) { margin: 0; }
.block-feature-block .feature-cta { margin-top: 4px; }

/* ── Items — canonical defaults ──────────────────────────────────────────── */
.block-feature-block .feature-block-grid { display: grid; gap: 22px; }
.block-feature-block .feature-item { position: relative; }
.block-feature-block .feature-item-index { display: none; }
.block-feature-block .feature-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-sm, 2px);
  margin-bottom: 16px;
  background: var(--feature-icon-bg, var(--pt-flesh-ochre));
  color: var(--feature-icon-fg, #ffffff);
}
.block-feature-block .feature-item-icon > svg { width: 20px; height: 20px; }
.block-feature-block .feature-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pt-font-sans);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--feature-title-color, var(--pt-black-charcoal));
}
.block-feature-block .feature-item-desc {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--feature-desc-color, var(--pt-text-body));
}
.block-feature-block .feature-item-new {
  background: var(--pt-flesh-ochre) !important;
  color: #fff !important;
}
.block-feature-block .feature-skeleton-line {
  height: 0.7em;
  border-radius: 2px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.block-feature-block .feature-item--skeleton .feature-item-desc { margin-top: 6px; }

/* ── Presentation archetype: CHECKLIST (00) — check glyph + text ─────────── */
.block-feature-block[data-bg="bgstyle-00"] .feature-block-grid { grid-template-columns: 1fr; gap: 22px; }
.block-feature-block[data-bg="bgstyle-00"] .feature-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.block-feature-block[data-bg="bgstyle-00"] .feature-item-icon {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border-radius: 0;
  background: var(--feature-icon-bg, var(--pt-flesh-ochre));
  -webkit-mask: var(--feature-check) center / contain no-repeat;
  mask: var(--feature-check) center / contain no-repeat;
}
.block-feature-block[data-bg="bgstyle-00"] .feature-item-icon > svg { display: none; }

/* ── Presentation archetype: NUMBERED LIST (01 warm · 05 slate) ──────────── */
.block-feature-block[data-bg="bgstyle-01"] .feature-block-grid,
.block-feature-block[data-bg="bgstyle-05"] .feature-block-grid {
  grid-template-columns: 1fr;
  gap: 0;
}
.block-feature-block[data-bg="bgstyle-01"] .feature-item,
.block-feature-block[data-bg="bgstyle-05"] .feature-item {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid var(--feature-rule, rgba(22, 26, 31, 0.28));
}
/* 01 drops the rule above its first row; 05 keeps a rule on every row. */
.block-feature-block[data-bg="bgstyle-01"] .feature-item:first-child {
  border-top: none;
  padding-top: 0;
}
.block-feature-block[data-bg="bgstyle-01"] .feature-item-icon,
.block-feature-block[data-bg="bgstyle-05"] .feature-item-icon { display: none; }
.block-feature-block[data-bg="bgstyle-01"] .feature-item-index,
.block-feature-block[data-bg="bgstyle-05"] .feature-item-index {
  display: block;
  flex: none;
  width: 52px;
  font-family: var(--pt-font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--feature-index-color, var(--pt-flesh-ochre));
}

/* ── Presentation archetype: CARDS (02 light · 04 dark) ──────────────────── */
.block-feature-block[data-bg="bgstyle-02"] .feature-block-grid,
.block-feature-block[data-bg="bgstyle-04"] .feature-block-grid {
  grid-template-columns: repeat(var(--feature-grid-cols, 2), minmax(0, 1fr));
}
.block-feature-block[data-bg="bgstyle-02"] .feature-item,
.block-feature-block[data-bg="bgstyle-04"] .feature-item {
  padding: 26px;
  border-radius: var(--radius-md, 4px);
  background: var(--feature-card-bg, var(--pt-white));
  border: 1px solid var(--feature-card-border, var(--pt-misty-ice));
}
/* Light 02 cards carry a larger icon tile than the shared 40px default. */
.block-feature-block[data-bg="bgstyle-02"] .feature-item-icon {
  width: 52px;
  height: 52px;
}
.block-feature-block[data-bg="bgstyle-02"] .feature-item-icon > svg {
  width: 26px;
  height: 26px;
}

/* ── Presentation archetype: ICON ROWS (03) — 44px tile beside the text ───── */
.block-feature-block[data-bg="bgstyle-03"] .feature-block-grid { grid-template-columns: 1fr; }
.block-feature-block[data-bg="bgstyle-03"] .feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.block-feature-block[data-bg="bgstyle-03"] .feature-item-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
}
.block-feature-block[data-bg="bgstyle-03"] .feature-item-icon > svg { width: 22px; height: 22px; }

/* ── B · centre — per-archetype grids ────────────────────────────────────── */

/* checklist (00 B): three columns, rows stay icon + text */
.block-feature-block[data-align="center"][data-bg="bgstyle-00"] .feature-block-grid { grid-template-columns: repeat(var(--feature-grid-cols, 3), minmax(0, 1fr)); gap: 40px; }

/* numbered plates (01 B: 3-col · 05 B: 4-col): top-accent rule, centred */
.block-feature-block[data-align="center"][data-bg="bgstyle-01"] .feature-block-grid {
  grid-template-columns: repeat(var(--feature-grid-cols, 3), minmax(0, 1fr));
  gap: 56px;
}
.block-feature-block[data-align="center"][data-bg="bgstyle-05"] .feature-block-grid {
  grid-template-columns: repeat(var(--feature-grid-cols, 4), minmax(0, 1fr));
  gap: 56px; /* match the 01 (Light) centred numbered-plate gap */
}
.block-feature-block[data-align="center"][data-bg="bgstyle-01"] .feature-item,
.block-feature-block[data-align="center"][data-bg="bgstyle-05"] .feature-item {
  display: block;
  text-align: center;
  padding: 18px 0 0;
  border-top: 2px solid var(--feature-index-color, var(--pt-flesh-ochre));
}
.block-feature-block[data-align="center"][data-bg="bgstyle-01"] .feature-item-index,
.block-feature-block[data-align="center"][data-bg="bgstyle-05"] .feature-item-index {
  width: auto;
  font-size: 34px;
  margin-bottom: 12px;
}
.block-feature-block[data-align="center"][data-bg="bgstyle-01"] .feature-item-title,
.block-feature-block[data-align="center"][data-bg="bgstyle-05"] .feature-item-title { justify-content: center; }

/* cards (02 B: up to 4-col · 04 B: up to 3-col) — match the left-aligned card
   gap (canonical 22px), not the wide centred-grid gap the shared base falls back to. */
.block-feature-block[data-align="center"][data-bg="bgstyle-02"] .feature-block-grid { grid-template-columns: repeat(var(--feature-grid-cols, 4), minmax(0, 1fr)); gap: 22px; }
.block-feature-block[data-align="center"][data-bg="bgstyle-04"] .feature-block-grid { grid-template-columns: repeat(var(--feature-grid-cols, 3), minmax(0, 1fr)); gap: 22px; }
/* Centre alignment centres only the section header — the card CONTENT stays
   left-aligned (overrides the shared base, which centres 04 card items). */
.block-feature-block[data-align="center"][data-bg="bgstyle-02"] .feature-item,
.block-feature-block[data-align="center"][data-bg="bgstyle-04"] .feature-item {
  text-align: left;
  max-width: none;
  margin: 0;
}
.block-feature-block[data-align="center"][data-bg="bgstyle-04"] .feature-item-icon { margin: 0 0 14px; }

/* icon rows (03 B): up to three columns. Centre alignment centres only the
   section header — the card CONTENT stays left-aligned. */
.block-feature-block[data-align="center"][data-bg="bgstyle-03"] .feature-block-grid { grid-template-columns: repeat(var(--feature-grid-cols, 3), minmax(0, 1fr)); gap: 22px; /* match the 02 (Light) centred card gap */ }
.block-feature-block[data-align="center"][data-bg="bgstyle-03"] .feature-item {
  display: block;
  text-align: left;
  max-width: none;
  margin: 0;
}
.block-feature-block[data-align="center"][data-bg="bgstyle-03"] .feature-item-icon { margin: 0 0 14px; }

/* ── Per-ground FIELDS + COLOURS ─────────────────────────────────────────── */

/* 00 · None · Checklist (light) — transparent field, ochre checks */
.block-feature-block[data-bg="bgstyle-00"] {
  --bg-tone: light;
  --feature-eyebrow-color: var(--pt-elegant-blue);
  --feature-heading-color: var(--pt-black-charcoal);
  --feature-subhead-color: var(--pt-flesh-ochre);
  --feature-intro-color: var(--pt-text-body);
  --feature-title-color: var(--pt-black-charcoal);
  --feature-desc-color: var(--pt-text-body);
  --feature-icon-bg: var(--pt-flesh-ochre);
  --block-accent: var(--pt-flesh-ochre);
}

/* 01 · Light · Warm · Numbered */
.block-feature-block[data-bg="bgstyle-01"] {
  background: var(--pt-warm-white);
  --bg-tone: light;
  --feature-eyebrow-color: var(--pt-elegant-blue);
  --feature-heading-color: var(--pt-black-charcoal);
  --feature-subhead-color: var(--pt-flesh-ochre);
  --feature-intro-color: var(--pt-text-body);
  --feature-title-color: var(--pt-black-charcoal);
  --feature-desc-color: var(--pt-text-body);
  --feature-index-color: var(--pt-flesh-ochre);
  --feature-rule: rgba(22, 26, 31, 0.28);
  --block-accent: var(--pt-flesh-ochre);
}

/* 02 · Light · Blue-50 · Cards (white cards, navy icon tiles) */
.block-feature-block[data-bg="bgstyle-02"] {
  background: var(--pt-blue-50);
  --bg-tone: light;
  --feature-eyebrow-color: var(--pt-elegant-blue);
  --feature-heading-color: var(--pt-black-charcoal);
  --feature-subhead-color: var(--pt-flesh-ochre);
  --feature-intro-color: var(--pt-text-body);
  --feature-title-color: var(--pt-black-charcoal);
  --feature-desc-color: var(--pt-text-body);
  --feature-card-bg: var(--pt-white);
  --feature-card-border: var(--pt-misty-ice);
  --feature-icon-bg: var(--pt-elegant-blue);
  --block-accent: var(--pt-flesh-ochre);
}

/* 03 · Dark · Brand Blue · Icon rows (ochre tiles, no card) */
.block-feature-block[data-bg="bgstyle-03"] {
  background: var(--pt-blue-800);
  color: var(--pt-white);
  --bg-tone: dark;
  --feature-eyebrow-color: var(--pt-cadet-gray);
  --feature-heading-color: #ffffff;
  --feature-subhead-color: var(--pt-flesh-ochre);
  --feature-intro-color: var(--pt-neutral-300);
  --feature-title-color: #ffffff;
  --feature-desc-color: var(--pt-cadet-gray);
  --feature-icon-bg: var(--pt-flesh-ochre);
  --block-accent: var(--pt-flesh-ochre);
}

/* 04 · Dark · Elegant Blue · Pattern · Cards (ochre tiles, blue-800 cards) */
.block-feature-block[data-bg="bgstyle-04"] {
  background: var(--pt-elegant-blue);
  color: var(--pt-white);
  --bg-tone: dark;
  --feature-eyebrow-color: var(--pt-misty-ice);
  --feature-heading-color: #ffffff;
  --feature-subhead-color: var(--pt-flesh-ochre);
  --feature-intro-color: var(--pt-neutral-300);
  --feature-title-color: #ffffff;
  --feature-desc-color: var(--pt-misty-ice);
  --feature-card-bg: var(--pt-blue-800);
  --feature-card-border: rgba(255, 255, 255, 0.12);
  --feature-icon-bg: var(--pt-flesh-ochre);
  --block-accent: var(--pt-flesh-ochre);
}
/* Blueprint pattern wash over the elegant-blue ground (72px grid, 12%). */
.block-feature-block[data-bg="bgstyle-04"] .section-layer--1 {
  display: block;
  background: var(--pt-blue-500);
  -webkit-mask: var(--pt-pattern-url) 0 0 / 72px 72px repeat;
  mask: var(--pt-pattern-url) 0 0 / 72px 72px repeat;
  opacity: 0.12;
}

/* 05 · Dark · Slate · Numbered */
.block-feature-block[data-bg="bgstyle-05"] {
  background: var(--pt-neutral-900);
  --bg-tone: dark;
  --feature-eyebrow-color: var(--pt-cadet-gray);
  --feature-heading-color: #ffffff;
  --feature-subhead-color: var(--pt-flesh-ochre);
  --feature-intro-color: var(--pt-neutral-300);
  --feature-title-color: #ffffff;
  --feature-desc-color: var(--pt-cadet-gray);
  --feature-index-color: var(--pt-flesh-ochre);
  --feature-rule: rgba(255, 255, 255, 0.14);
  --block-accent: var(--pt-flesh-ochre);
}

/* ══ D · image — full-bleed photo, tone-matched scrim, frosted item cards ══
   The pattern layer is dropped; the scrim rides on .section-media-overlay. */
.block-feature-block[data-has-image] .section-layer { display: none; }
/* Lift the content above the absolutely-positioned media/overlay layers, or the
   photo scrim paints over the whole block and the copy vanishes. */
.block-feature-block[data-has-image] .feature-block { position: relative; z-index: 1; }
.block-feature-block[data-has-image] .section-media-overlay {
  background: var(--feature-d-overlay, linear-gradient(90deg, rgba(22, 26, 31, 0.82) 0%, rgba(22, 26, 31, 0.72) 45%, rgba(22, 26, 31, 0.35) 100%));
}

/* Per-ground scrim ramps (from the spec). */
.block-feature-block[data-bg="bgstyle-00"][data-has-image],
.block-feature-block[data-bg="bgstyle-02"][data-has-image] { --feature-d-overlay: linear-gradient(90deg, rgba(244, 248, 251, 0.97) 0%, rgba(244, 248, 251, 0.80) 42%, rgba(244, 248, 251, 0.08) 100%); }
.block-feature-block[data-bg="bgstyle-01"][data-has-image] { --feature-d-overlay: linear-gradient(90deg, rgba(254, 244, 239, 0.97) 0%, rgba(254, 244, 239, 0.80) 42%, rgba(254, 244, 239, 0.08) 100%); }
.block-feature-block[data-bg="bgstyle-03"][data-has-image] { --feature-d-overlay: linear-gradient(180deg, rgba(14, 34, 71, 0.80) 0%, rgba(14, 34, 71, 0.88) 100%); }
.block-feature-block[data-bg="bgstyle-04"][data-has-image] { --feature-d-overlay: linear-gradient(90deg, rgba(14, 34, 71, 0.92) 0%, rgba(14, 34, 71, 0.80) 42%, rgba(14, 34, 71, 0.42) 100%); }
.block-feature-block[data-bg="bgstyle-05"][data-has-image] { --feature-d-overlay: linear-gradient(180deg, rgba(22, 26, 31, 0.68) 0%, rgba(22, 26, 31, 0.78) 100%); }

/* 00 / 01 · the item list rides ONE frosted card over the photo. */
.block-feature-block[data-bg="bgstyle-00"][data-has-image] .feature-block-items,
.block-feature-block[data-bg="bgstyle-01"][data-has-image] .feature-block-items {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg, 6px);
  padding: 32px;
}
.block-feature-block[data-bg="bgstyle-01"][data-has-image] .feature-block-items {
  background: rgba(254, 251, 249, 0.72);
}

/* 02 / 04 · copy stacks on top; cards become a frosted row beneath. */
.block-feature-block[data-bg="bgstyle-02"][data-has-image] .feature-block--split,
.block-feature-block[data-bg="bgstyle-04"][data-has-image] .feature-block--split { display: block; }
.block-feature-block[data-bg="bgstyle-02"][data-has-image] .feature-block-body,
.block-feature-block[data-bg="bgstyle-04"][data-has-image] .feature-block-body { max-width: 560px; margin-bottom: 40px; }
/* The stacked copy still honours the alignment: right pins it to the right half,
   centre to the middle — without it, left/right/centre all sat flush-left. */
.block-feature-block[data-align="right"][data-bg="bgstyle-02"][data-has-image] .feature-block-body,
.block-feature-block[data-align="right"][data-bg="bgstyle-04"][data-has-image] .feature-block-body { margin-left: auto; }
.block-feature-block[data-align="center"][data-bg="bgstyle-02"][data-has-image] .feature-block-body,
.block-feature-block[data-align="center"][data-bg="bgstyle-04"][data-has-image] .feature-block-body { margin-left: auto; margin-right: auto; }
.block-feature-block[data-bg="bgstyle-02"][data-has-image] .feature-block-grid { grid-template-columns: repeat(var(--feature-grid-cols, 4), minmax(0, 1fr)); }
.block-feature-block[data-bg="bgstyle-04"][data-has-image] .feature-block-grid { grid-template-columns: repeat(var(--feature-grid-cols, 3), minmax(0, 1fr)); }
/* Left/right (split) card views: the cards sit in the narrow half of the split,
   so pin them to two columns regardless of the per-instance `--feature-grid-cols`
   (which otherwise runs up to four and crams the column). Placed after the
   `[data-has-image]` grids so it wins the source-order tie for both plain and
   image splits; the responsive `!important` media queries below still collapse it. */
.block-feature-block[data-align="left"][data-bg="bgstyle-02"] .feature-block-grid,
.block-feature-block[data-align="left"][data-bg="bgstyle-04"] .feature-block-grid,
.block-feature-block[data-align="right"][data-bg="bgstyle-02"] .feature-block-grid,
.block-feature-block[data-align="right"][data-bg="bgstyle-04"] .feature-block-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.block-feature-block[data-bg="bgstyle-02"][data-has-image] .feature-item {
  --feature-card-bg: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.block-feature-block[data-bg="bgstyle-04"][data-has-image] .feature-item {
  --feature-card-bg: rgba(22, 26, 31, 0.55);
  --feature-card-border: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* 03 / 05 · items stay plain (icon rows / numbered) directly over the scrim. */

/* ── Responsive — collapse the multi-column item grids so cards stay readable
   on small screens (mirrors the stats block). The centre grids and the 02/04
   card grids carry a per-instance `--feature-grid-cols`, so these overrides use
   `!important` to win over the fixed/higher-specificity column counts above
   (incl. the `[data-has-image]` grids) regardless of the instance value. ────── */
@media (max-width: 900px) {
  .block-feature-block[data-align="center"] .feature-block-grid,
  .block-feature-block[data-bg="bgstyle-02"] .feature-block-grid,
  .block-feature-block[data-bg="bgstyle-04"] .feature-block-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  /* Same selectors/specificity as the 900px rule above so this later, narrower
     query wins the !important tie-break and drops every multi-column grid to 1-up. */
  .block-feature-block[data-align="center"] .feature-block-grid,
  .block-feature-block[data-bg="bgstyle-02"] .feature-block-grid,
  .block-feature-block[data-bg="bgstyle-04"] .feature-block-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   STATS BLOCK — "Stats Blocks"
   ----------------------------------------------------------------------------
   Unlike the feature block, the stats spec reuses the SAME six grounds as the
   shared field system (00 None · 01 blueprint seam · 02 warm report · 03 brand
   blue · 04 charcoal blueprint · 05 charcoal seam), so this block INHERITS the
   ground colour / seam / tessellation / top-rule / per-field title colours that
   the "PASSIVETASK HERO FIELDS" section already paints for every section — it
   does NOT repaint them. All that is added here is the stat-module presentation
   and the split/centre/right/image layout scaffold.

   Per the spec, the stat module is defined BY LAYOUT VARIANT (data-align), not by
   ground:
     A · left    KPI cards   (icon well + ochre numeral + label + delta), 2×2
     B · centre  icon-topped columns, four across, hairline dividers
     C · right   ledger rows (icon + label/delta left · value right), module left
     D · image   hero figure (one big numeral) + supporting icon rows

   The numeral is the single ochre accent (deep ochre #E64B1E on light grounds,
   flesh ochre #FD5927 on dark); prefixes (≥) and suffixes (%, days, ×) ride a
   muted grey. Everything is scoped to `.block-stats`.
   ============================================================================ */

/* ── Per-tone palette — light grounds (00/01/02) get the defaults; the three
   dark grounds (03/04/05) override. Numerals, affixes, cards, labels, dividers
   all read these so they flip correctly with the ground. ─────────────────── */
.block-stats {
  --stats-eyebrow-color: var(--content-header-eyebrow-color, var(--pt-elegant-blue));
  --stats-subhead-color: var(--content-header-emphasis-color, var(--pt-ochre-deep));
  --stats-intro-color: var(--content-header-intro-color, var(--pt-text-body));
  --stats-num-color: var(--pt-ochre-deep);
  --stats-affix-color: #8a94a0;
  --stats-icon-color: var(--pt-flesh-ochre);
  --stats-label-color: var(--pt-text-body);
  --stats-delta-color: var(--pt-cadet-gray);
  --stats-card-bg: var(--pt-white);
  --stats-card-border: var(--pt-misty-ice);
  --stats-rule: rgba(22, 26, 31, 0.16);
}
.block-stats[data-bg="bgstyle-03"],
.block-stats[data-bg="bgstyle-04"],
.block-stats[data-bg="bgstyle-05"] {
  --stats-num-color: var(--pt-flesh-ochre);
  --stats-affix-color: var(--pt-cadet-gray);
  --stats-label-color: var(--pt-misty-ice);
  --stats-delta-color: var(--pt-cadet-gray);
  --stats-card-bg: rgba(255, 255, 255, 0.05);
  --stats-card-border: rgba(255, 255, 255, 0.16);
  --stats-rule: rgba(255, 255, 255, 0.14);
}

/* ── Layout scaffold (shared) ────────────────────────────────────────────── */
.block-stats { text-align: left; }
.block-stats .stats-block { width: 100%; }
.block-stats .stats-block--split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.block-stats .stats-block-body { min-width: 0; text-align: left; }
.block-stats .stats-block-items { min-width: 0; }

/* C · right — module moves left, copy right. */
.block-stats[data-align="right"] .stats-block--split { grid-template-columns: 5fr 7fr; }
.block-stats[data-align="right"] .stats-block-body { order: 2; }
.block-stats[data-align="right"] .stats-block-items { order: 1; }

/* B · centre — copy stacked and centred on top, module row below. */
.block-stats[data-align="center"] .stats-block--center .stats-block-body {
  max-width: 620px;
  margin: 0 auto 34px;
  text-align: center;
}
.block-stats[data-align="center"] .stats-intro { max-width: 560px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .block-stats .stats-block--split { grid-template-columns: 1fr !important; gap: 40px; }
  .block-stats[data-align="right"] .stats-block-body { order: 1; }
  .block-stats[data-align="right"] .stats-block-items { order: 2; }
}

/* ── Content column typography (mirrors the universal title voice) ───────── */
.block-stats .stats-eyebrow {
  font-family: var(--pt-font-display);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.16em;
  margin: 0 0 12px;
  color: var(--stats-eyebrow-color);
}
.block-stats .stats-heading {
  font-family: var(--pt-font-display);
  text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0;
  color: currentColor;
}
.block-stats .stats-subhead {
  font-family: var(--pt-font-sans);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.05;
  letter-spacing: 0;
  margin-top: 10px;
  color: var(--stats-subhead-color);
}
.block-stats .stats-intro {
  font-family: var(--pt-font-sans);
  font-size: 16px;
  line-height: 1.45;
  margin: 16px 0 0;
  max-width: 400px;
  color: var(--stats-intro-color);
}
.block-stats .stats-intro :where(p) { margin: 0; }

/* ── Stat item — canonical parts, styled per variant below ───────────────── */
.block-stats .stats-grid { display: grid; }
.block-stats .stats-item { position: relative; min-width: 0; }
.block-stats .stats-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--stats-icon-color);
}
.block-stats .stats-item-icon > svg { width: 30px; height: 30px; }
.block-stats .stats-item-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 0.95;
  /* Fluid so the numeral (and its em-relative prefix/suffix) scales down on
     small phones instead of overflowing its column and wrapping. */
  font-size: clamp(20px, 5.2vw, 26px);
}
.block-stats .stats-item-number {
  font-family: var(--pt-font-display);
  font-size: 1em;
  letter-spacing: -0.01em;
  color: var(--stats-num-color);
}
.block-stats .stats-item-affix {
  font-family: var(--pt-font-display);
  font-size: 0.62em;
  color: var(--stats-affix-color);
}
.block-stats .stats-item-label {
  font-family: var(--pt-font-sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--stats-label-color);
}
.block-stats .stats-item-delta {
  font-family: var(--pt-font-sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--stats-delta-color);
}
.block-stats .stats-skeleton-line {
  height: 0.7em;
  border-radius: 2px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* ── A · left — KPI cards, 2×2 ───────────────────────────────────────────── */
.block-stats[data-align="left"] .stats-grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.block-stats[data-align="left"] .stats-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 18px;
  border-radius: var(--radius-lg, 6px);
  background: var(--stats-card-bg);
  border: 1px solid var(--stats-card-border);
}
.block-stats[data-align="left"] .stats-item-label { margin-top: 2px; }

/* ── B · centre — icon-topped columns, up to four across, hairline dividers ──
   Four per row is the cap; a row with fewer stats stretches to fill the full
   content width (3 → 3 equal columns · 2 → 2 · 1 → a single centred card). The
   count is read straight off the DOM with :has() + :nth-last-child()/:first-child
   (repeat()'s count can't be a min(), so the column count is matched, not
   computed) and only on desktop, so the responsive breakpoints below still win. */
.block-stats[data-align="center"] .stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
@media (min-width: 901px) {
  .block-stats[data-align="center"] .stats-grid:has(.stats-item:nth-last-child(3):first-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .block-stats[data-align="center"] .stats-grid:has(.stats-item:nth-last-child(2):first-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .block-stats[data-align="center"] .stats-grid:has(.stats-item:only-child) {
    grid-template-columns: minmax(auto, 22rem);
    justify-content: center;
  }
}
.block-stats[data-align="center"] .stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 0 16px;
}
.block-stats[data-align="center"] .stats-item + .stats-item {
  border-left: 1px solid var(--stats-rule);
}
.block-stats[data-align="center"] .stats-item-value { justify-content: center; font-size: clamp(25px, 7vw, 38px); }
.block-stats[data-align="center"] .stats-item-label { font-size: 13px; }
.block-stats[data-align="center"] .stats-item-delta { display: none; }

/* ── C · right — ledger rows: icon + label/delta left, value right ───────── */
.block-stats[data-align="right"] .stats-grid { display: flex; flex-direction: column; }
.block-stats[data-align="right"] .stats-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 16px;
  align-items: center;
  padding: 16px 0;
}
.block-stats[data-align="right"] .stats-item + .stats-item { border-top: 1px solid var(--stats-rule); }
.block-stats[data-align="right"] .stats-item-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.block-stats[data-align="right"] .stats-item-label { grid-column: 2; grid-row: 1; font-size: 14.5px; color: currentColor; }
.block-stats[data-align="right"] .stats-item-delta { grid-column: 2; grid-row: 2; }
.block-stats[data-align="right"] .stats-item-value {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  font-size: clamp(24px, 6.4vw, 34px);
}

/* ── D · image — full-bleed photo, tone scrim, hero figure + supporting rows ─
   The stat module rides on Section's shared media stack (.section-media +
   .section-media-fx-* + .section-media-overlay). The universal image rules only
   touch the hero's own `.hero-media*`, so the wash + 01/05 seam are rebuilt here
   on the section-media surfaces. */
.block-stats[data-has-image] .section-layer { display: none; }
.block-stats[data-has-image] .stats-block { position: relative; z-index: 1; }
.block-stats[data-has-image] .section-media-overlay {
  background: var(--stats-d-overlay, linear-gradient(90deg, rgba(22, 26, 31, 0.90) 0%, rgba(22, 26, 31, 0.82) 46%, rgba(22, 26, 31, 0.45) 100%));
}
/* Light grounds — cool/warm wash, dark copy stays legible. */
.block-stats[data-bg="bgstyle-00"][data-has-image],
.block-stats[data-bg="bgstyle-01"][data-has-image] { --stats-d-overlay: linear-gradient(90deg, rgba(244, 248, 251, 0.97) 0%, rgba(244, 248, 251, 0.92) 46%, rgba(244, 248, 251, 0.58) 100%); }
.block-stats[data-bg="bgstyle-02"][data-has-image] { --stats-d-overlay: linear-gradient(90deg, rgba(255, 241, 233, 0.96) 0%, rgba(255, 241, 233, 0.90) 46%, rgba(255, 241, 233, 0.52) 100%); }
/* Dark grounds — navy (03) / charcoal (04/05) wash, light copy. */
.block-stats[data-bg="bgstyle-03"][data-has-image] { --stats-d-overlay: linear-gradient(90deg, rgba(13, 32, 66, 0.92) 0%, rgba(16, 40, 82, 0.82) 46%, rgba(20, 49, 98, 0.55) 100%); }
.block-stats[data-bg="bgstyle-04"][data-has-image],
.block-stats[data-bg="bgstyle-05"][data-has-image] { --stats-d-overlay: linear-gradient(90deg, rgba(22, 26, 31, 0.92) 0%, rgba(22, 26, 31, 0.84) 46%, rgba(22, 26, 31, 0.48) 100%); }
/* 02 keeps its 3px ochre top rule, 01/05 keep the ochre seam — repainted above
   the photo on the first media-fx surface. */
.block-stats[data-bg="bgstyle-02"][data-has-image] .section-media-fx--1 {
  background: linear-gradient(180deg, var(--pt-flesh-ochre) 0, var(--pt-flesh-ochre) 3px, transparent 3px);
}
.block-stats[data-bg="bgstyle-01"][data-has-image] .section-media-fx--1,
.block-stats[data-bg="bgstyle-05"][data-has-image] .section-media-fx--1 {
  background: linear-gradient(115deg, transparent calc(44% - 1px), rgba(253, 89, 39, 0.9) 44%, transparent calc(44% + 2px));
}

/* D module — hero figure (first) then supporting icon rows. */
.block-stats[data-has-image] .stats-grid { display: flex; flex-direction: column; gap: 20px; }
.block-stats[data-has-image] .stats-item { display: flex; flex-direction: column; gap: 8px; }
.block-stats[data-has-image] .stats-item:first-child .stats-item-icon { display: none; }
.block-stats[data-has-image] .stats-item:first-child .stats-item-value { font-size: clamp(34px, 9vw, 52px); }
.block-stats[data-has-image] .stats-item:first-child .stats-item-label { font-size: 15px; }
.block-stats[data-has-image] .stats-item:not(:first-child) {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.block-stats[data-has-image] .stats-item:not(:first-child) .stats-item-value { font-size: clamp(22px, 6vw, 28px); }
.block-stats[data-has-image] .stats-item:not(:first-child) .stats-item-label { font-size: 13px; }
.block-stats[data-has-image] .stats-item:not(:first-child) .stats-item-delta { display: none; }
.block-stats[data-has-image] .stats-item:nth-child(2) {
  padding-top: 18px;
  border-top: 1px solid var(--stats-rule);
}

/* ── 01 / 05 seam — re-tuned to the stats split geometry (A 44% · B 88% · C 50%)
   The grounds are inherited from the shared field system, which places the seam
   for the hero's copy; the stats module sits differently, so only the seam
   position is overridden here (colour / tessellation stay). ─────────────────*/
.block-stats[data-bg="bgstyle-01"]::before,
.block-stats[data-bg="bgstyle-05"]::before {
  -webkit-mask-image: var(--pt-pattern-url), linear-gradient(115deg, transparent 44%, #000 44%);
  mask-image: var(--pt-pattern-url), linear-gradient(115deg, transparent 44%, #000 44%);
}
.block-stats[data-bg="bgstyle-01"]::after,
.block-stats[data-bg="bgstyle-05"]::after {
  background: linear-gradient(115deg, transparent calc(44% - 1px), rgba(253, 89, 39, 0.85) 44%, transparent calc(44% + 2px));
}
/* B · centre → seam slides to 88% (corner accent above the four-across row) */
.block-stats[data-align="center"][data-bg="bgstyle-01"]::before,
.block-stats[data-align="center"][data-bg="bgstyle-05"]::before {
  -webkit-mask-image: var(--pt-pattern-url), linear-gradient(115deg, transparent 88%, #000 88%);
  mask-image: var(--pt-pattern-url), linear-gradient(115deg, transparent 88%, #000 88%);
}
.block-stats[data-align="center"][data-bg="bgstyle-01"]::after,
.block-stats[data-align="center"][data-bg="bgstyle-05"]::after {
  background: linear-gradient(115deg, transparent calc(88% - 1px), rgba(253, 89, 39, 0.85) 88%, transparent calc(88% + 2px));
}
/* C · right → blueprint strip on the left, seam at 50% (module sits over it) */
.block-stats[data-align="right"][data-bg="bgstyle-01"]::before,
.block-stats[data-align="right"][data-bg="bgstyle-05"]::before {
  -webkit-mask-image: var(--pt-pattern-url), linear-gradient(115deg, #000 50%, transparent 50%);
  mask-image: var(--pt-pattern-url), linear-gradient(115deg, #000 50%, transparent 50%);
}
.block-stats[data-align="right"][data-bg="bgstyle-01"]::after,
.block-stats[data-align="right"][data-bg="bgstyle-05"]::after {
  background: linear-gradient(115deg, transparent calc(50% - 1px), rgba(253, 89, 39, 0.85) 50%, transparent calc(50% + 2px));
}

/* Responsive — collapse the four-across centre row and keep cards readable. */
@media (max-width: 900px) {
  .block-stats[data-align="center"] .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .block-stats[data-align="center"] .stats-item:nth-child(odd) { border-left: none; }
}
@media (max-width: 520px) {
  .block-stats[data-align="left"] .stats-grid { grid-template-columns: 1fr; }
  .block-stats[data-align="center"] .stats-grid { grid-template-columns: 1fr; }
  .block-stats[data-align="center"] .stats-item + .stats-item { border-left: none; border-top: 1px solid var(--stats-rule); padding-top: 24px; }
}

/* ============================================================================
   CALL-TO-ACTION BLOCK — "Call-to-action blocks"
   ----------------------------------------------------------------------------
   The six grounds themselves (colour, tone, border, tessellation, and the A/55%
   · B/72% ochre seams) are already painted by the shared
   `:is(section, header)[data-bg="bgstyle-NN"]` rules above, and the eyebrow /
   headline / sub headline / intro typography by the UNIVERSAL TITLE BLOCK — the
   CTA reuses both, so this section only adds what is specific to the CTA band:

     · the copy measure so the headline clears the seam,
     · the mirrored-split C seam at 44% (the spec widens the blueprint strip),
     · the per-ground secondary "ghost" button,
     · the "D" full-bleed photo treatment (wash + repainted seam / rule),
     · the ochre primary (`--block-accent`) and the `--cta-*` colour bridge.

   Layout (split / centre / mirror) is structural and lives in the shared base
   (_backgrounds.css) so every site lays the band out the same way.
   ============================================================================ */

/* Ochre primary action + copy measure (tight on the seam grounds 01/05). */
.block-cta { --block-accent: var(--pt-flesh-ochre); --cta-measure: 480px; }
:is(section, header).block-cta[data-bg="bgstyle-02"],
:is(section, header).block-cta[data-bg="bgstyle-03"],
:is(section, header).block-cta[data-bg="bgstyle-04"] { --cta-measure: 560px; }

/* Bridge the universal per-ground title colours onto the `--cta-*` vars the
   component reads inline, so the ground's colours win over the component's
   brand-neutral fallbacks (the same pattern the hero uses). 00 (None) keeps the
   clean-white spec: navy eyebrow, deep-ochre clause, body-grey lede. */
:is(section, header).block-cta[data-bg="bgstyle-00"] {
  --cta-eyebrow-color: var(--pt-elegant-blue);
  --cta-emphasis-color: var(--pt-ochre-deep);
  --cta-intro-color: var(--pt-text-body);
}
:is(section, header).block-cta[data-bg="bgstyle-01"],
:is(section, header).block-cta[data-bg="bgstyle-02"],
:is(section, header).block-cta[data-bg="bgstyle-03"],
:is(section, header).block-cta[data-bg="bgstyle-04"],
:is(section, header).block-cta[data-bg="bgstyle-05"] {
  --cta-eyebrow-color: var(--content-header-eyebrow-color);
  --cta-emphasis-color: var(--content-header-emphasis-color);
  --cta-intro-color: var(--content-header-intro-color);
}

/* Copy measure — the split copy column is held so the headline clears the seam. */
:is(section, header).block-cta .cta-block-body { max-width: var(--cta-measure, none); }
:is(section, header).block-cta.cta-block--center .cta-block-body { max-width: 660px; }

/* Mirrored split (C) — the spec widens the blueprint strip, seam at 44%. Higher
   specificity than the shared 24%/38% right-align rules, so it wins for the CTA. */
:is(section, header).block-cta[data-bg="bgstyle-01"][data-align="right"]::before,
:is(section, header).block-cta[data-bg="bgstyle-05"][data-align="right"]::before {
  -webkit-mask-image: var(--pt-pattern-url), linear-gradient(115deg, #000 44%, transparent 44%);
  mask-image: var(--pt-pattern-url), linear-gradient(115deg, #000 44%, transparent 44%);
}
:is(section, header).block-cta[data-bg="bgstyle-01"][data-align="right"]::after,
:is(section, header).block-cta[data-bg="bgstyle-05"][data-align="right"]::after {
  background: linear-gradient(115deg, transparent calc(44% - 1px), rgba(253, 89, 39, .85) 44%, transparent calc(44% + 2px));
}

/* ── Secondary "ghost" action, per ground (from the spec) ─────────────────────
   Light grounds: pale-blue fill inside a navy hairline; dark grounds: a white
   hairline over the ground; the charcoal seam (05): frosted glass. Hover on
   every ground inverts to a solid white/navy plate (hover rule lives in the base
   so it reads these per-ground vars). */
/* These now apply to EVERY section/header ground, not just the CTA band, so any
   secondary button — hero, story, split, callout … — inherits the same
   per-ground ghost/frosted treatment the CTA band pioneered (the unified
   .btn--secondary reads these vars via base.css). */
/* 00 / 01 / 02 — light grounds */
:is(section, header)[data-bg="bgstyle-00"],
:is(section, header)[data-bg="bgstyle-01"],
:is(section, header)[data-bg="bgstyle-02"] {
  --cta-secondary-fg: var(--pt-elegant-blue);
  --cta-secondary-bg: #f4f8fb;
  --cta-secondary-border: var(--pt-elegant-blue);
  --cta-secondary-fg-hover: #ffffff;
  --cta-secondary-bg-hover: var(--pt-elegant-blue);
}
/* 03 / 04 — dark grounds, hairline outline */
:is(section, header)[data-bg="bgstyle-03"],
:is(section, header)[data-bg="bgstyle-04"] {
  --cta-secondary-fg: #ffffff;
  --cta-secondary-bg: transparent;
  --cta-secondary-border: rgba(255, 255, 255, .42);
  --cta-secondary-fg-hover: #161a1f;
  --cta-secondary-bg-hover: #ffffff;
}
/* 05 — charcoal seam, frosted glass */
:is(section, header)[data-bg="bgstyle-05"] {
  --cta-secondary-fg: #ffffff;
  --cta-secondary-bg: rgba(255, 255, 255, .10);
  --cta-secondary-border: rgba(255, 255, 255, .42);
  --cta-secondary-backdrop: blur(6px);
  --cta-secondary-fg-hover: #161a1f;
  --cta-secondary-bg-hover: #ffffff;
}

/* ══ D · image — full-bleed brand photo under a tone-matched wash ═════════════
   Mirrors the hero: the generic ADA overlay is dropped, each ground's wash rides
   on `.section-media-fx--1`, and 01 / 02 / 05 repaint their seam or top rule on
   `.section-media-fx--2` ABOVE the wash. The copy (lifted to z-10) stays over
   both, held to the field's measure. The flat ::before / ::after grounds sit
   behind the photo and are covered. */
:is(section, header).block-cta[data-has-image] .section-media-overlay { display: none; }

/* Per-ground wash (exact ramps from the spec's D overlays). */
:is(section, header).block-cta[data-bg="bgstyle-00"][data-has-image] .section-media-fx--1,
:is(section, header).block-cta[data-bg="bgstyle-01"][data-has-image] .section-media-fx--1 {
  background: linear-gradient(90deg, rgba(244, 248, 251, .97) 0%, rgba(244, 248, 251, .92) 46%, rgba(244, 248, 251, .58) 100%);
}
:is(section, header).block-cta[data-bg="bgstyle-02"][data-has-image] .section-media-fx--1 {
  background: linear-gradient(90deg, rgba(255, 241, 233, .90) 0%, rgba(255, 241, 233, .86) 40%, rgba(255, 241, 233, .30) 70%, rgba(255, 241, 233, .06) 100%);
}
:is(section, header).block-cta[data-bg="bgstyle-03"][data-has-image] .section-media-fx--1 {
  background: linear-gradient(90deg, rgba(26, 65, 126, .90) 0%, rgba(26, 65, 126, .84) 40%, rgba(26, 65, 126, .34) 70%, rgba(26, 65, 126, .06) 100%);
}
:is(section, header).block-cta[data-bg="bgstyle-04"][data-has-image] .section-media-fx--1 {
  background: linear-gradient(90deg, rgba(22, 26, 31, .90) 0%, rgba(22, 26, 31, .84) 40%, rgba(22, 26, 31, .34) 70%, rgba(22, 26, 31, .06) 100%);
}
:is(section, header).block-cta[data-bg="bgstyle-05"][data-has-image] .section-media-fx--1 {
  background: linear-gradient(90deg, rgba(22, 26, 31, .97) 0%, rgba(22, 26, 31, .90) 46%, rgba(22, 26, 31, .55) 100%);
}

/* 01 / 05 · ochre seam repainted above the photo (A 55% · B 72% · C 44%). */
:is(section, header).block-cta[data-bg="bgstyle-01"][data-has-image] .section-media-fx--2,
:is(section, header).block-cta[data-bg="bgstyle-05"][data-has-image] .section-media-fx--2 {
  background: linear-gradient(115deg, transparent calc(55% - 1px), rgba(253, 89, 39, .85) 55%, transparent calc(55% + 2px));
}
:is(section, header).block-cta[data-bg="bgstyle-01"][data-align="center"][data-has-image] .section-media-fx--2,
:is(section, header).block-cta[data-bg="bgstyle-05"][data-align="center"][data-has-image] .section-media-fx--2 {
  background: linear-gradient(115deg, transparent calc(72% - 1px), rgba(253, 89, 39, .85) 72%, transparent calc(72% + 2px));
}
:is(section, header).block-cta[data-bg="bgstyle-01"][data-align="right"][data-has-image] .section-media-fx--2,
:is(section, header).block-cta[data-bg="bgstyle-05"][data-align="right"][data-has-image] .section-media-fx--2 {
  background: linear-gradient(115deg, transparent calc(44% - 1px), rgba(253, 89, 39, .85) 44%, transparent calc(44% + 2px));
}

/* 02 · 3px ochre top rule repainted above the photo. */
:is(section, header).block-cta[data-bg="bgstyle-02"][data-has-image] .section-media-fx--2 {
  background: linear-gradient(180deg, var(--pt-flesh-ochre) 0, var(--pt-flesh-ochre) 3px, transparent 3px);
}