/*
 Theme Name:   Rubric Institute Child
 Theme URI:    https://rubricinstitute.com.au
 Description:  Child theme for Rubric Education Institute — workforce capability & psychosocial safety training. Built by Dossis Digital on GeneratePress.
 Author:       Dossis Digital
 Author URI:   https://dossisdigital.com.au
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  rubric-institute-child
*/

/* ===========================================
   FONTS — self-hosted WOFF2 (no external requests)
   Perpetua: client-supplied (14-file family). Archivo: Google Fonts.
   =========================================== */
@font-face {
  font-family: 'Perpetua';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/perpetua-regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Perpetua';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/perpetua-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Perpetua';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/perpetua-bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Perpetua';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/perpetua-bold-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Perpetua Titling';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/perpetua-titling.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/archivo-latin.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;
}

/* ===========================================
   TABLE OF CONTENTS
   ===========================================
   1.  Design Tokens (CSS Custom Properties)
   2.  Base / Reset / GP Overrides
   3.  Typography & Shared Components
   4.  Buttons
   5.  Header & Desktop Navigation
   6.  Mobile Menu
   7.  Hero Section
   8.  About Section
   9.  Why Now Section
   10. Is This For Me Section
   11. Process Section
   12. Lead Magnet Banner
   13. Gap Section
   14. Approach Section
   16. Pull Quote Banner
   17. Why Kelly
   18. Inside the Training
   14. CTA Banner Section
   15. FAQ Section
   17. Contact Section
   19. Footer
   21. Blog Template
   22. WPForms Overrides
   23. Utilities
   24. Animations & Transitions
   25. Reduced Motion
   =========================================== */


/* ===========================================
   1. DESIGN TOKENS
   =========================================== */
:root {
  /* ── Colours — Rubric Education Institute, Palette v1 ──
     Official anchors (Gold, Navy) from the brand guide. Scale derived via HSL
     and reconciled against the lavender + cream tints in the brand watermark
     and zoom backgrounds. See palette.html for the full reference.
  */

  /* Navy scale */
  --rei-navy-950:         #0E0530;
  --rei-navy-900:         #1C0957;   /* ★ Brand Navy */
  --rei-navy-700:         #3A2970;
  --rei-navy-500:         #6755A0;
  --rei-navy-300:         #A89BC4;
  --rei-navy-200:         #D6D1E5;   /* lavender from watermark */
  --rei-navy-100:         #ECE8F3;
  --rei-navy-50:          #F6F4FA;

  /* Gold scale */
  --rei-gold-900:         #8F6A20;
  --rei-gold-700:         #BC8F3D;   /* ★ Brand Gold */
  --rei-gold-500:         #D1B07A;
  --rei-gold-300:         #E8D4A5;
  --rei-gold-200:         #F3E5CC;   /* cream from watermark */
  --rei-gold-100:         #FAF3E4;
  --rei-gold-50:          #FBF8F0;

  /* Neutrals (slight navy tint for family coherence) */
  --rei-white:            #FFFFFF;
  --rei-paper:            #FAFAF9;
  --rei-ink:              #0E0B1A;
  --rei-body:             #333044;
  --rei-muted:            #6A6378;
  --rei-line:             #E4E1E9;
  --rei-line-soft:        #F0EDF3;

  /* Semantic states */
  --rei-success:          #4A7552;
  --rei-warning:          #B47A1C;
  --rei-error:            #8A3B3B;
  --rei-info:             #3F5880;

  /* Role aliases (backwards compatibility + clear intent in component CSS) */
  --rei-primary:          var(--rei-navy-900);
  --rei-primary-light:    var(--rei-navy-100);
  --rei-primary-hover:    var(--rei-navy-950);
  --rei-secondary:        var(--rei-gold-700);
  --rei-secondary-light:  var(--rei-gold-200);
  --rei-secondary-hover:  var(--rei-gold-900);
  --rei-accent:           var(--rei-gold-700);
  --rei-dark:             var(--rei-ink);
  --rei-light:            var(--rei-navy-50);
  --rei-border:           var(--rei-line);

  /* Opacity variants (no raw rgba) */
  --rei-primary-10: color-mix(in srgb, var(--rei-primary) 10%, transparent);
  --rei-primary-15: color-mix(in srgb, var(--rei-primary) 15%, transparent);
  --rei-dark-60: color-mix(in srgb, var(--rei-dark) 60%, transparent);
  --rei-dark-70: color-mix(in srgb, var(--rei-dark) 70%, transparent);
  --rei-white-10: color-mix(in srgb, var(--rei-white) 10%, transparent);
  --rei-white-15: color-mix(in srgb, var(--rei-white) 15%, transparent);
  --rei-white-40: color-mix(in srgb, var(--rei-white) 40%, transparent);
  --rei-black-5: color-mix(in srgb, #000 5%, transparent);
  --rei-black-8: color-mix(in srgb, #000 8%, transparent);
  --rei-black-10: color-mix(in srgb, #000 10%, transparent);
  --rei-black-12: color-mix(in srgb, #000 12%, transparent);
  --rei-black-15: color-mix(in srgb, #000 15%, transparent);
  --rei-black-60: rgba(0, 0, 0, 0.6);

  /* ── Typography ── */
  --rei-heading: 'Perpetua', Georgia, 'Times New Roman', Cambria, serif;
  --rei-heading-display: 'Perpetua Titling', 'Perpetua', Georgia, serif;
  --rei-body-font: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Generic size scale (rem-based) */
  --rei-fs-xs: 0.75rem;     /* 12px */
  --rei-fs-sm: 0.875rem;    /* 14px */
  --rei-fs-base: 1rem;      /* 16px */
  --rei-fs-md: 1.125rem;    /* 18px */
  --rei-fs-lg: 1.25rem;     /* 20px */
  --rei-fs-xl: 1.5rem;      /* 24px */
  --rei-fs-2xl: 2rem;       /* 32px */
  --rei-fs-3xl: 2.5rem;     /* 40px */
  --rei-fs-4xl: 3.5rem;     /* 56px */

  /* Semantic heading scale (from Figma desktop type styles) */
  --rei-h1:           3.5rem;     /* 56px */
  --rei-h2:           2.625rem;   /* 42px */
  --rei-h3:           2rem;       /* 32px */
  --rei-h4:           1.375rem;   /* 22px */
  --rei-h5:           1.5rem;     /* 24px */

  /* Mobile heading overrides (from Figma mobile type styles) */
  --rei-h1-mobile:    2.875rem;   /* 46px */
  --rei-h2-mobile:    2.25rem;    /* 36px */

  /* Line heights (from Figma type styles) */
  --rei-lh-tight:     1.0;        /* H2, H3, H4 */
  --rei-lh-heading:   1.2;        /* H1 */
  --rei-lh-loose:     1.4;        /* H5 */
  --rei-lh-body:      1.5;        /* Text 18, Text 16 */

  /* ── Spacing ── */
  --rei-space-xs: 0.25rem;
  --rei-space-sm: 0.5rem;
  --rei-space-md: 1rem;
  --rei-space-lg: 1.5rem;
  --rei-space-xl: 2rem;
  --rei-space-2xl: 3rem;
  --rei-space-3xl: 5rem;
  --rei-section-pad: clamp(3rem, 6vw, 5rem);

  /* ── Radius ── */
  --rei-radius-sm: 4px;
  --rei-radius-md: 8px;
  --rei-radius-lg: 16px;
  --rei-radius-image: 30px;       /* hero + content imagery, from Figma */
  --rei-radius-full: 9999px;

  /* ── Shadows ── */
  --rei-shadow-sm: 0 1px 2px var(--rei-black-5);
  --rei-shadow-md: 0 4px 12px var(--rei-black-8);
  --rei-shadow-lg: 0 10px 30px var(--rei-black-12);
  --rei-shadow-xl: 0 20px 50px var(--rei-black-15);

  /* ── Transitions ── */
  --rei-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --rei-transition-fast: 0.15s var(--rei-ease);
  --rei-transition-base: 0.3s var(--rei-ease);
  --rei-transition-slow: 0.6s var(--rei-ease);

  /* ── Breakpoints (reference only, used in media queries) ──
     --rei-bp-xs:  480px;
     --rei-bp-sm:  768px;
     --rei-bp-md:  1024px;
     --rei-bp-lg:  1280px;
  */

  /* ── Layout ── */
  --rei-header-height: 72px;
  --rei-container: 1200px;
}


/* ===========================================
   2. BASE / RESET / GP OVERRIDES
   =========================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--rei-body-font);
  color: var(--rei-body);
  background: var(--rei-paper);   /* #FAFAF9 */
  font-size: var(--rei-fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

/* Hide GeneratePress default header — we render our own */
.site-header { display: none !important; }

/* Remove GP padding/margin on pages */
.page .entry-content,
.page .site-content .entry-content {
  padding: 0;
  margin: 0;
}
.page .inside-article,
.page .entry-content {
  max-width: 100%;
}
body.page .site-content .content-area {
  padding: 0;
}
.page-header { display: none; }
/* Hide GP default 404 content — we use our own */
.error404 .site-content .inside-article { display: none; }

/* Container */
.rei-container {
  max-width: var(--rei-container);
  margin-inline: auto;
  padding-inline: var(--rei-space-lg);
}


/* ===========================================
   3. TYPOGRAPHY & SHARED COMPONENTS
   Aligned to Figma type styles. Token map in section 1.
   - H1: 56 / 1.2 lh (mobile: 46)
   - H2: 42 / 1.0 lh (mobile: 36)
   - H3: 32 / 1.0 lh
   - H4: 22 / 1.0 lh
   - H5: 24 / 1.4 lh
   - Body 18 + 16, weights 400-700 (300 = Light, fallback to 400)
   - Eyebrow: Perpetua 22 / gold-700 / tracking 0.1em
   =========================================== */

/* Heading element resets */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rei-heading);
  color: var(--rei-navy-900);
  font-weight: 400;
  margin: 0;
}

/* Semantic heading classes — apply heading styling to any element */
.rei-h1, h1 {
  font-family: var(--rei-heading);
  font-size: var(--rei-h1);
  line-height: var(--rei-lh-heading);   /* 1.2 */
  color: var(--rei-navy-900);
  letter-spacing: 0;
}
.rei-h2, h2 {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);     /* 1.0 */
  color: var(--rei-navy-900);
  letter-spacing: 0;
}
.rei-h3, h3 {
  font-family: var(--rei-heading);
  font-size: var(--rei-h3);
  line-height: var(--rei-lh-tight);
  color: var(--rei-navy-900);
}
.rei-h4, h4 {
  font-family: var(--rei-heading);
  font-size: var(--rei-h4);
  line-height: var(--rei-lh-tight);
  color: var(--rei-navy-900);
}
.rei-h5, h5 {
  font-family: var(--rei-heading);
  font-size: var(--rei-h5);
  line-height: var(--rei-lh-loose);     /* 1.4 */
  color: var(--rei-navy-900);
}

/* Eyebrow — Perpetua 24, gold-700, wide tracking, small-caps. Pass text
   in lowercase so small-caps renders the typographic uppercase glyphs. */
.rei-eyebrow {
  font-family: var(--rei-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.1em;
  font-variant: small-caps;
  color: var(--rei-gold-700);
  margin: 0;
}
.rei-eyebrow--on-dark { color: var(--rei-gold-200); }

/* Section Header — eyebrow + heading + description.
   Left-aligned by default per Figma; opt-in to centered via modifier. */
.rei-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--rei-space-md);
  margin-bottom: var(--rei-space-2xl);
}
.rei-section-header--centered {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.rei-section-heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-section-desc {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  margin: 0;
}

/* Inline mark — used inside headings for gold-highlighted spans */
.rei-mark {
  color: var(--rei-gold-700);
}

/* Body text utilities — pair with weight modifiers if needed */
.rei-text-md {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);          /* 18 */
  line-height: var(--rei-lh-body);      /* 1.5 */
  color: var(--rei-body);
  margin: 0;
}
.rei-text-base,
.rei-body-text {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-base);        /* 16 */
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  margin: 0;
}

/* Weight modifiers — apply to .rei-text-*. Note: Archivo variable font ships
   400-700; weight 300 will render as 400 unless an Archivo Light face is added. */
.rei-text--light    { font-weight: 300; }
.rei-text--regular  { font-weight: 400; }
.rei-text--medium   { font-weight: 500; }
.rei-text--semibold { font-weight: 600; }
.rei-text--bold     { font-weight: 700; }

/* Colour modifiers */
.rei-text--muted { color: var(--rei-muted); }
.rei-text--ink   { color: var(--rei-ink); }
.rei-text--on-dark { color: var(--rei-white); }

/* Visually hidden */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Mobile heading overrides */
@media (max-width: 768px) {
  .rei-h1, h1 { font-size: var(--rei-h1-mobile); }   /* 46 */
  .rei-h2, h2,
  .rei-section-heading { font-size: var(--rei-h2-mobile); }   /* 36 */
}


/* ===========================================
   3.5 SHARED MOLECULES
   Small reusable compositions that combine atoms.
   =========================================== */

/* --- Tags (eyebrow + small logo mark) --------------------------------
   Section-header pattern used across the site (About, Why Now, The Gap,
   Our Approach, About Kelly, Inside the Training).
*/
.rei-tags {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.rei-tags__icon {
  width: 20px;
  height: 19px;
  flex-shrink: 0;
  display: block;
}
.rei-tags .rei-eyebrow { margin: 0; }


/* --- Proof card (Figma symbol 2168:2529) -----------------------------
   Used by About section (proof points: "15+ years", "WorkSafe-aligned" etc).
   Icon-cube on the left, title + description stacked on the right.
   Card is white with line border and Shadow 3.
*/
/* Used on About (stat tiles, div) and Contact (clickable tiles, a). When
   wrapped in an anchor, text-decoration + color reset keeps the visual
   identical. Title wraps (no nowrap) so long values like email addresses
   don't overflow narrow columns. Hover lift comes from the global card
   transition rule near the bottom of this file. */
.rei-proof-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px 24px 12px;
  background: var(--rei-white);
  border: 1px solid var(--rei-line);
  text-decoration: none;
  color: inherit;
  box-shadow:
    0 2px 4px rgba(40, 41, 61, 0.04),
    0 8px 16px rgba(96, 97, 112, 0.16);
}
.rei-proof-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--rei-gold-700);   /* drives the duotone fill + stroke */
}
.rei-proof-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rei-proof-card__title {
  display: block;
  font-family: var(--rei-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--rei-navy-900);
  margin: 0;
  word-break: break-word;
}
.rei-proof-card__desc {
  display: block;
  font-family: var(--rei-body-font);
  font-size: 15px;
  font-weight: 400;
  line-height: var(--rei-lh-body);
  color: var(--rei-muted);
  margin: 0;
}

