/* =========================================================================
   BOOSTWAY — main.css
   A three-layer design framework: primitives -> semantics -> components.
   Every custom property and class is namespaced with `bstw-`.

   1. PRIMITIVES  — raw values only (color, size, time). No meaning attached.
   2. SEMANTICS   — named roles that reference primitives. This is what the
                    rest of the framework (and any future page) should read.
   3. COMPONENTS  — reusable classes built only from semantic variables.
   ========================================================================= */

/* =========================================================================
   1. PRIMITIVES
   ========================================================================= */
:root {
  /* --- color: neutrals -------------------------------------------------- */
  --bstw-white: #FFFFFF;
  --bstw-cream-100: #FAF9F5;
  --bstw-cream-200: #F5F3EE;
  --bstw-cream-300: #F4F4F2;
  --bstw-cream-400: #F0EEE8;
  --bstw-cream-500: #E5E1D8;
  --bstw-grey-100: #B8B6AC;
  --bstw-grey-200: #9A978C;
  --bstw-grey-300: #7A776E;
  --bstw-grey-400: #5A574D;
  --bstw-grey-500: #4A473F;
  --bstw-grey-600: #33322B;
  --bstw-ink-100: #3A382F;
  --bstw-ink-200: #232320;
  --bstw-ink-300: #1E1E18;
  --bstw-ink-400: #14140F;

  /* --- color: brand accents ----------------------------------------------*/
  --bstw-blue-400: #7A9FD8;
  --bstw-blue-500: #1E5EFF;
  --bstw-blue-600: #3B5FE8;
  --bstw-blue-100: #F4F8FF;
  --bstw-orange-500: #E67E00;
  --bstw-orange-600: #C8892E;
  --bstw-green-500: #0F9D58;
  --bstw-green-600: #2F5233;
  --bstw-pink-500: #D6006B;
  --bstw-mint-500: #1FCB6B;

  /* --- typography: families ----------------------------------------------*/
  --bstw-font-display: 'Archivo Black', sans-serif;
  --bstw-font-body: 'Space Grotesk', sans-serif;
  --bstw-font-mono: 'JetBrains Mono', monospace;

  /* --- typography: weights ------------------------------------------------*/
  --bstw-weight-regular: 400;
  --bstw-weight-medium: 500;
  --bstw-weight-semibold: 600;
  --bstw-weight-bold: 700;
  --bstw-weight-black: 800;

  /* --- typography: sizes (raw px, named by exact value) -------------------*/
  --bstw-fs-10-5: 10.5px;
  --bstw-fs-11: 11px;
  --bstw-fs-11-5: 11.5px;
  --bstw-fs-12: 12px;
  --bstw-fs-12-5: 12.5px;
  --bstw-fs-13: 13px;
  --bstw-fs-13-5: 13.5px;
  --bstw-fs-14: 14px;
  --bstw-fs-14-5: 14.5px;
  --bstw-fs-15: 15px;
  --bstw-fs-15-5: 15.5px;
  --bstw-fs-16: 16px;
  --bstw-fs-16-5: 16.5px;
  --bstw-fs-17: 17px;
  --bstw-fs-18: 18px;
  --bstw-fs-19: 19px;
  --bstw-fs-20: 20px;
  --bstw-fs-22: 22px;
  --bstw-fs-26: 26px;
  --bstw-fs-32: 32px;

  /* --- typography: fluid clamp endpoints (min, preferred-vw, max) ---------*/
  --bstw-fs-clamp-display-hero: clamp(38px, 6.6vw, 80px);
  --bstw-fs-clamp-display-xl: clamp(32px, 5.4vw, 58px);
  --bstw-fs-clamp-display-lg: clamp(30px, 4.8vw, 54px);
  --bstw-fs-clamp-display-md: clamp(28px, 4.6vw, 46px);
  --bstw-fs-clamp-display-sm: clamp(26px, 4vw, 44px);
  --bstw-fs-clamp-heading-lg: clamp(24px, 3.6vw, 38px);
  --bstw-fs-clamp-heading-md: clamp(24px, 3.4vw, 36px);

  /* --- typography: letter-spacing ------------------------------------------*/
  --bstw-tracking-tight: -0.01em;
  --bstw-tracking-normal: 0;
  --bstw-tracking-wide: 0.03em;
  --bstw-tracking-wider: 0.05em;
  --bstw-tracking-widest: 0.06em;

  /* --- typography: line-height ---------------------------------------------*/
  --bstw-leading-tight: 1.02;
  --bstw-leading-snug: 1.1;
  --bstw-leading-normal: 1.25;
  --bstw-leading-relaxed: 1.5;
  --bstw-leading-loose: 1.6;
  --bstw-leading-loosest: 1.8;

  /* --- space (raw px scale) -------------------------------------------------*/
  --bstw-space-0: 0px;
  --bstw-space-1: 2px;
  --bstw-space-2: 3px;
  --bstw-space-3: 4px;
  --bstw-space-4: 5px;
  --bstw-space-5: 6px;
  --bstw-space-6: 7px;
  --bstw-space-7: 8px;
  --bstw-space-8: 9px;
  --bstw-space-9: 10px;
  --bstw-space-10: 11px;
  --bstw-space-11: 12px;
  --bstw-space-12: 14px;
  --bstw-space-13: 16px;
  --bstw-space-14: 18px;
  --bstw-space-15: 20px;
  --bstw-space-16: 22px;
  --bstw-space-17: 24px;
  --bstw-space-18: 26px;
  --bstw-space-19: 28px;
  --bstw-space-20: 30px;
  --bstw-space-21: 32px;
  --bstw-space-22: 34px;
  --bstw-space-23: 36px;
  --bstw-space-24: 40px;
  --bstw-space-25: 44px;
  --bstw-space-26: 48px;
  --bstw-space-27: 52px;
  --bstw-space-28: 60px;
  --bstw-space-29: 64px;
  --bstw-space-30: 70px;
  --bstw-space-31: 80px;
  --bstw-space-32: 90px;
  --bstw-space-33: 100px;
  --bstw-space-34: 110px;

  /* --- border ------------------------------------------------------------*/
  --bstw-border-width-hairline: 1px;
  --bstw-border-width-sm: 1.5px;
  --bstw-border-width-md: 2px;
  --bstw-border-width-lg: 3px;
  --bstw-border-width-xl: 4px;
  --bstw-radius-none: 0px;
  --bstw-radius-full: 50%;

  /* --- shadow (raw offsets, no color baked in) ----------------------------*/
  --bstw-shadow-offset-1: 4px;
  --bstw-shadow-offset-2: 5px;
  --bstw-shadow-offset-3: 6px;
  --bstw-shadow-offset-4: 7px;
  --bstw-shadow-offset-5: 8px;
  --bstw-shadow-offset-6: 9px;
  --bstw-shadow-offset-7: 11px;
  --bstw-shadow-offset-8: 12px;
  --bstw-shadow-lift-1: 2px;
  --bstw-shadow-lift-2: 3px;
  --bstw-shadow-lift-3: 4px;
  --bstw-press-offset-1: 1px;
  --bstw-press-offset-2: 2px;
  /* signed translate primitives, kept direct (no calc()) so :hover/:active
     recompute reliably — see the note above .bstw-lift in the components layer. */
  --bstw-neg-2: -2px;
  --bstw-neg-3: -3px;
  --bstw-pos-3: 3px;
  --bstw-pos-4: 4px;

  /* --- motion --------------------------------------------------------------*/
  --bstw-duration-fast: .1s;
  --bstw-duration-base: .15s;
  --bstw-duration-slow: .2s;
  --bstw-duration-slower: .25s;
  --bstw-duration-slowest: .7s;
  --bstw-ease-standard: ease;
  --bstw-ease-out-soft: cubic-bezier(.2, .7, .2, 1);

  /* --- layout ----------------------------------------------------------------*/
  --bstw-container-copy: 700px;
  --bstw-container-sm: 760px;
  --bstw-container-md: 800px;
  --bstw-container-lg: 820px;
  --bstw-container-xl: 900px;
  --bstw-container-2xl: 960px;
  --bstw-container-3xl: 1000px;
  --bstw-container-4xl: 1020px;
  --bstw-container-5xl: 1100px;
  --bstw-container-6xl: 1200px;
  --bstw-container-7xl: 1300px;

  /* --- z-index --------------------------------------------------------------*/
  --bstw-z-nav: 50;
  --bstw-z-modal: 1000;

  /* --- breakpoints (reference only, media queries can't read vars) ----------*/
  --bstw-bp-tablet: 1024px;
  --bstw-bp-mobile: 640px;
}

