/* ==========================================================================
   VFORGE — MOBILE LAYER  (styles_mobile.css)   v2026-09-15a
   Loaded LAST on every page.  EVERY rule below sits inside a max-width media
   query, so desktop rendering (>=1121px) is untouched by design.

   Fixes the phone/tablet defects found by the 2026-09-15 mobile audit:
     1. HEADER (all 30 pages) — brand(258px) + CTA(213px) + hamburger(26px)
        needs 560px, so on a 360px phone the orange CTA was clipped at the right
        edge and the hamburger sat at x=534 (fully off-screen): the visitor had
        NO way to open the navigation.  CTA now lives in the mobile menu on
        phones, hamburger is a 44px tap target on the right edge.
     2. INSIGHT ARTICLES — the 8 insight-*.html pages carried no .nav-toggle /
        .mobile-menu at all, so they were unnavigable at <=980px (markup added
        separately).
     3. SOLUTIONS — the .info-table (min-width:720px) was cut off on phones;
        it now stacks into labelled cards at <=760px.
     4. CONTACT — the .split grid could not shrink below 588px (a <select>'s
        longest option is unshrinkable min-content), so it overflowed every
        viewport from 861-1119px (tablet / small laptop).  Single column there.
     5. PHONE SPACING — 136px section padding, 160px page-hero padding and
        h1 == h2 (both 37.4px) made the phone view read as one long, congested
        column.  Tightened + hierarchy restored at <=640px.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. SAFETY */
@media (max-width: 980px) {
  html, body { overflow-x: hidden; background-color: var(--verdan-green-deep); }
  body { max-width: 100%; }
  img, svg, video, iframe, table { max-width: 100%; }
  .container { width: 100%; }

  /* grid/flex children must be allowed to shrink below their min-content */
  .split > *, .card-grid-2 > *, .card-grid-3 > *, .card-grid-4 > *, .problem-grid > *,
  .flow-grid > *, .ind-grid > *, .naming-grid > *, .form-grid > *, .ev-grid > *,
  .outcome-row > *, .about-shell > * { min-width: 0; }

  /* Security & Trust panel: script.js relocates it out of the desktop-only
     .brand-stage into the hero flow on phones, so it is not lost there. */
  .hero-trust.hero-trust-inline {
    position: static; left: auto; top: auto; transform: none;
    width: 100%; max-width: 100%; margin-top: var(--space-4);
  }

  /* The mobile menu is the ONLY navigation on phones: make it scrollable and
     give every row a real tap target. */
  .mobile-menu { overflow-y: auto; -webkit-overflow-scrolling: touch;
                 padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
  .mobile-menu a { min-height: 44px; display: flex; align-items: center; }
  .mobile-menu .sub-links { display: flex; flex-direction: column; }
  .mobile-menu .sub-links a { min-height: 36px; }
  .mobile-menu-close { display: flex; align-items: center; justify-content: center;
                       width: 44px; height: 44px; font-size: 1.8rem; line-height: 1; }
}

/* ------------------------------------------------------- 2. HEADER  (phones)
   Breakpoint math: at <=640px the container's content box is <=589px, while
   brand(258) + gap(51) + CTA(213..265) + toggle(26) needs 560-575px — the CTA
   simply cannot coexist with the logo and a usable hamburger. */
@media (max-width: 640px) {
  .nav-inner { gap: 10px; }
  .nav-cta { gap: 0; }
  .nav-cta .btn-primary { display: none !important; }      /* CTA is in the mobile menu */
  .nav-toggle {
    display: flex !important; flex: 0 0 auto; margin-left: auto;
    width: 44px; height: 44px; padding: 13px 9px; gap: 5px;
  }
  .nav-toggle span { width: 100%; }
  .site-header { padding: 0.35rem 0; min-height: 62px; }
  .brand-mark { gap: 0.55em; }
  .brand-mark img { height: 36px; width: 36px; }
  .nav-logo-word { font-size: 1.18rem; }

  /* mobile menu typography so all rows fit a phone screen */
  .mobile-menu { padding: var(--space-3); gap: var(--space-2); }
  .mobile-menu a { font-size: 1.25rem; }
  .mobile-menu .sub-links a { font-size: 0.95rem; }
}
@media (max-width: 360px) {
  .brand-mark img { height: 30px; width: 30px; }
  .nav-logo-word { font-size: 1.05rem; }
  .nav-toggle { width: 40px; height: 40px; padding: 11px 8px; }
}

/* ------------------------------------------- 3. PHONE SPACING + TYPE HIERARCHY */
@media (max-width: 640px) {
  section { padding: var(--space-5) 0; }          /* was var(--space-7) = 136px */
  .section-compact { padding: var(--space-4) 0; }
  .is-slide { min-height: auto; padding: var(--space-5) 0; }
  .section-head { margin-bottom: var(--space-3); }
  .hero { padding-top: 96px; min-height: auto; }
  .page-hero { padding-top: 104px; padding-bottom: var(--space-5); }

  /* h1 == h2 (37.4px each) on phones: restore an actual hierarchy */
  h1 { font-size: clamp(1.75rem, 7.6vw, 2rem) !important; }
  h2 { font-size: clamp(1.35rem, 5.8vw, 1.65rem) !important; }
  h3 { font-size: 1.15rem !important; }
  .lede { font-size: 1rem !important; }

  /* cookie notice was 234px tall on a 390px phone — quarter of the screen */
  .cookie-notice { padding: var(--space-2) 0; }
  .cookie-notice .container { gap: var(--space-2); }
  .cookie-notice p { font-size: 0.8rem; max-width: 100%; }
  .cookie-notice .btn { flex: 1 1 100%; padding: 0.6em 1em; text-align: center; }
}

/* ------------------------------------- 4. CONTACT — grid that could not shrink */
@media (max-width: 1120px) {
  .split-form { grid-template-columns: minmax(0, 1fr) !important; }
  .split-form > * { min-width: 0; }
  .field, .field input, .field select, .field textarea { min-width: 0; }
  .field select { width: 100%; max-width: 100%; }
}
@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr !important; }
}

