/* ============================================================
   responsive.css — shared mobile (≤375) + tablet (≤768) layer
   Linked into every page AFTER its inline <style> block.
   The header chrome / base styles are duplicated per-page; this
   file centralises the small-screen behaviour and the mobile nav.
   ============================================================ */

/* ----------------------------------------------------------
   1. MOBILE NAVIGATION PANEL  (Header lives in page.jsx)
   The hamburger appears ≤900px (per each page's inline @media).
   ---------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  top: 56px;                 /* header height ≤900px */
  left: 0; right: 0;
  z-index: 49;
  background: #050505;
  border-bottom: 1px solid var(--border);
  padding: 6px clamp(20px, 5vw, 44px) 30px;
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out),
              transform 240ms var(--ease-out),
              visibility 0s linear 260ms;
}
.mobile-menu.open {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms var(--ease-out),
              transform 240ms var(--ease-out),
              visibility 0s;
}
.mobile-menu-inner { display: flex; flex-direction: column; }
.mobile-menu-inner > a,
.mobile-menu-inner > .mm-row > a {
  display: block;
  padding: 16px 2px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color 150ms var(--ease-out);
}
.mobile-menu-inner > a {
  border-bottom: 1px solid rgba(255, 250, 238, 0.07);
}
.mobile-menu-inner > a:hover,
.mobile-menu-inner > a:active,
.mobile-menu-inner > .mm-row > a:hover,
.mobile-menu-inner > .mm-row > a:active { color: var(--accent); }
/* Analysis row: label + caret toggle on the right */
.mm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 250, 238, 0.07);
}
.mm-row > a { flex: 1; }
.mm-caret {
  flex: 0 0 auto;
  width: 48px;
  align-self: stretch;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg-dim);
  -webkit-tap-highlight-color: transparent;
}
.mm-caret:hover, .mm-caret:active { color: var(--accent); }
.mm-caret .caret {
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 220ms var(--ease-out);
}
.mm-caret.open .caret {
  transform: rotate(-135deg) translate(-1px, -1px);
}
.mm-sub {
  display: flex;
  flex-direction: column;
  padding: 0 0 0 16px;
  margin: 0 0 0 2px;
  border-left: 1px solid var(--border-gold-soft);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 280ms var(--ease-out),
              opacity 200ms var(--ease-out),
              padding 280ms var(--ease-out),
              margin 280ms var(--ease-out);
}
.mm-sub.open {
  max-height: 160px;
  opacity: 1;
  padding: 2px 0 8px 16px;
  margin: 2px 0 6px 2px;
}
.mm-sub a {
  padding: 11px 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fg-dim);
}
.mm-sub a:hover,
.mm-sub a:active { color: var(--accent); }
.mobile-menu-inner .mm-join {
  margin-top: 22px;
  width: 100%;
  height: 52px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Hamburger → X */
.mobile-toggle span,
.mobile-toggle span::before,
.mobile-toggle span::after {
  transition: transform 220ms var(--ease-out),
              top 220ms var(--ease-out),
              background 160ms var(--ease-out);
}
.mobile-toggle.open span { background: transparent !important; }
.mobile-toggle.open span::before { top: 0 !important; transform: rotate(45deg); }
.mobile-toggle.open span::after  { top: 0 !important; transform: rotate(-45deg); }

/* The panel only exists on small screens */
@media (min-width: 901px) {
  .mobile-menu { display: none; }
}

/* Mobile header balance — the horizontal logo is ~11:1, so at 22px tall it
   renders ~240px wide and crushed the Join pill (clipping the "J"). Shrink
   it on small screens so Join + toggle always keep their full width. */
@media (max-width: 900px) {
  .header .brand img {
    height: 18.5px !important;   /* +15% (was 16px) */
    width: auto !important;
    max-width: none;
  }
  .header > .header-inner > .btn-gold {
    padding: 0 13px !important;  /* narrower (was 16px) */
    min-width: 60px;             /* was 72px */
    flex: 0 0 auto;
    /* .nav is display:none here, so it drops out of the grid and Join
       would otherwise fall into the 1fr column and stretch full-width.
       Pin it to the end so it stays a compact pill beside the toggle. */
    justify-self: end;
  }
}
@media (max-width: 360px) {
  .header .brand img { height: 16px !important; }  /* +15% (was 14px) */
}

/* Hero kicker — the section label + accent line sits on its OWN row,
   directly above and left-aligned with the heading (was inline next to the
   breadcrumb). Making the breadcrumb a full-width block drops the following
   eyebrow-tag onto its own line. Unified across every sub-page hero. */
.pl-hero .breadcrumb,
.ta-hero .breadcrumb { display: flex; flex-wrap: wrap; }

/* ----------------------------------------------------------
   2. HOMEPAGE — collapse the inline-styled two-column grids.
   Section grids set grid-template-columns / gap as inline
   styles, which beat plain media-query rules — so !important.
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    align-items: stretch !important;
  }
  /* non-media two-cols (Founder, Contact): stack in natural DOM order */
  .two-col.reverse:not(:has(.sec-visual)) > :first-child,
  .two-col.reverse:not(:has(.sec-visual)) > :last-child { order: 0 !important; }

  /* ---- Media sections (Technical / Fundamental / Research / Community /
     Education): on mobile the reading order becomes
       1 section title · 2 heading · 3 picture · 4 description · 5 rest
     The eyebrow / heading / description live bundled in one wrapper div, so
     we flatten the text column (.stack-md) AND that wrapper with
     display:contents — every piece then becomes a flex item of .two-col and
     can be re-ordered individually. */
  .two-col:has(.sec-visual) {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .two-col:has(.sec-visual) .stack-md,
  .two-col:has(.sec-visual) .stack-md > div:first-child { display: contents; }

  .two-col:has(.sec-visual) .eyebrow-tag {
    order: 1;
    margin: 0 0 13px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .two-col:has(.sec-visual) .stack-md h2.serif {
    order: 2;
    margin: 0 0 26px !important;
    text-align: left !important;
    max-width: none !important;
  }
  .two-col:has(.sec-visual) .sec-visual {
    order: 3;
    margin: 0 0 28px !important;
    width: 100%;
  }
  .two-col:has(.sec-visual) .stack-md .lede {
    order: 4;
    margin: 0 0 24px !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
  /* everything after the head wrapper = the "rest" (lists, buttons, team) */
  .two-col:has(.sec-visual) .stack-md > *:not(:first-child) {
    order: 5;
    margin: 0 0 22px;
  }
  .two-col:has(.sec-visual) .stack-md > *:last-child { margin-bottom: 0; }

  /* the align-right variant flattened above still left-aligns its sub-bits */
  .two-col:has(.sec-visual) .stack-md.align-right .check-list li { flex-direction: row; text-align: left; }
  .two-col:has(.sec-visual) .stack-md.align-right .list-label { text-align: left; }
  .two-col:has(.sec-visual) .stack-md.align-right .row-gap-16 { justify-content: flex-start; }

  /* right-aligned narrative reads awkwardly stacked → left-align it
     (covers any non-media align-right blocks too) */
  .stack-md.align-right { align-items: flex-start; text-align: left; }
  .stack-md.align-right h2,
  .stack-md.align-right h3,
  .stack-md.align-right p,
  .stack-md.align-right .lede { margin-left: 0; }
  .stack-md.align-right .row-gap-16 { justify-content: flex-start; }
  .stack-md.align-right .check-list { width: 100%; }
  .stack-md.align-right .check-list li { flex-direction: row; text-align: left; }
  .stack-md.align-right .list-label { text-align: left; }
  .stack-md.align-right .eyebrow-tag { flex-direction: row; }
}

/* ----------------------------------------------------------
   3. HERO (carousel.jsx)
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .hero {
    min-height: 0 !important;
    padding-top: calc(56px + 30px) !important;
    padding-bottom: 28px !important;
  }

  /* Mobile reading order for the hero, treating the slider (right pane) as
     "the picture":
       1 title (eyebrow) · 2 heading · 3 slider · 4 description · 5 buttons
     Both .hero-fade wrappers flatten to display:contents so the eyebrow,
     heading, lede, buttons AND the slider all become flex items of .two-col
     and can be ordered individually. */
  .hero .two-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .hero .two-col > .hero-fade { display: contents; }

  .hero .eyebrow-tag {
    order: 1;
    margin-bottom: 14px !important;
  }
  .hero h1.serif {
    order: 2;
    margin-bottom: 26px !important;
  }
  .hero .hero-right-pane {
    order: 3;
    margin: 0 0 26px !important;
    width: 100%;
  }
  .hero .lede {
    order: 4;
    margin-bottom: 26px !important;
    max-width: none !important;
  }
  .hero .row-gap-16 {
    order: 5;
  }
}
@media (max-width: 480px) {
  .hero { padding-top: calc(56px + 22px) !important; }
  .hero .row-gap-16 { width: 100%; }
  .hero .btn-gold { width: 80% !important; height: 35px !important; font-size: 10px !important; }
}

/* ----------------------------------------------------------
   3b. CTA GOLD BUTTONS — 20% smaller on mobile (width + height).
   The gold call-to-action pills carry inline height/padding/
   font-size from JSX, so override with !important. Smaller
   font + padding shrinks the pill WIDTH ~20% too; full-width
   variants (hero CTA, mobile-menu Join) get an explicit 80%.
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .btn-gold {
    height: 35px !important;            /* 44 → 35  (≈80%) */
    padding: 0 18px !important;         /* 22 → 18 */
    font-size: 10px !important;         /* 12.5 → 10 */
    gap: 8px !important;
    letter-spacing: 0.13em !important;
  }
  .mobile-menu-inner .mm-join {
    height: 42px !important;            /* 52 → 42 */
    font-size: 10.5px !important;
    width: 80% !important;              /* include width */
  }
}

