/* ==========================================================================
   Patterson Dental BC - Shared Stylesheet
   Single light theme. Built fluid/responsive from a 1440px content column.
   Sections: 0 Fonts  1 Tokens  2 Reset/Base  3 Header  4 Footer  5 Components
             6 Page sections  7 Responsive  8 Lightbox  9 Blog System
   Framework: WordPress Theme Framework v1.1
   ========================================================================== */

/* ==========================================================================
   0. SELF-HOSTED FONTS
   Figtree (variable, 400-900) for body and headings.
   Archivo 900 (condensed-heavy display) for the Home hero headline.
   Zero external font requests - all woff2 files ship inside the theme.
   ========================================================================== */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/figtree-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/archivo-900.woff2") format("woff2");
}

/* ==========================================================================
   1. DESIGN TOKENS
   Framework canonical token system - all brand values preserved.
   ========================================================================== */
:root {
  /* --- COLORS - brand identity (Patterson palette) ----------------------- */
  --color-brand:        #003767;   /* navy - primary brand, nav, footer, headings */
  --color-brand-hover:  #002850;   /* darker navy for hover/pressed states */
  --color-brand-tint:   #e6eef6;   /* soft navy tint for panel bg, answer-box */
  --color-accent:       #269bcb;   /* blue - primary CTA button color */
  --color-accent-hover: #147cbd;   /* blue-link - accent hover / link color */

  /* Secondary brand color - Patterson teal, used for eyebrow/kicker labels */
  --color-secondary:    #00817d;   /* teal */

  /* --- COLORS - text + surface ------------------------------------------  */
  --color-heading:      #003767;   /* navy - all section headings */
  --color-text:         #58585b;   /* warm-gray - body copy */
  --color-text-muted:   #58585b;   /* warm-gray - captions, meta, secondary copy */
  --color-line:         #e9e9e9;   /* light-gray - hairline dividers + card borders */
  --color-bg:           #ffffff;
  --color-bg-soft:      #f8f8f8;   /* off-white - alt section background */
  --color-bg-accent:    #e6eef6;   /* soft brand tint for hero base */
  --color-star:         #f4b323;   /* amber for star ratings */
  --color-success:      #1d6a2c;
  --color-success-bg:   #e6f4ea;
  --color-success-border: #bbf7d0;
  --color-error:        #991b1b;
  --color-error-bg:     #fdecea;
  --color-error-border: #fecaca;

  /* --- COLORS - inverse / dark surfaces (nav + footer use --color-brand) - */
  --color-bg-inverse:       #003767;   /* navy - footer + hero glass base */
  --color-bg-inverse-soft:  #0f3e69;   /* navy-glass base lifted */
  --color-text-inverse:     rgba(255, 255, 255, 0.9);
  --color-text-inverse-muted: rgba(255, 255, 255, 0.65);
  --color-heading-inverse:  #ffffff;
  --color-line-inverse:     rgba(255, 255, 255, 0.12);
  --color-placeholder:      #a8a8aa;   /* form input placeholder text */
  --color-overlay-dark:     rgba(0, 30, 56, 0.78);
  --color-overlay-dark-mid: rgba(0, 30, 56, 0.55);

  /* --- LEGACY ALIASES - point at canonical tokens so nothing breaks ------- */
  /* Existing Patterson CSS consumed these; keeping them avoids visual drift. */
  --white:        var(--color-bg);
  --off-white:    var(--color-bg-soft);
  --light-gray:   var(--color-line);
  --navy:         var(--color-brand);
  --blue:         var(--color-accent);
  --blue-link:    var(--color-accent-hover);
  --warm-gray:    var(--color-text-muted);
  --teal:         var(--color-secondary);
  --near-black:   #0d0d0d;
  --panel-gray:   #848484;
  --panel-light:  #ededed;
  --ring-gray:    #e8e8e8;
  --cyan-ring:    #2cb7f1;
  --help-blue:    #105b8a;
  --navy-glass:   rgba(15, 62, 105, 0.95);
  --cyan-glass:   rgba(62, 188, 231, 0.8);

  /* --- FONTS (Patterson self-hosted, no external font services) ---------- */
  --font-body:       "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-condensed:  "Archivo", "Figtree", system-ui, sans-serif;

  /* --- FONT SIZES - semantic scale --------------------------------------- */
  --fs-xs:   0.75rem;    /* 12px - eyebrows, footnotes */
  --fs-sm:   0.875rem;   /* 14px - nav, buttons, metadata */
  --fs-base: 1rem;       /* 16px - body */
  --fs-lg:   1.125rem;   /* 18px - lead paragraphs, H4 */
  --fs-xl:   1.25rem;    /* 20px - card headings */
  --fs-2xl:  1.5rem;     /* 24px - H3 */
  --fs-3xl:  2rem;       /* 32px - H2 */
  --fs-4xl:  2.5rem;     /* 40px - H1 / display */

  /* --- FONT SIZES - responsive heading clamps ---------------------------- */
  --fs-h1: clamp(1.875rem, 3vw + 0.5rem, var(--fs-4xl));
  --fs-h2: clamp(1.5rem,   2vw + 0.5rem, var(--fs-3xl));
  --fs-h3: clamp(1.25rem,  1vw + 0.5rem, var(--fs-2xl));
  --fs-h4: var(--fs-lg);

  /* --- FONT SIZES - role aliases ----------------------------------------- */
  --fs-eyebrow: var(--fs-xs);
  --fs-utility: var(--fs-sm);
  --fs-meta:    var(--fs-sm);
  --fs-body:    var(--fs-base);
  --fs-body-sm: var(--fs-sm);
  --fs-body-lg: var(--fs-lg);
  --fs-small:   var(--fs-sm);

  /* --- FONT WEIGHTS, LINE HEIGHTS, TRACKING ------------------------------ */
  --fw-body:     400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;
  --lh-body:     1.5;
  --lh-heading:  1.25;
  --lh-display:  1.2;
  --ls-display:  0;
  --ls-eyebrow:  0;

  /* --- SPACING (8-step scale) ------------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* --- SECTION PADDING --------------------------------------------------- */
  --section-py:        var(--space-20);
  --section-py-mobile: var(--space-12);

  /* --- RADIUS (6-step) - mapped from Patterson's --r-* tokens ------------ */
  --radius-xs:   4px;    /* inputs */
  --radius-sm:   6px;    /* small buttons */
  --radius-md:   8px;    /* standard cards, buttons (was --r-button) */
  --radius-lg:   16px;   /* hero cards, media frames */
  --radius-xl:   24px;   /* display surfaces */
  --radius-pill: 999px;  /* pills, badges */

  /* Legacy radius aliases kept for backward compatibility */
  --r-button:   var(--radius-md);   /* 8px */
  --r-glass:    10px;               /* glass cards - no exact canonical match; kept */
  --r-card-sm:  var(--radius-xl);   /* 20px -> closest is xl (24px); kept exact */
  --r-card-lg:  30px;               /* contact card large - kept exact */
  --r-panel:    40px;               /* feature panels - kept exact */

  /* --- SHADOWS ----------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 2px 8px rgba(0, 55, 103, 0.08);
  --shadow-md:   0 4px 16px rgba(0, 55, 103, 0.10);
  --shadow-lg:   0 10px 30px rgba(0, 55, 103, 0.14);
  --shadow-glow: 0 0 0 4px rgba(38, 155, 203, 0.20);

  /* Legacy shadow aliases */
  --shadow-nav:  0 4px 20px 2px rgba(0, 0, 0, 0.08);   /* was --shadow-nav */
  --shadow-card: 0 4px 24px 2px rgba(0, 0, 0, 0.1);    /* was --shadow-card */

  /* --- PREMIUM PASS (v1.14): unified card elevation + media overlay -------- */
  --radius-card:       18px;   /* one card radius across the system */
  --elev-rest:         0 1px 3px rgba(0, 55, 103, 0.05), 0 1px 2px rgba(0, 55, 103, 0.04);
  --elev-hover:        0 16px 36px rgba(0, 55, 103, 0.13), 0 5px 12px rgba(0, 55, 103, 0.07);
  --overlay-media:     linear-gradient(to top, rgba(0, 28, 56, 0.82) 0%, rgba(0, 28, 56, 0.10) 48%, rgba(0, 28, 56, 0) 100%);

  /* --- LAYOUT ------------------------------------------------------------ */
  --container:        1200px;
  --container-narrow: 820px;
  --content-max:      1200px;   /* content column - aligned to framework standard (was 1440, too wide/edge-to-edge) */
  --gutter:           clamp(20px, 5vw, 96px);

  /* --- TRANSITION + Z-INDEX --------------------------------------------- */
  --transition:      200ms cubic-bezier(0.4, 0, 0.2, 1);  /* standard */
  --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);  /* small UI (chips, links) */
  --transition-slow: 520ms cubic-bezier(0.16, 1, 0.3, 1); /* image zoom, large reveals */
  --ease-out-soft:   cubic-bezier(0.16, 1, 0.3, 1);       /* entrance/settle easing */
  --reveal-stagger:  70ms;                                /* per-sibling scroll-reveal delay step */
  --z-base:    1;
  --z-content: 10;
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   1000;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* Bot-trap honeypot field - hidden from real users */
.form-honeypot {
  display: none;
}

/* Shared content wrapper - the 1440px column (Patterson convention) */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Narrow container for body content (framework canonical 820px) */
.container.narrow {
  max-width: var(--container-narrow);
}

/* ==========================================================================
   3. HEADER  (utility bar + navy nav) - BYTE-IDENTICAL across all 3 pages
   ========================================================================== */
.site-header {
  position: relative;
  z-index: var(--z-header);
}

/* --- Utility bar --- */
.utility-bar {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  min-height: 50px;
  flex-wrap: wrap;
}

.utility-link {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--color-accent-hover);
  letter-spacing: var(--ls-display);
}