/* --- Approach card (Figma 2033:7444 — Our approach section card) -----
   Bigger than the proof card: 32/24 padding, 26px Perpetua title, multi-line
   muted description, icon-left. White bg, line border, Shadow 3.
*/
.rei-approach-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 24px;
  background: var(--rei-white);
  border: 1px solid var(--rei-line);
  box-shadow:
    0 2px 4px rgba(40, 41, 61, 0.04),
    0 8px 16px rgba(96, 97, 112, 0.16);
}
.rei-approach-card__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--rei-gold-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rei-approach-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rei-approach-card__title {
  font-family: var(--rei-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-approach-card__desc {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--rei-muted);
  margin: 0;
}


/* --- Numeral Dot Point (Figma symbol 2168:2603) -----------------------
   Roman-numeral list row used in Section 4 (Is this for me?),
   Section 6 (Where existing training falls short),
   Section 10 (Inside the training).
   Numeral on the left in Perpetua Titling gold; title + description stacked.
*/
.rei-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rei-line);
}
.rei-point--last,
.rei-point:last-child {
  border-bottom: none;
}
.rei-point__numeral {
  width: 36px;
  flex-shrink: 0;
  font-family: var(--rei-heading-display);   /* Perpetua Titling */
  font-size: 24px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0.075em;                    /* 1.8px on 24px */
  color: var(--rei-gold-700);
}
.rei-point__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rei-point__title {
  font-family: var(--rei-heading);
  font-size: var(--rei-h3);                  /* 32 */
  font-weight: 400;
  line-height: var(--rei-lh-tight);
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-point__desc {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);               /* 18 */
  font-weight: 300;
  line-height: var(--rei-lh-body);
  color: var(--rei-muted);
  margin: 0;
}

/* --- Pull quote card --------------------------------------------------
   Section 8 (Kelly pull quote). Cream paper with left gold border.
   Big quote mark inside.
*/
.rei-pullquote {
  position: relative;
  background: var(--rei-paper);
  border-left: 6px solid var(--rei-gold-700);
  padding: 60px 42px 42px 54px;
  max-width: 700px;
}
.rei-pullquote::before {
  content: '\201C';                          /* left double quote */
  position: absolute;
  left: 22px;
  top: 20px;
  font-family: var(--rei-heading);
  font-size: 120px;
  line-height: 1;
  color: var(--rei-gold-300);
  pointer-events: none;
}
.rei-pullquote__body {
  font-family: var(--rei-heading);
  font-size: 30px;
  font-style: italic;
  line-height: 1.213;
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-pullquote__body strong {
  font-weight: 700;
}
.rei-pullquote__cite {
  display: block;
  margin-top: 16px;
  font-family: var(--rei-body-font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rei-muted);
}

/* Rich byline variant — logo icon + name + qualifications */
.rei-pullquote__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.rei-pullquote__byline-icon {
  width: 40px;
  height: 39px;
  flex-shrink: 0;
  display: block;
}
.rei-pullquote__byline-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rei-pullquote__byline-name {
  font-family: var(--rei-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--rei-navy-900);
}
.rei-pullquote__byline-quals {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--rei-muted);
}


/* ===========================================
   4. BUTTONS
   =========================================== */

/* Button reset utility */
.rei-btn-reset {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.rei-btn-reset:hover,
.rei-btn-reset:focus,
.rei-btn-reset:active {
  background: transparent;
  outline: none;
  box-shadow: none;
}

/* Base button — Figma production spec (node 1:5059).
   Perpetua Regular, 18px uppercase, tracking 0.1em.
   14×32 padding, 0 radius (sharp), 12px gap to icon.
   Icon defaults to 'after' (east arrow, 20×20). Modifiers:
     .rei-btn--icon-before  — arrow on the left
     .rei-btn--icon-off     — no arrow
*/
.rei-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px 14px 32px;
  font-family: var(--rei-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease,
              border-color 0.18s ease,
              color 0.18s ease;
}

/* East-arrow icon (Material Icons 'east'), inked via mask so it inherits currentColor */
.rei-btn::before,
.rei-btn::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
}
.rei-btn::before { display: none; } /* default: hide leading icon */

/* Icon placement modifiers */
.rei-btn--icon-off::before,
.rei-btn--icon-off::after { display: none; }
.rei-btn--icon-before::before { display: inline-block; }
.rei-btn--icon-before::after  { display: none; }

/* Primary — Navy fill, Gold 200 text (Figma node 2169:565 / 2169:563 primary-with-arrow).
   Hover deepens bg to Navy 950 and brightens text to Gold 100 for contrast. */
.rei-btn--primary {
  background: var(--rei-navy-900);
  color: var(--rei-gold-100);
  border-color: var(--rei-navy-900);
}
.rei-btn--primary:hover {
  background: var(--rei-navy-950);
  color: var(--rei-gold-100);
  border-color: var(--rei-navy-950);
}

/* Secondary — Gold 700 fill, Navy text. Hover goes LIGHTER to Gold 300 (distinctive). */
.rei-btn--secondary {
  background: var(--rei-gold-700);
  color: var(--rei-navy-900);
  border-color: var(--rei-gold-700);
}
.rei-btn--secondary:hover {
  background: var(--rei-gold-300);
  border-color: var(--rei-gold-300);
}

/* Outline — White fill, Navy border + text, Navy-100 lavender fill on hover */
.rei-btn--outline {
  background: var(--rei-white);
  color: var(--rei-navy-900);
  border-color: var(--rei-navy-900);
}
.rei-btn--outline:hover {
  background: var(--rei-navy-100);
}

/* Text — transparent, no border, no padding. Same type + arrow. */
.rei-btn--text {
  background: transparent;
  color: var(--rei-navy-900);
  border-color: transparent;
  padding: 0;
}
.rei-btn--text:hover {
  color: var(--rei-navy-700);
}

/* Small size modifier — pair with any variant */
.rei-btn--sm {
  padding: 10px 22px;
  font-size: 14px;
}
.rei-btn--sm::before,
.rei-btn--sm::after {
  width: 16px;
  height: 16px;
}

/* Mobile — buttons stretch to fill their parent so they read as touch targets,
   tighter type + padding, and white-space wrap as a safety net so a long label
   can never push its column wider than the viewport. */
@media (max-width: 768px) {
  .rei-btn {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 15px 20px 13px;
    font-size: 18px;
    letter-spacing: 0.06em;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    word-break: break-word;
  }
  /* Keep the small variant compact even on mobile — used in tight contexts */
  .rei-btn--sm {
    width: auto;
    padding: 10px 18px;
    font-size: 13px;
  }
  /* Text-link buttons don't need full width — they're inline link affordances */
  .rei-btn--text {
    display: inline-flex;
    width: auto;
    padding: 0;
  }
  /* Action rows stack vertically so each button gets a full row */
  .rei-hero__actions,
  .rei-kelly__actions,
  .rei-about__paragraph,
  .rei-gap__content,
  .rei-audience__actions,
  .rei-approach__head,
  .rei-inside__actions,
  .rei-tiers__cta {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ===========================================
   5. HEADER & DESKTOP NAVIGATION — Figma node 2033:7311
   White bg, sticky-top, 1440 max width, 64px horiz / 16px vert padding.
   Logo left, nav links + Contact CTA right (gap 32).
   =========================================== */
.rei-header {
  position: sticky;
  top: 0;
  z-index: 2000;
  background: var(--rei-paper);   /* #FAFAF9 — matches body so nav blends */
  transition: box-shadow var(--rei-transition-base);
}
.rei-header.scrolled {
  box-shadow: var(--rei-shadow-md);
}

.rei-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin-inline: auto;
  padding: 16px 64px;
  min-height: var(--rei-header-height);
}

.rei-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.rei-header__logo img {
  height: 60px;
  width: auto;
  display: block;
}

.rei-header__right {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Desktop nav */
.rei-nav-desktop {
  display: flex;
  align-items: center;
}
.rei-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rei-nav__links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-base);   /* 16 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--rei-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--rei-transition-fast);
}
.rei-nav__links > li > a:hover {
  color: var(--rei-gold-700);
}
.rei-nav__links > li > a svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
}

/* Dropdown */
.rei-nav__dropdown {
  position: relative;
}
.rei-nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--rei-white);
  border-radius: var(--rei-radius-md);
  box-shadow: var(--rei-shadow-lg);
  padding: var(--rei-space-sm) 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rei-transition-fast), visibility var(--rei-transition-fast);
  z-index: 2001;
}
.rei-nav__dropdown:hover .rei-nav__dropdown-menu,
.rei-nav__dropdown:focus-within .rei-nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
}
.rei-nav__dropdown-menu li a {
  display: block;
  padding: var(--rei-space-sm) var(--rei-space-lg);
  font-size: var(--rei-fs-sm);
  color: var(--rei-body);
  transition: background var(--rei-transition-fast), color var(--rei-transition-fast);
}
.rei-nav__dropdown-menu li a:hover {
  background: var(--rei-light);
  color: var(--rei-primary);
}

