/* ============================================================
   Catalyst•Wayfare — Mobile responsive layer
   Loaded LAST so it can override page-level inline styles and the
   other CSS files. Two breakpoints:
     ≤ 880px  — phones & smaller tablets. Aggressive restack.
     ≤ 560px  — phones only. Tighter typography and padding.
   The site is fully editorial on desktop; on phones the same content
   reflows into a single readable spine. Same copy, same hierarchy,
   no separate mobile-only markup.
   ============================================================ */

/* ============================================================
   GLOBAL DEFAULTS (apply at every viewport)
   The mobile-nav script injects a .cw-hamburger button into every
   page's header regardless of viewport. Hide it by default so it
   doesn't render as default browser button chrome (a small grey
   pill that reads as a phantom hollow dot) on desktop. The mobile
   breakpoint below re-reveals it.
   ============================================================ */
.cw-hamburger { display: none; }

/* ============================================================
   ≤ 880px — TABLET / PHONE
   ============================================================ */
@media (max-width: 880px) {

  /* ---------- CONTAINER + GLOBAL PADDING ---------- */
  .cw-container,
  .cw-container--narrow,
  .cw-container--wide { padding: 0 24px; }

  /* ---------- HEADER (with hamburger) ---------- */
  .cw-header__inner {
    padding: 16px 24px;
    gap: 16px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .cw-wordmark { font-size: 15px; letter-spacing: 0.14em; }

  /* The hamburger button — injected by cw-mobile-nav.js if missing.
     Hidden on desktop, shown on mobile. */
  .cw-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    z-index: 60;
    position: relative;
  }
  .cw-hamburger__bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--cw-fg);
    transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1),
                opacity   160ms ease;
    transform-origin: center;
  }
  body.cw-mnav-open .cw-hamburger__bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  body.cw-mnav-open .cw-hamburger__bar:nth-child(2) { opacity: 0; }
  body.cw-mnav-open .cw-hamburger__bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* The inline nav becomes a dropdown sheet anchored beneath the
     sticky header. Critically, it does NOT cover the header itself
     — the hamburger button must remain visible and tappable so the
     user can close the menu. Height is content-driven, capped to
     the visible viewport so very tall lists scroll internally. */
  .cw-nav {
    position: fixed;
    top: var(--cw-nav-top, 56px);
    left: 0;
    right: 0;
    background: var(--cw-paper);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    /* Closed state: translateY(-100%) parks the panel so its bottom
       edge is exactly at `top`, i.e. flush with the bottom of the
       header. No protrusion into the header at any panel height. */
    transform: translateY(-100%);
    transition: transform 320ms cubic-bezier(0.7,0,0.3,1);
    /* Sit BELOW the header (header is z:50) so even sub-pixel rounding
       can't show the closed panel through the header. */
    z-index: 45;
    border-bottom: 1px solid var(--cw-line);
    max-height: calc(100vh - var(--cw-nav-top, 56px));
    max-height: calc(100dvh - var(--cw-nav-top, 56px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.cw-mnav-open .cw-nav {
    transform: translateY(0);
  }
  .cw-nav a {
    font-family: var(--cw-serif);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--cw-ink);
    padding: 14px 0;
    border-bottom: 0;
    width: 100%;
    border-top: 1px solid var(--cw-line-soft);
  }
  .cw-nav a:first-of-type { border-top: 1px solid var(--cw-line-soft); }
  .cw-nav a:last-of-type { border-bottom: 1px solid var(--cw-line-soft); }
  .cw-nav a[aria-current="page"] { color: var(--cw-teal-900); }
  .cw-nav a[aria-current="page"]::before {
    content: '·';
    display: inline-block;
    color: var(--cw-sage);
    padding-right: 0.4em;
    font-family: var(--cw-sans);
    transform: translateY(-0.15em);
  }
  /* Body stays scroll-unlocked since the panel is a small dropdown,
     not a full-screen sheet. Tap-outside dismisses (handled in JS). */

  /* ---------- HOME PAGE HERO ---------- */
  .mk-hero { min-height: 0; }
  .mk-hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 72px 24px 64px;
    align-items: start;
  }
  .mk-hero__eyebrow { margin-bottom: 22px; font-size: 12px; gap: 10px; }
  .mk-hero__eyebrow::before { width: 20px; }
  .mk-hero h1 {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.04;
    margin-bottom: 28px;
    max-width: none;
  }
  /* Keep AI-[rotating word] on one line per line, like desktop —
     the drum must sit on the same row as the leading "AI-" so the
     hyphen reads as part of the compound word. */
  .mk-hero h1 .h1-line { white-space: nowrap; }
  .mk-hero p.lede { font-size: 18px; margin-bottom: 28px; max-width: none; }
  .mk-hero__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .mk-hero__cta .cw-btn { justify-content: space-between; width: 100%; }

  /* On mobile, drop the oversized C·W glyph entirely — the wordmark
     is already pinned in the sticky header doing the same job. The
     .mk-hero__side block collapses to just the metadata strip, which
     sits directly under the CTAs as a tight 3-row card. */
  .mk-hero__side {
    border-left: 0;
    border-top: 1px solid rgba(244,241,234,0.18);
    padding-left: 0;
    padding-top: 32px;
    margin-top: 4px;
    min-height: 0;
    gap: 0;
    justify-content: flex-start;
  }
  .mk-hero__mark { display: none; }
  .mk-hero__metadata > div {
    grid-template-columns: 76px 1fr;
    gap: 12px;
    padding: 12px 0;
  }
  .mk-hero__metadata .label { font-size: 11.5px; letter-spacing: 0.2em; }
  .mk-hero__metadata .value { font-size: 16px; }
  .mk-hero__metadata .value .sep { padding: 0 0.18em; font-size: 14px; }

  /* The rotating drum is a fixed-width inline element on desktop;
     give it room to breathe inline on phones. */
  .cw-drum { width: 7em; }
  /* The eyebrow drum holds the longer "BUILT FOR [competitive edge /
     proprietary data]" words. Needs more inline width on phones, where
     the eyebrow font is small and the drum's em is therefore small. */
  .cw-drum--eyebrow { width: 13.5em; }

  /* ---------- HOME PAGE APPROACH TILES ---------- */
  .mk-approach { grid-template-columns: 1fr 1fr; }
  .mk-tile { min-height: 0; padding: 44px 28px 48px; }
  .mk-tile .num { font-size: 44px; margin-bottom: 20px; }
  .mk-tile h3 { font-size: 24px; margin-bottom: 12px; }
  .mk-tile p { font-size: 15px; max-width: none; }

  /* ---------- HOME PAGE METHODOLOGY (mk-phases) ---------- */
  .mk-meth { padding: 80px 0; }
  .mk-meth__head { margin-bottom: 40px; }
  .mk-meth__head h2 { font-size: clamp(30px, 7.5vw, 44px); }
  .mk-meth__head .lede { font-size: 17px !important; }
  .mk-phases {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
  }
  .mk-phase--1, .mk-phase--2, .mk-phase--3 { min-height: 0; }
  .mk-phase { padding: 36px 28px 40px; }
  .mk-phase__num { font-size: 52px; margin-bottom: 20px; }
  .mk-phase h3 { font-size: 26px; }
  .mk-phase__dur { margin-bottom: 18px; }
  .mk-meth__cta { justify-content: flex-start; margin-top: 32px; }

  /* ---------- HOME PAGE FLYWHEEL ---------- */
  .mk-flywheel { padding: 56px 0 64px; }
  .mk-flywheel__grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .mk-flywheel__copy h2 { font-size: clamp(28px, 6.4vw, 38px); }
  .mk-flywheel__copy p { font-size: 16px; }
  .mk-flywheel__svg {
    max-width: 100%;
    /* Cap the wheel size on phones so it doesn't dominate the
       viewport — and so the eye sees the diagram + a node tap-tip
       together without scrolling. */
    max-width: 360px;
  }
  /* Tip popups on mobile: take them out of absolute positioning and
     let them flow as block elements directly under the SVG, so a tap
     reveals a clean inline callout without leaving a dead patch of
     whitespace when no node is selected. */
  .mk-flywheel__diagram {
    position: relative;
    padding-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .mk-fly-tip {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 16px;
    padding: 16px 18px 18px;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .mk-fly-tip.is-visible {
    display: block;
    transform: none !important;
  }
  .mk-fly-tip__body { font-size: 15px; }
  .mk-fly-tip__tag  { font-size: 16px; }

  /* ---------- HOME PAGE STUDIO STRIP ---------- */
  .mk-studio { padding: 72px 0; }
  .mk-studio__grid { grid-template-columns: 1fr; gap: 36px; }
  .mk-studio__head h2 { font-size: clamp(24px, 5.4vw, 30px); }
  .mk-studio__chips { grid-template-columns: 1fr 1fr; }
  .mk-studio__chip { padding: 22px 18px 26px; }
  .mk-studio__chip h4 { font-size: 17px; max-width: none; }
  .mk-studio__chip p { font-size: 15px; max-width: none; }

  /* ---------- HOME PAGE WHO ---------- */
  .mk-who { padding: 72px 0; }
  .mk-who__grid { grid-template-columns: 1fr; gap: 32px; }
  .mk-who h2 { font-size: clamp(28px, 7vw, 42px); margin-top: 0; }
  .mk-who__lede { font-size: 19px !important; margin-bottom: 28px; }
  .mk-who__pills {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }
  .mk-who__pill { padding: 20px 22px; }
  .mk-who__pill .k { font-size: 28px; }
  .mk-who__pill .v { font-size: 15px; }
  .mk-who__notfit { padding: 20px 22px; font-size: 14px; }

  /* ---------- HOME PAGE CLOSING CTA ---------- */
  .mk-closing { padding: 72px 0; }
  .mk-closing__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px;
    align-items: start;
  }
  .mk-closing h2 { font-size: clamp(28px, 7.5vw, 44px); }
  .mk-closing p { font-size: 16px; }

  /* ---------- GENERIC PAGE HERO (cw-phero) ---------- */
  .cw-phero__inner { padding: 64px 24px 56px; }
  .cw-phero__back { margin-bottom: 28px; font-size: 13px; }
  .cw-phero__eyebrow { margin-bottom: 22px; font-size: 12px; gap: 10px; }
  .cw-phero__eyebrow::before { width: 20px; }
  .cw-phero h1 {
    font-size: clamp(34px, 8.8vw, 56px);
    line-height: 1.05;
    margin-bottom: 22px;
  }
  .cw-phero p.lede { font-size: 18px; max-width: none; }
  .cw-phero--jd h1 { font-size: clamp(30px, 7vw, 44px); }
  .cw-phero__meta { grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 28px; }

  /* ---------- GENERIC SECTION ---------- */
  .cw-sec { padding: 64px 0; }
  .cw-sec__head { margin-bottom: 40px; }
  .cw-sec__head h2 { font-size: clamp(28px, 7vw, 42px); }
  .cw-sec__head .lede { font-size: 17px; }

  /* ---------- LEAD-IN LIST ---------- */
  .cw-leadin-list li {
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 22px 0;
  }
  .cw-leadin-list .marker { font-size: 17px; }
  .cw-leadin-list .body { font-size: 16px; }

  /* ---------- CLOSING CTA (cw-closing in pages.css) ---------- */
  .cw-closing { padding: 72px 0; }
  .cw-closing__inner { padding: 0 24px; gap: 28px; }
  .cw-closing h2 { font-size: clamp(28px, 7vw, 42px); }

  /* ---------- PEOPLE PAGE: FOUNDER ---------- */
  .mk-founder { padding: 64px 0; }
  .mk-founder__inner { grid-template-columns: 1fr; gap: 32px; }
  .mk-founder__photo { max-width: none; aspect-ratio: 4 / 5; }
  .mk-founder h3 { font-size: 28px; }
  .mk-founder p { font-size: 15.5px; }

  /* ---------- PEOPLE PAGE: LOGO WALL ---------- */
  .mk-logos { padding: 64px 0; }
  .mk-logos__head { margin-bottom: 36px; }
  .mk-logos__head h2 { font-size: clamp(26px, 6.4vw, 38px); }
  .mk-logos__head p { font-size: 16px; }
  .mk-logos__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 110px;
  }

  /* ---------- PEOPLE PAGE: CAREERS CTA ---------- */
  .pc-careers { padding: 56px 0; }
  .pc-careers h2 { font-size: clamp(26px, 6.4vw, 38px); }
  .pc-careers p { font-size: 16px; }

  /* ---------- WORK PAGE ---------- */
  .work-index__inner { padding: 18px 24px; gap: 8px 18px; }
  .work-case { padding: 64px 0 56px; }
  .work-case__head { margin-bottom: 32px; gap: 16px !important; }
  .work-case__num { font-size: 64px !important; }
  .work-case__title { font-size: clamp(28px, 7vw, 40px); }
  .work-case__intro { gap: 24px !important; margin-bottom: 48px; }
  .work-phase { padding: 28px 0 !important; }
  .work-phase__title { font-size: 22px; }
  .work-changed h3 { font-size: 22px; }
  .work-nda__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 24px;
  }
  .work-nda p { font-size: 16px; }

  /* ---------- METHODOLOGY PAGE ---------- */
  .meth-ws-grid { grid-template-columns: 1fr !important; }
  .meth-steps { grid-template-columns: 1fr 1fr !important; }

  /* ---------- CAREERS PAGE ---------- */
  .car-manifesto__inner,
  .car-work { grid-template-columns: 1fr !important; gap: 20px !important; }
  .car-fit-list { grid-template-columns: 1fr !important; }
  .car-role {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 32px 0 !important;
  }
  .car-role__arrow { justify-self: start !important; }
  .car-apply__inner { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* ---------- CONTACT PAGE ---------- */
  .cn-inboxes { grid-template-columns: 1fr !important; }
  .cn-form__grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .cn-radios { grid-template-columns: 1fr !important; }
  .cn-radio { border-right: 0 !important; border-bottom: 1px solid var(--cw-line-soft); }
  .cn-radio:last-child { border-bottom: 0; }
  .cn-presence { padding: 56px 0; }
  .cn-presence__inner { grid-template-columns: 1fr !important; gap: 20px !important; }
  .cn-cities { font-size: 17px; gap: 0 16px; }

  /* ---------- JD PAGES ---------- */
  .jd-section { padding: 56px 0 !important; }
  .jd-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .jd-apply { padding: 64px 0; }
  .jd-apply .btn-row .cw-btn { width: 100%; justify-content: space-between; }

  /* ---------- FOOTER ---------- */
  .cw-footer { padding: 40px 24px 48px; }
  .cw-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .cw-footer__col:first-child { grid-column: 1 / -1; margin-bottom: 4px; }
  .cw-footer__bottom {
    margin: 32px 24px 0;
    padding-top: 20px;
    font-size: 13.5px;
  }

  /* ---------- BUTTONS — phone-friendly sizing ---------- */
  .cw-btn { padding: 13px 18px; font-size: 16px; }
}

