/**
 * Approach page refinement — density, contrast, institutional tone
 * Scoped: body.approach · load after approach.css
 */

body.approach{
  --ap-section-y:var(--bh-section-y);
  --ap-hero-env-opacity:0.82;
  --ap-hero-env-filter:grayscale(10%) contrast(1.16) saturate(0.88);
  --ap-env-bleed:clamp(36px,6vw,88px);
  --ap-env-photo-w:136%;
  --ap-env-photo-h:128%;
  --ap-env-bleed-r:calc(-1 * clamp(18px,3.2vw,48px));
  --ap-env-focal-r:64% 36%;
  --ap-module-text:clamp(1.1875rem,1.15vw,1.3125rem);
  --bh-footer-fade:1600ms;
  --bh-footer-quote-interval:32000ms;
}

/* -------------------------------------------------------------------------
   Section rhythm — ~12% tighter between major blocks
   ------------------------------------------------------------------------- */
body.approach .ap-block{
  padding:var(--ap-section-y) 0;
}

body.approach .ap-diag-intro{
  margin-bottom:clamp(var(--bh-space-6),5vw,var(--bh-space-7));
}

body.approach .ap-diag-after{
  margin-top:clamp(var(--bh-space-6),6vw,var(--bh-space-8));
  padding-top:clamp(var(--bh-space-5),4vw,var(--bh-space-6));
}

body.approach .ap-prose p{
  margin-top:clamp(var(--bh-space-4),2.6vw,var(--bh-space-5));
}

body.approach .ap-rule{
  margin:clamp(var(--bh-space-4),2.8vw,var(--bh-space-5)) 0 clamp(var(--bh-space-5),3.2vw,var(--bh-space-6));
}

/* -------------------------------------------------------------------------
   Hero — additional ~12% shorter · larger diamond geometry · right bleed
   ------------------------------------------------------------------------- */
body.approach .ap-hero-inner{
  padding:var(--bh-hero-y-top) var(--space-section-x) var(--bh-hero-y-bottom);
}

body.approach .ap-hero-grid{
  gap:clamp(var(--bh-space-5),5vw,var(--bh-space-7));
}

body.approach .ap-hero-kicker{
  margin-bottom:var(--bh-space-4);
}

body.approach .ap-hero h1{
  margin-bottom:clamp(var(--bh-space-4),3.2vw,var(--bh-space-6));
}

body.approach .ap-hero-visual{
  min-height:clamp(116px,15.8vw,193px);
  margin-right:calc(-1 * clamp(40px,7vw,112px));
  overflow:visible;
}

body.approach .ap-hero-visual__figure{
  margin:0;
  width:100%;
  position:relative;
  min-height:clamp(116px,15.8vw,193px);
}

body.approach .ap-hero-visual .ap-arch__crop{
  border:var(--bh-hairline) solid rgba(17,17,17,0.12);
  clip-path:polygon(0 8%,100% 0,100% 92%,0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
  position:absolute;
  top:0;
  right:calc(-1 * (var(--ap-env-bleed) + min(5vw,48px)));
  bottom:0;
  left:auto;
  width:calc(100% + var(--ap-env-bleed) + min(18vw,136px));
  min-height:clamp(116px,15.8vw,193px);
}

body.approach .ap-hero-visual .ap-arch__crop::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(
    90deg,
    var(--bh-bg) 0%,
    var(--bh-bg) 18%,
    rgba(255,255,255,0.48) 42%,
    rgba(255,255,255,0.08) 64%,
    transparent 92%
  );
}

body.approach .ap-hero::after{
  top:clamp(34px,8.5vh,82px);
  height:clamp(88px,14.5vh,148px);
}

/* -------------------------------------------------------------------------
   Enterprise decomposition — line contrast · connectors · labels
   ------------------------------------------------------------------------- */