/* ----------------------------------------------------------
   3c. SECTION SEPARATORS (ScrollGuide) — 50% shorter on mobile
   so the animated flow band doesn't eat vertical space.
   Inline height/padding from JSX → override with !important.
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .scroll-guide {
    height: 70px !important;            /* 140 → 70 */
    padding-top: 22px !important;       /* 44 → 22 */
    padding-bottom: 28px !important;    /* 56 → 28 */
  }
}

/* ----------------------------------------------------------
   4. TYPOGRAPHY — gentle cap on very small screens so big
   display sizes don't blow out the 375px viewport.
   ---------------------------------------------------------- */
@media (max-width: 420px) {
  h1.serif { font-size: clamp(29px, 8.4vw, 40px) !important; line-height: 1.1; }
  h2.serif { font-size: clamp(25px, 7.2vw, 38px) !important; line-height: 1.14; }
  .lede { font-size: 15px; }
}

/* ----------------------------------------------------------
   5. SAFETY — nothing escapes the viewport on phones.
   ---------------------------------------------------------- */
/* Clip horizontally at the root so a wide marquee / decorative
   element can never produce a horizontal scrollbar. `clip` (vs
   hidden) does not create a scroll container, so fixed/anchor
   behaviour is untouched. */
html { overflow-x: clip; }