.utility-link:hover {
  color: var(--color-brand);
}

.utility-region {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--color-accent-hover);
}

.utility-region__flag {
  width: 33px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
}

.help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--cyan-ring);
  border-radius: 50%;
  background: transparent;
  color: var(--help-blue);
  padding: 0;
}

.help-button svg {
  width: 11px;
  height: 11px;
}

.help-button:hover {
  background: var(--cyan-ring);
  color: var(--color-bg);
}

/* --- Navy nav bar --- */
.main-nav {
  background: var(--color-brand);
  box-shadow: var(--shadow-nav);
}

.main-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 90px;
  /* Header spans wider than the 1200px body column so all 6 nav items,
     the logo, and the Sign-in CTA sit on one line without cramping. */
  max-width: 1400px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo img {
  height: 56px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-weight: var(--fw-semibold);
  font-size: 18px;
  color: var(--color-heading-inverse);
  letter-spacing: var(--ls-display);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  border-bottom-color: var(--color-accent);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-shrink: 0;
}

.nav-account {
  font-weight: var(--fw-semibold);
  font-size: 18px;
  color: var(--color-heading-inverse);
  letter-spacing: var(--ls-display);
  white-space: nowrap;
}

.nav-account:hover {
  color: var(--color-accent);
}

.nav-signin {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-heading-inverse);
}

.nav-signin svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.nav-signin__label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: 1.15;
  letter-spacing: var(--ls-display);
}

.nav-signin:hover .nav-signin__label {
  color: var(--color-accent);
}

/* Hamburger - hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  background: transparent;
  border: 0;
}

.nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--color-heading-inverse);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Primary-nav dropdown menus --- */
/* A dropdown parent is a .nav-trigger button + sibling .nav-menu list, wrapped
   in a .nav-item. Desktop: opens on hover / focus-within / click. Mobile drawer:
   the trigger toggles .nav-menu.is-open. Registered on /design-system/. */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  color: var(--color-heading-inverse);
  letter-spacing: var(--ls-display);
  padding: 6px 2px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.nav-item:hover .nav-trigger,
.nav-item:focus-within .nav-trigger,
.nav-trigger[aria-expanded="true"] {
  border-bottom-color: var(--color-accent);
}

.nav-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition);
  flex-shrink: 0;
}

.nav-item:hover .nav-caret,
.nav-trigger[aria-expanded="true"] .nav-caret {
  transform: translateY(1px) rotate(-135deg);
}

.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 248px;
  margin-top: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 50;
}

.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Transparent hover bridge across the margin-top gap so the dropdown doesn't
   close as the cursor travels from the trigger down to the menu. Inert when
   the menu is hidden (inherits visibility:hidden). */
.nav-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--space-2) + 2px);
}

.nav-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  letter-spacing: var(--ls-display);
  white-space: nowrap;
  border-bottom: 0;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  background: var(--color-brand-tint);
  color: var(--color-brand);
}

.nav-menu__all {
  font-weight: var(--fw-bold);
  color: var(--color-accent-hover);
}

/* ==========================================================================
   4. FOOTER - BYTE-IDENTICAL across all 3 pages
   ========================================================================== */
.site-footer {
  background: var(--color-brand);
  color: var(--color-heading-inverse);
}

.footer-main {
  padding-block: clamp(56px, 6vw, 84px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px 56px;
}

.footer-grid--single {
  margin-top: 40px;
  grid-template-columns: 1fr;
}

.footer-col__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: color-mix(in srgb, var(--color-heading-inverse) 70%, transparent);
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a,
.footer-text {
  font-weight: var(--fw-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-heading-inverse);
  letter-spacing: var(--ls-display);
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-col__title--mt {
  margin-top: 28px;
}

/* About-Us column has two stacked link grids */
.footer-about__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 32px;
}

.footer-social {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-heading-inverse);
}

.footer-social a:hover {
  background: var(--color-accent);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-address {
  font-style: normal;
}

.footer-bar {
  background: var(--color-bg);
}

.footer-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  min-height: 50px;
  padding-block: 12px;
  text-align: center;
}

.footer-bar a {
  font-weight: var(--fw-semibold);
  font-size: 15px;
  color: var(--color-accent-hover);
  letter-spacing: var(--ls-display);
}

.footer-bar a:hover {
  color: var(--color-brand);
}

.footer-bar__copy {
  font-size: 15px;
  color: var(--color-text-muted);
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- Eyebrow / kicker --- */
.eyebrow {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* --- Section headings (navy, Extrabold) --- */
.section-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
}

.section-intro {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: 14px 30px;
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: var(--r-button);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  letter-spacing: var(--ls-display);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary,
.btn.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn--primary:hover,
.btn--primary:focus-visible,
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  background: var(--color-brand);
}

.btn--outline,
.btn.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline:hover,
.btn--outline:focus-visible,
.btn.btn-outline:hover,
.btn.btn-outline:focus-visible {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* Framework button aliases */
.btn.btn-outline-dark {
  background: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.btn.btn-outline-dark:hover {
  background: var(--color-brand);
  color: var(--color-bg);
}

.btn.btn-outline-light {
  background: transparent;
  color: var(--color-bg);
  border-color: var(--color-bg);
}

.btn.btn-outline-light:hover {
  background: var(--color-bg);
  color: var(--color-brand);
}

.btn.btn-white {
  background: var(--color-bg);
  color: var(--color-brand);
  border-color: var(--color-bg);
}

.btn.btn-sm {
  padding: 8px 18px;
  font-size: var(--fs-sm);
  min-height: 36px;
}

.btn.btn-lg {
  padding: 18px 40px;
  font-size: var(--fs-xl);
  min-height: 56px;
}

.btn-full {
  width: 100%;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.button-row--center {
  justify-content: center;
}

/* --- Section layout --- */
.section {
  padding-block: clamp(56px, 7vw, 96px);
}

.section.soft {
  background: var(--color-bg-soft);
}

.section.ink {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --- Section-header modifiers --- */
/* Adds bottom margin to the standard centered section header. */
.section-header--mb-12 { margin-bottom: var(--space-12); }
.section-header--mb-10 { margin-bottom: var(--space-10); }
.section-header--mb-6  { margin-bottom: var(--space-6);  }

/* Visually-hidden accessible label (standard WP utility). Used for aria-labelledby
   headings that should not render visually (e.g. archive section headings). */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}

/* Left-aligned, full-width section header (used in narrow prose columns). */
.section-header--left {
  text-align: left;
  max-width: none;
}

/* Inverse (dark navy surface) section header - form-band, ink sections. */
.section-header--inverse {
  --color-heading: var(--color-heading-inverse);
  color: var(--color-text-inverse);
}
.section-header--inverse .eyebrow {
  color: var(--color-accent);
}
.section-header--inverse .section-heading {
  color: var(--color-heading-inverse);
}
.section-header--inverse .section-intro {
  color: var(--color-text-inverse);
}

/* --- Panel grid (service / product category card grids) --- */
/* 300 px min column - matches repeat(auto-fit,minmax(300px,1fr)) */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}

/* 280 px min variant - slightly wider columns for fewer items */
.panel-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --- Grid primitives (fixed column counts) ----------------------------- */
/* For drop-in sections that want an exact column count rather than auto-fit. */
/* Responsive collapse: 4->2, 3->2 at tablet, then everything ->1 at mobile. */
.grid {
  display: grid;
  gap: var(--space-6);
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
}

/* --- Service panel btn alignment --- */
/* Buttons inside a flex-column service-panel push to the left edge, */
/* not stretch across the full card width. */
.service-panel .btn {
  align-self: flex-start;
}

/* --- Sub-section heading (inside .container.narrow body sections) --- */
/* Replaces repeated inline h2 styles: fs-h3, fw-bold, color-heading.  */
.sub-section-heading {
  font-size:     var(--fs-h3);
  font-weight:   var(--fw-bold);
  color:         var(--color-heading);
  margin-bottom: var(--space-5);
}
.sub-section-heading--mb-4 { margin-bottom: var(--space-4); }
.sub-section-heading--mb-6 { margin-bottom: var(--space-6); }

/* --- Sub-section body text (intro paragraph before catalogue buttons) --- */
.sub-section-body {
  font-size:     var(--fs-body);
  color:         var(--color-text);
  margin-bottom: var(--space-6);
}

/* --- Card heading (comparison-card h3) --- */
.card-heading {
  font-size:     var(--fs-xl);
  font-weight:   var(--fw-bold);
  color:         var(--color-heading);
  margin-bottom: var(--space-4);
}

/* --- Form-band body wrapper (max-width + centering for the form) --- */
.form-band-body {
  max-width:     520px;
  margin-inline: auto;
  margin-top:    var(--space-10);
}

/* --- Inverse form fields (.section.ink context) --- */
/* Labels, inputs, and border become white/translucent on dark surfaces. */
.ink .form-field label {
  color: var(--color-heading-inverse);
}
.ink .form-field input,
.ink .form-field textarea {
  border-bottom-color: rgba(255, 255, 255, 0.3);
  color:               var(--color-heading-inverse);
}

/* --- Location block layout --- */
.location-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-10);
  align-items:           start;
}

/* Map iframe wrapper - fixed aspect ratio, clipped corners. */
.map-frame {
  border-radius: var(--radius-lg);
  overflow:      hidden;
  aspect-ratio:  4 / 3;
  background:    var(--color-line);
}

.map-frame iframe {
  display: block;
  border:  0;
}

/* Info column - vertical flex with even gap between address/hours/CTA. */
.info-col {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
}

.info-col .btn {
  align-self: flex-start;
}

/* Office name heading inside the info column. */
.location-heading {
  font-size:     var(--fs-h3);
  color:         var(--color-heading);
  font-weight:   var(--fw-bold);
  margin-bottom: var(--space-3);
}

/* Hours / secondary heading inside the info column. */
.location-subheading {
  font-size:     var(--fs-body-lg);
  color:         var(--color-heading);
  font-weight:   var(--fw-semibold);
  margin-bottom: var(--space-3);
}

/* Unstyled address block. */
.office-address {
  font-style:  normal;
  color:       var(--color-text);
  font-size:   var(--fs-body);
  line-height: 1.7;
}

/* Body text for hours / secondary info lines. */
.hours-text {
  font-size:   var(--fs-body);
  color:       var(--color-text);
  line-height: 1.7;
}

/* Accent-colored hyperlink (phone numbers, inline links on light bg). */
.link-accent {
  color: var(--color-accent-hover);
}

/* --- Spacing utilities (margin / padding - spacing scale only) --- */
/* Use only when no semantic component class fits the context. */
.mt-6  { margin-top: var(--space-6);  }
.mt-8  { margin-top: var(--space-8);  }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.pt-6  { padding-top: var(--space-6); }

/* Responsive location grid: stack on narrow viewports. */
@media (max-width: 767px) {
  .location-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Prose (blog body, articles) --- */
.prose {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text);
}

.prose h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.prose h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose p {
  margin-bottom: var(--space-5);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--space-5) var(--space-6);
  padding: 0;
}

