/* Responsive layer — hand-written, not part of the compiled export.
   The 1440px desktop layout in style.css is the reference and is not
   touched here. Everything below only applies at narrower widths.

   Breakpoints:
     <= 1024px   tablet   (verified at 768px)
     <=  560px   phone    (verified at 390px)

   Class names (s1, s5, s13 ...) come from the compiler; each one is the
   original element's inline style from the export. The comments say which
   element each rule belongs to. */

/* The export pinned the page open at desktop width. Removing that is what
   lets the layout narrow at all; at 1440px and above it changes nothing. */
.s1 { min-width: 0; }


/* ============================ tablet, <= 1024px ======================== */
@media (max-width: 1024px) {

  /* header: the five text links do not fit once the bar narrows, so the bar
     keeps the logo and the call to action only. */
  .s5 { margin: 20px 24px 0; padding: 12px 12px 12px 24px; }
  .s8 { gap: 0; }
  .s8 .s9 { display: none; }

  /* section padding: 88px side gutters down to 40px */
  .s11, .s19 { padding: 72px 40px 0; }
  .s25, .s39 { padding: 88px 40px 0; }
  .s29 { padding: 96px 40px 0; }
  .s96 { padding: 100px 40px 0; }
  .s102 { padding: 88px 40px 48px; }

  /* headings */
  .s13 { font-size: 64px; }                    /* hero h1 */
  .s27 { font-size: 46px; }                    /* systems and psychology */
  .s34 { font-size: 40px; }                    /* Jake Solomon */
  .s40 { font-size: 52px; }                    /* Case Studies */
  .s57, .s70 { font-size: 44px; }              /* Testimonials, Three Mandates, The Install */
  .s81 { font-size: 40px; }                    /* How Engagements Start, Sales Training */
  .s93 { font-size: 34px; }                    /* Speaking */
  .s97 { font-size: 54px; }                    /* Ready to Stop Being the Engine */
  .s15, .s83, .s90 { font-size: 18px; }        /* the largest body copy */

  /* stat strip: four across becomes two by two */
  .s20 { grid-template-columns: repeat(2, 1fr); }

  /* two-column text blocks stack */
  .s26 { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .s68 { grid-template-columns: 1fr; gap: 40px; }
  .s69 { position: static; }                   /* sticky column has nothing to stick beside */

  /* founder card: portrait above the copy */
  .s30 { grid-template-columns: 1fr; gap: 32px; }
  .s31 { height: 420px; }
  .s32 { padding-right: 0; }

  /* card grids go to one column: three across is unreadable at this width */
  .s42, .s58 { grid-template-columns: 1fr; }

  /* engagements panel */
  .s80 { padding: 44px 40px; }

  /* speaking bar: heading, copy, button stack */
  .s92 { grid-template-columns: 1fr; gap: 28px; padding: 40px 36px; }
  .s95 { justify-self: start; }

  /* footer */
  .s104 { flex-direction: column; align-items: flex-start; gap: 24px; }
}


/* ============================= phone, <= 560px ========================= */
@media (max-width: 560px) {

  /* header */
  .s5 { margin: 12px 12px 0; padding: 9px 9px 9px 18px; top: 12px; }
  .s7 { font-size: 18px; }                     /* REVKEEL wordmark */
  .s10 { font-size: 14px; padding: 11px 18px; }

  /* section padding: 20px side gutters */
  .s11, .s19 { padding: 52px 20px 0; }
  .s25, .s39 { padding: 64px 20px 0; }
  .s29 { padding: 72px 20px 0; }
  .s96 { padding: 76px 20px 0; }
  .s102 { padding: 64px 20px 40px; }

  /* headings */
  .s13 { font-size: 40px; max-width: none; margin-top: 28px; }
  .s27 { font-size: 32px; }
  .s34 { font-size: 34px; }
  .s40 { font-size: 38px; }
  .s57, .s70 { font-size: 32px; }
  .s81 { font-size: 30px; }
  .s93 { font-size: 28px; }
  .s97 { font-size: 38px; max-width: none; }
  .s76, .s86 { font-size: 24px; }              /* phase names, mandate headings */
  .s50 { font-size: 24px; }                    /* case study headlines */

  /* body copy and eyebrow badges */
  .s12 { font-size: 12px; letter-spacing: 0.12em; padding: 9px 18px; }
  .s15, .s41, .s98 { font-size: 17px; }
  .s83, .s90 { font-size: 17px; }

  /* buttons: the desktop padding is wider than a 390px screen */
  .s17 { font-size: 17px; padding: 18px 32px; }
  .s84, .s91 { font-size: 16px; padding: 16px 30px; }
  .s95 { font-size: 15px; padding: 15px 26px; white-space: normal; }

  /* stat strip: one per row */
  .s20 { grid-template-columns: 1fr; }
  .s21 { padding: 32px 26px; }

  /* founder card */
  .s30 { padding: 14px; gap: 26px; }
  .s31 { height: 320px; }

  /* case study cards: chart box and the three figures under it stay in
     their desktop arrangement, just smaller */
  .s43 { padding: 16px 16px 28px; }
  .s44 { padding: 16px 14px; }
  .s53 { font-size: 21px; }
  .s52 { gap: 12px; }

  /* testimonial cards */
  .s59, .s67 { padding: 28px 24px; }
  .s61 { font-size: 13px; }

  /* the four-phase timeline: numbered circles sit in the left margin, so the
     indent and the circles shrink together to keep them aligned */
  .s72 { padding-left: 60px; }
  .s73 { left: 21px; }
  .s75 { left: -60px; width: 44px; height: 44px; font-size: 15px; }

  /* panels */
  .s80 { padding: 32px 22px; }
  .s85 { padding: 32px 24px; }
  .s92 { padding: 32px 24px; }
}