/* =====================================================================
   ExercizeMe clone — design tokens & global styles
   Colors, typography, spacing pulled from the original exercizeme.com
   (page builder uses Open Sans for headings, Lato for body, FA5 for icons).
   ===================================================================== */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Lato:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap");

:root {
  --orange:         #e69138;          /* main brand orange (from original) */
  --orange-dark:    #D17F22;          /* hover/active */
  --slate:          #444444;          /* dark CTA buttons (#444) */
  --slate-dark:     #2a2a2a;
  --text:           #000000;          /* primary copy */
  --text-muted:     #6B7280;
  --text-on-dark:   #FFFFFF;
  --white:          #FFFFFF;
  --gray:           #F3F4F6;          /* FAQ background */
  --border:         #E5E7EB;

  /* Brand-color aliases (mirror the live site's --color-* tokens) */
  --text-color:     #000000;          /* alias of --text */
  --color-lh5cyfp3: #444444;          /* alias of --slate */
  --color-m0o9bemz: #e69138;          /* alias of --orange */
  --color-l69wj6iz: #333333;          /* FA times/check glyph color (was --red-x / --green-check) */

  --font-heading:   "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:      "Open Sans", "Helvetica Neue", Arial, sans-serif;  /* C9: live body uses Open Sans */

  --radius:         10px;             /* matches original button radius */
  --radius-card:    4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }

/* C10: global heading/paragraph defaults matching live */
h1 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 12px;
  color: inherit;
}
h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--white);
}
p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 14px;
}

/* Screen-reader-only utility (used by the hamburger button's "Menu" label) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   Shared: buttons (the "Book Free Discovery Call" CTA)
   ===================================================================== */
.btn {
  display: inline-block;
  background: var(--slate);
  color: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px 22px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.2s ease;
  line-height: 1.2;
  text-align: center;
}
.btn:hover { background: var(--slate-dark); animation: btnElevate 0.2s ease forwards; }
.btn:active { transform: translateY(1px); }
.btn--orange { background: var(--orange); }
.btn--orange:hover { background: var(--orange-dark); }

/* Match live site: CTA buttons elevate on hover (translateY -10px + soft shadow) */
@keyframes btnElevate {
  to { transform: translateY(-10px); box-shadow: 0 8px 5px -5px rgba(0,0,0,0.25); }
}

/* =====================================================================
   Header — orange bar, 80px tall, logo fills full height
   Matches original exercizeme.com: logo is 80px tall in an 80px header,
   nav sits to the right of the logo (rightmost position).
   ===================================================================== */
.site-header {
  background: var(--orange);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  height: 80px;
}
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--white);
  height: 80px;
  flex-shrink: 0;
}
.logo img {
  height: 80px;
  width: auto;
  max-width: none;
  display: block;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  color: var(--white);
  font-size: 20px;
  order: 2;
}
.nav-toggle .fa-bars { display: block; }

/* Language toggle (EN | FR) on the orange header */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: var(--font-heading);
  margin-right: 12px;
}
.lang-toggle button {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  border-radius: 3px;
}
.lang-toggle button:hover { color: var(--slate); }
.lang-toggle button.is-active {
  text-decoration: underline;
  cursor: default;
}
.lang-toggle .lang-sep {
  color: rgba(0, 0, 0, 0.3);
}

/* Right-side group: nav + lang toggle + CTA, all pushed to the right */
.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  order: 3;
}

.primary-nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  transition: color 0.3s, background 0.3s;
  padding: 6px 10px;
  border-radius: 4px;
}
.primary-nav a:hover { color: var(--slate); background: var(--white); }
.header-cta { margin-left: 0; }

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .header-cta { display: none; }
  .header-right { gap: 8px; }
  .lang-toggle { margin-right: 0; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--orange);
    border-top: 1px solid var(--orange-dark);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; padding: 12px 24px; gap: 12px; }
}

/* =====================================================================
   Hero — full-width 3-photo collage with copy overlaid
   Image is 1600x722 (aspect 2.22). The original exercizeme.com uses
   a shorter hero on mobile (~233px tall) so the 3 photos fit
   horizontally without being cut off.
   ===================================================================== */