.prose li {
  margin-bottom: var(--space-2);
  list-style: inherit;
}

.prose a {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.prose a:hover {
  color: var(--color-brand);
}

/* --- Service panel (canonical panel primitive) --- */
.service-panel {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-panel--soft {
  background: var(--color-bg-soft);
}

.service-panel--tint {
  background: var(--color-brand-tint);
}

.service-panel--brand {
  background: var(--color-brand);
  color: var(--color-heading-inverse);
}

.service-panel--center {
  align-items: center;
  text-align: center;
}

.service-panel-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-heading);
}

.service-panel--brand .service-panel-title {
  color: var(--color-heading-inverse);
}

.service-panel-copy {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-body);
}

.service-panel--brand .service-panel-copy {
  color: var(--color-text-inverse);
}

/* --- Card + tick --- */
.card {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  padding: var(--space-6);
}

/* --- Reviews / testimonials (repeatable component) --- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 980px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  background: var(--color-bg); /* white card on the soft section */
}
.review-card__stars {
  color: var(--color-star);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-eyebrow);
  margin: 0;
}
.review-card__quote {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--color-text);
  flex: 1 1 auto;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__footer { margin-top: auto; }
.review-card__name {
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  font-size: var(--fs-body-sm);
  margin: 0;
}
.review-card__context {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Why-list (checkmark bullets) --- */
.why-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.why-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-width: 0;
  overflow-wrap: anywhere;
}

.why-list li::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- FAQ list --- */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-list li {
  border-bottom: 1px solid var(--color-line);
}

.faq-list li:first-child {
  border-top: 1px solid var(--color-line);
}

.faq-list details {
  cursor: pointer;
}

.faq-list summary {
  padding: var(--space-5) 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--color-heading);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: '+';
  font-size: var(--fs-xl);
  font-weight: var(--fw-body);
  color: var(--color-accent);
  flex-shrink: 0;
}

.faq-list details[open] summary::after {
  content: '-';
}

.faq-body {
  padding-bottom: var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.faq-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.faq-group-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

/* --- Process steps --- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  counter-reset: steps-counter;
}

.step {
  display: flex;
  gap: var(--space-6);
  counter-increment: steps-counter;
}

.step::before {
  content: counter(steps-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Comparison cards --- */
.comparison-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.comparison-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.comparison-card--accent {
  background: var(--color-brand-tint);
  border-color: var(--color-accent);
}

/* --- Cost cards --- */
.cost-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

.cost-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cost-card-range {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-secondary);
  background: var(--color-brand-tint);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
}

.cost-card-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.cost-card-body {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}

/* --- Alert callout --- */
.alert-callout {
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: var(--space-5) var(--space-6);
}

.alert-callout-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}

.alert-callout-body {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-body);
}

/* --- Page hero (interior pages) --- */
.page-hero {
  padding-block: clamp(48px, 6vw, 96px);
  background: var(--color-brand-tint);
}

.page-hero h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-display);
  margin-bottom: var(--space-4);
}

.page-hero .lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}

/* --- Breadcrumbs --- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.breadcrumbs a {
  color: var(--color-accent-hover);
}

.breadcrumbs a:hover {
  color: var(--color-brand);
}

.breadcrumbs .sep {
  color: var(--color-text-muted);
}

/* --- Lead text --- */
.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* --- Circular service tiles --- */
.service-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.service-tile__img {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 8px solid var(--ring-gray);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.service-tile:hover .service-tile__img {
  transform: translateY(-6px);
  border-color: var(--color-accent);
}

.service-tile__label {
  font-weight: var(--fw-semibold);
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: var(--ls-display);
  color: var(--color-accent-hover);
}

.service-tile:hover .service-tile__label {
  color: var(--color-brand);
}

/* --- Video card with play button --- */
.video-card {
  position: relative;
  width: 100%;
  border-radius: var(--r-button);
  overflow: hidden;
  aspect-ratio: 1024 / 544;
  background: var(--color-brand);
}

.video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 0;
  padding: 0;
  transition: background-color var(--transition), transform var(--transition);
}

.play-button:hover,
.play-button:focus-visible {
  background: var(--color-bg);
  transform: translate(-50%, -50%) scale(1.06);
}

.play-button svg {
  width: 40px;
  height: 40px;
  margin-left: 4px;
}

/* --- Feature row (image + text) --- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 60px);
}

.feature-row--reverse .feature-row__media {
  order: 2;
}

.feature-row__media {
  border-radius: var(--r-panel);
  overflow: hidden;
  aspect-ratio: 625 / 520;
}

.feature-row__media--gray {
  background: var(--panel-gray);
}

.feature-row__media--light {
  background: var(--panel-light);
}

.feature-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.feature-row__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  letter-spacing: var(--ls-display);
  line-height: 1.14;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
}

.feature-row__text {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: var(--lh-body);
}

.feature-row .btn {
  align-self: flex-start;
}

/* --- Event card --- */
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-soft);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.event-card__media {
  position: relative;
  aspect-ratio: 547 / 331;
  overflow: hidden;
}

.event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.event-card:hover .event-card__media img {
  transform: scale(1.04);
}

.event-card__bookmark {
  position: absolute;
  top: 28px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: var(--color-bg);
  padding: 0;
}

.event-card__bookmark svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.event-card__bookmark:hover {
  color: var(--color-accent);
}

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
}

.event-card__date {
  font-weight: var(--fw-body);
  font-size: 18px;
  color: var(--color-text-muted);
  letter-spacing: var(--ls-display);
}

.event-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--near-black);
}

.event-card__desc {
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* ==========================================================================
   6. PAGE SECTIONS
   ========================================================================== */

/* --- HOME: Hero --- */
.home-hero {
  position: relative;
  min-height: clamp(560px, 60vw, 836px);
  background: var(--color-line);
}

.home-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 60vw, 836px);
  padding-block: 60px;
}

.hero-card {
  width: min(657px, 100%);
  background: var(--navy-glass);
  border-radius: var(--r-glass);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--color-heading-inverse);
}

.hero-card__headline {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: none;
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  overflow-wrap: normal;
  text-wrap: balance;
}

/* Only the "5,000+" proof point is accent; the rest of the headline is white. */
.hero-card__headline .accent {
  color: var(--color-accent);
}

.hero-card__text {
  font-weight: var(--fw-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: var(--lh-body);
  color: var(--color-heading-inverse);
}

.hero-card .btn {
  align-self: flex-start;
}

/* --- HOME: Power Your Practice --- */
.power-section {
  background: var(--color-bg-soft);
}

.power-section__head {
  text-align: center;
  max-width: 1024px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.service-row {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 30px);
}

/* --- HOME: Startup to Success --- */
.startup-section {
  background: var(--color-bg-soft);
  text-align: center;
}

.startup-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 48px);
}

.startup-section .section-heading {
  max-width: 1024px;
}

.startup-section__video {
  width: min(1024px, 100%);
}

.startup-section__text {
  max-width: 1180px;
}

/* --- Generic feature stack --- */
.feature-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vw, 110px);
}

/* --- HOME: Upcoming Events --- */
.events-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 36px);
}

/* --- HOME: Testimonial --- */
.testimonial-section {
  position: relative;
  background: var(--color-bg-soft);
  min-height: clamp(480px, 42vw, 590px);
  display: flex;
  align-items: center;
}

.testimonial-section__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-section__play {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
}

.testimonial-section__inner {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.quote-card {
  position: relative;
  width: min(558px, 100%);
  background: var(--cyan-glass);
  border-radius: var(--r-glass);
  padding: clamp(40px, 5vw, 80px) clamp(32px, 5vw, 60px);
  color: var(--color-heading-inverse);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.quote-card__mark {
  color: var(--color-heading-inverse);
}

.quote-card__mark svg {
  width: 48px;
  height: 38px;
}

.quote-card__mark--close {
  align-self: flex-end;
  transform: rotate(180deg);
}

.quote-card__text {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.25rem, 2vw, 1.875rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-align: center;
  color: var(--color-heading-inverse);
}

.quote-card__author {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-display);
  text-align: center;
  color: var(--color-heading-inverse);
}

/* --- HOME: Bottom CTA --- */
.cta-section {
  background: var(--color-bg);
  text-align: center;
}

.cta-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 860px;
  margin-inline: auto;
}

.cta-section__text {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: var(--lh-body);
}

.cta-section .btn {
  margin-top: 12px;
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.form-field label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--color-heading);
  letter-spacing: var(--ls-display);
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--color-line);
  padding: var(--space-2) 2px;
  transition: border-color var(--transition);
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-placeholder);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

.form-field textarea {
  resize: vertical;
  min-height: 96px;
}

.contact-form .btn {
  align-self: flex-start;
  margin-top: 4px;
}