/* Header CTA — note this class is now on the button itself, not a wrapper.
   Button styles come from .rei-btn / .rei-btn--primary. */

/* Mobile toggle — hidden on desktop */
.rei-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--rei-space-sm);
  z-index: 2001;
}
.rei-mobile-toggle svg {
  width: 28px;
  height: 28px;
  color: var(--rei-dark);
}
/* Two-SVG icon swap — hamburger/close (Rule 33: never CSS-transform lines) */
.rei-mobile-toggle .rei-icon--x { display: none; }
.rei-mobile-toggle[aria-expanded="true"] .rei-icon--menu { display: none; }
.rei-mobile-toggle[aria-expanded="true"] .rei-icon--x { display: block; }

@media (max-width: 1024px) {
  .rei-header__inner {
    padding: 12px 24px;
  }
  .rei-header__logo img {
    height: 44px;
  }
}

@media (max-width: 768px) {
  .rei-mobile-toggle {
    display: flex;
  }
  .rei-header__right {
    display: none;
  }
}


/* ===========================================
   6. MOBILE MENU
   =========================================== */
.rei-mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: var(--rei-paper);   /* #FAFAF9 — matches body/header */
  z-index: 2000;
  padding: 0 var(--rei-space-lg);
  display: flex;
  flex-direction: column;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.rei-mobile-menu.is-open {
  max-height: 800px;
  padding: var(--rei-space-lg);
  border-top: 1px solid var(--rei-line);
}


.rei-mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.rei-mobile-nav-links li {
  margin-bottom: 0;
}
.rei-mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rei-space-md) 0;
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-base);
  color: var(--rei-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rei-line);
}

/* Chevron for dropdown toggles */
.rei-mobile-nav-link .chevron {
  width: 24px;
  height: 24px;
  transition: transform var(--rei-transition-fast);
}
.rei-mobile-dropdown-toggle.is-open .chevron {
  transform: rotate(180deg);
}

/* Sub-menu */
.rei-mobile-dropdown {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--rei-space-md);
  background: var(--rei-line-soft);
}
.rei-mobile-dropdown.is-open {
  display: block;
}
.rei-mobile-dropdown a {
  display: block;
  padding: var(--rei-space-md) var(--rei-space-md);
  font-size: var(--rei-fs-sm);
  color: var(--rei-body);
  text-decoration: none;
  transition: background var(--rei-transition-fast);
}
.rei-mobile-dropdown a:hover {
  background: var(--rei-line);
}

/* CTA inside mobile menu */
.rei-mobile-menu .rei-btn {
  margin-top: var(--rei-space-lg);
  text-align: center;
}

/* Lock body scroll + overlay behind menu */
body.rei-menu-open {
  overflow: hidden;
}
body.rei-menu-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99;
}


/* ===========================================
   7. HERO SECTION — Figma node 2033:7312 (Home Page Hero 4)
   20px outer gutter. Inner box: rounded-30px, 660px tall,
   dark background image, two-column flex: text + Kelly headshot.
   Headline: Perpetua Bold 56, tight tracking, white.
   =========================================== */
.rei-hero {
  padding: 20px;
  /* Header is sticky and sits in normal flow above us; no margin-top needed */
}

/* Inner rounded card — holds the split text/image layout. Centered, max 1400. */
.rei-hero__inner {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 1400px;
  height: 660px;
  margin: 0 auto;
  border-radius: var(--rei-radius-image);     /* 30px */
  overflow: hidden;
  isolation: isolate;
}

/* Left column — text + CTAs on the navy/purple texture background. */
.rei-hero__content {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 64px;
  color: var(--rei-white);
  background-color: var(--rei-navy-900);
  background-image: url('images/purple-background-half.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.rei-hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rei-hero__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h1);                   /* 56 */
  font-weight: 700;                            /* Bold per Figma */
  line-height: var(--rei-lh-heading);          /* 1.2 */
  letter-spacing: -0.03em;                     /* -1.68px on 56 */
  color: inherit;
  margin: 0;
}

.rei-hero__sub {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);                /* 18 */
  font-weight: 400;
  line-height: var(--rei-lh-body);            /* 1.5 */
  color: inherit;
  margin: 0;
  opacity: 0.95;
}

.rei-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Right column — full-height image fills the other half of the inner box */
.rei-hero__media {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  overflow: hidden;
}
.rei-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablet — keep two columns but tighten padding */
@media (max-width: 1024px) {
  .rei-hero__content {
    padding: 0 40px;
    gap: 24px;
  }
  .rei-hero__heading {
    font-size: 3rem;        /* 48px between desktop 56 and mobile 46 */
  }
}

/* Mobile — stack vertically, no fixed height */
@media (max-width: 768px) {
  .rei-hero {
    padding: 0 16px;
  }
  .rei-hero__inner {
    flex-direction: column;
    height: auto;
  }
  .rei-hero__content {
    padding: 48px 24px;
    gap: 24px;
    justify-content: flex-start;
    flex: 0 0 auto;
  }
  .rei-hero__text {
    gap: 16px;
  }
  .rei-hero__heading {
    font-size: var(--rei-h1-mobile);          /* 46 */
  }
  .rei-hero__sub {
    max-width: 100%;
  }
  .rei-hero__actions {
    width: 100%;
  }
  .rei-hero__actions .rei-btn {
    flex: 1 1 0;
    justify-content: center;
  }
  .rei-hero__media {
    flex: 0 0 auto;
    width: 100%;
    height: 360px;
  }
}


/* ===========================================
   8. ABOUT SECTION — Figma node 2033:7324
   Section header (tags + heading) on top.
   Two-column content: paragraph + button left, 2x2 proof-card grid right.
   =========================================== */
.rei-about {
  background: var(--rei-paper);
  padding: 80px 64px;
}
.rei-about__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Top — eyebrow tag + heading */
.rei-about__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rei-about__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
  max-width: 1280px;
}

/* Two-col content row */
.rei-about__content {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

/* Left column — paragraph + button */
.rei-about__paragraph {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.rei-about__body {
  font-family: var(--rei-body-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--rei-body);
  margin: 0;
}

/* Right column — 2x2 proof-card grid */
.rei-about__cards {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

/* Tablet — tighten padding, smaller gap */
@media (max-width: 1024px) {
  .rei-about {
    padding: 64px 32px;
  }
  .rei-about__content {
    gap: 40px;
  }
}

/* Mobile — stack vertically, single-col cards */
@media (max-width: 768px) {
  .rei-about {
    padding: 48px 20px;
  }
  .rei-about__content {
    flex-direction: column;
    gap: 32px;
  }
  .rei-about__cards {
    grid-template-columns: 1fr;
  }
}


/* ===========================================
   9. WHY NOW SECTION — Figma node 2175:4145 (Layout / Image Offset)
   Two-column zigzag: left = content + image, right = image + content + CTAs.
   =========================================== */
.rei-why-now {
  background: var(--rei-paper);
  padding: 80px 64px;
}
.rei-why-now__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  align-items: flex-start;
}
.rei-why-now__column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 84px;
}

/* Heading uses standard H2 token */
.rei-why-now__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
}

/* Content block — eyebrow + heading + paragraphs (and optional CTAs below) */
.rei-why-now__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rei-why-now__body p {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);      /* 18 */
  line-height: var(--rei-lh-body);  /* 1.5 */
  color: var(--rei-body);
  margin: 0 0 24px 0;
}
.rei-why-now__body p:last-child {
  margin-bottom: 0;
}
.rei-why-now__body strong {
  font-weight: 700;
}

/* Image — 429px tall card, 30px radius matches token */
.rei-why-now__image {
  width: 100%;
  height: 429px;
  border-radius: var(--rei-radius-image);
  overflow: hidden;
}
.rei-why-now__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right-column CTAs sit under the right content block */
.rei-why-now__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

@media (max-width: 1024px) {
  .rei-why-now { padding: 64px 32px; }
  .rei-why-now__container { gap: 48px; }
  .rei-why-now__column { gap: 48px; }
  .rei-why-now__image { height: 320px; }
}

@media (max-width: 768px) {
  .rei-why-now { padding: 48px 20px; }
  .rei-why-now__container {
    flex-direction: column;
    gap: 32px;
  }
  .rei-why-now__column { gap: 32px; }
  .rei-why-now__image { height: 240px; }
  .rei-why-now__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .rei-why-now__actions .rei-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* ===========================================
   10. IS THIS FOR ME — Figma node 2165:2394 (Layout / Left+Right / Flipped)
   Left: tags + heading + description + single CTA (with arrow).
   Right: stacked .rei-point molecules (Roman numerals).
   =========================================== */
.rei-audience {
  background: var(--rei-paper);
  padding: 80px 64px;
}
.rei-audience__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* Left column — eyebrow, heading, description, CTA */
.rei-audience__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: calc(var(--rei-header-height) + var(--rei-space-lg));
  align-self: flex-start;
}
.rei-audience__heading-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rei-audience__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-audience__desc {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);
  font-weight: 300;
  line-height: var(--rei-lh-body);
  color: var(--rei-muted);
  margin: 0;
}
.rei-audience__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

/* Right column — numbered points stack */
.rei-audience__points {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1024px) {
  .rei-audience { padding: 64px 32px; }
  .rei-audience__container { gap: 48px; }
}

@media (max-width: 768px) {
  .rei-audience { padding: 48px 20px; }
  .rei-audience__container {
    flex-direction: column;
    gap: 32px;
  }
  .rei-audience__content { position: static; }
  .rei-audience__actions { width: 100%; }
  .rei-audience__actions .rei-btn {
    flex: 1 1 0;
    justify-content: center;
  }
}


/* ===========================================
   12. LEAD MAGNET BANNER — Figma node 2033:7378 (Banners/Image)
   Full-bleed purple background; inner rounded-30 card with two columns:
   left = heading + body + bulleted list + CTA on paper bg; right = image.
   =========================================== */
.rei-leadmag {
  padding: 80px 64px;
  background-color: var(--rei-navy-900);
  background-image: url('images/purple-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.rei-leadmag__card {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  background: var(--rei-paper);
  border-radius: var(--rei-radius-image);
  overflow: hidden;
}

.rei-leadmag__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px 40px 80px 64px;
  align-items: flex-start;
}

.rei-leadmag__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
}

.rei-leadmag__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);             /* 18 */
  line-height: var(--rei-lh-body);         /* 1.5 */
  color: var(--rei-muted);
  width: 100%;
}
.rei-leadmag__body p {
  margin: 0;
}
.rei-leadmag__body ul {
  margin: 0;
  padding-left: 27px;
  list-style: disc;
}
.rei-leadmag__body ul li {
  margin-bottom: 4px;
}
.rei-leadmag__body ul li:last-child { margin-bottom: 0; }

.rei-leadmag__image {
  flex: 0 0 386px;
  align-self: stretch;
  min-height: 100%;
}
.rei-leadmag__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .rei-leadmag {
    padding: 64px 32px;
  }
  .rei-leadmag__content {
    padding: 56px 32px;
    gap: 24px;
  }
  .rei-leadmag__image {
    flex-basis: 280px;
  }
}

@media (max-width: 768px) {
  .rei-leadmag {
    padding: 48px 20px;
  }
  .rei-leadmag__card {
    flex-direction: column;
  }
  .rei-leadmag__content {
    padding: 40px 24px;
    gap: 24px;
  }
  .rei-leadmag__image {
    flex: 0 0 auto;
    width: 100%;
    height: 240px;
  }
}


/* ===========================================
   13. GAP SECTION — Figma node 2033:7387 (Layout / Left+Right / Flipped)
   "Where existing training falls short". Left: tags + heading + 3 numeral
   points + 2 CTAs. Right: image, full-height rounded.
   =========================================== */