.hero {
  background-color: #000;
  color: var(--white);
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 640px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px;
  min-height: 640px;
  position: relative;
  z-index: 1;
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 24px 0;
}
.hero-copy::before {
  /* Dark gradient overlay so the white text is readable over the photo */
  content: "";
  position: absolute;
  top: -60px;
  left: -5000px;
  right: -100px;
  bottom: -60px;
  background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0) 100%);
  z-index: -1;
}
/* Live site: hero h1 is 54px desktop, h2 is 30px desktop (per CATALOG_LIVE.md) */
.hero-copy h1 {
  font-family: var(--font-heading);
  font-size: 54px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--white);
}
.hero-copy h2 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 24px;
  color: var(--white);
}
.hero-copy .btn { align-self: flex-start; }

@media (max-width: 900px) {
  /* Match original mobile hero height: ~233px at 393px, ~260px at 375px.
     This keeps the 3-photo collage fitting horizontally with minimal cropping. */
  .hero { min-height: 240px; }
  .hero-inner { min-height: 240px; padding: 20px 16px; }
  .hero-copy { max-width: 100%; padding: 12px 0; }
  .hero-copy::before { left: -3000px; right: 0; top: -20px; bottom: -20px; background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%); }
  .hero-copy h1 { font-size: 20px; margin: 0 0 8px; }
  .hero-copy h2 { font-size: 13px; margin: 0 0 12px; }
  .hero-copy .btn { font-size: 12px; padding: 8px 18px; }
  /* Shift the collage so the man on the left is visible (not just the woman) */
  .hero-bg { object-position: left center; }
}

/* =====================================================================
   Value strip (orange rounded card on white, 3 items with + icon)
   Matches live site: the value strip is a rounded card sitting inside a
   white section (NOT a full-bleed orange band). Card has horizontal
   padding from the page edge. + icon is a darker orange circle with a
   white + inside, and the text is white bold.
   ===================================================================== */
.value-strip {
  background: var(--white);
  padding: 30px 0;
}
.value-strip .container.value-grid {
  background: var(--orange);
  border-radius: 16px;
  padding: 30px 24px;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.value-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.value-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.value-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
}
.value-item > i {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-dark);
  color: var(--white);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
}
.value-cta {
  margin-top: 8px;
}

/* =====================================================================
   Two-column sections (problem, solution)
   ===================================================================== */
.problem, .solution { padding: 70px 0; }
.problem { background: var(--white); }
.solution { background: var(--white); }
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}
.two-col .col-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.section-title {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 24px;
  color: var(--text);
}
.section-title--light   { color: var(--white); }
.section-title--center  { text-align: center; }

.cross-list, .check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.cross-list li,
.check-list li {
  position: relative;
  padding: 14px 0 14px 36px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cross-list li > i,
.check-list li > i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-l69wj6iz);  /* F4: dark grey, matches live */
}
.cross-list li h1,
.check-list li h1 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
  padding: 0;
  border: none;
  flex: 1;
}

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
}

/* =====================================================================
   Programs (orange section, 3 cards with translucent white bg)
   ===================================================================== */
.programs {
  background: var(--orange);
  padding: 60px 0;
  text-align: center;
  color: var(--text);
}
.programs .section-title {
  font-size: 34px;
  font-weight: 400;
  margin: 0 0 36px;
}
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.program-card {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-card);
  padding: 28px 20px;
  text-align: center;
  color: var(--white);
}
.program-card h1 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--white);
}
.program-card h2 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}
.section-cta { text-align: center; margin-top: 24px; }

@media (max-width: 900px) {
  .program-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   About
   ===================================================================== */
.about {
  background: var(--white);
  padding: 70px 0;
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 40px;
  align-items: start;
}
.about-copy p {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
.about-photo {
  text-align: center;
  position: sticky;
  top: 100px;
  padding-top: 60px;
}
.about-photo::before {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--orange);
  margin: 0 auto 16px;
  border-radius: 2px;
}
.about-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.about-portrait {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 18px auto 0;
  border-radius: 4px;
}

/* Certifications row — sits below the 2-col bio+sidebar, full width */
.about-certs {
  text-align: center;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.certs-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--text);
}
.certs-title em { font-style: italic; }
.certs-strip {
  display: block;
  width: auto;
  height: 100px;
  max-width: 360px;
  margin: 0 auto 28px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; }
  .about-photo { position: static; padding-top: 0; }
}

