/* ==========================================================================
   Pure Marketing Design System — bundle
   Link this one file, then a theme:

     <link rel="stylesheet" href="/css/pm-design-system.css">
     <link rel="stylesheet" href="/css/themes/neutral.css">

   Swap the second line for themes/pure-marketing.css to rebrand every block.
   Order matters: tokens first, theme last.
   ========================================================================== */

/* ==========================================================================
   Self-hosted webfonts — Inter, Poppins, JetBrains Mono.
   Generated from Google Fonts, latin + latin-ext subsets only. Files live in
   assets/fonts/. Nothing here touches the network, so every component renders
   correctly offline and inside a print/PDF renderer.
   Paths are relative to /assets, so this file is @imported from a theme with
   url() rewritten accordingly — see the theme files.
   ========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/jbmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/jbmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Pure Marketing Design System — Design tokens
   --------------------------------------------------------------------------
   Every value in the system resolves to a custom property declared here.
   Change a token, change every component. Never hard-code a colour, a radius,
   a font size or a spacing step inside a component file.

   Layers:
     1. Primitive tokens   --pm-*        raw scale values
     2. Semantic tokens    --pm-color-*  meaning, not appearance
     3. Scheme tokens      --pm-bg / --pm-fg / ...  set per section, see below

   Colour schemes
   --------------
   Relume-style sections carry their own colour scheme so any block can be
   dropped on a light, dark or brand background without editing its CSS.
   Put one of these classes on the section root:

     .pm-scheme-light      white background, dark text          (default)
     .pm-scheme-subtle     tinted background, dark text
     .pm-scheme-dark       dark background, light text
     .pm-scheme-brand      primary background, on-primary text
     .pm-scheme-accent     accent background, on-accent text

   Components read --pm-bg, --pm-fg, --pm-fg-muted, --pm-border, --pm-surface,
   --pm-btn-* and never the raw palette, so they invert automatically.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- type */
  --pm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --pm-font-display: var(--pm-font-sans);
  --pm-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Fluid ramp: mobile floor -> desktop ceiling, matched to Relume's scale. */
  --pm-text-h1: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);
  --pm-text-h2: clamp(2.25rem, 1.55rem + 2.8vw, 3rem);
  --pm-text-h3: clamp(2rem, 1.5rem + 2vw, 2.5rem);
  --pm-text-h4: clamp(1.75rem, 1.45rem + 1.2vw, 2rem);
  --pm-text-h5: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);
  --pm-text-h6: clamp(1.25rem, 1.2rem + 0.2vw, 1.25rem);
  --pm-text-xl: 1.5rem;
  --pm-text-lg: 1.25rem;
  --pm-text-md: 1.125rem;
  --pm-text-base: 1rem;
  --pm-text-sm: 0.875rem;
  --pm-text-xs: 0.75rem;

  --pm-leading-tight: 1.2;
  --pm-leading-snug: 1.3;
  --pm-leading-normal: 1.4;
  --pm-leading-relaxed: 1.5;
  --pm-leading-loose: 1.6;

  --pm-tracking-tight: -0.02em;
  --pm-tracking-heading: -0.01em;
  --pm-tracking-normal: 0;
  --pm-tracking-wide: 0.06em;
  --pm-tracking-widest: 0.16em;

  --pm-weight-light: 300;
  --pm-weight-regular: 400;
  --pm-weight-medium: 500;
  --pm-weight-semibold: 600;
  --pm-weight-bold: 700;
  --pm-weight-black: 800;

  --pm-weight-heading: var(--pm-weight-bold);
  --pm-weight-body: var(--pm-weight-regular);

  /* ------------------------------------------------------------- spacing */
  --pm-space-0: 0rem;
  --pm-space-1: 0.25rem;
  --pm-space-2: 0.5rem;
  --pm-space-3: 0.75rem;
  --pm-space-4: 1rem;
  --pm-space-5: 1.25rem;
  --pm-space-6: 1.5rem;
  --pm-space-8: 2rem;
  --pm-space-10: 2.5rem;
  --pm-space-12: 3rem;
  --pm-space-14: 3.5rem;
  --pm-space-16: 4rem;
  --pm-space-18: 4.5rem;
  --pm-space-20: 5rem;
  --pm-space-24: 6rem;
  --pm-space-28: 7rem;
  --pm-space-32: 8rem;

  /* Section rhythm. Relume ships py-16 / md:py-24 / lg:py-28; matched here. */
  --pm-section-py: var(--pm-space-16);
  --pm-section-py-sm: var(--pm-space-12);
  --pm-section-py-lg: var(--pm-space-28);
  --pm-gutter: 5%;
  --pm-container: 80rem; /* 1280px */
  --pm-container-narrow: 48rem; /* 768px */
  --pm-container-wide: 90rem; /* 1440px */
  --pm-measure: 70ch;

  /* --------------------------------------------------------------- radii */
  --pm-radius-none: 0rem;
  --pm-radius-xs: 0.25rem;
  --pm-radius-sm: 0.375rem;
  --pm-radius-md: 0.5rem;
  --pm-radius-lg: 0.75rem;
  --pm-radius-xl: 1rem;
  --pm-radius-2xl: 1.5rem;
  --pm-radius-full: 62.5rem;

  /* Component-level radii. Set these in a theme to reshape the whole system. */
  --pm-radius-button: var(--pm-radius-none);
  --pm-radius-card: var(--pm-radius-none);
  --pm-radius-image: var(--pm-radius-none);
  --pm-radius-form: var(--pm-radius-none);
  --pm-radius-badge: var(--pm-radius-none);
  --pm-radius-checkbox: var(--pm-radius-none);
  --pm-radius-dropdown: var(--pm-radius-none);
  --pm-radius-avatar: var(--pm-radius-full);

  /* ------------------------------------------------------------- borders */
  --pm-border-width: 1px;
  --pm-border-width-thick: 2px;

  /* ------------------------------------------------------------- shadows */
  --pm-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pm-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --pm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --pm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --pm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  --pm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --pm-shadow-focus: 0 0 0 3px rgb(0 0 0 / 0.12);

  /* --------------------------------------------------------------- motion */
  --pm-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pm-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --pm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pm-duration-fast: 150ms;
  --pm-duration: 300ms;
  --pm-duration-slow: 500ms;

  /* ---------------------------------------------------------------- misc */
  --pm-z-base: 1;
  --pm-z-sticky: 100;
  --pm-z-dropdown: 500;
  --pm-z-navbar: 900;
  --pm-z-overlay: 990;
  --pm-z-modal: 1000;
  --pm-z-toast: 1100;

  --pm-nav-height: 6.25rem; /* 100px — fixed brand standard, not a "roughly" */
  --pm-nav-height-mobile: 4rem;

  /* ------------------------------------------------------- neutral palette
     The default (neutral) theme. themes/*.css override these three blocks
     and nothing else. */
  --pm-palette-white: #ffffff;
  --pm-palette-black: #000000;
  --pm-palette-neutral-50: #fafafa;
  --pm-palette-neutral-100: #f5f5f5;
  --pm-palette-neutral-200: #e9e9e9;
  --pm-palette-neutral-300: #d4d4d4;
  --pm-palette-neutral-400: #a3a3a3;
  --pm-palette-neutral-500: #737373;
  --pm-palette-neutral-600: #525252;
  --pm-palette-neutral-700: #404040;
  --pm-palette-neutral-800: #262626;
  --pm-palette-neutral-900: #171717;
  --pm-palette-neutral-950: #0a0a0a;

  --pm-palette-primary: #000000;
  --pm-palette-primary-hover: #333333;
  --pm-palette-on-primary: #ffffff;
  --pm-palette-accent: #000000;
  --pm-palette-on-accent: #ffffff;

  --pm-palette-success: #12a87b;
  --pm-palette-warning: #f5a623;
  --pm-palette-danger: #d92d20;
  --pm-palette-info: #3156fe;

  /* ------------------------------------------------------ semantic tokens */
  --pm-color-page: var(--pm-palette-white);
  --pm-color-surface: var(--pm-palette-white);
  --pm-color-surface-subtle: var(--pm-palette-neutral-100);
  --pm-color-surface-inverse: var(--pm-palette-neutral-950);
  --pm-color-surface-inverse-raised: var(--pm-palette-neutral-900);
  --pm-color-text: var(--pm-palette-black);
  --pm-color-text-muted: var(--pm-palette-neutral-600);
  --pm-color-text-inverse: var(--pm-palette-white);
  /* neutral-300, not 400: muted text on dark also lands over photo overlays,
     where 400 measures under 3:1. */
  --pm-color-text-inverse-muted: var(--pm-palette-neutral-300);
  --pm-color-border: var(--pm-palette-black);
  --pm-color-border-subtle: var(--pm-palette-neutral-200);
  --pm-color-border-inverse: var(--pm-palette-white);
  --pm-color-primary: var(--pm-palette-primary);
  --pm-color-primary-hover: var(--pm-palette-primary-hover);
  --pm-color-on-primary: var(--pm-palette-on-primary);
  --pm-color-accent: var(--pm-palette-accent);
  --pm-color-on-accent: var(--pm-palette-on-accent);
  --pm-color-overlay: rgb(0 0 0 / 0.6);

  /* --------------------------------------------- default (light) scheme
     Every section inherits these unless it carries a .pm-scheme-* class. */
  --pm-bg: var(--pm-color-page);
  --pm-fg: var(--pm-color-text);
  --pm-fg-muted: var(--pm-color-text-muted);
  --pm-border-color: var(--pm-color-border);
  --pm-border-soft: var(--pm-color-border-subtle);
  --pm-surface: var(--pm-color-surface);
  --pm-surface-raised: var(--pm-color-surface-subtle);
  --pm-btn-bg: var(--pm-color-primary);
  --pm-btn-fg: var(--pm-color-on-primary);
  --pm-btn-border: var(--pm-color-primary);
  --pm-accent: var(--pm-color-accent);
  --pm-on-accent: var(--pm-color-on-accent);
}