@media (max-width: 768px) {
  img, svg, video, canvas { max-width: 100%; height: auto; }
  .section { padding-top: clamp(40px, 9vw, 64px); padding-bottom: clamp(40px, 9vw, 64px); }
}

/* ----------------------------------------------------------
   6. TABLET  (600–900px)
   Portrait tablets inherit the mobile single-column structure
   and the hamburger nav (both correct at this width) — but they
   should NOT inherit the phone-scale sizing. This band layers on
   top to undo the phone shrink: full-size buttons, a comfortable
   reading measure so body copy doesn't run edge-to-edge, and a
   slightly more generous section rhythm than a phone.
   ---------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 900px) {
  /* Buttons back to full size (override the ≤900 phone shrink) */
  .btn-gold {
    height: 44px !important;
    padding: 0 22px !important;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    gap: 10px !important;
  }
  /* …but keep the hero CTA from going full-bleed */
  .hero .btn-gold { width: auto !important; }

  /* Comfortable reading measure — cap line length. Matches the
     mobile selectors exactly so source order (this block is later)
     wins the !important tie within 600–900px. */
  .lede,
  .hero .lede,
  .two-col:has(.sec-visual) .stack-md .lede {
    max-width: 62ch !important;
  }

  /* Section separators: between the phone (70px) and desktop (140px) */
  .scroll-guide {
    height: 104px !important;
    padding-top: 34px !important;
    padding-bottom: 42px !important;
  }
}