.rei-gap {
  background: var(--rei-paper);
  padding: 80px 64px;
}
.rei-gap__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 84px;
  align-items: center;
}

.rei-gap__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rei-gap__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rei-gap__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-gap__points {
  display: flex;
  flex-direction: column;
}
.rei-gap__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.rei-gap__image {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  border-radius: var(--rei-radius-image);
  overflow: hidden;
  min-height: 480px;
}
.rei-gap__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .rei-gap { padding: 64px 32px; }
  .rei-gap__container { gap: 48px; }
  .rei-gap__image { min-height: 380px; }
}

@media (max-width: 768px) {
  .rei-gap { padding: 48px 20px; }
  .rei-gap__container {
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }
  .rei-gap__image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .rei-gap__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .rei-gap__actions .rei-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* ===========================================
   14. APPROACH SECTION — Figma node 2033:7424 (Layout / Cards Horizontal)
   Top: tags + heading + description on left, primary CTA on right.
   Bottom: 3-col grid of .rei-approach-card (6 cards across 2 rows).
   =========================================== */
.rei-approach {
  background: var(--rei-paper);
  padding: 80px 64px;
}
.rei-approach__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.rei-approach__head {
  display: flex;
  gap: 64px;
  align-items: center;
}
.rei-approach__head-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rei-approach__heading-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rei-approach__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-approach__desc {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);
  font-weight: 300;
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  margin: 0;
}
.rei-approach__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1024px) {
  .rei-approach { padding: 64px 32px; }
  .rei-approach__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rei-approach__head { gap: 32px; }
}
@media (max-width: 768px) {
  .rei-approach { padding: 48px 20px; }
  .rei-approach__head { flex-direction: column; align-items: stretch; gap: 24px; }
  .rei-approach__cards { grid-template-columns: 1fr; }
}


/* ===========================================
   16. PULL QUOTE BANNER — Figma node 2033:7481 (Frame 326)
   20px outer gutter, rounded-30 inner banner with purple texture bg,
   .rei-pullquote molecule sits centered on top.
   =========================================== */
.rei-pullquote-section {
  padding: 0 20px;
}
.rei-pullquote-section__banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 64px;
  border-radius: var(--rei-radius-image);
  overflow: hidden;
  background-color: var(--rei-navy-900);
  background-image: url('images/purple-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rei-pullquote-section .rei-pullquote {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .rei-pullquote-section { padding: 0 16px; }
  .rei-pullquote-section__banner { padding: 48px 24px; }
  .rei-pullquote {
    padding: 62px 24px 32px 24px !important;
    max-width: 100% !important;
  }
  .rei-pullquote__body { font-size: 24px !important; line-height: 1.3 !important; }
}


/* ===========================================
   17. WHY KELLY — Figma node 2033:7488 (Layout / Left+Right / Flipped)
   Left: Kelly's portrait, full-height rounded.
   Right: tags + clinical quote heading + name/quals byline + bio + 2 CTAs.
   =========================================== */
.rei-kelly {
  background: var(--rei-paper);
  padding: 80px 64px;
}
.rei-kelly__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 84px;
  align-items: center;
}

.rei-kelly__image {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  min-height: 480px;
  max-height: 584px;
  border-radius: var(--rei-radius-image);
  overflow: hidden;
}
.rei-kelly__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rei-kelly__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rei-kelly__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rei-kelly__quote,
.rei-kelly__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
}

.rei-kelly__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.rei-kelly__byline-icon {
  width: 40px;
  height: 39px;
  flex-shrink: 0;
}
.rei-kelly__byline-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rei-kelly__byline-name {
  font-family: var(--rei-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-kelly__byline-quals {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-sm);
  font-weight: 300;
  line-height: 1.5;
  color: var(--rei-muted);
  margin: 0;
}

.rei-kelly__bio {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);
  font-weight: 400;
  line-height: var(--rei-lh-body);
  color: var(--rei-muted);
}
.rei-kelly__bio p {
  margin: 0 0 24px 0;
}
.rei-kelly__bio p:last-child {
  margin-bottom: 0;
}

.rei-kelly__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 1024px) {
  .rei-kelly { padding: 64px 32px; }
  .rei-kelly__container { gap: 48px; }
  .rei-kelly__image { min-height: 420px; }
}
@media (max-width: 768px) {
  .rei-kelly { padding: 48px 20px; }
  .rei-kelly__container { flex-direction: column; gap: 32px; align-items: stretch; }
  .rei-kelly__image { aspect-ratio: 4 / 5; min-height: 0; max-height: none; }
  .rei-kelly__actions { width: 100%; }
  .rei-kelly__actions .rei-btn { flex: 1 1 0; justify-content: center; }
}


/* ===========================================
   18. INSIDE THE TRAINING — Figma node 2033:7507 (Layout / Left+Right / Flipped)
   Left: tags + heading + description + 4 numeral points + 2 CTAs.
   Right: full-height image, rounded.
   =========================================== */
.rei-inside {
  background: var(--rei-paper);
  padding: 80px 64px;
}
.rei-inside__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 84px;
  align-items: center;
}
.rei-inside__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rei-inside__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rei-inside__heading-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rei-inside__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-inside__desc {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);
  font-weight: 300;
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  margin: 0;
}
.rei-inside__points {
  display: flex;
  flex-direction: column;
}
.rei-inside__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.rei-inside__image {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  min-height: 640px;
  max-height: 802px;
  border-radius: var(--rei-radius-image);
  overflow: hidden;
}
.rei-inside__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .rei-inside { padding: 64px 32px; }
  .rei-inside__container { gap: 48px; }
  .rei-inside__image { min-height: 480px; }
}
@media (max-width: 768px) {
  .rei-inside { padding: 48px 20px; }
  .rei-inside__container { flex-direction: column; gap: 32px; align-items: stretch; }
  .rei-inside__image { min-height: 0; max-height: none; aspect-ratio: 4 / 3; }
  .rei-inside__actions { width: 100%; }
  .rei-inside__actions .rei-btn { flex: 1 1 0; justify-content: center; }
}


/* ===========================================
   11. PROCESS SECTION
   =========================================== */
.rei-process {
  padding: var(--rei-section-pad) 0;
}

.rei-process__steps {
  display: flex;
  gap: var(--rei-space-xl);
  align-items: flex-start;
  position: relative;
}

.rei-process__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Connector line between steps on desktop */
.rei-process__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(57%);
  width: calc(100%);
  height: 2px;
  background: var(--rei-border);
}

.rei-process__number {
  width: 48px;
  height: 48px;
  border-radius: var(--rei-radius-full);
  background: var(--rei-primary);
  color: var(--rei-white);
  font-family: var(--rei-heading);
  font-weight: 700;
  font-size: 24px;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--rei-space-md);
  position: relative;
  z-index: 1;
}

.rei-process__title {
  font-family: var(--rei-heading);
  font-size: var(--rei-fs-lg);
  font-weight: 700;
  color: var(--rei-dark);
  margin-bottom: var(--rei-space-sm);
}

.rei-process__desc {
  font-size: var(--rei-fs-sm);
  color: var(--rei-muted);
  line-height: 1.6;
  max-width: 240px;
}

@media (max-width: 768px) {
  .rei-process__steps {
    flex-direction: column;
    gap: var(--rei-space-xl);
  }
  .rei-process__step:not(:last-child)::after {
    display: none;
  }
  .rei-process__step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--rei-space-md);
    text-align: left;
    align-items: start;
  }
  .rei-process__number {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .rei-process__title {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 4px;
  }
  .rei-process__desc {
    grid-column: 2;
    grid-row: 2;
    max-width: 100%;
  }
}


/* ===========================================
   14. CTA BANNER SECTION — 3 variants
   =========================================== */

/* --- Shared CTA base --- */
.rei-cta {
  position: relative;
  padding: var(--rei-section-pad) 0;
  overflow: hidden;
}
.rei-cta__container {
  position: relative;
  z-index: 2;
}
.rei-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rei-space-md);
  margin-top: var(--rei-space-lg);
}
.rei-cta__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.rei-cta__overlay {
  position: absolute;
  inset: 0;
  background: var(--rei-dark-70);
  z-index: 1;
}

/* --- Variant 1: card-bg (dark card over background image) --- */
.rei-cta--card-bg {
  padding: var(--rei-space-3xl) 0;
}
.rei-cta--card-bg .rei-cta__card {
  background: var(--rei-dark);
  border-radius: var(--rei-radius-lg);
  padding: var(--rei-space-2xl) var(--rei-space-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rei-space-2xl);
  color: var(--rei-white);
}
.rei-cta--card-bg .rei-cta__content {
  flex: 1;
}
.rei-cta--card-bg .rei-section-heading {
  color: var(--rei-white);
  text-align: left;
  margin-bottom: var(--rei-space-sm);
}
.rei-cta--card-bg .rei-body-text {
  color: var(--rei-white-70);
  max-width: 520px;
}
.rei-cta--card-bg .rei-cta__actions {
  flex-shrink: 0;
  gap: var(--rei-space-sm);
  margin-top: 0;
}
.rei-cta--card-bg .rei-cta__actions .rei-btn {
  white-space: nowrap;
}
.rei-cta--card-bg .rei-btn--outline {
  border-color: var(--rei-white);
  color: var(--rei-white);
}
.rei-cta--card-bg .rei-btn--outline:hover {
  background: var(--rei-white);
  color: var(--rei-dark);
}
@media (max-width: 768px) {
  .rei-cta--card-bg .rei-cta__card {
    flex-direction: column;
    text-align: center;
    padding: var(--rei-space-xl) var(--rei-space-lg);
  }
  .rei-cta--card-bg .rei-section-heading {
    text-align: center;
  }
  .rei-cta--card-bg .rei-cta__actions {
    align-items: center;
    width: 100%;
  }
}