/* ==========================================================================
   Colour schemes
   ========================================================================== */

.pm-scheme-light {
  --pm-bg: var(--pm-color-page);
  --pm-fg: var(--pm-color-text);
  --pm-fg-muted: var(--pm-color-text-muted);
  --pm-border-color: var(--pm-color-border);
  --pm-border-soft: var(--pm-color-border-subtle);
  --pm-surface: var(--pm-color-surface);
  --pm-surface-raised: var(--pm-color-surface-subtle);
  --pm-btn-bg: var(--pm-color-primary);
  --pm-btn-fg: var(--pm-color-on-primary);
  --pm-btn-border: var(--pm-color-primary);
}

.pm-scheme-subtle {
  --pm-bg: var(--pm-color-surface-subtle);
  --pm-fg: var(--pm-color-text);
  --pm-fg-muted: var(--pm-color-text-muted);
  --pm-border-color: var(--pm-color-border);
  --pm-border-soft: var(--pm-color-border-subtle);
  --pm-surface: var(--pm-color-surface);
  --pm-surface-raised: var(--pm-color-page);
  --pm-btn-bg: var(--pm-color-primary);
  --pm-btn-fg: var(--pm-color-on-primary);
  --pm-btn-border: var(--pm-color-primary);
}

.pm-scheme-dark {
  --pm-bg: var(--pm-color-surface-inverse);
  --pm-fg: var(--pm-color-text-inverse);
  --pm-fg-muted: var(--pm-color-text-inverse-muted);
  --pm-border-color: var(--pm-color-border-inverse);
  --pm-border-soft: rgb(255 255 255 / 0.16);
  --pm-surface: var(--pm-color-surface-inverse-raised);
  --pm-surface-raised: var(--pm-color-surface-inverse-raised);
  --pm-btn-bg: var(--pm-color-text-inverse);
  --pm-btn-fg: var(--pm-color-surface-inverse);
  --pm-btn-border: var(--pm-color-text-inverse);
  --pm-shadow-focus: 0 0 0 3px rgb(255 255 255 / 0.25);
  /* A dark section is never a flat colour fill: a faint two-tone wash lifts it
     off the page regardless of the theme's actual dark hue. Themes with a
     distinct brand colour (see themes/pure-marketing.css) override this with
     a version tinted from their own palette instead of the generic wash —
     that's an enhancement on top of this baseline, not something required to
     avoid flatness. */
  background-image:
    radial-gradient(60rem 40rem at 100% 0%, color-mix(in srgb, var(--pm-fg) 10%, transparent), transparent 60%),
    radial-gradient(55rem 38rem at 0% 100%, color-mix(in srgb, var(--pm-fg) 7%, transparent), transparent 62%);
  background-repeat: no-repeat;
}

.pm-scheme-brand {
  --pm-bg: var(--pm-color-primary);
  --pm-fg: var(--pm-color-on-primary);
  --pm-fg-muted: color-mix(in srgb, var(--pm-color-on-primary) 72%, transparent);
  --pm-border-color: var(--pm-color-on-primary);
  --pm-border-soft: color-mix(in srgb, var(--pm-color-on-primary) 20%, transparent);
  --pm-surface: color-mix(in srgb, var(--pm-color-on-primary) 8%, var(--pm-color-primary));
  --pm-surface-raised: color-mix(in srgb, var(--pm-color-on-primary) 14%, var(--pm-color-primary));
  --pm-btn-bg: var(--pm-color-on-primary);
  --pm-btn-fg: var(--pm-color-primary);
  --pm-btn-border: var(--pm-color-on-primary);
  --pm-shadow-focus: 0 0 0 3px rgb(255 255 255 / 0.25);
}

.pm-scheme-accent {
  --pm-bg: var(--pm-color-accent);
  --pm-fg: var(--pm-color-on-accent);
  --pm-fg-muted: color-mix(in srgb, var(--pm-color-on-accent) 72%, transparent);
  --pm-border-color: var(--pm-color-on-accent);
  --pm-border-soft: color-mix(in srgb, var(--pm-color-on-accent) 20%, transparent);
  --pm-surface: color-mix(in srgb, var(--pm-color-on-accent) 10%, var(--pm-color-accent));
  --pm-surface-raised: color-mix(in srgb, var(--pm-color-on-accent) 16%, var(--pm-color-accent));
  --pm-btn-bg: var(--pm-color-on-accent);
  --pm-btn-fg: var(--pm-color-accent);
  --pm-btn-border: var(--pm-color-on-accent);
  --pm-shadow-focus: 0 0 0 3px rgb(255 255 255 / 0.25);
}

/* ==========================================================================
   Pure Marketing Design System — Base
   Reset, element defaults, page furniture (container / section / heading).
   Depends on: tokens.css
   Breakpoints used across the whole system:
     sm 480px · md 768px · lg 992px · xl 1280px
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background-color: var(--pm-color-page);
  color: var(--pm-color-text);
  font-family: var(--pm-font-sans);
  font-size: var(--pm-text-base);
  font-weight: var(--pm-weight-body);
  line-height: var(--pm-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

:where(ul, ol) {
  /* :where() keeps this at zero specificity so the heading-rhythm rule below
     can still give a list its top margin. */
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

address {
  font-style: normal;
}

hr {
  border: 0;
  border-top: var(--pm-border-width) solid var(--pm-border-soft);
  margin: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--pm-fg, currentColor);
  outline-offset: 2px;
}

::selection {
  background-color: var(--pm-color-primary);
  color: var(--pm-color-on-primary);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--pm-font-display);
  font-weight: var(--pm-weight-heading);
  letter-spacing: var(--pm-tracking-heading);
  color: inherit;
  text-wrap: balance;
}

h1,
.pm-h1 {
  font-size: var(--pm-text-h1);
  line-height: var(--pm-leading-tight);
}

h2,
.pm-h2 {
  font-size: var(--pm-text-h2);
  line-height: var(--pm-leading-tight);
}

h3,
.pm-h3 {
  font-size: var(--pm-text-h3);
  line-height: var(--pm-leading-tight);
}

h4,
.pm-h4 {
  font-size: var(--pm-text-h4);
  line-height: var(--pm-leading-snug);
}

h5,
.pm-h5 {
  font-size: var(--pm-text-h5);
  line-height: var(--pm-leading-normal);
}

h6,
.pm-h6 {
  font-size: var(--pm-text-h6);
  line-height: var(--pm-leading-normal);
}

