/**
 * Approach page — Phase 2 Brand Transformation
 * Institutional advisory · distinctive methodology · one conceptual centerpiece
 * Scoped: body.approach · load LAST on approach.html
 */

/* -------------------------------------------------------------------------
   Quiet chrome — no product metadata or fake engineering layers
   ------------------------------------------------------------------------- */
body.approach .ap-hero__structural-bg,
body.approach .ap-hero::before,
body.approach .ap-hero::after,
body.approach .ap-split__counter-meta,
body.approach .ap-anchor__grid-mark,
body.approach .bh-footer__intel,
body.approach .ap-arch__mesh,
body.approach .ap-arch__engineered,
body.approach .ap-arch__facets,
body.approach .ap-arch__ribs,
body.approach .ap-arch__datum,
body.approach .ap-arch__cap,
body.approach .ap-diag-frame,
body.approach .ap-modules,
body.approach .ap-modules-lede,
body.approach .ap-modules-section-title,
body.approach .ap-block--texture.ap-block--grid::before,
body.approach .ap-block--texture.ap-block--grid::after{
  display:none !important;
}

/* -------------------------------------------------------------------------
   Hero — stacked editorial (distinct from homepage split layout)
   ------------------------------------------------------------------------- */
body.approach .ap-hero{
  border-bottom-color:rgba(17,17,17,0.06);
}

body.approach .ap-hero-inner{
  padding:clamp(var(--bh-space-6),8vw,calc(var(--bh-unit)*16)) var(--space-section-x)
    clamp(var(--bh-space-5),5vw,var(--bh-space-7));
}

body.approach .ap-hero-grid{
  display:flex;
  flex-direction:column;
  gap:clamp(var(--bh-space-6),5.5vw,var(--bh-space-8));
  align-items:stretch;
}

body.approach .ap-hero-copy{
  max-width:44rem;
  padding-left:clamp(var(--bh-space-4),3vw,var(--bh-space-5));
  border-left:1px solid rgba(34,162,159,0.55);
}

body.approach .ap-hero-copy::before{
  display:none;
}

body.approach .ap-hero-kicker{
  font-weight:500;
  color:rgba(17,17,17,0.52);
  margin-bottom:var(--bh-space-3);
}

body.approach .ap-hero h1{
  font-weight:500;
  max-width:16ch;
  margin-bottom:clamp(var(--bh-space-4),3.2vw,var(--bh-space-5));
}

body.approach .ap-hero-sub{
  font-size:clamp(1.25rem,1.45vw,1.4375rem);
  line-height:1.58;
  color:var(--bh-ink-2);
  max-width:38rem;
}

body.approach .ap-hero-visual{
  margin-right:calc(-1 * var(--space-section-x));
  margin-left:calc(-1 * clamp(0px,2vw,var(--bh-space-3)));
  min-height:clamp(180px,32vw,280px);
  order:2;
}

body.approach .ap-hero-visual .ap-arch__crop{
  width:100%;
  max-width:none;
  min-height:clamp(180px,32vw,280px);
  clip-path:none;
  border:none;
  box-shadow:none;
  background-image:var(--bh-img-1);
  background-size:cover;
  background-position:78% 40%;
}

body.approach .ap-hero-visual .ap-arch__crop::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    var(--bh-bg) 0%,
    rgba(255,255,255,0.72) 16%,
    rgba(255,255,255,0.12) 42%,
    transparent 72%
  );
}

/* -------------------------------------------------------------------------
   Opening band — prose-first · quiet side plane
   ------------------------------------------------------------------------- */
body.approach .ap-split{
  grid-template-columns:minmax(0,1fr) minmax(140px,0.34fr);
  gap:clamp(var(--bh-space-6),5vw,var(--bh-space-8));
  align-items:start;
}

body.approach .ap-split__counter .ap-arch__crop{
  min-height:clamp(140px,20vw,220px);
  clip-path:none;
  border:none;
  background-image:var(--bh-img-2);
  background-size:cover;
  background-position:90% 38%;
  opacity:0.22;
}

body.approach .ap-prose p{
  font-size:clamp(1.125rem,1.32vw,1.3125rem);
  line-height:1.58;
}

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

/* -------------------------------------------------------------------------
   Centerpiece — conceptual operating discipline (not software architecture)
   ------------------------------------------------------------------------- */
