/* c.mobile.css — responsive/@media rules for Direction C.
   Loaded AFTER c.css so these overrides win at narrow widths. */
@media (max-width: 980px) {
  .c-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .c-hero-r { max-width: 440px; }
  .c-hero h1 { font-size: 40px; }
  .c-svc-grid { grid-template-columns: 1fr; }
  .c-work { grid-template-columns: 1fr; }
  .c-cta-grid { grid-template-columns: 1fr; }
  .c-cta-l { border-right: 0; border-bottom: 1px solid var(--line); }
  .c-work-l { border-right: 0; border-bottom: 1px solid var(--line); }
  .c-burger { display: flex; }
  .c-navmenu { position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    display: none; z-index: 20; }
  body.nav-open .c-navmenu { display: flex; }
  .c-navlinks { flex-direction: column; gap: 0; }
  .c-navlinks a { padding: 16px 48px; border-top: 1px solid var(--line-2); }
}
@media (max-width: 640px) {
  .c-nav, .c-hero-in, .c-sec-head, .c-intro, .c-work-l, .c-work-r,
  .c-post, .c-cta-l, .c-cta-r, .c-foot {
    padding-left: 24px;
    padding-right: 24px;
  }
  .c-svc-grid { padding: 24px; gap: 16px; }
  .c-founder-in { grid-template-columns: auto 1fr; gap: 20px; padding: 28px 24px; }
  .c-founder-sig { grid-column: 1 / -1; }
  .c-hero-in { padding-top: 40px; padding-bottom: 36px; gap: 28px; }
  .c-hero-r { max-width: 300px; margin: 0 auto; }
  .c-hero h1 { font-size: 34px; margin-top: 16px; }
  .cta-block { margin-top: 24px; }
  .c-strip { flex-direction: column; }
  .c-strip .si { border-right: 0; border-bottom: 1px solid var(--line); }
  .c-post { grid-template-columns: 1fr auto; gap: 12px 20px; padding: 28px 24px; }
  .c-post-no { display: none; }
  .c-foot { flex-direction: column; gap: 24px; align-items: flex-start; }
  /* Stacked: no brand line to align to, and a 365px copyright cannot
     stay on one line inside a phone column. */
  .c-foot-brand { white-space: normal; }
  .c-foot-links { gap: 20px; padding-top: 0; }
  .c-sec-head { flex-direction: column; align-items: flex-start;
    gap: 10px; }
  .c-sec-head .sh-r { white-space: normal; }
}

/* multi-page responsive */
@media (max-width: 980px) {
  .c-proc { grid-template-columns: repeat(2,1fr); }
  .c-trust-grid { grid-template-columns: repeat(2,1fr); }
  .c-trust-cell:nth-child(2n) { border-right: 0; }
  .c-trust-cell:nth-child(n+5) { border-bottom: 1px solid var(--line-2); }
  .c-trust-cell:nth-child(n+7) { border-bottom: 0; }
  .c-proc-step:nth-child(2) { border-right: 0; }
  .c-proc-step:nth-child(1), .c-proc-step:nth-child(2) { border-bottom: 1px solid var(--line); }
  .c-case { grid-template-columns: 1fr; }
  .c-case-l { border-right: 0; border-bottom: 1px solid var(--line); }
  .c-case.flip .c-case-r { border-right: 0; }
}
@media (max-width: 640px) {
  .c-page-head { padding: 44px 24px 32px; }
  .c-viewall { padding: 24px; }
  .c-viewall .va-label { font-size: 17px; }
  .c-svc-row { padding: 22px 24px; gap: 18px; }
  .c-proc { grid-template-columns: 1fr; }
  .c-trust-head { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .c-trust-cell { padding: 20px 24px; }
  .c-proc-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .c-proc-step:last-child { border-bottom: 0; }
  .c-case-l, .c-case-r { padding: 28px 24px; }
  .c-case-l :is(h2,h3) { font-size: 25px; }
  .c-cta-band { padding: 44px 24px; }
  .c-cta-band h2 { font-size: 32px; }
}

/* ── System_Architecture figure ─────────────────────────────────────
   The SVG scales to about 0.7 on a phone, which drops its 15px labels
   to roughly 10px. Below 640px the same five nodes render as real rows
   instead, at full size. Exactly one of the two is displayed, so the
   hidden one leaves the accessibility tree with it. */
.c-bp-rows { display: none; }

@media (max-width: 639.98px) {
  .c-bp-svg { display: none; }
  /* The caption and the figure number met with no space between them
     on a phone: space-between has nothing to distribute once the two
     labels fill the row. Tighter tracking buys back the gap. */
  .c-bp-head {
    gap: 10px;
    letter-spacing: .06em;
  }
  /* The figure number is one token; wrapping it strands the closing
     bracket on a line of its own. */
  .c-bp-head > span + span { white-space: nowrap; }
  .c-bp-rows {
    display: block;
    margin: 0;
    padding: 14px;
    list-style: none;
  }
  .c-bp-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    gap: 2px 12px;
    min-height: 64px;
    padding: 16px;
    border: 1px solid var(--line);
    box-sizing: border-box;
  }
  /* The index sits above the pair, spanning both columns. */
  .c-bp-row .ix {
    grid-column: 1 / -1;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--muted);
  }
  .c-bp-row .nm { font-size: 15px; font-weight: 500; color: var(--ink); }
  .c-bp-row .st {
    align-self: end;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }
  /* The node the SVG highlights keeps its accent here. */
  .c-bp-row.lit { border-color: var(--blue); }
  .c-bp-row.lit .ix { color: var(--blue); }

  /* Connector: a 2px stem in the 24px gap below every row but the
     last, with a chevron at its foot. Both are pseudo-elements on the
     row itself, so the markup stays five list items and nothing else. */
  .c-bp-row:not(:last-child) { margin-bottom: 24px; }
  .c-bp-row:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 24px;
    transform: translateX(-50%);
    background: var(--line);
  }
  .c-bp-row:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(100% + 13px);
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--line);
    border-bottom: 2px solid var(--line);
    transform: translate(-50%, -50%) rotate(45deg);
  }
}