.contact-form__status {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.contact-form__status--ok {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

.contact-form__status--error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}

/* Contact info card */
/* Generic stacked information list: contact cards, support details, office facts. */
.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.info-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.info-list__label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  color: var(--color-heading);
  letter-spacing: var(--ls-display);
}

.info-list__text {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.info-list__text a {
  color: var(--color-accent-hover);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

/* --- Tablet --- */
@media (max-width: 1024px) {
  .nav-account,
  .nav-actions {
    display: none;
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 130;
  }

  /* Right slide-out drawer */
  .nav-links {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-brand);
    box-shadow: var(--shadow-lg);
    padding: 84px 0 28px;
    transform: none;
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transition: clip-path var(--transition-slow), opacity var(--transition);
    z-index: 120;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
  }
  .nav-links.is-open {
    opacity: 1;
    clip-path: inset(0);
    visibility: visible;
  }

  .nav-links.is-open a {
    padding: 16px var(--gutter);
    min-height: 52px;
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links.is-open a:hover,
  .nav-links.is-open a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.06);
  }

  /* Drawer dropdowns: trigger is a full-width row; menu collapses inline. */
  .nav-links.is-open .nav-item {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-links.is-open .nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 14px var(--gutter);
    min-height: 44px;
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links.is-open .nav-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .nav-links.is-open .nav-menu.is-open {
    display: flex;
  }

  .nav-links.is-open .nav-menu a {
    color: var(--color-heading-inverse);
    padding: 12px var(--gutter) 12px calc(var(--gutter) + var(--space-4));
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    white-space: normal;
  }

  .nav-links.is-open .nav-menu a:hover,
  .nav-links.is-open .nav-menu a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-heading-inverse);
  }

  .nav-links:not(.is-open) .nav-menu,
  .nav-links:not(.is-open) .nav-mega {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-col--about {
    grid-column: 1 / -1;
  }

  .service-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .events-grid {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial-section__play {
    left: 50%;
  }

  .comparison-cards {
    grid-template-columns: 1fr;
  }
}

/* --- Mobile --- */
@media (max-width: 680px) {
  body {
    font-size: 17px;
  }

  .utility-bar__inner {
    justify-content: center;
    gap: 14px 18px;
    padding-block: var(--space-2);
  }

  .utility-link,
  .utility-region {
    font-size: var(--fs-sm);
  }

  .nav-logo img {
    height: 40px;
  }

  .feature-row {
    grid-template-columns: 1fr;
  }

  .feature-row--reverse .feature-row__media {
    order: 0;
  }

  .feature-row__media {
    aspect-ratio: 16 / 10;
  }

  .service-row {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }

  .events-grid {
    grid-template-columns: 1fr;
  }

  .events-section__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-about__grid {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial-section__inner {
    justify-content: center;
  }

  .quote-card {
    width: 100%;
  }

  .btn {
    width: 100%;
  }

  .feature-row .btn,
  .hero-card .btn,
  .contact-form .btn {
    align-self: stretch;
  }

  .home-hero__inner {
    padding-block: 40px;
  }
}

/* --- Small mobile --- */
@media (max-width: 400px) {
  .service-row {
    grid-template-columns: 1fr;
  }

  .service-tile__img {
    max-width: 160px;
  }
}

/* --- Motion: scroll-reveal + image fade-in (ported from River's Edge) --- */
/* JS adds .reveal / .js-fade only when motion is allowed; without JS or under
   reduced-motion the elements render fully visible (these are the base state). */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--transition-slow) var(--reveal-delay, 0ms),
    transform var(--transition-slow) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js-fade {
  opacity: 0;
  transition: opacity 600ms var(--ease-out-soft);
}
.js-fade.is-loaded {
  opacity: 1;
}

/* --- Focus ring: keyboard users get a clear accent outline --- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Never leave a reveal/fade element stuck invisible. */
  .reveal,
  .js-fade {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   8. VIDEO LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 18, 36, 0.85);
  padding: var(--space-6);
}

.lightbox.is-open {
  display: flex;
}

.lightbox__dialog {
  position: relative;
  width: min(900px, 100%);
  background: var(--color-brand);
  border-radius: var(--r-glass);
  overflow: hidden;
}

.lightbox__frame {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-heading-inverse);
  text-align: center;
  padding: 32px;
  font-size: 18px;
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-heading-inverse);
  font-size: var(--fs-2xl);
  line-height: 1;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   9. CONTACT FORM SLOT
   ========================================================================== */
.ghl-form-slot {
  display: block;
}

/* ==========================================================================
   10. FALLBACK TEMPLATE (index.php)
   ========================================================================== */