body.approach .ap-block--framework{
  padding:clamp(var(--bh-space-6),7vw,calc(var(--bh-unit)*18)) 0;
  border-top:var(--bh-hairline) solid rgba(17,17,17,0.08);
  border-bottom:var(--bh-hairline) solid rgba(17,17,17,0.08);
  background:var(--bh-bg-soft);
}

body.approach .ap-framework-intro{
  max-width:40rem;
  margin-bottom:clamp(var(--bh-space-6),5vw,var(--bh-space-8));
}

body.approach .ap-framework-intro .ap-statement{
  font-weight:500;
  margin-bottom:clamp(var(--bh-space-3),2.4vw,var(--bh-space-4));
}

body.approach .ap-framework-intro .ap-prose--intro{
  font-size:clamp(1.125rem,1.32vw,1.3125rem);
  line-height:1.58;
  color:var(--bh-ink-2);
}

body.approach .ap-framework{
  margin:0;
  max-width:56rem;
}

body.approach .ap-framework__visual{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:clamp(var(--bh-space-4),3.6vw,var(--bh-space-6));
  align-items:stretch;
  padding:clamp(var(--bh-space-5),4.5vw,var(--bh-space-7)) 0;
}

body.approach .ap-framework__pillar{
  padding:clamp(var(--bh-space-4),3.6vw,var(--bh-space-5))
    clamp(var(--bh-space-4),3.2vw,var(--bh-space-5));
  border-top:var(--bh-hairline) solid rgba(17,17,17,0.14);
  background:rgba(255,255,255,0.72);
}

body.approach .ap-framework__pillar--interpret{
  border-left:2px solid rgba(34,162,159,0.62);
}

body.approach .ap-framework__pillar--govern{
  border-right:2px solid rgba(17,17,17,0.22);
}

body.approach .ap-framework__name{
  display:block;
  font-size:clamp(1.375rem,1.8vw,1.625rem);
  font-weight:500;
  letter-spacing:-0.024em;
  line-height:1.15;
  color:var(--bh-ink);
  margin-bottom:clamp(var(--bh-space-2),1.8vw,var(--bh-space-3));
}

body.approach .ap-framework__desc{
  margin:0;
  font-size:clamp(1.0625rem,1.15vw,1.125rem);
  line-height:1.55;
  color:var(--bh-ink-2);
}

body.approach .ap-framework__points{
  margin:clamp(var(--bh-space-3),2.2vw,var(--bh-space-4)) 0 0;
  padding:0;
  list-style:none;
}

body.approach .ap-framework__points li{
  padding:calc(var(--bh-space-1) + 1px) 0;
  font-size:clamp(1rem,1.08vw,1.0625rem);
  line-height:1.48;
  color:var(--bh-ink-2);
  border-top:var(--bh-hairline) solid rgba(17,17,17,0.08);
}

body.approach .ap-framework__points li:first-child{
  border-top:none;
  padding-top:0;
}

body.approach .ap-framework__join{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--bh-space-2);
  padding:0 clamp(var(--bh-space-2),1.6vw,var(--bh-space-3));
  min-width:3.5rem;
}

body.approach .ap-framework__join-line{
  flex:1;
  width:1px;
  min-height:2.5rem;
  background:linear-gradient(180deg,rgba(17,17,17,0.08),rgba(34,162,159,0.45),rgba(17,17,17,0.08));
}

body.approach .ap-framework__join-label{
  font-size:0.6875rem;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(17,17,17,0.42);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}

body.approach .ap-framework__base{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--bh-space-4);
  padding-top:clamp(var(--bh-space-4),3vw,var(--bh-space-5));
  border-top:var(--bh-hairline) solid rgba(17,17,17,0.12);
}

body.approach .ap-framework__base-rule{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(17,17,17,0.2),transparent);
}

body.approach .ap-framework__base-label{
  font-size:clamp(1.125rem,1.28vw,1.25rem);
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--bh-ink);
  white-space:nowrap;
}

body.approach .ap-framework__base-note{
  grid-column:1 / -1;
  margin:0;
  max-width:36rem;
  font-size:clamp(1.0625rem,1.12vw,1.125rem);
  line-height:1.55;
  color:var(--bh-ink-2);
}

