/* responsive.css — the site's shared mobile layer.
 *
 * Linked LAST in every page's <head>, after that page's inline <style>, so these
 * rules win on source order without needing !important. Selectors are copied
 * verbatim from the page stylesheets so specificity matches exactly.
 *
 * Generated from a scan of every grid in the site; regenerate rather than
 * hand-patching a single page, so the behaviour cannot drift between pages.
 */

/* ---------- 1. Nothing may exceed the viewport ---------- */
@media (max-width: 860px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
  /* Grid and flex children default to min-width:auto, which refuses to shrink
     below their content and is the usual cause of horizontal overflow. */
  *, *::before, *::after { min-width: 0; }
  /* Long unbroken strings (URLs, emails) must not push the page wide.
     Deliberately `break-word`, not `anywhere`: `anywhere` also shrinks an
     element's min-content width, which collapsed small chips like the "04"
     section numerals and broke them between digits. */
  p, li, h1, h2, h3, h4, h5, td, th, a, span { overflow-wrap: break-word; }
  /* Tables fit rather than scroll — see section 6. `display:block` here would
     disable table-layout:fixed, so tables stay real table boxes. */
  table { max-width: 100%; table-layout: fixed; width: 100%; }
}

/* ---------- 2. Multi-column layouts collapse to one column ---------- */
@media (max-width: 640px) {
.proc__grid,
.center__grid,
.story__grid,
.right__grid,
.connect__inner,
.cform__row,
.footer__top,
.intro__grid,
.proc3__grid,
.why__grid,
.ind__body,
.ind__row,
.ind__foot,
.svc__rows,
.svc__row,
.proc__intro-slide,
.mos,
.mos__grid,
.cad__rr-body,
.dev__grid,
.trk__grid,
.split,
.rep__meta,
.crit,
.crit__field,
.feat--3,
.feat--4,
.seq,
.pak__grid,
.mw__grid,
.mw__scores,
.mwprov,
.feat--3, .feat--4, .coord,
.reg,
.seq__pbody--split,
.src-split,
.recwrap,
.hitl__flow,
.feat--3, .feat--4,
.bento,
.sizing,
.dash-row,
.dash-row--rev,
#targets .sec__inner,
#criteria .crit__field,
#profiles .sec__inner,
.ov__grid,
.stages__inner,
.gs__steps,
.team__grid,
.focus__grid,
.igrid,
.prof__grid,
.contact__inner {
  grid-template-columns: 1fr;
}
}

/* ---------- 3. Dense tile grids stay multi-column, just tighter ---------- */
@media (max-width: 640px) {
.trk__fields,
.tiers,
.prof__meta,
.prof__notes,
.coord,
.mw__stats,
.seq__angrid,
.rec__fields,
.size__grid,
.tgt__stats,
#profiles .prof__meta,
#profiles .prof__notes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
}

