@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

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

:root {
  --black: #000000;
  --white: #FFFFFF;
  --gray-950: #0A0A0A;
  --gray-900: #111111;
  --gray-800: #1A1A1A;
  --gray-700: #2A2A2A;
  --gray-600: #3D3D3D;
  --gray-500: #666666;
  --gray-400: #888888;
  --gray-300: #AAAAAA;
  --gray-200: #CCCCCC;
  --gray-100: #E5E5E5;
  --gray-50:  #F5F5F5;
  --font: 'Outfit', 'Century Gothic', sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h: 72px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--white); color: var(--black); }

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

button { font-family: var(--font); cursor: pointer; }

img { max-width: 100%; }

/* ── Utility classes ── */
.label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #666;
}
.label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: #444;
  flex-shrink: 0;
}
.label.light { color: #999; }
.label.light::before { background: #ccc; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}

/* ── Page wrapper ── */
#root { min-height: 100vh; }

/* ── Btn ── */
.btn-primary {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  padding: 16px 36px;
  cursor: pointer;
  transition: all 200ms var(--ease);
  display: inline-block;
}
.btn-primary:hover { background: transparent; color: #fff; }

.btn-ghost {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: #666;
  border: 1px solid #333;
  padding: 16px 36px;
  cursor: pointer;
  transition: all 200ms var(--ease);
  display: inline-block;
}
.btn-ghost:hover { border-color: #fff; color: #fff; }

.btn-primary-dark {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  padding: 16px 36px;
  cursor: pointer;
  transition: all 200ms var(--ease);
  display: inline-block;
}
.btn-primary-dark:hover { background: transparent; color: #000; }

/* ── Max container ── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Input base ── */
.field-input {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  background: transparent;
  border: none;
  border-bottom: 1px solid #2A2A2A;
  color: #fff;
  padding: 12px 0;
  width: 100%;
  outline: none;
  transition: border-color 200ms;
  letter-spacing: 0.04em;
}
.field-input:focus { border-bottom-color: #fff; }
.field-input::placeholder { color: #3D3D3D; }

/* Dropdown menu */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  border: 1px solid #1A1A1A;
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms, transform 200ms;
  transform: translateX(-50%) translateY(-4px);
  z-index: 100;
}
.nav-item:hover .nav-dropdown,
.nav-dropdown:hover {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* =============================================================
   MOBILE NAV — Hamburger infrastructure
   Classes are applied by the Nav React components.
   Default: hidden on desktop.
   ============================================================= */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #2A2A2A;
  cursor: pointer;
  padding: 0;
  transition: border-color 200ms;
}
.nav-burger:hover { border-color: #fff; }
.nav-burger-icon {
  position: relative;
  width: 18px;
  height: 12px;
  display: block;
}
.nav-burger-icon::before,
.nav-burger-icon::after,
.nav-burger-icon > span {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: #fff;
  transition: transform 250ms var(--ease), opacity 150ms var(--ease), top 250ms var(--ease);
}
.nav-burger-icon::before { top: 0; }
.nav-burger-icon > span { top: 5px; }
.nav-burger-icon::after  { top: 10px; }
.nav-burger.open .nav-burger-icon::before { top: 5px; transform: rotate(45deg); }
.nav-burger.open .nav-burger-icon::after  { top: 5px; transform: rotate(-45deg); }
.nav-burger.open .nav-burger-icon > span  { opacity: 0; }

.nav-mobile-drawer {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999;
  overflow-y: auto;
  padding: 24px 24px 48px;
}
.nav-mobile-drawer.open { display: block; animation: fadeUp 200ms var(--ease); }
.nav-mobile-drawer a {
  display: block;
  padding: 18px 4px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ccc;
  border-bottom: 1px solid #1A1A1A;
  transition: color 150ms, padding-left 200ms var(--ease);
}
.nav-mobile-drawer a:hover,
.nav-mobile-drawer a:active { color: #fff; padding-left: 10px; }
.nav-mobile-drawer a.sub {
  font-size: 12px;
  font-weight: 400;
  color: #888;
  padding: 14px 4px 14px 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-mobile-drawer-cta {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 18px 24px;
  background: #fff;
  color: #000;
  text-align: center;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid #fff;
}
body.nav-locked { overflow: hidden; }

/* =============================================================
   RESPONSIVE OVERRIDE LAYER
   The React components use inline styles for desktop layout.
   These rules override them for tablet and mobile breakpoints.
   ============================================================= */

/* ───────── TABLET (≤ 1024px) ───────── */
@media (max-width: 1024px) {
  /* Nav / section / footer horizontal padding shrinks */
  nav[style] { padding-left: 28px !important; padding-right: 28px !important; }
  section[style*="padding"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  footer[style*="padding"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Section vertical padding reductions */
  section[style*="padding: 120px 40px"],
  section[style*="padding: 140px 40px"] {
    padding-top: 88px !important;
    padding-bottom: 88px !important;
  }
  section[style*="padding: 160px 40px 100px"] {
    padding-top: 120px !important;
    padding-bottom: 72px !important;
  }
  section[style*="padding: 80px 40px 120px"] {
    padding-top: 56px !important;
    padding-bottom: 88px !important;
  }

  /* Collapse very wide grids to 2 columns */
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Footer 4-column → 2-column */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 3-column service arrays → 2 cols on tablet */
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tight up large gaps */
  [style*="gap: 120"] { gap: 48px !important; }
  [style*="gap: 100"] { gap: 56px !important; }
  [style*="gap: 80"]  { gap: 48px !important; }
  [style*="gap: 60"]  { gap: 36px !important; }

  /* Hero absolute-positioned diagonal accents — shrink */
  section[style*="min-height: 100vh"] > div[style*="rotate(-15deg)"] {
    width: 320px !important;
    height: 480px !important;
    right: -80px !important;
  }

  /* Large display h2 — scale slightly */
  h2[style*="clamp(32px"],
  h2[style*="clamp(36px"],
  h2[style*="clamp(40px"] {
    font-size: clamp(30px, 4.5vw, 44px) !important;
  }
}

/* ───────── NAV BREAKPOINT (≤ 960px) ─────────
   Below 960px the desktop nav link cluster becomes too cramped,
   so we swap to hamburger. */
@media (max-width: 960px) {
  .nav-desktop-links { display: none !important; }
  .nav-desktop-cta   { display: none !important; }
  .nav-burger        { display: flex !important; }
}

/* ───────── MOBILE (≤ 768px) ───────── */
@media (max-width: 768px) {
  /* All sections: compress padding */
  nav[style] { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  footer[style*="padding"] {
    padding: 56px 20px 32px !important;
  }

  /* Full-height hero — convert to auto height with nav offset */
  section[style*="min-height: 100vh"] {
    min-height: auto !important;
    padding-top: 112px !important;
    padding-bottom: 72px !important;
  }
  section[style*="padding: 160px 40px 100px"] {
    padding-top: 104px !important;
    padding-bottom: 56px !important;
  }

  /* Collapse EVERY multi-column grid to a single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Normalize giant gaps on stacked grids */
  [style*="grid-template-columns"][style*="gap: 120"],
  [style*="grid-template-columns"][style*="gap: 100"],
  [style*="grid-template-columns"][style*="gap: 80"],
  [style*="grid-template-columns"][style*="gap: 60"] {
    gap: 36px !important;
  }

  /* Stacked grid children: drop right-borders; add bottom divider */
  [style*="grid-template-columns"] > * {
    border-right: none !important;
  }
  [style*="grid-template-columns"][style*="gap: 0"] > *:not(:last-child),
  [style*="grid-template-columns"][style*="gap:0"]  > *:not(:last-child) {
    border-bottom: 1px solid rgba(128, 128, 128, 0.18) !important;
  }

  /* Stats bar — flex row of 5, wrap to 2-column grid */
  .stats-bar-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 !important;
  }
  .stats-bar-row > div {
    padding: 22px 12px !important;
    border-right: 1px solid #1A1A1A !important;
    border-bottom: 1px solid #1A1A1A !important;
  }
  .stats-bar-row > div:nth-child(2n) { border-right: none !important; }
  .stats-bar-row > div:nth-last-child(-n+1) { border-bottom: none !important; }

  /* Typography — scale down large display type */
  h1 {
    font-size: clamp(32px, 9vw, 52px) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.08 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  h2 {
    font-size: clamp(26px, 7.5vw, 40px) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.12 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  h3 { font-size: 17px !important; line-height: 1.3 !important; }
  p  { font-size: 14.5px !important; line-height: 1.7 !important; }

  /* Hero large-letter-spacing heading (minimal variant) */
  h1[style*="letter-spacing: 0.25em"],
  h1[style*="letter-spacing: 0.2em"] {
    letter-spacing: 0.06em !important;
    font-size: clamp(32px, 10vw, 56px) !important;
  }

  /* Display "KNOW YOUR NUMBERS" huge type */
  div[style*="clamp(60px"],
  div[style*="clamp(72px"] {
    font-size: clamp(42px, 11vw, 72px) !important;
  }

  /* Button containers (flex row of CTAs) — stack */
  div[style*="display: flex"][style*="gap: 16"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Oversized CTAs — full width */
  button[style*="padding: 16px 36"],
  button[style*="padding: 16px 40"],
  button[style*="padding: 18px"],
  button[style*="padding: 14px 32"],
  a[style*="padding: 16px 36"],
  a[style*="padding: 18px"] {
    width: 100% !important;
    padding: 15px 22px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Hero absolute diagonal accents — hide (they cause visual clutter) */
  section[style*="min-height: 100vh"] > div[style*="rotate(-15deg)"] {
    display: none !important;
  }

  /* Hero grid-line bg — dim further */
  section[style*="min-height: 100vh"] > div[style*="background-image: linear-gradient"],
  section[style*="padding: 160px"] > div[style*="background-image: linear-gradient"] {
    background-size: 40px 40px !important;
    opacity: 0.25 !important;
  }

  /* Hero scroll indicator — reposition so it doesn't overlap */
  section[style*="min-height: 100vh"] div[style*="bottom: -60"] {
    display: none !important;
  }

  /* Form padding */
  form[style*="padding: 48px 40px"],
  form[style*="padding: 48px"] {
    padding: 28px 20px !important;
  }

  /* Sticky tabs / tier list: items stack nicely without fixed borders */
  [style*="grid-template-columns: 1fr 2fr"] > div[style*="border-right"],
  [style*="grid-template-columns: 1fr 3fr"] > div[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.18) !important;
  }

  /* Dropdowns/select — ensure they fit */
  select, input[type="text"], input[type="email"], input[type="tel"], textarea {
    max-width: 100% !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }

  /* Container */
  .container { padding: 0 20px !important; }

  /* Button classes: shrink so long-text CTAs don't overflow narrow screens */
  .btn-primary, .btn-ghost, .btn-primary-dark {
    font-size: 11px !important;
    padding: 14px 22px !important;
    letter-spacing: 0.14em !important;
    max-width: 100%;
  }

  /* Stacked grid rows: tighten internal gap so collapsed rows don't have
     huge vertical space between sub-items */
  [style*="grid-template-columns"][style*="gap: 32"],
  [style*="grid-template-columns"][style*="gap:32"],
  [style*="grid-template-columns"][style*="gap: 28"],
  [style*="grid-template-columns"][style*="gap:28"],
  [style*="grid-template-columns"][style*="gap: 24"],
  [style*="grid-template-columns"][style*="gap:24"] {
    gap: 10px !important;
  }

  /* Right-aligned cells inside collapsed grids: reset to left for legibility */
  [style*="grid-template-columns"] > [style*="text-align: right"],
  [style*="grid-template-columns"] > [style*="textAlign: 'right'"] {
    text-align: left !important;
  }

  /* Flex rows with baseline/items spaced out on tablet → wrap */
  div[style*="justify-content: space-between"][style*="align-items: flex-end"],
  div[style*="justify-content: space-between"][style*="align-items: baseline"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  div[style*="justify-content: space-between"][style*="align-items: flex-end"] p,
  div[style*="justify-content: space-between"][style*="align-items: flex-end"] > p {
    text-align: left !important;
  }

  /* Vertical divider inside hero-minimal — hide */
  div[style*="width: 1px"][style*="align-self: stretch"],
  div[style*="width: 1"][style*="align-self: stretch"] {
    display: none !important;
  }

  /* Hero-minimal flex layout — stack */
  div[style*="display: flex"][style*="gap: 60"] {
    flex-direction: column !important;
    gap: 24px !important;
  }
}

/* ───────── SMALL MOBILE (≤ 430px) ───────── */
@media (max-width: 430px) {
  nav[style] { padding-left: 16px !important; padding-right: 16px !important; }
  section[style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  footer[style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h1 { font-size: clamp(28px, 9vw, 44px) !important; }
  h2 { font-size: clamp(24px, 7vw, 36px) !important; }
  h1[style*="letter-spacing: 0.25em"],
  h1[style*="letter-spacing: 0.2em"] {
    font-size: clamp(28px, 10vw, 44px) !important;
  }
  /* Tighter inner padding on tiles */
  [style*="padding: 40px 32px"],
  [style*="padding: 48px 36px"],
  [style*="padding: 48px 32px"],
  [style*="padding: 56px 48px"],
  [style*="padding: 36px 28px"],
  [style*="padding: 28px 24px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Shrink nav logo text */
  nav a div div[style*="font-size: 13px"],
  nav a div div[style*="fontSize: 13"] {
    font-size: 12px !important;
  }

  /* Buttons: even more compact on the smallest screens */
  .btn-primary, .btn-ghost, .btn-primary-dark {
    font-size: 10.5px !important;
    padding: 13px 16px !important;
    letter-spacing: 0.12em !important;
  }
}

/* =============================================================
   STICKY MOBILE CTA BAR
   Fixed bottom bar shown only on mobile. Hidden on desktop.
   ============================================================= */
.sticky-mobile-cta {
  display: none;
}

@media (max-width: 960px) {
  .sticky-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 997;
    gap: 0;
    border-top: 1px solid #1A1A1A;
    /* safe area for iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #000;
  }

  .sticky-mobile-cta__book {
    flex: 1;
    background: #fff;
    color: #000;
    padding: 16px 20px;
    text-align: center;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    transition: background 200ms, color 200ms;
  }
  .sticky-mobile-cta__book:hover { background: #E5E5E5; }

  .sticky-mobile-cta__call {
    background: transparent;
    color: #888;
    padding: 16px 24px;
    border-left: 1px solid #1A1A1A;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    transition: color 200ms;
  }
  .sticky-mobile-cta__call:hover { color: #fff; }

  /* Push page content up so nothing is hidden behind the bar */
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
}

/* ───────── DESKTOP (≥ 1280px) — preserved as-is ───────── */
/* Original inline styles apply. No overrides. */

/* =============================================================
   EXTENDED MOBILE FIXES
   Targets patterns not caught by the attribute-selector layer above.
   ============================================================= */

/* ── Photo marquee: slow down on mobile ── */
@media (max-width: 768px) {
  .photo-marquee-track { animation-duration: 60s !important; }
}

/* ── Email capture — mobile: full-width above sticky bar ── */
@media (max-width: 960px) {
  .email-capture {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 24px 20px !important;
  }
}

/* ── Active Research Site strip (homepage) ── */
@media (max-width: 768px) {
  .research-strip {
    flex-direction: column !important;
  }
  .research-item {
    min-width: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
    padding-bottom: 32px !important;
    border-bottom: 1px solid #1A1A1A !important;
  }
  .research-item-last {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

/* ── About page Research section grids ── */
@media (max-width: 768px) {
  .research-header {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 36px !important;
  }
  .research-cards {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
}

/* ── Calendly inline embed: reduce fixed height on mobile ── */
@media (max-width: 768px) {
  .calendly-inline-widget {
    height: 75vh !important;
    min-height: 480px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── Capabilities strip: wrap to 2-column grid on mobile ── */
@media (max-width: 768px) {
  .caps-strip {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    padding: 0 !important;
  }
  .caps-strip > div {
    flex: 0 0 50% !important;
    min-width: 0 !important;
    border-bottom: 1px solid #1A1A1A !important;
  }
  .caps-strip > div:nth-child(odd) { border-right: 1px solid #1A1A1A !important; }
  .caps-strip > div:nth-child(even) { border-right: none !important; }
}

@media (max-width: 768px) {

  /* Flex containers with large gaps not caught by the gap:60 rule */
  div[style*="display: flex"][style*="gap: 80"],
  div[style*="display: flex"][style*="gap: 100"],
  div[style*="display: flex"][style*="gap: 120"] {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  /* Flex children with minWidth that exceed mobile viewport */
  div[style*="min-width: 280px"],
  div[style*="min-width: 300px"],
  div[style*="min-width: 320px"],
  div[style*="min-width: 260px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Prevent any element from overflowing the viewport width */
  section > div, main > section {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Flex rows used for stat/info strips that don't collapse to column */
  div[style*="display: flex"][style*="gap: 48"],
  div[style*="display: flex"][style*="gap: 40"] {
    flex-wrap: wrap !important;
    gap: 20px !important;
  }

  /* Tables/grids that use padding:28px 40px internally */
  div[style*="padding: 28px 40px"],
  div[style*="padding: 32px 40px"],
  div[style*="padding: 24px 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Calendly embeds — allow scroll rather than overflow */
  .calendly-inline-widget {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Testing tab grid (1fr 2fr) → stack tabs above detail */
  div[style*="grid-template-columns: 1fr 2fr"],
  div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Padding on inner content blocks */
  div[style*="padding: 48px 48px"] {
    padding: 28px 20px !important;
  }
  div[style*="padding: 48px 40px"] {
    padding: 28px 20px !important;
  }
  div[style*="padding: 40px 32px"] {
    padding: 24px 16px !important;
  }
  div[style*="padding: 36px 32px"] {
    padding: 20px 16px !important;
  }

  /* Fixed classes on schedule page */
  div[style*="grid-template-columns: repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Research section two-column flex → stack */
  div[style*="padding-right: 60px"],
  div[style*="padding-left: 60px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
    padding-bottom: 32px !important;
    border-bottom: 1px solid #1A1A1A !important;
  }

  /* Contact page 2-col layout with Calendly + form */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 120"],
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:120"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 60"],
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:60"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Section headings that use grid 1fr 2fr for label + description */
  div[style*="grid-template-columns: 1fr 2fr"],
  div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  div[style*="grid-template-columns: 2fr 1fr"],
  div[style*="grid-template-columns:2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Gallery masonry */
  .gallery-grid { columns: 1 !important; }

  /* Schedule open booking session type selector */
  div[style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Private training / membership pricing grids */
  div[style*="grid-template-columns: 2fr 1fr 3fr"],
  div[style*="grid-template-columns: 1fr 80px 3fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* Horizontal flex lists that should wrap (e.g. CTA button groups) */
  div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 16"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ── Memberships: all-memberships info strip ── */
@media (max-width: 768px) {
  .memberships-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .memberships-strip-text {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }
}

/* ── Memberships: session block table ── */
@media (max-width: 768px) {
  .session-table-head { display: none !important; } /* hide column headers — labels move inline */
  .session-table-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 16px 18px !important;
  }
  .session-block {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    color: #999 !important;
    margin-bottom: 2px !important;
  }
  .session-time {
    font-size: 11px !important;
    color: #999 !important;
    margin-top: 2px !important;
  }
}

/* ── Memberships: monthly value table ── */
@media (max-width: 768px) {
  .monthly-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 18px 18px !important;
  }
}

/* ── Footer newsletter ── */
@media (max-width: 768px) {
  .footer-newsletter {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .footer-newsletter-form {
    flex-shrink: 1 !important;
    width: 100% !important;
  }
  .footer-newsletter-form input[type="email"] {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    display: block !important;
  }
  .footer-newsletter-form button {
    width: 100% !important;
  }
}

/* ── Services page grid ── */
@media (max-width: 768px) {
  .service-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 28px 0 !important;
  }
  .service-row > span:first-child { display: none !important; }
}

@media (max-width: 1024px) {
  .service-row {
    grid-template-columns: 1fr 2fr auto !important;
    gap: 24px !important;
  }
}

/* ── FAQ grid ── */
@media (max-width: 1024px) {
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ───────── SMALL MOBILE extra fixes (≤ 430px) ───────── */
@media (max-width: 430px) {
  .caps-strip > div { flex: 0 0 50% !important; }

  /* Even tighter section padding */
  section[style*="padding"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Gallery: 1 col */
  .gallery-grid { columns: 1 !important; }
}