.fallback-entry {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.fallback-entry__content {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.fallback-entry__content a {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.fallback-entry__content a:hover {
  color: var(--color-brand);
}

.fallback-entry__pages {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* ==========================================================================
   11. BLOG SYSTEM COMPONENTS (Framework v1.1)
   Brand-adapted for Patterson Dental BC.
   ========================================================================== */

/* --- Answer box (.answer-box) --- */
.answer-box {
  background:    var(--color-brand-tint);
  border-left:   4px solid var(--color-brand);
  border-radius: var(--radius-xs);
  padding:       var(--space-5) var(--space-6);
  margin:        var(--space-8) 0;
}

.answer-box-label {
  font-size:      var(--fs-eyebrow);
  font-family:    var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight:    var(--fw-bold);
  color:          var(--color-brand-hover);
  margin:         0 0 var(--space-2);
}

.answer-box-body {
  margin: 0;
}

.answer-box-body p {
  font-size:   var(--fs-body-lg);
  line-height: 1.65;
  color:       var(--color-heading);
  margin:      0;
}

.answer-box-body p + p {
  margin-top: var(--space-2);
}

/* --- Table of contents (.post-toc) --- */
.post-toc {
  background:    var(--color-bg-soft);
  border:        1px solid var(--color-line);
  border-radius: var(--radius-xs);
  margin:        var(--space-6) 0;
  overflow:      hidden;
}

.post-toc-details {
  display: block;
}

.post-toc-summary {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.85rem var(--space-5);
  font-family:     var(--font-heading);
  font-size:       var(--fs-utility);
  font-weight:     var(--fw-bold);
  text-transform:  uppercase;
  letter-spacing: var(--ls-eyebrow);
  color:           var(--color-heading);
  cursor:          pointer;
  list-style:      none;
  user-select:     none;
}

.post-toc-summary::-webkit-details-marker {
  display: none;
}

.post-toc-summary::after {
  content:       '';
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-right:  2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform:     rotate(45deg);
  transition:    transform var(--transition);
  margin-left:   var(--space-2);
  flex-shrink:   0;
}

.post-toc-details[open] .post-toc-summary::after {
  transform: rotate(-135deg);
}

.post-toc-list {
  list-style: decimal;
  margin:     0;
  padding:    var(--space-1) var(--space-5) var(--space-4) 2.5rem;
  border-top: 1px solid var(--color-line);
}

.post-toc-item {
  padding:   0.2rem 0;
  font-size: var(--fs-body-sm);
}

.post-toc-item a {
  color:           var(--color-brand-hover);
  text-decoration: none;
  transition:      color var(--transition);
}

.post-toc-item a:hover {
  color:           var(--color-brand);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .post-toc-details {
    pointer-events: none;
  }
  .post-toc-details > .post-toc-list {
    display:    block !important;
    border-top: 1px solid var(--color-line);
  }
  .post-toc-summary {
    pointer-events: none;
    cursor:         default;
  }
  .post-toc-summary::after {
    display: none;
  }
}

/* --- Author box (.author-box) --- */
.author-box {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-6);
  background:    var(--color-bg-soft);
  border:        1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  margin:        var(--space-10) 0;
}

.author-box-portrait {
  flex-shrink: 0;
  margin:      0;
}

.author-box-portrait img {
  width:         80px;
  height:        80px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid var(--color-brand-tint);
}

.author-box-body {
  min-width: 0;
}

.author-box-name {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size:   var(--fs-body-lg);
  color:       var(--color-heading);
  margin:      0 0 var(--space-1);
}

.author-box-credentials {
  font-size:   var(--fs-utility);
  color:       var(--color-text-muted);
  line-height: var(--lh-body);
  margin:      0 0 var(--space-2);
}

.author-box-link {
  font-size:       var(--fs-utility);
  font-weight:     var(--fw-semibold);
  color:           var(--color-brand-hover);
  text-decoration: none;
}

.author-box-link:hover {
  color:           var(--color-brand);
  text-decoration: underline;
}

@media (max-width: 599px) {
  .author-box {
    flex-direction: column;
    gap:            var(--space-4);
  }
}

/* --- Post feature card (.post-feature) --- */
.post-feature {
  background:    var(--color-bg);
  border:        1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  margin-bottom: var(--space-10);
  transition:    box-shadow var(--transition);
}

.post-feature:hover {
  box-shadow: var(--shadow-md);
}

.post-feature-thumb {
  display:      block;
  aspect-ratio: 16/9;
  overflow:     hidden;
  background:   var(--color-bg-soft);
}

.post-feature-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.post-feature:hover .post-feature-thumb img {
  transform: scale(1.025);
}

.post-feature-body {
  padding: var(--space-8);
}

.post-feature-title {
  font-size:   clamp(var(--fs-2xl), 2.5vw, 1.65rem);
  line-height: var(--lh-heading);
  margin:      var(--space-2) 0 var(--space-3);
}

.post-feature-title a {
  color:           var(--color-heading);
  text-decoration: none;
}

.post-feature-title a:hover {
  color: var(--color-brand-hover);
}

.post-feature-excerpt {
  font-size:   var(--fs-base);
  color:       var(--color-text-muted);
  line-height: 1.65;
  margin:      0 0 var(--space-5);
}

.post-feature .post-card-read-more {
  font-size: var(--fs-body-sm);
}

@media (max-width: 599px) {
  .post-feature-body {
    padding: var(--space-5);
  }
}

/* --- Post card meta row (.post-card-meta) --- */
.post-card-meta {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  font-size:   var(--fs-xs);
  color:       var(--color-text-muted);
  margin:      0 0 var(--space-1);
  flex-wrap:   wrap;
}

.post-card-meta-badge {
  background:     var(--color-brand);
  color:          var(--color-bg);
  font-size:      0.7rem;
  font-weight:    var(--fw-bold);
  font-family:    var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  padding:        0.15em 0.5em;
  border-radius:  var(--radius-pill);
  margin-right:   0.15rem;
}

.post-card-meta-sep {
  opacity: 0.5;
}

.post-card .post-card-meta {
  font-size:     var(--fs-xs);
  margin-bottom: var(--space-1);
}

.post-card-excerpt {
  font-size:              var(--fs-body-sm);
  color:                  var(--color-text-muted);
  line-height:            1.55;
  margin:                 0;
  display:                -webkit-box;
  -webkit-line-clamp:     2;
  -webkit-box-orient:     vertical;
  overflow:               hidden;
  flex:                   1;
}

/* Post card (standard grid card) */
.post-card {
  background:    var(--color-bg);
  border:        1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:    box-shadow var(--transition);
}

.post-card:hover {
  box-shadow: var(--shadow-sm);
}

.post-card-thumb {
  display:      block;
  aspect-ratio: 16/9;
  overflow:     hidden;
  background:   var(--color-bg-soft);
}

.post-card-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-card:hover .post-card-thumb img {
  transform: scale(1.03);
}

.post-card-body {
  padding:        var(--space-5) var(--space-6);
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.post-card-title {
  font-size:   var(--fs-body-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color:       var(--color-heading);
  margin:      0 0 var(--space-2);
}

.post-card-title a {
  color:           inherit;
  text-decoration: none;
}

.post-card-title a:hover {
  color: var(--color-brand-hover);
}

.post-card-read-more {
  display:         inline-block;
  font-size:       var(--fs-utility);
  font-weight:     var(--fw-bold);
  color:           var(--color-accent);
  text-decoration: none;
  margin-top:      var(--space-2);
}

.post-card-read-more:hover {
  color:           var(--color-accent-hover);
  text-decoration: underline;
}

/* --- Topic chips --- */
.topic-chips {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-2);
  margin-bottom: var(--space-8);
}

.topic-chip {
  display:         inline-flex;
  align-items:     center;
  padding:         0.3rem 0.9rem;
  border-radius:   var(--radius-pill);
  border:          1.5px solid var(--color-line);
  background:      var(--color-bg);
  font-size:       var(--fs-xs);
  font-weight:     var(--fw-semibold);
  font-family:     var(--font-heading);
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      background var(--transition), border-color var(--transition), color var(--transition);
  white-space:     nowrap;
}

.topic-chip:hover,
.topic-chip.is-active {
  background:   var(--color-brand);
  border-color: var(--color-brand);
  color:        var(--color-bg);
}

@media (max-width: 599px) {
  .topic-chips {
    flex-wrap:                  nowrap;
    overflow-x:                 auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
    padding-bottom:             var(--space-1);
  }
  .topic-chips::-webkit-scrollbar {
    display: none;
  }
}

/* --- Pagination --- */
.pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.35rem;
  margin-top:      var(--space-12);
  flex-wrap:       wrap;
}

.page-numbers {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       38px;
  height:          38px;
  padding:         0 var(--space-2);
  border-radius:   var(--radius-xs);
  border:          1.5px solid var(--color-line);
  background:      var(--color-bg);
  font-size:       var(--fs-utility);
  font-weight:     var(--fw-semibold);
  font-family:     var(--font-heading);
  color:           var(--color-heading);
  text-decoration: none;
  transition:      background var(--transition), border-color var(--transition), color var(--transition);
}

.page-numbers:hover {
  background:   var(--color-brand-tint);
  border-color: var(--color-brand);
  color:        var(--color-brand-hover);
}

.page-numbers.current {
  background:     var(--color-brand);
  border-color:   var(--color-brand);
  color:          var(--color-bg);
  pointer-events: none;
}

.page-numbers.dots {
  border:         none;
  background:     none;
  color:          var(--color-text-muted);
  pointer-events: none;
}

.page-numbers.prev,
.page-numbers.next {
  padding: 0 0.85rem;
  gap:     var(--space-1);
}

/* --- Blog index layout (.blog-layout) --- */
.blog-layout {
  display:     grid;
  grid-template-columns: 1fr;
  gap:         var(--space-10);
  align-items: start;
}

@media (min-width: 1024px) {
  .blog-layout {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    gap:                   var(--space-12);
  }
  .blog-sidebar {
    position: sticky;
    top:      90px;
  }
}

.post-feed {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
  min-width:      0;
}

.post-feed > .post-card {
  width: 100%;
}

.blog-sidebar {
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

@media (max-width: 1023px) {
  .blog-sidebar {
    position: static;
  }
}

.sidebar-topics {
  display:  flex;
  flex-wrap: wrap;
  gap:      var(--space-2);
}

/* --- Sidebar widgets (.post-rail-card) --- */
.post-rail-card {
  background:    var(--color-bg-soft);
  border:        1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding:       var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}

.post-rail-card:last-child {
  margin-bottom: 0;
}

.post-rail-card h3 {
  font-size: var(--fs-base);
  color:     var(--color-heading);
  margin:    0 0 var(--space-2);
}

.post-rail-card p {
  font-size:   var(--fs-utility);
  color:       var(--color-text-muted);
  margin:      0 0 var(--space-4);
  line-height: var(--lh-body);
}

.post-rail-btn {
  display:       block;
  width:         100%;
  text-align:    center;
  margin-bottom: var(--space-2);
}

.post-rail-btn:last-child {
  margin-bottom: 0;
}

.post-rail-services {
  list-style: none;
  padding:    0;
  margin:     0;
  font-size:  var(--fs-utility);
}

.post-rail-services li {
  border-bottom: 1px solid var(--color-line);
}

.post-rail-services li:last-child {
  border-bottom: none;
}

.post-rail-services a {
  display:         block;
  padding:         0.45rem 0;
  color:           var(--color-heading);
  text-decoration: none;
  transition:      color var(--transition);
}

.post-rail-services a:hover {
  color: var(--color-brand);
}

/* --- Recent posts list --- */
.recent-posts-list {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.recent-post {
  display:     flex;
  gap:         var(--space-3);
  align-items: flex-start;
}

.recent-post-thumb {
  flex-shrink:   0;
  width:         56px;
  height:        56px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  background:    var(--color-bg-soft);
  display:       block;
  border:        1px solid var(--color-line);
}

.recent-post-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.recent-post-body {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
  min-width:      0;
}

.recent-post-title {
  font-size:              var(--fs-utility);
  font-weight:            var(--fw-semibold);
  color:                  var(--color-heading);
  line-height:            1.35;
  display:                -webkit-box;
  -webkit-line-clamp:     2;
  -webkit-box-orient:     vertical;
  overflow:               hidden;
  text-decoration:        none;
  word-break:             break-word;
}

.recent-post-title:hover {
  color: var(--color-brand);
}

.recent-post-date {
  font-size: var(--fs-meta);
  color:     var(--color-text-muted);
}

/* --- Sidebar search --- */
.sidebar-search {
  display: flex;
  gap:     var(--space-2);
}

.sidebar-search-input {
  flex:          1;
  min-width:     0;
  padding:       var(--space-2) var(--space-3);
  border:        1px solid var(--color-line);
  border-radius: var(--radius-xs);
  font-size:     var(--fs-utility);
  background:    var(--color-bg);
  color:         var(--color-heading);
}

.sidebar-search-input:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 1px;
}

.sidebar-search {
  flex-wrap: nowrap;
}
.sidebar-search-btn {
  flex: 0 0 auto;
  width: auto;
  padding-inline: var(--space-4);
  min-height: 0;
  font-size: var(--fs-utility);
}
.blog-main,
.post-feed,
.post-feature { min-width: 0; }

/* --- Sidebar author card --- */
.sidebar-author {
  display:     flex;
  gap:         0.875rem;
  align-items: flex-start;
}

.sidebar-author-portrait {
  flex-shrink:   0;
  width:         64px;
  height:        64px;
  border-radius: var(--radius-pill);
  overflow:      hidden;
  border:        1px solid var(--color-line);
  display:       block;
}

.sidebar-author-portrait img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.sidebar-author-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  min-width:      0;
}

.sidebar-author-name {
  font-weight: var(--fw-semibold);
  color:       var(--color-heading);
}

.sidebar-author-cred {
  font-size:   var(--fs-utility);
  color:       var(--color-text-muted);
  line-height: 1.4;
}

.sidebar-author-link {
  font-size:   var(--fs-utility);
  color:       var(--color-brand);
  font-weight: var(--fw-semibold);
}

.sidebar-author-link:hover {
  color: var(--color-brand-hover);
}

/* --- Blog single v2 (.post-layout-v2) --- */
.post-layout-v2 {
  display:     grid;
  grid-template-columns: 1fr;
  gap:         var(--space-12);
  align-items: start;
}

.post-main {
  min-width: 0;
}

.post-main > * + * {
  margin-top: var(--space-8);
}

.post-rail {
  display: none;
}

@media (min-width: 1024px) {
  .post-layout-v2 {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .post-rail {
    display:  block;
    position: sticky;
    top:      90px;
  }
}

@media (max-width: 767px) {
  .post-layout-v2 {
    gap: 0;
  }
}

/* --- Mobile inline CTA (.post-mobile-cta) --- */
.post-mobile-cta {
  display:       flex;
  gap:           var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap:     wrap;
}

.post-mobile-cta .btn {
  flex:            1;
  min-width:       130px;
  text-align:      center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .post-mobile-cta {
    display: none;
  }
}

@media (max-width: 599px) {
  .post-mobile-cta {
    flex-direction: column;
  }
  .post-mobile-cta .btn {
    min-width: 0;
  }
}

/* --- Related posts --- */
.related-section-heading {
  font-size:     var(--fs-xl);
  margin-bottom: var(--space-6);
  color:         var(--color-heading);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:     var(--space-6);
}

/* --- Post meta line --- */
.post-meta-line {
  display:    flex;
  gap:        var(--space-2);
  flex-wrap:  wrap;
  font-size:  var(--fs-meta);
  color:      var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ==========================================================================
   DESIGN SYSTEM REGISTRY - color swatch classes
   Used only by page-design-system.php token swatches. Each class sets
   background via a CSS custom property token - zero raw hex values.
   ========================================================================== */
.ds-swatch--brand           { background: var(--color-brand); }
.ds-swatch--brand-hover     { background: var(--color-brand-hover); }
.ds-swatch--brand-tint      { background: var(--color-brand-tint); }
.ds-swatch--accent          { background: var(--color-accent); }
.ds-swatch--accent-hover    { background: var(--color-accent-hover); }
.ds-swatch--secondary       { background: var(--color-secondary); }
.ds-swatch--heading         { background: var(--color-heading); }
.ds-swatch--text            { background: var(--color-text); }
.ds-swatch--text-muted      { background: var(--color-text-muted); }
.ds-swatch--line            { background: var(--color-line); }
.ds-swatch--bg              { background: var(--color-bg); }
.ds-swatch--bg-soft         { background: var(--color-bg-soft); }
.ds-swatch--bg-accent       { background: var(--color-bg-accent); }
.ds-swatch--bg-inverse      { background: var(--color-bg-inverse); }
.ds-swatch--star            { background: var(--color-star); }
.ds-swatch--success         { background: var(--color-success); }
.ds-swatch--error           { background: var(--color-error); }
/* Surface tokens (navy-glass / cyan-glass use rgba values defined on :root) */
.ds-swatch--navy-glass      { background: var(--navy-glass); }
.ds-swatch--cyan-glass      { background: var(--cyan-glass); }
.ds-swatch--panel-gray      { background: var(--panel-gray); }
.ds-swatch--panel-light     { background: var(--panel-light); }
.ds-swatch--ring-gray       { background: var(--ring-gray); }

/* ==========================================================================
   MARC CALL BUILDOUT (v1.8.0) - new components
   Hero background video + Training/Videos resource card. Registered on
   /design-system/. Tokens only, no page-namespaced classes.
   ========================================================================== */

/* --- Hero background video (home hero) ---
   The <video> reuses .home-hero__bg positioning. A soft scrim keeps the navy
   glass card crisp over moving aerial footage of Vancouver / Victoria / Kelowna. */
.home-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-brand) 55%, transparent) 0%,
    color-mix(in srgb, var(--color-brand) 24%, transparent) 48%,
    transparent 100%
  );
  pointer-events: none;
}

/* --- Training / Videos resource card --- */
.resource-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}
.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.resource-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-brand-tint);
  overflow: hidden;
}
.resource-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.resource-card:hover .resource-card__media img {
  transform: scale(1.04);
}
.resource-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-brand) 32%, transparent);
}
.resource-card__play svg {
  width: 56px;
  height: 56px;
  color: var(--color-bg);
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--color-brand) 45%, transparent));
}
.resource-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.resource-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-secondary);
}
.resource-card__meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-line);
}
.resource-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-heading);
}
.resource-card__excerpt {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* Month-grouped events feed: a left-aligned divider heading per month. */
.month-heading {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-8);
}
.month-group + .month-group {
  margin-top: clamp(40px, 5vw, 64px);
}