.pm-text-xl {
  font-size: var(--pm-text-xl);
  line-height: var(--pm-leading-relaxed);
}
.pm-text-lg {
  font-size: var(--pm-text-lg);
  line-height: var(--pm-leading-relaxed);
}
.pm-text-md {
  font-size: var(--pm-text-md);
  line-height: var(--pm-leading-relaxed);
}
.pm-text-base {
  font-size: var(--pm-text-base);
  line-height: var(--pm-leading-relaxed);
}
.pm-text-sm {
  font-size: var(--pm-text-sm);
  line-height: var(--pm-leading-relaxed);
}
.pm-text-xs {
  font-size: var(--pm-text-xs);
  line-height: var(--pm-leading-relaxed);
}

.pm-muted {
  color: var(--pm-fg-muted);
}

/* Heading rhythm.
   Headings carry no bottom margin of their own, so a paragraph placed straight
   after one used to weld to it. This gives the *following* element the gap
   instead, at zero specificity — any block rule, and any .pm-stack/.pm-grid gap,
   still wins, and in normal flow the two margins collapse rather than stack. */
:where(h1, h2, h3, h4, h5, h6, .pm-h1, .pm-h2, .pm-h3, .pm-h4, .pm-h5, .pm-h6)
  + :where(p, ul, ol, blockquote, figure, dl, .pm-lede, .pm-prose) {
  margin-top: var(--pm-space-5);
}

@media (min-width: 768px) {
  :where(h1, h2, h3, h4, h5, h6, .pm-h1, .pm-h2, .pm-h3, .pm-h4, .pm-h5, .pm-h6)
    + :where(p, ul, ol, blockquote, figure, dl, .pm-lede, .pm-prose) {
    margin-top: var(--pm-space-6);
  }
}

/* An eyebrow sits tight above its heading, never pushed off by the rule above. */
:where(.pm-eyebrow) + :where(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}

.pm-lede {
  font-size: var(--pm-text-md);
  line-height: var(--pm-leading-loose);
  color: var(--pm-fg-muted);
  max-width: var(--pm-measure);
}

/* An eyebrow: the small label that sits above a heading. */
.pm-eyebrow {
  display: inline-block;
  font-size: var(--pm-text-base);
  font-weight: var(--pm-weight-semibold);
  line-height: var(--pm-leading-relaxed);
  margin-bottom: var(--pm-space-4);
}

.pm-eyebrow--mono {
  font-family: var(--pm-font-mono);
  font-size: var(--pm-text-xs);
  font-weight: var(--pm-weight-medium);
  letter-spacing: var(--pm-tracking-widest);
  text-transform: uppercase;
  color: var(--pm-accent);
}

/* Accent-coloured keyword inside a heading — a house signature seen across
   client builds (Vybe Resource, Hire Recruitment, Reach Media, ZUSI): one or
   two load-bearing words in the headline take the brand accent so the line
   reads as designed, not just typed. Wrap the word(s) in a span:
     <h1>It's our <span class="pm-highlight">promise</span> to find you…</h1>
   Use on at most one or two phrases per heading — highlighting everything
   highlights nothing. --underline swaps the colour for a thick offset
   underline in the accent (the "first-time round." treatment). */
.pm-highlight {
  color: var(--pm-accent);
}
.pm-highlight--underline {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--pm-accent);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.14em;
}

/* Rich-text defaults for long-form content blocks. */
.pm-prose > * + * {
  margin-top: var(--pm-space-5);
}
.pm-prose h2 {
  font-size: var(--pm-text-h4);
  margin-top: var(--pm-space-10);
}
.pm-prose h3 {
  font-size: var(--pm-text-h5);
  margin-top: var(--pm-space-8);
}
.pm-prose h4 {
  font-size: var(--pm-text-h6);
  margin-top: var(--pm-space-6);
}
.pm-prose p,
.pm-prose li {
  color: var(--pm-fg-muted);
  line-height: var(--pm-leading-loose);
}
.pm-prose ul,
.pm-prose ol {
  padding-left: var(--pm-space-6);
  display: grid;
  gap: var(--pm-space-2);
}
.pm-prose ul {
  list-style: disc;
}
.pm-prose ol {
  list-style: decimal;
}
.pm-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pm-prose blockquote {
  border-left: var(--pm-border-width-thick) solid var(--pm-border-color);
  padding-left: var(--pm-space-5);
  font-size: var(--pm-text-lg);
}
.pm-prose img {
  width: 100%;
  border-radius: var(--pm-radius-image);
}
.pm-prose figcaption {
  margin-top: var(--pm-space-3);
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}
.pm-prose code {
  font-family: var(--pm-font-mono);
  font-size: 0.9em;
  background-color: var(--pm-surface-raised);
  padding: 0.15em 0.4em;
  border-radius: var(--pm-radius-xs);
}
.pm-prose pre {
  font-family: var(--pm-font-mono);
  background-color: var(--pm-surface-raised);
  padding: var(--pm-space-5);
  border-radius: var(--pm-radius-card);
  overflow-x: auto;
}

/* ==========================================================================
   Layout furniture
   ========================================================================== */

/* The outer wrapper for every block. Owns the horizontal gutter, the colour
   scheme background and the vertical rhythm. */
.pm-section {
  background-color: var(--pm-bg);
  color: var(--pm-fg);
  padding-inline: var(--pm-gutter);
  padding-block: var(--pm-section-py);
  position: relative;
}

.pm-section--tight {
  padding-block: var(--pm-space-12);
}

.pm-section--flush {
  padding-block: 0;
}

.pm-section--hero {
  padding-block: var(--pm-space-16);
}

@media (min-width: 768px) {
  .pm-section {
    padding-block: var(--pm-space-24);
  }
  .pm-section--tight {
    padding-block: var(--pm-space-16);
  }
  .pm-section--flush {
    padding-block: 0;
  }
  .pm-section--hero {
    padding-block: var(--pm-space-24);
  }
}

@media (min-width: 992px) {
  .pm-section {
    padding-block: var(--pm-section-py-lg);
  }
  .pm-section--tight {
    padding-block: var(--pm-space-20);
  }
  .pm-section--flush {
    padding-block: 0;
  }
  .pm-section--hero {
    padding-block: var(--pm-space-28);
  }
}

.pm-container {
  width: 100%;
  max-width: var(--pm-container);
  margin-inline: auto;
}

.pm-container--narrow {
  max-width: var(--pm-container-narrow);
}

.pm-container--wide {
  max-width: var(--pm-container-wide);
}

.pm-container--full {
  max-width: none;
}

/* The standard centred section heading block. */
.pm-section-head {
  max-width: 48rem;
  margin-bottom: var(--pm-space-12);
}

.pm-section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* :not(.pm-eyebrow) matters — an eyebrow is a <p> too, and without this the
   section-head rule (higher specificity) would repaint it muted and resize it. */
.pm-section-head > p:not(.pm-eyebrow) {
  color: var(--pm-fg-muted);
  font-size: var(--pm-text-md);
  margin-top: var(--pm-space-5);
}

@media (min-width: 768px) {
  .pm-section-head {
    margin-bottom: var(--pm-space-20);
  }
  .pm-section-head > p:not(.pm-eyebrow) {
    margin-top: var(--pm-space-6);
  }
}

.pm-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.pm-scroll-locked {
  overflow: hidden;
}

/* ==========================================================================
   Pure Marketing Design System — Layout utilities
   A deliberately small set. Anything a block needs beyond this belongs in that
   block's own scoped <style>, not here.
   Depends on: tokens.css
   ========================================================================== */

/* -------------------------------------------------------------- stack/flow */
/* Vertical rhythm between direct children. */
.pm-stack {
  display: flex;
  flex-direction: column;
}
.pm-stack--1 > * + * { margin-top: var(--pm-space-1); }
.pm-stack--2 > * + * { margin-top: var(--pm-space-2); }
.pm-stack--3 > * + * { margin-top: var(--pm-space-3); }
.pm-stack--4 > * + * { margin-top: var(--pm-space-4); }
.pm-stack--5 > * + * { margin-top: var(--pm-space-5); }
.pm-stack--6 > * + * { margin-top: var(--pm-space-6); }
.pm-stack--8 > * + * { margin-top: var(--pm-space-8); }
.pm-stack--10 > * + * { margin-top: var(--pm-space-10); }
.pm-stack--12 > * + * { margin-top: var(--pm-space-12); }

/* Horizontal group that wraps. */
.pm-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pm-space-4);
}
.pm-cluster--2 { gap: var(--pm-space-2); }
.pm-cluster--3 { gap: var(--pm-space-3); }
.pm-cluster--6 { gap: var(--pm-space-6); }
.pm-cluster--8 { gap: var(--pm-space-8); }
.pm-cluster--center { justify-content: center; }
.pm-cluster--end { justify-content: flex-end; }
.pm-cluster--between { justify-content: space-between; }
.pm-cluster--top { align-items: flex-start; }