/* --- Variant 2: card-image (text left + image right in a card) --- */
.rei-cta--card-image {
  background: var(--rei-light);
  padding: var(--rei-space-3xl) 0;
}
.rei-cta--card-image .rei-cta__card {
  background: var(--rei-dark);
  border-radius: var(--rei-radius-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  color: var(--rei-white);
}
.rei-cta--card-image .rei-cta__content {
  padding: var(--rei-space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rei-cta--card-image .rei-section-heading {
  color: var(--rei-white);
  text-align: left;
  margin-bottom: var(--rei-space-sm);
}
.rei-cta--card-image .rei-body-text {
  color: var(--rei-white-70);
}
.rei-cta--card-image .rei-cta__actions {
  justify-content: flex-start;
}
.rei-cta--card-image .rei-btn--outline {
  border-color: var(--rei-white);
  color: var(--rei-white);
}
.rei-cta--card-image .rei-btn--outline:hover {
  background: var(--rei-white);
  color: var(--rei-dark);
}
.rei-cta--card-image .rei-cta__image {
  position: relative;
  min-height: 300px;
}
.rei-cta--card-image .rei-cta__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .rei-cta--card-image .rei-cta__card {
    grid-template-columns: 1fr;
  }
  .rei-cta--card-image .rei-cta__image {
    min-height: 220px;
    order: -1;
  }
  .rei-cta--card-image .rei-cta__content {
    padding: var(--rei-space-xl) var(--rei-space-lg);
    text-align: center;
  }
  .rei-cta--card-image .rei-section-heading {
    text-align: center;
  }
  .rei-cta--card-image .rei-cta__actions {
    justify-content: center;
  }
}

/* --- Variant 3: fullwidth (centered text, dark background) --- */
.rei-cta--fullwidth {
  background: var(--rei-dark);
  color: var(--rei-white);
}
.rei-cta--fullwidth::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/logo-icon.svg');
  background-repeat: repeat;
  background-size: 130px;
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
}
.rei-cta--fullwidth .rei-cta__card {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}
.rei-cta--fullwidth .rei-section-heading {
  color: var(--rei-white);
}
.rei-cta--fullwidth .rei-body-text {
  color: var(--rei-white-70);
}
.rei-cta--fullwidth .rei-cta__actions {
  justify-content: center;
}
.rei-cta--fullwidth .rei-btn--outline {
  border-color: var(--rei-white);
  color: var(--rei-white);
}
.rei-cta--fullwidth .rei-btn--outline:hover {
  background: var(--rei-white);
  color: var(--rei-dark);
}


/* ===========================================
   14c. PRICING SECTION
   =========================================== */
.rei-pricing { padding: var(--rei-section-pad) 0; }
.rei-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--rei-space-lg);
  margin-top: var(--rei-space-xl);
}
.rei-pricing__card {
  background: var(--rei-white);
  border: 1px solid var(--rei-border);
  border-radius: var(--rei-radius-lg);
  padding: var(--rei-space-xl);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--rei-transition-base);
}
.rei-pricing__card:hover {
  box-shadow: var(--rei-shadow-lg);
}
.rei-pricing__card--featured {
  border-color: var(--rei-primary);
  box-shadow: var(--rei-shadow-md);
}
.rei-pricing__badge {
  position: absolute;
  top: calc(var(--rei-space-md) * -1);
  left: 50%;
  transform: translateX(-50%);
  background: var(--rei-primary);
  color: var(--rei-white);
  font-size: var(--rei-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--rei-space-xs) var(--rei-space-md);
  border-radius: var(--rei-radius-full);
  white-space: nowrap;
}
.rei-pricing__title {
  font-family: var(--rei-heading);
  font-size: var(--rei-font-xl);
  color: var(--rei-dark);
  margin-bottom: var(--rei-space-sm);
}
.rei-pricing__price {
  margin-bottom: var(--rei-space-lg);
}
.rei-pricing__from {
  font-family: var(--rei-heading);
  font-size: var(--rei-font-3xl);
  font-weight: 700;
  color: var(--rei-dark);
}
.rei-pricing__to {
  font-family: var(--rei-heading);
  font-size: var(--rei-font-3xl);
  font-weight: 700;
  color: var(--rei-dark);
}
.rei-pricing__unit {
  display: block;
  font-size: var(--rei-font-sm);
  color: var(--rei-muted);
  margin-top: var(--rei-space-xs);
}
.rei-pricing__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--rei-space-xl) 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--rei-space-sm);
}
.rei-pricing__features li {
  display: flex;
  align-items: center;
  gap: var(--rei-space-xs);
  font-size: var(--rei-font-sm);
  color: var(--rei-body);
}
.rei-pricing__features .rei-icon {
  color: var(--rei-primary);
  flex-shrink: 0;
}
.rei-pricing__card .rei-btn {
  width: 100%;
  text-align: center;
}
.rei-pricing__footnote {
  text-align: center;
  font-size: var(--rei-font-sm);
  color: var(--rei-muted);
  margin-top: var(--rei-space-lg);
  font-style: italic;
}


/* ===========================================
   14d. BEFORE/AFTER SLIDER
   =========================================== */
.rei-before-after { padding: var(--rei-section-pad) 0; }
.rei-ba__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--rei-space-lg);
  margin-top: var(--rei-space-xl);
}
.rei-ba__card {
  background: var(--rei-white);
  border-radius: var(--rei-radius-lg);
  overflow: hidden;
  box-shadow: var(--rei-shadow-sm);
  transition: var(--rei-transition-base);
}
.rei-ba__card:hover {
  box-shadow: var(--rei-shadow-md);
}
.rei-ba-slider {
  position: relative;
  overflow: hidden;
  cursor: ew-resize;
  aspect-ratio: 4/3;
}
.rei-ba-slider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.rei-ba-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
}
.rei-ba-before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rei-ba-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: var(--rei-white);
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 2;
}
.rei-ba-handle__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: var(--rei-white);
  border-radius: var(--rei-radius-full);
  box-shadow: var(--rei-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rei-dark);
}
.rei-ba-handle__grip svg {
  width: 14px;
  height: 14px;
}
.rei-ba-label {
  position: absolute;
  bottom: var(--rei-space-sm);
  background: var(--rei-dark-70);
  color: var(--rei-white);
  font-size: var(--rei-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--rei-space-xs) var(--rei-space-sm);
  border-radius: var(--rei-radius-sm);
  z-index: 3;
}
.rei-ba-label--before { left: var(--rei-space-sm); }
.rei-ba-label--after { right: var(--rei-space-sm); }
.rei-ba__caption {
  padding: var(--rei-space-md) var(--rei-space-lg);
}
.rei-ba__caption p {
  margin: 0;
  font-size: var(--rei-font-sm);
  color: var(--rei-muted);
}


/* ===========================================
   14e. EMERGENCY / TIME-OF-DAY BANNER
   =========================================== */
.rei-emergency-banner {
  background: var(--rei-primary);
  color: var(--rei-white);
  padding: var(--rei-space-sm) 0;
}
.rei-emergency-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rei-space-lg);
  flex-wrap: wrap;
  font-size: var(--rei-font-sm);
  font-weight: 600;
}
.rei-tod-message.is-open {
  color: var(--rei-white);
}
.rei-tod-message.is-closed {
  color: var(--rei-white);
}
.rei-emergency-banner__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--rei-space-xs);
  color: var(--rei-white);
  text-decoration: none;
  font-weight: 700;
  padding: var(--rei-space-xs) var(--rei-space-md);
  background: var(--rei-white);
  color: var(--rei-primary);
  border-radius: var(--rei-radius-full);
  transition: var(--rei-transition-fast);
}
.rei-emergency-banner__phone:hover {
  opacity: 0.9;
}


/* ===========================================
   14f. STATS COUNTER STRIP
   =========================================== */
.rei-stats {
  padding: var(--rei-space-2xl) 0;
  background: var(--rei-light);
}
.rei-stats__grid {
  display: flex;
  justify-content: center;
  gap: var(--rei-space-2xl);
  flex-wrap: wrap;
  text-align: center;
}
.rei-stats__item {
  min-width: 140px;
}
.rei-stats__value {
  font-family: var(--rei-heading);
  font-size: var(--rei-font-4xl);
  font-weight: 700;
  color: var(--rei-primary);
  line-height: 1;
  margin-bottom: var(--rei-space-xs);
}
.rei-stats__label {
  font-size: var(--rei-font-sm);
  color: var(--rei-muted);
  font-weight: 500;
}
@media (max-width: 480px) {
  .rei-stats__grid {
    gap: var(--rei-space-lg);
  }
  .rei-stats__value {
    font-size: var(--rei-font-3xl);
  }
}


/* ===========================================
   14g. LOGO / ACCREDITATION BAR
   =========================================== */
.rei-logo-bar {
  background: var(--rei-white);
  padding: var(--rei-space-lg) 0;
  overflow: hidden;
  position: relative;
}
.rei-logo-bar::before,
.rei-logo-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.rei-logo-bar::before {
  left: 0;
  background: linear-gradient(to right, var(--rei-white) 20%, transparent);
}
.rei-logo-bar::after {
  right: 0;
  background: linear-gradient(to left, var(--rei-white) 20%, transparent);
}
.rei-logo-bar__label {
  text-align: center;
  font-size: var(--rei-font-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rei-muted);
  font-weight: 600;
  margin-bottom: var(--rei-space-md);
}
.rei-logo-bar__track {
  display: flex;
  align-items: center;
  gap: var(--rei-space-2xl);
  width: max-content;
  animation: rei-marquee 30s linear infinite;
}
.rei-logo-bar__item {
  flex-shrink: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rei-logo-bar__item img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.45;
  transition: var(--rei-transition-base);
}
.rei-logo-bar:hover .rei-logo-bar__item img {
  opacity: 0.6;
}
.rei-logo-bar__item:hover img {
  opacity: 1;
  filter: grayscale(0);
}
.rei-logo-bar__item span {
  font-size: var(--rei-font-sm);
  font-weight: 600;
  color: var(--rei-muted);
  white-space: nowrap;
}
@keyframes rei-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .rei-logo-bar__track {
    gap: var(--rei-space-lg);
  }
  .rei-logo-bar__item {
    height: 32px;
  }
  .rei-logo-bar__item img {
    max-height: 28px;
  }
}


/* ===========================================
   14h. TEAM SECTION
   =========================================== */
.rei-team { padding: var(--rei-section-pad) 0; }
.rei-team__grid {
  display: grid;
  grid-template-columns: repeat(var(--rei-cols, 3), 1fr);
  gap: var(--rei-space-lg);
  margin-top: var(--rei-space-xl);
}
.rei-team__card {
  background: var(--rei-white);
  border-radius: var(--rei-radius-lg);
  overflow: hidden;
  box-shadow: var(--rei-shadow-sm);
  transition: var(--rei-transition-base);
  text-align: center;
}
.rei-team__card:hover {
  box-shadow: var(--rei-shadow-md);
}
.rei-team__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.rei-team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--rei-transition-slow);
}
.rei-team__card:hover .rei-team__photo img {
  transform: scale(1.03);
}
.rei-team__info {
  padding: var(--rei-space-lg);
}
.rei-team__name {
  font-family: var(--rei-heading);
  font-size: var(--rei-font-lg);
  color: var(--rei-dark);
  margin-bottom: var(--rei-space-xs);
}
.rei-team__role {
  font-size: var(--rei-font-sm);
  color: var(--rei-primary);
  font-weight: 600;
  margin-bottom: var(--rei-space-sm);
}
.rei-team__bio {
  font-size: var(--rei-font-sm);
  color: var(--rei-muted);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .rei-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .rei-team__grid {
    grid-template-columns: 1fr;
  }
}


/* ===========================================
   14i. EXIT INTENT POPUP
   =========================================== */
.rei-exit-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--rei-black-60, rgba(0,0,0,0.6));
  align-items: center;
  justify-content: center;
  padding: var(--rei-space-md);
}
.rei-exit-popup.open {
  display: flex;
}
.rei-exit-popup__inner {
  background: var(--rei-white);
  border-radius: var(--rei-radius-lg);
  padding: var(--rei-space-2xl);
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: var(--rei-shadow-xl);
  text-align: center;
}
.rei-exit-popup-close {
  position: absolute;
  top: var(--rei-space-sm);
  right: var(--rei-space-sm);
  font-size: var(--rei-font-2xl);
  color: var(--rei-muted);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rei-exit-popup__img {
  max-width: 200px;
  margin: 0 auto var(--rei-space-lg);
  display: block;
}
.rei-exit-popup__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-font-xl);
  color: var(--rei-dark);
  margin-bottom: var(--rei-space-sm);
}
.rei-exit-popup__body {
  font-size: var(--rei-font-base);
  color: var(--rei-muted);
  margin-bottom: var(--rei-space-lg);
  line-height: 1.6;
}
.rei-exit-popup .rei-btn {
  width: 100%;
}


/* ===========================================
   14j. SOCIAL PROOF STRIP
   =========================================== */
.rei-social-proof {
  background: var(--rei-light);
  padding: var(--rei-space-md) 0;
}
.rei-social-proof__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rei-space-sm);
  flex-wrap: wrap;
  font-size: var(--rei-font-sm);
}
.rei-social-proof__stars {
  display: flex;
  gap: 2px;
  color: var(--rei-primary);
}
.rei-social-proof__text {
  color: var(--rei-body);
  font-weight: 500;
}
.rei-social-proof__count {
  color: var(--rei-muted);
}


/* ===========================================
   15. FAQ SECTION — Accordion
   Figma: Accordion-closed 2169:2163, Accordion-open 2169:2162.
   Card-based items: white background, line border, Shadow 4.
   Question = Heading H4 (22 / Perpetua / navy 900).
   Answer  = Text 18 / Archivo Regular / body colour / 1.5 line-height.
   =========================================== */
.rei-faqs {
  background: var(--rei-paper);
  padding: 80px 64px;
}
.rei-faqs__container {
  max-width: 1280px;
  margin: 0 auto;
}