/* =========================================================================
   2. SEMANTICS
   Named roles that reference primitives. Components below reference ONLY
   these — never a primitive directly — so the whole theme can be re-skinned
   by editing this block alone.
   ========================================================================= */
:root {
  /* --- color roles ----------------------------------------------------------*/
  --bstw-color-page-bg: var(--bstw-white);
  --bstw-color-surface: var(--bstw-white);
  --bstw-color-surface-muted: var(--bstw-cream-300);
  --bstw-color-surface-sunken: var(--bstw-cream-200);
  --bstw-color-surface-photo: var(--bstw-cream-400);
  --bstw-color-surface-dark: var(--bstw-ink-400);
  --bstw-color-surface-dark-raised: var(--bstw-ink-300);
  --bstw-color-surface-dark-hover: var(--bstw-ink-200);

  --bstw-color-ink: var(--bstw-ink-400);
  --bstw-color-ink-on-dark: var(--bstw-cream-200);
  --bstw-color-border: var(--bstw-ink-400);
  --bstw-color-border-muted: var(--bstw-cream-500);
  --bstw-color-border-on-dark: var(--bstw-ink-100);

  --bstw-color-text-body: var(--bstw-ink-400);
  --bstw-color-text-muted: var(--bstw-grey-400);
  --bstw-color-text-muted-strong: var(--bstw-grey-600);
  --bstw-color-text-faint: var(--bstw-grey-300);
  --bstw-color-text-faint-on-dark: var(--bstw-grey-200);
  --bstw-color-text-copy-on-dark: var(--bstw-grey-100);
  --bstw-color-text-label-on-dark: var(--bstw-blue-400);

  --bstw-color-accent: var(--bstw-blue-500);
  --bstw-color-accent-hover: var(--bstw-blue-600);
  --bstw-color-accent-soft: var(--bstw-blue-100);
  --bstw-color-success: var(--bstw-mint-500);

  /* per-section accent roles (footer columns, badges) */
  --bstw-color-accent-nav: var(--bstw-blue-500);
  --bstw-color-accent-contact: var(--bstw-orange-600);
  --bstw-color-accent-ecosystem: var(--bstw-green-600);

  /* --- typography roles -------------------------------------------------*/
  --bstw-font-heading: var(--bstw-font-display);
  --bstw-font-text: var(--bstw-font-body);
  --bstw-font-label: var(--bstw-font-mono);

  --bstw-fs-body: var(--bstw-fs-16);
  --bstw-fs-body-sm: var(--bstw-fs-14);
  --bstw-fs-body-lg: var(--bstw-fs-16-5);
  --bstw-fs-eyebrow: var(--bstw-fs-12);
  --bstw-fs-label: var(--bstw-fs-12-5);
  --bstw-fs-label-sm: var(--bstw-fs-11);

  /* --- shadow roles: size + hover behavior, in one place -----------------*/
  --bstw-shadow-color: var(--bstw-color-border);
  --bstw-shadow-x: var(--bstw-shadow-offset-3);
  --bstw-shadow-y: var(--bstw-shadow-offset-3);
  --bstw-shadow-x-hover: var(--bstw-shadow-offset-6);
  --bstw-shadow-y-hover: var(--bstw-shadow-offset-6);
  --bstw-lift-translate: var(--bstw-neg-3);
  --bstw-shadow-x-active: var(--bstw-press-offset-2);
  --bstw-shadow-y-active: var(--bstw-press-offset-2);
  --bstw-press-translate: var(--bstw-pos-3);

  /* --- motion roles -------------------------------------------------------*/
  --bstw-transition-interactive: transform var(--bstw-duration-fast) var(--bstw-ease-standard),
                                  box-shadow var(--bstw-duration-fast) var(--bstw-ease-standard);
  --bstw-transition-interactive-soft: transform var(--bstw-duration-base) var(--bstw-ease-standard),
                                       box-shadow var(--bstw-duration-base) var(--bstw-ease-standard);
  --bstw-transition-color: color var(--bstw-duration-base) var(--bstw-ease-standard);
  --bstw-transition-border: border-color var(--bstw-duration-base) var(--bstw-ease-standard);
  --bstw-transition-bg: background var(--bstw-duration-slow) var(--bstw-ease-standard);
  --bstw-transition-opacity: opacity var(--bstw-duration-slow) var(--bstw-ease-standard);
  --bstw-transition-reveal: opacity var(--bstw-duration-slowest) var(--bstw-ease-out-soft),
                             transform var(--bstw-duration-slowest) var(--bstw-ease-out-soft);
}