/* ------------------------------------------------------------------- grid */
.pm-grid {
  display: grid;
  gap: var(--pm-space-6);
}
.pm-grid--gap-2 { gap: var(--pm-space-2); }
.pm-grid--gap-4 { gap: var(--pm-space-4); }
.pm-grid--gap-8 { gap: var(--pm-space-8); }
.pm-grid--gap-10 { gap: var(--pm-space-10); }
.pm-grid--gap-12 { gap: var(--pm-space-12); }
.pm-grid--gap-16 { gap: var(--pm-space-16); }
.pm-grid--gap-20 { gap: var(--pm-space-20); }

/* Mobile-first: everything stacks, then splits at md (768) / lg (992). */
.pm-grid--2,
.pm-grid--3,
.pm-grid--4,
.pm-grid--5,
.pm-grid--6 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .pm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .pm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pm-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pm-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Two-column content/media split used by most feature and header blocks. */
.pm-split {
  display: grid;
  gap: var(--pm-space-12);
  align-items: center;
  grid-template-columns: 1fr;
}
.pm-split--top { align-items: start; }
@media (min-width: 992px) {
  .pm-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pm-space-20);
  }
  .pm-split--wide-left { grid-template-columns: 1.4fr 1fr; }
  .pm-split--wide-right { grid-template-columns: 1fr 1.4fr; }
  .pm-split--narrow-left { grid-template-columns: 0.8fr 1fr; }
  /* Put the media first in the DOM for a11y, flip it visually here. */
  .pm-split--reverse > :first-child { order: 2; }
  .pm-split--reverse > :last-child { order: 1; }
}

/* ------------------------------------------------------------------ media */
.pm-media {
  /* display:block matters: .pm-media is often put on an <a>, where inline
     layout silently ignores aspect-ratio and collapses the card. */
  display: block;
  width: 100%;
  border-radius: var(--pm-radius-image);
  overflow: hidden;
}
.pm-media img,
.pm-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-ratio-1x1 { aspect-ratio: 1 / 1; }
.pm-ratio-3x2 { aspect-ratio: 3 / 2; }
.pm-ratio-4x3 { aspect-ratio: 4 / 3; }
.pm-ratio-16x9 { aspect-ratio: 16 / 9; }
.pm-ratio-2x3 { aspect-ratio: 2 / 3; }
.pm-ratio-3x4 { aspect-ratio: 3 / 4; }
.pm-ratio-9x16 { aspect-ratio: 9 / 16; }

.pm-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full-bleed background layer inside a positioned section. */
.pm-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.pm-bg-layer img,
.pm-bg-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-bg-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--pm-color-overlay);
}
/* A flat wash reads fine but a directional tint reads as photography that
   was actually art-directed: strong over the text side, fading away to let
   the photo breathe on the other. Still themed — it fades from the same
   --pm-color-overlay every theme already sets, just angled instead of flat. */
.pm-bg-overlay--gradient {
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    var(--pm-color-overlay) 0%,
    color-mix(in srgb, var(--pm-color-overlay) 65%, transparent) 45%,
    transparent 100%
  );
}
.pm-relative { position: relative; z-index: var(--pm-z-base); }

/* Pulls a panel up out of the section below it, so it visually floats across
   the boundary between two sections instead of sitting neatly inside one —
   a stat/USP strip or a form card breaking out of a hero onto the section
   after it. Put this on the wrapper immediately around the floated element,
   at the end of the section; pair the element itself with .pm-card--floating
   for a shadow deep enough to read as lifted off the page, not just bordered.
   The negative margin has to overcome the section's own bottom padding
   before there is anything left to pull the card past the section boundary —
   a margin sized to just match that padding (an earlier version of this
   rule did exactly that) cancels out to zero visible overlap; it only reads
   as floating once the margin is padding-block's own token PLUS this extra
   3rem, at every breakpoint .pm-section's padding changes at. */
.pm-float-bottom {
  position: relative;
  z-index: 2;
  margin-top: var(--pm-space-16);
  margin-bottom: calc((var(--pm-space-16) + 3rem) * -1);
}
@media (min-width: 768px) {
  .pm-float-bottom {
    margin-bottom: calc((var(--pm-space-24) + 3rem) * -1);
  }
}
@media (min-width: 992px) {
  .pm-float-bottom {
    margin-bottom: calc((var(--pm-section-py-lg) + 3rem) * -1);
  }
}

/* ---------------------------------------------------------- ornament
   Background decoration for a section — never load-bearing, always behind
   real content. .pm-section already has position:relative; put real content
   in a .pm-relative wrapper so it stacks above these. Position and size each
   instance with a small scoped class in the block's own <style> (top/right/
   width/height — lint disallows inline style=), since that's genuinely
   per-composition; these utilities only supply the shape. If the shape
   bleeds past the section's edge (it usually should, that's the point), add
   `overflow: hidden` to the section's own rule or the bleed causes
   horizontal scroll on the whole page — see cta-07 for a working example. */

/* An angled edge instead of a straight one, so a stack of sections reads as
   a considered sequence rather than rectangles glued end to end. The slice
   is vw-based so the angle stays proportionate at any viewport width; a
   section using this needs a little extra top/bottom padding by hand so the
   slice doesn't eat into its content. */
.pm-slant-top { clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); }
.pm-slant-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); }
.pm-slant-top.pm-slant-bottom {
  clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
}

/* A soft organic blob, coloured via `color` (so `style="color: var(--pm-accent)"`
   picks up the theme) at low opacity — the curved background shape behind a
   hero or a CTA that a flat rectangle of colour doesn't give you. */
.pm-decor-blob {
  position: absolute;
  z-index: 0;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background-color: currentColor;
  opacity: 0.14;
  pointer-events: none;
}

/* An angled bar — the corner chevron/wedge geometry that runs through the
   agency's client work (Vybe Resource, ZUSI, Learn Play): one or two skewed
   strips of brand colour bleeding in from a corner of a hero or CTA. Same
   contract as blob/dots: colour via currentColor, position and size per
   instance in the block's scoped CSS, always behind a .pm-relative content
   wrapper, section needs overflow:hidden when it bleeds (it should).
   Layer two with different widths/opacities for the double-chevron look. */
.pm-decor-angle {
  position: absolute;
  z-index: 0;
  background-color: currentColor;
  opacity: 0.16;
  transform: skewX(-18deg);
  pointer-events: none;
}

/* A dot-grid field, same currentColor mechanism — the ornament cluster that
   sits in a hero or CTA corner as texture rather than empty space. */
.pm-decor-dots {
  position: absolute;
  z-index: 0;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
  background-size: 1.25rem 1.25rem;
  opacity: 0.3;
  pointer-events: none;
}

/* --------------------------------------------------------------- helpers */
.pm-text-center { text-align: center; }
.pm-text-left { text-align: left; }
.pm-text-right { text-align: right; }
.pm-mx-auto { margin-inline: auto; }
.pm-w-full { width: 100%; }
.pm-h-full { height: 100%; }
.pm-measure { max-width: var(--pm-measure); }
.pm-flex-1 { flex: 1 1 0%; }
.pm-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-clamp-2,
.pm-clamp-3,
.pm-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pm-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.pm-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.pm-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

.pm-hide { display: none !important; }
@media (max-width: 767px) {
  .pm-hide-sm { display: none !important; }
}
@media (max-width: 991px) {
  .pm-hide-md { display: none !important; }
}
@media (min-width: 992px) {
  .pm-hide-lg { display: none !important; }
}

.pm-scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pm-scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* ------------------------------------------------------- scroll reveal
   Add data-pm-reveal to any element. pm-design-system.js flips
   data-pm-revealed="true" when it scrolls into view. */
