/* Mostly Digital - vector placement + mobile refinements. 2026-10-03 */

/* Desktop / laptop: make the contextual vectors more visible where space allows. */
@media (min-width:981px){
  .section-head.md-vector-host,
  .fragment-head.md-vector-host,
  .measurement-head.md-vector-host,
  .capability-heading.md-vector-host{position:relative}

  .section-head.md-vector-host .md-vector-float{
    width:220px!important;
    right:0!important;
    top:-56px!important;
    opacity:.98!important;
  }
  .section-head.md-vector-host>p{padding-right:238px!important}

  .md-services-vector .md-vector-float{width:230px!important;right:0!important;top:-62px!important}
  .md-about-vector .md-vector-float,.md-insights-vector .md-vector-float{width:210px!important;top:-52px!important}

  .fragment-head.md-vector-host .md-vector-float,
  .measurement-head.md-vector-host .md-vector-float,
  .capability-heading.md-vector-host .md-vector-float{
    width:250px!important;
    right:0!important;
    top:-42px!important;
    opacity:.96!important;
  }
  .fragment-head.md-vector-host>p,
  .measurement-head.md-vector-host>p,
  .capability-heading.md-vector-host>p{padding-right:260px!important}
}

/* A white outline vector for the open black space on the homepage operator section. */
.operator-section{position:relative;overflow:hidden}
.operator-vector{
  position:absolute;
  right:4%;
  top:108px;
  width:min(440px,30vw);
  height:auto;
  opacity:.16;
  filter:brightness(0) invert(1);
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.operator-copy,.operator-loop{position:relative;z-index:1}

/* Footer logo: white mark directly on the black footer. */
.site-footer-rich .footer-logo{background:transparent!important;border:0!important;padding:0!important;width:150px!important}
.site-footer-rich .footer-logo img{filter:brightness(0) invert(1)!important;width:100%!important;height:auto!important}

/* One consistent mobile header size on Home + every inner page. */
@media (max-width:760px){
  .site-header{height:92px!important;min-height:92px!important;padding:0 20px!important;grid-template-columns:1fr auto!important;gap:16px!important}
  .site-header .brand{width:118px!important;height:78px!important;display:flex!important;align-items:center!important;overflow:visible!important}
  .site-header .brand img{width:104px!important;height:auto!important;max-height:72px!important;object-fit:contain!important}
  .site-header .menu-toggle,.site-header .menu-btn{display:block!important;min-width:82px!important;height:48px!important;padding:0 16px!important;font-size:17px!important;line-height:1!important;background:transparent!important;border:1px solid var(--ink)!important}
  .mobile-nav.open{inset:92px 0 0!important}

  /* Show contextual vectors on mobile as separate blocks instead of hiding them. */
  .section-head.md-vector-host>p,
  .fragment-head.md-vector-host>p,
  .measurement-head.md-vector-host>p,
  .capability-heading.md-vector-host>p{padding-right:0!important}

  .md-vector-float{
    display:block!important;
    position:relative!important;
    right:auto!important;
    left:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:min(62vw,240px)!important;
    height:auto!important;
    margin:18px 0 4px auto!important;
    opacity:1!important;
    mix-blend-mode:normal!important;
    pointer-events:none!important;
  }

  /* Fragmented vs Connected: stack the two states instead of squeezing a split-screen. */
  .fragment-section{padding-top:72px!important;padding-bottom:78px!important}
  .fragment-head{margin-bottom:34px!important}
  .compare-shell{overflow:hidden!important}
  .compare-labels{display:none!important}
  .compare-window{height:auto!important;display:grid!important;grid-template-columns:1fr!important;overflow:visible!important}
  .compare-side{position:relative!important;inset:auto!important;padding:24px!important;overflow:hidden!important}
  .compare-before{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;background:#E9E7E2!important}
  .compare-before:before,.compare-after:before{grid-column:1/-1;display:block;font:700 9px var(--mono);letter-spacing:.08em;margin-bottom:4px}
  .compare-before:before{content:'FRAGMENTED'}
  .compare-after:before{content:'CONNECTED';align-self:flex-start}
  .chaos-card{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:auto!important;height:auto!important;min-height:86px!important;padding:13px!important;box-shadow:5px 5px 0 rgba(12,12,12,.10)!important}
  .chaos-card span{font-size:18px!important}
  .compare-before p{position:static!important;left:auto!important;bottom:auto!important;grid-column:1/-1!important;max-width:none!important;width:auto!important;margin:12px 0 0!important;font-size:15px!important;line-height:1.55!important}
  .compare-after{clip-path:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;min-height:390px!important;background:var(--ink)!important}
  .compare-after:before{color:var(--warm)!important;width:100%}
  .connected-orbit{position:relative!important;right:auto!important;top:auto!important;width:250px!important;height:250px!important;margin:10px auto 6px!important;flex:0 0 auto!important}
  .connected-core{width:104px!important;height:104px!important}
  .connected-core b{font-size:17px!important}
  .co{font-size:8px!important;padding:7px 9px!important}
  .co1{left:-10px!important}.co2{top:-12px!important}.co3{right:-12px!important}.co4{right:1%!important}.co5{left:4%!important}
  .compare-after p{position:static!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;text-align:left!important;margin:18px 0 0!important;font-size:15px!important;line-height:1.55!important;color:rgba(249,248,248,.78)!important}
  .compare-divider,.compare-range{display:none!important}

  /* Digital Growth Opportunity Audit: clean single-column card on mobile. */
  .audit-section{margin:72px auto!important;padding-left:20px!important;padding-right:20px!important}
  .audit-visual{min-height:auto!important;padding:20px!important;overflow:visible!important}
  .audit-scorecard{width:100%!important;box-shadow:6px 6px 0 var(--ink)!important}
  .audit-visual>img{display:none!important}
  .scorecard-head{min-height:48px!important;height:auto!important;padding:13px 12px!important}
  .score-row{height:auto!important;min-height:62px!important;padding:13px 12px!important;gap:12px!important}
  .score-row span{font-size:14px!important;line-height:1.25!important}
  .score-row b{flex:0 0 auto!important;padding:6px 8px!important}
  .scorecard-foot{height:auto!important;min-height:64px!important;padding:13px 12px!important;gap:10px!important}
  .audit-copy{padding:38px 24px!important}
  .audit-copy h2{font-size:clamp(44px,12vw,62px)!important;line-height:.96!important}
  .audit-copy>p{font-size:16px!important}

  /* White outline vector also appears on mobile, but without crowding the copy. */
  .operator-vector{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    display:block!important;
    width:min(72vw,300px)!important;
    margin:18px 20px 8px auto!important;
    opacity:.16!important;
  }

  /* Final CTA: keep the headline and motif inside the viewport. */
  .final-section{margin:0 20px 70px!important}
  .final-card{min-height:500px!important;padding:42px 24px!important}
  .final-card h2{font-size:clamp(50px,13vw,76px)!important;line-height:.88!important;margin:46px 0 28px!important;max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important}
  .final-card p{font-size:17px!important;max-width:88%!important;position:relative!important;z-index:2!important}
  .final-motif{width:62%!important;height:68%!important;right:-28%!important;top:18%!important;opacity:.72!important}

  /* Footer logo stays clear and white on mobile too. */
  .site-footer-rich .footer-logo{width:128px!important}
  .site-footer-rich .footer-logo img{filter:brightness(0) invert(1)!important}
}

@media (max-width:430px){
  .site-header{height:88px!important;min-height:88px!important}
  .site-header .brand{width:112px!important;height:74px!important}
  .site-header .brand img{width:100px!important}
  .site-header .menu-toggle,.site-header .menu-btn{min-width:76px!important;height:46px!important;font-size:16px!important}
  .mobile-nav.open{inset:88px 0 0!important}
  .compare-before{grid-template-columns:1fr!important}
  .compare-before p{grid-column:1!important}
  .connected-orbit{width:230px!important;height:230px!important}
  .md-vector-float{width:min(66vw,220px)!important}
  .operator-vector{width:min(78vw,260px)!important;margin-right:18px!important}
  .final-card h2{font-size:clamp(48px,12.5vw,64px)!important}
}