.rei-faqs__layout {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.rei-faqs__header {
  width: 400px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--rei-header-height) + var(--rei-space-lg));
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rei-faqs__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-faqs__desc {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);
  line-height: var(--rei-lh-body);
  color: var(--rei-muted);
  margin: 0;
}

.rei-faqs__list {
  display: flex;
  flex-direction: column;
  gap: var(--rei-space-md);   /* 16px between cards */
}

/* Accordion item — white card with line border + Shadow 4 from Figma */
.rei-faq-item {
  background: var(--rei-white);
  border: 1px solid var(--rei-line);
  padding: 0 24px;
  box-shadow:
    0 2px 8px rgba(40, 41, 61, 0.04),
    0 16px 24px rgba(96, 97, 112, 0.16);
}

/* Question button — H4 / Perpetua / 22px / navy / tight leading */
.rei-faq-question {
  width: 100%;
  padding: 16px 0;
  font-family: var(--rei-heading);
  font-size: 24px;            /* 22px */
  font-weight: 400;
  line-height: var(--rei-lh-tight);    /* 1.0 */
  letter-spacing: 0;
  color: var(--rei-navy-900);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  background: transparent;
  border: none;
  margin-top: 4px;
}
.rei-faq-question:hover,
.rei-faq-question:focus,
.rei-faq-question:active {
  background: transparent;
  outline: none;
  box-shadow: none;
  color: var(--rei-navy-900);
}

/* When item is open, question gets tighter bottom spacing (Figma: pt 20 / pb 10) */
.rei-faq-item.open .rei-faq-question {
  padding-bottom: 10px;
}

/* Chevron icon — rotates to face up when open */
.rei-faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--rei-gold-700);
  transition: transform var(--rei-transition-base);
}
.rei-faq-item.open .rei-faq-icon {
  transform: rotate(180deg);
}

/* Answer panel — collapsed by default, expands when item.open */
.rei-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--rei-transition-base), padding var(--rei-transition-base);
}
.rei-faq-item.open .rei-faq-answer {
  max-height: 600px;
  padding-bottom: 24px;
}
.rei-faq-answer p {
  margin: 0;
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);         /* 18px */
  font-weight: 400;
  line-height: var(--rei-lh-body);     /* 1.5 */
  color: var(--rei-body);
}

@media (max-width: 1024px) {
  .rei-faqs { padding: 64px 32px; }
  .rei-faqs__layout { gap: 48px; }
  .rei-faqs__header { width: 320px; }
}
@media (max-width: 768px) {
  .rei-faqs { padding: 48px 20px; }
  .rei-faqs__layout {
    flex-direction: column;
    gap: 32px;
  }
  .rei-faqs__header {
    width: 100%;
    position: static;
  }
}


/* ===========================================
   17. CONTACT SECTION — Figma node 2168:2872 (Layout / Cards Horizontal)
   Left: tags + heading + body. Right: 2x2 grid of .rei-proof-card.
   =========================================== */
.rei-contact {
  background: var(--rei-paper);
  padding: 80px 64px;
}
.rei-contact__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 64px;
  align-items: center;
}

/* Left text column */
.rei-contact__info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rei-contact__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rei-contact__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  line-height: var(--rei-lh-tight);
  font-weight: 400;
  color: var(--rei-navy-900);
  margin: 0;
}
.rei-contact__desc {
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-md);
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  margin: 0;
}

/* Right 2x2 grid */
.rei-contact__cards {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

@media (max-width: 1024px) {
  .rei-contact { padding: 64px 32px; }
  .rei-contact__container { gap: 48px; }
}
@media (max-width: 768px) {
  .rei-contact { padding: 48px 20px; }
  .rei-contact__container {
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }
  .rei-contact__cards { grid-template-columns: 1fr; }
}


/* ===========================================
   19. FOOTER — Figma node 2033:7556
   Navy/950 bg, 64px padding all sides. Top row: logo + social.
   Menu row: 5 links horizontally. White divider. Credits row.
   =========================================== */
.rei-footer {
  background: var(--rei-navy-950);
  color: var(--rei-white);
  padding: 0 32px;
}
.rei-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* --- CTA band (top of footer) --- */
.rei-footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 56px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.rei-footer__cta-text {
  flex: 1 1 auto;
  min-width: 0;
}
.rei-footer__cta-heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  font-weight: 700;
  line-height: var(--rei-lh-heading);
  letter-spacing: -0.02em;
  color: var(--rei-white);
  margin: 0 0 12px;
}
.rei-footer__cta-sub {
  font-family: var(--rei-body-font);
  font-size: 17px;
  line-height: var(--rei-lh-body);
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 640px;
}

/* --- Main grid (brand + 3 link columns) --- */
.rei-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 56px;
  padding: 64px 0 48px;
}
.rei-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.rei-footer__col--brand {
  gap: 20px;
  padding-right: 32px;
}
.rei-footer__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.rei-footer__logo img {
  height: 56px;
  width: auto;
  display: block;
}
.rei-footer__bio {
  font-family: var(--rei-body-font);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.rei-footer__col-heading {
  font-family: var(--rei-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rei-gold-300);
  margin: 0 0 6px;
}
.rei-footer__menu-link {
  font-family: var(--rei-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  transition: color var(--rei-transition-fast);
}
.rei-footer__menu-link:hover {
  color: var(--rei-gold-300);
}

/* --- Get-in-touch column tweaks --- */
.rei-footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rei-body-font);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  transition: color var(--rei-transition-fast);
}
.rei-footer__contact:hover {
  color: var(--rei-gold-300);
}
.rei-footer__contact-icon {
  display: inline-flex;
  color: var(--rei-gold-300);
  width: 18px;
  height: 18px;
}
.rei-footer__contact-icon svg {
  width: 18px;
  height: 18px;
}
.rei-footer__location {
  font-family: var(--rei-body-font);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 4px 0 0;
}

/* --- Social --- */
.rei-footer__social {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.rei-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--rei-white);
  transition: color var(--rei-transition-fast), border-color var(--rei-transition-fast), background var(--rei-transition-fast);
}
.rei-footer__social-link:hover {
  color: var(--rei-navy-900);
  background: var(--rei-gold-300);
  border-color: var(--rei-gold-300);
}

/* --- Bottom credits --- */
.rei-footer__bottom {
  padding: 24px 0 32px;
}
.rei-footer__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  width: 100%;
  margin-bottom: 24px;
}
.rei-footer__credits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--rei-body-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  flex-wrap: wrap;
}
.rei-footer__copyright,
.rei-footer__credit-dossis {
  margin: 0;
}
.rei-footer__credit-dossis a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color var(--rei-transition-fast);
}
.rei-footer__credit-dossis a:hover {
  color: var(--rei-gold-300);
}

@media (max-width: 1024px) {
  .rei-footer { padding: 0 32px; }
  .rei-footer__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 48px 0;
  }
  .rei-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 48px 0 40px;
  }
  .rei-footer__col--brand {
    grid-column: 1 / -1;
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  .rei-footer { padding: 0 24px; }
  .rei-footer__cta-heading {
    font-size: var(--rei-h2-mobile, 36px);
  }
  .rei-footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0 32px;
  }
  .rei-footer__credits {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 768px) {
  .rei-footer { padding: 40px 20px; }
  .rei-footer__top { gap: 32px; }
  .rei-footer__brand-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rei-footer__menu { flex-direction: column; gap: 16px; }
  .rei-footer__menu-link { min-width: 0; }
  .rei-footer__credits { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
}


/* ===========================================
   21. BLOG TEMPLATE
   =========================================== */

/* Progress bar */
.rei-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--rei-primary);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* Breadcrumbs */
.rei-breadcrumbs {
  font-size: var(--rei-fs-sm);
  color: var(--rei-muted);
  padding: var(--rei-space-md) 0;
}
.rei-breadcrumbs a {
  color: var(--rei-primary);
  text-decoration: none;
  transition: color var(--rei-transition-fast);
}
.rei-breadcrumbs a:hover {
  color: var(--rei-primary-hover);
}
.rei-breadcrumbs__sep {
  margin-inline: var(--rei-space-sm);
  color: var(--rei-muted);
}

/* Article header */
.rei-article-header {
  margin-bottom: var(--rei-space-2xl);
}
.rei-article-header__text {
  max-width: 720px;
}
.rei-article-header__cat {
  display: inline-block;
  font-size: var(--rei-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rei-primary);
  background: var(--rei-primary-light);
  padding: var(--rei-space-xs) var(--rei-space-md);
  border-radius: var(--rei-radius-full);
  margin-bottom: var(--rei-space-md);
}
.rei-article-header__title {
  font-family: var(--rei-heading);
  font-size: var(--rei-fs-3xl);
  font-weight: 700;
  color: var(--rei-dark);
  line-height: 1.2;
  margin-bottom: var(--rei-space-md);
}
.rei-article-header__meta {
  display: flex;
  gap: var(--rei-space-md);
  font-size: var(--rei-fs-sm);
  color: var(--rei-muted);
}
.rei-article-header__img {
  margin-top: var(--rei-space-xl);
}
.rei-article-header__img img {
  width: 100%;
  border-radius: var(--rei-radius-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Article layout — 2 col */
.rei-article-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--rei-space-2xl);
  align-items: flex-start;
}

/* TOC sidebar */
.rei-toc-sidebar {
  position: sticky;
  top: calc(var(--rei-header-height) + var(--rei-space-lg));
}
.rei-toc {
  background: var(--rei-light);
  border-radius: var(--rei-radius-md);
  padding: var(--rei-space-lg);
}
.rei-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--rei-heading);
  font-size: var(--rei-fs-sm);
  font-weight: 700;
  color: var(--rei-dark);
  margin-bottom: var(--rei-space-md);
}
.rei-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.rei-toc__list li {
  margin-bottom: var(--rei-space-sm);
}
.rei-toc__link {
  font-size: var(--rei-fs-sm);
  color: var(--rei-muted);
  text-decoration: none;
  transition: color var(--rei-transition-fast);
  display: block;
  padding: var(--rei-space-xs) 0;
}
.rei-toc__link:hover,
.rei-toc__link.active {
  color: var(--rei-primary);
}

/* Article body — prose styles */
.rei-article-body {
  max-width: 720px;
  font-size: var(--rei-fs-base);
  color: var(--rei-body);
  line-height: 1.8;
}
.rei-article-body p {
  margin-bottom: var(--rei-space-lg);
}
.rei-article-body h2 {
  font-family: var(--rei-heading);
  font-size: var(--rei-fs-2xl);
  font-weight: 700;
  color: var(--rei-dark);
  margin-top: var(--rei-space-2xl);
  margin-bottom: var(--rei-space-md);
}
.rei-article-body h3 {
  font-family: var(--rei-heading);
  font-size: var(--rei-fs-xl);
  font-weight: 700;
  color: var(--rei-dark);
  margin-top: var(--rei-space-xl);
  margin-bottom: var(--rei-space-md);
}
.rei-article-body ul,
.rei-article-body ol {
  margin-bottom: var(--rei-space-lg);
  padding-left: var(--rei-space-xl);
}
.rei-article-body li {
  margin-bottom: var(--rei-space-sm);
}
.rei-article-body blockquote {
  border-left: 4px solid var(--rei-primary);
  padding-left: var(--rei-space-lg);
  margin: var(--rei-space-xl) 0;
  font-style: italic;
  color: var(--rei-muted);
}
.rei-article-body code {
  background: var(--rei-light);
  padding: var(--rei-space-xs) var(--rei-space-sm);
  border-radius: var(--rei-radius-sm);
  font-size: var(--rei-fs-sm);
}
.rei-article-body pre {
  background: var(--rei-dark);
  color: var(--rei-white);
  padding: var(--rei-space-lg);
  border-radius: var(--rei-radius-md);
  overflow-x: auto;
  margin-bottom: var(--rei-space-lg);
}
.rei-article-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}
.rei-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--rei-space-lg);
}
.rei-article-body th,
.rei-article-body td {
  padding: var(--rei-space-md);
  border-bottom: 1px solid var(--rei-border);
  text-align: left;
  font-size: var(--rei-fs-sm);
}
.rei-article-body th {
  font-weight: 700;
  color: var(--rei-dark);
}
.rei-article-body img {
  border-radius: var(--rei-radius-md);
  margin: var(--rei-space-lg) 0;
}
.rei-article-body a:not(.rei-btn):not(.rei-inline-cta__btn) {
  color: var(--rei-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--rei-transition-fast);
}
.rei-article-body a:not(.rei-btn):not(.rei-inline-cta__btn):hover {
  color: var(--rei-primary-hover);
}