body.approach .ap-framework__caption{
  margin:clamp(var(--bh-space-5),4vw,var(--bh-space-6)) 0 0;
  padding-top:clamp(var(--bh-space-4),3vw,var(--bh-space-5));
  border-top:var(--bh-hairline) solid rgba(17,17,17,0.1);
  font-size:clamp(1.125rem,1.28vw,1.25rem);
  line-height:1.52;
  font-weight:500;
  color:var(--bh-ink);
  font-style:normal;
}

body.approach .ap-framework-after{
  max-width:40rem;
  margin-top:clamp(var(--bh-space-5),4.5vw,var(--bh-space-7));
}

body.approach .ap-framework-after p{
  font-size:clamp(1.125rem,1.32vw,1.3125rem);
  line-height:1.58;
  color:var(--bh-ink-2);
  margin:0 0 clamp(var(--bh-space-3),2.2vw,var(--bh-space-4));
}

/* -------------------------------------------------------------------------
   Pillars band — editorial companion (not SaaS cards)
   ------------------------------------------------------------------------- */
body.approach .ap-block--pillars{
  padding:clamp(var(--bh-space-6),6vw,calc(var(--bh-unit)*16)) 0;
}

body.approach .ap-pillars-intro{
  max-width:34rem;
  margin-bottom:clamp(var(--bh-space-5),4vw,var(--bh-space-6));
}

body.approach .ap-pillars-intro .ap-statement{
  font-weight:500;
}

body.approach .ap-pillars{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(var(--bh-space-6),5vw,var(--bh-space-8));
  max-width:52rem;
}

body.approach .ap-pillar{
  padding:0 0 0 clamp(var(--bh-space-4),3vw,var(--bh-space-5));
  border-left:var(--bh-hairline) solid rgba(17,17,17,0.18);
}

body.approach .ap-pillar__title{
  margin:0 0 var(--bh-space-2);
  font-size:clamp(1.25rem,1.45vw,1.375rem);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.2;
  color:var(--bh-ink);
}

body.approach .ap-pillar__lede{
  margin:0 0 clamp(var(--bh-space-3),2.2vw,var(--bh-space-4));
  font-size:clamp(1.0625rem,1.12vw,1.125rem);
  line-height:1.52;
  color:var(--bh-ink-2);
}

body.approach .ap-pillar__list{
  margin:0;
  padding:0;
  list-style:none;
}

body.approach .ap-pillar__list li{
  padding:calc(var(--bh-space-1) + 2px) 0;
  font-size:clamp(1rem,1.06vw,1.0625rem);
  line-height:1.5;
  color:var(--bh-ink-2);
}

/* -------------------------------------------------------------------------
   Closing band — one CTA · restrained
   ------------------------------------------------------------------------- */
body.approach .ap-anchor__kicker,
body.approach .ap-anchor__row{
  display:none;
}

body.approach .ap-anchor__inner{
  max-width:40rem;
}

body.approach .ap-anchor__headline{
  font-weight:500;
}

body.approach .ap-anchor__lead{
  font-size:clamp(1.125rem,1.32vw,1.3125rem);
  line-height:1.58;
  max-width:36rem;
}

body.approach .ap-btn{
  margin-top:clamp(var(--bh-space-5),3.6vw,var(--bh-space-6));
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width:820px){
  body.approach .ap-split{
    grid-template-columns:1fr;
  }

  body.approach .ap-split__counter{
    order:-1;
    max-width:280px;
    margin-bottom:var(--bh-space-4);
  }

  body.approach .ap-framework__visual{
    grid-template-columns:1fr;
    gap:var(--bh-space-4);
  }

  body.approach .ap-framework__join{
    flex-direction:row;
    min-width:0;
    padding:var(--bh-space-2) 0;
  }

  body.approach .ap-framework__join-line{
    flex:1;
    width:auto;
    height:1px;
    min-height:0;
    background:linear-gradient(90deg,rgba(17,17,17,0.08),rgba(34,162,159,0.45),rgba(17,17,17,0.08));
  }

  body.approach .ap-framework__join-label{
    writing-mode:horizontal-tb;
    transform:none;
  }

  body.approach .ap-pillars{
    grid-template-columns:1fr;
    gap:var(--bh-space-5);
  }
}