/* ============================================================
   ≤ 560px — PHONE-ONLY tightening
   ============================================================ */
@media (max-width: 560px) {

  /* Page padding tightens further */
  .cw-container,
  .cw-container--narrow,
  .cw-container--wide { padding: 0 20px; }
  .cw-header__inner { padding: 14px 20px; }
  .mk-hero__inner   { padding: 60px 20px 52px; }
  .cw-phero__inner  { padding: 56px 20px 48px; }
  .mk-closing__inner { padding: 0 20px; }
  .cw-footer { padding: 36px 20px 40px; }
  .cw-footer__bottom { margin: 28px 20px 0; }

  /* Header wordmark shortens visually by reducing letter-spacing
     a hair; we keep the full lockup for brand integrity. */
  .cw-wordmark { font-size: 13.5px; letter-spacing: 0.1em; }

  /* Single-column for everything that was still 2-up at 880 */
  .mk-approach { grid-template-columns: 1fr; }
  .mk-studio__chips { grid-template-columns: 1fr; }
  .mk-logos__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 110px;
  }
  .cw-phero__meta { grid-template-columns: 1fr; gap: 16px; }
  .meth-steps { grid-template-columns: 1fr !important; }
  .meth-step { border-right: 0 !important; border-bottom: 1px solid var(--cw-line-soft); }
  .cw-footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .cw-footer__col:first-child { grid-column: auto; }
  .cw-footer__bottom { flex-direction: column; gap: 8px; align-items: flex-start; }

  /* Slightly smaller hero type for the smallest phones */
  .mk-hero h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .cw-phero h1 { font-size: clamp(28px, 8.4vw, 44px); }

  /* (Flywheel tip is inline-block on mobile — no reserved space needed.) */

  /* People founder mark inside photo — scale down */
  .mk-founder__photo .mark { font-size: 96px !important; }
  .mk-founder__photo .tag { font-size: 13px !important; bottom: 14px !important; left: 18px !important; right: 18px !important; }

  /* Work index strip — break to multi-line if needed */
  .work-index__inner { flex-wrap: wrap; }

  /* Closing CTA / hero CTAs — full-width buttons */
  .mk-hero__cta .cw-btn,
  .mk-closing .cw-btn,
  .cw-closing .cw-btn { width: 100%; justify-content: space-between; }
}

/* ============================================================
   TINY-PHONE SAFETY — ≤ 380px (e.g. iPhone SE in portrait)
   Prevents any remaining overflow.
   ============================================================ */
@media (max-width: 380px) {
  .cw-wordmark { font-size: 12px; letter-spacing: 0.08em; }
  .mk-hero h1 { font-size: 26px; }
  .cw-phero h1 { font-size: 26px; }
  .mk-hero__metadata > div { grid-template-columns: 64px 1fr; gap: 10px; }
  .mk-hero__metadata .value { font-size: 15px; }
}