[data-pm-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--pm-duration-slow) var(--pm-ease-out),
    transform var(--pm-duration-slow) var(--pm-ease-out);
}
[data-pm-reveal][data-pm-revealed="true"] {
  opacity: 1;
  transform: none;
}
[data-pm-reveal][data-pm-delay="1"] { transition-delay: 80ms; }
[data-pm-reveal][data-pm-delay="2"] { transition-delay: 160ms; }
[data-pm-reveal][data-pm-delay="3"] { transition-delay: 240ms; }
[data-pm-reveal][data-pm-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  [data-pm-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Pure Marketing Design System — Shared components (atoms & molecules)
   Every block in components/ is built from these. If a block needs something
   that is not here, it defines it in its own scoped <style> — do not grow this
   file for a one-off.
   Depends on: tokens.css, base.css
   ========================================================================== */

/* ==========================================================================
   Button
   .pm-btn                       primary (solid, scheme-aware)
   .pm-btn--secondary            outlined
   .pm-btn--tertiary             ghost, bordered on hover
   .pm-btn--link                 text link with chevron
   .pm-btn--link-alt             underlined text link
   .pm-btn--sm / --lg            sizes  (default is md)
   .pm-btn--icon                 square icon-only
   .pm-btn--full                 100% width
   ========================================================================== */

.pm-btn {
  --_btn-bg: var(--pm-btn-bg);
  --_btn-fg: var(--pm-btn-fg);
  --_btn-border: var(--pm-btn-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pm-space-2);
  padding: var(--pm-space-2) var(--pm-space-6);
  min-height: 2.75rem;
  border: var(--pm-border-width) solid var(--_btn-border);
  border-radius: var(--pm-radius-button);
  background-color: var(--_btn-bg);
  color: var(--_btn-fg);
  font-size: var(--pm-text-base);
  font-weight: var(--pm-weight-medium);
  line-height: var(--pm-leading-relaxed);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--pm-duration-fast) var(--pm-ease),
    color var(--pm-duration-fast) var(--pm-ease),
    border-color var(--pm-duration-fast) var(--pm-ease),
    opacity var(--pm-duration-fast) var(--pm-ease);
}

.pm-btn:hover {
  opacity: 0.88;
}

.pm-btn:focus-visible {
  outline: 2px solid var(--pm-fg);
  outline-offset: 2px;
}

.pm-btn[disabled],
.pm-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Filled, not outlined — a bordered/transparent button reads as an
   afterthought next to the solid primary, especially over a photo. Secondary
   still steps back from primary by using the section's surface colour
   instead of the accent, but it's a normal solid button, not a ghost. */
.pm-btn--secondary {
  --_btn-bg: var(--pm-surface);
  --_btn-fg: var(--pm-fg);
  --_btn-border: var(--pm-border-soft);
}
.pm-btn--secondary:hover {
  --_btn-bg: var(--pm-surface-raised);
  opacity: 1;
}

.pm-btn--tertiary {
  --_btn-bg: transparent;
  --_btn-fg: var(--pm-fg);
  --_btn-border: transparent;
  padding-inline: var(--pm-space-4);
}
.pm-btn--tertiary:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--pm-fg) 8%, transparent);
}

.pm-btn--accent {
  --_btn-bg: var(--pm-accent);
  --_btn-fg: var(--pm-on-accent);
  --_btn-border: var(--pm-accent);
}

.pm-btn--link,
.pm-btn--link-alt {
  --_btn-bg: transparent;
  --_btn-fg: var(--pm-fg);
  --_btn-border: transparent;
  padding: 0;
  min-height: 0;
  gap: var(--pm-space-2);
}
.pm-btn--link-alt {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pm-btn--link:hover,
.pm-btn--link-alt:hover {
  opacity: 0.7;
  background-color: transparent;
}

.pm-btn--sm {
  padding: var(--pm-space-1) var(--pm-space-5);
  min-height: 2.25rem;
  font-size: var(--pm-text-sm);
}
.pm-btn--lg {
  padding: var(--pm-space-3) var(--pm-space-8);
  min-height: 3.25rem;
  font-size: var(--pm-text-md);
}
.pm-btn--icon {
  padding: 0;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
}
.pm-btn--icon.pm-btn--sm {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
}
.pm-btn--icon.pm-btn--lg {
  width: 3.25rem;
  min-width: 3.25rem;
  height: 3.25rem;
}
.pm-btn--full {
  width: 100%;
}

/* Size modifiers come later in the cascade than the link variants, so they
   would otherwise put padding back on a text link. */
.pm-btn--link.pm-btn--sm,
.pm-btn--link.pm-btn--lg,
.pm-btn--link-alt.pm-btn--sm,
.pm-btn--link-alt.pm-btn--lg {
  padding: 0;
  min-height: 0;
}
.pm-btn--round {
  border-radius: var(--pm-radius-full);
}

.pm-btn .pm-icon {
  flex: none;
}

/* A pair/row of buttons under a heading. */
.pm-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pm-space-4);
  margin-top: var(--pm-space-6);
}
.pm-btn-group--center { justify-content: center; }
@media (min-width: 768px) {
  .pm-btn-group { margin-top: var(--pm-space-8); }
}

/* ==========================================================================
   Icon
   Standard is Font Awesome now: <i class="fa-solid fa-star pm-icon"></i>
   (brand marks: fa-brands). Sized by font-size so weight matches the type
   around it. Older blocks still carry hand-drawn inline <svg class="pm-icon">
   — that markup keeps working (sized by width/height instead) so nothing
   breaks mid-migration, but do not author new icons that way; use Font
   Awesome. Requires css/vendor/fontawesome.css loaded on the page (compose.js
   adds it automatically; a component previewed standalone needs the link
   itself — see any recently-touched block's <head> for the pattern).
   The size modifiers (--xs…--2xl) work on both forms.
   ========================================================================== */

i.pm-icon,
.fa-solid.pm-icon,
.fa-regular.pm-icon,
.fa-brands.pm-icon {
  display: inline-block;
  width: auto;
  font-size: 1.5rem;
  line-height: 1;
  flex: none;
  vertical-align: middle;
}
svg.pm-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  vertical-align: middle;
  /* fill/stroke come from the SVG's own attributes so stroke icons and solid
     glyphs can share one class. Use --solid only if the markup omits them. */
}
.pm-icon--solid { fill: currentColor; stroke: none; }
.pm-icon--stroke { fill: none; stroke: currentColor; }
/* Font Awesome sizes off font-size only — its own --fa-width keeps the glyph
   box proportional, forcing a fixed width clips or off-centres it. */
.pm-icon--xs { font-size: 0.75rem; }
.pm-icon--sm { font-size: 1rem; }
.pm-icon--md { font-size: 1.25rem; }
.pm-icon--lg { font-size: 2rem; }
.pm-icon--xl { font-size: 3rem; }
.pm-icon--2xl { font-size: 4rem; }
svg.pm-icon--xs { width: 0.75rem; height: 0.75rem; }
svg.pm-icon--sm { width: 1rem; height: 1rem; }
svg.pm-icon--md { width: 1.25rem; height: 1.25rem; }
svg.pm-icon--lg { width: 2rem; height: 2rem; }
svg.pm-icon--xl { width: 3rem; height: 3rem; }
svg.pm-icon--2xl { width: 4rem; height: 4rem; }

/* Icon inside a tinted square/circle. */
.pm-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--pm-radius-card);
  background-color: var(--pm-surface-raised);
  color: var(--pm-fg);
  flex: none;
}
.pm-icon-tile--round { border-radius: var(--pm-radius-full); }
.pm-icon-tile--sm { width: 2.5rem; height: 2.5rem; }
.pm-icon-tile--lg { width: 4.5rem; height: 4.5rem; }
.pm-icon-tile--outline {
  background-color: transparent;
  border: var(--pm-border-width) solid var(--pm-border-color);
}
.pm-icon-tile--accent {
  background-color: var(--pm-accent);
  color: var(--pm-on-accent);
}

/* ==========================================================================
   Card
   ========================================================================== */

/* The bare card carries a soft border and a light shadow by default — a card
   sitting on real client content is never a flat, hard-outlined wireframe box.
   --soft/--raised/--ghost step away from this baseline in different directions
   (a flat tinted block, more lift, or no chrome at all); they don't turn
   shadow on, this rule already does that. */