/* =====================================================================
   Reviews — embed LeadConnector reviews iframe
   ===================================================================== */
.reviews {
  background: var(--white);
  padding: 70px 0;
}
.review-widget {
  max-width: 1130px;
  margin: 0 auto 24px;
  background: var(--gray);
  border-radius: 4px;
  padding: 8px;
  overflow: hidden;
}
.review-widget iframe {
  display: block;
  border: 0;
  width: 100%;
  min-width: 100%;
  height: 200px;
  overflow: hidden;
}

/* The "us" word in "What clients say about us" is underlined in the original */
.section-title--center u { text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* =====================================================================
   FAQ — flat rows (no card backgrounds) with chevron on LEFT
   ===================================================================== */
.faq {
  background: var(--gray);
  padding: 60px 0;
}
.faq-list {
  max-width: 700px;
  margin: 0 auto 24px;
}
.faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  border-radius: 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px 16px 44px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  text-align: center;
  color: var(--text);
  transition: transform 0.15s ease;
}
.faq-item[open] summary > i { transform: translateY(-50%) rotate(180deg); }
.faq-item summary > span { flex: 1; }
.faq-answer {
  padding: 0 20px 16px 44px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
.faq-answer p { margin: 0; }

/* =====================================================================
   Final CTA (orange)
   ===================================================================== */
.final-cta {
  background: var(--orange);
  padding: 70px 0;
  text-align: center;
  color: var(--text);
}
.final-cta .section-title {
  font-size: 30px;
  font-weight: 600;
  margin: 0 auto 28px;
  max-width: 900px;
  line-height: 1.3;
  color: var(--text);
}

/* =====================================================================
   Footer — matches original exercizeme.com
   - Section headings: Lato 24px 500 BLACK
   - Social/contact links: Lato 18px 500 WHITE
   - Copyright: Open Sans 16px 500 WHITE
   ===================================================================== */
.site-footer {
  background: var(--orange);
  padding: 30px 0 20px;
  color: var(--white);
}
.footer-grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.footer-brand .logo-tile {
  background: var(--orange);  /* C2: live footer logo tile uses the same orange as the band */
  padding: 10px 14px;
  border-radius: var(--radius-card);
  display: inline-block;
}
.footer-brand .logo-tile img {
  height: 50px;
  width: auto;
}
.footer-col h3 {
  font-family: var(--font-body);  /* Lato */
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--text);  /* BLACK for headings */
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 8px;
  font-family: var(--font-body);  /* Lato */
  font-size: 18px;
  color: var(--white);  /* WHITE for list items */
}

/* Social + contact links with inline SVG icons (no external font dep) */
.footer-col a, .footer-col .contact-static {
  color: var(--white);  /* WHITE for links */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);  /* Lato */
  font-size: 18px;
  font-weight: 500;
}
.footer-col a:hover { text-decoration: underline; }
.footer-col a svg, .footer-col .contact-static svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}
.footer-col a[href*="facebook"] svg  { width: 14px; }
.footer-col a[href*="instagram"] svg { width: 15px; }
.footer-col a[href*="tiktok"] svg    { width: 14px; }

.copyright {
  text-align: center;
  margin-top: 24px;
  font-family: var(--font-heading);  /* Open Sans */
  font-size: 16px;
  font-weight: 500;
  color: var(--white);  /* WHITE for copyright */
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Contact links inside .contact-list (tappable phone/email)
   ===================================================================== */
.contact-list .contact-link {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
  color: var(--white);
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s ease;
}
.contact-list .contact-link:hover,
.contact-list .contact-link:focus-visible {
  border-bottom-color: var(--white);
  outline: none;
}
@media (hover: none) {
  .contact-list .contact-link {
    padding: 6px 0;
    border-bottom-color: rgba(31, 41, 55, 0.2);
  }
}
.contact-list .contact-icon  { display: inline-block; min-width: 1.2em; text-align: center; }
.contact-list .contact-label { font-weight: 600; margin-right: 2px; }
.contact-list .contact-value { word-break: break-all; }
.contact-list .contact-icon i { color: var(--white); }

/* =====================================================================
   D2: Sticky logo bar (live second orange strip between header and hero)
   ===================================================================== */
.logo-bar {
  background: var(--orange);
  padding: 20px 0;
  text-align: center;
}
.logo-bar img {
  display: inline-block;
  height: 60px;
  width: auto;
  max-width: 240px;
}

/* =====================================================================
   D4: Program (3-step) card numbered circle (matches live site)
   ===================================================================== */
.program-card-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--white);
  color: var(--orange);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