/* =========================================================================
   3. COMPONENTS
   Built only from semantic variables above. Colors are applied per-instance
   with modifier classes since Boostway's palette isn't a single semantic
   accent — see `.bstw-accent--*`.
   ========================================================================= */

/* --- base / reset ---------------------------------------------------------*/
.bstw-page {
  font-family: var(--bstw-font-text);
  background: var(--bstw-color-page-bg);
  color: var(--bstw-color-text-body);
  min-height: 100vh;
  width: 100%;
}
.bstw-page ::selection { background: var(--bstw-color-ink); color: var(--bstw-color-ink-on-dark); }
/* :where() keeps this reset at zero specificity so any single component
   class (e.g. .bstw-nav__link--active) can override it without !important. */
.bstw-page :where(a) { color: var(--bstw-color-ink); }
.bstw-page :where(a:hover) { color: var(--bstw-color-accent); }

/* --- layout helpers -----------------------------------------------------------
   Each width modifier is self-contained (own margin: 0 auto) so it centers
   on its own — it must not depend on also adding the bare .bstw-container
   class, since that pairing is easy to forget at the call site. */
.bstw-container { margin: 0 auto; }
.bstw-container--copy { max-width: var(--bstw-container-copy); margin: 0 auto; }
.bstw-container--sm { max-width: var(--bstw-container-sm); margin: 0 auto; }
.bstw-container--md { max-width: var(--bstw-container-md); margin: 0 auto; }
.bstw-container--lg { max-width: var(--bstw-container-lg); margin: 0 auto; }
.bstw-container--xl { max-width: var(--bstw-container-xl); margin: 0 auto; }
.bstw-container--2xl { max-width: var(--bstw-container-2xl); margin: 0 auto; }
.bstw-container--3xl { max-width: var(--bstw-container-3xl); margin: 0 auto; }
.bstw-container--4xl { max-width: var(--bstw-container-4xl); margin: 0 auto; }
.bstw-container--5xl { max-width: var(--bstw-container-5xl); margin: 0 auto; }
.bstw-container--6xl { max-width: var(--bstw-container-6xl); margin: 0 auto; }
.bstw-container--7xl { max-width: var(--bstw-container-7xl); margin: 0 auto; }

.bstw-section { padding: var(--bstw-space-32) var(--bstw-space-26); }
.bstw-section--tight { padding: var(--bstw-space-0) var(--bstw-space-26) var(--bstw-space-32); }
.bstw-section--dark { background: var(--bstw-color-surface-dark); color: var(--bstw-color-ink-on-dark); }
.bstw-section--muted { background: var(--bstw-color-surface-muted); }
.bstw-section--center { text-align: center; }
.bstw-section--bordered { border-bottom: var(--bstw-border-width-xl) solid var(--bstw-color-border); }

.bstw-grid { display: grid; }
.bstw-grid--gap-sm { gap: var(--bstw-space-15); }
.bstw-grid--gap-md { gap: var(--bstw-space-17); }
.bstw-grid--stretch { align-items: stretch; }
.bstw-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bstw-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bstw-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.bstw-grid--footer { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.bstw-grid--contact { grid-template-columns: 1.1fr .9fr; }

.bstw-stack { display: flex; flex-direction: column; }
.bstw-row { display: flex; align-items: center; }
.bstw-row--between { justify-content: space-between; }
.bstw-row--center { justify-content: center; }
.bstw-row--wrap { flex-wrap: wrap; }

/* --- typography components --------------------------------------------------*/
.bstw-eyebrow {
  font-family: var(--bstw-font-label);
  font-size: var(--bstw-fs-eyebrow);
  font-weight: var(--bstw-weight-bold);
  letter-spacing: var(--bstw-tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--bstw-space-13);
}
.bstw-eyebrow--accent { color: var(--bstw-color-accent); }

.bstw-heading {
  font-family: var(--bstw-font-heading);
  font-weight: var(--bstw-weight-regular);
  letter-spacing: var(--bstw-tracking-tight);
  margin: 0;
}
.bstw-heading--hero { font-size: var(--bstw-fs-clamp-display-hero); line-height: var(--bstw-leading-tight); }
.bstw-jiggle { transform-origin: 50% 50%; animation: bstw-jiggle 10s ease-in-out infinite; }

/* --- hero particle background ---------------------------------------------*/
.bstw-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.bstw-heading--xl { font-size: var(--bstw-fs-clamp-display-xl); line-height: var(--bstw-leading-tight); }
.bstw-heading--lg { font-size: var(--bstw-fs-clamp-display-lg); line-height: var(--bstw-leading-tight); }
.bstw-heading--md { font-size: var(--bstw-fs-clamp-display-md); line-height: var(--bstw-leading-snug); }
.bstw-heading--section-sm { font-size: var(--bstw-fs-clamp-display-sm); }
.bstw-heading--section-lg { font-size: var(--bstw-fs-clamp-heading-lg); }
.bstw-heading--section-md { font-size: var(--bstw-fs-clamp-heading-md); }
.bstw-heading--card { font-size: var(--bstw-fs-20); margin-bottom: var(--bstw-space-7); }
.bstw-heading--tile { font-size: var(--bstw-fs-18); line-height: var(--bstw-leading-normal); }
.bstw-heading--post { font-size: var(--bstw-fs-17); line-height: var(--bstw-leading-normal); margin: 0 0 var(--bstw-space-9); }
.bstw-heading--copy { font-size: var(--bstw-fs-22); margin: var(--bstw-space-23) 0 var(--bstw-space-12); }

.bstw-lead {
  font-size: var(--bstw-fs-body);
  line-height: var(--bstw-leading-loose);
  color: var(--bstw-color-text-muted);
}
.bstw-lead--lg { font-size: var(--bstw-fs-body-lg); }

.bstw-copy { line-height: var(--bstw-leading-loosest); color: var(--bstw-color-text-muted-strong); }
.bstw-copy p { margin: 0 0 var(--bstw-space-17); }
.bstw-copy p:last-child { margin-bottom: 0; }

.bstw-label {
  font-family: var(--bstw-font-label);
  font-size: var(--bstw-fs-label);
  font-weight: var(--bstw-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--bstw-tracking-wide);
}
.bstw-label--muted { color: var(--bstw-color-text-faint); font-weight: var(--bstw-weight-regular); }

/* --- logo / brand mark --------------------------------------------------*/
.bstw-logo {
  font-family: var(--bstw-font-heading);
  font-size: var(--bstw-fs-19);
  letter-spacing: var(--bstw-tracking-tight);
  display: flex;
  align-items: center;
  gap: var(--bstw-space-8);
  color: var(--bstw-color-ink);
  text-decoration: none;
}
.bstw-logo__dot { width: var(--bstw-space-9); height: var(--bstw-space-9); background: var(--bstw-color-accent); display: inline-block; }

/* --- nav ------------------------------------------------------------------*/
/* Sticks the nav bar AND its mobile dropdown together as one pinned unit —
   so opening the menu after scrolling shows it right under the nav instead
   of at its original position near the top of the page. */
.bstw-nav-sticky {
  position: sticky;
  top: 0;
  z-index: var(--bstw-z-nav);
}
/* The bar itself stays full-bleed (background/border span the viewport),
   but its content is capped to the same max-width used everywhere else
   and centered, instead of stretching logo-to-toggle edge to edge. */
.bstw-nav {
  padding: 0 var(--bstw-space-26);
  border-bottom: var(--bstw-border-width-xl) solid var(--bstw-color-border);
  background: var(--bstw-color-surface);
}
.bstw-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--bstw-container-7xl);
  margin: 0 auto;
  padding: var(--bstw-space-15) 0;
}
.bstw-nav__links {
  display: flex;
  gap: var(--bstw-space-22);
  font-family: var(--bstw-font-label);
  font-size: var(--bstw-fs-label);
  font-weight: var(--bstw-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--bstw-tracking-wide);
}
.bstw-nav__link { text-decoration: none; color: var(--bstw-color-ink); transition: var(--bstw-transition-color); }
.bstw-nav__link:hover { color: var(--bstw-color-accent); }
.bstw-nav__link--active { color: var(--bstw-color-accent); }
.bstw-nav__toggle {
  display: none;
  background: var(--bstw-color-surface);
  border: var(--bstw-border-width-lg) solid var(--bstw-color-border);
  width: 38px;
  height: 38px;
  font-size: var(--bstw-fs-16);
  cursor: pointer;
}