/* Event card register CTA sits at the bottom of the card body. */
.event-card__body .btn {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* ==========================================================================
   SALES LANDING ARCHETYPE (v1.9.0)
   Reusable global components for equipment + service sales pages:
   .lead-hero (split hero + quote form), .lead-form-card, .check-list,
   .trust-strip, .cta-rep (global rep CTA), .section--tight, footer brand
   column + Ad Blitz credit. Registered on /design-system/. Tokens only.
   ========================================================================== */

/* Denser section rhythm for sales pages */
.section--tight { padding-block: clamp(40px, 5vw, 72px); }

/* --- Split sales hero with inline quote form --- */
.lead-hero {
  position: relative;
  background: var(--color-brand);
  overflow: hidden;
}
.lead-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lead-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--color-brand) 93%, transparent) 0%,
    color-mix(in srgb, var(--color-brand) 80%, transparent) 44%,
    color-mix(in srgb, var(--color-brand) 42%, transparent) 100%
  );
}
.lead-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  padding-block: clamp(44px, 5.5vw, 84px);
}
.lead-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: var(--color-heading-inverse);
}
.lead-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 2.8vw, 2.625rem);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
}
.lead-hero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: var(--lh-body);
  color: var(--color-heading-inverse);
  max-width: 46ch;
}
.lead-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.lead-hero .breadcrumbs a,
.lead-hero .breadcrumbs span,
.lead-hero .breadcrumbs .sep {
  color: var(--color-heading-inverse);
}
.lead-hero .eyebrow { color: var(--color-bg); }

/* --- White lead-form card (hero + cta-rep) --- */
.lead-form-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 2.4vw, 36px);
}
.lead-form-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-2);
}
.lead-form-card__note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

@media (max-width: 900px) {
  .lead-form-card .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* --- Sales check list (accent circle + tick) --- */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.check-list li {
  position: relative;
  padding-left: var(--space-8);
  line-height: var(--lh-body);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--color-bg);
  border-bottom: 2px solid var(--color-bg);
  transform: rotate(45deg);
}

/* --- Trust strip (thin stat band) --- */
.trust-strip {
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
}
.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
}
.trust-strip__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
}
.trust-strip__num {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  color: var(--color-brand);
  line-height: 1.05;
}
.trust-strip__label {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-body);
}

/* --- Global rep CTA (image bg + split, every page) --- */
.cta-rep {
  position: relative;
  background: var(--color-brand);
  overflow: hidden;
}
.cta-rep__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-rep__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--color-brand) 95%, transparent) 0%,
    color-mix(in srgb, var(--color-brand) 84%, transparent) 52%,
    color-mix(in srgb, var(--color-brand) 60%, transparent) 100%
  );
}
.cta-rep__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  padding-block: clamp(48px, 6vw, 80px);
}
.cta-rep__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-heading-inverse);
}
.cta-rep__copy h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-heading-inverse);
}
.cta-rep__copy p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-heading-inverse);
  max-width: 44ch;
}
.cta-rep__call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
}
.cta-rep__call svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.cta-rep__note {
  font-size: var(--fs-sm);
  color: var(--color-heading-inverse);
}

/* --- Footer brand column + region + Ad Blitz credit --- */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer-brand__logo {
  display: inline-flex;
}
.footer-brand__logo img {
  height: 52px;
  width: auto;
}
.footer-brand__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-inverse);
  max-width: 36ch;
}
.footer-brand__region {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-heading-inverse);
}
.footer-brand__region img {
  width: 28px;
  height: auto;
  border-radius: 2px;
}
.footer-credit {
  font-size: 15px;
  color: var(--color-text-muted);
}
.footer-credit a {
  font-weight: var(--fw-semibold);
  color: var(--color-accent-hover);
}
.footer-credit a:hover {
  color: var(--color-brand);
}

/* Footer bottom bar: space the items rather than centre-stack */
.footer-bar__inner {
  justify-content: space-between;
}

/* --- Sales archetype responsive (last in file so it wins source order) --- */
@media (max-width: 1024px) {
  .lead-hero__inner,
  .cta-rep__inner {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 680px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .trust-strip__inner {
    gap: var(--space-4);
  }
  .trust-strip__item {
    min-width: calc(50% - var(--space-4));
  }
}

/* --- Compact lead form: side-by-side rows + consent checkbox (v1.9.1) --- */
.contact-form--compact { gap: var(--space-4); }
.contact-form--compact textarea { min-height: 70px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 400px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-consent {
  margin-top: var(--space-1);
}
.form-consent__label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  cursor: pointer;
}
.form-consent__label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.lead-form-card__note--top {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* --- Product / system card (image + body) - Leading Systems grid (v1.9.1) --- */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.product-card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);
  overflow: hidden;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.product-card:hover .product-card__media img {
  transform: scale(1.04);
}
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.product-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-heading);
}
.product-card__copy {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-body);
}

/* ==========================================================================
   MEGA MENU (v1.9.3) - wide organised nav panel for Equipment + Services
   .nav-item--mega is position:static so the panel spans the full nav width.
   Reuses the .nav-trigger button + .is-open / hover / focus-within mechanics.
   ========================================================================== */
.main-nav { position: relative; }
.nav-item--mega { position: static; }

.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  box-shadow: var(--shadow-lg);
  padding-block: var(--space-8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 50;
}
.nav-item--mega:hover .nav-mega,
.nav-item--mega:focus-within .nav-mega,
.nav-mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Transparent hover bridge over the nav's lower padding so the mega panel stays
   open as the cursor moves from the trigger down into it. Inert while hidden. */
.nav-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--space-6);
}
/* The drawer is toggle-driven (no hover), so the bridges are desktop-only. */
@media (max-width: 1024px) {
  .nav-menu::before,
  .nav-mega::before { display: none; }
}
.nav-mega__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.15fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.nav-mega__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.nav-mega__heading {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-secondary);
}
.nav-mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-mega__list a {
  display: block;
  padding: 7px 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  letter-spacing: var(--ls-display);
  border-bottom: 0;
}
.nav-mega__list a:hover {
  color: var(--color-accent);
}
.nav-mega__feature {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-brand-tint);
  border: 0;
}
.nav-mega__feature-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.nav-mega__feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.nav-mega__feature:hover .nav-mega__feature-media img {
  transform: scale(1.04);
}
.nav-mega__feature-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
}
.nav-mega__feature-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-secondary);
}
.nav-mega__feature-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-heading);
}
.nav-mega__feature:hover .nav-mega__feature-title {
  color: var(--color-accent);
}
.nav-mega__feature-text {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-body);
}