/* --------------------- 5b. DEFENSIVE: legacy `.nav-logo` header (all widths)
   Three insight pages carried a legacy brand block (`.nav-logo` instead of
   `.brand`/`.brand-mark`) with no rule for its <img>, so the 1024x1024 icon
   rendered at FULL size: a 585px logo inside a 632px-tall fixed header that
   covered the article's breadcrumb and h1 (measured 2026-09-15, desktop AND
   phone). The markup is normalised site-wide; this keeps it from returning.
   Matches nothing now, so desktop rendering is unaffected. */
.nav-logo { display: flex; align-items: center; gap: 0.7em; text-decoration: none; }
.nav-logo img { height: 44px; width: 44px; object-fit: contain; display: block; }
@media (max-width: 640px) { .nav-logo img { height: 36px; width: 36px; } }

/* --------------------------------------- 5. SOLUTIONS — comparison table stacks */
@media (max-width: 760px) {
  .info-table { min-width: 0 !important; width: 100%; display: block; }
  .info-table tbody, .info-table tr, .info-table td { display: block; width: auto !important; }
  .info-table tr {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--parchment-line);
    border-left: 3px solid var(--copper-flare);
    border-radius: var(--radius-md);
    background: var(--white);
  }
  .info-table tr:last-child { margin-bottom: 0; }
  .info-table td { padding: 0; }
  .info-table td:first-child { width: auto; padding: 0 0 0.4rem; font-size: 0.82rem; letter-spacing: 0.04em; }
  .info-table td:last-child { font-size: 0.95rem; }
}

/* ------------------------------------ 6. TABLET (641-980px) micro adjustments */
@media (max-width: 980px) and (min-width: 641px) {
  section { padding: var(--space-6) 0; }          /* 136px -> 85px */
  .page-hero { padding-top: 140px; }
  .hero { padding-top: 124px; }
}

/* ------------------------------------------- 7. VERY NARROW PHONES (<=480px)
   Pill buttons are nowrap by design; on a 320-360px phone the longer labels
   ("See industry-specific detail →", "Book a Diagnostic Call →") were clipped
   off the right edge. Let them wrap / go full width instead. */