.bstw-mobile-menu {
  background: var(--bstw-color-surface);
  border-bottom: var(--bstw-border-width-xl) solid var(--bstw-color-border);
  font-family: var(--bstw-font-label);
  font-size: var(--bstw-fs-13);
  font-weight: var(--bstw-weight-semibold);
  text-transform: uppercase;
}
.bstw-mobile-menu__link {
  display: block;
  padding: var(--bstw-space-13) var(--bstw-space-17);
  color: var(--bstw-color-ink);
  text-decoration: none;
  border-top: var(--bstw-border-width-hairline) solid var(--bstw-color-border-muted);
}
.bstw-mobile-menu__link--active { color: var(--bstw-color-accent); }

/* --- shadow + lift system ---------------------------------------------------
   Drop `.bstw-shadow` on any element for the hard offset shadow, and
   `.bstw-lift` for the hover/press behavior. Both read the same
   --bstw-shadow-* custom properties, which any instance can override
   (size via --bstw-shadow-x/-y, color via --bstw-shadow-color, per-item
   dynamic colors included). This replaces the old style-hover/style-active
   attribute mechanism with plain CSS. ---------------------------------------*/
.bstw-shadow {
  box-shadow: var(--bstw-shadow-x) var(--bstw-shadow-y) 0 var(--bstw-shadow-color);
}
/* Hover/press targets are resolved as direct primitive values (never via
   calc() on a custom property) — some headless/older engines fail to
   recompute calc(var(...)) inside :hover/:active reliably. Direct var()
   substitution has no such issue, so each interactive size pairs a rest
   offset with its own explicit hover/press offset + translate amount. */