.pm-card {
  display: flex;
  flex-direction: column;
  background-color: var(--pm-surface);
  color: var(--pm-fg);
  border: var(--pm-border-width) solid var(--pm-border-soft);
  border-radius: var(--pm-radius-card);
  box-shadow: var(--pm-shadow-sm);
  overflow: hidden;
}
.pm-card--soft {
  border-color: transparent;
  background-color: var(--pm-surface-raised);
  box-shadow: none;
}
.pm-card--ghost {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
.pm-card--raised {
  border-color: transparent;
  box-shadow: var(--pm-shadow-lg);
}
/* For a card carrying .pm-float-bottom (see utilities.css) — a shadow deep
   enough that the card reads as physically lifted off the section behind it,
   not just a slightly-emphasised box. */
.pm-card--floating {
  border-color: transparent;
  box-shadow: var(--pm-shadow-2xl);
}
.pm-card--pad {
  padding: var(--pm-space-6);
}
@media (min-width: 768px) {
  .pm-card--pad { padding: var(--pm-space-8); }
}
.pm-card__body {
  padding: var(--pm-space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (min-width: 768px) {
  .pm-card__body { padding: var(--pm-space-8); }
}
.pm-card__media {
  width: 100%;
  overflow: hidden;
}
.pm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-card__title {
  font-size: var(--pm-text-h6);
  font-weight: var(--pm-weight-bold);
  line-height: var(--pm-leading-normal);
}
.pm-card__text {
  color: var(--pm-fg-muted);
  margin-top: var(--pm-space-3);
}
.pm-card__footer {
  margin-top: auto;
  padding-top: var(--pm-space-5);
}
/* .pm-card and .pm-card__body are column flexboxes, so a bare button or badge
   would stretch edge to edge with its label centred. Only --full asks for that. */
.pm-card > .pm-btn,
.pm-card__body > .pm-btn,
.pm-card__footer > .pm-btn,
.pm-card > .pm-badge,
.pm-card__body > .pm-badge,
.pm-card__footer > .pm-badge,
.pm-card > .pm-rating,
.pm-card__body > .pm-rating {
  align-self: flex-start;
}
.pm-card > .pm-btn--full,
.pm-card__body > .pm-btn--full,
.pm-card__footer > .pm-btn--full {
  align-self: stretch;
}

/* Whole-card link affordance. */
.pm-card--link {
  transition: transform var(--pm-duration) var(--pm-ease),
    box-shadow var(--pm-duration) var(--pm-ease);
}
.pm-card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-shadow-lg);
}

/* ==========================================================================
   Badge / tag / pill
   ========================================================================== */

.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-2);
  padding: var(--pm-space-1) var(--pm-space-2);
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-badge);
  background-color: transparent;
  font-size: var(--pm-text-sm);
  font-weight: var(--pm-weight-semibold);
  line-height: var(--pm-leading-relaxed);
  white-space: nowrap;
}
.pm-badge--solid {
  background-color: var(--pm-fg);
  color: var(--pm-bg);
}
.pm-badge--soft {
  background-color: var(--pm-surface-raised);
  border-color: transparent;
}
.pm-badge--accent {
  background-color: var(--pm-accent);
  border-color: var(--pm-accent);
  color: var(--pm-on-accent);
}
.pm-badge--round { border-radius: var(--pm-radius-full); }
.pm-badge--sm {
  font-size: var(--pm-text-xs);
  padding: 0.125rem var(--pm-space-2);
}

.pm-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-2);
}

/* ==========================================================================
   Avatar
   ========================================================================== */

.pm-avatar {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: var(--pm-radius-avatar);
  object-fit: cover;
  overflow: hidden; /* so <span class="pm-avatar"><img></span> clips too */
  flex: none;
}
.pm-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-avatar--xs { width: 2rem; height: 2rem; }
.pm-avatar--sm { width: 2.5rem; height: 2.5rem; }
.pm-avatar--lg { width: 4rem; height: 4rem; }
.pm-avatar--xl { width: 5rem; height: 5rem; }
.pm-avatar--2xl { width: 8rem; height: 8rem; }
.pm-avatar--square { border-radius: var(--pm-radius-image); }

.pm-avatar-group {
  display: flex;
  align-items: center;
}
.pm-avatar-group .pm-avatar {
  border: 2px solid var(--pm-bg);
}
.pm-avatar-group .pm-avatar + .pm-avatar {
  margin-left: -0.75rem;
}

/* Avatar + name + role, the testimonial/author lockup. */
.pm-person {
  display: flex;
  align-items: center;
  gap: var(--pm-space-4);
}
.pm-person__name {
  font-weight: var(--pm-weight-semibold);
}
.pm-person__role {
  color: var(--pm-fg-muted);
  font-size: var(--pm-text-sm);
}

/* ==========================================================================
   Star rating
   ========================================================================== */

.pm-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-1);
  color: var(--pm-fg);
}
.pm-rating .pm-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.pm-rating__label {
  margin-left: var(--pm-space-2);
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}

/* Trust bar — the review-proof strip that sits under a hero's buttons or in
   a topbar on client builds (Vybe Resource, ZUSI): star row + a short line
   like "Excellent · 4.9 out of 5 · 1,169 reviews". Stars take the accent by
   default; --on-dark keeps them legible on photo/dark heroes. */
.pm-trustbar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pm-space-3);
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}
.pm-trustbar__stars {
  display: inline-flex;
  gap: 0.125rem;
  color: var(--pm-accent);
}
.pm-trustbar__stars .pm-icon {
  font-size: 1rem;
}
.pm-trustbar strong {
  color: var(--pm-fg);
  font-weight: var(--pm-weight-semibold);
}

/* ==========================================================================
   Form controls
   ========================================================================== */

.pm-field {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-2);
}
.pm-label {
  font-size: var(--pm-text-sm);
  font-weight: var(--pm-weight-medium);
}
.pm-hint {
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}

.pm-input,
.pm-select,
.pm-textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--pm-space-2) var(--pm-space-3);
  background-color: transparent;
  color: var(--pm-fg);
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-form);
  font-size: var(--pm-text-base);
  line-height: var(--pm-leading-relaxed);
  transition: border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-input::placeholder,
.pm-textarea::placeholder {
  color: var(--pm-fg-muted);
}
.pm-input:focus,
.pm-select:focus,
.pm-textarea:focus {
  outline: none;
  border-color: var(--pm-fg);
  box-shadow: var(--pm-shadow-focus);
}
.pm-textarea {
  min-height: 11.25rem;
  padding: var(--pm-space-3);
  resize: vertical;
}
.pm-select {
  appearance: none;
  padding-right: var(--pm-space-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 1.35rem, calc(100% - 0.9rem) 1.35rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.pm-check {
  display: flex;
  align-items: flex-start;
  gap: var(--pm-space-2);
  font-size: var(--pm-text-base);
  cursor: pointer;
}
.pm-check input[type="checkbox"],
.pm-check input[type="radio"] {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.2rem 0 0;
  flex: none;
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-checkbox);
  background-color: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.pm-check input[type="radio"] {
  border-radius: var(--pm-radius-full);
}
.pm-check input[type="checkbox"]::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  transform: scale(0);
  transition: transform var(--pm-duration-fast) var(--pm-ease);
  box-shadow: inset 1em 1em var(--pm-bg);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.pm-check input[type="radio"]::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--pm-radius-full);
  transform: scale(0);
  transition: transform var(--pm-duration-fast) var(--pm-ease);
  box-shadow: inset 1em 1em var(--pm-bg);
}
.pm-check input:checked {
  background-color: var(--pm-fg);
  border-color: var(--pm-fg);
}
.pm-check input:checked::before {
  transform: scale(1);
}
.pm-check input:focus-visible {
  outline: 2px solid var(--pm-fg);
  outline-offset: 2px;
}

/* Inline email-capture row. */
.pm-inline-form {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-4);
  max-width: 30rem;
}
@media (min-width: 480px) {
  .pm-inline-form {
    flex-direction: row;
    align-items: center;
  }
  .pm-inline-form .pm-input { flex: 1; }
}
.pm-inline-form__note {
  font-size: var(--pm-text-xs);
  color: var(--pm-fg-muted);
}

/* ==========================================================================
   Accordion  (JS: data-pm-accordion)
   ========================================================================== */