@media (max-width: 480px) {
  .btn { white-space: normal; max-width: 100%; justify-content: center; text-align: center; line-height: 1.25; }
  .hero-ctas .btn,
  .cta-band .btn,
  .naming-card .btn,
  .fact-mini .btn,
  .case-trust-note .btn { width: 100%; }
  .fact-mini > * { min-width: 0; }
  /* bare email/URL links must be able to break inside their box */
  .f-value, .f-value a,
  .fact-mini a, .fact-mini span,
  .contact-facts a, .contact-facts span,
  .case-trust-note a, .footer-col a, .cookie-notice a {
    overflow-wrap: anywhere; word-break: break-word; min-width: 0;
  }
}

/* ------------------------------- 8. EVIDENCE / CASE-STUDY page patterns ----- */
@media (max-width: 980px) {
  .ev-hero-grid > * { min-width: 0; }
}
@media (max-width: 760px) {
  /* .cs-snapshot is a `140px 1fr` grid (rows use display:contents). On a phone
     the value column collapsed to ~100px and pushed past the right edge, so
     stack label-over-value instead. */
  .cs-snapshot { grid-template-columns: 1fr !important; gap: 0.25rem; }
  .cs-snapshot > .cs-snap-row:first-child .cs-snap-label { margin-top: 0; }
  .cs-snap-label { padding-top: 0; margin-top: var(--space-3); }
  .cs-snap-val { font-size: 0.95rem; }
  .case-hero { padding: var(--space-5) 0 var(--space-4); }
}

/* ==========================================================================
   VFORGE — MOBILE REFINEMENT PASS   v2026-09-24a
   Fixes reported from the phone view (2026-09-24):
     1. "Book a Diagnostic" was unreachable while scrolling: the header CTA was
        display:none at <=640px. Restored as a COMPACT header CTA. The full-size
        one genuinely cannot fit — the brand mark alone measures 202px inside a
        375px .nav-inner, leaving no room for CTA + hamburger.
     2. Labels set at 0.62-0.72rem (10.5-11.6px) were unreadable on a phone.
        Floored at ~0.79rem (12.6px) and given more contrast.
     3. .ind-graph is a decorative graphic sitting BEHIND section text at
        opacity .7; its lines crossed the heading/lede. Made quieter on phones.
     4. The cookie notice was low-contrast text on a translucent dark panel.
   EVERY rule below sits inside a max-width media query, so desktop (>=1121px)
   is untouched by construction. Loaded last on every page, so it wins ties.
   ========================================================================== */

/* ---- 1. compact header CTA on phones (was display:none) ------------------ */
@media (max-width: 640px) {
  .nav-inner { gap: 8px; }
  .brand-mark { gap: 0.45em; }
  .nav-logo-word { font-size: 0.98rem !important; letter-spacing: -0.01em; }
  .nav-cta { gap: 0; }
  .nav-cta .btn-primary {
    display: inline-flex !important;
    align-items: center;
    font-size: 0.7rem !important;
    line-height: 1.15;
    padding: 0.5em 0.7em !important;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }
  .nav-cta .btn-primary .btn-arrow { display: none !important; }
  .nav-toggle {
    display: flex !important; flex: 0 0 auto; margin-left: auto;
    width: 40px; height: 40px; padding: 11px 8px;
  }
}

/* narrow phones: icon-only brand so the CTA keeps a full-size tap target */
@media (max-width: 430px) {
  .nav-logo-word { display: none !important; }
  .brand-mark { gap: 0; }
  .nav-cta .btn-primary { font-size: 0.74rem !important; padding: 0.5em 0.75em !important; }
}

/* ---- 2. phone-readable minimum type (was 10.5-11.6px) -------------------- */
@media (max-width: 640px) {
  .xp-tag { font-size: 0.79rem; color: rgba(244, 239, 228, 0.92); }
  .xp-fig span { font-size: 0.79rem; color: rgba(244, 239, 228, 0.92); }
  .j-label { font-size: 0.79rem; color: rgba(244, 239, 228, 0.95); }
  .trust-title { font-size: 0.79rem; }
  .footer-bottom .legal-flag { font-size: 0.78rem; }
  .case-study-card .cs-sector { font-size: 0.79rem; }
}