.bstw-lift {
  box-shadow: var(--bstw-shadow-x) var(--bstw-shadow-y) 0 var(--bstw-shadow-color);
  transition: var(--bstw-transition-interactive-soft);
}
.bstw-lift:hover {
  transform: translate(var(--bstw-lift-translate), var(--bstw-lift-translate));
  box-shadow: var(--bstw-shadow-x-hover) var(--bstw-shadow-y-hover) 0 var(--bstw-shadow-color);
}
.bstw-lift:active {
  transform: translate(var(--bstw-press-translate), var(--bstw-press-translate));
  box-shadow: var(--bstw-shadow-x-active) var(--bstw-shadow-y-active) 0 var(--bstw-shadow-color);
}
/* size modifiers — set the rest-state primitive offset used by .bstw-shadow / .bstw-lift */
.bstw-shadow--1 { --bstw-shadow-x: var(--bstw-shadow-offset-1); --bstw-shadow-y: var(--bstw-shadow-offset-1); }
.bstw-shadow--2 { --bstw-shadow-x: var(--bstw-shadow-offset-2); --bstw-shadow-y: var(--bstw-shadow-offset-2); }
.bstw-shadow--3 { --bstw-shadow-x: var(--bstw-shadow-offset-3); --bstw-shadow-y: var(--bstw-shadow-offset-3); }
.bstw-shadow--4 { --bstw-shadow-x: var(--bstw-shadow-offset-4); --bstw-shadow-y: var(--bstw-shadow-offset-4); }
.bstw-shadow--5 { --bstw-shadow-x: var(--bstw-shadow-offset-5); --bstw-shadow-y: var(--bstw-shadow-offset-5); }
.bstw-shadow--6 { --bstw-shadow-x: var(--bstw-shadow-offset-6); --bstw-shadow-y: var(--bstw-shadow-offset-6); }
.bstw-shadow--7 { --bstw-shadow-x: var(--bstw-shadow-offset-7); --bstw-shadow-y: var(--bstw-shadow-offset-7); }
.bstw-shadow--8 { --bstw-shadow-x: var(--bstw-shadow-offset-8); --bstw-shadow-y: var(--bstw-shadow-offset-8); }
/* lift recipes — rest offset + hover offset + hover translate, as direct values */
.bstw-lift--4-6   { --bstw-shadow-x-hover: var(--bstw-shadow-offset-3); --bstw-shadow-y-hover: var(--bstw-shadow-offset-3); --bstw-lift-translate: var(--bstw-neg-2); }
.bstw-lift--5-7   { --bstw-shadow-x-hover: var(--bstw-shadow-offset-4); --bstw-shadow-y-hover: var(--bstw-shadow-offset-4); --bstw-lift-translate: var(--bstw-neg-2); }
.bstw-lift--5-8   { --bstw-shadow-x-hover: var(--bstw-shadow-offset-5); --bstw-shadow-y-hover: var(--bstw-shadow-offset-5); --bstw-lift-translate: var(--bstw-neg-3); }
.bstw-lift--6-9   { --bstw-shadow-x-hover: var(--bstw-shadow-offset-6); --bstw-shadow-y-hover: var(--bstw-shadow-offset-6); --bstw-lift-translate: var(--bstw-neg-3); }
.bstw-lift--8-11  { --bstw-shadow-x-hover: var(--bstw-shadow-offset-7); --bstw-shadow-y-hover: var(--bstw-shadow-offset-7); --bstw-lift-translate: var(--bstw-neg-3); }
/* press recipes — press offset + press translate, as direct values */
.bstw-press--to-1 { --bstw-shadow-x-active: var(--bstw-press-offset-1); --bstw-shadow-y-active: var(--bstw-press-offset-1); --bstw-press-translate: var(--bstw-pos-4); }
.bstw-press--to-2-sm { --bstw-shadow-x-active: var(--bstw-press-offset-2); --bstw-shadow-y-active: var(--bstw-press-offset-2); --bstw-press-translate: var(--bstw-pos-3); }
.bstw-press--to-2-lg { --bstw-shadow-x-active: var(--bstw-press-offset-2); --bstw-shadow-y-active: var(--bstw-press-offset-2); --bstw-press-translate: var(--bstw-pos-4); }

/* --- buttons ----------------------------------------------------------------*/
.bstw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--bstw-font-label);
  font-weight: var(--bstw-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--bstw-tracking-wide);
  border: var(--bstw-border-width-lg) solid var(--bstw-color-border);
  cursor: pointer;
  --bstw-shadow-color: var(--bstw-color-border);
}
.bstw-btn--nav { font-size: var(--bstw-fs-label); padding: var(--bstw-space-10) var(--bstw-space-15); }
.bstw-btn--sm { font-size: var(--bstw-fs-12-5); padding: var(--bstw-space-12) var(--bstw-space-15); }
.bstw-btn--md { font-size: var(--bstw-fs-13); padding: var(--bstw-space-15) var(--bstw-space-19); }
.bstw-btn--lg { font-size: var(--bstw-fs-14); padding: var(--bstw-space-19) var(--bstw-space-22); }
.bstw-btn--block { width: 100%; }

.bstw-btn--dark { background: var(--bstw-color-surface-dark); color: var(--bstw-color-ink-on-dark); }
.bstw-btn--accent {
  background: var(--bstw-color-accent);
  color: var(--bstw-color-ink-on-dark);
  transition: var(--bstw-transition-bg);
}
/* Baseline feedback for every accent button, including flush-mounted ones
   like the newsletter Subscribe button that has no room for the lift/shadow
   treatment — buttons that DO have .bstw-lift simply get both at once. */
.bstw-btn--accent:hover { background: var(--bstw-color-accent-hover); }
.bstw-btn--light { background: var(--bstw-color-surface); color: var(--bstw-color-ink); }
.bstw-btn--cream { background: var(--bstw-color-surface-sunken); color: var(--bstw-color-ink); border-color: var(--bstw-color-surface-sunken); }

/* --- cards -------------------------------------------------------------------*/
.bstw-card {
  border: var(--bstw-border-width-lg) solid var(--bstw-color-border);
  background: var(--bstw-color-surface);
  display: flex;
  flex-direction: column;
}
.bstw-card__accent-bar { height: var(--bstw-space-5); background: var(--bstw-color-accent); }
.bstw-card__body { padding: var(--bstw-space-23) var(--bstw-space-19); display: flex; flex-direction: column; gap: var(--bstw-space-15); flex: 1; }
.bstw-card__media { border-bottom: var(--bstw-border-width-lg) solid var(--bstw-color-border); position: relative; overflow: hidden; }
.bstw-card__media--work { height: 190px; background: var(--bstw-color-surface-dark); }
.bstw-card__media--blog { height: 180px; }
.bstw-card__media--hero { height: 360px; }
.bstw-card--dark { background: var(--bstw-color-surface-dark); border-color: var(--bstw-color-border-on-dark); color: var(--bstw-color-ink-on-dark); }

.bstw-photo-fill { position: absolute; inset: 0; }
.bstw-photo-tag {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--bstw-font-label); font-size: var(--bstw-fs-11); font-weight: var(--bstw-weight-bold);
  letter-spacing: var(--bstw-tracking-wider); text-transform: uppercase; color: var(--bstw-color-text-faint);
  background: var(--bstw-cream-100); padding: var(--bstw-space-7) var(--bstw-space-13); border: var(--bstw-border-width-sm) solid var(--bstw-color-border);
}

.bstw-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20,20,15,0); transition: var(--bstw-transition-bg);
}
.bstw-overlay:hover, .bstw-card:hover .bstw-overlay { background: rgba(20,20,15,0.55); }
.bstw-overlay__label {
  font-family: var(--bstw-font-label); font-weight: var(--bstw-weight-bold); font-size: var(--bstw-fs-11);
  color: var(--bstw-color-ink-on-dark); border: var(--bstw-border-width-sm) solid var(--bstw-color-ink-on-dark);
  padding: var(--bstw-space-5) var(--bstw-space-11); opacity: 0; transition: var(--bstw-transition-opacity);
  text-transform: uppercase; letter-spacing: var(--bstw-tracking-wide);
}
.bstw-card:hover .bstw-overlay__label { opacity: 1; }

