/* ============================================================
   home-v2-0923.css — the designer's 2026-09-18 .. 2026-09-23 passes on top
   of home-v2.css + home-v2-0811.css + wwo-popup-0922.css + home-v2-0916.css
   (What-We-Do numeral/rule colours, solid lavender CONTACT US HERE ring,
   landscape-phone mobile menu, 1440 hero tagline measure, 2560px hero
   box). Lifted verbatim from staging.cobblestonelabs.ai in her order;
   loaded LAST. Add a new dated file for her next pass rather than
   editing this one.
   ============================================================ */


/* ===== v2 block: pillars-lav-0918 ===== */

  /* 2026-09-18 14:3x (Theresa, #pbl-website-dark) — supersedes pillars-red-0918 (red too dark to read).
     What-We-Do 01/02/03 numerals -> light lavender #D9DBF4 (--text-light);
     rule lines -> horizontal gradient light lavender #D9DBF4 -> lavender #7F83A7 (--lavender), left->right.
     Loaded last, scoped to the three .ww-fac items only; overrides #qa-fixbatch-0914 `.ww-fac-num{color:#C47D6A!important}`.
     Hover (width 100%) transition untouched; gradient stretches with the element. Titles untouched. */
  #engineering .ww-fac-row .ww-fac .ww-fac-num { color: #D9DBF4 !important; }
  #engineering .ww-fac-row .ww-fac .ww-fac-rule,
  /* 2026-09-18 14:38: rule -> crimson->burgundy (#C10644 -> #4C041D) per Theresa (#pbl-website-dark); numerals stay #D9DBF4. */
  #engineering .ww-fac-row .ww-fac:hover .ww-fac-rule { background: linear-gradient(90deg, #C10644, #4C041D) !important; }


/* ===== v2 block: contact-border-0922 ===== */

  /* 2026-09-22 (Theresa, #pbl-website-dark): "CONTACT US HERE" button BORDER colour only -> #7F83A7 = var(--lavender)
     (L89). The visible 1px ring is the contact-grad-0914 ::before pseudo (animated #C10644/#4C041D gradient, masked to the
     border box); the element's own border is transparent (contact-grad-0914). Repaint that ring solid lavender and stop
     the (now invisible) warmShift animation; geometry/mask/inset untouched so the button box, text (#D9DBF4 / hover
     #9BA0C4), transparent background, hover lift and focus ring are identical. Rest and hover share one ring, so hover
     is covered too (no flicker back). Applies at every width. */
  #contact .contact-link::before { background: var(--lavender) border-box !important; animation: none !important; }


/* ===== v2 block: qa-0923-b28 ===== */

  /* 2026-09-23 b28 (Theresa QA): P2-1 landscape phones (<=500 tall) — the fixed nav (113px, z 100) covered the first two
     .mobile-menu links (z 90, centred). Start the link column below the nav and let the menu scroll. Portrait/desktop untouched. */
  @media (max-height: 500px) {
    .mobile-menu { padding-top: 113px; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  }
  /* P3-6: hero tagline 1400-1500 (1440 desktops) — cap the measure so "MEASURABLE RESULTS." drops as a pair (Chromium left
     "RESULTS." alone at 1440x900: line 2 = 752px vs 727-746px column depending on vh). Same formula as hero-cyl-0914, min 740px. */
  @media (min-width: 1400px) and (max-width: 1500px) {
    #hero .hero-sub { max-width: min(740px, max(320px, calc(var(--cyl-left) - 8vw - 24px))) !important; }
  }


/* ===== v2 block: hero-maxw-0923 ===== */

/* 2026-09-23 14:5x (Theresa, #pbl-website-dark): "hero section max-width 2560 for the whole thing including the text, image
   etc." Above 2560px the hero (photo layer + scrim + eyebrow/h1/sub/CTAs/scroll-hint) is a CENTRED 2560px box; the
   #heroeng-bg-wrap keeps its #0a0a0f background full-bleed so the flanks are plain page-dark. Photo layer (.heb-img) and
   .heb-scrim are inset to the box (left/right calc(50% - 1280px)); every 100vw/8vw/72vw term in hero-cover-0914 / hero-fold-0914
   is restated with 2560 substituted (8vw=204.8px, 72vw=1843.2px, 25.41vw=650.496px, 100vw+8px=2568px) so the box renders
   pixel-identical to a 2560-wide viewport. The Who-We-Are text (.ww-hero) shares the same photo layer, so it is boxed the
   same way (it stays left-aligned with the hero copy as before). Media query starts at 2561 => zero change at <=2560. */
@media (min-width: 2561px) {
  #heroeng-bg-wrap .heb-img,
  #heroeng-bg-wrap .heb-scrim { left: calc(50% - 1280px); right: calc(50% - 1280px); }
  #heroeng-bg-wrap .heb-img {
    background-size: max(2568px, 207.7095vh) auto;
    background-position: 72% min(0px, calc(52.78vh - 650.496px));
  }
  #hero {
    max-width: 2560px; margin-left: auto; margin-right: auto;
    padding-left: 204.8px; padding-right: 204.8px;
    --cyl-left: calc(1843.2px - 0.091 * max(2568px, 207.7095vh));
  }
  #hero .hero-sub { max-width: max(320px, calc(var(--cyl-left) - 204.8px - 24px)) !important; }
  #hero .scroll-hint { left: 204.8px; }
  #engineering .ww-hero { margin-left: calc(50% - 1280px) !important; width: 2560px; padding-left: 204.8px; padding-right: 204.8px; }
}