/* =====================================================================
   F6: Ready CTA band (between certs and reviews)
   ===================================================================== */
.ready-cta {
  background: var(--white);
  padding: 30px 0;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* =====================================================================
   D3: Final CTA — orange band, heading + button (no photo, matches live)
   Live site: heading + button are RIGHT-aligned, with empty orange on left.
   ===================================================================== */
.final-cta-row {
  display: block;
  text-align: right;
  max-width: 900px;
  margin: 0 auto;
}
.final-cta-photo { display: none; }
.final-cta-copy {
  text-align: right;
}
.final-cta-copy .section-title {
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--text);
  text-align: right;
  max-width: none;
}
.final-cta-copy .btn { margin: 0; }
@media (max-width: 900px) {
  .final-cta-copy .section-title { font-size: 22px; }
  .final-cta-copy, .final-cta-copy .section-title, .final-cta-row { text-align: center; }
}

/* =====================================================================
   Header social icons (desktop only) — formerly rendered social icons
   inline in the header. The live site does NOT have social icons in the
   header (only in the footer), so the .header-social markup was removed
   for parity. Rules retained in case future use is needed.
   ===================================================================== */
.header-social {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 14px;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.header-social li { display: inline-flex; flex-shrink: 0; }
.header-social a {
  color: var(--white);
  text-decoration: none;
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.header-social a:hover { color: var(--slate); background: rgba(255,255,255,0.15); }

/* =====================================================================
   E1-E2, E3-E10, F2: utility classes + responsive breakpoints
   ===================================================================== */
.desktop-only { display: initial; }
.mobile-only  { display: none; }
.tablet-hide  { display: initial; }

/* Close button (B7) — hidden on desktop, visible inside mobile nav */
.close-menu {
  display: none;
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: 0;
  color: var(--white);
  font-size: 20px;
  cursor: pointer;
  padding: 6px 10px;
}

@media (max-width: 1024.01px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 1024.02px) {
  .mobile-only { display: none !important; }
  .nav-toggle { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .tablet-hide { display: none !important; }
  .desktop-only { display: none !important; }
  .mobile-only { display: initial !important; }
}
@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .primary-nav { display: none; }
  .primary-nav.is-open { display: block; }
  .mobile-only { display: initial !important; }
  .desktop-only { display: none !important; }
  .close-menu.is-shown { display: inline-flex; }
  .primary-nav .close-menu { display: inline-flex; }
}

@media (max-width: 480px) {
  /* E3: hero heading at small mobile */
  .hero-copy h1 { font-size: 14px; }
  .hero-copy h2 { font-size: 32px; }
  .hero { padding: 30px 30px; }

  /* E4: bullet rows at small mobile */
  .cross-list li h1, .check-list li h1 { font-size: 18px; }
  .check-list li h1 { font-size: 22px; }

  /* E5: buttons at small mobile */
  .btn { font-size: 20px; padding: 10px 18px; }

  /* E6: program card spacing */
  .program-card { margin-top: 20px; }
  .program-card:first-child { margin-top: 0; }

  /* E7: section negative-margin reset (defensive) */
  .value-strip, .programs { margin-left: 0 !important; margin-right: 0 !important; }

  /* E8: hero bg position on small mobile */
  .hero-bg { object-position: left center; }

  /* Value strip stacks on mobile to fit narrow viewport */
  .value-grid, .value-list { flex-direction: column; gap: 12px; }
  .value-grid { gap: 16px; }
}

/* E10: prefers-reduced-motion + tablet+animation kill */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (max-width: 1024px) {
  *, *::before, *::after { animation: none !important; }
}
/* Honor reduced-motion for the CTA elevate keyframe as well */
@media (prefers-reduced-motion: reduce) {
  .btn:hover { animation: none !important; transform: none !important; box-shadow: none !important; }
}
/* DEV_HOT_RELOAD_PROBE_DO_NOT_COMMIT */