body.approach .ap-osm{
  border-color:rgba(17,17,17,0.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 1px 0 rgba(17,17,17,0.08);
}

body.approach .ap-osm__head{
  border-bottom-color:rgba(17,17,17,0.18);
}

body.approach .ap-osm__eyebrow{
  color:rgba(17,17,17,0.62);
  font-size:10.5px;
}

body.approach .ap-osm__schema-id{
  color:var(--ap-teal);
  opacity:1;
}

body.approach .ap-osm__grid-ref{
  opacity:0.62;
  background-image:
    linear-gradient(to right,rgba(17,17,17,0.1) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(17,17,17,0.1) 1px,transparent 1px);
}

body.approach .ap-osm__node{
  border-color:rgba(17,17,17,0.26);
}

body.approach .ap-osm__node--outcome{
  border-color:rgba(17,17,17,0.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 1px 0 rgba(17,17,17,0.07);
}

body.approach .ap-osm__node--sub{
  border-color:rgba(17,17,17,0.28);
}

body.approach .ap-osm__lvl{
  font-size:9px;
  font-weight:600;
  color:rgba(17,17,17,0.64);
}

body.approach .ap-osm__name{
  color:var(--bh-ink);
  font-weight:600;
}

body.approach .ap-osm__node--outcome .ap-osm__name{
  font-size:var(--bh-text-md);
}

body.approach .ap-osm__hint{
  color:var(--bh-ink-2);
}

body.approach .ap-osm__stem{
  width:2px;
  background:linear-gradient(180deg,rgba(17,17,17,0.78) 0%,rgba(17,17,17,0.42) 100%);
}

body.approach .ap-osm__joint{
  width:6px;
  height:6px;
  opacity:1;
  background:var(--bh-accent);
}

body.approach .ap-osm__joint--wide{
  height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(17,17,17,0.66) 5%,rgba(17,17,17,0.66) 95%,transparent 100%);
}

body.approach .ap-osm__fan-leg{
  width:2px;
  background:linear-gradient(180deg,rgba(17,17,17,0.68),rgba(17,17,17,0.32));
}

body.approach .ap-osm__baseline{
  background:rgba(17,17,17,0.2);
}

body.approach .ap-osm__baseline-teal{
  background:linear-gradient(90deg,var(--ap-teal) 0%,rgba(34,162,159,0.48) 100%);
}

body.approach .ap-osm__caption{
  color:var(--bh-ink-2);
  font-size:var(--bh-text-sm);
}

body.approach .ap-diag-rail{
  border-color:rgba(17,17,17,0.16);
}

body.approach .ap-diag-rail__tag,
body.approach .ap-diag-rail__steps{
  color:rgba(17,17,17,0.52);
}

/* -------------------------------------------------------------------------
   Framework modules — dense editorial cards
   ------------------------------------------------------------------------- */
body.approach .ap-modules-lede{
  margin:clamp(var(--bh-space-3),2.4vw,var(--bh-space-4)) 0 clamp(var(--bh-space-5),4vw,var(--bh-space-6));
}

body.approach .ap-modules{
  gap:clamp(var(--bh-space-4),3.2vw,var(--bh-space-5));
}

body.approach .ap-module{
  padding:var(--bh-space-3) clamp(var(--bh-space-3),2.6vw,var(--bh-space-4));
  border-color:rgba(17,17,17,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95);
}

body.approach .ap-module--emphasis{
  background:linear-gradient(155deg,#2c2c2c 0%,#1a1a1a 52%,#222 100%);
  border-color:rgba(255,255,255,0.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}

body.approach .ap-module__head{
  margin-bottom:var(--bh-space-2);
  padding-bottom:var(--bh-space-2);
}

body.approach .ap-module__id{
  min-width:26px;
  height:26px;
  margin-bottom:var(--bh-space-1);
  font-size:10px;
}

body.approach .ap-module__title{
  font-size:clamp(1.25rem,1.4vw,1.5rem);
  line-height:1.24;
}

body.approach .ap-module__role{
  margin-top:var(--bh-space-1);
  font-size:var(--bh-text-xs);
}

body.approach .ap-module__list li{
  padding:calc(var(--bh-space-2) * 0.85) 0 calc(var(--bh-space-2) * 0.85) var(--bh-space-3);
  font-size:var(--ap-module-text);
  line-height:1.52;
  color:var(--bh-ink-2);
  border-top-color:rgba(17,17,17,0.1);
}

body.approach .ap-module--emphasis .ap-module__list li{
  color:rgba(235,235,235,0.9);
  border-top-color:rgba(255,255,255,0.14);
}

body.approach .ap-module--emphasis .ap-module__role{
  color:rgba(235,235,235,0.66);
}

body.approach .ap-module__list li:first-child::before{
  top:0.38rem;
  width:5px;
  height:5px;
}

/* -------------------------------------------------------------------------
   Dark transition — stronger architectural texture
   ------------------------------------------------------------------------- */
body.approach .ap-anchor{
  padding:clamp(var(--bh-space-7),9vw,calc(var(--bh-unit)*30)) 0;
  border-top:var(--bh-hairline) solid rgba(17,17,17,0.2);
  background:
    radial-gradient(88% 75% at 8% 22%,rgba(34,162,159,0.12) 0%,transparent 52%),
    linear-gradient(168deg,#070707 0%,#121212 42%,#050505 100%);
}

body.approach .ap-anchor__texture{
  opacity:0.84;
  background-image:
    repeating-linear-gradient(-11deg,transparent 0,transparent 20px,rgba(255,255,255,0.065) 20px,rgba(255,255,255,0.065) 21px),
    linear-gradient(90deg,rgba(255,255,255,0.07) 1px,transparent 1px);
}

body.approach .ap-anchor__texture::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

body.approach .ap-anchor__grid-mark{
  background:linear-gradient(90deg,var(--bh-accent) 0%,var(--bh-accent) 36%,rgba(255,255,255,0.26) 36%,rgba(255,255,255,0.26) 100%);
}

body.approach .ap-anchor__kicker{
  color:rgba(235,235,235,0.66);
}

body.approach .ap-anchor__lead{
  color:rgba(235,235,235,0.86);
}

body.approach .ap-anchor__row{
  margin:clamp(var(--bh-space-6),6vw,var(--bh-space-8)) 0 clamp(var(--bh-space-6),5vw,var(--bh-space-7));
  border-top-color:rgba(255,255,255,0.18);
}

body.approach .ap-anchor__pair{
  color:rgba(240,240,240,0.72);
}

body.approach .ap-anchor__term{
  color:#fafafa;
}

body.approach .ap-anchor__arrow{
  background:linear-gradient(90deg,rgba(34,162,159,0.7),rgba(255,255,255,0.34));
}

/* -------------------------------------------------------------------------
   Motion — slow carousel · opacity only · no zoom
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  body.approach .ap-reveal{
    opacity:0;
    transform:none;
    transition:opacity 800ms ease;
  }

  body.approach .ap-reveal.is-visible{
    opacity:1;
    transform:none;
  }
}

body.approach .bh-footer .bh-footer__quote{
  transform:none;
  transition:opacity var(--bh-footer-fade) ease;
}

body.approach .bh-footer .bh-footer__quote.bh-footer__quote--out{
  opacity:0;
  transform:none;
}

/* -------------------------------------------------------------------------
   Footer — denser spacing · improved contrast
   ------------------------------------------------------------------------- */
body.approach main{
  padding-bottom:var(--bh-main-pad-bottom);
}

body.approach .bh-footer{
  margin-top:clamp(var(--bh-space-4),4.5vw,var(--bh-space-5));
  padding:clamp(var(--bh-space-3),2.8vw,var(--bh-space-4)) var(--space-section-x)
    clamp(var(--bh-space-3),2.4vw,var(--bh-space-4));
  border-top-color:rgba(255,255,255,0.16);
}

body.approach .bh-footer__grid{
  gap:clamp(var(--bh-space-3),2.4vw,var(--bh-space-5));
}

body.approach .bh-footer .bh-footer__nav{
  padding:var(--bh-space-3) clamp(var(--bh-space-4),3.5vw,var(--bh-space-6));
  border-left-color:rgba(255,255,255,0.16);
  border-right-color:rgba(255,255,255,0.16);
}

body.approach .bh-footer__links{
  gap:var(--bh-space-2);
}

body.approach .bh-footer__tagline,
body.approach .bh-footer__systems{
  color:rgba(255,255,255,0.82);
}

body.approach .bh-footer__links a{
  color:rgba(255,255,255,0.92);
}

body.approach .bh-footer__links a:hover,
body.approach .bh-footer__links a:focus-visible{
  color:#fff;
}

body.approach .bh-footer__intel{
  padding-left:clamp(var(--bh-space-4),3vw,var(--bh-space-6));
  border-left-color:rgba(34,162,159,0.58);
}

body.approach .bh-footer__quote{
  color:rgba(255,255,255,0.92);
}

body.approach .bh-footer__rule{
  margin-top:clamp(var(--bh-space-3),2.4vw,var(--bh-space-4));
  height:var(--bh-space-3);
}

body.approach .bh-footer__rule::before{
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.16) 10%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.16) 90%,
    transparent
  );
}

body.approach .bh-footer__base{
  margin-top:var(--bh-space-3);
  padding-top:var(--bh-space-2);
  border-top-color:rgba(255,255,255,0.14);
}

body.approach .bh-footer__copy{
  color:rgba(255,255,255,0.56);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width:960px){
  body.approach .ap-hero-visual{
    min-height:clamp(140px,28vw,208px);
  }

  body.approach .ap-hero-visual__figure{
    min-height:clamp(140px,28vw,208px);
  }

  body.approach .ap-hero-visual .ap-arch__crop{
    position:relative;
    right:auto;
    width:100%;
    min-height:clamp(140px,28vw,208px);
  }
}