/* Inline CTA (mid-article) */
.rei-inline-cta {
  background: var(--rei-primary-light);
  border: 1px solid var(--rei-primary-10);
  border-radius: var(--rei-radius-lg);
  padding: var(--rei-space-xl);
  margin: var(--rei-space-2xl) 0;
  text-align: center;
}
.rei-inline-cta h3 {
  font-family: var(--rei-heading);
  font-size: var(--rei-fs-xl);
  color: var(--rei-dark);
  margin-bottom: var(--rei-space-sm);
}
.rei-inline-cta p {
  font-size: var(--rei-fs-base);
  color: var(--rei-body);
  margin-bottom: var(--rei-space-md);
}
.rei-inline-cta .rei-btn {
  color: var(--rei-white);
  text-decoration: none;
}
.rei-inline-cta .rei-btn:hover {
  color: var(--rei-white);
  text-decoration: none;
}

/* Archive hero */
.rei-archive-hero {
  background: var(--rei-dark);
  color: var(--rei-white);
  padding: calc(var(--rei-header-height) + var(--rei-space-2xl)) 0 var(--rei-space-2xl);
  text-align: center;
}
.rei-archive-hero__title {
  font-family: var(--rei-heading);
  font-size: var(--rei-fs-3xl);
  font-weight: 700;
  color: var(--rei-white);
  margin-bottom: var(--rei-space-sm);
}
.rei-archive-hero__desc {
  font-size: var(--rei-fs-md);
  color: var(--rei-white-40);
}

@media (max-width: 1024px) {
  .rei-article-layout {
    grid-template-columns: 1fr;
  }
  .rei-toc-sidebar {
    position: static;
  }
}
@media (max-width: 768px) {
  .rei-article-header__title {
    font-size: var(--rei-fs-2xl);
  }
}


/* ===========================================
   22. WPFORMS OVERRIDES
   =========================================== */
.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form input[type="url"],
.wpforms-container .wpforms-form input[type="number"],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select {
  border: 1px solid var(--rei-border);
  border-radius: var(--rei-radius-md);
  padding: var(--rei-space-md);
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-base);
  color: var(--rei-body);
  background: var(--rei-white);
  transition: border-color var(--rei-transition-fast), box-shadow var(--rei-transition-fast);
}
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus,
.wpforms-container .wpforms-form select:focus {
  border-color: var(--rei-primary);
  box-shadow: 0 0 0 3px var(--rei-primary-15);
  outline: none;
}
.wpforms-container .wpforms-form .wpforms-field-label {
  font-family: var(--rei-body-font);
  font-weight: 600;
  color: var(--rei-dark);
  margin-bottom: var(--rei-space-xs);
}
.wpforms-container .wpforms-form .wpforms-field-sublabel {
  font-size: var(--rei-fs-xs);
  color: var(--rei-muted);
}
.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form .wpforms-submit {
  background: var(--rei-primary);
  color: var(--rei-white);
  border: none;
  border-radius: var(--rei-radius-md);
  padding: var(--rei-space-md) var(--rei-space-xl);
  font-family: var(--rei-body-font);
  font-size: var(--rei-fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--rei-transition-fast), transform var(--rei-transition-fast), box-shadow var(--rei-transition-fast);
}
.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form .wpforms-submit:hover {
  background: var(--rei-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--rei-shadow-sm);
}
.wpforms-container .wpforms-form ::placeholder {
  color: var(--rei-muted);
  opacity: 0.7;
}


/* ===========================================
   23. UTILITIES
   =========================================== */

/* Before/After Slider */
.rei-ba-slider {
  position: relative;
  overflow: hidden;
  cursor: ew-resize;
  max-width: 100%;
  border-radius: var(--rei-radius-md);
}
.rei-ba-slider img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.rei-ba-before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 50% 0 0);
}
.rei-ba-before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rei-ba-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: var(--rei-white);
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 2;
}
.rei-ba-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: var(--rei-white);
  border-radius: var(--rei-radius-full);
  box-shadow: var(--rei-shadow-lg);
}

/* Time-of-Day Message */
.rei-tod-message.is-open { color: var(--rei-secondary); }
.rei-tod-message.is-closed { color: var(--rei-accent); }

/* Exit Intent Popup */
.rei-exit-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--rei-dark-60);
  align-items: center;
  justify-content: center;
  padding: var(--rei-space-md);
}
.rei-exit-popup.open {
  display: flex;
  animation: rei-backdrop-in 0.3s ease forwards;
}
.rei-exit-popup-inner {
  background: var(--rei-white);
  border-radius: var(--rei-radius-lg);
  padding: var(--rei-space-2xl);
  max-width: 500px;
  width: 100%;
  position: relative;
  box-shadow: var(--rei-shadow-xl);
  animation: rei-popup-in 0.3s ease forwards;
}
.rei-exit-popup-close {
  position: absolute;
  top: var(--rei-space-md);
  right: var(--rei-space-md);
  background: none;
  border: none;
  font-size: var(--rei-fs-xl);
  cursor: pointer;
  color: var(--rei-muted);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Map */
.rei-map {
  border-radius: var(--rei-radius-lg);
  overflow: hidden;
  margin-bottom: 0;
}
/* Override GeneratePress: it ships `.site-main > * { margin-bottom: 20px }`
   which puts a 20px gap between every section. Our sections own their own
   vertical spacing via padding, so wipe it for all children, not just the
   last one. */
.site-main > * {
  margin-bottom: 0;
}
.entry-content > *:last-child {
  margin-bottom: 0;
}
.rei-map iframe {
  width: 100%;
  border: 0;
}


/* ===========================================
   23B. INNER-PAGE HERO + LEGAL CONTENT
   Reading-first pages: About, Contact, Privacy, Terms, Training, Assessment.
   Hero is text-only (no media column). Legal content is a single column
   with comfortable reading width.
   =========================================== */

/* Inner-page hero modifier — picks up homepage .rei-hero styles, only
   adds eyebrow + meta support, drops the fixed height (inner pages size to
   content), and shifts the column split to 70/30 (text-heavy, image accent).
   Mobile already stacks via the base .rei-hero__inner @media block. */
.rei-hero--page .rei-hero__inner {
  height: auto;
}
.rei-hero--page .rei-hero__content {
  flex: 0 0 70%;
}
.rei-hero--page .rei-hero__media {
  flex: 0 0 30%;
}
/* Text-only variant — used on legal pages (Privacy, Terms) where the image
   side is dropped. Content takes the full inner card width but the text
   itself is capped so it stays readable, not stretched all the way out. */
.rei-hero--text-only .rei-hero__content {
  flex: 1 1 auto;
}
.rei-hero--text-only .rei-hero__text {
  max-width: 760px;
}
.rei-hero--page .rei-hero__eyebrow {
  color: var(--rei-gold-300);
  display: inline-block;
}
.rei-hero--page .rei-hero__meta {
  font-family: var(--rei-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  letter-spacing: 0.02em;
}

/* --- Legal page body --- */
.rei-legal {
  background: var(--rei-paper);
  padding: 16px 32px 100px;
}
.rei-legal__inner {
  max-width: 760px;
  margin: 0 auto;
}
.rei-legal__section {
  margin-bottom: 48px;
}
.rei-legal__section:last-child {
  margin-bottom: 0;
}
.rei-legal__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h3);
  font-weight: 400;
  line-height: var(--rei-lh-heading);
  color: var(--rei-ink);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.rei-legal__body p {
  font-family: var(--rei-body);
  font-size: 18px;
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  margin: 0 0 16px;
}
.rei-legal__body p:last-child {
  margin-bottom: 0;
}
.rei-legal__body ul,
.rei-legal__body ol {
  font-family: var(--rei-body);
  font-size: 18px;
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  margin: 0 0 16px 24px;
  padding: 0;
}
.rei-legal__body li {
  margin-bottom: 8px;
}
.rei-legal__body a {
  color: var(--rei-gold-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rei-legal__body a:hover {
  color: var(--rei-gold-900);
}
.rei-legal__body strong {
  color: var(--rei-ink);
  font-weight: 600;
}

@media (max-width: 768px) {
  .rei-legal {
    padding: 8px 24px 64px;
  }
  .rei-legal__heading {
    font-size: 26px;
  }
  .rei-legal__body p,
  .rei-legal__body ul,
  .rei-legal__body ol {
    font-size: 17px;
  }
}


/* ===========================================
   23E. ASSESSMENT EMBED (Risk Assessment page)
   Hosts the prototype tool via iframe with auto-height. Wrapper styling
   matches the rest of the site; the tool inside provides its own internals.
   =========================================== */

.rei-assessment-embed {
  padding: 80px 32px;
  background: var(--rei-bg);
}
.rei-assessment-embed__inner {
  max-width: 880px;
  margin: 0 auto;
}
.rei-assessment-embed__head {
  text-align: center;
  margin-bottom: 32px;
}
.rei-assessment-embed__head .rei-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
}
.rei-assessment-embed__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  font-weight: 400;
  line-height: var(--rei-lh-tight);
  color: var(--rei-ink);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.rei-assessment-embed__sub {
  font-family: var(--rei-body);
  font-size: 18px;
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  margin: 0;
}
.rei-assessment-embed__frame {
  background: var(--rei-white);
  border-radius: var(--rei-radius-lg);
  border: 1px solid var(--rei-line);
  box-shadow:
    0 4px 12px rgba(40, 41, 61, 0.04),
    0 12px 24px rgba(96, 97, 112, 0.10);
  transition: height 0.2s var(--rei-ease);
}

@media (max-width: 768px) {
  .rei-assessment-embed {
    padding: 56px 16px;
  }
  .rei-assessment-embed__frame {
    border-radius: var(--rei-radius-md);
  }
}


/* ===========================================
   23D. TRAINING TIERS (Training page)
   3-column card grid showing Executive / Leadership / Frontline tiers.
   Each card has title, audience, meta row (duration / group / price), and
   two bulleted blocks ("they learn" / "they walk away able to").
   =========================================== */

.rei-tiers {
  padding: 96px 32px;
  background: var(--rei-bg);
}
.rei-tiers__container {
  max-width: 1280px;
  margin: 0 auto;
}
.rei-tiers__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.rei-tiers__head .rei-tags {
  justify-content: center;
}
.rei-tiers__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h2);
  font-weight: 400;
  line-height: var(--rei-lh-tight);
  color: var(--rei-ink);
  margin: 16px 0 16px;
  letter-spacing: -0.005em;
}
.rei-tiers__desc {
  font-family: var(--rei-body);
  font-size: 18px;
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  margin: 0;
}
.rei-tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.rei-tier-card {
  background: var(--rei-white);
  border: 1px solid var(--rei-line);
  border-radius: var(--rei-radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.22s var(--rei-ease),
              box-shadow 0.22s var(--rei-ease);
}
.rei-tier-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 12px rgba(40, 41, 61, 0.06),
    0 20px 32px rgba(96, 97, 112, 0.22);
}
.rei-tier-card__index {
  font-family: var(--rei-heading);
  font-size: 14px;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--rei-gold-700);
  margin: 0;
}
.rei-tier-card__title {
  font-family: var(--rei-heading);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--rei-ink);
  margin: -8px 0 0;
  letter-spacing: -0.005em;
}
.rei-tier-card__audience {
  font-family: var(--rei-body);
  font-size: 16px;
  line-height: var(--rei-lh-body);
  color: var(--rei-muted);
  margin: 0;
}
.rei-tier-card__meta {
  list-style: none;
  padding: 16px 0;
  margin: 0;
  border-top: 1px solid var(--rei-line-soft);
  border-bottom: 1px solid var(--rei-line-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rei-tier-card__meta li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--rei-body);
  font-size: 14px;
  color: var(--rei-body);
}
.rei-tier-card__meta strong {
  font-weight: 500;
  color: var(--rei-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}
.rei-tier-card__meta span {
  font-weight: 600;
  color: var(--rei-ink);
  font-size: 15px;
}
.rei-tier-card__block + .rei-tier-card__block {
  margin-top: 4px;
}
.rei-tier-card__sub {
  font-family: var(--rei-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rei-gold-700);
  margin: 0 0 10px;
}
.rei-tier-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rei-tier-card__list li {
  font-family: var(--rei-body);
  font-size: 16px;
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  padding-left: 20px;
  position: relative;
}
.rei-tier-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rei-gold-700);
}
.rei-tiers__cta {
  text-align: center;
  margin-top: 48px;
}