/* ---- 3. decorative graphic behind section text: keep it decorative ------- */
@media (max-width: 980px) {
  .ind-graph { opacity: 0.22; }
}

/* ---- 4. cookie notice legibility ---------------------------------------- */
@media (max-width: 640px) {
  .cookie-notice { background: rgba(9, 34, 24, 0.96); }
  .cookie-notice p { font-size: 0.82rem; color: rgba(244, 239, 228, 0.95); }
  .cookie-notice .btn { font-size: 0.82rem; }
}

/* ---- 5. follow-up: stubborn labels + the least-contrast text on the page --
   .hero-trust .trust-title needed TWO classes to out-specify styles_fixes.css.
   .fn sat at 12.2px in rgb(181,80,46) - dark copper on dark green, the worst
   contrast measured anywhere on the phone view. Lightened to the brand's
   copper-flare token (rgb(201,123,74)) and lifted to a readable size. */
@media (max-width: 640px) {
  .hero-trust .trust-title { font-size: 0.82rem; }
  .fn { font-size: 0.82rem; color: var(--copper-flare); }
  .P { font-size: 0.82rem; color: rgba(244, 239, 228, 0.92); }
}

/* ---- 6. final specificity pass -----------------------------------------
   .fn is defined as `.flow-card .fn` (TWO classes) in styles.css:670, so a
   single-class override never wins. Matched at the same specificity here -
   this file loads fifth, so the tie resolves to these later-positioned rules.
   The .fn colour (var(--forge-ember) = rgb(181,80,46)) was the lowest-contrast
   text measured on the phone view: dark copper on dark green. */
@media (max-width: 640px) {
  .flow-card .fn { font-size: 0.82rem; color: var(--copper-flare); }
  .hero-trust .P { font-size: 0.84rem; color: rgba(244, 239, 228, 0.92); }
}

/* ---- 7. last stubborn label (body copy in the trust card) ---------------
   .P kept resolving to 12.2px through three specificity attempts, so its rule
   is ancestor-qualified somewhere later in the cascade. Scoped to body with
   !important - contained entirely inside this phone-only query, and it only
   touches size + alpha of one small label. */
@media (max-width: 640px) {
  body .P { font-size: 0.86rem !important; color: rgba(244, 239, 228, 0.95) !important; }
}

/* ---- 8. phone polish pass (founder-requested, 2026-09-24) ----------------
   (1) The last sub-12.5px text: an UNCLASSED <p> inside .trust-body
       ("In production deployments only.") at 0.72rem inherited. Targeting the
       parent class rather than a class on the <p>, which never existed.
   (2) .trust-title wrapped to TWO lines on phones: at 0.82rem with .12em
       tracking the 26-character string needs ~261px in a 234px box. Tightened
       the tracking and sizing so it sits on one line. Needs TWO classes to
       out-specify the earlier pass in this same file.
   (3) The animated brand-stage (hero's main visual, sits below the trust card)
       was clamped to a 160px floor on phones - it measured 160x169. Given the
       phones a real share of the width: 281px at 390px viewport, ~2x larger.
       Desktop is unaffected: the >=981px rules are a separate branch.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .trust-body p { font-size: 0.86rem; color: rgba(244, 239, 228, 0.95); }
  .hero-trust .trust-title { font-size: 0.78rem; letter-spacing: 0.02em; }
  .brand-stage { width: clamp(220px, 72vw, 320px); margin-top: var(--space-3); }
}

/* ---- 10. narrow the previous rule so it stops hitting .trust-title -------
   Layer 9 targeted `.hero-trust .trust-body p` with !important, but
   .trust-title is ALSO a <p> in that same container, so it inherited the
   0.86rem/1.45 and wrapped to two lines again - undoing fix (2). Excluded
   both known paragraph classes so the rule only touches the unclassed sub-line.
   (Lesson: an !important catch-all on a tag must be guarded with :not().) */
@media (max-width: 640px) {
  .hero-trust .trust-body p:not(.trust-title):not(.trust-line) {
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
    color: rgba(244, 239, 228, 0.95) !important;
  }
}