.pm-accordion {
  border-top: var(--pm-border-width) solid var(--pm-border-color);
}
.pm-accordion__item {
  border-bottom: var(--pm-border-width) solid var(--pm-border-color);
}
.pm-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-space-4);
  width: 100%;
  padding: var(--pm-space-4) 0;
  text-align: left;
  font-size: var(--pm-text-md);
  font-weight: var(--pm-weight-semibold);
  color: inherit;
}
@media (min-width: 768px) {
  .pm-accordion__trigger {
    padding: var(--pm-space-5) 0;
    font-size: var(--pm-text-lg);
  }
}
.pm-accordion__icon {
  transition: transform var(--pm-duration) var(--pm-ease);
  flex: none;
}
.pm-accordion__trigger[aria-expanded="true"] .pm-accordion__icon {
  transform: rotate(180deg);
}
.pm-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--pm-duration) var(--pm-ease);
}
.pm-accordion__panel[data-pm-open="true"] {
  grid-template-rows: 1fr;
}
.pm-accordion__panel > div {
  overflow: hidden;
}
.pm-accordion__content {
  padding-bottom: var(--pm-space-5);
  color: var(--pm-fg-muted);
}
/* Boxed variant */
.pm-accordion--boxed {
  border-top: 0;
  display: grid;
  gap: var(--pm-space-4);
}
.pm-accordion--boxed .pm-accordion__item {
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-card);
  padding-inline: var(--pm-space-5);
}

/* ==========================================================================
   Tabs  (JS: data-pm-tabs)
   ========================================================================== */

.pm-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-2);
  border-bottom: var(--pm-border-width) solid var(--pm-border-soft);
}
.pm-tabs__tab {
  padding: var(--pm-space-3) var(--pm-space-4);
  font-weight: var(--pm-weight-medium);
  color: var(--pm-fg-muted);
  border-bottom: var(--pm-border-width-thick) solid transparent;
  margin-bottom: -1px;
  transition: color var(--pm-duration-fast) var(--pm-ease),
    border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-tabs__tab[aria-selected="true"] {
  color: var(--pm-fg);
  border-bottom-color: var(--pm-fg);
}
.pm-tabs__panel[hidden] { display: none; }
.pm-tabs__panel { padding-top: var(--pm-space-8); }

/* Pill variant */
.pm-tabs--pills .pm-tabs__list {
  border-bottom: 0;
  gap: var(--pm-space-2);
}
.pm-tabs--pills .pm-tabs__tab {
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-full);
  padding: var(--pm-space-2) var(--pm-space-5);
  margin-bottom: 0;
}
.pm-tabs--pills .pm-tabs__tab[aria-selected="true"] {
  background-color: var(--pm-fg);
  color: var(--pm-bg);
}

/* ==========================================================================
   Dropdown / mega menu  (JS: data-pm-dropdown)
   ========================================================================== */

.pm-dropdown {
  position: relative;
}
.pm-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-2);
  color: inherit;
  font-size: inherit;
}
.pm-dropdown__chevron {
  transition: transform var(--pm-duration) var(--pm-ease);
}
.pm-dropdown[data-pm-open="true"] > .pm-dropdown__trigger .pm-dropdown__chevron,
.pm-dropdown__trigger[aria-expanded="true"] .pm-dropdown__chevron {
  transform: rotate(180deg);
}
/* A plain white panel with a real shadow doing the elevation work, and each
   link its own full-width row separated by a hairline — not a bordered box
   of tightly-packed rounded hover chips. overflow:hidden keeps the divider
   rows from poking past the panel's own rounded corners. */
.pm-dropdown__menu {
  display: none;
  background-color: var(--pm-bg);
  color: var(--pm-fg);
  border-radius: var(--pm-radius-dropdown);
  padding: var(--pm-space-2) 0;
  min-width: 16rem;
  overflow: hidden;
}
.pm-dropdown[data-pm-open="true"] > .pm-dropdown__menu {
  display: block;
}
@media (min-width: 992px) {
  .pm-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--pm-z-dropdown);
    box-shadow: var(--pm-shadow-lg);
  }
  .pm-dropdown__menu--right { left: auto; right: 0; }
  .pm-dropdown__menu--center { left: 50%; transform: translateX(-50%); }
}
.pm-dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--pm-space-3);
  padding: var(--pm-space-3) var(--pm-space-5);
  transition: background-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-dropdown__link:not(:last-child) {
  border-bottom: var(--pm-border-width) solid var(--pm-border-soft);
}
.pm-dropdown__link:hover {
  background-color: color-mix(in srgb, var(--pm-fg) 6%, transparent);
}
.pm-dropdown__link-title { font-weight: var(--pm-weight-medium); }
.pm-dropdown__link-desc {
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}

/* ==========================================================================
   Navbar shell  (JS: data-pm-nav)
   Shared chrome. Individual navbar blocks lay out on top of this.
   ========================================================================== */

.pm-nav {
  position: relative;
  z-index: var(--pm-z-navbar);
  display: flex;
  width: 100%;
  align-items: center;
  background-color: var(--pm-bg);
  color: var(--pm-fg);
  border-bottom: var(--pm-border-width) solid var(--pm-border-soft);
}
@media (min-width: 992px) {
  .pm-nav {
    min-height: var(--pm-nav-height);
    padding-inline: var(--pm-gutter);
  }
}
.pm-nav__inner {
  width: 100%;
  height: 100%;
}
@media (min-width: 992px) {
  .pm-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Same rule every other section follows: full-width coloured band,
       content capped at --pm-container (1280px) and centred inside it. */
    max-width: var(--pm-container);
    margin-inline: auto;
  }
}
.pm-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--pm-nav-height-mobile);
  padding-inline: var(--pm-gutter);
}
@media (min-width: 992px) {
  .pm-nav__bar {
    min-height: 100%;
    padding-inline: 0;
  }
}
.pm-nav__logo img,
.pm-nav__logo svg {
  height: 2rem;
  width: auto;
}
.pm-nav__menu {
  padding-inline: var(--pm-gutter);
  overflow: hidden;
  height: 0;
  transition: height var(--pm-duration) var(--pm-ease);
}
.pm-nav__menu[data-pm-open="true"] {
  height: auto;
  max-height: calc(100dvh - var(--pm-nav-height-mobile));
  overflow-y: auto;
  padding-bottom: var(--pm-space-8);
}
@media (min-width: 992px) {
  .pm-nav__menu,
  .pm-nav__menu[data-pm-open="true"] {
    display: flex;
    align-items: center;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-inline: 0;
    padding-bottom: 0;
  }
}
.pm-nav__link {
  display: block;
  padding: var(--pm-space-3) 0;
  font-size: var(--pm-text-base);
}
.pm-nav__link:first-child { padding-top: var(--pm-space-6); }
@media (min-width: 992px) {
  .pm-nav__link,
  .pm-nav__link:first-child {
    padding: var(--pm-space-2) var(--pm-space-4);
  }
}
.pm-nav__actions {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-4);
  margin-top: var(--pm-space-6);
}
.pm-nav__actions > .pm-btn { width: 100%; }
@media (min-width: 992px) {
  .pm-nav__actions {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
    margin-left: var(--pm-space-4);
  }
  .pm-nav__actions > .pm-btn { width: auto; }
}

/* Hamburger */
.pm-burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-right: -0.5rem;
}
@media (min-width: 992px) {
  .pm-burger--hide-desktop { display: none; }
}
.pm-burger__line {
  display: block;
  width: 1.5rem;
  height: 2px;
  margin: 3px 0;
  background-color: currentColor;
  transition: transform var(--pm-duration) var(--pm-ease),
    width var(--pm-duration-fast) var(--pm-ease),
    opacity var(--pm-duration-fast) var(--pm-ease);
}
.pm-burger[aria-expanded="true"] .pm-burger__line:nth-child(1) {
  transform: translateY(8px) rotate(-45deg);
}
.pm-burger[aria-expanded="true"] .pm-burger__line:nth-child(2) {
  width: 0;
  opacity: 0;
}
.pm-burger[aria-expanded="true"] .pm-burger__line:nth-child(3) {
  transform: translateY(-8px) rotate(45deg);
}

/* ==========================================================================
   Modal / dialog / lightbox  (JS: data-pm-modal)
   ========================================================================== */