/* ----------------------------------------------------------
   7. SUB-PAGE HERO IMAGE ORDER (mobile + tablet)
   Unify with the homepage: wherever a section pairs a heading,
   a photo and body copy in a two-column hero, the photo sits
   BETWEEN the heading and the text once the columns stack —
   never below the copy. Mirrors the homepage technique:
   flex-column the grid, promote the copy wrapper with
   display:contents, then order each piece individually.
   Applied at each grid's own stack breakpoint.
   ---------------------------------------------------------- */
/* Education hero + Research hero (both stack ≤940) */
@media (max-width: 940px) {
  .ed-hero-grid,
  .rs-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .ed-hero-grid > div:first-child,
  .rs-hero-grid > div:first-child { display: contents; }

  .ed-hero-grid .eyebrow-tag,
  .rs-hero-grid .eyebrow-tag { order: 1; margin: 0 0 14px !important; }
  .ed-hero-grid h1.serif,
  .rs-hero-grid h1.serif { order: 2; margin: 0 0 24px !important; }
  .ed-hero-visual,
  .rs-hero-visual { order: 3; margin: 0 0 28px !important; width: 100%; }
  .ed-hero-grid .lede,
  .rs-hero-grid .lede { order: 4; margin: 0 0 24px !important; }
  .ed-hero-cta { order: 5; margin: 0 !important; }
}
/* Fundamental Analysis hero (stacks ≤880; eyebrow sits above the grid) */
@media (max-width: 880px) {
  .fa-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .fa-hero-text { display: contents; }
  .fa-hero-text h1.serif { order: 1; margin: 0 0 24px !important; }
  .fa-hero-visual { order: 2; margin: 0 0 28px !important; width: 100%; }
  .fa-hero-text .lede { order: 3; margin: 0 !important; }
}
/* Research "Why read it" block — the document image is the FIRST grid
   child, so stacking would drop it ABOVE the heading. Reorder to the
   shared pattern: eyebrow → heading → image → text. (Stacks ≤860.) */
@media (max-width: 860px) {
  .rs-value-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .rs-value-head { display: contents; }
  .rs-value-head .eyebrow-tag { order: 1; margin: 0 0 14px !important; }
  .rs-value-head h2.serif { order: 2; margin: 0 0 24px 0 !important; }
  .rs-value-doc { order: 3; margin: 0 0 28px !important; }
  .rs-value-head .lede { order: 4; margin: 0 !important; }
}
/* Community hero — on mobile/tablet the live-chat panel sits BETWEEN the
   heading and the body copy (mirrors the homepage image placement),
   instead of dropping below all the copy. Stacks ≤940. */
@media (max-width: 940px) {
  .cm-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .cm-hero-grid > div:first-child { display: contents; }
  .cm-hero-grid .eyebrow-tag { order: 1; margin: 0 0 14px !important; }
  .cm-hero-grid h1.serif { order: 2; margin: 0 0 24px !important; }
  .cm-hero-grid .cm-chat { order: 3; margin: 0 0 28px !important; }
  .cm-hero-grid .lede { order: 4; margin: 0 0 24px !important; max-width: 62ch !important; }
  .cm-hero-grid .cm-hero-cta { order: 5; margin: 0 !important; }
}