/* Mobile drawer: mega collapses to a stacked accordion, featured tile hidden */
@media (max-width: 1024px) {
  .nav-links.is-open .nav-mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    padding: 0;
    border-top: 0;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);
  }
  .nav-links.is-open .nav-mega.is-open {
    display: block;
  }
  .nav-links.is-open .nav-mega .container {
    padding-inline: 0;
  }
  .nav-links.is-open .nav-mega__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .nav-links.is-open .nav-mega__heading {
    padding: 12px var(--gutter) 4px;
  }
  .nav-links.is-open .nav-mega__list a {
    color: var(--color-heading-inverse);
    padding: 11px var(--gutter) 11px calc(var(--gutter) + var(--space-4));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-links.is-open .nav-mega__list a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-heading-inverse);
  }
  .nav-links.is-open .nav-mega__feature {
    display: none;
  }
}

/* ==========================================================================
   PREMIUM POLISH LAYER (v1.10.0) - auto-applies site-wide
   Sticky/condensing header, scroll progress, image blur-up, CTA motion,
   unified card hover, animated link underline, hero entrance. All guarded by
   prefers-reduced-motion. Driven by site.js where JS is needed.
   ========================================================================== */

/* Smooth in-page scrolling + offset for the sticky header */
html { scroll-behavior: smooth; scroll-padding-top: 104px; }

/* --- Sticky, condensing header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.main-nav__inner {
  transition: min-height var(--transition);
}
.nav-logo img {
  transition: height var(--transition);
}
.site-header.is-condensed .main-nav {
  box-shadow: var(--shadow-lg);
}
.site-header.is-condensed .main-nav__inner {
  min-height: 64px;
}
.site-header.is-condensed .nav-logo img {
  height: 42px;
}

/* --- Scroll progress bar --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--color-accent);
  z-index: 200;
  transition: width 80ms linear;
  pointer-events: none;
}

/* --- Image blur-up: js-fade enhanced to clear a soft blur on load --- */
.js-fade {
  opacity: 0;
  filter: blur(14px);
  transition: opacity 600ms var(--ease-out-soft), filter 700ms var(--ease-out-soft);
}
.js-fade.is-loaded {
  opacity: 1;
  filter: none;
}

/* --- CTA button motion: lift + light sheen sweep on hover --- */
.btn--primary,
.btn.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after,
.btn.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    color-mix(in srgb, var(--color-bg) 35%, transparent),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 600ms var(--ease-out-soft);
  pointer-events: none;
}
.btn--primary:hover,
.btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover::after,
.btn.btn-primary:hover::after {
  left: 130%;
}

/* --- Unified card hover (cards that lacked a hover state) --- */
.card,
.service-panel--soft,
.service-panel--tint {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}
.card:hover,
.service-panel--soft:hover,
.service-panel--tint:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* --- Animated link underline (nav + prose links) --- */
.nav-links > li > a,
.nav-account,
.prose a {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--transition);
}
.nav-links > li > a:hover,
.nav-account:hover,
.prose a:hover {
  background-size: 100% 2px;
}
/* keep the existing solid underline on the active nav page, no animation needed */
.nav-links > li > a[aria-current="page"] {
  background-size: 100% 2px;
}

/* --- Mega-menu transition refinement (slightly slower, smoother) --- */
.nav-mega {
  transition: opacity var(--transition-slow), transform var(--transition-slow),
    visibility var(--transition-slow);
}

/* --- Hero entrance: copy + form fade-up on first load --- */
.hero-enter {
  opacity: 0;
  transform: translateY(18px);
}
.hero-enter.is-entered {
  opacity: 1;
  transform: none;
  transition: opacity var(--transition-slow) var(--hero-delay, 0ms),
    transform var(--transition-slow) var(--hero-delay, 0ms);
}

/* --- Reduced motion: neutralise the polish animations --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-fade { filter: none !important; transform: none !important; }
  .btn--primary::after, .btn.btn-primary::after { display: none; }
  .btn--primary:hover, .btn.btn-primary:hover { transform: none; }
  .hero-enter { opacity: 1 !important; transform: none !important; }
  .scroll-progress { display: none; }
}

/* --- Value prop (icon + title + copy) - "why Patterson" treatment (v1.12) --- */
.value-props {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 980px) {
  .value-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .value-props { grid-template-columns: 1fr; }
}
.value-prop {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.value-prop__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-brand-tint);
  color: var(--color-accent);
}
.value-prop__icon svg {
  width: 26px;
  height: 26px;
}
.value-prop__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-heading);
}
.value-prop__text {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-body);
}

/* ==========================================================================
   MOBILE UX PASS (v1.13) - right slide-out drawer, hero/trust/footer mobile,
   centered value-props + event cards. Tokens only; composes existing components.
   ========================================================================== */

/* Drawer backdrop (lives inside .site-header so it shares its stacking context) */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-brand) 60%, transparent);
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

/* Drawer-only items (Sign In folded into the mobile menu) */
.nav-drawer-only { display: none; }

@media (max-width: 1024px) {
  .nav-backdrop { display: block; }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  /* Bigger, easier drawer tap targets */
  .nav-links.is-open .nav-trigger {
    min-height: 52px;
    padding: 16px var(--gutter);
    font-size: 18px;
  }
  .nav-links.is-open .nav-menu a,
  .nav-links.is-open .nav-mega__list a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Sign In / Register, folded into the drawer as a prominent item */
  .nav-drawer-only {
    display: block;
    margin-top: var(--space-4);
    padding-inline: var(--gutter);
  }
  .nav-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 52px;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-heading-inverse);
    font-weight: var(--fw-semibold);
    font-size: 18px;
  }
  .nav-drawer-cta:hover { background: var(--color-accent-hover); color: var(--color-heading-inverse); }
  .nav-drawer-cta svg { width: 22px; height: 22px; }

  /* Lock body scroll while the drawer is open */
  body.is-drawer-open { overflow: hidden; }
}

/* --- Hero mobile: shrink the card so the video reads, fit the headline --- */
@media (max-width: 680px) {
  .home-hero { min-height: 0; }
  .home-hero__inner {
    align-items: flex-end;
    min-height: clamp(440px, 92vw, 600px);
    padding-block: 28px;
  }
  .home-hero__scrim {
    background: linear-gradient(
      0deg,
      color-mix(in srgb, var(--color-brand) 78%, transparent) 0%,
      color-mix(in srgb, var(--color-brand) 30%, transparent) 55%,
      transparent 100%
    );
  }
  .hero-card {
    gap: 16px;
    padding: 22px 20px;
    width: 100%;
  }
  .hero-card__headline {
    font-size: clamp(1.55rem, 7.4vw, 2.05rem);
    line-height: 1.14;
    overflow-wrap: break-word;
  }
  .hero-card__text { font-size: 1rem; }
}

/* --- Trust strip mobile: clean centered 2x2 --- */
@media (max-width: 680px) {
  .trust-strip__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-4);
    justify-items: center;
    text-align: center;
  }
  .trust-strip__item {
    min-width: 0;
    align-items: center;
  }
}

/* --- Value props + event cards: centered on mobile --- */
@media (max-width: 560px) {
  .value-prop {
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 680px) {
  .event-card__body {
    align-items: center;
    text-align: center;
  }
  .event-card__body .btn {
    align-self: center;
  }
}

/* --- Footer mobile: centered, de-cramped --- */
@media (max-width: 680px) {
  .footer-grid {
    text-align: center;
    gap: var(--space-8);
  }
  .footer-brand {
    align-items: center;
  }
  .footer-brand__text,
  .footer-address {
    max-width: none;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-links {
    align-items: center;
  }
  .footer-bar__inner {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}

/* ==========================================================================
   PREMIUM PASS (v1.14) - cohesion, cards, type, teal, imagery, mobile, motion
   System-level upgrades that auto-apply. Tokens only; composes existing parts.
   ========================================================================== */

/* --- 1. Unified card language (one radius + layered elevation + hover) --- */
.product-card,
.resource-card,
.event-card,
.review-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  box-shadow: var(--elev-rest);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-card:hover,
.resource-card:hover,
.event-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--elev-hover);
  border-color: transparent;
}
.event-card__media,
.product-card__media,
.resource-card__media {
  border-radius: 0;
}

/* --- 2. Type refinement: confident hierarchy, capped measure --- */
.eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-secondary);
}
.section-heading {
  letter-spacing: var(--ls-display);
  line-height: 1.12;
}
.section-intro {
  max-width: 62ch;
}
.section-header:not(.section-header--left) .section-intro {
  margin-inline: auto;
}
.feature-row__text,
.product-card__copy,
.value-prop__text {
  max-width: 60ch;
}

/* --- 3. Strategic teal accent --- */
.value-prop__icon {
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  color: var(--color-secondary);
}
.section-heading .accent {
  color: var(--color-secondary);
}

/* --- 4. Consistent image treatment + overlay label (.product-card--overlay) --- */
.product-card__media {
  position: relative;
}
.product-card--overlay {
  position: relative;
}
.product-card--overlay .product-card__media {
  aspect-ratio: 3 / 4;
}
.product-card--overlay .product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-media);
}
.product-card--overlay .product-card__label {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 1;
  color: var(--color-heading-inverse);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}
.product-card--overlay .product-card__label::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-top: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  transition: width var(--transition);
}
.product-card--overlay:hover .product-card__label::after {
  width: 48px;
}