/* --- badges / pills -----------------------------------------------------------*/
.bstw-pill {
  font-family: var(--bstw-font-label); font-size: var(--bstw-fs-12); font-weight: var(--bstw-weight-bold);
  text-transform: uppercase; letter-spacing: var(--bstw-tracking-wide); padding: var(--bstw-space-8) var(--bstw-space-13);
  border: var(--bstw-border-width-lg) solid var(--bstw-color-border); background: var(--bstw-color-surface); color: var(--bstw-color-ink);
  cursor: pointer; transition: var(--bstw-transition-border), var(--bstw-transition-interactive-soft);
  --bstw-shadow-color: var(--bstw-color-border);
}
.bstw-pill:hover { border-color: var(--bstw-color-accent); }
.bstw-pill--active { background: var(--bstw-color-surface-dark); color: var(--bstw-color-ink-on-dark); }
/* Per-category coloring: each filter pill takes on its category's accent
   as a permanent border + shadow tint, not just on hover. */
.bstw-pill--accent { border-color: var(--bstw-accent-color); --bstw-shadow-color: var(--bstw-accent-color); }
.bstw-pill--accent:hover { border-color: var(--bstw-accent-color); }
.bstw-pill--accent.bstw-pill--active { background: var(--bstw-accent-color); color: var(--bstw-white); }

.bstw-chip {
  display: inline-flex; align-items: center; gap: var(--bstw-space-7);
  font-family: var(--bstw-font-label); font-size: var(--bstw-fs-12); font-weight: var(--bstw-weight-bold);
  letter-spacing: var(--bstw-tracking-wider); text-transform: uppercase; color: var(--bstw-color-ink);
  border: var(--bstw-border-width-lg) solid var(--bstw-color-border); padding: var(--bstw-space-8) var(--bstw-space-14);
}
.bstw-dot { border-radius: var(--bstw-radius-full); }
.bstw-dot--blink { animation: bstw-blink 1.3s infinite; }

/* --- ticker ---------------------------------------------------------------------*/
.bstw-ticker {
  background: var(--bstw-color-surface-dark); color: var(--bstw-color-ink-on-dark);
  overflow: hidden; white-space: nowrap; padding: var(--bstw-space-7) 0; cursor: pointer;
}
.bstw-ticker--boxed { padding: var(--bstw-space-8) 0; border-bottom: var(--bstw-border-width-xl) solid var(--bstw-color-border); }
.bstw-ticker__track {
  display: inline-block; animation: bstw-marquee 46s linear infinite;
  font-family: var(--bstw-font-label); font-size: var(--bstw-fs-11); letter-spacing: var(--bstw-tracking-wide); font-weight: var(--bstw-weight-bold);
  text-transform: uppercase; color: var(--bstw-grey-300);
}
.bstw-ticker__item { padding: 0 var(--bstw-space-13); }
.bstw-ticker__value { color: inherit; }
.bstw-ticker__sep { padding: 0 var(--bstw-space-7); color: var(--bstw-ink-100); }
.bstw-ticker__track--running { animation-play-state: running; }
.bstw-ticker__track--paused { animation-play-state: paused; }

/* --- state toggles (JS swaps these, never writes style=) ------------------*/
.bstw-toggle--visible { opacity: 1; pointer-events: auto; }
.bstw-toggle--invisible { opacity: 0; pointer-events: none; }

/* --- footer ------------------------------------------------------------------------*/
.bstw-footer { border-top: var(--bstw-border-width-xl) solid var(--bstw-color-border); background: var(--bstw-color-surface); padding: var(--bstw-space-29) var(--bstw-space-26) 0; }
.bstw-footer__grid { padding-bottom: var(--bstw-space-26); }
.bstw-footer__col-lead { font-size: var(--bstw-fs-body-sm); line-height: var(--bstw-leading-loose); color: var(--bstw-color-text-muted); max-width: 260px; margin: 0; }
.bstw-footer__heading { font-family: var(--bstw-font-label); font-size: var(--bstw-fs-label-sm); font-weight: var(--bstw-weight-bold); letter-spacing: var(--bstw-tracking-wide); text-transform: uppercase; margin-bottom: var(--bstw-space-13); }
.bstw-footer__links { display: flex; flex-direction: column; gap: var(--bstw-space-10); font-size: var(--bstw-fs-body-sm); }
.bstw-footer__link { text-decoration: none; color: var(--bstw-color-ink); transition: var(--bstw-transition-color); }
.bstw-footer__link:hover { color: var(--bstw-color-accent); }
.bstw-footer__link--cta { color: var(--bstw-color-accent); font-weight: var(--bstw-weight-bold); }
.bstw-footer__social-mark { flex: none; }
.bstw-footer__bottom {
  border-top: var(--bstw-border-width-sm) solid var(--bstw-color-border-muted); padding: var(--bstw-space-16) 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--bstw-space-9);
}
.bstw-footer__legal { font-family: var(--bstw-font-label); font-size: var(--bstw-fs-label-sm); color: var(--bstw-color-text-faint); }
.bstw-footer__legal-links { display: flex; gap: var(--bstw-space-15); font-family: var(--bstw-font-label); font-size: var(--bstw-fs-label-sm); }
.bstw-footer__legal-link { text-decoration: none; color: var(--bstw-color-text-faint); }
.bstw-footer__legal-link:hover { color: var(--bstw-color-accent); }

/* --- form ---------------------------------------------------------------------------*/
.bstw-field { display: flex; flex-direction: column; }
.bstw-field__label {
  font-family: var(--bstw-font-label); font-size: var(--bstw-fs-10-5); font-weight: var(--bstw-weight-bold);
  text-transform: uppercase; color: var(--bstw-color-text-faint); display: block; margin-bottom: var(--bstw-space-6);
}
.bstw-input, .bstw-textarea {
  width: 100%; box-sizing: border-box; background: var(--bstw-color-surface-sunken); border: var(--bstw-border-width-lg) solid var(--bstw-color-border);
  color: var(--bstw-color-ink); font-family: var(--bstw-font-text); font-size: var(--bstw-fs-body-sm); padding: var(--bstw-space-11) var(--bstw-space-12); outline: none;
}
.bstw-textarea { resize: none; }
.bstw-input--flush { background: var(--bstw-ink-300); border: none; color: var(--bstw-color-ink-on-dark); padding: var(--bstw-space-12) var(--bstw-space-13); }