.pm-modal {
  position: fixed;
  inset: 0;
  z-index: var(--pm-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pm-gutter);
}
.pm-modal[data-pm-open="true"] { display: flex; }
.pm-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--pm-color-overlay);
}
.pm-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  max-height: 90dvh;
  overflow-y: auto;
  background-color: var(--pm-color-page);
  color: var(--pm-color-text);
  border: var(--pm-border-width) solid var(--pm-color-border);
  border-radius: var(--pm-radius-card);
  padding: var(--pm-space-6);
}
@media (min-width: 768px) {
  .pm-modal__panel { padding: var(--pm-space-8); }
}
.pm-modal__panel--wide { max-width: 60rem; }
.pm-modal__panel--video {
  max-width: 60rem;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.pm-modal__close {
  position: absolute;
  top: var(--pm-space-4);
  right: var(--pm-space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: inherit;
}
.pm-modal__panel--video .pm-modal__close {
  top: -3rem;
  right: 0;
  color: #fff;
}

/* Play button overlay for video blocks. */
.pm-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgb(0 0 0 / 0.25);
  transition: background-color var(--pm-duration) var(--pm-ease);
}
.pm-play:hover { background-color: rgb(0 0 0 / 0.4); }
.pm-play__icon {
  width: 4rem;
  height: 4rem;
}
@media (min-width: 768px) {
  .pm-play__icon { width: 5rem; height: 5rem; }
}

/* ==========================================================================
   Carousel / slider  (JS: data-pm-carousel)
   Scroll-snap track with prev/next buttons and dots.
   ========================================================================== */

.pm-carousel { position: relative; }
.pm-carousel__viewport {
  overflow: hidden;
}
.pm-carousel__track {
  display: flex;
  gap: var(--pm-space-6);
  transition: transform var(--pm-duration-slow) var(--pm-ease);
  will-change: transform;
}
.pm-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  .pm-carousel--2 .pm-carousel__slide { flex-basis: calc(50% - (var(--pm-space-6) / 2)); }
}
@media (min-width: 992px) {
  .pm-carousel--3 .pm-carousel__slide { flex-basis: calc(33.3333% - (var(--pm-space-6) * 2 / 3)); }
  .pm-carousel--4 .pm-carousel__slide { flex-basis: calc(25% - (var(--pm-space-6) * 3 / 4)); }
}
.pm-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-space-4);
  margin-top: var(--pm-space-8);
}
.pm-carousel__nav {
  display: flex;
  gap: var(--pm-space-3);
}
.pm-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--pm-space-2);
}
.pm-carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--pm-radius-full);
  background-color: color-mix(in srgb, var(--pm-fg) 25%, transparent);
  transition: background-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-carousel__dot[aria-current="true"] {
  background-color: var(--pm-fg);
}
.pm-carousel__arrow[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ==========================================================================
   Table
   ========================================================================== */

.pm-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: var(--pm-border-width) solid var(--pm-border-color);
  border-radius: var(--pm-radius-card);
}
.pm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pm-text-sm);
  text-align: left;
}
.pm-table th,
.pm-table td {
  padding: var(--pm-space-4);
  border-bottom: var(--pm-border-width) solid var(--pm-border-soft);
  vertical-align: middle;
}
.pm-table thead th {
  background-color: var(--pm-surface-raised);
  font-weight: var(--pm-weight-semibold);
  white-space: nowrap;
}
.pm-table tbody tr:last-child td { border-bottom: 0; }
.pm-table--center th:not(:first-child),
.pm-table--center td:not(:first-child) { text-align: center; }

/* ==========================================================================
   Breadcrumb / pagination
   ========================================================================== */

.pm-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pm-space-2);
  font-size: var(--pm-text-sm);
  color: var(--pm-fg-muted);
}
.pm-breadcrumb a:hover { color: var(--pm-fg); }
.pm-breadcrumb [aria-current="page"] { color: var(--pm-fg); }

.pm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-space-4);
  padding-top: var(--pm-space-8);
  border-top: var(--pm-border-width) solid var(--pm-border-soft);
  margin-top: var(--pm-space-12);
}
.pm-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--pm-space-1);
}
.pm-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--pm-radius-button);
  font-size: var(--pm-text-sm);
}
.pm-pagination__page[aria-current="page"] {
  background-color: var(--pm-surface-raised);
  font-weight: var(--pm-weight-semibold);
}

/* ==========================================================================
   Small recurring molecules
   ========================================================================== */

/* Feature/benefit row with a leading icon. */
.pm-feature-row {
  display: flex;
  align-items: flex-start;
  gap: var(--pm-space-4);
}
.pm-feature-row__body > p {
  color: var(--pm-fg-muted);
  margin-top: var(--pm-space-2);
}

/* Tick list. */
.pm-ticks {
  display: grid;
  gap: var(--pm-space-3);
}
.pm-ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--pm-space-3);
  list-style: none;
}
.pm-ticks .pm-icon { margin-top: 0.15rem; }

/* Stat block. */
.pm-stat__value {
  font-size: var(--pm-text-h3);
  font-weight: var(--pm-weight-bold);
  line-height: var(--pm-leading-tight);
  letter-spacing: var(--pm-tracking-tight);
}
.pm-stat__label {
  color: var(--pm-fg-muted);
  margin-top: var(--pm-space-2);
}

/* Logo wall item. */
.pm-logo {
  max-height: 3rem;
  width: auto;
  object-fit: contain;
}

/* Divider. */
.pm-divider {
  border: 0;
  border-top: var(--pm-border-width) solid var(--pm-border-soft);
  margin-block: var(--pm-space-8);
}

/* Blockquote used by testimonial blocks. */
.pm-quote {
  font-size: var(--pm-text-lg);
  font-weight: var(--pm-weight-medium);
  line-height: var(--pm-leading-relaxed);
}
@media (min-width: 768px) {
  .pm-quote { font-size: var(--pm-text-xl); }
}

/* Social icon row. */
.pm-social {
  display: flex;
  align-items: center;
  gap: var(--pm-space-3);
}
.pm-social a {
  display: inline-flex;
  transition: opacity var(--pm-duration-fast) var(--pm-ease);
}
.pm-social a:hover { opacity: 0.6; }

/* Footer link column. */
.pm-footer-col__title {
  font-size: var(--pm-text-sm);
  font-weight: var(--pm-weight-semibold);
  margin-bottom: var(--pm-space-3);
}
.pm-footer-col ul {
  display: grid;
  gap: var(--pm-space-2);
  list-style: none;
}
.pm-footer-col a {
  font-size: var(--pm-text-sm);
  transition: opacity var(--pm-duration-fast) var(--pm-ease);
}
.pm-footer-col a:hover { opacity: 0.65; }

/* Bottom bar of a footer. */
.pm-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-6);
  padding-top: var(--pm-space-8);
  border-top: var(--pm-border-width) solid var(--pm-border-soft);
  margin-top: var(--pm-space-12);
  font-size: var(--pm-text-sm);
}
@media (min-width: 768px) {
  .pm-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--pm-space-20);
  }
}
.pm-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-6);
}
.pm-footer-legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Banner / announcement strip. */
.pm-banner {
  background-color: var(--pm-bg);
  color: var(--pm-fg);
  padding: var(--pm-space-3) var(--pm-gutter);
  font-size: var(--pm-text-sm);
}
.pm-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pm-space-4);
}
.pm-banner__close {
  display: inline-flex;
  margin-left: auto;
}

/* Loading spinner. */
.pm-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid color-mix(in srgb, var(--pm-fg) 20%, transparent);
  border-top-color: var(--pm-fg);
  border-radius: var(--pm-radius-full);
  animation: pm-spin 0.8s linear infinite;
}
@keyframes pm-spin {
  to { transform: rotate(360deg); }
}

/* Progress bar. */
.pm-progress {
  width: 100%;
  height: 0.25rem;
  background-color: color-mix(in srgb, var(--pm-fg) 15%, transparent);
  border-radius: var(--pm-radius-full);
  overflow: hidden;
}
.pm-progress__bar {
  height: 100%;
  background-color: var(--pm-fg);
  border-radius: inherit;
  transition: width var(--pm-duration) var(--pm-ease);
}

/* Infinite marquee (logo strips). */
.pm-marquee {
  display: flex;
  overflow: hidden;
  gap: var(--pm-space-12);
  mask-image: linear-gradient(90deg, transparent, #000 12.5%, #000 87.5%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12.5%, #000 87.5%, transparent);
}
.pm-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--pm-space-12);
  flex: none;
  padding-right: var(--pm-space-12);
  animation: pm-marquee 30s linear infinite;
}
.pm-marquee:hover .pm-marquee__group {
  animation-play-state: paused;
}
@keyframes pm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Timeline spine. */
.pm-timeline {
  position: relative;
  display: grid;
  gap: var(--pm-space-12);
}
.pm-timeline::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--pm-border-soft);
}
.pm-timeline__item {
  position: relative;
  padding-left: var(--pm-space-10);
}
.pm-timeline__dot {
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: var(--pm-radius-full);
  background-color: var(--pm-fg);
}