/* --- 5. Stat band upgrade (dividers + bigger numbers) --- */
.trust-strip {
  border-top: 1px solid var(--color-line);
}
.trust-strip__inner {
  gap: 0;
  flex-wrap: nowrap;
}
.trust-strip__item {
  flex: 1;
  align-items: center;
  text-align: center;
  padding-inline: var(--space-6);
  position: relative;
  min-width: 0;
}
.trust-strip__item + .trust-strip__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--color-line);
}
.trust-strip__num {
  font-size: clamp(1.625rem, 2.4vw, 2.25rem);
  letter-spacing: var(--ls-display);
}
.trust-strip__label {
  color: var(--color-text-muted);
}

/* --- 6. Hero refinement (lighter glass + scroll cue) --- */
.hero-card {
  background: color-mix(in srgb, var(--color-brand) 84%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-line-inverse);
}
.hero-card__eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-secondary) 60%, var(--color-heading-inverse));
}
.home-hero__cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px;
  height: 42px;
  border: 2px solid color-mix(in srgb, var(--color-heading-inverse) 70%, transparent);
  border-radius: var(--radius-pill);
  display: none; /* scroll cue retired - removed from hero markup */
  justify-content: center;
  padding-top: 7px;
  pointer-events: none;
}
.home-hero__cue::before {
  content: "";
  width: 4px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-heading-inverse);
  animation: hero-cue 1.6s var(--ease-out-soft) infinite;
}
@keyframes hero-cue {
  0% { opacity: 0; transform: translateY(-4px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px); }
}

/* --- 7. Section surfaces (alternating rhythm) --- */
.section--tint {
  background: var(--color-brand-tint);
}

/* --- 8. Equipment bento (flagship feature cards) --- */
.flagship-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(300px, 34vw, 420px);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--elev-rest);
  transition: transform var(--transition), box-shadow var(--transition);
}
.flagship-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--elev-hover);
}
.flagship-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.flagship-card:hover .flagship-card__bg {
  transform: scale(1.05);
}
.flagship-card__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-media);
}
.flagship-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(24px, 3vw, 36px);
  color: var(--color-heading-inverse);
}
.flagship-card__eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-secondary) 55%, var(--color-heading-inverse));
}
.flagship-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-heading-inverse);
}
.flagship-card__copy {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-heading-inverse);
  max-width: 42ch;
}
.flagship-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--color-heading-inverse);
}
.flagship-card__more::after {
  content: "";
  width: 16px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 40%, 60% 40%, 60% 15%, 100% 50%, 60% 85%, 60% 60%, 0 60%);
  transition: transform var(--transition);
}
.flagship-card:hover .flagship-card__more::after {
  transform: translateX(4px);
}

/* --- 9a. Equipment cards: grid desktop, swipe carousel on mobile --- */
@media (max-width: 680px) {
  .equip-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-4);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) var(--space-3);
  }
  .equip-carousel::-webkit-scrollbar { display: none; }
  .equip-carousel > * {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }
  .flagship-bento {
    grid-template-columns: 1fr;
  }
  .trust-strip__item + .trust-strip__item::before { display: none; }
}

/* --- 9b. Sticky mobile CTA bar (global) --- */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    gap: var(--space-2);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -6px 20px color-mix(in srgb, var(--color-brand) 10%, transparent);
    transform: translateY(110%);
    transition: transform var(--transition);
  }
  .mobile-cta-bar.is-visible { transform: translateY(0); }
  .mobile-cta-bar .btn {
    flex: 1;
    min-height: 50px;
    margin: 0;
  }
  body.cta-bar-on { padding-bottom: 76px; }
}

/* --- 10. Motion polish: reveal scale + smoother card media --- */
.reveal {
  transform: translateY(20px) scale(0.985);
}
.reveal.is-visible {
  transform: none;
}
.product-card__media img,
.resource-card__media img,
.event-card__media img {
  transition: transform var(--transition-slow);
}
.event-card:hover .event-card__media img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__cue::before { animation: none; }
  .reveal { transform: none !important; }
}

/* Design-system preview helper: render the sticky CTA bar inline at any width. */
.mobile-cta-bar--demo {
  display: flex;
  position: static;
  transform: none;
  box-shadow: none;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   TEAM GRID (v1.16) - "meet your BC team" cards. Photo (or honest silhouette
   placeholder) + name + role + one line. Used on the About page.
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.team-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-brand-tint);
  box-shadow: var(--elev-rest);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.team-card:hover .team-card__photo {
  box-shadow: var(--elev-hover);
  transform: translateY(-4px);
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-card__placeholder {
  width: 38%;
  height: auto;
  color: var(--color-brand);
  opacity: 0.32;
}
.team-card__name {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  color: var(--color-heading);
}
.team-card__role {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-secondary);
}
.team-card__line {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 30ch;
}
/* Phones: 2-up keeps four cards from becoming a long scroll. */
@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .team-card__line {
    display: none;
  }
}

/* ==========================================================================
   PAGE HERO - MEDIA VARIANT (v1.18) - image-backed interior hero
   Same content structure as .page-hero (breadcrumbs + eyebrow + h1 + lead) on a
   photo with a navy scrim + inverse text. For hubs, contact, events, training.
   ========================================================================== */
.page-hero--media {
  position: relative;
  overflow: hidden;
  background: var(--color-brand);
  padding-block: clamp(56px, 7vw, 104px);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--color-brand) 92%, transparent) 0%,
    color-mix(in srgb, var(--color-brand) 78%, transparent) 52%,
    color-mix(in srgb, var(--color-brand) 48%, transparent) 100%
  );
}
.page-hero--media > .container {
  position: relative;
}
.page-hero--media h1 {
  color: var(--color-heading-inverse);
}
.page-hero--media .lead {
  color: var(--color-text-inverse);
  max-width: 58ch;
}
.page-hero--media .eyebrow {
  color: color-mix(in srgb, var(--color-secondary) 55%, var(--color-heading-inverse));
}
.page-hero--media .breadcrumbs a,
.page-hero--media .breadcrumbs span,
.page-hero--media .breadcrumbs .sep,
.page-hero--media .post-meta-line {
  color: var(--color-text-inverse);
}

/* ==========================================================================
   NAV: clickable mega-menu parents (v1.19)
   The parent label is now a real link (.nav-trigger as <a>) that navigates to
   the hub; a sibling .nav-caret-btn toggles the dropdown. Desktop still reveals
   on hover/focus-within; the caret button is the toggle in the mobile drawer.
   ========================================================================== */
.nav-parent {
  display: inline-flex;
  /* stretch so the label link and the caret button are the same height: their
     hover underlines then sit on ONE baseline instead of two offset lines. */
  align-items: stretch;
}
.nav-trigger {
  text-decoration: none;
}
.nav-caret-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 4px;
  margin-left: 0; /* no gap between the label underline and the caret underline */
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-heading-inverse);
  cursor: pointer;
}
.nav-item:hover .nav-trigger,
.nav-item:focus-within .nav-trigger,
.nav-item:hover .nav-caret-btn,
.nav-caret-btn[aria-expanded="true"] {
  border-bottom-color: var(--color-accent);
}
.nav-item:hover .nav-caret,
.nav-caret-btn[aria-expanded="true"] .nav-caret {
  transform: translateY(1px) rotate(-135deg);
}

@media (max-width: 1024px) {
  /* Drawer: parent is a full-width row, label link on the left, caret on the right. */
  .nav-links.is-open .nav-parent {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-links.is-open .nav-parent .nav-trigger {
    flex: 1;
    border-bottom: 0;
  }
  .nav-links.is-open .nav-caret-btn {
    padding-inline: var(--gutter);
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* Touch drawer: the caret turns ONLY when its menu is open (aria-expanded),
     never on row hover/touch - stops the arrow flickering when a row is tapped.
     The :not() keeps an expanded caret pointing up even while the row is hovered. */
  .nav-item:hover .nav-caret-btn:not([aria-expanded="true"]) .nav-caret { transform: translateY(-2px) rotate(45deg); }
  .nav-caret-btn[aria-expanded="true"] .nav-caret { transform: translateY(1px) rotate(-135deg); }
}

/* ==========================================================================
   EVENT CARD - premium redesign (v1.22): date badge, kind tag, icon meta.
   White surface so cards lift off .soft sections; calendar badge over the
   image makes events scannable and prominent.
   ========================================================================== */
.event-card {
  background: var(--color-bg);
}
.event-card__body {
  flex: 1;
  gap: var(--space-3);
  padding: clamp(20px, 2.4vw, 28px);
}
/* Subtle top-down scrim so the date badge always reads over the photo. */
.event-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-brand) 38%, transparent) 0%,
    color-mix(in srgb, var(--color-brand) 6%, transparent) 34%,
    transparent 60%
  );
  pointer-events: none;
}
.event-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--color-brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  line-height: 1;
}
.event-card__badge-month {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-secondary) 55%, var(--color-heading-inverse));
}
.event-card__badge-day {
  margin-top: 3px;
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--color-heading-inverse);
}
.event-card__kind {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 11px;
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  color: var(--color-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.event-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.event-card__meta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-secondary);
}
.event-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.event-card:hover .event-card__title a {
  color: var(--color-accent-hover);
}
.event-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   FLAGSHIP CARD - stronger scrim + text shadow (v1.22) so the eyebrow/title/
   copy stay legible over light areas of the photo.
   ========================================================================== */
.flagship-card__scrim {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-brand) 95%, transparent) 0%,
    color-mix(in srgb, var(--color-brand) 82%, transparent) 32%,
    color-mix(in srgb, var(--color-brand) 45%, transparent) 60%,
    color-mix(in srgb, var(--color-brand) 8%, transparent) 100%
  );
}
.flagship-card__body {
  text-shadow: 0 1px 14px color-mix(in srgb, var(--color-brand) 55%, transparent);
}
.flagship-card__eyebrow {
  color: color-mix(in srgb, var(--color-secondary) 42%, var(--color-heading-inverse));
}