/* --- faq accordion ----------------------------------------------------------------------*/
.bstw-faq-item { border-bottom: var(--bstw-border-width-sm) solid var(--bstw-color-border-muted); }
.bstw-faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--bstw-space-13);
  background: none; border: none; cursor: pointer; text-align: left; margin: 0;
  font-family: var(--bstw-font-text); font-weight: var(--bstw-weight-bold); font-size: var(--bstw-fs-16);
  padding: var(--bstw-space-16) 0; color: var(--bstw-color-ink); transition: var(--bstw-transition-color);
}
.bstw-faq-item__q:hover { color: var(--bstw-color-accent); }
.bstw-faq-item__icon {
  flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: var(--bstw-border-width-md) solid var(--bstw-color-border); font-family: var(--bstw-font-label); font-weight: var(--bstw-weight-bold);
  font-size: var(--bstw-fs-16); line-height: 1; color: var(--bstw-color-ink);
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.bstw-faq-item--open .bstw-faq-item__icon { transform: rotate(135deg); background: var(--bstw-color-accent); border-color: var(--bstw-color-accent); color: var(--bstw-white); }
.bstw-faq-item__a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.bstw-faq-item--open .bstw-faq-item__a-wrap { grid-template-rows: 1fr; }
.bstw-faq-item__a { overflow: hidden; }
.bstw-faq-item__a p { font-size: var(--bstw-fs-14); line-height: var(--bstw-leading-loose); color: var(--bstw-color-text-muted); margin: 0 0 var(--bstw-space-16); max-width: 640px; }

/* --- table ----------------------------------------------------------------------------*/
.bstw-table-wrap { overflow-x: auto; border: var(--bstw-border-width-lg) solid var(--bstw-color-border); }
.bstw-table { width: 100%; border-collapse: collapse; font-size: var(--bstw-fs-14); min-width: 640px; }
.bstw-table thead tr { background: var(--bstw-color-surface-dark); color: var(--bstw-color-ink-on-dark); }
.bstw-table tbody tr { border-top: var(--bstw-border-width-sm) solid var(--bstw-color-border-muted); }
.bstw-table__th { text-align: left; padding: var(--bstw-space-13) var(--bstw-space-15); font-family: var(--bstw-font-label); font-size: var(--bstw-fs-11-5); text-transform: uppercase; letter-spacing: var(--bstw-tracking-wide); font-weight: var(--bstw-weight-bold); }
.bstw-table__th--center { text-align: center; }
.bstw-table__td { padding: var(--bstw-space-12) var(--bstw-space-15); }
.bstw-table__td--center { text-align: center; }
.bstw-table__td--strong { font-weight: var(--bstw-weight-semibold); }
.bstw-table__td--highlight { background: var(--bstw-color-accent-soft); }

/* --- modal ------------------------------------------------------------------------------*/
.bstw-modal-backdrop { position: fixed; inset: 0; background: rgba(20,20,15,0.85); z-index: var(--bstw-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--bstw-space-17); }
.bstw-modal { width: min(1200px, 92vw); height: min(760px, 86vh); background: var(--bstw-white); border: var(--bstw-border-width-xl) solid var(--bstw-color-border); display: flex; flex-direction: column; overflow: hidden; }
.bstw-modal__bar { background: var(--bstw-color-surface-dark); display: flex; align-items: center; gap: var(--bstw-space-9); padding: var(--bstw-space-11) var(--bstw-space-13); flex: none; }
.bstw-modal__url { flex: 1; background: var(--bstw-ink-200); padding: var(--bstw-space-6) var(--bstw-space-12); font-family: var(--bstw-font-label); font-size: var(--bstw-fs-12); color: var(--bstw-color-ink-on-dark); margin-left: var(--bstw-space-7); }
.bstw-modal__close { font-family: var(--bstw-font-label); font-weight: var(--bstw-weight-bold); font-size: var(--bstw-fs-11); text-transform: uppercase; background: var(--bstw-color-surface-sunken); color: var(--bstw-color-ink); border: none; padding: var(--bstw-space-7) var(--bstw-space-12); cursor: pointer; }
.bstw-modal__frame { flex: 1; width: 100%; border: none; }

/* --- misc -------------------------------------------------------------------------------*/
.bstw-reveal { transition: var(--bstw-transition-reveal); }
.bstw-reveal--hidden { opacity: 0; transform: translateY(32px); }
.bstw-reveal--shown { opacity: 1; transform: translateY(0); }

.bstw-stat { text-align: center; padding: 0 var(--bstw-space-15); border-left: var(--bstw-border-width-lg) solid var(--bstw-color-border); }
.bstw-stat:last-child { border-right: var(--bstw-border-width-lg) solid var(--bstw-color-border); }
.bstw-stat__value { font-family: var(--bstw-font-heading); font-weight: var(--bstw-weight-regular); font-size: var(--bstw-fs-26); }
.bstw-stat__label { font-family: var(--bstw-font-label); font-size: var(--bstw-fs-11); color: var(--bstw-color-text-faint); margin-top: var(--bstw-space-5); text-transform: uppercase; letter-spacing: var(--bstw-tracking-wide); }

.bstw-process-tile { padding: var(--bstw-space-18) var(--bstw-space-16); border: var(--bstw-border-width-lg) solid var(--bstw-color-border-on-dark); transition: var(--bstw-transition-border); }
.bstw-process-tile:hover { border-color: var(--bstw-color-accent); }
.bstw-process-tile__num { font-family: var(--bstw-font-label); font-weight: var(--bstw-weight-bold); font-size: var(--bstw-fs-13); margin-bottom: var(--bstw-space-12); }
.bstw-process-tile__title { font-family: var(--bstw-font-text); font-weight: var(--bstw-weight-bold); font-size: var(--bstw-fs-16); margin-bottom: var(--bstw-space-7); color: var(--bstw-white); }
.bstw-process-tile__desc { font-size: var(--bstw-fs-13); line-height: var(--bstw-leading-loose); color: var(--bstw-color-text-faint-on-dark); }

/* --- compare slider (mobile-only "before/after" style reveal) --------------
   Two cards occupy the same box; the back one sets the height, the front
   one is clipped from the right at --bstw-compare-pos. Dragging the handle
   moves that clip line, sliding between the two. Desktop keeps the normal
   side-by-side grid — this is a mobile-only alternate presentation. */
.bstw-compare {
  display: none;
  position: relative;
  overflow: hidden;
  border: var(--bstw-border-width-lg) solid var(--bstw-color-border);
  touch-action: pan-y;
  --bstw-compare-pos: 50%;
}
.bstw-compare__layer { padding: var(--bstw-space-18) var(--bstw-space-20); }
.bstw-compare__layer--back { background: var(--bstw-color-surface-dark); color: var(--bstw-color-ink-on-dark); }
.bstw-compare__layer--front {
  position: absolute;
  inset: 0;
  background: var(--bstw-color-surface);
  color: var(--bstw-color-ink);
  clip-path: inset(0 calc(100% - var(--bstw-compare-pos)) 0 0);
}
.bstw-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--bstw-compare-pos);
  transform: translateX(-50%);
  width: var(--bstw-border-width-lg);
  background: var(--bstw-color-border);
  pointer-events: none;
}
.bstw-compare__handle {
  position: absolute;
  top: 50%;
  left: var(--bstw-compare-pos);
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: var(--bstw-radius-full);
  background: var(--bstw-color-surface);
  border: var(--bstw-border-width-lg) solid var(--bstw-color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--bstw-color-ink);
  font-family: var(--bstw-font-label);
  font-weight: var(--bstw-weight-bold);
  font-size: 11px;
  cursor: ew-resize;
  touch-action: none;
  pointer-events: auto;
  box-shadow: var(--bstw-shadow-offset-3) var(--bstw-shadow-offset-3) 0 var(--bstw-color-border);
}
.bstw-compare__hint {
  position: absolute;
  bottom: var(--bstw-space-9);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--bstw-font-label);
  font-size: 10px;
  font-weight: var(--bstw-weight-bold);
  letter-spacing: var(--bstw-tracking-wide);
  text-transform: uppercase;
  color: var(--bstw-color-text-faint);
  background: var(--bstw-color-surface);
  border: var(--bstw-border-width-sm) solid var(--bstw-color-border);
  padding: var(--bstw-space-3) var(--bstw-space-9);
  pointer-events: none;
}