/* ---------- 4. Logo walls: smaller logos, more per row, tight spacing ---------- */
@media (max-width: 640px) {
.cl-logos,
.mos__logos,
.logos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.cl-logos > *,
.mos__logos > *,
.logos > * {
  padding: 8px 6px;
  min-height: 0;
  border-radius: 8px;
}
.cl-logos img,
.mos__logos img,
.logos img {
  max-height: 22px;
  width: auto;
}
}
@media (max-width: 380px) {
.cl-logos,
.mos__logos,
.logos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* The home page's client wall is the one people actually read, and eight brass
   wordmarks at 23px were too timid. The real cap here is .cl-item's
   `aspect-ratio: 987/281` — the tile is only as tall as its column is wide, so
   section 4's vertical padding came straight off the logo. Drop the padding and
   raise the ceiling to get ~30px instead. Scoped to .cl-logos; the data-source
   walls stay small deliberately. */
@media (max-width: 640px) {
.cl-logos { gap: 10px; }
.cl-logos > * { padding: 0; }
.cl-logos img { max-height: 30px; }
}

/* ---------- 5. Hand-authored overrides ----------
 * Everything above was generated from a scan of every grid in the site.
 * The rules below fix specific offenders found by measuring real overflow in
 * the browser at 390px; keep them when the generated part is regenerated.
 */

@media (max-width: 640px) {
  /* Absolutely-positioned popovers are sized for a desktop cursor and escape
     their tiny anchors. Both are visibility:hidden until :hover so they never
     paint on touch, but .mwtip is also reachable by keyboard — so instead of
     hiding them, clamp the width and re-anchor to the right edge so they open
     inside the viewport. */
  .cl-bubble, .mwtip {
    max-width: calc(100vw - 28px);
    white-space: normal;
    left: auto;
    right: 0;
    transform: none;
  }

  /* Data tables keep their horizontal scroller (the readable pattern for
     tabular data) but must not demand more room than the phone has. The page
     rule sets min-width:640px, which outweighs the global min-width:0 reset. */
  .opps__tbl { min-width: 0; font-size: 11.5px; }
  .opps__tbl th, .opps__tbl td { padding: 8px 9px; white-space: normal; }
}

@media (max-width: 860px) {
  /* Section padding is desktop-scale on several pages and eats the whole
     screen on a phone. */
  .sec, .contact, .legal { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 860px) {
  /* Flex rows built from nowrap + text-overflow:ellipsis children truncate
     mid-word once the row is phone-width. Let them wrap to full width and
     stack instead of clipping. Same bug on both pages, same fix. */
  .merge { flex-direction: column; align-items: stretch; gap: 12px; }
  .merge__stack { width: 100%; }
  .merge__row {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 640px) {
  /* .join__form flips to flex-direction:column at this width, which re-points
     the input's flex-basis from width to HEIGHT — `flex: 1 1 280px` was making
     it a ~280px-tall pill. Height should come from its padding; the page rule
     already sets width:100%. */
  .join__input { flex: 0 0 auto; }
}

/* ============================================================
 * 6. Mobile fixes from the phone walkthrough
 * These come last so they win over the generated rules above.
 * ============================================================ */

/* ---- Scroll sub-header: one line, no wrap, no clipping ---- */
@media (max-width: 860px) {
  .subhead.is-on { max-height: 46px; }
  .subhead__inner { padding: 6px 20px; gap: 10px; }
  .subhead__label { min-width: 0; flex: 1 1 auto; gap: 9px; }
  .subhead__pg {
    font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* The CTA wrapped to three lines and pushed the title out of the bar. It is
     redundant on a phone — the drawer and the page's own form both cover it. */
  .subhead__cta { display: none; }
}

/* ---- How We Find: size-validation signals stay 2-up, but as real boxes ---- */
@media (max-width: 640px) {
  .size__panel { padding: 18px 15px; }
  .size__grid { gap: 10px; }
  /* icon above the text instead of beside it, so the copy gets the full card */
  .sigc { flex-direction: column; gap: 9px; padding: 14px 13px; }
  .sigc__ic { width: 30px; height: 30px; border-radius: 8px; }
  .sigc b { font-size: 13px; margin: 0 0 3px; }
  .sigc span { font-size: 11.5px; line-height: 1.42; }
}

/* ---- How We Engage: benchmark label was running through its own bar ---- */
@media (max-width: 640px) {
  .bench__top { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 7px; }
  .bench__name { font-size: 15.5px; }
  .bench__val { font-size: 11px; }
  .bench__row { padding: 10px 0; margin: 0; }
  .bench__scale { font-size: 9.5px; }
}

/* ---- Info tooltips are pointer affordances: drop them on phones ---- */
@media (max-width: 640px) {
  .mwq, .mwtip { display: none !important; }
}

/* ---- Numbered card rows (Engage "coordination", Develop "keeping warm") ----
   These were being held at 2-up by the dense-tile rule above; they are content
   cards, so they get the full width and stack. */
@media (max-width: 640px) {
  .coord { grid-template-columns: 1fr; gap: 14px; }
  .coord__card { padding: 22px 20px; }
  .coord__card h4 { font-size: 20px; }
  .tiers { grid-template-columns: 1fr; }
}

/* ---- Data tables fit the screen: no horizontal scrollbar ----
   table-layout:fixed pins the column widths and lets the content wrap, so the
   whole table compresses instead of demanding a swipe. */
@media (max-width: 640px) {
  .opps, .opps__wrap, .mwtests { max-width: 100%; overflow-x: visible; }
  .opps__tbl, .mwtests__tbl {
    display: table; min-width: 0; width: 100%; table-layout: fixed;
  }
  .opps__tbl th, .opps__tbl td,
  .mwtests__tbl th, .mwtests__tbl td {
    white-space: normal; overflow-wrap: anywhere;
  }

  /* Latest spam tests — 4 columns */
  .mwtests { padding: 16px 13px 4px; }
  .mwtests__tbl th { font-size: 8px; letter-spacing: 0.03em; padding: 0 4px 8px; }
  .mwtests__tbl td { padding: 9px 4px; font-size: 10.5px; }
  .mwtests__tbl th:nth-child(1), .mwtests__tbl td:nth-child(1) { width: 41%; }
  .mwtests__tbl th:nth-child(2), .mwtests__tbl td:nth-child(2) { width: 17%; }
  .mwtests__tbl th:nth-child(3), .mwtests__tbl td:nth-child(3) { width: 19%; }
  .mwtests__tbl th:nth-child(4), .mwtests__tbl td:nth-child(4) { width: 23%; }
  .mwtn { font-size: 10.5px; line-height: 1.25; }
  .mwtn small { font-size: 8px; overflow-wrap: anywhere; margin-top: 3px; }
  .mwscore { font-size: 9px; padding: 3px 6px; }
  .mwago  { font-size: 8px; }
  .mwissue { font-size: 8.5px; padding: 3px 6px; gap: 3px; }
  .mwtag  { font-size: 8.5px; padding: 3px 6px; }

  /* Bi-weekly report — 7 columns cannot be legible at 390px even at tiny type
     (names break mid-word, headers stack letter-per-line). Drop the three
     lowest-value columns on phones so the rest stay readable: EBITDA (4),
     Responded (5) and NDA/DD (7). Nothing scrolls; nothing is crushed. */
  .opps__tbl th:nth-child(4), .opps__tbl td:nth-child(4),
  .opps__tbl th:nth-child(5), .opps__tbl td:nth-child(5),
  .opps__tbl th:nth-child(7), .opps__tbl td:nth-child(7) { display: none; }

  .opps__tbl th { font-size: 8px; letter-spacing: 0; padding: 0 4px 8px; }
  .opps__tbl td { padding: 10px 4px; font-size: 10px; line-height: 1.35; }
  .opps__tbl th:nth-child(1), .opps__tbl td:nth-child(1) { width: 29%; }
  .opps__tbl th:nth-child(2), .opps__tbl td:nth-child(2) { width: 24%; }
  .opps__tbl th:nth-child(3), .opps__tbl td:nth-child(3) { width: 19%; }
  .opps__tbl th:nth-child(6), .opps__tbl td:nth-child(6) { width: 28%; }
  /* break on spaces, never inside a word */
  .opps__tbl td, .opps__tbl th { overflow-wrap: normal; word-break: normal; hyphens: none; }
  /* keep money on one line */
  .opps__tbl td:nth-child(3) { white-space: nowrap; font-size: 9.5px; }
  .opps__tbl td:nth-child(1) small { font-size: 8.5px; overflow-wrap: normal; }
}

/* ---- How We Track: tier stats — drop the grey hairline grid, space them ---- */
@media (max-width: 640px) {
  .tgt__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; padding: 14px;
    background: transparent; border-bottom: 0;
  }
  .tgt__stat {
    border: 1px solid rgba(20, 61, 46, 0.12);
    border-radius: 12px; padding: 15px 14px;
  }
  .tgt__stat b { font-size: 26px; }
}

/* ---- Home: Find / Engage / Develop / Track pills ---- */
@media (max-width: 640px) {
  .proc__tabs {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 5px; padding: 5px; border-radius: 22px; width: 100%;
  }
  .proc__tab {
    font-size: 15px; padding: 8px 14px; gap: 8px;   /* numeral was touching the label */
  }
  .proc__tab .n { font-size: 10px; }
}

/* ---- Home: outreach cadence timeline ----
   .cad__track is a 940px rail with all thirteen nodes absolutely positioned
   along it, so it can't be restacked in CSS. The home page's own script emits
   the same touchpoints a second time as <ol class="cad__list">; below 640px we
   hide the rail and show the list, so nothing scrolls sideways. Hidden outside
   the media query so it never appears on desktop. */
.cad__list { display: none; }

@media (max-width: 640px) {
  .cad__scroll { display: none; }
  .cad__list { display: block; list-style: none; margin: 22px 0 0; padding: 0; }

  .cadm__item {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 9px 0;
  }
  /* Rail segment from this icon's centre down to the next one's. */
  .cadm__item::before {
    content: ""; position: absolute; z-index: 0;
    left: 18px; margin-left: -0.75px; top: 50%; height: 100%; width: 1.5px;
    background: rgba(176, 137, 76, 0.38);
  }
  .cadm__item:last-child::before { display: none; }

  .cadm__ic {
    position: relative; z-index: 1;
    flex: 0 0 auto; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--brass, #B0894C);
    background: var(--pine, #0E2A20);
  }
  .cadm__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cadm__day {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9.5px; letter-spacing: 0.08em;
    color: var(--brassDk, #8A6A34);
  }
  .cadm__name {
    font-family: var(--serif, Georgia, serif);
    font-size: 15px; font-weight: 600; line-height: 1.25;
    color: var(--forest, #143D2E);
  }
}

/* ---- Response split bar: label must sit inside its own segment ----
   The "Other replies" segment is only ~35% of a ~300px bar. The label is
   white-space:nowrap at 12px, so it ran past the bar's right edge. Let it wrap
   at a smaller size and give the bar an auto height; overflow:hidden stays on
   as a hard backstop so nothing can spill again. */
@media (max-width: 640px) {
  .rr__splitbar { height: auto; min-height: 44px; overflow: hidden; }
  .rr__seg {
    white-space: normal;
    font-size: 9.5px;
    line-height: 1.25;
    letter-spacing: 0;
    padding: 8px 8px;
    align-items: center;
  }
}

/* ---- Small numeral chips must survive the global min-width:0 reset ----
   Section 1 sets `min-width: 0` on everything so grid/flex children can shrink
   (the usual overflow fix). That also lets the flex algorithm squeeze tiny
   numeral chips below their content, which broke "04" across two lines. */
@media (max-width: 860px) {
  .kicker .n,
  .coord__n,
  .icard__num,
  .proc__tab .n,
  .navdrawer__link .n,
  .navdrawer__sublink .n,
  .stage__n,
  .gstep__n,
  .reason__n,
  .pstep__n {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
  }
}

/* ---- Diligence request tracker: status pills must fit their column ----
   .pill is white-space:nowrap inside a table-layout:fixed column with 22px of
   cell padding, so it outgrew its cell and was clipped by .reg's overflow:hidden
   at the card edge. Give the columns explicit widths, trim the padding and
   shrink the pill so it sits inside its cell. */
@media (max-width: 640px) {
  .reg table { font-size: 12px; }
  .reg th, .reg td { padding: 10px 9px; }
  .reg th:nth-child(1), .reg td:nth-child(1) { width: 41%; }
  .reg th:nth-child(2), .reg td:nth-child(2) { width: 25%; }
  .reg th:nth-child(3), .reg td:nth-child(3) { width: 34%; }
  .reg td, .reg th { overflow-wrap: normal; word-break: normal; }

  .pill { font-size: 9.5px; padding: 3px 8px; gap: 5px; }
  .pill::before { width: 5px; height: 5px; }
  /* the hover nudge would push it back out of the cell */
  .reg tbody tr:hover .pill { transform: none; }
}