@media (max-width: 1024px) {
  .rei-tiers__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 640px;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .rei-tiers {
    padding: 64px 24px;
  }
  .rei-tier-card {
    padding: 28px 24px;
  }
}


/* ===========================================
   23C. CONTACT FORM (Contact page)
   2-col on desktop (intro + form), single col mobile. Inputs are
   line-bottom-only — quiet, premium, no boxy framing.
   =========================================== */

.rei-contact-form-section {
  background: var(--rei-paper);
  padding: 48px 32px 96px;
}
.rei-contact-form-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.rei-contact-form-section__intro {
  position: sticky;
  top: 120px;
}
.rei-contact-form-section__heading {
  font-family: var(--rei-heading);
  font-size: var(--rei-h3);
  font-weight: 400;
  line-height: var(--rei-lh-heading);
  color: var(--rei-ink);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.rei-contact-form-section__intro-body {
  font-family: var(--rei-body);
  font-size: 18px;
  line-height: var(--rei-lh-body);
  color: var(--rei-body);
  margin: 0 0 24px;
}
.rei-contact-form-section__intro-body a {
  color: var(--rei-gold-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.rei-contact-form-section__intro-body a:hover {
  color: var(--rei-gold-900);
}
.rei-contact-form-section__points {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}

/* --- Form --- */
.rei-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--rei-white);
  padding: 40px;
  border-radius: var(--rei-radius-lg);
  border: 1px solid var(--rei-line);
}
.rei-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.rei-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rei-form__label {
  font-family: var(--rei-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--rei-ink);
  letter-spacing: 0.01em;
}
.rei-form__req {
  color: var(--rei-gold-700);
  font-weight: 600;
}
.rei-form input[type="text"],
.rei-form input[type="email"],
.rei-form textarea {
  font-family: var(--rei-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--rei-ink);
  background: var(--rei-paper);
  border: 1px solid var(--rei-line);
  border-radius: var(--rei-radius-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rei-form input:focus,
.rei-form textarea:focus {
  outline: none;
  border-color: var(--rei-gold-700);
  background: var(--rei-white);
}
.rei-form textarea {
  resize: vertical;
  min-height: 120px;
}
.rei-form__submit {
  align-self: flex-start;
}
.rei-form__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.rei-form__status {
  font-family: var(--rei-body);
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  min-height: 0;
}
.rei-form__status.is-success {
  color: var(--rei-success, #4A7552);
  padding: 12px 14px;
  background: #EEF4EF;
  border-radius: var(--rei-radius-sm);
}
.rei-form__status.is-error {
  color: var(--rei-error, #8A3B3B);
  padding: 12px 14px;
  background: #F8ECEC;
  border-radius: var(--rei-radius-sm);
}

@media (max-width: 900px) {
  .rei-contact-form-section {
    padding: 32px 24px 72px;
  }
  .rei-contact-form-section__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .rei-contact-form-section__intro {
    position: static;
  }
  .rei-form {
    padding: 28px;
  }
  .rei-form__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* ===========================================
   23D. CALENDLY EMBED (Book a Chat page)
   Container only — Calendly's widget.js injects the iframe.
   =========================================== */
.rei-calendly {
  background: var(--rei-paper);
  padding: 48px 32px 24px;
}
.rei-calendly__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.calendly-inline-widget {
  width: 100%;
  background: var(--rei-white);
  border: 1px solid var(--rei-line);
  border-radius: var(--rei-radius-lg);
  overflow: hidden;
}
@media (max-width: 768px) {
  .rei-calendly { padding: 32px 16px 16px; }
}


/* ===========================================
   24. ANIMATIONS & TRANSITIONS
   =========================================== */

/* --- Animation engine (no-flash) ---
   Initial states are gated on html.rei-anim, which is set by an inline
   script in <head> BEFORE any paint (see functions.php → wp_head priority 1).
   This guarantees animation targets render at opacity:0 on first paint, so
   JS doesn't need to "prime" them after the fact (which caused a flash).
   Reduced-motion users never get the .rei-anim class → no opacity:0 rules
   apply → content shows normally. */

/* --- Scroll reveal targets (direct selectors, no JS class needed) --- */
html.rei-anim .rei-about__head,
html.rei-anim .rei-about__paragraph,
html.rei-anim .rei-proof-card,
html.rei-anim .rei-why-now__column,
html.rei-anim .rei-audience__content,
html.rei-anim .rei-audience__points,
html.rei-anim .rei-point,
html.rei-anim .rei-leadmag__card,
html.rei-anim .rei-gap__content,
html.rei-anim .rei-gap__image,
html.rei-anim .rei-approach__head,
html.rei-anim .rei-approach-card,
html.rei-anim .rei-pullquote,
html.rei-anim .rei-kelly__image,
html.rei-anim .rei-kelly__content,
html.rei-anim .rei-inside__content,
html.rei-anim .rei-inside__image,
html.rei-anim .rei-faqs__header,
html.rei-anim .rei-faq-item,
html.rei-anim .rei-contact__info,
html.rei-anim .rei-footer__top,
html.rei-anim .rei-footer__bottom {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.53, 0.02, 0.51, 0.99),
              transform 0.6s cubic-bezier(0.53, 0.02, 0.51, 0.99);
  will-change: opacity, transform;
}

/* Visible state — applies once JS adds .rei-visible (via IntersectionObserver) */
html.rei-anim .rei-about__head.rei-visible,
html.rei-anim .rei-about__paragraph.rei-visible,
html.rei-anim .rei-proof-card.rei-visible,
html.rei-anim .rei-why-now__column.rei-visible,
html.rei-anim .rei-audience__content.rei-visible,
html.rei-anim .rei-audience__points.rei-visible,
html.rei-anim .rei-point.rei-visible,
html.rei-anim .rei-leadmag__card.rei-visible,
html.rei-anim .rei-gap__content.rei-visible,
html.rei-anim .rei-gap__image.rei-visible,
html.rei-anim .rei-approach__head.rei-visible,
html.rei-anim .rei-approach-card.rei-visible,
html.rei-anim .rei-pullquote.rei-visible,
html.rei-anim .rei-kelly__image.rei-visible,
html.rei-anim .rei-kelly__content.rei-visible,
html.rei-anim .rei-inside__content.rei-visible,
html.rei-anim .rei-inside__image.rei-visible,
html.rei-anim .rei-faqs__header.rei-visible,
html.rei-anim .rei-faq-item.rei-visible,
html.rei-anim .rei-contact__info.rei-visible,
html.rei-anim .rei-footer__top.rei-visible,
html.rei-anim .rei-footer__bottom.rei-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Hero entrance (direct selectors, no JS class needed) ---
   Text first, actions second. Stagger via transition-delay. */
html.rei-anim .rei-hero__text,
html.rei-anim .rei-hero__actions {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--rei-ease),
              transform 0.7s var(--rei-ease);
  will-change: opacity, transform;
}
html.rei-anim .rei-hero__actions {
  transition-delay: 0.15s;
}
html.rei-anim .rei-hero__text.rei-hero-entered,
html.rei-anim .rei-hero__actions.rei-hero-entered {
  opacity: 1;
  transform: translateY(0);
}

/* Page hero entrance (non-homepage). Same direct-selector pattern. */
html.rei-anim .rei-page-hero-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--rei-transition-slow),
              transform var(--rei-transition-slow);
}
html.rei-anim .rei-page-hero-animate:nth-child(1) { transition-delay: 0s; }
html.rei-anim .rei-page-hero-animate:nth-child(2) { transition-delay: 0.12s; }
html.rei-anim .rei-page-hero-animate:nth-child(3) { transition-delay: 0.24s; }
html.rei-anim .rei-page-hero-animate:nth-child(4) { transition-delay: 0.36s; }
html.rei-anim .rei-page-hero-animate.rei-hero-entered {
  opacity: 1;
  transform: translateY(0);
}

/* --- Hover Lift --- */
.rei-hover-lift {
  transition: transform var(--rei-transition-fast);
}
.rei-hover-lift:hover {
  transform: translateY(-3px);
}

/* Card hover lift — applies to proof, approach, and FAQ cards on the page.
   Subtle translate + slightly stronger shadow on hover. */
.rei-proof-card,
.rei-approach-card,
.rei-faq-item {
  transition: transform 0.22s var(--rei-ease),
              box-shadow 0.22s var(--rei-ease);
}
.rei-proof-card:hover,
.rei-approach-card:hover,
.rei-faq-item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 12px rgba(40, 41, 61, 0.06),
    0 20px 32px rgba(96, 97, 112, 0.22);
}

/* --- Image Zoom on Hover --- */
.rei-hover-zoom {
  overflow: hidden;
}
.rei-hover-zoom img {
  transition: transform 0.4s var(--rei-ease);
}
.rei-hover-zoom:hover img {
  transform: scale(1.03);
}

/* --- Link Underline (grows from left) --- */
.rei-link-underline {
  position: relative;
  text-decoration: none;
}
.rei-link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--rei-transition-base);
}
.rei-link-underline:hover::after {
  width: 100%;
}

/* --- Keyframes --- */
@keyframes rei-step-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rei-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--rei-primary-15); }
  50% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes rei-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rei-popup-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}


/* ===========================================
   25. REDUCED MOTION
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rei-reveal,
  .rei-hero-animate,
  .rei-hero-animate--image,
  .rei-page-hero-animate {
    opacity: 1 !important;
    transform: none !important;
  }
  .rei-btn:hover,
  .rei-hover-lift:hover,
  .rei-proof-card:hover,
  .rei-approach-card:hover,
  .rei-faq-item:hover {
    transform: none !important;
  }
  .rei-hover-zoom:hover img {
    transform: none !important;
  }
}

/* ── DS: nuke GeneratePress #3f4047 default button hover/focus/active (2026-06-26) ──
   GP injects `…:hover{color:#fff;background-color:#3f4047}` on native buttons/inputs
   via its customizer default. `html` prefix + late load beats it. Component button
   hovers (higher specificity) still win. */
html button:hover, html button:focus, html button:active,
html input[type="button"]:hover, html input[type="button"]:focus, html input[type="button"]:active,
html input[type="submit"]:hover, html input[type="submit"]:focus, html input[type="submit"]:active,
html input[type="reset"]:hover, html input[type="reset"]:focus, html input[type="reset"]:active,
html .button:hover, html .button:focus,
html .wp-block-button__link:hover, html .wp-block-button__link:focus {
  background-color: transparent;
  color: inherit;
}