@media (max-width: 640px) {
  .bstw-approach-grid--desktop { display: none !important; }
  .bstw-compare { display: block !important; }
}

/* --- keyframes ---------------------------------------------------------------------------*/
@keyframes bstw-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes bstw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }
/* A brief, subtle wiggle near the end of each 10s cycle — mostly still,
   with a small flourish so the hero headline doesn't feel static. */
@keyframes bstw-jiggle {
  0%, 90% { transform: rotate(0deg); }
  92% { transform: rotate(-1deg); }
  94% { transform: rotate(1deg); }
  96% { transform: rotate(-0.6deg); }
  98% { transform: rotate(0.4deg); }
  100% { transform: rotate(0deg); }
}

/* --- accent modifiers ----------------------------------------------------------------------
   Boostway's palette is applied per-instance (a card's accent color comes
   from page data, not a fixed semantic role) — these utilities set the
   custom properties that color/shadow/border rules above read from. -------*/
.bstw-accent--blue { --bstw-accent-color: var(--bstw-blue-500); }
.bstw-accent--orange { --bstw-accent-color: var(--bstw-orange-500); }
.bstw-accent--green { --bstw-accent-color: var(--bstw-green-500); }
.bstw-accent--pink { --bstw-accent-color: var(--bstw-pink-500); }
.bstw-text-accent { color: var(--bstw-accent-color); }
.bstw-bg-accent { background: var(--bstw-accent-color); }
.bstw-shadow-accent { --bstw-shadow-color: var(--bstw-accent-color); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .bstw-grid--cols-2--tablet-1 { grid-template-columns: 1fr !important; }
  .bstw-grid--cols-3--tablet-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .bstw-grid--cols-3--tablet-1 { grid-template-columns: 1fr !important; max-width: 480px !important; }
  .bstw-grid--cols-4--tablet-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .bstw-grid--stats--tablet { grid-template-columns: repeat(2, 1fr) !important; row-gap: var(--bstw-space-15); }
  /* At 2 columns the right-hand item of each row needs its own closing
     border too — :last-child alone only closes the final row. */
  .bstw-grid--stats--tablet .bstw-stat:nth-child(2n) { border-right: var(--bstw-border-width-lg) solid var(--bstw-color-border); }
  .bstw-grid--footer--tablet { grid-template-columns: 1fr 1fr !important; row-gap: var(--bstw-space-21); }
  .bstw-grid--contact--tablet { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  /* --bstw-space-26 is used exclusively as the screen-edge inset for nav,
     sections, and the footer — shrink it here so mobile doesn't carry the
     same 48px gutter as desktop. Everything reading it (including the
     slider's bleed math below) picks this up automatically. */
  :root { --bstw-space-26: var(--bstw-space-15); }
  .bstw-nav__links,
  .bstw-nav .bstw-btn { display: none !important; }
  .bstw-nav__toggle { display: block !important; }
  .bstw-grid--cols-2--mobile-1 { grid-template-columns: 1fr !important; }
  .bstw-grid--cols-3--mobile-1 { grid-template-columns: 1fr !important; }
  .bstw-grid--cols-4--mobile-1 { grid-template-columns: 1fr !important; }
  .bstw-grid--footer--mobile { grid-template-columns: 1fr !important; }
  .bstw-footer-cta--mobile { padding: var(--bstw-space-12) var(--bstw-space-13) !important; bottom: 18px !important; right: 18px !important; }

  /* Fluid mobile slider — card grids that would otherwise stack vertically
     become a swipeable, snap-to-card horizontal strip instead. Bleeds to
     the viewport edge and reveals a peek of the next card as an affordance. */
  .bstw-slider--mobile {
    display: flex !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: none !important;
    margin-left: calc(-1 * var(--bstw-space-26));
    margin-right: calc(-1 * var(--bstw-space-26));
    /* top padding gives room for content that pokes above a card (e.g. the
       pricing "Most Popular" badge) so the scroll container doesn't clip it */
    padding: var(--bstw-space-15) var(--bstw-space-26) var(--bstw-space-9);
  }
  .bstw-slider--mobile::-webkit-scrollbar { display: none; }
  .bstw-slider--mobile > * {
    flex: 0 0 92%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}